Collective #620
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_WOTW.jpg)
Inspirational Website of the Week: keysshoes
We love the fun layouts and diverse details! Our pick this week.
Get inspired
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/SmallWeb-1.png)
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
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_3dtext.jpg)
ztext.js
Easy to implement, 3D typography for the web that works with every font.
Check it out
![Collective 619 Item Image](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C619_Divi.jpg)
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
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_umami.jpg)
Umami
Umami is a simple, easy to use, self-hosted web analytics solution.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_verticalleading.jpg)
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
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_newimageformat.jpg)
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.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_zigzag.jpg)
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
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_fonts.jpg)
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
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_aria.jpg)
The difference between aria-label and aria-labelledby
Léonie Watson explains the difference between two important accessibility attributes.
Read it
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_flume.jpg)
Flume
In case you missed it: Flume is a React-powered node editor and runtime engine
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_lazyloading.jpg)
Best way to lazy load images for maximum performance
Adrian Bece shows the modern approach of lazy loading images.
Read it
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_blur.jpg)
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
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_code.jpg)
Codemap
Codemap visualizes function calls in a intuitive way where you can navigate your code in a graph.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_gradients.jpg)
Gradient Magic
A gallery of stylish and unique CSS gradients.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_clouds.jpg)
#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
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_tapestry.jpg)
A Tapestry of Tools
Daniel Eden on the effectiveness of using a variety of design tools.
Read it
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_teal.jpg)
Teal
With Teal you can build stateful and portable serverless applications quickly.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_handwritten.jpg)
handwritten.js
With this library you can convert typed text to an image of realistic handwriting.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_css.jpg)
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
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_mergeurl.jpg)
MergeURL
MergeURL helps you merge multiple URLs hassle-free without any user registration.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_accordion.jpg)
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
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_2dgame.jpg)
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
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_shapes.jpg)
CSS Shapes Layout Experiment
A funky shapes layout experiment by Kristopher Van Sant.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_README.jpg)
Github Profile Readme Generator
Prettify your GitHub user profile with this readme generator.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_transition.jpg)
Experimental Triangle Image Transitions with WebGL
Some experimental animations using triangles for image transitions with WebGL.
Check it out
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/08/C620_demoroundup.jpg)
Awesome Demos Roundup #17
A fresh roundup of the most interesting and creative web experiments from the last couple of weeks.
Check it out