Tag Archives: first

The Nomadic Designer: Tips And Tricks To Work On The Road

Have you ever wondered what it would be like to travel the world while working as a designer? It might sound like a dream, but all that glitters is not gold, and it might not be the right choice for you. In this article, I’ll share some insights from my four years of travel and work that hopefully will be useful for anyone willing to try a nomadic lifestyle, too.

When I wrote the first draft of this article, I was in London, after a long trip to Asia. Now, I’m making changes to it in Mexico, before going to Argentina to visit my family. Changing countries often has become an important part of my life as a designer; and, curiously, it all happened by accident.

I once heard that, while at the office, you should stand up from your desk, stretch your legs, leave the building and never come back. That’s exactly what I did when I was living in Barcelona in March 2014. At the time, I was working for a big company on a project that I didn’t enjoy, and was participating in meetings with people I didn’t know. Sounds like fun, doesn’t it?

Looking back, I see that quitting a stable job to jump into the void of a traveling life was one of the scariest moments of my life. I was going to start a trip to South America, doing design workshops and lectures that would provide me with income to sustain my journey — but in reality, I had no idea what I was doing. Without knowing it, I was becoming a nomadic designer.

doing a lecture

Doing lectures and workshops around the world — and meeting new people because of it — is one of the things I’ve liked most about moving so much. Location: Barcelona.

When that six-month trip ended and I went back to Barcelona, I was never able to settle again. So, what did I do? Of course, I kept traveling! Four years and 60 countries later, I’m still on it.

And I am not alone. I’d like to quote Vitaly Friedman (founder and long-time editor in chief of Smashing Magazine), who once said:

“There is nothing more liberating and sentimental than the sound of a closing door that you will never open again. As memories are flowing by, you turn your back from that door, you hold your breath for just a second and you walk away. At that point you almost sense the change in the wind flowing by. You let go; and knowing and feeling this change is an incredibly empowering, intoxicating experience.”

If this sounds appealing, and you would like to try it for yourself, I hope my article will help you get started. Please note, however, that I’m not going to give you a “how to” guide, with step-by-step instructions that will work for everyone. Instead, I’ll share some insights from my personal experience.

Whatever People Think It Is, It Is Not That

When I tell someone that I’m constantly traveling, usually the person looks amazed. Most of the time, their first question is, “How can you afford to live like that?” I sometimes joke, saying I’m a millionaire with plenty of free time, but it’s not only because of this that I suspect they get the wrong idea about “working and traveling.” Perhaps, some of them imagine plenty of beaches and a lot of comfort and freedom.

Well, guess what? Working from a beach is not that fun or convenient. Or, as Preston Lee puts it, “Freelancing is not sitting on the beach, sipping margaritas, and reading books by Tim Ferriss.”

places to work

I’ve worked in all kind of places: public libraries, hostels, friends’ houses (and, of course, some of them had cats). Can you spot a beach in any of these photos?

But the part about having a lot of freedom is true. I do have a lot of freedom and flexibility — like any other freelancer — with the bonus that I get to know different places, people, cultures and cuisines. The perks of such a lifestyle outweigh the difficulties, but at the same time, not everyone would be willing to handle it.

Today, the “digital nomad” hype is all around, with a lot of people publishing e-books, videos and blog posts selling an ideal lifestyle that’s apparently perfect. Of course, some things are often left out — things like getting tired of packing again and again, being away from family and friends, and starting over often. That’s why people might have a unrealistic idea of what all this is about.

In case you are considering trying something similar, it might help to be aware of some personal characteristics that would be helpful to have.

Comfort With Being Alone

Being a solo traveler allows me to make my own decisions and be wherever I want, whenever I want. I spend a lot of time by myself (luckily, I get along well with myself). Even though it’s fine for me, I know it’s not for everybody. Loneliness is easy to solve, though. Coworking spaces, hostels, couchsurfing hangouts and Meetup are great places when you feel like you need some company and want to meet new friends.

Being Able To Adapt To New Contexts Easily

On a rough average, I move from one place to another every four days. This is very tiring, because every time I switch cities, I have to repeat the same process: book transportation and accommodation, pack my stuff, figure out how to get around, check the weather and find out about the cost of living. Ideally, you won’t be moving that often, but you should be able to grab your things quickly and move to a new place that better meets your expectations.


In my travels, I’ve taken more flights than I would like to admit. That’s a problem when moving so much from one place to another. Location: São Paulo, Brazil.

In some cases, you could plan to stay three or four months in the same spot, but the reality is that you will never know how you’ll feel until you get there. So, my advice is: Go little by little, especially at the beginning.

Flexible But Organized

I think I’ve never been as organized as I’ve been since I started traveling. Apart from the tools that I normally use to generate invoices, track payments and manage projects as a freelance designer, I also have several spreadsheets to organize my flights, accommodation and daily expenses.

The spreadsheet for expenses is divided into different categories and organized by day. I put in there all the money that goes out, so that I know exactly what’s happening, and how close I am to reaching my daily budget. I know there are some apps for this, but so far I haven’t felt comfortable with any of them. The key here is not to cheat (just write down everything) and to be consistent (do it every day) — this will give you good insight into how you are spending your money on the road. Then, it will be easier for you to make decisions based on the data gathered — for example, you could stop buying expensive cocktails so much.

Before Packing: Find A Remote-Friendly Job

If you’ve decided to give it a try, then, as a minimum, plan your start, and don’t leave home without at least one or two months of contracted work. This will keep you busy for the first part of your trip, so you’ll only have to worry about settling in a new place.

When I went to South America at the very beginning of my new life, I contacted several design organizations, schools and agencies that could help me organize design workshops and lectures in different countries. I did this because, a few months before leaving, I, along with a friend (¡hola José!) self-published a book that gained some popularity among designers in Latin America, and I was willing to teach its contents and show how to put them into practice. Doing things like that provided me with at least some idea of dates and an approximate income, while leaving other things to improvisation.

In my case, I’ve always liked being a freelancer, so I give myself a bit more flexibility in managing my schedule. One of the last projects I worked on was for a team in Barcelona and in which the words “remote” and “freelance” were clear in our agreement from the very beginning. This is what allowed me to keep going from country to country, splitting my time between work and getting to know new places and people.

Just so you know how “glamorous” this way of working is, at the beginning of this project I tried to hide my background during video calls or said that I couldn’t turn video on, because I was a bit embarrassed. By the end, though, my teammates didn’t care about that, and so later on, usually the first question of a video call was to ask me for a tour of the place I was staying at, to everyone’s amusement.

Of course, freelancing is not the only way. Working at a remote-friendly company could also be a good option for you. While you’ll lose some of the freedom to move around, if you plan to stay longer in places, then this could be the way to go: Hubspot, Basecamp, Bohemian Coding (of Sketch fame) and Automattic are some examples of companies that successfully work with designers and developers remotely, and there are many more.

A few websites list remote positions for design, so be sure to check them often: We Work Remotely, Remote OK, Working Nomads and Designer News — to name just some of them.

Regardless of whether you are freelancing or working for someone else, I have to say that face to face contact with members of your team is necessary from time to time to time, especially when planning meetings at the beginning of a project, when things are not all that clear. This will partly determine the location you choose, so best to pick a place that allows you to conveniently go where your team is based when needed.

Choosing Your Next Destination

After finding work that allows you to be on the move, the next big thing is to decide where to base yourself. The good thing is that you can work from any place with a decent Internet connection and easy access to coffee (which is essential).

wi-fi sign

I always say that, to work, I need only an Internet connection and a laptop. So, this place at almost 5,000 meters up is a good place to get stuff done. Location: somewhere near Uyuni, Bolivia.

So far, I’ve been in 60 countries, more or less. Many of them were in Europe, where it is easy to move from one place to another and where you can sometimes cross countries without even noticing. (True story: I once missed a whole country because I fell asleep on the train.)

When choosing where to go next, keep in mind the following.

Reliable Access To Internet

You’ll never know how good the Internet connection is until you get there, but at least you can research which countries have the best and worst. This is important. Even if you’re tempted to spend a few days in the middle of a forest, if there is no access to Internet, it will probably be a no-go.

Time Zones

Choose a place where you’ll be in the same time zone with the rest of your team, or maybe a couple of hours ahead or behind. You’ll thank me when you have to schedule your first online meeting and it’s not 4:00 am.

Work Facilities

I’ve said that I can work from almost anywhere, but I have to make sure that my next destination at least has some good coffee shops, libraries or coworking spaces. You could also work from your hostel, hotel or rented flat, but then you’d have to make sure it’s a proper environment to work in.

Design Ecosystem

It’s always good to be surrounded by like-minded people, so many times before going somewhere, I’ll check whether there’s a designer, a design studio or a meetup where I could visit and get in touch with others. Luckily, some people are always willing to meet new pals, and they’ll give you good insight into how the local design community works. You can exchange and share tools of the trade, and you can make new friends as well.


Sometimes I don’t choose my destinations right… at least for getting some work done. Being in the middle of snowy places forced me to take unplanned vacations. Location: Mongolia.

In my case, sending some emails in advance enabled me to meet such talented people as Michael Flarup in Copenhagen and Sacha Greif in Osaka. Just don’t be afraid to ask if you can drop by for a short visit!

Besides that, other factors are at play when you’re deciding where to go: affordability, transportation, safety, weather, etc. Fortunately, Nomad List rounds up the “best” cities,, which you can use as a reference when choosing where to head to next.

Of course, sooner or later, you’ll make some mistake. I’ve learned the hard way that planning where to work is indeed important. I once had to take a few unintended days off when I took the Trans-Siberian train to go from St. Petersburg to Beijing via Mongolia. At some point, the temperatures in the middle of Siberia were so low — the worst day was -50º Celsius — that my phones’ batteries suddenly drained — and being lost in the middle of a snowy small town is anything but fun. (The Russians there thought I was crazy for traveling during winter, and I now know they were right. But if you are like me and go there during wintertime anyway, always keep a paper copy of directions and important information, and bring warm boots and a pocket-sized bottle of vodka.)

Packing And Gear

If you already have a job and know where you are heading to, then you are ready to pack! Someone once said that before starting a trip, you should take half the things you plan to carry and double the money you have budgeted. While the last thing is not always an option, packing light is doable! You’ll thank me when you find your accommodation is uphill.

I started traveling with a 50-liter backpack for my personal things, and a smaller one for work-related items that I carry separately. After some time, I switched the smaller one for a daypack that I can roll up and put into the big one when I don’t need it. Everything (including the laptop) weighs 10 kilograms or so, but I keep assessing what else can I take off in order to have fewer things to carry. Similarly to when working on a design, try to get rid of the unnecessary.

For my work, I chose a MacBook Air because I knew I was going to travel a lot, and I wanted something lightweight and compact. Even though it’s a bit old now, it’s been enough for my requirements so far. I also carry two phones (iPhone and Android, with their corresponding chargers) because I do a lot of UX design for mobile and I often need to test on different devices.

I do have more gadgets and stuff, of course. I carry a remote to control my slides (for conferences and workshops), all kinds of adaptors, and noise-cancelling headphones (very useful for when you travel by train or plane.) But, in general, it is a good idea not to over-buy in advance, and pick up items only when you need them.

Where To Work

I have worked in all kinds of places: buses, trains, coffee shops, airport lounges, libraries, shared rooms in hostels, private rooms in hotels — sometimes anywhere I can set my laptop horizontally… or kind of. I’ve even gotten used to not using a mouse at all, because there is not always a place to put it next to my laptop.

Chances are the room where you stay is also going to be where you will work, so choose carefully. Airbnb is now pretty much widespread, so renting your own room with a desk should be enough — but be sure to mark “laptop friendly” in the search filters.

I try to keep a low budget, so most of the time I stay in a hostel. After a bit of training, I’ve learned to identify places that look better for work — like ones with spacious common areas — just by looking at the pictures. Of course, “party hostels” are not an option if you want to get work done, so if you see a lot of people having fun on the property’s website, that’s a red flag.

hostel room

I sleep in shared dorms in hostels most of the time, to keep my budget low and meet new people, but there’s not much privacy. Location: Sofia, Bulgaria.

One of the main problems is that you never know how good the Internet connection will be. So, if you have difficulty with the Wi-Fi at your hostel, go to a coffee shop, coworking space or even a public library. (Interestingly, public libraries are where I’m most productive, perhaps because of the silence and the fact that I cannot make calls or participate in online meetings.)

Tip: More than once, I’ve visited a coworking space and offered to give a free design lecture to members in exchange of a few days’ worth of using a desk. It’s also nice because afterwards people will know who you are and will approach you openly to share ideas! Feel free to try it yourself.

Finally, a couple of websites could be useful when you’re looking for a place to work — namely, Workfrom and Places to Work.

Things To Keep In Mind When Living On The Road

A few things are important for any traveling designer but are too complex to address completely in one article, so I’ll just briefly mention a few of them, in the hope that it will still be useful.

Please keep in mind that everybody’s situation is different. There’s no one-size-fits-all answer, so you might have to adapt the following to your case.


What is convenient for you will depend on your case, and it’s difficult to advise on what’s best, so be aware of the legislation of your home country and of the country where you plan to work. I’ve also been exploring the possibilities that Estonia is offering with its e-citizenship. I’m already an Estonian e-resident, but I haven’t done anything practical with this as of yet.

Managing Your Finances

Besides keeping spreadsheets for expenses, one thing that I discovered (perhaps too late) is that it is normally far more convenient to create an account in an app such as Monzo or Revolut (and there are plenty of others, like N26), so that, when making withdrawals, you pay fewer fees and get better exchange rates. This is especially useful in places where credit or debit cards are not normal; this way, you can also avoid the excessive fees that traditional banks often charge.

Also, check the exchange rate of your home currency before arriving at your next destination. In some cases, I’ve arrived in a new country and bought a very expensive coffee because I didn’t do my homework beforehand. One app I use to avoid situations like this is Currency, an elegant and simple currency converter.


The situation will depend on where you’re from and where you’re going, so check well in advance regarding the requirements for the passport you are holding.

Something useful I learned when applying for a visa that requires a tentative itinerary is to book hostels and planes that you can later on cancel for free, and print out and bring those booking confirmations.

Health And Insurance

Plenty of companies offer health insurance for travel, so I cannot recommend any one of them. The only thing I can advise is not to leave home without it. An accident in a foreign country, besides being annoying, could also be very expensive. So, prepare in advance.

car in a desert

You never know where you’ll be when there’s a problem at work, so try to find ways to stay connected on the go. Location: somewhere near Jericoacoara, Brazil.

Getting Connected

What I normally do is buy a prepaid SIM card in each country I stay, with a data plan that will be enough for my stay there. I do a bit of research beforehand to see which carrier has the most widespread coverage, and I check if there’s any information in English on their website to make recharges when necessary.

A SIM card is more necessary in some countries than in others. For example, in Russia, most open Wi-Fi networks require you to fill in a phone number, to which a validation code will be sent, before you are able to use the network. Japan, on the other hand, is full of convenience stores with free internet (such as 7-Eleven), so a SIM card is not so necessary. Meanwhile, Europe now has a more convenient way to handling roaming, called “Roam like at home”, and getting a new SIM card in every country is not so necessary anymore.

In any case, before buying a SIM card, make sure it will work across the country, especially if the country is large with many different regions.
Another important thing to check beforehand: Will your current phone number work in the new country? Luckily, there’s a website where you can check that information.

Preparing To Be Offline

Moving from one place to another involves a lot of time spent on the road, and in some cases you won’t have the chance to find Wi-Fi or good data network coverage. At these times, Spotify and Netflix are my best friends, because both allow me to download music and TV shows, respectively, so I can use them without an Internet connection. This was especially useful when I had to take several connecting trains to cross Siberia, spending in some cases around 30 hours straight in a railroad car before my next stop.

Seven Rila Lakes

I still had an Internet connection in these mountains in Bulgaria! However, being offline from time to time and enjoying the natural surroundings is really advisable. Location: Seven Rila Lakes region, Bulgaria.

For the same reason, I always download a map of my next destination, using Google Maps (Maps.me has the same functionality).

If you want more information of this kind, check out another article I wrote, with more travel hacks and tips from my years of traveling.

Final Thoughts

Before I board my next train, let me tell you that becoming a nomadic freelance designer is by far one of my best decisions of my life so far. I have the flexibility that any freelancer has, but I also meet new people and see new places all the time. And it’s not as expensive as you might think. If you control your budget, traveling could be cheaper than living in a big city. So, I can afford to work four to five hours every day, and I use the rest of the time to get to know the place I’m visiting, to work on personal projects and to write articles for Smashing Magazine.

Traveling also makes it a bit hard to separate pleasure from work, because everything seems more enjoyable when you’re moving around. I’ve had to remind myself sometimes that I’m not on a vacation and to focus on getting things done. After a while, though, I’ve found a good balance. Now, I allow myself some moments to just move around, travel and enjoy the ride, doing nothing. It’s not all about work, after all!

on a train

Taking a train in Siberia. It’s not all about work. You also have to let yourself go and enjoy your ride. Location: somewhere in Russia.

Living like this is sometimes challenging and tiring, but I find it much richer than being in an office Monday to Friday, 9:00 to 5:00. And with all of the current technology, it’s easy for any designer to embrace this lifestyle. The most difficult part is finding a job to sustain your travel, but once you’ve found it, the next part is just to let it flow.

The nomadic lifestyle is not right for everyone, but the only way to know for sure is to try. Neale Donald Walsch once said that life starts where your comfort zone ends, and I completely agree. If you can afford to take the risk, go for it and enjoy a part of life that might not last long but will give you a life-changing experience, teach you new things and change the way you see the world forever.

If, for some reason, it doesn’t work, you can always go back to your previous life, right? Whether you are ready to give it a try or still have some questions about it, feel free to let me know. I’ll do my best to help you out. See you on the road!

Further Reading

Smashing Editorial
(mb, ra, al, yk, il)


The Nomadic Designer: Tips And Tricks To Work On The Road

Getting Started With The Web MIDI API

As the web continues to evolve and new browser technologies continue to emerge, the line between native and web development becomes more and more blurred. New APIs are unlocking the ability to code entirely new categories of software in the browser.

Until recently, the ability to interact with digital musical instruments has been limited to native, desktop applications. The Web MIDI API is here to change that.

In this article, we’ll cover the basics of MIDI and the Web MIDI API to see how simple it can be to create a web app that responds to musical input using JavaScript.

What Is MIDI?

MIDI has been around for a long time but has only recently made its debut in the browser. MIDI (Musical Instrument Digital Interface) is a technical standard that was first published in 1983 and created the means for digital instruments, synthesizers, computers, and various audio devices to communicate with each other. MIDI messages relay musical and time-based information back and forth between devices.

A typical MIDI setup might consist of a digital piano keyboard which can send messages relaying information such as pitch, velocity (how loudly or softly a note is played), vibrato, volume, panning, modulation, and more to a sound synthesizer which converts that into audible sound. The keyboard could also send its signals to desktop music scoring software or a digital audio workstation (DAW) which could then convert the signals into written notation, save them as a sound file, and more.

MIDI is a fairly versatile protocol, too. In addition to playing and recording music, it has become a standard protocol in stage and theater applications, as well, where it is often used to relay cue information or control lighting equipment.

A performer plays a digital piano onstage

MIDI lets digital instruments, synthesizers, and software talk to each other and is frequently used in live shows and theatrical productions. Photo by Puk Khantho on Unsplash.

MIDI In The Browser

The WebMIDI API brings all the utility of MIDI to the browser with some pretty simple JavaScript. We only need to learn about a few new methods and objects.


First, there’s the navigator.requestMIDIAccess() method. It does exactly what it sounds like—it will request access to any MIDI devices (inputs or outputs) connected to your computer. You can confirm the browser supports the API by checking for the existence of this method.

if (navigator.requestMIDIAccess) 
    console.log('This browser supports WebMIDI!');
    console.log('WebMIDI is not supported in this browser.');

Second, there’s the MIDIAccess object which contains references to all available inputs (such as piano keyboards) and outputs (such as synthesizers). The requestMIDIAccess() method returns a promise, so we need to establish success and failure callbacks. And if the browser is successful in connecting to your MIDI devices, it will return a MIDIAccess object as an argument to the success callback.

    .then(onMIDISuccess, onMIDIFailure);

function onMIDISuccess(midiAccess) 

    var inputs = midi.inputs;
    var outputs = midi.outputs;

function onMIDIFailure() 
    console.log('Could not access your MIDI devices.');

Third, MIDI messages are conveyed back and forth between inputs and outputs with a MIDIMessageEvent object. These messages contain information about the MIDI event such as pitch, velocity (how softly or loudly a note is played), timing, and more. We can start collecting these messages by adding simple callback functions (listeners) to our inputs and outputs.

Going Deeper

Let’s dig in. To send MIDI messages from our MIDI devices to the browser, we’ll start by adding an onmidimessage listener to each input. This callback will be triggered whenever a message is sent by the input device, such as the press of a key on the piano.

We can loop through our inputs and assign the listener like this:

function onMIDISuccess(midiAccess) 
    for (var input of midiAccess.inputs.values())
        input.onmidimessage = getMIDIMessage;

function getMIDIMessage(midiMessage) 

The MIDIMessageEvent object we get back contains a lot of information, but what we’re most interested in is the data array. This array typically contains three values (e.g. [144, 72, 64]). The first value tells us what type of command was sent, the second is the note value, and the third is velocity. The command type could be either “note on,” “note off,” controller (such as pitch bend or piano pedal), or some other kind of system exclusive (“sysex”) event unique to that device/manufacturer.

For the purposes of this article, we’ll just focus on properly identifying “note on” and “note off” messages. Here are the basics:

  • A command value of 144 signifies a “note on” event, and 128 typically signifies a “note off” event.
  • Note values are on a range from 0–127, lowest to highest. For example, the lowest note on an 88-key piano has a value of 21, and the highest note is 108. A “middle C” is 60.
  • Velocity values are also given on a range from 0–127 (softest to loudest). The softest possible “note on” velocity is 1.
  • A velocity of 0 is sometimes used in conjunction with a command value of 144 (which typically represents “note on”) to indicate a “note off” message, so it’s helpful to check if the given velocity is 0 as an alternate way of interpreting a “note off” message.

Given this knowledge, we can expand our getMIDIMessage handler example above by intelligently parsing our MIDI messages coming from our inputs and passing them along to additional handler functions.

function getMIDIMessage(message) 
    var command = message.data[0];
    var note = message.data[1];
    var velocity = (message.data.length > 2) ? message.data[2] : 0; // a velocity value might not be included with a noteOff command

    switch (command) 
        case 144: // noteOn
            if (velocity > 0) 
                noteOn(note, velocity);
        case 128: // noteOff
        // we could easily expand this switch statement to cover other types of commands such as controllers or sysex

Browser Compatibility And Polyfill

As of the writing of this article, the Web MIDI API is only available natively in Chrome, Opera, and Android WebView.

Browser support for Web MIDI API from caniuse.com

The Web MIDI API is only available natively in Chrome, Opera, and Android WebView.

For all other browsers that don’t support it natively, Chris Wilson’s WebMIDIAPIShim library is a polyfill for the Web MIDI API, of which Chris is a co-author. Simply including the shim script on your page will enable everything we’ve covered so far.

<script src="WebMIDIAPI.min.js"></script>    
if (navigator.requestMIDIAccess)  //... returns true

This shim also requires Jazz-Soft.net’s Jazz-Plugin to work, unfortunately, which means it’s an OK option for developers who want the flexibility to work in multiple browsers, but an extra barrier to mainstream adoption. Hopefully, within time, other browsers will adopt the Web MIDI API natively.

Making Our Job Easier With WebMIDI.js

We’ve only really scratched the surface of what’s possible with the WebMIDI API. Adding support for additional functionality besides basic “note on” and “note off” messages starts to get much more complex.

If you’re looking for a great JavaScript library to radically simplify your code, check out WebMidi.js by Jean-Philippe Côté on Github. This library does a great job of abstracting all the parsing of MIDIAccess and MIDIMessageEvent objects and lets you listen for specific events and add or remove listeners in a much simpler way.

WebMidi.enable(function () 

    // Viewing available inputs and outputs

    // Retrieve an input by name, id or index
    var input = WebMidi.getInputByName("My Awesome Keyboard");
    // OR...
    // input = WebMidi.getInputById("1809568182");
    // input = WebMidi.inputs[0];

    // Listen for a 'note on' message on all channels
    input.addListener('noteon', 'all',
        function (e) 
            console.log("Received 'noteon' message (" + e.note.name + e.note.octave + ").");

    // Listen to pitch bend message on channel 3
    input.addListener('pitchbend', 3,
        function (e) 
            console.log("Received 'pitchbend' message.", e);

    // Listen to control change message on all channels
    input.addListener('controlchange', "all",
        function (e) 
            console.log("Received 'controlchange' message.", e);

    // Remove all listeners for 'noteoff' on all channels

    // Remove all listeners on the input


Real-World Scenario: Building A Breakout Room Controlled By A Piano Keyboard

A few months ago, my wife and I decided to build a “breakout room” experience in our house to entertain our friends and family. We wanted the game to include some kind of special effect to help elevate the experience. Unfortunately, neither of us have mad engineering skills, so building complex locks or special effects with magnets, lasers, or electrical wiring was outside the realm of our expertise. I do, however, know my way around the browser pretty well. And we have a digital piano.

Thus, an idea was born. We decided that the centerpiece of the game would be a series of passcode locks on a computer that players would have to “unlock” by playing certain note sequences on our piano, a la Willy Wonka.

This is a musical lock
This is a musical lock

Sound cool? Here’s how I did it.


We’ll begin by requesting WebMIDI access, identifying our keyboard, attaching the appropriate event listeners, and creating a few variables and functions to help us step through the various stages of the game.

// Variable which tell us what step of the game we're on. 
// We'll use this later when we parse noteOn/Off messages
var currentStep = 0;

// Request MIDI access
if (navigator.requestMIDIAccess) 
    console.log('This browser supports WebMIDI!');

    navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);

    console.log('WebMIDI is not supported in this browser.');

// Function to run when requestMIDIAccess is successful
function onMIDISuccess(midiAccess) 
    var inputs = midiAccess.inputs;
    var outputs = midiAccess.outputs;

    // Attach MIDI event "listeners" to each input
    for (var input of midiAccess.inputs.values()) 
        input.onmidimessage = getMIDIMessage;

// Function to run when requestMIDIAccess fails
function onMIDIFailure() 
    console.log('Error: Could not access MIDI devices.');

// Function to parse the MIDI messages we receive
// For this app, we're only concerned with the actual note value,
// but we can parse for other information, as well
function getMIDIMessage(message) 
    var command = message.data[0];
    var note = message.data[1];
    var velocity = (message.data.length > 2) ? message.data[2] : 0; // a velocity value might not be included with a noteOff command

    switch (command) 
        case 144: // note on
            if (velocity > 0) 
        case 128: // note off
        // we could easily expand this switch statement to cover other types of commands such as controllers or sysex

// Function to handle noteOn messages (ie. key is pressed)
// Think of this like an 'onkeydown' event
function noteOn(note) 

// Function to handle noteOff messages (ie. key is released)
// Think of this like an 'onkeyup' event
function noteOff(note) 

// This function will trigger certain animations and advance gameplay 
// when certain criterion are identified by the noteOn/noteOff listeners
// For instance, a lock is unlocked, the timer expires, etc.
function runSequence(sequence) 

Step 1: Press Any Key To Begin

To kick off the game, let’s have the players press any key to begin. This is an easy first step which will clue them into how the game works and also start a countdown timer.

function noteOn(note) 
        // If the game hasn't started yet.
        // The first noteOn message we get will run the first sequence
        case 0: 
            // Run our start up sequence

            // Increment the currentStep so this is only triggered once

function runSequence(sequence) 
        case 'gamestart':            
            // Now we'll start a countdown timer...
            // code to trigger animations, give a clue for the first lock

Step 2: Play The Correct Note Sequence

For the first lock, the players must play a particular sequence of notes in the right order. I’ve actually seen this done in a real breakout room, only it was with an acoustic upright piano rigged to a lock box. Let’s re-create the effect with MIDI.

For every “note on” message received, we’ll append the numeric note value to an array and then check to see if that array matches a predefined array of note values.

We’ll assume some clues in the breakout room have told the players which notes to play. For this example, it will be the beginning of the tune to “Amazing Grace” in the key of F major. That note sequence would look like this.

A visual representation of the first nine notes of “Amazing Grace” on a piano

This is the correct sequence of notes that we’ll be listening for as the solution to the first lock.

The MIDI note values in array form would be: [60, 65, 69, 65, 69, 67, 65, 62, 60].

var correctNoteSequence = [60, 65, 69, 65, 69, 67, 65, 62, 60]; // Amazing Grace in F
var activeNoteSequence = [];

function noteOn(note) 
        // ... (case 0)

        // The first lock - playing a correct sequence
        case 1:

            // when the array is the same length as the correct sequence, compare the two
            if (activeNoteSequence.length == correctNoteSequence.length) 
                var match = true;
                for (var index = 0; index < activeNoteSequence.length; index++) 
                    if (activeNoteSequence[index] != correctNoteSequence[index]) 
                        match = false;

                if (match) 
                    // Run the next sequence and increment the current step
                    // Clear the array and start over
                    activeNoteSequence = [];

function runSequence(sequence) 
        // ...

        case 'lock1':
            // code to trigger animations and give clue for the next lock

Step 3: Play The Correct Chord

The next lock requires the players to play a combination of notes at the same time. This is where our “note off” listener comes in. For every “note on” message received, we’ll add that note value to an array; for every “note off” message received, we’ll remove that note value from the array. Therefore, this array will reflect which notes are currently being pressed at any time. Then, it’s a matter of checking that array every time a note value is added to see if it matches a master array with the correct values.

For this clue, we’ll make the correct answer a C7 chord in root position starting on middle C. That looks like this.

A visual representation of a C7 chord on a piano

These are the four notes that we’ll be listening for as the solution to the second lock.

The correct MIDI note values for this chord are: [60, 64, 67, 70].

var correctChord = [60, 64, 67, 70]; // C7 chord starting on middle C
var activeChord = [];

function noteOn(note) 
        // ... (case 0, 1)

        case 2:
            // add the note to the active chord array

            // If the array is the same length as the correct chord, compare
            if (activeChord.length == correctChord.length) 
                var match = true;
                for (var index = 0; index < activeChord.length; index++) 
                    if (correctChord.indexOf(activeChord[index]) < 0) 
                        match = false;

                if (match) 

function noteOff(note) 
        case 2:
            // Remove the note value from the active chord array
            activeChord.splice(activeChord.indexOf(note), 1);

function runSequence(sequence) 
        // ...

        case 'lock2':
            // code to trigger animations, stop clock, end game


Now all that’s left to do is to add some additional UI elements and animations and we have ourselves a working game!

Here’s a video of the entire gameplay sequence from start to finish. This is running in Google Chrome. Also shown is a virtual MIDI keyboard to help visualize which notes are currently being played. For a normal breakout room scenario, this can run in full-screen mode and with no other inputs in the room (such as a mouse or computer keyboard) to prevent users from closing the window.

WebMIDI Breakout Game Demo (watch in Youtube)

If you don’t have a physical MIDI device laying around and you still want to try it out, there are a number of virtual MIDI keyboard apps out there that will let you use your computer keyboard as a musical input, such as VMPK. Also, if you’d like to further dissect everything that’s going on here, check out the complete prototype on CodePen.

See the Pen WebMIDI Breakout Room Demo by Peter Anglea (@peteranglea) on CodePen.


MIDI.org says that “Web MIDI has the potential to be one of the most disruptive music [technologies] in a long time, maybe as disruptive as MIDI was originally back in 1983.” That’s a tall order and some seriously high praise.

I hope this article and sample app has gotten you excited about the potential that this API has to spur the development of new and exciting kinds of browser-based music applications. In the coming years, hopefully, we’ll start to see more online music notation software, digital audio workstations, audio visualizers, instrument tutorials, and more.

If you want to read more about Web MIDI and its capabilities, I recommend the following:

And for further inspiration, here are some other examples of the Web MIDI API in action:

Smashing Editorial
(rb, ra, hj, il)

Read More:

Getting Started With The Web MIDI API

8 Reasons Your Traffic Is Increasing But Not Your Conversions

Traffic and conversions. That’s what we want. And we usually start at the beginning, with traffic. I agree. Traffic is great. Have you ever logged into Google Analytics on a Monday morning and found a huge traffic spike waiting for you? That’s a fantastic feeling. But unless you’re a 16-year-old YouTuber with a fame complex, you’re not actually interested in traffic. You want conversions. You want to see increases on your income report, not just your Analytics display. But hold up. Doesn’t more traffic equal more conversions? Well technically, yes. I’m assuming your conversion funnel is good enough that a 30,000 increase in visitors…

The post 8 Reasons Your Traffic Is Increasing But Not Your Conversions appeared first on The Daily Egg.


8 Reasons Your Traffic Is Increasing But Not Your Conversions

Monthly Web Development Update 2/2018: The Grown-Up Web, Branding Details, And Browser Fast Forward

Every profession is a wide field where many people find their very own, custom niches. So are design and web development today. I started building my first website with framesets and HTML4.0, images and a super limited set of CSS, and — oh so fancy — GIFs and inline JavaScript (remember the onclick=”” attribute?) about one and a half decades ago. It took me four days to learn the initial, necessary skills for that.

Original article:

Monthly Web Development Update 2/2018: The Grown-Up Web, Branding Details, And Browser Fast Forward

Designing For User Interfaces: Icons As Visual Elements For Screen Design

(This is a sponsored article.) Icons are everywhere. They have been around for a long time, and it’s difficult to imagine a world without icons or symbols today. Only designers will know how much effort and time is needed to not only make them helpful but also simple and expressive.
What makes icons particularly special is perhaps the fact that their meaning can be understood without having to add any text or further details.

More here: 

Designing For User Interfaces: Icons As Visual Elements For Screen Design

Learning Framer By Creating A Mobile App Prototype

The time of static user interfaces is long gone. Designing interactive prototypes is the best approach to expressing your ideas and explaining them to clients and stakeholders. Or, as Jerry Cao of UXPin puts it: “Nothing brings you closer to the functionality of the final product than prototyping. It is the prototype that brings to life the experience behind user experience.”
Prototyping is an important part of the modern UX design process.

Visit site: 

Learning Framer By Creating A Mobile App Prototype

3 Ways Web Design Can Drive Customer Reviews

city street typography design

Every e-commerce business should strive to collect more online reviews. After all, a recent study found that 1 in 5 online shoppers view customer reviews as the single most important factor influencing their decision to make a purchase. But how does web design influence customer reviews? In this article, we’ll look at 3 web design tips e-commerce businesses can use to deliver a better user experience for online shoppers while encouraging more customers to write reviews. Use Visuals to Summarize Important Information At a Glance Chances are, most of your customers’ reviews will center on the same key details. You…

The post 3 Ways Web Design Can Drive Customer Reviews appeared first on The Daily Egg.


3 Ways Web Design Can Drive Customer Reviews

Sharp Suits & Scrappy Marketing: How Indochino Crafted a Tailor-made Digital Strategy with Unbounce

Similar to how Indochino is revolutionizing menswear with made-to-measure suits, it turns out a custom fit applies to their digital marketing too.

In the past year, the fast-growing apparel brand saw over 50% growth in retail, and opened nine new showrooms across North America. The brand’s marketing team of just 12 people are used to acting fast, but until about a year ago, the team faced a bottleneck threatening their nimbleness and the effectiveness of their PPC ad spend.

As Lisa Craveiro, Director of Acquisition told us, the company’s blog and website CMS templates couldn’t be easily customized to suit their pay-per-click needs. When Lisa’s team needed to publish relevant content (for pointing paid ad traffic to), changes to the site couldn’t be published fast enough.

To ensure return on their ad spend, Lisa and the team rolled out two key tactics:

  • First, they experimented with mock editorial pieces created in Unbounce to better convert Facebook ad traffic.
  • And second, the team built several location-specific landing pages for marketing different showrooms and educating prospects on their unique customer experience.

Over just nine months, Lisa’s team secured 800+ showroom bookings via their new Unbounce landing pages, 40 online transactions of purchased suits, and 750 newsletter signups.

Having over 340,000 visitors directed to a landing page as part of their paid media strategy is just one aspect of how Indochino’s scrappy marketers have been able to grow the brand’s selling appointments 77% year over year. Read on for a peek into their playbook.

A Custom-Fit Ad Approach

Similar to most marketers using Facebook ads, Indochino knew they needed hyper relevant content to point to from ads like these:

Indochino's example Facebook ads

But sending paid traffic to the brand’s blog or site-specific web pages wasn’t a good option as recent as a year ago because the marketing team had little control over the experience.

Lisa Craveiro, Director of Acquisition at Indochino

“Before Unbounce, we didn’t have an informative landing page on the website with a simple, easy navigation path that focused a user’s attention toward our conversion goals. Often existing pages weren’t the most relevant option to land on from a specific ad, or didn’t contain a clear call to action. We needed to quickly build better, high-converting options and Unbounce was perfect for an on-brand look, fast.”

And so Indochino began using Unbounce in a fairly unconventional way. Alongside a designer, the team created mock editorial articles for their Facebook ads to point to. These articles — fashioned to look like blog posts — contained calls to action to “schedule an appointment” in a showroom, but also to “see the suits” for those preferring to browse.

Here’s an example of one of the editorial pieces created with the builder:

Example Mock Article from Indochino

With over 64,000 visitors via their ads, this ‘mock’ article converts at 17.40% with thousands of people clicking through to see showroom locations, go to the website, or see sample suits.

These articles (built in just a few hours) not only provide an especially relevant destination for anyone arriving from a Facebook ad, but they also allow Indochino’s marketers to communicate different value props quickly based on different ad messages.

For example, the brand knows the showroom experience is very valuable and that many men become lifelong customers based on their unique experience being fitted.
Here’s an article Indochino’s marketers whipped up for communicating exactly what to expect in your showroom experience:

Indochino example 2

This listicle style piece converts at 29.63%. The CTA prompts visitors to book an appointment.

The team continues to create mock editorial like this and is always looking to optimize as they go. As Lisa tells us:

“We’re often trying out several value props with these types of mock articles, testing different variations of copy and trying to understand via data which article or angle resonates best with different audiences. They’re a quick way to tell if you’re on the right track with your ad’s messaging.”

Seamless online and offline

On the topic of nine new showrooms launched in North America this year, as Indochino found, once you introduce a new product line, or— in this case—a new retail location, you can’t always update your website right away with location-specific content.

So instead of relying on developers to help update their site with pages specific to each new showroom launch, Indochino turned to landing pages. They created several location-specific pages to explain their fitting process and speak directly to potential customers in a given area.

Here’s an example featuring details on DC’s showroom:

Indochino's DC showroom landing page example

This page, where you can book an appointment or ‘see the suits’, converts at 19.38%.

The team also has a dedicated page for Chicago:

Chicago landing page example

These location-specific pages allow Indochino to get really granular with the targeting of their ads, and the message prospects see upon click through. There’s strong message match from ad to landing page, and visitors see specifics to their location which helps fulfil the promise of the ads.

Want to run location-specific ad to landing page combos like Indochino? Try Dynamic Text Replacement. This Unbounce feature swaps out select keywords or text on your landing page with the exact terms someone has searched, like their location. See a preview of how this works here.

Extending the made-to-measure experience

Beyond highly relevant Facebook ads and location-specific content, Indochino also uses landing pages for lead generation; often for contests and partnering with wedding vendors like The Knot and others.

Here’s a lead gen page Indochino created for a Postmedia National contest:

lead gen landing page example from Indochino

Converting at 15.14%, Lisa said campaigns like this contest allow their marketers to be especially nimble:

“Often marketers can land a great partnership, like we’ve been lucky to do with The Knot and Postmedia, but if you can’t generate relevant landing pages specific to the campaign quickly, you limit the momentum of the partnership along with creative opportunities. With contest pages like this, we can be up and running in a couple of days and immediately see from ad to landing page how we’re performing. It’s helpful for understanding which partnerships we should run again.”

The PPC landing page advantage

On a whole, taking control of the experience after someone clicks an Indochino ad has proven very valuable for this fast-growing menswear brand. By serving up especially relevant content, they’ve seen their paid Facebook posts perform especially well.

You could say, Unbounce was a perfect fit ;)

Read article here:

Sharp Suits & Scrappy Marketing: How Indochino Crafted a Tailor-made Digital Strategy with Unbounce

How Quora Can Help You Drive Massive Traffic and Conversions to Your Website

Many of you are probably familiar with Quora. But not everyone knows that Quora can be turned into a perfect marketing tool that will drive high quality targeted traffic and conversions to your website. I made the most out of Quora and continue to use it as one of my major marketing tools for increasing conversions. How, you ask? I’m one of the most viewed writers on many popular topics including videos, online videos, video production, and explainer videos. My answers gained 1.2 million+ views during the last 10 months. Want to know how to make a go of Quora…

The post How Quora Can Help You Drive Massive Traffic and Conversions to Your Website appeared first on The Daily Egg.

Original source:

How Quora Can Help You Drive Massive Traffic and Conversions to Your Website

Real-World Examples of Show-Stopping Case Studies That Capture Attention and Close Sales

A compelling case study can be an extremely useful sales tool. Buyers love them. In fact, 78 percent of B2B buyers read case studies when researching an upcoming purchase. Why then, do so many companies fail to create compelling case studies? Well, creating a convincing case study is hard. There’s a reason why experienced copywriters charge thousands of dollars for a single case study. Case studies put your biggest benefits on display, using convincing language that connects with the core concerns of your ideal prospects. There are some common roadblocks you might run into when creating case studies. Asking something…

The post Real-World Examples of Show-Stopping Case Studies That Capture Attention and Close Sales appeared first on The Daily Egg.

Visit site:  

Real-World Examples of Show-Stopping Case Studies That Capture Attention and Close Sales