Collective #791

This edition covers several interesting articles on various frontend topics. You can learn about the improvements in web page loading times through Core Web Vitals, discover gsplat.js for 3D Gaussian Splatting, and read a deep dive into React Server Components.

Another gem we got for you is the pathfinding algorithms visualizer on real maps. And of course, much more!

Inspirational Website of the Week: Studio Sallali

With its timeless elegance, lovely scroll-based projects section, and minimal design, we believe this website deserves to be elected as the website of the week.

Grab your .COM domain at an unbeatable price of $5.98 and unlock freebies like a 2-month email address trial, lifetime privacy protection, DNSSEC security, and 24/7 customer support. Get your domain

How Core Web Vitals saved users 10,000 years of waiting for web pages to load

This post discusses how Core Web Vitals have improved web page loading times in Chrome, saving users over 10,000 years of waiting in 2023, and highlights optimizations made by both Chrome and the broader developer ecosystem.

gsplat.js

Gsplat.js is an open-source 3D Gaussian Splatting library that is easy to use and serves as a general-purpose tool. It provides similar functionality to Three.js, but is specifically designed for Gaussian Splatting.

Creating Human-Readable Summaries of Data with Google PaLM Generative AI

Raymond Camden explores the use of generative AI to summarize numerical data, specifically weather forecasts, using Google’s PaLM 2 API, demonstrating how it can transform raw data into concise summaries.

React Server Components, without a framework?

A deep dive into React Server Components (RSC), exploring their features, concepts, and APIs, with a focus on React Server Components and React Server Actions, following recent announcements by the React Team and Next.js.

Pathfinding

Discover how pathfinding algorithms function by accessing visualizations on a real-world map from anywhere across the globe.

Vectorizer.AI (Beta)

Convert your JPEG and PNG bitmaps to SVG vectors quickly and easily, fully automatically, using AI. It’s free while in beta!

Vue Patterns

A new free Vue design patterns guide that will help you learn Vue-specific patterns and behaviors to write efficient and maintainable code.

Using CSS content-visibility to boost your rendering performance

This article explores the advantages and practical applications of the content-visibility CSS property. It also discusses scenarios where it may not be the most appropriate choice.

sshx

sshx allows you to share your terminal with anyone via a link on a multiplayer infinite canvas. It features real-time collaboration, including remote cursors and chat. Additionally, it is fast, end-to-end encrypted, and has a lightweight server written in Rust and Svelte. By Eric Zhang.

Workarounds for buggy gradients

Keith Grant discusses a new CSS feature that allows specifying color spaces in gradients, highlighting issues with certain color spaces and providing workarounds to address them.

Testing with Intent: a Path to Embedded Accessibility

An article about the concept of Embedded Accessibility, emphasizing the importance of integrating accessibility into the core of software development processes and introduces the idea of “Testing with Intent” as a step towards achieving this goal while addressing common accessibility barriers in the software industry.

Surprising Facts About New CSS Selectors

Scott Vandehey explores CSS Nesting and the new & selector, delving into functional pseudo-classes like :is(), :not(), :has(), and :where(), their specificity, handling forgiving selector lists, and various nuances of these selectors.

Dissolve effect

Matias explains the creation of a shader effect that dissolves a 3D model using a noise texture and mouse interaction, with a focus on the shader code and its various components.

Pyglide

Pyglide creates a sleek and seamless HTML slider from a Markdown file. It also supports hot-reloading while modifying the Markdown.

Midjourney vs. human illustrators II: more Martians join the battle!

Evil Martians’ team explores the use of AI, specifically Midjourney, in generating illustrations for blog articles, showcasing successes and challenges faced by different team members in creating visuals, and discussing the evolving landscape of image-related AI tools.

Pebblely

Create Instagram-worthy photos for any product with the click of a button. There’s a free plan where you get 40 photos every month.

Scrubbed video sequences tips

Josh Kirk provides some useful tips on creating scrubbed video sequences for smooth scrolling, covering aspects like video compression, frame cutting with ffmpeg, file size reduction, and implementation tips using JavaScript web workers and canvas.

The only SVG file converter tool you’ll ever need. Vectorize images – Convert to SVG for free.

…the first digital image ever created was a scanned photograph of Harriet Anderson, the infant son of Russell Kirsch, one of the pioneers in the development of digital image processing. In 1957, the image was only 176 by 176 pixels, a far cry from today’s high-resolution digital images.

And that’s all! Thank you for reading the Collective! If you have something you would like us to feature in the next edition, simply reply to this email!

Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.