Collective #605
Publikováno: 14.5.2020
Modern CSS Solutions * IntersectionObserver Visualizer * Blush * Reef * Behind the Source * The Deno Handbook
Collective #605 was written by Pedro Botelho and published on Codrops.

Inspirational Website of the Week: Stephanie Jeong
Stephanie Jeong’s portfolio combines fun interactions with surprise elements and a fantastic design.
Get inspired
Start your own business and become financially independent
Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.
Get Divi
IntersectionObserver Visualizer
A simple visualizer tool to assist with using the Intersection Observer API. By Michelle Barker.
Check it out
Understanding Destructuring, Rest Parameters, and Spread Syntax
Learn about destructuring, rest parameters, and spread syntax in this article by Tania Rascia.
Read it
Micro-Typography: How To Space And Kern Punctuation Marks And Other Symbols
Thomas Bohm writes about the modern challenges of adding spacing to punctuation marks and other symbols.
Read it
The Oscars 2020
A Three.js experiment with the 2020’s Oscars. Check out the this tweakable version here. By Robert Borghesi.
Check it out
SVG Path Visualizer
A visualizer where you can enter SVG path data and discover how it’s build up.
Check it out
Pose Animator
Pose Animator takes a 2D vector illustration and animates its containing curves in real-time based on the recognition result from PoseNet and FaceMesh.
Check it out
Modern CSS Solutions
A great series by Stephanie Eckles that examines modern solutions to old CSS problems.
Check it out
A case study of complex table design
James Long shares how he approaches product design and all the considerations one needs to think about.
Read it
Blush
Blush makes it easy to add illustrations to your projects. Create, mix, and customize illustrations made by artists around the world.
Check it out
Progressively enhancing radio buttons with SVG whilst staying accessible
Christian Heilmann shows how to progressively enhance a radio button group to look great and still work with keyboard and screen readers.
Read it
switch.css
Sarah Fossheim’s latest CSS creation.
Check it out
Reef
A lightweight library for creating reactive, state-based components and UI. Reef is a simpler alternative to React, Vue, and other large frameworks.
Check it out
Optimize Cumulative Layout Shift
In this guide, Addy Osmani covers optimizing common causes of Cumulative Layout Shift (CLS) such as images and iframes without dimensions or dynamic content.
Read it
Everything I Learned About min(), max(), clamp() In CSS
Ahmad Shadeed shares what he learned about CSS Comparison Functions that are now supported in all major browsers.
Read it
The Deno Handbook: a concise introduction to Deno
Learn how to get up and running quickly with Deno, a modern Node.js alternative.
Read it
Modernist Abstract Vector and Pattern Set
A very nice set of geometric vector illustrations.
Check it out
Second-guessing the modern web
Tom MacWright explains why for things like blogs, shopping-cart-websites, mostly-CRUD-and-forms-websites, using React might not have any concrete benefit.
Read it
Animal Crossing: Isabelle’s Day Off
Tee Diang’s beautiful CSS only scene.
Check it out
Minigames & Playful Interactions
A great collection of microinteractions and mini-games.
Check it out
Behind the Source
Behind the Source is a series of interviews with the people behind the websites.
Check it out
Underline animation
An delightful animation where a line becomes a caret.
Check it out
Exciting Things on the Horizon For CSS Layout
Michelle Barker shares the exciting new things coming for CSS layout.
Read it
CSS fix for 100vh in mobile WebKit
Matt Smith shows how to use -webkit-fill-available as a CSS trick to handle the annoying mobile viewport bug with 100vh in WebKit on Safari.
Read it
window.location Cheatsheet
The very useful window.location cheatsheet by Samantha Ming.
Check it out
Web Vitals
Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
Check it outCollective #605 was written by Pedro Botelho and published on Codrops.