Stop treating pull requests like you’re adding a chapter to the bible Code review has gotten so blown up in importance the past several years. We forget that code is mutable like wet clay, and isn’t permanent once merged. It’s been exacerbated because management doesn’t allow paying down tech debt. Rewriting is seen as a sin. So we have this window where many rewrites are actually allowed as long…
Indispensable atoms of the computing universe Transistor Datagram TCP segment Transaction URL S3 object Token Each invention carefully draws a boundary around essential complexity, encapsulated as a dependable unit with a stable contract and clear failure modes.
Agents of Our Own Illiteracy I worry our software industry is drifting towards illiteracy. We don’t want to read changelogs. Dependabot just opens a PR we mindlessly merge. We don’t want to review PRs. Codex can digest them, highlight concerns, and write the alterations. We don’t want to code up prototypes. Claude Code can explore five ideas before breakfast. We don’t want to learn what new…
Death by a Thousand Comments Gergely Orosz of the Pragmatic Engineer newsletter/podcast writes : I’m seeing so many VC-funded, internally built infrastructure and bootstrapped solutions around “building a context layer for engineering teams.” Aka trying to solve the problem of “if only eg Claude Code had the context from all your other systems” I believe the “context layer for engineering teams”…
Something Is Rotten in the State of Pennsylvania In the two decades John Gruber has been in this racket, I’ve never been angrier at him for missing a review than I am about him not reviewing the iPhone Air. I should have my RSS feed reader examined. The iPhone 17e review dropped as a surprise, and certainly took me by surprise to some extent, but it was all there from the start. I should have been…
Software is Made of Fickle Loops You can use the lens of iterative loops to look at software development today. We continuously run tests in CI, we regularly update dependencies, our web apps are loops turning HTTP requests into responses, and user input into UI updates and database writes. What makes software development hard is that these loops are fickle: they are prone to failure, delays, and…
Levers of Light Light and movement becomes action. A brush of the finger. A swivel of the thumb. A key elevated descends and rises again. A signal! Electrons flow to the mechanical beast. An interruption most welcome. From flesh to hardware to software. Movement becomes action. Which action? Well, that’s the product. Entertained? I’ll take your time. Information? I’ll have some of your month. The…
Imperative Core, Sandboxed Shell What if instead of implementing using functional programming, which often copies data that has to be later collected, we wrote code that matched the operation & memory model of the underlying compute? And then put that inside a strong sandbox? That’s how Docker works, where it can run any number of living processes isolated from the host OS. That’s how GPU shaders…
Immediate mode in Microsoft’s new Edit TUI Microsoft released a new open source code editor. Instead of being a complex, mega-dependency Electron app, it’s a Rust terminal-user-interface with minimal dependencies. The essay at the top of their TUI source code is fantastic by itself: https://github.com/microsoft/edit/blob/bf5178b44cc8c11f9aa7130a5c834d1e3ce07649/src/tui.rs An immediate mode UI…
Do not default to object-oriented or message-passing Object-oriented programming is good for some problems. Excellent even. But OOP shouldn’t be used by default. Using OOP by default leads to inheriting (🥁) unnecessary complexity. Use pure functions by default, mutating closures when you need the extra power, and then OOP when you need even more. The same applies to message passing. Decoupling…
Apple’s App Commodification and the End of Delicious Differentiation Apple used to differentiate itself with software. We had the iLife suite with iMovie & Garageband. We had the same software Steve Jobs used for his presentations being sold as Keynote. We had professional apps like Final Cut Pro and Logic. We had Safari and Mail being shown off like favorite children. Okay, we still have these.…
Test Driven Vibes Test-driven development (TDD) is the perfect match for vibe coding. Here’s how it works: Write out a test (don’t generate this part). Check that it fails. Generate the solution. Check if it passes. If not, repeat by generating another solution. Refactor by hand while ensuring tests still pass. I call it test-driven vibes. Why not generate your tests? Your test is one of the most…
Electric Bicycle for the Mind Steve Jobs coined the idea of the “bicycle for the mind”, where computers could take a person a lot further than they could alone, just like a bicycle could let you travel further, more quickly, and more efficiently than running. He said “we can fashion tools that amplify these inherent abilities that we have to spectacular magnitudes. So for me a computer has always…
Automated Tests or Documentation? Why Not Both. I write Elixir / Ash apps at Alembic . Here is my approach to automated testing, very much influenced by BDD (behavior driven development) and focused on heuristics like “does this make me feel more confident implementing this?” rather than metrics like “have we achieved X% test coverage?”. Also we aim to have improved documentation and accessibility…
Demos are Forcing Functions John Gruber writes about Apple Intelligence’s vaporware aspects in Something Is Rotten in the State of Cupertino . It feels quaint today, but this is why Steve Jobs so often immediately demoed using the feature he had just announced. A demo acts as a forcing function to produce real, working software. And preceding that was an inner forcing function of the software…
Generative UI vs Curated UI In the media I think there’s been much too much recency bias with Generative AI and Wearables, where since they are recently developed people assume they are the natural next step. I have high regards for Stratechery: when he first started I think he got a lot of things right about mobile, Apple & Microsoft. Lately he’s been very bullish on wearables and AI, and has…
How Components and Behavior-Driven Tests Overlap They are contracts of what and some other system works out how . I write my tests to expect observable behavior instead of mocking internal parts out. They test the what not the how . A component takes a similar lens, describing the what only. The how is left up to the engine. Some examples of engines are React, LiveView, HTML/CSS renderer,…
What does RSC stand for? React Server Components. They are components that run on the server. Or are they? Ryan's Sorta Convinced Ryan Florence is one of the creators behind Remix, and at first he didn't seem sold on RSCs. Some back and forth feedback, prototyping, and public criticism later and he seems more willing to adopt it in the main competition framework to Next.js. RFCs don't Substitute…
WebAssembly Core, Imperative Shell Outline: https://www.destroyallsoftware.com/screencasts/catalog/functional-core-imperative-shell Write the core in WebAssembly. This can be functional or object-oriented where you treat the WebAssembly module as a class. Write the shell in whatever language you please. This acts as host by instantiating the WebAssembly module. The WebAssembly is self-contained…
Examples of modes Guillermo Rauch said “One of my North Stars in design is No Modes, or mode minimization. It takes a lot of hard work and ingenuity to get there.” Francisco Hanna asked “What is a modern example of an application with modes? Besides the vim and emacs examples in the article.” So here’s a list of many modes in our smartphone and online worlds: In modern apps Editing vs viewing a…
An Optimist uses a Pessimist’s Wi-Fi “What’s your Wi-Fi password?” the optimist asked the pessimist. “It’s threenines,” replied the pessimist. “Great, I’m on. Let me show you this web app I just made,” said the optimist. “It looks fantastic! It sure loaded quickly. Your Lighthouse score must be high,” the pessimist said encouragingly. “Yep, we have 100s across the board. We’ve done everything to…
Think of your visual UI as progressive enhancement on an accessible core So often making for the web as a sighted user I think of the visual experience first. What’s the layout? Which color palette? How does it look on mobile? I’ll then mock something up in Figma or throw together a demo in Tailwind. “Ah yes, I can see it now. Maybe I’ll tweak this color and that border.” But what about…
Web App vs Site vs Hybrid I first started as a website designer, and now call myself a web app developer. Although what we can build on the web has become much more capable, I think the distiction is still useful. Even if you have both a blog and a dashboard in the same “web app” you should treat them differently: always server-rendering the blog for example. Web site: primarily for reading URLs…
Introducing Orb: a friendly Elixir DSL for writing WebAssembly 🕷️🕸️ HTML works on pretty much any computing device you buy today. JavaScript runs in the browser, on the server, at the edge, and on your mobile and laptop. I believe WebAssembly (also spun from the web) will follow their footsteps and become the new lingua franca. For the past few months I’ve been writing an Elixir library for…
How is a WebAssembly module like a Ruby class? You may have heard of WebAssembly. If so, you probably know you can write C or Rust and compile it to WebAssembly. But here’s a different mental model — after exploring WebAssembly the past couple of years, I think it actually looks a lot like a Ruby class. WebAssembly modules ~= Ruby classes First is the WebAssembly module itself. Each .wasm file is…
Clash of the KVs Today Vercel announced a range of storage options, from Postgres to an S3-like object store. One of those is a hosted Redis offering called Vercel KV . This would be fine if there weren't two other offerings from competitors also called KV. First, we have Cloudflare KV which was released a few years ago. This lets you work with key-value pairs, which are replicated and cached…
Introducing Calculated World Calculated.World is now live! Over the past few months I’ve been experimenting a lot with WebAssembly, trying to understand its limitation and its strengths. Both are pretty clear: Limitations Everything is just raw integers or floats. You must manage memory manually, e.g. with a bump allocator. Strings must be encoded and decoded to a raw sequence of bytes. No…
Introducing Collected Press: Markdown Directly Loaded from GitHub, Rendered on the Edge For a while, I’ve had a blog running on WordPress. I chose WordPress because I wanted something simple. I didn’t want to use a React framework or a static site generator, as from experience those things get out of date and then you have to migrate every year or so to the new version. WordPress became painful,…
Comparing HTTP Latency When an HTTP request is made, a response comes back, right? But how long does that response take to come back? And does it come back all in one go, or do the headers and status code come first and then the body? These things affect the user experience, whether something feels fast or slow to a user. And so I thought it worth building a tool that lets you compare HTTP…
An Idea for Figures in Markdown Markdown has a built-in way to add images. You write:  And the HTML produced looks like: < p > < img src = "https://yourserver.net/link-to-image.png" alt = "text describing the image" > </ p > I particular like how alt support is there by default, encouraging writers to add an accessible…
WebAssembly allows <script> tags everywhere The web is a flexible medium. You can pull in a CSS or JavaScript resource from any URL onto you HTML web page. This is both the web’s strength and weakness. Being able to use existing hosted assets and simply link them to use them shows sites to be assembled quickly, reusing proven parts. But allowing third-party code to affect your experience is a…
Write Once, Integrate Everywhere Write once, run anywhere clearly fails. Every platform and device is different, so I believe if you write for the lowest common denominator then you’ll get a lowest common denominator experience. It can work (see Visual Studio Code or Blender for some great apps), but the typical cross-platform app is just not as good as one made with the target platform in mind.…
When Can Users Do X? Lighthouse and Core Web Vitals have brought concepts such as Largest Contentful Paint and Time to Interactive into many front-end developer’s lingo. However, these three-letter-acronyms are easy to get confused with each other. What’s CLS again? What’s the difference between FID and TTI? I’d like to propose an alternative language, from the user’s experience: When Can Users Do…
The Missing App Economy In the late 90s Steve Jobs was faced with a dilemma. Apple’s charismatic CEO couldn’t convince Adobe and Microsoft, makers of Photoshop and Excel, to make software for Apple’s upcoming operating system. Missing a ‘killer app’ like Photoshop on the Mac meant many people would buy a Windows PC instead. Apple conceded by investing substantial engineering effort in ‘Carbon’, a…
Mocking window.location in Jest It’s sometimes necessary to mock window.location in Jest tests. This could because you want to know when window.location.reload() is called, or one of its other methods ( .assign() , .replace() ). Here’s some code to achieve this: const savedLocation = window . location ; beforeEach ( () => { delete window . location ; window . location = Object . assign ( new URL (…
Appreciating Legible Diagrams I do love a good monospaced diagram co-located with the code it describes. Not the best choice for bigger diagrams obviously, but great for little things like state machines in React components. pic.twitter.com/q4J0Lb4osG — James Gregory (@jagregory) October 16, 2021 this is one of my favorite comments of all time pic.twitter.com/elJYQGidi4 — (@mycoliza) October 14,…
Accessibility-First Tool Concepts Twice now I’ve created desktop apps for designing UIs. Neither shipped and I know I want to return to this space again. My current thinking is that accessibility is a must, and is something tools today severely lack. They are visual-first and often visual-only. Why aren’t we thinking about accessibility at the early design stage? Doing so would both make…
The Apple Experience Augmented — Part 1: User Experience I want to cover what the user experience of an AR Glasses product from Apple could look like, and how it might integrate with today’s products. First, let’s survey Apple’s current devices and their technologies for input & output: iPhone input methods Multitouch: use your fingers naturally for UI interactions, typing text, drawing, scrolling…
The Apple Experience Augmented — Part 2: Developer Experience Apple has been iterating for years on a curious set of APIs called ARKit that has been largely ignored by the iPhone & iPad developer community, which hints that more compelling hardware is coming to take full advantage. CEO Tim Cook has openly said AR is the ‘next big thing’. Rumors suggest Apple is developing an augmented reality (AR)…
Vary variables not rules in CSS media queries A common pattern you’ll see when implementing responsive design with CSS is to redefine rules in media queries: h1 { font-size : 2rem ; } @media ( min-width : 720px ) { h1 { font-size : 2.5rem ; } } @media ( min-width : 1200px ) { h1 { font-size : 3rem ; } } Here we are writing our media queries mobile first . This means the styles for small devices…
Tips for concatenating URLs in JavaScript You might have a base URL from configuration, that you then concatenate with paths to produce a full URL. Say an API URL you fetch from. But should you provide the base URL with or without a trailing slash? e.g. Should you have https://api.example.org/ or https://api.example.org ? If you simply combine the strings together, you can end up with double…
Tim Bray on subscribing to publications Tim Bray writes why he won’t subscribe : Their arithmetic didn’t consider their chance of getting me to click on “Subscribe.” In my particular case, that chance is almost exactly Zero. I subscribe to enough things and I am acutely reluctant to give anyone else the ability to make regular withdrawals from my bank account. … It’s exactly because I’ve done some…
Biasing your business to producing value in a public manner Some ancient 2011 advice from Patrick McKenzie: Businesses create value with almost everything they do. The lion’s share of the value is, like an iceberg, below the waterline: it cannot be seen from anywhere outside the business. Create more value than you capture, certainly, but get the credit for doing so, both from Google and from…
My most used commands for front-end # Measure HTTP response time httpstat "https://example.org/" # Run Google’s PageSpeed Insights npx psi "https://example.org/" --strategy=mobile # Run Axe Core across multiple breakpoints npx evaluatory "https://example.org/" # Optimize & minify SVG file npx svgo <file.svg> # Visualize JavaScript usage npx bundle-wizard example.org # Create a new TypeScript…
When a third party library schedules a focus via requestAnimationFrame() and blows all your tests up The Reach UI components are great. They offer accessible components that you’ll often need when building web apps — such as modal dialogs, menus, tabs and more. It’s also popular and therefore has been battled-tested to work with a range of clients. However, needing to provide accessibility in any…
Useful React hooks for accessibility import { useMemo } from 'react' ; import { v4 as uuid } from 'uuid' ; export function useLabelledBy ( ): readonly [ string , { 'aria-labelledby' : string } ] { const uniqueID = useMemo (uuid, [uuid]); return [uniqueID, { 'aria-labelledby' : uniqueID }]; } export function useDescribedBy ( ): readonly [ string , { 'aria-describedby' : string } ] { const uniqueID…
Deno hits 1.0 Deno has reached version 1.0. But Deno is not a monolithic program, but designed as a collection of Rust crates to allow integration at different layers. Deno is not compatible, in general, with Node (NPM) packages. There is a nascent compatibility layer being built at https://deno.land/std/node/ but it is far from complete. Deno supports TypeScript without additional tooling. The…
A better alternative to TypeScript’s non-null assertive operator TypeScript supports using ! for telling the compiler that the value is not null or undefined. This is known as the non-null assertive operator . user.type(document.activeElement!, "Some text"); However, it is simply stripped out when transpiling to JavaScript. No check is done at runtime. So, unlike the name suggests, we are not…
The tenacity of open Ben Thompson is a writer who focuses on the strategy of technology businesses , and I’ve really enjoyed his stuff for a number of years. His business model is a subscription for three emails per week that form a narrative, with another article made free to everyone that is standalone. The problem I’ve found is that it’s hard to catch up with these daily updates. They often…
Jeremy Keith on Architects, gardeners, and design systems Jeremy Keith: It’s rare to find job titles like software gardener, or information librarian (even though they would be just as valid as other terms we’ve made up like software engineer or information architect). Outside of the context of open source projects, we don’t talk much about maintenance. We’re much more likely to talk about making.…