Front-End Q&A ~ Dan Ott

A couple of weeks ago, a good friend sent me an email with a list of questions for me. He'd been out of the front-end game for a little while, and wanted to pick my brain a little bit. I thought that instead of just answering him directly, I'd share my answers with everyone.

Do you use any grid/responsive frameworks? If so, what do you prefer and why?

Honestly I haven't used many. There are a few that have caught my eye, but with sprokets I seldom have the chance to start on a fresh project, and bootstrapping in a responsive framework on top of legacy code is sort of ugly. I've used the grids built in to Twitter bootstrap, and i've rolled out my own very basic ones.

That being said, here are some frameworks that I've dabbled with or I'm keeping my eye on:

Do you use a reset stylesheet at all? If so, what do you use? I have always been accustomed to Eric Meyer's, but have lately used some smaller subsets.

All of our projects use the Meyer reset, which I still don't have a big problem with. Lately, however, people have started using staring points like Normalize, which is less of a nuclear reset and more of a way to, well, normalize behavior between browsers. It looks like a good setup, and will likely be my base with new projects going forward.

Do you use a clearfix? Which method do you prefer?

I use overflow:hidden in general, and when i need to allow for overflows, i use the micro clearfix hack

Do you use any polyfills/shims? If so, what do you prefer and why?

As needed, yes. Here's the definitive resource for when you need a polyfill for some feature: HTML5 Cross-browser Polyfills

Do you use SASS/Less to help organize your CSS? If so, which one and what do you like most?

Yes yes yes.

We've been using Less for the last year or two with a couple main clients, but we're moving over to sass/compass. It seems like sass has more active development, and higher developer mindshare. More features, too, especially when you add compass into the mix.

One note - this isn't just about organizing CSS. It's also about speed of development and quality of code. Preprocessors help create environments that are friendly to DRY and modular development, and that's really what it's all about.

What do you use for embedding fonts? Typekit? Google? Something else?

I've used google before and it seemed to work ok, and a couple times I've done normal font embedding, but in general I almost always use typekit. It's simple to use, has a huge font library, and between Sprokets and my personal work, I almost always have access to a paid account.

Also, while I was writing this, Hoefler & Frere-Jones released a web font service that seems pretty sweet.

From your perspective, what does the browser landscape look like to you? It's moved rapidly in the past few years, with some browsers releasing faster than others. What does your browser support look like? Do you use a VM to test in other browsers, or use a tool?

As far as client site support and testing, we do Chrome, FF, Safari in windows/mac, as well as IE 10, 9, and 8. We also (unfortunately) have a couple clients that have enough traffic to warrant IE7 support. I have virtual machines (using virtual box and this trick ) set up for IE7-10, and i test in chrome/ff/safari in mac/windows.

For dev tools, I'm still kicking it old school with Firebug and Firefox. A lot of people have moved to Chrome and their devtools, and they're probably great.

Is there anything else you are in love with at the moment with HTML and CSS?

Right now I'm into learning Sass/Compass (as opposed to Less) for me. We just started making the move with the first project a couple weeks ago, so i've been learning about some of the ins and outs. That, plus using Grunt JS for compiling front-end code, which we've been using for a few months, and seems to be going well.

Otherwise, most of my thought processes center not on new flashy features, but on improving and maintaining our large, old-as-hell codebases. Almost all of our main projects have at least some front-end code that is over 5 years old, and it is impractical at most points to just start over with a full rewrite of all front-end code.

This is the sort of stuff that helps: SMACSS, How to Scale and Maintain Legacy CSS with Sass and SMACSS , and About HMTL Semantics and Front-End Architecture