201330Dez

JavaScript: Transpiler, Module Loader und Polyfills für ES6

Zum Jahresende noch ein nützlicher Link für ES6-Interessierte: Addy Osmani hat bei GitHub ein Repository veröffentlicht, das interessante Tools für ECMAScript 6 beinhaltet. Neben Transpilern, also Code-Umwanderln, welche ES6-Syntax in ES5-Syntax konvertieren und damit ausführbar machen, finden sich auf der Seite weitere Tools für die Arbeit mit dem neuen JavaScript-Standard.

JavaScript - An aggregation of tooling for ES6

So stehen Grunt-Tasks bereit, mit denen sich das Transpiling automatisiert ausführen lässt. Auch Polyfills für Module Loader, mit denen sich ES6- und AMD-Module verwalten und erzeugen lassen, sind aufgeführt. Weiterhin gibt es Lückenfüller für Weakmaps, Promises, Reflections und einige String-Funktionen (z.B. startsWith oder endsWith). Abgerundet wird die Sammlung durch ES6-Code-Generatoren und Links zu weiterführenden Slides über ES6 und die Zukunft von JavaScript.

201328Dez

PhpFiddle: PHP/MySQL-Snippets online ausführen

Online-Editoren für etliche Programmiersprachen gibt es mittlerweile mehrfach: Ideone oder Compilr wären bekannte Vertreter dieser Art. Für JavaScript/HTML/CSS haben sich Tools wie JS Bin, JSFiddle oder CodePen durchgesetzt. Für PHP-Entwickler, die direkt im Browser ein Code-Snippet ausprobieren möchten oder einem Kollegen eine MySQL-Funktion zukommen lassen wollen, sollten einen Blick auf PhpFiddle werfen. Dabei handelt es sich im Prinzip um das Pendant zu JSFiddle, nur eben für PHP.

PhpFiddle - The Best Place to Run PHP/MySQL, HTML/CSS and JavaScript Online

Der Online-PHP-Editor kommt mit verschiedenen API-Anbindungen und bietet die Möglichkeit, bekannte Bibliotheken einzubinden. Zudem können SOAP- und XML-RPC-Services angesteuert werden und die Verwendung von MySQLi, PDO sowie PHPMailer ist ebenfalls möglich. Gerade für das schnelle Testen von MySQL-Abfragen dürfte PhpFiddle interessant sein: Der Code für die Verbindung zur Test-Datenbank kann per Klick geladen werden. Weiterhin kann der PHP-Code durch etliche Sniffer (PEAR, Squiz, Zend, etc.) validiert werden. Auch eine Securiy-Test-Suite zur Überprüfung von möglichen Sicherheitslücken (CSRF, RFE, XSS, DT, LFI, SQL Injections) steht zur Verfügung.
Schließlich gibt es auch noch eine abgespeckte Variante, die als PhpFiddle Lite bereitsteht und eine weniger komplexe Oberfläche bietet.

201327Dez

JavaScript: Use-Cases von ES6-Modulen im Detail

Die Verwendung von AMD-Modulen mit ECMAScript 5 hat sich inzwischen als bewährte Methode durchgesetzt, wenn es darum geht, größere JavaScript-Projekte in Komponenten zu kapseln und Abhängigkeiten zu erzeugen. Mit ECMAScript 6 (ES6) werden echte Module eingeführt, die per import und export erzeugt bzw. geladen werden können. Wer einen weiteren Blick in die Zukunft von ES6 werfen will, sollte sich den Gist über ES6-Module von Yehuda Katz ansehen. Dort werden diverse Use-Cases gezeigt, welche den Einsatz von ES6-Modulen verdeutlichen.

ES6 - Use-cases of modules

Der Artikel ist untergliedert in verschiedene Bereiche:

  • Terminology
  • Imports and Exports
  • Avoiding Scope Pollution
  • Concatenation
  • Modules in Non-Default Locations
  • The Compilation Pipeline
  • Configuration of Existing Loaders
  • Referencing Modules in HTML
  • Creating Modules from HTML

Neben dem Laden von ES6-Modulen wird auch das Laden von AMD-Modulen beschrieben sowie der Import von Node-Modulen. Der Beitrag gibt einen interessanten Einblick in die Richtung, in welche ES6 im Bereich der Module gehen wird.

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.