KingDtaus bietet ein einfaches Interface welches das grausige DTAUS Format vor dem Entwickler verbirgt. Dieses besteht aus drei Klassen:

• Dta – die Sammelüberweisung
• Booking- die Buchung – einzelne Überweisung
• Account – ein Konto

Eine Sammelüberweisung enthält dabei beliebig viele Buchungen. Jeder Buchung wird ein Empfänger-Konto zugeordnet sowie der Sammelüberweisung ein Konto als Absender. Damit auch bei zukünftigen Änderungen nichts auf die schiefe Bahn gerät, existiert eine Testsuite mit fast 100% Testabdeckung.

Hier gehts zum Project & Quellcode auf Github

• 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

• Thin
• Passenger
• WEBrick
• Mongrel

Hier der vorläufige Entwurf des Ruby Webserver Buch:

920kilobytes of real power!

You´ll never need to svn-checkout manually again. Commit Monitor monitors your favorite subversion repositories.

Ever tried this on your domain?

 http://my_super_project.com/.svn/entries

If you are using nginx as a webserver and the link above serves you a download, you should add the following location-directive to your nginx.conf:

 location ~ /\.svn/* {
deny  all;
}

This directive should reside in your server{}  definition before all other location definitions.

Let me know if this works .. at least it did the job on my server.

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

Wir machen ein Startup!!! 

Ole, ich und ein (noch) ungenannter Dritter haben  uns im Oktober letzten Jahres dazu entschlossen ein von mir vor ca. zwei Jahren initiiertes Projekt zu neuem Leben zu erwecken … den SalesKing …  eine webbasierte Software zur Verwaltung von Rechnungen / Kunden / Produkten und mehr.

Wer jetzt denkt der SalesKing war zu diesem Zeitpunkt schon begraben, irrt. Er war nur leider eines von vielen Projekten und bekam einfach nicht die Liebe die er verdient hatte.  Wir nutzen diese erste Version noch immer noch, doch erwarten schon ungeduldig die Auferstehung in neuem Gewand.

Die erste Version wurde von mir in php mit dem CakePHP Framework programmiert, doch genau da lagen die Gründe warum ich es nie veröffentlicht habe. Das Qualitätsmanagement in Bezug auf automatisiertes Testen ist einfach besch… Es gibt in PHP-Programmierer-Kreisen einfach keine ausgeprägte Testkultur und somit lassen die verfügbaren Tools schwer zu wünschen übrig. In der neuen Version setzten wir deshalb auf RubyOnRails.

Nach 4 Monaten kommen wir nun der privaten Beta Phase immer näher. Trotz dem zeitlichen Druck werden wir versuchen wieder etwas mehr zu bloggen und euch natürlich über den SalesKing auf dem neuesten Stand halten.

When you start a software project, you need to ensure your services are better in comparison to others. From a startup/customer point of view this can be a new web 2.0 niche, a nice interface or a new community. As a developer making an offer, what counts first is a faster time to market or just simply being cheaper.

Such arguments might be eligible, but they can crumble and stab your project to death, if the underlying software/development basis is not following strong conventions. Such conventions ensure two mostly overlooked arguments: “Softwarequality and Development Workflows”

But what does that mean? The non-technical customer just uses a nice frontend and does not have a clue why he should pay more attention to those technical related questions. Well in the first place this might be right, but in the long run (and successful projects run long) each of the following is indispensable.

I´ve seen a couple of unsuccessful projects so far. On some i lost the pitch because of my pricing, on others i was just a spectator. What they mostly had in common, was their lack of software engineering basics. Please don´t misunderstand me, i don´t want to precociously raise my finger. It also took me a while to adapt the following techniques and i want to share them because they have proven their usefulness.

Be aware that i´m getting a little technical here and there, so you might want to open a second tab to google some words. This topic could fill a book, so don’t be to hard on me if i forget something or keep things shorter.

Use a Version Control System

Every person involved in a project needs a version control for their files.

What?? Yes, be it excel, photoshop or sourcecode files everything must go into a central version control database.
Why?? Ever received ten emails with a new version and of course inconsistent names? A version control database acts a single point of access for all project related files. The only question you´ll ask in the future is “Did you checked it in/out?”. You can go back to every version any time, put the blame on somebody and sleep better with the central backup on your mind.
Subversion, followed by cvs, is the most popular system and has proven its stability on many projects around the globe. You´ll find clients for all operating systems and also popular coding enviroments (eclipse) . The one i like best is TortoisSVN. Installing a subversion server and getting accommodated with a client like Tortoise takes you between 5 min and an hour (depending on your skills and teacher)!

Use a Ticketsystem

Everybody tends to forget certain things. A ticketsystem acts as your ToDo-brain and is absolutely inevitable for the project controlling. It lets you estimate timeperiods (set milestones) depending on how much work there still is to do. You can control your project members, retain bugs and when you go live it can serve as a customer feedback system.

Wide spread ones are trac, fogBugz or Mantis but you´ll also find

Use automated Tests

When it comes to testing one tends to think of “I clicked this through while coding, so it works”. Well yeah it probably works right, but can you click every single function/region of your software before every release or update? Definitely not, so one must use automated tests. I come from a php background and wasn’t aware of such until i started with RubyonRails. In Ruby and other languages you have a kind of a Testing-Culture which php is completely lacking. This is kind of scary since testing frameworks for php are available namely simpletest or phpunit.

Another good and simple approach to testing is selenium, which as a firefox plugins even enables normal users to perform automated tests. I´m not going to dive deeper into testing or even test driven development, just remember “Automated tests let you sleep better!”

Use an automated deployment workflow

Deploying/delivering a (web) software can involve checkout from a version control system, file transfers (to your webspace), database updates, automated tests, packing source files, rollback on errors or restarting server processes. Manually handling those steps can be pretty painstaking and of course you´ll tend to forget a step or the stepping order. The automation of those tasks is not trivial but there are tools like ANT or the great Capistrano to help you out. Another point is the time it takes to handle all deployment steps manually. You can easily spend half a day on deploying and another one on rolling it all back, because of some error which occured (if you did not test it good enough).

Comment the Code

Commenting source code is probably the most basic guideline a developer should follow. Ever had the situation where you spent an hour to find out what you wrote half a year ago? Or what about debugging someone elses code?

But also a customer should insist on code comments. What if you coder gets hit by a truck?

Another great reason for comments and the use of a common commenting language/markup is the automated creation of a software documentation. Tools to handle such are javaDoc, phpDocumentor or rdoc and you´ll also find them for other languages.

Develop Codeing Guidelines

This is not a task to be done by a customer, but he should at least ask for the existence of them. Such guidelines should refer to naming schemes for files, database tables/columns, functions and classes. Further they should cover code layout related specifications like indenting, bracket styles, or commenting.

The whole aim here is to bring consistency and beauty into the code which helps the developer to faster read and understand the program.

Use common (OpenSource) Frameworks

By “common” i refer to “standardized” and vastly spread pieces of code. Using Frameworks sets one ahead, because the abstraction layer saves code, time and prevents inventing the wheel twice.

To customers this means they can rely on a certain stability in terms of code quality and/or support, but more important they are less dependent on the developer. Why less dependent? Imagine a situation where you switch your coder and afterwards pay another programmer to clean this mess up. It is not only difficult to find a descent coder for this task, but also one who is willing to stick his noose into unknown spaghetti code. The solution will always be pretty expensive and you´ll probably end up with a refactoring using a framework.

Frameworks exist for every coding language and in a web project you´ll probably end up using a couple of them. I´ll just name a few in the following example:

• Model/View/Controller(MVC) framework like cakePHP, Ruby on Rails, django for the main intelligence
• prototype or jQuery for the javascript part
• YAML for the CSS

A good programmer might not agree with me on this, and if there are strong coding guidelines, a deep documentation and a good application layout he might be right. But this does not reflect the software market reality. Further its is very unlikely that even a good programmer knows the deep details of each of the languages he is using, so a framework empowers him to achieve his tasks with less pain.

Don´t mix languages

Each language in a web project serves for a special porpuse. CSS for the looks, html for the structure, javascript for the funk and ruby for the main intelligence. Possible mixing of those languages can occur via html with inline css definitions, html with inline javascript, javascript creation via ruby or php.

The complete division of css and html is meanwhile pretty widespread, but the mix of javascript with html/php/ruby/.. is quite scary. Yes i know most developers only slowly dive into the secrets of js and frameworks like Ruby on Rails seem to take the pain out of implementing javascript. This is how i got started, when i hated javascript. But trust me you will dive into big ass problems when there are browser based bugs, custom animations you need, xss-attacks, speed issues or simply browsers without javascript.
I won’t dive into the javascript discussion deeper, instead just give a few statements which apply to other language divisions too:

• better maintainability
• better debugging
• better profiling
• you can hire a language expert and he does not need to know the other languages
• you can switch a language implementation with ease f.ex. mobile Browser stylesheet, special javascript for an iPhone
• higher code quality through separate testing f.ex. independently test ruby code, javascript or css

Conclusion

This was a whole bunch of information but i hope you took your time to go through each point. If you did, you now have some basics to ensure quality which serves all parties involved in a software project.

To sum it up:

• as a customers you get better software and achieve greater control.
• as a developer you can ask higher prices at lower costs due to higher quality.

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.

I was pretty surprised when i looked at the UWA code and found that they had taken a big gulp of the MooTools javascript library. Now we are getting somewhere i thought instantaneously. I work mainly with jQuery, but also hit prototype / Scriptacoulus, Rico, Dojo and Ext along the road. I´m exited to finally meet the missing babe and take it for a little drive.

I think it was the right decision from Netvibes to implement such an advanced lib in comparison to the raw prototype methods they had in there before. Now one can easily do funky stuff like DOM Element juggling(Drag/Slide/Sort) or DOM Element CRUD, besides just using the native extension of core objects (Array/Object/..).

This will definitely lead to a broader adaption by developers and will also lead to more interactive widgets. One of the first is the facebook Widget Netvibes just showcased.

Oh my… the TwitterKing update will be more than just a bugfix release

For those that just can´t wait here is the link to the dev version of the widget. (Don´t expect too much i just fixed some bugs yesterday)

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.

Warum habe ich darüber nicht früher geschrieben?

This fact could change with a new markup approach called HAML – HTML Abstraction Markup Language. To quote the Author of HAML, Hampton Catlin:

Haml is a refreshing take that is meant to free us from the shitty templating languages we have gotten used to.

But why are the traditional approaches we all use so ugly? Well take a look at this:

<html>
<head>
<?php if ($title) { ?>
<title><?php echo $title; ?></title>
<?php } else { ?>
<title><?php echo $pagename; ?></title>
<?php } ?>
</head>
<body>
<div id=”header”>
<h1><?php echo $pagename; ?></h1>
<?php if ($slogan) { ?>
<span><?php echo $slogan; ?></span>
<?php } ?>
</div>

Transfered into HAML Markup it looks like this:

%html
%head
- if ( $title)
%title= $title
- else
%title= $pagename
%body
#header
%h1 Example page
- if ($slogan)
%span= $slogan

HAML was initially coded for Ruby and Amadeusz Jasak ported it to php 5 called phpHAML.

This is the most readable approach i have seen so far and i definitely need to give it a try in my cakePHP projects. There is already a tutorial in the CakeBakery covering the implementation.

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.

Erst heute bin ich auf den Videomitschnitt von Mr.Topf gestoßen. Christian Scholz, der übrigens auch Plone entwickelt, hat noch weitere Video´s und Texte zu diesem Webmontag archiviert.

Vielen Dank!

An Apollo program consist of javascript 1.7 / html / Actionscript 3.0 / Apollo application xml. You have a pretty free application file structure and your app can hold as many of the above mentioned files as you need.

Your whole sourcecode pile is compiled into a solid *.air file. The compilation + debugging can be made in the free command line tools or with the Flex Builder / Eclipse Plugin + the Apollo Plugin. The resulting solid file is installed on any OS that has the free apollo runtime installed.

(Picture from Apollo Wiki)

I focused my first tests on the usage as a wrapper for existing html/Javascript applications. The Apollo runtime supports javascript, so i did not really need to know Actionscript details to get started.

I recently coded the Twitter King UWA Widget and thought embedding it into such a shell of *.air, could really be damn useful. Well one might think “why do i have browser?” but Apollo provides you with some neat extra features concerning:

• CRUD access to the local file system
• Update tools
• shell access
• window controls
• talking between javascript / flash
• remote request methods

It should also be possible to include some of our favorite javascript script frameworks (only got jQuery ) and with the power of dom + js + AS you can really rock. Grab remote data, juggle with local files and offline caches, embed dynamic html or flash .. simply everything an application needs.

To quote Adobe:

Apollo is the code name for a cross-operating system runtime being developed by Adobe that allows developers to leverage their existing web development skills (Flash, Flex, HTML, JavaScript, Ajax) to build and deploy rich Internet applications (RIAs) to the desktop.

We will have to see how fast this engine is spreading. It has not yet made it onto the adobe homepage but i think its worth to spend another long night on.

Tomorrow i will  attend the adobe live conference in cologne which has two talks about Apollo.

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