Collective #645

Inspirational Website of the Week: Myriad
A brilliant design with lots of unique details and beautiful micro-effects. Our pick this week.
Get inspired

Instant websites for your clients with Divi Layout Packs
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Check it out

State of JS 2020 Results
The results of the annual survey about the latest trends in the JavaScript ecosystem are out.
Check it out

JPEG.rocks
A browser-based, privacy-aware JPEG optimizer.
Check it out

Creating comic book speech bubbles with SVG and JavaScript
A great tutorial by Paul Spencer on how to create SVG speech bubbles with text.
Read it

My Favorite Typefaces of 2020
After a decade, ILT’s annual Favorite Fonts list is back. The top-ten favorite typefaces is now joined by another 50 typefaces in the extended Honorable Mentions list.
Read it

Aronian
A beautiuful exposé for chess player Levon Grigori Aronian.
Check it out

Noise Planets
Atul Vinayak studies and replicates some generative line artwork by Tyler Hobbs using p5js.
Read it

A developer’s perspective: the problem with screen reader testing
Jake Tracey asks “what should be the baseline in terms of testing for screen readers, and what browser and screen reader combinations are the most important to cover in order to achieve the greatest level of WCAG compliance?”
Read it

In Critical Defense of Frontend Development
Jens Oliver Meiert on how the field of frontend development is in another crisis and what we can do to fix it.
Read it

React-three-fiber and GSAP demo
A fantastic demo by Fabio Ottaviani.
Check it out

Responsible Web Applications
Some tips for creating applications that are both responsive and accessible out of the box. By Joy Heron.
Read it

Understanding Clip Path in CSS
Learn everything about CSS clip-path, how it works, with examples and use-cases. By Ahmad Shadeed.
Read it

Maintaining JavaScript applications in the long term
A very interesting case study on how 9elements enhanced and refactored a client project over six years.
Read it

Why Tailwind Isn’t for Me
Jared White shares why he’s not very enthusiastic about Tailwind CSS.
Read it

Nested Media Queries
Great tip by Bramus regarding nesting media queries.
Check it out

Comparison between web browsers
A web browser ranking that is based on how much Privacy a browser offers by default, as well as, how much privacy can be gained by configuring it.
Check it out

Synesthesia
A beautiful demo of the cool audio-visual synthesizer.
Check it out

Text warping – Animated
A super cool text warping demo by Lokesh Dhakar.
Check it out

Drawing 2D Metaballs with WebGL2
An in-depth tutorial on how to code 2D visuals using WebGL2.
Check it out

On-Scroll Letter Animations
Some examples of how to make interesting letter animations when scrolling a web page using translations and Locomotive Scroll.
Check it out