Bi-Weekly Frontend News

Collective #16

Responsive Images: What's the problem, and how do we fix it?

A great overview of the "responsive images problem" and the proposed solutions by Matt Wilcox.

Read it

Inspirational Website of the Week


Healing Stories is this week's inspirational pick because it tells a wonderful story in a beautifully interactive way.

Check it out

Building Books with CSS3


Nellie McKesson introduces the CSS3 Paged Media Module and shows how to create print-ready paged book layouts with it.

Read it

Icon Deposit CSS3 UI Kit (PSD+CSS)


Matt Gentile shares this beautiful UI Kit with us. It includes the PSDs and the ready-to-use markup with a pixel-perfect design.

Read it

Responsive Images With WordPress’ Featured Images


This is a very helpful and extensive article by Rachel McCollin on how to make Wordpress handle responsive (featured) images.

Read it

Portfolio Basics for Web Design Students: About Me Pages


On her website "A Student's Guide to Web Design", a wonderful resource for learning and preparing web design students for the design industry, Janna Hagan explains the concept and purpose of the About page and how important it is.

Read it

fc.tape: jQuery widget for sprite animations


With fc.tape you can animate a background image (sprite) consisting of picture frames like an old-time movie projector tape.

Check it out

Free Font: 47


Hendrick Rolandez created this vintage style font with a unique touch. He offers the bold & italic version for free.

Get it

Supercharge Twitter Bootstrap


If you use Twitter Bootstrap, this will come in very handy for you: NetDNA hosts all Bootstrap objects on their superfast CDN servers allowing you to save bandwidth and time.

Use it

Free Ecology Vector Icon Set


A charming free vector icon set by Jasmina Stanojevic for Noupe.

Get it

Annotator: JavaScript library for making websites annotatable


If you didn't know about it already: Annotator is an open-source JavaScript library and tool that can be added to any webpage to make it annotatable. Annotations can have comments, tags, users and more.

Check it out

Rekapi: A keyframe animation library for JavaScript


Rekapi is a helpful library for making beautiful <canvas> and DOM animations, like graph animations, and it allows you to export your DOM animations to CSS3 @keyframes.

Try it

Balloons.IO: Free & ready to go web chat room


Balloons.IO is a free and ready-to-go web chat room. It’s built with the help of node.JS, Express, Socket.IO and Redis and it uses easy-OAuth for authentication with Twitter.

Check it out

Koloria Free Iconset (PNG)


From the maker of the epic Quartz Icon Pack, Andy Gongea, comes another pixel-perfect free icon set of more than 160 gorgous icons.

Get it

Syte: Personal site with social integrations


Rodrigo Neri developed Syte: a really simple but powerful packaged personal site that has social integrations like Tumblr, Twitter, Github, Dribbble and Instagram.

Check it out

Compressing Multiple CSS Files with PHP

Another useful resource by Paulund: A PHP snippet which will combine mutliple CSS files and remove all comments and spaces, reducing the size of the file and thereby reducing loading times.

Read it

List/Grid View Switcher with jQuery


Learn how to build a list/grid view switcher with jQuery in this tutorial by Jake Rocheleau for Vandelay Design.

Read it

Dummy: Rapid Prototyping and QA


Dummy is a simple PHP-based toolkit that will make rapid prototyping a breeze: You can insert randomly generated strings of placeholder text in commonly needed lengths and formats (e.g., headline, teaser, paragraph) and request different sizes and aspect ratios of images on the fly, and more.

Check it out

Free File Type Icons (PNG)


The Gentle icon set consists of 20 file type icons of 128 x 128 pixels and in PNG format.

Get it

Free PSD Template: Gastronymous


Gastronymous is a free PSD template meant for websites related to food and/or the food industry.

Read it

Free Galaxy S3 Template (PSD+PNG)


Eryk Pastwa shares this beautiful vector shape based Galaxy S3 template with us on Dribbble.

Get it

Animated CSS3/SVG Loading Bars


Learn how to use CSS animations and SVG to create a loading bar in this tutorial by Johnny Simpso.

Read it

3D Buttons with CSS


Brandon Pierce shows you how to create some awesome minimal circular 3D buttons with CSS in this CSS-Tricks tutorial.

Read it

Vicons Free Glyph Icon Set (PSD)


Victor Erixo shares this really cute icon set with us. It contains some useful glyph icons.

Get it

Free Font: Acorn


If you are searching for a free, clean and simple sans-serif hand drawn typeface, you'll love Acorn by William Suckling.

Get it