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 Apple Podcasts


Open RSS feed


Open Website


Rate for this podcast

Subscribers: 1467
Reviews: 4


 Feb 8, 2020
i listen to practically every episode, and gain tips all the time.


 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
ShopTalk x Syntax
01:04:50

In this episode of Syntax, Scott and Wes do a collaboration with Chis Coyier and Dave Rupert from ShopTalk Show! They talk about favorite tech stacks, podcasting, learning new tech, dealing with FOMO, and more!

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Cloudinary - Sponsor

Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

Show Notes

07:23 - What’s your favorite stack right now?

28:52 - What are your thoughts on WordPress? Do you still use it?

33:59 - What do you want for listeners of Syntax?

38:21 - How do you deal with FOMO / the pressure to learn new tech?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

  • Scott: All Courses - Sign up for the year and save 25%!
  • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

Jul 28, 2021
Hasty Treat - The Surprisingly Exciting World of Favicons
23:52

In this Hasty Treat, Scott and Wes talk about favicons. Favicons are a bit of mystery and something people don’t talk about that often.

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.com/syntax.

Show Notes

03:48 - What are favicons?

  • Requesting favicons by default /favicon.ico
                   

07:38 - Sizing favicons

  • 16x16 is OG - don’t do that now
  • You can specify multiple sizes

09:41 - File formats

  • .ico files
  • .png favicons

13:40 - Animated favicons

  • Canvas Base64

11:36 - SVG favicons

17:19 - Dark mode favicons

18:55 - App Coloring

  • Isn’t there a new Safari version?

Links

Tweet us your tasty treats!

Jul 26, 2021
Potluck - Svelte × Bleeding-Edge Tech × Git Process × Screencasts × Government Jobs × Permissions-Based APIs × Rescript × More!
59:51

It’s another Potluck! In this episode, Scott and Wes answer your questions about Svelte, bleeding-edge tech, best Git processes, Create React App, screencast software, FitBit API, government jobs, Syntax sponsors, and more!

.TECH Domains - Sponsor

.TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.

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.

Mux - Sponsor

Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.

Show Notes

03:15 - I was wondering what you guys think about using the latest of Svelte (svelte-next) in serious projects? Does the improved devEx makes up for the small (but growing) community and lack of libraries? Do you think svelte-next is here to stay or maybe we will get a revamp that breaks backward compatibility in a couple of years, like svelte 2 -> svelte 3?

8:48 - Git question: My process is often that I want to be able to use my last project as a starting point for my next project, with the new project having absolutely no connection or relationship to the old project. What steps can I take to completely sever any ties to the old project? Bonus question: In the new project I would love to eliminate all commits from the old project and start the new project having just one commit, the initial commit with all the code from the old project.

11:05 - Is CRA still useful for building actual production-level web apps these days? People seem to be reaching for Next or Gatsby most of the time, and I feel CRA is mainly used for actually learning React/building personal small websites. Your thoughts? Also, for normal CSR, I feel it is better to use something like Next, and fetch data inside your component (eg: for a dashboard) rather than building one with CRA. Am I wrong?

19:40 - What are your favorite screencast tools? (Linux? Mac? Windows?)

25:53 - Is it a bad trait for beginners to “give up” easily? By that, I mean instead of taking the time to think of the answer to a problem, they would instead rely on googling the solution and try to understand how it worked afterward.

27:55 - In pursuit of better health I want to track my weight daily using a smart digital scale. The idea is to automate the process of logging my own weight (e.g. stepping on the scale will update my Apple Health and any other integrations I have). After some searching around I landed on the Aria Air (mostly because I like the design and it has the coolest name). One small problem - it does not sync with Apple Health as it is a product from FitBit. They have an API so I’m thinking about running a serverless function daily, around 8 a.m. after I weigh in, to hit the FitBit API, get the data and push it to Apple Health. This way I can stay in the Apple eco-system whilst happily getting this nice, aesthetic digital scale. Any thoughts on how you would personally implement something like this? P.S. My girlfriend thinks I’m crazy, but I know the tinkerer inside Wes will love this.

30:26 - I work for the government with good pay and benefits and love where I work, but I feel like I’m missing out. Working in government we are not always working on the bleeding edge of technology. I do try and learn on my own, but it’s hard sometimes if I don’t put it into practice. I do peek at other job openings and get excited about the tech stack and the things they’re doing. I’m just afraid if I leave I won’t have the stability and benefits I would get from working in government. Any tips or thoughts would be appreciated.

34:24 - Unpopular opinion: Authentication isn’t that hard, but authorization is! What systems have you built to handle when users with specific permissions are allowed (or disallowed) to take actions within your system? What advice would you give to other developers developing permissions-based APIs, assuming their users can have 5-10 different levels of permissions?

40:21 - What are your thoughts on ReScript as an alternative to TypeScript?

44:43 - How come you guys moved to two sponsors on a Hasty and three on a Tasty? Not that it’s a big deal - was just curious of it was to keep up with costs or just because you could and then you’d make more? Either way, the show is awesome and really appreciate your opinions on everything!

48:01 - Have you tried Angular 12? I’d think you’d be pleasantly surprised if you gave it a chance!

52:20 - I have to copy and paste hundreds of products with six rows of details from a spreadsheet into a web interface because there is no API or CSV upload function for this program. Any recommendation on how to automate data entry into web inputs, navigate pages / click buttons, and toggle between applications? BTW, I scored my first web developer job and have to give you guys credit for steering me in the right direction.

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 21, 2021
Hasty Treat - Stylelint for Linting CSS
17:27

In this Hasty Treat, Scott and Wes talk about Stylelint, what it is and why you should use it!

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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Show Notes

03:15 - What is a linter anyway? Why do you want to lint your CSS?

  • Does stylelint fix errors or just tell you errors?

04:42 - Getting setup

  • .stylelintrc
  • stylelint extension
  • Sass
  • High perf animations
  • stylelint order
  • Max nesting depth
  • Declaration strict value
 {     "extends": [         "stylelint-config-standard",         "stylelint-config-sass-guidelines"     ],     "plugins": [         "stylelint-high-performance-animation",         "stylelint-declaration-strict-value",         "stylelint-order"     ],     "rules": {         "selector-no-qualifying-type": [             true,             {                 "ignore": [                     "attribute"                 ]             }         ],         "plugin/no-low-performance-animation-properties": [             true,             {                 "ignoreProperties": [                     "color",                     "background-color",                     "box-shadow"                 ]             }         ],         "indentation": "tab",         "order/order": [             "custom-properties",             "declarations"         ],         "order/properties-alphabetical-order": null,         "declaration-block-no-duplicate-custom-properties": true,         "declaration-empty-line-before": null,         "scale-unlimited/declaration-strict-value": [             [                 "/color$/",                 "z-index",                 "font-size"             ]         ],         "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]+$",         "max-nesting-depth": 3,         "selector-pseudo-class-no-unknown": null     } }  

Links

Tweet us your tasty treats!

Jul 19, 2021
React 18 - A Look Ahead
46:39

In this episode of Syntax, Scott and Wes talk about everything coming in React 18!

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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

RevenueCat - Sponsor

RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.

Show Notes

04:32 - Automatic Batching

  • Don’t worry about re-renders

08:32 - New Render API

 const root = ReactDOM.createRoot(document.getElementById('root')); root.render();  
  • No more hydrate method (yay!)

10:44 - Suspense

 }>                  
  • Suspense is basically a promise resolver component - nothing inside will render until promise is resolved.
  • SuspenseList lets you coordinate the order in which loading indicators show up.

16:43 - StrictEffects Mode

18:43 - useTransition() Hook

  • Not an animation hook. They named it this because of the future ability to add animations to React core.
  • Wrap the state update in a “transition” to prevent the ProfilePage from being unmounted while suspending. This lets React know that it should wait for the update to complete.
  • We classify state updates in two categories:
    • Urgent updates reflect direct interaction, like typing, hover, dragging, etc.
    • Transition updates transition the UI from one view to another.

23:11 - SSR Improvements

  • React.Lazy will work on the Server
  • Finally!
  • https://github.com/reactwg/react-18/discussions/37
  • Server-side rendering (abbreviated to “SSR” in this post) lets you generate HTML from React components on the server, and send that HTML to your users. SSR lets your users see the page’s content before your JavaScript bundle loads and runs.
  • React Server Components

34:45 - ELI5

36:37 - Next.js

  • Next.js will probably have support for a lot of these features soon.

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 14, 2021
Hasty Treat - Vite + Parcel 2
25:49

In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level.

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.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.com/syntax.

Show Notes

03:08 - Next Gen Bundlers are here!

  • They are easy
  • They are fast
  • They are bundlers
  • They are code splitters
  • They are dev environments
  • HMR / Fast Refresh

07:13 - What do they use under the hood?

  • Parcel uses SWC (Rust)
  • Vite uses esbuild (Go)

10:29 - How do you use them?

  1. Usually point your app at an HTML file
  2. Your HTML file has an ES module
  3. It then goes and loads everything from there
  4. They have adaptors for different types of files
    • CSS
    • Images
    • Etc.
  • You can also point it directly at files

14:59 - Common use-cases

  • React / JSX
    • OOTB
  • Vue
  • Svelte
  • TypeScript
    • Both just work
  • Custom Babel config
    • Plugins for both
  • Sass
    • Vite: Detects it, asks to install it
    • Parcel: Detects it, installs it for you
  • PostCSS Processors

20:29 - Custom API

  • Both have a custom API or “plugins”, which you can integrate into your app or tooling if needed.
  • Example use-case: a really nice WordPress dev package.

20:57 - Which one?

  • Both are really good!
  • Parcel 2 has been in dev for 2+ years - unsure when it will launch.
  • Wes: In my experience Vite “just works” a bit better. Might be a side effect of Parcel being in dev.
  • Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.)
  • Life is good!

Links

Tweet us your tasty treats!

Jul 12, 2021
Syntax Highlight — We Review Your Portfolios
01:02:18

In this episode of Syntax, Scott and Wes review your portfolios!

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.com/syntax.

Cloudinary - Sponsor

Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

Show Notes

03:59 - cudd.io

  • Shared component animation between home / about really nice
  • Readable, clear
  • Simple
  • Check the contrast ratio on the white text on light blue: https://coolors.co/contrast-checker/ffffff-56ccf2
  • Nice SSR from Next.js
  • CSS vars
  • Very tall cards without much text, looks like a mistake
  • Better on a short browser window - peep the tall and skinny
  • Card heading should be h3 or h4

10:35 - damonbolesta.com

  • Nice design = super fun!
  • Good color palette
  • Shows your skills straight up
  • Animation
  • Not accessible - EASY fixes with Axe Dev Tools
  • Text on background images hard to read
  • White text on buttons
  • Bold some words in your bio
  • Border radius

21:52 - walterkjenkins.com

  • Map is fun
  • Contrast issues with the color choices
  • Transparency not needed on body content
  • Cursive font for links / buttons is a no for me dog
  • Labels on social media icons
  • Hero overlaps section below it
  • Maps data processing should be h4

29:40 - suhit.me

  • This is an example of a really good one
  • Wicked domain name
  • Design is ON POINT, like this is the type of polish I like to see - I’d hire on this
  • Can’t get enough Inter font
  • Fun little animation
  • I’d go a little easier on the box-shadow
  • Github even has a custom readme
  • Resume
    • Very modern - JS, TS, Bootstrap
    • TypeScript A+
    • Drop the “5” and “3” from “HTML” and “CSS”
    • I’d add color to the resume, its likely not printed
    • Don’t need to say Github and LinkedIn in front of the URLs

37:20 - jacobpawlak.com

  • Initial loading is great - transitions are hot
  • Typography looks nice - not sure about those serif all-cap nav items
  • Slider not very usable
  • View circle on hover is cool, but I’m not sure about following your mouse, covers text
  • T-shirt portfolio is awesome
  • Fun little bits in the footer
  • SSL is broken - fix that sh!t
  • Links don’t show over background images - common issue today
  • External links should probably be indicated as such
  • HTML, paragraphs as h3 & h4, h5, should be

    - (i.e. “here are a few of my recently completed…” should be a

    )

  • Design of resume is KEY - different colors, eh?

47:04 - mrtnvh.com

  • This is a good example of subtle flex of skills
  • FAST AF
  • Makes you say “Ohhhh” when you click a link (something that’s missing from a lot of these single page sites)
  • Personal Photo A+
  • Position sticky
  • Love the skills layout on the about page
  • Email is a button
    • I can’t copy your email
    • We have mailto links - don’t reinvent
  • A+

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 07, 2021
Hasty Treat - JavaScript Event Buzzwords — Sync, Concurrent, Defer, Blocking, Workers
25:02

In this Hasty Treat, Scott and Wes define some JavaScript Buzzwords and talk about what they mean!

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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Show Notes

03:24 - Synchronous / Async

05:23 - Multi-threaded

  • JavaScript has a single “main thread”
  • But you can have more threads with web workers

08:12 - Blocking

  • JavaScript can stop other things on the page from running
  • A script tag can block HTML from being parsed
  • Most stuff in JavaScript is non-blocking
  • Node.js write to filesystem can be blocking

10:27 - Concurrent + Parallel

13:22 - Consecutive / Waterfall

  • One after another

13:48 - Callback

17:56 - Script Tag Async + Defer

  • Doesn’t block other content
  • Runs when ready - doesn’t care about DOMcontentLoaded
  • Wait until the page is loaded before running
  • If the script tag is above content, don’t wait for it
  • Good for things that aren’t called on page load

21:54 - Lazy

  • Load it in later - maybe when it’s scrolled into view, or as needed
  • Not mission-critical

Tweet us your tasty treats!

Jul 05, 2021
Dev Tools Power — Elements Tab
51:14

In this episode of Syntax, Scott and Wes talk about the Dev Tools Elements Tab — all the features, and when you would use them!

Linode - Sponsor

Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Mux - Sponsor

Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.

Show Notes

03:13 - Elements

  • Learn to open the Elements panel and the console right away — right-click inspect element is weak!
  • Drag-and-drop elements
  • Edit as HTML
  • Click to select use in JS console
    • $0 →
  • Add Attribute
  • Breadcrumbs
  • Flex (Chrome now!)
  • Break on → Node removal
  • Scroll into view
  • Expand / Collapse

16:59 - Styles

  • :hov
  • .cls
  • Element style
  • Layout - Box Model
  • Layout - Grid
  • Layout - Flexbox
  • Toggle Print/Light/Dark

25:03 - Panel

  • Escape to open close
  • No longer has to be JUST Console
  • Computed Styles
    • Great to find out what value it’s actually using without scrolling through the cascade
    • Toggle browser styles on and off
  • Fonts Tab
    • Super handy to find the used font, spacing, size, weight, etc.
    • You can also see all fonts used on a page
  • Animations Tab
  • Changes
    • Shows the CSS that has changed since you have been goofing around.

38:18 - Settings

43:39 - Compatibility

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

  • Scott: Svelte Kit - Sign up for the year and save 25%!
  • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

Jun 30, 2021
Hasty Treat - Seven Interesting JavaScript Proposals - Async Do, JSON Modules, Immutable Array Methods, and More!
25:28

In this Hasty Treat, Scott and Wes talk about seven new JavaScript proposals — what they do, where they’re at, and how you might use them.

Deque - Sponsor

Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.

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

03:32 - Seven new JavaScript proposals

06:25 - JSON Modules

09:55 - Array Find From Last

11:40 - Async Do

  • https://github.com/tc39/proposal-async-do-expressions
  • Async do will allow you to group together a block of code and mark it as async.
  • No need for an iife
  • Downside to this is that it’s a code block, so if you need to return any values, you’ll need to jump that up a scope level.
 Promise.all([   async do {     let result = await fetch('thing A');     await result.json();   },   async do {     let result = await fetch('thing B');     await result.json();   }, ]).then(([a, b]) => console.log([a, b]));  

14:33 - Change Array By Copy

17:48 - Temporal

18:35 - As Patterns

20:47 - Pattern Matching

    {props => match (props) {     when ({ loading }) { ; }     when ({ error }) { ; }     when ({ data }) { ; }   }}   

Tweet us your tasty treats!

Jun 28, 2021
Potluck - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × More!
01:01:58

It’s another Potluck! In this episode, Scott and Wes answer your questions about web components, gear, Docker, web dev frameworks, golden handcuffs, browser testing, SSR React, code prediction, 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.com/syntax.

Linode - Sponsor

Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

Show Notes

04:08 - Is there a mechanism for exporting a React/Vue/Svelte component as a web component?

11:42 - You guys chat a lot about your sweet gear and desk setups. As a newcomer to web development it’s all a little expensive for me to mimic what you have; at least before I’ve learned enough to justify investing in better equipment. My question is: what are the minimum specs (laptop/monitor/etc) you would recommend a beginner just starting out in webdev?

22:35 - I rarely, if ever, hear you guys or any other web dev related podcast mentioned Python, Flask, Django etc. Do you have any experience with those frameworks and can you give any thoughts you may have on Python as a language for back end development.

26:47 - What do you think of using Docker containers to do development work? I have seen a couple articles talking about it, but it doesn’t seem super common to use since few GitHub projects have Dockerfiles in their repos.

32:19 - I’ve often heard you two talk about the idea of the “golden handcuffs”, where a job pays well, but the employees are miserable. I think I might be in that situation right now. I’ve tried organizing my day so my time is better segmented. I can’t tell if this is the natural progression of a developer advancing in their career and I just need to adjust better, or if I need to make a change. Any advice or tips you have to better manage time or decide what’s next would be much appreciated.

37:28 - When it comes to desktop browser testing, is there a difference anymore is browser rendering engines? Do most (if not all) browsers use Google’s rendering engine?

39:20 - As someone who got into the industry relatively recently (around 2019), component frameworks and single-page applications were my introduction to web development. I am now really interested in learning more about the “traditional” way of doing things, 100% server-rendered. What’s my recourse here? Ruby on Rails, Laravel, something else? Is there an agreed upon “modern” way to do a server-rendered monolithic app?

43:43 - I wish to ask the kind of plug-in, extensions or stand-alone software you use for code prediction and to help you code faster. I personally use Kite and VS Code’s intellisense, it seems to get it wrong more times than right. Do both of you have any recommendation?

47:18 - Is there any benefit to using prop types in TypeScript for React projects?

48:14 - I’m currently planning to build an audio-focused app (maybe even more than one actually), and I’ve been wondering how you would solve the problem of storing and fetching (on-demand) hundreds, perhaps thousands, of little audio-files. I’ve got some deep reservations against AWS, although I’m somewhat familiar with it - the complexity, hidden (and hard to estimate) costs etc. I’m thinking about Digital Ocean or something like that. Would it be too hard to implement things like caching and such yourself. Any thoughts?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jun 23, 2021
Hasty Treat - CSRF Explained
17:26

In this Hasty Treat, Scott and Wes talk about CSRF (Cross Site Request Forgery)!

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Show Notes

05:40 - What is it?

07:50 - Solutions

  • SameSite Cookie
  • https://medium.com/swlh/secure-httponly-samesite-http-cookies-attributes-and-set-cookie-explained-fc3c753dfeb6
    • Lax — Default value in modern browsers. Cookies are allowed to be sent with top-level navigations and will be sent along with GET requests initiated by a third party website. The cookie is withheld on cross-site subrequests, such as calls to load images or frames, but is sent when a user navigates to the URL from an external site, such as by following a link.
    • Strict — As the name suggests, this is the option in which the Same-Site rule is applied strictly. Cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites. The browser sends the cookie only for same-site requests (that is, requests originating from the same site that set the cookie). If the request originated from a different URL than the current one, no cookies with the SameSite=Strict attribute are sent.
    • None — Cookies will be sent in all contexts, i.e sending cross-origin is allowed. The browser sends the cookie with both cross-site and same-site requests.
  • CSRF Token
  • Check Origin / Referrer Headers
  • Captcha
  • Ask for Password
  • Token

Tweet us your tasty treats!

Jun 21, 2021
CSS Container Queries, Layers, Scoping and More with Miriam Suzanne
59:51

In this episode of Syntax, Scott and Wes talk with Miriam Suzanne about all things CSS — container queries, layers, scoping, and more!

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

RevenueCat - Sponsor

RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.

Guests

Show Notes

02:21 - When did you come on board with container queries?

10:27 - How would you declare specificity?

  • Layer example:
 @layer default; @layer theme; @layer components;  @import url(theme.css) layer(theme);  @layer default {   audio[controls] {     display: block;   } }  

13:08 - What is your background?

18:20 - What are container queries?

22:06 - What is the background on contain? How does it work?

29:25 - Is it still under development?

33:51 - Have you tried the EQ polyfill from Johnathan Neal yet?

35:21 - How far out are we?

38:10 - What is Scope?

44:00 - How will MQ and CQ work together?

45:49 - Do you use inline and block?

48:44 - What browser do you use?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jun 16, 2021
Hasty Treat - What is SvelteKit?
24:22

In this Hasty Treat, Scott and Wes talk about SvelteKit — what it is and why you might want to use it.

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.com/syntax.

Show Notes

03:28 - What is it?

  • Total platform for building Svelte apps
  • Built in Vite.js
    • Includes all of the Vite goodness but it hides behind the scenes for the most part
  • Host anywhere

05:16 - Is it CSR, SSR, SSG, WTF?!

  • All of the above. Uses adapters to control the output:
 kit: {         // hydrate the 
element in src/app.html target: '#svelte', adapter: adapter() }

09:45 - What you get out of the box

  • File-based routing
  • API routes
  • Layouts and layout resets
  • Fancy file titles [slug] __layout
  • Code splitting & preloading
  • PostCSS
  • TypeScript support

17:03 - Neat small things

Links

Tweet us your tasty treats!

Jun 14, 2021
Potluck - Immutability × Turning Off Your Brain × Types vs Interfaces × Hooks vs Components × Making the Most of Your First Job × Confidence in Svelte × More!
01:02:23

It’s another Potluck! In this episode, Scott and Wes answer your questions about immutability, turning off your brain, managing copy on a website, problem-solving, types vs interfaces, hooks vs components, 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.

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.

Coudinary - Sponsor

Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

Show Notes

01:24 - I’m finally getting onboard with the GraphQL train and have a specific question about nomenclature. Having worked with redux in the past, IMMUTABILITY was a concept ingrained in my head. I continue to see benefits of immutable updates across all sorts of libraries, frameworks, vanilla js, etc. Learning about GraphQL now, I’m taken aback by the fact that CUD (create, update, delete) operations are called MUTATIONS. Is there a reason that we use the “mutation” terminology, despite the fact that best practices dictate that we should implement immutable updates to objects? Does GraphQL actually mutate objects behind the scenes?

06:38 - How do you sleep at night?!? I mean, how do you switch off your brain when you’re trying to go to sleep and your brain just wants to keep on coding?

12:15 - How do you manage copy and microcopy on a site? Should you put every piece of text across the entire site into a CMS so the client can change it? Or just the parts you think may be updated in the future? Or do you just hard-code everything directly into the markup? Or collect it all into an importable JSON file?

21:41 - I am new to using CMSs and I was wondering for applications that require a lot of content management where a CMS or headless CMS such as Contentful is ideal but also requires dynamic queries such as recommended content to the end-user based on browsing history. How do you approach integrating the user data in combination with the data being received and handled from the CMS? A separate API and database? Or is this a scenario that a CMS doesn’t fit?

25:56 - When solving a problem, do you do it through trial and error? Or do you carefully think through every solution and choose the best one before actually implementing it into code?

28:14 - How can we take advantage of this new partnership between 1Password + SecretHub! I feel like this is getting into DotEnv but sounds so much more interesting.

32:34 - When creating types in TypeScript, when should someone use a type over an interface? While I generally understand the differences, it seems like interfaces offer more flexibility. I am struggling to understand why I would ever use a type.

36:34 - I’ve recently started using TypeScript in React, and typically I’m just using function components. I’ve seen some people saying that classes are really great with TypeScript in React but I haven’t found any real use case/benefits myself yet. How about you guys, do you use classes in React/TypeScript?

38:17 - What are your opinions on generators like Yeoman?

44:26 - I’ve been looking for a career in web for a couple of years now and I’ve recently landed a job with a small agency getting paid hourly making WordPress websites, that I’ll be starting in two weeks. I’m worried that I’m going to get stuck pushing Divi sites all the time. I know this is a good opportunity for me but I was hoping you guys can shed some light and give me some tips on how I can put my skills to good use.

48:35 - What are your approaches for caching a GraphQl API?

52:30 - You mentioned in an earlier Potluck that Svelte is probably the easiest framework to learn. How confident can one be to start a new project with Svelte? Being a technical lead, can I propose our team to work with Svelte? Are there enough material/solution on the web and is the community established?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jun 09, 2021
Hasty Treat - Making a Vaccine Bot with JavaScript
24:08

In this Hasty Treat, Scott and Wes talk about Wes’ experiment building a vaccine bot!

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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Show Notes

07:32 - First step

  • Finding the data. Open up dev tools.
  • Copy as Node.js Fetch in Chrome
  • Two ways to do this - Puppeteer, or raw requests, or a mix.

11:03 - Variablizing it

  • Store IDs
  • Booking form IDs
  • Vaccine IDs

12:56 - Finding out any restrictions

  • Is there a cookie?
  • Is there an XSRF?
  • Do these things change?
  • How often can you hit it?

15:20 - Caching

  • Array variable

16:59 - Delivering the notifications

  • Telegram

Links

Tweet us your tasty treats!

Jun 07, 2021
React + TypeScript
01:11:53

In this episode of Syntax, Scott and Wes talk about using React with Typescript — how to set it up, components, state, props, passing data, custom hooks, 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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Linode - Sponsor

Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

Show Notes

04:55 - Components

  • Strategies
  • Example:
 type Props = {    value: string; }  const App = (props: Props) => <div />  
  • Return type? JSX.Element
  • FC or FunctionComponent
  • It’s discouraged for this reason: It means that all components accept children, even if they're not supposed to
  • It could be useful for a return type

12:13 - Props

  • Default props:
 const defaultJoke: JokeProps = {   joke: 'LOL JOE',   id: 'YEAH',   status: 200, };  function JokeItem({ joke = defaultJoke }: JokeProps): JSX.Element {   return (     
  • {joke.joke} = {joke.id}
  • ); }
    • Because props are always destructured, you often have to make a new type for your props. You can’t just type each argument by itself.

    18:38 - State

    • Just like Generics, State can be inferred
    • If your type is simple and you’re using useState, it just works:
      const [user, setUser] = useState(null);

    22:27 - useEffect

    • Nothing special required
    • Good use of void: If you want to use a Promise function but not worry about await or .then(), you can pop a void in front of it:
     useEffect(() => { console.log('Mounted'); // getJoke().then(console.log).catch(console.error); void getJoke(); }, [getJoke]);  

    26:09 - Refs

    • Very similar to state however some interesting things with null:
      const ref1 = useRef(null!);
    • “Instantiating the ref with a current value of null but lying to TypeScript that it’s not null.”

    29:33 - Custom Hooks

    • This is a great use case for Tuples

    31:00 - Context

    • This is probably the most complex thing in this list
    • First define the types
    • Use generic to pass in types OR null
    • This can also be non-null if you have default values in createContext:
      const AppCtx = React.createContext(null);

    35:21 - Events

    • The React events system is better than Vanilla JS
    • Can handle them inline and have it inferred: onClick={e ⇒ yeah(e.target)}
     const onSetType = (e: React.ChangeEvent) =>     setType(e.target.value)  
    • React has a bunch of events built in — many of them take a Generic argument so you can specify the type of element that triggered it. Handy for native API methods like play and pause.

    39:27 - ForwardRef

    • Again use of <> to pass in forwarded ref type as param 1, Props types as param 2:
     type Props = { children: React.ReactNode; type: "submit" | "button" }; export type Ref = HTMLButtonElement; export const FancyButton = React.forwardRef((props, ref) => (    ));  

    41:30 - ESLint

    • Typescript-react is good
    • Extend your own
    • Most JS rules apply to TS

    46:20 - React as Global React 17

    • Also add JSX: True to eslint globals for typing things like JSX.Element
    • global.d.ts
     import * as react from "react" import * as react_dom from "react-dom"  declare global {     type React = typeof react     type ReactDOM = typeof react_dom }  

    48:08 - TSConfig

    • jsx: "react"
    • React emit .js files with JSX changed
    • Preserve .jsx file output
    • React-native → .js files with jsx not changed

    53:05 - Frameworks?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Jun 02, 2021
    Hasty Treat - How to Make Money as a Creator
    25:54

    In this Hasty Treat, Scott and Wes talk about making money as a creator — how to do what you love, make money doing it, and not feel yucky about it!

    Deque - Sponsor

    Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.

    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

    06:37 - Community supported

    • Sell licenses
      • Premium plugin
      • Single payment
      • $x per year
    • Sell training
      • Online
      • In-person
    • Sell support
    • Donation-supported
    • Sell merch

    16:00 - Corporation supported

    • Display ads
    • Sponsored segments
    • Corporate sponsors
    • Sponsored content
    • Interesting collabs
      • Stickers

    Links

    Tweet us your tasty treats!

    May 31, 2021
    Bike Shedding — Developer Opinions Explained
    01:03:39

    In this episode of Syntax, Scott and Wes bike shed some common developer opinions.

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.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.com/syntax.

    Mux - Sponsor

    Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.

    Show Notes

    04:27 - Event params

    • e, evt, ev, or event?

    06:36 - CSS variables

    • —red or —primary?

    09:31 - CSS colors

    11:52 - Default exports vs named exports

    14:45 - JavaScript import ordering

    17:09 - Foo / Bar / Baz in examples

    21:18 - Light vs dark themes

    24:00 - longVerboseNamesDescribingWhatItIsOrDoes vs x

    26:54 - VScode vs WebStorm (IDE) vs Vim

    31:12 - TypeScript Generics: vs

    34:39 - Indentation-base syntax

    37:37 - Max line length

    40:21 - One reduce, vs multiple .map()/flat(),filter()

     async function getStatus() {    const res = await sendCommand('AT!GSTATUS');    const result = res.result     .split('\n')     .map((x: string) => x.split(`\t\t`))     .flat()     .filter(Boolean)     .map((x: string) => x.trim())     .map((x: string) => x.split(`    \t`))     .flat()     .filter((x: string) => x.includes(':'))     .map((x: string) => x.split(`:`))     .map(([prop, val]: [string, string]) => [prop, val.trim()])    return Object.fromEntries(result); }  

    42:50 - index.js files

    48:20 - Ligatures and fancy fonts

    50:30 - Regular functions vs anon functions in a variable vs arrow functions

    • function hey() {}
    • const hey = function() {}
    • const hey = () ⇒ {}

    52:44 - Explicit return vs implicit return

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    May 26, 2021
    Hasty Treat - JavaScript’s Drag and Drop API
    28:48

    In this Hasty Treat, Scott and Wes talk about JavaScript’s drag and drop API — how it works, concerns, best practices, and more!

    .TECH Domains - Sponsor

    .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    04:45 - What is it?

    • Drag and drop is really for desktop apps
    • You can drag and drop anything from any browser to any browser
    • The important thing here is that this is a set of browser standards that allow different apps to communicate

    07:50 - How to implement

    1. Make an element draggable
    2. Listen on elements for drag events
      • The events bubble up, so you can listen on the parent element as items are added/removed

    09:06 - DataTransfer API

    • You can store anything you want in it
    • getData / setData API
    • Reference strings

    11:35 - Accepting drops

    • When you dragOver, you need to preventDefault()
    • Calling the preventDefault() method during both a dragEnter and dragOver event will indicate that a drop is allowed at that location

    13:01 - Drop Image

    • Set whatever you want

    16:00 - Drop Effect

    • What does it look like when you drop it? Does it go back?
    • dataTransfer.effectAllowed
    • e.dataTransfer.setDragImage(nothing, 0, 0);

    18:02 - Security concerns

    20:34 - Shortcomings:

    • Edge cases out the WAZOO
      • Margin caused dragout events
      • Lots of if statements
    • It’s up to you to do EVERYTHING
      • CSS, classes, hover styles, etc.
    • Accessibility
      • Inaccessible by default, unless using mouse keys
      • Have to announce everything
    • Mobile

    26:14 - Lbs

    Links

    Tweet us your tasty treats!

    May 24, 2021
    The Surprisingly Exciting World of HTML Elements
    01:02:44

    In this episode of Syntax, Scott and Wes talk about HTML — interesting HTML elements, things you might not know, wish lists for the future, and more!

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Cloudinary - Sponsor

    Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

    Show Notes

    02:34 - What is semantic HTML?

    • What is the content? HTML should describe the content first and foremost.

    04:04 - Why semantic HTML?

    May 19, 2021
    Hasty Treat - Stylin the Unstylables
    21:31

    In this Hasty Treat, Scott and Wes talk about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for!

    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.com/syntax.

    Show Notes

    Can it be styled? Solutions

    04:28 - Just style the defaults

    • Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style.
    • This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs.
    • Select
    • Input - number, date, etc.
      • Very hard to style
      • Often need appearance: none; for mobile
    • Checkbox / Radio
    • Generally speaking, these CSS Properties can be applied to all inputs:
      • font-size
      • color
      • padding
      • margin
      • background / images
      • outline (remember focus)
      • border

    08:20 - Overlap with more dom elements, set background images

    • Checkbox / Radio / Toggle buttons
      • Often used :before and :after along with labels — e.g. label + input:checked
    • Select can have element overlap

    14:13 - Re-implement the UI with JavaScript

    • Video / Audio
      • HUGE rabbit hole of things to code
    • Very important to maintain accessibility

    15:46 - Use a UI Library

    17:20 - Open UI

    Tweet us your tasty treats!

    May 17, 2021
    Potluck — Freelancing × Leveraging your experience × Component size × Dealing with mediocrity × How to spend “extra time” × Rust vs Node × Free hosting? × More!
    59:52

    It’s another Potluck! In this episode, Scott and Wes answer your questions about freelancing, climbing the corporate ladder, Throttling vs debounce, how to build skills with your free time, 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.

    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.

    Vonage - Sponsor

    Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax.

    Show Notes

    02:11 - I’ve read that when you start out freelancing, you should look to your area first to gauge the market for both rates, and type of work that is in demand. If you wanted to work remotely as a freelancer, however, is that really applicable advice? Is it viable to work 100% remote and not be tied to “local rates”?

    How can I leverage my years of professional experience when starting to freelance? A lot of material online speaks to those who are learning web development for the first time. But what does someone do if they’ve been working at big companies, who can’t share their work directly? What can I do to help prospective clients appreciate those years of experience?

    06:02 - In your opinion, what is the accepted norm for the size of a component? It could be anything from a single element to a full page of content, but what is the norm for component size or content? Love the show, keep up the good work.

    09:42 - I’m a bit confused about throttling and debounce. What is the difference between them? I have been finding different examples which are not at all helpful.

    12:58 - My question is about climbing the company hierarchy. I’ve had a hard time getting my first job after graduation. I have dealt with the unemployment office, useless recruiters, trying to look important for companies, and I wonder if a get a low wage job at a company and then apply for their IT department after some time if there is a open position. Is it bad practice or good strategy taking this shortcut? Would they know what I’m trying to accomplish?

    18:25 - I’m getting started building websites and find the initial design to be a challenge. I always end up diving into the coding and then spending hours getting lost tweaking CSS. The mediocrity of the final design is a masked technical challenge, and I emerge at the other end of the effort with something I’m still not happy with. I suspect there is some kind of mock up stage I’m forgoing, and I bet there are some tools to make it easier. I imagine that some kind of application that really focused me on the design and made it easy to tweak and tinker quickly would be ideal. Thoughts? What do you use?

    23:34 - The company I work for works with a SOAP API. Currently I am developing a application in React but I am wondering whether it’s better to use the SOAP API or let them create a Rest API. Some people on the internet say that JS and SOAP combinations are not done. Is there some advice you can give me about this?

    28:28 - Why are radio buttons called radio buttons?

    30:49 - I am midway through a post-baccalaureate in computer science. I recently quit my job to focus on my second degree. Now I’m looking to spend my “extra time” on an area of focus that can hit as many of the following criteria as possible:

    • Could make me money now
    • Help me to hit the ground running when I graduate
    • Get me a job easily
    • Make me all kinds of cash

    Thoughts?

    35:56 - What is your opinion on a Rust GraphQL server for web backend? Do you think it is better than Node.js?
    (not part of a question, just a comment: I found you yesterday and dude I have to say, you are legendary… I am 13 right now and also started web development when I was 12. I have been looking for a good web-development related podcast for about four months now. Looks like I found the one I needed ;) )

    39:57 - How would you go about introducing React into an existing big website with lots of legacy code and a template-based CMS behind? I can’t do a full rewrite but I would love to start turning little bits & pieces into a single-page-experience (e.g. checkout) to slowly modernize the site. The frontend is already TypeScript & SCSS but it’s an old self-made framework and the content coming from the CMS is mostly put into data-attributes or right into the HTML. I don’t really have an API for most of the content. How would React hook into the existing DOM in different places, loading data from the templates and potentially writing it back into the templates as well?

    45:31 - What’s the best way to be able to host personal projects (frontend + backend) for free on the web? I would like something where I can SSH into to install for example Node.js and a database. I already bought a domain, but I don’t want to pay for some premium plan for now since I’m short on money and it’s for personal projects anyway.

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    May 12, 2021
    Hasty Treat - Technical Debt
    28:21

    In this Hasty Treat, Scott and Wes talk about technical debt — what it is, why does it occur, and some techniques for reducing and avoiding it.

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    03:17 - What is technical debt

    • Outdated or hard to update code
    • If you groan when you have to work on it, it might be a sign of technical debt
    • Brittle code, easily breakable
    • Quirks and features

    06:55 - Why does it occur

    • Over time, any garden left un-pruned will become overgrown
    • Many people, many code styles
    • Using hot new frameworks / techniques
      • This is why seasoned developers don’t jump on new things
    • You allow users to do literally anything

    13:18 - Techniques for avoiding it

    • Deny your FOMO of new things
    • Abstract
    • Write good tests
    • Don’t put off refactors
    • Update dependencies frequently
    • Good standards
      • Etsy has thousands of devs

    20:08 - Examples in the real world

    • Airline websites open in new windows all the time
    • Cellphone carrier flashes the screen 100x

    22:15 - Unfixable technical debt

    • Agency work sometimes

    Links

    Tweet us your tasty treats!

    May 10, 2021
    Potluck — Is it worth it to still learn WordPress? × Is Safari the new IE11? × Mobile website testing × Pirated content × Styled components × SSGs × Transitioning to full-time freelance × More!
    01:06:41

    It’s another Potluck! In this episode, Scott and Wes answer your questions about blogging best practices, support IE11, Nest.js, mobile website testing, pirated course content, building .edu websites, transitioning to full-time freelance work, 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.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Cloudinary - Sponsor

    Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

    Show Notes

    02:20 - I am adding a blog to my custom written personal website and I wanted to know if there is any best practices for storing blog posts? My hope is to write them in markdown, host them somewhere and then automatically feed them into my website so they are all formatted to the style of my website.

    05:37 - Do you care if people share cool, unique tips from your courses publicly on social media? For example, I once shared out a trick from one of Wes’ courses for how to set your VS Code windows different colors to distinguish your server and client code windows (giving all credit to Wes’ course for the concept). But it felt a little weird that I was sharing out a portion of his paid content for free. Is that okay? Where’s the line?

    18:18 - With official support of IE11 coming to an end on August 17, 2021, do you think developers should still try to support ir or focus only on new modern browsers? Also, will there be a new “lowest common denominator” that we should be aware of and support?

    07:20 - Thanks for an awesome podcast! Have you looked into Nest.js (not to be confused with Next.js) for backend work? It is an open source TypeScript Node framework that is becoming pretty popular

    22:48 - Do you think it’s worth learning WordPress for freelancing if you aren’t too confident in your JavaScript front-end design? Also, I don’t want to get stuck in only WordPress land just because of the money.

    30:11 - Hi guys, I have been listening to you guys for a while and just recently launched my first website! Your podcast has been a huge help in terms of getting started. For the website I made, I tested the iPhone view on Chrome dev tools and everything looked fine. However, when viewing the website on an actual iPhone, the button is too small and the word “Menu” turns into “Men”. Any advice on how to more accurately test sites on mobile devices without pushing to a production branch?

    36:52 - Do you guys ever see your premium courses pirated on sites like UdemySkillshare, any of the other video course platforms? Meaning somebody downloaded your videos and uploaded them as if they were the creator. Any tips to protect against this?

    39:53 - Looking at uses.tech and thinking, I see a lot of class names with almost the same style, gKxjCc and hSiXhL. I really want to know the science behind generating those. Do you have a shared classes that some magic tool transfers them into ugly names and copies over? What is that tool? And is it worth it?

    42:57 - Have you ever developed a .edu site? If so, what did you use to manage the enormous archives in addition to giving the site a simple page builder for departments to contribute with little or no interaction from the developer? No Joomla or Drupal please - been there. Thanks for the great help guys!

    50:35 - Hi Wes & Scott, thank you so much for giving me my weekly motivation boost to try out new stuff. Currently, I am experimenting with Next.js and SSG and I would like to know how I can generate a page at build time but only show it to an authorized user. I know I could use SSR with getServerSideProps to check allowance, however, the page is completely static without any dynamic content and I don’t want to regenerate it with every request. Is there a way to achieve this? Keep up the great work.

    54:59 - I love the show guys! I want to make the transition into full-time freelancing and wanted to know what you think about having a talk with my current employer to see if they’d be willing to take me from full-time to a contract/freelance basis. Bad idea? Thoughts? Advice?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    May 05, 2021
    Hasty Treat - Future Tech We’re Excited About
    28:20

    In this Hasty Treat, Scott and Wes talk about future tech — some things you may not have heard about yet, and why we’re excited about them!

    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.

    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

    05:20 - Astro

    • What it is:
    • Why we’re excited about it:
      • Server Side JS frameworks, combine Svelte, React, Vue as needed in one component that is an SFC using markdown style meta data.
      • Scoped CSS by default (a la Svelte). Sass out of the box.
      • Collections import for .md files
     // pages/blog.astro --- import PostPreview from '../components/PostPreview.astro';  const blogPosts = import.meta.collections('./post/*.md'); ---  <main>   <h1>Blog Postsh1>   {blogPosts.map((post) => (     <PostPreview post={post} />   )} main>  

    12:06 - ViteKit

    • What it is:
      • Framework-agnostic
      • API routes
      • Pages (frontend, optional hydration)
      • Adapter for Node, static, Vercel, cf worker, etc. Inspired by SvelteKit.

    15:58 - Svelte Kit

    19:07 - Remix.run

    • What it is:
    • Why we’re excited about it:
      • Made by Michael Jackson, Ryan Florence
      • License-based
      • React-based
      • Caching-focused, uses “the platform”
      • Centralized data loading, works without client JS if needed
      • Better nested routing

    Links

    Tweet us your tasty treats!

    May 03, 2021
    TypeScript Fundamentals — Getting a Bit Deeper
    01:08:51

    In this episode of Syntax, Scott and Wes continue their discussion of TypeScript Fundamentals with a deeper diver into more advanced use cases.

    Deque - Sponsor

    Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.

    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.

    Mux - Sponsor

    Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.

    Show Notes

    Deep end stuff

    03:30 - any vs unknown

    06:20 - never

    13:25 - Type generation

    • Can be generated from GraphQL, or Schemas, or from JSON Output

    17:20 - TypeScript generics (variables)

    • Kind of like functions, they return something different based on what you pass it
    • makeFood
    • makeFood
    • This function makes food and shares lots of the same functionality between making a pizza and sandwich
      • If the only thing that differs is the type returned, we can use generics
      • You often see this as a single char T
      • It can be anything
      • Promise is a generic
      • querySelector uses generics

    21:48 - Promises / Async + Await

    • Functions now return a Promise type, but with a generic
    • Promise
    • Promise
    • Promise>, Request, Request
      • stringified
      • added headers

    29:48 - Type assertion (type casting)

    • Type assertion is when you want to tell TypeScript “Hey I know better than you”.
    • Two ways:
      • as keyword (most popular)
        • someValue as HTMLParagraphElement
        • Tagged before
          • someValue

    34:14 - TypeScript without TypeScript (JSDoc / TSDoc)

    40:08 - Interfaces vs Types

    How we write TypeScript

    44:27 - Interface or Types

    • Scott - Types
    • Wes - Interfaces

    44:50 - any vs unknown

    • Scott - any
    • Wes - unknown / any

    46:52 - Any (No Implicit or Implicit Allowed)

    • Scott - No implicit any
    • Wes - No implicit any

    48:31 - Return types (Implicit or Explicit)

    • Scott - Explicit always
    • Wes - Not always

    50:49 - Compile (TSC, Strip TS)

    • Scott - Strip
    • Wes - Both

    52:38 - Type Assertion (as or )

    • Scott - as
    • Wes - as

    53:09 - Arrays (Dog[] or Array)

    • Scott - Dog[]
    • Wes - Dog[]

    54:02 - Assert or Generic (if both work)

    • querySelector(’.thing’) as HTMLVideoElement; or querySelector(’.thing’);
    • Scott - querySelector(’.thing’);
    • Wes - querySelector(’.thing’);

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Apr 28, 2021
    Hasty Treat - Git Rebase Explained
    16:25

    In this Hasty Treat, Scott and Wes talk about Git Rebase — what it is and how and when to use it!

    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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    05:12 - Why and when to rebase?

    • git rebase -i is interactive
    • Rebase allows you to rewind your current branch, apply the changes of another branch to it, and then on top of that, apply your new commits.
    • Common uses:
      • Squash all commits into one or multiple commits
      • Reword commits
    • These lines can be re-ordered — they are executed from top to bottom.
      • p, pick = use commit
      • r, reword = use commit, but edit the commit message
      • e, edit = use commit, but stop for amending
      • s, squash = use commit, but meld into previous commit
      • f, fixup = like “squash”, but discard this commit’s log message
      • x, exec = run command (the rest of the line) using shell
      • b, break = stop here (continue rebase later with ‘git rebase --continue’)
      • d, drop = remove commit
      • l, label
      • t, reset
      • m, merge [-C | -c ]

    Links

    Tweet us your tasty treats!

    Apr 26, 2021
    Selling and Shipping T-Shirts with TypeScript
    56:09

    In this episode of Syntax, Scott and Wes talk about selling and shipping t-shirts, and how to do it all in TypeScript!

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Deque - Sponsor

    Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.

    Show Notes

    01:58 - T-Shirts 101

    • T-Shirts are cool
    • I sold 100 right away to get the kinks out
    • Then I did pre-order
    • The stack

    09:08 - Selling: Front-end

    • Snipcart
    • It’s a button
    • When Someone buys, they scrape the site for the HTML
      • If you only have a client-side rendered button, you use the JSON API instead
    • Integrated into Gatsby pretty easily
    • Wrote one custom hook to count inventory and disable when sold out
    • I thought Snipcart would be enough, but I soon realized it wasn’t. I needed something to fulfill the shipment.

    10:10 - Selling: Shipping Quotes

    • Snipcart has integration for USPS, etc.
    • You can also do custom shippers
    • It’s a webhook
    • They also take care of customs declaration

    13:30 - Selling: Backend

    18:05 - Fulfilling

    • Printing labels
      • Designed with CSS + React
      • Print CSS is wild
      • Fan Fold labels were way better
      • I switched to Stallion Express
      • Cheaper
    • Printing packing slips
    • Batch scanning
    • Scanning → Mark as shipped
      • Started with webcam
      • Bought scanner for cheap
      • QR code was better because my tokens were long
      • Data matrix is often better
    • Sending notifications
      • Hit the endpoint via Snipcart

    28:48 - The physical part

    • T-Shirts printed from local supplier
      • U-Haul to get them here
    • Bags printed in China (about 40 cents each)
    • I wrote a bunch of code to organize by size
      • This cut down on moving around (14 hours if you save 30 seconds per shirt)
    • Some got stickers
    • Multiples were the hardest
      • 24 different types of shirts
        • some wanted 4xl
        • some wanted tall

    36:30 - Common questions

    • Why did you do this yourself?
      • Fun project
      • I learned a ton
      • This is how you don’t burn out
    • Why not print-on-demand? (DTG)
      • Tonal
      • Embroidery
      • Quality
      • Money
        • Pay people in my community
    • Control
    • Why not $companyThatHandlesIt
      • I want to do stickers
      • I want to do decks
    • Why not Shopify
      • Large orders still need major fulfillment strategies
      • Code has to be written or money spent

    44:16 - Other lessons learned

    • Queues would be good here
      • Sometimes you had to wait 3+ seconds for the confirmation of shipping
    • No one reads, it was pre-order
    • Don’t buy shipping right away — people email about incorrect addresses
    • Over-order by a few each (out of 1550 orders, five got partial refunds and three got full refunds)
    • Pre-order is great because you can offer many sizes
    • Async JS to do things at most 50 at a time

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Apr 21, 2021
    Hasty Treat - Container Queries Are Here
    24:21

    In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.

    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.com/syntax.

    Show Notes

    07:22 - Why?

    • Container queries are media queries for components (e.g. they are based on the element’s size, not the browser).
    • This is in line with how we write components.
    • It will change the way we write CSS.

    08:49 - The Syntax

    • Containers need to be defined as containers via containment context
     .container {   contain: size layout; }  

    New contain value:

     .inline-container {   contain: inline-size; }  

    This is the same as the logical properties. Assuming you read LTR, or RTL:

    • size - width and height
    • inline-size = width
    • block-size = height
     /* @container  {  } */ @container (inline-size > 45em) {   .media-object {     grid-template: "img content" auto / auto 1fr;   } }  

    18:49 - How to try them today

    1. Download and/or update Chrome Canary
    2. Go to chrome://flags
    3. Search and enable “CSS Container Queries”
    4. Restart the browser

    19:27 - Demos

    Links

    Tweet us your tasty treats!

    Apr 19, 2021
    Dev Tools Tabs Explained — Plus Tips & Tricks
    01:02:50

    In this episode of Syntax, Scott and Wes talk about dev tools tabs, what each tab does and how you can use them.

    Vonage - Sponsor

    Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/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.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    3:50 - Network

    • See all requests, filter by type or name
    • Used to understand all requests coming or going
    • Turn off caching
    • View timing
    • See the true GZIP size
    • Slow down network speed
    • See time for page load
    • Copy as fetch or CURL
    • View request, response, and headers
    • See CORS issues
    • See which requests have happened
    • See if an asset is cached (both in dev tools, also Cloudflare)
    • See blocked requests because of extensions
    • Tip: You can see the network info from the console in Firefox

    22:03 - Memory

    • See what is taking up memory
      • Strings
      • DOM nodes
      • Objects
      • Actual .js

    26:44 - Performance

    • Click record and use the site
    • Flame chart useful for finding slow functions and debugging janky animations
    • Get FPS in coordination with flame chart
    • Save performance recording data to be able to share for debugging
    • You can also upload saved data to debug without using the site

    30:48 - Console

    • Interfaces with the JS runtime
    • Shows errors, warnings, and logs
    • Tip: Negate noisy warnings/errors that clutter your console with -
    • Tip: Use $0 to select current element
      • $1 for second last
      • $r for current React element
    • Tip: Use $$ to shortcut Query SelectorAll and Array.from
    • Tip: Use $ to shortcut Query Selector

    40:28 - Storage / Application

    • Working with LocalStorage, Cookies, Index DB, and Session Storage

    44:56 - Audit / Lighthouse (Chrome and Firefox)

    • Run lighthouse to check for performance, accessibility, and UI stuff
    • Not the silver bullet audit that many people think it is
      • Colors are sometimes like “Really?!”
    • Can be helpful regardless

    50:28 - DOM Tab

    • Firefox only
    • Shows everything that is in the scope of the browser

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Apr 14, 2021
    Hasty Treat - CSS Nesting 1
    20:11

    In this Hasty Treat, Scott and Wes talk about CSS nesting — what it is, when to use it, and why.

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    04:22 - What is it?

    06:02 - Why nest?

    • Easier to read
    • Easier to write
    • Prevents refactoring errors, allows for dry-er code. No more typing a parent div 100 times, with a possibility of screwing it up.

    08:13 - When to use nesting

    • Nesting is often overused
    • Only nest what you would have written un-nested with a short hand (e.g. don’t nest just for the sake of it)
      • .container .item {} .container .item a {}
    • Use it for scoping

    10:06 - Nesting prefixes

    • In order to nest CSS, you must first start it with a nesting selector
     .tweet {   & > p {   }   &.media-included { color: green; }   & + .tweet { } // sibling   & p { } // descentang }  
    • Component-based — tweet, card, company, Link
     article{     color: blue;   & {         color: red;   } }  

    and must be the first child of a compound selector

    12:44 - @nest rule / media queries

    • Mostly just a visual way to show nested
     .foo {     display: grid;     @media(orientation: landscape) {     & {             grid-auto-flow: column;         }     } }  
     .foo {   display: grid;    @media (orientation: landscape) {     & {       grid-auto-flow: column;     }      @media (min-inline-size > 1024px) {       & {         max-inline-size: 1024px;       }     }   } } /* equivalent to    .foo { display: grid; }     @media (orientation: landscape) {      .foo {        grid-auto-flow: column;      }    }     @media (orientation: landscape) and (min-inline-size > 1024px) {      .foo {        max-inline-size: 1024px;      }    }  */  

    16:30 - How to use nesting today

    • Literally any CSS preprocessor
    • PostCSS to use spec

    Links

    Tweet us your tasty treats!

    Apr 12, 2021
    Potluck — Video Hosting × Fake Names? × Portfolio Projects × Monorepos × APIs × TLDs × Recording Tips × More!
    01:11:28

    In this episode of Syntax, Scott and Wes talk about how to keep your skill up to date when you have a job and a family, when you should start looking for your first job, monorepos, video hosting, TLDs, APIs, fake names, 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.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Vonage - Sponsor

    Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax.

    Show Notes

    02:10 - How do you handle token refresh when multiple API calls are made at the same time? Let’s says you get a 401 and do acquire a new token, but that will only be used by the first API call, while the other parallel APIs would still use the old one and error out. This has caused me to sort of artificially limit the total requests to be made to 1. How do you deal with it?

    06:40 - What service do you guys use for video storage and optimization? I am currently building out a side project that will require some video hosting so I figured I would ask the experts.

    15:22 - I’m trying to teach myself web development and I’m having problems making up the logic for my personal projects. I would have to watch YouTube tutorials or look at other people’s code in order to implement simple features to my website and I’ve been feeling pretty stupid for not spending the time to think of it. I feel like I’m missing out on knowing how to problem solve for myself whenever I copy other people’s code and try to understand them afterwards.

    19:27 - I just landed my first web development job after following The Odin Project and building personal projects for about a year. It tripled my income so I am incredibly excited! I have been using a PHP framework which was developed by one of my coworkers and has no documentation. In order to understand the code, I either have to read a bunch of source code or ask one of the other developers questions. While I am doing well, I can’t help but feel as if I am working way too slow and asking way too many questions. I assume this is imposter syndrome and lots of people deal with it, but how would you suggest dealing with this type of anxiety?

    25:11 - Monorepos, yes or no?

    29:43 - As a brand new self-taught web developer, how would you know if you’re ready to apply for junior positions?

    32:03 - Will there ever be a .eat domain or are the pre-order sites just ripping you off? Would like to know who decides what TLDs are possible or not.

    35:26 - I’m currently employed as a fullstack developer but want to build a portfolio for future job hunting. Would you say it’s ok to reference a project or two from an employer? My problem is that the only projects I have outside are mostly just smaller tools built for myself for fun.

    39:29 - Should developers always use their real first and last name when presenting themselves as a professional online (e.g. Twitter, LinkedIn, Github, personal site). Or is it acceptable to use a fake last name for example? My wife is quite conscious about privacy online, so would prefer I retain some anonymity. But also, my last name is a bit generic, and not very Googleable. I thought having a more snappy and interesting name would help me stand out, and be easier to find with a quick Google. You guys both have awesome names that are very unique and are hard to forget.

    43:59 - How do you find time to work and keep up with updates and libraries etc. having a wife & kids?

    46:06 - I am a beginner in making course content. I am trying to create a programming tutorial, but every time I try to record some tutorials I have to compromise on audio quality. Lots of background noises get captured on audio. Can you both share some tips to make soundproofing room? What tricks do you both use?

    53:33 - As someone who recently learned/is learning how to build websites using express/node/react, with a little know how with Python and Django too, how do you start building a portfolio that isn’t just a bunch of practice/show-pieces? How do I get a client?

    59:53 - Should I be using multiple web apps on a single site or try to make them all one? If I have a site that displays blog posts about parks for example, then a page with all the parks listed out that link to a page about each single park’s details, should I be making the entire thing in one app? Or make a blog app and publish it, then make a different app for the other content and publish it using a subdomain?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Apr 07, 2021
    Hasty Treat - VSCode Extensions and Tips
    22:23

    In this Hasty Treat, Scott and Wes talk about their favorite VSCode extensions, tips, and workflows!

    .TECH - Sponsor

    .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.

    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

    04:05 - Easy Snippet

    05:33 - Add Missing Function Declaration

    07:30 - Error Lens

    09:08 - Declare Missing Members

    10:29 - ES7 React/Redux/GraphQL/React-Native Snippets

    11:59 - File Utils:

    13:59 - GitLens — Git supercharged

    15:15 - ES6-String-HTML

    16:41 - Wrap Console Log Simple

    17:18 - Text Pastry

    19:14 - Better Comments

    20:14 - Tip: Use Emmet everywhere

    Tweet us your tasty treats!

    Apr 05, 2021
    Servers with Matt from Caddy
    01:00:04

    In this episode of Syntax, Scott and Wes talk Matt Holt about Caddy, SSL, web servers, 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.

    Cloudinary - Sponsor

    Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

    Guests

    Show Notes

    02:08 - Who are you and what do you do?

    03:22 - Why would you want to build a web server?

    08:45 - How do SSL certs work?

    14:03 - Why do you even need a web server?

    23:03 - Is it better to have a web server serve your images?

    20:31 - What is load balancing and why might you need it?

    31:35 - Is server administration a lost art?

    38:03 - What is a sidecar proxy?

    38:50 - How do chron jobs work?

    39:50 - Why is GO so fast? Why is it good?

    46:32 - Should every website have an SSL certificate?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Mar 31, 2021
    Hasty Treat - What is the n+1 problem?
    20:06

    In this Hasty Treat, Scott and Wes talk about a common problem you’ll encounter in your development career — the n+1 problem.

    Hasura - Sponsor

    With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    05:00 - What is the n+1 problem?

    • The N+1 problem can happen in any language but is especially prevalent in GraphQL because it’s so easy to query relationships.

    09:33 - The solution

    • The solution to the n+1 problem is to batch the queries. As you loop over each podcast, keep an array of host IDs to lookup. Once you have looped over the podcasts, make a single query to the database with your large array of podcast host Ids.

    11:11 - Should you care?

    Tweet us your tasty treats!

    Mar 29, 2021
    Syntax Highlight (We Review Your Portfolio)
    01:00:49

    It’s another Syntax Highlight. In this episode, Scott and Wes take a look at portfolios and websites and evaluate them from the perspective of a hiring manager.

    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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Mux - Sponsor

    Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.

    Show Notes

    04:50 - https://shaquilhansford.com/

    • Not optimized for desktop
    • Lots of spacing issues overall
    • Too many accordions - could be lists in multiple columns
    • Social links could be in the footer
    • Twitter is on point - iwantyoutohire.me
    • Phone number on website is good

    11:31 - https://www.benlammers.dev/

    • Gimmy dat yellow
    • The design and polish is really good
    • Data URI images can overload CPU
    • Semantic headings, but HTML should use some work
      • Four H1s on the page
      • 20 H2s
      • 40 H3s
      • Main tag

    20:28 - https://www.zubairaziz.com/

    • Lots of empty space
    • Photo is key
    • Not sure what to do when I land on the page
    • Blog is nice, but two posts from May - add more or drop it
    • Portfolio is just enough
    • Nav animation should only happen on initial load

    29:39 - https://codebyfil.dev/

    • This is a great example of something that is good, but needs a bit of polish
    • Tone down the border radius
    • Tone down the box shadow
      • Border and drop shadow
    • Images aren’t links
    • Footer padding or space - contact is ridding the bottom
    • Scott’s HTML breakdown
      • Four H1s
      • Six H2s
      • Four H3s
      • 18 H4s
      • Five H5s

    37:39 - https://www.johngeorgesample.com/

    • Clean but maybe too clean
    • Nav is too distractingly too big
    • Need active link indicator in main nav
    • div div div div - take a look at those semantic HTML tags
      • No H1 or H2
      • HTML needs work brother
    • Use × instead of X
    • Asterisk doesn’t work on mobile

    46:52 - https://stordahl.dev/

    • Great images
    • Nice typography
    • Sign-up for newsletter is great
    • Store = A+
    • Scott’s HTML breakdown
      • Two H1s, one of which is just nice to meet you
      • Zero H2s
      • Articles should be articles
      • No section
    • 1px move on hover is nice - could use a transition

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Mar 24, 2021
    Hasty Treat - Effortless Custom GraphQL with GraphQL Codegen
    19:13

    In this Hasty Treat, Scott and Wes talk about GraphQL tooling, and specifically a couple tools we use that will change your experience with GraphQL.

    .TECH Domains - Sponsor

    .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.

    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

    03:38 - What is it?

    04:34 - What can it do?

    • Generate React hooks for any of the major player Apollo client (urql)
    • Types for the full stack — resolvers, mutations

    07:49 - How we use it

    • Generate a schema file to keep client and server in sync in mono repo
    • Creates all React Hooks
    • Generates all types for both resolvers, and anything client-side

    Links

    Tweet us your tasty treats!

    Mar 22, 2021
    How To Build Your Own Auth
    59:52

    In this episode of Syntax, Scott and Wes talk about building your own authentication — diving deep into JWT, sessions, tokens, cookies, local storage, CSRF, and how it all works!

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.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.com/syntax.

    Hasura - Sponsor

    With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.

    Show Notes

    01:51 - Overview

    05:13 - JWT

    • Base 64 encoded (not encrypted) token that contains data. We have both accessTokens and refreshTokens.
    • JWT has three parts:
      • Header
        • What kind of algo was used
      • Payload
        • Data about the user
        • Email
        • Username
        • UserID
        • refreshToken, authToken, sessionId
      • Signature
        • This ensures that no one monkeyed with the above parts. If you change your email in the payload, the signature is not invalid, because in order to generate the signature, it uses the header and payload as part of it.
    • accessToken
      • A short lived JWT that contains the sessionTokenuserId and expires after 90min.
    • refreshToken
      • A long lived JWT that contains just the sessionToken and doesn’t expire.
    • JWT can be decoded and read, but you have to encode them with your secret.
    • JWT can be stored anywhere, there are two main places:

    20:26 - Cookies

    • We use httpOnly, secure cookies to store the accessToken and the refreshToken. The accessToken is a session cookie and is removed whenever the browser is closed. The refreshToken is valid for 100 days but is also re-created and revalidated for 100 more days each time the accessToken is generated.
    • Because these are httpOnly cookies, they cannot be accessed by JavaScript in the client and can only be set and removed on the server.
    • Note: Safari has stricter rules than others for same domain cookies (e.g. localhost won’t work).

    34:26 - Sessions

    • Sessions are when a user logs in on a device. If you open a phone and log in and a computer and log in, those will create two different sessions. A session contains information about the user’s connection (like their IP) but it also contains the userId which allows us to create new accessTokens from a valid session.
    • Sessions can be valid or invalid. This allows us to log anyone out by setting their session to valid: false.
    • Sessions also have sessionToken which are generated on authentication or create account.

    38:10 - CORS

    • Cross-origin-resource-sharing
    • Can be super tricky to get working cross-domain
    • You usually have to actually visit the website for the cookie to be set, even with lax cors

    46:06 - CSRF

    48:47 - Authentication process

    52:13 - Helper Packages

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Mar 17, 2021
    Hasty Treat - Environmental Variables
    23:39

    In this Hasty Treat, Scott and Wes talk about environment variables — what they are, where you should keep them, 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.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    03:54 - What are they?

    • API Keys
    • Secrets
    • Database URLs
    • NODE_ENV

    06:16 - Type of env variables

    • Plain text
    • Encrypted
    • Frontend
    • Backend
    • .env files
      • .env is a good package for all langs
      • .env.local
    • Framework env variables
    • System env variables
    • Host-provided variables

    16:20 - Where should you keep them?

    17:34 - Other gotchas

    • Netlify Limit is 4096
    • Netlify needs a clear cache before it works
    • THING=yo node index.js
    • cross-env
    • NODE_OPTIONS="–inspect"
    • Require before run

    Links

    Tweet us your tasty treats!

    Mar 15, 2021
    Potluck — VSCode × Vercel vs Netlify × Models × Mutations × Multi-Vendor Platforms × Websites vs Web Apps × More!
    58:44

    It’s another potluck! In this episode, Scott and Wes answer your questions about VSCode, Vercel vs Netlify, staying up to date with dev concepts, models and mutations, websites vs seb apps, adaptive vs responsive design, 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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Vonage - Sponsor

    Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax.

    Show Notes

    02:10 - Sometimes in VSCode when intellisense tells us the TypeScript type of a variable, it just gives the name of the type rather than how the type is defined. This is annoying for objects as I want to know what fields it contains! How do you handle this? Is there some VSCode magic to make it show the full type definition or is there some way to bring up the definition in the .d.ts file?

    04:55 - What techniques do you guys use to keep different tech stack requirements fresh between projects?

    10:35 - How do you feel about Vercel vs. Netlify? Pros/cons? Thanks!

    18:32 - Should a model name be singular or plural?

    22:57 - I’ve just listened to the CSS Typography and Systems Hasty Treat, and realized that we often try to apply website design to web apps (me at least). Can you elaborate on the differences in designing for a website and for a web app?

    25:46 - What’s the difference between adaptive and responsive design?

    32:40 - Multi-vendor platforms? Have you done it before? A partner and I, are planning to build a peer-2-peer platform (similar to Etsy and Amazon, where users can register as a merchant or a buyer). What is the easiest way to make payment transactions (Stripe or PayPal)? Do you know any frameworks that will make my life easier?

    36:16 - Is there a golden rule for mutations? I’ve been using GraphQL for last couple of months, and everything is great as long as I’m just fetching data. When I need to write mutations, the story gets murky. Looking around internet, there are not too many best practices to be found - most of the articles and blogs focus on data fetching.

    42:19 - What do you think about the future of Svelte? I know they are replacing Sapper with SvelteKit, which uses Snowpack. What direction do you think Svelte will go in?

    45:32 - How can I get back into a habit of learning new things and stop heavily relying on video tutorials all the time? I really struggle to sit down and read for long periods of time. Also have you guys came across the Genesis framework, and if so, could you recommend any learning material? Thanks.

    48:54 - My team uses handlebars templates for generating newsletters. The content is coming from a CMS for generating final HTML. I’m fairly new to handlebars and mustache syntax, so instead of learning handlebars I’m thinking about using React to generate the html on server side. I see some great potential here as the entire team is well-versed with React. What is your opinion about this?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Mar 10, 2021
    Hasty Treat - Ask Us Anything!
    27:21

    In this Hasty Treat, Scott and Wes are doing an AMA — answering questions about self-employment, time-management, course creation, Clubhouse, and more!

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.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.com/syntax.

    Show Notes

    03:41 - What do you miss about NOT being self-employed? What are some UNEXPECTED perks of being self-employed?

    05:47 - Hypothetically, what would a LinkedIn recruiter need to say to pull you away from your current development work, and possibly even the podcast?

    09:08 - What percentage of your time do you guys spend doing work for clients vs your own courses/projects?

    10:04 - Do you still do most of your work yourself, or do you outsource some parts of it? (work can be anything related to your business, not just making the courses)

    12:48 - Could you all talk about protected/private routes in Next.js? I’m coming from create react app type routing.

    16:07 - What would be doing for a living if not a developer?

    17:50 - What do you think about Clubhouse? Are you guys planning to talk over there some time?

    24:18 - Vue or React? Which do you think will be the top? And should developers learn both?

    Links

    Tweet us your tasty treats!

    Mar 08, 2021
    Syntax Desk Setups
    01:05:22

    In this episode of Syntax, Scott and Wes talk about their desk setups and how they’ve evolved, both as coders and video and course creators.

    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.com/syntax.

    Hasura - Sponsor

    With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.

    Show Notes

    03:36 - Desk

    • Scott
      • Ikea countertop on Jarvis Legs.
        • Four presets - sit, stand, horse stance, lunge
    • Wes
      • 8" Ikea Butcher Block countertop on legs
      • LackRack on wheels underneath
      • Desk at cottage is Maple Live Edge Slab on Hairpin Legs

    09:01 - Chair

    15:39 - Display

    22:49 - Headphones

    • Scott
    • Wes
      • QC35s w/ Wicked Cushions - wish they charged over Wireless

    24:58 - Mouse + Keyboard

    29:18 - Laptop

    33:43 - Dock + Connecting it all together

    41:36 - Camera + Capture

    44:11 - Microphone + Capture

    49:06 - Lighting

    55:22 - Storage / Backup / Home Server

    57:50 - Other / Wish list

    Links

    Shameless Plugs

    Tweet us your tasty treats!

    Mar 03, 2021
    Hasty Treat - Hireable Skills for 2021
    25:59

    In this Hasty Treat, Scott and Wes talk about hireable skills or 2021 — what you need to know to get a job and grow in your career this year!

    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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    04:17 - Code in general

    • Clean, commented, organized
    • Take the extra hour before an application and polish it

    06:10 - JS

    • Basics of the language - storing data in Arrays and Objects
    • Looping and flow control
    • Array methods
    • Promises + async await
    • DOM basics - select an element, listen for clicks, update elements
    • Node basics
      • Most of your JS basics apply here
      • Read Files, write files
      • Fetch data and return it

    08:38 - CSS

    • Attention to detail - pixel-perfect replication of designs
    • Works well on mobile
    • No reliance on libraries - complete reliance on Bootstrap or Tailwind is a red flag. If you use these things, explain clearly why they are useful to you (e.g. augment your skills, not relied on).

    12:54 - Real-world libraries

    • One of the following: React, Vue, Angular
    • Node.js - sending Server data as a response
      • JSON
      • Express, Next.js
    • Popular helper libs
      • Date functions / Moment (Moment is old but its still 2x more popular)
      • Lodash
    • CSS
      • Scoped CSS
      • Pattern libraries

    17:15 - What about data structures and algorithms?

    20:26 - Soft skills

    • Know how to talk to PMs and other devs.
    • Know how to stay on top of timelines and schedules while communicating.
    • You won’t last long in any work environment where you aren’t able to fit in.
    • Many devs sometimes get a big head about doing tech - this is not something you want to emulate. Ignore any kind of internal “us vs them” attitude. It’s about the big picture and you’ll go further.
    • Write good, short, emails that don’t sound like you are mad.

    Links

    Tweet us your tasty treats!

    Mar 01, 2021
    React Query + More React with Tanner Linsley
    01:05:25

    In this episode of Syntax, Scott and Wes talk with Tanner Linsley about React Query, how it works, why you might want to use it, and more!

    Deque - Sponsor

    Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Mux - Sponsor

    Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.

    Guests

    Show Notes

    01:56 - What do you do?

    06:04 - What is React Query?

    24:19 - How does React Query use dev tools?

    31:20 - What about React Context?

    36:59 - Server-rendered components?

    42:40 - Thoughts on static sites?

    50:38 - What is the stack?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Feb 24, 2021
    Hasty Treat - The Future of Testing with Cypress
    20:04

    In this Hasty Treat, Scott and Wes talk about the future of testing with Cypress — what it is, how to use it, and more!

    Deque - Sponsor

    Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe.

    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

    03:55 - What Is Cypress?

    • A visual testing studio that uses a jQuery-like syntax to test your application in browser.
    • Very modern testing solution.

    07:36 - Used to be only Chrome

    • Now available for Safari, Firefox, Edge, etc.

    ??? - What frameworks is it for?

    • Literally anything that runs on a URL in the browser. Cypress just looks at a URL, executes the commands and then checks the results.
    • Can also run on ci/cd via a headless mode.
    • React component testing is experimental.

    10:58 - Automation

    • Cypress studio new feature that writes tests for you.

    12:37 - Data

    • Intercept + Fixtures or through plugins

    15:01 - Cost?

    • It’s free!
    • There is a paid product called Cypress Dashboard that allows you to record tests long-term.

    Links

    Tweet us your tasty treats!

    Feb 22, 2021
    Potluck — Do titles matter? × Should clients pay for plugins? × Can I debug my baby? × How we prepare for Syntax × Deno × Learning things quickly × More!
    57:00

    It’s another potluck! In this episode, Scott and Wes answer your questions about job titles, clients and freelancing, debugging, the creative process behind the Syntax podcast, Deno, how to learn things quickly, and more!

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.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.com/syntax.

    Cloudinary - Sponsor

    Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

    Show Notes

    01:17 - Do either of you have a pattern that you follow for rolling back Promise.all rejections? I am looking for an elegant way of reversing any promises that may have resolved before one was rejected. For instance, any db writes or 3rd-party webhooks that were created during the sign-up flow, but then need to be removed if one of the promises was rejected.

    04:51 - I’ve been doing a bunch of client projects lately that use Gatsby with the WordPress API. I have the clients set up a hosting service for WordPress and a Netlify account connected to a GitHub repo on my account for Gatsby. What I’m struggling with is the idea of having to keep these repos on my GitHub account for as long as these sites are live. But it doesn’t seem all that sensible to have these non-technical clients also set up their own GitHub account that they grant me access to for building these projects. Do you have any suggestions?

    08:45 - Hey guys! Been listening to the podcast since I was starting out and it has been super helpful, entertaining, and hilarious. Two-part question. First, when would you consider a dev “full-stack”? I work for a small company that does WordPress, GraphQL, Node, React, TypeScript…lots of variety. I was hired as a front-end dev, but have since done work in PHP and Node, and even my boss has assured me I do full-stack work. However, I am not being paid as a full-stack dev. Can’t figure out if this is because I work part-time (I have a baby) or some other reason. Should I be asking for a raise as a part-time employee?

    12:43 - When working freelance for a client, and you need to purchase something, for example the CPT UI plugin or something like WP Migrate DB Pro to help you build the site, do you either pay for it yourself and add it to the clients invoice at the end? Or do you ask them to pay for it when you need it? So many small “gotchas” I’m needing to get over!

    18:02 - I just had a baby girl 4 months ago. When she is crying I sometimes catch myself trying to debug her to find out what is wrong. My wife thinks I am weird, but I guess I am just in the habit of trying to fix problems. Have you ever experienced this?

    22:17 - How do you prepare for the Monday and Wednesday podcast? What is it like, and what is the creative process behind it?

    29:03 - How would one go about using JavaScript to load all images from a folder in order to render them dynamically on a page? I looked around and only see answers using jQuery and PHP. In the end I want my client to be able to drop images into (or remove them from) the images folder and the site would just populate the image slider with all the images. Is this problem solvable with JavaScript, or is it time to learn something new?

    35:26 - I have a side project with a Node backend that sends out reminders to signed-up users about various deadlines that they opt-in to. It started out pretty small but as the user base is now in the thousands, I’m worried that my reminder send functionality won’t be able to keep up with the increasing volume. It’s basically just a daily CRON job that loops through users and finds the different notifications to send out - either through Twilio or Postmark. Is there a more efficient way to perform large CRON jobs such as this? Curious how each of you guys would tackle this problem.

    42:29 - Hey guys, great overview episode on Deno (ep 322). This got me thinking, again, of the proliferation of tools and technologies in our industry and ecosystems. Say we’ve already “identified” the technology or tool and now we need to get familiar. As course designers constantly exploring new tools and technologies, what are some ways you can most efficiently and productively grasp actionable understanding (i.e. shortest route to Neo’s “I know kung-fu”)? And can you share any “hacks” or “pro-tips” that can help surmount that initial learning curve and tech-stack fatigue?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Feb 17, 2021
    Hasty Treat - TypeScript Compilers and Build Tools
    22:29

    In this Hasty Treat, Scott and Wes talk about the differences between compilers and build tools in TypeScript.

    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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    03:38 - What is a TypeScript compiler?

    07:49 - Babel

    • Transpiler
    • It doesn’t do typechecking
    • New JS features that aren’t in TypeScript yet

    10:22 - SWC

    13:03 - Deno

    13:36 - Surcase

    14:46 - ESBuild

    • Compiles, but doesn’t do any type checking
    • Fastest

    17:39 - What about bundlers?

    • Parcel
    • Snowpack
    • Webpack
    • ESBuild
    • When might you still need a bundler?
      • To handle different types of files that are non-standard
        • Like importing CSS and images
    • Treeshaking
    • Smaller bundle files
      • Typescript can concatenate to a single file, or all .js files, but smaller / smarter bundles still need a tool for that
    • Polyfills
      • Typescript does convert to syntax, but will not polyfill features
      • Something like Promise
        • Syntax can be transpiled to old code
        • Methods like allSettled aren’t

    Links

    Tweet us your tasty treats!

    Feb 15, 2021
    We Review Resumes, Websites, and Online Presence
    01:07:39

    In this episode of Syntax, Scott and Wes review resumes, websites, and online presences, and discuss pros and cons, what you should focus on, 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.

    Linode - Sponsor

    Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    04:32 - Why does an impression matter?

    • All of this stuff comes together to work in your favour when you are hunting for a job.

    05:14 - What goes into an online presence?

    • Twitter
      • Share what you know
    • Online website
      • Design
      • Messaging
      • Effort
      • Personal life
    • Blog
    • Resume
    • It’s not about being popular, it’s about relationships and positioning yourself as an expert. People mix up their hatred for “influencers” with having a rock solid network of people who they can help and who can help them.

    07:25 - A couple stories

    • @HenriHelvetica
      • You don’t know how many times I’ve tried to convince (esp people of color) to try a lightning talk. This stuff gets you to research, and you might even make discoveries.
      • I know it’s a step out of the comfort zone for many, and that’s cool, but don’t be upset at those who go for it, and land some work.
      • I do (did) lunch n learns @ Juno, and I started to end them w/ a post bootcamp life — tell them what it’s like, and to be active on twitter (share what you read, what you’re working on, listen to others, follow great devs, etc.). One person DM’d me to tell me she took that in and decided to try. “I never forgot that time you gave a talk at HY and one thing that you emphasized was to make your voice known on Twitter. You said that this has opened many opportunities for you and that’s been happening to me more and more recently. I never set out to build my account but the growth has indeed happened and along with it, opportunities from people I’ve never expected.”

    09:40 - Ash Connolly

    • https://ashconnolly.com/
      https://www.notion.so/ashconnolly/Ash-Connolly-321c5a65350f477897ed025f4daa1bb0
    • Software Engineer
    • Using new tech with high end clients
    • Review
      • Pros
        • Clean, simple design, but doesn’t feel like it’s missing something
        • Animations are a nice touch
        • Easy to see their work (e.g. photo, title, short paragraph, link)
        • Testimonials is good, I might change the word testimonials, but that’s small
      • Cons
        • Nitpick - footer emphasis color looks like a link
        • HTML is good, but missing some semantic tags like
          ,
          ,
          , too reliant on divs
      • Resume
        • Pros
          • Good idea of what Ash has accomplished (e.g. just by reading his summary, I’m left feeling impressed because of his client base and his extras like writing for FreeCodeCamp and Marvel Blog).
          • Work history - good way of describing what he did. “Carried out performance audits and site speed improvements”
          • Links to writings and side projects
        • Cons
          • Lists Brad Frost as someone who shared his post. This feels a little weird.
          • Nitpick - CSS & CSS3, HTML & HTML5 on the languages. In 2021, just put HTML & CSS.
          • Work history - WAY way too much. Keep it to one sentence and three or four bullet points for each job. Ain’t nobody gonna read all that.

    20:48 - Matthew Bidwell

    • https://matty.dev/
    • Backend dev
    • Not focused on dev
    • Review:
      • Banging domain
      • It’s clear who he is, what he is about
      • Links to Twitter, Github and LinkedIn right away
      • Blog posts showing he knows what he’s talking about

    24:42 - Leah Lundqvist

    • https://leah.link
    • Review:
      • Pros
        • Fantastic aesthetics on site
        • Good lead paragraph
      • Cons
        • I’m not sure what work she actually does
        • Github pages are great for digging but not curation or showing off
          • Same with Twitter
        • For instance, I saw on Twitter that Leah made https://app.airport.community/app/rec1CbVg4J5aqScUQ but there was no mention of it anywhere else. A page full of the most recent / best projects with quick links is essential for anyone.
        • Don’t make them hunt for it
      • Twitter review:
        • Unreal
        • Pinned tweet

    31:04 - Ismail Ghallou

    40:18 - Jhey Tompkins

    46:28 - Wes’ website

    • websos.com
    • Can’t view source
    • Whimsey
    • The right kind of animation
    • The link to the Syntax podcast has no indication that it’s going to take you offsite.
    • The background image is good, but not as good with a wide browser.
    • Custom scrollbars are nice
    • Overall the site is a delight

    53:25 - Scott’s website

    • scotttolinski.com
    • Font’s a little big
    • Link to documentary is great
    • Bio should include links
    • Page animations are great
    • Showing personal life / interests is good
    • Super fast

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Feb 10, 2021
    Hasty Treat - Keyboard Events Are Surprisingly Interesting
    22:26

    In this Hasty Treat, Scott and Wes talk about keyboard events and some of the fascinating things you can do with them!

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.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.com/syntax.

    Show Notes

    03:04 - The Events

    08:02 - Event meta data

      "key": "c",  "keyCode": 67,  "which": 67,  "code": "KeyC",  "location": 0,  "altKey": false,  "ctrlKey": false,  "metaKey": true,  "shiftKey": false  
    • Others:
      • .locale
      • .repeat

    16:46 - Media keys

    18:32 - When might you use key codes?

    • Space bar to stop a video on a page
    • Building a game
    • Making a web app feel more like an app

    Links

    Tweet us your tasty treats!

    Feb 08, 2021
    TypeScript Fundamentals
    58:31

    In this episode of Syntax, Scott and Wes talk about TypeScript fundamentals — what it is, how you use it, why people love it so much, 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.com/syntax.

    Cloudinary - Sponsor

    Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

    Show Notes

    What is TypeScript?

    03:12 - Types?

    • What are types and why should you care?
    • JS is a typed language, it’s just not strongly typed
      • JS does not care about reassignment of a variable to a new type
      • Does not care about your types, but they do exist

    06:34 - The Fundamentals

    • You write your JavaScript code, but each time you create a variable, function, parameter, you “type it” — which means you describe what that data will look like.
      • Create a variable: Will it be a string? A number? A custom type of show?
      • Create a function: What params does it take? What type are they? What does it return?
    • Types allow your code to know if there are type errors that would present themselves to the user silently. These are small errors that can be compounded and go unnoticed.
      • This can allow you to prevent shipping code that has these errors by checking your code.
      • Some of the biggest benefits here come via errors in your text editor

    13:30 - Explaining the types

    • You can create your own types
    • Strings
    • Numbers
      • We only have numbers in TS, no floats/ints
      • We do have BigInt though, but not something most people will use
    • Arrays
      • Will be a list of another type
    • Unions
      • This type will be one of the possible options
      • String of DRAFT PUBLISHED or ARCHIVED
    • Intersections
      • An intersection type combines multiple types into one
    • Objects
      • These are custom types where each property is its own type
    • Any
      • Explicit any
      • Implicit any
    • Language types
      • These things are technically just Objects, but they have their own types
      • Dates
      • Timeouts
      • DOM Elements / Nodes
    • Void
      • When a function returns nothing — usually used with side effects like click handlers
    • Enum
      • A set of named constants
        • Used when you have a select amount of values — I like to think of these as the select lists of TS
        • String unions are also used for this same thing

    30:28 - Inference

    • Automatic detection of types
    • Typescript will try to infer your types based on their definition
    • Not every type can be inferred, leading to implicit anys and the need for explicit types

    33:25 - Getting types

    • Most popular packages already have types — you install them like npm i @types/whatever
    • If a package doesn’t have types, you have to create them yourself, which can be annoying
      • MakeTypes
      • Console log a JSON.stringify(obj), and pipe it in
    • Node has types
    • Vanilla JS has types, for the language and all of the DOM - HTMLInputElement
    • React has types
    • Typing Node modules that don’t have types

    Overall benefits

    40:39 - Type hinting

    • With TS and your editor (VSCode) you’ll get more information about your code as you type it — allowing you to know exactly what things expect
      • This seems like a small deal but in practice leads to being much more efficient

    42:50 - Refactoring

    • Rename a function, type, or variable and it will be updated everywhere in the project!
    • Moving a function to a new file is actually part of TypeScript
    • Drag + Drop file, update imports

    48:10 - Compiling

    • TSC vs Babel / Esbuild
    • Only TSC type checks
    • Compiling TS with babel will not allow you to break the build on type errors, you’ll need to run TSC in coordination or in the CI/CD

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    • Scott: ESM & Snowpack - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

    Tweet us your tasty treats!

    Feb 03, 2021
    Hasty Treat - New Level Up Tutorials Site
    25:52

    In this Hasty Treat, Scott and Wes talk about the new Level Up Tutorials website — some of the new tech powering the site, behind-the-scenes decisions, previous iterations, 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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    02:55 - Previous iterations

    05:30 - Big choices

    • No Babel up and down the stack
    • UI
      • Mostly unchanged — React + Styled Components + SCSS
        • Moving more to SCSS, CSS vars
        • Build and dev done via Snowpack
          • 50ms hot reloadin’
          • Mega fast development workflow has been a huge plus
          • Errors in the UI via Snowpack
          • Wrote a custom GraphQL importer plugin
    • API
    • Codegen
      • GraphQL code gen to create everything we need for a fully typed codebase
      • Auto-generated React Hooks
    • Hosting
    • CLI
      • Custom avalanche CLI that removes the guesswork and makes bulk operations easy
    • Caddy server for easy leveluptutorials.dev in local environments
    • Testing

    Links

    Tweet us your tasty treats!

    Feb 01, 2021
    The Deno Show
    59:49

    In this episode of Syntax, Scott and Wes bring you the long-awaited Deno show — what it is, what it replaces, how you can use it, and more!

    Deque - Sponsor

    Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Mux - Sponsor

    Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.

    Show Notes

    02:13 - What is it?

    • A secure runtime for JavaScript and TypeScript
    • Built by Ryan Dhal — same guy who initially built Node.js
    • API is JS or TS out of the box

    04:55 - Does it replace / what is it in relation to?

    • Node
      • It’s a replacement for Node.js
    • Express
      • Web Server Frameworks like Express will run on Deno, but Express itself won’t currently run because they are build on Node APIs
      • https://github.com/oakserver/oak
    • Serverless
    • React / Vue / Svelte
      • These things are just JavaScript, so they should/will work in Deno. Deno will replace your tooling. More involved things like Next.js that require Node APIs won’t work until.
      • https://alephjs.org/
    • SSR
      • It comes with all browser APIs out of the box!
    • Fetch
      • Window + Add Event listener
    • Webpack / Parcel / Snowpack
      • Deno is a bundler
    • Prettier
      • Deno is a formatter
    • TSC
      • Deno is a TypeScript compiler and runtime
    • ESLint
      • Deno is a linter
    • Jest
      • Deno is a Test Runner
    • NPM
      • Deno is a package manager - it pulls in packages from URLs

    14:51 - Modules

    • ES modules from the start
    • Modules are loaded from URLs
    • Why? No package registry to worry about
    • This is how the browser works
    • Import from URL
    • You can also specify it in the json file
    • https://github.com/oakserver/oak/blob/main/deps.ts
    • https://deno.land/
    • Fetch is built in!
      • It’s a browser API, but who cares?!
    • Browser APIs
      • window.add event Listener
      • Deno is event based, like the browser

    20:10 - A nice standard library

    22:14 - WASM

    • Deno can run WASM with the same APIs that the browsers can
    • Node is doing this too (experimental)

    25:06 - Multi-threading with Web Workers

    26:13 - Speed

    29:44 - Security

    33:39 - Run from anywhere

    37:43 - Async out of the box

    • Everything is based on async + await / promises right away. No callback APIs, no promise wrapping.
    • Top level await

    38:53 - Node Compatibility

    • Node APIs are being filled
    • This means if a browser package ships an ES module of a package, we can just import it

    42:21 - What we’ve built

    46:54 - Hosting

    48:29 - Final thoughts

    • Scott: Now is a great time to learn, but don’t put any crucial work into that space unless you are ready to write everything. Libraries are still being written and evolved. Docs are still sparse. Many things didn’t work on first try. I had to read lots of source.
    • Wes: If You know JS or TS, you are already 90% there.
      • The package ecosystem isn’t there yet
      • Battle-tested

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Jan 27, 2021
    Hasty Treat - The New AVIF Image Format Is Unreal
    20:38

    In this Hasty Treat, Scott and Wes talk about AVIF — what it is and how you might use it!

    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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    03:10 - What is AVIF?

    • AVIF is derived from the keyframes of an AV1 video
    • Royalty free (big deal)
    • What about WebP?
    • Basically half the file size of a WebP for free, which was already about half the size of a jpeg
    • It’s a lossy format — ie it inherently will degrade the image
    • https://jakearchibald.com/2020/avif-has-landed/
    • No animation

    10:53 - How to implement

    Tweet us your tasty treats!

    Jan 25, 2021
    Potluck — $100k Dev Jobs × Sponsored Blog Posts × How To Keep Your Skills Up To Date × Libraries vs Custom × Dev Tools × More!
    01:04:03

    It’s another potluck! In this episode, Scott and Wes answer your questions about VS Code, JavaScript, $100k-per-year dev jobs, sponsored blog posts, how to use dev tools, how to keep your skills up to date, and more!

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.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.com/syntax.

    Linode - Sponsor

    Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

    Show Notes

    02:01 - Not so much a question as me saying thanks! I started web dev as a bartender/college dropout in 2017 when Syntax was pretty new. I rarely miss an episode, and this year I’m starting my first >$100k JS job! Your show has always been fun, kept my attention in the realm of web dev, and helped guide my interest — I think it has been extremely valuable to my career so far, and I look forward to more.

    04:10 - How do I know when to pull in a package rather than write similar functionality myself? And is there a rule for when enough is enough, in terms of having too many packages? What I’m most concerned about is bundle size. It doesn’t seem to take a lot of packages before Webpack notifies you about large bundle sizes, so what would be best practice?

    11:27 - What is your opinion of doing a sponsored post or guest post on your own site? And if you’re in favor, what sorts of terms, payment, etc. would you outline or charge for it?

    18:20 - Do you have/know of any resources for those that want to learn more about selling digital products through e-commerce? The sources I’ve found (Scott’s e-commerce/Gatsby courses & Next.js commerce demo page) focus more on creating stores that sell physical products. Are there any gotchas when selling digital vs physical?

    22:10 - Do you have any tips for keeping your skills up to date while taking a break from work? I’m a frontend dev currently six months into my year-long maternity leave and I feel like my brain has turned to soup. I listen to podcasts and read blog posts but it never feels like enough. Time and energy are very limited for me to work on personal projects!

    25:11 - I remember you guys saying something about making your own UI component libraries. Do you use some CSS libraries like Tailwind or even Bootstrap or others for this, or do you write your Sass/CSS from scratch?

    30:52 - Would be interested to hear some of the common ways you use dev tools (chrome dev tools, react dev tools, redux, etc.). I feel like there is a lot of information in there that I am not utilizing properly to help figure out problems during development. Would be cool to hear an overview of how you use the different tabs, some of the most commons things to look for, etc.

    35:20 - I am graduating from a bootcamp next month and I feel severe insecurities/imposter syndrome. For whatever reason, I freeze up when it comes to coming up with code or writing things myself, mainly in JS. When in class, watching tutorials, following along, or viewing other people's code, I can tell you exactly what is going on, why it is being done, and I can change and add things and explain them. But when it comes to starting from a blank slate, I freeze, as if everything I know about programming has gone out the window. Do you have any advice as to how to get past this hurdle? I feel like at this point I shouldn’t be feeling like this, but maybe this is normal?

    40:36 - Do you think developers have a responsibility to help reduce CO2 emissions caused by the web? A BBC news article stated that “HD video streaming on a phone generates about eight times more in emissions than standard definition (SD)” and noted that on a small screen, the viewer might not even notice the difference. Should the developer limit the resolution available to mobile devices, or should they let the end user choose?

    47:53 - I was hoping that you guys could give me, and other listeners, advice on “knowing when you’ve bitten off more than you can chew”? Often I’ll be working on a project for fun, or possibly building out my portfolio, and I’ll continue to get excited about features that I’d like to add to my current app or what have you. At first glance, the ideas or features seemed reasonable enough to tackle, but hours later, I’ll find myself stuck, realizing that I’m in over my head, as I’ve tried to take on something that I’m not yet experienced enough to work with, or I’m lacking the man-power to complete it in a timely manner. At the same time, I want to challenge myself so that I can grow, but sometimes I feel that I’m not using my time wisely. So my question to you is, where is the line between challenging ourselves to take on new and difficult tasks and scaling back our current work to make it more approachable and less overwhelming?

    55:01 - What is the right use-case for a database, and what is the right use-case for a headless CMS? Is a headless CMS just a database + a user-friendly way of entering data into that database? Is there a secure way of querying Sanity directly from the frontend if I have data that I want to be only available to logged-in users?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    • Scott: All Courses - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

    Tweet us your tasty treats!

    Jan 20, 2021
    Hasty Treat - CSS Typography and Systems
    26:03

    In this Hasty Treat, Scott and Wes talk about CSS typography, and how to quickly get up and running with type systems.

    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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    05:00 - How do you define type at the start of a new project?

    15:03 - How do media queries and screen sizes affect your system?

    16:58 - Why are systems in type important?

    20:21 - How do you design a type system?

    • Scott’s type system:
     /* Font Sizes */   --baseFontSize: 1rem;   --baseNavSize: 0.64rem;   --smallFontSize: 0.8rem;   --smallestFontSize: 0.512rem;    --xtra-big-ass-heading: 3.052rem;   --xtra-heading: 2.441rem;   --heading-1: 1.953rem;   --heading-2: 1.563rem;   --heading-3: 1.25rem;   --heading-4: var(--baseFontSize);   --heading-5: var(--smallFontSize);   --heading-6: 0.64rem;   --heading-7: var(--smallestFontSize);  

    Links

    Tweet us your tasty treats!

    Jan 18, 2021
    Reactathon LIVE
    48:56

    In this episode of Syntax, Scott and Wes are coming at you live from Reactathon with audience-favorite segments including All I Want for Christmas in React, JS or Nay-s (or Both), Overrated / Underrated, Hot Take Tweets, Listener Questions, 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.

    Magic Bell - Sponsor

    MagicBell, the embeddable notification inbox - magicbell.io. Use the coupon code SYNTAX to get a 20% discount if you sign up in the next two weeks.

    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

    04:17 - All I Want for Christmas in React is:

    • Suspense for data fetching
    • On mount animations
      • Unmount for me
    • Single file components
    • preventDefault shortcut
    • Input to state mapping

    09:45 - JS or Nay-s (or Both)

    • Shout out to Pigeonhole
    • Graphene - 1) Carbon atoms organized in a hexagonal lattice, or 2) An opinionated Python library for building GraphQL Libraries in Python?
    • Floodlight - 1) A super simple syntax highlighter for XHTML documents, or 2) a large light used to illuminate dark outdoor spaces?
    • Toy Machine - 1) An early 2000s skate brand, or 2) A Vue-based GUI for creating state machines?
    • Joplin - 1) A free, open-source note taking and to-do application based on markdown, or 2) A city in the northwestern corner of Missouri?
    • Noco - 1) A JavaScript library that connects to No Code tools including bubble.io, or 2) A smart car battery maintainer & charger?
    • Innr - 1) A smart lightbulb, or 2) A CSS in JS library for selecting parent selectors?
    • Cabkoma Strand - 1) A thermoplastic carbon fiber composite rod used in modern buildings, or 2) A Redux-like state management library for Svelte?
    • Sputnik V - 1) Code name for the upcoming WordPress release with built-in headless CMS mode, or 2) A non-replicating viral vector COVID-19 vaccine?

    18:44 - Overrated / Underrated

    27:49 - Hot Take Tweets

    34:34 - Listener Questions

    • Q: If you recently started doing web dev work, which career path would you choose - startup, FANG, or freelance?
    • Q: TypeScript all the things?
    • Q: What do you do to keep up with the latest and greatest changes in tech - front-end libraries, new languages, etc.?
    • Q: Can you share some exclusive BBQ tips?
    • Q: What do you expect of Blitz.js in the next few years?
    • Q: What’s the first node module you install in a brand new React project besides React itself?
    • Q: Thoughts on using languages other than JS and TS with React like Kotlin?
    • Q: Do you have an approach for optimizing hi-res images that are stored in your back-end, like S3 for your Gatsby website?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    • Scott: All Courses - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

    Tweet us your tasty treats!

    Jan 13, 2021
    Hasty Treat - A Podcast About Nothing
    15:01

    In this Hasty Treat, Scott and Wes talk about nothing — null, undefined, void, false, 0, ‘’, NaN, [], {}, never — all sorts of values that could mean the things that do not exist.

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.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.com/syntax.

    Show Notes

    03:35 - Undefined

    • Implicitly nothing
    • A variable declared, but not set is undefined

    04:25 - Null

    • Explicitly nothing

    04:41 - Null vs Undefined

    • Null has a value of nothing
    • Undefined does not have a value
    • You can set variables to either
      • If you want to set a score variable to nothing, set it to null
      • If you want to un-set a value, set it to undefined
      • == will check if a value is either null or undefined

    05:35 - Void

    • In Javascript
      • You can pop void in front of calling a function and it will return undefined (even if that function returns a value)
      • I’ve seen it on links that go nowhere (don’t do this — use a button)
      • To prevent an arrow function from leaking
      • onSubmit="javascript:void()" is a quick-n-easy prevent default on forms
    • In Typescript
      • Void is when you don’t care about what is returned from a function, or if nothing is returned
      • A click handler that goes off and does stuff (side effect) can return void

    09:15 - Never (in Typescript)

    • Some functions will never return:
      • Functions that throw errors
      • Functions that have infinite loops
      • Also, unreachable variables have a type of never
        • if(true == false) { let var = 'this will never be true'; }

    11:05 - Falsy values

    • 0, -0, 0n
    • false
    • ‘’ (empty string)
    • Empty array
      • Is a value
      • Its .length can be falsy
    • Empty object
      • Is a value
      • Its object.keys(object) length can be falsy (0)

    Tweet us your tasty treats!

    Jan 11, 2021
    2021 Predictions
    54:08

    In this episode of Syntax, Scott and Wes talk about their predictions for 2021!

    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.com/syntax.

    Linode - Sponsor

    Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

    Show Notes

    02:06 - ESM

    • Scott: It’s going to be big
    • Wes: Everything going forward should be ESM

    05:44 - Wes: Remote work will grow

    • Whole new talent pool opens up
    • Whole new living situations open up

    08:23 - Scott: Deno will grow

    11:12 - Wes: Tooling will fade away

    14:14 - Scott: Greater usage of other languages to build Javascript

    19:35 - Wes: Programming communities will gain traction

    23:25 - Scott: More WASM

    27:19 - Typescript

    • Wes: Typescript will become more popular
    • Scott: Tooling will get better

    29:37 - React

    • Scott:
      • Scoped CSS in React will evolve
      • SSR and hydration will be better
    • Wes:
      • People will fall out of love with React
      • Or more magic will get added to React

    32:52 - Scott: More web component frameworks

    33:17 - Scott: Markdown and mdx-like frameworks will skyrocket in use

    33:59 - Wes: Gatsby

    35:24 - Scott: AR tech will grow

    36:38 - Wes: AI will become accessible

    38:43 - VS Code

    • Scott:
      • It will continue dominating
      • Cloud and shared coding env will become better
      • Figma
    • Wes:

    40:18 - CSS

    42:39 - Serverless

    • Scott:
      • Ease of use will get better and better
    • Wes:

    45:30 - Wes: Enterprise Jamstack will become a thing

    46:30 - PWAs might become more popular

    • Apple will never want you to go around the app store

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Jan 06, 2021
    Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management
    26:49

    In this Hasty Treat, Scott and Wes talk about keyboard shortcuts, window management, and how to stay productive.

    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

    03:54 - Karabiner-Elements

    06:11 - Better Touch Tool

    13:55 - ScreenFlow

    17:52 - VS Code Shortcuts

    21:20 - Text Expander

    23:00 - Clipy

    Links

    Tweet us your tasty treats!

    Jan 04, 2021
    2020 In Review
    01:06:48

    In this episode of Syntax, Scott and Wes talk about 2020 in review — predictions, hits and misses, hot tech, what they worked on, 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

    01:43 - Predictions from 2020

    • CSS Subgrid
    • CSS Houdini
    • CSS features not supported in older browsers yet
      • Scrollsnap - IE 11 and up. Lot’s of mobile issues.
      • position:sticky - no IE at all
    • NPM tink
      • Installer-less npm
      • Load packages at runtime into a shared cache across all projects
      • Intelligently download the parts you need
    • Yarn PnP / Yarn 2
      • Hard links to eliminate package duplication
      • Shared cache across all projects
    • Pika & Snowpack
    • Deno
    • React
      • Suspense in more libraries
      • Suspense for Server Rendering
    • Meteor
      • New ownership. v1.9 just dropped with lots of promise for future growth
    • Svelte 3
    • Vue 3
    • Apollo
      • 3.0 came out
      • Fine grain cache control
      • Hooks API
      • Custom logic over how things are read and merged
      • New dev tools
    • Next.js
      • 10.0 came out
      • Images!
    • Gatsby
      • A single useQuery (made possible by suspense)
    • Serverless
      • Going to get easier
      • Begin
      • Next.js / Now Functions
    • Headless CMS Thunderdome
    • Cypress
      • End to end testing
      • We got Firefox support in 2020
    • Modulz
    • Exports to JS component
    • Figma
      • Was already amazing in 2019
      • Constantly improving and adding new features
      • Can import from Sketch
      • Auto Layout
    • Spline

    42:24 - What other tech was hot in 2020?

    52:53 - Working from home

    57:13 - Code libraries

    59:25 - Personal / Professional updates

    • Hard year for productivity
    • Published more than 100 episodes of Syntax

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    • Scott: All Courses - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

    Tweet us your tasty treats!

    Dec 30, 2020
    Hasty Treat - Hosting + Web Services Pricing Explainer
    26:40

    In this Hasty Treat, Scott and Wes talk about how hosting and web services pricing works, and how to figure out what you need, and what you don’t.

    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

    01:55 - Per minute

    • Spin up, do the work, spin down
    • Popular in serverless space
    • Can apply to other types of computing such as graphics, AI, machine learning, etc.

    03:49 - By resources

    • Ram
    • CPU
    • Disk space

    06:02 - Per “dyno”

    • These are Heroku Linux servers
    • You can add more dynos and make your app faster
    • They scale it for you

    08:54 - By bandwidth

    • Sitting files
    • Inbound (ingress)
    • Output

    12:24 - By DB calls or entries

    • Databases

    14:04 - By users

    • This is more of a Sass thing, but can bleed into hosting too
    • Seat-based - Netlify does something like this

    17:23 - By apps

    • Digital Ocean app platform
    • Each app is $5

    21:22 - By “work”

    • Cloudinary does transforms on images
    • Mux

    Links

    Tweet us your tasty treats!

    Dec 28, 2020
    Potluck — New Macs × Podcast Statistics × E-commerce Testing × WordPress × Charging More × Learning Web Dev × More!
    01:05:46

    It’s another potluck! In this episode, Scott and Wes answer your questions about new Macs and web development, podcast statistics during COVID, is it still worth it to learn WordPress, dealing with imposter syndrome, 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

    00:47 - Roch Tolinski — You guys are doing a downtown job!!!

    02:45 - Yesterday Apple announced their new Macs. They seem pretty sweet, but I was curious, what does this mean for the world of web developers? Will my current apps slowly stop being supported? Will things like brew and node and npm still work on those new machines? Would it be smart to start learning new programs to be prepared for the transition?

    10:20 - Hey, great show! No really, great show. What is better for working at home/the office, iMac or MacBook Pro?

    13:25 - What are your thoughts on Remix? And has your listenership gone down since COVID-19? I have heard that less people listen to podcasts now because they no longer commute.

    19:33 - What is your approach to testing for e-commerce sites? I am about to launch a client’s online store and I’m sick with worry that a simple plugin upgrade will impact the store, and that I won’t know about it till a disgruntled customer complains.

    24:57 - I’m getting into web development through college (just trying for an associate's to start) and I’m noticing the intro courses are very hard to get into. I’ve been self-teaching so I kind of feel like I’m ahead. The intro to computing logic (basic algorithms) teacher teaches very slowly and forces us to use an awful software called Raptor to create pseudo programs. I’ve been asking to actually use a language rather than the software but the teacher doesn’t have enough programming knowledge to grade the actual language assignments. I feel like this course is a step back from what I already know. I was just wondering if you guys have any tips on getting through the grueling “required” courses?

    31:04 - So it's been announced now that Sapper will never hit 1.0, and instead Svelte core functionality is being expanded and Sapper is being deprecated. I know you all don’t have any inside info, but kind of wondering how Scott feels about this and what he’s doing with his Sapper site in the nebulous time between the big announcement and the release of the next Svelte version?

    35:17 - I’m currently working through a full-stack Udemy course to make the switch away from my day job to try freelance web development. I want to start taking on some easier freelance jobs to help make a little extra money and build my portfolio, and I see WordPress recommended as an easy way to do this. My question is, would it be worth undertaking the learning process to pick up some PHP and learn basic WordPress development so that I can start freelancing now, or would I be better served just focusing on HTML, CSS and JS and waiting until I broaden my understanding of these languages before I start taking on some preliminary clients?

    39:22 - If I plan to use WordPress as a headless CMS, how do I make sure the WordPress site itself is not publicly accessible? As far as I know, there’s no “API-only” mode for WordPress (like there is for, say, Rails or Laravel) and if I install a WordPress site on a server, it’s going to be discoverable online. I’d hate to have people find the WordPress API site and think it was my website — or for my static site to have to compete with my WordPress API for prominence in search engines. How do people ensure this doesn’t happen?

    42:01 - If I have a Vue.js website running on WordPress, how could I dynamically insert Vue components from the WordPress backend (e.g. have a post that inserts a Vue.js poll component)? I don’t want to recompile every time.

    44:24 - I’ve heard you mention previously that you have used WordPress to host sites in the past. I’m keen to learn how you have created your own themes for those sites. Did you write your own PHP, etc, or is there another way? I’m hoping to learn a bit more about developing for WordPress as it’s a skill I’d like to have in my back pocket, and would love to hear about any resources you would recommend for this.

    47:51 - I’ve been a web developer for over 15 years. Unfortunately, I had to leave web development for personal reasons. I have a lot of great skills. Unfortunately, because I’ve been out of the game for so long my resume is full of holes. All the current experience I have is project-based or freelance-based. I do not have the ability to show long-term projects or anything stable on my resume. I’m trying to get my first job back in the field after my long absence. It has proven to be nearly impossible. I am listening to your Tasty Treat about certifications and certified education. I agree that certifications do not show actual skill. I also agree that just because I do not have longevity and consistency on my resume that I do not have the skills to pay the bills. How can I get my first job back in the field? I am working on small projects to highlight my skills but no one really seems to care. What would you do?

    53:36 - I am currently in a food service job, but would love to move into the dev/design field. I have a year of experience in JavaScript, HTML, and CSS/Sass, as well as React, Gatsby, Next, and Node ( thank you both for helping with those ). I have a small amount of experience with freelance web design and development, but feel I am greatly underselling myself ($150 for a Gatsby site built for a friend and less than $100 for a couple Fiverr gigs). I have seen freelance work out well for my friends and family, but I am terrified of having to find clients. I have a hard time valuing my work and fold when money is brought up. There is always a part of me that says to just shoot high and have them talk the price down, but I hate the confrontation. How should I go about finding my first $1,000 client and how can I show the client that my work is worth more without talking about the tech involved?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Dec 23, 2020
    Hasty Treat - How Would We Script a PS5 Buying Bot?
    16:20

    In this Hasty Treat, Scott and Wes talk about the PS5 bot debacle, and how they would do it differently!

    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

    03:12 - Scott’s strategy

    • Go to Reddit and refresh until someone posts a link and then GO GO GO
    • Don’t buy on sites that allow simple bots to work
    • TBH I don’t know how to code this type of bot and would prob end up accidentally buying a ton of stuff

    05:06 - Wes’ strategy

    1. You need a way to find out of there is stock
      • Find out of there is an API endpoint you can hit (inspect element)
    2. If there is not, you’ll need to scrape the site.
    3. Fetch(url). text()
    4. Regex
    5. Cheerio
    6. Puppeteer (slower, easier to run)
    7. Save any data that you want in a database. Text-based database is great.
    8. Re-run the scrape every N mins
    9. When there IS a match you can:
      • Send a text message - Twilio
      • Send an email - Postmark
      • Try to fill out the form and submit it yourself
        • document.querySelector()

    11:35 - Things that get in the way

    • Blocked IP
      • Use a VPN
    • Captcha or Cloudflare
    • Run it on your local computer
    • Use Puppeteer to get all cookies and headers

    Links

    Tweet us your tasty treats!

    Dec 21, 2020
    Serverless, Deno and TypeScript with Brian Leroux
    01:00:04

    In this episode of Syntax, Scott and Wes talk with Brian Leroux about severless, Deno, Typescript, 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.

    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”.

    Guests

    Show Notes

    02:17 - What’s your background?

    06:18 - What is serverless? Why is serverless so awesome?

    14:07 - What changes from moving from an existing app to a new app?

    16:15 - What is a cold start?

    17:46 - What languages are suitable for serverless?

    19:14 - What do you think about Deno?

    24:23 - How does Architect work?

    31:14 - What do you think about Typescript?

    40:35 - Do you think websites should work without JavaScript?

    44:51 - What about sharing code?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Dec 16, 2020
    Hasty Treat - 300th Episode Tech Chat
    25:42

    In this Hasty Treat, Scott and Wes talk about their 300th episode and the tech behind it.

    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

    02:15 - The things we tried

    • Zoom Breakout rooms
    • Hopin - $$$
    • Streamyard

    04:24 - What we used

    • Discord
      • Room as a waiting room
      • Roles to give access
      • An a/v room where Wes and Scott were hanging
      • Lots of questions about Slack vs Discord
    • OBS
      • ObS to stream to three locations
      • ObS Streamlabs does this easily
      • Screen capture did a better job than using the video source from Discord
    • Youtube, Youtube, and MUX
      • Streamlabs can stream to 4 sources at once
      • MUX
    • How we got Syntax.fm/live to work
      • Create a new live stream on Mux via their UI
      • Get stream address and key
      • Point Streamlabs to it
      • HLS m3u8 address from Mux into a HLS react player
    • Looping intro video
    • Recording Audio
      • Wes recorded two streams locally
      • All audio on stream was piped through BlackHole on Scott’s machine
      • Used Loopback to pipe Discord audio into an input
      • Scott + Guest were on the same channel, possibly compressed
      • Sounded good!

    Links

    Tweet us your tasty treats!

    Dec 14, 2020
    Gatsby vs Next.js in 2021
    01:09:22

    In this episode of Syntax, Scott and Wes talk about Gatsby vs Next. A lot has changed in the last year — what are the differences, and do the recommendations from Syntax 120 still hold true?

    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.io and using the coupon code “tastytreat”.

    Show Notes

    03:34 - Server-rendered

    • Both do server rendered
    • Gatsby is gone at build time
    • Next is done at build and on deploy

    05:26 - Static generation

    • getStaticProps()
    • getServerSideProps()

    08:25 - Re-rendering pages

    • Gatsby can be re-rendered and re-deployed - any CMS lets you do this on only the pages that changed.
    • Gatsby-cloud
    • Next.js has the revalidate flag that will re-render when stale

    18:54 - Data management

    • Gatsby has a built in GraphQL API feature with
    • Next.js has nothing - it’s not their problem. Use Apollo, or SWR, React Query, or redux, or whatever you want.

    23:16 - Client-side data

    • Neither do anything, next.

    26:33 - Dynamic Pages

    • List of 100 shoes, each one gets a page
    • List of four types of shoes: basketball, runners, casual, bowling, etc.
    • List of 10 colors: each color gets its own page.
    • List of 12 sizes, each size gets its own page.
    • Now it gets complicated when you do this:
      • Show me basketball shoes, in red, in size 5
      • 600 pages minimum
      • What about size 6+7?
      • Then you get into having to fetch data on the client side - but all your data is in GraphQL?!
      • The queries are different!
    • Gatsby will get “Hosted GraphQL”: https://twitter.com/kylemathews/status/1252803849775009794

    30:41 - Routing

    • Neither do nested routing still
    • Both do folder based wrapper

    34:50 - Hosting

    • Anywhere

    35:54 - Images

    46:20 - Server or Serverless

    • Gatsby - none. You can do it with Netlify, Begin, AWS, Gatsby doesn’t care.
    • Next.js - can do server with API routes. Can do serverless if you host on Vercel.

    49:44 - SEO

    • Tags
      • Gatsby - Helmet
      • Next - Head
    • Sitemap
      • Plugin for both

    49:55 - Plugin Ecosystem

    • Gatsby has lots of plugins that you install
    • Next.js has some too. Seems Gatsby is easier in this regard because plugins can manage and normalize data into the GRaphQL Layer.

    53:10 - Auth

    55:00 - E-commerce

    • Gatsby - options are mostly limited to Snipcart and Shopify like iframe drop in solutions where the majority of operations take place on another site and service.
    • Next.js - hey released a starter boilerplate that leans on an existing headless cart
    • https://rainierwatch.com/

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Dec 09, 2020
    Hasty Treat - Why should I use React Hooks?
    25:32

    In this Hasty Treat, Scott and Wes talk about React Hooks and why you might want to use them instead of class components.

    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

    03:54 - Decouple the UI from the logic

    • This wasn’t impossible with class-based components, but we started using HOC to do this.
    • With hooks, it makes you decouple what it does and how it looks.
    • Makes things like GraphQL code gen possible
    • Multiple pieces of state or functionality
    • Share commonly used functionality among projects and components

    10:31 - Reduction in code

    • Lifecycle methods were often redundant. useEffect offers a way to prevent the duplication that can happen with component did update and did mount. This gives you a way to say, “Hey, run this code when these things change.”

    13:30 - useEffect’s dependencies

    • These give you access to targeted control over side effects rather than just something changed.

    14:15 - Easier to grok

    • What happens? When? Where? It’s mostly in the hook.

    16:09 - Simplicity in usage

    • Thing, updateThing is more targeted than set state
    • Ref makes way more sense with useRef
      • String refs weren’t great, the function ref thing was obnoxious

    21:07 - Gripes about Hooks

    • Naming is kind of odd
      • Vue did a better job with the names

    Links

    Tweet us your tasty treats!

    Dec 07, 2020
    Sickpickisode - 2020 Web Developer Gift Guide
    57:30

    It’s an entire episode of Sick Picks! In this episode of Syntax, Scott and Wes talk about their 2020 developer gift guide!

    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

    03:17 - Home + Cooking

    13:27 - Games

    17:16 - Tech

    25:24 - Smart Home

    33:22 - Desk Stuff

    36:43 - Live Streaming / Sick WFH Setups

    49:07 - Fitness

    51:44 - Clothes

    Links

    Shameless Plugs

    • Scott: All Courses - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

    Tweet us your tasty treats!

    Dec 02, 2020
    Hasty Treat - Writing Good Commit Messages
    12:38

    In this Hasty Treat, Scott and Wes talk about a system for writing good commit messages.

    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

    03:46 - What are conventional commits?

    04:55 - How do you keep track of all the details?

    07:42 - How does it relate to SemVer?

    Links

    Tweet us your tasty treats!

    Nov 30, 2020
    Potluck - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More!
    01:08:26

    It’s another potluck! In this episode, Scott and Wes answer your questions about frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, 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.

    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

    01:27 - How do you implement WebRTC? Please tell us more about online streaming, screen sharing, data flow.

    03:20 - Which JS library/framework do you think beginners might find the easiest to understand?

    05:06 - How do you deal with different case types between different systems in your project? For example, I store records in a Postgres database which typically uses snake_case and then I render them with React, where props are typically camelCase. Is it better to convert the cases back and forth between frontend and backend or just pick one case and use it everywhere?

    09:23 - My question is about the difference between a framework and a library. Should we have two separate words?

    12:39 - How can I work on improving both my generic problem-solving skills and my debugging skills? I feel like there have got to be some more proactive things I can do to improve in these areas.

    17:22 - I just listened to your podcast on making freelancing easier and enjoyed it. You talk about making your own component library. Do you have tips on how to store and manage a component library?

    21:39 - What projects do you use Rust for, and do you have any ideas where Rust might be the thing to do when talking web projects?

    29:10 - I’ve recently joined a great-paying full-time gig at a big enterprise-level company as a Senior Javascript Engineer (React, Node, etc). I’m humbled to be here - but at times the pace is slow, tickets are scarce, and I feel like I’m not able to really utilize or hone my skillset. I’ve been looking at potentially moving into contracting/agency work - the money seems comparable with the added benefit of new and exciting projects and having more control over them. Do you think contract work would be more fulfilling, or is crazy to leave a cushy job solely because I’m in a sense, bored?

    35:26 - I’m currently working on a Next.js project and trying to decide which CSS system to use. What is your take on CSS modules? I know you like styled components a lot, but since there is built-in support for CSS modules with scoped CSS, I find it hard to motivate bringing in styled components. Am I missing something?

    38:15 - Regarding Episode 290, you fielded a question regarding Angular and I appreciated your balanced response since I’m primarily an Angular developer at my job. If you could, would you please update the link to the Angular website to point to Angular.io (v10) instead of the AngularJS (v1) website?

    40:43 - I really need advice on how to write a good resume, or any tips you may have for getting noticed in the hiring process with only a couple years of experience. I have been applying to many jobs as a front-end developer but I seem to get no response EVER.

    47:17 - How do I dynamically assign subdomain/wildcard/slug dynamically during signup process with React and Node? (Like the way Freshbooks does — i.e tenant1.domain.comtenant2.domain.com, etc.)

    48:44 - Wes, I’ve been taking your Mastering Gatsby course, and I’m loving the course so far. My only complaint would be I wish you added a module for CSS. I think it's just because I personally struggle with styling websites. Do either of you have any suggestions on how I can improve in that aspect of web dev?

    50:35 - For web developers just starting out in freelancing/building e-commerce sites — from a business perspective, do you recommend we first 1) just code and worry about business stuff later? or 2) go through the government paperwork and be a sole proprietorship? or 3) incorporate (though this costs more)?

    54:20 - What’s your approach for handling padding + margin with components?

    57:43 - How do you back up sensitive files that do NOT get added to source control (env files, for example)? I have off-site computer backups, and I have .env files on a small thumb drive on my keychain. What do you do?

    59:56 - Do you guys have stress management techniques? How do you cope with stressful situations at work, like unexpected tight deadlines?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    • Scott: Animating Svelte - Black Friday Sale: Sign up for the year and save 50%!
    • Wes: Master Gatsby - Black Friday Sale: All courses 50% off!

    Tweet us your tasty treats!

    Nov 25, 2020
    Hasty Treat - Client vs Server Data Validation
    21:25

    In this Hasty Treat, Scott and Wes talk about client- and server-side validation, and what each is used for!

    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

    02:49 - Wes’ story

    06:28 - What is the role of client-side validation?

    • Help the user input the correct data as they type it.
    • Show correct data in UI.
    • Show correct UI.
    • Just about all of these things are for the user’s benefit, and how they feel when using the site.

    11:10 - What is the role of server-side validation?

    • Validate that all the data is correct before it’s saved to the database
    • Security first and foremost

    15:03 - What process should a store follow to validate on the server?

    1. Check that correct types are coming in. Very easy with Graphql.
    2. Get current stock and price information from unique ids from the database.
    3. Confirm that this information is what the user is expecting — if the UI said the user will be charged $40, don’t charge them $50 just because of the updated info. In that case, send back to the user.

    17:17 - What do you do if you don’t want people messing with your React state?

    • @fvilers/disable-react-devtools
    • if (process.env.NODE_ENV === 'production') disableReactDevTools()
    • We do this on LUT. Why? Because it’s a deterrent.

    Links

    Tweet us your tasty treats!

    Nov 24, 2020
    How to Run a Conference with Benjamin Dunphy
    01:07:20

    In this episode of Syntax, Scott and Wes talk with Benjamin Dunphy about running conferences — what to do, what not to do, and what makes a good online conference in a post-Covid world!

    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.

    Guests

    Show Notes

    03:48 - How do you get started running a conference?

    10:05 - Which conferences have you run?

    18:05 - How do you get speakers?

    23:21 - What about paying speakers?

    28:26 - Speaker goody bags?

    32:40 - You started your own catering company?

    35:32 - How has Coronavirus affected the conference space?

    43:06 - Should online conferences try to replicate live conferences?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Nov 18, 2020
    Hasty Treat - CSS Grid Masonry (Grid Level 3)
    17:03

    In this Hasty Treat, Scott and Wes talk about CSS Grid Level 3 — why it’s such a cool thing and why they’ve been waiting for it for so long.

    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

    04:33 - The spec

    06:10 - How it works

    • masonry-auto-flow: next;
      1. It first puts all the items that are explicitly placed onto the grid. Items that you have a set start/stop value for are first put down.
      2. Then it takes the next item that it to be placed and finds a spot for it. This is different because with CSS Grid you normally have to place the next item on the next row or column.
      3. grid-template-columns and grid-template-rows can now be marked as masonry and this specifies which axis will be masonry.

    09:06 - The implicit grid

    13:25 - Thoughts

    • Power tools for layout in CSS — opens up a ton of possibilities and completes the functionality we use to dream of in CSS.

    Links

    Tweet us your tasty treats!

    Nov 16, 2020
    300th LIVE SHOW SPECTACULAR!
    01:45:17

    It’s the 300th episode of Syntax! To celebrate, Scott and Wes do a special live call-in episode with Syntax listeners.

    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”.

    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

    03:30 - How is this going to work?

    • Ask a Potluck Question
    • Do a Sick Pick
    • Take on a Stump’d Question
    • Do a Shameless Plug

    04:45 - Brad

    11:54 - Brittany

    16:43 - Jesse

    23:44 - Henri

    31:27 - Jason

    • Stump’d Question: What does “use strict” do and what are the benefits?

    36:48 - Spence

    41:33 - James

    • Potluck Question: How do you keep people engaged in a workshop?
    • Stump’d Question: What is the difference between the postfix i++ and the prefix ++i increment operators?
    • Shameless Plug: YouTube for Developers
    • Shameless Plug: James Q Quick YouTube Channel

    54:24 - Austin

    • Potluck Question: Problems with ESLint, Prettier and VS Code playing nicely together
    • Shameless Plug: https://erickka.art/

    66:21 - Dave

    • Sick Pick: mmhmm
    • Stump’d Question: What is the difference between the + and ~ sibling selectors in CSS?

    78:56 - Gareth

    89:51 - Ackzell and Lewis

    • Ackzell:
    • Lewis:
      • Potluck Question: What is your daily routine like, and you do you decide to prioritize projects?

    Links

    Shameless Plugs

    • Scott: Level Up Pro - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

    Tweet us your tasty treats!

    Nov 11, 2020
    Hasty Treat - Bundlers in 2020
    24:35

    In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, 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

    02:39 - What is a bundler?

    • On the one hand, you can write HTML, CSS and JavaScript and open it in the browser
    • On the other hand, your build could be super complex

    03:24 - What goes into configuring a bundler?

    • Templating language you use (Jsx, Pug, Vue, etc.)
    • JavaScript you write and compile to:
      • ES6/7/8/9
      • Typescript
      • CoffeeScript
    • Polyfills
    • Environmental variables
    • CSS loading
    • Image compression
    • Asset Chunking
    • Tree shaking

    05:12 - Webpack

    • Hardest to learn, most used currently

    07:38 - Rollup

    • Scott’s pick as best option for most features vs ease of use
    • Very powerful
    • Mmmr, tree shaking, plugins, esm

    09:52 - Parcel

    • Scott’s simplicity winner pick
    • Easiest to get started with
    • It’s a bundler, but also a dev tool
      • Hot reload
      • Local server
    • Config is done via your package.json
    • Lots of plugins available

    12:01 - NpmYarn and Yarn 2

    • It’s a dependency installer rather than a bundler

    13:27 - Snowpack

    • Scott’s speed pick of the week
    • Uses ESM by default
    • Like Sonic after a triple shot of espresso
    • HRM
    • Perfect for dev builds, as well as production builds

    15:51 - Isobuild / Meteor

    • Scott’s underdog pick of the litter

    16:48 - Rome

    • Scott’s mystery pick of the week
    • New tool to do it all
    • Bundler, but also a linter

    17:54 - Deno

    • Linter
    • Typescript formatter
    • Bundler (bundle into a single .js file)

    20:44 - Let your tool take care of it

    Links

    Tweet us your tasty treats!

    Nov 09, 2020
    Voice Coding is Really Good with Josh Comeau
    58:33

    In this episode of Syntax, Scott and Wes talk with Josh Comeau about coding with your voice, accessibility, bootcamps, animation, 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.

    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”.

    Guests

    Show Notes

    01:48 - What is your background?

    04:33 - Coding with your voice

    08:32 - How do you code for a living if you can only do it for a few minutes a day?

    21:56 - How has it impacted your productivity?

    22:46 - Is it easier with a typed language like Typescript?

    26:05 - What about accessibility?

    27:14 - How good is the eye tracker?

    29:30 - What got you into animation?

    35:29 - Favorite app for animations?

    40:12 - Being a teacher

    41:44 - Is it worth going to a bootcamp?

    44:57 - Interactivity in teaching

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Nov 04, 2020
    Hasty Treat - Certifications? Government Specified JavaScript Skills?
    20:26

    In this Hasty Treat, Scott and Wes talk about web dev certifications — are they worth it, or a waste of time?

    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

    02:12 - Certifications

    05:30 - We have standards, and people move faster than standards.

    • jQuery moved faster than vanilla JS
    • Typescript is sometimes preferred over regular JS
    • We have universities that offer web developer certs and many of them are a joke
    • The point is that programming is the wild west — it’s far too broad and moves far too fast for us to try and fit it in a box

    10:28 - Do certifications mean anything?

    14:30 - How do you know if you have enough skills (when you’re job hunting)?

    19:04 - Some jobs do require a certification

    • AWS
    • Google

    Links

    Tweet us your tasty treats!

    Nov 02, 2020
    Spooky Web Dev Stories — Part 2
    01:02:39

    In this episode of Syntax, Scott and Wes are back for another episode of spooky web dev stories — listener-submitted stories about web dev gone wrong.

    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.

    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

    03:28 - Jack Rhysider Story

    06:28 - Dirty Dicks JSON

    08:23 - CMS Disaster

    10:58 - Oh No Hotel

    11:19 - FTP

    12:19 - Push Notification Hell

    13:16 - DVD Nightmare

    15:15 - Bad Words Again

    16:23 - Mo Money

    17:01 - Bass Ackwards

    18:17 - Taxi Coding

    19:36 - Bad Env

    21:30 - Login As

    21:50 - Email Subscribers Plugin

    22:33 - 1 in 300 Chance of the C-Word

    24:24 - Production Target

    26:12 - A Happy SEO Ending

    28:26 - Just Oof

    29:48 - I’ve Fallen and I Can’t Get Up

    30:54 - Crypto

    32:34 - rm -rf

    33:42 - Never Deploy on Fridays

    35:31 - Million Dollar Scramble

    36:22 - Deleting Production

    37:11 - 500,000 Concurrent Problems

    39:14 - Deleting a Government Website

    40:36 - You Ruined the Surprise!

    45:23 - Mr. D Hole

    46:48 - One Expensive Race Condition

    48:43 - Yikes

    51:11 - Always Be Closing

    51:44 - Adidas - All Day I Delete A Site

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    • Scott: Level Up Pro - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

    Tweet us your tasty treats!

    Oct 28, 2020
    Hasty Treat - Temporal Date Objects in JavaScript
    16:42

    In this Hasty Treat, Scott and Wes talk about Temporal Date Objects in JavaScript — a WICKED AWESOME API for working with times and dates.

    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

    05:11 - Temporal Now

    • You can get now
      • Temporal.now.___

    07:58 - Temporal Instants

    • Temporal.Instant represents a fixed point in time, without regard to calendar or location.
      • Most common way to show it is nanoseconds since unix epoch.
      • Can be formatted a few different ways.

    09:59 - Calendar

    • Support for different types of calendars

    11:43 - Durations

    • Temporal.Duration
      • There are .from and .add and subtract() methods

    12:47 - Other interesting parts

    • Timezones
      • Temporal.ZonedDateTime
    • Temporal.YearMonth - represents a ym = new Temporal.YearMonth(2019, 6) // => 2019-06

    14:51 - Polyfill (unstable)

    Links

    Tweet us your tasty treats!

    Oct 26, 2020
    Spooky Web Dev Stories — Part 1
    54:11

    In this episode of Syntax, Scott and Wes talk about spooky web dev stories — listener-submitted stories about web dev gone wrong.

    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.

    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

    03:12 - The Most Expensive Boolean Ever

    06:19 - An Actual Logging Issue

    09:37 - Snitches Get Stitches

    10:41 - The Spooky Office Skeleton

    12:04 - Prevent the Default of Making Money

    13:52 - Computer Magic Trick

    14:42 - Update Score

    15:59 - Change Reaction

    19:30 - Personal Mongodb

    20:26 - Hello Rob!

    22:08 - SSN Regex

    23:06 - WordPress Plugins

    23:52 - Loggin Ya In, Ya F’in Dummy

    24:58 - A Hostel Coding Environment

    25:59 - A Graceful Exit

    27:27 - Favicon DDOS

    28:07 - Common Cents

    29:03 - Open Source Vendors

    33:04 - Don’t Leave the Country

    35:09 - Apostrophe Catastrophe

    35:43 - Env

    36:05 - A Christmas Miracle

    36:43 - The One Million Dollar Bill

    39:00 - The Hacker Who Dropped the DB

    40:19 - The Tech Lead Who Uses Alert Statements

    46:14 - Lorem Ipsum

    46:58 - Malicious Compliance

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Oct 21, 2020
    Hasty Treat - Stretching For Developers with Scott
    19:58

    In this Hasty Treat, Scott and Wes talk about stretching for developers — techniques, misconceptions, and how to feel better.

    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

    03:21 - Devs do the following

    • Head forward looking at screen
    • Shoulders forward
    • Sitting a lot
    • Weak core
    • Carpel tunnel from typing

    06:02 - Stretching misconceptions

    • Static holds
    • Dynamic controlled movements first and foremost

    07:52 - Stretches to help

    • Dynamic twists
    • Cat / Cow
    • Flat down / Curl up spine
    • Arm hang to decompress spine
    • Wrist stretches and strengthening for carpel tunnel
    • Horse stance at standing desk to be office weird person
    • Shoulder circles
    • Doorway stretches

    Tweet us your tasty treats!

    Oct 19, 2020
    How to Make Freelancing Easier
    58:29

    In this episode of Syntax, Scott and Wes talk about how to make freelancing easier — how to avoid burnout, and tips and tricks to make it successful.

    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”.

    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

    02:15 - Code

    • Use starters and resets and component libraries
    • Don’t build in something you don’t know, unless you have time and budget to do so — WP is good enough for most projects
    • Feel free to go over time on projects if you are learning something new
    • Re-use code from project to project
    • Target similar types of clients

    13:09 - Communication

    • Often, clear and frequent
      • People won’t be mad for being too informed — just know when to leave out the technical jargon
    • Clients typically don’t care about Git, React, etc. — they care about results
    • Don’t overwhelm them
    • Train your clients that you aren’t available 24/7

    22:19 - Time management

    • Set calendar alerts early and often to not miss communications
    • Set meetings at 9am, don’t wait around all day for meetings
    • Block off large amounts of time for dev — you won’t be able to get meaningful work done in one-hour slots

    27:54 - Contracts + quoting

    • Have a boilerplate contract that you can just fill in
      • Same for a quote
    • Value-based billing

    33:47 - Billing + taxes

    • Don’t be shy when talking about money. Be clear on what you need, when you need it, and on what terms. This is business.
      • This is your art, but it’s also your business
    • Pay quarterly taxes - most likely
      • Or don’t and take the small hit — then you can pay once a year
    • Put taxes into another account if you aren’t good with money
    • Get a billing management system or get an accountant — you need to focus on working on code
      • Wave Apps, Xero, Freshbooks

    42:03 - Marketing

    • Be loud — people need to know what you offer
    • The best marketing is a referral from a previous client
    • If you show up, return emails and do a good job, you’ll kill it
    • Show people what you are excited about: blog posts, videos, tweets, etc.
    • Go where your clients are:
      • Do you want to be serving small businesses? Family and friends
      • Do you want to be a hired gun for a technical team? Conferences/Twitter, blog posts

    48:25 - Final thoughts

    • Scott — It’s ok if freelancing isn’t for you. Not everyone is great at all of these factors, myself included. However, with practice, you can be your own boss, work on your own terms, and make money. Also, don’t be afraid to take on longer contracts with established teams and companies.
    • Wes — Freelancing can be a great filler between jobs or career transitions.

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Oct 14, 2020
    Hasty Treat - Updating / Restarting Long-Running Web Apps
    13:01

    In this Hasty Treat, Scott and Wes talk about updating web apps that have running for a long time — the problems to look out for and how to avoid them.

    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

    01:54 - The problem

    • This only affects the client-side

    05:28 - What are some solutions:

    Links

    Tweet us your tasty treats!

    Oct 12, 2020
    Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More!
    58:11

    It’s another potluck! In this episode, Scott and Wes answer your questions about getting your first web dev job, what makes a software engineer senior, handing off projects to clients, Angular vs React, the best social platforms for devs, 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.

    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

    01:58 - You’ve talked a couple times in the past about the security concerns around target="_blank". You mentioned how adding rel="noopener" and / or rel="noreferrer" can secure this functionality, but what’s to stop a savvy person from going into the dev tools and deleting these attributes before clicking a link? Does this defeat the entire purpose or what? Surely browsers have thought of this and it’s not so easy to hack?

    03:48 - Why did you not mention Stencil when talking about web-component in the last Potluck? Can I presume you have not heard of it? It is quite successful and Ionic proves it. We’ve been using it for two years in production. This is the only library that thought web-components through to the end. If you know it, what do you think about it and would you use it?

    • Example of a stencil component:
     import { Component, Prop, h } from '@stencil/core';  @Component({   tag: 'my-first-component', }) export class MyComponent {    // Indicate that name should be a public property on the component   @Prop() name: string;    render() {     return (       

    My name is {this.name}

    ); } }

    06:12 - Is https://www.syntax.fm supposed to not work? I get a 404.

    07:34 - I’m wondering what advice you’d have for someone self-taught switching from a totally non-tech industry (non profit arts, in my case) where I work in a tech role. I’ve hustled and built a portfolio of projects and learned a ton from both of your courses, but I feel that my experience is seen as less valuable because I don’t work in a traditional software/web development environment. Any tips for getting over the final hurdle of getting a dev job?

    11:11 - What makes a software engineer senior?

    13:08 - I have a Gatsby / Netlify client project about to launch. What’s the best approach in handing over to the (non technical) client? Do I keep in my Github account and just give the client the Netlify CMS login, or create the a Github account for the client that I can access for any maintenance? What do other devs do?

    17:55 - I recently blocked all cookies on my mobile browser (Google Chrome), and I noticed something weird. A couple of sites that I know for a fact to have been built using NextJS weren’t working as expected (surprise surprise). They would load as usual, and after a second or so, all the content on the page disappeared, with the error message “sorry: an unexpected error has occurred”. In some cases, the error was printed in the site’s font, and with the same background color on the body. Why does blocking cookies do this to NextJS sites?

    21:21 - How often do you make commits? I always hear, “commit often”, but I am hesitant because I feel like I may change my code later on before I make a pull request? I really liked your episode on Git Fundamentals, I would love to see a tutorial/deep dive into Git workflows and practices (when to commit / how often) Should I commit even though I know what I’m working on isn’t complete or I need to refactor it?? What is code review etiquette?

    26:59 - Wes, how do you handle captioning and transcripts on your courses? Do you use some tool or service for that or do you do it by hand?

    31:11 - I am a recent graduate of a code school that focused on React and Rails. The company that I currently work for uses Angular for part of their stack. I eventually would like to move into a dev spot, but I am finding that Angular feels a bit stuffy and I am not as excited about it as React, Svelte, Vue, etc. I am afraid that if I dive into Angular, I will become less relevant down the road. I want to learn everything, but I only have so much time and don’t want to stunt my growth as a developer. Any thoughts or advice on this would be sick!

    36:38 - How do you handle SVGs in React? I know that SVGR exists, but I’d like to avoid adding another dependency if it’s something I can roll on my own. In the past, I’ve created functions that take parameters like fill or stroke to control color, and return a string of SVG code with the arguments interpolated in. Then I place that string into a component using dangerouslySetInnerHTML. I haven’t seen this method used anywhere else, and is probably not best practice. But also, it works, so maybe it’s fine?

    39:52 - What social media platforms should you use as a Dev? What is cool to have? What are their benefits?

    48:14 - Have you tried an ultrawide monitor for coding, such as 34" or 38"? I feel the extra width would be great for a single monitor setup, but haven’t been able to see one live where I live.

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Oct 07, 2020
    Hasty Treat - Enums in JS (GraphQL and Typescript)
    13:05

    In this Hasty Treat, Scott and Wes talk about enums in JS — what they are, what they do, and how they work in 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.

    Show Notes

    03:11 - What are enums?

    • A type restricting variables to one value from a predefined set of constants
    • Direction = UP / DOWN / LEFT / RIGHT
    • Role = ADMIN EDITOR AUTHOR VIEWER
    • Day of the Week

    05:12 - In GraphQL

    • enum Role { ADMIN EDITOR AUTHOR VIEWER}
    • Then

    07:05 - In TypeScript

    • First, declare the type:
      • enum direction = { UP, DOWN, LEFT, RIGHT }
    • Then when you defined your function, use that type
      • type User { role: Role } or type User { role: [Role] }

    08:49 - In JavaScript

    Links

    Tweet us your tasty treats!

    Oct 05, 2020
    Tales from Web Dev Past - Part 2
    48:59

    In this episode of Syntax, Scott and Wes are back with part 2 of Tales from Web Dev Past — this time looking at iFrames, layout trends, icon fonts, web rings, 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.

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

    Show Notes

    03:00 - iFrames

    • Sidebar menu
    • target

    05:42 - JavaScript image hovers

    08:24 - CSS Pie

    09:42 - Animated gifs of people and construction

    11:20 - CSS Zoom 1 / IE CSS Hacks

    • Forced IE 7 to redraw floats

    13:42 - Layout trends

    16:26 - Sprite maps

    • Spritecow
    • ☠️ Killed icon fonts
      • ☠️ Killed by SVG icons

    18:40 - Firebug and Firebug Lite

    • Lite was a bookmarklet

    20:14 - Image maps / Background gradients

    25:53 - Web rings

    27:41 - Glossy buttons

    28:09 - Flaming text

    30:01 - Marquee tags

    • Staggered
    • Speed attribute

    31:26 - Spacer gifs

    34:30 - AngelFire / GeoCities

    36:11 - Xanga / LiveJournal

    37:29 - Above the fold content

    39:36 - Homestar Runner

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Sep 30, 2020
    Hasty Treat - Records and Tuples in JavaScript
    17:21

    In this Hasty Treat, Scott and Wes talk about records and tuples in javascript — what they are, why you might want to use them, 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

    ??? -

    02:42 - Immutability

    05:08 - Records

    • Immutable object
    • Syntax #{x: 1, y: 2}

    05:56 - Tuples

    • Immutable array
    • Syntax #[1,2,3,4]

    07:18 - For both

    • Referred to as a compound primitive

    • Can contain only primitives, not objects

    • They are compared deeply by their contents rather than their identity

       assert(#{ a: 1 } === #{ a: 1 }); assert(#[1, 2] === #[1, 2]); assert(#{ a: 1, b: 2 } === #{ b: 2, a: 1 });  
    • Potential for optimizations

      • Optimizations for making deep equality checks fast
      • Optimizations for manipulating data structures
    • Works well with type systems

    • Better integration with the debugger

    • Accessed through normal record.scott object like syntax

    13:39 - Stage 2

    Links

    Tweet us your tasty treats!

    Sep 28, 2020
    Git Fundamentals
    58:40

    In this episode of Syntax, Scott and Wes talk about Git fundamentals — what it is, why you need it, 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”.

    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

    03:12 - What is Git?

    04:16 - Why do you need it?

    06:31 - UI vs command line

    09:03 - Commands 101

    • https://git-scm.com/
    • init
      • .gitignore file is key right off the bat
    • add
      • add -p - quick review of all the changes you’ve made
    • commit
      • Multiple adds and commits
      • Commit messages should be descriptive
    • push
      • What are origins?
    • pull
    • clone
    • checkout
    • merge
    • fetch
    • stash
    • fork
    • Merge vs pull request
    • Git vs GitHub / Alternatives
      • Bitbucket
      • GitLab

    44:25 - Common issues

    • Merge conflicts
    • Files being tracked unintentionally
    • “How do I delete file from GitHub?”
      • git rm -r
      • alias gri="git ls-files --ignored --exclude-standard | xargs -0 git rm -r"
    • Databases in Git?

    49:10 - Git clients

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Sep 23, 2020
    Hasty Treat - Our First Bucks Made From Web Dev, Teaching, YouTube and Tutorials
    22:49

    In this Hasty Treat, Scott and Wes talk about their first steps in the word of entrepreneurship and web dev specifically.

    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

    Wes:

    • First money: check for $300
    • First website: Pool company
    • First ad sense income: Craigonomics
    • First YouTube: import large SQL database with bigdump
    • First online Product: Sublime Text - Ryan Christiani
    • First in-person teaching: HackerYou
    • First project at agency: Jet Cooper

    Scott:

    • First dev gig: parents tea store
    • First design gig: Perpetual
    • First YouTube video: Adobe Premier 101
    • First BIG YouTube video: Sass Tutorials
    • First ad sense income: scotttolinski.com blog post about music promotion sites
    • First online product: Sass Mastery
    • First project at agency: Nu Step

    Links

    Tweet us your tasty treats!

    Sep 21, 2020
    Writing Good CSS
    56:45

    In this episode of Syntax, Scott and Wes talk about writing good CSS.

    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.

    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

    02:11 - Frameworks

    13:37 - Preprocessors

    19:42 - Tools

    34:19 - Stylint

    • Stylint
    • More than just a basic linter
    • Capable of complex rules in your CI process - i.e. if you are using a color, make sure it’s a CSS variable

    36:37 - Removing unwanted CSS

    41:17 - Writing maintainable CSS / scoping solutions

    • Component-based
      • CSS Modules
    • Naming Convention Based
    • CSS Variables
      • Powerful when utilized with things like calc() to avoid out of sync values
    • Know which browsers you need to support

    Links

    Syntax Highlight

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Sep 16, 2020
    Hasty Treat - Time Block Planning
    16:52

    In this Hasty Treat, Scott and Wes talk about time block planning — what it is and how it can help you increase your productivity!

    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

    01:50 - What is time block planning

    03:12 - How TBP has helped Scott stay focused

    04:46 - How it helps family life

    05:57 - How to plan your week

    11:00 - How to deal with setbacks

    Links

    Tweet us your tasty treats!

    Sep 14, 2020
    Tales from Webdev Past - Cleafix × Floats × Cufon × Guestbooks × PNG Fix × More!
    49:46

    In this episode of Syntax, Scott and Wes talk about tales from web dev past — clearfix, floats, flash, cufon, guestbooks, hit counters, 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.

    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

    04:28 - Float-based layouts

    09:29 - Loading Screens:

    • Two websites - one flash and one HTML
    • Splash screen

    11:22 - Hit counters

    12:28 - Guestbooks

    13:28 - Flash

    • 3rd party player
    • Media dragged its feet FOREVER
    • ☠️ Killed by Steve Jobs

    18:46 - Fonts

    • The Golden Layout
    • Cufon / sIFR / Images of text
    • Typekit
    • ☠️ Killed by font-face

    24:15 - Folder-based version control

    • ☠️ Killed by Git

    26:22 - FTP

    • ☠️ Killed by Git, then many other things

    28:40 - CSS Zen Garden

    32:02 - TextMate

    33:58 - Sliding doors

    • A technique for rounded corners on buttons
      ☠️ Killed by CSS

    35:29 - PNG Fix

    • ☠️ Killed by the death of IE6

    37:53 - 9-Panel layouts

    • ☠️ Killed by CSS

    39:20 - CSS 3 Please

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Sep 09, 2020
    Hasty Treat - Backyard Offices
    20:11

    In this Hasty Treat, Scott and Wes talk about home offices, backyard offices, costs, and pros and cons!

    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

    03:40 - Structure options:

    • Existing sheds
    • Build your own
      • likely not allowed
    • Drop-in offices
    • Rubbermaid shed

    07:18 - Electrical

    07:58 - Insulation

    09:01 - Heating

    11:30 - Cooling

    16:01 - Interior

    16:42 - WiFi

    17:12 - Costs ~ $4k

    • Electrical - $2k
    • Flooring - $600
    • Paneling- $900
    • AC - $1000
    • Fan - $100

    Links

    Tweet us your tasty treats!

    Sep 07, 2020
    Potluck - RIP Firefox? × Safari × Changing Careers × Regression Testing × Google Analytics Alternatives × Malicious Github Users? × Mac vs Windows × More!
    59:19

    It’s another potluck! In this episode, Scott and Wes answer your questions about the recent Mozilla layoffs, Safari, finding time to learn coding, Google Analytics alternatives, malicious Github users, 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

    01:15 - What are your guy’s thoughts on Mozzila’s layoffs and how it will affect developers?

    08:42 - Right now I am a math teacher. I am married with 2 kids (3 and 1) so finding time to code is difficult. My current situation includes waking up at 4:30 am everyday just to get in some time before the kids wake up. Do either of you have any tips about finding a balance between raising kids, getting stuff done around the house, having a full time job and trying to teach yourself web development to transition into a different career?

    13:23 - If you had to use a drag-n-drop framework using React, which one would you choose?

    15:49 - E2E vs Visual Regression Testing? At which web-app development cycle to implement each? Best tools open source vs purchase?

    20:36 - I teach a Highschool course in web development. For a group of students who have a solid knowledge of HTML/CSS and a decent understanding of JavaScript, would Svelte be a good framework for entering into component-based development for the first time?

    22:33 - What’s a good Google Analytics alternative in 2020? I have a site on Netlify that the $9/mo seems a bit steep for, for what the site is, and flipping the domain through Cloudflare just for the analytics seems crazy; but is it worth it? Alternatives would be awesome, as I’d love to get off the Google overlords.

    29:22 - I have noticed about a dozen to 100 unique clones of my git repos after each push. It doesn’t matter if the repo is initialized, picture added or the readme updated. The repos are still cloned. The traffic section shows the views to my repo at 1 sometimes 2. Is this normal? Is this how interested employers keep tabs on you? Are there a lot of malicious git users? What is happening?

    32:30 - With Apple switching to their own processors is it silly for anyone to buy a Mac for development before that releases? Do you guys have experience with Windows, and which would you still prefer today if you needed to buy?

    40:28 - Have you ever been approached by or heard of GitAds.io? They’re trying to pay developers to put ads onto popular open source libraries on Github, and they approached me recently, and I wasn’t sure what to think about them. What do you think?

    45:16 - I just listened to your TLD game. It made me wonder your opinions on personal site domain names? Should it always try to be yourname.dev? What about .me or other domains?

    47:53 - What’s the best way to introduce new technology or processes to a team?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Sep 02, 2020
    Hasty Treat - End of Season Wrap Up