Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Future Tech We’re Excited About

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="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about future tech — some things you may not have heard about yet, and why we’re excited about them!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Freshbooks__Sponsor_9" name="Freshbooks__Sponsor_9"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> 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="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 05:20 - Astro</p> <ul> <li class="has-line-data" data-line-start="17" data-line-end="20"> What it is: <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="http://astro.build/">astro.build</a> is a next gen “meta” framework that eases some of React’s pain but also is not just React.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://twitter.com/georges_gomes/status/1380801812656226304">https://twitter.com/georges_gomes/status/1380801812656226304</a></li> </ul> </li> <li class="has-line-data" data-line-start="20" data-line-end="25"> Why we’re excited about it: <ul> <li class="has-line-data" data-line-start="21" data-line-end="22"> Server Side JS frameworks, combine Svelte, React, Vue as needed in one component that is an SFC using markdown style meta data.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Scoped CSS by default (a la Svelte). Sass out of the box.</li> <li class="has-line-data" data-line-start="23" data-line-end="25"> Collections import for .md files</li> </ul> </li> </ul> <pre data-initialized="true" data-gclp-id="1"> <code class="has-line-data" data-line-start="26" data-line-end= "40">// pages/blog.astro --- import PostPreview from '../components/PostPreview.astro';  const blogPosts = import.meta.collections('./post/*.md'); ---  <span class="hljs-tag"><<span class= "hljs-title">main</span>></span>   <span class="hljs-tag"><<span class= "hljs-title">h1</span>></span>Blog Posts<span class= "hljs-tag"></<span class="hljs-title">h1</span>></span>   {blogPosts.map((post) => (     <span class="hljs-tag"><<span class= "hljs-title">PostPreview</span> <span class= "hljs-attribute">post</span>=<span class= "hljs-value">{post}</span> /></span>   )} <span class="hljs-tag"></<span class= "hljs-title">main</span>></span> </code> </pre> <p class="has-line-data" data-line-start="41" data-line-end="42"> 12:06 - ViteKit</p> <ul> <li class="has-line-data" data-line-start="42" data-line-end="48"> What it is: <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> Framework-agnostic</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> API routes</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> Pages (frontend, optional hydration)</li> <li class="has-line-data" data-line-start="46" data-line-end="48"> Adapter for Node, static, Vercel, cf worker, etc. Inspired by SvelteKit.</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="48" data-line-end="49"> 15:58 - Svelte Kit</p> <ul> <li class="has-line-data" data-line-start="49" data-line-end="54"> What it is: <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://kit.svelte.dev/docs">https://kit.svelte.dev/docs</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href= "https://svelte.dev/blog/sveltekit-beta">https://svelte.dev/blog/sveltekit-beta</a></li> <li class="has-line-data" data-line-start="52" data-line-end="54"> New framework for building Svelte apps</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="54" data-line-end="55"> 19:07 - Remix.run</p> <ul> <li class="has-line-data" data-line-start="55" data-line-end="58"> What it is: <ul> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://remix.run/">Remix.run</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> Fullstack React framework</li> </ul> </li> <li class="has-line-data" data-line-start="58" data-line-end="66"> Why we’re excited about it: <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> Made by Michael Jackson, Ryan Florence</li> <li class="has-line-data" data-line-start="60" data-line-end="61"> License-based</li> <li class="has-line-data" data-line-start="61" data-line-end="62"> React-based</li> <li class="has-line-data" data-line-start="62" data-line-end="63"> Caching-focused, uses “the platform”</li> <li class="has-line-data" data-line-start="63" data-line-end="64"> Centralized data loading, works without client JS if needed</li> <li class="has-line-data" data-line-start="64" data-line-end="66"> Better nested routing</li> </ul> </li> </ul> <h2 class="code-line" data-line-start="66" data-line-end="67"> <a id="Links_66" name="Links_66"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://sapper.svelte.dev/">Sapper</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://vitejs.dev/">Vite</a></li> <li class="has-line-data" data-line-start="69" data-line-end="71"> <a href="https://www.snowpack.dev/">Snowpack</a></li> </ul> <h2 class="code-line" data-line-start="71" data-line-end="72"> <a id="Tweet_us_your_tasty_treats_71" name= "Tweet_us_your_tasty_treats_71"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about future tech — some things you may not have heard about yet, and why we’re excited about them!
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
 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.
 Show Notes 05:20 - Astro
  What it is:  astro.build is a next gen “meta” framework that eases some of React’s pain but also is not just React.
 https://twitter.com/georges_gomes/status/1380801812656226304

 Why we’re excited about it:  Server Side JS frameworks, combine Svelte, React, Vue as needed in one component that is an SFC using markdown style meta data.
 Scoped CSS by default (a la Svelte). Sass out of the box.
 Collections import for.md files

  // pages/blog.astro --- import PostPreview from '../components/PostPreview.astro'; const blogPosts = import.meta.collections('./post/*.md'); ---   Blog Posts  {blogPosts.map((post) => (    )}   12:06 - ViteKit
  What it is:  Framework-agnostic
 API routes
 Pages (frontend, optional hydration)
 Adapter for Node, static, Vercel, cf worker, etc. Inspired by SvelteKit.

  15:58 - Svelte Kit
  What it is:  https://kit.svelte.dev/docs

 https://svelte.dev/blog/sveltekit-beta

 New framework for building Svelte apps

  19:07 - Remix.run
  What it is:  Remix.run

 Fullstack React framework

 Why we’re excited about it:  Made by Michael Jackson, Ryan Florence
 License-based
 React-based
 Caching-focused, uses “the platform”
 Centralized data loading, works without client JS if needed
 Better nested routing

  Links  Sapper

 Vite

 Snowpack

  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

Hasty Treat - Future Tech We’re Excited About

Poslechněte si podcast