Alle afleveringen

1.049 afleveringen, van nieuw naar oud

TypeScript Fundamentals — Getting a Bit Deeper

28 april 2021 · 1 uur 9 min
Afspelen

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
https://twitter.com/Igorbdsq/status/1351681019196436482 09:14 - .d.ts
Definition files
Usually for existing libraries that don’t have types
Can be generated or hand-written
Also really handy for pure JS projects, you still get good autocomplete because of these
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 Lees meer

21:48 - Promises / Async + Await
Functions now return a Promise type, but …
Hasty Treat - Git Rebase Explained

26 april 2021 · 16 min
Afspelen

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 Lees meer

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 = label current HEAD with a name
t, reset = reset HEAD to a label
m, merge [-C | -c ] [# ]

Links Git Rebasing

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Selling and Shipping T-Shirts with TypeScript

21 april 2021 · 56 min
Afspelen

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 TypeScript Lees meer

React

Next.js

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
Next.js Dashboard Integrate with ChitChats, Stallion Express, and SnipCart.

The…
Hasty Treat - Container Queries Are Here

19 april 2021 · 24 min
Afspelen

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
Download and/or update Chrome Canary
Go to chrome://flags
Search and enable “CSS Container Queries”
Restart the browser
19:27 - Demos
Need Chrome Canary + Flag
https://codepen.io/collection/XQrgJo Lees meer

https://codepen.io/una/pen/LYbvKpK?editors=1100

Links Miriam Suzanne

Susy

Miriam’s CSS Sandbox

https://css.oddbird.net/rwd/query/explainer/

Canary

@addyosmani

The CSS Podcast

@jon_neal

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Dev Tools Tabs Explained — Plus Tips & Tricks

14 april 2021 · 1 uur 3 min
Afspelen

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 Lees meer

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…
Hasty Treat - CSS Nesting 1

12 april 2021 · 20 min
Afspelen

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?
https://drafts.csswg.org/css-nesting-1/#nest-prefixed Lees meer

https://twitter.com/argyleink/status/1371874777548267520

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 (…
Potluck — Video Hosting × Fake Names? × Portfolio Projects × Monorepos × APIs × TLDs × Recording Tips × More!

7 april 2021 · 1 uur 12 min
Afspelen

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 w… Lees meer
Hasty Treat - VSCode Extensions and Tips

5 april 2021 · 22 min
Afspelen

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
https://marketplace.visualstudio.com/items?itemName=inu1255.easy-snippet Lees meer

05:33 - Add Missing Function Declaration
https://twitter.com/wesbos/status/1369393437062074377

07:30 - Error Lens
https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

09:08 - Declare Missing Members
https://marketplace.visualstudio.com/items?itemName=tamj0rd2.ts-quickfixes-extension

10:29 - ES7 React/Redux/GraphQL/React-Native Snippets
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

11:59 - File Utils:
https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

13:59 - GitLens — Git supercharged
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

15:15 - ES6-String-HTML
https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html

16:41 - Wrap Console Log Simple
https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple

17:18 - Text Pastry
https://marketplace.visualstudio.com/items?itemName=jkjustjoshing.vscode-text-pastry

19:14 - Better Comments
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

20:14 - Tip: Use Emmet everywhere
https://emmet.io/

Tweet…
Servers with Matt from Caddy

31 maart 2021 · 1 uur
Afspelen

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 Matt Holt Lees meer

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 Floss Weekly 364

Caddy

Let’s Encrypt

Certbot

PM2

https://doesmysiteneedhttps.com

Tello Drone

××× SIIIIICK ××× PIIIICKS ××× Matt: LG Stick Vacuum

Scott: Alen Pure BreatheSmart Air Purifier

Wes: Tello EDU

Shameless Plugs Matt: Matt Holt Sponsorships

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! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Hasty Treat - What is the n+1 problem?

29 maart 2021 · 20 min
Afspelen

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?
Sometimes no: its often fine to do multiple DB Calls
Facebook DataLoader Lees meer

Mercurious

Many ORMs take care of this for you These then break it down into my appropriate SQL
MongoDB Ruby: eager loading
Laravel ORM does it
Aggregation pipelines

Prisma N+1: https://www.youtube.com/watch?v=7oMfBGEdwsc&vl=en

Mongoose Populate

Apollo Studio

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Syntax Highlight (We Review Your Portfolio)

24 maart 2021 · 1 uur 1 min
Afspelen

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 Lees meer

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…
Hasty Treat - Effortless Custom GraphQL with GraphQL Codegen

22 maart 2021 · 19 min
Afspelen

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?
https://graphql-code-generator.com/ Lees meer

Code generation for GraphQL APIs
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 React Query

Apollo

Typescript

Cypress

https://periqles.herokuapp.com/

https://the-guild.dev/

Swagger

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
How To Build Your Own Auth

17 maart 2021 · 1 uur
Afspelen

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
Level Up uses a JWT & secure cookie-based authentication and tracks sessions via a db table.
Accounts.js Lees meer

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 sessionToken, userId 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…
Hasty Treat - Environmental Variables

15 maart 2021 · 24 min
Afspelen

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 Lees meer

Framework env variables
System env variables
Host-provided variables
16:20 - Where should you keep them?
1Password

1Password CLI

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 Digital Ocean App Platform

Render

Vercel

Netlify

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Potluck — VSCode × Vercel vs Netlify × Models × Mutations × Multi-Vendor Platforms × Websites vs Web Apps × More!

10 maart 2021 · 59 min
Afspelen

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 CS… Lees meer
Hasty Treat - Ask Us Anything!

8 maart 2021 · 27 min
Afspelen

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 https://twitter.com/aaronendsley/status/1361375032342110210 Lees meer

Svelte

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Syntax Desk Setups

3 maart 2021 · 1 uur 6 min
Afspelen

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 Lees meer

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
Scott Steelcase Gesture

Wes Polished Aluminum Herman Miller Aeron

Roller Blade Wheels!

15:39 - Display
Scott Vivo Stand

38" LG Curved Ultrawide

Vissles-M, Portable Touchscreen Monitor

BenQ Monitor Light

Wes LG 32" 4k Ultra HD

Dell Ultra HD 4k Monitor

Rain Design 10032 mStand Laptop Stand

22:49 - Headphones
Scott Ultrasone

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

24:58 - Mouse + Keyboard
Scott Keychron K3 with optical

Apple Magic Trackpad

Wes Apple Magic Keyboard - extended in Space Grey

Logitech Mx2

29:18 - Laptop
Both MacBook Pro

33:43 - Dock + Connecting it all together
Scott Caldigit TS3+

Satechi USB-C Slim Multi-Port with Ethernet Adapter

Under desk rack

Wes Everything is in a Lackr…
Hasty Treat - Hireable Skills for 2021

1 maart 2021 · 26 min
Afspelen

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 Lees meer

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?
Yes you obviously need to know about arrays and objects - probably maps and sets too
Links lists? Tree structures? Traversal?
https://twitter.com/wesbos/status/135372968348…
React Query + More React with Tanner Linsley

24 februari 2021 · 1 uur 6 min
Afspelen

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 Tanner Linsley Lees meer

Show Notes 01:56 - What do you do?
nozzle.io

React Query

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 Redux

Axios

Syntax 206: State Machines, CSS and Animations with David K Piano

RTK Query

Relay

Remix

Twin.macro

Tailwind CSS

React Static

Next

TanStack

××× SIIIIICK ××× PIIIICKS ××× Tanner: React Query - Essentials Course

Scott: Govee TV LED Backlights

Wes: 1Password

Shameless Plugs Tanner: Nozzle.io

Scott: Testing with Cypress - Sign up for…
Hasty Treat - The Future of Testing with Cypress

22 februari 2021 · 20 min
Afspelen

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 Cypress Lees meer

bos.af

Jest

Better Touch Tool

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Potluck — Do titles matter? × Should clients pay for plugins? × Can I debug my baby? × How we prepare for Syntax × Deno × Learning things quickly × More!

17 februari 2021 · 57 min
Afspelen

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 ha… Lees meer
Hasty Treat - TypeScript Compilers and Build Tools

15 februari 2021 · 23 min
Afspelen

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?
Do we still need Babel / WebPack?
07:49 - Babel
Transpiler
It doesn’t do typechecking
New JS features that aren’t in TypeScript yet
10:22 - SWC
Rust based compiler
Doesn’t do type checking (yet)
https://github.com/swc-project/swc/issues/571 Lees meer

13:03 - Deno
Uses tsc right now
Might move to Rust
https://github.com/denoland/deno/issues/5432

13:36 - Surcase
https://github.com/alangpierce/sucrase#transforms

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 Syntax 324: TypeScript Fundamentals

Syntax 322: The Deno Show

Tweet us you…
We Review Resumes, Websites, and Online Presence

10 februari 2021 · 1 uur 8 min
Afspelen

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 Lees meer

Online website Design
Messaging
Effort
Personal life

Blog
Resume
It’s not about being popular, it’s about…
Hasty Treat - Keyboard Events Are Surprisingly Interesting

8 februari 2021 · 22 min
Afspelen

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
http://keycode.info/ Lees meer

keydown
beforeInput
Keypress - deprecated
inputType tells you whether the event is inserting text, replacing text, inserting a line break, etc.
keyup
change event - only fires when you focus out
https://github.com/w3c/uievents/issues/220

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
https://developers.google.com/web/updates/2019/02/chrome-73-media-updates

play, pause, ect
Overkill app: https://krausefx.com/blog/introducing-overkill-dont-let-itunes-interrupt-your-workflow

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 Better Touch Tool

Syntax 315: Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
TypeScript Fundamentals

3 februari 2021 · 59 min
Afspelen

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 Lees meer

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 o…
Hasty Treat - New Level Up Tutorials Site

1 februari 2021 · 26 min
Afspelen

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
Originally on Drupal 7 Lees meer

Full re-write to Meteor + Blaze Two sites — store.leveluptutorials.com and leveluptutorials.com

Meteor + React

Meteor + Apollo

Combine store and site
Move to TypeScript

NOW

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 ESBuild Insane speeds
Wrote a custom GraphQL importer plugin

Mercurious / Fastify

Codegen GraphQL code gen to create everything we need for a fully typed codebase
Auto-generated React Hooks

Hosting render.com for both

CLI Custom avalanche CLI that removes the guesswork and makes bulk operations easy

Caddy server for easy leveluptutorials.dev in local environments
Testing Jest → API
Cypress → UI

Links Digital Ocean app platform

https://beta.leveluptutorials.com/

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’…
The Deno Show

27 januari 2021 · 1 uur
Afspelen

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 Lees meer

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 Deno can be used for anything, so it can be used for serverless functions, or a traditional web server
Serverless, Deno and TypeScript with Brian Leroux

React / Vue / Svelte These things are just JavaScript, s…
Hasty Treat - The New AVIF Image Format Is Unreal

25 januari 2021 · 21 min
Afspelen

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/ Lees meer

No animation
10:53 - How to implement
Cloudinary is in beta, but you can try it
Gatsby supports it
https://squoosh.app/

Imagemin

https://github.com/nucliweb/imagemin-avif

https://avif.io/

https://github.com/dreampiggy/AVIFQuickLook

https://github.com/vercel/next.js/pull/20765

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Potluck — $100k Dev Jobs × Sponsored Blog Posts × How To Keep Your Skills Up To Date × Libraries vs Custom × Dev Tools × More!

20 januari 2021 · 1 uur 4 min
Afspelen

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 valua… Lees meer
Hasty Treat - CSS Typography and Systems

18 januari 2021 · 26 min
Afspelen

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 https://type-scale.com/ Lees meer

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Reactathon LIVE

13 januari 2021 · 49 min
Afspelen

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 Lees meer

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 thermo…
Hasty Treat - A Podcast About Nothing

11 januari 2021 · 15 min
Afspelen

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 Lees meer

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 ob…
2021 Predictions

6 januari 2021 · 54 min
Afspelen

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 Snowpack Lees meer

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
Deno 101 for Web Developers

11:12 - Wes: Tooling will fade away
Less setup, more behind the scenes
Rome

Deno Linter
Formatter
Transpiler
Tester

Parcel2

Snowpack

Nextjs

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

Rust

Go

19:35 - Wes: Programming communities will gain traction
G…
Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management

4 januari 2021 · 27 min
Afspelen

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 Davinci Resolve Lees meer

Divvy

Uberlayer

Elgato Stream Deck

iShowU

Rocket

Clipy source

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
2020 In Review

30 december 2020 · 1 uur 7 min
Afspelen

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 Lees meer

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 Sanity

WordPress

WPGraphQL

Keystone

Strapi

RedwoodJS

Blitz.js

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?
ES Modules is king We’re ready in the browser
Node shipped stable
Deno has it
Snowpack

Bundlers and tools Snowpack

Vite

Rollup made gains
Rome

GraphQL got way easier

Battle of the Types Typescript

Flow

Reason

Rust

Wasm Viable to use
St…
Hasty Treat - Hosting + Web Services Pricing Explainer

28 december 2020 · 27 min
Afspelen

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 Heroku Lees meer

AWS

Digital Ocean

Meteor Galaxy

Linode

Rackspace

MediaTemple

GoDaddy

Bluehost

Backblaze B2

Mux

GraphQL

Github

Netlify

1Password

Cloudinary

Firefox Containers

Chrome grouped tabs

Brave

Digital Ocean app platform

Cloudflare

Vercel

Prisma

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Potluck — New Macs × Podcast Statistics × E-commerce Testing × WordPress × Charging More × Learning Web Dev × More!

23 december 2020 · 1 uur 6 min
Afspelen

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 ahe… Lees meer
Hasty Treat - How Would We Script a PS5 Buying Bot?

21 december 2020 · 16 min
Afspelen

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
https://mcbroken.com/ Lees meer

You need a way to find out of there is stock Find out of there is an API endpoint you can hit (inspect element)

If there is not, you’ll need to scrape the site.
Fetch(url). text()
Regex
Cheerio

Puppeteer (slower, easier to run)
Save any data that you want in a database. Text-based database is great. Lowdb

SQLite

DynamoDB (if doing serverless)

Re-run the scrape every N mins
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 https://twitter.com/bahamagician/status/1329430249151533066

stocktrack.ca

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Serverless, Deno and TypeScript with Brian Leroux

16 december 2020 · 1 uur
Afspelen

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 Brian Leroux Lees meer

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 Begin

Architect

Scott Tries Begin

Lambda

https://alephjs.org/

Deno

Typescript

Digital Ocean

Azure

Remix

Svelte

Puppeteer

Yumda

DynamoDB

××× SIIIIICK ××× PIIIICKS ××× Brian: Begin Fingerprinting

Scott: Been Here For Too Long

Wes: Grabber Tool

Shameless Plugs Brian: Begin Proxy

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! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Hasty Treat - 300th Episode Tech Chat

14 december 2020 · 26 min
Afspelen

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 Lees meer

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 Principle for mac
Watch how I did it on youtube - https://www.youtube.com/watch?v=I6pSlESq_bY

Music Song Scott wrote

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 Zoom

Hopin

Streamyard

Discord

OBS

MUX

Slack

Spectrum

Streamlabs

VLC

Twitch

react-hls-player

Principal

BlackHole

Loopback

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Gatsby vs Next.js in 2021

9 december 2020 · 1 uur 10 min
Afspelen

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! Lees meer

Gatsby will…
Hasty Treat - Why should I use React Hooks?

7 december 2020 · 26 min
Afspelen

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 Lees meer

21:07 - Gripes about Hooks
Naming is kind of odd Vue did a better job with the names

Links https://github.com/pmndrs/jotai

https://github.com/rehooks

https://twitter.com/youyuxi/status/1327328144525848577/photo/1

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Sickpickisode - 2020 Web Developer Gift Guide

2 december 2020 · 58 min
Afspelen

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
Cold Brew Maker 1 Gal - https://amzn.to/3pcKkKM Lees meer

2 Quart - https://amzn.to/3eIV921

Nordic Ware Half Sheet / Quarter Sheet Pans - https://amzn.to/3pbCWit

Precut parchment - https://amzn.to/35dtWld

Gaffers Tape - https://amzn.to/3lfH7aG

Tineco Pure S12 - https://amzn.to/3kelPsX

Instant Read Thermometer - https://amzn.to/3k9VNHf

Tea Haus - https://teahaus.com/

Whetstone - https://amzn.to/32nYi2z

Re-usable Silicone Mats - https://amzn.to/35dtWld

Air Fryer - https://amzn.to/38uX4X1

13:27 - Games
Baba Is You

Untitled Goose Game

Hades

Jackbox Party Pack

17:16 - Tech
Headphones Sony WH1000XM4 - https://amzn.to/2Ube8c8

Bose QC35 - https://amzn.to/3lrKrQp

Wyze Noise-Cancelling Headphones - https://wyze.com/wyze-headphones.html

USB-C Hub - https://amzn.to/3keljem

Black Camo Wicked Cushions - https://amzn.to/3eGQA8q

Mech Keyboard - https://www.keychron.com/products/keychron-k3-wireless-mechanical-keyboard?utm_source=navi%20to%20K3&utm_medium=navi%20bar&utm_campaign=navi%20to%20K3

Braided USB Cables Lightning: https://amzn.to/2IkqLiT

USB-C: https://amzn.to/3lfrBeX

25:24 - Smart Home
Wyze Cams - https://amzn.to/2UmPINf

Light Switches Lutron Dimmer - https://amzn.to/2U7OBk2

Leviton Dimmer: https://amzn.to/3pbzaFZ

Google Nest Hub

33:22 - Desk Stuff
Fatigue Mat - https://amzn.to/3eIXXw5

Rollerblade Gang Chair wheels - https://amzn.to/3nbNLPJ

MX3 Mouse - https://amzn.to/3lg8SQn

Wireless Charger Pad - https://amzn.to/36gIdNj…
Hasty Treat - Writing Good Commit Messages

30 november 2020 · 13 min
Afspelen

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?
https://www.conventionalcommits.org/en/v1.0.0/ Lees meer

04:55 - How do you keep track of all the details?
https://commitizen-tools.github.io/commitizen/

https://github.com/commitizen/cz-cli

https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits

07:42 - How does it relate to SemVer?
Links https://github.com/conventional-changelog/conventional-changelog

https://github.com/netflix/unleash

Deno

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Potluck - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More!

25 november 2020 · 1 uur 9 min
Afspelen

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 o… Lees meer
Hasty Treat - Client vs Server Data Validation

24 november 2020 · 21 min
Afspelen

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?
Check that correct types are coming in. Very easy with Graphql.
Get current stock and price information from unique ids from the database.
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 uses.tech Lees meer

Flipp App

GraphQL

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
How to Run a Conference with Benjamin Dunphy

18 november 2020 · 1 uur 7 min
Afspelen

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 Benjamin Dunphy Lees meer

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 Reactathon

Jamstackconf

Epicodus

Meetup

Flutter

Lifted Plate

DevRelCon

EventLoop

Modern Web Summit

@Swizec

Sanity Review Changes

@tylermcginnis

Syntax 250: Scott Teaches Wes Svelte and Sapper

××× SIIIIICK ××× PIIIICKS ××× Ben: Serverless Handbook for Frontend Engineers

Scott: Tineco Pure One S12

Wes: Chromecast

Shameless Plugs Ben: EventLoop

Modern Web Summit

Scott: Animating Svelte - Sign up for the year and save 50%!
Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Hasty Treat - CSS Grid Masonry (Grid Level 3)

16 november 2020 · 17 min
Afspelen

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
https://drafts.csswg.org/css-grid-3/ Lees meer

https://twitter.com/wesbos/status/1320735900343668738

06:10 - How it works
masonry-auto-flow: next; 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.
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.
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
https://drafts.csswg.org/css-grid-3/#%23implicit-grid

The implicit grid is formed in the same way as a regular grid container. However, it’s only used in the grid axis.
Interesting in a column situation (see images).
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 David DeSandro

https://metafizzy.co/

Chris Coyier

https://caniuse.com/

Isotope

Flickity

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
300th LIVE SHOW SPECTACULAR!

11 november 2020 · 1 uur 46 min
Afspelen

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
https://bradgarropy.com/ Lees meer

Sick Pick: Rogue Fitness Weighted Vests

Shameless Plug: Murphy

11:54 - Brittany
Shameless Plug: ZTM Academy

Andrei Neagoie

16:43 - Jesse
Stump’d Question: What are portals in React?
Shameless Plug: codeSTACKr YouTube Channel

Shameless Plug: VS Code Hero Course - Use coupon code “Syntax” for discount
23:44 - Henri
Shameless Plug: https://twitter.com/HenriHelvetica

Shameless Plug: JamstackTORONTO

31:27 - Jason
Stump’d Question: What does “use strict” do and what are the benefits?
36:48 - Spence
mdx-embed

https://github.com/PaulieScanlon/mdx-embed

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 di…
Hasty Treat - Bundlers in 2020

9 november 2020 · 25 min
Afspelen

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 Lees meer

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 - Npm, Yarn 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
Gatsby (webpack)
Next.js (webpack)
Gridsome

Create React App

Vite (Rollup)
Broccoli.js

Links Babel

Gulp

Syntax 212: Pika Pkg

Fred Schott

Pika

Rust

Go

Software Engineering Daily: Deno and TypeScript with Elio Rivero

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials In…

Alle afleveringen

TypeScript Fundamentals — Getting a Bit Deeper

Hasty Treat - Git Rebase Explained

Selling and Shipping T-Shirts with TypeScript

Hasty Treat - Container Queries Are Here

Dev Tools Tabs Explained — Plus Tips & Tricks

Hasty Treat - CSS Nesting 1

Potluck — Video Hosting × Fake Names? × Portfolio Projects × Monorepos × APIs × TLDs × Recording Tips × More!

Hasty Treat - VSCode Extensions and Tips

Servers with Matt from Caddy

Hasty Treat - What is the n+1 problem?

Syntax Highlight (We Review Your Portfolio)

Hasty Treat - Effortless Custom GraphQL with GraphQL Codegen

How To Build Your Own Auth

Hasty Treat - Environmental Variables

Potluck — VSCode × Vercel vs Netlify × Models × Mutations × Multi-Vendor Platforms × Websites vs Web Apps × More!

Hasty Treat - Ask Us Anything!

Syntax Desk Setups

Hasty Treat - Hireable Skills for 2021

React Query + More React with Tanner Linsley

Hasty Treat - The Future of Testing with Cypress

Potluck — Do titles matter? × Should clients pay for plugins? × Can I debug my baby? × How we prepare for Syntax × Deno × Learning things quickly × More!

Hasty Treat - TypeScript Compilers and Build Tools

We Review Resumes, Websites, and Online Presence

Hasty Treat - Keyboard Events Are Surprisingly Interesting

TypeScript Fundamentals

Hasty Treat - New Level Up Tutorials Site

The Deno Show

Hasty Treat - The New AVIF Image Format Is Unreal

Potluck — $100k Dev Jobs × Sponsored Blog Posts × How To Keep Your Skills Up To Date × Libraries vs Custom × Dev Tools × More!

Hasty Treat - CSS Typography and Systems

Reactathon LIVE

Hasty Treat - A Podcast About Nothing

2021 Predictions

Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management

2020 In Review

Hasty Treat - Hosting + Web Services Pricing Explainer

Potluck — New Macs × Podcast Statistics × E-commerce Testing × WordPress × Charging More × Learning Web Dev × More!

Hasty Treat - How Would We Script a PS5 Buying Bot?

Serverless, Deno and TypeScript with Brian Leroux

Hasty Treat - 300th Episode Tech Chat

Gatsby vs Next.js in 2021

Hasty Treat - Why should I use React Hooks?

Sickpickisode - 2020 Web Developer Gift Guide

Hasty Treat - Writing Good Commit Messages

Potluck - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More!

Hasty Treat - Client vs Server Data Validation

How to Run a Conference with Benjamin Dunphy

Hasty Treat - CSS Grid Masonry (Grid Level 3)

300th LIVE SHOW SPECTACULAR!

Hasty Treat - Bundlers in 2020