Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

686: We Need Your Help With The Secret Sauce

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.

In this Hasty Treat, Scott and Wes talk about the secret sauce that’s going into the creation of the new <a href= "http://Syntax.fm">Syntax.fm</a> website including the styling, search, tooling, database, hosting, and more. <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"> <a href="#t=00:21:15">00:21:15</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:10:11">01:10:11</a> Where did the name “Secret Sauce” come from?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=03:16:00">03:16:00</a> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=04:32:11">04:32:11</a> What <a href= "http://Syntax.fm">Syntax.fm</a> is built in?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://kit.svelte.dev/">SvelteKit • Web development, streamlined</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href= "https://github.com/muxinc/media-chrome">muxinc/media-chrome: Custom elements (web components) for making audio and video player controls that look great in your website or app.</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://www.media-chrome.org/">Media Chrome Docs</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=07:24:01">07:24:01</a> How we’re doing search</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://www.npmjs.com/package/flexsearch">flexsearch - npm</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=12:22:20">12:22:20</a> Styling</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://prettier.io/">Prettier · Opinionated Code Formatter</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://postcss.org/">PostCSS - a tool for transforming CSS with JavaScript</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=16:00:05">16:00:05</a> Tooling</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://pnpm.io/">Fast, disk space efficient package manager | pnpm</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=18:55:11">18:55:11</a> Database</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://www.prisma.io/">Prisma | Next-generation ORM for Node.js & TypeScript</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=21:11:11">21:11:11</a> Services</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://deepgram.com/">Deepgram</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://openai.com/">OpenAI</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href= "https://www.anthropic.com/index/introducing-claude">Anthropic \ Introducing Claude</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=24:34:11">24:34:11</a> Hosting</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://vercel.com/">Vercel: Develop. Preview. Ship. For the best frontend teams</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://planetscale.com/">PlanetScale: The world’s most advanced database platform — PlanetScale</a></li> <li class="has-line-data" data-line-start="27" data-line-end="29"> <a href="https://www.cloudflare.com/">Cloudflare - The Web Performance & Security Company | Cloudflare</a></li> </ul> <h2 class="code-line" data-line-start="29" data-line-end="30"> <a id="Tweet_us_your_tasty_treats_29"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this Hasty Treat, Scott and Wes talk about the secret sauce that’s going into the creation of the new Syntax.fm website including the styling, search, tooling, database, hosting, and more.
 Show Notes  00:21:15 Welcome
 01:10:11 Where did the name “Secret Sauce” come from?
 03:16:00 Syntax Brought to you by Sentry
 04:32:11 What Syntax.fm is built in?
 SvelteKit • Web development, streamlined

 muxinc/media-chrome: Custom elements (web components) for making audio and video player controls that look great in your website or app.

 Media Chrome Docs

 07:24:01 How we’re doing search
 flexsearch - npm

 12:22:20 Styling
 Prettier · Opinionated Code Formatter

 PostCSS - a tool for transforming CSS with JavaScript

 16:00:05 Tooling
 Fast, disk space efficient package manager | pnpm

 18:55:11 Database
 Prisma | Next-generation ORM for Node.js & TypeScript

 21:11:11 Services
 Deepgram

 OpenAI

 Anthropic \ Introducing Claude

 24:34:11 Hosting
 Vercel: Develop. Preview. Ship. For the best frontend teams

 PlanetScale: The world’s most advanced database platform — PlanetScale

 Cloudflare - The Web Performance & Security Company | Cloudflare

  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

686: We Need Your Help With The Secret Sauce

Poslechněte si podcast