Collective #707

Inspirational Website of the Week: Six
A super slick design with sharp typography and great layouts. Our pick this week.
Check it out

Instant websites for your clients with Divi Layout Packs
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Check it out

Three-gpu-pathtracer
An epic path tracing renderer and utilities for Three.js built on top of three-mesh-bvh. By Garrett Johnson.
Check it out

Picture perfect images with the modern <img> element
Addy Osmani writes about how important images are and how they can affect your web app’s performance more than any other part of your code.
Read it

Building a dialog component
A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. By Adam Argyle.
Read it

Home sweet homepage
The fantastic journey of growing up online by Sailor Mercury.
Check it out

Ideal SVG exports
A random collection of opinions on how design tools should export SVGs.
Check it out

CSS :has() A Parent Selector Now
Matthias Ott explains how the :has() selector works and shows how it’s not only useful as a parent selector.
Read it

Reasonable Colors
Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.
Check it out

JavaScript function composition: What’s the big deal?
An article by James Sinclair explains what the big deal with function composition is.
Read it

CSS Parent Selector
A deep-dive into the CSS :has parent selector with some use-cases and examples. By Ahmad Shadeed.
Read it

The struggle of using native emoji on the web
Nolan Lawson on the miserable state of Emoji support in browser.
Read it

Just a Calendar
Just a no nonsense calendar made by Shrikant Sharat Kandula.
Check it out

Chalk.ist
A tool to turn your source code into beautiful images.
Check it out

Lexical
Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
Check it out

CryptoFont
Crisp webfont icons and SVG logos of many cryptocurrencies.
Check it out

The complete guide to protecting your APIs with OAuth2 (part 1)
A deep dive into the complex OAuth2, the most popular specifications for API authentication. By Dan Moore.
Read it

Eight Colors
Eight Colors is a block shifting game where the goal is to shift circular blocks to reach the target. Made by Shubham Jain.
Check it out

Dave Seidman
Dave Seidman’s portfolio has a cool project slideshow with a 3D shape in a polygonal look that morphs into another one.
Check it out

How to Fix Your Low-Contrast Text
Learn how to solve 30% of the web’s accessibility defects with just the help of a calculator. By Ben Myers.
Read it

Creating a Fluid Distortion Animation with Three.js
A coding session where you’ll learn how to create the interactive liquid-like effect from the PixiJS website using Three.js.
Check it out

On-Scroll Text Repetition Animation
An on-scroll animation that shows repeated fragments of a big text as seen on the website of Dr. Dabber.
Check it out