Aktuell Allgemeines HTML Stuff

Should I use Web components?

At my current employer we do all kind of Web Applications. We call it Experience Technology. These customer user experiences have different needs. Sometimes we do static content deliverables like temporary marketing campaign pages, or knowledge bases that never get touched again. More often we do enterprise shopping experiences, catalogue maintenance, and other e-commerce platforms.

Asking someone of my team how to build their next customer user experience I get named: React, VUE, Svelte or at last, Angular. Normally no one tells me yet: Let’s do it native, let’s use Web Components.

Do I know why?


Why the frameworks are so common and preferred is having some reasons:

  • They offer a community
  • Searching for an issue or supporting library for sure returns an Stackoverflow entry or an NPM library
  • There is great support by someone that has „already done this“
  • For Business: It is good to have something to sell that everyone knows

A quick poll

Doing a quick poll with our experience technologists hardens the opinion.

Showing React 58%, Angular 3%, VUE 15%, Native Web Components 7%. Other 13%

Observing the obvious

Using frameworks and libraries for everything, causes problems that could be prevented. Average weight of a page is increasing. Complexity of generated code too. Views of common frameworks and libraries are often ridiculous complicated and deep nested and adding libraries and grid systems is done with a click. Importing without seeing the direct deeper effect. On top of that, Designers create complex animations and placeholders and forget that we still have low-end devices to support and not an ideal-world fast internet. Accessibility and search, like find-ability is getting worse. When useless containers are nested and semantics are getting lost.

On top of all, GDPR compliance is bad to achieve as of often third parties are used in a way that makes it hard to know where your customers details are getting shared.

This directly leads me to the this ask: Do we at all need to use a framework or library? Can’t we use Web components?

Webcomponents.org tells a clear use case, but why does still no one considers it first place to use it as base in their projects?

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behaviour.


Would there be any advantage when using them instead of a framework? Long-term for sure. Imagine a situation where Facebook stops support for React, or Google for Angular. Sooner or later libraries might get outdated. The community for sure support it for some years, but it can stop. There is no guarantee that it works long. There are also new Libraries popping out every day.

As we started writing decoupled user experiences, using micro-services and micro-frontends, we forgot to enable us to create long lasting frontend code, that is maintainable. Instead of using native functionalities, write proper markup and getting accessible and search engine friendly.

We now create a dependency to a framework that is maybe out-dating soon. Any reason to do so?

Not really!

Frameworks and libraries should help us organizing and writing our code and deliverables, but not overtaking our thinking and tooling. It is not reasonable that we deliver whole applications to clients browsers, when the contents never or only every view months change. We should instead build more meaningful smaller applications. We even need to render server side, using JavaScript.

A quick excursion on what Web Components are

Using Web components would allow us to get back to standards, using browser supported simple tooling.

So why should you consider Web components as complement for frameworks and libraries?

  • They are already a standard!
  • They work cross browser (Can I use it?)
  • They are simple and stand-alone
  • They are already used
  • They are future proof!

The details

Web components are the wrapper name for a set of techniques that create browser rendered interfaces. They are created through custom elements, shadow DOM, HTML templates and HTML modules. The latter is yet not widely adopted by browsers.

Custom Element

Setup a JavaScript file that contains the code for your custom element.

class MyCustomElement extends HTMLElement {    
  connectedCallback() {
    this.innerHTML = `<p>Some Text</p>`;
window.customElements.define('my-custom-element',  MyCustomElement)

You need a DOM node that can initialise it.


Shadow DOM

With your custom element you can add coloured text in the context of other text paragraphs. You can capsule your styles that only belonging to the needed node.

const shadowRoot = document.getElementById('fetched').attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `<style>
p {
  border: 1px solid red;
  padding: 5px;
<p id="paragraph">Paragraph using <slot></slot></p>`;

Create some HTML to connect your code with it.

<span id="fetched">Slot</span>
<p id="paragraph">Normal Text</p>

Shadow DOM like shown below will be generated.

  <span id="fetched">    
      p {
        border: 1px solid red;
        padding: 5px;
      <p id="paragraph">Paragraph using Slot</p>
  <p id="paragraph">Normal Text</p>

Use HTML Templates

Stay DRY. Use HTML templates. Look at the the above example. If you want to render more paragraphs, you can repeat your <p> or just use a <template>. It is obvious what is wet and what is dry.

You can use them together with custom elements and shadow root, or alone.

<template id="template">
<section id="paragraphs"></section>

How to render a HTML template.

const paragraphs = document.getElementById('template');
const text = [
  { node: 'Text 1' },
  { node: 'Text 2' },
  { node: 'Text 3' }
text.forEach(text => {
  const domNode = document.importNode(paragraphs.content, true);
  domNode.querySelector('p').innerHTML = text.node;

Did I missed HTML Modules?

Nope. But they are currently considered. So let’s see.

What else to consider

Take also into account that all is maintained in a component library. Handled in a DSM provided by InVision, Figma, or Design Kits like Sketch. We need to ensure to reuse our code and Styles. Design Tokens help here. Amazon has Style Dictionary, but there are others. And ideally, have a direct connect to your repository. (More would be subject of a full own post)

But my client has IE11 as standard browser!

Ask them why! Seriously!

If they still insist, and maybe even have a dated soon to be replaced Edge: there are Polyfills available, they render the components as HTML for you.

Any other input?

More and more Frameworks and libraries arise that help generating your applications with Web components. They offer build in test ability, design libraries, pattern libraries and more. There are well established ones like Polymer or Stencil. You can find more on the web component page list. So if you do not want to do it manually. Use provided tools. 

What to do

There is no golden hammer that makes all your problems a nail. But you should consider re-usability, need of the current implementation, and how long it will exists. Then it can help you making a decision.

Static rendering for interims campaign pages, knowledge bases, and so on can improve SEO, size, and customer experience. Full blown SPA with a checkout or profile management, and a healthy mixture for catalogue can do their part on this.

But the base of all should be a Web component. Just do it.

Resources mentioned and used

Fun fact

Yes, you can also make Web components complicated.

Aktuell HTML Stuff

Clickjacking Kampagnen bei Google Adsense

Seitdem ich mich mit Advertisement und Performance Media beschäftige, stolpere ich immer mehr über die eklatanten Lücken die das System hat. Der folgende Beitrag bei Malwarebytes beschreibt anschaulich wie exzsiv mittlerweile betrogen und beschummelt wird. Jetzt könnte man sagen: „Mir doch egal, trifft doch eh nur die Reichen von Google oder Facebook“. Dem ist aber leider nicht so. Die Brands (Marken) bezahlen den ganzen Mist und die Publisher bekommen davon nur noch einen Bruchteil ab. Was das Ergebnis ist: Mehr Werbung, da weniger Reichweite, mehr Ausgaben der Brands und damit mehr Kosten auf der Werbeseite und damit teurere Produkte. Und wir haben im Ganzen als Nutzer rein gar nichts davon. Daher müssen wir anfangen ein besseres Netzwerk zu unterstützen. Wirklich lesenswert!

Clickjacking-Kampagne missbraucht Google Adsense, vermeide Werbebetrugsbots


HTML Stuff

Es gibt keinen Grund mehr CSS Grid nicht zu verwenden

Ich kann mich nur wiederholen. Flex für spezielle kleine Anpassungen. Grid als Gerüst für deine Seiten. Keine Ausreden mehr, wenn man selbst Einfluss auf das Gerüst und die Basis der Webseiten hat.  (und ja, WordPress benutzt auch nicht das letzte Layout das möglich wäre)  https://css-tricks.com/snippets/css/complete-guide-grid/

Gedanken HTML Stuff

Google rankt mobile bald bevorzugt

Glaubt man den Webmastertools wird Google bald mobile first in den Suchergebnissen besser bewerten. Unter anderem um die mobile freundlichen Seiten eben zu bevorzugen. Nutzer können dann viel einfacher Inhalte zwischen Geräten austauschen. Mich nervt immer, wenn ich mir eine m.example.org Seite zum Desktop schicke und dann im schlimmsten Fall nur weg geleitet werde und auf dem Desktop nichts nachvollziehen kann.

HTML Stuff

1und1 cronjobs mit php 5.x

Ha, das hat gedauert und der Mitarbeiter an der Hotline meines „Platinum Supports“ wusste es auch nicht.

Wenn ihr bei 1und1 ein Paket mit SSH Zugang und Cronjobs habt und diese (wie ich) auch ordentlich nutzt, dann muss man immer aufpassen, dass diese auch durch die letzte aktuelle PHP Version angetrieben werden.

In den Cronjob FAQ bei 1und1 wird da nicht sehr ausführlich darauf eingegangen, dort wird sogar noch PHP4 referenziert. Daher hier ein kleiner Tipp:

Soll der Cron nicht unter PHP 5.2 laufen, dann müsst ihr im Pfad wie folgt zur PHP Version diese angeben – also z.B. für PHP 5.4 /usr/local/bin/php5.4 dieser wird also einmal am Tag um 00:01 ausgeführt:

01 0 * * * /usr/local/bin/php5.4 /kunden/homepages/35/paketid/htdocs/pfad-zum-cron.php

Hoffe das hilft euch. Bis Version 6 könnt ihr da derzeit gehen. Zumindest in meinem Paket.

Ich finde es schade, dass nicht automatisch mit dem Packetswitch aus dem Konfigurationsmenus das PHP des Verzeichnisses gerendert wird.

Fundstücke HTML Stuff

iOS HealthKit Konstanten Referenz

Eine wahrhaftig inspirierende Dokumentation….iOS HealthKit Constants Reference

iOS HealthKit Constants Reference

HealthKit Constants Reference beim Apple Developer Network

Ich bin ja mal gespannt ob man Rectum und Finger kombinieren kann und wie das später im nativen Einsatz aussieht… (würg)

Mit der Einführung dieser API werden bestimmt wieder die Handy Bändchen wichtig…

HTML Stuff

Cool. Die ersten Overlaykiller sind da…

Zur Webinale in Berlin hatte ich schon den Beitrag kommentiert in dem Florian Franke und Johannes Ippen schön herleiteten wieso Webdesigner und Konzepter immer wieder dazu neigen Fehler zu wiederholen. Unter anderem mit den folgenden drei Punkten.

  • Früher PopUp -> heute Overlay
  • Früher Flash -> heute HTML5 Preloader
  • Früher Intros -> heute Parallax Scrollchecking

Langsam ist aber zumindest für die Overlays Hilfe nahe. Die ersten Blocker erscheinen. Immerhin für einige Browser…

Fundstücke HTML Stuff

Wieso Overlays die neue Warze am Po des Webs sind…

Nachdem es Browserhersteller schafften PopUps mit Popup-Blockern erfolgreich zu verdrängen versucht es der geneigte Webdesigner neuerdings mit massenweise Overlays oder wie die Lightboxen auch sonst noch genannt werden. Anstatt Overlays als Darstellungsmittel für ein Bild zu nutzen, wird massenweise kritischer Inhalt darin abgebildet und der Service den der Anbieter teuer zusammengeschustert bekommen hat, wird mit einem mal unbedienbar. Schön zu sehen am aktuellen Volkswagen Konfigurator. Tolle Leistung ihr Spezialisten! Das wurde aber wahrscheinlich noch als Revolution verkauft, weil ja der ach so veraltete anzuklickende Radiobutton nicht mehr neben den unteren Weiter Button gesetzt werden muss. Hoch lebe die Rechtsabteilung!

Auf meinem Toshiba Satellite mit Windows 8 .1 und Firefox sieht es wie folgt aus. Schön scrollender Inhalt, aber das Overlay ordentlich negativ fixiert. Damit auch Mobil unbedienbar. Hat mich sowieso schon immer gestört, dass es den Konfigurator nicht für touch gibt. Mal sehen welcher andere Autohersteller mir etwas verkaufen will…

Fundstücke HTML Stuff

Eloquent Javascript – Marijn Haverbeke

Nicht jeder Autor gibt seine Bücher zum online Lesen frei. Eloquent JavaScript von Marijn Haverbeke ist so ein Buch.

Bild zeigt den Titel des elektronischen Buches
Screenshot des „E-Books“

Fundstücke HTML Stuff

ZDF Mediathek – angucken geht zwar…

…aber, wenn mein HTC One in den iPad=true Modus gezwungen wird und dann hinter dem GPRS Link nicht mal eine unterstützte Datei angeboten wird. Pfui Deibel. :)

Irgendwie klappte der UMTS Modus dann.

Screenshot der URI der Mediathek

Screenshot der Mediathek

Ich muss den Quellcode des Links morgen am Desktop dringend inspizieren.

Tagungen / Veranstaltungen

Webinale – Fazit

Jetzt sitze ich am Flughafen Tegel, warte auf den Flug, weil die letzten Talks zu RWD leider ausgefallen waren und habe Zeit ein paar Zeilen zu schreiben.