![\"Screenshot](\"https://whwfzhw0vq15.keystatic.net/twnwnaffxs5x/images/j34frbz8rg7c/pagespeed-insights?fit=scale-down&w=700&h=532&auto=format\"/)
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 the payload. The data is then validated (using a runtime schema validator), transformed into a more usable shape, and plotted on a directed graph to form a tree structure.
Early on, we realised that minimising data passes and avoiding unnecessary memory allocations (like creating intermediate arrays) would be important for maintaining performance, particularly for users working with larger datasets.
In the past, I rarely used loops like for or for...of after learning them. The conventional wisdom in the JavaScript community seemed to be to favour immutable data structures and functional programming styles — chaining methods like filter and map. However, I’d noticed performance-conscious projects often favoured loops, and I’d read about how they can be faster and more memory-efficient. This inspired me to experiment with them more on this project.
I quickly realised that (in most cases) loops allowed me to do more work in a single pass without sacrificing readability or maintainability. While chaining array methods is often concise, I’ve found loops strike a nice balance between clarity and efficiency — especially when TypeScript introduces friction with array methods, as I’ll demonstrate in the examples below.
This isn’t to say there’s anything wrong with array methods — in most cases, they’re perfectly fine, and their method names often make the code’s intent clear, especially for simpler tasks. But for more complex transformations or when performance really matters, I’ve been gravitating towards loops lately.
Let’s compare three ways to write a makeDisplayName function: one that chains array methods, one using reduce, and another with a for...of loop. The function takes multiple arguments representing the parts of a name, filters out invalid values, trims the remaining strings, and concatenates them with a space:
makeDisplayName(null, 'Maynard', undefined, 'James', false && 'Bob', 'Keenan', '');\n// Returns 'Maynard James Keenan'This function is unlikely to have performance issues in practice, but it’s complex enough to showcase the trade-offs you might encounter when choosing between different approaches.
function makeDisplayName(...parts: Array<string | undefined | null | false>): string {\n\t// Filter, trim, and join valid parts\n\treturn (\n\t\tparts\n\t\t\t// Filter out invalid parts (non-strings or falsy values)\n\t\t\t.filter(\n\t\t\t\t(part): part is string => Boolean(part) && typeof part === 'string',\n\t\t\t)\n\t\t\t// Trim each part\n\t\t\t.map((part) => part.trim())\n\t\t\t// Join all parts with a space\n\t\t\t.join(' ')\n\t);\n}This function is fine for the most part: it’s concise and uses familiar methods. However, it requires three passes over the array (filter, map, and join) and creates two intermediate arrays. While this isn’t an issue for this use case, it’s worth considering for larger datasets. A minor annoyance is dealing with TypeScript — the filter needs a type predicate, and the truthy check requires wrapping with Boolean() or using !!, which adds some verbosity.
function makeDisplayName(...parts: Array<string | undefined | null | false>): string {\n\t// Accumulate valid parts into a single string\n\treturn parts.reduce<string>(\n\t\t// Callback\n\t\t(name, part) => {\n\t\t\t// If the part is a non-empty string\n\t\t\tif (part && typeof part === 'string') {\n\t\t\t\t// Append the trimmed part to the name, with a space\n\t\t\t\treturn name ? `${name} ${part.trim()}` : part.trim();\n\t\t\t}\n\t\t\t// Return the current name if the part is invalid\n\t\t\treturn name;\n\t\t},\n\t\t// Initial value\n\t\t'',\n\t);\n}The first thing I noticed about this is we have to explicitly provide a value to the generic parameter of reduce for this to work. Trying to write a function like this can be pretty painful unless you know about this quirk. You also need to remember to return name if the part doesn't pass the check in the if statement. Finally, we need to pass an empty string as the initial value so TypeScript can infer the type for name. While it’s a single-pass solution, it’s arguably harder to read than the filter and map approach.
for...of loopfunction makeDisplayName(...parts: Array<string | undefined | null | false>): string {\n\t// Start with an empty string\n\tlet name = '';\n\t// Loop through the parts\n\tfor (const part of parts) {\n\t\t// If the part is a non-empty string\n\t\tif (part && typeof part === 'string') {\n\t\t\t// Add the trimmed part to the name, with a space\n\t\t\tname = name ? `${name} ${part.trim()}` : part.trim();\n\t\t}\n\t}\n\t// Return the final name\n\treturn name;\n}In terms of code style, the for...of loop is the most imperative, but as you can see, it’s still about the same amount of code. We have basically the same logic as the reduce version, and none of the TypeScript shenanigans to worry about.
This is just one example, but it shows how different approaches trade off clarity, efficiency, and ease of use. Hopefully, it’s fairly representative of what you can expect.
Let’s look at how you can use a Map to take these benefits even further.
Another JavaScript feature I’ve found myself using more than ever on this project is the Map object. Maps are a special type of object that stores key-value pairs, and I often use its get and has methods to retrieve or check data inside a loop.
Imagine you’ve got an array of employees, and you want to print each employee’s name along with their manager’s name. Storing the manager object inside each employee isn’t ideal since managers are also employees and can manage multiple people, leading to lots of duplicates. A better approach might be to store the manager’s ID in each employee’s data.
Now there’s another challenge: you need to use the manager’s ID to find their data. At first, you might be tempted to use the find array method to search through the list of employees for the manager’s ID. But this can get very inefficient. For every employee in the array, you’d potentially have to search through the entire array again to find their manager.
Let’s break it down with some quick math. Say there are 100 employees in the array. On average, find would need to search through half the array (50 employees) to find the manager. That’s 100 * 50 = 5000 searches in total.
Instead, you can set up a Map where the key is the employee’s ID and the value is the corresponding employee object. Lookups are much faster because the Map knows exactly where each employee is stored in memory. This reduces the total operations to just 100 (to build the Map) plus 100 for the lookups, for a total of 200 operations compared to 5000 with find.
Here’s what that might look like:
// Initial shape\ntype Employee = {\n\tid: string;\n\tname: string;\n\tmanagerId?: string;\n};\n\n// Transformed shape\ntype EmployeeManagementPair = {\n\temployeeName: string;\n\tmanagerName: string;\n};\n\nfunction mapEmployeesToManagers(employees: Array<Employee>) {\n\t// Precompute a Map for quick lookups\n\tconst employeesById = new Map(\n\t\temployees.map((employee) => [employee.id, employee]),\n\t);\n\n\tconst data: Array<EmployeeManagementPair> = [];\n\tfor (const employee of employees) {\n\t\tconst manager = employee.managerId\n\t\t\t? employeesById.get(employee.managerId)\n\t\t\t: undefined;\n\t\tdata.push({\n\t\t\temployeeName: employee.name,\n\t\t\tmanagerName: manager?.name || 'None',\n\t\t});\n\t}\n\n\treturn data;\n}I’m glad I decided to experiment with using loops more often. They’ve become an invaluable addition to my toolbelt. They are generally faster than equivalent code using array methods — often easier to read — and as long as the mutations are properly encapsulated within a function, concerns about mutability are largely unfounded. Going forward, I’ll continue to use whatever I deem the best tool for the job, but now that I’ve spent more time with them, I expect to reach for a loop much more often.
", "date_published": "2025-01-01", "id": "https://www.lukebennett.dev//posts/using-loops-and-maps-for-efficient-data-transformations", "title": "Using Loops and Maps for Efficient Data Transformations", "url": "https://www.lukebennett.dev//posts/using-loops-and-maps-for-efficient-data-transformations" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "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 (and now friend) Simon Swiss. Without Tailwind, I don’t think I’d be working at Thinkmill today!
The talk itself was just 25 minutes — too short to dive into the deeper, more in-the-weeds details that I hadn’t seen covered elsewhere. To fill in those gaps, I wrote a companion piece which you can find on the Thinkmill blog. It’s a hefty read, clocking in at over 3,200 words, so grab a coffee (or your beverage of choice) and get comfy cause it might be a while!
If you find the talk or the article useful, I’d love to hear your thoughts! You can reach out on Bluesky or via email. And if your team needs help with a design system, I can’t recommend Thinkmill enough.
", "date_published": "2024-12-31", "id": "https://www.lukebennett.dev//posts/building-a-multi-brand-design-system-with-tailwind-tips-tricks-and-tradeoffs", "title": "Building a Multi-Brand Design System with Tailwind: Tips, Tricks, and Tradeoffs", "url": "https://www.lukebennett.dev//posts/building-a-multi-brand-design-system-with-tailwind-tips-tricks-and-tradeoffs" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "TIL
", "date_published": "2024-04-13", "external_url": "https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/", "id": "https://www.lukebennett.dev//links/how-to-display-language-specific-quotes-in-css", "title": "How to display language-specific quotes in CSS", "url": "https://www.lukebennett.dev//links/how-to-display-language-specific-quotes-in-css" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "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 before they start effecting users.
I love the chaotic 90’s aesthetic of this website.
Security issues sound scary so I get why this happens, but most of the time they’re not a real issue:
These excessive reports are produced because traditional scanners such as
npm auditand Dependabot don’t have a way to indicate which API(s) in a package are impacted by a reported issue. That means every downstream package that directly or transitively relies on an impacted package -even if they never use the impacted APIs- will get a security report.
Make sure to also read the linked post by Dan Abramov if you haven’t already.
Probably the most useful change in this update is the addition of the NoInfer utility type. But the change I’m most excited about is the auto-import support for subpath imports (e.g., the imports key in your package.json). I’m excited for two reasons. Firstly, hopefully, it will mean fewer people will use the path mapping in tsconfig.js, which was annoying because it was a TypeScript feature and not all tooling supported it. But the second (and more important) reason is that it was a community contribution from Emma Hamilton, whom I’m lucky enough to work with at Thinkmill!
Who knew there were so many great native font stacks? I think I might switch to using one of these instead of using custom fonts like I currently am.
Interesting case against the conventional wisdom of using rem for almost everything since it respects users base font-size. Josh W Comeau wrote a similar post last year.
I still think I’ll continue to mostly use rem units, but both posts make some good points and are worth reading.
Lucky for me, I haven’t written anything popular enough to receive maintenance requests. But if I did, maybe I would add this badge to the README.
This is experimental for now, but could be huge if/when it becomes stable.
Some really great additions in this release, in particular I thought the Skeleton component was clever.
Clever use of circular dependencies (usually considered a bad thing) to enable hoisting for non-hoistable code.
This looks like a big play from Canva to directly compete with Adobe. I sure hope they don’t ruin the Affinity apps in the process.
The two companies have made a joint pledge to continue to offer perpetual licenses, amongst other things.
So far I’m cautiously optimistic.
This one really summed up the way I think about making software.
Over the course of making anything, new understandings will always arise. And if you’re unable to shift, evolve, and design through the process of production, you will lose out on these new understandings discovered through the process of making — and your finished product will be the poorer because of it.
I found this super interesting to read even if I only fully understood about a third of it!
I’ve been guilty in the past of going too hard in the direction of using aria-disabled for everything and never using disabled, but Kitty makes some good points here.
Once again, the correct answer is always “it depends.”
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.
Heydon Pickering makes use of applying CSS custom properties in an Intersection Observer which can then be used in CSS to apply animations. Nothing to revelatory here, but I found it to be a very nice example of using the right tool for the job.
As someone who spends a lot of time working on design systems, it really bothers me when people mess with intuitive design. I really hope the round checkboxes in VisionOS get rolled back, or at the very least, don’t spread to other Apple operating systems.
If you’ve worked with React components that accept a generic prop that also needs to be wrapped with React.forwardRef, you’ll know that it doesn’t work.\nMatt Pocock shows you how to work around it with a wrapper component that fixes the types.
Even better (in my opinion) if you’re just using these components in your app, and you don’t need to bundle them, you can use module augmentation to "fix" the types so you don’t need to use the wrapper:
declare module 'react' {\n\tfunction forwardRef<T, P = {}>(\n\t\trender: (props: P, ref: React.Ref<T>) => React.ReactNode\n\t): (props: P & React.RefAttributes<T>) => React.ReactNode;\n}Really great article on why you really shouldn’t be disabling form controls (including submit buttons).
I can’t, for the life of me, understand why Apple doesn’t allow tabbing through buttons and links by default. It’s one of the first things I change whenever I set up a new Mac, and I always end up having to look it up 😡
Sweat the small stuff, before it becomes the big stuff.
Hydration mismatches have to be one of the most frustrating things to debug in React.
I wouldn’t have thought to use useSyncExternalStore for this, but it after reading it makes sense. The ClientGate component is also a clever idea.
Really looking forward to the Canary features that are exposed in Next.js to finally become stable. Kudos to the React team for taking the time to get these things right. React 19 is going to be awesome, and I’m really looking forward to never having to worry about useMemo or useCallback ever again when React Compiler becomes stable (hopefully later this year).
5 kB, tree-shakable date library that has first-class support for working with time zones? This could be good...
I don’t think I knew about any of these.
Bramus Van Damme talks a bit about syntax highlighting and introduces an interesting new browser API that enables syntax highlighting without excessive use of <span> elements.
I love a good art-directed post.
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 (that, up until very recently, I haven't really written anything for). This is the third design of my website, and it's the fifth framework I've used. Here they are in order:
I've had something on this domain since 2019, that's roughly one framework a year. So why did I drop Next.js after just a few months?
I actually really like Next.js; it's my go-to in my day job. However, Next 13 has its issues. For the most part, I like the new app router, and I've wanted nested layouts in Next.js ever since I got a taste of them in Remix. The new app router, however, is slow. So slow that the Next.js team felt they had to publicly address it on their blog. I fear that the app router won't be practical for medium-sized websites and above until Turbopack becomes stable. As of right now, I can't use Turbopack on any of the websites that I've built with Next.js, so a stable release may still be some time away.
Server components also, on the whole, seem to be a great addition. They let me colocate fetching data with the components that use them, and they can also be leveraged so you can server render components that would otherwise require shipping large libraries to the client. Using server components usually results in a lot less JavaScript making its way to the client, which is always a good thing.
Apart from being one of the main reasons that the Next.js app router is so slow, they're also a little awkward to work with sometimes. Server components only run on the server and therefore can't have any state. This means we can't use any hooks in them, and it turns out they're a pretty big part of React!
When I'm building a new page for a website, I typically keep all of my components in the same file until either one of two issues comes up:
With server components, if I need some state (or even if I just want to generate a unique id for something), I have to extract that out into a new file. A lot of the time, these components aren't really reusable and are very page-specific, so putting them in a components folder feels wrong, and co-locating it with the page is also kinda weird because Next.js has some file naming conventions, so it's sometimes not clear if that file will be treated as "special" by Next.js or not. I typically add an underscore to the beginning of the filename of page-specific client components, which is fine, I guess ¯_(ツ)_/¯
Were any of these a deal breaker for me? No. In fact, I like using bleeding-edge stuff for non-critical stuff so that I have a good idea of when it's ready to be used for client work.
I actually did most of the work of porting the site to Astro about a month ago, but I decided I didn't like it enough to switch.
The full page refreshes didn't feel very nice, and I lost the animation in my navigation. My theme switcher didn't work properly and would require rebuilding. The react-tweet library didn't work properly for the handful of links to tweets I had wired up. I also don't love the Astro template syntax. It's just close enough to React to be annoying when it doesn't work how I expect it to. There are also a bunch of Astro-specific things like the numerous template directives that have me reaching for the docs a lot. It feels like the API surface of Astro is bigger than with Next.js or Remix, but maybe that's just because I'm still getting used to it.
So why did I switch to Astro?
There were a few reasons, all of them good, but the main reason I'm somewhat ashamed to admit was a purely cosmetic one is the stupidest of them all — View Transitions!
When Astro 3 came out with the stable View Transitions API, I decided to revive the Astro port and try it out. I added the <ViewTransitions /> component to the head of my document, and almost magically, all of my page transitions were super smooth, and the frustrations I had with Astro faded away.
The View Transitions fixed my issue with the navigation no longer animating, and I could drop framer motion here as the built-in animation was pretty much identical. This meant the only place I was using framer-motion was the animated steam on my coffee in SVG illustration on the home page. It took a bit of time to get right, but I was able to produce the effect I wanted with a keyframe animation (in fact, I think it looks better than it did before!)
I referenced Astro's new Starlight to learn how to implement a theme switcher. It wasn't as simple as using next-theme, but now I have complete control over the code for switching themes instead of relying on a library.
I got rid of the react-tweet library and inline the text of the tweets I was linking to. Twitter will probably go under soon anyway, so it's probably more resilient this way.
I still think Astro has some quirks, but I love the islands architecture. For most small to medium sites, it's probably the best choice. Sure, I removed a few libraries in the process of porting to Astro, but I'm pretty happy with the results.
For now, I think I'll stick with Astro, but who knows for how long.
", "date_published": "2023-09-10", "id": "https://www.lukebennett.dev//posts/astro-nomical-gains-why-i-switched-to-astro-from-next-js", "title": "Astro-nomical Gains: Why I Switched to Astro from Next.js", "url": "https://www.lukebennett.dev//posts/astro-nomical-gains-why-i-switched-to-astro-from-next-js" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "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.
", "date_published": "2023-08-26", "external_url": "https://www.builder.io/blog/introducing-valibot", "id": "https://www.lukebennett.dev//links/introducing-valibot-a-1kb-zod-alternative", "title": "Introducing Valibot, a < 1kb Zod Alternative", "url": "https://www.lukebennett.dev//links/introducing-valibot-a-1kb-zod-alternative" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "Yes please.
", "date_published": "2023-08-25", "external_url": "https://github.com/w3c/csswg-drafts/issues/9107", "id": "https://www.lukebennett.dev//links/allow-elements-to-escape-the-scroll-container", "title": "Allow elements to escape the scroll container", "url": "https://www.lukebennett.dev//links/allow-elements-to-escape-the-scroll-container" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "It's sad to see Netlify becoming less and less relevant. The first website I ever built was originally hosted on BitBalloon (Netlify's predecessor) and I hosted everything I could on Netlify back when I was working at Phiranno Designs.
Anecdotally people don't seem to be talking about the "Jamstack" anymore. Netlify claims it's because Jamstack has become the new norm, but I'm not so sure. The term has became more and more nebulous over time, to the point where it doesn't really mean much anymore. Plus, it always felt like a marketing term, so I think people have just soured on it.
On a side note, I started to lose interest in what Netlify was doing after Jason Lengstorf left. The same thing happened after he left Gatsby.
", "date_published": "2023-08-02", "external_url": "https://www.swyx.io/netlify-era-jamstack-end", "id": "https://www.lukebennett.dev//links/how-to-blow-up-a-category-netlifys-new-era-and-the-jamstack-endgame", "title": "How to Blow Up a Category - Netlify's New Era and The JAMstack Endgame", "url": "https://www.lukebennett.dev//links/how-to-blow-up-a-category-netlifys-new-era-and-the-jamstack-endgame" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "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.
", "date_published": "2023-07-30", "external_url": "https://axesslab.com/toggles-suck/", "id": "https://www.lukebennett.dev//links/toggles-suck", "title": "Toggles suck!", "url": "https://www.lukebennett.dev//links/toggles-suck" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "I can highly recommend the new podcast by PJ Vogt (former host of Reply All). It's called Search Engine and the most recent episode was especially eye opening (no pun intended 😬)
", "date_published": "2023-07-30", "external_url": "https://pjvogt.substack.com/p/whats-it-like-to-slowly-go-blind", "id": "https://www.lukebennett.dev//links/what-s-it-like-to-slowly-go-blind", "title": "What's it like to slowly go blind?", "url": "https://www.lukebennett.dev//links/what-s-it-like-to-slowly-go-blind" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "This is cool, but I'm curious what prefers-contrast: less is for — I can'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?
Some positive vibes heading into the weekend 🫶
", "date_published": "2023-07-28", "external_url": "https://twitter.com/darrenrovell/status/1673659149417078788", "id": "https://www.lukebennett.dev//links/kindness-as-a-signifier-of-intelligence", "title": "Kindness as a signifier of intelligence", "url": "https://www.lukebennett.dev//links/kindness-as-a-signifier-of-intelligence" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "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
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.
", "date_published": "2023-07-27", "external_url": "https://ux.shopify.com/uplifting-shopify-polaris-7c54fc6564d9", "id": "https://www.lukebennett.dev//links/uplifting-shopify-polaris", "title": "Uplifting Shopify Polaris", "url": "https://www.lukebennett.dev//links/uplifting-shopify-polaris" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "This is a really nice looking design system. It's got me wondering if I need to start taking web components seriously 🤔
", "date_published": "2023-07-26", "external_url": "https://nordhealth.design/", "id": "https://www.lukebennett.dev//links/nord-design-system", "title": "Nord Design System", "url": "https://www.lukebennett.dev//links/nord-design-system" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "I never really thought about it before, but there'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 🤔
I personally like Seaford the most, which doesn'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.
", "date_published": "2023-07-22", "external_url": "https://daringfireball.net/2023/07/aptos", "id": "https://www.lukebennett.dev//links/aptos-microsoft-s-new-default-font-for-office-documents", "title": "Aptos, Microsoft’s New Default Font for Office Documents", "url": "https://www.lukebennett.dev//links/aptos-microsoft-s-new-default-font-for-office-documents" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "End of an era.
", "date_published": "2023-07-22", "external_url": "https://twitter.com/dan_abramov/status/1682029195843739649", "id": "https://www.lukebennett.dev//links/dan-abramov-is-leaving-meta", "title": "Dan Abramov is leaving Meta", "url": "https://www.lukebennett.dev//links/dan-abramov-is-leaving-meta" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "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.
I'm not normally one for scroll-jacking, but this is wild.
", "date_published": "2023-07-21", "external_url": "https://narrowdesign.com/", "id": "https://www.lukebennett.dev//links/nick-jones", "title": "Nick Jones", "url": "https://www.lukebennett.dev//links/nick-jones" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "Don’t make people solve, recall, or transcribe something to log in.
Amen to that. Websites that don't allow you to paste a password are the absolute worst, good to see the W3C acknowledging this.
", "date_published": "2023-07-21", "external_url": "https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/", "id": "https://www.lukebennett.dev//links/wcag-2-2-published-as-a-w3c-proposed-recommendation", "title": "WCAG 2.2 published as a W3C 'Proposed Recommendation'", "url": "https://www.lukebennett.dev//links/wcag-2-2-published-as-a-w3c-proposed-recommendation" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "", "date_published": "2023-07-20", "external_url": "https://retro.pizza/@Cax6ton/110738513356164294", "id": "https://www.lukebennett.dev//links/cover-of-bring-me-to-life-by-evanescence-using-otamatones", "title": "Cover of \"Bring Me to Life\" by Evanescence using Otamatones", "url": "https://www.lukebennett.dev//links/cover-of-bring-me-to-life-by-evanescence-using-otamatones" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "This is a brilliant accessibility feature, anything that makes it more likely for people to provide alt text is win in my book.
", "date_published": "2023-07-20", "external_url": "https://isfeeling.social/@matt/110736966665218302", "id": "https://www.lukebennett.dev//links/ivory-mastodon-clients-clever-use-of-live-text", "title": "Ivory Mastodon Clients clever use of Live Text", "url": "https://www.lukebennett.dev//links/ivory-mastodon-clients-clever-use-of-live-text" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "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.
", "date_published": "2023-07-14", "external_url": "https://twitter.com/pnpmjs/status/1679540300623011842", "id": "https://www.lukebennett.dev//links/pnpm-now-has-a-full-time-maintainer", "title": "pnpm now has a full time maintainer", "url": "https://www.lukebennett.dev//links/pnpm-now-has-a-full-time-maintainer" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "Thanks to your donations we have now one maintainer who can support pnpm full time. Give him a follow:
I kinda like this idea:
I'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 name rather than the version). It would be nice to not have to do that.
...but that ship has already sailed, any changes to semver at this point and we quickly enter xkcd territory, so I'm not suggesting anyone should actually do this, more of a "this would have been nice".
", "date_published": "2023-07-13", "external_url": "https://twitter.com/antfu7/status/1679184417930059777", "id": "https://www.lukebennett.dev//links/anthony-fus-proposed-4-digit-semver", "title": "Anthony Fu's proposed 4-digit semver", "url": "https://www.lukebennett.dev//links/anthony-fus-proposed-4-digit-semver" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "", "date_published": "2023-07-06", "external_url": "https://www.threads.net/@foreversean/post/CuVjwXqJ__f", "id": "https://www.lukebennett.dev//links/unexpectedly-wholesome-slipknot-fan-art", "title": "Unexpectedly wholesome Slipknot fan art", "url": "https://www.lukebennett.dev//links/unexpectedly-wholesome-slipknot-fan-art" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "🤦♂️
", "date_published": "2023-07-02", "external_url": "https://github.com/mdn/yari/issues/9208", "id": "https://www.lukebennett.dev//links/mdn-can-now-automatically-lie-to-people-seeking-technical-information", "title": "MDN can now automatically lie to people seeking technical information", "url": "https://www.lukebennett.dev//links/mdn-can-now-automatically-lie-to-people-seeking-technical-information" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "Interesting read on why pangrams aren't all they're cracked up to be.
", "date_published": "2023-07-01", "external_url": "https://www.typography.com/blog/text-for-proofing-fonts", "id": "https://www.lukebennett.dev//links/text-for-proofing-fonts", "title": "Text for Proofing Fonts", "url": "https://www.lukebennett.dev//links/text-for-proofing-fonts" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "", "date_published": "2023-07-01", "external_url": "https://www.theverge.com/23778253/google-reader-death-2013-rss-social", "id": "https://www.lukebennett.dev//links/who-killed-google-reader", "title": "Who killed Google Reader?", "url": "https://www.lukebennett.dev//links/who-killed-google-reader" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "", "date_published": "2023-06-28", "external_url": "https://xkcd.com/2794/", "id": "https://www.lukebennett.dev//links/design-notes-on-the-alphabet", "title": "Design notes on the alphabet", "url": "https://www.lukebennett.dev//links/design-notes-on-the-alphabet" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "“If Google made the iPod,” he says, “they would have called it the Google Hardware MP3 Player For Music, you know?”
It'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.
", "date_published": "2023-06-28", "external_url": "https://www.bbc.com/future/article/20230614-how-a-dose-of-mdma-transformed-a-white-supremacist", "id": "https://www.lukebennett.dev//links/how-a-dose-of-mdma-transformed-a-white-supremacist", "title": "How a dose of MDMA transformed a white supremacist", "url": "https://www.lukebennett.dev//links/how-a-dose-of-mdma-transformed-a-white-supremacist" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "This is a fun, absurdist spoof of the seemingly arbitrary rules around creating passwords online.
", "date_published": "2023-06-28", "external_url": "https://neal.fun/password-game/", "id": "https://www.lukebennett.dev//links/the-password-game", "title": "The Password Game", "url": "https://www.lukebennett.dev//links/the-password-game" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "Cool idea. It reminds me of Window Focus Refetching with TanStack Query.
", "date_published": "2023-06-27", "external_url": "https://buildui.com/recipes/refresh-react-server-component-on-focus", "id": "https://www.lukebennett.dev//links/refresh-react-server-component-on-focus", "title": "Refresh React Server Component on Focus", "url": "https://www.lukebennett.dev//links/refresh-react-server-component-on-focus" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "The Mercator Projection really messes up your perspective on things. I had quite a few 🤯 moments reading this.
", "date_published": "2023-06-25", "external_url": "https://unchartedterritories.tomaspueyo.com/p/maps-distort-how-we-see-the-world", "id": "https://www.lukebennett.dev//links/maps-distort-how-we-see-the-world", "title": "Maps Distort How We See the World", "url": "https://www.lukebennett.dev//links/maps-distort-how-we-see-the-world" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "The transition to the new App Router in Next.js has been rough. It's nice to see Vercel acknowledging this publicly.
Personally I've been enjoying using it on this site, but there are definitely some rough edges.
", "date_published": "2023-06-23", "external_url": "https://nextjs.org/blog/june-2023-update", "id": "https://www.lukebennett.dev//links/next-js-app-router-update", "title": "Next.js App Router Update", "url": "https://www.lukebennett.dev//links/next-js-app-router-update" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "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't appear to require a manual page refresh when you change modes for the favicon to switch. That's not the case with this approach which I've used in the past.
", "date_published": "2023-06-21", "external_url": "https://www.epicweb.dev/tips/responsive-favicons", "id": "https://www.lukebennett.dev//links/support-responsive-favicons-for-a-professional-look", "title": "Support Responsive Favicons for a Professional Look", "url": "https://www.lukebennett.dev//links/support-responsive-favicons-for-a-professional-look" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "The Reddit saga just got more interesting. Some subreddits have marked themselves as NSFW so Reddit can't run ads on them anymore!
", "date_published": "2023-06-21", "external_url": "https://www.platformer.news/p/what-were-learning-from-the-reddit", "id": "https://www.lukebennett.dev//links/what-were-learning-from-the-reddit-blackout", "title": "What we’re learning from the Reddit blackout", "url": "https://www.lukebennett.dev//links/what-were-learning-from-the-reddit-blackout" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "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'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 overriding styles much simpler.
", "date_published": "2023-06-17", "external_url": "https://twitter.com/thesegunadebayo/status/1669732623994834946", "id": "https://www.lukebennett.dev//links/panda-css", "title": "Panda CSS", "url": "https://www.lukebennett.dev//links/panda-css" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "Imagine being the CEO of Reddit, looking at what'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:
", "date_published": "2023-06-17", "external_url": "https://www.nbcnews.com/tech/tech-news/reddit-blackout-protest-private-ceo-elon-musk-huffman-rcna89700", "id": "https://www.lukebennett.dev//links/reddit-ceo-praises-elon-musks-cost-cutting-as-protests-rock-the-platform", "title": "Reddit CEO praises Elon Musk’s cost-cutting as protests rock the platform", "url": "https://www.lukebennett.dev//links/reddit-ceo-praises-elon-musks-cost-cutting-as-protests-rock-the-platform" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "No surprise that the CEO of a company whose website is so bad that they’ve had to keep the old one around as an alternative doesn’t see the value Apollo adds to the Reddit experience.
I guess this is what Netlify wanted Gatsby for.
", "date_published": "2023-06-14", "external_url": "https://www.netlify.com/products/connect/", "id": "https://www.lukebennett.dev//links/netlify-connect", "title": "Netlify Connect", "url": "https://www.lukebennett.dev//links/netlify-connect" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "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 component, you realise you can use it everywhere. A checkbox with an inline label is a Track. A user avatar with your name next to it — that’s a Track. Anything with an icon and some corresponding text is also a Track. I’m sure you get the idea.
The rails each have flex-shrink: 0 applied to them so that things like icons and images can’t get squished when there isn’t enough space. The center has flex-grow: 1 to take up the remaining available space, as well as min-width: 0px to prevent horizontal overflow and ensure that text truncation behaves the way you’d expect.
We expose a gap prop for controlling spacing between the rails and the content, and a verticalAlign prop for aligning content to the top, middle, or bottom. At least, that’s what it used to do. We just added some new options to this prop to make it even more powerful!
Let’s say you’re displaying an address on a website, and you want to put an icon at the start to make it more scannable and visually interesting. Here’s what that markup might look like:
<Track\n\trailStart={<MapPinIcon />}\n\tcenter={<Text>42 Wallaby Way, Sydney</Text>}\n\tgap=\"4\"\n\tverticalAlign=\"middle\"\n/>Nice, that looks great. But what happens if that address is dynamic? Well, now you have to handle edge cases. If a user has an address like: Unit 456, Building 789, Street 1234, Complex XYZ, Block A, Level 12, Wing C, Suite 345, Lot 678, Road 9012, Estate UVW, Sydney, well, that’s probably not going to fit on one line. We’ve told the icon to align to the middle, so now instead of the icon lining up with the text, it’s floating somewhere in the middle, and it looks kinda weird. You could try verticalAlign="top", but if the icon’s height is different from the text, it’s still going to be misaligned. So, how do you fix this?
Well, inspired by this tweet from Adam Wathan, the secret is to use a zero-width space. We updated the verticalAlign prop to also accept typography tokens. In that case, we add a zero-width space alongside the rail content, apply display: flex and align-items: center to the element that wraps the rail content, and align-items: flex-start to the track itself. Now, the icon is centred with the first line of text, and things wrap without issue.
Such a bummer, every now and then I run into a layout issue that this CSS feature would have made trivial 🫤
", "date_published": "2023-06-11", "external_url": "https://ericwbailey.website/published/display-contents-considered-harmful/", "id": "https://www.lukebennett.dev//links/maybe-dont-use-display-contents", "title": "Maybe don't use display:contents", "url": "https://www.lukebennett.dev//links/maybe-dont-use-display-contents" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "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've had a personal website because:
I've always been jealous of people who are able to maintain a blog. I'm not one of those people (but I would like to be!). I'm hoping Keystatic will remove some of the friction I've experienced in the past, so that I'm more likely to write. Only time will tell.
Over the years, I've experimented with numerous CMSs, including WordPress, SiteLeaf, Forestry, Sanity, Netlify CMS, Prismic, Contentful, and probably several others that I can't recall right now. Truth be told, I didn't really like any of them. I may be biased (since I work at Thinkmill, though I haven't directly contributed to Keystatic beyond beta testing), but I genuinely believe Keystatic has the most potential to make blogging stick for developers like myself.
Having no database is very appealing to me. In the past, I've tried setting up a blog that reads Markdown files directly from the file system, but I never stuck with it. There was just too much friction to get started (and I'm lazy when it comes to writing). Having my content integrated within the codebase makes anything I write far more portable, and using a human-readable format like Markdoc gives me plenty of options when it comes to editing it (though I usually prefer using Keystatic). By keeping my content in code rather than a database, I never have to worry about database migrations or encountering broken deploy previews because the database and the website are out of sync.
While Keystatic isn't the first CMS to offer a WYSIWYG editor for markdown files, in my opinion, it's the first to really nail the execution. Defining the schema is straightforward (and surprisingly powerful), and the editing experience is very nice (and getting better all the time).
I'm keenly watching the development of Keystatic. It's early days, and there are still a few rough edges here and there, but overall it's been a joy to work with. Now, if only there was a nice way to manage assets like images that are a little out of place in source control... 🤔
", "date_published": "2023-06-11", "id": "https://www.lukebennett.dev//posts/using-keystatic-as-a-cms", "title": "Using Keystatic as a CMS", "url": "https://www.lukebennett.dev//posts/using-keystatic-as-a-cms" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "Nostalgia hit.
", "date_published": "2023-06-04", "external_url": "https://infinitemac.org", "id": "https://www.lukebennett.dev//links/infinite-mac", "title": "Infinite Mac", "url": "https://www.lukebennett.dev//links/infinite-mac" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "First third party Twitter clients were shut off, now third party Reddit clients are getting priced out.
Why can't we have nice things 🥲
", "date_published": "2023-06-01", "external_url": "https://reddit.com/r/apolloapp/comments/13ws4w3/had_a_call_with_reddit_to_discuss_pricing_bad", "id": "https://www.lukebennett.dev//links/reddit-pricing-third-party-apps-out-of-existence", "title": "Reddit pricing third party apps out of existence", "url": "https://www.lukebennett.dev//links/reddit-pricing-third-party-apps-out-of-existence" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "", "date_published": "2023-05-30", "external_url": "https://twitter.com/dan_abramov/status/1663263814333153286", "id": "https://www.lukebennett.dev//links/react-is-now-10-years-old", "title": "React is now 10 years old", "url": "https://www.lukebennett.dev//links/react-is-now-10-years-old" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "happy 10th birthday to @reactjs! 🎂⚛️
I was looking through the release notes for Firefox 113 and saw that they've added support for OKLCH.
Firefox is the last of the "evergreen" browsers to support this new colour space.
If you'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.
", "date_published": "2023-05-29", "external_url": "https://www.mozilla.org/en-US/firefox/113.0/releasenotes/#note-789524", "id": "https://www.lukebennett.dev//links/oklch-support-now-in-all-evergreen-browsers", "title": "OKLCH support now in all evergreen browsers", "url": "https://www.lukebennett.dev//links/oklch-support-now-in-all-evergreen-browsers" }, { "authors": [ { "name": "Luke Bennett" } ], "content_html": "Here is a list of the tools I use for work, inspired by this post from Wes Bos.
Brave is pretty decent, it's basically Google Chrome without all the gross Google stuff. This is my primary browser.
Safari is better than people give it credit for, but I have to admit the dev tools aren't as good, and there are still plenty of websites that don't work as well in it (or at at all in some cases, but I don't think this is necessarily Safari's fault). I use Safari to keep work and personal stuff seperate as well as access tabs that I have open on my phone.
I keep trying to use Arc because it's very well designed, but I'm not sure it's for me. I'm still experimenting though.