Bi-Weekly Frontend News

Collective #105

Inspirational Website of the Week: Hologram Studio

Collective105_hologram

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

Get inspired

Sticker.js

Collective105_sticker

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

Check it out

Code Guide

Collective105_codeguide

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

Collective105_offcanvas

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

Read it
Advertisement

Matter.js

Collective105_matterjs

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

Check it out

CSS Shake

Collective105_cssshake

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

Collective105_responsivestrategy

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

Collective105_iwanttouse

Powered by data from caniuse.com, 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

Atom

Collective105_atom

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

Collective105_background

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

Collective105_honestlogos

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

Check it out

Peek

Collective105_peek

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

Check it out

Gmail Redesign Concept

Collective105_gmailredesign

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

Check it out

Float Labels with CSS

Collective105_floatlabels

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

Check it out

Albumarium – Find & give inspiration

Collective105_albumarium

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

Check it out

Using blend modes in HTML Canvas

Collective105_blendmodescanvas

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

Collective105_parallax

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

Collective105_nestedtransforms

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

Collective105_90s

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

Collective105_ocean

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

Collective105_circletriangledolphin

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

Collective105_icons

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

Check it out

Free Font: Pesaro Light

Collective105_Pesaro

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

Check it out