Collective #742

Inspirational Website of the Week: Barlow Agency
A minimal design with an interesting panning effect. Our pick this week.
Get inspired
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
Tooltip to Gallery Transition
A concept for page transitions where a tooltip image animates to a gallery layout and fullscreen image.
Check it out