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

In this episode of Syntax, it’s part 2 of Wes and Scott’s journey through the CSS Trends Almanac for 2022 talking through the rest of the popular CSS properties on the web. 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. 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:06 Welcome Syntax 525 - 2022 CSS Trends and Usage Web Almanac Part 1 01:22 Smart home updates 04:05 Box sizing: border box 06:57 CSS Columns 09:20 Aspect Ratio Can I Use CSS Properties Rotate 09:53 Transitions and animations 13:36 Transition time 17:05 Steps as a timing function 19:01 Sponsor: Prismic 19:43 Blend modes 23:57 Responsive web design 26:31 Prefers Color Scheme 27:48 Popular breakpoints 30:57 Sponsor: LogRocket 32:06 Feature queries and @ supports 34:59 Logical and physical properties 37:59 css-in-js Sam Magura - Why We’re Breaking Up with CSS-in-JS Brad Frost - Why We’re Breaking Up with CSS in JS 42:28 Sass 43:20 Print styles 45:38 Sponsor: Sanity 46:38 Longhand properities 48:21 Non-existant properties 52:06 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Front Bumper Drillless Plate Holder Wes: 1U Server Rack 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 in your tweets

16 Nov 202258min

In this Hasty Treat, Scott and Wes talk about creating short form content for TikTok, Reels, Shorts, and tweets. What are some of the benefits and limitations of creating for vertical video, and what tools are they using to create videos. 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 Show Notes 00:23 Welcome 01:39 Sponsor: Sentry 02:40 Sponsor: Freshbooks 04:05 Short form content intro WesBos.com/tips Wes on TikTok LevelUp Tutorials on TikTok Scott Stolinski on TikTok 07:16 The good and the bad of short form content 17:13 Repurposing content 18:36 Content that works 21:12 Tips for making short form content 24:19 Limitations of short form content 31:49 Tools for editing Screenflow Descript Detail.co 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

14 Nov 202236min

In this supper club episode of Syntax, Wes and Scott recorded a live open table episode with guests calling in to talk about Wasm, building Riverside.fm, home networking, getting a job at Microsoft, Svelte and Sveltekit, htmx, and more! 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 Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch! Show Notes 00:30 Welcome 01:49 Safari aspect ratio bug 04:17 Thoughts on Vercel announcements? NextJS Conf 10:07 Gideon Riverside CTO Riverside.fm Careers 14:44 Do JS devs need to branch out? 16:52 Wasm Web Assembly (WASM) Rustlings 19:46 Sponsor: Auth0 21:03 Which company will Vercel aquire next? Guillermo Rauch Akamai Acquires Linode 27:12 Svelte Kit and Vercel 30:20 Why don’t you terminate your own ethernet cables? 30:58 How does Fly.io compare to Vercel? Fly.io 31:36 Did Wes learn Vue? 32:10 Brad jumping on the Remix train Remix 34:18 Layout shift caused by images in Markdown 38:30 Maintaining home networking Ubiquiti 44:44 Taking a course lead to a job with Microsoft Soumya’s YouTube - Geekysrm / website / Twitter 47:38 Sponsor: Appwrite 48:39 Are you still using your Synology NAS? Synology 53:53 Is Svelte ready for smaller team projects? Svelte Kit Wyze 56:03 HTMX htmx Alpine.js 01:49 Docker Wasm preview Introducing the Docker+Wasm Technical Preview WebAssembly System Interface 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

11 Nov 20221h 5min

In this Potluck episode of Syntax, Wes and Scott answer your questions about meeting IRL, bookmarks, SSG vs SSR, domain privacy, deploying monorepos, 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:08 Welcome 01:20 Weather updates 02:21 How often have you gotten together in real life? Jamstack Conf Reactathon 05:33 What are people using to bookmark sites? Arc Browser 09:03 When not to use Static Site Generation (SSG), and when to use Server-side Rendering (SSR)? Svelte Kit 13:53 How do you do correct error handling to catch everything? Sentry.io 21:13 Sponsor: Sentry 22:50 Is there any benefit to using getters and setters in classes set them over plain methods? 27:47 Will there ever be a js framework that can SSR on a non-JS backend? Render pnpm 32:40 Have either of you thought about learning and teaching Python or Django? 34:56 What is your opinion on purchasing “Domain Privacy” with each domain? 37:49 Sponsor: Sanity 38:44 Domain privacy continued 39:22 How you deploy monorepo packages? Tanstack Vite 43:48 As a member of a non margin group should I avoid applying for jobs when they say they welcome applicants who are of a marginalized group to support diversity? 46:12 When would you, if ever, choose good-old React over something like Next JS? 53:24 Sponsor: Freshbooks 54:16 Is it preferred to import via absolute reference or relative reference? 00:23 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Air Compressor Wes: Blue Flush Cutter Mini Diagonal Cutting Pliers Side Cutter Nippers Wire Cutter 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 in your tweets

9 Nov 20221h 7min

In this Hasty Treat, Scott and Wes talk about Zod, a TypeScript-first schema validation with static type inference. How are we using Zod? What do we like? And our thoughts on the Zod ecosystem. 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 00:24 Welcome 01:48 Sponsor: LogRocket 02:54 Sponsor: Linode 04:07 Minecraft thoughts Minecraft 06:25 Scratch Scratch 07:19 What is Zod? Zod Zod comparison 10:05 Features of Zod 13:24 How we’re using Zod 14:40 How Zod works with MongoDB 15:51 3rd party plugins 19:35 Zod ecosystem Zod Ecosystem 22:22 Asynchronous validation 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

7 Nov 202224min

In this supper club episode of Syntax, Wes and Scott talk with Dr. Courtney Tolinski about ADHD, how to tell if you have ADHD, issues related to ADHD for computer workers, anxiety vs ADHD, and more. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch! Show Notes 00:36 Welcome 02:11 Guest introduction 03:00 Do I have ADHD? CHADD 09:12 What is the threshold for diagnosis? 11:43 Are there other issues for computer workers? Arc Browser Syntax 513 - The Productivity Episode 15:27 Avoiding difficult or boring things 17:04 Structuring your day 18:41 Sponsor: LogRocket 20:12 Any tips for working in a distracting environment? MyNoise.net Headspace 23:40 Can I learn to deal with things? 27:28 How can I support a team member with ADHD? Missive 31:51 Sponsor: Appwrite 32:47 Any lifestyle changes to help with ADHD? 38:26 How do you find medical help? 42:39 How do you tell the difference between discipline vs ADHD? 47:05 Anxiety vs ADHD? 48:36 Dyslexia and ADHD 53:31 Inheritable or genetic 54:50 Don’t rely on self-diagnoses Psychology Today 55:48 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Taking Charge of Adult ADHD Bird feeder 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

4 Nov 202259min

In this episode of Syntax, Wes and Scott tell more of your scary web dev stories including lorem ipsum mistakes, naming something Skynet, blackouts, Twitch streaming, 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. 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 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:12 Weeeeeelcome 02:11 Slipsum mistake Slipsum 03:40 Brotli scaling explosion When JavaScript Bytes 05:14 Email loop Breaking Production with 56,000 emails 05:36 DevOops Magento store Example.com 08:26 Scary animal stories 11:09 Naming something Skynet 11:58 2003 Blackout 13:16 ExtJS error binding 17:09 Sponsor: Linode 17:55 Lead gen forms and captcha Issue Renaming upper-case ‘Sirupsen’ to ‘sirupsen’ Follow up 19:51 Scarlet Letter 21:51 MongoDB achievement story Adam Coster 26:14 Sponsor: Auth0 28:11 Drupal and mysql database fun 30:10 Nervous Twitch 34:03 FTP access story 37:24 Sponsor: LogRocket 38:53 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Ear foam tips Wes: Stepped drill bit / Aliexpress link 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 in your tweets

2 Nov 202243min

In this Hasty Treat, Scott and Wes explain more buzz words like schema, promises, async, sync, dom vs shadow dom vs page HTML, props, and more. Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch. 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:21 Welcome 01:17 Sponsor: Appwrite 03:16 Sponsor: Sanity 04:08 Schema Zod Apollo GraphQL 07:25 Promises 08:47 Async, Sync, Parallel and Concurrent 13:15 Dom vs Shadow Dom VS Page HTML 16:21 Methods vs Functions 18:18 Props 20:27 HTTP Requests are Stateless 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

31 Okt 202222min