The development approach for this site was to get rid of any unnecessary transpilers – get down to the process of web designing as quickly as possible. Specifically, we wanted to avoid using Webpack as the site was meant to be fairly simple. The reasoning is that on many occasions, we found ourselves spending hours debugging Webpack's errors and warnings due to various module related issues.
Nonetheless, there was an exception for the PostCSS preprocessor – in order to build the Tailwind CSS file, handle imports and add prefixes. You could also count in the static site generator Eleventy, which was the main driving force. This gave us almost full control and transparency over the final code.
We implemented the i18n capability for two languages using an awesome Alpine.js library. We definitely were stretching the capabilities of the library here a little, but so far so good.
And why did we do it this way? Well, for once it all works as it should and it was fun doing things differently!
Just a bit on the UI/UX: the page is fairly long in order to fit necessary information without being too condensed and have enough whitespace. Also, users are likely to scroll quickly through and/or stop at the section that interests them – either visually or context-wise (like with newspaper or magazine). Lastly, the website was designed as a single-page application (SPA), so there is no need to switch between pages. All new content is loaded dynamically.
- single page application
- no backend, no db
- only using UMD format of external JS libraries
- automatic minification of all code files during the build
- global data store
- JS router
- i18n capability
- Nunjucks templating engine
- async section loading with Alpine.js
- browser-native image lazy loading
Main technology stack
Disclaimer: we are using pnpm instead of npm or yarn (psst.. it saves space).
Start a web server with hot-reloading and automatic compilation when a change is detected
pnpm run dev
Creating a production build
Copy library files from node_modules, minify HTML, inline/minify CSS and compress JS.
pnpm run build