Matt Stills

Web Developer & Atlanta Native

Matt Stills

Web Developer & Atlanta Native

Client-side

JavaScript

JavaScript has exploded over the past decade. It is now even a compile target for other languages like CoffeeScript, bolstering its reputation as "the bytecode of the web." Beloved for its speed and dynamism alike, JavaScript is one of my all-time favorite languages. Once you harness its asynchronous nature and "unorthodox" prototypal inheritance system, the true power of JavaScript is revealed.

Web Frameworks

When writing JavaScript for the browser and working with the DOM, libraries like jQuery and Zepto (if you need to go light) make life relatively painless. They are also take care of the nastiest cross-browser issues for you. Who doesn't love jQuery? John Resig is basically an internet hero.

Templating

Separating logic from presentation is an organizational technique that becomes invaluable when designing any sufficiently large web apps. Taking the time to craft tidy and flexible templates will yield long-term benefits. As a result, JavaScript string-based templating engines have become popular over the past few years. I am partial to Handlebars.js and Dust.js.

HTML 5 / CSS 3

This one is pretty self-explainatory. These are the essential building blocks of the web. Modern web layouts should take advantage of the latest and greatest whenever possible! The modern spec for HTML and CSS are exciting and finally starting to gain appreciable support amongst various browser vendors. Webpages are already starting to look and feel better as a result.

Responsive Design

In this day and age, there is a vast range of web-enabled devices that could be in the hands of your user. And guess what? They expect it to work on that device. Crafting designs that "respond" to any resolution is a challenging but very rewarding process. The extra work will certainly be appreciated by your users when they can view (and more importantly, use) your site on whatever their device of choice be it phone, desktop, tablet, or an internet-enabled refrigerator.

Cross-Browser

It is tempting to take advantage of all those shiny new web features that HTML5 and CSS3 enable. However, it is important not to leave older browsers and their respective users behind in the dust. Sometimes websites just need to work in IE 7 or Firefox 3.5. Graceful degradation, progressive enhancement; there are many techniques out there for delivering the best to the modern browser crowd while still having a usable site for everyone else.

Server-side

Node.js

Finally JavaScript has been freed from the browser! Node.js is a server-side JavaScript engine which is growing in popularity now that the API has stabilized (somewhat). It seems to be an especially good fit for mobile platforms and web services. Meanwhile, thanks to its very capable eponymous package manager, Node has a great community to boot that is getting bigger every day.

PHP

Love it or hate it, PHP powers a vast portion of the web. It is of course, the flawed but ubiquitous and strangely powerful language doing the heavy-lifting behind the scenes at sites such as Facebook and Wikipedia. Taking advantage of the latest features in PHP is a must though and I prefer to use a framework such as Fuel. The language has grown (read: improved) a lot over the past few years.

Drupal

Drupal is the extremely powerful and flexible open-source CMS system written in PHP. It probably would surprise you to find how many of your favorite websites run on Drupal. I have experience with versions 6 and 7 primarily writing custom modules but also with setting up and/or maintaining Drupal sites that employ popular 3rd party modules (Views, CCK).

Wordpress / WP VIP

Sometimes you don't need all of the functionality and weight of something like Drupal. Also written in PHP, Wordpress fills an important niche and probably powers many of your favorite blogs. However, the CMS has really matured and become closer in feature-set to Drupal over the years. I also have experience maintaining sites and writing plug-ins for the premium Wordpress VIP hosting service.

Apache / Nginx

Everyone knows Apache, by far the most popular web server out there and cornerstone of the famous LAMP stack. Knowing how to setup and configure an Apache server is a vital skill for modern web developers. Nginx is a new comer, but rapidly being adopted for its simplicity of config, scalability, and unbridled speed.

Freemarker

Freemarker is a templating system for Java. It is far more advanced (or, if you prefer, complicated) than some of the JavaScript string-based templating systems I talked about earlier. It can be used to perform logical tests and even allows you to create functions and macros to do some rudimentary programming.

SQL

When it comes to relational databases, there are many flavors of SQL that each have their own idiosyncrasies. I have experience with: MySQL, sqlite, and PostgreSQL. The database is such an important part of any webstack so knowing how to get the data you need out of one is an equally important part of any web developer's repertoire.

noSQL

Document-based or "schemaless" databases have become all the rage lately. They can be useful for storing certain types of data and have rightfully found their place filling a niche that traditional RDMS could not. Plus the RESTful APIs and JSON storage formats that are common to some noSQL DBs are especially convenient for the web. I have experience with CouchDB and MongoDB.

XSLT

Another technology that I have a bit of a love/hate relationship with, but regardless of how I feel, XML is still a very commonly used data format that has numerous general computing applications. XSLT is a powerful language that can bend XML to your will. I have experience using it to create HTML and JSON output, normally intended for further processing by a front-end scripting language.

Other

Social APIs

Every web developer probably knows (and possibly fears, or at least respects) social networking. The most important APIs belong to the big 3: Facebook, Twitter, and Google. I have worked with all of their APIs before to implement single-sign-on with oAuth and various other social functionality. I also have experience with Instagram, Flickr, and Last.FM.

Objective-C / Cocoa

When I finally got an iPhone some years ago, I immediately felt compelled to learn how to build apps for it. Enter Objective-C and the Cocoa Touch framework. Apple really put a lot of thought into their tools and it shines through in the quality of their 3rd party app offerings. xCode is a dream come true as far as IDEs go and possibly the only one I've ever enjoyed using.

Systems Languages

Although my main background and interests are in the web, I also have experience with C and Java. Java helped me learn about classical object-oriented programming and knowing C is important to understand what is going on under the hood in some of the other languages I use such as Objective-C and PHP.

Shell Scripting

As a web developer, I deal with a lot of UNIX/Linux systems on a regular basis. Aside from being able to get around on the command-line, knowing shell-scripting can vastly improve efficiency and allows me to automate tedious tasks that would otherwise be very time-consuming.

Operating Systems

Being comfortable and thus being able to work effectively in your operating system is important whether it is your personal computer or your company's webserver (or webservers!). I feel at home in pretty much all of the major/common operating systems including: OS X, Linux (Ubuntu), Unix/Darwin, and Windows 2000/XP/7.

Version Control

Hopefully programmers everywhere these days already understand the importance of version control, whether working on a team or solo, so there is no need for me to explain its merit. Many modern build and deployment systems are based off popular version control systems. I have experience with Git, SVN, and CVS. As a matter of fact, I use Git to version and deploy this website.

Adobe Photoshop

Though I'm not a designer by trade, possessing a general competency in Photoshop is a crucial skill for any web developer. It isn't uncommon to assist with cutting layouts, re-sizing/re-touching/editing images, making small tweaks to effects or copy, and optimizing assets for the web. Plus sometimes I do dabble a bit with design.

Excel Macros

This is about as far away from web development as I will stray. Microsoft Excel is a powerful data tool that I, like most of its users, have a bit of a love/hate relationship with. Nevertheless, knowing how to do some VB macro scripting comes in handy from time-to-time and it is definitely a niche skill +1 that can make life easier by automating data manipulation similar to how shell scripting automates operating tasks.

Testing, Building, and Deploying

The ability to test code is built into many modern build systems and I have begun to write tests for my JavaScript using frameworks like qUnit and Mocha. Those tests help catch regressions and prevent bad code from ever making it into production! I like Grunt for managing build tasks like concatenation and minification of project files. Then deploys can be done in a variety of ways; sometimes a simple Git post-receive hook will do or for more complexs projects, a whole management system like Bamboo.

The web moves fast. This space showcases projects I've been involved with over the past few years.

Sports Illustrated

  • SI Now

    SI Now is a live video hub designed for the eponymous show. There is a new episode every business day and the app cycles through three states: upcoming, live, and archived. Each is a slightly different view. Nailing down the state and temporal logic was somewhat challenging but the hub came together nicely. A carousel at the top lets you navigate through past episodes. It features a clip reel for each date as well as other widgets such as a poll and related episodes which can be manipulated via the CMS platform.

    Built with: JavaScript, Freemarker, Handlebars.js, Date.js

    View

  • NFL Draft Tracker

    For 2013, we totally re-designed the draft tracker experience for NFL. It is, for all intents and purposes, a single-page JavaScript app with a tabbed navigation. There are a variety of data-intensive views available. During the draft itself, the page was 100% dynamic and updated live similar to how the Gameflash apps work. This same app is also used as the foundation for the very similar NBA draft tracker.

    Built with: JavaScript, jQuery, Handlebars.js

    View

  • NCAAB Gameflash (Desktop)

    For the desktop version of NCAAB Gameflash, we had to make some low-level tweaks to the proven architecture that powers the other Gameflash apps. Again, we opted for very light usage of XSLT to allow for a nimble deploy flow. The architecture changes allow for coverage tiers as not all college basketball games get a full data feed. This app always knows what data it has and presents only what is available in a clean manner. Aside from coding the low-level changes, I mostly served as an advisor on this project so new develoeprs would have a chance to learn about the architecture.

    Built with: JavaScript, jQuery, XSLT, Handlebars.js

    View

  • NCAAB Gameflash (Mobile)

    A mobile-optimized version of the desktop app. Like its siblings, this app was built using Twitter bootstrap and has optimizations for portrait vs. landscape orientations as well as iPhone Retina. I handled a lot of the app development that included porting the desktop code over to our mobile-specific Gameflash architecture.

    Built with: JavaScript, jQuery, Handlebars.js, Bootstrap

    View

  • Brand Blogs (hosted with Wordpress VIP)

    These two 'brand' blogs were the first of their kind. Though a stable of sports-related blogs already existed within the SI network, these warranted a totally new design. Both are built on the Wordpress and hosted on their VIP platform using mostly custom plugins that we wrote from scratch to help promote SI's non-sports content. Wordpress widgets were also heavily utilized to allow unprecedented editorial control through the dashboard.

    Built with: JavaScript, jQuery, Wordpress, PHP

    View EM View SD

  • SI.com Network Bar

    This network bar was designed to work on any site. As such, it is a compact JavaScript-only solution that can easily be dropped into the <head/> of partner websites and the like. It serves as a real-time window into what is happening all over the SI network of websites and is powered by JSON feeds straight out of the main site CMS and from the Wordpress blogs' RSS.

    Built with: JavaScript, jQuery, JSONP

    View

  • NBA Gameflash (Desktop)

    For the desktop version of NBA Gameflash, we employed all of the tricks and valuable lessons learned from previous apps. The development went faster than ever! We decided to curb back reliance on server-side markup even further (XSLT), making the entire viewport of the app rendered by JavaScript thanks to Handlebars, just like the newer mobile sites. In addition to overseeing the full development, I programmed the live court view.

    Built with: JavaScript, jQuery, XSLT, Handlebars.js

    View

  • NBA Gameflash (Mobile)

    A mobile-optimized version of the desktop app. This was built using Twitter bootstrap and has optimizations for portrait vs. landscape orientations as well as iPhone Retina. I served as a advisory developer on this project helping to bring some new members into the fold on Gameflash, I also ported the court from desktop and optimized it for mobile devices.

    Built with: JavaScript, jQuery, Handlebars.js, Bootstrap

    View

  • MLB Gameflash (Desktop)

    The Major League Baseball version of the Gameflash App built for SI.com. This is a highly dynamic data-driven JavaScript app that can serve as a second-screen or replacement experience for live games. I served as the lead developer on this project, and designed the architecture that supports it. My favorite part was working on the base-running and hit trajectory animations.

    Built with: JavaScript, jQuery, XSLT, Mustache.js

    View

  • MLB Gameflash (Mobile)

    A mobile-optimized version of the desktop app. This was built using Twitter bootstrap and has optimizations for portrait vs. landscape orientations as well as iPhone Retina. I served as the lead developer on this project. Although this project uses the same JS codebase as the desktop app, all of the templates and markup was completely redone for mobile devices.

    Built with: JavaScript, jQuery, Handlebars.js, Bootstrap

    View

  • NFL Gameflash (Desktop)

    The National Football League version of the Gameflash App built for SI.com. Like the other Gameflash apps, it is a data-driven JavaScript app. I programmed the football field and a lot of the underlying architecture including a queue-based JSONP loading mechanism that has since been re-used on a number of other projects.

    Built with: JavaScript, jQuery, XSLT

    View

  • NFL Gameflash (Mobile)

    A mobile-optimized version of the desktop app. This app has optimizations for portrait vs. landscape orientations as well as iPhone Retina. It uses pre-compiled Handlebar templates for an extra speed boost. I was the sole developer on this project. The JS codebase from desktop was revamped to use the new architecture we developed during the MLB project.

    Built with: JavaScript, jQuery, Handlebars.js

    View

  • NCAAF Gameflash (Desktop)

    The NCAA college football version of the Gameflash App built for SI.com. Although it looks very similar to the NFL version, the data feed that drives the app was different enough to warrant its own codebase and logic. This was my first project for SI.com and I learned a lot about building dynamic and highly optimized apps in JavaScript for the modern web. All Gameflash apps proudly work in browsers going back to IE7.

    Built with: JavaScript, jQuery, XSLT

    View

  • NCAAF Gameflash (Mobile)

    A mobile-optimized version of the desktop app. This app has optimizations for portrait vs. landscape orientations as well as iPhone Retina. It uses pre-compiled Handlebar templates for an extra speed boost. This was developed simultaneously with the NFL mobile app. I served as an advisor for this, handing down code as I ported it from the NFL version and helping new developers on the team learn the desktop codebase.

    Built with: JavaScript, jQuery, Handlebars.js, Bootstrap

    View

  • March Madness Channel Guide '12

    This is a March Madness live scoreboard app with built-in channel guide and social buzz functionality. It has a modal form where you can enter your zip-code and lookup TV providers in your area. Once a provider has been selected, the app calls out to an API to retrieve the station number for each game.

    Built with: JavaScript, jQuery

    View

  • Things You Can't See

    Being a frontend developer has the built-in benefit of having lots of forward-facing projects ready for showing off to people. However, not everything I do is so easily articulated via a simple screenshot or available for live-viewing through links. All of the things below are under the hood and behind the scenes.
    • CMS migration - Worked on a migration to an entirely new, proprietary CMS system (the less this transition was noticable to the public, the better! The aim of a good migration is be completely seamless).
    • Lazy/async loading - Implemented an async loading track to prioritize site-critical JavaScript ahead of things like ads that can be loaded asynchronously. Similarly, social buttons and things that didn't need to be loaded until a user explicitly interacted with them were moved to a lazy-loading track.
    • Documentation - All developers seem to understand the value of documentation but way fewer actually put in the time/effort to write it. I've lead a number of efforts on the team to document critical site functionality and code. I always do my best to find time to document anything that I'm working on for my own benefit as well as the benefit of future maintainers.
    • Search optimization and social integration - Worked to implement a laundry list of SEO improvements as well as some social optimizations that were recommended by various consulting groups.
    • JSONP Loader - Wrote a JSONP queue-based loading mechanism with a slew of callbacks that has been utilized throughout much of my work at SI. The piece has been invaluable for each and every Gameflash project we did.

Teacher Resource Network (circa 2010-2011)

  • Branches

    Functionality and feature-wise, Branches is essentially a social networking site. However, it is specifically geared for community/school organizers. Built on top of Drupal 7, this is an otherwise totally custom site. I worked on a team of developers to create the many custom modules powering this system. I worked specifically on the single-sign-on (Facebook connect), news feed/feed sharing, and a unified notification system.

    Built with: PHP, Drupal 7, MySQL

    View

  • Lesson Plan.it

    A lesson planning web app designed for grade-school teachers. We wanted this app to have a 'native desktop app' feel. Therefore, it is completely AJAX-ed out (ie. there is no page reloading). It makes heavy usage of CSS3 transitions for snappy animation effects where-supported, and falls back on JavaScript animations in older browsers. Bonus feature: it has a new color scheme each month.

    Built with: PHP, Drupal 6, MySQL, jQuery

    View

"The best way to predict the future is to invent it." - Alan Kay

Quick Bio

I am a person born in Athens, Georgia, in March of 1986. I've lived in Georgia my whole life but I grew up in Atlanta and it is the place I've always called home. Ever since I could reach the keyboard, I have been using computers. The first desktop my family ever owned had .75 (three quarters!) GB of harddrive space and ~32MB of RAM. My interest in programming was initially sparked in a rather unconventional way: by using mIRC, the internet relay chat client. Even back in the late 90s, mIRC featured a full fledged scripting language with C-style syntax and a surprisingly amount of documentation to accompany it. That was the first time I ever defined a variable or used an if/else statement.

From there I quickly became interested in more general systems languages like BASIC and C. Something about programming awakened some inner auto-didactic spirit as I began teaching myself everything I could. It was right around this time that the internet was really starting to penetrate into mainstream society. Broadband connections were becoming affordable and ubiquitous and suddenly every business needed a website. I had always enjoyed making little websites in plain HTML and fooling around in Photoshop but as the internet grew up, so did I. Working my way through Atlanta Public Schools and Georgia Tech, I made websites along the way for money or friends and family or just for fun. When it came time to start a career, picking web development was a no-brainer. I'm very fortunate to be able to say that I truthfully love what I do for a living and I try to remind myself of that every day.

My Heroes in no particular order...

Jeff Tweedy, Kurt Vonnegut, John Lennon, David Foster Wallace, Bill Gates, Stanley Kubrick, my dog

Hobbies / Interests

Besides programming, I am a music fanatic. I love many kinds - from jazz to R&B to electronica to indie rock to hip-hop. All these genres keep me busy going to a lot of shows. My friends know me as that guy who won't shut up about the latest bands. If you find me at work without my headphones on, there is probably something wrong. When I'm not listening to music, I might be making my own on guitar or reading a (programming?) book. Aside from the arts, I am an amateur foodie (this basically just means that I like eating and it just so happens that Atlanta is the perfect place for someone like me). Finally, for all of its trials and tribulations, I'm a big Atlanta sports fan. The Falcons and the Braves are my squads, for now and forever.

Hardware / Software

These days, I am partial to Apple. I have a lot of love for their operating systems, especially OS X. As such, I do all of my working and playing on Macbooks. When that isn't feasible, my trusty iPhone is always there to fill the void.

I'm a tad picky about keyboards since they are a rather important component of any programmer's day-to-day life. To the delight of cube-mates everywhere, I've finally settled on the Cherry Brown MX switches which have that great feedback and are pretty quiet to boot. I employ the services of the venerable Rosewill RK-9000BR model both at work and at home.

When it comes to software, everybody has their own preferences and I am no different. I could ramble on all day about my favorite applications but I think the most relevant thing to actually list in detail here is what I use for web developement. Don't worry, it is a short list:

That's right. I use one (extremely powerful) editor for anything and everything text-based. Specialty software like Photoshop comes in handy in my day-to-day work. For everything else, there is the command line. For my terminal, I prefer iTerm 2 with zsh (+oh-my-zsh) for shell.