Bi-Weekly Frontend News

Collective #93

Inspirational Website of the Week


One Iota is a great example of smart transitions and interesting effects. Exploring the site is fun and the loading effects for images are very nice. Our pick this week.

Get inspired

Surveying the Big Screen


While we are all worried about how to lay out our content and design for tiny screens, we barely think about larger screens. Mike Pick dives into design patterns for larger screens in this A List Apart article.

Read it

"View mode" approach to responsive web design


Daniel Wiklund describes the "view mode" approach for RWD and shows how dividing different functions of a webapp into individual views can improve user experience.

Read it

Christmas experiments (2nd edition)


Unveil one fantastic creation each day this month in this second edition of the fabulous Christmas experiments.

Check it out

SVG Tabs (Using an SVG Shape as Template)


In this great tutorial, Chris Coyier shows how to use SVG tabs on your website.

Check it out

Exploring canvas drawing techniques


Learn about canvas drawing techniques in this interactive tutorial by Juriy Zaytsev.

Check it out

Learning jQuery with Street Fighter and Hadoukens


Learn jQuery by example from this practical guide by Carl Sednaoui.

Check it out

Using CSS Regions With CSS Shapes For A Better Reading Experience


Learn about the readability pitfalls of CSS Shapes and how to avoid creating unreadable layouts in this article by Sara Soueidan.

Check it out

Oceanica – 120 Nautically Inspired Icons (AI)


A great icon set by Nick G. Botner. Pay with a tweet and it's yours.

Get it

Coding Towards Accessibility


Charlie Perrins shares some thoughts and some practical tips for building accessible interfaces in this insightful 24 Ways article.

Read it

Imitating calc() Fallback or Fixed-Width Sidebar In Responsive Layout


Learn about an interesting use case of the CSS calc() function in this article by Osvaldas Valutis.

Check it out

Chrome DevTools for Mobile: Screencast and Emulation


Paul Irish will show you how you can use Chrome DevTool to remotely debug your mobile apps and use mobile emulation.

Check it out



Zoom in and zoom out on (almost) anything in your page with this useful script by Evan You.

Check it out



Life by Lim Chee Aun is a timeline of important events visualised in a simple way. You can fork the project and create your own timeline.

Check it out

Hacker Typer


Next time you're sitting in a Starbucks thinking about your next prank, why not try this fantastic little devilish site? Start typing and unveil the (wannabe) hacker in you ;)

Check it out

Colorpeek - Simply Share Colors


With Colorpeek by Tyler Sticka you can easily share CSS colors. Read about how it works in this article over at CSS-Tricks.

Check it out

Free Font: Exo 2.0


Those of you who use and love Exo by Natanael Gama, will be happy to know that there is a new and improved version available. Also, check out in the Google Web Font library.

Get it

21 free e-commerce Icons (PSD)


A sweet e-commerce icon set by Virgil Pana.

Get it

iPad Air Perspective Mockup (PSD)


Another fantastic and pixel perfect mockup by Pixeden, this time of the iPad Air in perspective.

Get it

15 Christmas Icons (AI)


The perfect little set for Christmas themed designs.

Get it