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