Syntax - Tasty Web Development Treats - TopPodcast.com

View Top 200 Chart

Back to Rankings Page

Syntax – Tasty Web Development Treats — News
Syntax – Tasty Web Development Treats

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.

Latest Episodes:

The State of JavaScript 2018 Dec 05, 2018

Show notes

In this episode Wes and Scott are joined by their first ever guest on the show: Sacha Greif. Sacha is one of the makers of the State of Javascript - the topic for today’s show. Wes, Scott and Sacha discuss the results of 2018’s survey, what they think, and implications for the industry.

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

1:48

What is the State of JS survey

3:58

The tech behind State of JS

12:55

How was the data collected?

16:38

JavaScript Flavors

23:14

Frameworks

31:49

DataLayer

34:53

Backend

40:09

Other Tools

44:37

Opinions

47:48

Awards

49:58

Criticism

Links

Nivo
Gatsby
Netlify
Reason
Parcel
Relay
Express
KeystoneJS
Ghost
Jest
GraphQL
VueX
Storybook
Real Analysis of Angular, React, and Vue

××× SIIIIICK ××× PIIIICKS ×××

Sacha: DIY and woodworking
Wes: Alex French Guy Cooking
Scott: Silverback Open 2018

Shameless Plugs

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Hasty Treat - Uses for CSS Variables Dec 03, 2018

Show notes

In this Hasty Treat, Scott and Wes talk about CSS variables, a.k.a CSS Custom Properties - why you might want to use them, why they’re better than various preprocessor’s variables, and pitfalls to watch out for and avoid.

Kyle Prinsloo’s Freelancing & Beyond — Sponsor

Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off.

Show Notes

3:25 - What

--example-name, represent custom properties
called using var()
Overwrite with a more specific style
Use JavaScript to append .style.setPropert(
How are they scoped?
- Just like normal CSS
- Can be set on :root {}
- Can be set on any element down

9:10 - Why

Uses:
- Can make more sense if used semantically
- var(–accent) vs var(–yellow)
Independent values for things that can’t be broken up:
- box-shadow: 2px 2px 2px 2px red
- transform: rotate(var(–rotate)) scale(2);
Inline properties can be picked up by regular CSS (color, size, etc.)
- hey
Themes that can easily be changed at runtime for entire app

19:15 - Calculations

You can use them inside of calc()
Animations

20:10 - Bummers

Not super well supported just yet (IE 11)
No good fallback other than manual fallback
Syntax - Old Browsers, Fallbacks and Polyfills series
- Part 1
- Part 2
- Part 3
PostCSS Custom Properties

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Holiday Gift Guide Nov 28, 2018

Show notes

In this episode Wes and Scott bring you their holiday gift guide - things, ideas or experiences that would make great gifts for any developer, ranging from a few bucks to a few hundred bucks.

Contentful - Sponsor

Contentful is a great way to manage your data. Update once and publish everywhere. Contentful gives you a ton of flexibility and reliability and everything you need to build excellent front-end content without having to worry about the back-end of your site. Check out contentful.com/syntaxfm and get a free pair of socks!

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:57 - Foodie Gifts

Hot Sauce
Everything but the bagel Spice
Loose leaf Teas from Teahaus.com
Wes’ Tea Steeper
Scott’s Tea Mug & Steeper
Flavored Salts (No link, just go find them)
Savory Spice Shop
Rainbeers - make it yourself
Beer Making Kit
Umai Dry Steak Aging and Charcuterie Bags

11:27 - Experiences

Knife Skills Class
Butchering Class
Cooking Class
Float tank Subscription
Massages

18:15 - Subscriptions

23:07 - Books / Audible

29:47 - Clothes

Uniqlo Jeans - w/ elastic
Carhart Beanie (TOQUE)
Naked and Famous Raw Selvedge Denim Jeans
- Skinny Guy
- Weird Guy
Nudie Raw Selvedge Denim “thin Finn”
“Unbranded” Raw Denim
Custom Leather Belt
TNF Fanorak Windbreaker
Hoodies
- Adidas Black-on-black NMD crewneck
- Champion Hoodie
Sneakers
- Nike Airmax 270
- Jordans DonTrip
RayBans with mirrors
- Original Wayfarer Sunglasses
Under Armour Boxer Jock Underwear
Reebok Boxer Brief Underwear
dvlpr.io Merch

39:08 - Gadgets

Mechanical Keyboards
10W qi Wireless Fast Charger Charging Pad
USB C Gadgets
Koomus Car CD Slot Magnet Mount for your phone
Anker Portable Battery
Extra Long Braided Phone Cables
- Lighting
- Micro USB
- USB-c
Anker USB Power Block
- 4 ports with Fast Charge
- 6 ports with Fast Charge
Wifi Hotspot
- SkyRoam Solis
Magnet Breakway USB-C Cable that handles 87w
Tello Programable drone
High end mini screwdrivers
- MaxCraft 7-in-1
- iFixIt 64 bit set

48:00 - Smart Home

54:40 - Grooming and Wellness

58:57 - High End

Shameless Plugs

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Hasty Treat - Should you install a dependency or roll your own? Nov 26, 2018

Show notes

In this Hasty Treat, Scott and Wes talk about installing dependencies vs rolling your own - the advantages and disadvantages, and how to know when to do either.

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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.

Show Notes

2:15 - Reasons To roll your own

Learning Experience
Fun
Features
Add your own features
Lightweight - only use what you need

8:08 - Reasons not to roll your own

Battle Tested
Actually Tested
Time
Money
Experience

11:27 - Fork

Something needs extra features
Upstream your changes

13:10 - Some Examples

Fetch + function vs Axios
Date functions vs Stack Overflow copy/paste
Lodash vs your own - try it with map/reduce/filter first, but lots of cases need Lodash

Links

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Potluck - $100/hr × Redux Replacements × Full Stack Designers × JWT × VS Code Tips × More Nov 21, 2018

Show notes

It’s another potluck episode in which Wes and Scott answer your questions! This month - raising your rates, full stack designers, JWT, VS Code tips, and more.

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.

React in Action - Sponsor

React in Action by Mark Thomas from Manning Publications is a great way to learn React. It’s a clearly written, example-rich book, introducing front-end developers to the React framework and related tools. Not everyone likes learning from a video. If that’s you, React In Action is a great book that covers everything you need to know. Also be sure to check out this page for 40% off all manning books and videos.

Show Notes

2:29

I listened to your episode on Freelancing and I was wondering how to justify an increase in my hourly rate. You mentioned that you just increased it to $100/hr and nobody griped, but I seem to have a steady stream of clients who want things for free or nearly free and I usually have that fear that if I charge them more, then I won’t get the business. Thoughts?

6:55

I’ve started a YouTube web development channel. Recently, I was approached to produce content for money for another website. For some reason, I immediately thought I might be taken advantage of (I’m pretty new and it’s odd to be offered something like this so quickly, no?) if accepting. What do you think? Should I create content for a (small) website that I never heard of or continue with YouTube (or both)?

14:00

I’ve read on Twitter that React.Context can be a good replacement for Redux. Why?

18:40

What’s it like running a podcast?!

24:03

I’ve seen a rise in the term “full-stack designer”. Is this a title you think will become a real thing? Someone capable of overseeing a project from concept to prototype? Thanks!

27:36

What has been the most awkward situation you’ve been in as a dev?

31:20

Do you have any good resources on JWT? I’m unclear when my front end needs to send what to my back end, to ensure my sites and only my sites can get the data requested from my server. Thanks for everything you do!

35:34

How do you move selected text horizontally (or vertically) in VSCode? I’ve seen it in Wes’ videos and I tried to ask him on Twitter, but I’m sure that is a chore to keep up with. I’ve googled a ton, but the only thing I found was an extension that adjusts indentation, which is not really what I’m after.

38:57

How do you recommend providing feedback on “bad” code to a developer more experienced than you, without coming off as an uppity, know-it-all junior who just read a bunch of textbooks??

42:39

How do you set up an IP whitelist? I am just getting started managing databases and I am using Mongo Atlas. They require an IP whitelist for all connections. Developing from my computer is fine because I can just add my IP to the whitelist, but what do I do if I actually want to make my API or website public? Just whitelist everything? That sounds like a terrible idea…

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Scott’s Pro Gatsby 2 Course
Wes’ Advanced React Course - use the code SYNTAX for $10 off

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Hasty Treat - How to become well liked at work Nov 19, 2018

Show notes

In this Hasty Treat, Scott and Wes talk about how to be well liked at work - dealing with difficult co-workers, being a better co-worker yourself, and general tips for improving your people skills.

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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.

Show Notes

5:01 - Foster a culture of asking “why” and “how”

7:58 - Show your own mistakes

9:26 - Be understanding of people’s life situations and accommodate them accordingly

11:36 - Be okay with people taking your time

13:10 - Don’t take up other people’s time

15:40 - Be nice

15:57 - Share things

16:50 - Respect personal space

18:08 - Respect people’s time

Links

Adam Grant - Give and Take: Why Helping Others Drives Our Success

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

React Hooks Nov 14, 2018

Show notes

In this episode Wes and Scott discuss React Hooks - what they are, why you might want to use them, their differences with regular classes, and more.

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.

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:30

Function components

4:50

What are React hooks?

8:12

What problem does this solve?

12:00

State hooks

21:50

Context hooks

26:02

Effect hooks

36:46

Reducer hooks

40:40

Ref Hooks

48:00

Libraries already using React hooks
- Rehooks → Listing of hook libraries
- React Spring
- React Measure
- Formik
- Immer

50:30

Resources

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Scott’s Pro Gatsby 2 Course
Wes’ Advanced React Course - use the code SYNTAX for $10 off

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Hasty Treat - How to become a sticker mogul Nov 12, 2018

Show notes

In this Hasty Treat, Scott and Wes talk about stickers and break down Wes’ entire process for creating and selling his sticker packs. Check out Bos.af for more info.

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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.

Show Notes

6:08

Design

9:23

Printing

16:08

Types of Stickers

19:34

Selling

21:43

Envelopes, stamps and shipping

30:47

Returns

32:42

The future

Links

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Live at JAMstack_conf Nov 07, 2018

Show notes

This week Scott and Wes are live at JAMstack_conf with games, Spicy JAM Tips, Q&As 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/syntaxfor more info.

Show Notes

7:14 - Spicy JAM Tips

Set default headers in your request library - this way it comes along for the ride on every request
Don’t get hung up on “static” - static sites can be as dynamic as needed
Don’t wait to use new tech - progressively enhance and gracefully degrade where needed
There are many JAMStack libraries in the sea - there are many different approaches so don’t be afraid to experiment
Side projects are key to learning - test out new tech on smaller projects first and get comfortable with it

10:10 - This, That or Both?

Evo RX - High end Carbon Fibre Road Bike or Library for composing asynchronous and event-based operations in JavaScript?
Jumpsuit - A rap/rock group from Flint Michigan or a minimal React/Redux Framework?
Aphrodite - React Styling Library or Best Selling Erotic novel?
Yugo - A minimal static site generator built in O-CAML or a super mini hatchback built in the former Yugoslavia?
C-Control - A modern state management library for web components or studio headphone mixer?
Yakbak - A recordable HTTP testing interface or a popular 90’s electronic toy?
Joose - A hip east coast juice bar or a metaobject system for JavaScript?
Easy Rooter - A client side object oriented router written in modern Vanilla JavaScript or a drain cleaning plumbing apparatus popular among local plumbers?
Aqueduct - A server-rendered ORM and oAuth 2.0 based framework built in Dart or a early 2000’s pop group hailing from Venice Beach?
Gort - A 1980’s animated series cartoon villain or a CLI Toolkit for RobotOps written in Go?
Raptorize - A jQuery plugin that plays a Velociraptor screech or A popular DIY spray on truck bed liner?

21:13 - Stumped!

Question 1: What does “age” console.log to and why?

let age = 26; age /= 2; console.log(age); // ??
Question 2: What are all seven types in JS?
Question 3: How do you pronounce “specificity”?
Question 4: What is event delegation and when might you want to use it?
Question 5: What is CSS @supports for?
Question 6: An arrow function takes in an unlimited number of arguments - how would you capture them?
Question 7: What is the difference between .slice() and .splice()?
Question 8: How would you calculate the number of milliseconds since midnight of January 1, 1970?
Question 9: What does “age” console.log to and why?

const age = console.log(100) || 200; console.log(age);

31:26 - Overrated or Underrated?

Arrow Functions
Downtown scooters
Using Sass inside Styled Components
Website that play sound in the interface
The amount of JS frameworks
Soft close toilet seats
GraphQL
ES6 Destructuring
Instapots
Implicit Return
CSS Houdini
Service Workers and Offline Applications
Modern Design Tools - Figma, FramerX, Moudlez, Sketch, Studio
Decorators
Optional Chaining Proposal

42:35 - Q+A with Scott and Wes

Since this is your first time meeting, what was the thing that surprised you the most?
If you could create any Tycoon game, what would you create?
In 2018, how concerned should we be about no-JS users?
How many spaces should a tab be?
How important is integration testing and the decentralized ecosystem?
What are your thoughts on the new React Hooks API?
Are we going to have a serverless function architecture apocalypse?
Are you ever going to create an online course together?
How will the future look for component-based design?
What’s your least favorite jam?
What would be your goto headless CMS?
What do you disagree on?

Shameless Plugs

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Hasty Treat - Stumped! 03 Nov 05, 2018

Show notes

In this Hasty Treat, Scott and Wes are back for another edition of Stumped! where they try to stump each other with interview questions. Today’s questions are from Flashcards for Developers.

EmailOctopus - Sponsor

Email marketing for less, via Amazon SES. EmailOctopus sends your emails through Amazon’s Simple Email Service (SES), saving money without sacrificing deliverability. With simple setup and all the features you would expect, EmailOctopus is as flexible as you need it to be. Get started today at emailoctopus.com/syntax and get your first three months free.

Show Notes

4:03

What’s the difference between synchronous and asynchronous code?

5:56

What’s the difference between .call and .apply?

7:08

How do you share code between files?

8:18

What’s the difference between double equals and triple equals?

10:40

What’s the difference between null, undefined, and undeclared?

14:18

What is the event loop?
Philip Roberts - What the heck is the event loop anyway?

16:02

Why is extending built-ins never a good idea?

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Related Podcasts