--- title: "15 years on from Responsive Web Design" publication: "Frontend Focus" issue: 679 published_at: "2025-02-12" canonical_url: "https://frontendfoc.us/issues/679" --- Plus the origin of the 'hero' is unmasked. | Together with [![SurveyJS logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_1000,h_410/e_make_transparent/co_white,e_outline:20/yrja59qflovcjwojxypq.png)](https://surveyjs.io?utm_source=frontend_focus&utm_medium=email) 🚀 **Frontend** Focus #​679 — February 12, 2025 | [Read on the web](https://frontendfoc.us/issues/679) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1739358322/r2f2dlzngldogjax5dwv.png)](https://www.smashingmagazine.com/2025/02/taking-rwd-to-the-extreme/) [Taking RWD to the Extreme](https://www.smashingmagazine.com/2025/02/taking-rwd-to-the-extreme/) — It’s been 15(!) years since [Ethan Marcotte first wrote about Responsive Web Design](https://alistapart.com/article/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. Tomasz Jakut 🇪🇺 [The European Accessibility Act for Websites and Apps](https://martijnhols.nl/blog/the-european-accessibility-act-for-websites-and-apps) — This [accessibility effort](https://accessible-eu-centre.ec.europa.eu/content-corner/news/eaa-comes-effect-june-2025-are-you-ready-2025-01-31_en) 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. Martijn Hols [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/70826d1a.png)](https://surveyjs.io?utm_source=frontend_focus&utm_medium=email) [Build Dynamic Forms with JSON-Powered Survey Creator by SurveyJS](https://surveyjs.io?utm_source=frontend_focus&utm_medium=email) — Survey Creator is a drag-and-drop JavaScript form builder UI that auto-generates JSON form definitions, easily integrates with Angular, React, Vue, and vanilla JS, and has no backend restrictions. Perfect for form-heavy apps. Start with a free demo to learn more. SurveyJS sponsor [How I Created a Popular WordPress Theme and Coined the Term “Hero Section” (Without Realizing It)](https://www.smashingmagazine.com/2025/02/popular-wordpress-theme-term-hero-section/) — 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. Marcel Moerkens [The Popover API is Now Baseline Newly Available](https://web.dev/blog/popover-baseline?hl=en) — 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. Rachel Andrew ⚡️ IN BRIEF - 🤖 [This recent study attempts](https://ahrefs.com/blog/ai-traffic-study/) to figure out just how much of our web traffic is now made up of AI sources. - ☕️ [Some more tea has been spilled in the WordPress saga](https://www.reddit.com/r/Wordpress/comments/1impxdo/i_gave_matt_the_domain_wordpresscom_for_free_he/) – this time around the origins of the WordPress domain. - 🗳️ The team behind the _State of CSS_ survey [has launched](https://bsky.app/profile/sachagreif.com/post/3lhv6gyshq22n) a new survey to help [figure out how web devs are using AI](https://survey.devographics.com/en-US/survey/state-of-ai/2025?ref=frontendfocus). - 🌈 Groovy! [This pure JS CodePen demo from Andrey Mutlu](https://codepen.io/AAMutlu20/pen/mdYxroj) creates a kaleidoscope effect from any image. My browser did take a bit of a performance hit playing with this though! - 😱 [This Chrome extension](https://tabboo.xyz) adds 'jump scares' to any site that you're trying to avoid or stop using so much. 📙 Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ymnskwabjfrdrzuuaxeo.jpg)](https://liveblocks.io/blog/which-rich-text-editor-framework-should-you-choose-in-2025) [Which Rich Text Editor Framework Should You Choose in 2025?](https://liveblocks.io/blog/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. Dexemple and Rowny (Liveblocks) [Transitioning Top-Layer Entries and the `display` Property](https://www.smashingmagazine.com/2025/01/transitioning-top-layer-entries-display-property-css/) — 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. Brecht De Ruyte [You Can Now Integrate the Gemini API into Your Bolt App with a Single Prompt 🤩](https://x.com/boltdotnew/status/1886453029286687123) — Enhancing your app with AI has never been this simple! Bolt.new by StackBlitz sponsor [CSS Nesting: Use with Caution](https://piccalil.li/blog/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. Andy Bell [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1739356346/ilpr3drhyabgbwn1rgfu.png)](https://verpex.com/blog/website-tips/how-to-create-wavy-boxes-using-css) [How to Create Wavy Boxes Using CSS](https://verpex.com/blog/website-tips/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. Temani Afif [Organizing Design System Component Patterns with CSS Cascade Layers](https://css-tricks.com/organizing-design-system-component-patterns-with-css-cascade-layers/) Ryan Trimble [WebGL Shader Techniques for Dynamic Image Transitions](https://tympanus.net/codrops/2025/01/22/webgl-shader-techniques-for-dynamic-image-transitions/) Arlind Aliu [Building a Playful Stop-Motion Crayon Cursor in p5.js](https://tympanus.net/codrops/2025/02/06/building-a-playful-stop-motion-crayon-cursor-in-p5-js/) Jorge Toloza [Preload Fonts on Your Site for Better Core Web Vitals](https://www.debugbear.com/blog/preload-web-fonts) Conor McCarthy [How to Declare Your Page’s Language](https://blog.pope.tech/2025/02/05/how-to-declare-your-pages-language/) Whitney Lewis 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1739355396/pmdudn5fbrw8pps2lk0q.png)](https://flexboxlabs.netlify.app/) [Flexbox Labs: A Visual Tool for Creating Flexbox Layouts](https://flexboxlabs.netlify.app/) — 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](https://flexboxlabs.netlify.app/grid) still in beta. Praise Ogunleye [share-button: A Web Component to Share Web Pages using Native OS Sharing Options](https://github.com/daviddarnes/share-button) — 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. David Darnes [Find. Fix. Test: Intro to Sentry & Codecov](https://sentry.io/resources/find-fix-test/?utm_medium=paid-community&utm_source=frontendfocus&utm_campaign=fy26q1-demo-workshop&utm_content=demo-workshop-register) — Code-level visibility, from pre- to post-release, lets devs find and fix errors and slowdowns and deploy with confidence. Sentry sponsor [AstroPaper: Minimal, Responsive, SEO-Friendly Astro Blog Theme](https://github.com/satnaing/astro-paper) — A well put together blog theme for the [Astro](https://astro.build/) content-driven site Web framework. Sat Naing [Visprex: An Online Tool to Visualize CSV Files](https://www.visprex.com/) — It’s [open source](https://github.com/visprex/visprex) 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. visprex [PostSpark: Customize and Beautify Website & Code Screenshots](https://postspark.app/) — 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. PostSpark [FakeData: A Simple App for Generating Fake JSON Data](https://fakedata-mu.vercel.app/) — 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. FakeData 📰 Classifieds 🎹 [STRICH](https://strich.io/?ref=frontend-focus): Add blazing fast and reliable 1D/2D Barcode Scanning to your web apps. Free demo app and 30-day trial available. --- [Telling the Bit story: Celebrating 10 Years of Composability](https://bit.dev/blog/telling-the-bit-story-celebrating-10-years-of-composability/?utm_source=FrontEndFocus&utm_id=18&utm_medium=newsletter). Ran Mizrahi reveals how Bit shifted from development stagnation to exponential progress using Composability. --- Bad PDFs drive users away with slow load times, broken annotations, and clunky UX. [Nutrient’s PDF SDKs](https://www.nutrient.io/sdk?utm_campaign=issue-679-FF-2025-02-12&utm_source=cooperpress&utm_medium=sponsoring), used by 10K+ devs, give seamless document experiences, with over 100 features. 🤔 ...and finally 🤖 [The 70% Problem: Hard Truths About AI-Assisted Coding](https://addyo.substack.com/p/the-70-problem-hard-truths-about) — 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 struggles, and how devs can best leverage it. A must-read if you’re navigating similar waters. Addy Osmani 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/679/*|UID|*?ipx=t)