Kategorien
Code

Loading Indicator á la Youtube mit CSS

Loading-Balken
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.

Kategorien
Allgemein

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!

Kategorien
Allgemein Wochenbericht

Wochenbericht 2015.51

Dies ist der letzte Wochenbericht für dieses Jahr. Danke für eure Aufmerksamkeit und die stetig wachsende Leserschaft.

Getting Started With CSS calc() erklärt, wie man dynamische Effekte mit der calc()-Eigenschaft in CSS umsetzen kann. Zusammen mit anderen Methoden und Eigenschaften aus CSS3 (vh, vw) und Variablen kann man damit sogar 3D-Würfel umsetzen.

Zum Thema Accessibility, ist folgende Implementierung einer Responsive Progressive Accessible Vanilla Search vielleicht ein sinnvoller Schubs in die Richtige Richtung.

Angular 2 Beta is now available

Responsive Webdesign: Probleme mit Blindtext und Platzhalterbildern “Content is lorem ipsum dolor (*hier schönes Foto)” von Nils Pooker.

Coding Etiquette to Make Other Developers Hate You Less zeigt, wie man sich die Zusammenarbeit bei Projekten einfacher macht.

Wer den Wochenbericht schon morgens in seinem Posteingang haben möchte, kann sich für den Wochenbericht-Newsletter registrieren.

Kategorien
Allgemein Wochenbericht

Wochenbericht 2015.50

Drei Jahre alte Lücke bedroht Smartphones und Smart TVs. Ich bin mir nicht sicher, ob ich das IobT schon mal hier erwähnt habe.

In nur einem Monat hat Let’s Enrypt die 100.000er Marke für ausgestellte Zertifikate geknackt.

Allerdings stellt Mozilla die Entwicklung und den den Verkauf von Firefox OS Smartphones ein. Das finde ich überaus schade, da ich gehofft hatte, dass hier mal eine nennenswerte Alternative zu iOS, Android und Windows Phone entsteht. Was das für die Entwicklung des OS an sich angeht, ist unklar.

AngularJS 1.5 steht vor der Tür und bringt Perfomancegewinne in ng-if und eine neue .component-Direktive (die der Standard in Angular 2.0 wird) mit sich.

Kategorien
Allgemein Wochenbericht

Wochenbericht 2015.49

Frontendentwicklung ist nicht einfach. Das Thema kehrt immer wieder. “Für Frontendentwickler gibt es hingegen eine Vielzahl von Endgegnern. Wenn man es genau nimmt, ist es eine unbekannte, sehr hohe Anzahl, die sich fortlaufend ändert.” Das fasst unsere Arbeit sehr gut zusammen. Wenn man knapp 5 Jahre nach Vollendung der Website Bug reports bekommt, dass ein bestimmter Teilaspekt mit IE10 und IE11 auf Windows 8 und 10 nicht richtig geht, mit 8.1 und den genannten Browsern aber schon.

jsFiddle bekommt ein neues Interface. Ich finde die Sidebar eher mittelmäßig gelungen, das Akkordeon-Verhalten würde ich an keiner Stelle erwarten.

Let’s Encrypt startet öffentliche Beta. Ich bin ja mal gespannt wie gut oder schlecht das wird. Okay, viel schlechter als der Workflow und das Modell jetzt aussehen, kann’s eigentlich nicht werden.

Vodafone Kabel drosselt bei 10 GB Traffic (pro Tag) auf 100 KBit/s. Das ganze aber (angeblich) nur bei Filesharing. Da frage ich mich: Warum sind meine ~300 GB / Monat (also auch knapp 10GB am Tag), die ich mit VoD zusammenbekomme besser als 300 GB, die per Filesharing zusammenkommen? Ich beziehe mich da auf die rein technische Auslastung der Netze. Und ich lade z.B. meine Linux-ISOs per BitTorrent, weil das in der Regel schneller geht als über HTTP-Mirrors. Wie sieht das bei Nutzern von Diensten wie Dropbox oder BitTorrentSync aus? Ist ja auch Filesharing, oder?

Working Draft Revision 242: Nützliche Services und a11y im täglichen Job berichtet über verschiedene Projekte und Produkte, die für Webworker nützlich sind.

Der “Commit Message Generator” ist ein sehr lustiges Tool, wenn auch die meisten Messages extrem dämlich sind.

Swift ist Open Source. Das ist Objective-C soweit ich weiss auch, aber eine Programmiersprache, die an eine Systemumgebung gekoppelt ist, kann Open Source sein, wie sie will. Das wird der Verbreitung außerhalb der Apple-Welt vermutlich auch nicht so viel helfen.