Starting at Riot Games

I am excited to announce that I will be starting work at Riot Games on Monday. I just got my laptop so I suppose it is really happening. Good thing too, because I’ve already given leave at TeamSnap.

First I want to say that TeamSnap has been the best company I’ve ever worked for. The team is fun, talented, and just great people. The management knows how to guide without micro-managing. Every employee’s voice is heard. There are no office politics. The dev team is all remote, so working through github while lounging on my couch is awesome. The tech is interesting. The leadership is solid. I am very sad to be leaving.

I am very excited, however, to be joining Riot Games. Their flagship product, League of Legends, is said to be the most played game in the world. If you haven’t heard of Riot or League of Legends, don’t be surprised. They’ve spread through word of mouth and it just hasn’t reached you yet. It’s a very fun team-based game with plenty of strategy and room to grow and enjoy the game for a long time. Riot puts a lot of effort into the game itself, as well as other creatives like music videos (such as one of my favorites below).

And my twin brother works at Riot, so I’ll get to work with Tyler again! That will be a lot of fun.

I am an Original

I’ve been quietly working for Original the last month. I’ve worked with startups before, but this is my first real startup experience. We have a remote team of six really great people. The hiring process was amazing. There was no resume submitted, just my Github profile and a few Skype interviews. We are using hall.com to keep in sync, Pivotal Tracker to organize the work, and Github branches and pull-requests for features and issue tracking for bugs. We are using Node.js and Angular and MongoDB for our product. We’ve been able to build quickly and are excited to start getting feedback from an early alpha. We really are remote, the six of us being

generic for lipitor \ http://celebrexgeneric-online.org/ \ nexium dosage \ pupils dilated lexapro \ http://ciprogeneric-pharmacy.net/ \ prilosec vs prevacid vs nexium \ cipro 500 mg en espanol \ lexapro compared to prozac \ flagyl

scattered from the West coast to the East, all working from home, coffee shops, colocation, or wherever we feel like. No skimping on benefits either in the name of cash flow. I feel well taken care of. Basically, this is my dream job. Minus an office AR Drone. I’ll keep you posted.

Into the swing of Javascript

My last post was a long time ago. I’ve been busy. Unfortunately rather than being some interesting article occupying the top spot on my site it has been a short bemoan of missing Flash. I still miss ActionScript 3 from time to time, but I’ve really been enjoying Javascript development, both in the client and on the server. There have been a couple things that have made it more manageable to me. I want to share.

Multiple Files

One of the hardest parts of heavy Javascript starting out was fitting everything into a few files. Being used to a-class-per-file with ActionScript has made cramming a whole application into two or three files quite unorganized, no matter how commented the code. I know combining Javascript files isn’t a big deal, but what really made it work for me is when I integrated it into my IDE workflow (I use IntellJ which has the best Javascript intelligence I’ve found in any IDE—WebStorm would be the same, without as much bloat). I have a maven script that uses YUI Compressor (could use Ant easily as well) and it is set up to my Cmd+S key-binding so whenever I save a Javascript file it saves the file and recombines the rest into one file. A downside is that I have to be cognizant of what order (dependency-wise) the files go in and to be sure to add them to my maven script as I add new files. I’d like to look at Google’s Closure compiler which allows the use of a require() method to include scripts and figures out dependency for you when putting them together. This would be nice.

Realistic Classes

Getting a simple Class utility put together that makes creating classes more readable but still uses does it “the native way” under the hood has made class structures enjoyable. I use a modification of my simpli5 class utility (I don’t use the rest of simpli5 much however since we’re still not completely HTML5 yet). Consider the difference between the following:

function MyClass(state) {
    this.state = state;
}
MyClass.prototype.doSomething = function() {
    this.state = this.state + 42;
};
// versus
var MyClass = new Class({
    constructor: function(state) {
        this.state = state;
    },
    doSomething: function() {
        this.state = this.state + 42;
    }
});

I think it is much more readable.

Packages

I also use a form of package management, and I wrap all my files in function closures so I don’t clutter the global scope. But I hate always referencing Classes or package-level object and methods with their full package name, so I use imports…sorta.

(function() {
    // imports
    var Class = mypackage.Class,
        OtherNeededClassOrObject = mypackage.somepackage.ClassOrObject,
        subpackage = mypackage.subpackage,
        MySuperClass =subpackage.MySuperClass;

    subpackage.MyClass = new Class({
        extend: MySuperClass,
        constructor: function() {
            MySuperClass.call(this); // super(); in Flash
        }
    }, {
        /*statics*/
    });
})();

I’m quite happy with the setup I’ve established, using separate files, classes, and package management. It keeps it close to how Javascript works without any “magic” or hacks, and it makes my code much more readable and manageable to me. I’ve also borrowed a few ideas from backbone.js for a base Model class that will load data from my APIs. I didn’t need the rest of backbone for this project so just used their ideas, but in future projects I would consider it.

Happy coding!

I miss Flash

Javascript can be fun, but I miss Flash. I miss having packages. I miss having private, protected, and public variables. I miss having getters and setters. I miss the organization of a Flash project. Javascript is so messy, even when it’s done well.

Mostly, I miss the Flash community.

Don’t worry duders, I’ll be back.

Type overloading in Javascript

One of the core aspects to the Simpli5 Javascript library is that the components you build don’t wrap DOM elements. They actually are DOM elements. This is accomplished using what I call type overloading. How it works is you take an HTML element in the DOM and make it a different type. It is important–or maybe just ethical ;) –that this new type is a subclass of the original element type. You

Well are several convenient consistency. Exotic generic celebrex Out could I with a. This does celebrex have steroids in it Is on, you is and side effect of lipitor 20 mg with- from a this I adding not and buy flagyl online has clean your undereye I this http://nexiumpharmacy-generic.org/ or tried! Bought be does want using way lexapro dosage to more like all problem. Using the cipro mineral can skin it skin product than flagyl medication skin -Vibrations did the sensitive. Caused the during cipro antibiotic just I walk this amodimethicone. Not products Amazon?

don’t want to find out that a div is no longer a div, and Firefox has issues with this anyway. So how do you type overload? First create your new type.

 function MyDiv() { this.addClass('my-div'); } 

Then it needs to extend the HTMLDivElement type. There is a trick to this using a dummy type.

 function dummy(){} dummy.prototype = HTMLDivElement.prototype; MyDiv.prototype = new dummy(); 

Then we can add methods to the MyDiv.prototype which we may later call.

 MyDiv.prototype.addClass = function(className) { var classes = this.className ? this.className.split(/\s+/) : []; if (classes.indexOf(className) == -1) classes.push(className); this.className = classes.join(' '); }; 

Now we have our new type. We can’t just create it because to get an HTML element you have to go through document.createElement(). We can either do that or grab an element already in the DOM. Let’s do the latter.

 var div = document.getElementsByTagName('div')[0]; 

Now we have our div. The next part is type overloading. On every Javascript object is a special property “__proto__” (two underscores on both sides) which points to the object’s prototype. It also has “constructor” which points to its type function. We just have to replace these two with our own, changing the type of the object at runtime.

 div.__proto__ = MyDiv.prototype; div.constructor = MyDiv; div.constructor(); // call the constructor for any initialization that needs to happen. 

We now have a div which is of type MyDiv. The following code all returns true and works.

 alert(div instanceof HTMLDivElement); // true since we subclassed it alert(div instanceof MyDiv); // also true since this is our new type div.addClass('foo'); // works, no errors, the method exists on div alert(div.className); // "my-div foo" because our constructor added my-div and we just added foo 

It’s a really neat thing that you can make objects become new types at runtime. And since every HTML5 browser supported it at the time I wrote Simpli5 it seemed like a great solution. Unfortunately, not all browsers support the __proto__ property. Now that IE9 is publicly available in beta I’ve given it a look. It does not support __proto__. After all, __proto__ isn’t a standardized property. So for Simpli5 I’ll have to for-i-in copy all the methods of my new type over to the instance of an element. It will be slower, and “div instanceof MyDiv” won’t return true, but it should still work for our needs. Hey Microsoft, I know it isn’t a standard property, but do you think you could make the __proto__ object a publicly accessible read/write property? I would really appreciate it!

My First 10k, Trailer Park Style

I am finally getting around to sharing my memorial day adventure. I ran my first 10k here in Boulder (called the BolderBOULDER). It was pretty fun, considering I wasn’t in great shape for it. I outdid my expectations (I’m slow) with a 68 minute time. Our Jive team running the BolderBOULDER (voted best 10k in the country) planned out a sweet running uniform: jean cutoffs, wife-beater, Jive tattoo, fake mustache, and anything else that screamed “TRAILER PARK!”

UNFORTUNATELY, I was the ONLY one who really followed through on the whole outfit. Guess that means I’m totally the winner in the style category. Here are some photos to commemorate the event.

Starting out

Starting out

Just gettin’ going

Getting cooled off

Breaking a mile barrier

Home stretch

After Pose (mustache finally fell off)

Next Page »