Collective #396

Inspirational Website of the Week: Mutt Agency
A playful design with lots of creative elements. Our pick this week.
Get inspired
Thinking of building your portfolio?
Grab a FREE .design domain to showcase your work. .design reflects what you do as a designer and helps give you better branding.
Get your FREE .design domain
Loading Third-Party JavaScript
Learn how to optimize the loading of third-party scripts to reduce their impact on performance. By Addy Osmani and Athur Evans.
Read it
Bringing Back Skeuomorphic Design
Read about Michael Flarup's skeuomorphic calendar design and how this could be the starting point of a revival movement.
Read it
The Chameleon from Null Island
An awesome demo with a very reactive chameleon.
Check it out
Good to great UI animation tips
Pablo Stanley gives some practical suggestions to improve your UI micro-interactions.
Read it
Git-sizer
With git-sizer you can compute various size metrics for a Git repository and flag those that might cause problems.
Check it out
Coördinator
Aliza Aufrichtig made this project for turning an SVG into coordinates that can then be used for animations.
Check it out
CSS Techniques and Effects for Knockout Text
Learn how to accomplish knockout text with modern CSS properties.
Read it
Loader Concept
A fantastic loader concept by Robin Delaporte.
Check it out
Increase Font Size with CSS Variables
Dronca Raul shows how to use CSS variables and a range input slider for adjusting the font size of a text.
Check it out
Say Hello to Houdini and the CSS Paint API
Read all about the exciting Houdini project and how it gives devs more power over CSS. By Will Boyd.
Read it
Instagram.exe
Gabrielle Wee created this awesome Windows 95 version of Instagram.
Check it out
Meet Overflow
Learn about the new cross-platform tool that aims to integrate seamlessly with the most popular design tools to allow designers to create beautiful user flows.
Check it out
Midi Controller CSS
If you're tired of using a keyboard maybe it's time to switch to a midi controller to physically edit your CSS ;) By Dimitri Nicolas.
Check it out
Animated Status Indicator
A great status indicator with an animated worm.
Check it out
We Write CSS Like We Did in the 90s, and Yes, It's Silly
Jens Oliver Meiert believes that we still write CSS the natural way, with no advances in sorting declarations or selectors and no improvements in writing DRY CSS.
Read it
Developing a Creative Upload Interaction with JavaScript and Canvas
Luis Manuel shows how to code a creative file upload effect.
Read it
Free Font: Mash-Up
A very creative display font by Ilyas Yunusov.
Get it
How We Adopted CSS Grid at Scale
Read how Julian Gaviria went all-in with CSS Grid for the redesign of Thomasnet.com.
Read it
It's Dangerous to Go Stallone. Take Glyphhanger
Read how to use glyphhanger for subsetting webfonts in this article by Zach Leatherman.
Check it out
CSS Only Snake on Planes
Sean Codes created this CSS-only clone of "Snake on Planes" by Chris Gannon.
Check it out
Creative Audio Visualizers
An exploration of modern, line-style sound visualization powered by p5.js and its p5.sound library.
Check it out