144: Rapidfire 41

50:46   Download

This week it’s another RAPID-FIRE!!! Nothing but Thanksgiving turkey hangover and hot question and answer madness!

Q & A:

  • 3:12 I have had to do a bunch of horizontal scrolling sliders for work lately. These “sliders” always through me for a loop because I am working off comps I had no part in designing. How do I keep these sliders from freaking out when the browser is resized while they are partially scrolled, and what is the definitive best way to make these from a performance and UX stand point so that I can help our designers make better choices?
  • 10:10 When it comes to responsive web design in WordPress, I find myself using a lot of modules in the WordPress page editor to organize the sites content. Is there an easier way of doing this?
  • 16:30 Have you ever used any prototyping tool like Fireworks or Sketch? If so, what is the best tool you’ve came across?
  • 22:10 Where should I include the media queries for my responsive design in my CSS files?
  • 30:14 Is there a way to use pure CSS (i.e., no JavaScript) to modify properties of a whole table-column without marking up each individual cell?
  • 35:07 What other podcasts do you listen to?
  • 45:30 Why are some sites targeted by hackers more than others, especially automated attacks? Do web sites end up on target lists, or are the attacks just random?

Sponsors:

  • 15:05 lynda.com – The best online learning resource. New courses are posted every single day. Check out some super great courses like:
    • Audio & Music Production
    • Logic Pro X
    • InDesign Typography with Nigel French
    • Writing for the Web with Chris Nodder
    • Selling on the Amazon Marketplace with Peter Kent
    • And so much more! Learn all the things! Get a free 7 day trial now!
  • 28:29 One Month Rails: Learn Rails, 30 minutes a day for 30 days. You’ll learn how to build a fully functional web app using:
    • Ruby on Rails
    • HTML
    • CSS
    • Bootstrap
    • Git
    • Github
    • Command line
    • Databases using SQLite
    • S3 from Amazon Web Services
    • Heroku – the popular web service used for getting your site live on the Internet
    • We offer all students support: The best part is: if you get stuck, there’s always someone there to help you out while you learn. (Yes, like, a real person.) Enrollment is typically $99, but if you join now you’ll get a one time discount of 25% off for joining, AND as always you’re helping support Shoptalk. Enroll now @ onemonth.com/shoptalk!

Show Links:

Podcasts We Recommend:

If you’re enjoying our show, please take a minute to leave us a review in iTunes. We really appreciate it, and thanks to everyone who has already left a review!

Standard Podcast [ 50:46 ] Download
  • David Kizler

    Just a quick note that “option+drag” does/should repeat elements within Sketch.app. Also pressing “command+d” after “option+drag” will duplicate that same distance and drag.

    https://cl.ly/image/0a3V0l0M2k00/Screen%20Recording%202014-12-03%20at%2007.59%20AM.gif

    Finally, it does take undoing some muscle memory to stop pressing “V” for the select tool like in Adobe. “V” in Sketch is the pen/vector tool, but go for “escape” and you will have the select tool by default in Sketch.

    • chriscoyier

      I think it’s text specifically where it doesnt.

      • David Kizler
        • chriscoyier

          NICE. Dammit I swear to god it didn’t work earlier. Maybe the last update changed it. Or more likely I’m insane. But I swear it wasn’t just me either, I was sitting right next to another designer who was complaining about it and I tried it and it didn’t work for me either. oh well problem solved.

        • David Kizler

          Ok, hopefully the animated gif police are on vacay today, but you can also hold shit+option to ensure you drag things in alignment. It took me several real projects to transition from Fireworks to Sketch and unlearn years of Adobe, but once I got the Sketch shortcuts down, Fireworks now feels like a distant memory.

          https://cl.ly/image/3z0k2I1C3c06/Screen%20Recording%202014-12-03%20at%2008.43%20AM.gif

          • asecondwill

            Thanks for these tips, nice work!

  • Greg Sweet

    When I build a slider in WordPress I like to use Flexslider 2 with Advanced Custom fields. If you need something simple like testimonial quotes that slide in & out, use a repeater field “if page equal to…” You can also make a post type “Slide” and apply all the cool fields to it, for example a select field that adds a list of classes to apply to each slide, then hook that into Flexslider. Add the Post Types Order plugin and you can drag & drop the order of your slides.

  • I actually built a slider script for anchoragemuseum.org that accommodates multiple sliders on a page that also changes the amount of visible items at a certain width. All styling is done with css, but the JS needs to know how many items are visible (which could be calculated via css width), the total number of items in the slider, the width of the items, and any margins in between. On a resize, it goes through and checks/recalculates widths and determines the max scroll amount and the current scroll amount. It could definitely be built more generic, but it could work as a basis.

    There’s also a microsite inside this site that uses it with a visible marker to show the position of the slider that uses the same script.

  • Michael Hicks

    Super simple responsive slider: http://responsiveslides.com/