It’s #FrontendFriday – Animationen mit Webkit

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?

It’s #FrontendFriday – Warum heute noch iFrames zum Standard gehören?

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.

(lightbulb) 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:

1
2
3
<iframe src="URL" width="200px" height="200px">
    Alternativen Text, falls der iFrame nicht gerendert werden kann.
</iframe>

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

Welche Browser unterstützen iFrames?

Welche Alternativen gibt es zu iFrames?

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

Beispiel jQuery:

1
2
3
$( document ).ready(function() {
    $( "#AnzeigeInDieserBox" ).load("www.eine-webseite.de");
});

It’s #FrontendFriday – Was sind die Standards für ein Webfrontend-Projekt?

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.

It’s #FrontendFriday – Antike HTML-Elemente

Vor langer, langer Zeit im Erdmittelalter existierten sie, die antiken HTML-Elemente. Diese schon fast vergessenen Elemente sind für browserübergreifende Anforderungen besonders interessant, denn sie werden fast von allen Browsern (teils sogar IE9) unterstützt! Der folgende Beitrag soll den Leser für die Verwendung nativer Dino-Elemente sensibilisieren.

Das HTML „dl“ Element

Das HTML Description List Element sieht den Inhalt einer Liste von Begriffspaaren sowie Beschreibungen vor und wird normalerweise für die Implementierung von Schlüsselwertpaaren genutzt. Die Liste kann „dt“ sowie „dd“ Elemente enthalten.

Das HTML „dt“ Element

Das HTML Definition Term Element identifiziert einen Begriff innerhalb einer Description List und kommt in der Regel als Kindelement eines „dl“ Elements vor. 

Das HTML „dd“ Element

Das Kindelement muss innerhalb einer Description List auftreten und einem „dt“ Element folgen. „dd“ steht für das HTML Description Element.

Sheldon Cooper
„Ich mag Züge“
Albert Einstein
„Comments must start with a space“

 
Das HTML „datalist“ Element 

Das „datalist“ Element enthält eine Liste von „option“ Elementen, die mögliche Optionen für den Wert eines anderen Elementes repräsentieren und wird in im Verbund mit einem „input“ Tag verwendet.


 
Das HTML „details“ und „summary“ Tags

Mit dem „details“ Tag können dem User zusätzliche Informationen sichtbar gemacht werden. Das Ganze wird im Verbund mit dem HTML „summary“ Element verwendet.

Klick mich

Herzlichen Glückwunsch! Du hast einen Trojaner erhalten.

 
Das HTML „hr“ Element

Der Horizontal Ruler ist zur Darstellung von thematischen Brüchen gedacht und wird als waagerechte Linie dargestellt.

Heute ist Freitag


Morgen ist Samstag

 

Das HTML „optgroup“ Element

In einem Webformular erstellt das „optgroup“ HTML Element eine Gruppe von Optionen innerhalb eines „select“ Elements.


 

Das HTML „address“ Tag

Dieses Tag kann zur Darstellung von Kontaktinformationen genutzt werden.

Written by Konfu Panda.

Visit us at:
Zoo
Berlin
Germany

 

Fazit:

Es gibt eine Reihe von kaum benutzten HTML Tags. In diesem Beitrag sind einige aufgezählt. Die meisten Entwickler heutzutage benutzen die „self-build-div-jquery-Konstrukte“, obwohl es native HTML Elemente dafür gibt. Folgend einige Gründe warum man lieber auf native HTML Elemente zurückgreifen sollte: 

Native HTML Elemente werden von allen Browsern, mobile eingeschlossen, unterstützt. Nur HTML kein CSS oder JS.
Semantisches HTML ist W3C Konform und meiner Meinung nach schöner. Stichwort „Clean Code“.
Sie funktionieren ohne Frameworks/Libraries von Drittanbietern und sind somit performanter und einfacher wartbar.

Quellen:

Alle Beschreibungen aus: 

https://developer.mozilla.org/de/

 
Wow, es gibt sogar ein Progress Tag 

Das HTML „progress“ Element wird benutzt, um den Fortschritt einer Aufgabe zu visualisieren.

It’s #FrontendFriday – Browserengines

It’s Friday that means #FrontendFriday! :)

Heute geht es um das Thema „Browserengines“.

Was ist eigentlich eine Browserengine?

Eine Browser-Engine ist eine zentrale Softwarekomponente eines Webbrowsers.

Die Hauptaufgabe einer Browserengine besteht darin, HTML-Dokumente und andere Ressourcen einer Webseite in eine interaktive visuelle Darstellung auf dem Gerät eines Benutzers zu transformieren.

Eine Browser-Engine ist kein eigenständiges Computerprogramm, sondern ein Bestandteil eines Webbrowsers, aus dem der Begriff abgeleitet ist.

Neben der Browserengine werden in Bezug auf verwandte Konzepte zwei weitere Begriffe verwendet: „Layout-Engine“ und „Rendering-Engine“. Theoretisch könnten Layout und Rendering von separaten Engines übernommen werden. In der Praxis sind sie jedoch eng gekoppelt und werden selten getrennt betrachtet.

Zusätzlich zum Layout und Rendering erzwingt eine Browser-Engine die Sicherheitsrichtlinien zwischen Dokumenten und implementiert die Datenstruktur des Document Object Model (DOM), die Seitenskripten ausgesetzt ist. Es werden auch Hyperlinks und Webformulare behandelt.

Das Ausführen von JavaScript (JS)-Code ist jedoch eine separate Angelegenheit, da jeder gängige Webbrowser dafür eine eigene Engine verwendet. Die JS-Sprache wurde ursprünglich für die Verwendung in Browsern entwickelt, wird aber nun auch an anderer Stelle verwendet, so dass die Implementierung von JS-Engines von Browser-Engines entkoppelt ist. In einem Webbrowser arbeiten die beiden Engines über die gemeinsame DOM-Datenstruktur zusammen.

Vergleich von Browserengines

Engine
Status
Verwalter
Lizenz
Eingebunden in
WebKit Aktiv Apple GNU LGPLBSD-style Safari sowie alle Browser, die im iOS App Store zufinden sind
Blink Aktiv Google GNU LGPLBSD-style Google Chrome und alle anderen Chromium-basierten Browser wie Microsoft EdgeBrave und Opera
Gecko Aktiv Mozilla Mozilla Public Firefox und Thunderbird email client, sowie forksSeaMonkey und Waterfox
Servo Aktiv Mozilla Mozilla Public Versuchsbrowser (Kann unvollständig oder fehlerhaft sein)
Goanna Aktiv M. C. Straver Mozilla Public Pale Moon und Basilisk browser
NetSurf Aktiv Hobbyisten GNU GPLv2 NetSurf
KHTML Nicht fortführend KDE GNU LGPL Konqueror
Trident Nicht fortführend Microsoft Proprietary Internet Explorer und Microsoft Outlook
EdgeHTML Nicht fortführend Microsoft Proprietary formerly in the Microsoft Edge browser

Unterstüzung von HTML, CSS, Grafiken und Typographie

Engine
Status
WebKit Aktiv
Blink Aktiv
Gecko Aktiv
KHTML Nicht fortführend
Presto Nicht fortführend
EdgeHTML Nicht fortführend
Trident Nicht fortführend

Bevor ich mich mit Browserengines beschäftigt hatte:

 

 

 

 

 

 

 

Und jetzt:

It’s #FrontendFriday – Canvas Fingerprinting: Tracking deines digitalen Fingerabdrucks

Wie jeden 2. Freitag ist heute wieder #FrontendFriday!

Das heimliche Tracking im Internet hat (leider) schon eine lange Tradition. Spätestens seit der DSGVO ist jedem bekannt, was über Cookies technisch möglich ist und wie man sich dagegen schützen kann.

In diesem #FrontendFriday möchten wir jedoch nicht die klassische Methode des Trackings durch das Internet beleuchten, sondern eine alternative, unbekanntere Methode: das Canvas Fingerprinting.Mehr

It’s #FrontendFriday – Einheiten in CSS

CSS bietet eine Reihe unterschiedlicher, typografischer Einheiten. Grundsätzlich wird zwischen relativen und absoluten Maßeinheiten unterschieden. Solche Größen bemessen Elemente eines Layouts, Abstände sowie Schriftgrade. Vor allem im Bereich des „Responsive Webdesigns“ ist das grundlegende Verständnis, über die Funktionsweise der CSS-Längenangaben, entscheidend. Der folgende Beitrag konzentriert sich nur auf die in CSS (Cascading Style Sheets) verwendete Einheiten für virtuelle Medien. Buchschriftsätze sind zusätzlich aus dem Betrachtungsfokus ausgenommen.

Mehr

It’s #FrontendFriday – Neue Features in Angular Material 7

Angular Material

Angular gehört zu den verbreitetsten Frontend Frameworks auf dem Markt. Angular bietet die Option ihre Layout-Library „Angular Material“ zu verwenden.

Angular Material steht unter MIT-Lizenz und adaptiert die Standards des Material Designs für Angular. Dabei erscheint eine Nutzeroberfläche im Stil des Material Designs.

Angular Material bietet viele vordefinierte UI Elemente wie beispielsweise: DatepickerTabellenCardsMenüsSlideruvm.

Mehr

It’s #FrontendFriday – WebAssembly: die Zukunft der Webapps?

Vielleicht haben Sie schon von WebAssembly (kurz: Wasm) gehört, denn immerhin gibt es zumindest die WebAssembly Community Group (W3C) schon seit April 2015. Inzwischen ist Wasm in der Version 1.0 verfügbar.
Doch was ist Wasm genau und wofür braucht man das? In diesem Blogbeitrag erfahren Sie alles dazu!

Was ist WebAssembly?

WebAssembly is a binary instruction format for a stack-based virtual machine.
Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

Kurz gesagt: WebAssembly ist ein neuer Typ Code. Er ermöglicht es Webanwendungen in C/C++ oder Rust zu implementieren und diese (fast – in einer Sandbox) nativ im Browser auszuführen. Dabei kann es auch in Kombination mit HTML/CSS verwendet werden [1].

Warum möchte man Webapps in einer maschinennahen Sprache implementieren und ausführen?

Gute Frage! Denn um Logik auf Webseiten zu implementieren, gibt es doch schon JavaScript? Wie wir aber alle wissen, ist JavaScript vergleichsweise leider sehr langsam. Das macht sich vor allem bei komplexen Webanwendungen wie z.B. bei der 3D Visualisierung im Browser bemerkbar.

Deshalb sind vor allem folgende Gründe dafür verantwortlich, dass es Wasm gibt:

  • Performance
  • Performance
  • Performance
  • und Performance [2] [3]

 

In folgender Demoanwendung kann man sehr gut selbst den Unterschied sehen, spüren und ausprobieren: WebAssembly VS JavaScript

  1. Link öffnen und oben rechts auf den Debug-Monitor klicken, bis die blaue FPS-Anzeige zu sehen ist
  2. Über das DropDown oben rechts kann zwischen Wasm und JS gewechselt werden
  3. Darunter kann die Anzahl der animierten Menschen erhöht/verringert werden

Im aktuellen Google Chrome Canary (Version 72.0.3610.0) erhalte ich z.B. bei 20 Menschen mit JS gerade mal ~13 FPS, mit Wasm ~30 FPS. Das sind mehr als 100% Performance-Steigerung!

Wie funktioniert WebAssembly im Browser?

Um den geschriebenen C/C++ Code zu WebAssembly zu kompilieren, gibt es emscripten. Mit emscripten kann über folgenden Befehl der Code zu Wasm kompiliert werden:

emcc hello.c -s WASM=1 -o hello.html

Um das ganze im Browser auszuführen, muss die jeweilige Browserengine auch Wasm unterstützen. In Chrome übernimmt das Ausführen von Wasm beispielsweise der Chrome Native Client in einer Sandbox.

Wer noch tiefer einsteigen möchte: https://hacks.mozilla.org/2017/02/creating-and-working-with-webassembly-modules/

Welche Browser bzw. Browserengines unterstützen WebAssembly?

WebAssembly Browserunterstützung

Man mag es kaum glauben, aber da sind sich alle (wichtigen) Browser (nicht Internet Explorer) einig: https://caniuse.com/#feat=wasm

Wird WebAssembly der Nachfolger von JavaScript?

Nein. Wasm ist als „schnelle Ergänzung“ für JavaScript gedacht [4].
Wasm wird in Zukunft parallel existieren und voraussichtlich nur bei besonders komplexen Webanwendungen zum Einsatz kommen (Rechenintensive Anwendungen, 3D, etc.).

 

Quellen:

[1] https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71

[2] https://www.lucidchart.com/techblog/2017/05/16/webassembly-overview-so-fast-so-fun-sorta-difficult/

[3] https://medium.com/samsung-internet-dev/performance-testing-web-assembly-vs-javascript-e07506fd5875

[4] https://de.wikipedia.org/wiki/WebAssembly