Tag: tutorials

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.

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.

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.

201523Sep

JavaScript: Einführung in React ohne JSX, ES6 und Flux

Für die Umsetzung moderner Webanwendungen eignen sich inzwischen diverse Frameworks und Ansätze. Was die Backend-Architektur angeht, ist die Verwendung einer RESTful-API schon fast selbstverständlich geworden. JavaScript-Frameworks wie AngularJS, Backbone.js oder React eignen sich bestens für REST-Schnittstellen und bieten komfortable Möglichkeiten, was die clientseitige Datenbehandlung angeht. Jedes komplexere MV*-Framework bringt eine gewisse Lernkurve mit sich. Im Fall von React gibt es allerdings mögliche Stolpersteine außer dem Konzept des Frameworks selbst: Entwickler müssen die Flux-Architektur, ES6-Syntax und die ECMAScript-Erweiterung JSX verstehen.

James K. Nelson - Learn Raw React — no JSX, no Flux, no ES6, no Webpack

Wer erst einmal nur React verstehen möchte, ist womöglich mit dem Artikel von James K. Nelson gut aufgehoben. Darin setzt er nämlich eine kleine React-App um, ohne auf ES6 und JSX zurückzugreifen. In der Anleitung werden Daten mittels Template dargestellt und eine React-Komponente wird erstellt. Abschließend wird der App noch ein interaktives Formular hinzugefügt.
Wer also in die Welt von React eintauchen möchte, ist mit dieser Anleitung bestens bedient.

201506Sep

AngularJS: Artikel für den Einstieg in Angular 2

Es wird noch eine Weile dauern, bis Angular 2.0 erscheinen wird: Ein offizielles Release-Datum gibt es nicht, es ist von Ende 2015, aber auch von 2017 die Rede. Dennoch können sich interessierte Entwickler schon jetzt mit der kommenden Version des MVW-Frameworks vertraut machen. Auf der neuen AngularJS-Website steht die Alpha-Version zum Download bereit und zudem gibt es verschiedene Einführungen in das Framework.

AngularJS - Superheroic JavaScript MVW Framework

Jetzt wurde noch eine weitere Website von Thoughtram ins Leben gerufen, auf der ausgesuchte und hochqualitative Artikel zum Thema Angular 2.0 bereitgestellt werden. Die Seite trägt den Namen "Exploring Angular 2" und ist bisher in diese Kategorien unterteilt: Getting Started, Dependency Injection, Routing, Views and Rendering und Migration / Upgrade. Die Seite wird zukünftig um weitere Anleitungen ergänzt werden und sollte bei AngularJS-Entwicklern daher einen Platz in den Lesezeichen finden.

201501Sep

JavaScript: Schnelleinstieg in ES6 durch ES5-Vergleich

Für den kommenden JavaScript-Standard gibt es mittlerweile eine große Auswahl an Artikeln, Einführungen, Playgrounds, Polyfills oder Use-Cases. Zudem stehen schon ausführliche Beschreibungen bereit, in denen gezeigt wird, wie sich ES6 schon jetzt für Projekte einsetzen lässt.
Der Entwickler Alex Bardanov hat vor kurzem noch ein nützliches GitHub-Repository erstellt, in dem die Unterschiede von ECMAScript 5 und 6 direkt aufgezeigt werden.

JavaScript - Comparison between ECMA5 and ECMA6 features

Das Repository ist unterteilt in die Kategorien Arrows, Classes, Enhanced Object Literals, Template Strings, Destructuring, Default / Rest / Spread, Let / Const, Iterators / For..Of, Generators und Modules. Sogar das Array Comprehension-Feature von ES7 wird beleuchtet. Das Repository kann sehr gut als Schnelleinstieg genutzt werden, da lediglich Snippets von ES5- und ES6-Code zugrunde liegen und miteinander verglichen werden können.