writing about my projects, experiments and ideas
2026-07-14 The joy of extending Tailwind One of the biggest upgrade that came with Tailwind 4 has been the new CSS-based configuration and extensibility system. The CSS configuration came with a new simple syntax, which is very close to the way regular CSS is written. This makes it really easy to integrate Tailwind into a project's design system. Let's consider a regular CSS class. .my-class {…
2026-07-01 A Self-maintaining filesystem for static blogs I've just finished revamping the folder structure of this blog's content to include the date in the file name as in yyyy-mm-dd-post-title.md This finally made opening the posts folder manageable as scanning the ever-growing list of titles, was causing me to dreading opening it at all. Recently, my guiding principle has been to remove any…
2026-06-28 CSS tricks for markdown blogs All the post content you are reading here comes from a single markdown file converted into HTML and stylized with CSS. Reducing what is rendered via template will limit what's possible in terms of layout and interactivity. But it guarantees that, if I move my site to a different setup, the plain text files will carry most of the content with them. Also it's…
2026-06-07 Lessons from a reusable web component Many people commented that they expected the CSS-native parallax effect to have an interactive demo, so I re-opened and modernized a small code-sandbox web component I built last year. Since then, I've dropped it into a handful of projects. Reusing the thing confirmed some of the choices I've made, and gave me some new useful ideas. ⚠️ Note: This…
2026-06-02 CSS-native parallax effect Parallax effects have a long history, and while there are countless ways and libraries to achieve them, a new CSS-native way was recently made possible with CSS Scroll-driven animation timelines . The usual recipe was a scroll event listener in JavaScript, recalculating positions on every frame and nudging an element up and down. Scroll-driven animations…
2026-05-16 Contrast-proofing colors Previously in Text selection color , I covered how the most important thing to keep in mind when setting custom highlight colors, is keeping the contrast high enough. Until recently this meant picking a colour, running it through a checker, and revisiting it whenever the brand palette changed. In 2026 the contrast-color() function reached baseline support, and…
2026-01-17 PostCSS Clampwind In my previous post, Generate fluid styles with a Tailwind plugin I explored generating fluid styles with a Tailwind v3 plugin. The approach worked, but had significant downsides: massive CSS output, fragile selectors, and limited flexibility. After Tailwind v4 came out, I decided to take a completely different approach. The idea Instead of trying to make Tailwind do…
2025-07-02 Generate fluid styles with a Tailwind plugin Tailwind is great and can do a lot of things, but it hasn't yet been adapted to generate fluid styling. Fluid CSS refers to the ability of setting fluid values to CSS properties that change proportionally with the width of the screen, or the container. When typography and spacing system adapt fluidly to any size, the design can take full…
2025-02-02 Convert any webpage to SVG and plot it Here is how this was achieved: Run a Node application that fetches a URL, uses mozilla/readability to turn that page to a simplified document with only the minimally-styled page content, what you normally see when you turn on Reader-mode on your browser of choice The result of this transformation is written to a client-side index.html , here is how…
2025-01-17 Paper over files: print a blog post in plain markdown Front-end developers spend a lot of time thinking about the way a website content is going to be consumed. Not only a web page must work well on devices of all sizes and formats, but a website content must also take accessibility into consideration. This means the markup should use all the proper semantics and attributes to be parsed…
2025-01-11 A code-sandbox web component This is a fork of code-sandbox web component from Chris Ferdinandi for displaying an interactive code sandbox for HTML, CSS and javascript, similar to what CodePen does. Having a code sandbox web component can be useful for showing code snippets in a more interactive way, and it doesn't require any external third-party services like CodePen or JSFiddle .…
2025-01-06 Serve static files with Eleventy Eleventy is a static site generator that can be configured to do everything that you can imagine. A nice addition for a technical blog can be to serve static files. This is useful when you want to include files like PDFs, or downloadable code snippets in your project. This was a research needed to make the code-sandbox web component fetch files…
2025-01-04 Web components and Eleventy The curse and the beauty of Eleventy is that there are a many ways to achieve something. At the same time web components lend themselves to be handled pretty freely because after all, it's just client-side JavaScript. Eleventy guides you in their docs to use WebC , which is their most recommended way to handle web components and offers some benefits like…
2025-01-04 Vanilla project starter template It's quite a common experience for front-end developers go picking up a project that's not been touched for a while and find it hard to get a development environment running in a few minutes. What usually happens is that the project is using a framework or a build tool that's not been updated in a while, or wrong project choices were made. This project…
2024-07-21 Using new Oklch colors to remove dependencies Whenever a new web-development feature is released and gradually makes its way into the most used browsers, it can bring excitement to developers. Not only because of the new possibilities it brings to our craft but also because it can help offload some of the work that had previously required dependencies, to the browser itself. When I…
2024-02-07 Use a 3D printer as a pen plotter I wanted to add to my 3D printer the ability to pick up a pen and start drawing. Luckily, today it's pretty easy to use a 3D printer as a pen plotter. The process is very simple since the printer is already a CNC machine to which you can mount a pen holder, maybe even print a custom one. Build requirements I custom designed the pen holder because I…
2023-12-29 Wiring the Sonoff inside the Ender Power Supply Unit The last missing piece to this project is to wire the Sonoff to have it sit nicely inside the Ender Power Supply Unit. But of course they wouldn't both fit inside the original case, so I had to design and print a new one. Technical drawing of the 3d-printed case The goal of this project is to have a 3D printer that can auto-shutdown,…
2023-12-02 Auto-shutdown a 3D printer with Raspberry Pi and ESPHome One thing that I am not a fan of, is the 3d printer's fan staying on for hours after the print is finished. I know that the power consumption is not that high, but I like the feeling of waking up in the morning and finding the printer turned off and the finished print waiting for me. This apparently simple project also introduced…
2023-11-24 A single enclosure for the Raspberry Pi and the Ender 3 electronics Since I never wanted to have a separate box for the Raspberry Pi, I searched on Thingiverse for a case that could fit together the Raspberry Pi, a few buck converters and the Creality Silent Motherboard v4.2.7 that I had upgraded to from the stock one. Creality Silent Motherboard v4.2.7 From my experience, switching to…
2023-07-21 Text selection color Utilities is one of those words that make web developers recall when you needed complex tricks to have a rounded button or a nice gradient. This is a collection of utilities and snippets I created and refined during my job as front-end developer Today browsers got a lot better, tailwind and javascript framework made life easier and utilities snippets are not that…
2023-04-23 Update the SVG favicon and pseudo-elements dynamically I really like the tiny coloured circle, this post explains what I learned from trying to put it in places that require some hacks to have it change colors dynamically. The gradient inside the circle is generated as a background-image css property, and it's a combination of a radial gradient and a linear gradient . I explained this…
2023-02-26 A technique for generating beautiful color gradients There is only one non-black-and-white piece in the whole UI which is the color gradient circle in the homepage and in the header of the posts. I thought adding a small piece of color would be a fun highlight given the whole website is set in neutral shades. But I didn't want to commit to a specific brand color, also there are many…
2023-02-24 Markdown is the paper of the web The Markdown philosophy states that it's always been a format intended to be easy to write and read, specifically intended for publishing on the web. One of the greatest feature becoming more apparent after seeing the rise and fall of web-publishing services is its portability. The AlphaSmart , or the way I see proprietary publishing platforms If one…
2023-02-24 This blog as a documentation for my projects My goal from the beginning is to have this website as a companion for my projects, a place to document their progress. But also it is a way to keep myself motivated and accountable to keep working at them. I know writing takes time, doing projects takes time and motivation comes and goes, but what bothers me the most are the folders of…
2023-02-21 How to build a minimalist Markdown blog with Eleventy Anybody who ever started a new blog knows the feeling of pursuing a long list of features, only to get overwhelmed by the growing complexity. Knowing this, I tried to build this blog as a stripped-down container for my projects. A simple container Let's admit it, UIs are cool, but usually the focus should be only on displaying…
2023-02-19 Setup a blog with Eleventy 2.0, Tailwind and Alpine.js Hello world! My current job is front-end developer and I wanted to have a new home for my own ideas and tinkering. This didn't took place on a whim of a boring sunday afternoon, but took a few weeks, and it started with looking into very nice Next.js starter templates . They looked amazing but I still decided to trying to develop it…