Collective #657

Inspirational Website of the Week: SSSolitaire
A beautiful design with excellent typography and interactive goodness. Our pick this week.
Get inspired

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

Say Hello To CSS Container Queries
Learn all about how CSS container queries work with lots of examples and use-cases. By Ahmad Shadeed.
Read it

Glob Editor
A fantastic nodes/globs based editor made by Steve Ruiz.
Check it out

UNCUT
An open source typeface catalogue, focusing on somewhat contemporary type.
Check it out

A Complete Guide To HTML Email
Vitaly Friedman looks into templates and tools for building and designing HTML emails.
Check it out

lofi.cafe
A curated selection of live lofi stations from YouTube, in a beautiful online player.
Check it out

Natto: A Canvas for JavaScript
A multi-talented JS playground where you can run scripts and that is also an API client, JSON viewer and datavisusalization tool. Made by Paul Shen.
Check it out

Frontend Toolkit
Frontend Toolkit is a customizable dashboard for your recurring Frontend tasks. By Damian Frizzi.
Check it out

Beautiful PDFs from HTML
A tutorial to using paged.js for creating great looking PDFs from HTML.
Check it out

gitlet.js
Mary Rose Cook wrote Gitlet to show how Git works under the covers.
Check it out

Yamauchi No.10 Family Office
A fantastic web experience with an incredible isometric layout.
Check it out

Overflow Issues In CSS
Ahmad Shadeed explores the causes of overflow issues and shows how to solve them.
Read it

Modern CSS Upgrades To Improve Accessibility
Learn how to use modern CSS to make layouts more accessibly inclusive for users of all abilities across any device. By Stephanie Eckles.
Read it

My current HTML boilerplate
Manuel Matuzovi? shares his up-to-date HTML boilerplate with a line-by-line explanation.
Check it out

#116 in 2021 / CodePen Challenge / Scrolling
A cool distorted scrolling effect by Toshiya Marukubo.
Check it out

CSS Pie Timer Revisited
Kitty Giraudel revisits his pure CSS pie timer
Check it out

CSS is a Strongly Typed Language
An interesting article by Eric Bailey on why CSS can be perceived as strongly typed language.
Read it

Real-world CSS vs. CSS-in-JS performance comparison
Tomas Pustelnik’s case study on how CSS-in-JS impacts the performance of a website compared to plain CSS.
Read it

Free Mobile Chat UI Kit
Free UI kit for building in-app mobile chat including 50+ handcrafted messaging screens for Sketch, Figma, and Adobe Xd.
Check it out

JavaScript Cheat Sheet
A JavaScript cheat sheet made by Sunil Kumar.
Check it out

Wobbly 2D Physics with Matter.js and Paper.js
A recreation of the wobbly shape effect seen on Cédric Pereira’s website using Matter.js and Paper.js.
Check it out