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!

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.

Consider Reinventing the Wheel

“Reinventing the wheel” has earned such bad connotations in the software development community that it’s hard to pinpoint when it turned from “if what exists is good enough, use it” to “if somethings exists, don’t think you can do better.” The emotion behind both those statements is wildly different and many people use the saying to push down people trying to do great things. Even if they fail at the immediate task, they might someday succeed. Don’t be the one who contributes to an extinguished passion.

When I was 13 someone said to me, “everything that can be done, has been done.” Engineering is what happens when you tell that person, “Fuck you.”

“Wheels” are invented by people. “Best Practices” are opinions of people at the time they are needed. Both have a very high chance of retaining relevance over time but should always be reconsidered. You can be the one to reconsider them. You don’t need to wait for a Fowler, Crockford, or a Katz to do it. Maybe you’re smarter than each of them.

Languages can stand to be redefined. New languages are important. You could create one today. Existing libraries aren’t the pinnacle of human achievement. You could be the one to make something better. Reinvent the wheel. Right now.

New wheels will always be developed regardless of what anyone says, but the people who are more likely to be able to develop a new wheel that better serves others are also more likely to be damaged by adverse community reaction. See the very real Dunning-Kruger Effect to read about why smart people doubt themselves and less-than-capable people have unbridled confidence.

Stop telling people “Don’t Reinvent the Wheel” as if you know better. Ask them questions.

“Why is this better?”
“What is this solving?”
“What did you learn?”

When you’re done, ask yourself if there’s something you should have “reinvented” by now.