Collective #587
Inspirational Website of the Week: Illuminating Radioactivity
A fantastic project with a great scrollable design made by the folks of tubik.
Get inspired
.design: A better Domain for Designers
Add a professional touch to your website with a .design domain name. Get 1 year free today!
Get a Free .design Domain Name Today!
Building an accessible autocomplete control
Learn how to design and build an accessible autocomplete control from scratch in this article by Adam Silver.
Read it
How To Create A Headless WordPress Site On The JAMstack
Sarah Drasner's and Geoff Graham's hands-on tutorial where you'll learn how to create a real headless WordPress site on the JAMstack.
Read it
Octomments
A plugin by Krasimir Tsonev that lets you use GitHub issues as a comment system.
Check it out
Binary Search
Practice programming challenges with others on Binary Search. Create a room, invite your friends, and race to finish the problem.
Check it out
Flow Fields
Generative artist Tyler Hobbs explains the basics of flow fields and how to use different variations with tips on how to improve the visual result.
Read it
GLTFJSX tool
A major release of the tool that turns GLTF's to JSX components. See it in action in this tweet. By Paul Henschel.
Check it out
Flowing Image - How To
Louis Hoebregts shows the concept behind transforming a painting into a field of particles.
Check it out
The design systems we swim in.
Some interesting thoughts on the way the industry talks about design systems.
Read it
Improved accessible routing in Vue.js (updated)
An article that aims to show how to implement an improved approach to accessibility in Vue.js, using vue-router.
Read it
Design Systems, Agile, and Industrialization
Picking up on Jeremy Keith's concerns about design systems, Brad Frost shares his thoughts on the topic.
Read it
Kinetic slider
A WebGL powered slideshow using PixiJS and GSAP. By Hadrien Mongouachon.
Check it out
Light and dark themed SVG favicon using the CSS prefers-color-scheme media feature
Catalin Red shows how to use an SVG as a favicon for your website, considering the light and dark theme detection in the browser using the CSS prefers-color-scheme media feature, with PNG and ICO fallbacks.
Read it
Could browsers fix more accessibility problems automatically?
Hidde de Vries' write-up of his talk at the Web We Want session at View Source in Amsterdam.
Read it
DarkModeJS
DarkModeJS detects the user's time for easy dark theme switching.
Check it out
Free Font: LL BAGUIO
A lovely font with an interesting inspiration made by Lloyd Zapanta.
Check it out
Pixel 4 and Pixelbook Go mockups
A free set of Google devices mockups in Sketch, Figma, and Photoshop file formats.
Check it out
Newton's Light Bulbs
A great demo by Jhey Tompkins where he uses the MorphSVG plugin by GreenSock.
Check it out
Image Dragging Effects
A set of playful dragging effects for images using various techniques.
Check it out
Crafting a Cutout Collage Layout with CSS Grid and Clip-path
Learn how to code up an interesting design with a cutout image look using CSS Grid and clip-path.
Read it