Archive | Programmieren

Link

Top 20 Secrets of Coda 2

flattr this!

Da ich gerne mit Coda 2 arbeite, sind Tipps und Tricks immer hilfreich und diese möchte ich weitergeben.
Panic (die Entwickler hinter Coda, Transmit und Co) haben in ihrem Blog 20 Secrets veröffentlicht, die einem nicht sofort auffallen oder höchstens durch probieren.

Safari Markdown Viewer

flattr this!

Ich habe mich heute Abend mal eine Stunde hingesetzt und mir eine Safari Extension gebaut um Markdown formatierte Dateien ordentlich betrachten zu können.
In Open-Source Projekten wird Markdown immer häufiger eingesetzt um die READMEs und Anleitungen zu schreiben, da es auch in der Roh-Variante gut lesbar ist und man die Semantik nicht verloren geht.
Optisch ansprechend sind diese Dateien aber dann auch nicht. Dieses Problem löst meine Safari Extension.

Ausprobieren könnt ihr die Extension zum Beispiel hier.

Download Markdown Viewer Safari Extension

Instagram for MooTools

flattr this!

Bereits am Montag veröffentlicht, aber leider jetzt erst der Blog Eintrag dazu.

Ich habe einen neuen Plugin für MooTools veröffentlicht.
Für alle Webentwickler, die gerne Instagram auf ihrer Seite einbinden möchten habe ich Instagram for MooTools zusammengestellt.
Aufgeteilt in 8 JavaScript Dateien und mit gut 25 Methoden wohl mein bisher größter Plugin.

Der Plugin bietet Methoden für fast alle API Endpoints von Instagram. Die einzigen Methoden die fehlen sind Dinge wie, jemandem folgen / endfolgen, Kommentare posten und löschen und die Like Funktion. Diese werden aber in der nächsten Version nachgeliefert.

Werft einfach mal einen Blick auf meine Demo Seite und schaut euch an, was man so machen kann.

Laden könnt ihr euch die aktuellste Version in der MooTools Forge.

Safari Extension – Simplegram

flattr this!

In den letzten 2 Tagen habe ich mich etwas mit Safari Extensions auseinander gesetzt und habe erst mal nur eine wirklich kleine und simple Extension gebaut.

Die Extension heißt Simplegram und soll die instagr.am Foto-Seiten etwas minimalisieren.
Mich hat die Werbung für deren iPhone App schon immer etwas genervt (auch da ich sie auch schon nutze ).
Der Hintergrund ist dunkler, so kann man sich mehr auf das Bild konzentrieren.
Das Icon der Extension ist von Petter Myhr (deviantART / Twitter).
Danke für die Erlaubnis es nutzen zu dürfen

An die Apple Safari Extension Gallery habe ich die Extension auch schon geschickt, mal sehen ob sie angenommen wird.

Update

Leider hat Instagram seine Fotoseiten geändert. Von der Farbgebung her nun wie mein Plugin, aber mit mehr Informationen zum Standort etc.
Die aktuelle Extension macht keinen Sinn mehr, vielleicht werde ich sie bei Zeiten mal updaten um trotzdem noch eine minimalistische Ansicht zu bekommen.

CSS3 Editor

flattr this!

In meinem letzten Artikel habe ich es angekündigt:
Ich habe an meinem CSS3 Editor weiter herum hantiert, da ich ihn als Projekt für die Schule eingereicht habe (an Stelle einer Klausur).
Vergangenen Donnerstag musste ich ihn dann präsentieren und er kam auch gut an (eine Note habe ich dafür noch nicht).
Da ich ihn aber auch selbst nutze wird er mit der Zeit sicher immer etwas erweitert.

Ich empfehle die Nutzung von mindestens Safari 5, Chrome 8 oder Firefox 4, da sonst die Preview Box wohl nicht vollständig funktionieren wird.

> Zum Editor

Update 02. April

Ich habe den Application Cache (AppCache) hinzugefügt, damit könnt ihr die URL des Editors auch aufrufen, wenn ihr gerade über keine Verbindung zum Internet verfügt.
Ich habe es mit Firefox 4, Chrome 10 und Safari 5 getestet.

MooRetina – hochauflösende Bilder nur wenn nötig

flattr this!

Wieder eine neue Extension von mir für MooTools und dieses Mal etwas iPhone orientiert.
Seit dem iPhone 4, und jetzt auch dem iPod Touch in der vierten Generation, haben Webentwickler ein klitzekleines Problem mit ihren Webapps:

Das iPhone 4 und der neueste iPod Touch haben ein Retina Display verpasst bekommen, welches eine viel höhere Pixel-Dichte aufweist (324 Pixel pro inch).
Das Problem welches sich dadurch ergibt ist, dass viele Bilder und Grafiken einfach zu wenig dpi haben  und somit auf den neuen Geräten etwas verpixelt aussehen.

Mit meinem kleinen Plugin biete ich eine Lösung, ohne das auch auf den “alten” Geräten auch die hochaufgelösten Bilder geladen werden müssen.
MooRetina sucht nach img-Tags im HTML Code und versucht eine hochaufgelöste Version des dort angegebenen Bildes zu laden, wenn der Besucher der Seite mit einem Gerät mit Retina Display surft.
Wenn das normale Bild vergangenerSommer.jpg heißt, versucht MooRetina das Bild vergangenerSommer-2x.jpg zu laden (der Suffix lässt sich in den Optionen von MooRetina umstellen).

Inspiriert hierzu wurde ich von Troy Mcilvena, der diese Lösung für jQuery bereit gestellt hat.

Eine Demo findet ihr HIER. Beachte: Funktioniert nur mit dem iPhone 4 oder dem neuen iPod Touch (der mit der Kamera).
Den Download findet ihr wie immer in der MooTools Forge.

CSS3 Edit

flattr this!

Ich möchte euch kurz ein kleines Tool vorstellen, welches ich mir selbst gebastelt habe um mir die Web-Entwicklung etwas zu erleichtern.
Ich habe mir einen kleinen CSS3 Gradient-Editor gebastelt, der nach dem “What you see is what you get”-Prinzip  am Ende einen CSS Code für Farbverläufe ausspuckt.
Ich habe mir diesen Editor deshalb gebastelt, weil ich mich selbst immer recht schwer getan habe derartige Verläufe zu erstellen, vor allem da der Code für WebKit (Safari, Chrome) und Gecko (Firefox) etwas unterschiedlich ist.

Ihr könnt die Farben selbst wählen und die Position an der diese Farbe erreicht wird.
Die WYSIWYG-Funktion funktioniert aktuell nur in Firefox und Safari/Chrome.

Es werden demnächst noch ein paar Funktionen dazu kommen um sich nicht nur auf die Farbverläufe zu spezialisieren.

> Zum Editor

MooTools Mobile

flattr this!

Der @cpojer (MooTools Developer) hat bei github eine Extension für den neuesten MooTools Core (1.3) geschrieben, welche die MooTools Funktionalität um Touch Events erweitern soll und sie mootools-mobile (github Link) getauft.

Ich war so frei und habe mir einen Fork (github Link) gemacht und in diese Extension die Events für swipe und pinch eingebaut.
Der @cpojer hat angekündigt es in den Haupt-Tree von sich zu mergen. Somit sollte der Augenmerk auf sein Repository fallen.

Nun gibt es also doch eine kleine Extension von mir bezüglich Multitouch for the web

Update – 29. Juli 2010

@cpojer hat meine Änderungen übernommen und den Code auch noch etwas angepasst.

Introducing Multi-Touch… to the web

flattr this!

Spätestens seitdem das iPad in den USA erschienen ist, blühen überall iPad optimierte Webseiten auf die mit Hilfe von HTML5 erstellt werden.
Allerdings wird HTML5 in den meisten Fällen nur zur Einbindung  von Videos genutzt, doch die Spezifikationen bieten viel mehr wie z.B. Geolocation und gerade auf dem iPad und iPhone auch Multi-Touch.
Ja, richtig gelesen. Das iPhone und das iPad erlauben das Erstellen von Multi-Touch Web-Applikationen. Wie es bei Android Geräten aussieht weiss ich nicht.
Ich habe mich seit Freitag immer mal wieder  damit auseinander gesetzt und habe es zu zwei kleinen Demos gebracht.

Mir tun sich dort gerade wieder einige Ideen auf, was sich damit so alles machen lässt, gerade auf Geräten wie dem iPad, die genug Fläche zum touchen bieten.
Ich werde mal schauen in wie weit sich die Multi-Touch Fähigkeit  in ein MooTools Plugin pressen lässt

Locate.js – Geolocation for MooTools

flattr this!

Ich bin ja mittlerweile ein großer Fan der MooTools Schmiede (Link) und gerade eben habe ich meine dritte MooTools Klasse dort hineingestellt.

Dieses Mal handelt es sich um Locate.js, eine Klasse die es Web-Entwicklern einfach machen soll die aktuelle Position seiner Besucher heraus zu finden.
So bieten diese Funktion der aktuelle Firefox und auch das iPhone seit der Version 3.0. Ich vermute das Android Geräte dieses Feature bei Webseiten auch nutzen können.

Die Idee dazu kam mir eigentlich mit Google Buzz, welches komplett Webbasiert funktioniert.
Mir war es schon vorher bekannt, dass mit der Einfuhr von HTML5 auch die Geolocation mit integriert wurde, aber irgendwie hat Google mir mit Buzz den letzten Stoß versetzt.

Ich habe mich in den letzten Tagen etwas mit der API für die Geolocation (Link zur Dokumentation) auseinander gesetzt und das ganze mit etwas MooTools Power verstärkt.
Habe selber ein paar Ideen was man mit dieser kleinen Klasse so alles basteln könnte, bin aber mal gespannt was die MooTools Community so bastelt.

Schaut euch auf der Forge Seite die Demo an und ladet euch die Klasse.
Link: Locate.js auf MooTools Forge

UPDATE

Wow, kaum in der Forge haben die Jungs von MooTools meine Klasse über ihren Twitter Account beworben.
Vielen Dank =)

UPDATE 2

Locate.js ist auch im MooTools Roundup February 2010 benannt worden!
Zudem habe ich mittlerweile  Version 1.2 herausgebracht welche es ermöglicht die Himmelsrichtung in die man sich bewegt abzufragen (als Erweiterung zum Winkel) und man kann die Distanz zu einem Ziel ermitteln (direkte Luftlinie).

* = Affiliate-Link