Bi-Weekly Frontend News

Collective #68

Inspirational Website of the Week

Collective68_htcone

An awesome zoom effect will make a visit to the "Experience the new HTC One" page a truly interesting experience. Our pick this week.

Get inspired

Mason.js

Collective68_mason

An intruiging jQuery plugin by Drew Dahlman which lets you create gapless grid layouts.

Check it out

Introducing HTML Inspector

Collective68_htmlinspector

With HTML Inspector by Philip Walton you can easily test your markup in the browser and make sure its valid. You can also define your own rules and extend it.

Check it out

Cube Slam

Collective68_cubeslam

A great game that was build using WebRTC, the exciting open web technology that allows you to video chat with others in the browsers, withou the need for any plugin.

Check it out

The 100 Meter Scroll

Collective68_100meterscroll

Let the fastest scroller win! On this website you can test your scrolling skills and scroll 100 meter or 283.500 pixels on time.

Check it out
Advertisement

Secrets of the Browser Developer Tools

Collective68_devtoolsecrets

If you are a web developer then you are undoubtly using the web developer tools of your browser. This collections of useful "secrets" will give you more insight on developer tools and make your work easier. Curated by Andi Smith.

Check it out

DPI love

Collective68_dpilove

Easily find the DPI/PPI of any screen with this tool by Lea Verou.

Check it out

Building An App In 45 Minutes With Meteor

Collective68_meteorapp

In this in-depth tutorial, Sacha Greif shows us how to use Meteor to create a useful app in just 45 minutes.

Read it

Flat Icons Brownie Theme (PSD)

Collective68_flaticonsbrownie

A beautiful flat "brownie" icon theme by Sunbzy. The icons in the PSD are pixel perfect and vector-based.

Get it

iOS 7 GUI (PSD)

Collective68_ios7gui

With this great GUI kit for Photoshop by Teehan+Lax you can start desiging iOS 7 apps right away.

Get it

Google Trends

Collective68_googletrends

A very cool way to experience the Google search trends around the world. Select the grid type in the little menu in the top left corner.

Check it out

Understanding 3D Transforms

Collective68_3dtransforms

Tiffany Brown explains the CSS 3D transform properties and shows how to use them in this excellent and very detailed tutorial.

Read it

Atomic Design

Collective68_atomicdesign

What are interfaces comprised of and how can we construct design systems in a more methodical way? Brad Frost's idea of "atomic design" tries to answer those questions.

Read it

Image masking with HTML5 Canvas

Collective68_canvasmasking

A little script by Christian Heilmann for image masking with the canvas element.

Check it out

Magic - CSS3 Animations with special effects

Collective68_magic

A set of magical CSS animations for elements by Christian Pucci.

Check it out

Apple Mac Pro page deconstructed

Collective68_macpro

See how the showcase page of the new Mac Pro works and learn how they did it from this article by Petr Tichy.

Check it out

40+ Vector Ribbons (Ai, Eps)

Collective68_vectorribbons

This set by blugraphic is a fresh take on ribbons with a flat twist. You can download them for a tweet.

Get it

Stop Doing Internet Wrong

Collective68_internetwrong

Scott Hanselman shows some examples of how the Internet is done wrong and how it can be done right. A fruitful discussion follows.

Read it

There's a map for that

Collective68_githubmap

GitHub's latest addition to their visualization family: geographic data. Any .geojson file in a GitHub repository will now be automatically rendered as an interactive, browsable map, annotated with your geodata.

Check it out

Free Font: ONTWERP

Collective68_ontwerp

A unique display font by Emraan Mayow with interesting edges and multiple lines.

Get it

Making Infield Form Labels Suck Less II

Collective68_labels

Bringing all the desireable properties of the inline form label together, Jeremy Fields from viget shows this minimal and user friendly solution.

Read it