Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

The New Syntax Site × Ingest, Stack, AI and more

Syntax - Tasty Web Development Treats

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

<p class="has-line-data" data-line-start="0" data-line-end="1">In this episode of Syntax, Wes and Scott talk through the work in progress on the new Syntax website, how to tackle all the moving parts, what stack they picked, AI, and more.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:10">00:10</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:56">00:56</a></strong> Leaky roofs</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:18">02:18</a></strong> How we divided the workload for the new Syntax site</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://github.com/syntaxfm/website/issues">Issues of Syntax v2</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://github.com/syntaxfm/website/tree/v2">V2 of the website</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=02:55">02:55</a></strong> Dark mode vs light mode</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=04:46">04:46</a></strong> Our project management stack</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=06:36">06:36</a></strong> High school dances</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=08:36">08:36</a></strong> Tech stack for Syntax v2</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://www.prisma.io/">Prisma | Next-generation ORM for Node.js & TypeScript</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://planetscale.com/">PlanetScale: The world’s most advanced database platform</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=16:44">16:44</a></strong> PostCSS and Sveltekit</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://kit.svelte.dev/">SvelteKit • Web development, streamlined</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://vercel.com/">Vercel: Develop. Preview. Ship. For the best frontend teams</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=17:57">17:57</a></strong> Auth</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps"> Authorizing OAuth Apps</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://syntax.fm/show/599/oauth-apis-explained">oAuth APIs Explained — Syntax Podcast 599</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=23:15">23:15</a></strong> Transcription</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://otter.ai/">Otter.ai - Voice Meeting Notes & Real-time Transcription</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="https://aws.amazon.com/transcribe/">Amazon Transcribe – Speech to Text - AWS</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://openai.com/research/whisper">Introducing Whisper</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://github.com/m-bain/whisperX">WhisperX: Automatic Speech Recognition with Word-level Timestamps (& Diarization)</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://cloud.google.com/speech-to-text">Speech-to-Text: Automatic Speech Recognition Google Cloud</a></li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://deepgram.com/">Deepgram: World’s Most Powerful Speech-to-Text API</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=35:54">35:54</a></strong> Theming system</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://www.csszengarden.com/">CSS Zen Garden: The Beauty of CSS Design</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=43:38">43:38</a></strong> AI Shownotes</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=53:02">53:02</a></strong> Ingest process</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=00:24">00:24</a></strong> Markdown as the source of truth</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=01:50">01:50</a></strong> AI Embeddings</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://www.pinecone.io/">Vector Database for Vector Search | Pinecone</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://www.netlify.com/blog/ask-netlify-ai-powered-docs/">Introducing Ask Netlify: a new way of engaging with Netlify Docs with AI-Powered interactions</a></li> <li class="has-line-data" data-line-start="36" data-line-end="38"> <strong><a href="#t=09:22:24">09:22:24</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="38" data-line-end="39"> <a id="_SIIIIICK__PIIIICKS__38"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="40" data-line-end="41"> Scott: <a href="https://www.imdb.com/title/tt22074164/">Jury Duty</a></li> <li class="has-line-data" data-line-start="41" data-line-end="43"> Wes: <a href= "https://tv.apple.com/us/show/ted-lasso/umc.cmc.vtoh0mn0xn7t3c643xqonfzy"> Ted Lasso</a></li> </ul> <h2 class="code-line" data-line-start="43" data-line-end="44"> <a id="Shameless_Plugs_43"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="45" data-line-end="46"> Scott: <a href="https://discord.gg/W5y68HMfZV">Syntax Discord</a></li> <li class="has-line-data" data-line-start="46" data-line-end="48"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="48" data-line-end="49"> <a id="Tweet_us_your_tasty_treats_48"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://bsky.app/profile/syntax.fm/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this episode of Syntax, Wes and Scott talk through the work in progress on the new Syntax website, how to tackle all the moving parts, what stack they picked, AI, and more.
 Show Notes  00:10 Welcome
 00:56 Leaky roofs
 02:18 How we divided the workload for the new Syntax site
 Issues of Syntax v2

 V2 of the website

 02:55 Dark mode vs light mode
 04:46 Our project management stack
 06:36 High school dances
 08:36 Tech stack for Syntax v2
 Prisma | Next-generation ORM for Node.js & TypeScript

 PlanetScale: The world’s most advanced database platform

 16:44 PostCSS and Sveltekit
 SvelteKit • Web development, streamlined

 Vercel: Develop. Preview. Ship. For the best frontend teams

 17:57 Auth
  Authorizing OAuth Apps

 oAuth APIs Explained — Syntax Podcast 599

 23:15 Transcription
 Otter.ai - Voice Meeting Notes & Real-time Transcription

 Amazon Transcribe – Speech to Text - AWS

 Introducing Whisper

 WhisperX: Automatic Speech Recognition with Word-level Timestamps (& Diarization)

 Speech-to-Text: Automatic Speech Recognition Google Cloud

 Deepgram: World’s Most Powerful Speech-to-Text API

 35:54 Theming system
 CSS Zen Garden: The Beauty of CSS Design

 43:38 AI Shownotes
 53:02 Ingest process
 00:24 Markdown as the source of truth
 01:50 AI Embeddings
 Vector Database for Vector Search | Pinecone

 Introducing Ask Netlify: a new way of engaging with Netlify Docs with AI-Powered interactions

 09:22:24 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Jury Duty

 Wes: Ted Lasso

  Shameless Plugs  Scott: Syntax Discord

 Wes: Wes Bos Tutorials

  Tweet us your tasty treats  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets
 Wes Bos on Bluesky

 Scott on Bluesky

 Syntax on Bluesky

Aplikace Youradio Talk

The New Syntax Site × Ingest, Stack, AI and more

Poslechněte si podcast