Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Our Stacks Explained

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 tech stack they use to manage their course websites.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Kontent_by_Kentico___Sponsor_2" name= "Kontent_by_Kentico___Sponsor_2"></a>Kontent by Kentico - Sponsor</h2> <p class="has-line-data" data-line-start="4" data-line-end="5"> Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.<a href="kontent.ai/syntax">Spin up a new project today</a> and discover Kontent.</p> <h2 class="code-line" data-line-start="6" data-line-end="7"><a id= "LogRocket__Sponsor_6" name="LogRocket__Sponsor_6"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="8" data-line-end="9"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="10" data-line-end="11"> <a id="TECH_Domains__Sponsor_10" name= "TECH_Domains__Sponsor_10"></a>.TECH Domains - Sponsor</h2> <p class="has-line-data" data-line-start="12" data-line-end="13"> Dot Tech domains has launched a new game with wicked prizes. It’s a windows 98 inspired game where you need to find and solve puzzles in each of the drives. This is unreal and you need to see it to believe it - good luck and start the game March 25th at <a href= "https://go.tech/syntaxbtc">go.tech/syntaxbtc</a>.</p> <h2 class="code-line" data-line-start="14" data-line-end="15"> <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=00:10">00:10</a></strong> Welcome</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=02:50">02:50</a></strong> CSS Redesign of LevelUpTuts</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=03:56">03:56</a></strong> Overview of our platforms</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=06:06">06:06</a></strong> The API</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="http://expressjs.com">ExpressJS</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://www.mongodb.com">MongoDB</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://www.graphql.com">GraphQL</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="https://www.fastify.io">Fastify</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://mercurius.dev">Mercurius</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://mongoosejs.com">Mongoose</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=15:13">15:13</a></strong> Sponsor: Kontent by Kentico</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=17:07">17:07</a></strong> Customer dashboard</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="https://kit.svelte.dev">Svelte Kit</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=21:21">21:21</a></strong> Viewing experience</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://reactjs.org">React</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://github.com">GitHub</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://videojs.com">VideoJS</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://mux.com">Mux</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://vimeo.com">Vimeo</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=30:53">30:53</a></strong> Hosting</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=35:51">35:51</a></strong> Sponsor: LogRocket</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=36:45">36:45</a></strong> Admin tooling</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href= "https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox"> Flexbox</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://postmarkapp.com">Postmark</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://www.drip.com">Drip</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://pancake-charts.surge.sh">Pancake Charts</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <strong><a href="#t=47:37">47:37</a></strong> Authentication</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://www.passportjs.org">PassportJS</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <strong><a href="#t=50:30">50:30</a></strong> Transactional Email</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://nodemailer.com">Nodemailer</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://pugjs.org/api/getting-started.html">Pug</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://github.com/foundation/inky">Inky</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://mjml.io">mjml</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <strong><a href="#t=52:36">52:36</a></strong> Checkout</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://stripe.com/">Stripe</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://stripe.com/payments/checkout">Stripe Checkouts</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://stripe.com/payments/elements">Stripe Elements</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://www.braintreepayments.com">Braintree</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://www.paypal.com">Paypal</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <strong><a href="#t=55:58">55:58</a></strong> Hosting</li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.digitalocean.com">Digital Ocean</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href= "https://www.digitalocean.com/products/app-platform">Digital Ocean Platform</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://render.com">Render</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://www.cloudflare.com/">Cloudflare</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <strong><a href="#t=57:48">57:48</a></strong> Sponsor: .TECH</li> <li class="has-line-data" data-line-start="61" data-line-end="63"> <strong><a href="#t=59:39">59:39</a></strong> Other parts</li> </ul> <h2 class="code-line" data-line-start="63" data-line-end="64"> <a id="_SIIIIICK__PIIIICKS__63" name= "_SIIIIICK__PIIIICKS__63"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="65" data-line-end="66"> Scott: <a href="https://amzn.to/3JaZR7b">Toniebox Audio Player Starter Set</a></li> <li class="has-line-data" data-line-start="66" data-line-end="68"> Wes: <a href= "https://vissles.com/products/v84-wireless-mechanical-keyboard-hot-swappable?variant=39507703758947"> Vissles v84 Keyboard</a></li> </ul> <h2 class="code-line" data-line-start="68" data-line-end="69"> <a id="Shameless_Plugs_68" name="Shameless_Plugs_68"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="70" data-line-end="71"> Scott: <a href= "https://leveluptutorials.com/tutorials/svelte-3d/what-is-svelte-cubed"> LevelUp Tutorials - Svelte 3D Course</a></li> <li class="has-line-data" data-line-start="71" data-line-end="73"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="73" data-line-end="74"> <a id="Tweet_us_your_tasty_treats_73" name= "Tweet_us_your_tasty_treats_73"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="81" data-line-end="82"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Wes and Scott talk through the tech stack they use to manage their course websites.
 Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 .TECH Domains - Sponsor Dot Tech domains has launched a new game with wicked prizes. It’s a windows 98 inspired game where you need to find and solve puzzles in each of the drives. This is unreal and you need to see it to believe it - good luck and start the game March 25th at go.tech/syntaxbtc.
 Show Notes  00:10 Welcome
 02:50 CSS Redesign of LevelUpTuts
 03:56 Overview of our platforms
 06:06 The API
 ExpressJS

 MongoDB

 GraphQL

 Fastify

 Mercurius

 Mongoose

 15:13 Sponsor: Kontent by Kentico
 17:07 Customer dashboard
 Svelte Kit

 21:21 Viewing experience
 React

 GitHub

 VideoJS

 Mux

 Vimeo

 30:53 Hosting
 35:51 Sponsor: LogRocket
 36:45 Admin tooling
  Flexbox

 Postmark

 Drip

 Pancake Charts

 47:37 Authentication
 PassportJS

 50:30 Transactional Email
 Nodemailer

 Pug

 Inky

 mjml

 52:36 Checkout
 Stripe

 Stripe Checkouts

 Stripe Elements

 Braintree

 Paypal

 55:58 Hosting
 Digital Ocean

 Digital Ocean Platform

 Render

 Cloudflare

 57:48 Sponsor:.TECH
 59:39 Other parts
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Toniebox Audio Player Starter Set

 Wes: Vissles v84 Keyboard

  Shameless Plugs  Scott: LevelUp Tutorials - Svelte 3D Course

 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

Aplikace Youradio Talk

Our Stacks Explained

Poslechněte si podcast