Collective #347

Inspirational Website of the Week: Heartbeat Agency
Bold typography, interesting layouts and organic shapes make this design our inspiration of the week.
Get inspired
New Master's in Communication Design at Parsons
Parsons School of Design in NYC has launched a 1-year Master's for design professionals focusing on digital product design.
Learn more
Learn How To Debug JavaScript with Chrome DevTools
Brandon Morelli shows how to ditch console.log debugging once and for all and learn how to use breakpoints to debug code within the Chrome Developer Tools.
Read it
The zen of Just Writing CSS
An article by Rich Harris where he lays out how the biggest problems with CSS can be solved without CSS-in-JS.
Read it
Meet XRespond Testing Tool: Let's Make Building Responsive Websites Simpler
Indrek Paas introduces XRespond, a virtual device lab for designing, developing and testing responsive websites.
Read it
Lozad
A performant JavaScript lazy loader with no dependencies for images, iframes and more. By Apoorv Saxena.
Check it out
Every JavaScript framework tutorial written more than 5 minutes ago
The sad story of every developer trying to learn a JavaScript framework. A witty article by Roger Collier's.
Read it
Innerself
A tiny view and state management solution using innerHTML.
Check it out
Screen Readers and CSS: Are We Going Out of Style (and into Content)?
Some excellent research on the behavior of different browser-screen reader combinations when it come to CSS rendering.
Read it
LÖVR
A cross-platform, open source framework for creating VR with Lua.
Check it out
Lazy async SVG rasterisation
Jake Archibald shows a great way to rasterize SVGs lazily with the help of createImageBitmap.
Read it
Free Font: Pool Riders
A fun typeface coming in three weights designed by Guerillacraft.
Get it
Cities Slider (React)
A beautiful slideshow demo made by Nikolay Talanov.
Check it out
I wanted real time GitHub push notifications. So I built a Chrome extension.
Stacy Goh implemented an interesting extension for receiving real time GitHub push notifications.
Read it
Building a Small PWA with Preact and Firebase
Dan Denney shares his process of learning how to build a Progressive Web App.
Read it
Wired Dots
A resource for free Bootstrap 4 themes and components.
Check it out
Interlocked blocks
One of Louis Hoebregts' impossible shape demos.
Check it out
Angular vs. React vs. Vue: A 2017 comparison
Jens Neuhaus' objective and informative comparison of the most popular JavaScript frameworks.
Read it
Oxipng
Oxipng is a multi-threaded lossless PNG compression optimizer written in Rust. It can be used via a command-line interface or as a library in other Rust programs. Made by Josh Holmer.
Check it out
For the love of God, please tell me what your company does
Kasper Kubica's criticism on the current state of non-explanatory landing page jargon.
Read it
Responsive LEGO
Responsive animated LEGO pieces by Chris Gannon.
Check it out
The State of the Web
In case you missed it: A guide to impactful performance improvements by Karolina Szczur.
Read it
react-awesome-scroll
An easy to customize styled scrollbar with native behavior.
Check it out