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.

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.

Die Schoko-Maus hat ein etwas älteres Medion Notebook, welchem ich mittels einer handelsüblichen Bohrmaschine etwas mehr Kühlung verschaffe:

Link: sevenload.com

Ich danke allen für den regen Zuspruch zu dieser lustigen Harware Session.

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.

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!

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)

This is the first beta version of a Twitter Widget. This Widget runs on Netvibes and your Google Personal Homepage as Gadget. The Widget and currently displays:

• the global Public timeline or
• your timeline (Posting) or
• your friends timeline or
• another users timeline or
• another users friends timeline

Update to beta 0.4

• post messages to Twitter
• Tabbed interface

The Twitter King Widget is far from complete and currently only displays public content. For the geeks: I could not manage to get the authentication working, because twitter does not offer an enhanced remote authentication method and the netvibes UWA gave me problems with the normal http basic authentication. Future Versions will definitely have the ability to post messages and do more of that funky protected stuff.

To try it out klick the link below, add the widget to your favorite Webtop and start following your and your friends twitters.

Link to the “Twitter King Widget” beta version

You can add the widget several times to have it display different posting timelines. When i´m updating the codebase this will automatically affect your existing widgets.

Im Filemanager Plugin habe ich das Problem heute kurz angegangen und siehe da … HTML Speed Tuning vom Feinsten.

Das Problem:

Im Filemanager wird für jeden Dateityp und damit für jeden Eintrag in der Liste, ein eigenes Icon als Bild mit <img …> Tag rausgeschrieben.. Das Einbinden der Bilder und damit der HTML Aufbau, dauert ewig. Ich muss warten bis die Seite geladen hat, bevor ich Aktionen ausführen kann.

<img src=”zip.gif”><a href..>mein Link zur zip datei</a>

Die Lösung:

Speed Tuning mit CSS … anstatt die Bilder direkt in den Quellcode zu schreiben, lassen sich dies auch per CSS vor jedes Element in der Dateiliste setzten. Dafür bekommt jeder Link eine spezielle Klasse, welche dann per CSS ein Hintergrundbild anzeigt. Natürlich ist dieser Trick nicht ganz neu, doch im Zusammenhang mit Render-Geschwindigkeit hatte ich ihn noch nicht eingesetzt.

<a .. class=”zip_bg”>mein dateilink</a>

CSS:

a.zip_bg{background: url(../img/ext/zip_small.gif) no-repeat left top;padding:000 18px;}

Das Update

Gibt es so direkt noch nicht.

Auf Grund der Anzahl unser Plugins habe ich mich entschlossen die King Plugins und noch jede Menge weiterer WordPress Plugins, auf Google Code zu hosten. Das Blog King Monsterpacket können sich wagemutige Freaks schon per SVN saugen.

Ich hatte am Samstag schon diversen Leuten den Ansatz der UWA Widget API, und die daraus resultierenden universell einsetzbaren Widgets, erläutert. Das stieß auf reges Interesse, doch als der Raum heute verdammt voll war, überraschte mich das schon ein wenig. Anfangs dachte ich, ich wäre im falschen Raum.
Hier der Vortrag als PDF und der marginal gekürzte und leicht dokumentierte Quellcode

uwa_widgets_vortrag_barcamp_frankfurt.pdf (135.43 KB 22 04 2007 – 23:11)

netvibes_widget.txt (7.05 KB 22 04 2007 – 23:15)

Gerrit van Aaken (preagnanz.de) hat seinen Power Macintosh Computer dazu bewegt einen Video aufzuzeichnen .. mehr davon auf sevenload nach barcampfrankfurt.

Link: sevenload.com