167: Rapidfire 44

01:00:35   Download

Another RAPID-FIRE for you this week; nothing but HOT question and answer madness.

We answer questions about package management, inline-css, CSS frameworks, code editors, testing, and more!

We talked about (roughly in order):

Q & A:

  • 4:44 Is it my lack of experience, or do the dependencies on Node and Ruby projects regularly break your projects as the gems / packages are updated?
  • 12:56 On show 155 you talked about inline CSS and cases where it might be ok to use. The one case where it’s useful is when you want a dynamically served image to fill it’s containing element, while being centered within in it. Case in point: a WordPress Featured image, that acts as the hero image. If that image is inserted inline as a background image on a <figure> or “<div>, you can simply set the style of that element to be background-size: cover, and background-position: center in your style-sheet, and have it fill the container, without relying on any extra JS or CSS transforms to achieve the same effect.
  • 20:22 I’ve only briefly experimented with CSS frameworks like Bootstrap and 960 Grid, but my cursory evaluations have led mainly to frustration. I like being in complete control of my code, and I like knowing there aren’t a myriad of classes unknown to me that are affecting the behavior of the elements I’m trying to work with. It feels like I’m constantly fighting against the framework to make things behave exactly how I want. It just seems these frameworks are adding a layer of complexity rather than making things simpler. So, my question: am I viewing CSS frameworks incorrectly – perhaps a more thorough exposure to the framework in use will open my eyes to its usefulness? Or are CSS frameworks just not for me?
  • 30:00 What are your thoughts on https://atom.io/ ? Seems like pretty good editor, even better than sublime.
  • 41:13 I’m taking a course on HTML5, CSS and JS at my university in Sweden. They have decided that frameworks like Bootstrap are not allowed because of the risk of plagiarism, due to a previous incident where a student bought a complete website and submitted as a final project. As a result they have now banned use of any use of frameworks, including things like jQuery. What are your thoughts on this approach?I think using pure JS takes the joy out of making awesome websites.
  • 47:16 Hey guys, just listening to the latest episode with Bastian Allgeier, maker of the Kirby CMS, which I love. You guys were talking a bit about workflows with Kirby. I use Kirby on my site and just wanted to show off my awesome Kirby workflow:
  1. I keep the code for my site on Github.
  2. I keep the ‘content’ folder in Dropbox.
  3. I install Dropbox on my server.
  4. I use Capistrano to deploy the code from Github to my server, and then have Capistrano create a symlink inside the Kirby CMS folder, pointing to the Dropbox ‘content’ folder. BAM

That way I can mess around with stuff, while keeping my content out of harms way. Also, for creating new content, I use nvALT (using markdown of course) on my Mac, which has a sweet preview panel that you can customize with your own CSS and HTML, so you get a real live preview of your posts with the exact same stylesheets that are on your website.

  • 50:42 I’ve recently been trying to write more tests for my web apps. This works well for functions since I can say, “With this input, expect this output.” But what about for user interfaces? What is your approach to making sure that your changes do not mess with the existing UI when working on a team? Any continuous integration tools?

Sponsors:

  • 18:26 lynda.com – This episode is brought to you by lynda.com, the online learning platform with over 3,000 on-demand video courses to help you strengthen your business, technology, and creative skills. For a free 10-day trial, visit lynda.com/shoptalk!

lynda.com is for problem solvers, for the curious, for people who want to make things happen. Maybe you want to master Excel, learn negotiation tactics, build a website, or boost your Photoshop skills… go to lynda.com and feed your curious mind.

Check out some super great courses like:

  • Illustrator CC for Web Design: Wireframing
  • Android Studio Essential Training
  • Up and Running with Java
  • Bootstrap Layouts: Responsive Single-Page Design
  • Localization for Developers
  • Up and Running with Android Wear
  • Growth Hacking Fundamentals
  • xCode 6 Courses:
  • Swift Programming Language First Look
  • iOS App Development with Swift Essential Training

Your lynda.com membership will give you unlimited access to training on hundreds of topics–all for one flat rate. Whether you’re looking to become an industry expert, you’re passionate about a hobby, or you just want to learn something new, visit lynda.com/shoptalk and sign up for your FREE 10-day trial.

  • 39:19 Environments for Humans – Front End Summit – As the web changes for the better, so do our tools. While keeping on top of industry changes is part of the job, fighting our tools that can help us do our job faster and better shouldn’t be. In this special FrontEnd Summit, we deep dive into tools – some common like text editors and some relatively new to the scene like Grunt and Sketch – to see how they can help us stay on top of cutting edge.

Environments for Humans brings together some of the Web’s most notable experts in for an all-new, one-day only online conference, the FrontEnd Summit 2015! Bring the experts to your desktop June 2nd from 9AM to 4PM (CT).
Don’t miss this great event, grab your tickets now and use coupon code “shoptalk50” to get 50% off!

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!

Also, you might like Chris’ other podcast, CodePen Radio. Dave thinks it’s better than the Startup Podcast.

  • Mark Bloomfield

    With regards the second question about inline CSS… For that specific example of having an image applied to a DIV with cover etc…

    The route that I’ve taken in the past, has been:

    HTML:

    jQUERY:
    var databg = $(‘div[data-bg]’);
    databg.each(function() {
    var bg = $(this).attr(‘data-bg’);
    $(this).css(‘background-image’,’url(‘+bg+’)’);
    });

    CSS:

    div[data-bg] {
    background-size: cover;
    background-repeat: no-repeat;

    }

    Does the job pretty well.