Feed - chriskirknielsen

Lessons Learned Making my Peritel Typeface 🔗

Being unsatisfied with the heading typeface used on my Vintage theme Vintage theme, I set out to find the perfect typeface encapsulating the ‘80s an [...]

Vento includes sent me down a caching rabbit hole of my own making 🔗

I spent hours chasing down an issue in my 11ty a.k.a. Eleventy a.k.a. BuildAwesome setup, specifically during local development, which I thought was a [...]

Indie games are worth your time 🔗

I don’t know if you play video games, but it’s likely you enjoy games in one form or another. Maybe you play a cozy game on your phone, a card game on [...]

Going Full Circle on CSS Toggle Transitions 🔗

I recently worked on some “accordion” component with a custom marker to indicate open and closed states. I had it set up so the marker, a chevron, wou [...]

Snippet: git ketchup 🔗

Another git snippet I use frequently, git ketchup {BRANCH_NAME}. It’s not catchup because that may be a real command. Like switcheroo, using a silly n [...]

How I nerd-sniped myself into importing Nike Running Club data via the Strava API 🔗

Heads up This is a long post, but I share all my code in the tl;dr at the end! Last week, I played with the idea of showing statistics related to my [...]

Cheff mpeg 🔗

I built a tool to prepare FFmpeg commands because despite using it nearly every day, I still forget syntax details. If I were really invested, I’d cre [...]

Auto-scroll overflowing table cells with CSS container queries 🔗

I saw an exchange over on Mastodon about a small bit of the State of JS results interface. Paweł noticed a little movement on a table cell label that [...]

A no-AI icon for humans to use 🔗

I have added a tiny no A.I. symbol in the footer of my website. It’s supposed to be as unremarkable as a © symbol (though I think we can all agree it [...]

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 [...]

Keeping link underline styles around inline code with padding 🔗

Preserving the tiny underline is nearly effortless with CSS pseudo-elements. Read full article: Keeping link underline styles around inline code with [...]

Adding a custom filename to a code block in Eleventy with markdown-it 🔗

Making those code blocks a little more personal. Read full article: Adding a custom filename to a code block in Eleventy with markdown-it. [...]

Preventing jank on focused overflow-causing elements 🔗

Making sure the focused element doesn’t trigger janky scroll. Read full article: Preventing jank on focused overflow-causing elements. [...]

Conditional favicon in Eleventy using passthrough copy 🔗

Never mix up dev and prod again! (due to identical icons, at least) Read full article: Conditional favicon in Eleventy using passthrough copy. [...]

From Nunjucks to Vento in Eleventy: a migration guide (kinda) 🔗

A few tips to refactor your njk into vto. Read full article: From Nunjucks to Vento in Eleventy: a migration guide (kinda). [...]

Taking VentoJS for a spin in Eleventy 🔗

There’s a new kid on the templating block. Read full article: Taking VentoJS for a spin in Eleventy. [...]

Double-Pagination in Eleventy 🔗

Yo dawg, I heard you liked pagination, so I added pagination inside your paginated pages, so you can paginate while you paginate. Read full article: D [...]

Some thoughts on the item-flow proposal 🔗

Solving for masonry could have beneficial side effects for other layout methods. Read full article: Some thoughts on the item-flow proposal. [...]

A Future of Themes with CSS Inline if() Conditions 🔗

Another way to implement themes on a website with style conditions. Read full article: A Future of Themes with CSS Inline if() Conditions. [...]

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 🔗

Move a commit from one branch to another. 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. [...]

chriskirknielsen