Collective #691
Publikováno: 9.12.2021
The 2021 Web Almanac * Open Props * Defensive CSS * Floating UI * Line length revisited
The post Collective #691 appeared first on Codrops.
Inspirational Website of the Week: Lama Lama
A fresh and playful web experience that has such a nice interactive motive. Our pick this week.
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.
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.
Three Phases of Life for Design Systems
Daniel Eden writes about the life cycle of a design system.
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.
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.
Defensive CSS
Ahmad Shadeed shares a list of defensive CSS techniques to avoid potential future issues.
On the Edge
Fantastic work and a great case study with wonderful visuals by How&How.
Floating UI
Position all types of floating elements with full control. Tooltips, popovers, dropdowns, menus, and more.
Line length revisited: following the research
A super interesting article on whether long line lengths do indeed cause reading difficulties.
Readymag Projects of the Year
Vote for the best projects made with Readymag. So much great inspiration here!
CSS aspect-ratio support
Addy Osmani shares that CSS aspect-ratio is now supported cross-browser!
Advent of Code 2021
Another great edition of the advent calendar for coders.
ffflux
An SVG generator to make fluid gradient backgrounds that feel organic and motion-like.
LibriVox
In case you didn’t know about it: free public domain audiobooks read by volunteers from around the world.
WebPDF.pro
A no-reload HTML/CSS/JS playground with instant editor and output sync.
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.
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.
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.
Shoelace
Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology.
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.
flow-field
A library for generating flow fields. By Romello Goodman.
Emoji to Scale
A fun projects by Javier Bórquez that puts emojis on a scale.
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.
Page Flip Text Effect (PSD)
A fantastic text effect made by the team of Pixelbuddha.
Animated 3D Ribbons with Three.js
Deconstructing the ribbon animation seen on iad-lab with geometrical tricks.
Grid Zoom Layout
A simple image grid layout where a small grid image zooms to become larger while a content view opens.
UI Interactions & Animations Roundup #20
A special collection of inspirational UI interaction shots with hot animations.
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.
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!
The post Collective #691 appeared first on Codrops.