HTML5, CSS3 and jQuery are the most hyped tools of 2012. Most people call this new hype HTML5, but HTML5 is only a a new set of standards, semantics and rules for coding website markup that help us interact with the newest native browser features.
As Ian says:
You can see the demo on CSScience.
- Display interactively static graphs exported from a graph visualization software
- Display dynamically graphs that are generated on the fly
You can see a bunch of cool visualization examples on Sigma.js example page, so go and check it out.
jQuery Scroll Path
jQuery Scroll Path is a plugin that lets you define your own custom scroll path. What this means exactly is best understood by checking out the demo. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initiating the plugin.
Scrolling can be done with the mouse wheel, up/down arrow keys and spacebar. The space bar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scroll bar is also included, which allows click and drag scrolling. The scroll bar is enabled by default.
Flickrush – jQuery Flicker plugin
Flickrush is a jQuery plugin designed to make it quick and easy to add your flickr photo stream to any web page with minimal effort. Fully customisable you can choose the number of photos, randomise the ordering and style to fit in with any blog or web page.
Timeline plugin is used to create beautifully crafted timelines that are easy, and intuitive to use.
Timeline is also great for pulling in media from different sources. It has built in support for pulling in Tweets and media from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud. More media types will be supported in the future.
You can see and download it on Timeline.
iPicture is a jQuery Plugin to create interactive pictures with extra descriptions presented as tooltips.
It comes with a wizard to help you generate the effect as soon and as easily as possible simply by dragging and droping. More info on plugin’s page.
It is completely themable via CSS. Rainbow on its own is very simple. It goes through code blocks, processes regex patterns, and wraps matching patterns in tags. All the theming is left up to CSS.
cssFx.js – CSS3 property polyfill
cssFx is a standalone polyfill that inserts the vendor-specific CSS3 properties necessary for old and new browsers. This saves you tons of time, maintenance, and bandwidth.
Features that are supported includes: box shadows, border radius, multiple columns, border image, RGBA, transforms, keyframes, transitions (and properties inside transitions), flexible box, gradients, and a ton of other useful things (like opacity, ellipsis, and inline-block).
Browser support includes: Firefox 3+, Chrome 1+, Internet Explorer 6+, Safari 3+, Opera 9+.
jQuery Retina plugin
Images that aren’t retina optimized look blown up and fuzzy on retina devices. At the moment, this is only the new iPad (aka, iPad 3), iPhone 4 and 4S. However, more and more devices will soon be retina enabled; from Android and Windows mobile devices, to OSX and Windows desktops.
Until more desktops have retina displays, this requires a client side solution. jQuery Retina plugin will swap out the image source for an image that is sized for retina displays.
The plugin will check if the device retina enabled, and if so, swap out the image with one that is twice as large.
While calling the plugin, the user can also specify if they want to check if the file exists or not.
Plugin and demo can be seen on official jQuery Retina plugin page.
Webshims Lib is a modular capability-based polyfill-loading library, which focuses on accurate implementations of stable HTML5 features, so that developers can write modern, interoperable and robust code in all browsers. It is built on top of jQuery and Modernizr.
The more features a browser supports natively, the more lightweight webshims will be. It works in IE6+, Firefox 3.6+, Safari 5.0.3+, Safari for iOS 5+, Chrome 16.0+, Opera 11.6+.
To get even more excellent content, you can follow me on Twitter.