Collective #617
Inspirational Website of the Week: Ali Ali
Sheer elegance and slickness combined with the right typography. Our pick this week.
Get inspired
content-visibility: the new CSS property that boosts your rendering performance
Vladimir Levin and Una Kravets introduce a new CSS property that can be used to improve initial load time by skipping the rendering of offscreen content.
Read it
Build websites with the most popular WordPress theme in the world
With the Divi Layout Packs you'll get world-class designs ready to be used for your client projects.
Check it out
Infinite Scroll without Layout Shifts
Addy Osmani looks at how patterns for loading long lists can impact the Core Web Vitals with some recommended fixes.
Read it
Understanding Arrow Functions in JavaScript
Learn about the differences between traditional function expressions and arrow function expressions in this great guide by Tania Rascia.
Read it
Simulating Object Collisions With Canvas
Josh Bradley's tutorial on how to simulate object collisions as a way to learn the basics of HTML canvas and physics simulation.
Read it
Online Workshops on Front-End & UX
Boost your design skills online and learn practical insights from experts in the industry, live. Use a friendly code CODROPS to save $50 off the price!
Take Me On
A beautiful immersive web experiment by Adam Kuhn.
Check it out
#s3e32 ALL YOUR HTML, Particles on a sculpture
Yuri Artyukh's great video tutorial where you'll learn how to create a cool particle effect on a sculpture.
Watch it
Modern CSS grid solutions to common layout problems
Learn how to overcome media-query fatigue by using CSS grid for responsive layouts. Kevin Pennekamp explores three useful layout implementations.
Check it out
Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business
A great article about the story of Tailwind CSS by Adam Wathan.
Read it
Three.js mesh modifiers
A Three.js mesh morph modifier, including nearly ten modifiers, such as Bend, Bloat, Noise, Skew, Taper and more.
Check it out
Naming layout components
Andy Clarke shares why he's not fond of frameworks and explains what approach he uses instead for designing layouts.
Read it
r3f-bubbles
A very interesting react-three-fiber and drei demo.
Check it out
Offline first with service workers and vanilla JS
The third article of a series on service workers by Chris Fernandi.
Read it
Brick
Brick is a lightweight platform for creating small sites.
Check it out
Developing and Deploying Micro-Frontends With Single-Spa
Tyler Hawkins shows how to develop an app composed of micro-frontends using single-spa and deploy it to Heroku.
Read it
Drop-Shadow: The Underrated CSS Filter
Michelle Barker shows what you can do with drop-shadow, the CSS filter.
Read it
Turning pages with CSS
Amit Sheen created this fun demo of a CSS book.
Check it out
Optimizing CSS for faster page loads
Tomas Pustelnik shares how to impove loading times of a website by optimizing its CSS.
Read it
blogit
A personal blog based on Github Pages and issues. By Dmitriy Derepko.
Check it out
Digging Into the Flex Property
Ahmad Shadeed demystifies the flex property and shows how to use it.
Read it
CSS Vocabulary
A nice visual explainer of CSS terms.
Check it out
Papercups
Papercups is an open source live customer chat web app.
Check it out
The Girl With A CSS Earring
Louise Flanagan created this CSS masterpiece.
Check it out
How I Build Scalable Modern Web Applications for Real Users
An article that details the languages, libraries, and tools that Trey Huffine used to build Skilled.dev, a platform to prepare developers to succeed in coding interviews.
Read it
RevKit
A free design system UI kit for Sketch App, Figma, and XD.
Check it out
moment-guess
A utility package for guessing date formats.
Check it out
Magnetic Buttons
A small set of magnetic buttons with some fun hover animations. Inspired by the button animation seen on Cuberto.
Check it out
UI Interactions & Animations Roundup #9
A fresh set of inspirational UI interactions and animations from the past couple of weeks.
Check it out