Bi-Weekly Frontend News

Collective #6

Envision.js

Collective6_1

Envision.js is a library for creating fast, dynamic and interactive HTML5 visualizations. It is a rewrite of HumbleFinance, a library for HTML5 canvas finance visualization.

Get it

Awesome Free Fonts

Collective6_FreeFont1

Mun typeface by Vincenzo Vuono

Awesome Free Fonts

Collective6_FreeFont2

Flexo Caps DEMO by Ben Blom

Awesome Free Fonts

Collective6_FreeFont3

Bounce by Ryan Maelhorn

Awesome Free Fonts

Collective6_FreeFont4

Amboss by Andreas Siess

Awesome Free Fonts

Collective6_FreeFont5

Henry by Marta Podkowinska

Awesome Free Fonts

Collective6_FreeFont6

Foro Extra Light by Hoftype

Awesome Free Fonts

Collective6_FreeFont7

Sofia Pro by Mostardesign

Responsive & Retina Content Images using simple CSS & a spacer PNG*

Collective6_13

Matt Stow shows us how to to use a trick for loading the right-sized images using a spacer PNG.

Get it

Happy Easter!

Collective6_14

Maryna Aleksandrova gives us some adorable Easter greetings with this CSS3 animation of "dancing" eggs! Don't forget to turn on your sound.

Check it out

On Responsive Images

Chris Coyier talks about some possible approaches for serving inline images on websites – the responsive way. Interesting pros and cons and of course, followed by a fruitful discussion.

Read it

Micro Icon Set

Collective6_12

Matt Gentile gives us this set of 110 vecor icons.

Get it
Advertisement

Responsive Layouts, Responsively Wireframed

Collective6_2

An interactive experiment with responsive design techniques using simple layout wireframes.

Check it out

Pure CSS Tool Tips Revisited

Collective6_3

Louis Lazaris perfectionizes CSS tooltips and shows us how we can create a better, bulletproof solution.

Read it

Unquoted Font Family Names in CSS

Collective6_4

Understand some very interesting facts about font names in CSS, what's valid and what not and when you can drop the quotes.

Read it

WReader Code Lab

Collective6_5

If you want to learn how to create modern web applications, this might just be the course for you. With a set of exercises you can dive into all the latest development techniques and design fundamentals.

Do it

Rhinoslider

Collective6_6

This jQuery slider/slideshow comes with a handful of interesting effects and a really useful generator that allows for a custom build of the script.

Get it

WebPutty

Collective6_7

WebPutty is a simple CSS editing and hosting service that gives you a syntax-highlighting CSS editor you can use from anywhere, the power of SCSS and Compass, a side-by-side preview pane, and instant publishing with minification, compression, and automatic cache control.You can't create a new account anymore but you can get your own copy of WebPutty since it's been made open source.

Get it

Style Tiles

Collective6_8

Samantha Warren shares a remarkable new design process approach with us: Style Tiles. She suggests that the current way of creating too detailed designs for clients can be replaced by the process common in architecture or interior design, a process that will convey just the right amount of the idea to the client. Make sure to also read this in order to have a better picture of what Style Tiles can look like.

Get it

Jigsoar Iconset

Collective6_11

Jigsoar is a free icon set with 60 vector shapes for your next web development project. It is licensed under the Creative Commons Attribution 3.0 License.

Get it

Mobile Navigation Design & Tutorial

Collective6_9

Learn how to tackle the challenges of a responsive navigation and create a mobile navigation with jQuery in this tutorial.

Read it

pep.jquery.js

Collective6_10

A lightweight plugin for kinetic-drag on mobile devices and the desktop (click & drag). It uses jQuery's animate functions along with CSS3 animations and it has built-in support for custom start, stop, and drag events; a debugger and the ability to customize your own kinetic easing functions.

Get it

HTML5 Drag and Drop... with real upload

Remy Sharp shows us how to "drag-and-drop and upload" but with the actual upload part.

Read it