Tag Archives: CSS

Quick-Hints #14

Willst du fließend JavaScript sprechen?

Wenn du das möchtest und gerade begonnen hast zu lernen, dann kann ich dir wärmstens http://speakingjs.com/es5/ ans Herz legen. In dieser HTML-Edition des Print-Books findet man eine sehr gute Einführung in JavaScript plus vielen weiteren Informationen, weit über die reine Syntax der Sprache hinaus. So werden unter anderem die wichtigsten Libraries vorgestellt, aber auch wie man die Code-Qualiät verbessern kann und wie die Geschichte von JavaScript ist.

Aber auch für Nicht-Anfänger ist es eine tolle Lektüre. Viele Sachen wird man überspringen können, einiges wird wieder in Erinnerung gerufen und alles kennt man nie.

Don’t use EmberJS

Ich bin eher ein Fan von Low-Scope und flexiblen Frameworks, also nicht unbedingt von EmberJS (auch wenn es ein tolles Framework ist!):

Von gezeichneten und lebenden Prototypen

In Quick-Hints #11 hatte ich bereits seinen tollen Artikel zu Transitional Interfaces vorgestellt. In einem weiteren tollen Artikel von Pasquale D’Silva auf Medium stellt er ein paar nette Tools für die Darstellung / Prototypisierung von Interaktionsdesign vor. Besonders Framer hat es mir angetan und ich werden es demnächst einsetzen, wenn ich eine Idee kurz ausprobieren oder vorstellen möchte. Mit Framer können Prototypen von Animationen und Interaktionen mit JavaScript erstellt werden.

Für die statische Darstellung (oder vielleicht auch dynamisch in Verbindung mit Framer) gibt es auf http://awesomekit.me ein tolles Grafikpaket zum kostenlosen Download. Hiermit gelingen jedem schöne iOS7 Wireframes.

Ein weiterer CSS Preprocessor?

Nein, GridStyleSheets ist mehr. Basierend auf dem gleichen Algorithmus, den Apple für sein natives Layout benutzt, will GSS das CSS der Zukunft sein.

Quick-Hints #12

Repository for Web Components

Für die Web Components (W3C Working Draft) gibt es mit customelements.io eine Sammlung von vielen netten Custom HTML-Elementen. Das ganze ist ähnlich einem NPM (Node) oder Nexus (Java) aufgebaut. Die Web Components bieten (dank Polyfill auch heute schon), die Möglichkeit – wie es der ein oder andere von euch (in ähnlicher Form) schon aus AngularJS kennt -, das Spektrum an HTML-Elementen zu erweitern. So findet sich auf der Website zum Beispiel ein Calendar-Element, welches durch einfache Benutzung des Tags

<x-calendar view="2013-06-09"></x-calendar>

einen Kalendender in eure Website zaubert. Natürlich ganz normal mit CSS stylebar. Viele weitere Elemente und Informationen könnt ihr auch unter x-tags.org finden.

#perfmatters

Performance im Front-end ist immer wieder ein Thema auf meinem Blog. Vor allem beim Scrollen von Webseiten gilt immer wieder die Herausforderung, die 60 FPS zu halten. Mittlerweile gibt es sehr viele Kniffe und Hinweise, wie einem das gelingen kann. Ein guter Artikel zu diesem Thema ist hier zu finden: Continue reading

(HTML5 Canvas-)Bilder hochauflösend (Retina) darstellen

Vor guten zehn Monaten ist der letzte Artikel in der Kategorie “Leicht und klar erklärt” erschienen und so gab mir heute (mal wieder) ein Thema in der Firma eine perfekte Vorlage für einen Artikel.

Wie stelle ich HTML5 Canvas Grafiken auf einem iPad mit Retina-Display scharf dar? Folgende Erklärung gilt aber nicht nur für das Canvas-Element, auf Bilder/Fotos trifft dies ebenso zu. Fast alle Tablets haben mittlerweile hochauflösende Displays (High DPI – HiDPI) und so wird es immer wichtiger, dass du das folgende beachtest – zumindest wenn du deinen Besuchern Qualität bieten möchtest. Die vernünftige Darstellung von Bildern auf allen Geräten kann man als Teildisziplin von Responsive Webdesign bezeichnen. Auf zur Theorie:
Continue reading

Quick-Hints #11

CSS3 3D Transformationen

http://rupl.github.io/unfold/ – Unfolding the Box Model: Exploring CSS 3D Transformation

Eine sehr sehr schöne Präsentation zu 3D-Transformationen mit CSS. Der Einstieg wird hier anschaulich und dadurch leicht gemacht.

CSS Variables sind im Firefox angekommen

Seit der Version 29 von Firefox ist es möglich, Variablen in CSS zu verwenden. Du kennst wahrscheinlich LESS, SCSS und Co. und hast vielleicht auch schon die Möglichkeit, Farben global zu deklarieren, zu schätzen gelernt. Nun braucht man nicht mehr Zwangsweise einen CSS-Preprocessor um Variablen für z.B. Farben und Margins anzugeben; siehe auch: http://mcc.id.au/blog/2013/12/variables

CSS Variables in Firefox 29

CSS Variables in Firefox 29

Continue reading

Front-end / visual (regression) testing

Auch wenn Fehler in Änderungen am CSS, aufgrund ihrer visuellen Sichtbarkeit, häufig schnell auffallen, halte ich gerade in komplexen und umfangreichen Projekten Regressionstest für sehr sinnvoll.

Regressionstest verfolgen den Zweck, bereits getestetes, nach Änderungen im Gesamtprodukt*, erneut zu testen und so deren Fehlerfreiheit weiterhin zu gewährleisten.

Im Fall des Testens der Visualität einer WebApp, geschieht dies häufig und am einfachsten über einen Screenshotvergleich. Das (automatisierte) Vergleichen von Screenshots hat den Vorteil, dass nicht die Cascading Style Sheets (CSS) direkt getestet werden, sondern deren Auswirkung auf die Visualität. Was wiederum bedeutet, dass auch alle anderen Systemteile, die die Visualität verändern, mitgetestet werden. Dank der großartigen Community gibt es für diesen Zweck bereits viele einsetzbare Tools. Folgend eine Liste der mir bekannten:

Screenshot by Huddle for PhantomCSS

Screenshot by Huddle for PhantomCSS

Screenshot-Vergleich:

Sonstiges:

Ich konnte bisher noch keine Erfahrung mit diesen Tools sammeln, im Überblick sind aber Wraith, PhotoBox und PhantomCSS meine Favoriten. Mehr zum Thema CSS Testing findet sich (in Englisch) im Entwickler-Blog von Huddle, von denen auch eines der oben genannten Produkte kommt (PhantomCSS).

Du kennst noch weitere Libraries, Frameworks und Tools, zum Testen von CSS? Dann schreibs bitte in die Kommentare, ich werde die Liste entsprechend erweitern.

* Soll heissen, dass die Änderungen, weshalb regressionsgetestet wird, nicht zwangsweise (oder offensichtlich) das zu Testende betreffen.

Quick-Hints #8

Statistik Besucher Wochenrekord

Statistik Besucher Wochenrekord

Lange hab’ ich nichts mehr veröffentlicht, komme leider nicht wirklich dazu. Trotzdem konnte ich letzte Woche einen neuen Visits-Wochenrekord für ben.nyben.net aufstellen. Damit es nicht langsam aussieht, als sei mein Blog tot, hier ein neuer, kleiner Quick-Hints Eintrag.

Ein extrem nützliches, aber noch nicht so beachtetes Objekt in JavaScript ist der MutationObserver. Dieser Nachfolger der MutationEvents bietet weniger Fehlerpotential und findet bereits jetzt eine breite Unterstützung seitens der Browser. Sehr nützlich bei der Implementierung eines eigenes Frameworks, bietet dir der MutationObserver die Möglichkeit, auf DOM-Änderungen zu reagieren. Im Opera (ja, der Browser) Blog ist ein sehr nettes Tutorial zu finden. Weiterführend dazu, hat Addy Osmani auf der JSConfEU13 einen sehr sehenswerten Talk gehalten. In diesem geht es um Object.observe aus der ECMAScript Harmony Spec. Object.observe bietet quasi den Mitspieler der MutationObserver. Hiermit können Änderungen an JS-Objekten (zum Beispiel) im DOM wiedergespiegelt werden: Everthing you want to know about Object.observe

Hier ein Post, der sich als sehr nützlich erweisen kann, wenn man mal wieder das Aussehen der Scrollbars im Browser anpassen soll… Warum auch immer man das möchte.

Ein kurzer Ausflug in die Welt des Marketings: Wie schaffe ich es, vier Millionen Leute für meine Sache zu begeistern.

Promises sind extrem schön um in JavaScript einen asynchronen Aufruf / Ablauf zu entwickeln. Für Promises gibt es in JS viele Implementierungen, unter anderem von jQuery. Ein schönes CheatSheet, basierend auf der promises/A+ Implementierung, kann dabei sicher gut unterstützen. Eine nette (englische) Beschreibung von Promises findet sich im Blog von parse.com.

Auf den Seiten der FH Wedel findest du eine nette Kurzbeschreibung zu den wichtigsten Technologien, die bei nodejs zum Einsatz kommen. Nichts Weltbewegendes, aber falls du noch nicht weisst, was hinter non-blocking I/O steckt, findest du dort eine kompakte, gute Antwort.

Quick-Hints #7

Als Webentwickler muss man sein Produkt ständig in mehreren Browsern und am besten noch in mehreren Umgebungen testen. Hier eine schöne Möglichkeit: http://blog.mattbailey.co/post/50337824984/grunt-synchronised-testing-between-browsers-devices

Mit SVG-Grafiken in Webseiten kann man viele schöne Dinge anstellen. Zum Beispiel ein Logo / eine Schrift animieren: http://jakearchibald.com/2013/animated-line-drawing-svg/

Ein paar nette CSS3 Effekte für Menüs / Links sind unter folgendem Link zu finden: http://tympanus.net/Development/CreativeLinkEffects/. Um diese auch in vielen Browsern nutzen zu können, empfiehlt sich der Einsatz eines Autoprefixers, zum Beispiel: http://css-tricks.com/autoprefixer/

Für Fälle, in denen man das letzte Element eines Arrays möchte, gibt es viele Möglichkeiten. Wenn man wert auf die Performance legt sollte man ganz klar “array[array.length – 1]; benutzen. Siehe: http://jsperf.com/get-last-item-from-array/10

Disable Tap-Highlighting in Safari / iOS / Android / WebKit

Beim entwickeln von WebApps und hybrid Apps benötigt man viele kleine Workarounds um das native Feeling so gut wie möglich zu simulieren. Links werden im mobilen Safari / WebKit bei einem Tap mit typischen, leicht durchsichtigen, “Apple”-Blau gehighlightet.

-webkit-tap-highlight-color: rgba(0,0,0,0);

Neben dem Entfernen gibt es natürlich auch die Möglichkeit per rgba dieses Highlighting in CI-Farben darzustellen. Dabei sollte darauf geachtet werden, dass der letzte Wert nicht 1 ist, dann ist das Highlighting nicht mehr durchsichtig und würde das getapte Element verdecken.

Quick-Hints #6

Mit CSS3 lassen sich nette Hover-Effekte auf Icon-Buttons zaubern

Google hat einen Proxy zum Debuggen von iOS WebView-Anwendungen veröffentlicht (Github). Hiermit können Hybrid-Apps auf dem richtigen Gerät laufen gelassen und per Proxy in den Chrome-DevTools auf dem Mac oder PC gedebugt werden.

Adobe hat für den Brackets Code Editor ein nettes Feature vorgestellt: Photoshop-Dateien können direkt in den Editor geladen und im Coding verwendet werden. Das bedeutet, dass man zum Beispiel das Header-Logo anklickt, den passenden CSS-Code bekommt und das Logo als png/jpg fertig ausgeschnitten abgelegt wird. Noch besser wird es bei Linear-Gradients die aus Photoshop direkt in CSS Angaben gewandelt werden.

http://thenounproject.com/ ist auf Kickstarter gestartet und bietet nun schon allerhand Icons unter der CC-Lizenz. Gegen eine Geringe Gebühr kann man sich auch von der Nennungspflicht des Autors freikaufen.

Ob Anfänger, Fortgeschrittener oder Profi; hier ist für jeden das passende JavaScript-eBook (kostenlos) zu finden: http://jsbooks.revolunet.com/

Mike Stay erklärt auf seinem Youtube-Kanal die Kategorientheorie anhand von JavaScript.

In diesem Blogpost findet man ein paar interessante DOM-APIs, die einen das Leben erleichtern, wenn man einen Fileupload erstellen möchte.

Quik-Hints #2

Ein paar kurze Anmerkungen und Hinweise zu verschiedenen Themen, die nicht unbedingt einen ganzen eigenen Post benötigen aber trotzdem erwähnenswert sind: