Your weekly reading–it’s the vibe (coding)
This week we’ve got another roundup of great articles and more, across CSS, JavaScript, performance, accessibility, design, some history with an ancient website and even more ancient computer, and of course, more than a little about writing software with AI.
Last week I had the privilege to record a conversation with Jeremy Howard, now of Answer.AI, a genuine pioneer of AI and LLMs (and much more beside–recording coming).
One particular idea stood out–Jeremy observed that a lot of code has always been written not by ‘professional’ developers, but by all kinds of people solving problems for themselves, their team, or their organisations, in everything from spreadsheets, to Visual Basic and database products like FileMaker.
Using AI for writing such software will only supercharge such efforts.
Meanwhile Software engineering, the writing of systems that last and evolve over long time frames, is a lot more than generating code-a huge part of it is maintaining code.
But for 15 years or more (VC fuelled/hackathon/time to demo culture) we’ve entirely privileged “time to first demo” and AI code generation is only going to fuel that (”a quarter of startups in YC’s current cohort have codebases that are 90% AI-generated’ per Benedict Evans)
The tech debt these code bases are about to accrue…
All that is to say, AI and LLMs are already transforming what it is to write software, as we have covered extensively in the weekly roundups for some time now. If you write software, or manage software projects, this is something I think you should be giving quite a bit of thought to.
Vibe coding, some thoughts and predictions – by Andrew Chen
Vibe coding is happening, you guys
We’ve all been surprised by LLMs being good at writing/brainstorming/generating text, but along the way, we also discovered it was surprisingly good at writing code. This was first harnessed by coding co-pilot features in IDEs like Cursor, but as many of you have followed, “vibe coding” is the new thing, coined by the great Andrej Karpathy:
Source: Vibe coding, some thoughts and predictions – by Andrew Chen
There have always been ‘easier’ ways to write software. From Visual Basic, to Foxbase and FileMaker, even spreadsheets, a huge amount of useful, valuable software has been written, to automate workflows, increase productivity, run whole companies. Traditionally a subset of software engineers have looked down on such approaches to writing software a “not real programming”.
But as Andrew Chen observes, “vibe coding is happening”. Whether you’re particularly enamoured with the term or not, using LLMs to generate code is already transforming how software is written. But as Chen also observes, ‘we are in the command line interface days of vibe coding…’. What it ends up looking like is purely speculation right now–but remember what Alan Kay once said ‘the best way to predict the future is to invent it’.
Will the future of software development run on vibes?
Instead of being about control and precision, vibe coding is all about surrendering to the flow. On February 2, Karpathy introduced the term in a post on X, writing, “There’s a new kind of coding I call ‘vibe coding,’ where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.” He described the process in deliberately casual terms: “I just see stuff, say stuff, run stuff, and copy paste stuff, and it mostly works.”
Source: Will the future of software development run on vibes?
As Jeremy Howard observed to me in a recent conversation (recording coming soon) there’s always been a divide between people who write software to do tasks they need done-traditionally perhaps with Visual Basic, or consumer databases, and capital S software engineering. So does a shift toward ‘vibe coding’ really represent a shift at all?
Welcome to the Jam: The looney story of the decades-old ‘Space Jam’ website
In 1996, that team had an especially big movie to market starring the Looney Tunes and NBA legend Michael Jordan: “Space Jam.” What differentiates this site from the rest is something so unlikely that it sparked a viral moment of collective glee among nostalgic “Space Jam” fans and web nerds alike: this 29-year-old website is still up. Not only that, but the site still looks and functions today exactly as it did in 1996.
Source: Welcome to the Jam: The looney story of the decades-old ‘Space Jam’ website | Endless Thread
WBUR, the Boston’s NPR radio station has a story on one of the Web’s first breakout sites, Space Jam, the site built for an animated/live action cross over Disney film of the mid 90’s featuring Bugs Bunny and Michael Jordan. It, unlike almost the entire web at the time, is still online and unchanged.
The First King of Home Computing
This is the story of Jack Tramiel, one of the most explosive and ruthless founders the computer industry has ever seen. It is the story of four machines—the PET, VIC-20, Commodore 64, and Atari ST—and of the man who ruled home computing for over 20 years.
Source: The First King of Home Computing
If you think the days of Mac versus Windows, let alone Android versus iPhone were tribal, then you should have been around in the early days of micro computers (AKA home computers, and eventually Personal Computers, of the ‘PC’). I knew grown men much older (and more well off) than me, adherents to the Apricot computer, who would refer to Apple as ‘the other fruit flavoured computers’. Commodore ruled the roost, and this is the story of its founder.
I think there’s value in knowing there history of the machines and technologies that have so shaped the modern world. I hope you enjoy what was a walk down memory lane for me, though ancient history for most tin our industry these days!
CSS :open pseudo-class
The :open pseudo-class can be applied to::open styles an input when its picker is showing.
Source: CSS :open pseudo-class
We love a pseudo class at Conffab. Here Ollie Williams looks at the little known ::open, and how we can use it to style all manner of elements, like dialog, select and various inputs that open a picker, when that picker is showing.
Accessibility tooling and good intentions
Your accessibility tooling deserves the same first class treatment as the rest of your stack.
TLDR: Get your accessibility tooling off from your developers’ machines and into the CI. This is one of those pieces I would share with folks who are new to advocating for automated accessibility testing in their engineering orgs; especially if you feel stuck at that phase of “I know all the tools we should be using, but now what?”
Source: Accessibility tooling and good intentions
Heather Buchel argues we need to make our accessibility tooling first class citizens like all the other tools we use as developers.
Close requests, close watchers, and the dialog element
The latest version of Chrome (134) comes with a new light-dismiss behavior for the dialog element, which enables a native click-outside feature. That’s fantastic! Reading the announcement, I wondered how many ways there are to close a dialog element.
The specification states that a user can send a close request to the user agent, indicating that the user wishes to close something currently being shown on the screen, such as a popover, menu, or dialog. There are also close watchers, which listen to other close or cancel actions.
My goal is to collect all close requests and watchers in this blog post. Please get in touch if anything is missing.
Source: Close requests, close watchers, and the dialog element – Manuel Matuzovic
How many ways can you close the (newish) dialog element? Manuel Matuzovic looks to find out.
Building Websites With LLMS – Jim Nielsen’s Blog
And by LLMS I mean: (L)ots of (L)ittle ht(M)l page(S).
I recently shipped some updates to my blog. Through the design/development process, I had some insights which made me question my knee-jerk reaction to building pieces of a page as JS-powered interactions on top of the existing document.
With cross-document view transitions getting broader and broader support, I’m realizing that building in-page, progressively-enhanced interactions is more work than simply building two HTML pages and linking them.
I’m calling this approach “lots of little HTML pages” in my head. As I find myself trying to build progressively-enhanced features with JavaScript — like a fly-out navigation menu, or an on-page search, or filtering content — I stop and ask myself: “Can I build this as a separate HTML page triggered by a link, rather than JavaScript-injected content built from a button?”
Source: Building Websites With LLMS – Jim Nielsen’s Blog
For years Web development has tended toward over engineering, and Byzantine solutions to what could be simple problems. The SPA architecture is perhaps them most elaborate of these–a response to the slick interactions and navitgation of native mobile apps, we built a complex stack of technologies.
But a lot of this over engineering may no longer be needed, with new technologies like View Transitions. Here Jim Nielsen explains how he replaced complex JavaScript enabled navigation and interaction with simple page loads, which then animated with View Transitions give a modern experience.
At Conffab we use for the most part a pretty traditional MPA approach. When you visit a conference page or a presentation page, a speaker page, they are all individual, stand alone, HTML pages. We have used the simplest possible View Transitions to animate the navigation between them for a long time now–though originally the effect was one apparent only in nightly versions of Chrome then in Chrome then Technology Previews of Safari and now in Safari, though still not in Firefox.
But that’s ok–it’s progressive enhancement at its finest. We sprinkle the tiniest amount of CSS
@view-transition {
navigation: auto;
}on our and now animations when we move between them are smooth.
Interested? Check out the talks and links to other articles on View Transitions on Conffab.
Developing Taste
Simply shipping a product that works is no longer enough, everyone can do that, especially now with AI. It’s not the differentiator anymore as people expect things to work. What makes a product stand out is the brand, design, how intuitive it is, the overall experience. Taste is what matters.
“In a world of scarcity, we treasure tools.
In a world of abundance, we treasure taste.”Anu Atluru, Taste is Eating Silicon Valley
But what is good taste? It’s commonly mistaken as personal preference, but it’s more than that — it’s a trained instinct. The ability to see beyond the obvious and recognize what elevates. It’s why some designs feel effortless while others feel contrived. So the real question is, how do you train that instinct?
Source: Developing Taste
Steve Jobs famously said of Microsoft that “they have no taste”. But what is it, and how might you develop taste? We quoted a similar piece from Elizabeth Goodspeed in April last year.
AI is reshaping UI — have you noticed the biggest change yet?
- Design, generative AI, LLMs, UI, UX
Goodbye commands, hello intent
The way we interact with software is anything but static. Sometimes it’s a gentle evolution, other times a jarring leap. Today, a growing wave of design pioneers, including Vitaly Friedman, Emily Campbell and Greg Nudelman are dissecting emerging patterns within AI applications, mapping out the landscape that refuses to stand still. At first glance, this might seem like yet another hype cycle, the kind of breathless enthusiasm that surrounds every new tech trend. But take a step back, and a deeper transformation becomes apparent: our interactions with digital systems are not just changing; they are shifting in their very essence.
Source: AI is reshaping UI — have you noticed the biggest change yet?
Developers call the style of programming where the code tells a computer how to do something ‘imperative’ programming, and where code tells a computer what needs to be done declarative programming.
Our UIs too have traditionally been imperative–from the command line where literally step by step we tell the computer what do, to WYSIWYG and WIMP interfaces where we select the object to be acted on, and apply the action (make this text bold, copy this file to this folder).
But Generative AI systems are much more declarative in nature–we tell the system the outcome we want, not the steps we take to get there. Prompts are a description of what we want done. Here Tetiana Sydorenko considers how AI is reshaping interactions as we know them, driving a new UI paradigm–more declarative than imperative.
CSS Relative Colors
Over the years, we have been used to using CSS pre-processors like Sass for a use case like applying opacity to a pre-defined color. Today, we have a new way to do that and more with CSS relative colors. In this article, I aim to shed the light on that and introduce how it works along with many practical examples.
Source: CSS Relative Colors
Ahmad Shadeed is one of the very best communicators and educators on CSS, web design and development. Here he covers CSS relative colours, a powerful and valuable addition to CSS, now baseline.
Dive Into WebGPU—Part 1 (Tutorial)
WebGPU is a modern graphics API designed to provide high-performance graphics and computation capabilities across different platforms, including web browsers, desktops, and mobile devices. It is intended to be a successor to the WebGL API, offering more advanced features, better performance, and greater flexibility for developers. It offers several advantages over the WebGL API: Enforces the use of asynchronous calls for various operations, reducing bottlenecks on the main thread. Introduces compute shaders (i.e., the ability to run computations on the GPU). Allows rendering to multiple HTML canvas elements using only one WebGPU device.
Source: Dive Into WebGPU—Part 1 (Tutorial) / OKAY DEV®
Recently we mentioned Your first WebGPU app, a tutorial to learn WebGPU programming using JavaScript (implementing Conway’s game of life). If that took your fancy, here’s a more in-depth WebGPU tutorial to get stuck into.
JavaScript Fatigue Strikes Back – Allen Pike
In recent months, I’ve returned to writing code daily. It’s been a lot of fun. While I enjoy Swift, Python, and Ruby, we’ve been building in TypeScript lately since it’s a good fit for our latest project.
After about a decade away from regularly writing JavaScript, it’s been fun to catch up on ten years of progress all at once. For example:
- React has evolved from a little experiment thought to boost performance, into a sprawling ecosystem thought to hinder performance.
- Platform features like ES Modules,
fetch, view transitions, andasync/awaithave made the web a nicer platform to build directly for - Serverless has gone from a wild new idea to well-understood
- Cursor is especially good at working in TypeScript, which mostly eliminates boilerplate tedium
- Modern build and packaging tools like vite, pnpm, and esbuild have made the tooling around JS nicer and much faster
- All of the above has taken universal JS – sharing code between the client and the server – from barely-possible to well-supported
These changes have each boosted the ecosystem in its own way. And each has fuelled one dynamic that has not changed: choosing the right JavaScript framework is hard, man.
Allan Pike recently returned to full time coding after a decade away–and he has some lessons and thoughts. I can’t imagine what it would be like come back after a few months, let alone a decade!
JavaScript | 2024 | The Web Almanac by HTTP Archive
JavaScript is essential for creating interactive web experiences, driving everything from basic animations to advanced functionalities. Its development has significantly enhanced the web’s dynamic capabilities.
However, this heavy dependence on JavaScript involves compromises. Each stage—from downloading and parsing to execution—demands substantial browser resources. Using too little can compromise user experience and business objectives while overusing it can lead to sluggish load times, unresponsive pages, and poor user engagement.
In this chapter, we will re-evaluate JavaScript’s role on the web and offer recommendations for designing smooth, efficient user experiences.
Source: JavaScript | 2024 | The Web Almanac by HTTP Archive
After a hiatus of a year, the Web Almanac returns with a whole new in depth look at how we really use web technologies today–including of course JavaScript.
State of AI 2025
But today I want to figure out what’s really going on. How do you use AI? What tools have you tried? And will the robots uprising happen before we get GTA 6?
We appreciate your time and input, and we look forward to sharing the results with the community. Let’s explore how AI is shaping the future of web development together!
Source: State of AI 2025
The devographics folks who bring you the ‘State of…’ surveys have a new one–the State of Web Dev AI. Whether you are a proponent or not, take it and let them know of your experience and thoughts.
The hardest working font in Manhattan
In 2007, on my first trip to New York City, I grabbed a brand-new DSLR camera and photographed all the fonts I was supposed to love. I admired American Typewriter in all of the I <3 NYC logos, watched Akzidenz Grotesk and Helvetica fighting over the subway signs, and even caught an occasional appearance of the flawlessly-named Gotham, still a year before it skyrocketed in popularity via Barack Obama’s first campaign.
But there was one font I didn’t even notice, even though it was everywhere around me.Last year in New York, I walked over 100 miles and took thousands of photos of one and one font only.
The font’s name is Gorton.
Source: The hardest working font in Manhattan – Aresluna
This in depth essay on the font Gorton by Marcin Wichary (author of this wonderful book on the history of keyboards) got a lot of attention when it came out a couple of weeks back, and rightly so. I had the privilege of spending a few hours with Marcin a couple of years back when he visited Sydney. His passion for such things is palpable.
Use scheduler.yield() to break up long tasks
A page feels sluggish and unresponsive when long tasks keep the main thread busy, preventing it from doing other important work, like responding to user input. As a result, even built-in form controls can appear broken to users—as if the page were frozen—never mind more complex custom components.scheduler.yield() is a way of yielding to the main thread—allowing the browser to run any pending high-priority work—then continuing execution where it left off.
This keeps a page more responsive and, in turn, helps improve Interaction to Next Paint (INP).scheduler.yield offers an ergonomic API that does exactly what it says: execution of the function it’s called in pauses at the await scheduler.yield() expression and yields to the main thread, breaking up the task. The execution of the rest of the function—called the continuation of the function—will be scheduled to run in a new event-loop task.
Source: Use scheduler.yield() to break up long tasks | Blog | Chrome for Developers
A great talk by Nishu Goel a couple of years back covered yielding as a performance technique (JavaScript being single threaded means long tasks can make for sluggish (or frozen) interfaces. Here’s an in-depth look at scheduler.yield, a way to yield to the main thread. While Chromium browsers only, it can be used in a progressively enhancing way, which is covered as well.
Bonus Talk: Breaking up Long Tasks, by Nishu Goel from Web Directions Summit 2023. Free, no sign in required!
The Psychology of Site Speed and User Happiness
Over the past few decades, there has been a great deal of fascinating research into how human beings engage with technology. These studies – many of which have findings that have persisted over the years – demonstrate that we don’t just want our technology to be fast, but at a deep neurological level, we need it to be fast. Because our “need for speed” is deeply rooted in our neural wiring, it is unlikely to change, no matter how much we might wish it could.
Source: The Psychology of Site Speed and User Happiness | SpeedCurve
The folks at SpeedCurve look at the psychology of speed, and why performance matters from the human perspective for websites. Selling investment in performance improvements, especially to decision makers who use fast networks and devices is not always easy–this might help.
Great reading, every weekend.
We round up the best writing about the web and send it your way each Friday.
