Syntax Highlighting in Keynote (plus devtools theme)

Now matter how many times I try displaying code in presentations; pictures, plain text, live code, IDEs, etc; I always want to go back to simple syntax highlighting of static code.

Syntax highlighting source code in Keynote is a gigantic pain. You need to do it yourself or copy colored source from some other location like a website or document. If you need to refactor the code in your slides (and boy does that happen) then you need to rehighlight that slide and all related slides.

For a while I’ve used a command line solution that pipes a file through highlight and pbcopy to then paste in to keynote. It works, but is cumbersome. I recently found a post on Randy Coulman’s blog that inspired me to put more effort into making this work exactly how I needed it. That blog was great but, having no experience with Automator it still took some time for me to figure out how to get this working.

First, open up “Automator” and create a new service.


Then add an action to Copy to Clipboard.


Then add an action to “Run AppleScript”


Your command flow should look like this now, note the block in the AppleScript where your custom code will be placed.


Replace the comment with the following AppleScript (customizing the “command” with the options you need)

set command to "/usr/local/bin/highlight --syntax js --out-format rtf --style solarized-light --font Menlo --font-size 40 " 

do shell script "/bin/bash -c 'pbpaste | " & command & " | pbcopy'" 

tell application "System Events" to tell (process 1 where frontmost is true) 
  click menu item "Paste" of menu 1 of menu bar item "Edit" of menu bar 1 
end tell

Once you’ve done that, save your service and name it something that you can find later.

Now you’ll need to give Automator and Keynote access to control applications. First, open up “Security and Privacy” then highlight the “Privacy” tab. A shorter way to get there is to just search for “accessibility” and click the option below.


Then authorize both “Automator” and “Keynote” to control your computer.


Almost there! Now we just need to set up a keyboard shortcut so that we can run our service. Open up the keyboard settings in “System Preferences”. Under the “Shortcuts” tab, click on services in the lefthand column, find the service you created, in my case it was called “Syntax Highlighter” and assign it a shortcut (I used “⌘F10”).


Phew. Now, if all went well, you should be able to open Keynote, highlight some text, press ⌘F10 (or your shortcut of choice) and enjoy your beautifully highlighted source code!

Turn this:

Screen Shot 2015-10-06 at 12.36.19 PM

Into this:

Screen Shot 2015-10-06 at 12.36.48 PM

Bonus: Chrome DevTools theme!

I use a lot of Chrome DevTools and I find the color scheme to be instantly recognizable and familiar.


I created a theme for highlight that mimics that style. It’s not exactly the same, I added slight highlighting for methods and greyed out operators a little because I find that more useful for presented code.

If you want to use it, create “chrome-devtools.theme” in your highlight theme directory which you can find that by running “highlight -w”. Add the following to that file.

Description="Chrome Devtools"

Default = { Colour="#000000" }
Canvas = { Colour="#ffffff" }
Number = { Colour="#1c00cf" }
String = { Colour="#c41a16" }
Escape = String
StringPreProc = { Colour="#c41a16" }
BlockComment = { Colour="#047604" }
PreProcessor = { Colour="#c41a16" }
LineNum = { Colour="#808080" }
Operator = { Colour="#999999" }
LineComment = BlockComment
Interpolation = Escape

Keywords = {
 { Colour= "#aa0d91" },
 { Colour= "#aa0d91" },
 { Colour= "#aa0d91" },
 { Colour= "#003377" },

Good luck and please comment with any improvements or changes!

There is no “new game” experience anymore.

My four and a half year old son, Finn, loves video games. He loves watching me play, he loves (trying) to play them, and he loves watching videos about video games.

It’s a really excellent bonding experience between us that I cherish and look forward to. I had stopped playing games for the longest time and having children has given me reason to partake in a lot of that fun all over again.

I remember how excited I would be to pick up a new game for my SNES some 20+ years ago. I remember saving up allowance for games like Secret of Mana and Illusion of Gaia. I would spend so much time turning the box around in my hands before opening it and then spending ages reading through the instruction manual, admiring the art and reading the story and details for every aspect of the game.

Finally shoving the game into the console and sliding the power button was magical. It was the culmination of so much excitement and anticipation. Those moments with my sister, friends, and cousins still rank high as some of my fondest memories growing up.

Finn has vague notions of what currency is and basic ideas about what things cost and how long it might take to save up for a game or toy. It’s not something that happens too often so we’ll sit together and look over a list of games and figure out which one we want to get. We’ll look at videos, screenshots, and reviews to make sure this is something he’s confident he should spend his (my) money on.

Finally, after all the saving, preparation, and planning, we head to Toys ‘R’ Us (or whatever) to finally purchase the game. After a quick romp through the store and the eventual transfer of goods, we’re back on our way home. We could open the game in the car so Finn has a chance to pore over the instruction manual except there is no instruction manual. There is only one sheet of printed paper in the box. One side is an advertisement for an extremely shitty movie’s release on blu-ray, the other side is an advertisement for a, hopefully far less shitty, comic book.

Once home, we eagerly pop the game into the console only to be met with an installation message. Don’t worry, it only takes about 30-60 minutes to install, so we wait.

Then we install a 9 gigabyte update for the game.

For those who haven’t played around with this generation of video game consoles, you may have assumed “gigabyte” was a mistake on my part. It wasn’t. A 9 gb update on the Xbox One isn’t even the largest I’ve seen.

And that’s it. Finally we get to play the game but at this point there is no “new game experience” anymore. What remains is a fetid puddle of lukewarm shit.

So What’s the Deal with Shape Security?

If you have interacted with me at all over the past 8 months I’ve probably mentioned something about the company I work at, Shape Security. If you knew me before you’ve probably wondered why I ever took a job at a hardware based security company. After running free community JavaScript training courses, speaking at web conferences, contributing to open source JavaScript tools, and running JavaScript meetup groups it would seem as though I’ve sold out to the highest bidder trying to get rich quick in Silicon Valley, which is very far from the truth.

That truth is that I joined Shape because it was probably the best opportunity I’ll have in my life to do something truly unique and valuable with incredibly smart people. Shape ended up being more of a web company than a security company.

  • Did you know that Brendan Eich is an advisor to the company?
  • Did you know Ariya Hidayat is the VP of engineering?
  • Did you know that Shape has released an open source JavaScript AST Spec (authored by Michael Ficarra and Bei Zhang)?

Shape, at its core, wants to deliver a solution that simply prevents web sites from being automated. Automation is seen as one of the clearest threats to privacy and security now and in the future. Have you ever been warned to change your password after hearing of sites getting hacked and losing umpteen million users’ email addresses and passwords? The biggest reason those breaches are a problem is because attackers will use automated tools to try and find out which user/pass combinations also work on other sites (an automation technique coined “credential stuffing”). This is only one of many, many, different problems that web sites face and why Shape has such a crazy valuable product in its hands.

If we get it to work.

This problem is hard. Really hard. You just won’t believe how vastly hugely mindbogglingly hard it is…

The way we’re approaching the problem is by developing a device that automatically transforms, modifies, & instruments web content on the fly. All without changing the end user experience and, preferably, without much configuration. Our poster example shows one seemingly simple technique we leverage to disrupt automation, basically just encoding ids, classes, and names of HTML elements every request and decoding them on the way back through. For example

<input id=username name=username>

gets transformed to

<input id=XNnatom3 name=a8zkahtk>

At first glance, the idea seems neat and understandable. At any slight depth, though, the idea quickly loses merit as the problem space is recognized to be paralyzingly vast along with the technique alone being virtually ineffective. Anyone with web experience can enumerate a dozen ways to retool around that technique and it still takes a massive amount of foundational work for us to even be able to do that at all. But, at Shape, there is clear awareness of the difficulty, and an understanding that this is a long term investment that will take a while to get any good at all.

Well that was a while ago and, now that it’s been a while, it’s getting good. Quite good. And it is fun as hell getting there. That technique above is one of many composable countermeasures that, when combined randomly, make it incredibly difficult to reverse engineer and automate a web application.

We’re based in the bay area and, like any company based in the bay area, we’re “always hiring.” If you’re interested, reach out. This is an odd company with odd needs, so lunch, coffee, or beer is happily on me if you just want to ask a few questions :-)

The Single Worst Thing about JavaScript

There are many weird things about JavaScript, the DOM, and related web tech. Many quirks, oddities, frustrations, and wtfs.

But there is one “worst thing” and the worst thing in JavaScript is String.prototype.split() (es5

String.prototype.split() is defined to take a separator and a limit as its arguments, operating on the “this” object internally for the string object to operate on. The way “limit” works is what makes this the worst thing about JavaScript.

In ruby, The separation at the split is done at most limit-1 times, with max limit number of elements returned.

> "a-b-c-d-e-f".split("-",3)
=> ["a", "b", "c-d-e-f"]

Java has the same behavior

String[] parts = "a-b-c-d-e-f".split("-", 3);
=> ["a", "b", "c-d-e-f"]

Perl has that same behavior as well

=> ["a", "b", "c-d-e-f"]

In python, the limit is the number of times the string is split on the separator, with the final element of the array being the rest of the string (split max limit times, max limit+1 elements returned). It’s not the same, but you’re still getting all the parts necessary to do what you need.

>>> "a-b-c-d-e-f".split('-',2)
=> ['a', 'b', 'c-d-e-f']

In JavaScript? Well, this is what you get in JavaScript:

=> ["a", "b"]

What happens to the rest? Who knows! Who cares, right? That isn’t useful at all! Don’t even pay attention to the fact that the limit is completely irrelevant and can be easily (and more intuitively) attained by “a-b-c-d-e-f”.split(‘-‘).slice(0,2).

And that is the worst part of JavaScript.

Everything else is mostly OK.

Over the years i’ve amassed a decent amount of git knowledge but still find myself googling obscure details rather than hitting the man pages. The search results inevitably lead to stackoverflow where I need to figure out which answer is relevant to the my problem (pro tip: it’s rarely the accepted answer) or some blog where the solution is described in great detail though without an actual command line example.

I can make do, but I’ve found people new to git struggling over and over and over again.

So I started to organize all the answers to the questions I received and put them together on a website :

The goal is to have concise, linkable answers to common problems and very little more. It’s hosted on github at jsoverson/gitfaq, appropriately, so changes can be made in the form of pull requests.

Hope it helps!

Animated GIFs in Keynote

The Keynote update has blown my mind with its lack of functionality ever since day one, but I’ve finally found out how to get animated gifs working in it now.

Rename your gif’s extension to .mov and drag it into keynote. Keynote will warn you about not being able to play that movie on iPad or iPhones, prompting you to optimize it, which will turn the gif into a legit movie which Keynote will play just fine.

OSX ping & Cannot allocate memory

[09:58:20] 2 $ ping
PING ( 56 data bytes
ping: sendto: Cannot allocate memory
ping: sendto: Cannot allocate memory
Request timeout for icmp_seq 0
ping: sendto: Cannot allocate memory
Request timeout for icmp_seq 1

I’ve been having a pain in the ass time troubleshooting a laptop’s sporadic issue with connecting when waking up after sleep. I narrowed it down to sleeping when on VPN and, previously, only a restart would help.

My routing table looked like this.

[10:10:23] $ netstat -nr
Routing tables
Destination Gateway Flags Refs Use Netif Expire
default UGSc 28 4 en1
127 UCS 0 1 lo0 UH 5 1211656 lo0
169.254 link#5 UCS 0 0 en1
192.168.1 link#5 UCS 3 0 en1 0:25:9c:67:d1:5c UHLWIir 26 58 en1 1146 ff:ff:ff:ff:ff:ff UHLWbI 0 28 en1

I was able to solve this by removing all routes to my local network, then turning off wifi and reconnecting to my home network.

[10:10:40] $ sudo route delete

Hope this helps someone else!

Using github pages on github enterprise

Most github enterprise solutions I’ve seen didn’t configure subdomains per-user like github public does, and I didn’t find any obvious documentation as to how to use gh-pages outside of that style.

For anyone in the same boat I was in, the url structure for github pages without using subdomains is :

http://[your github domain]/pages/[username]/[repo]/

Fix for League of Legends not opening on Mac

There are different fixes for different problems. My problem occurred while trying to open league while connected to wireless but behind a hotspot login gate. I got a UserKernel popup and then the launcher never started again.

I still had the .dmg from install, and the fix (after mounting the .dmg) was to copy the directory from the dmg to the installation dir.

$ mv /Applications/League\ of\\
Contents/LOL/RADS/system/ \
/Applications/League\ of\\
$ cp -R /Volumes/League\ of\ Legends\ NA/League\ of\\
Contents/LOL/RADS/system/ \
/Applications/League\ of\\

I sent this off to relevant people, but wanted to post a fix here in case it helps people searching google and avoiding forum posts because of all the noise.

The One Biggest Problem with Google Glass

After months of using Glass for a variety of purposes in a variety of environments I’ve found that I always end up at one situation that has no good solution.

What do you do with Glass when you don’t want to wear it anymore?

Where do you put it?

Glass doesn’t fold and is delicate, so where does it go when it’s not on your head? If you’re using the sunglass accessory then you have two pieces to manage when you want to go Glass-less.

Glass comes with a carrying bag but it is bulky and still can’t be shoved just anywhere lest you want to risk snapping Glass’s frame. If you’re a typical guy you probably don’t have any place to put the Glass bag anyway, women might have a purse big enough to fit it regularly. Even in my laptop back the Glass case barely fits and causes substantial extra bulk.

This is the best solution I’ve been able to come up with. Does this look convenient to you?

This is how I carry Glass and the sunglasses while out.
This is how I carry Glass and the sunglasses while out.

When would you want to take Glass off?

All the time

  1. When you meet someone, it is polite to take off Glass to show you are giving full attention.
  2. When you’re in a sensitive environment, it’s polite to not wear Glass so people know you are not recording.
  3. When the battery dies.
  4. When you can’t use it (sun, noise, no data, etc)
  5. When your phone dies or doesn’t have service, Glass’s usefulness decreases.
  6. When it becomes too uncomfortable to wear.
  7. When you’re doing anything remotely athletic. Sweat and Glass don’t mix.
  8. When your doing anything that could damage Glass (playing with kids, going on theme park rides, wearing hats)
  9. When you don’t want to look like a tool wearing “Google Glasses”
  10. When you’re in a place that bans Glass.
  11. and so much more.

Glass isn’t useful and comfortable enough to want to keep on at all times so that leaves a lot of times that I want to keep Glass off. If it’s not convenient to transport off my head then it sits at home, unused.