Collective #747
Inspirational Website of the Week: Estúdios Victor Córdon
A beautiful design with an amazing background video animation on scroll. Our pick this week.
Get inspired
Our Sponsor
Start speaking a new language in just three weeks with Babbel
Learning to speak a new language goes beyond just vocabulary: it’s about being able to hold a real-life conversation with a local, and understanding the culture and the people of each place. Consider Babbel your expert-led passport to learning, with 10-minute lessons that are so effective, many users feel confident speaking a new language in just three weeks. Supplement those with the podcasts, games, articles and live online classes for a well-rounded education in weeks.
Start learning a new language (and culture) today for up to 55% off
Our top Core Web Vitals recommendations for 2023
The Chrome DevRel team has compiled a set of the most effective techniques for enhancing Core Web Vitals performance in 2023.
Read it
Conditional CSS
Ahmad Shadeed goes over a few CSS features that we use every day, and shows how conditional they are.
Read it
Why Not document.write()?
This article by Harry Roberts provides a comprehensive examination of the reasons why using the document.write() JavaScript method should be avoided.
Check it out
Data binding in React: how to work with forms in React
In this tutorial, you’ll learn how to wire up all of the different form controls in React.
Check it out
Loops and Repetition
In the latest edition of Offscreen Canvas, Daniel Velasquez examines the technique of using sin/cosine for looping.
Read it
3D in CSS
In this piece from Brad Woods’ Digital Garden collection, readers will learn the proper techniques for creating a 3D space and manipulating the translation and rotation of an element using CSS.
Read it
Building an accessible theme picker with HTML, CSS and JavaScript
Sarah L. Fossheim shows how to use HTML, CSS, and vanilla JavaScript to add an accessible theme picker component to a website.
Read it
Five typography trends set to make waves in 2023
A preview on this year’s trends for typography reaching from code and generative typography to type as a political tool.
Check it out
CSS color functions and custom properties
Manuel Matuzović delves into color functions and shows how powerful they are in combination with custom properties.
Read it
Scrutch
André Simmert created this laser-focussed, privacy-first writing tool.
Check it out
Justify Space Between Individual Items in Flexbox
Jim Nielsen shows how use margin: auto to justify flex items in a flat hierarchy.
Read it
Sibling Scopes in CSS, thanks to :has()
Bramus Van Damme shows how to leverage CSS :has() to select all siblings between to boundaries.
Read it
Stylized Low Poly
Bruno Simon utilizes 3D Coat to create stunning, low poly “stylized” and “hand-painted” models reminiscent of the popular game World of Warcraft.
Check it out
How to Build Great HTML Form Controls
Austin Gil writes about things to consider when building HTML forms.
Read it
Full dashboard layout
George Moller shows how to use CSS Grid to make a full dashboard layout in this thread.
Check it out
OFFFICE
A really cool project implemented by Federico Valla. Read this interesting thread about it.
Check it out
From Our Blog
Getting Creative with Infinite Loop Scrolling
A quick look at how to recreate the infinite loop scrolling animation seen on Bureau DAM with GSAP and Lenis.
Check it out
From Our Blog
Replicating the Light Effect from MIDWAM with Three.js and Postprocessing
In this coding session, we’ll use Three.js and postprocessing to recreate the beautiful light effects featured on Midwam’s website.
Check it out
Our Sponsor
Upgrade your sleep and downgrade your stress with the Apollo wearable
The Apollo wearable uses proven touch therapy to rebalance your nervous system and support your circadian rhythm. Sleep better and longer, stay calmer, find focus, and feel more energized with this groundbreaking new wearable. Get 10% off today.
Check it out