Syntax &#8211; Tasty Web Development Treats

CJ: X Instagram YouTube TwitchTV

788: Supabase: Open Source Firebase for Fullstack JS Apps Jun 28, 2024

Show notes

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.

Show Notes

00:00 Welcome to Syntax!
00:30 Who is Paul Copplestone?
01:17 Why ‘Supa’ and not ‘Super’?
02:26 How did Supabase start?
- 04:29 How long from inception to joining Y Combinator?
- 05:10 Was it always intended to be open source?
  - Why Open Source.
- 07:22 How many users chose to self-host?
- 07:49 Open source mindset.
08:42 Simplicity in design.
10:32 How do you take Supabase one step beyond the competition?
12:35 How do you decide which libraries are officially supported vs community maintained?
- 15:17 You don’t need a client library!
16:48 Edge functions for server-side functionality.
18:51 The genesis of pgvector.
20:59 The product strategy.
22:25 What’s the story behind Supabase’s awesome docs?
25:26 The tech behind Supabase.
- 25:39 What is the UI built on?
- 27:33 Consolidation follows kaizen.
- 28:54 What else is involved in the stack?
- 31:47 Authentication.
- 32:35 Storage engine.
- 33:13 For self-hosting.
35:46 How do you balance business goals with open source?
42:01 What’s next for Supabase?
44:15 Supabase’s GA + new features.
- Top 10 LAunches from Supabase GA Week.
48:24 Who runs the X account?
50:39 Sick Picks + Shameless Plugs.

Sick Picks

Paul: Apple Vision Pro.

Shameless Plugs

Paul: PostgreSQL.

Hit us up on Socials!

CJ: X Instagram YouTube TwitchTV

787: You Should Try Vue.js Jun 26, 2024

Show notes

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.

Show Notes

00:00 Welcome to Syntax!
00:46 Brought to you by Sentry.io.
02:24 What is Vue?
- 04:13 Similar to Svelte, different from React.
05:35 How to get started with Vue.
- 05:43 Script tag.
- 06:01 CLI.
- 07:10 The value of an opinionated CLI.
10:51 Why do you like Vue.js over React or Svelte?
- 11:03 Less boilerplate.
- 15:24 Self-closing tags.
- 16:09 Svelte parsing HTML tags incorrectly.
  - Hacker News Article.
- 17:08 Easily adding event handlers to elements.
- 18:20 Conditional rendering.
- 19:19 What is a directive?
- 20:29 ‘Borrowing’ from Angular One.
- 21:07 Styles are built in.
- 22:11 Tailwind for scoping.
- 26:08 State management.
- 30:28 Ref Functions similar to Svelte Runes.
- 32:03 Global state management.
- 34:24 Pinia.
36:18 What is the full-stack application platform for Next.js?
38:00 Nuxt auto-imports.
- sveltekit-autoimport.
39:37 Creating API functions and server side codes.
41:12 The future of Vue and compilers for front end frameworks.
41:43 Vue’s compiler.
44:19 Are people actually using Vue?
46:50 Laravel and Vue.
48:29 Sick Picks & Shameless Plugs.

Vue.js: The Documentary.

Sick Picks

Scott: Jordan Roam Slides.
CJ: USB Charging Hub

Shameless Plugs

Scott: Syntax on GitHub
CJ: Syntax.fm

Hit us up on Socials!

786: What Open Source license should you use? Jun 24, 2024

Show notes

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.

Show Notes

00:00 Welcome to Syntax!
00:54 Brought to you by Sentry.io.
- Sentry Open Source.
- Giving away $500,000 to open source projects.
01:56 What is open source?
03:19 This is not legal advice.
03:51 Source available ≠ open source.
- No Permission.
06:39 The benefits of open source.
- 07:26 Educational.
- 07:52 More Secure.
- 09:32 Community-oriented.
  - Scott’s Habit Path
11:29 Types of licenses.
- 12:09 Permissive licenses.
  - 12:26 MIT License.
  - 14:37 Apache 2.0 license.
- 15:31 Copy Left licenses.
  - 15:58 GNU GPLv3.
- 18:16 Copy Left + permissive.
  - 18:23 (Mozilla Public License) MPL.
- 19:31 Business licenses.
  - 19:35 Functional Source License.
  - 23:16 Companies using BUSL.
  - 24:41 Server Side Public License (SSPL).
26:56 Choosing and acknowledging licenses.
29:13 Applying a license to your directory.

Hit us up on Socials!

785: What’s Next for Next.js with Tim Neutkens Jun 21, 2024

Show notes

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.

Show Notes

00:00 Welcome to Syntax!
00:30 What does the React Compiler do?
05:04 Will React Compiler help with managing Context?
06:39 What happens if you’re not using a React Compiler?
- react.dev Playground.
09:30 Will this work on any NextJS version?
12:18 What are React Server Components?
16:28 Shipping all the data inside an encapsulated component.
20:17 Clearing up the frustrations around retrofitting server components.
23:13 Handing migration.
28:30 Is this just a fetch request with props?
36:41 How closely are the NextJS and React teams working?
41:53 Will we ever get Async Client Components?
43:52 Async Local Storage API.
45:31 Turbopack.
57:51 Sick Picks & Shameless Plugs.

Sick Picks

Tim: Apple TV Sci-Fi.

Shameless Plugs

Tim: Turbopack, Next.js 15 RC, Sentry NextJS.

Hit us up on Socials!

784: Logging × Blogging × Testing × Freelancing Jun 19, 2024

Show notes

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.

Show Notes

00:00 Welcome to Syntax!
00:13 How to submit a question for future episodes.
- Potluck Questions.
02:46 Brought to you by Sentry.io.
03:21 Logging from a site.
08:39 Blogging in 2024.
11:49 Sharing website environmental data.
17:38 Using LangChain when working with LLMs.
21:03 CSS Hyphens and Overflow-Wrap.
- Hyphens Browser Compatibility.
- Overflow-Wrap.
25:52 Similarities between WASM, JVM and .NET.
27:25 Writing unit testing and integration testing.
32:00 How can new parents stay current on web development trends?
34:47 Working globally as a freelance developer.
37:26 Scott’s audio setup. Why audio interfaces have DSP built in.
- ChaseBliss Pedal.
43:04 UI libraries for synth/audio plugins.
44:02 CSS module scripts.
- CSS Modules in CSS Module Scripts.
48:39 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Deep Cover Podcast.
Wes: Pressure Washer Surface Cleaner.

Shameless Plugs

Wes: Syntax.fm/videos.

Hit us up on Socials!

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

Show notes

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.

Show Notes

00:00 Welcome to Syntax!
02:07 Brought to you by Sentry.io.
02:33 The file system API.
03:08 The Cache API.
- Mozilla Developer Cache API.
- Airhorner, a good example.
04:24 Size restrictions per browser.
07:04 How tools like Riverside.fm use IndexedDB.
08:47 Data eviction (too much data).
10:16 What we’re using it for and how.
12:17 How do we do this in code?
14:37 Creating the cache.
16:18 Retrieving from cache manually.
19:00 Adding metadata.
19:37 A live debugging.
22:39 Persistent storage.
- web.dev Persistent Storage.
- Hackernoon Persistent Storage.
26:10 Media score.
- Chrome Autoplay Policy.

Hit us up on Socials!

Scott:X Instagram Tiktok LinkedIn Threads

782: The Developer’s Guide To Fonts with Stephen Nixon Jun 14, 2024

Show notes

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.

Show Notes

00:00 Welcome to Syntax!
00:57 Who is Stephen Nixon?
- Process Type Foundry.
- Mark Simonson Proxima Nova.
05:42 What is a type foundry exactly?
- ArrowType.
09:09 Font / type making.
- 09:15 How do you make a font?
  - RoboFont.
  - Glyphs.
- 11:58 Fonts vs typefaces.
- 13:02 How many fonts have you made?
- 14:17 What are variable fonts and how can web developers utilize them?
- 19:22 Animating fonts.
  - Variable Fonts.
  - Recursive.
- 20:28 Do you code your demo sites yourself?
- 21:50 Are variable fonts more complex to design (and develop).
- 27:03 Hand painted fonts.
- 29:39 Creating a monospace font.
- 32:19 Creating fonts with dyslexia accessibility in mind.
37:58 Typography for the web.
- 38:29 What are some 80/20 rules developers can employ to make more visually appealing typography?
- 40:58 Type scale calculations.
  - Scott’s Fluid Type Calculator.
- 45:42 What are your biggest web type pet peeves.
- 48:46 Do you have any favorite type tools?
  - Wakamifondue.
  - Fixing Variable Font Inheritance.
50:34 Supper Club Questions.
- 50:44 How do you feel about ligatures in coding fonts?
  - Ligatures In Programming Fonts Hell No.
- 55:11 What font do you use?
  - Name Sans v05.
  - Name-Mono.
- 56:43 What is your favorite font of all time?
  - Typotheque.
  - Soehne.
  - Grillitype Typefaces.
  - Phnotype.
58:49 Sick Picks + Shameless Plugs.

Sick Picks

Stephen: Children of Time, No-Recipe Recipes.

Shameless Plugs

Stephen: ArrowType, Skewing Fonts.

Hit us up on Socials!

Scott:X Instagram Tiktok LinkedIn Threads

781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode Jun 12, 2024

Show notes

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.

Show Notes

00:00 Welcome to Syntax!
01:06 Brought to you by Sentry.io.
01:49 Today’s format.
02:23 Beginner vs advanced TypeScript.
- DHH Tweet.
09:23 Does Sveltekit replace Svelte with Astro?
13:09 Handling multiple languages.
19:52 Falling out of love with React.
25:53 Shipping private packages via NPM.
- npm-install.
- Working with the npm registry.
29:00 How do you feel about importing packages from a URL?
30:36 VueJS vs Svelte.
36:15 Leetcode type interview questions.
41:58 Learning a new language for personal growth.
46:21 Always starting, never finishing.
- Scott’s Fluid Type Calculator.
50:23 Code quality vs tackling tickets.
55:36 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Quick Look Plugins.
CJ: Sony WFC700n-b.

Shameless Plugs

Scott: Syntax on YouTube

Hit us up on Socials!

Scott:X Instagram Tiktok LinkedIn Threads