- Es gibt so etwas wie JSFiddle auch für .NET-Entwickler und für PHP.
- Making Forms Fabulous with HTML5 ist ein immer wieder inhaltlich überarbeiteter Artikel über die neuen Formularelemente. Aber eigentlich bevorzuge ich ja immernoch die Übersicht bei Wufoo.
- PathAnimator ist ein JavaScript für Pfadanimation mit SVG.
- Lust auf eine Runde Sudoku im Browser? Interesse daran, wie das erstellt wurde?
- Das ist mal pfiffig: die Seite On Mobile I Want To Use gibt an, welche Kombination von Techniken wie gut auf mobilen Endgeräten unterstützt werden. Zur Kalkulation werden die Daten von CanIUse genutzt. Durch die Auswahl entsteht eine eindeutige URL, die weitergegeben werden kann.
Monat: Dezember 2013
Linkfutter 62
- David Storey legt eine umfangreiche Liste vor, auf der CSS-Eigenschaften verzeichnet sind, die ausserhalb der CSS-Spec definiert werden. Die meisten hierbei erwähnten Specs sind noch nicht fertig oder überhaupt implementiert. Ein paar wenige sind in einzelnen Browsern implementiert. Die Liste ist allein deshalb interessant, weil man so von einigen Specs Kenntnis bekommt, von denen man normalerweise nichts hört.
- Grunt Responsive Videos ist ein Grunt-Task, der Videos in unterschiedlichen Grüßen erstellt.
- Die neuen Maps von Sass 3.3 werden in diesem Artikel anhand von Farbpaletten sehr gut demonstriert. Bei Almost Profound gibt es einen weiteren guten Artikel zu diesem Thema.
Navigation mit ausklappender Zusatzinfo – ohne JavaScript
Hin und wieder kann es vorkommen, dass man erklärende Infos zu einem Navigationspunkt weitergeben möchte. Oder einfach noch ein wenig Werbung für die zu erwartenden Inhalte machen will. Das kann man prima ohne JavaScript mit ein wenig CSS erreichen. Ich habe drei unterschiedliche Varianten in einem Codepen zusammengestellt. Als Basis für die Gestaltung habe ich die Standard-Dateien von YAML – meinem bevorzugten Framework – genutzt. Schliesslich kommt es im Wesentlichen auf die Umsetzung der Funktionalität, nicht auf das konkrete Design an.
See the Pen Navigation with additional infos on hover – stripped down by Jens Grochtdreis (@jensgro) on CodePen
In allen drei Varianten wird beim Überfahren des Listenelementes – nicht des darin enthaltenen Links – ein zusätzlicher Text eingeblendet. Ich habe diesen mittels der YAML-Klasse ym-hideme
aus dem Viewport geschoben und nicht mittels display: none
ausgeblendet. Dadurch ist der Zusatztext Screenreadernutzern grundsätzlich zugänglich. Es geht hier ja nur um einen visuellen Effekt. Diese Klasse arbeitet mit position:absolute
, um den zu versteckenden Text aus der Sicht zu schieben. Und hier setzt der Unterschied der ersten beiden Vorschläge an.
Denn beim Überfahren eines Listenelements werden die Positionierungskoordinaten des Zusatztextes verändert. left: 100%
sorgt dafür, dass der Zusatztext direkt an die Navigation anschliesst. Der Verzicht auf einen Pixelwert macht die Lösung flexibel. Sie kann in fixen, aber auch in fluiden oder responsiven Layouts eingesetzt werden. Durch die absolute Positionierung ist der Orientierungsrahmen wichtig. Ein absolut positioniertes Element orientiert sich nach dem nächsten Elternelement, dass eine andere Positionierung als static
hat. Elegant löst man dieses Problem meist mit position: relative
.
In der ersten Varianten wird der Liste position:relative
zugewiesen, in der zweiten Variante ist es das Listenelement selber. So hängt in der ersten Variante der Text also immer ob an der Navigation. Das lohnt sich speziell für längere Texte. Bei der zweiten Version hängt der Text direkt am Navigationspunkt und macht so seine Zugehörigkeit für die Nutzer sehr deutlich. Die dritte Version ist komplett anders. Hier realisiere ich durch left: 0
und einem position: relative
auch für den eingeblendeten Container, dass der Text direkt unter innerhalb der Navigation als Ergänzung zum Navigationspunkt erscheint.
Um das Einblenden ein wenig angenehmer zu gestalten, habe ich Transitions genutzt. Alte IE werden diese nicht anzeigen, das Ausklappen funktioniert trotzdem. Wegen der Animation war es mir wichtig, die Hintergrundfarbe nicht wie bei den anderen beiden Lösungen auf den Zusatztext zu legen, sondern auf das aktivierte Listenelement. So gibt es keine leichte Verzögerung, bis man die Hintergrundfarbe sieht, die Animation wirkt dadurch viel angenehmer.
Wen der SCSS-Code nicht interessiert, der kann sich auch das resultierende CSS leicht anschauen. Einfach am rechten unteren Ende des SCSS-Tabs auf „View Compiled“ klicken und das resultierende CSS wird angezeigt. Alternativ auf „Edit und Codepen“ klicken und dann im CSS-Tab auf das Wort „CSS“ klicken. Auch dann wird das SCSS in CSS umgewandelt.
Übrigens habe ich auch eine Seite erstellt, die die Techniken im Zusammenhang eines Gridsystems zeigen. Denn es stellt sich ja die Frage, ob die nach rechts ausragenden Layer nicht mit anderen Informationen auf der Seite kollidieren. Der Praxistest zeigt, dass da kein Problem entsteht.
Adventskalender im Web am 24. Dezember
- Im Webkrauts-Adventskalender gibt es heute zum Abschluss Buchtipps für Webworker.
- Bei 24ways schreibt Mark Boulton heute über Typographie.
- Im UX-Adventskalender gibt es ein Glühwein-Rezept.
- Im MDN-Kalender führt uns der letzte Link zu einem interessanten TED-Talk.
- Im NSA-Kalender wird heute ein wichtiges Zitat von Edward Snowden diskutiert.
- Bei Mayflower gibt es einen interessanten Post über interne Fortbildungen.
- Im WordPress-Adventskalender von Marketpress gibt es nichts Inhaltliches, nur einen Weihnachtsgruss mit Foto des gsamten Teams.
- Im Performance-Webkalender ging es gestern um Bildkompression von mobilen Carrierern. Das heutige Thema müsst Ihr morgen schon selber rausfinden.
Adventskalender im Web am 23. Dezember
- Im Webkrauts-Adventskalender folgte heute der zweite Teil von Bernhard Welzels Einstieg in SCRUM und Kanban.
- Bei 24ways schlägt Andy Clarke einen interessanten Bogen von der besten Art, auf schmalen Strassen zu fahren, zur besten Art, Verhandlungen zu führen.
- Im WordPress-Adventskalender erzählt uns Thomas Scholz, wie man eigene Felder ein einer Multi-Site aktualisiert.
- Im Performance-Webkalender geht es um Preloader.
- Im UX-Adventskalender werden Rabatte für Videotrainig rausgehauen.
- Im MDN-Kalender gibt es einen Link zu einem Vortrag über Erfolg und Scheitern beim Coden.
- Im NSA-Kalender gibt es ein Zitat der Bundeskanzlerin, das für ihre Verhältnisse ungewöhnlich deutlich ist. Deshalb dürfte sie sich auch nicht mehr daran erinnern wollen.
- Bei Mayflower geht es um fragment shaders in WebGL.
Adventskalender im Web am 22. Dezember
- Im Webkrauts-Adventskalender erscheint heute der erste Teil von Bernhard Welzels Einführung in Scrum und Kanban.
- Bei 24ways geht es um die engere Verzahnung von Forschung und Design.
- Im WordPress-Adventskalender von Marketpress wird ab heute bis Silvester ein Meilenstein bei BackWPUp mit einem 33%-Rabatt gefeiert.
- Im Performance-Webkalender versuchte man uns gestern zu beruhigen, dass es nicht darum geht, der Schnellste zu sein.
- Im UX-Adventskalender gibt es ein Spiel namens Stop the Elves.
- Im MDN-Kalender gibt es einen Link zu einem sehr ungewöhnlichen Linting Tool.
- Auch der NSA-Kalender ist wieder einen Besuch wert.
- Bei Mayflower geht es heute um Fallstricke im Responsive Webdesign.
Adventskalender im Web am 21. Dezember
- Im Webkrauts-Adventskalender beschreibt Daniel Rauber Animationen mit CSS und JavaScript.
- Bei 24ways gibt es einen sehr persönlichen Artikel eines Designers, der mit dem allgegenwärtigen Arbeitsstress nicht mehr zu Rande kam, um einen Selbstmordversuch beging. Es ist ein sehr nachdenklicher Artikel, über den Druck, dem wir ausgesetzt sind bzw. dem wir uns selber aussetzen.
- Im WordPress-Adventskalender gibt es einen Artikel über eine dazulernende Blacklist.
- Im Performance-Webkalender ging es gestern um Netzwerk-Latenz im Mobilfunknetz.
- Im UX-Adventskalender werden 10 UX-Tools vorgestellt.
- Im MDN-Kalender gibt es einen Link über die Firefox-DeveloperTools.
-Im NSA-Kalender werden die diversen eingebildeten Terroranschläge thematisiert, die dadurch verhindert wurden, dass die NSA mich und Dich abgehört hat und kategorisiert. - Bei Mayflower verspricht der Artikel „Warum wir lieber feiern, als loben“ interessante Gedanken und Anregungen.
Linkfutter 61
- Sven Wolfermann beschreibt in zwei Artikeln Ansätze, um responsive Seiten mit mobile first zu entwickeln, ohne den IE8 aussen vor zu lassen: Teil 1, Teil 2.
- Brad Frost skizziert, welche unterschiedlichen Ansätze und Begriffe es gibt, wenn man beschreiben will, dass Webseiten sich ihrer Umgebung anpassen. Ausgehend von der Unterscheidung zwischen Adaptive und Responsive Webdesign streift er weitere konzeptionelle und technische Ansätze.
- Tom Green bietet in seinem Youtube-Kanal eine sehr grosse Menge Tutorials für Fireworks CS5 an. Sehr sehenswert.
Adventskalender im Web am 20. Dezember
- Im Webkrauts-Adventskalender folgt heute der zweite Teil über wichtige Infos im Header, diesmal mit Fokus auf Social-Dingenskirchen.
- Bei 24ways schreibt Nicole Sullivan heute über Web-Typographie.
- Im WordPress-Adventskalender werden heute eine WordPress-Theme Sprachen beigebracht.
- Im Performance-Webkalender ging es gestern darum, Performance mit Jenskins zu messen.
- Im UX-Adventskalender geht die Autorin heute sehr weit und bespricht organisatorische Änderungen in Firmen ausgehend von User Experience, wenn ich das richtig verstanden habe.
- Im MDN-Kalender gibt es einen Link zu einem sehr grundlegenden Artikel. Schaut rein, lasst Euch darauf ein.
- Auch der NSA-Kalender ist wieder einen Besuch wert.
- Bei Mayflower geht es heute um node.js-Debugging in PHPStorm auf der VW.
Linkfutter 60
- Von einem für Performance zuständigen Entwickler bei Fratzenbuch gibt es ein umfangreiches e-book zu Performance zum kostenlosen Download.
- Bei Speckyboy gibt es einen Artikel zu node.js for Frontend-Developer. Sollte ich als Einstieg in das Buch lesen, das ich besitze.
- JSLint Error Explanations listet auf, welche Bedeutung JSLint-Fehlermeldungen haben.