Everything

DEV CommunityThe Giantsread at source

Service area map with ZIP code checker in React

The client request I hear most often on home services sites is some version of "can the map show all the areas we serve?" The first few times I answered it with an embedded Google Map and a list of suburbs. It looked like every other contractor site and it did not answer the visitor's real question, which is not "where are you" but "will you come to me." The Service area block in Facade is the version I settled on after building this section for HVAC companies, plumbers and cleaning services. Here is how it is put together. Zones as data, not as pixels The first decision is to treat service zones as data. Each zone is an object with an id, a display name, a shape, a label anchor, the cities inside it and the ZIP codes it covers. The map, the zone list and the ZIP checker all read from the same array, so adding a zone means adding one object, not editing three places. import type { ServiceZone } from "@/components/facade/service-area" ; const zones : ServiceZone [ ] = [ { id : "north" , name : "North Austin" , path : "M150 40 L238 30 L262 70 L232 108 L170 120 L136 84 Z" , labelX : 198 , labelY : 76 , cities : [ "Allandale" , "Crestview" , "Domain" , "North Burnet" ] , zips : [ "78757" , "78758" , "78759" , "78727" ] , eta : "Same day" , } , { id : "central" , name : "Central Austin" , path : "M156 172 L190 214 L248 200 L270 252 L214 296 L140 284 L118 228 Z" , labelX : 190 , labelY : 250 , cities : [ "Zilker" , "Travis Heights" , "Bouldin Creek" , "Circle C" ] , zips : [ "78704" , "78745" , "78748" , "78749" ] , eta : "Same day" , } , ] ; The eta field is optional and it is the field that does the selling. "Same day" next to a zone name tells a visitor with a broken furnace more than any paragraph. For zones further out, "Next day" is honest and still useful. A stylized SVG map instead of Google Maps The shapes are SVG paths in a fixed 400 by 320 viewBox. That sounds like a step backward from a real map, so let me explain why I prefer it on a marketing page. A Google Maps embed loads a third party script, a tile set and its own fonts. On a mobile connection that is a noticeable hit to Largest Contentful Paint, and Google's own Core Web Vitals guidance treats 2.5 seconds as the threshold for a good LCP. An inline SVG with six polygons costs nothing. It also inherits your theme: the zones use currentColor and the brand token, so the map looks like your site in light and dark mode instead of a gray rectangle with a red pin. The other reason is honesty. Real service areas are not perfect circles around a shop. They follow highways, rivers and county lines, and a hand drawn polygon communicates "we know this town" better than a radius overlay. The decorative river line in the Facade block has a legend label you can rename or hide with riverLabel="" . Drawing the paths is a one time task. I open the real service area in a map tool, sketch the polygons on a 400 by 320 grid and copy the coordinates. Half an hour per client, and the result is a map that never changes under you when a map provider updates its styles. Keyboard and screen reader behavior Each zone is focusable. Arrow keys move between zones, Enter or Space selects one, and the zone list on the side expands to show its cities and ZIP codes. The SVG itself is a role="group" with a label, so a screen reader user hears "Service area map" and can tab into the list instead of being handed a pile of path elements. The ZIP code checker The checker is a small form under the map. The input accepts digits only and stops at five; the onChange handler strips everything else, so pasting "78704-1234" leaves "78704". On submit, the component validates against ^\d{5}$ and then runs a lookup: const zone = zones . find ( ( z ) => z . zips . includes ( zip ) ) ?? null ; That is the whole algorithm. No geocoding, no API key, no rate limits. The trade off is that you have to maintain the ZIP list, which for a local business is a list of twenty to sixty codes they already know by heart. The result messages are functions, so you can write them in the client's voice: import { ServiceArea } from "@/components/facade/service-area" ; ServiceArea eyebrow = "Service area" heading = "Heating and cooling across greater Austin" description = "Two hour arrival windows in every zone. Enter your ZIP to confirm." zones = { zones } hqLabel = "Dispatch on Burnet Rd" hqX = { 200 } hqY = { 160 } checkerLabel = "Do we serve your address?" checkerPlaceholder = "5 digit ZIP" successMessage = { ( zip , zone ) => `Yes. ${zone.name} gets ${zone.eta?.toLowerCase() ?? "fast"} service.` } failureMessage = { ( zip ) => `${zip} is outside our area for now.` } ctaLabel = "Schedule a visit" ctaHref = "/book" waitlistLabel = "Tell us when you expand" waitlistHref = "/waitlist" /> A successful check also selects the matching zone on the map, so the visitor sees their neighborhood light up at the same moment they read the answer. The animated result state Three states need motion here, and each one is small. An invalid entry, say four digits, shakes the input. The block increments a counter on each failed submit and keys the shake animation off it, which means the shake replays on every attempt instead of only the first. A match renders a success card with the zone name, the ETA and a CTA button. A miss renders a card with the failure message and a waitlist link, because a "no" with a next step keeps the lead instead of losing it. Both cards animate in through AnimatePresence with mode="wait" , so switching from a yes to a no does not stack two cards for a frame. All of it respects prefers-reduced-motion . The block reads useReducedMotion() and skips the shake and the entrance transforms for visitors who asked for less movement. Linking zones to city pages The service area is also an internal linking tool. Most home services sites have a page per city or suburb for local search. Add an href to your own data shape, or use the zone id to build the link, and render the city list as links in the panel next to the map. A visitor who finds their zone can jump straight to "AC repair in Round Rock," which is the page you want ranking for that query. I keep the zone array in a single lib/service-area.ts file and import it into the map block, the footer's service list and the city pages' generateStaticParams . One file, three consumers, no drift. Installing it The Service area is a Pro block. It installs from the private registry once your license key is in components.json , which is a one time step covered in the installation docs . npx shadcn@latest add @facadeui/service-area The file lands in components/facade/service-area.tsx and the only dependencies are motion and lucide-react . On an HVAC site I put it fourth, right after the process steps and before the reviews, because by then the visitor knows what the company does and wants to know whether it applies to them. FAQ Can I use real geographic shapes instead of hand drawn polygons? Yes. Export county or ZIP boundaries from a GIS source as SVG paths, scale them into the 400 by 320 viewBox and paste the path strings into the zone objects. The component does not care where the path came from. What about addresses, not ZIP codes? ZIP codes are deliberate. An address lookup needs a geocoding API, which adds a key, a cost and a privacy notice. Five digits are enough to answer "do you come to me" and most people know their ZIP without looking it up. How many zones work before the map gets crowded? Four to eight. Beyond that, labels start overlapping in the fixed viewBox. If a client covers a whole metro region, group suburbs into larger zones and list the individual cities in the panel instead of drawing each one. Originally published at https://facadeui.com/blog/service-area-map-react?utm_source=devto&utm_medium=social&utm_campaign=art-service-area-map-react

DEV CommunityThe Giantsread at source

PostgreSQL 19 Ships on 19 November and PostgreSQL 14 Leaves Support

TL;DR PostgreSQL is an open-source relational database that teams install on their own servers, and the project supports each major version for five years before a final minor release ends the branch. The PostgreSQL project's RC 1 announcement, published on 15 October, schedules PostgreSQL 19 general availability for 19 November 2026. A second candidate, PostgreSQL 19 RC 2, arrives on 12 November, the same day as the quarterly update release for supported versions. PostgreSQL 14 leaves support on that same 12 November with version 14.24, so a cluster on 14 stops receiving fixes that day. PostgreSQL 19 brings REPACK, a single command that replaces VACUUM FULL and CLUSTER, and REPACK (CONCURRENTLY) rebuilds a table without an access-exclusive lock. The same release adds pg_plan_advice and pg_stash_advice for planner decisions, logical replication of sequence values, a start for logical replication without a restart, and a WAIT command that lets a standby wait on a log position. Defaults change under an upgraded cluster: JIT ships disabled, max_locks_per_transaction moves to 128, standard_conforming_strings is always on, RADIUS authentication is gone, and inet and cidr indexes move to GiST. The path off version 14 runs through pg_upgrade or a dump and restore, and pg_upgrade refuses clusters that carry btree_gist indexes on inet or cidr. The planning point: the version a team runs is a support date, and the date sits on the project's published calendar. This release-notes briefing draws its dates from two PostgreSQL project documents and focuses on clearing PostgreSQL 19's documented incompatibilities before version 14 support ends. The 19 release notes carry an overview that names each headline feature, and the 19 RC 1 announcement sets the schedule plainly: RC 2 on 12 November 2026, general availability on 19 November 2026. Netics visual, 11 November 2026: what a minor release is and what installing one actually involves. The project supports each major version for five years The versioning policy gives a major version five years of bug and security fixes counted from its first release, and the last of those arrives as a final minor release. After that the branch sits unsupported. Minor releases land at least once every three months, targeted at the second Thursday of February, May, August and November. That calendar is the practical part. A team planning a migration can read the final-release column and see the wall before it arrives, which is a rare luxury in infrastructure planning. The project's own support table, read on 11 November 2026: version 14 lists 12 November 2026 in the final-release column, version 18 lists November 2030. Page from https://www.postgresql.org/support/versioning/ . PostgreSQL 14 leaves support on 12 November Version 14 first shipped on 30 September 2021, and the support table lists 14.24 as its current minor release with a final release date of 12 November 2026. After that final minor release, version 14 becomes unsupported. The release notes provide an inventory of incompatibilities. An operational decision also needs an inventory of the extensions and drivers used by the application. Rehearse the chosen migration route on a production-like copy and run the critical queries. Verify backups, the rollback procedure and the maintenance-window duration before approving the migration. The announcement as published on 15 October 2026, naming RC 2 on 12 November and general availability on 19 November. Page from https://www.postgresql.org/about/news/postgresql-19-rc-1-released-3409/ . PostgreSQL 19 arrives on 19 November with REPACK The release notes describe REPACK as the command that replaces VACUUM FULL and CLUSTER. The old commands remain for compatibility. REPACK (CONCURRENTLY) adds the version most operators want: rebuilding a table without taking an access-exclusive lock on it. Planner control arrives as two extensions. pg_plan_advice stabilizes and controls planner decisions, and pg_stash_advice applies stored advice automatically based on a query. Autovacuum also gains parallel index processing and a scoring system that orders which tables it should reach first, on top of I/O worker processes that scale through io_min_workers and io_max_workers. The overview section of the release notes, where the feature list and the migration requirements sit at the top of the page. Page from https://www.postgresql.org/docs/release/19.0/ . Replication gets the two changes that matter most on a busy cluster. Logical replication can be switched on with wal_level set to replica without restarting the server, and sequence values now replicate. A WAIT command lets a standby wait until a log position has been written, flushed or replayed. Defaults change under an upgraded cluster Five defaults shift under the cluster a team restores into 19: JIT is disabled by default, because the optimizer cost that used to trigger it proved unreliable. Sites running large analytical queries need to enable it deliberately. max_locks_per_transaction moves from 64 to 128, and the release notes say the lock size allocation changed so settings must double to hold their previous capacity. standard_conforming_strings is forced on in the server. A dump taken with a pre-19 pg_dump while the setting was off will not load into 19. RADIUS authentication is removed, on the grounds that support existed only over UDP and that transport is unfixably insecure. inet and cidr indexes default to GiST, and pg_upgrade refuses clusters carrying btree_gist opclasses on those types because the old opclasses could exclude rows that belong in the result. Netics visual, 11 November 2026: the setting-level differences between a 14 cluster and a 19 cluster, drawn from the release notes. pg_upgrade decides the path off version 14 The release notes accept three migration routes: a dump and restore with pg_dumpall, pg_upgrade, or logical replication. For planning purposes, treat pg_upgrade as a route that needs an explicit preflight check. Two pg_upgrade refusal conditions are worth checking before a maintenance window: clusters with btree_gist indexes on inet or cidr, and clusters that use carriage returns or line feeds in database, role or tablespace names. Separately, dumps produced by pre-19 tools while standard_conforming_strings was off will not properly load into PostgreSQL 19. Each is a configuration fact that can be found in advance, and each one turns a migration into a debugging session when it surfaces mid-run. There is also a spare SQL. MULE_INTERNAL encoding is gone, so a database that uses it needs a dump and restore into a different encoding. The mark the PostgreSQL project publishes for press use. Image from https://www.postgresql.org/media/img/about/press/elephant.png . Application compatibility deserves priority during upgrade planning, including dependencies introduced through custom web and mobile development . The five-year calendar supplies a deadline; migration safety depends on testing the chosen route and clearing PostgreSQL 19's documented incompatibilities and pg_upgrade refusals before the maintenance window. Originally published on the Netics blog .

DEV CommunityThe Giantsread at source

I Built a Tiny Tool to Fix My Own RMD Confusion

Every year, around December, I find myself staring at a spreadsheet trying to figure out how much money I need to pull out of my retirement accounts to avoid an IRS penalty. It’s a ritual that feels unnecessarily complex for something that should be straightforward: look up your age, find the divisor, divide your balance. That’s it. But finding the right table for the current year is surprisingly annoying. Search results are cluttered with outdated PDFs, confusing UI from major financial institutions, and ads for investment services I don’t need. I just wanted a clean, fast way to calculate my Required Minimum Distribution (RMD) using the official IRS Uniform Lifetime Table. So, I built a small tool called RMD Table. It’s not a platform. It’s not an app with a login system. It’s a single-page utility that does one thing well: calculates your RMD based on the latest regulation. The Problem with Existing Tools Most financial calculators are bloated. They ask for your entire financial history, your risk tolerance, and your email address before showing you a number. For a simple division problem, this feels like overkill. I wanted something that loads instantly. No JavaScript frameworks if possible, no heavy CSS frameworks, and no tracking scripts. Just HTML, CSS, and a tiny bit of vanilla JS. The goal was to make the tool feel invisible. You come in, you see your number, you leave. When I started building, I looked at a few existing options. Some were great but required an account. Others were simple but used outdated tables from previous years. The IRS updates the Uniform Lifetime Table occasionally, and ensuring the tool always reflects the current regulation is key. I wanted to avoid the common pitfall of hardcoding values that might become stale. How It Works The logic is surprisingly simple. The tool takes two inputs: your age and your December 31 account balance. It then looks up the corresponding divisor from the IRS Uniform Lifetime Table for the current year. For example, if you are 72 years old, the divisor might be 25.6. If your balance is $100,000, your RMD is $100,000 / 25.6 = $3,906.25. The challenge wasn’t the math; it was the UX. I wanted the interface to be responsive and accessible without sacrificing speed. I used CSS Grid for layout because it’s lightweight and handles different screen sizes gracefully. The font stack uses system fonts to avoid loading external resources. This keeps the First Contentful Paint under 1 second on most devices. I also added a small feature that many tools miss: context. Many calculators just spit out a number. But the IRS rules can be tricky. Did you know your first RMD has a different deadline than subsequent ones? Did you know if you miss the deadline, the penalty is 25% of the shortfall? I included brief, clear notes below the result to explain these nuances without overwhelming the user. Why Build Something So Small? In an era of mega-apps and complex SPAs, building a single-purpose tool feels refreshing. It forces you to prioritize clarity. Every element on the screen has to earn its place. There’s no room for decoration. I used a minimal CSS reset and kept the JavaScript under 5KB. No libraries. No build steps. Just a plain HTML file served statically. This makes it incredibly fast to deploy and easy to maintain. If the IRS updates the table next year, I just edit a JSON object in the script. Done. The tool is now live at rmdtable.com . It’s simple, fast, and does exactly what it says on the tin. I’m using it myself every December, and it saves me about five minutes of searching and comparing different websites. What’s Next? Right now, the tool only supports the Uniform Lifetime Table. There are other tables for beneficiaries and married couples with younger spouses, but those are edge cases. I’ll add them if enough people ask. For now, I’m focused on keeping it lean. No analytics beyond basic page views. No pop-ups. Just a clean calculation. If you’ve ever struggled with RMD calculations, I’d love to hear your feedback. What’s the most confusing part of the process for you? Is it finding the right table, understanding the penalties, or something else entirely?

DEV CommunityThe Giantsread at source

Copilot code review never sets a blocking state. I checked 55 merged PRs.

PR 337469 in microsoft/vscode got two Copilot reviews 52 minutes apart, on the same commit (352dd22d). The first said "Needs a closer look" and described four unresolved moderate issues. The second said three issues remained. Both bodies ended with the same structured line: Findings: None . So on one unchanged diff, the summary text changed, the issue count changed, and the structured findings field reported nothing either time. I went looking for how common that is, and the answer is that the verdict is not part of the review's state at all. A review object has a state, and Copilot's is always COMMENTED GitHub's REST docs for pull request reviews describe a review as comments "grouped together with a state and optional body comment". That state field is what branch protection reads. Copilot code review writes COMMENTED . I sampled merged PRs from microsoft/vscode in two slices of 30 ( state=closed&sort=created&direction=desc ), filtered to merged_at != null , then pulled every review object per PR and filtered to user.login == copilot-pull-request-reviewer[bot] . 28 PRs in the first slice and 27 in the second had a Copilot review. Every review object across all 55 was state COMMENTED . Zero APPROVED , zero CHANGES_REQUESTED . That matters because of what reacts to state. GitHub's protected branch docs describe the merge failure you get when a review sits in a blocking state ( GH006: Protected branch update failed... Changes have been requested ), and the optional setting that dismisses stale approvals when the diff changes after approval. Neither path touches a COMMENTED review. A review that is never blocking cannot block, and it cannot go stale either, because there was never an approval to invalidate. The heading is UI text. GitHub's code review concept docs say Copilot's reviews do not count toward required approvals by default, and that enabling Copilot approvals is a separate repository, organization, and enterprise setting. When that setting is on, a new push dismisses the approval. When it is off, the "Approval recommended" you are reading satisfies nothing. Half the merged PRs carried a "Changes recommended" at merge time Final Copilot review per PR, first slice, 28 merged PRs: 16 Approval recommended 9 Changes recommended 3 Needs a closer look 12 of those 28 merged with a non-approval verdict standing. The older slice (n=27) came out 14 Changes recommended, 12 Approval recommended, 1 Needs a closer look, with 15 merging on a non-approval verdict. Roughly half in both. None of that is a bug report. A reviewer that informs without gating is a defensible design, and teams treating it as advisory are getting what the product promises. The problem shows up when you turn it into a metric. Count "AI approvals" or "AI blocks" from the review state and you get 0 and 0, on every repo, forever. Count it from the heading text and you are counting a string the product edits on its own schedule. The verdict does not follow the findings list 19 of the 28 final reviews in the first slice reported zero open findings. Three of those still ended with "Needs a closer look". So the heading and the findings list are computed separately, and PR 337469 is the visible case: a summary describing unresolved issues sitting next to a findings field reading None. The second review in that pair is worth reading closely for another reason. It flagged a "previously missed issue" in code that had not changed since the first review. Same commit, same files, one new finding. Requesting a fresh assessment does not buy you a stable one. The verdict is usually rendered against a diff that no longer exists 13 of the 28 final reviews in the first slice, and 15 of 27 in the second, sat on a commit that was not the PR head at merge time. The reviewed commit is exposed as commit_id on the review object, and comparing it to head.sha costs one call. That combination is why the "stale verdict" reading misleads when you attribute it to the reviewer. For human approvals, GitHub records the approved diff state and can dismiss the approval when the diff moves. For a COMMENTED review, nothing is recorded and nothing is refreshed, so an off-head verdict is the normal end state. Report it as a coverage caveat next to any defect count, since the reviewer never saw the final version of the change. Re-review is rare, and the second review is a delta In an updated-sorted slice of 28 merged PRs, 24 had exactly one Copilot review. Across the two created-sorted slices, 3 of 55 had more than one. The review bodies invite you to request a fresh assessment, and almost nobody does. That matters more after the November 6 changelog , which says that on later reviews of the same PR, findings unrelated to your recent changes are collapsed and then hidden. A second review reports the delta against your last push. It does not re-read the whole change. Run a reviewer twice, diff the bodies, and a drop in findings reads like an improvement when it is a narrower scope. Two reviews, one diff, different output The same-commit pair is the artifact I would put in front of anyone building a quality score. One diff, one commit, two review requests, two different issue counts, one of them inconsistent with its own findings field. That is the failure mode of a flaky test: the instrument changes its answer while the input stays fixed. A single-run score from that instrument is a sample of one. The cheap version of the test costs nothing. Open a PR, request a review, request it again on the same commit, compare the two bodies line by line. If the counts move, no quality number you compute from one run survives a re-run. What to record instead Five fields, one row per review run: The reviewed commit id ( commit_id ) and the PR head sha at the time you read the result. The findings count from the structured part of the body, matched against every shape the body has used, not one string. The effort level in use, because Lite, Balanced and Max are different products. The verdict heading, stored as text, with the date you read it. Whether a second review happened, and what changed between the two. On effort, the concept docs publish estimated AI credit consumption per review at roughly $0.25 average for Lite, $1.50 for Balanced and $10 for Max, with a warning that consumption rises with PR size and repository custom instructions. The November changelog adds that Balanced now uses three reviewer models with another model combining their findings. A quality number with no effort level attached is not comparable to anything. On the counter itself, the body format keeps moving. The November 6 update moved the effort label into a compact footer, merged skipped and excluded files into one "Files not reviewed" section, and added explicit attribution fields to the REST and GraphQL APIs so you can identify Copilot's reviews and comments directly. Key your metrics on those fields. A grep for a heading string is a metric that breaks on a UI release. If you want a gate, buy a gate Advisory review and required review are separate purchases, and the tooling reflects that. CodeRabbit's configuration reference exposes reviews.auto_approvals.enabled (default false) and states that missing, failed, disabled or stale required assessments withhold approval, which gives you a documented condition set to test against your own PRs. Kodus sits at the other end: self-hosted, AGPLv3, bring your own model, with review rules scoped to an organization, a repository or a path, so the scope and the pass conditions live in your config and you can re-run them. Both are testable in the sense that matters here, which is that you can predict from the docs what happens to the verdict when the diff changes. With Copilot's default configuration the answer is nothing, and the docs say so. Before comparing tools, settle file scope first. I wrote about the documented skip list and what it does to a head-to-head . And if you are still building the baseline for review time, the fixed-slice protocol is the shape I would reuse. The number your branch protection sees Copilot code review produces a comment with a verdict in it. Your branch protection reads a review state, and that state was COMMENTED on all 55 merged PRs I sampled. Count the state, treat the heading as UI text, and record the reviewed commit id next to every result you keep. That is the difference between a metric and a screenshot.

DEV CommunityThe Giantsread at source

Codifying scotthavird.com in Terraform

Codifying scotthavird.com in Terraform For years this site lived in two places at once: the Docusaurus repo and a scattering of Cloudflare dashboard clicks. Pages project settings, custom domains, zone security toggles, and an email signup API that only existed in AWS — none of it was reviewable in a PR. That drift is fine until it isn't. I hit the www redirect trap on my own domain. Preview builds failed because Node 18 was still configured in the dashboard while Docusaurus 3.9 requires Node 20. Each fix was another manual change with no audit trail. So I codified the whole stack in iac/ and retired the GitHub Actions deploy workflow in favor of native Cloudflare Pages builds. What Moved Into Terraform The iac/ directory now owns four concerns that used to be split across dashboards: Concern Resource Why codify it Site hosting cloudflare_pages_project Build command, Node version, preview branch rules Zone security null_resource + Cloudflare API SSL strict, HSTS preload, TLS 1.3 Email signup API Gateway + Lambda + DynamoDB + SES Homepage newsletter form DNS for email cloudflare_record (SES verification, DKIM) Deliverability without manual TXT records The Docusaurus site itself stays in the same repo. Cloudflare Pages builds main on every push — no separate deploy workflow. Cloudflare Pages: The Important Details The Pages project resource looks straightforward, but a few fields matter in practice: build_config { build_command = "yarn build" destination_dir = "build" } deployment_configs { production { environment_variables = { NODE_VERSION = "20" SUBSCRIBE_API_URL = aws_apigatewayv2_api . main . api_endpoint } } } Node 20 — Docusaurus 3.9.2 requires it. The dashboard was still on 18, which meant every PR preview failed with yarn: command not found or engine warnings. Setting it in Terraform means preview and production stay aligned. SUBSCRIBE_API_URL — Docusaurus reads this at build time via process.env.SUBSCRIBE_API_URL and exposes it as siteConfig.customFields.apiUrl . The homepage EmailSignup component POSTs to ${apiUrl}/subscribe . Wiring the API Gateway endpoint into the Pages env var means the frontend always targets the right backend without hardcoding URLs. Preview branch excludes — gh-pages is excluded from preview builds. That branch is the old peaceiris deploy output; it has no package.json and will fail every build attempt. One gap: build_image_major_version (v1 → v3) isn't exposed in the Cloudflare provider v4. I set it via a one-time API PATCH and documented the workaround in iac/pages.tf . Provider v5 adds native support — revisit on upgrade. Zone Security Without the Provider Trap The cloudflare_zone_settings_override resource in provider v4 reads all zone settings during refresh, including Enterprise-only fields that return HTTP 999 on Free plans. That makes terraform apply fail even when your target settings are correct. The workaround: a null_resource with local-exec that PATCHes only the settings we care about: SSL mode: strict Always Use HTTPS: on Minimum TLS: 1.2 , TLS 1.3: on HSTS: 2-year max-age , include subdomains, preload-ready The triggers block hashes the target values so any change re-applies. It's not elegant, but it's reliable on a Free-plan zone. Email Subscribe API The homepage newsletter form needs a backend. The stack: API Gateway HTTP API — POST /subscribe , GET /confirm?token=... Lambda — validates email, stores pending token in DynamoDB, sends confirmation via SES DynamoDB — subscribers table + tokens table with TTL for expired confirmations SES — domain-verified sending from scotthavird.com All tagged with Project = scotthavird-com and environment-scoped naming ( scotthavird-prod-* ). The double opt-in flow matters: we don't add addresses to the list until the user clicks the confirmation link. Tokens expire via DynamoDB TTL. What I Deliberately Didn't Codify www → apex redirect — Cloudflare Pages owns the http_request_dynamic_redirect ruleset for custom domains. Zone-level Rulesets API tokens can't override it. The fix is documented in Your Cloudflare Pages Redirect Is Probably Backwards : set the apex as the primary custom domain in Pages, then add a Page Rule for belt-and-suspenders. GitHub Actions deploy — Retired. Cloudflare Pages builds directly from the repo. One less moving part, preview URLs on every PR, and no GITHUB_TOKEN deploy secret to rotate. Operating It cd iac terraform plan -var-file = prod.tfvars terraform apply -var-file = prod.tfvars Prod and dev workspaces share the pattern; DNS records for SES are prod-only ( local.is_prod ) to avoid conflicts. Site-side guardrails run in CI on every PR: yarn ci # lint:posts → update:llms → build → validate:schema Infrastructure changes and content changes can ship in the same PR when needed — but they're reviewed separately because they touch different directories. Lessons Codify the stuff that breaks silently. Redirect direction and Node version don't fail loudly until SEO or previews are already damaged. Build-time env vars for frontend API URLs. Hardcoding API Gateway endpoints in React is a deploy-order nightmare; Pages env vars solve it cleanly. Provider limitations are real. When the Terraform resource can't express what you need, document the out-of-band step and add a trigger or comment so the next person doesn't "fix" it back to broken. Keep the site and the infra in one repo. Docusaurus content and Cloudflare/AWS resources share a lifecycle. One PR can add a feature and the API it needs. Related Posts Your Cloudflare Pages Redirect Is Probably Backwards — The www/apex trap that motivated part of this work Ways of Working at the Speed of Thought — Why reducing deploy friction matters when engineers ship in hours This article was created with the help of AI. Originally published at scotthavird.com . Follow me on X and GitHub .

HTML All The ThingsPodcastsAudioListen

The Problem With Putting All Your Tech in One Basket

Microsoft 365 went down, leaving users struggling to access emails, files, and communication tools. But the bigger question is: are we putting too many eggs in one basket? In this edition of the Web News, Matt and Mike discuss the risks of relying on centralized software…

Hacker News Front PageThe Giantsread at source

Tech Companies Are Trying to Shift the Concept of Privacy (Again)

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

Show HN: Gamma PDF – AI-native PDF reader, self-hosted

Comments

Flavio CopesMore Front-end Bloggersread at source

How to use Fable as the orchestrator and Opus as the executor in Claude Code

Run Claude Code with Fable 5.2 planning and reviewing while Opus 5.5 sub-agents do the work: the setting, the prompt, and what a real job cost me.

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

Show HN: Free Dictionary API – Wiktionary data, no API key required

Comments

SitePointThe Giantsread at source

Logging AI Prompts and Responses in Java Without Leaking Sensitive Data

null Continue reading Logging AI Prompts and Responses in Java Without Leaking Sensitive Data on SitePoint .

SitePointThe Giantsread at source

Your SSL certificates can now last 200 days at most: The real risk isn’t renewal

SSL certificates now last 200 days at most, dropping to 47 by 2029. See why automated renewals still fail quietly and how to monitor certificates before they expire. Continue reading Your SSL certificates can now last 200 days at most: The real risk isn’t renewal on SitePoint .

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

Show HN: EDNA – 100% on-device human sensing so AI can perceive the user

Comments

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

Show HN: Podcast News

Comments

Hacker News Front PageThe Giantsread at source

Monkey Island: all 13 versions side by side

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

Show HN: Back endskills – agent skills for safer auth, data and migration code

Comments

Hacker News Front PageThe Giantsread at source

Nvidia allegedly engineered scarcity by funding AI startups to buy its GPUs

Hacker News Front PageThe Giantsread at source

Ggml v1.0.0

Hacker News Front PageThe Giantsread at source

Elephants found to be increasingly isolated leading to fractured social networks

AbduzeedoMulti Author Blogsread at source

Circuit: Civic Shuttle Brand Identity by The Collected Works

The Collected Works shapes a civic brand identity for electric shuttle service Circuit with Stadt type, transit arrows, and fleet wraps. Fifty cities meant fifty slightly different versions of Circuit...

AbduzeedoMulti Author Blogsread at source

Inside Ardor Retro Computer’s Phosphor CRT UI/UX Design

Viacheslav Sheikin’s UI/UX design for Ardor Retro Computer stages an AI cloud agent on an 8-color phosphor CRT, featured on Minimal Gallery. Pressing Escape skips the ASCII boot sequence. Designed and...

AbduzeedoMulti Author Blogsread at source

Porto Rocha Unveils Almeida & Dale Brand Identity

Porto Rocha builds the Almeida & Dale brand identity on Diakritik AD, a custom typeface, and one strong blue for Brazil's biggest gallery. The blue arrives before anything else. Porto Rocha paints...

SitePointThe Giantsread at source

Best Ecommerce Platforms for Developers: Six Options and the Layers Each Leaves You

null Continue reading Best Ecommerce Platforms for Developers: Six Options and the Layers Each Leaves You on SitePoint .

Flavio CopesMore Front-end Bloggersread at source

How to audit your CLAUDE.md with /doctor prompt-audit

Claude Code's /doctor prompt-audit finds stale facts, contradictions and dated wording in CLAUDE.md, AGENTS.md and your skills. I ran it on this site's repo.

SitePointThe Giantsread at source

Running an AI Agent on a Local LLM: What I Measured on One GPU

null Continue reading Running an AI Agent on a Local LLM: What I Measured on One GPU on SitePoint .

Engineering at MetaCompany/Startup Blogs5 min read

Cuttlefish on Mac: Running Android’s Virtual Device Framework Natively on Apple Silicon

How Meta's Reality Labs brought Cuttlefish and its QEMU backend to macOS and Apple silicon. [...] Read More... The post Cuttlefish on Mac: Running Android’s Virtual Device Framework Natively on Apple Silicon appeared first on Engineering at Meta .

Dave RupertTop Front-end Bloggersread at source

Conventional Commit rules everything around me

There’s a community standard out there called Conventional Commit for structured git-commit messages. If you don’t know about it already, it recommends a strict type(scope?): description format for describing a code change in a repo. A normal git commit history might look like this: > git log --oneline 9d30ff6 fix typo 3062496 oops d0b38ad shit b5f8df7 redesign site That’s all well and good, but lacks a bit of structure and detail for a big project with lots of contributors. That’s where Conventional Commit comes in. Instead of a git-commit message like add login page , it might look like this: feat: add user login endpoint Or you can “scope” it to a particular section of your application: feat(auth): add user login endpoint There’s even a ! flag to signal a breaking change to your coworkers: feat!: remove all authentication API endpoints The predefined conventional commit types cover most types of changes: fix: , feat: , chore: , docs: , style: , refactor: , perf: , test: , build: , and ci: . I find these cover most situations but I’m also a bad boy and like to break rules, so I’ll throw in custom types like wip: , a11y: , hotfix: , or an rm: (as a treat) when I feel it adds clarity to the work. But why would anyone voluntarily conform to a standard like this? My answer is… a feeling . Look at our git-log history now: > git log --oneline 9d30ff6 fix(input): restore focus state on input 3062496 style(checkbox): update tokens to tokens v2 d0b38ad chore: update dependencies via dependabot b5f8df7 feat(auth): add user login endpoint ... In a noisy repo that’s increasingly getting noisier (thanks, robots) anywhere you can add predictability is a net-positive. The cumulative effect over time is that you have a highly-scannable, uniform history of what’s happening in your project. Conventional Commit can even help with code review. A style: fix that adds dozens of npm packages should be a signal that you need to break up the work. Types might also inform if you route all a11y: commits to the local expert for code review. And a refactor! breaking change should signal coworkers to be extra-cautious in review and may trigger other process-oriented workflows like broadcasting the upcoming breaking change to anyone in the blast radius. And because it’s a community standard, like the Custom Element Manifest , you can build tooling around it like commitlint . As its name implies, commitlint is a linter that gates all commit messages from your entire team to ensure they abide in the type(scope): description format. I personally tend to avoid adding extra tooling to enforce simple conventions, but I might change my mind on this because the benefits start compounding. If my commits were all similarly formatted, I could also automate our entire changelog and semantic versioning bumps for releases. fix: = PATCH feat: = MINOR any!: = MAJOR Of course, Conventional Commit and Semver itself aren’t perfect but it adds a degree of predictability about the impact of a change from the description alone. Abiding in the Conventional Commit format is a small micro-adjustment to my process, but it has potential to positively impact the entire project and I like those sorts of zero-dollar improvements. Extending Conventional Commit beyond commits One place you’ll also want to extend conventional commit to is pull request titles . Not technically a git-commit message, but if you squash and merge commits the PR title tends to become the commit message by default. Preferring or enforcing conventional commit in pull request titles helps preserve our pristine commit history. If you’re doing pull request titles, why not use them for issue titles too: #123 > bug(input): required focus indcator missing #122 > feat(checkbox): update tokens to v2 #112 > chore: update dependencies from depdendabot #106 > feat(input): make input more engaging There’s harmony when the issue and the solution are matching. Having the type in the issue title sets a clear deliverable; a bug: needs a fix: to resolve it. Consider these duplicate issues for the same bug: #189 > 4.2.7 Focus Visible [bug] [components] [severity:HIGH] #210 > bug(input): focus indicator is missing Which one would get picked up first? I’d argue that even with labels like [bug] and [severity:HIGH] that the second one would be easier to fix because it gives the developer almost all the information they need to fix the issue. It makes the issue a little more actionable and that’s what you want. If every issue is an investigation, nothing gets done. Triaging issues takes cognitive bandwidth . Labels are great at grouping and providing queryable views, but when scanning a list of issues pairing both the tag and the title to determine the ask adds an extra cognitive tax. I’m projecting here, but uniform data in your PRs and issue queues could also allow you to collect stats on which components or areas of your application are the most buggy and expensive to maintain. It can tell you who’s getting saddled with all the bugs or which issue filer is adding too much feature debt. And it can help your team quantify your recurring maintenance tasks that might be hiding because it gets rolled into other work. That might be valuable to an organization. Unconventional usage of Conventional Commit Now let’s extend beyond the practical. I’m finding the Conventional Commit format to be so useful, I’ve started rolling them out to a lot of different places (surprise, coworkers!). One example is our folder full of random scripts/ in the monorepo. What was a randomized list of dozens of scripts and tests… scripts/ ├── docs-tokens.mjs ├── playwright-cli.mjs ├── storybook-compat-table.mjs ├── style-dictionary.mjs ├── sync-fluent-fluent-custom-elements-manifest.mjs ├── validate-themes.mjs └── visual-review-harness.mjs Can become an organized paradise of co-located responsibility: scripts/ ├── build/ │ └── themes-style-dictionary.mjs ├── docs/ │ ├── storybook-generate-compat-table.mjs │ ├── tokens-generate-table.mjs │ └── sync-fluent-custom-elements-manifest.mjs └── test/ ├── playwright-cli.mjs └── playwright-visual-review-harness.mjs └── themes-validator.mjs I’ve found those Conventional Commit types tend to map well to areas of responsibility for repo-level scripts. Manage docs, tests, build tasks, and so on all fit under the Conventional Commit umbrella and it adds some much needed organization to the junk drawer of copy-pasta and generated helper scripts. And if your scripts/ folder is following the Conventional Commit format… why not roll that out to your scripts in package.json : { "scripts": { "docs:generate": "node ./scripts/docs/generate-storybook-compat-table.mjs && node ./scripts/docs/generate-storybook-tokens-table.mjs", "build:themes": "node ./scripts/build/themes-style-dictionary.mjs", "test:themes": "node ./scripts/test/themes-validator.mjs" } } Built-in npm features like pre* and post* hooks mess up our perfect naming system a bit. A prebuild:themes task reads fine but predocs:generate is a bit marble-mouthy. But that’s an eye-twitching discrepancy I’m willing to accept to abide in what npm gives me for free. Then… if you’ve added Conventional Commit to your scripts/ and your "scripts" and are living that agentic coding life, why not apply the same organization principle to your skills/ folder? skills/ ├── build/ │ ├── themes/SKILL.md ├── docs/ │ ├── component-jsdoc/SKILL.md │ ├── storybook/SKILL.md │ └── technical-writing/SKILL.md └── test/ ├── playwright-tests/SKILL.md ├── visual-tests/SKILL.md └── writing-tests/SKILL.md This looks great… it falls apart in the real world. Skills installed from the internet don’t abide in this format. Having some skills nested and others not creates a feeling of unease, so a flatter folder structure for skills is probably better. That said, it’s not uncommon to need a skill to inform your model about your repo-level scripts and those are places you can still maintain parity. skills/ ├── build-themes/SKILL.md ├── docs-storybook/SKILL.md ├── docs-components/SKILL.md ├── docs-technical-writing/SKILL.md ├── grill-me/SKILL.md ├── i-have-adhd/SKILL.md ├── test-playwright/SKILL.md ├── test-visual-review/SKILL.md └── test-writing/SKILL.md While applying Conventional Commit to your skills/ folder is a bit impractical, one area I can confirm it does help is organizing your agent chats. Fire off a handful of agents and it can get confusing about which one is doing what task, even with their autogenerated chat label. I’ve found it super helpful to ask your bot to rename its chat using the Conventional Commit format. Try it out and bask in the uniform list of tasks. To get this to work consistently in the GitHub Copilot app, I had to modify my session prompt in Sessions > App instructions: At the start of every new chat, before answering my first request, call `rename_session` using `type(scope): description`. Do this even for non-coding chats. Rename only once unless I ask otherwise. I’m not sure how it works in your preferred agent manager, but I assume you could write a skill or put it in your AGENTS.md , but I’d have a conversation with your coworkers first before codifying your obsessive-compulsions in the project repo. Join me in my obsession You might have read all this and said, “This is a man who –in a world of chaos– is looking to over-manage a small thing like title text so that he can feel in control of his own life!” and to that I’d say… Probably. I like to think I’ve just hit the point in my life where I don’t want to spend an single brain cell thinking about how I should format title text or name a file. I wasn’t this passionate about Conventional Commit a year ago, I think I got radicalized. Generative AI almost certainly plays a big part where every robot names files and fixes different every time. That’s built-in to its dice-roll mechanic. Knowing there’s a chaos agent in the mix, I feel a need to find low-hanging fruit for consistency and (for right now) this feels pretty good to me.

AbduzeedoMulti Author Blogsread at source

How to Make a Rotating 3D Cube Text Animation in ascente.design

Learn how to build a looping Instagram Story where lines of text rotate around a 3D cube, one row at a time, using Drum wrap in ascente.design. Reading time: about 10 minutes · Level: beginner-friendl...

AbduzeedoMulti Author Blogsread at source

Inside the Craft of the Nubank Brand Refresh by Koto

Koto's Nubank brand refresh turns a 140-million-customer bank into one flexible system: purple, modular, and unmistakably Nu. Nubank started in Brazil with a simple idea, that banking did not need to ...

AbduzeedoMulti Author Blogsread at source

Twice Shy’s Tactile Soap Packaging Design for Tula Louise

Twice Shy’s packaging design for London soap atelier Tula Louise pairs translucent vellum wraps, metal clips, and 12 apothecary outlines. Opaque cartons hide the best part of a natural soap bar. Jowan...

SitePointThe Giantsread at source

10 Best AI App Builders I've Used in 2026 (and What Each One Gets Wrong)

We built the same app on 10 AI app builders and compared pricing, backend setup, permissions, code ownership and the costs of later edits. Continue reading 10 Best AI App Builders I've Used in 2026 (and What Each One Gets Wrong) on SitePoint .

CSS-TricksThe Giantsread at source

10 Big Ol’ 2027 Black Friday Deals

A big ol' roundup of Black Friday deals on front-end courses from the best independent publishers and educators in the business. 10 Big Ol’ 2027 Black Friday Deals originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

AdactioTop Front-end Bloggersread at source

The speakers at #FFconf have such excellent taste!

Darek KayMore Front-end Bloggersread at source

#0198

An ICM photo that looks like a painting. Golden leaves under a pergola are lighted by the sun.

Jeffrey Zeldman PresentsMore Front-end Bloggers1 min read

Diggs This

RZA of Wu-Tang Clan has invested in AYO Music Group, the music copyright company co-founded by Tracklib’s Pär Almqvist and clearance veteran Deborah Mannis-Gardner. AYO helps rightsholders get more out of their catalogues. Bobby Digital is in the building. Pär (AKA Peyo) Almqvist is a magical creative being and my Swedish brother. If past lives […] The post Diggs This appeared first on Jeffrey Zeldman Presents .

SitePointThe Giantsread at source

Automating Contract Signing in Node.js: Webhooks, Verification, and Storing Signed PDFs

null Continue reading Automating Contract Signing in Node.js: Webhooks, Verification, and Storing Signed PDFs on SitePoint .

Net NinjaYouTube ChannelsVideoWatch on YouTube

"Anti-Slop" Designs with Impeccable (a Crash Course) #3 - Full Page Redesign

HeyDesignerDeveloper/Designer Newsread at source

Design Zeitgeist

Designing with HTML, Where the disabled button got its rule, Computing with CSS layout.

PiccalilliMore Front-end Bloggersread at source

The Index: Issue #206

CSS Golf A fun spin on CSS challenges here where you try to fix an issue in as little "strokes" as possible. FaceTypes As the strap-line says, a collection free fonts that are actually worth using. I made a weird web page every single day in October and lived to tell the tale A nice write-up from Jenn with some very sage advice for people using LLMs a lot for their development work. Open source says no A collection of open source projects that have explicitly banned AI contributions. Big walk used AI in 'the final stretch' of development, kicking off intense awards debate This caused quite the discourse on Bluesky 😬 Some little ways I’m using CSS :has() in the real world 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 JavaScript for Everyone has a huge new update! Mat Marquis has been hard at work to create 3 new modules, 20 new lessons — including practical exercises — and 13 re-worked lessons. It's a lot of good new stuff and people that have previously purchased the course get all of this for free ! Use the link here to save 20% off your purchase. Get the course and save 20%

SitePointThe Giantsread at source

How to Migrate an Elementor Site to the WordPress Block Editor

null Continue reading How to Migrate an Elementor Site to the WordPress Block Editor on SitePoint .

Flavio CopesMore Front-end Bloggersread at source

How to send email properly, for developers and AI agents

Subdomains, SPF, DKIM, DMARC, alignment, the message itself, bounces and abuse, with the real records behind flaviocopes.com and the rules I give an AI agent that sends email.

SitePointThe Giantsread at source

What is Model Routing in AI?

null Continue reading What is Model Routing in AI? on SitePoint .

ESLint BlogLibraries, Frameworks, etc.2 min read

ESLint v10.15.0 released

Highlights Faster config resolution This release includes an updated version of @eslint/config-array with a faster implementation of config resolution. This is the step in which ESLint decides, for every file and directory it visits, whether the path is ignored and which objects…

ESLint BlogLibraries, Frameworks, etc.3 min read

Retiring the contributor pool

Back in 2022, we shared our plan to pay all contributors for non-trivial contributions to ESLint. Our belief was that all contributions of a certain size are valuable and it didn’t make sense to pay team members for their pull requests and not pay anything for work done by…

AbduzeedoMulti Author Blogsread at source

Blæst: Technical Outerwear Visual Identity by Kurppa Hosk

Kurppa Hosk shapes a wind-driven visual identity for Norwegian rainwear label Blæst with blown grotesque type, a vortex mark, and retail tags. Blæst takes its name from the Norwegian word for strong w...

Level AccessCompany/Startup Blogs7 min read

From Policy to Practice: How to Put Your Accessibility Policy to Work

To turn your accessibility policy into practice, translate it for each team, name owners, embed guidance in workflows, and prioritize user impact. Your The post From Policy to Practice: How to Put Your Accessibility Policy to Work appeared first on Level Access .

AbduzeedoMulti Author Blogsread at source

Branding: Alpha Bank by Pentagram and Dalziel & Pow

Alpha Bank has unveiled a major transformation of its brand identity and retail branches, combining work by Pentagram and Dalziel & Pow. Visiting a retail bank branch rarely tops anyone’s weekend ...

AbduzeedoMulti Author Blogsread at source

Branding: Anagram Brand Identity by Pact

Pact's Anagram brand identity starts from a single square and rearranges it into a kaleidoscopic system of glyphs, grids and 8-bit color. Anagram is a venture capital firm backing builders of decentra...

AbduzeedoMulti Author Blogsread at source

Editorial Design: Escenas del Diseño Valenciano by Ibán Ramón

Ibán Ramón pairs a screen-printed cloth cover and recessed summary sheet in the editorial design for Escenas del diseño valenciano Vol. 2. The table of contents starts right on the front board. For Es...

Mux BlogCompany/Startup Blogs4 min read

Mux Robots, now in your living room

Build richer mobile and TV video apps with the Mux React Native Player, featuring Mux Robots summaries, chapters, key moments, and remote-friendly controls.

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

Building with Gemini in Google Antigravity

AbduzeedoMulti Author Blogsread at source

DixonBaxi Unveils CrazyGames Brand Identity

DixonBaxi rebuilt the CrazyGames brand identity around Ziggy, a purple cat with a voice, a type system and a world of his own. CrazyGames is a free-to-play browser games platform, running since 2014. ...

CSS-TricksThe Giantsread at source

Beyond 12 Columns: Designing Layouts With Personality

Too many websites look alike. They use familiar layouts, repeat the same patterns, and often leave little impression once you’ve moved on. Andy Clarke explores how understanding a company’s story can lead to more distinctive designs, using modular and compound grids to create layouts with character. Beyond 12 Columns: Designing Layouts With Personality originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

Web Tools WeeklyMulti Author Blogsread at source

Web Tools Weekly Issue #695

CSS/HTML, Testing, Media Tools

AbduzeedoMulti Author Blogsread at source

Aeonik Soft: Rounded Neo-Grotesque Typography by CoType

Mark Bloom and CoType Foundry calibrate subtle corner radii in Aeonik Soft, warming neo-grotesque typography across eight weights. Full pill-shaped rounding broke the Black weight almost immediately. ...

Flavio CopesMore Front-end Bloggersread at source

How to try open-weight models through OpenRouter

Compare open-weight models from JavaScript through OpenRouter, inspect current prices and token usage, and decide what deserves a local download.

The Mozilla BlogBrowsers, engines, etc.5 min read

An open letter to every family’s designated IT support

Almost every family has one. They’re the only ones who know which remote turns on the TV and which controls the volume and channels. They know what an HDMI cable actually does and where to plug it in. They’ve even fixed multiple phone issues within seconds through a little-known, well-kept secret procedure (turning it off […] The post An open letter to every family’s designated IT support appeared first on The Mozilla Blog .

Net NinjaYouTube ChannelsVideoWatch on YouTube

"Anti-Slop" Designs with Impeccable (a Crash Course) #2 - Critique Current Designs

DXDMore Front-end Bloggersread at source

O design como proposta de valor de uma startup

A Web Summit como mostra também do papel que o design nas suas mais variadas vertentes pode ter no crescimento do negócio de uma startup. O conteúdo O design como proposta de valor de uma startup aparece primeiro em DXD .

Flavio CopesMore Front-end Bloggersread at source

AWS Emulator: a local AWS for you and your coding agents

AWS Emulator runs the AWS APIs on your machine, with no account. How to run it on a Mac, and why it's a good test loop for coding agents.

Flavio CopesMore Front-end Bloggersread at source

What's defensible for small builders now that AI labs ship apps

Anthropic and OpenAI now ship the apps their customers build. What a small builder can still defend: niche data, workflows, trust and distribution.

Flavio CopesMore Front-end Bloggersread at source

Muse Ember vs Claude Haiku 5.5 vs GPT-6 Luna on a real app job

Three small AI models at the same price, $0.10 and $0.50 per million tokens, tagging 200 blog posts. Accuracy, latency and cost compared, with the script.

Smashing MagazineThe Giants15 min read

Should You Actually Add AI To That? A Four-Question Audit For Product Teams

An AI feature can save users time on a task, only for them to spend it checking the results. This practical audit helps product teams decide where AI earns its place and what users need to verify its output.

SitePointThe Giantsread at source

7 Best Accounts Receivable (AR) Software Platforms for Automating Invoice-to-Cash

The best accounts receivable software depends on where your cash leaks. Compare 7 AR platforms for invoice delivery, collections and cash application. Continue reading 7 Best Accounts Receivable (AR) Software Platforms for Automating Invoice-to-Cash on SitePoint .

Adam ArgyleTop Front-end Bloggersread at source

WWW Ep260 Will AI Kill Us All Jev Says 87

Ep #260 Will AI Kill Us All? Jev Says: 87% Robbie and I sip Courage & Conviction, talk Jev, gates that skip the LLM slop, the paperclip problem , model degradation and thinking levels, Ocarina of Time remake vs. digital ownership, and an arrow through the living room window.…

HeyDesignerDeveloper/Designer Newsread at source

Design is a search problem

Building interfaces that understand what we want to do, From code to Figma and back, Making a website in 2026.

Adam ArgyleTop Front-end Bloggersread at source

Animation Evolution

animation? where how why now

AbduzeedoMulti Author Blogsread at source

GRKit Adds Film Looks and XPan Crops to Ricoh GR Cameras

GRKit by Yuexun Jiang adds live film looks, XPan 65:24 crops, halation glow, and GR1s date stamps to Ricoh GR cameras from the SD card. Take the SD card out of a RICOH GR III, GR IIIx, or GR IV runnin...

AbduzeedoMulti Author Blogsread at source

How Studio Dumbar Crafted 3D Footwear Branding for Zellerfeld

Studio Dumbar/DEPT® builds Zellerfeld’s 3D-printed footwear branding around lattice type, serif contrast, and co-branded parcel tape. Single-material 3D printing strips away almost everything traditio...

Jens Oliver MeiertTop Front-end Bloggersread at source

CSS Deduplication and File Size: What’s Left After Compression

Analyzing 1,882 style sheets from 123 sites for the performance impact of automated declaration deduplication, after Gzip and Brotli compression.

AbduzeedoMulti Author Blogsread at source

How DesignStudio Refreshed the DNEG Brand Identity

DesignStudio rebuilt the DNEG brand identity around motion, with a custom DNEG Script typeface and the line Start with Impossible. The idea is simple to state and hard to fake: a visual effects compan...

AbduzeedoMulti Author Blogsread at source

Web Design: HBO’s The Alabama Solution by tubik studio

tubik studio structures six years of prison reporting into documentary web design and a 1,377-profile archive for HBO’s The Alabama Solution. Six years of prison reporting anchor thealabamasolution.co...

Flavio CopesMore Front-end Bloggersread at source

How to use the Gemini Decisions API

The Gemini Decisions API answers yes/no, choice and score questions with probabilities instead of text. Here's how to call it from Node.js and branch on the result.

Flavio CopesMore Front-end Bloggersread at source

What's new in Grok Bot 1.0

Grok Bot 1.0 adds Team Bots you publish and share, Slack and Microsoft Teams, meetings on Meet and Zoom, shared connectors and reviewed learnings.

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 .

SitePointThe Giantsread at source

Running WireGuard for a Development Team: The Hidden Cost of VPN Maintenance

null Continue reading Running WireGuard for a Development Team: The Hidden Cost of VPN Maintenance on SitePoint .

Bootstrap BlogLibraries, Frameworks, etc.read at source

Bootstrap 5.3.9

Engineering at MetaCompany/Startup Blogs9 min read

Intelligent Delivery: Making Every Unit of Compute Serve Better Ads

Ads ranking models are growing toward LLM scale faster than the hardware to run them can keep up. An extra unit of compute has more impact on some ad requests, models, and chips than on others. The challenge is deciding where to allocate it to get the best outcome for the entire system. We built [...] Read More... The post Intelligent Delivery: Making Every Unit of Compute Serve Better Ads appeared first on Engineering at Meta .

AbduzeedoMulti Author Blogsread at source

Bass X Machina: Inside BUCK's New Title Sequence

BUCK built the Bass X Machina title sequence as a fever dream of propaganda posters, bold silhouettes and fractured red, white and blue. The sequence opens inside Bass's mind. BUCK calls it a fever dr...

Go Make ThingsMulti Author Blogs2 min read

For and against

Yesterday, good internet friend Baldur Bjarnason shared a series of shorts he made on why he doesn’t use generative AI, and it got me thinking about how much of my career has spent being against things. Early in my career, I was for web performance and accessibility and building cool things. But as JavaScript frameworks became increasingly ubiquitous, we saw the things I was for start to degrade rapidly. Sites got slower and harder to use.

Frontend Masters BlogMore Front-end Bloggers11 min read

Creating Diagrams and Graphs Using Modern CSS

The final part of the connectors series: dynamic connections that pick the closest sides, static connections that always leave from the same edge, and some bendy, zig-zag, and spring connectors, all built with anchor positioning, border-shape, shape(), and if().

AbduzeedoMulti Author Blogsread at source

Better Half’s Arcade Graphic Design for Brex’s Fiscal Mania

Better Half / Cult Holdings builds a bullet-hell simulator and acrylic cabinet in its arcade graphic design for Brex’s Fiscal Mania. Destroying an unpaid invoice in Fiscal Mania would count as financi...

SitePointThe Giantsread at source

Top 6 AI Text to Speech Tools in 2026: Features, Strengths and Limits

null Continue reading Top 6 AI Text to Speech Tools in 2026: Features, Strengths and Limits on SitePoint .

SitePointThe Giantsread at source

5 Best AI Anime Video Generators in 2026, and Are AI Anime Videos Worth Making?

null Continue reading 5 Best AI Anime Video Generators in 2026, and Are AI Anime Videos Worth Making? on SitePoint .

SitePointThe Giantsread at source

How to Use IP Geolocation to Stop Bots and Fraud (Without Hurting UX)

null Continue reading How to Use IP Geolocation to Stop Bots and Fraud (Without Hurting UX) on SitePoint .

Dan DaviesMore Front-end Bloggers9 min read

Media Officer Role Breakdown

The work behind the posts in Welsh football I do the vast majority of the things listed below as part of my role at Holywell Town. Social media, graphics, photography, video, interviews, website updates and the requests that come in around them. Individually, some might seem like small jobs. Put them together over a week […]

CSS WizardryTop Front-end Bloggersread at source

Web-Perf Wednesday 017 – Prebid Stops Re-downloading Its Manifest

Prebid 11.48 makes its jsDelivr manifest cacheable, removing 67 KB of repeat downloads for sites that use the web bundler.

SyntaxPodcastsAudioListen

1055: What the hell is going on with GitHub?

Scott and Wes sit down with GitHub’s Kyle Daigle to ask what the hell is going on with GitHub: the downtime, the agent traffic spike, and the infrastructure overhaul decoupling storage from compute. Plus Copilot Fusion’s cascade and critique modes, npm supply chain security, and…

Jeffrey Zeldman PresentsMore Front-end Bloggersread at source

Better Day, Sunshine

I haven’t driven a car in decades (New Yorker). But from my pre-New York life, I remember how sun glare could turn a pleasant road trip into a blinding gauntlet. Enter “Sunward,” a uniquely specific demo app my Automattic colleague Peter Westwood just whipped up in Spacefast. Spacefast – for your next idea Sunward – […] The post Better Day, Sunshine appeared first on Jeffrey Zeldman Presents .

Flavio CopesMore Front-end Bloggersread at source

Letting an agent edit my videos

How a coding agent edits my Borumi recordings through its MCP server: pause cuts, a word-by-word caption check, and the two checks I keep for myself.

Flavio CopesMore Front-end Bloggersread at source

Why I replaced an MCP server with a CLI

My Things MCP server made macOS ask for permission on every agent session. I replaced its 22 tools with a 598-line CLI and a skill, and here's what changed.

Net NinjaYouTube ChannelsVideoWatch on YouTube

"Anti-Slop" Designs with Impeccable (a Crash Course) #1 - Getting Started

AbduzeedoMulti Author Blogsread at source

Graphic Design: Adobe MAX 2026 Brings Play Back to the Canvas

At Adobe MAX 2026 in Miami Beach, Adobe brought genuine joy back to graphic design with local Model Context Protocol integrations and playful tools. Design is supposed to feel good, but for the past t...

CSS Articles by Temani AfifMore Front-end Bloggersread at source

Creating Diagrams and Graphs Using Modern CSS

Creating Diagrams and Graphs Using Modern CSS Read the full article online

Frontend FocusMulti Author Blogsread at source

Responsive design is more than resizing a window

🚀 Frontend Focus #​766 — November 11, 2026 | Read on the web Beyond the Viewport: Introducing Site Seeing — Making a design responsive means tackling more than just resizing, with real users often having on-screen keyboards, split views, docked DevTools, and other things open, or even using oddly sized in-app browsers. Ahmad's new, free browser-based tool is designed to preview your layouts in these awkward contexts. Ahmad Shadeed Run AI Coding Models on Your Own Machine — Local models are now good enough for everyday coding. Learn to run them on your own Mac or GPU, wire them into your editor and terminal agents, and keep your code private with no per-token bill. Master.dev sponsor 🤖 Modern Web Guidance 1.0: Web Expertise for AI Agents — Coding agents can write good code, but tend to fall behind on Web standards and best practices. Chrome's skills for steering agents toward modern, Baseline-aware HTML/CSS are now stable, and it's not just Google: Lea Verou, Patrick Brosset (Edge), and Jake Archibald (Firefox) are among the project's owners. Philip Walton (Google) The Web is More Than Enough — An encouraging reminder of the immense power of the Web platform and how advanced use of WebAssembly, Web Crypto, WebGL, and Web Audio is increasingly within the reach of developers to build apps you'd once never have imagined in the browser. Paul Ford ⚡️ IN BRIEF 🗳️ The State of JS survey for 2026 is open now and seeking responses . 🦊 Firefox 160 is now stable. On-device speech recognition via the Web Speech API arrives on desktop, and you can experiment with blocking="render" and lazy loading for video and audio behind flags. ♿ GitHub now recognizes an ACCESSIBILITY.md file and surfaces it on a repository's overview page. 🦓 Zigzag is a new lightweight browser for macOS , coming in at just 18MB. 📙 Articles, Opinions & Tutorials Computing with CSS Layout — How much can CSS 'compute' on its own? Leaning on the behavior of CSS grid, flexbox, and more, this interactive piece shows how to read CSS's 'calculations' back as numbers and put them to practical use, including drawing animated charts. Agustin Capeletto System Colors Need to Work Together — You might expect paired CSS system colors like HighlightText and Highlight to be readable together, but in Chrome on Android's dark mode they manage a contrast ratio of only 1.98:1. Aaron's cross-browser study shows which pairs hold up. Aaron Gustafson How to Build Your Own Automated Debugging Workflow — Connect your coding agent to Sentry and turn errors into fix PRs. See the guides and recipes in the resource hub. Sentry sponsor Is 'Using Declarations Just Once' Still Effective in CSS? — This classic optimization technique merges repeated declarations under one grouped selector. Jens built a tool to test it on 30 real sites and found it can still cut uncompressed file size, if applied selectively. Jens Oliver Meiert Local Visual Regression Testing for Agents with Playwright — A look at using Playwright's toHaveScreenshot matcher to give coding agents a consistent local visual-feedback loop. Paolo Ricciuti Building Interfaces That Understand What Users Want to Do — A look at using small AI 'decision models' to pick from options you define, including via Chrome's experimental, on-device Decisions API. Agustin Barrientos CSS-Tricks, Version 20 — Now under new ownership, the site is getting JavaScript cleanup, a Sass reorganization, and more, which Geoff explains in detail. Geoff Graham A Groundbreaking Upgrade to SVG is Approaching: Linked Parameters are Almost Here Roman Komarov Making Immersive LLM Chat Experiences More Accessible Eric Bailey Re-Implementing :nth-child() with Modern CSS Temani Afif 🧰 Tools, Code & Resources Britecharts 3.0: Ready-Made, Accessible D3 Charts — A long-awaited major release for this library of reusable D3 charts makes them accessible by default, with screen reader data tables and keyboard navigation. Also adds dark mode, TypeScript types, and a treemap. The docs are really good. Marcos Iglesias The “Export CSV” Button Shouldn’t Time Out — Exports scan every row in the range and slow as data grows. TimescaleDB keeps them fast. $1000 credit on Tiger Cloud . Tiger Data (creators of TimescaleDB) sponsor 🎨 This Hue Shall Pass: A Contrast Checker That Fixes Failing Color Pairs — Paste in a palette to get a grid of every foreground and background pairing, graded against WCAG AA or AAA. It doesn't just flag failures, you can also nudge near-misses into passing while keeping the hue intact. More background here . Clearleft Liquid Glass Forge: Refraction Behind Native HTML Controls — An experimental WebGL2 and CPU rendering engine for glass refraction, a la Apple's Liquid Glass. You can see a demo here . Nami Poursafargholi 🔡 Tinkerfont: A Font Inspection and Switching Tool for Chrome & Firefox — Install this extension and you get a quick way to inspect fonts on the current page (and their properties), and try alternative fonts directly on the page. Mighil BagUI: Components & Blocks for Building SaaS Landing Pages — A free collection that includes clean, customizable marketing pages, app pages, blocks, and templates for React and shadcn/ui users. Source code . Anelka Bagalane Master CSS 2.0: A Markup-Driven CSS Language — A utility-class framework where one class can carry a value, selector and condition (e.g. fg-blue-70:hover@sm ). v2 adds design tokens defined in your own CSS, a wide-gamut color palette, and linting and editor tooling. Aoyue Design 📰 Classifieds 🔁 Your agent checks web work with a refresh. On mobile it needs a device. Expo Simulators gives it one in the cloud. 📅 Booking forms without a backend : Real availability, live totals and deposits via your own Stripe or PayPal. CraftForms, from €6/month . ✍️ Foxit : Still redirecting users to a signing portal? 6 eSignature APIs compared on embedded signing, pricing and integration effort. 🛑 Finally, if you want to keep the bots out … A Blunt Banhammer Blocks Basic Bots Ballistically — Terence Eden's site was plagued by bots using up his bandwidth, so he built an interesting honeypot that lures the robots.txt -ignoring bots in and hands out a ban. It works, with an almost 90% drop in bandwidth used, but there are some tradeoffs. If you're happy to lean on the cloud for protection, Nick Gray recounts his year of fighting scrapers with Cloudflare , including his firewall rules and failed experiments. Meanwhile, with a more… 'creative' approach, Utku Sen filled a test site's code with taboo phrases and found AI agents refused to touch it . This may be more useful if you want to prevent casual reverse engineering/vulnerability hunting, though. Finally, even if you welcome crawlers, they can make your analytics misleading. Hugo Attal looked into his server logs and found 90% of his 'human' visitors were bots . Till next time…

Lea Verou’s blogTop Front-end Bloggers5 min read

Candidate Statement for the 2026 W3C TAG Election

Group photo of the W3C TAG in July 2022 with me to the left of Sir Tim Berners-Lee (inventor of the Web and TAG chair emeritus). Photo credit: Dan Appelquist I had the great honor of being elected to the TAG by the W3C membership in 2020 and again in 2022 , serving two terms…

Twilio BlogMulti Author Blogsread at source

PHP2Shell. What is it and What Do You Need to Do?

You don't need to be a PHP developer or a systems administrator to have heard about the PHP2Shell exploit. In this post, learn what it is and what you need to do going forward.

Twilio BlogMulti Author Blogsread at source

7 questions to ask a customer engagement platform before you commit

You rarely find lock-in during evaluation. It's usually at renewal. We recommend these 7 questions—they surface exit costs while you still have leverage.

Twilio BlogMulti Author Blogsread at source

Transitioning Your Communications: How to Keep Customer Messages Flowing Seamlessly

Learn how to transition your messaging workflows from Tyntec to Twilio without interruption while maintaining data privacy, WhatsApp reputation, and more.

AbduzeedoMulti Author Blogsread at source

Soft Labor: Tactile SVG Web Design by Other Means

Other Means pairs fuzzy SVG typography with hover-triggered focus in its editorial web design for Soft Labor, featured on Hover States. Landing on Soft Labor, the cultural research publication written...

Mux BlogCompany/Startup Blogs5 min read

How a designer learned to unsee Will Smith eating spaghetti

How Mux’s Creative Director designed and built a custom Video.js v10 skin himself, using Figma to design, Claude Code to build, and the browser to review.

SitePointThe Giantsread at source

How to Improve Email Deliverability Rates

null Continue reading How to Improve Email Deliverability Rates on SitePoint .

Flavio CopesMore Front-end Bloggersread at source

A deep dive into Businesses in ChatGPT

Businesses in ChatGPT lets you claim your business, add a product feed, see mentions and clicks, and publish a Business Agent. How it works and its limits.

Adrian RoselliMore Front-end Bloggers4 min read

My Interop 2027 Picks

Interop 2027 is gathering votes and the deadline is 19 November 2026. For the second year now, Firefox made a page to let you rank your Interop 2027 choices. Which I’ve now done. I narrowed it down to fifteen, though getting there was oddly difficult. It seems the top three…

Jim Nielsen’s BlogMore Front-end Bloggersread at source

Making a Website in 2026

Pete Millspaugh has a great post over on the Val Town blog where he documents his attempt at making generating the same website across a variety of AI tools. I love the post. Here are a couple of thoughts that come to mind. The Space Is Ripe for Referral Fees Pete decided to make a website for his conference talk, and he added a comments section to make it a less static / more dynamic demo. This is interesting because LLMs are really good at generating one-off HTML pages you open at file:// , but as soon as you start to introduce technological dependencies — like a database, or an analytics tool, or a service for sending email, or payment processing, etc. — the question becomes: How does the LLM choose which service to rely on? It’s one thing to have the LLM choose React over Angular or Vue over Svelte. But how (and why) does it choose something like an auth provider? Does it build you a site with Auth0 or WorkOS or Clerk? How would a non-technical user even know how to weigh the trade-offs of making such a decision? Pete said he was deliberately vague about these details, which is why I find his experience so intriguing. For example, here’s what he found after generating a site in Lovable: My Lovable app is fullstack React, I learn, clicking around to find the code. It seems a bit heavy for a single-page site what with dozens of files […] The comments database seems to be using Supabase, which required no intervention on my part to set up. There’s a whole lot more—analytics, e-commerce and AI integrations, etc. I’d be really curious to know what that “a whole lot more” was. Which tools/services did it choose to depend on? How many people creating these sites understand that, even for a website that’s mostly static content, they’re being given an output that ships a JavaScript application framework, router, hydration runtime, analytics, component bundles, etc.? You asked for a sailboat, but you got an aircraft carrier . Do you know? Or more importantly, do you care ? But it’s more than just a choice of languages and frameworks. It’s also a choice of third-party services. Why Supabase? Why not Firebase? Or Neon? Speaking of Neon, here’s Pete’s experience with Vercel’s v0: I copy-paste my prompt into the chatbox. After 11 seconds, v0 asks if I’d like to install Neon, because my comment wall needs a real database. Sure, why not. (Does that mean I need a separate Neon account? Vercel creates one for me, and later I’ll find a welcome email from Neon in my inbox.) Frankly, this all feels like a space absolutely ripe for those kinds of business referral transactions you find in other industries. Take real estate, for example. For lots of folks, when you buy a home you need an agent. (Not that kind of agent; a real estate agent.) Your real estate agent is there to help you answer all those common questions that come along with buying a home: You: “How do I finance this?” Agent: “I know a mortgage company…” You: “How do I know the house is in good shape?” Agent: “I know an inspection company…” You: “We found X during the inspection, who can address it?” Agent: “I know a company that does {roofing | electrical | plumbing | etc.}…” You: “How do I close on this deal?” Agent: “I know a title company…” While you’re free to make all these decisions yourself, your agent is also there to help you pick. Presumably they’ll choose a company that reflects well on them, but there’s also undoubtedly good money to be made in referrals. After all, who else is dealing with people with these kinds of needs all day long? The “make a website with AI” space has a parallel here which makes you wonder about the incentives behind the LLM’s decision-making. Why Supabase over Firebase? Because the LLM reasoned about it? Because, statistically speaking, it was the next most probable word? Because Supabase paid Lovable (and hopefully disclosed such preferential integrations)? If LLMs are already unpredictable and non-deterministic, nothing will make their actions more predictable and deterministic than some financial incentives. Who is the customer here? The person generating the website? Or the company willing to pay for its services to be embedded in generated code? (That’s a lucrative business waiting to happen…) Get Ya Some Imperial Credits As a customer, the credit systems behind these LLM systems are annoying as hell. Here’s Pete: I’m using up “credits” as the machine works—0.70 so far, now 2.30, now 3.10, oh boy—and I have no clue what that means. There are no units. I’d prefer dollars. Are credits just dollars? As it turns out, no. With another tool: I do two more rounds of click “Continue generation” and wait until my website is ready: 5 minutes 36 seconds for 0.070 credits, and 1 minute 29 seconds for 0.024 credits. It’s probably just me, but c’mon, who do these “credit” systems really benefit? When my prompt is running, don’t show me usage like this: Credits: 0.05 -> 0.0672 -> 0.0871 Just show me the cost: Cost: $0.02 -> $0.21 -> $0.31 Don’t make me do the conversion of credits -> dollars on the fly. Computers are good at math. [soap-box] I know it might hurt your bottom line if I’m not thinking about how much money credits I’m spending, but c’mon, can we stop with the financial abstraction on top of financial abstraction? I hate how so many hosting companies are doing this “credits” for compute primitives thing. It’s pitched as if spending credits is easier, because you can apply them across services, e.g. buy image transformations or serverless function compute, all with credits! Yeah well guess what other financial abstraction I can apply to all those different services? Dollars and cents. [/soap-box] Conclusion Pete’s conclusion: I am both optimistic and pessimistic about this moment for making websites. I’m optimistic because end-user programming, the idea that everyone should be able to customize their own software, seems more possible than ever. I’m pessimistic because a slopsite, an AI-generated website with little to no human thinking involved, is often worse than no website at all. That resonates — and feels generalizable. You fill in the blank: An AI-generated ___ with little to no human thinking involved, is often worse than no ___ at all. My conclusion? Making Generating a website may be easier than ever. Understanding what you’ve generated, who you now depend on, and why? Not so much. Reply via: Email · Mastodon · Bluesky

DigitalOcean BlogMulti Author Blogs2 min read

QM, Y Combinator's Open-Source Agent Harness, Now Deploys in One Click on DigitalOcean

Y Combinator built QM, a multiplayer agent harness for Slack and the web, to run agents across its own teams, from accounting and legal to engineering. In July, YC open-sourced it so any startup could do the same. Starting today, DigitalOcean offers the first one-click…

Adam ArgyleTop Front-end Bloggersread at source

WWW Ep259 Your AI Agents Dont Need You Anymore

Ep #259 Your AI Agents Don't Need You Anymore Robbie , bourbon and whatnot. We chat Doorway , dark factories, gauntlet loops that beat the slop out of your code, the Creator Micro , Glimmer getting jelly of Claude, engineering vs. coding, CSS scroll axis , and Jeff the mower…

Engineering at MetaCompany/Startup Blogs8 min read

Your Algorithm: Giving People More Ways to Personalize Facebook Recommendations

Your algorithm is a suite of AI-powered tools that makes Facebook recommendations more transparent and steerable, with a single editable view of the interests that shape Feed and Reels. We’re sharing how Your algorithm turns people’s natural language preferences into responsive recommendations, and how LLMs are tailored to specific tasks within the system. Traditionally, the [...] Read More... The post Your Algorithm: Giving People More Ways to Personalize Facebook Recommendations appeared first on Engineering at Meta .

Engineering at MetaCompany/Startup Blogs17 min read

How We Built TLX: A Hardware-Native GPU Compiler for Production ML at Scale

Triton Low-Level Extensions (TLX), is an extension to Triton that helps engineers optimize GPU performance while preserving Triton’s productive programming model. TLX introduces explicit warp-group and cluster-level orchestration, letting developers adopt new hardware capabilities without sacrificing velocity. TLX has demonstrated performance improvements in RecSys training, RecSys inference, and large-scale LLM pretraining. Modern GPU architectures increasingly [...] Read More... The post How We Built TLX: A Hardware-Native GPU Compiler for Production ML at Scale appeared first on Engineering at Meta .

CSS-TricksThe Giantsread at source

CSS Optimization: Is Using Declarations Just Once (UDJO) Still Effective Today?

Is the technique inspired by the DRY principle by identifying and reducing (if not eliminating) CSS declaration repetition still a relevant optimization strategy? CSS Optimization: Is Using Declarations Just Once (UDJO) Still Effective Today? originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

CodePenCompany/Startup Blogs1 min read

448: CSS Modules is Cool Again

Shaw and Chris talk CSS Modules, a rather old bit of technology in the CSS-in-JS category. CodePen now supports them, which took a little work because the way they process code is a smidge unusual. We use CodePen Modules (with Sass!) here at CodePen so we knew we wanted to support them, but we got […]

W3C BlogBrowsers, engines, etc.5 min read

The multiplier effect: How authoring tools can transform web accessibility

In this post, W3C's Web Accessibility Initiative (WAI) Director Shawn Lawton Henry covers how authoring tools can help make vast amounts of content more accessible with less effort.

Adam ArgyleTop Front-end Bloggers6 min read

PropFLIP

FLIP, but the invert is 4 custom properties and CSS does the play

SitePointThe Giantsread at source

How to Use Developer Time Tracking Data to Improve Sprint Planning and Estimates

null Continue reading How to Use Developer Time Tracking Data to Improve Sprint Planning and Estimates on SitePoint .

Christian HeilmannTop Front-end Bloggers3 min read

Pardon my dust 2 – redesigning christianheilmann.com

OK, the shift from WordPress and Godaddy is happening. I managed to convert most of the old blog to static pages and you can see the result already at the old domain Wait-till-i.com It’s a highly responsive and fully static site now, build with lots of dirty PHP conversion scripts and Jekyll. I did use […]

AdactioTop Front-end Bloggersread at source

Six Gutenberg Revolutions in a Row—Asterisk

An interview with Ken Liu and Ada Palmer: The vast majority of computing power on Earth is human brains, and a huge amount of it is dedicated to worrying about where lunch is coming from tomorrow. If you want to free up computing power, solve poverty. adactio.com/links/22833

Netlify BlogLibraries, Frameworks, etc.read at source

Netlify goes full stack: introducing Netlify Server

A long-running Node.js server for your backend: WebSockets, real-time apps, AI agents and in-memory state, deployed like the rest of your Netlify project.

The Mozilla BlogBrowsers, engines, etc.2 min read

Firefox’s free built-in VPN uncaps data limit through January 2027

Whether you’re heading home to see family this winter or taking a well-earned break before the year wraps up, we want you to browse with a little more peace of mind. That’s why, as our gift to you, everyone using Firefox’s free built-in VPN gets unlimited data starting today, November 10, through January 31, 2027. […] The post Firefox’s free built-in VPN uncaps data limit through January 2027 appeared first on The Mozilla Blog .

HeyDesignerDeveloper/Designer Newsread at source

The beige era of product design

On borrowing Apple's type scale, The new full-stack designer (video), AI prototyping inside your design system, Introducing Adaptive Dark Mode and more.

Frontend Masters BlogMore Front-end Bloggers3 min read

My Interop 2027 Picks

What web platform features are we all wishing for perfect cross-browser interoperability next year?

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Codex & AI Coding Agents - Learn Agentic Coding

SitePointThe Giantsread at source

What Breaks When a Self-Hosted LLM Gateway Hits 1,000 Concurrent Streams

null Continue reading What Breaks When a Self-Hosted LLM Gateway Hits 1,000 Concurrent Streams on SitePoint .

Flavio CopesMore Front-end Bloggersread at source

API pricing vs subscription: what my month of Codex would cost on the API

I priced 30 days of my real Codex usage at API rates. A $100 plan covered $745 of API-equivalent work. Here's the math, the script to run on your own logs, and when the API still wins.

HeyDesignerDeveloper/Designer Newsread at source

AI skills for building better interfaces

Iconden: The iPhone app icon gallery, "x is dead" is dead, When touch makes sense on a laptop

HTML All The ThingsPodcastsAudioListen

Choosing the Right AI Model for the Job

Are you wasting money and usage limits by choosing the most powerful AI model for every task? Or are you wasting even more time fighting with a cheaper model that isn't up to the job? In this episode, Matt and Mike discuss when to use smaller, faster AI models and when it's…

Chris HawkesYouTube ChannelsVideoWatch on YouTube

My Dad Died

SitePointThe Giantsread at source

How to Build an Accessible Gold Value Calculator in Vanilla JavaScript

null Continue reading How to Build an Accessible Gold Value Calculator in Vanilla JavaScript on SitePoint .

SitePointThe Giantsread at source

What Actually Happens When a Kafka Region Fails?

null Continue reading What Actually Happens When a Kafka Region Fails? on SitePoint .

JavaScript WeeklyMulti Author Blogsread at source

How X (Twitter) is rebuilding its web app

#​810 — November 10, 2026 Read on the Web JavaScript Weekly How X (Twitter) is Rebuilding Its Web App — X is replacing 3 servers with one app built on React, Vite and Fastify. Yagiz, famed for his performance work on Node, explains the streaming architecture behind it, along with some bottlenecks they had to fix, like how hundreds of tiny JavaScript files slowed startup. Yagiz Nizipli (X Engineering Blog) Why Standard Webhooks Hit 118m npm Downloads a Month — OpenAI, Anthropic, and Gemini all sign webhooks with Standard Webhooks, the open spec Svix started. That's one finding in the State of Webhooks 2027, where we scored 489 API companies on retries and signatures. Immediate download, no email required . Svix sponsor Parcel 3 Alpha: The Bundler Rewritten in Rust — A ground-up Rust rewrite of the popular bundler that the team reports is up to 100x faster than Parcel 2 at cold builds of React Spectrum. It runs as a standalone binary without Node, with support for native plugins written in Rust, Go or Swift, while JavaScript plugins run on an embedded QuickJS runtime. The Parcel Team IN BRIEF: 📊 The State of JavaScript 2026 survey is now open . Share the features, libraries and tools you use and like, and discover a few new ones along the way. We'll share the results once they're out. TypeScript 7's Go-powered compiler now has an experimental WebAssembly build which already powers an early TypeScript Playground v2 . ESLint now officially lints shell scripts with the @eslint/shell plugin adding ShellCheck-like rules for Bash, sh and mksh. RELEASES: Playwright 1.65 – The browser testing tool's test runner can now run under Bun, plus there's a new failures reporter. Storybook 11 Beta – The UI component workshop gets more agent-ready, with official skills, Claude/Codex plugins, headless CLI tools, and more. 🔒 Vite has disclosed a critical remote code execution flaw affecting dev servers exposed to the network via --host or server.host . Upgrade to 8.3.7, 8.2.5, 8.1.7, 7.3.8 or 6.4.6. 🔒 Next.js 16.4.5 and 15.5.29 fix seven security issues , including a high-severity cross-tenant cache disclosure. 🔒 Node.js security releases are due tomorrow (or shortly after) for the 26.x, 24.x and 22.x lines. 📖 Articles and Videos Experiments with Multithreaded JavaScript — What would JavaScript look like if threads could share objects directly? Former TC39 delegate Erik Arvidsson explores three approaches: in a Porffor fork, as a TypeScript library with an ownership checker, and as an implementation of the TC39 structs proposal . Each has a playground to try. Erik Arvidsson The New JavaScript Features Between V8 14.6 and 15.6 — Node 27, released in alpha recently, is built on V8 15.6, and Joyee tours what that brings to developers, including Math.sumPrecise , new iterator methods, and some behavior changes in sorting, dates and promises, all with sample code. Joyee Cheung How to Build Your Own Automated Debugging Workflow — Connect your coding agent to Sentry and turn errors into fix PRs. See the guides and recipes in the resource hub. Sentry sponsor Spreading Liquid with three.js — A technical explanation of a 'liquid-spreading' effect originally built for a cosmetics site. The in-page demo is fun to play with and this could be handy if you want to create paint-like effects. Misaki Nakano Reviving Facebook's Abandoned JavaScript Optimizer — Prettier creator James Long put agents to work resurrecting Prepack , Facebook's attempt to make JavaScript faster by running it ahead of time. There's an experimental demo that shows off the gains on a sample React app. James Long Yavashark: Building a JavaScript Engine for 950 Days Straight — A solo developer's progress report on a Rust-based engine they're building that passes around 82% of test262 and can server-render a React app. There's a playground to try it for yourself. Sharktheone 📄 A Fifth Object Shape Made the Same Loop Twice as Slow – V8's hidden classes and inline caches in action. Mohsen Fallahnejad 📺 ReactiveScript: Early Findings – A lengthy stream by Solid's creator on ReactiveScript , his experimental reactive UI language he first shared in 2021 . Ryan Carniato 🛠 Code & Tools EmbedPDF 3.0: A PDF Viewer for Any JavaScript App — An open-source PDF viewer for vanilla JavaScript, React, Vue, Svelte and Angular. The v3 rebuild offers a ready-made viewer, headless components for custom UIs, and a standalone PDF engine. Try the demo. EmbedPDF Embed an Office Editor Your App's AI Agent Can Use — DOCX/XLSX/PPTX editing in your app with your model and workflow. Agents make targeted edits, and users refine the file. Thinkfree sponsor chrome-capture: Record a Chrome Tab at 60-120fps to an MP4 File — It's been three years since we've linked to Paul Irish (once a frequent fixture in JavaScript Weekly!) but he's back with a neat, compact tool you can run with npx to record a Chrome tab at high quality including audio to an MP4 video. Paul Irish Text.js: React Apps That Render in the Browser Console — Really! A React 19 framework whose 'screen' is the DevTools console, with routing, keyboard input, layout primitives and ASCII fonts. Open the console on the homepage to try it, then bunx create-text-app if you're tempted. GitHub repo. Anomaly Jeasx 3.0: Server-Rendered JSX, Now Streaming — A minimal framework that uses JSX purely as a server-side templating language (with no React and no hydration) on top of Fastify and esbuild. v3 streams pages while async components are still loading and renders ~2x faster. Live examples. Jeasx Rolldown 1.3 – The Rust-powered bundler adds experimental support for import attributes, but there are breaking changes to be aware of. jsdom 31.0 – The pure JS implementation of DOM/HTML standards adds a new CSS engine and switches to a Skia-backed canvas backend. Remix 3.2 – The full-stack framework adds nonce-based Content Security Policy middleware. Wiki.js 3.3 – Open source JavaScript and Node.js-powered wiki app. 📰 Classifieds 📺 JetBrains AI.js Day 2026 : Frontend's scariest AI questions answered live on channel 13, Nov 13. Register now! 🔑 One subscription, a dozen people. Fingerprint shows how many devices are really behind each account. Try it free . 📢 Elsewhere in the ecosystem 📺 I've been enjoying Arjay McCandless's YouTube channel lately as he's been focusing on maxing out VPSes with different stacks (and often being surprised by the results). This time, he compares 22 combinations of JavaScript runtimes and frameworks to see how many users they can handle! 🌙 Safari 27.3 beta introduces Adaptive Dark Mode , an opt-in feature that automatically darkens light websites that don't provide their own dark theme. 🎨 Three.js creator mrdoob is posting daily visual experiments for Codevember , complete with live demos and source. 💰 Cloudflare has handed out the first $301,300 of the $1M Vite Ecosystem Fund it pledged when VoidZero joined, spread across 44 projects and maintainers, including e18e.

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

The multiplier effect: How authoring tools can transform web accessibility

In the W3C blog post The multiplier effect: How authoring tools can transform web accessibility, W3C WAI Director Shawn Lawton Henry covers how authoring tools can help make vast amounts of content more accessible with less effort.

Jens Oliver MeiertTop Front-end Bloggersread at source

How to Create, Edit, and Validate AWAGAM Blocklists

Extending the tooling for the AWAGAM request blocker, a new editor is available to set up and test blocklists and blocklist bundles.

AdactioTop Front-end Bloggersread at source

Monday session

Level AccessCompany/Startup Blogs11 min read

Accessibility MCP Servers: What They Are and How They Work

An accessibility Model Context Protocol (MCP) server connects AI assistants to testing engines, Web Content Accessibility Guidelines (WCAG) guidance, or existing findings, so The post Accessibility MCP Servers: What They Are and How They Work appeared first on Level Access .

Engineering at MetaCompany/Startup Blogs6 min read

Extending LLDB to Debug Applications That Span CPUs and GPUs

We built a vendor-neutral accelerator plugin architecture in lldb-server for debugging applications that span CPUs and GPUs. It separates shared debugger infrastructure from hardware-specific device control. The design represents the CPU and GPU as separate debugger processes while presenting them in one debugging session. Modern AI applications rarely execute in one place. A workload can [...] Read More... The post Extending LLDB to Debug Applications That Span CPUs and GPUs appeared first on Engineering at Meta .

Microsoft Edge BlogBrowsers, engines, etc.5 min read

Shop faster and save money with built-in tools in Microsoft Edge

It's 11 p.m. Fifteen tabs are open, the reviews don't agree, and you've checked the price three times. Then, just when you think you're done, a promo code box appears with a code you don't have. So, you keep shopping, long past the point you wanted t The post Shop faster and save money with built-in tools in Microsoft Edge appeared first on Microsoft Edge Blog .

CSS-TricksThe Giantsread at source

CSS-Tricks, Version 20

Things look a little different around here? I hope so because we just pushed a site redesign! Here's everything new with the 20th(!!) version of CSS-Tricks. CSS-Tricks, Version 20 originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

David BushellMore Front-end Bloggers4 min read

I was wrong about dark mode

Apple invented dark mode again! They’re calling the new feature Adaptive Dark Mode™. I’m learning that other browsers already had a similar feature. I assumed people relied on add-ons like Dark Reader (and millions do). Regardless, pushing what is effectively an accessibility option to the forefront […]

Frontend Masters BlogMore Front-end Bloggers7 min read

TanStack AI’s Sandbox API

Part 3 of this intro to TanStack AI covers the Sandbox API: spinning up a remote sandbox on Vercel or Railway, running Claude Code inside it with GitHub access, and having it clone your repo, add a feature, and open a pull request.

SyntaxPodcastsAudioListen

1054: Reddit Closing it’s Doors

Wes, Scott, and CJ are back with two weeks of news: Reddit is forcing everyone to log in, r/opensource bans anything AI, and CSS-Tricks is independent again. Plus Anomaly's Hex dictation app, Mitchell Hashimoto's Rex terminal, TanStack Redact, Cloudflare's TypeScript port to…

PiccalilliMore Front-end Bloggersread at source

JavaScript for Everyone: New Game+

We have great news. After months of effort, 3 new modules, 13 completely re-worked lessons and 20 new lessons (including practical exercises), JavaScript for Everyone's Updated content is now live! Check it out! We took feedback from the community about what they thought was missing from the course and overwhelmingly, people wanted practical exercises. It makes sense: JavaScript is a complex language to learn and there's not many better ways to cement new knowledge than by actually building with it. Mat took this feedback as a challenge, formulated a plan and got to work , disappearing into a text editor and reappearing with pretty much a whole course's worth of new and updated material. It's really inspiring to me, personally, because doing anything while it felt like our industry was being decimated felt impossible. Mat's resolve to keep doing what he does well: teach people, has been unmatched and the benefactors of that effort are everyone . JavaScript for Everyone was already the canonical, high quality educational resource for learning JavaScript, but now, it's at a whole new level. So what are you waiting for? Take it for a spin and truly understand how JavaScript works! Check it out!

SitePointThe Giantsread at source

Why Transactional Emails Fail After Deployment: A Practical Debugging Guide for Developers

null Continue reading Why Transactional Emails Fail After Deployment: A Practical Debugging Guide for Developers on SitePoint .

Flavio CopesMore Front-end Bloggersread at source

AI fundamentals: a beginner's guide to language models and coding agents

How AI models and coding agents work, shown with real runs: the words, tokens, the context window, why models make things up, thinking models, RAG, choosing a model, the agent loop, permissions and checking the work.

Net NinjaYouTube ChannelsVideoWatch on YouTube

GitHub Copilot App Tutorial #10 - Making a Custom Canvas

HeyDesignerDeveloper/Designer Newsread at source

The beige era of product design

Why I make mood boards, By taking away, Critical thinking when agents do the work, WebMCP, explained with a to-do app.

David Walsh BlogTop Front-end Bloggers2 min read

STRG: S3-Compatible, AI-Native Cloud Storage (Sponsored)

Asset management is big business within the web world. The larger that our web apps grow, the larger the number of assets and their file size naturally increases. With that increase, you need to worry about increasing costs and vendor complexity! Luckily I’ve discovered a service which fixes all of those problems! Welcome to STRG: […] The post STRG: S3-Compatible, AI-Native Cloud Storage (Sponsored) appeared first on David Walsh Blog .

Auth0 BlogCompany/Startup Blogsread at source

Authentication and Authorization: What's New in .NET 11

Learn what’s new in .NET 11 regarding authentication and authorization.

Twilio BlogMulti Author Blogsread at source

21 types of emails explained (with tips & examples)

21 types of emails explained, including welcome, transactional, promotional, and newsletter emails, with tips and examples for each.

Twilio BlogMulti Author Blogsread at source

The AI race is actually a context race

Collecting data isn't enough to succeed in the AI era. You must to be able to connect it—and turn it into context that humans and AI can actually use.

Twilio BlogMulti Author Blogsread at source

Speed to a person isn't an AI failure: It may be it’s best feature

Don't trap users inside an AI container to save a few dollars. Building a friction-free "escape hatch" doesn't just improve CSAT; it fundamentally makes your AI perform better.

Jim Nielsen’s BlogMore Front-end Bloggersread at source

Addition By Subtraction

I still think saying no is important. In that vein, here’s something I shipped by removing functionality (and I think my site is better for it). For the longest time on my icon gallery sites , you could view a list of icons in four pixel dimensions: 56×56 128×128 256×256 512×512 Each of these sizes could be accessed via a control on the website. This has been true for years on my site, whether it’s the current site: Or an older version of the site: By default, I loaded the 128-pixel version of the icons. But if you wanted to see other sizes, you could. However, the more I used the site myself the more I thought, “Four options is too many”. When it comes to choice, what I really wanted was: Default Smaller Bigger (Plus three is always a good number , unless you have a reason otherwise). So I removed the big 512 option. If I want to study an icon at that size and detail, I click through to the icon’s detail page. Now there are three options for list views: 56, 128, and 256. Small (great on mobile), 128 (great by default), and big (let me see more detail). It’s simple to think about: You get a size by default. Not big enough? Go up a size. Too big? Go down a size. You don’t need to think about it anymore than that. I mean you can , but I’ve found I don’t need to. So I’ve taken that off your plate. Less cognitive overhead. Maybe one day I’ll add a slider and make it all dynamic. But for now, I like this small addition by subtraction. Reply via: Email · Mastodon · Bluesky

Stéphanie WalterMore Front-end Bloggersread at source

Pixels of the Week – November 8, 2026

This week we explore if AI could make the open web disappear, if a dialog should close on outside click (plot twist: it depends), and we tag along flights in the sky. And don’t miss the fun pigeon armchair and portraits of people who dress alike.

AdactioTop Front-end Bloggersread at source

Lunch on the beach in the November sunshine.

Adam ArgyleTop Front-end Bloggersread at source

Ponpon Mania Comic Ux

Next-gen feeling comic UX, love it. Arrow keys step through the panels while the music keeps going. Chapter 1 of Ponpon Mania: try it!

Flavio CopesMore Front-end Bloggersread at source

How to write an Agent Skill

Write an Agent Skill that loads at the right time and does one job well: SKILL.md and the spec, descriptions that trigger, scripts, authority, and real activation tests with claude -p.

AdactioTop Front-end Bloggersread at source

Stranded - Richard’s Blog

The great span : We are to Apollo 13 as Apollo 13 is to Shackleton. adactio.com/links/22830

Flavio CopesMore Front-end Bloggersread at source

Open your Mac's dev server on your phone over Tailscale

Test a local site on a real phone through the tailnet with HTTPS, no ngrok and no public URL. Builds on the Tailscale tutorial for your Mac and a server.

CodePenCompany/Startup Blogs1 min read

447: WebMCP Rules (and We Already Have It)

Chris & Shaw are chatting this week about the newfangled web technology, WebMCP. It involves new browser APIs like document.modelContext, meaning it needs to be a web standard, and that process is chugging along, but certainly not a done deal. That said, CodePen already has it conditionally implemented for browsers that support it, so you […]

Adam ArgyleTop Front-end Bloggersread at source

WWW Ep258 The Future Called Its Using CSS2

Ep #258 The Future Called. It's Using CSS2. Robbie and I sip Chicken Cock small batch bourbon (bubble gum, I swear) and talk building a mobile app with Claude , MySpace coming back, 2026 being 2006 but way more expensive, CSS infinity , Prop for That , whether to yell at you…

HTML All The ThingsPodcastsAudioListen

Are Software Engineers Going to Get Paid Less?

Is software development becoming a code factory - and what could that mean for developer salaries? Two Toronto job postings spark a conversation about pay, AI, outsourcing, and the future of tech careers. In this edition of the Web News, Matt and Mike discuss the salary figures…

Flavio CopesMore Front-end Bloggersread at source

Migrating a Ghost blog to EmDash on Cloudflare

Export Ghost, scaffold EmDash, keep every URL, move posts, tags and images with a script, publish them with their original dates, and shut the VPS down.

Flavio CopesMore Front-end Bloggersread at source

Migrating a WordPress blog to EmDash: the checklist

The built-in WordPress importer, the exporter plugin, what moves and what doesn't, how statuses and dates come across, and a checklist to run the migration from export to cutover.

Swizec TellerMore Front-end Bloggersread at source

How do we auto-approve and merge 60% of PRs?

I'm still drowning in code review. Getting to ~16% auto-approved and merged PRs helped but it's not enough. How can we do 60%?

Twilio BlogMulti Author Blogsread at source

Broadcast text messaging: What is it & how to use it

Broadcast text messaging sends one SMS to your whole list as private, individual texts. Learn how it works, use cases, examples, and compliance rules.

Flavio CopesMore Front-end Bloggersread at source

EmDash: Cloudflare's CMS for Astro, explained

What EmDash is, how it's built, what the admin and the MCP server look like, where it runs and what it costs, and where it falls short of WordPress and Ghost.

CSS-TricksThe Giantsread at source

RSS Club: CSS-Tricks Redesign Preview

Hey you wonderful RSS subscribers! We just soft-pushed a site redesign and wanted to give ya'll the first heads-up. A full write-up is coming but here are the high-level details. RSS Club: CSS-Tricks Redesign Preview originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

Flavio CopesMore Front-end Bloggersread at source

Tailscale vs Cloudflare Tunnel vs a cloud firewall

I scanned one Droplet behind ufw, a cloud firewall, Tailscale and a Cloudflare Tunnel. What each one left open, what it costs, and how fast it was.

Dave RupertTop Front-end Bloggersread at source

Pseudo-pseudo-classes for maximum interactive demos!

Have you ever wanted to display all variants of a Button next to each other in your Storybook like your designer did in Figma? But then you come to a screeching halt when you realize :hover , :active , :focus don’t work without user-interaction? Blergh. Whatever can we do? I got nerd-sniped by this problem in the ShopTalk Discord when Nils said he was trying to build a simple state machine demo for his components. A handful of immediate options came to my head: Style states using .is-hover utility classes (à la SMACSS ) Create a system of [data-state="hover"] attributes and copy over styles Build some over-the-top Playwright-based screenshot contraption Each of those approaches has trade-offs for me. I don’t want to ship extra component styles or manage duplicate global styles. And if I’m building a Playwright contraption for a CSS demo… yeesh, I should probably back away from the keyboard. When Nils mentioned he was using web components, I realized I might have an ace up my sleeve for a simple’ish solution to this problem. See the Pen Pseudo-pseudo-states Demo! by Dave Rupert ( @davatron5000 ) on CodePen . There’s a handful of Advanced Web Component Tips & Tactics happening in this demo like adoptedStyleSheets , ElementInternals , and custom state sets but the approach is pretty lightweight. I scan the custom element’s styles, clone the interactive bits, rewrite styles like :hover state to :state(hover) and add the new stylesheet inside the component. What I like about this approach compared to the other ideas I had is: Styles owned by the component - No “magic” global styles or utilities. Appended styles also owned by the component - No global conflicts. Interactive states use regular HTML/CSS - Avoid managing interactive state in JavaScript when possible. Write once, ship once - I don’t write or ship duplicate :hover and .is-hover styles to customers. Low maintenance - Beyond the initial setup, it’s automatic and I’m resilient to component style updates. Want an end-to-end walkthrough of how it all works? Please, follow me… Adopting stylesheets in your web components In web components, we’d typically author our styles in a CSS tagged template literal: const MyButtonStyles = css` /* Change the host-element itself */ :host(:hover) { background: pink; scale: 1.1; } /* Update a child element based on the host-element interaction */ :host(:hover) button { background: pink; scale: 1.1; } /* Or put the interaction on the interactive child-element */ button:hover { background: pink; scale: 1.1; } ` Then we create a new “constructed stylesheet” and populate the stylesheet with the styles we wrote. That stylesheet then attaches to our component by adding it to the Shadow Root’s array of adoptedStyleSheets . /* Create a new constructed stylesheet */ const MyButtonStyleSheet = new CSSStyleSheet() MyButtonStyleSheet.replaceSync(MyButtonStyles) class MyButton extends HTMLElement { constructor() { /* Setup and create shadowroot */ super(); this.attachShadow({ mode: "open" }) /* Adopt the constructed stylesheet */ this.shadowRoot.adoptedStyleSheets = [MyButtonStyleSheet] /* ... etc */ } } The component will now render its styles without a tag or inline tag in the template. If we put two MyButton components on the page, they’ll share the same stylesheet in memory which is a pretty neat efficiency gain for style application. adoptedStyleSheets aren’t limited to web components, but they’re still pretty niche. But the web component ecosystem’s pattern of using adoptedStyleSheets for style application will come in handy later when we want to apply our new custom states. Attach internals to unlock custom states Before we jump to the grand finale, there’s one other unique-to-web-components feature we need to talk about first: ElementInternals . In a web component class you can call attachInternals() which allows you to dip into the element’s guts and mutate the innards of your spicy div . An example of this might be setting an ARIA role: class MyButton extends HTMLElement { constructor() { super(); this._internals = this.attachInternals() this._internals.role = "button" } } customElements.define('my-button', MyButton) The accessibility inspector will report a role of button for your custom element. Setting ARIA role is a weak example because both and Element.role = "button" both work pretty seamlessly. But ElementInternals brings other ✨superpowers✨ like adding form validation behaviors that you can’t do on a normal div . One newer capability of ElementInternals is that it allows you to create your own custom pseudo-classes and apply styles using :state() . class MyScrollingElement extends HTMLElement { constructor() { super(); this._internals = this.attachInternals() } connectedCallback() { this.addEventListener('scroll', this.handleScroll) this.addEventListener('scrollend', this.handleScrollEnd) } /* Use arrow functions to avoid `this` complications */ handleScroll = (_event) => { this._internals.states.add('scrolling') } handleScrollEnd = (_event) => { this._internals.states.delete('scrolling') } } Now you can style your element when it’s scrolling using :state(scrolling) and you’re manipulating the element’s internal state, not modifying HTML in the DOM. :host { overflow-y: scroll; transition: background 0.2s; } :host(:state(scrolling)) { background: pink; } Isn’t that cool? With great power comes great spider-mans, of course, but having your own custom pseudos is a thing you can do now with web components. Mimic native pseudo-states using custom states Now that we have a loose grasp on all the pieces we need to make our demo work, the next steps are: Find all our components and loop through them Copy their interactive rules to a new constructed stylesheet Replace :hover with :state(hover) Adopt the constructed stylesheet in the component Attach internals and imperatively set the state Here’s a simplified version of what’s happening in the CodePen version. /* A bit of pseudo-code here... */ const MyButtons = document.querySelectorAll('my-button'); const sheet = new CSSStyleSheet(); MyButtons.forEach(async (button, index) => { const isDefined = await customElements.whenDefined(button.localName); // Grab the stylesheet from the first if(isDefined && index === 0) { // Get current CSS rules const cssRules = Array.from( button.shadowRoot.adoptedStyleSheets[0].cssRules ) .filter(rule => rule.cssText.includes(':hover')) .map(rule => rule.cssText.replaceAll(':hover', ':state(hover)')); // Update the stylesheet contents sheet.replaceSync(cssRules.join('')); } // Adopt the stylesheet button.shadowRoot.adoptedStyleSheets = [...button.shadowRoot.adoptedStyleSheets, sheet] // Attach internals and set the state if(button.dataset.state == 'hover') { const _internals = button._internals ?? button.attachInternals(); _internals.states.add('hover'); } }) And that’s the gist of the trick: clone the pseudo-class states and set imposter custom states. I’m hand-waving some of the more complex bits like button:hover {} needs to be rewritten to :host(:state(hover)) button {} , but again, feel free to read the code. And my demo makes a couple assumptions I know won’t scale: All elements use the same static stylesheet (e.g. it doesn’t change per component). Each only has one adoptedStyleSheet. Hard-coded to HTMLButtonElement -specific interactions. Assumes you either don’t have ElementInternals already setup or already externally expose them and you know that @public property name. Next steps might be to make this a bit more robust and support all the other platform pseudo-classes like :popover-open , :user-invalid , or :playing . An agent could probably do this, not me though. I’m tired. Shadow DOM isn’t that bad, actually. Shadow DOM often gets a bad rap even in web component circles. I fully understand the friction there. Everyone’s first test drive of Shadow DOM styling almost always ends up in flames, leading to a poor unboxing experience that’s hard to shake off. That said, I feel like this demo captures a glimpse at some of the unique ✨superpowers✨ you get when styling with Shadow DOM. When coming from a global styles world, that loss of control can feel frustrating. But in my experience, with Shadow DOM encapsulation you’re gaining predictability and precise control by keeping everything local. You could probably figure out a way to do this with global styles. It’d be more difficult with roboclass-based scoping from something like CSS Modules, but I think it’s possible. But I imagine you’d have to parse through all the global document.styleSheets and that seems like a lot of work to add a :hover state demo to a . Style encapsulation here saves a lot of work. If you got all the way here and still hate Shadow DOM, I’d love to read a post of yours about where it broke down for you. But if you use Shadow DOM on the regular, I’d love to hear why it’s great. This has been my mantra for awhile now, but I think the web component community can do more about promoting the benefits. For example, there’s only two articles about adoptedStyleSheets on CSS-Tricks which seems low. In the meantime, while I try to convince my bosses to let me blog for a living, I’ve got my free course guidebook online and you can check it out.

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Godot 4 Roguelike Course – Build a Complete Top-Down Action Game

Frontend Masters BlogMore Front-end Bloggers5 min read

true or false in CSS

CSS doesn’t have a boolean type, but it does have the true and false keywords. Register a custom property that only accepts them, flip it with :has(), and container style queries turn messy :checked selector combinations into readable conditions.

Net NinjaYouTube ChannelsVideoWatch on YouTube

GitHub Copilot App Tutorial #9 - Using the Rubber Duck Agent

QuirksBlogTop Front-end Bloggersread at source

The Valley bubble

I expected something to happen around the AI hype after the US elections. I didn’t expect it to happen so soon . Too early to tell yaddah yaddah, and the hype could very well continue for another few months, but did any AI-related stock ever tumble before now? Silicon Valley exists in its own reality bubble. Hell, the entire US tech scene inhabits a bubble whose main feature is relentless self-flagellation. Apparently they’re all Guilty and will all be Punished. (Then again, the US is fundamentally a Calvinist country.) Sanity prevails outside the US. Sometimes. For now I’ll stick to my idea : the Valley is creating something with the appeal of a 19th-century factory, complete with oppressed and estranged workers, without delivering the sole benefit of such factories: cheaper IT and other services. They want to get rid of the middle classes whose salaries they have to pay so badly that they forgot to create an appealing product. The Valley doesn’t understand how fed up normal people are with AI. This is the first time ever a technological advance is so cordially disliked, and the Valley is not equipped to detect that. It has no experience with being disliked by normal people. Also, so far many of the Valley’s consumer tech innovations were free . AI isn’t free, or even cheap, as we’ll see in the coming months, once credit dries up. The Valley’s position will be damaged permanently, and tech will lose its centre of gravity, its global Schwerpunkt . I don’t think there will be a replacement. I think we’re moving to a multi-hub world, and I think that’s a good development. Sure, inertia will keep the Valley important for decades to come, but it’s lost its natural dominance of the hearts and minds of the world. Permanently. None of this is a judgement on AI itself. I refuse to do anything about it until its true costs are known, after the hundreds of billions per year (month?) of free money from clueless investors dry up. All the while I acknowledge that there is something there that will change programming — just not as radically as the US-based doomsayers think. AI can copy, it cannot innovate.

Smashing MagazineThe Giants4 min read

A New Community For In-House UX People

We’ve been working on something new! We’ve teamed up for a **new small community** for people doing UX-inside organizations — with weekly calls and a shared library of the business cases, templates, and research plans that have actually worked for other folks. [Jump to details](https://uxinsiders.boagworld.com/).

PiccalilliMore Front-end Bloggersread at source

The Index: Issue #205

Poznote In our endless search for a Notion replacement, this one is showing real promise. Fixing illustrations on a dark background with CSS The drop-shadow property is so overlooked considering how useful it is. This is a great use of it! Death comes for XSLT It's so frustrating that browsers are ignoring the one main rule: don't break the web . How to quit Spotify and improve your life in the process This one weird trick to improve your life. (We recommend TIDAL or Qobuz) Introducing adaptive dark mode It's interesting to see this concept back — this time from Safari — considering how much of a dreadful job Google did half a decade ago in Chrome. We'll see how it goes! CSS nesting: use with caution 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 When anyone can make anything, we can make you stand out. AI technologies have given anyone the ability to bring their ideas to life, but to produce a high quality service that actually works for the people it needs to work for requires experience, specialist skills and creativity. We’ve got heaps of all of that here at Set Studio and we've got availability starting in 2027, so check us out and see what we're about. Check out our work

Chris HawkesYouTube ChannelsVideoWatch on YouTube

I Made a Fake 1980s AI Commercial (Step by Step)

ESLint BlogLibraries, Frameworks, etc.2 min read

ESLint now officially supports linting of shell scripts

Back in July of 2024 we announced our plan to make ESLint a more general-purpose linter capable of linting any language. Since then, we’ve added official support for JSON, Markdown, and CSS. Today, we’re happy to add shell scripts to that list with the introduction of the…

Hidde's blogMore Front-end Bloggers4 min read

Reflections from TPAC 2026

TPAC is W3C's yearly work week. A large part of the Working Groups and all sorts of committees get together to collaborate in person (mostly hybrid). This post has some things I got out of it this year. Some of my week had been slightly overbooked, as is the faith of most TPAC…

Twilio BlogMulti Author Blogsread at source

How to build an AI agent that remembers returning customers

Build an AI agent that recognizes returning customers, recalls past conversations, and saves new facts, with Twilio Conversation Memory.

Twilio BlogMulti Author Blogsread at source

How much does call center outsourcing cost in 2027?

How much does it cost to outsource a call center in 2027? Compare inbound and outbound rates, in-house costs, and AI agents to find the right fit.

AdactioTop Front-end Bloggersread at source

Thursday session

Mux BlogCompany/Startup Blogs11 min read

How I built a video sharing site with Claude Code and Mux after years away from coding

See how Eric built ScubaTube with Claude Code, using Video.js v10 for a dive data overlay and TV mode, Mux Robots for chapters, and Mux Data for engagement.

Microsoft Edge BlogBrowsers, engines, etc.3 min read

Discover more of what matters, every time you open a new tab in Microsoft Edge

A new browser tab is full of possibilities. It can be the start of something you set out to do—or a chance to discover something you didn't know. As the amount of content online has grown, Edge users have told us they want more help cutting through The post Discover more of what matters, every time you open a new tab in Microsoft Edge appeared first on Microsoft Edge Blog .

Adam ArgyleTop Front-end Bloggers2 min read

Bye Deno, Hello Cloudflare

and wassup Astro

Web Tools WeeklyMulti Author Blogsread at source

Web Tools Weekly Issue #694

React Tools, AI Tools, Text Editors

CSS-TricksThe Giantsread at source

Taming Typography: Building a Modern CSS Reset

Stu created tidy-typography.css: a style reset for taming typography with modern CSS features for everything from fluid typography and vertical rhythm, to hyphens and variable fonts. Taming Typography: Building a Modern CSS Reset originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

Level AccessCompany/Startup Blogs10 min read

A Guide to PDF Accessibility

PDF accessibility means people with disabilities can read, navigate, and use a PDF, including with a screen reader, keyboard, or magnification. Among other The post A Guide to PDF Accessibility appeared first on Level Access .

DigitalOcean BlogMulti Author Blogs4 min read

Introducing DigitalOcean Cuttlefish: Get more done with agents on the go

Your agent has been refactoring for two hours. It’s deep in the codebase, making real progress, and then it stops: “Can I run this migration?” Nothing happens until you answer. And you’re not at your desk. You’re in line at the grocery store, or waiting at school pickup.…

Smashing MagazineThe Giants20 min read

Making Immersive LLM Chat Experiences More Accessible

As LLM chat patterns become more widespread, making them accessible is essential to ensuring everyone can access the information, tools, and opportunities they offer. Drawing on his work improving these interfaces, Eric Bailey shares practical ways to make chat-based experiences on the web more accessible and usable for people who rely on assistive technology.

W3C BlogBrowsers, engines, etc.6 min read

W3C Newsletter - October 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 such as TPAC 2026, AI @ W3C, progress on Identity and Credentials, further improvements to W3C infrastructure for standardization and more.

Ahmad ShadeedMore Front-end Bloggersread at source

Beyond the viewport: Introducing Site Seeing

Brad FrostTop Front-end Bloggersread at source

In Your Face - Meeting reminder app for Mac, Windows, iPhone, and iPad | In Your Face

In Your Face is one of my favorite apps for making sure my ADHD brain shows up to meetings and events on time.

Twilio BlogMulti Author Blogsread at source

Why We Expanded our Internship Program this Year

Discover why Twilio expanded our intern program in 2026, highlighting impactful intern projects, in-person onboarding, and early-career talent growth.

Twilio BlogMulti Author Blogsread at source

How to audit what your AI agent knows about a customer

Learn how to audit what your AI agent stored about a customer, trace each memory to its source, and show agents why a suggestion was made.

Twilio BlogMulti Author Blogsread at source

SMTP relay service: What is SMTP relay & how does it work?

An SMTP relay service sends your email through a provider’s servers. Learn how SMTP relay works, how to choose a service, and how to fix issues.

Twilio BlogMulti Author Blogsread at source

How brands start trusted conversations on Apple Messages for Business

We explained in our previous blog, how the grey bubble, Apple Messages for Business (AMB), gives brands a verified presence in the thread and an experience where iOS consumers can pay, book, or get help without leaving the native Messages app. This post covers what brands ask next: how do customers get there in the first place?

AdactioTop Front-end Bloggersread at source

Wednesday session

Jim Nielsen’s BlogMore Front-end Bloggersread at source

“It Gives Great Demo”

There’s that famous video of Steve Jobs explaining why they don’t didn’t make touchscreen MacBooks: We thought about [a touch screen MacBook] years ago. We’ve done tons of user testing on this and it turns out it doesn’t work! Touch surfaces don’t want to be vertical. It gives great demo. But after a short period of time, you start to fatigue. And after an extended period of time, your arm wants to fall off. It doesn’t work. It’s ergonomically terrible. Touch surfaces want to be horizontal […] that’s why we’ve perfected our multitouch trackpads over the years. I’m not going to weigh in on the new MacBooks. But what I find specifically intriguing in this video — and broadly relevant — is that phrase: “It gives great demo.” Damn, that is a great line for so much of technology. “It gives great demo.” Something that looks amazing when it’s presented to you, but in practical day-to-day use you discover, “Actually this is kinda terrible.” Demo is everything nowadays. Whatever can garner attention. Who cares if it works in practice, does it give great demo? Because demo time is sale time. The purpose of a demo is to get your attention. To make you think about the product and that it exists. But a great product often makes you forget it exists at all. It seems like a paradox: we’re attracted to what stands out, but we become enamored with what disappears. Of course, this doesn’t just apply to products. People can give great demo, too. You can make a whole career out of just giving great demo. Reply via: Email · Mastodon · Bluesky

CSS-TricksThe Giantsread at source

Smashing AI Conference

The AI 2027 Conference is a live online day for designers and engineers on where AI stands today, what to expect in 2027, and where teams are getting it right. Smashing AI Conference originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

DequeMulti Author Blogs7 min read

How to choose the right VPAT approach for your organization (and whether you should use AI to complete your ACR!)

In this post, I’m going to discuss why accuracy matters for digital accessibility in an era of evolving global standards and increased regulatory scrutiny. I’ll explain where and how VPATs and ACRs fit into your accessibility strategies, and what you need to know before making any decisions about AI use. The post How to choose the right VPAT approach for your organization (and whether you should use AI to complete your ACR!) appeared first on Deque .

Frontend Masters BlogMore Front-end Bloggers12 min read

Data Access Testing With @testcontainers

Testing data access code has always been awkward: unit tests want to be fast and isolated, and a real database is neither. With Docker and @testcontainers you can spin up a throwaway Postgres inside your Vitest suite, push your Drizzle schema into it, and verify that your real insert and query code round-trips correctly.

CSS WizardryTop Front-end Bloggersread at source

Web-Perf Wednesday 016 – Lighthouse 13.6 Can Lift Scores Without a Faster Site

Lighthouse 13.6 changes simulated FCP and LCP, so PageSpeed Insights scores can improve even when the page itself has not changed.

SyntaxPodcastsAudioListen

1053: What’s in Our Home Lab

Scott and CJ tour their homelabs, from a fully 3D printed server rack to a custom OPNsense firewall load balancing two ISPs. They dig into Proxmox, Tailscale, Caddy, Synology vs. DIY ZFS storage, Home Assistant, Jellyfin, Immich, Kiwix, and coding over the network with T3 Code…

AdactioTop Front-end Bloggersread at source

честитке, Serbia Parabéns, Brazil Congratulations, USA

Net NinjaYouTube ChannelsVideoWatch on YouTube

GitHub Copilot App Tutorial #8 - Using Plan Mode

Chris HawkesYouTube ChannelsVideoWatch on YouTube

I Tracked 125,000 Tech Jobs. Nearly 25% Are Ghost Jobs

Frontend FocusMulti Author Blogsread at source

Safari will 'dark mode' your site for you

🚀 Frontend Focus #​765 — November 4, 2026 | Read on the web Safari Introduces Adaptive Dark Mode — A new (opt-in) feature added to the Safari 27.3 beta that automatically adapts light sites to dark ones. It's here because although around 40% of pages are loaded by users using dark mode, only 10% of page loads directly support it. WebKit Agents Didn’t Clear Your Plate. They Dumped Reviews on It — Your agents write PRs in minutes, then eat your afternoon in review. When did ‘saving time’ start to mean babysitting agents’ work? Meticulous verifies every UI change, with no developer effort. Devs at Dropbox & ElevenLabs have their afternoons back. You can too. Meticulous sponsor Modern CSS Might Make Your Front-End More Complex — Swapping JavaScript for container queries and :has() can cut your code down but introduce bugs elsewhere in your layout. Gabriel shares four examples, including why container-type can collapse flex items to zero width. Gabriel Shoyombo 📊 Design Systems Should Be Fast by Default — Den benchmarks dropdowns and checkbox lists across ten popular design systems, diagnoses the slowdowns, and shares tests to catch regressions. Den Odell ⚡️ IN BRIEF 🤚 The CSSWG has resolved that form controls get cursor: pointer by default under appearance: base . Cory LaViska explains the data and the objections. 🌐 Chrome 158 is in beta ( stable due November 17 ) with the install > element, media pseudo-classes like :playing and :paused , ::highlight(*) , and XSLT is on its way out . 🆕 Rachel Andrew shares an update on changes to the web platform in October, including scroll-driven animations gaining support across all major engines. 🧰 Chrome DevTools has added a visual position-area editor in Elements, Web Install manifest diagnostics, and MCP server improvements. 🤖 Google will support a shared AI training control in robots.txt , based on IETF AIPREF work, letting sites set a preference once for multiple AI providers. 📙 Articles, Opinions & Tutorials Native Masonry Layouts with CSS Grid Lanes — A practical guide to native masonry layouts with CSS Grid Lanes, covering placement, fit-tolerance, horizontal layouts, subgrid and source-order accessibility. It's supported in only Safari right now, but other engines are working on it. Saleh Mubashar Making Features Generic in CSS — Rachel takes a look at the new flow-start and flow-end alignment keywords, and touches upon why the CSSWG often renames things. Rachel Andrew Embeddable Forms With Bookings, Live Pricing, and Payments Built In — Build it visually, paste two lines into any site. Unlimited submissions on every plan with spam protection. From €6/mo. CraftForms sponsor Quirks and Vintage Uses of CSS Table Display — Looks back at display: table and its related values, sharing what each does and the pre-flexbox tricks they enabled — while of course noting that you probably shouldn't reach for them today. A neat history lesson. Declan Chidlow 🧡 If You Love a Website, Back It Up — Following one of their favorite websites disappearing, a web-archiving practitioner explains how to go about preserving sites for yourself. A practical tour of browser-based capture techniques, automated crawling, and embedding the results. Misty De Meo Spreading Liquid with Three.js — A technical walkthrough of a neat liquid-spreading effect (built for a cosmetics campaign). It shows off using a height map for thickness, a velocity map for movement, and fragment shaders to render the result. There's a satisfying demo to play with, too. MISAKI NAKANO How a Split Webfont Slowed Down Text Layout — A font splitter put i and j in a different file from the rest of the alphabet, forcing extra text-shaping work within words (causing INP to suffer). Here's why, plus a script to check your own font CSS. Ivan Kristianto Why Is the Analytics Tab the Slowest Page in Your App? — Usually it's one query scanning months of rows. TimescaleDB extends Postgres to make it fast. Get $1000 credit . Tiger Data (creators of TimescaleDB) sponsor Multi-Column Different-Speed Scrolling — There are some fun scrolling experiments here thanks to scroll-driven animations. Chris Coyier Useful @custom-media Presets Daniel Schwarz ⚠️ Third-Party Scripts Last week we shared a PSA about forgotten script tags and how what they load can be hijacked. Days later, a similar attack prominently appeared in the wild. On October 29, a performance monitoring script on Polymarket was swapped for a wallet drainer . The URL of the script didn't change, just the payload, so the CSP let it through, but Scott Helme's write-up explains what would have stopped it. Whatever you load from third parties, it's worth auditing for security, privacy, and performance reasons. Some steps worth taking: Pin scripts with Subresource Integrity where the vendor's file is static, and use the new Integrity-Policy-Report-Only header to find any you've missed. Self-host third-party resources where you can. Request Metrics explains how it protects its own agent and why it's safe to self-host. Load third-party JavaScript efficiently , or use Partytown to move it off the main thread entirely. Audit what your page is loading with Request Map and Third Party Web . Lastly, if you provide third-party scripts to users, check out Jack Ellis's writeup of how Fathom Analytics keeps their analytics script secure for some tips. 🧰 Tools, Code & Resources sidebearing-trim: Align Text by 'Visible Ink', Not by Glyph Boxes — You can try it out interactively on the page and there's a write-up of why you should care here . One of those things that designers, in particular, are likely to notice! 😅 GitHub repo . Pekka Lammi 🎨 ColorSym: Symbols to Identify Colors 'When Color Alone Isn't Enough' — A way to use symbols to supplement colors, aiding with accessibility. The symbols are 'intelligent' where, for example, the orange symbol is a combo of those for red and yellow. Available as SVGs or a custom font. Chris Eastridge & Luis Francisco Astrotypes: Curated Font Pairings for Astro — Search and preview font pairings sourced from Google Fonts, Bunny CDN, and Fontshare live on the page. Each pair has a copy command for various tools (npm, Yarn, Bun, etc). Michael Andreuzza File Viewer: A Browser-Native Office, PDF, CAD, and Archive Viewer for Internal Web Apps — Provides read-only views for Office, PDF/OFD, CAD, archives, email and more, with integrations for React, Vue, and Svelte. There's also a live demo to try. Flyfish Dev 📰 Classifieds Know React? Then you and your coding agent can ship iOS and Android apps. Expo runs the builds and CI/CD and gets you into the app stores. 🧪 In-browser testing inside your dev server. TWD adds a test sidebar next to your app, and your AI agent runs it too. Free and MIT . 🔤 ...and finally Introducing Geist Serif — Vercel's Geist family gains a high-contrast display serif for headlines, built on the same metrics as Geist Sans so the two mix cleanly. Geist Sans , Geist Mono and Geist Pixel are on Google Fonts already; Serif isn't yet, but will be in due course. Vercel

Twilio BlogMulti Author Blogsread at source

Best Practices for Conversation Relay Provider Failover

Learn how to implement application-level failover strategies for Twilio Conversation Relay to ensure high availability and prevent Voice AI agent downtime.

Twilio BlogMulti Author Blogsread at source

Build vs. buy: How to decide for your orchestration layer

One CIO built his own orchestration layer. Another consolidated onto a platform. A third moved off homegrown. And...all three were right.

Twilio BlogMulti Author Blogsread at source

Contact center analytics: 6 metrics for AI and human agents

Learn which metrics matter when AI and human agents share the queue, from abandonment to handle time, and how to measure each with Twilio.

Twilio BlogMulti Author Blogsread at source

What is StartTLS?

StartTLS is the SMTP command that upgrades an email connection to encrypted TLS. Learn how it works, which port to use, and how to fix common errors.

Frontend Masters BlogMore Front-end Bloggers5 min read

Multi-Column Different-Speed Scrolling

Scroll-Driven Animations can step in and make scrolling feel different even if you aren't actually interfering with the actual page scroll.

AdactioTop Front-end Bloggersread at source

Tuesday session

Mux BlogCompany/Startup Blogs22 min read

Agent experience and agent-led growth: a chat with Caelean Barnes

Gauge CEO Caelean Barnes joins Dev Talks to explain how coding agents pick developer tools, why docs sway their choices, and how to test what agents do.

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

November 2026 Security Release

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

Engineering at MetaCompany/Startup Blogs10 min read

F3 Lightning: How Meta Accelerates Ads ML Features to Production at Scale

Facebook Feature Framework (F3) is Meta’s framework for authoring, compiling, and serving the machine learning features underlying ads ranking models, where a single request can require more than 20,000 features. We first presented F3 at AI @ Scale 2020. F3 reduced execution computational costs by compiling all features into a single merged graph, but that [...] Read More... The post F3 Lightning: How Meta Accelerates Ads ML Features to Production at Scale appeared first on Engineering at Meta .

Level AccessCompany/Startup Blogs5 min read

AI Is Building Faster. Can Accessibility Keep Up?

To keep accessibility moving at AI speed, catch issues in pull requests, fix them while context is fresh, and pair automation with expert The post AI Is Building Faster. Can Accessibility Keep Up? appeared first on Level Access .

David BushellMore Front-end Bloggers2 min read

Death comes for XSLT

Last halloween, Google decided to kill XSLT. That was not a unilateral decision mind you, Google said “jump” and other browser vendors said “how high?” In response, I published my Intent to Deprecate and Remove Google Chrome. A performative declaration of course, I don’t install spyware. […]

CSS-TricksThe Giantsread at source

Re-Implementing :nth-child() With Modern CSS

Combining :nth-child with style queries and sibling-index() to conditionally select child elements. Re-Implementing :nth-child() With Modern CSS originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

Dave RupertTop Front-end Bloggersread at source

Write mo'

I decided not to do #NaNoWriMo this year. Part of that is because I’ve never done it. Never even attempted it. Don’t even want to. Writing a novel is a life goal of mine, but cramming it all into one month isn’t for me. November is impossibly busy. But I do think it would be cool to have a big excuse for avoiding all those obligations. “Dave, come to this holiday party!” “Sorry, I’m writing a novel.” “Dave, come work at the school’s fall carnival!” “Sorry, I’m writing a novel.” “Dave, pay attention to your kids!” “Sorry, I’m writing a novel.” See, that level of self-preservation and pre-emptive boxing out of other responsibilities would be so cool. Like cigarettes cool. Despite not having a novel excuse, I am feeling compelled to wri’ mo’ this month. Whether it’s autumnal ghosts or pumpkin spices, there’s a draw pulling me back to my text editor. A vapor of creativity stolen by corporate dementors and their infernal machines, seeping back into my lifeless shell. Last week I powered through a handful of short stories by Arthur C. Clarke. Vintage sci-fi inspires me. Partly because the experimental short form factor containing a single “ What If? ” thought experiment seems achievable and because most of the stories are complete shit. In a modern world of blockbuster movie adaptations and eight volume octologies, vintage sci-fi sets the bar real low. One story I came across was The Nine Billion Names of God . The audiobook has a sick-ass cover of a skeleton in a cracked space helmet on a dying planet with a giant sun rising in the distance. You can pause this and get through it in ten minutes. Nothing in the story relates to that cover. Rather, the story is about two Western men that work for a fancy computer company that makes the Mark V . They’re hired by a group of Tibetan monks to help them write a program that will procedurally generate the nine billion names of God which they believe will bring about the end of the world. The Mark V will shorten the task of writing down all the possible names of God from 15,000 years of manual writing down to 100 days! Incredible productivity gains! AAABBBAAA AAABBBABA AAABBBACA AAABBBADA AAABBBAEA AAABBBAFA AAABBBAGA AAABBBAHA AAABBBAIA AAABBBAJA AAABBBAAB AAABBBABB AAABBBACB AAABBBADB AAABBBAEB AAABBBAFB AAABBBAGB AAABBBAHB AAABBBAIB AAABBBAJB AAABBBAAC AAABBBABC AAABBBACC AAABBBADC AAABBBAEC AAABBBAFC AAABBBAGC AAABBBAHC AAABBBAIC AAABBBAJC AAABBBAAD AAABBBABD AAABBBACD AAABBBADD AAABBBAED AAABBBAFD AAABBBAGD AAABBBAHD AAABBBAID AAABBBAJD AAABBBAAE AAABBBABE AAABBBACE AAABBBADE AAABBBAEE AAABBBAFE AAABBBAGE AAABBBAHE AAABBBAIE AAABBBAJE AAABBBAAF AAABBBABF AAABBBACF AAABBBADF AAABBBAEF AAABBBAFF AAABBBAGF AAABBBAHF AAABBBAIF AAABBBAJF AAABBBAAG AAABBBABG AAABBBACG AAABBBADG AAABBBAEG AAABBBAFG AAABBBAGG AAABBBAHG AAABBBAIG AAABBBAJG ... ... ... ... ... ... ... ... ... ... THIS STORY HAS NO MODERN DAY PARALLELS. An altruistic sex cult from a specific locale using a mountain of money to hasten the end of the world with their enormous computers that endlessly generate combinations of nonsense words that they believe will summon God… well, that would be a work of cheesy science fiction, not real life. The Nine Billion Names of God flipped a switch in me and has renewed my courage to write more. As someone with ideas about ideas burning holes in my head, it’d be worthwhile to offload some of my cognitive surplus. I don’t have any solid plans, words-per-day goals, charts, graphs, storyboards, outlines, or some Benjamin Franklin life hack schedule to make this happen. Instead I have an Obsidian vault with a hundred unsorted drafts. I don’t want to commit myself to publishing every day, but my goal is to get up and spend thirty minutes to an hour each day writing something . I want to carve out time before work, before doing my puzzles, before doom-scrolling the news. I want to use those premium dopamine reserves –the flavorful floating creme of consciousness that comes from a good night’s sleep, not the metallic bitter dregs distilled from caffeine and stimulants– I want to savor and use that precious natural dopamine on writing. My promise to you, dear reader, is that I will write more this month. I will write no less than nine billion stories and/or blog posts by the end of November. And upon completing my works, I can shed this mortal coil and leave this forsaken world.

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Vector Databases Full Course for Beginners – Embeddings, Similarity Search & ChromaDB

Smashing MagazineThe Giants12 min read

Modern CSS Might Make Your Front-End More Complex

Replacing JavaScript with a modern CSS feature can simplify a piece of code while making the wider application harder to reason about. Gabriel Shoyombo explores what happens when logic is split between CSS and JavaScript, sharing practical guidance to help you keep complexity in check during migration.

AdactioTop Front-end Bloggersread at source

Bad AI doesn’t smell | Clearleft

The best way to avoid AI mistakes is to run research the old-fashioned way; get out there and run research in the field and complete your own analysis of the findings. It may take a little longer, but truly valuable research is worth the effort. adactio.com/links/22825

Net NinjaYouTube ChannelsVideoWatch on YouTube

GitHub Copilot App Tutorial #7 - MCP Servers & Skills

HTML All The ThingsPodcastsAudioListen

What Does Your Small Business Website Actually Need?

Does your small business website really need a slider, testimonials, a blog, pricing tables, and every other feature you've seen on successful websites? Not necessarily. Websites are a lot like LEGO. They're made up of individual building blocks that can be arranged in countless…

Adam ArgyleTop Front-end Bloggersread at source

WWW Ep257 Local Engineer Runs Out Of Tokens

Ep #257 Local Engineer Runs Out of Tokens, Discovers "Programming" Robbie and I sip a rye and talk token budgets, Copilot getting yanked mid-workflow, SDD with worktrees, whether frameworks still matter, slop as a choice, Jeff the cliff-diving lawnmower, and Amp as the…

Auth0 BlogCompany/Startup Blogsread at source

AI ambitions are blocked by identity debt

Japanese brands’ identity infrastructure is stalling rollout of agentic systems

Auth0 BlogCompany/Startup Blogsread at source

Compliant Infrastructure, Frustrating CX

Has a focus on regulatory compliance by ANZ brands overshadowed delivery of convenient, low-friction customer experiences?

Auth0 BlogCompany/Startup Blogsread at source

Consumers are Ready for AI. Are Companies?

Brands are in a high-stakes race to introduce AI-assisted experiences that are useful, convenient, and trustworthy—identity can be an enabler or a hindrance.

Auth0 BlogCompany/Startup Blogsread at source

Moving Quickly Without Breaking Things

As AI agents evolve from answering questions to taking action, customer identity enables the trust and transparency Europe’s consumers and regulators demand.

Auth0 BlogCompany/Startup Blogsread at source

Secure and Convenient is the Real Killer App

As customers seek out experiences that are both convenient and secure, telecom, media, and tech companies must modernize their identity platforms.

Auth0 BlogCompany/Startup Blogsread at source

Trust Puts Customer Identity in the Spotlight

As customers seek out experiences that are both convenient and secure, financial services organizations must adopt modern, external identity platforms.

Auth0 BlogCompany/Startup Blogsread at source

Who Will Consumers Trust to Act, Shop, and Pay on Their Behalf?

As AI agents evolve from answering questions to taking action, retailers need to deliver seamless experiences that are both convenient and secure.

CSS Articles by Temani AfifMore Front-end Bloggersread at source

Re-Implementing :nth-child() With Modern CSS

Re-Implementing :nth-child() With Modern CSS Read the full article online

JavaScript WeeklyMulti Author Blogsread at source

What Claude spends building with 12 JavaScript stacks

#​809 — November 3, 2026 Read on the Web JavaScript Weekly The AI Cost of JavaScript Frameworks Nolan Lawson had Claude build the same app five times in each of twelve JS stacks to test common "X is better for agents" claims. Costs varied significantly between runs, and Gautam Parab found that the observed cost ranges overlapped or touched for most pairs of frameworks. But a clearer difference was in the median amount of JavaScript sent to browsers: 0KB for Astro, 18K for Hono+htmx, 36K for SvelteKit, and 115–142K for React Router, TanStack Start and Next.js. If you've gone "hands-free", Nolan asks, why stick to a particular stack you chose when you wrote all the code? His benchmark is on GitHub to try for yourself. Nolan Lawson Run AI Coding Models on Your Own Machine — Local models are now good enough for everyday coding. Learn to run them on your own Mac or GPU, wire them into your editor and terminal agents, and keep your code private with no per-token bill. Master.dev sponsor Why Is This Fingerprinting Script 'Creating Bioweapons'? — A crawl of sites to collect canvas fingerprinting examples (which you can see, visually, at fingerprint.garden ) found an anti-analysis technique where JavaScript identifiers were named after… taboo topics, with a prompt hidden in invisible Unicode, all designed to make LLMs refuse to work on the code! Veritas 💡 Canvas fingerprinting is a technique that uses quirks of how different clients render canvas elements, in order to distinguish browser environments . IN BRIEF: 😄 Bartosz shares a creative way to generate strings and run code without parentheses or quotes. Good old JavaScript fun! 📊 GitHub's Octoverse 2026 report has TypeScript as the most used language on GitHub by contributors (with JS at third), and ~44% of merged TypeScript PRs showing AI involvement. Plus a lot more besides. GitHub Actions will block pull_request_target by default in public repos from December 2, unless an event policy explicitly allows it, with brownouts on November 9 & 16. Cloudflare Workers now supports the Temporal API natively behind a temporal compatibility flag. It'll be available by default from December 1. RELEASES: Node.js v27.0 (Alpha) and v26.13.0 (LTS) – Node 26 is now the 'Lithium' LTS line, and 27 is the first ever Node 'alpha'. Under Node's new release process , every line spends six months in alpha before going Current . Vitest 5.1 – A new --since-last-run flag reruns only tests affected by your edits, plus there's an interactive snapshot review feature. Rspack 2.3 – The Rust-based webpack alternative adopts SWC Next and its rewritten parser. The team reports 5-20% faster builds and less peak memory use. Leaflet 2.0 Beta 1 – The mapping library's first major in a decade goes tree-shakeable, ships TypeScript types, and drops its default export. Effect 4.1 , pnpm 12.17 , ESLint 10.14.0 , Nuxt DevTools v4 📖 Articles and Videos " No, npm, 'estee' is not a typo of 'testem' " — Shane tried to publish a CLI called estee and hit npm's typosquatting filter, which (as best as we can tell) rejects names within a small Levenshtein distance of popular packages' names. Shane Friedman Shrinking clarity.js : When Cleaner Code Gzips Worse — Microsoft let an agent run 50+ size experiments on its analytics script. A big win came from dropping import * namespace objects, while good-practice refactors like extracting helpers actually made the gzipped output bigger . Manu Nair (Microsoft) Workshop: How to Implement Session Replay — Filters, custom tags, and sampling settings for finding the sessions that matter. Nov 5, 10am PT. Sentry sponsor 'Nothing Installs at Our Company Until It's a Week Old' — Many recent package hijacks were caught within hours, so Bruno's company now makes new releases wait a week. He explains what this approach broke, what cooldowns don't stop, and settings for popular package managers. Bruno Jurković Timing Ten Design Systems, Then Fixing the Slow Ones — Den timed ten design systems (MUI, Ant Design, and Ionic among them) opening a 249-option select and ticking 100 checkboxes, then profiled the slow ones to find out why. Den Odell Using Bun? Dependabot Can't See Most of Your Dependencies — GitHub's dependency graph doesn't parse bun.lock , so Dependabot alerts cover only direct dependencies. Nicolas has some tips for improving matters. Nicolas Charpentier (Shortcut) 📄 How Hard Is It to Check for Whitespace? – Why Java, Python and JavaScript disagree on what counts as whitespace. Sergey Tselovalnikov 📄 A Proposal: How to Hire Junior Engineers in the Age of AI – The npm co-founder thinks traditional coding interviews are dead. Laurie Voss 📄 How to Make postMessage Type-Safe in Under 350 Bytes Pavel Grinchenko (Evil Martians) 📄 The Web Can't Afford a JavaScript Runtime Monoculture Kate Holterhoff (RedMonk) 🛠 Code & Tools Handwired: Compile Regular JavaScript into a Neural Net — A new mind-bender from Pretext 's creator: a compiler that turns JavaScript into an exact network of ReLUs and matrix multiplies that run on the GPU. Demos include a 130-layer 'mini desktop' and a WebGPU search over 100K JSON documents. Cheng Lou Build Smarter JavaScript Applications With Live Search Data — Add search, shopping, maps, news, trends, flights and hotels results with a single developer-friendly JavaScript SDK. SerpApi sponsor 🌐 x18n: Lint and Maintain i18n Files for Any Framework — Anthony Fu's successor to i18n-ally scans locale files and translation calls and reports missing, unused and broken keys (like how tsc --noEmit reports type errors). Anthony Fu djs: A New 'Suspend Anywhere' JavaScript Engine — Armin (of Flask fame) built an engine to run scripts in WebAssembly that can snapshot the VM's state and resume elsewhere, even mid- await . Armin Ronacher webframe: Run a Web Page Like a Command-Line Program — Point it at a URL or HTML file and it runs the page in a hidden system web view, piping console.log() to stdout and exceptions to stderr. No bundled browser or Playwright needed. Jeff Lindsay phoria2: A Small WebGL 2 Library for 3D Charts — A dependency-free 3D library aimed at dashboards and product viewers, with an API you can 'learn in an afternoon'. Plenty of live demos on the page. Kevin Roast Shiki 4.6 – Powerful code syntax highlighter, now with faster decoration handling and compressed Oniguruma WASM binary. Preact 11.1 – A new preact/compat/compiler-runtime entry point lets code compiled by React Compiler run on Preact too. Postgres.js 4.0 – The popular Postgres client for Node, Bun and Cloudflare Workers gets a rewrite and goes ESM-only. 📰 Classifieds 💸 Every OTP you send costs money. Fraudsters trigger them by the thousands. Fingerprint recognizes the device before you text. Learn how . Your coding agent can write the app. Expo is the agentic mobile infrastructure that takes it from a repo to the App Store. CodeAF fixed 2x OpenCode's issues and nearly 4x Claude Code's on the same open model, at up to 4.8x less per fix. Open source, Apache 2.0. 📢 Elsewhere in the ecosystem Chrome 157 is due today with the headline feature being HTML-in-Canvas for drawing live, interactive DOM elements into 2D, WebGL and WebGPU canvases. This feature has numerous striking applications . ☕ CheerpJ 5.0 brings Java 21 and 25 to the browser via WebAssembly, ships the full JDK so you can compile Java in a tab, and previews a new WasmGC-based engine the team hopes will run Minecraft and IntelliJ one day. 🤖 LLM-whisperer Simon Willison looks at the world of browser games being built with coding agents , and argues October was the point where agents got good enough to ship playable games. 🕹️ Talking of games… GitHub's game jam Game Off is back for its 14th year with the theme 'SHIFT'. Entries are due on itch.io by December 1.

Twilio BlogMulti Author Blogsread at source

What is agent assist? How real-time AI helps human agents

Agent assist uses AI to suggest replies, surface answers, and automate wrap-up during live customer conversations. See how it works with Twilio Flex.

Jens Oliver MeiertTop Front-end Bloggersread at source

How to Upgrade From HTML Minifier 4 to 5

A checklist to work through the breaking changes when updating from HTML Minifier 4.0.0, released in 2019.

Jens Oliver MeiertTop Front-end Bloggersread at source

How to Switch From HTML Minifier Next 9 to HTML Minifier 5

A checklist to move from HTML Minifier Next to HTML Minifier—now maintained again—, which is mostly a matter of renaming.

Microsoft Edge BlogBrowsers, engines, etc.3 min read

Client-side threat detection: how Scareware blocker uncovered malicious notification abuse

Website notifications were designed to help us stay informed. They can alert you to a new message, remind you of an upcoming event, or share an important update from a service you trust. But scammers are turning this useful browser feature into a pe The post Client-side threat detection: how Scareware blocker uncovered malicious notification abuse appeared first on Microsoft Edge Blog .

Level AccessCompany/Startup Blogs6 min read

Why Accessibility Belongs in Your CI/CD Pipeline and IDE

By building accessibility into your CI/CD pipeline and IDE, you can find and fix issues before code merges or ships. Level CI with The post Why Accessibility Belongs in Your CI/CD Pipeline and IDE appeared first on Level Access .

Level AccessCompany/Startup Blogs15 min read

Can AI Make a Website WCAG Conformant? A Comprehensive Guide

AI can’t make a website WCAG conformant alone. Properly skilled AI can find, fix, and prevent many violations, but validating conformance requires human The post Can AI Make a Website WCAG Conformant? A Comprehensive Guide appeared first on Level Access .

Auth0 BlogCompany/Startup Blogsread at source

Build an AI Wellbeing App with Fireworks and Fitbit via Auth0 Token Vault.

Build Daily Wellbeing, a Next.js app that connects Fitbit through Auth0 Token Vault, compares your daily activity and sleep with your averages, and uses Fireworks to suggest what to try today.

CodePenCompany/Startup Blogs2 min read

Chris’ Corner: Doin’ Stuff in CSS

The float property in CSS is old school. CSS developers used to have to think about it all the time, because it was one of the mechanisms we had for building actual layouts like side-by-side columns and stuff. Those days are gone, but it doesn’t mean float as a property is entirely dead. It remains […]

AdactioTop Front-end Bloggersread at source

Twenty years ago today, I signed up for Twitter. Ten years ago, I wrote about the first ten years: https://adactio.com/journal/11436 I can’t say I miss it.

Rachel AndrewTop Front-end Bloggers6 min read

Making features generic in CSS

CSS has two new positional alignment keywords as part of CSS Box Alignment Level 3: flow-start and flow-end. These are defined as aliases for the existing flex-start and flex-end keywords. Therefore, in a supporting browser, the following two lines should align flex items to the end of the flex container (the right assuming you are ... Making features generic in CSS

CSS-TricksThe Giantsread at source

What’s !important #20: GTA 6 Scroll Effects, Scrollspies, random()

This is the final issue of What’s !important on CSS-Tricks.com. The good news is that it’s coming back in an expanded form as the CSS-Tricks newsletter. I had ya there for a second, didn’t I? Sorry, I couldn’t decide whether to trick or treat, so I went for both. Happy Halloween What’s !important #20: GTA 6 Scroll Effects, Scrollspies, random() originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

AdactioTop Front-end Bloggersread at source

Palaces Of The Crow by Ray Nayler

I really liked Ray Nayler’s The Mountain In The Sea . I also liked The Tusks Of Extinction . But reading those back-to-back gave me pause: At times it seems to relish in describing the worst that humanity is capable of. It starts to veer into misanthropy. I said: I hope that the next Ray Nayler book I read won’t tip over into wallowing in the worst of our species. Well, when I cracked open Palaces Of The Crow , my mind was immediately put at ease. And I mean immediately. Before the story even begins, the book opens with two quotes. One is the closing passage of Darwin’s On The Origin Of Species describing “the war of nature”, but the other quote is from Kropotkin: Mutual aid is as much a law of nature as mutual struggle. That sums up the themes of Palaces Of The Crow . On the one hand, we do indeed get the worst that humans are capable of. But on the other hand, we also get not only the best that humans are capable of, but non-humans too. As with The Mountain In The Sea , this is a terrestrial first-contact story. We’ve gone from cephalopods to corvids. And we’ve gone from the near future back to Eastern Europe during the Second World War. I’m always nervous of any piece of popular entertainment that attempts to feature the Holocaust, but I feel that here it’s done with respect. It never comes across as gratuitous. There are four main human characters; a Polish boy in the Soviet army, a Lithuanian Jewish girl, a young boy who never speaks, and a Roma girl. The narrative is set almost entirely within a forest. At times this book reminded me of The Vaster Wilds by Lauren Groff . Both stories feature a young woman trying to survive in the wilderness. But whereas The Vaster Wilds is ultimately a tale of the individual, Palaces Of The Crow is very much a story of the group. And whether that group comprises humans, crows, or both, the message is clear: Social animals are built to survive only among one another. There is a cautionary subplot involving another denizen of the forest who goes it alone. His fate is very different to that of the group. A story of four youngsters in a forest during World War II sounds like it should be a brutal survivalist tale. But Palaces Of The Crow has more in common with Rebecca Solnit’s A Paradise Built In Hell and Rutger Bregman’s Humankind . Towards the end, the text sometimes can’t resist saying the subtext out loud, but this is a minor quibble with what is otherwise a beautifully constructed work. I’m not going to lie, Palaces Of The Crow is absolutely devastating in places. But it’s also life-affirming. I know that sounds trite, but this book is the opposite of trite. It’s visceral and unflinching and beautiful.

Frontend Masters BlogMore Front-end Bloggers5 min read

Overriding Heading Levels With the headingoffset HTML Attribute

The new headingoffset HTML attribute lets you bump a heading’s level up by adding to it, which is handy when a component’s h1 needs to be an h2 somewhere else. Here’s how the math works, how to reset it, how to style the result with :heading(), and where aria-level fits in.

SyntaxPodcastsAudioListen

1052: Github Universe Keynote Recap

Scott, Wes, and CJ report live from GitHub Universe in San Francisco, breaking down GitHub’s re-architecture for agent-scale traffic, the GitHub Copilot app, Copilot Fusion, Projects, Automations, and AI push protection. Plus hacked conference badges, a USB-C lanyard, and the…

Net NinjaYouTube ChannelsVideoWatch on YouTube

GitHub Copilot App Tutorial #6 - Parallel Sessions

Level AccessCompany/Startup Blogs14 min read

What Is Assistive Technology? Types and Examples

Assistive technology is any product, device, or software that helps people with disabilities complete daily tasks. Examples include screen readers, magnifiers, and voice The post What Is Assistive Technology? Types and Examples appeared first on Level Access .

Auth0 BlogCompany/Startup Blogsread at source

Beyond Infrastructure: The New Era of CIAM Innovation

Okta has been named a Leader in Gartner® Magic Quadrant™ for Customer Identity and Access Management.

Babel BlogLibraries, Frameworks, etc.6 min read

8.1.0 Released: bytes and text imports, source map range mappings, and ESLint configs

Babel 8.1.0 is out!

AdactioTop Front-end Bloggersread at source

Sunday session

AdactioTop Front-end Bloggersread at source

The lack of punctuation on this bit of pub signage is sending exactly the wrong message.

Darek KayMore Front-end Bloggers10 min read

My new digital home

Technical details about my new website.

David BushellMore Front-end Bloggers4 min read

Tangled, hire a front-end accessibility expert

Not me, this is just friendly advice from a struggling user. Alongside Codeberg I’d consider Tangled to be a real GitHub replacement. We desperately need to leave GitHub behind. It’s difficult to recommend any tech these days. I used to spread the gospel of Proton and that backfired. […]

Stéphanie WalterMore Front-end Bloggersread at source

Pixels of the Week – November 1, 2026

This week sadly explores how buying online became a nightmare, from deceptive patterns to AI slop. Also, don't miss a fun history guessing game, colorful tufting art, and a book on feminist approaches to type, and my Golden Honey Suckle color.

SpeedCurve BlogCompany/Startup Blogsread at source

Thanks, SpeedCurve!

For years, at every team offsite, we’ve ended the week the same way. Somebody raises a glass and we all say "Thanks, SpeedCurve!" This is the last post on the SpeedCurve blog, so I want to raise a glass one more time. Here's the news. Over the next year, SpeedCurve is graduating. Our web and mobile monitoring is joining forces with Palo Alto Networks' back-end observability to become XCOR , a complete front-to-back observability platform. We'll fully support SpeedCurve monitoring through to late October 2027, as we migrate customers to our new platform. That sounds like an ending, but it’s not. To me, it feels like graduation day. You look back at everything that got you here, you thank the people who believed in you, and then you turn around and get really excited about what's next. So that's what this post is – a valedictory speech, minus the polyester gown and uncomfortable shoes. First, the practical stuff for SpeedCurve customers Nothing is changing for you today. Your synthetic tests are still running. Your RUM data is still flowing. Your dashboards, budgets, and alerts are exactly where you left them. And we're still here – the same people who’ve been answering your questions and digging into your weird edge cases for years. (We love the weird edge cases.) Over the next twelve months, we'll move you over to XCOR. Keep an eye on your inbox for an email from us with more details on next steps. A few things I want to be really clear about: You have time. Twelve months is a long runway, and that's intentional. You won't be doing this alone. We have a migration plan. We’ll walk you through it and support you every step of the way. Your support doesn't stop. Until the very last day, SpeedCurve will be a fully supported product. Okay, now that the practical stuff is out of the way, I want to tell a little story about where SpeedCurve came from and the epic journey we’ve been on for the past thirteen years. Where we came from SpeedCurve started in 2013 with Mark Zeman. Mark isn't a performance engineer by training. He's a designer. He built his first website in Mosaic, back when the tag was brand new, and he spent years as a teacher and creative director before he ever got started with performance. I think that's the whole secret of SpeedCurve. It was built by someone who cares just as much about how a page feels as how fast it loads, and who refuses to accept that those are two different questions. Mark also refused to accept that performance was only for developers and engineers. He was a true pioneer in visualizing data in ways that made performance accessible and interesting. (I’ve lost count of how many times SpeedCurve customers have raved to me about how much they love our charts and dashboards.) Our beta launched at the O’Reilly Velocity conference , with a shoutout on the stage from Steve Souders, who went on to join Mark and become SpeedCurve's other guiding light. If you've spent more than ten minutes in this industry, you know Steve. He literally wrote the book(s) on performance. He gave this field its vocabulary and then spent years helping us turn it into tools people actually enjoy using. More importantly, Steve connected so many of us and is the reason why the performance community remains one of the most collegial, warm, tight knit groups I’ve ever been privileged to be part of. When SpeedCurve joined Embrace last year, Mark wrote this post: Performance is about people It's very Mark: a little bit cosmic, a little bit cyberpunk, and completely sincere. In it, he made a point I've been trying to make for years without ever saying it as well. SpeedCurve looks like a bunch of charts. But it was actually always a tool for having conversations – about your users, about what makes them happy or unhappy, and about what your organization owes them. He also wrote this, which I'd like to put on a t-shirt someday: "Each of us is on a speed curve." A few years ago, at one of our offsites, Mark told our team, "I trust all of you implicitly." I've had lots of great bosses, but nobody had ever said anything like that before. It’s one of the most meaningful things anyone has ever said to me and I’ll hold it in my heart forever. SpeedCurve was never my company, but I've felt a level of commitment here that I've never felt anywhere else, and that one sentence is a big part of why. Mark, thank you. For the vision, for the trust, and for building something that so many people have cared about this much. The people who made SpeedCurve special I joined SpeedCurve in 2017 as employee #1. At the time, I explained my decision like this : "If Mark and Steve invited you to work with them, what would you say? Exactly." As someone who really, really, REALLY likes being right, I'm happy to report: I was right. Other than being a wife and mom, I've never done anything for this long. (Like a lot of folks in tech, I'm a bit of a serial monogamist. Three to five years, then itchy feet.) Almost ten years later, my feet are still happily planted. When I said yes, Steve said, "Yay, this is going to be fun!" He was right, too. It's been a ridiculous amount of fun, and that’s largely because of the people. SpeedCurve has always been a small team, and that was never a limitation. That was the whole point. When you emailed support, you got someone who'd built the thing, or someone who'd spent years explaining the thing at conferences – and often both! Some of these people have moved on to other adventures. I want everyone’s names here, on the record: Joseph Wynn , who joined SpeedCurve shortly after I did. If you love reliability, security, and accessibility, then you have Joseph to thank for leading the charge on all those fronts. And he’ll be continuing to do this with XCOR – lucky us! (He’s also a wicked surfer and is the reason why I ignored my self-doubt and climbed on a board – and stayed up! – for the first and probably last time at an offsite back in 2018.) Cliff Crocker , my work BFF, whom I've known since long before either of us came to SpeedCurve. We’ve worked together at SOASTA, then for years at SpeedCurve, and we’ll keep working together at XCOR. If you’ve ever met Cliff, then you know he’s a rock. He cares about everyone – customers, team members, end users – and he brings a massive amount of skill and experience to making awesome tools and an awesome culture. Elena Kay , who wrote so much of the code underneath everything you've ever clicked on in SpeedCurve. When she wasn’t building code, she was inspiring us all with her offline adventures – ice climbing, mountaineering, and running marathons. Andy Davies , who is one of the OG web performance gang. I don't even remember when we met. He's just always been there! What Andy doesn’t know about performance isn’t worth knowing. He’ll be continuing to build the best front-end monitoring in the world with our XCOR team. Andy Biggs (AKA Biggs, because when you're in an eight-person company, two people with the same name breaks your brain) brought a massive amount of creativity to the table. He challenged us to think about performance in fresh ways and he’s directly responsible for reimagining many of your SpeedCurve dashboards. (If you love your Vitals dashboard as much as I do, give the credit to Biggs!) That’s it – our entire team. Every time a customer learns that SpeedCurve was built and supported by just eight people, it blows their mind. It’s amazing what eight humans can do when you all care and are pulling in the same direction. As I mentioned, many of us are carrying the torch forward at Palo Alto Networks’ XCOR platform. Here’s what I’m excited about… What we're bringing with us In early 2025, on my eighth work anniversary, I tried to pin down why SpeedCurve has felt like such a good home. I landed on a handful of things : a shared vision of building tools that genuinely help people. Trust. Integrity. Humanity – meaning the kind of workplace where life can knock you sideways for a while and nobody makes you worry about your job while you heal. And fun. Lots of fun. Here's what makes me excited instead of wistful: when we started getting to know our new comrades at Palo Alto Networks, we kept finding the same things. The same vision, same goals, same commitment to trust and integrity and treating people like people. Even the same sense of humour, which – trust me – is not a given. We didn't just find a new home for our technology. We found our people. What we’re building Together we're building something bigger than any of us could build alone. The web has changed a lot since 2013. Your users don't live on a single site anymore. They move between web and mobile, and the experience they have depends on everything from the front end all the way back to the infrastructure. The problems are getting harder and more interesting. Part of what’s making them harder is AI: teams are shipping more code, and they’re shipping faster, which means more ways for things to break. We’re putting AI to work on the other side of that equation, digging through the whole stack to find the root cause when something goes wrong. Yes, it’s fuelled by AI, but ultimately humans are at the centre . We’re helping humans spend less time hunting for needles in haystacks so they can spend more time building and optimizing. And – most important – we never lose our connection to our users on the other side of the screen. That last bit is everything. For years and years, we've argued on this blog that performance isn't really about milliseconds. It's about people. The person on the spotty train connection who just needs to DO THE THING before the train goes into a tunnel. The person who gives up on your checkout in frustration and never comes back. People are central to everything we build next. One last toast To everyone who ever ran a test, set a performance budget, sent us a bug report or a feature request, came to one of our talks, or argued with us on the internet about which metric matters most: thank you. You made this the best job I've ever had. To Mark, Steve, and every SpeedCurver past and present: thank you for the epic ride. To our new friends at Palo Alto Networks: I can't wait to see what we build together. In the funny way time has, the last decade feels like a long time and like no time at all. So, glasses up, one more time... Thanks, SpeedCurve!

Remote SynthesisMore Front-end Bloggersread at source

Two Ways AI Is Changing the Developer Conference Presentation

The nature of conference presentations at developer-focused tech conferences seems to be changing in at least two important ways.

AdactioTop Front-end Bloggersread at source

Reading Land by Maggie O’Farrell.

Kitty GiraudelMore Front-end Bloggers4 min read

Playing with CSS Layers

A short piece to share that I’ve implemented CSS layers on my website, and the few things I’ve learned on the way.

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

The Memory Police [book]

A weird story. Not quite sure what to make of it! Definitely surreal, and unlike any story I’ve read before. I did find I was trying to make sense of it, wondering if the protagonist was stuck in purgatory, but as the book finished, I don't think that was that was the point. It’s a good story, and engagingly written, but hard to apply to the real world. Although the questions that are repeatedly raised about the idea of memory and how these have different meaning to different people was definitely food for thought. Also worth adding, as surreal as it was, it managed to be equally bleak! A good read, though not quite suited to the poolside holiday I read it from!

HTML All The ThingsPodcastsAudioListen

Are Anthropic’s AI Economics Finally Working?

Anthropic's IPO filing has revealed some eye-opening numbers about the economics of artificial intelligence. Revenue is growing dramatically faster than computing expenses, suggesting that running AI models might finally be becoming a sustainable business. But does that mean the…

Smashing MagazineThe Giants11 min read

A Spark Of Color In November’s Gray (2026 Wallpapers Edition)

Let’s kick of November with a new collection of desktop wallpapers! Designed by creatives from across the globe, the wallpapers come in a variety of screen resolutions and can be downloaded for free. Enjoy!

The Astro BlogLibraries, Frameworks, etc.read at source

What's new in Astro - October 2026

October 2026 - Astro 7.4, conference talks, and more!

Geoff GrahamMore Front-end Bloggers1 min read

New Album: Gone Dark

I worked on a new album this past year as a follow-up to last year’s Covers. I finished it early September, submitted it for distribution, and then… nothing. It sat quietly in “approval” hell. But Gone Dark came out Monday which just so happened to be a very big day for a very different reason. […]

CodePenCompany/Startup Blogs1 min read

446: Our Next-Generation of Feeds is Here

CodePen has “feeds” for exploring content, like our Trending feed for showing off what’s popular lately all across CodePen, and our Following feed showing off the work of people you’ve chosen to follow on CodePen. Both of those require some fairly fancy technology to pull off! We’ve pulled this tech in-house, so we have more […]

Frontend Masters BlogMore Front-end Bloggers13 min read

Two Circles, One Connection, and border-shape

Swapping the clip-path arrow from the previous article for border-shape and shape(), we can connect two draggable circles with fancy curved lines that stay perfectly aligned.

PiccalilliMore Front-end Bloggersread at source

The Index: Issue #204

CSS-Tricks has a new owner! This really is a big win for the web and it should fill you with hope. We're not done yet ! The Serotonium — Music shared with friends This does exactly what is says on the tin and the volume of extremely good recommendations is mind-blowing. Anthropic files its ‘IPO’ — but all the key numbers are missing If the immediate glazing of Anthropic's IPO documents on social media was getting you down, then have a read to get yourself back level again. Digital recipe management for fastidious cooks An interesting look into the world of managing your recipes and what options there are. Local Wikipedia This is such a cool tool that allows you to filter Wikipedia by your chosen location. CSS nesting: use with caution 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 When anyone can make anything, we can make you stand out. AI technologies have given anyone the ability to bring their ideas to life, but to produce a high quality service that actually works for the people it needs to work for requires experience, specialist skills and creativity. We’ve got heaps of all of that here at Set Studio and we've got availability starting in 2027, so check us out and see what we're about. Check out our work

Net NinjaYouTube ChannelsVideoWatch on YouTube

GitHub Copilot App Tutorial #5 - Automations

CSS Articles by Temani AfifMore Front-end Bloggersread at source

Two Circles, One Connection, and border-shape

Two Circles, One Connection, and border-shape Read the full article online

ESLint BlogLibraries, Frameworks, etc.1 min read

ESLint v10.14.0 released

Highlights In ESLint v10.14.0, the following rules have been updated to avoid incorrect or unexpected behavior in some edge cases: func-name-matching no-invalid-this no-restricted-globals object-shorthand yoda Features d23a7f9 feat: fix property descriptor handling in…

Twilio BlogMulti Author Blogsread at source

Build an AI Voice Assistant with Twilio Voice and Media Streams, Rime's Prism, and Node.js

Build an AI voice assistant that answers phone calls, using Twilio Voice and Media Streams, Rime's Prism speech-to-speech model, and Node.js.

AdactioTop Front-end Bloggersread at source

Thursday session

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

Accelerate shipping to scale with Google Antigravity

Heroku BlogCompany/Startup Blogs3 min read

Securing Your Stack: Recent PHP and eMudhra Updates on Heroku

Managing critical vulnerabilities often consumes significant engineering time. When two remote code execution flaws hit PHP alongside the eMudhra root certificate compromise, Heroku managed the heavy lifting for their managed runtimes. The post Securing Your Stack: Recent PHP and eMudhra Updates on Heroku appeared first on Heroku .

Jim Nielsen’s BlogMore Front-end Bloggersread at source

Celebrating SIM Cards

It’s time to celebrate a little win. The other day, my mom contacted me saying her 10-year-old iPhone wouldn’t turn on. After getting a hold of the device and doing some family IT support, I concluded the battery was dead. So I bought her a new (old) one on Walmart (SE 3rd gen., if you must know). Her old phone used a SIM card, so I was expecting the process to go something like this: Take the SIM out of the old phone Put it in the new phone Setup the device Troubleshoot why there was no service Call my Mom’s carrier and work through the issue But step 4 and 5 never happened. The new phone “just” connected. I called her number. I texted it. Everything worked as expected. Everything worked as expected. Everything worked as expected. I didn’t have to Google a single question. I was floored. Flabbergasted. I know I shouldn’t have been because that’s how SIM cards are supposed to work, right? Like that’s the whole promise of a SIM card: you can seamlessly swap them between phones. And in this case, the tech worked exactly as promised. As I write this, I’m kind of amazed at how amazed I am that everything “just worked”. Shout out to anyone who has ever worked on SIM card technology. More things like this please :) Reply via: Email · Mastodon · Bluesky

WebAIM BlogBrowsers, engines, etc.4 min read

Captioned Doesn’t Always Mean Accessible

Accurate dialogue is only part of accessible video captions. Quality captions also identify speakers, convey meaningful sounds, and provide readable, synchronized text. Whether captions come from an automatic tool or a professional service, this article explains why evaluating the finished viewing experience is essential for people who rely on captions.

Jeffrey Zeldman PresentsMore Front-end Bloggers6 min read

The Day the Focus Died

If we failed to do this, I feared, we would stop leading the industry and turn into “merely the CSS trick of the week.” The post The Day the Focus Died appeared first on Jeffrey Zeldman Presents .

Engineering at MetaCompany/Startup Blogs6 min read

Catching Bugs Before They Land: JiTTesting’s Human-on-the-Loop Approach at Full Scale

Over the last year we’ve been sharing our work leveraging large language models to catch bugs on the fly — a novel approach we call Catching Just-in-Time Tests (JiTTests). Now, we’re sharing the results and positive impact we’ve seen with Catching JiTTests deployed into production. Our paper, “Just-in-Time Catching Test Generation at Meta,” fully details [...] Read More... The post Catching Bugs Before They Land: JiTTesting’s Human-on-the-Loop Approach at Full Scale appeared first on Engineering at Meta .

Web Tools WeeklyMulti Author Blogsread at source

Web Tools Weekly Issue #693

JS Utils, Testing, Build Tools

Microsoft Edge BlogBrowsers, engines, etc.2 min read

Edge is faster on Windows with Accelerated App Launches

We're excited to announce that Edge is the first browser to support accelerated app launches on Windows, delivering a faster and more consistent browser launch experience. With accelerated app launch, most Windows users will see a 15% launch The post Edge is faster on Windows with Accelerated App Launches appeared first on Microsoft Edge Blog .

CSS-TricksThe Giantsread at source

The Frankenstein Table

A super scary way to go about tables using other layout techniques, like CSS Grid. The Frankenstein Table originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

DigitalOcean BlogMulti Author Blogs17 min read

Inside DigitalOcean Simulations: how user simulation, execution, and validation work

Ask a coding agent which Python version to upgrade to from 3.11, and it picks one from memory. It cites a few changes from that version’s release notes and calls the upgrade straightforward. A single-turn evaluation asking “Is this a reasonable recommendation?” would likely pass…

PiccalilliMore Front-end Bloggersread at source

If we stop, we lose

It's been a rather morale draining era in the making websites industry since the wider tech industry decided to gamble everything on LLMs. We at Piccalilli see it amongst the community and feel it ourselves. You'll also have noticed the velocity of posts has slowed down somewhat on this website with no new courses announced either. There's a couple of reasons for that. First, the numbers have taken a dramatic tumble — industry-wide — but also, aside from being very busy in the studio , we've been tired . Swimming against this particular current will do that, even for folks like us that have always operated like that. Something else you might have noticed is that a lot of other educators have gone a lot quieter this year too. I'm writing this post today to hopefully try and fix that. A shot in the arm I had a delightful conversation with CSS-Tricks head honcho, Geoff , yesterday. Aside from the excellent vibes as a result of CSS-Tricks being back as an independent publisher , I started in a rather glum mood. After spending a few minutes listening to Geoff's exciting plans though I really perked up. We're nowhere near CSS-Tricks here, but we've always looked up to them as an example of what years and years at the top of your game looks like. Sure, the DigitalOcean acquisition didn't work out, but the fact that the publication is not only back, but well up for the fight against the supposed death of web education is really inspiring to me. I needed that win, as did many others . I needed it so much, it's spurred me on to write this article to hopefully give us all a shot in the arm. There is no inevitable future and education will always matter A comment I see all the time is "we don't need articles and courses because we can just ask an LLM now", which I guess is true, but I could also eat an entire can of spray cheese. It ain't gonna nourish me! AI technologies have given anyone the ability to bring their ideas to life, but to produce a high quality end product that actually works for the people it needs to work for requires experience, specialist skills and creativity. That is a reality, which aside from Silicon Valley's best efforts, is why there are still working developers out there, regardless of "frontier model" power. Human developer's experience is necessary because LLM outputs still (somehow, after hundreds of billions of investment) fall short. Let me repeat that: their experience is necessary . Who inevitably contributed to that experience? Yep: educators. Let's get to work then This article is mainly addressed to fellow educators, but also to people that write on their personal blogs. You must keep going because people still need us . If we don't, we lose. The LLM era is opening up an enormous skills gap that's only going to get wider as the industry continues to pull up the ladder, eliminating entry level positions. We're needed to help people really understand how all of this stuff works , so even if they are at the behest of LLM mandates , they can produce better outputs. The technology is going nowhere — that toothpaste is long out of the tube — but how many other hype cycles have underwhelmed in the end? Spoiler, all of them The economics of the AI industry simply do not work and the technology — albeit ever-present in development — will fall into its actual place eventually, as a niche tool . With all of this in mind, we're fighting back too, so I'm opening up the guest authoring on this site again , just like Geoff is over on CSS-Tricks . I'm determined to get this website cooking again and I would love to share your words with the rest of the industry. Let's buck up our ideas and get cracking, everyone. There's lots to teach and I know we've got plenty of fight left in us. To quote our very own Mat Marquis : You and me, we’re not done until we say we’re done Don't let the bastards grind you down.

QuirksBlogTop Front-end Bloggersread at source

Things AI cannot do

Last week I did my first tests in nearly nine years. I’m planning to redo the viewport tests , and I created a new test page . I also wrote an article about meta viewports that will be published eventually. I thoroughly enjoyed myself and was surprised how easy it was for me to slip back into compatibility testing patterns. My reflexes are still there, but I only test on three mobile devices and that saves some time. Then it occurred to me that, while AI can write my article if I give it notes, it cannot do fundamental browser compatibility research. That’s it. That’s the entire blog post.

Perishable PressMore Front-end Bloggers1 min read

9G Firewall

Hello! Just a quick post to let you know that the 9th version of my nG Firewall is in development. The 9G Firewall is not yet public, so if you encounter anyone claiming otherwise, they are incorrect. Unfortunately it is necessary to post this information because someone actually hijacked the name “9G Firewall” for their own project. So when people are looking for the next generation “9G” firewall, they are likely to find the counterfeit and possible confusion. Summary: 9G […]

Ethan MarcotteTop Front-end Bloggers2 min read

The ship is anchor’d safe and sound.

A favorite actor just passed away.

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

🪴 Building an autonomous plant rover with Gemini Live

Frontend Masters BlogMore Front-end Bloggers10 min read

Useful @custom-media Presets

Custom media queries let you name and reuse media queries the way custom properties do for values. Here’s a set of drop-in @custom-media presets for input mechanisms, breakpoints, and true HDR, plus a container style query version of each that works in every browser today.

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

My 2027 Web Platform Feature Ranking [blog]

Like my peers, I've decided to publish my personal ranking preference for the 2027 interop project. I'm doing this from a phone, so I can't link to the others that have published theirs, but I think it's interesting to see and compare what we feel is important.

Twilio BlogMulti Author Blogsread at source

Brilliant Builds: Building for Loyalty

On Brilliant Builds episode 1, we dive deep into how businesses can actually make sense of fragmented customer data to deliver true customer recognition.

Chris HawkesYouTube ChannelsVideoWatch on YouTube

Some Thoughts on AI and the Future

Adam ArgyleTop Front-end Bloggersread at source

Scroll Axis Design System Rule

Design system rule: Y scroll = scroll trigger X scroll = scroll driven

Jens Oliver MeiertTop Front-end Bloggersread at source

Whether AI Will Be Catastrophic for Software Development Depends on Maintenance—and a Decision

Maintenance and intent play the decisive role in how AI will impact software development.

AdactioTop Front-end Bloggersread at source

Wednesday session

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

Building real-time vision & edge navigation with Gemini Live

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

Ship less JavaScript in Next.js with your AI agent

Optimize your Next.js app's bundles with the next-bundle-optimizer agent skill, or explore them yourself with new Bundle Analyzer tools.

DigitalOcean BlogMulti Author Blogs9 min read

DigitalOcean Signals: Observability for AI Agents and Inference

You ship an agent. It runs in production, sessions start and finish, and the dashboards stay green. But then a user mentions that they spent ten minutes retrying the same failing command with slightly different arguments before giving up and rephrasing the request. The problem?…

Google ChromeBrowsers, engines, etc.read at source

Chrome’s enhanced autofill helps you fill out forms with suggestions pulled from Gmail.

Chrome enhanced autofill

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

How Ethical Hackers Actually Break Into Systems

Christian HeilmannTop Front-end Bloggers1 min read

Without-love – a creative coding challenge

Math is beautiful – check it out on Codepen At WeAreDevelopers, we love to code. We love the concept of creating something from nothing, finding a solution for a problem and create something people can get excited about. That’s why we thought we’d give you a challenge to show what you can do with an […]

Engineering at MetaCompany/Startup Blogs12 min read

Meta Andromeda: Powering the Next Generation of Ads Retrieval Through Model-System Co-Design

This post describes the next generation of Meta Andromeda, Meta’s personalized ads retrieval engine, and how co-designing the model, system, and GPU hardware unlocks a new efficiency frontier for ads retrieval. In production, the system scores every eligible ad with near ranking-level model performance at retrieval scale and surfaces the top candidates at over one [...] Read More... The post Meta Andromeda: Powering the Next Generation of Ads Retrieval Through Model-System Co-Design appeared first on Engineering at Meta .

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

Functional smart devices using Gemini 4 Argon and Google Antigravity

David BushellMore Front-end Bloggers8 min read

Danse Macabre

My recent detour into Japanese detective fiction and the captivating mysteries of locked-room whodunits reminded me of popular BBC series Jonathan Creek. The show ran for three seasons between 1997–99. It returned with season 4 and 5 in 2003 and 2014 respectively. […]

W3C BlogBrowsers, engines, etc.4 min read

Historical www-talk archives made complete

W3C's archives of the www-talk mailing list are now complete, back to its creation in October 1991. This post lists some of the more interesting messages in the early development of the Web.

CSS WizardryTop Front-end Bloggersread at source

Web-Perf Wednesday 015 – Failed Modulepreloads Need to Recover

WebKit fixes failed modulepreloads that could block recovery, while Safari and Firefox improve performance tooling and browser responsiveness.

SyntaxPodcastsAudioListen

1051: Mourning the Death of Code

Scott and Wes tackle your potluck questions, from passing context between Claude Code and Codex to whether AI-generated skills are any good. Plus high-fidelity Figma builds, WebSerial reconnects on an ESP32, AG-UI vs WebMCP, a listener who thinks Syntax is too pro-AI, and…

Net NinjaYouTube ChannelsVideoWatch on YouTube

GitHub Copilot App Tutorial #4 - Pull Requests and Issues

Christian HeilmannTop Front-end Bloggers3 min read

Pardon my dust – re-homing 21 years of blog content of christianheilmann.com

I’ve been a bit silent here lately. The reason is on the one hand life and issues with that but also problems with the hoster of this blog, specifically the SSL certificate. I’ve spent some fun hours on the phone with helpdesk and it’s still, well, complicated. That’s why I finally took the plunge and […]

Frontend Masters BlogMore Front-end Bloggersread at source

How I Used Claude Code to Speed Up My Shell Startup by 95%

I like the idea of "Please suggest 10 improvements to my ~/.zshrc" as a prompt (John Lindquist). Nick Taylor wrote up all the stuff it found for him and got nearly a second back for every fresh terminal opened.

Brad FrostTop Front-end Bloggers1 min read

Playing My World: Helsinki Cathedral

I'm so happy about this I could cry. For years, I've "played" my visual world: objects, architecture, cityscapes, landscapes, and anything interesting. I map the shapes and patterns I see to shapes and patterns on the fretboard. I make little compositions with those shapes and…

Frontend FocusMulti Author Blogsread at source

The spyware hiding in old script tags

🚀 Frontend Focus #​764 — October 28, 2026 | Read on the web 🖼️ HTML-in-Canvas: Interactive DOM Inside 2D, WebGL and WebGPU Canvases — Arriving in stable Chrome next week, this long-incubated API draws real, live HTML into 2D, WebGL and WebGPU canvases, with text selection, form controls, Find-in-Page and screen readers all still working. Three.js, Babylon.js and PixiJS already support it. Chrome-only for now, but a big leap for canvas-heavy UIs. There's a related video here too . Natalia Markoborodova (Chrome) Creating Dynamic Social Media Cards for User Content — Chris digs into how links unfurl across Discord, X, Slack, Bluesky, iMessage and more, and argues most dynamic social cards waste the image by just restating the title and description. Then he shows what should go on it instead. Chris Coyier Would You Let Your AI Agent Grade Its Own Homework? — Agents write code faster than ever. They even review their own work. But who’s reviewing them? Dropbox, Notion & ElevenLabs don’t take the risk. With Meticulous, every change is exhaustively verified, with zero developer effort. Meticulous sponsor DeadTag: Forgotten Third-Party Script Tags Became a Delivery Network for Spyware — Attackers are buying up expired domains once used by analytics, ad and widget scripts, so any site still carrying the old tag now silently loads attacker code. A worthy reminder to go audit those tags! Scott Helme ⚡️ IN BRIEF 🎉 CSS-Tricks , after a spell under the ownership of DigitalOcean, is independent once again under the stewardship of editor Geoff Graham . 🦊 Firefox 159 enables scroll-driven animations by default, so they now work in all major engines. It also adds scoped custom element registries. 🪪 Since Chrome 155, sites can use the Digital Credentials API to offer credentials , such as digital IDs, to a compatible wallet app on the user's phone. ⚙️ W3C has launched a polyfill pilot for WebMCP , a JavaScript API that exposes web app functionality as agent-callable tools. 🌅 The Arc browser is being sunset this December, and Dia is suggested as a viable alternative. Zen is another, non-Chromium variant. 📺 Firefox has ▶️ a new ad with various 'meme icons' from years gone by (Numa Numa Guy kicks things off). 📙 Articles, Opinions & Tutorials WebKit Features for Safari 27.1 — A fresh release of Safari came out alongside Apple's new foldable. There's advice on how to create layouts for folding screens using Device Posture API and the Viewport Segments API . Both are behind feature flags for now. Jen Simmons (WebKit) 💡 Safari 27.2 followed days later , adding ::field-content for styling a customizable select's displayed text, and renaming Grid Lanes' flow-tolerance to fit-tolerance . Investigating a Curious Case of Font Format Fallbacks — Paul chases a bug in which a site's font loaded three times in a row , as WOFF2, then WOFF, then TTF, following the browser's error messages into Chromium's own source to find the cause. Paul Calvano 🗓️ Workshop: How to Implement Session Replay — Filters, custom tags, and sampling settings for finding the sessions that matter. Nov 5, 10am PT. Sentry sponsor Performance Budgets Need a Representative Worst — Harry revises his own long-standing advice: a budget set from your single worst result lets one outlier hide real regressions, so start from a representative worst (P90 or P95 of recent data) instead. A spreadsheet template is included. Harry Roberts ▶ The Most Vulnerable Week in Internet History — A fast recap of a rough security week: PHP2Shell (a pair of PHP engine bugs allowing unauthenticated RCE), a backdoored LiteLLM release, a CA with private keys that were numbers under 256, and more. Fireship Building an Isolated Preview for AI-Generated HTML — Any app that lets a model generate UI has to render the HTML it hands back. Keshav builds five demos showing how a preview can be attacked, then hardens it with iframe sandboxing, CSP and a carefully checked postMessage handler. Keshav Malik 🖨️ Websites Should Be Printable — Brennen printed his own site, didn't like the result, and walks through the print stylesheet changes that fixed it: a hidden header, 12pt type, and black links. Brennen Puth ▶ Why I'm Still Making CSS Tutorials — On caring about the craft of little details and why they matter in an age of agentic code generation. Kevin Powell 🧰 Tools, Code & Resources TitleArt: Make Text Like It's 1997 — Aww yeah, a big dose of nostalgia for users of Microsoft Office back in the 90s. Every classic WordArt style, shape and 3-D effect recreated in the browser. Davey Barker The “Last 90 Days” Filter Shouldn’t Need a Spinner — Bigger date ranges mean your chart’s query scans more rows. TimescaleDB keeps it fast in Postgres. Get $1000 credit . Tiger Data (creators of TimescaleDB) sponsor The Website Specification: Every Technical Detail a Site Needs Before Launch — A checklist you (or an agent) can work through before launch, covering SEO, accessibility, security, performance, privacy, i18n, and more. Joost de Valk browser-whisper 2.0: In-Browser Audio and Video Transcription with WebGPU — A library that runs Whisper, Moonshine and other speech models entirely in the browser over WebGPU (with a WASM fallback), complete with timestamped segments, cached models and live mic input. Tanpreet Singh Jolly 🔊 UI SFX: A Library of 930+ Interface Sound Effects — 78 UI sound cues (clicks, toggles, success, add-to-cart, loading loops…) in 12 swappable styles, from minimal to arcade. A ~12KB runtime synthesizes them with Web Audio, or use the 936 CC0 MP3/Ogg files. Source code . Romain Simon MicroKit: 54 Copy-Paste React Microinteractions, CSS-First — Free animated buttons, hover effects, tabs and inputs, each available in TS or JS and in plain CSS or Tailwind. About half need no dependencies, and they're the sort of little details that lift a UI. Henrique Barone 📰 Classifieds 📮 CraftForms : Hosted forms for any site, no backend needed. Two-line embed, unlimited submissions even on the free plan , no captcha. 🧾 Add PDF editing to your app with Foxit's API : Merge, split, rotate, replace pages and flatten annotations, with working code. 🌿 ...and finally Overgrown: When Plants Invade Your Abandoned Tabs — Leave a tab unread too long and this Chrome extension has vines grow across it, until you work your way back in with a machete, chainsaw or flamethrower(!). It's not on the Web Store, so load it unpacked from the repo . Charlie Gerard

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

Upcoming Next.js November Security Release

Next.js is preparing a scheduled November security release for November 3, 2026.

Mux BlogCompany/Startup Blogs8 min read

Humans and agents rejoice: Mux Robots is now GA

Mux Robots is generally available (GA), with a stable v1 API, two new AI workflows for video structure and written content, and six months of improvements.

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

Introducing Genie 4

Engineering at MetaCompany/Startup Blogs18 min read

PrivacyLib: Privacy Controls at the Data Access Boundary

This latest deep dive into Meta’s Privacy Aware Infrastructure (PAI) takes a look at PrivacyLib. A privacy requirement must hold as data moves through Meta’s diverse data and processing systems. Historically, supporting a new requirement meant implementing the same enforcement logic separately in each system. PrivacyLib replaces this with a common library that runs inside [...] Read More... The post PrivacyLib: Privacy Controls at the Data Access Boundary appeared first on Engineering at Meta .

CSS-TricksThe Giantsread at source

What’s !important #19: CSS Refraction Effects, Scroll State Queries, @custom-media, and More

We’re back! Don't worry, this isn’t a trick (despite what our name suggests!). However, due to the hiatus, we're also a little behind. That’s why this issue of What’s !important is absolutely stacked. All killer, no filler. Here's what you missed. What’s !important #19: CSS Refraction Effects, Scroll State Queries, @custom-media, and More originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

Go Make ThingsMulti Author Blogs2 min read

Signal your virtues

Virtual signalling is often used as an insult, but it’s good to signal your virtues, actually. A few months back, I read a story on Bluesky from a hispanic woman who’s immigrant mother got lost in the city. Her phone ran of battery, she didn’t speak much English, and she had no idea how to get home. She approached a young woman with bright blue hair who was able to use her phone’s translation app to get the mother’s address and help her get home.

DXDMore Front-end Bloggersread at source

Processo de desenho do Não é Só um Logótipo

O processo de desenho da identidade visual do "Não é Só um Logótipo" foi uma mistura entre planeamento, pesquisa e experimentação. O conteúdo Processo de desenho do Não é Só um Logótipo aparece primeiro em DXD .

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Jev Course – Prefill-Only Inference & Decision Models from Scratch

The Mozilla BlogBrowsers, engines, etc.3 min read

Five Firefox updates you might have missed, and a look ahead

Some of our latest Firefox updates have had big moments of their own, from the launch of our new design and built-in ad blocking on iOS to Firefox Enterprise and our partnership with NVIDIA GeForce NOW. You might’ve even spotted a few familiar internet OGs in our latest campaign. Other improvements might’ve flown under the […] The post Five Firefox updates you might have missed, and a look ahead appeared first on The Mozilla Blog .

The Mozilla BlogBrowsers, engines, etc.3 min read

Skip the busywork with Smart Window

The days might be getting shorter, but your to-do list is only getting longer. Whether you’re getting a head start on holiday shopping or planning your next career move, Smart Window’s newest features will help you keep up. Firefox’s opt-in AI browsing experience can now use information from tabs you choose to help fill out […] The post Skip the busywork with Smart Window appeared first on The Mozilla Blog .

AdactioTop Front-end Bloggersread at source

Typewalk – Lettering in public spaces

Capture lettering on signs, shop windows, and façades, then explore walks to the best finds in your city. adactio.com/links/22817

W3C BlogBrowsers, engines, etc.1 min read

W3C launches second pilot of program to support Open Source projects

In this blog post, Ian Jacobs, Strategy Team, introduces the second pilot of the W3C Open Source program: a polyfill for the WebMCP API. WebMCP is a new JavaScript interface that allows web developers to expose their web application functionality as “tools”.

AdactioTop Front-end Bloggersread at source

CSS-Tricks has a new owner! | CSS-Tricks

This is very good news! adactio.com/links/22816

Remote SynthesisMore Front-end Bloggersread at source

Your Agent Just Deleted Prod (Web Unleashed Slide Deck)

Just a quick post to share the slide deck from my presentation today at Web Unleashed in Toronto

Net NinjaYouTube ChannelsVideoWatch on YouTube

GitHub Copilot App Tutorial #3 - Viewing Files & Previewing

HTML All The ThingsPodcastsAudioListen

What Skills Will Stay in Demand as AI Improves?

What skills will stay in demand as AI changes how we work? For developers, preparing for the future might mean looking beyond the next framework and building skills that open doors across different roles. Matt and Mike discuss five areas worth developing: ideation and…

JavaScript WeeklyMulti Author Blogsread at source

Rebuilding the original GTA engine in JavaScript

#​808 — October 27, 2026 Read on the Web JavaScript Weekly TanStack AI 1.0: The Vendor-Neutral AI Toolkit Goes Stable — TanStack's framework-agnostic AI toolkit reaches 1.0, with stable APIs for chat, tools and media, plus 23 provider adapters. A new agent harness supports long-running sessions, but its APIs remain experimental. Tuzlak, Herrington, et al. (TanStack) Would You Let Your AI Agent Grade Its Own Homework? — Agents write code faster than ever. They even review their own work. But who’s reviewing them? Dropbox, Notion & ElevenLabs don’t take the risk. With Meticulous, every change is exhaustively verified, with zero developer effort. Meticulous sponsor Announcing TypeScript 7.1 Beta — TypeScript 7 gets a programmatic API , plus 'content mappers', a plugin point for checking code embedded in files such as Vue, Svelte, and Astro components. Also new are source phase imports and --target es2026 . Daniel Rosenwasser (Microsoft) GTA.js: 1997's Grand Theft Auto , But in JavaScript — Bramus has been reimplementing the original top-down GTA's engine in JavaScript and WebGL, loading Liberty City from the game's original demo files. Play it here . Bramus Van Damme 💡 Fittingly, Pat Kerr, whose 1996 Atari ST prototype formed the basis of the original game's vehicle physics, recently rebuilt it in JavaScript . IN BRIEF: Deno's Bartek Iwańczuk says the team is working on getting Deno into a foundation . Meanwhile, a new fork, Ende , plans to drop Node compatibility and refocus on sandboxing. Safari 27.1 previews the Device Posture and Viewport Segments APIs behind feature flags on the iPhone Duo, letting JavaScript detect folds and inspect screen segments. Chrome 156 has reached stable and no longer caches module fetch failures, so a dynamic import() that fails due to a network or HTTP error can be retried. RELEASES: Node.js v26.12.1 (Current) , v24.22.1 (LTS) and v22.23.4 – Security releases fixing ten CVEs, including the 'Node2Shell' Brotli decoder flaw , which can lead to remote code execution when an app decompresses malicious data. (Also, Node 26 is due to become LTS tomorrow.) Bun 1.4.4 – Adds bun fmt , a Prettier-compatible formatter that uses your existing Prettier or oxfmt config. It's very fast. Electron 45 – Upgrades to Chromium 156, Node 24.22 and V8 15.6, and adds hooks for the Prompt API so apps can plug in a local model. pnpm 12.16 , Remix 3.1 , axios 1.21 , Deno 2.9.8 📖 Articles and Videos Parser Combinators in TypeScript, Built From Scratch — Parser combinators sit between regexes and heavyweight tools like tree-sitter. This animated, step-by-step walkthrough shows the basic elements of building them, concluding in an example turning ping output into typed objects. Florian Schindler Dead Code Shouldn't Exist: How Sentry Cut 28,000 Lines — A talk Dominik has given at six conferences this year, now as swipeable slides with a full transcript. He covers how unused code can cost more than you might think, and how Sentry used Knip to remove 28,000 lines. Dominik Dorfmeister (Sentry) AI.js Day 2026: Frontend's Scariest AI Questions, Live on Channel 13, Nov 13 — No hype, just the AI questions frontend devs are afraid to ask. Save your spot . JetBrains sponsor Building an Isolated Preview for AI-Generated HTML — Rendering model-written HTML in a srcdoc iframe runs it on your own origin. A security engineer breaks the naive approach, then rebuilds it using sandbox and a strict CSP, with demos showing what each one blocks. Keshav Malik A First Look at TypeScript 7.1's Content Mappers — TypeScript 7 ignores tsserver plugins, but 7.1's content mappers can turn non-TS files into TypeScript. Here's how they work, applied to CSS modules and .graphql files. Jovi De Croock 📄 How Engines Turn Dynamic Objects Into Fast Field Access – Shapes and inline caches, explained with runnable sketches. Max Bernstein 📄 Software is Slow Because of Bad Design, Not Slow Languages Sean Goedecke (GitHub) 🛠 Code & Tools Structs: TC39's Shared Structs Proposal, But Usable Today — A former TC39 delegate's implementation of the Stage 2 structs proposal . The idea is you get shared memory between workers, so threads can work on the same objects instead of serializing copies back and forth. There's a playground too. Erik Arvidsson Introducing TanStack Redact: A Slimmer React Runtime — A build plugin swaps React and React DOM for a smaller reimplementation in the browser with no code changes. It works with Vite, Start, Vinext and Next.js, and while TanStack reports 20-70% smaller client builds, rendering is synchronous only . Tanner Linsley (TanStack) AI Tests That Catch Real Bugs — AI can write low-value tests that pass without checking much. Wallaby helps your agent refine assertions and catch bugs. Wallaby Team sponsor Verdaccio 7.0: The Self-Hosted npm Registry Adds Staged Publishing and 2FA — A mature, lightweight way to self-host your own npm registry and proxy. v7 adds experimental staged publishing (where new versions need approval before going live) and 2FA, plus stricter ownership checks. Verdaccio Team Biome 2.6 Adds Markdown, YAML and SCSS Support — The Rust-powered alternative to Prettier and ESLint adds formatting support for Markdown, YAML and SCSS, along with initial linting support. JavaScript plugins for custom lint rules are available as a developer preview. Biome Core Team ☕ CoffeeScript 2.7.1 – The first release in four and a half years brings Node 22+ fixes and with { type: 'json' } import attributes. 💡 If you never used CoffeeScript , it is/was a Ruby- and Python-flavored language that compiled to JavaScript. Brendan Eich held up its arrow functions and lightweight classes as models for what went into ES6 (ES2015). oxlint 1.89 – The Rust-based linter now counts the upstream recommended rules of its React, Vue, Next.js, Jest/Vitest, and other plugins as 'recommended' so expect more reports if you upgrade. Mutative 2.0 – Immer-style efficient immutable updates library. The author reports a 3.6x speedup over Immer across a benchmark suite. SonicJS 3.0 – Headless CMS for Cloudflare Workers, built on Hono. v3 rebuilds the data layer, auth and plugin system. Homepage . query-string 10.0 – Parse and stringify URL query strings. Now throws for values it can't represent . ShareDB 7.0 – Realtime database backend based on operational transformation. 📰 Classifieds 📱 Expo is mobile AI infrastructure . Your agent writes the code, and Expo gets your iOS and Android app built and into the stores. Try it . 🧩 CAPTCHAs can frustrate real users and cost you conversions. Try Fingerprint’s bot detection for free and stop abuse without the friction. 📢 Elsewhere in the ecosystem 🔒 Node2Shell: ELLIO now reports exploit traffic in the wild for the Brotli RCE fixed in the Node releases (as mentioned earlier). The flaw is in Google's Brotli library, so bundled copies elsewhere need patching too . Sentry has given $1m to open source maintainers this year . JavaScript recipients include pnpm, TanStack, MSW, Knip and three Three.js maintainers, plus the OpenJS Foundation. 🎉 CSS-Tricks, the popular web dev resource, is independent again , now owned by longtime editor Geoff Graham. Arc, the design-led Chromium browser popular with developers, is being sunset with The Browser Company steering everyone to Dia . 📄 Google Docs can now open, edit and collaborate on Markdown files natively and Drive renders previews of them too.

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

As You Wake, Break the Shell [book]

Love, grief, connection and plants. This was a really endearing story of love unfolding. Sure, it's a bit twee, but it's a nice change from doom. Solarpunk I think. It makes me smile when I read the touching moments between Cora and Signey. There's a nice technical feature of this book that I've not encountered before. The early chapters are in the 50s, I can't remember exactly, but it might been chapter 52, then the following chapter would be 741, then we might go back to the 50s or continue in the 700s. I've read books that jump back and forth in time, but I find it really hard to keep track, because dates have meaning - whereas the jump in chapters simply indicated we've moved in a significant amount through time. I thought this was a brilliant method. My review is bouncing around quite a bit, but this really lived up to my expectations of a Becky Chambers book (I loved The Long Way to a Small, Angry Planet). There were so many moments I found myself smiling in a way that you might observing a tiny loving moment between two people. There's some interesting ideas brought up, specifically around what life and love is, but also in the context of plants, which did make me think a little (though I don't think that was particularly the purpose). Some of these ideas are similar to the idea that we might kill and eat a cow, but not kill and eat a cat, and the book doesn't try to explain it, but rather points to these contradictions. Also, the way it ends definitely lends itself to a further chapter in the story. I do hope we can follow these characters more (unlike the Wayfarers series which abandoned the characters of each previous book). I loved the story. This was a book that filled my cup.

Jens Oliver MeiertTop Front-end Bloggersread at source

Automatic Internal Linking in WordPress, a Plugin: ntrnllnk

To automatically improve internal links on your WordPress site, consider ntrnllnk to manage in-content links and related posts.

Chris HawkesYouTube ChannelsVideoWatch on YouTube

Claude Just Became a One-Person Marketing Agency

AdactioTop Front-end Bloggersread at source

Monday session

Level AccessCompany/Startup Blogs7 min read

What Is a Digital Accessibility Platform?

A digital accessibility platform is software an organization uses to find, fix, prevent, and report on accessibility barriers across its websites, applications, and The post What Is a Digital Accessibility Platform? appeared first on Level Access .

DigitalOcean BlogMulti Author Blogs5 min read

Three layers, all config: how DigitalOcean Managed Agents enforce NVIDIA OpenShell-aligned boundaries

A few weeks ago, we handed an AI agent one of the scariest jobs in infrastructure: moving huffl’s production backend from Supabase to DigitalOcean. huffl.ai is a real product. Underneath it sits 31 tables, 145,432 rows, three storage buckets, and about 31,000 vector embeddings.…

Dave RupertTop Front-end Bloggersread at source

Arc-like automatic picture-in-picture in Chromium

There’s a lot to miss about Arc (RIP), but the feature I miss the most has got to be automatic picture-in-picture. You start a video and when you change tabs to jump to another task, the video anchored itself to the corner of your desktop. Go back to the video tab and it slurps up into the video player area. A perfect experience with no interruption. I switched back to Edge (for work) and missed Auto-PiP a lot. I tried building a custom browser extension to restore the functionality myself but hit a platform limitation with the mix of WebExtensions , PageVisibility , and MediaSession APIs you need to get it to work seamlessly. You had to configure each site in a dropdown and run a script each MediaSession… it asked a lot of the user. There’s been a handful of Chromium flags and experiments to add “Auto-PiP” over the years, but nothing did it as well as Arc did… until… about://flags#browser-initiated-automatic-picture-in-picture Chrome 142 introduced a new browser-initiated-automatic-picture-in-picture flag and it behaves the same as Arc. The browser does all the work popping the video in-and-out when expected. I couldn’t believe this near-exact replica was hiding in plain sight all this time! But I couldn’t use it because the flag didn’t exist in Edge 😭 I started up a couple internal threads about it last year but it went nowhere. When the topic came up again this year, I mentioned to Greg Whitworth , “Y’know there’s a flag in Chrome that does Auto-PiP great…” and that next week the flag showed up in Canary and I’m happy to say it’s available today in mainline Edge 156. If you missed that feature in Arc and didn’t know it existed in Chrome or felt crushed by it not existing in Edge… then head over and turn on the flag today, I think you’ll be happy. The only thing it’s missing for me are the juicy physics-based animations that let you two-finger swipe and throw the picture-in-picture window around and pinch-zoom to resize. But it feels like the bones are there. And it feels like a good time to remind my fellow Edge users that Edge has a little feedback form inside the Three Dots menu > Help and Feedback > Send Feedback.

CSS-TricksThe Giantsread at source

CSS-Tricks has a new owner!

Yes, I've got the keys to the castle, so to speak. And, even after 12 years of working on the site, I'll admit I'm a little overwhelmed and nervous about that. CSS-Tricks has a new owner! originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

SyntaxPodcastsAudioListen

1050 - Everyone Is Hacking Their TV

Wes, Scott, and CJ run through the week’s biggest web dev news: everyone’s hacking their TVs, VoidZero open-sourced its Void framework with Cloudflare deploys, OpenCode got hacked, and Anthropic built its own git replacement. Plus DeepSeek V4.1 Flash, Cloudflare’s security audit…

Net NinjaYouTube ChannelsVideoWatch on YouTube

GitHub Copilot App Tutorial #2 - Adding Projects

Net NinjaYouTube ChannelsVideoWatch on YouTube

GitHub Copilot App Tutorial #1 - Intro & Setup

Jim Nielsen’s BlogMore Front-end Bloggersread at source

Why My Dad Didn’t Have a Cell Phone

Here’s Dave Rupert writing about all those emails, texts, phone calls, etc. we’re getting these days: Once upon a time it had utility, now it’s all noise and grifter slop demanding our attention and giving us to-dos That last part really hit: “giving us to-dos”. I feel this. So many of the messenger apps on my phone are other people laying claim to my time and attention. It reminds me of an interaction I had with my Dad years ago. This was back when cell phones were starting to become ubiquitous. Not smartphones , mind you. Cell phones, i.e. telephones that were mobile. Texting wasn’t really a thing yet. These were devices for making voice calls wherever you went. As a teen, it seemed like everyone had one: my teachers, my friends, even my friends’ parents. But not my parents. They were “behind the times”. (Everyone was getting cell phones and we didn’t even have caller ID on our landline!) One night at family dinner I asked, “Dad, why don’t you have a cell phone?” His response? “Why would I want to allow other people to contact me whenever they want?” I still think about that. Reply via: Email · Mastodon · Bluesky

The Mozilla BlogBrowsers, engines, etc.3 min read

Firefox reunites meme royalty to remind you what the internet used to feel like

A group of familiar faces from the early web just got back together to ask an important question: What happened to the internet? Sure, there was a time when it was a little less polished, and a lot less speedy, but it was yours. Overly Attached Girlfriend may have wanted to know everything about you, […] The post Firefox reunites meme royalty to remind you what the internet used to feel like appeared first on The Mozilla Blog .

Speckyboy Design MagazineDeveloper/Designer News4 min read

How AI Fuels the Web Security Goldrush

AI has quickly become a key tool for the modern web. Developers, web hosts, and site owners are adopting it to reduce costs, increase efficiency, and serve customers (we can... The post How AI Fuels the Web Security Goldrush appeared first on Speckyboy Design Magazine .

Stéphanie WalterMore Front-end Bloggersread at source

Pixels of the Week – October 25, 2026

This week we explore the “disability dongle” problem, ecommerce accessibility issues that get customers stuck, and the double-edged sword of AI-generated prototypes. Also, don’t miss some horror graphic novels for Halloween and a gaming database for parents!

Remote SynthesisMore Front-end Bloggersread at source

The Joy of Programming

Coding brought two kinds of fulfillment: creativity and problem-solving. AI has dramatically impacted both, to opposite effect.

HTML All The ThingsPodcastsAudioListen

Online Security: Are We F*cked?

AI is finding security holes in old code - but is that making the internet safer or giving attackers more opportunities? After a week spent patching websites, Matt and Mike discuss PHP vulnerabilities, reports of exposed credentials, and the pressure on developers to respond.…

Mux BlogCompany/Startup Blogs8 min read

What the iPhone Duo means for web development

Which web APIs can you use on the iPhone Duo? We test Device Posture and Viewport Segments in Safari, then build a folded-screen player with Video.js v10.

DigitalOcean BlogMulti Author Blogs4 min read

Prompt Caching is GA on DigitalOcean Serverless Inference: Up to 90% Off the Context Your Agents Resend

Prompt caching is now generally available on DigitalOcean Serverless Inference, across supported models in our open model catalog, with no changes to your request code required. Cached input is billed at up to 90% off and time to first token drops by up to 80%.* An agent never…

Geoff GrahamMore Front-end Bloggersread at source

I’ve never been as nervous to publish on CSS-Tricks since my first article in 2015.

Dave RupertTop Front-end Bloggersread at source

Bad at email

Good friends and family know this, but I am bad at email. Like chronically bad. If you have tried to email me, you know this too and you either never got a reply or received one 9-months later starting with the phrase, “Sorry.” I am truly sorry… but also I’m not. It’s a function of who I am. I was never great at email, but in a slower time before social media it raptured my attention. I would habitually refresh my inbox hoping for a long range communication from a friend or stranger. When I was homesick in Japan, a good email (or AIM chat) could turn my day around. I have fond memories of email and its unparalleled ability to connect me to other people through a single address. It of course would never be as familiar or intimate as scribing a hand-written calligraphic letter with a big feather pen, but it proved a fine substitute. At Paravel, I noticed that emails had a propensity to crash into my day with some new urgent task. A ding, a red badge, a bouncing icon in the dock . Could be a client or my accountant; something that required me to stop what I was doing and switch over to their need. Frank once described emails as (paraphrasing) “a to-do you send to someone else” and that resonated in my soul. For someone with an attention regulation disorder, intermittent distractions like email (or chats) can be devastating to staying focused on the work I actually need to finish. Email being disruptive to your productivity must be a pretty common phenomenon because nearly all the productivity books out there –and I’ve read them all– attempt to “solve” productivity by turning off your notifications and checking your email less. I must have really taken this advice to heart because I almost never check my email anymore. After a long day of expending dopamine on work, the last thing I want to do at home is check my personal email and receive more to-dos from strangers. I tend to check my personal email now once a week… or less. Inbox Zero is a fool’s errand for me, but I try to keep my work email groomed and as close to zero as possible. Part of that was because I started with a blank slate and could actually succeed. Each morning I make an analog to-do for myself to check my work email. I set up some priority inboxing and auto-deletes for org-level notifications. Importantly, work email stays sequestered to my work laptop. But despite the success at work, I’m sitting at nearly 500+ unreads in my personal Inbox. It doesn’t feel great and feels like a monumental task now. Since starting at Large Company I know of at least two conferences that I’ve missed out on speaking at because I’m so bad at email (sorry, PPK ). If you’ve ever wondered why I don’t have a contact form on my site or do that cool “email me, let’s be friends” link in my RSS footer, this is why… because I feel shame that I will disappoint you . There’s also the diminishing utility of email. As with phone calls and texts, the amount of spam and noise has ruined the service. It’s a needle in a haystack to find the one good email that actually deserves your attention. Just because we participated in online commerce once doesn’t mean you get the liberty to email me for the rest of my life. I wish there were more laws about this. When did a ten drip email campaign for every online transaction become the standard? You bought an item → Item is getting ready to ship → Want another item? → Item shipped → Need more items? → Item out for delivery → The holidays are coming up → Package delivered → Let us know how we did → Mother’s day coming up → Father’s day coming up → Step-father’s day coming up → etc… It’s entirely too much. And the grifter slop… oh, my God the grifter slop! Hey Dave, I came across your now-defunct company Luro. Design systems is an interesting space. Would you like to increase Luro users by six billion percent through spam email blasts? We can help. Chad, CEO I will never reply to this and– Dave, I thought I’d follow up in case you missed the last email. I’m a fucking robot obviously but we can have a conversation about this. Chad, CEO Grifters, spend six minutes crafting a real email and I promise you it will convert better. Or have an actual fucking product that is so good I hear about it from other people. You are one of five hundred anonymous Chads in my inbox, this pickup line doesn’t work anymore. Along those lines… Democrats, sending text messages doesn’t work anymore. I got AOC, Nancy Pelosi, Beto, and even Raphael Warnock’s grandma texting me every other day and it makes you look broke and desperate like a friend I’m gonna need to bail out of jail again. Capture me with ideas. That’s how I feel about email. And text messages. And phone calls. And social media. Once upon a time it had utility, now it’s all noise and grifter slop demanding our attention and giving us to-dos. Be hotter, be smarter, be more liberal, be more productive, be more, be more, be more. Oh, and I underpaid my taxes and owe the government $5400. That was the email I missed.

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Gemini 4 Argon API Crash Course

Smashing MagazineThe Giants3 min read

Accordion Icons: Which Work Best?

A closer look at accordion icons, why split menus are harmful, and why it’s better not to have icons and text labels link to different actions. Plus, why the caret is the safest icon choice. You’ll find more [useful guides](https://www.smashingmagazine.com/category/guides/) and [online workshops](https://smashingconf.com/online-workshops) here on Smashing Magazine, so make sure to browse and explore.

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

On CMA’s proposed NFC access conduct requirement for Apple’s iOS

If the title of this post didn’t get your pulse quickening, you’re probably in a coma. Sorry if it’s a bit clickbaity. On Tuesday, the daring, dauntless and doughty defenders of digital diversity at the UK’s competition regulator published their Proposed NFC access conduct requirement for Apple’s mobile platform. You might be wondering why contactless […]

Jens Oliver MeiertTop Front-end Bloggersread at source

HTML Minifier Next: Extended Benchmarks, Self-Close Foreign Elements, Fewer Redundant Attributes, JSON Minification Opt-In

On the most recent changes to the super-configurable web page minifier.

Level AccessCompany/Startup Blogs10 min read

How to Choose an Enterprise Accessibility Platform

The best enterprise accessibility platform covers your digital estate, builds accessibility into design and developer workflows, pairs automation with human expertise, and proves The post How to Choose an Enterprise Accessibility Platform appeared first on Level Access .

Bram.usMore Front-end Bloggers1 min read

GTA.js, a reimplementation of the 1997 Grand Theft Auto engine in JavaScript and WebGL

Here’s a little sideproject I’ve been spending my tokens on: https://gtajs.wtf/ It’s a reimplementation of the 1997 Grand Theft Auto engine in JavaScript and WebGL.

Wes BosYouTube ChannelsVideoWatch on YouTube

3D Model Anything

Web Tools WeeklyMulti Author Blogsread at source

Web Tools Weekly Issue #692

JS Libs, AI Tools, Media Tools

DequeMulti Author Blogs7 min read

Find Label in Name issues in every scan with Axe-core 4.14.0

With our latest update, when you scan with Axe-core 4.14.0, you’ll now get a result for any control whose accessible name doesn't contain its visible label. This Axe-core release also speeds up scans, makes fix instructions clearer, and begins support for EN 301 549 v4.1.1, the pending update to the European Union’s (EU) harmonized standard for accessibility requirements. The post Find Label in Name issues in every scan with Axe-core 4.14.0 appeared first on Deque .

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

MCP Security Fundamentals Course

Wes BosYouTube ChannelsVideoWatch on YouTube

my office is complete

Jonathan SnookTop Front-end Bloggers2 min read

New iPhone

My social media was abuzz around the launch of the new iPhones. I have a 15 Pro Max and was thinking that the 18 might be the generation I’d make the upgrade for. I used to do every other year but I didn’t see the leaps and bounds in improvements with the 17 to tickle that FOMO…

Chris HawkesYouTube ChannelsVideoWatch on YouTube

Where Programmers Go From Here

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

🔊 Voice design and voice replication with Gemini 3.8 Flash TTS

DigitalOcean BlogMulti Author Blogs10 min read

Critical PHP RCE Vulnerabilities: Patch Now (CVE-2026-109618, CVE-2026-109619)

DigitalOcean is aware of two critical remote code execution (RCE) vulnerabilities in PHP, tracked as CVE-2026-109618 and CVE-2026-109619 , publicly disclosed on October 21, 2026. Either allows an attacker to execute arbitrary code on a server running PHP, potentially resulting…

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

Design and replicate voices with Gemini 3.8 Flash TTS

Jim Nielsen’s BlogMore Front-end Bloggersread at source

No Need for Retirement When Utopia Is Around the Corner

I’ve mentioned before my interest in the history and development of nuclear weapons . Currently, I’m reading The Doomsday Machine: Confessions of a Nuclear War Planner by Daniel Ellsberg (of Pentagon Papers renown). In the first chapter, Ellsberg talks about his time working at the RAND Corporation during the missile gap years when the U.S. thought it was falling behind the Soviet Union in nuclear capabilities. Many of his descriptions sound strikingly similar to the rhetoric coming out of places like Anthropic. For example, note the religious overtones of working at a corporation: I loved RAND, where I ended up spending ten years [...] Much, I imagined, like members of a religious order would, I shared with my colleagues a sense of brotherhood, living and working with others for a transcendent cause. They were insiders : burdened with the responsibility of knowledge others did not possess. precisely in my early missile-gap years at RAND and as a consultant in Washington, there was our sense of mission, the burden of believing we knew more about the dangers ahead, and what might be done about them, than did the generals in the Pentagon or SAC, or Congress or the public, or even the president. It was an enlivening burden. And what was their “enlivening burden”? Saving the world: [My colleagues] shared a feeling—soon transmitted to me—that we were in the most literal sense working to save the world. What really stood out was this part, where Ellsberg describes how he and his colleagues truly believed the end was nigh: From the Air Force intelligence estimates I was newly privy to, and the dark view of the Soviets, which my colleagues shared with the whole national security community, I couldn't believe that the world would long escape nuclear holocaust. Alain Enthoven and I were the youngest members of the department. Neither of us joined the extremely generous retirement plan RAND offered. Neither of us believed, in our late twenties, we had a chance of collecting on it. This reminds me of the report that AI researchers have taken up smoking as a way to signal their belief that AI will cure cancer before smoking kills them. At this point, I wouldn’t be surprised to hear a lab like Anthropic announce they’re discontinuing all employer-sponsored retirement benefits. It’d be a small sacrifice on behalf of the employees to demonstrate their faith that universal high income is just around the corner. (The corporate cost savings would just be a nice bonus.) Reply via: Email · Mastodon · Bluesky

The Mozilla BlogBrowsers, engines, etc.3 min read

Still here, still yours: 5 reasons to choose Firefox

The internet used to feel like a community, not a commodity. Browsers were tools for exploration, and you could wander the web without feeling tracked everywhere. Today, as the web becomes increasingly surveilled and commercialized, Firefox preserves the magic, freedom, and fun of the early internet. Still open source, still independent, still privacy-focused. No billionaire […] The post Still here, still yours: 5 reasons to choose Firefox appeared first on The Mozilla Blog .

CodePenCompany/Startup Blogs1 min read

Chris’ Corner: We Heart CSS

It warms my old heart to hear Jason Santa Maria wax poetic about modern CSS: CSS has exploded! Flexbox, grid, many kinds of viewport units, variables, and on and on. So many things we used to patch in to extend CSS or turn to Javascript for are now just part of the spec. The ease […]

DigitalOcean BlogMulti Author Blogs10 min read

Product Security in the Post-AI Era

AI hasn’t changed what secure software looks like, but what has changed is almost everything about how software gets built. Security programs designed around old processes are anchored to points on a lifecycle that no longer exist. Last month, DigitalOcean’s Product Security…

Go Make ThingsMulti Author Blogs3 min read

The SpeechRecognition API

There’s an older deaf gentleman in my town who’s very friendly, and likes to communicate with rudimentary hand gestures, but I have a hard time understand what he’s trying to say. I’d love to learn American Sign Language (ASL) at some point (shoutout King Ron), but until then, I wanted an app that could convert speech into text. Every transcription app I found required a pretty expensive subscription… so I decided to build my own using web technologies!

DequeMulti Author Blogs7 min read

Debunking AI agent accessibility claims and solving AI alignment for accessibility

There is a digital accessibility approach that gives us the best of both worlds: the reliability and predictability of rules-based testing and the velocity of AI-powered automation. By taking this approach, we can close the gap between presumed and actual accessibility. The post Debunking AI agent accessibility claims and solving AI alignment for accessibility appeared first on Deque .

CSS WizardryTop Front-end Bloggersread at source

Web-Perf Wednesday 014 – Performance Budgets Need a Representative Worst

Performance budgets need a representative worst, while Safari changes identity resolution and Chrome improves module recovery and memory debugging.

SyntaxPodcastsAudioListen

1049: WTF is a Software Factory?

Scott and Wes talk with Adam Jacob about software factories: what they actually are, why they’re unique to each team, and how to build trust in agent-generated code. They dig into Swamp Club, black box testing, domain driven design, adversarial review for accessibility, and…

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

PostgreSQL Hybrid Search Course – Keyword (BM25) + Vector Retrieval

W3C NewsBrowsers, engines, etc.1 min read

W3C and the State of the Web in the AI Era

This W3C paper from the Strategy Team is intended to foster discussion in the technical community at TPAC — the most important W3C community event of the year — about how the W3C technical agenda for the web needs to evolve based on the rise of AI agents. It is part of building a consistent, coherent shared vision for evolving the web, starting with AI.

W3C BlogBrowsers, engines, etc.3 min read

Web of Things Working Group recharter: New momentum for IoT interoperability

The Web of Things (WoT) Working Group rechartered for two years to improve IoT interoperability and address physical AI use cases. WoT counteracts fragmentation in IoT by providing building blocks that enable seamless device integration across smart buildings, industrial automation, and energy management. Drawing on Plugfest insights, the new charter focuses on enhancing Thing Description expressiveness, introducing protocol bindings, and guiding AI agents.

Robin WieruchMore Front-end Bloggersread at source

Testing AI-Generated Code: Lint the Pattern, Test the Decision

Testing AI-generated code without the noise: lint the patterns coding agents follow, share one test harness, and add tests only where a file leaves its pattern.

Adam ArgyleTop Front-end Bloggers1 min read

Designing Whiskey Glasses with Denver Cramer

Denver Cramer on designing whiskey glasses, Starward x Lagavulin, kids and AI, and the banjo.

Frontend FocusMulti Author Blogsread at source

Ten CSS features worth voting for

🚀 Frontend Focus #​763 — October 21, 2026 | Read on the web Everyone's Interop 2027 Wishlists Last week we shared that you can now rank the Interop web platform proposals for 2027 . Since then, plenty of folks have shared their own rankings and explained their choices: ⭐ Josh Comeau's The Future of CSS – Josh's top ten, from CSS functions and corner-shape to anchored container queries and scroll-triggered animations, each with live demos, current browser support, and tips you can use today. A particularly good place to start. 🔎 Sara Soueidan's picks put accessibility first. It's a privilege, she notes, that we get to influence what browser makers work on. focusgroup is her top pick. ✏️ Declan Chidlow's 13 features – SVG improvements on top, followed by the CSS reading-flow and reading-order properties. 📝 More picks from Stuart Robson , Eric Meyer , Ana Rodrigues , and Tyler Sticka , and 🦋 this Bluesky thread has even more. Inspired to submit your own? Rank about ten proposals you'd like to see prioritized . The Firefox team says that's enough to provide useful input. Would You Let Your AI Agent Grade Its Own Homework? — Agents write code faster than ever. They even review their own work. But who’s reviewing them? Dropbox, Notion & ElevenLabs don’t take the risk. With Meticulous, every change is exhaustively verified, with zero developer effort. Meticulous sponsor 🗳️ The State of HTML 2026 — The annual survey returns to measure the awareness and adoption of HTML features and browser APIs. This year covers Web Components, progressive enhancement, AI, and more. It takes less than 15 minutes and you can learn new things just by taking it. Devographics Safari Blocks 'Identity Resolution' Tracking Infrastructure — Cross-site cookies are long gone in Safari, so trackers moved to 'identity resolution' where third parties get the email address you type into forms and turn it into a cross-site, cross-device tracking ID. Safari now blocks them at the domain level. Wilander, Wolfe, and Finkel (WebKit) ⚡️ IN BRIEF ⚠️ If PHP runs anywhere behind your sites: PHP 8.5.12, 8.4.27, 8.3.36 and 8.2.35 fix two critical bugs that allow unauthenticated remote code execution. Update now, mod_php installs especially. 🌐 Chrome 157 is in beta with corner shorthands, a value for text-overflow , and anchor-valid . Chrome 156 went stable this week with CSS random() . 🚫 Chrome has finished deprecating the unload event : handlers no longer fire by default, so use pagehide or visibilitychange instead. 📙 Articles, Opinions & Tutorials JPEG XL vs AVIF for Web Use-Cases — Now that JPEG XL has landed in all major browsers, Jake took the format for a spin, benchmarking it against AVIF. There's a lot of detail here with some good takeaways. You might also be surprised at what you can cram in under 200 bytes with JPEG XL. Jake Archibald Embracing Playful Imperfection with CSS's random() Function — A look at how to approach adding some randomness into our projects, and whether it makes sense on the web. The demos here show off some ideas, like organic typography, bouncing letters, and splayed cards. Brecht De Ruyte Photorealistic 3D in the Browser Without the Rendering Overhead — Learn how radiance fields and spatial streaming bridge real-time photorealistic 3D to the web with just 2 lines of Three.js. Miris sponsor Fitting an Element's Height to Its Background Pattern with calc-size() — A repeating pattern cut off at the bottom is a classic annoyance. Ahmad uses calc-size() (Chromium only for now, Safari soon) with round() to snap an element's auto height to a multiple of the tile height. Ahmad Shadeed Core Web Vitals Now (Experimentally) Count Soft Navigations — Most sites won’t notice, but navigation-heavy SPAs should see scores improve, with Search Console switching over when it goes stable next year. Annie Sullivan (Google) Using Math to Balance Your Heading Styles — Craig outlines a simple system for styling heading levels using a modular scale. Craig Abbott ▶ Do We Really Need alpha() ? — We now have three ways to lower the opacity of a color in CSS. Kevin has the details, highlighting what the alpha function brings to the table in particular. Kevin Powell WCAG 3: A Different Future for Accessibility — Why binary pass/fail made WCAG 2 a ceiling, and how WCAG 3 aims to make conformance a floor. Léonie Watson (TetraLogical) Compression and Concatenation on the Web — A hands-on look at how gzip, brotli and zstd each cope with concatenation on the web. Phil Eaton Do Web Components Have a Future If Nobody is Writing Them? Nolan Lawson 🧰 Tools, Code & Resources 📊 Chartist 2.0: This Lightweight SVG Charting Library Is Back — A freshly modernized SVG charting library that you style with CSS. It originally popped up in 2014, but "went stale" . It's back with a composable API, server-side rendering, and still remains small. There's a migration guide for existing users. Gion Kunz et al. A DevTools Extension for Debugging CSS Scroll-Triggered Animations — Adds a pane to Chrome DevTools that draws a scroll-triggered animation's activation and active ranges on a minimap, shows a live status light, and lets you edit the ranges in place. Chrome Web Store , or source here . Bramus Van Damme Mobile AI Infrastructure for Web Devs Who Code with Agents — Point the agent you use for the web at iOS and Android. Expo takes care of the native builds and the trip to the stores. Expo sponsor Pele: Mermaid Diagrams as Lightweight, Themeable SVG — A zero-dependency renderer for the Mermaid diagram syntax that outputs responsive SVG you can theme with CSS variables. It claims to be a sixth the size of Mermaid.js. You can try the playground here . Steph Ango (Obsidian) pour: A Free Accessibility Checker & WCAG Audit Tool — Available as a browser extension or bookmarklet. Run it on any page to see an overlay with violations categorized as critical, serious, moderate, minor, etc. David Yarham 🤖 Lighthouse for Claude Code: Turn PageSpeed Audits into a CLAUDE.md Fix Plan — Enter a URL and this tool will run a Google PageSpeed Insights and Lighthouse audit and generate instructions for Claude Code tailored to the audits. Baris Kocdur 3dsvg: The Easiest Way to Turn SVGs Into 3D — A web-based editor that takes an uploaded SVG, text, or drawing and renders the flat image as 3D. Exports in a 3D software compatible format such as GLB, STL, etc. Renato Costa 🔤 A font that annotates itself Furifont: A Japanese Font That Draws Its Own Furigana — Furigana, the small readings above kanji, usually mean using markup or JavaScript. Anthony's font does it with OpenType features alone! Repo here . Anthony Fu

Jens Oliver MeiertTop Front-end Bloggersread at source

How to Set Up Web Page Minification With Jekyll

Install, add plugin, done.

Ben FrainMore Front-end Bloggersread at source

Colour variants from base colours with OKLCH, CSS relative color, and CSS functions

Many others have covered the manipulation of colour in CSS. This is me documenting what has worked for me, practically, 'in the wild'. It is a common requirement to need a variant of an existing colour. Think about the borders for a visual pod/component; it may have a background colour but you need some variant […]

Level AccessCompany/Startup Blogs11 min read

What Is a VPAT? A Guide to VPATs and ACRs

A Voluntary Product Accessibility Template (VPAT®) is a standard form for reporting product accessibility. Once completed, it becomes an accessibility conformance report (ACR) The post What Is a VPAT? A Guide to VPATs and ACRs appeared first on Level Access .

HTML All The ThingsPodcastsAudioListen

10 Easy SEO Wins You're Probably Overlooking

Improving your website's SEO doesn't always mean writing more blog posts, investing in expensive tools, or launching a massive content strategy. Sometimes the biggest opportunities are hiding in the pages you've already published. In this episode, Matt and Mike explore 10…

David BushellMore Front-end Bloggers2 min read

How not to migrate from Cloudflare DNS

So you’ve been shamefully using US Big Tech giant Clownflare for DNS? It’s time to find an inopportune time to migrate away to a “European alternative” . You absolute must not follow these steps on a busy weekend when you must leave for hours on short notice. […]

Go Make ThingsMulti Author Blogs1 min read

Documentation-Driven Development

Last week, I needed to make some pretty major updates to a web component in a design system I use for clients. I’m a big fan of TDD, but I wasn’t mentally in a place to write my tests first. I decided the easiest thing to do was document how the new component would work… before actually writing any code to implement the updates. It was an entirely ADHD-driven decision, but it unlocked something for me!

Josh Comeau's blogMore Front-end Bloggersread at source

The Future of CSS ✨

Every year, browser vendors collaborate via the Interop project to synchronize their efforts on new HTML/CSS/JS features. This year, there’s a ton of super exciting features being considered! In this blog post, we’ll explore the CSS of the future, to get a glimpse of what we’ll soon be able to do.

CodePenCompany/Startup Blogs1 min read

445: CodePen AI is Here

Chris and Alex are talking this week about CodePen’s biggest release since the 2.0 drop. It’s live! We’ll be working on CodePen AI forever, since it’s a fast-changing technology that regularly adds new abilities. That sounds like a trite thing to say, but we lived it as we were building this. We started out playing […]

Jeffrey Zeldman PresentsMore Front-end Bloggersread at source

Figma Tips and Shortcuts

℅ Automattic Design: The post Figma Tips and Shortcuts appeared first on Jeffrey Zeldman Presents .

Smashing MagazineThe Giants15 min read

Embracing Playful Imperfection With The CSS `random()` Function

Design systems thrive on consistency, so where does randomness fit in? Through playful demos of organic typography, bouncing letters, and splayed cards, Brecht De Ruyte shows how the new CSS `random()` function brings a little imperfection to the web without JavaScript libraries or preprocessor loops that generate hundreds of lines of static CSS.

The Mozilla BlogBrowsers, engines, etc.4 min read

Why is the CMA asking us to choose the furniture before the house? The UK’s search choice screens need browser choice screens alongside them

Mobile browsers are a key gateway to the internet for 56 million people in the UK. Smartphone users spend around half an hour a day in these apps, and opening a browser is the most common way they look up information online. Yet most people are using a smartphone browser that was preinstalled and set […] The post Why is the CMA asking us to choose the furniture before the house? The UK’s search choice screens need browser choice screens alongside them appeared first on The Mozilla Blog .

W3C NewsBrowsers, engines, etc.read at source

First Public Working Draft: Animation Triggers

Defines CSS properties and an API for creating mechanisms that affect animation playback, based on DOM events resulting from user interaction, or on entry/exit of ranges on animation timelines.

JavaScript WeeklyMulti Author Blogsread at source

The up to 8x faster Rust port of TypeScript

#​807 — October 20, 2026 Read on the Web JavaScript Weekly tsrs: Cloudflare and VoidZero's Rust Port of TypeScript — A Rust port of the Go-based TypeScript 7 compiler, built with some input from the TypeScript team and heading into Oxc . Benchmarks claim up to 8x the speed of TypeScript 7.0 and it runs in WebAssembly. Experimental, but npx tsrs works. Chen, Mitropoulos and Nakazawa (Cloudflare / VoidZero) 💡 Max Schwenk started the port with agents writing the code, and tells the full tale here , including how it took his company's typecheck from 80 seconds to 7. Send Webhooks from Your TypeScript API in Minutes — One typed npm package, one call per event. Svix handles retries, signing, delivery logs, and a portal for your customers, so you don't build any of it. Resend sends 200M+ webhooks a year through it. Svix sponsor Thank You, Deno: Competition Keeps JavaScript Moving — Last week we covered Deno joining Cloudflare and the future of the Deno runtime. Deno was valuable, says Darcy, as it (and Bun) made the entire ecosystem better by pushing Node and npm to adopt its best ideas. Darcy Clarke (vlt) IN BRIEF: 🔒 Next.js has patched two critical RCE flaws : one in use cache functions via an upstream React Server Components bug and one in the image optimizer's SVG handling. Upgrade to 16.4.1 or 15.5.28; a public PoC is already out. 🔒 Node.js security releases are due tomorrow for the 26.x, 24.x and 22.x lines, with the highest severity issue rated high. Bun compiling JavaScript ahead-of-time, previewed a few weeks ago , now has a draft PR to produce binaries with no JIT or bytecode. RELEASES: Node.js v26.12.0 (Current) and v24.22.0 (LTS) – 26.12 can now synchronously load most ES modules and marks the config file stable; 24.22 gains util.throttle and util.debounce . Astro 7.4 – Adds a --timings flag for astro build to see where build time is spent, plus experimental parallel prerendering across worker threads. React Router 8.5 – Deprecates its own view transition APIs in favor of React's ViewTransition > component, and adds an experimental 'API-only' mode. Pretext 1.0 – Multiline text layout without touching the DOM. 1.0 ports browsers' own line breakers, so results more closely match what would render. React Native 0.88 , Elysia 2.0 RC , ESLint 10.13 , tsup 9.0 , Vuetify 4.3 📖 Articles and Videos The Tetris Script That Becomes Snake Once Prettified? — You'd think pretty-printers and deobfuscators at least leave a script's logic alone, but no. See how chaining semantic quirks in such tools can turn the 'cleaned up' output into a different program! Robert Vähhi (TrustSig) Do Web Components Have a Future If Nobody is Writing Them? — Nolan has spent years building and defending web components, so this thoughtful, if a little melancholy, piece carries some weight. Nolan Lawson Your CI Was Built for Humans. Your Agents Need Something Else — Expo is mobile AI infrastructure. Your agents build, test and ship iOS and Android apps in the background. Expo sponsor ▶ ViteConf 2026: The Full Replay — Last week's ViteConf brought ~30 talks including Evan You's keynote on tooling in the agentic era, plus updates on Vitest 5, Vite DevTools, and a faster parser coming to Oxc. It's 10 hours, but there's a hero with timestamps in the comments. ViteConf 💡 One of the bigger announcements: Void, the Vite team's full-stack SDK and deploy platform, is now open source . How to Gaslight JavaScript Programmers (with Proxies) — Proxy , introduced as part of ES6 back in the day, has plenty of practical uses but can also make objects behave in curious, unexpected ways. Complete with live, editable examples. Bryan Gillespie How Miro Moved 70,000 Tests from Jest to Vitest — The story of moving ~70,000 tests across an 800-package monorepo to Vitest, with AI agents doing most of the laborious work. Sergey Nikitin 📄 Upgrading to Zod 4 Cut Our Worker CPU by a Third – A Zod 3 to 4.5 migration at 100 million parses a day. Chris Arderne 📄 Using replace() as an Iterator – An old regex-callback-for-side-effects idiom, benchmarked against alternatives. Eugene Lazutkin 📄 Recursion is DEAD and HTML Killed It – Hands-on with Chromium's experimental Declarative Partial Updates proposal. Dave Rupert 📺 NightMonkey: Compiling JavaScript Ahead of Time to WebAssembly – An hour-long VMIL 2026 talk from a Wasmtime engineer. Chris Fallin 🛠 Code & Tools Maplair: A Batteries-Included, Tree-Shakeable Fork of Leaflet — Still in alpha since last year, one of Leaflet's contributors has forked it, rolling in the 2.0 work plus rotation, fullscreen, search, heatmaps and more – all tree-shakeable. Simon Legner 💡 The same day, Leaflet's creator posted a candid update about his experiences living in Ukraine and a plan to get Leaflet 2.0 released. Embeddable DOCX, XLSX & PPTX Editor for Users and AI — Let your AI edit existing files via object-level APIs. Users review and keep editing the same file. Try Playground . Thinkfree sponsor 📊 Chartist 2.0: The Lightweight SVG Charting Library Returns — A CSS-styled SVG charting library from 2014 that "went stale over the last years" makes a comeback with a composable API, server-side rendering to SVG, terminal charts, and still ~12KB gzipped for a line chart. There's a migration guide for 1.x users. Gion Kunz et al. Pele: Mermaid Diagrams as Lightweight, Themeable SVG — Zero-dependency renderer for the Mermaid diagram syntax with responsive layouts and SVG you can theme with CSS variables. Around a sixth the size of Mermaid.js. Try the playground . Steph Ango (Obsidian) : A Rich Input Field with GitHub-Style Search Filters — A web component for GitHub-style search boxes: free text mixed with autocompleted key:value filters, highlighted in place. Bramus Van Damme Chokidar 6.0 – The file watcher behind much of JS tooling. Rewritten to check changes against the disk before reporting to avoid stray events after a burst of edits, say. Happy DOM 21.0 – Headless browser environment in pure JavaScript, popular for testing. Now blocks stylesheet and iframe loading by default . p-queue 10.0 – Promise queue with concurrency control. Now dependency-free and an EventTarget . Paper.js 0.13 and 0.14 – Vector graphics scripting framework for canvas. First notable releases in years. ( Homepage with demos .) 🕹️ LittleJS 1.27 – Dependency-free HTML5 game engine that now does 3D too. 🖼️ Skia Canvas 4.0 – Canvas API for Node, built on Skia. 📰 Classifieds 🕵️ Muse doesn’t announce itself. Meta’s AI agent browses like a real user. See how Fingerprint detects it by name and try free for yourself. 🎬 Your app needs video, not a video team. Upload any format to Hyperserve's API , get back MP4 on a global CDN. Ship video in an afternoon. 📢 Elsewhere in the ecosystem 🖼️ JPEG XL: The modern image format is now supported by all major browsers, with Firefox 158 the latest to enable it by default. Jake Archibald pits it against AVIF in this extensive review . What I find amazing is what it's able to render in under 100 bytes . NodeConf EU 2026: The ▶️ latest NodeConf EU talks are up, including James Snell's case for a common minimum API every runtime should support , plus sessions on V8 heap management and Emscripten and WebAssembly . A new social network: /dev/null is a GitHub-oriented social network for developers, built from scratch in 48 hours. It already has over 8000 members, including me . It's been a lot of fun so far!

Jens Oliver MeiertTop Front-end Bloggersread at source

How to Set Up Web Page Minification With VitePress

On minifying HTML as well as inline CSS and JS in VitePress projects.

Jim Nielsen’s BlogMore Front-end Bloggersread at source

No More Icons In Every Menu By Default

Have you heard the good news? I bemoaned the approach of putting an icon in every menu item by default which shipped with macOS Tahoe — but now it’s gone in Golden Gate! John Gruber wrote about this reversion back in June , including the fact that Apple’s new Human Interface Guidelines specifically call out Tahoe’s approach to menus as an example of what not to do on macOS. As the old saying goes, it takes a big man corporation to admit when they’re wrong. As I mentioned in my original post , one of the arguments I had in my quiver against this practice was “Apple doesn’t do it”. But once Apple started putting icons in all their menus in Tahoe, I lost a persuasive point in my argument. But now, I think I have an argument that’s even stronger than before! It’s no longer: “Apple doesn’t put icons in their menus.” It’s: “Apple tried putting icons in all their menus, and even they went back on it!” They designed it, shipped it, lived with it for a year, then publicly changed their guidance on it. To me, that’s a lot more persuasive than simply saying, “Apple doesn’t do this.” Choosing not to do something you’ve never done is one thing. Choosing not to do something you’ve done is experience . That’s the essence of life: learning by doing . Reply via: Email · Mastodon · Bluesky

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

AI can operate a screen reader. What does that actually test? [link]

Really like the framing of this article. It uses some very visceral (or easy to understand) examples of how people vs. AI would approach the problem space, and my feeling is that this kind of thinking works well when expanding well beyond the scope of accessibility (though this is an excellent place to start). The floor plan example is good, but it was this that particularly won me over: An AI agent starts with advantages a person doesn’t have. […] The agent knows the goal before it begins. […] A pass tells us the agent found a route, not what finding it was like. AI performs; people experience. Original link: nicolas-steenhout.com/ai-screen-reader-testing

Jeffrey Zeldman PresentsMore Front-end Bloggersread at source

Now Playing: “Side Two”

For your listening pleasure: 17 new tracks of instrumental music pulling from jazz-funk, Italian movie soundtracks, electronica, hip-hop, art rock and beyond. The post Now Playing: “Side Two” appeared first on Jeffrey Zeldman Presents .

SyntaxPodcastsAudioListen

1048: Deno Is Dead

Deno is shutting down and the team is heading to Cloudflare — Scott, Wes, and CJ break down what that means for the runtime, JSR, and workerd. Plus OpenCode 2.0 on durable objects, TanStack Start 1.0, SubQ Snap, Gemini 4 Argon, and Wes’s accidental $50 photo frame movement. Show…

W3C BlogBrowsers, engines, etc.2 min read

Improved thread navigation in W3C's mailing list archives

A new feature is available in W3C's mailing list archives, aiming to make it easier to read and navigate message threads.

Stéphanie WalterMore Front-end Bloggersread at source

Pixels of the Week – October 18, 2026

This edition explores agentic commerce interfaces beyond chat UIs. Don't miss a fun clock made from trash, a webcam theremin experiment, cool dataviz and tool to know if a book chapter will make you sad.

localghostMore Front-end Bloggers6 min read

Digital recipe management for fastidious cooks

Much like your favourite recipe websites, I'm not going to get straight to the point, I'm going to start with a backstory and you're not getting a skip link. Having grown up with a dad who read cookbooks for leisure, and who caused me to turn vegetarian for several weeks once at…

Jens Oliver MeiertTop Front-end Bloggersread at source

On Not Changing as You Grow Older

There is something to age and change, but it seems to have different explanations than closed-mindedness or resistance.

Go Make ThingsMulti Author Blogs2 min read

Life on Foot

We recently moved from a rural suburb in Massachusetts to a small coastal village in Rhode Island. It’s been transformative, and I wish I’d done it sooner! Trickle-Down Effects Unlike a city, a village has homes with yards. Unlike a suburb, a village has businesses and parks intermixed with homes. It’s the best of both worlds. Being able to walk or bike places has trickle-down effects. Instead of driving 20 minutes one-way to get groceries, I can ride my bike there in 5 minutes.

HTML All The ThingsPodcastsAudioListen

Would You Pay More for Hand-Coded Software?

As AI becomes capable of writing more software, could hand-coded apps eventually become the digital equivalent of handmade furniture or artisan jewelry? In this edition of the Web News, Matt and Mike debate whether people will ever pay a premium for software written by humans,…

Swizec TellerMore Front-end Bloggersread at source

No more tech debt

For the first time in my career we _completed_ a design system migration. The new math on big rewrites tickles my soul.

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

🧰 Builders building with Gemini Audio

Level AccessCompany/Startup Blogs11 min read

Can AI Make a Website Accessible?

AI generally cannot make a website fully accessible by itself. However, with proper skills, guardrails, access to vetted design systems, and human input, The post Can AI Make a Website Accessible? appeared first on Level Access .

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

🎵 Turning motion into music with Gemini

David BushellMore Front-end Bloggers3 min read

Cloudflare killed Deno and look I’m on TV!

““Didn’t you already say goodbye to Deno? Get new material!””I know, I know, but not even a week after declaring my friendship over with Deno they actually killed Deno! The runtime is going away, and sorry call me pessimistic, but I highly doubt a community fork of any value will survive for long. […]

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

Improving navigation experience in v0 with Next.js 16.4

How we used Partial Prefetching and a coding agent to improve navigation across v0 with Next.js 16.4.

Go Make ThingsMulti Author Blogs2 min read

The Village

About 14 years ago, we moved out into the rural suburbs. I loved the quiet, the abundant wildlife, and our proximity to farms. I didn’t realize just how often doing anything at all would require a car. The Sprawl Absolutely nothing was walkable. We lived at the very top of a very high hill, so things weren’t really bikeable either. Groceries, restaurants, entertainment, friends, the library, and so on… you need to get in a car and drive at least 15 minutes for all of it.

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

Reading List 362

Yikes, once again it’s been ages since I posted a reading list, as I’ve been shuttling between Brussels, London and Lawson Towers a lot. This reading list is courtesy of Vivaldi browser, who pay me decent money to fight for a better web and don’t moan at me for reading all this stuff. We’ve just […]

The Mozilla BlogBrowsers, engines, etc.2 min read

This map shows the most important asset that VC-backed companies need right now

What’s the most vital asset for an AI company today? For venture backed AI business, it might be “funding” or “revenue”. But, there’s another asset that’s just as critical: trust. At Mozilla, building technology that people and businesses can genuinely trust has been a long-standing, guiding principle. That’s why we’re supporting the launch of the Trustworthy […] The post This map shows the most important asset that VC-backed companies need right now appeared first on The Mozilla Blog .

freeCodeCamp.orgYouTube ChannelsVideoWatch on YouTube

Inside an AI Factory – Power, Cooling, and GPUs Explained

Smashing MagazineThe Giants10 min read

Is Your Organization Messing Up AI Adoption?

What can digital transformation teach us about AI adoption? Paul Boag revisits his book Digital Adaptation to show how lessons from the past can help organizations navigate the challenges of AI today.

Level AccessCompany/Startup Blogs5 min read

Accessibility Needs an Authority. Why Gartner Named Us a Leader

Level Access has been named a Leader in the inaugural Gartner® Magic Quadrant™ for Digital Accessibility Platforms, published October 5, 2026. This is The post Accessibility Needs an Authority. Why Gartner Named Us a Leader appeared first on Level Access .

Level AccessCompany/Startup Blogs17 min read

Comparing AI Accessibility Tools for Building and Testing Websites

AI accessibility tools are software that uses machine learning or large language models to help teams find, prioritize, fix, prevent, or report on The post Comparing AI Accessibility Tools for Building and Testing Websites appeared first on Level Access .

Level AccessCompany/Startup Blogs3 min read

Level Access Named a Leader in the Inaugural Gartner® Magic Quadrant™ for Digital Accessibility

Company positioned highest in Ability to Execute among all vendors evaluated STAFFORD, Va. — Oct. 16, 2026 — Level Access, a global provider The post Level Access Named a Leader in the Inaugural Gartner® Magic Quadrant™ for Digital Accessibility appeared first on Level Access .

ESLint BlogLibraries, Frameworks, etc.2 min read

ESLint v10.13.0 released

Highlights Several core rules have been updated to report more linting problems. no-use-before-define The no-use-before-define rule has been updated to account for the fact that IIFEs execute immediately by treating them as part of the execution context where they are defined…

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

📖 Explore custom voice narration with Gemini 3.8 Flash TTS

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

Turning raw hardware sensor data into music with Gemini

Jim Nielsen’s BlogMore Front-end Bloggersread at source

We Need All the Disciplines

From where I sit, figuring out what to build, building it, and shipping it are all part of the art of making software. Many disciplines have emerged through the years to facilitate this work: product, design, engineering, devops, etc. We need all these disciplines to make great, dependable software (granted, in different doses). Each brings different values and judgments; each sees things the others don’t. And including all might mean going a bit slower. Human collaboration may seem less “efficient” than handing the work over entirely to the machines. But inefficiency may be the cost of collaborating with humans, rather than extracting an output from a machine. We gain not only from their judgment and expertise in a particular discipline, but from the relationship, trust, and shared understanding that blossoms from making something together. As the old proverb says: “If you want to go fast, go alone. If you want to go far, go together.” Reformulated for today: If you want to go fast, go with the LLM. If you want to go far, go with your fellow humans. Reply via: Email · Mastodon · Bluesky

Jeffrey Zeldman PresentsMore Front-end Bloggers1 min read

Silly Old Bear

Remembrance of Poohs past. The post Silly Old Bear appeared first on Jeffrey Zeldman Presents .

Heroku BlogCompany/Startup Blogs3 min read

Front-End Web Deep Dive: Runtime Config

Runtime configuration has been brought to the Front-End Web Cloud Native Buildpack in a way that is standard, secure, and requires zero re-builds. By revisiting Twelve-Factor principles through the lens of modern web standards, we have created a strategy that works for any framework. The post Front-End Web Deep Dive: Runtime Config appeared first on Heroku .

DigitalOcean BlogMulti Author Blogs23 min read

Building a computer that can pause and resume in milliseconds: Inside the MicroVM architecture behind Managed Agents

An agent starts a test suite, edits a file, calls a model, and waits. Later, it resumes work with the same processes, files, and context. Sometimes it needs to fork that environment and try two approaches at once. These workloads force a tradeoff on conventional infrastructure.…

Microsoft Edge BlogBrowsers, engines, etc.4 min read

Faster protection, fewer interruptions: How Microsoft Edge is rethinking updates

At a glance Microsoft Edge is developing new ways to help security updates reach people faster with less disruption. A seamless-updates prototype shows how Edge could update while work continues. Available today, Restar The post Faster protection, fewer interruptions: How Microsoft Edge is rethinking updates appeared first on Microsoft Edge Blog .

Google for DevelopersYouTube ChannelsVideoWatch on YouTube

Gemini 4 Argon in Antigravity

The Mozilla BlogBrowsers, engines, etc.5 min read

What does the (Fire)fox say?

It all started with a question: What does Firefox sound like to you? Over the past year, Mozilla developed a small but meaningful set of sounds to add a sonic dimension to the Firefox experience. When we started this process, we knew we wanted something warm, human, and representative of our open source identity. We […] The post What does the (Fire)fox say? appeared first on The Mozilla Blog .

Web Tools WeeklyMulti Author Blogsread at source

Web Tools Weekly Issue #691

Fimo Review, CSS/HTML, Testing, Uncats

LogRocket BlogCompany/Startup Blogs6 min read

Traditional GPT vs. looping Transformers: Key differences

Explore how looping Transformers reuse layers and compare with traditional GPT models in reasoning tasks. The post Traditional GPT vs. looping Transformers: Key differences appeared first on LogRocket Blog .

Jake Archibald's blogTop Front-end Bloggers64 min read

JPEG XL vs AVIF for web use-cases

JPEG XL has landed, but how does it compare?

Ana RodriguesMore Front-end Bloggersread at source

Goodbye sweet Jessie

This post has a content note of pet loss. Visit the link directly if you're okay with reading it.

Thoughts From EricMore Front-end Bloggers6 min read

My Interop 2027 Rankings

In which I explore why I ranked what I did for Interop 2027.

Zach LeathermanTop Front-end Bloggers1 min read

All of my 300+ browser tabs are beautiful

I am a habitual tab hoarder so I created a Firefox addon to help me manage every one of my very special browser tabs. Sort tabs by oldest, unload them, find duplicates, and consolidate tabs to a single window — buncha useful stuff in there! Download from Mozilla Addons Source…

Treehouse BlogMulti Author Blogsread at source

Treehouse’s CEO Built a Creative App with AI: Here’s What She Learned

Kari Brooks is not a professional developer, she’s the CEO of Treehouse. Using AI, she was able to turn a personal side project into a real digital product — and you can, too, with Treehouse’s AI Bootcamp, free to all... The post Treehouse’s CEO Built a Creative App with AI: Here’s What She Learned appeared first on Treehouse Blog .

Sara SoueidanTop Front-end Bloggers3 min read

My top picks for Interop 2027

I love the Web platform, and it’s a privilege that we, the web community, get a chance to influence what browser makers work on every year. For the second year in a row, Firefox has created a page that allows us to rank the Interop 2027 features that we care about the most.…

Zell LiewMore Front-end Bloggers2 min read

Redefining My Relationship With You

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

Kilian ValkhofMore Front-end Bloggers2 min read

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

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

DebugBear BlogCompany/Startup Blogs28 min read

Astro Tutorial: Build a Static Site with Interactive Components

This Astro tutorial shows how to build an interactive blog using file-based routing, build-time and live content collections, and the islands architecture.

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

web.dev BlogMulti Author Blogsread at source

New to the web platform in September

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

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?

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 👋🏼!

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…

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.

Calibre BlogCompany/Startup Blogsread at source

Lazy Loading Images: How loading="lazy" and eager Work

How far ahead Chrome, Firefox and Safari fetch loading="lazy" images, why a lazy hero image slows your page, and when to use eager and fetchpriority instead.

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…

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"

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

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…

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.

The Code BarbarianMore Front-end Bloggersread at source

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

Phil NashMore Front-end Bloggersread at source

Build a contact form with Astro and Resend

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

overreactedTop Front-end Bloggersread at source

How I Vibed a Proof of Conway’s Conjecture

You can just prove things, apparently.

Philip WaltonTop Front-end Bloggersread at source

Modern Web Types

Addy OsmaniTop Front-end Bloggersread at source

Brownfield Agentic Engineering

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

Adam SilverMore Front-end Bloggers2 min read

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

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

DigitalA11YMore Front-end Bloggersread at source

How to Test Touch Target Size for WCAG Compliance

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

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.

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…

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.

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

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.

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.

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.

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.

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…

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…

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…