Better code navigation on GitHub

| Tags: codenav, extensions

GitHub is great, but slightly lacking when it comes to browsing code in a project. Its code search feature is not well-suited for doing things like browsing in a file, tracking down references, and finding usage examples within a repo.

I built Chrome and Firefox extensions to fix this. CodeNav is an open-source project that adds several code navigation features you'd expect from most IDEs.

Token highlighting

Finding matching variables or objects can be difficult even with syntax highlighting. Most existing IDEs highlight similar tokens, making it easy to immediately see variable usage at block or function scope.

CodeNav

CodeNav indexes each token defined by GitHub's syntax highlighter, storing the corresponding elements for efficient highlighting.

Jump to usages

Now that we have highlighting for our objects and variables, we need an easy way to navigate them.

Many IDEs use the scrollbar as a virtual indicator of where the highlights are in the document. I wound up with a percentage-based indicator that conveys information fairly accurately:

CodeNav scroll indicators

Clicking markers will jump to the corresponding variable.

It was a little tricky to get these right. Placement varies slightly based on
OS and browser, but the overall effect is consistent.

Project-wide search

We have some good tools for browsing within files, but what about other files?

I decided to use GitHub's built-in code search and integrate it more directly into the code browser. Now, clicking on a token will search for it across your current project. Search results are shown in the bottom third of the page:

CodeNav search

GitHub's code search leaves something to be desired (it only
returns one result per file), but overall is very useful. I think CodeNav
adds an enormous amount of practical utility to GitHub code search.

Why you should build a browser extension

Browser plugins are an entry point for understanding how sites like GitHub run under the hood. I think extensions are really underutilized as tools to enhance user experience and solve common pain points on popular sites.

CodeNav is a start; I can't really use GitHub without it anymore. But there's still a lot more that can be done. It doesn't work on diffs/pull requests, and I'd like to get multiple search results per file. And someday I'd like to integrate with Sourcegraph, which is a great service that statically analyzes code.

You may want to check out CodeNav, or look at its source, or follow me on Twitter!

Mint is misleading users about heartbleed (and may still be vulnerable)

Update April 15, 2014: Mint followed up and made a clear statement that the site has never used a version of OpenSSL vulnerable to Heartbleed. This is great news. Hopefully in the future Mint will move quickly and definitively to address security concerns.

Mint.com is a popular personal finance site used by over 10 million people. Users enter bank logins and Mint aggregates everything so you can see your financials in one place.

When I heard about the Heartbleed vulnerability, I immediately thought of Mint. They have all my financial logins and sensitive information. All my bank information is potentially compromised.

Unfortunately, Mint has bungled their response to the Heartbleed and may still be exposing users to attack.

April 9th: Mint confirms vulnerability

Heartbleed became public on April 7th. Mint made no official statement, but on April 8th someone asked on their public support forums whether the site was vulnerable.

Two days after most of the internet found out about Heartbleed, a Mint representative apologized for the delay and replied:

Mint's response

Mint's official response to Heartbleed.

Jami's post, stating that the team was "upgrading to protect against the vulnerability," is a strong indication that Mint was vulnerable to Heartbleed.

Mint's old cert

After confirming that the vulnerability was patched, people noticed that Mint is still using an SSL certificate from February. This means that attackers can pose as Mint and any "secure" connection to Mint still cannot be trusted.

As a result, users continued to complain that Mint is still vulnerable to Heartbleed-related security problems.

April 10th: Mint is no longer vulnerable?

The next day, Mint made a reply that puzzled everyone:

Mint reply

Mint is "not affected" by Heartbleed and we have nothing to worry about.

This post was extremely unhelpful. Of course Mint is not affected post-fix. The question is, was it affected during the 2 years the vulnerability was in the wild?

Mint's contradictory statements

Jami's 2 and 3-sentence responses are all we got from Mint, a financial service with information on over 17 million financial accounts. Unfortunately, the posts contradict one another and both cannot be true.

Possibility 1: Mint's first post is true

The first official response states that engineers are taking action by applying server upgrades to fix the vulnerability.

In other words, Mint was vulnerable. But because the site is using an old certificate, it is still not safe to use Mint.com. Over a week after the vulnerability became public, all Mint.com users are at risk.

Possibility 2: Mint's second post is true

The second official response states that "Mint is not affected" and we have nothing to worry about.

If we interpret the second post generously and assume Mint was never affected, the first official statement is false or at best ambiguous. What does it means to update servers "to protect against the vulnerability" if it was never a problem?

On the other hand, if the vulnerability existed and was closed, someone at Mint doesn't understand the vulnerability and the need to change SSL certificates. In other words, one of the world's largest online finance tools is still vulnerable.

A lesson learned

I need to change my financial passwords regardless. But it's been over a week and I still can't trust my Mint login. Even once it's fixed, do I want to use a finance site that does not take security seriously and cannot issue a coherent statement to address one of the largest security holes in history?

LastPass and Mint

LastPass agrees - Mint may still be vulnerable.

Predictably, the remainder of the support thread is people trying to reconcile Mint's responses. Some assume the worst, some give Mint the benefit of the doubt. The analysis is completely open to interpretation.

Mint, your two short replies to the largest security vulnerability ever fundamentally contradict one another.

A company that handles sensitive financial information needs to communicate security clearly and effectively. Otherwise, users can't trust the service. Mint owes its users an official, unambiguous technical statement.

Making a skydome in three.js

| Tags: webgl, threejs

In three.js, the illusion of a sky is often made using a "skybox," a cube made up of 6 images that fold up neatly. The user's perspective is placed within the cube, giving the illusion of being contained in a 3D environment.

This tutorial explains how to create a "skydome" or "skysphere." Similar to a skybox, a skydome or skysphere is a way to create the illusion of a sky in your 3D environment.

Using three.js's SphereGeometry, it is quite simple:

var geometry = new THREE.SphereGeometry(3000, 60, 40);  
var uniforms = {  
  texture: { type: 't', value: THREE.ImageUtils.loadTexture('/path/to/my_image.jpg') }
};

var material = new THREE.ShaderMaterial( {  
  uniforms:       uniforms,
  vertexShader:   document.getElementById('sky-vertex').textContent,
  fragmentShader: document.getElementById('sky-fragment').textContent
});

skyBox = new THREE.Mesh(geometry, material);  
skyBox.scale.set(-1, 1, 1);  
skyBox.eulerOrder = 'XZY';  
skyBox.renderDepth = 1000.0;  
scene.add(skyBox);

Notice that we reference some shaders #sky-vertex and #sky-fragment. For a simple sky, these shaders just map to your texture and not much else:

<script type="application/x-glsl" id="sky-vertex">  
varying vec2 vUV;

void main() {  
  vUV = uv;
  vec4 pos = vec4(position, 1.0);
  gl_Position = projectionMatrix * modelViewMatrix * pos;
}
</script>

<script type="application/x-glsl" id="sky-fragment">  
uniform sampler2D texture;  
varying vec2 vUV;

void main() {  
  vec4 sample = texture2D(texture, vUV);
  gl_FragColor = vec4(sample.xyz, sample.w);
}
</script>

Asterank uses this code to render the ESO's famous high-resolution panorama of the milky way:

ESO milky way panorama

And in the simulation:

Asterank with galaxy panorama

Why not SkyBox?

It can be frustrating to find good skybox images. You can create your own via Blender, but the process is somewhat involved. Depending on your image, you may have to do some manipulation to eliminate seams and other graphical artifacts. In the end I wound up downloading a bunch of software and not being happy with the outcome.

In my opinion, it's much easier to create a 'skydome' or a 'skysphere' with just a single image.

There are some tradeoffs, as noted in this stackoverflow post. But in most cases, I find it much easier to deal with a single image instead of 6 cube images.

Happy coding! Follow me on twitter @iwebst.

My year in side projects

| Tags: retrospectives

Side projects are a good way to stay sane and keep sharp. 2013 was a crazy year - my side projects were a lot of fun and they opened many opportunities.

6 total worth talking about, in chronological order:

Side projects

Verified Facts

Verified Facts generates random conspiracy theories. They sound crazy but they're close enough to real ones that it can be hard to tell the difference. This was a lot of fun to make.

Conspiracy excerpt

It went viral with over a half a million conspiracies generated. The highlight was when Neil Gaiman tweeted it to over a million people. Viral traffic spikes can be thrilling and nerve-wracking. We endured it with no downtime on a ec2 micro thanks to some clever caching + redis on top of mongo.

11 months later, the site ranks well for many conspiracy searches and is being found by people who aren't in on the joke. Here's a sample of recent search traffic:

conspiracy web traffic

verifiedfacts.org is making the world a worse place.

I wrote a more in-depth post on it, including an explanation of how it works here.

Watchtower

I built Watchtower with a few other guys from Room 77 for Jason Calcanis's LAUNCH hackathon. It's a service that watches your competitors' websites and lets you know when they change certain things. This is good for detecting their A/B tests, new marketing campaigns, etc.

Watchtower

Watching Amazon's top ad.

We unexpectedly made it past the first couple judging rounds. Before we knew it we were presenting to an audience of 1,000+ conferencegoers in a huge auditorium. I'm including this embarrassing video for completeness.

I'd love to work more on Watchtower because I think the idea is really compelling. Unfortunately it's hard to corral 4 hackathon participants to work on things long term. We're considering some offers to sell it.

Asterank

My side-project-turned-startup Asterank was acquired by Planetary Resources, the asteroid mining company. I started the project in 2012 and in June this year I signed the papers.

Woah.

I also rolled out a crowdsourced asteroid discovery app called Asterank Discover. To date, people have reviewed over 115,000 images and spotted hundreds of potential asteroids, a significant contribution to science.

Now Asterank Discover is getting rolled into "Asteroid Zoo" at Planetary Resources, which was in the news recently when we announced our partnership with NASA, the Adler Planetarium, and the Catalina Sky Survey.

The other cool part about my Asterank project is that it got me several speaking invitations and job offers.

In June I spoke at ideacity, which is like Canadian TED. It was an awesome experience and I met tons of fun and interesting people. It was also a good exercise in public speaking, which I don't do much.

And this November I spoke at the World Technology Awards in New York, where I was nominated for an award in the Space category. My competition included Elon Musk (SpaceX, Tesla), the founders of Planetary Resources, and the director of NASA AMES, so I was honored to be nominated and ok with not winning.

At the World Technology Awards in NYC. Yeah, I wore the same thing.

This project was the catalyst for my full-time plunge into building spacecraft. I could write a lot more about my journey with Asterank, but I've written about it in the past and I don't want to bore you to tears.

Asterank is open source.

autoreload.js

A tool for frontend developers that automatically refreshes the page when you make changes to files. I made this because pressing F5 sucks. HN didn't like it but about 40 people per week install it via npm, which is fine by me.

autoreload.js

Not as interesting as space travel.

Open source here.

Candid Candidates

I moved to Seattle and figured I had to try a Seattle hackathon. I joined the meetup group and saw that there was a Seattle Open Government hackathon the next week, hosted by Lincoln Labs.

We built a chrome extension that annotates news sites with important political context, campaign donations, and contact info. You hover over politicians' names and get that info.

Everyone knows that politicians are bought and sold, but that info is hard to get and it's not there when you need it most. This is a step toward passive political consciousness.

Hover over Ted's name to get his contact info and see who gives him money.

We won $1500 (2nd prize). It's also open source, but needs some cleanup. One of my first goals for the new year is to get this in working order so I can promote it and make the world a better place.

Looking forward

My birthday is also at the end of the year, which makes me extra reflective. I don't know where I am headed in nearly any aspect of life, but these projects give me a way to explore options. Next year I'd like to focus on my relationships and being healthy. With luck, I'll figure all that out while still building interesting things.

Follow me @iwebst or check out 2014 in side projects.

autoreload.js: Instantly refresh the page as you code

| Tags: coding

Frontend developers constantly mash ctrl+R or F5 to reload their browser after every single code change. This is especially exhausting when you're working on mobile web and a refresh requires several taps. I grew tired of this and developed a soution.

Existing options

livereload - Costs money. But it will also compile your sass for you. Comes with point-and-click interface and browser extensions. A bit too involved and platform-dependent for what I wanted.

live.js - Constantly issues HEAD requests to determine if web resources have changed. This was no good for me because it pollutes the network debugging log and only works for js and css. I also want the page to reload when my frontend templates or backend view logic changed.

nodeJuice - Looks like it may include this functionality, but includes way more than I want.

Other browser and IDE-specific solutions - They're out there, but I wanted a general solution.

autoreload.js

Autoreload runs either as a standalone script or as middleware if you're running a connect server with node. You run the script, add a little js to your page, and then you can enjoy automatic refreshes whenever you make edits to your files.

For example, running the following command will watch 3 directories and a file called settings.py for changes:

$ autoreload js css templates/main settings.py

It gives you a snippet to include in your base HTML template:

<script src="http://localhost:60000/autoreload.js"></script>

<!-- Sometime later ... -->

<script>  
AutoReload.Watch();  
</script>

That's it! Pretty easy.

Installation via npm:

$ npm install -g autoreload

It works by long polling an endpoint that updates a timestamp when files change. Unfortunately it assumes jQuery is available. That's a TODO item.

Check it out on github for the full README and code (MIT license).