Collective #667
Publikováno: 24.6.2021
Demystifying styled-components * Asynchronous Design Critique * Benchmarking JavaScript Memory Usage
The post Collective #667 appeared first on Codrops.

Inspirational Website of the Week: Sandland Sleep
A lovely color theme with lots of type playfulness. Our pick this week.

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.

Demystifying styled-components
Josh W Comeau explains how styled components work under the hood by building a mini-clone.

Towards a better responsiveness metric
Learn about our thoughts on measuring responsiveness and give the web.dev team some feedback.

Setting up a Decentralised Website (ENS + IPFS = dWeb)
Ire Aderinokun’s introduction to ENS names and the concept of decentralized websites.

Perfect Tooltips With CSS Clipping and Masking
Louis Hoebregts shows how to do use CSS Clipping and Masking to create awesome tooltips.

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.

A Complete Guide To Accessibility Tooling
Nic Chan looks into different kinds of tools to help you streamline your accessibility testing process.

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.

Benchmarking JavaScript Memory Usage
Tim Kadlec on the mystery and challenges of memory usage on the web.

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.

Asynchronous Design Critique: Giving Feedback
Erin Casali on the advantages of asynchronous feedback to collaboratively improving designs.

Beat Burger
A really cool playable burger demo by Steve Gardner.

Concentric Circle Spinner
A cool spinner made only with divs, some border tricks, and one CSS animation.

How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji
Preethi shows how to create CSS charts with interesting shapes.

GitHub Issues
With the new GitHub Issues you can break issues into tasks, track relationships, add custom fields, and have conversations.

Bear plus snowflake equals polar bear
A super interesting article on byte size of emojis by Andy Salerno.

Optical size, the hidden superpower of variable fonts
Learn about the hidden superpower of variable fonts in this article by Roel Nieskens.

A 3D Hover Effect Using CSS Transforms
A tutorial on creating a 3D hover interaction with JavaScript and CSS.

OMG, SVG Favicons FTW!
Austin Gil explores the fun new world of SVG favicons.

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.

Inline to Menu Link Animation
An experimental inline-to-menu-link animation based on a concept by Matthew Hall.
The post Collective #667 appeared first on Codrops.