Collective #569

Inspirational Website of the Week: Limnia
A true masterpiece that brings together modern elegance and sophisticated interactions.
Get inspired
Remote teams? Get on Clubhouse.
Easily collaborate with anyone in your organization and focus on what matters: building products that customers love, together.
Check it out
Case Study: lynnandtonic.com 2019 refresh
An excellent case study by Lynn Fisher on the process behind the 2019 redesign of her portfolio.
Read it
How to Overlap Images in CSS
A great article by Bri Camp Gomez where she shows how to overlap images with CSS Grid and provide a fallback for non-supportive browsers.
Read it
Flowy
Alyssa X made this minimal JavaScript library for creating beautiful flowcharts.
Check it out
How I created 488 "live images"
Ire Aderinokun shares how she created "live images" for each feature on caniuse.com.
Read it
Does JavaScript keep you too busy to care about CSS? Here are recent features you want to know about!
Pawel Grzybek recaps some new and interesting features that are available in CSS.
Read it
The Third Generation of Interfaces
Dzianis Pomazau writes about what the next generation of interfaces might be.
Read it
Using CSS custom properties to reduce the size of your CSS
Learn how to use CSS custom properties to create abstractions and optimize your CSS in this article by Sebastiano Guerriero.
Read it
CSS Architecture for Modern JavaScript Applications
Mike Riethmuller explorations into modernizing learnings from CSS architecture and how to apply them in the context to modern JavaScript applications.
Read it
Checklist to avoid the most common accessibility errors
Bruce Lawson gives some practical tips on how to avoid the most common accessibility errors.
Check it out
Machine Learning Systems Design
A booklet on machine learning systems design with practical exercises.
Check it out
AppLibsList
A categorized collection of trending and most commonly used libraries and components for ReactJS developers.
Check it out
Accessibility drives aesthetics
In this article Alex Chen rebuts the claim that accessibility and aesthetics are at odds with each other.
Read it
From Milliseconds to Millions: The Numbers Driving Web Perf
At this talk Harry Roberts takes a look at some of the numbers powering the web performance industry.
Watch it
Peekobot
Peekobot is a simple choice-driven chatbot framework in less than 100 lines of JavaScript. Made by Ross Wintle.
Check it out
The Benefits of Orthogonal React Components
Learn how striving for orthogonality in React component design can help make a system flexible and adaptable to change.
Read it
Who Can Use
Find out who can use your color combination by checking the WCAG grading and contrast ratio.
Check it out
Animated CSS Background Generator
Vincent Will created this neat customizer of animated CSS backgrounds.
Check it out
Realistic 3D Photo Cards (Hover Effect, Vue.Js)
A beautiful demo by Jouan Marcel.
Check it out
Creating a Distorted Mask Effect on an Image with Babylon.js and GLSL
Learn the basics of GLSL while creating a distorted mask effect on images using Babylon.js.
Read it