Orangevolt

I've just released pragmatic-angular - a micro AngularJS module (only 24 lines of code!) for using ANY jQuery plugin within AngularJS.

Additionally, using pragmatic-angular you can consume ANY event (either native or custom event) in AngularJS.

Why should you use it ?

Have you ever noticed that many many developers think they need to wrap almost everything outside the AngularJS world into a AngularJS module ?

You will find for almost any jQuery plugin an AngularJS module. But what is the benefit of using these modules ?

Beside a few exceptions AngularJS-modules-wrapping-jQuery plugins basically consist of boilerplate code *doing nothing* but blowing up your web app size.

Same for events not natively supported by AngularJS - why should you use a special directive for those events when they are bascially all the same - just plain events ?

What makes pragmatic-angular so different ?

pragmatic-angular follows the KISS design principle which means basically

Keep it simple, stupid.

pragmatic-angular doesnt know about the jQuery plugin you want to use - and that's actually not needed. Every jQuery plugin is registered by jQuery at jQuery.fn. So pragmatic-angular can instatiate them at DOM elements.

Thats the only thing that pragmatic-angular directive ng-jquery-plugin does - it takes a configuration object which tells the directive which plugin (and options) to attach to the DOM element.

Same for events.

Do you use a WebComponent or jQuery plugin triggering custom events ?

Take Twitter Bootstrap for example. This library contains a bunch of jQuery plugins. All of them trigger custom events (namespaced events to be exact) which cannot be catched in AngularJS by default.

Using the ng-on directive of pragmatic-angular you can consume all those events by simply providing a configuration object to ng-on telling it which events should be consumed by what event handler (and there's more, see pragmatic-angular for more details).

So the only thing to know is your used jQuery plugins and the 2 dead simple directives of pragmatic-angular. Less code, less bugs, better productivity.

Simple, is'nt it ?

Enough of that - Examples, please !

The pragmatic-angular module example utilizing jQuery UI sortable example uses pragmatic-angular directive ng-jquery-plugin to configure an UL element ot sortable and listens to its custom events using directive ng-on

pragmatic-angular module example utilizing Bootstrap Modal and Popover demonstrates how to use pragmatic-angular directive ng-jquery-plugin to configure a Twitter Bootstrap Modal dialog and a Twitter Bootstrap popover. It demoes also the consume of custom events of these jQuery plugins.

See pragmatic-angular for more details.

Ecmascipt 6 slides of enterJS 2014 conference

2014-07-01T22:18:00.000+02:00

If you are tracking progress of the next Javascript version (Ecmascript 6) then you should consider reading the slides of the talk I gave at the enterJS 2014 conference :

Ecmascript 6 - the future is know

There exists also an alternative version collecting almost everything new in Ecmascript 6 : Ecmascript 6 - the whole truth

Have fun reading !

ES6 : Super minimalistic example how to execute async calls like ajax sequential using generator / yield

2014-06-03T14:25:00.002+02:00

While working on the slides for my ES6 presentation (Ecmascript 6, the next Javascript standard) at the upcoming enterJS 2014 conference in June 2014 I wrote a super minimalistic example showing how to execute asynchronous tasks as a synchronous sequence using ES6 generators and yield (puhhh, what a really long german flavored sentence:-) :

function run( gen) {
var iter = gen( msg => iter.next( msg));

iter.next();
}

run(function* (resume) {
console.log("before");
console.log(yield setTimeout(() => resume( "hello"), 1000));
console.log(yield setTimeout(() => resume( "world"), 1000));
console.log("after");
});

If you are not familiar with ES6 you can read more at Mozilla Developer Network or even at Traceur Language Features.

The important thing on ES6 is that - despite of todays missing browser compatiblity with ES6 - you can use it already using Google Traceur. Traceur transpiles ES6 down to ES5 which is already implemented by almost any important browser.

What does the snippet in detail ? At first there are 2 asynchronous calls to window.setTimeout triggering a timeout which executes a callback function after 1 second. You can even use Ajax calls in place of the timeouts - I took timeouts to keep the example as simple as possible.

When you execute the example the output will be

before

hello

world

after

no matter how you change the timeout delay. And that's exactly what we want !

So how does it work ?

In function run() we create an ES6 Iterator and call its next() function the first time. This enforces the Iterator to be started intially.

At this point, our code is executed until the first yield statement. Because run's argument is an ES6 generator function (marked by the asterisk * after the function keyword) the execution of the function execution is paused here until the next value of the Generator Iterator is available. The Iterator gets a new value when the resume callback was called (by applying iter.next( msg)).

If the Iterator was resumed the JS engine will continue until the next yield statement. Next yield statement follows the same procedure as before.

The pattern used here can be easily adapted to enforce sequential execution of asynchronous functions in any js code (if ES6 is not the limit :-).

You can try out the example by simply copy'n paste it to es6fiddle and hit "Run".

Dev Links for 2014-03-11

2014-03-11T08:21:00.000+01:00

http://blog.ponyfoo.com/2014/02/19/angle-brackets-synergistic-directives

One of the best AngularJS articles i've ever read. (Remark : Blog is sometimes not reacheable because of bandwith limits).

http://complexitymaze.com/2014/03/03/javascript-promises-a-comparison-of-libraries/

A comparison of available Promise implementations in speed, size and functionality. If you are unsure which one to choose for your next project - this might be the source to know !

https://github.com/zynga/style

A nice micro library for creating inline styles programmatically by providing the style as JSON object.

http://davidwalsh.name/

I always enjoy reading David's Blog. He discusses various thing from CSS3 to Javascript techniques. Very entertaining.

http://git-scm.com/book/en/Git-Internals-Git-Objects

If you are consider using GIT as a datastore for your application data (like me :-), this link might be useful for you.

https://github.com/danielstjules/pattern-emitter/

Event emitters with support for regular expressions. Nice.

http://caspervonb.github.io/2014/03/05/ecmascript6-features-and-tools.html

Casper Beyer explains many Ecmascript 6 in this article. What I really not knew was the difference between the current usage options :

What we can do however is transpile our source code to run in ES5 compatible browsers. Google has a project called Traceur which has been around since 2011, in the early days it was experimentation with possible future syntax, now that future syntax is here and going forward it looks like they are focusing on getting together an ES6 compatible transpiler.

There is also es6-transpiler which tries to have cleaner output than Traceur, primarily Traceur has a runtime library, es6-transpiler does not.

http://lorenzoplanas.com/blog/20140302-headless-javascript-testing-with-jasmine-20

As a AngularJS user I always use Jasmine for testing. If you plan to move to Jasmine 2.0 (which should be on your todo list, especially because Jasmine 2.0 hast async test support builtin :-) - this is worth reading.

Happy coding !

Dev Links for 2014-03-06

2014-03-07T09:44:00.000+01:00

http://daneden.github.io/animate.css/

A cross-browser library of CSS animations. As easy to use as an easy thing. Additionally Easy Animations For AngularJS With Animate.css might be interesting for the Angularians of us.

http://demo.agektmr.com/flexbox/

CSS Flexbox Please! is a time saving CSS3 flexbox playground.

http://denisonluz.com/blog/index.php/2013/10/13/angularjs-understanding-watchcollection/

AngularJS: How to use $watchCollection

http://nathanleclaire.com/blog/2013/12/13/how-to-unit-test-controllers-in-angularjs-without-setting-your-hair-on-fire/

How to Unit Test Controllers In AngularJS Without Setting Your Hair On Fire

http://www.regexper.com/

A really handy tool to visualize Javascript regular expressions

CSS3 Box Shadow Generator and CSS3 Text Shadow Generator

2 helpful CSS3 generators

http://browsersync.io/

Time-saving synchronised browser testing. If you are in the need of cross browser testing this is the tool of your choice.

Wait, there is more - todays TOP PICKS !

https://github.com/sindresorhus/multiline

Multiline strings in JavaScript - a neat impressive trick !!

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Vertical align anything with just 3 lines of CSS. Many of us know that technically but most of us probably don't use it for real.

Happy coding, guys !!

Download Github Atom editor without invitation

2014-03-05T15:23:00.001+01:00

As read here you can download the Github Atom editor using

curl -L https://www.atom.io/api/updates/download -A "Atom/0.1 CFNetwork/1.5" > Atom.zip

Unfortunately it seems the beta is only made for OS X ...

open Atom.zip
mv Atom.app /Applications/
rm -rf Atom.zip

That's it !

Amperator - a graphical editor preview for Orangevolt Ampere

2014-02-06T15:36:00.000+01:00

I've just uploaded an ampere update containing the first technical preview of the graphical ampere editor. the preview is based on d3js and AngularJS.

Although it's not-yet-ready, you can have a look at :
http://ampere.eu01.aws.af.cm/public/examples/d3/selection12.html

I will complete the editor when starting with official Ampere 2.0 development.

OUCH! - did I say that before ???

Ampere 2.0 is feature complete (in terms of planning) and ready for implementation. A few parts are already coded but there is a lot more to do.

Major Ampere 2.0 features:

* ES5 is the minimum Javascript standard your browser must support (at least using a shim :-)
* we try to use ES6 as much as we can (using shims for ES6 Promise and so on)

* based on
** AngularJS 1.2,
** Bootstrap 3.* + Font Awesome
** a lot css3 theming sugar based on http://tympanus.net/codrops/category/playground/
** orangevolt-docp for website generation (https://github.com/lgersman/orangevolt-docp ... code is not yet uploaded)
** Jasmine 2.* for tests
** as less dependencies to jQuery as we can (http://orangevolt.blogspot.de/2013/12/superspeed-your-javascript-apps.html)

* a graphical editor
* we will provide a lot more documentation

Happy coding !!

Link to original article :

https://plus.google.com/u/0/b/115194500003117065773/115194500003117065773/posts/5t4UwV4dpBR

Superspeed your javascript apps

2013-12-15T19:24:00.001+01:00

After the success of my Superspeed your angularjs apps article it's time to write a follow up to a more general issue : Javascript page speed.

Many developers know about the min and debug versions of their favorite javascript libraries and when to use which one.

But let's get a step further :

When finished reading this article you might realize that you don't even need jQuery anymore.

Bum - I'm sure you completely disagree ... right know. Read on and your opinion might probably switch ...

While developing Orangevolt Ampere I realized that I use jQuery ALMOST EVERYWHERE AND FOR ALMOST EVERYTHING.

If your web application is not required to work in REALLY OLD browsers like IE6/7/8 then you probably skip using jQuery and should consider using what's already built in most modern browsers:

Have a look at the ECMAScript 5 compatibility table if your browser requirement is matching. If so you can dive into a whole world of Javascript API's provided by your browser. You will never use jQuery.grep or jQuery.each because your browser can do that natively ! Same for jQuery.trim. All the ES5 Array methods will make your life easier (see What They Didn’t Tell You About ES5′s Array Extras for additional stuff). If your browser doesn't support ECMAScript 5 at all - no problem : You can make'em ES 5 compatible using the es5-shim.

use HTML5 features (placeholder attribute, Validation API, Drag'n Drop !!) instead of jQuery UI and dozens of jQuery plugins. You won't believe what your browser supports natively.

One of the best parts of jQuery - it's excellent CSS selector engine - is also 99% not needed : because most browsers have css selector support for Javascript built in ! By the way : CSS selectors are not always the fastest solution. Optimize access by using

document.activeElement for current focused element (see MDN docs for document.activeElement)

document.getElementById for element by ID is always faster than jQuery ('#id') and even document.querySelector( 'id')

access forms directly using document.forms (elem1 = document.forms[0]; or document.forms "myForm"];). similarly you can access form elements using form.elements[0] orform.elements.myelement (this is interesting : myelement can be either id or name attribute !)

Next thing are the amazing jQuery.Deferred API : If you can't live without that - consider using a micro library for your special *can't-live-without-that* jQuery feature.

If you can't live without jQuery - please review your code. I often see things like jQuery( 'DIV.myclass') and 3 lines below again the code (see http://stackoverflow.com/questions/4700097/jquery-improving-performance-code).

Everytime you do this a new jQuery object gets created keeping the matching elements. That cost memory and may result in memory leaks if you reference the collection over the whole lifetime of the page.

Don't do cross frame communication using IFRAME tunneling anymore - window.postMessage will help you out.

If you use one of the dozens of File Upload widgets out there - consider using HTML5 multiple file upload. Even upload progress notification is built into your browser (see W3C Spec and usage via jQuery)

If your javascript app is heavily based on javascript model search/manipulation, consider using lodash (or even underscore) - it saves you from writing the same model manipulation code again and again. Furthermore lodash can be downloaded in compiled versions optimized for different environments (for older browsers, modern browsers or even mobile browsers)

Especially for AngularJS users (like me :-) : You don't even need jQuery for AngularJS - it has a small builtin library doing most of the stuff more or less equal to jQuery.

If you depend on tracking CSS3 animations you can do that without any library using CSS animation events

It's a nice and heavy used feature of jQuery to attach javascipt data to DOM elements - that's also possible using plain Javascript and HTML ! DOM Element dataset feaure lets your declare data via data-* attributes and you can acces them using the DOM Element dataset API. To be fair, jQuery can do a lot more using it's jQuery.data API - but it has its cost :-)

CSS class / style manipulation is probably one of the most used part's of jQuery, but both can be easily done without jQuery.

After reviewing your code you may realize that you can remove jQuery from the list of requirements of your page. Not only that the built-in browser functions are mostly faster - jQuery is also never needed to be load and so your page speed will improve again.

Superspeed your angularjs apps

2013-08-20T18:33:00.003+02:00

AngularJS renders HTML incredibly fast.

But when rendering large DOM trees like containing tables with sort able columns, filtering and stuff ... it might get slower than you want ...

While working on Orangevolt Ampere (which is heavily based on AngularJS) I realized a few remarkable performance tricks.

The hints detailed in this article can improve AngularJS pages rendering up to 1000% and more - no kidding !

Performance is actually not a AngularJS problem - it's YOUR code. Let me explain you why:

If you read the excellent answer over at Stackoverflow: Databinding in angularjs then you might noticed that AngularJS compares the last rendered data with the current datamodel whenever $apply was called to evaluate which parts of the DOM must be updated.

That's - simply said - the whole magic behind AngularJS.

With that knowledge you may guess the answers to the following questions:

What happens when a INPUT element with attached ng-model changes its values during user input ?
Is a ng-repeat directive and any other directive querying your model/controller data executed when the INPUT with attached ng-model changes its value ?

And yes, you are right : AngularJS needs to reevaluate the rendered data with the current data to evaluate whats changed and to be updated.

The example below is a very simple angular page using some common features of AngularJS like ng-model, ng-repeat and so on.

The example renders a list of items and provides a form to add new items. the items gets rendered by ordering them by label or value. Nothing spectacular but common to what people do with AngularJS.

Where are the bottlenecks ?

If you open the jsFiddle example in a new browser window with opened Javascript console you will see that function getEntries() will be called 2 times. But ist just a single reference to getEntries in the template, correct ? The reason is that AngularJS renders the page and then checks if the rendered data was changed while rendering (Remember, your data model may change while rendering : see ng-init).
Whenever you type in some data in the label/value INPUT fields AngularJS will again check if the rendered data was changed.
If you change the item order, AngularJS will again check if the rendered data was changed.

Suppose you have not just 4 items rendered but a table with - let's say, 40 rows and 4 columns - huuh, that will slow down your web page performance ... everytime you enter something in the form the getEntries() function will called and the returned array will be sorted depending on the sort order ...

The solution

Cool down, thats no problem : We can improve AngularJS performance massively by using a few handy improvements.

The single point slowing down performance is the repeated call to getEntries() and the orderBy filter.

The solution to our problem is simple : We can cache the ordered entries !

To not reinvent the wheel we take the exceptional excellent lodash library to help us implement caching. lodash is used to

order items using _.sortBy instead of the AngularJS orderBy filter
cache the resulting sorted item list using _.memoize.

_.memoize returns a function calling our closure function only once (per cache key, read below about cache key) and will return the cached result of the closure call for all further calls.

The first argument of _.memoize is our improved getEntry function. The second argument is used to tell _.memoize the cache key to use.
So _.memoize can be used to cache multiple results depending on the given cache key. We provide the sort order as cache key so that both items-ordered-by-label and items-ordered-by-value are cached.

But what happens when our item list changes ? We need to clear the cached results to enforce calling our closure again.
Fortunately _.memoize supports accessing the cached result using property cache (see https://github.com/bestiejs/lodash/issues/330#issuecomment-22875052) at the function returned by _.memoize.
By applying a empty object to the cache property of our getEntry function (see function add) we simply cleaned up the cache.

Now open the optimized example in jsFiddle and have a look at the Javascript console. Our closure function is only called initially and when the entries list changed : Goal reached.

With that simple hints in mind you can speedup almost any AngularJS app !

Last performance hint : If you use AngularJS filter for filtering item lists using an INPUT element edited by the user, then Debounce/Throttle AngularJS model updates will make your day !

Debounced / throttled model updates for angularjs

2013-08-15T17:21:00.000+02:00

After googling around for a throttle/debounce solution of updating an angular model i hacked together a very easy solution seamlessy integrating into angularjs.

Its basically a small piece of code consisting of a single angular directive named "ng-ampere-debounce" utilizing http://benalman.com/projects/jquery-throttle-debounce-plugin/ which can be attached to any dom element. The directive reorders the attached event handlers so that it can control when to throttle events.

You can use it for throttling/debouncing
* model angular updates
* angular event handler ng-[event]
* jquery event handlers

Have a look : http://jsfiddle.net/lgersman/vPsGb/3/

The directive will be part of the Orangevolt Ampere framework (https://github.com/lgersman/jquery.orangevolt-ampere).

SQL : Managing items with a custom order column

2013-06-14T14:24:00.002+02:00

The day will come when you need to manage your relational database items with an custom order.

Suppose you have a table with bookmarks and want to ge them reordered.

The UI part can be managed by a web application using drag'n drop. But the database part can be tricky.

Our database schema looks liks this :

CREATE TABLE bookmarks (
  id serial primary key, 
  url varchar(255), 
  title varchar(255),
  position int default 0
);

Now we add a a few test data :

INSERT INTO bookmarks (url, title) VALUES
  ( 'https://github.com/lgersman', 'Github page of Lars Gersmann'),
  ( 'http://orangevol.t.blogspot.com', 'Orangevolt developer notebook'),
  ( 'https://github.com/lgersman/jquery.orangevolt-ampere', 'Orangevolt Ampere'),
  ( 'http://www.orangevolt.com', 'Orangevolt')
;

If we select the data it will be returned in a database dependent order (most likely the insert order) because or position column has everywhere the same value 0 :

SELECT * FROM bookmarks ORDER BY position ASC;

ID	...     TITLE	                        POSITION
1	        Github page of Lars Gersmann	0
2	        Orangevolt developer notebook	0
3	        Orangevolt Ampere	        0
4	        Orangevolt	                0

If you want to force that an insert just inserted will appear as first item you insert it like this:

INSERT INTO bookmarks (url, title, position) VALUES
  ( 'http://www.github.com', 'Github', (SELECT MIN( position)-1 from bookmarks))
;

Now the tricky part : How do we achieve reordering ?

At first we need to ensure that every item has a unique position. Because we never know if new items where added in the mean time it may happen that some items may have position 0.

We can achieve this by normalizing the position column of every item using the following sub select returning the items plus a column with a unique new position (column rn) :

SELECT id, -(row_number() OVER (ORDER BY POSITION DESC)) AS rn FROM bookmarks;

Now we use this statement in the update clause to apply the new computed position column to our data :

UPDATE bookmarks
  SET POSITION=t.rn 
    FROM 
      (SELECT 
       id, -(row_number() OVER (ORDER BY POSITION DESC))*2 AS rn 
       FROM bookmarks
      ) t 
WHERE bookmarks.id=t.id;

If we repeat our select query again we will see our items have the same order as before but a unique normalized position column value :

ID	...     TITLE	                        POSITION
1	        Github page of Lars Gersmann	-8
2	        Orangevolt developer notebook	-6
3	        Orangevolt Ampere	        -4
4	        Orangevolt	                -2

You may ask why the hell the numbers are incremented by 2 ?

- The answer is simple : we need space before and after every item to be able to move the dragged item to.

Now we want to move item #4 to the beginning (i.e. position of item #1) :

UPDATE bookmarks 
  SET position = 
    (SELECT DISTINCT position from bookmarks where id=4) + (t.to-t.from)/abs(t.to-t.from) FROM 
      (SELECT 
        (SELECT DISTINCT position FROM bookmarks WHERE id=1) AS from, 
        (SELECT DISTINCT position FROM bookmarks WHERE id=4) AS to 
      ) t 
  WHERE id=1;

If we do again our select to retrieve the items ordered we get

ID	...     TITLE	                        POSITION
4	        Orangevolt	                -9

1	        Github page of Lars Gersmann	-8

2	        Orangevolt developer notebook	-6
3	        Orangevolt Ampere	        -4

You can move items up or down in any direction you want by just combining both normalization statement and update statement.

Have fun,

Lars

D3.js - How to create a state machine editor using b spline connectors

2013-04-29T15:54:00.000+02:00

This is the follow up to D3.js - How to create a simple state machine editor where we've learned how to select nodes within a d3.js context.

nodes

double click on a node to remove it

connection lines are splines !!

drawn as cardinal splines (https://github.com/mbostock/d3/wiki/SVG-Shapes)
can be selected by single click it
will be highlighted while hovering
can be made curvy by adding connection points :
- connection points can be added by pressing CTRL + double click somewhere on a connection line
- remove a connection point by pressing CTRL + double click on a existing connection point
- move a connection point by dragging the connection point
remove a connection be double click on it

drag selection

if both end nodes of a connection selected, the connection including its connection points will also be dragged

Please note that this examples are for illustration purposes only.

See it live here : http://bl.ocks.org/lgersman/5370827

GIST : https://gist.github.com/lgersman/5370827

Here is the code :

Loading ....

D3.js - How to create a simple state machine editor

2013-04-12T10:56:00.001+02:00

This is the follow up to D3.js - How to select/drag nodes using an selection frame where we've learned how to select nodes within a d3.js context.

This version of the continued example features the following changes:

Double click somewhere in the d3.js context creates a new state
Connect nodes. Click on the outer border of a state and drag the mouse into another state will create a connection line

Please note that this examples are for illustration purposes only.

See it live here : http://bl.ocks.org/lgersman/5311202

GIST : https://gist.github.com/lgersman/5311202

Here is the code :

Loading ....

update d3.js data using enter/exit with complex data objects

2013-04-08T17:07:00.000+02:00

If you use d3.js and work with it's fascinating data binding using enter()/exit() you may once at the stage where I was :

When I removed items from the data array and set them new via d3.js data() function the wrong item was removed from the svg canvas !!

The solution for this issue is to know the data() function in detail. If you read the examples (which work all fine !) they use atomar js objects (string/integer etc) as data items.

If you use complex js objects ({}) you should provide the identity function as second argument.

If not the default will be used which is index based. So if you remove an data item somewhere in your data array it will do the wrong. To fix this you simply provide this function :

selection.data( data, function( d) {
return data.indexOf( d);
});

and everything will be fine !!!!

D3.js - How to select/drag nodes using an selection frame

2013-04-08T16:42:00.000+02:00

As announced in my previous post I will extend the selection frame example to a state machine editor.

Here is part 2.

The following features are added:

circles are draggable
circles can be selected (multiple selections possible by pressing CTRL while clicking a circle)
the selection frame selects all circles within the frame (by pressing CTRL the selected circles will be appended to current selection)
multiple selected circles will be dragged simultaneous

Please note that this examples are for illustration purposes only.

See it live here : http://bl.ocks.org/lgersman/5311083

GIST : https://gist.github.com/lgersman/5311083

Here is the code :

Loading ....

D3.js - How to build a editor selection frame

2013-04-04T17:50:00.003+02:00

Last time I am playing around with D3.js for creating a state diagram editor. This will be the first issue of my lessons learned while using D3.js.

About D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3.js helps you bring data to life using HTML, SVG and CSS. D3's emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

How to build a editor selection frame

One thing i never found on the web was how to create a wire frame selection rectangle to select objects.

See it live here : http://bl.ocks.org/lgersman/5310854

GIST : https://gist.github.com/lgersman/5310854

Here is the code :

Loading ....

Node.js/Express/Connect : How to catch "Address in use" exception

2013-02-15T08:14:00.001+01:00

When you want to track programmatically if your Node.js Express http server was not started because the port is already in use you can do it the following way :

var express = require('express'), http = require('http');

// configure your Expreess app
// ...

http.createServer( app).listen( PORT, function(){
console.log("server listening on port " + PORT);
})
.on( 'error', function (e) {
if (e.code == 'EADDRINUSE') {
console.log('Address in use');
}
});

Checkinstall : Build debian packages in seconds

2013-01-04T15:37:00.003+01:00

While looking for an easy way to build a debian package for node.js I just stumbled across Checkinstall.

Checkinstall makes building a Debian package out of TGZ archive a breeze !
And not only that - it supports several other target package formats like RPM too.

Here is the receipt for node.js as an example :

Install build prerequisites if not yet installed

aptitude install git-core curl build-essential openssl libssl-dev python pkg-config checkinstall

Fetch the latest node.js source archive

wget -N http://nodejs.org/dist/node-latest.tar.gz

Extract the archive

tar -xzf node-latest.tar.gz -C .

In order to get Checkinstall working fine you need to rename the untarred node.js to be [name]-[version] (depending of the node version you've downloaded this line may differ) and go into the directory

mv node-v0.8.16/ node-0.8.16/ && cd node-0.8.16/

And now the bummer : All you have to do to get a Debian package built for node.js is to execute

./configure && make && sudo checkinstall --install=no

(--install=no tells Checkinstall to just create the debian archive without installing it. Without this option the created debian package will be immediately installed)

Checkinstall will ask you a few questions about package maintainer and stuff and after all you will get a debian package node_0.8.16-1_i386.deb.

The only thing left is to install the package by executing :

dpkg -i node_0.8.16-1_i386.deb

Was that easy ??

OH Y.E.S. !

PS: You should use this mechanism for packages of your development system but never for production systems because the package was never fully tested for this configuration ... Anyway, for fast forward development it's a perfect tool !!

How to access the app instance from the request in a Nodes.js / Express module

2013-01-04T10:46:00.002+01:00

When I started with Express development I had often the problem that I need to access the app instance for getting configuration data.

Today I found the simple solution I missed the last weeks : the app instance is always available as a property on the request object in Express !

So you can easily access it like this:

exports.list = function( req, res) {
var user_basedir = path.join( req.app.get( 'var'), 'preferences/users');

...

Every day serves new knowledge.

8 ways to query json structures

2012-12-06T09:43:00.001+01:00

Do you get bored by complex JSON structure traversing to find just a bunch of matching entries ?

Here are 8 different ways to do it :

JsonSQL

JsonSQL implements SQL select statements over json structures.

Example:

jsonsql.query("select * from json.channel.items order by title desc",json);

Homepage: http://www.trentrichardson.com/jsonsql/

JSONPath

JSONPath is like XPath for JSON structures.

Example :

jsonPath( books, '$..book[(@.length-1)]')

Homepage: http://goessner.net/articles/JsonPath/

jfunk

jFunk will allow you to retrieve (and soon, manipulate) objects within complex JSON or Javascript objects. The design of the jFunk API will closely parallel the jQuery API, replicating it exactly except where the differences between DOM and Javascript make replication nonsensical

Example:

Jf("> vegetables > *[color=Orange]",Food).get();

Homepage: http://code.google.com/p/jfunk/

TaffyDB

How you ever noticed how JavaScript object literals look a lot like records? And that if you wrap a group of them up in an array you have something that looks a lot like a database table? TaffyDB is a libary to bring powerful database funtionality to that concept and rapidly improve the way you work with data inside of JavaScript.

var kelly = friends({id:2}).first();

Homepage: http://www.taffydb.com/

linq.js

linq.js - LINQ for JavaScript

var queryResult2 = Enumerable.From(jsonArray)
    .Where("$.user.id < 200")
    .OrderBy("$.user.screen_name")
    .Select("$.user.screen_name + ':' + $.text")
    .ToArray();

Homepage: http://linqjs.codeplex.com/

Homepage: http://neue.cc/reference.htm

objeq

objeq is a simple library that allows POJSO's (Plain-Old JavaScript Objects) to be queried in real-time.

var res = $objeq(data, "age > 40 && gender == 'female' -> name");
// --> Returns ['Jessica']

Homepage: https://github.com/agilosoftware/objeq

json:select()

CSS-like selectors for JSON.

.lang:val("Bulgarian") ~ .level

Homepage: http://jsonselect.org/#tryit

Javascript Array Filtering from Paul's Programming Pearls

var a = [1,2,3,4,5,6,7,8,9,10];

    // return everything

    a.where( "( ) => true" ) ;

        --> [1,2,3,4,5,6,7,8,9,10]

    // return even numbers

    a.where( "( n, i ) => n % 2 == 0" ) ;

        --> [2,4,6,8,10]

    // query first 6 products whose category begins with 'con' using extra param and regular expression

    products.where( "( el, i, res, param ) => res.length <= 6 && param.test( el.cat )", /^con/i);

    // using customer table data from SQL Server's northwind database...

    customers.where( "( el, i, res, param ) => el.country == param", "USA" );

Homepage: http://www.paulfree.com/28/javascript-array-filtering/#more-28

Javascript Array Filtering from Paul's Programming Pearls is currently my favorite - its extremely small footprint and blazing fast result speak for itself.

The idea behind is similar to John Resig's JavaScript Micro-Templating effort - a very simple piece of code transforming a string into a Javascript function utilizing Regexp power.

Yes, sure - there are more powerful solutions in the list. Paul's implementation prototype lacks syntax checking of the filter expression but I am sure you can handle javascript syntax checking by yourself.

At the end you must decide which one is best for your project.

GruntJS Tips & Tricks

2012-10-11T10:19:00.001+02:00

Today I will share a few tips & tricks when starting with GruntJS.

Due to my personal history I used to use ANT as my favorite build tool.

In the last years my development target moved more and more to web applications - so my build needs expanded to minimize/compact CSS/LessCss and Javascript/Coffeescript sources.

Using ANT you need to wrap the required tools in a ustom ANT task to be written in Java. Therefore I wrote my own ANT tasks for LessCss, Coffeescript and the Google Closure Compiler. Doing that requires you to utilize Rhino because most of these tools are written in Javascript.

So I thought there must be an easier way to o such things - and found GruntJS !

GruntJS is a build tool based on NodeJs providing a very light interface for doing builds. For everything not available by GruntJS itself you can create your own tasks.

My personal resume of working with GruntJS :

Its blazing fast (thanks to NodeJs), extensible and thanks to the GruntJS community you will find any kind of task you need. If you need a build system for anything web related (javascript/css/html) - GruntJS is the tool to choose !

So here is finally my list of tips & tricks:

Use GruntJS in combination with grunt-contrib. This node module provides the missing pieces (tasks like copy, clean, compress, coffee and less) when coding build files
Don't hesitate to "code" your tasks inside your projects grunt.js file - it's ok ! My main problem when coming from ANT was that I thought I "should" just use tasks and writing custom tasks inside the grunt.js file is "evil" - it's not !
Inspect grunt.js files from other projects to learn how to use it !
Code quality : read the JSHint page to learn the huge amount of options. I'm sure you need to adjust the JSHint task options of your GruntJS project file individuallly for your project.
Know your code : When using the GruntJS concat task you should be aware of the fact the UglifyJS is used to compress your javascript sources. That means you need to tell UglifyJS what Javascript function/variable names should be kept.

Take a look at the Orangevolt Ampere grunt.js file to start learning !

Solution : How to use gist / github hosted files in jsfiddle

2012-10-11T09:47:00.000+02:00

Remember Github hosts source files - GitHub is not a CDN, DON'T include files directly from them.

There are 2 workarounds:

copy the required files into the gh-pages branch - files hosted in this branch will be delivered with the correct mimetype.
tell jsfiddle that these files come from github. in this case jsfiddle will take care of the correct mimetype translation (read your http://doc.jsfiddle.net/use/gist_read.html)

https://github.com/jsfiddle/jsfiddle-docs-alpha/issues/95#issuecomment-9331320