Bi-Weekly Frontend News

Collective #41

Inspirational Website of the Week

Collective41_Tapmates

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

Collective41_photobooth

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

Collective41_chess

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.

Play!
Advertisement

Embracing Touch: Cross-platform Scrolling (Presentation)

Collective41_touch

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

Collective41_JAM

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

Check it out

Typespiration

Collective41_typespiration

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

Collective41_FloraJS

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"

Collective41_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

jQRangeSlider

Collective41_jQRangeSlider

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

Try it

xCharts

Collective41_xcharts

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

Collective41_foldercss3

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()

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

FastClick

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

jHERE

Collective41_jHERE

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

Collective41_cooky

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

Get it

Product Landing Page – HTML/CSS Template

Collective41_productlandingpage

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

Get it

Seamless Wood Patterns

Collective41_wood

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

Get it

GitHub's CSS Performance

Collective41_GithubCSS

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

Collective41_Crumble

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

Collective41_Blurred

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

Get them

Extensionizr: Boilerplate for Chrome Extensions

Collective41_Extensionizr

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