Scott and Wes dive into Cloudflare’s Analytics Engine and Workers with special guest Ben Vinegar, Syntax’s General Manager. Tune in as they explore Clickhouse, data tracking, infrastructure costs, and transitioning from software products to managing a podcast. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:17">01:17</a> Who is Ben Vinegar?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="https://syntax.fm/434">Episode 434 with Ben</a>.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=02:21">02:21</a> Brought to you by <a href="https://www.sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=04:00">04:00</a> Cloudflare analytics engine.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://counterscale.dev/">Counterscale.dev</a>.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://syntax.fm/634">Episode 634 with Armin</a>.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=09:08">09:08</a> What is <a href= "https://clickhouse.com/">clickhouse</a>?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=11:01">11:01</a> Can Clickhouse be used for things outside of analytics tracking?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=13:46">13:46</a> What kind of events are you able to track?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=15:00">15:00</a> How do you assign values to track?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href= "https://github.com/benvinegar/counterscale/blob/main/app/analytics/schema.ts"> Counterscale Schema</a>.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=18:40">18:40</a> Data type limitations.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=19:55">19:55</a> The troubles with sampling data.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=23:57">23:57</a> Sample intervals.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=24:24">24:24</a> Pricing for these services.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=25:34">25:34</a> How it actually runs.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=27:31">27:31</a> Infrastructure costs and pricing models.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=30:19">30:19</a> Running production apps in Cloudflare.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=31:49">31:49</a> Cloudflare and HonoJS.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=32:47">32:47</a> One year with Sentry and Ben’s role with Syntax.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://syntax.fm/600">Episode 600 with David</a>.</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=39:33">39:33</a> How does it feel going from a software project to a media project?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://syntax.fm/about">Syntax Team</a>.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=43:00">43:00</a> How do you sell Syntax to Sentry?</li> <li class="has-line-data" data-line-start="29" data-line-end="31"> <a href="#t=48:37">48:37</a> Sick Picks & Shameless Plugs</li> </ul> <a id="Sick_Picks_31"></a>Sick Picks <ul> <li class="has-line-data" data-line-start="33" data-line-end="35"> Ben: <a href="https://www.youtube.com/@randyrektor">Randy’s YouTube</a>, <a href="https://www.getboom.app/">Boom</a>.</li> </ul> <a id="Shameless_Plugs_35"></a>Shameless Plugs <ul> <li class="has-line-data" data-line-start="37" data-line-end="39"> Ben: <a href="https://counterscale.dev/">Counterscale.dev</a></li> </ul> <a id="Hit_us_up_on_Socials_39"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

<description>&lt;p class="has-line-data" data-line-start="0" data-line-end="1"&gt; Scott and Wes dive into Cloudflare’s Analytics Engine and Workers with special guest Ben Vinegar, Syntax’s General Manager. Tune in as they explore Clickhouse, data tracking, infrastructure costs, and transitioning from software products to managing a podcast.&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=01:17"&gt;01:17&lt;/a&gt;&lt;/strong&gt; Who is Ben Vinegar?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="6" data-line-end="7"&gt; &lt;a href="https://syntax.fm/434"&gt;Episode 434 with Ben&lt;/a&gt;.&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=02:21"&gt;02:21&lt;/a&gt;&lt;/strong&gt; Brought to you by &lt;a href="https://www.sentry.io/syntax"&gt;Sentry.io&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="8" data-line-end="9"&gt; &lt;strong&gt;&lt;a href="#t=04:00"&gt;04:00&lt;/a&gt;&lt;/strong&gt; Cloudflare analytics engine.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="9" data-line-end="10"&gt; &lt;a href="https://counterscale.dev/"&gt;Counterscale.dev&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="10" data-line-end="11"&gt; &lt;a href="https://syntax.fm/634"&gt;Episode 634 with Armin&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="11" data-line-end="12"&gt; &lt;strong&gt;&lt;a href="#t=09:08"&gt;09:08&lt;/a&gt;&lt;/strong&gt; What is &lt;a href= "https://clickhouse.com/"&gt;clickhouse&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=11:01"&gt;11:01&lt;/a&gt;&lt;/strong&gt; Can Clickhouse be used for things outside of analytics tracking?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="13" data-line-end="14"&gt; &lt;strong&gt;&lt;a href="#t=13:46"&gt;13:46&lt;/a&gt;&lt;/strong&gt; What kind of events are you able to track?&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=15:00"&gt;15:00&lt;/a&gt;&lt;/strong&gt; How do you assign values to track?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="15" data-line-end="16"&gt; &lt;a href= "https://github.com/benvinegar/counterscale/blob/main/app/analytics/schema.ts"&gt; Counterscale Schema&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="16" data-line-end="17"&gt; &lt;strong&gt;&lt;a href="#t=18:40"&gt;18:40&lt;/a&gt;&lt;/strong&gt; Data type limitations.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="17" data-line-end="18"&gt; &lt;strong&gt;&lt;a href="#t=19:55"&gt;19:55&lt;/a&gt;&lt;/strong&gt; The troubles with sampling data.&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:57"&gt;23:57&lt;/a&gt;&lt;/strong&gt; Sample intervals.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="19" data-line-end="20"&gt; &lt;strong&gt;&lt;a href="#t=24:24"&gt;24:24&lt;/a&gt;&lt;/strong&gt; Pricing for these services.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="20" data-line-end="21"&gt; &lt;strong&gt;&lt;a href="#t=25:34"&gt;25:34&lt;/a&gt;&lt;/strong&gt; How it actually runs.&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:31"&gt;27:31&lt;/a&gt;&lt;/strong&gt; Infrastructure costs and pricing models.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="22" data-line-end="23"&gt; &lt;strong&gt;&lt;a href="#t=30:19"&gt;30:19&lt;/a&gt;&lt;/strong&gt; Running production apps in Cloudflare.&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=31:49"&gt;31:49&lt;/a&gt;&lt;/strong&gt; Cloudflare and HonoJS.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="24" data-line-end="25"&gt; &lt;strong&gt;&lt;a href="#t=32:47"&gt;32:47&lt;/a&gt;&lt;/strong&gt; One year with Sentry and Ben’s role with Syntax.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="25" data-line-end="26"&gt; &lt;a href="https://syntax.fm/600"&gt;Episode 600 with David&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="26" data-line-end="27"&gt; &lt;strong&gt;&lt;a href="#t=39:33"&gt;39:33&lt;/a&gt;&lt;/strong&gt; How does it feel going from a software project to a media project?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="27" data-line-end="28"&gt; &lt;a href="https://syntax.fm/about"&gt;Syntax Team&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="28" data-line-end="29"&gt; &lt;strong&gt;&lt;a href="#t=43:00"&gt;43:00&lt;/a&gt;&lt;/strong&gt; How do you sell Syntax to Sentry?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="29" data-line-end="31"&gt; &lt;strong&gt;&lt;a href="#t=48:37"&gt;48:37&lt;/a&gt;&lt;/strong&gt; Sick Picks &amp; Shameless Plugs&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="31" data-line-end="32"&gt; &lt;a id="Sick_Picks_31"&gt;&lt;/a&gt;Sick Picks&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="33" data-line-end="35"&gt; Ben: &lt;a href="https://www.youtube.com/@randyrektor"&gt;Randy’s YouTube&lt;/a&gt;, &lt;a href="https://www.getboom.app/"&gt;Boom&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="35" data-line-end="36"&gt; &lt;a id="Shameless_Plugs_35"&gt;&lt;/a&gt;Shameless Plugs&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="37" data-line-end="39"&gt; Ben: &lt;a href="https://counterscale.dev/"&gt;Counterscale.dev&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="39" data-line-end="40"&gt; &lt;a id="Hit_us_up_on_Socials_39"&gt;&lt;/a&gt;Hit us up on Socials!&lt;/h3&gt; &lt;p class="has-line-data" data-line-start="41" data-line-end="42"&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="43" data-line-end="44"&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="45" data-line-end="46"&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="47" data-line-end="48"&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>

Scott and Wes dive into Cloudflare’s Analytics Engine and Workers with special guest Ben Vinegar, Syntax’s General Manager. Tune in as they explore Clickhouse, data tracking, infrastructure costs, and transitioning from software products to...

761: Cloudflare Analytics Engine, Workers + more with Ben Vinegar

Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=00:47">00:47</a> Brought to you by <a href="https://www.sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=01:44">01:44</a> A recording bug.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=03:18">03:18</a> VSCode versions.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=05:59">05:59</a> Tabs or no tabs.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=10:32">10:32</a> Navigation tips.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=11:35">11:35</a> Mouse and trackpad input.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=13:43">13:43</a> Move, select and expand by</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=19:07">19:07</a> Interface tips.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=19:17">19:17</a> Sidebars.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=24:23">24:23</a> Sticky headers.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=26:21">26:21</a> Activity bar.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=30:30">30:30</a> Show or hide?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=31:35">31:35</a> Profiles.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=32:43">32:43</a> Keyboard Shortcuts.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=32:49">32:49</a> Renaming.</li> <li class="has-line-data" data-line-start="20" data-line-end="31"> <a href="#t=34:32">34:32</a> Extensions. <ul> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=34:45">34:45</a> <a href= "https://marketplace.visualstudio.com/items?itemName=jkjustjoshing.vscode-text-pastry"> Text pastry</a>.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=36:43">36:43</a> <a href= "https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments"> Better comments</a>.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=39:03">39:03</a> <a href= "https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag"> Auto rename tag</a>.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=40:02">40:02</a> <a href= "https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case"> Change case</a>.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=40:25">40:25</a> <a href= "https://marketplace.visualstudio.com/items?itemName=earshinov.permute-lines"> Permute lines</a>.</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=41:26">41:26</a> <a href= "https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils"> File utils</a>.</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=43:20">43:20</a> <a href= "https://marketplace.visualstudio.com/items?itemName=richie5um2.vscode-sort-json"> Sort JSON objects</a>.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=43:50">43:50</a> <a href= "https://marketplace.visualstudio.com/items?itemName=qwtel.sqlite-viewer"> SQLite viewer</a>.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=44:29">44:29</a> <a href= "https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker"> Spell checker</a>.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=45:42">45:42</a> <a href= "https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension"> APC</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=49:19">49:19</a> Themes.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href= "https://marketplace.visualstudio.com/items?itemName=SyntaxFM.syntaxfm"> Syntax Theme</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="#t=53:05">53:05</a> Final tricks.</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href= "https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple"> Log Wrapper</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="#t=57:44">57:44</a> What about the AI stuff?</li> <li class="has-line-data" data-line-start="36" data-line-end="38"> <a href="#t=01:00:10">01:00:10</a> Sick Picks & Shameless Plugs.</li> </ul> <a id="Sick_Picks_38"></a>Sick Picks <ul> <li class="has-line-data" data-line-start="40" data-line-end="41"> Scott: <a href="https://amzn.to/3TL1SNY">Flicker Free Ultra Definition Phillips Bulbs</a>.</li> <li class="has-line-data" data-line-start="41" data-line-end="43"> Wes: <a href= "https://www.amazon.ca/IRIS-USA-Inc-CNL-5-Storage/dp/B07DFBSTFR">Clear Shoe Box Organizers</a>.</li> </ul> <a id="Shameless_Plugs_43"></a>Shameless Plugs <ul> <li class="has-line-data" data-line-start="45" data-line-end="47"> Scott: <a href="https://syntax.fm/snackpack">Syntax Newsletter</a>.</li> </ul> <a id="Hit_us_up_on_Socials_47"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

<description>&lt;p class="has-line-data" data-line-start="0" data-line-end="1"&gt;Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game.&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:47"&gt;00:47&lt;/a&gt;&lt;/strong&gt; Brought to you by &lt;a href="https://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:44"&gt;01:44&lt;/a&gt;&lt;/strong&gt; A recording bug.&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:18"&gt;03:18&lt;/a&gt;&lt;/strong&gt; VSCode versions.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="8" data-line-end="9"&gt; &lt;strong&gt;&lt;a href="#t=05:59"&gt;05:59&lt;/a&gt;&lt;/strong&gt; Tabs or no tabs.&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=10:32"&gt;10:32&lt;/a&gt;&lt;/strong&gt; Navigation tips.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="10" data-line-end="11"&gt; &lt;strong&gt;&lt;a href="#t=11:35"&gt;11:35&lt;/a&gt;&lt;/strong&gt; Mouse and trackpad input.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="11" data-line-end="12"&gt; &lt;strong&gt;&lt;a href="#t=13:43"&gt;13:43&lt;/a&gt;&lt;/strong&gt; Move, select and expand by&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=19:07"&gt;19:07&lt;/a&gt;&lt;/strong&gt; Interface tips.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="13" data-line-end="14"&gt; &lt;strong&gt;&lt;a href="#t=19:17"&gt;19:17&lt;/a&gt;&lt;/strong&gt; Sidebars.&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=24:23"&gt;24:23&lt;/a&gt;&lt;/strong&gt; Sticky headers.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="15" data-line-end="16"&gt; &lt;strong&gt;&lt;a href="#t=26:21"&gt;26:21&lt;/a&gt;&lt;/strong&gt; Activity bar.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="16" data-line-end="17"&gt; &lt;strong&gt;&lt;a href="#t=30:30"&gt;30:30&lt;/a&gt;&lt;/strong&gt; Show or hide?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="17" data-line-end="18"&gt; &lt;strong&gt;&lt;a href="#t=31:35"&gt;31:35&lt;/a&gt;&lt;/strong&gt; Profiles.&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=32:43"&gt;32:43&lt;/a&gt;&lt;/strong&gt; Keyboard Shortcuts.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="19" data-line-end="20"&gt; &lt;strong&gt;&lt;a href="#t=32:49"&gt;32:49&lt;/a&gt;&lt;/strong&gt; Renaming.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="20" data-line-end="31"&gt; &lt;strong&gt;&lt;a href="#t=34:32"&gt;34:32&lt;/a&gt;&lt;/strong&gt; Extensions. &lt;ul&gt; &lt;li class="has-line-data" data-line-start="21" data-line-end="22"&gt; &lt;strong&gt;&lt;a href="#t=34:45"&gt;34:45&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://marketplace.visualstudio.com/items?itemName=jkjustjoshing.vscode-text-pastry"&gt; Text pastry&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="22" data-line-end="23"&gt; &lt;strong&gt;&lt;a href="#t=36:43"&gt;36:43&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments"&gt; Better comments&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=39:03"&gt;39:03&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag"&gt; Auto rename tag&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="24" data-line-end="25"&gt; &lt;strong&gt;&lt;a href="#t=40:02"&gt;40:02&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case"&gt; Change case&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="25" data-line-end="26"&gt; &lt;strong&gt;&lt;a href="#t=40:25"&gt;40:25&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://marketplace.visualstudio.com/items?itemName=earshinov.permute-lines"&gt; Permute lines&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="26" data-line-end="27"&gt; &lt;strong&gt;&lt;a href="#t=41:26"&gt;41:26&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils"&gt; File utils&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=43:20"&gt;43:20&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://marketplace.visualstudio.com/items?itemName=richie5um2.vscode-sort-json"&gt; Sort JSON objects&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="28" data-line-end="29"&gt; &lt;strong&gt;&lt;a href="#t=43:50"&gt;43:50&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://marketplace.visualstudio.com/items?itemName=qwtel.sqlite-viewer"&gt; SQLite viewer&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="29" data-line-end="30"&gt; &lt;strong&gt;&lt;a href="#t=44:29"&gt;44:29&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker"&gt; Spell checker&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="30" data-line-end="31"&gt; &lt;strong&gt;&lt;a href="#t=45:42"&gt;45:42&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension"&gt; APC&lt;/a&gt;.&lt;/li&gt; &lt;/ul&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=49:19"&gt;49:19&lt;/a&gt;&lt;/strong&gt; Themes.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="32" data-line-end="33"&gt; &lt;a href= "https://marketplace.visualstudio.com/items?itemName=SyntaxFM.syntaxfm"&gt; Syntax Theme&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="33" data-line-end="34"&gt; &lt;strong&gt;&lt;a href="#t=53:05"&gt;53:05&lt;/a&gt;&lt;/strong&gt; Final tricks.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="34" data-line-end="35"&gt; &lt;a href= "https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple"&gt; Log Wrapper&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="35" data-line-end="36"&gt; &lt;strong&gt;&lt;a href="#t=57:44"&gt;57:44&lt;/a&gt;&lt;/strong&gt; What about the AI stuff?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="36" data-line-end="38"&gt; &lt;strong&gt;&lt;a href="#t=01:00:10"&gt;01:00:10&lt;/a&gt;&lt;/strong&gt; Sick Picks &amp; Shameless Plugs.&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="38" data-line-end="39"&gt; &lt;a id="Sick_Picks_38"&gt;&lt;/a&gt;Sick Picks&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="40" data-line-end="41"&gt; Scott: &lt;a href="https://amzn.to/3TL1SNY"&gt;Flicker Free Ultra Definition Phillips Bulbs&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="41" data-line-end="43"&gt; Wes: &lt;a href= "https://www.amazon.ca/IRIS-USA-Inc-CNL-5-Storage/dp/B07DFBSTFR"&gt;Clear Shoe Box Organizers&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="43" data-line-end="44"&gt; &lt;a id="Shameless_Plugs_43"&gt;&lt;/a&gt;Shameless Plugs&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="45" data-line-end="47"&gt; Scott: &lt;a href="https://syntax.fm/snackpack"&gt;Syntax Newsletter&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="47" data-line-end="48"&gt; &lt;a id="Hit_us_up_on_Socials_47"&gt;&lt;/a&gt;Hit us up on Socials!&lt;/h3&gt; &lt;p class="has-line-data" data-line-start="49" data-line-end="50"&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="51" data-line-end="52"&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="53" data-line-end="54"&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="55" data-line-end="56"&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>

Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game. Show Notes    Welcome to Syntax!  ...

760: Pro VSCode Setups

Scott and Wes serve up top tools and tricks for rapid idea execution, from JavaScript services like Valtown and Observable to database solutions including LowDB and Google Sheets integration. Get ready to streamline your development ideation process with these tasty insights! <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=02:16">02:16</a> Brought to you by <a href="https://www.sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="13"> <a href="#t=03:14">03:14</a> JavaScript Services. <ul> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=03:43">03:43</a> <a href= "https://www.val.town/">Valtown</a>.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=05:44">05:44</a> <a href= "https://observablehq.com/">Observable</a>.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=06:35">06:35</a> <a href= "https://jbook.qiushiyan.dev/">Notebooks</a>.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=08:23">08:23</a> <a href= "https://docs.deno.com/runtime/manual/tools/jupyter">Deno Juypter Notebooks</a>.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=09:51">09:51</a> <a href= "https://svelte.dev/repl/hello-world?version=4.2.15">Svelte Repl</a>.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=10:32">10:32</a> Playgrounds: TypeScript, Tailwind, etc…</li> </ul> </li> <li class="has-line-data" data-line-start="13" data-line-end="15"> <a href="#t=11:05">11:05</a> CSS Services. <ul> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=11:10">11:10</a> <a href= "https://codepen.io/">CodePen</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=13:14">13:14</a> Full stack services.</li> <li class="has-line-data" data-line-start="16" data-line-end="21"> <a href="#t=13:47">13:47</a> Your own stack. Hot Tips & Cool Treats. <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://github.com/wesbos/hot-tips/">Wes’s Hot Tips</a>.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://github.com/stolinski/cool-treats">Scott’s Cool Treats</a>.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=21:01">21:01</a> <a href= "https://bun.sh/docs/api/file-system-router">Bun file routing</a>.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=24:25">24:25</a> Tooling and tips.</li> </ul> </li> <li class="has-line-data" data-line-start="21" data-line-end="28"> <a href="#t=26:30">26:30</a> Database. <ul> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=26:51">26:51</a> Write to a file.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=27:40">27:40</a> <a href= "https://github.com/typicode/lowdb">LowDB</a>.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=29:00">29:00</a> <a href= "https://orm.drizzle.team/docs/get-started-sqlite">SQLite + Drizzle</a>.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=29:40">29:40</a> Google Sheets.</li> <li class="has-line-data" data-line-start="26" data-line-end="28"> <a href="#t=30:06">30:06</a> <a href= "https://sheetdb.io/">Sheet DB</a>.</li> </ul> </li> </ul> <a id="Hit_us_up_on_Socials_28"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

<description>&lt;p class="has-line-data" data-line-start="0" data-line-end="1"&gt; Scott and Wes serve up top tools and tricks for rapid idea execution, from JavaScript services like Valtown and Observable to database solutions including LowDB and Google Sheets integration. Get ready to streamline your development ideation process with these tasty insights!&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=02:16"&gt;02:16&lt;/a&gt;&lt;/strong&gt; Brought to you by &lt;a href="https://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="13"&gt; &lt;strong&gt;&lt;a href="#t=03:14"&gt;03:14&lt;/a&gt;&lt;/strong&gt; JavaScript Services. &lt;ul&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; &lt;a href= "https://www.val.town/"&gt;Valtown&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="8" data-line-end="9"&gt; &lt;strong&gt;&lt;a href="#t=05:44"&gt;05:44&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://observablehq.com/"&gt;Observable&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=06:35"&gt;06:35&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://jbook.qiushiyan.dev/"&gt;Notebooks&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="10" data-line-end="11"&gt; &lt;strong&gt;&lt;a href="#t=08:23"&gt;08:23&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://docs.deno.com/runtime/manual/tools/jupyter"&gt;Deno Juypter Notebooks&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="11" data-line-end="12"&gt; &lt;strong&gt;&lt;a href="#t=09:51"&gt;09:51&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://svelte.dev/repl/hello-world?version=4.2.15"&gt;Svelte Repl&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=10:32"&gt;10:32&lt;/a&gt;&lt;/strong&gt; Playgrounds: TypeScript, Tailwind, etc…&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="13" data-line-end="15"&gt; &lt;strong&gt;&lt;a href="#t=11:05"&gt;11:05&lt;/a&gt;&lt;/strong&gt; CSS Services. &lt;ul&gt; &lt;li class="has-line-data" data-line-start="14" data-line-end="15"&gt; &lt;strong&gt;&lt;a href="#t=11:10"&gt;11:10&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://codepen.io/"&gt;CodePen&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="15" data-line-end="16"&gt; &lt;strong&gt;&lt;a href="#t=13:14"&gt;13:14&lt;/a&gt;&lt;/strong&gt; Full stack services.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="16" data-line-end="21"&gt; &lt;strong&gt;&lt;a href="#t=13:47"&gt;13:47&lt;/a&gt;&lt;/strong&gt; Your own stack. Hot Tips &amp; Cool Treats. &lt;ul&gt; &lt;li class="has-line-data" data-line-start="17" data-line-end="18"&gt; &lt;a href="https://github.com/wesbos/hot-tips/"&gt;Wes’s Hot Tips&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="18" data-line-end="19"&gt; &lt;a href="https://github.com/stolinski/cool-treats"&gt;Scott’s Cool Treats&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="19" data-line-end="20"&gt; &lt;strong&gt;&lt;a href="#t=21:01"&gt;21:01&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://bun.sh/docs/api/file-system-router"&gt;Bun file routing&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="20" data-line-end="21"&gt; &lt;strong&gt;&lt;a href="#t=24:25"&gt;24:25&lt;/a&gt;&lt;/strong&gt; Tooling and tips.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="21" data-line-end="28"&gt; &lt;strong&gt;&lt;a href="#t=26:30"&gt;26:30&lt;/a&gt;&lt;/strong&gt; Database. &lt;ul&gt; &lt;li class="has-line-data" data-line-start="22" data-line-end="23"&gt; &lt;strong&gt;&lt;a href="#t=26:51"&gt;26:51&lt;/a&gt;&lt;/strong&gt; Write to a file.&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=27:40"&gt;27:40&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://github.com/typicode/lowdb"&gt;LowDB&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="24" data-line-end="25"&gt; &lt;strong&gt;&lt;a href="#t=29:00"&gt;29:00&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://orm.drizzle.team/docs/get-started-sqlite"&gt;SQLite + Drizzle&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="25" data-line-end="26"&gt; &lt;strong&gt;&lt;a href="#t=29:40"&gt;29:40&lt;/a&gt;&lt;/strong&gt; Google Sheets.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="26" data-line-end="28"&gt; &lt;strong&gt;&lt;a href="#t=30:06"&gt;30:06&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://sheetdb.io/"&gt;Sheet DB&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="28" data-line-end="29"&gt; &lt;a id="Hit_us_up_on_Socials_28"&gt;&lt;/a&gt;Hit us up on Socials!&lt;/h3&gt; &lt;p class="has-line-data" data-line-start="30" data-line-end="31"&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="32" data-line-end="33"&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="34" data-line-end="35"&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="36" data-line-end="37"&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>

Scott and Wes serve up top tools and tricks for rapid idea execution, from JavaScript services like Valtown and Observable to database solutions including LowDB and Google Sheets integration. Get ready to streamline your development ideation process...

759: How to Easily Explore Coding Ideas

Font Awesome is back with Web Awesome, an open source library of web components that will work with any framework because it’s based on standards. Today on Syntax we have Konnor Rogers and Cory LaViska here to talk all things Web Awesome. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=00:47">00:47</a> Brought to you by <a href="https://www.sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:49">02:49</a> What is Shoelace?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=07:21">07:21</a> What is Font Awesome?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=08:07">08:07</a> Font Awesome is getting into Web Components?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=11:35">11:35</a> What is Shoelace’s relationship with Web Awesome?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=13:33">13:33</a> Is the idea to make it quick to get up and running?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=15:46">15:46</a> What is the autoloader?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=16:29">16:29</a> Where does Web Awesome fit in the ecosystem?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=18:13">18:13</a> What does the styling game look like?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=20:33">20:33</a> What is Part in CSS?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Part mdn web docs</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=22:06">22:06</a> The reason we’re so stoked with Web Components.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=23:32">23:32</a> Custom elements are a natural progression.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=24:51">24:51</a> What are your thoughts on Open UI initiatives?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://floating-ui.com/">Floating UI</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://github.com/WICG/close-watcher">Close Watcher</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://caniuse.com/mdn-api_closewatcher">Can I Use</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=27:40">27:40</a> Wes’ escape key conundrum.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=30:21">30:21</a> A bug on the Syntax site.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=31:19">31:19</a> Let’s talk about <a href= "https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=nav_search&result=project&term=webawesome"> Kickstarter</a>.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=35:24">35:24</a> Do you know what premium inputs will be available in Web Awesome?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=36:12">36:12</a> Rich text editor.</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=40:18">40:18</a> Setting goals.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=41:48">41:48</a> Kickstarter giveaways.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=42:47">42:47</a> Have you tried drag and drop?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href= "https://github.com/atlassian/pragmatic-drag-and-drop">Pragmatic Drag and Drop</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=44:57">44:57</a> The layout component.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=48:50">48:50</a> What are your favorite components?</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> <a href="#t=50:29">50:29</a> Sick Picks + Shameless Plugs.</li> </ul> <a id="Sick_Picks_35"></a>Sick Picks <ul> <li class="has-line-data" data-line-start="37" data-line-end="38"> Konnor: <a href="https://enhance.dev/">Enhance.dev</a>, <a href= "https://extism.org/">Extism.org</a></li> <li class="has-line-data" data-line-start="38" data-line-end="40"> Cory: <a href="https://lit.dev/">Lit.dev</a></li> </ul> <a id="Shameless_Plugs_40"></a>Shameless Plugs <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> Cory: <a href= "https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=nav_search&result=project&term=webawesome"> Kickstarter</a></li> <li class="has-line-data" data-line-start="43" data-line-end="45"> Konnor: Everyone involved in open UI</li> </ul> <a id="Hit_us_up_on_Socials_45"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

<description>&lt;p class="has-line-data" data-line-start="0" data-line-end="1"&gt;Font Awesome is back with Web Awesome, an open source library of web components that will work with any framework because it’s based on standards. Today on Syntax we have Konnor Rogers and Cory LaViska here to talk all things Web Awesome.&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:47"&gt;00:47&lt;/a&gt;&lt;/strong&gt; Brought to you by &lt;a href="https://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=02:49"&gt;02:49&lt;/a&gt;&lt;/strong&gt; What is Shoelace?&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=07:21"&gt;07:21&lt;/a&gt;&lt;/strong&gt; What is Font Awesome?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="8" data-line-end="9"&gt; &lt;strong&gt;&lt;a href="#t=08:07"&gt;08:07&lt;/a&gt;&lt;/strong&gt; Font Awesome is getting into Web Components?&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=11:35"&gt;11:35&lt;/a&gt;&lt;/strong&gt; What is Shoelace’s relationship with Web Awesome?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="10" data-line-end="11"&gt; &lt;strong&gt;&lt;a href="#t=13:33"&gt;13:33&lt;/a&gt;&lt;/strong&gt; Is the idea to make it quick to get up and running?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="11" data-line-end="12"&gt; &lt;strong&gt;&lt;a href="#t=15:46"&gt;15:46&lt;/a&gt;&lt;/strong&gt; What is the autoloader?&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=16:29"&gt;16:29&lt;/a&gt;&lt;/strong&gt; Where does Web Awesome fit in the ecosystem?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="13" data-line-end="14"&gt; &lt;strong&gt;&lt;a href="#t=18:13"&gt;18:13&lt;/a&gt;&lt;/strong&gt; What does the styling game look like?&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=20:33"&gt;20:33&lt;/a&gt;&lt;/strong&gt; What is Part in CSS?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="15" data-line-end="16"&gt; &lt;a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/::part"&gt;CSS Part mdn web docs&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="16" data-line-end="17"&gt; &lt;strong&gt;&lt;a href="#t=22:06"&gt;22:06&lt;/a&gt;&lt;/strong&gt; The reason we’re so stoked with Web Components.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="17" data-line-end="18"&gt; &lt;strong&gt;&lt;a href="#t=23:32"&gt;23:32&lt;/a&gt;&lt;/strong&gt; Custom elements are a natural progression.&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=24:51"&gt;24:51&lt;/a&gt;&lt;/strong&gt; What are your thoughts on Open UI initiatives?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="19" data-line-end="20"&gt; &lt;a href="https://floating-ui.com/"&gt;Floating UI&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://github.com/WICG/close-watcher"&gt;Close Watcher&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="21" data-line-end="22"&gt; &lt;a href="https://caniuse.com/mdn-api_closewatcher"&gt;Can I Use&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="22" data-line-end="23"&gt; &lt;strong&gt;&lt;a href="#t=27:40"&gt;27:40&lt;/a&gt;&lt;/strong&gt; Wes’ escape key conundrum.&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=30:21"&gt;30:21&lt;/a&gt;&lt;/strong&gt; A bug on the Syntax site.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="24" data-line-end="25"&gt; &lt;strong&gt;&lt;a href="#t=31:19"&gt;31:19&lt;/a&gt;&lt;/strong&gt; Let’s talk about &lt;a href= "https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=nav_search&amp;result=project&amp;term=webawesome"&gt; Kickstarter&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="25" data-line-end="26"&gt; &lt;strong&gt;&lt;a href="#t=35:24"&gt;35:24&lt;/a&gt;&lt;/strong&gt; Do you know what premium inputs will be available in Web Awesome?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="26" data-line-end="27"&gt; &lt;strong&gt;&lt;a href="#t=36:12"&gt;36:12&lt;/a&gt;&lt;/strong&gt; Rich text editor.&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=40:18"&gt;40:18&lt;/a&gt;&lt;/strong&gt; Setting goals.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="28" data-line-end="29"&gt; &lt;strong&gt;&lt;a href="#t=41:48"&gt;41:48&lt;/a&gt;&lt;/strong&gt; Kickstarter giveaways.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="29" data-line-end="30"&gt; &lt;strong&gt;&lt;a href="#t=42:47"&gt;42:47&lt;/a&gt;&lt;/strong&gt; Have you tried drag and drop?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="30" data-line-end="31"&gt; &lt;a href= "https://github.com/atlassian/pragmatic-drag-and-drop"&gt;Pragmatic Drag and Drop&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=44:57"&gt;44:57&lt;/a&gt;&lt;/strong&gt; The layout component.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="32" data-line-end="33"&gt; &lt;strong&gt;&lt;a href="#t=48:50"&gt;48:50&lt;/a&gt;&lt;/strong&gt; What are your favorite components?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="33" data-line-end="35"&gt; &lt;strong&gt;&lt;a href="#t=50:29"&gt;50:29&lt;/a&gt;&lt;/strong&gt; Sick Picks + Shameless Plugs.&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="35" data-line-end="36"&gt; &lt;a id="Sick_Picks_35"&gt;&lt;/a&gt;Sick Picks&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="37" data-line-end="38"&gt; Konnor: &lt;a href="https://enhance.dev/"&gt;Enhance.dev&lt;/a&gt;, &lt;a href= "https://extism.org/"&gt;Extism.org&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="38" data-line-end="40"&gt; Cory: &lt;a href="https://lit.dev/"&gt;Lit.dev&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="40" data-line-end="41"&gt; &lt;a id="Shameless_Plugs_40"&gt;&lt;/a&gt;Shameless Plugs&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="42" data-line-end="43"&gt; Cory: &lt;a href= "https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=nav_search&amp;result=project&amp;term=webawesome"&gt; Kickstarter&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="43" data-line-end="45"&gt; Konnor: Everyone involved in open UI&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="45" data-line-end="46"&gt; &lt;a id="Hit_us_up_on_Socials_45"&gt;&lt;/a&gt;Hit us up on Socials!&lt;/h3&gt; &lt;p class="has-line-data" data-line-start="47" data-line-end="48"&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="49" data-line-end="50"&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="51" data-line-end="52"&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="53" data-line-end="54"&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>

Font Awesome is back with Web Awesome, an open source library of web components that will work with any framework because it’s based on standards. Today on Syntax we have Konnor Rogers and Cory LaViska here to talk all things Web Awesome. Show Notes...

758: Web Awesome with Konnor Rogers + Cory LaViska

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

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

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...

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

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.

Syntax - Tasty Web Development Treats

Details

Recent Episodes