Collective #507

Inspirational Website of the Week: Home Société
A delightful and refreshing scroll experience with some experimental elements. Our pick this week.
Get inspired
HTML Membership
Get lifetime free templates and plugins. Work with the best visual HTML drag and drop builder you've ever seen.
Try it now
Developer Survey Results 2019
The results of Stackoverflow's survey that was answered by nearly 90,000 developers on how they learn and level up, which tools they're using, and what they want.
Check it out
Well-aimed?
Test how well you know CSS selectors with this interactive quiz by Paulina Hetman.
Check it out
Digging Into The Display Property: The Two Values Of Display
Rachel Andrew takes a closer look at the CSS display
property, a workhorse of a property that doesn't get a lot of attention.

Citybound
An amazing city building game that uses microscopic models to vividly simulate the organism of a city arising from the interactions of millions of individuals.
Check it out
What design tools get wrong
An interesting article by Kilian Valkhof on the limitations of modern design tools.
Read it
Color accessibility: tools and resources to help you design inclusive products
Stéphanie Walter shares some useful resources, tips and tools she regularly uses to build and check the color accessibility of products.
Read it
Free Font: Public Sans
A strong, neutral, principles-driven, open-source typeface for text or display.
Get it
Floating heart
A mesmerizing demo by Yuan Chuan.
Check it out
How to create a custom radio switch in CSS
Claudia Romano shows how to create a custom accessible radio switch.
Read it
Rocking JS data structures!
Areknawo explores the new data structures in JavaScript that came with ES6 and shows how useful they can be.
Read it
Spider
A Chrome extension by Amie Chen that lets you turn websites into organized data without coding.
Check it out
Writing a Snake Game for the Terminal in Object-Oriented JavaScript (Node.js)
A tutorial by Tania Rascia where you'll learn how to code a Snake game in JavaScript.
Read it
UX Agenda
A website that collects design conferences, workshops and meetups.
Check it out
Long-form websites and typography
A very interesting article by Eric Lawler on the art of creating stable, long-term websites and content.
Read it
GitHub got rickrolled
Follow this tweet by GitHub and check out Muhammad Mustadi's amazing GIF hacked GitHub profile.
Check it out
Why you should use CSS env()
Harry Nicholls explains how you can use the upcoming CSS env() feature.
Read it
Google AMP lowered our page speed, and there's no choice but to use it
An unsettling review of Google's Accelerated Mobile Pages (AMP).
Read it
Perflink
Live JavaScript benchmarking where you can see results graphed out as you type.
Check it out
Nails
Teeny-tiny, satisfying scratchy hand. Simply epic. By Char Stiles.
Check it out
JavaScript vs. CSS - More control means more responsibility
Chris and Sadek talk about when is it best to use JavaScript over CSS, and should we all learn CSS as we learn JavaScript? Read the transcript here.
Watch it
Don’t trust the locals: investigating the prevalence of persistent client-side cross-site scripting in the wild
Some valuable insights into the vulnerabilities of local storage.
Read it
How to Create a Sticky Image Effect with Three.js
Daniel Velasquez shows how to code a recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.
Check it out