grunt-php

$ npm install --save-dev grunt-php
require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

grunt.initConfig({
    php: {
        dist: {
            options: {
                port: 5000
            }
        }
    }
});

grunt.registerTask('default', ['php']);

Uses the in PHP 5.4+ built-in PHP Server

grunt-php →

Elsewhere , , Leave a comment

Realtime Audio-Visualizations with JavaScript

window.onload = function() {
  var ctx = new AudioContext();
  var audio = document.getElementById('myAudio');
  var audioSrc = ctx.createMediaElementSource(audio);
  var analyser = ctx.createAnalyser();
  // we have to connect the MediaElementSource with the analyser 
  audioSrc.connect(analyser);
  // we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
 
  // frequencyBinCount tells you how many values you'll receive from the analyser
  var frequencyData = new Uint8Array(analyser.frequencyBinCount);
 
  // we're ready to receive some data!
  // loop
  function renderFrame() {
     requestAnimationFrame(renderFrame);
     // update data in frequencyData
     analyser.getByteFrequencyData(frequencyData);
     // render frame based on values in frequencyData
     // console.log(frequencyData)
  }
  audio.start();
  renderFrame();
};

Web Audio API + Canvas + Some math. I would have chosen a different track though ;-)

How to create Audio-Visualizations with JavaScript & HTML →
Realtime Audio-Visualizations (Demo) →

Elsewhere , , , Leave a comment

Twemoji

twemoji.parse('I \u2764\uFE0F emoji!');

// will produce
/*
I <img
  class="emoji"
  draggable="false"
  alt="❤️"
  src="https://twemoji.maxcdn.com/36x36/2764.png"> emoji!
*/

Nugget of JavaScript to replace astral symbols (emoji) with images in browsers that don’t support them. Yes, looking at you Chrome on OS X. Images are included in the repo, or can be loaded from a CDN.

Twitter Emoji for Everyone →

Elsewhere , , Leave a comment

HTTPS Everywhere

(That’s a presentation embedded above. Video also available)

Elsewhere , , , Leave a comment

SSL Config Generator

Just choose the web server / web front you’re using (Apache, Nginx, HAProxy) + whether you want to support only modern, intermediate, or old versions of browsers and a proper configuration will be generated.

<VirtualHost *:443>
    ...
    SSLEngine on
    SSLCertificateFile      /path/to/signed_certificate
    SSLCertificateChainFile /path/to/intermediate_certificate
    SSLCertificateKeyFile   /path/to/private/key
    SSLCACertificateFile    /path/to/all_ca_certs

    # modern configuration, tweak to your needs
    SSLProtocol             all -SSLv2 -SSLv3 -TLSv1
    SSLCipherSuite          ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!3DES:!MD5:!PSK
    SSLHonorCipherOrder     on



    # HSTS
    Header add Strict-Transport-Security "max-age=15768000"
    ...
</VirtualHost>

Choosing modern will result in an A+ on SSLLabs. Of course a stuff like POODLE will be prevented.

Mozilla Security Recommended Web Server Configuration Files →

Elsewhere , , , , Leave a comment

7 Principles of Rich Web Applications

My approach is to examine the usage of JavaScript exclusively from the lens of user experience (UX). In particular, I put a strong focus on the idea of minimizing the time it takes the user to get the data they are interested in. Starting with networking fundamentals all the way to predicting the future.

  1. Server rendered pages are not optional
  2. Act immediately on user input
  3. React to data changes
  4. Control the data exchange with the server
  5. Don’t break history, enhance it
  6. Push code updates
  7. Predict behavior

7 Principles of Rich Web Applications →

Elsewhere , , , Leave a comment

Responsive Images in Practice

<img 
    srcset="quilt_3/large.jpg  1240w, 
            quilt_3/medium.jpg  620w,
            quilt_3/small.jpg   310w"
    sizes="(min-width: 41.25em) 38.75em,
           calc(100vw - 2.5em)"
    src="quilt_3/medium.jpg"
    alt="A crazy quilt whose irregular fabric scraps are fit into a lattice of diamonds." />

Let’s take an existing web page and make its images responsive. We’ll do so in three passes, applying each piece of the new markup in turn:

  1. We’ll ensure that our images scale efficiently with srcset and sizes.
  2. We’ll art direct our images with picture and source media.
  3. We’ll supply an alternate image format using picture and source type.

In the process we’ll see firsthand the dramatic performance gains that the new features enable.

A List Apart: Responsive Images in Practice →

Elsewhere , , Leave a comment

rage-quit support for bash

687474703a2f2f692e696d6775722e636f6d2f30775878584b582e706e67

… (╯°□°)╯︵ ┻━┻

rage-quit support for bash →

Elsewhere , , Leave a comment

DJI Inspire 1

s2bgbody-fc6991953616435f6be9ec2aeea31c3f

Check out this video review by The Verge:

360° view, 4K@30fps, dual operator control, … SHUT UP AND TAKE MY MONEY!

DJI Inspire 1 →

(via)

Elsewhere , Leave a comment

9 basic principles of responsive web design

Responsive-vs-Adaptive

Let’s clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it. To keep it simple we’ll focus on layouts

Great and easy to understand gifs explaining a few concepts – I prefer this word over principles – of responsive web design.

9 basic principles of responsive web design →

Elsewhere , Leave a comment