Let's Encrypt SSL Zertifikant in wenigen Sekunden installieren

$ git clone https://github.com/letsencrypt/letsencrypt
$ cd letsencrypt
$ ./letsencrypt-auto

Mehr Informationen im GitHub Repository von Let’s Encrypt oder in der offiziellen Dokumentation.

Verwende den Befehl `letsencrypt-auto` in einem CronJob, um spätestens nach 3 Monaten ein neues Zertifikat zu erhalten.

Responsive Images mit ’srcset‘

Bilder und Grafiken für Webbrowser in den geeigneten Maßen bereitzustellen ist spätestens seit der Einführung von Retina-Displays nicht mehr ganz so einfach wie früher. Es gibt zwar auch hier unterschiedliche Lösungen, allerdings sind diese oft auch mit Nachteilen verknüpft. Bspw. könnte mit JavaScript abgefragt werden, ob das aktuell verwendete Display eine hohe Pixeldichte hat und demnach ein hochauflösendes Bild bereitstellen. Bis das JavaScript fertig geladen ist passiert dann aber erst einmal gar nichts oder es wird zuerst das niedrig aufgelöste Bild geladen, was wiederum erhöhten/unnötigen Datenverbrauch bedeutet. „Responsive Images mit ’srcset‘“ weiterlesen

Manuell WordPress-Update installieren

Für gewöhnlich funktioniert die automatische Update-Funktion von WordPress ohne Probleme. Doch, was ist, wenn dies einmal nicht der Fall ist und gerade eine schwerwiegende Sicherheitslücke im System klafft?

Solltest du Probleme beim automatischen Update haben, kommst du wohl kaum um ein manuelles Update herum, außer du möchtest mühsam nach Lösungen recherchieren.
Aber auch das manuelle Update ist gar nicht so schwierig. In dem Beitrag möchte ich kurz das Vorgehen verdeutlichen.

„Manuell WordPress-Update installieren“ weiterlesen

HTML5 ApplicationCache sucks!

Die vom W3C publizierte Definition des ApplicationCache ist meiner Meinung nach eine gute Sache. Offline-fähige Websites und Apps sind beim aktuellen Stand der mobilen Netzabdeckung immer noch wichtig.

Leider leidet die Schnittstelle an zu wenig Kontrolle seitens der Programmlogik. Es ist z.B. nicht möglich aus JS heraus einen bestehenden Cache zu löschen oder das Herunterladen von Dateien zu unterbrechen. Das einzige was als Programmierer über die API möglich ist zum einen applicationCache.update() aufzurufen, woraufhin das Cache-Manifest auf Änderungen überprüft wird und zum anderen applicationCache.swapCache(), womit lediglich der alte Cache mit dem neuen ausgetauscht werden kann.

Es ist also eine Read-Only Schnittstelle, wo der Programmierer zum Beobachter wird. Auch wenn kein JS implementiert wurde, kann der Browser nicht daran gehindert werden, das festgelegte Cache-Manifest samt Dateien und Inhalte herunterzuladen (um den Start z.B. selber festzulegen). Hinzu kommen Quota-Beschränkungen seitens des Browsers und unterschiedliche Verhaltensweisen in den Browser-Implementierungen.

Safari z.B. kriegt Probleme, wenn mehrere iFrames auf dasselbe Cache-Manifest zugreifen, da nicht wie in Chrome und Firefox alle iFrames alle Events erhalten, sondern Safari nur einem iFrame das Privileg gibt alle Events (im Speziellen die abschließenden Events wie: noupdate, updateready, cached oder error) zu erfassen.
Die Verwendung im UIWebView einer iOS-App ist zwar möglich, aber dort stößt man bei ca. 50 MegaByte an die Grenze der ApplicationCache-Quota, welche sich im UIWebView nicht anpassen lässt (getestet im IAB von PhoneGap). Apropos Größe, bei einer Datei-Anzahl > 200 kann es bei Safari und iOS schon eine Weile dauern bis alle Dateien erfolgreich heruntergeladen wurden.

Hoffentlich wird es mit HTTP/2.0 und Service Worker bald besser!

CodeKit 2 – Tool für Frontend-Entwickler

Codekit 2 bietet Frontend-Entwicklern viele automatisierte Prozesse wie z.B. das Kompilieren von SASS-, CoffeeScript, LESS, Jade- oder HAML-Dateien.

Außerdem kann das Tool gleichzeitig sämtliche Dateien komprimieren (Minify) und Linting Tools wie CoffeeLint und JSLint aufrufen und verpackt das Ganze in einer übersichtlichen GUI. Bis hierhin schon ein großartiger kleiner Helfer.

Aber Codekit kann noch mehr: Es kann Assets und Pakete über Bower verwalten und aktualisieren und es startet einen Webserver, der das Projekt im Netzwerk zum Testen für andere Browser und Geräte verfügbar macht.

Beim Kompilieren einer CoffeeScript-File wird das Browserfenster automatisch aktualisiert. Für SASS-Dateien wird das CSS im Browser einfach nur ausgetauscht, so dass nicht mal eine Aktualisierung gemacht werden muss.
Seit dem letzten Update (2.2) werden nun auch alle Eingaben im Browser auf andere Browser, geräteübergreifend übertragen, ähnlich wie es mit BrowserSync möglich ist.

Für mich mittlerweile eine unverzichtbares Tool bei der Frontend-Entwicklung, da ich damit meine Änderungen immer sofort im Browser, auf dem iPad und auf meinem Android Tablet gleichzeitig begutachten kann.

CSS3-Animation Frameworks

Mit CSS3 kommen (und sind bereits) viele neue Features in das Repertoire moderner Webbrowser gelangt mit denen u.a. Bildfilterfunktionen (wie Weichzeichnen) und Animationen (Bounce, Slides, …) möglich werden.
Um gerade bei CSS-Animationen nicht den Überblick zu verlieren gibt es hier 2 nützliche Bibliotheken:

Tägliche Dosis: Weiterbildung mit GitHub

Aktuelle Technologien entwickeln sich rasend schnell. Täglich erscheinen neue Start-Ups, Frameworks und Trends. Dort als Entwickler am Ball zu bleiben ist nicht immer ganz einfach.

Was mir dabei hilft neue Technologien zeitnah kennenzulernen sind Tech-Blogs wie t3n, heise, ZDNet, Tutorials von Tuts+ und immer häufiger auch GitHub’s Trendings.

Heute fand ich auf GitHub unter anderem eine Sammlung kostenloser Fachbücher im Bereich Programmierung. Airbnb hat dort auch einen JavaScript Style-Guide publiziert. Und eine JavaScript Buchserie, die auf Kickstarter ins Leben gerufen wurde, wird dort veröffentlicht.

Das Tolle an GitHub: Es ist kostenlos und jeder darf es benutzen. Ein regelmäßiger Blick in aktuelle Trends lohnt sich also.

[ ] Brackets

Adobe’s Editor „Brackets“ richtet sich an Web-Entwickler und ist auf jeden Fall ein Blick wert. Er bietet u.a. eine Live-Vorschau direkt im Browser, Farb- und Bildvorschau direkt im Quelltext und er ist erweiterbar durch die integrierte „Erweiterungs-Verwaltung“.

Brackets Editor

 

Der Editor steht für alle Plattformen zum Download bereit.

Neben Brackets kann ich (wie in anderen Blog-Beiträgen bereits) auch den Sublime Text Editor empfehlen. Dieser bietet ebenso eine Paketverwaltung (Package Control) womit sehr einfach weitere Plugins installiert werden können. Hier ist der Vorteil, dass es aktuell noch mehr Erweiterungen für Sublime Text als für Brackets verfügbar sind.