Collective #663
Inspirational Website of the Week: Kazuki Noda
Kazuki Noda’s portfolio is a creative gem with many unique details and interactive magic. 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
25 Years of CSS
Eric Meyer remebers how CSS kicked off 25 years ago this month in a conference room in Paris, May 7th, 1996.
Read it
Unveiling Material You
With Material You Google wants to transform design for Android, for Google, and for the entire tech industry.
Check it out
CSS Container Queries For Designers
Ahmad Shadeed explains CSS Container queries and shows how it will change your workflow as a designer.
Read it
Flat Data
Flat explores how to make it easy to work with data in git and GitHub.
Check it out
Harold – Static sites generator
Easily build blogs, landing pages, portfolios or documentation sites with ready-to-use templates.
Check it out
Recollection
Amazing Three.js magic by Ryohei Ukon.
Check it out
CSS Container Queries: Use-Cases And Migration Strategies
In this article, Adrian Bece covers CSS container query basics and shows how we can use them today with progressive enhancement or polyfills.
Read it
82% of developers get this 3 line CSS quiz wrong
Lea Verou explains some tricky CSS and shows how “revert” works.
Check it out
IcePanel
Design structured diagrams and link directly to your repos, folders and files.
Check it out
Incremental Static Regeneration: Building static sites a little at a time
Cassidy Williams writes about Incremental Static Regeneration or “hybrid web development” and how it can improve and scale sites “beyond the Jamstack”.
Read it
Handy.js
Handy makes defining and recognizing custom hand poses in WebXR a snap. It recognizes 100+ hand poses, including ASL finger spelling. Built on Three.js.
Check it out
A New Way To Reduce Font Loading Impact: CSS Font Descriptors
Barry Pollard explores some upcoming font options that might make it easier to align fallback fonts to final fonts.
Read it
Giving a damn about accessibility
A candid and practical handbook for designers by Fabricio Teixeira.
Check it out
svg-loader: A Different Way to Work With External SVG
Shubham Jain shows how to include external SVGs while retaining the format’s customization powers.
Read it
No, Utility Classes Aren’t the Same As Inline Styles
Sarah Dayan writes about utility-first CSS and ends with the overused cliché that utility classes are just inline styles.
Check it out
Vandal
A browser extension that helps you navigate back in time without leaving your current tab.
Check it out
LightGallery
A lightweight, modular, JavaScript image and video lightbox gallery plugin. Available for React.js, Vue.js, Angular, and TypeScript.
Check it out
Terms and Conditions Apply
A mini-game about pop ups, and the deviousness of websites and apps.
Check it out
2D Optics Demos in Javascript
Some 2D optics magic in JavaScript made by Philip Zucker.
Check it out
Katsuomi Kobayashi’s Car Simulator
Read how Katsuomi Kobayashi’s used the new WebGL version of the Google Maps JavaScript API for his car simulator.
Check it out
Coding a camera shutter effect in JavaScript
Learn how to build a camera shutter/iris simulation in plain JavaScript.
Check it out
Google AMP is dead! AMP pages no longer get preferential treatment in Google search
Read how from the release of the page experience algorithm, there is no longer any preferential treatment for AMP in Google’s search results, Top Stories carousel and the Google News.
Read it
How to Cleanup Async Effects in React
Dmitri Pavlutin explains how to correctly cleanup async side-effects in React when the component unmounts or updates.
Read it
How to Code a Crosshair Mouse Cursor with Distortion Hover Effect
A quick tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.
Check it out