084: RAPIDFIRE #20

58:25   Download

It’s time for another RAPIDFIRE! No news, no drama, just lots of question and answer action.

Q & A:

  • 0:51 How do you prefer ordering your queries within your stylesheet? Is mobile-first really the best strategy here?
  • 8:27 Would either of you have any insights as to how to test, target, and develop for the stock “Internet” browser app from Android?
  • 12:37 Maybe Autoprefixer will be useful to your podcast listeners?
  • 19:45 Is there a pretty CSS only solution to style a file input field? The default is so ugly and annoying.
  • 24:00 I have noticed that many theme developers will have the header template that opens a div that is closed in the page template. I find this very frustrating. Is this common for wordpress or is this a bad idea all together?
  • 28:12 So I’ve been having a habitual debate between the SEO department at my job, as well with my other developers, which is the usage of h1’s per page. I understand it use to be that we were suppose to use only one h1 per page for SEO purposes, however from my understanding with html5 elements like section and article we can now use multiple h1’s per page. With many conflicting articles out there, and all these SEO ranking tools that contradict one another, what’s the deal here?
  • 36:10 I was wondering if you could explain the difference between web designers, front end developers, UI designers, etc.?
  • 40:22 A lot of the development I do these days is responsive, but in order to accommodate advertising or Facebook widgets etc I am finding that working with a fixed width sidebar is cleanest. I have been experimenting with display:table-cell, it looked like the perfect solution until I had a page that had a series of short pieces of content that didn’t keep the left hand area full width (example here Is there a way around this? Do I really just need to wait for Flexbox? Any advice would be awesome.
  • 43:17 I’ve started working with Rails and the Rails asset pipeline. One thing I don’t like is that Rails does the Sass compiling instead of doing it via command line or with a tool like Codekit. I was wondering if you guys know if there are any benefits to using the pipeline vs just compiling it locally. Finally, what do your Sass file structure look like? Do you have one manifest file with many imports, or multiple files each with their own imports?
  • 51:34 Hey guys, I am curious if you guys are familiar with Codekit’s KIT language?


  • 18:05 Web Design Day
    • Conference day: Friday October 25th, Workshop day: Saturday October 26th. 2013 is our fifth year and we’ve got workshops and a conference day this year.
    • Sessions from: Aaron Draplin, Josh Clark, Jenn Downs, Stacey Mulcahy, Sara Watcher-Boettcher, Brian Warren.
    • Shork and smart lightning talks from Jen Meyercheck, Rob Wierzbowski, Chris Cashdollar and Cathrine Farman.
    • Workshops by Bearded and Brad Frost
    • Topics include: devices and the future, UX testing, web typography, keeping your team awesome, controlling your content, the perks of open source, designing for the man without losing your soul, time-saving Sass and some inspiring design talk.
    • Also, Pittsburgh is awesome 🙂
  • 34:15 Environments for Humans – CSSDevConf October 21–23, 2013. The Stanley Hotel in the Rocky Mountains · Colorado, U.S.

More :

  • dougoftheabaci

    Just a note on the file-upload stuff, it’s not true that clicking anywhere will spawn the dialogue in every browser. I did a whole bunch of testing on this when we wanted to do a single-button upload field on Kongregate.

    We ran into the issue where some browsers would only spawn a dialogue if you hit the button itself where hitting the text box would just allow you to type. I think it was an issue with earlier versions of IE and some instances of Firefox (though don’t quote me, this was a while ago).

    We also couldn’t just set the width and do a background image as it would resize in odd and uncontrollable ways in the various browsers. We did try having the ‘button’ actually be a label associated with a hidden upload field, but that didn’t work and it sounds like it was due to security reasons.

    The solution we settled on that worked across everything (though probably not mobile for obvious reasons) was to absolutely position file-upload field and then use JS to have it position itself under the mouse and then follow it, but only while hovered over a specific element.

    It relies on JS but in order to get this particular form you have to go through JS anyway (and it’s accessible elsewhere on the site via a standard file-upload field).

  • Thomas Dobber
  • Re: Chris’ history in school:
    I was in an “Interactive Media” vocational program in high school and I had the same experience. The most interactive thing we did was learn to make a gif in Photoshop.
    …I graduated high school in 2010.
    When I transferred my career-tech credits to community college, they all went toward a graphic design degree, where my instructors all said the same thing Chris’ did. Total bummer.

  • Alen Abdula

    Check out HTML5 Outliner extension by Dominykas Blyžė https://code.google.com/p/h5o/.

    Great talk.

  • You should do a video episode for 100