MuchaDev

Tutorials & Projekt Entwicklung

Dev Blog über Tutorials und eigene Projekte

Willkommen auf MuchaDev

MuchaDev ist eine gemeinnützige Webseite, welche Tutorials bezüglich Webentwicklung, Hybridentwicklung, Desktopentwicklung und Spieleentwicklung mit verschiedenen Frameworks veröffentlicht. Darüber hinaus werden auch eigene Projekte veröffentlicht.

CSS4 - Light & Dark Theme mit CSS Custom Properties (Variablen)

erstellt: 15.03.2019
Ein Light und Dark Theme kann sehr einfach mit CSS Custom Properties (Variables), welche von modernen Browsern unterstützt werden, umgesetzt werden.

Vue - individuelles Component Iteration-Template definieren

erstellt: 10.03.2019
Die Directive v-slot erlaubt nicht nur das Platzieren von Content, sondern auch das Bereitstellen eines individuellen Templates für Iterations-Elemente.

Vue - Component via Mixin erweitern

erstellt: 09.03.2019
Ein Mixin ist ein wiederverwendbarer Schnipsel für Components und kann alle Optionen enthalten, die einer Component zugewiesen werden können.
Beim Extend eines Mixin werden alle Optionen zusammengeführt (merged).

AngularJs - Custom Form Control

erstellt: 17.02.2019
Custom Form Control mittels ngModel als ngModelCtrl für AngularJs erstellen.
Durch ngModelCtrl lassen sich $viewValue und $modelValue individuell zuweisen.

AngularJs async und await verwenden

erstellt: 08.02.2019
Async und await kann in AngularJs nur in Verbindung mit $scope verwendet werden, damit Änderungen im View aktualisiert werden.
Durch die Zuweisung von $q dem window.Promise Object wird intern $q verwendet.

Vuejs JSX Template

erstellt: 02.02.2019
Einfaches Vuejs JSX Starter Template, welches @vue/babel-preset-jsx in der Version 1.0.0-beta.2 nutzt.
Demonstriert einen einfachen Start um JSX und nicht-JSX Components zu verwenden.

AngularJs Child Reference erlangen

erstellt: 18.07.2018
Im folgenden wird erläutert wie in AngularJs eine custom Child Reference hergestellt wird.
Hier wird wie in React oder Preact ebenfalls mit einem Callback gearbeitet um ein ViewChild wie Angular2+ zu realisieren.

Angular Structual Directive erstellen

erstellt: 08.07.2018
Eine Structual Directive erlaubt den Zugriff auf DOM Strukturen mittels Hinzufügen, Entfernen oder Manipulieren von Elementen.
Die hier vorgestellte Structual Directive "asRepeat" erlaubt das einfache Iterieren über ein bestimmtes Intervall und erstellt ähnlich wie "ngFor" DOM Elemente.
Man kann sie sich als vereinfachte Form einer for Schleife vorstellen.

Angular Custom Form Control erstellen

erstellt: 09.06.2018
Oft sind normale HTML Inputs für komplexere oder umfangreichere Formulare nicht ausreichend.
Mittels ControlValueAccessor und NG_VALUE_ACCESSOR lassen sich Custom Form Controls realisieren und bei Wertänderungen diese übermitteln.
Zur Demonstration wird ein simpler Zahlen Spinner realisiert, der das normale HTML5 Spinner Verhalten erweitert und individuell gestalten lässt.

Angular Form Controls im Template mittels Keys Pipe iterieren

erstellt: 19.05.2018
Mithilfe des Angular Reactive FormBuilder lassen sich schnell FormControls definieren und einer FormGroup zuordnen.
Hierbei fügt Angular die FormControls in das jeweilige Objekt unter controls an (z.B.: myFormGroup.controls).
Doch was ist, wenn man den Template Part mittels *ngFor realisierieren möchte und ein eigenes dynamische Formular aufbauen möchte?