number304 / lazy-workshop-2

Web Sample of a random generator of fox images. Just a practice about DOM manipulation.

Random Fox Plugin with Lazy Loading

✨ Bootstrapped with Create Snowpack App (CSA).

Web Sample of a random generator of fox images. Just a practice about DOM manipulation.

• Quick start
• Features
• Available Scripts

Features

• Snowpack, of course.
• Tailwind.
• Prettier.
• Force prettier on commit.
• Autopublish on Github Pages.

Q: How do I enable auto publish to GitHub Pages?

1. Create a new Snowpack app using the script from the quick start section.
2. Update the value of homepage in package.json. It should like https://<your-username>.github.io/<your-repo-name> (no trailing slash).
3. Push your changes into a new GitHub repository.
4. You should see an Action running on https://github.com/<your-username>/<repo-name>/actions
5. Make sure to enable GitHub pages for your repo and select the gh-pages branch
6. Give GH Pages some minutes, your site should be live on https://<your-username>.github.io/<your-repo-name>
7. Enjoy :)

Q: How do I disable auto publish to GitHub Pages?

Remove the .github/workflows/publish.yml file.

Available Scripts

npm start

Runs the app in the development mode. Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build

Builds a static copy of your site to the build/ folder. Your app is ready to be deployed!

For the best production performance: Add a build bundler plugin like @snowpack/plugin-webpack or snowpack-plugin-rollup-bundle to your snowpack.config.json config file.