DEV Community 👩‍💻👨‍💻

Play Button Pause Button
JavaScript Joel
JavaScript Joel

Posted on

CUSTOM STATIC SITE GENERATOR (Live Coding) [Part 1] | JavaScript | NodeJS | Images

Watch as I live code a custom static site generator using JavaScript/Node.js.

In this video, I take an images directory, optimize the images, create thumbnails and also create a webp version of the image.

Part 2: https://www.youtube.com/watch?v=UCWxte7IqME

03:30 Setup ESLint + Prettier
08:50 Setup the Debugger
10:15 Output first resized image
22:15 Output images as webp
22:55 Finally set the correct Glob path
26:30 Finally fix ESLint
30:25 Refactor
39:35 Generate Thumbnails
42:15 Final Code

To follow along:

git checkout https://github.com/joelnet/mojo-gallery.git
cd mojo-gallery
git checkout youtube-video-part-1

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!