Collective #742
![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_WOTW.jpg?x88254)
Inspirational Website of the Week: Barlow Agency
A minimal design with an interesting panning effect. Our pick this week.
Get inspired![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_kintone.jpg?x88254)
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![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_readability.jpg?x88254)
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![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_utopia.jpg?x88254)
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![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_nextra.jpg?x88254)
Nextra 2.0
The new version of the Next.js static site generator brings some great features.
Check it out![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_readymag.jpg?x88254)
Readymag Websites of the Year 2022
Cast your vote for websites that inspire you and help them win.
Check it out![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_rain.jpg?x88254)
WebGL Rain
Ash Thornton shares Unseen Studio's first experiment, refracting WebGL rain drops!
Check it out![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_meidaqueries.jpg?x88254)
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![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_container.jpg?x88254)
Digging Deeper Into Container Style Queries
Geoff Graham takes another look on container style queries and what's currently being discussed.
Read it![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_logotype.jpg?x88254)
From type to logotype
Tom Muller's article on the process of creating a logotype.
Read it![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_videotutorial.jpg?x88254)
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![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_space.jpg?x88254)
Complementary Space
Donnie D'Amato presents a framework to design spacing tokens semantically.
Read it![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_harmonics.jpg?x88254)
Spherical Harmonics
Steve Trettel made this awesome demo for a lecture.
Check it out![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_wireframe.jpg?x88254)
How to transfigure wireframes into HTML
The first article in HTMHell's Advent calendar is about transforming a design into code.
Read it![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_basement.jpg?x88254)
Basement Foundry
The type foundry by basement.studio where they offer their amazing, ever-evolving typefaces. And what a great site!
Check it out![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_whatifurlcss.jpg?x88254)
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![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_notion.jpg?x88254)
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![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_christmas.jpg?x88254)
Iris 2
A fun Christmas marbling experiment with WebGL by Maeda Mameo. Check out all the other experiments, too!
Check it out![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_matrix.jpg?x88254)
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![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_wormscroll.jpg?x88254)
Infinite Scroll and Wormy Scroll
Alex Dytrych's funny wormy scroll experiment.
Check it out![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_chat.jpg?x88254)
A Conversation With ChatGPT
Matthias Ott experimented with the new ChatGPT model by OpenAI and shares his impressive conversation.
Check it out![Collective 742 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/12/C742_tooltip.jpg?x88254)
Tooltip to Gallery Transition
A concept for page transitions where a tooltip image animates to a gallery layout and fullscreen image.
Check it out