Collective #742

Inspirational Website of the Week: Barlow Agency
A minimal design with an interesting panning effect. Our pick this week.
Get inspired

This content is sponsored via BuySellAds
Use Kintone to Spend Less Time on the Back-end
Kintone is a powerful web database, providing developers with a convenient environment to test out front-end coding ideas, without having to run a back-end.
Check it out

Readability
A new series of articles by the Google Fonts team where you’ll learn about the qualities of type and typography that make reading easier.
Read it

Designing a Utopian layout grid
This post aims to contextualise the Utopia fluid grid calculator which helps you to define a layout grid by clicking a few buttons. By James Gilyead.
Check it out

Nextra 2.0
The new version of the Next.js static site generator brings some great features.
Check it out

Readymag Websites of the Year 2022
Cast your vote for websites that inspire you and help them win.
Check it out

WebGL Rain
Ash Thornton shares Unseen Studio’s first experiment, refracting WebGL rain drops!
Check it out

A Practical Guide to CSS Media Queries
Take a closer look at what media queries are, how they work, and how to use them correctly, including for creating responsive designs. By Alex Ivanovs.
Read it

Digging Deeper Into Container Style Queries
Geoff Graham takes another look on container style queries and what’s currently being discussed.
Read it

From type to logotype
Tom Muller’s article on the process of creating a logotype.
Read it

Award Winning Animation With Only 20 Lines Of CSS?
Learn how to recreate the sliding image track effect from camillemormal.com in this video tutorial by Hyperplexed.
Check it out

Complementary Space
Donnie D’Amato presents a framework to design spacing tokens semantically.
Read it

Spherical Harmonics
Steve Trettel made this awesome demo for a lecture.
Check it out

How to transfigure wireframes into HTML
The first article in HTMHell’s Advent calendar is about transforming a design into code.
Read it

Basement Foundry
The type foundry by basement.studio where they offer their amazing, ever-evolving typefaces. And what a great site!
Check it out

CSS For URLs and HTTP Headers
Jim Nielsen wonders what if we could write CSS based on any value in the current page’s URL.
Read it

Notion introduces expanded Free Plan & new Business Plan
Good news from Notion: they made some updates to their pricing plans that now include an expanded free plan.
Check it out

Iris 2
A fun Christmas marbling experiment with WebGL by Maeda Mameo. Check out all the other experiments, too!
Check it out

A Performance Maturity Matrix
The year’s Web Performance Calendar starts with an article by Brian Louis Ramirez on a systematic approach to improving performance using a “performance maturity matrix”.
Read it

Infinite Scroll and Wormy Scroll
Alex Dytrych’s funny wormy scroll experiment.
Check it out

A Conversation With ChatGPT
Matthias Ott experimented with the new ChatGPT model by OpenAI and shares his impressive conversation.
Check it out

From Our Blog
Tooltip to Gallery Transition
A concept for page transitions where a tooltip image animates to a gallery layout and fullscreen image.
Check it out