It’s #FrontendFriday – Trusted Web Activity

Endlich ist es wieder soweit – Es ist Freitag und das bedeutet It’s #FrontendFriday

Was ist Trusted Web Activity?

Trusted Web Activity ist eine neue Möglichkeit, eure Webinhalte mit Hilfe einer Chrome Activity im Vollbildmodus in euer Android-App zu integrieren.

Technisch ist eine Trusted Web Activity (kurz: TWA) eine besondere Version des Chrome Custom Tab (kurz: CCT). Dadurch könnt ihr viele Chrome-Features nutzen, die auch mit dem CCT möglich sind – nicht aber in der klassischen Webview.

Konkret sind das Funktionen wie Push-Benachrichtigungen, Hintergrundsynchronisierung, Autofill bei Eingabeformularen, Media-Source-Extensions oder die Sharing API. Ein weiterer Pluspunkt: Die TWA teilt den Cache, Speicher und Sessions mit dem installierten Webbrowser.

Wenn der Nutzer sich also in der TWA anmeldet, ist er es auch weiterhin beim Starten der Web-App im Browser – weil eben die Session geteilt wird.

Wie funktioniert Trusted Web Activity?

Eine TWA führt Chrome im Vollbildmodus innerhalb einer Android-Anwendung aus, ohne dass eine Browseroberfläche sichtbar ist.

Dies ist eine leistungsstarke Funktion und ist nur erlaubt, wenn die zu öffnende Seite und die Android-Applikation demselben Entwickler gehören. Diese Validierung wird durch Digital Asset Links erreicht.

Unterschied zu anderen Integrationen von Webinhalten in einer App

Inhalte in einer TWA sind vertrauenswürdig. Es wird erwartet, dass die App und die Website, die sich öffnet, vom gleichen Entwickler stammen. (Dies wird mit Hilfe von Digital Asset Links überprüft.)

Vertrauenswürdige Web-Aktivitäten kommen aus dem Web: Diese werden vom Browser des Benutzers gerendert, genau so, wie ein Benutzer es in seinem Browser sehen würde, außer, dass sie im Vollbildmodus ausgeführt werden.

Webinhalte sollten zunächst im Browser zugänglich und nützlich sein. Der Browser wird auch unabhängig von Android und Ihrer App aktualisiert

Wenn die Benutzerversion von Chrome heute keine Trusted Web-Aktivitäten unterstützt, greift Chrome über eine benutzerdefinierte Registerkarte auf eine einfache Symbolleiste zurück.

Es ist auch möglich, dass andere Browser das gleiche Protokoll implementieren, welches auch Trusted Web-Aktivitäten verwendet.

Während die Host-App das letzte Wort darüber hat, welcher Browser geöffnet wird, wird die gleiche Richtlinie wie bei Custom Tabs empfohlen: Verwende den Standardbrowser des Benutzers, sofern dieser die erforderlichen Funktionen bereitstellt.

Wofür kann dies verwendet werden?

TWAs eignen sich hervorragend, um Vollbild-Webinhalte in eine Android-Anwendung einzubinden, welcher Chrome-Funktionen benötigt, die in einem WebView nicht verfügbar ist oder wenn der Shared Origin Storage mit dem Chrome-Browser die Benutzerreise erleichtert.

Ein Beispiel dafür ist eine E-Commerce-Site, bei der Produktseiten in nativen Ansichten implementiert sind, der Checkout-Ablauf jedoch auf der Website stattfindet. Durch die Verwendung eines TWA hat die App die Leistung von Chrome und kann die One-Tap-Anmeldung von Chrome und die automatischen Formularausfüllfunktionen nutzen.

Welche Kriterien gibt es hierzu?

Alle Inhalte in TWAs müssen den Richtlinien des Play Stores entsprechen, einschließlich der Richtlinien für den Kauf innerhalb der App und anderen digitalen Gütern.

App-Nutzer erwarten ein tolles Erlebnis auf ihrem Gerät. Um die Qualität der Erfahrung zu gewährleisten, müssen TWAs die Progressive Web Apps Installationsfähigkeitskriterien erfüllen und schnell laden.

Die Ladegeschwindigkeit wird mit Hilfe von Lighthouse gemessen und Webinhalte in TWAs müssen einen Leistungswert von 80 erreichen. Lighthouse ist ein Open-Source, automatisiertes Werkzeug zur Überprüfung von Performance und progressiven Webanwendungen. Ist sowohl als Benchmark als auch zur Unterstützung bei der Erstellung besserer Websites nützlich.

Hattet ihr schon mal Erfahrung mit Trusted Web Activity? Wenn ja, welche?

Wenn es dann soweit ist – wünscht euch die WebfrontendAG ein schönes Wochenende :)

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.

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