Website of the week:

Littlebird

Design Systems Are No Longer Optional
Frontend notes, type experiments, and web things by Mandy Michael
https://mandy.dev/posts/design-systems-ai/

Reduce the JS Workload with No- or Lo-JS options
This is an organic collection of common JS patterns that can be replaced with just HTML, CSS, and no, or very low, JS. As HTML and CSS continue to mature, this collection should expand.
https://aarontgrogg.github.io/NoLoJS/

The Call to Action, Revisited The Call to Action hasn’t changed in a decade, but the bar has. A fresh look at prominence, copy, mobile tap targets, and accessibility, with lessons from three major design systems. https://unmatchedstyle.com/news/the-call-to-action-revisited.php

OverflowGuard — Build around content, not breakpoints
Build around content, not breakpoints. A React component that knows when content stops fitting. No media queries. No container queries. No magic numbers.
https://overflowguard.dev/

Fixing full-bleed CSS
The one where I apply some at-rule property magic.
https://dbushell.com/2026/07/03/fixing-full-bleed-css/

Fluid Typography with progress() – Master.dev Blog
With the progress() function in CSS we've got a new way to calculate the size for type based on the viewport without problems of the past.
https://master.dev/blog/fluid-typography-with-progress/

Getting Started with Anchor Positioning • Josh W. Comeau
For decades, one of the most notoriously-challenging problems on the web has been sticking one element to another element, for things like tooltips and nested menus. The CSSWG has decided to provide a first-class solution to this problem, and it’s pretty friggin’ cool! In this tutorial, I’ll share the most useful parts I’ve found from this modern CSS feature.
https://www.joshwcomeau.com/css/anchor-positioning/

432: Trends of 2026 (So Far)
Marie has her eye on what seems to be super popular with CodePen users so far this year. Galleries (in different directions) Custom Select shape(), border-shape, corner-shape scroll-timeline, anima…
https://blog.codepen.io/2026/07/03/432-trends-of-2026-so-far/

WordPress Security Keys and Salts: The Invisible Guardians of Your Website
Learn what WordPress Security Keys and Salts are, what they do, when to change them, and how to protect your site.
https://shapedplugin.com/wordpress-security-keys-and-salts/

Hampton took $440K in planned hires off the calendar

Hampton co-founder Joe Speiser had three roles budgeted: a data engineer, an ops manager, a PM. $440K. He installed Viktor on April 12. Forty-four days later, none are on the calendar, and 18 of his team work with Viktor daily. His VP: we are editors now, not creators.

Get Started for Free

Some Favorite Things

https://webaim.org/projects/million/

https://www.convertfiles.ai/

https://uxdesign.cc/we-become-what-we-behold-b552cad26702

https://youtu.be/-5lqJF5BTvo?si=OHbzknZhMll2h8E_

CODEPEN Pen of the Week

Pure CSS 3D Animation: Neon DNA Helix

Your competitor's growth lead already saw the spend spike.

While your team is still in standup, the other growth lead already got the alert. Viktor is an AI employee that lives in Slack. It watches your Meta and TikTok spend overnight, flags the underperformer by 7am, and drafts the new brief before your first meeting.

Get Started for Free

Website of the week:

Upsourced

Figma just made your design system debt everyone’s problem. Now use it.
For years, design system work lost the roadmap fight quietly. Config 2026 made the losing loud. That changes who has to care.
https://uxdesign.cc/figma-just-made-your-design-system-debt-everyones-problem-now-use-it-2e9ecb6272bf

You can't unit test for taste
I’m building In the Long Run where runners do virtual runs on famous routes around the world. The app tallies up your Strava mileage and plots your total distance as progress against country- or continent-spanning routes. The intention is to provide long-term inspiration and motivation; life is a marathon, not a sprint. You can have a bad month or season but still make progress on your virtual traversal of the world.
https://dev.karltryggvason.com/you-cant-unit-test-for-taste/

The organizational cost of low taste
When taste is weak, organizations don’t fail in strategy. They fail in decisions.
https://uxdesign.cc/the-organizational-cost-of-low-taste-135cb8b10c34

Repricing of Software Engineering Labor
As AI compresses implementation costs, the market is repricing software engineering labor—collapsing the premium for generalists while raising the value of deep expertise.
https://blog.grandimam.com/posts/repricing-of-software-engineering-labor/

How to design arrows
We’ve spoken super in-depth to Andrea Biggio, Caio Kondo, Francesca Bolognini and Valerio Monopoli about designing a single set of glyphs - one that’s as important and (literally) iconic as it is easy to mess up when designing it cohesively with your font. Arrows!
https://pangrampangram.com/blogs/journal/arrows

Karl Koch | On the semantic web
Semantic HTML is interface infrastructure: native elements carry behaviour, accessibility, form semantics, keyboard support, and platform adaptation before styling begins.
https://karlkoch.me/writing/on-the-semantic-web

Privacy-first email. Built for real protection.

Proton Mail offers what others won’t:

• End-to-end encryption by default

• Zero access to your data

• Open-source and independently audited

• Based in Switzerland with strong privacy laws

• Free to start, no ads

We don’t scan your emails. We don’t sell your data. And we don’t make you dig through settings to find basic security. Proton is built for people who want control, not compromise.

Simple, secure, and free.

Explore Proton’s benefits

Some Favorite Things

https://www.lukew.com/ff/entry.asp?2148

https://developer.apple.com/design/human-interface-guidelines/design-principles

://charcuterie.elastiq.ch/#0D40

https://lastmuseum.com/

CODEPEN Pen of the Week

Pseudo Squircle Shape & Border (Using SVG)

Website of the week:

dancerobot

Less is more, more or less
In the age of AI, knowing what not to build might be the most important skill of all.
https://jakub.kr/writing/less-is-more

Roadmap to 7.1 WordPress
WordPress 7.1 is set to be released on August 19th, 2026. This release advances how people work together in WordPress and opens up new functionality for all to benefit from. New Notes features, inc…
https://make.wordpress.org/core/2026/06/19/roadmap-to-7-1/

WordPress Developers Say New AI Feature Does Not Belong In Core
A WordPress Core proposal causes near unanimous pushback, with some questioning priorities and who the platform is ultimately for.
https://www.searchenginejournal.com/wordpress-new-ai-feature/580500/

Its Nice That
From Olivetti to Instagram: a short history of modern brand design
https://www.itsnicethat.com/features/katharina-sussek-jens-muller-the-elements-of-brand-design-taschen-publication-graphic-design-spotlight-170626

Human Dignity – On the Perils of Indifference
The Nuberodesign Blog
https://www.nubero.ch/blog/018/

Atlassian's DESIGN.md is here: what we learned testing portable design context in practice
We tested Google's DESIGN.md format against our MCP server and AI skills to see where a single portable markdown file fits in your design system tooling. Here's what we learned.
https://www.atlassian.com/blog/ai-at-work/atlassians-design-md-is-here-what-we-learned-testing-portable-design-context-in-practice

Show your hands honor for the strange power they bring you
On designing finger-friendly interactions
https://aresluna.org/show-your-hands-honor/

Ask for no, don’t ask for yes – Dan Moore!
https://www.mooreds.com/wordpress/archives/3518

Everything GTM. One platform.

Small teams don't have time to stitch together five tools and hope it works.

Apollo gives you everything you need to find leads, reach them, and close deals — all in one place:

• 230M+ verified contacts

• AI-powered outreach

• Data enrichment

• Inbound lead capture

• Meeting scheduler

• And more

Stop juggling tools and start building pipeline that scales.

With Apollo, the AI revenue engine powering 4M+ users.

Sign up for free

Some Favorite Things

https://brisqi.com/

https://charcuterie.elastiq.ch/

https://makersmanifesto.org/

https://asc11.com/

CODEPEN Pen of the Week

Figma Config 2026

Website of the week:

Black Forest Labs

Every Frame Perfect
Why care about every frame? It builds trust. Users can’t see the code, so UI is the only way for them to judge the quality of the app. If UI looks good, that means developers had time to polish it, which means that they probably spent a comparable amount of time to iron out the code. It’s a heuristic, but a reasonable one.
https://tonsky.me/blog/every-frame-perfect/

The Architecture of Focus
Most companies default to a schedule designed for managers that systematically destroys the cognitive capacity for the work they actually need. The fix is not to try harder. It is to redesign the environment, as exceptional thinkers have always done.
https://magnus919.com/2026/06/the-architecture-of-focus/

The Virtual OS Museum
Over 1,700 pre-installed operating systems spanning 1948 to today, in a single Linux VM. Bundled QEMU, VirtualBox, and UTM. One-click launchers for Windows and Linux.
https://virtualosmuseum.org/

The Web We Know Is Going to Disappear - Minid.net
Every generation of computing believes the interface it loves will last forever. It never does. I saw information move from floppy disks to BBSs, from BBSs to the Web, from the Web to Flash, from Flash back to open standards, from websites to mobile apps, and now from search engines to AI chat interfaces. The Web will not vanish overnight, but the Web as we know it, the open place where people search, click, read, browse, publish, and discover, is already being replaced by something more convenient, more centralized, and much harder to escape.
https://www.minid.net/2026/6/15/the-web-is-going-to-dissapear

Haptics design and implementation
Guidance for adding haptic feedback to improve clarity, support inclusion, and create more intuitive experiences.
https://microsoft.design/articles/haptics-design-and-implementation/

The ones showing up in LLMs convert 3× better than Google

They optimized for LLMs, not just Google.

FAQs. Comparison pages. Transparent pricing. LinkedIn presence. These aren't vanity plays. They're what gets you cited in ChatGPT, Gemini, and Claude when your buyers are researching, your investors are looking, and your future hires are deciding where to work.

Download the free AEO Playbook for Startups from HubSpot and get the exact checklist. Five minutes to read.

Unlock the playbook

Some Favorite Things

https://titlescream.cameronaskin.com/

https://informationisbeautiful.net/visualizations/the-billion-dollar-gram/

https://60fps.design/

https://fontjoy.com/

CODEPEN Pen of the Week

Fly a kite - CSS

Website of the week:

Base Habitation

Discovery vs Delivery
I want to weigh in on how AI can be used effectively within the design process. My bias here is that I’m on the tools — I’m spending my days migrating design systems for LLM legibility, learning new AI tools while also pushing project work, and thrashing around like a junior designer again moving a chunk of my process to prototyping first in code.
https://buzzusborne.com/writing/discovery-delivery/

CodePen Deployment / Hosting
Any 2.0 Editor Pen can become a live website on the internet! CodePen makes it extremely fast and easy: just the click of a button.
https://blog.codepen.io/docs/pens/deployment/

How I Validated Design Decisions Before Writing Production Code
The biggest shift AI has brought to design isn’t that designers can now write production code. It’s that we can finally generate evidence before committing to anything.
https://slack.design/articles/how-i-validated-design-decisions-before-writing-production-code/

Building Glass for the Web
https://aave.com/design/building-glass-for-the-web

The old typography is new again
Back in the days of metal and wood type, when setting text involved working with actual physical pieces of type, changing font size meant reaching into a different drawer. And the type in each of those drawers wasn’t a scaled version of its neighbour, but a unique design, created for that particular size.
https://elliotjaystocks.com/blog/the-old-typography-is-new-again

Context-aware headings in HTML
A common issue that we've probably all faced at some point is having a component that includes a heading, which sometimes should be an H2 and sometimes maybe an H3, depending on where it's used.
https://www.matuzo.at/blog/2026/content-aware-headings

CSS is filling the gaps with rules. A way to style gaps in grid and flex.
https://utilitybend.com/blog/css-is-filling-the-gaps-with-rules-a-way-to-style-gaps-in-grid-and-flex

The Speed of Prototyping in the Age of AI
https://darylcecile.net/notes/speed-of-prototyping-age-of-ai

SiteGround Faces Backlash After Automatically Installing AI Plugin on Customer Sites
SiteGround users are criticizing the hosting provider after discovering that its AI Agent plugin had been automatically installed on their websites after the automatic update to WordPress 7.0.
https://wp-content.co/siteground-faces-backlash-after-automatically-installing-ai-plugin-on-customer-sites/

See Why HubSpot Chose Mintlify for Docs

HubSpot switched to Mintlify and saw 3x faster builds with 50% fewer eng resources. Beautiful, AI-native documentation that scales with your product — no custom infrastructure required.

Simplify Your Docs Today

Some Favorite Things

https://uiverse.io/

https://grainient.supply/

CODEPEN Pen of the Week

Paper Textures — Pure SVG & CSS

Website of the week:

Henry Codes

CSS vs. JavaScript
Exploring the performance implications of different animation strategies
https://www.joshwcomeau.com/animation/css-vs-javascript/

Email Accessibility Report 2026
https://emailmarkup.org/en/reports/accessibility/2026/

Uber Caps Usage of AI Tools Like Claude Code to Manage Costs.
I wrote the other day about Uber blowing its 2026 AI budget in four months, and how that wasn't particularly surprising given they would have set that budget in 2025, before anyone could have predicted how popular token-burning coding agents were about to become.
https://simonwillison.net/2026/Jun/3/uber-caps-usage/

Our CSS isn't opinionated enough
For as long as I can remember, styling classes has always been pushed as "best practice" for writing CSS. Avoid IDs because they're too specific. Avoid styling tags directly because it's too broad. You can't get away from it. It's even baked into most of the linting tools we use every day. It's sensible advice, but I do think it has quietly trained several generations of developers to build things that look correct, yet communicate no semantics.
https://www.craigabbott.co.uk/blog/2026/our-css-isnt-opinionated-enough/

Moving away from Tailwind, and learning to structure my CSS
https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-/

VoidZero is joining Cloudflare
https://blog.cloudflare.com/voidzero-joins-cloudflare/

heerich.js
A tiny engine for 3D voxel scenes rendered to SVG
https://meodai.github.io/heerich/

Why I spent years trying to make CSS states predictable
Have you ever changed the order of two CSS rules and broken a component without changing the logic?
https://tenphi.me/blog/why-i-spent-years-trying-to-make-css-states-predictable/

Animation Vocabulary
A glossary of common animation patterns taught in the course. Use these names to describe what you want when prompting an AI.
https://animations.dev/vocabulary

Turn AI into Your Income Engine

Ready to transform artificial intelligence from a buzzword into your personal revenue generator?

HubSpot’s groundbreaking guide "200+ AI-Powered Income Ideas" is your gateway to financial innovation in the digital age.

Inside you'll discover:

• A curated collection of 200+ profitable opportunities spanning content creation, e-commerce, gaming, and emerging digital markets—each vetted for real-world potential

• Step-by-step implementation guides designed for beginners, making AI accessible regardless of your technical background

• Cutting-edge strategies aligned with current market trends, ensuring your ventures stay ahead of the curve

Download your guide today and unlock a future where artificial intelligence powers your success. Your next income stream is waiting.

Get Your Guide

Some Favorite Things

https://hugeicons.com/

https://mass-driver.com/article/md-ui-a-typeface-for-interfacing

CODEPEN Pen of the Week

https://codepen.io/Margarita-the-solid/pen/NPRPBjd

Website of the week:

SLUSH

The Web Is Fun Again: First Experiments with HTML in Canvas
Every once in a while, the platform drops something that makes you want to build strange demos again, or at least weirder ones. The new HTML in Canvas API is a perfect example of one of those moments.
https://frontendmasters.com/blog/the-web-is-fun-again-first-experiments-with-html-in-canvas/

The Companies Cutting Headcount for AI Will Lose to the Ones Who Didn't
Organisations using AI to cut headcount are making a short-term trade with long-term consequences. The ones holding their teams together and investing in how those teams operate with AI are building something more durable.
https://libertas.software/en/knowledge-hub/19/the-companies-cutting-headcount-for-ai-will-lose-to-the-ones-who-didnt

Multi-stroke text effect in CSS
https://yuanchuan.dev/multi-stroke-text-effect-in-css

Your website is not for you
https://websmith.studio/blog/your-website-is-not-for-you/

Timeless Colors of the
Explore color palettes extracted from thousands of masterworks — from Renaissance elegance to Impressionist light.
https://paletteinspiration.com/

Moda is the AI design agent with taste

Moda is an AI design product where you prompt what you need, get a complete on-brand design, and edit every element on a full canvas. 

Our viral launch hit 4.4M views in days, tens of thousands signed up, and executives at major finance and tech companies now use it.

Try Moda Free Today

Some Favorite Things

https://www.svgbackgrounds.com/

https://designsurface.dev/cascade

https://www.mockdown.design/

https://arcade.pirillo.com/fontcrafter.html

CODEPEN Pen of the Week

Light Card
https://codepen.io/editor/amit_sheen/pen/019e6bec-70b1-7a35-a0e2-733c6500e561

Website of the week:

1820 Productions

State of Web Dev AI Use 2026
https://2026.stateofai.dev/en-US

The Sites We Lost
Some sites we linked from the button don’t exist anymore. Some expired, some were squatted by gambling rings, some got ad-injected on top of what they were.
https://theuselessweb.com/sites-we-lost/

Defense Against Dishonest Charts
Charts are a window into the world. When done right, we gain an understanding of who we are, where we are, and how we can become better versions of ourselves. However, when done wrong, in the absence of truth, charts can be harmful.
https://flowingdata.com/projects/dishonest-charts/

The "Passive Income" trap ate a generation of entrepreneurs
https://www.joanwestenberg.com/the-passive-income-trap-ate-a-generation-of-entrepreneurs/

Articulation is design craft
How to build a chain of reasoning that anchors design decisions to business reality
https://www.designsystemscollective.com/articulation-is-design-craft-053e60dc16c6

Install web apps with the new HTML install element
Installing web apps has always required JavaScript. When you use the beforeinstallprompt event, the installation flow lives entirely in script. The new <install> element changes that: drop a single HTML element into your page and the browser renders a trusted install button for you, with no JavaScript required.
https://developer.chrome.com/blog/install-element-ot

The problem with media queries
In the following demo, we have a typical navigation pattern. On mobile, only the logo and the menu toggle are visible. At larger sizes, the navigation is visible and the menu toggle is hidden.
https://ishadeed.com/article/range-syntax/

If You Stop Hiring Juniors, Your Senior Engineers Own You
https://evalcode.com/posts/if-you-stop-hiring-juniors-your-seniors-own-you/

$20.8B in Redemption Requests. Percent Was Issuing Deals and Paying on Schedule.

Those requests came from non-traded BDC investors in Q1 2026, and most got back roughly half of what they asked for. Moody's U.S. BDC sector outlook: Negative.

On Percent's marketplace that same quarter: new issuances, scheduled payments, 0.44% lifetime net loss rate on asset-based deals since inception.† The difference is structural: concentrated corporate loans with redemption windows that close at manager discretion vs. asset-based finance with 6–24 month deal terms. 14.6% net ABS returns LTM after losses (3/31/26).† Starting at $500.

See how private credit works when it's built for individual investors.

_{Alternative investments are speculative. No assurance can be given that investors will receive a return of their capital. †Past performance is not indicative of future results. Terms apply.}

Some Favorite Things

https://arcade.pirillo.com/fontcrafter.html

https://terminaltrove.com/explore/

CODEPEN Pen of the Week

Search Form With Animated Search Button

Website of the week:

IronHill

The Boring Internet
The internet you grew up on isn’t dying. A commercial veneer glued on top of it is.
https://www.terrygodier.com/the-boring-internet

Before GitHub
https://lucumr.pocoo.org/2026/4/28/before-github/

The Human Creativity Benchmark
A framework for evaluating generative AI in creative work that separates convergence, where evaluators agree on best practices, from divergence, where they legitimately disagree because the question has shifted to taste.
https://contralabs.com/research/human-creativity-benchmark

Claude Design Is Not a Design Systems Tool. That's Okay.
A design systems practitioner's honest read on what it is, what it isn't, and where Figma actually sits in this picture.
https://southleft.substack.com/p/claude-design-is-not-a-design-systems

Design Was Never the Comps: What I learned when Claude Design dumped a dozen screens on me
https://christophernoessel.medium.com/design-was-never-the-comps-what-i-learned-when-claude-design-dumped-a-dozen-screens-on-me-73893af464ae

Dos & Don’ts of Anchor Positioning
https://www.oddbird.net/2026/04/16/winging-it-31/

Draftsmanship - The hand finds what the prompt misses
https://www.proofofconcept.pub/p/draftsmanship

Your next top performance-driven ad channel

Capturing attention across TV, search, and social is harder than ever.

Now there’s a way to reach high-intent audiences during the planning phase, on the biggest screen in the house.

Worth a look if you want to prove the value of spending on TV.

Get Started Today

Some Favorite Things

https://aatishb.com/patterncollider/

https://allsvgicons.com/

Color Converter

https://mw.rat.bz/wgterm/

https://nowigetit.us/

CODEPEN Pen of the Week

Mario Game

MARIO GAME

Website of the week:

Follow Art

Information Architecture (Still) Matters
https://saturdave.com/information-architecture-still-matters/

It's OK to Use Coding Assistance Tools To Revive The Projects You Never Were Going To Finish
https://blog.matthewbrunelle.com/its-ok-to-use-coding-assistance-tools-to-revive-the-projects-you-never-were-going-to-finish/

On sabotaging projects by overthinking
https://kevinlynagh.com/newsletter/2026_04_overthinking/

What a UX strategy is — and why most teams should write one
A UX strategy is a short document that says what good looks like for the people using your product, and how the team plans to deliver it. That’s it. No frameworks, no McKinsey decks, no 113 slides.
https://www.antonsten.com/articles/uxstrategy/

The death of design – LOL only jk design still alive.
https://nathanbeck.eu/essays/death-of-design/

Craft is Untouchable
AI doesn't threaten craft—the temptation to skip iteration does.
https://www.chrbutler.com/craft-is-untouchable

Agentic Coding is a Trap
Remaining vigilant about cognitive debt and atrophy.
https://larsfaye.com/articles/agentic-coding-is-a-trap

What I’m Hearing About Cognitive Debt (So Far)
https://margaretstorey.com/blog/2026/02/18/cognitive-debt-revisited/

Say user_id. Get user_id.

Wispr Flow recognizes variable names, file references, and framework syntax mid-dictation. Speak your prompt, get developer-ready text for GitHub, Jira, or your editor. No mangled syntax. Ever.

Try Wispr Flow free

Some Favorite Things

https://3dicons.co/

https://voxjong.com/

https://karlkoch.me/kk-sans/

https://typescale.ai/

CODEPEN Pen of the Week

Infinite Marquee Speed Control (hover to see the result)

Website of the week:

Habello

Building a UI Without Breakpoints
Breakpoints have dominated responsive design since we started building for the web. The model is familiar, convenient, teachable, and still widely used in production systems today.
https://frontendmasters.com/blog/building-a-ui-without-breakpoints/

Inverted themes with light-dark()
https://daverupert.com/2026/04/inverted-light-dark/

What Is CSS Containment and How Can I Use It?
https://csswizardry.com/2026/04/what-is-css-containment-and-how-can-i-use-it/

The Physics Of GPS
How geometry, stopwatches, and Einstein's theories work together to make GPS possible.
https://perthirtysix.com/how-does-gps-work

Bring Back Idiomatic Design
https://essays.johnloeber.com/p/4-bring-back-idiomatic-design

The Accessibility Problem Isn't Design. It's Engineering.
Audits get run. Boxes get ticked. Statements get published in footers. And then most teams move on. Nine months after the EAA deadline, it's worth asking what actually changed.
https://gbbns.co/journal/accessibility-problem-isnt-design/

Making emojis and icons screen reader accessible
https://blog.pope.tech/2026/04/01/making-emojis-and-icons-screen-reader-accessible/

You don't need to be technical. Just informed.

Most AI newsletters are written for engineers. This one isn't.

The AI Report is read by 400,000+ executives, operators, and business leaders who want to know what's happening in AI — without wading through code, jargon, or hype.

Every weekday, we break down the AI stories that matter to your business: what's being deployed, what's actually working, and what it means for your team.

Free. 5 minutes. Straight to the point.

Join 400,000+ business leaders staying ahead of AI — without the technical overwhelm.

Read it free today

Some Favorite Things

https://typescale.ai/

https://ukiyo-e.org/

https://karlkoch.me/kk-sans/

https://garden.bradwoods.io/notes/javascript/web-api/scroll-percent

CODEPEN Pen of the Week

Grid layout columns. center column

Website Of The Week

Thoughts and Feelings around Claude Design
I tried Claude Design yesterday and I have a theory for how this whole thing shakes out.
https://samhenri.gold/blog/20260418-claude-design/

The AI Chasm
Every week I see another LinkedIn post about how AI is going to transform everything. Another “X is dead” announcement and someone shipping their latest vibe coded project.
https://www.antmurphy.me/newsletter/the-ai-chasm

WordPress Enables Enterprise AI Plugin Standardization
https://letsdatascience.com/news/wordpress-enables-enterprise-ai-plugin-standardization-cdc8cc5b

Productive procrastination
The past few weeks, it feels like procrastination is everywhere. It might just be the frequency illusion — but it’s on my mind, so I need to write about it.
https://www.maxvanijsselmuiden.nl/blog/productive-procrastination/

Squash and Stretch
The little secret that makes animations feel alive ✨
https://www.joshwcomeau.com/animation/squash-and-stretch/

Six levels of dark mode
I’ve observed that on pretty much all the sites I’ve visited, dark mode was rather absent after the styles had been removed. This got me thinking, maybe it’s time to talk about the six levels of dark mode.
https://cssence.com/2024/six-levels-of-dark-mode/

On oklch
Every colour on this site is defined in oklch. Not hsl, not hex, not rgb. A single colour space, end to end: backgrounds, text, shadows, accents, borders, selection highlights. Here’s why, and how the system works.
https://karlkoch.me/writing/on-oklch

Works inside Cursor, Warp, VS Code, and every IDE.

Wispr Flow sits at the system level — dictate into any editor, terminal, or app with full syntax accuracy. No plugins needed. No setup per tool. 89% of messages sent with zero edits.

Start flowing free

Some Favorite Things

https://design.google/library/transparent-screens

https://webkit.org/blog/17660/introducing-css-grid-lanes/

https://colorflow.ls.graphics/

https://modern-css.com/

CODEPEN Pen of the Week

CSS Gradient Grid Paper

Website of the week:

Asket Studio

Aesthetics of AI
Observations on the Visual Identities of Standout AI Brands
https://www.acolorbright.com/en/insights/aesthetics-of-ai

SVG favicons that respect theme preference
SVG favicons are well supported now! Since this is a vector format, resolution is not a concern, and it can also adapt to user theme preferences.
https://pawelgrzybek.com/svg-favicons-that-respect-theme-preference/

The Great CSS Expansion
CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JavaScript for. Here is exactly how much that saves, why these libraries were painful beyond their size, and what the platform still hasn't figured out.
https://blog.gitbutler.com/the-great-css-expansion

Developing a Typography Boilerplate
Building a boilerplate that focuses on typography is an easy way to style the majority of a website or application’s content with relatively little effort, leading to a better final product.
https://sparkbox.com/foundry/creating_typography_boilerplate

The 3 C’s of Informational Microcopy
Well-written informational microcopy should be clear, concise, and have character.
https://www.nngroup.com/articles/3-cs-microcopy/

Some Favorite Things

https://stroke.abhii.space/

https://keyviz.org/

https://remixicon.com/

https://aethercss.lovable.app/

CODEPEN Pen of the Week

Responsive Image Slider ver.3

Responsive Image Slider ver.3

Website of the week (WOW)

juuicy

Weekly Intel

Taste is not a feature
On judgement, context, and why AI makes taste more important, not less.
https://uxdesign.cc/taste-is-not-a-feature-720ca15366c7

Craft is Untouchable
AI doesn't threaten craft—the temptation to skip iteration does.
https://www.chrbutler.com/craft-is-untouchable

Taste isn't a screenshot
I’ve started to wonder if we’ve confused collecting taste with having it.
https://www.antonsten.com/articles/taste-isnt-a-screenshot/

The Design Paradox
Design jobs are flat. The design process is "dead." So why does design matter more than ever?
https://www.linkedin.com/pulse/design-paradox-ethan-eismann-r8dyc/

Design Systems Report.
This year, we heard from 147 design system practitioners across organizations of all sizes—from scrappy startups to global enterprises. As always, our goal is to provide an honest snapshot of where design systems stand: the wins, the struggles, and the emerging opportunities.
https://report.zeroheight.com/

The Color System I Wish I Understood Sooner
Does your system for naming colors always feel like it falls short? This two-layer approach solves so many problems!
https://theadminbar.com/semantics-and-primitives-color-system/

Sprites on the Web
The basic idea with a sprite is that we create a single image that contains each individual frame of an animation in a long strip. Then, we display each frame for a fraction of a second, like a roll of film sliding through an oldschool film projector.
https://www.joshwcomeau.com/animation/sprites/

Daily news for curious minds.

Be the smartest person in the room. 1440 navigates 100+ sources to deliver a comprehensive, unbiased news roundup — politics, business, culture, and more — in a quick, 5-minute read. Completely free, completely factual.

Sign up now!

Some Favorite Things

UMS Gradient Generator

https://remixicon.com/

https://stroke.abhii.space/

CODEPEN Pen of the Week

::highlight() initial demo

Website of the week:

Mark Woodland

ARTEMIS II Mission Visualizer - live stream-ish
https://www.nasa.gov/missions/artemis-ii/arow/

Your options for preloading images with JavaScript
There are a number of ways to preload an image on demand with JavaScript — each with their own strengths & drawbacks. Let's explore them.
https://macarthur.me/posts/preloading-images/

Building a Scroll-Reactive 3D Gallery with Three.js, Velocity, and Mood-Based Backgrounds
A tutorial on building a scroll-driven WebGL gallery in Three.js with depth-layered images, palette-driven backgrounds, and motion that responds to scroll velocity.
https://tympanus.net/codrops/2026/03/09/building-a-scroll-reactive-3d-gallery-with-three-js-velocity-and-mood-based-backgrounds/

Pretext
It solves the problem of calculating the height of a paragraph of line-wrapped text without touching the DOM. The usual way of doing this is to render the text and measure its dimensions, but this is extremely expensive. Pretext uses an array of clever tricks to make this much, much faster, which enables all sorts of new text rendering effects in browser applications.
https://simonwillison.net/2026/Mar/29/pretext/

css-select
As a compiler, css-select turns CSS selectors into functions that tests if elements match them. As an engine, css-select looks through a DOM tree, searching for elements. Elements are tested "from the top", similar to how browsers execute CSS selectors.
https://github.com/fb55/css-select/blob/master/README.md#css-select----

Applying accessibility fixes with stealth for the greater good
Accessibility had never really played a significant role since I started working as a front-end developer in 2019. It didn’t have a significant role in my boot camp, or in YouTube tutorials I watched, and certainly not in my job.
https://piccalil.li/blog/applying-accessibility-fixes-with-stealth-for-the-greater-good/

An in-depth guide to customising lists with CSS
This first rule of styling lists is that they should be treated with the same reverence you would show any other text. If a list is inserted within a passage of text, treat it as a continuation and integral part of that text.
https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/

Some Favorite Things

Gradient Generator

https://aethercss.lovable.app/

https://visualrambling.space/christopher-nolan-movie-ranking/

https://vale.rocks/posts/css-reset

https://alvaromontoro.com/blog/68091/css-optical-illusions

CODEPEN Pen of the Week

Taped Paper Notes

Website of the week:

NITEX

AI Bubble: Nobody will pay for unsubsidised AI | Ed Zitron
“If these services were worthwhile, they wouldn’t have subscriptions.”
Author of Where’s Your Ed At news letter and Host of the Better Offline podcast Ed Zitron tells the Tech Report’s Isaac Pound the subscription models used for to pay for AI services are heavily subsidised and not sustainable.
https://youtu.be/oAbpVCn-Ox0?si=XCizdRyqjymPrj_h

So where are all the AI apps?
https://www.answer.ai/posts/2026-03-12-so-where-are-all-the-ai-apps.html

Fran Sans A display font in every sense of the term. It’s an interpretation of the destination displays found on some of the light rail vehicles that service the city of San Francisco. https://emilysneddon.com/fran-sans-essay

Anatomy of a CSS Phone Mockup
A step-by-step walkthrough of how a realistic iPhone frame is built from scratch — bevel gradients, layered shadows, glass shine effects, and mouse-reactive 3D tilt.
https://www.conor.fyi/writing/anatomy-of-a-css-phone-mockup

The design process is dead. Here’s what’s replacing it. | Jenny Wen (head of design at Claude)
https://youtu.be/eh8bcBIAAFo?si=Ld_L9i3hXmNR9meg

AI-generated art can’t be copyrighted after Supreme Court declines to review the rule
https://www.theverge.com/policy/887678/supreme-court-ai-art-copyright

Using CSS animations as state machines to remember focus and hover states with CSS only
https://patrickbrosset.com/articles/2026-03-09-using-css-animations-as-state-machines-to-remember-focus-and-hover-states-with-css-only/

On clip-path animations
The WorkCard detail panel is not a fade-in block. It is a circular reveal that grows out of the same point as the trigger button. That one decision makes the interaction feel connected instead of layered on top.
https://karlkoch.me/writing/on-clip-path-animations

The News Source 2.3 Million Americans Trust More Than CNN

Tired of spin? The Flyover delivers fast, fact-focused news across politics, business, sports, and more — free every morning. No agenda. No paywall. Join 2.3 million readers who trust us to start their day right.

Start Reading for Free

Some Favorite Things

Palette Generator

https://evilcharts.com/

https://public-sans.digital.gov/

https://www.tool-ui.com/docs/gallery

https://detail.design/

CODEPEN Pen of the Week

RGB ZigZag David Aerne

Website of the week:

Won J You Studios

Why designing in code makes you a better designer
https://adamsilver.io/blog/why-designing-in-code-makes-you-a-better-designer/

Managing icon component sizes
Many design systems want to restrict the number of sizes that icons can be used at. Constraints like this are often helpful, as a closed set of sizes gives consumers confidence their designs are adhering to the system's standards.
https://www.alicepackarddesign.com/blog/managing-icon-component-sizes

Zero-JS tooltips and menus
We’ve all spent years writing the same “glue code” just to open a menu or a tooltip. You usually need a click listener, a class toggle, and a complicated bit of logic to close the menu when the user clicks anywhere else on the screen.
https://markodenic.tech/zero-js-tooltips-and-menus/

The evolution of Mac app window corners
https://lapcatsoftware.com/articles/2026/3/4.html

Designing for people with anxiety
Most of us will experience anxiety at some point, sometimes triggered by a stressful moment, other times as a chronic condition. By taking thoughtful, intentional steps, we can ensure our designs at the most reduce stress, and the very least, do not contribute to or amplify it further.
https://tetralogical.com/blog/2026/03/10/designing-for-people-with-anxiety/

Building a new Flash
I don't know where to start with this but yeah I'm making flash if flash was built in 2026. I'm making it compatible with Linux,Mac, and PC. If you'd like to support this project I've started a patreon I'll still post updates here on Newgrounds though :)
https://bill.newgrounds.com/news/post/1607118

The Big Gotcha of Anchor Positioning
https://frontendmasters.com/blog/the-big-gotcha-of-anchor-positioning/

Some Favorite Things

https://www.tool-ui.com/docs/gallery

https://detail.design/

https://www.webdesignmuseum.org/css-layout-pioneers

https://public-sans.digital.gov/

CODEPEN Pen of the Week

Editorial Fashion Slider

Website of the week:

ANAI

Are AI productivity gains fueled by delivery pressure?
https://rosipov.com/blog/are-ai-productivity-gains-fueled-by-delivery-pressure/

Designing for clarity: How we restructured Intercom’s information architecture
Rethinking the information architecture of a complex app isn’t easy. Learn how we simplified the Intercom navigation, enhanced the user experience, and created space for AI innovation.
https://www.intercom.com/blog/designing-for-clarity-restructuring-intercoms-information-architecture/

On adding homepage delight
https://karlkoch.me/writing/on-adding-homepage-delight

Glassmorphism: The Transparent Design Trend That Refuses to Fade Glassmorphism brings transparency, depth, and light back into modern UI. Learn how this “frosted glass” design trend enhances hierarchy, focus, and atmosphere, plus how to implement it in CSS responsibly. Read More

Customisable Navigation Overlays in WordPress 7.0
WordPress 7.0 introduces Customisable Navigation Overlays, giving site owners full control over their mobile navigation menus using the block editor.
https://make.wordpress.org/core/2026/03/04/customisable-navigation-overlays-in-wordpress-7-0/

Sprites on the Web
https://www.joshwcomeau.com/animation/sprites/

border-shape: the future of the non-rectangular web
Creating non-standard shapes on the web, like a speech bubble or a heart have typically required you to cut off your actual borders with clip-path. More recently, corner-shape landed in Chrome, which gives us more options for styling how a corner looks, but is still quite limited.
https://una.im/border-shape

CSS Minify Tests
Correctness tests for CSS minification tools. Each test provides a CSS input and a single canonical minified output. A tool passes if its output matches exactly.
https://www.keithcirkel.co.uk/css-minify-tests/

What do these names have in common?

• Arnold Schwarzenegger

• Codie Sanchez

• Scott Galloway

• Colin & Samir

• Shaan Puri

• Jay Shetty

They all run their businesses on beehiiv. Newsletters, websites, digital products, and more. beehiiv is the only platform you need to take your content business to the next level.

🚨Limited time offer: Get 30% off your first 3 months on beehiiv. Just use code JOIN30 at checkout.

Start building for 30% off today.

Some Favorite Things

https://flowbite.com/icons/

https://sweetfont.com/

Please don't install Clawdbot
The backstory about Clawdbot / OpenClaw / Moltbook (oh my!) and why you should be hesitant to install it on your own machine.

Hogwarts Site

https://www.designprompts.dev/

CODEPEN Pen of the Week

Pure CSS Elastic Responsive Accordion Cards - No JS Required

Pure CSS Elastic Responsive Accordion Cards - No JS Required

Website of the week:

Land Life

Native HTML components don’t guarantee good UX
https://adamsilver.io/blog/native-html-components-dont-guarantee-good-ux/

An in-depth guide to customising lists with CSS
https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/

CSS Scope & Mixins – A chat with Chris Coyier
At the end of 2025, Firefox added the CSS @scope rule – making the new feature available across all major browsers! Since Chris Coyier has done a fair amount of writing and speaking on the topic, we wanted to talk with him about what that means. Chris has also been writing about the future of CSS mixins, a new specification Miriam is working on. We answer questions, get feedback, and chat about where CSS is heading.
https://www.oddbird.net/2026/01/22/winging-it-28/

Design docs considered harmful
In this post, I'll explain why design docs exist, why they fail, and what to do instead.
https://www.lucasfcosta.com/blog/design-docs

How I’m dealing with the pressure to adopt AI as a designer
It's hard to move in the regular spaces right now as a designer without noticing the continuing noise about AI. It's loud at best, and braggadocios at worst.
https://www.mynameismartin.co.uk/blog/how-im-dealing-with-the-pressure-to-adopt-ai-as-a-designer

Why AI is exposing design’s craft crisis
AI didn’t create the craft crisis in design — it exposed the technical literacy gap that’s been eroding strategic influence for over a decade.
https://www.doc.cc/articles/craft-crisis

Stop Drowning In AI Information Overload

Your inbox is flooded with newsletters. Your feed is chaos. Somewhere in that noise are the insights that could transform your work—but who has time to find them?

The Deep View solves this. We read everything, analyze what matters, and deliver only the intelligence you need. No duplicate stories, no filler content, no wasted time. Just the essential AI developments that impact your industry, explained clearly and concisely.

Replace hours of scattered reading with five focused minutes. While others scramble to keep up, you'll stay ahead of developments that matter. 600,000+ professionals at top companies have already made this switch.

Join them today, for free.

Some Favorite Things

https://fontgenerator.design/symbols

https://www.designprompts.dev/

https://stickertop.art/

https://www.8bitcn.com/

CODEPEN Pen of the Week

Scroll Driven Orbital System

Website of the week:

The Way of Waldorf Garden

The CSS Selection
The state of real-world CSS usage, 2026 edition.
https://www.projectwallace.com/the-css-selection/2026

Shadow Directories: A Unique Method to Hijack WordPress Permalinks
Last month, while working on a WordPress cleanup case, a customer reached out with a strange complaint: their website looked completely normal to them and their visitors, but Google search results were showing something very different.
https://blog.sucuri.net/2026/01/shadow-directories-a-unique-method-to-hijack-wordpress-permalinks.html

Trying to Make the Perfect Pie Chart in CSS
https://css-tricks.com/trying-to-make-the-perfect-pie-chart-in-css/

WordPress Now Lets Claude Read Your Site Data — Here’s What That Means
WordPress just handed Anthropic’s Claude a set of keys to your website’s back end. Well, sort of — more like a visitor’s badge with very limited clearance.
https://www.technology.org/2026/02/09/wordpress-now-lets-claude-read-your-site-data-heres-what-that-means/

Life after Figma is coming (and it will be glorious)
As code becomes source of truth, design tools become interfaces on code, not the other way round.
https://jonnyburch.com/life-after-figma/

Design Systems Checklist.
After building various design systems for clients and companies, I wanted to take what I've learned to write up a checklist that you can use to make sure you've covered all the essentials.
https://tylercoderre.com/projects/design-systems-checklist.html

The Story of Menu_Open
How the menu_open icon got encoded in Material Components history.
https://interfacecafe.com/the-story-of-menu_open/

Smarter news. Fewer yawns

Business news takes itself way too seriously.

Morning Brew doesn’t.

Morning Brew delivers a smart, skimmable email newsletter on the day’s must-know business news — plus games that make sticking around a little more fun. Think crosswords, quizzes, and quick breaks that turn staying informed into something you actually look forward to.

Join over 4 million professionals reading Morning Brew for free. And walk away knowing more than you did five minutes ago.

Try it out

Some Favorite Things

https://sustyicons.com/

https://emilysneddon.com/fransans

https://keyviz.org/

https://typingsvg.vercel.app/

CODEPEN Pen of the Week

Duotone Generator 🎛️ 🌇