~frontendfocus | Bookmarks (260)

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.

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.

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.

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

The Magic of Small Engineering Teams — How PostHog uses small teams to ship fast and scale at the same time.

Pure CSS Mixin for Displaying Values of Custom Properties — An article (and associated package) that presents a native CSS mixing that outputs various values as pseudo-elements.

▶  Scroll State Queries are on the Way — Kevin talks us through what CSS scroll-state brings to the table (available in Chrome 133 beta), along with other recent additions.

Waveform Renderer — A browser-based tool for creating a waveform from an audio file. Just add an mp3 or wav file and a waveform will be rendered — you can also edit the look. Think of it as a more focused alternative to Wavesurfer.js which also deals with playback, regions, and plugins. Repo here.

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.

🎨 tinygradient 2.0: A Gradient Generation Library — Generate color gradients with an unlimited number of color stops and steps in JavaScript to use as you wish. Supports named colors, hex colors, RGV, HSVa, and RGB CSS strings. GitHub repo.

Monoco: A Small JS Library for Smooth 'Squircle' Corners for HTML Elements — The main page includes a neat little interactive demo that showcases all the different possibilities for these alternatives to run-of-the-mill rounded corners. Includes implementations for React and Svelte.

Tabler 1.0: A Bootstrap 5-Based Open UI Kit for Webapps — The 1.0 release of this free, open-source UI kit adds dark theme support, new pages, a faster workflow powered by the Eleventy static site generator, and more.

StyleConsoleLog: An Interactive Tool to Add CSS to Console Messages — Uses string substitution along with CSS defined in the second argument, as outlined on MDN here.

Developer Kit: Learn How to Troubleshoot Front-End Issues Faster — Get the kit curated to help front-end developers better understand user activity and resolve issues more efficiently.

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”

How to Customize Next.js Metadata — Learn all about web page metadata, its use, and different strategies for customizing it in your Next.js application.

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