Collective #660

Inspirational Website of the Week: Paul & Henriette
Sharp minimalism with great typography and a focus on beautiful image and layout animations. Our pick this week.
Get inspired

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

The Humble <img> Element And Core Web Vitals
An excerpt from Addy Osmani’s new book Image Optimization.
Read it

Portfolio 2021 technical case study — Rendering a whole HTML website in WebGL
Martin Laxenaire shows how he created his portfolio using his own vanilla JavaScript open source tools.
Read it

Container Queries Explainer & Proposal
Miriam Eric Suzanne explains the proposed solution for container queries and shows how to use them.
Read it

The State of CSS Cross-Browser Development
Ahmad Shadeed thoughts on why cross-browser development is better than in the past.
Read it

Mantine
Mantine is a React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience.
Check it out

Two options for using custom properties
Peter-Paul Koch shares an efficient way of using custom properties for component styling.
Read it

Toggling CSS Custom Properties with Radio Buttons
Michelle Barker explains how to use custom properties for a toggle functionality.
Read it

Iconic
A fantastic set of pixel-perfect icons with new icons added every week.
Check it out

Scroll-Linked Animations with CSS Scroll-Timeline (CSS Café)
Bramus shares his talk covering Scroll-Linked Animations with CSS @scroll-timeline on CSS Café.
Check it out

Fluid Typography
Calculate CSS declarations for beautiful fluid typography headings. Made by Erik André.
Check it out

(t,i,x,y,z) => “creative code golfing”
A minimalist three-dimensional coding environment. Control 8x8x8 dots with a single JavaScript function.
Check it out

Fower
A utility-first CSS-in-JS library for rapid UI development.
Check it out

CSS Cuboid Generator
A fantastic cuboid generator made with React and Prism by Jhey.
Check it out

Profiling site speed with the Chrome DevTools Performance tab
Learn how to use the Chrome DevTools Performance tab to measure and improve the speed of your website.
Read it

3D Game Shaders For Beginners
A step-by-step guide to implementing SSAO, depth of field, lighting, normal mapping, and more for your 3D game.
Check it out

Exploring color-contrast() for the First Time
Chris Coyier explores the color-contrast() function in CSS which is freshly supported in Safari Technical Preview 122.
Read it

How to Create Actions for Selected Text With the Selection API
Preethi shows how to reveal an options panel when selecting text on a website.
Read it

Don’t Confuse Function Expressions and Function Declarations in JavaScript
What are the differences between function declarations and function expressions in JavaScript? Find out in this article by Dmitri Pavlutin.
Read it

Measuring Web Performance in 2021: The Definitive Guide
A guide to the metrics, methods, and measurements of web performance in 2021.
Check it out

Dynamic CSS Masks with Custom Properties and GSAP
Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect in this article by Michelle Barker.
Read it