Ephigenia

I’m a full-stack web application developer from Berlin, Germany with >15 years of experience in developing #php and #javascript blogging about my work and my private life. www.ephigenia.de

[ephigenia]

What's New In DevTools (Chrome 59) | Web google.com

By Kayce Basques

Technical Writer at Google

Welcome to another installment of the DevTools release notes. Watch the video below or read on to see what's new in Chrome DevTools in Chrome …

nice new additions to #chrome #dev #tools, check ’em out

[ephigenia]

OSX Terminal Theme bei SSH ändern

Mit einer einfachen Erweiterung der ~/.bashrc kann man das Theme des OSX-Terminals ändern, sobald man eine SSH Verbindung aufbaut: … und schon ändert sich das Terminal Fenster schön Rot, so dass man fast nicht mehr vergessen kann dass man gerade was kaputt machen kann ;-)

[ephigenia]

Praktische Sublime-Text-Plugins #2

Nachdem im ersten Beitrag eine Reihe von hilfreichen Sublime-Text-Plugins vorgestellt wurden, folgt nun die Fortsetzung mit ein paar netten Helferlein für Fortgeschrittene.

SublimeCodeIntel

Dieses Plugin erweitert Sublime Text um eine Funktion, die zum Standard von großen IDEs wie Eclipse oder PHPStorm gehört: die Autocomplete-Funktion über Dateigrenzen hinaus. Einmal installiert erhält man Klassennamen, Funktionssnamen, ja sogar Namespace-Vorschläge für das aktuelle Projekt.

SublimeLinter

Wenn es um die Validierung von verschiedenen Dateiformaten geht, ist der Sublime Linter genau das richtige Plugin. Er validiert schon während der Eingabe die Syntax und markiert fehlerhafte Zeilen mit einem (je nach Theme und Einstellung) farbigem Symbol.

Wichtig zu wissen: Für jede Syntax muss ein eigenes Plugin installiert werden. Will man beispielsweise Javascript-Dateien validieren, benötigt man zusätzlich noch das SublimeLinter-jshint Plugin.

GitGutter

Dieses Plugin führt während der Bearbeitung von Dateien ein git diff auf der Datei aus und markiert alle hinzugefügten, gelöschten und editierten Zeilen so, dass man recht schnell sieht, wie viel in einer Datei schon geändert wurde.

PHP Coverage

Die Einrichtung vom PHP Coverage-Plugin ist etwas komplizierter, da das Plugin eine clover.xml-Datei benötigt, die mit PHPUnit und XDebug erzeugt wird. Hat man diese aber erfolgreich eingerichtet, ist das Nachziehen von Unit-Tests für nicht abgedeckte Funktionen ein Kinderspiel. Alle Zeilen, die nicht abgedeckt sind, werden in der Seitenleiste der Datei farbig markiert:

Wer die Unit-Tests in einer virtuellen Umgebung ausführt muss allerdings darauf achten, dass die Pfade in der XML-Datei nachträglich geändert werden müssen. Das ist aber mit sed schnell erledigt:

vendor/bin/phpunit --coverage-clover build/logs/clover.xml sed -i "s/vagrant/<new-path>/g" build/logs/coverage.xml

Color Picker

Zum Abschluss noch ein kleines Helferlein. Mit dem Color-Picker kann man quasi auf Zuruf (Apfel+Shift+C) die Farbauswahl anzeigen lassen und sich eine Farbe aussuchen, die dann als Hex-Code eingefügt wird.

Wer auf der Suche nach weiteren interessanten und hilfreichen Plugins ist, sollte unbedingt die neue Package-Control-Seite checken, auf der gerade beliebte Plugins gelistet werden.vvvkom

[foobugs]

Von einem, der auszog, das Kochen zu lernen - PHP 5.4/5.5 mit Vagrant und Chef ­virtualisieren

Bei foobugs führen wir seit mindestens einem Jahr unsere Projekte in einer virtualisierten Umgebung durch. Durch die starke Ähnlichkeit zur Umgebung, unter der die Applikation letztendlich beim Kunden laufen wird, ergeben sich zahlreiche Vorteile. So kann man Fehler in einer Live-Umgebung frühzeitig erkennen, das Deployment verbessern und testen, sowie Performance-Tests ausführen, ohne großen Aufwand zu betreiben. Dazu kommt, dass jeder Entwickler die selbe Umgebung hat, in der er testet.

In der Vergangenheit konnte man dies nur erreichen, indem man zuvor erstellte Live-Umgebungen als Image an seine Mitarbeiter oder Freelancer verteilt hat. Dies führte aber auch dazu, dass man bei einem Software-Update (zum Beispiel einer Aktualisierung des Apache in der Virtuellen Box) auch das komplette Image austauschen musste.

Genau in diese Lücke ist Vagrant gesprungen und erleichtert es, die gesamte Entwicklungsumgebung in einem Repository zu speichern und somit auch eine History über geänderte Software-Komponenten zu führen.

Read More

[ephigenia]

Praktische Sublime Text Plugins

Wenn es um den perfekten Editor geht, scheiden sich die Geister. Doch eigentlich ist das Nebensache, so lange jeder einen Editor gefunden hat, mit dem er möglichst effektiv und elegant arbeiten kann.

Seit ca. einem Jahr ist Sublime Text der Editor meiner Wahl. In einem ersten kleinen Artikel will ich nun ein paar Plugins vorstellen, die ich sehr nützlich finde.

Leider sind viele Plugins nach der Umstellung auf Python 3 nicht mehr mit Sublime Text 3 kompatibel. Da der Quellcode vieler Plugins aber auf GitHub zu finden ist, kann man helfen, das zu ändern!

Package Manager

Das erste Plugin, das jeder Sublime-Text-User benötigt. Damit kann man im Editor schnell und einfach Plugins installieren, aktualisieren und auch wieder rausschmeißen.

Case Conversion

Dieses Plugin kann die Groß- und Kleinschreibung der markierten Zeichenkette quasi auf „Knopfdruck“ ändern. So wird aus CamelCase ganz schnell snake_case.

ChangeQuotes

In Textmate war diese Funktion schon dabei. In Sublime Text muss man sich dieses Plugin installieren, um aus einfachen Anführungsstrichen ' doppelte " zu machen – und umgekehrt.

Clipboard History

In den meisten Fällen ist ein einziger Eintrag in der Zwischenablage mehr als genug. Mit der Zeilen-verschiebe-Funktion (CMD+CTRL+UP, CMD+CTRL+DOWN) oder Duplikation (CMD+SHIFT+D) kommt man aber auch gut ohne Zwischenablage aus. Wenn das mal nicht ausreicht, hilft die Clipboard-History, die über CTRL+ALT+CMD alle zuletzt kopierten Einträge anzeigt.

GenerateUUID

Generiert quasi auf Zuruf UUIDs. Einfach uuid eingeben, TAB drücken und schon hat man eine neue UUID.

DocBlockr

Das Plugin reagiert auf die verschiedenen Formate dokumentierender Kommentare (/**) und fügt – wenn die Funktion oder Methode schon geschrieben wurde – automatisch die Annotations für Parameter und Return-Werte hinzu. Beim Ausfüllen der Felder kann man dann TAB drücken, um jeweils eins weiter zu rücken.

Hilfreich ist auch der Shortcut ALT+Q, der alle Zeilen innerhalb des mehrzeiligen Kommentars auf die Maximallänge bringt. Man muss also nicht mehr lange überlegen, wann man im Kommentar einen Umbruch macht. Kurz ALT+Q – fertig.

[ephigenia]

The past quarter i was working at [foobugs](http://www.foobugs.com) for the Berlin based startup [Trademob](http://trademob.com). Our Team was developing a new rich client application for their clients which will be released during this year I think. It was a great opportunity to extend my skills in [backbonejs](http://backbonejs.org) and [chaplinjs](http://chaplinjs.com) which are really nice libraries. During that time I also discovered [brunch](http://brunch.io/) which is something like a boilerplate, ready-to-use compiler application assembler which makes it much easier to start a new project from scratch. You don’t have to set up your build steps, minification and test configuration on your own because brunch does this stuff for you. So I tried it out on a little project I had in mind for some months now. A simple and small application that uses the HTML5 [geolocation API](http://dev.w3.org/geo/api/spec-source.html) of the browser to display the user’s location on a map and show the info of the `getCurrentPosition` or `watchPosition` return values. It should be designed for small screen mobile devices such as my HTC Desire or iPhone to see how the callback intervals change when I drive or walk around. So here it is: http://gps-tracker.herokuapp.com/ And the best thing is - it’s open source! Test it on your mobile device and feel free to post issues or fix them in your fork: https://github.com/foobugs/gps-tracker

[ephigenia]

Ich bin Google Mail und Google Apps Nutzer - habe also mehrere E-Mail Konten. Um diese möglichst bequem zu managen habe ich bisher immer auf [Sparrow](http://sparrowmailapp.com/) vertraut. Da [die aber im Sommer von Google gekauft wurden](http://www.heise.de/newsticker/meldung/Google-kauft-App-Entwickler-Sparrow-1649196.html) und die Einstellung angekündigt wurde, war mir klar ich müsste mich an einen neuen E-Mail Client gewöhnen. Dann kam das 10.8 Update (Snow Leopard) heraus und ich probierte es einige Monate mit dem E-Mail Client "[Mail](http://www.apple.com/de/osx/apps/#mail)". Da der aber keinerlei sinnvolle Schortcuts bereit hält und sich obendrein auch irgendwie langsam anfühlt habe ich mich dann doch wieder für den Browser-basierten Client von Goolge entschieden. Um nicht ständig mehrere Tabs oder Browser mit unterschiedlichen Postfächern offen zu halten gibt es eine praktische Erweiterung für Chrome welche das Prüfen der Postfächer übernimmt: [Checker Plus for Gmail](http://jasonsavard.com/wiki/Checker_Plus_for_Gmail?ref=GmailChecker) [Webstore Link](https://chrome.google.com/webstore/detail/oeopbcgkkoapgobdbedcemjljbihmemj) Damit kann man sehen wie viele ungelesene Nachrichten man hat. Man bekommt Benachrichtigungen über neue E-Mails per Audio-Signal, Stimme oder Growl-Benachrichtigung und kann sich sogar die E-Mails ohne GMail öffnen zu müssen öffnen und gleich archivieren oder löschen. Praktisch.

[ephigenia]

Die Aussicht von dem Eingang zu "Studio 1" im [Bethanien](http://www.bethanien.de/) am Morgen. #digiyards (at Kunstquartier Bethanien). Mehr auf zum [Symposium Digital Backyards](berlinergazette.de/symposium/digital-backyards/) auf der Berliner Gazette Website.

[ephigenia]

CSV Datei mit PHP auslesen

Seit PHP 5.1 gibt es die Möglichkeit Dateioperationen nicht mehr mit Funktionen auszuführen sondern [SPLFileObject](http://de.php.net/manual/de/class.splfileobject.php) oder [SPLFileInfo](http://de.php.net/manual/de/class.splfileinfo.php) zu verwenden. In PHP 5.2 kam auch noch die Unterstützung für CSV Dateien dazu und so kann man ziemlich elegant mit [CSV Dateien](http://de.wikipedia.org/wiki/CSV_(Dateiformat)) umgehen. Das folgende Beispiel illustriert das hoffentlich: Die positiven Dinge sind auf jeden Fall die schöne objektorientierte API und die wenigen Zeilen Code die einem erlauben über den Inhalt der CSV Datei zu iterieren und zwar ohne die gesamte Datei im Speicher zu behalten! ### Das Zeilenende als Stolperstein Ein kleiner Stolperstein stellt allerdings die unterschiedlichen Zeilenenden dar die von manchen Programmen bei dem Erstellen einer CSV Datei verwendet werden. So kam es beim Testen schon vor, dass eine CSV Datei mit einem Carriage Return (chr 13) am Ende erzeugt wurde, statt dem gewohntem Line Feed (chr 10) oder einer Kombination aus beidem. Das Problem dabei ist, dass PHP dann die Zeilenenden nicht richtig erkennt und alle Daten in der ersten Zeile stecken. Dies kann man aber beheben indem darauf achtet, dass man `auto_detect_line_endings` in der `php.ini` aktiviert hat oder es einfach selbst setzt.

[ephigenia]

git - praktische Einführung

Am Montag haben René und ich bei [Familie Redlich](http://www.familie-redlich.de/) einen Workshop rund um das Thema Entwicklungsumgebungen und [git](http://git-scm.com/) gegeben. Zuerst haben wir den von [foobugs](http://foobugs.com) eingerichteten Server vorgestellt der zum Beispiel verschiedene PHP-Versionen unterstützt. Danach habe ich in einer kleinen Präsentation git vorgestellt und anschliessend haben wir mit den Entwicklern alle möglichen Varienten von ein- und auschecken, pushen, pullen, mergen, branchen etc. durchgespielt. Wer sich noch nicht an git ran getraut hat sollte sich vielleicht mal die Slides anschauen die [Slides der git Präsentation](http://www.slideshare.net/ephigenia1/git-praktische-einfhrung-13308756) anschauen die ich gerade bei Slideshare hochgeladen habe:

[2012-06-28] Gerade habe ich auf Hacker News noch diese eine [wunderbare Visualisierung der Repositories und git-Befehle von Mark Lodato](http://marklodato.github.com/visual-git-guide/index-en.html) gefunden.

[ephigenia]

Der [Developer Color Picker](http://www.panic.com/~wade/picker/) von [Panic](http://panic.com/) hat sich gerade als sehr hilfreich herausgestellt. Er ermöglicht es zum Beispiel in Textmate in SCSS/SASS oder CSS Dateien einen Farbwert samt Alpha-Kanal-Stärke auszuwählen. Einfach zu installieren und schon kann’s losgehen.

[ephigenia]

Markdown mit Pandoc und Vorlagen auf OSX in PDFs verwandeln

Markdown ist aus meinem Alltag nicht mehr wegzudenken. Die einfach zu erlernende Auszeichnungssprache die [John Gruber](http://daringfireball.net/projects/markdown/) und [Aaron Swartz](http://www.aaronsw.com/) erdacht haben, wird mittlerweile von diversen Plattformen unterstützt. Sogar Bücher, wie zum Beispiel "[The Grumpy Programmer’s Guide to Building Testable Applications in PHP](http://leanpub.com/grumpy-testing)" von [Chris Hartjes](http://www.littlehart.net/), werden damit geschrieben. Da man so gut wie alle gängigen Formatierungen in Markdown vornehmen kann, kommt es für mich oft gar nicht in Frage, Dokumentation oder Notizen in komplexen Programmen zu schreiben. [Textmate](http://macromates.com/), oder wenn es sein muss auch mal `vi`, reichen mir aus. Seinen Kunden will man nicht zumuten, Markdown-Dateien zu lesen. Stattdessen sollen diese schöner formatiert und in einem PDF gesammelt werden. Genau dieses Problem habe ich letztens auf OSX relativ komfortabel gelöst. ## Markdown zu HTML Wenn man PDFs aus Markdown erstellen möchte, macht es sich am besten, diese zuerst in HTML umzuwandeln. Ein Tool, welches u.a. Vorlagen mit einbezieht, Inhaltsverzeichnisse erstellen, in andere Formate umwandeln und damit auch für andere Zwecke genutzt werden kann, ist [pandoc](http://johnmacfarlane.net/pandoc/). Nach der Installation [eines der Packete](http://johnmacfarlane.net/pandoc/installing.html), kann man einzelne Markdown-Dokumente in HTML umwandeln: pandoc README.md -o README.html Das schöne bei pandoc ist, dass man neben Footer, Header oder Stylesheets auch ganze Templates selbst definieren kann, die beim Konvertieren mit einbezogen werden: pandoc -c mystyle.css -A footer.html -H header.html README.md -o README.html Weitere Befehle und genauere Beschreibungen zu den Templates sind im [Pandoc User’s Guide](http://johnmacfarlane.net/pandoc/README.html) nachzulesen. Ganz nett ist auch die Funktion, mit Platzhaltern für Datum oder Autor arbeiten zu können. ## HTML zu PDF Hier gibt es wieder mehrere Möglichkeiten. Um [pandoc](http://johnmacfarlane.net/pandoc/) das PDF-Generieren beizubringen, muss man leider [LaTeX](http://www.tug.org/mactex/2011/) installieren, was auf Grund der Größe des Pakets (mehr als 1 GB) lächerlich erscheint. Wenn man aber auf OSX arbeitet, kann man eine im System "versteckte" Funktion benutzen, die jedes HTML inklusive Stylesheet, Bilder etc. in ein PDF verwandelt: `convert` /System/Library/Printers/Libraries/convert -a "media=A4 portrait" -f README.html -o README.pdf Der Befehl ist leider nicht [wirklich dokumentiert](http://apple.stackexchange.com/questions/14947/what-are-the-secret-options-of-the-pdf-convert-tool-from-os-x); er kann aber auch RTF oder normale Text-Dateien in PDFs konvertieren. Es gibt auch noch weitere Parameter, die man mit `-a` übergeben kann. Welche von den auf [CUPS gelisteten](http://www.cups.org/documentation.php/options.html) funktionieren, konnte ich aber leider nicht finden. ## Beispiel auf GitHub Für [foobugs](http://www.foobugs.com) habe ich ein kleines Beispielprojekt aufgesetzt, mit dem man wunderbar rumspielen und sich für seine Firma oder sein Projekt eine Vorlage erstellen kann. Die Quellen sind im [pandoc-templates Projekt auf GitHub](https://github.com/foobugs/pandoc-template) zu finden.

[foobugs]

Nach 8 Release Candidates hat das PHP Entwicklerteam gestern Abend offiziell PHP 5.4.0freigegeben. Die neue Version beinhaltet neben Unmengen von Bug-Fixes eine Vielzahl toller neuer Features:

Traits Die etwas andere Mehrfachvererbung, die es einer Klasse ermöglicht, von mehreren...

[ephigenia]

ReDoS – Reguläre Ausdrücke als potentielle Schwachstellen

Um die Eingaben eines Benutzers auf einer Website auf Richtigkeit oder bestimmte Formate zu prüfen, kann man in allen möglichen Programmiersprache auf Reguläre Ausdrücke zurückgreifen. Mitte 2010 wurde mit ReDoS (Regular expression Denial of Service) allerdings eine Schwäche in der Implementierung bekannt, welche dem ein oder anderen Programmierer noch nicht bekannt sein dürfte.

Dabei kann jeder Reguläre Ausdruck, der eine Capturing Group ((group)) und Wiederholungsoperatoren (*, +) enthält, eine potentielle Angriffsfläche bieten. Die Prüfung mit solchen Ausdrücken wird je nach Zeichenkettenlänge langsam oder sogar extrem langsam. Das liegt grob gesagt daran, dass immer mehr Rückwärtsreferenzen (Back References) gemerkt werden.

Angenommen, man möchte in JavaScript eine Eingabe mit ^(\d+)+$ auf eine Abfolge von Zahlen prüfen. (Natürlich ist dieser Ausdruck nicht perfekt, aber darum geht es gerade nicht.) Spätestens ab einer Länge von 25 Zeichen wird die Prüfung spürbar langsamer. Dazu ein kleines Beispiel welches die benötigte Zeit der Überprüfung ausgibt:

Erhöht man die Länge der Zeichenkette in der for-Schleife auf 31 braucht die Überprüfung sogar ca. 30 Sekunden. Man kann sich nun leicht vorstellen, was passiert, wenn die Zeichenkette länger als 40 Zeichen ist. Wenn die Überprüfung dann im Backend stattfindet, kann man, mit einer entsprechende Eingabe in ein Formularfeld, schnell einen Server lahmlegen.

Ob die Implementierung der Regular Expressions in der Sprache, die man verwendet, angreifbar ist, muss man am besten selbst überprüfen. Richard M. Smith hat auf seiner ReDoS Website schon verschiedene Implementierungen in C#, Python, Java, Javascript, Perl, PHP ausprobiert und aufgelistet. Wer noch mehr über ReDoS erfahren möchte, kann auch gerne mal bei dem entsprechendem Eintrag auf OWASP (The Open Web Application Security Project) vorbei schauen.

[ephigenia]

Wenn man mal wieder was anderes zu tun hat, als sich ewig lange Artikel bei [Spiegel Online](http://www.spiegel.de) oder anderswo durchzulesen, kann man sich die Texte auch einfach mal von seinem Computer vorlesen lassen! Vorausgesetzt man hat OSX als Betriebssystem gewählt und Sprachausgabe gleich kostenlos mitgeliefert bekommen. Einfach in in den "Einstellungen" -> "Sprache" den globalen Shortcut fürs Vorlesen einstellen und schon kann man bequem weiter programmieren während der Spiegel-Artikel von Yannick oder Steffi vorgelesen wird. Es können auch noch kostenlos weitere Stimmen (für andere Sprachen) nachinstalliert werden. Wer’s lustig findet, kann sich auch den Quellcode vorlesen lassen und während dessen einen Spiegel-Artikel schreiben ;-)

[ephigenia]

Das ist ein kleines Video des Dummies der Horrorblog.org iPad Magazin App. In den letzten Woche habe ich immer wieder mal an der HTML5 basierten App gearbeitet. Da das Horrorblog nun nach Konflikten mit dem Jugendschutz eingestellt werden muss (darauf werde ich in einem späteren Post noch eingehen) habe ich mich etwas schwer getan den vor Wochen begonnenen Dummy zu Ende zu führen. Als dann heute Nachmittag endlich die Bestätigung von Apple kam, dass foobugs am Developer Programm Teilnehmen kann habe ich mich dazu entschlossen den Dummy doch soweit zu beenden dass die App auf dem iPad funktioniert. Immerhin bietet sich so ein ganz netter Use-Case und die Möglichkeit mal mit dem Theme iPad, iOs usw. rumzuspielen.

Der Inhalt der App besteht aus statischem HTML5 welches von dynamischen PHP Inhalten generiert wird. Für die Styles habe ich Compass / Sass verwendet und konnte so ganz einfach einen Nacht/Tag Modus integrieren. Für die wenigen Javasript Funktionen benutzte ich backbone.js was sich als ziemlich praktisch herausgestellt hat. Um das ganze dann in eine native App umzuwandeln habe ich Baker benutzt. 

[ephigenia]

Burger (Taken with Instagram at Winterzauber am Gendarmenmarkt)