Matthew Palmer Top Articles Vanilla Rocket Kubernetes Book Standing Invitation

    Top Articles in 2018

  1. How to Install VirtualBox on macOS Mojave and 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. Top 4 Free Timer Apps for Mac

    Need to quickly start a countdown timer on your Mac?

    Maybe you’re looking for the best free Pomodoro timer, a great minimalist countdown clock, or a productivity time tracker.

    Whenever I’m working, I’ve got a timer running. It’s my #1 tip for staying focused and getting a lot done in a short amount of time.

    This is my round up of the best five free timer apps for your Mac.

    1. Horo

    Horo Mac timer

    Link: Horo

    Obvious disclaimer – I built Horo. Why did I build it? I believe that if starting a timer takes you more than a second, your timer app sucks.

    Horo is a simple, easy app that lets you type what time you want (“1m 30s”, “1.5h”), hit Return, and then your timer starts.

    It’s neat, it’s free, and it shows the timer in the menu bar so you can glance back at it easily.

    2. Be Focused

    Be Focused

    Link: Be Focused

    Be Focused is a great, full-featured Pomodoro-style timer. To change the time interval of an individual timer, you have to change the presets in the app’s preferences.

    This can be a bit annoying, but the benefit is that the app has awesome tracking of the number of times you’ve completed a timer. This, and the built- in break tracking, makes Be Focused a great work timer.

    (Unfortunately, the free version has ads. But they’re not intrusive.)

    3. Activity Timer

    Activity Timer

    Link: Activity Timer

    Activity Timer’s a great little app because you can save a range of custom preset timers.

    If you find yourself using the same four or five time intervals over and over again, this is the app for you.

    The app is simple, free, and works like you’d expect.

    4. Howler Timer

    Howler Timer

    Link: Howler Timer

    Howler Timer is a great option if you want the timer to pop out into a new window.

    The UI’s looking a little old, but the app itself works great. The Pro version ($2.99) gives you more formatting options for the timer in the menu bar, and you can set presets.

    The other great feature of the Pro version is that you can loop your timers, which is pretty handy.

  2. thread.soy - the best tech Twitter threads

    Today I did a quiet release of thread.soy. It’s a website devoted to curating the best threads on Twitter. Users can contribute threads they like, vote on threads, and browse all-time popularity lists. It took about a week to build.

    In the first 12 hours, @threadsoy is up to 47 followers, and the website’s had 906 users with 1,906 page views. I’m curious to see how that grows over the next few weeks.

    What turned out well?

    I was originally going to give thread.soy a brutalist design style— with a bit more of a sense of humour. But as I got into the project, I discovered that I didn’t feel good about displaying other people’s content alongside too much (potentially inappropriate) design personality.

    This restriction meant I had to discover a new, more considerate design and colour palette. I think I’m happier with this than the original brutalist attitude.

    My favourite thing is the buttons.

    popular upvote

    I also like how some of the pages turned out.

    topic

    I still need to improve on the typography of the actual thread text—it’s super important but currently feels very ”first draft.”

    How do you build a web app in a week?

    1. Cut scope. Ruthlessly.
    2. Know your tools.

      This is a simple Node.js Express web application with a Postgres database. It uses Handlebars templates, Sass for CSS, and plain no-framework front-end JS. I’ve used them dozens of times, so I could turn this project around pretty quickly.

    3. Be wise in your code-reuse battles.

      Shock and horror: I copy and pasted a shit tonne of code for this project. The question to ask is ”Will these two things always change together?” If yes, and it’s costly for them to be separate, refactor that code to be shared. If it’s not costly for them to be separate—or the additional abstraction adds no value—you’re setting yourself up for pain by overly refactoring. Your codebase is going to go through fundamental change in the early phase of a project—there’s no point adding indirection or layer of abstraction before the problem domain is fully conceptualized.

    What did I learn?

    1. Don’t include ProductHunt or Twitter marketing plan.

      Seriously, just take those words out of your vocabulary.

      I re-learn this lesson every time I make something. Those sites don’t provide that much lasting traffic, and they kill your motivation if they don’t go well. I’ve had past projects get that virality, and plenty of projects that haven’t. Your growth strategy can’t rely on initial popularity.

    2. I probably should have used an ORM.

      Minor technical note: out of curiousity, I just ended up doing raw SQL queries instead of using an ORM like Sequelize. Turns out, Sequelize is pretty nice.

  3. My New Book on Kubernetes for Developers

    I wrote a book! It’s a focused, clear introduction to Kubernetes for web developers. You can get the book from Golden Guide to Kubernetes Application Development.

    book-image

    This post covers the behind-the-scenes of how I wrote the book. If you want to be sold on the book… click that link 👆.

    Workspace

    There’s a high table in the back left corner of the IKEA cafe that’s got this book written all over it.

    Every time I start a new project, I seem to pick a new place to work from. For Vanilla, that was a windowless room with sandstone walls… essentially a cave. Whatever place it is, it becomes forever associated with that project. All work must happen in that space, and once the project is done that space is tainted forever.

    I highly recommend the IKEA cafe for a few reasons. (I’m putting faith in the fact that not too many people will read this and so the IKEA cafe won’t be ruined by crowds.)

    • A tonne of space with no one side-eyeing you. The IKEA cafe is pretty much self-service, so you don’t feel pressured to buy something every eleven minutes
    • Solid wifi, access to power outlets
    • Unlimited coffee for $2.50. Although I swear they ramp up the caffeine in the coffee so you don’t want more than a cup.

    A caveat: get the hell out of there before lunchtime. I had no idea there were so many families with kids in the world. And they all congregate in the IKEA cafe at 11:50am.

    Tools

    What does a programming nerd do when he writes a book? What about a programming and a Mac nerd?

    I really thought I’d get to write some interesting document generation code… maybe some hardcore LaTeX… at least a script that did something to some Markdown.

    I didn’t get to do any of that! What’s the point of that CS degree again? I just ended up using Pages and Keynote, and exporting to PDF. It was… too simple and easy.

    Pages is decent. Keynote’s diagramming features are excellent. If I wrote another book, I’d probably use the same tools again.

    The purchasing flow is handled by Gumroad. There are also some Zapier integrations I’ve created to generate notifications and give access to the upgraded package repo. The upgraded package is hosted on a private GitHub repo.

    Stats

    Some fun stats!

    • 22,632 words
    • 107 pages
    • 16 diagrams
    • 2k+ lines of sample code, solutions, and resources
    • $621 first week sales

    Long Term

    Marketing-wise, this project is much more of a slow burn than my other apps. The current strategy is to write Kubernetes blog posts on commonly-asked questions regularly, and let Google do the rest. I’ll also experiment with answering StackOverflow and Quora questions.

  4. 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.

  5. 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 and Lungo are great apps that do this as well. (Thanks @chrismessina!)


    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.

  6. 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.

  7. 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.

  8. 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.

  9. 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!

  10. How to Install VirtualBox on macOS Mojave and 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.”

    This guide has been updated for macOS Mojave as well.

    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?

    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

  11. Visit the archive for more posts.