Tag: tipps

201629Mä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.

201522Nov

PhotonKit: UI-Komponenten für Electron-Apps

Vor ein paar Wochen berichtete ich über ein Tutorial für Electron/AngularJS. Wer mit dem JavaScript-Framework für plattformübergreifende Desktop-Anwendungen experimentieren möchte, kann mit der Anleitung beginnen. Wer zudem fertige HTML/CSS-Bedienelemente für Electron sucht, sollte einen Blick auf PhotonKit werfen.

PhotonKit - The fastest way to build beautiful Electron apps using simple HTML and CSS

Dabei handelt es sich um eine Sammlung verschiedener Komponenten, die für eine Desktop-App erforderlich sein können. Dazu zählen Header/Footer, Navigationen, Buttons, Tabs, Listen, Tabellen sowie eine Icon-Schriftart. PhotonKit könnte also auch als "Bootstrap für Electron" verstanden werden. Das Projekt steht bei GitHub bereit und die CSS-Komponenten liegen im SASS-Format vor.

201524Okt

CSS: Refresher Notes als modernes Kompendium

CSS ist zweifelsohne eine Design-Syntax, die immer wieder durch ihre Robustheit und Vielfältigkeit überzeugt. Mittlerweile finden die kaskadierenden Stylesheets nicht nur im Web-Bereich Verwendung, sondern verstärkt auch in mobilen Apps oder gar Desktop-Anwendungen. Dennoch stellt CSS nach wie vor eine Herausforderung dar, da komplexe Layouts auch komplexe Regeln erfordern. Und gerade responsive oder adaptive Designs verlangen Webdesignern Einiges an Know-How ab.
Zum Auffrischen, aber auch zum Nachschlagen hat der Entwickler Vasa aus San Francisco diesbezüglich die CSS Refresher Notes bei GitHub angelegt.

CSS Refresher Notes - a quick refresher of CSS concepts compiled from various articles online

Dabei handelt es sich um eine Art CSS-Kompendium, das Informationen aus verschiedenen Online-Quellen enthält. Behandelt werden die Themen Positioning, Display, Floats, CSS-Selektoren, Effizienz von Selektoren, Repaints und Reflows, CSS3-Properties, CSS3-Media Queries, responsives Webdesign, CSS3-Transitions, CSS-Animationen, SVG, CSS-Sprites und vertikale Ausrichtung. Für angehende und bestehende CSS-Experten sind die Refresher Notes in jedem Fall ein Platz in den Bookmarks wert.

201505Okt

JavaScript: Desktop-Anwendungen mit Electron/AngularJS

Plattformunabhängige Desktop-Anwendungen, die unter Windows, Mac OS X und Linux laufen, lassen sich seit geraumer Zeit auch mit einer JavaScript-Codebasis umsetzen. Dafür ist lediglich ein nativer Wrapper notwendig, der eine HTML-Engine integriert und die Ausführung von JavaScript über eine virtuelle Maschine ermöglicht. Diese beiden Aspekte werden mit dem Chromium-Framework erreicht. Damit auch native Fenster, Menüs und weitere Funktionalitäten möglich sind, ist ein Framework wie GitHubs Electron (zuvor Atom Shell) nötig. Hiermit kann direkt mit der Entwicklung der eigentlichen Anwendung gestartet werden.

Scotch.io - Creating Desktop Applications With AngularJS and GitHub Electron

Microsofts Visual Studio Code ist wahrscheinlich der bekannteste Vertreter der Electron-Ära. Wer eine eigene Desktop-Anwendung mit JavaScript entwickeln und dabei auch von AngularJS Gebrauch machen möchte, sollte sich dieses Tutorial ansehen. Darin wird Schritt für Schritt die Entwicklung einer nativen AngularJS-App beschrieben, die eine einfache Kundenverwaltung als Beispiel repräsentiert. Es werden die verschiedenen Schritte für Logik und User Interface bis hin zur Veröffentlichung mittels nativem Installer beschrieben.

201529Sep

Matreshka: Ereignisgesteuertes JavaScript-Framework

Webentwickler haben bei der Frage nach einem Framework für die nächste Webanwendung in der Regel freie Auswahl. Mit AngularJS, React, Backbone, Ember oder Knockout stehen komfortable Lösungen bereit, die keine Wünsche offen lassen und auch bei komplexeren Projekten eine gute Figur machen. Wenn es etwas kompakter sein soll, könnte Matreshka eine gute Wahl sein. Auch dabei handelt es sich um ein ereignisgesteuertes Framework, das Zwei-Wege-Bindings bietet und mit Klassen (ES5- und ES6-Stil möglich) arbeitet. Zudem ist ein Router für Single-Page-Applications integriert.

Matreshka - Event-driven JavaScript framework

Matreshka will in erster Linie durch Minimalismus und Schnelligkeit überzeugen: Auf der Seite gibt es Statistiken, wie es gegenüber anderen Frameworks wie AngularJS, React und Knockout abschneidet, wenn sich 100, 500 oder 1000 Objekte auf einer Seite befinden. Im Vergleich ist Matreshka also sehr schnell, wenn viele Objekte verarbeitet werden müssen.
Hier noch ein kleines Snippet von der Website, welches die Zwei-Wege-Bindings demonstriert:

  • <input type="text" class="my-input">
  •  
  • <script>
  • var app = new Matreshka();
  • app.bindNode("x", ".my-input");
  • app.x = "Two-way data binding in JS? O rly?";
  • </script>

Wer ein komplexeres Beispiel sehen möchte, kann sich den dokumentierten Code des TodoMVC-Projekts ansehen. Bei GitHub findet sich der Quellcode der Bibliothek.