In the last days, i was trying to find a solution hosting multiple Express apps on my vServer the same Server.

Starting with Apache and mod_proxy, i ended up with a plain node solution, which i really like.

Let’s take a quick look on some different approaches out there:

—1—

Using apache on port 80 as a proxy

ProxyPass /nodeurls/ http://localhost:9000/
ProxyPassReverse /nodeurls/ http://localhost:9000/

via stackoverflow

– no websockets
++ probably the easiest way to integrate with your running AMPP-stack

—2—

Using a node.js app on port 80 as a Wrapper for other node apps.

express.createServer()
  .use(express.vhost('hostname1.com', require('/path/to/hostname1').app)
  .use(express.vhost('hostname2.com', require('/path/to/hostname2').app)
.listen(80)

via stackoverflow

++ you can use websockets on port 80
– apps crash/restart/stop globally
–what about your apache or the like?

—3—

Using node.js with node-http-proxy on port 80

var http = require('http')
, httpProxy = require('http-proxy');

httpProxy.createServer({
  hostnameOnly: true,
  router: {
    //web-development.cc
    'www.my-domain.com': '127.0.0.1:3001',
    'www.my-other-domain.de' : '127.0.0.1:3002'
  }
}).listen(80);

++ proxy websockets to any port
– you might need to move your old web server to another port

The really cool thing about using node-http-proxy is its capability of proxying websockets.
So you can have your apps running independtly on different ports while serving everything to the user over port 80 and use stuff like socket.io.

Since i’m new to node.js and miles away from beeing a admin, any feedback is highly appreciated :)

I might be a bit late (yeaikno it exist over a year now and a bunch of blogs had it covered) but nevertheless i would like to point out a very helpful online tool i recently ran into:

jsPerf

Its basically a online benchmark tool for testing different approaches in javascript.
It covers some important aspects of benchmarking, that your homemade bench probably wont have like milliseconds accuracy & statistical analysis.
The tests are run on your browser and the results will feed the “browserscope”. A graph of the “highest known results” for the participating browsers.
So we can see some kind of comparison.

Almost all classic concurrent approaches are covered, my favorites are:

String concatenation

JavaScript Template Engines, in this revision its: juicer, mustache, ejohn, kissy, nTenjin
( yes it has revisions :) )

switchClass OR removeClass and addClass

fastest jQuery selectors to remove class

See if you can find some, you struggled with lately:
http://jsperf.com/browse

JsPerf has some further interesting options like
autorun
append #run to the URL of the test case

filters for the browserscope
filters are: popular, all, desktop, family, major, minor, mobile, prerelease

chart types of browserscope
append #chart=table to the test case’s URL
types are: bar(default), table, column, line, and pie

Give it a try, daily!

I recently started digging into node.js and the express framework.
One thing i like about it is that it comes with the beautiful jade template engine by default.

Here are some things that come real hany when you are working with jade.

This one really saved my mental health in more than one case.
Just paste your HTML and you get nice and clean jade code:

http://html2jade.aaron-powell.com/

If you are using Netbeans, make sure you don’t miss to install the beautifully working plugin for .jade files.

https://github.com/lumenlunae/jade-netbeans-syntax-highlighting

If you are developing in PHP and want to check out jade anyway, check this out:

No seriously, check THIS:

https://github.com/everzet/jade.php

…for some reason i needed to get t h i s to work before going to sleep.

I’m running OSX 10.7.3 with macports which usually does the job, but  Google’s V8 Javascript Engine is not available as a port yet.

So… homebrew to the rescue:

installed it:

/usr/bin/ruby -e "$(/usr/bin/curl -fsSL https://raw.github.com/gist/323731)"

and installed v8

brew install v8

wait, this seems too easy.

PECL installed some beta version of the PHP extension.

sudo pecl install channel://pecl.php.net/v8js-0.1.2

added

extension=v8js.so

to the php.ini file.

und bitteschön:

$v8 = new V8Js();
var_dump($v8->executeString("

//hey i'm Javascript Code

//INSIDE PHP !

//wow.
var hello = 'Hallo';

function helloWorld( string ){
return hello + ' ' + string;
}

helloWorld('World');

"));

Such things might come in handy one day, you know.

Well you can try to, but it will end up almost probably in an disconnect which is caused by the browser.
As i have learned here.

Given you have a string which contains invalid unicode like:

This will trouble the browser and the socket connection.

If you prepare your json with PHP and  json_encode the Unicode will be escaped to some strings like these:

\ud83d\ude31\ud83d\ude31\ud83d\ude04\ud83d\ude04\ud83d\udc9c\ud83d\udc9c\ud83d\udc4a

But on clientside it will still result in invalid Unicode.

So after a lot of recherche i found this and used the decodeUnicodeString function from Zend to convert the escaped Unicode characters again to their unescaped representation. (dont forget the replacement as described in the post at stackoverflow if you extract it from Zend)
If the character is invalid it will be replaced by a question mark ‘?’.
This is at least what i asume.
The ? went through fine and the socket connection stays alive.

Ok the downside is you loose weird signs for an ‘?’, but i can live with that.
But im not really convinced with that solution, so if anybody knows another way to detect invalid Unicode sequences, let me know!

Das AsseticBundle ist ein Wrapper um Assetic, ein geniales Tool, um statische Assets für Webprojekte zu verwalten. AsseticBundle ist extrem einfach zu verwenden, einfach die entsprechende Filter-Chain via yaml konfigurieren, um mehr muss man sich nicht kümmern. Natürlich allerdings müssen die zugrundeliegenden Abhängigkeiten im Vorfeld installiert sein. In unserem Falle benötigen wir den Yui-Compressor als jar-File und Less CSS. Less ist ein node.js Modul, was bedingt, dass wir zuvor node.js installieren müssen.

Also node.js via macports holen:

$ sudo port install nodejs

Und den node.js-eigenen Package-Manager:

$ sudo port install npm

Mit diesem installieren wir als nächsts less, und zwar “global” (via -g)-Flag (“global” bedeutet, dass das Modul unter $nodejs_lib_path/../node_modules abgelegt wird, ansonsten wird es im aktuellen Arbeitsverzeichnis unter ./node_modules installiert):

$ sudo npm install -g less

Damit haben wir alles, um unsere less CSS Stylesheets kompilieren zu können.

Als nächstes holen wir uns den Yui-Kompressor, diesen habe ich mir einfach aus dem Netz gezogen und unter app/java/yuicompressor-2.4.6.jar abgelegt (Die Binary findet ihr unter http://developer.yahoo.com/yui/compressor/).

Nun die Konfiguration:

app/config.yml:

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~
        less:
          node: /opt/local/bin/node
          node_paths: [/opt/local/lib/node, /opt/local/lib/node_modules]
        yui_css:
          jar: %kernel.root_dir%/java/yuicompressor-2.4.6.jar

Zu beachten sind die “node_paths”. Der node.js-Modulpfad muss explizit angegeben werden, sonst kann node.js die require()-Statements nicht auflösen (das sind sozusagen die node.js-”Classpaths”). /opt/local/lib/node zeigt auf Core-Module, in /opt/local/lib/node_modules liegt unser less.

Um den Yui-Kompressor zu aktivieren, reicht der simple Pfad zur .jar-Datei.

Nun müssen wir nur noch unser Twig-Layout anpassen:

src/Nerdpress/DemoBundle/Resources/views/layout.html.twig:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        {% stylesheets
                '@NerdpressDemoBundle/Resources/public/css/main.css'
                '@NerdpressDemoBundle/Resources/public/css/layout.css'
        	filter='less,?yui_css'
                combine=true
        %}
          <link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="all" />
        {% endstylesheets %}

Das “?” vor dem Filter “yui_css” bedingt, dass die CSS-Compression nur angeschaltet wird, wenn der Debug-Parameter auf false steht. “Combine” bedeutet, dass alle CSS-Dateien in einer einzigen, großen Datei zusammengefügt werden, und “less” bedeutet letztlich, dass alle CSS-Dateien mittels less CSS precompiled werden.

That´s it. Die Seite im Browser öffnen und das Ergebnis bewundern. Viel Spaß! Symfony ist schon was feines…

some new loader effect?
this is a small jquery plugin that renders something like a pump or glow effect by switching two css classes with jquery UI transitions in an endless loop.
the loop can be stopped by applying a stop class to the element.

watch the demo on this almost autogenerated github page:
Demo

Usage is like this:

 $('.status').pump({normal: 'normal',
                    pump: 'pumpup',
                    interval: 400,
                    stop: 'statusDone'});

Aus der Reihe: feine jQuery Plugins, um nicht zu sagen essentielle jQuery Plugins, heute:
jQuery Address

Damit kann man sehr einfach Deeplinks in Ajax getriebenen Seiten realisieren.

So lassen sich zum Beispiel verschiedene Zustände in einer Ajax Seite navigierbar machen, wie zum Beispiel einzelne Tabs via Link öffnen oder auch Akkordion Zustände.
Oder man kann Ajax Bereiche SEO technisch erfassbar machen.

Das Plugin nutzt auch die HTML5 History API, damit werden Ajax Zustände in die Browser History geschrieben, womit sich der Zurück Button dann auch damit nutzen läßt ohne die Seite neu laden zu müssen.
Auch kann man einfach die Url im Address Bar ändern.

Am besten schaut man sich mal die Beispiele auf der Demo Seite an.

Tolle Sache.

Firefox 4 ist ja nun draussen:
http://www.mozilla-europe.org/de/

Die Addons Firebug und der JSON Viewer sind ja zum Glück auch schon kompatibel.
Mein anderes Lieblingsaddon, der CSS reloader leider noch nicht.

Coolerweise gibt es aber dieses Bookmarklet:
http://david.dojotoolkit.org/recss.html
dass genau das tut.
Supersache!

Wer kennt das nicht: man entwickelt mit JSON, will die AJAX Rückgabe kontrollieren und macht, wie gewohnt, im Firefox den Firebug auf und checkt unter Console den AJAX Request und sieht folgendes:

Nicht sehr erhellend! Total unübersichtlich! Nicht gut!

Wird JSON mit dem richtigen Header ausgeliefert, unter PHP geht der so:

header('Content-type: application/json');

Dann kann man ein feines Feature von Firebug nutzen:
den JSON View, dieser versteckt sich unter der Response als JSON Tab.

Ja schon besser! Aber, ich wiederhole, nur mit dem richtigen Header, mit text/html o.ä. ist dieser Tab nicht zu sehen.

Nun gut, trotzdem ein bißchen eng da alles in der FireBug Hülle.
Ich mach ja ganz gerne den Ajax Call in einem neuen Tab auf, um zu sehen ob alles drin ist.
Dann empfiehlt sich ein Firefox AddOn: JSONView

Dies rendered das JSON schön im Firefox, wenn , Ihr habts erraten, der Header stimmt: application/json !

So ist gut!