Bi-Weekly Frontend News

Collective #83

Inspirational Website of the Week


The Wrist website by Matt Johnston is all about exploring typography, colors, clock mechanics, and everything else that goes into watch design. The animated watch illustrations are stunning and the flat design combined with harmonic colors makes this our pick this week.

Get inspired



An absolutely brilliant script that automatically switches to a darker or a lighter version of an element depending on the brightness of images behind it. Made by Kenneth Cachia.

Check it out



RulersGuides.js by Mark Rolich is a Javascript library which enables Photoshop-like rulers and guides interface on a web page.

Check it out



JSModeler by Viktor Kovacs is an interesting JavaScript framework for creating and visualizing 3D models.

Check it out
Advertisement 2013 - Intro.css


Jed Schmidt will make you laugh with CSS. Check out this great and funny introduction of the CSSconf 2013.

Watch it

Optimizing UI icons for faster recognition


Alla Kholmatova explains what is important for icon design and which factors play a role when creating recognizable icons for user interfaces.

Read it

Collective83_blendme is an incredibly useful Photoshop extensions that allows to access tons of free icons for direct usage in your design.

Check it out

Tools for image optimization


A great collection of image optimization tools by Addy Osmani.

Read it

Good Content Is Too Valuable To Die


Vitaly Friedman reminds us how important good web content is and how sad the removal of excellent articles like the ones of .net magazine is.

Read it

Designing In The Open


A great article about working publicly on a website design, the pros and cons, including examples and tips by Brad Frost.

Read it

Creating a Realistic Rain Effect with Canvas and JavaScript


Marek Brodziak shows how to use his fantastic project rainyday.js to create an incredibly realistic looking rain effect. Make sure to check out the demos here.

Check it out

One Page Scroll


A great plugin by Pete R. for creating an Apple-like one-page scrolling website like the iPhone 5s website.

Check it out

This is Now Clone


A clone project by Greg Thompson of the very popular This is Now live instagram feed sites. The goal was to create a simple to follow, light-weight version of what the Now project accomplished.

Check it out

Solved By Flexbox — Cleaner, hack-free CSS


A fantastic showcase by Philip Walton of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

Check it out



Drawingboard.js by Emmanuel Pelletier is a canvas-based drawing app that you can integrate easily on your website.

Check it out

Flat Rounded Square UI Kit (PSD)


A pixel-perfect UI kit designed by Freepik for WebAppers.

Get it

<dialog> element: Modals made easy


Chrome Canary has landed support for the <dialog> element behind a flag. Eiji Kitamura explains how this can be used to display popups in a web page. Also, check out this demo.

Check it out

How To Create Flat Style Breadcrumb Links with CSS


Learn how to create a clean looking, flat style breadcrumb navigation with CSS from this tutorial by Chris Spooner from Line25.

Check it out

Free Font: PEYO Regular


PEYO by Shannon Lim is a playful, uppercase, geometric sans serif typeface designed for display type uses such as headlines, posters and titles.

Get it

Free Font: Paihuen Mapuche


Benjamín Rivera created this exquisite looking font with a unique touch.

Get it

A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App


An excellent in-depth article by Kyle Peatt on how to improve the perceived performance of a mobile site.

Read it

Free iPhone Mockups (PSD)


Some really professional looking and nice iPad mockups by Regy Perlera.

Get it