Syntax - Tasty Web Development Treats
Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.
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.
All
Progress
Duration
Release Date
Hasty Treat - Handy Utility Functions with Just
In this Hasty Treat, Scott and Wes talk about handy utility functions with Just!
<a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor
------------------------------------------------------------------------
[Sanity.io] (http://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 <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.
<a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.
<a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes
----------------------------------------------------------
03:44 - What is Just?
--- <a href= "https://github.com/angus-c/just">https://github.com/angus-c/just</a>
--- No dependencies
--- It’s written in JS, so you can copy+paste them if you really need it
--- Types available
--- <a href= "https://medium.com/@angustweets/just-a12d54221f65#.ljib0mfr5">https://medium.com/@angustweets/just-a12d54221f65#.ljib0mfr5</a>
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
<a id="Links_53" name="Links_53"></a>Links
-------------------------------------------
--- <a href= "https://github.com/angus-c/just">https://github.com/angus-c/just</a>
--- <a href= "https://github.com/antony">https://github.com/antony</a>
<a id="Tweet_us_your_tasty_treats_57" name= "Tweet_us_your_tasty_treats_57"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
18 Oct 2021
15 MINS
15:21
18 Oct 2021
A Podcast on Running a Podcast
In this episode of Syntax, Scott and Wes talk about running a podcast — recording, sponsoring, where to start, and more!
<a id= "Freshbooks__Sponsor_9" name="Freshbooks__Sponsor_9"></a>Freshbooks - Sponsor
------------------------------------------------------------------------------------
Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.
<a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.
<a id="Cloudinary__Sponsor_15" name= "Cloudinary__Sponsor_15"></a>Cloudinary - Sponsor
---------------------------------------------------------------------------------------
<a href= "https://cloudinary.com/?utm_source=Syntax.fm&utm_medium=Podcast&utm_content=Cloudinary_Syntax_podcast"> Cloudinary</a> 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.
<a id="Show_Notes_18" name="Show_Notes_18"></a>Show Notes
----------------------------------------------------------
01:45 - Recording Setup
--- Zoom to chat
--- Record on Zoom
--- Quicktime
--- Logic
--- [Riverside] (https://riverside.fm/)
--- Wes:
------ <a href= "https://www.amazon.com/PR-40-Dynamic-Studio-Recording-Microphone/dp/B000SOYOTQ"> Heil PR-40</a>
------ <a href= "https://www.amazon.com/dbx-286s-Microphone-Channel-Processor/dp/B004LWH79A/r"> dbx 286s</a>
--- Scott:
------ <a href= "https://www.amazon.com/Electro-Voice-RE20-Broadcast-Microphone-Variable-D/dp/B00KCN83V8"> Electro-Voice RE20</a>
------ <a href= "https://www.amazon.com/Cloud-Microphones-CL-1-Cloudlifter-1-channel/dp/B004MQSV04/"> Cloudlifter</a>
------ <a href= "https://www.amazon.com/dbx-286s-Microphone-Channel-Processor/dp/B004LWH79A/r"> dbx 286s</a>
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
------ [ShopTalk Collab] (https://syntax.fm/show/374/shoptalk-x-syntax)
------ <a href= "https://syntax.fm/show/392/changelog-frontend-feud">Changelog Collab</a>
--- 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] (https://podcastroyale.net/)
--- 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] (https://nextjs.org/)
--- 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 <a href= "https://www.patreon.com/">Patreon</a>?
--- Ad-free version?
46:04 - Live shows
--- Confs
--- Livestream
<a id="Links_92" name="Links_92"></a>Links
-------------------------------------------
--- [Delicious Brains] (https://deliciousbrains.com/)
--- [Syntax Ep 004: JavaScript Tooling] (https://syntax.fm/show/004/javascript-tooling)
--- <a href= "https://www.amazon.com/LuLaRich-Season-1/dp/B09CFXPNSX">LulaRich</a>
<a id="_SIIIIICK__PIIIICKS__97" name= "_SIIIIICK__PIIIICKS__97"></a>××× SIIIIICK ××× PIIIICKS ×××
--------------------------------------------------------------------------------------------------
--- Scott: <a href= "https://www.netflix.com/title/81026438">Untold: Crime & Penalties</a>
--- Wes: <a href= "https://www.amazon.com/Roadrunner-Film-About-Anthony-Bourdain/dp/B09BB55XXX">Roadrunner: A Film About Anthony Bourdain</a>
<a id="Shameless_Plugs_101" name= "Shameless_Plugs_101"></a>Shameless Plugs
----------------------------------------------------------------------------
---Scott: <a href= "https://www.leveluptutorials.com/pro">All Courses</a> - Sign up for the year and save 25%!
---Wes: [All Courses] (https://wesbos.com/courses/) - Use the coupon code ‘Syntax’ for $10 off!
<a id="Tweet_us_your_tasty_treats_105" name= "Tweet_us_your_tasty_treats_105"></a>Tweet us your tasty treats!
--------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
---<a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
---Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
13 Oct 2021
52 MINS
52:28
13 Oct 2021
Hasty Treat - Neat Things in CSS Color - Current and Coming!
In this Hasty Treat, Scott and Wes talk about all things color in CSS, both current and coming soon!
<a id= "Sentry__Sponsor_9" name="Sentry__Sponsor_9"></a>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 <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.
<a id="Sanity__Sponsor_12" name="Sanity__Sponsor_12"></a>Sanity - Sponsor
--------------------------------------------------------------------------
[Sanity.io] (http://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 <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.
<a id="Show_Notes_15" name="Show_Notes_15"></a>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
--- <a href= "https://davidwalsh.name/css-accent-color">https://davidwalsh.name/css-accent-color</a>
07:34 - currentcolor
--- <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword"> https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword</a>
08:54 - Profiled color values - color()
--- <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color()"> https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color()</a>
11:00 - color-mix()
--- <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix()"> https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix()</a>
--- The color-mix() functional notation takes two color values and returns the result of mixing them in a given colorspace by a given amount.
--- Would be handy for programmatically generating colors - 10% more blue for a border? Sure!
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.
--- <a href= "https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/">https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/</a>
<a id="Links_52" name="Links_52"></a>Links
-------------------------------------------
--- <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">https://developer.mozilla.org/en-US/docs/Web/CSS/color_value</a>
--- <a href= "https://twitter.com/argyleink">https://twitter.com/argyleink</a>
<a id="Tweet_us_your_tasty_treats_56" name= "Tweet_us_your_tasty_treats_56"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
11 Oct 2021
26 MINS
26:48
11 Oct 2021
Potluck — Corn Shucking × Self-Hosting Images × WordPress × Getting Scammed × Portfolios
It’s another Potluck! In this episode, Scott and Wes answer your questions about corn shucking, self-hosting images, WordPress, getting scammed, portfolios, more!
<a id= "Linode__Sponsor_9" name="Linode__Sponsor_9"></a>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 <a href= "https://linode.com/syntax">linode.com/syntax</a>. 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 <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started.
<a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>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 <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.
<a id="Auth0__Sponsor_15" name="Auth0__Sponsor_15"></a>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. <a href= "https://a0.to/syntax">https://a0.to/syntax</a>
<a id="Show_Notes_18" name="Show_Notes_18"></a>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.”
<a id="Links_43" name="Links_43"></a>Links
-------------------------------------------
--- [https://kit.svelte.dev/] (https://kit.svelte.dev/)
--- [https://www.cypress.io/] (https://www.cypress.io/)
--- <a href= "https://www.svelteradio.com/">https://www.svelteradio.com/</a>
--- <a href= "https://www.digitalocean.com/blog/">https://www.digitalocean.com/blog/</a>
--- <a href= "https://caddyserver.com/">https://caddyserver.com/</a>
--- <a href= "https://daringfireball.net/">https://daringfireball.net/</a>
<a id="_SIIIIICK__PIIIICKS__51" name= "_SIIIIICK__PIIIICKS__51"></a>××× SIIIIICK ××× PIIIICKS ×××
--------------------------------------------------------------------------------------------------
--- Scott: <a href= "https://www.amazon.com/LuLaRich-Season-1/dp/B09CFXPNSX">LuLaRich</a>
--- Wes: [Flame Bulb] (https://amzn.to/3zq74e2)
<a id="Shameless_Plugs_55" name="Shameless_Plugs_55"></a>Shameless Plugs
-------------------------------------------------------------------------
--- Scott: [Web Components For Beginners] (https://www.leveluptutorials.com/pro) - Sign up for the year and save 25%!
--- Wes: [Beginner JavaScript Course] (https://beginnerjavascript.com/) - Use the coupon code ‘Syntax’ for $10 off!
<a id="Tweet_us_your_tasty_treats_59" name= "Tweet_us_your_tasty_treats_59"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
06 Oct 2021
57 MINS
57:39
06 Oct 2021
Hasty Treat - Spicy Takeout - PHP Is Good and We’re Just Re-Creating It
In this Hasty Treat, Scott and Wes talk about how much modern web development has taken from PHP!
<a id= "Freshbooks__Sponsor_9" name="Freshbooks__Sponsor_9"></a>Freshbooks - Sponsor
------------------------------------------------------------------------------------
Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.
<a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.
<a id="Show_Notes_15" name="Show_Notes_15"></a>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] (https://nextjs.org/) pages
--- Serverless functions
11:13 - Server-rendered
--- [Hotwire] (https://hotwired.dev/)
11:38 - $_GET, $_POST, are just available
--- [Next.js] (https://nextjs.org/) hooks
12:29 - Variable interpolation
12:59 - All-in-one frameworks
--- [Laravel] (https://laravel.com/) did it
--- [CakePHP] (https://cakephp.org/)
--- [CodeIgnighter] (https://codeigniter.com/)
13:32 - Direct DB access
--- SQL statements
14:37 - Why do people hate PHP?
--- [WordPress] (https://wordpress.org/)
--- 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)
<a id="Links_62" name="Links_62"></a>Links
-------------------------------------------
--- <a href= "https://syntax.fm/show/267/hasty-treat-turbolinks-server-generated-html-js-sprinkles"> Syntax 267: Hasty Treat - Turbolinks + Server Generated HTML + JS Sprinkles</a>
--- [https://vuejs.org/] (https://vuejs.org/)
--- [https://www.hey.com/] (https://www.hey.com/)
<a id="Tweet_us_your_tasty_treats_67" name= "Tweet_us_your_tasty_treats_67"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
04 Oct 2021
21 MINS
21:43
04 Oct 2021
Changelog Frontend Feud
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!
<a id= "TECH_Domains__Sponsor_9" name="TECH_Domains__Sponsor_9"></a>.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 <a href= "https://go.tech/syntaxistech">go.tech/syntaxistech</a> and using the coupon code “syntax5”.
<a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.
<a id="Mux__Sponsor_15" name="Mux__Sponsor_15"></a>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 <a href= "https://mux.com/syntax">mux.com/syntax</a>.
<a id="Show_Notes_18" name="Show_Notes_18"></a>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
<a id="Links_34" name="Links_34"></a>Links
-------------------------------------------
--- [Changelog] (https://changelog.com/)
--- [JS Party] (https://changelog.com/jsparty)
--- [Chris Coyier] (https://twitter.com/chriscoyier)
--- [Dave Rupert] (https://twitter.com/davatron5000)
--- [Wes Bos] (https://twitter.com/wesbos)
--- [Scott Tolinski] (https://twitter.com/stolinski)
--- [Jerod Santo] (https://twitter.com/jerodsanto)
--- [Amelia Wattenberger] (https://twitter.com/wattenberger)
--- [Divya] (https://twitter.com/shortdiv)
--- <a href= "https://www.bendsource.com/bend/the-feud-at-the-seventh-mountain-condo-owners-prominent-oregon-family-fight-over-repairs-to-inn/Content?oid=2130385"> The Feud At The Seventh Mountain</a>
--- [Amelia’s repo visualizer] (https://github.com/githubocto/repo-visualizer)
--- [CSS-Tricks] (https://css-tricks.com/)
--- [freeCodeCamp] (https://www.freecodecamp.org/)
--- [Wes Bos’ courses] (https://wesbos.com/courses)
--- [Changelog Merch] (https://merch.changelog.com/)
--- [Level Up Tutorials] (https://leveluptutorials.com/)
<a id="Shameless_Plugs_52" name="Shameless_Plugs_52"></a>Shameless Plugs
-------------------------------------------------------------------------
--- Scott: [All courses] (https://www.leveluptutorials.com/pro) - Sign up for the year and save 25%!
--- Wes: [All Courses] (https://wesbos.com/courses/) - Use the coupon code ‘Syntax’ for $10 off!
<a id="Tweet_us_your_tasty_treats_56" name= "Tweet_us_your_tasty_treats_56"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
29 Sep 2021
53 MINS
53:15
29 Sep 2021
Hasty Treat - Desktop Apps + New Tech We Love
In this Hasty Treat, Scott and Wes talk about the hottest new tech they love!
<a id= "Linode__Sponsor_9" name="Linode__Sponsor_9"></a>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 <a href= "https://linode.com/syntax">linode.com/syntax</a>. 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 <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started.
<a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>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 <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.
<a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes
----------------------------------------------------------
03:30 - Lucy Language
--- [https://lucylang.org/] (https://lucylang.org/)
---A concise language for describing Finite State Machines
06:10 - MDSvex
--- <a href= "https://github.com/pngwn/MDsveX">https://github.com/pngwn/MDsveX</a>
--- Mdx for Svelte
--- Smartypants options transforms ASCII punctuation into fancy typographic punctuation HTML entities
--- <a href= "https://github.com/rehypejs/awesome-rehype">https://github.com/rehypejs/awesome-rehype</a>
09:56 - RECut
--- [https://getrecut.com/] (https://getrecut.com/)
12:26 - Fig
--- [https://fig.io/] (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/] (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
--- <a href= "https://www.raycast.com/">https://www.raycast.com/</a>
--- 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
--- [https://tableplus.com/] (https://tableplus.com/)
--- Fantastic little DB tool
23:59 - Obsidian Update
--- [https://obsidian.md/] (https://obsidian.md/)
--- Wes: I haven’t got into it - find myself still going back to VS Code
26:50 - Descript Update
--- <a href= "https://www.descript.com/">https://www.descript.com/</a>
--- All-in-one audio and video editing, like a doc
<a id="Links_77" name="Links_77"></a>Links
-------------------------------------------
--- <a href= "https://chriscoyier.net/">https://chriscoyier.net/</a>
--- [https://hyper.is/] (https://hyper.is/)
--- <a href= "https://www.alfredapp.com/">https://www.alfredapp.com/</a>
--- [https://strapi.io/] (https://strapi.io/)
--- [https://studio3t.com/] (https://studio3t.com/)
--- <a href= "https://www.mindnode.com/">https://www.mindnode.com/</a>
--- [https://remarkable.com/] (https://remarkable.com/)
--- [https://www.notion.so/] (https://www.notion.so/)
--- [https://joplinapp.org/] (https://joplinapp.org/)
--- <a href= "http://www.telestream.net/screenflow/overview.htm">http://www.telestream.net/screenflow/overview.htm</a>
--- <a href= "https://shinywhitebox.com/">https://shinywhitebox.com/</a>
<a id="Tweet_us_your_tasty_treats_90" name= "Tweet_us_your_tasty_treats_90"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
27 Sep 2021
32 MINS
32:30
27 Sep 2021
From React To SvelteKit
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!
<a id= "Prismic__Sponsor_9" name="Prismic__Sponsor_9"></a>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 <a href= "https://prismic.io/syntax">prismic.io/syntax</a>.
<a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>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 <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.
<a id="Cloudinary__Sponsor_15" name= "Cloudinary__Sponsor_15"></a>Cloudinary - Sponsor
---------------------------------------------------------------------------------------
<a href= "https://cloudinary.com/?utm_source=Syntax.fm&utm_medium=Podcast&utm_content=Cloudinary_Syntax_podcast"> Cloudinary</a> 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.
<a id="Show_Notes_18" name="Show_Notes_18"></a>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
------------ <a href= "https://www.apollographql.com/">Apollo</a> → <a href= "https://github.com/kiedtl/gfetch">GFetch</a>
------------ [Plyr] (https://plyr.io/) → <a href= "https://vimejs.com/">Vime</a>
--------- 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
------ Package dir, new SvelteKit project, svelte-kit package
------I made svelte-toy - <a href= "https://github.com/leveluptuts/svelte-toy">https://github.com/leveluptuts/svelte-toy</a>
------ svelte-element-query - <a href= "https://github.com/leveluptuts/Svelte-Element-Query">https://github.com/leveluptuts/Svelte-Element-Query</a>
------ svelte-simple-datatable fork
--- 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 <a href= "https://svelte.dev/docs#style_props">https://svelte.dev/docs#style_props</a>
--- Animations are all done with Svelte’s internal animations lib
32:45 - Hosting
--- adapter-node
--- Hosted on [render.com] (http://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
------ [Pancake] (https://pancake-charts.surge.sh/) lib for charts
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}
--- Is it stable?
--- [Deno] (https://deno.land/) - <a href= "https://crewdevio.mod.land/projects/Snel?ref=madewithsvelte.com">Snel</a>
<a id="Links_91" name="Links_91"></a>Links
-------------------------------------------
--- <a href= "https://leveluptutorials.com/">https://leveluptutorials.com/</a>
--- [https://vitejs.dev/] (https://vitejs.dev/)
<a id="_SIIIIICK__PIIIICKS__95" name= "_SIIIIICK__PIIIICKS__95"></a>××× SIIIIICK ××× PIIIICKS ×××
--------------------------------------------------------------------------------------------------
--- Scott: <a href= "https://www.theskepticsguide.org/podcasts/episode-844">The Skeptics Guide To The Universe Podcast</a>
--- Wes: [Pressure Washer Nozzle] (https://amzn.to/39iGlWl)
<a id="Shameless_Plugs_99" name="Shameless_Plugs_99"></a>Shameless Plugs
-------------------------------------------------------------------------
---Scott: <a href= "https://www.leveluptutorials.com/pro">Web Components 101</a> - Sign up for the year and save 25%!
---Wes: [All Courses] (https://wesbos.com/courses/) - Use the coupon code ‘Syntax’ for $10 off!
<a id="Tweet_us_your_tasty_treats_103" name= "Tweet_us_your_tasty_treats_103"></a>Tweet us your tasty treats!
--------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
---<a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
---Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
22 Sep 2021
55 MINS
55:27
22 Sep 2021
Hasty Treat - Webhooks
In this Hasty Treat, Scott and Wes talk about webhooks — one of those concepts that seems a lot scarier than it actually is.
<a id= "Linode__Sponsor_9" name="Linode__Sponsor_9"></a>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 <a href= "https://linode.com/syntax">linode.com/syntax</a>. 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 <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started.
<a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.
<a id="Show_Notes_15" name="Show_Notes_15"></a>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
--- Can be a pain in the ass
--- [ngrok] (https://ngrok.com/) - expose locally
--- <a href= "https://theboroer.github.io/localtunnel-www/">localtunnel</a>
--- [Insomnia] (https://insomnia.rest/)
--- [Postman] (https://www.postman.com/)
--- [Stripe] (https://stripe.com/) has a great VS code extension
--- [Snipcart] (https://snipcart.com/) has an awesome dashboard
------ Will also tell you when one failed
--- [webhook.site] (http://webhook.site/)
--- [https://expose.dev/] (https://expose.dev/)
--- [IFTTT] (https://ifttt.com/)
--- [Zapier] (https://zapier.com/)
<a id="Tweet_us_your_tasty_treats_55" name= "Tweet_us_your_tasty_treats_55"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
20 Sep 2021
21 MINS
21:35
20 Sep 2021
New to JavaScript — ES2022
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.
<a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor
------------------------------------------------------------------------
[Sanity.io] (http://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 <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.
<a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.
<a id="Auth0__Sponsor_15" name="Auth0__Sponsor_15"></a>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: <a href= "https://a0.to/syntax">https://a0.to/syntax</a>.
<a id="Show_Notes_18" name="Show_Notes_18"></a>Show Notes
----------------------------------------------------------
04:50 - Regex indicies
--- New d flag in a regex
--- [https://regex101.com/] (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
--- Getters and setters introduced in es5
--- <a href= "https://www.w3schools.com/js/js_object_accessors.asp">https://www.w3schools.com/js/js_object_accessors.asp</a>
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
---<a href= "https://github.com/tc39/proposal-accessible-object-hasownproperty"> https://github.com/tc39/proposal-accessible-object-hasownproperty</a>
24:51 - Class static block
---A static block allows you to run code before creating an optional static property during initialization
---<a href= "https://github.com/tc39/proposal-class-static-block">https://github.com/tc39/proposal-class-static-block</a>
<a id="Links_118" name="Links_118"></a>Links
---------------------------------------------
---<a href= "https://github.com/tc39/proposals/blob/master/finished-proposals.md"> https://github.com/tc39/proposals/blob/master/finished-proposals.md</a>
<a id="_SIIIIICK__PIIIICKS__121" name= "_SIIIIICK__PIIIICKS__121"></a>××× SIIIIICK ××× PIIIICKS ×××
----------------------------------------------------------------------------------------------------
---Scott: [Ultraloq Smart Lock] (https://amzn.to/3DVhzJC)
---Wes: <a href= "https://amzn.to/3DU1lR2">Magnatiles</a>
<a id="Shameless_Plugs_125" name= "Shameless_Plugs_125"></a>Shameless Plugs
----------------------------------------------------------------------------
---Scott: <a href= "https://www.leveluptutorials.com/pro">Web Components Course</a> - Sign up for the year and save 25%!
---Wes: [All Courses] (https://wesbos.com/courses/) - Use the coupon code ‘Syntax’ for $10 off!
<a id="Tweet_us_your_tasty_treats_129" name= "Tweet_us_your_tasty_treats_129"></a>Tweet us your tasty treats!
--------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
---<a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
---Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
15 Sep 2021
38 MINS
38:41
15 Sep 2021
Hasty Treat - Starlink Rural Internet
In this Hasty Treat, Scott and Wes talk about Wes’ new satellite internet setup — best use-cases and how to set it up.
<a id= "Sentry__Sponsor_9" name="Sentry__Sponsor_9"></a>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 <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.
<a id="Freshbooks__Sponsor_12" name= "Freshbooks__Sponsor_12"></a>Freshbooks - Sponsor
---------------------------------------------------------------------------------------
Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.
<a id="Show_Notes_15" name="Show_Notes_15"></a>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
<a id="Links_70" name="Links_70"></a>Links
-------------------------------------------
--- [Starlink] (https://www.starlink.com/)
--- [Wyze] (https://wyze.com/)
--- <a href= "https://store.ui.com/collections/unifi-network-unifi-os-consoles/products/unifi-dream-machine"> UniFi Dream Machine</a>
<a id="Tweet_us_your_tasty_treats_75" name= "Tweet_us_your_tasty_treats_75"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
13 Sep 2021
21 MINS
21:14
13 Sep 2021
Potluck - Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Lapto...
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!
<a id= "Linode__Sponsor_9" name="Linode__Sponsor_9"></a>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 <a href= "https://linode.com/syntax">linode.com/syntax</a>. 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 <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started.
<a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>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 <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.
<a id="Auth0__Sponsor_15" name="Auth0__Sponsor_15"></a>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] (https://a0.to/syntax)
<a id="Show_Notes_18" name="Show_Notes_18"></a>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 <a href= "http://amazon.com/">amazon.com</a> 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 (<a href= "https://solidproject.org/">https://solidproject.org/</a>) 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?
<a id="Links_43" name="Links_43"></a>Links
-------------------------------------------
--- [https://sass-lang.com/] (https://sass-lang.com/)
--- [https://postcss.org/] (https://postcss.org/)
--- <a href= "https://ishoudinireadyyet.com/">https://ishoudinireadyyet.com/</a>
--- [https://astro.build/] (https://astro.build/)
--- [https://kit.svelte.dev/] (https://kit.svelte.dev/)
--- <a href= "https://www.widevine.com/">https://www.widevine.com/</a>
--- [https://frame.work/] (https://frame.work/)
--- [https://www.prisma.io/] (https://www.prisma.io/)
--- <a href= "https://www.mongodb.com/">https://www.mongodb.com/</a>
--- <a href= "https://www.postgresql.org/">https://www.postgresql.org/</a>
--- [https://mongoosejs.com/] (https://mongoosejs.com/)
--- [https://keystonejs.com/] (https://keystonejs.com/)
--- [https://frontity.org/] (https://frontity.org/)
--- [https://webpack.js.org/] (https://webpack.js.org/)
<a id="_SIIIIICK__PIIIICKS__59" name= "_SIIIIICK__PIIIICKS__59"></a>××× SIIIIICK ××× PIIIICKS ×××
--------------------------------------------------------------------------------------------------
--- Scott: [Hot App] (https://github.com/macmade/Hot)
--- Wes: [Pet Food Mat] (https://amzn.to/3ljDQdr)
<a id="Shameless_Plugs_63" name="Shameless_Plugs_63"></a>Shameless Plugs
-------------------------------------------------------------------------
--- Scott: [Web Components Course] (https://www.leveluptutorials.com/pro) - Sign up for the year and save 25%!
--- Wes: [All Courses] (https://wesbos.com/courses/) - Use the coupon code ‘Syntax’ for $10 off!
<a id="Tweet_us_your_tasty_treats_67" name= "Tweet_us_your_tasty_treats_67"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
08 Sep 2021
53 MINS
53:01
08 Sep 2021
Hasty Treat - TypeScripts Strict Explained
In this Hasty Treat, Scott and Wes talk about the Typescript strict flag — what it does and why you might use it.
<a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor
------------------------------------------------------------------------
[Sanity.io] (http://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 <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.
<a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.
<a id="Show_Notes_15" name="Show_Notes_15"></a>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
<a id="Links_45" name="Links_45"></a>Links
-------------------------------------------
--- <a href= "https://www.typescriptlang.org/tsconfig#strict">https://www.typescriptlang.org/tsconfig#strict</a>
<a id="Tweet_us_your_tasty_treats_48" name= "Tweet_us_your_tasty_treats_48"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
06 Sep 2021
17 MINS
17:35
06 Sep 2021
STUMP'D - Coding Interview Questions
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.
<a id= "Freshbooks__Sponsor_9" name="Freshbooks__Sponsor_9"></a>Freshbooks - Sponsor
------------------------------------------------------------------------------------
Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.
<a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.
<a id="Auth0__Sponsor_15" name="Auth0__Sponsor_15"></a>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. <a href= "https://a0.to/syntax">https://a0.to/syntax</a>
<a id="Show_Notes_18" name="Show_Notes_18"></a>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?
<a id="Links_55" name="Links_55"></a>Links
-------------------------------------------
--- <a href= "https://30secondsofinterviews.org/">https://30secondsofinterviews.org/</a>
--- <a href= "https://www.interviewbit.com/javascript-interview-questions/">https://www.interviewbit.com/javascript-interview-questions/</a>
--- <a href= "https://github.com/sudheerj/javascript-interview-questions">https://github.com/sudheerj/javascript-interview-questions</a>
--- <a href= "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label"> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label</a>
--- [https://es6.io/] (https://es6.io/)
<a id="_SIIIIICK__PIIIICKS__62" name= "_SIIIIICK__PIIIICKS__62"></a>××× SIIIIICK ××× PIIIICKS ×××
--------------------------------------------------------------------------------------------------
--- Scott: [Builderment] (https://builderment.com/)
--- Wes: [Lawn Mower Blade Balancer] (https://www.amazon.com/s?k=blade+balancer)
<a id="Shameless_Plugs_66" name="Shameless_Plugs_66"></a>Shameless Plugs
-------------------------------------------------------------------------
--- Scott: [All Courses] (https://www.leveluptutorials.com/pro) - Sign up for the year and save 25%!
--- Wes: [All Courses] (https://wesbos.com/courses/) - Use the coupon code ‘Syntax’ for $10 off!
<a id="Tweet_us_your_tasty_treats_70" name= "Tweet_us_your_tasty_treats_70"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
01 Sep 2021
49 MINS
49:57
01 Sep 2021
Hasty Treat - Freelance Tips - Toxic Clients
In this Hasty Treat, Scott and Wes talk about toxic clients — how to identify them, and what to do about them.
<a id= "Linode__Sponsor_9" name="Linode__Sponsor_9"></a>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 <a href= "https://linode.com/syntax">linode.com/syntax</a>. 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 <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started.
<a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>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 <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.
<a id="Show_Notes_15" name="Show_Notes_15"></a>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.
<a id="Tweet_us_your_tasty_treats_44" name= "Tweet_us_your_tasty_treats_44"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
30 Aug 2021
24 MINS
24:51
30 Aug 2021
Advice for New Devs
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.
<a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor
------------------------------------------------------------------------
[Sanity.io] (http://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 <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.
<a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>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 <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.
<a id="Cloudinary__Sponsor_15" name= "Cloudinary__Sponsor_15"></a>Cloudinary - Sponsor
---------------------------------------------------------------------------------------
<a href= "https://cloudinary.com/?utm_source=Syntax.fm&utm_medium=Podcast&utm_content=Cloudinary_Syntax_podcast"> Cloudinary</a> 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.
<a id="Show_Notes_18" name="Show_Notes_18"></a>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
--- Tweet thread - <a href= "https://twitter.com/wesbos/status/1417139639861735424">https://twitter.com/wesbos/status/1417139639861735424</a>
29:30 - Ben Newton
--- Soft skills are about as important as coding skills if you want to go far.
--- <a href= "https://twitter.com/BenENewton/status/1417140062211526658">https://twitter.com/BenENewton/status/1417140062211526658</a>
32:46 - Eric McCormick
--- Don’t be afraid to push yourself beyond your comfort zone.
--- <a href= "https://twitter.com/edm00se/status/1417140503527792640">https://twitter.com/edm00se/status/1417140503527792640</a>
33:31 - Jason Liggi
--- You don’t have to code for fun.
--- <a href= "https://twitter.com/Liggi/status/1417141600124346371">https://twitter.com/Liggi/status/1417141600124346371</a>
35:34 - Andrew Nickerson
--- Start by building a project that’s interesting to you.
--- <a href= "https://twitter.com/Nickvisual/status/1417140742531674118">https://twitter.com/Nickvisual/status/1417140742531674118</a>
37:15 - Michael Powers
--- Ask questions, break things once in a while, learn vanilla everything even if it feels like a waste of time.
--- <a href= "https://twitter.com/mgrpowers/status/1417141364525912064">https://twitter.com/mgrpowers/status/1417141364525912064</a>
39:33 - Jason Liggi
--- Doesn’t matter how long you do this job, MOST stuff out there will probably be unknown and confusing.
--- <a href= "https://twitter.com/Liggi/status/1417141322478235653">https://twitter.com/Liggi/status/1417141322478235653</a>
40:14 - Swashata
--- Learn to read documentation
--- <a href= "https://twitter.com/swashata/status/1417142055436910598">https://twitter.com/swashata/status/1417142055436910598</a>
49:59 - Max Stoiber
--- Know your tradeoffs.
--- <a href= "https://twitter.com/mxstbr/status/1417142461709828101">https://twitter.com/mxstbr/status/1417142461709828101</a>
43:34 - Pat Clarke
--- Build a rapport with PMs/clients beyond the technical.
--- <a href= "https://twitter.com/LeftShotDev/status/1417142505494269954">https://twitter.com/LeftShotDev/status/1417142505494269954</a>
44:21 - Musa Barighzaai
--- Leave things better than you found them.
--- <a href= "https://twitter.com/mbarighzaai/status/1417142734993907715">https://twitter.com/mbarighzaai/status/1417142734993907715</a>
45:20 - David Moore
---Build things that excite you.
---<a href= "https://twitter.com/DavidIMoore/status/1417145783581741067">https://twitter.com/DavidIMoore/status/1417145783581741067</a>
<a id="Links_103" name="Links_103"></a>Links
---------------------------------------------
---<a href= "https://johnlindquist.com/">https://johnlindquist.com/</a>
---<a href= "https://github.com/albertlauncher/albert">https://github.com/albertlauncher/albert</a>
<a id="_SIIIIICK__PIIIICKS__107" name= "_SIIIIICK__PIIIICKS__107"></a>××× SIIIIICK ××× PIIIICKS ×××
----------------------------------------------------------------------------------------------------
---Scott: [Raycast] (https://raycast.com/)
---Wes: <a href= "https://www.amazon.com/b?ie=UTF8&node=21209121011">Amazon iPhone Repair Kits</a>
<a id="Shameless_Plugs_111" name= "Shameless_Plugs_111"></a>Shameless Plugs
----------------------------------------------------------------------------
---Scott: <a href= "https://www.leveluptutorials.com/pro">Web Components 101</a> - Sign up for the year and save 25%!
---Wes: [All Courses] (https://wesbos.com/courses/) - Use the coupon code ‘Syntax’ for $10 off!
<a id="Tweet_us_your_tasty_treats_115" name= "Tweet_us_your_tasty_treats_115"></a>Tweet us your tasty treats!
--------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
---<a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
---Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
25 Aug 2021
56 MINS
56:52
25 Aug 2021
Hasty Treat - Why Do People Hate CSS?
In this Hasty Treat, Scott and Wes talk about why people hate CSS, some common issues, and how you can level up.
<a id= "Prismic__Sponsor_9" name="Prismic__Sponsor_9"></a>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 <a href= "https://prismic.io/syntax">prismic.io/syntax</a>.
<a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.
<a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes
----------------------------------------------------------
03:20 - Layout is hard
--- block vs inline vs inline-block
------ Learn what this means!
--- Flexbox
------ <a href= "https://css-tricks.com/snippets/css/a-guide-to-flexbox/">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a>
--- Grid
--- Avoid floats
--- [Wes’ Flexbox Course] (https://flexbox.io/)
--- [Wes’ CSS Grid Course] (https://cssgrid.io/)
--- <a href= "https://www.leveluptutorials.com/tutorials/modern-css-layouts">Scott’s Modern CSS Layouts Course</a>
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
--- Use tools like <a href= "https://purgecss.com/">https://purgecss.com/</a>
--- <a href= "http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/"> http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/</a>
15:51 - Look at things holistically
<a id="Tweet_us_your_tasty_treats_43" name= "Tweet_us_your_tasty_treats_43"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
23 Aug 2021
18 MINS
18:51
23 Aug 2021
Potluck - Moist code × Memoization × Ready for full-time? × Deadlines × Design ethics × React compon...
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!
<a id= "Linode__Sponsor_9" name="Linode__Sponsor_9"></a>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 <a href= "https://linode.com/syntax">linode.com/syntax</a>. 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 <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started.
<a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.
<a id="Cloudinary__Sponsor_15" name= "Cloudinary__Sponsor_15"></a>Cloudinary - Sponsor
---------------------------------------------------------------------------------------
<a href= "https://cloudinary.com/?utm_source=Syntax.fm&utm_medium=Podcast&utm_content=Cloudinary_Syntax_podcast"> Cloudinary</a> 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.
<a id="Show_Notes_18" name="Show_Notes_18"></a>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 <a href= "http://leveluptutorials.com/">leveluptutorials.com</a> 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?
<a id="Links_43" name="Links_43"></a>Links
-------------------------------------------
--- [https://mux.com/] (https://mux.com/)
--- [https://vimeo.com/] (https://vimeo.com/)
--- <a href= "https://github.com/cure53/DOMPurify">https://github.com/cure53/DOMPurify</a>
--- <a href= "https://wesbos.com/sanitize-html-es6-template-strings">https://wesbos.com/sanitize-html-es6-template-strings</a>
--- [https://svelte.dev/] (https://svelte.dev/)
--- [https://vercel.com/] (https://vercel.com/)
--- [https://begin.com/] (https://begin.com/)
--- <a href= "https://en.wikipedia.org/wiki/Scott%27s_Tots">https://en.wikipedia.org/wiki/Scott%27s_Tots</a>
<a id="_SIIIIICK__PIIIICKS__53" name= "_SIIIIICK__PIIIICKS__53"></a>××× SIIIIICK ××× PIIIICKS ×××
--------------------------------------------------------------------------------------------------
--- Scott: [I Think You Should Leave Season 2] (https://www.netflix.com/title/80986854)
--- Wes: [Underground Wire Locator] (https://amzn.to/2Vutc8J)
<a id="Shameless_Plugs_57" name="Shameless_Plugs_57"></a>Shameless Plugs
-------------------------------------------------------------------------
--- Scott:
--- 1: [Level Up Tuts Pro] (https://www.leveluptutorials.com/pro) - Sign up for the year and save 25%!
--- 2: [Become a Level Up Tutorials Author] (https://forms.gle/47fnupLTnpatKXiH6)
--- Wes: [All Courses] (https://wesbos.com/courses/) - Use the coupon code ‘Syntax’ for $10 off!
<a id="Tweet_us_your_tasty_treats_63" name= "Tweet_us_your_tasty_treats_63"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
18 Aug 2021
56 MINS
56:29
18 Aug 2021
Hasty Treat - The Weird and Wonderful Link Tag
In this Hasty Treat, Scott and Wes talk about the tag — why it’s weird and wonderful, and what you can do with it!
<a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor
------------------------------------------------------------------------
[Sanity.io] (http://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 <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.
<a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>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 <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.
<a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes
----------------------------------------------------------
04:16 - What is it?
--- <a href= "https://ryanflorence.dev/p/ship-weird">https://ryanflorence.dev/p/ship-weird</a>
--- The link tag is weird.
--- First, it’s not for links! It’s for establishing a relationship between the current HTML document and a resource.
05:11 - CSS / Media attr
07:13 - Web fonts
08:09 - Favicons
--- <a href= "https://syntax.fm/show/373/hasty-treat-the-surprisingly-exciting-world-of-favicons"> Syntax 373: Hasty Treat - The Surprisingly Exciting World of Favicons</a>
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
<a id="Tweet_us_your_tasty_treats_44" name= "Tweet_us_your_tasty_treats_44"></a>Tweet us your tasty treats!
------------------------------------------------------------------------------------------------------------
--- [Scott’s Instagram] (https://www.instagram.com/stolinski/)
--- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a>
--- [Wes’ Instagram] (https://www.instagram.com/wesbos/)
--- [Wes’ Twitter] (https://twitter.com/wesbos)
--- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer)
--- [Scott’s Twitter] (https://twitter.com/stolinski)
--- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets
16 Aug 2021
16 MINS
16:42
16 Aug 2021