2025: Posts tagged #code
Tools for Designers provides great (and free) tools to help with colors and web typography:
Text-to-chart is the process of describing a diagram in text form, and letting software render the actual output. I´ve been investigating the topic by examining Mermaid, a free software library created in 2014 by Knut Sveidqvist with a focus on development related charts, and ECharts, a flexible general-purpose diagramming solution that follows the code-to-chart approach. Unlike Mermaid, which uses a domain-specific language, ECharts is relying on JavaScript to describe the diagrams it renders.
Along the way I couldn´t resist to write two markdown-it plugins, allowing to integrate the charting solutions into your Markdown writing:
This document is my current state of learning the topic. All example charts are rendered by the mentioned plugins.
mermaid.live is the online editor for Mermaid charts.
echarts.apache.org/examples/editor.html is the online editor for ECharts.
A command line tool to process multiple diagrams in one pass into SVG images.
A plugin to render ECharts with markdown-it.
A friendly introduction to SVG by Josh Comeau.
This post is intended to be completely beginner-friendly, no previous SVG experience required (though it does assume that you’re familiar with the basics of HTML/CSS/JS).
A markdown-it plugin to render Mermaid charts on the server.
Use the Nano ID Collision Calculator to understand the collision-likelihood of your current Nano ID alphabet and id-length.
Fancy-Border-Radius is a tool written by Nils Binder, that allows to create and play with blobs by setting the horizontal and vertical radii with the CSS property border-radius.
whatsmydns.net allows to check global DNS record propagation.
Use the eleventy.before configuration event to always have a current CSS.
PagesCMS is a CMS for static sites hosted on GitHub that looks interesting. It is MIT-licensed and made by Ronan Berder. There is a online version to hook into, but it is as well possible to host it yourself.
Jen Simmons is putting a spotlight on the overlooked lh unit with her article Polishing your typography with line height units. It makes a big difference!
Line height units give us a direct way to tie any size in our layout to the vertical rhythm of the text.
I like to apply it in a flow css class to set the space between direct siblings:
.flow > * + * {
margin-block-start: 1em; /* fallback for browsers not supporting the lh unit */
margin-block-start: 1lh;
}The Human in the Loop, by Pablo Stanley.
The LLM writes, reviews, and rewrites its own code. But when it gets stuck, it really gets stuck. Fixing a small bug can spiral into an endless loop — or a full rewrite of the whole project. And you can’t step in, because you don’t speak the language fluently. You just nod along, hoping the next retry works. […] I jokingly tell our dev team I’m a hacker (they silently hate me a bit haha). But I’ve also gained a deep respect for them — the real programmers. The stuff AI does today is built on decades of human work. And when things break, it’s still the humans who fix it… for now.
Aligning a flexible number of items horizontally in one row.
anchor-tool.com allows to select a desired anchor positioning and see the required CSS code. The tool supports logical properties! As of March 7 only working in Chromium browsers.
Navigating the web platform by Patrick Bosset, product manager on the Edge team at Microsoft.
As a web developer, navigating the web platform isn't always easy. Here are ways to keep track of what you can use, of what's new in web browsers, and ways you can influence the development of the platform by making your voice heard.
HTML Minification for Static Sites with html-minifier, by Jim Nielsen.
A checklist for your tsconfig.json, by Dr. Axel Rauschmayer.