Feel free to share resources you find useful too!

If you’re not familiar with responsive webdesign I suggest you check out this nice presentation from @bytte:

CSS Frameworks:

HTML5 boilerplate

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

Goldengridsystem

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.

320 and up

‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed.

skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

 Foundation

An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

 Gridpack

The Responsive grid generator, created by Erskine Design.

Embedding media

fitvidjs (video)

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Text

letteringjs

A jQuery plugin for radical web typography

 fittextjs

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

SVG

raphaël

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Making things work cross browser

selectivizr.js

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

Contributions by @baskwalla, @driesdeleay, @wolfr, @bengie & @paulirish 

Google chromebook Samsung series 5

There was a contest at the fronteers conference 2011 where you just had to fill in a form with your name, email address and the reason why you should win it. I wasn’t going to compete but a little voice inside said “why not…” The app I proposed is a simple straightforward online SVG generator / editor. The possibility to add shapes, paths, text, etc.. and choose your output format: SVG or RaphaelJS. (I’ll explain the inspiration for the app in a future blogpost)

So, as you already guessed, I won the chrome book. It’s a pretty neat device, nothing fancy but fast as hell! It has a 16gb SSD which is enough if you know that the OS is just google chrome. I’m very happy I won because now I’m even more motivated to build this SVG tool. I’ve even been thinking about a name and a logo and found the perfect match: since it’s a web based version of Illustrator I’ll coin it Willistrator (Web Illustrator). The logo is very simple, some bezier curves, handlers and a simple font, resulting in something like this:

Codename: willistrator

And before you ask: YES I am serious about the codename, it’s not a spoof and I’ll build it. The logo I’m not really sure…

If all goes well I can kick this project in the groin later this week, I’ll post a follow-up blogpost with the inspiration for the app and a link to the github repository / pre-alpha version.

$('video[loop="loop"]').bind('ended', function(){
   this.play();
})

Most of us create identities across the web without much conscious thought. We fill in profiles, upload photos, videos, reviews, and bookmarks. Although this information is often public, it’s fragmented into the silos of individual websites. Wouldn’t it be a little magical if, when you signed up for a new site, the site said something like, “We notice you have a profile photo on Flickr and Twitter, would you like to use one of those or upload a new one?”

Full article

Glenn Jones has written a javascript library that collects data from different social profiles. It currently supports 70 sites and 142 endpoint mappings. Now that’s some real magic! You can download this engine for free at identengine.com.

He also did a presentation about blending social graph data and other open data sources at Twiist.be in Leuven.