blaulabs

Learning Rails Diary – 03 – Dies und Das

2011-12-30T00:00:00+00:00

Tutorials & Beispiele

Die Website von railsapps ist etwas unübersichtlich gestaltet, bietet aber gute Tutorials mit Beispielprojekten und hilfreichen Artikeln. Da gerade 3.1 die aktuelle Rails Version ist, sollte man sich gleich zum Start mal den Artikel installing-rails-3-1 durchlesen. In diesem Artikel findet man unter anderem Hinweise für die Vorbereitung der gängigen Betriebsysteme. Der Autor dieser Website ist so nett und stellt eine umfangreiche Sammlung von empfehlenswerten Ressourcen zur Verfügung.

HAML & SASS

Eine Philosophy von Ruby on Rails ist es, mit so wenig Aufwand wie möglich, so viel wie möglich zu erreichen. Die Verwendung von HAML folgt diesem Gedanken. Mit HAML ist es möglich mindestens 50% des Quelltextes gegenüber der von HTML einzusparen. HTML hat ein öffnendes und ein schließendes HTML-Element. HAML spart sich das schließende Element und definiert seine Kind-Element durch Einrückung.

SASS ist ein Preprozessor der aus Styles in der SASS- oder SCSS-Syntax allseits bekanntes CSS generiert. Mit der Definition der Styles in SASS spart man ebenfalls einiges an Schreibarbeit und reduziert redundanten Quelltext. Möglich wird das durch den Aufbau einer Struktur, wie man sie von der objektorientierten Programmierung kennt.

Layout

Wer bereits mit Webseiten und Styles gearbeitet hat, merkt schnell wie schwierig es sein kann eine Webseite so zu erstellen, dass sie in allen gängigen Browsern gleich aussieht. Hilfreich dabei sind Bibliotheken, die bereits die gesammelten Problemlösungen beinhalten und bei ihrer Verwendung automatisch anwenden, ohne dass man selber an alles denken muss.

Compass ist so eine Bibliothek. Sie bietet eine Menge von Styles, die den gesammelten Erfahrungen der Webentwickler-Gemeinde entsprechen. Ein Beispiel dafür ist das sogenannte Reset-Script, welches den Style der Applikation zunächst auf einen definierten Ausgangszustand bringt. Das hat unter anderem den Zweck, dass die Eigenarten einzelner Browser das Layout nicht verfälschen können. Desweiteren werden in diesem Script Styles gesetzt, die sich in der Praxis bewährt haben, die jedoch mit dem eigentlichen Layout der Webapplikation nichts zu tun haben. So zum Beispiel das grundsätzliche Einfügen einer Scrolbar auf der rechten Seite. Ohne das explizite Setzen ist diese im Browser nur dann vorhanden, wenn der Inhalt der Website größer als der vertikale, sichtbare Bereich ist. Durch das sporadische Erscheinen und verschwinden der Scrolbar, würde die Anzahl der nutzbaren Pixel in der Breite immer wieder um die Breite der Scrolbar schwanken. Das kann sich ungünstig auf die Platzierung der Elemente einer Website auswirken und zum ungewollten Verschieben der Elemente führen.

Compass bietet zusätzlich ein vordefiniertes Layout mit Blueprint in Form von Mixins in SASS- oder SCSS-Syntax an. Man kann selber entscheiden, ob man von Blueprint nur bestimmte Mixins in seinem Layout verwenden oder gleich sämtliche Mixins als Styles integrieren möchte. Wenn man Blueprint komplett integriert, hat man gleich zum Start zwar ein etwas rustikales, aber brauchbares Layout.

Compass kann jedoch noch mehr. Es bietet eine Fülle von Hilfmethoden für das Erstellen eigener Styles an. So kann man zum Beispiel über die bereitgestellten Mixins ein Raster zur Positionierung von Elementen aufbauen oder die Ecken eines Containers abrunden.

Es gibt weitere Bibliotheken, die best practices sammeln und einem Entwickler in Form eines Gems zur Verfügung stellen.

HTML5Boilerplate ist so eine und kann durch compass-html5-boilerplate ebenfalls mit Compass in das Rails Projekt eingebunden werden.

Twitter Bootstrap bietet nicht nur ein Fundament, auf dem man seine eigenen Styles aufbauen kann, es bietet gleich ein komplettes Layout. Twitter Bootstrap basiert auf Preboot und arbeitet daher nicht mit dem in Ruby implementierten Preprozessor SASS, sondern mit dem in JavaScript implementierten LESS. Der SASS Preprozessor versteht die in LESS-Syntax verfassten Dateien nicht, sie sind also nicht kompatibel. Wer dennoch die tolle Arbeit der Twitter Entwickler nutzen möchte, findet in diesem und in diesem Artikel interassante Informationen und Lösungsvorschläge.

Deployment & Continuous Integration

Wer seine Rails Applikation im Internet betrieben möchte, muss sich um das Hosting und die damit verbundene Administration kümmern. Mit der Plattform heroku kann man den Weg zu diesem Ziel abkürzen. Das bietet sich ganz besonders dann an, wenn man sich die Arbeit zunächst sparen und die Applikation schnell online bringen möchte. Alles kostenlos, so lange man die Applikation im Ramen des kostenfreien Accounts betreibt. railsapps stellt für das Einrichten eine umfangreiche Anleitung zur Verfügung

Continuous Integration ist für das eigene Rails Projekt schnell realisiert, wenn man Travis-CI zusammen mit seinem Github Account verwendet. Nach der Registrierung des Github Accounts bei Travis-CI, können die eigenen Github Repositories im Travis-CI Profil nach belieben aktiviert und deaktiviert werden.

To be continued …

VIM Tipps für Ruby und Rails Projekte

2011-12-29T00:00:00+00:00

Update 1: Die Funktion zum Setzen und Entfernen des lokalen Gem-Pfads habe ich durch eine "einfache" RegEx ersetzt.

VIM bei blau.de

Die Ruby Entwickler bei blau.de lieben VIM ... und hassen es gleichzeitig.

VIM ist ja nicht gerade für eine sanft ansteigende Lernkurve bekannt :)

Hat man sich aber erst einmal an die drei VIM modes gewöhnt, so geht das Arbeiten sehr schnell von der Hand. VIM unterstützt Ruby schon von Haus aus aber mit ein paar zusätzlichen plugins wird die Arbeit tatsächlich zum Vergnügen:

rails.vim

Erweitertes gf (goto file) für Rails typische Elemente (z.B. Partials), zusammen mit der :Rextract Funktion zum extrahieren von HTML in Partials machen das Plugin zu einem "Must-Have".

syntastic

Syntaxchecking für Ruby Files. Nuff said.

vim-haml

Syntax highlighting und Einrückungsregeln für SASS, HAML und SCSS Files.

Aber wir können auch selber ...

Im Laufe der Zeit haben wir auch ein Paar (mit grossem P) VIM Funktionen selber geschrieben.

Der Ruby 1.9 magic encoding comment

Mit grosser Macht kommt auch grosse Verantwortung. Ruby 1.9 mit seiner Unicode Unterstützung macht es notwendig, in jeder *.rb Datei einen Kommentar einzufügen, der Aussagen zum encoding des Inhaltes macht. Das wäre für UTF-8:

:::ruby
# encoding: utf-8
class InUtf8
...

Wir haben dafür eine kleine Funktion geschrieben, die das automatisiert. Sie fügt in jede ruby-like Datei den Kommentar ein, wenn er fehlt:

Lokales benutzen von gems

Oft will man in Projekten die lokal ausgecheckte version eines gems in dem Gemfile benutzen:

:::ruby
 gem "snippr", "~> 0.12.3", :path => "../snippr"

Wenn man seine ausgecheckten gems und die anderen Projekte im selben Order ablegt, und das Verzeichnis des gems so heisst, wie das gem selber, kann folgendes helfen: Steht man auf der zeile mit dem gem "..." und drückt :Gp und dann Enter wird automatisch der lokale Pfad hinzugefügt. Ein weiteres :Gp entfernt die Verlinkung wieder.

Muzungu

2011-12-11T00:00:00+00:00

Vom 26.11. bis zum 02.12. hatte ich die Möglichkeit gemeinsam mit Viva con Agua (VcA) und der Welthungerhilfe (WHH) nach Ruanda zu reisen, um die dort finanzierten Projekte von Viva con Agua zu besuchen. Unsere kleine Reisegruppe bestand aus Anke (WHH), Arne (Vorstand VcA), Matthias (VcA München) und mir (VcA Hamburg).

v. l. Anke, Matthias, Timo, Arne

An unserem ersten Tag haben wir das Genocide Memorial Center besucht, welches an den Genozid in Ruanda von 1994 erinnert. Die damaligen Ereignisse werden hier ungeschönt beschrieben und durch die Darstellung vieler persönlicher Schicksale lässt diese Ausstellung keinen unberührt.

In den darauffolgenden Tagen waren wir in der Südprovinz unterwegs. Unser erstes Ziel war das Base-Kirjango Tal, wo bereits vor 3 Jahren mehr als 30 Quelleinfassungen gebaut wurden.

Bei Quelleinfassungen wird eine bestehende Quelle am Berg freigelegt und der Quellort so gesichert, dass das Wasser nicht durch Bodenerosionen oder andere Umstände verunreinigt werden kann. Über ein unterirdisch verlegtes Rohr wird das austretende Quellwasser einige Meter weiter zu einer Entnahmestelle geleitet. Die Entnahmestelle ist so angelegt, dass nicht genutztes Quellwasser in die Bewässerungsgräben für die Felder abfließen kann. So wird verhindert, dass sich stehendes Wasser im Bereich der Quelle sammelt, welches Auslöser für Krankheiten sein kann.

Auf dem Weg zu unserer ersten Quelle wurde uns bewusst, wie außergewöhnlich es scheinbar ist, dass ein hellhäutiger Europäer in diese Gegend kommt. Von den Kindern, die am Wegesrand vor den Häusern spielten wurden wir mit lauten “Muzungu! Muzungu!” Rufen empfangen. Was laut unserem Fahrer soviel wie “Weißer” oder “Bleichgesicht” heißt. Bereits auf der Fahrt aus der Hauptstadt hinaus auf das Land wurde uns des öfteren zur freundlichen Begrüßung zugewunken. Es war schön, so viele lebensfrohe Menschen zu sehen, selbst wenn wir schnell einen lahmen Arm vom Zurückwinken bekommen sollten.

Endlich an unserer ersten Quelle angekommen war es besonders erfreulich für uns von den Nutzern der Quelle zu hören, dass sich deren Lebensqualität durch den Bau der Quelleinfassungen verbessert hat. Zum einen ist die Quelle das ganze Jahr über nutzbar und weil nicht mehr das Oberflächenwasser abgeschöpft wird, ist die Anzahl von Erkrankungen zurückgegangen.

Eine Quelle stellt Wasser für ca. 80–200 Personen zur Verfügung. Geholt wird das Wasser ca. 3x am Tag in 5–20 Liter Kanister. Je nachdem wer aus der Familie mit dem Wasserholen beauftragt wurde. Die Laufzeit zwischen Haus und Quelle liegt zwischen 10 und 30 Minuten. Kein Zuckerschlecken, wie ich in einem Selbstexperiment mit einem 10 Liter Kanister erfahren konnte, den ich einem Jungen abgenommen habe.

Neben den Quellen im Base-Kirjango Tal besuchten wir noch gerade im Bau befindliche bzw. ein bis zwei Wochen zuvor freigegebene Quellen im Mwogo Tal. Der Bau der Quelleinfassungen wird von einer lokalen Firma unter Mithilfe der Nutzer der Quelle ausgeführt. Es war insgesamt sehr interessant zu sehen, wie die Quellen mit den anderen Projekten der Welthungerhilfe in den Tälern ineinandergreifen. Ehemaliges Sumpfgebiet wird für Reisfelder kultiviert. Das Wasser der Quellen fließt in die Bewässungssystem der Reisfelder und in kleine Stauseen, die auch in Trockenzeiten eine Bewässerung möglich machen. Eine Reismühle wurde vor kurzem eröffnet, in der der Reis der Bauern weiterverarbeitet wird und letztendlich als Nahrungsmittel für die Bevölkerung zur Verfügung steht.

Ebenfalls auf der Agenda standen Besuche beim Vizebürgermeister des Districts Ruhango, des Vizegouverneurs der Südprovinz, dem Leiter der Wasserwerke und einem Berater des Infrastrukturministers. Alle mit dem Ziel Trinkwasser für jeden Haushalt zur Verfügung zu stellen.

Für mich eine sehr gelungene Reise, auf der ich das Gut Wasser noch einmal mehr schätzen lernen konnte und Motivation weiterhin für sauberes Trinkwasser aktiv zu sein.

P.S. blau.de unterstützt übrigens das Tramprennen. Trampen für sauberes Trinkwasser.

Neue Stellenanzeigen

2011-12-06T00:00:00+00:00

Zum Nikolaus gibt es zwei neue Stellenanzeigen! Wir suchen Java- und Ruby-Entwickler.

Acceptance Testing with Responsive Layouts

2011-11-22T00:00:00+00:00

What’s so special about responsive layouts and acceptance testing?

At first one might think rearranging content and resizing images won’t break any acceptance tests because you’re testing functionality not layout, don’t you? Well, this is right until the day you replace the wide navigation bar with a clickable dropdown for smaller screen sizes. That’s the point when you get into trouble if you don’t set the browser window size for your tests. There are now two ways how a user navigates through your website depending on the screen size and you want to make sure both ways keep working.

How did we resize the browser window until now?

A popular workaround until now was to execute some javascript:

:::ruby
def resize_window(screen_size)
  @browser.execute_script("window.resizeTo(screen_size[:width], screen_size[:height])
end

But this always felt like hacking and according to Jari Bakken this workaround is being disabled in modern browsers. So he implemented a Webdriver API for resizing the browser window.

How can you resize the browser window with Capybara/Selenium now?

You can access the new resize method trough Capybara like this:

:::ruby
Capybara.current_session.driver.browser.manage.window.resize_to(width, height)

(Disclaimer: This solution is still beta and only works with the latest selenium-webdriver (=> 2.12.2) and Firefox Browser.)

To integrate this method call smoothly into our test suite with RSpec, Selenium and Capybara we expanded our RSpec config to provide a ‘mobile’-filter. Examples that are being tagged with ‘mobile’ run in a small browser window and all other examples run in a desktop sized browser window. Example:

:::ruby
it "can submit voucher", :mobile => true do
  login_user
  fill_in 'voucher_code', :with => "12345"
  click_button 'submit'
  page.should have_content 'Successful!'
end

module BlauIntegrationTest

  Capybara.default_driver = :selenium

  DESKTOP_SCREENSIZE = { :width => 1280, :height => 1024 }
  MOBILE_SCREENSIZE  = { :width => 320, :height => 480 }

  RSpec.configure do |config|
    config.before(:each) do
      if example.metadata[:mobile]
        BlauIntegrationTest.resize_browser_window(MOBILE_SCREENSIZE)
      else
        BlauIntegrationTest.resize_browser_window(DESKTOP_SCREENSIZE)
      end
    end
  end

  def self.resize_browser_window(size)
    Capybara.current_session.driver.browser.manage.window.resize_to(size[:width], size[:height])
  end

end

What about other drivers and browsers?

For Selenium it currently only works with Firefox. We haven’t tried other drivers like akephalos and capybara-webkit with websites with responsive layout. Feel free to share your experience if you know more about it!

2 Klicks für mehr Datenschutz

2011-11-18T00:00:00+00:00

„Gefällt mir“ Buttons von Facebook werden auf immer mehr Webseiten eingebunden. Auch auf blau.de haben wir diese seit einiger Zeit im Einsatz.

Durch die Marketing-Brille sind sie ein voller Erfolg. In kurzer Zeit haben wir über 35.000 Fans gewonnen. Das jeder Aufruf unser Homepage aber auch bei Facebook getrackt wird, störte nicht nur die Datenschützer unter uns.

Einen erneuten Denkanstoß lieferte der heise-Artikel „2 Klicks für mehr Datenschutz“. Nach einem kurzen Gespräch entschlossen wir uns, die Daten unser Kunden nicht ungefragt an Facebook zu übertragen und ab sofort die „2 Klick Variante“ einzusetzen.

Der Einbau war schnell erledigt, da das jQuery-Plugin von heise gut dokumentiert und intuitiv zu verwenden ist.

Play with your pair!

2011-11-02T00:00:00+00:00

Pair Programming macht Spaß und führt bekanntermaßen zu einer besseren Codequalität. Durch kleine Spiele kann man es aber noch interessanter gestalten und gleichzeitig schlechtes Pairing vermeiden! Ausprobiert habe ich das auf den letzten Code Retreats und es hat eine Menge Spaß gemacht. Ein paar davon möchte ich hier kurz vorstellen:

Ping Pong

Eine sehr gut Möglichkeit zu vehindern, dass der eine Entwickler in einen Schlafmodus verfällt, während der andere sich die letzten Ideen aus den Fingern saugt. Ziel ist es, häufig die Tastatur zu wechseln. Zunächst schreibt einer einen roten Test und gibt die Tastatur an den anderen weiter. Der muss dann den Test fixen, einen neuen roten Test schreiben und die Tastatur wieder zurückgeben. Hat sich bei uns bewährt und sorgt dafür, dass beide Entwickler bei der Sache bleiben. Persönlich mein Favorit.

Farsighted Navigator

In diesem Spiel gibt es einen “Driver”(sitzt an der Tastatur) und einen “Navigator”(sitzt daneben). Der Navigator hat dabei die Rolle, strategisch vorauszudenken und das auf einer abstrakteren Ebene als auf Methoden und Klassen. Hier geht es besonders um die explizite Rollenverteilung: einer soll entwickeln bzw. vorauschauend denken, was gut sein kann wenn einer der Beteiligten häufig nur in der einen Rolle steckt. Hat auch etwas mit Vertrauen zu tun.

Silent Programming

Lasse deinen Code sprechen. Die Entwickler dürfen es jetzt nicht. Es wird allein über den Code kommuniziert. (Kommentare schreiben zählt natürlich nicht) Finde ich ganz gut, um mal zu sehen wie gut sprechender Code sein muss. Interessant wird es, wenn man nicht versteht was der andere vorhat. Meine Ideen dazu:

Tastatur zurückgeben: Signal den Code verständlicher zu machen
Code löschen: ziemlich hart, aber vielleicht war es das wert
Code ändern: gemeinsam zum Ziel?

Ask beginner Questions

Nun geht es darum, alles zu hinterfragen. Was ist eine Methode? Was ist ein Integer? Warum hast du die Methode so genannt? Hier entwickelt sich eine ganz neue Fragekultur, denn zu häufig werden Dinge einfach hingenommen, die sich bei mehrfachen Nachfragen als wirkliches Problem entpuppen.

Railscamp-Poster

2011-10-31T00:00:00+00:00

Unser Poster vom Railscamp 2011.

ZOMG!

2011-10-30T00:00:00+00:00

Der zweite Tag des Railscamp Hamburg bricht an und wir freuen uns dabei zu sein.
Vielen Dank für die geile Zeit!

Wie versprochen, hier die Folien zum “End-To-End Tests” Vortrag von Fabian und Meike.

Get your hands dirty - ein Code Retreat!

2011-10-25T00:00:00+00:00

Am 08. Oktober fand das erste Code Retreat bei blau statt! Code Retreat? Äh? Was ist denn das?

Ein Code Retreat ist eine eintägige Veranstaltung, auf der Entwickler an Ihren grundlegensten Fähigkeiten arbeiten können. Quasi ein Trainingsraum für Entwickler. Toll ist, das man keinen Zeitdruck hat Features schnell entwickeln zu müssen - es kann sich ganz bewusst auf das Lernen konzentriert werden.

Es gilt eine Aufgabe - hier: Conways Game of Life - zu lösen. Es gibt nur wenige Regeln:

Es wird in Paaren gearbeit
Nach jeder Session (hier: 45 Minuten) muss der Code gelöscht werden
Nach jeder Session muss das Paar gewechselt werden

Die Sprache ist egal - wichtig ist nur, dass beide Partner genügend Erfahrung haben, um gleich loslegen zu können. Wir hatten eine erfrischende Mischung aus Java, Scala, Ruby und PHP Entwicklern an Board.

Großen Dank zunächst an alle, die es am Samstag in aller Frühe (ca. 08:15) zu blau geschafft haben. Belohnt wurde das mit belegten Brötchen(super Service der Brötchenschmiede) und jeder Menge Kaffee. Geleitet hat das Retreat Adrian Bolboaca. Er organisiert Retreats u.A. in Frankreich, Belgien, Rumänien und Deutschland und bringt eine Menge Erfahrung mit.

Nach einer kurzen Einleitung von Adrian ging es um kurz nach 9 mit der ersten Session los.

Zunächst gab es keine Auflagen, jedes Pärchen konnte munter drauf los entwickeln. Doch die ersten Aufgaben folgten schon bald: in der nächsten Runde sollten die 4 Regeln des einfachen Designs beachtet werden. Adrian machte aber auch nochmal klar, das ein Code Retreat nicht zwangsläufig etwas mit TDD zu tun hat, vielmehr geht es darum zu lernen und neue Denkweisen auszuprobieren. TDD kann eben ein Teil davon sein.

In der letzen Runde vor dem verdienten Mittagessen hat dann TDD as if you meant it uns wieder wach gemacht. Die Implementation wird erst im Test erstellt und neue Klassen/Methoden entstehen nur durch Refactorings! Uiuiu, ganz schön holprig am Anfang, leitet aber dazu an, extrem kleine Entwicklungsschritte zu machen und macht klar, das oft schon viel zu weit gedacht wird.

Beim gemeinsamen Lunch konnten sich alle stärken und das eben gelernte inkl. der Bagels verdauen und ordentlich Networking betreiben.

Es geht weiter! Wir waren angehalten keine

if Statements
primitiven Datentypen (ich zähle mal die Wrapperklassen in Java dazu)
for/while loops
Arrays

zu verwenden. Hört sich zunächst ziemlich seltsam an. Ziel war es, neue Denkansätze zu schaffen (ist auch ganz gut wenn man die Aufgabe zum 4. Male versucht zu lösen) und zu einem möglichst objektorierentierten Design zu kommen. Viel zu kurz war die Session, als Adrians Sound “DELETE YOU CODE NOW!” uns abbrechen ließ und sämtlicher Code sich in heiße Luft auflöste (oder auflösen sollte!).

In der 5. Session: Know you editor! Wir sollten versuchen unsere IDE, Editor ohne Maus zu benutzen, um dadurch noch schneller zu werden. (+1) übrigens für VIM Nutzer mit einer exotischen Tastaturbelegung. Außerdem haben wir verschiedene Pairingspiele ausprobiert, persönlich macht mir das ja am meisten Spaß.

In der letzten Session haben wir uns nochmal ausgetobt und alle gelernten Dinge ausprobiert. Nach ein paar kleinen Bierchen bei blau haben wir der Katze einen Besuch abgestattet.

Für mich persönlich ein super Event, ich freue mich das alles so gut geklappt hat und viele motivierte Enwickler dabei waren. Es wird mit Sicherheit nicht das letzte Retreat seiner Art bei blau gewesen sein. Danke auch an Adrian, der das Event geleitet und uns immer wieder neue Denkanstöße gegeben hat. Der Global Day of Code Retreat in Hamburg findet übrigens bei IT Agile am 03. Dezember statt. Schnell anmelden!