Collective #747
Publikováno: 13.1.2023
Conditional CSS * Typography Trends * Scrutch * Stylized Low Poly
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.
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.
Conditional CSS
Ahmad Shadeed goes over a few CSS features that we use every day, and shows how conditional they are.
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.
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.
Loops and Repetition
In the latest edition of Offscreen Canvas, Daniel Velasquez examines the technique of using sin/cosine for looping.
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.
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.
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.
CSS color functions and custom properties
Manuel Matuzović delves into color functions and shows how powerful they are in combination with custom properties.
Scrutch
André Simmert created this laser-focussed, privacy-first writing tool.
Justify Space Between Individual Items in Flexbox
Jim Nielsen shows how use margin: auto to justify flex items in a flat hierarchy.
Sibling Scopes in CSS, thanks to :has()
Bramus Van Damme shows how to leverage CSS :has() to select all siblings between to boundaries.
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.
How to Build Great HTML Form Controls
Austin Gil writes about things to consider when building HTML forms.
Full dashboard layout
George Moller shows how to use CSS Grid to make a full dashboard layout in this thread.
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.
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.
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.