Matt Stills

Full Stack Web Developer

Matt Stills

Full Stack Web Developer & Atlanta Native

Client / Frontend

JavaScript

JavaScript has exploded over the past half decade or so. New frameworks are being adopted and then tossed to the wayside at a concerning pace. The trend seems to be moving away from large "kitchen sink" frameworks (think Angular) and towards a more Unix-philosophy way of making small components that do one thing and do it well that can be cherry-picked and chained together to meet the requirements of a development project. Javascript is even a "compile target" for other scripting languages like CoffeeScript and Dart earning it the (dubious) nickname of "bytecode of the web." Beloved for its speed, dynamism, and unique prototypal inheritance system, JavaScript is one of my all-time favorite languages. Once you harness its asynchronous nature and wrap your brain about the "unorthodox" (at least if you're used to Java or C++) inheritance system, the true power of JavaScript is revealed.

Popular Frontend Frameworks

When writing JavaScript for the browser and working with the DOM, libraries like jQuery or its lighter cousin Zepto are invaluable. They are also take care of the nastiest cross-browser issues for you. Understanding these idiosyncrasies is part of being a developer, but there is no shame in letting a framework handle the nitty gritty once you do. John Resig is basically an internet hero. These days, we don't always need to support legacy browsers and thus DOM frameworks can be superfluous. Even then, utility frameworks like Underscore.js or an app structuring framework that also handles data binding like Backbone or even Angular might be a good choice depending on the project.

Templating

Separating logic from presentation is an organizational technique that becomes invaluable when designing any sufficiently large web apps. Most modern web developers understand this by now but it is worth bringing up. 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 but new ones are cropping up all the time. Most single page app frameworks (a la Angular) include their own templating language. They're all fundamentally the same but with different feature sets.

HTML 5 / CSS 3

This one is pretty self-explainatory for a web developer. These technologies are the fundamental building blocks of the web. Modern web layouts should take advantage of the latest and greatest parts of the spec (which are ever evolving) whenever possible! As traffic shifts to mobile devices (which all feature modern web browsers and cutting edge features), it is becoming more and more feasible to use the latest web technologies without having to worry about legacy clients. The modern spec for HTML and CSS is very exciting and finally starting to gain appreciable support amongst various browser vendors. New features are being proposed everyday and experimental stuff is available in lots of beta-channel releases of browsers if you're into that typ eof thing. Modern webpages look and feel much better as a result.

Dynamic Layouts (Responsive, Fluid, et al)

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 your website to not only work on that device, they expect it to be a pleasant experience and be able to do the same thing they could do on their desktop on their phone, etc.

Crafting mobile web designs that "respond" to any resolution is a challenging but very rewarding process. There are several dominant techniques. Responsive and fluid or some hybrid of the two are the most common. Other sites have decided to bifurcate the frontend via an adaptive aproach (ie. serving different page entirely depending on the user agent). All of these techniques have their pros and cons and take time to implement correctly. But hey - 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 toilet.

Cross-Browser

It is tempting to take advantage of all these shiny new web features that seem to be cropping up on a monthly basis. However, it is important not to leave older browsers and their respective users behind in the dust. Think of your grandparents! They're just as important as any other user of your site when it comes to what really matters. 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 allowing for everyone else to use your site with all the functionality humming. (Ok maybe not IE 7.)

Server / Backend

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 serving web APIs and various other web services. A lot of the time Node is not used to power webpages but instead of used in various systems and mobile applications to handle various transactions async.

That's not to say it can't also be used to run websites and the ability to use the same language on the client and serverside is undeniably cool (ie. isomorphic JS). 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 and it is here to stay. PHP is not a hip language. It is the beautifully flawed but ubiquitous and strangely powerful language doing the heavy-lifting behind the scenes at top-tier sites such as Facebook and Wikipedia among many others that you probably visit every day.

Taking advantage of the latest features in PHP is a must though (eg. it finally allows for pretty decent OO software architecture). The language has grown and involved (read: improved) a lot over the past few years. Also, PHP NG sounds amazing from everything I've read about it so far. So that's something to look forward to!

Drupal

Drupal is the extremely powerful and flexible open-source CMS system written in PHP. Drupal is also very peculiar and to get the most out of it, you must learn how to do things the "Drupal way." I say this to point out that it has a steep learning curve. You shouldn't be discouraged from learning it thoguh. You can make any sort of website in Drupal if you really like.

It might 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 (my preference) but also with setting up and/or maintaining Drupal sites that employ popular 3rd party modules (Views, CCK). I am anxiously awaiting Drupal 8 and the OO sea change it will bring. Will the community be able to keep up?

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 most of your favorite (non-Tumblr) blogs. However, the CMS has really matured over the years and become closer in feature-set to Drupal albeit still not as flexible.

I also have experience maintaining sites and writing custom plug-ins/themes for the premium Wordpress VIP hosting service.

Web Servers

Everyone knows Apache/2, 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 relative new-comer, but rapidly being adopted for its simplicity of config, scalability, and unbridled speed when serving static files.

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. It is the antithesis of "logic-less" templating.

SQL Databases

When it comes to relational databases, there are many flavors of SQL that each have suble differences but largely do the same thing. I have experience with: MySQL, MariaDB, PostgreSQL, and sqlite. The database is the cornerstone of your webstack so knowing how to get the data you need out of one is an equally important part of any web developer's repertoire. I have experience designing schema and working with DBAs to ensure that the design will be performant and easily indexed.

NoSQL Databases

Document-based or "schemaless" databases have become all the rage lately. They're no longer hailed as the "SQL-killers" they were initially thought to be but it seems now the two will coexist. They're sometimes even used in tandem for certain proejcts. NoSQL is most useful for storing certain types of data (usually JSON documents) in a much more flexible fashion 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. It probably won't be dying out anytime soon. XSLT is a powerful language that can bend XML to your will despite its extremely clunky and verbose syntax. I have experience using it to create HTML and JSON output, normally intended for further processing by a front-end scripting language.

Everything Else

Social (REST) APIs

Every web developer probably knows (and fears, or at least respects) social networking. The most important APIs belong to the big 3: Facebook, Twitter, Instagram, Youtube, and Google. I have worked with all of these APIs before to implement single-sign-on with oAuth and various other social functionality. I also have experience with 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. The new Swift language sounds really great but I haven't had a chance to start learning it yet unfortunately.

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. Bash is the most common target for shell scripting, but sometimes you need to write something for plain sh. If I feel that the script is only ever going to be used by me and performance is not a concern, I might just use zsh or even node.js.

Operating Systems

Being comfortable and thus being able to work quickly and effectively in your computer's operating system is important whether it is your personal computer or your company's webserver (or webservers!). This is absolutely one of the most underlooked skills when it comes to developers. You need to be able to configure quickly, mouse accurately, and type quickly. I feel at home in pretty much all of the major/common operating systems including: OS X, Linux (Ubuntu), various Unix distros including Darwin (Mac), 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 - there should be no need for me to extol their virtues. Please note that version control is not a glorified backup system. If you think of it as such, you as missing out on at least 90% of the benefits of using it. 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 very helpful skill for any web developer. It isn't uncommon for me to assist with cutting layouts, re-sizing/re-touching/editing images, making small tweaks to effects or copy, and optimizing assets for the web. The developer knows exactly what and how and to what dimensions they need a cut made. Plus sometimes I do dabble a bit with design whenever someone gives me the opportunity.

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 that classic 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. For the record I think Microsoft Excel is a great.

Testing, Building, & Deploying

The ability to test the code produced into many modern build systems and I have begun to write tests for my JavaScript using frameworks like qUnit and Mocha. There are newer test frameworks out there now that I need to checkout. For workflow and aesthetic testing, I use CasperJS to simulate user interactions with the site as well as capture screenshots along the way (Webkit rendering). Those tests help catch regressions and prevent bad code from ever making it into production! They have an up-front cost that will 100% certainly pay for themselves quickly over time. I like Grunt for managing build tasks like concatenation and minification of project files (of course, there is already a new task runner competing with Grunt called Gulp that seems promising due to its use of streams versus writing temp files to the filesystem). Finally, deploys can be done in a variety of ways; sometimes a simple Git post-receive hook will do. For more complex projects where you need rollback and various logging + tracking, a whole management system like Bamboo or Travis becomes invaluable.

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

NCAA Digital (2013-present)

I have worked on a number of really exciting projects over the past year and a half or so since transitioning to the NCAA Digital (NCAA.com) team from SI.com. I will update this space as soon as I have a chance to dcoument some of them (there is a lot). For now, just visit the site on the device or platform of your choice. The site is fully adaptive now. It was fully redesigned and relaunched in late October 2013). At that time, we also upgraded to Drupal 7 from version 6. My team of four other developers and I are responsible for the entire thing and we're really proud of it!

Sports Illustrated (2011-2013)

Below were my contributions to the Sports Illustrated website in the ~2 years that I was working on it. The business and website have gone through many changes since then, including a full-scale redesign. Unfortunately, that means none of these pages nor functionality below are live these days.

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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 (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

  • 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

"Simplicity is complexity resolved." - Constantin Brancusi

Quick Bio

I was born in Athens, Georgia in the spring of 1986. March to be exact (the 28th counts as spring). 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 a keyboard, I have been using computers. My dad's work provided him with one of the first laptops made by IBM. I immediately fell in love. To my childhood mind, it was like something straight out of Star Wars, incidentally my favorite movies at the time. Eventually our family bought a desktop. It was made by Micron and had .75 (read: three quarters!) GB of disk space and 16MB of RAM. I used Windows 3.11 at first.

My interest in programming was initially sparked in a rather unconventional way: by using mIRC, a popular 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. I read their documentation for fun, eager to learn about new ways to solve problems in my scripts.

From there I quickly became interested in more general systems languages like BASIC and C. Something about programming awakened this auto-didactic spirit in me and I quickly took to absorbing as much computing-related knowledge that I could get my hands on. You may have heard the term "knowledge sponge." That is what I felt like. It was right around this time that the internet was really starting to penetrate mainstream society and eventually achieve ubiquity a few hsort years later. Broadband connections were becoming more and more affordable and available. Suddenly every business wanted needed a website. I had always enjoyed making little websites in plain HTML (don't tell anyone... this page is just plain HTML with a smidge of JavaScript) and fooling around in Photoshop. Forgive the corniness of this statement 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 or family or just for fun and curiosity. When it came time to start a career, picking web development was a no-brainer. I'm very fortunate to be able to say truthfully that love what I do for a living and I try to remind myself of that each and every day. When people ask me what I do, I say that I solve puzzles. They may not always be fun puzzles, or even fair, but that's all part of the challenge. I feel like the best jobs are the most challenging ones.

My Heroes in no particular order...

Jeff Tweedy, Steve Wozniak, Kurt Vonnegut, David Foster Wallace, Bill Gates, Michael Render, Stephen Hawking, Stanley Kubrick, Ken Jennings, and my pets

Hobbies / Interests

Besides programming, I am what you might call a music fanatic. I love many kinds - from jazz to R&B to electronica to rock to hip-hop. My tastes are honestly all over the place. If an artist is serious about their craft, then I will give them a shot. If you find me programming without my headphones on, there is probably something wrong. I also attempt to make my own sometimes on a guitar. Otherwise, I enjoy reading (programming, perhaps?) and writing fiction. I also have a soft spot for Nintendo games - especially Smash Bros. and Mario Kart whcih I play on my Wii U, the only next gen system that really interested me.

Aside from the arts, I am love food. Atlanta is a great place for people who love food. There is nary a chain in sight throughout much of the city. I also love trivia and puzzles; especially word puzzles. My favorite is Scrabble but Words With Friends must often suffice. One of my life goals is to be able to complete the Sunday New York Times crossword (but for right now I struggle up through, at best, Wednesday). Finally, for all of its trials and tribulations, I'm a big Atlanta sports fan. The Falcons, Hawks, and Braves are my squads; for now and forever.

Hardware / Software

These days, I am partial to Apple's stuff. I have a lot of love for their operating systems, especially OS X. As such, I do all of my working and playing on Macs (usually Macbooks). When that isn't feasible, my trusty iPhone 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 relatively quiet to boot. I employ the services of the venerable Rosewill RK-9000BR.

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:

Various specialty software like Photoshop comes in handy in my day-to-day work. For most everything else, there is the command line. For my terminal, I prefer iTerm 2 with zsh (where available) for shell. Some purists will certainly balk at this choice. To these types of detractors I would say "Don't you have a vim vs. emacs debate to attend somewhere?"