Together with  SurveyJS logo
🚀 Frontend Focus

#​679 — February 12, 2025 | Read on the web

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.

Tomasz Jakut

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

Martijn Hols

Build Dynamic Forms with JSON-Powered Survey Creator by SurveyJS — 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) — 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 — 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

📙 Articles, Opinions & Tutorials

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 — 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 🤩 — Enhancing your app with AI has never been this simple!

Bolt.new by StackBlitz sponsor

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

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
Ryan Trimble

WebGL Shader Techniques for Dynamic Image Transitions
Arlind Aliu

Building a Playful Stop-Motion Crayon Cursor in p5.js
Jorge Toloza

Preload Fonts on Your Site for Better Core Web Vitals
Conor McCarthy

How to Declare Your Page’s Language
Whitney Lewis

🧰 Tools, Code & Resources

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.

Praise Ogunleye

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.

David Darnes

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.

Sentry sponsor

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

Sat Naing

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.

visprex

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.

PostSpark

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.

FakeData

📰 Classifieds

🎹 STRICH: 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. 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, used by 10K+ devs, give seamless document experiences, with over 100 features.

🤔 ...and finally

🤖 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 struggles, and how devs can best leverage it. A must-read if you’re navigating similar waters.

Addy Osmani

Ipx.