Tag: werkzeuge

201310Dez

Type Rendering Mix: Web-Schriftarten richtig glätten

Individuelle Schriftarten auf einer Website sind in erster Linie etwas Positives, da sie dem angedachten Design gerecht werden und für mehr Harmonie sorgen, wenn die gesamte Typografie entsprechend abgestimmt wurde. Allerdings werden Web-Schriftarten nicht in allen Browsern und Betriebssystemen gleich dargestellt. Ich hatte vor einiger Zeit berichtet, da seit Windows Vista und einer aktivierten Hardwarebeschleunigung das GDI-Rendering durch DirectWrite ersetzt wurde. Unter Mac OS X und iOS kommt das Font-Rendering "Core Text" zum Einsatz, das alle Schriftarten etwas kräftiger darstellt. Unter Android und Linux wiederum werden Texte durch FreeType angezeigt.
Um den verschiedenen Betriebssystemen und Browsern gerecht zu werden, kann das Skript Type Rendering Mix genutzt werden: Hiermit werden 2 CSS-Klassen auf das "html"-Element angewendet, die Aufschluss über das Font-Rendering (Rasterizer und Anti-Aliasing-Methode) geben.

Type Rendering Mix - Apply CSS based on the text rasterizer and antialiasing your browser is using

Wenn in einem Webdesign also eine eigene Schriftart verwendet wird, kann die CSS-Klasse "tr-coretext" beispielsweise so angepasst werden, das hier ein leichterer Schriftschnitt verwendet wird (font-weight). So kann in den unterschiedlichen Systemen ein einheitliches Schriftbild besser gewährleistet werden.

201308Dez

Headroom.js: Kopfleiste durch Scrolling ausblenden

Der Effekt dürfte mittlerweile schon auf der einen oder anderen Website gesichtet worden sein: Wird durch das Scrollen der Seite ein gewisser Punkt erreicht, verschwindet der Kopfbereich der Seite. Oft handelt es sich dabei um eine kompakte Navigation, die wichtige Elemente beinhaltet. Dieser Effekt kann also nützlich sein, wenn ein Menü innerhalb eines bestimmten Bereichs der Seite angezeigt werden soll.
Wer zu dem Effekt das passende JavaScript-Modul sucht, ist mit Headroom.js gut bedient.

Headroom.js - Hide your header until you need it

Das Plugin kann direkt in JavaScript, in Verbindung mit jQuery oder mit AngularJS verwendet werden. Es bietet verschiedene Optionen wie eine Toleranz, einen vertikalen Offset sowie Klassen, die beim Eintreffen der Ereignisse vergeben werden. Mehr Details gibt es bei GitHub.

201322Nov

Magnifier.js: Bilddetails durch Lupeneffekt vergrößern

Mit Loupe und Wadda stehen zwar schon ähnliche Skripte zur Verfügung, doch nicht immer ist ein jQuery-Plugin gewünscht und auch die Verwendung des Canvas-Elements, die es bei Wadda der Fall ist, ist nicht zwingend erforderlich. Daher könnte das Standalone-Skript Magnifier.js ein nützliches Hilfsmittel sein, wenn es um die Vergrößerung von Bildausschnitten auf einer Website geht.

Magnifier.js - Javascript library enabling magnifying glass effect on an images

Die Funktionsweise ist denkbar einfach: Wird der Mauszeiger über eine Grafik der Website bewegt, entsteht ein Lupeneffekt und der entsprechende Bereich wird vergrößert. Mit dem Mausrad lässt sich zudem die Zoom-Stufe einstellen. Eine Beispiel-Einbindung von Magnifier.js:

  • var evt = new Event(),
  • m = new Magnifier(evt);
  •  
  • m.attach({
  • thumb: '#thumb',
  • large: 'bild.jpg',
  • mode: 'inside',
  • zoom: 3,
  • zoomable: true
  • });

Das Projekt findet sich wieder bei GitHub zum Download.

201319Nov

Nunjucks: Vielseitige JavaScript-Template-Engine

Für JavaScript gibt es mittlerweile diverse Ansätze, was Templates angeht: Neben Handlebars und Tempo stellt vor allem das von Facebook und Instagram entwickelte React eine interessante Methode dar, um clientseitig dynamische Templates zu interpretieren.
Mit dem Projekt Nunjucks gibt es nun eine weitere Alternative, die ebenfalls vielversprechend aussieht.

Nunjucks - A rich and powerful templating language for JavaScript.

Die rund 8 KB große JavaScript-Bibliothek ermöglicht Templates mit einer gängigen Syntax:

  • {% block header %}
  • <h1>{{ title }}</h1>
  • {% endblock %}

Die Engine erlaubt das Definieren von eigenen Filtern, bietet asynchrone Templates und sogar Macros (also JavaScript innerhalb eines Templates). Weiterhin können Templates vererbt werden, was die Engine zu einem umfangreichen Werkzeug macht. Weitere Details finden sich in der Dokumentation.

201314Nov

Webdesign: Kostenlose Bootstrap-UI-Kits von PixelKit

Twitters Bootstrap-Framework zählt mittlerweile zu einem der beliebtesten CSS-Frameworks, die fertige UI-Komponenten, ein Grid-System, Glyphicons sowie JavaScript-Module enthalten. Inzwischen gibt es auch etliche Modifizierungen und Erweiterungen, die auf dem Framework aufbauen. Von PixelKit gibt es diesbezüglich fertige UI-Kits, die bei GitHub kostenlos heruntergeladen und eingesetzt werden können (CC- und MIT-Lizenz). Die UI-Kits enthalten Stile und Grafiken für alle denkbaren Standard-Komponenten wie Dropdown-Menüs, Login-Bereiche, Switches, Fortschrittsbalken, Kalender-Widgets, Slider, Video-Player, Tabs, Graphen, Suchfelder und Drehregler (Knobs).

Kostenloses PixelKit Bootstrap-UI-Kit - Vanilla Cream

Momentan gibt es 5 fertige PixelKit-Bootstrap-Themes: Vanilla Cream, Dark Velvet, Arctic Sunset, Modern Touch und Metro Vibes. Die UI-Kits verwenden Grafiken und sind nicht Retina-tauglich. Der Quellcode existiert in CSS- und LESS-Form.
Mittlerweile gibt es natürlich auch für Bootstrap-Themes einen Markt: Kostenpflichtige UI-Kits finden sich bei WrapBootstrap und kostenlos geht es mit Bootswatch.

201310Nov

JavaScript: Performance-Analyse mit window.performance

JavaScript steckt voller Überraschungen: Wie Stefan Judis in seinem Artikel schreibt, gibt es im globalen window-Scope ein performance-Objekt, das interessante Information zur Website-Leistung beinhaltet. Innerhalb dieses Objekts stehen wiederum die Objekte "timing", "navigation" und "memory" zur Verfügung, die Aufschluss über die verschiedenen Bereiche geben: Das "timing"-Objekt vom Typ "PerformanceTiming" beispielsweise listet etliche Zeitmessungen der Latenzen einer Website auf, so dass hieraus bestimmte Ereignisse abgeleitet werden können.

Journey of Discovery - the Global window.performance Object

Stefan Judis hat diesbezüglich ein Gist veröffentlicht, das sich gut im "Snippets"-Bereich der Chrome-Entwicklertools ablegen lässt (unter Firefox stehen noch nicht alle Funktionen des performance-Objekts bereit). Die Snippets basieren auf den Messungen des timing-Objekts und zeigen die Zeiten an, die etwa für DNS-Lookups, das "DOMContentLoaded"-Event oder das "document.load"-Event benötigt wurden.
Weiterhin lässt sich mit dem window.performance-Objekt analysieren, welche Elemente einer Seite ein Bottleneck sein könnten: Mit "window.performance.getEntries()" etwa können die Ladezeiten für einzelne Web-Ressourcen abgefragt werden, so dass daraus Optimierungen erarbeitet werden können.

201308Nov

GlyphSearch: Icons in bekannten Icon-Sets finden

Der Einsatz von Web-Schriftarten und damit verbundenen "Icon Fonts" wird immer selbstverständlicher, da moderne Webbrowser OpenType- und TrueType-Schriftarten nativ unterstützen. Firefox und Internet Explorer ermöglichen individuelle Schriften schon seit geraumer Zeit durch WOFF und EOT und somit sind entsprechende Icon Font-Pakete stark im Trend: Sie heißen Font Awesome, GLYPHICONS oder Ionicons und enthalten etliche Symbole, die kostenlos verwendet werden können.

GlyphSearch: Search for icons from Font Awesome, Glyphicons, and Ionicons

Ein Überblick der enthaltenen Icons findet sich auf den Websites der Icon-Set-Anbieter. Wer in allen Sets zugleich eine Suche ausführen möchte, kann dazu GlyphSearch verwenden. Eine kleine Suchmaschine, welche den Suchbegriff auf die genannten Icon-Pakete anwendet und entsprechende Treffer liefert.

201306Nov

Grasp.js: JavaScript-Code nach Strukturen durchsuchen

In größeren JavaScript-Projekten kann es manchmal etwas schwierig werden, nach genau der richtigen Stelle im Code zu suchen, die ein paar Wochen zuvor entwickelt wurde. Oft kann es passieren, dass nur noch die Struktur des Codes in Erinnerung geblieben ist, weniger aber die verwendeten Namen der Variablen und Methoden. Wäre es da nicht praktisch, wenn nicht nach Text, sondern nach der Code-Struktur gesucht werden könnte? Genau dies ermöglicht das Node-Modul Grasp.

Grasp - Search and replace your JavaScript code based on its structure rather than its text

Mit dem Kommandozeilen-Tool können also Konstrukte im Code-Baum gesucht werden und dabei kann auf verschiedene Mechanismen zurückgegriffen werden, wie beispielsweise Wildcards oder Selektoren im CSS-Stil. Wenn also etwa nur noch ein Return-Statement wie "return … + …" bekannt ist, kann Grasp in einer entsprechenden Datei danach suchen:

  • grasp -e 'return __ + __' datei.js

Anschließend werden die gefundenen Stellen inklusive Zeilennummer aufgelistet. Auf der Website des Moduls wurde nicht gekleckert und so findet sich im unteren Bereich eine kleine Unix-Shell, welche die Grundbefehle beherrscht und auch das Editieren von virtuellen JavaScript-Dateien ermöglicht. In der Shell kann Grasp also direkt ausprobiert werden. Mehr Infos zu den Parametern sowie der Syntax gibt es in der Dokumentation.