Bloggy Corner
I like to write once in a while. Enjoy!
Year 2024 (3×)
2024 redesign
Some notes about this 2024 redesign.
Snippet: git switcheroo
Precompiled Sass and JS files that become part of the source folder.
CSS Wishlist 2024
My Wishlist for CSS in 2024
Year 2023 (6×)
Grouping posts by year with Nunjucks in Eleventy
Group by year in a clear and readable manner
(Updated )
Select an element which doesn’t descend from another in CSS
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.
Year 2022 (6×)
(Updated )
Eleventy Asset Pipeline: Precompiled Assets without Gulp
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.
(Updated)
Eleventy within Eleventy to compile when you compile: precompiling reused assets
Pre-compile some reused assets to avoid repeating the same operation.
(Updated )
Manage your SVG files with Eleventy’s Render plugin
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
Year 2021 (3×)
(fr) Le petit guide sur var, let et const
Comment distinguer ces mots-clés JavaScript
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.
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
Year 2019 (4×)
Breakout Container
Make a contained element span the entire horizontal space.
(fr) Une réinitialisation CSS moderne
Andy Bell propose un reset CSS adapté aux navigateurs modernes.
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.