Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - What is SvelteKit?

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 SvelteKit — what it is and why you might want to use it.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> <a href="http://sanity.io/">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.</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"> 03:28 - What is it?</p> <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> Total platform for building <a href= "https://svelte.dev/">Svelte</a> apps</li> <li class="has-line-data" data-line-start="18" data-line-end="20"> Built in <a href="https://vitejs.dev/">Vite.js</a> <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> Includes all of the Vite goodness but it hides behind the scenes for the most part</li> </ul> </li> <li class="has-line-data" data-line-start="20" data-line-end="22"> Host anywhere</li> </ul> <p class="has-line-data" data-line-start="22" data-line-end="23"> 05:16 - Is it CSR, SSR, SSG, WTF?!</p> <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> All of the above. Uses adapters to control the output:</li> </ul> <pre data-initialized="true" data-gclp-id="2"> <code class="has-line-data" data-line-start="25" data-line-end= "31">kit: {         // hydrate the <div id="svelte"> element in src/app.html         target: '#svelte',         adapter: adapter() } </code> </pre> <p class="has-line-data" data-line-start="32" data-line-end="33"> 09:45 - What you get out of the box</p> <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> File-based routing</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> API routes</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> Layouts and layout resets</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> Fancy file titles [slug] __layout</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> Code splitting & preloading</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://postcss.org/">PostCSS</a></li> <li class="has-line-data" data-line-start="39" data-line-end="41"> <a href= "https://www.typescriptlang.org/">TypeScript</a> support</li> </ul> <p class="has-line-data" data-line-start="41" data-line-end="42"> 17:03 - Neat small things</p> <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> Glob import</li> <li class="has-line-data" data-line-start="43" data-line-end="45"> <a href= "https://github.com/svelte-add/svelte-add">https://github.com/svelte-add/svelte-add</a></li> </ul> <h2 class="code-line" data-line-start="45" data-line-end="46"> <a id="Links_45" name="Links_45"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://kit.svelte.dev/">SvelteKit</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://nextjs.org/">Next.js</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://www.gatsbyjs.com/">Gatsby.js</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://sapper.svelte.dev/">Sapper</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://tailwindcss.com/">tailwindcss</a></li> <li class="has-line-data" data-line-start="51" data-line-end="53"> <a href="https://twitter.com/chriscoyier">@chriscoyier</a></li> </ul> <h2 class="code-line" data-line-start="53" data-line-end="54"> <a id="Tweet_us_your_tasty_treats_53" name= "Tweet_us_your_tasty_treats_53"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> 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 SvelteKit — what it is and why you might want to use it.
 Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
 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 03:28 - What is it?
  Total platform for building Svelte apps
 Built in Vite.js  Includes all of the Vite goodness but it hides behind the scenes for the most part

 Host anywhere
  05:16 - Is it CSR, SSR, SSG, WTF?!
  All of the above. Uses adapters to control the output:
  kit: {     // hydrate the element in src/app.html     target: '#svelte',     adapter: adapter() }  09:45 - What you get out of the box
  File-based routing
 API routes
 Layouts and layout resets
 Fancy file titles [slug] __layout
 Code splitting & preloading
 PostCSS

 TypeScript support
  17:03 - Neat small things
  Glob import
 https://github.com/svelte-add/svelte-add

  Links  SvelteKit

 Next.js

 Gatsby.js

 Sapper

 tailwindcss

 @chriscoyier

  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 - What is SvelteKit?

Poslechněte si podcast