• Jörn Zaefferer mit ‘Developing web applications with jQuery UI’
• Jens Arps mit ‘JS auf mobile devices’

Das Treffen beginnt um 19 Uhr, die Vorträge um 19:30 Uhr und findet in den Räumen von Coworking Cologne statt.

Weitere Links:

• Twitter http://twitter.com/cgnjs
• Google Group http://groups.google.com/group/cgnjs
• Coworking Cologne: http://cowoco.de

Ja … und wir sind der Meinung, es ist sogar essentiell auf diese Weise zu starten.

Dass diese Meinung in der Web2.0 Startups keine große Verbereitung hat, findet man schnell heraus indem man diverse Webservices einmal ohne Javascript besucht.

Doch warum gehen wir diesen, zugegebenermaßen steinigen Weg? Es ist doch so einfach die in Ruby on Rails oder anderen Frameworks verfügbaren Javascript-Helferlein zu verwenden? Nicht zuletzt sind solche Javascript Code-Generatoren ja auch für den Erfolg vieler Frameworks verantwortlich.

Die kurze Antwort:

Wir wollen die Kontrolle über unser Javascript behalten!

Die lange Antwort :

Unauffälliges / Unobstrusive Javascript

Es soll dem User nicht auffallen wenn er die Seite ohne Javascript benutzt. “Wer hat denn schon JS ausgeschaltet?”, ist meist die Gegenfrage. Jede größere Firma, welche halbwegs auf ihre interne Netzsicherheit achtet, wird/sollte JS ausgeschaltet haben. Ein weiterer Vorteil dieser Restriktion ist übrigens, daß die Mitarbeiter sich auf Ihre Arbeit konzentrieren, da das Internetz keinen Spass mehr macht.
Auf mögliche JS basierte Angriffe will ich hier nicht weiter eingehen, Google hilft aber gerne weiter:

http://www.google.de/search?q=Javascript+angriff

Spagetti Code und enge Kopplung vermeiden

Ist die Soße, in diesem Falle JS, erst einmal auf den Nudeln, ist es so gut wie unmöglich sie wieder von den Spagetti zu trennen. Die enge Kopplung von zwei intelligenten Sprachen, bzw. das Generieren von JS mittels PHP, Ruby, Java; macht die folgenden Punkte so gut wie unmöglich:

• JS Fehler finden / Debuggen
• JS Sicherheitslücken finden
• JS Schnelligkeit und Effizienz Testen / Profiling
• Austausch der Soße(JS) je nach Client (IE / mobile Webbrowser / iPhone / ..)
• Wiederverwendung von JS z.B. in einer komplementären Adobe Air Anwendung oder Widgets

Wem diese Punkte nicht reichen, ein weiteres Beispiel:

Bevor CSS in seiner heutigen Anwendung(komplette Trennung von CSS / HTML) populär wurde, schrieben wir es einfach mit in die jeweiligen HTML-Elemente. Kam dann der Kunde und wollte neue Farben, war es ein Heidenspass 150 HTML Dateien anzupassen.

Wie Kontrolle behalten?

Der einzig richtige Weg ist: Lerne Javascript und du wirst es lieben!

Auch ich habe mit den tollen JS Helfer in Rails und cakePHP angefangen, ohne einen blassen Schimmer von der Materie zu haben. Das Ende vom Lied war ein dreckiger Haufen Code und x vertane Stunden mit drei Fragezeichen über meinem Kopf. Das waren übrigens, vor zwei Jahren, die ersten Versuche den SalesKing zu bauen.
Nachdem 3 Versuche und drei Monate Arbeit im Müll gelandet waren, habe ich mich tiefer mit jQuery und Javascript beschäftigt. Es ging nicht von heute auf morgen, doch ein halbes Jahr später hatte ich meine Javascript-Angst überwunden, unter anderem durch das Ormigo Dschungelcamp und Teemow.

Das populärste Javascript-Müll Beispiel ist übrigens seit langem in WordPress, zu finden, die „Artikel schreiben“ Seite enthält 14 Javascripte. Chaos deluxe und keiner weiß warum es noch funktioniert!!!

Unsere Vorgehensweise

Wir sehen in JS den Zucker auf dem Kuchen. Im Gegensatz zu Schokostücken, kommt dieser erst nach dem Backen zum Einsatz.

Der Programmier-Ablauf sieht grob wie folgt aus:

1. Programmieren der Basisfunktionen ohne JS, dafür mit vielen Zwischenseiten.
2. Testen
3. Einbinden der Basis JS Scripte
4. simple ergonomische Verbesserungen z.B. Show/Hide funktion für vormals sichtbare Elemente
5. erweitern des (php/ruby) Code um Schalter zur Erkennung ob es sich um JS-initierte Abfragen handelt (xhr-requests)
6. erweiterte JS Funktionen z.B. direkte Auslieferung von vorherigen Zwischenseiten (z.B. Löschen Dialog) in einer Thickbox. Oder konsumieren vom xml/json Rückgabewerten aus nr. 5.
7. JS Tests / Packing

Einfach mal reinklicken:

Teil 1 –> Frameworks wie MooTools, jQuery und Prototype
Teil 2 –> Neue Anwendungen bekannter Techniken mit Javascript
Teil 3 –> Ajax mit Beispielen kurz erklärt

Das Team um John Resig hat richtig Gas gegeben und wirklichen Porno-Code produziert! Mein letzter Post bezüglich des jQuery SVN hat sich mal wieder bewahrheitet, denn ich habe heute abend erstmal 2 Stunden Javascript Code gelesen.

Hier gehts zur Update Beschreibung im jQuery Wiki, mit vielen Demos.

Als kleines Schmankerl solltest du schon mal den SVN Trunk auschecken, denn da sieht man schon so einiges von der neuen UserInterface(UI) Library.

Seitdem auch jQuery Plugins im SVN vertreten sind, hole ich mir dort meine tägliche Portion Javascript (der Arzt empfiehlt: min 200g/Tag). Für alle JavaScript-Begeisterten deshalb hier nochmal der svn link:

svn co http://jqueryjs.googlecode.com/svn/trunk

Für passionierte JavaScript-Köche, noch ein Serviervorschlag:

Machen Sie Ihren Code schmackhafter und servieren Sie die fettarme jQuery JavaScript Bibliothek in Verbindung mit dem lecker luftigen JAMAL Javascript MVC Framework. Die Zubereitung wird Ihnen demnächst mit dem JamalBuilder vereinfacht.

Keine Ahnung wovon ich schreibe? Dann wird es Zeit das du dir Subversion (Versionsverwaltung) und jQuery (Javascript für Dummi´s) reinziehst.

1. Adobe commandline tool ADL

Adobe has a command line tool which enables you to run and test your Air software. It´s called ADL and resides in the /bin folder of the SDK. To start a program under Windows you need to go into the command line (Win+R -> cmd) and type something like this:

C:\air\bin> adl c:\my_air_test\application.xml

The adl needs to know the applications xml definition to start your program. After the launch you can follow the debug output in the open command window. Inside the Javascript you use: air.trace(‘my debug output’); . Air mostly takes care of converting arrays and objects to a visible form (comma separated). Here is the link to Adobe Documentation.

2. Firebug Lite

Firebug Lite is a piece of Javascript simulating the console.log output for InternetExplorer and other non “Real Firebug” compatible Browsers. It appends a “log console div” to your website and even has an interactive command line.

To use it you just have to include the firebug lite js in your head section and hit F12 in your app:

<script src=”js/debug/firebug.js” type=”text/javascript”></script>

In the javascript code you can use console.log(‘my debug output’);

Using firebug lite enables you to also debug your software in other browsers than air, if you are not using air specific javascript API functions like read/write files.

3. build your own debug output

I actually started with this method. I made a <div id=”debug”> in the html and used a simple (jQuery powered) function to append the debug output into the div container:

function debug(data){
if(debug_on == true)
{
$(‘#debug’).append(data); //append(‘whatever’) comes from jQuery lib
}
}

The debug div is hidden via css and only shows up when the debug_on flag is set. Using jQuery it is pretty simple to add more functions like clear log.

All three methods have pro´s and con´s which could be discussed further. For now i hope i could save you some time in getting an overview.

Das liegt meist an diversen Programmen, welche im Hintergrund gestartet werden, ob man will oder nicht. Der erste Schritt geht dann immer in die msconfig console > windows-Taste+R dann “msconfig”eingeben. Dort kann man sehen was beim Start vor sich geht, und es ist möglich bestimmte Programme zu deaktivieren.

Das klappt ja schon ganz gut, doch plagt mich ein zweites Problem, welches sehr eng mit dem gestarteten Programmen zusammenhängt: Ich arbeite an verschiedenen Orten und benötige dort unterschiedliche “Grundprogramme”, z.B. brauche ich ausserhalb des Büros keine Maus, Keyboard oder Backupsoftware, dafür aber das Wireless-Config-Tool.

Meine Lösung zu beiden Problemen ist, das manuelle Anlegen von ein paar guten alten Windows Batch Dateien. Diese enthalten für jedes Programm eine solche Zeile:

Start “spam” /MIN “C:ProgrammsSpamihilatorspamihilator.exe”

Die Batch Dateien habe ich entsprechend Ihrer Funktion benannt z.B.: start_default_progz_office.bat. Schön und gut es funktioniert, doch das Anlegen dieser Dateien von Hand ist recht umständlich.

Da ich schon seit drei Wochen heiß darauf bin endlich etwas Sinnvolles mit Adobe Air zu bauen, habe ich gestern Nacht eine Air Applikation zum Erstellen solcher Batch Dateien geschrieben. Dabei kamen mir die Javascript Hooks von Air zum Auswählen und Schreiben lokaler Dateien sehr zugute.

Du kannst die Sourcen und den kompilierten Air Installer im folgenden downloaden. Es ist eine noch sehr rudimentäre Lösung ohne großen grafischen Bohei. Du kannst mehrere *.exe Dateien auswählen und diese werden dann in eine Batch Datei auf deinem Desktop geschrieben.

Mir schwebt noch ein bischen Drag & Drop, eine kleine SQLite DB zum schnelleren Zugriff auf Dateien und das Lesen/Ändern erstellter Batches vor. Alles in allem scheint mir das ein sehr guter kleiner Test der Adobe Air Api.

Air Installer File:

StartKing.air(05 07 2007 – 16:18)

Air Quellcode:

StartKing_alpha_01_sources.zip (05 07 2007 – 16:18)

Nicht vergessen, du benötigst die Adobe AIR Runtime.

Der StartKing wurde übrigens mit APTANA gebaut, welches in der aktuellen Version eine extrem coole Adobe Air Unterstützung hat.

Jobs released den Safari für Windows, Google entfacht mit diversen Updates Ihrer API´s und Applikationen ein wahres Feuerwerk (GoogleGears / Maps / Docs&Spreadsheet/) und dann kommt Adobe mit der Beta von AIR + SQLite(ehemals Apollo in der Alpha Version) um die Ecke.

Puh … so langsam gehen mir die langen Nächte aus, um all die schönen neuen Werkzeuge auf Herz und Nieren zu testen oder darüber zu bloggen. Meine Ideen für Applikationen und praktische Anwendungen nehmen kein Ende und ich lese mittlerweile neue Api´s wie spannende Krimi´s.

Einen neuen und sogar kostenlosen API Krimi hält O´REILLY jetzt bereit:

Adobe Integrated Runtime (AIR) for JavaScript Developers / Pocket Guide

found via ajaxian

Das 176 Seiten starke in english verfasste PDF enthält:

• Unterschiede von Adobe AIR zu “normalen” Browsern
• Installation / Setup von Adobe AIR und des AIR SDK
• Wie fängt man die Entwicklung an
• Arbeit mit Javascript und HTML innerhalb von AIR
• Adobe AIR Mini Kochbuch mit leckeren Rezepten (auch für die Jungesellenküche)

Das ganze gibt es auch in gebundener Form bei Amazon.

So jetzt aber genug … hier der Download für alle Javascript Freaks und solche die es werden wollen.

AdobeAIR_for_javascript_developers.pdf (4.23 MB)

P.S. Es ist auch eine gute Einführung in die AIR Engine bzw. Browserumgebung.

Yes there are markup languages like BBcode or Textile … but why does someone needs a markup language to produce another markup ??(cause all existing webeditors suck) Besides those stupid markup attempts i don´t want to learn a markup language, i just want to write without barriers.

WYMeditor tries to tackle those problems and looks pretty promising. To quote the WYMeditors goal:

WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate further processing by modern applications.

I discovered WYMeditor a couple of month ago. At that time the programmers started to switch to jQuery for the internal rendering engine. This concept really thrilled me. By now the Editor is available in a 0.3 beta version and the jQuery integration has advanced big time.

I really recommend to try and support this editor. You and your clients will get a totally new web editor experience.

Go checkout the Demo.

I´m not talking about this kind of background music in this article.  I rather want to show you a technique to catch your users attention after he interacted with your site / webapplication. Especially when using AJAX techniques where the page does not reload. You are (probably)  already giving the user some visual hints(loading.gif), so he knows that something is happening. Those kind of hints can also be small pieces of sound.

What you need to get things cooking:

• a couple of small mp3 sounds
• an event like onsubmit / onclick or any kind of switch in your javascript which is worth the sound output
• the single MP3 Flash Player (because it is so damn small)
• some Javascript + basic coding knowledge

The Basics:

You are catching some HTML Element Event (f.ex. onclick), with javascript. Than you insert a somehow hidden flash-embed into the dom which holds the mp3 player. The mp3 player recieves his settings via post parameters, which are given to him inside the flash-embed code and starts playing instantly.

The player and some of the javascript i´m using, comes from the jmp3 jQuery Plugin. Please check the license of the player!

The only tricks we actually need are:

• dynamically include the hidden flash player
• set the right variables for the flash player like: no repeat, no download, auto start playing and so on.
• I went one step further thinking always the same sound would be boring. So i have a javascript array with sound filenames, from which a sound is randomly picked.

In the example i´m using jQuery to grab the events and do the DOM modifications. Of course you can take your prefered js library or plain javascript(you freak) for this too. The example only uses  a click-event and the  insertion into the DOM can also be done in other fashions. I´ll leave that to you to play with it.

I thought of naming this technique MANDY. Of course i could´ve used some funky acronym, but what the hell. With such a name you can tell your coder-friends “I did it with Mandy” or “I´m just diving into Mandy”, which is probably making a bigger impression.

Locations where i did it with Mandy:

• at the post office -> form submissions with clapping soundz
• on the cash desk -> shop payments with dropping coins
• on the printer -> before the print window opens -> typing sounds
• in the lobby -> squeaking door sounds after logins
• on Twitter -> twitter king widget having new Messages

There are tons of other places where it would be nice to do it with Mandy. Have fun!
You can download the tutorial code here:

 mandy_sound.zip (67.83 KB)

or visit the demo site 

In the following Movie you can get a short glance of how the javascipt inside the Twitter King is organized. Please be aware, that if you don´t have some basic knowledge of programming you´ll find this boooring. I´m using the code-tree-view of the Aptana Editor and to really understand you should have tested the twitter uwa widget(beta 0.8 as of writing) and looked in the javascript code.

I´m not fully satisfied with the code and some could have probably been written shorter or smarter, but i just recently dived so deep in JS and think this might be nice to get a feedback on.

As long as i can´t get it to work on sevenload you can download the avi

js-mvc-in-twitter-widget.avi (5.4 MB)

He wanted to get away from from those dirty (at first glance) “easy” prototype/scriptacoulus  ajax calls, included in Ruby on Rails, CakePHP or other MVC Frameworks. He convinced me pretty fast that inline javascript is not the way to go and that using jQuery is a damn good way to produce an unobtrusive ajax experience. In the meanwhile i came to the point that almost all javascript producing libraries be it in Java, Ruby or Php are mostly useless crap. The jQuery syntax is so easy and clean that you are faster writing it, than studying those libs.

So after i got hooked up to jQuery (I hated JS before), he pointed out to me, that it also makes sense to use an MVC pattern in javascript. Why not deploy the same pattern to your javascript as to your MVC cakePHP or RubyOnRails code?

At first i was kind of  critical due to my  reduced knowledge of javascript, but this weekend i  implemented Jamal (his MVC jQuery based Javasript Framework) in one of my current projects. It´s been a such an eye opener, that i spend a two whole nights and the sunny sunday to reduce and restructure my javascript / ajax code.

The Jamal Javascript MVC Framework is just at the very beginning, but it will be going on to be a great MVC companion! While hitting the highway with Jamal i´ll post more on the details.

Das muss nicht so bleiben. Das Smashing Magazine hat einige schöne Quellen zu diesem Thema zusammengefasst.

Zu finden sind Links zu reinen CSS Formularlösungen oder auch Ajax Formularen.

Das Buch, immerhin schon in der 7. Auflage, wurde vollständig überarbeitet und aktualisiert. Im ersten Teil findet der Leser eine umfangreiche Einführung in JavaScript mit unverbrauchten und originellen Beispielen. Der zweite Teil richtet sich an die JavaScript-Kenner: Ein eigenes umfangreiches AJAX-Kapitel wurde ergänzt, weitere Themen sind Browserkompatibilität, Formulare, DHTML, Kommunikation mit Java-Applets.

Neben einer wirklich coolen Werbung auf der letzten Seite gibt es eine Einführung in die jQuery Konzepte, ein Interviews mit John Resig, ein kurzes Tutorial und die Vorstellung von jQuery Plugins.

Ein wirklich gelungener Start und 10 Seiten Javascript Spass! 

Doch Scripte wie Scriptacoulus, OpenRico oder die Generierung mittels Framework bergen einen Nachteil: Sie verschmutzen den HTML Code durch ihr inline Markup. Das lässt sich mit CSS vergleichen, welches direkt in das html Element geschrieben werden kann(inline css) oder eben getrennt in der CSS Datei liegt.

 jQuery erlaubt diese Trennung von HTML und JS.  So wie CSS die grafische Formatierung von HTML abtrennt, werden JS Effekte und AJAX  entkoppelt. Der HTML Code bleibt sauber, das JS lässt sich leichter warten und wiederverwenden. Zu alledem birgt jQuery aber noch zwei weitere essentielle Vorteile: Es ist verdammt klein (15kb) und die Syntax der JS Aufrufe ist hammer simpel.

jQuery findet die HTML Elemente über die DOM Struktur, spezielle CSS Klassen und/oder ID´s. Es ist z.B möglich alle Links innerhalb aller p´s und div´s  zu finden und diese fett zu markieren:

$("p,div").find("a").css("fontWeight","bold");

Richtig lustig wird das Ganze natürlich erst mit Effekten. z.B.  Wenn das Element mit ID "show" geklickt wird, öffnet sich ID "content".

——————————————-
$("#show").click(function(){
$("#content").slideDown("slow");
return false;
});
———HTML———
< h2 id="show" >aufklappen</h2>
<div id="content">text</div>
——————————————-

Die Effekte in jQuery selber sind noch etwas reduziert. Es gibt aber Plugins, die den Spass nicht so schnell enden lassen, einer ist jQuery Corner. Wer sich an runden Ecken mit Rico versucht hat, weiss wie sehr das abnervt. Mit jQuery Corner klappt es im Nu:

——————————————
 $("#meine_Box").corner();
———HTML———
<div id="meine_Box"> Ich JS Dummi </div>
——————————————-

Als ich jQuery vor ca. einem halben Jahr fand, dachte ich mir: "Das ist so klein und simple, das kann ja nichts sein.".
Zum Glück machte mich Teemow auf die Vorteile aufmerksam, so dass ich gestern eine kleine jQuery Nacht eingeschoben habe. Ich könnte noch weiter von dem Script schwärmen, doch checkt es einfach selber an.

Das jQuery mit seinem Ansatz auf dem richtigen Weg ist, zeigt auch die Integration in sehr grosse Seiten wie z.B. Technorati.

Für alle die noch nicht soviel über AJAX Wissen, ist der folgende Chart, der die Unterschiede zwischen einer klassischen Web-Anwendung und einer AJAX basierten Web Anwendung zeigt.