Bi-Weekly Frontend News

Collective #779



A place where you can discover the art of presentation design. It's a curated collection of standout slides, keynotes, and guidelines, chosen specifically for their design brilliance.

Check it out

Opendream: A Web UI For the Rest of Us

Opendream is a user-friendly web interface that brings essential features like layering, non-destructive editing, portability, and easy-to-write extensions to Stable Diffusion workflows for image generation and manipulation, enhancing creative exploration and experimentation.

Check it out

The ideal viewport doesn’t exist

This article discusses the importance of considering the wide range of screen sizes and browser viewports before making design decisions based on strict breakpoints, presenting findings from an experiment conducted by Set Studio with over 120,000 datapoints and 2,300 unique viewport sizes gathered over 48 hours, and delves into the implications of this fragmentation for designing both mobile and desktop experiences.

Read it

The New CSS Math: round()

This article by Dan Wilson explains the usage of the CSS `round()` function, which offers precise control over rounding values in various CSS properties, including considerations for precision, units, and rounding strategies such as nearest, up, down, and to-zero.

Read it

Lightning CSS

Light Speed Lightning CSS is a blazingly fast Rust-based tool for minifying CSS, outperforming JavaScript-based alternatives by over 100x, ensuring efficient memory usage, and supporting modern CSS features while generating compact and optimized code.

Check it out


TextFX is a collection of 10 AI-powered tools utilizing Google's PaLM 2 model to enhance the creative process for rappers, writers, and wordsmiths by generating innovative textual and linguistic possibilities.

Check it out

Use web components for what they're good at

Nolan Lawson explores web components' pros and cons. He highlights their success in client-rendered leaf components, cross-framework integration, and enterprise design systems. He also notes downsides like server-side rendering and accessibility issues. He advises choosing web components judiciously based on use-case suitability.

Read it

A quick introduction to CSS @scope

The article introduces the upcoming #CSS @scope feature, which allows scoping of CSS selectors to control their reach, demonstrating its usage to solve styling conflicts and improve selector organization, and noting its compatibility with Chrome 118.

Read it

Pros and cons of using Shadow DOM and style encapsulation

Manuel Matuzović shares his experience with using web components, particularly focusing on the utilization of Shadow DOM for style encapsulation, DOM encapsulation, and slot functionality, while also highlighting drawbacks such as styling challenges, limitations in styling nested slotted content, and issues with JavaScript dependencies, along with potential solutions and personal insights.

Read it

Simulating Real Cameras using Three.js

This article by Tobias Cornille explains how to simulate a physical camera in a 3D web application using Three.js and OpenCV, covering the pinhole camera model and realistic lens distortion, demonstrating its application in augmented reality, robotics, and visualization tools.

Read it

Rewriting wipEout

Dominic Szablewski experience of rewriting the source code for the classic PSX game "wipEout," which had its source code leaked in 2022, resulting in a near-complete rewrite that can be compiled for various platforms, enabling the game to be played in browsers using WASM and WebGL.

Read it

Scroll shadows with animation-timeline

Dave Rupert describes a solution to add shadows as visual indicators of overflow on elements using scroll-driven animations, including examples of using the new `animation-timeline` property with the `scroll()` function to achieve the effect for overflowing content and sticky columns, highlighting the simplicity and advantages of this CSS-based approach over JavaScript alternatives.

Read it

Adapting Illustrations to Dark Mode

Learn how to make illustrations on your website suitable for both light and dark modes by utilizing CSS filter effects like invert(1) and hue-rotate(180deg), while understanding color space concepts like RGB and HSL to achieve the desired effects.

Read it

Moonbit: the fast, compact & user friendly language for WebAssembly

Moonbit is a new WebAssembly (Wasm)-first programming language designed to address challenges in Cloud and Edge computing by providing efficiency, security, compactness, and ease of use, led by an experienced team aiming to unlock Wasm's untapped potential, with a focus on speed, compact output, and user-friendliness, set to reach beta status by Q2 2024.

Check it out

Things you forgot (or never knew) because of React

Josh Collinsworth writes about his experiences transitioning from default music preferences to exploring new artists and draws a parallel to frontend development tools, particularly React, urging readers to consider the benefits of venturing beyond popular defaults and embracing other modern frameworks due to their adaptability, compatibility, and better features.

Read it

PDF Tool

A simple tool to edit PDFs for free, without uploading files, ensuring privacy and security.

Check it out


A beautiful little Three.js experience named Geisha. By Corentin Bernadou.

Check it out


A small chrome extension to monitor (and optionally block) other extensions' network calls.

Check it out