Syntax &#8211; Tasty Web Development Treats

858: How to Go Deeper With Your Learning Dec 09, 2024

Show notes

Want to level up your web dev game? Scott and Wes share their top tips for going deeper with your learning—covering everything from reading the docs and source code to finding mentorship and engaging with the community.

Show Notes

00:00 Welcome to Syntax!
02:48 Brought to you by Sentry.io.
03:54 How do you go deeper?
04:23 Pick a project and build it.
06:36 Read the docs.
- Svelte Docs.
09:07 Read the source.
11:19 Consume content: blogs, conference talks, etc.
- Dot Conferences on YouTube.
- GitNation JavaScript Conferences.
16:24 Discord and Reddit.
19:31 Get mentorship and ask questions.

Hit us up on Socials!

857: How to Look and Sound Good at $10, $100 and $1000 With Producer Randy Dec 06, 2024

Show notes

Wes and Scott talk with Syntax Producer Randy Rektor. From mastering mic technique to lighting hacks and choosing the right camera, they discuss the best ways to upgrade your audio and video setup on any budget.

Show Notes

00:00 Welcome to Syntax!
03:01 Brought to you by Sentry.io
04:14 Understanding signal-to-noise ratio
06:48 Using de-noise
- iZotope Voice De-noise
09:12 The importance of mic technique
10:28 Dealing with electrical noise
11:15 The proximity effect
13:01 Sound treatment vs sound proofing
- Sound Wavelength Calculator
- Syntax 516: Wes’ New Soundproof Office
- Studiobricks
- Randy’s Studiobricks video
- GIK Acoustics
23:33 Do egg crates work for sound treatment?
25:22 USB mics vs XLR mics
- Shure MV6
- Syntax 845: Are Companies Hiring? State of the Dev Job Market With Taylor Desseyn
27:06 Video composition
30:18 How to improve your lighting
35:37 Choosing the right camera
36:58 The importance of codecs and bitrates
38:14 What to look for in a webcam
38:50 Randy’s packages for $50, $150 and $500-$1000 budgets
40:02 The $50 package/selecting your mic
- Feelworld PM1
- Fifine K688
- heyday Stone White Desktop Mic
43:53 The $150 package
- Neewer lights
45:32 The $500-$1000 package
- Shure MV6
- Insta360 Link 2
- Insta360 Link 2c
- Elgato Cam Link 4k
- Sonay a6000
51:07 Mic stand recommendations
- VIVO
56:50 Sick picks & Shameless Plugs

Sick Picks

Randy: etymologynerd on TikTok

Shameless Plugs

Randy: Randy’s YouTube Channel

Hit us up on Socials!

856: Loading UIs, Rust Webpack, New Cookie Types, Conference Talks + More Dec 04, 2024

Show notes

Scott and Wes dive into your questions on Hono and SvelteKit, partitioned cookies, redirect codes, and using Rspack instead of Vite. Plus, they share insights on quoting projects, interview best practices, and whether you should slow down those speedy loading spinners.

Show Notes

00:00 Welcome to Syntax!
00:50 Brought to you by Sentry.io.
02:23 Apple developer accounts and certificates.
06:58 Hono, SvelteKit, and using them together.
11:14 Rspack & Rsbuild over Vite?
- Rspack, Rsbuild.
- Rolldown, Rollup.
- oxc.
- Turborepo.
21:01 Quoting projects without seeing under the hood.
25:26 HTTP cookies, partitioned cookies, and chips.
- Partitioned Cookies.
30:29 Redirect codes; 301, 302, 303, 307
- 418 I’m a teapot.
36:22 Gaining inspiration for talks and posts.
40:02 My loading state is too fast! Should I use setTimeout?
- setTimeout Docs.
42:29 Interviews and landing the job.
49:50 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Stainless Steel Cookware.
Wes: Dim Lightbulbs, steelpan.guy on TikTok.

Shameless Plugs

Scott: Potluck Submissions.
Wes: Syntax on YouTube.

Hit us up on Socials!

855: Fast Websites: The New Speculation Rules API Dec 02, 2024

Show notes

Scott and Wes dive into the Speculation Rules API and why it’s a game-changer for building blazing-fast websites. They break down how pre-loading, prefetching, and pre-connecting work together to boost performance while weighing the costs for both users and developers.

Show Notes

00:00 Welcome to Syntax!
00:49 Pre-loading, prefetching, and pre-connecting.
- CSS Wizardy.
- CSS Wizardy on GitHub.
02:06 Brought to you by Sentry.io.
03:16 Benefits of pre-loading, prefetching, and pre-connecting?
07:02 The Speculation Rules API.
- mdn web docs.
08:20 Isn’t that expensive?
08:53 Eagerness of the Speculation Rules API.
09:55 What is the cost for the site?
14:42 What is the cost for the user?
15:49 Next Master.
- Next Master.
18:07 The current prevalence.

Hit us up on Socials!

854: Animating the Web With Matt Perry: Exploring motion.dev Nov 29, 2024

Show notes

Wes and Scott talk with Matt Perry, the creator of Motion (formerly Framer Motion). Matt discusses building intuitive tools, transitioning Motion to open source, and the future of web animation.

Show Notes

00:00 Welcome to Syntax!
01:15 The Framer Motion story
- Motion
05:16 What’s the status of Framer Motion today?
09:08 What tech is Motion built on?
13:40 Is Motion entirely WAAPI?
16:06 Why hasn’t the Web Animation API gained more traction?
17:46 Does Matt design his demos?
19:25 Performance and testing
25:34 Brought to you by Sentry.io
28:10 Have other animation libraries influenced Motion?
- Svelte
- GSAP
- Anime.js
31:49 Micro-Optimizations in JS
36:02 How do you test frame rates?
38:03 Graphics programming and shaders
- Maxime Heckel
- Maxime’s blog
39:58 What is the future of Motion?
41:42 What’s the difference between layout animations and the Vue Transition API?
46:35 Sick Picks & Shameless Plugs

Sick Picks

Matt:

Shameless Plugs

Matt:
- Motion.dev
- Sponsor Motion

Hit us up on Socials!

853: The State of Frontend Nov 27, 2024

Show notes

Scott and Wes dive into the State of Frontend 2024 Survey, breaking down the latest trends, tools, and frameworks shaping the developer ecosystem. Tune in as they react to hot takes on frameworks, state management, hosting, and what’s next for frontend devs!

Show Notes

00:00 Welcome to Syntax!
00:53 Brought to you by Sentry.io.
01:15 About the survey.
- Follow along! State of Frontend Survey
02:10 Frameworks.
06:15 Rendering frameworks.
07:35 State management.
09:14 Other libraries.
- Just: Dependency-free Utilities.
13:34 Data.
- Syntax Episode 453.
- Syntax Episode 833.
16:39 Hosting.
- AWS Amplify.
19:51 Continuous Integration.
21:30 Micro-frontends.
23:25 Package Managers.
- pnpm Link Workspace Packages.
- Corepack.
28:35 JS Runtimes.
29:47 Typescript.
33:13 Browser Technologies.
35:05 What is app property?
38:20 Progressive Web Apps.
40:11 Styling tools.
43:17 Testing.
45:39 Code editors.
49:02 Build tools.
49:17 Linting tools.
50:26 Operating systems.
51:17 The future trends.
54:14 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Candle Warmer.
Wes: Flighty iOS App.

Shameless Plugs

Scott: Syntax on Bluesky

Hit us up on Socials!

852: Cloudflare Tunnels Nov 25, 2024

Show notes

Explore the power of Cloudflare Tunnels with Scott and Wes as they break down this essential tool for secure remote server access. Learn how to establish and configure tunnels safely, integrate public webhooks with services like Snipcart and Apple Pay, and master the security practices that keep your connections protected.

Show Notes

00:00 Welcome to Syntax!
01:17 Brought to you by Sentry.io.
02:09 How do Cloudflare Tunnels work?
- 03:52 Publicly exposed webhooks.
- 04:09 Apple Pay.
- 04:40 Snipcart.
04:54 Accessing servers when away.
- Jellyfin, Home Assistant.
07:47 How to set up Cloudflare Tunnels.
10:00 Security risks.
- Cloudflare Access & Zero Trust.

Hit us up on Socials!

851: The Future of VS Code and Copilot Nov 22, 2024

Show notes

Wes and Scott talk with Cassidy Williams and Harald Kirschner about exciting new features in VS Code and GitHub Copilot, including custom instructions, UI/UX improvements, and the future of AI and Copilot within different editors.

Show Notes

00:00 Welcome to Syntax!
00:32 Cassidy’s keynote at GitHub Universe
03:23 New Copilot features
04:55 Use cases for prompt engineering
09:20 UI and UX enhancements
19:18 Copilot Extensions
20:38 Brought to you by Sentry.io
21:26 Multi-line suggestions?
27:00 How do you develop new ideas in this space?
- GitHub Next
35:42 Copilot in Xcode
- GitHub Copilot code completion in Xcode is now available in public preview
39:16 VS Code experimental features
- @code

Hit us up on Socials!