Matthew Palmer Top Articles Vanilla Rocket

    Top Articles in 2018

  1. How to Install VirtualBox on macOS High Sierra

    A quick guide on a couple of tricks you need to get VirtualBox installed on a Mac. Includes a bonus tip on sharing folders between the VM and your host OS.
  2. Emoji Bullet List ⚡ Behind the Scenes

    I released Emoji Bullet List, a fun web app that emojifies your bullet point lists. It went a bit viral on ProductHunt and Twitter.
  3. 2016 Macbook Pro Battery Pack – Anker PowerCore 20100

    While travelling around Australia and the US, I needed a good way to give my Touch Bar MacBook Pro and iPhone 5 a bit of extra charge.
  4. How to Add a Launch Image for the iPhone 6 (Plus)

    A quick guide on how to add a launch image in Xcode for the iPhone 6, 7, and 8.
  5. Remapping Keyboard Keys on Mac OS X Mavericks

    How to remap any of your keyboard keys to any combination of keys on Mac OS X Mavericks. I got hooked after remapping Caps Lock to Command+R.
  1. Automated Software App Support with Zapier

    I’ve got a bucket labelled ”Figure out a use-case for this” that’s overflowing with great SaaS services. Zapier, Airtable, IFTTT, Typeform. They are powerful tools without immediately obvious use-cases. Combine these services and you can solve any business or internet problem.

    You just need to be able to spot the problem.

    Context

    My customer support load has been increasing over the last 18 months. I’ve kept up with it by—and this will shock you—spending more time on customer support.

    About four months ago I spotted this problem. ”Hmm… I spend a lot of time doing customer support. I love it. It’s repetitive though.” It was a huge time sink for me. Worse, my customer would have to wait a day for me to reply with a solution that took five minutes. Terrible UX.

    I’m also like super not printing money at my business, so there’s no way I could afford to pay someone to handle my support. I couldn’t afford to throw money at this problem, so I had to get smart: automate it.

    Step one: figure out what my actual support requests are. I looked at my last hundred emails for each of my products and grouped them by category.

    The results?

    1. 50% – ”My license ran out. Can I please get another one?”
    2. 15% – ”I have [insert arbitrary common bug]. How do I fix it?”
    3. 15% – “I lost access to a file or folder. Can you please help?”
    4. 20% – Other, more interesting support cases. Stuff like interesting bugs, feature suggestions, and different use cases. I love hearing these and responding when I can.

    (I also re-read all these emails. I like using phrases my customers use when I present my business’s public face. Your support documents will be easier to find because they’ll use the phrases people Google. Your copy and pitches will be compelling because they’ll use ideas proven to stick in minds.)

    Automated Email Support with Zapier

    Spoiler: I automated the top three with Zapier.

    The easy ones

    Number two and number three accounted for about 30% of the load. They’re handled the same way: look for an email with suitable keywords and send an automated response.

    Zapier rule to filter on Gmail email body

    1. Use the Gmail ”New Email” trigger in Zapier
    2. Add an ”Only continue if…” filter with an email body search for relevant keywords
    3. (Really 2a.) A better approach is to set up a “New Email” trigger that looks for emails in a specific Gmail folder. Then use Gmail’s automated filtering rules to move that email into the right folder. Why? If you receive emails that whiff on the keyboard match, manually move them into the folder and still send an automated response.
    4. Send an email to help solve the problem, with a link to any relevant pages. BCC my personal email so I can keep track of what’s going on.


    <p>
      Hi there!
    </p>
    
    <p>
      Thanks for using Rocket!
    </p>
    
    <p>
      My robots think you sent in a bit of feedback that might be about getting a refund. 
      No worries! This is a quick email to let you know about Rocket’s 
      <a href="http://matthewpalmer.net/rocket/help.html">help page</a>, which has a link 
      to request a refund quick smart. My robots aren’t sentient (yet), so if this 
      doesn’t fix your problem, just reply to this email and I’ll take a look 😄.
    </p>
    
    <p>
      Matt
    </p>
    


    The hard one

    This one was harder to automate.

    Licenses for my apps start with a limit of two activations so that people don’t share them around. (Dumb mistake—I’ve recently made it higher for new licenses.) When a user hits that limit, they get an error.

    A customer would then email me. I’d have to go into DevMate, find their customer record, add a new license, and copy-paste it over to them in a hand-written written email response. I didn’t mind doing this—but (paying!) customers were waiting up to a day or two for me to do a two minute job. Awful.

    With Zapier, Google Forms, and DevMate’s REST API, I’ve automated this so that customers get faster responses and I don’t have to do anything.

    Automated support with Zapier and Google Forms


    Here’s the workflow now…

    1. Customer emails me with an email that has phrases related to a license activation issue
    2. Zapier sends a friendly automated reponse linking to the right page. (See the previous section)
    3. The help page takes them to a Google Form
    4. When they complete the form, use Google Forms’ option to add an entry to a Google Sheet
    5. Back in Zapier, run a ”New Spreadsheet Row” trigger for this sheet.
    6. Use the ”Custom Request” webhook to hit the DevMate REST API. This creates a new license activation code and passes it back to Zapier. (This one requires a bit of programming knowledge to set up, get in touch if you need help 👍.)
    7. Send an email back to the customer with their new activation code.

    Google Form example for collecting emails


    The dream! A customer has an issue, emails me, my robots point them in the right direction, they fill out a form, I send them a new license.

    Turnaround time? Less than fifteen minutes. I don’t have to intervene unless something goes wrong. Took two hours to automate a process that would take me an hour each week.

    Big Lessons

    Solo and small businesses can increase the limits of their production with automation tools like Zapier. These tools are easy to set up, cheap to maintain, and more reliable than what you’d custom-build. You can avoid assembling a team, which will keeping your costs low and your projects faster.


    Need help or advice automating your business? Want more detail on how to set up Zapier? Email me at [email protected] or get in touch on Twitter. I’d love to help.

  2. A Pro’s Guide to the Best Secret Mac Features

    Even though you use a Mac every day at work, there are a tonne of secret tweaks and pro features that you don’t know about. When you watch someone else use their Mac they just seem so… much… better.

    This guide will take you from a basic pro (“Yeah I use a Mac”) to an old, wizened Mac oracle who people gather round to ask ”Wait… How on earth did you do that so quickly!?”

    It’s designed to be skimmed now and Googled later. Every tip in this guide hits two criteria:

    1. Is this something I personally use? (But can never remember how.)
    2. Am I surprised that more people don’t know about this?

    It’s not exhaustive, but I’m certain you’ll learn like four things in the two minutes it takes you to skim this article.


    Table of Contents

    Terminal Tweaks

    Screenshots Like a Pro

    Powerful GUI Features


    Terminal Tweaks

    You can apply each of the following tweaks with the Terminal.

    How to execute Terminal command

    1. Open Terminal by typing Command-Space to trigger Spotlight then search for ‘Terminal’.
    2. For each step in the tweak, copy the command formatted like this and paste it into Terminal
    3. Hit Return to execute that command
    4. Repeat for subsequent commands


    Creating a Super Minimal Desktop

    Here’s my super minimal Desktop setup, with hidden Desktop icons, a tidy Dock, hidden menu bar icons, and a menu bar that blends in with the background.


    Show and Hide Desktop Icons

    To hide desktop icons, copy and paste each of these into Terminal

    1. defaults write com.apple.finder CreateDesktop false
    2. killall Finder

    To show desktop icons again,

    1. defaults write com.apple.finder CreateDesktop true
    2. killall Finder


    Show and Hide Hidden Files in Finder

    To show hidden files in Finder, you can use the keyboard shortcut Command-Shift-. in macOS Sierra.

    To show hidden files in Finder via the Terminal, copy and paste each of these into Terminal

    1. defaults write com.apple.finder AppleShowAllFiles YES
    2. killall Finder

    To hide hidden files in Finder via the Terminal,

    1. defaults write com.apple.finder AppleShowAllFiles NO
    2. killall Finder


    Add Blank Space Icon Separators to the Dock

    Dock space separator section

    To add a separator icon for space between icons in your Dock,

    1. defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}';
    2. killall Dock
    3. Repeat for each additional separator you want to add. You can rearrange the sections by dragging the blank space in your Dock.


    Match the Desktop background colour to the dark menu bar

    Here’s a niche one for you: if you want to make it look like the menu bar is hidden completely, the right RGB value is 22, 22, 22. You can apply this through System Preferences > Desktop Picture > Solid Colors > Custom Color.


    Faster Animations for the Dock

    There are a couple of tweaks you can use to change the animation speeds for an autohiding Dock.

    Make the Dock show instantly

    1. defaults write com.apple.Dock autohide-delay -float 0
    2. killall Dock

    Make the Dock animation itself faster

    1. defaults write com.apple.dock autohide-time-modifier -float 0.15
    2. killall Dock

    Reset the delay before the Dock animation starts to its default

    1. defaults delete com.apple.dock autohide-delay
    2. killall Dock

    Reset the Dock animation to its default speed

    1. defaults delete com.apple.dock autohide-time-modifier
    2. killall Dock


    Faster Animations for Mission Control

    Change Mission Control animations to a cross-fade

    1. defaults write com.apple.universalaccess reduceMotion -bool true
    2. killall Dock

    Reset Mission Control animations to their default

    1. defaults write com.apple.universalaccess reduceMotion -bool false
    2. killall Dock


    Disable Spell Check in Every Application

    To disable spell check system-wide,

    1. defaults write com.apple.notes NSAutomaticSpellingCorrectionEnabled -bool false

    To set spell check back to its default,

    1. defaults delete com.apple.notes NSAutomaticSpellingCorrectionEnabled


    Prevent Your Mac from Going to Sleep

    To stop your Mac from sleeping while you do a presentation or watch something, run the following in Terminal

    1. caffeinate

    Caffeine is a great app to do this as well.


    Disable Shadow for Window Screenshots

    When you take a screenshot with Command-Shift-4 then Space it includes the window’s shadow (see the section on Pixel-Perfect Screenshots). You can disable this shadow by running each of these in Terminal

    1. defaults write com.apple.screencapture disable-shadow -bool TRUE
    2. killall SystemUIServer


    Screenshots Like a Pro

    The Mac can do dozens of small variations on screenshots so your documents look professional and high-quality. Figuring out exactly how to do that is hard because your options are hidden behind keyboard shortcuts.

    Take a screenshot of just the window

    Just the window screenshot Mac

    This one’s pretty well known but still my favourite. Hit Command-Shift-4 then Space then select the window you want to get a screenshot of. This can be combined with the tip above about disabling the shadow for window screenshots.

    Grow the screenshot capture zone

    After you hit Command-Shift-4 you can select the region you want to capture by dragging the cursor around. You can hold Option to grow the window symmetrically in all directions. You can hold Shift to grow the window in only one direction. You can hold Option-Shift to grow the window symmetrically in only one direction.

    Move the screenshot capture zone

    After you select a screenshot capture zone, hold down Space and drag your mouse cursor to move the capture region around.

    Copy the screenshot to the clipboard

    Hold Control when you capture the screenshot and it will be copied to your clipboard instead of saved to your Desktop.


    Powerful GUI Features

    Use Tab to navigate everything

    By default, you can use Tab to navigate through input fields. You can speed up your navigation by enabling the ability to tab through everything. Open System Preferences, then search for ‘full keyboard access’ and enable Tab for all controls at the bottom.


    Customize your menu bar

    You can hold Command and drag menu bar icons around to rearrange icons and tweak your Mac’s appearance. Drag an icon far enough off the menu bar and it’ll disappear completely. You can also use something like Vanilla or Bartender to hide icons.


    Open a file or app in Finder from the Dock

    From the Dock, you can reveal a file or application in Finder by holding Command and clicking the icon.


    Change an app’s icon

    Use the above tip to reveal an app in Finder, then Command-I to open its Get Info panel, then drag your replacement icon over the icon in the top left of the Get Info window to replace it.


    Open a file in a certain app

    This one’s not so much of a productivity boost, just a ”Oh cool I’m glad it works like that.” Start dragging a file in Finder (or image in a web browser, etc.), then drop it on one of the app icons in your Dock. It will open the file in that app.


    Change the default app for a file type

    Use the above tip to reveal a file in Finder, then Command-I to open its Get Info panel, then under ”Open With” choose the application you want to set as the default for that file extension (.html, .mov, etc.), and then hit ”Change All…”


    Bulk rename files in Finder

    Select a bunch of files in Finder, then choose ”Rename X Items.” This feature is so powerful it’s worth a post on its own, but once you play around with it you’ll get the gist.


    Type emoji with a keyboard shortcut

    You can type emoji by hitting Command-Control-Space to open the emoji picker for your Mac. There are also apps like Rocket that make entering emoji faster.


    My Top 4 Keyboard Shortcuts

    Keyboard shortcut guides are everywhere (and the Godfather has an exhaustive list, so I’ll just give you my top four.

    1. In Finder, Command-Up will navigate up one level. Command-Down will open the selected folder or file.
    2. In Finder, Command-Option-C will copy the file’s path to your clipboard
    3. In lots of apps, Command-Option-Shift-V will paste the clipboard contents without formatting.
    4. The following let you navigate and select text faster. Command-Arrow moves you to the start or end of a line or document. Option-Arrow moves to the next or previous word. Hold Shift while doing these to highlight the text as you navigate.


    More Tips?

    If you’ve got a secret tip, tweak, or trick you love, let me know!

    I’m also thinking about turning some of these into a super simple Mac menu bar app (pretty much just a super fast way to toggle Desktop icons on and off, show and hide hidden files, etc.), so get in touch if that’s something you’d use.

  3. VS Code: the Best GUI Debugger for Node.js Apps

    I’ve been a user of Sublime Text since… forever. I love a good IDE (having worked across various stacks I’m pretty comfortable in Xcode, IntelliJ, and Visual Studio) but when I come back to Node—and just general text editing—I always end up back in Sublime.

    But you know what I love more than anything? A good debugger. Debuggability is my number one priority as an experienced developer.

    Is this code good? Who cares… can I step in and step over? If I can do that, I can understand anything.

    This means that I try to avoid events, excessive parallelism, and other fun abstractions not because they’re not useful, but because there’s not a clear method hierarchy. I want to be able to step through the code and see a call stack. When I’ve been a newcomer to 10+ year old codebases, the best way I’ve found to get a mental model of the whole system is by tracing a call from the UI layer all the way through.

    Now here’s the part where I explain that I’m an idiot. I’ve been doing server-side Node.js for at least five years. On major projects too. I’ve never had a good debugger. I knew I needed a debugger and I knew I wanted a debugger. But I kept putting it off (“pssh, non-coding work? Waste of time.”) or deciding it wasn’t worth the hassle (“I’m keeping it old school with console.log”).

    Part of the reason I kept putting off using a debugger was because I thought it’d involve a bunch of weird configuration settings, time-wasting tweaks, and inconsistent functionality. All to get something that half-worked and was only a little bit better than console.log. I was totally wrong. Setting up VS Code is painless and, most importantly, works exactly the way you’d expect.

    So I’m super late to the party, but Visual Studio Code’s debugger is great and simple. It’s by far the best Mac GUI debugger for Node.js development. It supports a bunch of other languages and runtimes other than Node.js as well, plus it runs across Mac, Linux, and Windows.

    Guide

    Here’s a quick tour that’ll get you debugging Node.js apps with VS Code like an adult. (The codebase is for Emoji Bullet List in case you’re curious.)

    Debug panel

    Activate the Debug panel by clicking the no-bugs button in the sidebar on the left.

    Activate debug panel

    launch.json

    Open or create your launch.json file by clicking the cog at the top. This file controls how your application launches, which version of Node to use, what arguments to pass, environment settings, and a bunch of other things. You can even set up multiple launch configurations.

    Since I use fish and nvm, I had to add a runtimeExecutable entry to point to the specific Node.js version I wanted to use. If you need to figure this out, which node might come in handy.

    launch.json file

    Start debugging

    Starting to debug your app is super easy—just hit F5 or select Debug > Start Debugging. As simple as it should be!

    Start debugging with VS Code

    Debugging

    Set a breakpoint by clicking in the left hand gutter. A red dot will appear at the breakpoint. If the Debug panel is active (Command-Shift-D), when you hit your breakpoint you’ll see local variables, variables captured in the closure (so cool!) and global variables. You’ll also get a call stack. I’ve been loving this for exploring the Express web framework—something I’ve used in hundreds of projects but never fully dug through the source on.

    A debug session in VS Code

    Step Into, Step Over

    Step Over lets you execute the method at the cursor and go to the next line. Step Into moves the debugger into that method where you can keep digging. Repeatedly Stepping Into interesting functions takes you down some super interesting rabbit holes! Give it a try.

    Debug step into and step over

    The Touch Bar on your Macbook Pro might actually be useful for once! When you’re in a debugging session, VS Code displays (from left to right) Continue, Step Over, Step Into, and Step Out.

    If you don’t have a Touch Bar Macbook Pro, you can use F10 to Step Over, F11 to Step Into, and Shift-F11 to Step Out. One important note: you might have a conflict between the system keyboard shortcut ”Show Desktop” and F11. To disable the system shortcut, open System Preferences, search for Keyboard Shortcuts, select Mission Control in the left sidebar, and choose Show Desktop. Then change it to something that doesn’t conflict with VS Code.

    Disable keyboard shortcut

    Run to cursor

    One of my favourite features of any debugger is ”Run to Cursor” which essentially sets a temporary breakpoint wherever your mouse cursor is, and runs the application until it reaches that point. To do this in VS Code, just right-click on any line after the line you’re currently stopped on, and choose Run to Cursor.

    Run to cursor VS Code

    Exploring npm modules

    Now that I’ve got a decent debugger, poking through my projects’ dependencies is so much easier. You can simply Step Into any function call or set a breakpoint on a line in their package and then start digging through the code. Once you realise that it’s all just code (and none of it that complicated!) none of them seem so intimidating. Sometimes it’s even faster than looking up the documentation.

    Exploring mongodb

    (I love figuring out how things actually work. Like here, where I took a peek how MongoDB’s insertion method actually works.)

    Remember to right-click your breakpoints

    A couple of other cool features to power up your breakpoints. Right-click one and choose Edit Breakpoint. You can set them to be

    • conditional – so they’ll only stop your application when the expression you enter is true
    • hit count – only stop after a certain number of times the app has gone through the breakpoint
    • log message – which is a way more pro version of our old friend console.log

    More more more

    The official guide to debugging with VS Code is available here.

  4. How to Type Emoji in Google Chrome

    Side note: I make Rocket, a Mac app that gives you a really fast way to enter emoji in every application.

    Figuring out how to enter emoji is a pain because it changes between devices and ends up being slow and tedious. All to add a little 🌟 to your writing! Google Chrome’s working on a new feature that makes that a lot better.

    Soon, you’ll be able to simply right-click wherever you’re typing and click ‘Emoji’ to bring up the emoji picker. This will display the default emoji picker for your device where you can search and browse through all emoji.

    It’s awesome! It’s not available for everyone just yet—though it soon will be.

    To get early access to this feature, you need to download Google Chrome Canary. This is a version of Google Chrome designed for early adopters who want to try out cutting edge features, and don’t mind if their browser is a little bit less reliable.

    Here are the steps to type emoji in Google Chrome.

    1. Download Google Chrome Canary and install it
    2. Open Canary, which has a yellow version of the Chrome icon
    3. In the address bar, enter ‘chrome://flags’
    4. Search for ‘emoji’
    5. Select ‘Enabled’ in the dropdown and then relaunch Canary
    6. Right-click wherever you’re typing and select ‘Emoji’

    And, in glorious animated gif form, here’s the guide to use emoji in Google Chrome.

    emoji-chrome-guide

    It’s April 2018 right now, so my best guess is that this feature will be available in the normal version of Google Chrome in the next month or so. Unicode is planning to create some new emoji in early June 2018, so I’d say Chrome will have it by that point at the very latest. It’s likely to be much sooner, so I’ll update this post once it’s available for everyone.

    🔥🔥🔥. Nice one, Chrome.

  5. Custom FastSpring Classic Themes

    Since they launched, Rocket and Vanilla were using the default FastSpring store style. This is—especially with the way I had it configured—an ugly theme that was losing me customers.

    After about a year, I was fed up. I’ve created a theme for Vanilla and a theme for Rocket that, design-wise, are a huge improvement over the default. Looking at analytics, they seem to be doing a better job of converting customers through the checkout process as well.

    You can take a look at these custom FastSpring Classic themes here for $29. It’s a super hand-run operation though, so prices are negotiable. If you need a theme built for your product, get in touch as well.

    Sadly FastSpring Classic is being phased out in favour of FastSpring Contextual Commerce, which has much more limited customization options. That’s what I haven’t spent time on making the process of getting a theme easier and more automatic, and why I’ll do everything by hand for a while.

  6. Visual Cryptography is the Coolest Thing Ever

    I just learnt about the coolest thing. Let me share it with you.

    Let’s say you and some friends are taking a walk through the Australian outback. Which, as we all know, is full of treasure and deadly animals in equal measure. You’ve got an image file that’s a map to some treasure, and you want to split it amongst the ten of you.

    While you’re hiking around, you want everyone to come together and overlay their shares to locate the treasure and navigate. But, since we don’t want anyone running off, no individual person can know what any part of the map looks like on their own.

    Now this is where the deadly animals come in. To protect us against likely death by dropbear of a few of our group, we want the added feature that only six out of ten of us need to combine map shares to get the full map back. And, if five out of ten combine shares, they should gain no information.

    So we’ve got this impossible set of requirements:

    • Split an image up into n shares
    • Each share should reveal nothing about the original image
    • k out of those n shares, if you lay them on top of eachother, should recreate the original image

    Hmm…

    Visual Cryptography

    Visual cryptography can do this, and it’s absolute magic.

    Let’s simplify our example to just 2 friends, and when they combine their shares it should reveal the original. We’ll work with a black and white secret image.

    Animated demo of visual cryptography

    Encryption

    1. Take a pixel from the secret map image
    2. Subdivide that pixel into four subpixels for each friend (so eight subpixels total)
    3. Colour in those subpixels so that, when the friends overlay their images…
      • If the original pixel was black, the overlayed subpixels will have four pixels coloured in
      • If the original pixel was white, the overlayed subpixels will have two pixels coloured in
      • Do this with a degree of randomness so that the shares are secure.
    4. Combine each friend’s subpixels into an image, and distribute each image to that person

    This is a very visual problem, so spend a bit of time looking through the diagram below.

    Visual cryptography tutorial image

    Some key things to note:

    • If the original pixel was black, the overlaid subpixel shares will be all black. If the original was white, the overlaid will be 50% coloured in.
    • The coin toss is what makes this sharing scheme secure, because an attacker can’t guess with more than 50% likelihood which set of patterns were used to colour in the shares
    • The specific patterns (BWBW, WBWB) we used to colour don’t really matter, what matters is how many cells in the overlaid pixels are coloured

    If you want to see some code, the most interesting snippet from the full JavaScript Gist is this:

    // This is the important function -- it's how we encode our shares.
    // Given a secret pixel, subdivide it into four subpixels with a set pattern.
    const subdivideSecretPixel = (pixel) => {
        const redPill = Math.random() > 0.5;
    
        if (pixel.alpha > 0) {
            // The pixel is coloured in the secret.
            // When overlaid, all four subdivisions in the shares need to be black.
            if (redPill) return [ patternA, patternB ];
            return [ patternB, patternA ];
        }
    
        // The pixel in the secret was not coloured.
        // When overlaid, only two of the four subdivisions should be black.
        if (redPill) return [patternA, patternA];
        return [patternB, patternB];
    };
    

    Decryption

    Simply overlay each person’s shares to get back the original image!

    Animated demo of visual cryptography decryption

    Wrap up

    That’s a super quick overview of the ideas behind visual cryptography. There’s a tonne more fascinating stuff to read, especially once you get into the k out of n schemes and using coloured images I mentioned in the intro. Here are some of the great resources I’ve been reading to learn about visual cryptography. Dive in!

  7. How to Install VirtualBox on macOS High Sierra

    I tried to install VirtualBox on macOS High Sierra, but I got an error about kernel drivers, system extensions, and kernel modules not being installed. The VirtualBox installer fails with “The installation failed” where it “encountered an error that caused the installation to fail.”

    Go to System Preferences > Security & Privacy. Click the ‘Allow’ button at the bottom. Re-run the installer. More detailed instructions are below.

    VirtualBox on macOS failed to install

    VirtualBox has an error when installing.

    • Run the VirtualBox installer just like any other installer.

    • You might see a prompt from macOS about not allowing unsecure system extensions. You can click ‘Next’ for now.

    • After reaching the end, installation will fail with the message above.

    • Navigate to System Preferences > Security & Privacy. At the bottom of the window, you should see a message saying “System software from developer, ‘Oracle, America, Inc.‘ was blocked from loading.”

    VirtualBox allow kernel modules

    • Click the lock in the bottom left corner, enter your password

    • Click ‘Allow’ next to the ”blocked from loading” message.

    • Re-run the VirtualBox installer. It should succeed.

    VirtualBox install success on High Sierra

    How to add a shared folder for Ubuntu on a macOS High Sierra Host?

    Side note: here’s how to share files between a Ubuntu virtual machine and macOS High Sierra on VirtualBox.

    • Download, set up your VM. See above.

    • Open settings for the VM. Click the “Shared Folders” tab. Add your folder and select Yes for “Auto-mount”

    • Run the VM

    • While the VM is running, in the Mac menu bar go to Devices > Optical Drives > Choose disk image…

    • Select the VirtualBox Guest Additions image, for me this is located at /Applications/VirtualBox.app/Contents/MacOS/VBoxGuestAdditions.iso. Once the Choose disk image… option was selected, you were probably shown a file picker. Press Command-Shift-G and then type in that file to choose the VBoxGuesAdditions.iso.

    • You might need to force mount/unmount. You’ll be prompted by VirtualBox if this is necessary.

    • Restart your VM.

    • Run the following command to install prerequisites for the Mac VirtualBox Guest Additions: sudo apt-get -y install gcc make linux-headers-$(uname -r)

    • Then run sudo /media/cdrom/VBoxLinuxAdditions.run to install the Guest Additions

    • Restart your VM again.

    • Run sudo usermod -aG vboxsf USERNAME where USERNAME is your guest OS username. This will let your user access the shared folder.

    • Your folder will be at /media/sf_FOLDER_NAME, so cd /media/sf_FOLDER_NAME

  8. Volunteering at CTO Summit

    At CTO Summit, CTOs, VPs, and engineering managers shared the behind-the-scenes of their companies’ engineering teams with 150 attendees. They talked through surviving rapid-growth engineering and orchestrating teams at scale. They also needed volunteers to help run the conference, which is how I got in.

    When I graduated high school, I plainly looked forward to seeing what was outside the tiny Australian town I grew up in. The idea that a few years later I’d be in the Times Square Nasdaq building was, and is, ludicrous. That’s one of those places that exists in movies—I always felt there was like a 79% chance it was fictional.


    seriously

    Seriously, it’s this place.


    Turns out it’s real, and you need a lanyard and a nametag to be there. That’s where I come in: for the morning, I had to greet and register some of the most influential people in tech. Cool.

    My mate at registration was a Ghanian expat with an undergraduate in geospatial systems. As you’d expect, our chit-chat turned into a diagram-and-equation complete overview of GPS (between attendees’ arrival, of course). I laughed at the lengths the government have to go to secure GPS signals from timestamp tampering, which would totally ruin your phone’s positioning system.


    For the afternoon, I was on speaker tech support. In the 30 seconds between lightning talks, I ducked up on stage, reconfigured the display, changed to the next presentation, and fiddled with the clicker, hopefully without the audience noticing. And if anything went wrong, just like… fix it. The reward? Front row for every talk that afternoon.

    Two outstanding talks from the nine I was lucky to see: Randy Shoup and Edith Harbaugh.

    Randy (Stitch Fix, eBay, Google) talked about the practical technical concerns of microservices at Stitch Fix. Watch the video of the talk when it comes out—it’ll be great. Two high level notes: don’t do microservices if you’re small, and this gem: if you don’t have big technical problems while growing, you over-engineered and cost the company early. Embrace that mistakes are inevitable—just make sure your mindset is open to tackling them.

    I had looked forward to Edith Harbaugh’s talk all day since I love LaunchDarkly (seriously, read this article on Building vs. Buying and tell me you don’t love a company that writes so cogently). Her talk, Software & The Art of Bicycle of Maintenance, told the story of her bike trip across North America, and shared the many insights she had. The most important thing? Take care of yourself. It’ll add water to your reservoir to use on the real fires.

    I learned from every talk that afternoon, and picked up so much from chatting to everyone in the hallways in the breaks. I’m grateful to Peter, Samantha, and Jon for having me on as a volunteer. I’ve volunteered at camps, festivals, and conferences now, and every single one has been really rewarding.

    If you’re interested in volunteering at something, do it.

  9. Emoji Bullet List ⚡ Behind the Scenes

    Have you ever seen tweets like these?

    Bulleted lists that use emoji

    • 🌟 look awesome
    • 💯 are perfect for sharing on social media
    • 😄 bring joy to boring lists

    (Can you guess how I made that emoji list?)

    Painful to write, though. Like, I know emoji better than most, and I struggle to quickly pick out the right emoji to go with each line.

    I built Emoji Bullet List to make creating emoji dot point lists really easy. Just copy in your list, hit the big “Emojify” button, quickly choose from the suggested emoji if the first suggestion doesn’t fit your needs, and hit “Copy” to get an emojified list back. Too easy!

    This idea originated as a nice-to-have feature for Rocket, but I realised I could use Rocket’s emoji keyword/phrase dataset to build this into a web app. More people can access it, it’s a bit easier to use, and hopefully a few more people will find Rocket because of it.

    I couldn’t figure out a good way to monetise it, so it’s completely free 🤷‍♂️.

    Technical Notes

    Simple, useful logging for Node.js apps

    I added unremarkable-yet-incredibly-useful logging with ten lines of JavaScript that lets me see in detail how (anonymised) users are interacting with the app. (This is great for low volume apps, but I don’t do this for services running at scale.)

    • Create a middleware function early in the chain that gives a user a random identifier as a cookie (using Express cookie-parser) when they access a page if they don’t have one already.
    app.use(cookieParser())
    
    app.use((req, res, next) => {
    	if (!req.cookies[COOKIE_NAME]) {
    		res.cookie(COOKIE_NAME, uuid(), { maxAge: 900000, httpOnly: true })
    	}
    	next();
    });
    
    • Create a second middleware function using the Express response-time middleware that logs the user’s cookie, what they’re requesting, and how long it took us
    app.use(responseTime((req, res, time) => { 
    	const cookie = req.cookies[COOKIE_NAME] || 'no-cookie                           '
    	console.log(cookie, req.path, time)
    }))
    

    (The extra spaces next to no-cookie are so that it lines up with our UUIDs in the logs.)

    • Since I use pm2 to manage the app in production, the log file gets handled automatically, and I can just pm2 logs to stream the app in use and see what people are doing in real time. This is pretty addictive. Let’s take a look at one example I saw.
    # A new user comes to the app, gets their identifier set as c5ff9a10
    0|index    | no-cookie  / 						0.5199119999999999
    0|index    | c5ff9a10   /styles.css 			0.39601899999999995
    0|index    | c5ff9a10   /app.js 				0.33612
    
    # Another new user comes in, set as 1378f9d0
    0|index    | no-cookie  / 						0.37545999999999996
    0|index    | 1378f9d0   /styles.css 			0.362075
    0|index    | 1378f9d0   /app.js 				0.491498
    
    # The first user asks for some suggestions and uses them!
    0|index    | c5ff9a10   /api/v1/suggestions 	0.964749
    0|index    | c5ff9a10   /api/v1/used-suggestion 0.5390269999999999
    
    # Some previous user comes back to the app and asks for a suggestion
    0|index    | f92af790   / 						0.46471999999999997
    0|index    | f92af790   /styles.css 			0.40573299999999995
    0|index    | f92af790   /app.js 				0.217364
    0|index    | f92af790   /favicon.ico 			0.31112999999999996
    0|index    | f92af790   /api/v1/suggestions 	0.921465
    
    # Our original user is playing around with different suggestions until they're happy
    0|index    | c5ff9a10   /api/v1/suggestions 	0.676022
    0|index    | c5ff9a10   /api/v1/suggestions 	0.8778859999999999
    0|index    | c5ff9a10   /api/v1/suggestions 	0.71288
    0|index    | c5ff9a10   /api/v1/used-suggestion 0.522269
    

    There are a bunch of fancier ways using external services or adding full user tracking, but honestly there’s nothing more fun than tailing your logs in realtime while someone is successful with your app.

    I even saw one person come in, play around with the app for a minute, and click on the link to my Twitter profile. I opened up Twitter, and 30 seconds later I had a tweet from them about how much they liked the app 😁.

    (As a side note, you’ll notice attackers and bots trying to crawl your site for security vulnerabilities. /manager/assets/modext/modx.jsgrps-min.js, /media/system/js/core.js, /privacy_policy.php (why!?), /a2billing/common/javascript/misc.js, are some common ones.)

    Dead-simple Node.js and Express app deployment on DigitalOcean

    I’ve got a dead simple deployment strategy that’s great for small apps. Put this in a file called node-simple-redeploy.sh (or whatever) in your project.

    #!/bin/sh
    
    # Copy this to your package. Change the IP.
    rsync -azv --exclude node_modules/ --progress -e ssh "$PWD" [email protected]:~/app/
    
    # You may need to npm install on the DigitalOcean box
    

    And to your package.json, add

    "scripts": {
    	...
    	"sync": "./node-simple-redeploy.sh",
    }
    

    And I simply npm run sync to update the app. Don’t do it at scale, but it’s super fast and works for small apps. I’m not fancy 🤷‍♂️.

    Other Notes

    • Like most web apps I make, it’s a one-page app using Node.js, Express, and MongoDB for long-term storage. On the frontend it’s pretty plain JS/jQuery/CSS. I love Flexbox more and more each day.
    • The emoji dataset is loaded into memory on the backend and we query from there, so it’s super fast.
    • I’m always surprised how simple implementing things like popup modals and selectable lists are in web development compared to iOS apps. It’s like 30 minutes of work to write your own.
    • Uses LetsEncrypt for HTTPS. So easy.

    If there’s anything you’d like me to write more about, let me know.

  10. 2016 Macbook Pro Battery Pack – Anker PowerCore 20100

    I’m travelling around for a while, and I’ve been on the hunt for a good way to give my 13-inch 2016 MacBook Pro (Touch Bar edition) a bit of extra charge. There’s information scattered around the internet on what works and what doesn’t, and I wanted to collect it here so that you don’t have to do as much research as I did.

    The short story: the Anker PowerCore+ 20100 with USB-C is the best way to charge a 2016 MacBook Pro using an external battery pack.

    Anker PowerCore pack for Macbook Pro

    The Anker PowerCore+ 20100 with USB-C. Source: Anker

    My Observations after Several Months of Use

    I’ve used the Anker for about four months now while travelling around the US. It’s survived camping trips to Washington and Yellowstone, domestic and international flights (N.B. it has to go in your carry-on), buses, trains, hostels in Nashville and hikes in Austin. Here’s what I’ve found:

    • It takes a long time to refill the battery on the Anker brick. At least overnight if you use the regular MacBook charger. The Anker USB-C Rapid Charger improves the charge time here if you need it (which you do).

    • The battery pack is pretty heavy. Feels about as heavy as the 13-inch Pro itself, although denser.

    • I can fit the pack in a pants pocket if I have to, but the thing is big and solid (and well-built!)

    • The “user interface” on the thing sucks. If you want to charge something, press the button on the front to make the lights come on. Then plug in your device. If you want to charge the brick itself, plug it in and maybe press the button. (I haven’t figured this out yet, after four months.)

    • The circle lights on the front will fill up. Eventually. Again, this thing charges slowly.

    • It holds about a MacBook Pro’s worth of battery charge when full. This is at least six full iPhone 5 charges (I actually ended up needing to charge my phone way more often than my laptop when I was travelling, so this was super handy)

    Overall, I highly recommend the Anker power brick. It’s reassuring to know you always have a power source when you need it. The Anker does the job it’s meant to, holds enough power, is well built, and has saved me more than a handful of times.

    Here’s the other stuff I figured out

    There are some caveats, but the Anker is the best way that I’ve discovered.

    • If you’re using the laptop heavily while the Anker is plugged in, the laptop battery will still lose charge, but much more slowly than on battery alone
    • If you’re using the laptop lightly while the Anker, the battery level will stay the same or charge slightly
    • If the laptop’s sleeping, the battery will charge, but slower than the normal power adapter
    • The 15-inch Pro is a different story because it has a) a larger screen, and b) different GPUs that draw more power. I expect that this means the 15-inch will lose charge under light usage while plugged in to the pack, but more slowly than without. I’d also expect that the laptop would charge while sleeping, although it will take longer
    • My anecdotal data is back up by the specs. The 12-inch MacBook Adorable (which is referenced by the Anker page) has a 41.4-watt-hour battery with a 29W power adapter. The 13-inch Pro gives 49.2-watt-hours with a 61W adapter. The 15-inch Pro has a 76.0-watt-hour battery and a 87W adapter. The Anker PowerCore over USB-C gives 5V at 3A, i.e. 15W of output.
    • The Anker detailed specs page mentions it’s not “fully compatible” but I expect that this is just because it charges more slowly than most people would expect

    Useful pages I discovered while researching

  11. Visit the archive for more posts.