Syntax - Tasty Web Development Treats

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

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


Category: Technology

Open in Apple Podcasts


Open RSS feed


Open Website


Rate for this podcast

Subscribers: 1526
Reviews: 4


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


 Oct 24, 2018

james
 Sep 20, 2018
funny and informative for web devs

A Podcast Republic user
 Sep 5, 2018

Description

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

Episode Date
Potluck — Coding for Kids × MongoDB Hosting × NoMoreFoo × Best Cities for Dev Jobs × GraphQL Resolvers × Package Security × Prototypes and Portfolios × More!
59:48

It’s another Potluck! In this episode, Scott and Wes answer your questions about privacy policies, coding for kids, MongaDB hosting, cloud backups, system design, #NoMoreFoo, and much more!

Prismic - Sponsor

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

Sentry - Sponsor

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

Cloudinary - Sponsor

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

Show Notes

04:49 - Ben Lamers: Heyo Scott and Wes! I am building a web app currently with my brother, and I was wondering when we get to launch it how do you go about correctly writing/adding Terms of Use and Privacy Policy. I’m assuming this may be quite different depending on the platform so maybe general resources or tips for this. Thanks!

06:45 - Fumbles O’Brian: Do you have any recommendations for teaching young children how to code? I have a 5-year-old niece in kindergarten who is absolutely fascinated watching me work, and I’d like to start teaching her basic concepts when she’s able to read/write better. For example, she loves watching me make UI changes in React, it blows her mind that changing letters on one screen changes what a website looks like.

11:01 - Kenny: Gentlemen! Love this show and the content you put out. It keeps me occupied during my 5 and 6 mile runs. Thank you both for working so hard to keep it active, I know it takes a lot of work. I’m curious what you think about hosting your own MongoDB server? I’m relatively new to Mongo but want to start working with it for smaller projects. I’ve used MySQL for a decade, hosted online with shared hosting. Worked well for my relational db needs. Should I host my own Mongo when I’m ready for production, or pay the reasonable costs for something like Linode or maybe even Atlas? I have experience in Linux (enough to get by) and have my own virtualization cluster that I can spin up a server in seconds, along with an enterprise level firewall for managing traffic to and from. I actually just spun up a docker server this week and have a Mongo container running on it, though it’s not accessible outside my network. This is purely for my development environments. Despite the firewall, my concern is security. Is it worth paying for a trusted solution like Linode, or should I put a little time in locking down my own Mongo container for my own use? Thank you both! Keep up the great work.

14:42 - Mike: Not a question but more of a rant… It’s 2021, almost 2022, can we all stop using ‘foo’ and ‘bar’ and ‘baz’ when teaching a programming concept? I applaud both of you because I don’t recall seeing any of your content ever using such atrocious terms, however, I’m sad to see other prominent educators in the web development community use these terms from time to time. I feel like there are so many better examples that we could use to explain a concept and the use of ‘foo’ is just confusing to beginners. That’s all, just wanted to get that off my chest. Thanks for a wonderful podcast! #nomorefoo

18:53 - Amir: Hey Wes and Scott, thank you for your awesome podcast. What are the best cities in Canada and USA to get (more quantity, highest-paying) developer jobs?

23:44 - LW: Hi guys, I am finally starting to get into GraphQL and I don’t get it. Specifically I am working to convert an existing REST API to GraphQL. This seems really tough and there is not much guidance out there on how to do it. The main part I am unsure of is how to write resolvers. If I use the existing query then GraphQL just seems like an over-engineered filter method. If I write an individual resolver for each column in the table - that’s gonna be 100s of resolvers and super annoying to write. Have either of you ever moved something from REST to GraphQL? And, if so, how did you handle this?

27:57 - Dan: How does someone learn and actually practice using these system design topics like load balancing, caching, and database sharding. I have never had the need to use some of these things in my day-to-day work, but recently been interviewing and in the system design portion of the interview I feel a little lost. I’ve read about these topics and watched videos but haven’t really seen how to implement these things. Any good resource recommendations?

31:57 - Matt: How do you know if you can trust an NPM package, from an unknown developer, that does not have many GitHub stars and has relatively few downloads? (The repo that made me ask this question is https://github.com/Wondermarin/react-color-palette). NPM audit automatically runs when you install a package, do any of you ever use additional security checks?

38:32 - Yosef: Hi I’m a beginner front-end developer and I heard you saying that being able to copy prototypes is a valuable skill, so I found some Figma free template and I copied them, the question is can I put them in my portfolio or deploy them?

40:00 - Nick: Hey dudes! I picked up a freelance project to make a brochure-style website and found myself having trouble to decide on what tools to pick for this site. I wanted to ask you and get your take, what tools/tech would you use to build a brochure site? By this, I mean the site should have mainly company information that is ideally editable by the stakeholders and has a contact form. Thanks!

44:22 - Casey: Hi Scooter and Wild Wes! Why do I feel so dirty when I’m forced to use negative values in CSS?

45:45 - Gnommer: Do you use some cloud sync service to backup your directory with projects? I mean OneDrive, Dropbox etc.
I tried to use it alongside with Git, and it just messed my files so badly. On the other side I feel very uncomfortable without any backup apart from Github. BTW, according to last Potluck: polish ‘ł/Ł’ is pronounced like ‘w’ in ‘what a sick podcast you have’. Best from Poland ;)

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Oct 20, 2021
Hasty Treat - Handy Utility Functions with Just
15:21

In this Hasty Treat, Scott and Wes talk about handy utility functions with Just!

Sanity - Sponsor

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

LogRocket - Sponsor

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

Show Notes

03:44 - What is Just?

06:46 - Some nice ones

  • just-safe-set → deeply setting dynamic object properties
    • set(data, 'a.long[0].path', value)
  • object-typeof
    • Why not use typeof?
      • Everything is an object
    • Why not use array.isArray?
      • Handy to have a switch statement
  • just-*-case
    • Camel, kebab, snake
  • just-compare

10:54 - Why?

  • This is the NPM install of Stack Overflow copy+paste
  • Handy as hell
  • Battle-tested
    • Lots of ways to do simple stuff
    • Sometimes the simple stuff has weird edge cases - these are caught
  • Sometimes your checks can be messy
    • Check if an object is empty
    • 25 lines
    • Just install it

12:05 - Other

  • Great to learn and test yourself
  • There are tests for each function
    • Run them
    • See them fail
    • Try and make it so all the tests pass without looking at the source

Links

Tweet us your tasty treats!

Oct 18, 2021
A Podcast on Running a Podcast
52:28

In this episode of Syntax, Scott and Wes talk about running a podcast — recording, sponsoring, where to start, and more!

Freshbooks - Sponsor

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

LogRocket - Sponsor

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

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:45 - Recording Setup

09:13 - Notes

  • Shows begin as a Notion doc
  • Big outlines with a point-based outline to where to go
  • Sometimes points are detailed, other times are just one-word reminders as to what to hit
  • Sponsors pulled from a Notion relational table
  • Shows are created in a kanban board but moved to a calendar view

12:37 - How do you find stuff to talk about?!

  • Technical skills
  • Hasty
  • Tasty
  • Potluck
  • Game shows
  • Collabs
  • Soft skills
    • Productivity
    • Apps
  • We Cooked It: Explainer Episode
  • Add ideas to the list anytime it pops into your head

21:02 - Editing

  • Podcast Royale
  • We record a clap for syncing
  • Upload to Dropbox for our editors

22:07 - Hosting

  • Libsyn
    • Archaic feeling, but covers everything

22:36 - The website

  • Next.js
  • Open source
  • PRs are submitted adding the latest episodes

24:10 - Transcripts

  • Generated

24:40 - Would you still start one?

  • Podcast vs YouTube vs Twitch

29:20 - Getting popular / Marketing

  • How do you do it?
  • Consistency is key
  • Need external audience

35:34 - Sponsors

  • Five to six hours per week in prep
  • Most of our sponsors are products we already used
  • We sell and manage all our sponsors ourselves

42:17 - What about Patreon?

  • Ad-free version?

46:04 - Live shows

  • Confs
  • Livestream

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

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

Tweet us your tasty treats!

Oct 13, 2021
Hasty Treat - Neat Things in CSS Color - Current and Coming!
26:48

In this Hasty Treat, Scott and Wes talk about all things color in CSS, both current and coming soon!

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.

Sanity - Sponsor

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

Show Notes

04:39 - color-contrast()

  • Part of CSS5! Maybe.
  • The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list.

06:01 - Accent color

07:34 - currentcolor

08:54 - Profiled color values - color()

11:00 - color-mix()

14:18 - Space-separated functional color notations

  • rgba(255 255 255 0) instead of rgba(255,255,255,0.5)

15:28 - RGB and HSL with Alpha

  • rgb() and hsl() can take alpha and percent values - rgb(0 0 0 / 50%) or rgb(0 0 0 / 0.5)

18:22 - Hex + Alpha values

  • RRGGBBAA
  • How do you remember?!?!
  • Transparent

21:49 - lch(), lab(), hwb() notation

  • CIELAB color space aka Lab is a color space.
  • A color space is an organization of colors in coordination color profiling supported by various physical devices, it supports reproducible representations of color
  • Lab is intended as perceptually uniform
  • Perceptually uniform - a perceptual uniform color space ensures that the difference between two colors (as perceived by the human eye) is proportional to the Euclidian distance within the given color space.
  • https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/

Links

Tweet us your tasty treats!

Oct 11, 2021
Potluck — Corn Shucking × Self-Hosting Images × WordPress × Getting Scammed × Portfolios
57:39

It’s another Potluck! In this episode, Scott and Wes answer your questions about corn shucking, self-hosting images, WordPress, getting scammed, portfolios, more!

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.

Auth0 - Sponsor

Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax

Show Notes

02:55 - Hey guys, I love the podcast! This is a silly question and possibly the least important potluck question you’ll ever get. When you get a new Apple device like an iPhone, Apple Watch, or Macbook Pro… do you keep the box? Why or why not?

06:56 - Hey guys! Awesome podcast! Could you go over the advantages and disadvantages of using local images vs external images service (e.g. Cloudinary) for displaying images on a web app?

11:26 - Heyyyy Scott and Wes! 40-year-old lady here looking to make a career change. It’s taken me a year plus, but after building several tutorial React apps, I finally built a fullstack JavaScript app of my own, with lots of rad Postgres database stuff, a bunch of secure Node/Express API endpoints, role-based access control, fancy Oauth, and of course the latest React tech (context, hooks, etc). I’m pretty proud of it. I even managed to configure Nginx and deploy it to AWS. The only problem is…it looks like crap. My portfolio site itself is pretty darn slick, since I used a gorgeous Gatsby template that required only a bit of tweaking. But the site I architected and worked so hard to bring to life? It looks like an 8-bit game for toddlers, a responsive yet Bootstrapy game. My question: does this matter? I would hope that this project shows off my backend skills, but I’m afraid they’ll judge a book by its cover. (I guess a second question would be: how do you show off your backend skills? I have a README in my repo, but will they actually read it? Or, can you be a fullstack React developer with no design skills?) I am very, VERY ready to apply to jobs (emotionally and financially), but I am terrified of making a fool of myself and worried I’ll never get hired. I am completely self-taught and have just been plugging away at this on my own for the duration of the pandemic, so I send a massive thank you to you guys for the sense of community that your show provides! Props to Wyze sprinkler controllers!

16:14 - Scott, I just finished your “SvelteKit” course and now I’m working on “Building Svelte Components”. I have some questions regarding testing. I was listening to an interview with Rich Harris on Svelte Radio and it’s my understanding that the framework is trying not to be opinionated as far as testing. What are you doing as far as testing with SvelteKit? Do you have any recommended packages/plugins/libraries? I’ve only ever written unit tests with Jest in Vue. I’m loving Svelte, but I really want to work on writing tests as well. Basically, everything/anything you’ve got on testing with SvelteKit would be much appreciated. I’ve been listening to the show since forever, you guys are both awesome, shout out to Wes too, you’ve both taught me so much! Thank you, peace, love, and happiness <3

20:25 - Hi Wes and Scott, I am weak when it comes to dev ops. I would like to confidently set up and deploy my applications on AWS and manage dev/prod environments. Any course recommendations to learn how to do this and how it all works so I really understand? If you don’t personally, can you tweet this out so other developers can share their thoughts?

22:30 - You both have praised MDX in the past but why would you use it? I understand that it lets you put JSX in your Markdown, but that seems counter to the purpose of using Markdown files for content. Markdown is a portable format for static content and independent of any front-end framework. That makes it a good choice for writing posts and rendering them in any site. Once you inject a React component into it, doesn’t that eliminate the portability and the static nature of Markdown? At that point, why not just have a dynamic website where you have complete control of how content is rendered? What are your thoughts?

27:14 - Hey Scott and Wes! I, like you both, am a developer with young kids (I have 3 boys age 6 and under). Needless to say, my house has a lot of energy in it. My job is quite flexible, which I appreciate, because it gives me some freedom to structure my day in a way that helps out my family. My question for you both is this: as a web developer with a spouse and young kids working from home, how do you both maintain a healthy work-life balance (avoid working too much, find time for yourselves, family time, etc.) Thanks so much!

33:46 - Should I write a portfolio site using just the three fundamentals (HTML, CSS, JS) or should I write them in something I am comfortable with such as Angular/React? Unsure if using a framework for a portfolio site is a good idea.

36:38 - How do you handle hosting when using WordPress as a headless CMS with something like Gatsby? WordPress needs good PHP hosting, while Gatsby needs good CI integration.

38:52 - How frequently do you use div tags, versus trying to find a ‘better’ tag? Love the pod btw.

40:48 - This is less of a question and more of a heads up for other listeners. Beware of scam job opportunities. I recently encountered a scam where they used a website that seemed like a very normal and reasonable job board for a major company. I went through the whole process until they asked for personal info, and I asked for verification of their person. They couldn’t provide it so I left. But they had profiles matching the actual employees at the company. They had emails. They had an HR department and employees. They had a very legitimate operation going on. Make sure to take a second and verify with the company before giving away personal information or depositing any of their money into your account.

47:38 - What percentage of North Americans keep their mobile device longer than three years? Five years? Eight years? I am a freelancer and I want to put a clause in my contract of what age of device my app will support, but I can’t seem to find this information. Just more general answers like “most people expect a phone to last two-three years.”

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Oct 06, 2021
Hasty Treat - Spicy Takeout - PHP Is Good and We’re Just Re-Creating It
21:43

In this Hasty Treat, Scott and Wes talk about how much modern web development has taken from PHP!

Freshbooks - Sponsor

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

LogRocket - Sponsor

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

Show Notes

03:56 - Why much of modern web development is just recreating PHP

  • Everyone loves to hate on PHP, but modern Web dev takes a lot from PHP

05:44 - Mixing templating and logic

  • We do this with JSX

07:39 - Each request has its own scope

08:57 - Massive standard lib

  • Format a date? No sweat!
  • Image resizing? Sure!
  • Audio bindings? Sure!

10:16 - URL-based routing

  • Next.js pages
  • Serverless functions

11:13 - Server-rendered

11:38 - $_GET, $_POST, are just available

12:29 - Variable interpolation

12:59 - All-in-one frameworks

13:32 - Direct DB access

  • SQL statements

14:37 - Why do people hate PHP?

  • WordPress
  • Inconsistent API
  • Their first code was PHP and they sucked
  • PHP has come a long way
  • It used to not be safe
  • Blocking by default - no async/await

17:48 - Why is JS still better?

  • Shared code between frontend and backend
  • Single language
  • Huge ecosystem (could be a con)

Links

Tweet us your tasty treats!

Oct 04, 2021
Changelog Frontend Feud
53:15

In this episode of Syntax, Scott and Wes do a crossover episode with Changelog’s JS Party! Your favorite web dev podcasts join forces for a super collab that’ll knock you frontend off! Amelia joins Chris Coyier and Dave Rupert from ShopTalk Show, while Divya teams up with Wes Bos and Scott Tolinski from Syntax. Let the FEUDing begin!

.TECH Domains - Sponsor

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

LogRocket - Sponsor

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

Mux - Sponsor

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

Show Notes

02:49 - Frontend Feud Rules

04:06 - Round 1

10:28 - Round 2

17:26 - Round 3

25:37 - Round 4

35:15 - Round 5

42:03 - Round 6

Links

Shameless Plugs

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

Tweet us your tasty treats!

Sep 29, 2021
Hasty Treat - Desktop Apps + New Tech We Love
32:30

In this Hasty Treat, Scott and Wes talk about the hottest new tech they love!

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

03:30 - Lucy Language

06:10 - MDSvex

09:56 - RECut

12:26 - Fig

  • https://fig.io/
  • It’s an app you install on your computer, it adds autocomplete to your terminal
  • Works with most popular terminals
  • Autocompletes git commands
  • NPM commands + tons more - npm install ___ works
  • Adds descriptions of what each command does
  • Mac only - again another reason why Mac is best!
  • Themeable
  • Why not use Fish/ZSH?
    • This isn’t a replacement for anything, it’s just autocomplete on top
    • These fish plugins are to vim, as Fig is to VS Code
    • Better UI is KEY

15:56 - Warp

  • https://www.warp.dev/
  • Rust-based termnial
  • Very fast
  • Extensions and themes
  • Share commands and sessions
  • Great for remote server dev
  • Share terminal state - with share links

19:33 - Raycast

  • https://www.raycast.com/
  • App launcher
  • File Finder
  • Workflow runner
  • Everyone is asking why is it better than Alfred
  • better UI
  • Better outputs math
  • Better defaults - currency conversion
  • Fast as hell
  • Better integrations
  • More Flexible

21:26 - Table Plus

23:59 - Obsidian Update

  • Wes: I haven’t got into it - find myself still going back to VS Code

26:50 - Descript Update

Links

Tweet us your tasty treats!

Sep 27, 2021
From React To SvelteKit
55:27

In this episode of Syntax, Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, and more!

Prismic - Sponsor

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

Sentry - Sponsor

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

Cloudinary - Sponsor

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

Show Notes

07:28 - Thoughts

  • Apples to oranges, so unfortunately, no super legit ability to compare.
    • SvelteKit isn’t analogous with a custom React setup that uses CSR
      • SSR is usually going to be faster - we can ship less JS
      • Some big things changed beyond React → SvelteKit
      • HLS starts grabbing chunks immediately, so it’s hard to get accurate load time and transfer.
  • Whole conversion took a couple of months.
  • Hardest part was making UI choices and changes, straight up converting components one by one wasn’t actually that tough

16:14 - Converting React components to Svelte

  • useState becomes just a straight-up variable
  • Graphql calls were hooks now just imported generated functions
  • Remove extranous fragments
  • Convert {things && } to {#if thing}{/if}
  •  becomes 

24:06 - Spark joys

  • State
    • Our checkout flow became way more transparent, way easier with Svelte stores
  • Render flow
    • Was never something we needed to really think about. Didn’t think about memoizing, or worrying about too many renders down the line, just never needed to
  • Overall developer experience
    • It’s honestly a joy to work in and I don’t want to go back
  • Making a library
  • Creating a sitemap was extremely easy, because of server-side routes. file.returnformat.ts ie sitemap.xml.ts
  • CSS without a css-in-js library for scoping is a dream. CSS props are now 100% via CSS variables using the https://svelte.dev/docs#style_props
  • Animations are all done with Svelte’s internal animations lib

32:45 - Hosting

  • adapter-node
  • Hosted on render.com as a straight-up node process $7/m for more than enough RAM and CPU,
  • Lots of other options for static, Vercel, workers whatever, I like having just a straight-up node app you can host anywhere

35:50 - Things to do

  • Admin tools

37:00 - Challenges

  • ESM is not always smooth sailin
    • Import has from ‘lodash/has’ didn’t working in dev, but import has from ‘lodash/has.js’ didn’t work in prod.
      • Solution was to use lodash.has as the dependency
      • Apollo included all React as a dep unless you import from @core
  • TS is great, but there was once where I wanted to define the entire props ts object for a spread prop, but was not possible
  • Drag animations

Cloudinary

42:46 - Wes’ questions

  • What about the ecosystem?
  • What about forms + DOM data?
  • Serverless functions?
  • Do you always bind to state? Or just access directly?
 formData = writable({   title: "yo" })  {$formData.title}    

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Sep 22, 2021
Hasty Treat - Webhooks
21:35

In this Hasty Treat, Scott and Wes talk about webhooks — one of those concepts that seems a lot scarier than it actually is.

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.

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:42 - What are webhooks?

  • User-defined HTTP callbacks
  • When something happens, ping this URL with this data
  • Examples:
    • When something sells, ping this URL
    • When someone reverses a charge, lock their account
    • Trigger a build of the website when the content changes
    • Then someone buys a shirt, generate a shipping label and save it to the DB

07:57 - Sending End

  • Can be a great way to hook two services together

09:13 - Receiving End

  • Often you will be the one that accepts the webhook ping
  • In this case, you set up an endpoint

11:00 - Payloads

  • Almost all will send a JSON body that you parse out
  • The method send is variable

11:51 - Auth

  • On the receiving end of a webhook, you often get a token which you can then ping the service with. It will tell you if that request was legit or not.
  • On the sending end, you can often set up headers with auth - same with the method
  • Can be a replacement for a serverless function

13:18 - Testing webhooks

Tweet us your tasty treats!

Sep 20, 2021
New to JavaScript — ES2022
38:41

In this episode of Syntax, Scott and Wes talk about all the new stuff in ES2022 — what it is, why you might need it, and how to use it.

Sanity - Sponsor

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

LogRocket - Sponsor

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

Auth0 - Sponsor

Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below: https://a0.to/syntax.

Show Notes

04:50 - Regex indicies

  • New d flag in a regex
  • https://regex101.com/
  • This will tell you the indexes (indicies) of the regex matches
  • Handy if you need to highlight or replaces matches in a string
  • We can ask for the start and end positions of each matched capture group

07:16 - Class updates

  • Private fields
  • Properties and Methods to be kept private
  • Prefix them with a #
  • =Helpful for internal state and methods which should not be accessed directly or at all by external
  • In React how we have __INTERNTAL_NEVER USE THIS
  class ColorButton extends HTMLElement {   // All fields are public by default   color = "red"    // Private fields start with a #, can only be changed from inside the class   #clicked = false }  const button = new ColorButton() // Public fields can be accessed and changed by anyone button.color = "blue"  // SyntaxError here  console.log(button.#clicked) // Cannot be read from outside button.#clicked = true // Cannot be assigned a value from outside  
 class Person {   #hobbies = ['computers']   get #hobbiesGetter() { return this.#hobbies }     #getHobbies() { return this.#hobbies }     getHobbiesPublic() { return this.#hobbies } }  const scott = new Person();  scott.#getHobbies(); // doesn't work scott.getHobbiesPublic(); // works  

09:07 - Class fields

  • This may seem super old because we have been polyfilling it forever
  • Right now if you want an instance field on a class, you need to declare it in the constructor
  • Now we can just declare them inside the class

10:36 - Static fields and methods

  • As above can also be static with the static keyboard
  • Works for methods too
    • Explain what a static method is

13:17 - Top level await

  • So handy in modules. Need to pull in some data? Simple.

15:19 - Ergonomic brand checks for private fields

  • Used for checking if a private field on a class exists using the in keyword

16:00 - .at() method

  • Strings and arrays - we can use square brackets to reference items of the array
  • Super handy for grabbing the last item of an array
 // 🔥 New .at() method on arrays and strings  const toppings = ['pepperoni', 'cheese', 'mushrooms'];  // The old way to grab the last item toppings[toppings.length - 1]; // mushrooms  // using .at() method with a negative index toppings.at(-1); // mushrooms  // works with any index toppings.at(0); // pepperoni toppings.at(-2); // cheese  // and with strings! 'Meeting Room: B'.at(-1) // B  
  • Why not use array[-1]?
  • We used to use slice(-1)
  • What about indexOf?

21:34 - Handy hasOwn method

24:51 - Class static block

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Sep 15, 2021
Hasty Treat - Starlink Rural Internet
21:14

In this Hasty Treat, Scott and Wes talk about Wes’ new satellite internet setup — best use-cases and how to set it up.

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.

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

04:06 - Rural internet is huge for:

  • Access to information
  • Remote work
    • Opens up job opportunities for many residents who can’t relocate due to family
  • Home values
    • Big city folk moving into rural areas and driving prices up is another issue altogether
  • Smart rural home

05:46 - Previous setup

  • We have a cottage
  • LTE Routers
  • Yagi Antennas
  • Worked well, but slow
  • $4/gig over 100gb
  • Grey market - one went up/down
  • Alternatives
    • WISP - no access
    • XPLORNET @ (hughesnet) - BRUTAL
    • Bell LTE - $$$ - slow

08:35 - The signup, install, price

  • $129 CAD Deposit ($100 USD)
  • $650 for the dish
  • $120/month
  • Unlimited bandwidth
  • Needs a clear view of the northern sky
  • Clear from obstructions is key
  • Every 1 foot up is 2 foot of obstructions cleared
  • I put it on a 25ft piece of wood
  • Bought a pipe adaptor from Starlink

09:59 - The performance

  • These numbers are not impressive to anyone with fiber, but are LIFE CHANGING to rural folks
  • From 30mbps - 200mbps down - some users posted ~350 down
  • Upload from 25mpbs - 80mbps (better than you can pay for where I live in the city)
  • Ping is around 40ms
  • Downtime is measured in seconds
  • Youtube streams super smoothly
  • Zoom works great
  • Facebook + Instagram issues
    • Many reported changing DNS fixed it

14:21 - The equipment

  • Starlink comes with a router
    • Does not support bridge mode
    • Doesn’t have WPS
    • Only one hard-wired port
    • POE-only
  • UniFi Dream Machine
  • Three access points
  • POE switch for Starlink Router
    • Gives you stats
  • The ethernet is hard-wired into the dish, so you have to drill a huge hole in the house

Links

Tweet us your tasty treats!

Sep 13, 2021
Potluck - Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity × More!
53:01

It’s another Potluck! In this episode, Scott and Wes answer your questions about Sass, Houdini, JS requirements, tips for your first dev job, dev laptops, databases, Frontity, and more!

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.

Auth0 - Sponsor

Auth0 is the easiest way for developers to add authentication and secure their applications. They provide features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax

Show Notes

02:35 - What are the use cases of SASS/SCSS in 2021? Would you still choose it over CSS (or something else?) in a new project?

05:26 - What ever happened to CSS Houdini?

08:49 - With all these JS being transferred, have you ever tried to challenge yourself to build a project that doesn’t involve any JS (in the front end alone); (e.g. just HTML+CSS)? I find it funny how I can pretty much use amazon.com with JS disabled, but I literally cannot view the angular docs if I disable it.

11:40 - As we all know, Tim Berners-Lee made the web. Apparently, after seeing everyone’s data getting harvested by tech companies, he decided to make a project called Solid (https://solidproject.org/) that allows people to own their data and control all permissions to it. So if a user logs into your app with Solid, rather than storing their info on your server, you’d store it in their Solid Pod. Do you think this could save both Web developers’ conscience and disk space in the cloud?

15:47 - I am about to start my first developer job. What practices can I start to really get off on the right foot and lay down a foundation for a successful career?

18:57 - Have you guys ever used your dev skills to trade for other goods or services? For instance, helping out an auto mechanic with their website in exchange for brake service on your car or creating a site for a barbershop traded for free haircuts for a year. If so, how do you go about starting that conversation?

22:14 - What’s your take on DRM? Have you implemented/integrated something like Widevine in any of your platforms/projects? How does one go about doing such a thing? I can’t seem to find any good docs on that. I personally can relate as to why it’s there, but end up hating it anyways. I recently found out that Prime Video only allows SD(sub HD) content on Linux and it had something to do with the Widevine DRM they employ. I got outraged and eventually canceled my subscription!

29:35 - Have you seen the Framework laptop and, if so, what are your thoughts for web development? I’m a lifelong Mac user but the idea of a higher repairable laptop running Linux (I personally can’t do Windows) sounds like an amazing step forward for consumers.

32:53 - I know that you both like MongoDB and so do I. But sometimes all these queries to database, especially aggregations gets messy, aren’t they? Prisma has now support for MongoDB. What do you think? Is it a tool that will make requesting MongoDB much easier?

37:02 - Hey guys, been diving into Svelte a bit recently and had a question about using it with GraphQL. As I recall Scott once deemed React Typescript GraphQL CodeGen “the promised land” and since then I tried it out and have found it awesome. However, I’ve been debating moving a larger personal project from React to Svelte. I see that there is plugin for graphql-codegen-svelte-apollo but with my limited knowledge of Svelte find it hard to decipher if the development experience would be as streamlined. I am wondering if you could shed some light on the developer experience of working with GraphQL in Svelte in Typescript.

40:58 - Do y’all have any thoughts about Frontity for WordPress? I swear I’m not a plant for Frontity, but I stumbled upon it today and I’m trying to evaluate it vs. other solutions like Next.js for use in a headless WordPress setup. Would love your thoughts if you have any!

43:40 - Call me weird, but I kind of like fiddling around with webpack configs. I just like the level of control I have here. That being said, is webpack going to die now that the “better” tools out there mature? Or do you think we might see a webpack v6 with esbuild under the hood that makes it compete with Parcel, Vite, Snowpack in terms of speed?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Sep 08, 2021
Hasty Treat - TypeScripts Strict Explained
17:35

In this Hasty Treat, Scott and Wes talk about the Typescript strict flag — what it does and why you might use it.

Sanity - Sponsor

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

LogRocket - Sponsor

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

Show Notes

02:50 - What is it?

  • Future versions of TypeScript may introduce additional stricter checking under this flag, so upgrades of TypeScript might result in new type errors in your program. When appropriate and possible, a corresponding flag will be added to disable that behavior.

03:26 - noImplicitAny

  • The any type in TypeScript is exactly that - it can be anything.
  • TypeScript will try to infer the type. When it can’t it will be any.
  • Sometimes you need any, but if that is the case, you must explicitly type it as any.
  • If something is implicitly any - it might be a mistake, or you forgot to type it. Risky!

06:01 - noImplicitThis

  • You must type this - it can’t be implicitly inferred.

06:47 - strictFunctionTypes

  • If you have a type that is a function and it doesn’t 100%.

07:44 - alwaysStrict

  • Always turns on strict mode. You can’t do things like redeclare var variables.

09:25 - strictNullChecks

  • Makes you check that the item is actually there before accessing a value or method from it.
  • Imagine you filter or find on an array, or query selector a DOM element. There is a possibility that nothing is there. strictNullChecks makes you check that it’s there - like an if statement.
  • Optional chaining is super handy here.

11:18 - strictBindCallApply

12:38 - strictPropertyInitialization

13:37 - useUnknownInCatchVariables

Links

Tweet us your tasty treats!

Sep 06, 2021
STUMP'D - Coding Interview Questions
49:57

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

Freshbooks - Sponsor

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

LogRocket - Sponsor

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

Auth0 - Sponsor

Auth0 is the easiest way for developers to add authentication and secure their applications. They provide features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax

Show Notes

03:10 - What is STUMP’D?

04:27 - What is a first class function?

06:27 - What is the purpose of using object is method?

09:31 - What is the purpose of Error object?

11:00 - What are the advantages of minification?

12:37 - How do you declare namespace?

15:38 - What are JS labels?

19:20 - List the methods that are available on a WeakSet?

  • What is the difference between a set and a WeakSet?

23:33 - What is the use of preventDefault method?

26:15 - What is a spread opperator?

27:35 - What is the output of below spread operator array?

  • [...'John Resig']

30:19 - How do you load CSS and JS files dynamically?

32:00 - What are tasks in event loop?

34:15 - What is a WeakMap?

37:35 - How do get query string values in JavaScript?

40:50 - What is the purpose of some method in arrays?

42:15 - How do you delete a cookie?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

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

Tweet us your tasty treats!

Sep 01, 2021
Hasty Treat - Freelance Tips - Toxic Clients
24:51

In this Hasty Treat, Scott and Wes talk about toxic clients — how to identify them, and what to do about them.

Linode - Sponsor

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

Sentry - Sponsor

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

Show Notes

05:33 - Warning Signs of a potential toxic client

  • Doesn’t have project well thought out.
  • Scope creep - Adds on new features while not considering the amount of work required to make them happen. Can be mad when you run out of time or budget.
  • Ill Communicator
    • Contacts you at odd times.
    • Thinks that you should answer every email in an hour.
    • Contacts you in inappropriate ways, via text message, social media. OR doesn’t respond to emails in a timely manner giving you blockers.
  • Jerk
    • The rude client
    • Thinks they can be rude because they are giving you money
    • Hundreds of emails
  • Tries to be flashy upfront (dinners, etc.)
    • Scatterbrain or way too big.
    • Facebook for nurses

18:06 - What to do about toxic clients

  • Communicate your needs clearly. Set expectations.
    • “I work best when…”
    • “I answer emails once every two days”
    • Set clear deadlines for deliverables, feedback and revisions (one revision backed in, more at x hourly rate, etc.).
    • Just be VERY clear. If something doesn’t work for them, they will hopefully tell you.
  • Get things in writing.
    • Put things clearly in a working agreement for your client to approve. That way you have something to show in case things go south and you can say, “You agreed to the following things”.
  • Fire them
    • You can fire clients. Honestly, some of them just aren’t worth the time and effort. It’s usually the cheapest clients who demand the most from you. Don’t let them take more of your time and energy than they are paying for.
    • Firing clients is very simple.
      • Hi so and so, I don’t feel like we’re a good match for this project, so I’ll be canceling our work agreement. Good luck on your project.

Tweet us your tasty treats!

Aug 30, 2021
Advice for New Devs
56:52

In this episode of Syntax, Scott and Wes talk about advice for new devs, our advice and opinions for how new devs can level up.

Sanity - Sponsor

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

Sentry - Sponsor

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

Cloudinary - Sponsor

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

Show Notes

01:59 - Get comfortable with your code not working

  • All of our code is broken much of the time.

02:40 - Compound learning and momentum is your biggest tool

  • There is no formation without repetition.
  • It sucks to hear, but honestly, if you get a little bit better every single day, you will be WAY ahead in years to come. Keep at it, keep chipping away, take the lows and the highs.

04:05 - Learn to read error messages

  • Is this error coming from my code?
  • Is this coming from the library? If so, maybe the library wasn’t expecting that.
  • Is this coming from the browser? An extension? Is it even related?
  • Stack trace is a treasure map

09:42 - Take the time to learn the concepts that scare you

  • They are often easier than they seem (though not every time).

10:40 - We all struggle

  • This stuff is hard — give yourself a break.

12:56 - Taking a walk is good for solving bugs

  • It’s hard to walk away from broken code, but it really helps.

14:33 - Get comfortable with the command line

  • You’ll need it

18:09 - The ability to replicate a design pixel perfect is a valuable skill

  • You will be shocked at how many devs can’t or don’t do this. If you want to avoid spending extra time on something, don’t make the designers tell you to go back and fix simple spacing, color, and detail things.

21:26 - You are on a team

  • Don’t get stuck in the "us vs them" mentality of internal company teams (e.g. devs vs designers). You are all working together to make something.

24:10 - You are not an expert

  • Even if you think you are an expert, you should always be seeking out alternate viewpoints and ideas. You are a student forever in this game.

26:14 - Scaffold with comments

  • It helps keep you organized once you get into the mess

28:30 - From Twitter

29:30 - Ben Newton

32:46 - Eric McCormick

33:31 - Jason Liggi

35:34 - Andrew Nickerson

37:15 - Michael Powers

39:33 - Jason Liggi

40:14 - Swashata

49:59 - Max Stoiber

43:34 - Pat Clarke

44:21 - Musa Barighzaai

45:20 - David Moore

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 25, 2021
Hasty Treat - Why Do People Hate CSS?
18:51

In this Hasty Treat, Scott and Wes talk about why people hate CSS, some common issues, and how you can level up.

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:20 - Layout is hard

07:43 - I can’t get my thing to get the right style

  • Use a scoping system like BEM, CSS in JS, CSS Modules
  • Don’t style via IDs
  • Avoid !important

11:00 - My thing isn’t looking the way it’s coded

  • Dev tools
  • Write CSS in the browser
  • Check class names

12:11 - I don’t know if I can delete this CSS

15:51 - Look at things holistically

Tweet us your tasty treats!

Aug 23, 2021
Potluck - Moist code × Memoization × Ready for full-time? × Deadlines × Design ethics × React components × Video hosting × Local fonts × More!
56:29

It’s another Potluck! In this episode, Scott and Wes answer your questions about memoization, how to know when you’re ready for a full-time dev job, what to do when you underestimate projects, design ethics, local fonts, and more!

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.

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

04:07 - Can you explain the concept of memoization in JS?

07:27 - I’ve been developing for a while now and I was wanting to know if there is some sort of catalyst that I should be aware of that screams “you’re ready for a full-time job”?

09:26 - I have an ethics question for you. I recently took on a freelance gig that requires a custom admin dashboard, and I wasn’t really sure how to design one of those. My solution was to look up a pre-made Bootstrap dashboard template that can be purchased for $50-$500, and just re-create it myself. I looked at their live demo and reconstructed a very similar dashboard myself, using the same UI library. The outcome is not a perfect copy, although it’s very close, and I never looked at their code base, so there’s probably many differences there. But still, I can understand why some people might be upset by my attempt to copy someone else’s design. I’m not reselling it as a theme, just using it my freelance project with one client. What are your thoughts on this?

16:36 - How do you decide how specific a (React) component should be?

22:03 - My question is about the npm run eject feature of React. Is there a place where I should be using this feature or can I keep on ignoring that it exists?

24:04 - My question is for Scott. In one of the episodes in the past, you mentioned that you use YouTube private videos on leveluptutorials.com using some kind of authentication. If I am not mistaken, you use a different platform to host videos now. Was there any reason to stop using that technique?

31:13 - I’m setting up a webinar. I’m going to require an iLok drive to access the FTP site, so I head over to Ali Baba, and I’m on Ali Baba to buy the things, and I should mention my main concern would be data miners. I mean they’re just like cyber-crackheads, really. So, I would imagine that any latency issues could be compensated through a registrar handshake with the firmware, and I’d love to see a combination of both flash and HTML5, so my question is, would the eCommerce piece embed on the host platform, as well as the dialogue field for user names? Or, would the gateway socket extension be full duplex, as well as the packet switchover?

33:33 - How do you allow users to edit text to their profile or to messages they send to other users, without sacrificing the safety and security of your site?

38:07 - Any tips on how should I use npm packages in Netlify functions? I read that I could commit node_modules (which for me sounds absolutely barbaric) and I also read that I could install netlify-lambda package with an additional postinstall script in the package.json. What’s your approach?

41:07 - Can you disable local fonts from the OS and check if the site actually loads them?

46:02 - I have a question related to freelancing. Yesterday I took on a new client project. Price is locked in and contract is signed. Thing is, I am new to web dev freelancing and I now realise I have totally miscalculated the complexity and size of this project. What I initially estimated I could do in 3-4 weeks suddenly looks more like 6-8 weeks of work for me. Do I break the bad news for the client and ask to extend the deadline, outsource part of the work (which might lead to more hassle), or just buckle up and prepare to pull several all nighters to get on top of it? What would you do?

49:09 - Question to Scott: Have you ever thought of calling your students Scott’s Tots?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 18, 2021
Hasty Treat - The Weird and Wonderful Link Tag
16:42

In this Hasty Treat, Scott and Wes talk about the  tag — why it’s weird and wonderful, and what you can do with 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

04:16 - What is it?

05:11 - CSS / Media attr

07:13 - Web fonts

08:09 - Favicons

08:36 - Preload + Prefetch Resource

  • Audio, document, fetch, font, image, script, style, track, video, worker + more

10:15 - Fetch request (shoutout Ryan)

11:27 - Preconnect

  • Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins.

13:01 - Module

13:30 - Integrity

  • SHA

Tweet us your tasty treats!

Aug 16, 2021
How to Build a Website — The Show For Beginners
01:01:22

In this episode of Syntax, Scott and Wes talk about the basics of building a website — how to get started for beginners!

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.

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:20 - HTML

  • HTML is the language you write to get text and elements to show up on the screen
  • Elements can describe the content they contain
    • p
    • img
  • Or be structural and describe the areas of the website
    • div
    • h
    • header, footer
  • Listen to our ep on HTML elements to learn more about them: Syntax 354: The Surprisingly Exciting World of HTML Elements
  • HTML elements have default styling applied to them before you write any CSS
    • This comes from the browser and can be manipulated
    • However, by default all elements are either block or inline-display

08:11 - CSS

  • If HTML is the bones, CSS is the clothes and skin
  • CSS dictates how a website looks
    • Without CSS, you have text on a blank page and images
  • CSS stands for Cascading Style Sheets (“cascading” being the key word)
  • Adding CSS to a page
    • Link tag
    • Style tag
    • Inline styles
  • Selectors
    • You can select an element on the page via element, class, id, attribute
    • Syntax is selector, brackets, property, value
  • Property
    • A property is what you are changing (e.g. background-color)
  • Value determines how the thing looks
    • background: red;
  • Specificity
    • Specificity is a big part of the cascade. When you apply one style to something, you need to learn how to target things appropriately. This is a huge part of being good at CSS.
    • People develop systems like BEM to organize this
    • General rules - Use elements for base styling and classes for specific styling. Don’t use IDs for styling.
    • !important exists to override everything, but as a general rule, NEVER use it. Seriously.
  • Some interaction
    • Most interaction is done in JavaScript, but CSS has some basics
      • hover, active, focus
  • Pseudo selectors
  • You’ll often see people reaching for libraries to make CSS easier and more consistent
    • Common examples are Bootstrap, Foundation, and TailwindCSS
    • For the most part you’ll want to avoid these until you have a good understanding of the cascade, how CSS works, and how to write good CSS.
  • In addition to properties, you can now write your own custom properties for CSS.
    • While this could be seen as an advanced technique, I believe the new normal is CSS variables first.
    • CSS variables are indicated by —variableName: value; where variable name takes the place of a property.
    • You can then use the variable via var(—variableName) in place of a property. This allows for easy duplication of same values across your style sheet.

37:08 - JavaScript

  • JavaScript is used to add interaction to a website
  • It makes your website dynamic

JavaScript the Language

  • We have a base programming language that has nothing to do with HTML
  • It has things like:
    • Variables - ways to store things
    • Numbers + Math
    • Data Containers - Objects and Arrays
    • Functions - Code grouped together to achieve a certain purpose
  • It also has a “Standard Lib” which means JavaScript comes with built-in support for doing common things:
    • Formatting time + money
    • Alerting the user
    • Logging a value to developer tools
    • Capitalizing things
    • Sorting lists of things
    • Round or randomize numbers
    • Fetch data
    • Talk to a sever
  • Promises
    • Logic and flow control

JavaScript the DOM

  • When the HTML is loaded, it’s parsed into something called the DOM (Document Object Model)
  • Events
    • JavaScript is mostly event-driven - when something happens, do something else
    • When you click something and want something else to happen
    • There are lots of events
      • mouse, touch, pointer
      • Ready
      • Forms
        • Submit, change, keyboard, etc.
  • Can be used to fetch data
    • fetch() - you’ll often hear it called Ajax, or XMLHttpRequest
  • Can be used to make more HTML
    • Whole set of APIs for creating elements
  • The DOM can be traversed

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 11, 2021
Hasty Treat - TypeScript Utility Types
16:43

In this Hasty Treat, Scott and Wes talk about TypeScript utility types — what they are, why you might use them, why they exist, and more!

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.

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 - Levels of using TypeScript

  1. Typing your code
  2. Typing your code, but getting a little bit more dynamic using utility types
  3. Creating your own utility types!

07:29 - Partial

08:23 - ReadOnly

09:00 - Required

09:33 - Record

  • A record is an object type that is a bit more restrictive
  • Say you want to store podcast details - name, URL, showCount, etc., but only for Syntax and Shoptalk.

10:47 - Omit

  • I find this one handy when I want to create a “Create Item” type, where it has all the item fields except the ID field

11:34 - Pick

  • Given a type, pick these properties

12:39 - Return Types

  • Gives you the type that is returned from a function. Handy if you need to dynamically generate the type based on a passed function.

13:30 - Case

  • These case types are useful for when you are doing template literal types
  • Uppercase
  • Lowercase
  • Capitalize
  • Uncapitalize

Tweet us your tasty treats!

Aug 09, 2021
Potluck - WordPress × 3rd-Party Cloud Services × Backend Hosting × Drupal × Getting Clients × GPS vs BEM × More!
49:07

It’s another Potluck! In this episode, Scott and Wes answer your questions about WordPress, Drupal, using SSGs, finding clients when you’re just starting out, scoped CSS, 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.

RevenueCat - Sponsor

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

Show Notes

01:48 - Most small businesses I know have heard of WordPress and it seems like it’s the industry standard for brochure sites. I’m tired of 1-5 page freelance WordPress sites. I love front-end coding and design. Do I need to “sell” people on static sites or are there freelance jobs out there for Vue/React/whatever static sites for developers? I want to stick with small businesses and a few other niches, but I’m tired of drag-and-drop builders in WordPress. Plus, I feel WordPress is overkill for a majority of sites. I just want to code sites and freelance.

08:53 - I wanted to get your opinion on 3rd-party cloud services that provide some application functionality. Things like auth0, Algolia, open cart etc. I work for a large enterprise where there is a real fear of trusting these companies with our data and so everything is built from the ground up, with less time, and we miss out on some of the sweet features these services provide. Do you use many services like this in your production apps and how would you decide which to use?

16:03 - I recently took Wes’ Advanced React course and went on to build my first custom React app! Thanks Wes! When the time came to deploy the app, I was surprised by the asymmetry in hosting options for the front vs. backend. It seems that there are 1000 slick, free-teir options for hosting my front-end. But finding a host for my Keystone backend: barf. I messed around with Heroku but troubleshooting was a nightmare, and I eventually settled on a Digital Ocean droplet. My inner system admin is secretly happy to have another OS instance to manage, but I hate paying 5 dollars a month to host a silly project that will probably never be seen by anyone, and I’m already irritated with the amount of care and feeding the backend needs. What gives? Why are there so many choices for frontend hosts and so few for the backend? Are there hosted backends that have auth, database, image hosting, etc and take care of the nitty-gritty with a newbie-friendly free-tier? Maybe I should I be looking into serverless?

23:21 - Since Drupal has evolved beyond awkward kloog of v7 entity/ctools/json-services/phptemplate erc into v9 with excellent graphql/json/rest support and tomb(?) for non drupal web would you recommend Drupal as for a blogger/businesses’ internal network doc/publishing/communications system (ie Drupal not as website itself)?

29:43 - I have just started my web development freelancing business and I feel like I am having a hard time getting a lot of response from small business who currently don’t even have a website (or have a terrible one). Is there any advice you can give about talking people into hiring a web developer when they CLEARLY need help? I plan to use NextJS and Sanity for all of my sites. My first client project is already built using it and it was a great developer experience!

34:30 - What would you guys consider the best alternative to the BEM naming convention? I personally follow a method with very few classes (I’ve seen this called GPS) which takes advantage of the CSS cascade, but I do think it may suffer from readability problems if I handed my stuff to another developer to work on. Interested to hear your thoughts.

39:16 - I have been self teaching myself web development for a little over a year now and your show has been a big help! I am getting to the point now where I feel I am nearly qualified for jobs and will be starting the application journey soon. I currently work in supply chain management at a big corporation with a background in industrial engineering (of which I hold a Bachelors degree). My question for you is - seeing that I have work experience at a big company and a STEM background, do you think this holds any weight in terms of being qualified for a dev job? What I am mainly wondering is how much I should leverage this during interviews and on my resume.

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 04, 2021
Hasty Treat - Git the Latest - New Things In Tech - CoPilot, Petite Vue, Stackblitz, Web3 + More!
23:42

In this Hasty Treat, Scott and Wes launch a new series called Git the Latest — New Things In Tech.

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:47 - GitHub CoPilot

  • AI-powered autocompletion
  • Not going to take your job

07:18 - Next.js 11

  • Image updates
  • Multiplayer

08:20 - Astro

  • Build faster websites with less client-side JavaScript

09:50 - Notion API

  • Get database
  • Query database
  • Pages
  • Block children

11:27 - Petite Vue

  • Petite Vue is an alternative distribution of Vue optimized for progressive enhancement
  • Similar to Alpine.js
  • Without a build step

13:58 - Stackblitz

  • Node in the browser
  • Not in the cloud
  • Rolled

15:22 - Solid.js

  • Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead, it opts to compile its templates down to real DOM nodes and wrap updates in fine-grained reactions. This way when your state updates only the code that depends on it runs.

16:37 - Stately

  • From the company that made xState

18:05 - Web3

  • Let us know if you want a show about it
  • Ethereum JavaScript API
  • Apps that run on the Blockchain

Links

Tweet us your tasty treats!

Aug 02, 2021
ShopTalk x Syntax
01:04:50

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

Prismic - Sponsor

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

Sentry - Sponsor

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

Cloudinary - Sponsor

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

Show Notes

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

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

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

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

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

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

Tweet us your tasty treats!

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

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

Sanity - Sponsor

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

LogRocket - Sponsor

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

Show Notes

03:48 - What are favicons?

  • Requesting favicons by default /favicon.ico
                   

07:38 - Sizing favicons

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

09:41 - File formats

  • .ico files
  • .png favicons

13:40 - Animated favicons

  • Canvas Base64

11:36 - SVG favicons

17:19 - Dark mode favicons

18:55 - App Coloring

  • Isn’t there a new Safari version?

Links

Tweet us your tasty treats!

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

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

.TECH Domains - Sponsor

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

LogRocket - Sponsor

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

Mux - Sponsor

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

Show Notes

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

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

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

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

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

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

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

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

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

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

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

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

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

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

Sanity - Sponsor

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

Sentry - Sponsor

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

Show Notes

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

  • Does stylelint fix errors or just tell you errors?

04:42 - Getting setup

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

Links

Tweet us your tasty treats!

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

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

Freshbooks - Sponsor

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

Sentry - Sponsor

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

RevenueCat - Sponsor

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

Show Notes

04:32 - Automatic Batching

  • Don’t worry about re-renders

08:32 - New Render API

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

10:44 - Suspense

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

16:43 - StrictEffects Mode

18:43 - useTransition() Hook

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

23:11 - SSR Improvements

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

34:45 - ELI5

36:37 - Next.js

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

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

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

Prismic - Sponsor

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

LogRocket - Sponsor

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

Show Notes

03:08 - Next Gen Bundlers are here!

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

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

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

10:29 - How do you use them?

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

14:59 - Common use-cases

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

20:29 - Custom API

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

20:57 - Which one?

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

Links

Tweet us your tasty treats!

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

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

Sanity - Sponsor

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

LogRocket - Sponsor

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

Cloudinary - Sponsor

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

Show Notes

03:59 - cudd.io

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

10:35 - damonbolesta.com

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

21:52 - walterkjenkins.com

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

29:40 - suhit.me

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

37:20 - jacobpawlak.com

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

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

    )

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

47:04 - mrtnvh.com

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

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

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

Freshbooks - Sponsor

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

Sentry - Sponsor

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

Show Notes

03:24 - Synchronous / Async

05:23 - Multi-threaded

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

08:12 - Blocking

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

10:27 - Concurrent + Parallel

13:22 - Consecutive / Waterfall

  • One after another

13:48 - Callback

17:56 - Script Tag Async + Defer

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

21:54 - Lazy

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

Tweet us your tasty treats!

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

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

Linode - Sponsor

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

Sentry - Sponsor

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

Mux - Sponsor

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

Show Notes

03:13 - Elements

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

16:59 - Styles

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

25:03 - Panel

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

38:18 - Settings

43:39 - Compatibility

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

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

Tweet us your tasty treats!

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

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

Deque - Sponsor

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

LogRocket - Sponsor

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

Show Notes

03:32 - Seven new JavaScript proposals

06:25 - JSON Modules

09:55 - Array Find From Last

11:40 - Async Do

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

14:33 - Change Array By Copy

17:48 - Temporal

18:35 - As Patterns

20:47 - Pattern Matching

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

Tweet us your tasty treats!

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

It’s another Potluck! In this episode, Scott and Wes answer your questions about web components, gear, Docker, web dev frameworks, golden handcuffs, browser testing, SSR React, code prediction, and more!

Sanity - Sponsor

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

LogRocket - Sponsor

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

Linode - Sponsor

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

Show Notes

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

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

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

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

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

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

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

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

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

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

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

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

Prismic - Sponsor

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

Sentry - Sponsor

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

Show Notes

05:40 - What is it?

07:50 - Solutions

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

Tweet us your tasty treats!

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

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

Prismic - Sponsor

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

Sentry - Sponsor

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

RevenueCat - Sponsor

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

Guests

Show Notes

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

10:27 - How would you declare specificity?

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

13:08 - What is your background?

18:20 - What are container queries?

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

29:25 - Is it still under development?

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

35:21 - How far out are we?

38:10 - What is Scope?

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

45:49 - Do you use inline and block?

48:44 - What browser do you use?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

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

Sanity - Sponsor

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

LogRocket - Sponsor

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

Show Notes

03:28 - What is it?

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

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

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

09:45 - What you get out of the box

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

17:03 - Neat small things

Links

Tweet us your tasty treats!

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

It’s another Potluck! In this episode, Scott and Wes answer your questions about immutability, turning off your brain, managing copy on a website, problem-solving, types vs interfaces, hooks vs components, and more!

Freshbooks - Sponsor

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

LogRocket - Sponsor

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

Coudinary - Sponsor

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

Show Notes

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

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

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

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

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

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

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

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

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

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

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

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

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

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

Sanity - Sponsor

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

Sentry - Sponsor

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

Show Notes

07:32 - First step

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

11:03 - Variablizing it

  • Store IDs
  • Booking form IDs
  • Vaccine IDs

12:56 - Finding out any restrictions

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

15:20 - Caching

  • Array variable

16:59 - Delivering the notifications

  • Telegram

Links

Tweet us your tasty treats!

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

In this episode of Syntax, Scott and Wes talk about using React with Typescript — how to set it up, components, state, props, passing data, custom hooks, and more!

Freshbooks - Sponsor

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

Sentry - Sponsor

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

Linode - Sponsor

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

Show Notes

04:55 - Components

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

12:13 - Props

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

    18:38 - State

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

    22:27 - useEffect

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

    26:09 - Refs

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

    29:33 - Custom Hooks

    • This is a great use case for Tuples

    31:00 - Context

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

    35:21 - Events

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

    39:27 - ForwardRef

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

    41:30 - ESLint

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

    46:20 - React as Global React 17

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

    48:08 - TSConfig

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

    53:05 - Frameworks?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Deque - Sponsor

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

    LogRocket - Sponsor

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

    Show Notes

    06:37 - Community supported

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

    16:00 - Corporation supported

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

    Links

    Tweet us your tasty treats!

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

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

    Prismic - Sponsor

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

    LogRocket - Sponsor

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

    Mux - Sponsor

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

    Show Notes

    04:27 - Event params

    • e, evt, ev, or event?

    06:36 - CSS variables

    • —red or —primary?

    09:31 - CSS colors

    11:52 - Default exports vs named exports

    14:45 - JavaScript import ordering

    17:09 - Foo / Bar / Baz in examples

    21:18 - Light vs dark themes

    24:00 - longVerboseNamesDescribingWhatItIsOrDoes vs x

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

    31:12 - TypeScript Generics: vs

    34:39 - Indentation-base syntax

    37:37 - Max line length

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

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

    42:50 - index.js files

    48:20 - Ligatures and fancy fonts

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

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

    52:44 - Explicit return vs implicit return

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    .TECH Domains - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

    04:45 - What is it?

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

    07:50 - How to implement

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

    09:06 - DataTransfer API

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

    11:35 - Accepting drops

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

    13:01 - Drop Image

    • Set whatever you want

    16:00 - Drop Effect

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

    18:02 - Security concerns

    20:34 - Shortcomings:

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

    26:14 - Lbs

    Links

    Tweet us your tasty treats!

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

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

    Prismic - Sponsor

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

    Sentry - Sponsor

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

    Cloudinary - Sponsor

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

    Show Notes

    02:34 - What is semantic HTML?

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

    04:04 - Why semantic HTML?

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

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

    Sanity - Sponsor

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

    LogRocket - Sponsor

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

    Show Notes

    Can it be styled? Solutions

    04:28 - Just style the defaults

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

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

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

    14:13 - Re-implement the UI with JavaScript

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

    15:46 - Use a UI Library

    17:20 - Open UI

    Tweet us your tasty treats!

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

    It’s another Potluck! In this episode, Scott and Wes answer your questions about freelancing, climbing the corporate ladder, Throttling vs debounce, how to build skills with your free time, and more!

    Freshbooks - Sponsor

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

    LogRocket - Sponsor

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

    Vonage - Sponsor

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

    Show Notes

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

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

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

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

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

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

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

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

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

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

    Thoughts?

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

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

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Prismic - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

    03:17 - What is technical debt

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

    06:55 - Why does it occur

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

    13:18 - Techniques for avoiding it

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

    20:08 - Examples in the real world

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

    22:15 - Unfixable technical debt

    • Agency work sometimes

    Links

    Tweet us your tasty treats!

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

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

    Sanity - Sponsor

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

    Sentry - Sponsor

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

    Cloudinary - Sponsor

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

    Show Notes

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

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

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

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

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

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

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

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

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

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

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Freshbooks - Sponsor

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

    LogRocket - Sponsor

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

    Show Notes

    05:20 - Astro

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

    12:06 - ViteKit

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

    15:58 - Svelte Kit

    19:07 - Remix.run

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

    Links

    Tweet us your tasty treats!

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

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

    Deque - Sponsor

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

    LogRocket - Sponsor

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

    Mux - Sponsor

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

    Show Notes

    Deep end stuff

    03:30 - any vs unknown

    06:20 - never

    13:25 - Type generation

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

    17:20 - TypeScript generics (variables)

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

    21:48 - Promises / Async + Await

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

    29:48 - Type assertion (type casting)

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

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

    40:08 - Interfaces vs Types

    How we write TypeScript

    44:27 - Interface or Types

    • Scott - Types
    • Wes - Interfaces

    44:50 - any vs unknown

    • Scott - any
    • Wes - unknown / any

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

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

    48:31 - Return types (Implicit or Explicit)

    • Scott - Explicit always
    • Wes - Not always

    50:49 - Compile (TSC, Strip TS)

    • Scott - Strip
    • Wes - Both

    52:38 - Type Assertion (as or )

    • Scott - as
    • Wes - as

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

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

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

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Sanity - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

    05:12 - Why and when to rebase?

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

    Links

    Tweet us your tasty treats!

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

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

    Prismic - Sponsor

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

    Sentry - Sponsor

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

    Deque - Sponsor

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

    Show Notes

    01:58 - T-Shirts 101

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

    09:08 - Selling: Front-end

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

    10:10 - Selling: Shipping Quotes

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

    13:30 - Selling: Backend

    18:05 - Fulfilling

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

    28:48 - The physical part

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

    36:30 - Common questions

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

    44:16 - Other lessons learned

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Sanity - Sponsor

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

    LogRocket - Sponsor

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

    Show Notes

    07:22 - Why?

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

    08:49 - The Syntax

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

    New contain value:

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

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

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

    18:49 - How to try them today

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

    19:27 - Demos

    Links

    Tweet us your tasty treats!

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

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

    Vonage - Sponsor

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

    Freshbooks - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

    3:50 - Network

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

    22:03 - Memory

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

    26:44 - Performance

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

    30:48 - Console

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

    40:28 - Storage / Application

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

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

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

    50:28 - DOM Tab

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Prismic - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

    04:22 - What is it?

    06:02 - Why nest?

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

    08:13 - When to use nesting

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

    10:06 - Nesting prefixes

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

    and must be the first child of a compound selector

    12:44 - @nest rule / media queries

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

    16:30 - How to use nesting today

    • Literally any CSS preprocessor
    • PostCSS to use spec

    Links

    Tweet us your tasty treats!

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

    In this episode of Syntax, Scott and Wes talk about how to keep your skill up to date when you have a job and a family, when you should start looking for your first job, monorepos, video hosting, TLDs, APIs, fake names, and more!

    Sanity - Sponsor

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

    Sentry - Sponsor

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

    Vonage - Sponsor

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

    Show Notes

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

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

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

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

    25:11 - Monorepos, yes or no?

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

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

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

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

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

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

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

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    .TECH - Sponsor

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

    LogRocket - Sponsor

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

    Show Notes

    04:05 - Easy Snippet

    05:33 - Add Missing Function Declaration

    07:30 - Error Lens

    09:08 - Declare Missing Members

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

    11:59 - File Utils:

    13:59 - GitLens — Git supercharged

    15:15 - ES6-String-HTML

    16:41 - Wrap Console Log Simple

    17:18 - Text Pastry

    19:14 - Better Comments

    20:14 - Tip: Use Emmet everywhere

    Tweet us your tasty treats!

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

    In this episode of Syntax, Scott and Wes talk Matt Holt about Caddy, SSL, web servers, best practices, and more!

    LogRocket - Sponsor

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

    Freshbooks - Sponsor

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

    Cloudinary - Sponsor

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

    Guests

    Show Notes

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

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

    08:45 - How do SSL certs work?

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

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

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

    31:35 - Is server administration a lost art?

    38:03 - What is a sidecar proxy?

    38:50 - How do chron jobs work?

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

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Hasura - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

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

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

    09:33 - The solution

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

    11:11 - Should you care?

    Tweet us your tasty treats!

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

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

    Sanity - Sponsor

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

    Sentry - Sponsor

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

    Mux - Sponsor

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

    Show Notes

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

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

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

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

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

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

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

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

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

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

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

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    .TECH Domains - Sponsor

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

    LogRocket - Sponsor

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

    Show Notes

    03:38 - What is it?

    04:34 - What can it do?

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

    07:49 - How we use it

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

    Links

    Tweet us your tasty treats!

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

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

    Prismic - Sponsor

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

    LogRocket - Sponsor

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

    Hasura - Sponsor

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

    Show Notes

    01:51 - Overview

    05:13 - JWT

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

    20:26 - Cookies

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

    34:26 - Sessions

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

    38:10 - CORS

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

    46:06 - CSRF

    48:47 - Authentication process

    52:13 - Helper Packages

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

    In this Hasty Treat, Scott and Wes talk about environment variables — what they are, where you should keep them, and more!

    Sanity - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

    03:54 - What are they?

    • API Keys
    • Secrets
    • Database URLs
    • NODE_ENV

    06:16 - Type of env variables

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

    16:20 - Where should you keep them?

    17:34 - Other gotchas

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

    Links

    Tweet us your tasty treats!

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

    It’s another potluck! In this episode, Scott and Wes answer your questions about VSCode, Vercel vs Netlify, staying up to date with dev concepts, models and mutations, websites vs seb apps, adaptive vs responsive design, and more!

    Freshbooks - Sponsor

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

    Sentry - Sponsor

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

    Vonage - Sponsor

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

    Show Notes

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

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

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

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

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

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

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

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

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

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

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Prismic - Sponsor

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

    LogRocket - Sponsor

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

    Show Notes

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

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

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

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

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

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

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

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

    Links

    Tweet us your tasty treats!

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

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

    Sanity - Sponsor

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

    LogRocket - Sponsor

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

    Hasura - Sponsor

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

    Show Notes

    03:36 - Desk

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

    09:01 - Chair

    15:39 - Display

    22:49 - Headphones

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

    24:58 - Mouse + Keyboard

    29:18 - Laptop

    33:43 - Dock + Connecting it all together

    41:36 - Camera + Capture

    44:11 - Microphone + Capture

    49:06 - Lighting

    55:22 - Storage / Backup / Home Server

    57:50 - Other / Wish list

    Links

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Freshbooks - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

    04:17 - Code in general

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

    06:10 - JS

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

    08:38 - CSS

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

    12:54 - Real-world libraries

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

    17:15 - What about data structures and algorithms?

    20:26 - Soft skills

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

    Links

    Tweet us your tasty treats!

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

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

    Deque - Sponsor

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

    Sentry - Sponsor

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

    Mux - Sponsor

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

    Guests

    Show Notes

    01:56 - What do you do?

    06:04 - What is React Query?

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

    31:20 - What about React Context?

    36:59 - Server-rendered components?

    42:40 - Thoughts on static sites?

    50:38 - What is the stack?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Deque - Sponsor

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

    LogRocket - Sponsor

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

    Show Notes

    03:55 - What Is Cypress?

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

    07:36 - Used to be only Chrome

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

    ??? - What frameworks is it for?

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

    10:58 - Automation

    • Cypress studio new feature that writes tests for you.

    12:37 - Data

    • Intercept + Fixtures or through plugins

    15:01 - Cost?

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

    Links

    Tweet us your tasty treats!

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

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

    Prismic - Sponsor

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

    LogRocket - Sponsor

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

    Cloudinary - Sponsor

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

    Show Notes

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

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

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

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

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

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

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

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

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Sanity - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

    03:38 - What is a TypeScript compiler?

    07:49 - Babel

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

    10:22 - SWC

    13:03 - Deno

    13:36 - Surcase

    14:46 - ESBuild

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

    17:39 - What about bundlers?

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

    Links

    Tweet us your tasty treats!

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

    In this episode of Syntax, Scott and Wes review resumes, websites, and online presences, and discuss pros and cons, what you should focus on, and more!

    Freshbooks - Sponsor

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

    Linode - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

    04:32 - Why does an impression matter?

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

    05:14 - What goes into an online presence?

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

    07:25 - A couple stories

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

    09:40 - Ash Connolly

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

    20:48 - Matthew Bidwell

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

    24:42 - Leah Lundqvist

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

    31:04 - Ismail Ghallou

    40:18 - Jhey Tompkins

    46:28 - Wes’ website

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

    53:25 - Scott’s website

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Prismic - Sponsor

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

    LogRocket - Sponsor

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

    Show Notes

    03:04 - The Events

    08:02 - Event meta data

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

    16:46 - Media keys

    18:32 - When might you use key codes?

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

    Links

    Tweet us your tasty treats!

    Feb 08, 2021
    TypeScript Fundamentals
    58:31

    In this episode of Syntax, Scott and Wes talk about TypeScript fundamentals — what it is, how you use it, why people love it so much, and more!

    Sanity - Sponsor

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

    LogRocket - Sponsor

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

    Cloudinary - Sponsor

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

    Show Notes

    What is TypeScript?

    03:12 - Types?

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

    06:34 - The Fundamentals

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

    13:30 - Explaining the types

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

    30:28 - Inference

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

    33:25 - Getting types

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

    Overall benefits

    40:39 - Type hinting

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

    42:50 - Refactoring

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

    48:10 - Compiling

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

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

    Tweet us your tasty treats!

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

    In this Hasty Treat, Scott and Wes talk about the new Level Up Tutorials website — some of the new tech powering the site, behind-the-scenes decisions, previous iterations, and more!

    Freshbooks - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

    02:55 - Previous iterations

    05:30 - Big choices

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

    Links

    Tweet us your tasty treats!

    Feb 01, 2021
    The Deno Show
    59:49

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

    Deque - Sponsor

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

    Sentry - Sponsor

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

    Mux - Sponsor

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

    Show Notes

    02:13 - What is it?

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

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

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

    14:51 - Modules

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

    20:10 - A nice standard library

    22:14 - WASM

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

    25:06 - Multi-threading with Web Workers

    26:13 - Speed

    29:44 - Security

    33:39 - Run from anywhere

    37:43 - Async out of the box

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

    38:53 - Node Compatibility

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

    42:21 - What we’ve built

    46:54 - Hosting

    48:29 - Final thoughts

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

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Freshbooks - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

    03:10 - What is AVIF?

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

    10:53 - How to implement

    Tweet us your tasty treats!

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

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

    Prismic - Sponsor

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

    LogRocket - Sponsor

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

    Linode - Sponsor

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

    Show Notes

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

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

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

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

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

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

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

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

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

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

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

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

    Tweet us your tasty treats!

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

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

    Sanity - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

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

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

    16:58 - Why are systems in type important?

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

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

    Links

    Tweet us your tasty treats!

    Jan 18, 2021
    Reactathon LIVE
    48:56

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

    Freshbooks - Sponsor

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

    Magic Bell - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

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

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

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

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

    18:44 - Overrated / Underrated

    27:49 - Hot Take Tweets

    34:34 - Listener Questions

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

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

    Tweet us your tasty treats!

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

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

    Prismic - Sponsor

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

    LogRocket - Sponsor

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

    Show Notes

    03:35 - Undefined

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

    04:25 - Null

    • Explicitly nothing

    04:41 - Null vs Undefined

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

    05:35 - Void

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

    09:15 - Never (in Typescript)

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

    11:05 - Falsy values

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

    Tweet us your tasty treats!

    Jan 11, 2021
    2021 Predictions
    54:08

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

    Sanity - Sponsor

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

    LogRocket - Sponsor

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

    Linode - Sponsor

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

    Show Notes

    02:06 - ESM

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

    05:44 - Wes: Remote work will grow

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

    08:23 - Scott: Deno will grow

    11:12 - Wes: Tooling will fade away

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

    19:35 - Wes: Programming communities will gain traction

    23:25 - Scott: More WASM

    27:19 - Typescript

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

    29:37 - React

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

    32:52 - Scott: More web component frameworks

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

    33:59 - Wes: Gatsby

    35:24 - Scott: AR tech will grow

    36:38 - Wes: AI will become accessible

    38:43 - VS Code

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

    40:18 - CSS

    42:39 - Serverless

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

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

    46:30 - PWAs might become more popular

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

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Freshbooks - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

    03:54 - Karabiner-Elements

    06:11 - Better Touch Tool

    13:55 - ScreenFlow

    17:52 - VS Code Shortcuts

    21:20 - Text Expander

    23:00 - Clipy

    Links

    Tweet us your tasty treats!

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

    In this episode of Syntax, Scott and Wes talk about 2020 in review — predictions, hits and misses, hot tech, what they worked on, and more!

    LogRocket - Sponsor

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

    Freshbooks - Sponsor

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

    Show Notes

    01:43 - Predictions from 2020

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

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

    52:53 - Working from home

    57:13 - Code libraries

    59:25 - Personal / Professional updates

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

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

    Tweet us your tasty treats!

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

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

    LogRocket - Sponsor

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

    Show Notes

    01:55 - Per minute

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

    03:49 - By resources

    • Ram
    • CPU
    • Disk space

    06:02 - Per “dyno”

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

    08:54 - By bandwidth

    • Sitting files
    • Inbound (ingress)
    • Output

    12:24 - By DB calls or entries

    • Databases

    14:04 - By users

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

    17:23 - By apps

    • Digital Ocean app platform
    • Each app is $5

    21:22 - By “work”

    • Cloudinary does transforms on images
    • Mux

    Links

    Tweet us your tasty treats!

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

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

    Freshbooks - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

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

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

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

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

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

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

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

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

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

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

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

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

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    LogRocket - Sponsor

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

    Show Notes

    03:12 - Scott’s strategy

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

    05:06 - Wes’ strategy

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

    11:35 - Things that get in the way

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

    Links

    Tweet us your tasty treats!

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

    In this episode of Syntax, Scott and Wes talk with Brian Leroux about severless, Deno, Typescript, and more!

    Netlify - Sponsor

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

    Sentry - Sponsor

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

    Guests

    Show Notes

    02:17 - What’s your background?

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

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

    16:15 - What is a cold start?

    17:46 - What languages are suitable for serverless?

    19:14 - What do you think about Deno?

    24:23 - How does Architect work?

    31:14 - What do you think about Typescript?

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

    44:51 - What about sharing code?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    LogRocket - Sponsor

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

    Show Notes

    02:15 - The things we tried

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

    04:24 - What we used

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

    Links

    Tweet us your tasty treats!

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

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

    Sanity - Sponsor

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

    Sentry - Sponsor

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

    Show Notes

    03:34 - Server-rendered

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

    05:26 - Static generation

    • getStaticProps()
    • getServerSideProps()

    08:25 - Re-rendering pages

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

    18:54 - Data management

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

    23:16 - Client-side data

    • Neither do anything, next.

    26:33 - Dynamic Pages

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

    30:41 - Routing

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

    34:50 - Hosting

    • Anywhere

    35:54 - Images

    46:20 - Server or Serverless

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

    49:44 - SEO

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

    49:55 - Plugin Ecosystem

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

    53:10 - Auth

    55:00 - E-commerce

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

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

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

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

    Sentry - Sponsor

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

    Show