Everything

DEV CommunityThe Giantsread at source

BottleBuddy

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend What I Built I built BottleBuddy , a small AI-powered product discovery app for a friend. The idea came from a simple problem: browsing a large list of products and manually applying filters can be annoying when you already know roughly what you want. Instead, BottleBuddy lets my friend describe what they're looking for in natural language. For example: "I'm looking for beer under Rs. 5,000 (LKR) with a lower ABV." BottleBuddy interprets that request and converts it into structured filters such as budget, category, brand, and ABV range. It then searches the product data stored in MongoDB and displays matching products. I also included regular filters so the application isn't dependent entirely on AI. Demo BottleBuddy currently runs locally because the AI model is running directly on my machine through Ollama. Here's a video showing the complete flow: https://youtube.com/shorts/uuS9bb2CIQA?feature=share In the demo, I show: entering a natural-language request Gemma interpreting the request BottleBuddy finding matching products product information coming from MongoDB manual filtering/search functionality Code GitHub repository : https://github.com/ImalKesara/BottleBuddy How I Built It I built BottleBuddy using SvelteKit and TypeScript for the application. The AI part uses Gemma 3 , Google's open-weight model, running locally through Ollama . When someone enters a request such as: "Beer under Rs. 5,000 lkr, preferably lower strength" BottleBuddy sends the text from the SvelteKit server to the locally running Gemma model. Gemma's responsibility is not to invent or recommend products. Instead, it interprets the natural-language request and converts it into structured search filters. For example: { "maxBudget": 5000, "category": "beer", "brand": null, "minAbv": null, "maxAbv": 5 } BottleBuddy then uses those filters to search the actual product data stored in MongoDB Atlas . Why Does Open Innovation Matter? Open innovation made the core idea behind BottleBuddy possible. Because Gemma is an open-weight model, I was able to run the model locally on my own machine using Ollama and integrate it directly into my application. That gave me much more control over how the AI part of the application works. The application is not tied to a closed AI API for its core natural-language search feature, and the model can be run on infrastructure I control. It also made experimenting much easier. I could test prompts, structured outputs, and different ways of extracting search filters while keeping inference local. For BottleBuddy specifically, this showed me that useful AI features don't always require sending requests to a large proprietary hosted service. An open-weight model running locally can be enough to build the core experience.

DEV CommunityThe Giantsread at source

Model Evaluation in Machine Learning: How Do We Know a Model Is Good?

Model Evaluation in Machine Learning: How Do We Know a Model Is Good? Building a machine learning model is only one part of a machine learning project. After training a model, we need to answer an important question: How well does it actually perform on new data? This is where model evaluation becomes important. What Is Model Evaluation? Model evaluation is the process of measuring how well a machine learning model makes predictions. It helps us understand whether a model is performing correctly and whether it can generalize to data it has never seen before. A model that performs extremely well on training data may still perform poorly on new data. This problem is commonly known as overfitting. Proper evaluation helps identify such problems before using the model in a real-world application. Classification Model Evaluation For classification problems, several metrics can be used. Accuracy represents the percentage of predictions that the model classified correctly. Although it is easy to understand, accuracy may not be reliable when the dataset is imbalanced. Precision tells us how many of the observations predicted as positive were actually positive. Recall measures how many of the actual positive cases were correctly identified by the model. F1-score combines precision and recall into a single metric. It is particularly useful when both false positives and false negatives are important. Another useful tool is the confusion matrix, which shows true positives, true negatives, false positives, and false negatives. Regression Model Evaluation For regression problems, where the model predicts continuous values, different metrics are commonly used. Mean Absolute Error (MAE) measures the average absolute difference between predicted and actual values. Mean Squared Error (MSE) calculates the average squared difference between predictions and actual values. Root Mean Squared Error (RMSE) is the square root of MSE and is useful because its value is expressed in the same units as the target variable. The R² score indicates how well the model explains the variation in the target variable. Why Cross-Validation Matters Another important evaluation technique is cross-validation. Instead of relying on a single train-test split, the dataset is divided into multiple parts. The model is trained and evaluated several times using different portions of the dataset. This gives us a more reliable estimate of model performance and helps reduce the risk of making conclusions from one particular train-test split. Final Thoughts Model evaluation is essential for building reliable machine learning systems. Choosing the right evaluation metric depends on the type of problem and what we want the model to achieve. Accuracy, precision, recall, F1-score, confusion matrices, MAE, MSE, RMSE, R², and cross-validation are some of the most useful tools for evaluating machine learning models. For a more detailed explanation of Model Evaluation, you can read my related article

DEV CommunityThe Giantsread at source

One field in the request made our agent 3x cheaper and 8x faster

TL;DR. Reasoning models decide by themselves how long to think if you don't tell them. Our agent didn't — and on hard tasks the model sometimes thought for 14 minutes and 33K tokens in a single step. One field in the request body ( "reasoning": {"effort": "low"} ) made a task 3x cheaper and 7–8x faster, and it solved more tasks, not fewer: 12 of 12 instead of 6 of 7. The best setting in the end was neither "always low" nor "always high" but "low, and high right after a failing test". Below: how we measured it, the tables, the code, and what it doesn't fix. About this post. The project is Altair , an open-source (Apache-2.0) AI agent for your PC and phone. I'm the author and build it largely with Claude Code. This post, the experiments and the charts were prepared by that same AI assistant; I reviewed it and stand behind it. Every number comes from our runs. This is the third post about the project: the first is about snapshots and running tests before "done", the second about cutting a browser agent's tokens by 58%. How it started We ran the agent on a cheap reasoning model ( glm-5.3-flash ) and read the provider's logs. On one task the very first step took 14 minutes. The provider had time to bill it: 32,978 reasoning tokens in one step , and no answer. Our loop guard cut the stream at 160,000 characters. The cause was mundane. Reasoning models have a "how much to think" knob — reasoning_effort at OpenAI, reasoning.effort at OpenRouter, thinking in Z.ai-style APIs. If you don't send it, the provider or the model decides; OpenRouter's docs say as much. Our agent sent nothing. How we measured Easy tasks (fix a bug, answer a question about code) were solved 100% of the time under any setting, so they show no difference. We wrote six hard tasks with hidden tests — the agent never sees them, they run after it says "done": an LRU cache with a time-to-live (11 hidden edge-case tests); fixing a config parser from seven user bug reports; renaming a function across a multi-file package and adding a parameter; the 95th percentile of latencies from logs, with exclusions; parsing "1.5M", "200K", "10 тыс"; business days between dates with holidays, fast over a hundred years. Each task was first solved with reference code to make sure the hidden tests were fair. The agent is the real Altair, run through its CLI ( altair -p ). A proxy between agent and provider logged every request: size, cached tokens, reasoning tokens, time. Cost is what OpenRouter billed. Results Cost of one hard task Setting Solved Cost per task Time per task No level (before) 6 of 7 12.6 m$ 4.1 min effort = low 12 of 12 4.2 m$ 0.55 min effort = medium 10 of 12 4.8 m$ 0.64 min effort = high 12 of 12 6.4 m$ 1.5 min m$ is a thousandth of a dollar. 12.6 m$ without a level, 4.2 m$ with low : three times less. Time went from 4.1 to 0.55 minutes, 7.5x. Why "6 of 7" and not "of 12": runs without a level kept looping for 10–14 minutes, and we stopped that series early so as not to burn money. One of the six tasks (parsing "1.5M") sent the model into endless reasoning in almost every series without a level. With any explicit level — never. Where the money goes: Reasoning tokens per task 9,743 reasoning tokens per task on average without a level, 235 with low — 41x fewer. Output tokens cost 3.3x more than input for this model, so on hard tasks reasoning is the main bill. And on long tasks? Short tasks are 5–9 steps. We also tried 15–20-step ones: a package with six bugs in different modules, auditing twelve values across sixty files of our own code, and "read eight files in full, then answer questions about them". Long tasks 9 of 9 solved in every setting, but without a level a task costs 28 m$ and takes 5.2 minutes; with an explicit level, 11–13 m$ and a little over a minute. The twist: think hard only when something broke low is cheap, high is safer. We wanted both, and tried two per-step modes: "think about the plan" — high on the first step, then low ; "think after a failure" — low , but high on the step right after tests failed or a tool returned an error. When to think harder Setting (18 runs each) Solved Cost Time always low 16 of 18 3.78 m$ 0.96 min always high 17 of 18 5.72 m$ 1.92 min high on the first step 15 of 18 4.37 m$ 1.93 min low , high after a failure 17 of 18 3.65 m$ 0.84 min Careful planning didn't help — it solved the fewest. "Think after a failure" solved as many as always- high , at the cost and speed of low . It makes sense: most of an agent's work is routine (read a file, write a file, run the tests), and thinking pays off where a test just showed the first idea was wrong. One task in 18 is close to noise, honestly, but this mode is no worse than low on all three measures. It's now our default. How it looks in code The catch is that every provider has its own field: def reasoning_extra ( level , base_url , model , override = " auto " ): """ Request fields for a reasoning level ({} for " default " / unknown levels). """ if level not in LEVELS : return {} kind = dialect ( base_url , model , override ) if kind == " openrouter " : # OpenRouter takes minimal..high; some endpoints refuse "none"/enabled=false, # so the lowest we send is "low" for "minimal" there. return { " reasoning " : { " effort " : " low " if level == " minimal " else level }} if kind == " zai " : # Z.ai-style APIs have an on/off switch: low and minimal turn thinking off. return { " thinking " : { " type " : " disabled " if level in ( " minimal " , " low " ) else " enabled " }} if kind == " openai " : return { " reasoning_effort " : level } return {} What we stepped on along the way: For this model OpenRouter refuses reasoning: {"enabled": false} and reasoning_effort: "none" with a 400 "Reasoning is mandatory for this endpoint". Only effort: "low" works. A Z.ai-style gateway, the other way round, takes thinking: {"type": "disabled"} and didn't answer reasoning.effort at all. A provider that doesn't know the field may answer 400. We catch that, retry without the field and remember not to send it again. The agent loop picks the level for each step: FAILURE_RE = re . compile ( r " \b\d+ failed\b|\bFAILED\b|Traceback \(most recent call last\)|AssertionError| " r " \bexit code [1-9]\d*\b|\bSyntaxError\b|[A-Za-z]Error: " ) def _reasoning_level ( self ) -> str | None : mode = self . settings . llm_reasoning if mode == " default " : return None if mode == " adaptive " : return " high " if getattr ( self , " _round_failed " , False ) else " low " return mode After each round of tools, _round_failed is true if a tool returned an error or its output has "2 failed", a traceback or a non-zero exit code. Service calls thought more than the main ones Two more places turned up in the logs. The chat title. The agent asks the model for a title from the first message. About 95% of that answer was reasoning: ~190 tokens of "thoughts" for a five-word title. With reasoning off the answer is 12 tokens and comes 1.6–3x faster; all six sample titles were still fine. The history summary. When the context grows, the agent asks the model to condense the start of the conversation. The answer limit was 600 tokens. The model spent them on reasoning and the summary came back empty in 3 cases out of 4 ( finish_reason: length ). An empty summary isn't a fold, it's a loss: the agent drops the start of the conversation instead of condensing it. With a 2,000 limit there were no empty summaries. Service calls now ask for the least reasoning, and the summary limit is 2,500. What this doesn't fix One model. Everything was measured on glm-5.3-flash . Other models scale their levels differently, and "low" may mean something else. The principle — don't leave the level to the provider — carries over; the exact numbers don't. Small samples. 12–18 runs per setting. A difference of one or two solved tasks is noise. A difference of 3x in cost and time is not. Not every provider has levels. A Z.ai-style gateway only knows on/off. There "high after a failure" means "think fully", which is expensive: on our tasks "always off" on that gateway came out half the price of adaptive (5.9 vs 10.8 m$, 12 of 12 both). If cost matters most, pick "low" there. The tasks are code. For writing, search or analytics the best level may differ. Check it yourself The core of the experiment is one agent run with a set level: # proxy.py adds the level to every agent request to the provider body = { ** { " reasoning " : { " effort " : " low " }}, ** request_body , " model " : provider [ " model " ]} # stand.py: the agent solves the task, then the hidden tests run subprocess . run ([ sys . executable , " altair_cli.py " , " -p " , " --output-format " , " json " , " --mode " , " bypass " , " --cwd " , workspace , task . prompt ], env = env , timeout = 900 ) passed , detail = task . check ( workspace , answer ) The whole stand (the logging proxy, tasks with hidden tests and reference solutions, the summary script) and the raw results: research/agent-lab-2026-10 ( python lab/facts.py recomputes every number in this post from the saved results, no keys needed). Altair's code: https://github.com/Qweezyy/AltairAgent — the level is in Settings → Agent → Reasoning level (default "Adaptive"), LLM_REASONING in .env , module pc/core/llm/reliability.py . How do you set the reasoning level in your agents — fixed, per task type, or as the work goes? Have you seen a model think far more than it needs when no level is set?

DEV CommunityThe Giantsread at source

I Built a Marketplace for Developers to Buy Ready-to-Use Source Code

I Built a Marketplace for Developers to Buy Ready-to-Use Source Code I've been building full-stack projects for the past few years, and I kept running into the same problem: Sometimes you want to build a SaaS, dashboard, mobile app, API, or developer tool — but you don't necessarily want to start every project from an empty folder. You might want a solid starting point, a codebase to customize, or simply something real to study. That idea led me to build Projectry . 🌐 https://projectry.dev Projectry is a marketplace for developers looking for ready-to-use source code and complete projects that they can learn from, customize, and build on. What’s currently available I started with six projects covering different use cases and technology stacks: 📚 StudyStack An education platform focused on flashcards, spaced repetition, and learning progress. Stack: React, TypeScript, Tailwind CSS, MongoDB 📊 DevBoard A DevOps dashboard for monitoring deployments, CI runs, services, and incident timelines. Stack: Python, FastAPI, MongoDB, React 📋 TaskForge A project management application with Kanban boards, collaboration, activity feeds, and role-based workspaces. Stack: Next.js, TypeScript, Node.js, PostgreSQL 📝 PaperTrail An audit logging and compliance tracking system with a review dashboard and tamper-evident storage. Stack: Java, Spring Boot, PostgreSQL, Docker 📦 ShelfLife An Android inventory and expiry tracking application with barcode scanning and offline capabilities. Stack: Kotlin, Android, FastAPI, PostgreSQL 🔐 CodeVault A developer-focused encrypted snippet and secret vault with versioning, sharing, and an asynchronous audit pipeline. Stack: Java, Spring Boot, PostgreSQL, Docker, RabbitMQ Why build another source-code marketplace? I didn't want Projectry to be just another collection of generic templates. The goal is to build a broader collection of real-world applications across different areas: Backend systems Full-stack applications Developer tools DevOps Education Mobile applications Data applications Frontend projects The catalog also covers technologies such as React, Next.js, TypeScript, Java, Spring Boot, Python, FastAPI, PostgreSQL, MongoDB, Docker, RabbitMQ, Redis, Android, and more. What's next? The six projects are just the beginning. I'm working on expanding the catalog while keeping the projects varied in both technology and use case. Some of the areas I'm exploring include: SaaS applications E-commerce Developer infrastructure Data dashboards CI/CD tooling APIs and backend systems Mobile applications Business applications Authentication and authorization Real-time applications I'm also working on better documentation, demos, and developer resources around the projects. The idea is to provide more than just a ZIP file and leave you to figure out the rest. For developers If you're looking for a starting point for a project, want to study how a real application is structured, or need a codebase that you can customize instead of building everything from scratch, check out Projectry: 👉 https://projectry.dev I'm also building the Projectry GitHub organization, where I'll be publishing selected resources and open-source projects: 👉 https://github.com/Projectry-Org I'm still early in the journey, so I'd genuinely like to hear from other developers: What kind of source code would you actually want to buy? A complete SaaS? A backend/API? A mobile app? A dashboard? A developer tool? Something else? I'd love to hear what you'd find useful.

DEV CommunityThe Giantsread at source

126+ Private, In-Browser Web & PDF Tools Every Developer Needs

Most online converters and PDF tools upload your sensitive documents, API keys, and contracts to remote cloud servers. For private data, that is a security risk. I built DevTol — a free suite of 126+ developer and productivity tools that execute 100% inside your browser using Web Workers and the Web Crypto API. What is inside DevTol? Full Client-Side PDF Suite: Edit PDFs (with full Arabic RTL support), Compress PDFs locally (down to 100kb/200kb), Merge, and check Digital Signatures. Developer Utilities: JSON Diff & Formatter, JWT Decoder, Regex Sandbox, SQL Prettifier, cURL to Code Converter (7 languages). AI Token Calculator: Calculate prompt tokens and API pricing across GPT-4o, Claude 3.5, Gemini, and DeepSeek. Zero Tracking: 100% free, no account needed, and no files ever leave your machine. Try it out here: https://devtol.online What tools would you like added next? Feedback is welcome!

Hacker News: Show HNLibraries, Frameworks, etc.read at source

Show HN: Wazn-2B – decision model with separate encoding and competition

Comments

Flavio CopesMore Front-end Bloggersread at source

How to fix "Stacked PRs are not enabled for this repository"

Stacked PRs are not enabled for this repository is a gh stack warning with no setting to flip. Check your gh account and repo, or open regular PRs.

Hacker News: Show HNLibraries, Frameworks, etc.read at source

Show HN: AI search for every photo and every frame of video on macOS

Comments

Hacker News Front PageThe Giantsread at source

VGHF Digital Archive passes 5000 magazines. Here's what's next

Hacker News Front PageThe Giantsread at source

In Ukraine, distributed renewables foil Russia's assaults

Hacker News Front PageThe Giantsread at source

"Torturing" LLMs in a Robot Prison Has Triggered the Dumbest Debate in AI Yet

Hacker News Front PageThe Giantsread at source

OpenBSD Developers Reject Uutils Coreutils

Flavio CopesMore Front-end Bloggersread at source

How to use Jev confidence scores

How to use Jev confidence scores to decide when code acts, asks for confirmation, or hands off to a person, with thresholds tuned on labeled data.

Hacker News Front PageThe Giantsread at source

Emitting metadata early makes building/checking Rust up to twice as fast

Hacker News: Show HNLibraries, Frameworks, etc.read at source

Show HN: Random Word Generator

Comments

Hacker News: Show HNLibraries, Frameworks, etc.read at source

Show HN: SuperLocalMemory 4.0 "Governed Memory Operating System for AI Agents"

Comments

Hacker News: Show HNLibraries, Frameworks, etc.read at source

Show HN: Second Strike, a 200-player world war on a 3D globe in the browser

Comments

phpiedTop Front-end Bloggers2 min read

Debugging download initiator

I was recently debugging why an image was being downloaded. In Chrome devtools, in the network panel, the column for "initiator" was pointing to the end of the HTML document. But that wasn't true and I suspect when Chrome gives up on trying to figure out the actual code location, the default is the HTML […]

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 .

AbduzeedoMulti Author Blogsread at source

Inside the Craft of Module: Brand Identity by FAST Studio

FAST Studio crafts a disciplined brand identity for Riyadh architecture firm Module, balancing geometric order and human-scale engineering. Module approaches architecture as enduring cultural infrastr...

Adam ArgyleTop Front-end Bloggersread at source

Page View Count Regression Fixed

Page view counts regressed Oct 1 and were fixed just now. Hopefully those historical counts can be retrieved or fixed; working on it.

Flavio CopesMore Front-end Bloggersread at source

I built VM Monitor, a Mac app that shows what your coding agents do in the test VM

VM Monitor is my free, open source Mac app that shows what coding agents do in a macOS test VM: its screen live, which agents are using it and for what, and every command they ran.

Flavio CopesMore Front-end Bloggersread at source

I built Postdeck, slides from posts on X for my videos

Postdeck is my free, open source Mac app and Chrome extension that turn posts on X into slides. Click the slide icon under a post, reorder the slides, and play them in the app window while you record.

SitePointThe Giantsread at source

Pi 1.0 Coding Agent Setup: Install, Configure MCP, and Run Codemode

Install Pi 1.0, add MCP servers with pi mcp add, and use codemode scripts. A setup guide for developers, based on the official Pi docs. Continue reading Pi 1.0 Coding Agent Setup: Install, Configure MCP, and Run Codemode on SitePoint .

AbduzeedoMulti Author Blogsread at source

Sabina Farziyeva Unveils Editorial Illustration for Nargis

Sabina Farziyeva's editorial illustration series for Nargis Magazine reimagines fashion editors as collage portraits built of clashing patterns. The premise is character, not likeness. Each portrait b...

SitePointThe Giantsread at source

How to Detect Breaking API Changes with TypeScript and OpenAPI

Build a CI pipeline that catches breaking API changes before runtime with oasdiff spec diffing and openapi-typescript type checks in GitHub Actions. Continue reading How to Detect Breaking API Changes with TypeScript and OpenAPI on SitePoint .

AbduzeedoMulti Author Blogsread at source

Resn Website — A Masterclass in Web Design by Marcus Brown

Marcus Brown crafts an iconic web design for the Resn portfolio, pairing tactile click-and-hold mechanics with audiovisual surprises. Resn has long held a singular reputation across the global digital...

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 .

Flavio CopesMore Front-end Bloggersread at source

How to classify text with Jev

How to classify text with Jev: pick Noul, Choice or Score, write labels that work, label comments in bulk, and test accuracy before you trust it.

AbduzeedoMulti Author Blogsread at source

Brand Identity: Lloyds by Wolff Olins

Wolff Olins' brand identity for Lloyds turns a 330-year-old bank into a living system, starting with the black horse, finally taught to move. The heart of the project is the Cancara Philosophy, named ...

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 […]

Flavio CopesMore Front-end Bloggersread at source

What is poteto-mode in pstack?

poteto-mode is the pstack router skill for Cursor. Describe a result and it picks a playbook, calls the other skills, delegates to models and verifies the work.

Flavio CopesMore Front-end Bloggersread at source

How to create and publish a ChatGPT plugin

Create a ChatGPT plugin from scratch: a booking MCP server, a skill and a plugin.json package, tested in developer mode and submitted to the directory.

HTML All The ThingsPodcastsAudioListen

AI Has Made Skilled Labour Almost Free (And It’s Scary)

Our world already has an instant gratification problem and AI has somehow made it worse. It's making skilled work faster and cheaper than ever, which in turn makes us more impatient than ever. Why should we spend a week learning a new SEO tool or a new coding method when we can…

remy sharp's b:logTop Front-end Bloggersread at source

Firefox version 157 is very round (and how to make it less round) – creolened.com [link]

This is very useful. I do like the direction Firefox design is going, but the very round tabs make me think the hit target for tabs - especially when pinned and muted - is much smaller than it actually is. Original link: creolened.com/firefox-version-157-is-very-round

Flavio CopesMore Front-end Bloggersread at source

Herdr alternatives for running coding agents

Herdr alternatives compared: cmux, tmux, Zellij, workmux, worktrunk, T3 Code and bb, with platforms, agent status, worktrees and what to use on Linux.

Flavio CopesMore Front-end Bloggersread at source

What running a one-person software business costs per month

What my one-person software business costs each month, line by line: hosting, email, analytics, payment fees, domains, software and AI tools.

AbduzeedoMulti Author Blogsread at source

Web Design Inspiration: 3 Sites With Strong Visual Ideas

Web design inspiration from A24, Butter and White Desert, with three homepage screenshots and a look at their type, imagery and layouts. A24: Web design inspiration from film A24 makes films and telev...

AbduzeedoMulti Author Blogsread at source

How Pentagram Reimagined Brand Identity for De Bijloke

Pentagram gives Ghent's De Bijloke a living identity: a fluid, oscilloscope-born brand built for classical, jazz and new music alike. The heart of the identity is a swooping mark that reads like a sou...

Adam ArgyleTop Front-end Bloggersread at source

Transitioning Field Sizing Content With CSS

Neat CSS trick: Use anchor to track the size changes in a textarea (or whatever) and transition instead of instantly update 🤘🏻 See on Codepen

AbduzeedoMulti Author Blogsread at source

Auren: Inside tubik studio's New UI UX Design

tubik studio crafts an architectural portfolio and ui ux design system for Auren, pairing Neue Montreal type with calm, spacious grids. Auren designs timeless homes and work spaces. Their practice cen...

AbduzeedoMulti Author Blogsread at source

Web Design: Vitra Gift Finder by Build in Amsterdam

Build in Amsterdam's Vitra Gift Finder turns gift hunting into play — a fluid, interactive grid of Vitra's iconic accessories. The first thing you meet is the grid itself: dozens of Vitra icons — the ...

SitePointThe Giantsread at source

Building Lead Capture Forms That Convert: A Developer's Guide

null Continue reading Building Lead Capture Forms That Convert: A Developer's Guide on SitePoint .

AbduzeedoMulti Author Blogsread at source

Kauan Lippi Unveils Bellecare Brand Identity

Kauan Lippi crafts a serene brand identity for Korean skincare label Bellecare, pairing cobalt blue restraint with minimalist packaging. The contemporary beauty sector often buries efficacy under dens...

HeyDesignerDeveloper/Designer Newsread at source

Jev for designers

Design systems for AI agents, Beyond productivity: Designing space for creativity, Multiple-column layout, rows, rules, and floats.

SitePointThe Giantsread at source

WordPress Accessibility Issues That Are Getting Sites Sued in 2026

null Continue reading WordPress Accessibility Issues That Are Getting Sites Sued in 2026 on SitePoint .

Flavio CopesMore Front-end Bloggersread at source

I built Factory Log, a Mac app that shows what your coding agents did

Factory Log is my free, open source Mac app that turns the one-line reports your coding agents write into a timeline of your day and week, and shows where your time went, project by project.

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.

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Kotlin Course For Beginners – Full Tutorial

AbduzeedoMulti Author Blogsread at source

Poster Design: Follow the Dot by Molnár Péter

Molnár Péter explores geometric tension, modular calligraphy, and chromatic discs in his experimental poster design series Follow the Dot. Molnár Péter constructed the collection as an exploratory lab...

Flavio CopesMore Front-end Bloggersread at source

How to use your ChatGPT subscription in other apps

Sign in with ChatGPT lets Plus and Pro users spend their plan in Devin, Warp, Notion, Pi and other apps. How to connect one, cap it, and build your own.

SitePointThe Giantsread at source

The Design Workflow Is Broken. Here Is How Vitalii Khomenko Thinks It Should Be Fixed

Principal Designer Vitalii Khomenko argues the real bottleneck in AI-accelerated product teams isn't engineering anymore, it's the Figma-to-code handoff, and here's his fix. Continue reading The Design Workflow Is Broken. Here Is How Vitalii Khomenko Thinks It Should Be Fixed on SitePoint .

W3C BlogBrowsers, engines, etc.4 min read

W3C Newsletter - September 2026

W3C President and Interim CEO Dominique Hazaël-Massieux shares timely and notable highlights and information selected from the busy and prolific work last month at W3C.

Flavio CopesMore Front-end Bloggersread at source

How to use the Codex CLI

How to use the Codex CLI, OpenAI's coding agent for the terminal: install it, run tasks, set permissions, pick a model, review changes and use codex exec.

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

Flavio CopesMore Front-end Bloggersread at source

I built Calculum for Mac, 281 calculators that work offline

Calculum for Mac is my free, open source app with the 281 calculators from calculum.dev. It works offline, saves and compares calculations, and comes with a calculum command for Terminal.

Flavio CopesMore Front-end Bloggersread at source

Every product I launched this summer, and what happened to each

Every product I launched between July and September 2026, in date order: what each one is, why I built it, and what happened to it since.

SitePointThe Giantsread at source

How to Build a Backlink Monitoring Dashboard with Node.js

null Continue reading How to Build a Backlink Monitoring Dashboard with Node.js on SitePoint .

AbduzeedoMulti Author Blogsread at source

Brand Identity: Koto's Stack Overflow Rebrand

Koto's Stack Overflow rebrand casts the platform as the human-truth anchor of the AI era, in a generative identity built to stay always in build. Is there a place for Stack Overflow in an AI-first wor...

AbduzeedoMulti Author Blogsread at source

Brand Identity: Newcastle United Crest, Redesigned by Fans

The new Newcastle United crest is a fan-voted brand identity evolution, refining 38 years of civic heritage for screens, shirts and signage. On October 1, Newcastle United unveiled the first change to...

Auth0 BlogCompany/Startup Blogsread at source

Architecting Secure Identity: Extending Auth0 PrivateLink with Intelligent Gateways

Route Auth0 Outbound PrivateLink traffic across multiple isolated VPCs from a single secure tunnel — using an API Gateway as a fan-out layer with Auth0 Actions for context-based routing.

ESLint BlogLibraries, Frameworks, etc.2 min read

ESLint v10.12.0 released

Highlights Support for tokens and comments in SourceCode Rule authors often work with ESLint’s SourceCode object, which represents the JavaScript source code being linted. Its getText() , getLoc() , and getRange() methods have always accepted a node, token, or comment, but the…

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…

Twilio BlogMulti Author Blogsread at source

How to Create and Send vCards with Go

In this tutorial, you'll learn how to create vCards and how to then send them via SMS using Twilio's Programmable Messaging API.

Twilio BlogMulti Author Blogsread at source

How to Track Opt-Outs in PHP

Learn how to track opt-outs and avoid communicating with customers afterward in your PHP code, with Twilio's Incoming Message Webhook and Event Streams functionality.

Twilio BlogMulti Author Blogsread at source

How to Get Started With WebRTC: Intro to Browser APIs

Learn how to use WebRTC APIs to build powerful voice and video communication solutions with helpful WebRTC tutorials and examples.

Adam ArgyleTop Front-end Bloggersread at source

Front End Fast Money With Kevin Powell

30s on the clock, how well do my CSS answers stack up against Kevin 's audience? Watch on YouTube

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

🧾 Building a voice-to-print mirror with Gemini

AbduzeedoMulti Author Blogsread at source

Inside the Craft of Dermi: Packaging Design by Robot Food

Robot Food creates a playful packaging design system for Dermi, translating laboratory science into tactile refillable skincare for tweens. Tweens explore skincare much earlier today. Yet most store s...

AbduzeedoMulti Author Blogsread at source

Lonely Kids Club x Kayla Reay: Clive the Cyclist Illustration

Lonely Kids Club partners with Australian artist Kayla Reay on a cheeky coloured pencil wildlife illustration starring Clive the Cyclist. When the news cycle feels relentless and the world spins sligh...

SitePointThe Giantsread at source

A Practical Guide to Secure Authentication for Developers

null Continue reading A Practical Guide to Secure Authentication for Developers on SitePoint .

Mux BlogCompany/Startup Blogs3 min read

Tune AI workflows before you build: Introducing Mux Robots playground

Run Mux Robots AI workflows on your own video before you build. Tune parameters, compare runs side by side, and copy an agent prompt to take it to production.

Cloud FourCompany/Startup Blogs5 min read

How Do We Write About AI in Web Development?

I love writing about the rapid pace of change in web development, so why am I struggling to write about how AI is affecting my career?

SitePointThe Giantsread at source

Cryptography Essentials for Node.js Developers: Hashing, Encryption, and Signing Done Right

null Continue reading Cryptography Essentials for Node.js Developers: Hashing, Encryption, and Signing Done Right on SitePoint .

AbduzeedoMulti Author Blogsread at source

Brand Identity: CØDA MASON by Mate Arvai

Mate Arvai creates a fluid brand identity for DJ CØDA MASON, using kinetic typographic systems to break autopilot listening. Budapest-based graphic designer Mate Arvai developed a systematic brand ide...

AdactioTop Front-end Bloggersread at source

Thursday session

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

How to transform audio into physical prints using Gemini and Google AI Studio

Flavio CopesMore Front-end Bloggersread at source

A deep dive into Clef, Cloudflare's decision model

Clef is Cloudflare's open-weight decision model on Workers AI. How it works, how to call it, and how it compares with Jev and OpenAI's Decisions API.

Flavio CopesMore Front-end Bloggersread at source

I built Releases, a Mac app that tracks every app I release

Releases is my free, open source Mac app that shows every release of my apps on one timeline, tells me what's waiting to ship, and starts the next release in Cursor.

AbduzeedoMulti Author Blogsread at source

Riserva Brasitália Specialty Coffee Branding and Packaging

Riserva Brasitália explores specialty coffee packaging, blending detailed line art, gold foil crests, and rich color systems. Designed by Pablo Eduardo Frandoloso, Chaminé Branding, Matthew Corseuil, ...

SitePointThe Giantsread at source

JavaScript Fetch Error Handling: Build a Reusable TypeScript Wrapper

Build a reusable TypeScript wrapper for the Fetch API that normalizes network errors, HTTP status codes, timeouts, and JSON parsing into a predictable error hierarchy. Continue reading JavaScript Fetch Error Handling: Build a Reusable TypeScript Wrapper on SitePoint .

SitePointThe Giantsread at source

Node 20 GitHub Actions Deprecated: How to Migrate Workflows

With Node 20 GitHub Actions deprecated, workflows need updating. Learn how to separate runner runtimes from project Node versions, update custom action metadata, and audit native module dependencies. Continue reading Node 20 GitHub Actions Deprecated: How to Migrate Workflows on SitePoint .

SitePointThe Giantsread at source

Modernizing Enterprise Operations With Oracle Cloud Application Services

A developer's guide to Oracle Cloud Application Services — working with REST APIs, building custom UIs in Visual Builder, and automating integrations with Oracle Integration. Continue reading Modernizing Enterprise Operations With Oracle Cloud Application Services on SitePoint .

Flavio CopesMore Front-end Bloggersread at source

I built Tab Merger, a Chrome extension that merges all your windows into one

Tab Merger is my free, open source Chrome extension that moves the tabs of every open window into the one you're using, with one click or a keyboard shortcut.

AbduzeedoMulti Author Blogsread at source

E.H. Shepard at 100: The Craft of Winnie-the-Pooh Illustration

Celebrate 100 years of Winnie-the-Pooh with an in-depth look at E.H. Shepard's pen-and-ink illustration craft and NYPL centenary treasures. When A.A. Milne’s Winnie-the-Pooh debuted in 1926, the volum...

SitePointThe Giantsread at source

SQLite Change Column Type Without Losing Data: The Safe Rebuild Guide

SQLite does not support altering a column type directly. Learn the safe table rebuild procedure to migrate column types, preserve data, restore indexes and triggers, and avoid silent data loss from foreign key cascades. Continue reading SQLite Change Column Type Without Losing Data: The Safe Rebuild Guide on SitePoint .

The Mozilla BlogBrowsers, engines, etc.6 min read

Under the Hood: Prompt tuning Shake to Summarize for recipes

Following the rollout of Firefox’s Shake to Summarize feature to Android devices this May, we wanted to take a closer look at the modeling work behind the feature. In a previous blog post, we discussed our model selection process. Now that Shake to Summarize has been available on both iOS and Android for a few […] The post Under the Hood: Prompt tuning Shake to Summarize for recipes appeared first on The Mozilla Blog .

Web Tools WeeklyMulti Author Blogsread at source

Web Tools Weekly Issue #689

JS Utils, Git/CLI Tools, JSON/DB

AdactioTop Front-end Bloggersread at source

Commodified Intelligence | MOND←TECH MAGAZINE

We may end up with a full “hidden economy”: People working on their own passion projects, building things for their own sake, and for recognition from their peers. Work done without real compensation, to express personal ideas, moods, and visions, with personal lines drawn on when AI usage is acceptable, and when it isn’t. This bifurcation would affect everyone. For every single hobby activity in your life you’ll have to make a decision: Do you care about the “outcome”, or do you care about doing it yourself, about going through the steps, learning, and doing it badly? Say, do you just want to eat something, or do you want to know how to cook? Do you just want a drawing, or do you want to learn how to express yourself in art, in a way that’s impossible to articulate or explain through a chat interface? adactio.com/links/22784

AdactioTop Front-end Bloggersread at source

AI is a Boring Technology - Christopher Butler

A thoughtful comparison of “AI” and electricity: The work is in two places. Regulation, which first requires the political will to want it, and which nobody gets to skip by hoping the technology will mature into fairness on its own. And efficiency — continued ground gained on open models small enough to run on ordinary machines. The future I want is local — off-grid AI. A model on a laptop that belongs to the person using it, the way a lamp belongs to the person who switches it on. adactio.com/links/22783

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Build your own Mobile App with Codex GPT-6 Astra - Full iOS and Android Course

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 […]

DequeMulti Author Blogs11 min read

How to test MCP Apps for accessibility, and why it matters

MCP Apps are still new enough that whatever approaches we can establish now will be the ones that stick over the long term. Which means if we can get accessibility right at this stage, it will stay right as the ecosystem grows. This is how we can avoid introducing the same problems we've had to deal with across the rest of the web for so long. The post How to test MCP Apps for accessibility, and why it matters appeared first on Deque .

AbduzeedoMulti Author Blogsread at source

Cinéma Cinéma — Editorial Design by Deux Huit Huit

Deux Huit Huit crafted a modular editorial design system for Cinéma Cinéma, uniting three independent Montreal movie theatres. Montreal studio Deux Huit Huit faced an intricate cultural challenge: bri...

Flavio CopesMore Front-end Bloggersread at source

How to use Codex Cloud

How to use Codex Cloud: prepare a reusable cloud environment, run Codex tasks on OpenAI's VMs while your laptop sleeps, and review the diff or open a PR.

DigitalOcean BlogMulti Author Blogs8 min read

Introducing Agent Droplets: everything an agent needs, one price, one bill

Last week we launched DigitalOcean Managed Agents in public preview: a managed runtime, governed access to more than 16,000 tools, serverless inference, and persistent memory and storage, all on one cloud. Developers have already started thousands of agent sessions. Today we’re…

Flavio CopesMore Front-end Bloggersread at source

Herdr keyboard shortcuts

Herdr keyboard shortcuts cheat sheet: the ctrl+b prefix, splits, tabs, panes, renaming, copy mode, the session navigator, and how to change any key.

HeyDesignerDeveloper/Designer Newsread at source

Field notes

EmDash 1.0: An open source CMS for Astro, Thinking Orbs: AI status indicator components for React, Improving site performance by shipping more CSS.

Flavio CopesMore Front-end Bloggersread at source

The complete guide to the OpenAI Agents API

The OpenAI Agents API runs the Codex agent harness for your app. A hands-on guide to sessions, events, tools, MCP, sandboxes, files, webhooks and costs.

SitePointThe Giantsread at source

Writing Native GPU Kernels in Rust with the CUDA-Rust Toolchain

Compile and run native GPU kernels directly in Rust using NVIDIA's cuda-rust toolchain, eliminating C++ NVCC bindings and unsafe FFI wrappers within a clean, multi-crate Cargo workspace. Continue reading Writing Native GPU Kernels in Rust with the CUDA-Rust Toolchain on SitePoint .

DigitalOcean BlogMulti Author Blogs4 min read

DigitalOcean MicroVMs: the Compute foundation for building your AI agent infrastructure (private preview)

An AI agent uses compute differently than a traditional application. Over a single session, it writes and runs code, calls a model, and waits on a tool or a person before picking the work back up. As a result, it needs real compute in short, intensive bursts. It also needs a…

Svelte blogLibraries, Frameworks, etc.read at source

SvelteKit 3 is here

Version 3.0 of SvelteKit, the official application framework for Svelte, is now available. If you’ve used earlier versions of SvelteKit, everything will feel very familiar — it’s the same framework with a little more polish, a little more type safety, and a little less junk. We’ve made migration as seamless as we can with the sv migrate command... npx sv migrate sveltekit - 3 -- tasks all -- confirm ...which will automatically migrate as much of your codebase as possible, and generate a TODO list for everything else. (If you’re agentically inclined, your robot friends will make short work of it.) To create a new app, run sv create : npx sv create my - new - app As with any major version bump there are a handful of breaking changes to be aware of, which are covered in the migration guide (or, more briefly, in the recent release candidate announcement ). Quick highlights: configuration now lives in vite.config.ts instead of svelte.config.js the $lib alias is now #lib , making use of standard subpath imports environment variables are more powerful and easier to use service workers are less boilerplatey error handling is improved across the board Are remote functions ready yet? Not quite. But it’s our top priority! Remote functions are a set of utilities for secure, efficient, type-safe client-server communication. You’ve likely seen some version of this idea in other frameworks, but we think you’re going to prefer this one. Using them requires Async Svelte , which for now requires an experimental flag. Bear with us. Join us in Ljubljana next month This is as good a place as any to remind everyone that the next in-person Svelte Summit is taking place on November 19-20 in the lovely town of Ljubljana, Slovenia. Among other things it will be a celebration of Svelte’s 10th birthday, and we’d love to share some cake with you.

Svelte blogLibraries, Frameworks, etc.read at source

What’s new in Svelte: October 2026

SvelteKit 3 is here! Check out the announcement post for the highlights, then run sv migrate to handle most of the upgrade for you. sv itself hit 1.0 on the same day, making the community add-on API official. Below you’ll find the last round of changes that landed before 3.0 - adapter API updates, zero-config deploys to Render and a few final breaking changes. Svelte Summit is also back for Svelte’s 10th birthday! It’s happening in Ljubljana on November 19-20 with talks from Rich Harris, Elliott Johnson, Paolo Ricciuti, Stanislav Khromov, pngwn and more. In-person and virtual tickets are available at sveltesummit.com . Svelte itself had a quiet month - 5.57.1 is all bug fixes and parser performance work. Per usual, there’s still plenty in the showcase... so let’s dive in! What’s new in SvelteKit 3 Adapters now receive the Svelte config as a function argument when adding Vite plugins ( 3.0.0-next.27 , #16986 ) Adapters can override getRequest and setResponse during vite dev and vite preview , so local requests behave more like the target platform ( 3.0.0-next.27 , Docs , #16753 ) Node: static assets are now served from tables recorded at build time instead of sirv ( adapter-node@6.0.0-next.13 , Docs , #16908 ) Netlify: the split and edge options can now be used together ( adapter-netlify@7.0.0-next.12 , Docs , #17045 ) adapter-auto now supports zero-config deployments to Render ( adapter-auto@8.0.0-next.4 , Docs , #16850 ) svelte-package now rewrites import aliases like #lib into relative imports, and warns when a .server. file or server directory doesn’t import a server-only module ( package@3.0.0 , #16360 , #16266 ) Breaking changes from the final prereleases The server now errors when a client-requested single-flight mutation refresh isn’t handled. Use ignore() or ignoreAll() on requested to skip a refresh on purpose ( 3.0.0-next.27 , Docs , #16892 ) Environment variables are now populated before instrumentation.server.js is evaluated, and the adapter instrumentation API has been updated to match ( 3.0.0-next.27 , Docs , #16303 ) builder.generateManifest has been replaced with builder.generateServerInstance and builder.manifest , and the Server constructor and SSRManifest type are no longer public ( 3.0.0-next.27 , Docs , #16875 , #16876 ) Query parameters beginning with x-sveltekit- are now rejected ( 3.0.0-next.28 , #17125 ) Cloudflare: the platform object has been removed. Bindings now come from an emulated cloudflare:workers module instead ( adapter-cloudflare@8.0.0-next.7 , Docs , #16754 ) Node: only static assets present at build time are served, they’re validated with content-hash ETag s instead of Last-Modified , and they only respond to GET and HEAD requests ( adapter-node@6.0.0-next.13 , Docs , #16908 ) Netlify: static files are now written based on the publish adapter option rather than reading netlify.toml ( adapter-netlify@7.0.0-next.12 , Docs , #17078 ) Upgrading an existing app? The migration guide covers every breaking change in 3.0. For all the bug fixes that went into the release, check out the SvelteKit / Adapter CHANGELOGs . What’s new in the Svelte CLI and AI Tools The drizzle add-on can now set up SQLite with Node’s built-in node:sqlite module ( sv@0.17.1 , Docs , #1206 ) sv 1.0 is out! New projects use SvelteKit 3 and #lib , and sv migrate sveltekit-3 upgrades existing apps ( sv@1.0.0 , Docs , #1138 ) The community add-on API is now official, and sv create can scaffold a new add-on from the addon template ( sv@1.0.0 , Docs , #1308 ) @sveltejs/enhanced-img is now available as an official add-on via sv add enhanced-img ( sv@1.0.0 , Docs , #1300 ) The Svelte OpenCode plugin now supports OpenCode V2 ( opencode@0.1.15 , #258 ) For all the bug fixes and performance improvements that went into Svelte 5.57.1 this month, check out the Svelte compiler’s CHANGELOG . CLI and AI tools updates can be found in the Svelte CLI and ai-tools releases. Community Showcase Apps & Sites built with Svelte Docvia is a framework-agnostic documentation library Powermove is an open-source video editor where an agent can add or fork panels, effects and workflows as extensions while the app is running npmchart lets you analyze and compare npm downloads, releases and GitHub activity for any package, from LayerChart author Sean Lynch GFX Computer is a graphics tool from Scott Tolinski built on TypeGPU and GSAP (requires HTML-in-Canvas to be enabled) PicoCAD 2 Web Viewer renders PicoCAD 2 models in the browser with optional special effects and GIF export VisuallyJs Circuit Diagram is a starter app for building an electronic circuit designer with VisuallyJs IMPIB is an in-browser image workflow for compressing, cropping and packaging responsive image variants, all processed locally with WebAssembly codecs Supvan Katasymbol Printer Web UI lets you print to Katasymbol thermal label printers straight from the browser on any computer or phone Deskfolk is a private AI team on your Mac that asks before risky moves and shows its work uptik schedules your video uploads so you don’t have to watch the clock to hit publish Mini Game Zone is a browser-based party game where two teams compete in quick mini-games like color matching and word races Arknights: Endfield Factory Planner helps you plan factories in Arknights: Endfield, with a Zig/WASM solver doing the heavy lifting SPIRAL WARDEN is an arena shooter/survival browser game with a Svelte UI on top of Phaser 3 physics Learning Resources Featuring Svelte Contributors and Ambassadors Make native desktop apps with Svelte 5 today using Custom Renderers by Code with Stanislav (featuring this WIP library ) WebMCP Challenge - GFX Computer by Scott Tolinski UI Libraries do not make your application accessible and Hello, Blog! by Enrico Sacchetti This Week in Svelte Ep. 150 Ep. 151 - Building a simple Svelte REPL Ep. 152 Ep. 153 Libraries, Tools & Components UI Components Sivir UI (last featured as Neel/UI in April 2024) has been rewritten as a shadcn-style component library built to be as themeable as possible FluentUI Svelte brings Microsoft’s Fluent UI to Svelte, now at 37 components with v0.4 Baby UI is a large collection of animation-first UI components horizon-layout is a zero-dependency IDE-style layout manager with dockable panes, draggable tabs, resizable splits and pop-out windows svelte5plus-calendar and svelte-json-discovery are zero-dependency calendar and JSON structure viewers, respectively Svelte-pasito is a dependency-free, customizable step indicator component Theme Toggles is a set of animated light/dark theme toggles that now supports Svelte Markdown Tools, Editors and Syntax Highlighting Twinkleplop is a delightful syntax highlighter from pngwn fractalpop is an SSR-safe, async syntax highlighter for SvelteKit that works with mdsvex and ships with Editor and Code Snippet components aragonite is a from-scratch markdown editor library for Svelte that doesn’t wrap ProseMirror or another editor svmd compiles CommonMark markdown straight into Svelte component source, so components and reactive expressions work inside your .md files Editable 2.0 is now in preview, letting clients edit text, images and videos directly on a Svelte site without a CMS svedocs is a customizable documentation framework built with SvelteKit Dev Tools Railway now offers an out-of-the-box SvelteKit template for hosting everything from static blogs to full-stack apps svebcomponents provides boilerplate-free, type-safe, server-renderable web components svdevtools is an early preview of a devtools package that lets you inspect components, props and state That’s it for this month! Let us know if we missed anything on Reddit or Discord . Until next time 👋🏼!

Twilio BlogMulti Author Blogsread at source

Your customers don't want an AI friend. They want an answer.

98% of companies are training AI to act more human, but personality didn't appear anywhere in what customers requested. Other important things did, though.

Twilio BlogMulti Author Blogsread at source

Prioritize your messages at scale with the Twilio Traffic Optimization Engine

The Traffic Optimization Engine is a suite of products working across networks, senders, geography, and use cases to provide messaging deliverability at scale.

AbduzeedoMulti Author Blogsread at source

Voluta: Inside Tiago Araujo's New Visual Identity

Tiago Araujo crafts an architectural visual identity for Voluta, merging Brazilian modernist furniture restoration with modular cobogó geometry. Voluta operates on a clear premise: Brazil is bound for...

AdactioTop Front-end Bloggersread at source

Wednesday session

Heroku BlogCompany/Startup Blogs1 min read

Introducing Team Authorizations

Team Authorizations let you create and manage API tokens and OAuth authorizations at the team and team’s resources level instead of tying them to one person’s account. Until now, every API token belonged to an individual. When that person left the team, changed roles, or lost access, any integration, CI/CD pipeline, or automation built on their token could break without warning, and nobody else could easily see what was at risk. Team Authorizations fixes that. Your integrations keep running no matter who's on the team. The post Introducing Team Authorizations appeared first on Heroku .

SitePointThe Giantsread at source

How to Implement Scoped Patient Consent in a FHIR API

null Continue reading How to Implement Scoped Patient Consent in a FHIR API on SitePoint .

AbduzeedoMulti Author Blogsread at source

Florian Cornut Unveils Café Gardo Packaging Design

Florian Cornut crafted modular packaging design for Café Gardo, uniting bold typography with Entre-Deux-Mers terroir and agroforestry coffee. Café Gardo takes its name from the confluence of the Garon...

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

Rachel AndrewTop Front-end Bloggers4 min read

More than words

While I’ve done a lot of reference documentation writing, my favourite type of work is writing tutorials and “how to” content. I enjoy the challenge of understanding a technology and an audience, then explaining the technology to that audience. AI seems to be particularly bad at creating this kind of content. When people try, they ... More than words

SitePointThe Giantsread at source

7 Tools for Maintaining SaaS Infrastructure With a Small IT Team

null Continue reading 7 Tools for Maintaining SaaS Infrastructure With a Small IT Team on SitePoint .

SitePointThe Giantsread at source

WebRTC Data Channels vs WebSockets for Real-Time Browser Games

The transport you choose shapes how a multiplayer browser game plays. How WebRTC data channels and WebSockets differ, and when to use each. Continue reading WebRTC Data Channels vs WebSockets for Real-Time Browser Games on SitePoint .

Next.js BlogLibraries, Frameworks, etc.read at source

September 2026 Security Release

The September 2026 security release for Next.js is now available

CodePenCompany/Startup Blogs1 min read

442: Pens are Actually Websites

Stephen and Chris jump on the podcast to talk about our (ahem, super cool) deployment feature. Any Pen can be a website! Well, they kinda are already, but you know what I mean. If you’re a PRO user all you do is click a button and the Pen is instantly deployed at a *.codepen.app website. […]

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.

CodePenCompany/Startup Blogsread at source

Chris’ Corner: Sweet Typography

Choosing beautiful and unusual fonts and implementing them in visually compelling ways is certainly a way to stand out in this period of so many websites looking same-y. I figure it’s a good week to send some sweet typography links I’ve saved (in the form of screenshots): Notable to me: Apple has a dedicated icons […]

Smashing MagazineThe Giants12 min read

Under Autumn’s Spell (October 2026 Wallpapers Edition)

October is just around the corner, which means it’s time for some new desktop wallpapers! Designed by the community for the community, they’re here to brighten your screens, and maybe spark some creativity along the way.

AdactioTop Front-end Bloggersread at source

Twenty five years of writing on adactio.com

On this day, twenty five years ago, I wrote my first journal entry on this website. Twenty five years! A quarter of a century! That’s a significant portion of the lifetime of the World Wide Web itself. Actually, this site did exist before September 30th, 2001 but it was very different. You can still look at the very first version of adactio.com if you want to wallow in the glory days of framesets and DHTML. But it was twenty five years ago that I started publishing my thoughts here, making adactio.com my online home. The funny thing is, I distinctly remember when I started writing that I was getting into this whole blogging thing really late. So many others had been doing it for a while at that point. Now there aren’t many of them left. It’s not just the journal though. At some point I added the links section . Later still, I added notes . Between those three sections, I usually end up posting something on this website at least once a day. But I don’t put any pressure on myself. That might be the secret to the longevity of the site. I don’t worry about running out of things to write about. If I go for a while without writing anything, that’s okay. But that rarely happens. There’s almost always something I want to share. Like I said in that first ever post : I’ll try and post fairly regularly but I don’t want to make any promises I can’t keep. I also wrote: Being a web developer, there’s bound to be lots of geeky, techy stuff but I also want a place where I can rant and rave about life in general. I think the tech stuff has decreased over the past few years. I’m more likely to write about music or books. I expect that trend will continue. I certainly have no plans to stop. It feels good to have my own little homestead on the web where I can do whatever I want. After twenty five years, it feels good to occasionally peruse the archive and revisit the past. Here’s to the next twenty five.

CSS WizardryTop Front-end Bloggersread at source

Web-Perf Wednesday 011 – SpeedCurve’s INP Observer Missed Its Threshold

A long-standing lux.js bug left Event Timing on its 104 ms default, while browser releases improve testing and rendering performance.

SyntaxPodcastsAudioListen

1043: I’m Using GPUI For Everything

Scott and Wes ditch Electron and Tauri for GPUI, the GPU accelerated Rust UI framework from the Zed team. They get into its React-like API, styling that feels a lot like Tailwind, GPUI Kit components, the community fork drama, and the tiny desktop apps Scott has built with it.…

SitePointThe Giantsread at source

Building Better Video Experiences on the Web: A Developer’s Guide to Modern Video Workflows

null Continue reading Building Better Video Experiences on the Web: A Developer’s Guide to Modern Video Workflows on SitePoint .

HeyDesignerDeveloper/Designer Newsread at source

On interfaces that let you change your mind

What does AI-readiness mean in design systems?, We are all product engineers now, Modern web types.

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…

SitePointThe Giantsread at source

AG-UI 1.0: A Stable Spec for Connecting AI Agents to Apps

AG-UI 1.0 freezes the agent-to-frontend event spec with a JSON Schema, generated SDKs, subagents, and human-in-the-loop interrupts. What to know. Continue reading AG-UI 1.0: A Stable Spec for Connecting AI Agents to Apps on SitePoint .

SitePointThe Giantsread at source

Cloudflare Sandbox SDK 1.0: Run Sandboxes from Durable Objects

Sandbox SDK 1.0 puts your Durable Object in charge of each Cloudflare sandbox container. What's new, example code, and the 0.x migration path. Continue reading Cloudflare Sandbox SDK 1.0: Run Sandboxes from Durable Objects on SitePoint .

SitePointThe Giantsread at source

GPT-6.1 Sol for Developers: Specs, Pricing, and Quick Start

GPT-6.1 Sol brings near-Astra coding at one-fifth of Astra's token price. Specs, $2/$10 pricing per million tokens, Copilot GA, and a quick start. Continue reading GPT-6.1 Sol for Developers: Specs, Pricing, and Quick Start on SitePoint .

phpiedTop Front-end Bloggers2 min read

llms.txt: agent-optimization wishful thinking

Can't remember where I stumbled upon a SEO-type guide that was suggesting agent-optimization via a robot.txt-like file llms.txt which lives in the web root and helps agents use your site. Perfect, I thought, my sightread.org has a zillion options, all bookmarkable. I imagined a world where someone asks ChatGPT for a sight reading exercise or […]

Auth0 BlogCompany/Startup Blogsread at source

Seven Architectural Readiness Checks Before Production Launch

Ensure your identity pipeline is production-ready, eliminate onboarding friction, and scale your application smoothly with Auth0 self-service plans.

DebugBear BlogCompany/Startup Blogs7 min read

Example.com Just Launched The Biggest Redesign In Decades

A look at the history of visual changes to example.com.

Frontend FocusMulti Author Blogsread at source

Why GitHub now ships more CSS, not less

🚀 Frontend Focus #​760 — September 30, 2026 | Read on the web Improving Site Performance by Shipping More CSS — GitHub details how it spent three years purging styled-components and 'CSS-in-JS' from github․com in favor of CSS Modules. The result? Shipping more CSS, but GitHub reports 55% less time to server-side render a page. Josh Black and Marie Lucca (GitHub) 💡 CSS Modules isn't a browser feature or standard, but a widely supported bundler convention where classes in a .module.css file get rewritten to unique names, scoping styles per file with no runtime cost. Reports That Time Out Aren't a Frontend Bug — The report worked in testing. In production, it scans months of rows and times out before it renders. That's not a frontend bug, it's the query behind it. TimescaleDB extends Postgres so that query returns fast at scale. Get $1000 credit to start . Tiger Data (creators of TimescaleDB) sponsor EmDash 1.0: An Open Source CMS for Astro — Cloudflare's alternative to WordPress, first announced in April, has reached 1.0. Each site ships with an MCP server, meaning you can set an agent to work out of the box. To accompany the launch, plugins can now be submitted to its registry . Matt Kane How Anthropic Made Claude's Web App Faster — The tale of how a recent sprint (with Claude doing much of the work) cut Claude's time-to-typeable at the 75th percentile from 3.1s to 0.55s, from tracking layout shifts too small for CLS to flag, to a :root:has() selector costing 24ms per DOM change, and a jump caused by Chrome pre-rendering the page at the wrong height. Wang, Attard, and G (Anthropic) ⚡️ IN BRIEF 🌀 Cloudflare has launched Turnstile Spin , a way to let AI agents set up Turnstile's protection on sites you're building. Cloudflare now also has a new cf CLI client which can work with all of its APIs (unlike Wrangler). 🧭 Safari Technology Preview 253 is out now , adding support for network throttling within the Web Inspector, amongst a huge number of fixes. 🦊 Firefox 157 has a new look , which you can see in action here . 📉 In response to recent chatter around the 'death' of web education , Andy Bell shares a bleak sketch of where things stand. 🟢 Version 31 of developer browser Polypane is out now , adding a new canvas layout, elements panel improvements, and an update to Chromium 155. 🔥 Got something you want to say about HTML? Manuel Matuzović is seeking submissions for this year's HTMHell Advent Calendar . 📙 Articles, Opinions & Tutorials Detect When Elements Overlap with CSS — A neat bit of CSS lateral thinking to detect when two elements get too close or overlap, no JavaScript needed. It combines anchor positioning, style container queries, and scroll-driven animations, using an overflowing 'measure' element as the trigger. Ahmad Shadeed Connection Allowlists: Lock Down Where a Page Can Connect — Chrome 152 adds support for a Connection-Allowlist header to tell the browser which servers a page is allowed to talk to (and block everything else). Benz & Zapata (Chrome for Developers) The Future of Frontend Is Agentic: Free OpenAI Course — Join OpenAI's Katia Gil Guzman and learn how to direct Codex through landing pages, dashboards, 3D interfaces, and shipping into an existing codebase. Master.dev sponsor Which Features Should Browsers Fix Together in 2027? — Ollie shares what features he believes the web platform should focus on next year, including the Sanitizer API , focusgroup , and grid-lanes , along with what early-stage things should be in consideration for the future. Ollie Williams Extracting Grid Information Using CSS — A neat CSS-only proof of concept technique where you can get information about a grid structure (number of columns/rows, where items sit on the grid, etc). The technique relies on scroll-driven animations, oddly enough. Temani Afif The Interface Cheat Sheet — A helpful illustrated list of good UI advice, touching on points from border radiuses and transitions to the use of color, scaling and accessibility. Jakub Krehel The Era of Agentic Mobile Development Is Built on Expo — Build with our CLI and dev tools. Test on our cloud simulators. And ship with the best CI/CD for mobile development. Expo sponsor Custom Attributes Polyfill — A polyfill for the proposed Custom Attributes spec, letting you attach reusable behaviours to any element via custom attributes with their own lifecycle hooks. Keith Cirkel Fluid Typography — Donnie argues that because container widths are unpredictable, using container queries to drive fluid font sizing isn't the right choice. He suggests we stick with viewport units to retain true control. Donnie D’Amato Stop Buttons Triggering Zoom When They’re Double Tapped Andy Bell Stop Treating CSS Container Queries Like Traditional Media Queries Victor Ayomipo Component Testing: A Practical Guide for Frontend Developers Storybook Blog 🧰 Tools, Code & Resources Transitions.dev: Essential UI Transitions for Web Apps — The home page shows a series of cards, each of which displays a CSS-based UI animation. You can also install the set as an agent skill for your AI coding tool. Some of the transitions are part of a "Pro" plan. Source code . Jakub Antalik Markuplint 5.0: An HTML Linter for All Markup Developers — This well-established linter recently hit version 5. The repo is here , and you can see things in action in the playground . Yusuke Hirao Make Your Logo Brighter Than White — If you've got an HDR display, this browser-based tool will quickly make its trick clear. Drop in your logo, choose which colors should glow, and get an HDR version ready to download. Claims to make things up to 7.5x brighter in Chrome and Safari. Chris Bennett 🔊 soundcn: A Curated Collection of Sound Effects for Modern Web Apps — A comprehensive set of 800+ sounds that's installable via the shadcn registry. You can browse them by category and test each one by hovering over its card. Pay attention to the licenses of sounds you use. GitHub repo . Kapish Dima 📰 Classifieds Balance build time with your time - Our technologists do meaningful work, and we give them the support to have a meaningful life, too. 🟨 Our weekly JavaScript newsletter shares cool projects, news, and articles with over 150,000 developers. 🙈 ...and finally Here's a kinda crude font foundry that takes two web fonts and mixes their glyphs, with unsettling results. I mean, why not make a Times New Roman/Comic Sans hybrid to catch folks off guard? And, yes, you can download the end result.

Human Who CodesTop Front-end Bloggers4 min read

Introducing PR Comment Inbox

PR Comment Inbox helps authors track and respond to every conversation in a busy GitHub pull request.

The Astro BlogLibraries, Frameworks, etc.read at source

What's new in Astro - September 2026

September 2026 - Astro Germany, Evil Martians migration story, and more!

Twilio BlogMulti Author Blogsread at source

Augment Voice Calls with Twilio Conversation Intelligence Using Node.js

Learn how to capture real-time call summaries, sentiment analysis, and script adherence from Twilio voice calls and store them in SQLite using Node.js.

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

HeyDesignerDeveloper/Designer Newsread at source

The default is not a design decision

For the designless, How is AI changing design?, UX context design, Delegative UX: Designing the agent experience , Design system conventions, and more.

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Python Algorithmic Trading Course – Massive, SnapTrade & Alpaca Integrations

The Mozilla BlogBrowsers, engines, etc.3 min read

More modern. More flexible. Still Firefox.

What comes to mind when you think of Firefox? Is it our best-in-class privacy features and ad blocking capabilities? Our partnerships with Wrexham, NVIDIA or Mistral? Or maybe our adorable mascot Kit? If you’ve been following Firefox this year, you’ve seen us add new ways to get things done while giving you more choice over […] The post More modern. More flexible. Still Firefox. appeared first on The Mozilla Blog .

AdactioTop Front-end Bloggersread at source

Justice for CSS | WIRED

In defense of the girliest programming language. I was pleasantly surprised to find a blog post of mine quoted in this article. adactio.com/links/22780

Netlify BlogLibraries, Frameworks, etc.read at source

5x faster Edge Functions: v8 isolates to Firecracker MicroVMs

See how Netlify rebuilt Edge Functions on MicroVMs to deliver lower latency, greater reliability, and faster log delivery.

HeyDesignerDeveloper/Designer Newsread at source

Don't forget to design

A loading state within a loading state, Understanding System One, What happens when you can build it all yourself, Skip the tools, make the outcomes.

HTML All The ThingsPodcastsAudioListen

How to Prepare for a Tech Layoff

Tech layoffs can happen with little warning, even when your company is doing well. In this episode, Matt and Mike discuss the warning signs that layoffs may be coming, how to prepare while you're still employed, and what to do when a layoff starts looking imminent. From building…

Auth0 BlogCompany/Startup Blogsread at source

Integrating Claude Code with Auth0 APIs

Pair Claude Code with the Auth0 MCP Server to audit JWT configs, scaffold M2M apps, and refactor auth code from the terminal — with scoped access and security guardrails.

Auth0 BlogCompany/Startup Blogsread at source

Introducing IdentiFlows.dev: A Visual Reference for Identity Flows

Find out how to quickly get the identity flow diagram you were looking for and cannot remember where you last saw it.

JavaScript WeeklyMulti Author Blogsread at source

A-ha's Take on Me, recreated in pure JavaScript

#​804 — September 29, 2026 Read on the Web JavaScript Weekly How Anthropic Made Claude's Apps 3x Faster in Two Weeks — A grab bag of performance lessons from a sprint that cut p75 'time-to-typeable' from 3.1s to 0.55s. Em dashes ( the irony! ) pushed V8 onto a slower regex path, a stray location.reload() caused half a million hidden reloads a day, and more. Wang, Attard, and G (Anthropic) Still Writing Tests? Meticulous Is Here — Notion, Dropbox and Wiz are now using a testing paradigm they can’t ship without. Built by former Palantir engineers, Meticulous creates an evolving suite of deterministic E2E UI tests, delivering exhaustive coverage with zero developer effort. Meticulous AI sponsor Vite+ 1.0: One CLI for Your Entire JavaScript Toolchain — The single vp command can now manage your Node runtime (if you wish), package manager, dev server, linting, formatting, testing, builds and task running, configured from vite.config.ts . vp migrate can be used to bring existing Vite, Vitest, ESLint, tsup, and similar setups into Vite+. VoidZero 💡 Evan You also looks back at four months of VoidZero at Cloudflare , including work on the Oxc React Compiler, Vitest 5, stable type-aware linting, and more. IN BRIEF: The latest TC39 meeting is taking place in Tokyo now, and three iterator proposals have already advanced to stage 4: chunking , join and includes (the latter just shipped in Chrome 154 ). Jarred Sumner shared 𝕏 a preview of Bun compiling JavaScript ahead of time : 24% faster startup and 48% less memory for Claude Code, but ~2x binary size. 🎉 Cloudflare finally has a single CLI for all of its APIs . cf is written in TypeScript and covers everything, whereas Wrangler only ever covered a subset. The Angular team is building a partly Rust-powered compiler , because TypeScript 7's Go port lacks APIs the current one relies on. RELEASES: MSW (Mock Service Worker) 3.0 – The popular API mocking library is now ESM-only, adds a Vite plugin, supports GraphQL subscriptions, and can intercept page navigations and form submissions. Vinext 1.0 – Cloudflare's Vite-based Next.js reimplementation now supports the Pages and App Routers, and offers a migration path for existing apps. Mermaid 12.0 – The diagramming tool now defaults to the ELK layout engine for flowchart, class, state and similar diagrams, so existing ones will look different unless you set layout: dagre . Also adds UML use case diagrams . pnpm 12.8 , Angular 22.2 , TinyBase 10 , QUnit 3.0 📖 Articles and Videos The Grand Unifying Architecture of Frontend — SolidJS's creator argues that HTMX, React, LiveView, and friends differ mostly in how they split the same three jobs (navigation, content, and instant UI feedback) between client and server. He then shows how Solid 2.0 aims to cover the whole spectrum. Ryan Carniato Build Products That Help People Build Their Lives — Fidelity technologists can change the way our clients invest - for the better and for everyone. Fidelity Careers sponsor Optimizing Objects with null Prototypes — In V8, objects created with { __proto__: null } or Object.create(null) start in a slower 'dictionary mode'. Matteo shows how creating a plain object and then setting its prototype to null preserves fast properties. Matteo Collina 💡 If you fancy going deeper, Fast properties in V8 is the V8 team's 2017 explainer of how objects switch between fast and 'dictionary' mode. Node.js Built-ins That Replace npm Packages — A tour of 12 Node built-ins that replace common ecosystem packages along with their stability levels and some gotchas that might keep you using the established alternatives. Flavio Copes 📄 JavaScript's Greatest Pun? ${{ }} – Looks like Mustache, but ${{ name }} passes an object using shorthand properties to a tag function, preserving both the variable's name and value. Nishant Shukla 📄 How GitHub Improved Performance by Moving Off CSS-in-JS Josh Black and Marie Lucca (GitHub) 🛠 Code & Tools Size Limit: A JavaScript Performance Budgeting Tool — Set a size or load-time budget for your code and this tool can fail CI (or flag a PR) if a change goes over it. You can also do one-off checks and see visualizations of where the bytes are. Framework-agnostic and doesn’t care which bundler or CI you use. Andrey Sitnik Your UI Gets Blamed for a Slow Query — TimescaleDB extends Postgres so the query behind your UI returns fast as data grows. Get $1000 credit to start . Tiger Data (creators of TimescaleDB) sponsor EmDash 1.0: Cloudflare's WordPress 'Successor' is Now Stable — An Astro-based alternative to WordPress, now with a decentralized AT Protocol-based plugin registry and plugins that run in sandboxes. It’s not Cloudflare-only, either, as it also runs on Node.js. Buscemi, Kane, and Pham (Cloudflare) 📝 DOCX 9.8: Generate Word .docx Files from JavaScript — A comprehensive library for generating docx files. It’s only a few months since we linked to it, but this is a big release with support for charts, shapes and watermarks, plus more math notation support. ( Homepage .) Dolan Miu 🔊 wavesurfer 8.0 – Popular audio waveform renderer and player. Refactored for better efficiency, with numerous bug fixes. pretty-bytes 7.2 – Convert byte quantities into human readable strings. ✉️ postal-mime 4.0 – An email parsing library that works everywhere. Typia 15.0 – Turn pure TypeScript types into runtime validators. 📰 Classifieds The future of mobile development is agentic. For years, mobile shipped slower than the web. Now, agents are coding/testing/shipping all on Expo . 🤖 Blocking all bots breaks AI agents. Blocking none invites fraud. Fingerprint tells verified agents from bad actors. SurveyJS : Build complex forms faster with a drag-and-drop builder for any JavaScript app. Self-hosted and backend-agnostic. 📢 Elsewhere in the ecosystem 🎵 Tonny Espeset has recreated the '80s hit Take on Me by A-ha in pure JavaScript ( along with synthesized vocals! ), running through the always-entertaining Dittytoy online JavaScript music playground. Git 2.56 has just been released. It adds git add --resolved to safely stage merge conflict fixes, git branch --delete-merged for bulk branch cleanup, and more. All explained within. TanStack's Tanner Linsley built Redact , 'an alternative logical projection of React' aiming for full API compatibility with a simpler implementation, smaller bundles and better performance. It's now on GitHub . A quick history of why certain port numbers like 3000 and 8080 are commonly used in development.

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

Twilio BlogMulti Author Blogsread at source

How to Augment Voice Calls with Twilio Intelligence in C#

Twilio BlogMulti Author Blogsread at source

How to Augment Voice Calls with Twilio Intelligence

In this tutorial you'll learn how to use Conversation Intelligence, and Conversation Orchestrator, and Conversation Memory to retrieve customer call summaries and an analysis of the caller's sentiment.

Twilio BlogMulti Author Blogsread at source

86% of brands think their AI works. Only 51% of customers agree.

Brands think they’ve designed AI that solves all their customers problems, but almost half of customers disagree. Here’s what’s happening.

Jens Oliver MeiertTop Front-end Bloggersread at source

The AWAGAM Request Blocker, Now Available on Android

A DNS-based solution to use your blocklists also on your mobile.

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…

Frontend Masters BlogMore Front-end Bloggers9 min read

Making the Most of Vercel’s AI SDK with Cloudflare Durable Objects

Let's integrate Vercel's AI SDK with Cloudflare's Durable Objects to improve user experience in a fitness tracker application.

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 […]

Net NinjaYouTube ChannelsVideoWatch on YouTube

The Modern Coder Bootcamp (with AI) - New Course!

W3C NewsBrowsers, engines, etc.1 min read

Consortium Members elect Board of Directors

World Wide Web Consortium Members have elected seven individuals to the World Wide Web Consortium, Inc. Board of Directors

SyntaxPodcastsAudioListen

1042: Is the Jev Hype Overblown?

Is Jev actually a leap forward for classification or just hype and fake demos? We dig in, plus Claude Code’s new AGENTS.md support, TinyCast (the free, open-source Raycast alternative), an iPhone Fold simulator in Xcode, and a stack of dev tools you’ll want to try Show Notes…

remy sharp's b:logTop Front-end Bloggers1 min read

There are no "rogue" AI agents [link]

I've read so many posts in the last few months about AI agents going "rogue" and this post does a good job of calling absolute bullshit on the language being used by media outlets (and the tech companies themselves). AI cannot think for itself, nor can it take independent actions. But anthropomorphizing language suggesting it can is how the technology is described. I keep saying this, but the companies are responsible and should be prosecuted as such. Any other smaller company or individual caught in a cyber attack (which is what these reports actually are) would be likely jailed and banned from using computers again. Lest we forget Aaron Swartz. Original link: eoinhiggins.substack.com/[…]/there-are-no-rogue-ai-agents

DigitalOcean BlogMulti Author Blogs9 min read

How DigitalOcean Manages Credentials for Autonomous Agents

Built to align with NVIDIA’s Open Agent Safety Platform strategy for securing autonomous agents Consider an agent investigating a duplicate charge. It reads the customer’s email, checks their billing history, issues a refund, and updates a support ticket. Completing that…

W3C BlogBrowsers, engines, etc.4 min read

Recap of the web & AI international standards seminar: generative UI and WebSkill

Hosted by the W3C Shenzhen Representative Office as part of the 2026 CCF Standards Technical Conference, this seminar brought together industry experts to discuss emerging technologies and standardization challenges related to generative UI, WebSkill, and web AI.

Auth0 BlogCompany/Startup Blogsread at source

Auth0 for ChatGPT - Build and Manage Identity by Just Asking

The Auth0 plugin for ChatGPT can connect your account and configure applications, generate real SDK code matched to your tenant, and get accurate Auth0 answers — all without leaving your chat.

Auth0 BlogCompany/Startup Blogsread at source

Securing Agentic Commerce Using Auth0 and the Universal Commerce Protocol (UCP)

Explore how the UCP and Auth0 enable secure agentic commerce, allowing retail brands to safely transact through AI agents.

Calibre BlogCompany/Startup Blogsread at source

Lazy Loading Images and Media: How Far Ahead Browsers Fetch

How far ahead Chrome, Firefox and Safari fetch lazy media, why a lazy hero image slows your page, and where to use lazy, eager and fetchpriority.

Twilio BlogMulti Author Blogsread at source

How to Build an RCS Business Messaging Campaign with Twilio

Build a rich RCS Business Messaging campaign with Twilio and Node.js. Learn how to send templates, track webhooks, and handle replies step by step.

Twilio BlogMulti Author Blogsread at source

How to Build an RCS Business Messaging Campaign with Twilio in PHP

In this tutorial, you’ll learn how to build an RCS Business Messaging campaign in PHP

Twilio BlogMulti Author Blogsread at source

Building Localised, Enterprise-Grade AI Voice Agents

Learn how to scale AI voice agents from pilot to production. Explore tips on low-latency streaming, localisation, and enterprise stacks.

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

Speckyboy Design MagazineDeveloper/Designer News4 min read

How AI Can Help You Document Your WordPress Projects

Struggling to keep WordPress project notes up to date? We take a look at how AI can document code changes, explain features, store key details, and help build a system for ongoing project records. The post How AI Can Help You Document Your WordPress Projects appeared first on Speckyboy Design Magazine .

Dave RupertTop Front-end Bloggersread at source

Tupo

“Triple Threat” Josh Collinsworth has a brand new daily puzzler game called Tupo . On it’s surface it looks like a simplified 4×4 Sudoku block but with colored squares. That is the foundation for a simple ruleset: Every row and column contains each number exactly once Every row and column contains each color exactly once Every number + color combination appears exactly once Mini Sudoku with colors. Got it. How hard could it be? Hahahahahahahahahaha. You naive bastard. It’s deceptively difficult and then right when you get the hang of it, it jumps to a 5×5 grid on Friday. Simple yet complex is a difficult design concept to achieve and Josh did a great job. I got a sneak peek of the game a couple weeks ago and it quickly earned the top spot in my daily puzzle playlist. Before Inkwell Games , before Clues by Sam , I play Tupo. If you’re a fan of daily puzzlers, try Tupo. It won’t disappoint. → Play Tupo

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.

remy sharp's b:logTop Front-end Bloggersread at source

A Trump team wants to automate U.S. Web Design System accessibility testing. Experts are worried. [link]

This is gut wrenching. This is another example of cost cutting exercises that affect minorities. This isn't a story about AI, it's (another) story about pulling funding from the places that need to support those that need it to increase the profits of those who don't. Most accessibility testing is evaluating how a real human user — particularly a real human user with accessibility needs, like a screen reader user or other assisted technology user — would interact with the site. It is about what a human would experience. Original link: fedscoop.com/trump-team-automate-uswds-accessibility-testing-ai

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…

Chris HawkesYouTube ChannelsVideoWatch on YouTube

The Rise of Territorial Programmers in the Age of AI

HTML All The ThingsPodcastsAudioListen

AI’s Biggest Problem Isn’t Intelligence Anymore

AI models are already remarkably capable, but their intelligence doesn’t matter much if they’re too expensive, limited, or confusing to use. In this edition of the Web News, Matt and Mike discuss why cheaper and faster models, higher usage limits, and a better user experience…

remy sharp's b:logTop Front-end Bloggers4 min read

Redesign: fonts, alignment and nav [blog]

As I continue occasionally tinker on the redesign I've started (and often think "what's the point, current design is fine"), I wanted to share some of the problems I've run in to. Problems mostly for me because I'm not a designer, and I don't have the wiring to know what works.

Jens Oliver MeiertTop Front-end Bloggersread at source

I’m Giving Up on Outreach to Parties and Governments

Why I’m abandoning direct political outreach, and what silence and inaction from leaders reveals about Europe’s path forward.

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

DigitalOcean BlogMulti Author Blogs9 min read

The agent-first cloud: why we built Managed Agents

Compute (EC2) opened the front door to the first generation cloud. Agents need something different: compute, inference, and data working as one. We built the cloud that delivers all three as one simple, intuitive developer experience for AI-natives. Every era of the cloud has…

Frontend Masters BlogMore Front-end Bloggers4 min read

Randomly Place an Element Along Edge of Another Element

We can animate an element along the border edge of another element to random positions... pretty easily? Might as well be a cute dog.

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

Per-Layer Embeddings (PLE) in Gemma 4 explained

AdactioTop Front-end Bloggersread at source

The death of web development education – Rescuing a field from disappearing

A grim tally. adactio.com/links/22779

AdactioTop Front-end Bloggersread at source

Think local

If you’re anything like me, you’re sick of hearing about so-called “AI”. We are not a fringe. The majority consensus amongst actual regular people is that this is being forced down our throats and stuffed into our eyes and ears. That’s why it pains me that I’m about to add more fecal matter onto the ever-growing pile of shit by writing yet another hot take related to large language models. If you stop reading now, I don’t blame you. In fact, I applaud you. Anyway… The last time I made the mistake of writing about large language models , I set out my stall thusly: Software is almost certainly the killer app for large language models. I think the artists, writers, and musicians will be okay, or at least as okay as they ever were. It turns out that humans like things made by other humans. And y’know what? If I had to choose which endeavour I’d rather see automated away—programming or art—it’s no competition. I stand by that. But it doesn’t mean that software development gets a free pass to use exploitative extractive tools with a clear conscience. You can use these tools in a thoughtless way or you can use them thoughtfully. I really like Robin Sloan’s approach : The consensus vision seems to involve AI working for you day-to-day, a constant ambient presence, sparkles in everything; even cautious Apple has succumbed. I’m not interested in that. My alternative: get your wish, then stuff the genie back into the lamp. He’s got a set of rules: You must actually and consistently use anything you build for two months before posting about it. Ideally, never post about it. (I know I am breaking this rule, but my purpose is pedagogical, and anyway, I’ve got more apps I didn’t tell you about.) Don’t let the AI agent name the app. You pick the name. Don’t distribute the app, not even for free. Don’t post the code on GitHub. This is not software for glory; it is software for you. For most of my career, I’ve wanted web development to become something that anyone could do. I really like the World Wide Web and I think it would be great if more people had their own websites. But I totally get that most people have no interest in learning HTML. One of my biggest fears for the web was that it would become the domain of professionals only; a gatekeeping priesthood who get to make stuff while everyone else goes without. The efficacy of large language models for coding would seem to lessen that possibility. Especially if you apply Robin’s approach. The Session has an API . There are also weekly data dumps of everything on the site. The idea is that other people can use these to build other useful tools for themselves. Lately, there’s been a big uptick of these kinds of tools , mostly made by someone with the help of large language models. Often they have no previous experience of making software. This is good. But I get uneasy when I see people selling these tools to other people. Call me old-fashioned but I feel that if you’re going to ask people to pay for a thing, you should understand that thing. I think that’s why Robin’s list of suggestions resonates with me. But… To build software with large language models today, you pretty much have to pay some money to the absolute worst sort of people, the ones pedalling tokens to their “hyperscale” products. You can’t avoid being complicit because there isn’t really an alternative. I think that might change. I’m not going to make predictions. That’s a mug’s game. But I might attempt a gentle unspooling of one potential future… First off, there’s a crash coming. That’s pretty much inevitable at this point. The only question is how much collatoral damage it’s going to do to the world. Right now, tokens are subsidised. The hyperscalers lose money when people use their products. It’s possible that we are now living through a golden age of making software relatively cheaply with large language models. That will change when the hyperscalers start charging for the true cost of tokens. Not for everyone though. I believe that enterprise software companies will happily pay the true price for tokens. It’ll be like Google Glass ; that was an absolute disaster for the consumer market but went on to have a productive second life in factories. You know when you’re in an airport and you see advertisements that are not for you, but for faceless corporations? You know the ones. They’re all “cloud” this and “sap” that. Now they’re all about “AI”. It’s not for us. It’s for them. Does this spell the end of making home-cooked apps with large language models? I don’t think so. The hyperscalers might become unaffordable to most people, but keep an eye on open models. And keep your other eye on local models. Right now, open local models aren’t as good as the large language models that require data centres of computation and energy. But they aren’t massively far behind. And if the recent history of large language models has taught us anything, it’s that “good enough” is fine. Take Google Search. They decided to fuck it up by forcing generated summaries into your eyeballs above the actual search results. These summaries aren’t 100% accurate. Let’s be generous and say they’re accurate more than 90% of the time. According to Google, that’s good enough. So, sure, local open models may never reach the levels of data-centre-powered large language models. But they don’t need to. They just need to be good enough. I’m really looking forward to that. My issue with large language models has never been the actual technology, which is genuinely fascinating. My issue is with the power dynamics, of being robbed of agency, of the over-inflated hype and criti-hype being used to convince us of an inevitable future where a small group of very rich men are masters over our lives. I’d love to see the technology decoupled from the current depressing narrative. I’d love to see a thousand homemade software flowers bloom from open local language models.

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. […]

AdactioTop Front-end Bloggersread at source

Is AI ruining my brain?

I am an AI skeptic/hater/slow adopter, due to a combination of concerns about the ethics and environmental impact of AI and the fact that I like doing things myself. I knit my own socks, I built a swing for my porch this summer, and every Thanksgiving I make pies from scratch — even the crust (do you like my handmade em dash?). adactio.com/links/22777

W3C BlogBrowsers, engines, etc.6 min read

Crafting WCAG 3 for more accessible user experiences

In this post, W3C's Web Accessibility Initiative (WAI) Director Shawn Lawton Henry covers some of the stakes and challenges in developing W3C Accessibility Guidelines (WCAG) 3 that is under active development.

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

AdactioTop Front-end Bloggersread at source

[this is aaronland] it’s a funny way to tell a story

Aaron’s talk at Papercamp opened with this: Fun fact: Alex and I first met 19 years ago at a conference in Paris where, coincidentally, I was speaking about something I referred to as the “ Papernet ”. Amazingly there are no photographs, that I could find online, of either of us speaking. This is a nice passage that Jeremy Keith wrote about the event at the time. adactio.com/links/22776

Auth0 BlogCompany/Startup Blogsread at source

Stop Building MFA from Scratch (And What to Do Instead)

Learn about the hidden costs of building multi-factor authentication (MFA) from scratch and how Auth0 streamlines the implementation process.

Twilio BlogMulti Author Blogsread at source

How to Build an RCS Business Messaging Campaign with Twilio in C#

Twilio BlogMulti Author Blogsread at source

What is AI agent orchestration? How it works in 2026

AI agent orchestration coordinates multiple AI agents across a workflow. Learn how routing, shared memory, and human handoff work in 2026.

Twilio BlogMulti Author Blogsread at source

How to handle real-time interruptions in your AI voice agent

Callers interrupt agents and call from noisy rooms. That's real life. Here's how to tune barge-in, turn detection, and context so your AI voice agent keeps up.

Twilio BlogMulti Author Blogsread at source

The #1 AI behavior hurting your customers’ experiences

40% of businesses say that lost context between channels is the AI behavior hurting their brand the most. Here's why it breaks (and how to fix it).

Web Accessibility Initiative (WAI)Browsers, engines, etc.read at source

Crafting WCAG 3 for more accessible user experiences

In the W3C blog post Crafting WCAG 3 for more accessible user experiences, W3C WAI Director Shawn Lawton Henry covers some of the stakes and challenges in developing W3C Accessibility Guidelines (WCAG) 3.

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

The next generation of voice AI with Google DeepMind and Sierra AI

AdactioTop Front-end Bloggersread at source

Thursday session

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"

Google ChromeBrowsers, engines, etc.read at source

5 ways to upgrade your study habits with Chrome

The video shows a whiteboard that says "Keeping Tabs on Google Chrome."

The Mozilla BlogBrowsers, engines, etc.5 min read

Classic, Private, or Smart? Choose the right Firefox window for every task

We spend a lot of time browsing online. Whether you are researching for work, planning a trip, paying your bills, or scrolling through social media, your browser is there for it all. While all these tasks are very different in nature, a lot of people still tend to stick to the same window type for […] The post Classic, Private, or Smart? Choose the right Firefox window for every task appeared first on The Mozilla Blog .

Web Tools WeeklyMulti Author Blogsread at source

Web Tools Weekly Issue #688

Frameworks, AI Tools, Vue Tools

Dave RupertTop Front-end Bloggersread at source

How Many Dudes?

If I’ve been missing from the internet it’s because I’ve been spending my evenings grinding on a game from Butterscotch Shenanigans called How Many Dudes? Hot off the heels of the release of their massive multi-year sequel project Crashlands 2 , the family+ operation at BS turned a little game-jam style prototype into a “Featured on the Apple App Store” game in under a year. How Many Dudes? seeks to solve ancient internet riddles like: How many toddlers could you take on in a fight? Would you rather fight 100 duck-sized horses or 1 horse-sized duck? Who would win: 100 men vs 1 gorilla? The premise is pretty simple. Build a team of fighters with different abilities and power-ups and enter the arena to fight different enemies and bosses. For me this game has it all: Balatro -level of power creep Impactful decision making So much economies Great art style and hilarious copy A proper amount of gore Enjoyable difficulty curve RNG, but not too much Those characteristics all lead toward a game with great replay-ability. Mastering lower tiers unlocks characters and power-ups in higher tiers creating a perfect “loopback” system where I want to 100% the lower tiers before moving on. A full round takes around 20 minutes but you can stop and start it effortlessly like a good casual game. I could go on forever about the power stacking economies in this game but it’s the little bits that impress me the most. Like how the characters don’t have proper walk animations and instead rotate and bob as they shimmy their way across the screen like a paper cutout on a popsicle stick. This may seem like corner cutting but on a screen with 1000+ combatants, particle effects, blood splatter, and explosions… I bet limiting characters to a single low-frame combat animation cycle is a critical ingredient for good performance. Then there’s the characters themselves. With nods to other game franchises, movie tropes, and popular (but litigious) dungeon crawling tabletop systems, the game about memes builds on cultural memes to add depth. And even though these characters don’t talk, interact, and you don’t technically control them, the hilarious copy hidden within the power-ups and item pick-ups gives a game with a lot of characters a ton of character. I will confess some bias; Butterscotch Shenanigans is one of my favorite gamedev studios and I’m internet friends with their CEO Adam Coster ( he’s even been on my podcast ). It didn’t start like that. Before knowing Adam, I watched their GDC talks and mentioned their studio in a post I wrote about a GMTK video essay . I like their approach to prototyping a lot but what I like most about Butterscotch Shenanigans is that they have that old-world #indieweb ethos of sharing what you know . They have a blog for detailing their process , a podcast, and offer open source tools for GameMaker on GitHub. If I ever pivoted to gamedev, I’d want to build a studio like theirs. A big inspiration for me. Anyways, that’s my review of How Many Dudes? If you like deck-building rougelikes or button mashing power fantasies, I think you’ll like this game. And here’s my Dude tier list in case you’re wondering…

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Inside a Hong Kong Hackathon [Full Documentary]

Geoff GrahamMore Front-end Bloggersread at source

Never forget the first chat agent UI.

Frontend Masters BlogMore Front-end Bloggersread at source

100 Devs

Kevin Powell is doing game-show-style (specifically Family Feud) shorts where, using data from a survey of 100 devs, he asks another dev what the most popular answers were. Here’s:

AdactioTop Front-end Bloggersread at source

The summer of ’26

It was the autumnal equinox a few days ago. For a moment our planet was balanced perfectly, with everyone experience twelve hours of daylight and twelve hours of darkness. Here in the northern hemisphere, the days will get shorter and the nights will get longer until the winter solstice. Summer is officially over. I saw it out with my now-annual trip to Spain for the Cáceres Irish Fleadh . It was, as always, great fun. Nothing beats playing loads of tunes into the early hours while sitting outdoors in a beautiful old town. I visited some lovely places this summer. A trip to Greece . A trip to Italy . Even my trip to Cork was blessed with bright sunshine. But I think the highlight was the three weeks I spent in the north of Ireland . It helped that being there meant I escaped the worst of the heatwave here in England. All in all, it was a thoroughly enjoyable summer filled with travel, music, good food, and sunshine. Now it’s time to hunker down at home.

W3C NewsBrowsers, engines, etc.1 min read

W3C Workshop Report: The Future of ODRL

W3C is pleased to announce the report from the W3C Workshop on the Future of ODRL, held in July 2026 in London, UK, and online.

W3C NewsBrowsers, engines, etc.read at source

First Public Working Draft: Bitstring Status List v1.1

This specification describes a privacy-preserving, space-efficient, and high-performance mechanism for publishing status information such as suspension or revocation of Verifiable Credentials through use of bitstrings.

W3C NewsBrowsers, engines, etc.read at source

Group Note Draft: Verifiable Credentials Data Model Threat Model v2.1

This document describes a threat model for the Verifiable Credentials Data Model specification.

Adam ArgyleTop Front-end Bloggersread at source

WWW Ep254 From Geocities To Gpt Brad Frost

Ep #254 With Brad Frost ✨ Robbie and I welcome Brad Frost to talk grief and acceptance around AI, the Orchid synth , snowboarding as a metaphor for finding your line through chaos, why domain expertise matters more than ever, Van Halen's green M&Ms , and Brad's AI an…

phpiedTop Front-end Bloggers2 min read

I am now an Instagram Micro-Influencer

AMA. What's a "Micro-Influencer"? Someone with 10K or more followers. Approximately 15% of all Instagram accounts. So I'm a "15 percenter" What's an Instagram? A window on your baby television that eats time and poops neuroses. What are you doing there? Keeping up with my musicians friends, many of them seem to update it frequently […]

Ahmad ShadeedMore Front-end Bloggersread at source

Detect when elements overlap with CSS

Engineering at MetaCompany/Startup Blogs10 min read

Bringing Private Processing to Meta AI Glasses

We believe glasses are the best form factor for having AI help throughout your day. They can understand your personal context better than other kinds of devices and keep you present without picking up a mobile phone. Most of the time, glasses are helping you see well, protecting your eyes and complementing your look, and [...] Read More... The post Bringing Private Processing to Meta AI Glasses appeared first on Engineering at Meta .

Kent C. Dodds BlogTop Front-end Bloggersread at source

You Own the Outcome: Product Engineering in the Age of AI

Agents are great at producing code. The valuable work left for you is deciding what should exist, how it should behave, and what you're willing to trade for it.

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.…

Twilio BlogMulti Author Blogsread at source

How to Test and Fix Voice AI Agent Prompts with Twilio Conversation Relay and Cekura

Build and test an AI voice agent using Twilio Conversation Relay and Cekura. Write metrics, run evaluations, and fix prompt bugs.

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

Next.js BlogLibraries, Frameworks, etc.read at source

Upcoming Next.js September Security Release

Next.js is preparing a scheduled September security release for September 30, 2026.

Frontend Masters BlogMore Front-end Bloggers4 min read

Introducing Solo

A versatile tool for managing coding projects, integrating multiple terminals and AI agents within a single control panel.

CodePenCompany/Startup Blogs2 min read

Chris’ Corner: Web Components

Dave Rupert has a new syntax highlighter: MicroLighter. He wrote about the why. There are a bunch of trade-offs with all the technologies that do this job. The trade-offs here seem pretty worth it for a relatively lightweight, infrequent syntax highlighting job. I mean 2 KB as a base library is pretty amazing, with the […]

Wes BosYouTube ChannelsVideoWatch on YouTube

building an unfair thrifting advantage

Wes BosYouTube ChannelsVideoWatch on YouTube

It's now cheap enough to do this

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!

CSS WizardryTop Front-end Bloggersread at source

Web-Perf Wednesday 010 – Safari Keeps Scrolled Content in Place

Safari 27 adds scroll anchoring, tighter HTTP caching, and static Service Worker routes, while Chrome improves performance tooling.

SyntaxPodcastsAudioListen

1041: What are normies using AI for?

Scott and Wes talk about how non-developers are actually using AI today. They also cover the stuff they don’t think holds up, like AI-staged listings and automated marketing. Show Notes 00:00 Intro 00:38 Welcome to Syntax! Wes’ post about using AI 01:50 Finding Parts With AI:…

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

TimescaleDB Course – PostgreSQL for Time-Series Data

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:

Brad FrostTop Front-end Bloggers2 min read

Last chance to get our courses at pre-release prices!

I sent out a newsletter today and wanted to share it here too. Forgive the sales-y post, but we're at the finish line of the courses we've been pouring our entire selves into for the last two years. We're really proud of this work, and we're really excited to help people. With…

Frontend FocusMulti Author Blogsread at source

12 CSS features that can retire your dependencies

🚀 Frontend Focus #​759 — September 23, 2026 | Read on the web 🧭 WebKit Features for Safari 27.0 — An epic set of release notes covers Safari 27's enhancements, including its new MCP server (let agents debug your work), scroll anchoring , the customizable element, a controls attribute for images in visionOS, sizes="auto" for images, and more. WebKit 💡 In related news, Xcode 27.1 Beta includes an iPhone Duo simulator if you want to see how things look on Apple's forthcoming foldable. Skeleton Loaders Are Just Slow Queries in Disguise — You add a skeleton loader to hide the wait. But that wait is a slow query, and it only grows with your data. TimescaleDB extends Postgres so the data behind your components returns fast at scale, no matter how big it gets. Get $1000 credit to start . Tiger Data (creators of TimescaleDB) sponsor 12 CSS Features You Can Use Today with No Build Step — Highlights various CSS features that we can turn to now , retiring some toolchain dependencies in turn. Things like native nesting instead of Sass, :has() instead of wrapper-class hacks, and more. Flavio Copes Blurry Before Beautiful: Image Previews for the Web? — Having a 'blurry' version of an image load in before the full version isn't new, but the Edge team is proposing a previewsrc attribute so browsers can handle it natively. Patrick Brosset (Microsoft) ⚡️ IN BRIEF 🛠️ Chrome's latest DevTools update brings DevTools MCP server improvements, ad script tracking, more modern devices in Device Mode, and more. 🌏 A recent Edge update adds the OpaqueRange API for text-range UIs, component accessibility improvements, and the agent-ready WebMCP API. ☑️ Chrome 155 beta adds support for the CSS symbols() function, margin-trim , JPEG XL images, and more. 📙 Articles, Opinions & Tutorials The Root Scroller and How Not to Lose It — The ‘root scroller’ is the viewport’s scroll container and handles things like scroll restoration and collapsing mobile address bars. But common CSS patterns can hand scrolling to other elements and lose those features, as shown in this demo-packed explainer. Kilian Valkhof "AI, Make the Website Good" — Zach argues that, no matter the tools, caring about the quality of output matters more than ever. He amusingly illustrates this point by highlighting the front of house output of top AI companies. Zach Leatherman The Era of Agentic Mobile Development Is Built on Expo — Build with our CLI and dev tools. Test on our cloud simulators. And ship with the best CI/CD for mobile development. Expo sponsor 19½ Things You Didn't Know About Accessibility in HTML and CSS — A neat slide-driven writeup of a StripeCon Europe talk rounds up lesser-known accessibility details. Manuel Matuzovic 'CSS Scroll-Triggered Animations Are Here, And I Completely Missed Them' — Scroll- triggered animations shipped in Chrome back in February. Cyd catches us up on how they differ from regular and scroll-driven animations, and looks at the timeline-trigger and animation-trigger properties specifically. Cyd Stumpel Responsive iframes in Chrome 154 — Landed in Chrome, and in preview in Edge, responsively-sized iframes are now a thing. You can set an iframe to be the size of its content, set which dimension that size is derived from, and tweak dynamically. The only catch is the embedded document must opt in. Sebastian Benz & Bramus van Damme A Decent Custom Checkbox Pattern for Until ::checkmark is Ready — Until ::checkmark reaches checkboxes, Andy lays a transparent native input over a custom box with an SVG tick. Andy Bell We Found a Fix for 'Wobbly Spinners' in Safari — CSS’s round() function came to the rescue here. Cody Olsen The Death of Web Development Education: Rescuing a Field From Disappearing Mathias Schäfer 🧰 Tools, Code & Resources Critical 9.0: Extract and Inline Critical Path CSS in HTML — A total rewrite of the popular critical CSS inliner, used to improve first render and LCP. Version 9 picks between two engines: a fast, browser-free one for prerendered HTML and a Playwright-based one for SPAs. Plus MCP support. Addy Osmani and Ben Zörb 📊 Plotly.js 4: A Major Update for the Popular Charting Library — It adds ‘quiver’ plots for drawing vector fields (with many fantastic examples in the post), accepts any CSS Color 4 color string, and removes the use of Mapbox GL in favor of MapLibre. Chris Parmer Build Forms That Fit Your Frontend—and Any Backend — Create custom themes for your form UI or use style adapters for Bootstrap, MUI, and Shadcn/UI. Dedicated npm packages for React, Angular, and Vue. SurveyJS sponsor Semfont: A Font That Reads What You Wrote — A small library that auto-styles text word-by-word, scoring each word (by sentiment, salience, and more) and then applying color, weight, and slant. Repo here . Rohan Adwankar Slidev: Presentation Slides for Developers — Uses a Vue-based tech stack, providing a developer-focused set of tools for creating Markdown-based slides for tech talks. Anthony Fu 🧪 ...and finally The Periodic Table of HTML Elements — Contains all 115 elements of the current HTML Living Standard. A modernization of Josh Duck’s version included in Brad Frost’s Atomic Design book. Alena Batitskaia

Twilio BlogMulti Author Blogsread at source

Conversations in the AI Era: Manchester Meetup Recap

Twilio and Ciptex ran a Conversations in the AI Era meetup on September 3rd, 2026 at Colony Manchester

Twilio BlogMulti Author Blogsread at source

Collected, stored, and useless: The lifecycle of most customer data

You probably have more data than you know what to do with. The real problem is that the data is sitting in a system that doesn’t talk to the ones that need it.

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

Gemma 4 12B: The encoder-free model explained

Jens Oliver MeiertTop Front-end Bloggersread at source

On the Engineering Philosophy for HTML Minifier Next

Maximum effectiveness, up-to-date dependencies, and no fear of major releases: the three guiding tenets behind HTML Minifier Next.

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 .

Netlify BlogLibraries, Frameworks, etc.read at source

How we built Git storage for millions of Netlify projects

A technical look at how Netlify built Netlify Source: durable Git storage on S3, scalable caching, push consistency, and support for millions of projects.

Frontend Masters BlogMore Front-end Bloggers1 min read

Brighter Than White

If you’ve got an HDR display, and use Chrome 137+ or Safari 26+ (even on iOS), perhaps you’ve seen images sometimes with colors that are so bright they seem to dim the rest of the screen. I find it a bit distracting, but I can see how it could be a fun technological gimick sometimes. […]

Sass BlogLibraries, Frameworks, etc.5 min read

The Road to Dart Sass 2

When we first released Dart Sass 1.0.0 in March 2018, our goals were clear: We wanted to retain the original Ruby Sass implementation's commitment to fixing bugs quickly and consistently keeping up with the evolving CSS spec as well as new Sass language features. We wanted to…

AdactioTop Front-end Bloggersread at source

Back from Spain with a good haul…

Next.js BlogLibraries, Frameworks, etc.read at source

Next.js Security Update for a Critical Upstream Issue

The September 22, 2026 out-of-band security update for Next.js is now available

Mux BlogCompany/Startup Blogs10 min read

Frames, shots, and scenes: Structuring video for AI workflows

When you build with AI, every question about a video needs a different piece of it. Learn more about how to pick the right ones and when to combine them.

DigitalOcean BlogMulti Author Blogs12 min read

Introducing DigitalOcean Managed Agents: One AI-native stack to power your intelligence

Following a successful private preview, we’re thrilled to open DigitalOcean Managed Agents to everyone. Teams can now deploy their preferred agent harness (like OpenCode, Codex CLI) or bring their own, connect agents to 16,000+ tools, and help agents do more work at scale…

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. […]

Next.js BlogLibraries, Frameworks, etc.read at source

Upcoming Next.js Security Update for a Critical Upstream Issue

Next.js 16.3.6 and 15.5.26 are planned for a critical out-of-band security update on September 22, 2026.

CodePenCompany/Startup Blogs1 min read

441: Challenges For We, Challenges For Thee

Marie and Chris talk about CodePen Challenges. We’ve been at it for many years! We get into the technology behind it, how we build our own CMS for it that powers the website and the emails that get sent about it. We also cover why they can be so beneficial for everyone involved. Time Jumps

W3C BlogBrowsers, engines, etc.2 min read

2026 Climate Weeks: W3C and Web Sustainability

W3C’s Sustainable Web Interest Group shares updates about Web Sustainability Guidelines and Impact Ratings in time for Climate Week, with changes demonstrating impacts on People, Planet, and Prosperity and reflecting W3C’s horizontal review process.

W3C NewsBrowsers, engines, etc.1 min read

Authorized Translations of WCAG 2.2 and 2.1 in French updated

W3C has published the updated Authorized French Translations of Web Content Accessibility Guidelines (WCAG) 2.2 and 2.1.

HTML All The ThingsPodcastsAudioListen

AI Basics: Learn These Tips First

AI is easy to start using, but getting good at it takes practice. In this episode, Matt and Mike break down the AI basics everyone should learn first, from improving your prompts and knowing when AI needs to search the web to verifying important answers and avoiding AI overload.…

Auth0 BlogCompany/Startup Blogsread at source

Confused Deputy: The Old Bug That AI Agents Keep Reintroducing

A category of vulnerability we aimed to eradicate is re-emerging with the rise of AI agents.

JavaScript WeeklyMulti Author Blogsread at source

JavaScript desktop apps in under 10MB

#​803 — September 22, 2026 Read on the Web JavaScript Weekly tinyjs: Build JavaScript Desktop Apps in — I built an app with this and was impressed. You get a txiki.js -powered backend with full system access (including FFI!), native webview rendering, and tiny macOS, Linux, and Windows builds. It even makes it easy to sign/notarize the final app. Tarwin Stroh-Spijer There are lots of great options in this space though: Electrobun offers richer multi-window and GPU features, at the cost of a larger TypeScript runtime – though it can instead use Zig, Rust, Go, or Odin for a tiny native main process. Perry is a TypeScript to native AOT compiler whose primary UI model renders AppKit, Win32 and GTK4 widgets for a more conventionally native feel. Electron and the experimental Deno Desktop are powerful, but their executables typically run several times larger. Neutralinojs apps can be even smaller than tinyjs's, but you lose the general-purpose JavaScript privileged backend by design. Full-Text Search in Drizzle Without a Second System — Try the official ParadeDB integration for Drizzle. Search your live Postgres tables. No ETL, no Elasticsearch. ParadeDB cloud coming soon. ParadeDB sponsor Persistent Databases in the Browser with DuckDB-Wasm and OPFS — A walkthrough of running DuckDB in the browser with a database file that survives reloads using the Origin Private File System now supported by all major browsers. Piovesan and Wielenga (DuckDB) How Linear Reworked Its CI for 4x the Tests — Eager agents grew Linear's test suite, and its CI costs with it! They share some remedies: rewriting type-aware ESLint rules as plain AST checks cut lint time 55% and eased a move to Oxlint , while selectively turning off Vitest's isolation saved a further 17% a month. Mufeez Amjad (Linear) IN BRIEF: Lovable rewrote Vite's dev server in Rust (calling it OJ ) for performance reasons, but Evan You disputes the benchmark and predicts AI will have everyone maintaining "their own slop fork" . 📊 npmchart.com plots download trends, releases and repo activity for any npm package (here's Svelte's , for example), and lets you compare packages. 🔒 npm now offers stage-only tokens to let automated workflows stage a release for a maintainer to approve with 2FA. This offers a migration path for those who can't move to trusted publishing yet. RELEASES: Turborepo 2.11 – Experimental Rust, Python and Go support joins the task graph, plus up to 4x faster startup over 2.9. ESLint 10.11.0 – Performance update with faster startup and linting. Node.js 26.10.0 (Current) – Adds util.debounce / throttle . 📊 billboard.js 4.1 , QuickJS-ng 0.17.0 , VueUse 15.0 📖 Articles and Videos An Undercover Analyst Infiltrated the Gang Behind 'Mini Shai-Hulud' — Bad news for the group behind this spring's cascading supply chain attacks… Google had a mole in their group chat! WIRED explains how the group was monitored and disrupted, leading to two recent arrests . Andy Greenberg (WIRED) The V8 Runtime Undermined My Constant-Time JavaScript Library — A look at how even branchless JavaScript can leak secrets through CPU cache behavior, due to quirks in how V8 handles booleans and -0 . Soatok Dreamseeker Your UI Isn't Slow. It's Waiting on the Data — TimescaleDB extends Postgres so the data behind your UI loads fast as it grows. Get $1000 credit to start . Tiger Data (creators of TimescaleDB) sponsor Do Frameworks Matter Anymore? — If you're using AI, you're either using a framework or your agent is building an ad-hoc one on the fly. A Remix team member argues that's a good reason to want frameworks, and better ones, too. Brooks Lybrand 📄 We Are All Product Engineers Now – Laurie argues that understanding what customers need becomes a core developer skill. Laurie Voss 📺 Is AI Changing How JavaScript Itself Gets Designed? – A 2-minute take from TC39 delegate Michael Ficarra. JetBrains 📄 Solid 2.0: It's the Little Things – Six touches that change how SolidJS 2.0 feels. Brenley Dueck 📄 How Notion Handles Concurrent Editing with CRDTs Nehmzow and Guo (Notion) 🛠 Code & Tools Plotly.js 4: A Big Update for the Popular Charting Library — Now ships its own TypeScript types, adds ‘quiver’ plots (above) for drawing vector fields (with many awesome examples in the post), accepts CSS Color 4 color strings, and removes Mapbox GL in favor of MapLibre (no token needed!) Chris Parmer 🤖 Transformers.js v4.3: Run AI Models in the Browser — Adds support for structured output (e.g. JSON), using WebGPU on Safari 26+, and DeepSeek v4. The docs have had an overhaul and there’s now an agent skill you can use. Hugging Face 💡 Hugging Face also released a collection of 207 Apache-2.0 WebGPU kernels — matmul, attention and quantization ops for your own runtime. Still Writing Tests Manually? Meticulous AI Is Here — Flaky tests slowing down dev? Meticulous gives engineers confidence to ship faster by autonomously testing every edge case of your web app. Meticulous sponsor @shadcn/lint : An Agent-First Linter for Tailwind — An ESLint/Oxlint plugin to enforce rules like "no raw colors" and "no restyling from outside" with errors to steer agents back to your variants and tokens. shadcn Devframe: A Framework for Building DevTools That Run Anywhere — From the developer behind Vitest and Nuxt DevTools, "a framework for building DevTools, in the same way Nuxt or Next.js provides a framework [for web apps]" . Define a tool once and Devframe turns it into a Web Standard request handler you can mount almost anywhere. Anthony Fu ✉️ Mailflare: A Self-Hosted Inbox Built Entirely on Cloudflare — A self-hosted inbox for custom domains built on Cloudflare’s Email Routing, Workers, D1 and R2. AGPL 3.0 licensed. Hieu Nguyen gridstack.js 14.0 – The popular drag-and-drop dashboard layout library adds a list mode that reflows widgets like a reorderable list. ( Demos .) 🖼️ image-dimensions 2.6 – Quickly get an image's dimensions by reading the least amount of data. Feedsmith 3.0 – A fast way to parse and generate web feeds, including RSS, Atom, and JSON. 📰 Classifieds A developer's guide to adding eSignature to your app with an API : How signing workflows and embedded signing work, and the core steps to add signing to your product with Foxit. 🧩 CAPTCHA was built for a different internet. Replace it with invisible bot detection with a few lines of code. Try Fingerprint for free . Meet chat.agent on Trigger.dev : durable AI agents built with the AI SDK you already use. Long-lived LLM sessions that survive deploys, crashes & refreshes. 📢 Elsewhere in the ecosystem I love these pure CSS 'hand drawn' annotations (above) you can add to any page in a data-note attribute. Cloudflare's Sunil Pai writes about the senior engineer 'death spiral' , where you go dark for weeks to prove yourself in a new role and end up burning out. 🤖 Simon Willison writes about Jev , a new, fast 'decision model' taking developer social media by storm. Feed it semi-structured state and one or more questions and you get only numbers back (probabilities, choices and scores). GitHub Actions has a new cache-mode setting to limit cache access per workflow or job, a defence against the kind of cache poisoning that compromised TanStack's npm packages in May .

Twilio BlogMulti Author Blogsread at source

The 2026 CDP Shift: Why AI Agents Are Only as Smart as Your Data Infrastructure

Modern AI agents are only as effective as the data infrastructure behind them. Discover how unified CDPs eliminate AI silos, deliver real-time context, and power seamless, personalized customer experiences at scale. Read the 2026 CDP Report.

Web Accessibility Initiative (WAI)Browsers, engines, etc.1 min read

WCAG 2.2 and 2.1 in French — Authorized translations updated

The French authorized translations of Web Content Accessibility Guidelines (WCAG) are updated:

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

Understand the Gemma 4 model family

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

AdactioTop Front-end Bloggersread at source

Monday session in Madrid.

Level AccessCompany/Startup Blogs8 min read

How to Connect Accessibility Metrics to Organizational Outcomes

Maybe your teams have already audited your digital portfolio, fixed critical issues, or been trained on accessibility standards. Or maybe you’re just getting The post How to Connect Accessibility Metrics to Organizational Outcomes appeared first on Level Access .

The Mozilla BlogBrowsers, engines, etc.5 min read

Stay focused wherever you work with Firefox mobile browsers

When it’s Monday morning and you’re on the subway, in a coffee shop, or squeezing in a few email replies after your morning workout, your phone becomes your digital office. But every time you open your browser, you risk getting struck with any combination of distracting ads, auto-playing videos, and open tabs from the previous […] The post Stay focused wherever you work with Firefox mobile browsers appeared first on The Mozilla Blog .

Microsoft Edge BlogBrowsers, engines, etc.8 min read

New in Edge for developers – Create better components and make your site agent-ready

Welcome back to New in Edge for developers , our recurring roundup of recent web platform updates in Microsoft Edge. In this edition, we'll look more closely at some of the newest additions to Microsoft Edge and the Chromium project, such as The post New in Edge for developers – Create better components and make your site agent-ready appeared first on Microsoft Edge Blog .

Engineering at MetaCompany/Startup Blogs8 min read

Open-Sourcing Rebalancer: A Generic, High-Performance Library for Solving Assignment Problems

We’re open-sourcing Rebalancer, the assignment-problem solver that has been used to solve resource allocation problems throughout Meta for over nine years. Rebalancer separates several related concerns: how to specify an assignment problem, how to store it efficiently in memory, how to solve it, and how to debug it. This separation of concerns is crucial to [...] Read More... The post Open-Sourcing Rebalancer: A Generic, High-Performance Library for Solving Assignment Problems appeared first on Engineering at Meta .

Level AccessCompany/Startup Blogs9 min read

Skip Links: What They Are, How to Build One, and How to Test It

A skip link is a hyperlink at the top of a web page that lets keyboard users jump past repeated navigation to the The post Skip Links: What They Are, How to Build One, and How to Test It appeared first on Level Access .

Frontend Masters BlogMore Front-end Bloggers5 min read

Dark Mode Very Much Matters To Me

It's not just vibes, it's an accessibility thing.

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.

DequeMulti Author Blogs5 min read

Intelligent automation and the new era of guided testing

Automated IGTs run through the Axe MCP Server, which puts them inside the environment where code is being written, so a developer can run a guided test and get remediation guidance without leaving their editor. The post Intelligent automation and the new era of guided testing appeared first on Deque .

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Claude Certified Developer Foundations (CCDV-F) Certification Course

Engineering at MetaCompany/Startup Blogs6 min read

Inside Petal: Building the World’s First Petabit-Class Transoceanic Subsea Cable

Petal, the next step in Meta’s subsea innovation, will be the first subsea cable to deliver petabit capacity at transoceanic distances, connecting France and the United States over approximately 7,000 km (4,300 mi). Expected to enter service in 2029, it will be the first subsea cable system to deploy multi-core fiber technology at scale, doubling [...] Read More... The post Inside Petal: Building the World’s First Petabit-Class Transoceanic Subsea Cable appeared first on Engineering at Meta .

W3C BlogBrowsers, engines, etc.2 min read

W3C IRC bots now open source

Two of W3C's IRC bots, RRSAgent and Zakim, are now open source. These bots help facilitate meetings coordinated on IRC, helping with chat logs, meeting minutes, agenda tracking and speaker queues.

SyntaxPodcastsAudioListen

1040: Developing for the iPhone Duo

Scott, Wes, and CJ break down developing for the iPhone Duo with the Device Posture and Viewport Segments APIs, plus the React 19.3 release and Pi’s new Radius platform. Also on deck: Tailwind joining Shopify, Shopify going back to native, Homebrew 7, Aeropeek, and Meta’s Muse…

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 […]

QuirksBlogTop Front-end Bloggersread at source

Books aren't dead

So a while ago one of the older neighbours in the apartment building (whose husband passed away living in my current house, but that’s another story) became confused enough to be brought to the old people's home, which was an adventure in itself, including an unexpected return. Today, her house was stripped. Among others, about twenty boxes of books were thrown onto the street. When I passed by on the way to the supermarket I looked through them, as did two other people. I found that there was a lot of French stuff (did she study French?), as well as some things that make me suspect she was raised a protestant — something very seventy-ish about God’s will with Marxism or something. I snagged a Dictionnaire d'ancien français because why the hell not, Robin Lane Fox’s book about the Bible, something I thought was an OED but turned out to be an English-Hindi dictionary, a French book about 13th century French buildings that makes a nice gift for someone I know, and a late-Roman fusion saint’s life set to rhyme in 11th-century French, then translated and prosified into modern Dutch to keep the manuscript tradition nice and complex. Then I went to do my shopping, a bit sad about all those books being left on the street, but I’m not going to take in twenty boxes into my house when I’m very certain I’ll never read 98% of them. When I returned half an hour later there were about ten people, all of them in their late twenties and early thirties, going through the boxes. I can’t swear to it, but I got the feeling they knew each other or were part of a group or something. One of them staggered away with two big heavy bags of books, and you don’t just happen to pass twenty boxes of books while having two big bags with you, right? Books aren’t dead. They’re just sleeping.

Zach LeathermanTop Front-end Bloggers2 min read

“AI, make the website good”

Millions of Large-Language-Model -generated words have been spilled on craftsmanship in this gilded-age of software development . We now have agents to plan how code will be written, agents to write code, agents to review code, agents to orchestrate and dispatch tasks to other…

The Code BarbarianMore Front-end Bloggersread at source

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

Auth0 BlogCompany/Startup Blogsread at source

Building Secure AI Agents with Microsoft Agent Framework and Auth0: Human-in-the-Loop Approval

Ensure your AI agent asks for your permission before performing a critical action.

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.

Jim Nielsen’s BlogMore Front-end Bloggersread at source

The iPhone Model Hall of Fame

John Gruber makes his picks for the iPhone Hall of Fame: iPhone (original) iPhone 4 iPhone 5S iPhone X iPhone 17 Pro Ok, my turn. Here’s my iPhone Hall of Fame: iPhone (original) iPhone 4 iPhone X iPhone 12 Mini iPod Touch Notes: How do you not put the OG iPhone at the top spot? It’s like doing a Mount Rushmore and not putting the first president first. It’s gotta be George. Aesthetically, the 4 was the best. Just an absolute beauty to behold (and use, so long as you held it right ). Aesthetically, the X was a close second to the 4. But in terms of form, X was best. (Shout out to the 3GS, that curved back felt great in the palm.) The Minis (12/13) stand as proof that commercial success doesn’t always equate with greatness. Ahead of their time, those ones. Oh, and you’re probably wondering: “The Touch? That’s not even an iPhone!” I disagree. The Touch was The iPhone For The Rest of Us™. When you couldn’t get one of those early iPhones (because of price, because of geographic location, because of ___) the Touch was your gateway drug. For me, it was price. I was a poor kid in college in 2007, and the iPhone was $$ (and it was on AT&T, which was even more $$). Eventually, I was able to get an original iPhone on eBay (and jailbreak it for T-Mobile — remember Cydia ?). But the Touch was my first taste of iPhone. That’s my Hall of Fame list. What’s yours? Reply via: Email · Mastodon · Bluesky

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.

Go Make ThingsMulti Author Blogs1 min read

Weeds can't grow where they can't take root

In native gardening, the most effective way to prevent unwanted plants (aka weeds) from growing is to crowd them out with plants you do want. Rather than well-space plants with large gaps of mulch, you packed plants densely together, just like you’d find in nature. Without the space to take root, weeds are (mostly) kept at bay. This is a metaphor about life and social change. I spend a lot of time fighting against social injustice.

AdactioTop Front-end Bloggersread at source

On stage in Cáceres.

Brad FrostTop Front-end Bloggersread at source

Periodic Table of HTML Elements

Periodic Table of HTML Elements shows all 115 HTML elements laid out as a periodic table. Josh Duck created the original periodic table of HTML elements that I included in my Atomic Design book . Thankfully, Alena Batitskaia recreated it updated to the latest spec!

Jens Oliver MeiertTop Front-end Bloggersread at source

Every Place That Sells Food Should Offer a Vegan Option

Almost everyone can eat vegan food—yet vegans can’t count on getting any. Thoughts on why that’s backwards, and the obvious fix.

remy sharp's b:logTop Front-end Bloggers1 min read

Dungeon Crawler Carl (Dungeon Crawler Carl, #1) [book]

Not something I'd normally pick, but enjoyable. I've never played dungeons and dragons, and in my head, I kept thinking of Minecraft as my rough frame of reference (which I've touched because of the kids but not really played to any real amount). The book follows Carl, who, as we guess from the title and thankfully within a few pages find that he's forced to become a dungeon crawler for the entertainment for some extra terrestrial intergalactic world galloping corporate ring thingy. He descends into the dungeon with his cat, which, thankfully and unsurprisingly gains the ability to talk. None of the characters or the story is particularly unique. I was describing the book to my daughter whom immediately asked if it was based on a video game. It's not, as far as I know, but I guess this is the point, there's lots of cultural shorthand that the story can pull from. Even though I say there's nothing surprising in there, it didn't hold the book back from being fun and funny at times. It does try to bring up the indiscriminate mass murder of so-called monsters (ie. not human), and maybe that's picked up in future books (of which I understand there's seven more), but it did rather feel like the character rather quickly took to it like a duck to water. But then, does it matter? This book wasn't trying to be a social commentary on how quickly humans can disassociate. I think I'd like to pick up some of the next books in the series, but I'm really not a fan of "required" reading to get the complete story, so I suspect if I do ever get to finish book eight, it'll likely be years from now…

AdactioTop Front-end Bloggersread at source

More street sessions in Cáceres.

AdactioTop Front-end Bloggersread at source

Made a nice salad for lunch in Cáceres. 🥗

Adam ArgyleTop Front-end Bloggers1 min read

BanjoCSS

Banjo, guitar, drums, trees, n' mountains.

Go Make ThingsMulti Author Blogs1 min read

Running a business made me hate capitalism

Today, I realized that running my own business (successfully for a while) is a big part of what made me hate capitalism so damn much. For nearly a decade, I grew a blog I started while learning to code into a tech education business and dev consultancy. First it was a hobby, then a side hustle, then a full time job. I loved having control of my work and my time.

Chris HawkesYouTube ChannelsVideoWatch on YouTube

I Ran One of the Best AI Models Locally… This Is Getting Ridiculous

HTML All The ThingsPodcastsAudioListen

Is AI Coding Making Technical Debt Worse?

Is AI coding making technical debt worse, or could it help us finally clean it up? In this edition of the Web News, Matt and Mike debate how tighter deadlines, unchecked code, and AI’s context limits affect maintainability - and whether clean code still matters when AI can…

AdactioTop Front-end Bloggersread at source

Last night’s fun.

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 😈

Speckyboy Design MagazineDeveloper/Designer News32 min read

80+ Best Free After Effects Templates in 2026

Download free After Effects templates for titles, logo reveals, intros, slideshows, lower thirds, animated fonts, icons, and video projects. The post 80+ Best Free After Effects Templates in 2026 appeared first on Speckyboy Design Magazine .

Jim Nielsen’s BlogMore Front-end Bloggersread at source

Do You Prefer Artificial?

“Artificial” things can get a bad rap next to their counterparts, but they have their place. For example, artificial light (i.e. not from the sun)? Super useful, especially at night. And when it comes to skiing, I’ll take artificial snow if I have to. Beats no snow. Artificial isn’t necessarily inferior in all cases, everywhere, all the time. But it is optimized for different values. For example: Artificial grass (i.e. turf) is great for certain contexts, but I don’t want a golf course of artificial grass. Artificial flowers are great for certain scenarios, but I don’t want them at my wedding. Artificial flavoring is yummy (love me some peach rings), but I’d prefer a real peach pie over one with artificially flavored filling. Artificial is an alternative. It’s understood as a trade-off, not a substitute. You trade the real for the artificial when you’re concerned about attributes like cost, convenience, and availability. Which brings me to “artificial” intelligence: surely a trade-off, not a substitute. Ain’t nothing like the real thing. These labs should consider ripping off (cause they’re good at that) Mastercard’s old tagline : “There’s some intelligence money can’t buy; for everything else, there’s Claude.” Reply via: Email · Mastodon · Bluesky

AdactioTop Front-end Bloggersread at source

Rooftop apartment.

AdactioTop Front-end Bloggersread at source

Street session in Cáceres.

W3C BlogBrowsers, engines, etc.3 min read

W3C, threat modeling, and the CRA: a report from GDC 2026

At GDC 2026, W3C Security Interest Group member Giovanni Corti shared how threat modeling was integrated into the revision of ETSI EN 304 617, the draft harmonized standard for browser cybersecurity under the EU Cyber Resilience Act, referencing the W3C Threat Modeling Guide and the Threat Model for the Web.

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…

Auth0 BlogCompany/Startup Blogsread at source

Optimize Your Identity Flows with Auth0 Identity Conversion Suite

Turn identity into a growth driver. Convert more, protect every interaction, and scale with data-backed confidence.

ESLint BlogLibraries, Frameworks, etc.2 min read

ESLint v10.11.0 released

Highlights Faster startup and linting This release includes a set of performance improvements across ESLint’s core linting pipeline and the stylish formatter. Linting results and the public API are unchanged: the same files produce the same messages as before, just faster. The…

overreactedTop Front-end Bloggersread at source

How I Vibed a Proof of Conway’s Conjecture

You can just prove things, apparently.

DigitalOcean BlogMulti Author Blogs4 min read

The Next Step for Mission-Critical Workloads: Managed Databases Advanced Edition

As your business scales, your database shifts from a simple storage layer to the critical heart of your application architecture. For years, DigitalOcean has helped thousands of startups and growing businesses effortlessly launch and scale fully managed PostgreSQL , MySQL ,…

Mux BlogCompany/Startup Blogs3 min read

Mux Robots made our video editor’s life easier

We created an Adobe Premiere Pro plugin for video editors using Mux Robots. You can generate captions, translate audio and find scenes with a click of a button.

The Mozilla BlogBrowsers, engines, etc.5 min read

Mila and Mozilla announce new initiative to build trustworthy open source AI for everyone, with Canadian government support

Today at ALL IN, Canada’s largest AI and technology event, Mozilla and Mila announced a new initiative and fresh investment to build an open source AI foundation layer that enables organizations and institutions to own and operate advanced AI systems locally, ensuring full control over their technology and data. Doubling down on its commitment to […] The post Mila and Mozilla announce new initiative to build trustworthy open source AI for everyone, with Canadian government support appeared first on The Mozilla Blog .

Geoff GrahamMore Front-end Bloggersread at source

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

Web Tools WeeklyMulti Author Blogsread at source

Web Tools Weekly Issue #687

CSS/HTML, Git/CLI, Jamstack

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Hands-On Evolution of Deep Learning – Geoffrey Hinton’s AI Legacy

DequeMulti Author Blogs2 min read

Axe-con 2027 registration is now open!

Deque Systems announces that registration is now open for Axe-con, the world’s largest digital accessibility event, to be held virtually February 23-24, 2027. The post Axe-con 2027 registration is now open! appeared first on Deque .

PiccalilliMore Front-end Bloggersread at source

A decent custom checkbox pattern for until ::checkmark is ready

Now that we can better customise elements, it's only natural to side-eye other form types that have caused us visual headaches. Sure, we should be applying the lightest of touches to form elements, especially, but even with a bit of visual-massaging, checkboxes are limited, aside from a bit of accent-color . See the Pen Standard checkbox with accent colour by Andy Bell ( @piccalilli ) on CodePen . There is a brighter future incoming, if you're to read the spec : The ::checkmark pseudo-element represents an indicator of whether the item is checked, and is present on checkboxes, radios, and option elements. — W3C forms level 1 Match that with appearance: base , which is also incoming, and we're looking at this sort of CSS: input[type="checkbox"] { appearance: base; } input[type="checkbox"]::checkmark { content: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12l5 5L20 7' /%3E %3C/svg%3E"); } We're miles off from that capability yet — it doesn't look like any browser is working on it — so allow me to show you how to build a nice custom checkbox pattern for until we have the browser capabilities we're after. HTML first, always It's always right to start with some good quality markup: A long label for this checkbox to make sure we get a nice wrapping behaviour The markup is pretty straightforward here. Inside the parent — which is linked to the input both by being a parent and the for / id attributes — we have a container for the input and icon, along with a text label. The reason I'm using elements here is because aside from the input/SVG only phrasing content is permitted. I don't think a would do any harm here, but it's best to do things right. On the SVG checkmark element, there's an aria-hidden="true" attribute. This stops the SVG — a visual element — getting in the way for assistive technology. I've also added focusable="false" . This is actually a relic from the Internet Explorer days hell, but I keep it on visual only icons, just in case. Right, we're in good shape. Let's make it look good. Some CSS The first thing to do is layout: .checkbox { display: flex; align-items: baseline; gap: 1em; text-wrap: balance; } Flex is more than capable here. I like to align on the baseline in this sort of context because as the viewport gets small and the text wraps, we don't want a vertically centered layout. It looks rubbish! Speaking of balance, I'm using text-wrap: balance here for the same compressed viewport context and dealing with wrapping text. Keeping a consistent edge (rag) is extra important for small microcopy, such as labels. Let's tackle the input itself. .checkbox input { margin: 0; width: 100%; height: 100%; appearance: none; position: absolute; top: 0; left: 0; border-radius: 0.2em; /* This is so the focus ring has a matching radius to the visual box */ } We've got to be really careful here because we don't want to mess up the focusability of our element. Combining appearance: none and absolute positioning, our element is still there, but its no longer in the way, visually . It can still receive focus and will present a focus ring, which is exactly what we need! Let's tackle the "box" part, which is also this 's parent. .checkbox__box { position: relative; background: transparent; color: currentcolor; border: 1px solid; width: 1.4em; height: 1.4em; transform: translateY(0.75ex); flex-shrink: 0; border-radius: 0.2em; } A lot of this is self explanatory but I'll pick up the key parts: I'm using position: relative so the stays inside this box The transform rule is a bit of a magic-number but because it's a relative ex unit , it scales quite nicely, regardless of parent font size. Most importantly the ex enhances that baseline alignment and fixes the initial alignment of the I really like how Ahmad Shadeed approaches this too. That's the beauty of CSS: there's plenty of ways to do things well! Let's deal with the SVG checkmark next: .checkbox__box svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; display: none; width: 1em; height: 1em; } I guess I could use logical properties here, but we're positioning an icon in a box, so the "old" way works perfectly well. The idea here is to visually hide the checkmark when the checkbox isn't checked and show it when it is. We'll deal with that CSS next. FYI This is a situation that very few people will likely find themselves in. What I'd recommend is having a couple of SVG elements that get toggled in that context. .checkbox__box:has(input:checked) { background: white; } .checkbox__box input:checked + svg { display: block; } We're in checked state territory here. I'm setting a white background using :has() which is yet another useful use-case for this endlessly handy addition to CSS. The following block of CSS uses a traditional next sibling selector to show the SVG element when the input is checked. You could use :has() here too, if you're feeling fancy. With all of that CSS in place, we're looking good. See the Pen Custom checkbox by Andy Bell ( @piccalilli ) on CodePen . This approach could also work for radio buttons There's nothing stopping you using this approach for radio buttons. Check out this demo where I'm using a circle icon instead of a checkmark. It works well! See the Pen Custom radio buttons by Andy Bell ( @piccalilli ) on CodePen . The em units usage allows this whole component to scale The eagle eyed amongst us will have noticed that aside from the transform rules, I've consistently use em units. The reason for this is so our checkbox can scale with no other intervention. See the Pen Custom checkbox - massive edition by Andy Bell ( @piccalilli ) on CodePen . The only change here, versus the first demo is a font-size declaration on the .checkbox component. A handy pattern, right? A big thanks to Jake Archibald and Heydon Pickering for checking my homework.

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.

W3C NewsBrowsers, engines, etc.read at source

First Public Working Draft: SHACL 1.2 Inference Rules

This document defines the Inference Rules support of the SHACL Shapes Constraint Language (SHACL).

Adam ArgyleTop Front-end Bloggers2 min read

Jev

A next-gen programming model

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

Jens Oliver MeiertTop Front-end Bloggersread at source

On Respect and Gratitude in Open Source

How a project treats its contributors says more than its code. A note on the basics we’re skipping—and what it’s costing us.

Geoff GrahamMore Front-end Bloggersread at source

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

W3C BlogBrowsers, engines, etc.3 min read

W3C launches first pilot of program to support Open Source projects

In this blog post, Ian Jacobs, Strategy Team, introduces the first pilot of a program allowing Open Source projects to mature within an ecosystem seeking to build a coherent open platform through processes and IPR policies designed to support interoperability, quality, and W3C values.

Smashing MagazineThe Giants5 min read

Stop Treating CSS Container Queries Like Traditional Media Queries

Despite broad browser support, container queries remain surprisingly underused and frequently misunderstood. Let’s look at how they differ from media queries, when to reach for each, and how container queries help reusable components respond naturally to the contexts in which they appear. - CSS - Tools - Techniques

Level AccessCompany/Startup Blogs5 min read

Level Access Research Finds Broad AI Adoption Isn’t Closing the Accessibility Gap

Eighth Annual State of Digital Accessibility Report finds 80% use AI for accessibility, but no single use case was adopted by more than The post Level Access Research Finds Broad AI Adoption Isn’t Closing the Accessibility Gap appeared first on Level Access .

CSS WizardryTop Front-end Bloggersread at source

Web-Perf Wednesday 009 – CrUX Makes Ad Weight Public

CrUX adds public ad count, density, CPU, and network metrics, giving publishers and advertisers a shared view of real ad weight.

SyntaxPodcastsAudioListen

1039: Should You Quit Your Job?

Scott and Wes dig into a listener mailbag full of AI questions: how to bill freelance work when the tools make you faster, whether coding still matters in interviews, and if the AI bubble is about to pop. Plus sandboxing your agents, managing block-based CMS chaos, and what it…

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…

The Mozilla BlogBrowsers, engines, etc.3 min read

Mozilla and Mistral: Partnering to expand AI competition and preserve user choice

The AI race is shifting. Again. Practically overnight, competition has expanded from “which AI model is best?” to a new high-stakes battle over which models people can access, through which products, and whether people have meaningful choice about AI at all. In response, Mozilla and Mistral today announced a partnership built on a shared idea: […] The post Mozilla and Mistral: Partnering to expand AI competition and preserve user choice appeared first on The Mozilla Blog .

Zach LeathermanTop Front-end Bloggers1 min read

Icon Fall Web Component

I’ve been doing some spring/fall cleaning and found an unpublished follow-up component to <snow-fall> (a web component to “snow” on your website — which also happens to work with emoji too). Originally it was created as an easter egg for Blog Awesome (click on the Font Awesome…

DebugBear BlogCompany/Startup Blogs5 min read

New Data From Google: See How Ads Impact Web Performance

Google has been working on new metrics to measure how ads impact performance. Learn how you can view this data for real visitors and how to check it yourself in Chrome DevTools.

Frontend FocusMulti Author Blogsread at source

When CSS could run JavaScript

🚀 Frontend Focus #​758 — September 16, 2026 | Read on the web CSS Curiosities of the Past — A wonderful tour of the non-standard CSS quirks developers used to make browsers behave, especially Internet Explorer . Covers the 'star hack', CSS expressions (JavaScript in your CSS!), IE's DirectX filters, the famous box model hack , and more. Declan Chidlow Your Users Filter Faster Than Your Queries Can Run — Zoom the chart, change the range, and the whole query reruns from scratch. TimescaleDB extends Postgres so those aggregations return instantly. Continuous aggregates pre-compute rollups so dashboards stay fast at scale. Get $1000 credit to start . Tiger Data (creators of TimescaleDB) sponsor ✅ The Front-End Checklist — We've shared this before, but it's kept improving and now has almost 400 frontend quality rules covering accessibility, performance, security, SEO, and more. You can also now connect it to Claude, Cursor, and other AI tools over MCP so they review against the same standards. David Dias ⚡️ IN BRIEF 🧭 Safari 27 has shipped (alongside iOS, iPadOS, and macOS 27), bringing customizable elements, sizes="auto" on images, the :heading pseudo-class, alpha() , multi-color color-mix() , and more. 🤖 Apple has also shared details on how you can hook up an AI agent to Safari , as of Safari 27, for testing, debugging, etc. 🌐 Chrome 153 is out, adding single-axis scroll containers (in non-stable channels only) and the and elements. Chrome 154 is now in beta , too. 🤔 Last week, Automattic's board forced CEO Matt Mullenweg into a leave of absence , before Mullenweg declared that he was " back in control ". ✳️ We often share links to the helpful articles on CSS-Tricks , but it's gone quiet recently. Editor Geoff Graham sheds some light on why . 📙 Articles, Opinions & Tutorials Better Icon and Label Alignment — When text is just one line, an accompanying icon is nicely vertically centered, but when the text has multiple lines, the icon is still 'centered' but can look oddly misplaced… Ahmad explores a fix using CSS's lh unit. Ahmad Shadeed The Case Against JPEG XL (in the Browser) — With JPEG XL decoding making its way into Chrome and Firefox, an AV1 encoder developer who once backed the format argues it offers little advantage over AVIF for the web. Gianni Rosato How Sentry Application Metrics Caught a Broken AI-Written Estimator — Real files came out up to 83% bigger than predicted. Read how a few browser metrics surfaced it. Sentry sponsor WebKit Supports interactive-widget (and Hopefully Safari Will Too?) — WebKit recently gained support for interactive-widget , the viewport directive that controls how a page resizes when the virtual keyboard appears. Bramus built WebKit locally to test it and recaps the three modes with side-by-side visuals. Bramus Van Damme Sidenotes with CSS Anchor Positioning — A walkthrough of building Tufte-style sidenotes (margin notes instead of footnotes - as above ) with anchor positioning. It's JavaScript-free, multi-block, and degrades gracefully on narrow viewports and older browsers. Vincent Bernat WCAG 3: The Road to Hell is Paved with Supplemental Requirements — Accessibility expert Eric critiques the latest WCAG 3 draft's optional “Supplemental Requirements” and “Assertions,” arguing they'll see little uptake and proposing named, adoptable modules instead. Eric Eggert Animating CSS border-image — How to animate border styles (using an image or gradient) to create some interesting user interface effects. Preethi Sam A Deep Dive into StyleX — Here's a hands-on tour of Meta’s StyleX , a library which turns JavaScript style objects into plain atomic CSS at build time. Flavio also looks at why it can be a good fit for coding agents in particular. Flavio Copes Screen Readers Seem to Largely Ignore the headers Attribute on Table Cells Adrian Roselli Google and OpenAI Want Your Site to Talk to Agents Rachel Nabors ▶ WebMCP Is Here and You Should Care Syntax 🧰 Tools, Code & Resources Neat Annotations: Elegant Hand-Drawn Annotations with CSS — A lovely way to add some flourish to your content - think hand-drawn arrows and labels, all in CSS. Scroll down on the demo page to get the idea, or see the repo . Maxim Syabro rich-input >: A Rich Input Field — Acts like a regular input type="text" > but adds contextual keyword-based autocompletion and highlighting powered by datalist >, OpaqueRange and the CSS Custom Highlight APIs. Bramus Van Damme Your Agents Have Been Coding Blindfolded. Simulators Give Them Sight — Cloud Simulators give your agents the ability to see the mobile apps you are building. Join the waitlist . Cloud Simulator sponsor SnapDOM 3.0: Turn DOM Elements Into Images — A no-dependency html2canvas alternative with support for web fonts, pseudo-elements and Shadow DOM. v3.0 adds ‘incremental recapture’ for faster repeat captures, automatic web font embedding, and fromString() for turning raw HTML markup into images. Zumerlab ds.css: A Nintendo DS-Inspired CSS Framework — I also run a Nintendo newsletter , so this is like catnip to me. The DS was Nintendo's foldable, touchscreen handheld released in 2004. This framework attempts to recreate its pixelated charm. See a demo here . Perfect for a homepage! spiritov EaseMotion CSS: A Zero-Dependency, Animation-First CSS Framework — Includes animated buttons, cards, layout styles, and a full motion library with 20+ animations. The styles are easy to implement via human-readable class names and there's an integration layer for React. Try it here . Saptarshi Sadhu UI Skills: A Collection of Design-Engineering Skills to Help Humans and Agents Create Better Interfaces Interface Office 📰 Classifieds 📄 No more regex hacks for PDF data. Foxit's Extraction API reads tables, fields, and layout, then returns clean JSON. ⚡️ Add lightning-fast 1D/2D barcode scanning to your web app with STRICH , a lean JS SDK. Simple, predictable pricing. Free trial and demo! 😡 ...and finally Page Rage: Take Out Your Stress on a Web Page — Ever get a bit flustered when building a site? Work out some of that stress by destroying several pre-made pages here, or install the browser extension to smash up any web page to your heart’s content. Alex Reardon

CodePenCompany/Startup Blogs1 min read

440: Hey! Hi! Right here! In-App Notifications That Like You

Rach and Chris jump on the podcast to talk about the brand-new in-app notification system we built and shipped. We’re actively trying to balance a system that isn’t annoying, but allows us to show targetting information to targetted users when we think that’s valuable for both you and us. It started with “We launched 2.0!” […]

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

🪄 Gemini Live API in action

Jim Nielsen’s BlogMore Front-end Bloggersread at source

Bottlenecks Get a Bad Rap

Poor bottlenecks. Always seen as problematic, antithetical to efficiency. But bottlenecks aren’t universally bad. Think about it: a bottle’s neck is designed to constrain the amount of liquid that can flow out. A decrease in bandwidth is its entire purpose! Otherwise an overwhelming amount of liquid flows out and makes a big mess. We humans have a particular anatomy. We can only consume so much liquid at a time. The neck of a bottle works with that fact. We could make machines to produce so much wine that we’re drowning in it. But that wouldn’t change the fact that we’re only capable of consuming so much liquid at a time (not to mention digestion , etc.). When it comes to liquid consumption, the bottle’s neck isn’t the bottleneck — our neck is! So if you’re having a hard time drinking out of a firehouse, perhaps the question isn’t, “How do I modify my biology to accommodate the bandwidth of the firehose?” But rather, “Why am I trying to drink out of a firehose in the first place?” Maybe a bottleneck isn’t your problem. In fact, it might just be the solution. Reply via: Email · Mastodon · Bluesky

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

What's new in the Gemini Live API

Go Make ThingsMulti Author Blogs1 min read

The most influential fictional cat

Almost immediately after finishing the Dungeon Crawler Carl series, I started re-reading the books. I’m blown away by how much the series has pushed me even further into anarchist, community-oriented behavior. We recently moved from MA back to Rhode Island. We were making a lot of trips back and forth between our old house and the storage unit we rented near our new place. After one particularly long day, I pulled off the highway for a quick bite to eat, and saw one of the homeless folks I know panhandling.

Rachel AndrewTop Front-end Bloggers1 min read

Remove start and end margins with the margin-trim property

A frequently asked multiple-column layout question is why a new paragraph at the start of the column has additional space above it. The space is the margin on the paragraph, which doesn’t collapse if the paragraph is inside a multicol container. The only fix is to not use a top margin on paragraphs. However, the ... Remove start and end margins with the margin-trim property

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

How to Deploy, Secure, and Automate Full-Stack Web Apps – Course for Beginners

remy sharp's b:logTop Front-end Bloggersread at source

tip turn on dns over https doh [link]

Ignoring that every time I read DoH as "Doh!" and not DNS over HTTPS, this is still a useful tip from Tantek. A reminder that it's easy for the router to see what's happening. By using DoH exclusively, every one of those domain names is sent only to your DoH provider (e.g. Cloudflare or NextDNS) blocking your local router, WiFi, and internet service provider from making a list of which websites you visit, or at least making it much harder Original link: tantek.com/[…]/tip-turn-on-dns-over-https-doh

W3C NewsBrowsers, engines, etc.1 min read

First Public Working Draft: Web Authentication: An API for accessing Public Key Credentials Level 4

This specification defines an API enabling the creation and use of strong, attested, scoped, public key-based credentials by web applications, for the purpose of strongly authenticating users.

HTML All The ThingsPodcastsAudioListen

My Favorite Developer and Productivity Apps Right Now

Every once in a while, a new app actually sticks and changes how you work. In this episode, Mike shares the developer and productivity apps that have earned a permanent spot in his workflow, including the Aside AI Browser, Orca Agent IDE, OrbStack, Aerospace, Raycast, and…

Zach LeathermanTop Front-end Bloggers1 min read

Table of Contents Web Component

…and another one. This little (zero CSS) web component has two modes: progressively enhance a hierarchy of server rendered <ol> or <ul> elements (or conveniently client render them for you if they don’t exist) to highlight which are currently visible in the viewport. I pulled…

Ahmad ShadeedMore Front-end Bloggersread at source

Better Icon and Label Alignment

JavaScript WeeklyMulti Author Blogsread at source

Functional programming jargon, mapped out

#​802 — September 15, 2026 Read on the Web JavaScript Weekly Functional Programming Jargon, Mapped and Explained — Currying, purity, functors, monads…? If FP terms ever go over your head, TC39 delegate Hemanth HM's popular jargon reference is now an explorable map of concepts showing how they relate, each with a simple definition and JavaScript example. Hemanth HM Stay Sharp in the Age of AI — Master.dev instructors build at Anthropic, OpenAI, Netflix, Google, and Stripe. Learn from them with hundreds of courses, live workshops, and expanded AI learning paths. New members get $100 off a yearly membership . Master.dev sponsor Modern Web Types: TypeScript Support for Newer Web APIs — TypeScript's DOM types only include APIs shipped in multiple browser engines, so things like element-scoped startViewTransition and fetchLater throw up errors. modern-web-types is a drop-in lib.dom replacement that adds missing interfaces/members shipped in any single browser engine. Philip Walton (Google) React 19.3 Released — A significant minor release making view transitions and Fragment Refs stable, adding Trusted Types support, and more. We covered it in more depth in last week's React Status . The React Team IN BRIEF: 🔒 Attackers are scanning for exposed Vite dev servers exploiting a server.fs.deny bypass (patched in Vite 7.3.2 and 8.0.5 earlier this year) to grab credentials from .env files. Vite listens on localhost by default, but double check your setup. Safari 27 shipped yesterday (alongside macOS/iOS 27), bringing the module loader rewrite we covered last week , so top-level await now works reliably in all major browsers. TC39 meets in Tokyo in two weeks. Here's the agenda with three iterator helper follow-ups ( join , includes and chunking ) all up for Stage 4, plus more. 🔒 Starting this Thursday, the OpenJS Foundation's CVE team is taking a break till October 6 due to burnout driven by a surge of AI-generated reports. Actively exploited issues will still get a response. 🔒 npm now places a temporary 72-hour 'security hold' on any account after a successful recovery-code sign-in. RELEASES: pnpm 12.4 – The package manager can now manage Rust crates and Python packages alongside npm ones in a single workspace. Playwright 1.63 – Tests can now declare a named lock so those sharing a resource never run concurrently. Node.js v26.8.2 (Current) and v24.21.0 (LTS) – Both include a security release of Undici to fix numerous vulnerabilities. React Router 8.4 , Vite 8.3 , Moment.js 2.31.0 (security release). 📖 Articles and Videos A Design Space Exploration of async / await — A simple async / await example produces different results in JavaScript, Rust, Python and Swift. Test your mental model with a quiz, then learn about the design choices behind the differences. Gavin Gray Native is Now the Future of Mobile at Shopify — Shopify is rewriting its React Native mobile apps in Swift/Kotlin. The main argument is coding agents have cut the cost of writing everything twice, while the upsides of native remain. Mustafa Ali (Shopify) Workshop: From an Error to the Logs That Explain It — Reading logs next to traces and errors, holding context across services, and cutting the noise. Sentry sponsor A Deep Dive into StyleX — A hands-on tour of Meta's StyleX , which turns JavaScript style objects into plain atomic CSS at build time, and why it can be a good fit for coding agents in particular. Flavio Copes 📄 'Nobody Pays for Open Source: We Can Force Them To' – Laurie Voss ran npm for five years and thinks registries are an untapped lever for funding maintainers. Laurie Voss 📄 Anecdotally, Programmers Dislike reduce – map and filter sail through code review, but reduce draws complaints. Evan has a few theories why. Evan Hahn 🛠 Code & Tools SnapDOM 3.0: Turn DOM Elements Into Images, Canvas and More — Zero-dependency html2canvas alternative with support for pseudo-elements and Shadow DOM. v3.0 adds 'incremental recapture' for faster repeat captures, automatic web font embedding, and fromString() for turning raw HTML markup into images. Zumerlab Your App Didn't Get Slower. Your Data Got Bigger — TimescaleDB extends Postgres so queries stay fast at scale, even as your data grows. Get $1000 credit to start . Tiger Data (creators of TimescaleDB) sponsor Fallow: Codebase Intelligence for TypeScript and JavaScript — A fast, zero-config Rust binary that finds dead code, duplication, circular dependencies and complexity hotspots in JS/TS projects. It's also pitched as a deterministic check for AI agent coding loops. GitHub repo . Bart Waardenburg 🎨 category-colors: Generate 'Least Wrong' Color Palettes for Charts — Matt devised this algorithm for picking categorical chart colors in 2022 while design director at Stripe. It's now available as an npm package , and you can try it out on the Web here . Matt Ström-Awn React DevTools 8.0 ( Chrome Web Store ) – The Suspense tab is now on by default, the Timeline profiler is gone (use your browser's Performance panel instead), and inspecting a DOM node now shows its matching React component. Zod 4.6 – Adds .validate() , a boolean check that skips building errors and is up to 35x faster than .safeParse().success on invalid input with compiled schemas. Javet 6.0 – Embed Node.js v26's runtime in the JVM for full interop with Java. parse-xml 5.0 – The fast, compliant XML parser goes ESM-only . 🕹️ n64js 1.0 – A Nintendo 64 emulator in pure JavaScript. 📰 Classifieds 💻 Free live coding workshop, Sept 16 . Build signup protection with Fingerprint that catches fake signups, no matter how they cover their tracks. Flaky tests slowing down dev? Meticulous gives engineers confidence to ship faster by autonomously testing every edge case of your web app. ⚡ Zuplo puts every API, AI, and MCP request behind one gateway. Route traffic, guard your MCP servers, and cap your AI costs. Try it free . 📢 Elsewhere in the ecosystem 🕹️ This year's js13kGames entries are in with a record 317 games squeezed into 13KB each . Frank Force's SP13KTRA racer and the Hornbound roguelike are good places to start, and you can dig around the public repos of every project too. Chris Coyier rounds up new and emerging HTML features worth knowing about , like the and elements, as well as HTML-in-Canvas and improvements to customization. The first Three.js Conference took place in Paris last week, and Codrops has a live-blog writeup of both days , including Mr.doob's talk. No recordings yet. Tailwind Labs, the team behind Tailwind CSS, is joining Shopify . Tailwind CSS is to remain maintained and open source – phew! 😅

Jonathan SnookTop Front-end Bloggers2 min read

Reminder of Things

It feels like to-do lists peaked about a decade and a half ago. (Perhaps like so many things, but I digress.) It was the heyday of Getting Things Done and Inbox Zero and all the apps you can imagine to manage your items to do, like OmniFocus and—my personal favourite— Things . I…

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.

DigitalOcean BlogMulti Author Blogs3 min read

Intelligence is yours. Let's keep it that way.

Intelligence was yours . A founder’s intellectual property, business logic, differentiation, their intelligence, was once theirs alone. You built it, you owned it, and no tools/platform vendor stood between you and your customers. This is no longer clear. It is starting to look…

CodePenCompany/Startup Blogs3 min read

Chris’ Corner: Things Getting Better

Very cool that random() in CSS is coming to Chrome to join Safari who led that feature. It means one of my favorite demos I’ve made when I was first playing with it will work for more people. I just like how little code it is and how it combines some fun modern CSS features. […]

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, […]

Dave RupertTop Front-end Bloggersread at source

I wish you the best in the Offline

A handful of people I follow and know about have announced their recent departure. Not from a job (although plenty of that going around), but from social media, AI usage, or in more extreme cases the Internet entirely. In Goodbye, Forever, Probably , Salma announced her retirement from the internet. She makes a sound case for leaving DevRel, a demanding job with mushy metrics that struggles to find a home between product and marketing, because community building is neither of those. I could see why Salma wanted out of the metric chasing and the daily requirement to be a public face. Salma foreshadowed this move for awhile, there was a palpable discontent with the industry in her online voice. And she did it. She made the jump to the Offline and she’s been dark on the internet since her post. I haven’t talked to her personally, but I hear second-hand she’s making good on her word and laying low at a good company as an individual contributor. I wish her the best and that the detoxing process goes well. Then there’s Chad Whitacre who announced his retirement with a typewriter-written letter . His plan? Lay low and make a zine about religion. That seems like a charming project but I get so curious about people’s financial situations when they’re able to make such asymmetrical moves like that. He lives in a rural town near Pittsburgh, does selling $10 zines afford that lifestyle? What about healthcare? Does he have a trust fund? A recent inheritance? Bitcoin? Years of an early retirement strategy paying off? I shouldn’t ruin the anti-capitalistic vibe with such trivial capitalistic questions but I love it and my brain jumps to trying to make the math work for myself. Either way, I wish him the best in the Offline. Brett Codes shared his post I’m done using AI (and video ). It caused a stir on the algorithm. Based on followup videos, Brett seems happy with his decision which perhaps comes down to the fact that he’s a person who stands by his convictions –he’s a vegan, uses a dumb-phone, etc.– and I think he finds fulfillment in eschewing the social norms. But I admire his perspective as someone who used AI but ultimately decided to let it go. Betting your career against the thing (it seems) all companies are hyper-scaling towards is a big bet. Either you’re right and the world will always need people who know how software works, or you’re wrong and you’re left in the dust… or we’re all steam rolled by the errant contraption. Either way, I wish him the best unplugging from the machine. I know of other stories but because three is a magic number that people find harmony in, I’ll cap it here. There’s a sad irony when someone jettisons from social media, they’re gone from our Online worlds but I’m so happy for them. And I mourn what we don’t get to hear from them. We don’t get to hear about how wonderful they feel, how beautiful their skin is now, and how they restored their mental health. We don’t know if they make more money or less money. We don’t get further inspiration from them to leave the Online. But being able to observe the Offline from the Online might ruin the magic and mystery hidden there. It’s a door hidden in an old wardrobe that you have to pass through to fully understand. Anyways, should you leave us and follow those who have gone ahead, I wish you the best in the Offline. I hope to join you there soon.

Level AccessCompany/Startup Blogs9 min read

Four Digital Accessibility Trends to Watch in 2027

We surveyed more than 2,500 professionals on the state of their accessibility programs. AI adoption is now near-universal, and organizations observe the strongest The post Four Digital Accessibility Trends to Watch in 2027 appeared first on Level Access .

Level AccessCompany/Startup Blogs7 min read

AI and Digital Accessibility in 2026: Where AI Helps and Where It Doesn’t

80% of professionals now use AI for digital accessibility, but the benefits are uneven. According to our Eighth Annual State of Digital Accessibility The post AI and Digital Accessibility in 2026: Where AI Helps and Where It Doesn’t appeared first on Level Access .

Go Make ThingsMulti Author Blogs1 min read

Depending on other people

In countries outside of the US, “libertarianism” is often synonymous with anarchy. In the US, it typically refers to folks who are really into unrestrained capitalism without the social support. I was talking about this with a libertarian friend some time ago, and they said something along the lines of… What you’re describing means you’d have to really depend on other people. They meant it in a bad way.

SyntaxPodcastsAudioListen

1038: OpenAI Releases GPT 6 Astra

Wes and CJ dig into OpenAI’s GPT‑6 Astra; the massive jump in computer use, the wild Blender MCP 3D demos, and whether all the AGI talk actually holds up. Plus Hugging Face’s robot duck, Vitest 5 and the arrest behind the shai‑hulud supply chain attacks Show Notes 00:00 Welcome…

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…

Philip WaltonTop Front-end Bloggersread at source

Modern Web Types

Zach LeathermanTop Front-end Bloggers1 min read

Solar Eclipse Toggle Web Component (two state dark/light mode toggle)

In Trying out a Two-state Dark Mode Toggle I summarized the Two-state Dark and Light mode Toggle discussion as I experimented with a toggle in my personal website footer. After launch, Curtis Wilcox left some good feedback to improve the accessibility of the component . I…

Addy OsmaniTop Front-end Bloggersread at source

Brownfield Agentic Engineering

What it takes to run agents in a codebase older than the team

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…

Calibre BlogCompany/Startup Blogsread at source

It’s official: Airline websites are slow, but they don’t have to be

We analysed 111 airline websites and it confirmed what travellers have been feeling for years

remy sharp's b:logTop Front-end Bloggers4 min read

Redesign '26 [blog]

Around June this year I decided that I wanted to spruce up my blog. I had landed on Elliot Jay Stocks and Jon Hicks' web site and it really made me want to get my blog to something I'd consider visually appealing. I do know that I've set the bar way, way too high by looking at their sites. Specifically because if you're reading this on my website (and not RSS), you'll know design is not my strong suite. Grey is. Boxes and grey. Given that my last redesign was 18 years ago, I'm hoping I've learnt a few design tricks along the way.

Speckyboy Design MagazineDeveloper/Designer News5 min read

Are Browser-Based Apps Enough for Web Designers?

Browser-based apps can now handle serious design, editing, and productivity work. We take a look at their convenience, collaboration benefits, privacy risks, and where desktop tools still make sense. The post Are Browser-Based Apps Enough for Web Designers? appeared first on Speckyboy Design Magazine .

Jim Nielsen’s BlogMore Front-end Bloggersread at source

Preserving Netlify Analytics Data Beyond 30 Days

I’ve got Netlify Analytics turned on for a few of my websites. I use it send myself a little daily digest that alerts me when folks link to my writing, be it an individual sending me a few referrals, a newsletter sending me a few hundred, or Hacker News sending me thousands. But sometimes I want to know more than, “What happened with traffic in the last 24 hours?” Sometimes I want to know, “What happened with traffic in the last month?” I can log in to Netlify to answer that question. Sometimes I want to know, “What happened with traffic in the last six months?” Netlify doesn’t have an answer for that because they only store the last thirty days of traffic data. I’ve known about this limitation for years and always thought, “I really should just start saving that data for myself.” But, you know, laziness. How bad do I really want it? The answer, it seems, was “I only want it if it’s _easy_”. Enter Val Town . Val Town makes this kind of task easy. Each “Val” is it’s own little bucket of scoped computing primitives for just such a task: Code (run a script that fetches data) Secrets (securely store my Netlify access token) Storage (my own little SQLite database for persisting data over time) Automation (run this task every 30 days) All of this might seem like overkill for a single-script task like mine. But I like it. The scoped nature of each of these primitives makes composition easy without the kind of entanglement I’d have to fight to keep isolated if I were co-locating this task with other small tasks. I don’t want to think about a shared schema for this task and whatever other tasks I might think of in six months. I don’t want to have to reason about evolving an architecture and maintaining a codebase of miscellaneous, unrelated tasks. Vals are perfect for this. So the way I have this setup is: run the .ts file every 30 days which fetches the last 30 days worth of analytics data from Netlify and stores it in SQLite. ( You can see my Val here. ) At that point, I have the data I need to curiously ask any question, e.g. What are the top referring sites to my blog? What post has received the most page views over time? Where does most of my traffic come from? The answers to these questions get more and more interesting over time, as the long tail of web dynamics play out: search engine traffic, serendipitous rediscovery of old posts in light of new trends, etc. “But how do you actually view the data you’re storing to get answers to these kinds of questions?” Great question. Val Town has a UI where I can see the raw data I’m storing (which I chose to store exactly as I got it from Netlify, rather than doing some pre-processing first): But that’s not very useful. I need to parse that data and turn it into some kind of useful analysis. And you know what tool is super useful for understanding data? A spreadsheet. If I were using Excel, I’d probably have to figure out a way to dump the SQL, convert the JSON to some kind of CSV, then import it. And every time I wanted to see the “latest” data, I’d have to run that workflow. Enter Quadratic . Val Town has an API where I can fetch the latest data via code, and Quadratic is a spreadsheet that runs code. So seeing “the latest data” from my pipeline in Val Town is as easy as pressing a “re-run code” button in Quadratic. Quadratic serves as a kind of “front-end” to my data pipeline. Easy to pull the raw data, transform it however I need, and create a “dashboard” I can revisit whenever I want to see the latest insights or ask new questions. And, since I’m storing data for a couple different sites in Netlify, I have a single cell in my spreadsheet where I can swap out the domain — say from blog.jim-nielsen.com to iosicongallery.com — and the entire dataset and dashboard redraw. I know, I know. There are lots of products for stuff like this. And there’s probably a million other ways to do what I’m doing, all peculiar in their own way. But this one is mine. And now I can sleep at night knowing that every 30 days my little Val Town robot is gonna go store the last 30 days of data that Netlify is throwing away. One person’s garbage is another person’s treasure trove of data. Reply via: Email · Mastodon · Bluesky

Go Make ThingsMulti Author Blogs3 min read

Abolish patents

So many anarchist principles seems like they would “never work”… because they literally cannot under capitalism, but would work just fine under a different system. One really good example of that is abolishing patents. Patents are silly, actually A patent says a person or company legally owns “an idea” or way of doing things, and no one else can use that idea or approach for many years. If you think about it for a bit, that seems really silly, doesn’t it?

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…

Chris HawkesYouTube ChannelsVideoWatch on YouTube

Coding Interviews are Pointless These Days

David BushellMore Front-end Bloggers3 min read

RSS Club #009: Domains

This is an RSS-only post, thank you for subscribing :) I keep buying domains! When will I ever learn? Domain prices are increasing (again) because why wouldn’t they? Sub-domains are free! Host your side project on a sub-domain! Then if you get bored, who cares? […]

HTML All The ThingsPodcastsAudioListen

I Let AI Help Plan My Vacation... Here’s How It Went

Can AI actually plan a good vacation? Matt recently used ChatGPT and Gemini to help plan a trip to the UK, from sightseeing and transportation to fitting everything into a packed itinerary. We break down what AI got right, where it completely missed the mark, and why the best…

CodePenCompany/Startup Blogs3 min read

Shrink-wrap Text with `position-anchor`

Normal text wrapping can leave big gaps in your container, which can become even more exaggerated with the new-ish CSS values of text-wrap: balance and text-wrap: pretty. You almost certainly want to use balance or pretty because they do a great job preventing “dangling” lines in your text, even with icons. But what can we […]

Bram.usMore Front-end Bloggers4 min read

WebKit supports interactive-widget … and hopefully Safari will too?

About a month ago, WebKit gained support for interactive-widget . While it’s not clear whether this will end up in Safari or not, this is pretty exciting news: If you have ever had a virtual keyboard obscure your fixed navigation bar, then interactive-widget is for you. This post details a quick recap of what the feature does, how we got here, and a sneak peek at it running in WebKit.

Mux BlogCompany/Startup Blogs4 min read

How Firecrawl helps our sales team build custom product demos

A personalized demo beats a features list. Here's how we use Firecrawl to help sales build one from a single URL, tailored to each prospect.

text/plainMore Front-end Bloggers6 min read

Experimentation: Just Try It!

I’ve now been working in tech for 25 years, and in that time I’ve developed some wisdom. One theme I’ve discovered and blogged about repeatedly over the years is profound despite its simplicity: In many cases, the best way to know whether something will work is to just try it. I’ve written numerous posts making Continue reading "Experimentation: Just Try It!"

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

Manage your agents while you’re on the move with the Antigravity Remote Control

Jeffrey Zeldman PresentsMore Front-end Bloggersread at source

My Glamorous Life: A Good Lie

For “My father’s favorite food is,” the kid had written SALAD. The post My Glamorous Life: A Good Lie appeared first on Jeffrey Zeldman Presents .

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...

Smashing MagazineThe Giants13 min read

Building A UX ROI Case That Survives The Boardroom

Strong UX ideas do not secure investment on their own. Through a worked example, Alex Williams breaks down how to define business value, calculate costs, test causality, and build a credible case for the return on a design initiative. - UX - Design - Business

Speckyboy Design MagazineDeveloper/Designer News6 min read

20+ Best Free Fonts Perfect for Art Deco-Inspired Designs

Are you looking for the perfect free Art Deco font? We have both serif and sans-serif variants, and all will add a touch of elegance to your project. The post 20+ Best Free Fonts Perfect for Art Deco-Inspired Designs appeared first on Speckyboy Design Magazine .

Zach LeathermanTop Front-end Bloggers1 min read

Trying out a Two-state Dark Mode Toggle

Update I made some updates and released it as a web component: details in Solar Eclipse Toggle, a Dark/Light mode Toggle Web Component . Lea Verou sparked some lovely discussions about dark/light mode toggles by asking a simple question: do these form controls need three options…

text/plainMore Front-end Bloggers1 min read

Simple Browser Security Improvements

Security Engineering is all about tradeoffs: Web Browsers attempt to achieve an absolutely bananas goal: Allow safe execution of untrusted content on a user’s device. Browsers are a huge vector for compromise of users’ devices and personal information, owing to the power and complexity. Much of the vulnerability induced by browsers occur where tradeoffs were Continue reading "Simple Browser Security Improvements"

remy sharp's b:logTop Front-end Bloggers2 min read

text-decoration-thickness discrepancies [blog]

I'm in the process of (attempting) to redesign this blog, and in doing so, I'm using a few of the new bits (to me) of CSS to make things fancy. In this instance, I'm using text-decoration-thickness on my titles, and wanted to document the quirks I noticed.

Adam ArgyleTop Front-end Bloggersread at source

WWW Ep253 Experts Agree Yelling At Computers Is The Future

Ep #253 Experts Agree: Yelling at Computers Is the Future Robbie and Chuck reunite over Jim Beam White Label to catch up on Chuck's move to Italy, AI as tech leads, CodeRabbit versus GPT for code review, SOC 2 compliance workarounds, and why GitHub bots might unlock dark fac…

Netlify BlogLibraries, Frameworks, etc.read at source

Cursor Origin repositories build, preview, and deploy on Netlify

Cursor Origin repositories now build, preview, and deploy on Netlify — the same way GitHub, GitLab, and Bitbucket already do. Beta, via Cursor’s invite-only program.

Jeffrey Zeldman PresentsMore Front-end Bloggers2 min read

AI, Disruption, and Standards

Individually, we have very little power, but together we have a great deal of power. In response to a series of Medium articles by Patrick Neeman—like this one that addressed issues of AI governance, fairness, and standardization—publisher Louis Rosenfeld invited Patrick and me to come on his show and talk about AI and standards. A […] The post AI, Disruption, and Standards appeared first on Jeffrey Zeldman Presents .

Google ChromeBrowsers, engines, etc.read at source

Switching password managers is easy and safe on Android

Android bot showing how to switch password managers

Web Tools WeeklyMulti Author Blogsread at source

Web Tools Weekly Issue #686

JS Libs, Testing Tools, Uncats

Geoff GrahamMore Front-end Bloggers2 min read

The Device Posture API

The “big” news yesterday was the new foldable iPhone. I haven’t held it, but seeing the announcement videos show how the screen changes context in several different ways: folded (portrait and landscape), unfolded (portrait and landscape). that made me wonder how CSS might respond to each context. I mean, the portrait and landscape orientations are […]

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

OpenAI Codex Crash Course – Build & Deploy Apps with Autonomous AI

Bram.usMore Front-end Bloggers2 min read

Introducing <​mermaid-element>, a custom element to display Mermaid diagrams

Today I learned that CodePen supports Mermaid diagrams — Chris Coyier has a a whole collection with examples here — and I also learned that there is no custom element to easily include these in your markup … so I built one.

Brad FrostTop Front-end Bloggersread at source

Code Snack

Code Snack by Lauren Basser looks very useful. Engineering concepts for visual learners. Updated weekly. She's breaking down the Terminal, Git, and things like Web Components for people coming from a design background. We've seen a slew of designers swimming in new waters, so…

Web Accessibility Initiative (WAI)Browsers, engines, etc.read at source

For Review: WCAG 3 Working Draft – September 2026

W3C Accessibility Guidelines (WCAG) 3.0 Working Draft is updated. The starting place for background, timeline, and up-to-date information is the WCAG 3 Introduction. For a list of changes in the September 2026 draft and review questions on the conformance model, see Status: In-progress drafts.

Mux BlogCompany/Startup Blogs6 min read

Queuing Mux Robots Directives With Laravel

Laravel Queues are a great match with Mux Robots when you want to orchestrate multiple Directives.

Jens Oliver MeiertTop Front-end Bloggersread at source

2026: 2 of the Global Top 200 Websites Use Valid HTML

Among websites, being part of the 1% is a good thing—the latest findings from the annual study about the most important and simultaneously most difficult language in the world.

W3C BlogBrowsers, engines, etc.2 min read

A compilation of W3C in Japan's 30th anniversary events

2026 marks the 30th anniversary of the establishment of W3C in Japan. As part of these commemorative activities, W3C Japan held an event for W3C members in May, an exhibition for the general public in June and an event early September for W3C members and the web developer community in Japan.

DigitalOcean BlogMulti Author Blogs1 min read

Built for agents: Omarchy's pipeline moves to DigitalOcean

Omarchy is a keyboard-first Linux desktop built on Arch and Hyprland by David Heinemeier Hansson (DHH), and its production pipeline, packaging builds, PR review agents, and QA testing, now run on DigitalOcean. Agent workloads don’t behave like a typical web server. They’re…

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Learn Python – Interactive Course 2026

CSS WizardryTop Front-end Bloggersread at source

Web-Perf Wednesday 008 – Good INP Rates Keep Falling

CrUX shows another fall in good INP experiences, making careful attribution more useful than a quick explanation.

SyntaxPodcastsAudioListen

1037: WebMCP is here (and you should care)

Scott and Wes talk about WebMCP with Sarah Drasner and Dominic Farolino from the Chrome team, which is the new W3C standard that lets your site hand real tools to an agent. They cover the security model, headless and multi-tab agents, and how to wire it into an app you’ve…

Smashing MagazineThe Giants9 min read

The Death Of The Button: Why The Best Interface Is No Interface

TThe web is evolving beyond menus, forms, and endless clicks toward experiences shaped around human intent. For UX designers, understanding this shift means re-evaluating their role, moving from designing visible interfaces to guiding transparent, intent-driven AI experiences.

Zach LeathermanTop Front-end Bloggers2 min read

I was tired of building 474 separate pages for Open Graph Images

Prior blog post (if you want the full context): If I work really hard on my Open Graph Images, People will share my Blog Posts (2021 Aug) Here’s the gist: Open Graph images are those little pictures that show up when your site is shared on social media. […] Each individual blog…

Brad FrostTop Front-end Bloggers3 min read

Our AI & Design Systems Course Is COMPLETE!

TL;DR: Our AI & Design Systems Course is complete; the price goes from $995 to $1,495 on September 30th. What the course includes Over 20 hours of in-depth lessons across 200 videos covering core concepts, tools setup, techniques, and practical implementation of AI & design…

Frontend FocusMulti Author Blogsread at source

What's new in HTML for 2026

🚀 Frontend Focus #​757 — September 9, 2026 | Read on the web New Things You Should Know About HTML in 2026 — HTML moves a bit slower than CSS and JavaScript, but there's plenty of new features to keep up with. Chris runs through several, including the geolocation element, HTML-in-Canvas, camera and mic management via usermedia , and the model element. A great way to catch up. Chris Coyier The Best Dark Mode Toggle is Probably… None — We recently shared some thoughts from Lea on controls for switching between light/dark modes. After weeks of debate, including a rebuttal from Bramus , she returns to ask whether most sites need an always-visible toggle at all . Lea Verou Free Course: Build Ambitious Modern Interfaces Faster with OpenAI Codex — Join Katia Gil Guzman for this free Codex course and learn how agentic coding has changed frontend development. You'll cover setup, prompting, feedback, skills, automations, deployment and more. Master.dev sponsor Antiquated HTML Snippets and Artefacts — A tour of various snippets of code that commonly appear in HTML, but which are largely byproducts of a bygone era and are no longer needed. Conditional comments, X-UA-Compatible , and cleartype directives all make an appearance. Declan Chidlow 🗳️ W3C Opens Its 2026 Community Survey — The W3C has launched its 2026 community-wide survey to gather input from developers and stakeholders on the future direction of its operations and web standards work. W3C ⚡️ IN BRIEF 🎉 The team behind Tailwind CSS is joining Shopify but "nothing changes with Tailwind CSS or any of our other open-source projects." 📑 Interop 2027 proposals are open until September 23 — you can nominate the cross-browser gaps that most need fixing. 🗓️ As promised, Chrome has now moved to a two-week release cycle , with Firefox, Edge and Brave following suit. 🖼️ JPEG XL support will be enabled by default in Firefox 158 . 🕵️ Years ago, a developer noticed Chrome exempted Google's own sites from the setting that wipes site data on exit (Google fixed it). Now, he claims it's happening again as of Chrome 152 . 🏛️ InfoQ reflects on jQuery 1.0 turning 20 years old and why it remains heavily used across the Web. 📙 Articles, Opinions & Tutorials Creating a Custom Scrollbar Component in 2026 — How to approach building high-performance custom scrollbars, replacing heavy JavaScript arithmetic with modern CSS features and handling sizing and visibility entirely within the stylesheet. A clean, modern approach to a classic UI challenge. Alexander Inkin The Browser's Main Thread is Expensive — A thorough look, complete with demos, at spending your main thread time well, including splitting, batching, prioritizing, and deferring tasks, then how to get work off it entirely. Sunhyoup Lee The Loading State Isn't the Frontend's Fault — It's the query behind it. TimescaleDB extends Postgres so it returns fast as data grows. Get $1000 credit to start . Tiger Data (creators of TimescaleDB) sponsor Wiring Up Components with Typed attr() and Container Style Queries — Shows how to feed HTML attributes into CSS properties (like grid column counts or spacing units), then let style queries pass that state down to child components with no JavaScript state or utility classes required. Brecht De Ruyte CSS: The Weapon Inside Your Inbox — How CSS can be weaponized against popular webmail providers to do things it shouldn't be able to, like defacing the UI, bypassing image proxies, and building a keylogger. Gareth Heyes Testing Cookie Behavior Across Hundreds of Web Surfaces with an In-House Auditor — An interesting ‘big corp’ case study looking at tooling built to audit cookie behavior at scale across various web properties. Yasmin McDowell and Lawrence Good (Dropbox) .name Termination — Discusses the impending sunset of .name 's third-level domains and the implications for those using it for their online identity. Neil Fraser Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL Filip Kantedal (Codrops) 🦖 How the Chrome Dino Game Works: A Tour of Chromium's Source Alex Oliinyk Animating CSS Grid Layouts with CSS Anchor Positioning Bramus van Damme 🧰 Tools, Code & Resources Drawably: Hand-Drawn UI Controls — A collection of neat hand-drawn UI controls. The animated pen sketches even get drawn via seeded randomness. Zero dependencies, ~7 KB of JS gzipped and a 3 KB stylesheet. Repo here . Daniel White vgpu: Render WebGPU Shaders in the Browser or Node.js — Provides a way to use the same shader in the browser or render headlessly with Node (to a high-resolution PNG or MP4 video). WGSL modules import and export like TypeScript does. Vercel Sentry Says It Crashed. Datadog Says It's Slow. Expo Tells You Why — Expo Observe knows your release pipeline, so it ties a startup regression to the exact build or update that caused it. Expo sponsor WCAG Radar: Run Accessibility Checks on Pages You Have Open — A bookmarklet and browser extension that runs WCAG 2.1 and 2.2 AA checks against the page you’re on and marks up the results in place, all running locally. Note: 28 of the checks are free, but you get 18 additional checks with a paid upgrade. Proper Access B.V. Roux: A Boilerplate of Pre-Defined Native CSS Styling — This HTML/CSS starter provides a foundation of CSS files, variables, base styles, and HTML components. You can see it in action on the docs page . thoughtbot The Fixi Project: A Collection of Small Web Libraries by the Creators of htmx — All five libraries – each one a standalone script – are designed to be lightweight versions of their more popular offerings like htmx, Hyperscript, Idiomorph, etc. Source code . Big Sky Software 📰 Classifieds 📸 Scan barcodes, QR codes and others directly in the browser using STRICH , a lean JS SDK. Free 14-day trial, try the demo app today! 🔎 A Minimal Browser for macOS Confectionery: A Browser for Taking Cleaner Screenshots — A Mac-only browser with a stripped-back UI ideal for taking tidy screenshots with minimal browser clutter. Only a 2.9MB download too. Vadim Demedes

Adrian RoselliMore Front-end Bloggers7 min read

Support for `headers` Attribute

This post only covers the headers attribute in HTML tables (ARIA has no headers equivalent). My 2022 post Accessible Cart Tables? showed headers attribute support was poor. In my 2023 post Avoid Spanning Table Headers I didn’t use headers because I knew support was poor. For this post I merged…

CodePenCompany/Startup Blogs1 min read

439: Dragging! Drag Everything!

Stephen just implemented a great UI feature for the 2.0 editor where all the Panels that were previously stuck to the left side of the page can now be dragged away to become an “Editor Tab” just like a file (or Block!). Now you’ve got a lot more freedom for what you’re looking at, and […]

Microsoft Edge BlogBrowsers, engines, etc.3 min read

Faster reviews and quality recognition for Microsoft Edge extensions

Building an extension has never been easier. Rapid adoption of AI-assisted coding is enabling developers to build extensions faster than ever. We have seen that momentum on the Edge Add-ons site The post Faster reviews and quality recognition for Microsoft Edge extensions appeared first on Microsoft Edge Blog .

Christian HeilmannTop Front-end Bloggersread at source

Moderators wanted for WeAreDevelopers World Congress North America on the 23rd!

WeAreDevelopers is coming to San Jose, California on the 23rd this month for the first time to run an event almost as big as the World Congress we did the last 10 years! – we now still need some people to moderate stages. Your job is to introduce speakers, run the Q&A and keep time. […]

David BushellMore Front-end Bloggers4 min read

CodePen: exposed!

I promise this post is not merely a comment on a Hacker News submission because good lord that would be desperate but that is where I’m starting: “They send all typed into editor input to codepen.dev almost immediately (you would see in 1-2 sec after you typed your secret that it appears in […]

Level AccessCompany/Startup Blogs6 min read

Is WCAG Conformance Enough for EAA Compliance?

If your business currently operates in the European Union (EU) or is planning to expand into the EU market, compliance with the European The post Is WCAG Conformance Enough for EAA Compliance? appeared first on Level Access .

DequeMulti Author Blogs6 min read

EN 301 549 v4.1.1 is final! What changed, what it means, and what you should do.

On September 2, 2026, EN 301 549 v4.1.1 was officially published. This represents a major update to Europe’s accessibility standard for ICT products and services, and it’s a big milestone. But in practice, it’s only the first step along a three-point timeline. The post EN 301 549 v4.1.1 is final! What changed, what it means, and what you should do. appeared first on Deque .

remy sharp's b:logTop Front-end Bloggers1 min read

Are We at War with AI Agent “Civilizations”? [link]

TL;DR: no. I've been watching over the commentary about the recent LLM "breakouts", and I feel particularly suspicious about the way the AI companies themselves have been reporting. This post captures what I've been thinking (without having the firm grasp of the technical methods). In particular: OpenAI wants us to believe that these hacking incidents are the inevitable result of AI continuing to become more powerful. This framing casts them as the reluctant (perhaps even heroic) stewards of a powerful technology. Especially at the scale of numbers of prompts and agent runs they're dealing with, without any supervision. Original link: calnewport.com/are-we-at-war-with-ai-agent-civilizations

QuirksBlogTop Front-end Bloggersread at source

Style queries for nested breakpoints

A few months ago I thought I had a brilliant style query idea that would help me rewrite the CSS for a few older sites in addition to dazzling everyone with my deep and abiding intelligence. When I revisited my notes in the past week I found the technique has its uses as a polyfill but is not quite as brilliant as I thought. Still, it might give someone else a bright idea. Finally, I learned some valuable style and container query lessons that I’m going to inflict on you as well. Centralised breakpoint definition I’m going to have to update antique CSS files, and I want a way of centrally defining a few @media breakpoints. Ideally we’d do this with custom properties: html { --smallSize: 240px; --mediumSmallSize: 480px; --mediumLargeSize: 960px; --largeSize: 1280px; } div.header { @media (width >= var(--smallSize)) { /* styles */ } } div.layout { @media (width >= var(--mediumSmallSize)) { /* styles */ } } div.footer { @media (width >= var(--largeSize)) { /* styles */ } } Alas, custom properties don’t work in media queries — yet. So I turned to style queries to fill the gap. The idea This is the basic idea. Set a custom property with media queries that gives us a number for the current "width category" of the layout viewport. html { --screenSize: 1; @media (width >= 20em) { --screenSize: 2; } @media (width >= 40em) { --screenSize: 3; } /* and so on */ } While we’re at it we can also concentrate all other CSS support detection here. Say I want to use the column-filled grids I posted about earlier. It needs one support detect, so we could add that here as well. html { --cfg: false; @supports (order: sibling-count()) and (order: calc(1cqw/1px)) { --cfg: true; } } Now I use these custom properties in style queries wherever I need them. div.layout { @container style(2 * { flex-grow: 1; } } @container style(var(--screenSize) >= 5) { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); @container style(--cfg: true) { grid-template-columns: 1fr; grid-auto-columns: 1fr; & > * { /* See here */ } } } } As you can see I mix them with CSS nesting. I absolutely adore CSS nesting and want to use the principle as much as possible. So I want to place all styles for div.layout in one block, using nested selectors and media queries as appropriate. As a test I nested selectors and style queries to about seven levels, and I encountered no difficulties. But then, I don’t think that browsers really nest these selectors and queries. They more like rewrite the selectors — or something. To Be Researched. Browser compatibility There are two possible syntaxes for the style queries: /* perfect support */ @container style(--screenSize: 3) /* Safari 26 doesn't support these */ @container style(--screenSize = 3) @container style(--screenSize >= 3) @container style( var (--screenSize) >= 3) The equal/greater/lesser syntax is not supported in Safari 26 , but the 27 beta/Mac that I tested it in supports them totally fine. I’m assuming 27/iOS will also support them, but I haven’t tested it. It will take another year or so for Safari 27 to be sufficiently widely spread. Still, custom properties in media queries aren’t supported anywhere yet. So this technique will be useful from Safari 27’s market maturity to that of custom properties in media queries. If you only use colon syntax, like --screenSize: 2 , you can use this technique today. But that’s not where it shines. Custom properties are inherited It’s probably worth stressing that the reason that this technique works is that custom properties are inherited, just like font or color . Thus, --screenSize will have the same value in every descendant of the HTML element. html { --screenSize: 1; @media (width >= 20em) { --screenSize: 2; } } div.layout { /* --screenSize is still 1 or 2, the same as in the HTML element */ } Like font or color , you can also redefine --screemSize somewhere in the inheritance chain. html { --screenSize: 1; @media (width >= 20em) { --screenSize: 2; } } section { --screenSize: 10; } div.layout { /* Now --screenSize is 10 */ } Numbers are better than names I want to use numbers , not names. I want to be able to say "for screen size 3 and above." That’s how media queries work, and that’s how I want these style queries to work. --screenSize: 1 ; @media (width >= 20em) { --screenSize: 2 ; } @media (width >= 40em) { --screenSize: 3 ; } @container style(--screenSize >= 3) Booleans are OK as well, if the question is a simple Yes/No one. --cfg: false; @supports (order: sibling-count()) and (order: calc(1cqw/1px)) { --cfg: true; } Essentially, use anything but strings. Strings can lead to cluttering ( mediumLarge2­_smaller ) and unclarity ("My brother in tech, that’s not medium-large, it’s medium-small.") The parent as container Style queries use @container , but we haven’t used any container-like property yet. Don’t we need container-type or something? Or aren’t style queries about containers at all? To be honest, this was my biggest source of confusion throughout this project. It didn’t seem like I needed containers as a concept at all. It took intervention by Miriam to make me realise that style containers are the rule, and size containers the exception. My confusion stems from learning about containers in the wrong order — and you likely have the same problem. So let me set you straight. By default, the container of an element is its parent element. In this example, the value of --screenSize on the as the parent of div.layout determines whether the div becomes a flexbox or not. /* section's --screenSize is 3 */ div.layout { @container style(2 You can set --screenSize on the layout div itself if you like. That doesn’t influence style container queries because the layout div is not its own container. In the next example, --screenSize remains 3 for the purposes of style queries. /* section's --screenSize is 3 */ div.layout { --screenSize: 5 ; @container style(2 It is not possible to fire the style container query based on the --screenSize value in the layout div. It simply doesn’t work that way. (You could use an if() instead, but that’s a quite different beast. See below.) container-name But what if you don’t want to use the parent as a container, but some earlier ancestor? In that case you use container-name . main { container-name: main ; /* inherits --screenSize 3 from html */ } section { --screenSize: 5; } div.layout { @container main style(2 The style query now takes the value 3 that it finds in the closest ancestor with the name main . Ancestor . The layout div itself still doesn’t count. Size containers These rules about parents and name s also go for size containers — the original container queries with cqw and such — but there’s one extra rule. In order to be a valid container for a size query an element also has to have container-type: inline-size . Now the width of the container is computed without reference to the widths of its children. That’s a vital necessity if you want to set the width of a child to 20cqw or something: the child width is not allowed to change the width of the container, or you’d enter an infinite loop. However, this does not apply to style containers because they don’t allow you to use the container width. There is no danger of infinite loops, so they don’t need a container-type , either. This container-type requirement is not a rule for all containers; only for size containers. We unconsciously learned to think of them as the default, though. They aren’t — style queries are. Time we update our mental model. if() The most consistent remark during my research time was: "Use if() !" Certainly not ! I shall do no such thing! .iftest { background: if( style(--screenSize: 3): #f6d781; else: #f4607b; ) } Granted, I wasn’t being very clear about what I was doing, and if() does allow you to read properties from the element itself instead of its container. That’s offset by two serious issues: if() has much worse compatibility than style queries. Right now it’s only supported by Chromium, and I can’t find any mention in the Safari 27 or Firefox 155 and 156 release notes. It only allows you to set an individual value, not an entire style rule. And once you start thinking about it, style queries are also sort-of ifs, right? @container style(--screenSize >= 4) /* I am an if() in disguise */ "If the --screenSize is 4 or larger, add these styles." Sort of. If you ignore that it can’t find out about itself.

HTML All The ThingsPodcastsAudioListen

Don't Just Vibe Code, Learn While You Code

AI coding tools can generate huge amounts of functional code in seconds, but does that mean developers no longer need to learn how to code? In this episode, Matt and Mike discuss how aspiring and junior developers can use AI coding agents as both builders and tutors - following…

Human Who CodesTop Front-end Bloggers7 min read

Five software engineering roles for working with AI

Software engineers can work with AI in different ways, from observing every change to managing an entire software factory.

JavaScript WeeklyMulti Author Blogsread at source

When 8 chunks weigh more than 355

#​801 — September 8, 2026 Read on the Web JavaScript Weekly How Turbopack Chunks Your JavaScript — Starting from the Network tab and working up, a look at chunking strategy and the tradeoffs bundlers make between fewer requests and less code (e.g. 8 chunks can weigh more than 355 do), backed by numbers from bundling the official Next.js site itself. Sam Poder Catch Runtime Bugs Before Your JS PR Merges — Greptile now runs your code to find bugs. T-Rex runs your PR branch in a sandbox, uses browser agents to click through your UI, and attaches screenshots and videos as evidence of the issue directly in the PR. Greptile sponsor Vitest 5.0 Focuses on Speed and Test Debugging — A major release for the Vite-native test runner, with a benchmark repo showing up to 53% faster runs on dependency-heavy apps. The new Trace View replays Browser Mode tests step by step, and vitest doctor recommends settings to make your suite run faster. Vitest Team How Safari Fixed Top-Level await — Safari's module loader was originally built on an abandoned spec proposal and adding top-level await caused years of "cannot access before initialization" errors. Safari 27 brings full spec compliance for it, but it took a ground-up rewrite and this post explains the complexity. Kai Tamkun (WebKit) IN BRIEF: 🎂 jQuery 1.0 is 20 years old . InfoQ looks back at how $() helped us dodge the browser wars and why many sites still use it. Ten years further back, Microsoft shipped JavaScript in Internet Explorer as JScript to dodge trademark issues. Two men have been arrested over the TeamPCP npm supply chain attacks . TeamPCP is suspected of cloning the Shai-Hulud worm, resulting in the 'Mini Shai-Hulud' waves. VoidZero's latest update celebrates Vitest passing 100m weekly downloads, React Compiler support reaching Vite, and the latest on Rolldown, Vite+ and ViteConf (taking place online this October 15th). RELEASES: deck.gl 9.4 – The GPU-powered data visualization library extends its experimental WebGPU support in what's expected to be the final v9 release. Bun 1.4.1 and 1.4.2 – Big idle memory usage drops, smaller bun build bundles, Bun.serve speaks HTTP/2 on the same port as HTTP/1.1, and more. NVM for Windows 2.0 – A Node version manager for Windows. No longer needs admin privileges in v2. Astro 7.3 , ESLint 10.10.0 , Storybook 10.6 , Vuetify 4.2 📖 Articles and Videos ▶ The Story of VS Code — An official movie-length documentary on Visual Studio Code 's journey from a Swiss skunkworks to now. Its founding engineers cover the decisions made in areas like Electron, LSP, and the extension API, plus candid talk about the various forks now springing up. Microsoft and Stefan Kingham 😅 We also learn that at the 2015 launch they drank a beer per 100 Hacker News upvotes… and had to stop at 1,400 (votes, not beers!) Half Past Fetch: What await fetch() Waits For — Did you know await fetch(url) waits for the headers, not the full body? Gabor digs into some surprising consequences of that for connections, clone() , aborts, and timeouts. Gábor Koós Your AI Writes Tests That Pass but Prove Nothing. Fix It — Wallaby CLI makes test generation 10x smarter with live coverage and runtime data, using 3x fewer tokens. One skill to install . Wallaby Team sponsor 10 Anti-'Slop' Moves for Frontend Projects — A walkthrough of automated checks that cut how much code you have to review, covering OpenAPI codegen, layer boundaries, mutation testing, and using CI to make it all stick. Yuri Mikhin (Evil Martians) The Browser's Main Thread is Expensive — A thorough look, complete with demos, at spending your main thread time well, including splitting, batching, prioritizing, and deferring tasks, then getting work off it entirely. Lee Sun-Hyoup 📄 Why I Ported Moonshine to JavaScript – Pete’s low-latency speech to text runtime now runs in the browser to avoid round trips to a server. Pete Warden 📺 How Can Someone Actually Change JavaScript? – A 2-minute explainer from a TC39 delegate. Mikhail Barash 🛠 Code & Tools Dropzone.js 6.x: The Drag and Drop Uploader Returns — A major update for the library that handles the browser side of drag and drop uploading. After a 5 year(!) beta, v6.0, 6.1, and 6.2 landed over two days, bringing no dependencies, smaller bundles, and fixes for chunked uploads that could corrupt files. Mat Simon Rslib 1.0: A Build Tool for Shipping JavaScript Libraries — From the Rspack team, a unified build pipeline that handles the irritating parts of publishing packages, like getting ESM and CJS working side by side, Module Federation output, and component CSS across React, Vue, Svelte and Solid. Chenwei Dai, Elecmonkey, et al. Balance build time with your time — Our technologists do meaningful work, and we give them the support to have a meaningful life, too. Fidelity Careers sponsor vgpu: Render WebGPU Shaders in the Browser or Node.js — Provides a way to use the same shader in the browser or render headlessly with Node (to a high-resolution PNG or MP4 video). WGSL modules import and export like TypeScript does. Vercel SimpleWebAuthn 14.0: Now with Post-Quantum Passkeys — The passkeys library now verifies post-quantum ML-DSA passkeys and, on Node 24.7 and up, prefers ML-DSA-44 at registration by default. Matthew Miller ESLint Config Inspector 3.4 – Adds timing analysis making it easier to identify the rules slowing down your lint runs. GPUIX 0.7 – Build native GPU-accelerated desktop apps with React and TypeScript atop the framework used by Zed . memlab 2.0.5 – Meta's framework for finding memory leaks in both browser and Node.js JavaScript apps. 🎵 Astro LilyPond – Build-time rendering of text to musical notation for Astro. 📊 vue-echarts 8.3 – Vue.js component for Apache ECharts. 📰 Classifieds 💻 Join Fingerprint on Sept 16 . Learn how to stop fake signups with Device Intelligence, and build protection that works, for free. Flaky tests slowing down dev? Meticulous gives engineers confidence to ship faster by autonomously testing every edge case of your web app. Charts crawling as your data grows? TimescaleDB extends Postgres to stay fast at scale, straight from live data. Get $1000 credit . 📢 Elsewhere in the ecosystem ✨ GitHub has a new privacy-safe star history API , so charting a repo's growth over time no longer means scraping or approximating it. Star-History shares a little more background and you can use it to chart projects' star counts, as above ( for example ). Robin Wieruch argues that, due to the advent of agentic coding, building things from primitives rather than high-level libraries makes more sense, using D3 vs Recharts as an example. You don't need initial-scale=1.0 in your viewport meta tag , claims Declan Chidlow, as it worked around quirks in old versions of iOS. Got a browser-compatibility pain point? Submit it as an Interop 2027 idea (by September 23). 👕 TIL you can buy official Vue.js merch !

Kent C. Dodds BlogTop Front-end Bloggersread at source

Introducing Kody: Your Personal Software Factory

Kody turns the good answer into a package you keep.

The Astro BlogLibraries, Frameworks, etc.read at source

Affordable and Fast Migration

How Evil Martians moved from Gatsby to Astro in nine days without rewriting a single React component

Bram.usMore Front-end Bloggers3 min read

Animating CSS Grid Layouts with CSS Anchor Positioning

At CSS Day (back in June), someone asked me how Brave (the browser) might have built their New Tab Page which features some tiles laid out in a grid. While the grid is nothing spectacular, something special happens with it when you resize the viewport: as the available space changes, the grid nicely reorganizes itself in an animated way. The animations are also interruptible, so no View Transitions seem to be at play. So, how did they do it? I’m not sure. But if I were to recreate it, I’d use CSS Anchor Positioning with regular CSS Transitions on top.

SyntaxPodcastsAudioListen

1036: Cursor & OpenAI Break Up

The messy breakup is official; as of November 12, OpenAI's models are getting pulled from Cursor, and we're digging into who's really to blame (and why Wes called it). Plus pnpm 12 goes full Rust, Mitchell Hashimoto drops Superlogical, ~700 AI agents attack Hugging Face, and Zod…

remy sharp's b:logTop Front-end Bloggers2 min read

Before you buy an LTE Pixel Watch (for your teen) [blog]

The boy is 14 and regularly does long outdoor runs. He tracks his run with Strava by carrying his phone with him. But carrying a phone (because they're bulky) is a pain. He also plans to swim in the sea during summer and we've all said we don't want him having a mobile just left on the beach until he comes back in. Mum (his, not mine) also runs and she's been caught in the past a few miles away without a phone, injured and asking a stranger to use their phone to call me for help (she was okay after some recovery). So the agreement was that we'd try to find a smart watch that also has call and text facility (ie. LTE). Lots of hunting around we ended up with a second hand Pixel Watch 2 and planned to add an eSIM to his existing phone plan. You know what they say about the best laid plans of mice and men? Well, it goes sideways is what.

Zell LiewMore Front-end Bloggers2 min read

The omitEmpty Function

Conditional spreads and if-statements bury the shape of an object. omitEmpty strips the empty values out instead, so you can write an optional property as if it were always there. Here's what counts as empty, and when to go shallow.

Zell LiewMore Front-end Bloggersread at source

Speaking Without Inhibition

Sometimes it's not appropriate to say something. But if you censor yourself all the time, you're being subjugated by other people's opinions — and your ability to speak freely is a measure of how free you really are.

Stéphanie WalterMore Front-end Bloggersread at source

Pixels of the Week – September 6, 2026

This week we cover accessibility ownership from design to development and why enterprise UX patterns matter for AI and power users. Also, an interesting IKEA complexity index, tech ad archive, whimsical cat art, and a nine-tailed fox book.

Jens Oliver MeiertTop Front-end Bloggersread at source

Stop Linking Terrorism With Religion

An atheist’s perspective on a war on Islam that’s being fed by Islamophobic rhetoric.

HTML All The ThingsPodcastsAudioListen

Does AGI Actually Matter to You?

GPT-6 Astra is here, bringing another huge jump in AI capabilities - and once again raising the question: are we approaching AGI? But defining artificial general intelligence gets messy fast. If AGI means matching or exceeding humans across virtually any cognitive task, how do…

remy sharp's b:logTop Front-end Bloggers1 min read

I Who Have Never Known Men [book]

Bleak. Engaging. Thought provoking. Sad. This was recommended as something like if you enjoy Silo (the Wool trilogy - which I own, but hadn't read - but have watched the TV series). I'm going to say this up front: it's only like Silo in respect to being in a deep hole and not really knowing why. The story is written first hand from our unnamed protagonist as her last mark in the world. A world, which she's the last person left. Initially I found the style off putting, because it's a non-stop run of sentences. No chapters. No breaks. Just stream of consciousness. However, as I got to know the character, it felt natural and sort of ended up working. The title also did accidentally draw me into the assumption that not knowing men is core to the story, but really it's not. I certainly comes up, but it's not the core tenant. It's one of the last quotes in the books that stood out to me the most: Perhaps you never have time when you are alone? You only acquire it by watching it go by in others There's a lot of what is it like to exist alone, whilst also giving the main character a reason to think this way - she's different from the other women she grew up with because unlike the others, she doesn't remember the world before they were caged. Overall, it's pretty bleak. It's not so bleak that it could happen in our reality (whereas I could see how The Handmaid's Tale could), and the aloneness really does punch through. I don't do half stars, but this does sit between three and four. A solid dystopian read.

Swizec TellerMore Front-end Bloggersread at source

What B2B SaaS taught me about having kids

I've been a dad for 3 months now so obviously I have it all figured out and there's nothing new to learn. My theories are rock solid and definitely apply to everyone.

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

Celebrating one billion Gemma downloads

David BushellMore Front-end Bloggers2 min read

Abattoirs of taste

I keep hearing this damned word pop up and it’s starting to annoy me. It’s fast-tracking its way to becoming the free space on buzzword bingo for magic 8 ball enjoyers. That word is “taste”. I’ll try to define “taste” in the context that prompt engineers — or whatever they’re calling themselves […]

Speckyboy Design MagazineDeveloper/Designer News10 min read

25+ Best Free DaVinci Resolve Templates in 2026

Save time on video editing with these free DaVinci Resolve templates. Includes ready-to-use designs for intros, titles, transitions, and more. The post 25+ Best Free DaVinci Resolve Templates in 2026 appeared first on Speckyboy Design Magazine .

David BushellMore Front-end Bloggers2 min read

Plagiarism ain’t cool bro :(

It’s not every day I read an email subject that makes my heart sink, only to find myself laughing out loud. Today I was told someone plagiarised my website! The snitch lol informant wishes to remain anonymous (they’ve obviously read my blog!) I wasn’t sure how to deal with this situation. […]

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Why Your Web Scraper Gets Blocked (And How to Fix It)

Speckyboy Design MagazineDeveloper/Designer News5 min read

20+ Best Free Lightroom Mobile Presets for Photographers

A stunning collection of free presets for Lightroom Mobile that will allow you to improve your mobile photos with just a few clicks. The post 20+ Best Free Lightroom Mobile Presets for Photographers appeared first on Speckyboy Design Magazine .

Lea Verou’s blogTop Front-end Bloggers19 min read

The best dark mode toggle is probably none

About a month ago, I wrote an article recommending that if you are going to have an always visible control for switching between light and dark mode, it should be a two-state toggle that alternates between system and whatever the current opposite of system is , not a tri-state…

SpeedCurve BlogCompany/Startup Blogsread at source

September synthetic test agent updates: Chrome, Firefox and Lighthouse

This month, we've updated our synthetic testing agents. In addition to upgrading the underlying VMs, we've updated browser and Lighthouse versions: Chrome 148 (previously 138) Firefox 153 (previously 135) Lighthouse 13.4.1 (previously 12.8.0) What has changed? We understand the sensitivity related to changes in your performance data. Synthetic updates can cause baseline changes due to hardware changes, browser optimization or in the case of Lighthouse, changes to the methodology. Although the browsers introduced many new features between the updates there are only a few that will may have a noticeable impact on test results: Chrome Lazy-loading for video was introduced in Chrome 148 and pages that make use of this attribute will download less videos and their total size will be smaller too. Chrome 146 fixed an LCP bug which sometimes measures an image that wasn’t yet painted as LCP. Firefox Improvements to Firefox’s HTTP/3 implementation and the introduction of support for Compression Dictionaries which can result in smaller HTML, CSS & JavaScript downloads for sites that support them. The Scheduler API allows finer grained control of JS execution through features such as scheduler.yield Lighthouse Lighthouse introduced Insights and the data these generate is available for every synthetic test. AWS Instance Change AWS was running out of capacity in some regions so the EC2 instance the synthetic agents use has changed from c5.large to c6a.large. To retain comparable performance with the previous agent the CPU is throttled in all desktop tests. The instance size change has had an impact on some metrics, and during extensive testing, we've observed that Total Blocking Time (TBT) improved due to this change. Impact on metrics To provide a baseline when upgrading browsers, Lighthouse, or other components of our agents, we regularly measure the speed of more than 200 sites in both our production and canary environments. During this upgrade, we've found that most metrics have remained consistent between the new and existing versions of the agent, but that Total Blocking Time (TBT) has improved significantly. Across the corpus of sites we're testing, we've observed that Total Blocking Time (TBT) has improved by approximately 12% at the 75th percentile for the Mobile Medium profile. Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) have remained largely unchanged. What should you do next? Our observations on how the upgrade affects metrics are based on the sites in our test corpus, and every site is different. While Total Blocking Time might be the only expected change, there is always a chance your metrics will change based on the optimizations discussed above. Over the next few weeks, we recommend reviewing your performance budgets and checking that they are still appropriate for your site and then adjusting them if necessary. This is a practice we recommend doing on a regular basis as part of a 'get fast, stay fast' methodology , which you can learn more about in our Web Performance Guide to Performance Budgets . Private agents For customers who host their own private SpeedCurve agents : We're planning to release an updated version of the Docker container in the next few weeks. If you have any questions about the upgrade, its impact on your metrics, or any questions about SpeedCurve in general, you can reach us at support@speedcurve.com.

Robin WieruchMore Front-end Bloggersread at source

Your AI Output Is Someone Else's Input

AI made producing work nearly free, so the job is absorbing complexity before handing work to someone else, with examples from tickets, PRs, and slide decks.

WebAIM BlogBrowsers, engines, etc.4 min read

If you have to ask, is it accessible?

As one of the researchers identifying products and tools for inclusion in the NCADEMI EdTech Accessibility Directory, VPATs have been on my mind. Most of the product vendors in the directory that do have VPATs do not provide them publicly, but instead require a potential customer to request the VPAT. This really surprised me, and […]

CSS-TricksThe Giantsread at source

Let’s Use the Emergent CSS random() Function in all the Browsers

The journey to create a polyfill for the upcoming CSS random() function that works in all browsers. Let’s Use the Emergent CSS random() Function in all the Browsers originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

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.

Jake Archibald's blogTop Front-end Bloggers4 min read

Controlling when CSS custom property values are computed

The default might not be what you expect, and it has a big impact on your styles.

Mozilla HacksBrowsers, engines, etc.3 min read

Intent to Ship: JPEG XL

It isn’t often that new image formats land in browsers. In the early 2000s we had JPEG, GIF, and PNG. The 2010s gave us WebP, which was a modest step up from JPEG. But the 2020s have given us two new image formats that are a big step up from previous formats: AVIF and JPEG […] The post Intent to Ship: JPEG XL appeared first on Mozilla Hacks - the Web developer blog .

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…

Kilian ValkhofMore Front-end Bloggers3 min read

My take on a link to a random post with only HTML/CSS

Chris Coyier recently posted about creating a “random post” link on a site that would link to a different URL using only HTML/CSS: A Button That Links to a Random Post in HTML & CSS Only . Here’s my take on that. I saw that article and it reminded me of one of the random() […] The post My take on a link to a random post with only HTML/CSS first appeared on Kilian Valkhof .

Adblock Plus BlogBrowsers, engines, etc.5 min read

How to check any browser extension in two minutes: the prompts to run before you trust it

A trustworthy browser extension can turn dangerous months after you install it, without a new version or an update prompt. The Great Suspender, Nano Adblocker and Nano Defender, and a 2023 cluster with 75 million installs all followed the same pattern: sold or exploited through a remote server that could change what the extension does at any time. This post gives you three prompts to run in any AI assistant that catch the pattern before it catches you.

Treehouse BlogMulti Author Blogsread at source

JavaScript vs. TypeScript: What’s the Difference?

Unlike the Java-vs-JavaScript mix-up (two totally unrelated languages that just happen to share a name), JavaScript and TypeScript really are related — closely. TypeScript isn’t a competitor to JavaScript. It’s built directly on top of it. That relationship is exactly... The post JavaScript vs. TypeScript: What’s the Difference? appeared first on Treehouse Blog .

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

LogRocket BlogCompany/Startup Blogs15 min read

Tailwind CSS vs. StyleX: A real migration with 20 components

I migrated 20 production-style components from Tailwind to StyleX. Here's what the data showed about LOC, CSS bundle size, build time, and type safety. The post Tailwind CSS vs. StyleX: A real migration with 20 components appeared first on LogRocket Blog .

keyframersYouTube ChannelsVideoWatch on YouTube

CodePen 2.0 + @keyframers = The Biggest Launch In History???

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.

Ethan MarcotteTop Front-end Bloggers10 min read

Folded between the pages.

Some statements about “AI”, and about putting down what you mean.

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.

A List ApartMulti Author Blogsread at source

Designed for a Dead Language

Every language app in your pocket inherited a teaching method built for Latin. Understanding why that happened is a more useful design lesson than anything the apps themselves will teach you. In 1788, Prussia introduced the Abitur, a standardized national examination required for entry into universities and the civil service. To pass it, students needed to demonstrate measurable, gradable knowledge. The system needed to teach language to large classrooms, produce consistent outcomes, and do it with one teacher and thirty students. The educators responsible for designing this system reached for the only teaching template they had, one that had been used in European schools for two centuries: the method developed to teach Latin. Latin, by 1788, was a dead language. Nobody needed to speak it. The scholars who studied it were reading Cicero and Virgil, not conducting conversations. The method built around it, memorizing grammar rules, constructing translations, analyzing written texts, reflected that reality exactly. Oral skills were irrelevant. Comprehension of written form was everything. The method was not designed to produce speakers. It was designed to produce readers of texts in a language nobody spoke. When Prussia applied this template to French and German, living languages spoken by living people, the premise did not change. Johann Valentin Meidinger's textbook Praktische Französische Grammatik , published in 1804, ran to 37 editions across Europe by 1857. Karl Plotz formalized the approach into what became the dominant model for teaching modern languages across Europe and eventually the United States, where it became known simply as the Prussian Method [1]. Each institution that adopted it trained teachers in it, who trained students who became teachers. The constraint that created the method, how do you grade language at scale with limited resources, became invisible inside the method itself. What remained was the assumption: language is a body of rules to be learned consciously and measured. It was a design decision dressed up, over time, as a pedagogical truth. The observation that should have ended it There are people in the world who cannot read or write a language and speak it fluently. There are children who hold full conversations years before they can read a single word. There are immigrants who arrive in a country knowing nothing of its language and come out, years later, speaking it naturally, not because they studied it, but because they lived inside it. Literacy and fluency are separate things produced by entirely separate mechanisms. The Grammar-Translation method, as it became known, assumed they were the same thing. That assumption was inherited from a method designed for a language nobody needed to speak, and it was wrong the moment it was applied to a language people actually used. The evidence against it accumulated slowly. In the mid to late nineteenth century, reformers including François Gouin in France and Maximilian Berlitz in the United States argued independently that language should be taught the way it is actually acquired, through immersive exposure to real communication in the target language, not through analysis of its rules. Berlitz built an entire school network around this principle. The reformers were correct. They were also largely ignored by mainstream education systems, because the Grammar-Translation method had one decisive advantage that direct immersion did not: it could be graded. In 1982, the linguist Stephen Krashen gave the argument its most formal articulation in what he called the Monitor Model of second language acquisition. His distinction was precise: language acquisition, the unconscious process through which children absorb their native language and through which adults succeed in immersive environments, is categorically different from language learning, the conscious study of grammar rules and vocabulary that classrooms deliver [2]. Acquisition produces fluency. Learning, at best, produces the ability to pass a test. The evidence supporting this distinction, and the observation that immersive exposure to real native-speaker communication is the mechanism that produces genuine fluency, has only grown since. I went to Brazil without a word of Portuguese and came out speaking it. I studied French in a classroom for years and cannot hold a conversation in French today. This is not an unusual experience. It is the expected outcome, and it has been the expected outcome for as long as we have had formal language education. The same decision, made again in a different medium Prussian educators faced the question: How do you deliver language learning at scale, measure progress, and retain users over time? The answer it arrived at was structurally identical to the one arrived at in 1788. Duolingo gamified the grammar drill into a streak. Anki formalized the translation exercise into a spaced-repetition flashcard. Babbel organized grammar lessons into structured modules. The interfaces were new. The underlying assumption, that language is a thing you study rather than an environment you inhabit, was not. This was not a failure of design skill. The products that emerged from these decisions are, in many respects, genuinely well-crafted. Duolingo's retention mechanics are sophisticated. Anki's spaced repetition is grounded in real cognitive science. They are excellent at what they actually do. The problem is what they actually do: produce measurable engagement with a proxy for language rather than the conditions that produce language itself. A streak is measurable. A vocabulary score is measurable. The moment a user walks out of an app and holds a real conversation in another language, that happens in the world, outside the product, and cannot be instrumented. When the outcome a user needs is difficult to measure directly, the design process tends to reach for something that can be measured. The proxy becomes the goal. The interface optimizes for it. The gap between what the product delivers and what the user actually needed grows. This is not a pattern unique to language learning. It is a pattern that repeats across product categories whenever a design constraint—the need to measure, the need to scale, the need to produce a grade—gets built into a system so deeply that it stops being visible as a constraint and starts being mistaken for a truth about the problem itself. What happens when the constraint changes The constraint that made the Grammar-Translation method necessary in 1788 was real and rational. One teacher. Thirty students. A standardized exam. You cannot grade a conversation at scale. You can grade a translation exercise. The method was not chosen because it produced fluency. It was chosen because it produced a score. That constraint no longer exists in the same form. Technology has made it possible to deliver immersive, real-time conversation practice to anyone with a smartphone, at a cost that continues to fall. The design problem is no longer how to make language learning gradable at scale. It is how to make the conditions of genuine language acquisition accessible to people who cannot move to another country or afford a native-speaker tutor. The products that are now closest to solving the actual problem are not the ones that invented a new pedagogy. They are the ones that removed the access barrier to an old one. Praktika builds AI conversation partners with distinct personalities, regional dialects, and cultural context, replicating the specificity of a real native speaker rather than a generic language-learning voice. Langua clones native speaker voices so that the interaction feels like a real conversation rather than a lesson. Rosetta Stone's foundational methodology, image association in the target language with no translation, was built on the same insight Berlitz arrived at in the nineteenth century: language is acquired through immersive exposure, not through analysis of its rules [3]. A 2025 meta-analysis of 31 studies found that AI conversation tools produced a statistically significant improvement in language learning outcomes, a result that no amount of flashcard optimization has consistently matched [4]. None of these products invented a new theory of language acquisition. They translated an existing one into something more people could reach. The design question this leaves The Grammar-Translation method persisted not because educators were wrong about design, but because a design decision made under a specific constraint became, over two centuries, indistinguishable from the thing itself. The constraint, how do you grade language at scale, was forgotten. The method it produced was inherited as if it were a description of how language works, passed from Prussia to Europe to America to the App Store, from the grammar drill to the streak. Every time a design team optimizes for a metric because the actual outcome is hard to measure, they are making a version of the same decision. It is often the right decision given real constraints. The question worth asking is whether the constraint that made it necessary still exists, or whether it has simply become invisible inside the system it originally produced. Before reaching for what can be measured, it is worth asking what the user actually needs to do, and what stopped them from doing it before. Sometimes the answer is a new solution. More often it is an old one that was always out of reach.

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…

ECMAScript DailyLibraries, Frameworks, etc.read at source

Normative: Add `using` and `await using` Declarations, SuppressedError, DisposableStack, and AsyncDisposableStack by rbuckton · Pull Request #3000 · tc39/ecma262

Explicit Resource Management ( using / await using declarations, SuppressedError , DisposableStack , AsyncDisposableStack ) has been merged into the ECMAScript specification.

Una Kravets OnlineTop Front-end Bloggersread at source

Modern CSS theming with light-dark(), contrast-color(), and style queries

Combine three new CSS features to build fully adaptive themed components.

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.

Babel BlogLibraries, Frameworks, etc.6 min read

Releasing Babel 8 today: ESM-only, drop ES5 default, and a smooth migration path

Today we are releasing Babel 8. It's been 8 years since we released Babel 7. And that's not without reason.

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.

web.dev BlogMulti Author Blogsread at source

New to the web platform in May

Discover some of the interesting features that have landed in stable and beta web browsers during May 2026.

Axess LabCompany/Startup Blogs1 min read

Webinar: AI and Accessibility – What have we learned so far?

Learn about the potentials and be aware of the pitfalls. Join our upcoming webinar to explore the rapidly evolving intersection of AI and accessibility, from its use as an assistive technology to supporting plain language. We will share our latest findings to help you navigate the real benefits, hidden risks, and common pitfalls of relying […]

Tim KadlecTop Front-end Bloggersread at source

Losing Focus

codeburstMulti Author Blogs7 min read

Sizing your first Elasticsearch cluster: what actually matters

Photo by Hirzul Maulana on Unsplash The million dollar question when setting up your first Elasticsearch cluster: sizing. It feels like it should have an obvious answer. How many nodes? How much storage? What’s the limit? But the reality is more complex. There isn’t one hard…

Eleventy BlogLibraries, Frameworks, etc.1 min read

New Sponsorship Tiers for the Build Awesome Kickstarter

We’ve added a bit more information about the new sponsorship tiers for the Build Awesome Kickstarter . Your company uses Eleventy currently or wants to support the Build Awesome platform moving forward. You’re interested in getting your brand icon in the Font Awesome Icon…

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.

30 seconds of codeMulti Author Blogsread at source

Cherry-pick an unreachable GitHub commit

Have you ever needed to cherry pick a GitHub commit that does not belong to any branch on this repository? Here's an easy way to do it.

Chromium BlogBrowsers, engines, etc.6 min read

JetStream 3: A modern benchmark for high-performance, compute-intensive Web applications

We’re incredibly excited to announce the release of JetStream 3, built in close collaboration with Apple, Mozilla, and other partners in the web ecosystem! While we’ve covered the high-level details of this release in our shared announcement blog post , we wanted to take a…

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

Web Performance CalendarMulti Author Blogs8 min read

The Curious Case of the Shallow Session SPAs

Buried at the end of this year’s installment of my semi-annual series on network and device reality is a mystery: multiple, independent data sets from the Web Performance community indicate sites built as Single-Page Applications (“SPAs”) receive, on average, only one (1) “soft navigation” for every “hard” page load. The RUM Archive and Michal Mocny’s […]

Samuel KraftMore Front-end Bloggersread at source

Using SF Pro Rounded with React Native

How to use San Francisco Pro Rounded with React Native

The CSS PodcastPodcastsAudioListen

100: Season 6 wrap up

Una and Bramus recap the season! They share some new updates and re-visit some of their favorite tips and tricks.Season 6 covered inline if() statements and custom functions, scroll state queries, carousel APIs, view transitions updates, anchor positioning, command invokers and…

David Walsh BlogTop Front-end Bloggers1 min read

JavaScript SpeechSynthesis API

As the web continues to be the medium for all users, standards bodies need to continue to provide new APIs to enrich user experience and accessibility. One underused API for unsighted users is speechSynthesis, an API to programmatically direct the browser to audibly speak any arbitrary string. The Code You can direct the browser to […] The post JavaScript SpeechSynthesis API appeared first on David Walsh Blog .

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…

Fun Fun FunctionYouTube ChannelsVideoWatch on YouTube

saturday night lazyvim fauxrora chill

JSConfYouTube ChannelsVideoWatch on YouTube

🚀 JSConf México 2025: Live Stream Day 2 - Stage B

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).

Ryan MulliganMore Front-end Bloggers4 min read

Transition to the Other Side with Container Query Units

Managing the position of an element as it travels across the length of its parent container can be tricky. Assuming they both have dynamic, responsive dimensions, we might rely on JS to check the width and/or height of each element and do some calculations for a proper end…