Tag: tipps

201627Nov

PixelZoomer für Windows: Jetzt verfügbar

Es ist geschafft: Das Projekt ist zwar schon seit einiger Zeit fertiggestellt, aber es musste auch noch eine entsprechende Website her. Ab sofort ist meine Firefox-Erweiterung PixelZoomer auch als Windows-Anwendung verfügbar! PixelZoomer für Windows ist kostenlos und kann direkt heruntergeladen werden. Die Anwendung ist eine Weiterentwicklung der Firefox-Extension. Sie erstellt beim Start einen Desktop-Screenshot und bietet die gewohnten Tools. Das Programm basiert auch weiterhin auf Mozilla-Technologie. Durch das Laufzeitpaket XULRunner läuft die Anwendung zuverlässig in allen gängigen Windows-Versionen, wobei Windows 8 oder höher zu empfehlen ist.

PixelZoomer für Windows

Durch den Einsatz von XULRunner konnte ich den Großteil der Firefox-Erweiterung übernehmen: Lediglich die Screenshot-Erzeugung musste neu in C++ implementiert und anschließend als XPCOM-Komponente eingebunden werden. In diesem Zuge habe ich PixelZoomer gleich ein neues User Interface verpasst und einige Anpassungen vorgenommen. Zudem lassen sich Grafiken aus der Zwischenablage einfügen, wodurch auch MouseOver- und Hover-Effekte analysiert werden können.
Mit der Windows-Variante von PixelZoomer ist die Pixelanalyse nicht mehr auf Firefox beschränkt. Es können alle beliebigen Browser verwendet werden, da die Anwendung einen Screenshot des gesamten Desktops erzeugt (bei mehreren Monitoren kann ausgewählt werden). Zudem können auch einfach Browser nebeneinander angeordnet werden, um einen direkten Vergleich zu haben. Oder aber die Designvorlage kann analysiert werden, wenn beispielsweise Abstände überprüft oder Farbwerte abgelesen werden sollen.
PixelZoomer für Windows ist ab jetzt in Version 1.0 verfügbar. Einen Update-Mechanismus gibt es in der Form nicht, jedoch wird im Hilfe-Fenster angezeigt, ob eine neue Programmversion verfügbar ist. Viel Spaß mit der Anwendung!

201607Aug

Windows 10: Fensterpositionen und -größen speichern

Wer sich mit Windows 10 angefreundet hat und es täglich produktiv im Einsatz hat, wird die Arbeit mit dem Betriebssystem zu schätzen wissen. Ab und an können allerdings kleinere Unstimmigkeiten auftreten, die sich in unerwünschten Nebeneffekten äußern. Einer dieser Nebeneffekte zeichnet sich in der Fensterverwaltung aus: Hier nehmen zuvor geöffnete Fenster beispielsweise nach einem Neustart des Rechners nicht unbedingt die vorherige Größe und Position ein. Zudem kommt es darauf an, ob Fenster mit Tastenkombinationen (mittels WIN-Taste) an ihre Position gebracht wurden. Ärgerlich ist es da, wenn wiederkehrende Anwendungen und deren Fenster täglich erneut auf die gewünschte Größe eingestellt werden müssen.

Wer sich die Arbeit sparen möchte, kann ein einfaches AutoHotkey-Skript wie DockWin nutzen: Sind alle gewünschten Anwendungen geöffnet und haben die Fenster ihre Zielgröße und -position, können die entsprechenden Fensterdaten per Tastendruck gespeichert und geladen werden:

  • WIN + SHIFT + 0 = Fensterpositionen speichern
  • WIN + 0 = Fensterpositionen laden

Wird der Rechner also neu gestartet, müssen dann nur die üblichen Programme gestartet werden. Anschließend können deren Fensterpositionen und -größen einfach mit dem AutoHotkey-Skript geladen werden. Das Skript unterstützt auch mehrere Monitore.

201609Jul

JavaScript: Asynchrone Abläufe mit Zonen steuern

Die Arbeit mit asynchronen Abläufen kann in JavaScript seit geraumer Zeit durch Promises und entsprechenden Bibliotheken erleichtert werden. Gerade JSON-Requests und deren Verarbeitung wird durch Promises wesentlich einfacher, da keine verschachtelten Callbacks mehr benötigt werden. Verbinden lassen sich asynchrone Abläufe auch mit Observables, wie man sie beispielsweise von Knockout kennt. Angular 2 etwa greift hierfür auf die ReactiveX-Observables zurück. Ebenfalls neu in Angular 2 ist das Konzept von Zonen: Bei einer Zone handelt es sich um einen Ausführungsbereich, der sich über asynchrone Aufrufe erstreckt. In JavaScript wird dadurch das Konzept eines lokalen Threadspeichers simuliert.

JavaScript - Asynchrone Abläufe mit Zonen steuern

Das AngularJS-Team hat für diesen Zweck die Bibliothek Zone.js entwickelt, die fester Bestandteil von Angular 2 ist und mittlerweile auch als Standalone-Bibliothek genutzt werden kann. Inspiriert wurde Zone.js von dem Zonen-Konzept von Dart. Mit Zonen lassen sich also asynchrone Verarbeitungen, wie etwa setTimeout oder Promises, gezielt steuern. Eine vereinfachte Implementierung von Zonen gibt es zum Beispiel mit can-zone. Auf der GitHub-Seite finden sich Code-Beispiele, wie einfache Zonen umgesetzt werden können. Bis es Zonen in den EMCAScript-Standard schaffen, dürfte noch eine Weile vergehen. Bis dahin eignen sich derartige Frameworks also bestens.

201604Jun

Angular 2 Seed: TypeScript-Starter-Kit für WebApps

Das Angular-Framework geht in die zweite Runde und auf der offiziellen Website befinden sich bereits ausführliche Tutorials und Ressourcen für Entwickler, die mit der neuen Version der Bibliothek arbeiten möchten. Angular 2 stellt eine Rundumerneuerung dar, bei der sich Einiges geändert hat: So wurden etwa Controller durch Components ersetzt, das $scope existiert in der Form nicht mehr und die Entwickler sind gänzlich auf ein Modulsystem umgestiegen. Zudem kommt RxJS zum Einsatz, was die Arbeit mit asynchronen Abläufen vereinfacht. Auch die Template-Syntax hat sich grundlegend geändert. Alles in allem ist Angular 2 aber schon jetzt ein durchdachtes und gelungenes Framework — wer sich die Alpha- und Beta-Versionen angesehen hat, dürfte einen ersten Eindruck erhalten haben.

Angular 2 Seed - A basic Angular 2 TypeScript starter project

Da ich mit den derzeitigen Seeds, also Angular 2-Boilerplates, nicht zufrieden war, habe ich einen eigenen Seed erstellt: Es handelt sich dabei um eine beispielhafte Single-Page-Application (SPA), die auf TypeScript, Sass und SystemJS basiert. Die Webanwendung enthält einen Login-Bereich sowie eine Dashboard-Ansicht, so dass es autorisierte und öffentliche Bereiche gibt. Zudem gibt es ein Directive, einen Service sowie eine Pipe. Auch eine Fehlerseite und das damit verbundene Routing-Konzept sind enthalten. Für die TypeScript- und Sass-Kompilierung sowie die Erzeugung des Angular 2-Bundles (SystemJS) kommt Gulp zum Einsatz. Hiermit kann auch eine Produktionsversion der WebApp erzeugt werden, bei der JavaScript und CSS jeweils in eine Datei zusammengeführt werden.
Eine Online-Demo des Angular 2-Seeds gibt es auf dieser Seite. Das Projekt steht bei GitHub zum Download bereit.

201630Mär

WebGL: Einführung in GLSL und 3D-Grundlagen

Wer sich für das Gebiet der 3D-Grafik interessiert und diese zudem im Browser darstellen möchte, kommt an WebGL und den Grundlagen von 3D-Grafikprogrammierung nicht vorbei. Es handelt es sich um ein mittlerweile sehr komplexes Feld, zumal auch die Anforderungen an dreidimensionale Darstellungen steigen. Bei WebGL handelt es sich um ein Subset von OpenGL, genauer gesagt basiert WebGL auf OpenGL ES (OpenGL for Embedded Systems). Es gibt ein paar Unterschiede im Vergleich zur OpenGL-API und was Shader betrifft, stehen in WebGL lediglich Vertex- und Fragment-Shader zur Verfügung — mit diesen beiden Arten von Shadern lassen sich dennoch aufwendige Effekte erzielen.

Can I use - WebGL 2016

Wenn man einen Blick auf die Browser wirft, die WebGL derzeit ganz oder teilweise unterstützen, lässt sich folgern, dass etwa 85% der Webbrowser mit dem 3D-Standard arbeiten können.
Der Einstieg in die Materie ist in diesem Bereich nicht gerade einfach, deshalb empfiehlt sich eine Anleitung wie die von Ilya Pestov. Es handelt sich dabei um eine Übersetzung eines russischen Artikels, der wiederum einen guten Einstieg in WebGL darstellt. Es werden GL-Grundlagen, Shader sowie Matrizen behandelt und schließlich wird am Ende ein rotierender 3D-Würfel mittels GLSL und JavaScript erzeugt.

201623Jan

JavaScript: Richtige Bedingung für globale Variablen

In JavaScript stößt man hin und wieder auf Besonderheiten, die nicht immer begründet werden können. Wie der Interpreter arbeitet, leuchtet daher nicht in jedem Fall ein. Eine dieser Besonderheiten stellt die Überprüfung von globalen Variablen dar. Hierzu gibt es zwei Möglichkeiten, die sich allerdings in ihrer Art unterscheiden. Das folgende Code-Snippet erzeugt einen Fehler, wenn die globale Variable testVar nicht vorhanden ist.

  • if (testVar) {
  • // Code
  • }

Wer globale Variablen verwenden will, erzeugt diese am besten mit var oder window.variablenName. Und hieraus ergibt sich eine Logik zur Überprüfung, die sich anders verhält: Wenn beim Überprüfen von globalen Variablen, die (noch) nicht vorhanden sind, der window-Namespace vorangestellt wird, schlägt der JavaScript-Interpreter nicht mit einem Fehler aus. Eine bessere Überprüfung könnte dann so aussehen:

  • if (window.testVar) {
  • // Code
  • }

Generell sollten natürlich so wenig globale Variablen wie möglich verwendet werden, um Konflikte mit anderen Bibliotheken zu vermeiden. Daher eignen sich Namespaces oder eine IIFE bestens, um diesem Problem vorzubeugen.

201618Jan

VerbalExpressions: Reguläre Ausdrücke leicht gemacht

Reguläre Ausdrücke sind auch in der Webentwicklung ein wichtiges Werkzeug, wenn es beispielsweise um die Validierung von Zeichenketten geht. Die Ausdrücke an sich können jedoch schnell sehr komplex werden und diese sind nicht immer leicht zu meistern. Zwar gibt es Tools zur Visualisierung von regulären Ausdrücken, allerdings hilft das nur bedingt.
Vereinfachen lassen sich die Ausdrücke aber dennoch: Zum Beispiel mit einer Bibliothek wie VerbalExpressions, die auch für JavaScript (Browser und Node.js) zur Verfügung steht.

VerbalExpressions - JavaScript Regular Expressions made easy

Dabei handelt es sich um eine Art Hochsprache für reguläre Ausdrücke, die solche durch einfache Funktionen generiert. So lassen sich verschiedene Bedingungen durch Chaining aneinander hängen. Mit Funktionen wie maybe() oder anythingBut() können dann komplexe Abfragen vereinfacht geschrieben werden:

  • var tester = VerEx()
  • .startOfLine()
  • .then('http')
  • .maybe('s')
  • .then('://')
  • .maybe('www.')
  • .anythingBut(' ')
  • .endOfLine();
  •  
  • var testMe = 'https://www.google.com';
  •  
  • if (tester.test(testMe)) {
  • alert('We have a correct URL'); // Output
  • } else {
  • alert('The URL is incorrect');
  • }
  •  
  • console.log(tester);
  • // Output: /^(http)(s)?(\:\/\/)(www\.)?([^\ ]*)$/

Die VerbalExpressions-Bibliothek steht bei GitHub bereit und gibt es gibt Portierungen für nahe zu jede Sprache, darunter PHP, Dart, Swift, Java, Lua und C#.

201610Jan

JavaScript: Jeden Tag ein neuer Tipp

Das neue Jahr ist angebrochen und die Motivation stimmt. Auch für Entwickler kann dies Anlass sein für ein neues Projekt: Wie zum Beispiel die Javascript Tips von Joel Lovera. Es handelt sich dabei um ein GitHub-Repository, das seit dem 29. Dezember 2015 mit nützlichen JavaScript-Tipps erweitert wird.

Dabei decken die Tipps unterschiedliche Bereiche ab: Sowohl Vanilla-JavaScript als auch Frameworks wie AngularJS oder React sind hierbei vertreten. Zudem werden diverse ES6-Funktionen erklärt. Viele Tipps dürften für die meisten Webentwickler selbstverständlich sein, aber es könnte auch die eine oder andere neue Hilfestellung dabei sein. Der Autor freut sich übrigens über weitere Tipps, die bei ihm eingereicht werden können.