Alle afleveringen

1.049 afleveringen, van nieuw naar oud

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

20 oktober 2021 · 1 uur
Afspelen

It’s another Potluck! In this episode, Scott and Wes answer your questions about privacy policies, coding for kids, MongaDB hosting, cloud backups, system design, #NoMoreFoo, and much more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 04:49 - Ben Lamers: Heyo Scott and Wes! I am building a web app currently with my brother, and I was wondering when we get to launch it how do you go about correctly writing/adding Terms of Use and Privacy Policy. I’m assuming this may be quite different depending on the platform so maybe general resources or tips for this. Thanks!
06:45 - Fumbles O’Brian: Do you have any recommendations for teaching young children how to code? I have a 5-year-old niece in kindergarten who is absolutely fascinated watching me work, and I’d like to start teaching her basic concepts when she’s able to read/write better. For example, she loves watching me make UI changes in React, it blows her mind that changing letters on one screen changes what a website looks… Lees meer
Hasty Treat - Handy Utility Functions with Just

18 oktober 2021 · 15 min
Afspelen

In this Hasty Treat, Scott and Wes talk about handy utility functions with Just!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:44 - What is Just?
https://github.com/angus-c/just Lees meer

No dependencies
It’s written in JS, so you can copy+paste them if you really need it
Types available
https://medium.com/@angustweets/just-a12d54221f65#.ljib0mfr5

06:46 - Some nice ones
just-safe-set → deeply setting dynamic object properties set(data, 'a.long[0].path', value)

object-typeof Why not use typeof? Everything is an object

Why not use array.isArray? Handy to have a switch statement

just-*-case Camel, kebab, snake

just-compare
10:54 - Why?
This is the NPM install of Stack Overflow copy+paste
Handy as hell
Battle-tested Lots of ways to do simple stuff
Sometimes the simple stuff has weird edge cases - these are caught

Sometimes your checks can be messy Check if an object is empty
25 lines
Just install it

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

Links https://github.com/angus-c/just

https://github.com/antony

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
A Podcast on Running a Podcast

13 oktober 2021 · 53 min
Afspelen

In this episode of Syntax, Scott and Wes talk about running a podcast — recording, sponsoring, where to start, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 01:45 - Recording Setup
Zoom to chat
Record on Zoom
Quicktime
Logic
Riverside Lees meer

Wes: Heil PR-40

dbx 286s

Scott: Electro-Voice RE20

Cloudlifter

dbx 286s

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

Changelog Collab

Soft skills Productivity
Apps

We Cooked It: Explainer Episode
Add ideas to the list anytime it pops into your head
21:02 - Editing
Podcast Royale

We record a clap for syncing
Upload to Dropbox for our editors
22:07 - Hosting
Libsyn Archaic feeling, but covers everything

22:36 - The website
Next.js

Open source
PRs are submitted adding the latest episodes
24:10 - Transcripts
Generated
24:40 - Would you still start one?
Podcast vs YouTube vs Twitch
29:20 - Getting popular / Marketing
How do you do it?
Consistency is key
Need external audience
35:34 - Sponsors
Five to six hours per week in prep
Most of our sponsors are products we already used
We sell and manage…
Hasty Treat - Neat Things in CSS Color - Current and Coming!

11 oktober 2021 · 27 min
Afspelen

In this Hasty Treat, Scott and Wes talk about all things color in CSS, both current and coming soon!
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes 04:39 - color-contrast()
Part of CSS5! Maybe.
The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list.
06:01 - Accent color
https://davidwalsh.name/css-accent-color Lees meer

07:34 - currentcolor
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword

08:54 - Profiled color values - color()
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color()

11:00 - color-mix()
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix()

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 …
Potluck — Corn Shucking × Self-Hosting Images × WordPress × Getting Scammed × Portfolios

6 oktober 2021 · 58 min
Afspelen

It’s another Potluck! In this episode, Scott and Wes answer your questions about corn shucking, self-hosting images, WordPress, getting scammed, portfolios, more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with … Lees meer
Hasty Treat - Spicy Takeout - PHP Is Good and We’re Just Re-Creating It

4 oktober 2021 · 22 min
Afspelen

In this Hasty Treat, Scott and Wes talk about how much modern web development has taken from PHP!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:56 - Why much of modern web development is just recreating PHP
Everyone loves to hate on PHP, but modern Web dev takes a lot from PHP
05:44 - Mixing templating and logic
We do this with JSX
07:39 - Each request has its own scope
08:57 - Massive standard lib
Format a date? No sweat!
Image resizing? Sure!
Audio bindings? Sure!
10:16 - URL-based routing
Next.js pages
Serverless functions
11:13 - Server-rendered
Hotwire Lees meer

11:38 - $_GET, $_POST, are just available
Next.js hooks
12:29 - Variable interpolation
12:59 - All-in-one frameworks
Laravel did it
CakePHP

CodeIgnighter

13:32 - Direct DB access
SQL statements
14:37 - Why do people hate PHP?
WordPress

Inconsistent API
Their first code was PHP and they sucked
PHP has come a long way
It used to not be safe
Blocking by default - no async/await
17:48 - Why is JS still better?
Shared code between frontend and backend
Single language
Huge ecosystem (could be a con)
Links Syntax 267: Hasty Treat - Turbolinks + Server Generated HTML + JS Sprinkles

https://vuejs.org/

https://www.hey.com/

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Changelog Frontend Feud

29 september 2021 · 53 min
Afspelen

In this episode of Syntax, Scott and Wes do a crossover episode with Changelog’s JS Party! Your favorite web dev podcasts join forces for a super collab that’ll knock you frontend off! Amelia joins Chris Coyier and Dave Rupert from ShopTalk Show, while Divya teams up with Wes Bos and Scott Tolinski from Syntax. Let the FEUDing begin!
.TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes 02:49 - Frontend Feud Rules
04:06 - Round 1
10:28 - Round 2
17:26 - Round 3
25:37 - Round 4
35:15 - Round 5
42:03 - Round 6
Links Changelog Lees meer

JS Party

Chris Coyier

Dave Rupert

Wes Bos

Scott Tolinski

Jerod Santo

Amelia Wattenberger

Divya

The Feud At The Seventh Mountain

Amelia’s repo visualizer

CSS-Tricks

freeCodeCamp

Wes Bos’ courses

Changelog Merch

Level Up Tutorials

Shameless Plugs Scott: All courses - Sign up for the year and save 25%!
Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
Tweet us your …
Hasty Treat - Desktop Apps + New Tech We Love

27 september 2021 · 33 min
Afspelen

In this Hasty Treat, Scott and Wes talk about the hottest new tech they love!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:30 - Lucy Language
https://lucylang.org/ Lees meer

A concise language for describing Finite State Machines
06:10 - MDSvex
https://github.com/pngwn/MDsveX

Mdx for Svelte
Smartypants options transforms ASCII punctuation into fancy typographic punctuation HTML entities
https://github.com/rehypejs/awesome-rehype

09:56 - RECut
https://getrecut.com/

12:26 - Fig
https://fig.io/

It’s an app you install on your computer, it adds autocomplete to your terminal
Works with most popular terminals
Autocompletes git commands
NPM comman…
From React To SvelteKit

22 september 2021 · 56 min
Afspelen

In this episode of Syntax, Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 07:28 - Thoughts
Apples to oranges, so unfortunately, no super legit ability to compare. SvelteKit isn’t analogous with a custom React setup that uses CSR SSR is usually going to be faster - we can ship less JS
Some big things changed beyond React → SvelteKit Apollo → GFetch Lees meer

Plyr → Vime

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}
bec…
Hasty Treat - Webhooks

20 september 2021 · 22 min
Afspelen

In this Hasty Treat, Scott and Wes talk about webhooks — one of those concepts that seems a lot scarier than it actually is.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:42 - What are webhooks?
User-defined HTTP callbacks
When something happens, ping this URL with this data
Examples: When something sells, ping this URL
When someone reverses a charge, lock their account
Trigger a build of the website when the content changes
Then someone buys a shirt, generate a shipping label and save it to the DB Lees meer

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 tha…
New to JavaScript — ES2022

15 september 2021 · 39 min
Afspelen

In this episode of Syntax, Scott and Wes talk about all the new stuff in ES2022 — what it is, why you might need it, and how to use it.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below: https://a0.to/syntax.
Show Notes 04:50 - Regex indicies
New d flag in a regex
https://regex101.com/ Lees meer

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 b…
Hasty Treat - Starlink Rural Internet

13 september 2021 · 21 min
Afspelen

In this Hasty Treat, Scott and Wes talk about Wes’ new satellite internet setup — best use-cases and how to set it up.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 04:06 - Rural internet is huge for:
Access to information
Remote work Opens up job opportunities for many residents who can’t relocate due to family Lees meer

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…
Potluck - Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity × More!

8 september 2021 · 53 min
Afspelen

It’s another Potluck! In this episode, Scott and Wes answer your questions about Sass, Houdini, JS requirements, tips for your first dev job, dev laptops, databases, Frontity, and more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provide features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and … Lees meer
Hasty Treat - TypeScripts Strict Explained

6 september 2021 · 18 min
Afspelen

In this Hasty Treat, Scott and Wes talk about the Typescript strict flag — what it does and why you might use it.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:50 - What is it?
Future versions of TypeScript may introduce additional stricter checking under this flag, so upgrades of TypeScript might result in new type errors in your program. When appropriate and possible, a corresponding flag will be added to disable that behavior.
03:26 - noImplicitAny
The any type in TypeScript is exactly that - it can be anything.
TypeScript will try to infer the type. When it can’t it will be any.
Sometimes you need any, but if that is the case, you must explicitly type it as any.
If something is implicitly any - it might be a mistake, or you forgot to type it. Risky!
06:01 - noImplicitThis
You must type this - it can’t be implicitly inferred.
06:47 - strictFunctionTypes
If you have a type that is a function and it doesn’t 100%.
07:44 - alwaysStrict
Always turns on strict mode. You can’t do things like redeclare var variables.
09:25 - strictNullChecks
Makes you check that the item is actually there before accessing a value or method from it.
Imagine you filter or find on an array, or query selector a DOM element. There is a possibility that nothing is there. strictNullChecks makes you check that it’s there - like an if statement.
Optional chaining is super handy here.
11:18 - strictBindCallApply
12:38 - strictPropertyInitialization
13:37 - useUnknownInCatchVariables
Links https://www.typescriptlang.org/tsconfig#strict Lees meer

Tweet u…
STUMP'D - Coding Interview Questions

1 september 2021 · 50 min
Afspelen

In this episode of Syntax, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provide features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
Show Notes 03:10 - What is STUMP’D?
04:27 - What is a first class function?
06:27 - What is the purpose of using object is method?
09:31 - What is the purpose of Error object?
11:00 - What are the advantages of minification?
12:37 - How do you declare namespace?
15:38 - What are JS labels?
19:20 - List the methods that are available on a WeakSet?
What is the difference between a set and a WeakSet?
23:33 - What is the use of preventDefault method?
26:15 - What is a spread opperator?
27:35 - What is the output of below spread operator array?
[...'John Resig']
30:19 - How do you load CSS and JS files dynamically?
32:00 - What are tasks in event loop?
34:15 - What is a WeakMap?
37:35 - How do get query string values in JavaScript?
40:50 - What is the purpose of some method in arrays?
42:15 - How do you delete a cookie?
Links https://30secondsofinterviews.org/ Lees meer

https://www.interviewbit.com/javascript-interview-questions/

https://github.com/sudheerj/javascript-interview-questi…
Hasty Treat - Freelance Tips - Toxic Clients

30 augustus 2021 · 25 min
Afspelen

In this Hasty Treat, Scott and Wes talk about toxic clients — how to identify them, and what to do about them.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 05:33 - Warning Signs of a potential toxic client
Doesn’t have project well thought out.
Scope creep - Adds on new features while not considering the amount of work required to make them happen. Can be mad when you run out of time or budget.
Ill Communicator Contacts you at odd times.
Thinks that you should answer every email in an hour.
Contacts you in inappropriate ways, via text message, social media. OR doesn’t respond to emails in a timely manner giving you blockers. Lees meer

Jerk The rud…
Advice for New Devs

25 augustus 2021 · 57 min
Afspelen

In this episode of Syntax, Scott and Wes talk about advice for new devs, our advice and opinions for how new devs can level up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 01:59 - Get comfortable with your code not working
All of our code is broken much of the time.
02:40 - Compound learning and momentum is your biggest tool
There is no formation without repetition.
It sucks to hear, but honestly, if you get a little bit better every single day, you will be WAY ahead in years to come. Keep at it, keep chipping away, take the lows and the highs.
04:05 - Learn to read error messages
Is this error coming from my code?
Is this coming from the library? If so, maybe the library wasn’t expecting that.
Is this coming from the browser? An extension? Is it even related?
Stack trace is a treasure map
09:42 - Take the time to learn the concepts that scare you
They are often easier than they seem (though not every time).
10:40 - We all struggle
This stuff is hard — give yourself a break.
12:56 - Taking a walk is good for solving bugs
It… Lees meer
Hasty Treat - Why Do People Hate CSS?

23 augustus 2021 · 19 min
Afspelen

In this Hasty Treat, Scott and Wes talk about why people hate CSS, some common issues, and how you can level up.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:20 - Layout is hard
block vs inline vs inline-block Learn what this means! Lees meer

Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid
Avoid floats
Wes’ Flexbox Course

Wes’ CSS Grid Course

Scott’s Modern CSS Layouts Course

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 https://purgecss.com/

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

15:51 - Look at things holistically
Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Potluck - Moist code × Memoization × Ready for full-time? × Deadlines × Design ethics × React components × Video hosting × Local fonts × More!

18 augustus 2021 · 57 min
Afspelen

It’s another Potluck! In this episode, Scott and Wes answer your questions about memoization, how to know when you’re ready for a full-time dev job, what to do when you underestimate projects, design ethics, local fonts, and more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 04:07 - Can you explain the concept of memoization in JS?
07:27 - I’ve been developing for a while now and I was wanting to know if there is some sort of catalyst that I should be aware of that screams “you’re ready for a full-time job”?
09:26 - I have an ethics question for you. I recently took on a freelance gig that requires a custom admin dashboard, and I wasn’t really sure how to design one of those. My solution was … Lees meer
Hasty Treat - The Weird and Wonderful Link Tag

16 augustus 2021 · 17 min
Afspelen

In this Hasty Treat, Scott and Wes talk about the tag — why it’s weird and wonderful, and what you can do with it!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 04:16 - What is it?
https://ryanflorence.dev/p/ship-weird Lees meer

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
Syntax 373: Hasty Treat - The Surprisingly Exciting World of Favicons

08:36 - Preload + Prefetch Resource
Audio, document, fetch, font, image, script, style, track, video, worker + more
10:15 - Fetch request (shoutout Ryan)
11:27 - Preconnect
Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins.

13:01 - Module

13:30 - Integrity
SHA
Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
How to Build a Website — The Show For Beginners

11 augustus 2021 · 1 uur 1 min
Afspelen

In this episode of Syntax, Scott and Wes talk about the basics of building a website — how to get started for beginners!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes 04:20 - HTML
HTML is the language you write to get text and elements to show up on the screen
Elements can describe the content they contain p
img Lees meer

Or be structural and describe the areas of the website div
h
header, footer

Listen to our ep on HTML elements to learn more about them: Syntax 354: The Surprisingly Exciting World of HTML Elements

HTML elements have default styling applied to them before you write any CSS This comes from the browser and can be manipulated
However, by default all elements are either block or inline-display

08:11 - CSS
If HTML is the bones, CSS is the clothes and skin
CSS dictates how a website looks Without CSS, you have text on a blank page and images

CSS stands for Cascading Style Sheets (“cascad…
Hasty Treat - TypeScript Utility Types

9 augustus 2021 · 17 min
Afspelen

In this Hasty Treat, Scott and Wes talk about TypeScript utility types — what they are, why you might use them, why they exist, and more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:35 - Levels of using TypeScript
Typing your code
Typing your code, but getting a little bit more dynamic using utility types
Creating your own utility types!
TypeScript is a language in itself
Check out type challenges if you want your mind blown: https://github.com/type-challenges/type-challenges/ Lees meer

https://www.typescriptlang.org/docs/handbook/utility-types.html

07:29 - Partial
08:23 - ReadOnly
09:00 - Required
09:33 - Record
A record is an object type that is a bit more restrictive
Say you want to store podcast details - name, URL, showCount, etc., but only for Syntax and Shoptalk.
10:47 - Omit
I find this one handy when I want to create a “Create Item” type, where it has all the item fields except the ID field
11:34 - Pick
G…
Potluck - WordPress × 3rd-Party Cloud Services × Backend Hosting × Drupal × Getting Clients × GPS vs BEM × More!

4 augustus 2021 · 49 min
Afspelen

It’s another Potluck! In this episode, Scott and Wes answer your questions about WordPress, Drupal, using SSGs, finding clients when you’re just starting out, scoped CSS, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.
Show Notes 01:48 - Most small businesses I know have heard of WordPress and it seems like it’s the industry standard for brochure sites. I’m tired of 1-5 page freelance WordPress sites. I love front-end coding and design. Do I need to “sell” people on static sites or are there freelance jobs out there for Vue/React/whatever static sites for developers? I want to stick with small businesses and a few other niches, but I’m tired of drag-and-drop builders in WordPress. Plus, I feel WordPress is overkill for a majority of sites. I just want to code sites and freelance.
08:53 - I wanted to get your opinion on 3rd-party cloud services that provide some application functionality. Things like auth0, Algolia, open cart etc. I work for a large enterprise where there is a real fear of trusting these… Lees meer
Hasty Treat - Git the Latest - New Things In Tech - CoPilot, Petite Vue, Stackblitz, Web3 + More!

2 augustus 2021 · 24 min
Afspelen

In this Hasty Treat, Scott and Wes launch a new series called Git the Latest — New Things In Tech.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:47 - GitHub CoPilot
AI-powered autocompletion
Not going to take your job
07:18 - Next.js 11
Image updates
Multiplayer
08:20 - Astro
Build faster websites with less client-side JavaScript
09:50 - Notion API
Get database
Query database
Pages
Block children
11:27 - Petite Vue
Petite Vue is an alternative distribution of Vue optimized for progressive enhancement
Similar to Alpine.js
Without a build step
13:58 - Stackblitz
Node in the browser
Not in the cloud
Rolled
15:22 - Solid.js
Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead, it opts to compile its templates down to real DOM nodes and wrap updates in fine-grained reactions. This way when your state updates only the code that depends on it runs.
16:37 - Stately
From the company that made xState
18:05 - Web3
Let us know if you want a show about it
Ethereum JavaScript API
Apps that run on the Blockchain
Links https://alpinejs.dev/ Lees meer

https://svelte.dev/

https://xstate.js.org/

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
ShopTalk x Syntax

28 juli 2021 · 1 uur 5 min
Afspelen

In this episode of Syntax, Scott and Wes do a collaboration with Chis Coyier and Dave Rupert from ShopTalk Show! They talk about favorite tech stacks, podcasting, learning new tech, dealing with FOMO, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 07:23 - What’s your favorite stack right now?
28:52 - What are your thoughts on WordPress? Do you still use it?
33:59 - What do you want for listeners of Syntax?
38:21 - How do you deal with FOMO / the pressure to learn new tech?
Links https://shoptalkshow.com/469/ Lees meer

Chris Coyier

Dave Rupert

Syntax 372: CSS Container Queries, Layers, Scoping and More with Miriam Suzanne

https://svelte.dev/

https://kit.svelte.dev/

https://mercurius.dev/

https://www.prisma.io/

https://keystonejs.com/

https://graphql.org/

https://redwoodjs.com/

https://nuxtjs.org/

https://astro.build/

https://vercel.com/

https://wordpress.org/

https://dayoneapp.com/

https://automattic.com/

https://mongoosejs.com/

https://www.blink182.com/

ht…
Hasty Treat - The Surprisingly Exciting World of Favicons

26 juli 2021 · 24 min
Afspelen

In this Hasty Treat, Scott and Wes talk about favicons. Favicons are a bit of mystery and something people don’t talk about that often.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:48 - What are favicons?
Requesting favicons by default /favicon.ico
07:38 - Sizing favicons
16x16 is OG - don’t do that now
You can specify multiple sizes
09:41 - File formats
.ico files
.png favicons
13:40 - Animated favicons
Canvas Base64
11:36 - SVG favicons
17:19 - Dark mode favicons
18:55 - App Coloring Lees meer

Isn’t there a new Safari version?
Links https://en.wikipedia.org/wiki/Favicon

https://caniuse.com/

https://keycode.info/

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons

https://fav.farm/

https://deno.land/

https://uses.tech/

Missive

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Potluck - Svelte × Bleeding-Edge Tech × Git Process × Screencasts × Government Jobs × Permissions-Based APIs × Rescript × More!

21 juli 2021 · 1 uur
Afspelen

It’s another Potluck! In this episode, Scott and Wes answer your questions about Svelte, bleeding-edge tech, best Git processes, Create React App, screencast software, FitBit API, government jobs, Syntax sponsors, and more!
.TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes 03:15 - I was wondering what you guys think about using the latest of Svelte (svelte-next) in serious projects? Does the improved devEx makes up for the small (but growing) community and lack of libraries? Do you think svelte-next is here to stay or maybe we will get a revamp that breaks backward compatibility in a couple of years, like svelte 2 -> svelte 3?
8:48 - Git question: My process is often that I want to be able to use my last project as a starting point for my next project, with the new project having absolutely no connection or relationship to the old project. What steps can I take to completely sever any ties to the old proj… Lees meer
Hasty Treat - Stylelint for Linting CSS

19 juli 2021 · 17 min
Afspelen

In this Hasty Treat, Scott and Wes talk about Stylelint, what it is and why you should use it!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:15 - What is a linter anyway? Why do you want to lint your CSS?
Does stylelint fix errors or just tell you errors?
04:42 - Getting setup
.stylelintrc
stylelint extension
Sass
High perf animations
stylelint order
Max nesting depth
Declaration strict value
{ "extends": [ "stylelint-config-standard", "stylelint-config-sass-guidelines" ], "plugins": [ "stylelint-high-performance-animation", "stylelint-declaration-strict-value", "stylelint-order" ], "rules": { "selector-no-qualifying-type": [ true, { "ignore": [ "attribute" ] } ], "plugin/no-low-performance-animation-properties": [ true, { "ignoreProperties": [ "color", "background-color", "box-shadow" ] } ], "indentation": "tab", "order/order": [ "custom-properties", "declarations" ], "order/properties-alphabetical-order": null, "declaration-block-no-duplicate-custom-properties": true, "declaration-empty-line-before": null, "scale-unlimited/declaration-strict-value": [ [ "/color$/", "z-index", "font-size" ] ], "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]+$", "max-nesting-depth": 3, "selector-pseudo-class-no-unknown": null } } Links https://github.com… Lees meer
React 18 - A Look Ahead

14 juli 2021 · 47 min
Afspelen

In this episode of Syntax, Scott and Wes talk about everything coming in React 18!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.
Show Notes 04:32 - Automatic Batching
Don’t worry about re-renders
08:32 - New Render API
const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); No more hydrate method (yay!)
10:44 - Suspense
Suspense is basically a promise resolver component - nothing inside will render until promise is resolved.
SuspenseList lets you coordinate the order in which loading indicators show up.
16:43 - StrictEffects Mode
https://github.com/reactwg/react-18/discussions/19 Lees meer

Will allow components to mount, unmount, and mount again
Will help with fastrefresh and really good dev experience
18:43 - useTransition() Hook
Not an animation hook. They named it this because of the future ability to add animations to React core.
Wrap the state update in a “transition” to preven…
Hasty Treat - Vite + Parcel 2

12 juli 2021 · 26 min
Afspelen

In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:08 - Next Gen Bundlers are here!
They are easy
They are fast
They are bundlers
They are code splitters
They are dev environments
HMR / Fast Refresh
07:13 - What do they use under the hood?
Parcel uses SWC (Rust)
Vite uses esbuild (Go)
10:29 - How do you use them?
Usually point your app at an HTML file
Your HTML file has an ES module
It then goes and loads everything from there
They have adaptors for different types of files CSS
Images
Etc. Lees meer

You can also point it directly at files
14:59 - Common use-cases
React / JSX OOTB

Vue
Svelte
TypeScript Both just work

Custom Babel config Plugins for both

Sass Vite: Detects it, asks to install it
Parcel: Detects it, installs it for you

PostCSS Processors
20:29 - Custom API
Both have a custom API or “plugins”, which you can integrate into your app or tooling if needed.
Example use-case: a really nice WordPress dev package.
20:57 - Which one?
Both are really good!
Parcel 2 has been in dev for 2+ years - unsure when it will launch.
Wes: In my experience Vite “just works” a bit better. Might be a side effect of Parcel being in dev.
Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.)
Life is good!
Links Top Chef

Master Chef

Snowpack

Webpack

Parcel

SWC

Vite

esbuild

Rollup

SvelteKit

Strap…
Syntax Highlight — We Review Your Portfolios

7 juli 2021 · 1 uur 2 min
Afspelen

In this episode of Syntax, Scott and Wes review your portfolios!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 03:59 - cudd.io
Shared component animation between home / about really nice
Readable, clear
Simple
Check the contrast ratio on the white text on light blue: https://coolors.co/contrast-checker/ffffff-56ccf2 Lees meer

Nice SSR from Next.js

CSS vars
Very tall cards without much text, looks like a mistake
Better on a short browser window - peep the tall and skinny
Card heading should be h3 or h4
10:35 - damonbolesta.com
Nice design = super fun!
Good color palette
Shows your skills straight up
Animation
Not accessible - EASY fixes with Axe Dev Tools

Text on background images hard to read
White text on buttons
Bold some words in your bio
Border radius
21:52 - walterkjenkins.com
Map is fun
Contrast issues with the color choices
Transparency not needed on body content
Cursive font for links / buttons is a no for me dog
Labels on social media icons
Hero overlaps section below it
Maps data processing should be h4
29:40 - suhit.me
This is an example of a really good one
Wicked domain name
Design is ON POINT, like this is the type of polish I like to see - I’d hire on this
Can’t get enough Inter font

Fun little animation
I’d go a little easier on the box-shadow
Github even has a custom readme
Resume Very …
Hasty Treat - JavaScript Event Buzzwords — Sync, Concurrent, Defer, Blocking, Workers

5 juli 2021 · 25 min
Afspelen

In this Hasty Treat, Scott and Wes define some JavaScript Buzzwords and talk about what they mean!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:24 - Synchronous / Async
05:23 - Multi-threaded
JavaScript has a single “main thread”
But you can have more threads with web workers
08:12 - Blocking
JavaScript can stop other things on the page from running
A script tag can block HTML from being parsed
Most stuff in JavaScript is non-blocking
Node.js write to filesystem can be blocking
10:27 - Concurrent + Parallel
JavaScript start/stop are concurrent
The API runs on a different thread
Doesn’t REALLY matter
https://joearms.github.io/published/2013-04-05-concurrent-and-parallel-programming.html Lees meer

13:22 - Consecutive / Waterfall
One after another
13:48 - Callback
A function to run when this thing happens or is done

Click event callback
Websocket on data callback Like a tweet stream

Data fetch callback Almost entirely replaced with async + await

http://callbackhell.com/

https://caolan.github.io/async/v3/

17:56 - Script Tag Async + Defer
Doesn’t block other content
Runs when ready - doesn’t care about DOMcontentLoaded
Wait until the page is loaded before running
If the script tag is above content, don’t wait for it
Good for things that aren’t called on page load
21:54 - Lazy
Load it in later - maybe when it’s scrolled into view, or as needed
Not mission-c…
Dev Tools Power — Elements Tab

30 juni 2021 · 51 min
Afspelen

In this episode of Syntax, Scott and Wes talk about the Dev Tools Elements Tab — all the features, and when you would use them!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes 03:13 … Lees meer
Hasty Treat - Seven Interesting JavaScript Proposals - Async Do, JSON Modules, Immutable Array Methods, and More!

28 juni 2021 · 26 min
Afspelen

In this Hasty Treat, Scott and Wes talk about seven new JavaScript proposals — what they do, where they’re at, and how you might use them.
Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:32 - Seven new JavaScript proposals
https://github.com/tc39/proposals Lees meer

06:25 - JSON Modules
https://github.com/tc39/proposal-json-modules

Builds on the import assertions
No named exports
Not executed, to avoid security issues
Not in Node yet
09:55 - Array Find From Last
https://github.com/tc39/proposal-array-find-from-last

The problem: you need to group together async code.The only way to do that right now is to wrap it in a function.
11:40 - Async Do
https://github.com/tc39/proposal-async-do-expressions

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

Like old array methods, but returns a new array rather than mutating
17:48 - Temporal
https://github.com/tc39/proposal-temporal

Stage 3, looking good!
Amazing, large, very good Date API
Syntax 295: Hasty Treat — Temporal Date Objects in JavaScript

18:35 - As Patterns
https://github.com/zkat/proposal-as-patterns

Scott don’t get it
Stage 0
whe…
Potluck - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × More!

23 juni 2021 · 1 uur 2 min
Afspelen

It’s another Potluck! In this episode, Scott and Wes answer your questions about web components, gear, Docker, web dev frameworks, golden handcuffs, browser testing, SSR React, code prediction, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes 04:08 - Is there a mechanism for exporting a React/Vue/Svelte component as a web component?
11:42 - You guys chat a lot about your sweet gear and desk setups. As a newcomer to web development it’s all a little expensive for me to mimic what you have; at least before I’ve learned enough to justify investing in better equipment. My question is: what are the minimum specs (laptop/monitor/etc) you would recommend a begin… Lees meer
Hasty Treat - CSRF Explained

21 juni 2021 · 17 min
Afspelen

In this Hasty Treat, Scott and Wes talk about CSRF (Cross Site Request Forgery)!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 05:40 - What is it?
https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#samesite-cookie-attribute Lees meer

Someone can submit a form FROM or TO your domain, automatically.
07:50 - Solutions
SameSite Cookie
https://medium.com/swlh/secure-httponly-samesite-http-cookies-attributes-and-set-cookie-explained-fc3c753dfeb6 Lax — Default value in modern browsers. Cookies are allowed to be sent with top-level navigations and will be sent along with GET requests initiated by a third party website. The cookie is withheld on cross-site subrequests, such as calls to load images or frames, but is sent when a user navigates to the URL from an external site, such as by following a link.
Strict — As the name suggests, this is the option in which the Same-Site rule is applied strictly. Cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites. The browser sends the cookie only for same-site requests (that is, requests originating from the same site that set the cookie). If the reque…
CSS Container Queries, Layers, Scoping and More with Miriam Suzanne

16 juni 2021 · 1 uur
Afspelen

In this episode of Syntax, Scott and Wes talk with Miriam Suzanne about all things CSS — container queries, layers, scoping, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.
Guests Miriam Suzanne Lees meer

Show Notes 02:21 - When did you come on board with container queries?
10:27 - How would you declare specificity?
Layer example:
@layer default; @layer theme; @layer components; @import url(theme.css) layer(theme); @layer default { audio[controls] { display: block; } } 13:08 - What is your background?
18:20 - What are container queries?
22:06 - What is the background on contain? How does it work?
https://developer.mozilla.org/en-US/docs/Web/CSS/contain

29:25 - Is it still under development?
https://www.igalia.com/open-prioritization/index
…
Hasty Treat - What is SvelteKit?

14 juni 2021 · 24 min
Afspelen

In this Hasty Treat, Scott and Wes talk about SvelteKit — what it is and why you might want to use it.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:28 - What is it?
Total platform for building Svelte apps
Built in Vite.js Includes all of the Vite goodness but it hides behind the scenes for the most part Lees meer

Host anywhere
05:16 - Is it CSR, SSR, SSG, WTF?!
All of the above. Uses adapters to control the output:
kit: { // hydrate the element in src/app.html target: '#svelte', adapter: adapter() } 09:45 - What you get out of the box
File-based routing
API routes
Layouts and layout resets
Fancy file titles [slug] __layout
Code splitting & preloading
PostCSS

TypeScript support
17:03 - Neat small things
Glob import
https://github.com/svelte-add/svelte-add

Links SvelteKit

Next.js

Gatsby.js

Sapper

tailwindcss

@chriscoyier

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Potluck - Immutability × Turning Off Your Brain × Types vs Interfaces × Hooks vs Components × Making the Most of Your First Job × Confidence in Svelte × More!

9 juni 2021 · 1 uur 3 min
Afspelen

It’s another Potluck! In this episode, Scott and Wes answer your questions about immutability, turning off your brain, managing copy on a website, problem-solving, types vs interfaces, hooks vs components, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Coudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 01:24 - I’m finally getting onboard with the GraphQL train and have a specific question about nomenclature. Having worked with redux in the past, IMMUTABILITY was a concept ingrained in my head. I continue to see benefits of immutable updates across all sorts of libraries, frameworks, vanilla js, etc. Learning about GraphQL now, I’m taken aback by the fact that CUD (create, update, delete) operations are called MUTATIONS. Is there a reason that we use the “mutation” terminology, despite the fact that best practices dictate that we should implement immutable updates to objects? Does GraphQL actually mutate objects behind the scenes?
06:38 - How do you sleep at night?!? I mean, how do you switch off your brain when you’re trying to go to sleep and your brain just wants to keep on coding?
12:15 - How do you manage copy and microcopy on a site? Should you put every piece of text across the entire site into a CMS so the client can change it? Or just the parts you think may be updated in the future? Or do you just hard-code everything directly into the markup? Or collect it all into an importable JSON file?
21:41 - I am new to using CMSs and I was wonderi… Lees meer
Hasty Treat - Making a Vaccine Bot with JavaScript

7 juni 2021 · 24 min
Afspelen

In this Hasty Treat, Scott and Wes talk about Wes’ experiment building a vaccine bot!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 07:32 - First step
Finding the data. Open up dev tools.
Copy as Node.js Fetch in Chrome
Two ways to do this - Puppeteer, or raw requests, or a mix.
11:03 - Variablizing it
Store IDs
Booking form IDs
Vaccine IDs
12:56 - Finding out any restrictions
Is there a cookie?
Is there an XSRF?
Do these things change?
How often can you hit it?
15:20 - Caching
Array variable
16:59 - Delivering the notifications
Telegram
Links https://github.com/wesbos/vaxbot Lees meer

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
React + TypeScript

2 juni 2021 · 1 uur 12 min
Afspelen

In this episode of Syntax, Scott and Wes talk about using React with Typescript — how to set it up, components, state, props, passing data, custom hooks, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes 04:55 - Components
Strategies
Example:
type Props = { value: string; } const App = (props: Props) => Return type? JSX.Element
FC or FunctionComponent
It’s discouraged for this reason: It means that all components accept children, even if they're not supposed to
It could be useful for a return… Lees meer
Hasty Treat - How to Make Money as a Creator

31 mei 2021 · 26 min
Afspelen

In this Hasty Treat, Scott and Wes talk about making money as a creator — how to do what you love, make money doing it, and not feel yucky about it!
Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 06:37 - Community supported
Sell licenses Premium plugin
Single payment
$x per year Lees meer

Sell training Online
In-person

Sell support
Donation-supported Patreon (usually has bonus content)
Tips
Open Collective

Sell merch Teespring

16:00 - Corporation supported
Display ads
Sponsored segments
Corporate sponsors
Sponsored content
Interesting collabs Stickers

Links Syntax 330: React Query + More React with Tanner Linsley

Syntax 340: Servers with Matt from Caddy

Wes’ CSS Grid Course

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets
Bike Shedding — Developer Opinions Explained

26 mei 2021 · 1 uur 4 min
Afspelen

In this episode of Syntax, Scott and Wes bike shed some common developer opinions.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes 04:27 - Event params
e, evt, ev, or event?
06:36 - CSS variables
—red or —primary?
09:31 - CSS colors
https://twitter.com/rem/status/1386694431710007298 Lees meer

RGB, HSL, HEX?
11:52 - Default exports vs named exports
14:45 - JavaScript import ordering
17:09 - Foo / Bar / Baz in examples
21:18 - Light vs dark themes
24:00 - longVerboseNamesDescribingWhatItIsOrDoes vs x
26:54 - VScode vs WebStorm (IDE) vs Vim
31:12 - TypeScript Generics: vs
34:39 - Indentation-base syntax
https://twitter.com/LeahLundqvist/status/1386693374305095680

37:37 - Max line length
40:21 - One reduce, vs multiple .map()/flat(),filter()
async function getStatus() { const res = await sendCommand('AT!GSTATUS'); const result = res.result .split('\n') .map((x: string) => x.split(`\t\t`)) .flat() .filter(Boolean) .map((x: string) => x.trim()) .map((x: string) => x.split(` \t`)) .flat() .filter((x: string) => x.includes…
Hasty Treat - JavaScript’s Drag and Drop API

24 mei 2021 · 29 min
Afspelen

In this Hasty Treat, Scott and Wes talk about JavaScript’s drag and drop API — how it works, concerns, best practices, and more!
.TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 04:45 - What is it?
Drag and drop is really for desktop apps
You can drag and drop anything from any browser to any browser
The important thing here is that this is a set of browser standards that allow different apps to communicate
07:50 - How to implement
Make an element draggable
Listen on elements for drag events The events bubble up, so you can listen on the parent element as items are added/removed Lees meer

09:06 - DataTransfer API
You can store anything you want in it
getData / setData API
Reference strings
11:35 - Accepting drops
When you dragOver, you need to preventDefault()
Calling the preventDefault() method during both a dragEnter and dragOver event will indicate that a drop is allowed at that location
13:01 - Drop Image
Set whatever you want
16:00 - Drop Effect
What does it look like when you drop it? Does it go back?
dataTransfer.effectAllowed
e.dataTransfer.setDragImage(nothing, 0, 0);
18:02 - Security conce…
The Surprisingly Exciting World of HTML Elements

19 mei 2021 · 1 uur 3 min
Afspelen

In this episode of Syntax, Scott and Wes talk about HTML — interesting HTML elements, things you might not know, wish lists for the future, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 02:34 - What is semantic HTML?
What is the content? HTML should describe the content first and foremost.
04:04 - Why semantic HTML?
Accessibility
SEO
Styling is easier
HTML tags that have meaning: Almost all of them
Common ones: Lees meer

/ and
to

20:04 - Structural / Layout tags
You can have more than one header
Header cannot be in a footer / address / header

26:18 - Some fun ones you might not know
/
and strike?
/ / A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters.

and While is used to convey how much work in a task has been completed, the element is used to display a measurement on a known scale. This could be something like the current disk usage on your computer, or a temperature measurement (…
Hasty Treat - Stylin the Unstylables

17 mei 2021 · 22 min
Afspelen

In this Hasty Treat, Scott and Wes talk about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes Can it be styled? Solutions 04:28 - Just style the defaults
Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style.
This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs.
Select
Input - number, date, etc. Very hard to style
Often need appearance: none; for mobile Lees meer

Checkbox / Radio
Generally speaking, these CSS Properties can be applied to all inputs: font-size
color
padding
margin
background / images
outline (remember focus)
border

08:20 - Overlap with more dom elements, set background images
Checkbox / Radio / Toggle buttons Often used :before and :after along with labels — e.g. label + input:checked

Select can have element overlap
14:13 - Re-implement the UI with JavaScript
Video / Audio HUGE rabbit hole of things to code

Very important to maintain accessibility
15:46 - Use a UI Library
Bootstrap

Foundation

Ant Design

Carbon Design

Fast

Lightning Design System

Material Design

Chakra

17:20 - Open UI
Documenting all the different types of web UI controls
https://open-ui.org/

https://twitter.com/stubbornella/status/1384889551924121605

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Tw…
Potluck — Freelancing × Leveraging your experience × Component size × Dealing with mediocrity × How to spend “extra time” × Rust vs Node × Free hosting? × More!

12 mei 2021 · 1 uur
Afspelen

It’s another Potluck! In this episode, Scott and Wes answer your questions about freelancing, climbing the corporate ladder, Throttling vs debounce, how to build skills with your free time, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax.
Show Notes 02:11 - I’ve read that when you start out freelancing, you should look to your area first to gauge the market for both rates, and type of work that is in demand. If you wanted to work remotely as a freelancer, however, is that really applicable advice? Is it viable to work 100% remote and not be tied to “local rates”?
How can I leverage my years of professional experience when starting to freelance? A lot of material online speaks to those who are learning web development for the first time. But what does someone do if they’ve been working at big companies, who can’t share their work directly? What can I do to help prospective clients appreciate those years of experience?
06:02 - In your opinion, what is the accepted norm for the size of a component? It could be anything from a single element to a full page of content, but what is the norm for component size or content? Love the show, keep up the good work.
09:42 - I’m a bit confused about throttlin… Lees meer
Hasty Treat - Technical Debt

10 mei 2021 · 28 min
Afspelen

In this Hasty Treat, Scott and Wes talk about technical debt — what it is, why does it occur, and some techniques for reducing and avoiding it.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:17 - What is technical debt
Outdated or hard to update code
If you groan when you have to work on it, it might be a sign of technical debt
Brittle code, easily breakable
Quirks and features
06:55 - Why does it occur
Over time, any garden left un-pruned will become overgrown
Many people, many code styles
Using hot new frameworks / techniques This is why seasoned developers don’t jump on new things Lees meer

You allow users to do literally anything
13:18 - Techniques for avoiding it
Deny your FOMO of new things
Abstract
Write good tests
Don’t put off refactors
Update dependencies frequently
Good standards Etsy has thousands of devs

20:08 - Examples in the real world
Airline websites open in new windows all the time
Cellphone carrier flashes the screen 100x
22:15 - Unfixable technical debt
Agency work sometimes
Links Next

React Router

TailwindCSS

Redux

Etsy

Dave Ramsey

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Mak…
Potluck — Is it worth it to still learn WordPress? × Is Safari the new IE11? × Mobile website testing × Pirated content × Styled components × SSGs × Transitioning to full-time freelance × More!

5 mei 2021 · 1 uur 7 min
Afspelen

It’s another Potluck! In this episode, Scott and Wes answer your questions about blogging best practices, support IE11, Nest.js, mobile website testing, pirated course content, building .edu websites, transitioning to full-time freelance work, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 02:20 - I am adding a blog to my custom written personal website and I wanted to know if there is any best practices for storing blog posts? My hope is to write them in markdown, host them somewhere and then automatically feed them into my website so they are all formatted to the style of my website.
05:37 - Do you care if people share cool, unique tips from your courses publicly on social media? For example, I once shared out a trick from one of Wes’ courses for how to set your VS Code windows different colors to distinguish your server and client code windows (giving all credit to Wes’ course for the concept). But it felt a little weird that I was sharing out a portion of his paid content for free. Is that okay? Where’s the line?… Lees meer
Hasty Treat - Future Tech We’re Excited About

3 mei 2021 · 28 min
Afspelen

In this Hasty Treat, Scott and Wes talk about future tech — some things you may not have heard about yet, and why we’re excited about them!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 05:20 - Astro
What it is: astro.build is a next gen “meta” framework that eases some of React’s pain but also is not just React.
https://twitter.com/georges_gomes/status/1380801812656226304 Lees meer

Why we’re excited about it: Server Side JS frameworks, combine Svelte, React, Vue as needed in one component that is an SFC using markdown style meta data.
Scoped CSS by default (a la Svelte). Sass out of the box.
Collections import for .md files

// pages/blog.astro --- import PostPreview from '../components/PostPreview.astro'; const blogPosts = import.meta.collections('./post/*.md'); --- Blog Posts {blogPosts.map((post) => ( )} 12:06 - ViteKit
What it is: Framework-agnostic
API routes
Pages (frontend, optional hydration)
Adapter for Node, static, Vercel, cf worker, etc. Inspired by SvelteKit.

15:58 - Svelte Kit
What it is: https://kit.svelte.dev/docs

https://svelte.dev/blog/sveltekit-beta

New framework for building Svelte apps

19:07 - Remix.run
What it is: Remix.run

Fullstack React framework

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

Links Sapper

Vite

Snowpack

Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets

Alle afleveringen

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

Hasty Treat - Handy Utility Functions with Just

A Podcast on Running a Podcast

Hasty Treat - Neat Things in CSS Color - Current and Coming!

Potluck — Corn Shucking × Self-Hosting Images × WordPress × Getting Scammed × Portfolios

Hasty Treat - Spicy Takeout - PHP Is Good and We’re Just Re-Creating It

Changelog Frontend Feud

Hasty Treat - Desktop Apps + New Tech We Love

From React To SvelteKit

Hasty Treat - Webhooks

New to JavaScript — ES2022

Hasty Treat - Starlink Rural Internet

Potluck - Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity × More!

Hasty Treat - TypeScripts Strict Explained

STUMP'D - Coding Interview Questions

Hasty Treat - Freelance Tips - Toxic Clients

Advice for New Devs

Hasty Treat - Why Do People Hate CSS?

Potluck - Moist code × Memoization × Ready for full-time? × Deadlines × Design ethics × React components × Video hosting × Local fonts × More!

Hasty Treat - The Weird and Wonderful Link Tag

How to Build a Website — The Show For Beginners

Hasty Treat - TypeScript Utility Types

Potluck - WordPress × 3rd-Party Cloud Services × Backend Hosting × Drupal × Getting Clients × GPS vs BEM × More!

Hasty Treat - Git the Latest - New Things In Tech - CoPilot, Petite Vue, Stackblitz, Web3 + More!

ShopTalk x Syntax

Hasty Treat - The Surprisingly Exciting World of Favicons

Potluck - Svelte × Bleeding-Edge Tech × Git Process × Screencasts × Government Jobs × Permissions-Based APIs × Rescript × More!

Hasty Treat - Stylelint for Linting CSS

React 18 - A Look Ahead

Hasty Treat - Vite + Parcel 2

Syntax Highlight — We Review Your Portfolios

Hasty Treat - JavaScript Event Buzzwords — Sync, Concurrent, Defer, Blocking, Workers

Dev Tools Power — Elements Tab

Hasty Treat - Seven Interesting JavaScript Proposals - Async Do, JSON Modules, Immutable Array Methods, and More!

Potluck - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × More!

Hasty Treat - CSRF Explained

CSS Container Queries, Layers, Scoping and More with Miriam Suzanne

Hasty Treat - What is SvelteKit?

Potluck - Immutability × Turning Off Your Brain × Types vs Interfaces × Hooks vs Components × Making the Most of Your First Job × Confidence in Svelte × More!

Hasty Treat - Making a Vaccine Bot with JavaScript

React + TypeScript

Hasty Treat - How to Make Money as a Creator

Bike Shedding — Developer Opinions Explained

Hasty Treat - JavaScript’s Drag and Drop API

The Surprisingly Exciting World of HTML Elements

Hasty Treat - Stylin the Unstylables

Potluck — Freelancing × Leveraging your experience × Component size × Dealing with mediocrity × How to spend “extra time” × Rust vs Node × Free hosting? × More!

Hasty Treat - Technical Debt

Potluck — Is it worth it to still learn WordPress? × Is Safari the new IE11? × Mobile website testing × Pirated content × Styled components × SSGs × Transitioning to full-time freelance × More!

Hasty Treat - Future Tech We’re Excited About