Collective #607
Publikováno: 28.5.2020
Windups * Untools * Tailblocks * PureCSS Gaze * RoughNotation * Responsive web design turns ten
Collective #607 was written by Pedro Botelho and published on Codrops.

Inspirational Website of the Week: SEMP.AI
The portfolio of Ernesto Aguirre has a super-cool design with a futuristic touch and nice effects.
Get inspired
8 Great WordPress Plugins You Need to Try Out Now
There are so many fantastic WordPress plugins on the market. The WordPress plugins we bring you today are the MUST-HAVE tools.
Discover them now
PureCSS Gaze
A pure CSS oil painting by Diana Smith inspired by the Italian Renaissance.
Check it out
Tailblocks
An great project of ready-to-use Tailwind CSS blocks.
Check it out
Responsive web design turns ten
Ethan Marcotte remembers the first article on responsive web design and the history of the term and idea behind it.
Read it
Windups
A really nice typewriter effect library for React.
Check it out
Modern Touch-Friendly Design
Addy Osmani shares what he learned from Steven Hoober about designing for touch interfaces.
Read it
Today’s Javascript, from an outsider’s perspective
Lea Verou writes about how difficult the experience with today’s JavaScript workflow can be for novices.
Read it
Untools
A collection of thinking tools and frameworks to help you solve problems, make decisions and understand systems.
Check it out
CSS-only Slide-up Caption Hover Effect
Michelle Barker shows how to create a caption transition for an image. If you enjoy this, you might also like thesedemos on Codrops.
Check it out
RoughNotation
A small JavaScript library to create and animate hand-drawn annotations on a web page.
Check it out
Figma Plugins
Some great insight into Figma plugins by Varun Vachhar.
Read it
On fixed elements and backgrounds
Chen Hui Jing dives into containing blocks, rendering and scroll performance.
Read it
The Git Commit Hash
Mike Street writes about the magic 40 character string that is attached to every commit you do.
Read it
Boids
Marius Ballot made this wonderful boid simulation with Three.js.
Check it out
Ask an expert: Why is CSS …the way it is?
Chris Lilley unpacks the histories and mysteries of CSS in this great article.
Read it
Here’s what I didn’t know about “content”
Manuel Matuzovi? is sharing what he I didn’t know about the ‘content’ property.
Read it
Sorted CSS Colors
A tool to sort the named CSS colors for showing related colors together.
Check it out
Free Font: Ephemera
Inspired by ephemera from the printing tradition, Barrett Reid-Maroney designed this font.
Check it out
Single div CSS “Six”
A great single-div demo by Lynn Fisher.
Check it out
Safe/unsafe alignment in CSS flexbox
Learn how safe alignment can prevent data loss in CSS flexbox layouts.
Read it
Water
A lovely water effect demo made by Kasper De Bruyne.
Check it out
Svelte, why so much hype?
In this article, Anthony Le Goas answers some questions related to Svelte.
Read it
Web Engine Diversity and Ecosystem Health
Brian Kardell argues that we actually have a very healthy and open web ecosystem.
Read it
Browsers are not rendering engines
Stuart Langridge’s perspective on the narrative of Brian Kardell’s article on the web ecosystem.
Read it
Htmx
Htmx allows you to access AJAX, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.
Check it out
The Buggiest Site On The Web
Check out the horror in your browser’s developer console.
Check it out
An Infinitely Scrollable Vertical Menu
A quick look at how an infinitely scrollable menu works based on a looping scroll illusion of cloned items.
Check it outCollective #607 was written by Pedro Botelho and published on Codrops.