Collective #593
Publikováno: 27.2.2020
Tailwind UI * The Markup * Open Peeps * How does the Virtual DOM work? * Revealing Hero Effect
Collective #593 was written by Pedro Botelho and published on Codrops.

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

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.

Tailwind UI
Fully responsive, beautiful UI components, designed and developed by Adam Wathan and Steve Schoger, the creators of Tailwind CSS.

Open Peeps
A mix-and-match hand-drawn illustration library by Pablo Stanley.

How does the Virtual DOM work?
An animated explainer by Sarah Drasner on how the Virtual DOM works.

Inconsistent user-experiences with native lazy-loading images
Daniel Aleksandersen highlights the differences of implementation of native lazy loading in browsers.

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.

Heroicons
A set of free MIT-licensed high-quality SVG icons for UI development.

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.

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.

Iconset
Iconset is a free SVG icon organizer and manager app for designers, developers and teams for both, macOS and Windows.

Booklets.io
A place that collects hundreds of booklets on design, business, freelancing and more.

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.

Mosquito JS
A fun creation by Tim Holman: an annoying mosquito noise, generated with JavaScript.

Buttono
A flexible Sass mixin for creating BEM-style buttons. By Hasan Aydo?du.

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.

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.”

CSS Specificity calculator
Quickly calculate any CSS selector specificity score along with explanations.

5 Common Web App Accessibility Issues And How To Fix Them
Some useful tips on how to fix common accessibility issues in web apps.

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.

Pure CSS Responsive Browser Template
A really nice and responsive browser template by Adam Marsden.

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.

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.
Collective #593 was written by Pedro Botelho and published on Codrops.