Tag: tricks

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.

201304Dez

reSRC: Sammlung freier Bücher über Programmierung

Was darf es denn sein? Ein Exkurs in die Grafikprogrammierung mit DirectX, OpenGL und Shadern? Oder doch eher die Bereiche Software-Architektur, Datenbanken, Betriebssysteme und Datamining? Allein die Liste der unterschiedlichen Fachgebiete und Programmiersprachen scheint endlos zu sein: Bei reSRC gibt es die "List of Free Programming Books", die Entwickler-Herzen höher schlagen lässt. Hier dürfte wirklich für jeden Programmierer etwas dabei sein.

reSRC - List of Free Programming Books

Neben sprachunabhängigen Bereichen, die teilweise oben schon aufgezählt wurden, gibt es für ziemlich jede Programmiersprache Links zu kostenlosen PDF-eBooks oder Websites: Von ASP.NET und Assembler über C++, CoffeeScript und Dart, vorbei an Erlang, Go, Haskell, JavaScript und Lua bis hin zu Objective-C, PHP, Processing, Python, Ruby, Scala, SQL oder gar TypeScript. Inzwischen gibt es für JavaScript sogar Unterbereiche wie Knockout.js, AngularJS, Backbone oder node.js. Da lohnt sich das Stöbern also.

201303Dez

HTML5: Tutorial für verschiedene Canvas-Zeicheneffekte

Browser-Zeichentools wie Sketchpad, Harmony oder Livebrush sind inzwischen bekannt. Die Apps sind unterschiedlich komplex und doch sind viele der eingebauten Zeicheneffekte relativ unkompliziert in der Programmierung. Juriy Zaytsev, besser bekannt ist als "kangax" und Schöpfer des unverzichtbaren "ECMAScript 5 compatibility tables", hat einen interessanten Artikel über die Erstellung verschiedener Zeicheneffekte mit dem HTML5-Canvas-Element veröffentlicht.

Perfection Kills -  Exploring canvas drawing techniques

In dem Beitrag erklärt der ehemalige Prototype.js-Core-Entwickler Stück für Stück Möglichkeiten, um eine virtuelle Zeichenfläche bzw. entsprechende Pinsel mit JavaScript zu erzeugen. Vom punkt-basierten Ansatz über Kantenglättung und Bezier-Kurven bis hin zu multiplen Pinselspitzen dürfte für jeden Geschmack etwas dabei sein. Alle Pinsel könne direkt über die eingebundenen CodePen-Widgets ausprobiert und angepasst werden. Viel Spaß beim Zeichnen!

201330Nov

Webentwicklung: Interaktive Tutorials für HTML5-Games

Seit der Einführung des Canvas-Elements steht auch HTML-Spieleentwicklern eine Grafikschnittstelle zur Verfügung, mit der sich auch komplexere Animationen und Effekte umsetzen lassen. Dabei muss nicht mehr auf CSS ausgewichen werden und zudem ist die Entwicklung dank JavaScript und der Canvas-API denkbar einfach. Doch ein HTML5-Spiel besteht nicht nur aus der Kommunikation mit der Schnittstelle, sondern erfordert vor allem Kreativität und natürlich Verständnis für mathematische Gegebenheiten.
Bei Crunchzilla finden sich interaktive Anleitungen für die Entwicklung von Browser-Games: Dabei sind die Tutorials in die Bereiche "Code Monster", "Code Maven" und "Game Maven" unterteilt.

Crunchzilla - Interaktive Tutorials für HTML5-Games

Die Bereiche sind sowohl an Jugendliche als auch an Erwachsene gerichtet: In einem Live-Editor kann JavaScript-Code bearbeitet werden und rechts daneben findet sich die entsprechende Echtzeit-Vorschau. Ein virtueller Mentor führt angehende Spieleentwickler von Beginn an durch die verschiedenen Kurse und gibt Tipps zur Entwicklung bestimmter Szenarien. So werden nach und nach kleine Spiele im Browser entwickelt, die sich durchaus sehen lassen können.

201326Nov

JavaScript: Angular und Backbone im Vergleich

Über aktuelle MVC- und MVVM-Frameworks gibt es bereits interessante Artikelreihen, in denen die unterschiedlichen Aspekte der Bibliotheken beleuchtet werden. Entwickler haben die freie Wahl zwischen Angular, Backbone, Ember, Knockout und weiteren "Next-Gen-Frameworks". Da es immer unterschiedliche Sichtweisen gibt, kann es bei der Auswahl hilfreich sein, verschiedene Quellen anzusehen. So gibt es bei InfoQ einen weiteren Beitrag, in dem die Kernaspekte von Angular und Backbone etwas genauer betrachtet werden.

InfoQ -  Contrasting Backbone and Angular

Der Beitrag behandelt verschiedene Themengebiete, die bei der Umsetzung einer Webanwendung eine Rolle spielen: Business-Logik, DOM-Struktur, View-Logik, Model-View-Synchronisation, Interaktionen, Routing und Komponenten. In Tabellen werden jeweils die zutreffenden Verhaltensweisen von Backbone und Angular bei diesen Themen aufgelistet. Zusätzlich wird der Beitrag durch Abbildungen ergänzt, womit er auf jeden Fall ein besseres Bild der beiden Bibliotheken vermitteln dürfte.

201325Nov

jQuery Evergreen: jQuery-API für moderne Webbrowser

Moderne Webbrowser, die mit ECMAScript 5 ausgestattet sind, bieten bereits eine umfangreiche Funktionssammlung, die nicht mehr komplett mit jQuery ersetzt werden muss. Die Selector-Engines der Browser wurden erweitert und mit CSS3 lassen sich viele Animationen umsetzen, für die vorher jQuery notwendig war. Aus diesem Grund gibt es bereits diverse Micro-Libraries wie Min.js oder Zepto, die nur mit dem Nötigsten ausgestattet sind.
Lars Kappert hat nun mit jQuery Evergreen auch das jQuery-Pendant fertiggestellt: Eine API, welche auf die Fähigkeiten von aktuellen Webbrowsern aufbaut und dennoch den Komfort der beliebten JavaScript-Bibliothek bietet.

jQuery Evergreen - Lean and mean jQuery API for modern browsers

So lassen sich Events mi ".on()" und ".off()" zuweisen und entfernen und DOM-Manipulationen mit "addClass()" sind ebenfalls möglich. Weiterhin wurde die "find()"-Methode sowie "$.attr()" eingebaut. Lediglich die komplexeren Bereiche von jQuery wie "$.animate", "$.ajax" und "$.Deferred" wurden nicht umgesetzt. Für Internet Explorer 9 wird zudem ein Polyfill benötigt, der den Browser um die native "classList"-API erweitert.
jQuery Evergreen wurde übrigens im ES6-Stil geschrieben und in Module gekapselt. Es kann in den gängigen Browsern verwendet werden, da es mit dem ES6 Module Transpiler in AMD-Syntax konvertiert wurde.

201324Nov

JavaScript: Type-Checking mit Object.prototype.toString()

JavaScript ist dynamisch typisiert — und objektorientiert. Ersteres hat nicht immer positive Folgen im Alltag eines Entwicklers: Typfehler treten erst zur Laufzeit auf und auch das Feststellen von Typen ist nicht ganz einfach, da die Funktion "typeof" stets den Typ "object" zurückgibt. Folgende Abfragen verdeutlichen das Ganze:

  • typeof []; // object
  • typeof {}; // object
  • typeof null; // object
  • typeof document.createElement("div"); // object
  • typeof /abcd/; // object

Hilfreich ist die Verwendung von "typeof" also nicht, wenn der Typ wirklich genau bestimmt werden soll. Abhilfe schafft hier die native Funktion "Object.prototype.toString()", mit der sich auch der Name der Klasse zurückggeben lässt, von welcher das Objekt abgeleitet wurde. Für die maximale Typkontrolle sind dann noch ein paar Anpassungen notwendig, da beispiels "NaN" auch als "Number" gewertet wird. Diese Anpassungen haben die Entwickler von Badoo umgesetzt und in diesem Beitrag veröffentlicht. Die daraus entstandene Hilfsfunktion "type()" kann also sehr nützlich sein, wenn es um die Bestimmung von Typen in JavaScript geht.

201320Nov

TogetherJS: Echtzeit-Kollaboration auf Website einbinden

Das Projekt ist zwar schon etwas älter, aber vielleicht nicht jedem bekannt: Mit Mozillas TogetherJS lässt sich ein kleines Tool zur Echtzeit-Kollaboration auf einer beliebigen Website einbetten: Nach der Einbindung wird eine kompakte Benutzeroberfläche eingeblendet, über die sich weitere Benutzer zu der aktiven Sitzung einladen lassen. Teilnehmer innerhalb einer Session können dann auf der Website miteinander chatten und die Elemente der Seite verwenden. Andere Benutzer können dabei den Mauszeiger und die Tastatureingaben in Echtzeit verfolgen.

TogetherJS - Collaboration made easy

TogetherJS arbeitet mit Web Sockets und ein Mozilla-Server (Hub) kümmert sich um das Weiterleiten der Pakete. Lediglich das Skript und ein Button zur Aktivierung müssen auf der gewüntschten Website eingebunden werden.

  • <script src="https://togetherjs.com/togetherjs-min.js"></script>
  • <button onclick="TogetherJS(this); return false;">Start TogetherJS</button>

Auf der Website des Projekts gibt es auch Beispiele, die das Testen von TogetherJS in Echtzeit erlauben. Das Skript dürfte sich für viele Szenarien als nützlich erweisen, beispielsweise bei Hilfestellungen in einem Content-Management-System oder um Website-Feedback einzuholen.