By about 3000 BC the Egyptians had already developed a calendar, and a water clock, the sand clock predecesor, was already in use around 1500 BC, probably to time guard duty watches, travel time, or other cultural events.¹

Today, time is ubiquitous and highly synchronized throughout the world, and the instruments we use to measure, keep, and indicate time have evolved a lot.²

We hang clocks in our walls and wear watches in our wrists and, with the appearance of digital devices, time turned into one more feature in our displays. We hardly ask each other the time anymore, as we simply reach into our pockets and tap our phone screen or look at the corner of our computer monitor.

I still keep the watches I wore when I was a child as some sort of memory tokens; a blue and yellow Flik Flak, a Casio F-91W, and an infra-red remote control capable of learning new commands, the Casio CMD-40.

With my first Nokia phone, I somehow stopped wearing watches. In 2008, I got my first iPod touch and, in 2015, my first and only smartphone so far, an iPhone 6. I remember being happy about not having to rely on a hand watch to check the time. But these smart devices are capable of doing so much more than just check the time and, as it turns out, we end up heavily relying on them. A simple time check can turn into a sudden exposure to notifications prompting you to reply a message, watch a dumb meme, or simply reminding you of your next commitment. Useful but often distracting interactions.

This is why, a few months ago, I decided to go back to wearing the classic Japanese watch I used to wear as a kid—the Casio F-91W—to avoid relying so much on my iPhone to check the time, set my morning alarm, or use a stopwatch.

I could buy it on Amazon for 10,60 euros and have it on my hands in just a few days. A surprisingly cheap, comfortable, and lazy purchase that makes me undermine its monetary value.

Why am I telling you this? Because this unitasker has probably saved me hundreds or thousands of phone pickups, and lots of time-sinking moments mindlessly using my phone.

In an era of multitasking smartphones, purposefully relying on unitasking devices—that can only do one thing, really well—can help you better focus on whatever it is you want to do.

For instance, writing on a physical notebook or drawing on a sketchbook (instead of using one more app) are easy ways to escape the digital world to focus on the task at stake.

If you want to be more present, maybe finding the answer to What's the time? or being able to sketch or note something down outside of your smartphone may be a good strategy.

If there's something you do as well to temporarily escape the screen and better focus, reply to this email and tell me about it. I'd love to know how and why you do it. =)

Here's a sneak peek of Sisyphus.

Watch the Trailer.

How can we use our design skills for good? Nate Peters, who specialized in design technology at the Harvard Graduate School of Design, believes we can make open tools that others cherish, enjoy, and benefit from.

Enjoy this episode on using design for good, Nate's take (and paranoia) on what's coming with artificial intelligence and machine learning, his take on creativity, work & life, and much more.

Listen to "Nate Peters — Design for Good"

Psst! And, for the first time, you can read a full transcript of this episode.

On the early morning of Sunday, April 7, 2019, Mom and I started a new sketchbook in London.

Each sketchbook is unique. A set of pages bound to a specific time of your life, usually loaded with memories of where you brought it and when you sketched what's in there. A precious and irreplaceable object.

Many times—and I've heard others say the same—I'm more afraid of loosing my laptop or my phone than I am of loosing my sketches. I do a good job backing my stuff up to the cloud, religiously scanning and editing my drawings, but the digital experience isn't quite the same. Feeling the texture of the paper with your fingers, examining the different color shades, and browsing through the pages with your hands make holding this hand-crafted artifacts a joy.

It was between April 7 and July 10, 2019 (a span of ninety four days) when I sprinted through my first 60-page, A4, landscape Moleskine sketchbook, and I'm about to finish the second one.

That Sunday morning of April, Mom and I were sitting in the Wellcome Gallery at the British Museum with our brand new sketchbook, portraying our stolen friend, whom you might already know from the first little story that kick-started this whole thing.

Ever since, we carry this sketchbooks wherever we go, capturing our own journeys as our paths move away and come closer together.

"In the United States, food waste is estimated at thirty to forty percent of the food supply." ¹ That's a lot.

A vast amount of goods are produced, packaged, and shipped all around the world for us to buy and consume locally. No matter how far and no matter the time of the year, you can probably get it, and a big chunk ends up being trashed without ever being used—how could we live without kiwis, right?

Individual decisions—say, finding the nearest trash can (as opposed to dropping something on the floor) or re-using a plastic bag (instead of heading to the supermarket empty-handed)—are on you. This is what I do.

Larger decisions—whether to ban plastic bags or how much carbon dioxide emissions are too much—are on your community, your city, your country, or even the world as a whole. This is how we do.

I'm skeptic of the effectiveness of our decisions as consumers. We're at the end of a big chain of decisions and have been fooled into thinking we can change the world. Yes, "the people who are crazy enough to think they can change the world [might be] the ones who do,"² but that requires involvement in large organizations as well, not a personal behavioral change. Bring your own bag dot com, for instance, proudly claims to have saved 12,500,000,000 plastic bags from landfill waste. They seem to have convinced millions of people and businesses to use their earth-friendly bags.

Even thought governments and large corporations determine what (and how) gets produced and where it's exported for its consumption, our decisions as individuals end up determining what companies want to sell and produce as well. The new trends we adopt as consumers seem to reinforce the kinds of goods that get produced to make a sale. Take, for instance, veganism. A global phenomena spreading quickly, I believe, thanks to the choice of organizations and so-called influencers to promote it as a positive movement for the planet that, if adopted wisely, can be a healthy habit for yourself as well.³ As a result of individual adoption vegan restaurants are spreading, and new companies are solely focusing on producing vegan food.

As much as I can, I'll keep bringing my own bags to do groceries, but I'm not completely sure about the effects of such smalls acts at a time in which thousands of small rubber ducks ship daily from Asia to every single corner in the world.

So happy to announce that our short film — Sisyphus, directed by Dani Natoli — has been selected by the Seville European Film Festival and will be screening on November 14, 2019.

Glad to be sharing with you soon some news about a new audiovisual experiment for Getting Simple I’ve been working on with Daniel Natoli—of Peripheria Films—over the last year, titled Sisyphus.

I like to re-visit how nervous or stressed or calm or impatient or curious or mistaken I was before a given event was about to happen. Maybe, I was nervous about meeting someone for the first time or interviewing a podcast guest. Maybe, I felt the struggle of doing something hard when I wasn't used to it, something that today come naturally to me today. Maybe, I was holding thoughts or opinions that turned out to be completely wrong afterwards.

Our mind is skilled at altering memories and experiences from the past. I find it rewarding to mull over journaling notes, from weeks, months, or even years ago, to encounter thoughts I couldn't recall anymore, simply because I managed to capture them on time.

I love Laura Vanderkam's suggestion to be grateful every week at least for a few minutes. "Things that were once uncertain seem, in retrospect, to be inevitable. You can choose, however, to rekindle some of the joy you felt after winning that promotion or landing that record deal. Simply remind yourself of where you once were, and where you are now, and the gulf between them that’s as wide as the ocean blue."¹

A talk about machine learning, design, and creativity, at University of Arts Berlin on September 21, 2019, during the Fresh Eyes workshop at the Design Modelling Symposium conference.

Links

• Runway
• Suggestive Drawing
• Pix2Pix
• Project Refinery

People mentioned

• Cristóbal Valenzuela
• Daniel Shiffman
• Gene Kogan
• Kyle Steinfeld
• Matt Turlock
• Adam Menges
• Kat Park
• Samantha Walker
• Phillip Isola
• Christopher Hesse
• Lourdes Alonso Carrión
• Kevin Kelly

You are, once again, in that long line at the airport to get your boarding passes and drop your bag. Your luggage includes three items—a check-in suitcase, a carry-on, and a small backpack, maybe a purse—and now you're next in line. (To be honest, a little nervous.) Your bag is over the 23 kg limit, and it's your turn. Passport in hand, you go to the counter and are prompted to place your suitcase on the weight. The machine reads 24.5 kilos. Overweight! You think to yourself. It's all fine—the lady smiles—wrapping a tag around your suitcase's handle and sending it in through the conveyor belt. Here are your boarding passes. Have a safe flight!

If you want to add the cs files from one Visual Studio solution (or project) into another, without duplicating the cs files or moving them over, you can simply use the Add > Existing file.. option, making sure that instead of selecting the files and clicking Add (which would copy the files over to your project folder duplicating them) you click on the small arrow and click Add As Link. The files will be linked to your project as a reference to the other project, and editing them will change their code for both Visual Studio projects.

The short answer is that you can't. But there's a workaround.

Let's say you have a newsletter design as follows, which shows the post image, followed by its title and full content.

*|RSSITEM:IMAGE|*

*|RSSITEM:TITLE|*

*|RSSITEM:CONTENT_FULL|*

The *|RSSITEM:IMAGE|* RSS merge tag will pull in the image and assign to the the created img element the width and height corresponding to the original size of the image. Something like this (which is an example extracted from my Mailchimp campaign using the design template above).

<img class="mc-rss-item-img" src="https://nono.ma/img/u/sketch-170202_cambridge-clary-st.jpg" height="1868" width="2500" style="height: 1868;width: 2500;">

The problem is that we don't want to explicitly specify the height and width values of our image, as its oversized compared to the width of our design, which in my example was 600px plus margins, which was leaving 564px for the width of the image itself.

Here's the workaround: You create the image's img HTML element yourself, formatting it as you want, and use the RSSITEM:ENCLOSURE_URL—which according to Mailchimp "Displays the URL for the attached file [of your post]." In my case, the RSS feed is using the enclosure tag to send the image URL.

// RSS feed item enclosure tag
<enclosure url="https://nono.ma/img/u/sketch-170202_cambridge-clary-st.jpg" type="image/jpeg"/>

Then I can use that URL in my Mailchimp design as follows (also adding the post's title and full content below the image).

<img src="*|RSSITEM:ENCLOSURE_URL|*" style="max-width: 100%">

*|RSSITEM:TITLE|*

*|RSSITEM:CONTENT_FULL|*

It snowed two days ago, the snow melted yesterday, and Cambridge is sunny today. With clear skies, temperatures go low.

I had been learning Go programming all day and needed a break. My first thought was to go for a walk or sketch outside, but I didn't really felt like going outside in such cold weather, so I decided to draw the same house my mom had sketched six months before from my window. I didn't notice the amount of cables until I sketched them.

I wrote those words the morning of February 2, 2017, right before sketching this view from my desk. A year and a half before, in August 2015, I would arrive to our shared student apartment in 8 Clary St, Cambridge, Massachusetts.

My room was a spacious studio originally meant to be our living room, one of the most special places I've lived in that became my home for the three winters to come. I probably spent thousands of hours meditating and starring out of my bow window, talking on the phone and working at my desk—a two-and-a-half-meter-long kitchen top from IKEA, finished in beech, sitting over two black table legs.

Looking out the window, I've seen my girlfriend, family, and friends—including roommates and podcast guests—get home; my bike locked to street signs; random passersby walking along Prospect St; and the white snow cover the streets in winter.

I captured my room and a few other spaces in Cambridge the months preceding my departure in the form of 360-degree virtual reality panoramas that I revisit from time to time using a simple Google cardboard set. I keep surprising myself with the power of these virtual reality scenes—which include sound and imagery—to bring me back to Cambridge. If only for a second, I'm fooled into thinking I'm still there; biking from Clary street to Harvard and then to MIT, commuting to Boston Seaport, or simply hanging out with friends for dinner. Sweet memories.

I'm not sure how many times I looked out that window, but looking at these sketches sparks joy.

In 2011, I found this blue hat in a thrift store in Raleigh, North Carolina. Looks good! I thought to myself while trying it out in front of a mirror—I bought it for seven dollars.

Even though I remember owning (and wearing) hats when young, I was not a big fan of hats during my teenage years, probably, because I had short hair and I don't like to wear hats when my hair is too short. It wasn't until I started letting my curls grow—and found this blue hat—that I started wearing them.

"Tri State Tank West, Inc. Sacramento, CA," reads the cap. It's a Calhead style #92 made out of cotton and polyester in Taiwan by California Headwear (Calhead), 661 Rio St. Los Angeles, California, 90023.¹

I searched the internet for references to California Headwear and their style 92 and found similar hats, also from Calhead, sold as vintage hats on sites like eBay. Air Space America 88, Jack Daniels, Iowa Rose Bowl 1991, Ross for boss 1992, Chip, Dole Hawaii. Then, googling Tri-State Tank West, I found two hats of the same exact design but different color—red and white—on sale on eBay, listed as Vintage Tri State Tank West Sacramento California Baseball Hat Red Snapback Cap. Their price? $41.41 and $51.97.

Ever since I bought it, this has been my hat. I've wore it on sunny and cloudy days, not only while living in Raleigh but on trips around the world, including Australia, London, Spain, Greece, Cambridge, and many, many other places. (I also wore it in this short film recorded in the desert of Almería.)

Now, I have it here with me in San Francisco, California. After eight years, it's getting old. So it might about time to get a new one.

What does it take for a complex idea to develop? Ingenious ideas are often attributed to an inventive hunch, a sudden spark in someone's mind—think of Newton's apple—yet they commonly grow over the course of several years, if not decades.

Please enjoy this episode with Andrew Witt on the power of ruminating ideas, understanding complex problems, curating signals, geometric simplicity, introspective automation, and finding time for reflection.

Listen to "Andrew Witt — Letting Ideas Grow"

Russ Chauvenet was a chess champion and one of the founders of science fiction fandom. In October 1940, Russ himself coined the term fanzine in one of the issues of his fanzine publication titled Detours.¹

A zine is a self-published work of text and images to distribute original or appropriated content. In December 2018, I bought a monochrome, two-sided, A4 laser printer and a long arm stapler to produce A5 zines in-house.² You can print on regular paper or, as I'm in love with, on recycled 80-grams paper, which makes zines look like a paperback publication with the right typeface and layout.

Thousands of years ago—well before the invention of the printing press—civilizations used stamps and presses to reproduce documents. Today, home printers, copy machines, and publishing software are widely available.¹

I print my writing drafts to review and edit away from the screen. The experience is closer to reading a physical book than to that of reading an article online. Gifting a physical booklet is a great way to share my writing instead of sending a digital version to somebody's busy inbox.³

I've been living in a small apartment in downtown Málaga for the past seven months. Two people producing one or two bags of trash per week—mainly food packaging and spoiled items—bringing them to a nearby dumpster and starting over again.

In May 15, 2019, two Limasa trucks were collecting trash at La Plaza de la Merced. The small vehicle brooms and sucks the garbage that people mindlessly drop on the floor and accumulates trash from street sweepers as well. While I was sketching, this little truck moved from right to left to release all of its trash into the bigger one, which also collects trash from street containers.

It's become part of our daily lives. Trash cans, street sweepers, and a variety of vehicles keeping the streets clean for us and bringing our waste to landfills. We rarely stop and ask ourselves whether we should produce less trash and how to do it.

Could our individual decisions make a change or do decisions need to be made by the cities and entities who supply us with goods? I'm a bit skeptical of the real impact our individual decisions as consumers have, but that's a story for another day.

As a security mechanism, Windows natively lets you unzip files by right-clicking and choosing Extract All.. Well, you can skip the manual unblocking of the files by using 7-Zip to extract the files instead of Windows’ mechanism.

We want to get rid of a message you might have seen over and over when downloading files from the internet. "This file came from another computer and might be blocked to help protect this computer," next to an Unblock button. If you know about this, it's fine to unblock a couple files, but it's really annoying when you download a zip containing dozens of files which you have to unblock individually, one by one.

Download and install 7-Zip and unzip downloaded plugins with right-click > 7-Zip > Extract here, or any of the other extraction options.

This issue has given me a lot of headaches when installing both Dynamo and Grasshopper plugins, but you might run into this issue in other environments as well. I'm glad there's an alternative to unlocking each file--might it be DLL, gha, gh, dyn, PDF, exe or files in another formats--separately, unzipping a group of files, all unlocked, at once.

By default NPM—the Node Package Manager—uses its own public registry (at https://registry.npmjs.org) to pull down packages when you run npm install or npm update inside of a project.

You can specify different registries at multiple levels or scopes to override these default value (and other configuration settings). Ideally, when working on projects that require a specific registry—due to security or maybe just because some packages are inside of a private repository—you would set NPM to look for packages on that registry inside of the project folder.

Command level (only affects the command itself)

npm install --registry=https://some.registry.url

Project level (these would be the contents of the .npmrc file inside of the project folder)

registry=https://some.registry.url
@namespace:registry=https://some.other.registry.url

Global (these would be the contents of the .npmrc file inside of your system user folder)

registry=https://some.registry.url
@namespace:registry=https://some.other.registry.url

How to check your configuration is working

Run the npm config list command to see what variables are set. If you run this in a project folder with an .npmrc file you should see its overriding configuration settings in the folder, and the system global settings after that.

If you run the command in any other folder (without an .npmrc file with custom settings) you should see whatever is set in the global .npmrc and then the default configuration values of NPM.

A cheat-sheet for mathematical notation in [JavaScript] code form.

If you squint, people's faces start looking more and more alike, until they're all just blobs.

That's a simple way to abstract a drawing.

As a short-sighted person, this happens to me all the time, objects blur more and more the farther away they are. And I might be fooling myself, but I'm still at the edge of not needing to wear glasses on my day to day. I just use them while driving, watching movies, or attending to a presentation.

Sketches of people wandering around the streets make some of the most attractive pages in my sketchbook—people stare at them, probably completing the missing parts in their minds, as the sketches are made out of rough strokes without much detail.

What's calling people's attention? I believe it's the cheerleader effect, also known as the group attractiveness effect.¹ According to the research carried out in 2013 and 2015, the effect is the cognitive bias which makes us think that individuals are more attractive when they are in a group.

I don't think any of those individual sketches of people are perfect or specially attractive on their own but being part of a page seems to make them more attractive. The pattern—not its individual elements—is easier to like.

What do you think?

Today I've automated the backup of the configuration, database, and static files of all the websites I manage. Two hours and a half that will save me a lot of time in the coming future, and remove stress when weird things happen. The backup—of six websites in three different servers running Laravel—downloads a copy of the database, the .env files, and the static files (a zip with the contents of the public folder) of each site.

I'll probably open source these scripts in the near future.

One new thing I learned was creating bash functions, like this one.

# create a variable with current date, formatted as yymmdd_HHMMSS
DATE_NOW=$(date '+%y%m%d_%H%M%S') 

# function that zips something and removes it
zip_and_remove() { cd $1 && zip "$2.zip" $2 && rm $2 && cd .. }

# function that downloads a file via ssh then calls the previous one
download_zip_remove() { scp $1 $2/$3 && zip_and_remove $2 $3  }

# a function call
download_zip_remove root@192.168.1.2:/var/www/site.com/folio/.env $DESTINATION $(echo $DATE_NOW)_$SITENAME.env

Revit allows you to import PDF and image files from its Ribbon menu. After clicking either button (Import PDF or Import Image) you get the same window, really, just with a different extension pre-selected.

You import a file and place it into a view, and if the file happens to be a PDF file you select a page and a rasterization resolution (in DPI).

Internally, Revit uses the PDFNet library made by PDFTron to manipulate PDF files. One of the operations it seems to use it for is to rasterize the contents of a PDF to be able to display it on a view. This process makes the image data (of the image itself or a rasterized PDF) available inside of Revit. By using the Revit Lookup add-in, I found that the ImageType class offers a GetImage() method which returns a Bitmap object containing that image data.

Remember that, when you pick an existing imported image or PDF, you are selecting what's called an object of the ImageInstance class, which wraps an ImageType object. So we need to get the ImageInstance element, access its ImageType, then get its image data.

Let's see the code.

// This code goes somewhere in your Revit add-in
// Prompt user to pick a Revit Element
Reference pickedObject = UIDoc.Selection.PickObject(Autodesk.Revit.UI.Selection.ObjectType.Element);

// Get Element
Element element = Doc.GetElement(pickedObject.ElementId);

// Get Element Type
ElementId elementTypeId = element.GetTypeId();
ElementType elementType = Doc.GetElement(elementTypeId) as ElementType;

// Do something if object selection exists
if (pickedObject != null)
{
    // Check if picked element is an ImageInstance
    if (element is ImageInstance)
    {
        // Cast types for ImageInstance and ImageType
        // ImageType Id = ImageInstance Id - 1
        ImageInstance image = element as ImageInstance;
        ImageType imageType = elementType as ImageType;

        // Get image properties
        var filename = image.Name; // eg. FloorPlan.pdf

        // Get imported file path from ImageType
        var filepath = imageType.get_Parameter(BuiltInParameter.RASTER_SYMBOL_FILENAME).AsString();
        var pixelWidth = imageType.get_Parameter(BuiltInParameter.RASTER_SYMBOL_PIXELWIDTH).AsInteger();
        var pixelHeight = imageType.get_Parameter(BuiltInParameter.RASTER_SYMBOL_PIXELHEIGHT).AsInteger();

        // Get image data
        Bitmap bitmap = imageType.GetImage();

        // Save image to disk
        bitmap.Save(@"C:\users\username\Desktop\image.bmp");
    }
}

Before you go

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

If you are inside of a function which uses a type parameter—T—you can do a Console.WriteLine, for instance, to inspect what type is being used on a given function call.

Console.WriteLine(typeof(T));
// System.object or other type

Is there a drawing competition? Are you an architecture student? Why are you all sketching around here? Why are you doing this?

People stop by to ask what and why we're sketching, and sometimes to simply watch us doing our thing. They first look at you and your drawing, then they look at what's in front of you, wondering what is so important as to deserve being sketched.

Why are you doing this? It's a relaxing, joyful, and rewarding experience. A meditative moment in which your week finally slows down. There's no need to think about anything else: Just pay attention to what's in front of you and render it in your page.

After deliberating what to draw, the beginning of a sketch—the blank page—can indeed be stressful. Why, then, would you put yourself in such a situation? Well, you start loving the challenge, a challenge that requires your effort and concentration and pushes you to get a tiny bit better every day. Once the drawing is laid out on the page you can continue adding detail and shading and coloring mindlessly, without too much thinking, and feeling a rewarding sense of joy as your sketch gets closer and closer to a finished drawing.

Is there a drawing competition? Not really.

Are you an architecture student? This is a funny one that I'll try to cover in a future post.

Why are you all sketching around here? Frequently, it's just me by myself (or with Mom). But we also meet with the Urban Sketchers group from time to time to sketch a specific place or building altogether.

I'm truthful to the Urban Sketchers manifesto: sketching on location and capturing what I see from direct observation, using my drawings as a story-telling medium.

As soon as I stopped by his butcher stand, Pedro hooked me.

Just one minute away from home, I was wondering around Atarazanas Market on a Monday morning for a quick disconnection from the screen when I discovered Pedro & Isa's modest butcher shop at stall 166–167.

As I stared at their home-made burgers, Pedro offered to prepare whatever burger mix and weight I wanted.

I ended up buying three two-hundred-gram burgers: Chicken with spinach; beef with goose foie; and beef cheek with onion. They tasted awesome. As I handed Pedro 6.50 euros, he mesmerized me with his kind marketing copy: You call us. You choose what, how, when, and how much you want. And I prepare it for you. I do this for restaurants all the time. A fully customized service just one minute away from home.

As every other Monday, the odds were in Pedro's favor. All fish stands close on Mondays, so you either buy fruit, vegetables, or meat. But no fish. And this is probably why I paid attention to his burgers that morning.

On top of being an author and entrepreneur, Scott Young is an ultralearner. After learning MIT's 4-year computer science curriculum in less than twelve months, Scott taught himself four new languages in a year.

In his book Ultralearning—released today—Scott shares the principles and methods that he and other ultralearners employ to quickly master new skills, acquire knowledge, and become good at things that seem impossible to you right now.

Listen to "Scott Young — Ultralearning, How to Master Hard Skills, Outsmart the Competition, and Accelerate Your Career"

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, "·····");

console.log(replacedString);
// 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.

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
    window.console.log(imagesAsBase64);

});

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
    window.console.log(imagesAsBase64);

});

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.