Collective #589
![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_WOTW.jpg?x86293)
Inspirational Website of the Week: Connect home
A crystal clear design with smooth animations and a modern layout. Our pick this week.
Get inspired![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/12/C576_freelancer.jpg?x86293)
Start your own freelance business by becoming a Divi developer
Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.
Start learning now![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_grid.jpg?x86293)
Understanding CSS Grid: Grid Template Areas
Rachel Andrew takes a look at how to use grid-template-areas to place items.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_chakra.jpg?x86293)
OpenChakra
A great visual editor with drag and drop for the Chakra UI component library.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_atomic.jpg?x86293)
The wonderful sound of an atomic commit
James Long explains what atomic behavior is an why it is so important for quality software.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_thmlcss.jpg?x86293)
Same HTML, Different CSS
Ahmad Shadeed shows how to tackle the challenge of creating different styles for the same HTML.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_map.jpg?x86293)
How To Create Maps With React And Leaflet
Shajia Abidi explains how to use Leaflet to create an advanced map along with the help of React and JavaScript.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_chimero.jpg?x86293)
Redesign: Gridniking
Frank Chimero is redesigning his website in the open. This article is about how to set up a grid and begin with the layout.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_variable.jpg?x86293)
Variable fonts’ past, present and future, according to Dalton Maag
A great interview with type designer Dalton Maag on variable fonts.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_localplayground.jpg?x86293)
How To Setup Your Local React Playground
Dmitri Pavlutin shows how to setup your local React playground in three easy steps.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_appquery.jpg?x86293)
SKMZ
A GraphQL-based web app written with Go, React and MongoDB for devs to explore their skills via a GraphQL API.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_contqueries.jpg?x86293)
Toward Responsive Elements
Brian Kardell talks about the "Container Queries" problem, shining light on some misconceptions and exploring the state of things.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_droplol.jpg?x86293)
drop.lol
Mat Sz created this practical WebRTC file transfer tool.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_browser.jpg?x86293)
How I built my own browser
Kilian Valkhof tells the interesting story of how Polypane, the browser for responsive web development and design, was developed.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_performance-1.jpg?x86293)
Performant front-end architecture
Learn how to make client-side apps load faster and provide a better user experience.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_ui.jpg?x86293)
Collection of slick UI demos
A demo app by Marian Ban that uses techniques from Amelia Wattenberger's "Fullstack D3 and Data Visualization" book.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_Github.jpg?x86293)
Supercharge your command line experience: GitHub CLI is now in beta
Billy Griffin from GitHub explains how you can use the new GitHub CLI in your terminal.
Read it![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_gsap.jpg?x86293)
GSAP Stagger Cube
A beautiful cube with stagger animations made by Ryan Mulligan.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_vangogh.jpg?x86293)
Vangogh
A search engine for color palettes. It uses Machine learning to generate color palettes from millions of images that are contextually representative.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_reactparticles.jpg?x86293)
react-particle-image
A React component that lets you render images as interactive particles. By Austin Malerba.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_pokemon.jpg?x86293)
Pokemon Master Guessing Game
A Pokemon guessing game with some hidden easter eggs made by Wesley Zen.
Check it out![Collective item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/02/C589_cloth.jpg?x86293)
How to Create a Physics-based 3D Cloth with Cannon.js and Three.js
Learn how to create a physics-based 3D cloth with Cannon.js and Three.js and use simplex noise to create a wind effect.
Read it