Collective #446
Inspirational Website of the Week: Robin Mastromarino
Some interesting distortion effects and a dynamic design. Our pick this week.
Get inspiredSee how people are really using your website
Hotjar is everything your team needs to get 'in-the-moment' visual feedback and better understand how people are really using your site.
Try it freeaijs.rocks
A curated collection of inspirational AI-powered JavaScript apps.
Check it outShimport
An experimental shim for import
and export
that allows you to use JavaScript modules in all browsers.
Super-Powered Grid Components with CSS Custom Properties
Michelle Barker shows how to use CSS Grid with variables at a component level.
Read itPiet Mondrian
A tutorial on how to code a nice recreation of a Mondrian-like art piece. By Tim Holman.
Read itSolving Container Queries Today
A great talk by Greg Whitworth at CSS Day 2018.
Watch itThe Fall of NeoDubai
An experimental WebGL cyberpunk 3D music clip made by Martin Laxenaire.
Check it outReduce JavaScript Payloads with Code Splitting
An article by Jeremy Wagner and Addy Osmani where you can learn all about how code splitting can help with your site's performance.
Check it outFree Font: Sanös
A beautiful handwritten brush font by WildOnes Design.
Get itProgressive Web-First Apps
Dion Almaer writes about why it makes sense to start with a PWA experience for your new idea.
Read itThe MIT license (with personal exceptions)
Jamie Kyle's modified MIT license that excludes certain companies.
Check it outWhy Love Generative Art?
A wonderful article on the beauty and importance of generative art. By Jason Bailey.
Read itRSSHub
In case you didn't know about it yet: RSSHub is a lightweight and extensible RSS feed aggregator that can generate feeds from pretty much anything.
Check it outTiptap
A renderless rich-text editor for Vue.js based on Prosemirror.
Check it outWeb Graphic Experiments
In case you didn't see them yet: All web graphic experiments by Keita Yamada in one place.
Check it outMagic Instruments
These instruments you can play with other people on the web. By Sara Viera.
Check it outProgressive Disclosure with CSS
Ricardo Prieto shows how to make a CSS-powered form with progressive disclosure.
Read itBest Practices For Mobile Form Design
Nick Babich offers useful advice for better mobile form design.
Read itCreate Your Design System, Part 4: Spacing
Sebastiano Guerriero shows how to set a spacing system in CSS, and how to take advantage of relative units to handle responsiveness.
Read itHow to use Git efficiently
Some helpful advice on making the best use of Git. By Aditya Sridhar.
Read it