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