Recently I decided to look into some functionality in Eleventy I hadn't used before: Transforms . According to their website: Transforms can modify a template’s output. For example, use a transform to format/prettify an HTML file with proper whitespace. So let's try and use this functionality to have nicely formatted HTML by using Prettier . Prettier is a code formatter that can be used for a…
This website is implemented with a very minimal style, with black text on a white background. High contrast, easy to read, no distractions. But opening the website when you're in a darker environment is like accidentally turning on a flashlight right in your face. Let's do something about this. Preferred color scheme I'm sure you've heard of dark mode before, and a lot of websites have implemented…
As you might have noticed, I don't have a very stable streak in posting notes on here. It only took almost a year between my last note and the one before that, so my setup tends to get outdated. And because I take so long, I keep forgetting what and how I need to update everything. So to make it easier for my future self I decided to document it. Update npm first Last time I already received a…
As you might have noticed, the style of this website is pretty minimal. And because it's so minimal there's not much that could hurt the lighthouse score...or so you'd think. Turns out that the one thing I did do already hurts the score: loading a web font. Every once in a while I check the scores of my website to see if things are still working correctly, and I noticed that on mobile the…
Recently I, among a whole lot of others, revived my Mastodon account now that a spoiled brat took over Twitter and is currently burning it to the ground. Along with the revival I started searching for the people I'd like to follow and I saw several accounts that had verified links on their profile. Now with Twitter it would be a real hassle to get a verified account (and it got even weirder with…
I started out creating these notes with the date in the url, because I thought it was an easy way to keep some overview of my notes. But it turned out to be rather annoying when I was creating new posts. I rarely start and finish a post on the same day, which meant I would have to change the filename multiple times. It also meant that every url was 10 characters longer than it needed to be. So…
Full disclosure: I'm writing this mainly because I keep having to look up how I've set up my development environment. I'm happy with how it's set up, but because I use it for some hobby projects and the occasional client work, I keep forgetting how I have to set up a new project. Time to document it for my own reference (in case the reference articles disappear for some reason) and while I'm at it…
At the moment the only image on my website is my logo on the homepage. But since it's an SVG, I decided to load it directly in the HTML. I could just copy the contents of the SVG file and paste it where I wanted it. But if I decide to have the image at several different places, and I make some adjustment to it, I also would have to change it at several different places. I don't want to do that,…
When I wrote the post about Implementing clientside webmentions a while ago it was mentioned by Nicolas Hoizey that this implementation would result in many requests to webmention.io . And although that's the result of having a static website with dynamic webmentions, I still wanted to try and optimize this. I was already planning on implementing service workers and this was the perfect use case.…
When sharing links on social media, it's nice to have an image instead of just the link. To achieve this you can implement the og: meta tags. You can check out the Open Graph protocol for more information about all the available tags. To define this image you can use the og:image meta tag. This can be a static image of the logo of your website for example, but for articles it's nicer to have the…
I came across webmentions a while ago and I wanted to try it out. If you don't know what a webmention is, Wikipedia describes it as follows: Webmention enables authors to keep track of who is linking to, referring to, or commenting on their articles. By incorporating such comments from other sites, sites themselves provide federated commenting functionality. For a static website as the one you're…
Because I'm still following my Unhurried Development principle I'm taking small steps and making small changes. That's how I came across an issue with cached assets [1] . A cached CSS file in my case, to be specific. And although it's easy to force reload on desktop browsers, this is a lot harder on mobile devices. Besides, visitors don't know they are using a CSS file that is served from cache,…
To give my website a bit more personality I wanted to use a webfont instead of a system font. And because variable fonts are gaining traction I thought I would give it a shot. If you're not familiar with variable fonts, I would suggest you read the Introduction to variable fonts on the web . In short, variable fonts can be described by the following quote from the mentioned article: Many font…
With the rise of all the different social media platforms several years ago, RSS was deemed unnecesary. Even Google discontinued Google Reader in 2013. But with the weird algorithms used in social media, lots of people (well, lots of developers at least) still rely on feeds to have a chronological feed of articles they're interested in. Eleventy provides a RSS plugin to generate a feed for your…
I recently stumbled upon an article posted on CSS-Tricks about How to Favicon in 2021 . Usually I would just use whatever a Favicon Generator would output for me, but it always felt like it returned...well... a lot ! That's great though, because you can serve a favicon on every browser and in every occasion. But, as the article the CSS-Tricks article refers to states, not all of them are really…
When creating collections, like I am with these notes, it's expected to have an index file of all the posts. All my notes are under the /notes/ url path, but by default the /notes/ url path itself isn't available. And creating a file in the notes folder in the Eleventy project won't fix this, because this will create a new note by itself. Nicolas Hoizey pointed out on Twitter that it is possible,…
When writing notes it's important to add a date to them. Even if it's just for your own use, it can be really helpful for future you to directly see how recent and relevant the note is. Because in the ever changing world of front-end development just a year can make a real difference. Seeing how many starter blogs are available for Eleventy, I thought the date support would be baked in. And to be…
I recently changed hosting and instead of moving my old website, I thought it was the perfect time to build the new website I had in my mind for a while now. The only problem was, I hadn't even started on it yet. And before I would have it at a stage where I feel comfortable enough to share it, it could be weeks, months...years even! I didn't want to wait that long, so I decided to just start.…