Collective #593

The Markup
The Markup is a nonprofit newsroom that investigates how powerful institutions are using technology to change our society.
Check it out

Become a Data Scientist, job guaranteed.
The Data Science Career Track is a 6-month, self-paced online course that equips students with the skills and hands-on experience to get hired in data science.
Apply today
Tailwind UI
Fully responsive, beautiful UI components, designed and developed by Adam Wathan and Steve Schoger, the creators of Tailwind CSS.
Check it out
Open Peeps
A mix-and-match hand-drawn illustration library by Pablo Stanley.
Check it out
How does the Virtual DOM work?
An animated explainer by Sarah Drasner on how the Virtual DOM works.
Check it out
Inconsistent user-experiences with native lazy-loading images
Daniel Aleksandersen highlights the differences of implementation of native lazy loading in browsers.
Read it
Revealing Hero Effect in CSS and JavaScript
Learn how to create a section that reveals its content when the previous element scrolls away. A tutorial by Claudia Romano.
Check it out
Heroicons
A set of free MIT-licensed high-quality SVG icons for UI development.
Check it out
What Does A Foldable Web Actually Mean?
A very interesting read on foldable devices and the ideas around a "foldable web". By Frederick O’Brien.
Check it out
Drag–and–Drop: How to Design for Ease of Use
Learn how clear signifiers and feedback at all stages of the interaction make drag–and–drop discoverable and easy to use.
Read it
Iconset
Iconset is a free SVG icon organizer and manager app for designers, developers and teams for both, macOS and Windows.
Check it out
Booklets.io
A place that collects hundreds of booklets on design, business, freelancing and more.
Check it out
Why write vanilla JS when you can just use [insert library or framework here]?
Some good points on why writing your own vanilla JS instead of using a framework can be a better option.
Read it
Mosquito JS
A fun creation by Tim Holman: an annoying mosquito noise, generated with JavaScript.
Check it out
Buttono
A flexible Sass mixin for creating BEM-style buttons. By Hasan Aydo?du.
Check it out
Your website probably has a memory leak
Memory leaks are common in Single Page Apps and this article will show you how to find and fix them.
Read it
The Tuner
Eric Karjaluoto has a very distinct view on the role of the designer. He writes: "It's hard to produce suitable work when you think about design as a form of expression."
Read it
CSS Specificity calculator
Quickly calculate any CSS selector specificity score along with explanations.
Check it out
5 Common Web App Accessibility Issues And How To Fix Them
Some useful tips on how to fix common accessibility issues in web apps.
Read it
Share images to your website using the Web Share Target API
Learn how to use the Web Share Target API on the example of a grayscale converter for images. By Michael Scharnagl.
Check it out
Pure CSS Responsive Browser Template
A really nice and responsive browser template by Adam Marsden.
Check it out
Animating SVG Text on a Path
A demo that shows how to animate SVG text on a path on scroll using the Intersection Observer API and SVG filters.
Check it out
Audio-based Image Distortion Effects with WebGL
Some experiments that show how to use audio-based distortion effects on images with p5.js and its sound library.
Check it out