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