Hallo Liebe FrontendFriday Leser.

Um euch am Anfang maximal zu verwirren, gleich mal eine schöne Einstiegsfrage:

Was ist der Unterschied zwischen DOM und HTML DOM?

Es grenzt an Haarspalterei, aber es gibt tatsächlich einen Unterschied. DOM allein stehend ist ein W3C-Standard, welcher definiert, wie auf ein Dokument zugegriffen werden kann. Der W3C-DOM-Standard wird mit Core DOM (für alle Dokumententypen), XML DOM und HTML-DOM in drei Teile aufgeteilt. Das HTML DOM ist somit das Objektmodell und die Schnittstelle für das HTML, welches jedes HTML-Element als Objekt mit allen Eigenschaften, Methoden und Ereignissen definiert. Somit ist das HTML DOM der Standard, um HTML-Elemente zu ändern, hinzuzufügen oder zu löschen. Im folgenden Beitrag wird stellvertretend für den HTML DOM der DOM ausdruck verwendet.

Mehr

Hallo Zusammen & einen schönen Frontend Friday, heute geht es um das Statemanagement in ReactJS mit MobX.

Mehr

It’s Friday that means #FrontendFriday :)

Der ein oder andere findet Animationen auf einer Homepage passend zum Kontent interessant.

Was sind CSS Webkit-Animationen?

Eine Animation lässt die CSS-Eigenschaften ändern so wie ihr es haben wollt und auch so oft ihr es wollt.

Um die CSS Webkit-Animationen zu verwenden, muss man zunächst einige Keyframes für die Animationen festlegen.

Die @keyframes Regeln

Bei den Keyframes geht es darum, zu entscheiden, wann und wie sich das Element zu verhalten hat.

Unterstützung von Browsern:

Fill-Modus für eine Animation

CSS-Animationen haben keinen Einfluss auf ein Element, welches vor dem ersten Keyframe gespielt oder nach dem letzten Keyframe gespielt wird. Die Animation-fill-mode Eigenschaft kann dieses Verhalten außer Kraft setzen.

Die animation-fill-mode Eigenschaft gibt einen Stil für das Zielelement vor, wenn die Animation nicht abgespielt wird (bevor es beginnt, nachdem er endet, oder beides). Die Animation-fill-mode-Eigenschaft kann die folgenden Werte haben:

• none – Standardwert. Für die Animation gelten keine Stile auf das Element vor oder nach dem es ausgeführt wird
• forwards – Das Element wird die Stil-Werte beibehalten, die vom letzten Keyframe (abhängig von der Animation-Richtung und Animation-Iteration-count) gesetzt sind.
• backwards – Das Element wird die Stil-Werte erhalten, die durch den ersten Keyframe (abhängig von der Animation-Richtung) gesetzt sind und bewahren diese während der Animation-Verzögerungszeit.
• both – Die Animation folgt den Regeln für Vorwärts- und Rückwärtsbewegungen und erweitert die Animationseigenschaften in beide Richtungen

Animationen werden öfters im Zusammenhang mit JavaScript verwendet, um z.B. beim Klick auf einem Bild dieses zu animieren.

Auf GitHub gibt es zahlreich viele kleine oder auch große Bibliotheken, welche einem das Animieren einfacher machen, z.B.: https://daneden.github.io/animate.css/

Habt ihr schon mal Animationen auf einer Seite gesehen, wo ihr „Die Animation konntet ihr euch sparen können“ dachtet?

Es ist mal wieder Freitag und das heißt It’s #FrontendFriday. In diesem Blogpost geht es um iFrames – manche haben bestimmt sowohl gute als auch schlechte Erfahrung hiermit gemacht.

 Was ist ein iFrame und was ist der Sinn und Zweck hierzu?

Ein iFrame ist das Einbetten einer HTML-Seite innerhalb einer HTML-Seite. Beispiel: Auf einer Webseite gibt es eine Menüleiste, je nach Auswahl wird in einem festgelegtem Bereich der Inhalt einer anderen HTML-Seite angezeigt (HTML-Seite innerhalb einer HTML-Seite) – Oldschool, derzeit nicht mehr state of the art.

Wo werden heute noch iFrames eingesetzt?

Im Allgemeinen werden iFrames dort eingesetzt, wo die Seite bzw. der Entwickler keine Chance hat, den Code (inhaltlich) zu verändern.

Um die eigene Webseite zu tracken, um herauszufinden, wie viele Anwender z.B. die Seite aufgerufen haben oder Interaktionen durchgeführt haben, werden auch Code-Snippets wie z.B. Piwik oder Google Analytics eingesetzt (Cross-Domain Tracking).

iFrames umgehen die Cross-Domain-Ursprungs-Richtlinien (Bilder, Skripte und Stile nicht). Dies kann nützlich sein, um Webseiten/Inhalte relativ sicher aus anderen Domänennamen anzugeigen bzw. zu ziehen. Im Grunde genommen ermöglichen iFrames den Vorteil, Daten von anderen Domains visuell darzustellen zu können.

Zum Beispiel, falls man eine PDF anzeigen möchte, kann man einen iFrame „öffnen“ und den Inhalt durch das Adobe Reader Plug-in anzeigen lassen, dies wird auch heutzutage so gemacht.

Auch heute noch, werden iFrames oft eingesetzt.

Der sichtbare Teil ist nur schlaue Positionierung. Darüber hinaus verwenden viele OAuth-Implementierungen (Twitter, Facebook, Google, Yahoo!) normalerweise iFrames, um einen Benutzer in seiner Domäne mit einer erfolgreichen Authentifizierungs-URL zu verknüpfen (nachdem der Benutzer sich angemeldet hat). Folgende Seiten

• Gmail
• Facebook
• …

Wie bekommt man heraus, wie viele iFrames eine Webseite einsetzt?

1. DevTools öffnen – F12 innerhalb der Webseite
2. In der Konsole folgendes eingeben:
   1. document.getElementsByTagName(‚iframe‘).length
3. Falls iFrames eingesetzt werden, wird die Anzahl der iFrames angezeigt, z.B. bei Gmail kam der Wert 13 zurück.

Wie werden iFrames eingesetzt?

Diese werden wie im folgendem Beispiel-Code eingesetzt:

In diesem Beispiel, wird der iFrame immer angezeigt. Dies kann man ganz einfach per JavaScript ein-/ausblenden lassen.

Welche Browser unterstützen iFrames?

• Alle Browser, da es ein HTML 4 Standard ist (https://caniuse.com/#search=iframe)

Welche Alternativen gibt es zu iFrames?

Die meisten Frameworks bieten alternativen zu iFrames. jQuery war hierzu einer der Ersten.

Beispiel jQuery:

Es ist wieder Freitag und kurz vor dem Wochenende – It’s #FrontendFriday :)

EditorConfig

EditorConfig hilft den Entwicklern konsistenze Codierungsstile zwischen verschiedenen Editoren und IDEs zu definieren und zu pflegen.

Das EditorConfig-Projekt besteht aus einem Dateiformat zum Definieren von Codierungsstilen und einer Sammlung von Text-Editor-Plugins, die es Editoren ermöglichen, das Dateiformat zu lesen und definierte Stile einzuhalten. EditorConfig-Dateien sind leicht lesbar und funktionieren gut mit Versionskontrollsystemen.

Für die Installation der EditorConfig, muss überprüft werden, ob die eingesetzte Entwicklungsumgebung (IDE) bereits ein EditorConfig Plugin installiert hat oder ob dies manuell durchzuführen ist. In Visual Studio Code muss dies manuell durchgeführt werden.

Naming Conventions für HTML, CSS und JavaScript

Naming Conventions sind sehr wichtig für die Lesbarkeit des Codes und der Spruch „Wenn es schwer war zum schreiben, soll es auch schwer sein zum Lesen“ soll hiermit nicht mehr geltend sein.

Damit auch der Code von jedermann gelesen und auch verstanden werden kann müssen alle Namen also für Klassen, Interfaces und auch Variablen in der Sprach Englisch sein. Bei komplexen und nicht so einfach zu verstehenden Methoden sollten diese mit Kommentare versehen werden. Diese sind wichtig, damit die Person, welche den Code noch nie gesehen haben, schnell verstehen, wofür diese Methode ist und was sie macht.

Codeanalyse mit SonarQube

Die Codeanalyse durch SonarQube ist für jedes Projekt, wo natürlich auch Code besteht, wichtig. Hierbei sind Regeln definiert, sei es Regeln, welche vom Kunden festgelegt sind oder auch eigene Regeln. Wichtigste Regel hierzu ist, dass die Naming Conventions eingehalten wurden.