For a small Eleventy -based project I wanted to output an example.json file – stored in the data folder – in a nunjucks template. If you simply output the variable example you'll see the unhelpful [ob

Before I even get into the impetus for this blog post, if you came from a search engine and you just want the code, here’s a demo . Pleasure doing business with you. Introduction In a client’s project

Check out this layout I wanted to pull off on the current design of this site: See how just the first two boxes in the “sidebar” of the homepage are set side-by-side on narrow (mobile) layouts. One wa

SVG Symbol is an unvisited technique for reusing inlined SVGs elements. They seem redundant while using popular component-based frameworks/libraries like React, Vue, Svelte, hence you don't see it a l

As with any ageing blog, some of my outbound links are hitting either 404s or domains that are no longer active. It's understandable given that my blog is around 17 years old (at time of writing) and

2023-08-14 #css One of my favorite underrated (and underused!) CSS properties is font-variant-numeric: tabular-nums . Tabular numbers are monospaced, which keeps their sizes consistent and keeps numbe

OpenAI, the company that makes ChatGPT, now offers a way for websites to opt out of its crawler . By default, it will just use web content as it sees fit. How rude! The opt-out works by adding a Disal

Sep 18, 2023 How Smashing Magazine Uses TinaCMS To Manage An Editorial Workflow About The Author Geoff is a technical editor and writer at Smashing Magazine. On top of that, he’s an independent contra

Use your domain for the Mastodon account without hosting an instance Published: 2023.02.10 · 1 minutes read Look at this trick! You can access my Mastodon account via @pawelgrzybek@mastodon.social and

February 16, 2023 3:02 pm I was doing a bit of tweaking on our agency site the other day. I introduced a element to one of the headings in a new post . It looked pretty rubbish though because th

There is little fresh coat of paint around here. It’s not a million miles different from before, just some new aesthetic choices for fun. I went for a high-information-density look. I liked what Robin

I see a recurring performance problem on many ecommerce sites— the most important images on the page are being lazy loaded when they shouldn’t be. It impacts user experience, Core Web Vitals , and by

The Web is a little bit darker today, a fair bit poorer: Molly Holzschlag is dead . She lived hard, but I hope she died easy. I am more sparing than most with my use of the word “friend”, and she was

I don’t like Tailwind . I avoid using it on my client projects. And when I feel motivated, I’ll make a case to remove it from a project where it’s already in use. This isn’t to say using Tailwind is b

It’s been three years since I created this site. One of the main purposes of the site is “ project fiddling and accountability ”. Like last year’s post , the moment of truth is upon us… How did I stac

Just Build It... After I started at Microsoft in 2016, I built my own HTML portfolio website instead of using a template. The template I had been using was gorgeous and interactive but I hadn't built

Lighthouse is a website auditing tool that helps developers with opportunities and diagnostics to improve the user experience of their sites. Lighthouse 11 is available immediately on the command line

February 6, 2023 2:18 pm In Every Layout, we wrote about The Stack . It’s a marriage of Heydon’s Lobotomised Owl selector and my method of managing Flow and Rhythm with CSS Custom Properties . .stack

If you’ve ever worked on sites with lots of long-form text — especially CMS sites where people can enter screeds of text in a WYSIWYG editor — you’ve likely had to write CSS to manage the vertical spa

You can’t have a white favicon, because, in a lot of situations, you won’t be able to see the dang thing at all. Here’s a default Chrome tab while macOS is in Light mode. I made the favicon #eee here

Over the last decade, hamburger buttons have become the de facto standard to expand larger menus on smaller devices. They are so ubiquitous that most users immediately know what their purpose is, when

Forms on the web are an opportunity to make big improvements to the user experience with very little effort. The effort can be as little as sprinkling in a smattering of humble HTML attributes. But th

The :has() pseudo-class is, hands-down, my favorite new CSS feature. I know it is for many of you as well, at least those of you who took the State of CSS survey . The ability to write selectors upsid

In the recent refresh of my website’s design I implemented different theming options. It’s now possible to choose between six different color schemes when reading my blog. The need for more than just

Two years ago, I wrote about how the alert() , prompt() , and confirm() methods were being deprecated . At the time, I lamented that there wasn’t a great replacement for any of them. That’s no longer

August 25, 2023 ; This post is part of RSS Club , rewarding those who still use RSS to read and/or share content. These posts are embargoed from my regular post feed and the socials for an arbitrary n

W hatever the word is for the opposite of heartwarming, it certainly applies to the story of Ruth and Peter Jaffe. The elderly couple from Ealing, north London, made headlines last week after being ch

Two approaches to asset pipelines As outlined by Max Bock in his infamous blogpost about asset pipelines , there are two main ways to transform your assets source files (SCSS and JS mainly) into produ

I have this web page to display the books I've read . Book covers often bring back memories and it's been great to scroll past them on my own page. It's also an opportunity to play around with book da

Spoiler : This is available as an Eleventy theme over on GitHub. Read on to explore key concepts about developing using Eleventy Edge. A new feature with Eleventy v2 (currently in beta) is Eleventy Ed