An internet radio show about the internet starring Dave Rupert and Chris Coyier.

Subscribe on iTunes or RSS

Twitter:

175 Rapidfire 48

01:02:29 Download

Show Description

We've got another RAPID-FIRE for you this week! Nothing but questions and answers. That's what you like, right? Ohhhh, yeah.

We answer questions about fonts on Windows PCs, CSS frameworks, carousels, organizing SASS files, deploying with rsync, unicorns, managing Gulp files, and more!

Show Sponsors

Interested in sponsoring?

Time Jumps

Comments

  • For the question at 40:15; Here is a PostCSS plugin that would solve that very ‘issue’: https://github.com/hail2u/node-css-mqpacker

  • Ed Hollinghurst

    For the question at 26:04; It’s probably worth mentioning that tools like dploy.io and deployhq.com can really help with the process of getting your files from the git repo onto the server. Rachel Andrew wrote a great article about this. http://24ways.org/2014/developing-robust-deployment-procedures/

  • for 26:04, I think BeyondCompare (http://www.scootersoftware.com/) might be another easiest option, it sync and help to upload files.

  • Raymond Schwartz

    Question @ 29:22 about using :link; Although I didn’t come up with a base case for why :link isn’t “useless,” I do find it useful when using BEM naming and modules. I’ve made a pen to illustrate:

    http://codepen.io/skeeter/pen/PqXdVy

    My comments from that pen:

    Q: Why use :link?

    This question came up here:
    http://shoptalkshow.com/episodes/175-rapidfire-48/#t=29:22

    A: I find :link useful when using BEM naming and modules. BEM elements may have links or not so using :link can differentiate between the two. Explanation of BEM naming (http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/):

    Selectors:

    .u-VCard__item:link

    vs

    a.u-VCard__item
    or
    .u-VCard__itemContainer a

    Benefits:

    1) It’s more efficient if you’re using a scheme like BEM naming. From right-to-left, you would be targeting all anchors, then either their containers or ones with a specific class. With :link, you just target the one element (no chaining).

    2) Avoids needing to know DOM structure—you don’t need to know element nesting or which elements have which classes; part of what BEM naming is all about.

    3) Using a{} for general purposes and overriding at the module level with :link{} gives you more specificity so it’s more likely your overrides will “take.”HAte – active needs to be after hover). Don’t add :link to visited.

    If you don’t specify :link for :hover, .u-VCard__items without anchors will also get hover styling. Then you also need it for :active since hover will be more specific and override active on hover (and remember LoVe HAte – active needs to be after hover). Don’t add :link to visited.

Job Mentions

Check out all jobs over on the Job Board. If you'd like to post a job, you can do that here, and have it mentioned on ShopTalk for a small additional charge.