Alec Matias | Front End Software Engineer in Seattle, WA

« Experience and Portfolio »

Zillow

Lead all front end development for the Zillow Mortgage Marketplace, which has generated 3.9 million user-initiated loan requests this year.
Development owner of the Zillow.com homepage, the entry point for 25.1 million unique users (August 2011).
Refactored portions of Zillow Mortgage Marketplace for mobile devices by creating a mobile-specific CSS skin, slimming down JavaScript, and optimizing image and data requests.
Developed entirely new UI for the Zillow Mortgage Marketplace, aggressively A/B testing new features and increasing page performance through code optimization.
Managed full sitewide CSS redesign and standardization projects, coordinating tasks across all of Zillow's front end engineers.

NFL

Led the development team responsible for porting existing NFL club sites onto the NFL's in-house web platform.
Lead Developer on site relaunches for NFL franchises such as the Pittsburgh Steelers, New York Jets, and Cleveland Browns.
Refactored platform-wide CSS into a Core file (commonly reused code) and Theme files (team-specific CSS), reducing CSS file size and development effort required per team from three to two months.

NBC.com

Led front end development on the Emmy award-winning Late Night with Jimmy Fallon site and NBC.com's Super Bowl XLIII site, 2009's most trafficked non-homepage site on NBC.com.
Oversaw daily content and code management for websites of major television properties such as The Celebrity Apprentice, Chuck, Parks and Recreation, and Days of our Lives, among many others.
Assisted producers with overseeing development of new site features by interacting and managing the various departments involved (design, tech, content).

SourceEcreative

Managed international team of media specialists responsible for converting video reels of television advertisers for web distribution and updating database of cast and crew credits.
Restructured hosting solution to reduce costs by $36,000 annually.

ProductionHUB

Oversaw integration of site services with more than two dozen third-party sites.
Widened company's reach in the production industry by integrating video, SEO, and standards-compliant code into the product portfolio.

« My Front End Ethos »

Write valid, semantic markup: HTML should only be used to describe the content, not how to present it. Keeping it semantic (and valid) goes a long way in making it accessible by as many people as possible and ranking well with the search engines.
Separation of powers: Keep the HTML, CSS, and JavaScript separated: you'll reduce redundancy, thus reduce page weight, and also increase compatibility.
Avoid others blocking you: If a third-party external resource fails to load, it can completely block your page render. Avoid giving users a white page by loading those resources at the end of the body, in an iframe, or asyncronously.

Performance matters, a lot: Amazon discovered that for every 100ms delay, it cost them 1% of sales. No stone should be left unturned when it comes to page speed performance.
CSS in head, JS at bottom: You want to delight the user with how quickly and elegantly your page loads, so make sure the browser grabs the CSS before it begins rendering the page and then loads the potentially blocking JavaScript dead last. Fast and clean.
Be kind, leave comments: Well formatted, clean, and commented code should be an expected common courtesy of any developer. Don't leave your co-workers hanging when they're debugging your mistake.

Mobile is our future: The days of the desktop are nearing an end as mobile device sales are outpacing the PC. Account for mobile users by checking against Mobile Safari, Android Webkit, S40, and Opera Mobile (at the least).
Feature (not Browser) Detect: Thanks to libraries like Modernizr, we don't need to separate blocks of code to accommodate the quirks of a dozen browsers. Leverage these libraries to efficiently make your site cross-browser compatible.
Don't repeat yourself: Keep your code simple and maintable by avoiding needless repetition.

Progressively enhance: Begin by writing accessible, basic content for all browsers and then progressively enhance its style and behavior for browsers that support features like border radius, text shadow, and the canvas element. All browsers weren't created equally, we don't need to support them equally.
Optimize your images: Squeeze every last byte out of your images with tools like pngcrush, ImageMagick, jpegtran, and gifsicle to deliver the smallest possible file size without sacrificing any visual quality.
Dump the WYSIWYG editor: Dreamweaver? Expression? Clicking buttons to generate markup is NOT coding!