ShopTalk Show

By ShopTalkTechnology

ShopTalk Show episodes

September 15, 2014133: Rapidfire 36
This week it’s another RAPID-FIRE!!! Nothing but hot question and action action!
We talked about (roughly in order):
Q & A:
3:29 My question is about LiveReload. I want to use this but am having trouble getting sass, wordpress, and LiveReload to play nicely. When setting up live reload do you use the JS snippet or the chrome extension? Do you let LiveReload compile your sass, or use your tool of choice?
13:10 Is there a way to link lyrics to a song so that the word that is being sung is highlighted?
20:18 How does one bounce back from a bad job interview?
24:44 There is a growing trend now to switch from Photoshop to Sketch. I have been working in a Windows environment all this time and I have no idea what to do if I got a Sketch document! Should I ask the designers to extract the assets to me and use a JPG as a reference? Should I turn down jobs I am getting that aren’t in Photoshop till Sketch releases a version that can run in Windows?
33:21 What are your thoughts on the single responsibility principle pertaining to classes in html/css? If you use this principle, do you extend many classes in sass?
42:42 I have seen examples (Chris even did one on css-tricks.com) where you can have audio playing even after changing pages. Is it possible to do this with video in the sidebar?
48:23 What is the best way to query for the span element above using javascript?
55:05 I’m looking at switching my line-height set up from rem width px fallback to unitless. This is for a responsive project, where the support benchmarks have been set pretty far back. What the benefits are compered to staying with rems, and is there a performance/rendering benefit, or does unitless help with responsive?
Sponsors:
17:35 E4H: CSS Dev Conf The first conference devoted to CSS, the design language of the web, returns for its third year on October 13-15, 2014, this time to New Orleans.
Three keynotes and 24 sessions over three tracks makes for a fast-paced two-day immersion into modern multi-device design and development!
Grab your tickets now!
31:20 lynda.com – The best online learning resource. New courses are posted every single day. Check out some super great courses like:
SVG
JavaScript for Web Designers
Creative GoPro Photography and Video Techniques
Up and Running with Genesis for WordPress
Creating a One-Page Scrollable Website with Adobe Muse
So much more. Learn all the things! Get a [free 7 day trial now]!(http://lynda.com/shoptalk)!
Show Links :
Live Reload
Codekit
Grunt
Gulp
Gulp Web Server
Gulp Live Reload
Tiny Live Reload (Gulp)
CSS Tricks: Cross Browser CSS Injection
Browser Sync
HTML5 Audio Karaoke
Overcast Podcast Player
Sketch
Single Responsibility Principle CSS
SMACSS by Jonathan Snook
Benefits of Unitless Line Height
If you enjoyed this show, please let people know by leaving us an iTunes review! We really appreciate it. Thank you!
1 hr 1 min
September 08, 2014132: With Ian Feather
This week we were joined by Ian Feather. Ian is the Client Side Technical Lead at Lonely Planet.
We talked about (roughly in order):
Q & A:
28:26 How do I create CSS shapes for my website?
32:40 I noticed that Lonely Planet uses SVG icons; but they appear to be base64 encoded. How is that set up in the CSS, and what happens when they need to edit/add icons?
35:28 How do you guys deal with what I call project shame? Basically, no matter how good the end product is, I always end up finding the imperfect parts to hate, resulting in my career being a never-ending flurry of project shame. Does that happen with you guys too, or should I go see a therapist?
42:30 I’m wondering why a lot of people are choosing Bower components over using a cached version from a Google/Cloudflare hosted CDN? Isn’t the latter way faster most of the time?
50:16 I work in an environment where the JS architecture I write isn’t really understood by the majority of my coworkers. Should I continue writing classical JS in this environment? Or should I start writing functional JS so that my coworkers are more likely to understand my code?
54:00 Do you tend to create SVGs by hand (typing the points for lines and what not) or do you simply export SVGs from Illustrator?
57:16 Is building your own blog a rite of passage for a young web developer trying to level up, or is it a colossal waste of time?
Sponsors:
26:20 E4H: Sass Summit – Environments for Humans brings together some of the Web’s most notable experts in for an all-new, one-day only online conference, the Sass Summit 2014! Bring the experts to your desktop November 6th from 9AM to 4PM (CT). Join us for a day of Sass experts discussing the state of Sass and deep diving the features that make our workflow easier: from building style guides, coding complex RWD layouts, and much more.
Grab your tickets now!
47:27 – WP Migrate DB Pro – The easiest way to sync WordPress databases between local and live sites. Copy your database from one WordPress install to another with one click in your dashboard.
Stop wasting time on migrations
Eliminate the pain that is migrating a WordPress *database
Work less, bill the same, increasing your effective hourly rate
No more fiddling with SQL files
Head over to the WP Migrate DB Pro website to learn more!
Show Links:
Ian Feather’s Website
Ian on Twitter
Lonely Planet
The CSS at Lonely Planet
Grunticon
Pattern Lab
Rizzo Lonely Planet Style Guide
CSS-Tricks: What do you do when your design pattern breaks down?
CSS-Tricks: Icon System with SVG Sprites
CloudFlare
Shoptalk FAQ
The Noun Project
Jekyll
If you enjoyed this show, please let people know by leaving us an iTunes review! We really appreciate it. Thank you!
1 hr 5 min
September 02, 2014131: With Karolina Szczur
This week we were joined by Karolina Szczur. Karolina is a designer, developer and photographer living in Kraków, Poland. She is currently working with the delightful people of &yet.
We talked about (roughly in order):
Q & A:
23:44 How do you guys deal with web fonts that render significantly smaller than average?
31:02 What is the current trend for the placement of a form on a page?
39:46 The agency I work with isn’t happy I’m using LESS or SASS for front end styles. They claim the CSS it delivers for the client is too messy, and that we should write straight CSS. Do you have any recommendations for writing cleaner pre-processed code?
47:15 Is it feasible in CSS to have ellipsis applied to multiline text (text in a block, so height is also should be considered), if it starts to overflow?
58:11 I am quite new to web design and I think I could improve on my web presence. It seems that almost all web professionals use Twitter extensively. Why is it such an important tool?
Sponsors:
22:02 E4H: CSS Dev Conf The first conference devoted to CSS, the design language of the web, returns for its third year on October 13-15, 2014, this time to New Orleans.
Three keynotes and 24 sessions over three tracks makes for a fast-paced two-day immersion into modern multi-device design and development!
Grab your tickets now!
37:54 lynda.com – The best online learning resource.
Check out super great courses like:
SVG
JavaScript for Web Designers
Creative GoPro Photography and Video Techniques
Up and Running with Genesis for WordPress
Creating a One-Page Scrollable Website with Adobe Muse
Get a free 7 day trial now!
Show Links:
Karolina on Twitter
Karolina’s Website
&yet
Emoji Fortunes
Typekit by Adobe
Font Squirrel
Stylus
Basics of the Unix Philosophy
CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS
Barney Carroll’s Multi-line Ellipsis CodePen
CSS Tricks: Line Clampin’
CSS Tricks: A Complete Guide to Flexbox
If you enjoy the show, please take a minute and fill out our short feedback survey! This will be closing soon so get your submissions in and help us shape the future of the show!
Also, if the show has helped you in any way, please let people know by leaving us an iTunes review! We’d really appreciate it. Thanks!
1 hr 7 min
August 25, 2014130: Rapidfire 35
This week it’s another RAPIDFIRE! Nothing but the best darn question and answer action you’ve ever heard!
We talked about (roughly in order):
Q & A:
3:45 I need a responsive image solution for a redesign of a website running on the (.NET) Episerver CMS. What responsive image solution would you use under these constraints?
8:18 I’ve built a whole range of different sites now on WordPress and in each case I’ve felt that once I push the site live, the load time is sluggish. How do you approach this problem and what kinds of resources are out there to help?
13:50 Any tips for avoiding merge conflicts in the compiled .css file when working in teams? Should I even push compiled CSS to the repository, or should this be one person’s responsibility?
17:13 What software do you guys recommend when testing websites through a screen reader or text-based browser?
23:11 I’ve seen a few tutorials online using Adobe Edge Animate to create CSS animations. Is it something that needs to be learned or looked into if I already have working knowledge of CSS3 animations and transforms?
28:15 I am trying to dig into Sass/SCSS, preprocessors and have learned a lot already about using command line with Grunt.js and Compass, but I’m wondering if CodeKit would just be a simpler and easier thing to learn first?
32:10 What are some best practices when using tabindex?
38:06 Where would you recommend a young web designer start off? Let’s say they know html and css and are looking to learn more or kick of their career, what would you recommend?
41:10 I know there is a performance hit for every new font that gets loaded, but once I have loaded a font, is there a performance hit based on how much text on the page is being rendered? My boss likes to use the web font for the H tags and then use fallback web safe fonts for body copy, is this necessary?
45:05 I used to use my main email address for all my accounts, and shortly after an attack on a certain famous tech company, I received huge waves of spam that I have been struggling to get rid of. How do you guys handle your email accounts?
49:08 I’ve got a bone to pick with links and a seemingly odd trend of not adding target="_blank". My question to you is, “What’s up with that?”
54:00 If you export an adobe illustrator AI file to SVG, you can choose to save the layers as meta data in the SVG file. What’s even more interesting is you can then target those layers with css and jquery. Essentially you can traverse the Illustrator layer stack in an SVG file and add things like hover events which change the layer color via css. Here’s a tutorial on the subject which goes into greater detail.
Sponsors:
21:02 E4H: Accessibility Summit – Environments for Humans brings together some of the Web’s most notable experts in and for an all-new, two-day online conference, the Accessibility Summit 2014! Bring the experts to your desktop September 9-10, 2014 from 9AM to 4PM (CT).
With flexible content delivery and adaptable applications, the truly Accessible Web is available to everyone all the time, regardless of ability. Spend some time with the Accessibility experts and find the inspiration and practical knowledge you need to make your Web presence truly universal.
Don’t miss this great event and purchase your tickets now!
39:13 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 Animate CC updates: some sweet new features like copy/paste SVG art from Illustrator.
Show Links:
Adaptive Images
W3 Total Cache
New Relic
ChromeVox
NVAccess Screen Reader
Accessibility Developer Tools
Adobe Edge Animate
Codekit
An Alphabet of Accessibility Issues
Code School
Treehouse
Codecademy
1Password
If you enjoy the show, please take a minute and fill out our short feedback survey!
1 hr
August 18, 2014129: With Sara Soueidan
This week we were joined by Sara Soueidan. We take a deep dive into the world of SVG.
We talked about (roughly in order):
Q & A:
17:45 Why do you think it took us so long to start using SVG images in web development?
27:36 I just started fiddling with SVG sprites a bit and the things that I haven’t figured out yet in my SVG workflow are: removing inline styles from paths, polylines, lines etc, so that I can easily override them in my CSS file, cleaning up empty tags, and in general cleaning up unused stuff, so that the resulted file is as light as possible. Do you know of any resources, grunt plugins online tools that can do that automatically?
36:47 I’d like to use cacheable SVG sprites for icons; what’s the best way to achieve this, and can you highlight the pros and cons of the different techniques? Also, I’m currently testing an external symbol SVG file – what’s the most solid method of testing for browser support of SVG symbol? Does the ‘hasFeature’ test work robustly?
43:18 Can you give us a rundown of how SVGs actually render on a page and the best way to size/scale them?
51:10 Is there any simple way to work with SVG, and is working with SVGs going to be the next trend?
54:34 I have just used “CSS3 columns”, do you think would that be enough in future to create magazine site?
Sponsors:
35:03 E4H: Front End 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 5PM (CT).
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 stay on top of cutting edge.
Use coupon code SHOPTALK, and grab your tickets now!
48:52 lynda.com – The best online learning resource. Check out great courses like:
SVG
JavaScript for Web Designers
Designing a Logo for a Band
Writing Press Releases
Monday Productivity Pointers, and so much more.
Get a free 7 day trial now!
Show Links:
Sara Soueidan
Sara on Twitter
Understanding SVG Coordinate Systems & Transformations
SVG Optimiser by Peter Collingridge (non-command line, works right in browser)
Codrops
SVGmin Grunt
CSS-Tricks – A Compendium of SVG Information
Modernizr
SVG use with External Source
Chris Coyier – SVG is for Everyone (video)
Dmitry Baranovskiy – You Don’t Know SVG
Using CSS Regions With CSS Shapes For A Better Reading Experience
Guide to Responsive-Friendly CSS Columns
1 hr 7 min
August 12, 2014128: Rapidfire 34
This week it’s another Rapid Fire!!! Nothing but the best darn question and answer action you’ve ever heard!
We talked about:
Q & A:
2:01 I follow tons of awesome web developers on Twitter and I learn about all the cool new things. I’m feeling a little overwhelmed. How do I actually get better at making websites?
8:22 I got an email that contained a countdown timer gif. Do you know how this was accomplished?
15:54 I am working with a site that generates it’s own short urls and I was wondering about adding to my pages. First of all, what good does it do? Secondly, I also saw . What is the difference, if any, and which should I be using?
25:44 What is your preference for fixing design breakpoints in responsive designs?
33:54 Now that Twitter is cutting off their Javascript engine to the public, how do I pull in tweets from Twitter without having to use the embedded widgets?!
40:02 Why do people avoid using Javascript?
44:44 How do you handle touch screens and responsive design?
52:42 Many mobile first grids/ frameworks I see use predefined breakpoints. Doesn’t this go against the common rule of designing for the content and not the device? Should I have commonly defined breakpoints then tweak each page accordingly?
Sponsors:
13:55 E4H: Front End 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 5PM (CT).
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 stay on top of cutting edge.
Use coupon code SHOPTALK, and grab your tickets now!
30:22 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 Animate CC updates: some sweet new features like copy/paste SVG art from Illustrator.
Show Links:
React JS
Angular
Ember
Countdown Clock in Email
Email Countdown App
CSS Shapes
Brackets Code Editor
CodePen: Twitter Post Fetcher
Trent Walton: Device Agnostic
CodePen: Input Methods by Operating System
Overcast.fm
Podcast Junkies
1 hr 4 min
August 04, 2014127: With Tobias Günther
This week we were joined by Tobias Günther. Tobias is the founder and CEO of Fournova, the makers of Tower – the most powerful Git client for Mac. We take a deep dive into Git and version control.
We talked about (roughly in order):
Q & A:
16:06 I have never used git before as a web developer/designer. Can you explain in more detail about how git works?
21:12 When you make a commit in a VCS like Git or Subversion, should the commit message be in the past, present or future tense?
24:44 I am part of a very small team prototyping a new app. We are familiar with GitHub, but the enterprise-company we’re working for requires us to work in Subversion (SVN). How would you recommend we attack the SVN dilemma?
32:32 We have a linux-based server where some of our clients’ websites are hosted. Someone thought of the idea of moving the entire website-folder into a Dropbox-folder thus keeping all the websites constantly backed up to the cloud, and at the same time using the Dropbox built-in version history to easily revert back to older versions of images/files or whatever when needed. Any ideas about pros/cons regarding performance and so on?
40:06 What license – if any – do you guys use for open source software?
45:10 I recently wrote and open-sourced a “framework” of sorts which deploys WordPress projects via Git/GitHub using Capistrano and WP-CLI. Here’s the link.
52:00 Have you tried using Git as a project management tool? Would you recommend it?
57:05 Do you know of an ebook, online resource, or online course directed at Git newbies?
Sponsors:
23:07 Environments for Humans – Digital Biz Summit – Environments for Humans brings together some of the Web’s most notable experts in for an all-new, one-day only online conference, the Digital Biz Summit 2014! Bring the experts to your desktop August 20th from 9AM to 5PM (CT).
Dan Mall, Emily Lewis (Digital Biz & The Hiring Process), Carl Smith, Robb Harr (Digital Biz & Cashflow) etc. all going to be there to answer questions, and provide support to freelancers and small biz owners. Use coupon code SHOPTALK for 10% off your ticket!
37:21 Media Temple – For years, Media Temple has been the premium web hosting choice of more designers, developers, and creative professionals than any other platform. It’s all managed through their own simple, custom control panel, and backed by Media Temple’s famous 24/7 live support. Virtual Private Server solutions are also available with their DV and DV Developer hosting plans. Also, check out their new managed WordPress hosting which includes 3 WordPress installs with unlimited bandwidth!
Special discount for ShopTalk listeners, use promo code SHOPTALK for 25% off your first month of web hosting. Go to mediatemple.net and enter your promo code upon signup.
Show Links:
Tobias on Twitter
Fournova
Tower 2
Scott Jehl: How We Make RWD Sites Load Fast as Heck
Dave Rupert: RWD Bloat
Getting Started with Git
Learn Version Control with Git
Versions App
CornerStone App
Git SVN
Sublime Text
WTFPL License
MIT License
MIT/GPL Dual License
WP Deploy
Deploying with Capistrano
FogBugz
Codeschool: Try Git (free interactive online course)
1 hr 4 min
July 30, 2014126: With Fabio Carneiro
This week we were joined by Fabio Carneiro. Fabio is an Email & User Experience Designer at MailChimp, where he designs and develops versatile, responsive html emails for over 4 million users.
We talked about (roughly in order):
Q & A:
21:50 Are there any tools or frame works to help make responsive emails easier for me?
38:06 Can you describe your workflow for marking up and testing a HTML email?
44:58 If you were an active member in a forum, how could you describe the notification preferences of your dreams?
49:40 What is the easiest way of handling data without a database?
53:11 I’ve noticed that most registration forms don’t require the user to enter their email address twice (just like the password). Is there any best practice to make it the most comfortable for the client and securing a successful registration process?
Sponsors:
20:20 Environments for Humans – Digital Biz Summit – Environments for Humans brings together some of the Web’s most notable experts in for an all-new, one-day only online conference, the Digital Biz Summit 2014! Bring the experts to your desktop August 20th from 9AM to 5PM (CT).
Dan Mall, Emily Lewis (Digital Biz & The Hiring Process), Carl Smith, Robb Harr (Digital Biz & Cashflow) etc. all going to be there to answer questions, and provide support to freelancers and small biz owners. Use coupon code SHOPTALK for 10% off your ticket!
35:32 Media Temple – For years, Media Temple has been the premium web hosting choice of more designers, developers, and creative professionals than any other platform. It’s all managed through their own simple, custom control panel, and backed by Media Temple’s famous 24/7 live support. Virtual Private Server solutions are also available with their DV and DV Developer hosting plans. Also, check out their New Managed WordPress Hosting which includes 3 WordPress installs with unlimited bandwidth!
Special discount for ShopTalk listeners, use promo code SHOPTALK for 25% off your first month of web hosting. Go to mediatemple.net and enter your promo code upon signup.
Show Links:
Fabio on Twitter
Fabio’s Website
Mailchimp
Templates – Mailchimp
Responsive Email Patterns
Ink from Zurb
Litmus
1 hr 3 min
July 21, 2014125: Rapidfire 33
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:
Picture Element
Picturefill Polyfill
Buzzfeed Minus Gifs
Will-change CSS Property
Fighting the Space Between Inline-Block Elements – CSS-Tricks Blog Post
Stackicons
FitText
Conditional Loading for Responsive Designs
1 hr
July 12, 2014124: With Rob Dodson
This week we were joined by Rob Dodson. Rob works on Polymer at Google. True Facts. We take a deep dive with him into Polymer and Web Components.
We talked about (roughly in order):
Q & A:
27:58 Web components are a hot topic at the moment, and it looks like libraries like Polymer are almost ready for production. Have either of you guys had the opportunity to play around with web components yet? Do you think they are the future? What do you believe to be positive and negative aspects of breaking up your HTML, CSS and JavaScript into isolated bundles of styling/functionality?
39:58 What would you say are the advantages of polymer over angular directives?
46:40 Is it possible to use Polymer with Phonegap?
49:09 When working on a project with a team, using Git and SASS, what does your guys folder structure and workflow look like?
54:38 I’ve started using Grunt for javascript concat and minification, image optimization and cache manifest generation when necessary. Should I .gitignore the node modules folder?
Sponsors:
24:22 SpeedCurve – Monitor front-end performance. Get continuous feedback on how your front-end code is affecting the performance of your website.
44:50 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 your tickets now!
Use coupon code “SHOPTALK” for 20% off any ticket combo.
Show Links:
Rob Dodson’s Website
Rob Dodson on Twitter
Polymer
A Guide to Web Components
Intro to Material Design
Responsive Design Speed Testing
Chrome Status
Angular Directives
Phonegap
Cordova
Google Web Fundamentals
1 hr 2 min

About ShopTalk Show

From the publisher's feed

ShopTalk is a podcast about front end web design, development and UX. Each week Chris Coyier and Dave Rupert are joined by a special guest to talk shop and answer listener submitted questions.

Share ShopTalk Show

Sign up to save your podcasts

ShopTalk Show

ShopTalk Show episodes

About ShopTalk Show