Yearnotes 2025 đź”—
Another year has gone by. I guess Smash Mouth was right: the years start comin’ and they don’t stop comin’. We can make quick eye contact and nod in u [...]
chriskirknielsen
Posts
Keeping link underline styles around inline code with padding đź”—
Recently, text-decoration-trim text-decoration-inset was added to Firefox behind a flag, and I was hoping it could fix a little visual thing that has [...]
Adding a custom filename to a code block in Eleventy with markdown-it đź”—
I made a plugin to have more control over my code blocks (CodeWrap, I wrote about it), and I liked the idea of giving a filename to a code block (for [...]
Preventing jank on focused overflow-causing elements đź”—
I recently fixed an annoying issue on my Projects page, and I did it with CSS, of course. That page has cards, and each of them have a title (with a l [...]
Conditional favicon in Eleventy using passthrough copy đź”—
Let’s see if I can make this short and sweet… okay so you may be like me and jump between the local build and the live (or “production”) versions of y [...]
From Nunjucks to Vento in Eleventy: a migration guide (kinda) đź”—
I already wrote a little about refactoring a blog of mine with Vento recently (check out Helen’s post, too!), but it was a rather simple codebase, mak [...]
Taking VentoJS for a spin in Eleventy đź”—
Update I have written a sort of guide for migrating to Vento, from Nunjucks, if you’re interested in that! In a recent rebuild for another blog of mi [...]
Double-Pagination in Eleventy đź”—
So I recently converted a French blog of mine to Eleventy from a Hugo-powered one (which itself was previously a WordPress…), as one does on a cloudy [...]
Some thoughts on the item-flow proposal đź”—
There’s a brand-new proposal to solve for masonry layout in CSS from Webkit. If you haven’t already, you should definitely read it: Item Flow, Part 1: [...]
A Future of Themes with CSS Inline if() Conditions đź”—
Hey, so remember when I went down a CSS rabbit hole about using style queries to create themes in 2023? Well I’m back on my bullshit. Recently, Chrome [...]
Relative Temperature Conversion đź”—
So this is how I can explain temperature fluctuations outside the US! Read full article: Relative Temperature Conversion. [...]
“Simple” Table of Contents Highlighter 🔗
Highlight your TOC in a tick. Read full article: “Simple” Table of Contents Highlighter. [...]
2024 as bullet points đź”—
Kind of a year in review. Read full article: 2024 as bullet points. [...]
Vertical slider fitting the tallest element in pure CSS đź”—
Using transforms to create overflow. Read full article: Vertical slider fitting the tallest element in pure CSS. [...]
The Multi-Directional Nature of position: sticky đź”—
You can use it any way you’d like. Read full article: The Multi-Directional Nature of position: sticky. [...]
Removing link underline styles between icons and text đź”—
Fixing the tiny underline is nearly effortless with CSS variables. Read full article: Removing link underline styles between icons and text. [...]
:nth-next-sibling? No need. đź”—
Target N elements after an arbitrary element in CSS. Read full article: :nth-next-sibling? No need.. [...]
My under-engineered way to avoid a Flash of inAccurate coloR Theme (FART) đź”—
It all boils down to a single line of JS. Read full article: My under-engineered way to avoid a Flash of inAccurate coloR Theme (FART). [...]
Leveraging APIs like Notion with a nice caching system đź”—
How I implemented Notion and PSN APIs in my Eleventy build for my Now and Gaming pages. Read full article: Leveraging APIs like Notion with a nice cac [...]
2024 redesign đź”—
Some notes about this 2024 redesign. Read full article: 2024 redesign. [...]
Snippet: git switcheroo đź”—
Precompiled Sass and JS files that become part of the source folder. Read full article: Snippet: git switcheroo. [...]
CSS Wishlist 2024 đź”—
My Wishlist for CSS in 2024. Read full article: CSS Wishlist 2024. [...]
Grouping posts by year with Nunjucks in Eleventy đź”—
Group by year in a clear and readable manner. Read full article: Grouping posts by year with Nunjucks in Eleventy. [...]
Select an element which doesn’t descend from another in CSS 🔗
Avoid false positives when using :not() to exclude ancestors from a scope. Read full article: Select an element which doesn’t descend from another in [...]
A Future of Themes with CSS Container Style Queries đź”—
One way to implement themes on a website with style queries. Read full article: A Future of Themes with CSS Container Style Queries. [...]
My plugin for Markdown-It: CodeWrap đź”—
My solution to adding "Copy" to markdown code blocks (and other things). Read full article: My plugin for Markdown-It: CodeWrap. [...]
Animate an SVG shape’s inner stroke 🔗
Grow a stroke on an SVG shape but only covering the inner part. Read full article: Animate an SVG shape’s inner stroke. [...]
Plucking a nested property from an object đź”—
Retrieving a property of an object which is also in an object in JavaScript. Read full article: Plucking a nested property from an object. [...]
Eleventy Asset Pipeline: Precompiled Assets without Gulp đź”—
Precompiled Sass and JS files that become part of the source folder. Read full article: Eleventy Asset Pipeline: Precompiled Assets without Gulp. [...]
CSS Grid with a preferred column count đź”—
Set up a CSS grid with a specific ideal number of columns. Read full article: CSS Grid with a preferred column count. [...]
Eleventy within Eleventy to compile when you compile: precompiling reused assets đź”—
Pre-compile some reused assets to avoid repeating the same operation. Read full article: Eleventy within Eleventy to compile when you compile: precomp [...]
Manage your SVG files with Eleventy’s Render plugin 🔗
Using renderFile to keep things tidy. Read full article: Manage your SVG files with Eleventy’s Render plugin. [...]
Fine, types in JS aren’t the worst 🔗
I’m not on the TypeScript train, but I like a couple of things… Read full article: Fine, types in JS aren’t the worst. [...]
Animate your z-index for cleaner hover effects đź”—
Clean up overlap animations on hovered elements. Read full article: Animate your z-index for cleaner hover effects. [...]
Le petit guide sur var, let et const đź”—
Comment distinguer ces mots-clés JavaScript. Read full article: Le petit guide sur var, let et const. [...]
Rotating floating animation with chained transforms đź”—
Using chained CSS transforms to get a rotation without rotating the element itself. Read full article: Rotating floating animation with chained transf [...]
A DRY Approach to Color Themes in CSS đź”—
I wrote an article on CSS-Tricks about using a --var: ; trick from Lea Verou to define theme variables only once, when you need to respect a user-pref [...]
Inline lists with conditional separators đź”—
Only show a separator when two items are next to each other, and skip for new lines. Read full article: Inline lists with conditional separators. [...]
Building and maintaining components from utility classes in Eleventy đź”—
Use a collection of utilities to form components without additional CSS. Read full article: Building and maintaining components from utility classes i [...]
Modern Fluid Typography with clamp() đź”—
Get a more consistent sizing with viewport-based font sizing. Read full article: Modern Fluid Typography with clamp(). [...]
Breakout Container đź”—
Make a contained element span the entire horizontal space. Read full article: Breakout Container. [...]
Une réinitialisation CSS moderne 🔗
Andy Bell propose un reset CSS adapté aux navigateurs modernes. Read full article: Une réinitialisation CSS moderne. [...]
Contextual Utility Classes for Color with Custom Properties đź”—
I wrote an article on CSS-Tricks about using the power of the cascade to style links within their context, with custom properties! Here’s an example: [...]
Switching From WordPress To Hugo đź”—
When I converted my blog, Geekometric, from a WordPress-based site to a Hugo-built static site, I felt I needed to go through a lot of different pages [...]