Syntax - Tasty Web Development Treats

Latest Episodes:

Spooky Web Dev Stories 2022 Oct 26, 2022

Show notes

In this episode of Syntax, Wes and Scott tell your spookiest scary web dev stories including spooky render times, push notification hell, dark Friday, 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.

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.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax

Show Notes

00:15 Welcome
03:00 Spooky Render Times
React Virtualized
React Window
09:19 Push Notification Hell
13:11 Dark Friday
14:19 Tiny Ints with Big Problems
16:57 A/B Testing
18:47 Confirm Purchase button mistake
21:21 Sponsor: Sentry
22:34 Dike Leak
25:14 A Steep Grade
32:41 Falkland Islands mixup
33:40 Conference mixup
36:34 Sponsor: Prismic
37:58 Doctor Who Ipsum
43:55 Marketplace payouts
46:38 Sponsor: Freshbooks
47:42 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: PopSocket Wallet
Wes: Water flosser

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

Hydration & New Frameworks Like Qwik Oct 24, 2022

Show notes

In this Hasty Treat, Scott and Wes talk about Qwik, a new framework designed for the edge. How are things like hydration, lazy loading, rendering, and optimization handled by Qwik?

Sentry - Sponsor

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:18 Welcome
01:25 Sponsor: Sentry
02:47 Sponsor: Sanity
04:50 What is Qwik?
Qwik
08:05 What is SSR?
09:25 Working with hydration
15:31 Lazy loading, reduced rendering, and Qwik optimizer
17:30 Edge first
18:55 Data loading or data actions issues
20:49 Qwik City
Qwik City

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

Supper Club × tRPC With Alex KATT Johansson Oct 21, 2022

Show notes

In this supper club episode of Syntax, Scott talks with Alex Johansson about his work on tRPC, how it compares to other tools like GraphQL, and what’s next for tRPC?

Polypane - Sponsor

If you want to build a great website or web app, there’s a million things you need to take care of: responsive design, accessibility, SEO, Meta tags and page structure, to name just a few. Polypane is the browser for developers with tools that help with literally every part of modern web development, helping you save hours (and frustration!) with every project. It shows your site in multiple fully-synced viewports at once, Gives you advice on better accessibility and gives you insight into your performance and quality. Go to polypane.app/syntax to start a 14 day free trial and use SYNTAX20 for a 20% discount at checkout.

FireHydrant - Sponsor

Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics.

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.

Show Notes

00:37 Welcome
01:56 Guest introduction
@Alexdotjs on Twitter
Alex on GitHub
Katt.dev
tRPC.io
02:47 What is tRPC?
06:56 How does type safety work?
10:38 Sponsor: Polypane
13:20 What is Zod?
17:39 How does tRPC relate to GraphQL?
23:47 Sponsor: FireHydrant
25:25 What about a data loader?
29:04 React or NextJS adapters
30:41 How does it feel when people start building off your project?
33:58 Sponsor: Kontent by Kentico
37:34 What’s next for tRPC?
42:42 How is error handling done?
48:43 Supper Club questions
54:42 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Kysely

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 CSS Trends and Usage Web Almanac Oct 19, 2022

Show notes

In this episode of Syntax, Wes and Scott talk about some of the CSS Trends and Usage for 2022 as documented by the Web Almanac - and give some great cleaning tips along the way.

Prismic - Sponsor

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

00:10 Welcome
02:15 Cleaning Sick Pick
Bar Keepers Friend
04:40 Web Almanac
Web Almanac
08:23 CSS stylesheets size grow
09:49 Popular CSS Class names
15:29 How many websites use !important?
18:11 Popular pseudo classes
20:27 Sponsor: Prismic
21:38 CSS Attribute Selectors
27:03 Most popular units
32:23 calc properties
33:13 Sponsor: LogRocket
35:15 Top operators when using calc
36:21 Custom Property Names
37:39 Property Value types
38:00 Functions
39:27 Color names
42:02 Format of color
43:50 Most popular gardient on the web
47:27 Sponsor: Freshbooks
47:57 We don’t know the web
50:39 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: Dawn
Wes: Flat speaker wire

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

Bookmarklets Oct 17, 2022

Show notes

In this Hasty Treat, Scott and Wes take Matt Busche’s suggestion and talk all about bookmarklets and scripts to modify or manipulate web pages.

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.

NAME - Sponsor

COPY HERE

Show Notes

00:25 Welcome
02:02 What are bookmarklets?
Matt Busche’s fav bookmarklets Gist
Bookmarklet Maker
CSS Tricks - Web Development Bookmarklets
04:49 Using an Immediately invoked function expression
09:22 Greasemonkey
Greasemonkey

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

Supper Club × Neovim, Lua, RPC and Twitch with TJ DeVries Oct 14, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with TJ DeVries about his work on Neovim, programming in Lua, the benefits of RPC, live streaming your work day, and PDE.

FireHydrant - Sponsor

Hasura - Sponsor

With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.

Gatsby - Sponsor

Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️

Show Notes

00:36 Welcome
01:13 Guest introduction
Teej_dv on Twitter
TJ Devries
Teej_DV on Twitch
TJ on YouTube
Telescope on GitHub
Neovim on GitHub
Syntax 508 with The Primeagan
03:15 The difference between Vim and Neovim
06:14 Why did you choose to write in Lua?
Lua
Luajit
13:26 What is adapative UI in Neovim?
17:38 Lunarvim and alternatives
Fvim
LunarVim
20:24 Personalized development environment PDE
PDE
Firenvim
22:40 Sponsor: FireHydrant
23:21 Benefits of RPC
30:34 Is working on Neovim your job?
Sponsor Neovim
Sourcegraph
31:30 What is your approach to streaming?
34:11 Did you go to school for computer science?
39:12 Sponsor: Gatsby
39:46 Supper Club questions
System76
Pop
Dactyl Manuform Keyboard Kit
Jetbrains Mono
49:52 Sponsor: Hasura
50:47 SIIIIICK ××× PIIIICKS ×××

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

Use The Platform! Oct 12, 2022

Show notes

In this episode of Syntax, Wes and Scott talk about the benefits of sticking to the web platform that is available to you through APIs you may not know about.

Prismic - Sponsor

Sanity - Sponsor

LogRocket - Sponsor

Show Notes

00:11 Welcome
01:15 Fogging the boats
04:25 Use the platform
06:32 URLSearchParams
10:04 Pushstate and History API
Pushstate
13:46 Internationalization API
Internationalization API
Syntax episode 153
16:03 FormData API
MDN Docs
Clipboard API tutorial
20:31 Sponsor: Prismic
21:23 All of the DOM API
24:12 Vanilla JS
26:06 Localstorage and IndexDB
29:18 Web Animations API
31:10 Sponsor: LogRocket
32:39 Endless other browser apis
38:22 Shadow DOM and Web Components
Web Components for beginners
42:57 CSS variables
46:05 HTML
47:27 Sponsor: Sanity
49:19 More HTML
54:12 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: Cable sleeve
Wes: Kindling splitter

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

Syntactic Sugar, Declarative and First Class Citizens? What does that even mean? Oct 10, 2022

Show notes

In this Hasty Treat, Scott and Wes explain what the jargon you hear in JavaScript means.

Sentry - Sponsor

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax

Show Notes

00:25 Welcome
01:06 Sponsor: Sentry
01:59 Sponsor: Freshbooks
02:27 What does that even mean?
02:55 Everything in JavaScript is an Object!
04:43 X is just Syntactic Sugar
09:00 Functions are first class citizens
10:04 Object Literals or Template Literals
11:12 Declarative vs Imperative

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

Supper Club × ORMs with Nikolas Burk from Prisma Oct 07, 2022

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Nikolas Burk from Prisma about the role an ORM plays in a tech stack, how Prisma has changed over the years, ways to query data in Prisma, and how migrations work with Prisma.

Hasura - Sponsor

Storyblok - Sponsor

Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform.

FireHydrant - Sponsor

Did we mention that FireHydrant is free? Get started at Firehydrant.com/syntax.

Show Notes

00:35 Welcome
01:30 Guest intro
@NikolasBurk on Twitter
04:56 How has Prisma evolved?
Prisma
Keystone
GraphQL
10:44 What was Prisma V1?
17:04 Is there any GraphQL specific functions in Prismic?
21:26 Sponsor: Hasura
22:26 What role does an ORM play in a tech stack?
29:54 What is Planetscale?
Planetscale
The T3 Stack
32:22 Where does TRPC fit?
tRPC
33:46 Sponsor: Storyblok
35:28 What is an ORM?
Prisma VS Code plugin
42:00 How do migrations work with Prisma?
45:58 Query your data with Prisma client
49:43 Have you looked into alternative JavaScript environments?
55:16 Sponsor: FireHydrant
57:05 Supper Club questions
58:50 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Lichess

Shameless Plugs

Prisma blog

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 - Using Emoji in Naming × Project Estimates × Goal Planning Oct 05, 2022

Show notes

In this episode of Syntax, Wes and Scott answer your questions about whether you should use emoji in naming grid elements, how to estimate project times, responsive design tips, animating gradient backgrounds, 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

Sanity - Sponsor

Show Notes

00:10 Welcome
01:22 Shooting some pucks at the football game
04:06 Should we use emoji naming conventions for our grid template areas instead of just words?
Screenshot of Grid question
08:38 How do you estimate a reliable timeline for a project?
12:18 Do you think about sustainable web development?
16:24 What kind of tips and tricks around responsive design do you have?
18:22 Sponsor: Linode
18:55 How would you go about documenting your achievements throughout your career to reflect on during interviews and employee reviews?
23:33 How do you plan long term for projects or goals?
Forever Jobless Goals worksheet
28:22 Can you please make a fundamentals episode that only cares about clarifying the terms everyone assume to be well known to even beginner devs?
22 Buzzwords Explained
31:01 Sponsor: LogRocket
32:20 How would one go about animating a gradient background based on mouse movement?
JavaScript 30
38:13 Is there any way using the children API to render the close button and menu items in different locations in the menu component?
@Luke_lafr come on the show!
42:04 Where should I begin with design systems?
48:10 Sponsor: Sanity
49:24 Is JSON always safe?
55:01 SIIIIICK ××× PIIIICKS ×××