Collective #620
Inspirational Website of the Week: keysshoes
We love the fun layouts and diverse details! Our pick this week.
Get inspired
What is the Small Web?
Aral Balkan has a vision for the future where every person owns and controls their own place on the shared global network. He also introduces Site.js, a Small Web construction set.
Read it
ztext.js
Easy to implement, 3D typography for the web that works with every font.
Check it out
The Divi Summer Sale
Only 4 days left! Don't miss your chance to get a 20% discount on the most powerful WordPress theme in the world.
Check it out
Umami
Umami is a simple, easy to use, self-hosted web analytics solution.
Check it out
The Thing With Leading in CSS
A must-read article by Matthias Ott on why design and implementation can look so different for vertical spaces between texts.
Read it
How to Use AVIF: The New Next-Gen Image Compression Format
Start using next-gen .avif images today progressively with the <picture> element. The format is ~50% smaller in size compared to JPEG, and ~20% smaller than WebP.
Building the Zig-Zag Gradient Lab
Michelle Barker shares the video and transcript of her talk at Vienna Calling about the Zig-Zag Gradient Lab.
Check it out
Use advanced typography with local fonts
Learn all about the Local Fonts API which enumerates the user's installed local fonts and provides low-level access to the various TrueType/OpenType tables.
Read it
The difference between aria-label and aria-labelledby
Léonie Watson explains the difference between two important accessibility attributes.
Read it
Flume
In case you missed it: Flume is a React-powered node editor and runtime engine
Check it out
Best way to lazy load images for maximum performance
Adrian Bece shows the modern approach of lazy loading images.
Read it
Create blurred fills for images with aspect ratio containers in CSS
A very useful demo by Martijn Cuppens that shows how to automatically create blurred fills as background for images.
Check it out
Codemap
Codemap visualizes function calls in a intuitive way where you can navigate your code in a graph.
Check it out
Gradient Magic
A gallery of stylish and unique CSS gradients.
Check it out
#s3e35 ALL YOUR HTML, Moving through infinite clouds
A great tutorial where Yuri Artyukh shows how to implement the infinite clouds effect from the makingmaiselmarvelous.com site.
Watch it
A Tapestry of Tools
Daniel Eden on the effectiveness of using a variety of design tools.
Read it
Teal
With Teal you can build stateful and portable serverless applications quickly.
Check it out
handwritten.js
With this library you can convert typed text to an image of realistic handwriting.
Check it out
Why CSS Logical Properties Aren’t Ready for Use!
Elad Shechter explains why the new CSS logical properties module is not yet ready for prime time.
Read it
MergeURL
MergeURL helps you merge multiple URLs hassle-free without any user registration.
Check it out
Accordion Icons: Which Signifiers Work Best?
Page Laubheimer and Raluca Budiu looked at several possible icons as signifiers for accordions and found out which one works best.
Read it
Ct.js
In case you didn't know about it: Ct.js is a free 2D game editor based on web technologies.
Check it out
CSS Shapes Layout Experiment
A funky shapes layout experiment by Kristopher Van Sant.
Check it out
Github Profile Readme Generator
Prettify your GitHub user profile with this readme generator.
Check it out
Experimental Triangle Image Transitions with WebGL
Some experimental animations using triangles for image transitions with WebGL.
Check it out
Awesome Demos Roundup #17
A fresh roundup of the most interesting and creative web experiments from the last couple of weeks.
Check it out