Bi-Weekly Frontend News

Collective #87

Inspirational Website of the Week


Banana Café surprises with a colorful them and some pretty cool 3D hover effects. Our pick this week.

Get inspired

Smart Transitions In User Experience Design


A very insightful article by Adrian Zumbrunnen on some great examples of smart transitions and subtle animation patterns that improve user experience on websites.

Read it

Calculating element vertex data from CSS transforms


Learn how to generate advanced vertex data for CSS transformed elements and see how to use this data to shade elements using a light source in this fantastic article by Keith Clark.

Check it out

Cargo Cult CSS


A very insightful article by Ben Darlow that dissects the problems of pop methodologies for writing and managing CSS such as OOCSS and BEM.

Read it

Creating game-style parallax scrolling: Zombie Edition


Elli Bishop shows you how to do game-style parallax scrolling with a zombielicious demo. Also, check out the interactive Walking Dead infographic to see the concept in action.

Check it out

Free Font: Chula


Gabriela Roh shares this delicate and fashionable font for free.

Get it



From the creator of Raphaël, Dmitry Baranovskiy, comes another fantastic library that makes working with SVG super easy.

Check it out



Offline.js is a useful library that automatically alerts users when they've lost Internet connectivity. It captures AJAX requests which were made while the connection was down, and remakes them when it's back up.

Check it out



With doCapture you can create high-res website screen captures in the exact size you need.

Check it out

Content Snippets


Content Snippets collects specific copy examples from websites and applications, to serve as inspiration for writing professionals.

Check it out

Stereoscopic CSS


Donovan Hutchinson takes 3D-style effects one step further and dives into stereoscopy with a great demo where you need to cross your eyes to see the stunning effect.

Check it out

180 Beautiful Flat Icons (AI, EPS,PDF, PNG)


A great set of 90 flat round icons in two variations by Elegant Themes.

Get it



Newton is an easy-to-use, feature-rich physics engine for JavaScript created by Hunter Loftis.

Check it out

Using CSS Shapes to Enhance Visual Storytelling


Peek into the future and read about how CSS Shapes can be applied for creating fantastic "out-of-the-box" layouts. Also, check out the Alice in Wonderland demo code on GitHub. Note that not all browsers support CSS Shapes yet.

Check it out

iPad Air (PSD)


Always offering the most recent device mockups, Pixeden has released yet another excellent vector mockup, this time of the iPad Air.

Get it

Opening type


A fantastic pen by Diego Pardo that shows a creative hover effect on cut out letters.

Check it out



Slidr.js is a lightweight JavaScript library by Brian Chan for creating slides with subtle transitions.

Check it out

100 PSD mock-ups (PSD)


An incredible set of useful product mockups by for Webdesigner Depot.

Get it

Avoiding Unnecessary Paints: Animated GIF Edition


Paul Lewis explains why animated GIFs can cause unnecessary paints and how to debug and fix that using Chrome DevTools' Show paint rectangles tool.

Read it

iWatch Mock-Up


An absolutely stunning product concept of a "smartwatch" by Thomas Bogner.

Check it out

Remote Jobs


A great new site for finding remote job openings for web professionals.

Check it out

Flat Design User Interface Elements (PSD)


Marie Dehayes shares this beautiful flat design UI kit for free.

Get it



On Gratisography you can find free and qualitative high-resolution pictures to use in your personal and commercial projects.

Check it out

Free Font: KOMODA


Joanna Angulska designed this exquisite and beautiful condensed uppercase font.

Get it