Focus

Frontend Development

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

Offline with redux

We’ve been writing a web application that supports users being offline without using a service worker. We’d love to share how we’ve done that and what we think are the advantages.

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?

Case Study

Fully Inclusive

Spacy – the Universal-Design Application for Online Open Space Events
Podcast

Das technologische Rückgrat des Webs

Der Kern des Pudels

Link

Modern CSS – Container queries are almost here!

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

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.

Link

Joy Heron veröffentlicht Guidelines für „Reponsible Web Applications“

Blog Post

Innovation in the web without sacrificing accessibility

Blog Post

Good arguments for SPA frameworks

I love SPAs when they are used with a clear purpose. I hate them when they are not. This blog post tries to explain my personal conflict.

Podcast

faucet-pipeline

JavaScript, CSS, Bilder und Fonts bereit zum Ausliefern

Podcast

Intrinsic Design

Responsive Design weitergedacht

Article

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

Moderne Frontends sollen wartbar und zukunftsfreundlich sein, unabhängig vom Gerät oder Browser gut aussehen und performant sein. Es gibt eine Reihe von Design- und Entwicklungsprinzipien, die dabei helfen, diese Ziele besser zu erreichen. Im folgenden Artikel sollen einige Prinzipien vorgestellt werden, die sich in der Praxis als tragfähig erwiesen haben. Dabei treffen wir neben alten Bekannten wie Responsive Web Design und Mobile First auch auf neuere Ansätze wie Atomic Design und Pattern Libraries.

Article

JavaScript? Yes, but in moderation

The benefits of classic architecture decisions for web applications.

Article

Optionen der Frontend-Integration

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?

Für die Erstellung von Benutzeroberflächen im Web sind HTML, CSS und JavaScript gesetzt. Doch die Wiederverwendung und Kapselung von so erstellten Komponenten lässt zu wünschen übrig. Um eine fertige Komponente zu nutzen, muss man das HTML übernehmen und passendes CSS und JavaScript separat einbinden. Web Components versprechen, hier zu helfen. In dieser Kolumne schauen wir uns gemeinsam an, was Web Components sind und wie diese funktionieren.

Blog Post

Report Generator in Rust

Podcast

Microfrontends

Unabhängige Teams im Frontend

Podcast

Transklusion

Frontendintegration im Web

Blog Post

Taking Screenshots of DOM Elements

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

Nahezu jede Webanwendung besitzt einen Anteil an JavaScript im Frontend. Im Vergleich zu früher haben sich jedoch viele Dinge geändert. So sind heute zahlreiche Tools üblich, die den Entwickler unterstützen. Dieser Artikel gibt einen Überblick über aktuell genutzte Entwicklungswerkzeuge für die Entwicklung von JavaScript-Frontends.

Link

heise SoftwareArchitekTOUR Podcast, Episode 55: Pro und Contra von Web Components

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

Podcast

Self-contained Systems und Frontend-Integration – Teil 1

Eigenschaften und Vor- und Nachteile

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

Link

The Web Ahead, Episode 116: Preserving the Architecture of the Web with Stefan Tilkov

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

Blog Post

Frontend Dependency-Management mit Bower

Paket Management hat sich in so ziemlich jedem populären Ökosystem der Softwareentwicklung in irgendeiner Form breit gemacht. Und das nicht zu Unrecht: In den seltensten Fällen wird in einem Software-Projekt bei null angefangen. Ob Frameworks oder kleinere Bibliotheken, ein Software-Projekt besteht in der Regel aus vielen einzelnen Bausteinen, die zu einem größeren Ganzen zusammen gesetzt werden. Die Abhängigkeiten von Bausteinen zu Anderen lassen sich bis zu einem bestimmten Grad zwar manuell verwalten, mit zunehmender Größe eines Projekts ist dies auf lange Sicht aber weder praktikabel noch wartbar. Genau an dieser Stelle helfen Dependency-Management Tools dabei Bausteine neu hinzuzufügen, bestehende zu aktualisieren oder deren Abhängigkeiten aufzulösen.

Podcast

Eine Website — viele Geräte

Mit Responsive Web-Design Ordnung schaffen

Article

ROCA: Keine Angst vor HTML und JavaScript

Web-Apps zum Wohlfühlen

Podcast

CSS-Architektur

Architekturaspekte von Cascading Style Sheets

Podcast

Frontend-Optimierung von Webanwendungen

Techniken für schnelle Frontends