° 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) →

Craft.js – A React framework for building drag-n-drop page editors.

Page editors are a great way to provide an excellent user experience. However, to build one is often a pretty dreadful task.

Craft.js solves this problem by modularising the building blocks of a page editor. It provides a drag-n-drop system and handles the way user components should be rendered, updated and moved – among other things. With this, you’ll be able to focus on building the page editor according to your own specifications and needs.

Craft.js →

💡 If you’re looking for an editor that’s more focused on content (instead of the entire page layout), check out editor.js

MapItOut: “How far could I live from X?”

The folks at IAmsterdam have released a map that measures distances not in miles / kms but in time. Select a spot + a means of transportation + a desired travel time and it’ll show you how far away (in time) you can get.

From what I can tell European countries such as Belgium, France, Germany, etc. are also supported but New York (USA) and London (UK) for example aren’t.

MapItOut →

Visual Studio Code: Visually Hide Secrets in Environment Files with Cloak

Sparked by an idea by Wes Bos, John Papa has created and released a first version of Cloak:

Cloak hides/shows your secrets in environment files, to avoid accidentally sharing them with everyone who sees your screen.

Handy when doing screencasts and the like.

Do note that it only visually hides the secrets, no changes are made. Only ENV files are supported for now.

Visual Studio Marketplace: Cloak →