Focus

Frontend Development

Articles, podcasts, talks, and more about Frontend Development.
Blog Post

Buttons, Links und die Magie von HTML

Web Accessibility ist nicht nur eine trockene gesetzliche Anforderung: Für viele bedeutet sie die Möglichkeit, überhaupt am digitalen Leben teilzunehmen. Web Accessibility ist aber auch ein Fass, in das man ziemlich tief abtauchen kann. Ein Blick auf einige Aha-Erlebnisse und Fallstricke, die mir beim Entwickeln einer Webanwendung begegnet sind. Teil 1.

Article

Was ist eigentlich htmx?

Nicht nur, aber vor allem im JVM-Umfeld stößt man in letzter Zeit immer wieder auf die Bibliothek htmx. Das Versprechen von htmx ist dabei nichts Geringeres, als das fehlende Puzzlestück von HTML zu sein. Deswegen wollen wir uns hier diese Bibliothek im Detail anschauen. Schließlich sollten wir in der Lage sein zu beurteilen, ob es uns in unseren Projekten hilft oder ob wir doch nach etwas anderem suchen sollten.

Article

Combinable Elements for User Interfaces on the Web

Components in web applications

Blog Post

Micro Frontends With Ionic And Capacitor

We planned and set up a micro frontend architecture using Capacitor and Ionic. In this article, I talk about some of the challenges we faced and the ways we solved them.

Blog Post

Improve your CSP with Style Nonces in Angular 16

What to do, to enable your Angular application to use style-src: nonce in a CSP for stricter security rules

Blog Post

Clientseitige Speichertechnologien im Browser
Blog Post

Custom Elements are NOT for Templating

Custom elements are a main technology included in the Web Components Browser specification. They provide a set of APIs for adding custom behavior and interactions to an HTML element – and they do this very well. However, they often are unfairly compared with JavaScript component frameworks. Custom elements were never intended to be a drop-in replacement for a JavaScript framework. This article focuses on what custom elements are, what they do well, and, most importantly, what they do not do.

Article

Frontend integration options

The integration of data and functionality in the frontend is a powerful topic that is still rarely discussed. This article aims to try and show established patterns of frontend integration and briefly name possible advantages and disadvantages.

Blog Post

Offline with redux

A different approach to Web applications that work offline

Article

Next Please!

Despite modern multicore processors, website code usually runs in only one thread. True parallelism therefore does not exist, but a clever programming model still allows “asynchronous” code that is not processed linearly.

Article

What Does a Bundler Actually Do?

Frontend development without JavaScript is rarely possible. Seasoned backend developers are then confronted with a completely new toolchain overflowing with unknown technical terms. But there is method behind the complexity.

Podcast

Das technologische Rückgrat des Webs

Der Kern des Pudels

Robert Glaser
Lucas Dohmen
Blog Post

Just Add Code
(Part 2)

The last post in this series established that Web Components are a good way to ship markup and logic to a browser in order to provide progressive enhancement. In this part I will show, how Githubs Catalyst library supports us to develop such Web Components.

Blog Post

Just add Code (Part 1)

Running code on a browser using Web Components is a good method that allows you to have a defined scope for your markup and logic. However, the usual examples mostly lead to the user staring at an empty page in the case where JavaScript isn’t enabled, because in most cases all markup is generated by JavaScript only.

Podcast

Responsible Web Apps

Responsive + Accessible

Lucas Dohmen
Joy Heron
Blog Post

Progressive Enhancement with Hotwire

A REST-based backend with a JavaScript monolith on top – that’s todays de-facto standard for web applications. With Hotwire you can build much more lightweight web applications, that both inherit the advantages of SPAs and avoid their disadvantages. In this blog post we’ll give an overview of Hotwire.

Blog Post

Innovation in the web without sacrificing accessibility

We’ve truly stretched the boundaries of what is possible on the web. However, to do this we’ve sacrificed semantic HTML and made our applications inaccessible to a huge amount of different users. Instead of breaking the foundation of the web, we should consider this as an opportunity: how can we implement applications in a way that works for any user who might come along and want to interact with it?

Blog Post

Good arguments for SPA frameworks

When to use an SPA framework and when maybe not

Podcast

faucet-pipeline

JavaScript, CSS, Bilder und Fonts bereit zum Ausliefern

Robert Glaser
Lucas Dohmen
Podcast

Intrinsic Design

Responsive Design weitergedacht

Lucas Dohmen
Joy Heron
Article

Design- und Entwicklungs­prinzipien für ein besseres Frontend
Article

JavaScript? Yes, but in moderation

The benefits of classic architecture decisions for web applications.

Article

Wider die SPA-Fixierung

Die Vorteile einer klassischen Frontend-Architektur für Webanwendungen, bei der die Serverseite für das Erzeugen von HTML verantwortlich ist und JavaScript zwar erlaubt ist, aber nicht die komplette Kontrolle übernimmt, werden häufig unterschätzt. Dabei ist sie den im Moment viel gehypten, JavaScript-zentrischen Ansätzen in vielen Fällen überlegen.

Article

Was sind eigentlich Web Components?

In der Kristallkugel

Blog Post

Report Generator in Rust

In this blog post, we are going to build a backend application in Rust for converting HTML report into PDF format. Rust is a system programming language which focuses on performance, stability and memory safety. There are thousands of Rust libraries built by its community and we are going to build our application using some of these libraries.

Podcast

Microfrontends

Unabhängige Teams im Frontend

Stefan Tilkov
Franziska Dessart
Lucas Dohmen
Podcast

Transklusion

Frontendintegration im Web

Lucas Dohmen
Franziska Dessart
Blog Post

Taking Screenshots of DOM Elements

Now that PhantomJS is dead, we need an alternative. Turns out that Puppeteer, Google’s official remote-control API for Chrome, is just the ticket.

Blog Post

ROCA-Compliant Table Sorting

The article presents an easy way to enable table column sorting without JavaScript. In addition to the avoided complexity, the solution is also compliant to ROCA.

Article

Tooling für JavaScript-Frontends

Hämmer und Schraubenzieher

Blog Post

Building Component-Based Front Ends with Rails

Our latest Ruby on Rails front-end project strongly emphasizes a component-based approach. In this post, we briefly explain how a tiny helper not only helped us render UI components, but also resulted in better components thanks to well-defined contracts and effortless composition.

Blog Post

How Browsers Load and Process JavaScript

This is a rundown of how browsers process JavaScript references within HTML.

Blog Post

The Power of the HTML Form
Podcast

Self-contained Systems und Frontend-Integration – Teil 2

Alternativen zu SPAs und Umsetzung von SCS

Till Schulte-Coerne
Falk Hoppe
Eberhard Wolff
Podcast

Self-contained Systems und Frontend-Integration – Teil 1

Eigenschaften und Vor- und Nachteile

Till Schulte-Coerne
Falk Hoppe
Eberhard Wolff
Article

Web Components mit Polymer

Teil 2: Technische Anwendung

Article

Nachhaltige Webarchitekturen

Heutzutage gewinnt man leicht den Eindruck, dass es für moderne Webanwendungen nur einen einzig wahren Architekturansatz gibt: REST und Single-Page-Anwendungen (SPAs). Doch ist alles, was REST genannt wird, wirklich REST? Sind REST und SPAs immer die beste Lösung? Um diese Fragen beantworten zu können, sollte man sich anschauen, was REST eigentlich ist, wofür es gedacht ist und ob es möglicherweise auch Alternativen zu SPAs gibt; insbesondere mit dem Blick auf Nachhaltigkeit, also Wartbarkeit und Erweiterbarkeit.

Blog Post

ROCA vs. SPA

Currently, a lot of companies are migrating from Desktop applications (mostly written in Java) to Web applications for their products as well as for their internal tooling. When they start with this process they often ask themselves: Which technologies should we use to build our Web application? Should we use Angular.js or React? Or should we go with recommendations like ROCA instead of a Single Page Application?

Article

Web Components mit Polymer

Teil 1: Von 0.5 zu 1.x

Blog Post

Transklusion in Self-Contained Systems

Frontend-Integration im Web ist ein riesiges Themengebiet. Dieser Post befasst sich mit dem Teilaspekt der Transklusion “fremder” Inhalte in den DOM einer anderen Seite.

Blog Post

Frontend Dependency-Management in Rails

Im letzten Blogpost über Bower sind viele Gründe für die Verwendung eines Dependency-Management Tools für Frontend-Komponenten genannt worden. Dieser Artikel soll dort anknüpfen, wo der letzte aufgehört hat, und eine Reihe von Möglichkeiten aufzeigen, mit denen Bower in ein fremdes Ökosystem integriert werden kann. Denn in der Regel trifft ein Webframework wie Ruby on Rails oder Play! eigene Vorgaben darüber wie Frontend-Artefakte von einer Webanwendung verwaltet und ausgeliefert werden. Im Folgenden wird Rails als populärer Vertreter eines Webframeworks für einige dieser Integrations-Strategien herhalten.

Blog Post

Frontend Dependency-Management mit Bower
Podcast

Eine Website — viele Geräte

Mit Responsive Web-Design Ordnung schaffen

Till Schulte-Coerne
Robert Glaser
Roman Stranghöner
Article

ROCA: Keine Angst vor HTML und JavaScript

ROCA ist ein Architekturstil zur Entwicklung anständiger und zukunftsfähiger Web-Frontends. Er umfasst eine Reihe von Empfehlungen sowohl für die Client- als auch für die Serverseite. Der ROCA-Stil erfordert von vielen Java-Entwicklern ein gewisses Umdenken. Grund genug, sich den Stil genauer anzuschauen.

Podcast

CSS-Architektur

Architekturaspekte von Cascading Style Sheets

Stefan Tilkov
Falk Hoppe
Roman Stranghöner
Podcast

Frontend-Optimierung von Webanwendungen

Techniken für schnelle Frontends

Stefan Tilkov
Till Schulte-Coerne
Case Study

Movacar PRO: A mobile app for efficient vehicle logistics using the “Tech4Equity” model

Read case study
Case Study

Proof of payment clearing and fraud detection: Krombacher is leveraging automation as part of its loyalty program

Read case study
Case Study

Spacy – A universal-design application for online events through radical simplification

Read case study