137: Rapidfire 38

01:06:27   Download

This week it’s another RAPIDFIRE!!! Nothing but ray guns and hot question and answer madness!

We talked about (roughly in order):

Q & A:

  • 3:26 For responsive menus, do you use a similar plugin on each site, or do you build custom menus for each site? Are there any responsive menu plugins that you would recommend?
  • 11:12 When editing pre-built wordpress templates for a company I work for I often find myself using display:none to get rid of content that the client doesn’t want on the page. It definitely feels like a dirty fix, what are your thoughts on this?
  • 17:58 I’m trying to develop a horizontally-scrolling page layout for a website I’m working on. How would you guys tackle this sort of challenge these days?
  • 25:11 I’m curious if you’ve ever been part of a team where you or someone else on the team introduced a technology or process change or maybe like a paradigm shift in how things needed to be done. What were the toughest challenges?
  • 35:25 Stacy K. wins tickets to SASS Summit!
  • 38:47 I need to create an array of arrays of images for my banners. How do I put that together?
  • 45:38 What do you suggest a beginner do in order to continue not only learning but implementing new ideas?
  • 50:08 I’ve been implementing AJAX on my Rails 4 site with jquery’s $.load() function and using window.history.pushState() to update url’s in the browser’s address form. I am having issues with the page staying the same when I use the back button. The url responds correctly in the address bar, however the page does not go back to it’s previous state. I’ve read about a few javascript libraries being able to deal with this. What are y’all’s thoughts on the subject?
  • 56:29 We’re considering moving a WordPress site with a few hundred posts, and growing, over to a static site generator like Jekyll. I’m wondering, how scalable is it? Is there a limit? Do things slow down?


  • 15:40 E4H: Sass Summit – A full-day deep dive into Sass – setting up from workflow foundations, to learning the cutting edge Sass stuff coming in version 3.4. Bring the experts to your desktop November 6th from 9AM to 4PM (CT).
    • You should also check out the JS Summit: Environments for Humans brings together some of the Web’s most notable experts in JavaScript and jQuery for an all-new, three-day online conference, the JavaScript Summit 2013! Bring the experts to your desktop November 19-November 21, 2013 from 9AM to 4PM (CT).
    • Discount code 25% off w/ SHOPTALKSHOW code. Recordings come with registration! So, if you miss a session or can’t make the day, you can watch them later at your own time when they become available. Grab your tickets now!
  • 33:01 lynda.com – The best online learning resource. New courses are posted every single day. Check out some super great courses like:
    • SVG
    • JavaScript for Web Designers
    • Creative GoPro Photography and Video Techniques
    • Up and Running with Genesis for WordPress
    • Creating a One-Page Scrollable Website with Adobe Muse
    • So much more. Learn all the things! Get a [free 7 day trial now]!(http://lynda.com/shoptalk)!

Show Links:

If you’re enjoying this show, please let people know by leaving us an iTunes review! We really appreciate it. Thank you!

  • Michael Mann

    The Web Standards Southern Gentleman is a keeper. Haven’t laughed that hard in a long time

  • Nicholas Petersen

    I say, I say! Web Standards Southern Gentleman might be the funniest thing on Shop Talk Show ever, I do declare!

  • When i started listening to this show I had know idea what half the questions were even talking about. Now I find myself answering them all in my head and agreeing/disagreeing with your people’s answers.

    Love the show, keep it up guys!

  • Great episode…In regards to AJAXing in content and updating the history…

    You can do it with just vanilla JavaScript if the browser supports the HTML5 History API…

    You have to use “history.replaceState()” to create an initial history entry on page load…

    Then you use “history.pushState()” to update the url and add a state to the browsers history stack…on a click or some other event…and also update the content….

    Finally you listen for the “popstate” event…which fires on the back button or forward button…when that event fires you grab the url and then update the content based on the url in the browser address bar…

    Here is a link to a demo I made…


    It acts and works like standard html but it is using AJAX and the History API to make it work…

    Admittedly something like this could be just done with standard HTML and regular links…but it works as a demo…

    If you want the source files you can download them here…



  • Hey guys and gals. Per the talk concerning static site generators.

    I created a small script for wordpress that generates markdown files with every new post or page created.


    Although I use http://docs.getpelican.com/en/latest/ static site generator, this could be used in conjuction with any flat file system or generator.

    Cheers to a GREAT SHOW!

  • I do declare that Web Standards southern gentleman needs to make a cameo in future episodes.

  • Donovan Balli

    38:47 array of arrays of images… Sprites?

  • simply_simpy

    In regard to the question @ 50:08 check out pjax. It is a plugin that pretty much does what the user wants: https://github.com/defunkt/jquery-pjax

  • ADR

    38:47 I need to create an array of arrays of images for my banners. How do I put that together?
    Use an array of objects to structure the data and save any future developers a bit of time trying to decode your arrays. Something like:

    imageArray = [
    {“logo”: “http://blah.com/logo.jpg”,
    “header”: “http://blah.com/header.jpg”},
    {“logo”: “http://wowow.com/bird.jpg”,
    “header”: “http://okokok.com/who.jpg”}

    Then call the urls like so:

  • Nevan Elder

    I know I am months and months late to this party… but the simplest way I can think of to solve the dog/cow image issue is to have two arrays of equal sizes. One array with the body, one array with the head. Randomize the number and call both of the array slot… i.e.

    Random number : 4
    head[4] – cow head
    body[4] – cow body