FlatironJs: an unobtrusive framework initiative for node.js

No one agrees on frameworks. It's difficult to get consensus on how much or how little a framework should do. Flatiron's approach is to package simple to use yet full featured components and let developers subtract or add what they want.
Flatiron promotes code organization and sustainability by clearly separating development concerns. Each component works elegantly with or without its counterparts. Many of the components work the same in the browser as they do on the server. This is the motivation behind flatiron. At it's core flatiron is two things:

• an initiative to build a collection of decoupled tools with the same standard of quality and performance that you would expect from anything built by nodejitsu. 
• a full-stack web application development framework which packages these tools together to make isomorphic and stream-based application development easier.

http://flatironjs.org

inside the framework

Packaged inside the framework are the basic building blocks for a modern web application.

routing

middleware

templating

odm

composition

RailwayJS - MVC framework

What is railway?

Railway is the Node. JS MVC framework based on ExpressJS, fully ExpressJS-compatible. It allows you to build web applications in a similar manner as in Ruby On Rails.

The main objective of the framework - web development without pain.

What is under the hood

• Full MVC+H stack
• Resource-based routing
• JugglingDB ORM
• Multi-locale support
• Coffee-script support (howto)
• Generators for model, controller, scaffold
• Testing: nodeunit, cucumis, code coverage reporting
• Debugging: railway console
• Extensions

http://railwayjs.com/

Knockout.js

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

Headline features:

• Elegant dependency tracking - automatically updates the right parts of your UI whenever your data model changes
• Declarative bindings - a simple and obvious way to connect parts of your UI to your data model
• Flexible and sophisticated templating - construct a complex dynamic UI easily using arbitrarily nested templates
• Trivially extensible - implement custom behaviors as new declarative bindings for easy reuse in just a few lines of code

Additional benefits:

• Pure JavaScript library - works with any server or client-side technology
• Can be added on top of your existing web application without requiring major architectural changes
• Compact - around 25kb before gzipping
• Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, others)
• Comprehensive suite of specifications (developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms

Developers who’ve used Silverlight or WPF may recognize KO as an example of the MVVM pattern; developers more familiar with Ruby on Rails or other MVC technologies may see it as a real-time form of MVC with declarative syntax. In another sense, you can think of KO as a general way to make UIs for editing JSON data…

http://knockoutjs.com/

jVectorMap

jVectorMap is a jQuery plugin employed to show vector maps and visualize data on HTML pages. It uses SVG in all modern browsers like Firefox 3 or 4, Safari, Chrome, Opera, IE9, while legacy support for older versions of IE from 6 to 8 is provided with VML. Using jVectorMap is pretty simple as for any other jQuery plugin.

http://jvectormap.owl-hollow.net

jQuery Splatter Plugin

Splatter is a jQuery plugin which applies a random position, size, and color to elements on a page. The most basic implementation adds randomly colored and positioned asterisks to the element:

To see some working examples, check out the demo page.

http://coryschires.com/jquery-splatter-plugin/

The Difference Between jQuery’s .bind(), .live(), and .delegate()

The difference between .bind(), .live(), and .delegate() is not always apparent. Having a clear understanding of all the differences, though, will help us write more concise code and prevent bugs from popping up in our interactive applications.

.bind()

$('a').bind('click', function() { alert("That tickles!") });

This is the most straight forward binding method. jQuery scans the document for all $('a') elements and binds the alert function to each of their click events.

.live()

$('a').live('click', function() { alert("That tickles!") });

jQuery binds the alert function to the $(document) element, along with 'click' and 'a' as parameters. Any time an event bubbles up to the document node, it checks to see if the event was a click and if the target element of that event matches the 'a' CSS selector. If both are true, the function executes.
The live method can also be bound to a specific element (or “context”) other than document, like this:

$('a', $('#container')[0]).live(...);

.delegate()

$('#container').delegate('a', 'click', function() { alert("That tickles!") });

jQuery scans the document for $('#container'), and binds the alert function along with the click event and 'a' CSS selector as parameters. Any time an event bubbles up to $('#container'), it checks to see if the event was a click and if the target element of that event matches the CSS selector. If both checks are true, it executes the function.
Notice this is similar to .live(), except that it binds the handler to the specified element instead of the document root. The astute JS’er might conclude that $('a').live() == $(document).delegate('a'), right? Well, no, not exactly.

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/?utm_content=backtype-tweetcount&utm_medium=bt.io-twitter&utm_source=netvibes.com

Smooth Div Scroll

Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no visible buttons or links since the scrolling is done using hotspots within the scrollable area or via autoscrolling. Unobtrusive and smooth is the key here.

Table of contents

1. What is Smooth Div Scroll?
2. Quick demo
3. Basic demo (use as template)
4. More examples!
   • Scrolling text
   • Small scroller
   • Running ticker
   • Multiple autoscrollers on one page (loading content through AJAX)
   • Clickable logo parade
   • Image gallery using ColorBox
5. Options
6. Altering options after initialization
7. Public methods
8. Callbacks
9. The CSS
10. Dependencies
11. Download
12. Help and support
13. Newsletter
14. Version history
15. To-do (the next version)
16. Copyright, license and all that
17. About me
18. Nice sites that use Smooth Div Scroll
19. Please give this plugin a rating

http://www.smoothdivscroll.com/

Signature Pad

A jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration.

The Signature Pad jQuery plugin will transform an HTML form into a signature pad. The Signature Pad has two modes: TypeIt and DrawIt. In TypeIt mode the user’s signature is automatically generated as HTML text, styled with @font-face, from the input field where they type their name. In DrawIt mode the user is able to draw their signature on the canvas element.
The drawn signature is written out to a hidden input field as a JSON array using JSON.strinify(). Since the signature is saved as JSON it can be submitted as part of the form and kept on file. Using the JSON array, the signature can then be regenerated into the canvas element for display.
Obviously, Signature Pad has a couple extra dependencies: Douglas Crockford’s JSON2 and Google’s Explorer Canvas. (Both scripts are included in the downloadable package.)
Signature Pad tries to maintain a certain level of progressive enhancement, while still giving developers enough control. There is very little generated HTML. The HTML in the examples has some elements that should be hidden by default (including canvas). Signature Pad will trigger the display of certain items if the browser supports Javascript and canvas.
Signature Pad works with both mouse and touch devices.
Get the source code on GitHub:
http://github.com/thomasjbradley/signature-pad/

Signature Pad is able to create multiple instances on a single page by selecting multiple items with jQuery. The limitation lies in the API return; Signature Pad will only return the API for the last selected element. If you would like to store the API for multiple elements they must be initialised with separate jQuery calls.

http://thomasjbradley.ca/lab/signature-pad

jQuery custom content scroller

Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width.





http://manos.malihu.gr/jquery-custom-content-scroller

Hemi JavaScript Framework

Engine for Web Applications is a services framework. Hemi JavaScript Framework is the project name for Engine version 3.
Hemi may be used alongside most Web frameworks and libraries. Custom components can be loaded externally or easily built into the framework, deployed as separate script packages or as application components.
Key features include managing application interdependencies and bootstrapping (tasking), messaging, inter-object transactions, configuration, dynamic runtime components, templates, application containment, and monitoring. The application space service creates a containment and abstraction layer for associating script with HTML and XML content, and exposing declarative scripting with XML.
Documentation:

• Introduction
• Core Features
• Framework Utilities
• Task Service
• Module Service
• Test Module Service
• Application Components
• Data IO Service
• Application Space Service
• Templates
• Virtual Forms

Refer to the Introduction for further information. Refer to the Hemi Project Page for additional resources and examples.

xc.js

xc.js is a framework for HTML Canvas games in Javascript. It's simple and fun to use and you can even try it out right here in your browser.
But that's not all. xc.js also runs on other platforms. You can write your games in Javascript and run them in all sorts of cool places (like on your phone!).

Try xc.js now!

You can download xc.js and run it on Windows, Linux, or OS X. Or, even better, try it out in your browser. Now that's cool.
Either way, be sure to check out the tutorials and documentation over at the wiki. There's other useful information there, too.

• Download   
• Try it Now!

Polaroid Photobar Gallery with jQuery

In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a thumbnail is clicked. In the full image view the user can navigate through the pictures or simply choose another thumbnail to be displayed.
For this gallery we will be using the 2D Transform plugin to animate rotations.
The beautiful photos used in the demo are by talented Tetsumo. Visit his blog here.

http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/

jQuery plugin to disable text selection on elements

It took my a while to find a bit of script that worked cross browser, but the jquery plugin at http://code.jdempster.com/jQuery.DisableTextSelect/ does the job!
When working on the UI of a web application text would often get selected by the browser incorrectly, for example while dragging an element, or clicking on an element with an onclick event.
If you are using jquery already; download it, include it, then use:
$(‘.elementsToDisableSelectFor’).disableTextSelect();
If you need this functionality without including the whole of jquery, take a look at the source code for the plugin. It’s only about 20 lines long. It uses a different method for Firefox and Internet Explorer, with a fallback for everything else but it should be easy to convert in to native JS or another javascript framework.

(function($) {
    if ($.browser.mozilla) {
        $.fn.disableTextSelect = function() {
            return this.each(function() {
                $(this).css({
                    'MozUserSelect' : 'none'
                });
            });
        };
        $.fn.enableTextSelect = function() {
            return this.each(function() {
                $(this).css({
                    'MozUserSelect' : ''
                });
            });
        };
    } else if ($.browser.msie) {
        $.fn.disableTextSelect = function() {
            return this.each(function() {
                $(this).bind('selectstart.disableTextSelect', function() {
                    return false;
                });
            });
        };
        $.fn.enableTextSelect = function() {
            return this.each(function() {
                $(this).unbind('selectstart.disableTextSelect');
            });
        };
    } else {
        $.fn.disableTextSelect = function() {
            return this.each(function() {
                $(this).bind('mousedown.disableTextSelect', function() {
                    return false;
                });
            });
        };
        $.fn.enableTextSelect = function() {
            return this.each(function() {
                $(this).unbind('mousedown.disableTextSelect');
            });
        };
    }
})(jQuery);

http://www.blograndom.com/blog/2009/07/jquery-plugin-to-disable-text-selection-on-elements/

imgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

Plugin features:

• Highly configurable
• Customizable with CSS styling
• Handles scaled images
• Keyboard support for moving and resizing the selection
• Supports callback functions
• Provides API functions for easier integration with other application components
• Lightweight — the packed version is less than 8KB

The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

http://odyniec.net/projects/imgareaselect/

Jasmine – A JavaScript Testing Framework

There are some great JavaScript testing frameworks out there. Many only work from within a browser. Most don’t support testing asynchronous code like event callbacks. Some have syntax that’s hard for JS developers or IDEs to understand.
Jasmine is a JavaScript testing framework. It’s heavily influenced by, and borrows the best parts of, ScrewUnit, JSSpec, JSpec, and of course RSpec. Jasmine is not tied to any browser, framework, platform, or host language. It work anywhere JavaScript can run, including browsers, servers, phones, etc.

http://pivotal.github.com/jasmine/
http://www.webappers.com/2010/09/02/jasmine-a-javascript-testing-framework/

Dive Into Dijit

One huge feature that sets the Dojo Toolkit apart from other JavaScript libraries is its UI component system: Dijit. A flexible, comprehensive collection of Dojo classes (complemented by corresponding assets like images, CSS files, etc.), Dijit allows you to create flexible, extensible, stylish widgets. To learn how to install, configure, and use basic Dijits within your web application, keep reading!

http://www.sitepen.com/blog/2010/07/12/dive-into-dijit/

ExtJs Examples

1. Build Ajax applications with Ext JS:
   http://www.ibm.com/developerworks/web/library/wa-aj-extjs/
2. Custom validations:
   http://www.quizzpot.com/2009/12/custom-validations/
3. Combo box loaded dynamically and remotely:
   http://www.quizzpot.com/2009/10/combo-box-loaded-dynamically-and-remotely/
4. Loading forms remotely:
   http://www.quizzpot.com/2009/11/loading-forms-remotely/
5. Saving information in the server:
   http://www.quizzpot.com/2009/11/saving-information-in-the-server/
6. Linked ComboBoxes with ExtJS:
   http://www.quizzpot.com/2009/11/linked-comboboxes-with-extjs/
7. Toolbar in panels and windows:
   http://www.quizzpot.com/2009/08/toolbar-in-panels-and-windows/
8. Status bar in panels and windows:
   http://www.quizzpot.com/2009/09/status-bar-in-panels-and-windows/
9. The Tabs:
   http://www.quizzpot.com/2009/09/the-tabs/
10. ExtJS basic forms and fields:
    http://www.quizzpot.com/2009/10/ext-js-basic-forms-and-fields/

jsplumb

This jQuery plugin provides a means for a developer to visually connect elements on their web page, in much the same way you might have seen on Yahoo Pipes. It uses Canvas in modern browsers, and Google's ExplorerCanvas script for stone-age browsers. Full transparent support for jQuery dragging is included, the API is super simple, and the compressed version of the script is just 11.6K.

You can see a demonstration here.
TweetPlumb is a great Twitter visualisation built using jsPlumb.

http://code.google.com/p/jsplumb/

Greenhouse

Greenhouse: Graphical Interface Builder for building blazing fast native-style applications using SproutCore.

So What, Everyone Has a Interface Builder…

While this may be true, no one has really innovated in this space for 20 years. They all seem to look the same. Here is a small sample of them:

Interface Builder

Atlas

TIBCO Interface

Ext-JS Builder

So these are good, but they all have the same problem.
If we are to build beautiful web applications, we can’t do it with a cluttered workspace. We need a workspace for creativity, but these interfaces are cluttered with controls and only give you a small window to see your actual content!
So what can we innovate this space? How do we turn these cramped UIs in to a place where we can create some awesome web applications? Here are the steps that we took:

Clean Up the UI

First, we cleaned up the interface. We move the list of components and inspectors to picker panes that can be torn off and docked in the traditional interface builders.



In this way, we maximize the workspace. We move as much as possible out of the way so you can focus on your content. This is also a true WYSIWYG editor.

Solving the Blue Box Problem

Most production apps are built from custom views developed for the app. The problem is most interface builders can’t show you these custom views so they draw a blue box and leave it to your imagination.
We are all busy people. Most of us don’t have designers that can build custom mockups of views to show us what our UI will look like. Also, these designs change so much that is a major feat to keep up to date if you do have a designer. It is a hugh waste of time. So what you are forced to do is actually not have your custom views styled in your UI builder and it looks like this:

The SproutCore team decided the best way to solve this was to leverage the power of JavaScript. Rather than load a data file, Greenhouse actually loads your entire application in an iframe. Your actual application is loaded in a ‘suspended’ design state so that you can actually see your custom views as you have built them. They will update and look exactly like they would in the code.
This is an amazing time saver for you. It can help you actually build amazing user interfaces. This is what it looks like with a large application with a lot of custom views. It looks exactly like it does in real life as if you were using it!

Oh, and one more thing: Greenhouse’s file format is actually Javascript built off of the 1.0 API. If you have a Sproutcore App that is built with SC.Pages, your pages will automatically load into Greenhouse will little to no effort.

OK, That’s nice, but what is the catch?

Well, most interface builders cost lots of money. Like $100, $200 and even more. Some will even charge you for their beta releases.
We on the SproutCore Team believe that a UI designer is a fundamental tool for any framework that is worth it’s salt. So we have decided to build Greenhouse into SproutCore - entirely free. We want to give this away because its the right thing to do.

Cool! How do I get it?

Well, that’s the easy part. Greenhouse is currently built directly into Sproutcore with some really easy steps to get it:
git clone git://github.com/sproutit/sproutcore-abbot.git abbot
cd abbot
mkdir frameworks
cd frameworks
git clone git://github.com/sproutit/sproutcore.git
cd ../..
And then from your Sproutcore project directory:
<path_to>/abbot/bin/sc-server
Now all you have to do is open: http://localhost:4020/sproutcore/greenhouse you should get the App Viewer:

Note: If you use a custom build of SproutCore (something in frameworks/sproutcore), you will need to rebase to the Top-Of-Tree (TOT) to make sure you have all the code to run your application in Greenhouse.

http://blog.sproutcore.com/post/535950751/introducing-greenhouse

gameQuery. Javascript game engine for jQuery

gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It's still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

http://gamequery.onaluf.org/