Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Gatsby Tips

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 tips and tricks for using Gatsby in your projects</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 02:02 - React Helmet</p> <ul> <li class="has-line-data" data-line-start="15" data-line-end="17"> Make a re-usable SEO component that sets defaults. Spread children to override.</li> </ul> <p class="has-line-data" data-line-start="17" data-line-end="18"> 04:27 - When in doubt, stop the build and restart</p> <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> Gatsby clean</li> <li class="has-line-data" data-line-start="19" data-line-end="21"> Nuke node_modules + package-lock</li> </ul> <p class="has-line-data" data-line-start="21" data-line-end="22"> 05:34 - Use ESM to use ES Modules everywhere - share functions between gatsby-node and gatsby-browser</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 06:44 - Run the build command locally to troubleshoot prod</p> <ul> <li class="has-line-data" data-line-start="24" data-line-end="26"> Dev mode isn’t SSG’d - people overlook this</li> </ul> <p class="has-line-data" data-line-start="26" data-line-end="27"> 08:06 - Wrap your layout automatically in gatsby-ssr and gatbsy-browser</p> <ul> <li class="has-line-data" data-line-start="27" data-line-end="29"> wrapPageElement and wrapRootElement</li> </ul> <p class="has-line-data" data-line-start="29" data-line-end="30"> 09:50 - Consider just adding the layout component manually to each page</p> <ul> <li class="has-line-data" data-line-start="30" data-line-end="32"> This will allow you to skip the layout if you need to have a page that isn’t typical</li> </ul> <p class="has-line-data" data-line-start="32" data-line-end="33"> 11:21 - Layout is not suitable for unmount animations</p> <ul> <li class="has-line-data" data-line-start="33" data-line-end="35"> Orchestrating individual component animations in Gatsby isn’t easy, use wrapPageElement to write your animations or delays for internally unmounted components.</li> </ul> <p class="has-line-data" data-line-start="35" data-line-end="36"> 12:59 - use onCreatePage to pass context to the layout</p> <pre data-initialized="true" data-gclp-id="1"> <code class="has-line-data" data-line-start="38" data-line-end= "47">exports.onCreatePage = ({ page, actions }) => {   const { createPage } = actions;    if (page.path.match(/thumbnail/)) {     page.context.layout = 'thumbnail';     createPage(page);   } }; </code> </pre> <p class="has-line-data" data-line-start="48" data-line-end="49"> 14:03 - You don’t have to query for everything</p> <ul> <li class="has-line-data" data-line-start="49" data-line-end="51"> Hard-coding data in html/jsx is super valid</li> </ul> <p class="has-line-data" data-line-start="51" data-line-end="52"> 15:32 - Gatsby Parallel Runner</p> <ul> <li class="has-line-data" data-line-start="52" data-line-end="54"> For lots of images</li> </ul> <h2 class="code-line" data-line-start="54" data-line-end="55"> <a id="Links_54" name="Links_54"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://gridsome.org/">Gridsom</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://cloud.google.com/">Google Cloud</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://cloudinary.com/">Cloudinary</a></li> <li class="has-line-data" data-line-start="58" data-line-end="60"> <a href="https://www.sanity.io/docs/presenting-images">Sanity Image</a></li> </ul> <h2 class="code-line" data-line-start="60" data-line-end="61"> <a id="Tweet_us_your_tasty_treats_60" name= "Tweet_us_your_tasty_treats_60"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> 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 tips and tricks for using Gatsby in your projects
 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 02:02 - React Helmet
  Make a re-usable SEO component that sets defaults. Spread children to override.
  04:27 - When in doubt, stop the build and restart
  Gatsby clean
 Nuke node_modules + package-lock
  05:34 - Use ESM to use ES Modules everywhere - share functions between gatsby-node and gatsby-browser
 06:44 - Run the build command locally to troubleshoot prod
  Dev mode isn’t SSG’d - people overlook this
  08:06 - Wrap your layout automatically in gatsby-ssr and gatbsy-browser
  wrapPageElement and wrapRootElement
  09:50 - Consider just adding the layout component manually to each page
  This will allow you to skip the layout if you need to have a page that isn’t typical
  11:21 - Layout is not suitable for unmount animations
  Orchestrating individual component animations in Gatsby isn’t easy, use wrapPageElement to write your animations or delays for internally unmounted components.
  12:59 - use onCreatePage to pass context to the layout
 exports.onCreatePage = ({ page, actions }) => {  const { createPage } = actions;  if (page.path.match(/thumbnail/)) {   page.context.layout = 'thumbnail';   createPage(page);  } };  14:03 - You don’t have to query for everything
  Hard-coding data in html/jsx is super valid
  15:32 - Gatsby Parallel Runner
  For lots of images
  Links  Gridsom

 Google Cloud

 Cloudinary

 Sanity Image

  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 - Gatsby Tips

Poslechněte si podcast