CSS3 Sugar für Espresso

CSS3 Sugar

Screenshot Autocompletion

Damit Espresso auch CSS-mäßig auf der Höhe bleibt, schiebe ich gleich noch einen CSS3 Sugar hinterher. Im Vergleich zum HTML5 Sugar war dies um einiges schwieriger zu bewerkstelligen, da es doch ein etwas komplizierteres Thema ist und ich mich erst mal selbst intensivst mit der ganzen Thematik auseinandersetzen musste. Ich hab die Specs von oben nach unten gelesen, zig Webseiten mit Feature-Implementations-Vergleichs-Tabellen durchforstet und so ganz nebenbei einiges über Regular Expressions gelernt. Insofern hat es mir selbst schon einiges gebracht. Ich hoffe, es bringt euch auch was.

Weitere Infos und Downloadmöglichkeit: CSS3.sugar auf Github

Veröffentlicht am 01.10.2010 um 23:12 Uhr
3 Kommentare

text.sugar für Espresso

Screenshot Action-Menu Espresso

So schön das Coding mit Espresso auch ist, einige aus TextMate bekannte Funktionen vermisst man schmerzlich. Glücklicherweise lässt sich Espresso recht gut selbst erweitern. Zum Beispiel mit Hilfe von Ian Becks Spice, welches dazu einfachen XML-Syntax und JavaScript verwendet.

Um ein paar der mir wichtigen Funktionen und Shortcuts auch in Espresso nutzen zu können, habe ich ein kleines Plugin (Sugar im Espresso-Jargon) zusammengestellt, dass folgende Funktionen beinhaltet:

  • Zeile mit der nächsten zusammenführen (Join Line With Next)
  • Auswahl duplizieren (Duplicate Selection)
  • Zeile löschen (Delete Line)
  • Zeile hoch- oder runterschieben (Move Line up/down)

Außerdem habe ich noch ein paar Snippets eingebaut, die ein experimentelles Autopairing ermöglichen (ausgewählten Text in Klammern oder Anführungszeichen einschließen bzw. Tab-Vervollständigung von Anführungszeichen und Klammern).

Mehr Infos und Downloadmöglichkeit: text.sugar auf github

Veröffentlicht am 18.02.2010 um 12:04 Uhr
Keine Kommentare

Introduction to WCAG2

Boagworld web design podcast: Introduction to WCAG 2 (miese Audioqualität aber durchaus sehenswert)

Veröffentlicht am 31.01.2009 um 13:22 Uhr
Keine Kommentare

Lesenswertes über CSS

Zum einen 7 Principles Of Clean and Optimized CSS Code, zum anderen (schon etwas älter) Smart CSS ain’t always Sexy CSS.

Veröffentlicht am 19.08.2008 um 06:37 Uhr
Keine Kommentare

Dot Asia

Am Mittwoch beginnt die Landrush-Phase für die neue Top-Level-Domain .asia und macht somit den Weg frei für tolle neue Domainnamen wie www.funt.asia, script.acul.asia oder ähnliches. Eine gute Gelegenheit also für all die neuen Startups da draussen, mal auf Domainfang zu gehen.

Veröffentlicht am 18.02.2008 um 13:30 Uhr
2 Kommentare

AlphaImageLoader und nicht-klickbare Links

Der AlphaImageLoader ist ein proprietärer Filter, den man häufig verwendet, um den Internet Explorer 6 dazu zu bringen, Alpha-Transparenzen von PNG-Dateien anzuzeigen. Ein Problem, welches beim Einsatz des AIL auftreten kann: Links und Formelemente innerhalb des Bereichs, auf den der Filter angewendet wurde, sind nicht mehr klickbar. Schnelle Abhilfe schafft in diesem Fall das Setzen von position: relative für die entsprechenden tags (<a>, <input />, etc.).

Veröffentlicht am 25.01.2008 um 19:31 Uhr
Keine Kommentare

Liebe Norisbank

Screenshot Webbanking Anwendung der Norisbank mit sinngemäß dem folgenden Text: Sehr geehrter Kunde, Aufgrund eines Bedienfehlers z.B. ein Doppelklick ist ein Fehler aufgetreten, bitte melden Sie sich ab und wieder an

Sehr geehrte Norisbank,

Aufgrund eines Programmierfehlers, verursacht durch einen Ihrer Webentwickler, ist ein Fehler aufgetreten. Bitte beenden Sie dessen Vertrag und verlangen Sie umgehend eine kostenlose Nachbesserung. Kontrollieren Sie danach, ob dieser Auftrag auch ausgeführt wurde, indem Sie versuchen, mit der Vor- und Zurück-Taste Ihres Internet-Browsers innerhalb Ihrer Webanwendung zu navigieren. Bitte rechnen Sie künftig damit, dass Ihre Kunden selbst entscheiden möchten, wie sie auf Ihren Internetseiten navigieren und auch damit, dass jegliches von Ihnen als “Bedienfehler” tituliertes Verhalten in jedem Fall auftreten wird. Machen Sie dafür jedoch bitte nicht Ihre Kunden verantwortlich, sondern verbessern Sie gefälligst Ihr Internetangebot!

Ihr Maurice Kühlborn

Veröffentlicht am 17.07.2007 um 07:43 Uhr
2 Kommentare

tingelets: Bookmarklets for Web Developers

tingelets

Färbt euer HTML ein!

Mit tingelets starte ich heute ein kleines Projekt, dass euch Webentwicklern und -designern das tägliche Leben ein wenig erleichtern soll:

Die Vorgeschichte

Bei mir kommt es recht häufig vor, dass ich zu Debug-Zwecken zusätzliche Regeln in meine CSS-Dateien einfüge. Meistens handelt es sich dabei um Hintergrundfarben, die bestimmte Elemente hervorheben sollen, damit man die Größen und Abstände parallel in mehreren Browsern vergleichen kann.


div#column {
    margin: 2em 0;
    float: left;
        background: #5ff; /* debug */
}

Da dies oft recht mühsam ist, vor allem wenn man später wieder die richtige Zeile zum Herauslöschen finden will, habe ich es mir angewöhnt, Debug-Angaben immer einen Tab weiter nach rechts einzurücken.

Dennoch hab ich mich oft gefragt, ob das nicht noch einfacher geht. Sicher gibt es tolle Tools, die diese Aufgabe mit Bravour erledigen, man schaue sich nur das großartige Firebug Plugin, den Safari Web Inspector oder Xyle scope an. Das Problem bei der Sache ist allerdings, dass diese Lösungen immer auf eine Rendering-Engine begrenzt sind – um Ergebnisse zu vergleichen, also unbrauchbar.

Die Idee

Kürzlich hatte ich eine Idee, die genau an dieser Stelle ansetzt: Warum nicht das ganz über Bookmarklets steuern? Gesagt getan hab ich mich die letzten Tage mal hingesetzt und die tingelets Bookmarklets Suite gebastelt, die als Ergänzung zu den oben genannten Tools das Leben des gemeinen Webdesigners erleichtern soll.

Einmal eingerichtet, kann man in Windeseile beliebige Tags, CSS-Klassen oder auch IDs einfärben und sich so einen schnellen, browserübergreifenden Eindruck von einer beliebigen Seite verschaffen:

bartelme.at tinged
praegnanz.de tinged
daring fireball tinged

Und so funktioniert’s

Auf dem tingelets-Server liegt zum einen die Datei tingelets.js, die alle Funktionen enthält sowie für jedes Bookmarklet ein eigenes kleines Script, dass den Funktionsaufruf erledigt. Beide werde über das Bookmarklet in die aktuelle Seite geladen und ausgeführt. Passende Hintergrundbilder werden ebenfalls vom tingelets-Server geladen und angezeigt.

medienfreunde tinged

Mehr Infos und natürlich die Bookmarklets findet ihr unter www.tingelets.com.

Über Feedback würde ich mich natürlich freuen, besonders im Hinblick auf die Weiterentwicklung: Was fehlt, was könnte man weg lassen, was könnte man noch ändern/optimieren, welche bugs gibt es?

Und weil getingete Seiten so hübsch aussehen, hab ich gleich noch eine flickr-group angelegt, auf die ihr eure Screenshots hochladen könnt. Viel Spaß.

Veröffentlicht am 02.02.2007 um 11:09 Uhr
13 Kommentare

Edit in TextMate

Templates in einem HTML-Textfeld zu bearbeiten macht keinen Spaß. Leider ist dies bei diversen Blogtools standardmäßig der Fall. Für alle TextMate User gibt es aber Abhilfe: Edit in TextMate. Dieses kleine Tool lässt sich ganz einfach über Bundles -> TextMate -> Install Edit in TextMate installieren und nistet sich fortan im Bearbeiten-Menu aller Programme ein. Befindet man sich nun z.B. in Textpattern in einem Textfeld zum Bearbeiten eines Templates (oder in einem beliebigen anderen Formularfeld), kann man über die Tastenkombi Control-Apfel-e den enthaltenen Text in einem neuen TextMate Fenster öffnen und bearbeiten. Nach Speichern und Schließen des Fensters wird der bearbeitete Text automatisch wieder in das HTML-Textfeld eingefügt.

Veröffentlicht am 07.01.2007 um 21:24 Uhr
5 Kommentare

Neu im Webdesigner Bücherregal: Ruby For Rails

“Ruby For Rails Cover”

Der Titel lässt ja schon vermuten, worum es geht: Dieses Buch erklärt die Grundzüge der Programmiersprache Ruby, jedoch immer im Hinblick auf die Anwendung in Rails bzw. an Hand von Beispielen aus dem Web-Framework. Es richtet sich in erster Linie an Leser, die bereits mit Rails Erfahrungen gesammelt haben zudem aber gerne besser verstehen möchten, was im Hintergrund der Applikation abläuft und wie die einzelnen Teile einer Rails-Applikation zusammenspielen. Es lohnt sich auch insofern, dass man viele Ruby-eigene Sprachelemente entdecken und besser verstehen kann, wie zum Beispiel Module oder Blocks, die die Sprache so effektiv und einfach machen. Das Buch geht wie ein Tutorial vor, eigenet sich aber dennoch auch prima als Nachschlagewerk für den täglichen Gebrauch, gerade für Leute wie mich, die nicht ausschließlich programmieren sondern die meiste Zeit mit HTML, CSS und Photoshop beschäftigt sind.

Und weils so schön ist, hier noch ein kleiner Auszug aus dem Vorwort, verfasst vom Großen Meister persönlich:

[…] Tasks that would have made my eyes roll in PHP or Java made my smile light up as Ruby time and time again showed that programming could be simple, fun, and outright beautiful. […]

[…] David clearly has an encyclopedic knowledge of Ruby. Not only does he understand how to use it, but he can also explain why things are the way they are. He connects the dots and allows you to see the bigger picture, providing the missing piece that turns puzzle into picture. […]

Zum Weiterlesen:

Veröffentlicht am 09.10.2006 um 19:06 Uhr
Keine Kommentare