senäh

17senäh und so…

CSS Thumbnail

HTML/CSS/JS
16. Apr 2014
Kommentare: 0

Die Geschichte der CSS-Konventionen und mein aktueller Workflow

Kategorien: HTML/CSS/JS | 16. Apr 2014 | Kommentare: 0

Was als gute Praxis in der Webentwicklung angesehen wird, wandelt sich häufig rasant. Teils durch neue Erfahrungen, teils durch neue Technologien. Früher haben wir Webentwickler Styles ins Markup geschrieben – dann wurde CSS erfunden. Nun konnten wir durch Selektoren Teile des DOMs auswählen und mit Styles versehen. Aber je größer die Webseite wurden, umso größer und komplexer wurden die entsprechenden Selektoren, also führte man Namenskonventionen für CSS-Klassen ein, usw. etc. pp. Ihr kennt das Spiel!

Ganz allgemein betrachtet ist die Programmierung immer ein Kampf mit der Komplexität. CSS macht da keine Ausnahme. Dabei ist es nicht immer nur lohnenswert zu erfahren, was ganz aktuell sinnvolle Praktiken sind, sondern auch einen Blick zurück zu werfen, um aus alten Fehlern zu lernen. Und genau das möchte ich heute tun :) Weiterlesen →

HTML5 Logo Thumbnail 2

HTML/CSS/JS
14. Feb 2014
Kommentare: 0

Mein Trend 2014: Pre- und Postprocessing mit der selben Programmiersprache

Kategorien: HTML/CSS/JS | 14. Feb 2014 | Kommentare: 0

Mit der Übersetzung von einer Programmiersprache in eine andere hat sich fast jeder von uns bereits einmal auseinander gesetzt. Sei es Java mit GWT nach JavaScript zu kompilieren oder Less nach CSS. Das ganze wird häufig als Preprocessing beschrieben und war in der letzten zwei, drei Jahren ein hippes Thema im Front-End-Bereich. Als Stichwörter seien CoffeeScript, TypeScript, Sass, Less, Jade oder HAML genannt. Im Wesentlichen geht es – vor allem im Frontend – darum, dass die zur Verfügung gestellte Laufzeitumgebung (= der Browser) einige Restriktionen besitzt (= Technologie festgelegt auf HTML, CSS und JS) und man diese Restriktionen während der Entwicklung durch den Einsatz anderer Programmiersprachen umgehen möchte. Weiterlesen →

Bootstrap Titelbild

Rails
23. Jul 2013
Kommentare: 1

Rails: Twitter Bootstrap und Sass

Kategorien: Rails | 23. Jul 2013 | Kommentare: 1

Für ein Studienprojekt wollte ich auf eine Kombination von Rails und Bootstrap bauen. Das normale Bootstrap basiert auf LESS, einem CSS-Preprozessor, der mittlerweile weitgehend seinem Konkurrenten Sass gegenüber als unterlegen angesehen wird.

Dazu kommt, dass Rails standardmäßig auf Sass setzt. Entsprechend wollte ich Bootstrap in der Sass-Variante verwenden, was dank der Gems in Ruby und schlauen Devs da draußen ein Kinderspiel ist.

Nichtsdestotrotz bin ich auf ein paar Stolpersteine gestoßen, die ich anderen gern ersparen will. Darum hier eine kurze Beschreibung des Vorgehens. Weiterlesen →

Code Snippet Thumb

HTML/CSS/JS
09. Mrz 2013
Kommentare: 0

jQuery: CSS-Eigenschaft in style-Attribut entfernen

Kategorien: HTML/CSS/JS | 09. Mrz 2013 | Kommentare: 0

Folgende Situation: eine Animation wie fadeIn(666) ändert die Sichtbarkeit über Inline-Styles. Das style-Attribut wird also am Beginn der Animation auf opacity:0 gesetzt und über 666 Sekunden auf opacity:1 interpoliert. Logisch bis hierher.

Das Problem ist, dass das style-Attribut so bestehen bleibt. D.h. wenn ich dem Element jetzt eine Klasse .see-through {opacity:0.5;} über $element.addClass(‘see-through’) zuweise, ändert sich nichts. Das style-Attribut ist spezifischer und überschreibt deswegen die Angabe der Klasse.

Es gibt verschiedene Lösungsansätze. Weiterlesen →

Clearfix-Hack Artikelbild

HTML/CSS/JS
29. Feb 2012
Kommentare: 12

Clearfix-Hack für das saubere clearen von float-Elementen

Kategorien: HTML/CSS/JS | 29. Feb 2012 | Kommentare: 12

Ihr kennt doch sicherlich das typische, oft zu beobachtende <div class="clearfix"></div>? Vielleicht habt ihr es sogar massiv selbst in Verwendung?

Wozu clear?

Falls nicht: das ganze ist notwendig, um Elemente mit der CSS-Eigenschaft float funktionsgemäß einzusetzen. Mithilfe von float lassen sich Elemente nebeneinander anordnen (sie “fließen”). Nach dem letzten so positionierten Element muss oft ein clear erfolgen, um das weitere Floaten – und somit ein zerhacktes Layout – zu verhindern.

Faustregel: unnötiges Markup vermeiden

Weiterlesen →

Bootstrap

HTML/CSS/JS
03. Sep 2011
Kommentare: 1

Bootstrap: CSS-Framework zur schnellen Entwicklung moderner Webseiten

Kategorien: HTML/CSS/JS | 03. Sep 2011 | Kommentare: 1

Der ein oder andere kennt das vielleicht: man hat eine Idee. Man hat einen initialen Geistesblitz, formt diesen kurz und schon sagt man “könnte man mal machen”. Das wär doch was, mal schnell eine Webseite aus dem Boden gestampft. Doch dann kommen die destruktiven Gedanken. Eine Webseite muss konzipiert, designt und vor allem auch gebaut werden.

Wer schnell sichtbaren Ergebnissen auf Kosten von optischer Individualität den Vorzug gibt, der sollte sich an dieser Stelle mal Bootstrap anschauen. Weiterlesen →

Für WordPress-Blogger: Checkbox für Kommentar-Benachrichtigung verschieben

HTML/CSS/JS, WordPress
23. Aug 2011
Kommentare: 3

Für WordPress-Blogger: Checkbox für Kommentar-Benachrichtigung verschieben

Kategorien: HTML/CSS/JS, WordPress | 23. Aug 2011 | Kommentare: 3

WordPress-Blogger dürften es kennen: das Plugin “Subscribe To Comments” bzw. sein für deutsche Blogger notwendiges, datenschutzrechtlich legales Pendant “Subscribe To ‘Double-Opt-In’ Comments“. Einmal aktiviert gibt es Lesern die Möglichkeit bei neuen Kommentaren zu einem bestimmten Artikel eine Benachrichtigung per Mail zu erhalten. Feine Sache.

Kommentarformulare, Links: Perun, oben rechts: Caschy, unten rechts: Bohncore

Kommentarformulare, Links: Perun, oben rechts: Caschy, unten rechts: Bohncore

Weiterlesen →

HTML/CSS/JS
16. Jul 2011
Kommentare: 2

One-Page-Apps: Fundstücke für Webdesigner und -entwickler

Kategorien: HTML/CSS/JS | 16. Jul 2011 | Kommentare: 2

Es ist schon toll. Dank dem immer weiter verbreitetem Open-Source-Gedanken und dem Servicewahn der modernen Internetwelt profitieren auch wir Web-Nerds von dem, was dabei rumkommt. Konkret meine ich damit diese kleinen, nützlichen Helferlein namens One-Page-Apps.

Was sind One-Page-Apps?

One-Page-Apps sind einfache Services, die bestimmte oft wiederkehrende Aufgaben erleichtern. Das ist zumindest meine Definition davon :D

Bestes Beispiel: Fülltext. Wie oft benötigt man mal ein bisschen Lorem Ipsum? Ich google dann immer schnell und finde irgendeinen Generator. Wahrscheinlich sollte ich mir aber einfach mal ein Plugin/Makro/Snippet in meinen Komodo reinhauen, hehe.

Aber es gibt auch durchaus wichtigere Anwendungsfälle. Durch diese One-Page-Apps kann man eine Menge Zeit sparen. Ich habe dazu gerade diesen Artikel von Chris Coyier auf CSS-Tricks (kennste, ne?) gefunden. Neben seinen eigenen Ausführungen dazu habe ich auch mal einen Blick in die 114 Kommentare (Stand: jetzt gerade) geworfen und möchte nun hier mal die meiner Meinung nach nützlichsten Tools zusammenfassen. Weiterlesen →

960pxgrid_artikelthumb

HTML/CSS/JS
16. Jun 2011
Kommentare: 9

Der 960px-Trugschluss

Kategorien: HTML/CSS/JS | 16. Jun 2011 | Kommentare: 9

Jeder Webentwickler dürfte das schonmal so oder in einer abgewandelten Form gelesen haben: ein modernes Webseiten-Layout sollte nicht breiter als 960px sein. Das kommt nicht von ungefähr. Einerseits berücksichtigt man dabei Rechner mit älteren Auflösungen sowie Netbooks, die in vielen Fällen ebenfalls keine allzu hohe Auflösung parat haben. Man orientiert sich dabei an 1024px Breite. Die restlichen (1024 – 960 =) 64px sind dabei als Leerraum gedacht. Whitespace ist wichtig! Weiterlesen →