It’s #FrontendFriday – Klassen / Modul-Diagramme in Frontend-Projekten

Hallo #FrontendFriday-Leser/in,

heute geht es um Tools, die Klassendiagramme aus Frontend-Projekten (speziell TypeScript, Angular) generieren.

Zu Beginn eines Projekt wird eine Architektur der Anwendung erstellt (die sich im Laufe des Projekts weiterentwickelt). Während des Projekts stellt sich die Frage, ob die geplante Soll-Architektur mit der tatsächlich umgesetzten Architektur übereinstimmt. Hierzu können unter anderem Klassendiagramme helfen, die automatisch aus dem entwickelten Code generiert werden.

Tools

Liste der getesteten Tools. Die Tools, sind verlinkt. Dort finden sich auch Beispiel-Diagramme.

  1. IntelliJ nur in Ultimate verfügbar. Testklassen (.spec.ts) können nicht exkludiert werden.
  2. NGD Generiert sehr breite Bilder. Das Dokumentationstool compodoc verwendet diese Library zur Darstellung einzelner Module.
  3. ngrev Eigenständige Applikation mit UI. Wird von einem Entwickler vom Angular Team entwickelt.
  4. tplant Generiert PlantUML Diagramme, aber ohne direkten Angular-Projekt Support.
  5. tsviz Generiert sehr breite, unübersichtliche Bilder.
  6. vscode-ts-uml Plugin für VS-Code, analysiert nur einzelne Dateien, kann keine Übersicht über ein Projekt erstellen.
  7. TsUML Sendet den Quellcode an einen Onlinedienst, der Klassendiagramme generiert.

 
Die Tools sind nach Empfehlung geordnet.

Fazit

Mehrere, auch kostenpflichtige Tools, wurden getestet. Ein ganz zufriedenstellendes Ergebnis konnte bisher keines liefern. Für einen schnellen Überlick kann dies aber reichen.
Für andere Programmiersprachen (z.B. Java) sind ausgereiftere Tools verfügbar. Sind euch bessere Möglichkeiten bekannt?

It’s #FrontendFriday – Google macht das Tracking transparent

Es ist bereits allgemein bekannt, dass Google versucht so viel wie möglich von unseren Aktivitäten im Netz (und auch außerhalb) zu tracken. Dennoch möchten wir mit diesem Blogpost das Bewusstsein darüber schärfen, da sicherlich nicht jedem der volle Umfang des Trackings bewusst ist und was der Einzelne dagegen unternehmen kann.

Was wird von Google getrackt?

Aufgezeichnet wird alles wofür ein Google-Konto verwendet wird. Darunter fällt nicht nur der Sucherverlauf von verschiedenen Endgeräten, sondern auch:

  • der Standort-Verlauf (sofern am Handy das GPS eingeschaltet ist),
  • Youtube-Aktivitäten:
    • Was wurde gesucht?
    • Welche Videos wurden angesehen?
    • Welche Videos wurden geliked oder disliked?
    • Welche Videos wurden kommentiert?,
  • Google-Pay Rechnungen und Einkäufe im Play-Store,
  • Reisen und Routen welche mit Google Maps ermittelt wurden

und noch einiges mehr.

Mehr

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.Mehr

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.Mehr

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.Mehr

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.Mehr

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