175: Rapidfire 48

01:02:29   Download

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!

Q & A:

  • 2:27 After designing and creating a website on a Mac and getting everything looking pretty, I always get a bit disappointed when I come to look at the site on a PC. I find the font smoothing and colour management on OS X make everything look substantially nicer, particularly @font-face fonts. Adding a subtle text shadow to everything helps a bit but are there any plugins or other tools to improve font smoothing on the users’ screen? If not, is there anything you take care to avoid at the design stage to make the difference less apparent in the end product?
  • 6:30 I’m used to building websites from scratch, but I’m getting into HTML5 frameworks. What is the best way to customize one of those frameworks?
  • 11:55 How do you feel about condensing information into swiping carousel on mobile devices? Basically, if a site has 3 columns of informational text on desktop it will turn into a 1 column carousel with swiping functionality on mobile. Some of the designers like it because it provides more interactive/fun experience on mobile, as well as helping balance and shorten the page length. I feel like this has the same principle of regular hero sized carousels and the fact no one uses them. Also, hiding content like that is just bad right?
  • 17:35 So my question for you sort of open-ended, I just was hoping to get a little window into what your organization style and workflow is like with SASS. Do you keep separate stylesheets and import them all? Do you keep everything organized in one file like classic CSS? I’d just like to get some advice from someone who’s been through the ropes a little bit and can help me write code I won’t cringe at when I look back at it years from now.
  • 21:55 I want to be able to select <li>’s like how I would files my desktop. It looked like I could use jQuery UI, but…it doesn’t support the Shift key for multiple select. Do you have any suggestions for a plugin, Code Pen (plug), etc. that could help me out?
  • 26:04 I have a question about uploading a site to the web. I work locally with localhost etc, and then put my files online via FTP. I have heard you mention this is now outdated and not best practice. What are the best alternatives to FTP and what are their benefits over FTP?
  • 29:22 I have always styled the default state for links using the type element selector on the anchor element like a { styles… } but I have always wondered about the pseudo-class :link since it’s function is to style links that are in its default state maybe I should just be styling using :link { styles… } instead of on the anchor element? Then I wouldn’t have conflicting styles and the need to overwrite styles when using an anchor for wrapping divs and getting rid of those link styles.
  • 33:12 I graduated with a comp-sci degree but found that I love to design as well as develop on the back end. Is there anyone out there that does this? Or is there always a clear cut break between the front end and back end? Is it good to blur these lines?
  • 36:37 I would like to know if there are any workarounds for pixel rounding as-well as floating point rounding in browsers? My problem occurs when I make fluid grids. All browsers seem to round floating points differently which makes them inconsistent across browsers.
  • 40:15 The agency I’m working at is starting to move toward more modular SCSS, following the SMACSS model. Jonathan Snook says that media queries should go next to the module that they affect. I think this approach will be way easier to maintain, since all the code for that module will be in one spot, but I’ve also heard people mention that this will lead to massive code bloat and performance issues. Are there performance issues with this? What kind of organizational model do you all follow with your SCSS to help with maintainability?
  • 44:46 I work for a small design/development agency. We are planning on redesigning our archaic website. How we build it is primarily up to me. The content will consist of media-rich case studies. It is currently on WordPress. Keeping it updated becomes so overwhelming and cumbersome that it never seems to happen. I am considering using Jekyll or perhaps some other static site compiler. Everyone in the company knows how to write markdown, and I feel that keeping the content updated via YAML or JSON would actually end up saving time. The whole site could be stored in a git repo and in my mind be much more flexible moving forward. Are there other compilers like Jekyll that I should consider? Is there anything you have found overwhelmingly difficult with this approach? Static files seem unprogressive yet in many ways they feel like a breath of fresh air.
  • 51:01 What are best practices when using Gulp on a team? Should everyone always be running the latest versions of Gulp, NPM, SASS, etc? How should I deal with old Gulp files? Should I update them as I come across them, or maintain the same Gulp file across all projects? Do you have any other best practices for maintaining development environments between team members?
  • 55:43 If you have a huge database driven web app, is it better to have an incomplete sitemap, or none at all? Do you see sitemaps themselves potentially becoming obsolete as search engines get smarter/better at finding their way around?

Sponsors:

  • 15:52 E4H – CSS Dev Conf – Over the course of two days, see what’s happening next with web building. Join Chris Coyier, Dave Rupert, Sara Soueidan, Val Head, and people like you aboard the legendary Queen Mary docked in Long Beach, CA for CSS Dev Conf. Grab your tickets now!
  • 44:11 Velocity Conference – Attend Velocity Conference in New York October 12-14 to learn from continuous delivery, DevOps, web operations & performance experts and network with developers and operations engineers. Use code ST20 to get 20% off registration.

Show Links:

Looking for a job? Check out the Shoptalk Job Board!

Do you think Shoptalk is the best podcast on the internet? Leave us a review in iTunes, it helps other people find us! Five stars, please and thank you!

Hey: if you like this show, check out CodePen Radio.

  • 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.