Collective #661
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_WOTW.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_containerqueries.jpg)
A Primer On CSS Container Queries
A practical guide to getting started with container queries by Stephanie Eckles.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_lines.jpg)
PINTR
An open source tool to create single line SVGs from drawings. Great for avatars and pen plotter drawings.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/Divi_new.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_datepicker.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_lighthouse.jpg)
Optimizing Web Vitals using Lighthouse
Addy Osmani writes about finding opportunities to improve user-experience with Chrome’s web tooling.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_tiny.jpg)
Tiny Wins
Joel Califa writes about the big benefits of little changes.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_artdirection.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_generativesvgs.jpg)
Creating Generative SVG Characters
Michelle Barker shares the process behind a fantastic generative SVG characters demo.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_verticallayouts.jpg)
Debugging vertical layouts in 2021
Chen Hui Jing reiterates an old vertical writing demo that used CSS grid for layout.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_tailwind.jpg)
A Look at Tailwind CSS
Ahmad Shadeed’s insightful thoughts on Tailwind CSS.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_alias2.jpg)
SimpleLogin
A great open source email alias solution that helps you protect against spam, phishing and data breaches.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_jsscript.jpg)
zx: A tool for writing better scripts
With this tool you can do Shell scripting in JavaScript.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_css.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_design.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_ratio.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_rust.jpg)
Making Generative Art with Rust
A great interview with generative artist Alexis André.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_3d.jpg)
3Dengine
Victor Ribeiro’s first attempt at a 3D engine using native JavaScript and WebGL.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_ideas.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_googleio.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_sketch.jpg)
Sketch: in 2021 and beyond
Learn what’s new in the latest big update of the Sketch platform.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_readme.jpg)
Readme.so
Use readme.so’s markdown editor and ready made templates to easily create a simple README for your repositories.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_webcomponents.jpg)
How we use Web Components at GitHub
GitHub has long been a proponent of Web Components. Here’s how we use them.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_cssonly.jpg)
CSS Only – Smooth Scrolling Sticky ScrollSpy Navigation
Davor Suljic made this CSS only version of Bramus’ demo.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C661_yuri.jpg)
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