Collective #661

Original Source: http://feedproxy.google.com/~r/tympanus/~3/lr2ZXc80xwA/

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

Our Sponsor
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

From Our Blog
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

The post Collective #661 appeared first on Codrops.