RSSAmplifier

Blog

Luke Bennett

Luke Bennett’s personal website

lukebennett.devRSS feed ↗47 posts

Latest posts

Using Loops and Maps for Efficient Data Transformations

Recently, I’ve been working on a client project built as a single-page application (SPA). Unlike server-rendered apps (where I’ve spent the majority of my time over the past few years), all the data transformations in this app happen client-side. This makes performance something we need to consider much more carefully. The app fetches data from an API that uses JSON pointers to reduce the size of…

Building a Multi-Brand Design System with Tailwind: Tips, Tricks, and Tradeoffs

Back in April, I gave a talk at Syd JS about lessons learned while using Tailwind to build a design system. While I’ve been a Tailwind fan for years (since version 0.5.2 !), this was my first time applying it to a design system since joining Thinkmill. The process challenged me to rethink a few things. Fun fact: I’m pretty sure the first time I heard about Thinkmill was through Tailwind super-fan…

How to display language-specific quotes in CSS

TIL

Top picks — 2024 March

Links Million Lint is in public beta I haven’t had a change to try this out myself, but they tout themselves on the website as as "ESLint, but for performance". I rarely have to use React devtools to identify perf issues, but using and making sense of the flame-graph can be daunting. Since this is a VS Code extension and a plugin for your React app it looks like it might help me find perf issues…

Top picks — 2024 February

It seems I’m not very good at posting regularly, so I thought I might borrow an idea I first saw on Paweł Grzybek’s blog and try posting a monthly roundup of links. Here are my most interesting links from February. Links: Offloading JavaScript With Custom Properties Heydon Pickering makes use of applying CSS custom properties in an Intersection Observer which can then be used in CSS to apply…

Astro-nomical Gains: Why I Switched to Astro from Next.js

I recently revived my long-dormant website as an excuse to better understand Keystatic , as well as the new Next.js app router , and server components . A few months have passed since then, and I've rebuilt the site again, this time using Astro. This post explains why. My personal website is a space to learn new things and over-engineer the hell out of what is essentially a pretty basic blog…

Introducing Valibot, a < 1kb Zod Alternative

New lightweight zod alternative. I always feel bad about adding too much bundle weight — especially when I use zod with react-hook-form , and the react-hook-form zod resolver .

Allow elements to escape the scroll container

Yes please.

How to Blow Up a Category - Netlify's New Era and The JAMstack Endgame

It&#x27;s sad to see Netlify becoming less and less relevant. The first website I ever built was originally hosted on BitBalloon (Netlify&#x27;s predecessor) and I hosted everything I could on Netlify back when I was working at Phiranno Designs . Anecdotally people don&#x27;t seem to be talking about the "Jamstack" anymore. Netlify claims it&#x27;s because Jamstack has become the new norm, but…

Toggles suck!

Interesting read. Not sure I entirely agree, but there are definitely some footguns with a lot of toggle designs in the wild such as relying too heavily on colour to convey information .

What's it like to slowly go blind?

I can highly recommend the new podcast by PJ Vogt (former host of Reply All). It&#x27;s called Search Engine and the most recent episode was especially eye opening (no pun intended 😬)

Adapting typography to user preferences with CSS

This is cool, but I&#x27;m curious what prefers-contrast: less is for — I can&#x27;t imagine it would be an accessibility feature (unlike prefers-contrast: more which definitely is). Is it just for people who have a personal preference for a thinner font weights?

Kindness as a signifier of intelligence

Some positive vibes heading into the weekend 🫶 College graduation speeches are often evergreen. They can be given at any time, similar from decade to decade. Which is why Illinois Governor J. B. Pritzker’s “How To Spot An Idiot” at Northwestern’s graduation is so genius. It is the speech for TODAY

Uplifting Shopify Polaris

Looks like the Polaris team have been busy! Very cool to see my former colleagues Charles Lee , Dominik Wilkowski and Jess Telford listed in the credits. Super weird that this was a "members only" article on Medium though, Shopify should put this on a blog they own.

Nord Design System

This is a really nice looking design system. It&#x27;s got me wondering if I need to start taking web components seriously 🤔

The Nuance of “Domain”

I never really thought about it before, but there&#x27;s no easy way of parsing a domain out of a URL because some "TLDs" have just 1 "part" like .com and some have two .com.au etc 🤔

Aptos, Microsoft’s New Default Font for Office Documents

I personally like Seaford the most, which doesn&#x27;t surprise me as it was co-designed by Tobias Frere-Jones who has designed some of my favourite typefaces such as Whitney and the slightly overused Gotham.

Dan Abramov is leaving Meta

End of an era. i feel bittersweet sharing i’m leaving my job at meta in a few weeks. working in the react org at meta has been an honor. i am thankful to my past and present colleagues for taking me in, letting me make mistakes, helping me see my strengths, being kind, and sharing their time.

Nick Jones

I&#x27;m not normally one for scroll-jacking, but this is wild.

WCAG 2.2 published as a W3C 'Proposed Recommendation'

Don’t make people solve, recall, or transcribe something to log in. Amen to that. Websites that don&#x27;t allow you to paste a password are the absolute worst, good to see the W3C acknowledging this.

Cover of "Bring Me to Life" by Evanescence using Otamatones

Ivory Mastodon Clients clever use of Live Text

This is a brilliant accessibility feature, anything that makes it more likely for people to provide alt text is win in my book.

pnpm now has a full time maintainer

Nice to see that pnpm can afford to pay a maintainer full time due to the donations they receive. Doubly nice to go to their website and see the Thinkmill logo listed as a sponsor. Thanks to your donations we have now one maintainer who can support pnpm full time. Give him a follow: @hvksmr1996

Anthony Fu's proposed 4-digit semver

I kinda like this idea: I&#x27;d propose a 4-digit semver: epoch.major.minor.patch Major indicates there are technical breaking changes, but not necessarily affect many usages. The new Epoch digit indicates an overhaul rewrite or massive update that usually requires migrations. Or for marketing. Keystone gets around this by literally calling the package @keystone-6 (the epoch is right there in the…

Unexpectedly wholesome Slipknot fan art

MDN can now automatically lie to people seeking technical information

🤦‍♂️

Text for Proofing Fonts

Interesting read on why pangrams aren&#x27;t all they&#x27;re cracked up to be.

Who killed Google Reader?

“If Google made the iPod,” he says, “they would have called it the Google Hardware MP3 Player For Music, you know?”

Design notes on the alphabet

How a dose of MDMA transformed a white supremacist

It&#x27;s interesting to see the use of psychedelics having seemingly quite positive effects on peoples mental health. Last Week Tonight had a great segment on this recently.

The Password Game

This is a fun, absurdist spoof of the seemingly arbitrary rules around creating passwords online.

Refresh React Server Component on Focus

Cool idea. It reminds me of Window Focus Refetching with TanStack Query .

Maps Distort How We See the World

The Mercator Projection really messes up your perspective on things. I had quite a few 🤯 moments reading this.

Next.js App Router Update

The transition to the new App Router in Next.js has been rough. It&#x27;s nice to see Vercel acknowledging this publicly. Personally I&#x27;ve been enjoying using it on this site, but there are definitely some rough edges.

Support Responsive Favicons for a Professional Look

TIL you can use a media attribute on a <link> element to offer both light and dark mode versions of your favicon. The cool thing about this approach is that it doesn&#x27;t appear to require a manual page refresh when you change modes for the favicon to switch. That&#x27;s not the case with this approach which I&#x27;ve used in the past.

What we’re learning from the Reddit blackout

The Reddit saga just got more interesting. Some subreddits have marked themselves as NSFW so Reddit can&#x27;t run ads on them anymore!

Panda CSS

Segun Adebayo (of Chakra UI fame) has just announced the release of Panda CSS, a new CSS-in-JS library that generates utility styles at build time (instead of runtime). This looks like just the thing I&#x27;ve been wanting, you can still create dynamic styles like you can with Tailwind, but defining styles in objects rather than doing string concatenation makes the story around customising and…

Reddit CEO praises Elon Musk’s cost-cutting as protests rock the platform

Imagine being the CEO of Reddit, looking at what&#x27;s happened to Twitter over the last few months and thinking "I like what this Elon guy is doing, we should do something similar" 🙃 Huffman also did an interview with The Verge . Gruber wrote about the Verge interview on Daring Fireball and absolutely nails it with this line: No surprise that the CEO of a company whose website is so bad that…

Netlify Connect

I guess this is what Netlify wanted Gatsby for .

Track: The Best Layout Component That You’ve Probably Never Heard Of

I’m helping to build a design system for a client, and a colleague of mine ( Matt Stow ) introduced me to an interesting component that he created, which has fast become one of my most used layout components, so I thought I’d write about it. “Track” is a layout component for distributing content horizontally. It has two “rails” (one on each end) and a flexible “center”. Once you start using this…

Maybe don't use display:contents

Such a bummer, every now and then I run into a layout issue that this CSS feature would have made trivial 🫤

Using Keystatic as a CMS

Most of the text you read on this website was written using Keystatic — a new tool developed by Thinkmill to manage website content. It supports human-readable Markdown (technically Markdoc), JSON, and YAML output formats. For years now, I&#x27;ve had a personal website because: I&#x27;m a web developer, and every framework out there has a tutorial on how to use said framework to set up a blog. I…

Infinite Mac

Nostalgia hit.

Reddit pricing third party apps out of existence

First third party Twitter clients were shut off, now third party Reddit clients are getting priced out. Why can&#x27;t we have nice things 🥲

React is now 10 years old

happy 10th birthday to @reactjs! 🎂⚛️

OKLCH support now in all evergreen browsers

I was looking through the release notes for Firefox 113 and saw that they&#x27;ve added support for OKLCH. Firefox is the last of the "evergreen" browsers to support this new colour space. If you&#x27;re wondering why this is cool, check out this article by Evil Martians . Update: Rachel Andrew recently wrote about this on the web.dev blog .

Uses

Here is a list of the tools I use for work, inspired by this post from Wes Bos . Computer / Office MacBook Air (M1, 2020) Desk: Updown Desk 180cm Bamboo standing desk Monitor: Samsung U28H75x Keyboard: Keychron K2 Mouse: Logitech MX Master 3 Trackpad: Apple Magic Trackpad 2 Coding Editor: Visual Studio Code ( Settings / Extensions ) Theme: Night Owl Font: IBM Plex Mono Terminal(s): Integrated…