Webstoemp is the portfolio and blog of Jérôme Coupé, a designer and front-end developer from Brussels, Belgium.
I like to use NPM scripts for my asset pipeline instead of using Eleventy to generate assets and orchestrate everything. The latest release of Eleventy Dev Server makes that approach both easy to implement and quite performant. Two approaches to asset pipelines As outlined by Max Bock in his infamous blogpost about asset pipelines , there are two main ways to transform your assets source files…
These days, web development and design are all about modularization and components. Template languages have a lot to offer and Eleventy itself has a few tricks up its sleeve. Team Nunjucks I personally use Nunjucks as my templating language with Eleventy. On top of being powerful and simple to learn, its syntax is similar to Twig, which I have been using for a while in Craft projects. That being…
One of the great things about Eleventy is its flexibility and its lack of assumptions about how your projects should be organized. However, in order to preserve my own sanity, I needed to come up with a default files and folders architecture that made sense to me. Coupled with my lack of personal conventions regarding projects architecture, the unopinionated nature of Eleventy meant that all my…
For a recent project, I needed a minimalist video player for services like Youtube and Vimeo. The objectives were to wait for user interaction to load videos, have a custom cover image and build a straightforward and maintainable solution. Objectives The website I was working on could potentially have up to 12 video players on a single page. For performance reasons, I didn't want to load all these…
In Craft 3, elements queries parameters use dot syntax exclusively, which changed how to implement search and filters with modular element queries. Here is a quick rundown of how I approach it nowadays. Then and now With Craft 2, my go-to approach to build modular element queries was to manipulate objects with Twig before passing them to element queries as parameters. Here is a basic example using…
While I regularily use services like Buddy or DeployHQ to build and deploy Craft CMS websites, I wanted to experiment with Github Actions. Here is what I came up with and why. Why Github Actions? Services like Buddy or DeployHQ are really powerful. They allow you to setup complex build and deployment pipelines like atomic deployments using a nice GUI interface. That being said, that power and ease…
Fetching a whole bunch of data from APIs at build time can be an intensive process. Getting that data in a performant way and caching it locally is an important part of Jamstack projects. Don't use await in loops One of my older post is about fetching data from a GraphQL API with Eleventy . While the example code I wrote works, it does not retrieve data in a very performant way. The problem is…
Eleventy comes with a built-in tagging system. For a recent project, I wanted to use my own category system, which led me to dive a bit deeper into extending and configuring Eleventy. Native approach using tags The tag system Eleventy comes with allows you to group content items into collections automatically by specifying a tags key in those content items' front matters. For example, a post about…
Content Management Systems and structured data are part of my teaching duties. From the get go, I decided to cover both a database-driven CMS and a Static Site Generator. As far as the latter goes, I switched from Jekyll to Eleventy this year. Decoupling Both as a teacher and as a freelancer, I firmly believe that the JAMstack movement and the general trend towards decoupling the view and data…
Following my blogpost on multilingual websites with Eleventy, I had several questions about how to build a language switcher. Here is the approach I generally use. Set the stage With most static sites generators supporting a templating languages, structured data and URL control, building a multilingual website is a relatively easy task. I wrote a small blogpost on how to do it with Eleventy .…