Bi-Weekly Frontend News

Collective #41

Inspirational Website of the Week


Tapmates is our pick this week. It has a really original portfolio and they have Geordi La Forge on their team ;)

Get inspired



Photobooth.js is a jQuery plugin that allows the user to take pictures directly from a website. It also offers real-time adjustments for hue, saturation and brightness and the ability to crop the image.

Check it out

3D Hartwig Chess Set


Julian Garnier will blow your mind with this playable chess set. Nope, it's not WebGL, it's CSS 3D awesomeness plus the Photon and Chess.js library.


Embracing Touch: Cross-platform Scrolling (Presentation)


A visually stunning slideshow presentation by Mark Dalgleish on handling of scrolling overflow in mobile browsers.

See it

Case-Study: JAM with Chrome - How we made the UI rock


Learn about how JAM with Chrome was made from this great article by Fred Chasen on HTML5 Rocks.

Check it out



Rafal Tomal created this inspirational gallery for typography. Here you can find inspirational web font combinations with ready-to-use CSS codes, color schemes and web-safe font families.

Check it out

FloraJS: Simulate Natural Systems with JavaScript


FloraJS is a JavaScript framework by Vince Allen for simulating natural systems in a web browser. In Flora, the "world" is your web browser. DOM elements inhabit the world and behave according to rules meant to simulate a natural environment.

Check it out

Literally "Canvas"


Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget that currently supports a minimal set of drawing operations. You can draw, erase, set the color with the eyedropper, undo, redo, pan, and zoom. It depends on jQuery and Underscore.js.

Try it



A jQuery UI range selection slider by Guillaume Gautreau that supports dates and works on touch devices.

Try it



xCharts by tenXer is a D3-based JavaScript library for building beautiful and custom data-driven chart visualizations for the web.

Check it out

How to Make a Mac OS X-like Animated Folder with CSS3


Another great tutorial by Martin Angelov on how to make a OS X-like folder with CSS3. 3D transforms, gradients, box shadows and the jQuery UI Drag and Drop are used to achieve an awesome result.

Read it

Sprite Sheet Animation with steps()


A great example on how to use steps() in CSS animation for animating sprites by Simurai.

Check it out

G+ for the Hacker News

Communities have arrived in Google+ and there are many awesome ones that you'll definitely find interesting. The Hack News Community is one of them, make sure to check them out.

Join now


Ever felt that tapping in a mobile browser feels a bit laggy? That's because of a delay between the physical tap and the firing of the click event. FastClick is a simple library that will help you get rid of that delay. It is developed by FT Labs, part of the Financial Times.

Get it



Are you tired of complicated map APIs? Then you'll love jHERE by Massimiliano Marcon, a simple, yet powerful map API in form of a jQuery plugin that will help you easily add interactive maps to your website. It's very light-weight and you get highly customizable markers, event handling and info bubbles.

Get it

Cooky: jQuery Mobile Site Template


Cooky Mobile is a free jQuery Mobile website template by Anariel Design.

Get it

Product Landing Page – HTML/CSS Template


This free download by WeGraphics includes a PSD landing page design and a responsive HTML/CSS layout.

Get it

Seamless Wood Patterns


A great set of six qualitative seamless wood patterns by Pixeden.

Get it

GitHub's CSS Performance


The slides of Jon Rohan on GitHub's CSS performance, the challenges involved and the solutions applied for solving CSS performance related problems. The talk was given at CSS Dev Conference in Honolulu, HI 2012.

Check it out

Crumble: jQuery Feature Tours


With Crumble you can create a quirky, interactive tour on your website or app. It is developed by Tom Moor and it's using grumble.js.

Check it out

Blurred Backgrounds


A set of 14 blurred backgrounds, ready to be used in your next design project.

Get them

Extensionizr: Boilerplate for Chrome Extensions


Extensionizr by Alex Wolkov is a simple way to jump-start your Chrome extension development. Just select the type of extension you want, choose permissions and you're off. It's inspired by Initializr.

Try it