105: RAPIDFIRE 24

01:00:09   Download

This week it’s another RAPIDFIRE! We take listener questions and try to answer them as best we can within a 3 minute time constraint.

We talked about (roughly in order):

Q & A:

  • 2:19 What’s the best way to release a tiny JQuery plugin?
  • 6:14 My question is about Grunt and requireJS: if I concatenate all my javascript features into a single file, all of them will be loaded with 1 http request, right? So what’s the point of using requireJS?
  • 13:52 What is the maximum number of javascript files that you should load on the same page?
  • 21:02 I want to set a performance budget but have no idea where to start. Are there any good articles or pieces of advice you can give?
  • 29:00 What’s the best way to learn JQuery?
  • 31:35 What’s the best way to detect if something is visible in the browser’s active viewport?
  • 38:29 Do you know of a port of Bootstrap that is more intended for a Grunt and Sass workflow?
  • 41:50 I’ve been trying to figure out the right way to handle content hiding. Any advice or thoughts on this?
  • 48:20 How do you handle a boss that gets upset when you ask him about which devices we’ll be supporting for a project?
  • 51:20 Do you guys know of any cool sites/tools to see what percentage of people are currently using what browsers to get a general idea of global usage on a particular browser version?

Sponsors:

  • 27:14 lynda.com The best online learning resource where you can learn about everything. Check out sweet courses like:
    • Lighting Design for Video Production
    • Animate a CSS Sprite Sheet
    • Responsive Typography Tips
    • Agile Project Management
    • Creating Hair in Maya
    • Go check it out and get a free 7 trial!
  • 36:19 Environments for Humans: Responsive Web Design Summit Lot of great speakers talking about performance, techniques/tips, and strategy when dealing with RWD and workflows.
    • Topics include Sass tips, grunt, tool automation, responsive HTML emails, content strategy for designers, responsive wire framing, and much more. Speakers like Dan Mall, Brad Frost, Trent Walton, Jenn Lukas, and more. Use “SHOPTALKSHOW” to get 20% off any ticket combo!

Show Links:

  • Eric Steinborn

    I actually created a Grunt Sass build of bootstrap. It’s here: https://github.com/esteinborn/bootstrap-sass-grunt I’m porting it to LibSASS once LibSASS has been updated in node-sass.

    Be sure to follow the instructions to init grunt and pull in the submodule of bootstrap-sass.

  • LMAO I was driving my car while listening to the podcast and it cracked me when Chris mentioned you can attend that RWD summit from your chair you are sitting on right now unless you’re in your car!

    I feel annoyed by the amount of questions and whining about “Feature x is not supported on older browser, I cannot use it” Or “Which versions of x browser you recommend to support?” … You guys can handle this better than that. Explain (for the million time) why a website cannot look exactly the same on all browsers, embrace progressive enhancement, feature detection (modernizer for instance), polyfills, fallbacks … If you can’t use CSS animations then fallback to jQuery if it is something you need to support. If you are bothered by the lack of support for text-shadow or rounded corners then eff it, it’s no big deal. Paul Irish’s analogy about the old black and white TV and a new LED screen will make people understand why a design cannot be the same on every damn browser! Read the book called “Everything you know about CSS is wrong!” It’s an awesome book teaches you how to lay websites using css display table and then how to provide fallbacks for IE7 … Yeah it’s an old book but it gives you an idea how to provide fallbacks … perhaps it used hacks at this time but now we have effen modernizr man and people are still bitching. It’s annoying! Maybe I am being over dramatic but I hate that question.

    • The main reason people are caught up on this is because many view the web as an extension of print design. There’s a lot of educating to do for co-workers and clients because a lot of people don’t realize how browsers work and how different versions of browser support different features.

      I think you make some great points. I share this website with people as a joke when they comment on something being a couple pixels off depending on what browser they’re using.

      http://dowebsitesneedtolookexactlythesameineverybrowser.com/

      Then I try to just educate them on the nature of the web. It surely shouldn’t be looked as as an extension of print design!

      • Mario M

        The common stigma of web being an extension of print design is spot on. Great point.

        and lol @ that link.

  • To detect if elements are within the viewport, you can use https://github.com/patik/within-viewport (both vanilla JavaScript and jQuery plugin).

    Then you can do things like `if ($(“#elem”).is(“:within-viewport”)) { /* … */ }`

    • Eric Steinborn

      +1 this works really well!

  • adam
  • Here is the Integralist link Chris mentioned:
    http://www.integralist.co.uk/Grunt-Boilerplate.html

  • Soleil

    @chriscoyier:disqus @daverupert:disqus Hi guys, thanks for holding these weekly talks.

    With regards to the use of flexbox and supporting browsers less than IE10, do you think it’s acceptable to use a display: table fallback?

    For ex/ http://jsfiddle.net/soleilonoya/W59yu/

    • Dave Rupert

      Probably depends on the layout. For sub-layout modules, I bet it’s awesome and just fine. Let us know if you use it in production 🙂

      • Great, will do! Thanks Dave 🙂

  • www.codedcontainer.com

    You are right when you say “sometimes you don’t need JavaScript” with CSS’s animations you can remove un-needed code. This is the first time I have heard of AngularJS and RequireJS because it is hard to experiment on these new tools when you are just using WordPress. I will be working on making my own JSON feed which I might be able to parse through with Angular JS. Would you say Angular JS is for dynamic interactive data or can it be used like Handlebars? I am excited to try RequireJS on my own personal site because I have scripts running independent from other pages. Another question, do you find all of your JS resources from Codepen, GitHub or another source?

  • www.codedcontainer.com

    JQuery has been around for such a long time. Would it be wise to try out another library?

  • www.codedcontainer.com

    Do you know how to fix problems with FontAwesome icons not displaying in older browsers of IE?

    • Dave Rupert

      If you get an EOT file (instead of WOFF) it *should* work just fine. But it might be a good time to find fallbacks for those browsers.

  • Mark Zeman

    Here’s more detail on Speed Index which was mentioned as part of setting performance budgets.

    https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

    Even though Speed Index is measured in ms it’s not the same as saying above the fold content should load in under 1s, it’s a measure of the time “above the curve”. Just to confuse you, Paul Irish does also say load above the fold content in under 1s.

    I’ve been working on a side project called SpeedCurve to help with competitive benchmarking and staying 1s ahead of your competitors. It’s built on top of WebPagetest and allows you track front-end performance and build sizes over time.

    http://speedcurve.com/demo/

    Love the rapidfire’s, keep them coming!

  • Hans Engebretsen

    “Maybe you’re just after that little bit of light back padding we all enjoy” – well stated, Mr Coyier