Snippet: git switcheroo
Precompiled Sass and JS files that become part of the source folder.
Blog
Here are some random thoughts about front-end development and other things. I know it ain't much, but it's honest.
Posts for the year 2024 (2×)
CSS Wishlist 2024
My Wishlist for CSS in 2024
Posts for the year 2023 (6×)
Grouping posts by year with Nunjucks in Eleventy
Group by year in a clear and readable manner
Select an element which doesn’t descend from another in CSS
(updated )
Avoid false positives when using :not() to exclude ancestors from a scope
A Future of Themes with CSS Container Style Queries
One way to implement themes on a website with style queries
My plugin for Markdown-It: CodeWrap
My solution to adding "Copy" to markdown code blocks (and other things)
Animate an SVG shape's inner stroke
Grow a stroke on an SVG shape but only covering the inner part
Plucking a nested property from an object
Retrieving a property of an object which is also in an object in JavaScript.
Posts for the year 2022 (6×)
Eleventy Asset Pipeline: Precompiled Assets without Gulp
(updated )
Precompiled Sass and JS files that become part of the source folder.
CSS Grid with a preferred column count
Set up a CSS grid with a specific ideal number of columns.
Eleventy within Eleventy to compile when you compile: precompiling reused assets
(updated)
Pre-compile some reused assets to avoid repeating the same operation.
Manage your SVG files with Eleventy’s Render plugin
(updated )
Using renderFile to keep things tidy
Fine, types in JS aren't the worst
I'm not on the TypeScript train, but I like a couple of things…
Animate your z-index for cleaner hover effects
Clean up overlap animations on hovered elements
Posts for the year 2021 (2×)
Rotating floating animation with chained transforms
Using chained CSS transforms to get a rotation without rotating the element itself.
A DRY Approach to Color Themes in CSS
Using a CSS custom property trick to define themes variables only once.
Posts for the year 2020 (3×)
Inline lists with conditional separators
Only show a separator when two items are next to each other, and skip for new lines.
Building and maintaining components from utility classes in Eleventy
Use a collection of utilities to form components without additional CSS.
Modern Fluid Typography with clamp()
Get a more consistent sizing with viewport-based font sizing
Posts for the year 2019 (3×)
Breakout Container
Make a contained element span the entire horizontal space.
Contextual Utility Classes for Color with Custom Properties
Use the cascade to colour links in their context.
Switching From WordPress To Hugo
Running a simple blog doesn't require a large CMS.