Yum!

Really cool designed site. As you scroll down a scene unfolds! seriously Check it out!

“Playful experimentation, also known as fumbling in the dark. I hacked this together in stolen moments, based on ideas conceived while drinking saké cocktails and musing about redesigning thismanslife.

View-source of course, but don’t judge the mess I’m rusty. Borrow, don’t steal. Hat-tip to Jon Raasch for the excellent Parallax jQuery plugin “

Thanks for viewing, James Mellers

spin.js

9-bits:

MIT-licensed, imageless, loading spinner which uses CSS3 where possible and falls back to VML for our buddy, IE6. Great little JavaScript project.

jQuery-lifestream: Aggregate all your social activity with JavaScript

thechangelog:

As Zeldman observed over three years ago, we’re farming out our online presence to a growing number of social networks. This fragmentation means it’s getting harder to see all of our online activity in one spot. If you’re looking for an easy way to pull all your tweets, likes, checkins, and even GitHub activity together in one spot, check out jQuery Lifestream from Christian Vuerings.

Installation and usage

To use the plugin, in addition to the jQuery dependency, you’ll need to add the script to your page along with some configuration with your social network account information.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="https://raw.github.com/christianv/jquery-lifestream/master/jquery.lifestream-compiled.js"></script> <script> $("#lifestream").lifestream({ list:[ { service: "github", user: "pengwynn" }, { service: "twitter", user: "pengwynn" } ] }); </script>

Here’s a preview of my own personal GitHub and Twitter stream:

One of the great things about jQuery Lifestream is that it supports jQuery templates so that you can customize how each feed item is displayed:
{
  service: 'deviantart',
  user: 'gabbyd70',
  template: {
    deviationpost: 'heeft hetvolgende gepost: <a href="${url}">${title}</a>'
  }
}
jQuery Lifestream supports a long list of feed sources:

Blogger

Dailymotion

Delicious

DeviantART

Dribbble

Flickr

Foomark

Formspring

Forrst

Foursquare

Github

Google Reader

Iusethis

Last.fm

PicPlz

Pinboard

Posterous

Reddit

Slideshare

Stackoverflow

Tumblr

Twitter

Vimeo

Wordpress

Youtube

Christian has created a nice demo page that lets you enter your social network usernames and preview your own lifestream.

If you don’t see your favorite site in the list, check out the README for contribution guides and advanced usage.

[Source on GitHub] [Follow @jq_lifestream on Twitter for updates]

Raphaël—JavaScript Library

(Source: luisk)

treesaver: HTML5, JavaScript library for creating magazine style layouts for iPad and web

thechangelog:

A new breed of mobile devices led by the Apple iPad are changing the way we think about web layout. Applications like Flipboard and Feedly have led the charge in a resurgence of magazine-style layouts both on the web and on the tablet.

Treesaver from Filipe Fortes is a new JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. Weighing in at just 25KB, Treesaver’s feature set is impressive providing support for grid and column layouts, custom UI’s, repeating content, cover pages, figures and illustrations, and analytics.

The Treesaver wiki has a nice walkthrough to get you started and the project ships with an HTML boilerplate for both your content:
<!doctype html>
<html class="no-js no-treesaver">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1">
    <title>Sample Treesaver Page</title>
    <link rel="stylesheet" href="style.css">
    <link rel="resources" href="resources.html">
    <script src="treesaver-0.9.0.js"></script>
  </head>

  <body>
    <article>
      <p>This markup is an example of a page using Treesaver for layout. It is not very exciting right now.</p>
    </article>
  </body>
</html>
and your resources:
<!doctype html>
<html>
  <body>
    <div class="chrome">
      <div class="viewer"></div>
    </div>

    <div class="grid">
      <div class="column"></div>
    </div>

    <div class="loading">
      Loading
    </div>

    <div class="error">
      Error
    </div>
  </body>
</html>
Be sure and check out the impressive demos, especially on the iPad. With this first public release, Filipe admits the project still needs a lot of work. But the GitHub repo has a deep wiki and is very active. If you’re interested in contributing, you can help knock out the growing list of bugs and features.

[Source on GitHub] [Homepage]

dom-monster: Cross-browser bookmarklet to analyze your DOM, improve performance

thechangelog:

Thomas Fuchs, JavaScript pro featured recently on Episode 0.3.9 has teamed up with his wife Amy Hoy to bring you the DOM Monster, a cross-browser bookmarklet that analyzes your markup and offers tips to improve page performance.

Other tools such as Y! Slow provide similar analysis and integrate with Firebug, but the DOM Monster aims to be a cross-browser solution. Got ideas to improve the project? Check out the project source and submit a patch.

[Source on GitHub] [Homepage]