Develovers
Piotr Kwiatkowski hat ein Set von 300 Icons im SVG, AI, ESP, PSD, CSH und PNG Format zusammengestellt, die außerdem “royalty free” und sowohl für den persönlichen, als auch für kommerziellen Nutzen kostenlos zu haben sind.
Die Icons sind schick und passen ohne Probleme in ein “Modern UI”-Thema und durch die vorhandenen SVG-Dateien kann man die Icons auch nach belieben bzw. Bedarf anpassen.
IKONS – 300 free vector icons from Piotr Kwiatkowski
(via t3n)
gulp.js und browserify sind die neuen Sterne am Himmel der Webentwicklung, aber ist das wirklich notwendig?
Im Falle von Gulp sehe ich (für mich und meine Projekte) – abgesehen von Vereinfachung der Syntax keinen wirklichen Mehrnutzen gegenüber unseren Grunt-Workflows. Und Asynchrone Buildscripts finde ich auch nicht wirklich anziehend – was nicht heißen soll, dass es keinen Bedarf dafür geben könnte.
Browserify kann ich aktuell schlecht einschätzen. Zuerst einmal klingt das Require-Modell ganz gut, aber hier sehe ich noch weniger Mehrwert beim Einsatz, als mit “traditionellen” Methoden wie concat und uglify. Über die nicht mehr nötige zentrale Steuerung, was am Ende alles zusammengepackt wird, kann man dann geteilter Meinung sein.
Englischsprachige Podcasts zu Webdevelopment-Themen gibt es wie Sand am Meer. Deutschsprachige sind da eher mau gesäht, wenn ich das so grob überblicke. Empfehlen kann ich folgende, die ich auch selbst regelmäßig höre:
Wöchentlicher Podcast über aktuelle Themen aus der Entwickler-Welt.
Der “Mal eher wenn mal Themen anliegen”-Podcast mit viel Konferenz- und Selbstständigen-Know-How. Bisschen mehr meta als Workingdraft.
Wenn ihr weiter Tipps habt, her damit!
Neulich schrieb ich ja schon über den sehr interessanten Styling-Ansatz von Google Chrome in Verbindung mit display: table-row. Das entdeckte ich im Zuge des Produktkonfigurator-Projekts. Nun hat es sich ergeben, dass ich im Zuge einer Optimierung eines Webshops für einen Kunden umsetzen sollte, dass alle Footer-Widgets (genauer: 4 Listen mit Navigationspunkten, aufgeteilt auf 4 Spalten) als jeweils eine Box mit gleicher Höhe wie die anderen 3 dargestellt werden sollte.
Das ganze soll natürlich möglichst dynamisch sein, damit unterschiedliche Schriftrenderings auf unterschiedlichen OS- und Browserkombinationen problemlos läuft. Vorgabe des Kunden: Alte Browser (IE<10) dürfen schlechter aussehen, aktueller Firefox ist die Referenz. (‘Und alle so yeah!‘).
Vorher schon habe ich im Zuge der Kästenanpassung für die Breitenoptimierung der Kästen auf box-sizing: border-box; umgestellt, so dass ich außer den Margins hier eigentlich keine größeren Probleme erwartete: Einfach die Kästenelemente auf Tabellen-Zellen-Style umstellen, fertig – wenn eine Zelle höher wird, werden die anderen automatisch auch höher. Jung und naiv.
Nach einer Experimentierphase mit zwei Wrap-Elementen, die display: table und display: table-row stand fest: Es gibt keine Möglichkeit bei display: table und Co., das Spacing der “Tabellenzellen” zu beeinflussen, so dass eine breiter Kasten statt 4 angezeigt wurde. Margins: Ein Ding der Unmöglichkeit. Und weiter mit Wrappern innerhalb der Kästen um das alte Design wieder herzustellen fand ich nicht zielführend.
Ich hatte dann doch kurz überlegt, ob ich nicht das Javacript von OXID anschauen und wieder aktivieren sollte, welches eine Equalheight-Funktion hat, die aber scheinbar mit border-box nicht klarkommt. Da der Kunde (für einen Webshop) sehr progressiv auf Browserebene arbeitet, hab ich dann überlegt, welche Möglichkeiten CSS only dann noch in Frage kommen, ohne am DOM viel zu verändern und dachte mal kurz an das Flexbox-Modul. Und hey: Es funktioniert ab IE10 und in allen modernen Browsern.
Dazu kam folgende Anforderung, die die Entscheidung leichter machte: der letzte Kasten, der bisher nur eine Zeile enthielt wurde mit mehr Inhalt (dynamisch) gefüllt, war nun aber 1 Zeile länger als die anderen Kästen.
Wrapper um die Kästen mit display:flex-box und die Kästen auf flex:1 gesetzt, fasst in allen aktuellen Browsern. IE 8 und 9 kennen Flexbox nicht und machen einen Fallback auf die bereits vorhandene float-Lösung (wodurch der 4. Kasten geringfügig größer ist als die anderen).