More Front-end Bloggers

Frontend Masters BlogMore Front-end Bloggers11 min read

Tips and Tricks for Using TanStack Start with Cloudflare Durable Objects

Some hot tips on using middleware for simplifying Durable Object creation and managing WebSocket connections.

Bruce Lawson's personal siteMore Front-end Bloggers2 min read

EU, EU, It’s off to work we go

Last week, I had an exciting few days in Brussels, meeting with the European Commission with other browser vendors, technology groups, and representatives of a Big Tech Gatekeeper about the latter’s sustained and relentless malicious compliance with the Digital Markets Act, the EU’s law to make the markets in the digital sector fairer and more […]

Flavio CopesMore Front-end Bloggersread at source

How I fixed a full Ubuntu server disk with Codex

My Sendy server stopped responding with the disk at 99%. The database was 528 MB, but MySQL binary logs had grown to 41 GB. Here is how Codex walked me through finding them, purging them safely, and setting an expiry so it never happens again.

Jim Nielsen’s BlogMore Front-end Bloggersread at source

The Fascinating World of Domains

Pete Millspaugh has a lovely article over on WIRED that peers into the world of domains. (If you’re as interested in the esoteric details of domains as I am, follow Pete’s writing at Dot Com Press .) You should just read the article, but here are a few things that stood out to me. The .com Registry Did you know who the registry for .com is? I didn’t. The registry that owns .com, Verisign, makes a billion and a half dollars every year just by keeping the lights on. To Verisign’s credit, the lights never go out: It reports 100 percent uptime over the past 28 years. It’s a pretty slick business model, watching over a database of words and collecting annual renewal fees. Warren Buffett thought so too, investing in Verisign in 2012, when its stock price was about one-eighth what it is today. Why is it simultaneously surprising and not surprising that the company running .com makes billions and has 100% uptime over almost three decades? Maybe GitHub should reach out for some advice, lol. Buying Domains Is a Spy Thriller Apparently the last time you could buy generic top-level domains (gTLDs) was in 2012. So now that ICANN is providing another window of purchases in 2026 — and nobody knows when another window will open — there’s a lot of interest in capitalizing on these moments for new gTLDs. most organizations [are] extremely secretive about their plans. One applicant from the last round tells me companies were flying around the world, meeting in person to avoid any risk of digital leaks, avoiding Gmail for fear of Google spying. Instead of email or video calls, she flew to London, then to Madrid. “We did it all in person. People got a little weird and scary, super paranoid.” There’s a certain irony to this — people flying around the world to conduct business on owning a piece of the internet because they don’t trust the internet. It appears the future of the internet is to be negotiated offline lol. More Domains = More Online Handles We haven’t had new gTLDs since 2012. Why do we need more? I can imagine a future where expressive top-level domains become our personal brands, identities on the internet. This is already true in some nerdy corners of the web, like on Bluesky, where your domain is your username. I don’t call my internet friends Neal and Luke, I call them neal.fun and luke.zip. Instead of joining the land rush to grab our username on each new social media site, we’ll carry our domain around the web with us. I’m telling you, domains are the OG handles on the internet . More domains mean more opportunities for individual expression at the root layer of internet infrastructure — that makes sense for a web that’s meant to be worldwide! You Think You Have a Domain Vice? As developers, we often joke about our addiction to buying domain names for our side projects. But buying a domain name — e.g. my-side-project.com — is child’s play compared to buying a generic top-level domain name (gTLD). That’s where the domain whales are. ICANN charges a $227,000 application fee for each string, to recover the cost of running the program. The $36 million or so that Nova will need to cover those fees […] is coming from the personal bank account of Yoni Belousov, a reclusive domain investor (industry jargon: “domainer”) who’s been in the business since he was 14 years old. Next time somebody asks me what I’d do with an insane amount of wealth, I now have the jargon for an answer: “I’d become a domainer.” A Few Fun Facts to Close A few things about domains I didn’t know until I read this: all two-letter extensions are off the table. Those belong to countries, like .co in Colombia and .me in Montenegro and .ai in Anguilla. If you want to run a geographic TLD, like .nyc or .paris, you need approval from that municipality your string can’t be too similar to an existing one (.corn is a no-go; looks too much like .com) certain special strings are off limits, like .icann and .www (wouldn’t that be a trip). www.www would be a baller domain! Just think of the recursion you could do with that on the subdomain level. Reply via: Email · Mastodon · Bluesky

Stéphanie WalterMore Front-end Bloggersread at source

Pixels of the Week – October 11, 2026

This week brings some resources on neurodiversity and cognitive accessibility, explains why design struggles to justify its value to business, and how AI exposes design’s craft crisis. Also don't miss some nice accessible color combinations and funny wildlife photos.

David BushellMore Front-end Bloggers4 min read

D-Bus Hell

The time has come to address the elephant in the comments. Whenever my blog hits a place with a comments section the most predictable comment I see — besides some variation of “this idiot is utterly delusional!”† — is this one: “lol I read the domain as “D-Bus Hell” Random commenter”I’d prefer if […]

Flavio CopesMore Front-end Bloggersread at source

How to create an Apple TV app

Build a tvOS app with SwiftUI, share code with your Mac app, design it for the Siri Remote, make its layered icon, and install it on your own Apple TV.

Zell LiewMore Front-end Bloggers2 min read

Redefining My Relationship With You

I no longer knew how to define my relationship with the people who read my work. Not teacher and student, not leads and customers. Here's where I eventually settled: fellow wayfarers.

Adrian RoselliMore Front-end Bloggers4 min read

Decorative Images…

…aren’t a thing. Three hand-drawn lines curling together like an S or three skinny snakes trying to spoon. At least not as far as people are concerned. Yes, this is an absolutist take, but sometimes it’s necessary to take the absolutist position to force someone to justify their own reasoning.…

Frontend Masters BlogMore Front-end Bloggers7 min read

5 Good Choices for HTML Containers

Divs and spans are fine, but purposefully meaningless. Often the meaning actually matters, so let's look at some of those situations.

Flavio CopesMore Front-end Bloggersread at source

How to install your own apps on your iPhone with Xcode

Put the apps you build on your iPhone without the App Store: turn on Developer Mode, install from Xcode, update over Wi-Fi from the terminal, and renew them.

PiccalilliMore Front-end Bloggersread at source

The Index: Issue #201

2027 web platform feature ranking This is the second year we're doing this, and last year's 1900+ rankings not only helped us push the right proposals in the Interop process, it was also used to prioritize web platform feature development in Firefox. Certainly beats thumbs up in GitHub issues! Make your voice heard. This hue shall pass A fabulous colour contrast tool from the great folks over at Clearleft. Dark forestry Not only an outstanding and important piece of writing, but the design and effects are lovely. Destroy any website This is very fun! Destroy your least favourite websites (like the pre-loaded example) for a vibe boost. css.earth Explore earth, other planets and even other galaxies, all rendered with HTML and CSS, via PolyCSS . The box model and box sizing Here's one from the Piccalilli archives that you might have missed to wrap up this issue. P.S. this is a good website from personalsit.es . Sponsor message Has your organisation gone too deep with frameworks or [gasp] LLMs and feel like you're stuck? We're helping clients get away from that noise and instead, focusing their efforts and budgets on actually doing stuff that will help them reach their goals. We do all of that while running this publisher, Piccalilli too! Our availability opens up again in late 2026 into 2027, so check out what we're about. Maybe we can be the key that unlocks your success in 2027 onwards. Check out our work

Robin WieruchMore Front-end Bloggersread at source

Toward a Self-Improving Agentic Code Review Loop

An agentic code review loop where each developer fires their own AI review skill at pull requests, the author's agent answers, and a scorecard rates each skill.

Frontend Masters BlogMore Front-end Bloggersread at source

How an accessibility designer adds keyboard shortcuts to a web app

Eric Bailey explains the thinking and research that go into adding just a few custom keyboard shortcuts to a web app. There’s an absolute ton to consider and test, and plenty of challenges can come from your own team.

Bram.usMore Front-end Bloggers4 min read

<​calc-input>, a custom input element that accepts mathematical formulas

Continuing my streak of small form-related Custom Elements (like ) , I built . It’s a custom input element that accepts mathematical formulas — such as 2 + 3 or (2 + 3) * 4 — and automatically toggles between showing the formula on focus and the calculated result on blur.

Bram.usMore Front-end Bloggers2 min read

caniname: CLI tool to check project name availability across Netlify and NPM (and other sources)

Whenever I build a new tool or custom element (like or ), I always end up doing the same manual dance: checking if the package name is still free on NPM and if the matching .netlify.app subdomain is still unclaimed on Netlify. To automate that check, I built caniname .

Jim Nielsen’s BlogMore Front-end Bloggersread at source

“Getting off the Modernization Treadmill”

My notes from this talk by Alexander Petros at Big Sky DevCon 2026 . Alex starts by noting how “modernize” used to mean something along the lines of “update this thing that was made before I was born”. But now “modernize” means something more like “update this thing from 5-10 years ago” (hence the framing of the talk, the “modernization treadmill”). Using a real-world example of an incredibly slow website that was required to access state-sponsored programs for welfare, Alex points out the disparity in conditions between those of us who make software and those who have to use them: The people who develop these websites are usually doing so on high-powered internet connections and high-powered devices, but they're not using them in the conditions that the people who most need those benefits are going to be. Then he shows a Reddit thread where somebody essentially posted, “I’m having problems with this website. I’ve been waiting for months for my application to go through. Any suggestions?” And one Reddit user responded, “The best thing you can do is go into the physical office, get a case worker, and your problems will be solved within the hour.” The irony. I guess we've come full circle now. It used to be: “Don’t talk to anybody. It’s faster and more convenient to use the website!” But now it’s: “Don’t use the website. It’s faster and more convenient to talk to somebody!” Have we failed at making websites? And is our failure, at least in part, rooted in the fact that we don’t leverage the basic tools for making websites: HTML, CSS, and (in a distant third) JavaScript? Alex goes on to argue that the technologies of the web have an ideological bent and, if used as designed, can solve so many of the performance, accessibility, and usability issues that plague so many websites. The grain of the web’s technologies are rooted in these values: User-friendly Backwards- and forwards-compatibility Long-term viability Universal accessibility Which means if you use them as intended, they are optimized to deliver outcomes rooted in those same values. So if you like those values and you want those outcomes, use the platform. Take HTML, for example. Here’s Alex: HTML does [performance improvements] for you for free. If you've coded your website in a proper, semantical, structure HTML style, it will just get better over time at zero cost to the people who built that website HTML is your friend. HTML won’t give you up or let you down . HTML will make it difficult for you to make a bad website. Write it in to the requirements of the project you’re doing that it work without JavaScript. Not necessarily that it doesn’t have any JavaScript, but just that the core functionality of the website can happen without JavaScript. If you do this […] you will find that it’s very hard to deliver a bad web page because the structure that HTML requires is one that fundamentally is good for the user, performant, and cost effective. Technologies are imbued with culture, which influences what you do and how you do it. If you can align your ideological beliefs with your technological choices, you might end up with an outcome that aligns with your values — who would’ve thought, eh? A lot of modern software developers come from websites like Facebook, they come from big tech companies [who] fundamentally have a different set of priorities. Their job is to keep you on the website as long as possible so that you consume more ads. But that’s the opposite set of requirements and priorities that the government needs to be doing, which is to build something that is clean, quick, efficient, and gets you in and out as fast as possible. So [I tell people] that the technology they use comes from [an] ideological place. But there are different ideological places that produce different technological results and if we start from those through lines then we can produce services that help people who need them. The ideological principles of the web are well established : users over everything else. If you use HTML as much as possible, you’ll make something that’s as user-friendly as possible on the web. Reply via: Email · Mastodon · Bluesky

Kilian ValkhofMore Front-end Bloggers2 min read

I’d like to have a universal pseudo selector in CSS

Last week, I wasted about an hour of my time figuring out why a certain element had different dimensions than the same element elsewhere in the DOM. It had the same CSS and the same defined width and height, but it still rendered differently. Yes, it was box-sizing. Of course it was box-sizing. I immediately […] The post I’d like to have a universal pseudo selector in CSS first appeared on Kilian Valkhof .

Flavio CopesMore Front-end Bloggersread at source

How to use Jev with Claude Code, Codex and Cursor

How to use Jev with Claude Code, Codex and Cursor: install TypeSafe's agent skill, give the agent the docs, and review the Jev code it writes.

Flavio CopesMore Front-end Bloggersread at source

The complete guide to LiveKit Agents

Build a voice AI agent with LiveKit Agents in Node.js and TypeScript, then test it, simulate calls, deploy it to LiveKit Cloud and watch real sessions.

Ana RodriguesMore Front-end Bloggers1 min read

My Interop feature ranking

The Firefox team just launched a website that allows users to rank the Interop 2027 proposals that they care about. And I care about things - for selfish reasons and for work. And that's a challenge. I want to rank things that only benefit me and my blog but I also want to rank…

Swizec TellerMore Front-end Bloggers1 min read

When code is cheap, judgement becomes the job

Software engineering has changed in the last 2 years. Here's how that looks without the fluff. Real company, big stakes, finite token budget

Bram.usMore Front-end Bloggers3 min read

Bringing Microsoft Internet Explorer’s proprietary “Interpage Transitions” back to Modern Browsers using the View Transition API

Back in late 2024, I started working on a fun end-of-year side project named ie-page-transitions . It”s a CSS + JS library that brings back Microsoft Internet Explorer’s proprietary “Interpage Transitions” to modern browsers, powered by the View Transition API. After sitting unfinished for a while, I finally got all 23 classic effects over the finish line and published the project on page-transitions.style .

Frontend Masters BlogMore Front-end Bloggers13 min read

Testing an iframe’s postMessage Handler

There are some real complexities using iframes and the postMessage API for communication between a widget and its parent. Security vulnerabilities like cross-origin scripting risks being one.

David BushellMore Front-end Bloggers4 min read

A sustainable web career, for when all this blows over

For better or worse the web industry is going through a bit of a phase. The reasons are largely irrational. People still need the web, nothing has changed there. Regardless, the financials of this business are a struggle. Longterm career prospects are looking dicey. […]

Flavio CopesMore Front-end Bloggersread at source

How to compile JavaScript into a single executable

Turn a JavaScript program into one executable file, like Go and Rust do, with deno compile, bun build --compile and Node.js single executable apps.

Flavio CopesMore Front-end Bloggersread at source

Use WhatCable to figure out what your USB cable can do

WhatCable is a free, open source Mac app that reads the chip inside a USB-C cable and tells you its real data speed, power rating and what limits it.

Flavio CopesMore Front-end Bloggersread at source

How to avoid the "Open Anyway" message when building macOS apps

macOS blocks apps downloaded from the internet until people click Open Anyway. Sign your app with a Developer ID and notarize it, and it opens normally.

Ana RodriguesMore Front-end Bloggers1 min read

Bookmarks that were lingering in tabs

I was a big girl this week and I finally read and closed all the tabs I had open. Here's my picks from that selection. Fresh browser start - here I go. Bookmarks related to tech and web development Native HTML and CSS Features That Replaced JavaScript by Ronalds Vilciņš. What…

Frontend Masters BlogMore Front-end Bloggers1 min read

Interop 2027

I should have noted this sooner (sorry!), but it’s that time of year when Interop is planning for next year. Submissions are closed, and now they spend time refining and culling the proposals. We’ll hear on February 4th, 2027 what the focus will be on. I believe there is still time to “vote” (meaning basically […]

Jim Nielsen’s BlogMore Front-end Bloggersread at source

Apple’s App Icon HOA

Louie Mantia has a great post about how app icons are converging towards the squircle on iOS and macOS. His post reads like a history. If you’re wondering, “How did we get to a place where all app icons are becoming squircles?” Mantia’s post answers that question by starting at the beginning. It’s hard to walk away from Mantia’s article without a sense of empathy for Apple’s position, like “Oh ok, I get why they’re doing what they’re doing. It makes sense.” Apple’s direction is kind of a tacit acknowledgement to how most people are shipping app icons. Apple is “paving the cowpaths” as it were, because most app icons are just brand logos. Nowadays, it’s these bland, big-business logo icons that make up a good chunk of iOS Home Screens and macOS Docks, instead of the beautiful, illustrative app icons that used to dominate our devices. So many app icons are just logos in a squircle, so Apple made tools like the Icon Composer and glass effects to help make that approach look good by default. Apple is helping most people most of the time make app icons that don’t suck. [Apple is making] it easier for all apps to fit in on the platform, especially apps built by designers and developers who aren’t familiar with how to make an icon that looks great next to first-party icons. The net effect is: some of the platform’s best icons look worse, while some of the platform’s worst icons look better. In other words, this new approach raises the floor but it also lowers the ceiling. The thought that came to mind as I read Mantia’s post was, “This reminds me of HOAs.” I grew up in a neighborhood where anyone could do anything with their homes and yards, so you had this eclectic mix throughout the neighborhood — everything from “Wow, that house is so unique!” to “That thing is a dump.” Somewhere along the way HOAs became more prevalent (in my neck of the woods), where all the houses in a neighborhood have to meet a certain standard — and so they all start to look the same. It keeps the dumpy things out, yet nobody stands out . That’s kinda what macOS feels like right now with regard to app icons. For better or worse, squircle app icons are Apple’s HOA and we’re all just living in it. Reply via: Email · Mastodon · Bluesky

Flavio CopesMore Front-end Bloggersread at source

What happens when AI agents shop for us

Shopify wants Muse to check out with Shop Pay on every store. I want the agent to find the product. I still want a person to approve the exact charge.

Flavio CopesMore Front-end Bloggersread at source

Use npkill to find and delete old node_modules folders

npkill is a free terminal tool that finds every node_modules folder on your computer, shows its size and age, and deletes the ones you pick.

Flavio CopesMore Front-end Bloggersread at source

I built Repo Foyer, a Chrome extension that puts my repos on the GitHub home page

Repo Foyer is my free, open source Chrome extension that replaces the GitHub home page with your repositories, so you can jump to the one you're working on.

Flavio CopesMore Front-end Bloggersread at source

I open sourced testvm, so your coding agents can test Mac apps in a VM

testvm is my free, open source tool that runs Mac app builds in a headless macOS VM, so coding agents test them without taking over your screen.

Flavio CopesMore Front-end Bloggersread at source

I built Footage Ferry, a Mac app to import Blackmagic Camera videos

Footage Ferry is my free, open source Mac app that copies Blackmagic Camera clips from an iPhone over USB, checks every copy byte for byte, and then offers to delete the originals.

Flavio CopesMore Front-end Bloggersread at source

How to use Jev with the Vercel AI SDK

How to use Jev with the Vercel AI SDK: install the TypeSafe provider, call experimental_evaluate, read confidence, use AI Gateway, and compare Jev with an LLM.

Frontend Masters BlogMore Front-end Bloggers10 min read

Transferring sibling-count() to a Parent Element

You can tell a parent element how many children it has with... scroll-driven animations??

Flavio CopesMore Front-end Bloggersread at source

I built Chip Pops, 6,000 8-bit sound effects for my apps

Chip Pops is my free, open source Mac app and command line tool with about 6,000 8-bit sound effects made with jsfxr. Click a sound to hear it, drag it into your app.

Flavio CopesMore Front-end Bloggersread at source

I built Couch Snake, the classic phone game for the Apple TV

Couch Snake is my free, open source Apple TV game: the classic snake game from old mobile phones, full screen on a green LCD board, steered by swiping on the Siri Remote.

Flavio CopesMore Front-end Bloggersread at source

How to use cf, the new Cloudflare CLI

Learn cf, the new Cloudflare CLI: find commands with cf cli search, configure Workers in cloudflare.config.ts, deploy, and migrate from Wrangler.

Flavio CopesMore Front-end Bloggersread at source

Hosting picker: find where to host your app

Answer four questions and get three hosts that fit your project, with a monthly price and the main catch. 21 providers, prices checked October 1, 2026.

Flavio CopesMore Front-end Bloggersread at source

Payment picker: find how to get paid for your app

Find a payment provider for your product, compare fees on your own numbers, and see who handles tax and disputes. Merchant of Record and direct providers.

Flavio CopesMore Front-end Bloggersread at source

A deep dive into cron

Learn cron on Linux and macOS: crontab syntax, schedules, the cron environment, logs, overlapping runs, time zones, launchd and systemd timers.

Jim Nielsen’s BlogMore Front-end Bloggersread at source

“I’m Embarrassed on Behalf of the Tech Industry”

That’s something Ben Thompson said a recent episode of Dithering . He was referring to how he felt while trying to help his mom get control of her digital life. Everything was just too hard and convoluted and he felt embarrassed as someone who works in tech. That very same evening, I randomly got this text from a family member. I hear this a lot from family and friends who sit outside tech. “Nothing works.” “Everything is hard to use.” “I can’t make sense of this.” And to them I am a representative, a connection, to this pain in their lives. And I, too, am embarrassed on behalf of the tech industry — by our collective failure. Reply via: Email · Mastodon · Bluesky Related posts linking here: (2026) “Getting off the Modernization Treadmill”

Stéphanie WalterMore Front-end Bloggersread at source

Pixels of the Week – October 4, 2026

👉🏻 Curated weekly UX Research, Design & Tech resources: building a general-purpose accessibility agent, how to make your design system AI-ready, WCAG 3.3.4 error prevention explained, why you got faster but your company didn't, the AI delegation matrix for your UI, flame painting art on copper, curated branding inspiration, how mechanical watches work, maps of book characters' journeys, free no-login utility tools.

DXDMore Front-end Bloggersread at source

Não é Só um Logótipo, literalmente

A identidade visual do podcast "Não é Só um Logótipo" é um convite à descoberta de um sem fim de curiosidades sobre a disciplina do design. O conteúdo Não é Só um Logótipo, literalmente aparece primeiro em DXD .

Jeffrey Zeldman PresentsMore Front-end Bloggersread at source

Another Saturday, Another Song.

🎧 “Side Two” LP in progress. At 14 songs, it is nearly complete. I expect to release it before the year’s end. The post Another Saturday, Another Song. appeared first on Jeffrey Zeldman Presents .

David BushellMore Front-end Bloggers4 min read

Friendship ended with Deno, now Node is my best friend

It’s finally time I go crawling back to Node! I’ve been using Node heavily this month on a SvelteKit client project. When did Node get so good‽ Deno has been my go-to runtime for so long I forgot how to Node. Now I’m back, I find all the ECMAScript† sugar is supported and the old annoying APIs have […]

Frontend Masters BlogMore Front-end Bloggers4 min read

Fallbacks for CSS `progress()`

The new CSS progress() function calculates a value between 0 and 1, representing its position within a defined range. While awaiting broader browser support, users can manually implement this using other methods.

PiccalilliMore Front-end Bloggersread at source

The Index: Issue #200

It's issue #200 of The Index! A real milestone that we should celebrate with a dedicated CSS links issue. Let's get stuck in to the good links . Multiple-column layout, rows, rules, and floats The Boss™ is here with some fantastic news on layout capabilities that we can use. They should really open the door to more creative layouts, which is great. Our CSS isn’t opinionated enough This really resonates as Craig is describing issues that inspired CUBE CSS . Semantic state changes are a really good way of doing things too. Controlling when CSS custom property values are computed Jake, the fountain of technical knowledge, is here with another must read. CSS scroll-triggered animations are here, and I completely missed them A very good guide on scroll-triggered animations with some sage advice on usage too. Not many better people to cover this than Cyd! Detect when elements overlap with CSS We're enjoying how Ahmad is covering stuff that will be tripping people up all the time in their jobs as front-end devs. It's great to see. A pragmatic guide to modern CSS colours - part one Here's one from the Piccalilli archives that you might have missed to wrap up this issue. P.S. this is a good website from personalsit.es . Sponsor message Mozilla Festival is co-built by developers and designers from around the world. Come gather, share, and connect with us in Barcelona, October 28-30. Last year, more than 2,000 people came together to unlearn old ways of building tech. This year, with eight tracks and a spot in Barcelona's Open Tech Week, MozFest gives your ideas room to run wild. Join us for three days of conversation and hands-on building. Get your badge

Hidde's blogMore Front-end Bloggers5 min read

How IT can get more sustainable quicker: notes from Green IO

At Green IO this week , I heard about offshore wind, sustainability data, and cloud certification. This post has some notes I took. They all in some way relate to what can get us to more sustainable IT quicker. Better sustainability data It's really hard to reason about your…

Frontend Masters BlogMore Front-end Bloggersread at source

Front-End Checklist

David Dias has been working on “Front-End Checklist” stuff for a decade, and it looks like this latest version of it a little over a year. There is loads of good general advice in it that can be easy to forget: Now it’s all AI’d up, which makes sense, having a skill and MCP so […]

Jim Nielsen’s BlogMore Front-end Bloggersread at source

Dear Software Makers

Marques Brownlee just released a video essay titled “Dear YouTube” . I loved it. He talks about how YouTube is going to start shipping this new feature where makers can essentially publish different “variants” of their videos and see which performs best (an A/B test). Which immediately begs a lot of questions. Brownlee voices his: If I’m watching a video, do I know if it’s part of one of these A/B tests? If I’m reading the comments of a video, how do I know I saw the same thing as another commenter? How do linked timestamps work? It’s pretty wild when you think about it. I mean, imagine sending someone a link, “Check out this cool video!” And at that point you’re basically crossing your fingers, “I hope they see the same thing I did…” Marques says he spoke to some YouTube engineers about these questions and they didn’t really have answers. They were kind of just like, “We don’t know — yolo! This’ll ship soon.” So his video is a kind of plea to YouTube creators everywhere: Don’t use this feature! There’s this sort of unspoken rule of community on YouTube, that like we’re all having this same experience together — we’re all watching the same video. That is what makes it a cultural phenomenon is that we all saw the same thing […] so letting people put up two or three different videos of the same thing at the same time kind of fundamentally breaks that, which doesn't feel right. I agree, 100%. Brownlee goes on to make a lot of great points in the video that, I think, can be applicable to making software as well. A few that stood out: The skill of being a “creator” is not about maximizing views, retention, etc. It’s about finding creative ways to share stories, teach concepts, explore ideas, etc. Views, retention, etc. are all downstream of that. Making (and finishing ) something over and over and over is a better use of your time than making one thing and then trying all kinds of variants and obsessing over their varied performance. When you focus on optimizing, you end up trimming out all the creative (and fun) stuff because those things won’t, by definition, ladder up to metrics of efficiency. ( Moby Dick was not the most efficient way to tell that story.) Stand by your creative choices. Learn from your wins and failures, then make the next thing. Have some conviction. I find it interesting how Brownlee shares his opinion that YouTube spends way too much time chasing their competitors and not enough time being YouTube. Which, when you think about it, is exactly the kind of place a feature like this would stem from: an insecurity in your own creative choices. How YouTube approaches its own insecurities is now trickling down as a feature to its users. “Let’s let people make lots of variations on things, try all of them, and see what performs best” is exactly the kind of thinking you get in a platform that doesn’t know what it wants to be. So it’s left spending its time 1) doing what others are doing, and 2) following the fickle whims of whatever it can measure . It’s like this adolescent attitude of, “I don’t know what I want to be, so I’m gonna imitate my peers and let others tell me what they think I should be.” Anyway, that’s a long way of saying I liked the video. You might too. Hopefully you see the same thing I did, lol. Reply via: Email · Mastodon · Bluesky

Frontend Masters BlogMore Front-end Bloggers15 min read

You Don’t Know Bidi (And Neither Does ChatGPT)

Text that is set in a left-to-right *and* right-to-left language, mid-sentence, is a thing. Getting it right means understanding it, because your LLM isn't going to know.

Andy BellMore Front-end Bloggersread at source

In response to “The death of web development education”

I read Mat​hia⁠s S​chäf⁠er’s excellent post, titled The death of web development education . I was thinking about how I can contribute to the conversation and really struggled to articulate the problem. The most effective way I can contribute, in my opinion, is a crude sketch I…

Frontend Masters BlogMore Front-end Bloggersread at source

Modern Web Types

The web platform evolves. When it does, other tech has to catch up, and not just LLMs. Another one is TypeScript types. Philip Walton explains: For example, here’s an error I got just the other day when trying to use element-scoped view transitions: “Property ‘startViewTransition’ does not exist on type ‘HTMLElement’.” … TypeScript makes it […]

Jeffrey Zeldman PresentsMore Front-end Bloggers2 min read

My Glamorous Life: in Which I am a Target

As I limped home from Physical Therapy, a man walking in the opposite direction suddenly planted himself directly in front of me and slammed me in the head with a heavy bag. It was a cloth bag, like a backpack with only one strap. I’ve no idea what was inside it : a beat box? […] The post My Glamorous Life: in Which I am a Target appeared first on Jeffrey Zeldman Presents .

Jim Nielsen’s BlogMore Front-end Bloggersread at source

VLM Enhanced Metadata For My Icon Galleries

Confession: I got nerd-sniped by Sam Henri Gold’s request for my icon galleries: I'd like to humbly request artwork-level searching in macosicongallery.com What follows is a train-of-thought blog post as I play with what an implementation might look like. I’ve actually long-wanted something like this, e.g. let me search for “coffee” and show me all icons that have some depiction of coffee in them. Similarly, I’ve wanted some kind of “related” representation for icons. I have this today via existing metadata, e.g. “Show me other icons in the category ‘Productivity’” or “Show me other icons tagged as ‘orange’”. But I’ve wanted a more robust representation of this, so if you were looking at an icon that had a microphone in it, the site would say “Here are other icons that also have microphones in them.” And the relationship would be rich/smart enough to know that “microphone” was meant broadly, i.e. dynamic mics, condenser mics, ribbon mics, etc. So how would you do this? I could go through every icon one-by-one and classify/tag any attribute of its design that comes to mind, but that would take ages! Seems like a good use case for a vision model. Trying CLIP First, I’ll look at Sam’s suggestion: run every image through CLIP. I’m not familiar with CLIP so I start with a little research: What is it? How would I use it? And most importantly: is it free/open (because I ain’t spending a ton of money to send my thousands of icon PNGs to an AI provider via their API)? Ok, so CLIP will take an image and spit back an embedding (basically a bunch of numbers representing features of the image). When you do it with multiple images, you can then compare those embeddings to see what the model considers similar (and, if you like, set a threshold for what constitutes a “match”). After getting a sense of the task in front of me, I work with the LLM to come up with a proof of concept. I don’t need to fit this into my existing site. I just want to make one-off HTML pages where I can feel out, “Can this process create anything useful? What’s the amount of work required?” Write a script that runs a sampling of icons through CLIP’s image encoder Read the file locally, e.g. ./ios/256/${icon.id}.png 256x256 pixel icons seem to be enough, as the CLIP model I’m using preprocesses them to ~224px anyway. Create a dataset representing the “embeddings” (an array of numbers) for each icon that I get from CLIP, e.g. Array }> Create a dataset representing the top matches between different embeddings, e.g. { [id: String]: [id, id, …] } Create a clip.html file has both datasets (plus supplementary icon metadata I already have), render all the sampled icons, and support an onclick for each icon that shows the related[id] icons. This is enough to create a single HTML file where I can click on an icon and see other icons that look like it. However, I realize quickly that I’ll need to process my entire icon library to really get a good sense for how well these are matching. So I do that. [Computer goes brrrr…] Ok, now when I click on an icon that looks like a camera, I see other icons that look like cameras. Or if I click on an icon that has a checkmark in it, I see other icons with checkmarks in them — sort-of. But the results aren’t that great unless an icon is visually distinctive. I share some thoughts with Sam. He has a few other suggestions I follow. DINOv2, SigLIP2, and More Sam mentions SigLIP2 so I start with that as a keyword. The LLM recommends DINOv2 so I say, “Let’s try it”. I give that a try, creating a separate dataset and prototype (e.g. embeddings-dinov2.json and embeddings-dinov2.html ) so I can continue to view these different prototypes and compare their outputs. It’s fine. Different from CLIP. Honestly not much better. So I figure let’s try another one. I go with SigLIP2. I ask the LLM to create a page where I can compare the results. Seems like six of one, half dozen of another. One does better on some kinds of icons, worse on others. The LLM recommends that, at this point, I be done shopping models. They’re roughly the same class of tool with different tradeoffs. None are breakthroughs. So now what? Try Tagging Icons With Keywords Sam recommends another approach: You could also try handing all icons over to a VLM, having it write up a description, and embedding THAT text against what people might search for. A thoroughly detailed person might’ve done this from the start, e.g. for an icon that’s a checkmark, add the keyword “checkmark” to its metadata. That would take me forever to go back through all my icons and do — a perfect task for a computer that never tires. So I give this a try. First I need a free/open VLM. After a little research I decide to try Moondream via Ollama . I have the machine go through each image and caption it, then pull out “tags” from the caption. For the Clear app icon , I get data like this: { "id": "clear-todos-2021-01-10", "caption": "The image features a red and orange gradient background, with a white checkmark in the center. The checkmark is slightly tilted to the right, giving it a dynamic appearance. The background transitions from red at the top to orange at the bottom, creating a sense of depth and movement. The checkmark is the main object in the image, occupying most of the space and drawing attention to itself.", "tags": [ "red", "orange", "gradient", "white", "checkmark", "slightly", "tilted", "dynamic", "appearance", "transitions", "creating", "sense", "depth", "movement", "object", "occupying" ] } Then the LLM creates a single search.html file where I can test icon matches by searching for tag overlaps (or choosing one of the popular ones). So, for example, on the search page I can click on “checkmark” and see all the icons with a checkmark. Or click on “fox” and see all the icons with a fox. Matches are pretty spot to be honest. But that’s a different kind of test than what I was doing with CLIP. CLIP: click on an icon and see other icons like it. Tags: click on a keyword and see other icons with that keyword. Can I leverage tags for the same kind of “related icons” work that CLIP is doing? CLIP vs. Tags I get the LLM to cook up a single-page HTML file where I can compare “click on this icon and find other icons like it” where I’m using embeddings from CLIP vs. matching on keywords. The results seem to fare much better for CLIP. For example, here I matched on what I think of as a “checkmark icon”. You can see the approach that matches on tags didn’t work too great. I believe this is because with my simple tag-overlap approach, a distinctive keyword like “checkmark” gets diluted amongst generic tags like “square”, “blue”, and “simple”. Whereas with CLIP, if you click on an icon with a checkmark, you get other checkmarks (and not other icons that also have related tags like “square”, “blue” and “simple”). Which all makes sense. Pushing on the implementation here could help, but that’s separate work to do. So Now What? I’m not sure. While doing all of this was an interesting technical exercise, there are a few important considerations I need to think through before implementing anything, such as: What kind of functionality do I actually want? A “related icons” feature? Does it match on keywords or embeddings? A “search” feature that matches on keywords? Both? How do I build these features into my codebase now, given the thousands of icons that already exist? How do I maintain this feature in the future? e.g. every time I add a new icon to my gallery, is a VLM now a dependency of this project? Given all the above, what’s the time and money cost? I’m very picky about adding new dependencies to these icon projects. I like to think that’s why I’ve been able to maintain and continue contributing to them after so many years — because I make it easy on myself (good job, Past Jim). So, for example, if I make a VLM a dependency of this project such that every time I add a new icon I have to run it through to create the embeddings, that’s a big dependency cost IMO. I’m not sure I want to do that. That said, Apple now ships foundation models in macOS 27 available through the CLI (go ahead, try typing fm in your Terminal if you’re on Golden Gate). So if my Mac continues to be the primary machine where I add/update metadata for my icon projects, using fm would be a really easy/low-cost way to process each new icon to generate a caption and keywords for matching in search. But again, I don’t know if I want to do that. I wrote this post to try and work through what I want to do, but I am still undecided. So I guess the only thing for me to do at this point is hit “Publish” on this post and keep simmering on a decision. Reply via: Email · Mastodon · Bluesky

Swizec TellerMore Front-end Bloggersread at source

Why I'm excited about Jev-like classifiers

zero-shot classifiers fit a nice spot on the roadmap to production AI apps

Adrian RoselliMore Front-end Bloggers5 min read

#Corpowid and #Skynet Technologies Will Get You Sued

The market is flooded with so many accessibility overlays that it’s impossible to keep up. I’ve written about the biggest players (plus some also-rans) and provided enough technical details that most readers should know how to quickly evaluate their false claims and poor technology. Never mind their ethical failures as…

David BushellMore Front-end Bloggers4 min read

Shin honkaku

Shin honkaku is a sub-genre of Japanese detection fiction — and my new obsession! I’ve even designed my own book cover, scroll down to see… An intro to the genre “Shin honkaku” translates to “new orthodox” and pays homage to classic western authors of the early 20th century such as Poe, Queen, Van […]

David BushellMore Front-end Bloggers2 min read

Leaving them behind

Quick note before we begin: this is the first of two posts I’m publishing today. You’re welcome to skip ahead to: Shin honkaku — it’s far more fun! I’ve waited long enough! I’ve entertained one “wait six months” too many! The TL;DR for my updated AI policy has changed: The absolute vileness of the […]

Jim Nielsen’s BlogMore Front-end Bloggersread at source

Humane Interfaces

So there I am reading Unsung when I come across this quote from Jef Raskin : An interface is humane if it is responsive to human needs and considerate of human frailties. This articulation perfectly captures why I recoil at modern “growth tactics” in user interfaces and experiences: they are designed to exploit human frailties, not be considerate of them. Stated again: a humane interface — or a humane system, even a humane technology — is considerate of human frailties. It acknowledges they exist and works with them, rather than taking advantage of them. Humane technology does not rely on impulse, addiction, or imposition to survive. It survives purely on the free choice of its user. You choose to use it because you have the freedom not to. Reply via: Email · Mastodon · Bluesky

Remote SynthesisMore Front-end Bloggersread at source

Wired's Women in Tech Survey

Tech is a tough place to work right now, but especially for women.

HeydonWorksMore Front-end Bloggersread at source

The AI Artist Paradox

Whichever way you cut it, you cannot be an AI artist.

Julia EvansMore Front-end Bloggers5 min read

Replacing the old battery on rechargeable bike lights

Hello! Recently I needed bike lights for my bike. And I remembered that I already had rechargeable bike lights that I bought ten years ago, that I hadn’t tried in a long time. I tried to recharge them, but after fully charging them, they only worked for maybe 5 minutes before…

Jim Nielsen’s BlogMore Front-end Bloggersread at source

Using an LLM to Automate the Process of Archiving New macOS App Icons

Whenever a new version of macOS drops, I find myself archiving the new app icons for my macOS icon gallery . In the past, the work to do this was a bit tedious. First, I’d find the app in the “Applications” folder (or elsewhere on the Mac), right click and choose “Get Info”: Right-click the app icon in the Get Info pane and choose “Copy”: Open the Preview app and go “File -> New from Clipboard”: This gets me the app icon file with a variety of sizes (the 1024-pixel version is the one I want). From here, I go “File -> Export…”, choose “PNG”, and name the file as the app name, lowercased, hyphenated — e.g. “app-store.png” (I do this for automation purposes not relevant here). Doing that for every Apple-supplied app in the OS can get tiring. It’s often upwards of 75+ icons. “This seems like the perfect task for an LLM,” I thought. So I hastily wrote a prompt to see if it could do it. And it did — sort of, after a little coaching. On the first try it found an app’s .icns file, grabbed the 256×256 version, upscaled it to 1024×1024, and saved it. So I scolded it, “No, no. NEVER upscale an image. Always find the biggest one. I can get the 1024 version myself from the ‘Get info’ pane, so surely you can find that size somewhere.” It came back dutifully, having found the right image, and said it would never upscale again. Satisfied it could do what I wanted, I worked on creating a list of all the apps whose artwork I wanted to archive. Then I gave that list to the LLM and said, “Do your thing.” And it worked! It was kind of wonderful. Saved me a ton of time. 76 app icons found, extracted, and saved in much less time than it would’ve taken me to do this “by hand”. Reply via: Email · Mastodon · Bluesky

David BushellMore Front-end Bloggers2 min read

Removing the fancy button

My blog is standard.site ready but I’m pausing full integration for now. I desperately wanted the fancy button but after its novelty wore off I’ve accepted the truth. The Bluesky button is bad UX. This has been widely complained about from day one. The problem is obvious for Bluesky users. […]

Jeffrey Zeldman PresentsMore Front-end Bloggers1 min read

Undersung Hero: M. Frog

I bought this LP because of its Milton Glaser-designed cover featuring the colored pencil musical notations of composer/synthesist and former monk Jean-Yves Labat, alias M. Frog. It was 1973; I was about to become a high school senior, and I had hitchhiked to New York City with my friend Al Crump. The multi-floor Sam Goody […] The post Undersung Hero: M. Frog appeared first on Jeffrey Zeldman Presents .

PiccalilliMore Front-end Bloggersread at source

The Index: Issue #199

Blurry before beautiful: image previews for the web A very good looking proposal! The root scroller and how not to lose it Yet another in-depth, fantastic article by Kilian at Polypane. fonts.xyz You know us by now: we see a good place to get fonts and we share it. This is a very nice offering with loads to choose from. “AI, make the website good” With these seismic changes, I will continue to make the argument that craft defined as caring about the quality of output (independent of the tools used to generate the output) is more important than ever . Caring about what you ship will always have real-world value to visitors/consumers/users real people . Well said, Zach! I spent three sweltering days shredding the high seas at jogging pace, and it ruled A long read but absolutely outstanding prose. It’s about time I tried to explain what progressive enhancement actually is Here's one from the Piccalilli archives that you might have missed to wrap up this issue. P.S. this is a good website . Sponsor message Mozilla Festival is co-built by developers and designers from around the world. Come gather, share, and connect with us in Barcelona, October 28-30. Last year, more than 2,000 people came together to unlearn old ways of building tech. This year, with eight tracks and a spot in Barcelona's Open Tech Week, MozFest gives your ideas room to run wild. Join us for three days of conversation and hands-on building. Get your badge

text/plainMore Front-end Bloggers7 min read

“The” IP Address

As elaborated in a prior post, sites and services often try to use an IP address as an input into protection (e.g. blocking a spammer) or customization (providing local weather info) algorithms. Commonly, software would like to know “What is this device’s IP address?” Unfortunately, this is not a trivial question to answer, because it Continue reading "“The” IP Address"

Geoff GrahamMore Front-end Bloggersread at source

Never forget the first chat agent UI.

Ahmad ShadeedMore Front-end Bloggersread at source

Detect when elements overlap with CSS

The Web Witch's BlogMore Front-end Bloggers1 min read

A Short Update on Designing for Foldable Devices

And here we are three years after I wrote about the Google Pixel Fold being announced , followed now with the announcement of the iPhone Duo...(I have questions about the naming by the way). Four years ago I was talking about web primitives in the platform for the Surface Duo.…

Jim Nielsen’s BlogMore Front-end Bloggersread at source

Make Money to Make More Websites

I was listening to the episode “Make Your Own Thing” from the Off Protocol podcast where Jim Ray interviews John Gruber. They cover a variety of topics, including Gruber’s thoughts on the dilution of personal brand by publishing through “chain” platforms like Substack (I quite enjoyed the metaphor of a personal website where you publish your stuff to that of a chef/restaurant, but that’s a separate post). Around ~1:13:00, Gruber quotes Walt Disney who said, “We don't make movies to make money, we make money to make more movies.” And he goes on to argue that when you’re forced to choose one of these priorities over the other — because you will undoubtedly face decisions where the two sets of values come into direct opposition — the company that prioritizes making movies over making money is fundamentally a different company than the one that chooses making money over making movies. If you ultimately prioritize making money, then what’s going to be ultimately great about your company is you make a lot of money (for shareholders, for owners, for yourself, for whomever). Conversely, if you ultimately prioritize making movies, than what’s going to be ultimately great about your company is your movies. Hopefully that makes you a lot of money, but it might not. One day people might say, “Damn, they made great movies. Too bad they’re not around anymore.” To be fair, the prioritization of those values shifts and changes over time. Sometimes companies prioritize one over the other based on circumstances, e.g. “We’re gonna go bankrupt soon, we have to prioritize making money in these particular areas or we won’t be around long enough to keep making money.” I’m not saying there’s an easy answer in those situations, I just find the opposition of those priorities intriguing. Ultimately, you do have to choose something over something else . It’s not necessarily a one-time decision, but the outcomes are a function of that prioritization over time. Gruber believes Apple still generally prioritizes users most, i.e. in most cases, most of the time: I think it’s true that the second priority for [Apple] is to make as much money as possible, but it’s the second priority. Every time [that] priority kinda creeps ahead […], like the way they’ve shepherded the App Store and the commissions they make from it, is arguably an area where they’re driven more by, “Let’s make as much money as possible because we control the App Store.” Rather than, “Let’s make the App Store as good for users and developers as possible.” And I think that’s the reason we complain about it, of all the things Apple makes [the reason people who enjoy the company’s products still complain the most about] that area of the company is because the priorities are clearly in the other order. It does feel like so much of tech today is people asking, “What can we make for others that’ll make us a lot of money?” But that’s a different prioritization than, “Let’s make something great for ourselves and, along the way, let’s see if we can make some money in order to keep doing what we love.” Reply via: Email · Mastodon · Bluesky

PiccalilliMore Front-end Bloggersread at source

Stop buttons triggering zoom when they’re double tapped

I stumbled across this great project by Barry Prendergast . It's a web-based radio player with a lush UI. On mobile I spotted that as I was rapidly flicking through the stations to find one that was on air, the browser was zooming in and out. Here's a screen clip: Watch the video . I thought this behaviour was related to their viewport meta tag setup, but they have that set up perfectly: Now, you could prevent the zooming by adding , maximum-scale=1.0, user-scalable=no to the content attribute, but don't do that because it prevents zooming at all, which is a WCAG violation . What's actually happening here is the browser is responding to the double tap gesture, which in the case of Safari on iOS, zooms into the button element I'm tapping. Luckily there's a CSS one-liner for us that gets the job done. .button { touch-action: manipulation; } As per MDN : Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. This is an alias for " pan-x pan-y pinch-zoom " (which, for compatibility, is itself still valid). Let's see it in action. First, here's a couple of buttons without touch-action . Try rapidly tapping on your phone/touch device: See the Pen Buttons without touch-action applied by Andy Bell ( @piccalilli ) on CodePen . This link has no CodePen framing to make that easier for you Here are the same buttons with touch-action applied: See the Pen Buttons with touch-action applied by Andy Bell ( @piccalilli ) on CodePen . Again, here's a frameless version for you Handy!

Bram.usMore Front-end Bloggers4 min read

Show keystrokes on a website with the <​show-keystrokes> custom element

When recording screen casts or doing live demos, I typically rely on a native macOS app to visualize my keystrokes on screen. Recently, however, that app got blocked on my work machine by a corporate security policy. Additionally, the keystrokes visualized through that app don’t show up when screen sharing a specific window or tab. Because I needed to demo a website that relies heavily on keyboard navigation — and thus really needed those keystrokes to be visible to the audience — I found myself in a bit of a pickle. So with the help of Gemini, I decided to build a web-native solution to fill that gap:

Bram.usMore Front-end Bloggers2 min read

New in Chrome 154: iframes that automatically resize themselves to their content

Chrome 154 adds support for responsively-sized iframes , letting an size itself based on the intrinsic size of its embedded document. This is perfect for seamlessly embedding third-party comment widgets, varying-height social media embeds, or any other type of embed that uses an .

David BushellMore Front-end Bloggers2 min read

I said no and Apple said yes

The nice thing about keeping a blog is that I can say at precisely 9:51am, Wednesday 5th February 2025, I discovered that macOS 15.3 had enabled a feature that was phoning home every 15 minutes with personal data. And that I said “no” and turned it off. […]

Jim Nielsen’s BlogMore Front-end Bloggersread at source

A Great Story Capturing the Essence of Being Online in 2026

I made a note of it , but Bryan Cantrill wrote a post about the ex-Anthropic employee who pegged the probability of AI killing humanity in the next decade at >10%. The article is a good one and you should read it, but what I want to capture here is a side story from Cantrill on the Oxide and Friends podcast where he talks about how proud he was of this phrase from his post: “These ghoulish claims strike brazenly at the hearth…” . He notes that someone online commented on that phrase, saying it sounded like a mix of classic literature and a line from The Simpsons . Amused, Cantrill says he came up with the line all by himself, so he knew it wasn’t a classic literature reference nor a line from The Simpsons . But just to be sure, he Google’d it: “These ghoulish claims strike brazenly at the hearth” with “The Simpsons” tagged on to the end. To his surprise, Google’s AI told him that the line was, in fact, a line from The Simpsons . Here’s Google’s response (as reported by Cantrill): During the Springfield mayoral debate on Channel 6, Sideshow Bob dramatically delivers the line “these ghoulish claims strike brazenly at the hearth of Springfield” while turning the debate against Mayor Joe Quimby. Instead of denying his criminal history, Bob exploits Quimby’s record and boldly tells the audience they secretly long for a cold-hearted Republican to rule them like a king. (Here’s my homemade graphic for illustration purposes.) Cantrill was astonished. Not knowing the episode enough by heart to discern whether this claim was true, he had a little bit of a panic attack: If I am having what I feel to be original thoughts that are, in fact, just Simpsons lines regurgitating from 30 years ago, that’s troubling […] How am I not an LLM? So he set out to find the truth. He finds the episode and watches it, but doesn’t hear the line. But what if the episode he watched was an edited version and the full-length one is out there somewhere? He’s gotta get to the bottom of this. So he goes back to Google and pushes on the AI’s answer, asking for the full script of the episode. At that point, the LLM folds and says the line is not from The Simpsons , but is actually from a post by — drum roll… — Bryan Cantrill. Here’s Cantrill, again, reporting Google’s AI response: What happened here is a classic AI “hallucination” . Because the phrase you shared used highly stylized, melodramatic language, “ghoulish claims”, “strike brazenly at the hearth”, my system misidentified the tone as belonging to Sideshow Bob who is famous for speaking in exactly that kind of grandiloquent Shakespearean style. I have to say, I found the whole story amusing and relatable. You write something on the internet. Somebody says, “This sounds like something from the Simpsons .” You wonder, “Do I even have original thoughts?” AI gas lights you. You have to spend your time refuting AI assertions . Some teenage part of you gets a kick out of being conflated with Sideshow Bob for your choice of language. I just wanted to write this all down and save it as a way for future me to remember, “This is what it was like to be online in 2026.” Reply via: Email · Mastodon · Bluesky

Jonnie HallmanMore Front-end Bloggers16 min read

Building the Open Standard website with Stripe

Reuniting with my friends at Stripe, I collaborate with them on the landing page for Open Standard.

Bruce Lawson's personal siteMore Front-end Bloggers4 min read

CMA: The Umpire Strikes Back?

Because I’m a rock and roll animal, I was invited to an event in London called Time to Reset: Unlocking Growth & Sovereignty Through Digital Competition. It wasn’t really clear to me why a grubby HTML monkey like me was invited, or what it was really about, but as it was in the Financial Times […]

The Code BarbarianMore Front-end Bloggersread at source

Faster SSE Responses with Async Generators and Promise.race()

Phil NashMore Front-end Bloggersread at source

Build a contact form with Astro and Resend

I try to keep my email address from appearing on public websites to avoid spam. But I do like people to be able to contact me if they have something I might be interested in. The solution for this? A contact form! This site is mostly statically generated, but as it is currently built with Astro and hosted on Cloudflare Workers , I can designate an endpoint as dynamic, use it to accept a form submission, validate the data on the server, and send it to my email inbox using Resend . In this post, I’ll show you how I built it. What it does When you visit /contact , the Astro framework renders an HTML page with a form on it containing three inputs: the user’s email address, a subject, and the message they want to send. When the user fills in the form and submits it, the browser makes a POST request to the same URL, and the server-side code kicks in. It extracts the details from the form, validates the data, and uses the Resend API to send a message to my email address. If the user didn’t include all the details, the page is rendered again with error messages and the existing content of the form so that they can correct the form and submit again. For full disclosure, I currently work at Resend, but I implemented the first version of this back in 2024 . It’s always nice when you go from a happy user of a service to working there. Let’s see how to build this. Start with the HTML Astro pages are simple to build; they start with the component script, which is effectively TypeScript frontmatter for your template, and finish with the component template, made up of HTML and other Astro components. I built my contact form as a page at the /contact route, so I started with a file at the src/pages/contact.astro path in my Astro app. The contact form then starts with the HTML: --- // Component script --- form method = "POST" > div > label for = "email" > Your email label > input type = "email" id = "email" name = "email" placeholder = "you@domain.com" required /> div > div > label for = "subject" > Subject label > input type = "text" id = "subject" name = "subject" placeholder = "Hi Phil!" required /> div > div > label for = "message" > Message label > textarea id = "message" name = "message" placeholder = "Your message" required > textarea > div > div > button type = "submit" > Send button > div > form > Setting the form’s method to "POST" but not providing an action means that it will submit to the same route that rendered it. My site is set to output as a static site, but you can enable on-demand dynamic routes and rather than prerender a static page, it will dynamically render pages and respond to POST requests. To do this, just add the following to the component script: --- export const prerender = false ; --- If your Astro site is set to server mode , this isn’t required. Set up your secrets To send emails with Resend you will need a Resend account , a domain verified with Resend , and an API key . With those sorted, add the API key, an email address you’ll be using to send the email using the verified domain, and the email address you’re sending it to (yours), to the .env file: RESEND_API_KEY = RESEND_TO_EMAIL = RESEND_FROM_EMAIL = You can then load and validate these variables in Astro config in astro.config.mjs . // astro.config.mjs import { defineConfig , envField } from "astro/config" ; export default defineConfig ({ env: { schema: { RESEND_API_KEY: envField . string ({ context: "server" , access: "secret" }), RESEND_TO_EMAIL: envField . string ({ context: "server" , access: "secret" }), RESEND_FROM_EMAIL: envField . string ({ context: "server" , access: "secret" , }), }, validateSecrets: true , }, }); This is incredibly useful as this config both validates that the environment variables are present when you build or run the application and ensures that the server-side secrets aren’t included in any bundled artifacts. Return to the src/pages/contact.astro page. You can now import those environment variables from astro/env:server . Another bonus is that they will be correctly typed. --- export const prerender = false ; import { RESEND_API_KEY , RESEND_TO_EMAIL , RESEND_FROM_EMAIL } from "astro:env/server" --- Prepare values and errors For both GET and POST requests, the page renders the current field values in the HTML. It may also need to render validation errors or a success message. Let’s set those up in contact.astro . --- type ContactErrors = { email ?: string [] | undefined ; subject ?: string [] | undefined ; message ?: string [] | undefined ; }; let errors : ContactErrors = {}; let email = "" , subject = "" , message = "" , successMessage = "" ; --- The page can be updated to show the success message if it is present or the form and any values or errors. --- // Component script --- { successMessage ? ( p > { successMessage } p > ) : ( form method = "POST" > div > label for = "email" > Your email label > { errors . email && errors . email . map (( error ) => ( p class = "form-error" > { error } p > )) } input value = { email } type = "email" id = "email" name = "email" placeholder = "you@domain.com" required /> div > div > label for = "subject" > Subject label > { errors . subject && errors . subject . map (( error ) => ( p class = "form-error" > { error } p > )) } input value = { subject } type = "text" id = "subject" name = "subject" placeholder = "Hi Phil!" required /> div > div > label for = "message" > Message label > { errors . message && errors . message . map (( error ) => ( p class = "form-error" > { error } p > )) } textarea id = "message" name = "message" placeholder = "Your message" required > { message } textarea > div > div > button type = "submit" > Send button > div > form > ) } Verify the input Next, we need to validate the submitted data. I chose to do this with zod , since it is already installed as part of Astro. Start by importing zod and defining two schemas. --- import { z } from "astro/zod" ; const normalizedFormSchema = z . object ({ email: z . string (). trim (). catch ( "" ), subject: z . string (). trim (). catch ( "" ), message: z . string (). trim (). catch ( "" ), }); const contactFormSchema = z . object ({ email: z . email ({ message: "Please enter a valid email address" }). trim (), subject: z . string (). trim (). min ( 1 , { message: "Please enter a subject" }), message: z . string (). trim (). min ( 1 , { message: "Please enter a message" }), }); Check to see if the request is a POST by checking Astro.request.method . If it is, commence the work of validating the input and sending the email. I used two different zod schemas to help with parsing the submitted data. The normalizedFormSchema will always return an object containing email , subject , and message properties, defaulting each property to an empty string. The parsed values can be assigned to the default values for the email , subject and message that we set up earlier. Parsing with the contactFormSchema does the real validation. If parsing succeeds then we have all the information required to send an email. If validation fails, we collect the errors using zod’s flattenError function and pass them to the component to render. --- if ( Astro . request . method === "POST" ) { const data = await Astro . request . formData (); const normalizedFormData = normalizedFormSchema . parse ( Object . fromEntries ( data ), ); ({ email , subject , message } = normalizedFormData ); const contactFormData = contactFormSchema . safeParse ( normalizedFormData ); if ( contactFormData . success ) { // The data is correct, send the email } else { errors = z . flattenError ( contactFormData . error ). fieldErrors ; } } Hook up the Resend API Now that the data is validated, we can send the email. It’s easiest to send with Resend using the Resend Node.js SDK : npm install resend Import the SDK at the top of contact.astro : --- export const prerender = false ; import { RESEND_API_KEY , RESEND_TO_EMAIL , RESEND_FROM_EMAIL } from "astro:env/server" ; import { Resend } from "resend" ; Then, when the data has been parsed and validated correctly, create an instance of the Resend client and use it to send the email: --- // validate the data if ( contactFormData . success ) { const resend = new Resend ( RESEND_API_KEY ); const { error } = await resend . emails . send ({ to: RESEND_TO_EMAIL , from: RESEND_FROM_EMAIL , replyTo: contactFormData . data . email , subject: contactFormData . data . subject , text: contactFormData . data . message , }); if ( error ) { throw new Error ( `Failed to send contact email: ${ error . message } ` ); } successMessage = "Thanks for your email, I'll get back to you soon!" ; } else { errors = z . flattenError ( contactFormData . error ). fieldErrors ; } --- Here we are using an email address on our own domain to send the email since we can’t send on behalf of the user using the contact form. We set the user’s email address as the replyTo property, so that when you hit reply in your email client, it goes back to them. If Resend returns an error, we throw it so that Astro responds with a 500 status and our monitoring can alert us. Otherwise, we set successMessage and render the confirmation. Spam protection I initially built my contact form like this to keep from publishing my email address on the public web and avoid getting picked up by spammers. While that worked, it did not stop another class of bots from finding the contact form and filling it out themselves. I was so excited when I got my first email from the form, and then it turned out to be spam anyway. So, while this is how to set up a contact form using Astro, there is more work to do before you publish: you need to stop bots from abusing it. Ultimately, I put Cloudflare’s Turnstile in place, though you might consider things like Google’s reCAPTCHA or hCaptcha . In another post I’ll share how I implemented Turnstile. Happy emailing This is how to build a contact form with Astro and Resend. I like how Astro’s pages allow you to do all of this in one file, and how sending the email with Resend is just a couple of lines of code. Thankfully, once I’d shut down the bots, I’ve also received some really useful emails through this form. I hope this is a helpful look at how to add just a touch of interactivity to an otherwise static site using Astro.

Bram.usMore Front-end Bloggers10 min read

Ship cleaner packages (without the ./dist or ./src folder) by publishing a subfolder to NPM

One detail that has always bugged me about publishing a package to NPM is how build output paths like dist/ can leak into the public API. Turns out, npm publish can do it, but to make it work seamlessly in a real-world project, you need a few extra pieces in place. Let me walk you through how it works.

Swizec TellerMore Front-end Bloggersread at source

We now auto-approve and merge 15% of PRs

'I've been on a quest lately to reclaim my sanity at work. The latest advancement is a bot that auto-approves and merges low risk PRs with no oversight 😈

Geoff GrahamMore Front-end Bloggers3 min read

The Front-End Community is Still Alive and Beautiful

I thought about dropping an addendum into my last post to say just how overwhelmed I am, in the best possible way, by the way all of you in the front-end community have shown up to show support, both for me and for CSS-Tricks. I started to do that but then felt a new post […]

David BushellMore Front-end Bloggers3 min read

“Programming” monitor

I’ve been rocking an LG monitor that has noticeable burn-in. The old dog takes a while to flicker into life too. I’ve had it around eight years (the Dell before it lasted ten). I think the monitor is too dumb to be spying on me but I’m due an upgrade anyway. […]

PiccalilliMore Front-end Bloggersread at source

The Index: Issue #198

You’ll miss publishers when they’re gone Yet again , the industry has been let down by DigitalOcean and their abandonment of CSS-Tricks. It's time to step up and protect publishers whose goal is simply, to educate and share knowledge. It’s official: Airline websites are slow, but they don’t have to be The great folks at Calibre just don't miss. Another great deep-dive. Gigs worth leaving the house for Nothing sounds good is a great service and they've expanded with this immense resource for finding gigs near you. BBC News RSS Feeds (that don't suck!) BBC News get a lot wrong, including their RSS feeds, so Dan has fixed that part at least. Snail racing simulator This is just delightful. A highly configurable switch component using modern CSS techniques Here's one from the Piccalilli archives that you might have missed to wrap up this issue. P.S. this is a good website from personalsit.es . Sponsor message Our huge 35% discount on all courses ends on Tuesday . Use the coupon code PRICEFALL at checkout. Don’t miss out! Save 35% on courses

Andy BellMore Front-end Bloggers3 min read

You’ll miss publishers when they’re gone

Ever since Piccalilli started to get traction, I’ve always seen CSS-Tricks , Smashing Magazine and A List Apart (among others) as peers. We all help each other behind the scenes and importantly, back each other. When CSS-Tricks was initially acquired by DigitalOcean, I was…

Geoff GrahamMore Front-end Bloggersread at source

Speaking of being a paid, professional musician, another album is coming out in about two weeks!

Remote SynthesisMore Front-end Bloggersread at source

Finding My Voice (Again)

This is a very personal post about going back to the roots of this blog to refind the the passion for writing that drove me to create it in the first place.

CSS Articles by Temani AfifMore Front-end Bloggersread at source

Extracting Grid Information Using CSS

Extracting Grid Information Using CSS Read the full article online

Geoff GrahamMore Front-end Bloggersread at source

I do like to remind everyone time to time that I am a paid, professional musician.

Andy BellMore Front-end Bloggersread at source

An RSS feed for a daily album recommendation

My music collection is ever-growing and I have a habit of listening to the same stuff on repeat. Mostly, it’s overwhelm-related because as you can see by this album covers view , there’s a lot to choose from. I thought RSS could be useful here, so I wrote a little feed that…

Ahmad ShadeedMore Front-end Bloggersread at source

Better Icon and Label Alignment

Bram.usMore Front-end Bloggers7 min read

Introducing <​rich-input>, a GitHub-like search/filter text input to embed on your site

While working on a side-project to better navigate and search through my record collection, I found myself in need of a rich search input: one that accepts free-form text alongside structured filters like artist:“Aphex Twin” or label:“Warp Records” — You know, like the one you see on GitHub when searching/filtering issues. When I quickly realized a standalone custom element for this didn’t exist yet, I nerd sniped myself into building curating one.

Dan DaviesMore Front-end Bloggers7 min read

A view from inside the Novira Cymru Premier

This article reflects my personal views and experiences as a director and media officer at Holywell Town. It is intended as a constructive contribution to the conversation around the new Cymru Premier. The expanded Novira Cymru Premier has brought 16 teams together in Wales’s top tier, creating a league with more visibility, more big occasions […]

Jeffrey Zeldman PresentsMore Front-end Bloggers1 min read

Remembrance of Websites Past

2000 was the peak year for Adobe’s website. It was a content site filled with creative how-to articles, opinion pieces, and artist interviews where you could also, if you wished, buy or get info on Adobe products. Now this is how you create a product site for a suite of creative products, I told myself […] The post Remembrance of Websites Past appeared first on Jeffrey Zeldman Presents .

Geoff GrahamMore Front-end Bloggers1 min read

Why CSS-Tricks Has Been Quiet Lately

Because I haven’t published anything to it since August 31. And no one else has either. That’s not a super long time to go silent but it is for a site that regularly publishes anywhere from 2-5 articles a week, and some of you have hit me up saying you’ve noticed. I’ve paused my work, […]

Andy BellMore Front-end Bloggers3 min read

Removing algorithmic feed slop from my life

Recently, during a very relaxing holiday in Cyprus, I had a revelation of sorts: my brain was rotting. I know this because I read a lot of books on holiday. It’s the only time I do read books! Well, I did read a lot on holiday, but the last couple of years I really struggled to…

Ana RodriguesMore Front-end Bloggers3 min read

Tell the speakers that you liked their talks

I spent a great chunk of last week at SmashingConf Freiburg and it was lovely as usual. It was great to meet some people I've only ever seen online and see old friends. And I am not going to lie - it was pretty flattering to have people come over to me and challenge me to admit…

Adam SilverMore Front-end Bloggers2 min read

Why I wait for research to prove something is needed before it’s added to the UI

Last week, a colleague gave feedback on a prototype I’m working on - a flow that helps users review a case. The UI has an accordion of documents. You can select text within each document to annotate it: Here’s what the page looks like when the accordions are collapsed: The…

DigitalA11YMore Front-end Bloggersread at source

How to Test Touch Target Size for WCAG Compliance

Has this ever happened to you? You’re scrolling through an app or website on your phone and accidentally tap a link or button you never intended to select. Or perhaps you’re trying to complete an online purchase and, instead of pressing the small “Buy Now” button, you accidentally activate a neighboring link because the controls...

localghostMore Front-end Bloggers5 min read

Turning my sad gaming PC into a media server

In 2016, I built my very first gaming PC, armed with a PCPartPicker list and a ton of Reddit research. We had some good times together: Fallout 4, The Witcher 3, Divinity: Original Sin, various Batman games. Then we got a PS4, then a PS5, then a Steam Deck - the final nail in…

Scott Hanselman's BlogMore Front-end Bloggers3 min read

Debugging my new network, when 10 Gigabit Ethernet Runs at 300 Megabits

I've been moving my home storage over to a UniFi UNAS Pro 8 as part of a larger homelab moderization . My main IRONHEART (the ultimate PC from a few years back) desktop now has an Intel E610-XT2 10GbE card, the NAS is on 10GbE, and there's a Minisforum MS-01 miniPC on the same network with a 10GbE SFP+ connection running Immich and Portainer and a few other things. Everything says 10 gigabit. Windows says 10 gigabit. UniFi says 10 gigabit. SMB copies are using the correct NIC but my file copies are running at around 100 to 200 megabits per second which is sad making. Naturally, I blamed the NAS, and the spinning rust within. The UNAS has six 16 TB spinning disks in RAID 6 and a pair of NVMe SSDs being used as cache. I'm also running Immich on the MS-01, with its photo library living on the UNAS, so there are lots of thumbnails, metadata reads, and little background writes happening. All seem like reasonable suspects. I switched the UNAS SSD cache from read-write to read-only. No meaningful difference. I stopped Immich completely. No difference. I looked at iostat ; the disks weren't saturated. We looked at SMB signing and Windows Defender network scanning. Still slow. Then I stopped testing the NAS and ran iperf3 directly between the Windows desktop and the MS-01: iperf3 -c 192.168.1.222 -P 4 133 Mbit/sec Oops. The reverse test was better, but still wrong: iperf3 -c 192.168.1.222 -P 4 -R 1.33 Gbit/sec That's weird. Now the disks, SMB, Immich, RAID, and the NAS itself were completely out of the equation. This was a Windows/NIC problem and it's weirdly asymmetrical. Looking at the Intel adapter statistics shows me... Get-NetAdapterStatistics -Name "Ethernet - 10 Gig Intel" There were nearly a million ReceivedDiscardedPackets . During one ten-second iperf3 test, the counter increased by another 268. Why? The E610 driver had its receive buffers at the default 512 , although it supported up to 4096. I increased them. I love an increased buffer. Set-NetAdapterAdvancedProperty ` -Name "Ethernet - 10 Gig Intel" ` -DisplayName "Receive Buffers" ` -DisplayValue "4096" The discarded-packet count during the next test went from 268 to zero , and receive throughput jumped from 1.33 Gbit/sec to 5.15 Gbit/sec . The transmit direction was still terrible, basically 313 Mbit/sec . The next experiment was disabling Large Send Offload (LSO) V2 for IPv4: Set-NetAdapterAdvancedProperty ` -Name "Ethernet - 10 Gig Intel" ` -DisplayName "Large Send Offload V2 (IPv4)" ` -DisplayValue "Disabled" Then I ran the same iperf3 test again. 7.03 Gbit/sec That's not a typo. 313 Mbit/sec to 7.03 Gbit/sec by changing one NIC setting. Sweet sassy molassey. LSO exists for a good reason: Windows can hand large TCP buffers to the NIC and let the adapter/driver segment them into network-sized packets, reducing CPU work. Microsoft does, however, explicitly point out that segmentation offload can reduce maximum sustainable throughput with some network adapters/configurations. LSO is usually useful, but not in this case. In my particular combination of Windows and the Intel E610-XT2, something in the IPv4 LSO path was very, very sad. I don't yet know whether this is an Intel driver bug, firmware issue, Windows interaction, or something particular to this machine, so I wouldn't turn this into random tech blogger advice that everyone should disable LSO. Measure first, cut once. Er, twice. Just stay woke. Finally I went back to the test that started all this and copied the same large file to the UNAS and Robocopy reported: Speed : 350,201,354 Bytes/sec. Speed : 20,038.682 MegaBytes/min. About 350 MB/sec , or 2.8 Gbit/sec of sustained real-world SMB writes to a six-disk RAID 6 NAS. That's much more like it. The useful lesson isn't "disable LSO." It was that when storage is mysteriously slow, eventually you have to stop testing storage. iperf3 removed the NAS, filesystem, RAID, cache, SMB and disks from the experiment in one move. Once the raw network was also slow, the problem became dramatically smaller. And, sometimes the little checkbox labeled Large Send Offload is capable of making your 10 gigabit card run like it's 2004. TL;DR - with LSO V2 for IPv4 enabled, Windows-to-Linux iperf3 managed about 313 Mbit/sec . Turning off that single offload took the exact same test to 7.03 Gbit/sec . I’m deliberately saying on this machine because LSO is normally useful and this isn’t blanket advice to disable it everywhere. © 2025 Scott Hanselman. All rights reserved.

Chen Hui JingMore Front-end Bloggers4 min read

I still like writing websites by hand

Back in 2020, I built Alex's website. He has not changed it since then. That's on him, not me. I think I first met him in 2017. It is now coming up to 10…

Ben FrainMore Front-end Bloggersread at source

Well done AI, that’s the end of the honesty boxes

For as long as I can recall, there's been a 'thing' in parts of the UK – honesty boxes. As part of our (once) high trust society, people put their 'wares' – whether that be cakes, jams, vegetables etc – at the end of their driveway, with an 'honesty box' for you to deposit the […]

Manuel MatuzovićMore Front-end Bloggers12 min read

My HTML boilerplate in 2026

Every element I use for the basic structure of a HTML document, with explanations why. Five years ago, I shared the HTML boilerplate I use for most of my projects. Since then, a lot has happened in HTML. It's time to give it an update. My boilerplate This is the final document.…

Monica DinculescuMore Front-end Bloggers3 min read

Classic dopamine economics

I keep forgetting to write a post. Instead what happens is I leave myself little bread-crumb trails of notes (“chitaru shiota exhibit; can’t relate”, “birdhouse craft”), like a woman fleeing a crime scene that she will later have to investigate. They just sit there. A little…

Big MediumMore Front-end Bloggersread at source

The Right to Resist Optimization

“If machines are great at the things we’ve long thought to be uniquely human, maybe we’ve been misunderstanding humanity all along.” This weekend I picked up a physical copy of The Humanist Review of AI at Casa Magazines , a collection of essays on AI by technologists, academics, and philosophers compiled by Mustafa Suleyman, the head of Microsoft AI. Audrey Tang’s essay, AI and democracy: the right to resist optimization , stood out for the way it reframes a conversation that’s become a little bleak. The reassurance we keep hearing goes something like this: Sure, LLMs can write songs and novels and will probably make movies soon, but don’t worry—humans will always have taste . It’s a pretentious consolation, and probably not even true. A probabilistic system armed with design principles can make evaluations of taste just fine. For better and worse, humans are no longer unique for having ideas or for writing them down. What remains unique is our ability to stand behind our creations—to be accountable for them and to love them. People flock to IMAX theaters not out of love for the film format, but because a director like Christopher Nolan made a stand for it. It’s the person behind a creation that gives it meaning; the audience trusts him . Tang, like our own Josh Clark, argues that Turing’s imitation game has been a trap from the start. We shouldn’t build machines to imitate us—and we shouldn’t evaluate ourselves like machines either. She points to social media, where content is ranked by engagement, as a case of humans optimizing themselves against a machine’s metric. It’s hard not to think of education, where standardized tests reward answering questions on short passages, so classrooms assign excerpts instead of books—and students stop reading books at all. We keep building the very world we say we’re afraid of. So what should we be cultivating instead? Tang offers a starting place, naming the skills she sees as essential for the future: originality, expression (getting your ideas across to other people), and morals. It pairs well with the argument we make in the first chapter of Sentient Design —that there have always been many kinds of intelligence, and the arrival of machine intelligence should sharpen rather than diminish our sense of the human ones. “What ways of becoming human should education cultivate when many forms of performance can be automated?” My answer is that education must move away from ranking compliant output and toward cultivating interpretive courage, collaborative range, ethical imagination and the capacity to participate in revision without losing face. The RIght to Resist Optimization | The Humanist Review of AI

Max Stoiber's EssaysMore Front-end Bloggersread at source

Build something to disagree with

A rough first version gives everyone the same thing to react to. Make ideas concrete before debating them.

Darek KayMore Front-end Bloggers5 min read

Sabbatical #18: Great Ocean Road

A travel journal from my visit to the Great Ocean Road, Australia.

Josh Comeau's blogMore Front-end Bloggersread at source

Getting Started with Anchor Positioning

For decades, one of the most notoriously-challenging problems on the web has been sticking one element to another element, for things like tooltips and nested menus. The CSSWG has decided to provide a first-class solution to this problem, and it’s pretty friggin’ cool! In this tutorial, I’ll share the most useful parts I’ve found from this modern CSS feature.

Modern Web Development with ChromeMore Front-end Bloggers4 min read

The web the model sees

A run of recent posts on aifoc.us that I did not plan as a series but which turned into one. The thread is that the web a model sees is staler and thinner than the one you ship, and I have mostly been trying to find ways to see it.

swyxMore Front-end Bloggersread at source

What America has meant to me

Every time I have given up on America, it has been a mistake. And yet, America has never, ever given up on me.

Salma Alam-NaylorMore Front-end Bloggers12 min read

Goodbye, forever, probably.

Why I’m leaving developer relations, and why I’m not telling you what’s next.

Kitty GiraudelMore Front-end Bloggers26 min read

ProMe, a TTRPG Companion App

A rather extensive design and technical walkthrough of my new project, ProMe, a companion app for the game “The Protector’s Memories”.

Jack FranklinMore Front-end Bloggers5 min read

AI loops: who pays for the tokens?

A recent trend in AI has become this idea of "loops". Rather than you doing prompting and working with the AI to design and implement, you instead give it a higher level goal and let it roll. You build a system to let the AI make decisions, build and verify its work, all with…

Aleksandr HovhannisyanMore Front-end Bloggersread at source

How to Use an Android Phone Camera in OBS

Mirror your phone's camera to your computer with scrcpy, and record it with OBS.

Thoughts From EricMore Front-end Bloggers7 min read

In situ Syntax Highlighting in macOS Applications Like Keynote

If you do code-heavy talks in Keynote and want to syntax highlight the code, this might be for you.

Ashley NolanMore Front-end Bloggers2 min read

Hello again (and a new look)

After far too long a break from writing, I've given my site a fresh coat of paint.

Mark's Dev BlogMore Front-end Bloggersread at source

My Thoughts on AI, Part 2: Agent Setup, Workflow, and Tools

Introduction Hopefully you've already read Part 1: Fears, Opinions, and Mental Journey so you understand how I ended up with this mindset and approach. Or maybe you saw how long it was and just immediately bailed out :) Welcome either way. Part 1 was the braindump. Story, thoughts, feelings. Here's the part that probably more of you are interested in :) What my actual agent setup and dev workflow looks like. How I approach using AI for writing code, what tools I use, how I have them configured. You can see a cleaned-up version of my config at https://github.com/markerikson/opencode-config-example - follow along in that repo for the pieces as I describe them here. As I said in Part 1: I am not trying to sell anything, change anyone's mind, or say I am an expert. I don't have the answers. BUT I DO HAVE SOME OPINIONS NOW! :) I'm not saying that everybody should follow them, but this is where I've landed. Introduction Agent Setup Overview Agent: OpenCode and CodeNomad Model: Opus 4.6 IDE / VCS: VS Code and Fork Daily Development Workflow Parent Orchestrator Session for Project Management Subtasks for Development OpenCode Config Permissions Management File Reads Code Structure and Search Context Management Session History and Search Dev Plans Repo and Management Scripts Plan Management Issues Personal Dev Plans Repo Workflow Artifacts devplans.ts Automation Script Progress Updates and Subtask Handoffs AGENTS.md Commands and Skills Project Setup Progress and Subtask Management Task Tracking Other Commands Other Skills Config Improvement Process Potential Future Workflow Improvements Final Thoughts Agent Setup Overview Agent: OpenCode and CodeNomad I've settled on OpenCode as my agent of choice. I quickly decided I couldn't use TUIs for any development work. I've always been a GUI / IDE user anyway. I briefly tried both Claude Code and OpenCode TUIs, and bounced off hard . It's not that I am against terminals or CLI tools, I use a lot of them! But I also like having multiple tabs, my choice of coding font, syntax highlighting, and even just straightforward copy/paste abilities. Maybe I gave up too quickly, but I really struggled to get any of the TUIs to do that. I know Claude Code is the market leader for coding agent. Maybe if I gave it another shot I'd find some use out of it. On the other hand, I've always been enough of a tinkerer that I do customize my tech and tool setups. Yeah, I'm a lifelong Windows user, but I've got a comprehensive suite of tools and techniques and customizations I've built up over the years. I use Android because I want to fiddle and customize and configure the system the way I want it. OpenCode fit that bill when I tried it. It works well for me, and I'm happy with it. So if I'm not using the TUI, what's the alternative? I found a great third-party OpenCode web UI called CodeNomad . Tried it, loved it, works great . My personal laptop is all Windows, but my day job is WSL within Windows. I can start CodeNomad's server from within the WSL environment, browse to the web UI from the Windows side, and not have to deal with any cross-platform filesystem limitations. I can have multiple sessions open in one browser tab (with a tabbed UI inside of the page), or have multiple browser tabs talking to the same server. I get full GUI copy and paste, good tool and edit/diff views, and a lot more. So, I now am actually doing my primary development there in CodeNomad. Not an IDE. Model: Opus 4.6 We primarily use Anthropic models at work. Honestly I've never even tried Gemini / Codex / GPT-whatever / Kimi / etc. I've really only used Opus and Sonnet. Opus 4.5 and 4.6 have both produced great results for me. Sonnet is decent. There's probably a lot I'm missing. I don't want to burn a lot of time trying out models and running evals every few days, or switching back and forth just to eke out another 1% gainzzz. That's fine. I just need something that works well enough for me and that I'm comfortable with, and Opus 4.5/4.6 have fit that bill perfectly. (As of writing, I haven't tried out 4.7, and I'm kinda scared to. Too many weird reports about its behavior.) Also worth noting that I'm using via API, not Max plans. IDE / VCS: VS Code and Fork I've been using VS Code as my editor and IDE of choice for many years. It's not perfect, but it works. Ironically, I now use it more as a file and diff viewer than as an editor :) I mean, I am writing this blog post itself in VS Code. But for daily dev work, I do the session driving in CodeNomad in the browser, and then I flip over to VS Code to review and commit the diff. Honestly I don't like VS Code's Git panels and UI! They feel very awkward. The diff hunk staging view in particular is bad , especially compared to other IDEs like WebStorm or purpose-built Git GUIs. (Think I saw they maybe made some improvements in the last couple VSC releases - I haven't updated lately.) Fork has been my Git GUI client of choice for the last few years. Excellent, absolutely worth it. The issue here is that all my work repos are inside the WSL environment. It's technically possible to point Fork at a cross-platform WSL share of the repo folder, but the file changes tend to not refresh well, so I've mostly fallen back to just doing Git diff operations in VS Code. I think there may be some Fork tweaks that make it work better in WSL - haven't dug into those. I do know there's some Linux-native Git GUIs out there, I just haven't spent time evaluating those lately either. Daily Development Workflow My workflow is: A long-running "Orchestrator"-mode parent session with the overall context for the major development work that I'm doing. This session's job is solely to spawn child subtasks where I do the real work interactively. Child subtasks dedicated to some subset of the actual work. This may be codebase research and exploration, feature planning, or actual code development. These are highly interactive - I spend all my time discussing, directing, and driving these subtasks. The core principles here are: I'm in control. I'm the one who knows what I'm working on and what I want to accomplish. I decide what the tasks are, and how to accomplish them. I decide when to move from research to implementation, when to keep digging further or pivot a session from the original goal to a side quest, and when a task is actually done. I need to be mentally engaged, understand what is happening and why, review the code, and actually commit it when I'm satisfied. Most of the time I have one active parent session, and 1-3 active subtask sessions. I do bounce between the active subtasks and context-switch. Normally these are all still part of the same actual workstream. I have tried running sessions for 2-3 different workstreams at the same time, and it's tough, so I mostly stick with one workstream at a time now. I'm sure a lot of folks will say "but that's so slow, you could be moving so much faster!". I know. That's the point :) I'm intentionally choosing to limit the workflow to what I can manage in my own head, so that I am still fully mentally engaged and building my own understanding of the system. I also specifically aim to keep as many of the moving pieces as deterministic and scripted as possible, especially for things that can be automated like file management tasks. Parent Orchestrator Session for Project Management I start every new parent session by running my /context command. This tells the agent to read current-focus.md and the last 2-3 days worth of progress file entries. That way it has baseline knowledge of the current repo, recent work, and what I'm actually working on. From there, I give specific instructions for whatever I'm working on. This is usually several paragraphs of "here's the overall goal I'm working towards today, here's what I'm specifically trying to accomplish, here's how I want to get there". Then I specifically instruct the orchestrator parent session to spawn one or more subtasks to do the actual work. It then sits and waits for those to complete. OpenCode subtasks are essentially async functions with a return value, where the subtask can return some message to the parent. However, the child often returns a response with the initial result, but I then keep driving the subtask much further and do a lot more work, so the initial response doesn't capture the actual work accomplished. Another problem is that if I don't like what a subtask is doing and hit the "Stop" button in that session, it cancels the response to the parent and returns an empty value. The orchestrator has a bad habit of seeing that empty response and saying "oh, the child didn't complete, let me spawn another subtask to pick up where it left off". I've had to specifically instruct it " never spawn more subtasks until explicitly told to do so !" My instructions for spawning a subtask are surprisingly lax in some ways. I've done a bunch of work to give the orchestrator context on what I'm doing, why, and what the next goal is. At that point, I often say "spawn a new subtask to....", and leave most of the details up to the orchestrator. Sometimes I'll give fairly specific bullet points: "have the child read files A, B, and C for context. Then, come up with an initial plan to build this feature, and pause. I'll review and confirm implementation." Other times, especially when the parent session has gone on for a while and the orchestrator has already spun up a half dozen child tasks for earlier steps, I might just say "yep, kick off phase 3", but by that point I have high confidence that we're on the right track and there's an established pattern for what we're doing. I've had some parent sessions last up to a couple weeks as I'm focused on an ongoing effort. Other times it might be a fresh parent session each day. Either way, it's about the overall goal that I'm working towards right now. Here's what a typical orchestrator session looks like - the tail end of the /context being loaded, and my initial instructions for what I want to do in this session. Subtasks for Development Subtasks are where I do all the actual work. I let the orchestrator write up the full prompt for child subtasks. This is normally enough to get the task started, read a bunch of files, orient itself, and "get the full picture" :) The entire subtask session from there is highly interactive. If it's a research or planning session, I review the results and provide feedback on the output. If it's a coding session, I look at the initial plan for the changes and provide specific guidance and direction. I want to be very sure both me and the agent understand what we're trying to do, why, and how. I'll provide guidance on specific techniques to use, ask questions about edge cases and ideas, have it expand my own thinking as much as possible. I only tell it "okay, go make these changes" once I'm very sure about the intent. I usually try to keep an eye on the agent as it's making edits. I don't want to have to explicitly approve operations as it's running (and we'll talk about permissions management more later), but I at least want a sense of what it's doing and if it looks like it's heading in the right direction. If not, I'll mash the "Stop" button and course-correct. Once the edits are done, I'll run / test / etc as needed. I also try to review the code as much as possible. I then do the actual Git commits myself - staging, messages, commits. In a lot of ways this is "one developer workflow, but with extra steps". Fair :) The speedup comes from the agent's ability to do the research for me, expand "here's what I want to do" into a plan for how to do it, and then turn the "what and how" plan into specific code edits faster than I can. My fingers are fast, but my brain always had to work through the intent first. Here, I get to focus more on the intent and the desired behavior, and let the AI define most of the code-level changes to accomplish that. I frequently drive subtasks for extended periods of time. I try to keep a given subtask on track, but sometimes I end up veering into side quests because it's easier to keep going here rather than start up a whole new subtask and load context for the freshly discovered problem all over again. Early on, this definitely led to hitting session context limits, which forced me to create commands to reload an entire session's transcript and run those after the entire session got auto-compacted. Now that I have the OpenCode Dynamic Context Plugin and better tools and instructions for reading files, it's rare for even an extended session to end up over 100K context. The agent is very proactive about compressing recent tool calls and discussions in order to keep context manageable, and this seems to produce much better results than a big-bang "summarize the entire session so far" compaction. (Granted, sometimes it over -compresses recent chunks of the discussion and gets a bit confused on what we were doing :) ) Once I am actually ready to wrap up a given subtask, I specifically manually trigger the two record keeping commands. /progress tells the subtask to append a new "what did we accomplish?" entry to today's progress log file. /subtask-complete writes a standalone version of that update with more details, suitable for the parent orchestrator session to read. I then switch back to the parent session and run /subtask-resume , which reads all outstanding subtask handoff files so it knows what the N most recent subtasks accomplished. There's some duplication here, but I view it as /progress is for the permanent record of what I did today, /subtask-complete is the function return call results for the subtask to ensure the parent session knows where things stand. Here's a typical child subtask, in this case for working on Replay MCP's ReactComponent MCP tool. First, the initial orchestrator-provided prompt: Then my responses to some of the agent's analysis and implementation suggestions: and finally nailing down some design decisions: OpenCode Config I have a very customized OpenCode config and setup that I've built to directly support that workflow. Permissions Management I don't YOLO or --dangerously-skip-permissions . I run my agents directly on my own machines, no sandboxing. That also means that I need some amount of safety checks on commands that get run. I do want to eliminate as many unnecessary permissions prompts as I can. Even if I'm watching and directly driving an agent session, it does get very annoying to see a bunch of permission prompts in the chat session blocking and waiting for my approval, when they're pretty clearly harmless. So, as I said in Part 1: determinism. I generated a custom OpenCode plugin to auto-approve as many Bash commands as reasonable based on the contents. It's decently sophisticated. There's a very long regex-based list of known safe commands and subcommands that get auto-approved, as well as a similar of known dangerous commands that will get blocked. It actually does Bash parsing and tries to deal with heredocs and command substitutions. The bigger question is how this actually works with OpenCode at all. OpenCode refactored their whole permissions and plugin system a few months ago. There was already a "permission.ask" event trigger that allowed plugins to actually return a result, but in the refactor that got disabled. I filed an issue, other people have filed PRs, those haven't been merged. So, I've been maintaining a small local fork of OpenCode that reimplements that functionality. That allows my plugin to actually manage permissions. I saw Claude Code now has a "not quite YOLO but let the agent self-approve commands" mode. That's nice, but why rely on more agent calls and more tokens when you can just parse and manage the commands deterministically? :) The big loophole here is dynamic scripts - bun -e , node -e , python3 -c . Agents love those. They're really useful! Don't even bother writing a script file to /tmp , just bun -e "someCodeHere()" and get the results. Really useful when introspecting some data files. Obviously this means the agent could trivially smuggle through code that starts nuking folders or uploading my secrets to the mothership. In practice: I'm not sure I've seen my agents actually try to run a command that would be truly destructive. I've got these guardrails in place, and to some extent I haven't seen evidence that they're necessary . The permissions plugin does try to do some additional scanning of inline eval scripts for blatantly obvious calls like unlink() and flags those entire commands for approval. It's a tradeoff I'm happy with at this point. File Reads OpenCode has a Read tool, same as every other harness. It works. But agents default to just reading massive amounts of file text, over and over, both to learn the codebase and to remind themselves of what they've seen already. I found a file read caching tool called cachebro that is available as an MCP. It checks file access times and hashes, and if the file hasn't changed since the last read, the tool returns a message saying "this hasn't changed". I've told my agent to default to using cachebro for file reads. Unfortunately, the cachebro MCP read tool doesn't interact with OpenCode's own "file last read" logic. That meant that if my agent tried to write to a file, OpenCode would return an error saying "you must use the Read tool first", and then it would have to actually call Read and it's all a waste of time and tool calls and tokens. So since I was already maintaining a small running fork of OpenCode to handle the "permission.ask" event, I just added another commit to the fork that exposed OpenCode's "file access time" calls into the Plugin interface. Then I built my own cachebro plugin that watches for cachebro MCP tool calls, and gets/sets the file read times so OpenCode knows that file's been read. Works great. Code Structure and Search Per above, agents default to just Read for everything. This is awful for codebase exploration. Read 10-15 files just to trace dependencies and imports. Lots of extra wasted code text bloating the context. Don't do this! I've tried out a half-dozen different MCP tools that do full codebase parsing and provide tools to query structure, dependencies, outlines, and relevant chunks of code. Currently, I use grepika and tilth via MCP, and get great results. Highly recommended. I again have my AGENTS.md with instructions to always use those as the primary file reading options, and I consistently see my agent using them and intelligently only loading relevant parts of files. I've also previously tried ckb (CodeKnowledgeBase). It's got a massive set of tools for querying structure and blast radius, and I've wanted to use it, but I've run into a few problems with indexing not working or tool calls timing out. Been playing with ariadne , and I'm constantly keeping an eye out for other codebase indexing tools. Context Management Per above, I do all my work exclusively in subagent sessions that I drive myself. This means my parent orchestrator session doesn't have any issues with maxing out the context window and needing to compact, but the child tasks do. I did pretty frequently hit 160-170K context and run into auto-compaction. I hated it. The auto-compact summaries were adequate , but inevitably there'd be a bunch of details I cared about that would get lost. At first I built some dev scripts commands that would read the OpenCode session JSON files, filter out tool calls, and export the meaningful message contents out as a complete Markdown file. I built a /session-reload command and skill that would force the agent to run the export command, read the entire exported transcript, and then pause. However, grepika really reduced the amount of code that was bloating context. That helped. Then I found the OpenCode Dynamic Context Pruning Plugin . Instead of waiting until your session is almost at full context and then doing a big summary of the entire session as a replacement, which would be really lossy, it gives your agent a compress tool that it can use at will to compress and summarize chunks of your session (like a bunch of exploration file reads, or earlier messages as you switch focus to a follow-up effort). This means there's more of the session messages that stay exactly as-is, there's less time spent compacting, and it's much rarer that one of my subtask sessions actually nears max context and has to compact everything just to reset. Ironically, I really found a great working combo of tools right before Anthropic shipped 1.0M context windows by default for everyone :) But seriously, in the last couple months since landing on this combo of tools and plugins, I find that even a very long-running technical subtask session rarely gets above 100K context, thanks to grepika and cachebro minimizing file reads and the agent happily compressing earlier chunks on the fly. I know this does mean you might have some cache invalidations that could bump cost because it's no longer just the one latest message at the end of the session that hasn't been seen by the server. But on the flip side, keeping the actual total context size smaller seems to pay off, and it's not like the agent is calling compress every other turn. I was using the rtk Rust CLI tool to automatically compress the output of tools like grep to save on tokens. Unfortunately I saw too many cases where the agent got stuck in a loop trying to call grep , rtk grep would change the output too much, the agent got confused and tried again, and it just wasted time and tokens. So, eventually disabled rtk . Might come back to it at some point. Session History and Search As mentioned, I initially built some custom scripts that would find the right session JSON files and export as separate Markdown transcripts with just the message text, no tool contents. OpenCode 1.2 switched to storing sessions internally in SQLite. I held off upgrading to 1.2 for a while because I had all my custom scripts and commands and didn't want to take the time to rewrite them. But, I finally did, and that actually simplified things quite a bit. My previous /session-reload command told the agent "run the export session -type command, look at the list of most recent sessions it gives you, find what you think is the right Markdown file based on your own context and instructions, and read that". Kind of awkward, left room for error. After rewriting my own session history plugin to read from OpenCode's own plugin/internal client.session object, that all went away. Instead, I have a reload_session tool that can just directly grab the list of messages from the plugin API using the session ID, filter, construct the Markdown contents, and directly return it as the tool call result. No file path or "match up the session" steps needed. It was also trivial to throw together search_sessions and read_session tools. They're currently pretty dumb and just do basic regex searches on session contents, no vector DBs or similarity scores or anything. But they're pretty useful even in that form. Dev Plans Repo and Management Scripts Plan Management Issues During my initial couple months of using KiloCode, I found myself with the same proliferation of Markdown plan files that we've all run into. So where do those go? The agent wants to default to writing them to the root of whatever repo you're working in. I made an effort to redirect it to write them to a ./docs folder, although in our main backend repo that already existed so I had to resort to ./docs/merikson . Some of these plan files were worth committing or preserving, even if just for my own reference later. Others weren't. So where do the plan files go if this is a shared repo? I really didn't want to pollute a shared repo and commit history with dozens of my own personal semi-ephemeral plan files, or even the maybe-more-widely-useful architectural writeups. Personal Dev Plans Repo I decided the best option was to set up an entirely separate personal development doc knowledge base repo, just for myself. I dubbed it dev-plans . That would give me a consistent place that I could store all my own Markdown artifacts and knowledge, commit it, save those for future reference, and not pollute the shared actual repo Git history. My dev-plans repo structure is: /dev-plans /personal /redux /$PROJECT1 /architecture /features /progress-updates /research /subtask-handoffs current-focus.md QUIRKS.md /replay current-focus.md is intermittently updated whenever I feel I'm significantly shifting gears or focus on a repo, or completed a major chunk of work and the "what I'm working on now" section should reflect that. QUIRKS.md is more of a project structure, known actual quirks or patterns, things to remember document. Every file other than the two fixed current-focus.md and QUIRKS.md files starts with a YYYY-MM-DD prefix, such as features/2026-05-06-some-feature.md . I've got some archival scripts set up to move older documents from the flat folder structure into a nested YYYY/MM structure to keep things a bit more readable, but haven't done much with that yet. I suspect I'll need some tools to help index the documents when I do that. Workflow Artifacts architecture is meant to be longer-lived explorations of the codebase structure and patterns. Full-blown "what do we know about this project", vertical "trace through this feature or data flow path", reference material features is WIP development plans. Here's the next thing we're going to build, we've turned this into a concrete plan, use this as the basis research is more of a grab bag. Sometimes it's scanning the codebase for concepts, other times it's research dives through Github and NPM for relevant concepts progress-updates is the daily dated appended progress entries, subtask-handoffs is the individual handoff files that get automatically archived as soon as they're read devplans.ts Automation Script I've settled on using Bun with TS scripts for a lot of my personal needs and utilities. I've tried to automate a lot of the common tasks I saw consistently pop up when interacting with the dev-plans repo. I created ~/.config/opencode/scripts/devplans.ts and have fleshed it out over time with a variety of commands the agent uses all the time. Currently, that provides: /** * devplans.ts - Unified dev-plans CLI helper * * Commands: * devplans info Get project mapping info (no side effects) * devplans progress Get/create today's progress file (with late-night date logic) * devplans progress list [n] List n most recent progress files (default 3) * devplans progress append [file] Append entry from JSON file (deleted after read) or stdin * devplans handoff create [slug] Get path for new handoff file * devplans handoff list List files in pending/ * devplans handoff move [file] Move from pending/ to completed/YYYY/MM/DD/ * devplans handoff consume List, read, and move all pending handoffs * devplans doc create Create dated doc (type: feature|arch|analysis|issue) * devplans doc list [n] List docs of type (default 10) * devplans session extract Extract recent sessions, list newest 10 * devplans archive Archive old files to folder/archive/YYYY/MM/DD/ * devplans archive --all Archive all doc folders */ These deterministic commands save a lot of steps that the agent would have had to run itself to figure out what dev-plans folder path matches the current repo, creating placeholder handoff files or documents, and updating progress docs. Most of my OpenCode slash commands start with some variation of "Run `bun dev-plans.ts some-command". I also have a JSON file with folder mappings for my usual repo checkout paths in my personal laptop Windows and work laptop WSL environments. That way the script can just read those mappings and use the known paths. Per the Workflow section, I have a /init command that helps me set up the scaffolding when adding a new project to dev-plans . Progress Updates and Subtask Handoffs The most used subcommands are for progress and handoff . My original /progress command told the agent to actually read today's progress file completely, then append a new section. This became an O(n^2)-type problem as the progress file kept growing over the course of a day. Just reading the file would bloat context, and this was especially bad when the subtask was already bordering on max session context. Now, devplans progress prints JSON output with today's progress file path, but also creates a placeholder temp file and provides that path as well. The agent is instructed to overwrite the placeholder with its actual update, and then runs devplans progress $TEMPFILE . The script then deterministically appends the new section to today's progress doc so the agent didn't have to read that file itself. Similarly, /subtask-complete in the child tells it to run devplans handoff create creates a target file path that the agent can write to, and then when I run /subtask-resume in the orchestrator parent it runs devplans handoff consume which auto-prints all pending handoff files immediately and then auto-archives them. This saves multiple steps of the agent fumbling around. The devplans commands also intelligently handle dates and timestamps - automatically generating file paths with timestamps, figuring out today's progress file, and even assuming that any updates between midnight and 6 AM really belong on "the previous day's progress file" because it's likely I was working late into the night on something. There's still a lot of manual trigger behavior in here, and again I'm good with that :) AGENTS.md My AGENTS.md file is currently about 250 lines (and writing this post forced me to review it and do some reorganizing and condensation - it had gotten rather crufty). It starts with a short personal overview: who I am, day job at Replay, OSS work on Redux. Major sections include: Interaction patterns: I specifically instruct the agent to be keep its responses short and direct, and avoid sycophancy. That includes both descriptions, and acknowledging my instructions. Thinking and problem solving: use critical thinking and be skeptical about assumptions and correctness; stop and rethink problems if stuck; do research, not trial-and-error; state plans and wait for confirmation to check assumptions and confirm user intent Git: never commit, always stop and wait for me to review changes Personal tool environment: personal vs work laptop setups, path management, use Bun for scripting not Python Coding standards: TS usage, running tests, minimizing comments Code navigation: minimize context loading at all times; use grepika and tilth for navigating code, cachebro for other file reads Tasks and behavior: manage todos and progress; be careful counting completion; manage current context Dev plans workflow: use devplans.ts for file management; use of QUIRKS.md and other rules files Subtask spawning and workflow rules: only spawn subtasks when told; verify completion; I make no claims that my AGENTS.md is optimized, correct, or a model to follow :) It's just what I've evolved through my own usage. Commands and Skills Project Setup I have some commands and skills for initial dev-plans setup for a new repo - the usual /init and /architecture -type commands that scan the codebase, do a writeup of the details, do some initial architecture description docs, etc. Don't do those often, nothing special there. Progress and Subtask Management As described above: /progress specifically instructs the current session to create a new entry in today's progress log. /subtask-complete tells a child subtask to record a separate handoff file that can be used as a "return value" to update the parent orchestrator session, /subtask-resume has the parent session read all outstanding handoff files to know what got done. Task Tracking For most of my day to day work development, I've gotten along fine without any explicit external task tracker. I'm the one who knows what I'm working on. For a couple projects, I've tried using dex as a lightweight external nested task tracking CLI. (Think beads , but with way less slop.) It's worked pretty well! I've got a skill that instructs the agent how to use dex efficiently. I'd have the orchestrator session run dex commands to see where we stand in terms of task status, then pass dex task IDs to a subtask and tell it to mark that task as in progress. Similar to avoiding having the agent do any Git commits, I told it not to mark any dex tasks as complete until I explicitly instructed it to do so, and have a /dex-complete command to help with that. Other Commands /session-reload extracts the entire message history of the current session and returns it. Per above, this used to be writing it all to disk as a Markdown file, now it just constructs the transcript in memory from the DB entries and returns it as the tool result. I use this much less frequently now thanks to the OC Dynamic Context plugin and use of better file search tools - now that I have those I rarely get close to 150K+ context even in a long running subtask session. I wrote my own AI-powered code review tool called diffloupe that tries to compare stated change intent vs inferred change intent, and reviews for both bugs and intent mismatches. I have a /code-review command that tells the agent to review the current changes by triggering diffloupe and then report on the results. Other Skills I do have a variety of skills available: several for frontend design and UI work advanced TS patterns Replay CLI and MCP usage Architecture design and feature planning File / codebase search tools Assorted skills explaining how to use diffloupe , dex , and gh Config Improvement Process After I did my initial config and workflow development efforts back in December, I've alternated between periods of leaving it exactly as-is and focusing on just doing work, and getting annoyed with parts of the workflow and making improvements. Generally it's noticing that some particular pain point is becoming an issue - that I keep having to repeat a particular set of instructions, or that part of the workflow could be automated via devplans.ts , or trying out a different codebase indexing plugin that I found. At that point I'll go spin up a new session inside my OpenCode config repo itself, talk through the problem space, and develop the changes accordingly. As a relevant example, just reading AGENTS.md to write this post showed me how the content had gotten somewhat bloated and disorganized. So, I just started up a new session to review it, described my pain points, and the agent suggested a slimmed-down version that retained the key points, moved some of the detailed file tool usage instructions out to a separate skill, and better organized the "how to communicate" and "daily workflow" sections. Done. Potential Future Workflow Improvements I'm pretty happy with the tooling and workflow that I've got right now. The one area where I feel I'm lacking right now is that longer-term memory and context. The system I've got is great for "what is the repo we're working in?" and "what's the current set of tasks?", but I'm finding I have to do a lot of work to dig up other recent sessions where some decision was made or a research document was generated, and feed those back into the current session. I need something that helps index or scan generated planning and progress files and dynamically feeds in relevant results to the current session, or MCP tools that the session can use to scan already-indexed files. I also don't have any kind of automatic "scan recent sessions for common patterns or corrections or learnings, and extract workflow improvements" system. I do instruct agents to include possible learnings in the progress and handoff artifacts, and sometimes those trickle over to updates to QUIRKS.md , but I feel there'd be value in the automatic review process. I am very happy with grepika and tilth for codebase exploration over just reading files manually. I can imagine it would be nice to somehow preload more of the codebase into a given session so it doesn't have to re-explore some of the same files each time Code review and ensuring intent are still hard. diffloupe has been useful for doing some review checks. I intended to add my own full code review UI to it, but got distracted and never got back to that. I've bookmarked a bunch of other code review tools and may still investigate some of those. Final Thoughts 6000+ words, and this was with me deliberately avoiding going into full amounts of technical detail :) So there you go. See the example config repo for the actual commands, scripts, and setup. No idea how many people will end up going through here, but as always, hope this info was useful! And more than anything else: whether you use AI to write all your code or write it by hand, I hope that you can find a workflow for yourself that is sustainable, maintainable, understandable, and safely productive.

Set StudioMore Front-end Bloggers2 min read

Astro is our preferred front-end platform

 We’re not usually ones for welding ourselves to a platform or technology, aside from web standards like HTML, CSS and JavaScript. Part of what makes us so…

Harry CresswellMore Front-end Bloggersread at source

Designing the Morpho album artwork

Matt and I have been creating artwork for his music for almost 12 years now. It’s a collaboration I’m immensely proud of, and one that offers a welcome change of scene from my day-to-day job of designing and building websites. Morpho , released on Sound Records in November last year, is our most recent project. Our 12th vinyl release and the 1st Matt is releasing using his last name, Benyayer, instead of his pseudonym, Dark Sky. Now, I must admit, I’m no print designer. And, to be clear, this is my one and only what I’d call “graphic design” gig. However, I now find myself in a position where I have a decent amount of experience creating music artwork. More specifically, artwork for records pressed onto 12" vinyl. With that in mind, I figured it might be interesting to share some of the process that went into making the artwork. Planning Projects always start life on WhatsApp, where Matt and I will discuss all sorts of ideas for concepts that somehow resonate with the music Matt has created. For this project, it was important to create something that felt connected to the artwork that we’d already designed for the singles making up the album. A similar vibe, but somehow different at the same time. It had to feel bigger, more impressive, like a season finale. At the start of a new project, Matt creates a shared Google doc, which tends to evolve as we sculpt our rough ideas into a cohesive direction. The document includes the project objective, themes to explore, information that needs to be present on the final product – think track listings, record label logo, catalog ID – and any technical notes that might be useful, such as colour options for the vinyl, who is printing it, and so on. Not a creative brief in the strictest sense, but something not far off. Once we land on a concept that feels right, all other ideas get scrapped. Any references to those ideas get moved to the bottom of the document, for future reference. But, this usually doesn’t happen before we‘ve explored a whole bunch of ideas first. So let’s get into that next. Research Once we have some rough ideas in mind, it’s time to explore them further to see if we can turn any into a solid concept. A large part of that involves going down the rabbit hole, usually online, to research subjects as much as we can. Early in the process we’ll set up a mood board to collect visual references. These might directly relate to a concept, or simply reference a design style or technique that we think could work well and want to try out. Much like the creative brief, we’ll refine the mood board as we start to make sense of our ideas and land on particular concept or direction to explore further. The goal is to get some inspiration for how a concept might translate into something visual. Our wild ideas are usually tamed by what the label is prepared to pay for. No surprises there. So, another important part of our research is to consider what’s possible within the budget, as well as to identify any creative constraints that may cause issues further down the line. We’ll consider print and vinyl pressing techniques, materials we could use, and so on. At this point, we’ll reach out to potential printing partners to discuss our ideas and figure out what’s possible. We’ll also request card stock samples to help us decide on packaging weight and finish. It’s important to get an idea of these things early on. That way we hopefully wont end up designing something that isn’t feasible to create in physical form. Lucky for us, Sound Records had a decent budget and were open to doing something a little different. This gave us a fair amount of creative freedom and presented a good opportunity to work with a laser cutter. We’d been keen on the idea ever since spotting the artwork for Cascade by Bambounouu a few years back. Concept development After pursued a few dead ends, I received the following message from Matt: ”…it could be interesting to look at symmetry in nature and take inspiration from it. Maybe deconstructing and repeating the body parts of a butterfly could be a something to look at. Could be super subtle. Utilise forms found in nature to enhance the function of the design 🤔. Butterflies symbolise transformation and rebirth, which connects to this new project well and the process I’ve gone through moving from Dark Sky to Benyayer.“ This one had promise. We’d worked with symmetry before on Cold Harbour EP . The artwork was based on a photo Matt had taken of Barrier Block , the brutalist style housing estate in Brixton, South London. Exploring symmetry in nature felt like a nice evolution, yet a fun little throwback to 2019, when we created that particular artwork. It also gave us a subtle way to link this new project back to Matt’s earlier work as Dark Sky. The concept felt like a good fit, so we researched it further. Somewhere along the way, this lead us to Belenois aurota , a medium-sized butterfly, also known as the Pioneer White. Two large migrating butterflies followed: Monarch , one of the largest and rarest butterflies seen in here the UK, and Menelaus Blue Morpho , one of the largest butterflies in the world. While the Pioneer and Monarch would steer the rest of the project visually, the Blue Morpho would eventually lead to the album title itself. The Pioneer White, photo by Jaya Shukla The Blue Morpho, photo by Mori M The Monarch, photo by Justin DoCanto Now we had some creative direction, it was time to explore the concept visually, to see what we could create. Design ideation During design ideation, the goal is to figure out how to turn our concept into a piece of artwork. It’s the point we jump into design software, draw on our inspiration, play around with various techniques and create basic mockups to see what we can come up with. For this part, we usually meet up in person to work on the project together. We wanted the artwork to feel alien, like nothing you’ve really seen before. That meant trying not taking the concept too literally. Whatever we ended up creating had to be a subtle abstraction, not immediately obvious. Something to make you pause for a moment, wondering what the hell it is. As with every project, it also had to be appealing to look at. That may sound fairly obvious – it’s a visual artwork after all – but it‘s easy to forget when you’re busy messing about with design software. For every project, we’ll also consider how the artwork will translate into visuals that can be animated. This is important for live shows, social media reels, and so on. Admittedly, this has been an afterthought in the past and a challenge to reverse engineer, so these days we try to account for this early on. With our concept in mind, Matt played around with openart.ai , using it to generating a bunch of new ideas from our visual references. Generated using openart.ai Generated using openart.ai Generated using openart.ai This helped us visualise some interesting, somewhat alien, jellyfish-like looking forms. However, using a butterfly as the source image would often produce results that felt much too literal. Generated using openart.ai Generated using openart.ai Perhaps we didn’t push things far enough with AI. However, ultimately we concluded that although it was an interesting way to brainstorm ideas, it wasn’t a tool we wanted to rely on to produce the final artwork. After some experimentation, we came back to Matt’s initial idea of deconstructing and repeating the body parts of a butterfly. Focusing on the organic shapes found in the wings of the Pioneer White, we created a rough trace in Affinity Designer. The Pioneer White, photo by Divam Suthar Vector trace of butterfly wings Now we had some vector shapes to work with, the next step was to deconstruct them further to create a symmetrical design that felt interesting and a little weird. The process was made much easier once we discovered the symbol tool trick used to create symmetry in Affinity Designer . Your browser does not support the video tag. Soon enough, we realised we were in the process of creating the artwork that would become the laser cut perforations featured on the outer sleeve of the vinyl packaging. We pictured these shapes revealing a graphic on the inner sleeve beneath. This meant we now had to consider an artwork for the inner sleeve itself. Early in the design stage, I’d played around with the idea of a gigantic bitmapped butterfly motif covering the full front and back of the sleeve. Being far from subtle, I’d abandonded the idea. We returned to the idea once we realised the motif would appear more abstract, when folded in half and viewed through the laser cuts, as it would be in its final form. By duplicating a couple of layers, adding a colour overlay, then applying a blend mode, we were able to come up with something that looked much more interesting. Both when seen through the laser cuts, and when the inner sleeve was removed from the outer sleeve altogether. Feeling like we might be on to something, we tried to piece each part together by creating a basic mockup of how the laser cuts might look with the artwork behind. Now it felt like we’re actually getting somewhere. Time to end another late night design session, get some sleep and look at it again another day. Finding the right direction is always a good feeling. You’re on the right track so you can finally let go of all the other ideas taking up mental bandwidth. In our next sessions we could focus on bringing it altogether. Development At this stage, we’ve visually distilled our concept into a clear direction. Now it’s all about developing the final artwork so is ready for production. The first step is to create final digital prototypes. That means creating mockups of the full product packaging. Outer sleeve, with laser cuts and printed elements like track listing and catalogue number on spine. Inner sleeve, on body vinyl labels and the vinyl itself. It’s not about getting it 100% accurate at this point. The goal is to visualise how the final artwork and physical product might eventually look. Then figure out if it works as we’d imagined. One of the harder decisions was whether to cut out the centre of the inner sleeve revealing the vinyl label beneath. This would create an extra challenge, as we then wanted to ensure that the design featured on the vinyl label would line up with the laser cuts on the outer cover. In reality it rarely would, that is unless you replaced the vinyl in its sleeve with perfect alignment and precision. But we wanted to ensure it was, at least, technically possible, to please those like us who obsess over the details. Ultimately we took the risk and decided to go for it. Seeing right the way through to the vinyl from the cover added some extra depth and dimension to the artwork. Given the intricacy of the design, Matt also made a physical prototype for the laser cut cover, using the sample card stock we’d received from the printers. It was important to figure out whether our laser cut design would affect the structural integrity of the outer sleeve. This lead us to remove some of the elements from the final graphic, then space the rest slightly further away from each other, and away from center and the edges. Your browser does not support the video tag. The next step was to turn our digital prototypes into actual deliverables. These are the print-ready files that the printer, and, in this case, laser cutter, can work with. This is the part where we spend way too much time fussing over the details, making sure everything is perfectly aligned and positioned where it should be on templates provided by the printer. To prevent any issues scaling artwork to fit, we always work in design files large enough to translate to 12" vinyl, even during the design ideation stage. Likewise, I’ll always set the colour format in Affinity to CMYK/8 and speak to the printer about what CMYK profile they want me to use. It’s most often Coated FOGRA39 , if that means anything to you. With this set up we shouldn’t have any surprises when the final product returns from the printer. As our design required both laser cutting and printing, we had to split the artwork into four separate files. One file for the laser cut outer. Another for the text and record label logo that would be printed onto the back of the outer sleeve. Then one for the printed inner sleeve. And lastly one more file for the vinyl labels. I like to export and deliver two versions of each file, one with printer guides and one without. That way there’s nothing to dispute later on. I tend to export and deliver all files in TIFF format to prevent any compression, but I know many printers prefer PDF. Production Now we’re at the business end of the project. Time to deliver our print-ready design files for printing and, in this case, laser cutting. The project is out of our hands and down to our chosen partners to turn digital designs into a physical product. My background is in web design. For those that aren’t familiar, it’s an iterative process. We’ll regularly make improvements to a website long after the project goes live. Print design is the complete opposite of that. There’s no room for mistakes and no going back once you’ve delivered artwork ready to be printed. Although there’s a sense of relief that our part is finally over, there’s still that lingering dread that we’ve messed something up and things won’t turn out exactly how we imagined. It’s an anxious wait between delivering the artwork and receiving it back. Fortunately, this time we got everything spot on. Much of that was down to a good amount of patience and two fantastic partners who were happy to answer our barrage of questions. Press on Vinyl did a stellar job on the printing, as did North London Laser on laser cutting the outer sleeve. Unfortunately, we weren’t organised enough to get shots of the print process. But we did manage to get some of the laser cutter in action. Wrapping up Although the progression from concept to artwork might seem fairly linear, I can tell you now, that couldn’t be further from the truth. In reality, designing music artwork is a messy process. At least, it is for us anyway. Until we hit the development and production phases, we tend to move back and forth between stages in no particular order. Often we’ll have an idea for a concept, do some research, mock up some visuals, then scrap the idea altogether and start the process from scratch. Over the years, I don’t think we’ve ever landed on the right concept before we’ve hit a bunch of dead ends first. Things only start coming together once we’ve done this dance at least a handful of times. Usually it’s a simple idea. Something we touched on early on, that needed time, experimentation and going through the motions to reveal itself and materialise. The final artwork is the result of many hours spent playing around with different ideas, parking the ones that aren’t working, then deliberating over where to go next. It takes time and effort to find the right direction. Along with countless emails, WhatsApps, a bunch of late nights, and arguably too much pizza and whisky. The whole project took around 8 months in total. From the moment Matt first briefed me on the project in February 2025, right through to when Matt received the finished physical product in October 2025. It’s hard to say how many hours we actually spent on it. We had the initial concept down within 3 months, but it wasn’t like we were working on it everyday. Often we’ll give it days, sometimes weeks, between design sessions. Giving ideas time and space to evolve seems to be the key. Anyway, we’re both super stoked with how the artwork turned out. A massive thanks to Tom at Sound Records , Antonio at Heartfelt Management , and the folks at both Press on Vinyl and North London Laser , for helping us to bring the project to life and making it happen. I’ve spent this whole time banging on about the Morpho artwork. However, I’d be doing a massive disservice to Matt if I didn’t mention his fantastic music that’s pressed on the vinyl itself. Ultimately, that’s what this project is all about. You can find Morpho on Spotify if you want to give the album a listen. If you’d like to own your own copy and support the project financially, it’s also available to buy directly from Matt’s Bandcamp page , in both digital and physical form.

Perishable PressMore Front-end Bloggers2 min read

Launching My Latest WordPress Plugin: REST Pro Tools

Very excited to launch my latest WordPress plugin, REST Pro Tools. This is the premium/pro version of the free plugin hosted at WordPress.org, Disable WP REST API. The free version is very basic and does exactly what it says: disables the WP REST API, no options just activate and done. But some users wanted more features, like denying access to specific routes while allowing others. So I packed the pro version with all of the REST API tools most requested […]

Robin OsborneMore Front-end Bloggers4 min read

Your AI Robo-Buddy Is Legally Required to Grass You Up

Since it has an interesting overlap in the Venn diagram of “AI” and “data sovereignty”, here’s a brief follow up to my “Kubernetes, I Guess” article… Cloud Act The Cloud Act allows “federal law enforcement to compel U.S.-based technology companies via warrant or subpoena to provide requested data stored on servers regardless of whether the […]

Krasimir TsonevMore Front-end Bloggersread at source

The naked truth about AI-assisted coding

In this article, I argue that AI-assisted coding is useful but overhyped. I see real value in speeding up boilerplate and first drafts, but I also see serious risks: weaker developer fundamentals, more technical debt, shallow productivity metrics, security and licensing concerns, and growing pressure on open source maintainers. My core point is simple: AI can help me write code faster, but it still doesn’t solve the hardest part of software engineering - building the right systems that stay reliable, secure, and maintainable over time.

Rob DodsonMore Front-end Bloggers10 min read

How I Built My Mobile Second Brain

In my last post, My Second Brain Never Worked. Then I Gave It a Gardener , I mentioned that putting my Obsidian vault on a VPS with Claude Code permanently running on it, and being able to access it from my phone, was the real “ah ha” moment for me. A few people asked how I set…

Eric PortisMore Front-end Bloggersread at source

Monochrome Summer

Samuel KraftMore Front-end Bloggersread at source

Using SF Pro Rounded with React Native

How to use San Francisco Pro Rounded with React Native

Jim Fisher’s blogMore Front-end Bloggers1 min read

The migration SQL should go in the table

So you run migrate in your dev environment, but it fails: some unknown migration add-foobar has already been applied from some other experimental branch, and the migration tool doesn’t know how to down-migrate it. To fix it, you have to hunt for the branch that created that…

Mike TaylorMore Front-end Bloggersread at source

A new, new logo for the W3C

In an effort to pivot this site into a full on graphic design side business after 2 blog posts about logos in a row (hit me up exclusivly on FB to request a consultation), I thought I would reveal my new, new logo for the W3C. It turns out they recently launched a new one, but some folks don’t love it . As an artist, it’s not my job to critique other art, but instead to offer my own compelling vision for the web. I shouldn’t have to explain why I went with the classic dark blue and asparagus colors—that much is obvious. And of course, turning c into a file extension as a reminder that NCSA Mosaic was written in C (I didn’t go with WorldWideWeb because that was written in Objective C and .m kinda messes it all up).