TodoMVC (A common learning application for popular JavaScript MV* frameworks )

Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing JavaScript web apps. Backbone, Spine, Ember (SproutCore 2.0), JavaScriptMVC… the list of new and stable solutions goes on and on, but just how do you decide on which to use in a sea of so many options?

TodoMVC – a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.

Source Website & Download

Pictorial Icon Library – Icons & Pictorgrams – Pixel & Vector (PICOL )

PICOL stands for PIctorial COmmunication Language  and is a project to find a standard and reduced sign system for electronic communication. PICOL is free to use and open to alter.

Right now there is total number of 116 Icons in the icon library. There are much more icons available for download as ZIP-files. All icons can be downloaded on blog.picol.org/downloads/icons

Source Website & Download

Discover who’s tracking you online

Collusion is an experimental add-on for Firefox and allows you to see all the third parties that are tracking your movements across the Web. It will show, in real time, how that data creates a spider-web of interaction between companies and other trackers.

Source Website & Download

By routhu Posted in Tools

DataTables: Plug-in For jQuery Javascript Library

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

Key features:

  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Display data from almost any data source
  • Scrolling options for table viewport
  • Fully internationalisable
  • jQuery UI ThemeRoller support
  • Rock solid – backed by a suite of 2800 unit tests
  • Wide variety of plug-ins inc. TableTools, FixedColumns, KeyTable and more
  • It’s free!

Common Patterns Of Markup & Style

using the same snippets of code that you’ve used in your previous projects as well. Whether it’s a data table, a search, breadcrumbs or pagination — wouldn’t it be nice to have a library of bulletproof reusable CSS/HTML components and just grab them when you need them for your work?

Pea.rs might be just the tool you’re looking for. It’s an open source WordPress theme that lets you collect, test and experiment with interface pattern pairings of CSS and HTML. You can easily have your own pattern library setup and running quickly. Essentially, each pattern is a post in WordPress, code snippets are added using custom fields, and the main content field is used for optional notes. Very useful! (vf)

jQuery Smooth Scrolling Plugin

Page Scroller is a powerful JavaScript based smooth scrolling navigation system that utilizes the robust jQuery library. Created entirely with ease of use in mind, the plugin will work on any website. Don’t believe me? Try it yourself…

Source Website & Download

HTML5 Element Flowchart

An easy-to-understand HTML5 sectioning element flowchart to help you get to grips with some of the new elements in HTML5.

HTML5 still has quite a few myths and misconceptions which lead one to misuse its technology. New semantic elements introduce a better way to define the content of web pages, yet not all of them are very convenient nor straightforward. Do you know exactly when each element should be used (and when not)? Don’t fear, the Doctor is to the rescue.

 

Is it The <em>Section</em> Or The <em>Aside</em>? An HTML5 Element Flowchart

 

HTML5 Doctor has created HTML5 Elements Flowchart to illustrate the correct and semantic way of using the new HTML5 elements, such as aside, section or article. Print it out and hang it on the wall for future reference — it will surely come in handy. (ld)

Spicing Up Your Navigation Menu With CSS3

Do you remember those days when we used nasty JavaScript libraries with onMouseOver effects for “advanced” navigation menus? Comparing those nasty techniques with the simplicity and power of CSS3, we understand how far we have actually come up in our industry over all those years. Mary Lou’s technique for a sliding navigation with images is a vivid example for that.

A very simple CSS navigation technique allows you to add an image for every menu item and slide it out on hover. Essentially, it uses very basic HTML, CSS transitions and the nth-child selector. A very simple and useful technique — especially if you are working on a portfolio site, a gallery site or a slideshow. (vf)