Syntax - Tasty Web Development Treats
Alle afleveringen
1.049 afleveringen, van nieuw naar oud
-
Potluck - Multi Tenant Apps, JS Sprinkles, Kids Coding, Server Error Handling
13 april 2022 · 1 uur 10 min
In this episode of Syntax, Wes and Scott answer your questions about multi tenant apps, JS sprinkles, kids coding, server error handling, and more.
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.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes 00:26 Welcome
01:01 Buying a new car
Hyundai Ioniq 5 Lees meer08:20 What would you recommend old-school jQuery folks, external agency vendors, and modern devs that want to work together?
11:59 Are React dumb/presentational components only possible at the leaf components of an application?
15:35 How old should a kid be to learn programming?
ScratchMinecraft
20:28 Sponsor: Sentry
21:34 Without pointing me to a paid error program like sentry, how do you guys manage this rabbit hole?
27:05 How do you judge how much server you need?
MongoDB AtlasGoogle Pagespeed
31:57 For websites that aren’t applications how would you best organize your JavaScript?
35:17 How do you diagnose slowdowns and bad user experience?
41:31 Sponsor: Sanity
43:13 Do you default export your React components when using TypeScript?
47:42 Besides web sockets or polling at a predefined interval and refreshing the page to fetch new data, can you think of any Next-specific solutions or recommend any packages th… -
How To Be Consistent
11 april 2022 · 24 min
In this Hasty Treat, Scott and Wes talk about their tips and tricks for being consistent if you’re trying to create.
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.
MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
Show Notes 00:44 String cheese theory
01:49 Sponsor: Sentry
03:41 Sponsor: MagicBell
05:26 Being consistent is the key to success
07:12 Commit to it
09:13 Plan and schedule
13:42 Being accountable to someone
18:11 Break things down into smaller tasks
20:25 Measure goals
22:14 Revise the plan
Tweet us your tasty treats Scott’s Instagram Lees meerLevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets
-
Making Content × What is our Process? Youtube, Blog Posts, Courses, Conference Talks, and Podcasts
6 april 2022 · 58 min
In this episode of Syntax, Wes and Scott talk through their process for making content on the internet for their YouTube channels, blog posts, courses, conference talks, and podcasts.
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.
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 00:09 Welcome
03:02 Creating YouTube videos
Scott’s YouTube channel Lees meer09:42 Conference talks
NotionStackblitz
Reactathon
Raycast
17:05 Sponsor: Linode
17:32 Tech for making slides
19:37 Courses - how to decide what to do?
26:44 How Wes breaks down a course topic
30:00 Arranging a course layout
33:19 Sponsor: LogRocket
34:17 Writing blog posts
41:58 Sponsor: Sanity
43:32 How we organize the podcast
51:10 SIIIIICK ××× PIIIICKS
××× SII… -
Types in JS?
4 april 2022 · 26 min
In this Hasty Treat, Scott and Wes talk about a proposal for type syntax in JavaScript.
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 00:25 Welcome
01:13 Sponsor: Sentry
02:03 Sponsor: Sentry
02:44 The proposal announced
A proposal for type syntax in JavaScript Lees meerProposal types as comments
03:24 What are types?
08:33 Types as comments
10:51 Why not JS Doc?
13:39 What it looks like
19:02 Possible downsides
21:37 Why not define a type system for JS in TC39 instead?
Why not define a type system for JS in TC39 instead?22:41 The Proposal vs Typescript
Tweet us your tasty treats Scott’s InstagramLevelUpTutorials Instagram
Wes’ Instagram
We…
-
Syntax Highlight
30 maart 2022 · 1 uur 2 min
In this episode of Syntax, Wes and Scott review your websites that you submitted including bald.design, Anh Hoang Nguyen, bradleyshellnut.com, and more.
Prismic - Sponsor NEEDS AUDIO RECORDING FIRST
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.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes Uses.tech Lees meer00:10 Welcome
03:35 How to submit your site for highlight
04:11 bald.design https://www.bald.design10:38 Anh Hoang Nguyen https://www.hoanganh.dev
15:08 kennytye.com https://www.kennytye.com
22:42 Sponsor: Freshbooks
24:10 rubenoliveira.tech http://rubenoliveira.tech28:47 abgn.me https://abgn.me
32:02 Sponsor: LogRocket
33:19 bradleyshellnut.com https://bradleyshellnut.com41:11 hunterjennings.dev https://www.hunterjennings.dev
46:19:16 Sponsor: Prismic
47:42:19 matthewfarlymn.com https://matthewfarlymn.com55:00:01 SIIIIICK ××× PIIIICKS
××× SIIIIICK ××× PIIIICKS ××× Scott: Bad VeganWes:
Shameless Plugs Scott: LevelUp TutorialsWes: Wes Bos Tutorials
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
-
What’s Up With Vitest?
28 maart 2022 · 21 min
In this Hasty Treat, Scott and Wes talk about Vitest, how testing is handled, how code coverage works, and whether they think they’ll use it.
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.
MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
Show Notes 00:21 Welcome
02:47 Sponsor: Sentry
03:48 Sponsor: MagicBell
04:55 What’s is Vitest?
09:06 How is testing handled?
10:59 HappyDOM
14:13 Code coverage baked in
16:25 Files acting as folders
Tweet us your tasty treats Scott’s Instagram Lees meerLevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets
-
Our Stacks Explained
23 maart 2022 · 1 uur 12 min
In this episode of Syntax, Wes and Scott talk through the tech stack they use to manage their course websites.
Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.
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.
.TECH Domains - Sponsor Dot Tech domains has launched a new game with wicked prizes. It’s a windows 98 inspired game where you need to find and solve puzzles in each of the drives. This is unreal and you need to see it to believe it - good luck and start the game March 25th at go.tech/syntaxbtc.
Show Notes 00:10 Welcome
02:50 CSS Redesign of LevelUpTuts
03:56 Overview of our platforms
06:06 The API
ExpressJS Lees meerMongoDB
GraphQL
Fastify
Mercurius
Mongoose
15:13 Sponsor: Kontent by Kentico
17:07 Customer dashboard
Svelte Kit21:21 Viewing experience
ReactGitHub
VideoJS
Mux
Vimeo
30:53 Hosting
35:51 Sponsor: LogRocket
36:45 Admin tooling
FlexboxPostmark
Drip
Pancake Charts
47:37 Authentication
PassportJS50:30 Transactional Email
NodemailerPug
Inky
mjml
52:36 Checkout
StripeStripe Checkouts
Stripe Elements
Braintree
Paypal
55:58 Hosting
Digital OceanDigital Ocean Platform
Render
Cloudflare
57:48 Sponsor: .TECH
59:39 Other parts
××× SIIIIICK ××× PIIIICKS ××× Scott: Toniebox Audio Player Starter SetWes: Vissles v84 Keyboard
Shameless Plugs Scott: LevelUp Tutorials - Svelte 3D Course
Wes: Wes Bos Tutorials
Tweet us you…
-
SSL Certs, Approvals and Cloudflare
21 maart 2022 · 25 min
In this Hasty Treat, Scott and Wes talk about getting SSL certificates set up between your hosting, Cloudflare, and other web apps you may use.
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 00:21 Welcome
01:13 Sponsor: LogRocket
02:06 Sponsor: Prismic
03:23 Wes’ story of SSL
Render Lees meer05:43 How LetsEncrypt works
LetsEncrypt08:32 What is Cloudflare?
Cloudflare10:33 The problem Wes ran into
12:27 Support is tricky
13:54 What is Cloudapp?
CloudappVercel
15:34 Two SSL Certs are needed
16:41 First solution
17:36 Second solution
22:36 What about A Records?
Tweet us your tasty treats Scott’s InstagramLevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets
-
Potluck - Handling Auth × Are Web Dev Real Developers? × Handling Git Conflicts × Converting PNG to Box-Shadow × Bad Docs vs No Docs × Making Shopify Headless
16 maart 2022 · 1 uur
In this potluck episode of Syntax, Wes and Scott answer your questions about handling auth, are web dev real developers, handling Git conflicts, converting PNG to Box-Shadow, bad docs vs no docs, making Shopify headless, and more.
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.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes 00:10 Welcome
01:32 Fool’s winter
03:25 How do you handle authentication in an app?
09:42 Responding to people who don’t think developers are real developers?
12:21 How do you handle git conflicts in package-lock.json and/or yarn.lock files?
14:42 I built a small project which converts .png images to CSS box-shadow values.
Img to Box Shadow Lees meer16:37 January 19th, 2038 at 03:14:08 is the end of epoch
Office Space20:31 Sponsor: Sentry
22:44 Should I begin to add PropTypes to my packages and projects?
25:59 What’s worse: bad documentation or no documentation?
27:37 How do you find the motivation or discipline to follow through in side projects?
29:48 I need to take an existing Shopify site and make it headless - what should I use?
37:55 Sponsor: Sanity
39:18 You have a ?token= query param and some token value for it. Could you explain a bit more on what is that for?
44:05 Have you thought abo… -
Hasty Treat WTF × SSR vs JamStack vs Serverless?
14 maart 2022 · 24 min
In this Hasty Treat, Scott and Wes talk about the differences between SSR, JamStack, and Serverless.
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.
Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.
Visit Retool.com/syntax for more information.
Show Notes 00:21 Welcome
01:20 Sponsor: LogRocket
02:26 Sponsor: Retool
03:49 What exactly is server side rendering vs. tech like Jamstack and serverless?
Cloudinary Lees meerMux
12:15 Why use one or the other?
Svelte KitSyntax.fm
16:55 Where does Serverless fit into this?
19:12 What’s the ideal scenario?
Tweet us your tasty treats Scott’s InstagramLevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets
-
Part 2 of Wes and Scott React to the State of JS
9 maart 2022 · 59 min
In this second part episode of Syntax, Wes and Scott continue talking about the 2021 State of JavaScript survey: mobile and desktop libraries, testing, monorepo, runtimes, flavors of JavaScript, and more!
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.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes 00:10 Welcome
01:20 Scott’s new sound panels
03:32 Instacart
2021 State of JS Survey Lees meerTauri
07:46 Mobile and Desktop libraries
13:50 Testing
VitestPlaywright
Cypress
19:48 Sponsor: Sentry
21:26 Monorepo tooling
27:00 Sponsor: Sanity.io28:18 JavaScript Runtimes
30:51 JavaScript Flavors
32:32 Non JavaScript Languages
39:38 Utilities
Syntax 401: Monorepopnpm
Turborepo
40:19 Resources
Syntax.fm 403: JavaScript in 2022 - New, Coming and Proposed Features43:18 Opinions
47:21 Features missing from JavaScript
49:30 Awards
52:58 Sponsor: Freshbooks
53:38 SIIIIICK ××× PIIIICKS
56:41 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× Scott: StoryPalWes: Heartbeat Hot Sauce
Matty Matheson on Hot Ones
Gordon Ramsay on Hot Ones
Shameless Plugs Scott: LevelUp Tutorials
Wes: Wes Bos Tutorials
Tweet us your tasty treats Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’…
-
Sticker Mogul 2022
7 maart 2022 · 36 min
In this Hasty Treat, Scott and Wes talk about Wes' experience designing, printing, and shipping out his sticker packs.
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 01:26 Sponsor: LogRocket
02:15 Sponsor: Linode
03:51 How Wes sells stickers
Syntax 346: Selling And Shipping T Shirts with TypeScript Lees meer04:27 Where the stickers are printed
Zigpac06:30 How the stickers were designed
07:38 How do you ship them anywhere in the world for $5?
10:46 Packing the stickers
13:58 How did Wes sell the stickers?
16:51 Any concern about two people ordering at the same time?
17:13 One thing that did break
Pushover18:13 How the stickers were shipped
Stallion ExpressAPC
25:42 Costs for stickers
28:37 TypeScript sticker logo
Tweet us your tasty treats Scott’s InstagramLevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets
-
Wes and Scott React to the State of JS
2 maart 2022 · 54 min
In this episode of Syntax, Wes and Scott take a look at the 2021 State of JS survey that was recently published, including demographics, salary, browser APIs, overall happiness, 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.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes 2021 State of JS Survey Lees meer01:51 Winter birthday fun
05:38 The State of JS survey
07:37 Demographics
09:18 Salary range
09:58 Language features
14:05 Browser APIs
17:36 Custom elements and Shadow DOM
18:18 Page visibility API
19:28 File system API
19:58 Web share API
22:15 Sponsor: Linode
23:12 Libraries
27:30 Stimulus
29:21 Trends
31:32 Happiness with the state of front end frameworks
32:28 Sponsor: LogRocket
34:04 Backend Frameworks
38:16 Backend tool satisfaction
44:35 Happiness of build tools
46:32 Sponsor: Freshbooks
48:27 The best podcast in web development
49:05 Sick Picks
××× SIIIIICK ××× PIII… -
This vs That × map vs reduce, forEach vs for in, and more!
28 februari 2022 · 26 min
In this Hasty Treat, Scott and Wes do a little this vs that with map vs reduce, forEach vs for in, .hasOwnProperty() vs in vs .hasOwn(), CSS absolute + left/right/top/bottom vs transform, 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.
Show Notes 01:30 Sponsor: Prismic
02:58 Sponsor: Sentry
04:21 .filter() and .map() (every, one, etc…) VS Reduce
09:17 .forEach() vs for in / for of
15:52 .hasOwnProperty() vs in vs .hasOwn()
19:37 CSS absolute + left/right/top/bottom vs transform
22:54 Object.assign({}, obj) vs {…spread}
Animal Friendly idioms Lees meerTweet 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
-
Ben Vinegar × Distributed Tracing and TypeScript Migrations
23 februari 2022 · 1 uur 4 min
In this episode of Syntax, Wes and Scott talk with Ben Vinegar about his work with Sentry, their migration to TypeScript, and advice for running JavaScript on other websites.
Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.
Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community.
Hashnode: Everything you need to start blogging as a developer!
Show Notes Ben Vinegar Lees meer00:20 Guest introduction
05:58 Seeing bug reports from Sentry
07:38 Distributed tracing for full stack developers
12:16 Amazon X Ray
AWS Xray15:32 Using Tracing
19:40 Sponsor: Kontent by Kentico
20:58 Cloudflare Worker Integration
22:30 How does Sentry have open source and a business?
Heroku
App Platform
Media Temple
Dreamhost
WordPress Calypso32:30 Sponsor: Hashnode
34:07 What is the tech stack of Sentry?
38:20 Sentry switching to TypeScript
Sentry switching to TypeScript44:36 Running JavaScript on other websites
51:24 Sponsor: Sentry
53:08 Sick Picks
××× SIIIIICK ××× PIIIICKS ××× Scott: Last SeenWes: SEOUL Sisters Korean Kimchi Seasoning
Ben: Worst Scene / Best Scene
I Was There Too
Shameless Plugs Scott: LevelUp Tutorials
Wes: Wes Bos Tutorials
Tweet us your tasty treats Scott's Instagram
LevelUpTutorials Instagram
Wes' Instagram
Wes' Twitter
Wes' Facebook
Scott's Twitter
Make sure to include @SyntaxFM… -
JavaScript in 2022 - New, Coming and Proposed Features
21 februari 2022 · 29 min
In this Hasty Treat, Scott and Wes talk about new proposed features coming to JavaScript in 2022.
MagicBell - Sponsor Magic Bell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
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 00:23 Welcome
01:25 Sponsor: MagicBell
02:50 Sponsor: Sentry
04:20 Weird audio tics
05:19 Fetch in Node.js
09:54 URL imports in Node.js
11:41 JSON Modules
15:01 Node in import url scheme
17:30 Pipeline Operator
21:21 Reversible String Split
23:56 JavaScript Module Blocks
25:22 String.cooked
26:34 BigInts Math
URL imports in Node.js
@MylesBorins Lees meerPipeline Operator
String.cooked
BigInts Math
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 - Selling Themes × Which Browser Should Devs Use? × Where Do You Keep 2FA Codes? × Remix vs Svelte Kit × Getting Unstuck from Tutorial Hell
16 februari 2022 · 1 uur 7 min
In this episode of Syntax, Wes and Scott answer your questions about selling themes, which browser to use, where to keep your 2FA codes, Remxi vs Svelte Kit, and more!
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.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax.
Show Notes
00:11 Welcome Lees meer02:10 Can you explain import.meta?
07:20 What are your thoughts on publishing and selling HTML & CSS/SASS templates/themes?
12:00 When is it best to use a semantic menu vs a nav?
16:14 Sponsor: Sentry.io
17:36 As a newbie in web dev., which browser do you recommend, Chrome or Firefox Dev. Edition?
20:25 Are TypeScript types are like creating models in Mongoose?
26:16 If you use 2FA, where do you store your recovery codes?
1Password29:32 Do you know a programming language which similar syntax to js and without the need of a runtime-framework?
Syntax 429 - Cloudflare Workers32:54 I am not feeling the hype for Remix. I would rather put my energy into SvelteKit.
Remix
Svelte Kit36:41 Sponsor: Sanity
38:09 Do you guys have any advice on getting unstuck from tutorial hell and at what point do you think someone is ready to apply for junior web dev jobs?
41:36 Do you feel frameworks like Next.js, Remix, etc. abstract too much the…
-
Code Explorers
14 februari 2022 · 20 min
In this Hasty Treat, Scott and Wes talk about how best to explore and contribute to code on GitHub repos.
Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.
Visit retool.com/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
00:25 Welcome Lees meer01:42 Sponsor: LogRocket
02:54 Sponsor: Retool
04:33 Topic introduction
06:44 How to get a handle on something new in a library?
10:27 How to contribute to comments
12:55 Looking through Issues
15:01 Looking at Pull Requests
15:43 Check Milestones
17:58 Look at Files Changed tab
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 -
Creator of Wordle - Josh Wardle
9 februari 2022 · 1 uur 4 min
In this episode of Syntax, Wes and Scott talk with the creator of Wordle, Josh Wardle. What's the tech stack for Wordle? Does he care about the clones of Wordle? And how did selling Wordle work?
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.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax.
Show Notes
00:27:02 Guest introduction
Wordle Lees meer02:45:13 How did Wordle go viral initially?
05:27:14 Where did the idea for Wordle come from?
07:07:06 What's your background?
Reddit.com12:52:23 Writing just HTML CSS and JavaScript
15:58:24 Wordle has 2 external dependancies
16:41:06 Sponsor: Sentry
17:40:23 The tech stack of Wordle
Lit Elements
just-merge
gzip
Cloudflare
AWS S322:21:04 Would you use web components again?
29:36:08 How much did hosting cost?
29:55:01 How does Wordle remember my streak?
33:56:07 Do you play Wordle everyday?
36:28:11 Sponsor: Sanity
37:16:07 How do you land on internet hits so often?
40:33:15 Are you aware of the clones?
Gordle44:33:15 Sponsor: Freshbooks
45:17:10 Selling Wordle to the New York Times
49:05:20 Dealing with the domain name
54:15:09 What's his opener word?
56:03:03 Juice
Juice it or Lose it talk59:10:06 Sick Picks!
××× SIIIIICK ××× PIIIICKS ××× Josh: Tupperware
Scott: G… -
Pros + Cons of JavaScript Servers, Serverless, and Cloudflare Workers
7 februari 2022 · 31 min
In this Hasty Treat, Scott and Wes talk about the pros and cons of JavaScript servers, Serverless, and Cloudflare Workers.
Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community.
Hashnode: Everything you need to start blogging as a developer!
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
00:26:13 Welcome Lees meer01:12:15 Sponsor: Hashnode
02:27:10 Sponsor: Linode
03:30:09 Topic introduction
Netlify Functions
Fastify
AWS Lambda09:46:02 Hosted Linux servers
13:41:11 Serverless functions
MongoDB
SvelteKit16:34:02 Connecting to a database in serverless
20:14:14 Cloudflare Workers
Cloudflare Workers
Works with Workers25:39:09 What do we recommend?
Render.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 -
Syntax Highlight
2 februari 2022 · 1 uur
In this episode of Syntax, Scott and Wes review your portfolios and websites including some from Harryxli, Austin Baird, Jacks Portfolio, 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.
Tabnine - Sponsor Tabnine is your teams' go to AI assistant. Using a variety of machine learning models, Tabnine learns from your team's best practices, and suggests code completions based on your code.
It supports over 30 languages and is available in most IDEs. Tabnine's universal models are trained strictly on fully permissive open source code, and can run locally, meaning that your code stays yours.
Get the free version at tabnine.com/now or go to tabnine.com/promo/syntax to get 50% off your first 3 months of Tabnine Teams.
Show Notes
00:11 Welcome Lees meer01:05 This chapter is mid
Wes does TikTok04:28 Harry xli
Harryxli15:00 AustinBaird.software
AustinBaird.software19:45 Sponsor: Linode
21:10 ognjenbostjancic.com
ognjenbostjan… -
Teamwork Makes The Dream Work
31 januari 2022 · 23 min
In this Hasty Treat, Scott and Wes are inspired by a Reddit post to talk about how to work better with your team.
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
00:24 Welcome Lees meer01:57 Sponsor: Sentry
03:26 Sponsor: Sanity
04:48 Summary of the Reddit post
06:46 We are a team
09:05 Coding with ego
12:32 Follow the leader
13:59 Getting better at asking questions
15:01 Ask for clarity
15:43 Understanding the guidelines
18:12 Interpersonal tips
19:49 Celebrating wins
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 -
Monorepos! Workspaces, pnpm, turborepo + more!
26 januari 2022 · 1 uur 1 min
In this episode of Syntax, Scott and Wes talk all about monorepos - the why's and the how's of using them on your projects.
Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Show Notes
00:11 Welcome Lees meer01:46 Our experiences with monorepos
05:04 Why use monorepos?
09:37 How long have we been using monorepos?
10:16 Tools for starting a monorepo
pnpm
Nom link16:22 Sponsor: Kontent by Kentico
17:33 What's the process for managing libraries?
20:10 Installing / uninstalling things
21:07 Shared dependencies
27:45 Sponsor: LogRocket "ui:dev": "pnpm recursive run dev --filter @leveluptuts/ui", "update": "pnpm recursive up -L -i"
29:23 Turborepo
Turborepo39:32 nX
nx45:38 Sponsor: Freshbooks
46:32 Lerna
Lerna48:09 Rushjs
Rushjs52:35 Sick Picks
59:17 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× Scott: Wyze v3, 10 micro sdWes: Tineco A11 Vaccum
Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%!
Wes: All CoursesTweet 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 -
Updating Project Dependencies
24 januari 2022 · 19 min
In this Hasty Treat, Scott and Wes talk about their process for updating project dependencies.
Sponsor - LogRocket 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.
Sponsor - MagicBell MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
Show Notes
00:25 Weeeeelcome Lees meer00:52 Sponsor: LogRocket
01:29 Sponsor: Magic Bell
03:32 What are dependancies?
04:04 Wes updates all the things
05:30 How to check if there are any updates
07:05 Upgrade isolated, Minor deps first.
09:16 Upgrade Minor groups after that
09:56 Then upgrade Major dependencies
14:47 Finally upgrade any stand along dependencies
15:44 Test test test
16:19 Watch error logging
17:05 Pray
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 -
New Year, New You. What to Focus on in 2022.
19 januari 2022 · 51 min
In this episode of Syntax, Scott and Wes talk through what to focus on at a beginner, intermediate, and advanced levels of coding skills.
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.
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
02:30 Semantic HTML Lees meer07:36 JavaScript Data
08:54 Issues & technical workflow
11:40 Emailing People
Syntax 117: How to Email Busy People13:49 Make something animated with CSS
Open Props Style16:04 Make a full stack contact form in a framework
16:52 Sponsor: Sentry
18:59 CSS Variables
22:36 Server Side fundamen…
-
CSS + JS Hacks We’re Fine With
17 januari 2022 · 26 min
In this Hasty Treat, Scott and Wes talk about CSS + JS Hacks that they're ok with using.
Sponsor - Freshbooks Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Sponsor - Sentry 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
00:53 What are the things in web dev, that feel wrong or hacky when starting out, but are actually totally accepted to do? Lees meer02:09 Sponsor: Sentry
03:12 Sponsor: Freshbooks
05:32 Negative margins in CSS
07:53 Not Passing a radix to parseInt()
10:17 -50% translation 50% direction
11:27 Overwriting Arguments in a function
13:20 non-standard-element
17:26 Button must have a type
18:56 Triangles out of borders
20:40 Overflow:hidden to clear a float
20:55 Always pass noopener to links!
22:16 Inline styles
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
12 januari 2022 · 1 uur 9 min
In this episode of Syntax, Scott and Wes answer your questions on a Potluck episode of Syntax.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.
retool.com/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 00:11 Intro Lees meer01:10 Watching movies with kids
02:49 How do you protect images on your website?
07:21 How did you guys learn Typescript?
13:26 Should I worry about learning Typescript now or stay focused on mastering JS first?
18:16 Sponsor: Prismic
20:03 How do you decide what to learn?
26:26 I want to become full stack and learn a backend language, which one should I choose?
28:07 Do Svelte components not support media queries?
29:30 Any advice or suggestions on how to approach Auth or Payment?
32:53 Sponsor: LogRocket
33:59 Any experience working with a team on a different time zone?
42:49 Do you have any experience or recommendations for introducing prettier late in a project?
48:57 What are your thoughts on monorepos?
52:57 Sponsor: Retool
55:14 What does it mean to know JS?
59:39 What would you do if you had to start over?
03:49 Sick Picks
07:09 Shameless Plugs
Paw Patrol Movie
Encanto
Luca
Tweet: When should a JR dev learn typescript?
Typescript Handbook
Selling and Shipping T-Shirts with Typescript
Sve…
-
Remix!
10 januari 2022 · 31 min
In this Hasty Treat, Scott and Wes talk about Remix!
Sponsor - Sanity 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.
Sponsor - Sentry 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
00:32 Rrrremix Remix Lees meer02:03 Sponsor: Sentry
03:48 Sponsor: Sentry
05:51 What is Remix?
07:51 Built on Fetch
12:28 Frameworks are getting so good
13:30 Data loading
14:36 Actions
19:09 Error boundary and catch boundary differences
20:15 Differences between Remix and Gatsby, and other SSG
21:33 What about hot reloading?
22:47 Nested layouts and nested routes
24:25 Typescript support
26:33 Hosting anywhere
Remix Docs
Remix on GitHub
Remix on Twitter
Remix on YouTube
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 -
2022 Predictions
5 januari 2022 · 1 uur 1 min
In this episode of Syntax, Wes and Scott talk through their predictions for 2022.
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.
Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community.
Hashnode: Everything you need to start blogging as a developer!
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
00:11 Welcome... Lees meer01:31 Svelte is king
Svelte
Svelte Kit03:57 Next.js
Next.js
Next.js Live06:40 Web components
Open UI
Syntax 353 Stylin the Unstylables11:42 Rust popularity
Rust
Rome15:58 Sponsor: LogRocket
17:12 Serverless and Cloud Functions
18:19 Cloudflare becoming a major player
Cloudflare Pages20:05 Tailwind
Tailwind
Open Props24:10 Glow Up
24:35 Next gen dev tools
OhMyZsh
Warp
Fig
iTerm
Starship27:32 Sponsor: Hashnode
29:48 CSS Container queries, Layers, and More!
31:45 GraphQL
34:13 Deno
Deno37:41 Typescript
43:36 Server come back
45:13 Sponsor: Freshbooks
46:02 Checkouts and payment processors
Wise51:30 Temporal API
53:20 Remote Dev / Thin Client
55:16 Sick Picks
00:16 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× Scott: A Show About AnimalsWes: Wise
Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%!
Wes: All Courses - Black Friday sale!
Psychology of Devx
Gitpod Community
Workshops as Code
Ghuntley.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… -
JS One Liners
3 januari 2022 · 23 min
In this Hasty Treat, Scott and Wes talk about some Javascript one liners that speed up your coding experience in one line.
Sponsor - Linode 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.
Sponsor - Sentry 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
00:24:12 Welcome Lees meer01:24:11 Sponsor: Linode
02:11:02 Sponsor: Sentry
03:54:18 Twitter ask for One Liners
04:24:05 Math random const getPsuedoID =() => Math.floor(Math.random() * 1e15);
05:43:09 Random color
Paul Irish random color '#'+Math.floor(Math.random()*16777215).toString(16);
06:41:06 Console.log as an object. console.log({ dog, person }); VS Marketplace Link
08:29:17 Edit anything document.designMode = "on"
10:15:15 Temporal date export const today = Temporal…
-
2021 In Review
29 december 2021 · 1 uur 10 min
In this episode of Syntax, Scott and Wes review their predictions and highlights for 2021.
.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.
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:21 Wes highlights Lees meer05:33 Scott's highlights
07:42 Writing admin tools for fun
13:33 Sponsor: .TECH Domain Name
14:30 Tech that was hot in 2021
17:18 Sveltekit
Pancake by Rich Harris
Svelte
Svelte Kit19:54 Remix
Remix20:36 Astro
Astro22:51 NextJS 11 and 12
NextJS25:14 Vite and Parcel 2
Vite
Parcel26:52 Web3
28:00 Prisma
Prisma30:35 Typescript
Typescript33:08 Sponsor: Sentry
35:25 Reviewing past predictions
36:54 ESM
39:47 Remote work will grow up
Discord
Notion
Height40…
-
Holiday Snackluk
27 december 2021 · 30 min
In this Hasty Treat, Wes and Scott talk about Package-lock, Angular, package updates, how to learn, and media servers on planes.
Sponsor - Sanity 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.
Sponsor - LogRocket 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
00:54 Luks of the past Lees meer03:19 Sponsor: Sanity
04:26 Sponsor: LogRocket
05:04 Has package-lock.json ever saved your bacon?
08:27 Why do you not talk about Angular?
11:28 How do you handle package updates?
Wes Bos tweet on npm-update17:43 How do you keep learning in your career?
21:02 How does the movie selection work on planes?
Emby
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 -
Gitpod, iPad Coding, Web3, WTF NFT
22 december 2021 · 1 uur 3 min
In this episode of Syntax, Scott and Wes talk with Geoff and Pauline from Gitpod about developing on Gitpod, Web3, and The NFT Bay.
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.
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
01:20 Guest introduction Lees meer02:46 Coding in the browser anywhere
Gitpod
JetBrain04:58 How does GitPod work in the browser?
NoYaml
Cobalt2
Finding VS Code Extensions for Gitpod09:27 How does GitPod actually work?
10:57 What is Kubernetees?
13:11 Is there a full VS Code environment?
18:21 Sponsor: Linode
19:01 Who are the heavy users of Gitpod?
24:32 Teams on Gitpod
Gitpod Roadmap
Centered.app30:11 Do the developers of Gitpod use Gitpod to build Gitpod?
Gitpod Careers32:51 What language is Gitpod written in?
33:15 Sponsor: Logrocket
34:10 Living in a van coding
38:16 How do you stay …
-
Gatsby v4
20 december 2021 · 19 min
In this Hasty Treat, Wes and Scott talk about what's new in Gatsby v4.
Sponsor - Prismic 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.
Sponsor - Sentry 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
00:26 Welcome Lees meer01:41 Sponsor: Prismic
02:35 Sponsor: Sentry
03:26 Gatsby v4!
Gatsby
What’s new in Gatsby 404:26 Any node version requirements?
05:22 Three rendering options
15:47 Parallel Queries
16:28 Data sync
16:57 Gatsby admin deprecated
Nextjs
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 - enums, WASM, Lighthouse, Redirects
15 december 2021 · 58 min
In this episode of Syntax, Scott and Wes answer your questions on a Potluck episode of Syntax.
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.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes
02:07 Google Chrome to start measuring user experience beyond the completion of page load Lees meer05:47 How can I ensure that I am executing npm commands safely?
07:58 How should I prefix booleans?
09:46 How do I decide between using an enum vs a union type…
-
How To Do Things In Svelte
13 december 2021 · 33 min
In this Hasty Treat, Wes and Scott talk about how to do things in Svelte.
Sponsor - Freshbooks Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Sponsor - LogRocket 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
00:28 Welcome Lees meer02:18 Lead pipe talk
04:33 Sponsor: Freshbooks
05:05 Sponsor: Logrocket
06:34 Intro to Svelte
07:44 Get Local State running
Writable-stores10:47 Arrow functions
11:53 Functions that update state
React Hooks in Svelte
React Use Svelte Store14:36 Live / Reactive Variables
17:03 Context
20:45 Conditional rendering
24:57 Input binding
28:02 Should Wes rewrite his video player in Svelte?
30:07 Child elements
32:10 Vercel hires Rich Harris
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 -
JavaScript and Hardware × Cars, Factories, Heavy Industry, Robots, and the Internet of Things
8 december 2021 · 1 uur 4 min
In this episode of Syntax, Scott and Wes talk with Anth Rogan about JavaScript and hardware - from cars, to factories, and the internet.
Bryntum - Sponsor Bryntum’s suite of web components help developers quickly add powerful project and resource scheduling capabilities to their React, Angular, Vue or vanilla JS apps. The SDKs include extensive API docs and plenty of examples. Try them online at bryntum.com/examples/gantt or bryntum.com/examples/scheduler-pro. Visit Bryntum.com/syntax for a 45-day free trial.
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
01:02 Guest introductions
Anth Rogan on LinkedIn Lees meer05:44 What kinds of things did you work on at Nissan?
09:02 Why are car head units based in the past?
11:35 What are cars running for UI?
14:04 What are PLC's?
17:02 What kinds of regulations exist for automotive software?
22:28 Sponsor: LogRocket
23:03 Deeper look at PLC's
26:56 What's Node-RED?
Node-RED… -
Meta Tags
6 december 2021 · 30 min
In this Hasty Treat, Wes and Scott talk about Meta Tags.
Sponsor - Sanity 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.
Sponsor - Sentry 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
00:25 Welcome
Syntax 379 - The Link Tag Lees meer01:24 Sponsor: Sanity
02:50 Sponsor: Sentry
04:28 What are Meta Tags?
05:01 What is charset?
07:41 The viewport tag
That’s a Nice Touch on TikTok10:25 SEO and page data
12:03 Browser display tags
14:20 Dead tags
16:24 Robot tags
17:53 Adult ratings tag
18:18 Google site verification tags
Google Verification tags19:35 Open Graph social tags
Facebook Meta tags
Open Graph22:54 Generator tag
25:54 http-equiv tag
http equiv27:20 Apple specific tags
Apple specific tags
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 -
Everything in web dev is Amazing!
1 december 2021 · 1 uur 3 min
In this episode of Syntax, Scott and Wes talk about all the things that have improved the lives of web developers over the years.
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.
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
00:16:18 Topic introduction Lees meer01:03:00 Leaf blowing and house updates
02:57:01 We complain a lot
04:13:22 Typescript improvements
06:20:00 Optional chaining
07:01:06 Async, Await and Promises
07:57:05 Array methods and tools for immutability
09:13:16 DOM interactions with getElementBy
10:34:10 Arrow functions
11:13:06 …
-
Github Co-pilot is Gonna Take ur Job
29 november 2021 · 27 min
In this Hasty Treat, Wes and Scott talk about their experiences using Github Co-pilot.
Show Notes
00:58 Wake up early and let's go Lees meer02:19 Sponsor: LogRocket
03:21 Sponsor: Freshbooks
03:56 What is Github Co-Pilot?
GitHub Co-Pilot06:01 Scott is a GitHub Star
07:03 Examples of GitHub Co-Pilot usage
09:43 Writing pseudo code
Emmet12:51 Using it for loop callbacks
13:52 What langauges does GitHub Co-Pilot work with?
14:54 It plays nice with HTML files
15:48 Svelte component example
16:31 Benefits for course creators
17:35 Some scary things
21:04 Could GitHub start charging for this?
22:30 Good at writing types
23:59 Gripes
24:54 Converting code to Parcel 2
Parcel
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 -
Troubleshooting
24 november 2021 · 1 uur 2 min
In this episode of Syntax, Scott and Wes talk about ways they troubleshoot issues with their code.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
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
01:13 Furniture shortages Lees meer02:29 Managing stuff
03:05 Basic troubleshooting skills are missing
06:09 Sanity check
CodePen
Codesandbox08:05 Isolate the issue
08:57 Commenting out code is free
12:17 Replicate the issue
15:07 Svelte and VS Code error
Svelte
VS Code17:02 Wes' course upgrades
Parcel 2
Patch package18:07 Sponsor: Logrocket
19:15 Rollback
20:30 Reading the error message
Syntax 47 - How to Get Better at Debugging
Syntax 152 - Debugging Tools23:59 Crack open the node modules directory
26:06 Sponsor: Freshbooks
27:29 Write step by step comments to the code
29:01 Consider outside sources
30:56 Using the right tools for the job
33:19 Rubber ducking it
34:16 Wes' Big Mouth Bass story
37:20 Scott's blown away by his leaf blower
39:56 Copy paste a message into Google
Twitter - What are your tips for troubleshooting code or a system that doesn't work?41:33 Logs and metrics
42:36 CI CD issues and Error Handler
43:41 Using a step debugger
44:24 Explain what's happening to someone else
45:31 Read…
-
The Macbook Pro Show - Wes and Scott Get New Laptops
22 november 2021 · 48 min
In this Hasty Treat, Wes and Scott talk about their new Apple MacBook Pro's with the M1 Max CPU.
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:30 The last time we upgraded Lees meer07:05 Initial thoughts on new MacBook Pro
Apple MacBook Pro09:23 How much RAM you might need
11:33 M1 Pro or M1 Max?
12:37 Justification as a business expense
Figma
Sketch
We recently found that the new 2021 M1 MacBooks cut our Android build times in half.
VS Code
Microsoft releases M1-native Visual Studio Code for developing apps
Notion
Height
Sublime Text14:52 Shortening the feedback cycle
15:57 Using VS Code
21:20 Video editing on M1 MacBook Pro
Mkbhd - M1 Macbook Pro review
Synology
Syntax.fm Ep220 The Synology Show
Recut
Davinci Resolve24:27 Screenflow export comparison
Screenflow29:32 VS Code improvements
SWC
pnpm32:57 The tools are no longer the bottleneck
33:37 Hardware upgrades
34:10 The notch
Bartender36:11 macOS icons have more padding
37:03 Charging and battery
TS3 Plus38:32 Fans and heat
39:18 Touch bar is gone
39:36 External displays
41:03 Battery
41:54 LG Display issue
42:51 Touch ID reader in a better spot
43:25 What's happening to your old MacBook Pro?
45:21 Ports and keyboards
Tweet us your tasty treats Scott's Instagram
Leve… -
Potluck — Copilot × Glasses × Databases × Dealing with Stress × Employment vs Self-Employment × Auth in GraphQL × Headless CMS × More!
17 november 2021 · 58 min
It’s another Potluck! In this episode, Scott and Wes answer your questions about GitHub Copilot, glasses, databases, dealing with stress, self-employment vs employment, design, CORS, and much 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.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 03:12 - Ders: Has GitHub Copilot become part of your daily workflow, or have you turned it off?
05:50 - Gaston Gmzi: Hey guys you rock!!! I’d like to know if you use eyeglasses and if you have any preference regarding models, design and features like blue-lig… Lees meer -
Hasty Treat - Next.js 12
15 november 2021 · 18 min
In this Hasty Treat, Scott and Wes talk about Next.js 12 and all of its hot new goodness and updates!
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 04:00 - Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds
06:25 - Middleware (beta): Enabling full flexibility in Next.js with code over configuration
08:16 - React 18 Support: Native Next.js APIs are now supported, as well as suspense
09:56 - AVIF Support: Opt-in for 20% smaller images
11:58 - Bot-aware ISR Fallback: Optimized SEO for web crawlers
13:10 - Native ES Modules Support: Aligning with the standardized module system
14:39 - URL Imports (alpha): Import packages from any URL, no installs required
Links https://twitter.com/mattgperry Lees meerIntroducing Middleware
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
-
Web Containers, StackBlitz, and Node.js in the Browser with Tomek Sulkowski
10 november 2021 · 56 min
In this episode of Syntax, Scott and Wes talk with Tomek Sulkowski about web containers, StackBlitz 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.
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.
Guests Tomek Sulkowski Lees meerShow Notes 02:45 - What is StackBlitz?
05:28 - What makes it different?
08:20 - How does offline work?
12:18 - What are web containers? How does this fit in?
17:45 - How does this all work (WASM, Node.js in the browser, etc.)?
21:00 - What does performance look like?
31:06 - What about VS Code extensions?
32:48 - Monorepos?
35:12 - Databases? Sqlite?
35:36 - Are there any limitations?
37:02 - What is Turbo?
40:58 - How is this different from similar apps?
Links https://stackblitz.com/https://jsbin.com/?html,output
https://jsfiddle.net/
https://codepen.io/
https://code.visualstudio.com/
Fugu API Tra…
-
Hasty Treat - What's the deal with Astro?
8 november 2021 · 20 min
In this Hasty Treat, Scott and Wes talk about Astro — what it is and why you should check it out!
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:08 - What is it, what does it do?
Framework for server-first static apps
Use any front-end framework
Does not ship JS unless you explicitly define a component to ship JS
05:20 - The syntax
.astro files is a mash-up of Svelte and React
Frontmatter for server-side JS
Template syntax is basically JSX
TS baked in
07:48 - State management
In client-side JS only, no state in .astro files
10:50 - CSS
Svelte style
Local, scoped tags
SCSS baked in
11:16 - Data fetching
Fetch in frontmatter via fetch()
12… Lees meer -
STUMP'D Interview Questions - CSS Edition
3 november 2021 · 46 min
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.
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 06:05 - Which property allows you to control the shape or appearance of the marker of a list?
06:33 - What is a pseudo element? What is a pseudo class?
09:15 - What is the difference between block, inline and inline-block elements?
10:15 - What is a combinator selector?
11:12 - What is specificity? How do you calculate specificity?
14:37 - True or False — The translate() function can move the position of an element on the z-axis?
16:44 - What is the difference between “resetting” and “normalizing” CSS?
17:51 - How can you load CSS resources conditionally?
19:45 - Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa?
22:30 - When to use CSS grid vs flexbox?
25:12 - What are all eight @-rules in CSS?
28:01 - Which property is used to underline, overline, and strikethrough text?
29:52 - What is DO… Lees meer -
Hasty Treat - How to Setup a PNPM Monorepo
1 november 2021 · 23 min
In this Hasty Treat, Scott and Wes talk about PNPM and monorepos!
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 4:40 - What is pnpm?
https://pnpm.io/ Lees meerPerformant npm
https://www.youtube.com/watch?v=hiTmX2dW84EFind and remove node modules find . -name "node_modules" -type d -prune -exec rm -rf '{}' +
08:30 - Why monorepo?
Internal packages all in one place
Forks and custom packages easier
Commands that control everything at once
10:33 - Workspaces
Not exclusive to pnpm
Yarn, npm, pnpm all have them now Different syntaxpackages: - "packages/**" 12:48 - How it works in practice
All commands run through root
Use in host, hook up my monorepo to render run commands
Filter and recursive
"install:all": "pnpm recursive install",
"clean": "pnpm recursive exec -- rm -rf node_modules; rm shrinkwrap.yaml; rm -rf node_modules",
"ui:dev": "pnpm recursive run dev --filter @leveluptuts/ui",
16:35 - Using submodules
https://paigeniedringhaus.substack.com/p/march-2021-git-submodulesWhy submodules?
Public and private
Links https://www.npmjs.com/package/npxhttps://yarnpkg.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
-
Horror Web Dev Stories - 2021
27 oktober 2021 · 51 min
For episode 400, Scott and Wes talk about web dev horror stories - 2021 edition!
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.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes 02:54 - Hi guys, love the show. I wanted to share with you something that happened just the other day (Oct 4th), I was starting my new job today at a large tech company. They use React for everything (even DNS!, don’t ask me how, it’s complicated). I figured I’d celebrate my first day and push some code to prod, (how hard could … Lees meer -
Hasty Treat - Hasty Horror Stories
25 oktober 2021 · 21 min
In this Hasty Treat, Scott and Wes talk about web dev horror stories — real things that have happened to real developers
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:36 - https://twitter.com/CameronPak/status/1445051951843061767
04:48 - https://twitter.com/susanlangenes/status/1445049321871712257
05:29 - https://twitter.com/DevJordanW/status/1445052979644706823
06:12 - https://twitter.com/HerbieDuah/status/1445088892177108994
07:04 - https://twitter.com/bbbryan14/status/1445400072921956357
07:43 - https://twitter.com/stephendennis30/status/1445074683062362114
07:59 - https://twitter.com/Tim__Moran/status/1445102727701221377?s=20
08:37 … Lees meer