Collective #446

Inspirational Website of the Week: Robin Mastromarino
Some interesting distortion effects and a dynamic design. Our pick this week.
Get inspired
See 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 free
aijs.rocks
A curated collection of inspirational AI-powered JavaScript apps.
Check it out
Shimport
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 it
Piet Mondrian
A tutorial on how to code a nice recreation of a Mondrian-like art piece. By Tim Holman.
Read it
Solving Container Queries Today
A great talk by Greg Whitworth at CSS Day 2018.
Watch it
The Fall of NeoDubai
An experimental WebGL cyberpunk 3D music clip made by Martin Laxenaire.
Check it out
Reduce 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 out
Free Font: Sanös
A beautiful handwritten brush font by WildOnes Design.
Get it
Progressive Web-First Apps
Dion Almaer writes about why it makes sense to start with a PWA experience for your new idea.
Read it
The MIT license (with personal exceptions)
Jamie Kyle's modified MIT license that excludes certain companies.
Check it out
Why Love Generative Art?
A wonderful article on the beauty and importance of generative art. By Jason Bailey.
Read it
RSSHub
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 out
Tiptap
A renderless rich-text editor for Vue.js based on Prosemirror.
Check it out
Web Graphic Experiments
In case you didn't see them yet: All web graphic experiments by Keita Yamada in one place.
Check it out
Magic Instruments
These instruments you can play with other people on the web. By Sara Viera.
Check it out
Progressive Disclosure with CSS
Ricardo Prieto shows how to make a CSS-powered form with progressive disclosure.
Read it
Best Practices For Mobile Form Design
Nick Babich offers useful advice for better mobile form design.
Read it
Create 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 it
How to use Git efficiently
Some helpful advice on making the best use of Git. By Aditya Sridhar.
Read it