JULY 24, 2019

This example uses regular expressions (RegExp) to replace multiple appearances of a substring in a string.

const string = `The car is red. The car is black.`;

const replacedString = string.replace(/car|is/g, "·····");

// returns The ····· ····· red. The ····· ····· black.

Before you go

If you found this useful, you might want to join my newsletter; or take a look at other posts about code, TypeScript, and React.

JULY 24, 2019

Here is an example of nested Promise.all() calls. We are using the Fetch API to load a given path or URL, then requesting the arrayBuffer() of each of the responses we get back. This is a trivial problem if we do it all asynchronously, but we want to do something with the output buffers when we have them all available, and not one by one.

Specifically, this code tries to (1) fetch an array of images; (2) get their array buffers; (3) then obtain their base64 representation. In essence, map an array of images (by providing their paths or URLs) to their corresponding base64 string.

While this technique works in both TypeScript and JavaScript, the code is only shown in TypeScript.

Approach 1: Verbose

const images = [/* Array of image URLs (or local path if running in Electron) */]

Promise.all(images.map((url) => fetch(url))).then((responses: any) => {

    return Promise.all(responses.map((res: Response) => res.arrayBuffer())).then((buffers) => {
        return buffers;

}).then((buffers: any) => {

    return Promise.all(buffers.map((buffer: ArrayBuffer) => {
        return this.arrayBufferToBase64(buffer);

}).then((imagesAsBase64: any) => {

    // Do something with the base64 strings


Approach 2: Simplified

const layerImages = [/* Array of image URLs (or local path if running in Electron) */]

Promise.all(layerImages.map((url) => fetch(url))).then((responses: any) => {

    return Promise.all(responses.map((res: Response) => res.arrayBuffer())).then((buffers) => {
        return buffers.map((buffer) => this.arrayBufferToBase64(buffer));

}).then((imagesAsBase64: any) => {

    // Do something with the base64 strings


Array Buffer to base64

// source: stackoverflow.com
private arrayBufferToBase64(buffer: any) {
    let binary = "";
    const bytes = [].slice.call(new Uint8Array(buffer));
    bytes.forEach((b: any) => binary += String.fromCharCode(b));
    // Inside of a web tab
    return window.btoa(binary);

Before you go

If you found this useful, you might want to join my newsletter; or take a look at other posts about code, TypeScript, and React.

JULY 19, 2019

Technologist and artist Cristóbal Valenzuela co-founded Runway with a simple idea in mind: putting machine learning in the hands of creators as an intuitive and simple visual interface.

We are on the verge of a new creative revolution. [Machine intelligence] is producing radical changes in the way digital content is made, understood, and processed, unfastening previously unimagined ways of creating.

Enjoy this conversation on how to power your creative work with artificial intelligence, and Cristóbal's take on simplicity, life, work, and creativity.

Listen to "Cristobal Valenzuela — Machine Learning for Creators"

JULY 10, 2019

It's convenient to deploy a single Laravel application and then point multiple domains to it and have different configurations (and databases) for each individual domain. This means that you can reuse your code and only deploy once if all of the websites share the same resources, and then just specify a custom .env environment file to configure each domain entry point.

The first thing you need to do is to add one .env per domain. (Leave your .env file as a default, which would be used as a fallback for domains where you haven't explicitly created a custom .env file.) For the domains you want to have their custom config, add an .env file attaching the domain name to the end of its filename, like .env.nono.ma, for instance.

Then add the following code to your bootstrap/app.php right before returning the $app.

// bootstrap/app.php

// ...

| Load domain-specific .env file if it exists

if(isset($_SERVER['HTTP_HOST']) && !empty($_SERVER['HTTP_HOST'])){
    $domain = $_SERVER['HTTP_HOST'];

if ($domain) {
    $dotenv = \Dotenv\Dotenv::create(base_path(), '.env.'.$domain);
    try {
    } catch (\Dotenv\Exception\InvalidPathException $e) {
        // No custom .env file found for this domain

// ...

return $app;

I've tested this code with Laravel 5.8 and it works like a charm.

JULY 9, 2019

Important Looking Pirates on rendering Westworld:

For all the character work on Westworld, we used Arnold. It’s perfect for preserving detail in skin shading and also handles hair/fur very efficiently. For shading, we quite often work with Anders Langlands, alShader and also use shaders written here at ILP. Besides Arnold, we also used V-Ray for the train station sequence.

Bobo Skipper (VFX Supervisor of Important Looking Pirates):

We started our shot production for Westworld in early February 2016. The size of the team varied depending on what episode we were on. At times we were about five people and other times around 15. In total, we delivered around 65 shots.

We were so excited when Jay Worth (VFX Supervisor) approached us. The show looked promising, and there were a lot of cool shots planned. Our goal is always to deliver the best possible quality, and for all the VFX we did on "Westworld" the most important thing was that shots helped drive the story. I think the first season turned out to be incredible and I’m proud of our contribution to the show.

In general, the challenge was to deliver high-quality shots for all our sequences. A few of the extra tricky ones included creating a young version of Anthony Hopkins, a big terraformer digging up dirt and rock and the sequence of the robot boy opening up the face.

Read the full article on Autodesk AREA.

JUNE 30, 2019

Over the last months, I've been questioning why the streets of my hometown are flooded with electric scooters, at the same time that I keep asking myself if I should continue using social media and how.

In this essay, I briefly explain the way Amish communities decide whether to adopt a given piece of technology, and, hopefully, convince you that our modern communities—and ourselves as individuals—can learn from why and how the Amish do it.

Read "Would The Amish Ride Electric Scooters?"

JUNE 26, 2019

—Wake up.
—Oh God, another day? Boy, this hurts.

Simplicity might well be the art of hiding the messiness involved in our creative processes. (Drafts and versions; cutting and pasting; design tools; projects, clients, and deadlines.) Even when new technologies facilitate our arts and crafts, traditional methods may still work better than anything made today.

Enjoy this conversation with a maximalist artist living a simple life doing what makes him (and others) smile.

Turns everything off and goes outside.

Listen to "Pier Gustafson — Drawing Fast, Thinking Slow"

JUNE 12, 2019

Simplicity is an emerging trend; a luxury not everyone can afford.

For the last 10,000 years, human biology has barely changed — yet our lives feel more complex, accelerated, and stressful than ever before.

What are we trying to slow down from?

🎙 Listen to "Panagiotis Michalatos — Slow Down From What?"

JUNE 6, 2019

Hi Friends— 👋🏻

I'm excited to be preparing a newsletter to share my sketches with you on a weekly basis. Each week, subscribers will receive a sketch paired with a short essay. The drive of this project is to sketch and write daily, and to have a medium to share my drawings independent from social media. 👨🏻‍🎨

Curious about the format? Here's a sample email.

If you feel this is your kind of thing, here's how to join.

JUNE 5, 2019

Now it’s incredibly simple to start building a native Mac app from your current iPad app. Your apps share the same project and source code, so you can efficiently convert your iPad app’s desktop-class features, and add more just for Mac.

Apple seems to (finally) have started blurring the edges between what it means to be an iPadOS and a macOS app.

If your iPad app would make an excellent Mac app, now is the perfect time to streamline your code base and bring your app to life on Mac. The beta version of Xcode 11 is all you need. Begin by selecting the “Mac” checkbox in the project settings of your existing iPad app to create a native Mac app that you can enhance further. Your Mac and iPad apps share the same project and source code, making it easy to change your code in one place.

MAY 17, 2019

Yay! Visual Studio just announce a preview release of "extension [that] let you work with [Visual Studio] Code over SSH on a remote machine or VM, in Windows Subsystem for Linux (WSL), or inside a Docker container."

Go ahead and install the Remote Development extension. "An extension pack that lets you open any folder in a container, on a remote machine, or in WSL and take advantage of VS Code's full feature set."

MAY 15, 2019

Here are some highlights that might affect your Mailchimp account if you are close to moving to over 2,000 contacts in your Free Plan.

7B. Audience and Archiving

You may have several types of contacts in your Mailchimp account, but only contacts that you can engage through the Service count as contacts in your “audience” for purposes of your Monthly Plan or Free Plan. Subscribed, unsubscribed, and transactional (or e-commerce) contacts count towards your audience. Cleaned, pending, reconfirmed, deleted, and archived contacts do not count towards your audience. You may elect to archive contacts at any time, but any profile changes for an archived contact (whether initiated by you, the contact, or an integration) will automatically unarchive that contact. You cannot engage in any activity through the Service with archived contacts unless and until they are unarchived. If a contact is unarchived, it will immediately count towards your audience for your current billing cycle and any future billing cycles unless and until archived again.

8. Free Plans

If you use the Service under the free plan (“Free Plan”) and you want to go over the Free Plan limits, you’ll be required to upgrade your account to, and select and pay for, a Monthly Plan. Monthly Plans are described in Section 7A above. If you exceed your Free Plan limits, or otherwise upgrade your account to a paid Monthly Plan, you’ll only be provided one complimentary downgrade to the Free Plan (provided your sending volume and audience numbers drop down to the Free Plan limits again). If you go over the limits for the Free Plan more than once, you’ll no longer qualify for the Free Plan, even if your future sending volume and audience numbers are within the limits of the Free Plan.

MAY 6, 2019

It's been eight months since I left Cambridge, Massachusetts, and moved back to Málaga, Spain. Take a look at my now page to see what I'm focusing on now: writing, podcasting, sketching, machine learning, and reading.

MAY 2, 2019

To improve your experience with Apple Podcasts, we want to share the following information and updates.

iOS 12.2
In addition to bug fixes and feature enhancements, we'd like to call your attention to these improvements to the Podcasts app on iOS 12.2:

  • Browse. Featured collections and categories, as well as the Top Episodes and Top Shows charts, are now presented on the Browse tab for easier discovery.
  • Episode numbers. Now, both show types, episodic and serial, will display episode numbers for subscribed users as dictated by the tag.
  • Mark as Played. With 3D Touch or by tapping , listeners can now mark episodes as played for their subscribed shows.

Apple Podcasts Preview

Apple Podcasts Preview pages on the web have been updated. For the first time, we are introducing a dedicated episode page that includes the ability to play directly on the web. The design is also mobile responsive and provides a better experience for Android users.

Podcasts Connect Help

We've updated the RSS tags section to explain the different supported tags more clearly and show how they are displayed on Apple Podcasts on iOS 12.2. Also, the relevant section now distinguishes between required, recommended, and situational tags. Previous tags and values will continue to be supported unless otherwise communicated.

Being able to play podcast episodes in a web browser (and even have an individual page per episode) is huge.

They've also updated the example of a well-formed RSS feed.

MAY 1, 2019

It’s not a better UI — it’s the facade of a better UI built on top of the same old crap, which was in turn a facade on top of older crap.


I’d rather retire from using computers than use Windows 10. What a mess.

APRIL 30, 2019

Opportunities to talk to people like Saba Ghole and learn about how they understand life and what drives them to do what they do every day, is what moves me to continue with the Getting Simple project.

"I had a chance to reminisce with Nono about what it means to get simple and embody a growth mindset on his very special podcast. Mixed in are bits about my childhood, my artistic pursuits, and my current love and passion, NuVu Studio." —Saba Ghole, Co-founder and Chief Creative Officer of NuVu Studio

If you're intrigued about how growth mindset can be taken to reality, listen to this episode and learn about how NuVu, an innovation school for middle and high school students, helps students build long-lasting core competencies and creative skills.

🎙 Listen on iTunes · Spotify · Overcast · Stitcher

APRIL 12, 2019

Here's the video of my BIMOn 2019 talk, in Spanish, on intuitive interfaces, artificial intelligence, and their potential uses for BIM. I also talk about Suggestive Drawing and Getting Simple.

Take a look at the talk links.

MARCH 13, 2019

Next Thursday, March 21, 2019 I'll be talking about potential uses of artificial intelligence and machine learning in BIM workflows; and showing sample uses of Refinery to generate design options (and optimize them) with Dynamo and Revit.

See the schedule.

MARCH 7, 2019

? A month from today, I had a conversation with Matt Jezyk, who recently left Autodesk to go work with the the group that designs and builds the car and lithium battery "Gigafactories" at Tesla. I can't express how much I enjoyed talking to Matt.

? Matt talks about his rituals to slow down and stay afloat amongst all the things competing for your attention; embracing change and automation; techniques to be more creative; the rationale behind his ten-year life cycles; why he just transitioned from Autodesk to Tesla; and a lot more.

Take a look at the show notes and where to listen.

FEBRUARY 25, 2019

In trying to export my React's Redux store from index.tsx to be used somewhere else outside of the React application, I was getting an Invariant Violation: Target container is not a DOM element error while running Jest tests (with Enzyme and Webpack) in the App component (App.tsx).

I found a solution to this error for my use case, which was using the same Redux store React is using outside of React.

The error

The initial code that didn't work when testing React looked like this.

// index.tsx

import * as React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { applyMiddleware, compose, createStore } from "redux";
import App from "./components/App";
import { rootReducer } from "./store/reducers";
import { initialState } from "./store/state";

const middlewares = [];

export const store = createStore(

    <Provider store={store}>
        <App />

The solution

Separate the Redux store logic into a new file named store.ts, then create a default export (to be used by index.tsx, i.e., the React application) and a non-default export with export const store (to be used from non-React classes), as follows.

// store.ts

import { applyMiddleware, compose, createStore } from "redux";
import logger from "redux-logger";
import { rootReducer } from "./store/reducers";
import { initialState } from "./store/state";

const middlewares = [];

export const store = createStore(

export default store;
// updated index.tsx

import * as React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import App from "./components/App";
import store from "./store";

    <Provider store={store}>
        <App />

Using the Redux store in non-React classes

// MyClass.ts

import { store } from "./store"; // store.ts

export default class MyClass {
  handleClick() {
    store.dispatch({ ...new SomeAction() });

The default export

A small note before you go. Here is how to use the default and the non-default exports.

  • default export store; is used with import store from "./store";
  • export const store = ... is used with import { store } from "./store";

Before you go

If you found this useful, you might want to join my newsletter; or take a look at other posts about code, TypeScript, and React.

FEBRUARY 24, 2019

Fascinated by James Paterson's virtual reality animation tool: Norman.

Hi, I'm artist and coder James Paterson.

Norman is the animation tool that I’ve always wanted. I built it in JavaScript, it runs in a web browser and lets me animate naturally in 3D using VR controllers. Here’s the source code.

To use the tool you’ll need some rather fancy VR gear, but you can also play with my animations below and enjoy the animated short, made entirely with Norman.

FEBRUARY 11, 2019

Yay! Rasmus Andersson recently added Thin and Light weights to Inter UI.

"Inter is a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens." It's the most similar typeface I've found to Apple's San Francisco. The best part? It's open source and free. You can find it on GitHub.

Take a look at the samples.

FEBRUARY 7, 2019

Last month, I had a conversation with Antonio García Guerra, who recently finished his PhD at the University of Oxford on nanotechnology applied to medicine. It was inspiring to hear about the physical, emotional, and informational activities that balance his life.

JANUARY 11, 2019

I'm surprised all of the faces and license plates are there. No blurring. I found this to be a great source of procrastination. Consider yourself warned.

Browse the image here.

JANUARY 2, 2019

Listen to Craig Long on how life is in the moments you didn't expect, quieting your inner intensity, helping others achieve complex goals when they don't know where to start, remote working, and disconnecting from technology.

If you're enjoying the show and want to share it with your friends, take a look at How you can spread the word.

DECEMBER 18, 2018

Here are my highlights of Deep dive into Electron’s main and renderer processes by Cameron Nokes.

[Each of these processes is] an operative system level process, or as Wikipedia puts it "an instance of a computer program that is being execute."

[…] Each of these processes run concurrently to each other. […] [M]emory and resources are isolated from each other. […] The two processes don't share memory or state.

Why multiple processes?

Chromium runs each tab in a separate process so that if one tab runs into a fatal error, it doesn't bring down the entire application. […] "Chromium is built like an operative system, using multiple OS processes to isolate web sites from each other and from the browser itself."

Main process

[I]s responsible for creating and managing BrowserWindow instances and various application events. It can also register global shortcuts, creative native menus and dialogs, respond to auto-update events, and more. Your app's entry point will point to a JavaScript file that will be executed in the main process. A subset of Electron APIs are available in the main process, as well as all Node.js modules. The docs state: “The basic rule is: if a module is GUI or low-level system related, then it should be only available in the main process.” (Note that GUI here means native GUI, not HTML based UI rendered by Chromium). This is to avoid potential memory leak problems.

Renderer process

The render process is responsible for running the user-interface of your app, or in other words, a web page which is an instance of webContents. All DOM APIs, Node.js APIs, and a subset of Electron APIs are available in the renderer. […] [O]ne or more webContents can live in a single window […] because a single window can host multiple webviews and each webview is its own webContents instance and renderer process.

See this Venn diagram of Electron (provided by the source).

How do I communicate between processes?

Electron uses interprocess communication (IPC) to communicate between processes—same as Chromium. IPC is sort of like using postMessage between a web page and an iframe or webWorker […] you send a message with a channel name and some arbitrary information. IPC can work between renderers and the main process in both directions. IPC is asynchronous by default but also has synchronous APIs (like fs in Node.js).

Electron also gives you the remote module, which allows you to, for example, use a main process module like Menu as if it were available in the renderer. No manual IPC calls [are] necessary, but what's really going on behind the scenes is that you are issuing commands to the main process via synchronous IPC calls. (These can be debugged with devtron.)

Can I make something work in both the main and renderer?

Yes, because main process APIs can be accessed through remote, you can do something like this:

const electron = require('electron');
const Menu = electron.Menu || electron.remote.Menu;

//now you can use it seamlessly in either main or renderer


(See the full thing.)

Want to see older publications? Visit the archive.

Listen to my Podcast.