Collective #667
![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_WOTW.jpg?x86293)
Inspirational Website of the Week: Sandland Sleep
A lovely color theme with lots of type playfulness. Our pick this week.
Get inspired![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_gather.jpg?x86293)
Immersive virtual offices for remote teams. Free up to 25 users.
Drop by a coworker's desk, chat by the water cooler, and host game nights - with your arrow keys. Video turns on when you get close to a teammate.
Try it free![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_styled.jpg?x86293)
Demystifying styled-components
Josh W Comeau explains how styled components work under the hood by building a mini-clone.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_metrics.jpg?x86293)
Towards a better responsiveness metric
Learn about our thoughts on measuring responsiveness and give the web.dev team some feedback.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_ire.jpg?x86293)
Setting up a Decentralised Website (ENS + IPFS = dWeb)
Ire Aderinokun's introduction to ENS names and the concept of decentralized websites.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_tooltip.jpg?x86293)
Perfect Tooltips With CSS Clipping and Masking
Louis Hoebregts shows how to do use CSS Clipping and Masking to create awesome tooltips.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_codetut.jpg?x86293)
Building Generative Grid Layouts With Quadtrees
Learn to create harmonious generative grids based on random numbers, source images, user input, and more. By George Francis.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_sm.jpg?x86293)
A Complete Guide To Accessibility Tooling
Nic Chan looks into different kinds of tools to help you streamline your accessibility testing process.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_react.jpg?x86293)
React Architecture: How to Structure and Organize a React Application
An opinionated guide to setting up the architecture for a new React application by Tania Rascia.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_memory.jpg?x86293)
Benchmarking JavaScript Memory Usage
Tim Kadlec on the mystery and challenges of memory usage on the web.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_scrollbars.jpg?x86293)
Custom Scrollbars In CSS
An article by Ahmad Shadeed where you'll learn about the old and new way to style custom scrollbars in CSS.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_feedback.jpg?x86293)
Asynchronous Design Critique: Giving Feedback
Erin Casali on the advantages of asynchronous feedback to collaboratively improving designs.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_burger.jpg?x86293)
Beat Burger
A really cool playable burger demo by Steve Gardner.
Check it out![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_circle.jpg?x86293)
Concentric Circle Spinner
A cool spinner made only with divs, some border tricks, and one CSS animation.
Check it out![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_charts.jpg?x86293)
How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji
Preethi shows how to create CSS charts with interesting shapes.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_githibissues.jpg?x86293)
GitHub Issues
With the new GitHub Issues you can break issues into tasks, track relationships, add custom fields, and have conversations.
Check it out![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_emoji.jpg?x86293)
Bear plus snowflake equals polar bear
A super interesting article on byte size of emojis by Andy Salerno.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_variablefont.jpg?x86293)
Optical size, the hidden superpower of variable fonts
Learn about the hidden superpower of variable fonts in this article by Roel Nieskens.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_3d.jpg?x86293)
A 3D Hover Effect Using CSS Transforms
A tutorial on creating a 3D hover interaction with JavaScript and CSS.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_svgfavicons.jpg?x86293)
OMG, SVG Favicons FTW!
Austin Gil explores the fun new world of SVG favicons.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_csspaint.jpg?x86293)
Drawing Graphics with the CSS Paint API
A practical introduction to the CSS Paint API with hands-on code examples including particles, noise buttons and curvy dividers.
Read it![Collective 667 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/06/C667_linkmenu.jpg?x86293)
Inline to Menu Link Animation
An experimental inline-to-menu-link animation based on a concept by Matthew Hall.
Check it out