Bi-Weekly Frontend News

Collective #72

Inspirational Website of the Week

Collective72_1

A great web experience to honor the 100th edition of the Tour of France. "Your Tour" is full of surprises and great examples of Google product uses. Our pick this week.

Get inspired

Use your browser as Notepad

Collective72_2

Ever thought about using your browser as an editor? Fizer Khan shows us how to do it by playing with the Data URI scheme and the contenteditable attribute.

Check it out

Chrome DevTools Revolutions 2013

Collective72_20

An excellent recap of Paul Irish's Google I/O 2013 talk "Chrome DevTools Revolutions 2013" on HTML5Rocks.

Check it out
Advertisement

The Illusion of Speed

Collective72_21

A short video of Steve Souders' cool Ignite presentation, "The Illusion of Speed", at Velocity 2013. Check out this Forbes article for a great summary.

Watch it

Choosing A Responsive Image Solution

Collective72_6

Making your website responsive comes with a lot of challenges, one of them being how to handle images. Sherri Alexander explores some useful solutions for responsive images in this Smashing Magazine article.

Read it

tabulous.js

Collective72_Tabulous

If you think that tabs are our of fashion and boring, think again and take a look at this stylish jQuery tabs module by Aaron Lumsden.

Check it out

Simple State Manager

Collective72_8

Simple State Manager by Jonathan Fielding is a responsive state manager which allows you to target JavaScript at different browser widths.

Check it out

Why mobile web apps are slow

Collective72_18

Drew Crawford gets to the core of why mobile web apps are slow in this in-depth and detailed article. Good Sunday read!

Read it

S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations

Collective72_9

A gallery plugin by Sara Soueidan that makes use of HTML5's FullScreen API, CSS animations and transitions.

Check it out

JS Sequence Diagrams

Collective72_10

A really awesome JavaScript library by Andrew Brampton that turns text into vector UML sequence diagrams using Jison to parse the text and Raphaƫl to draw the image.

Check it out

Free Font: Primary Sans

Collective72_16

Primary Sans is a sans serif typeface designed by Georgia Roussos as an appealing font for primary school children.

Get it

Digging into my slides about Sass

Collective72_5

A great write-up by Hugo Giraudel about his recent talk at KiwiParty about the power of Sass.

Read it

Getting started with CSS sourcemaps and in-browser Sass editing

Collective72_22

If you have seen the previously mentioned "Chrome DevTools Revolutions 2013" by Paul Irish and would like to dig into the Sass editing feature, then you'll find this tutorial by Tim Lucas really useful.

Read it

UI Kit (PSD)

Collective72_11

A beautiful PSD of a UI Kit by PremiumPsds for your next design.

Get it

Just design

Collective72_19

Megan Gray shares her experience and thoughts around the misconceptions of what the job of a designer is. A refreshing read.

Read it

Surfing Icons (PSD)

Collective72_12

A set of 12 pixel-perfect, scalable, flat icons from WeGraphics.

Get it

Tab Bar Icons iOS 7 Vol2 (PSD, AI, EPS)

Collective72_13

The second volume of the great iOS7 styled tab bar icon set by Pixeden.

Get it

Free Font: Lasco

Collective72_14

Comic Sans, make way for this stylish successor! Lasco is an excellent, super-clean comic font by Lasko Dzurovski.

Get it

Useful GitHub patterns

Collective72_3

If you work a lot with GitHub you'll find these patterns really useful. Put together by Jake Benilov.

Read it

Giphy: GIF Search Engine

Collective72-Giphy

Finally a place where you can search for GIFs in style and "play" the GIFs only on hover.

Check it out

Free Font: Cittadino Symbols

Collective72_15

Dmitry Goloub created this complete and free set of public transport icons as a font.

Get it

So You Wanna Build a Crowdfunding Site?

Collective72_7

Learn how to build a crowd-funding website in less than 300 lines of code in this tutorial by Nick Liow and Robert Nyman from Mozilla.

Read it

atMedia.info

Collective72_17

@media.info by Knetik Media helps you to quickly and effectively identify required media queries for specific devices.

Check it out