Syntax - Tasty Web Development Treats - TopPodcast.com

View Top 200 Chart

Back to Rankings Page

Syntax – Tasty Web Development Treats — News
Syntax – Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

Latest Episodes:

729: CSS Native @scope Feb 12, 2024

Show notes

In this very hasty treat, Wes and Scott cover CSS Native @scope, the implementation of this tool, and some of its limitations.

Show Notes

00:00 Welcome to Syntax!
01:00 Brought to you by Sentry.io.
01:33 Why scope your CSS?
03:21 Scott’s hot take.
05:43 How does @scope CSS work?
07:31 Similar to a component-based workflow.
08:00 Not having to specify a selector for your scope.
09:52 Pseudo inline hover styles.
11:31 Donut scope.
13:01 “Inverted donut-hole scope”
14:50 Browser support + limitations.

The Style Element

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

728: AI Superpowers with Kevin Hou and Codeium Feb 09, 2024

Show notes

In this supper club, Scott and Wes welcome Kevin Hou, Head of Product Engineering at Codeium, a blazing fast AI-powered code completion and chat tool for developers.

Show Notes

00:00 Welcome to Syntax!
05:31 An introduction to Codeium.
07:56 What information are you sending the AI to get such good completions?
Codeium compliance
09:15 Codeium runs a 'Language Server'.
11:15 Crawling dependency tree and abstract syntax tree.
12:07 Using Codeium Live.
12:34 How big of a codebase can you run this on?
14:39 Sending select amounts of data to AI.
16:06 Does Codeium maintain codebase preferences and styling (ie. snake case)?
17:39 Will Codeium scan the dependency?
19:23 AI UI, have we found the best format?
21:55 Crazy ideas in tech.
22:53 Additional AI UI inputs.
24:14 How do you make an AI model?
28:42 How does Codeium manage the product roadmap?
32:09 Do AI models get worse over time? How does Codeium validate that it's not?
Open AI Evals
35:39 How is Codeium THAT fast?
36:49 What programming langauges does Codeium use?
38:55 Codeium Playground.
Codeium Playground
39:15 Caching as a performance improvement.
39:58 What is the pipe between Codeium and editor?
40:17 Codeium chat service.
41:44 A WebSocket system allowing push and pull communication.
43:13 Closed Beta for GPT 4.0.
46:12 The dreaded closing quote bug.
48:26 Sometimes bugs bug Wes.
49:49 Supper Club Questions
51:40 Perplexity.ai
52:35 What editor does Kevin use?
55:31 Sick Picks + Shameless Plugs

Sick Picks

Kevin: Lapse.com

Shameless Plugs

Kevin: Codeium.com

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

727: How to Code: Opinionated TypeScript Stack + Tooling Choices Explained Feb 07, 2024

Show notes

Join Wes and Scott for a 30,000 foot, ‘soup-to-nuts’ view of web development. From choosing design tools, website styling, and programming languages, to backend infrastructure, data management, and hosting.

Show Notes

00:00 Welcome!
00:21 30,000 foot view of web development
02:37 Brought to you by Sentry.io
02:55 Starting with design tools.
06:10 Code Tooling
- 06:22 Text Editors
- 09:34 Terminal
- 14:28 Build Tools
- 16:07 Browser and dev tools
- 18:21 Formatter and linter.
21:43 CSS (how you style your website).
25:34 Programming languages.
27:14 Backend with metaframework.
29:36 Backend without metaframework.
32:20 Runtimes (JavaScript).
What is Bun? The New JS Runtime
The Deno Show
34:02 User interface libraries.
Shoelace.style
39:43 Data management: Databases
41:42 Data management: ORM
WTF is an ORM
You should learn Drizzle, the TypeScript SQL ORM
42:53 Other data management considerations.
43:33 Image pipelines.
45:52 Hosting, CDN, CI.
Where Should You Host Your App? Hosting Providers Compared
Hasty Treat WTF × SSR vs JamStack vs Serverless?
47:21 Hosting your site.
50:19 The finishing touches.
- 50:26 Brought to you by Sentry.io
- 52:18 Captcha
55:03 Sick Picks + Shameless Plugs.

Sick Picks

Scott: GreatScottLab, Show #594
Wes: AliExpress Board, Wes’ Demo

Shameless Plugs

Scott: Syntax on YouTube
Wes: Syntax on YouTube

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

726: Is HTMX a Joke? Feb 05, 2024

Show notes

Scott and Wes unravel the mysteries of HTMX, exploring the essentials for getting started, its powerful capabilities, limitations, and possible stacks for building primarily server rendered applications.

Show Notes

00:00 Welcome
02:07 Brought to you by Sentry.io
02:53 What exactly is HTMX?
04:30 What you need to know before working in HTMX.
- 04:35 You need a server.
- 05:35 You’ll most likely need a templating engine.
- 06:42 You most likely do not need as much client-side JS.
- 08:33 You don’t work in JSON
- 11:15 Not something you can swap out your UI with in a SPA.
- 11:48 Brings back AJAX
13:32 So, what can it do?
15:20 And what it doesn’t do.
- 18:25 It doesn’t do server-side responses.
19:09 What about animations?
19:20 What about CSS?
19:57 What about Web Components?
20:06 What about third-party client-side JS?
20:18 What about WebSockets and SSE?
HTMX WebSockets
20:30 What about extensions?
HTMX Extensions
21:00 Wes’ “bomb” question.
24:16 What Scott likes about HTMX.
25:45 What Scott doesn’t like about HTMX.
HTMX Multi-Swap
30:33 Hype, Meta Framework.
Hype

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

725: Safari is the New Chrome - Jen Simmons of Apple Feb 02, 2024

Show notes

Wes and Scott talk with Jen Simmons about the latest updates to Safari, reporting bugs to Apple, understanding color in CSS, new CSS switch controls, and testing your websites in Vision Pro hardware.

Show Notes

00:00 Welcome to Syntax!
00:03 Brought to you by Sentry.io
01:05 Meet Jen Simmons.
03:15 Safari has been killing it lately
Safari Release Notes
WebKit Features in Safari 17.0
WebKit Features in Safari 17.1
WebKit Features in Safari 17.2
10:25 Wes’ cOnSpirACy about Apple and APIs
18:18 Where is the best place to report bugs to Apple?
Bugs.Webkit.org
Jen on Mastodon
Web Compat
20:35 What’s happening with CSS Color gamuts and models?
33:57 Is contrast color ever going to to land?
36:25 Where is the CSS Grid and Masonry proposal at?
44:20 Will we be able to target a specific row in a grid?
46:17 What are CSS switch controls?
48:44 How can web devs view their websites in Vision Pro devices?
Apple Vision Pro
Running your app in Simulator or on a device
54:26 In what ways are HTML / CSS / JavaScript running where we don’t realize it?
58:43 Sick Picks

Sick Picks

Jen: Walking.

Shameless Plugs

Jen: webkit.org X

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

724: Potluck: Is Virtual DOM Bad? Jan 31, 2024

Show notes

Is the Virtual DOM Bad? Are keyboard shortcuts important? What is S3 storage? In this potluck episode of Syntax, Wes and Scott answer your questions.

Show Notes

00:08 Welcome
01:27 Syntax Brought to you by Sentry.io
02:45 Welcome Randy, our new Producer!
Randy’s YouTube
04:14 A ‘Canadian Podcast’
04:43 Is Alpine JS or HTMX a replacement for pug or other templating libraries?
08:21 What powers the “in-app” browsers and how can we test our sites on it?
Inject tracking code
Tauri
13:16 A deep dive on generators and iterators.
An Insight into Iteration Protocol through Infinite Scroll in Angular
15:25 Video podcast observations
17:18 PROBLEM I need a way of managing state.
22:34 Why is Virtual Dom (a la React) suddenly bad?
28:31 In a recent episode (659), Wes mentioned he updated the OG image cards, and noticed a higher click through rate.
29:07 Updated logo and monster truck intro.
30:19 Back to OG Images.
31:51 Are “import * as X” exports build stripped?
36:46 What is the difference between S3 storage and a CDN.
Backblaze CDN
45:00 How important are keyboard shortcuts or extensions? Are they necessary to be a good developer?
50:04 Sick Picks + Shameless Plugs

Sick Picks

Scott: Perplexity.ai, Serversideup
Wes: Zojirushi Rice Cooker

Shameless Plugs

Wes: Wes Bos Courses
Scott: Sentry

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Randy: YouTube

Scott: X Instagram Tiktok LinkedIn Threads

723: Svelte 5: Speed Simplicity Size Jan 29, 2024

Show notes

Unveiling Svelte 5! delving into its latest features. From the impressive speed and simplicity to its compact size, discover what makes this new release so exciting.

Show Notes

00:00 Welcome
00:39 Syntax Is A Video Podcast!
@syntaxfm on YouTube
01:52 Brought To You By Sentry.io
02:42 Svelte 5 Introduction
Svelte 5 Intro
05:45 What Are Runes?
- 06:21 $state()
- 11:49 $props()
- Class as a rest prop
- 16:41 $effect()
- 21:17 $inspect()
23:03 What Are Snippets?
27:33 What Are Events?
30:02 Built In Functions
32:42 Smaller Output
Reddit example
33:31 Speed
Benchmarks
35:00 Anticipated Release
Try it today

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

722: Next Level Web APIs. Bluetooth, File Access, Thomas Steiner - Project Fugu Jan 26, 2024

Show notes

Thomas Steiner talks with us about Project Fugu, an effort from Google to enable new classes of applications to run on the web. What is Project Fugu? What are some of Thomas’ favorite APIs to use? What is an IWA vs a PWA? And more!

Show Notes

00:32 Welcome
01:52 Who is Thomas Steiner?
02:57 What is the overall goal of Project Fugu?
08:17 When might we see these APIs come to all browsers?
14:10 Do you have examples of companies pushing for an API?
18:53 What happens with the face detection API?
28:33 What is an IWA?
35:17 What is the web transport API for?
37:11 What is MIDI?
41:20 Nintendo Joycon hack
45:28 File handlers in a PWA
50:38 File System Observer API coming soon
56:26 Sick Picks
Onnx
HuggingFace
Chrome for Developers
Fugu API Tracker
Google I/O 2023
LEGO Education SPIKE
Igalia
CapCut
Descript
Better Touch Tool

Sick Picks

Laser printers

Shameless Plugs

HowFuguIsMyBrowser

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

721: You should learn Drizzle, the TypeScript SQL ORM Jan 24, 2024

Show notes

We’re doing a Tasty overview of Drizzle in this episode. What is Drizzle? What are different types of databases? How do you host databases? What have we built with Drizzle? And how does Drizzle handle relational data, TypeScript, querying, selects, transactions, and more!

Show Notes

00:10 Welcome
00:52 Syntax Brought to you by Sentry
01:50 What is Drizzle?
09:11 Different types of databases
17:58 Why pay for SQLite hosting?
20:36 Defining your data structures
24:27 What we’ve built using Drizzle
28:28 Relational data
36:17 TypesScript and Drizzle
40:53 Querying + Selects with Drizzle
46:23 Transactions
47:09 Syntax Drizzle Studio theme
48:27 Sick Picks
Drizzle ORM
Drizzle ORM - Overview
Meet Drizzle Studio
Benchmarks
Sequel Pro
TablePlus
phpMyAdmin
Cloudflare D1
Bun
habitpath.io
Chartable
Neon
Answer Overflow
Drizzle Studio Themes

Sick Picks

Scott: BlackBerry - Apple TV (CA)
Wes: Candle Warmer Lamp

Shameless Plugs

Syntax Tiktok

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

720: Where Does Time Come From? Jan 22, 2024

Show notes

It is time. Wes and Scott attempt to blow your minds by talking about time, who’s tracking time, where does time come from, what time is it in your browser vs someone else’s server, and standards around time.

Show Notes

00:25 Welcome
00:55 Thanks to Chris Enns
LemonProductions.ca
Chris Enns on Twitter
Podcast tutorials by Chris Enns on YouTube
03:14 What is time in the browser?
06:27 What are atomic clocks?
Atomic Clocks and Cloudflare
08:22 Network time
09:35 Device time
11:11 Why is time so important?
14:35 Epoch time
Syntax epoch convertor
16:58 ISO 8601 standard
ISO 8601
19:20 RFC 3339
RFC3339
20:35 Time zone support
21:59 The Temporal API

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Related Podcasts