Wochenbericht 2016.04

„Serve The Web Like It’s 2016“ ist der Slogan, den der Caddyserver seinen Nutzern ins Gesicht wirft. Und das ist gar nicht so weit hergeholt. Ich habe den Server in einem Kundenprojekt intern als Proxy laufen um Deployment zu sparen und überlege, das ganze bei einem anderen Projekt als Frontend-Proxy einzusetzen (anstelle eines Apachen). Dazu muss ich nur noch rausfinden, ob man das SSL für mehrere Domains ordentlich abfrühstücken kann. Besonders imposant finde ich das automatische Einholen von Let’s Encrypt-Zertifikaten.

TrumpScript – „Making Python great again“. Ich finde ja beeindruckend, mit welcher Geschwindigkeit man heutzutage „Programmiersprachen“ „entwickeln“ kann. Gut, Fakt ist dabei in der Regel, dass sie in eine andere Programmiersprache transpiliert werden. Andere Beispiele: ArnoldC und DogeScript

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
Seite 28 von 59« Erste...1020...2627282930...4050...Letzte »