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.
A Primer On CSS Container Queries
A practical guide to getting started with container queries by Stephanie Eckles.
PINTR
An open source tool to create single line SVGs from drawings. Great for avatars and pen plotter drawings.
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.
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.
Optimizing Web Vitals using Lighthouse
Addy Osmani writes about finding opportunities to improve user-experience with Chrome’s web tooling.
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.
Creating Generative SVG Characters
Michelle Barker shares the process behind a fantastic generative SVG characters demo.
Debugging vertical layouts in 2021
Chen Hui Jing reiterates an old vertical writing demo that used CSS grid for layout.
A Look at Tailwind CSS
Ahmad Shadeed’s insightful thoughts on Tailwind CSS.
SimpleLogin
A great open source email alias solution that helps you protect against spam, phishing and data breaches.
zx: A tool for writing better scripts
With this tool you can do Shell scripting in JavaScript.
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.
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.
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.
Making Generative Art with Rust
A great interview with generative artist Alexis André.
3Dengine
Victor Ribeiro’s first attempt at a 3D engine using native JavaScript and WebGL.
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.
Performance-testing the Google I/O site
Jake Archibald takes a close look at the performance of the Google I/O event pages.
Sketch: in 2021 and beyond
Learn what’s new in the latest big update of the Sketch platform.
Readme.so
Use readme.so’s markdown editor and ready made templates to easily create a simple README for your repositories.
How we use Web Components at GitHub
GitHub has long been a proponent of Web Components. Here’s how we use them.
CSS Only – Smooth Scrolling Sticky ScrollSpy Navigation
Davor Suljic made this CSS only version of Bramus’ demo.
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.
The post Collective #661 appeared first on Codrops.