Syntax &#8211; Tasty Web Development Treats

758: Web Awesome with Konnor Rogers + Cory LaViska Apr 19, 2024

Show notes

Font Awesome is back with Web Awesome, an open source library of web components that will work with any framework because it’s based on standards. Today on Syntax we have Konnor Rogers and Cory LaViska here to talk all things Web Awesome.

Show Notes

00:00 Welcome to Syntax!
00:47 Brought to you by Sentry.io.
02:49 What is Shoelace?
07:21 What is Font Awesome?
08:07 Font Awesome is getting into Web Components?
11:35 What is Shoelace’s relationship with Web Awesome?
13:33 Is the idea to make it quick to get up and running?
15:46 What is the autoloader?
16:29 Where does Web Awesome fit in the ecosystem?
18:13 What does the styling game look like?
20:33 What is Part in CSS?
CSS Part mdn web docs
22:06 The reason we’re so stoked with Web Components.
23:32 Custom elements are a natural progression.
24:51 What are your thoughts on Open UI initiatives?
Floating UI
Close Watcher
Can I Use
27:40 Wes’ escape key conundrum.
30:21 A bug on the Syntax site.
31:19 Let’s talk about Kickstarter.
35:24 Do you know what premium inputs will be available in Web Awesome?
36:12 Rich text editor.
40:18 Setting goals.
41:48 Kickstarter giveaways.
42:47 Have you tried drag and drop?
Pragmatic Drag and Drop
44:57 The layout component.
48:50 What are your favorite components?
50:29 Sick Picks + Shameless Plugs.

Sick Picks

Konnor: Enhance.dev, Extism.org
Cory: Lit.dev

Shameless Plugs

Cory: Kickstarter
Konnor: Everyone involved in open UI

Hit us up on Socials!

757: Potluck: Is Gatsby Dead? Shadow Dom, AI Summaries, Self Hosting + More Apr 17, 2024

Show notes

Scott and Wes serve up answers to community questions, from navigating Light DOM vs. Shadow DOM to diving into tools for data extraction. Plus, they dish out insights on Gatsby in 2024, utilizing JavaScript ‘wheel events’, and explore the possibilities of hosting a website at home.

Show Notes

00:00 Welcome to Syntax!
00:51 Brought to you by Sentry.io.
01:17 When should I use Light DOM or Shadow DOM?
03:43 Do you know of any good tools for extracting data/content from Markup/HTML?
LinkeDOM on GitHub
08:29 Wanted to ask you guys your opinion on the state of Gatsby in 2024.
LocalFirst.fm
MeteorJS UI Updates
15:05 Please get the Goodhertz creator on the pod! Would be a great show.
Goodhertz Audio Software
16:34 Effects that involve the JavaScript ‘wheel’ event.
Runway.com
GSAP Animate Anything
CSS Scroll-Driven Animations
23:15 Best tool for rapidly creating UI from the ground up.
Episode 751
Thinkmill.com
27:44 Wes, what’s with your frame rate?
Frame Rate Testing Results on X
32:31 Is there any way to host a whole website setting on my PC at home?
CJ and Self-Host 101
Hetzner.com
Cloudflare Docs Create a Tunnel
36:52 Offline functionality like saving data and syncing data to database?
Episode 739
Local-First Web Development
Syntax Side Dish Explainer Playlist
39:41 Creating a GPT-like tool that can listen to long audio files.
OpenAI Speech to Text
Insanely Fast Whisper
Deepgram
43:51 Sick Picks.

Sick Picks

Scott: Hair Powder
Wes: Mini Grease Gun

Hit us up on Socials!

756: CSS Is Getting Mixins + Functions Apr 15, 2024

Show notes

Scott and Wes chomp through CSS Mixins and Functions, discussing the latest features making their way into CSS. From Tailwind-like classes to fluid typography, join us as we explore the possibilities and practical applications of these new tools.

Show Notes

00:00 Welcome to Syntax!
01:24 Brought to you by Sentry.io
03:00 CSS Is getting Functions and Mixins!
CSS Mixins and Functions Explainer
CSS Working Group Discussion
06:19 Functions and mixins, how are they different?
07:26 Don’t get hung up on the syntax, or maybe do.
09:12 CSS Functions.
12:02 Some use-cases.
15:58 CSS Mixins.
16:31 Tailwind-like classes.
17:53 Tailwind-like arbitrary syntax.
20:08 Fluid typography.
21:13 Let’s talk about logic.

Hit us up on Socials!

755: Chrome Extensions and Ad Blockers VS Google with Oliver Dunk Apr 12, 2024

Show notes

We were wrong, Manifest V3 is a big deal. Scott and Wes sit down with Oliver Dunk from Google to dive into the intricate world of Chrome Extensions development. From dissecting Manifest V3 to exploring the evolving landscape of browser security and extension reviews, this conversation covers the present and future of browser customization.

Show Notes

00:00 Welcome to Syntax!
00:32 Who is Oliver Dunk?
02:00 Brought to you by Sentry.
03:17 Manifest V3.
08:59 How many rules can you add?
09:56 What even is a rule?
10:52 Is Google trying to kill ad blockers?
13:56 What are the bad guys doing with Chrome extensions?
15:17 Can a browser extension access HTTP-only cookies?
16:06 Is Chrome reviewing all of these extensions?
19:06 Is there a way to side-step Google’s review process?
Reddit Thread, The real threat of Manifest V3
20:32 Do you see the negative chatter?
21:18 Service workers - how do do you access the DOM?
23:32 Do you think we’ll see more DOM APIs in service workers?
25:58 Do you have a favorite Chrome extension?
28:33 Has Google ever explored something comparable to Boost?
SidePanel
33:09 Let’s talk about the development stack.
35:54 1Password and Chrome.
38:39 What is the best way to debug an extension?
YouTube Chrome for Developers
40:33 Manifest V3 and the web request blocking API.
41:57 Known tracking payloads.
44:04 Do you think there is a path forward that makes ad-block developers happy?
44:45 Do you run an ad blocker?
45:20 Whitelisting and opt-ins.
46:38 What’s your tech setup?
47:18 What do you do to stay up to date?
47:51 Sick Picks + Shameless Plugs.
51:47 Wait, is Safari adopting V3 as well?

Sick Picks

Oliver: Defunctland YouTube, LEMMiNO YouTube

Shameless Plugs

Oliver: Chrome Extensions Getting Started, WebExtension Playground

Hit us up on Socials!

754: How to Level Up Your Web Development Career Apr 10, 2024

Show notes

Ready to level up your career in web development? Join Wes and Scott as they discuss techniques and best practices for advancing in the field. From mastering technical skills to navigating workplace dynamics, this episode offers actionable advice to help you thrive in your career.

Show Notes

00:00 Welcome to Syntax!
00:17 How can a front-end developer advance in their career?
01:10 Brought to you by Sentry.
01:30 Syntax newsletter.
Snack Pack
02:02 How do you get better at being a developer?
- 02:22 Asking questions.
- 08:09 Get your hands dirty.
- Hot Tips, Cool Treats
- 14:07 Share what you know.
- 17:35 Target your skills for what is needed.
- Ryan Carniato Tweet
- Episode 577
- Justin Fagnani Tweet
- Episode 595
- 21:12 Get out of your comfort zone.
26:55 Getting a better job.
- 27:27 Understand the stakeholders.
- 29:18 Find the metric the business cares about and do that.
- 30:01 Make an impression as being the person that gets things done fast and reliably.
- 31:47 Improve communications.
- 35:04 Be the person they want to have in meetings.
- 37:44 Use systems and tools to help your deficiencies.
- 39:01 Dress to impress.
- 39:32 Care.
- 39:40 Cut the cynicism.
- Energy Vampire
- 42:16 Don’t put bad stuff out into the world publicly.
- 44:29 Get your camera + mic dialed in.
46:23 Leveling up at life.
- 46:32 Take care of your shit.
- 47:40 Exercise.
- Episode 748
- 47:57 Eat well.
- 48:22 Sleep as much as you can.
- 48:26 Clean your workspace.
- 49:17 Learn new skills.
- 49:31 Take care of yourself.
- Habit Path
54:09 Sick Picks.

Sick Picks

Scott: Zeiss Lens Care Pack
Wes: Woosh Screen Cleaner

Hit us up on Socials!

753: Cache Ruins Everything Around Me Apr 08, 2024

Show notes

Scott and Wes dive into the cache problem, tackling user-specific data and caching security. From marketing A/B testing to content negotiation, they explore various challenges and solutions, including different URL/query parameters, edge logic, and client-side caching.

Show Notes

00:00 Welcome to Syntax!
01:22 Syntax is on YouTube.
02:16 Let’s talk about the cache problem.
03:33 User-specific data and caching security.
06:27 Why might this pop up?
- 06:29 Marketing A/B testing - cookie based.
- 06:55 User-selected features - such as themes.
- 06:58 Language or geo-based items - accept language.
- 07:11 Images - WebP for some browsers, jpg for others.
- 07:45 JSON/HTML based on accept header.
- 08:17 Different encoding.
08:26 Content negotiation.
08:54 The solutions.
- 09:04 Provide different URLs/Query parameter.
- 11:19 Don’t cache the page, cache the data based on query.
- 15:01 Implement a “Cache Key” - one render for every option.
- Netlify
- Fastly
- Cloudflare
- 18:17 Use edge logic.
- 19:52 Just do it client-side.

Hit us up on Socials!

752: React vs Vue vs Angular with Corbin Crutchley Apr 05, 2024

Show notes

Which framework is best? Join Scott and Wes as they chat with Corbin Crutchley, author of the “Framework Field Guide”, diving into the world of frameworks, metaframeworks, and tips to stay up-to-date on the latest trends in web development.

Show Notes

00:00 Welcome to Syntax!
00:48 Who is Corbin Crutchley?
02:08 Brought to you by Sentry.io.
02:32 Hilton, like the hotel?
05:57 What is the best framework?
07:23 How do you compare these frameworks?
10:00 Do you feel like the metaframeworks are comparable?
11:02 Exciting announcements from ng-conf?
11:42 Are Wiz and Angular merging?
14:17 Angular signals and Vue comparison.
PreactJS Signals
17:53 Adding signals to vanilla JavaScript and browsers.
21:02 What is derived state?
23:11 How can we store state within these different frameworks?
24:37 Passing children.
26:40 Which has the best implementation for passing children?
28:52 What’s the approach for building framework agnostic components?
TanStack Store
30:31 How much of it is framework specific?
31:35 Headless or DOM-based?
32:48 What are the best practices for writing this?
35:28 What’s the biggest framework pain point?
36:21 Is there a language that requires significantly more code?
38:52 What about Web Components?
39:58 Your book is free?
Framework Field Guide
Shout-out Eduardo Pratti and Kevin Aguilar.
42:42 What’s the process of writing a book like this?
45:44 Not a physical book?
46:17 Walk us through the tech stack.
48:27 Supper Club Questions.
48:33 What text editor, theme and font do you use?
49:53 What terminal and shell do you use?
50:19 How do you stay up to date?
53:39 Do you have advice for beginners?
55:26 Sick Picks + Shameless Plugs.

Sick Picks

Corbin: Shiki Syntax Highlighter

Shameless Plugs

Corbin: Framework Field Guide

Hit us up on Socials!

751: UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI Apr 03, 2024

Show notes

Scott and Wes explore UI Components, discussing functionality, styling, accessibility, and theming. From headless components to styled starters, they share valuable insights to elevate your UI game.

Show Notes

00:00 Welcome to Syntax!
02:39 We’re on YouTube.
03:14 The four categories of UI libraries or frameworks.
03:46 What does a UI component need to do?
- 04:14 Must be functional.
- 06:20 They must fit styling.
- 06:33 They must be accessible.
- 08:09 “Internationalizationable.”
- 09:29 They must handle theming and variants.
10:05 A few common UI components.
- 10:14 Date Pickers.
- 12:10 Dropdowns.
- 13:21 Toast message.
- Svelte French Toast
- 15:11 Some honorable mentions.
16:10 Headless components.
26:00 Unstyled components.
- 28:04 Shoelace.
- 32:47 React Aria Components.
- 33:00 Headless UI.
- 33:04 Radix UI.
- 37:12 Base UI.
38:23 What’s up with Google’s design?
40:22 Styled Starters.
47:50 What is the process for overriding with custom elements.
51:10 UI Kits and Design Systems.
53:06 Some things to consider.
JS Nation
55:41 A few more options to consider.
- Pigment CSS
- Base UI
- Shoelace
- BaseLayer
- JollyUI
- DraftUI
- Radix UI
- PenguinUI
- Tailwind CSS
- TailwindUI
- VerveUI
- DaisyUI
- ChakraUI
- Flowbite
- FloatingUI
- Downshift JS
- Mantine
59:02 Sick Picks & Shameless Plugs.

Sick Picks

Wes: Battery Daddy
Scott: Lazy Susan, Rechargeable Batteries, Charger

Shameless Plugs

Scott: Syntax on YouTube

Hit us up on Socials!