…

Syntax - Tasty Web Development Treats

…

Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

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.

#802

800: Why the jQuery Creator Uses React and Typescript - John Resig

In episode 800 of Syntax, Scott and Wes sit down with John Resig, the creator of jQuery, to discuss the current state of React and TypeScript. They dive into the evolution of frontend frameworks, the challenges of server-side rendering, and the tech stack at Khan Academy. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:59] (#t=00:59) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [01:32] (#t=01:32) What is jQuery? --- [05:31] (#t=05:31) Did you anticipate the success jQuery had? --- [07:16] (#t=07:16) allow-discrete, @starting-style. ------ [Install Nothing: App UIs With Native Browser APIs - Scott Tolinski] (https://www.youtube.com/watch?v=4hJomamEBfs) . --- [07:54] (#t=07:54) Building the community around jQuery. --- [11:16] (#t=11:16) jQuery plugins. --- [13:00] (#t=13:00) Did you ever make money from jQuery? --- [16:13] (#t=16:13) What is your role at Khan Academy. --- [17:58] (#t=17:58) What is the tech stack at Khan Academy? --- [21:56] (#t=21:56) Why do you want to change your CSS and JS framework? --- [24:03] (#t=24:03) TypeScript vs Flow. --- [25:25] (#t=25:25) GraphQL federation. --- [28:08] (#t=28:08) What was your frontend framework journey? --- [30:23] (#t=30:23) Is there any part of React you wish would improve? --- [32:37] (#t=32:37) Reservations using React Router. --- [33:14] (#t=33:14) Khan Academy web platform vs native platform. --- [35:21] (#t=35:21) What do you use for state management? --- [38:48] (#t=38:48) What’s harder than it should be on the web today? ------ <a href= "https://x.com/kilianvalkhof/status/1811402517236068689">Kilian’s Question On X</a>. ------ [Polypane.app] (https://polypane.app/) . --- [42:46] (#t=42:46) Opinions on JavaScript Sprinkles. --- [44:04] (#t=44:04) What’s with the $ sign in jQuery? --- [45:29] (#t=45:29) The challenges of having your name in such a widely used software. --- [51:06] (#t=51:06) Challenges with server-side rendering in React. --- [52:42] (#t=52:42) Sick Picks & Shameless Plugs. --- [54:48] (#t=54:48) What are the performance issues associated with internationalization? --- [56:57] (#t=56:57) Back to Sick Picks & Shameless Plugs. <a id="Sick_Picks_34"></a>Sick Picks --- John: [Biome] (https://biomejs.dev/) , <a href= "https://remix.run/">Remix</a>, <a href= "https://lingui.dev/">Lingui</a>. <a id="Shameless_Plugs_38"></a>Shameless Plugs --- John: [Khan Academy] (https://www.khanacademy.org/) . <a id="Hit_us_up_on_Socials_42"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

16 hrs Ago

58 MINS

58:20

16 hrs Ago

#801

799: Hot New and Under-Utilized Browser APIs

Scott and Wes serve up the latest and most under-utilized browser APIs that are changing the game for web development. From the @starting-style CSS API to scroll-snap and popovers, they break down how these tools can elevate your projects with minimal effort. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! ------ <a href= "https://www.youtube.com/watch?v=4hJomamEBfs&ab_channel=JavaScriptConferencesbyGitNation"> Install Nothing: App UIs With Native Browser APIs – Scott Tolinski</a>. ------ [Tolin.ski Demos] (https://tolin.ski/demos) . --- [01:03] (#t=01:03) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [02:15] (#t=02:15) When to use these tools. --- [03:45] (#t=03:45) @starting-style CSS API. --- [08:23] (#t=08:23) Transition behavior allow-discrete. ------ [Dialog CSS] (https://tolin.ski/demos/dialog/CSS) . --- [11:56] (#t=11:56) calc-size(auto). --- [16:19] (#t=16:19) scroll-snap. ------ <a href= "https://tolin.ski/demos/slide-show/SwiperIndicators">Swiper Indicators</a>. ------ [Slide Show] (https://tolin.ski/demos/slide-show/SlideShow) . ------ <a href= "https://github.com/argyleink/ScrollSnapExplainers/blob/main/js-scrollToOptions_Snap-Additions%2Freadme.md"> Scroll To Options Snap-Additions</a>. ------ <a href= "https://twitter.com/argyleink/status/1771320680417816818">Adam Argyle Tweet</a>. --- [22:05] (#t=22:05) View Transitions. ------ <a href= "https://developer.chrome.com/docs/web-platform/view-transitions/cross-document#:~:text=To%20have%20a%20cross%2Ddocument,document%2C%20same%2Dorigin%20navigations"> Cross-document view transitions for multi-page applications</a> --- [33:28] (#t=33:28) Popover API. ------ [Tolin.ski Demos Popover Basic] (https://tolin.ski/demos/popover/Basic) . ------ [Tolin.ski Demos Popover Action] (https://tolin.ski/demos/popover/Action) . ------ [Tolin.ski Demos Popover Anchor] (https://tolin.ski/demos/popover/Anchor) . ------ [Tolin.ski Demos Popover Compat] (https://tolin.ski/demos/popover/Compat) ------ [Tolin.ski Demos Popover Mobile-Nav] (https://tolin.ski/cool-treats/mobile-nav) . --- [41:15] (#t=41:15) Dialog. ------ [Tolin.ski Demos Drawer CSS] (https://tolin.ski/demos/drawer/CSS) . --- [48:12] (#t=48:12) Details. ------ [Tolin.ski Cool-Treats Accordion] (https://tolin.ski/cool-treats/accordion) . --- [53:26] (#t=53:26) Sick Picks & Shameless Plugs. <a id="Sick_Picks_32"></a>Sick Picks --- Scott: [Emerge Tools] (https://x.com/emergetools) . --- Wes: <a href= "https://tv.apple.com/show/hacks/umc.cmc.43wmt3l7kce5o3628tdf1ox0v"> Apple TV+ Hacks</a>. <a id="Shameless_Plugs_37"></a>Shameless Plugs --- Scott: [Local First from Scratch] (https://www.youtube.com/watch?v=Qoqh9Mdmk80) . <a id="Hit_us_up_on_Socials_41"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

24 Jul 2024

59 MINS

59:24

24 Jul 2024

#800

798: Self Hosting: Reverse Proxy Servers

Scott and Wes serve up an episode on reverse proxy servers. They discuss popular options like CF Tunnels, Caddy, Nginx, Apache, and more, explaining why you might need one for load balancing, SSL certificates, security, and managing multiple servers. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:30] (#t=01:30) Brought to you by [Sentry.io] (https://sentry.io/syntax/) . --- [02:25] (#t=02:25) What is reverse proxy? --- [03:16] (#t=03:16) Some examples of reverse proxies. --- [05:04] (#t=05:04) Why do you need a reverse proxy? ------ [05:09] (#t=05:09) Combining multiple servers. ------ [06:51] (#t=06:51) Load balancing. ------ [07:23] (#t=07:23) SSL certificates. ------ [10:30] (#t=10:30) Security. --------- [10:37] (#t=10:37) Conceal your true IP. --------- [11:24] (#t=11:24) Access management. ------ [12:31] (#t=12:31) Routing static assets. ------ [13:31] (#t=13:31) CDN / local. --- [15:55] (#t=15:55) Caddy × websocket support. <a id="Hit_us_up_on_Socials_19"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

22 Jul 2024

17 MINS

17:08

22 Jul 2024

#799

797: Drizzle: The TypeScript SQL ORM

Scott and Wes chat with Alex Blokh and Andrew Sherman, the co-founders of Drizzle ORM, about building a modern ORM from the ground up. They dive into the importance of type safety, creating filters with Drizzle, and the differences between Drizzle and other ORMs like Prisma. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! ------ [Syntax × Drizzle Swag] (https://sentry.shop/) . --- [01:15] (#t=01:15) What is Drizzle? --- [02:36] (#t=02:36) The genesis of [Drizzle] (https://orm.drizzle.team/) . --- [04:15] (#t=04:15) The process of building an ORM. --- [05:38] (#t=05:38) ‘100% Type-Safe’ and why that’s not a great goal. --- [07:50] (#t=07:50) Who is responsible for writing the complicated TypeScript? --- [09:40] (#t=09:40) Is an ORM necessary for anyone working with data? --- [12:15] (#t=12:15) Creating a product that fits different complexities. --- [13:19] (#t=13:19) Brought to you by [Sentry.io] (https://sentry.io/syntax/) . --- [13:44] (#t=13:44) Creating filters in Drizzle. Callback-based, or imported. Why? --- [19:22] (#t=19:22) Drizzle vs Prisma vs Kysely. --- [22:45] (#t=22:45) Are you friendly with Prisma? --- [23:35] (#t=23:35) Relational queries. --- [25:17] (#t=25:17) Query vs select. --- [27:42] (#t=27:42) Maintaining so many different technologies. --- [30:37] (#t=30:37) Switching databases. --- [31:39] (#t=31:39) Drizzle Studio. ------ <a href= "https://drizzle.studio/themes/DQxCNydRxt3DjhMOl_P61">Drizzle Studio Syntax Theme</a>. --- [35:00] (#t=35:00) Accessing Cloudflare D1 SQLite requires connection through a worker. --- [37:40] (#t=37:40) Drizzle Kit. --- [41:37] (#t=41:37) Will you ever support MongoDB? --- [42:10] (#t=42:10) Supporting <a href= "https://github.com/electric-sql/pglite/issues?q=drizzle">PGlite</a> and local data storage landscape. ------ <a href= "https://orm.drizzle.team/learn/latest-releases/drizzle-orm-v0306">DrizzleORM v0.30.6 release notes</a>. --- [44:00] (#t=44:00) Being a developer in Ukraine in 2024. ------ How to support Ukraine: <a href= "https://savelife.in.ua/en/">Savelife</a>, <a href= "https://u24.gov.ua/">United24</a>. --- [51:07] (#t=51:07) Drizzle is expanding. --- [53:50] (#t=53:50) Sick Picks + Shameless Plugs. <a id="Sick_Picks_33"></a>Sick Picks Andrew - <a href= "https://eu.formswim.com/products/smart-swim-2-goggles">Smart Swim Goggles</a>. <a id="Shameless_Plugs_37"></a>Shameless Plugs Andrew - [Savelife] (https://savelife.in.ua/en/) , [United24] (https://u24.gov.ua/) . Scott - [Syntax × Drizzle Swag] (https://sentry.shop/) . <a id="Hit_us_up_on_Socials_42"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

19 Jul 2024

57 MINS

57:31

19 Jul 2024

#798

796: Do We Need JS Frameworks × Are You Over-Engineering? × Webview vs Native

Scott and Wes tackle a variety of audience questions, from the nuances of over-engineering to the energy consumption of AI LLMs. They also discuss the pros and cons of monorepos, frameworks, and the ever-important question: Do you really need to learn all the developer tooling? <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:41] (#t=00:41) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [01:07] (#t=01:07) Challenges around a resume playback function. --- [05:56] (#t=05:56) Why use Google Forms for Potluck questions? --- [07:57] (#t=07:57) What constitutes over-engineering and how to avoid it. --- [13:28] (#t=13:28) Webview vs native component based mobile apps. --- [18:06] (#t=18:06) Running and managing monorepos. --- [20:59] (#t=20:59) Energy consumption of AI LLMs vs static web content. ------ <a href= "https://www.baseten.co/blog/llm-transformer-inference-guide/">A guide to LLM inference and performance</a>. ------ [From Words to Watts: Benchmarking the Energy Costs of LLM Inference] (https://arxiv.org/pdf/2310.03003) . --- [25:19] (#t=25:19) Why do we need frameworks? ------ <a href= "https://blog.frankmtaylor.com/2024/06/20/a-rant-about-front-end-development/"> Frank M Taylor Blog Post</a>. --- [33:05] (#t=33:05) Handling ad-blockers blocking Sentry and other tools. ------ <a href= "https://github.com/syntaxfm/website/tree/main/src/routes/api">Syntax GitHub</a>. --- [38:25] (#t=38:25) Creating sites without JavaScript. --- [42:49] (#t=42:49) Do I really have to learn all the various developer tooling? ------ [Wes Bos Tweet] (https://x.com/wesbos/status/1810693535391272986) . --- [44:47] (#t=44:47) What are the best ways to network and meet other developers? --- [50:16] (#t=50:16) Sick Picks & Shameless Plugs. <a id="Sick_Picks_24"></a>Sick Picks --- Scott: [Tweek App] (https://tweek.so/) / --- Wes: [Rain-X Waterless Car Wash] (https://amzn.to/3LhrzSp) . <a id="Shameless_Plugs_29"></a>Shameless Plugs --- Scott: [Swag Store] (https://syntax.fm/shop) . --- Wes: [Audio Player Updates] (https://syntax.fm) . <a id="Hit_us_up_on_Socials_34"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

17 Jul 2024

58 MINS

58:34

17 Jul 2024

#797

795: Hosting Private Fonts on the Edge With Cloudflare

Scott and Wes dish out the intricacies of hosting private fonts using Cloudflare Pages. They explore the challenges of font security, the benefits of a font server, and the nuances of caching and whitelisting to keep your fonts secure and efficient. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:53] (#t=01:53) <a href= "https://sentry.io/resources/behind-the-code-a-discussion-with-backend-experts/"> Behind the Code</a>: Brought to you by <a href= "https://sentry.io/syntax">Sentry.io</a>. --- [03:12] (#t=03:12) The problem with hosting fonts. ------ <a href= "https://github.com/stolinski/scotts-fonts-worker-exploration">Scott’s Fonts</a>. --- [05:42] (#t=05:42) The solution, a font server with [Cloudflare Pages] (https://pages.cloudflare.com/) . --- [09:37] (#t=09:37) Utilizing a Key Value Store. --- [10:53] (#t=10:53) Storing a whitelist. --- [13:42] (#t=13:42) Why not just use a bucket? ------ <a href= "https://github.com/stolinski/scotts-fonts/blob/main/src/routes/fonts/%5Bpath%5D/%2Bserver.ts"> Check out the code</a>. --- [15:24] (#t=15:24) Should whitelisting be done in JavaScript or cores? --- [17:23] (#t=17:23) How do you cache to multiple origins? --- [18:15] (#t=18:15) Multiple URLs in an allow origin. --- [19:17] (#t=19:17) Font security and foundry challenges. --- [21:43] (#t=21:43) Moving Domains on Cloudflare. Check out the font Syntax uses! <a href= "https://mass-driver.com/typefaces/md-io/">MD-IO</a>. <a id="Hit_us_up_on_Socials_21"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

15 Jul 2024

24 MINS

24:24

15 Jul 2024

#796

794: Prettier JavaScript with Vjeux

Scott and Wes sit down with Vjeux from Meta to dive deep into the origins and evolution of Prettier, the widely-used code formatter. They discuss the challenges faced, the decision-making process behind its features, and what the future holds for this indispensable tool in the developer’s toolkit. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:45] (#t=01:45) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [02:19] (#t=02:19) <a href= "https://sentry.shop/">New swag</a>! --- [03:25] (#t=03:25) Who is Vjeux? --- [06:56] (#t=06:56) Is management the key to successful projects? --- [08:50] (#t=08:50) The genesis of Prettier. --- [12:08] (#t=12:08) Why other JS formatters didn’t work. --- [16:56] (#t=16:56) Focusing on edge-cases. --- [17:41] (#t=17:41) The goal for Prettier. ------ [Prettier Philosophy] (https://prettier.io/docs/en/option-philosophy) . --- [18:31] (#t=18:31) Next step, integrations. --- [19:37] (#t=19:37) Should you run Prettier on save or commit? --- [21:34] (#t=21:34) Does Prettier’s limitations lead to higher adoption? ------ [Prettier Config] (https://prettier.io/docs/en/configuration.html) . --- [25:01] (#t=25:01) What was the most controversial default setting? --- [28:14] (#t=28:14) Does Facebook use semicolons? --- [29:18] (#t=29:18) Getting approval to devote 6 months to Prettier. --- [31:42] (#t=31:42) Working with Mark Zuckerberg. --- [32:43] (#t=32:43) Was there ever consideration to augment ESLint instead? ------ [Prettier vs. Linters] (https://prettier.io/docs/en/comparison) . --- [35:34] (#t=35:34) What are your thoughts on the Rust-based alternatives? --- [36:44] (#t=36:44) Prettier’s <a href= "https://twitter.com/Vjeux/status/1722733472522142022">$10,000 bounty</a>. --- [39:32] (#t=39:32) What is the future of Prettier? --- [44:54] (#t=44:54) Prettier is available in almost [every language] (https://prettier.io/docs/en/) . --- [47:59] (#t=47:59) Advice for other open-source maintainers. --- [53:26] (#t=53:26) Sick Picks & Shameless Plugs. <a id="Sick_Picks_31"></a>Sick Picks --- Vjeux: <a href= "https://huggingface.co/docs/transformers.js/en/index">TransformersJS</a>. <a id="Shameless_Plugs_35"></a>Shameless Plugs --- Vjeux: [Prettier x Syntax Swag] (https://sentry.shop/) . <a id="Hit_us_up_on_Socials_39"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

12 Jul 2024

55 MINS

55:27

12 Jul 2024

#795

793: The Local First Landscape

Scott and Wes dive into the local first landscape, exploring the benefits and possibilities of local first apps. They highlight some of their favorite tools and discuss why local first is gaining traction among developers. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:27] (#t=00:27) <a href= "https://sentry.io/resources/behind-the-code-a-discussion-with-backend-experts/"> Behind the Code</a>: Brought to you by <a href= "https://sentry.io/syntax">Sentry.io</a>. --- [01:06] (#t=01:06) Catch up with Wes and Scott. --- [03:00] (#t=03:00) The local first space. ------ [Scott’s Blog: The Spectrum of Local First Libraries] (https://tolin.ski/posts/local-first-options) . ------ <a href= "https://syntax.fm/show/739/the-lofi-movement-building-local-first-apps"> Syntax 739: The Lofi Movement</a>. --- [04:27] (#t=04:27) Some local first apps we love. ------ [Linear] (https://linear.app/) . ------ [Tweek.so] (https://tweek.so/) . ------ [Superhuman] (https://blog.superhuman.com/) . --- [05:15] (#t=05:15) The advantages of local first. --- [06:07] (#t=06:07) <a href= "https://localfirstweb.dev/">localfirstweb.dev</a>. ------ [09:21] (#t=09:21) <a href= "https://www.triplit.dev/">Triplit</a>. ------ [15:33] (#t=15:33) <a href= "https://www.evolu.dev/">Evolu</a>. ------ [22:32] (#t=22:32) <a href= "https://rxdb.info/">RxDB</a>. ------ [24:08] (#t=24:08) <a href= "https://electric-sql.com/">ElectricSQL</a>. ------ [26:57] (#t=26:57) <a href= "https://pouchdb.com/">Pouchdb</a>. ------ [28:46] (#t=28:46) <a href= "https://tinybase.org/">TinyBase</a>. ------ [32:08] (#t=32:08) <a href= "https://replicache.dev/">Replicache</a>. ------ [44:31] (#t=44:31) <a href= "https://www.powersync.com/">PowerSync</a>. --- [48:21] (#t=48:21) Sick Picks & Shameless Plugs. <a id="Sick_Picks_26"></a>Sick Picks --- Scott: [Battery Jump Starter] (https://amzn.to/4crtJea) . --- Wes: [Battery Tire Pump] (https://amzn.to/3XMWpKk) . <a id="Shameless_Plugs_31"></a>Shameless Plugs --- Wes: [Syntax Swag] (https://sentry.shop/) <a id="Hit_us_up_on_Socials_35"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

10 Jul 2024

53 MINS

53:21

10 Jul 2024

#794

792: Perfect Sitemaps for SEO

Scott and Wes break down the importance of sitemaps for SEO. They dive into the different file formats, essential fields, and common pitfalls to avoid when creating and submitting your sitemap to search engines. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! ------ [New Swag Coming Soon] (https://sentry.shop/) . ------ [Tolin.ski] (https://tolin.ski/) . --- [02:09] (#t=02:09) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [02:39] (#t=02:39) Sitemaps. --- [04:36] (#t=04:36) Why do you need a sitemap? --- [06:34] (#t=06:34) Sitemap file formats. ------ [08:31] (#t=08:31) Choosing a file format. ------ [09:17] (#t=09:17) Site map file size limits. ------ [10:32] (#t=10:32) Fully-qualified URLs. --- [10:50] (#t=10:50) Fields and metadata. ------ [10:58] (#t=10:58) What fields matter for SEO? --- [14:20] (#t=14:20) What to avoid in your sitemap? ------ [14:23] (#t=14:23) Dynamic user pages and account pages. ------ [14:43] (#t=14:43) Parameter-based URLs. ------ [16:01] (#t=16:01) Redirects, duplicates or disallowed pages. ------ [16:11] (#t=16:11) Unlisted pages. --- [17:07] (#t=17:07) How do you make a sitemap? --- [20:06] (#t=20:06) What to do once you have a sitemap. ------ [20:08] (#t=20:08) Validation. ------ [20:20] (#t=20:20) Submit to search engine. --------- [Bing Webmaster Tools] (https://www.bing.com/webmasters/about) . --------- [Google Search Console] (https://search.google.com/search-console/about) . ------ [22:11] (#t=22:11) Cache them! <a id="Hit_us_up_on_Socials_29"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

08 Jul 2024

23 MINS

23:44

08 Jul 2024

#793

791: LLRT The Serverless Runtime w/ Richard Davison

Scott and Wes chat with Richard Davison from AWS about LLRT, a new runtime tailored specifically for Lambda. They dive into the benefits of using LLRT, challenges with JavaScript in serverless, and why Rust was chosen for its development. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:07] (#t=01:07) Who is Richard Davison? --- [05:11] (#t=05:11) What is LLRT and what’s the motivation for building it? --- [08:25] (#t=08:25) AWS Lambda example. --- [11:20] (#t=11:20) What makes LLRT specifically tailored to Lambda? --- [14:55] (#t=14:55) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [15:22] (#t=15:22) <a href= "https://docs.aws.amazon.com/lambda/latest/dg/lambda-nodejs.html">Node.js in Lambda</a>. --- [16:00] (#t=16:00) What are some challenges that people have with JavaScript in serverless? --- [17:20] (#t=17:20) Lambda memory configuration. --- [19:23] (#t=19:23) Managing cost of compute. --- [21:29] (#t=21:29) Simpler and faster than Node, Bun, Dino, but not a replacement. --- [22:31] (#t=22:31) The benchmarks. --- [27:00] (#t=27:00) Quick.js, the main reason for the performance gains. ------ [Fabrice Bellard QuickJS] (https://bellard.org/quickjs/) . --- [28:03] (#t=28:03) The Quick.js engine. --- [30:35] (#t=30:35) What was the reason behind creating Quick.js? --- [33:46] (#t=33:46) What made you pick Rust for LLRT? --- [36:34] (#t=36:34) Abstractions and the value of speed. --- [39:08] (#t=39:08) The <a href= "https://www.ibm.com/docs/en/sdk-java-technology/8?topic=reference-jit-compiler"> JIT Compiler</a>. --- [42:38] (#t=42:38) Compile cache. --- [43:27] (#t=43:27) De-optimizations. --- [44:59] (#t=44:59) Node.js Compat, what to use and avoid with LLRT. ------ <a href= "https://github.com/awslabs/llrt?tab=readme-ov-file#compatibility-matrix"> GitHub AWS Labs Compatibility Chart</a>. --- [47:52] (#t=47:52) Will you target with [WinterCG] (https://wintercg.org/) spec? --- [50:22] (#t=50:22) <a href= "https://developer.mozilla.org/en-US/docs/Web/API/Streams_API">Streams API</a>. --- [52:06] (#t=52:06) What about WebSockets? --- [53:10] (#t=53:10) Is this going to be promoted from a labs project? --- [54:49] (#t=54:49) Sick Picks + Shameless Plugs. <a id="Sick_Picks_33"></a>Sick Picks --- Richard: [QuickJS Engine] (https://bellard.org/quickjs/) , [JSLinux] (https://bellard.org/jslinux/) . <a id="Shameless_Plugs_37"></a>Shameless Plugs --- Richard: Javascript <a id="Hit_us_up_on_Socials_41"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

05 Jul 2024

56 MINS

56:40

05 Jul 2024

#792

790: State of JS 2023 Reactions

Scott and Wes dive into the 2023 State of JavaScript survey, breaking down the latest trends and pain points in front-end frameworks, build tools, and JavaScript runtimes. Tune in for their hot takes and insights on what’s shaping the JavaScript landscape this year! Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! ------ [State of JS 2023] (https://2023.stateofjs.com/en-US/) . --- [03:04] (#t=03:04) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [03:43] (#t=03:43) New Syntax Swag! ------ [Syntax Swag Store] (https://sentry.shop/) . --- [04:42] (#t=04:42) Front end frameworks. --- [08:30] (#t=08:30) Front end framework pain-points. --- [12:17] (#t=12:17) Metaframeworks. --- [17:45] (#t=17:45) Metaframework pain-points. --- [22:17] (#t=22:17) Build tools. ------<a href= "https://github.com/rolldown/rolldown/discussions/153">Rolldown</a>. --- [24:45] (#t=24:45) Build tool pain-points. --- [25:54] (#t=25:54) JavaScript runtimes. --- [28:19] (#t=28:19) Edge + serverless runtimes. --- [29:30] (#t=29:30) Backend frameworks. --- [33:17] (#t=33:17) Non-JavaScript languages. --- [36:12] (#t=36:12) Hosting service. --- [38:50] (#t=38:50) Usage. --- [40:05] (#t=40:05) Javascript usage. --- [41:03] (#t=41:03) Missing features. --- [45:04] (#t=45:04) Industry sector. --- [47:37] (#t=47:37) The awards. --- [51:34] (#t=51:34) Sick Picks + Shameless Plugs. Sick Picks ---Scott: [Electric Lighter] (https://amzn.to/4eDlxJd) . ---Wes: <a href= "https://www.amazon.com/Original-Monkey-Noodle-Fidget-Toy/dp/B01LBSZQ3U"> Monkey Noodle</a>. Shameless Plugs ---Wes: [Syntax Swag Store] (https://sentry.shop/) . Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

03 Jul 2024

57 MINS

57:29

03 Jul 2024

#791

789: Do More With AI - LLMs With Big Token Counts

Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:31] (#t=01:31) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [02:42] (#t=02:42) What is a token? ------ [Quizgecko GPT-4 Token Counter] (https://quizgecko.com/tools/token-counter) . --- [04:22] (#t=04:22) Context window sometimes called “max tokens”. ------ [OpenAI Platform Models] (https://platform.openai.com/docs/models) . ------ [Claude Models] (https://www.anthropic.com/api#pricing) . --- [10:42] (#t=10:42) Understanding input length. --- [11:59] (#t=11:59) Models + services with big token counts. ------ [Gemini Docs] (https://ai.google.dev/gemini-api/docs/workspace) . --- [13:22] (#t=13:22) Generating open API documentation for a complex API. --- [17:29] (#t=17:29) Generating JSDoc style typing. ------ [Drop-In stolinski GitHub] (https://github.com/stolinski/drop-in) . --- [21:07] (#t=21:07) Generating seed data for a complex database. ------ <a href= "https://github.com/w3cj/bytedash/tree/main/src/db/seeds">bytedash w3cj GitHub</a>. --- [24:34] (#t=24:34) Summarizing 8+ hours of video. --- [29:35] (#t=29:35) Some things we’ve yet to try. --- [31:32] (#t=31:32) What about cost? ------ [Google AI for Developers Cost] (https://ai.google.dev/pricing) . <a id="Hit_us_up_on_Socials_24"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> CJ: [X] (https://twitter.com/CodingGarden) <a href= "https://www.instagram.com/coding.garden/">Instagram</a> <a href= "https://www.youtube.com/@CodingGarden">YouTube</a> <a href= "https://www.twitch.tv/codinggarden">TwitchTV</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

01 Jul 2024

33 MINS

33:43

01 Jul 2024

#790

788: Supabase: Open Source Firebase for Fullstack JS Apps

Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:30] (#t=00:30) Who is Paul Copplestone? --- [01:17] (#t=01:17) Why ‘Supa’ and not ‘Super’? --- [02:26] (#t=02:26) How did Supabase start? ------ [04:29] (#t=04:29) How long from inception to joining [Y Combinator] (https://www.ycombinator.com/) ? ------ [05:10] (#t=05:10) Was it always intended to be open source? --------- [Why Open Source] (https://paul.copplest.one/blog/why-open-source.html) . ------ [07:22] (#t=07:22) How many users chose to self-host? ------ [07:49] (#t=07:49) Open source mindset. --- [08:42] (#t=08:42) Simplicity in design. --- [10:32] (#t=10:32) How do you take Supabase one step beyond the competition? --- [12:35] (#t=12:35) How do you decide which libraries are officially supported vs community maintained? ------ [15:17] (#t=15:17) You don’t need a client library! --- [16:48] (#t=16:48) Edge functions for server-side functionality. --- [18:51] (#t=18:51) The genesis of pgvector. --- [20:59] (#t=20:59) The product strategy. --- [22:25] (#t=22:25) What’s the story behind Supabase’s awesome docs? --- [25:26] (#t=25:26) The tech behind Supabase. ------ [25:39] (#t=25:39) What is the UI built on? ------ [27:33] (#t=27:33) Consolidation follows <a href= "https://supabase.com/blog/how-design-works-at-supabase">kaizen</a>. ------ [28:54] (#t=28:54) What else is involved in the stack? ------ [31:47] (#t=31:47) Authentication. ------ [32:35] (#t=32:35) Storage engine. ------ [33:13] (#t=33:13) For self-hosting. --- [35:46] (#t=35:46) How do you balance business goals with open source? --- [42:01] (#t=42:01) What’s next for Supabase? --- [44:15] (#t=44:15) Supabase’s GA + new features. ------ [Top 10 LAunches from Supabase GA Week] (https://supabase.com/blog/ga-week-summary) . --- [48:24] (#t=48:24) Who runs the <a href= "https://x.com/supabase">X account</a>? --- [50:39] (#t=50:39) Sick Picks + Shameless Plugs. <a id="Sick_Picks_35"></a>Sick Picks --- Paul: [Apple Vision Pro] (https://www.apple.com/apple-vision-pro/) . <a id="Shameless_Plugs_39"></a>Shameless Plugs --- Paul: [PostgreSQL] (https://github.com/postgres) . <a id="Hit_us_up_on_Socials_43"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> CJ: [X] (https://twitter.com/CodingGarden) <a href= "https://www.instagram.com/coding.garden/">Instagram</a> <a href= "https://www.youtube.com/@CodingGarden">YouTube</a> <a href= "https://www.twitch.tv/codinggarden">TwitchTV</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

28 Jun 2024

53 MINS

53:45

28 Jun 2024

#789

787: You Should Try Vue.js

Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:46] (#t=00:46) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [02:24] (#t=02:24) What is <a href= "https://vuejs.org/">Vue</a>? ------ [04:13] (#t=04:13) Similar to Svelte, different from React. --- [05:35] (#t=05:35) How to get started with Vue. ------ [05:43] (#t=05:43) Script tag. ------ [06:01] (#t=06:01) CLI. ------ [07:10] (#t=07:10) The value of an opinionated CLI. --- [10:51] (#t=10:51) Why do you like Vue.js over React or Svelte? ------ [11:03] (#t=11:03) Less boilerplate. ------ [15:24] (#t=15:24) Self-closing tags. ------ [16:09] (#t=16:09) Svelte parsing HTML tags incorrectly. --------- [Hacker News Article] (https://news.ycombinator.com/item?id=39942387) . ------ [17:08] (#t=17:08) Easily adding event handlers to elements. ------ [18:20] (#t=18:20) Conditional rendering. ------ [19:19] (#t=19:19) What is a directive? ------ [20:29] (#t=20:29) ‘Borrowing’ from Angular One. ------ [21:07] (#t=21:07) Styles are built in. ------ [22:11] (#t=22:11) Tailwind for scoping. ------ [26:08] (#t=26:08) State management. ------ [30:28] (#t=30:28) Ref Functions similar to Svelte Runes. ------ [32:03] (#t=32:03) Global state management. ------ [34:24] (#t=34:24) <a href= "https://pinia.vuejs.org/">Pinia</a>. --- [36:18] (#t=36:18) What is the full-stack application platform for Next.js? --- [38:00] (#t=38:00) <a href= "https://nuxt.com/docs/guide/concepts/auto-imports">Nuxt auto-imports</a>. ------ <a href= "https://github.com/yuanchuan/sveltekit-autoimport">sveltekit-autoimport</a>. --- [39:37] (#t=39:37) Creating API functions and server side codes. --- [41:12] (#t=41:12) The future of Vue and compilers for front end frameworks. --- [41:43] (#t=41:43) Vue’s compiler. --- [44:19] (#t=44:19) Are people actually using Vue? --- [46:50] (#t=46:50) <a href= "https://laravel.com/frontend">Laravel</a> and Vue. --- [48:29] (#t=48:29) Sick Picks & Shameless Plugs. [Vue.js: The Documentary] (https://www.youtube.com/watch?v=OrxmtDw4pVI) . <a id="Sick_Picks_39"></a>Sick Picks --- Scott: <a href= "https://www.nike.com/t/jordan-roam-slides-0nD8Dq">Jordan Roam Slides</a>. --- CJ: USB Charging Hub <a id="Shameless_Plugs_44"></a>Shameless Plugs --- Scott: <a href= "https://github.com/orgs/syntaxfm/repositories">Syntax on GitHub</a> --- CJ: [Syntax.fm] (https://syntax.fm/) <a id="Hit_us_up_on_Socials_49"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

26 Jun 2024

53 MINS

53:59

26 Jun 2024

#788

786: What Open Source license should you use?

Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:54] (#t=00:54) Brought to you by [Sentry.io] (https://sentry.io/syntax) . ------ [Sentry Open Source] (https://open.sentry.io/) . ------ <a href= "https://blog.sentry.io/we-just-gave-500-000-dollars-to-open-source-maintainers/#sponsorship-at-scale"> Giving away $500,000 to open source projects</a>. --- [01:56] (#t=01:56) What is open source? --- [03:19] (#t=03:19) This is not legal advice. --- [03:51] (#t=03:51) Source available ≠ open source. ------ [No Permission] (https://choosealicense.com/no-permission/) . --- [06:39] (#t=06:39) The <a href= "https://open.sentry.io/benefits/">benefits</a> of open source. ------ [07:26] (#t=07:26) Educational. ------ [07:52] (#t=07:52) More Secure. ------ [09:32] (#t=09:32) Community-oriented. --------- [Scott’s Habit Path] (https://habitpath.io/landing) --- [11:29] (#t=11:29) Types of licenses. ------ [12:09] (#t=12:09) Permissive licenses. --------- [12:26] (#t=12:26) MIT License. --------- [14:37] (#t=14:37) Apache 2.0 license. ------ [15:31] (#t=15:31) Copy Left licenses. --------- [15:58] (#t=15:58) GNU GPLv3. ------ [18:16] (#t=18:16) Copy Left + permissive. --------- [18:23] (#t=18:23) (Mozilla Public License) MPL. ------ [19:31] (#t=19:31) Business licenses. --------- [19:35] (#t=19:35) <a href= "https://fsl.software/">Functional Source License</a>. --------- [23:16] (#t=23:16) Companies using BUSL. --------- [24:41] (#t=24:41) Server Side Public License (<a href= "https://www.mongodb.com/legal/licensing/server-side-public-license">SSPL</a>). --- [26:56] (#t=26:56) Choosing and acknowledging licenses. --- [29:13] (#t=29:13) Applying a license to your directory. <a id="Hit_us_up_on_Socials_32"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

24 Jun 2024

30 MINS

30:51

24 Jun 2024

#787

785: What’s Next for Next.js with Tim Neutkens

Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:30] (#t=00:30) What does the [ React Compiler] (https://rc.nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) do? --- [05:04] (#t=05:04) Will React Compiler help with managing Context? --- [06:39] (#t=06:39) What happens if you’re not using a React Compiler? ------ [react.dev Playground] (https://playground.react.dev/) . --- [09:30] (#t=09:30) Will this work on any NextJS version? --- [12:18] (#t=12:18) What are React Server Components? --- [16:28] (#t=16:28) Shipping all the data inside an encapsulated component. --- [20:17] (#t=20:17) Clearing up the frustrations around retrofitting server components. --- [23:13] (#t=23:13) Handing migration. --- [28:30] (#t=28:30) Is this just a fetch request with props? --- [36:41] (#t=36:41) How closely are the NextJS and React teams working? --- [41:53] (#t=41:53) Will we ever get Async Client Components? --- [43:52] (#t=43:52) Async Local Storage API. --- [45:31] (#t=45:31) <a href= "https://nextjs.org/docs/architecture/turbopack">Turbopack</a>. --- [57:51] (#t=57:51) Sick Picks & Shameless Plugs. <a id="Sick_Picks_21"></a>Sick Picks --- Tim: <a href= "https://tv.apple.com/us/room/apple-tv-sci-fi/edt.item.650b3154-accd-4b87-9f89-6bde117cee31"> Apple TV Sci-Fi</a>. <a id="Shameless_Plugs_25"></a>Shameless Plugs --- Tim: <a href= "https://nextjs.org/docs/architecture/turbopack">Turbopack</a>, [Next.js 15 RC] (https://nextjs.org/blog/next-15-rc) , <a href= "https://docs.sentry.io/platforms/javascript/guides/nextjs/">Sentry NextJS</a>. <a id="Hit_us_up_on_Socials_29"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

21 Jun 2024

1 HR 03 MINS

1:03:16

21 Jun 2024

#786

784: Logging × Blogging × Testing × Freelancing

In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:13] (#t=00:13) How to submit a question for future episodes. ------ [Potluck Questions] (https://syntax.fm/potluck) . --- [02:46] (#t=02:46) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [03:21] (#t=03:21) Logging from a site. --- [08:39] (#t=08:39) Blogging in 2024. --- [11:49] (#t=11:49) Sharing website environmental data. ------ [Green Web Foundation] (https://www.thegreenwebfoundation.org/) . ------ [Website Carbon Calculator] (https://www.websitecarbon.com/) . ------ [Syntax Site Results] (https://www.websitecarbon.com/website/syntax-fm/) . ------ [Scott’s Site Results] (https://www.websitecarbon.com/website/tolin-ski/) . --- [17:38] (#t=17:38) Using LangChain when working with LLMs. --- [21:03] (#t=21:03) CSS Hyphens and Overflow-Wrap. ------ <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#browser_compatibility"> Hyphens Browser Compatibility</a>. ------ <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap">Overflow-Wrap</a>. --- [25:52] (#t=25:52) Similarities between WASM, JVM and .NET. --- [27:25] (#t=27:25) Writing unit testing and integration testing. --- [32:00] (#t=32:00) How can new parents stay current on web development trends? --- [34:47] (#t=34:47) Working globally as a freelance developer. --- [37:26] (#t=37:26) Scott’s audio setup. Why audio interfaces have DSP built in. ------ [ChaseBliss Pedal] (https://www.chasebliss.com/lossy) . --- [43:04] (#t=43:04) UI libraries for synth/audio plugins. --- [44:02] (#t=44:02) CSS module scripts. ------ <a href= "https://daverupert.com/2021/08/css-modules-in-css-modules/">CSS Modules in CSS Module Scripts</a>. --- [48:39] (#t=48:39) Sick Picks + Shameless Plugs. <a id="Sick_Picks_30"></a>Sick Picks --- Scott: [Deep Cover Podcast] (https://www.pushkin.fm/podcasts/deep-cover) . --- Wes: [Pressure Washer Surface Cleaner] (https://amzn.to/4dwUIpw) . <a id="Shameless_Plugs_35"></a>Shameless Plugs --- Wes: [Syntax.fm/videos] (https://syntax.fm/videos) . <a id="Hit_us_up_on_Socials_39"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

19 Jun 2024

55 MINS

55:36

19 Jun 2024

#785

783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [02:07] (#t=02:07) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [02:33] (#t=02:33) The file system API. --- [03:08] (#t=03:08) The Cache API. ------ <a href= "https://developer.mozilla.org/en-US/docs/Web/API/Cache">Mozilla Developer Cache API</a>. ------ [Airhorner, a good example] (https://airhorner.com/) . --- [04:24] (#t=04:24) Size restrictions per browser. --- [07:04] (#t=07:04) How tools like [Riverside.fm] (http://Riverside.fm) use IndexedDB. --- [08:47] (#t=08:47) Data eviction (too much data). --- [10:16] (#t=10:16) What we’re using it for and how. --- [12:17] (#t=12:17) How do we do this in code? --- [14:37] (#t=14:37) Creating the cache. --- [16:18] (#t=16:18) Retrieving from cache manually. --- [19:00] (#t=19:00) Adding metadata. --- [19:37] (#t=19:37) A live debugging. --- [22:39] (#t=22:39) Persistent storage. ------ [web.dev Persistent Storage] (https://web.dev/articles/persistent-storage) . ------ <a href= "https://hackernoon.com/persistent-data-what-working-with-the-storage-api-looks-like"> Hackernoon Persistent Storage</a>. --- [26:10] (#t=26:10) Media score. ------ [Chrome Autoplay Policy] (https://developer.chrome.com/blog/autoplay) . <a id="Hit_us_up_on_Socials_25"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

17 Jun 2024

31 MINS

31:07

17 Jun 2024

#784

782: The Developer’s Guide To Fonts with Stephen Nixon

Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:57] (#t=00:57) Who is Stephen Nixon? ------ [Process Type Foundry] (https://processtypefoundry.com/) . ------ [Mark Simonson Proxima Nova] (https://www.marksimonson.com/fonts/view/proxima-nova) . --- [05:42] (#t=05:42) What is a type foundry exactly? ------ [ArrowType] (https://www.arrowtype.com/) . --- [09:09] (#t=09:09) Font / type making. ------ [09:15] (#t=09:15) How do you make a font? --------- [RoboFont] (https://robofont.com/) . --------- [Glyphs] (https://glyphsapp.com/) . ------ [11:58] (#t=11:58) Fonts vs typefaces. ------ [13:02] (#t=13:02) How many fonts have you made? ------ [14:17] (#t=14:17) What are variable fonts and how can web developers utilize them? ------ [19:22] (#t=19:22) Animating fonts. --------- [Variable Fonts] (https://variablefonts.io/) . --------- [Recursive] (https://www.recursive.design/) . ------ [20:28] (#t=20:28) Do you code your demo sites yourself? ------ [21:50] (#t=21:50) Are variable fonts more complex to design (and develop). --------- [Matthew Carter Adobe Fonts] (https://fonts.adobe.com/designers/matthew-carter) , <a href= "https://en.wikipedia.org/wiki/Matthew_Carter">Matthew Carter Wiki</a>. --------- <a href= "https://typedrawers.com/discussion/3292/working-with-multiple-masters"> Multiple Masters Variable Fonts</a>. --------- [Just My Type] (https://www.simongarfield.com/books/just-my-type/) . ------ [27:03] (#t=27:03) Hand painted fonts. --------- [House industries] (https://housefonts.com/) . --------- [Golden Sign Co] (https://goldensignco.tumblr.com/everythingelse) . --------- [Gen Ramirez] (https://genramirez.com/) . ------ [29:39] (#t=29:39) Creating a monospace font. ------ [32:19] (#t=32:19) Creating fonts with dyslexia accessibility in mind. --- [37:58] (#t=37:58) Typography for the web. ------ [38:29] (#t=38:29) What are some 80/20 rules developers can employ to make more visually appealing typography? ------ [40:58] (#t=40:58) Type scale calculations. --------- [Scott’s Fluid Type Calculator] (https://fluid-type.tolin.ski/) . ------ [45:42] (#t=45:42) What are your biggest web type pet peeves. ------ [48:46] (#t=48:46) Do you have any favorite type tools? --------- [Wakamifondue] (https://wakamaifondue.com/) . --------- <a href= "https://pixelambacht.nl/2019/fixing-variable-font-inheritance/">Fixing Variable Font Inheritance</a>. --- [50:34] (#t=50:34) Supper Club Questions. ------ [50:44] (#t=50:44) How do you feel about ligatures in coding fonts? --------- <a href= "https://practicaltypography.com/ligatures-in-programming-fonts-hell-no.html"> Ligatures In Programming Fonts Hell No</a>. ------ [55:11] (#t=55:11) What font do you use? --------- [Name Sans v05] (https://blog.arrowtype.com/name-sans-v05/) . --------- <a href= "https://store.arrowtype.com/fonts/name-mono">Name-Mono</a>. ------ [56:43] (#t=56:43) What is your favorite font of all time? --------- [Typotheque] (https://www.typotheque.com/) . --------- [Soehne] (https://klim.co.nz/collections/soehne/) . --------- [Grillitype Typefaces] (https://www.grillitype.com/typefaces) . --------- [Phnotype] (https://ohnotype.co/) . --- [58:49] (#t=58:49) Sick Picks + Shameless Plugs. <a id="Sick_Picks_52"></a>Sick Picks --- Stephen: <a href= "https://en.wikipedia.org/wiki/Children_of_Time_(novel)">Children of Time</a>, <a href= "https://www.amazon.com/York-Times-Cooking-No-Recipe-Recipes/dp/1984858475"> No-Recipe Recipes</a>. <a id="Shameless_Plugs_56"></a>Shameless Plugs --- Stephen: [ArrowType] (https://www.arrowtype.com/) , [Skewing Fonts] (https://www.youtube.com/shorts/2o-XTyB_8uw) . <a id="Hit_us_up_on_Socials_60"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

14 Jun 2024

1 HR 02 MINS

1:02:10

14 Jun 2024

#783

781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:06] (#t=01:06) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [01:49] (#t=01:49) Today’s format. --- [02:23] (#t=02:23) Beginner vs advanced TypeScript. ------ [DHH Tweet] (https://x.com/dhh/status/1788579873969373603) . --- [09:23] (#t=09:23) Does Sveltekit replace Svelte with Astro? --- [13:09] (#t=13:09) Handling multiple languages. --- [19:52] (#t=19:52) Falling out of love with React. --- [25:53] (#t=25:53) Shipping private packages via NPM. ------ <a href= "https://docs.npmjs.com/cli/v10/commands/npm-install">npm-install</a>. ------ <a href= "https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry"> Working with the npm registry</a>. --- [29:00] (#t=29:00) How do you feel about importing packages from a URL? --- [30:36] (#t=30:36) VueJS vs Svelte. --- [36:15] (#t=36:15) Leetcode type interview questions. --- [41:58] (#t=41:58) Learning a new language for personal growth. --- [46:21] (#t=46:21) Always starting, never finishing. ------ [Scott’s Fluid Type Calculator] (https://fluid-type.tolin.ski/) . --- [50:23] (#t=50:23) Code quality vs tackling tickets. --- [55:36] (#t=55:36) Sick Picks + Shameless Plugs. <a id="Sick_Picks_24"></a>Sick Picks --- Scott: <a href= "https://github.com/sindresorhus/quick-look-plugins">Quick Look Plugins</a>. --- CJ: <a href= "https://electronics.sony.com/audio/headphones/truly-wireless-earbuds/p/wfc700n-b"> Sony WFC700n-b</a>. <a id="Shameless_Plugs_29"></a>Shameless Plugs --- Scott: [Syntax on YouTube] (https://youtube.com/@syntaxfm) <a id="Hit_us_up_on_Socials_33"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

12 Jun 2024

1 HR 01 MINS

1:01:01

12 Jun 2024

#782

780: Cloud Storage: Bandwidth, Storage and BIG ZIPS

Today, Scott and Wes dive into cloud storage solutions—why you might need them, how they use them, and what you need to know about the big players, fees, and more. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:14] (#t=01:14) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [02:05] (#t=02:05) Why you might need a cloud storage provider. --- [03:07] (#t=03:07) How we use cloud storage. ------ [Dropshare] (https://dropshare.app/) . --- [08:16] (#t=08:16) Why you may need larger storage. --- [09:49] (#t=09:49) The big players in this space. ------ [Amazon S3] (https://aws.amazon.com/s3/) . ------ [Cloudflare R2] (https://developers.cloudflare.com/r2/) . ------ [Backblaze B2] (https://www.backblaze.com/cloud-storage) . ------ [Synology C2] (https://c2.synology.com/en-us) . ------ [Google Cloud Storage] (https://cloud.google.com/storage) . ------ <a href= "https://learn.microsoft.com/en-us/azure/storage/common/storage-introduction"> Microsoft Azure</a>. ------ [Digital Ocean Spaces] (https://www.digitalocean.com/products/spaces) . ------ [Oracle] (https://www.oracle.com/ca-en/storage/) . ------ [Bunny.net] (https://bunny.net/) . ------ [Amazon S3 Glacier] (https://aws.amazon.com/s3/storage-classes/glacier/) . --- [14:34] (#t=14:34) Storage fees. --- [18:31] (#t=18:31) Why so cheap? --- [20:49] (#t=20:49) Bandwidth (egress). ------ <a href= "https://www.cloudflare.com/en-ca/bandwidth-alliance/">Cloudflare Bandwidth Alliance</a>. --- [26:46] (#t=26:46) Operation fees - costs money. <a id="Hit_us_up_on_Socials_27"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

10 Jun 2024

29 MINS

29:03

10 Jun 2024

#781

779: Why SQLite is Taking Over with Brian Holt & Marco Bambini

Scott and CJ dive into the world of SQLite Cloud with special guests Brian Holt and Marco Bambini. They explore why SQLite is gaining traction, its unique features, and the misconceptions surrounding its use—let’s get into it! <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:20] (#t=01:20) Who is Brian Holt? --- [02:26] (#t=02:26) Who is Marco Bambini? --- [05:12] (#t=05:12) Why are people starting to talk so much about SQLite now? --- [08:47] (#t=08:47) What makes SQLite special or interesting? --- [09:46] (#t=09:46) What is a big misconception about SQLite? --- [11:13] (#t=11:13) Installed by default in operating systems. --- [12:03] (#t=12:03) A perception that SQLite is intended for single users. --- [13:36] (#t=13:36) Convincing developers it’s a full-featured solution. --- [15:11] (#t=15:11) What does SQLite do better than [Postgres] (https://www.postgresql.org/) or [MySQL] (https://www.mysql.com/) ? --- [17:30] (#t=17:30) SQLite Cloud & local first features. --- [20:38] (#t=20:38) Where does SQLite store the offline information? --- [23:08] (#t=23:08) Are you typically reaching for ORMs? --- [25:00] (#t=25:00) What is <a href= "https://sqlitecloud.io/">SQLite Cloud</a>? --- [27:29] (#t=27:29) What makes for an approachable software? --- [29:18] (#t=29:18) What make SQLite cloud different from other hosted SQLite options? --- [32:13] (#t=32:13) Is SQLite still evolving? --- [34:40] (#t=34:40) What about branching? --- [37:37] (#t=37:37) What is the GA timeline? --- [40:04] (#t=40:04) How does SQLite actually work? --- [41:19] (#t=41:19) Questions about security. --- [44:28] (#t=44:28) But does it scale? --- [45:52] (#t=45:52) Sick Picks + Shameless Plugs. <a id="Sick_Picks_28"></a>Sick Picks Brian: [Trainer Road] (https://www.trainerroad.com/) Marco: Tennis <a id="Shameless_Plugs_33"></a>Shameless Plugs --- Brian: [SQLite Cloud] (https://sqlitecloud.io/) , <a href= "https://frontendmasters.com/courses/complete-intro-containers/">Frontend Masters - Containers</a>. <a id="Hit_us_up_on_Socials_37"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

07 Jun 2024

50 MINS

50:31

07 Jun 2024

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

#802

800: Why the jQuery Creator Uses React and Typescript - John Resig

#801

799: Hot New and Under-Utilized Browser APIs

#800

798: Self Hosting: Reverse Proxy Servers

#799

797: Drizzle: The TypeScript SQL ORM

#798

796: Do We Need JS Frameworks × Are You Over-Engineering? × Webview vs Native

#797

795: Hosting Private Fonts on the Edge With Cloudflare

#796

794: Prettier JavaScript with Vjeux

#795

793: The Local First Landscape

#794

792: Perfect Sitemaps for SEO

#793

791: LLRT The Serverless Runtime w/ Richard Davison

#792

790: State of JS 2023 Reactions

#791

789: Do More With AI - LLMs With Big Token Counts

#790

788: Supabase: Open Source Firebase for Fullstack JS Apps

#789

787: You Should Try Vue.js

#788

786: What Open Source license should you use?

#787

785: What’s Next for Next.js with Tim Neutkens

#786

784: Logging × Blogging × Testing × Freelancing

#785

783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

#784

782: The Developer’s Guide To Fonts with Stephen Nixon

#783

781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

#782

780: Cloud Storage: Bandwidth, Storage and BIG ZIPS

#781

779: Why SQLite is Taking Over with Brian Holt & Marco Bambini