Collective #691

Inspirational Website of the Week: Lama Lama
A fresh and playful web experience that has such a nice interactive motive. Our pick this week.
Get inspired

We connect exceptional developers with world-class companies.
Gun.io combines an industry-leading matching algorithm with human relationships and support to help you find the best candidate (or job), fast.
Check it out

The 2021 Web Almanac
The Web Almanac is an annual state of the web report combining the expertise of the web community with the data and trends of the HTTP Archive.
Check it out

Three Phases of Life for Design Systems
Daniel Eden writes about the life cycle of a design system.
Read it

Modern fluid typography editor
Generate fluid typography code snippets using modern CSS clamp function and fine-tune fluid typography behavior using this editor made by Adrian Bece.
Check it out

Open Props: sub-atomic styles
Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.
Check it out

Defensive CSS
Ahmad Shadeed shares a list of defensive CSS techniques to avoid potential future issues.
Read it

On the Edge
Fantastic work and a great case study with wonderful visuals by How&How.
Check it out

Floating UI
Position all types of floating elements with full control. Tooltips, popovers, dropdowns, menus, and more.
Check it out

Line length revisited: following the research
A super interesting article on whether long line lengths do indeed cause reading difficulties.
Read it

Readymag Projects of the Year
Vote for the best projects made with Readymag. So much great inspiration here!
Check it out

CSS aspect-ratio support
Addy Osmani shares that CSS aspect-ratio is now supported cross-browser!
Check it out

Advent of Code 2021
Another great edition of the advent calendar for coders.
Check it out

ffflux
An SVG generator to make fluid gradient backgrounds that feel organic and motion-like.
Check it out

LibriVox
In case you didn’t know about it: free public domain audiobooks read by volunteers from around the world.
Check it out

WebPDF.pro
A no-reload HTML/CSS/JS playground with instant editor and output sync.
Check it out

RSS-proxy
In case you didn’t know about this project: RSS-proxy allows you to do create an RSS or ATOM feed of almost any website, just by analyzing the static HTML structure.
Check it out

I made a working Gameboy CSS art: try it out
Mustapha Aouas writes about the maze generation and solving algorithm plus some CSS art key concepts.
Read it

Remix
Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience.
Check it out

Shoelace
Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology.
Check it out

Django, HTMX and Alpine.js: Modern websites, JavaScript optional
Building a modern front end in Django without reaching for a full-blown JavaScript framework. Choosing the right tools for the job, and bringing them into your project.
Check it out

flow-field
A library for generating flow fields. By Romello Goodman.
Check it out

Emoji to Scale
A fun projects by Javier Bórquez that puts emojis on a scale.
Check it out

browsers.page
Browsers.page shows users their browser name and version, matched with a list of the browsers you support as a company or project. Users are visually reminded to update, if they lag behind.
Check it out

Page Flip Text Effect (PSD)
A fantastic text effect made by the team of Pixelbuddha.
Check it out

Animated 3D Ribbons with Three.js
Deconstructing the ribbon animation seen on iad-lab with geometrical tricks.
Check it out

Grid Zoom Layout
A simple image grid layout where a small grid image zooms to become larger while a content view opens.
Check it out

UI Interactions & Animations Roundup #20
A special collection of inspirational UI interaction shots with hot animations.
Check it out

Teleportation Transition with Three.js
A coding session where you will learn how to recreate the teleportation transition seen on “Marseille 2021” by La Phase 5.
Check it out

Coloring With Code — A Programmatic Approach To Design
Learn to create beautiful, inspiring, and unique color palettes/combinations, all from the comfort of your favorite text editor!
Check it out