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: 603
Reviews: 3


 Oct 24, 2018

james
 Sep 20, 2018
funny and informative for web devs

A Podcast Republic user
 Sep 5, 2018

Description

Wes Bos and Scott Tolinski are two full stack web developers who like to break down complex topics and make them easy to understand.

Episode Date
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