Nerdpress.org » JS

Sending invalid Unicode via socket.io

Ivo Bathke — Wed, 16 Nov 2011 14:48:54 +0000

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!

[Symfony 2] AsseticBundle, Less CSS & YUI Compressor unter OSX installieren

Johannes Heinen — Thu, 25 Aug 2011 16:55:02 +0000

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:



    
        
        {% stylesheets
                '@NerdpressDemoBundle/Resources/public/css/main.css'
                '@NerdpressDemoBundle/Resources/public/css/layout.css'
        	filter='less,?yui_css'
                combine=true
        %}
          
        {% 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…

jquery pump effect

Ivo Bathke — Mon, 25 Jul 2011 16:02:25 +0000

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'});

Ajax Deeplinks mit jQuery Address

Ivo Bathke — Mon, 04 Apr 2011 12:49:38 +0000

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.

reload CSS in Firefox 4.0

Max Girkens — Wed, 23 Mar 2011 10:09:14 +0000

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!

Debuggin JSON mit JSON Views

Ivo Bathke — Wed, 17 Nov 2010 15:37:32 +0000

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!

Selenium functional tests mit PHPUnit

Max Girkens — Sun, 14 Nov 2010 15:03:14 +0000

PHPUnit hat coolerweise eine Extension für Selenium Tests.

Dafür braucht man noch den PHP Client für die Selenium Remote Control.

pear install Testing_Selenium-0.4.3

Bei mir auf Debian Lenny, bzw. Mac OSX musste ich noch den include_path dafür anpassen,
damit phpunit Testing/Selenium.php gefunden hat.

Damit kann man mit PHP komfortabel einen Selenium Test Server über die Selenium RC ansprechen,
der dann beliebige Browser für functional Tests benutzt.

Der Selenium Server ist auch im Prinzip schnell installiert
und lokal ist das ganze einigermaßen unproblematisch, weil man ja schon mal die Browser seines OS zur Verfügung hat.

In einem Continuous Integration Setup möchte man aber vielleicht Selenium lieber auf einem Web Server laufen lassen.

Da sieht es dann erstmal weniger gut aus mit Browser executables.
Was also tun?

Eine Möglichkeit ist saucelabs.com.
Die bieten “Cross browser testing with Selenium in the cloud” an.
Sogar gratis für Firefox unter Linux.
Für die anderen Browser und OS muss man dann schon auf einen bezahlten Account umsteigen.

Dann einfach den saucelabs Selenium Server mit oben erwähnter Extension aus PHPUnit ansprechen:

Das Example.php Script von saucelabs

require_once 'Testing/Selenium.php';
require_once 'PHPUnit/Framework/TestCase.php';

class Example extends PHPUnit_Framework_TestCase
{
    private $selenium;

    public function setUp()
    {
        $this->selenium = new Testing_Selenium(
            json_encode(array(
                "username" => "YOUR_USERNAME",
                "access-key" => "YOUR_ACCESS_KEY",
                "os" => "Windows 2003",
                "browser" => "firefox",
                "browser-version" => "3.6.",
                "name" => $this->getName()
            )),
            "http://saucelabs.com",
            "ondemand.saucelabs.com",
            80,
            90000);
        $this->selenium->start();
    }

    public function tearDown()
    {
        $this->selenium->stop();
    }

    public function testSauce()
    {
        $this->selenium->open("/");
        $this->assertEquals("Cross browser testing with Selenium - Sauce Labs",
                            $this->selenium->getTitle());
    }

}

und PHPUnit macht Selenium Tests:

phpunit Example.php

Cheat-Sheets für alle(s)

Johannes Heinen — Sun, 13 Jun 2010 13:26:01 +0000

Diesem Mann ist sicher nie langweilig: http://www.addedbytes.com/cheat-sheets/. Hinter diesem Link verbergen sich Cheat Sheets zum Selber-Ausdrucken für alles Denkbare.

Ajax (Fake) Push: Long Polling mit HTML 5 WebWorker

Johannes Heinen — Fri, 11 Jun 2010 11:28:23 +0000

Push-Mechanismen im Web sind mittlerweile weit verbreitet – die Anforderungen an die Infrastruktur aber recht hoch. Nichts geht ohne Plugins (Flash, Applet, WebSocket) – dann braucht man mindestens einen zweiten Server, der via persistenter Verbindung Nachrichten verteilt.

Bedient man sich herkömmlicher JavaScript-Technik, muss man mit aynchronen Ajax-Requests herumkaspern, sich mit Timeouts, Memory-Leaks und Cross-Domain-Sicherheitspolicen herumschlagen. Und auch hier kommt man nicht herum, den Server zu tweaken oder gleich einen zweiten aufzusetzen, der ausschließlich auf Polls oder Long-Polls trainiert ist.

Gerade in der PHP-Welt ist es nicht einfach, einen üblichen LAMP-Stack soweit zu bringen, dass so etwas auch unter Last funktioniert – Java ist da wie immer weiter und bietet mit JMS ein einheitliches Interface – da gibt es Software für den gewöhnlichen Servletcontainer, im Anwendungsserver muss das laut Spezifikation sogar im Lieferumfang enthalten sein.

Möchte man trotzdem mit “Bordmitteln” mal schnell eine Chatbox aufsetzen, führt Longpolling + Ajax eigentlich schnell zu einem akzeptablen Ergebnis – nichts für Millionen konkurrierende Zugriffe, aber immerhin eine nette Spielerei für zwischendurch. Wäre da nicht ständiges Warten auf die Response, das sich nach einiger Zeit einerseits mit einer merklichen Ruckelorgie bemerkbar macht oder gar den Mauszeiger in eine ewiglich drehende Sanduhr verwandelt.

HTML 5 to the rescue…

HTML 5 kann sogenannte Dedicated Worker – “echte” Workerthreads auf Betriebssystemebene, die man mit einer Zeile spawnen kann.

new Worker('meinScript.js')

Innerhalb eines Threads kann man lang laufende Rechenoperationen im Hintergrund verstecken – warum also nicht auch einen Ajax-Request? Allerdings haben diese Threads einen Nachteil: Aus Sicherheitsgründen laufen sie in einem klar abgegrenzten Scope, in dem sozusagen nichts vorhanden ist. Auch keine Referenz auf das document-Object der Elternseite. Das stoppt die meisten Javascript-Bibliotheken, wie bspw. JQuery. Man muss sich also mit Bordmitteln begnügen.

Eine Methode, die einen Worker initialisiert, könnte so aussehen:

    _initializeLongPoll: function()
    {
      var messenger = this;

      var worker = new Worker('my-ajax-worker.js');
        worker.onmessage = function(event)
        {
          var json = jQuery.parseJSON(event.data);

          // NEUE CHAT-NACHRICHT ERZEUGEN
          messenger.$_list.append($(''
            + '' + json.author + ''
            + '' + json.text + ''));
        };
    }

“my-ajax-worker.js” ist ausschließlich für den Ajax-Request zuständig. Hier wird ein dynamisches Javascript in einem Symfony-Projekt generiert:


    var onLoad = function()
    {
      var output = httpRequest.responseText;
      if (output) {

        // DELEGIERT DIE RESPONSE ZURÜCK.
        postMessage(output.trim());

        // ERZEUGE NEUEN XmlHttpRequest
        httpRequest = initRequest();
      }
    };

    // WIR SPAREN UND DEN X-BROWSER XmlHttpRequest-KRAM
    var httpRequest = initRequest();

Details zum serverseitigen Script möchte ich an dieser Stelle vernachlässigen, im Grunde funktioniert es folgendermaßen: Es arbeitet so lange, bis eine Änderung festzustellen ist. Erst bei Änderung wird die Response an den Client ausgeliefert (darum heißt es “Long-Polling”, weil ein Request ganz schön lange dauern kann):

while(true)
{
  if(newData())
  {
    return getNewData()
  }
  sleep(5);
}

Der Kram funktioniert natürlich nur in HTML5-Browsern, die das Worker-Objekt unterstützen. Dazu zählen Firefox 3.6, Google Chrome und natürlich Safari. Ob Opera es beherrscht, weiß ich nicht, ob der IE 8 es beherrscht, bezweifle ich. Aber wie gesagt: Es ist nur eine Spielerei und keine produktiv geeignete Anwendung. Demnächst schau ich mir auch mal die WebSocket API an…

Known Issues

Vorsicht mit session_start() und konkurrierenden (asynchronen) HTTP-Zugriffen. Im User-Sessionscope wird der Apache immer auf das Schließen einer Session warten, bis er dem nächsten Request erlaubt, die Session wieder “aufzunehmen”. Und im Normalfall dauert eine User-Session genau so lange wie die Request-Lifetime. Das führt dazu, dass bei 4 gleichzeitig abgefeuerten XmlHttpRequests diese trotzdem als Stack nach dem FIFO-Prinzip abgehandelt werden. Man verliert somit den Vorteil der Asynchronität. Es ist also zwingend erforderlich, die Session bereits vor dem Long-Poll-Loop abzuschließen (durch den Aufruf von session_write_close();

[Jquery]Namespaces via CSS-Selector adressieren

Johannes Heinen — Thu, 29 Apr 2010 21:38:59 +0000

Vielleicht braucht es mal jemand, jedenfalls lassen sich “genamespacete” Tags in einer DOM (XML)document Instanz recht einfach mittels \: als Separator adressieren. Ein Beispiel: Ich möchte ein Dublin-Core Metadatum aus einem beliebigen Feed lesen:

(function($) {

  $('item').each(function() { $(arguments[1]).find('dc\:creator').[...]() } );

})(jQuery);

Dies entspricht wohl rein syntaktisch nicht ganz dem entsprechendem CSS3-Proposal (einzusehen unter http://www.w3.org/TR/css3-selectors/#typenmsp). Ich habe beide Möglichkeiten interessehalber auch einmal in einem aktuellen FF3.6 und Chromium getestet:



  Hanswurst liebt käse

Ergebnis: Naja, klappt nicht. Eventuell hat jemand eine Idee oder kann mich korrigieren?