Collective #495

Progressive React
A guide by Houssein Djirdeh on how to optimize React apps.
Read it
Pramp - Free frontend mock interview practice
Can you ace an interview? Make sure you can. Pramp, a peer-to-peer mock interviews platform allows you to practice on-demand for free.
Get unlimited interview credits
<details-menu> element
GitHub's menus and dialogs work without JavaScript because of Mu-An Chiou's great exploration of how to use <details> for JS-less popovers. Check out the version for dialogs and Mu-An Chiou's notes on <details> at Brooklyn JS.
Check it out
Pure CSS Drawing Essentials
CSS art master Diana Smith shares her top 5 CSS properties she uses in order to produce pure CSS art.
Check it out
Onelineplayer
A free web video player without branding and quality loss that loads 2x faster than others while supporting HQ previews.
Check it out
Der Bunt: Color Harmonies (Alpha 1)
A beautiful way to tinker with color spaces and systems.
Check it out
Tech Productivity
Tech Productivity is a short weekly newsletter for tech professionals with productivity-related tools, articles, and other resources. By Louis Lazaris.
Check it out
Make your Google Fonts render faster
A tool that generates a small wrapper around Google Fonts that adds font-display support and helps to render text quicker.
Check it out
Scandinavian Houses: Free Vector Images
A beautiful set of vector houses made by Tatiana Lapina.
Get it
Try GraphQL
An interactive GraphQL tutorial made by Ryan Chenkie.
Check it out
Packing Circles inside a Rectangle
Mike Bostock is exploring a variant on Wang et al.'s circle-packing algorithm to pack circles inside a rectangle.
Check it out
Improving WordPress Code With Modern PHP
Leonardo Losoviz gives us a tour of the PHP features newly-available to WordPress and suggests how these can be used to produce better software.
Read it
Explaining Code using ASCII Art
John Regehr collected some wonderful ASCII code embeds.
Check it out
personal-website
A repository that gives you the code you'll need to kickstart a personal website that showcases your work as a software developer.
Check it out
Silo
A daring and refreshing layout and design. With dark mode option.
Check it out
Exploring a back/forward cache for Chrome
Learn about the back/forward cache (bfcache) prototype in this article with videos by Addy Osmani.
Read it
CSS Variables + calc() + rgb() = Enforcing High Contrast Colors
Josh Bader shows how to make sure colors have enough contrast with Custom Properties.
Read it
Visual Studio Code Settings and Extensions for Faster JavaScript Development
Tilo Mitra shares some VS Code extensions and settings for better JS development.
Check it out
Free Font: Arco
Rafael Olivo Díaz created this playful font.
Get it
Blobby Hill
A fun blobby demo by Alex Zaworski.
Check it out
Interactive Typography Cheatsheet
Christian Heilmann created this helpful cheatsheet that explains some typography jargon. Read more about it in this article.
Check it out