Syntax - Tasty Web Development Treats

By Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Listen to a podcast, please open Podcast Republic app. Available on Google Play Store.


Category: Tech News

Open in iTunes


Open RSS feed


Open Website


Rate for this podcast

Subscribers: 852
Reviews: 3


 Oct 24, 2018

james
 Sep 20, 2018
funny and informative for web devs

A Podcast Republic user
 Sep 5, 2018

Description

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

Episode Date
How To Get Better At Problem Solving
59:40

In this episode of Syntax, Scott and Wes talk about how to get better at problem solving — one of the most important skills to build as a developer.

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Prismic - Sponsor

Prismic is a Headless CMS for your next front end project. Create complex content type, relate data, and have your clients edit it all with the Prismic UI. Then pull the data into your project with their JSON or GraphQL API. Try it out with your next project - Gatsby, React + Apollo, or any other language. Check out their examples to get you started at Prismic.io/syntax.

Show Notes

2:43 - Gather info

  • What is this thing trying to do?
  • Use tools
  • DevTools are your best friend during this phase

8:01 - Know where to look (and use tools)

  • Dev tools for client side
  • Error logs
  • Sentry
  • LogRocket
  • The most experienced people in any field know how to ask the right questions.
  • Some of this will come with experience and nothing else. If you’ve seen a problem before, it’s easier to solve.

10:00 - Look at the end game

  • What are you really trying to do here? Don’t focus so much on the tech that you miss the bigger picture.

13:17 - Read Again

  • Error logs provide the best clues. Read them closely.
  • Actually read your code — don’t skim it.
  • Write comments while reading it, or follow existing comments — good for documenting, but also for structuring your thoughts.

18:08 - Make it simple (break it into smaller parts)

  • Limit the number of inputs and outputs
  • Get it working in a limited capacity (e.g. safe mode, Codepen, etc.)
  • Comment out major sections of code until you have a working example
  • Does this problem exist outside of the framework?
  • Does this work in a clean environment?

25:35 - Take yourself out of your environment

  • You should be able to take a look at the problem at all zoom levels
  • Does it work locally but not on the server?
  • Does it work in other browsers?

27:32 - Stay calm

  • It’s easy to get nervous or worked up when the stakes are high
  • It won’t serve you to panic. If you are panicking, take a 10 min walk to deep breath
  • Take a shower, lift weights (seriously)

30:14 - Talk it over

  • Getting the perspective of another developer can be invaluable

32:28 - Make things obvious

  • Use debugger or label logs — don’t let it be ambiguous
  • For CSS bugs, use primary colors to make things stand out
  • Use the right tool to make the problem stand out
    • Layers for CSS issues
    • Network for network issues
    • Performance tab (etc.)

35:12 - Use Git correctly to free up your techniques

  • If you’re code commits are up to date, you can heavily modify code without fear of deleting things — just revert to a previous commit once you find the issue and fix.

36:10 - Don’t jump at solutions

  • Take the time to fully dissect the problem
  • Question you assumptions
  • It can’t possibly be a problem with ____. Well maybe it is.
    • Wes once spent hours trying to diagnose a check engine light when the gas cap was lose.

43:51 - Get good at pattern matching

  • This comes with experience
  • When did this problem start?
  • Did we deploy any code? Did we change any logic?

44:54 - Get good at googling

  • Being able to describe your problem is key.
  • Search the error from Firefox

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Nov 20, 2019
Hasty Treat - Tips For Writing Good CSS
25:22

In this Hasty Treat, Scott and Wes talk about tips for writing good CSS.

Sizzy - Sponsor

Sizzy - The browser made for developers and designers. Stop manually resizing your browser window and switching between devices so you can test responsive design. Speed up your workflow by developing and previewing your website on multiple devices at once. Sizzy includes powerful features and plugins that will help you take your web development game to the next level. Sizzy.co.

Show Notes

4:08 - Use a system

4:50 - Use overrides and cascading

  • Embrace the cascade
  • Don’t rewrite the same CSS over and over again
  • Understand why scoping is good

9:07 - Nail down typography early

  • You can always revisit if it isn’t what you need

10:36 - Pick a pattern and stick to it

  • BEM
  • Functional CSS
  • CSS in JS

14:39 - Don’t style based on element type (kind of) — a class should describe the component

17:09 - Good naming techniques

  • Describe what it is, not what it looks like
  • Thing
    • ThingChild
      • ThingChild-modifier
  • Scale sizes (e.g. s, m, l, xl)

21:43 - Other tips

  • Group like CSS together
  • Chunk into different files
  • Write good comments
  • CSS properties FTW

Links

Tweet us your tasty treats!

Nov 18, 2019
Design Foundations For Developers
01:01:40

In this episode of Syntax, Scott and Wes talk about design foundations for developers — tips to follow that will make your designs better!

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

6:35 - Our backgrounds in design

12:41 - Foundations

  • Consistency makes a big difference
  • Use “training wheel” tools until you are confident
  • Always work within a system
  • Less is more - subtle is better

19:39 - Color

  • Color theory
  • Complementary colors and shades
  • Stick to color pallet generators until you are good enough

28:51 - Spacing

  • More spacing than you think you need
  • Vertical rhythm
  • Letter spacing: -1px
  • Consistent margin and padding

34:47 - Typography

  • Sans vs serifs
  • Finding fonts
  • Use proven combinations until you know your way around

41:49 - Interaction

  • Design for all states (e.g. standard, visited, active, hover, etc.)
  • Animations should be quick
  • Interactions should make sense

45:04 - Concerns beyond visuals

  • Accessibility via color contrast
  • Thin fonts and light grey are awful
  • Think about the poor Windows users

48:47 - Inspiration + Resources

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Nov 13, 2019
Hasty Treat - Buying and Selling Domain Names
21:35

In this Hasty Treat, Scott and Wes talk about domain names — buying and selling, best practices and more!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

2:50 - Buying a domain

10:47 - Selling a domain

13:50 - Transferring a domain

Links

Tweet us your tasty treats!

Nov 11, 2019
Potluck - Gatsby vs Next × Is Google Home spying on you? × Flat File CMS × CSS Frameworks × Hosting Client Sites × More!
59:32

It’s another potluck! In this episode, Scott and Wes answer your questions about Gatsby vs Next, Google Home and privacy, flat file CMS, working with designers, CSS frameworks and more!

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

6:15 - Q: Curious if you would ever consider running your course platform on Gatsby instead of NextJs? If not, what dynamic content would prevent you from doing so?

10:48 - Q: What’s the difference between a software developer and a software engineer, in your opinion?

13:11 - Q: How do you deal with designers who design without any thought about how dev will implement it?

15:46 - Q: I saw that Wes has an example in one of his slides where the Array prototype is written onto the Nodelist prototype. Is this safe enough for production as it overrides all regular NodeList behavior?

19:18 - Q: In a potluck episode you mentioned that you do not host your clients’ website. If you don’t host you clients’ website how do you usually go about handling clients that are less tech savvy? Or do you avoid those types of clients?

21:30 - Q: I know you guys (especially Wes) have been pretty insistent recently on not hosting clients’ sites yourself, but what do you guys think about continuously hosting client sites with a service like Netlify? It’s highly unlikely to go down and scales all for you, so it might be a bit of reoccurring income if you bill them yearly for the minimal Netlify fees.

24:44 - Q: I was listening to your episode on “The Smart Home” and I’m very interested in buying a Google Home Mini myself. However, I cannot stop thinking about the privacy implications of an always listening device around the house. What are your thoughts on this topic and on privacy related to online services in general?

29:08 - Q: What are your thoughts about using a CMS that uses flat files vs one that uses a traditional MySQL or Postgres database for a company blog that won’t have insane traffic? We’re currently evaluating Grav CMS and Craft CMS.

32:17 - Q: Have you used data attributes as custom elements in CSS and JS?

37:32 - Q: Why do so many people jump on styled-components/CSS in JS? Are these all people who have never used Sass/SCSS?! It seems like such a PITA to get Sass working with either of these. It feels like coding tables vs HTML 5. To me it seems like a step backwards.

44:26 - Q: When do you, if ever, reach for a component library, like Material or Bootstrap? Currently working a corporate job where it’s almost expected to use one of these for all internal applications. I usually prefer to make my own, but I’m wondering if I’m just making my life more difficult than it needs to be? Any advice?

48:30 - Q: Could you guys chat about Git clients and which ones you guys use and why? Or are you guys hardcore terminal geeks?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Nov 06, 2019
Hasty Treat - Spooky Stories
21:15

In this Hasty Treat, Scott and Wes bring you more web dev horror stories!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:26 - Perf Woes

3:42 - Always Backup Your Backups

4:54 - Kill Children

6:03 - Robots Don’t Eat Food

8:32 - Email Goof Up

9:44 - Hundreds of Thousands of Date Issues

10:46 - Spooky August

12:32 - You’re up to .bat

13:17 - Printed Code

15:12 - ThinkGeek

16:12 - It would take a while to Ketchup on all these orders

17:05 - This story makes me want to stick my head in async

Tweet us your tasty treats!

Nov 04, 2019
Spooky Web Dev Horror Stories
45:36

In this episode of Syntax, Scott and Wes talk about web dev horror stories — things you can only hope will never happen to you!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Show Notes

2:09 - Scott’s Disastrous Git Clean

4:35 - Magic Updates the Gathering

8:52 - YAAAAS

9:37 - Token Trouble

12:16 - jQuery Plugins

15:22 - Success!

18:00 - Parental Advisory

21:47 - Students Changing Grades

22:46 - Lorem Sh!tsum

26:22 - Drowning in a Waterfall

28:53 - Magneto Upgrades

30:00 - JOHN CENA

33:24 - Migration Migraine

35:39 - Primary Key Nightmare

36:26 - The $20,000 YAML formatter

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Oct 30, 2019
Hasty Treat - Scott Moves to iPhone
25:55

In this Hasty Treat, Scott talks about moving to iPhone — his experiences with both Android and iOS, the advantages and disadvantages of both, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

1:59 - My device history

  • OG Droid → Nexus → Pixel
  • Misconceptions of android
    • It’s Windows for phones
    • It’s cheaper or not as nice

5:03 - Why switch?

6:39 - Who wins what?

  • Android

    • Homescreen
    • Low light photography
    • Usability
      • Squeeze assistant
      • Google search integrated everywhere
    • Search
    • Keyboard
    • Notification
  • iOS

    • Apps
    • Performance
    • Camera overall
    • Device quality
    • Fun stuff
    • Haptics

Links

Tweet us your tasty treats!

Oct 28, 2019
Migrating, Deploying, and Hosting WordPress
01:02:19

In this episode of Syntax, Scott and Wes talk with Brad Touesnard of Delicious Brains about migrating, deploying, and hosting WordPress.

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Hasura - Sponsor

Hasura is an open-source GraphQL engine that helps you instantly setup a scalable and realtime GraphQL backend. Hasura makes your team super productive by dynamically composing a schema backed by databases and services that you can securely query from frontend clients. Get started at hasura.io to try it out in 30 seconds!

Show Notes

3:50 - Why did start Delicious Brains?

5:25 - What plugins does Delicious Brains make?

11:40 - Migrating WordPress

16:50 - Migrating databases

24:20 - How do you do version control with WordPress?

37:06 - What’s the easiest way to deploy and host WordPress?

40:23 - What are some examples of managed WordPress hosts?

46:58 - What does your deployment process look like from beginning to end?

50:22 - Thoughts on headless WordPress

53:12 - Is serverless WordPress a thing?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Oct 23, 2019
Hasty Treat - React Server Side Rendering
23:36

In this Hasty Treat, Scott and Wes talk about server side rendering — what it is, how to use it, best practices, things to avoid, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

3:20 - What is SSR?

4:16 - Why SSR at all?

8:39 - Platforms that do SSR out of the box

11:18 - Gotchas

  • useLayoutEffect
    import { useEffect, useLayoutEffect } from 'react'
    const useIsoLayoutEffect =
    typeof window !== 'undefined' ? useLayoutEffect : useEffect
    export default useIsoLayoutEffect

18:20 - Tools

Links

Tweet us your tasty treats!

Oct 21, 2019
The Fundamentals - Server Side
55:11

In this episode of Syntax, Scott and Wes talk about server side fundamentals — the important things you should know if you’re interested in diving into server side.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

2:53 - Requests and responses

9:21 - What is a server?

10:33 - Ports

13:50 - Database connection and interaction

15:16 - Cookies and sessions

15:48 - Writing files and directory permissions

19:34 - Headers

22:13 - Error Handling

22:50 - Logs

25:04 - Async data handling

26:33 - Routing

30:44 - Mime types

36:26 - Authentication

37:49 - Environmental variables

40:37 - Deployment

43:24 - Advanced

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Oct 16, 2019
Hasty Treat - Float Tank Experiences
23:24

In this Hasty Treat, Scott and Wes talk about their experiences with float tanks!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

2:28 - What is a float tank?

6:47 - What are the benefits?

8:50 - How did you feel during the float?

17:28 - Would you do it again?

Links

Tweet us your tasty treats!

Oct 14, 2019
Potluck - Terminal Configs × CSS Reset × Flexbox × Freelancing × NPM Dependencies × Project Hand-off × More!
55:45

It’s another potluck! In this episode, Scott and Wes answer your questions about freelancing, handing off projects to other developers, terminal configs, podcast apps, how much flexbox is too much flexbox, npm dependencies, and more!

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Show Notes

3:49 - Q: I’m interested in freelancing full-time and have some projects, big and small, lined up over the next few months to work on the side. How much work is a good amount of work to transition into freelancing full-time?

9:52 - Q: How much flexbox is too much flexbox? Is it a bad idea to use a dozen flexboxes for a viewport-filling application?

13:19 - Q: Can you explain the “potential” benefit of resetting CSS and whether it’s necessary? In which circumstances should we use such an approach?

15:26 - Q: I would love to hear an episode, or potluck segment, about your shell/fish/zsh configs. Maybe explain little tweaks you’ve made and why you’ve chosen the shell you use.

23:26 - Q: I always get confused on when and how to use .bind() method. Any pointers on when I should use .bind(), like in what situations? I also see it used a lot in React apps, but have no idea why they are using it. Could you explain this in detail?

27:02 - What are your suggestions for handing off client sites for freelance work? I don’t take many contracts (I have another full time job) but I’ll take one here or there during summer to supplement a little bit. I’m finding it difficult to make a clean hand-off when the project is finished. The contractual requirements are met and like anything, there are always tweaks to be made. I’ll handle some minor deployment issues without billing, but I struggle with where to draw the line. What suggestions do you have?

35:19 - This question is for Wes. I live in Central New York, and every time I go on the highway heading north or south I see several Ontario license plates. Where are ya’ll going all the time? Is there a secret Canadian spot down here?

38:20 - Each time I re-open an old project I lose so much time with npm dependencies being outdated and it drives me mad! I’m starting to dislike npm and everything around it, but is it npm only? How does other languages like php, python or GO handle this mess of dependencies? Are we better today than yesterday and I’m just complaining about nothing?

43:50 - Which podcast player do you use (Android, PC, or other phone/tablet), and why? Where do you listen to them?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Oct 09, 2019
Hasty Treat - Feature + Release Planning
19:20

In this Hasty Treat, Scott and Wes talk about feature and release planning — dealing with bugs, task management, best practices, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

4:06 - Wes:

  • Features are logged into software (Github, Jira, etc.)
  • I use a Kanban board - I bubble them up and down in the order in which I want to release them
  • I don’t plan for Q1, Q1, etc…
  • Tear off an issue, tackle it, test and deploy.

10:39 - Scott:

  • All issues/features get a priority tag (e.g. p1 → p4) regardless of the system
  • Bugs go in Github
  • Features and platform improvements go in Notion
  • Table of priorities (with git branch, lead dev, release number, emoji icon, what it contains, etc.)

Links

Tweet us your tasty treats!

Oct 07, 2019
Desktop & Mobile Apps With a Single Codebase
57:18

In this episode, Scott and Wes talk with Etienne Lemay, developer of Missive, about his experience building Missive, best practices, and the pros and cons of building desktop and mobile apps with a single codebase.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

0:57 - What is Missive?

6:10 - What is the desktop app built in?

9:44 - Did you use any particular libraries for the front-end?

11:44 - How are you managing state?

13:37 - Is it challenging to do all of this in JS?

15:07 - What was the catalyst for the “multi-conversation swipe”?

21:32 - What is the mobile app built in?

24:00 - What are the advantages of Cordova?

30:30 - How do you manage offline/syncing/etc. so well in a JS app?

34:56 - How do you test it?

36:52 - Have you looked into Cypress?

39:35 - How do you style it?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Oct 02, 2019
Hasty Treat - Developing Better Habits
27:30

In this Hasty Treat, Scott and Wes are talking about developing better habits — strategies, avoiding distractions, best practices, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:03 - Habits we’re trying to build

  • Scott
    • Focus on one project at a time
      • Alfred tasks to quit apps and block sites
    • Not being efficient with my time
      • Daily todo lists and utilizing calendar
    • Too much screen time
      • Listening to music in the background instead of having the TV on
  • Wes
    • Flossing
    • Mindless context switching

13:37 - General strategies for building habits

  • Make them trackable
    • Easy enough to not ignore them
    • Quantifying them is key
  • Make them small enough
  • Be accountable
    • Tell other people your habits and have them remind you about them
  • Replace bad habits with good things
    • Design a sticker
    • Reply to three emails
    • Drink some water
  • Celebrate your wins productively
  • Keep the streak alive
  • Can’t do x until y is done

Links

Tweet us your tasty treats!

Sep 30, 2019
Practical: How would we build Airbnb, Twitter, or Reddit?
51:50

In this episode, Scott and Wes are trying something new! It’s called Practical, in which Scott and Wes take a topic and flesh out all the theory into something super practical. Today’s topic comes from a listener question asking how they would build a simple version of a modern web app like Twitter, Reddit, or Airbnb.

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Show Notes

3:03 - Backend

14:45 - Frontend

  • React
  • Next.js
  • Styled components
  • Stay as close to real CSS as possible

22:39 - Deployment process

  • Serverless
  • Now
  • Ideally one app that handles everything

28:38 - Email

33:32 - Users / Auth / Cookies / Permissions

  • Use something a pre-existing package or service rather than role your own (though it can get expensive quickly)
  • Passport
  • Auth0
  • accounts-js

38:48 - Images

41:50 - Other things to be aware of

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Sep 25, 2019
Hasty Treat - Automating Stuff
23:52

In this Hasty Treat, Scott and Wes are talking about automation — apps, workflows, resources, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

3:16 - Alfred workflows

9:32 - Smart home routines

13:16 - Bash scripts & aliases

18:43 - Other

Links

Tweet us your tasty treats!

Sep 23, 2019
Potluck - Why Webpack? × Serverless × Agencies × Recruiters × CSS Grid × MQ in Styled Components
59:19

It’s another potluck! In this episode, Scott and Wes answer your questions about webpack, serverless, agencies, recruiters, CSS Grid, media queries and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

5:06 - Q: What do you think about webpack vs parcel vs the old way (gulp, etc.)?

11:30 - Q: What is your opinion on AWS Lambda functions?

15:42 - Q: How do you push new Syntax.fm episodes into production? Each episode is written in markdown. Do you have a different branch for each episode and merge into master? What’s your strategy to avoid releasing the episode before the intended date?

21:24 - Q: Can Scott share some of his experiences working at an agency? Are there any red flags for when you should jump ship?

30:44 - Q: Whats the deal with recruiters? How do they work, and should you use one to land a new job?

36:46 - Q: What do you think about Upwork? Is it possible to find cool full-time jobs there or is it only ‘work for beer’?

41:28 - Q: If my website is already fast, why should I sacrifice my developer experience and learn a new syntax?

44:17 - Q: Will there be a CSS grid inspector on Chrome? Do you use any 3rd party grid inspectors or stick with Firefox’s CSS grid inspector?

46:39 - Q: What the best way to handle media queries in Gatsby with styled components?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Sep 18, 2019
Hasty Treat - The TLD Game
22:56

In this Hasty Treat, Scott and Wes are playing a game! It’s called the TLD game, where Scott and Wes try to stump each other with questions about top level domains.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

1:55 - The rules of the game

We pick a TLD from a list, and the other person needs to guess:

  1. Is it for a country or business? -5 points
  2. What country, business, or type of business is it for? -5 points
  3. How much per year does it cost to register? You may also say “unregisterable” +/- off by $$
  4. is scott.___ and wes.___ available? -10 for each

5:40 - .BO

7:51 - .BZH

9:50 - .BANANAREPUBLIC

11:15 - .BABY

14:04 - .KR

16:09 - .MOTO

17:25 - .AW

19:16 - .IM

Links

Tweet us your tasty treats!

Sep 16, 2019
How We Record, Edit, and Host Our Courses
01:04:43

In this episode, Scott and Wes talk about how they make courses — recording, editing, hosting, best practices, and more!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

5:42 - Recording

33:04 - Editing

  • Wes:

    • Screenflow
    • Speed up slow typing
    • Edit out some goof-ups (but not all)
    • Edit immediately after recording so I’m in the same headspace and can easily re-record
  • Scott:

    • Hire a video editor
    • Cut out all blank spaces in audio, because I know that pauses are typically where I stop to think
    • Normalize audio
    • DaVinci Resolve 16

42:31 - Hosting

52:46 - Common Questions

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Sep 11, 2019
Hasty Treat - Moving from PHP to Node
17:52

In this Hasty Treat, Scott and Wes talk about moving from PHP to Node — pitfalls to avoid, best practices and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

3:43 - Servers need to be started and baby sat

4:48 - There is no built-in file system based routing

6:34 - Some "gotchas"

7:02 - Functional programming

8:17 - Async vs sync

11:11 - Event lifecycles

12:09 - Dependencies

14:17 - Keyed arrays

Links

Tweet us your tasty treats!

Sep 09, 2019
Building Steam Games with React
52:08

In this episode, Scott and Wes talk with Drew Conley about building games with Javascript.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

1:58 - What is Danger Crew?

5:25 - Did you have a background in game dev before this?

8:36 - What were the initial resources you went to to make a game in React?

10:27 - How much of it is Canvas?

13:06 - What other libraries are you using?

14:00 - How did you lay out the environments?

16:35 - How is text rendered?

22:40 - How did you do all of the animation?

26:08 - What performance issues did you run into?

27:31 - How do you handle user states and saves?

29:21 - Is there any server side aspect?

30:42 - What was the process for creating the level editor?

34:38 - How did you publish the game / wrap it as an executable to sell?

38:16 - How do you update it?

39:43 - How difficult was creating the game logic?

41:20 - The dev theme in the game is super prominent, did that make working on it more fun?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Sep 04, 2019
Hasty Treat - Stump'd
16:26

In this Hasty Treat, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

3:54 - What is the difference between NULL and undefined?

5:40 - What is short circuit evaluation in JS?

7:25 - What is use strict?

9:07 - What is the only value not equal to itself in JS?

10:36 - When would you create a static class member?

11:54 - What is a pure function?

13:08 - What is JSONP?

14:24 - Describe the layout of the CSS box model?

Tweet us your tasty treats!

Sep 02, 2019
How to Build an API
45:55

In this episode, Scott and Wes talk about creating APIs — what’s happening behind the scenes and why it’s important.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Show Notes

2:15 - How do you build an API from scratch?

3:54 - Choose an API type

8:15 - Setup some sort of server that will accept requests and send responses

11:11 - Document the endpoints

  • What is the end point
  • What parameters are required
    • Filters
    • Sorting
  • Headers required
  • What you get back when you hit this endpoint
  • Any request limits
  • Examples in common languages
    • JS
    • PHP
    • Ruby

21:20 - Naming

  • Make it obvious

27:39 - Securing

32:42 - Protecting

36:00 - Write resolvers

  • Modify data if needed
  • Send back the data requested
  • Send back the correct HTTP code
  • Log what happened

37:56 - Tools

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 28, 2019
Hasty Treat - Wes & Scott Look At Svelte 3
22:56

In this Hasty Treat, Scott and Wes talk about Svelte 3 — initial impressions and more!

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Show Notes

2:16 - What is Svelte?

11:32 - Sapper

13:05 - Svelte Native

14:58 - Questions we have

  • What’s the Typescript story here?
  • How hard would it be to convert a large React app to Svelte?
  • Will Svelte be able to capture the market share it needs to grow and compete?
  • Would you (Wes & Scott) use this?

Links

Tweet us your tasty treats!

Aug 26, 2019
Potluck - Deploying Applications × Typescript × Live Coding with Twitch × Fullstack Architecture × More!
46:37

It’s another potluck! In this episode, Scott and Wes answer your questions about deploying applications, the value of Typescript, live coding via Twitch and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

1:35 - Q: I prefer using grid-row and grid-column instead of grid-area. But is grid-area more performant? For example, in Flexbox, it’s a best practice to use the shorthand flex property instead of writing out flex-grow, flex-shrink and flex-basis.

4:04 - Q: Do you have any advice how to deploy an application? What do you think about AWS, Zeit, Heroku, Firebase? Do you use automation tools like Circle CI or Buddy.works? I also wonder if we should keep whole application on one server, or split it up.

9:36 - Q: A career advice question: I’m best at being a front-end/javascript developer - but in a quest to my make job(s) easier, I’ve also been getting into fullstack architecture - namely CI/CD (TravisCI, GitlabCI) and Kubernetes. I’m feeling like I’m spreading myself a little thin, and I guess I’m just finding it a bit frustrating (configuring Kubernetes is a lot of bashing your head against the wall). I know that my skills as a front-end developer are already valuable, whereas I can’t say the same for my Kubernetes/CICD skillset. I’m wondering whether I should narrow my scope a bit. Maybe this is just the frustrating hump I’m climbing over, and in six months I’ll be happy with where I’m at, but interested to hear your thoughts. One thing I’ve been thinking about is, maybe I should step back from the network architecture type stuff (ie. Kubernetes) and focus more on DevOps that is closer to the front-end stack (ie. writing tests, VSCode tooling, commit hooks, CI tools, etc.).

13:07 - Q: Do you think Typescript adds value to React, or more complexity than value? When should you choose Typescript for a project?

18:09 - Q: I am in a well known Bootcamp, and as of right now (from what they have taught us) this is what I am working with: HTML/CSS, JavaScript, jQuery, Node, Express, SQL, Auth, MVC, APIs, React, Redux. As we finish off the program, they are going over Java. I do want to learn Java, however I feel like my time would be better spent fine-tuning my knowledge on my stack. And I can learn Java at some other time. Do you recommend that I fully engage with Java and try to absorb some of the basics and fundamentals now, or do you recommend that I take this last month we have here and strengthen my current skills so I do better during my technical interviews? And by the way thanks for everything you do, it helps :)

22:02 - Q: Have you seen the live coding going on at Twitch? Thoughts? Maybe a Syntax stream in the future? There’s a good list at livecoders.dev. Thanks for all you do. Keep killin’ it!

26:11 - Q: How do you handle people (i.e. C# bastards) who think JavaScript is a joke and is going to be overthrown by Blazor or some other C# library framework? Can’t we all just get along and live in the same industry? I’m having a hard time being the adult in these kinds of responses around the web, and in random discussions with people I know very well.

29:55 - Q: There are plenty of places saying that it is important to secure API keys by not embedding them in front-end code. Cool. I’m on board! But there is not many that tell you specifically how to do this. How do you safely use an API key in a CRUD project?

34:15 - Q: Do you plan to launch a Syntax.fm app?

45:49 - Q: I was hired as a junior developer at a company in the last year. It’s my first development job and I was so excited. The interview and application were all about React and fullstack development. However now that I’ve been here a while, I have found out the company does primarily dev ops work. None of this was mentioned in the interview or application, but it looks like soon it will be the majority of my workload. I am feeling very discouraged and was wondering what you guys would do in this situation?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 21, 2019
Hasty Treat - How To Publish A React Component To NPM
17:46

In this Hasty Treat, Scott and Wes talk about documentation libraries, starting and maintaining projects, how to publish React components to NPM, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:40 - Create React Library

6:55 - Documentation libraries

10:54 - What I’m building

13:13 - Linking library to projects

14:52 - Improvements and community thoughts

Links

Tweet us your tasty treats!

Aug 19, 2019
State In React
55:06

In this episode of Syntax, Scott and Wes talk about state in React: local state, global state, UI state, data state, caching, API data and more!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

3:38 - What is state?

4:58 - What kind of things are kept in state?

  • Data
    • Temporary client side data
      • From forms, button clicks, etc.
    • Cached server data
    • Data from API
  • UI status
    • AKA isModalOpen
    • isToggled

12:48 - Global state vs. Local state

  • Ask yourself: does the data need to be accessed outside this component?
    • If data does need to be accessed a little higher, you can simply move where that state lives. React calls this “lifting state”.
  • Do you count Apollo API calls as global state?

21:15 - Managing Local state

  • useState, setState
  • Passing state & update functions down
  • State machines

31:12 - Approaches to Global state

  • Redux

    • Complicated, hard to learn
    • Very useful, organized and structured
    • Actions, reducers and more
    • Time traveling do to nature of store
    • Immutability
    • Tons of Redux based hooks libs
  • Mobx

    • Based on Observables
      • An Observable is like a Stream and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more.
  • Context

    • Functions just work and update global state.
    • Downside is there are no fancy tools
  • Apollo

    • Apollo quires for data in global cache
    • Apollo client for global UI state
      • Not quite there, isn’t super elegant

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 14, 2019
Hasty Treat - Remote Internet
24:16

In this Hasty Treat, Scott and Wes talk about remote internet! Remote internet is an important because it opens up living options to developers as the industry moves toward more remote work.

Netlify Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up Netlify for more info.

Show Notes

4:31 - Remote internet options

7:55 - Modems and routers

10:52 - Antennas

13:47 - Boosters

14:54 - Plans, data and speeds

20:11 - Other things to think about

Links

Tweet us your tasty treats!

Aug 12, 2019
Blogging
49:27

In this episode of Syntax, Scott and Wes talk about blogging — both the specifics of content (how to make great content), as well as the mechanics of where and how to publish blog posts.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Show Notes

7:06 - What are some of the different platforms for publishing a blog?

23:41 - How to structure a blog post?

29:10 - How to direct traffic to a blog post?

38:51 - How do you make technical content in-depth and also succinct?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 07, 2019
Hasty Treat - VSCode Love Part 3
18:46

It’s another VSCode episode! In this Hasty Treat, Scott and Wes talk all the things they love about VSCode — things to learn, how to get around more quickly, using keyboard commands, being more efficient, using snippets and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Show Notes

2:14 - Things to learn

  • Jump by word, line
  • Select by word
  • Command Palette (cmd + shift + p)
  • Move and copy lines - option up down or with shift
  • Multi cursor
  • Find and replace in files
  • Use the Insiders build if you like updates every day

11:03 - Keyboard commands

  • Cmd + b to hide sidebar
  • Cmd + shift + x

13:55 - Snippets

Links

Tweet us your tasty treats!

Aug 05, 2019
Potluck - What is "State"? × Web Sockets × Remote Working × Firefox × Machines Taking Our Jobs × More!
54:54

It’s another Syntax potluck! In this episode, Scott and Wes answer your questions about remote work, AI agendas, motivation, fitness, the future of coding, and much more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

FreshBooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

2:03 - Q: I hear you both talk about “state” a lot in your podcasts. And while I understand a little about it, I never understand it in the context you both use it. Can you enlighten us?

6:52 - Q: I have an idea for a project that is suited for web sockets, push text/images/documents to a bunch of users in real time. I just learned about Firebase’s real-time database, and it looks like it would be pretty easy to implement my idea. What are your thoughts, pros/cons, of these two technologies?

10:42 - Q: How’s your fitness going?

12:15 - Q: Let’s say both of you gents were junior developers that had basic knowledge and skills in HTML, CSS and JavaScript but you had all the experience and knowledge of how to best master those skills and where the industry was heading. What would be the outline and focus of your road-map knowing what you do now?

17:22 - Q: Is it worth it to find a remote dev job at an early stage of your career? Considering the stuff I learn from my seniors and other devs on the team, I wonder if I will lose the opportunity to learn stuff from my team members?

19:49 - Q: How do I keep myself motivated in coding?

22:47 - Q: What’s y’all’s opinion on using some obscure (at least in my opinion) features of a language, such as Javascript bitwise operators, in a production app that dozens of other engineers maintain, and will continue to maintain long after you leave the company? It seems hard to read and immediately understand, which possibly makes it harder to debug/refactor in the future. Is it the responsibility of future devs to learn if they don’t know, or should you find a different way to code the solution in the first place?

26:00 - Q: Wes, I keep hearing you talk about working from your Dropbox. Do you sync up everything? Even things like your node module folders?

29:26 - Q: Have you talked about Firefox Developer Edition? It looks like it should be very useful, but I can’t quite make the transition.

32:58 - Q: Hey guys, what your opinion of CSS naming convention methodologies such as BEM?

35:04 - Q: I would like to refer to the question from ep 140 about fronted development possibly dying. I don’t feel satisfied with the answer, so maybe I could state the question differently: With the machine learning being developed rapidly in recent years, will the web change, causing reduction of front-end jobs? Maybe we will just be training smart algorithms and developing them instead? What do you think?

40:32 - Q: How do you deal with anxiety and fear during interviews that might hinder your ability to give the best impression of yourself or solve coding challenges?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 31, 2019
Hasty Treat - VSCode Treats Part 2
18:52

In this Hasty Treat, Scott and Wes talk about more of their favorite VSCode tasty treats - extensions, features, keyboard shortcuts and more!

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up Netlify for more info.

Show Notes

3:45 - Extensions

9:36 - Features

  • Indent lines in explorer - Workbench > Tree Indent & Guides
  • Breadcrumbs
  • Commit all & visual git commands
  • Change branch in lower left
  • Rename Symbol

Links

Tweet us your tasty treats!

Jul 29, 2019
A Story About Kanye West and Learning to Code
56:59

In this episode of Syntax, Scott and Wes talk with Harry Dry about the crazy story behind his Kanye West dating site, how he taught himself to code, and how to come up with cool side projects!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Show Notes

2:30 - How did you get into web dev and come up with the idea for the Kanye West dating website?

10:29 - Do you have a background in design?

13:05 - What’s your story?

15:28 - Do you wear yeezys?

36:26 - What made you decide to take this story and make a bit site out of it? What was the plan?

40:45 - How did you learn to code? How did you decide what to learn next?

45:30 - How do you push through hard problems?

48:50 - Any final advice to offer?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 24, 2019
Hasty Treat - Web Dev Resource Sick Picks
21:35

In this Hasty Treat, Scott and Wes talk about all of their favorite web dev resources — a full episode of sick picks!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.

Show Notes

2:03 - Twitter Accounts

5:00 - Web Dev Resources

7:37 - Design Resources

11:36 - Desktop Tools

14:59 - YouTube

Links

Tweet us your tasty treats!

Jul 22, 2019
The Fundamentals — JS
44:13

In this episode of Syntax, Scott and Wes talk about the fundamentals of JavaScript - the set of core skills you should know before branching off into other frameworks, libraries, etc.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.

FreshBooks - Sponsor

Get a 30 day free trial of FreshBooks at FreshBooks and put SYNTAX in the “How did you hear about us?” section.

Show Notes

3:07 - Variables + Scoping

  • var/let/const
  • Block scope
  • Function scope
  • Scope lookup

6:06 - Types

  • Objects
    • Reference vs. copy

7:15 - Functions

  • Types of functions
    • Anonymous vs. named
    • Expressions
    • Arrow functions
  • Methods

9:33 - DOM

  • Selecting
  • Updating
  • Creating

15:07 - Prototypes + this

  • this
  • Objects

20:16 - Events

  • Listening, callbacks
  • dispatchEvent
  • Bubbling

22:05 - Arrays

  • Push, pop, manipulate
  • Spread, rest
  • Map, filter, reduce
  • Arrays vs. objects
  • Mutation vs. immutable

26:25 - Flow control

  • Looping
  • If
  • Promises + Async + Await

29:47 - Security and accessibility

  • XSS and innerHTML

32:04 - Things you should know, but not necessarily master

  • Modules
  • Closures
  • Ajax requests

35:26 - Clean code

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 17, 2019
Hasty Treat - VSCode Extensions & Themes
19:30

In this Hasty Treat, Scott and Wes talk about everything they love regarding VSCode: themes, fonts, extensions, techniques and more!

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up Netlify for more info.

Show Notes

3:18 - Theme

4:58 - Fonts

7:12 - Five things we love

Tweet us your tasty treats!

Jul 15, 2019
GraphQL and WordPress
01:04:07

In this episode of Syntax, Scott and Wes talk with Jason Bahl (author of WPGraphQL) about GraphQL, headless WordPress, frameworks in WordPress, React in WordPress, and more!

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.

Show Notes

4:55 - Data in WordPress

6:26 - WPGraphQL

10:31 - What were your initial thoughts/first experiences with GraphQL?

16:58 - Does it use MySQL queries or wpQuery?

19:36 - How does authentication work?

24:38 - What does the WP local dev experience look like in 2019?

26:49 - What about deployment? How do you handle migrating data?

30:10 - How does WPGraphQL handle mutations?

32:46 - What are the preferred hosting methods for a headless WordPress setup?

36:44 - Do you see any push back about giving up much of what WordPress gives you out of the box?

41:23 - What are techniques for preventing all of WordPress from loading When you’re using it exclusively for the API?

43:40 - How does WPGraphQL support custom post types, taxonomies and fields, etc?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 10, 2019
Hasty Treat - Front End Security
20:06

In this Hasty Treat, Scott and Wes talk about front end security and what to do in order to avoid hacking.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Show Notes

2:53 - SSL

  • Encrypted transfer of information
  • Digitally binds a cryptographic key to an organization’s details
  • Web-cam, geolocation, etc.

6:15 - innerHTML

  • React’s dangerouslySetInnerHTML
    • Name intentionally chosen to be frightening
    • Allows you to write HTML to the DOM
    • Data should be sanitized before used in prop
      • Removes unexpected data from string
      • Used to prevent cross site scripting attacks

10:25 - Don’t trust the client

  • The client can be manipulated to send any info to your server
  • E-commerce example — don’t take the price total from the front end to make the charge, DB call and calculate on the server
  • Validate form inputs via HTML 5 field validation/check data types on the server
    • Don’t allow your users to send an object when it should just be a string
    • Get this for free with GraphQL via types

13:41 - PCI Compliance

  • Protect card holder data
    • SSL or Secure iFrame
  • Encrypt transmission of card data
  • Restrict access to card holder data
  • Restrict physical access
    • Front of front-end

16:44 - Tips

  • Don’t put a name on sensitive fields if you are using JS
  • HTTP only cookies
  • Local Storage tokens
  • XSS

Links

Tweet us your tasty treats!

Jul 08, 2019
The Fundamentals: HTML + CSS
55:55

In this episode of Syntax, Scott and Wes talk about the “fundamentals” of web development and what you need to know - HTML, CSS foundations and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at Freshbooks and put SYNTAX in the “How did you hear about us?” section.

Show Notes

1:54 - Learning fundamentals vs framework specialists

  • Learning vs getting a job
  • Abstractions work well until they don’t and you need to debug them

HTML

7:58 - Semantic markup

9:15 - Accessibility basics

9:57 - Attributes

CSS

16:13 - Specificity

22:42 - Selectors

24:52 - Layouts

27:53 - Box model

32:50 - Positioning

36:42 - Forms and inputs

40:45 - Block vs inline vs inline-block

43:09 - Sizing units

44:40 - Typography

47:53 - Media Queries

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 03, 2019
Hasty Treat - What is a Headless CMS?
17:19

In this Hasty Treat, Scott and Wes talk about headless CMSs - why to use them, how they work, pros and cons, examples and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Show Notes

2:11 - What is a headless CMS?

  • It’s a system or CMS that has no front-end (aka head)
  • Allows you to use front-end specific tech (static generators/front-end frameworks) instead of the back-end to generate pages

4:37 - Some examples

  • Can be used with any type of website that can consume an API
  • WordPress API + Gatsby
  • Hosted Service + React App

7:06 - Why?

  • Separation of concerns - your data is in a single spot, and can be pulled into any app, website, marketing micro site, etc.
  • Keeps ergonomics of WordPress or $CMSHERE, while developers get to use what they like
  • Optimizes for performance with static builds
  • Hide the implementation details and back-end from view

10:19 - Live vs statically-generated website

10:55 - How?

  • Connects to API via normal fetch calls/GraphQL/whatever you use
  • Needs to host your back-end either as a service or on a host
  • Needs to host your front-end either on the same server as your back-end or on something specialized like Netlify

Links

Tweet us your tasty treats!

Jul 01, 2019
Potluck - Career Switch at 33 × Cover Letters × Kids × Learning Quickly × More!
58:23

It’s another potluck! In this episode, Scott and Wes answer your questions about career changes, preprocessors, moving, “the gap”, hip hop and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on Sanity.

Show Notes

1:54 - Q: I am 33 with a wife and two young daughters, and am trying to change careers. My job pays $80,000 a year, but I hate it. My wife is ok with me doing university, but she wants me to stay at the job I don’t like. Should I stand my ground? Any tips on achieving my goals to make me happy, but also keep my family happy?

10:10 - Q: What is your advice to very junior/junior devs in writing cover letters for jobs? I wonder what to say without sounding canned and fake.

14:35 - Q: Scott, what was the stack you were using at Ford?

17:09 - Q: Other than reading the docs, how do you guys go about learning/trying out new technologies? Do you rebuild similar applications or pick out individual features you think are “sIcK”?

22:32 - Q: Is it always necessary to use setState in react when storing data (for example, a form input) even if you don’t intend on re-rendering the page, or can you get away without using state?

25:04 - Q: Development has a stereotype for being a young person’s game. As someone who started their career out of university, I often wonder how long I can sling divs for? Do you think you could make it to retirement age or do you think the game will change out from under you?

30:34 - Q: Scott, you’ve mentioned you love hip hop. Would you be willing to share any playlists of your all-time favorite hip hop artists?

32:08 - Q: What are your thoughts on HTML pre-processors? If you use one, which one(s) do you prefer and why?

36:04 - Q: What advice would you have for someone considering to “level up” their career by moving from a city with few tech jobs to a city with more opportunity for tech jobs? What are some of the biggest things to consider when moving possibly cross-country to further a career?

42:11 - Q: What are your recommendations in terms of resources for first time dads (and moms) like books, podcasts, etc. and generally good co-parenting advice for working professionals?

46:45 - Q: Loved the show with Travis. Had a question about “the gap”. Similar to design ambitions/taste surpassing current skill, when did you feel like your code had “grown up” and that you could actually DO what you envisioned with Javascript?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jun 26, 2019
Hasty Treat - Making Yourself Uncomfortable To Grow
25:35

In this Hasty Treat, Scott and Wes talk about pushing yourself in uncomfortable areas to grow as a programmer, be a better developer, and become more efficient in general.

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up Netlify for more info.

Show Notes

3:50 - CCS Preprocessor parable

6:09 - Efficiency

10:40 - When to learn new systems

13:03 - Common pain points

14:42 - Pushing yourself to foster growth

Tweet us your tasty treats!

Jun 24, 2019
SVGs with Sara Soueidan
01:01:00

In this episode of Syntax, Wes is joined by Sara Soueidan, a freelance front-end UI developer and trainer. While Scott is taking a break to spend time with his new baby girl, Wes and Sara dive into all things SVG!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on Sanity.

Show Notes

6:05 - What are SVGs?

  • It’s an image you can edit

16:17 - Icon fonts

  • Better tools
  • Fails in certain areas
  • SVG sprite icons
  • Grunticon

24:24 - SVG files / Build tools

  • SVGO / SVGOMG

31:50 - Where to find SVGs

  • Noun project
  • Exporting from Sketch/Illustrator/Figma
  • Freepik
  • Iconmoon

33:48 - What is the viewbox?

40:39 - Animating SVG

43:41 - Accessibility & text with SVG

45:44 - Graphing with SVG

  • D3.js

47:58 - Filters

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jun 19, 2019
Hasty Treat - New Intl Methods Are Straight Fire
18:55

In this Hasty Treat, Scott and Wes talk about internationalization - how to deal with different languages, different currencies, and more!

Log Rocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

5:48 - Intl.NumberFormat

9:17 - Intl.ListFormat

12:17 - Intl.DateTimeFormat / Intl.RelativeTimeFormat

14:27 - Intl.PluralRules

Links

Tweet us your tasty treats!

Jun 17, 2019
Debugging Tools + Tips
48:45

In this episode of Syntax, Scott and Wes talk about debugging — tools, techniques, and the mindset needed to debug a problem and get through it as quickly as possible.

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntaxfor more info.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at Freshbooks.com and put SYNTAX in the “How did you hear about us?” section.

Show Notes

1:41 - Tools

21:49 - Network requests

  • Doesn’t take place in your site/dom, so might not always have all info in your console, debugger
  • Network tab in dev tools shows you all requests going in and out of your app
  • Filters by type, sees length in request
  • Sees headers, responses and more
  • Failed requests will be red

26:50 - Debugging mindset

  • Check different browsers
  • Check the docs/examples
  • Isolate when possible
  • “What has changed?”
  • Get minimal working code
  • Rubber Duck Debug
  • Step back and re-think

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jun 12, 2019
Hasty Treat - Std Lib in JavaScript
18:35

In this Hasty Treat, Scott and Wes discuss the Javascript standard library proposal — what it is, how it could influence dev, and what they’d like to see.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

1:38 - What is a Standard Lib?

  • Still experimental
  • Built-in modules don’t have to be downloaded because they ship with the browser
  • Not exposing built-in modules globally has a lot of advantages:
    • They won’t add any overhead to starting up a new JavaScript runtime context (e.g. a new tab, worker, or service worker)
    • They won’t consume any memory or CPU unless they’re actually imported
    • They don’t run the risk of naming collisions with other variables defined in your code

6:47 - Key Value Storage is the first one:

8:36 - What do we want to see?

  • Deep clone
    • Basically all of Lodash
  • util.isDeepScrictEqual
  • Async json.parse() / json.stringify
  • UUID
  • URL Lib for building and parsing URLs
  • Missing Array Methods
    • Most of underscore JS

15:53 - International

  • Currency Formatting
  • Lists
  • DateTimeFormat
  • RelativeTimeFormat

Links

Tweet us your tasty treats!

Jun 10, 2019
Gatsby Themes
57:07

In this episode of Syntax, Scott and Wes talk with Jason Lengstorf from the Gatsby team about Gatsby themes, and the future of Gatsby in general.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at Freshbook and put SYNTAX in the “How did you hear about us?” section.

Show Notes

2:18 - Jason Lengstorf - What do you do?

9:37 - Gatsby refresher

  • Gatsby is statically generated
  • gatsby-config.js file determines which plugins you use
  • gatsby-node.js allows us to hook into Gatsby at different points and do things like source content and dynamically create pages
  • gatsby-browser.js contains code that should hook into browser events

13:54 - Gatsby themes

  • Layouts in Gatsby are done the same way in React - simply create a component with children
  • How is this different than a plugin?
  • Is it a collection of plugins?
  • How do you share themes?
  • Can they include functionality (plugins?) Like Markdown rendering?
  • What about a theme that needs a UI once activated?
  • What about custom fields for Gatsby?
  • Do you foresee a marketplace like WordPress themes?
  • Are there some themes already out there?
  • What will come for themes soon?

34:07 - Questions about Gatsby

  • What do you think about WordPress?
  • E-commerce?
  • How do you make money?
  • Suggested way of doing dynamic things
  • What is the future of Gatsby?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jun 05, 2019
Hasty Treat - Workshops
23:36

In this Hasty Treat, Scott and Wes talk about how to give a killer workshop, as well as benefits and best practices!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Show Notes

3:00 - Types of workshops

  • Public
  • Private

4:29 - Choosing a topic

  • Create original content
  • Create custom content for companies

5:55 - Building content

  • Choose seven to eight different little things
    • ES6
    • Progressive web apps
  • Build a single application throughout the day, introducing a new feature or two at a time and then implementing it into your own application
    • Gatsby website
    • React Beer application
    • React Notes Application
  • Process:
    • Build the app
    • Rewind back to starter files
    • Build it again while writing notes
    • Follow your own notes to see if it makes sense

13:25 - General information

  • How long should it be?
  • Fixed price vs split cost
  • How many people?

16:46 - Other Tips:

  • Break away from your app and show other apps using - gives better context
  • Stop often and ask if anyone needs help
  • Give large breaks
  • Give challenges for those who need more to do

Tweet us your tasty treats!

Jun 03, 2019
Potluck - CSS × Angular × Dev job preparation × Svelte × File organization × Gear × More!
49:27

It’s another Potluck! In this episode, Scott and Wes answer your questions about CSS, Angular, Svelte, dev job preparation and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at Sanity. Get an awesome supercharged free developer plan on Sanity.

Show Notes

3:23 - Q: How big is too big for state? I have an object of around 1000 items which will be used in a search box on the frontend of my site, but the list of items won’t be updated very often. What is the most efficient way to store these items and deliver them to the browser? Would you use state, a JSON object, a MongoDB document or some other way I haven’t thought of?

7:17 - Q: How much do I need to know before I start applying for dev jobs?

9:26 - Q: Do you folks have any opinions on Skeleton loaders, and any thoughts on how best to implement them? At my day job we’ve recently implemented skeleton loaders in a way that inherits the parent styles. Would love to know if there’s any best practices for this or ways we can improve our setup.

13:01 - Q: Do you think we still need to use CSS resets like normalize and sanitizer?

14:56 - Q: Scott, can you tell the story of how you landed an interview for a job in Japan? I am moving to Japan next year and wondering how that opportunity arose for you.

20:04 - Q: Do you guys have an opinion on angular good or bad? Or is it that you’re more comfortable and have used React and Vue more often, so they’re largely at the center of any framework discussions?

22:54 - Q: Could you talk about naming and structuring files/folders in your applications? How do you name components and folders? Do you follow some sort of path of how to structure files in a web app?

29:01 - Q: Do you think that Node is almost too powerful to handle some of the simpler tasks (a site that just needs a contact form for instance), or am I just missing some very simple configuration? It seems like other languages, such as PHP, might be better suited for some of these simple tasks and Node is really just meant for larger scale application? I guess what my question really boils down to is, for a freelancer, I understand that I need to have my hands in a lot of different tech stacks, but should I really dive in on PHP (or something else) to handle some of these simpler features a client might need?

33:24 - Q: What do you guys think about Svelte? Before everything goes WASM will Svelte be the future of web programming?

37:24 - Q: What smart phones and laptops do you use for work? (specific model and why)

42:38 - Q: Should I apply for other jobs even if my contract might get renewed? Should I feel loyal to a company?

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

May 29, 2019
Hasty Treat - Knowing Your Weaknesses
22:46

In this Hasty Treat, Scott and Wes talk about how to identify and work on your weaknesses.

Logrocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.

Show Notes

2:45 - Why care about weaknesses?

  • If we avoid the things we’re afraid of or bad at we’ll always grow in lopsided ways

7:32 - As a developer

  • What skills / languages are you not good at or afraid of?

14:06 - As an employee

  • Communication
  • Company and personal goals
  • Efficiency
  • Compatibility

16:54 - As a human

  • How you treat people
  • Sharing your time
  • What you’re neglecting
  • Your living space

Tweet us your tasty treats!

May 27, 2019
CSS the 😎😎😎 Cool Parts
58:20

In this episode Wes and Scott talk about the cool parts of CSS! From filters to variables, here are some cool (and amazing) things you can do with CSS in 2019.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Show Notes

2:28 - Clip path

6:35 - Filters

16:24 - Background mix blend mode

21:47 - Border images

25:46 - Multiple background images

27:47 - Multiple background gradients

28:25 - Radial gradients

29:06 - Multiple box-shadows

34:30 - HEX + Alpha

40:41 - Viewport units

42:17 - Calc

44:32 - CSS variables

47:44 - Text decoration

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

May 22, 2019
Hasty Treat - AMA - Our Wives, Careers Outside Tech, and Favorites
29:50

In this Hasty Treat, Scott and Wes are back with another AMA. This time they talk about their spouses, careers outside of tech, lots of favorites (movies, colors, clothes), and more!

Clubhouse - Sponsor

Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntaxpodcast and get your first two months free.

Show Notes

2:58 - What do your wives do?

6:40 - If you had to choose a different career, what would you do?

If you started learning another (programming) language today, what would it be?

11:50 - Favorites (e.g. colors, movies, brands, etc.)

18:08 - Who inspires you?

26:19 - What’s your ratio of client work, learning new tech, and teaching via your courses, talks or Syntax.fm? You guys seem awfully busy, and it’s making me feel kinda lazy.

Links

Tweet us your tasty treats!

May 20, 2019
Side Hustles with Courtland Allen from Indie Hackers
57:23

In this episode of Syntax, Scott and Wes talk all about side hustles with special guest Courtland Allen, from Indie Hackers! They talk about the story behind Indie Hackers, how to start your own side hustle, where to find ideas, listener questions, and more.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at Freshbooks and put SYNTAX in the “How did you hear about us?” section.

Show Notes

1:05 - What’s the back story behind Indie Hackers?

5:30 - What is a side hustle?

11:21 - How do you validate your idea?

13:15 - What are some different types of side hustles?

31:55 - What about people who don’t like marketing?

33:57 - What are some important pieces of side hustles?

39:04 - How do you sell a business?

42:40 - Listener Questions:

  • Q: How do you stop the side hustle from affecting your main job in regards to things like overtime, sleep and commitment?
  • Q: Should you frame yourself as a one-man-band or as a company?
  • Q: Have you heard stories of people living in cheap places, making bank? Are there any white whales you have been chasing to interview?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

May 15, 2019
Hasty Treat - The SHADOW DOM
14:07

In this Hasty Treat, Scott and Wes talk about Shadow Doms - what they are, the individual pieces involved with them, why they’re important, and how to get started using them.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.

Show Notes

2:41

  • What is the shadow DOM?

4:25

  • What elements are shadow DOM?

5:47

  • Styling shadow DOM elements

8:54

  • Creating your own

9:22

  • Frameworks

Links

Tweet us your tasty treats!

May 13, 2019
Travis Neilson on Skills Gap, Design, Focus and Working at Google
55:56

In this episode of Syntax, Scott and Wes talk to Travis Neilson about his career at Google, the challenges he faced, how to choose projects tips for devs wanting to get better at design, and more.

Stackbit - Sponsor

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax.

Show Notes

2:43 - Career path

  • On ambitions and where it all started

23:15 - Being all in

  • On how to choose your next project

33:31 - Working at Google

  • On the day-to-day at Google, the challenges of a big team, and constraints

43:23 - Design tips for developers

  • Advice for devs who want to get better at design but are struggling
  • Thoughts on CSS frameworks
  • The one thing devs often get wrong about design

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

May 08, 2019
Hasty Treat - Async + Await Error Handling Strategies
12:25

In this Hasty Treat, Scott and Wes discuss different error handling strategies.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:07 - Try / Catch

  • This can be done at call time or inside the function

4:10 - Higher Order Function

  • Makes a function that returns a new function which in turn calls your original function (but with a .catch chained on)

7:46 - Handle the error when you call it

  • Use async/await but chain a .catch onto the end

9:03 - Node.js Unhandled Rejection Event

  • process.on('unhandledRejectionEvent', callback)

9:40 - What do do with those errors

  • Send to error tracking service
  • Possible to give the user a reference number
  • Display good error text to user

Tweet us your tasty treats!

May 06, 2019
Potluck - Media Queries × NPM Vulnerabilities × Fullstack JS vs JAMstack × Web VR/AR × Switching Jobs × More!
50:54

It’s another potluck episode in which Wes and Scott answer your questions! This month - Media Queries, NPM Vulnerabilities, Web VR and AR, Fullstack JS vs JAMstack for freelancers, switching jobs, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

2:46

  • Q: I recently started a static site so I want as much of the site as possible to change layout with just CSS for responsive design. I am comfortable with media queries but find often times the design is very different between sizes. It is easy to tame the complexity of repeated data for the different component views keeping everything in sync but is it good practice to put two completely different component level views in a single HTML file? Does the repeated data in the static HTML have any effect on SEO?

7:08

  • Q: How should a mid developer know when its time to leave the current company? Is tech stack (e.g frameworkless) a decent reason even though he/she is happy at the place, but feels like they are not growing enough?

11:19

  • Q: Should I worry about the critical vulnerabilities when installing an NPM package?

15:06

  • Q: I’ve had the idea for styling one site two different ways (professional/artistic) and giving visitors a button to toggle between the two. Too gimmicky? Secondary: how did you pick your brand colors?

20:19

  • Q: Any SICK TIPS on career change? I’m a full-time employee with two kids and a lovely wife, who wants a fulfilling career. I throw as much time in as I can to study, but I feel like it isn’t enough to apply for jobs.

20:49

  • Q: Within the next two years, how well do you think WebVR and WebXR technologies would fit within mainstream web development (think A-Frame, SparkAR, React 360 in normal websites and applications)?

30:39

  • Q: Should I learn Fullstack JS or JAMstack for freelancing?

35:34

  • Q: Is front-end development dying?

37:30

  • Q: How do you deal with CSS-in-JS when you have one-off stuff, or coupled components/selectors like a [CSS] grid container and a grid child (think grid-area)? CSS-in-JS feels very verbose for this use case.

42:07

  • Q: Scott always talks about Meteor. I thinks its really cool too. What’s the future of it and why didn’t it take off? It seems to have slowed down. They seem to have moved on to other projects like GraphQL stuff.

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

May 01, 2019
Hasty Treat - AMA - Money x Investments x Online Presence x More!
23:12

In this special Hasty Treat, Scott and Wes answer your questions about money, investments, online presence and more!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at https://logrocket.com/syntax.

Show Notes

2:33 - Besides coding/teaching, do you have any another source of income (stocks, bonds, crypto, etc.)?

9:03 - How do I build my online presence?

13:05 - What’s your favorite tasty treat (as in actual food)?

16:33 - Wes, lets talk about the + symbol that you use to start the prompt for Cobalt2 — whats up with that?

18:41 - How do you get out of a rut?

Links

Tweet us your tasty treats!

Apr 29, 2019
What’s New in Web Development
49:28

In this episode of Syntax, Scott and Wes talk about what’s new in web development: new promise static methods, new CSS functions, PWAs and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Clubhouse - Sponsor

Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntaxpodcast and get your first two months free.

Show Notes

5:38 - New Promise static methods

  • Promise.all
  • Promise.race()
  • Promise.allSettled()
  • Promise.any()

10:16 - Lazy loading images

14:25 CSS Houdini aka JS in CSS

20:32 - Subgrid

24:31 - Native modules in browser

  • type="module"
  • dynamic import()

27:08 - Node Native Modules update

29:17 - PWA install app and Google PlayStore

  • Already shipped in Chrome
  • Java API that communicates through services with Chrome
  • Trusted Web Activity aka TWA
  • All content in TWAs must comply with Play store policy including policies for payments in-app purchases and other digital goods
  • Already existing TWAs include Twitter Lite, Google Maps Go, Instagram Lite
  • Passing the PWA Criteria
  • Performance Score with a minimum of 80/100, tested with Lighthouse
  • All current Google Play Store rules

35:49 - CSS Scroll Snap

  • In many browsers already
  • scroll-padding

38:17 - Aspect Ratio Unit

39:32 - CSS nesting

  • Disallows cross-domain cookies unless on the same domain/subdomain

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Apr 24, 2019
Hasty Treat - CSS Frameworks
27:27

In this Hasty Treat, Scott and Wes talk about CSS frameworks - what they are, why they’re important, and when (and when not) to use them.

Stackbit - Sponsor

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.

Show Notes

2:52 - What is a CSS framework?

  • Pre-written CSS that takes over the basic styling of your app
  • Can include just utilities or lots of styles (minimal to overboard)
  • Twitter Bootstrap and Zurb Foundation were the pioneers
  • Follow different CSS styles from “functional CSS” to utility-first to BEM

7:33 - Functional (aka Utility) based

  • Tachyons
  • Tailwind

9:59 - Preprocessor based

  • Bootstrap

11:33 - Styled Components based

  • Rebass
  • Styled Systems
  • Facepaint

15:50 - Why use one?

  • Makes styling FAST
  • Makes hard things easy
  • Some, like Bootstrap, have themes
  • Keeps your own CSS minimal and organized
  • Built on an established system
  • Lots of people use the same CSS

19:22 - Why not use one?

  • CSS class hell
  • Stops you from learning how CSS works
  • Size (not all have this problem)
  • Brotli, Purify CSS
  • You will be overriding a ton of it
  • You like exclusively writing the code you need and nothing else

Links

Tweet us your tasty treats!

Apr 22, 2019
9 Ways to Stay Sane While Working Remotely
51:14

In this episode of Syntax, Scott and Wes talk about working remotely — problems, challenges, and how to keep yourself sane, productive and efficient.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at https://logrocket.com/syntax.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

4:34 - Find your spots

  • Coffee shops
  • Cafes
  • Library

7:40 - Deal with Distractions

  • Log out of Twitter/Facebook/Instagram
  • Delete Apps — only use the browser
  • Put phone and computer on “do not disturb”
  • Focus App

11:33 - Prioritize your tasks

  • Drifting is possible when it isn’t clear what you need to do
  • If you don’t have someone telling you what to do, it can be hard to get started
  • Todo lists

17:15 - Make time to be social

  • Go to meet ups
  • Chat in Slack or Discord rooms
  • Talk to people at work spaces

21:48 - Get fresh air

  • Go for a walk
  • Open the windows

24:03 - Get moving

  • Hit the gym
  • Do push-ups in your office

28:09 - Have a separate work space

  • Designated office
  • Don’t work from the couch with the TV on
  • Clean your damn office 😂

38:16 - Act like you are going to work

  • Dress well
  • Fix up, look sharp - get yourself ready to go

40:44 - Take Breaks (not too many, not too long)

  • Some people like the Pomodoro Technique
  • Take a lunch break away from your computer
  • Don’t make a break longer than 15 minutes or so

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Apr 17, 2019
Hasty Treat - Cranky Developers
24:27

In this Hasty Treat, Scott and Wes talk about cranky developers — those devs who never seem happy about anything, always mad about tech choices, and constantly writing off any new tech as simply a “fad” or unnecessary.

Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:20 - How to deal with cranky devs

  • Many experienced developers prefer older, stable technology for a reason. They have been through it before.

7:14 - Questions to ask when considering new tech:

  • Is it better for the product?
  • Is it better for the users?
  • Is it better for the business?
  • Is it better for the developer?

16:39 - How to convince them:

  • Proof of concept - show them it’s better.

18:28 - Things to acknowledge:

  • There are risks in changing technologies.
  • There are costs - training, tooling, hosting.

21:20 - Some people are not interested in improving themselves

  • They got the job they want and are short sighted about the future.
  • You can appeal to management about making progressive choices.
  • If management isn’t interested, you should look for a new job.

Links

Tweet us your tasty treats!

Apr 15, 2019
Syntax Live React Edition
01:06:06

It’s another live episode of Syntax in which Wes and Scott do Hook’d on Hooks, Who’s Snackin’ on React, Stump’d, Unpopular Opinions, Q & Eh, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

The Armoury - Sponsor

The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com.

Show Notes

6:54 - Who’s Snackin’ On React

Guess which of these websites have their homepage partially or fully built in React?

10:55 - Hook’d on Hooks

  • Wes:

    • useSocket
    • useStaticQuery (gatsby)
    • useKeyPress
  • Scott

    • useLocalStorage
    • useClickOutside
    • useMeasure
    • useGesture

17:47 - This, That, Both, or Neither?

  • Gutenborg: A WordPress GUI plugin for creating react-based gutenberg blocks, or a 90’s budget TV show about Cyborgs who read?
  • Nashorn: A Java based JavaScript engine developed by Oracle, or a popular rock climbing spot in Portland?
  • Easy Peasy: A React state library, or children’s spoon set?
  • Use Boxmen: A hooks library that gets box model dimension, or a puzzle-based strategy game for children?
  • Toggs: A lightweight styleable toggle component, or rain resistant outdoor gear?
  • Landwind: A set of React components for using the Tailwinds CSS Library, or a Chinese Knock-off Land Rover SUV?
  • Freeflow: A redux-like state management library built on state, context and hooks, or a California-based hot tub company?
  • Ubergrippen: A popular rock climbing spot in Denver, or a client-side video stabilization framework built on the filereader API?

26:22 - Tag Team Coding React

  • Fetch Data from the data jokes API
  • Show a loading indicator
  • Have a button to fetch a new joke

36:24 - Stump’d

  • What is a react PureComponent for?
  • Why might you use a callback with setState?
  • How would you reverse an array without mutating the original array?
  • Can you explain what a “downtown job” is?
  • When would you use useReducer?
  • What makes useLayoutEffect different from useEffect?
  • What propType would you use for an object that contains a number and a string

43:11 - Unpopular Opinions. Overrated, Underrated?

52:45 - Q + EH with Wes and Scott

  • What where the first apps you worked on?
  • What React problem stumped you for the longest time?
  • What’s your most expensive mistake?
  • Do we need classes in Javascript?
  • How do you explain what you do to your mom?
  • How do you explain React?
  • What made you start wanting to code?
  • What’s the hackiest thing you’ve ever done?
  • Where do you see yourselves in 10 years?

Tweet us your tasty treats!

Apr 10, 2019
Hasty Treat - Tips For A Good Portfolio
20:42

In this Hasty Treat, Scott and Wes talk about portfolios - best practices, organization, and how to use what people are looking for to stand out in the right ways.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

3:21 - Include screenshots (or don’t). Often clients can ruin a site after you hand it off.

6:19 - Include list of technologies used

7:25 - Include list of problems solved

7:48 - Use company logos (if allowed)

9:13 - Show mockups on modern laptops/phones

10:04 - Show your work (mockups, sketches, layouts, etc.)

11:39 - Keep it updated

12:10 - You don’t need a million examples — max out somewhere around five. People just need a few quick examples of the type of stuff you work on.

14:11 - What about using side projects and tutorials?

16:28 - Dribbble, Github and Instagram are all valid portfolio options as well — often that is the first place people look. Don’t ignore these.

  • A hot stuff profile on any of these will make you more hireable. Make sure it’s creative and looks nice.

Links

Tweet us your tasty treats!

Apr 08, 2019
Potluck - Interview Qs × Headless CMS × React Hooks × Resume Design × Redux vs Context × More!
49:47

It’s another potluck episode in which Wes and Scott answer your questions! This month - interview questions, headless CMSs, resume design, redux vs context, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

2:21

  • Q: Are there any tutorials you would recommend to learn more computer science related knowledge (algorithms, closures, etc.)?

5:12

  • Q: Do you have any suggestions for picking a headless CMS?

8:55

  • Q: Do you have any advice for someone in a customer service background seeking a more flexible job with remote work opportunities? Resources? Is this a realistic goal or a good way to approach my job search?

15:13

  • Q: How much importance would you place in the design of a resume? Is it worth the cost?

21:09

  • Q: With the new React Hooks and Context API, do we still need Redux?

25:37

  • Q: If either of you could change anything about your personal tech stack, what would it be and why?

29:07

  • Q: Do you prefer to use React’s defaultProps or plain JS default function parameters to give your component’s props some default values?

30:44

  • Q: You guys chat CMS sometimes - why no love for Umbraco?

35:53

  • Q: I’m ready for a new challenge, how do I break this to my employer?

38:16

  • Q: What’s the difference between const add = (a, b) => { return a + b } and function add (a, b) { return a + b }?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Apr 03, 2019
Hasty Treat - Bike Shedding
30:37

In this Hasty Treat, Scott and Wes talk about bike shedding - issues that are hotly debated, but may not matter that much in the long run.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at https://logrocket.com/syntax.

Show Notes

3:03 - What is Bike Shedding?

  • Technical disputes over minor, marginal issues conducted while more serious ones are being overlooked. The implied image is of people arguing over what color to paint the bike shed while the house is not finished.

4:39 - Tabs vs spaces

  • Two spaces

5:50 - Single vs double quotes

  • Single in JS, double in HTML

7:05 - Semicolons or not

  • Semicolons

9:01 - Grouping/ordering CSS properties

  • Wes: Format
  • Scott: Alphabetical

12:35 - var vs let vs const

  • Scott: const for life — let when needed
  • Wes: const by default — change to let when needed

14:24 - Default vs named exports

  • Use both
  • Mix-n-match

15:58 - Should designers code?

  • If interested, sure

17:58 - Which front-end framework

  • Whichever one best suits your needs

19:30 - Vim/Emacs vs Atom/VS Code/Sublime

  • VS Code

21:53 - Small perf wins

  • Micro optimization often aren’t needed

25:14 - Browser support

  • If you’re required to support it, then support it

25:47 - Block formatting

  • Function block
  • Else on a new line vs else after block

29:07 - Trailing comma

Links

Tweet us your tasty treats!

Apr 01, 2019
The VueJS Show (Scott teaches Wes)
56:55

In this episode Wes and Scott talk about VueJS - what it is, how it compares to other frontend frameworks, and how to get the most out of it.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Clubhouse - Sponsor

Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntax and get your first two months free.

Show Notes

2:22 - What’s the deal with VueJS?

  • Combines ideas from Angular 1, React and Blaze
  • Ease of Angular 1
  • App structure of React

8:02 - Components

  • Template syntax is similar to handlebars

    • aka {{stuff}}
  • v-bind:property

    • v-bind:property or simply :bind allows you to dynamically bind a value to a property
  • Props

    • Props must be declared before they can be used in a template.
  • Script tag

    • Where imports happen
    • Where props are defined, computed properties, action events and lifecycle
  • Actions

    • v-on:click="doSomething"
    • @click="doSomething"
    • These will run a doSomething event defined in your script export via methods
  • Lifecycle

    • How does data fetching work?
  • CSS

    • Can be scoped to file by adding