Collective #576

Inspirational Website of the Week: Obys
The team of Obys created a very artful portfolio with great typography and layouts using the fantastic gooey and motion hover effects.
Get inspired
Color Theory and Contrast Ratios
A great guide by Christopher Schmitt that will give you valuable insight to the concept of color contrast ratios.
Read it
Start your own freelance business in 2020 by becoming a Divi developer
Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.
Start learning now
Just JavaScript
Learn the JavaScript mental models in this email series by Dan Abramov. Also, check out his latest article What Is JavaScript Made Of?
Check it out
Flexible Captioned Slanted Images
A master class by Eric Meyer on how to create slanted images using clip-path.
Read it
Bundling JavaScript for Performance: Best Practices
David Calhoun looks at three approaches for bundling a simple React.js app.
Read it
Free Font: MAK
An experimental contrast typeface, inspired by Ukrainian music. By Valentyn Tkachenko.
Get it
RTL Styling 101
An extensive guide on how to style for RTL in CSS by Ahmad Shadeed.
Read it
Acoustic activity recognition in JavaScript
Charlie Gerard shares a prototype of a browser-based acoustic activity recognition system.
Read it
Top Pens of 2019 on CodePen
A collection of the 100 most liked Codepen demos of 2019.
Check it out
Thoughts On Svelte
Some interesting thoughts on why Svelte is becoming so popular. By Dwayne Charrington.
Read it
What a Year of Learning and Teaching Accessibility Taught Me
Sara Soueidan shares some valuable lessons and core values that drive her work on accessibility.
Read it
Generative Placeholders
A really cool placeholder images tool that uses generative art images. By Stefan Bohacek.
Check it out
Porting a JavaScript App to WebAssembly with Rust
The first part in a series on how to do a complete port of a web application from React+Redux written in JavaScript to WebAssembly (WASM) with Rust.
Read it
ImTui
ImTui is an immediate mode text-based user interface library. Check out the Hacker News terminal example.
Check it out
This is my new favorite (free) programming tool – GitHub Actions Tutorial
A practical video tutorial by Kristian Freeman where he explores the what, the why, and the how of GitHub Actions.
Watch it
chl.li URL shortener
A simple, modern, free and privacy-friendly URL shortener.
Check it out
Krabby
Krabby is a web extension (for Chrome, Firefox and surf) for keyboard-based navigation, inspired by Kakoune.
Check it out
Accessibility tools for designers and developers
A guide by Lisa Dziuba with accessibility testing tools, color contrast checkers and color blindness simulators.
Check it out
How tracking pixels work
Julia Evans explains how advertisers track people on the internet using tracking pixels.
Read it
Color Picker From Image
A tool that generates a color palette from an image with a color picker.
Check it out
How to Create the Apple Fifth Avenue Cube in WebGL
A tutorial on how to re-create the Apple Fifth Avenue Cube animation using WebGL.
Read it