Collective #103
Inspirational Website of the Week: Weecom Digital Agency
![Collective103_websiteoftheweek](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_websiteoftheweek.png?x86293)
Weecom's website has a refreshing color scheme and some creative animations. Our pick this week.
Get inspiredGrid
![Collective103_grid](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_grid.png?x86293)
A beautiful and well-made guide to responsive web design and the usage of grids by Adam Kaplan.
Check it outPlaceholdem
![Collective103_placeholdem](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_placeholdem.png?x86293)
Jack Rugile created this little JavaScript plugin that animates placeholder carets on inputs and textareas.
Check it outDug.js: A JSONP to HTML Script
![Collective103_Dugjs](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_Dugjs.png?x86293)
A very useful, light-weight script for pulling JSONP from various APIs and display it using customized markup. Made by Rogie King.
Check it outOutdated UX patterns and alternatives
![Collective103_outdateduxpatterns](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_outdateduxpatterns.png?x86293)
A great summery and analysis of the "Outdated UX Patterns" section of North. By Brian Krall.
Read itDesign Lab
![Collective103_designlab](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_designlab.png?x86293)
Bilal Mechairia's animation explorations will give you some wonderful inspiration.
Check it outRandom User Generator Photoshop extension
![Collective103_randomusergenerator](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_randomusergenerator.png?x86293)
The Random User Generator can now be used in Photoshop with this useful extension.
Get itNew CSS Shapes Syntax
![Collective103_cssshapes](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_cssshapes.png?x86293)
Read all about the new syntax for CSS Shapes in this article on the Web Platform Team Blog.
Read itCreating A Client-Side Shopping Cart
![Collective103_shoppingcart](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_shoppingcart.png?x86293)
Gabriele Romanato explains how to use session storage on the example of a simple shopping cart in this in-depth tutorial.
Check it outFree Font: Streetwear
![Collective103_streetwear](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_streetwear1.png?x86293)
A bold and stylish retro inspired script typeface designed by Artimasa.
Get itUI Animation and UX: A Not-So-Secret Friendship
![Collective103_uianimation](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_uianimation.png?x86293)
A nice article about animations with tips on how to use them properly by Val Head on A List Apart.
Read itpageres
![Collective103_pageres](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_pageres.png?x86293)
Get screenshots of websites in different resolutions with this little app. It generates 100 screenshots from 10 different websites in just over a minute. Made by Sindre Sorhus.
Check it outMake a Flippin’ 3D Countdown with CSS & JavaScript
![Collective103_countdown](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_countdown.png?x86293)
Doug Avery shows how the countdown component from the Gear in Action interactive lookbook works.
Check it outGitHub goes to school
![Collective103_githubeducation](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_githubeducation.png?x86293)
GitHub launches education.github.com, a site dedicated to using GitHub at school with free micro accounts for students and teachers and great educational discounts.
Check it outFree Font: Mink Type
![Collective103_mink](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_mink.png?x86293)
A creative, hand-drawn display typeface by Filiz Sahin.
Get itHTML5, CSS3, and the Bookmarklet that Shook the Web
![Collective103_harlemshake](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_harlemshake.png?x86293)
Read how the fun Harlem Shake bookmarklet was done in this article on Mozilla Hacks.
Check it outCMS Administration – Profile Details (PSD)
![Collective103_profiledetailspsd](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_profiledetailspsd.png?x86293)
A lovely and clean Photoshop design from sm-artists.com.
Get itRecordit
![Collective103_recordit](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_recordit.png?x86293)
For Mac users who would like to create screencasts super quickly.
Check it outYear of the Horse
![Collective103_yearofthehorse](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/02/Collective103_yearofthehorse.png?x86293)
Send your happy horse year wishes by creating your own rider and horse on this classy website by Knock.
Check it out