125: Rapidfire 33

00:59:16   Download

This week it’s another Rapid Fire!!! Nothing but the best darn question and answer action you’ve ever heard!

We talked about (roughly in order):

Q & A:

  • 3:30 Do you have any rule of thumb for deciding when to use the new element (using the picturefill polyfill) vs just using CSS background images with media queries for responsive images? Is it more a question of semantics?
  • 12:15 What is translateZ traditionally used for and how can it help me with my front-end style markup?
  • 24:26 I love inline-block, it’s great and allows for easy simple vertical alignment. However it always adds that little bit of extras space making items wrap, e.g. a list of 4 with each set at 25%. Is there a better/cleaner way than commenting out the space? Why does it even happen?
  • 31:36 I’m trying to move stackicons.com from icon font to SVG-based. Can you reference an external style sheet in the SVG file itself and use that as a single place to change styling across all the icons?
  • 38:45 In jQuery, what is the difference between the .on function and the .click function?
  • 44:47 I’m curious on what your thoughts are for terminology changes across an entire project. To give you some background, I work for a company that has created a web-based software. We have come across stages in our development that we want to change the terminology for functionality in our site. How would you guys go about this?
  • 51:44 Regarding performance on mobile, is it better to A) have all content on page load and then show-hide it, B) inject the markup and content dynamically or C) load that markup and content using ajax, when a tablet o desktop media query matches, so secondary content can be shown to these more capable browsers.

Sponsors:

  • 20:19 Adobe – Check out Project Parfait: it’s a really nice way to extract everything you need from a PSD – in your browser!
  • Also, take a look at the Edge Animage CC updates: some sweet new features like copy/paste SVG art from Illustrator.
  • 37:05 E4H – FrontEnd Summit – Environments for Humans brings together some of the Web’s most notable experts in FrontEnd for an all-new, one-day only online conference, the FrontEnd Summit 2014! Bring the experts to your desktop August 21st from 9AM to 4PM (CT).
  • Lots of great talks including: Sublime, Vim Editors FTW, Fearless Browser Test Automation, The State of Grunt, and more! Get 20% off your tickets now by using coupon code “SHOPTALK”!

Show Links:

  • Great talk. This was my first listen and I plan to keep checking it out. Thanks.

  • g_mena

    Great episode. Really enjoyed the discussion of picture element and the terminology changes. “Blasts” not posts…funny stuff.

  • Ralph Mason

    There’s a nice, reliable way to remove inline-block spacing that usually gets overlooked, which is a pity. Here’s a CodePen demo: http://codepen.io/pageaffairs/pen/BfIun/ But display: table or display: flex is probably a better way to go these days anyhow.

  • zackvbrady

    In regards to the second to last question related to changing terminology. You both mentioned how in a project people may have different sets of terminology. There’s a great approach from the Software development world called Domain-Driven Design (http://en.wikipedia.org/wiki/Domain-driven_design). The idea is that before beginning a project you study the domain (the subject matter behind whatever you are building) to the point where you can create tools to better understand and communicate the logic behind the project. One of the tools would be a terminology list that must stay consistent throughout the entire project. That not only makes it easier to communicate within and between teams but also makes communicating with a client hell of a lot easier.

    A great quick read for it is Domain Driven Design Quickly (http://www.loewenbraeuzelt.de/wp-content/uploads/DomainDrivenDesignQuicklyOnline.pdf). Again, the ideas come more from Software and the Backend world but can be very useful to use on front-end projects.

  • I think that CSS-Hat is a great alternative for Project Parfait as a plugin for Photoshop. Yes it costs money, but if anyone works with projects under non-disclosure agreements like I do all of the time, you don’t have to upload your files to the Adobe Servers and technically break the contract.