Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck × Soft Skills × Release Notes × Headless CMS × Organizing Code × Inet CSS?

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 learning soft skills, using release notes, headless CMS, dealing with web components and scripts, what inet is, better ways to use ChatGPT, and more!</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:11">00:11</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:42">01:42</a></strong> Scott’s butt pincher</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href= "https://en.wikipedia.org/wiki/Affenpinscher">Affenpinscher</a></li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=06:08">06:08</a></strong> You keep missing my favorite thing about Civet</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://en.wikipedia.org/wiki/Civet">Civet</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=07:31">07:31</a></strong> What soft skills can I learn to help me in my career?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href= "https://css-tricks.com/hmtl-css-and-js-in-an-add-ocd-bi-polar-dyslexic-and-autistic-world/"> HTML, CSS and JS in an ADD, OCD, Bi-Polar, Dyslexic and Autistic World | CSS-Tricks - CSS-Tricks</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=12:42">12:42</a></strong> Have you thought about release notes or a what’s new section?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href= "https://www.conventionalcommits.org/en/v1.0.0/">Conventional Commits</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href= "https://medium.com/jobtome-engineering/how-to-generate-changelog-using-conventional-commits-10be40f5826c"> How to generate Changelog using Conventional Commits | by Riccardo Canella | Jobtome Engineering | Medium</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=15:57">15:57</a></strong> Can you explain headless CMS and what the use-cases/implementations are?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=19:24">19:24</a></strong> Any suggestions for dealing with web components and the client’s tracking scripts</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href= "https://www.webperf.tips/tip/understanding-flamegraphs/">How to Read Flamegraphs ?</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://www.webperf.tips/tip/main-profiler-pane/">Chromium F12 Profiler: The Main Thread Pane</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href= "https://github.com/bluesky-social/atproto/issues/915#issuecomment-1539112436"> Agent Creation has a large CPU time · Issue #915 · bluesky-social/atproto</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=25:27">25:27</a></strong> Why do we need .d.ts files in TypeScript?</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=30:15">30:15</a></strong> What is inset in CSS?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/inset">inset - CSS: Cascading Style Sheets | MDN</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=35:06">35:06</a></strong> Is there a way to use AI/chat gpt to more quickly and easily understand technical documentation?</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="https://www.anthropic.com/">Anthropic \ Home</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://docs.astro.build/en/getting-started/">Getting Started ? Astro Documentation</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href= "https://gptstore.ai/plugins/askthecode-dsomok-online">ChatGPT Plugin - AskTheCode | GPTStore.ai</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://gptstore.ai/plugins/api-gafo-tech">ChatGPT Plugin - Scraper | GPTStore.ai</a></li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href= "https://tanstack.com/query/v4/docs/react/overview">Overview | TanStack Query Docs</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href= "https://openai.com/blog/custom-instructions-for-chatgpt">Custom instructions for ChatGPT</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=40:59">40:59</a></strong> why is the following true: the string “undefined”.includes(undefined)?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=43:27">43:27</a></strong> How do you organize your code directories?</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=48:50">48:50</a></strong> Is there any good reason in 2023 why we should still be loading JS files with all our script tags at the bottom of the body element?</li> <li class="has-line-data" data-line-start="32" data-line-end="34"> <strong><a href="#t=54:32">54:32</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="34" data-line-end="35"> <a id="_SIIIIICK__PIIIICKS__34"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> Scott: <a href="https://amzn.to/3YMdzpR">Surge power bar</a></li> <li class="has-line-data" data-line-start="37" data-line-end="39"> Wes: <a href="https://amzn.to/3EqvxVH">Little Hippo Alarm</a></li> </ul> <h2 class="code-line" data-line-start="39" data-line-end="40"> <a id="Shameless_Plugs_39"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> Scott: <a href="https://sentry.io">Sentry</a></li> <li class="has-line-data" data-line-start="42" data-line-end="44"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="44" data-line-end="45"> <a id="Tweet_us_your_tasty_treats_44"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this potluck episode of Syntax, Wes and Scott answer your questions about learning soft skills, using release notes, headless CMS, dealing with web components and scripts, what inet is, better ways to use ChatGPT, and more!
 Show Notes  00:11 Welcome
 01:42 Scott’s butt pincher
 Affenpinscher

 06:08 You keep missing my favorite thing about Civet
 Civet

 07:31 What soft skills can I learn to help me in my career?
  HTML, CSS and JS in an ADD, OCD, Bi-Polar, Dyslexic and Autistic World | CSS-Tricks - CSS-Tricks

 12:42 Have you thought about release notes or a what’s new section?
 Conventional Commits

  How to generate Changelog using Conventional Commits | by Riccardo Canella | Jobtome Engineering | Medium

 15:57 Can you explain headless CMS and what the use-cases/implementations are?
 19:24 Any suggestions for dealing with web components and the client’s tracking scripts
 How to Read Flamegraphs 🔥

 Chromium F12 Profiler: The Main Thread Pane

  Agent Creation has a large CPU time · Issue #915 · bluesky-social/atproto

 25:27 Why do we need.d.ts files in TypeScript?
 30:15 What is inset in CSS?
 inset - CSS: Cascading Style Sheets | MDN

 35:06 Is there a way to use AI/chat gpt to more quickly and easily understand technical documentation?
 Anthropic \ Home

 Getting Started 🚀 Astro Documentation

 ChatGPT Plugin - AskTheCode | GPTStore.ai

 ChatGPT Plugin - Scraper | GPTStore.ai

 Overview | TanStack Query Docs

 Custom instructions for ChatGPT

 40:59 why is the following true: the string “undefined”.includes(undefined)?
 43:27 How do you organize your code directories?
 48:50 Is there any good reason in 2023 why we should still be loading JS files with all our script tags at the bottom of the body element?
 54:32 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Surge power bar

 Wes: Little Hippo Alarm

  Shameless Plugs  Scott: Sentry

 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
 Wes Bos on Bluesky

 Scott on Bluesky

 Syntax on Bluesky

Aplikace Youradio Talk

Potluck × Soft Skills × Release Notes × Headless CMS × Organizing Code × Inet CSS?

Poslechněte si podcast