PixelscheucherCSS, HTML, JS/jQuery, Browser, …
Wenn ihr noch einen Vorsatz für dieses Jahr sucht – jetzt noch … – oder einfach Lust habt, coden/programmieren zu lernen, könnte Code Year was für euch sein. Die erste Lektion ist schon gestartet und führt euch in JavaScript ein.
Make your New Year’s resolution learning to code.
Sign up on Code Year to get a new interactive programming lesson sent to you each week and you’ll be building apps and web sites before you know it.
Etwas gehobenere Kost für den Frontend-Entwickler von heute hat Juriy Zaytsev (kangax) veröffentlicht: Perfection kills » Profiling CSS for fun and profit. Optimization notes.. Er hat sich angeschaut, wie sich verschiedene CSS-Selektoren aber auch CSS-Eigenschaften, insbesondere aus CSS3, auf die Performance auswirken.
Mitnehmen kann man, dass der *-Selektor vermieden werden sollte, ein input[type="…"] performanter als ein [type="…"] ist und das insbesondere border-radius, transform: rotate() und box-shadow stark auf die Performance-Bremse drücken können:
Insbesondere sollte man auch darauf achten, nicht (mehr) benötigte Selektoren aus dem Stylesheet zu schmeißen.
Mancher von euch hat vielleicht noch schon mal das <ins>-Element benutzt aber keine rechte Idee gehabt, es zu stylen. Ich hab das hier beim Pixelscheucher jetzt so gelöst, Optimierungsbedarf benötigt:
article p ins text-decoration:none; -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); -ms-transform: rotate(-1deg); -o-transform: rotate(-1deg); transform: rotate(-1deg); box-shadow: 1px 1px 1px #999; display:inline-block; }
Was tut es? Nun, es macht aus dem <ins> ein inline-block-Element, rotiert es um -1° und verpasst ihm einen leichten Schatten nach unten rechts. Sieht dann nämlich wie nachträglich reingeklebt raus, denn <ins> steht ja auch für nachträglich eingesetzten Inhalt.
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.
(Normalerweise schreibe ich CSS-Anweisungen in eine Zeile, der Übersichtlichkeit halber jetzt mal nicht.)
Ich hatte da letztens so ein Problem mit dem Contao’schen Nachrichtenleser und einem sich nicht anpassenden Seitentitel. Dieser wollte sich partout nicht ändern und nahm nicht den Titel der Nachricht an, wie er das in neueren Versionen von Contao ja eigentlich macht. Der Fehler lag darin, das Nachrichtenleser-Modul per Insert-Tag einzubinden und nicht ganz normal als Inhaltselement Modul. Bin mir nicht sicher ob ich das als Bug einstufen soll, aber wenn ich mal kurz Zeit habe, werde ich das in den Bugtracker einfließen lassen.
(Hätte ich natürlich auch machen können, als ich diesen Blogbeitrag schrieb, aber damit ist vielleicht auch schon mal ein paar Leuten geholfen, sollten Sie auf dieses Problem stoßen.)
Ach, hier, mein Contao-Community-Profil.
Wenn ich mir das richtig in Erinnerung rufe, bestanden meine Anfänge im Frontend (HTML, CSS und so) damit, dass ich bestehende Webseiten umgeändert habe. Wir – ich wohnte zuhause – hatten einen AOL-Account (ja, wirklich) aber ich kannte das Kennwort nicht. So kam ich, wenn ich alleine zuhause war, immer nur auf die AOL-Startseite die noch im Cache lag. Nicht so toll.
Ich speicherte das, was ich da sah, auf der riesigen 7-GB-Festplatte und kam irgendwie dahinter, dass man diese .html-Datei bearbeiten konnte. Wahnsinn. Die Welt war mein und ich konnte die Nachrichten von gestern mit den denen von heute ersetzen. Und wie es der Zufall so wollte, gab es in der Computer-Zeitschrift die ich damals las, einen HTML-Einsteiger-Kurs. Mit <font>, Tabellen-Layouts und Farbnamen.
Ich baute erste Seiten, testete Editoren von damals – Arachnophilia, phase5, etc. – und fand das alles superinteressant. Dann gab es das Homep@ge-Magazin und alles wurde noch mal eine Portion großartiger, sogar der IE6 wurde damals gefeiert, weil er irgendwas mit Doctypes konnte, wovon ich damals nie gelesen hatte.
Heute sind wir ja eher froh, dass wir den IE6 links liegen lassen können. Webseiten machen wir zwar immer noch mit HTML und CSS aber wir testen in mehreren Browsern und unterschiedlichen Geräten.
Designers who don’t want to write code: become a print, interior, industrial or fashion designer. FFS do NOT become a web designer! – Rachel Lehman
Da ich zurzeit recht viel mit Contao arbeite, freue ich mich natürlich, dass heute Contao 2.10.0 veröffentlicht wurde. Contao ist ein Open Source CMS mit einer großen Community und wird von Leo Feyer betreut:
Contao Version 2.10.0 ist verfügbar. Das Release enthält alle auf der Contao-Konferenz vorgestellten neuen Funktionen wie z.B. HTML5- und CSS3-Unterstützung, globale Stylesheet-Variablen, Komprimierung aller Stylesheets und JavaScripts uvm. Zudem wurden über 220 Tickets in die neue Version eingearbeitet.
Was sich alles zu den vorherigen Versionen geändert hat, steht im Changelog.
Wie im vurve-Blog steht, gibt es – durch eine Anpassung in der HTML5-Spezifikation – im aktuellen Firefox 4 ein Problem mit <input type="image" />-Feldern und JavaScripten, die auf onSubmit und onClick reagieren. Firefox sendet nämlich nicht, wenn vorhanden, den value-Wert des Feldes, sondern die x- und y-Koordinaten auf die geklickt wurde. Ich kann ehrlicherweise nicht genau sagen, ob das vorher anders war, halte es aber auf jeden Fall für erwähnenswert.
Schnelle Abhilfe schafft laut vurve das umändern des Typs von image auf submit und ein entsprechendes CSS-Styling mit einer Klasse. Nun denn. Das Problem wird in Zukunft wohl auch Chrome, Safari und sogar den IE treffen. (Firefox 5 soll übrigens nächste Woche schon veröffentlicht werden.)
Im übrigen wirds hier jetzt öfter solche Beiträge geben, womit auch ein Konzeptwechsel im Blog vonstatten geht, über den ich mich demnächst nochmal auslassen werde. :)