Mike Aparicio

Extra Life for Lurie Children's Hospital

This Saturday, starting at 8:00am Central, I'll be playing video games for 24 hours straight to raise money for Extra Life. All proceeds will go to Lurie Children's Hospital of Chicago, where my daughter Olivia is being treated. Olivia was born prematurely after just 24 weeks but has received amazing care from the staff of Lurie Children's Hospital. I'm very happy to be able to give something back while doing something I love at the same time.

I'll be streaming live on Twitch all day. Come by and say hello, and please consider donating if you can. Thanks for your support!

Extra Life Banner

Posted on October 23, 2014

CSS at Groupon

This post was inspired by the recent wave of people sharing info about their CSS: Mark Otto at Github, Ian Feather at Lonely Planet and Chris Coyier at Codepen.

About two years ago I was working on a redesign of Groupon's consumer website (which was later scrapped) when I was asked if I wanted to work on our internal tools team. "You won't have to support Internet Explorer," they said.

* Cue chorus of angels *

As Groupon had been experiencing exponential growth, many of our "internal tools" consisted of a bunch of Google Docs and things scribbled on cocktail napkins. The internal tools team was tasked with streamlining those processes. We had a half dozen or so dev teams working on different tools supported by just two designers. The challenge we faced was how to quickly crank out designs for these tools without having a horrible mishmash of CSS.

At first we debated the merits of using Twitter Bootstrap, which had just started gaining popularity at the time. We also looked at Zurb's Foundation. Eventually we decided that we would roll our own CSS framework in order to keep things light and consistent with our designs. We called it Toolstrap (Bootstrap for Internal Tools).

Style Guide

We began by looking at a lot of common elements in our design and started abstracting them out into reusable components. We documented these in a style guide that helped us keep track of which components needed to be styled and later served as a handy reference of what was in the framework for developers.

SMACCS

Next we decided that Scalable Modular Architecture for CSS would be a great way to organize our code. Most of the company was already using SASS, and the use of variables and mixins made organizing our code quite simple. Here's a general overview:

Toolstrap in action

Teams embraced Toolstrap pretty quickly as they were able to get a majority of the design for their app from the framework without having to fiddle around in CSS trying to interpret a PSD. They could simply layer on some app-specific overrides to layout their components.

As more teams used Toolstrap, however, we ran into a few issues.

  1. The first version of Toolstrap was heavily dependent on Rails (which most teams were using at the time), JUI, SASS and Compass. Around that time, teams were starting to create apps using various JavaScript frameworks which made using Toolstrap difficult.

  2. Versioning of Toolstrap was constantly in flux as we added new modules and removed things that were only being used by a single app. One of the tricky things about maintaining a framework used by multiple apps is determining which styles should be in the framework and which should be included in the app-specific styles.

  3. We had a number of image assets included with the framework, including icon sprites, logos and background patterns. This added a lot of bloat to the framework.

To solve these issues, we created Toolstrap 2. Toolstrap 2 included just a single CSS and JS file, rather than all the pre-compiled assets. We decided that we didn't particularly need every project to have access to the individual SASS files. Rather than require JUI, we simply included styles for their markup patterns for things like datepickers. This freed people to use Toolstrap on any project just by including the CSS and JS on each page.

We worked on DRYing up our code and pulling out a lot of things that we included "just in case." Teams were free to add these things to their app-specific styles.

We put all of our icons into an icon font using Icomoon, which reduced the overhead of assets and also gave us a lot of flexibility for high-resolution displays. Chris Coyier has a great demo that shows why Icon Fonts are Awesome.

Toolstrap for Consumers

Eventually the product side of the company got wind of Toolstrap and its success and decided it would be a good idea to implement in their latest redesign efforts. We had already begun creating a style guide for the new design in earnest, known as the Groupon Interface Guidelines. The new framework took on this unfortunate name, shortened to GIG.

Our existing site was a massive Rails app and the CSS was just a huge, huge file with all of the styles for every page on the site, including some that no longer existed. I want to say the CSS weighed in at close to 1 MB.

A quick word about the dangers of SASS

While SASS can be a powerful tool in the right hands, in the wrong hands you can end up with selectors like this:

body.getaways-gallery-gig .page_header #filters #categories_filter .pane .categories_container .categories ul li.selectBox-selected a {
  color: #333;
}

Yes, this was an actual selector in production code. Because of the ease of nesting in preprocessors like SASS, inexperienced devs will often nest like crazy without understanding the ramifications on the compiled code. This adds a ton of unnecessary specificity that requires the same selector to override or worse, using !important. (Often times devs will even resort to inline styles! Ewww.)

Building GIG

As we moved from Rails to Node.js, one of the biggest challenges in creating GIG was supporting two different designs. We needed to support styles for both the existing design (referred to as OG, or Original Groupon) and the new design (known as Prom Night). Rather than create two separate frameworks, we decided to abstract out common styles between the two designs and then use SMACSS's Themes folder to apply design-specific code scoped to a single body class.

The initial phase of the redesign was simply a re-skinning of the site. All of the markup would would stay the same and only the CSS would change. Later, we would drop support for the old styles and begin iterating on the markup and styles until we got to the finished redesign.

With the common styles abstracted out, our Themes folder looked like this:

All of the styles were nested under an og or prom-night class that could be toggled on the body element. This allowed us to A/B test the new design pretty easily and also allowed for a staggered rollout across our international sites as we began the process of getting them all onto a single platform.

There's a great post on our transition from Rails to Node.js on the Groupon Engineering Blog: I-Tier: Dismantling the Monoliths

Benefits of Custom Frameworks

There are a bunch of benefits to having your own in-house framework.

Many Thanks!

Groupon's CSS frameworks would not be possible without the efforts of the ton of talented developers we have, as well as the influence of people like Brad Frost, Chris Coyier, Jonathan Snook, Luke Wroblewski, Ethan Marcotte, Keyamoon and countless others.

Posted on August 10, 2014

Building a Dream Team

(This post is based on a lightning talk I gave at Geekfest last year.)

If you work in the tech industry, you're probably familiar with the following words which recruiters use to describe their ideal candidate:

And my personal favorite:

Dr. Evil airquotes - Full Stack Developer

I'll take Mythical Creatures for $800, Alex.

You may consider yourself a full stack developer but let me explain why I have beef with this term.

When we talk about "The Stack," we're talking about the technologies we use to build websites. There's HTML, CSS, and JavaScript. Maybe you're into Ruby on Rails or you live on the cutting edge of Javascript frameworks or you're keeping it real with PHP. You probably have a MySQL database. And all the stuff beyond my expertise, which I collectively refer to as "server shit." A full stack developer should be experienced and at least competent in most, if not all, of these areas.

We could easily expand the stack to include things like user experience, content strategy, typography, and Photoshopping people's heads onto funny bodies. At this point it becomes more of a spectrum of skills than a stack of technologies. Along this spectrum you have people who can do any number of these things, but they tend to specialize in one particular area. People on one end of the spectrum are labeled as designers and on the other side, developers.

The stack as a spectrum

No shit, right? I'm not telling you anything you don't already know. Bear with me.

In basketball, player stats are tracked in a box score. While some most players excel in a few areas, others - LeBron James, for example - are known for "filling up the box score." On any given night they can provide huge numbers in any and all metrics in the box score.

Do you consider yourself the LeBron James of web design/development? Probably not. (I'm closer to the Brian Scalabrine of web development, myself.)

Yet so many companies pass up perfectly qualified candidates because they want to hire a bunch of LeBrons that can do everything. The fact is, you're lucky to find one LeBron, much less a whole team of them.

Some NBA teams have tried. The 2012-13 Lakers had one of the all-time greatest players, Kobe Bryant, and a versitile big man in Pau Gasol. They had already won a couple of championships together. They added Steve Nash, one of the greatest point guards in NBA history, and Dwight Howard, arguably the best big man in the game today. And just for shits and giggles threw in Metta World Peace, a.k.a. Ron Artest, who, as a Chicago Bull once applied for a job at Best Buy so he could get the employee discount.

How'd this team do? They barely squeaked into the playoffs on a five-game win streak and were swept in the first round.

Okay, I get it. Maybe you're not a basketball fan. Let's talk superheroes. Think about the Incredible Hulk. How cool would it be to have the Hulk on your team, just smashing shit left and right? What's better than that? I'll tell you: FIVE HULKS. A team of five Hulks is FUCKING AWESOME... if you need shit smashed.

The Avengers

Sometimes, though, you just need a dude on your team who all he does is shoot stuff with a bow and arrow. But he's REALLY good at it. Throw in a billionaire genius, a super-strong and agile World War II vet, a Norse god with a powerful hammer, a foxy, red-headed ninja, Samuel L. Fucking Jackson and Robin from How I Met Your Mother and you've got a pretty formidable team.

But if you're anything like me, the closest you'll ever get to being a super hero is THIS. And the closest you'll get to being LeBron is THIS.

Hiring a team is a lot like online dating. You have this ideal person you're looking for but, the truth is, that person is not online looking for dates. They're out at the bar every night getting laid.

And companies looking to hire the LeBron James of web design/development are not the Lakers. At best they're the Cleveland Cavaliers. They may luck into a LeBron once in a generation but ultimately he's going to take his talents to South Beach and win a couple of titles there instead.

So how does one build a Dream Team then?

Hire some hungry, young talent. They might be a little raw, a little rough around the edges, but if you surround them with good teammates they can turn into something special.

Hire a Hawkeye. Steve Kerr is a five-time NBA champ and pretty much all he did was shoot threes. But he's the all-time leader in career three-point percentage in NBA history! And he worked cheap.

Bring in some savvy veterans to mentor your younger team members. The Knicks signed 40-year-old Jason Kidd a couple of years ago. He didn't have much left in the tank but his experience was invaluable in developing their young guards. Now he's a head coach.

Hire a good manager. This may be the most important aspect of a great team. Someone who knows how to get the best out of everyone. Phil Jackson won 11 championships as a coach. He was known for getting his star players to put aside their egos to work together and got the best out of his role players.

Finally, take care of your team. You don't want them to become unhappy and go someplace else to be successful. Mark Cuban is famous for providing nothing but the best for his players. His Dallas Mavericks have made the playoffs 13 of the last 14 seasons (including two Finals appearances and one championship) after missing the previous 10 straight playoffs.

Cuban also has some great advice for being a dream teammate:

Sweat equity is the most valuable equity there is. Know your business and industry better than anyone else in the world. Love what you do or don't do it.

Posted on July 9, 2014

Mike Aparicio

Mike Aparicio is a User Interface Engineer at Groupon, pop culture aficionado, video game junkie, basketball fan and comedy nerd. He lives in Chicago with his wife and stepson.