Clean Code Developer

Ralf Westphal und Stefan Lieser haben einige Grundregeln erarbeitet, um Code-Qualität während des Entwicklungsprozesses ständig zu verbessern. Es handelt sich dabei um einen sehr pragmatischen Ansatz, der bekannte Regeln sehr gut auf den Punkt bringt. Nett ist die Einteilung in verschiedene Grade des CleanCodeDevelopers – ähnlich wie bei Kampfsportarten. Der Einstieg wird durch dieses Stufenkonzept erleichtert, man kann ruhigen Gewissens erst mal eine Teilmenge der Regeln beachten 😉

Die Regeln sind dabei unterteilt in Prinzipien (z.B. DRY-Don’t repeat yourself oder KISS-keep it simple stupid, …) und Praktiken (z.B. eine Versionskontrolle verwenden, Refaktorieren, …).

Links

Interview mit Ralf Westphal (heise.de)
Die offizielle CCD-Seite

My whereabouts (preface to DOM manipulation with Javascript)

Hi there, for a long time I didn’t blog here. That’s partly because in June I changed my working field from pre-development to development for the mass production. This has been a great opportunity – connected with a permanent hiring at my alltime-favourite car company: Audi.

But now I’m enjoying my winter holidays at my parent’s place – and I’ve got time to checkout something that had interested me for quite a time: Javascript. Some years ago I already did take a few steps with JS – but then it wasn’t really comfortable at all.

Now – a few years later, there are interesting libraries available that cover a wide variety of  common tasks – mostly driven by developers from the AJAX movement.
But not only are there some libs – there are great IDEs that allow a fast and efficient development.

After asking a few fellow developers, I decided to try the Eclipse based Aptana IDE together with jQuery – a lightweight library that seemed to suite my needs quite well. I also took a glance at dojo – but the small distribution package of jQuery (one single .js file) was exactly what I was searching for.

jQuery

As I already told, I’m doing my tests within the Eclipse based Aptana IDE.
During creating the project, you can already decide which Javascript libraries to use (I chose jQuery).

My use case: Filtering the rows of a big HTML table on client side. Of course, this usually calls for a database driven solution, but as a matter of fact I wanted to support the filtering even in offline situations.

Preparing the HTML file

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myFilter.js"></script>
<title>My HTML page with client side filtering</title>
...
</html>

myFilter.js

Within myFilter.js we can define our own user functions. By the way: I really love object orientated development – but this time is not the day of OO. So please don’t be disappointed if you’ll see classic procedural style in this blog entry. Maybe some day I’ll find out how to do nice and lean OO within Javascript. 😉

There’s one special callback function that is called from jQuery core after the page has completed loading:

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

Within this anonymous method, all the magic is taking place. Within there we’ll even define our own methods, such as

filterTable = function()
{
   //your code goes here
}

Selectors

One of the base concepts of jQuery (next to Chaining) are Selectors. With selectors one defines the subset of the DOM that you want to manipulate, e.g.:

$('#traceTable > tbody > tr')

Selects all rows of the HTML table with the id=’traceTable’.

Chaining

A typical jQuery command is chained. That means that a method call to a jQuery object returns another jQuery object. This may look a  bit weird at first glance, but it’s quite comparable to piping in Unix environments, e.g.:

$('#traceTable > tbody > tr').each(function (i) //execute the function for all <tr> elements of tbody in #traceTable
{
   filterRow($(this), filterText);
});

What you can see here is a combination of several techniques. Both the selector $(‘…’) and the each() function are returning objects of type jQuery. Within each() an anonymous function is called for every element of the selector. Note: In the context of each() there’s also a context change of $(this). It references to the currently traversed element of the selector!

Rundfunker reaktiviert

rundfunker Originally uploaded by krizleebear.
Hallo liebe Rundfunker-Freunde.
Wir haben unser Siebtsemesterprojekt “Rundfunker” vor einigen Tagen auf berlios.de reaktiviert: https://developer.berlios.de/projects/rundfunker/
Für die, die ihn noch nicht kennen:
Der Rundfunker ist ein stationärer MP3-Player, der das WLAN nach lokalen Audioquellen durchsucht und dort freigegebene Audio-Dateien abspielt. Er besitzt ein eingebautes 2-Wege-Lautsprecher-System, ein LC-Display und ein überraschend simples und gleichzeitig mächtiges Bedienkonzept. Dabei benötigt das Gerät keinerlei externe Peripherie, ein einfacher Stromanschluss genügt – die komplette Hardware befindet sich bereits im optisch ansprechenden Designer-Gehäuse mit edler Aluminium-Frontplatte.

Unser Fünf-Mann-Team (Mathias Bauer, Christoph Beckmann, Christian Leberfinger, Stefan Loibl, Jan Peuker) hat damals die komplette Software konzipiert, implementiert und als Open-Source zur Verfügung gestellt; außerdem haben wir zwei komplett funktionstüchtige Prototypen gebaut.