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