dan—webnotes

The joy of extending Tailwind

2026-07-14T00:00:00Z

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 {
  display: block;
  color: red;
}

This is a perfectly fine class, and here is the same class registered as a tailwind utility using the new directive @utility.

@utility my-class {
  display: block;
  color: red;
}

Registering a class as a @utility brings super-powers to that class, together with nice improvements in developer experience.

You can now apply that class arbitrarily whenever the design requires it, whether it is desktop-only md:my-class, on hover hover:my-class, when in dark-mode dark:my-class, and many others.
The class is added to the final stylesheet only in case the utility is actually used, avoiding unnecessary CSS.
You can hover a class to lookup its CSS declarations, thanks to the amazing VSCode tailwind-intellisense extension.

Props in CSS

There aren't only static @utility, Tailwind v4 introduced a whole CSS-like syntax to pass values into the utilities it generates. These props can modify the values of the CSS properties within the class, and they can be numbers, colors, percentages, keywords, etc.

It's pretty straightforward to grasp how the new functions work if you are already familiar with CSS syntax and logic. The main functions are --alpha(), --value(), --modifier(), --default().

Check out the official documentation on how to add custom styles, to see how these functions work together, and how they allow to generate complex components on-the-fly. Here are a few examples.

CSS shapes

Using clip-path and the modern CSS function polygon(), together with a size prop, we can generate any sort of CSS-only shapes.

@utility star-* {
	width: calc(--value(number) * var(--spacing));
	height: calc(--value(number) * var(--spacing));
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	flex-shrink: 0;
}

A colored shadow border that blends in

If you are interested in subtle CSS details that make a UI feel polished, you will have probably encountered the border-shadow trick.

.border-shadow {
	box-shadow:
		0px 0px 0px 1px rgba(0, 0, 0, 0.06),
		0px 1px 2px -1px rgba(0, 0, 0, 0.06),
		0px 2px 4px 0px rgba(0, 0, 0, 0.04);
}

But now you can have this technique work with any color, and with any opacity modifier.

@utility border-shadow-* {
  box-shadow:
    0px 0px 0px 1px --alpha(--value(--color-*, [color]) / --modifier([percentage], 6%)),
    0px 1px 2px -1px --alpha(--value(--color-*, [color]) / --modifier([percentage], 6%)),
    0px 2px 4px 0px --alpha(--value(--color-*, [color]) / calc(--modifier([percentage], 6%) * 0.66));
}

A conditional rounded box

Some time ago a post by Ahmad Shadeed gained popularity. It described a CSS one-liner which conditionally rounded an element depending whether the element touched the viewport (or its container) or not.

But for example, with tailwind we can have the one-liner also control how rounded the element initially was.

@utility conditional-rounded-* {
	border-radius: calc(sign(100cqi - 100%) * --value(number) * var(--spacing));
}

Creating variants

The last chapter of extending tailwind touches the modifiers, which specify when applying a class.

These use another new directive @custom-variant. Tailwind already offers variants for the most used CSS media queries. But creating new ones can still be valuable for a few reasons:

Ergonomics, create shorter, more clear directives

@custom-variant touch {
	@media (pointer: coarse) {
		@slot;
	}
}

Patch browsers shortcomings, with ad-hoc inline fixes

@custom-variant safari {
	@supports (font: -apple-system-body) {
		@slot;
	}
}

Combining multiple directives together

@custom-variant hocus {
  @media (hover: hover) {
    &:hover {
      @slot;
    }
  }
  &:focus-visible {
    @slot;
  }
}

Utility-driven agents

It's funny to feel joy in polishing code snippets, while being told you shouldn't even read code anymore.

But I think even with AI writing all the code, it's still valuable to produce abstractions that makes frontend code more expressive and clear. (Granted, you have to like Tailwind)

Ultimately if it's good for humans, it's good for LLMs too.

Also, I still prefer burning tokens on crafting powerful abstractions that I, the LLMs, and my team can reuse over and over, rather than painfully steering a 100B parameter model into a writing a flex column that takes 2 seconds to type.

Recently I was getting annoyed at how long it was taking me to position content inside the typical 12-columns layout, and having it adapt to the breakpoints.

Once I had the right idea, it really took one ~~rant~~ prompt and pointing the LLMs to the documentation page.

so i use grid with tailwind css but i get tired of writing a ton of col-start-2 col-span-3 md:col-start-4 md:col-span-6 etc etc

i want to create a set of @utility that allow me to write for example md:col-2-to-10

tailwind allows you to create custom utilities with a single parameter not two, so let's use the parameter only for the second column so @utility col-1-* and then create twelve for col-1-to-1, col-1-to-2, col-1-to-3 etc etc, if possible make the css valid only if * is at least the hardcoded value.

And it cooked exactly what I needed to fly through my front-end build.

@utility col-1-to-* {
  grid-column: 1 / calc(--value("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12") + 1);
}
 
@utility col-2-to-* {
  grid-column: 2 / calc(--value("2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12") + 1);
}
 
@utility col-3-to-* {
  grid-column: 3 / calc(--value("3", "4", "5", "6", "7", "8", "9", "10", "11", "12") + 1);
}

...

PS. I have a few other takes on this topic that I would like to write about, so if you would like to get notified when these posts come out, sign up with with the form below the post to receive it. There is an RSS feed too.

Resources

A Self-maintaining filesystem for static blogs

2026-07-01T00:00:00Z

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 friction from the projects I would like to work on more.

The file structure

The typical Eleventy setup has a flat-files setup.

    blog
    ├── post-title.md
  	└── another-post-title.md

But in my quest for documenting and portability, I ended up setting up this folder structure instead.

    blog
    └── yyyy-mm-dd-post-title
      	├── yyyy-mm-dd-post-title.md
      	└── image.png

This has a few advantages:

Co-location of a post's assets, images, snippets, etc.
Holding meta information such as title and date in the file name itself, rather than a generic index.md
Relative links in markdown easily map to their html links counterpart, once the site it's built.

Automating the boring parts

Enter Claude Code, and adapting ~~11ty~~ Buildawesome to my needs is just a matter of asking AI to write some scripts that integrate with the internal 11ty Dev Server watcher.

Updating either the Frontmatter property date or title now triggers a name change of both the file name and the folder name.
If the folder and filename change affected a live post, eg. with the Frontmatter property draft: false, a script will update all internal links that reference the updated path, and create a redirect, by adding an entry to redirects.json

[
  {
    "from": "/posts/2023-02-21-how-build-minimalist-markdown-blog-eleventy/",
    "to": "/posts/2023-02-21-build-minimalist-markdown-blog-eleventy/"
  }
]

If I upload an image file into a post folder, it will automatically compress it to a sensible size. No need to worry anymore about git-tracking 5MB pictures straight out of my camera roll.
A simple npm run new post title command, creates an empty document with the yyyy-mm-dd-post-title.md title slug, folder, today's date, set to draft and a scaffolded empty post.

---
date: 2026-07-01
title: "Post title"
project:
repository:
tags: []
selected: false
draft: true
description: ""
url:
---

2026-07-01

# Post title

### Resources

Resources

CSS tricks for markdown blogs

2026-06-28T00:00:00Z

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 interesting to explore what is possible to get out of CSS alone. Here are a few of the tricks used in this blog.

I'm manually writing the post date and post title for each post. I simply add these to the top of the file.

2026-06-28

# CSS tricks for markdown blogs

Then, the CSS targets the date, as the first paragraph at the top of each post, adding a custom styling.

article > p:first-child {
	font-size: 0.9rem;
}

Whenever an italic text comes right after an image, I want to style it to make it look like a actual caption.

Photo by Josefin on Unsplash

The CSS uses the sibling selector img + em to target the first italic after an image.

![Green leaves](josefin-WS5yjFjycNY-unsplash.jpg)
_Photo by Josefin on Unsplash_

I can make the CSS create a double column layout with two images side-by-side, by simply writing them next to each other in the markdown text.

![Three possums on a red balloon](possum.png)
![Three possums on a red balloon](possum.png)

Modern CSS makes this possible, by target the images container, with a combination of the parent selector :has(), sibling selectors and CSS grid.

@media (min-width: 768px) {
	p:has(img ~ img) {
		display: grid;
		grid-auto-flow: column;
		grid-gap: 0 1.5em;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, auto);
	}
}

Two pictures of beautiful possums that will be side by side on desktop

Styling numbered lists with <ol>. When doing lists, all the list items' content must fit a single paragraph, even code blocks or images. Splitting the content over multiple paragraphs would make the list number restart.

ol {
  list-style-type: decimal;
}

ol > li::marker {
  content: counter(list-item) " ";
}

The markdown parser, markdown-it, will automatically set the start attribute on any list that doesn't start with 1. You can then read that value with counter(list-item), if you wish to apply custom styles to the list.

I add links and resources at the bottom of the post manually. While there are plugins that do this, it's nice to have the simplest and most portable setup possible. The markdown parser, markdown-it, adds automatically the hash link and the id to all the headings.

#resources ~ ul > li > a::after {
	content: "(" attr(href) ")";
}

Then, with CSS it's possible to target the resources list and style them differently from the article's lists. I also use a ::after pseudo-element and its content property to have the URL of the link displayed inline, which helps to identify links at a glance.

With a regex formula inside the CSS attribute selector, I can target the links that have a certain word inside their href attribute and style it with a favicon, without fetching data and without javascript.

	a[href*="wikipedia.org"]::before {
		width: 1em;
		height: 1em;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='.../%3E%3C/svg%3E");
	}

Resources

File over app

Lessons from a reusable web component

2026-06-07T00:00:00Z

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 post doesn't touch advanced web-components techniques, like the shadow DOM or using <template> and <slot> elements. The tips in this post can apply broadly to UI components and CSS libraries.

Own a short, distinctive namespace

Every class and custom property in the component now starts with csb. For example, I have .csb-header, .csb-controls, and so on.

Short, because it repeats on every element and every variable, and being short might shave a few bytes and a few minutes of typing.
Distinctive, because the point of a component is to land in a page you don't control, and a generic .header or .button might collide with the host's styles.

Theme with namespaced CSS variables

This is the most important. Rather than ship override classes, every value worth changing is a CSS custom property, with its default written in as the fallback:

.csb-header {
	border-color: var(--csb-border-color, light-dark(#ddd, #6b6b6b));
}

The component renders correctly with zero configuration, because the fallback is the default. Theming it means setting variables on the root element, or any parent element, and let the cascade do its thing:

code-sandbox {
	--csb-border-color: var(--my-color);
	--csb-editor-bg: #282c34;
}

No !important, no descendant selectors reaching three levels deep, no cascade to fight. The list of variable names is the whole public surface, which also means that you should try to keep these ones stable between versions.

Let modern CSS and JS do the magic

A reusable component lands in contexts you can't predict, so using the modern features that the platform offers is one of the best way to achieve adaptability and resilience:

Container queries, not media queries. You don't know if a component will be added in a narrow sidebar or full width. Use container-type: inline-size on the parent element, so the child can responds to its own width.
light-dark() with color-scheme to have dark mode by default.
System fonts (system-ui, ui-monospace) and system colours (Canvas) so the default always works, and is consistent as possible with the underlying OS.
Logical properties (border-block-end, padding-inline) so it can support right-to-left layout, if needed.
em for sizing, so the whole component scales with whatever font size it inherits.

Publish it instead of pasting it

While it can sound like a good idea copying the JS and CSS into each project by hand to achieve the final simplicity, copying and pasting gets tiring quite fast. It's now on NPM, and it can be imported in a line and updated with a version bump rather than a copy-paste tour of old projects.

npm i @danieledep/code-sandbox

Publishing it on NPM gives you for free command-line installing and CDN hosting, useful for the no-build case. So a static HTML page can use it by importing it in the <head> of the file.

<script type="module" src="https://cdn.jsdelivr.net/npm/@danieledep/code-sandbox@1/src/code-sandbox.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@danieledep/code-sandbox@1/src/code-sandbox.css" />

Then document all of it

A module only counts as reusable once someone other than you can actually use it and customize it. The code-sandbox README carries the theming table, the layout and highlighter guides, and the install instructions.

Repository

danieledep/code-sandbox

Resources

CSS-native parallax effect

2026-06-02T00:00:00Z

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 handle all of that with CSS. Handling parallax animations with CSS has a few advantages: performance should be better as it runs it off the main thread, but my favorite part is the simplicity with which the whole thing becomes a small block of declarative styles, that can be applied with a single utility class. Here is the full code for the class:

.parallax {
	view-timeline-name: --parallax-tl;
	view-timeline-axis: block;
	overflow: hidden;

	& > * {
		scale: calc(1 + var(--parallax-offset, 20) * 2 / 100);
		animation: parallax auto linear both;
		animation-timeline: --parallax-tl;
		animation-range: cover;
		will-change: translate;
	}
}

@keyframes parallax {
	from {
		translate: 0 calc(var(--parallax-offset, 20) * -1%);
	}
	to {
		translate: 0 calc(var(--parallax-offset, 20) * 1%);
	}
}

The timeline

The trick is view-timeline-name. It creates a view progress timeline, a timeline whose progress is measured by how far the .parallax element has travelled through the scrollport. It reads 0% the moment the element starts to enter the viewport and 100% once it has fully left. view-timeline-axis: block tells it to track movement along the block axis, which is the vertical one in a normal writing mode.

On the child, animation-timeline: --parallax-tl swaps the animation's clock from time to that timeline. From there the rest of the animation line falls into place:

auto for duration, because the duration now comes from the timeline rather than a number of seconds
linear so scroll progress maps straight onto movement,
both to hold the start and end frames outside the active range

⚠️ Note: The animation-timeline longhand property is not part of the animation shorthand and must be declared separately. Furthermore, animation-timeline must be declared after the animation shorthand as the shorthand will reset non-included longhands to their initial value.

The keyframes do the actual work. With the default offset, the child slides from translate: 0 -20% to translate: 0 20% as you scroll past it. Because it moves at a different rate to the container around it, you get that sense of depth.

Scaling to avoid empty spots

The child translates by up to the offset percentage of its own height in each direction, so if the child were exactly the same size as its container, shifting it up or down would expose a strip of empty space.

The child needs to be scaled up in order to have a margin to move into. It needs the offset's worth of extra height above and below, so twice the offset overall:

scale: calc(1 + var(--parallax-offset, 20) * 2 / 100);

With the default offset of 20, the child is rendered at 140% of its size, the surplus is clipped by overflow: hidden on the container, and there is always enough content to cover the box no matter where in the ±20% travel it sits.

The neat part is that both the translate and the scale read the same --parallax-offset variable. Turn the offset up for a stronger effect and the scale grows to match it, so the cover stays correct on its own. One value to tune, and the gaps never come back:

<div class="parallax" style="--parallax-offset: 30;">
	<img src="…" />
</div>

will-change: translate is the last piece, a hint that this element's translate is about to change so the browser can promote it to its own layer ahead of time.

Motion preferences

Parallax is movement tied to scrolling, and some people would rather not have it. It's good practice to respect that by disabling the animation for anyone with prefers-reduced-motion: reduce. In this case, we can just turn off the animation and scale:

@media (prefers-reduced-motion: reduce) {
	.parallax > * {
		animation: none;
		scale: 1;
	}
}

Update: 07-06-2026

The day this post was published it got a lot of attentions on Hacker News, even getting up to the first spots of the front page. This was a first time for me, honestly it was fun to receive so much attention, totaling almost 25k views in a single day, although it came with a spectrum of all kinds of feedback.

It made me rediscover a CSS property that I haven't heard in years. Turns out, also the perspective CSS property allows to achieve a CSS-only parallax effect. While I think that using animation-timeline is cleaner and more configurable, this was great feedback. The more techniques in our toolbox, the better.

Around half of the comments were about the lack of an interactive demo of the parallax effect. This is something I've already had spent time thinking about. When I created this blog I wanted it to be a minimalistic scratchpad of ideas, drafted in markdown and stylized with CSS. I feared that the moment I started to add previews, write MDX files or have subroutes for demos, then keeping up this blog would become a drag.

But given the interest around frontend dev techniques, and future posts that I have in the pipeline, I've modernized a simple drop-in web-component that I built for this exact purpose and I'll see how this works. Here's the demo.

Photo by Josefin on Unsplash

Since this post received a lot of attentions, I've decided to send out a newsletter every time I post new interesting snippets. Subscribe with the form below the post to receive it. There is an RSS feed too!

Resources

Contrast-proofing colors

2026-05-16T00:00:00Z

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 the browser can now handle this part directly.

::selection,
::target-text,
::search-text {
	background: yellow;
	color: black; 
	color: contrast-color(yellow); 
}

The function returns black or white, depending on which value has the greatest contrast with the input color. When the background colour changes, the text follows, removing one manual step from the design system.

Uses

This new function can have its place in a couple of scenarios.

Light/dark themes. No manual changes for handling both light and dark themes. Just reference a CSS variable that changes with the dark/light theming and the function will output which text color works best.


:root {
	--primary-color: light-dark(#333b3c, #efefec);
}

::selection {
	background: var(--primary-color);
	color: contrast-color(var(--primary-color)); 
}

Customizable background-colors. Imagine you have a piece of UI, for example an announcement bar above the header, which the site owner can customise its background color from the CMS. After all, they might use their brand color, but occasionally switch to orange during the Halloween sales. In this case contrast-color() can offer some safety for the site owner to always have a readable result.

<div
	class="ticker bg-(--bg-color) text-[contrast-color(var(--bg-color))]"
	style="--bg-color: {{ data.background_color }};"
>

Doesn't compose with color-mix()

Nesting inside a color-mix() could be a nice idea. While the brand color is a solid color, the selection color could use a semi-transparent version of the same hue. But unfortunately that doesn't work today:

background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
color: contrast-color(color-mix(in oklab, var(--color-primary) 10%, transparent));

Accessibility disclaimer

The MDN docs are explicit about the limits of WCAG AA as the basis for the algorithm:

Warning: WCAG AA (4.5:1) contrast is not capable of producing clearly readable text in all cases. Mid-tone background colors generally don't provide enough contrast with either black or white foreground. For example, contrast-color() on a royal bluish (#2277d3) background produces black text, which is not readable for small text. It is recommended, therefore, to use light or dark colors with the contrast-color() function.

In practice, contrast-color() is best suited to colours that already sit clearly at one end of the lightness scale. Mid-tones still need a manual judgement call.

Resources

contrast-color() on MDN

PostCSS Clampwind

2026-01-17T00:00:00Z

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 all the heavy lifting with custom variants and CSS variables, what if we let Tailwind generate the CSS as it normally would, and then transform the output with PostCSS?

The key insight is that Tailwind v4 already provides everything we need:

Breakpoint variants with the md:max-lg: syntax define the screen range
Arbitrary values with text-[clamp(16px,50px)] can express the value range

PostCSS can read both and calculate the fluid formula, this means minimal transformations plugin-side, and leveraging what Tailwind already does well.

How Tailwind v4 handles breakpoints

Looking at how Tailwind generates CSS for a ranged breakpoint utility:

<div class="md:max-lg:text-[24px]">
</div>

Generates the following CSS

.md\:max-lg\:text-\[24px\] {
  @media (width >= 48rem) { /* 768px */
    @media (width < 64rem) { /* 1024px */
      font-size: 24px;
    }
  }
}

The nested media queries give us exactly what we need: the min and max screen sizes for the interpolation. Plus:

Modern range syntax
Converts everything to rem
Generates custom breakpoints too

<div class="min-[700px]:max-[800px]:text-[24px]">
</div>

Keeping the `clamp()` function name

Writing a non-valid clamp() still informs Tailwind that I'm using a size property. I first tried a shorter syntax:

<div class="text-[cl(16px,50px)]">
</div>

But this makes Tailwind generate the wrong property:

.text-\[cl\(24px\)\] {
  color: cl(16px,50px); /* Text color */
}

Using the actual clamp() function name works better

<div class="text-[clamp(16px,50px)]">
</div>

Right CSS property
Tailwind handles whitespaces
I just need to read the values inside the parenthesis, convert everything to rems and write out the formula

.text-\[clamp\(16px\,50px\)\] {
  font-size: clamp(16px,50px);
}

This two-value clamp() is invalid CSS, but the PostCSS plugin will transform it into the valid three-value version.

The PostCSS plugins work by walking through the CSS AST (Abstract Syntax Tree) and transforming nodes. The plugin needs to:

Find all declarations containing two-value clamp() calls
Extract the min and max values
Find the parent media queries to determine the screen range
Calculate the fluid formula
Replace the declaration with the valid clamp

See the PostCSS plugin in action at clampwind.dev

How to use it

To use this plugin you need to use the clamp() function but with only two arguments, the first one is the minimum value and the second one is the maximum value.

Clamp between smallest and largest breakpoint

Write the Tailwind utility you want to make fluid, without any breakpoint modifier, for example:

<div class="text-[clamp(16px,50px)]"></div>

This will use Tailwind default largest and smallest breakpoint.

.text-\[clamp\(16px\,50px\)\] {
  font-size: clamp(1rem, calc(...) , 3.125rem);
}

Clamp between two breakpoints

Simply add regular Tailwind breakpoint modifiers to the utility, for example:

<div class="md:max-lg:text-[clamp(16px,50px)]"></div>

To clamp the CSS property between the two breakpoints you need to use the max- modifier, in this case the CSS property will be clamped between the md and lg breakpoints.

This will generate the following css:

.md\:max-lg\:text-\[clamp\(16px\,50px\)\] {
  @media (width >= 48rem) { /* >= 768px */
    @media (width < 64rem) { /* < 1024px */
      font-size: clamp(1rem, calc(...), 3.125rem);
    }
  }
}

Clamp from one breakpoint

If you want to define a clamp value from a single breakpoint, postcss-clampwind will automatically generate the calculation from the defined breakpoint to the smallest or largest breakpoint depending on the direction, for example:

<div class="md:text-[clamp(16px,50px)]"></div>

This will generate the following css:

.md\:text-\[clamp\(16px\,50px\)\] {
    @media (width >= 48rem) {  /* >= 768px */
      font-size: clamp(1rem, calc(...), 3.125rem);
    }
  }

Or if you use the max- modifier:

.max-md\:text-\[clamp\(16px\,50px\)\] {
    @media (width < 48rem) { /* < 768px */
      font-size: clamp(1rem, calc(...), 3.125rem);
    }
  }

Clamp between custom breakpoints

With Tailwind v4 it's really easy to use one-time custom breakpoints, and this plugin will automatically detect them and use them to clamp the CSS property.

<div class="min-[1000px]:max-xl:text-[clamp(16px,50px)]"></div>

This will generate the following css:

.min-\[1000px\]\:max-xl\:text-\[clamp\(16px\,50px\)\] {
  @media (width >= 1000px) { /* >= 1000px */
    @media (width < 64rem) { /* < 1600px */
      font-size: clamp(1rem, calc(...), 3.125rem);
    }
  }
}

Clamp between Tailwind spacing scale values

A quick way to define two clamped values is to use the Tailwind spacing scale values, for example:

<div class="text-[clamp(16,50)]"></div>

The bare values size depends on the theme --spacing size, so if you have have it set to 1px it will generate the following css:

.text-\[clamp\(16\,50\)\] {
  font-size: clamp(1rem, calc(...), 3.125rem);
}

Clamp custom properties values

You can also use custom properties in your clamped values, for example like this:

<div class="text-[clamp(var(--text-sm),50px)]"></div>

or like this:

<div class="text-[clamp(--text-sm,--text-lg)]"></div>

But this won't work when using two custom properties directly in the CSS with @apply, so you need to use the var() function instead.

.h2 {
  @apply text-[clamp(var(--text-sm),var(--text-lg))];
}

Clamp container queries

Postcss-clampwind supports container queries, just by using the normal Tailwind container query syntax, for example:

<div class="@md:text-[clamp(16px,50px)]"></div>

This will generate the following css:

.@md\:text-\[clamp\(16px\,50px\)\] {
  @container (width >= 28rem) { /* >= 448px */
    font-size: clamp(1rem, calc(...), 3.125rem);
  }
}

Configuration

Tailwind v4 introduced the new CSS-based configuration and postcss-clampwind embraces it.

Add custom breakpoints

To add new breakpoints in Tailwind v4 you normally define them inside the @theme directive.

But Tailwind by default, will not output in your CSS any custom properties that are not referenced in your CSS, for this reason you should use the @theme static directive instead of @theme to create custom breakpoints.

@theme static {
  --breakpoint-4xl: 1600px;
}

Set a default clamp range

You can set a default clamp range to use when no breakpoint modifier is used, like this:

<div class="text-[clamp(16px,50px)]"></div>

To set a default clamp range you need to use the --breakpoint-clamp-min and --breakpoint-clamp-max custom properties, defined inside the @theme static directive.

@theme static {
  --breakpoint-clamp-min: 600px;
  --breakpoint-clamp-max: 1200px;
}

This will also apply for utilities that use only one breakpoint modifier. In this example the md breakpoint will be used as the minimum breakpoint, and --breakpoint-clamp-max will be used as the maximum breakpoint:

<div class="md:text-[clamp(16px,50px)]"></div>

The default clamp range will let you to simplify your utilities, since usually you don't need to clamp between the smallest and largest Tailwind breakpoints, but only between two breakpoints.

You will still be able to clamp between any other Tailwind or custom breakpoints, even if out of the default clamp range.

Use custom properties

You can use any custom properties in your clamped values, for example:

<div class="text-[clamp(--custom-value,50px)]"></div>

You just need to make sure that the custom property is defined in your :root selector.

:root {
  --custom-value: 16px;
}

Pixel to rem conversion

If you are using pixel values in your clamped values, clampwind will automatically convert them to rem. For the conversion it scans your generated css and if you have set pixel values for the root font-size or for your --text-base custom property in your :root selector, it will use that value to convert the pixel values to rem values. If you haven't set a font-size in your :root selector, it will use the default value of 16px.

:root {
  font-size: 18px; /* 18px = 1.125rem */
}

or like this:

:root {
  --text-base: 18px; /* 18px = 1.125rem */
}

Repository

danieledep/postcss-clampwind

Resources

Generate fluid styles with a Tailwind plugin

2025-07-02T00:00:00Z

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 advantage of the available space, and always feel right to any screen size.

Existing solutions

It's already possible to have fluid CSS, here are two of the most used solutions:

Utopia, it's a project, open-source library and web-app that, given in input a set of requirements for the largest and smallest screen sizes, the largest and smallest type size (or spacing system size) and the number of steps, it outputs a set of CSS variables.

:root {
  --step-0: clamp(1rem, 0.7955rem + 0.9091vw, 1.5rem);
  --step-1: clamp(1.2rem, 0.9239rem + 1.2273vw, 1.875rem);
  --step-2: clamp(1.44rem, 1.0703rem + 1.6432vw, 2.3438rem);
  --step-3: clamp(1.728rem, 1.2364rem + 2.1849vw, 2.9297rem);
  ...
  --space-xs: clamp(0.75rem, 0.5966rem + 0.6818vw, 1.125rem);
  --space-s: clamp(1rem, 0.7955rem + 0.9091vw, 1.5rem);
  --space-m: clamp(1.5rem, 1.1932rem + 1.3636vw, 2.25rem);
  --space-l: clamp(2rem, 1.5909rem + 1.8182vw, 3rem);
  --space-xl: clamp(3rem, 2.3864rem + 2.7273vw, 4.5rem);
}

You can then use these CSS variables as building blocks to make your design system fluid.

h1 {
font-size: var(--step-5);
}

h2 {
font-size: var(--step-4);
}

h3 {
font-size: var(--step-3);
}

...

.card {
  padding-block: var(--space-m);
  padding-inline: var(--space-s);
  gap-y: var(--space-2xs);
}

These CSS variables can also be used directly within Tailwind utility classes.

<article class="py-(--space-m) px-(--space-s) gap-y-(--space-2xs)">

This approach is robust, but has the downside of not being easy to tweak. For example to change screen widths or the font-size ranges, it requires to generate again all the values. Or setting a different growing ratio, on a specific screen size range, is not possible.

barvian/fluid-tailwind, this Tailwind plugin generates the fluid css values on the spot, by defining the ranges in the utility classes directly. All the utility classes that have a ~ in front of them are fluid. If no breakpoint is specified, the values interpolation takes place from the largest Tailwind breakpoint to the smallest.

<button class="bg-sky-500 ~px-4/8 ~py-2/4 ~text-sm/xl ...">Fluid button</button>

It can also define the starting and ending screen sizes directly in the utility classes, by using the variant modifier, always with a ~ in front of them.

<h1 class="~md/lg:~text-base/4xl">Quick increase</h1>

This solution is very flexible and a nice but bespoke syntax. The main downside is that this plugin is not supported in Tailwind v4.

Plugin requirements

It's very convenient to use a simple symbol that conveys fluidity as the tilde ~, added in front of the utility classes that we already use.

But, it would be nice if instead of setting the range of the CSS values in a single class, as barvian/fluid-tailwind does, we could to extrapolate the range from the variant modifiers used in a single HTML element. Below is how a normal responsive styling looks like in Tailwind.

<div class="mt-6 md:mt-8 text-base md:text-lg xl:text-xl">

Making these values fluid could be as simple as adding a tilde in front of all the utility classes and variant modifiers that we want to make fluid. That would make it very easy to adopt it incrementally in existing projects, or to remove them if not required anymore, just search all these characters in a codebase and remove them.

<div class="~mt-6 ~md:mt-8 ~text-base ~md:text-lg ~xl:text-xl">

Prototyping

The concept behind this proof-of-concept is to leverage CSS features to let the browser make most of the calculations, rather than the plugin.

The clamping formula

The values needed to calculate the interpolation formula of two values within a screen-size range are four:

Min value
Max value
Min screen size
Max screen size

To set a fluid value in CSS, the standard approach is using the clamp() function.

font-size: clamp(minValue, preferred,  maxValue)

The preferred value is a CSS calc() function, where we calculate the ratio with which the CSS value scales, starting at the set minimum screen size.

font-size: clamp(minValue, calc(intercept + slope * 100vw),  maxValue)

And both the intercept and the slope can be calculated using the four values.

font-size: clamp(minValue, calc((minValue - ((maxValue - minValue)/(maxScreen - minScreen)) * minScreen) + ((maxValue - minValue)/(maxScreen - minScreen)) * 100vw),  maxValue)

tailwindcss-fluid-variants v0.0.1

To make the browser calculate this style we can express the four values needed for the clamping formula as CSS custom properties.

Tailwind plugins can easily add CSS properties declarations to a utility class it generates. First, we use the matchVariant() function from the Tailwind Plugins APIs, to register custom dynamic variants, such as ~md:, ~lg:, ~xl:,etc. These new custom variants, instead of ouputting a single fixed value for a CSS property will output 3 custom properties and a CSS property with a clamp() value, this is an example.

.\~lg\:text-\[24px\] {
  --font-size-lg: 24px;
  --font-size-lg-int: 24; /* Also this because math */
  --font-size-lg-screen: 1024;

  font-size: clamp(...);
}

But to make the calculation happen, without knowing which utility classes will be eventually used in the same HTML element, each fluid utility class should evaluate any possible value for the CSS property it describes.

minValue = min(--font-size-sm, --font-size-md, --font-size-lg, ...)
maxValue = max(--font-size-sm, --font-size-md, --font-size-lg, ...)
minScreen = min(--font-size-sm-screen, --font-size-md-screen, --font-size-lg-screen, ...)
maxScreen = max(--font-size-sm-screen, --font-size-md-screen, --font-size-lg-screen, ...)

The final clamp formula with all the terms in place, will look like this.

.\~lg\:text-\[24px\] {
  --font-size-lg: 24px;
  --font-size-lg-int: 24;
  --font-size-lg-screen: 1024;

  font-size: clamp(min(var(--font-size-sm, 999999px), var(--font-size-md, 999999px), var(--font-size-lg, 999999px), var(--font-size-xl, 999999px), var(--font-size-2xl, 999999px)), calc(calc((min(var(--font-size-sm-int, 999999), var(--font-size-md-int, 999999), var(--font-size-lg-int, 999999), var(--font-size-xl-int, 999999), var(--font-size-2xl-int, 999999)) - calc((max(var(--font-size-sm-int, 0), var(--font-size-md-int, 0), var(--font-size-lg-int, 0), var(--font-size-xl-int, 0), var(--font-size-2xl-int, 0)) - min(var(--font-size-sm-int, 999999), var(--font-size-md-int, 999999), var(--font-size-lg-int, 999999), var(--font-size-xl-int, 999999), var(--font-size-2xl-int, 999999))) / (max(var(--font-size-sm-screen, 0), var(--font-size-md-screen, 0), var(--font-size-lg-screen, 0), var(--font-size-xl-screen, 0), var(--font-size-2xl-screen, 0)) - min(var(--font-size-sm-screen, 999999), var(--font-size-md-screen, 999999), var(--font-size-lg-screen, 999999), var(--font-size-xl-screen, 999999), var(--font-size-2xl-screen, 999999)))) * min(var(--font-size-sm-screen, 999999), var(--font-size-md-screen, 999999), var(--font-size-lg-screen, 999999), var(--font-size-xl-screen, 999999), var(--font-size-2xl-screen, 999999))) * 1px) + calc((max(var(--font-size-sm-int, 0), var(--font-size-md-int, 0), var(--font-size-lg-int, 0), var(--font-size-xl-int, 0), var(--font-size-2xl-int, 0)) - min(var(--font-size-sm-int, 999999), var(--font-size-md-int, 999999), var(--font-size-lg-int, 999999), var(--font-size-xl-int, 999999), var(--font-size-2xl-int, 999999))) / (max(var(--font-size-sm-screen, 0), var(--font-size-md-screen, 0), var(--font-size-lg-screen, 0), var(--font-size-xl-screen, 0), var(--font-size-2xl-screen, 0)) - min(var(--font-size-sm-screen, 999999), var(--font-size-md-screen, 999999), var(--font-size-lg-screen, 999999), var(--font-size-xl-screen, 999999), var(--font-size-2xl-screen, 999999)))) * 100vw), max(var(--font-size-sm, 0px), var(--font-size-md, 0px), var(--font-size-lg, 0px), var(--font-size-xl, 0px), var(--font-size-2xl, 0px)));
}

Unfortunately this will add more than 2kb of CSS for each utility class. Also this works, but only interpolating between a single pair of CSS values, within a single range of screen sizes.

<div class="~md:mt-6 ~lg:mt-10 ~xl:mt-8">

For example this will only calculate a clamp from 768px to 1280px, but the range value will be between 24px and 40px, because the value set in ~lg:mt-10 is the largest.

tailwindcss-fluid-variants v0.0.2

It's actually possible to have the fluid values respect internal breakpoints when defined, but the plugin needs to generate all the possible breakpoints, whenever I have a fluid utility

.\~md\:text-\[18px\] {
  --f-s-md: 18px;
  --f-s-md-int: 18;
  --f-s-md-scr: 768;
}

@media (min-width: 640px) and (max-width: 767px) {
  .\~md\:text-\[18px\] {
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .\~md\:text-\[18px\] {
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .\~md\:text-\[18px\] {
  }
}

...

And the CSS value needs to use var() order instead of min() and max() where each leg of the internal breakpoints has the CSS variables to look for the next breakpoint depending on the direction, with the fallback of each variable, being the variable for the next breakpoint.

To make it easier to understand the mechanism see how the values at the edges are calculated.

/* Min value at smaller breakpoint */
var(--f-s-sm)

/* Max value at smaller breakpoint */
var(--f-s-md, var(--f-s-lg, var(--f-s-xl, var(--f-s-2xl))))

A complete example for the range between two breakpoints would then look like this.

@media (min-width: 640px) and (max-width: 767px) {
  .\~md\:text-\[20px\] {
    font-size: clamp(var(--f-s-sm, 20px), calc(calc((var(--f-s-sm-int, 20) - calc((var(--f-s-md-int, var(--f-s-lg-int, var(--f-s-xl-int, var(--f-s-2xl-int, 20)))) - var(--f-s-sm-int, 20)) / (var(--f-s-md-scr, var(--f-s-lg-scr, var(--f-s-xl-scr, var(--f-s-2xl-scr, 640)))) - var(--f-s-sm-scr, 640))) * var(--f-s-sm-scr, 640)) * 1px) + calc((var(--f-s-md-int, var(--f-s-lg-int, var(--f-s-xl-int, var(--f-s-2xl-int, 20)))) - var(--f-s-sm-int, 20)) / (var(--f-s-md-scr, var(--f-s-lg-scr, var(--f-s-xl-scr, var(--f-s-2xl-scr, 640)))) - var(--f-s-sm-scr, 640))) * 100vw), var(--f-s-md, var(--f-s-lg, var(--f-s-xl, var(--f-s-2xl)))));
  }
}

Apart from this resulting in some massive CSS, I also encountered some issues where the outer values, for example sm, 2xl, are missing and there is no CSS variable fallback to calculate the clamping.

A possible fix would require a fragile solutions like applying the big formula only to elements that actually have the utility classes.

@media (min-width: 1024px) and (max-width: 1279) {
  :is(.\~md\:text-\[20px\][class*="~xl:text"],.\~md\:text-\[20px\][class*="~2xl:text"]) {
    font-size: clamp(...)
  }
}

This could be handled in the future with CSS if() function

if(--f-s-sm) ...

Eventually this works and I can say lessons where learned, but..

More than 4kb for each utility class
Fragile class selector
doesn't work with @apply
only tailwind v3 compatible
doesn't allow for custom ranges

Resources

Convert any webpage to SVG and plot it

2025-02-02T00:00:00Z

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 some CSS splits the result into separate pages.

:root {
	--page-width: 14cm;
	--page-height: 21cm;
	--page-gutter: 100px;
}

#content {
	width: var(--page-width);
	height: var(--page-height);

	column-width: var(--page-width);
	column-gap: var(--page-gutter);
}

The neat thing about this is that the column-width CSS property makes paginating really easy, while using physical units as cm to control the pages dimensions. These don't match perfectly with the real world centimeters of course, because its actual size depends from screen pixel density and DPI but it's good enough for this experiment. The CSS variables are editable with the control panel using cocopon/tweakpane.

Next, a convoluted recursive function parses the block elements of the DOM, and converts the text to SVG paths. If only parsing this beautiful soup of block and inline elements was easy as it sounds, the browser would have suffered much less.

Hershey text

This project uses the library techninja/hersheytextjs to convert the text content to SVG. This library is a javascript port of the great Hershey Text Inkscape Plugin. The library reads font data from SVG font files, containing the letter paths of a font family and renders them inside a SVG element.

return renderText(node.textContent, {
	font: selectedFont,
	scaleFont: scaleFont,
	pos: { x: 0, y: yOffset },
});

Those fonts are Hershey fonts, a set of characters made of single vector paths, developed around 1967 by Dr. Allen Vincent Hershey at the Naval Weapons Laboratory, to be displayed on early cathode ray tube displays.

Set of Hershey characters

Their path-only, vector nature makes it very easy drawing text with CNC machines, and solves a few problems since vectorizing any piece of text creates an empty outline, and it doesn't work great with very small text.

Images

It is possible to render images as SVG paths with some algorithms used in the pen-plotter world. Some of the most used ones can be compared with this great browser tool mitxela/plotterfun.

After evaluating a few of them, I decided to ditch images for the moment being. While the final effect is visually interesting it's very hard to convey effectively the content of an image of a typical online article. I wonder if some AI model could get any image in input and then style-transfer it to a realistic simplified line-art image and then convert that to SVG.

'Girl with a pearl earring' rendered in SVG using the Stipples algorithm

Layout

In this project the HTML content is parsed block by block and is rendered using a different set of Hershey fonts. H1, H2, etc headings would use larger bold fonts, <em> are rendered with an italic font and code blocks with a mono-style font.

switch (element.parentNode.nodeName) {
	case "H1":
		renderedFont = PARAMS.fontBold.fontBoldName;
		scaleFont = 1.75;
		break;

	case "H2":
		renderedFont = PARAMS.fontBold.fontBoldName;
		scaleFont = 1.5;
		break;

	case "H3":
		renderedFont = PARAMS.fontBold.fontBoldName;
		scaleFont = 1.25;
		break;

	case "H4":
	case "H5":
	case "H6":
		renderedFont = PARAMS.fontBold.fontBoldName;
		scaleFont = 1.1;
		break;

	case "EM":
		renderedFont = PARAMS.fontItalic.fontItalicName;
		scaleFont = 1;
		break;

	case "PRE":
		renderedFont = PARAMS.fontMono.fontMonoName;
		scaleFont = 1;
		break;

	default:
		renderedFont = PARAMS.font.fontName;
		scaleFont = 1;
}

The output page would have the same dimensions of the HTML content paginated with the CSS properties column-width and height, with the possibility of then downloading the content split in different convenient separate files.

Gcode

The final vision was to download the SVG files of any page and feed these into Inkscape to be converted to a gcode file with the workflow described before, Convert a 3D printer into a pen plotter.

A blog post converted to gcode

This way, you could technically plot small neat pages of any interesting article, blog post or documentation to be binded together in a sort of physical reading list.

Conclusions

Few things turned out to be pretty complicated such as parsing inline elements, especially when they would wrap onto new lines, also generally handling DOM nodes with javascript is messy.

As mentioned above, rendering images to SVG using AI would make for an interesting additional project but I'm wrapping this one up for the moment.

Many other ideas were continuously coming up out of this project, a browser extension, a markdown input mode, generate gcode directly in the browser, design a bespoke mini-plotter, and many more, but I've decided to move on to other projects.

Resources

Paper over files: print a blog post in plain markdown

2025-01-17T00:00:00Z

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 effectively by screen readers and other assistive technologies. On top of this content and markup is constructed to be processed by search engines too, which means another set of attributes and metadata to be added to the page.

Interestingly, another way to consume a website content, which is often overlooked, is by printing it. The CSS specification for printing styles is actually quite rich has existed for a very long time. It allows to set specific styles for printing a page by using the @media print rule. This can be used to remove unnecessary elements from the page, like navigation bars, sidebars, and footers, and to style the content in a way that is more suitable for printing.

That made me think that printing a blog post, whose content was originally generated from a markdown file, can actually be a way of preserving its original content and make it even portable on the long term.

With few CSS rules, it is possible to style the content in a way that reflects the plain text which generated it, and it can be done without any JavaScript or server-side processing. This technique uses the CSS pseudo-elements ::before and ::after to add the markdown syntax to the content, like # for headings, * for strong text, _ for emphasized text, and - for list items. Here are some examples of how this can be done.

@media print {
	h1::before {
		content: "# ";
	}

	strong::before {
		content: "**";
	}

	strong::after {
		content: "**";
	}

	em::before {
		content: "_";
	}

	em::after {
		content: "_";
	}

	ul > li::marker {
		content: "- ";
	}

	pre[class*="language-"]::before {
		content: "```";
		display: block;
	}

	pre[class*="language-"]::after {
		content: "```";
		display: block;
	}
}

This technique can be used to generate the markdown syntax for links by using the attr() function to get the value of the href attribute of the link and add it to the content of the pseudo-element.

a::before {
	content: "[";
}

a::after {
	content: "](" attr(href) ")";
}

This method has some limitations though, as it can't be used to style images, since replaced elements can't have pseudo-elements. This means that images will be printed as they are, without any markdown syntax.

/* Not working because replaced elements can't have pseudo elements */
img::after,
picture::after {
	display: block;
	content: "![" attr(alt) "](" attr(src) ")";
}

This experiment is inspired by the original html quine, which uses the same technique to print the HTML tags next to the content.

This is it! 🖨️ Click CMD + P to print this page, and see how the plain markdown of this page looks. If are looking to implement this on your blog too you can grab the file in the repository and let me know how it goes.

Repository

danieledep/print-markdown

Resources

A code-sandbox web component

2025-01-11T00:00:00Z

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. This was worked on to be included in a vanilla project-starter template but it can be easily used in any project.

Also being a web component, it means it can be used in any framework or vanilla JavaScript and it will always work, since it doesn't depend on any framework. The only dependency it uses is PrismJS for syntax highlighting, which can be included directly in the JavaScript file. This fork adds a few useful features to the original code too.

Fetching files from a URL

By just adding a src attribute to the <textarea> inside the web component it will load the content inside the mini-editor. This can allow keeping the code snippets in a separate file and include them only on page load. It can fetch both a local file or a remote file.

<code-sandbox>
	<textarea for="html"></textarea>
	<textarea for="css"></textarea>
	<textarea for="js" open src="demo.js"></textarea>
</code-sandbox>

Markdown compatibility

If inside the <code-sandbox> there is a <pre class="language-*"> which is how markdown processors render code blocks, it will use that snippet to populate the code for the editor.

This can be useful when using markdown files with code snippets because it adds a touch of progressive enhancement, since if the web component is not loaded, the code block will still be displayed.

Below there is an example of how it can be used within a markdown file.

<code-sandbox>
```js
console.log('Hello, world!');
```
</code-sandbox>

⚠️ Warning:

This functionality can be a bit buggy, depending on the markdown processor doing the rendering

Exclusive accordions

By adding a name attribute to the web component, it will attach that name to all the <details> elements in the sandbox, making only one editor open at the time, leveraging the native element behavior.

<code-sandbox name="code-sandbox-1"> </code-sandbox>

CSS Container queries

Web components are the ideal use-case for css container queries, since they can be included in different contexts of a web page and their rendered size can change independently of the screen size.

It's fairly easy to use container queries to control the sandbox layout, the container-type just needs to be defined on the root element of the web component.

.sandbox {
	container-type: inline-size;
}

After that, the container queries can be used to control the layout of the sandbox.

@container (min-width: 768px) {
	.sandbox-content {
		grid-template-columns: repeat(2, 1fr);
	}
}

Empty playground

If no <textarea> or <pre> is present inside the <code-sandbox> web component it will create an empty editor. This can be useful when you want to show an empty playground for the user to start coding, but at the same time keep control of which editors are displayed. Eg: if only the html editor is present, the css and js editors will not be displayed.

<code-sandbox> </code-sandbox>

Attributes

Attribute	Description
`console`	If present displays the console (Optional)
`hidden`	Used to prevent flashes of unstyled content
`name`	The name attribute to be attached to the `<details>` elements, which makes only one open at the time (Optional)
`result`	Controls what is displayed on the right side panel, can either be `iframe` or `console`. Defaults to `iframe`
`src`	The URL of the file to fetch and run in the sandbox. Can be on the same origin or a remote file (Optional)
`title`	The title of the code block, defaults to `Code sandbox`. (Optional)

Repository

danieledep/code-sandbox

Resources

Serve static files with Eleventy

2025-01-06T00:00:00Z

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 correctly.

The first tool to reach to in this case, is Passthrough File Copy, the Eleventy utility that allows you to copy files from the input directory to the output directory, otherwise Eleventy will ignore all non-templates files.

eleventyConfig.addPassthroughCopy("content/posts/*/**/*.{js,pdf}");

This command allow you to put the files directly in your posts directory and Eleventy will copy them to the output directory while preserving the same directory structure.

Bundling with Vite

Vite is the most recommended bundling tool for Eleventy and this blog too has been originally setup to use Vite to run after the Eleventy build, using the official Eleventy plugin eleventy-plugin-vite.

This works very well for quickly setting up a feature-rich development environment, because its default configuration provides a lot of features out-of-the-box, like asset hashing, tree-shaking, and of course, bundling and minification of JavaScript and CSS files.

However, in case you want to serve static files the Vite step can silently work against you, since Vite will remove all files which are not linked in the outputted html files or hash and move, usually in the /asset folder, the rest of the files during in the production build, and this can break the links to the files in your posts.

After a tedious debug to figure out which was the issue, a possible solution is funnily another Vite unsolicited feature, the public directory. Maybe it's not widely known that Vite by default will copy the files in the public directory to the output directory without touching them, and it will also flat the /public directory structure in the project root.

public
├── assets
│   └── pdf.pdf
└── og-image.png

The above will be transformed to this:

dist
├── assets
│   └── pdf.pdf
└── og-image.png

To take advantage of this feature, you can copy all the static files to the /public/asset directory, which Vite will then move to the root output directory leaving only the existing /asset folder.

eleventyConfig.addPassthroughCopy({
	"content/posts/*/**/*.{js,pdf}": "public/assets",
});

I can then link the files in the markdown files like this:

[Download PDF](demo.pdf)

And transform the link in the final HTML to point to the correct location with eleventy-plugin-markdown-links:

mdLib.use(markdownItLinks, {
	processHTML: true, // defaults to false for backwards compatibility
	replaceLink: function (link, env, token, htmlToken) {
		if (link.endsWith(".pdf")) {
			// add class to the link
			const newToken = token;
			const newLink = "/assets/" + link;
			const title = link.split("/").pop();
			newToken.attrs = [
				["href", newLink],
				["target", "_blank"],
				["download", title],
			];
			return newToken;
		}
		return link;
	},
});

CSS Icon

To display a nice little icon in front of downloadable files, I added a CSS down arrow to the markdown.css, like this demo.pdf

a[href$=".pdf"]::before {
	content: "";
	display: inline-block;
	background-color: currentColor;
	mask-image: url("data:image/svg+xml,%3Csvg ... %3E");
	mask-repeat: no-repeat;
	mask-size: contain;
}

Update: 07-06-2026

The public/assets trick worked, but it flattened everything. Every match collapsed to its basename and landed in a single folder, so two posts each shipping a demo.js would clobber each other, and a relative src="demo.js" from a code-sandbox had nothing sensible to point at.

The fix is to stop fighting Vite and lean on how it actually treats public/: it copies the directory verbatim, structure and all. So instead of remapping with a glob, I mirror each file's posts/<slug>/ path under public/. Vite then emits it at /posts/<slug>/<file>, right next to the post, and a relative src="demo.js" just works.

A glob remap can't do this on its own, because Eleventy collapses every match down to its basename — which is exactly what was flattening everything in the first place.

- eleventyConfig.addPassthroughCopy({
- 	"content/posts/*/**/*.{js,pdf}": "public/assets",
- });
+ for (const rel of fs.readdirSync("content/posts", { recursive: true })) {
+ 	const keep = [".js", ".css", ".html", ".json", ".pdf", ".gcode",
+ 		".jpg", ".jpeg", ".png", ".gif", ".webp", ".avif", ".svg"];
+ 	if (!keep.includes(path.extname(rel).toLowerCase())) continue;
+ 	eleventyConfig.addPassthroughCopy({
+ 		[path.join("content/posts", rel)]: path.posix.join("public/posts", rel),
+ 	});
+ }

Images are in the keep list too, so a sandbox demo can load one with a relative src="…" — the markdown image pipeline only handles ![](…) syntax.

Resources

Web components and Eleventy

2025-01-04T00:00:00Z

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 compatibility with server-side rendering and a more structured way to handle web components.

But the beauty of web components should be that they are framework agnostic, and you can just copy and paste the CSS and javascript file to any project and they will work.

<script src="src/js/my-component.js"></script>
<link rel="stylesheet" href="src/css/my-component.css" />

<my-component></my-component>

It can be that simple. But if you want to just have some basic page size optimization and load the CSS and JS only when the component is present, you can use the following snippet.

{% for component in components %}
  {% set component_css_url = "src/css/" + component + ".css" %}
  {% set component_js_url = "src/js/" + component + ".js" %}
  {%- css %}{% include component_css_url %}{%- endcss %}
  {%- js %}{% include component_js_url %}{% endjs %}
{% endfor %}

And then in the front matter of the markdown file you can specify which components to load.

---
title: "Web components and Eleventy"
components: ["my-component"]
---

Resources

WebC

Vanilla project starter template

2025-01-04T00:00:00Z

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 aims to provide a simple starter project using vanilla javascript, few dependencies as possible and following some sensible good practices.

No frameworks

Nowadays frameworks are a must for any project, and full-featured frameworks like React are not the only option, for example AlpineJS is perfect for adding just few interactive components. But for this project the aim is not to use any framework by default, just plain vanilla javascript, and for the few components that need to be interactive, Web Components will be used, they do not provide the best developer experience, but they are the most future-proof way to create reusable components, and can be ported to any project without any issues.

No build tools

This starter template doesn't come with a predefined build tool, all assets and dependencies are linked into index.html directly, leveraging native ES modules imports and web components. Each component or functionality is a separate file that can be imported if needed or commented out if not. All external dependencies are included from CDN links.

  <!-- Main CSS -->
  <link href="css/main.css" rel="stylesheet">
  <!-- Utils CSS -->
  <link href="css/utils.css" rel="stylesheet">
  <!-- Prism CSS -->
  <link href="css/prism-one-dark.css" rel="stylesheet">
  <!-- Code sandbox CSS -->
  <link href="css/code-sandbox.css" rel="stylesheet">
  <!-- Markdown CSS -->
  <link href="css/markdown.css" rel="stylesheet">
  <!-- Tailwind CDN Script -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- State management -->
  <script type="module" src="js/state.js"></script>
  <!-- Components -->
  <script type="module" src="js/prism.js"></script>
  <script type="module" src="js/md-block.js"></script>
  <script type="module" src="js/tweakpane.js"></script>
  <script type="module" src="js/code-sandbox.js"></script>
  <script type="module" src="js/counter-display.js"></script>
  <script type="module" src="js/counter-button.js"></script>

However, if you need to use build tools, add npm-installed dependencies, add hot-reloading, etc, Vite is the recommended build tool, and I've added a light guide on how to set it up in the README.md.

Install Vite

npm install -D vite

Run Vite

npx vite

Reusable components

This starter template is not meant to be the starting point for a production-ready, feature-rich web application, but rather a playground to test out new ideas, or to create small web-based projects, without having to worry about maintaining dependencies and frameworks on the long run.

Not counting the web-components added for testing, there are only two imported components that I found sensible including, given the scope of the template:

leaverou/md-block, to include and render any markdown file in the page at runtime, like the README.md or a blog post draft.

<md-block src="README.md"></md-block>

a code-sandbox web component, for displaying an interactive code sandbox for HTML, CSS and javascript, similar to what CodePen does. I'm using a fork of Chris Ferdinandi'scode-sandbox web component, with a few added features.

<code-sandbox>
	<textarea for="html"></textarea>
	<textarea for="css"></textarea>
	<textarea for="js" open src="/assets/demo.js"></textarea>
</code-sandbox>

The great thing about web-components is that after all it's just client-side javascript, with the unexpected benefit that if the rendered markdown text contains a web component outside of a code block, it will be rendered as a web component, and not as a string. No need for MDX.

# demo.md

This counter button **works!** 

<counter-button></counter-button>

Dependencies

cocopon/tweakpane for interactive controls. This is optional but plugged with state.js, which fires events on value changes to update the UI and store values to local storage.
PrismJS for syntax highlighting both in the code sandbox and in the markdown files.
Tailwind Play CDN for quick styling and utility classes.

Repository

danieledep/project-starter

Resources

Using the new OKLCH colors to remove dependencies

2024-07-21T00:00:00Z

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 first built this blog, I used two libraries, hsluv/hsluv and gka/chroma.js to generate and interpolate colors. Their functioning was described in a previous blog post: A technique for generating beautiful color gradients. They did their job, but they were also dependencies that I had to carry along in the project, which is in contrast with the idea of a simple and lightweight blog.

In the last year, support for Oklch color notation has been added to the most used browsers, and it's a great opportunity to remove those dependencies.

What is Oklch?

Oklch is a color notation that represents colors the same colors of the Oklab color space in a cylindrical color space. Its strength is that it is designed to be more perceptually uniform than other color spaces like RGB or HSL.

The Oklch color space is defined by three components:

Okl: is the perceived lightness (0%-100%). “Perceived” means that it has consistent lightness for our eyes, unlike in hsl()
Chroma: the colorfulness of the color, ranging from gray to the most saturated color.
Hue: the hue of the color, ranging from 0 to 360.

What is changing

The structure and the logic of the code is remaining the same. I'm not going to need any library to generate colors anymore, I can pick a color from the Oklch space and interpolate it to generate a gradient.

Here it creates an array of hues to use as a base for the gradient colors, by remaining inside a given range on the hues spectrum:

const huesToPickFrom = new Array(Math.round(360 / minHueDiffAngle))
	.fill("")
	.map((_, i) => (baseHue + i * minHueDiffAngle) % 360);

and it then generates the final gradient colors by adding the chroma and lightness values:

return huesToPickFrom.map((hue, i) => ({
	lightness:
		minLightness + Math.random() * 0.1 + (lightnessRange / (colors - 1)) * i,
	chroma: minChroma + Math.random() * (maxChroma - minChroma),
	hue,
}));

If I want to further interpolate the colors with more step values I can use another recently added feature, the color-mix() function in CSS, which allows me to interpolate colors in a more controlled way.

scaleSpreadArray(
	cssColorStops,
	colorsFinal,
	(percent, lastValue, nextValue) =>
		`color-mix(in ${minIn}, ${nextValue} ${(percent * 100).toFixed(
			2
		)}%, ${lastValue})`
);

A notable change this update introduced is that the new gradients are more vivid and bright, while previously they were a little more toned down. This is because the Oklch color space is designed to be more perceptually uniform when building a color transition.

A visual representation of the difference between the gradients generated in the sRGB and Oklch color spaces from TailwindCSS v4.0 Docs

Resources

Use a 3D printer as a pen plotter

2024-02-07T00:00:00Z

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 wanted to be able to:

use it without removing the plastic extruder,
take it off easily when it's not needed,
plus it had to fit next to the BLTouch sensor

The final design of the pen holder.

As depicted in the picture, the pen holder is made of two main parts:

a base, which is attached permanently onto the extruder box,
the pen holder, attached to the base, which can be removed or replaced by just unscrewing the bolt on the front.

There are heat set inserts on both pieces sides to make the assembly easier and more robust. The pen holder is designed to hold any pen, brush, tool with a diameter of 15 mm, but it can be interchanged with a different one by just changing the pen holder part.

Generate G-code from SVG files

To draw with a 3D printer, as for any laser-cutter or CNC machine, a vector drawing has to be converted into machine-readable G-code. Most existing workflows are based on the use of Inkscape, a free and open-source vector graphics editor, paired with a plugin.

There are a few plugins available that do this, these seem to be the most popular:

evil-mad/axidraw the companion software for AxiDraw machines, which should work for any CNC machine,
JTechPhotonics/J-Tech-Photonics-Laser-Tool, plugin specialized for laser engraving,
cnc-club/gcodetools, a solid plugin that comes bundled with the application.

Here I'm using the latter because it looked like the most complete solution, and since it's bundled with Inkscape, it's likely to be the most stable and well-maintained long-term.

Document setup

The first step is to set up the document to match the printer's bed size. The bed size of the Ender 3 is 240x240 mm, so in the Document Properties panel, set the document to the same size, set the document units to mm and the Scale to 1.

Extension settings

The Gcodetools extension comes bundled with Inkscape and can be found under Extensions > Gcodetools. The extension has a few settings that need to be configured before generating the GCode.

Select tool

First of all, the Gcodetools extension needs a tool to be defined, to create a default one, go to Extensions > Gcodetools > Tools Library..

Select the Default and click Apply. The extension will create a new layer with the tool's settings, which can be edited by double-clicking on the layer. I suggest increasing the Feed rate to 3000, since a pen-plotter can move faster than a CNC machine.

Orientation points

The next step is to create the Orientation Points which will give the extension the reference points needed to produce the GCode. Go to Extensions > Gcodetools > Orientation Points.. From the settings panel pick 2-points mode and click Apply.

The extension will create a new layer with the orientation points, which can be edited by double-clicking on the layer. The points should be placed at the bottom-left and bottom-right corners of the artboard.

By testing and measuring the distance between the pen-holder and the hotend extruder, you should find that there is a small offset in the X and Y axis between the vector file and the physical drawing . This can be corrected by either moving the orientation points or by changing their values by double-clicking on the layer.

Generate G-code

The last step is to generate the GCode. To do so all vector objects need first to be converted to a path, select them and go to Path > Object to Path. These need to be in the same layer as the orientation points.

⚠️ Warning:

The new paths need to be in the same layer as the orientation points.

Now to Extensions > Gcodetools > Path to Gcode.. and it will open a new panel with a few settings to be tweaked according to one's needs.

Those are the settings I changed from the default ones:

change the output extension to .gcode instead of .ngc, by changing the Output file name to output.gcode, because Octoprint will only recognize that one as a valid extension,
set the Offest along Z axis to -1 because the tool Depth step is set to 1, but changing it to 0 will throw an error

Gcodetools allows to set custom Header and a Footer in the output file, which can be useful to set custom commands.

⚠️ Warning:

To set custom header and footer, we need to create two files in the output folder, without extensions, named header and footer.

This is the custom header:

M420 S1 ; Enable Jyers Mesh
M75 ; Start print timer
G28 ; home all axis

G01 Z0.100000
M0 ; Pause to set pen height

And this is the custom footer:

G1 Z20.00 F600 ; Move print head up
G1 X5 Y180 F9000 ; present print
M84 X Y E ; disable motors
M77 ; Stop print timer

I found useful to add the M0 command in the header to pause the print while I set the pen height and tighten the pen holder screw.

⚠️ Warning:

Note that Octoprint by default actually blocks the M0 Pause command from being sent to the printer. Instead it performs a software pause from within Octoprint which works just as fine, the only difference is that the Resume command needs to come from Octoprint, instead that from the printer LCD panel.

Now click Apply to generate the GCode.

Repository

danieledep/ender-plotter

Resources

Wiring the Sonoff inside the Ender Power Supply Unit

2023-12-29T00:00:00Z

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, I explained how in this post: Auto-shutdown a 3D printer with Raspberry Pi and ESPHome. To achieve this I have to make the power cable go through the Sonoff before it reaches the Ender Power Supply Unit, the PSU in turn powers the Ender and the Raspberry Pi running Octoprint.

The Octoprint server, once a print is done will be able to turn off the whole system by sending a MQTT message to a MQTT topic the Sonoff is subscribed to. I found this Octoprint plugin that suits my needs, OctoPrint/OctoPrint-MQTT.

I haven't put in place a system to turn the printer on remotely. If I wanted to, I'd need to setup another MQTT broker on another device and have the Sonoff subscribe to another topic, but I'm not interested in doing that at the moment, so i opted to add a momentary button to the Sonoff to turn the printer on and off. It is fairly easy to add one using the available pins on the PCB.

Schematics for adding a button to the Sonoff PCB

Also Esphome makes it very easy to add a physical button by configuring it as a Binary sensor, just add this snippet to the configuration file, recompile the project and flash it to the device.

binary_sensor:
  - platform: gpio
    name: button
    pin:
      number: GPIO0
    filters:
      - delayed_on: 10ms
    on_press:
      then:
        - if:
            condition:
              switch.is_on: mains
            then:
              - mqtt.publish:
                  topic: octoprint/shutdown
                  payload: "OFF"
              - delay: 60s
              - switch.turn_off: mains
            else:
              - logger.log: "start up mains"
              - switch.turn_on: mains

I enjoyed the physical part of this project, I had to combine some coding with some 3D design, plus the necessary crimping and soldering of the electronics. I'm happy with the result.

The Sonoff at the bottom of the case The final result

Resources

Auto-shutdown a 3D printer with Raspberry Pi and ESPHome

2023-12-02T00:00:00Z

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 me to a bunch of new topics, like ESPHome, NodeRED and MQTT. Everything started with watching this fantastic video: Save Energy by automating your 3D-printer by Andreas Spiess.

I already owned a cheap 3d printer, the OG workhorse Ender 3, and I had a spare Raspberry Pi 4B so I decided to give it a try.

In my previous post, A single enclosure for the Raspberry Pi and the Ender 3 electronics, I shown how I already moved the electronics to the back of the printer, so I had the perfect spot to place the Raspberry Pi.

Components

Raspberry Pi 4
Ender 3
2-to-1 XT60 adaptor
Sonoff Basic RF R2 v1.3
USB to Serial adapter with FTDI FT232RL chip, like this one: DSD TECH SH-U09C
Momentary switch button

Sonoff Basic RF R2 v1.3

Install the project on Raspberry Pi

Use Raspberry Pi Imager to install on the microSD the Raspbian OS with preinstalled Octoprint

Create a new user and login by connecting with a computer in the same network to http://octopi.local.

After that you will be able to ssh into the Raspberry Pi, if you kept the default settings you can just type:

ssh octoprint@octopi.local

Download the repo from Github via https

git clone https://github.com/danieledep/raspberry-remote-shutdown.git

Go into the downloaded folder

cd raspberry-remote-shutdown/

Make the script executable

chmod +x install.sh

Run the install script

sudo ./install.sh

Flash the Sonoff with ESPHome

Install desktop environment to use Esphome and NodeRED on the Raspberry Pi

sudo /home/octoprint/scripts/install-desktop

Set Desktop GUI to boot at startup and set the resolution at least at 1280x720px

sudo raspi-config

Install Chromium

sudo apt-get install chromium-browser --yes

Attach a screen, keyboard and mouse to the Raspberry Pi

Install the D2XX Drivers for using the FTDI chips plugged into the Raspberry Pi

Go into the project folder:

cd raspberry-remote-shutdown/

⚠️ Last time I tryed installing Esphome with pip it failed to install cryptography because of incompatible dependencies, this fixed it:
sudo pip3 install esphome cryptography==3.3.2

Start up Esphome, use sudo to have write permission for secrets.yaml

sudo esphome dashboard /config

Open Esphome web ui at octopi.local:6052

Press on Secrets to save wifi configuration

Create a project name sonoff and copy the content of sonoff.yaml into the file

Hit Save and then Install.

The first time you flash a new firmware you'll need to connect the Raspberry PI to the Sonoff via the FTDI Module wiring the pin like the following diagram.

FTDI      Sonoff

GND ----> GND
VCC ----> 3V3
TXD ----> RX
RXD ----> TX

Sonoff wiring for flashing

The first time you flash a new firmware you'll also need to keep pressed the physical button of the Sonoff.

⚠️ Newer Raspberry Pi with installed 64bit OS might need to disable temporarely the 64 bit capabilities at boot time, in order to compile the binaries due to compatibility issues with Platformio tooling. To do so edit the config.txt :
sudo nano /boot/config.txt
add to the part titled [pi4] a new line like this
[pi4]
arm_64bit=0

Setup NodeRED and MQTT

Open NodeRED at octopi.local:1880 import our flow nodered-flow.json and click Deploy

The NodeRED flow

Finally let's enable remote access to the MQTT broker without requiring authentication. Open the configuration file

sudo nano /etc/mosquitto/mosquitto.conf

At the end of the file add these two lines:

listener 1883
allow_anonymous true

Save the file and restart Mosquitto for the changes to take effect.

sudo systemctl restart mosquitto

Configure Octoprint

Open Octoprint, install the MQTT plugin, tick Activate event messages, and let's only keep Printing events messages enabled.
Add octopi.local as the Broker host.

⚠️ By default the MQTT plugin has the Enable retain flag option checked. This is normally the preferred choice but for our setup where the MQTT broker shut itself down multiple times from the same machine, we don't want to have our server turn on and find retained messages from the previous session.

Notes

Since I'm running the MQTT Broker directly on the same Raspberry PI that runs Octoprint too, which effectively self-shutdown, I don't need to run the systemd service shutdown.service.

The service was used by the original author to listen for the MQTT message coming from a different server running the MQTT Broker telling the Raspberry PI running Octoprint to shutdown.

But since they both run on the same device I can simply run the Exec node from within NodeRED, which upon receiving the octoprint/shutodwn MQTT message, it launches the command sudo shutdown now to the OS.

I still have an updated version of the necessary files and NodeRED nodes in this repository, in case I wanted to change my setup in the future.

Testing MQTT

Check the systemd services are enabled and running

systemctl list-unit-files

From terminal send MQTT messages to the NodeRED client which sends them to the Sonoff.

To turn on:

mosquitto_pub -d -t sonoff/switch/mains/command -m "on"

To turn off:

mosquitto_pub -d -t sonoff/switch/mains/command -m "off"

To turn off after 30 seconds delay:

mosquitto_pub -d -t sonoff/mains -m "off"

Troubleshooting

To read log messages from NodeRED in real-time

node-red-log

To read Mosquitto logs file

sudo cat /var/log/mosquitto/mosquitto.log

To read NodeRED logs file

sudo cat /var/log/syslog

Repository

danieledep/raspberry-remote-shutdown

Resources

A single enclosure for the Raspberry Pi and the Ender 3 electronics

2023-11-24T00:00:00Z

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 the silent motherboard is a must. The printer is much quieter and the quality of the prints is better. On a pursuit to silence the printer, I also replaced the stock fans with Noctua fans.

Thingiverse is a wonderful trove full of all-in-one case for the Ender 3 printer but to fit my needs, I ended up mixing together a few of them.

This great project Ender 3/Pro Case [EZABL, BLTouch, Raspberry Pi 3, Mosfet], an all-in-one case to be positioned on the back of the printer, below the print bed. It fitted the Raspberry Pi 4, the buck converters and the Creality Silent Motherboard v4.2.7 and the Noctua fans perfectly.

Ender 3/Pro Case by Akanar

After moving all the electronics to the back of the printer, I wanted to fill the empty space on the front, with useful parts. I was happy to find this nice project Ender 3 / Ender 3 Pro - A Better Left Front Drawer with micro SD Card Slot by gweep, to have again the micro SD card slot on the front, after moving the electronics to the back made it annoying to use. I knew I wanted to use OctoPrint to control the printer, but I still wanted to have the SD card slot available, just in case. Plus the big drawer is a nice addition to store the tools and the spare parts.
For the front, on the right side, I reached for this project, Ender 3 Double Drawer by Littlefiver. A nice simple drawer to store smaller tools.

Ender 3 from the front, closed drawers

Ender 3 from the front, open drawers

Ender 3 from the back, sealed enclosure

Ender 3 from the back, open enclosure

Repository

danieledep/ender-3-upgrades

Resources

Text selection color

2023-07-21T00:00:00Z

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 common anymore. But with web development constantly evolving, new opportunities arise to learn new tricks and get some new tools in the toolbox.

Adding the feature of highlighting words with a custom on-brand color, different from the default one, is one of them and can be a nice touch to add when polishing a new website.

It's very easy to add a ::selection highlight color to the CSS. Just add the following code to the CSS file:

::selection,
::target-text,
::search-text {
	background: yellow;
	color: black;
}

::target-text and ::search-text are newer pseudo-elements that are used when the user clicks on a link containing Text fragments and when they searche for a word on the page. They are not supported in all browsers, but it's a nice touch to add them to the CSS file.

The most important thing to keep in mind when working with this feature is to make sure the color contrast is high enough, for accessibility reasons. Generally you want to use a light highlight color on a dark text.

Resources

Text fragments

Update the SVG favicon and pseudo-elements dynamically

2023-04-23T00:00:00Z

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 technique in a previous post: A technique for generating beautiful color gradients .

The css property is applied to a specific css class I named .gradient which I use in different places around the website HTML, this way I thought I could easily change the gradient colors and at the same time apply it freely wherever I wanted independently of the container.

Javascript and pseudo-elements

The first place where adding the colorful dot makes more sense is internal links, if a link is pointing to another post in the blog I want to apply the small piece of branding, fair and simple. I already tackled the first part of this issue in this previous post How to build a minimalist Markdown blog with Eleventy, what I had in mind was to add a :before pseudo-element to the link and style it with the current gradient.

The first part was easy, I edited the function I already wrote in eleventy.config.js, changing it from this:

mdLib.use(markdownItLinks, {
	processHTML: true, // defaults to false for backwards compatibility
	replaceLink: function (link, env, token, htmlToken) {
		if (link.includes(".md")) {
			// remove the content after the last slash
			const newLink = link.replace(/[^/]*$/, "");
			return newLink;
		}
		return link;
	},
});

to this, where I still change the link but also the class attribute to add my own custom class .gradient-before to which I will add a pseudo-element:

mdLib.use(markdownItLinks, {
	processHTML: true, // defaults to false for backwards compatibility
	replaceLink: function (link, env, token, htmlToken) {
		if (link.includes(".md")) {
			// remove the content after the last slash
			const newLink = link.replace(/[^/]*$/, "");
			// add class to the link
			const newToken = token;
			newToken.attrs = [
				["href", newLink],
				["class", "gradient-before"],
			];
			return newToken;
		}
		return link;
	},
});

Now I just needed to target the .gradient-before::before pseudo-element in my javascript and it would have been done, but nope, TIL that pseudo-elements are not part of the DOM and therefore can't be accessed from javascript, so I had to find another way to do it.

A solution from Stack Overflow was to generate dynamically a <style> tag with the css property I wanted to apply to .gradient-before::before and this is what I ended up with:

// style pseudo elements for internal links by adding a new stylesheet
const gradientStyleSheet =
	document.querySelector("#gradientStyleSheet") ||
	document.head.appendChild(document.createElement("style"));

gradientStyleSheet.setAttribute("id", "gradientStyleSheet");
gradientStyleSheet.innerHTML = `.gradient-before:before {background: ${cssGradient};}`;

And that worked smoothly! You maybe noticed them in action in this very post, the links to other blog posts have the coloured dot just before them, and if you toggle new colours in the homepage they will change throughout the blog.

Update favicons with javascript

The next step is to have the favicon too change dynamically with the picked gradient colours, but I wasn't even sure if it was possible, after all favicons are static files, right?

It turns out that it is actually possible, I found a great tutorial on CSS Tricks, How to Create a Favicon That Changes Automatically that explains just how to do it thanks to SVG favicons.

⚠️ Warning:

As of today (April 2023), SVG favicons are supported by all modern browsers with the only exception of Safari both on desktop and mobile.

Using javascript we can target the favicon <link> tag in the <head> of the HTML and change the href attribute to instead of pointing to an asset url, we embed the new file directly by changing the attribute to a data URI that contains the favicon svg with the new colours.

// style favicon by creating a svg and converting it to a data url of the favicon
const faviconHref = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cdefs%3E%3CradialGradient id='b' gradientTransform='matrix(2 0 0 2 -1 -.5)'%3E%3Cstop offset='19%25' stop-color='${encodeURIComponent(array[2])}'/%3E%3Cstop offset='39.25%25' stop-color='${encodeURIComponent(array[2])}' stop-opacity='0.75'/%3E%3Cstop offset='59.5%25' stop-color='${encodeURIComponent(array[2])}' stop-opacity='0.5'/%3E%3Cstop offset='100%25' stop-color='${encodeURIComponent(array[2])}' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='a' x1='.5' x2='.5' y1='0' y2='1'%3E%3Cstop offset='0%25' stop-color='${encodeURIComponent(array[0])}'/%3E%3Cstop offset='22%25' stop-color='${encodeURIComponent(array[1])}'/%3E%3Cstop offset='45%25' stop-color='${encodeURIComponent(array[2])}'/%3E%3Cstop offset='57%25' stop-color='${encodeURIComponent(array[3])}'/%3E%3Cstop offset='76%25' stop-color='${encodeURIComponent(array[4])}'/%3E%3Cstop offset='94%25' stop-color='${encodeURIComponent(array[5])}'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50%25' cy='50%25' r='50%25' fill='url(%23a)'/%3E%3Ccircle cx='50%25' cy='50%25' r='50%25' fill='url(%23b)'/%3E%3C/svg%3E`

// Ensure we have access to the document, i.e. we are in the browser.
if (typeof window === "undefined") return;

const favicon =
	document.querySelector("link[rel*='icon']") ||
	document.head.appendChild(document.createElement("link"));

favicon.type = "image/svg+xml";
favicon.rel = "icon";
favicon.href = faviconHref;

Resources

A technique for generating beautiful color gradients

2023-02-26T00:00:00Z

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 nice color gradients! So I experimented with the idea to generate a new gradient every time the page is loaded. I remember I liked the gradients generated from this nice online gradient generator, by reading through the generated css I found out that a technique to generate nice looking gradients is to combine radial-gradient and linear-gradient.

background-image: radial-gradient(
		100% 100% at 0% 50%,
		#d53a42 19%,
		rgba(204, 58, 78, 0.75) 39.25%,
		rgba(194, 57, 86, 0.5) 59.5%,
		rgba(177, 56, 94, 0) 100%
	), linear-gradient(180deg, #ffffb5 0%, #fef372 7.33%, #f6d860 22%, #f3bf59
			27.67%, #ed894b 39%, #e47346 45%, #d53a42 57%, #c93a51 63.33%, #b1385e 76%, #97385d
			82%, #6a324f 94%);

The result from the css

Generate the colors

The first step is to generate a pleasing palette of 4/5 colors for the linear-gradient, to achieve this I learned from the technique used in this repository meodai/farbvelo:

it picks a series of color stops ℕ0 hues at a user defined minimum angle ∠ generated by the hsluv/hsluv library, a human-friendly alternative to HSL.
it interpolates between color stops in CIE L*a*b* by using gka/chroma.js, a library for color manipulations.

I then pick a middle value in the color palette to generate the radial-gradient color stops. In gradient.js I do those steps and then export the result as a css string:

function setColors(array) {
	let gradient = `radial-gradient(100% 100% at 0% 50%, ${array[2]} 19%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, ${array[0]}, ${array[1]}, ${array[2]}, ${array[3]}, ${array[4]}, ${array[5]})`;
	document.querySelectorAll(".gradient").forEach((el) => {
		el.style.background = gradient;
	});
}

Let the user choose

With the gradient generator working, I really liked the outcomes, but I also wish any reader of this website could find their favorite gradient and have it persist across page loads. So I made the coloured circle in the homepage a clickable button that generates a new gradient and store the result in the browser localStorage.

Some nice gradients

background: radial-gradient(100% 100% at 0% 50%, rgb(118, 201, 193) 19%, rgba(0, 0, 0, 0) 100%), linear-gradient(rgb(62, 97, 102), rgb(100, 166, 177), rgb(118, 201, 193), rgb(128, 225, 191), rgb(136, 240, 187), rgb(145, 216, 178)); background: radial-gradient(100% 100% at 0% 50%, rgb(176, 208, 211) 19%, rgba(0, 0, 0, 0) 100%), linear-gradient(rgb(76, 108, 112), rgb(129, 188, 196), rgb(176, 208, 211), rgb(215, 208, 205), rgb(235, 206, 200), rgb(204, 198, 196)); background: radial-gradient(100% 100% at 0% 50%, rgb(202, 185, 195) 19%, rgba(0, 0, 0, 0) 100%), linear-gradient(rgb(123, 92, 110), rgb(218, 158, 195), rgb(202, 185, 195), rgb(146, 196, 170), rgb(99, 201, 150), rgb(141, 194, 149));

Resources

Markdown is the paper of the web

2023-02-24T00:00:00Z

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 picks a platform for its conveniences, it is almost as if they were committing to always use a dedicated machine for their writing, and with the many conveniences, might also come limitations. Batteries can run out, or it might just break down.

Markdown files are like a pile of paper sheets where I can sketch, jot down drafts, but at the end of the day I will be always be able to carry them with me.

Resources

This blog as a documentation for my projects

2023-02-24T00:00:00Z

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 unfinished projects that I have sitting on my computer. From the moon-shot projects to the basically finished experiments that just need a little tidying to call them done.

My idea to avoid this is to keep the posts small and frequent, so that I can keep myself motivated even when little progress is being made. To support this way of working I added a FrontMatter property project to my markdown files.

---
project: "My blog"
---

This way, when a post is actually part of a series of posts, a navigation menu is displayed on top of the page to let readers orient and explore the subject.

The navigation menu for project posts

The layout can still undergo some changes, but so far those are the main features I want to keep:

the list of posts is ordered in chronological order, instead of the typical list where the latest is on top
the name of the project should be central, right now it is displayed next to the /home link
the navigation item on the rights side controls the project posts list, not the blog navigation

Not all posts will belong to a specific project, there are going to be single-standing posts, but i really like the idea that each post is the atomic unit for bigger projects, whether the topic of the post is technical, about graphics or just me writing any thought about it.

I've already found useful the fact that each project is not not a folder but a frontmatter property, this way I can move posts around or promote a post from being a sub-unit of a project to a standalone project as it evolves, without having to worry about broken links or redirects.

How to build a minimalist Markdown blog with Eleventy

2023-02-21T00:00:00Z

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 content. Maybe fueled by some laziness, here are the choices made here:

dark mode is automatic depending on the user's system preferences, no fancy buttons to switch between modes
no reading metrics of any kind, no reading progress indicator, no time to read, no read counter statistics
no comment system and social media buttons. Just no. Of course feel free to comment with an email
no search or tag filtering, since there needs to be enough content to justify it
no cookies Nobody likes to see a cookie popup as the first thing they see when visiting a website.
no about page, when a paragraph can do.

A really simple about paragraph

Markdown is all you need

Since the goal of this website is to document ongoing projects, it was important to have a setup that can store in a self-contained way all the content, text and images, in simple and portable formats.

Images and folders

To achieve this the website directory structure uses a separate folder for each post. In the same folder there is going to be the text stored in a markdown file and all the images referenced in the file content.

    blog
    ├── post-title
    │ 	├── post-title.md
    │ 	└── image.png
    └── another-post
    		├── another-post.md
    		└── image.png

To ensure portability and compatibility with any future setup, it is important to have a pure Markdown syntax. In this setup we ditch the images shortcodes, that in the Eleventy starter template reference images with Nunjucks syntax, like this:

{% image "./possum.png", "Three possum hanging from a red balloon" %}

While to use the markdown syntax, images need to be referenced like this:

![Three possum hanging from a red balloon](./possum.png)

To achieve this, it would be possible to just set in eleventy.config.js the option to output a copy of any images using the same folder structure, along those lines:

eleventyConfig.addPassthroughCopy(
	"content/posts/**/*.{svg,webp,png,jpeg,jpg,avif}"
);

But that would mean no image optimization, no responsiveness at all, and that's not great, luckily this cool markdown-it plugin exists, solution-loisir/markdown-it-eleventy-img that allows to parse the images using the markdown syntax. Mission accomplished.

Nunjucks templates

The 11ty/eleventy-base-blog is a great starting point to to build a blog, but with some changes to the repository structure it's possible to make it future-proof.

For example, it can be confusing that Nunjucks files can be used as content for templates as they support FrontMatter syntax. But it might be preferable to have a clear separation where Nunjucks files work only as templates and Markdown files for content. To do this let's convert all Nunjucks files in the /content folder to .md. Also all nunjucks syntax is preprocessed in markdown by default, but it can be turned off in eleventy.config.js:

markdownTemplateEngine: false;

Also the nunjucks templates in /layouts were using frontmatter to set the layout.

---
layout: layouts/base.njk
---

But it's possible to convert them to pure Nunjucks syntax by stating which layout they are extending like this:

{% extends "layouts/base.njk" %}

{% block content %}
  ...
{% endblock %}

Linking markdown files

It's possible to link to other internal posts using markdown syntax, but this usually requires to use the FrontMatter permalink property, but this too can be too setup-specific. Moreover today VSCode allow you to drag-and-drop the file into the editor, which automatically generates the relative link.

Editing Markdown in VSCode

But this, just like with image assets, won't work when the content is rendered in HTML because the folder structure will change at build-time and also the linked markdown file will be converted to index.html.

So this won't work:

[Post title](../yyyy-mm-dd-post-title/yyyy-mm-dd-post-title.md)

But this one below will, because index.html is the default file for a folder, so we just need to omit everything that comes after the last slash from the link.

[Post title](../post-title/)

To edit the links at build-time there is another markdown-it plugin, martinheidegger/markdown-it-replace-link, which allow to set some rules inside eleventy.config.js to replace the relative links with the correct ones.

mdLib.use(markdownItLinks, {
	processHTML: true, // defaults to false for backwards compatibility
	replaceLink: function (link, env, token, htmlToken) {
		if (link.includes(".md")) {
			// remove the content after the last slash
			const newLink = link.replace(/[^/]*$/, "");
			return newLink;
		}
		return link;
	},
});

Typography

Even a minimalist blog can still have great typography, and since most of the content would be text and code anyways, it's very easy to have nice looking website with a few steps:

Extracting the .prose class styles from the tailwindlabs/tailwindcss-typography plugin and adding it to the markdown CSS files, provides a great starting point to tweak going forward.
Install the 11ty/eleventy-plugin-syntaxhighlight and pick a Prism theme to add it to the CSS files. This blog is using the prism-one-dark theme.

Resources

Setup a blog with Eleventy 2.0, Tailwind and Alpine.js

2023-02-19T00:00:00Z

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 with the absolute minimum setup.

As Eleventy just released the new 2.0 version, it's the perfect occasion to test this new software. It is a highly-praised static-site generator and this new version comes with even better DX experience. It only takes forking their official starter template from their website, 11ty/eleventy-base-blog to get started building.

The starting point

Installing Tailwind and Alpine.js

One great thing of doing front-end dev today is using libraries like Tailwind and Alpine.js because they allow for speedy development and iteration, letting you focus on the blog content. This is the stack this blog will use, you just need to install them with npm to get started.

npm install tailwindcss alpinejs --save-dev

I created index.css and index.js files in the src folder and added the following to the index.js file:

import Alpine from "alpinejs";
Alpine.start();

And as the usual Tailwind setup, I created a tailwind.config.js file and a postcss.config.js file in the root of my project.

// tailwind.config.js
module.exports = {
	content: ["./_includes/**/*.njk"],
	theme: {
		extend: {},
	},
	variants: {
		extend: {},
	},
	plugins: [],
};

The content property is used by Tailwind to know which files to scan for tailwind classes, in my case I am using Nunjucks templates, so I added the path to my njk files.

// postcss.config.js
module.exports = {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
	},
};

and then I added to my index.css file the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Eleventy and its new features

Eleventy 2.0 comes with a lot of new features, from reading their official announcement, they worked hard to improve performances: dependencies are smaller, build times are faster, and the DX is better.

One improvement in this new version is that some really useful plugins are included out-of-the-box or are very easy to install. I am using the following plugins:

eleventy-plugin-rss to generate an RSS feed

⚠️ Warning:

The Rss plugin only works with the Nunjucks template engine.
eleventy-plugin-syntaxhighlight to add syntax highlighting to code blocks
eleventy-img to perform build-time image transformations, it can output multiple sizes, in multiple formats, cache remote images locally
eleventy-navigation to easily generate navigation menus
eleventy-plugin-bundle, it lets you create small bundles where you need them, even on a per-page basis, more on this later
eleventy-plugin-vite which lets you use Vite to bundle your assets

This sounds like a lot, but once they are installed and configured, they are really easy to use and it's difficult to bump into any issues.

It was nice to to use the eleventy-plugin-bundle plugin to create small bundles only where it made sense. For example, since only the blog posts rely on markdown, I needed the css that styles the content only in my post template, to do so I added the following to my post.njk file:

{% css %}
  {% include "src/css/markdown.css" %}
  {% include "src/css/prism-one-dark.css" %}
{%- endcss %}

Which will be loaded inline only in the posts pages for better performance. In the <head> of my base.njk template file I have this:

{%- css %}
  {% include "src/css/index.css" %}
  {% include "src/css/utility.css" %}
{% endcss %}

<style>{% getBundle "css" %}</style>

You can also do the same to load javascript files, and use the getBundle tag to inline the script files, but for this specific use case I noticed that the loading was smoother by using the other plugin feature, which loads the scripts in a single file.

At the beginning of this project I was trying to set a specific --pathprefix option but I got some issue with the inlined javascript so I ended up doing this instead:

{%- js %}
  {% include "public/js/index.js" %}
  {% include "public/js/gradient.js" %}
{% endjs %}

<script type="module" src="{% getBundleFileUrl "js" %}"></script>

Anyways those are quite small performance optimizations. I will write next a post about the choices I made to ensure this blog is fast to modify and maintain.

dan—webnotes

The joy of extending Tailwind

The joy of extending Tailwind

Props in CSS

CSS shapes

A colored shadow border that blends in

A conditional rounded box

Creating variants

Utility-driven agents

Resources

A Self-maintaining filesystem for static blogs

A Self-maintaining filesystem for static blogs

The file structure

Automating the boring parts

Resources

CSS tricks for markdown blogs

CSS tricks for markdown blogs

Resources

Lessons from a reusable web component

Lessons from a reusable web component

Own a short, distinctive namespace

Theme with namespaced CSS variables

Let modern CSS and JS do the magic

Publish it instead of pasting it

Then document all of it

Repository

Resources

CSS-native parallax effect

CSS-native parallax effect

The timeline

Scaling to avoid empty spots

Motion preferences

Update: 07-06-2026

Resources

Contrast-proofing colors

Contrast-proofing colors

Uses

Doesn't compose with color-mix()

Accessibility disclaimer

Resources

PostCSS Clampwind

PostCSS Clampwind

The idea

How Tailwind v4 handles breakpoints

Keeping the clamp() function name

How to use it

Clamp between smallest and largest breakpoint

Clamp between two breakpoints

Clamp from one breakpoint

Clamp between custom breakpoints

Clamp between Tailwind spacing scale values

Clamp custom properties values

Clamp container queries

Configuration

Add custom breakpoints

Set a default clamp range

Use custom properties

Pixel to rem conversion

Repository

Resources

Generate fluid styles with a Tailwind plugin

Generate fluid styles with a Tailwind plugin

Existing solutions

Plugin requirements

Prototyping

The clamping formula

tailwindcss-fluid-variants v0.0.1

tailwindcss-fluid-variants v0.0.2

Resources

Convert any webpage to SVG and plot it

Convert any webpage to SVG and plot it

Hershey text

Images

Layout

Gcode

Conclusions

Resources

Paper over files: print a blog post in plain markdown

Paper over files: print a blog post in plain markdown

Repository

Keeping the `clamp()` function name