nein, ich möchte keine Kooperation haben. Weder bezahlt, noch unbezahlt. Ich werde keine Artikel schreiben, egal für welches neue Portal. Auch möchte ich keine Werbung schalten oder andere SEO-Maßnahmen eurerseits unterstützen. Zum einen ist die Reichweite meines Blogs sehr gering und zum anderen, viel wichtigerem Teil, gehen mir solche Anfragen und SEO-Maßnahmen tierisch auf den Geist!

Ich werde weiterhin auf derartige Mails NICHT reagieren, auch wenn ihr ganz lieb follow-up Mails schreibt. Nutzt diese Zeit um gute Inhalte zu generieren, dann klappt’s auch mit Google.

Gruß
Carsten!

Mit dem Geeksphone Keon und Peak existieren nun auch zwei “echte” Telefone, die Firefox OS verwenden. Diese Telefone verstehen sich als Developer Preview und nicht als Alltagstelefon.

Heute brachte mir der nette UPS-Mann mein Geeksphone Keon. Erster Eindruck: Solide und trotz extrem günstigem Preis (ich habe 127,-Euro bezahlt) erstaunlich gut verarbeitet. Firefox OS ist intuitiv zu bedienen. Bisher habe ich nur mit den Apps und dem Marketplace herumgespielt. Den eigentlich interessanten Teil werde ich erst die Tage genauer betrachten können: App-Entwicklung unter Verwendung der Web-APIs. Falls ich dazu komme, werde ich hier darüber berichten. Ich hoffe sehr, dass Mozilla es im Gegensatz zu Palm (HP) schafft, eine solche Plattform salonfähig zu machen, zumal ich den Ansatz günstige Smartphones zu ermöglichen, sehr clever finde, denn nicht jeder kann sich ein Telefon für >600,-Euro leisten.

Wie immer (grob geschätzt) ca. 1000 Fragen und Antworten bei Stackoverflow. Viele Diskussionen über IE6-Support etc. Aber was, wenn man moderne Browser unterstützen will und keine alten Dinosaurier?

MDN schlägt folgendes vor:

document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        initApplication();
    }
}

Für meine Zwecke, und viele Browser ausreichend. Wer es etwas kompatibler möchte, kann die leichtgewichtige Bibliothek domready benutzen.

Für meine Zwecke ist die MDN-Lösung ausreichend. Kennt jemand Alternativen?

What’s The Point Of Promises?
You’re Missing the Point of Promises
Asynchronous Programming in JavaScript with “Promises”
Deferreds and Promises in JavaScript

Und da heutzutage nichts ohne Spezifikation geht:

Promises/A+

Wenn ihr damit durch seid, wisst ihr warum Callbacks plötzlich nicht mehr cool sind. Ich bin noch am lesen…

Ich gehe hier schamlos davon aus, dass Grunt als Build-Tool benutzt wird, falls nicht, auf gruntjs.com lernt ihr es kennen und hoffentlich auch lieben. Der vorgestellt Task ist nicht in Stein gemeißelt, funktioniert aber für uns sehr gut.

Damit wir jQuery selber bauen können, benötigen wir einen Clone aus dem offiziellen GitHub-Repository. Da ich nicht sehr experimentierfreudig bin, hole ich mir den aktuellen stable branch.

$ git clone -b 1.9-stable git@github.com:jquery/jquery.git

jQuery wird mit Grunt gebaut und bietet eine sehr komfortable Möglichkeit eine eigene Version zu bauen. Das geschieht über

$ grunt custom:-deprecated,-ajax,...

Das werden wir nutzen um unsere Version im eigenen Build zu erstellen. Also erstellen wir ein Gruntfile.js und konfigurieren es nach unseren Wünschen. Dazu benötigen wir einen Task, der jQuery baut. Den nennen wir jquery. Um bauen zu können, müssen npm module per npm install im jquery Verzeichnis installiert werden. Außerdem müssen die Submodules, die jQuery nutzt, initialisiert werden und die Selector-Engine vorab gebaut werden. Mit diesem Vorwissen können wir den Grunt-Task aufbauen.

grunt.registerTask('jquery', 'Build our own jquery', function () {
 
    var jquery = function () {
 
    	grunt.log.write("Build jquery.");
 
        grunt.util.spawn({
 
            grunt: true,
 
            args: [
                "update_submodules", // initialize jqueries submodules
                "selector",          // build selector engine
                // Build custom jquery with our needs!
                "custom:-deprecated,-dimensions,-effects,-event-alias,-offset,-sizzle"
            ]
        }, function (error, result, code) {
 
            if (error) {
                grunt.fail.fatal(error);
            }
 
            grunt.util.spawn({
                grunt: true,
                args: "dist:../myjquery/"  // Copy our build to ../myjquery/
            }, function (error, result, code) {
 
                if (error) {
                    grunt.fail.fatal(error);
                }
 
                grunt.file.setBase("..");
                grunt.log.write("Built custom jQuery successfully!");
                done();
            });
        });
    };
 
    var done = this.async();
    grunt.file.setBase("jquery"); 	// cd to jquery submodule
 
    if (!grunt.file.exists("node_modules")) {  // check if npm install has been run in jquery
 
    	grunt.log.write("Initialize npm modules for jquery");
 
        grunt.util.spawn({
                cmd: "npm",				// Init all npm modules.
                args: ["install"]
            }, function (error, result, code) {
 
                if (error) {
                    grunt.fail.fatal(error);
                }
 
                jquery();	// execute our build-task
            });
    } else {
        jquery();	// npm has already been run, go and build our jquery!
    }
 
});

Was passiert hier? Eigentlich ganz einfach. Wir wechseln in das jquery Verzeichnis, prüfen ob alle npm-Module installiert sind und führen das bei Bedarf aus. Anschließend rufen wir die Funktion jquery() auf. Hier wird der Grunt-Task mit den Parametern update_submodules, selector und der eigentlichen Konfiguration unseres jQuery-Builds aufgerufen: custom:-deprecated,-dimensions,-effects,-event-alias,-offset,-sizzle. Ist das durch, müssen wir die eigens erstelle Distribution noch mit dem von jQuery bereitgestelltem dist:../myjquery/-Task in das gewünschte Ziel-Verzeichnis kopieren.

Tadaaa! Ein beherztes grunt jquery erstellt eine eigene jQuery-Version mit den wirklich benötigten Modulen.

Besonders freut es mich, dass ich zwei neue Services kennenlernen durfte, die ein wirklicher Nutzen in der Softwareentwicklung bringen.

Zum einen ist das New Relic, das Server- und Application-Monitoring auf ein für mich neues Level hebt. Das muss ich mir definitiv näher anschauen. Jan Piotrowski hat an Live-Games von Gameforge eindrucksvoll die Leistungsfähigkeit von New Relic bewiesen und ein Problem bis auf Datenbank und PHP-Stacktrace-ebene innerhalb von 5 Minuten lokalisieren konnte.

Ein weiterer Dienst wird durch das deutsche Startup Versioneye angeboten. Gründer Robert Reiz hat seinen Dienst kurzweilig und ohne “Marketing geblubber” sehr detailliert vorgestellt. Im Grunde monitored Versioneye Open Source Repositories/Pakete und benachrichtigt per E-Mail, sobald eine neue Version released wurde. Besonders hilfreich ist es, dass man hier auch eigene “Projekte” anlegen kann und alle seine verwendeten Open Source Bibliotheken beobachten lassen kann. Das alles sehr komfortabel durch bspw. das hochladen einer package.json seines eigenen Node-basierten Projektes. Die dort hinterlegten Abhängigkeiten können nun überwacht werden. Derzeit werden node.js, PHP, Java, Ruby, Python, R und Clojure unterstützt. Wer in einem Projekt viele Open Source Libraries benutzt, sollte sich diesen Dienst mal anschauen, es wird sich lohnen. Versioneye kann noch viel mehr, würde den Rahmen dieses Eintrags aber sprengen.

Ansonsten konnte ich vor allem mal wieder die Erkenntnis mitnehmen, dass das Format Barcamp um einiges angenehmer ist als irgendwelche Konferenzen und wenn man sich die richtigen Session ausgesucht hat, ein wirklicher Mehrwert sein kann. Und das umsonst. Mein Dank an die Orga und für alle Gespräche mit vielen interessanten Menschen!

http://www.youtube.com/watch?v=1JOWARPwJMo

Neugierig, wie jQuery dort benutzt wird, habe ich mir das mal genauer angeschaut. Und wieder mal zeigt es sich: Leute, lernt Javascript. Und vor allem lernt, wann jQuery sinnvoll ist. Bei diesem Beispiel ist jQuery unnötig und kann vermieden werden. Vor allem vermeidet man, das lernwillige die the codeplayer nutzen, den Eindruck gewinnen, dass das erreichte Ziel nur mit jQuery möglich ist.

Schauen wir mal, was wir tatsächlich verändern müssen, damit jQuery vermieden werden kann.

1. Canvas-Element ermitteln und den Context holen

Vorher:

var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();

Das ist sehr einfach ohne jQuery abzubilden:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;

2. Tastaturevent auf dem Dokument abfragen

Vorher:

$(document).keydown(function(e){
    var key = e.which;
...

Auch das ist mit Hausmitteln einfach zu erreichen:

document.onkeydown = function(e){
    var key = e.which;
...

3. Document Ready…

… ist das einzige, was nicht trivial eins zu eins umgesetzt werden kann.

Vorher:

$(document).ready(function(){
...
});

Ich habe den Code in eine self executing function am Ende der Seite eingebettet. Damit legen wir keine unnützen Variablen i globalen Scope an und die Funktion wird aufgerufen, wenn das HTML vollständig geladen ist (deshalb die Funktion ans Ende der Seite).

...
...
<script type="text/javascript">
(function() {
...
})();
</script>;
</body>
</html>;

Das ist meiner Meinung nach völlig ausreichend, da der Fokus des Autors auf der Erstellung von einem Spiel liegt.

Das vollständige und jQuery-freie Beispiel ist hier zu finden.

Es ist immer wieder traurig zu sehen, wie sehr jQuery auch in einfachsten Szenarien eingesetzt wird. Durch die Vermeidung von jQuery wird der Code, der über die Leitung gehen muss um ca. 30kB erleichtert. Nur um das Canvas-Element mit $() zu selektieren, muss man keine so große Library nachladen.

• Luvit
  [Tags: node.js async lua ]
• JSON Editor Online – view, edit and format JSON online
  [Tags: editor Javascript tools json ]
• grips Templating Engine
  [Tags: engine templating javascript ]
• Ratchet
  [Tags: css html prototype iphone mobile ]
• Canvas Sparkle Light Trail · CodePen
  [Tags: sparkle particle canvas ]

• Helpful JavaScript Patterns | New Relic blog
  [Tags: tips patterns javascript ]
• Designing Better JavaScript APIs | Smashing Coding
  [Tags: tutorial api javascript ]
• DOM Enlightenment – Exploring the relationship between JavaScript and the modern HTML DOM
  [Tags: ebook dom javascript ]
• Creating a modal window with HTML5 & CSS3 | Webdesigner Depot
  [Tags: modalwindow css3 html5 ]
• Ejecta – Impact
  [Tags: games html5 canvas ios javascript ]
• 7 HTML5 features that you may not know about Aaron Lumsden | Aaronlumsden.com
  [Tags: unknown html5 features ]