Trello… now with an API (Beta)

Trello is not only a very useful task management system, incorporating SCRUM board approach with HTML5 and an exceptional nice look and feel… now it also has a very elegant REST API.

Check it out…
https://trello.com/docs/

Here is a quick sample on how to retrieve the cards for the current user… using the Client.js JavaScript class that Trello is providing asn easy way to get started…
http://jsfiddle.net/nNesx/

They have opened up their development plans in the form of their internal development board…
https://trello.com/api

Tagged , ,

AppJS… Build Cross-Platform Applications

…for desktop using HTML, CSS, Javascript !

It’s still very early stuff, however its interesting to see how a lightweight container like this may develop into something pretty useful, at least the stack of technologies used is entirely aligned with how I would set out to build a lightweight app container…

Why AppJS?

Because it is simple and yet powerful. Using AppJS you don’t need to be worry about coding cross-platform or learning new languages and tools. You are already familiar with HTML, CSS and Javascript. What is better than this stack for application development? Beside, AppJS uses Chromium at the core so you get latest HTML 5 APIs working. So relax and focus on the task your application should do.

HTML 5

AppJS allows you to use HTML 5 APIs to create attractive applications from Word Processors to 3D Games. You are no longer limited to default GUI widgets that plaforms force you to use. Creating custom UIs is now only limited to your imagination!

CSS 3

Using CSS you can decorate widgets as you like. Create a custom widget in HTML and complete your work with decorating it. Adding shadows, animating elements and transforming objects in 3D space are a few examples of what you can do with CSS 3.

Node.js

The interesting part of AppJS is that it uses Node.js as the backbone. Node.js has been built to ease the process of developing scalable network applications. But today, you can see Node nearly everywhere! It has a nice API and lots of modules.

Check it out…
http://appjs.org/

Tagged , ,

jsPerf — JavaScript performance playground

jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks. For more information, see the FAQ.

An example of what an entry in jsPerf looks like, check out this comparison between inner and prototype functions…

Image

Anyways… check it out…
jsperf.com/inner-function-vs-prototype-function

Tagged ,

FixieJS… a tremendously cool html utility

Fixie.js is an open source tool that automatically adds filler content to HTML documents.

Image

Adding lorem ipsum text to HTML documents involves copy-pasting, manual editing, and increasingly unwieldy code.

By interpreting your semantic HTML5 tags, Fixie will automagically add the right type of content in the right places. Headings, paragraphs, links, images, sections… trust me, it’s all there. That way you can focus on your design, instead of finding the right filler content.

A nice example on how this can be useful can be found in the equally clever utility: FlickHoldr
http://flickholdr.com/ 

Image

FlickHoldr simply gets placeholders related to the site you are developing, by pulling images from flickr based on tags… very simple and elegant…

Tagged

AngularJS… a selection-change directive… an early implementation

having run into some issue implementing a change handler on the select control without setting the model property… I decided to see how it could be to implement a selectionHandler directive…

I started out with this implementation which obviously is far from best practice and far from ideal yet… next step will be to find the best practice to implement a tag for an entire “combobox”…

HTML

<select ng-datasource="candidateContacts" ng-selection-change="selectContact">
	<option ng-repeat="candidateContact in candidateContacts" ng-selected="candidateContact.id == contact.item.id">
		{{candidateContact.name}}
	</option>
</select>

JavaScript

.directive( "ngSelectionChange", function( $compile ) {
		return function( $scope, $element, $attrs ) {

			jQuery( $element ).change( function( e ) {

				var target = jQuery( e.target );

				var datasourceKey = target.attr( "ng-datasource" );
				var datasource = $scope.$eval( datasourceKey);

				var actionKey = target.attr( "ng-selection-change" );
				var action = $scope.$eval( actionKey );

				var selectedIndex = target.prop( "selectedIndex" );
				var selectedItem = datasource[ selectedIndex ];

				action.call( $scope, selectedItem );
			});
		}
	})

UPDATE
I just stumbled upon the concept of using accessor’s in the directive scopes, that will help me get rid of the redundancy in the declaration of the datasource/iterator…
http://jsfiddle.net/ADukg/10/

UPDATE
I came across this directive when browsing the recently updated documentation system, this will do fine so there is no need to implement a ComboBox since the functionality is covered by the native select directive… http://docs.angularjs.org/api/angular.module.ng.$compileProvider.directive.select

Tagged

Base64 Encoding/Decoding in JavaScript… wrapped in jQuery

Integrating a Google Gadget with Solve360′s API, I needed to have a way to Base64 encode some strings before appending them as headers to my server calls… instead of rolling my own, I went to look for my old friend: Nick Galbreath’s base64 string encoder

In the search results I stumbled upon a 2 year old jQuery’fication of it by Carlo Zottmann

Check it out…
https://github.com/carlo/jquery-base64 

Tagged , ,

StateMachines in JavaScript… on the path to programmable workflows

In the need for a Sequential Workflow for JavaScript applications, I was lucky to find a great StateMachine implementation of a Finite StateMachine…

Unfortunately, I wasn’t really looking for a Finite StateMachine, but more of a Sequential Workflow that I can use to drive an application consisting of a distinct set of actions in a predictable order… Anyways…

Jakes Gordon has gone the effort of implementing a swift and cleverly designed finite statemachine and made it available on GitHub… its entirely standalone and has no dependencies on other frameworks or libraries.

If you are familiar with using finite statemachines, it will come easy to use the library, otherwise Jakes has formulated a well articulated and easily-understandable ReadMe…

https://github.com/jakesgordon/javascript-state-machine/#readme

Jakes has documented the library well, and is providing a great example on how to use it in a graphical way…
Image
http://codeincomplete.com/posts/2011/8/19/javascript_state_machine_v2/example/

Anyways, check out the library if you are in need of a finite statemachine for your JavaScript applications…

https://github.com/jakesgordon/javascript-state-machine/

Tagged ,

Using Angular with jQuery

When familiarizing oneself with AngularJS, its on some occasions a forthcoming thought if this is all you need since they do exclude each other in many ways, however they have been build with two very different perspectives on application design… jQuery is basically a library focused on DOM querying and manipulation, AngularJS is an application framework and micro-architecture…

That they however are not entirely mutually exclusive becomes evident when diving in to the angular.element method… as it turns out Angular is actually using jQuery (or of jQuery is not loaded, an embedded version referred to as jqLite).

angular.element wraps a raw DOM element or HTML string as a jQuery element. angular.element can be either an alias for jQuery function, if jQuery is available, or a function that wraps the element or string in Angular’s jQuery lite implementation (commonly referred to as jqLite).

Real jQuery always takes precedence over jqLite, provided it was loaded before DOMContentLoaded event fired.

jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM. jqLite implements only the most commonly needed functionality within a very small footprint, so only a subset of the jQuery API – methods, arguments and invocation styles – are supported.

Note: All element references in Angular are always wrapped with jQuery or jqLite; they are never raw DOM references.

So, if you are using Angular as your application framework and you see a need to use jQuery for one or more of the many things jQuery is absolutely amazing and almost second to none, then don’t hesitate to do so, they are both great system citizens and work great as peers in your applications…

Tagged , ,

Introducing Backbone.js…

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
http://documentcloud.github.com/backbone/

When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It’s all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. For rich client-side applications, a more structured approach is often helpful.

With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a “change” event; all the Views that display the model’s state can be notified of the change, so that they are able to respond accordingly, re-rendering themselves with the new information. In a finished Backbone app, you don’t have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually — when the model changes, the views simply update themselves.

This is similar to most other template based general purpose javascript frameworks today, and the way Backbone.js is approaching is code centric and gives the developer a high degree of very finely granulated control over how the application is tied together and driven…

Backbone Aura is a decoupled, event-driven Backbone architecture for developing applications and can in the same sentence be coined as a General Purpose Application Micro Architecture.
https://github.com/addyosmani/backbone-aura 

The application is broken down into AMD modules that contain distinct pieces of functionality (eg. views, models, collections, app-level modules). The views publish events of interest to the rest of the application and modules can then subscribe to these event notifications.

All subscriptions go through a facade (or sandbox). What this does is check against the subscriber name and the ‘channel/notifcation’ it’s attempting to subscribe to – if a subscriber doesn’t have permissions to do this (something established through permissions.js), the subscription isn’t allowed through. The rest of the application is however able to continue functioning. 

Tagged ,

AngularJS… by Google

AngularJS is by far one of the most promising frameworks to fill the gap of JavaScript development in the RIA developer’s toolbox…. so regardless of me posting about it before, I felt compelled to do it again…

Image

The übercool thing about AngularJS is that its entirely unobtrusive and an excellent system citizen, it works perfectly fine together with any other framework you may depend on…

Brackets is build using jQuery, so targeting technology agnosticism when choosing an application framework is empiric… enter AngularJS.

Comparing to KnockoutJS and BackboneJS; AngularJS is definitely comparable in features and the coding elegance is by far higher than with either of the aforementioned…

Check it out (again)…
http://angularjs.org

Tagged , ,
Follow

Get every new post delivered to your Inbox.