Dave and Chris are back together for a Rapidfire episode talking about the modern 2017 stack for front end development, Sass vs native CSS, best practices for HTML comments, Microsoft’s efforts with Linux, database cleaning, and the ongoing Atomic CSS debate.

Questions

22:25 What is the best practice for HTML comments?

28:30 The Mac use among developers might not be as prevalent as you think. Are you following what Microsoft is doing with WSL?

36:00 I remember Dave said something about cleaning up his database on some site. Deleting row´s I guess. Which rows in the database can you safely remove? That won´t somehow break your site but just speed/clean it up.

47:10 Where do you guys fall when it comes to ordering your CSS properties in a declaration?

53:00 I heard you guys briefly mention “tachyons” in a recent Rapidfire episode. Have you guys spent some time with it beyond just playing around for a few minutes?

Links

CodePen Radio – Building Projects with React

Reddit Poll: What OS Do You Develop On?

Dave’s Repo: Can I Subsystem It?

Microsoft’s Windows Subsystem for Linux

Gimp

WP Optimize

Day Trip

CSS-Tricks: Let’s Define Exactly What Atomic CSS Is

Sponsor: Rollbar 34:01

One of the frustrating things about being a developer, is dealing with errors.

Relying on users to report errors

Digging thru log files trying to debug issues

Or a million alerts flooding your inbox ruining your day

Rollbar’s full-stack error monitoring, gives you the context, insights and control you need to find and fix bugs faster. Rollbar works with all major languages & frameworks. It’s easy to install. Start tracking errors in 8 mins.

by engineers at Heroku, Twilio, Kayak, Zendesk, Twitch & more.

Go to rollbar.com/shoptalkshow and get the Bootstrap Plan free for 90 days.

Job Mention

Check out the ShopTalk Show Job board

Show DescriptionDave and Chris are back together for a Rapidfire episode talking about the modern 2017 stack for front end development, Sass vs native CSS, best practices for HTML comments, Microsoft's efforts with Linux, database cleaning, and the ongoing Atomic CSS debate.

We’ve got Robyn Kanner and Mike Monteiro on the show to talk about ethics in design. When and, more importantly, how should you stand up to a manager when they tell you to design something in a way that feels wrong? Where do ethics and morals collide and how do we navigate that?

Links

Robyn Kanner on Twitter / RobynKanner.com

MyTransHealth.com

Mike Monteiro on Twitter

Mule Design

Design is a Job

Mike Monteiro: Ethics Can’t Be a Side Hustle

DearDesignStudent.com

Uber Greyball Evades Authorities

AIGA

Sponsor: An Event Apart 26:19

An Event Apart are conferences for people who make websites. The Seattle show just wrapped up and it was fantastic! Good news for you: there are five more shows this year, in Boston, Washington DC, Chicago, San Francisco, and Denver.

Sponsor: Rollbar 37:34

One of the frustrating things about being a developer, is dealing with errors.

Relying on users to report errors

Digging thru log files trying to debug issues

Or a million alerts flooding your inbox ruining your day

Rollbar’s full-stack error monitoring, gives you the context, insights and control you need to find and fix bugs faster. Rollbar works with all major languages & frameworks. It’s easy to install. Start tracking errors in 8 mins.

by engineers at Heroku, Twilio, Kayak, Zendesk, Twitch & more.

Go to rollbar.com/shoptalkshow and get the Bootstrap Plan free for 90 days.

Job Mention

Datadog – Front-end developer

Do you want to be part of one of NYC’s top startups? We use modern tools to build, test, and track our corporate sites: Hugo, Docker, GitLab, Speedcurve, React, Python, Bootstrap, and Cloudfront, are some of the technologies we use daily.

We’re a small, fast-moving, drama-free team working from a bright office with floor-to-ceiling windows and 360º views of Manhattan.

Check out the ShopTalk Show Job board

Show DescriptionWe've got Robyn Kanner and Mike Monteiro on the show to talk about ethics in design. When and, more importantly, how should you stand up to a manager when they tell you to design something in a way that feels wrong? Where do ethics and morals collide and how do we navigate that?

Hiring is always a hot topic for ShopTalk Show and we’ve got a couple of hiring experts on to talk about what’s important in the hiring process and they also rate your hosts, Chris and Dave, on how hire-able they would be on the job market.

Links

Rebecca Murphey on Twitter / rmurphey.com

Indeed

Lon Ingram on Twitter / lawnsea.com

RetailMeNot.com

ShopTalk Show Law Declarations

No laws were declared in this episode.

Sponsor: Rollbar 18:29

One of the frustrating things about being a developer, is dealing with errors.

Relying on users to report errors

Digging thru log files trying to debug issues

Or a million alerts flooding your inbox ruining your day

Rollbar’s full-stack error monitoring, gives you the context, insights and control you need to find and fix bugs faster. Rollbar works with all major languages & frameworks. It’s easy to install. Start tracking errors in 8 mins.

by engineers at Heroku, Twilio, Kayak, Zendesk, Twitch & more.

Go to rollbar.com/shoptalkshow and get the Bootstrap Plan free for 90 days.

Sponsor: CodePen PRO 43:12

CodePen has launched Projects. Everything works exactly as you would expect in developing a website with a local file system and simple web server. Relative file paths to your images? No problem. @import in your CSS? Do it. Ajax requests? Sure thing. Nested folders? Got ’em.

Have an existing project elsewhere? Maybe a git repo you cloned locally and want to play with? You can drag the files into the Project Editor and get working right away.

Like to write your CSS with Sass? We got you. Just name the file, for example, with the file extension .scss and we’ll understand and process that file for you. Included partials and all. We’ve got all the major ones covered.

You’ll be able to deploy a CodePen Project to a static website. It’s a one click process for PRO users! Developer PRO users will also be able to map their deployed project to a domain they own. That way you can manage real production websites on CodePen.

Job Mention

Check out the ShopTalk Show Job board

Show DescriptionHiring is always a hot topic for ShopTalk Show and we've got a couple of hiring experts on to talk about what's important in the hiring process and they also rate your hosts, Chris and Dave, on how hireable they would be on the job market.

We’re joined by Ernie from Code for Miami and Mike Sarasti from the City of Miamia to talk about how local government can work together to open up data to enable developers to build amazing stuff that would benefit everyone. We talk about how you could get started helping your local government on the web and how the City of Miami has launched a new alpha version of their city website.

Links

Ernie on Twitter

LittleYellowDifferent.com

Mike on Twitter

Mike Sarasti on LinkedIn

ShopTalk Show 249 with Rebekah Monson

Code for America

Open-Austin

City of Miami Alpha website

18f

OpenCities.com

Sponsor: CodePen Projects 42:00

CodePen has launched Projects. Everything works exactly as you would expect in developing a website with a local file system and simple web server. Relative file paths to your images? No problem. @import in your CSS? Do it. Ajax requests? Sure thing. Nested folders? Got ’em.

Have an existing project elsewhere? Maybe a git repo you cloned locally and want to play with? You can drag the files into the Project Editor and get working right away.

Like to write your CSS with Sass? We got you. Just name the file, for example, with the file extension .scss and we’ll understand and process that file for you. Included partials and all. We’ve got all the major ones covered.

You’ll be able to deploy a CodePen Project to a static website. It’s a one click process for PRO users! Developer PRO users will also be able to map their deployed project to a domain they own. That way you can manage real production websites on CodePen.

Job Mention

Check out the ShopTalk Show Job board

Show DescriptionWe're joined by Ernie from Code for Miami and Mike Sarasti from the City of Miamia to talk about how local government can work together to open up data to enable developers to build amazing stuff that would benefit everyone. We talk about how you could get started helping your local government on the web and how the City of Miami has launched a new alpha version of their city website.

On this RapidFire episode we answer your questions on QA processes, accessibility on a gallery of pictures, gulp, Dave explains something like you’re 5, why are there bugs in software, and how to justify mobile site development to stakeholders? All this and a bit of a follow up on this episode of ShopTalk Show!

Jump to a discussion on…

1:40 I’ve been struggling to make my QA process as efficient as possible.

14:00 How do you label a gallery of pictures with accessibility in mind?

25:00 Is there an advantage of using gulp-watchify over plain old gulp.watch?

30:34 Can you explain this to me like I’m 5: How do modern MVC frameworks “connect” to the backend, or even third party APIs?

44:40 Why are there bugs in our software?

51:30 If you are working on a website who’s mobile traffic and conversation rate is low, how do you justify the additional time to create a mobile friendly UI to stakeholders?

1:00:45 @Support

Links

ShopTalk Show 83 with Florian Motlik of Cadetship

Michah Godbolt

NGrok

LocalTunnel

ForwardHQ

Gulp

Gulp Watchify

Chokidar

Book Review: Weapons of Math Destruction

Presentable on Relay.fm

ShopTalk Show 250 with Web Security

Sponsor: HelloSign 22:55

Embed documents directly on your website with just a few lines of code.

Try the API

Sponsor: CodePen PRO 43:35

CodePen PRO unlocks privacy

We’ve got some amazing new privacy features coming to CodePen Pro – nothing we can announce yet – but if privacy is a feature that’s important to you, check out CodePen Pro.

Job Mention

Check out the ShopTalk Show Job board

Show DescriptionOn this RapidFire episode we answer your questions on QA processes, accessibility on a gallery of pictures, gulp, Dave explains something like you're 5, why are there bugs in software, and how to justify mobile site development to stakeholders? All this and a bit of a follow up on this episode of ShopTalk Show!

Prepare to have your mind blown as we go virtual — we’re joined by Kevin Ngo and Josh Carpenter who work for Mozilla and Google on their respective VR teams to explain the basics of VR as well as how it relates to the web.

Jump to a discussion on…

3:40 How did Josh get started working in VR?

6:50 How did Kevin get started working in VR?

9:45 Why are you compelled by VR?

10:25 Why is VR such an exciting space to be working in?

12:20 How do you get started in VR hardware?

14:00 What does room scale mean in VR?

16:20 Are VR games made specifically for a platform?

17:40 Why WebVR?

20:10 Are there standards for VR and WebVR?

22:45 Dealing with input types on VR.

24:45 Is VR still awe inspiring?

28:00 What’s A-Frame and how does it fit in VR?

29:55 What are some interesting things people are building in A-Frame?

33:02 Building Whack-a-Dave

37:00 You don’t need photo-realistic models to have an authentic experience

39:05 Mouth-explaining Big Screen

40:20 How does VR get over the looking stupid problem?

43:50 VR is an interesting industry to work in if you’re into the implications.

44:40 Why should a traditional web site care about VR?

52:20 2D vs 3D experience

54:30 Issues for coding for VR

58:20 VR and ethics

59:50 What’s Microsoft and Apple’s play in VR?

1:06:02 VR and AR

1:08:02 How do you get started into WebVR?

Links

Kevin Ngo on Twitter / ngoKevin.com

Mozilla VR

Josh Carpenter / JoshCarpenter.ca

TitleBrush

Oculus Rift

Vive

Playstation VR

Google Cardboard

A-Frame

A-Frame A-Painter

Bigscreen VR

Doctor Strange in VR

Microsoft Hololens

Samsung Gear VR

WebVR.Rocks

Firefox Nightly

Sponsor:

An Event Apart 25:50

An Event Apart is coming to Seattle this April 3-5, 2017! Three days of design, code, and content with speakers like Jen Simmons, Val Head, Una Kravets, Krystal Higgins, and ShopTalk’s very own Chris Coyier.

Chris recommends sticking around all three days, so you can watch the premier of his brand new workshop Let’s Build a Website (and Talk About The Job of Front-End Design and Development)

Get your tickets at AnEventApart.com.

Sponsor:

CodePen PRO 49:30

CodePen PRO unlocks Collab Mode.

Collab Mode allows more than one person to edit a Pen at the same time. If you’ve ever used collaborative editing in Google Docs, it’s like that! Real-time pair programming at its best, since the two (or more) people can be anywhere in the world!

Every character you type, every line you select, and every setting you change happens immediately on all of your collaborators screens. And likewise for everything they do.

Job Mention

Check out the ShopTalk Show Job board

Show DescriptionPrepare to have your mind blown as we go virtual — we're joined by Kevin Ngo and Josh Carpenter who work for Mozilla and Google on their respective VR teams to explain the basics of VR as well as how it relates to the web.

RAPIDFire except less rapid and more fire this time? We’re talking support for @supports, should you do work you don’t agree with? Should you use data URLs all the time? How would you spend two grand? Do we need to solve CSS or is it fine the way it is?

Jump to a discussion on…

2:10 Dave mouthcodes a thing.

7:40 Chris tries to not write CSS for a thing.

12:15 Is it safe to rely on @supports alone yet for CSS related queries, or should we keep using modernizer for the next few years until more browsers actually support @supports?

24:01 Thought: Who took the Judicial branch of the government off of the menu for The White House website?

40:00 I just learned the basics of how to create and use data URLs to display images. Why would we still use the old way of displaying images? Are there specific times we wouldn’t want to use a data URL instead or any cons to take into account that I haven’t learned yet?

48:18 What new tech toys would you buy with an extra two grand?

58:20 I’ve recently seen a higher than usual uptick in people trying to ‘solve’ CSS because of what I’ve heard to be an inherent ‘global scope’ problem with CSS itself. How do you guys feel in regards to CSS being such a problem that it warrants the current proposed solutions I’ve seen in the wild?

Links

@Supports on MDN

Modernizer

A Complete Guide to CSS Grid

A Complete Guide to Flexbox

BizCraft Episode 51: How society & ethics can affect your business

Pham Transcription Services

FreeCodeCamp

Edx

Grunticon

Buy expensive sound panels for your office

Send us your advice on how to spend $2k

Repo: CSS in JS list

ShopTalk Show Ep 180 Panel on Inline Styles

ShopTalk Show Law Declarations

1:05:10 Dave never backs down from blanket declarations.

Sponsors:

Rollbar 38:10

One of the frustrating things about being a developer, is dealing with errors.

Relying on users to report errors

Digging thru log files trying to debug issues

Or a million alerts flooding your inbox ruining your day

Rollbar’s full-stack error monitoring, gives you the context, insights and control you need to find and fix bugs faster. Rollbar works with all major languages & frameworks. It’s easy to install. Start tracking errors in 8 mins.

by engineers at Heroku, Twilio, Kayak, Zendesk, Twitch & more.

Go to rollbar.com/shoptalkshow and get the Bootstrap Plan free for 90 days.

CodePen PRO 56:40

CodePen PRO unlocks asset hosting – Need to use an image in a Pen? No more awkwardly finding alternate hosting for it, you can drag-and-drop it right onto CodePen and we’ll host it for you.

And it doesn’t have to be just images. It could be CSS, JavaScript, a PDF you want to link up, a short movie file, some JSON to request, really anything!

Job Mention

Check out the ShopTalk Show Job board

Show DescriptionRAPIDFire except less rapid and more fire this time? We're talking support for @supports, should you do work you don't agree with? Should you use data URLs all the time? How would you spend two grand? Do we need to solve CSS or is it fine the way it is?

It’s conference season and we’ve Una Kravets and Krystal Higgins from An Event Apart Seattle on to talk about how they got into their “things” – the stuff they talk about, why they picked that topic, what to do if other people hop on your thing, and ideas to start giving talks at conferences.

Jump to a discussion on…

9:10 Summary of Krystal’s talk “Onboarding for Any Situation” talk at An Event Apart Seattle

14:10 How did Krystal learn about onboarding and dive in to it?

17:20 Can a good app still survive even with bad onboarding?

19:10 Dave walks into a bar and signs up for Snapchat.

22:01 How do you rate a good or bad onboarding experience?

26:30 How do you get invited to talk at conferences?

33:40 How does Krystal’s involvement with Android Wear relate to on-boarding?

35:30 Chris tries on a HTC Vive

44:01 What happens if somebody starts treading on your thing?

47:40 If too many people have the same thing, does it create too much noise around it?

50:50 What if no one is interested in your thing?

52:07 3 things to look for in a conference talk.

55:05 Chris’ low-fi way to test out a talk idea.

Links

Una Kravets / @una on Twitter / Una on GitHub

DigitalOcean

Toolsday.io

Krystal Higgins / @kryshiggins on Twitter

Krystal’s Etsy Shop

An Event Apart Seattle

DaveRupert.com: My PocketCHIP

Tilt Brush

CSS Dev Conf

JSConf

One-tab

Sponsors:

Rollbar 24:42

One of the frustrating things about being a developer, is dealing with errors.

RAPIDFIRE! pew pew We’re covering a lot of ground in this episode: AMP revisited, mailbags, password, HTTP2, getting old in web design, podcasting in Italian. Listen up!

Jump to a discussion on…

2:10 What are your thoughts on AMP now?

8:25 What are your thoughts on GetShifter.io?

12:28 Please make the ShopTalk Show /archives/ mobile accessible!

14:29 Saving passwords on your Mac and restoring them.

17:25 Concatenation of tiny files is still a good idea in HTTP2.

25:25 As an older person, I’m happy to join in with Paulie and confirm that work continues and I’m just as busy as ever as a freelance designer/developer.

31:10 Command line explained to Chris by Dave.

45:40 As a somewhat mature age student of web design and development I’m really keen on finding a mentor to help me with this journey.

53:30 I am thinking about starting a web development podcast in italian, so my question is: how did you get started?

58:54 I want to get my Sass on – how do I learn about it?

Links

Baidu Launches MIP

GetShifter.io

Panic Coda

Slideshare about HTTP2

Danluu.com: Most of the web really sucks if you have a slow connection

DaveRupert.com A Standard System of Measurements

ShopTalk Show 232

CSS-Tricks: Getting Started with Elm

The Pocket Chip

Cloudinary

Working the Command Line by Remy Sharp

Tim Holman Pen on Switches

Lara Hogan

ShopTalk Show #250 with Alex Sexton and April King

Dan Shiffman Coding Train

Sass for Web Designers by Dan Cederholm

Sponsor:

CodePen PRO 24:00

CodePen PRO unlocks private pens – which was the reason a lot of CodePen PRO users upgraded to CodePen PRO. With CodePen PRO, you get unlimited Private Pens, Posts, and Collections.

Job Mention

ShopTalk Show Job Board

Show DescriptionRAPIDFIRE! *pew* *pew* We're covering a lot of ground in this episode: AMP revisited, mailbags, password, HTTP2, getting old in web design, podcasting in Italian. Listen up!

We’re talking web security with a couple of web security experts – April King and Alex Sexton. We talk through the ways your site can get attacked and then cover the key things you can do to protect yourself from the majority of attacks.

Jump to a discussion on…

5:30 Who picked the scores for the Mozilla observatory test suite?

7:20 Are these attacks a back end problem or a front end problem?

9:01 What is HTTPS and why do I need it?

13:30 It’s pretty safe to assume at least somebody is listening to your traffic

16:30 Why wouldn’t a site use HTTPS everywhere?

17:35 Should I use it for my blog?

26:35 What’s XSS?

29:50 How do I stop XSS attacks?

34:50 How do you set CSP?

44:20 Inline stylesheets as an anti-pattern.

50:00 What’s CSRF?

53:00 What’s CORS?

55:40 What’s sub-resource integrity?

1:02:00 What happens if my site gets an F from Mozilla observatory?

1:07:30 How long does it take to secure my site and how do I know I did it right?

1:12:10 What tools do I use to test my site?

Links

April King on Twitter

Alex Sexton on Twitter / Alex on Github

securethe.news

Mozilla Observatory

enable-cors.org

hstspreload.org

Report-uri

SSL Labs

Let’s Encrypt

Cloudflare

Sponsors

An Event Apart * 17:31

You should come to An Event Apart! Six shows this year, all around the U.S. Chris will be speaking at most of them and giving a workshop at a few of them.

April 3-5 Seattle

May 15-17 Boston

July 10-12 Washington DC

August 28-30 Chicago

October 30-November 1 San Francisco

Denver 11-13 Denver

CodePen PRO 1:00:45

CodePen PRO unlocks Collab Code which allows you to do Google Doc like collaborative sharing of the code you’re writing. One way you can use it: interviewing potential front-end hires!

Job Mention

ShopTalk Show Job Board

Show DescriptionWe're talking web security with a couple of web security experts - April King and Alex Sexton. We talk through the ways your site can get attacked and then cover the key things you can do to protect yourself from the majority of attacks.