Tag: tricks

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.

201307Nov

Callback Hell: Leitfaden für asynchrone JavaScript-Apps

Im Zeitalter der ereignisgetriebenen Web-Anwendungen, die inzwischen sowohl client- als auch serverseitig auf JavaScript basieren, kann es schnell passieren, dass sich der Code in eine "Callback Hell" verwandelt und dadurch die Wartbarkeit verschlechtert wird. Callbacks sind asynchrone Funktionsaufrufe, die nach dem Eintreffen eines bestimmten Ereignisses ausgeführt werden und weitere Logik enthalten. Callbacks müssen nicht zwangsweise etwas mit Server-Abfragen, also XMLHttpRequests, zu tun haben: Sie können auch an anderen Stellen im Code verwendet werden, wodurch sie praktisch überall in einem JavaScript-Projekt enthalten sein können.
Die "Callback Hell" entsteht also, wenn Funktionsaufrufe sehr tief ineinander verschachtelt und zudem nicht gekennzeichnet sind. Wie Entwickler die Fallstricke im Callback-Dschungel umgehen können, kann nun auf der Website CallbackHell.com nachgelesen werden.

Callback Hell - A guide to writing asynchronous javascript programs

Dort finden sich typische Negativ-Beispiele von schlecht eingesetzten Callbacks sowie Tipps, um die Code-Qualität zu verbessern. Ein Beispiel:

  • var form = document.querySelector('form');
  •  
  • Ausgangssituation:
  • form.onsubmit = function(submitEvent) { …
  •  
  • Optimierung 1:
  • form.onsubmit = function formSubmit(submitEvent) { …
  •  
  • Optimierung 2:
  • function formSubmit(submitEvent) { …
  • document.querySelector('form').onsubmit = formSubmit;

Im Wesentlichen bestehen die Möglichkeiten der Optimierungen im Benennen von Funktionen sowie dem Modularisieren und Kapseln einzelner Funktionen. Letzteres ist gerade für Node.js-Anwendungen sehr gut anwendbar, da hier mit dem CommonJS-Modulsystem und der "exports"-Funktion bereits echte Module verwendet werden können.

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.

201303Nov

Colourcode: Farbschemata entwickeln und exportieren

Adobe Kuler stellt längst nicht mehr das einzige Online-Werkzeug für das Erstellen von interessanten Farbschemata dar: Mit ColorJack, ColorBlendy, ColorRotate und dem Color Scheme Designer stehen bereits vielseitige Alternativen zur Auswahl.
Aktuell gibt es eine weitere Entwicklung auf diesem Gebiet, die Colourcode getauft wurde und das Definieren von großen Farbflächen über Mausbewegungen erlaubt.

Colourcode - Find your colour scheme

Das Konzept ähnelt dem Piknik Color Picker und wurde erweitert um vordefinierte Farbkontraste (monochrom, analog, triadisch, komplementär, etc.), wobei sich Farbkombinationen auch frei erstellen lassen.
Interessant dürften vor allem die Export-Möglichkeiten für Webdesigner und -entwickler sein, da sich die Farbschemata im SCSS- oder LESS-Code abspeichern lassen. Alterativ können die Farben auch als PNG-Grafik heruntergeladen oder als permanenter Link verwendet werden. Bei GitHub gibt es übrigens den Quellcode der Online-Anwendung.

201302Nov

Webdesign: Sammlung mit über 4000 Foto-Texturen

Viele moderne Websites überzeugen durch ein gut abgestimmtes Design, das in der Regel mit feinen Texturen und Mustern aufgewertet wird. Obwohl das "Flat-Design" durch Windows 8 und iOS 7 im Trend liegt, besteht hier die Gefahr, in der Masse unterzugehen. Daher sollten immer Muster oder Foto-Hintergründe in Betracht gezogen werden: Wenn eine Textur auch nur dezent im Hintergrund zu sehen ist, so macht dies einen großen Unterschied zu einer farbigen Fläche oder einem Farbverlauf. Umso wichtiger ist eine große Auswahl an verschiedenen Foto-Texturen, die im Netz zwar vertreten, aber nicht immer leicht zu finden sind.
Bei TonyTextures.de gibt es nun einen Bereich, in dem über 4000 kostenlose Texturen zum Download bereitstehen und sowohl privat als auch kommerziell genutzt werden dürfen.

TonyTextures.de - Kostenlose Foto-Texturen für Webdesign und Architekturvisualisierung

Die Foto-Texturen stehen in einer Auflösung von durchschnittlich 1600 × 1200 Pixeln zur Verfügung und können direkt heruntergeladen werden. Ein Blick in die Sammlung lohnt sich auf jeden Fall, da sich hier interessante Motive aus unterschiedlichen Bereichen finden: Erde, Sand, Holz, Stein, Metall, Moos, Gebäude, Wolken, Landschaften, Innenräume, Pflanzen oder Wasser stellen Einige der Kategorien dar, in welche die Sammlung untergliedert ist. Viel Spaß beim Stöbern.

201301Nov

Simple Alarm: Einfacher Wecker für Windows

Nicht unbedingt eine Weckuhr, aber ein einfaches Tool für Erinnerungen stellt die Windows-Anwendung "Simple Alarm" dar, die ich bei GitHub zur Verfügung gestellt habe. Es handelt sich dabei um ein einfaches AutoHotkey-Skript, welches auch als ausführbare EXE-Datei heruntergeladen werden kann. Wie der Name schon sagt, ist die Anwendung sehr einfach gehalten: Lediglich die Uhrzeit sowie eine Nachricht, die angezeigt werden soll, können im Programmfenster eingetragen werden. Anschließend wird das Programm in den Infobereich neben der Uhr platziert und läuft anschließend im Hintergrund.

Simple Alarm - Einfacher Wecker für Windows

Ist der zuvor eingestellt Zeitpunkt erreicht, wird die entsprechende Nachricht angezeigt und das Programm wird wieder beendet. Es handelt sich also um eine sehr rudimentäre Anwendung, die aber ihren Zweck erfüllt, wenn es darum geht, an unregelmäßige Dinge erinnert zu werden.

201301Okt

Google Web Designer: Tool für HTML5-Animationen

Adobe Edge Animate machte den Anfang, dann folgten Tools wie der A5 HTML Animator oder Hype und nun hat steht auch mit Google Web Designer ein weiteres interessantes Tool für Windows und Mac OS X bereit, mit dem sich HTML5-Seiten und -Animationen über eine Benutzeroberfläche erstellen lassen. Google Web Designer kommt ebenfalls mit einer dunklen Benutzeroberfläche und bietet neben einer Zeitleiste und diversen Objekt-Einstellungen, wie man sie auch in Edge Animate vorfindet, noch weitere Funktionen: Ein Bezier-Werkzeug sowie 3D-Transformationen stehen in der Palette zur Auswahl.

Google Web Designer

Das Programm erzeugt HTML5-, CSS3- und JavaScript-Code. Objekte, die mit dem Rechteck- oder Stift-Werkzeug erstellt wurden, werden als Canvas-Elemente ausgegeben und per JavaScript animiert. Zudem können aber auch div-Container (Tag-Tool) erzeugt werden, die dann über CSS3-Keyframes animiert werden. Den entsprechenden Code generiert die Software. Positiv ist hierbei die Codeansicht, da hier der erzeugte Quellcode direkt angesehen und bearbeitet werden kann.
Momentan handelt es sich bei Google Web Designer noch um eine Beta-Version, die aber schon jetzt überzeugen kann und im Gegensatz zu Edge Animate eine größere Funktionspalette bietet, da eben auch Canvas-Animationen erzeugt werden können. Im GoogleWatchBlog finden sich weitere Informationen zur Anwendung.

201311Sep

ECMAScript 6: Ein Blick auf Arrow Functions

Die sechste Version des ECMAScript-Standards mit dem Namen "Harmony" soll im Dezember 2013 fertiggestellt werden. Schon jetzt macht die Feature-Liste Lust auf das neue JavaScript: Block-Scopes, Typed Objects, Spreads, Proxies, Module und verbesserte Methoden für Iterationen zeichnen die wichtigsten Neuerungen aus. Ebenfalls interessant sind die sogenannten "Arrow Functions", deren Bezeichnung von der Verwendung des Arrow-Operators (=>) abgeleitet ist.

ECMAScript 6 - Harmony

Arrow Functions vereinfachen in bestimmten Situationen Methoden-Aufrufe und bieten zudem ein lexikalisches "this"-Binding, so dass "this" an der Stelle im Kontext steht, an der die Arrow Function aufgerufen wurde. Ein Beispiel:

  • var PageHandler = {
  • init: function() {
  • document.addEventListener("click",
  • event => this.doSomething(event.type), false);
  • },
  • doSomething: function(type) {
  • // Code
  • }
  • };

Weitere Beispiele und Erklärungen finden sich in diesem Artikel bei NCZOnline. Sehenswerte Präsentationen über die Neuerungen von ES6 allgemein gibt es hier und auf dieser Seite.