A creative developer
Introducing Peritel , a brand new nostalgia-fuelled retro typeface, by yours truly. Being unsatisfied with the heading typeface used on my Toggle Vintage theme Vintage theme Vintage theme , I set out to find the perfect typeface encapsulating the ‘80s and ‘90s, especially computer (entertainment) systems, but there was always something that fell short: boring s , ugly r , or way-too-sharp angles.…
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 caching issue, without knowing where: any time I would update a JS file, I’d have to stop and restart my local development server. Not the end of the world, but not great either. I precompile my JS and CSS files from an /_assets folder into an…
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 your work computer (definitely only during breaks), or a cute adventure game on your gaming console. And table top games count, too, of course! Note There is no such thing as a real gamer or not, only gamers and gatekeepers. I mostly play on…
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, would rotate by 180 degrees when the component was in its open state. Add a CSS transition (when motion preferences allow it), job done. But… it would animate backwards upon closing, “rewind” so to speak, which is exactly how CSS should work, but I…
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 name (nearly) guarantees there won’t be naming collisions with real git commands. .gitconfig .gitconfig [ alias ] ketchup = "!f(){ git fetch origin ${1} : ${1} ; }; f" I use a graphical user interface (a.k.a. a GUI, mine is Fork ) and there’s no…
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 running below the other site-related stats . I’ve only been running since some time in 2022, which wouldn’t be such a big thing if it weren’t for the fact I had never been athletic in my life before (except when forced to, i.e. in P.E class, and to…
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 create some app with a file picker that does this and runs the command for you, but 1) that probably exists, and 2) I do not have the knowledge to build such an app! FFmpeg is a beast and can do so many cool things, but I am keeping it simple, in that…
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 seemed glitchy. Sacha described it as an issue due to a reveal effect: when a label would be longer than the table cell it was in, hovering it would scroll it so you could read the whole thing, but short labels were also affected. So I inserted…
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 basically holds no value whatsoever these days), but communicates that A.I. — the buzzword encompassing large language models, machine-learning, or neural networks, which are speeding up climate change, devaluating labour, decaying critical thinking,…
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 understanding instead of discussing how messy the world’s goings-on have been, or how life has been tiring, so I’ll skip over all that stuff and keep it light-hearted. For the most part, this is a media diet rather than a weeknote-formatted…
Preserving the tiny underline is nearly effortless with CSS pseudo-elements. Read full article: Keeping link underline styles around inline code with padding .
Making those code blocks a little more personal. Read full article: Adding a custom filename to a code block in Eleventy with markdown-it .
Making sure the focused element doesn’t trigger janky scroll. Read full article: Preventing jank on focused overflow-causing elements .
Never mix up dev and prod again! (due to identical icons, at least) Read full article: Conditional favicon in Eleventy using passthrough copy .
A few tips to refactor your njk into vto. Read full article: From Nunjucks to Vento in Eleventy: a migration guide (kinda) .
There’s a new kid on the templating block. Read full article: Taking VentoJS for a spin 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: Double-Pagination in Eleventy .
Solving for masonry could have beneficial side effects for other layout methods. Read full article: Some thoughts on the item-flow proposal .
Another way to implement themes on a website with style conditions. Read full article: A Future of Themes with CSS Inline if() Conditions .
So this is how I can explain temperature fluctuations outside the US! Read full article: Relative Temperature Conversion .
Highlight your TOC in a tick. Read full article: “Simple” Table of Contents Highlighter .
Kind of a year in review. Read full article: 2024 as bullet points .
Using transforms to create overflow. Read full article: Vertical slider fitting the tallest element in pure CSS .
You can use it any way you’d like. Read full article: The Multi-Directional Nature of position: sticky .
Fixing the tiny underline is nearly effortless with CSS variables. Read full article: Removing link underline styles between icons and text .
Target N elements after an arbitrary element in CSS. Read full article: :nth-next-sibling? No need. .
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) .
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 caching system .
Some notes about this 2024 redesign. Read full article: 2024 redesign .
Move a commit from one branch to another. Read full article: Snippet: git switcheroo .
My Wishlist for CSS in 2024. Read full article: CSS Wishlist 2024 .
Group by year in a clear and readable manner. Read full article: Grouping posts by year with Nunjucks in Eleventy .
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 CSS .
One way to implement themes on a website with style queries. Read full article: A Future of Themes with CSS Container Style Queries .
My solution to adding "Copy" to markdown code blocks (and other things). Read full article: My plugin for Markdown-It: CodeWrap .
Grow a stroke on an SVG shape but only covering the inner part. Read full article: Animate an SVG shape’s inner stroke .
Retrieving a property of an object which is also in an object in JavaScript. Read full article: Plucking a nested property from an object .
Precompiled Sass and JS files that become part of the source folder. Read full article: Eleventy Asset Pipeline: Precompiled Assets without Gulp .
Set up a CSS grid with a specific ideal number of columns. Read full article: CSS Grid with a preferred column count .
Pre-compile some reused assets to avoid repeating the same operation. Read full article: Eleventy within Eleventy to compile when you compile: precompiling reused assets .
Using renderFile to keep things tidy. Read full article: Manage your SVG files with Eleventy’s Render plugin .
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 .
Clean up overlap animations on hovered elements. Read full article: Animate your z-index for cleaner hover effects .
Comment distinguer ces mots-clés JavaScript. Read full article: Le petit guide sur var, let et const .
Using chained CSS transforms to get a rotation without rotating the element itself. Read full article: Rotating floating animation with chained transforms .
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-preference media query as well as CSS classes. Since you can’t do both in a single declaration block, you usually repeat these theme variables… but with this little hack, no need! CSS --color : var ( --light , orchid ) var ( --dark , rebeccapurple ) ;…
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 .
Use a collection of utilities to form components without additional CSS. Read full article: Building and maintaining components from utility classes in Eleventy .
Get a more consistent sizing with viewport-based font sizing. Read full article: Modern Fluid Typography with clamp() .
Make a contained element span the entire horizontal space. Read full article: Breakout Container .