~frontendfocus | Bookmarks (232)

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

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.

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.

The Mistakes of CSS — This post from Juan references an interesting document from the CSS Working Group from a few years back that you may not have seen — it outlines some of the ‘mistakes’ made in the design of CSS. “the value of getting things right the first time is a beast of burden”

▶  A Breakdown of Kanye's Weird New Website — Whatever you think of Kanye West, you know any project he’s involved with is going to be a bit.. odd. So it goes with his new e-commerce site which couples a minimal, animated design (reminiscent of the Flash era) along with modern ideas like Web Components and Tailwind, and it all runs on Shopify. Wes digs...

📊 How Does Ever-Increasing Page Size Affect Your Users? — Web performance expert Tammy Everts tells us the median Web page is 8% bigger than a year ago and looks into what effect this has through statistics calculated from the latest data from the HTTP Archive.

Creating an Angled Slider — The end result here is pleasing. Zach shows us how to create a angled slider complete with hover effects using just HTML and CSS (mainly grid, clip-path, :has(), and nesting).

🟨 How to Favicon in 2025: Three Files That Fit Most Needs — Asks us to “stop the icon generator madness” and take a smarter approach, adopting a minimal set of icons that fits most modern needs.

Plotly 3.0: A JavaScript Graphing Library — A high-level, declarative charting library, built on top of D3 and stack.gl, with over 40 chart types, including 3D charts, statistical graphs, and SVG maps. v3 is largely to remove deprecations, fix bugs, and a switch to esbuild.

From Pain to Productivity: How I Learned to Code with My Voice — After developing severe hand pain, Salma sought an alternative way to code — she turned to voice control as a solution. Here she outlines the journey of trying different tools, the accessibility considerations, and her new workflow. She also chatted with Kevin Powell about this change.