Inspirational Website of the Week: keysshoes
We love the fun layouts and diverse details! Our pick this week.
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.
ztext.js
Easy to implement, 3D typography for the web that works with every font.
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.
Umami
Umami is a simple, easy to use, self-hosted web analytics solution.
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.
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.
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.
The difference between aria-label and aria-labelledby
Léonie Watson explains the difference between two important accessibility attributes.
Flume
In case you missed it: Flume is a React-powered node editor and runtime engine
Best way to lazy load images for maximum performance
Adrian Bece shows the modern approach of lazy loading images.
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.
Codemap
Codemap visualizes function calls in a intuitive way where you can navigate your code in a graph.
Gradient Magic
A gallery of stylish and unique CSS gradients.
#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.
A Tapestry of Tools
Daniel Eden on the effectiveness of using a variety of design tools.
Teal
With Teal you can build stateful and portable serverless applications quickly.
handwritten.js
With this library you can convert typed text to an image of realistic handwriting.
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.
MergeURL
MergeURL helps you merge multiple URLs hassle-free without any user registration.
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.
Ct.js
In case you didn’t know about it: Ct.js is a free 2D game editor based on web technologies.
CSS Shapes Layout Experiment
A funky shapes layout experiment by Kristopher Van Sant.
Github Profile Readme Generator
Prettify your GitHub user profile with this readme generator.
Experimental Triangle Image Transitions with WebGL
Some experimental animations using triangles for image transitions with WebGL.
Awesome Demos Roundup #17
A fresh roundup of the most interesting and creative web experiments from the last couple of weeks.
The post Collective #620 appeared first on Codrops.