Syntax - Tasty Web Development Treats

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

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


Category: Tech News

Open in Apple Podcasts


Open RSS feed


Open Website


Rate for this podcast

Subscribers: 1253
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 - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More!
01:08:26

It’s another potluck! In this episode, Scott and Wes answer your questions about frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, and more!

Sanity - Sponsor

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

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

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

Tweet us your tasty treats!

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

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

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Show Notes

02:49 - Wes’ story

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

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

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

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

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

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

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

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

Links

Tweet us your tasty treats!

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

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

Sanity - Sponsor

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

Freshbooks - Sponsor

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

Guests

Show Notes

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

10:05 - Which conferences have you run?

18:05 - How do you get speakers?

23:21 - What about paying speakers?

28:26 - Speaker goody bags?

32:40 - You started your own catering company?

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

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

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

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

LogRocket - Sponsor

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

Show Notes

04:33 - The spec

06:10 - How it works

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

09:06 - The implicit grid

13:25 - Thoughts

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

Links

Tweet us your tasty treats!

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

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

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Show Notes

03:30 - How is this going to work?

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

04:45 - Brad

11:54 - Brittany

16:43 - Jesse

23:44 - Henri

31:27 - Jason

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

36:48 - Spence

41:33 - James

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

54:24 - Austin

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

66:21 - Dave

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

78:56 - Gareth

89:51 - Ackzell and Lewis

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

Links

Shameless Plugs

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

Tweet us your tasty treats!

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

In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, and more!

LogRocket - Sponsor

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

Show Notes

02:39 - What is a bundler?

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

03:24 - What goes into configuring a bundler?

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

05:12 - Webpack

  • Hardest to learn, most used currently

07:38 - Rollup

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

09:52 - Parcel

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

12:01 - NpmYarn and Yarn 2

  • It’s a dependency installer rather than a bundler

13:27 - Snowpack

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

15:51 - Isobuild / Meteor

  • Scott’s underdog pick of the litter

16:48 - Rome

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

17:54 - Deno

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

20:44 - Let your tool take care of it

Links

Tweet us your tasty treats!

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

In this episode of Syntax, Scott and Wes talk with Josh Comeau about coding with your voice, accessibility, bootcamps, animation, and more!

Sanity - Sponsor

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

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Guests

Show Notes

01:48 - What is your background?

04:33 - Coding with your voice

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

21:56 - How has it impacted your productivity?

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

26:05 - What about accessibility?

27:14 - How good is the eye tracker?

29:30 - What got you into animation?

35:29 - Favorite app for animations?

40:12 - Being a teacher

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

44:57 - Interactivity in teaching

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

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

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

02:12 - Certifications

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

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

10:28 - Do certifications mean anything?

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

19:04 - Some jobs do require a certification

  • AWS
  • Google

Links

Tweet us your tasty treats!

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

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

LogRocket - Sponsor

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

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Show Notes

03:28 - Jack Rhysider Story

06:28 - Dirty Dicks JSON

08:23 - CMS Disaster

10:58 - Oh No Hotel

11:19 - FTP

12:19 - Push Notification Hell

13:16 - DVD Nightmare

15:15 - Bad Words Again

16:23 - Mo Money

17:01 - Bass Ackwards

18:17 - Taxi Coding

19:36 - Bad Env

21:30 - Login As

21:50 - Email Subscribers Plugin

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

24:24 - Production Target

26:12 - A Happy SEO Ending

28:26 - Just Oof

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

30:54 - Crypto

32:34 - rm -rf

33:42 - Never Deploy on Fridays

35:31 - Million Dollar Scramble

36:22 - Deleting Production

37:11 - 500,000 Concurrent Problems

39:14 - Deleting a Government Website

40:36 - You Ruined the Surprise!

45:23 - Mr. D Hole

46:48 - One Expensive Race Condition

48:43 - Yikes

51:11 - Always Be Closing

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

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

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

Tweet us your tasty treats!

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

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

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

05:11 - Temporal Now

  • You can get now
    • Temporal.now.___

07:58 - Temporal Instants

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

09:59 - Calendar

  • Support for different types of calendars

11:43 - Durations

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

12:47 - Other interesting parts

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

14:51 - Polyfill (unstable)

Links

Tweet us your tasty treats!

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

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

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

03:12 - The Most Expensive Boolean Ever

06:19 - An Actual Logging Issue

09:37 - Snitches Get Stitches

10:41 - The Spooky Office Skeleton

12:04 - Prevent the Default of Making Money

13:52 - Computer Magic Trick

14:42 - Update Score

15:59 - Change Reaction

19:30 - Personal Mongodb

20:26 - Hello Rob!

22:08 - SSN Regex

23:06 - WordPress Plugins

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

24:58 - A Hostel Coding Environment

25:59 - A Graceful Exit

27:27 - Favicon DDOS

28:07 - Common Cents

29:03 - Open Source Vendors

33:04 - Don’t Leave the Country

35:09 - Apostrophe Catastrophe

35:43 - Env

36:05 - A Christmas Miracle

36:43 - The One Million Dollar Bill

39:00 - The Hacker Who Dropped the DB

40:19 - The Tech Lead Who Uses Alert Statements

46:14 - Lorem Ipsum

46:58 - Malicious Compliance

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

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

LogRocket - Sponsor

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

Show Notes

03:21 - Devs do the following

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

06:02 - Stretching misconceptions

  • Static holds
  • Dynamic controlled movements first and foremost

07:52 - Stretches to help

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

Tweet us your tasty treats!

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

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

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Show Notes

02:15 - Code

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

13:09 - Communication

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

22:19 - Time management

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

27:54 - Contracts + quoting

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

33:47 - Billing + taxes

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

42:03 - Marketing

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

48:25 - Final thoughts

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

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

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

LogRocket - Sponsor

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

Show Notes

01:54 - The problem

  • This only affects the client-side

05:28 - What are some solutions:

Links

Tweet us your tasty treats!

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

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

Sanity - Sponsor

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

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

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

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

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

My name is {this.name}

); } }

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

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

11:11 - What makes a software engineer senior?

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

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

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

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

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

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

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

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

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

In this Hasty Treat, Scott and Wes talk about enums in JS — what they are, what they do, and how they work in JavaScript.

LogRocket - Sponsor

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

Show Notes

03:11 - What are enums?

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

05:12 - In GraphQL

  • enum Role { ADMIN EDITOR AUTHOR VIEWER}
  • Then

07:05 - In TypeScript

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

08:49 - In JavaScript

Links

Tweet us your tasty treats!

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

In this episode of Syntax, Scott and Wes are back with part 2 of Tales from Web Dev Past — this time looking at iFrames, layout trends, icon fonts, web rings, and more!

Sanity - Sponsor

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

Prismic - Sponsor

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

Show Notes

03:00 - iFrames

  • Sidebar menu
  • target

05:42 - JavaScript image hovers

08:24 - CSS Pie

09:42 - Animated gifs of people and construction

11:20 - CSS Zoom 1 / IE CSS Hacks

  • Forced IE 7 to redraw floats

13:42 - Layout trends

16:26 - Sprite maps

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

18:40 - Firebug and Firebug Lite

  • Lite was a bookmarklet

20:14 - Image maps / Background gradients

25:53 - Web rings

27:41 - Glossy buttons

28:09 - Flaming text

30:01 - Marquee tags

  • Staggered
  • Speed attribute

31:26 - Spacer gifs

34:30 - AngelFire / GeoCities

36:11 - Xanga / LiveJournal

37:29 - Above the fold content

39:36 - Homestar Runner

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

In this Hasty Treat, Scott and Wes talk about records and tuples in javascript — what they are, why you might want to use them, and more!

LogRocket - Sponsor

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

Show Notes

??? -

02:42 - Immutability

05:08 - Records

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

05:56 - Tuples

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

07:18 - For both

  • Referred to as a compound primitive

  • Can contain only primitives, not objects

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

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

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

  • Better integration with the debugger

  • Accessed through normal record.scott object like syntax

13:39 - Stage 2

Links

Tweet us your tasty treats!

Sep 28, 2020
Git Fundamentals
58:40

In this episode of Syntax, Scott and Wes talk about Git fundamentals — what it is, why you need it, best practices, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Freshbooks - Sponsor

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

Show Notes

03:12 - What is Git?

04:16 - Why do you need it?

06:31 - UI vs command line

09:03 - Commands 101

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

44:25 - Common issues

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

49:10 - Git clients

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

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

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

Wes:

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

Scott:

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

Links

Tweet us your tasty treats!

Sep 21, 2020
Writing Good CSS
56:45

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

LogRocket - Sponsor

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

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Show Notes

02:11 - Frameworks

13:37 - Preprocessors

19:42 - Tools

34:19 - Stylint

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

36:37 - Removing unwanted CSS

41:17 - Writing maintainable CSS / scoping solutions

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

Links

Syntax Highlight

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

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

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

01:50 - What is time block planning

03:12 - How TBP has helped Scott stay focused

04:46 - How it helps family life

05:57 - How to plan your week

11:00 - How to deal with setbacks

Links

Tweet us your tasty treats!

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

In this episode of Syntax, Scott and Wes talk about tales from web dev past — clearfix, floats, flash, cufon, guestbooks, hit counters, and more!

Sanity - Sponsor

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

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

04:28 - Float-based layouts

09:29 - Loading Screens:

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

11:22 - Hit counters

12:28 - Guestbooks

13:28 - Flash

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

18:46 - Fonts

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

24:15 - Folder-based version control

  • ☠️ Killed by Git

26:22 - FTP

  • ☠️ Killed by Git, then many other things

28:40 - CSS Zen Garden

32:02 - TextMate

33:58 - Sliding doors

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

35:29 - PNG Fix

  • ☠️ Killed by the death of IE6

37:53 - 9-Panel layouts

  • ☠️ Killed by CSS

39:20 - CSS 3 Please

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

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

LogRocket - Sponsor

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

Show Notes

03:40 - Structure options:

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

07:18 - Electrical

07:58 - Insulation

09:01 - Heating

11:30 - Cooling

16:01 - Interior

16:42 - WiFi

17:12 - Costs ~ $4k

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

Links

Tweet us your tasty treats!

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

It’s another potluck! In this episode, Scott and Wes answer your questions about the recent Mozilla layoffs, Safari, finding time to learn coding, Google Analytics alternatives, malicious Github users, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Freshbooks - Sponsor

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

Show Notes

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

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

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

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

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

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

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

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

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

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

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

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

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

In this Hasty Treat, Scott and Wes wrap up season one of the podcast and talk about what’s coming.

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:32 - Plans for the Fall

06:59 - Fav Hasty

08:55 - Fav Tasty

10:22 - Top Episodes of 2020

Tweet us your tasty treats!

Aug 31, 2020
Potluck - MDX × Portfolio Projects × Code Commenting × CSS Properties × Reusable Components × More!
57:27

It’s another potluck! In this episode, Scott and Wes answer your questions about MDX, portfolio projects for junior devs, code commenting, CSS property order, 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.

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Show Notes

02:18 - I’m curious to know what you guys think of MDX. I’d love to learn more about pros and cons, if you guys had a chance to use it.

08:49 - Where would you put business logic in Vue.js middle- or large-scale applications? I try to put business logic in store but it makes hard to maintain such store, even with splitting to actions/getters/mutations files. I ended up using vanilla JavaScript files, where each file is a class singleton. I was wondering: is it a good solution or do you have better alternatives in mind?

12:07 - I commonly find myself engineering complex programs and left flabbergasted on how to express these ideas to other people when the need arises that I need to explain them and remember why I did them a certain way. How can I get better at conceptualizing intricate design patterns or functions as well as have better memory recall for these abstractions?

18:02 - Can I get recommendations for a junior dev portfolio? What five projects you would recommend to build that will significantly help in getting a job as a front-end web dev and why?

21:13 - I am now working on building a minesweeper game with React. You know how on a computer you right click to flag and disable a cell? I am thinking of doing a press and hold on a mobile device instead. I am not sure how to do either (the right click logic or the press and hold). How can you listen for these events in React? Can you help with some guidance or resources? :)

30:00 - What are your thoughts on SailsJS as a Rails-equivalent framework in Javascript? They recently released version 1.0 and I’m wondering if I should start using it in projects or if I should wait to see if it pans out.

34:35 - How do you go about creating reusable React components (reusable from project to project)? Do you create packages and publish them to NPM? Or do you have another method for storing code for components that you will likely need to use again?

38:33 - Thoughts on shadow dom / custom elements? Would you use them in your own projects?

40:49 - How do you organize CSS properties within a rule and why? Random, alphabetical, logical groupings, etc.

46:04 - Have u ever used the 2nd parameter of JSON.stringify for anything useful?

48:00 - Getting my first dev job at an actual software company a year ago opened my eyes to the vast difference between educational repos and the absolute jungle that can be enterprise code bases. I’ve also learned the importance of writing code that will be readable later - ensuring any hacky workaround is replaced with a pattern seen elsewhere in the code base, etc. My question is - are there resources on these sorts of topics for folks trying to break into the industry? A lot of tech topics revolve around how to get your code to run, which feels to me like only half the battle. Where can juniors find resources on robustness?

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!

Aug 26, 2020
Hasty Treat - Stump’d
19:36

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

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 the difference between HTML and React event handling?

05:55 - What are JavaScript data types?

07:00 - In which states can a Promise be?

07:48 - Discuss the differences between an HTML specification and a browser’s implementation thereof.

09:14 - What is a stateless component?

10:10 - What is a pure function?

10:51 - What is the output of the following code?

 const a = [1, 2, 3] const b = [1, 2, 3] const c = "1,2,3"  console.log(a == c) console.log(a == b)  

13:35 - What is memoization?

15:15 - How do you pass an argument to an event handler in React?

15:59 - What is HTML5 Web Storage? Explain localStorage and sessionStorage.

Links

Tweet us your tasty treats!

Aug 24, 2020
Potluck - Subscriptions × ES Modules in Node × Chicken Thigh × Being a Good Dad × Refactoring × More!
01:03:06

It’s another potluck! In this episode, Scott and Wes answer your questions about React subscriptions, ES Modules in Node, how to cook a chicken thigh, being a good dad and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Stackbit - Sponsor

Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That’s why
Stackbit is the best way to Jamstack. stackbit.com.

Show Notes

02:11 - What are “subscriptions” in React, or in programming in general? The React docs mention that setting up a subscription is an example of a side effect, but what exactly is a subscription, and how do you set one up?

05:43 - Using the latest node esm imports, is it possible to use aliases? Using the old require() syntax I used the npm package module-alias (https://www.npmjs.com/package/module-alias), but I cannot seem to find a solution for node v14 imports. In a deeply nested file, I find the import ‘…/…/…/some/folder’ syntax to be awful compared to require(’@/some/folder’).

09:20 - I’ve been a full-time developer for over 10 years and my company has a fairly flat hierarchy. I want to take on more responsibility (and salary) but my company doesn’t have anything like a “lead developer” position. Any ideas for how to move up without switching companies? I know my boss would be receptive if I came to him with a pitch, but we work full stack so it feels like I’m already doing it all.

12:59 - In Wes’ website episode, he mentioned using Gatsby Parallels for images. Why not git LFS?

17:25 - For Wes: Any Big Green Egg tips for beginners? I just ordered a kamado style grill and I’d appreciate any tasty tips you’ve got.

22:45 - Inline code is considered harmful because of potential XSS attacks. Lighthouse recommends inlining critical CSS to improve page speed. What do you think about this tradeoff?

26:30 - What advice would both of you have for being a first-time father, and how can I best prepare? My wife is pregnant, and we are both very excited! I want to do the best I can at being a good father. Our baby is due in January. As both of you are fathers (multiple times), I would love to hear your thoughts.

32:58 - Are present web developers merely crud bastards for corporate culture? If not, What entrepreneurial opportunities are open with Javascript and hooking up React with backend Node/Laravel and reading the Google Map docs? Of course the list isn’t exhaustive but you get my point right? Note: I’m not interested in selling courses and creating frameworks.

37:08 - Do you have any use for ES6 Generators and yield? It seems that they are a mechanism for async-await “under the hood,” so using ‘async-await’ is probably sufficient.

39:10 - With a legacy project that has old build dependencies how do you decide when to retool and fix all the npm audit issues?

46:10 - In what instances do you prefer to use rem vs em vs pixels for font size? I usually think about it like so: if I’m okay with an element’s font size being sized based on the parent, then I’ll use em. If not, then I’ll use rem. I almost never use pixels anymore except sometimes on the html element. But even then, I usually use a percentage. In practice, I’ve found it a bit hard to gauge what to expect with ems because of nesting issues. So, I’ve mostly been leaning towards rem. Though I also understand that using rems can be less modular. How do you guys make the decision?

52:49 - Hello chaps. Thank you so much for the show, I’ve learned an awful lot through listening. I’ve been dabbling in development for some time now and have taken on a project for an Express site which aside from a few static pages will include a shop with a small number of items (<5), customer dashboard (order tracking and submitting supplementary order info), and an image centric journal/blog section. I’ve listened and re-listened to your CMS roundup which is great, but having worked through Wes’ Node course I’m kinda thinking why would I spend the time integrating a CMS when I can just build an ‘Add Post’ page for admin users, save the posts in Mongo, upload images to my server, and use Cloudflare’s free tier CDN. Please explain why this is (or isn’t🤷‍♂️) a bad idea, and more generally share your wisdom on when a CMS is or isn’t actually necessary. PEAACE!

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 19, 2020
Hasty Treat - Gatsby Tips
17:37

In this Hasty Treat, Scott and Wes talk about tips and tricks for using Gatsby in your projects

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:02 - React Helmet

  • Make a re-usable SEO component that sets defaults. Spread children to override.

04:27 - When in doubt, stop the build and restart

  • Gatsby clean
  • Nuke node_modules + package-lock

05:34 - Use ESM to use ES Modules everywhere - share functions between gatsby-node and gatsby-browser

06:44 - Run the build command locally to troubleshoot prod

  • Dev mode isn’t SSG’d - people overlook this

08:06 - Wrap your layout automatically in gatsby-ssr and gatbsy-browser

  • wrapPageElement and wrapRootElement

09:50 - Consider just adding the layout component manually to each page

  • This will allow you to skip the layout if you need to have a page that isn’t typical

11:21 - Layout is not suitable for unmount animations

  • Orchestrating individual component animations in Gatsby isn’t easy, use wrapPageElement to write your animations or delays for internally unmounted components.

12:59 - use onCreatePage to pass context to the layout

 exports.onCreatePage = ({ page, actions }) => {   const { createPage } = actions;    if (page.path.match(/thumbnail/)) {     page.context.layout = 'thumbnail';     createPage(page);   } };  

14:03 - You don’t have to query for everything

  • Hard-coding data in html/jsx is super valid

15:32 - Gatsby Parallel Runner

  • For lots of images

Links

Tweet us your tasty treats!

Aug 17, 2020
How does stuff get added to CSS? Adam Argyle answers!
01:03:32

In this episode of Syntax, Scott and Wes talk with Adam Argyle about how stuff gets added to CSS.

LogRocket - Sponsor

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

Freshbooks - Sponsor

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

Guests

Show Notes

01:48 - Who are you and what do you do?

04:13 - How does stuff get added to CSS?

06:44 - Github issue proposal or public document

  • Shares use case
  • Problem made succinct
  • StrawMan solution
  • JS demo

10:12 - Time

  • Multiple proposals
  • Comments
  • Back and forth
  • Bikeshedding

20:00 - Editor’s draft spec (Stage 1)

  • CSS typed
  • Examples
  • Provided code logic
  • Implementor interest
    • Can go stale
    • Explainer
  • Implementor
    • Prototype behind flags in browser
    • Intent to Prototype (I2P)

24:42 - Working Draft (Stage 2)

  • WPTs
  • Prototype behind flags in browser
  • Needs two or more to graduate
  • Intent to Ship (I2S)

24:54 - Conference Calls

  • Around 10 items to discuss
    • Issues or proposals
  • Flexible list
    • Things can be injected as emergency
    • Things can get punted to the next call

25:26 - Face 2 Face (F2F)

  • Four times a year
  • Presentations
  • Breakout sessions
  • Houdini focus groups, etc
  • Try to resolve as many Github issues as possible

27:34 - Candidate Recommendation (Stage 3)

  • Could still be behind a flag
    • Edge cases are being worked through
    • WPTs and standards are being nudged into a final state

44:20 - Roles

  • Spec author
  • Community Member
    • Print
    • Color
    • Internationalization
    • Box Model
    • AOM
    • JS APIs
    • Renderers
    • etc
  • Implementor
  • It’s like pub/sub, where spec authors pub and implementors sub, and the community tries to help shape the message that’s published while supporting the subscribers who need to implement and make it real

46:32 - Questions

  • What language is CSS written in?
  • What's the deal with Houdini?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 12, 2020
Hasty Treat - How To Refine Your Process
18:05

In this Hasty Treat, Scott and Wes talk about refining your processes, how to evaluate them, make them better, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

04:18 - Find slow process

  • Getting through email
  • Cleaning my desk

06:29 - Set clear goals (smart goals)

  • Is my inbox less crazy?
  • Don’t spend too much time
  • Do a 30-day challenge

09:46 - Ask around

  • What are people you know using and why
  • Time-blocking
  • Batching
  • Eat that frog

Links

Tweet us your tasty treats!

Aug 10, 2020
React State Round Up
54:39

In this episode of Syntax, Scott and Wes talk about React State libraries, should you use them, pros, cons, and more!

Sanity - Sponsor

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

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

01:24 - Context

  • Have we used?
    • Scott: Yes
    • Wes: Yes
  • Pros
    • Built into React
    • As simple or complex as you want
  • Cons
    • Takes effort to optimize
    • Takes effort to plan and organize aka can get out of hand quickly

08:49 - Redux

  • Have we used?
    • Scott: Yes
    • Wes: Yes
  • Pros
    • Huge user base
    • Legacy of growth and improvements
    • Modern API
    • Even though it’s hard to learn, it has a clear “how to build with it” path
    • Dev tools
  • Cons
    • Complex
    • Thing that calls a thing that calls a thing that calls a thing
    • Confusion around what additional packages are needed, e.g. ducks, saga, whatever

17:08 - XState

  • Have we used?
    • Scott: Yes
    • Wes: No
  • Pros
  • Cons
    • Knowledge overhead - having to understand state machines
    • Complex syntax

23:26 - Zustand

  • Have we used?
    • Scott: Yes
    • Wes: No
  • Pros
    • Fast, scalable, easy to use
    • Simpler
    • No context providers
  • Cons
    • Smaller community 2.6k stars on Github
    • Can inform components transiently (without causing render)

27:04 - Apollo Client

  • Have we used?
    • Scott: Yes
    • Wes: Yes
  • Pros
    • Fits in well with your GraphQL API
    • Dev tools
  • Cons
    • Complex, large syntax for simple operations
    • Dev tools
    • SSR story is really complex. It’s hard because they aren’t also the framework.

31:35 - RXJS

  • Have we used?
    • Scott: No
    • Wes: No
  • Observable based

33:02 - React Query

  • Have we used?
    • Scott: No
    • Wes:
  • Pros
    • Fast growing community
    • Awesome dev tools
  • Cons
    • Not sure if this can be used for application state or just data

35:37 - Recoil

  • Have we used?
    • Scott: Yes
    • Wes: No
  • Pros
    • Very good for complex, splintered state needs
  • Cons
    • Overly complex for most use cases

38:34 - MobX

  • Have we used?
    • Scott: No
    • Wes: No
  • Pros
    • Big community
    • Not just React
    • Powerful
    • Observable capabilities
  • Cons
    • Uses decorators, but doesn’t have to?

43:15 - Easy Peasy

  • Have we used?
    • Scott: No
    • Wes: No
  • Pros
    • Simple API (easy peasy)
    • Redux dev tools supported

45:06 - Meteor ReactiveDict / ReactiveVar

  • Have we used?
    • Scott: Yes
    • Wes: No
  • Pros
    • Very simple
    • Get, set
    • Is Reactive
  • Cons
    • Lock-in to Meteor

46:19 - Final Thoughts On State

  • Wes: Go for simpler solutions
  • Scott: I think application state should be separate from application data, but maybe that’s because there isn’t a solution that does both how I want

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Aug 05, 2020
Hasty Treat - Upgrading Next.js Syntax Site
17:31

In this Hasty Treat, Scott and Wes talk about their experience upgrading Syntax.fm and some of the site’s big changes.

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:26 - The old Syntax site

  • Next.js
  • Custom server for
    • API - shows, Latest shows, sick picks
    • On-demand page builds
    • Custom routing

06:41 - The new Syntax site

  • Next.js has solved those things now, no need for a custom server.
    • API Routes
    • On-demand page builds: SSG with Next.js. It’s a server, but caches the page builds. Releasing the shows happens with revalidation. It’s statically generated like Gatsby, but you can also choose
    • Custom routing is now done with [pages]
  • Very fast to load
  • Very fast to build
  • Very fast to deploy
  • It’s now a “dynamic static site”
  • Zeit Now 1 to “Vercel”
  • Huge thanks to Tim Neutkens and Luis Alvarez from Vercel for making it happen.

13:23 - Why not:

  • Gatsby
    • Entire site would need to be regenerated exactly at 9am eastern
    • API of the site would need to be done with something else like Netlify Functions - not nearly as nice as Next API routes
  • Sapper

Links

Tweet us your tasty treats!

Aug 03, 2020
Meteor's 2nd Life
01:04:37

In this episode of Syntax, Scott and Wes talk with Filipe Névola about Meteor and the exciting things happening in the Meteor world!

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.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Guests

Show Notes

01:20 - What is your background?

03:41 - What exactly is Meteor?

12:00 - What are the biggest misconceptions of modern meteor?

18:20 - What do you say to people who think Meteor is dead?

21:33 - How does data get from your Meteor into your React app?

  • Example of getting data on client side
 import { useTracker } from 'meteor/react-meteor-data'  // Hook, basic use, everything in one component const MyProtectedPage = (pageId) => {   const { user, isLoggedIn, page } = useTracker(() => {     // The publication must also be secure     const subscription = Meteor.subscribe('page', pageId)     const page = Pages.findOne({ _id: pageId })     const user = Meteor.user()     const userId = Meteor.userId()     const isLoggingIn = Meteor.loggingIn()     return {       page,       isLoading: !subscription.ready(),       user,       userId,       isLoggingIn,       isLoggedIn: !!userId     }   }, [pageId])      if (!isLoggedIn) {     return 
Create an Account Log in
} return }

27:50 - What do you think is the ideal usecase for Meteor?

31:09 - Why did Meteor 1.0 fail to maintain hype?

36:41 - What does Meteor’s future look like?

45:27 - Are there any plans to integrate serverless into Meteor?

46:55 - Any little known features of Meteor that people might be interested in?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 29, 2020
Hasty Treat - Target=_blank security issue? What's the deal with noopener and noreferrer?
14:00

In this Hasty Treat, Scott and Wes talk about noopener and noreferrer and why you should use them with links that have blank targets.

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:35 - What’s the big deal?

  • If you have a link that is target="_blank" you should add rel=“noopener” and rel=“noreferrer”
  • Retail Me Not uses it
  • Valid use cases:
    • Same domain change the page from a popup
    • Cross domain changing page data
  • Example: https://mathiasbynens.github.io/rel-noopener/

05:39 - Why doesn’t the browser just fix it?

10:48 - Does this hurt SEO?

  • It breaks analytics of the recipient site, turning a referral visit from your site into direct traffic, unless the link has UTM or similar tracking parameters. If you have a site where passing traffic offsite is part of the business model, links need an affiliate id instead.

Links

Tweet us your tasty treats!

Jul 27, 2020
Potluck - Beating Procrastination × Rollup vs Webpack × Leadership × Code Planning × Styled Components × More!
50:41

It’s another potluck! In this episode, Scott and Wes answer your questions about transitioning to backend dev, tips for beating procrastination, Rollup vs Webpack, code planning, growing as a leader 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.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

02:33 - I am a junior dev, coming up on two years at my current agency. I have been primarily on the frontend using Angular and templating with Handlebars and other HTML and CSS. I have been asked if I would be interested in moving more into backend, with a focus on Node.js. Outside of creating APIs, what else should I do to learn “backend”?

06:08 - I work as a web master and would like to be a frontend developer someday. Currently I am working on a MERN stack app on my own to enhance my skills, but have problems focusing and tend to procrastinate a lot. How do you tackle distractions and get things done? I would appreciate some tips.

11:00 - Rollup or Webpack? Webpack 5 still doesn’t seem to support ES6 module output, as described by Philip Walton, so instead of upgrading to Webpack 5, this might be a good time to think about switching to Rollup (or Parcel).

13:46 - I have been learning web development (HTML, CSS and JS) and am at a place where I can build simple websites for small businesses, but I feel like a beginner and am wondering if you have any recommendations on courses to get to a more intermediate/advanced level?

18:01 - Why should you choose Styled Components over other ways of writing CSS?

22:56 - What are your thoughts on companies that make senior developer roles require leadership responsibilities? A great technical person does not always make a great leader or visa versa.

26:36 - I am often not good at planning out code from the start. I find that it’s easier to start coding, write a few lines, run it to see where I’m at, and carry on. This technique doesn’t work when I need to wait for a deploy to finish before I can view the result, as it greatly increases dev time. Do you have any advice for what I can do better?

31:43 - I have a very random question. for context I’m a Mac and Linux user myself. However, recently while building our company application I’ve noticed that Windows does extremely weird things with font sizes. Since we have a pretty decent Windows user base, obviously this is something my partner and I want to solve. However I’m very unsure of the best way to handle it. It seems entirely different from user to user. How in the world do we as developers account for these inconsistencies? We have tried vertical media queries that more or less kick them to tablet mode. Obviously this is less than optimal.

37:50 - Are side projects common among developers? I recently mentioned to my boss that I have a few side projects - nothing serious, just for learning mostly - and he said he would rather I didn’t, and instead focus on my work. He said he hadn’t really heard of developers doing side projects, and that if I want to work on things that aren’t our work he has other things I can do.

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 22, 2020
Hasty Treat - Turbolinks + Server Generated HTML + JS Sprinkles
15:31

In this Hasty Treat, Scott and Wes talk about turbolinks — what it is, how to use is, popular apps using is, 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.

Show Notes

02:50 - What is turbolinks?

  • Generate HTML on the server
  • Send it over the ajax request
  • Load it in the page

03:55 - Who is using Turbolinks?

05:24 - Turbo Links javascript browser bundle

  • Intercepts any link click
  • Fetches the page HTML

09:19 - JS Sprinkles

Links

Tweet us your tasty treats!

Jul 20, 2020
Video for the Web 2020 and Beyond
53:13

In this episode of Syntax, Scott and Wes talk about the future of video for the web!

Sanity - Sponsor

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

Freshbooks - Sponsor

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

Show Notes

08:19 - Scott’s Background in video

  • Started editing in middle school
  • Worked professionally as an editor and production assistant for magazine
  • Created specialty flash video players
  • Have been hosting video content since the start of my web career

09:12 - Terminology

  • Transcoding - digital to digital conversion of one format to another
  • Ingest - bringing a video to a new facility (ie uploaded video file or data stream to server)

10:51 - Streaming vs Downloading

  • Streaming is basically chunks of content at a time, while download is waiting for the entire file to be downloaded before playing.

11:16 - Formats

  • MP4
  • WebM
  • DASH
  • HLS (HTTP Live Streaming)
  • m3u8

21:35 - Players

27:48 - Services Roundup 🐴

  • YouTube - free
  • Vimeo - $
  • MUX - $$
  • Wistia - 
  • Cloudflare - $$
  • JW Player - $
  • Cloudinary - $$$
  • Brightcove - $$$
  • Azure - $$
  • Bit Movin - $$
  • AWS - $$

46:59 - What Scott did and how/why

  • upchunk
  • Mux
  • Video.js
  • Custom uploader
  • Using polling

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 15, 2020
Hasty Treat - The Domain Name Game
19:38

In this Hasty Treat it’s another edition of the Top Level Domain Game!

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:25 - How it works

We pick a TLD from a list, and the other person needs to guess:

  1. Is it for a country or business? +5 points
  2. What country, business, or type of business is it for? +5 points
  3. How much per year does it cost to register? You may also say “unregisterable” +/- off by $$ https://www.101domain.com/
  4. Is scott._ and wes._ available? -10 points for each

04:00 - .sd

  • Scott: 5 + -5 + -126 + -10 + 10 = -126

05:46 - .ong

  • Wes: 5 + -5 + -30 + 20 = -10

07:53 - .koeln

  • Scott: 5 + -5 + -20 + 20 = -126

09:23 - .co.ke

  • Wes: 10 + -15 + 0 = -15

11:00 - .tr

  • Scott: 5 + -5 + 0 + 0 = -126

12:25 - .ist

  • Wes: -5 + 5 + -10 + 0 = -25

13:57 - .xn—45q11c

  • Scott: 5 + 5 + -295 + 10 = 20 = -401

16:40 - .reit

  • Wes: 10 + -1460 + 10 = -1465

Tweet us your tasty treats!

Jul 13, 2020
Jerome Hardaway + Vets Who Code
01:02:38

In this episode of Syntax, Scott and Wes talk with Jerome Hardaway about web dev, vets who code, diversity in tech, and more!

.TECH Domains - Sponsor

If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Guests

Show Notes

01:50 - Captain America of Tech

03:25 - Where do you work and what type of stuff do you work on?

08:03 - What was your introduction to programming?

15:46 - When did you start Vets Who Code?

24:13 - What is the stack behind Vets Who Code?

29:56 - How do you help prep vets to get jobs?

41:32 - How can you be an ally and amplify black voices in tech?

50:05 - Everybody against racism

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Jul 08, 2020
Hasty Treat - Forms, Captchas, Honeypots, Dealing With Malicious Users and the Sad State of Contact Forms
20:39

In this Hasty Treat, Scott and Wes talk about forms, captchas, dealing with malicious users, and more!

LogRocket - Sponsor

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

Show Notes

02:00 - So you made a form:

  1. Contact form
  2. Sales form
  3. Email signup for newsletter
  4. Bug report
  5. Sign up for an account
  6. Password reset

03:00 - Now someone is going to:

  1. Have a bot that submits it
  2. Maliciously write a bot that submits thousands

04:14 - So what can you do?

4:54 - Honey pot

  • This is a field that is either hidden or you tell the user not to fill in
  • Can goof up autofill
  • Works in many cases

07:37 - IP Throttle

  • Only allow each IP to do an action a certain number or times inside a window
  • You may only try signing up once per 10 mins

09:48 Block known ASN

12:37 - Captcha

  • Soft captcha: “What is 1 plus 1?”
  • Annoying captcha: Type these letters
  • Google captcha: Train our self driving cars
  • Hidden captcha
  • Cloudflare hCaptcha

Links

Tweet us your tasty treats!

Jul 06, 2020
Our React Wish List
51:55

In this episode of Syntax, Scott and Wes talk about what they wish existed in React!

DevLifts - Sponsor

Refactor your body with DevLifts. They have a few different programs: 1) fit.start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it's going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY.

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

React

03:53 - Unmount delay for animation

06:20 - Suspense with SSR released (or not because I think they are shelving it)

09:24 - File based components

  • Like Svelte and Vue
  • This would look like a file with a special scoped