Wochenbericht 2016.03

Diese Woche sind wir sehr AngularJS-lastig geworden.

Der Website Grader ist ein schick gemachtes Tool, welches einem übersichtlich sinnvolle Verbesserungsmaßnahmen für seine Website vorschlägt.

Raja Sekar zeigt, welche Möglichkeiten es bei AngularJS gibt, Controller miteinander kommunizieren zu lassen.

AngularJS’ Internals In Depth zeigt, wie AngularJS unter der Haube funktioniert.

An Introduction To Unit Testing In AngularJS Applications erklärt Unit Tests für Angular-Projekte. Aber man sollte nie vergessen, das erfolgreiche Unittests nichts darüber aussagen, ob eine Anwendung (sinnvoll) funktioniert. Dazu kann ich auch gerne noch ein lustiges Beispiel aus Reddits ProgrammerHumor-Forum anführen.

The Issue With Global Node Packages ist eine durchaus berechtigte Kritik für viele Tools.

Wochenbericht 2016.02

„Accessibility im Sinn“ von Eric Eggert legt den Finger tief in die Wunde, was einfache Tricks angeht, Anwendungen zugänglicher zu machen. Sinnvoller Artikel, gute Beispiele. (Ich glaube, ich habe mir in dieser Hinsicht in meine Anwendungen von den WAI-Roles/-Labels mal abgesehen, eher weniger Schnitzer erlaubt)

Webpack ist „yet another build chain“, die man sich bestimmt mal anschauen kann. Nach Grunt, Gulp, Broccoli und Co. Und npm.

Learn Flexbox with this interactive website that updates as you work through the tutorial.

Aus aktuellem Anlass möchte ich mal darauf hinweisen, dass Yeoman und insbesondere der Angular-Generator wirklich, wirklich geil sind. Natürlich nimmt einem ein solches Tool nicht das Denken ab und schreibt auch keine Anwendungslogik, aber um den ganzen Kleinkram wie das handlen der Abhängigkeiten, sicherzustellen, dass die Module auch alle registriert sind, Routen, Controller und Views verknüpfen, das tut das Tool wirklich gut. Und wenn man sich dann deutlich einfacher auf die Anwendung als auf das Erstellen, Anordnen und Verlinken von Dateien konzentrieren kann, ist das im Alltag gerade beim Start einer neuen Anwendung sehr von Vorteil.

Wochenbericht 2016.01

Coding for the Beast that is Outlook 2016 zeigt, was uns in Outlook 2016 bei HTML-Email erwarten wird. Mein Lieblings-Feature: „Text doesn’t wrap automatically in Outlook 2016“. Ich feiere hart.

Infrastructure“ ist ein Artikel von Seth Godin, der erklärt, was erfolgreiche Unternehmen von erfolglosen unterscheidet. (via)

Im Webkrauts Weihnachtskalender gab es zwei wunderbare Artikel über Browsersync: Alles im Blick – Teil 1 und Alles im Blick – Teil 2, der erklärt, wie man den Browsersync-Reload z.B. mit einem Gulp-Task anstoßen kann. Natürlich gibts auch für Grunt einen browsersync Taskloader. Im Artikel selbst finden sich auch einige Links zum Thema Grunt+browsersync.

4 Disney Principles That Will Make Your Web Animations More Lively mag der eine oder andere inspirierend finden, ich empfinde das vorgeschlagene Easing des Inhaltes schon als too much.

Loading Indicator á la Youtube mit CSS

Der Plan

Nachdem ich eine vernüftige Ladeanimation gesucht habe, und bei allem immer irgendwie jQuery dranhängen musste, hab ich beschlossen, das ganze mal in lean zu lösen. Probleme dabei gibt es eigentlich nur im Bereich des Animationsstarts durch JS, dazu habe ich bei CSS-Tricks den passenden Tipp gefunden.

HTML:

<div class="loading-bar"></div>

CSS:

    .loading-bar {
        display: none;
        opacity: 0;
        position: absolute;

        top: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;

        background: red;
        height: 0;
        animation-name: expand-width, fade;
        animation-duration: 1s, 4s;
        animation-delay: 0s, 1s;

        animation-iteration-count: 1;
    }

    .loading-bar.visible {
        display: block;
        opacity: 1;
        height: 2px;
    }

    @keyframes fade {
        from {
            height: 2px;
            opacity: 1;
        }
        to {
            height: 0;
            opacity: 0;
        }
    }

    @keyframes expand-width {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }

    @keyframes glow {
        from {
            box-shadow: 0 0 5px red,
            0 0 10px red,
            0 0 10px rgba(255, 165, 0, 1),
            0 0 20px rgb(255, 244, 0);
        }
        to {
            box-shadow: none;
        }

    }

    .loading-bar.visible:before {
        box-shadow: none;

        position: absolute;
        right: 0;
        content: "";
        display: block;
        height: 2px;
        width: 8px;
        animation-name: glow;
        animation-duration: 5s;
        animation-iteration-count: 1;
    }

 

Javascript:

    var links = document.querySelectorAll( 'a' ),
            linkslen = links.length;

    for ( var link = 0; link < linkslen; link++ ) {

        links[link].addEventListener( 'click', function ( e ) {
            var lb = document.querySelectorAll( '.loading-bar' )[0];
            lb.classList.remove( 'visible' );
            //noinspection SillyAssignmentJS
            // triggers reflow for animation restart
            lb.offsetHeight = lb.offsetHeight;
            lb.classList.add( 'visible' );
        }, false )
    }

Edit am 29.12.: Ich habe den Code mal ein bisschen lesbarer und einfacher gemacht. Dazu habe ich das innere DIV entfernt, dass CSS zusammengeführt und das JS ein bisschen lesbarer gemacht. Mein Partial aus meinem Hugo-Projekt habe ich mal als Gist online gestellt. Sichergestellt sein sollte, dass das Partial so eingefügt wird, dass .loading-bar direktes Kind-Element von BODY ist. Ansonsten müssen ggf. die Styles angepasst werden.

  • Veröffentlicht in: Code

Email-Templates und API-Doku mit Hugo

Ich bin in den letzten Wochen zum Hugo-Fan geworden. Nicht dem Drink, sondern dem CMS, beziehungsweise der „Static Website Engine“. Hugo hat ein sehr interessantes Content-Object-Modell und hat mich direkt gefesselt. Einfache Installation ohne Abhängigkeiten und einfaches Deployment.

Nachdem ich den Relaunch meiner Website chrisjung.de fast fertig (und schon einige Fallstricke umschifft) hatte, habe ich in der Firma angefangen 2 Projekte auf Hugo umzustellen.

Da wäre einerseits die Erstellung von HTML-Emails für einen Kunden, bei dem mittlerweile stolze 44 Emails aufgelaufen sind, die (notgedrungen) alle einzeln zu pflegen waren. Das hat sich durch die Umstellung auf Hugo deutlich vereinfacht. Allerdings: Hugo schmeisst HTML-Kommentare aus dem generierten HTML. Auch da gibts eine kleine Abhilfe. Und: Hugo verändert Sonderzeichen in Links. In meinem Fall war ein Link ein Platzhalter #{Placeholder}, dessen Klammern am Ende durch die entsprechenden HTML-Entities ersetzt wurde. Eigentlich völlig richtig (und passiert auch nur bei Links im href), in diesem Fall aber unpraktisch. Außerdem müssen Sonderzeichen in den E-Mails ersetzt werden. Das ganze lässt sich mit 2 Shell-Skripten dann lösen:

  1. Ersetzen aller nötigen Sonderzeichen in den .md-Dateien, danach
  2. das Rückübersetzen der Klammern in den generierten Dokumenten.

Alle diese Schritte lassen Sich unter Linux (mein Basis-System), als auch unter Windows bewältigen (auch wenn die Aktionen der Bash-Scripte dann vermutlich per Hand ausgeführt werden müssen). Das ganze ist aus meiner Sicht für ein Team mit heterogener Entwickler-Systemumgebung dringend von nöten: Tools die wenige (am besten keine) Abhängigkeiten haben und auf allen benutzten Plattformen funktionieren. Und das macht Hugo wirklich gut.

***

Danach folgte dann als Mini-POC noch die Erstellung für API-Testformulare. Dazu wird in der zentralen Config für jede Section eine Basis-URL konfiguriert. Innerhalb der Sections werden dann pro API-Funktion Dokumente erstellt. Die Single-Pages brauchen wir nicht, die List-Templates erzeugen einfach pro Dokument ein Formular mit entsprechenden Ziel-URLs und Feldern. Die Felder werden über ein YAML-Frontmatter erstellt:

---
Output: >
   {
      // sample object
   }
fields: 
- name: sid
  required: required
  desc: eine Beschreibung des Feldes
  value: Vorbefüllung
- name: username
  required: required #optional
  desc: eine Beschreibung des Feldes
  value: Vorbefüllung
---

Für jeden Eintrag in der Liste „Fields“ wird damit innerhalb des Formulars ein Feld erzeugt, ggf. mit Beschreibung versehen und als Pflichtfeld markiert. Damit ist die Dokumentation und die Erstellung der Testformulare quasi eins.

Für die Erstellung einer neuen Ziel-Umgebung der gleichen API muss die Section lediglich kopiert und ein neuer Pfad in der zentralen Konfiguration definiert werden. Ggf. müssen bei Funktionen wie Login noch die Default-Werte in den einzelnen Funktionen geändert werden. TOC über die Umgebungen und die Liste der Funktionen kann Hugo dann mit ein paar wenigen Zeilen einfach anzeigen.

Struktuierte API-Dokumentation und Erstellung von Testformularen: YAY!