<description>&lt;p class="has-line-data" data-line-start="0" data-line-end="1"&gt; Scott and Wes serve up answers to community questions, from navigating Light DOM vs. Shadow DOM to diving into tools for data extraction. Plus, they dish out insights on Gatsby in 2024, utilizing JavaScript ‘wheel events’, and explore the possibilities of hosting a website at home.&lt;/p&gt; &lt;h3 class="code-line" data-line-start="2" data-line-end="3"&gt;&lt;a id= "Show_Notes_2"&gt;&lt;/a&gt;Show Notes&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="4" data-line-end="5"&gt; &lt;strong&gt;&lt;a href="#t=00:00"&gt;00:00&lt;/a&gt;&lt;/strong&gt; Welcome to Syntax!&lt;/li&gt; &lt;li class="has-line-data" data-line-start="5" data-line-end="6"&gt; &lt;strong&gt;&lt;a href="#t=00:51"&gt;00:51&lt;/a&gt;&lt;/strong&gt; Brought to you by &lt;a href="www.sentry.io/syntax"&gt;Sentry.io&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="6" data-line-end="7"&gt; &lt;strong&gt;&lt;a href="#t=01:17"&gt;01:17&lt;/a&gt;&lt;/strong&gt; When should I use Light DOM or Shadow DOM?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="7" data-line-end="8"&gt; &lt;strong&gt;&lt;a href="#t=03:43"&gt;03:43&lt;/a&gt;&lt;/strong&gt; Do you know of any good tools for extracting data/content from Markup/HTML?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="8" data-line-end="9"&gt; &lt;a href="https://github.com/WebReflection/linkedom"&gt;LinkeDOM on GitHub&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="9" data-line-end="10"&gt; &lt;strong&gt;&lt;a href="#t=08:29"&gt;08:29&lt;/a&gt;&lt;/strong&gt; Wanted to ask you guys your opinion on the state of Gatsby in 2024.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="10" data-line-end="11"&gt; &lt;a href="https://www.localfirst.fm/5"&gt;LocalFirst.fm&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="11" data-line-end="12"&gt; &lt;a href= "https://twitter.com/vitorsalmeida_/status/1771260380490190934?s=20"&gt; MeteorJS UI Updates&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="12" data-line-end="13"&gt; &lt;strong&gt;&lt;a href="#t=15:05"&gt;15:05&lt;/a&gt;&lt;/strong&gt; Please get the Goodhertz creator on the pod! Would be a great show.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="13" data-line-end="14"&gt; &lt;a href="https://goodhertz.com/"&gt;Goodhertz Audio Software&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="14" data-line-end="15"&gt; &lt;strong&gt;&lt;a href="#t=16:34"&gt;16:34&lt;/a&gt;&lt;/strong&gt; Effects that involve the JavaScript ‘wheel’ event.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="15" data-line-end="16"&gt; &lt;a href="https://runway.com/"&gt;Runway.com&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="16" data-line-end="17"&gt; &lt;a href="https://gsap.com/"&gt;GSAP Animate Anything&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="17" data-line-end="18"&gt; &lt;a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations"&gt; CSS Scroll-Driven Animations&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="18" data-line-end="19"&gt; &lt;strong&gt;&lt;a href="#t=23:15"&gt;23:15&lt;/a&gt;&lt;/strong&gt; Best tool for rapidly creating UI from the ground up.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="19" data-line-end="20"&gt; &lt;a href="https://syntax.fm/751"&gt;Episode 751&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="20" data-line-end="21"&gt; &lt;a href= "https://www.thinkmill.com.au/open-source"&gt;Thinkmill.com&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="21" data-line-end="22"&gt; &lt;strong&gt;&lt;a href="#t=27:44"&gt;27:44&lt;/a&gt;&lt;/strong&gt; Wes, what’s with your frame rate?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="22" data-line-end="23"&gt; &lt;a href= "https://twitter.com/wesbos/status/1775725925662966192"&gt;Frame Rate Testing Results on X&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="23" data-line-end="24"&gt; &lt;strong&gt;&lt;a href="#t=32:31"&gt;32:31&lt;/a&gt;&lt;/strong&gt; Is there any way to host a whole website setting on my PC at home?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="24" data-line-end="25"&gt; &lt;a href="https://www.youtube.com/watch?v=Q1Y_g0wMwww"&gt;CJ and Self-Host 101&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="25" data-line-end="26"&gt; &lt;a href="https://www.hetzner.com/"&gt;Hetzner.com&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="26" data-line-end="27"&gt; &lt;a href= "https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/get-started/"&gt; Cloudflare Docs Create a Tunnel&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="27" data-line-end="28"&gt; &lt;strong&gt;&lt;a href="#t=36:52"&gt;36:52&lt;/a&gt;&lt;/strong&gt; Offline functionality like saving data and syncing data to database?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="28" data-line-end="29"&gt; &lt;a href="https://syntax.fm/739"&gt;Episode 739&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="29" data-line-end="30"&gt; &lt;a href="https://localfirstweb.dev/"&gt;Local-First Web Development&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="30" data-line-end="31"&gt; &lt;a href= "https://www.youtube.com/playlist?list=PLLnpHn493BHHYdXYkKd30aDdN-RfsM_W2"&gt; Syntax Side Dish Explainer Playlist&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="31" data-line-end="32"&gt; &lt;strong&gt;&lt;a href="#t=39:41"&gt;39:41&lt;/a&gt;&lt;/strong&gt; Creating a GPT-like tool that can listen to long audio files.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="32" data-line-end="33"&gt; &lt;a href= "https://platform.openai.com/docs/guides/speech-to-text"&gt;OpenAI Speech to Text&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="33" data-line-end="34"&gt; &lt;a href= "https://github.com/Vaibhavs10/insanely-fast-whisper"&gt;Insanely Fast Whisper&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="34" data-line-end="35"&gt; &lt;a href="https://deepgram.com/"&gt;Deepgram&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="35" data-line-end="37"&gt; &lt;strong&gt;&lt;a href="#t=43:51"&gt;43:51&lt;/a&gt;&lt;/strong&gt; Sick Picks.&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="37" data-line-end="38"&gt; &lt;a id="Sick_Picks_37"&gt;&lt;/a&gt;Sick Picks&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="39" data-line-end="40"&gt; Scott: &lt;a href="https://amzn.to/4apx5Ni"&gt;Hair Powder&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="40" data-line-end="42"&gt; Wes: &lt;a href="https://amzn.to/4cwWGG4"&gt;Mini Grease Gun&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="42" data-line-end="43"&gt; &lt;a id="Hit_us_up_on_Socials_42"&gt;&lt;/a&gt;Hit us up on Socials!&lt;/h3&gt; &lt;p class="has-line-data" data-line-start="44" data-line-end="45"&gt; Syntax: &lt;a href="https://twitter.com/syntaxfm"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/syntax_fm/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@syntaxfm"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/"&gt;LinkedIn&lt;/a&gt; &lt;a href="https://www.threads.net/@syntax_fm"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="46" data-line-end="47"&gt; Wes: &lt;a href="https://twitter.com/wesbos"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/wesbos/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@wesbos"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/wesbos/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@wesbos"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="48" data-line-end="49"&gt; Scott:&lt;a href="https://twitter.com/stolinski"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/stolinski/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@stolinski"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/stolinski/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@stolinski"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="50" data-line-end="51"&gt; Randy: &lt;a href="https://twitter.com/randyrektor"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/randyrektor/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.youtube.com/@randyrektor"&gt;YouTube&lt;/a&gt; &lt;a href= "https://www.threads.net/@randyrektor"&gt;Threads&lt;/a&gt;&lt;/p&gt;</description>

Syntax - Tasty Web Development Treats

Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

757: Potluck: Is Gatsby Dead? Shadow Dom, AI Summaries, Self Hosting + More

APR 17, 202448 MIN
Syntax - Tasty Web Development Treats

757: Potluck: Is Gatsby Dead? Shadow Dom, AI Summaries, Self Hosting + More

APR 17, 202448 MIN

Description

Scott and Wes serve up answers to community questions, from navigating Light DOM vs. Shadow DOM to diving into tools for data extraction. Plus, they dish out insights on Gatsby in 2024, utilizing JavaScript ‘wheel events’, and explore the possibilities of hosting a website at home.

Show Notes Sick Picks Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads