Collective #458
Inspirational Website of the Week: Dean Bradshaw
A beautifully fluid web experience with a nice cursor detail. Our pick this week.
Get inspired
CSS Layout Cookbook
The MDN CSS layout cookbook aims to bring together recipes for common layout patterns.
Check it out
Real Time Design in WordPress
Divi is powered by the Divi Builder, an insanely fast and incredibly intuitive front end editor like nothing you have seen before. It will change the way you build websites forever.
Check it out
Structural Typography
A wonderful article by Bethany Heck on the usage of type as both language and composition.
Read it
Form Design Patterns Book Excerpt: A Registration Form
An excerpt from Adam Silver's new book "Form Design Patterns".
Read it
How to Import a 3D Blender Object into a Three.js Project as a glTF File
A great tutorial by Matthew Main on how to import complex custom 3D shapes into Three.js.
Read it
Adaptive Serving using JavaScript and the Network Information API
Addy Osmani shows how navigator.connection.effectiveType is useful for delivering different assets based on the quality of the user's network connection.
Read it
Using machine learning to index text from billions of images
Some insight into Dropbox's automatic image text recognition.
Read it
Start Performance Budgeting
An article by Addy Osmani on the importance of setting a performance budget.
Read it
Calls between JavaScript and WebAssembly are finally fast
Lin Clark explains how in the latest version of Firefox Beta, calls between JS and WebAssembly are faster than non-inlined JS to JS function calls.
Read it
Dragon Snake
A great demo by Thomas Hooper.
Check it out
Walt
Walt is an alternative syntax for WebAssembly text format.
Check it out
Sass Selectors: To Nest Or Not To Nest?
Brad Frost compares nesting to no nesting in Sass and highlights the pros and cons.
Read it
Understanding the difference between grid-template and grid-auto
Ire Aderinokun explains an important difference in some new properties related to CSS Grid Layout.
Read it
Unbuttoning Buttons
Scott O'Hara explores how to make a button element behave as inline text.
Read it
Build CSS grid layouts visually
Webflow's playground for CSS grid-powered layouts.
Check it out
Why don’t we add a <lovely> element to HTML?
Bruce Lawson explains why not a lot of new elements are included into HTML.
Read it
Accessibility Cheatsheet
Moritz Gießmann created this useful cheatsheet for better accessibility.
Check it out
Monocyte
Dimitra Vasilopoulou created this image effect on mouse move.
Check it out
On the go, round 3D
An awesome round 3D demo by Dave DeSandro.
Check it out
Animated 3D unicycle using CSS transform & perspective
Hai Le create this fun 3D animated scene.
Check it out
#CodePenChallenge - Animated CSS mask-image
Tony Banik uses an animated GIF as a mask-image. Very neat!
Check it out
Running Pumpkin with POP.svg
Steve Gardner's demo using his new library POP.svg for animating an SVG path along another path.
Check it out
Shaping Functions
Visualizations of shaping functions used in algorithmic drawing. By Nitin Tulswani.
Check it out
