Never mix up dev and prod again! (due to identical icons, at least)| chriskirknielsen
A few tips to refactor your njk into vto.| chriskirknielsen
In a recent rebuild for another blog of mine, where I switched from Hugo to Eleventy, I decided to give VentoJS a try, which is the new kid on the block, as far as templating languages go. There are IDE integrations that make it feel right at home in VS Code (for me), and an Eleventy plugin to make it painless to start using with my favourite static site generator. Thanks to both Óscar Otero for making Vento, and Noel Forte for the Eleventy plugin!| chriskirknielsen
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 weekend. While Hugo is a very fast static site generator, it also uses a syntax which can easily get confusing if not used often. Given I barely did any maintenance since 2019, and basically only published content every so often, it’s been holding up surprisingly well. However, small changes few and far in between really highlighted how brit...| chriskirknielsen
My solution to adding "Copy" to markdown code blocks (and other things).| chriskirknielsen
Retrieving a property of an object which is also in an object in JavaScript.| chriskirknielsen
Solving for masonry could have beneficial side effects for other layout methods.| chriskirknielsen
Another way to implement themes on a website with style conditions.| chriskirknielsen
So this is how I can explain temperature fluctuations outside the US!| chriskirknielsen
I keep making updates to my website, and for this holiday break, amongst other things, I added a highlighter logic to my table of contents. It's gone through a couple of iterations, but I've landed on a good one, and it's following a nice principle: Keep It Simple, Stupid. 💋| chriskirknielsen
I was working on a project requiring this kind of vertical slider. Each slide needed to have the same height so it wouldn't look jarring as you scrolled, and I just knew I was going to use the trusty grid-area: 1 / 1 / -1 / -1; solution to make all the slides fit the same space in the slider. I suspect a column-oriented flexbox solution with flex: 1 0 0 is equally viable.| chriskirknielsen
I was working on a product page where the "Add to Cart" button should appear fixed on the page in the "above-the-fold" section. All good, slap position: sticky and bottom: 1rem on the button and it'll work. But I got curious… could it also stay stuck to the top of the page, after scrolling down, if the section is a bit taller? And… yes, it does. If you give it top: 1rem in addition to the rest, it will work just fine.| chriskirknielsen
I recently made a little update to my site with a blogroll that includes the linked site’s favicon. I think it’s good to have that icon be clickable, so I wrapped icon and label within a standard link. It looked… okay.| chriskirknielsen
Yesterday, I discovered a new wish I had in CSS: when selecting the next few siblings of an element, instead of having to do .el + *, .el + * + *, .el + * + * + *, I'd love to have something like :nth-next-sibling(-n + 3 of .el). But writing that down, the of made me think “Oh bother, that syntax would be confusing with :nth-child(n of .el)" and then the epiphany followed: I can achieve my goal with :nth-child already.| chriskirknielsen
I’m still seeing some folks use ways to restore a user’s selected theme on websites that are, in my eyes, too complex. Cookies and headers? Delayed render? Edge functions? Nah, I’m too lazy for that. One line of JavaScript in the <head>:| chriskirknielsen
How I implemented Notion and PSN APIs in my Eleventy build for my Now and Gaming pages| chriskirknielsen
On m'a posé la question mais puisque je n'ai pas trouvé de ressource en français à ce sujet après trois secondes de recherche, voici mon tout petit guide sur var, let, et const en JavaScript.| chriskirknielsen
Andy Bell propose un reset CSS adapté aux navigateurs modernes.| chriskirknielsen
Precompiled Sass and JS files that become part of the source folder.| chriskirknielsen
Group by year in a clear and readable manner| chriskirknielsen
Avoid false positives when using :not() to exclude ancestors from a scope| chriskirknielsen
Grow a stroke on an SVG shape but only covering the inner part| chriskirknielsen
Set up a CSS grid with a specific ideal number of columns.| chriskirknielsen
Pre-compile some reused assets to avoid repeating the same operation.| chriskirknielsen
Using renderFile to keep things tidy| chriskirknielsen
I'm not on the TypeScript train, but I like a couple of things…| chriskirknielsen
Clean up overlap animations on hovered elements| chriskirknielsen
Using chained CSS transforms to get a rotation without rotating the element itself.| chriskirknielsen
Using a CSS custom property trick to define themes variables only once.| chriskirknielsen
Only show a separator when two items are next to each other, and skip for new lines.| chriskirknielsen
Use a collection of utilities to form components without additional CSS.| chriskirknielsen
Get a more consistent sizing with viewport-based font sizing| chriskirknielsen
Make a contained element span the entire horizontal space.| chriskirknielsen
Use the cascade to colour links in their context.| chriskirknielsen
Running a simple blog doesn't require a large CMS.| chriskirknielsen
One way to implement themes on a website with style queries| chriskirknielsen
Precompiled Sass and JS files that become part of the source folder.| chriskirknielsen