Collective #514
Inspirational Website of the Week: Lusion
A futuristic website design that plays with amazing illumination effects. Our pick this week.
Get inspired
Northwestern's Online MS in Information Design and Strategy
Build the in-demand skills, such as UX, UI, and HCI, to drive user interactions. Choose a track in content strategy, analytics, or learning design.
Apply now
React on web.dev
A new section on web.dev to help developers build fast and performant React applications.
Check it out
Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading
Learn how you can progressively replace your JavaScript-driven lazy loading with its native alternative, thanks to hybrid lazy loading.
Read it
SVG Will Save Us
Sarah Drasner shows some great things we can do with SVGs in this PerfMatters Conference 2019 talk.
Watch it
Building a JavaScript guitar pedalboard
Trys Mudford shares how he created a guitar pedalboard in JavaScript.
Read it
Making Things Better: Redefining the Technical Possibilities of CSS
Rachel Andrew's presentation at An Event Apart Boston in May 2019.
Check it out
Hands-on with Portals: seamless navigations on the Web
Learn how to build good navigation UX with the Portals API in this article by Yusuke Utsunomiya.
Read it
CSS-Only Chat
An insane project that shows how it's possible to achieve an asynchronous chat that sends and receives messages in the browser with no reloads and no JavaScript.
Check it out
Why, How, and When to Use Semantic HTML and ARIA
Adam Silver looks over the benefits of using HTML and ARIA, why starting with semantic HTML is the way to go, and why ARIA ought to come in as a last resort.
Read it
Windows Terminal
The repo for the new Windows Terminal and the original Windows console host.
Check it out
'font-display' for Google Fonts
Addy Osmani announces that Google Fonts will soon support setting 'font-display' via a new query parameter.
Check it out
Formation
Formation is a shell script to set up a macOS laptop for design and development.
Check it out
cssfx
A collection of click-to-copy CSS effects.
Check it out
enFont Terrible
A fun project by Javier Arce that lets you generate weird looking, "nervous" OpenType fonts.
Check it out
Building a D3.js Calendar Heatmap
A tutorial where you'll learn how to create an interactive calendar heatmap using D3.js for visualizing StackOverflow's usage statistics.
Read it
Prototyping with Web Components: Build an RSS Reader
Learn how to prototype an application using web components, ES6 modules and more in this tutorial by Doron Tsur.
Read it
Motion detection with camera feed
A Three.js motion detection experiment by Machado Jordan.
Check it out
Skeleton Screens Concept
A page placeholder implementation for SPAs.
Check it out
Story of one animation: WebGL and not WebGL
Yuri Artiukh shares his journey of picking a method for showing a complex animation.
Read it
Sun & Earth
A very nice planetary demo by Jesper Lauridsen.
Check it out
Brand cut zoom
A nice demo by Mikael Ainalem where a logo is zoomed to reveal an image.
Check it out
Inspirational Websites Roundup #4
Another collection of original and inspiring website designs to ignite your creativity and give you an overview of current trends.
Check it out