Collective #661
Inspirational Website of the Week: Johannes Kempe
The kind of sites that just make you smile! A clear winner with excellent typography and details that will brighten your day.
Get inspired
A Primer On CSS Container Queries
A practical guide to getting started with container queries by Stephanie Eckles.
Check it out
PINTR
An open source tool to create single line SVGs from drawings. Great for avatars and pen plotter drawings.
Check it out
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
Frustrating Design Patterns That Need Fixing: Birthday Picker
Starting with the infamous birthday picker, Vitaly Friedman takes a closer look at some frustrating design patterns and explores better alternatives.
Read it
Optimizing Web Vitals using Lighthouse
Addy Osmani writes about finding opportunities to improve user-experience with Chrome’s web tooling.
Read it
Tiny Wins
Joel Califa writes about the big benefits of little changes.
Read it
Component-level art direction with CSS Container Queries
A great article by Sara Soueidan on how to use Container Queries for controlling what images to use in a layout.
Read it
Creating Generative SVG Characters
Michelle Barker shares the process behind a fantastic generative SVG characters demo.
Read it
Debugging vertical layouts in 2021
Chen Hui Jing reiterates an old vertical writing demo that used CSS grid for layout.
Read it
A Look at Tailwind CSS
Ahmad Shadeed’s insightful thoughts on Tailwind CSS.
Read it
SimpleLogin
A great open source email alias solution that helps you protect against spam, phishing and data breaches.
Check it out
zx: A tool for writing better scripts
With this tool you can do Shell scripting in JavaScript.
Check it out
Web History Chapter 8: CSS
Jay Hoffmann takes us back to the past and tells the fascinating story of the very beginnings of CSS and it’s evolution.
Read it
Psychology of Design: 101 Cognitive Biases & Principles That Affect Your UX
A complete list of cognitive biases and design principles. Tons of product examples, tips and checklists to improve your user experience.
Check it out
Aspect-ratio and grid
Peter-Paul Koch encountered a problem with using the new aspect-ratio declaration in a grid context and is asking for help.
Check it out
Making Generative Art with Rust
A great interview with generative artist Alexis André.
Check it out
3Dengine
Victor Ribeiro’s first attempt at a 3D engine using native JavaScript and WebGL.
Check it out
Ideas Filter
A great place to find apps/plugins/extensions from various marketplaces with the option to filter for ideas for which many people pay but that have a low rating.
Check it out
Performance-testing the Google I/O site
Jake Archibald takes a close look at the performance of the Google I/O event pages.
Check it out
Sketch: in 2021 and beyond
Learn what’s new in the latest big update of the Sketch platform.
Check it out
Readme.so
Use readme.so’s markdown editor and ready made templates to easily create a simple README for your repositories.
Check it out
How we use Web Components at GitHub
GitHub has long been a proponent of Web Components. Here’s how we use them.
Read it
CSS Only – Smooth Scrolling Sticky ScrollSpy Navigation
Davor Suljic made this CSS only version of Bramus’ demo.
Check it out
Noisy Strokes Texture with Three.js and GLSL
Learn how to code up the noisy strokes effect seen on the website of Leonard using Three.js and GLSL.
Check it out