Collective #168

Inspirational Website of the Week: Work & Co
A stunning design with excellent typography and an innovative navigation made this site our pick this week.
Get inspired
Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box
Karen Menezes shows how to get your hands dirty with "clip-path" and enrich your designs with different shapes.
Read it
Better Error Pages
A very useful online tool for building 404, 500-level, and maintenance pages super quickly.
Check it out
Mega Dropdown
A super-useful responsive mega dropdown menu component by Claudia Romano from CodyHouse.
Check it out
Crafting Easing Curves for User Interfaces
Learn about how easing curves work and how the right function can lift your animations to the next level. An article by Ryan Brownhill.
Read it
Makerbook
A collection of the most valuable free resources for creatives. Made by Craig Barber.
Check it out
GreenSock Cheat Sheet
A handy collection of useful GreenSock code snippets put together by Petr Tichy.
Check it out
Guidelines for Animation Timing
A very insightful article by Dominic Nguyen on how to time animations and the science behind it.
Read it
Sass Pixel Art
A genius tutorial by Una Kravets on how to use Sass to create pixelized art.
Check it out
Animate Plus
Animate Plus is a JavaScript library for animating CSS properties and SVG attributes. Made by Benjamin De Cock.
Check it out
Tips For Avoiding Common SVG Pitfalls
Sara Soueidan's slides of Smashing Conf LA 2015 about how to avoid common SVG pitfalls.
Check it out
Voice Memos
An app by Paul Lewis that lets users record voice memos.
Check it out
ES6 In Depth
Learn all about ES6 in this weekly series on Mozilla Hacks.
Check it out
Choosing Performance
A hot article by Tim Kadlec on the phenomenon of slow websites followed by a great discussion.
Read it
immagiPic
ImmagiPic is a online scene generator that lets you create your own high-resolution workspace illustration in no time.
Check it out
STRML: Projects and Work
Samuel Reed's website is a fun live coding experience not to be missed.
Check it out
3 Vector Wood Textures (EPS, PNG)
Three vector wood textures made by Pavel Korzhenko for Pixel Buddha.
Get it
Nesting Components
Simurai explains how tricky styling nesting components can be and shows different ways to tackle the problem.
Read it
Warrior.js
A game designed to teach JavaScript and artificial intelligence in a fun, interactive way. Made by Matías Olivera.
Check it out
Iconate
Transform your icons using trendy animations with this tool by Jignesh Kakadiya.
Check it out
GLSL Lighting Walkthrough
An article that provides an overview of the various steps involved in lighting a mesh with a custom GLSL shader.
Check it out