077: RAPIDFIRE #18

01:12:34   Download

This week it’s another RAPIDFIRE! We talked about (roughly in order):

Q & A

  • 2:23 I recently ran the W3C Markup Validation tool on one of my WordPress site. I was amazed to see how many errors came up… Do you have any suggestions for validating my markup?
  • 9:19 Should I learn Haml or Emmet to speed up writing HTML?
  • 14:47 Do you know of any good tutorials or resources that explain how to set up a workflow for WordPress using GitHub for version control? (Yes: The Lodge at CSS-Tricks and WP Migrate DB Pro)
  • 23:40 I was wondering if you know of a way to synchronize break points values between different assets? Is there a way to set the breakpoint values in some way so that both Sass and JS can load them in and use them?
  • 27:45 Whenever I use SVGs as a background-image and add the background-size property, the SVG in Firefox is blurry. I’ve tried fixing this several ways, including making the width and height of the SVG 100%, but that doesn’t seem to work in every case. Have you ever run into this problem?
  • 30:48 Do you follow any specific style guides for personal/team coding? (Yes: Sass Style Guide)
  • 37:15 Sponsor: CSS Summit Use the discount code “SHOPTALK” for 20% off!
  • 39:48 I was wondering if you had any advice for what should go into every .htaccess file – do you have a standard that gets put into every project? I heard some talk about the one included in the HTML5 boilerplate, and took a look, but a lot of it didn’t really mean anything to me, so I wasn’t sure what to take…or should I just take it all?
  • 46:32 I have a question for you: What is the best way to create column layouts in CSS?
  • 56:15 In order to use em and rem better, I declare html {font-size: 62.5%;} so that the root size is 10px. This allows me to do mathematical calculations much easier and faster. (For eg., a 15px font size can be declared as font-size: 1.5rem;). However, this doesn’t work when it comes to using em in media queries. I’ve noticed that for these to work correctly, I have to revert back to the default 16px. So a min-width: 1000px will be the inconsistent min-width: 62.5em instead of 100em. Do you guys know of a fix for this? Should I even be using em for media queries?
  • 61:35 In one of your previous episodes you talked a little about nginx, and I was hoping you could talk more about that. In the little that I read, it seems like it’s much faster than Apache. But are there any catches? Or is it a no-brainer to switch from Apache?
  • 66:56 Could you talk about using Normalize with Compass on Sass? What is your workflow for getting started?


  • WP Migrate DB Pro
  • CSS Summit It’s the 5th annual CSS Summit w/ three tracks focusing on CSS3, workflow, and a whole day dedicated to Sass and Compass. It’s gonna be amazing. Sign up now! Use the discount code “SHOPTALK” for 20% off!


  • You’f

    It is vim nerdy 😛 I wrote about it a few months ago here: http://bit.ly/14L3bO8. Note that it doesn’t come with the emmet/zencoding version for vim – it’s part of a “bigger” native feature that works for all kinds of brackets, quotation marks, spaces…

  • Jeff Beam

    Chris, re: why XHTML 1,0 Strict is is all stricty like JavaScript but HTML5 is not – at the core, it’s because XHTML is SGML compliant (like HTML 4.01 and XML) and HTML5 is not. As far as this guy’s questions, yeah I agree – as long as he doesn’t have to be using XHTML for some reason (client?), then he should just switch to HTML5, the water is fine…

  • Josh Dean

    Here’s a test case for blurry SVG background images in Firefox: http://codepen.io/designerdean/pen/bhqKA. Thanks for addressing my question on the show! You guys do a great job.

    • chriscoyier

      I added it to a Bugzilla bug so at least there is some record of it for them. https://bugzilla.mozilla.org/show_bug.cgi?id=885919

      • Josh Dean

        Nice, thanks Chris.

    • dsongman

      Can’t remember where I found the solution to this. For some reason Firefox draws the SVG at the size (width & height) indicated in the svg tag itself and then scales it up or down like a bitmap image. Until they fix the bug, you can make your art board (in Illustrator parlance) at least the maximum size the image will render so that Firefox will size the image down (ie, acceptable failure).

      I just did a quick an dirty edit of your file: grabbed your svg, dropped it into illustrator, resized the art so it was 448px tall and hit Object->Artboards->Fit to Selected Art and saved out as an SVG. (The resize threw some things out of proportion, but that doesn’t matter for our purpose.)

      Not blurry in Firefox: http://cdpn.io/IiGht

      • Josh Dean

        Thanks, dsongman. I’ve done that before, and have also set the width and height to 100% (which works sometimes). It’s just unfortunate that it requires something like that. It kind of takes away the whole purpose of an SVG, which is unknown scalability.