Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Peer Dependencies × Vitest × NVM and PNPM × Sprites

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 potluck episode of Syntax, Wes and Scott answer your questions about peer dependencies, Vitest, NVM and PNPM, using sprites for images, common MongoDB operations, and more!</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Prismic__Sponsor_2" name="Prismic__Sponsor_2"></a>Prismic - Sponsor</h2> <p class="has-line-data" data-line-start="4" data-line-end="5"> Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>.</p> <h2 class="code-line" data-line-start="6" data-line-end="7"><a id= "Sanity__Sponsor_6" name="Sanity__Sponsor_6"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="8" data-line-end="9"> <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="10" data-line-end="11"> <a id="LogRocket__Sponsor_10" name= "LogRocket__Sponsor_10"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="12" data-line-end="13"> 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="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:03">00:03</a></strong> Welcome</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=01:53">01:53</a></strong> Configuring home internet routers</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=04:42">04:42</a></strong> Scott’s Home Assistant update</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590"> Mushroom Theme</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=07:52">07:52</a></strong> Could you explain to me peer-dependencies and how does it work?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=13:24">13:24</a></strong> Using Vitest do you still have to transpile code?</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=16:14">16:14</a></strong> Can you talk about helpful and common MongoDB operations, beyond just CRUD.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=18:49">18:49</a></strong> How can I update the “updatedAt” field of the document on every save automatically?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=20:40">20:40</a></strong> What is aggregation, and when do you use it?</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=25:33">25:33</a></strong> Sponsor: Prismic</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=27:27">27:27</a></strong> How does NVM relate to PNPM?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://pnpm.io">pnpm</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="https://github.com/nvm-sh/nvm#intro">nvm</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=30:45">30:45</a></strong> I’m looking to upskill from front-end JavaScript?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=33:53">33:53</a></strong> Is it possible to have a private NPM repo I can “npm install” from, or do I put my components up on NPM publicly?</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href= "https://docs.npmjs.com/creating-and-publishing-private-packages">Creating a private npm package</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=37:51">37:51</a></strong> Sponsor: LogRocket</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=39:14">39:14</a></strong> Should a majority of lodash functions be considered deprecated?</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://github.com/angus-c/just">angus c just</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=42:36">42:36</a></strong> Please do an episode on programming/learning with ADHD.</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=44:04">44:04</a></strong> Should I still be putting images in sprites?</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=49:20">49:20</a></strong> Does Mux have a simple mechanism for adding auth to each video or group of videos?</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href= "https://docs.mux.com/api-reference/video#operation/create-playback-restriction"> Mux Create playback restriction</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <strong><a href="#t=53:48">53:48</a></strong> Sponsor: <a href= "http://Sanity.io">Sanity.io</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <strong><a href="#t=55:02">55:02</a></strong> Is there copyright issues with using public APIs?</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://moneypuck.com">Moneypuck</a></li> <li class="has-line-data" data-line-start="42" data-line-end="44"> <strong><a href="#t=59:38">59:38</a></strong> ××× SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="44" data-line-end="45"> <a id="_SIIIIICK__PIIIICKS__44" name= "_SIIIIICK__PIIIICKS__44"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> Scott: <a href="https://amzn.to/3utuIqz">Toto Bidet</a></li> <li class="has-line-data" data-line-start="47" data-line-end="49"> Wes: <a href="https://sodastream.ca/">Sodastream</a></li> </ul> <h2 class="code-line" data-line-start="49" data-line-end="50"> <a id="Shameless_Plugs_49" name="Shameless_Plugs_49"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> Scott: <a href= "https://leveluptutorials.com/tutorials/keystone-js/introduction">LevelUp Tutorials</a></li> <li class="has-line-data" data-line-start="52" data-line-end="54"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="54" data-line-end="55"> <a id="Tweet_us_your_tasty_treats_54" name= "Tweet_us_your_tasty_treats_54"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this potluck episode of Syntax, Wes and Scott answer your questions about peer dependencies, Vitest, NVM and PNPM, using sprites for images, common MongoDB operations, and more!
 Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
 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  00:03 Welcome
 01:53 Configuring home internet routers
 04:42 Scott’s Home Assistant update
  Mushroom Theme

 07:52 Could you explain to me peer-dependencies and how does it work?
 13:24 Using Vitest do you still have to transpile code?
 16:14 Can you talk about helpful and common MongoDB operations, beyond just CRUD.
 18:49 How can I update the “updatedAt” field of the document on every save automatically?
 20:40 What is aggregation, and when do you use it?
 25:33 Sponsor: Prismic
 27:27 How does NVM relate to PNPM?
 pnpm

 nvm

 30:45 I’m looking to upskill from front-end JavaScript?
 33:53 Is it possible to have a private NPM repo I can “npm install” from, or do I put my components up on NPM publicly?
 Creating a private npm package

 37:51 Sponsor: LogRocket
 39:14 Should a majority of lodash functions be considered deprecated?
 angus c just

 42:36 Please do an episode on programming/learning with ADHD.
 44:04 Should I still be putting images in sprites?
 49:20 Does Mux have a simple mechanism for adding auth to each video or group of videos?
  Mux Create playback restriction

 53:48 Sponsor: Sanity.io

 55:02 Is there copyright issues with using public APIs?
 Moneypuck

 59:38 ××× SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Toto Bidet

 Wes: Sodastream

  Shameless Plugs  Scott: LevelUp Tutorials

 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

Potluck - Peer Dependencies × Vitest × NVM and PNPM × Sprites

Poslechněte si podcast