The Ideal Viewport Doesn’t Exist — In an attempt to answer the question “how fragmented are viewport sizes?” a group of developers collated over 120,000 datapoints with over 2,300 unique viewport sizes and has presented it superbly here. The takeaway is that “you simply do not know how users are going to visit your website or web app”.

Leanne Renard, Liridon Hasani and Andy Bell

Use Web Components for What They’re Good At — Nolan weighs in on a recent debate around the use of Web Components, highlighting the tradeoffs to consider when using them.

Nolan Lawson

Join Us at SurrealDB World - The Future Database for Cloud-Native Applications — Join SurrealDB World Online on September 13th, 2023 at 10:00 AM BST as we unveil SurrealDB 1.0.0 alongside some exciting announcements that will undoubtedly shape the future of the database industry.

SurrealDB sponsor

⭐️ The State of CSS 2023 Survey Results — Over the past few years not only have we seen an uptick in new CSS features, but we’ve also seen browsers adopting these new capabilities at a much faster pace. As such the key takeaway from this year’s survey seems to be that usage of CSS frameworks are now on something of a downward slope. As ever, there is a ton of stuff to dig into here — a real lay of the land for all things CSS.

Devographics

Bézier Curves and the Logic Behind Them — A superb dive into the logic behind bézier curves as used in CSS animations and visual elements. Really well documented, with excellent visual explainers.

Richard Ekwonyé

Falling For Oklch: A Love Story of Color Spaces, Gamuts, and CSS — An exploration of the Oklch color space and how we can start using it in CSS today.

Geoff Graham (Smashing Magazine)

WebGL Image Processing — Explorations of several image processing techniques using GPU shaders in the browser, covering color correction, blend modes, dithering, and more.

Maxim McNair

Create a Culture of Code Coverage with Codecov — Identify untested code to help you find bugs before they ever get pushed to production. Get started today.

Codecov by Sentry sponsor

A Few Interesting Ways To Use CSS Shadows (For More Than Depth) — A few experiments with different shadow effects (using two CSS properties and a filter) to make interesting hover effects, different text styles, and even casting shadows on other shadows.

Preethi Sam

How to Make Next-Level Figma Plugins: Auth, Routing, Storage, and More — A look at building full-featured, frontend-app-style Figma plugin, with storage, auth, routing, and more, with tool recommendations and other tips.

Rita Klubochkina

Image-To-Pixel: An Editor to Convert Photos to Pixel Art — Built with p5.js, you can customize the pixelation by choosing a dither amount, dither style, posterize level, and you can even upload your own color palette for the dithering. GitHub repo.

Tezumie

Peaks.js 3.0: View and Interact with Audio Waveforms — A JavaScript component for browser-based audio waveform visualization that comes from the BBC’s R&D department. There’s a live example on the homepage. GitHub repo.

BBC

React Authentication — Without Complexity — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

Better Select: A Web Component for a Better Select Element — Will fallback to a regular select, or optionally a native select on mobile devices, and has keyboard support. Try some demos here.

Smart Impact IT

SnippetBuilder: Create Pretty Screenshots of Code — This kind of tool isn’t unique but this one has some unique features, like the ability to add multiple “editors” to the screenshot, drag and drop tech logos, and a variety of pre-made gradients for the background.

Sachin Chaurasiya

Default Composer: Tiny JavaScript Utility to Set Default Values for Nested Objects — It will replace empty strings, arrays, objects, and null/undefined, with default values that you set, to simplify the process of filling empty slots in various objects in your code.

Aral Roca Gomez

Toools.design: An Archive of 1000+ Design Resources — A well presented directory divided into 18 categories (icons, typography, stock photos, design tools, podcasts, etc.), where you can find a variety of products, tools and resources.

Pascal Strasche