~frontendfocus | Issue 679 - 15 years on from Responsive Web Design (17)

Taking RWD to the Extreme — It’s been 15(!) years since Ethan Marcotte first wrote about Responsive Web Design, and in that time we’ve gotten various new powerful CSS layout tools (such as Flexbox and Grid). These layout systems have in-turn created a new era of declarative, intrinsic web design where the browser is empowered to handle layouts more so than ever before.

🇪🇺 The European Accessibility Act for Websites and Apps — This accessibility effort comes into effect in late June, and from then apps and sites of certain companies operating in the EU must meet new a11y standards. This post does a good job outlining who it actually applies too, the requirements, and how to plan ahead.

How I Created a Popular WordPress Theme and Coined the Term “Hero Section” (Without Realizing It) — The story behind the recognizable ‘hero’ pattern, its name, how it caught on, and it’s wider impact — now considered a mainstream standard in web design.

The Popover API is Now Baseline Newly Available — Despite earlier proclamations, the Popover API (which adds a built-in declarative way to create various popovers in HTML) is now working across all devices on the latest versions of the three major browser engines.

Which Rich Text Editor Framework Should You Choose in 2025? — A round-up of actively developed WYSIWYG editor options you can drop into your apps along with the pros and cons of each.

Transitioning Top-Layer Entries and the display Property — How to animate display: none and other discrete properties using CSS animation techniques (such as @starting-style and transition-behavior: allow-discrete). Lots of demos, code, and practical examples for dialogs and popovers here.

You Can Now Integrate the Gemini API into Your Bolt App with a Single Prompt 🤩 — Enhancing your app with AI has never been this simple!

CSS Nesting: Use with Caution — “There are features that fill me with dread [..] and right at the top of that list is native CSS nesting.” — Suggests to use some caution when nesting, owing to its potential for confusion if not kept simple.

How to Create Wavy Boxes Using CSS — A straightforward tutorial on how to create cool shapes we can use to decorate the border of images or any content. There's lots of code and demos here.

Flexbox Labs: A Visual Tool for Creating Flexbox Layouts — One of the neat features is the “Layout” button that allows you to select from more than a dozen predefined layouts. There’s also a Grid version still in beta.

share-button: A Web Component to Share Web Pages using Native OS Sharing Options — Uses the Web Share API to tap into the OS’s underlying share mechanism. For example, on an iPhone, the share button opens a bottom sheet native to the OS.

Find. Fix. Test: Intro to Sentry & Codecov — Code-level visibility, from pre- to post-release, lets devs find and fix errors and slowdowns and deploy with confidence.

AstroPaper: Minimal, Responsive, SEO-Friendly Astro Blog Theme — A well put together blog theme for the Astro content-driven site Web framework.

Visprex: An Online Tool to Visualize CSV Files — It’s open source and works entirely in the browser, so you can install it locally. The demo site lets you load examples which can display as a histogram, scatter plot, line plot, or correlation matrix.

PostSpark: Customize and Beautify Website & Code Screenshots — These kinds of tools are a dime a dozen, but this one’s pretty nice. It lets you generate the screenshot content directly from a link (X, Bluesky, GitHub, etc.), and has lots of ways to customize.

FakeData: A Simple App for Generating Fake JSON Data — You can choose from 11 categories (users, orders, payments, etc.), after which you can edit/remove fields then copy or download the JSON data for use in your app.

🤖 The 70% Problem: Hard Truths About AI-Assisted Coding — Addy shared this late last year, but I missed it at the time. He’s spent the past few years working in AI-assisted development, and has spotted a few things worth sharing that “we need to reckon with”. This is a good overview of the current state of AI, highlighting its proficiency at prototyping, where it...