Bi-Weekly Frontend News

Collective #105

Inspirational Website of the Week: Hologram Studio


The website of Hologram Studio has a futuristic touch with some interesting transitions and effects. Our pick this week.

Get inspired



Sticker.js is an awesome JavaScript library that creates a peeling sticker look and interaction on elements.

Check it out

Code Guide


Code Guide is a collection of standards for developing flexible, durable, and sustainable HTML and CSS. Curated by GitHub designer Mark Otto.

Check it out

Off The Beaten Canvas: Exploring The Potential Of The Off-Canvas Pattern


Kyle Peatt is exploring off-canvas layouts and some interesting use cases in this Smashing Magazine article.

Read it



Matter.js is a 2D HTML5 JavaScript physics engine by Liam Brummitt.

Check it out

CSS Shake


Sometimes you just need to shake things up a little bit. With CSSShake by Lionel you can easily add some jiggle to elements.

Check it out

Responsive Strategy


A great overview of the current strategies that are used to make sites responsive, or better, make them viewable on smaller devices. An article by Brad Frost.

Read it

I want to use


Powered by data from, this site tells you how many users will be able to use a specific feature you intend to use in your project.

Check it out



A text editor by GitHub. It's modern, approachable, and hackable to the core, and you can request a beta invite.

Check it out

background vs background-color CSS Performance Investigation


Learn how to use the timeline in Chrome Dev Tools by watching Paul Irish analyse the performance of background and background-color.

Watch it

Honest logos


A very sincere and quite funny logo series that reveals the actual content of a company. A project by Victor Hertz.

Check it out



With Peek you can get a 5-minute video of a real person using your site.

Check it out

Gmail Redesign Concept


Ruslan Aliev put a lot of creativity and thought into this fantastic Gmail redesign.

Check it out

Float Labels with CSS


A very nice tutorial by Chris Coyier on how to create some floating labels for form inputs.

Check it out

Albumarium – Find & give inspiration


Find and share free images from different categories. A project by Vilem Ries.

Check it out

Using blend modes in HTML Canvas


Learn about canvas blend modes and check out some interesting usage examples in designing games or photo editing.

Check it out

The Troublesome Misconception of Parallax in Web Design


Rob Palmer talks about the misconception of the parallax effect and tries to rectify the erroneous views.

Read it

How Nesting 3D Transformed Elements Works


Ana Tudor will guide you step by step through the process of nesting animated 3D transform elements.

Check it out

Only 90s Web Developers Remember This


Remember using the 1x1.gif for positioning elements? Or abusing on the non-breaking space? Then you might be one of those veteran web developers who will get nostalgic when reading this satiric and delightful article by Zach Holman.

Read it

Ocean: Realistic water shader for Three.js


A Three.js shader by Jérémy Bouny to provide a realistic plane water effect. It can be used to render water, like a complete ocean or small surfaces of water in real time.

Check it out

Circle, square, triangle, dolphin


Literally what it says in the title... be careful, you might want to watch this for at least an hour :) A really nice pen by Max Gruson.

Check it out

40 Free Stroke Icons


40 free sample line icons from the Sympletts icon pack by Bogdan Rosu.

Check it out

Free Font: Pesaro Light


Pesaro is an elegant new type family by Hoftype and you can get the light style for free.

Check it out