はてなブックマーク

In my day job, I work on a JavaScript framework (LWC). And although I’ve been working on it for almost three years, I still feel like a dilettante. When I read about what’s going on in the larger framework world, I often feel overwhelmed by all the things I don’t know. One of the best ways to learn how something works, though, is to build it yourself. And plus, we gotta keep those “days since last

Dave Rupert recently made a bit of a stir with his post “If Web Components are so great, why am I not using them?”. I’ve been working with web components for a few years now, so I thought I’d weigh in on this. At the risk of giving the most senior-engineer-y “It depends” answer ever: I think web components have strengths and weaknesses, and you have to understand the tradeoffs before deciding when

28 Nov Shadow DOM and accessibility: the trouble with ARIA Posted November 28, 2022 by Nolan Lawson in accessibility, web components. Tagged: shadow dom. 3 Comments Shadow DOM is a kind of retcon for the web. As I’ve written in the past, shadow DOM upends a lot of developer expectations and invalidates many tried-and-true techniques that worked fine in the pre-shadow DOM world. One potentially sur

17 Jan My talk on CSS runtime performance Posted January 17, 2023 by Nolan Lawson in performance, Web. 3 Comments A few months ago, I gave a talk on CSS performance at performance.now in Amsterdam. The recording is available online: (You can also read the slides.) This is one of my favorite talks I’ve ever given. It was the product of months (honestly, years) of research, prompted by a couple ques

9 Jan Retiring Pinafore Posted January 9, 2023 by Nolan Lawson in Mastodon. Tagged: pinafore. 21 Comments Five years ago, I started a journey to build a better Mastodon client – one focused on performance and simplicity. And I did! Pinafore is the main Mastodon client I’ve used myself since I first released it. After five years, though, my relationship with social media has changed, and it’s time

27 Jun SPAs: theory versus practice Posted June 27, 2022 by Nolan Lawson in performance, Web. Tagged: spas. 17 Comments I’ve been thinking a lot recently about Single-Page Apps (SPAs) and Multi-Page Apps (MPAs). I’ve been thinking about how MPAs have improved over the years, and where SPAs still have an edge. I’ve been thinking about how complexity creeps into software, and why a developer may cho

21 May The balance has shifted away from SPAs Posted May 21, 2022 by Nolan Lawson in Web. Tagged: spas. 24 Comments There’s a feeling in the air. A zeitgeist. SPAs are no longer the cool kids they once were 10 years ago. Hip new frameworks like Astro, Qwik, and Elder.js are touting their MPA capabilities with “0kB JavaScript by default.” Blog posts are making the rounds listing all the challenges

17 Dec Introducing fuite: a tool for finding memory leaks in web apps Posted December 17, 2021 by Nolan Lawson in performance, Web. Tagged: memory, performance. 18 Comments Debugging memory leaks in web apps is hard. The tooling exists, but it’s complicated, cumbersome, and often doesn’t answer the simple question: Why is my app leaking memory? Because of this, I’d wager that most web developers a

12 Sep How to write about web performance Posted September 12, 2021 by Nolan Lawson in performance, Web. Tagged: performance. 3 Comments I’ve been writing about performance for a long time. I like to think I’ve gotten pretty good at it, but sometimes I look back on my older blog posts and cringe at the mistakes I made. This post is an attempt to distill some of what I’ve learned over the years to

23 Feb JavaScript performance beyond bundle size Posted February 23, 2021 by Nolan Lawson in performance, Web. 8 Comments There’s an old story about a drunk trying to find his keys in the streetlight. Why? Well, because that’s where it’s the brightest. It’s a funny story, but also relatable, because as humans we all tend to take the path of least resistance. I think we have the same problem in the

10 Feb Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom Posted February 10, 2019 by Nolan Lawson in performance, Web. 17 Comments Recently I had some fun implementing an image carousel for Pinafore. The requirements were pretty simple: users should be able to swipe horizontally through up to 4 images, and also pinch-zoom to get a closer look. The finished product l

25 Sep Accurately measuring layout on the web Posted September 25, 2018 by Nolan Lawson in Web. Tagged: performance. 31 Comments Update (August 2019): the technique described below, in particular how to schedule an event to fire after style/layout calculations are complete, is now captured in a web API proposal called requestPostAnimationFrame. There is also a good polyfill called afterframe. Upda

1 Sep A tour of JavaScript timers on the web Posted September 1, 2018 by Nolan Lawson in Web. Tagged: javascript, performance. 14 Comments Pop quiz: what is the difference between these JavaScript timers? Promises setTimeout setInterval setImmediate requestAnimationFrame requestIdleCallback More specifically, if you queue up all of these timers at once, do you have any idea which order they’ll fir

20 Mar Smaller Lodash bundles with Webpack and Babel Posted March 20, 2018 by Nolan Lawson in Web. Tagged: javascript, lodash, performance. 9 Comments One of the benefits of working with smart people is that you can learn a lot from them through osmosis. As luck would have it, a recent move placed my office next to John-David Dalton‘s, with the perk being that he occasionally wanders into my offic

5 Mar What it feels like to be an open-source maintainer Posted March 5, 2017 by Nolan Lawson in Open source. 68 Comments Outside your door stands a line of a few hundred people. They are patiently waiting for you to answer their questions, complaints, pull requests, and feature requests. You want to help all of them, but for now you’re putting it off. Maybe you had a hard day at work, or you’re t

15 Aug The cost of small modules Posted August 15, 2016 by Nolan Lawson in performance, Web. 53 Comments Update (30 Oct 2016): since I wrote this post, a bug was found in the benchmark which caused Rollup to appear slightly better than it would otherwise. However, the overall results are not substantially different (Rollup still beats Browserify and Webpack, although it’s not quite as good as Clos

29 Feb High-performance Web Worker messages Posted February 29, 2016 by Nolan Lawson in Webapps. Tagged: performance, web workers. 16 Comments Update: this blog post was based on the latest browsers as of early 2016. Things have changed, and in particular the benchmark shows that recent versions of Chrome do not exhibit the performance cliff for non-stringified postMessage() messages as described

28 Dec How to fix a bug in an open-source project Posted December 28, 2015 by Nolan Lawson in Open source. 11 Comments So, you’ve found a bug in an open-source project. First off: don’t panic! This is perfectly normal. Software is written by humans, and humans make mistakes. You might also be thinking to yourself, “Gee, I’d love to fix this bug.” I mean, who wouldn’t want to be the hero who swoops

19 Oct The struggles of publishing a JavaScript library Posted October 19, 2015 by Nolan Lawson in Webapps. Tagged: javascript, modules, npm. 19 Comments If you’ve done any web development in the past few years, then you’ve probably typed something like this: $ bower install jquery Or maybe even: $ npm install --save lodash For anyone who remembers the dark days of combing Github for jQuery plugin

30 Jun Safari is the new IE Posted June 30, 2015 by Nolan Lawson in Webapps. Tagged: apple, web platform. 153 Comments Update: This post represents my views before I joined the Microsoft Edge team, and before I got involved with browsers or web standards in general. I leave it up as a historically interesting artifact. Last weekend I attended EdgeConf, a conference populated by many of the leading