Bach’s G major prelude, deconstructed

Another great entry in the Vox Earworm series:

Bach’s six cello suites are considered a rite of passage for cellists. They’re masterpieces of classical music, and the prelude in G major — the first movement of the suites — is perhaps the best example of Bach’s power as a composer. In it, he’s able to achieve rich and complex harmonic movements with just a four-stringed instrument, while using the very basic tenets of music composition. Those basic tenets are what Alisa Weilerstein, a renowned cellist and McArthur fellow, helps us understand.

The prelude will never sound the same after having seen this video.

👨‍🎤 Into music? These previously linked Vox Earworm posts are definitely worth your time in that case!

Run your own newsletter engine with Mailcoach

Congrats to the Spatie team with the release of Mailcoach:

Mailcoach is a self-hosted email list manager. It integrates with services like Amazon SES, Mailgun or Sendgrid to send out mailings affordably. Stand-alone, or integrated in a Laravel project, it’s perfect for bloggers, artisans and entrepreneurs.

Now with an introductory price of $99 (instead of $149). For comparison: when sending 24 annual campaigns to 5000 subscribers Mailcoach will save you about $2500 annually when compared to Mailchimp.

A great move by Freek is to also provide a video course on how they built Mailcoach. Highly interesting if you’re a Laravel Developer, even if you’re not interested in Mailcoach itself.

Mailcoach →

💡 More “behind the scenes” info can be found in Freek’s writeup on the project and Sebastian’s insights on the (lack) of JavaScript frameworks in Mailcoach.

Ahh shhgit! – Find leaked secrets in real time across GitHub, GitLab and BitBucket

Software developers can accidentally leak sensitive information, particularly secret keys for third party services, across code hosting platforms such as GitHub, GitLab and BitBucket. These secrets — including the data they were protecting — end up in the hands of bad actors which ultimately leads to significant data breaches.

Imagine being able to monitor the entirety of GitHub, GitLab and BitBucket to find any secrets accidentally committed in real time. Well, we’re in luck. All three platforms provide a public ‘real time firehose’ events API, that details various activity streams on the site, including code commits.

Ahh shhgit! will watch this real-time stream and pull out any accidentally committed secrets.

shhgit: find secrets in real time across GitHub, GitLab and BitBucket →
Ahh shhgit! (Introductory Blogpost) →

⚠️ Don’t think you can quickly undo the commit (and force push) to remove your leaked secret. Once it’s out there, it will be abused. See The $2375 Amazon AWS mistake for example.

Via @patrickdebois

Rollercoaster


Photo by Tim Gouw on Unsplash

One moment you’re excited about your son who’s about to be born, the other moment you’re in fear that he might not make it.

One moment you’re overly happy because your son did make it thanks to the help of doctors and medical staff, the other moment you’re shocked to receive a phone call from the police to inform you that they found your uncle in his home and that he has been hospitalised with a severe cerebral haemorrhage.

One moment you’re excited to see that your article got mentioned on CSS-Tricks, the other moment your cleaning lady enters the house in tears to say that she accidentally ran over your 12 year old pet cat (RIP, Kiki).

One moment you’re celebrating your mum’s 60th birthday, the other moment you’re sad to hear that an exciting project got cancelled.

One moment you feel appreciated when receiving flowers at your diving club‘s annual members meeting, the other moment you’re cursing at the “handyman” because the roof that should no longer be leaking is leaking again.

One moment you’re glad to have your CFP accepted, the other moment you’re at the undertaker arranging a funeral for your uncle (RIP) because he and his sister (aka: your mum) were no longer on speaking terms.

I wonder what else 2020 has in store for me. It’s been pretty rough, so far …

° NOAH VAN DAMME

I’m proud to announce that my son NOAH was born on January 22, 2020.

It was a long and bumpy road to get to the finish line, but all turned out well in the end. I’m very grateful that we have the means for and access to such a good healthcare system; without the help of doctors and nurses this little wonder wouldn’t have made it.

Most praise goes out to my girlfriend though who – on top of carrying a child for 9 months – also had to endure a 34-hour labour, only for her to land in the O.R. for an emergency c-section.

Mother and child are doing fine. Tomorrow they get to go home 🙂

N26 and the lack of JavaScript

Hugo Giraudel, engineer at N26:

In the last few years, we have seen more and more ways to build highly interactive web applications relying almost exclusively on JavaScript. To the point where we almost wonder whether we forgot from where we come from. Not so long ago was a time was JavaScript was just sprinkled on top of web pages to have custom cursors and cool sound hover effects. But I digress.

That doesn’t mean they’ve totally barred JavaScript. On the contrary: the N26 platform is built using React. What they do instead is render the React tree on the server, and make sure that it works as a regular page would. Only if the JavaScript on the client kicks in does it become a Single Page Application.

N26 and lack of JavaScript →

google/cloud-functions-framework – Google Cloud Functions Framework for PHP

google/cloud-functions-framework is an open source FaaS (Function as a Service) Framework for writing portable PHP functions.

An example function looks like this:

<?php

use Symfony\Component\HttpFoundation\Request;

function helloHttp(Request $request)
{
    return "Hello World from PHP HTTP function!" . PHP_EOL;
}

One can invoke it locally by executing the included router as follows:

export FUNCTION_TARGET=helloHttp
export FUNCTION_SIGNATURE_TYPE=http
export FUNCTION_SOURCE=index.php
php -S localhost:8080 vendor/bin/router.php

Alternatively you can run it in a Docker container (which you can then deploy to Cloud Run):

docker build . \
    -f vendor/google/cloud-functions-framework/examples/hello/Dockerfile \
    -t my-cloud-function

docker run -p 8080:8080 \
    -e FUNCTION_TARGET=helloHttp \
    -e FUNCTION_SIGNATURE_TYPE=http \
    my-cloud-function

Installation per Composer:

composer require google/cloud-functions-framework

google/cloud-functions-framework →

⚠️ There is a sample Dockerfile included with the repo, but a first glance tells me it needs some polishing as it uses a full blown GAE_RUNTIME Docker base image and directly installs the composer dependencies into the image itself instead of relying on multi-stage builds.

Buiding a JAMstack API with Netlify Functions and Zapier Webhooks

In this tutorial, I’ll show you how to set up webhooks by Zapier to send information to a third-party service and how to integrate them into your JAMstack site using Netlify Functions. This combination allows you to quickly and easily create dynamic functionality on your JAMstack site and create services that do things existing APIs may not even support.

The Cloud Function will call the Zapier webhook, and the webhook – a paid feature of Zapier – is set up to perform an insertion of the data into a Google Spreadsheet.

const axios = require('axios');

exports.handler = async (event, context, callback) => {
  try {
    if(!event.body) {
        return { 
            statusCode: 500, 
            body: 'Name and email are required.'
        };
    }

    const body = JSON.parse(event.body);
    const email = body.email;
    const fullName = body.fullName;
    if(!email) {
        return { 
            statusCode: 500, 
            body: 'email parameter required' 
        };
    }
    if(!fullName) {
        return { 
            statusCode: 500, 
            body: 'name parameter required' 
        };
    }

    return axios({
      method: 'post',
      url: 'https://hooks.zapier.com/hooks/catch/2422393/otw0s6l/',
      data:{
            'email':email,
            'fullName':fullName
      }
    }).then(res => {
      console.log(res);
      return {
        statusCode:200, 
        body: JSON.stringify(res.data)
      }
    })
    .catch(err => {
      return { statusCode: 200, body: JSON.stringify(err.response.data.errors[0]) };
    });

  } catch (err) {[]
    return { statusCode: 500, body: err.toString() };
  }

};

JAMstack API with Netlify Functions and Zapier Webhooks, Part 1 →
Project Code (GitHub) →

react-three-fiber – React renderer for three.js

This is a React renderer for Threejs on the web and react-native. Building a dynamic scene graph becomes so much easier when you can break it up into declarative, re-usable components that react to state changes.

This is less of an abstraction and more of a pure reconciler (like react-dom in relation to HTML). It does not target a specific Threejs version nor does it need updates when Threejs alters, adds or removes features. It won’t change any specifics or rules. There are zero limitations.

react-three-fiber →
Demo Source (GitHub) →