On this repeat episode, The Primeagen, content creator, Twitch streamer, and all-around fun internet guy, gives his take on all the latest trends in web development.
Links
https://youtube.com/ThePrimeagen
https://www.twitch.tv/theprimeagen
https://twitter.com/ThePrimeagen
https://discord.gg/3ujcVMe
https://github.com/ThePrimeagen
https://www.youtube.com/ThePrimeTimeagen
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Primeagen.


Web development according to The Primeagen [Repeat]

<p class="has-line-data" data-line-start="0" data-line-end="1">Web scraping 101! Dive into the world of web scraping with Scott and Wes as they explore everything from tooling setup and navigating protected routes to effective data management. In this Tasty Treat episode, you’ll gain invaluable insights and techniques to scrape (almost) any website with ease.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=03:13">03:13</a></strong> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=05:00">05:00</a></strong> What is scraping?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://socialblade.com/">Socialblade</a>.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=08:01">08:01</a></strong> Examples of past scrapers.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://www.canadiantire.ca/en.html">Canadian Tire</a>.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=10:06">10:06</a></strong> Cloud app downloader.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=16:13">16:13</a></strong> Other use cases.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=16:58">16:58</a></strong> Scraping 101.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=17:28">17:28</a></strong> Client Side.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=19:08">19:08</a></strong> Private API.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://proxyman.io/iphone-device">Proxyman</a>.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=22:40">22:40</a></strong> Server rendered.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=23:27">23:27</a></strong> Initial state.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=24:57">24:57</a></strong> What format is the data in?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://developer.chrome.com/docs/puppeteer">Google Puppeteer Extension</a>.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=27:08">27:08</a></strong> Working with the DOM.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=27:12">27:12</a></strong> <a href= "https://www.npmjs.com/package/linkedom">Linkedom npm package</a>.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=29:02">29:02</a></strong> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll"> querySelector</a> everything.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=31:28">31:28</a></strong> How to find the elements without classes.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=34:08">34:08</a></strong> Use <a href= "https://www.w3schools.com/xml/xpath_syntax.asp">XPath</a> selectors for select by word.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=34:53">34:53</a></strong> Make them as flexible as you can. Classes change!</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=35:10">35:10</a></strong> AI is good at this!</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=36:26">36:26</a></strong> File downloading.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=38:20">38:20</a></strong> Working with protected routes.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://proxyman.io/">Proxyman</a>.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=40:41">40:41</a></strong> Programatically retrieve authentication keys because they are short-lived.</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://www.npmjs.com/package/fetch-cookie">Fetch Cookie</a>.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=43:20">43:20</a></strong> Deal-breakers.</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://en.wikipedia.org/wiki/Mechanical_Turk">Mechanical Turk</a>.</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=44:58">44:58</a></strong> What happened with Amazon?</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://www.wsj.com/articles/uniqlos-parent-company-bets-big-on-tiny-rfid-chips-600b124f"> Uniqlo Self-Checkout</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=46:42">46:42</a></strong> Wes’ portable refrigerator utopia.</li> <li class="has-line-data" data-line-start="37" data-line-end="39"> <strong><a href="#t=47:25">47:25</a></strong> Sick Picks & Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="39" data-line-end="40"> <a id="Sick_Picks_39"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> Scott: <a href= "https://folivora.ai/keyboardcleantool">KeyboardCleanTool</a>.</li> <li class="has-line-data" data-line-start="42" data-line-end="44"> Wes: <a href= "https://github.com/koekeishiya/yabai/wiki">Yabai</a>.</li> </ul> <h3 class="code-line" data-line-start="44" data-line-end="45"> <a id="Shameless_Plugs_44"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="46" data-line-end="48"> Scott: <a href="https://www.youtube.com/@syntaxfm">Syntax on YouTube</a></li> </ul> <h3 class="code-line" data-line-start="48" data-line-end="49"> <a id="Hit_us_up_on_Socials_48"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="50" data-line-end="51"> 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></p> <p class="has-line-data" data-line-start="52" data-line-end="53"> 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></p> <p class="has-line-data" data-line-start="54" data-line-end="55"> 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></p> <p class="has-line-data" data-line-start="56" data-line-end="57"> 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></p>

763: Web Scraping + Reverse Engineering APIs

<p>In today's episode we'll discuss some counterintuitive advice for your interviews. This advice applies in interview settings, but also applies in 1-1 meetings as well.</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://getunblocked.com">Unblocked</a></h2><p>Unblocked provides helpful and accurate answers developers need to get jobs done. It tailors answers by augmenting your source code with existing team knowledge in GitHub, Slack, Confluence and more. Spend less time digging for context and more time building great software. Check it out at <a href="https://getunblocked.com">getunblocked.com</a>.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Interview Prep: Two Counterintuitive Tips

424: The Spectrum of Automated Processes for Your Dev Team

<h2>Show Description</h2><p>Chris bought recording gear off an Instagram ad, our thoughts on WebC, CodePen upgrades Yarn, thoughts on the commercial value of open source, Automattic releases an app to install WordPress locally, IBM buys Hashicorp, income tax software, and a hack for getting Safari to respect background colors used in a pseudo selector.</p>
<p><a href='https://shoptalkshow.com/613/' style='background: #ca6533; color: black; padding: 8px 20px; text-decoration: none;'>Listen on Website &rarr;</a></p><h2>Links</h2><ul>
<li><a href="https://frostapalooza.bradfrost.com/">FROSTAPALOOZA - A CONCERT/PARTY/HAPPENING ON AUGUST 17th, 2024</a></li>
<li><a href="https://shoptalkshow.com/601/">601: Brad Frost on A Global Design System + Frostapalooza – ShopTalk</a></li>
<li><a href="https://www.audigolabs.com/">Audigo - The pocket-size recording studio</a></li>
<li><a href="https://support.apple.com/en-ca/guide/final-cut-pro/verc1fabc30/mac">Final Cut Pro Sync</a></li>
<li><a href="https://support.apple.com/en-ca/102546">iPhone Webcam for Mac</a></li>
<li><a href="https://apps.apple.com/us/app/acapella-from-picplaypost/id924635678">Acapella PicPlayPost</a></li>
<li><a href="https://www.11ty.dev/">Eleventy Generator</a></li>
<li><a href="https://astro.build/">Astro</a></li>
<li><a href="https://enhance.dev/">Enhance</a></li>
<li><a href="https://jekyllrb.com/">Transform Plain Text</a></li>
<li><a href="https://yarnpkg.com/">Home page</a></li>
<li><a href="https://pnpm.io/">Efficient Package Manager</a></li>
<li><a href="https://syntax.fm/show/759/how-to-easily-explore-coding-ideas">Explore Coding Ideas</a></li>
<li><a href="https://codepen.io/">Code Editor Community</a></li>
<li><a href="https://www.youtube.com/watch?v=LB8KwiiUGy0">Node.js Documentary</a></li>
<li><a href="https://changelog.com/news/goodbye-atom-hello-zed-AX84">Goodbye Atom. Hello Zed.</a></li>
<li><a href="https://zed.dev/blog/zed-is-now-open-source">Zed is now open source</a></li>
<li><a href="https://gitbutler.com/">Git Branching, Refined</a></li>
<li><a href="https://luroapp.com/">Design System Tracker</a></li>
<li><a href="https://localwp.com/">Local WordPress Development</a></li>
<li><a href="https://developer.wordpress.com/studio/">Studio by WordPress.com</a></li>
<li><a href="https://jetpack.com/">WordPress Security &amp; Performance</a></li>
<li><a href="https://www.linkedin.com/in/melaniesumner/">Melanie Sumner</a></li>
<li><a href="https://www.reuters.com/markets/deals/ibm-buy-hashicorp-64-billion-deal-expand-cloud-software-2024-04-24/">IBM acquires HashiCorp</a></li>
<li><a href="https://www.propublica.org/article/turbotax-just-tricked-you-into-paying-to-file-your-taxes">TurboTax Deceptive Filing</a></li>
<li><a href="https://www.npr.org/2024/04/12/1197958760/tiktok-tax-advice-gambling-losses-pets-deductions-g-wagons">TikTok Tax Advice</a></li>
<li><a href="https://codepen.io/kingkool68/pen/poYWRRE">Safari Selection Rendering</a></li>
<li><a href="https://www.val.town/">Val Town</a></li>
</ul><h2>Sponsors</h2>

613: Recording Live Music, WebC, Open Source, & WordPress Studio

<p class="has-line-data" data-line-start="0" data-line-end="1"> Scott and Wes discuss the delicate balance of what’s acceptable to borrow or be inspired by in web development and what crosses into territory that’s off-limits. Tune in as they share personal experiences, discuss where to find ethical inspiration, and offer tips on how to effectively capture and utilize it.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:57">01:57</a></strong> 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="14"> <strong><a href="#t=02:26">02:26</a></strong> What is okay to steal? <ul> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=02:57">02:57</a></strong> Color palettes.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=03:14">03:14</a></strong> Font stacks.</li> <li class="has-line-data" data-line-start="9" data-line-end="12"> <strong><a href="#t=06:26">06:26</a></strong> Type scales. <ul> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href= "https://www.tiktok.com/@wesbos/video/7198565156853386502">Warp’s CSS Gradient Border</a>.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href= "https://x.com/syntaxfm/status/1775907339792490785">Sentry’s Date Picker</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=08:52">08:52</a></strong> General layout patterns.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=10:39">10:39</a></strong> General vibes.</li> </ul> </li> <li class="has-line-data" data-line-start="14" data-line-end="19"> <strong><a href="#t=11:20">11:20</a></strong> What is NOT okay to steal? <ul> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=11:26">11:26</a></strong> Whole site designs.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=13:32">13:32</a></strong> Taking too many things from ‘what to steal’ list.</li> <li class="has-line-data" data-line-start="17" data-line-end="19"> <strong><a href="#t=16:30">16:30</a></strong> Text copy. <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://wesbos.com/parity-purchasing-power">Wes’ Parity Purchasing Power</a>.</li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=18:48">18:48</a></strong> What we’ve had stolen + how it feels.</li> <li class="has-line-data" data-line-start="20" data-line-end="42"> <strong><a href="#t=21:45">21:45</a></strong> Where to find inspiration. <ul> <li class="has-line-data" data-line-start="21" data-line-end="26"> <strong><a href="#t=21:56">21:56</a></strong> Code inspiration. <ul> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://getcssscan.com/css-buttons-examples">CSS Scan Buttons</a>.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href= "https://getcssscan.com/css-box-shadow-examples?ref=beautifulbuttons-bottom"> CSS Scan Box Shadows</a>.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://tympanus.net/codrops/">Codrops</a>.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://codepen.io/">CodePen</a></li> </ul> </li> <li class="has-line-data" data-line-start="26" data-line-end="37"> <strong><a href="#t=25:18">25:18</a></strong> Design inspiration. <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://bentogrids.com/">Bentro Grids</a>.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="https://dribbble.com/">Dribble</a>.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://www.siteinspire.com/">Site Inspire</a>.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://saaslandingpage.com/">SaaS Landing Pages</a>.</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://onepagelove.com/">One Page Love</a>.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://www.typewolf.com/">Type Wolf</a>.</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://mobbin.com/browse/ios/apps">Mobbin</a>.</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://syntax.fm/snackpack/">Syntax Newsletter</a>.</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://www.hoverstat.es/">Hoverstat.es</a>.</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://ilovecreatives.com/internet-gems">Internet Gems</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="37" data-line-end="42"> <strong><a href="#t=32:48">32:48</a></strong> UX inspiration. <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://goodui.org/">Good UI</a>.</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://component.gallery/">The Component Gallery</a>.</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://open-ui.org/">Open UI</a>.</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://nicelydone.club/">Nicely Done</a>.</li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="42" data-line-end="44"> <strong><a href="#t=35:25">35:25</a></strong> How to capture inspiration.</li> </ul> <h3 class="code-line" data-line-start="44" data-line-end="45"> <a id="Hit_us_up_on_Socials_44"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="46" data-line-end="47"> 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></p> <p class="has-line-data" data-line-start="48" data-line-end="49"> 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></p> <p class="has-line-data" data-line-start="50" data-line-end="51"> 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></p> <p class="has-line-data" data-line-start="52" data-line-end="53"> 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></p>

762: What to Steal. Finding Inspiration in Web Development

Authentication can be difficult to implement in your app. To help us better understand the authentication ecosystem, we were joined by our guest, Braden Sidoti, co-founder and CTO of Clerk.

Guests:
Braden Sidoti - @bsinthewild

Panelists:
Ryan Burgess - @burgessdryan

Picks:
Braden Sidoti - Patagonia Black Hole Gear Tote https://www.patagonia.com/product/black-hole-gear-tote-bag-61-liters/196924045774.html
Ryan Burgess - Automakers Are Sharing Consumers’ Driving Behavior With Insurance Companies https://www.nytimes.com/2024/03/11/technology/carmakers-driver-tracking-insurance.html

Episode transcript: https://www.frontendhappyhour.com/episodes/implementing-authentication-in-your-app

Episode 193 - Implementing authentication in your app

<p class="has-line-data" data-line-start="0" data-line-end="1"> 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.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:17">01:17</a></strong> 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"> <strong><a href="#t=02:21">02:21</a></strong> 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"> <strong><a href="#t=04:00">04:00</a></strong> 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"> <strong><a href="#t=09:08">09:08</a></strong> What is <a href= "https://clickhouse.com/">clickhouse</a>?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=11:01">11:01</a></strong> Can Clickhouse be used for things outside of analytics tracking?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=13:46">13:46</a></strong> What kind of events are you able to track?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=15:00">15:00</a></strong> 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"> <strong><a href="#t=18:40">18:40</a></strong> Data type limitations.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=19:55">19:55</a></strong> The troubles with sampling data.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=23:57">23:57</a></strong> Sample intervals.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=24:24">24:24</a></strong> Pricing for these services.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=25:34">25:34</a></strong> How it actually runs.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=27:31">27:31</a></strong> Infrastructure costs and pricing models.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=30:19">30:19</a></strong> Running production apps in Cloudflare.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=31:49">31:49</a></strong> Cloudflare and HonoJS.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=32:47">32:47</a></strong> 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"> <strong><a href="#t=39:33">39:33</a></strong> 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"> <strong><a href="#t=43:00">43:00</a></strong> How do you sell Syntax to Sentry?</li> <li class="has-line-data" data-line-start="29" data-line-end="31"> <strong><a href="#t=48:37">48:37</a></strong> Sick Picks & Shameless Plugs</li> </ul> <h3 class="code-line" data-line-start="31" data-line-end="32"> <a id="Sick_Picks_31"></a>Sick Picks</h3> <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> <h3 class="code-line" data-line-start="35" data-line-end="36"> <a id="Shameless_Plugs_35"></a>Shameless Plugs</h3> <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> <h3 class="code-line" data-line-start="39" data-line-end="40"> <a id="Hit_us_up_on_Socials_39"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="41" data-line-end="42"> 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></p> <p class="has-line-data" data-line-start="43" data-line-end="44"> 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></p> <p class="has-line-data" data-line-start="45" data-line-end="46"> 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></p> <p class="has-line-data" data-line-start="47" data-line-end="48"> 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></p>

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

Brad Frost dives deep into the world of design systems and AI integration, discussing the maturity of code versus visual design aspects, the power of component generation, the importance of organizational-specific solutions, and the role of human judgment in AI-driven workflows.
Links
https://bradfrost.com
https://twitter.com/bradfrost
https://mastodon.social/@bradfrost
https://www.youtube.com/@brad_frost
https://github.com/bradfrost
https://codepen.io/bradfrost
https://www.linkedin.com/in/bradfrost
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Brad Frost.


AI and design systems with Brad Frost

<p>After today's episode, your resumé is going to get better! In this episode I will share the biggest mistake and the best advice I've ever received about building a great resumé. This will take some work from you, but I hope you walk away from this episode feeling like you have the right mindset to improve your resumé drastically, and land more interviews, ultimately leading to better job opportunities for the Developer Tea audience!</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://neo4j.com/developer?&utm_campaign=GDB&utm_content=AMS-SrDev-ABM-Evergreen%5B%E2%80%A6%5DvHub1--&utm_medium=Audio&utm_source=Developertea&utm_justglobal=">Neo4j</a></h2><p>Is your code getting dragged down by endless JOINs and long query times? Try simplifying the complexity with graphs!</p><p>With Neo4j, you can code in your favorite programming language and against any<br />driver. See what graphs can do for you at <a href="https://neo4j.com/developer?&utm_campaign=GDB&utm_content=AMS-SrDev-ABM-Evergreen%5B%E2%80%A6%5DvHub1--&utm_medium=Audio&utm_source=Developertea&utm_justglobal=">Neo4j.com/developer</a></p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


The Top Resumé Mistake I See, Plus the Best Resumé Advice I've Ever Received

We welcome on The React Guy, Dan Abramov, to talk about his time working on the React core team, demystifying React Server Components, how React has evolved, and more!
Links
https://danabra.mov
https://twitter.com/danabramov2
https://bsky.app/profile/danabra.mov
https://twitter.com/danabramov
https://overreacted.io
https://www.youtube.com/channel/UCVhEjiCLn2v4MEt3Q4T2iaA
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Dan Abramov.


Dan Abramov on React, RSCs, and the future [Repeat]

<p class="has-line-data" data-line-start="0" data-line-end="1">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.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:47">00:47</a></strong> 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"> <strong><a href="#t=01:44">01:44</a></strong> A recording bug.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=03:18">03:18</a></strong> VSCode versions.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=05:59">05:59</a></strong> Tabs or no tabs.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=10:32">10:32</a></strong> Navigation tips.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=11:35">11:35</a></strong> Mouse and trackpad input.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=13:43">13:43</a></strong> Move, select and expand by</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=19:07">19:07</a></strong> Interface tips.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=19:17">19:17</a></strong> Sidebars.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=24:23">24:23</a></strong> Sticky headers.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=26:21">26:21</a></strong> Activity bar.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=30:30">30:30</a></strong> Show or hide?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=31:35">31:35</a></strong> Profiles.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=32:43">32:43</a></strong> Keyboard Shortcuts.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=32:49">32:49</a></strong> Renaming.</li> <li class="has-line-data" data-line-start="20" data-line-end="31"> <strong><a href="#t=34:32">34:32</a></strong> Extensions. <ul> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=34:45">34:45</a></strong> <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"> <strong><a href="#t=36:43">36:43</a></strong> <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"> <strong><a href="#t=39:03">39:03</a></strong> <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"> <strong><a href="#t=40:02">40:02</a></strong> <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"> <strong><a href="#t=40:25">40:25</a></strong> <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"> <strong><a href="#t=41:26">41:26</a></strong> <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"> <strong><a href="#t=43:20">43:20</a></strong> <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"> <strong><a href="#t=43:50">43:50</a></strong> <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"> <strong><a href="#t=44:29">44:29</a></strong> <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"> <strong><a href="#t=45:42">45:42</a></strong> <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"> <strong><a href="#t=49:19">49:19</a></strong> 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"> <strong><a href="#t=53:05">53:05</a></strong> 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"> <strong><a href="#t=57:44">57:44</a></strong> What about the AI stuff?</li> <li class="has-line-data" data-line-start="36" data-line-end="38"> <strong><a href="#t=01:00:10">01:00:10</a></strong> Sick Picks & Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="38" data-line-end="39"> <a id="Sick_Picks_38"></a>Sick Picks</h3> <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> <h3 class="code-line" data-line-start="43" data-line-end="44"> <a id="Shameless_Plugs_43"></a>Shameless Plugs</h3> <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> <h3 class="code-line" data-line-start="47" data-line-end="48"> <a id="Hit_us_up_on_Socials_47"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="49" data-line-end="50"> 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></p> <p class="has-line-data" data-line-start="51" data-line-end="52"> 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></p> <p class="has-line-data" data-line-start="53" data-line-end="54"> 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></p> <p class="has-line-data" data-line-start="55" data-line-end="56"> 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></p>

760: Pro VSCode Setups

<p>In today's episode, we talk about the counterintuitive process of prioritizing based on critical path. This is not a novel concept that I've invented, but rather a revisiting of the classic discussion started by Eli Goldratt in his book "The Goal", and later in his book "Critical Path", based on the theory of constraints.</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://www.propelauth.com/">PropelAuth</a></h2><p>If you're building a B2B product and looking for an auth provider that can support you now and as you grow, give PropelAuth a try. All of their features are available to test without a credit card, and you can get started at <a href="https://www.propelauth.com">www.propelauth.com</a> today!</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Prioritization Using Critical Path Thinking

<p class="has-line-data" data-line-start="0" data-line-end="1"> 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!</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=02:16">02:16</a></strong> 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"> <strong><a href="#t=03:14">03:14</a></strong> JavaScript Services. <ul> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=03:43">03:43</a></strong> <a href= "https://www.val.town/">Valtown</a>.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=05:44">05:44</a></strong> <a href= "https://observablehq.com/">Observable</a>.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=06:35">06:35</a></strong> <a href= "https://jbook.qiushiyan.dev/">Notebooks</a>.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=08:23">08:23</a></strong> <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"> <strong><a href="#t=09:51">09:51</a></strong> <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"> <strong><a href="#t=10:32">10:32</a></strong> Playgrounds: TypeScript, Tailwind, etc…</li> </ul> </li> <li class="has-line-data" data-line-start="13" data-line-end="15"> <strong><a href="#t=11:05">11:05</a></strong> CSS Services. <ul> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=11:10">11:10</a></strong> <a href= "https://codepen.io/">CodePen</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=13:14">13:14</a></strong> Full stack services.</li> <li class="has-line-data" data-line-start="16" data-line-end="21"> <strong><a href="#t=13:47">13:47</a></strong> 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"> <strong><a href="#t=21:01">21:01</a></strong> <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"> <strong><a href="#t=24:25">24:25</a></strong> Tooling and tips.</li> </ul> </li> <li class="has-line-data" data-line-start="21" data-line-end="28"> <strong><a href="#t=26:30">26:30</a></strong> Database. <ul> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=26:51">26:51</a></strong> Write to a file.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=27:40">27:40</a></strong> <a href= "https://github.com/typicode/lowdb">LowDB</a>.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=29:00">29:00</a></strong> <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"> <strong><a href="#t=29:40">29:40</a></strong> Google Sheets.</li> <li class="has-line-data" data-line-start="26" data-line-end="28"> <strong><a href="#t=30:06">30:06</a></strong> <a href= "https://sheetdb.io/">Sheet DB</a>.</li> </ul> </li> </ul> <h3 class="code-line" data-line-start="28" data-line-end="29"> <a id="Hit_us_up_on_Socials_28"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="30" data-line-end="31"> 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></p> <p class="has-line-data" data-line-start="32" data-line-end="33"> 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></p> <p class="has-line-data" data-line-start="34" data-line-end="35"> 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></p> <p class="has-line-data" data-line-start="36" data-line-end="37"> 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></p>

759: How to Easily Explore Coding Ideas

<h2>Show Description</h2><p>Matt is here to talk about creating the perfect fantasy CMS for blogging, moderating comments at Metafilter, building sane defaults into programs, how difficult the web is, do we want AI in our CMS, and where is content headed on the internet?</p>
<p><a href='https://shoptalkshow.com/612/' style='background: #ca6533; color: black; padding: 8px 20px; text-decoration: none;'>Listen on Website &rarr;</a></p><h2>Guests</h2><h3>Matthew Haughey</h3><p><a href='https://a.wholelottanothing.org/'>Guest's Main URL</a> • <a href='https://elk.zone/xoxo.zone/@mathowie'>Guest's Twitter</a></p><p><p>A writer with over 25 years of experience building products. In that time I've worked as a designer, coder, company founder, and senior writer.</p>
</p><h2>Links</h2><ul>
<li><a href="https://www.haughey.com/">Matt Haughey</a></li>
<li><a href="https://www.blogger.com/about/?bpli=1">Blogger.com - Create a unique and beautiful blog easily.</a></li>
<li><a href="https://www.metafilter.com/">MetaFilter | Community Weblog</a></li>
<li><a href="https://www.movabletype.org/">MovableType.org</a></li>
<li><a href="https://b2evolution.net/about/b2evolution-vs-wordpress">The story of b2, b2evolution and WordPress</a></li>
<li><a href="https://ghost.org/">Ghost: The best open source blogging platform</a></li>
<li><a href="https://micro.blog/">Micro.blog</a></li>
<li><a href="https://a.wholelottanothing.org/">A Whole Lotta Nothing</a></li>
<li><a href="https://a.wholelottanothing.org/notes-from-migrating/">Notes from migrating 24 years of blog posts from WordPress to Ghost</a></li>
<li><a href="https://a.wholelottanothing.org/a-blueprint-of-my-dream-blogging-cms/">Ideas for my dream blogging CMS</a></li>
<li><a href="https://a.wholelottanothing.org/embrace-the-weird/">Embrace the weird</a></li>
<li><a href="https://a.wholelottanothing.org/the-newest-search-engine-episode-is-a-banger/">The newest episode of Search Engine is incredible</a></li>
<li><a href="https://www.theverge.com/23642073/best-printer-2023-brother-laser-wi-fi-its-fine">Best printer 2023: just buy this Brother laser printer everyone has, it’s fine - The Verge</a></li>
</ul><h2>Sponsors</h2>

612: Matt Haughey on a Fantasy Blogging CMS Setup

<p class="has-line-data" data-line-start="0" data-line-end="1">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.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:47">00:47</a></strong> 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"> <strong><a href="#t=02:49">02:49</a></strong> What is Shoelace?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=07:21">07:21</a></strong> What is Font Awesome?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=08:07">08:07</a></strong> Font Awesome is getting into Web Components?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=11:35">11:35</a></strong> What is Shoelace’s relationship with Web Awesome?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=13:33">13:33</a></strong> 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"> <strong><a href="#t=15:46">15:46</a></strong> What is the autoloader?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=16:29">16:29</a></strong> Where does Web Awesome fit in the ecosystem?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=18:13">18:13</a></strong> What does the styling game look like?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=20:33">20:33</a></strong> 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"> <strong><a href="#t=22:06">22:06</a></strong> The reason we’re so stoked with Web Components.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=23:32">23:32</a></strong> Custom elements are a natural progression.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=24:51">24:51</a></strong> 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"> <strong><a href="#t=27:40">27:40</a></strong> Wes’ escape key conundrum.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=30:21">30:21</a></strong> A bug on the Syntax site.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=31:19">31:19</a></strong> 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"> <strong><a href="#t=35:24">35:24</a></strong> 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"> <strong><a href="#t=36:12">36:12</a></strong> Rich text editor.</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=40:18">40:18</a></strong> Setting goals.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=41:48">41:48</a></strong> Kickstarter giveaways.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=42:47">42:47</a></strong> 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"> <strong><a href="#t=44:57">44:57</a></strong> The layout component.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=48:50">48:50</a></strong> What are your favorite components?</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> <strong><a href="#t=50:29">50:29</a></strong> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="35" data-line-end="36"> <a id="Sick_Picks_35"></a>Sick Picks</h3> <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> <h3 class="code-line" data-line-start="40" data-line-end="41"> <a id="Shameless_Plugs_40"></a>Shameless Plugs</h3> <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> <h3 class="code-line" data-line-start="45" data-line-end="46"> <a id="Hit_us_up_on_Socials_45"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="47" data-line-end="48"> 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></p> <p class="has-line-data" data-line-start="49" data-line-end="50"> 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></p> <p class="has-line-data" data-line-start="51" data-line-end="52"> 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></p> <p class="has-line-data" data-line-start="53" data-line-end="54"> 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></p>

758: Web Awesome with Konnor Rogers + Cory LaViska

We welcome back Aleksandra Sikora, Developer Experience Lead at EdgeDB, and talk to her about the importance of TypeScript-powered backends for frontend developers, focusing on scalability, performance improvements, tools like Redis for caching, and more.
Links
https://twitter.com/aleksandrasays
https://medium.com/@aleksandrasays
https://portal.gitnation.org/person/aleksandra_sikora
https://github.com/beerose
https://www.aleksandra.codes
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Aleksandra Sikora.


TypeScript-powered backends for frontend devs with Aleksandra Sikora

Lucas Santos, senior software engineer at OpenVolt, shares his journey about experiencing frustrations with Jest while working at Klarna, to exploring better testing alternatives, and ultimately contributing to the Node.js test runner's core.
Links
https://www.youtube.com/@lsantosdev
https://beacons.ai/lsantos
https://twitter.com/_staticvoid
https://linkedin.com/in/lhs-santos
https://medium.lsantos.dev
https://github.com/khaosdoctor
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Lucas Santos.


What’s new with the Node.js test runner with Lucas Santos

<p class="has-line-data" data-line-start="0" data-line-end="1"> 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.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:51">00:51</a></strong> 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"> <strong><a href="#t=01:17">01:17</a></strong> When should I use Light DOM or Shadow DOM?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=03:43">03:43</a></strong> 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"> <strong><a href="#t=08:29">08:29</a></strong> 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"> <strong><a href="#t=15:05">15:05</a></strong> 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"> <strong><a href="#t=16:34">16:34</a></strong> 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"> <strong><a href="#t=23:15">23:15</a></strong> 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"> <strong><a href="#t=27:44">27:44</a></strong> 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"> <strong><a href="#t=32:31">32:31</a></strong> 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"> <strong><a href="#t=36:52">36:52</a></strong> 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"> <strong><a href="#t=39:41">39:41</a></strong> 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"> <strong><a href="#t=43:51">43:51</a></strong> Sick Picks.</li> </ul> <h3 class="code-line" data-line-start="37" data-line-end="38"> <a id="Sick_Picks_37"></a>Sick Picks</h3> <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> <h3 class="code-line" data-line-start="42" data-line-end="43"> <a id="Hit_us_up_on_Socials_42"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="44" data-line-end="45"> 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></p> <p class="has-line-data" data-line-start="46" data-line-end="47"> 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></p> <p class="has-line-data" data-line-start="48" data-line-end="49"> 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></p> <p class="has-line-data" data-line-start="50" data-line-end="51"> 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></p>

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

<p>The most common mistake for any manager is to fail to clarify. This often happens because we mistake our average communications for having perfect clarity, when in fact we most often don't communicate at high levels of clarity. This isn't because we are bad at communication, but rather because our social communications carry less consequence when they aren't precise.</p><p>Clarity is not simply being honest. We'll discuss the importance of clarity in this episode, and your first steps towards achieving clarity above the norm.</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://getunblocked.com">Unblocked</a></h2><p>Unblocked provides helpful and accurate answers developers need to get jobs done. It tailors answers by augmenting your source code with existing team knowledge in GitHub, Slack, Confluence and more. Spend less time digging for context and more time building great software. Check it out at <a href="https://getunblocked.com">getunblocked.com</a>.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Cultural Antidotes - Clarity Isn't Just Honesty

423: Cognitive Strategies for Coders

<p class="has-line-data" data-line-start="0" data-line-end="1"> Scott and Wes chomp through CSS Mixins and Functions, discussing the latest features making their way into CSS. From Tailwind-like classes to fluid typography, join us as we explore the possibilities and practical applications of these new tools.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:24">01:24</a></strong> 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"> <strong><a href="#t=03:00">03:00</a></strong> CSS Is getting Functions and Mixins!</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://css.oddbird.net/sasslike/mixins-functions/">CSS Mixins and Functions Explainer</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href= "https://github.com/w3c/csswg-drafts/issues/9350#issuecomment-1939628591"> CSS Working Group Discussion</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=06:19">06:19</a></strong> Functions and mixins, how are they different?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=07:26">07:26</a></strong> Don’t get hung up on the syntax, or maybe do.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=09:12">09:12</a></strong> CSS Functions.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=12:02">12:02</a></strong> Some use-cases.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=15:58">15:58</a></strong> CSS Mixins.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=16:31">16:31</a></strong> Tailwind-like classes.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=17:53">17:53</a></strong> Tailwind-like arbitrary syntax.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=20:08">20:08</a></strong> Fluid typography.</li> <li class="has-line-data" data-line-start="17" data-line-end="19"> <strong><a href="#t=21:13">21:13</a></strong> Let’s talk about logic.</li> </ul> <h3 class="code-line" data-line-start="19" data-line-end="20"> <a id="Hit_us_up_on_Socials_19"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="21" data-line-end="22"> 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></p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 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></p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 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></p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 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></p>

756: CSS Is Getting Mixins + Functions

<h2>Show Description</h2><p>Dave &amp; Chris and thoughts on career advice that worked 3 years ago but isn't as helpful now, marking tests with ChatGPT, is taking a Drupal job in 2024 a good idea, Chris got #gear sniped, P3 color follow up, the confusing File System APIs, and where did all the lightboxes go?</p>
<p><a href='https://shoptalkshow.com/611/' style='background: #ca6533; color: black; padding: 8px 20px; text-decoration: none;'>Listen on Website &rarr;</a></p><h2>Links</h2><ul>
<li><a href="https://twitter.com/chantastic">chan (@chantastic) / X</a></li>
<li><a href="https://www.texastribune.org/">The Texas Tribune</a></li>
<li><a href="https://www.the-coming-wave.com/">The Coming Wave Book</a></li>
<li><a href="https://www.drupal.org/">Drupal - Open Source CMS | Drupal.org</a></li>
<li><a href="https://www.amazon.com/Electric-Adjustable-130000RPM-Blower-Good-Compressed/dp/B0CPDHHHDL?th=1">Electric Air Duster - 130000RPM Compressed Air Duster，3 Gear Adjustable Jet Dry Blower can Reusable Can for Computer Keyboard,Outdoors,Car,Home. : Electronics</a></li>
<li><a href="https://xscopeapp.com/">xScope • Measure. Inspect. Test.</a></li>
<li><a href="https://cloudfour.com/thinks/the-many-confusing-file-system-apis/">The Many, Confusing File System APIs – Cloud Four</a></li>
</ul><h2>Sponsors</h2>

611: React! TypeScript! Jobification! Drupal!

In this episode, we discuss Jem's tweet about feeling like you have to work more than 40 hours a week to get promoted. Jason Lengstorf joins us to debate the topic of promotions.

Guests:
Jason Lengstorf - @jlengstorf

Panelists:
Ryan Burgess - @burgessdryan
Jem Young - @JemYoung
Shirley Wu - @sxywu
Augustus Yuan - @augburto

Episode transcript: https://www.frontendhappyhour.com/episodes/do-you-need-to-work-more-than-9-to-5-to-get-promoted

Episode 192 - Do you need to work more than 9 to 5 to get promoted?

<p class="has-line-data" data-line-start="0" data-line-end="1">We were wrong, Manifest V3 is a big deal. Scott and Wes sit down with Oliver Dunk from Google to dive into the intricate world of Chrome Extensions development. From dissecting Manifest V3 to exploring the evolving landscape of browser security and extension reviews, this conversation covers the present and future of browser customization.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:32">00:32</a></strong> Who is Oliver Dunk?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:00">02:00</a></strong> Brought to you by <a href="www.sentry.io/syntax">Sentry</a>.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=03:17">03:17</a></strong> Manifest V3.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=08:59">08:59</a></strong> How many rules can you add?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=09:56">09:56</a></strong> What even is a rule?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=10:52">10:52</a></strong> Is Google trying to kill ad blockers?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=13:56">13:56</a></strong> What are the bad guys doing with Chrome extensions?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=15:17">15:17</a></strong> Can a browser extension access HTTP-only cookies?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=16:06">16:06</a></strong> Is Chrome reviewing all of these extensions?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=19:06">19:06</a></strong> Is there a way to side-step Google’s review process?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href= "https://www.reddit.com/r/uBlockOrigin/comments/17as8o8/the_real_threat_of_manifest_v3/"> Reddit Thread, The real threat of Manifest V3</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=20:32">20:32</a></strong> Do you see the negative chatter?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=21:18">21:18</a></strong> Service workers - how do do you access the DOM?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=23:32">23:32</a></strong> Do you think we’ll see more DOM APIs in service workers?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=25:58">25:58</a></strong> Do you have a favorite Chrome extension?</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=28:33">28:33</a></strong> Has Google ever explored something comparable to Boost?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://developer.chrome.com/docs/extensions/reference/api/sidePanel"> SidePanel</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=33:09">33:09</a></strong> Let’s talk about the development stack.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=35:54">35:54</a></strong> 1Password and Chrome.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=38:39">38:39</a></strong> What is the best way to debug an extension?</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://www.youtube.com/watch?v=Ta-YTDhiBIQ">YouTube Chrome for Developers</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=40:33">40:33</a></strong> Manifest V3 and the web request blocking API.</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=41:57">41:57</a></strong> Known tracking payloads.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=44:04">44:04</a></strong> Do you think there is a path forward that makes ad-block developers happy?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=44:45">44:45</a></strong> Do you run an ad blocker?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=45:20">45:20</a></strong> Whitelisting and opt-ins.</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=46:38">46:38</a></strong> What’s your tech setup?</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=47:18">47:18</a></strong> What do you do to stay up to date?</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=47:51">47:51</a></strong> Sick Picks + Shameless Plugs.</li> <li class="has-line-data" data-line-start="34" data-line-end="36"> <strong><a href="#t=51:47">51:47</a></strong> Wait, is Safari adopting V3 as well?</li> </ul> <h3 class="code-line" data-line-start="36" data-line-end="37"> <a id="Sick_Picks_36"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="38" data-line-end="40"> Oliver: <a href="https://www.youtube.com/@Defunctland">Defunctland YouTube</a>, <a href="https://www.youtube.com/@LEMMiNO">LEMMiNO YouTube</a></li> </ul> <h3 class="code-line" data-line-start="40" data-line-end="41"> <a id="Shameless_Plugs_40"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="42" data-line-end="44"> Oliver: <a href= "https://developer.chrome.com/docs/extensions/get-started">Chrome Extensions Getting Started</a>, <a href= "https://play.web-extensions.dev/">WebExtension Playground</a></li> </ul> <h3 class="code-line" data-line-start="44" data-line-end="45"> <a id="Hit_us_up_on_Socials_44"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="46" data-line-end="47"> 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></p> <p class="has-line-data" data-line-start="48" data-line-end="49"> 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></p> <p class="has-line-data" data-line-start="50" data-line-end="51"> 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></p> <p class="has-line-data" data-line-start="52" data-line-end="53"> 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></p>

755: Chrome Extensions and Ad Blockers VS Google with Oliver Dunk

With the recent merger of Angular and Wiz, a Google framework, Minko Gechev, Product and Developer Relations Lead for Angular, returns to talk about the latest news: Angular and Wiz are merging. So we delve into what that means, signals, and how Angular is evolving.
Links
https://blog.mgechev.com
https://www.linkedin.com/in/mgechev
https://github.com/mgechev
https://twitter.com/mgechev
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Minko Gechev.


The Angular and Wiz merger with Minko Gechev

Yagiz Nizipli, Senior Software Engineer at Sentry, talks about how to optimize URL parsing in Node.js, the development of the Ada parsing library, and future plans for enhancing the URL parser in Node.js.
Links
https://twitter.com/yagiznizipli
https://www.yagiz.co
https://github.com/anonrig
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Yagiz Nizipli.


Optimizing URL parsing in Node with Yagiz Nizipli

<p class="has-line-data" data-line-start="0" data-line-end="1"> Ready to level up your career in web development? Join Wes and Scott as they discuss techniques and best practices for advancing in the field. From mastering technical skills to navigating workplace dynamics, this episode offers actionable advice to help you thrive in your career.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:17">00:17</a></strong> How can a front-end developer advance in their career?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=01:10">01:10</a></strong> Brought to you by <a href="https://sentry.io/syntax">Sentry</a>.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=01:30">01:30</a></strong> Syntax newsletter.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://syntax.fm/snackpack">Snack Pack</a></li> <li class="has-line-data" data-line-start="9" data-line-end="20"> <strong><a href="#t=02:02">02:02</a></strong> How do you get better at being a developer? <ul> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=02:22">02:22</a></strong> Asking questions.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=08:09">08:09</a></strong> Get your hands dirty.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://github.com/wesbos/hot-tips">Hot Tips</a>, <a href= "https://github.com/stolinski/cool-treats">Cool Treats</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=14:07">14:07</a></strong> Share what you know.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=17:35">17:35</a></strong> Target your skills for what is needed.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href= "https://twitter.com/RyanCarniato/status/1768409228451217800">Ryan Carniato Tweet</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://syntax.fm/577">Episode 577</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href= "https://twitter.com/justinfagnani/status/1769856091540857035">Justin Fagnani Tweet</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://syntax.fm/595">Episode 595</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=21:12">21:12</a></strong> Get out of your comfort zone.</li> </ul> </li> <li class="has-line-data" data-line-start="20" data-line-end="33"> <strong><a href="#t=26:55">26:55</a></strong> Getting a better job. <ul> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=27:27">27:27</a></strong> Understand the stakeholders.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=29:18">29:18</a></strong> Find the metric the business cares about and do that.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=30:01">30:01</a></strong> Make an impression as being the person that gets things done fast and reliably.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=31:47">31:47</a></strong> Improve communications.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=35:04">35:04</a></strong> Be the person they want to have in meetings.</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=37:44">37:44</a></strong> Use systems and tools to help your deficiencies.</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=39:01">39:01</a></strong> Dress to impress.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=39:32">39:32</a></strong> Care.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=39:40">39:40</a></strong> Cut the cynicism.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://www.calm.com/blog/energy-vampire">Energy Vampire</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=42:16">42:16</a></strong> Don’t put bad stuff out into the world publicly.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=44:29">44:29</a></strong> Get your camera + mic dialed in.</li> </ul> </li> <li class="has-line-data" data-line-start="33" data-line-end="43"> <strong><a href="#t=46:23">46:23</a></strong> Leveling up at life. <ul> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=46:32">46:32</a></strong> Take care of your shit.</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=47:40">47:40</a></strong> Exercise.</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://syntax.fm/748">Episode 748</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=47:57">47:57</a></strong> Eat well.</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=48:22">48:22</a></strong> Sleep as much as you can.</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <strong><a href="#t=48:26">48:26</a></strong> Clean your workspace.</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <strong><a href="#t=49:17">49:17</a></strong> Learn new skills.</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <strong><a href="#t=49:31">49:31</a></strong> Take care of yourself.</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://habitpath.io/landing">Habit Path</a></li> </ul> </li> <li class="has-line-data" data-line-start="43" data-line-end="45"> <strong><a href="#t=54:09">54:09</a></strong> Sick Picks.</li> </ul> <h3 class="code-line" data-line-start="45" data-line-end="46"> <a id="Sick_Picks_45"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="47" data-line-end="48"> Scott: <a href="https://amzn.to/43nBsq4">Zeiss Lens Care Pack</a></li> <li class="has-line-data" data-line-start="48" data-line-end="50"> Wes: <a href="https://amzn.to/49XQi8Z">Woosh Screen Cleaner</a></li> </ul> <h3 class="code-line" data-line-start="50" data-line-end="51"> <a id="Hit_us_up_on_Socials_50"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="52" data-line-end="53"> 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></p> <p class="has-line-data" data-line-start="54" data-line-end="55"> 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></p> <p class="has-line-data" data-line-start="56" data-line-end="57"> 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></p> <p class="has-line-data" data-line-start="58" data-line-end="59"> 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></p>

754: How to Level Up Your Web Development Career

<p>What does your culture have to do with your values? In this episode we open up the discussion about a model of thinking for culture and values to understand how they link, and more importantly, when they don't.</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://getunblocked.com">Unblocked</a></h2><p>Unblocked provides helpful and accurate answers developers need to get jobs done. It tailors answers by augmenting your source code with existing team knowledge in GitHub, Slack, Confluence and more. Spend less time digging for context and more time building great software. Check it out at <a href="https://getunblocked.com">getunblocked.com</a>.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Demystifying Culture and Values

422: Listener Topics Grab Bag

<p class="has-line-data" data-line-start="0" data-line-end="1"> Scott and Wes dive into the cache problem, tackling user-specific data and caching security. From marketing A/B testing to content negotiation, they explore various challenges and solutions, including different URL/query parameters, edge logic, and client-side caching.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:22">01:22</a></strong> Syntax is on <a href= "www.youtube.com/@syntaxfm">YouTube</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:16">02:16</a></strong> Let’s talk about the cache problem.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=03:33">03:33</a></strong> User-specific data and caching security.</li> <li class="has-line-data" data-line-start="8" data-line-end="15"> <strong><a href="#t=06:27">06:27</a></strong> Why might this pop up? <ul> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=06:29">06:29</a></strong> Marketing A/B testing - cookie based.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=06:55">06:55</a></strong> User-selected features - such as themes.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=06:58">06:58</a></strong> Language or geo-based items - accept language.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=07:11">07:11</a></strong> Images - WebP for some browsers, jpg for others.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=07:45">07:45</a></strong> JSON/HTML based on accept header.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=08:17">08:17</a></strong> Different encoding.</li> </ul> </li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=08:26">08:26</a></strong> <a href= "https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation"> Content negotiation</a>.</li> <li class="has-line-data" data-line-start="16" data-line-end="26"> <strong><a href="#t=08:54">08:54</a></strong> The solutions. <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=09:04">09:04</a></strong> Provide different URLs/Query parameter.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=11:19">11:19</a></strong> Don’t cache the page, cache the data based on query.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=15:01">15:01</a></strong> Implement a “Cache Key” - one render for every option.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://www.netlify.com/blog/netlify-cache-key-variations/">Netlify</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://www.fastly.com/blog/getting-most-out-vary-fastly">Fastly</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href= "https://developers.cloudflare.com/cache/how-to/cache-keys/">Cloudflare</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=18:17">18:17</a></strong> Use edge logic.</li> <li class="has-line-data" data-line-start="24" data-line-end="26"> <strong><a href="#t=19:52">19:52</a></strong> Just do it client-side.</li> </ul> </li> </ul> <h3 class="code-line" data-line-start="26" data-line-end="27"> <a id="Hit_us_up_on_Socials_26"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="28" data-line-end="29"> 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></p> <p class="has-line-data" data-line-start="30" data-line-end="31"> 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></p> <p class="has-line-data" data-line-start="32" data-line-end="33"> 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></p> <p class="has-line-data" data-line-start="34" data-line-end="35"> 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></p>

753: Cache Ruins Everything Around Me

<h2>Show Description</h2><p>Dave's about to be eclipsed, the state of TypeScript in 2024, signals stage zero proposal, corrections on accessibility in frameworks (thanks!), web apps for better collaborative writing, getting productivity sniped, the problem with email may be you, indieweb follow up, and ultimate guitar tab apps.</p>
<p><a href='https://shoptalkshow.com/610/' style='background: #ca6533; color: black; padding: 8px 20px; text-decoration: none;'>Listen on Website &rarr;</a></p><h2>Links</h2><ul>
<li><a href="https://www.apollographql.com/">Streamlining APIs, Databases, &amp; Microservices | Apollo GraphQL</a></li>
<li><a href="https://svelte.dev/">Svelte • Cybernetically enhanced web apps</a></li>
<li><a href="https://emberjs.com/">Ember.js - A framework for ambitious web developers</a></li>
<li><a href="https://modern-web.dev/docs/test-runner/overview/">Web Test Runner: Modern Web</a></li>
<li><a href="https://frontendmasters.com/blog/">Frontend Masters Boost – Helping Your Journey to Senior Developer</a></li>
<li><a href="https://www.notion.so/product/docs">Notion – The next gen of notes &amp; docs</a></li>
<li><a href="https://www.dropbox.com/paper/start">Paper</a></li>
<li><a href="https://www.stashpad.com/">Stashpad - Your streamlined Google Docs alternative</a></li>
<li><a href="https://www.butterdocs.com/">ButterDocs | Google Docs Alternative for Serious Writers &amp; Teams</a></li>
<li><a href="https://culturedcode.com/things/">Things - To-Do List for Mac &amp; iOS</a></li>
<li><a href="https://godspeedapp.com/">Godspeed</a></li>
<li><a href="https://aboard.com/">Aboard - Collect. Organize. Collaborate.</a></li>
<li><a href="https://obsidian.md/">Obsidian - Sharpen your thinking</a></li>
<li><a href="https://ugmonk.com/en-ca/pages/analog">Analog - The original to-do system by Ugmonk</a></li>
<li><a href="https://cleanshot.com/">CleanShot X for Mac</a></li>
<li><a href="https://indiewebify.me/">IndieWebify.Me - a guide to getting you on the IndieWeb</a></li>
<li><a href="https://www.ultimate-guitar.com/">ULTIMATE GUITAR TABS</a></li>
<li><a href="https://www.theverge.com/2023/1/9/23546323/john-deere-right-to-repair-tractors-agreement">John Deere commits to letting farmers repair their own tractors (kind of) - The Verge</a></li>
</ul><h2>Sponsors</h2><h3><a href='https://srv.buysellads.com/ads/long/x/T6MUETZCTTTTTTCZYV6NKTTTTTTZNSYVKYTTTTTTYDZE47ETTTTTTEBZ2HZHVSI2Z3JDLJJIKVYWVWIHKHLH554L2HQT'>Radical </a></h3>Are you an aspiring designer, developer, marketer, or fanny pack tester? Maybe you're a burnt-out designer struggling for fresh ideas, or perhaps you have no idea where to start with design? Do you need to find a way to make your sites less boring and more memorable? Well then, this course is for you.

610: TypeScript in 2024, Signals, Productivity Sniped, and Follow Up

<p class="has-line-data" data-line-start="0" data-line-end="1"> Which framework is best? Join Scott and Wes as they chat with Corbin Crutchley, author of the “Framework Field Guide”, diving into the world of frameworks, metaframeworks, and tips to stay up-to-date on the latest trends in web development.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:48">00:48</a></strong> Who is Corbin Crutchley?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:08">02:08</a></strong> Brought to you by <a href="www.sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=02:32">02:32</a></strong> Hilton, like the hotel?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=05:57">05:57</a></strong> What is the best framework?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=07:23">07:23</a></strong> How do you compare these frameworks?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=10:00">10:00</a></strong> Do you feel like the metaframeworks are comparable?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=11:02">11:02</a></strong> Exciting announcements from <a href="https://ng-conf.org/">ng-conf</a>?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=11:42">11:42</a></strong> Are Wiz and Angular merging?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=14:17">14:17</a></strong> Angular signals and Vue comparison.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://preactjs.com/guide/v10/signals/">PreactJS Signals</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=17:53">17:53</a></strong> Adding signals to vanilla JavaScript and browsers.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=21:02">21:02</a></strong> What is derived state?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=23:11">23:11</a></strong> How can we store state within these different frameworks?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=24:37">24:37</a></strong> Passing children.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=26:40">26:40</a></strong> Which has the best implementation for passing children?</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=28:52">28:52</a></strong> What’s the approach for building framework agnostic components?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://tanstack.com/store/latest">TanStack Store</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=30:31">30:31</a></strong> How much of it is framework specific?</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=31:35">31:35</a></strong> Headless or DOM-based?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=32:48">32:48</a></strong> What are the best practices for writing this?</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=35:28">35:28</a></strong> What’s the biggest framework pain point?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=36:21">36:21</a></strong> Is there a language that requires significantly more code?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=38:52">38:52</a></strong> What about Web Components?</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=39:58">39:58</a></strong> Your book is free?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href= "https://unicorn-utterances.com/collections/framework-field-guide">Framework Field Guide</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> Shout-out <a href="https://twitter.com/edpratti">Eduardo Pratti</a> and <a href="https://twitter.com/kevttob">Kevin Aguilar</a>.</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=42:42">42:42</a></strong> What’s the process of writing a book like this?</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=45:44">45:44</a></strong> Not a physical book?</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=46:17">46:17</a></strong> Walk us through the tech stack.</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=48:27">48:27</a></strong> Supper Club Questions.</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=48:33">48:33</a></strong> What text editor, theme and font do you use?</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=49:53">49:53</a></strong> What terminal and shell do you use?</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=50:19">50:19</a></strong> How do you stay up to date?</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=53:39">53:39</a></strong> Do you have advice for beginners?</li> <li class="has-line-data" data-line-start="39" data-line-end="41"> <strong><a href="#t=55:26">55:26</a></strong> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="41" data-line-end="42"> <a id="Sick_Picks_41"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="43" data-line-end="45"> Corbin: <a href="https://shiki.style/">Shiki Syntax Highlighter</a></li> </ul> <h3 class="code-line" data-line-start="45" data-line-end="46"> <a id="Shameless_Plugs_45"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="47" data-line-end="49"> Corbin: <a href= "https://unicorn-utterances.com/collections/framework-field-guide">Framework Field Guide</a></li> </ul> <h3 class="code-line" data-line-start="49" data-line-end="50"> <a id="Hit_us_up_on_Socials_49"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="51" data-line-end="52"> 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></p> <p class="has-line-data" data-line-start="53" data-line-end="54"> 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></p> <p class="has-line-data" data-line-start="55" data-line-end="56"> 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></p> <p class="has-line-data" data-line-start="57" data-line-end="58"> 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></p>

752: React vs Vue vs Angular with Corbin Crutchley

On today’s episode, we talk to Ben Holmes, Software Deceloper at Astro, about the new release of Astro DB, Astro’s new database platform for content-driven websites.
Links
https://astro.build/db
https://bholmes.dev
https://twitter.com/bholmesdev
https://dev.to/bholmesdev
https://www.linkedin.com/in/bholmesdev
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Ben Holmes.


Astro DB with Ben Holmes

We talk to Steven Fabre, Co-founder of Liveblocks, about the concept of React Components as a service, the challenges faced, and the focus on enabling collaborative experiences.
Links
https://twitter.com/stevenfabre
https://stevenfabre.com
https://www.linkedin.com/in/steven-fabre-5510bb38
https://github.com/stevenfabre
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Steven Fabre.


React Components as a service with Steven Fabre

<p class="has-line-data" data-line-start="0" data-line-end="1"> Scott and Wes explore UI Components, discussing functionality, styling, accessibility, and theming. From headless components to styled starters, they share valuable insights to elevate your UI game.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=02:39">02:39</a></strong> We’re on YouTube.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=03:14">03:14</a></strong> The four categories of UI libraries or frameworks.</li> <li class="has-line-data" data-line-start="7" data-line-end="13"> <strong><a href="#t=03:46">03:46</a></strong> What does a UI component need to do? <ul> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=04:14">04:14</a></strong> Must be functional.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=06:20">06:20</a></strong> They must fit styling.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=06:33">06:33</a></strong> They must be accessible.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=08:09">08:09</a></strong> “Internationalizationable.”</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=09:29">09:29</a></strong> They must handle theming and variants.</li> </ul> </li> <li class="has-line-data" data-line-start="13" data-line-end="19"> <strong><a href="#t=10:05">10:05</a></strong> A few common UI components. <ul> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=10:14">10:14</a></strong> Date Pickers.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=12:10">12:10</a></strong> Dropdowns.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=13:21">13:21</a></strong> Toast message.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://svelte-french-toast.com/">Svelte French Toast</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=15:11">15:11</a></strong> Some honorable mentions.</li> </ul> </li> <li class="has-line-data" data-line-start="19" data-line-end="25"> <strong><a href="#t=16:10">16:10</a></strong> Headless components. <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=18:54">18:54</a></strong> <a href= "https://react-spectrum.adobe.com/react-aria/">React Aria</a>.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://react-spectrum.adobe.com/react-aria/interactions.html">Behavior</a>, <a href= "https://react-spectrum.adobe.com/react-aria/accessibility.html">Accessibility</a>, <a href= "https://react-spectrum.adobe.com/react-aria/internationalization.html"> Internationalization</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=19:34">19:34</a></strong> <a href= "https://www.radix-ui.com/primitives">Radix UI Primitives</a>.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=20:16">20:16</a></strong> <a href= "https://github.com/downshift-js/downshift">Downshift JS</a>.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=21:29">21:29</a></strong> <a href= "https://tanstack.com/table/latest">Tanstack Table and Forms</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="25" data-line-end="31"> <strong><a href="#t=26:00">26:00</a></strong> Unstyled components. <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=28:04">28:04</a></strong> <a href= "https://shoelace.style/">Shoelace</a>.</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=32:47">32:47</a></strong> <a href= "https://react-spectrum.adobe.com/react-aria/components.html">React Aria Components</a>.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=33:00">33:00</a></strong> <a href= "https://headlessui.com/">Headless UI</a>.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=33:04">33:04</a></strong> <a href= "https://www.radix-ui.com/">Radix UI</a>.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=37:12">37:12</a></strong> <a href= "https://mui.com/base-ui/getting-started/">Base UI</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=38:23">38:23</a></strong> What’s up with Google’s design?</li> <li class="has-line-data" data-line-start="32" data-line-end="37"> <strong><a href="#t=40:22">40:22</a></strong> Styled Starters. <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href= "https://react-spectrum.adobe.com/react-aria/getting-started.html#starter-kits"> React Aria Components Starter</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://ui.shadcn.com/">ShadCN</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://tailwindcss.com/blog/introducing-catalyst">Tailwind Catalyst</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://melt-ui.com/">MeltUI</a></li> </ul> </li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=47:50">47:50</a></strong> What is the process for overriding with custom elements.</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=51:10">51:10</a></strong> UI Kits and Design Systems.</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <strong><a href="#t=53:06">53:06</a></strong> Some things to consider.</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://jsnation.com/">JS Nation</a></li> <li class="has-line-data" data-line-start="41" data-line-end="59"> <strong><a href="#t=55:41">55:41</a></strong> A few more options to consider. <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href= "https://github.com/mui/material-ui/tree/master/packages/pigment-css-react"> Pigment CSS</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://mui.com/base-ui/getting-started/">Base UI</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://shoelace.style/">Shoelace</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.baselayer.dev/">BaseLayer</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://www.jollyui.dev/">JollyUI</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://draft-ui.com/">DraftUI</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://www.radix-ui.com/">Radix UI</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://www.penguinui.com/">PenguinUI</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://tailwindcss.com/blog/introducing-catalyst">Tailwind CSS</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://tailwindui.com/">TailwindUI</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://verveui.pro/">VerveUI</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://daisyui.com/">DaisyUI</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://chakra-ui.com/">ChakraUI</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://flowbite.com/">Flowbite</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://floating-ui.com/">FloatingUI</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://github.com/downshift-js/downshift">Downshift JS</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://mantine.dev/">Mantine</a></li> </ul> </li> <li class="has-line-data" data-line-start="59" data-line-end="61"> <strong><a href="#t=59:02">59:02</a></strong> Sick Picks & Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="61" data-line-end="62"> <a id="Sick_Picks_61"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="63" data-line-end="64"> Wes: <a href= "https://www.costco.ca/ontel-battery-daddy-180-battery-organizer-and-storage-case-with-tester.product.4000032542.html"> Battery Daddy</a></li> <li class="has-line-data" data-line-start="64" data-line-end="66"> Scott: <a href="https://amzn.to/49XFo3n">Lazy Susan</a>, <a href= "https://amzn.to/4akUWxW">Rechargeable Batteries</a>, <a href= "https://amzn.to/3vgX6zI">Charger</a></li> </ul> <h3 class="code-line" data-line-start="66" data-line-end="67"> <a id="Shameless_Plugs_66"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="68" data-line-end="70"> Scott: <a href="www.youtube.com/@syntaxfm">Syntax on YouTube</a></li> </ul> <h3 class="code-line" data-line-start="70" data-line-end="71"> <a id="Hit_us_up_on_Socials_70"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="72" data-line-end="73"> 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></p> <p class="has-line-data" data-line-start="74" data-line-end="75"> 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></p> <p class="has-line-data" data-line-start="76" data-line-end="77"> 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></p> <p class="has-line-data" data-line-start="78" data-line-end="79"> 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></p>

751: UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI

<p>Your feedback loops should be short enough that the cost of making a mistake is low enough that the value of the learning in the feedback loop exceeds the magnitude of the cost of a mistake. In other words: shorten your feedback loops to the point that you're no longer afraid to make a mistake.</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://getunblocked.com">Unblocked</a></h2><p>Unblocked provides helpful and accurate answers developers need to get jobs done. It tailors answers by augmenting your source code with existing team knowledge in GitHub, Slack, Confluence and more. Spend less time digging for context and more time building great software. Check it out at <a href="https://getunblocked.com">getunblocked.com</a>.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Principles of Work - Shorten Your Feedback Loops

421: The Idealistic vs. Pragmatic Programmer

<p class="has-line-data" data-line-start="0" data-line-end="1">Get stoked, jQuery 1.2 is here! Join Scott and Wes as they discuss jQuery Mobile, slicing PSD files, CSS rounded corners, CoffeeScript features, WordPress 2.3, and the rise of Skeuomorphism, shaping the landscape of web development this year.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:16">01:16</a></strong> 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"> <strong><a href="#t=02:17">02:17</a></strong> jQuery 1.2 released!</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=07:38">07:38</a></strong> jQuery Mobile.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=09:34">09:34</a></strong> Skeuomorphism.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=10:25">10:25</a></strong> How do you slice up your .PSDs?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href= "https://haizdesign.com/photoshop/slicy-by-macrabbit-review/">Slicy By MacRabbit</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=12:34">12:34</a></strong> Cufon, new font method.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=14:06">14:06</a></strong> CSS rounded corners.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://css3please.com/">CSS3Please</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=15:17">15:17</a></strong> Coda Tip.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=16:48">16:48</a></strong> Top 5 CoffeeScript Features.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=18:44">18:44</a></strong> Conference Talks to Spotlight.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://batmanjs.org/">BatmanJS, your new favorite JavaScript superhero</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=20:35">20:35</a></strong> WordPress 2.3!</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=21:15">21:15</a></strong> PHP 5.2.0</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://www.php.net/releases/5_2_0.php">PHP 5.2.0 Release Announcement</a></li> <li class="has-line-data" data-line-start="21" data-line-end="23"> <strong><a href="#t=21:53">21:53</a></strong> Sponsored by Media Temple.</li> </ul> <h3 class="code-line" data-line-start="23" data-line-end="24"> <a id="Hit_us_up_on_Socials_23"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="25" data-line-end="26"> 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></p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 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></p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 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></p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 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></p>

750: New CSS and JavaScript You Should Be Using

<h2>Show Description</h2><p>What is a home cooked app? Blake Watson is on this episode to talk all about the kinds of apps that make a good home cooked app, tips and advice he has for making them, resisting the urge to monetize or growth hack them, and a few CodePen v2 thoughts sprinkled in at the end.</p>
<p><a href='https://shoptalkshow.com/609/' style='background: #ca6533; color: black; padding: 8px 20px; text-decoration: none;'>Listen on Website &rarr;</a></p><h2>Guests</h2><h3>Blake Watson</h3><p><a href='https://blakewatson.com/'>Guest's Main URL</a> • <a href=''>Guest's Twitter</a></p><p><p>Currently a member of the frontend dev team at MRI Technologies, working on projects for NASA.</p>
</p><h2>Links</h2><ul>
<li><a href="https://www.watsonbrosgames.com/">Watson Brothers Games</a></li>
<li><a href="https://www.robinsloan.com/notes/home-cooked-app/">An app can be a home-cooked meal</a></li>
<li><a href="https://blakewatson.com/about/">blakewatson.com – About</a></li>
<li><a href="https://blakewatson.com/journal/magnoliajs-2023-the-joys-of-home-cooked-apps/">blakewatson.com – MagnoliaJS 2023: The joys of home-cooked apps</a></li>
<li><a href="https://www.mricompany.com/">MRI Technologies</a></li>
<li><a href="https://blakewatson.com/journal/building-our-own-private-discord-knockoff/">blakewatson.com – Building our own private Discord knockoff</a></li>
<li><a href="https://blakewatson.com/journal/things-i-miss/">blakewatson.com – Things I miss</a></li>
<li><a href="https://blakewatson.com/journal/use-your-mac-the-way-i-do-a-thought-experiment/">blakewatson.com – Use your Mac the way I do: a thought experiment</a></li>
<li><a href="https://github.com/Overimagine1/old-discord-font">Overimagine1/old-discord-font: CSS to revert Discord's font change.</a></li>
<li><a href="https://afinestart.me/">A Fine Start - minimal new tab page</a></li>
<li><a href="https://knockoutjs.com/">Knockout : Home</a></li>
<li><a href="https://vuejs.org/">Vue.js - The Progressive JavaScript Framework | Vue.js</a></li>
<li><a href="https://www.lua.org/">The Programming Language Lua</a></li>
<li><a href="https://store.steampowered.com/app/2239150/Thronefall/">Save 10% on Thronefall on Steam</a></li>
<li><a href="https://itch.io/jam/game-off-2023">Game Off 2023 - itch.io</a></li>
</ul><h2>Sponsors</h2>

609: Blake Watson on Home Cooked Apps

In this episode, we jump right into things we are seeing in AI and what the job market is like for software engineers.

Panelists:
Ryan Burgess - @burgessdryan
Jem Young - @JemYoung
Stacy London - @stacylondoner
Augustus Yuan - @augburto
Cole Turner - @coleturner

Picks:
Ryan Burgess - DJI Mic 2 https://www.amazon.com/gp/aw/d/B0CFZX734J/?&_encoding=UTF8&tag=frontendhappy-20&linkCode=ur2&linkId=6fdef16ea2e6c0827b59305b22a9d1da&camp=1789&creative=9325
Ryan Burgess - The Gentlemen https://www.netflix.com/title/81437051
Jem Young - Valley Silicon - Steelcase Work Tents https://www.steelcase.com/products/pods/pod-tent/#steelcase-work-tents-collection
Stacy London - Kiasmos - Flown https://kiasmos.bandcamp.com/album/flown
Stacy London - Four Tet - Three https://fourtet.bandcamp.com/album/three
Augustus Yuan - The Finals https://store.steampowered.com/app/2073850/THE_FINALS/
Cole Turner - Quote - Let Go or Be Dragged https://www.tiktok.com/discover/let-go-or-be-dragged

Episode transcript: https://www.frontendhappyhour.com/episodes/more-ai-and-layoffs

Episode 191 - More AI and layoffs

<p class="has-line-data" data-line-start="0" data-line-end="1"> Scott and Wes are joined by special guests Trudy MacNabb and Anne Thomas from Design Packs, diving into the nitty-gritty of Shopify design. Tune in as they dissect the pros and cons, challenges, and unveil their daily toolkit for crafting stunning Shopify websites.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:59">00:59</a></strong> Who is Anne Thomas?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:30">02:30</a></strong> Who is Trudy MacNabb?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=04:06">04:06</a></strong> Shopify themes, how does one build a theme?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=05:34">05:34</a></strong> Do you have enough control with LiquidJS?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=07:52">07:52</a></strong> Changing components of a liquid template.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=08:58">08:58</a></strong> LiquidJS improving their dev tools.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=09:29">09:29</a></strong> LiquidJS email marketing.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=10:32">10:32</a></strong> Can you make your own LiquidJS methods?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://toomanytabs.xyz/">Too Many Tabs</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=11:34">11:34</a></strong> How would you create a theme from scratch using modern tools?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=13:30">13:30</a></strong> What about local dev and live reload?</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://shopify.dev/docs/themes/tools/cli">Shopify Tools CLI</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=15:17">15:17</a></strong> Is Shopify improving?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=17:13">17:13</a></strong> What do you hate about Shopify themes?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://shopify.dev/docs/themes/tools/theme-kit">Shopify Tools Theme Kit</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=18:59">18:59</a></strong> Have you used Hydrogen?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://hydrogen.shopify.dev/">Shopify Hydrogen</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=20:09">20:09</a></strong> Headless has sacrifices.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=22:02">22:02</a></strong> Are people building full websites in Shopify?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=23:56">23:56</a></strong> Apps and integrations.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=25:56">25:56</a></strong> Are people creating businesses around these integrations?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=29:16">29:16</a></strong> What are design packs?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=31:26">31:26</a></strong> Do you run your own servers?</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=31:57">31:57</a></strong> How does billing work with clients?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=33:18">33:18</a></strong> Apps being ‘Sherlocked’.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://thehustle.co/sherlocking-explained">‘Sherlocking’ Explained</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=35:21">35:21</a></strong> Where is the data stored?</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=36:35">36:35</a></strong> Can you make a custom UI?</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=38:40">38:40</a></strong> What are the downsides of building apps on Shopify?</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=39:17">39:17</a></strong> Are you expected to maintain versions?</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=40:46">40:46</a></strong> Do you manage all the support independently?</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=42:01">42:01</a></strong> How do you match with their existing themes?</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=43:54">43:54</a></strong> What are the most popular blocks?</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=45:17">45:17</a></strong> Does Shopify provide bundlers or compilers?</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <strong><a href="#t=46:47">46:47</a></strong> Shopify moving to blocks.</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <strong><a href="#t=47:38">47:38</a></strong> Living as a digital nomad.</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://syntax.fm/586">Syntax Episode 586 on Nomad Developing</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <strong><a href="#t=49:48">49:48</a></strong> A new app Anne and Trudy launched.</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <strong><a href="#t=51:35">51:35</a></strong> Limited by block size.</li> <li class="has-line-data" data-line-start="44" data-line-end="46"> <strong><a href="#t=54:08">54:08</a></strong> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="46" data-line-end="47"> <a id="Sick_Picks_46"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> Trudy: <a href="https://theblacktravelbox.com/">Bar of Shampoo</a></li> <li class="has-line-data" data-line-start="49" data-line-end="51"> Anne: <a href="https://www.alieward.com/ologies">Alie Ward Ologies Podcast</a></li> </ul> <h3 class="code-line" data-line-start="51" data-line-end="52"> <a id="Shameless_Plugs_51"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="53" data-line-end="55"> Trudy: 25% off using SYNTAX25 at <a href= "https://design-packs.com/">Design Packs</a></li> </ul> <h3 class="code-line" data-line-start="55" data-line-end="56"> <a id="Hit_us_up_on_Socials_55"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="57" data-line-end="58"> 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></p> <p class="has-line-data" data-line-start="59" data-line-end="60"> 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></p> <p class="has-line-data" data-line-start="61" data-line-end="62"> 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></p> <p class="has-line-data" data-line-start="63" data-line-end="64"> 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></p>

749: Coding Shopify with Anne and Trudy of Design Packs

<p>In this episode we discuss the importance of being your own advocate, and why this is likely the most rational position to hold. The takeaway: At any point, the person advocating the most for you is almost definitely YOU.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Principles of Work - Be Your Own Advocate

Matias Capeletto, Vite core team member, discusses Vite's history, development process, and its impact on the web development ecosystem, exploring future developments and its current state.
Links
https://vitejs.dev
https://www.linkedin.com/in/matiascapeletto
https://github.com/patak-dev
https://patak.dev
https://twitter.com/patak_dev
https://m.webtoo.ls/@patak
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Matias Capeletto.


Vite's past, present and future with Matias Capeletto

In this special crossover episode, Robbie Wagner and Chuck Carpenter from Whiskey Web and Whatnot join us to toast and discuss AI, Apple Vision Pro, AR/VR, and frontend development. As glasses clink, our spirited ensemble delves deep into how these cutting-edge technologies are reshaping the landscape of software engineering.

Guests:
Robbie Wagner - @RobbieTheWagner
Chuck Carpenter - @CharlesWthe3rd

Panelists:
Ryan Burgess - @burgessdryan
Jem Young - @JemYoung

Episode transcript: https://www.frontendhappyhour.com/episodes/at-the-bar-with-whiskey-web-&-whatnot

Episode 190 - At the bar with Whiskey Web & Whatnot

On this month’s panel episode, PodRocket hosts Paige, Chris, Noel, and Paul talk about the introduction of Devin, the first AI engineer, Google’s rollout of INP, and if the frontend dev is being diminished.
Links
https://twitter.com/trashh_dev
https://www.linkedin.com/in/paul-mikulskis-37a50b4a
https://staging.bsky.app/profile/noel.minc.how 
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) 


Devin, INP, and the diminishing frontend dev

<p class="has-line-data" data-line-start="0" data-line-end="1"> Level up your coding game -and your gains! Today, Scott and Wes weigh in on the importance of physical fitness for developers, covering motivation, diet, lifting basics, routines, and swole-inducing supplements.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:14">01:14</a></strong> 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"> <strong><a href="#t=03:10">03:10</a></strong> A very quick disclaimer.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=03:32">03:32</a></strong> A brief view of our fitness history.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=06:19">06:19</a></strong> Why is fitness important for developers?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=09:12">09:12</a></strong> Setting your goals.</li> <li class="has-line-data" data-line-start="10" data-line-end="17"> <strong><a href="#t=13:06">13:06</a></strong> Getting started with fitness. <ul> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=13:13">13:13</a></strong> Body-weight.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=13:58">13:58</a></strong> Stretching.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=16:47">16:47</a></strong> Fun activities that don’t feel like workouts.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=17:48">17:48</a></strong> Lifting weights.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://stronglifts.com/">Stronglifts</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href= "https://www.reddit.com/r/StartingStrength/">StartingStrength</a></li> </ul> </li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=25:47">25:47</a></strong> Home gym gear.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://www.roguefitness.com/rogue-stall-bar-3-0">Rogue Stall Bar</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=37:14">37:14</a></strong> Fitness programs.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=40:53">40:53</a></strong> I guess we have to talk about diet.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://macrofactorapp.com/">MacroFactorApp</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=46:37">46:37</a></strong> Motivation.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=47:42">47:42</a></strong> Supplements.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://www.amazon.com/dp/B0B9HWN8S9">BulkSupplements.com Creatine</a></li> <li class="has-line-data" data-line-start="25" data-line-end="27"> <strong><a href="#t=51:23">51:23</a></strong> Sick Picks.</li> </ul> <h3 class="code-line" data-line-start="27" data-line-end="28"> <a id="Sick_Picks_27"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="29" data-line-end="30"> Wes: <a href="https://amzn.to/3wSduqM">Wikday Pull Up Bands</a></li> <li class="has-line-data" data-line-start="30" data-line-end="32"> Scott: <a href="https://amzn.to/4abKzMy">Booty Bands</a></li> </ul> <h3 class="code-line" data-line-start="32" data-line-end="33"> <a id="Hit_us_up_on_Socials_32"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="34" data-line-end="35"> 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></p> <p class="has-line-data" data-line-start="36" data-line-end="37"> 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></p> <p class="has-line-data" data-line-start="38" data-line-end="39"> 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></p> <p class="has-line-data" data-line-start="40" data-line-end="41"> 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></p>

748: Fitness Will Make You a Better Developer

<p>In this episode we discuss a practical application of information theory. Information theory is similar to the classic theory of communication, but distinct in important ways; these two theories together are a useful combo for creating a strategy for clarification.</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://getunblocked.com">Unblocked</a></h2><p>Unblocked provides helpful and accurate answers developers need to get jobs done. It tailors answers by augmenting your source code with existing team knowledge in GitHub, Slack, Confluence and more. Spend less time digging for context and more time building great software. Check it out at <a href="https://getunblocked.com">getunblocked.com</a>.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Practical Application of Information Theory

420: Test Database Woes

<p class="has-line-data" data-line-start="0" data-line-end="1">Join Wes and Scott for a hasty episode of Syntax as they unpack the power of middleware for developers, covering caching, authentication, A/B testing, error handling, and user redirection in a quick, punchy rundown to supercharge your backend skills!</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:41">00:41</a></strong> <a href= "www.youtube.com/@syntaxfm">Syntax on YouTube</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=01:28">01:28</a></strong> What is middleware?</li> <li class="has-line-data" data-line-start="7" data-line-end="17"> <strong><a href="#t=05:04">05:04</a></strong> Some real-world examples of middleware. <ul> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=05:10">05:10</a></strong> Authentication.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=07:44">07:44</a></strong> Redirecting users to a specific instance.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=08:28">08:28</a></strong> Logging + statistics.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=09:41">09:41</a></strong> Debugging.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=10:00">10:00</a></strong> Timers.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=10:46">10:46</a></strong> A/B testing.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=11:59">11:59</a></strong> Error handling + logging.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=12:23">12:23</a></strong> Caching.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=13:02">13:02</a></strong> Multi-tenant applications.</li> </ul> </li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=15:08">15:08</a></strong> Where does it run?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=18:07">18:07</a></strong> What are the limitations?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=21:52">21:52</a></strong> Next.js middleware is one file only.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://nextjs.org/docs/app/building-your-application/routing/middleware"> NextJS Middleware</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=23:35">23:35</a></strong> Sveltekit solution.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://kit.svelte.dev/docs/hooks">Sveltekit Hooks</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=24:31">24:31</a></strong> Connect style.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://github.com/fastify/fastify-express">Fastify Express</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://github.com/fastify/middie">Fastify Middle</a></li> <li class="has-line-data" data-line-start="26" data-line-end="28"> <strong><a href="#t=25:28">25:28</a></strong> One last thing, NPM Installing.</li> </ul> <h3 class="code-line" data-line-start="28" data-line-end="29"> <a id="Hit_us_up_on_Socials_28"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="30" data-line-end="31"> 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></p> <p class="has-line-data" data-line-start="32" data-line-end="33"> 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></p> <p class="has-line-data" data-line-start="34" data-line-end="35"> 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></p> <p class="has-line-data" data-line-start="36" data-line-end="37"> 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></p>

747: Middleware Explained

<h2>Show Description</h2><p>We're opening up the ShopTalk mailbag and answering your questions, including does WordPress on your resume kill your job chances, what are our fav and least fav parts of web dev, our thoughts on HTMX, and what is it like to use pnpm instead of npm.</p>
<p><a href='https://shoptalkshow.com/608/' style='background: #ca6533; color: black; padding: 8px 20px; text-decoration: none;'>Listen on Website &rarr;</a></p><h2>Links</h2><ul>
<li><a href="https://www.frontendhappyhour.com/">Front End Happy Hour</a></li>
<li><a href="https://play.date/">Playdate</a></li>
<li><a href="https://play.date/dev/">Develop for Playdate</a></li>
<li><a href="https://nuxt.com/">Nuxt: The Intuitive Vue Framework · Nuxt</a></li>
<li><a href="https://www.youtube.com/c/theprimeagen">ThePrimeagen</a></li>
<li><a href="https://pnpm.io/">Fast, disk space efficient package manager | pnpm</a></li>
<li><a href="https://yarnpkg.com/">Yarn</a></li>
</ul><h2>Sponsors</h2><h3><a href='https://srv.buysellads.com/ads/long/x/T6RRXSSHTTTTTTCBKUINPTTTTTTDXJGCKWTTTTTTB3Y5O7VTTTTTTEBZ2HZHVSI2Z3JDLJJIKVYWVWIHKHLH554L2HQT'>Radical Design</a></h3>Are you an aspiring designer, developer, marketer, or fanny pack tester? Maybe you're a burnt-out designer struggling for fresh ideas, or perhaps you have no idea where to start with design? Do you need to find a way to make your sites less boring and more memorable? Well then, this course is for you.

608: Can WordPress Kill Your Resume, Fav Parts of Web Dev, Exploring HTMX, and more!

<p>In today's episode we talk about working principles again. Specifically, we're looking at a problem with measurement fixation, as well as the natural curve of degradation that most communication follows.</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://jam.dev/?utm_source=podcast&utm_medium=paid&utm_campaign=2024_02_developertea">Jam.dev</a></h2><p>If you’re an engineer and you would rather spend your time writing code than responding to comments in your issue tracker, send your team Jam.dev. Go to <a href="https://jam.dev/?utm_source=podcast&utm_medium=paid&utm_campaign=2024_02_developertea">jam.dev</a> to get started, it’s free.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Revisiting Core Working Principles - Hyperfixation on Measurements and Communication Degradation

<p class="has-line-data" data-line-start="0" data-line-end="1"> Deploy your own tech stack: Wes and Scott are joined by Kubernetes expert David Flanagan to be schooled on how Kubernetes, Docker and even WASM containers work.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:55">01:55</a></strong> Should developers know how to run their own servers?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=04:57">04:57</a></strong> What is “bare metal”?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=11:49">11:49</a></strong> What the hell is Kubernetes?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=12:25">12:25</a></strong> Why would somebody need Kubernetes?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=15:37">15:37</a></strong> Using Kubernetes to spin up different instances on cloud providers.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://etcd.io/">etcd</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=16:43">16:43</a></strong> Kubernetes managing traffic spikes.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=18:46">18:46</a></strong> How much downtime can you handle?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=22:11">22:11</a></strong> What exactly is a container?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=24:06">24:06</a></strong> What containers do you prefer?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://www.docker.com/">Docker</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://containerd.io/">Containerd</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=25:28">25:28</a></strong> Some additional terminology.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://opencontainers.org/">OCI Open Container Initiative</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=26:43">26:43</a></strong> What about WASM?</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://webassembly.org/">WASM WebAssembly</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=29:31">29:31</a></strong> Building a Docker container.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=31:11">31:11</a></strong> Why would someone want to use a WebAssembly container?</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=32:12">32:12</a></strong> Are people shipping this technology?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=33:36">33:36</a></strong> What functions would you put in WASM?</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=36:57">36:57</a></strong> How does someone make a WASM image?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=39:22">39:22</a></strong> A little more about Spin.</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://www.fermyon.com/blog/introducing-spin">Fermyon Spin</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=39:56">39:56</a></strong> What type of processors are used in these servers?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=42:27">42:27</a></strong> What are home servers running on?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href= "https://www.kickstarter.com/projects/turingpi/turing-pi-cluster-board"> Turing Pi 2</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://danielmangum.com/">Daniel Mangum</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://universal-blue.org/">Universal Blue</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=46:40">46:40</a></strong> How should someone get started with Kubernetes?</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://kubernetes.io/">Kubernetes.io</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://www.youtube.com/@RawkodeAcademy">Rawkode YouTube</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://kubesimplify.com/">Kubesimplify</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="https://learnk8s.io/">Learnk8s</a></li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=48:51">48:51</a></strong> Infrastructure as code.</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://developer.hashicorp.com/terraform/cdktf">CDK for Terraform</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://www.graalvm.org/">GraalVM</a></li> <li class="has-line-data" data-line-start="41" data-line-end="43"> <strong><a href="#t=55:19">55:19</a></strong> Sick Picks & Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="43" data-line-end="44"> <a id="Sick_Picks_43"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="45" data-line-end="49"> David: <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://www.golem.cloud/">Golem.cloud</a></li> <li class="has-line-data" data-line-start="47" data-line-end="49"> <a href="https://restate.dev/">Restate.dev</a></li> </ul> </li> </ul> <h3 class="code-line" data-line-start="49" data-line-end="50"> <a id="Shameless_Plugs_49"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="51" data-line-end="54"> David: <ul> <li class="has-line-data" data-line-start="52" data-line-end="54"> <a href="https://www.youtube.com/@RawkodeAcademy">Rawkode YouTube</a></li> </ul> </li> </ul> <h3 class="code-line" data-line-start="54" data-line-end="55"> <a id="Hit_us_up_on_Socials_54"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="56" data-line-end="57"> 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></p> <p class="has-line-data" data-line-start="58" data-line-end="59"> 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></p> <p class="has-line-data" data-line-start="60" data-line-end="61"> 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></p> <p class="has-line-data" data-line-start="62" data-line-end="63"> 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></p>

746: Infrastructure for TS Devs: Kubernetes, WASM and Containers with David Flanagan

Learn about what anti-patterns are, why they’re bad, how to avoid them, and how to deal with them in React with Jonas Herrmannsdörfer, freelance Software Engineer focusing on React.
Links
https://herrmannsdoerfer.dev/en
https://www.linkedin.com/in/herrmannsdoerfer
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Jonas Herrmannsdörfer.


Anti-patterns in GraphQL and React with Jonas Herrmannsdörfer

<p>In this episode we are revisiting some of my own personal core principles of working. I'm sharing these with you for you to do whatever you want with them, so please share however you can!</p><p>The principles we discuss today are around the relationship between clarity and focus, and about how most negotiations aren't about feasibility but instead about strategy.</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://neo4j.com/developer?&utm_campaign=GDB&utm_content=AMS-SrDev-ABM-Evergreen%5B%E2%80%A6%5DvHub1--&utm_medium=Audio&utm_source=Developertea&utm_justglobal=">Neo4j</a></h2><p>Is your code getting dragged down by endless JOINs and long query times? Try simplifying the complexity with graphs!</p><p>With Neo4j, you can code in your favorite programming language and against any<br />driver. See what graphs can do for you at <a href="https://neo4j.com/developer?&utm_campaign=GDB&utm_content=AMS-SrDev-ABM-Evergreen%5B%E2%80%A6%5DvHub1--&utm_medium=Audio&utm_source=Developertea&utm_justglobal=">Neo4j.com/developer</a></p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Revisiting Core Working Principles - Clarity as a Precursor to Focus and Strategy for Possibilities

We talk to Kevin Whinnery, Head of DevRel at Deno, about Deno’s new registry for JavaScript and TypeScript, JSR.io.
Links
https://jsr.io
https://github.com/kwhinnery
https://twitter.com/kevinwhinnery
https://linkedin.com/in/kevinwhinnery
https://twitch.com/kwhinnery
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Kevin Whinnery.


JSR.io with Kevin Whinnery

<p class="has-line-data" data-line-start="0" data-line-end="1">Wes and Scott dive deep into the world of JavaScript toolchains, exploring everything from linters and compilers to transpilers and formatters. Tune in as they shed light on cutting-edge technologies like Biome, UnJS, and Ezno that are shaping the future for developers.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:37">01:37</a></strong> Syntax is on <a href= "www.youtube.com/@syntaxfm">YouTube</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:09">02:09</a></strong> Do we really need tooling?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=04:02">04:02</a></strong> Popular tools are predominantly plug and play.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=06:15">06:15</a></strong> What can tooling do for us?</li> <li class="has-line-data" data-line-start="9" data-line-end="16"> <strong><a href="#t=07:16">07:16</a></strong> The tools in today’s workflow. <ul> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=07:21">07:21</a></strong> Linters.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=11:29">11:29</a></strong> Compilers and transpilers.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=13:30">13:30</a></strong> Formatters.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=16:18">16:18</a></strong> Tokenizers and Parsers.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=16:46">16:46</a></strong> Bundlers.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=17:59">17:59</a></strong> Macros.</li> </ul> </li> <li class="has-line-data" data-line-start="16" data-line-end="25"> <strong><a href="#t=20:26">20:26</a></strong> The new tools in the space. <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=20:47">20:47</a></strong> <a href= "https://biomejs.dev/">Biome</a>, one toolchain for your web project.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=28:27">28:27</a></strong> <a href= "https://oxc-project.github.io/">Oxc</a>, the JavaScript oxidation compiler.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=33:01">33:01</a></strong> <a href= "https://docs.deno.com/runtime/manual/tools/formatter">Deno</a>, code formatting.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=34:13">34:13</a></strong> <a href= "https://esbuild.github.io/">ESBuild</a>, an extremely fast bundler for the web.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=34:37">34:37</a></strong> <a href= "https://github.com/rolldown/rolldown">Rolldown</a>, fast Rust-based bundler for JavaScript.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=38:34">38:34</a></strong> <a href= "https://github.com/kaleidawave/ezno">Ezno</a>, TypeScript type checker.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=40:24">40:24</a></strong> <a href= "https://unjs.io/">UnJS</a>, Unleash JavaScript’s Potential.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=41:45">41:45</a></strong> <a href= "https://lightningcss.dev/">Lightning CSS</a>, CSS parser, transformer, bundler, and minifier.</li> </ul> </li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=42:31">42:31</a></strong> Is JavaScript good enough to handle these tools?</li> <li class="has-line-data" data-line-start="26" data-line-end="28"> <strong><a href="#t=43:26">43:26</a></strong> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="28" data-line-end="29"> <a id="Sick_Picks_28"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="30" data-line-end="31"> Scott: <a href= "https://www.youtube.com/watch?v=fcq0pwr0IKg">Shinobi-Geddon: The 1980s Ninja Craze</a></li> <li class="has-line-data" data-line-start="31" data-line-end="33"> Wes: <a href="https://bachans.com/collections/all-products">Bachans Japanese Barbecue Sauce</a></li> </ul> <h3 class="code-line" data-line-start="33" data-line-end="34"> <a id="Shameless_Plugs_33"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="35" data-line-end="37"> Scott: <a href="www.youtube.com/@syntaxfm">Syntax on YouTube</a></li> </ul> <h3 class="code-line" data-line-start="37" data-line-end="38"> <a id="Hit_us_up_on_Socials_37"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="39" data-line-end="40"> 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></p> <p class="has-line-data" data-line-start="41" data-line-end="42"> 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></p> <p class="has-line-data" data-line-start="43" data-line-end="44"> 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></p> <p class="has-line-data" data-line-start="45" data-line-end="46"> 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></p>

745: Modern JS Toolchains (Biome, Oxc + More)

419: What's New in Your World? (Extended Edition)

<p class="has-line-data" data-line-start="0" data-line-end="1">Join Scott and CJ on a rapid-fire journey through Docker. From unraveling containerization to practical advice on incorporating Docker into your workflow, this quick-paced episode has everything you need to navigate the world of container technology.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:19">01:19</a></strong> 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"> <strong><a href="#t=02:20">02:20</a></strong> Easily reproducible environments.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=02:57">02:57</a></strong> Containerization technology.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href= "https://en.wikipedia.org/wiki/Containerization_(computing)">Containerization</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href= "https://en.wikipedia.org/wiki/OS-level_virtualization">OS-level Virtualization</a></li> <li class="has-line-data" data-line-start="10" data-line-end="15"> <strong><a href="#t=04:42">04:42</a></strong> Docker is brand name containerization, there are others. <ul> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://podman.io/">Podman</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://containerd.io/">Containerd</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://buildah.io/">Buildah</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://canonical.com/lxd">LXD</a></li> </ul> </li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=05:26">05:26</a></strong> Why would a web developer want to use Docker?</li> <li class="has-line-data" data-line-start="16" data-line-end="20"> <strong><a href="#t=08:19">08:19</a></strong> How do you get started with Docker? <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://www.docker.com/products/docker-desktop/">Download Docker Desktop</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://docs.docker.com/guides/get-started/">Start With Docs</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://www.docker.com/101-tutorial/">Docker 101</a></li> </ul> </li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=09:14">09:14</a></strong> How does Docker work?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://hub.docker.com/r/getsentry/sentry">Docker Sentry</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://docs.docker.com/registry/">Docker Registry</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="https://docs.docker.com/build/guide/layers/">Docker Layers</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=16:46">16:46</a></strong> Adding Docker to an existing project.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href= "https://github.com/CodingGarden/listd/blob/main/Dockerfile">SvelteKit Dockerfile</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href= "https://github.com/CodingGarden/entropychat.app/blob/master/server/Dockerfile"> Node.js / Express</a></li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href= "https://github.com/CodingGarden/twitch-team-shoutout-bot/blob/master/Dockerfile"> CLI Runner Twitchbot</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href= "https://github.com/CodingGarden/AMA/blob/master/2023-02-08/look-at-php/Dockerfile"> Development PHP / Mongodb Dockerfile</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=21:37">21:37</a></strong> What is Docker Compose?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://docs.docker.com/compose/">Docker Compose</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=22:50">22:50</a></strong> What are some ‘gotchas’ or things to look out for when setting up a project?</li> <li class="has-line-data" data-line-start="32" data-line-end="34"> <a href= "https://github.com/CodingGarden/entropychat.app/blob/master/server/Dockerfile"> Coding Garden Example</a></li> </ul> <h3 class="code-line" data-line-start="34" data-line-end="35"> <a id="Hit_us_up_on_Socials_34"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="36" data-line-end="37"> 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></p> <p class="has-line-data" data-line-start="38" data-line-end="39"> 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></p> <p class="has-line-data" data-line-start="40" data-line-end="41"> 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></p> <p class="has-line-data" data-line-start="42" data-line-end="43"> CJ: <a href="https://twitter.com/coding_garden">X</a> <a href= "https://www.instagram.com/coding.garden/">Instagram</a> <a href= "https://www.tiktok.com/@coding.garden">Tiktok</a> <a href= "https://www.twitch.tv/codinggarden">TwitchTV</a> <a href= "https://www.youtube.com/@CodingGarden">YouTube</a></p> <p class="has-line-data" data-line-start="44" data-line-end="45"> 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></p>

744: Docker For Developers

<h2>Show Description</h2><p>Fred K. Schott stops by to talk about Astro announcement of Astro DB. The pluses and minuses of it, and whether you have to always use the database with Astro DB. We get into how to seed your database, upgrading the database, and the almost weirdly generous pricing model.</p>
<p><a href='https://shoptalkshow.com/607/' style='background: #ca6533; color: black; padding: 8px 20px; text-decoration: none;'>Listen on Website &rarr;</a></p><h2>Guests</h2><h3>Fred K. Schott</h3><p><a href='https://github.com/FredKSchott'>Guest's Main URL</a> • <a href='https://twitter.com/fredkschott'>Guest's Twitter</a></p><p><p>Co-creator of Astro.</p>
</p><h2>Links</h2><ul>
<li><a href="https://astro.build/blog/astro-db-deep-dive/">Astro DB: A Deep Dive | Astro</a></li>
<li><a href="https://astro.build/db/">Astro DB</a></li>
<li><a href="https://astro.build/blog/astro-db-deep-dive/">Astro DB: A Deep Dive | Astro</a></li>
<li><a href="https://github.com/tursodatabase/libsql">tursodatabase/libsql: libSQL is a fork of SQLite that is both Open Source, and Open Contributions.</a></li>
<li><a href="https://stackblitz.com/">StackBlitz | Instant Dev Environments | Click. Code. Done.</a></li>
<li><a href="https://schema.org/">Schema.org - Schema.org</a></li>
<li><a href="https://twitter.com/BHolmesDev/status/1767972934855905576">Ben Holmes on X: "Astro built a database platform. How does it work?</a></li>
<li><a href="https://clerk.com/">Clerk</a></li>
<li><a href="https://lucia-auth.com/">Lucia documentation</a></li>
<li><a href="https://planetscale.com/blog/planetscale-forever">PlanetScale forever</a></li>
<li><a href="https://www.youtube.com/watch?v=h5SiumTDRIU">Astro DB Just Released</a></li>
</ul><h2>Sponsors</h2>

607: Astro Launches an Integrated Database

In the latest episode, we do a deep into the world of WordPress! Whether you're a seasoned developer or a newbie just starting out, this episode is packed with everything you need to know about WordPress, the leading website-building platform. Our special guests, Fabian Kaegy, Luis Herranz, and Matias Ventura, join us to share their experiences and insights in developing and leveraging WordPress. In this episode, we cover: What is WordPress? An introduction to the powerhouse behind 40% of the web.Why WordPress Dominates: Exploring the reasons behind WordPress's unwavering popularity.WordPress vs. The World: A comparison with other website-building platforms.Busting Myths: Addressing common misconceptions about WordPress.Hidden Gems: Lesser-known WordPress features that pack a punch.Evolving Landscape: The growth and future trends of WordPress.Stay in the Loop: Tips on keeping up with WordPress developments and best practices. Starting with WordPress: Expert advice for WordPress beginners. Whether you're interested in creating your own website, looking to enhance your WordPress skills, or just curious about the platform's capabilities, this episode is for you. We'll guide you through the ins and outs of WordPress, from its comprehensive functionality to the vibrant community that supports it. Plus, we'll share our personal experiences and tips to help you make the most out of WordPress.Don't miss out on this engaging discussion! Tune in now to get ahead with WordPress and join the Front End Happy Hour Podcast for a toast to technology and innovation. Subscribe to our channel for more insights on web development, technology trends, and expert advice from leading developers around the globe.

Guests:
Fabian Kaegy - @fabiankaegy
Luis Herranz - @luisherranz
Matias Ventura - @matias_ventura

Panelists:
Ryan Burgess - @burgessdryan
Jem Young - @JemYoung

Picks:
Matias Ventura - WPMovies.dev https://wpmovies.dev/
Matias Ventura - Vesuvius challenge https://scrollprize.org/
Luis Herranz - John Cleese on Creativity In Management https://www.youtube.com/watch?v=Pb5oIIPO62g
Luis Herranz - American Kingpin https://www.amazon.com/American-Kingpin-Criminal-Mastermind-Behind/dp/1591848148?&_encoding=UTF8&tag=frontendhappy-20&linkCode=ur2&linkId=6fdef16ea2e6c0827b59305b22a9d1da&camp=1789&creative=9325
Fabian Kaegy - Lessons in Chemistry https://tv.apple.com/us/show/lessons-in-chemistry/umc.cmc.40yycssgxelw4zur8m2ilmvyx
Ryan Burgess - DJI Osmo 6 https://www.amazon.com/DJI-Smartphone-Stabilizer-Extension-ShotGuides/dp/B0B7XD7R43?&_encoding=UTF8&tag=frontendhappy-20&linkCode=ur2&linkId=6fdef16ea2e6c0827b59305b22a9d1da&camp=1789&creative=9325
Ryan Burgess - Frontend Masters Boost https://frontendmasters.com/blog/
Jem Young - Take care of managers in a hybrid world https://www.axios.com/2022/09/29/take-care-of-middle-managers-in-the-hybrid-world
Jem Young - Six Nations: Full Contact https://www.netflix.com/title/81647358

Episode transcript: https://www.frontendhappyhour.com/episodes/why-does-wordpress-dominate-the-web

Episode 189 - Why does Wordpress dominate the web?

<p>In today's episode we talk about principles of productivity. Most of the advice you receive will fit in the two categories we discuss in this episode. Once you connect with these ideas, you'll be able to use them for your own gain.</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://jam.dev/?utm_source=podcast&utm_medium=paid&utm_campaign=2024_02_developertea">Jam.dev</a></h2><p>If you’re an engineer and you would rather spend your time writing code than responding to comments in your issue tracker, send your team Jam.dev. Go to <a href="https://jam.dev/?utm_source=podcast&utm_medium=paid&utm_campaign=2024_02_developertea">jam.dev</a> to get started, it’s free.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Two Principle Categories To Judge Productivity Advice

<p class="has-line-data" data-line-start="0" data-line-end="1">Wes and Scott welcome Cameron McEfee, a seasoned creative director whose journey spans GitHub, <a href= "http://Sentry.io">Sentry.io</a>, and the innovative realm of JavaScript plugins with his creation, GuideGuide. Cameron explores plugin building, iterating on the iconic Octocat for GitHub, and shedding light on the multifaceted roles of a creative director.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:06">01:06</a></strong> Who is Cameron McEfee?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=03:00">03:00</a></strong> What does a Creative Director do?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=09:47">09:47</a></strong> In a creative and collaborative field, how do you deal with hurt feelings?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=12:32">12:32</a></strong> Experiences at GitHub (404/500 pages).</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=15:35">15:35</a></strong> Who is responsible for all the Octocat variations?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://octodex.github.com/">GitHub Octodex</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=17:18">17:18</a></strong> Did you ever get in trouble for using famous IP?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=21:07">21:07</a></strong> Working at <a href= "www.sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=25:08">25:08</a></strong> What is your illustration process?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=27:04">27:04</a></strong> What is GuideGuide?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://guideguide.me/">GuideGuide</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://github.com/no-context/moo">Moo Tokenizer/Lexer</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=33:13">33:13</a></strong> Grid Notation.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=36:10">36:10</a></strong> Can ‘good colors’ be calculated, can good design be math’d?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=40:46">40:46</a></strong> What was the process of building your own plugin?</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=43:37">43:37</a></strong> Adding guides with JavaScript APIs.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=44:44">44:44</a></strong> Recreating application UIs within plugins.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href= "https://goodhertz.com/canopener-studio/">GoodHertz</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=50:22">50:22</a></strong> How are you architecting these plugins?</li> <li class="has-line-data" data-line-start="24" data-line-end="26"> <strong><a href="#t=52:44">52:44</a></strong> Sick Picks & Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="26" data-line-end="27"> <a id="Sick_Picks_26"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> Cameron:</li> </ul> <ul> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://ember.com/">Ember Mug</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href= "https://open.spotify.com/artist/3QaxveoTiMetZCMp1sftiu">Waterparks Spotify</a></li> <li class="has-line-data" data-line-start="31" data-line-end="33"> <a href="https://www.executeprogram.com/">Execute Program</a></li> </ul> <h3 class="code-line" data-line-start="33" data-line-end="34"> <a id="Shameless_Plugs_33"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="35" data-line-end="37"> Cameron: <a href= "https://guideguide.me/landing?utm_campaign=interview&utm_source=syntax&promo=syntax"> GuideGuide 50% off</a></li> </ul> <h3 class="code-line" data-line-start="37" data-line-end="38"> <a id="Hit_us_up_on_Socials_37"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="39" data-line-end="40"> 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></p> <p class="has-line-data" data-line-start="41" data-line-end="42"> 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></p> <p class="has-line-data" data-line-start="43" data-line-end="44"> 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></p> <p class="has-line-data" data-line-start="45" data-line-end="46"> 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></p>

743: JavaScript Figma Plugins & Working at GitHub With Cameron McEfee

We welcome on Debla de Oliveira, Developer Advocate at Vercel, and Wyatt Johnson, Software Engineer at Vercel, to talk about partial pre-rendering and how it can be accomplished in Next.js.
Links
https://delba.dev
https://www.linkedin.com/in/delbaoliveira
https://twitter.com/delba_oliveira
https://www.youtube.com/delba
https://wyattjoh.ca
https://www.linkedin.com/in/wyattjoh
https://keybase.io/wyattjoh
https://twitter.com/wyattjoh
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guests: Delba de Oliveira and Wyatt Johnson.


Partial pre-rendering in Next.js with Delba de Oliveira and Wyatt Johnson

<p>In today's episode we discuss the concept of "cost of delay", and explore the fact that cost of delay does not necessarily follow a linear path. When cost of delay has a cliff, or an exponential curve, how do you weigh one opportunity versus another?</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://getunblocked.com">Unblocked</a></h2><p>If you would rather spend your time coding instead of digging for answers or dealing with questions from colleagues, give Unblocked a try. Unblocked provides helpful and accurate answers to questions about your codebase. Get started at <a href="https://getunblocked.com/">getunblocked.com</a>.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Cost of Delay Curves and Classes of Service

Brandon Bayer, CEO and Co-founder of Flightcontrol, talks about how he migrated the Flightcontrol dashboard to the Next.js App Router and all the good, bad, and ugly that came with it.
Links
https://www.linkedin.com/in/brandonbayer1
https://twitter.com/flybayer
https://www.flightcontrol.dev
https://www.crunchbase.com/person/brandon-bayer-2964
https://github.com/flybayer
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Brandon Bayer.


Next.js App Router migration with Brandon Bayer

<p class="has-line-data" data-line-start="0" data-line-end="1"> Scott and CJ dive into a potluck of developer queries, from their favorite tech reads to essential web dev fundamentals. Tune in as they dish out expert advice on migrating React projects to TypeScript, crafting precise timers for countdown apps, and navigating the world of free-tier plans.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:20">01:20</a></strong> 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="10"> <strong><a href="#t=02:16">02:16</a></strong> What book changed your life? <ul> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://amzn.to/3uXZISS">Whatever you think, think the opposite</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://amzn.to/3P5l3Ay">It’s not how good you are, it’s how good you want to be</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://amzn.to/49Ed9X4">Crucial Conversations</a> thanks <a href="https://twitter.com/bentlegen">@benvinegar</a></li> </ul> </li> <li class="has-line-data" data-line-start="10" data-line-end="12"> <strong><a href="#t=04:58">04:58</a></strong> What are the web development fundamentals for beginners? <ul> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://commandlinepoweruser.com/">Command Line Power User</a></li> </ul> </li> <li class="has-line-data" data-line-start="12" data-line-end="14"> <strong><a href="#t=08:39">08:39</a></strong> What are your thoughts on Chris Coyer’s post on his sale of CSS-Tricks? <ul> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href= "https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/"> Chris Coyer’s Post</a></li> </ul> </li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=11:51">11:51</a></strong> Advice for migrating an existing React project to TypeScript.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=20:38">20:38</a></strong> Countdown apps, performance vs accuracy.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=25:19">25:19</a></strong> Are you listening to podcasts? Which ones?</li> <li class="has-line-data" data-line-start="17" data-line-end="20"> <strong><a href="#t=31:46">31:46</a></strong> With AI on the rise, will free-tier plans become a thing of the past? <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://coolify.io/">Coolify</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://syntax.fm/show/730/own-your-own-paas">Syntax 730: Own Your Own Paas</a></li> </ul> </li> <li class="has-line-data" data-line-start="20" data-line-end="24"> <strong><a href="#t=35:59">35:59</a></strong> What is SemVer anyway? <ul> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://semver.org/">semver.org</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://www.npmjs.com/package/@auth/core">npmjs</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href= "https://www.learningtypescript.com/articles/why-typescript-doesnt-follow-strict-semantic-versioning"> TypeScript on Semantic Versioning</a></li> </ul> </li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=40:14">40:14</a></strong> A question on ergonomics, home office aesthetics and productivity.</li> <li class="has-line-data" data-line-start="25" data-line-end="27"> <strong><a href="#t=47:59">47:59</a></strong> Do you ever stop to consider VueJS in 2024? Why or why not? <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://unjs.io/">unjs.io</a></li> </ul> </li> <li class="has-line-data" data-line-start="27" data-line-end="29"> <strong><a href="#t=52:12">52:12</a></strong> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="29" data-line-end="30"> <a id="Sick_Picks_29"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="31" data-line-end="32"> Scott: <a href="https://ellenos.com/">Ellenos Yogurt</a></li> <li class="has-line-data" data-line-start="32" data-line-end="34"> CJ: <a href="https://www.flatironpepper.com/">Flat Iron Pepper</a></li> </ul> <h3 class="code-line" data-line-start="34" data-line-end="35"> <a id="Shameless_Plugs_34"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="36" data-line-end="38"> <a href="https://www.youtube.com/@syntaxfm">Syntax.fm YouTube</a></li> </ul> <h3 class="code-line" data-line-start="38" data-line-end="39"> <a id="Hit_us_up_on_Socials_38"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="40" data-line-end="41"> 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></p> <p class="has-line-data" data-line-start="42" data-line-end="43"> 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></p> <p class="has-line-data" data-line-start="44" data-line-end="45"> 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></p> <p class="has-line-data" data-line-start="46" data-line-end="47"> 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></p>

742: Potluck: Migrating to Typescript, Semver Explained, Accurate Timers and Countdowns

418: Mental Models For Reduce Functions

<p class="has-line-data" data-line-start="0" data-line-end="1">Wes and Scott tackle TypeScript trivia, from combining string literal types to unraveling the mystery of d.ts files. Join them as they challenge each other on conditional types, interfaces, triple-slash directives, and TypeScript records.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="https://www.typescriptlang.org/">TypeScript</a></li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=01:05">01:05</a></strong> Brought to you by <a href="www.sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=03:20">03:20</a></strong> How do you combine string literal types?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href= "https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html"> Template Literal Types</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=06:34">06:34</a></strong> What is a TypeScript Generic and why would you use one?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href= "https://www.typescriptlang.org/docs/handbook/2/generics.html">TypeScript Generics</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=08:12">08:12</a></strong> How do you write a conditional type?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href= "https://www.typescriptlang.org/docs/handbook/2/conditional-types.html"> TypeScript Conditional Types</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=09:58">09:58</a></strong> Generating TypeScript type from a function.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href= "https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-6.html"> Stricter Generators</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=14:09">14:09</a></strong> How do d.ts files work?</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href= "https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html"> Module .d.ts</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=16:25">16:25</a></strong> Name one difference between a type and an interface.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href= "https://www.typescriptlang.org/play#example/types-vs-interfaces">Types vs Interfaces</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=19:15">19:15</a></strong> What is a tripple-slash directive and why would you use them?</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html"> Tripple-Slash Directives</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=20:52">20:52</a></strong> What is a TypeScript record and what is it used for?</li> <li class="has-line-data" data-line-start="22" data-line-end="24"> <a href= "https://www.typescriptlang.org/docs/handbook/utility-types.html">Utility Types</a></li> </ul> <h3 class="code-line" data-line-start="24" data-line-end="25"> <a id="Hit_us_up_on_Socials_24"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="26" data-line-end="27"> 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></p> <p class="has-line-data" data-line-start="28" data-line-end="29"> 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></p> <p class="has-line-data" data-line-start="30" data-line-end="31"> 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></p> <p class="has-line-data" data-line-start="32" data-line-end="33"> 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></p>

741: TypeScript Interview Questions -  STUMP’d

<h2>Show Description</h2><p>We're talking with Michelle Barker about the idea of paying to support bloggers (and podcasters!) via services like Patreon, drumming as a fun side gig from CSS, how big of an issue digital sustainability is, trying to understand the environmental impact of our websites and digital life, wondering why YouTube embeds are still so large, disabling cookies, and how to build the web in a more sustainable way.</p>
<p><a href='https://shoptalkshow.com/606/' style='background: #ca6533; color: black; padding: 8px 20px; text-decoration: none;'>Listen on Website &rarr;</a></p><h2>Guests</h2><h3>Michelle Barker</h3><p><a href='https://michellebarker.co.uk/'>Guest's Main URL</a> • <a href='https://front-end.social/@michelle'>Guest's Twitter</a></p><p><p>Senior Front End Developer at Ada Mode, where Michelle works on Windscope, web-based data visualisation and exploration software for wind farm operators.</p>
<p>Michelle also loves playing the drums. Their happy place is where creativity and code intersect </p>
<p>You can also find Michelle writing and speaking about CSS and digital sustainability on the web and around the world.</p>
</p><h2>Links</h2><ul>
<li><a href="https://michellebarker.co.uk/">Michelle Barker</a></li>
<li><a href="https://ada-mode.com/">Ada Mode</a></li>
<li><a href="https://windscope.com/">Windscope</a></li>
<li><a href="https://css-irl.info/">CSS { In Real Life }</a></li>
<li><a href="https://front-end.social/@michelle">Michelle Barker (@michelle@front-end.social) - Front-End Social</a></li>
<li><a href="https://www.linkedin.com/in/michelle-barker-02819230/">Michelle Barker</a></li>
<li><a href="https://codepen.io/michellebarker">Michelle Barker on CodePen</a></li>
<li><a href="https://github.com/mbarker84">mbarker84 (Michelle Barker)</a></li>
<li><a href="https://www.websitecarbon.com/website/shoptalkshow-com/">shoptalkshow.com - Website Carbon Calculator</a></li>
<li><a href="https://github.com/paulirish/lite-youtube-embed">paulirish/lite-youtube-embed: A faster youtube embed.</a></li>
</ul><h2>Sponsors</h2><h3><a href='https://srv.buysellads.com/ads/long/x/TCHLZBSHTTTTTTDQIXJNPTTTTTTG4GX4KWTTTTTTK4H5N7VTTTTTTEBZ2HZHVSI2Z3JDLJJIKVYWVWIHKHLH554L2HQT'>Radical Design Course</a></h3>Are you an aspiring designer, developer, marketer, or fanny pack tester? Maybe you're a burnt-out designer struggling for fresh ideas, or perhaps you have no idea where to start with design? Do you need to find a way to make your sites less boring and more memorable? Well then, this course is for you.

606: Web Sustainability with Michelle Barker

<p class="has-line-data" data-line-start="0" data-line-end="1"> Scott and Wes are joined by special guest Xenova to explore local AI models in JavaScript. From Hugging Face to Transformers.js and practical applications like real-time speech recognition and object detection, this episode dives deep into the world of machine learning.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:41">00:41</a></strong> 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"> <strong><a href="#t=01:05">01:05</a></strong> Who is Xenova?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=02:08">02:08</a></strong> What is Hugging Face?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=03:29">03:29</a></strong> What is Transformers.js?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=06:16">06:16</a></strong> How was the library developed?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href= "https://github.com/ajayyy/SponsorBlock">SponsorBlock</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=09:04">09:04</a></strong> How is it able to run?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=10:09">10:09</a></strong> Do they have to run in Python and how does Onnx work?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://onnx.ai/">Onnx.ai</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://huggingface.co/docs/optimum/index">Hugging Face Optimum</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=14:19">14:19</a></strong> What are some things you can do with this tech?</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=16:15">16:15</a></strong> Vision tools.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=17:38">17:38</a></strong> This is actually running locally.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=18:35">18:35</a></strong> <a href= "https://huggingface.co/spaces/Xenova/doodle-dash">Doodle Dash</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=21:09">21:09</a></strong> They currently run on CPU, what is required to make it run on GPU?</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=24:44">24:44</a></strong> Can you run in JavaScript?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=28:32">28:32</a></strong> How it works with image vectors.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=34:23">34:23</a></strong> Why would people want to run it in another language?</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=35:55">35:55</a></strong> Resizing images in the browser instead of on the server.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=38:55">38:55</a></strong> Applications distributed on the web vs running locally.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=43:54">43:54</a></strong> Electron has Node and Chrome, where would you run Transformers.js?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=44:32">44:32</a></strong> The API of Transformers.js</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=46:30">46:30</a></strong> Object Detection.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href= "https://huggingface.co/spaces/Xenova/semantic-image-search-client"> Semantic Image Search Client</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href= "https://huggingface.co/spaces/Xenova/video-object-detection">Real-Time Object Detection</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href= "https://huggingface.co/spaces/Xenova/remove-background-web">Background Removal Tool</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=48:33">48:33</a></strong> What is the easiest way to get started?</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=51:26">51:26</a></strong> Real-time speech recognition on the horizon?</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=52:08">52:08</a></strong> Will we ever be able to run Stable Diffusion via JavaScript?</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=56:10">56:10</a></strong> The <a href= "https://webllm.mlc.ai/">Web LLM</a>.</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=57:22">57:22</a></strong> Practical applications for YouTube.</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=59:39">59:39</a></strong> What we want to build for Syntax.fm.</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=01:06:43">01:06:43</a></strong> Mean pooling, why it’s necessary.</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=01:09:30">01:09:30</a></strong> Stopping YouTube spam comments.</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <strong><a href="#t=01:10:34">01:10:34</a></strong> K-Means Clustering.</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href= "https://discuss.huggingface.co/t/short-text-clustering/5829">Text Clustering</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <strong><a href="#t=01:13:49">01:13:49</a></strong> Quantization.</li> <li class="has-line-data" data-line-start="42" data-line-end="44"> <strong><a href="#t=01:17:35">01:17:35</a></strong> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="44" data-line-end="45"> <a id="Sick_Picks_44"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="46" data-line-end="48"> Xeonva: <a href= "https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API">WebGPU</a></li> </ul> <h3 class="code-line" data-line-start="48" data-line-end="49"> <a id="Shameless_Plugs_48"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="50" data-line-end="52"> Xenova: <a href="https://twitter.com/xenovacom">Xenova on X</a></li> </ul> <h3 class="code-line" data-line-start="52" data-line-end="53"> <a id="Hit_us_up_on_Socials_52"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="54" data-line-end="55"> 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></p> <p class="has-line-data" data-line-start="56" data-line-end="57"> 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></p> <p class="has-line-data" data-line-start="58" data-line-end="59"> 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></p> <p class="has-line-data" data-line-start="60" data-line-end="61"> 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></p>

740: Local AI Models in JavaScript - Machine Learning Deep Dive With Xenova

<p>"What actions can I take to get better from here?"</p><p>This seems like a simple concept, but in practice we often are more interested in protecting our ego. In this episode we try to practice this self-accountability through an exercise.</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://jam.dev/?utm_source=podcast&utm_medium=paid&utm_campaign=2024_02_developertea">Jam.dev</a></h2><p>If you’re an engineer and you would rather spend your time writing code than responding to comments in your issue tracker, send your team Jam.dev. Go to <a href="https://jam.dev/?utm_source=podcast&utm_medium=paid&utm_campaign=2024_02_developertea">jam.dev</a> to get started, it’s free.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Taking Personal Accountability for Systematic Failures

We talk to Max Stoiber, Co-founder of Stellate, about his experience working with GraphQL, how devs can understand and manage their data layer, and how to use his open-source project, Fuse, to simplify working in the data layer.
Links
https://mxstbr.com
https://github.com/mxstbr/mxstbr.com
https://twitter.com/mxstbr
https://linkedin.com/in/mxstbr
https://instagram.com/mxstbr
https://mxstbr.blog
https://www.youtube.com/@MaxStoiber
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Max Stoiber.


Rethinking frontend architectures with data layers with Max Stoiber

We welcome back Carson Gross, creator of HTMX, to talk about the upcoming release of HTMX v2 and all its new features and updates.
Links
https://bigsky.software
https://www.linkedin.com/in/1cg
https://github.com/bigskysoftware
https://twitter.com/htmx_org
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Carson Gross.


HTMX v2 with Carson Gross

<p class="has-line-data" data-line-start="0" data-line-end="1">Join Wes and Scott as they explore LoFi (local first) web development, delving into CRDT, Websockets, IndexedDB, SQLite, and more. Discover when Local-First shines and when it’s better to steer clear in this episode packed with practical insights.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=03:18">03:18</a></strong> 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"> <strong><a href="#t=04:08">04:08</a></strong> What is LoFi?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://localfirstweb.dev/">localfirst.dev</a></li> <li class="has-line-data" data-line-start="8" data-line-end="18"> <strong><a href="#t=05:02">05:02</a></strong> The Seven Ideals for Local-first. <ul> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=05:29">05:29</a></strong> 1: No Spinners.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=06:48">06:48</a></strong> 2: Your work is not trapped on one device.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=07:56">07:56</a></strong> 3: The network is optional.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=08:50">08:50</a></strong> 4: Seamless collaboration with your colleagues.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=09:35">09:35</a></strong> Oops, we for got to read 5: The Long Now.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=09:37">09:37</a></strong> 6: Security and privacy by default.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=09:45">09:45</a></strong> 7: You retain ultimate ownership and control.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://actualbudget.com/">Actual Budget Finance App</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://www.inkandswitch.com/local-first/">Ink & Switch</a></li> </ul> </li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=13:01">13:01</a></strong> Sounds great, let’s go! Not so fast, this stuff is hard.</li> <li class="has-line-data" data-line-start="19" data-line-end="27"> <strong><a href="#t=14:07">14:07</a></strong> The technology involved. <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=14:30">14:30</a></strong> CRDT (Conflict-free Replicated Data Types).</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type">Wikipedia Definition</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href= "https://www.youtube.com/watch?v=DEcwa68f-jY&ab_channel=dotconferences"> James Long dotJS 2019 dotconfrences</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=17:48">17:48</a></strong> How does it prioritize conflict resolutions?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=19:36">19:36</a></strong> Websockets.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=20:17">20:17</a></strong> IndexedDB + SQLite.</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=21:23">21:23</a></strong> Service Workers.</li> </ul> </li> <li class="has-line-data" data-line-start="27" data-line-end="31"> <strong><a href="#t=22:16">22:16</a></strong> The software involved. <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=22:24">22:24</a></strong> <a href= "https://replicache.dev/">Replicache</a>.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=24:48">24:48</a></strong> <a href= "https://docs.yjs.dev/">YJS</a>.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=25:06">25:06</a></strong> <a href= "https://github.com/electric-sql">Electric SQL</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=25:51">25:51</a></strong> The most basic LoFi application.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=31:26">31:26</a></strong> Some bigger concepts.</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=32:34">32:34</a></strong> Answering some common questions.</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=35:19">35:19</a></strong> Some real-world examples of LoFi.</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://habitpath.io/waitlist">Habit Path by Scott Tolinski</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=37:18">37:18</a></strong> What about Apple PWA nonsense?</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=38:20">38:20</a></strong> This seems similar to real-time software and multiplayer.</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=38:47">38:47</a></strong> Sounds like too much work.</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://www.triplit.dev/">Triplit Fullstack Database</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://electric-sql.com/">Electric SQL</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://www.evolu.dev/">Evolu</a></li> <li class="has-line-data" data-line-start="42" data-line-end="48"> <strong><a href="#t=40:46">40:46</a></strong> Some useful links. <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://localfirstweb.dev//">Local-First Web Development</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://www.youtube.com/@lo.fi_dev">Local-First Lo.fi YouTube</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.inkandswitch.com/local-first">Local-First Ink & Switch</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://www.reddit.com/r/localfirst/">Local-First Reddit</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://github.com/syntaxfm/local-first">Syntax GitHub Local-First</a></li> </ul> </li> <li class="has-line-data" data-line-start="48" data-line-end="50"> <strong><a href="#t=43:30">43:30</a></strong> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="50" data-line-end="51"> <a id="Sick_Picks_50"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="52" data-line-end="54"> <p class="has-line-data" data-line-start="52" data-line-end="53"> Wes: <a href="https://dresscode.dev/">Dresscode.dev</a></p> </li> <li class="has-line-data" data-line-start="54" data-line-end="56"> <p class="has-line-data" data-line-start="54" data-line-end="55"> Scott: <a href= "https://www.monarchmoney.com/referral/tp2gjynkoo">Monarch Money</a></p> </li> </ul> <h3 class="code-line" data-line-start="56" data-line-end="57"> <a id="Hit_us_up_on_Socials_56"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="58" data-line-end="59"> 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></p> <p class="has-line-data" data-line-start="60" data-line-end="61"> 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></p> <p class="has-line-data" data-line-start="62" data-line-end="63"> 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></p> <p class="has-line-data" data-line-start="64" data-line-end="65"> 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></p>

739: The LoFi Movement: Building Local First Apps

<p>In this episode we continue our discussion about the most overused statistical measurement. We'll talk about a few more counterintuitive properties of the average, and how you might be underserving your colleagues as a result of thinking in averages.</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://neo4j.com/developer?&utm_campaign=GDB&utm_content=AMS-SrDev-ABM-Evergreen%5B%E2%80%A6%5DvHub1--&utm_medium=Audio&utm_source=Developertea&utm_justglobal=">Neo4j</a></h2><p>Is your code getting dragged down by endless JOINs and long query times? Try simplifying the complexity with graphs!</p><p>With Neo4j, you can code in your favorite programming language and against any<br />driver. See what graphs can do for you at <a href="https://neo4j.com/developer?&utm_campaign=GDB&utm_content=AMS-SrDev-ABM-Evergreen%5B%E2%80%A6%5DvHub1--&utm_medium=Audio&utm_source=Developertea&utm_justglobal=">Neo4j.com/developer</a></p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Stat Series: What Statistical Measure Are You Overusing? (And What to Do About It), Part Two

417: Module Docs

<p class="has-line-data" data-line-start="0" data-line-end="1"> Process is important. This show is dedicated to examples of non-developer tasks that can be improved by coding scripts. Join Scott and Wes for a deep dive into automation magic.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=02:11">02:11</a></strong> Brought to you by <a href="sentry.io/syntax">Sentry.io.</a></li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=03:02">03:02</a></strong> FFmpeg, a tool for video producers.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://ffmpeg.org/">FFmpeg</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://ffmpeg.org/ffprobe.html">FFprobe</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=06:35">06:35</a></strong> Markdown validation.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href= "https://github.com/syntaxfm/website/actions/workflows/merging-show-validation.yml"> Syntax Markdown Validation</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=09:21">09:21</a></strong> AI timestamps for inform editing process.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href= "https://syntax.fm/show/453/why-do-people-still-use-axios-over-fetch/transcript"> Episode 456 Transcript</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=12:19">12:19</a></strong> Generating clips for social media.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=13:31">13:31</a></strong> YouTube find and replace tool.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://github.com/syntaxfm/Youtube_Tools">YouTube Find & Replace - work in progress</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=15:03">15:03</a></strong> What other scripts can you create?</li> <li class="has-line-data" data-line-start="17" data-line-end="24"> <strong><a href="#t=16:17">16:17</a></strong> Packaging a tool for a non-developer to use. <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=16:54">16:54</a></strong> Apple Scripts</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=17:45">17:45</a></strong> Stand-alone website.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=19:25">19:25</a></strong> <a href= "https://www.scriptkit.com/">Script Kit</a>: Shortcut to Everything</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=20:19">20:19</a></strong> Other ways to run scripts.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://github.com/google/zx">ZX</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="https://github.com/dsherret/dax">Dax</a></li> </ul> </li> <li class="has-line-data" data-line-start="24" data-line-end="26"> <strong><a href="#t=22:05">22:05</a></strong> Get in touch with your tips.</li> </ul> <h3 class="code-line" data-line-start="26" data-line-end="27"> <a id="Hit_us_up_on_Socials_26"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="28" data-line-end="29"> 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></p> <p class="has-line-data" data-line-start="30" data-line-end="31"> 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></p> <p class="has-line-data" data-line-start="32" data-line-end="33"> 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></p> <p class="has-line-data" data-line-start="34" data-line-end="35"> 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></p>

738: Little Scripts: Coding for your Co-workers

<h2>Show Description</h2><p>Jim Nielsen joins us to about URLs and linking as the new subversive way to maintain the web, paying for news in Canada, should content creators be worried about AI, the case for design engineers, RSS in HTML, and the state of state and UI.</p>
<p><a href='https://shoptalkshow.com/605/' style='background: #ca6533; color: black; padding: 8px 20px; text-decoration: none;'>Listen on Website &rarr;</a></p><h2>Guests</h2><h3>Jim Nielsen</h3><p><a href='https://www.jim-nielsen.com/'>Guest's Main URL</a> • <a href='https://mastodon.social/@jimniels'>Guest's Twitter</a></p><p><p>Designer. Engineer. Writer.</p>
</p><h2>Links</h2><ul>
<li><a href="https://blog.jim-nielsen.com/about/">About - Jim Nielsen’s Blog</a></li>
<li><a href="https://www.anildash.com/2024/02/06/wherever-you-get-podcasts">“Wherever you get your podcasts” is a radical statement - Anil Dash</a></li>
<li><a href="https://blog.jim-nielsen.com/2024/the-subversive-hyperlink/">The Subversive Hyperlink - Jim Nielsen’s Blog</a></li>
<li><a href="https://blog.jim-nielsen.com/2024/more-files-plz/">More Files Please - Jim Nielsen’s Blog</a></li>
<li><a href="https://www.reuters.com/world/americas/canada-keep-pressure-facebook-pay-news-trudeau-says-2023-12-15/">Canada to keep pressure on Facebook to pay for news, Trudeau says</a></li>
<li><a href="https://blog.jim-nielsen.com/2023/cite-your-sources-ai/">Cite Your Sources, AI - Jim Nielsen’s Blog</a></li>
<li><a href="https://kottke.org/24/02/0043985-for-the-first-few-decades">For the first few decades of the web, the tacit agreement wa...</a></li>
<li><a href="https://blog.jim-nielsen.com/2024/the-case-for-design-engineers-pt-ii/">The Case For Design Engineers, Pt. II - Jim Nielsen’s Blog</a></li>
<li><a href="https://blog.jim-nielsen.com/2024/rss-in-html-follow-up/">RSS in HTML: A Follow-Up - Jim Nielsen’s Blog</a></li>
<li><a href="https://darekkay.com/blog/rss-styling/">Style your RSS feed</a></li>
<li><a href="https://blog.jim-nielsen.com/2024/ui-fn-org/">UI is a Function of Your Organization - Jim Nielsen’s Blog</a></li>
<li><a href="https://daverupert.com/2024/02/ui-states/">UI daverupert.com</a></li>
<li><a href="https://blog.jim-nielsen.com/2024/notes-on-making-software-by-peter-van-hardenberg/">Notes from “Why Can’t We Make Simple Software?” By Peter van Hardenberg - Jim Nielsen’s Blog</a></li>
<li><a href="https://melmagazine.com/en-us/story/i-staked-out-my-local-dominos-to-see-just-how-accurate-its-pizza-tracker-is">I Staked Out My Local Domino’s to See Just How Accurate Its Pizza Tracker Is</a></li>
<li><a href="https://www.theatlantic.com/health/archive/2011/10/the-benevolent-deception-when-should-a-doctor-lie-to-patients/246773/">The Benevolent Deception: When Should a Doctor Lie to Patients? - The Atlantic</a></li>
</ul><h2>Sponsors</h2><h3><a href='https://elicit.com/shoptalk'>Elicit</a></h3>Elicit’s goal is to radically increase high-quality reasoning in science and beyond. As early as 2017, they pioneered process supervision, an approach to breaking down complex work for advanced machine learning systems, so that it remains transparent and controllable. Today they use language models to help more than 200,000 researchers each month. They just raised a $9 million seed round and are looking for exceptional engineers across frontend, backend, and ML. If you're an exceptional front-end engineer looking to build the next generation of AI interfaces with a modern tech stack (Next, Tailwind, Chakra), join them!

605: Jim Nielsen on Subversive URLs, Blogging + AI, and Design Engineers

In this episode, we dive into the intricate world of WordPress, specifically focusing on the powers of WPGraphQL, which is transforming how we interact with WordPress. Join us as we sit down with our special guest, Jason Bahl, who helps us understand the possibilities that GraphQL brings to WordPress development.

Guests:
Jason Bahl - @jasonbahl

Panelists:
Ryan Burgess - @burgessdryan
Cole Turner - @coleturner

Picks:
Jason Bahl - Elgato Stream Deck https://www.amazon.com/Elgato-Stream-Deck-Mini-customizable/dp/B07DYRS1WH/ref=asc_df_B07DYRS1WH?&_encoding=UTF8&tag=frontendhappy-20&linkCode=ur2&linkId=6fdef16ea2e6c0827b59305b22a9d1da&camp=1789&creative=9325
Ryan Burgess - Kids digital camera https://www.amazon.com/gp/product/B0CFQ9VZT6/?&_encoding=UTF8&tag=frontendhappy-20&linkCode=ur2&linkId=6fdef16ea2e6c0827b59305b22a9d1da&camp=1789&creative=9325
Cole Turner - Kirkland Peanut Butter Pretzels https://www.amazon.com/Kirkland-Signature-Peanut-Butter-Pretzel/dp/B005CP1WZ0/?&_encoding=UTF8&tag=frontendhappy-20&linkCode=ur2&linkId=6fdef16ea2e6c0827b59305b22a9d1da&camp=1789&creative=9325
Cole Turner - Aranet4 CO2 Sensor https://www.amazon.com/Aranet4-Home-Temperature-Ink-Configuration/dp/B07YY7BH2W/

Episode transcript: https://www.frontendhappyhour.com/episodes/unlocking-wordpress-exploring-the-powers-of-wpgraphql

Episode 188 - Unlocking WordPress: Exploring the powers of WPGraphQL

<p>On average, you're probably overusing this specific type of statistic. In today's episode, we discuss the king of all misleading numbers: averages!</p><p>There's so much to talk about with averages that we're splitting this into two parts. Disclaimer: I am not a mathematician. But we will talk about some of the interesting properties of averages and why they are so addictive to use for humans, but more practically what counterintuitive ways we might be using them incorrectly.</p><p>If you're using your sprint velocity to forecast work, this episode is for you!</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://jam.dev/?utm_source=podcast&utm_medium=paid&utm_campaign=2024_02_developertea">Jam.dev</a></h2><p>If you’re an engineer and you would rather spend your time writing code than responding to comments in your issue tracker, send your team Jam.dev. Go to <a href="https://jam.dev/?utm_source=podcast&utm_medium=paid&utm_campaign=2024_02_developertea">jam.dev</a> to get started, it’s free.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Stat Series: What Statistical Measure Are You Overusing? (And What to Do About It), Part One

<p class="has-line-data" data-line-start="0" data-line-end="1">Get ready to learn all about the JSR package registry with Wes, Scott, and special guest Luca Casonato of Deno, as they discuss its benefits, share insights on when to use it, and teasing some secret features that promise to enhance your coding journey.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:37">00:37</a></strong> 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"> <strong><a href="#t=00:51">00:51</a></strong> Who is Luca Casonato?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=01:18">01:18</a></strong> Why do we need another package registry?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://twitter.com/wesbos/status/1755708374400811100">Wes Bos Tweet</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=04:35">04:35</a></strong> Is it ESM only?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=06:08">06:08</a></strong> What exactly is JSR?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=07:22">07:22</a></strong> How do you install things from this registry?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=09:38">09:38</a></strong> NPM specifier in NodeJS?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=12:18">12:18</a></strong> Why can’t we just fix NPM?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=14:28">14:28</a></strong> When you make things easier, people make cooler stuff.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=17:49">17:49</a></strong> A little bit about auto-documentation.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=21:18">21:18</a></strong> Auto-Types.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=22:33">22:33</a></strong> Can’t you just put TypeScript files on an NPM?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=24:04">24:04</a></strong> Package Provenance.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://github.blog/2023-04-19-introducing-npm-package-provenance/"> NPM Package Provenance</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=25:14">25:14</a></strong> Does JSR have any plans for scanning dependencies?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=27:56">27:56</a></strong> GitHub action integration.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=30:08">30:08</a></strong> Does JSR replace url imports in Deno?</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href= "https://syntax.fm/show/596/the-new-import-map-standard">Import Maps, Ep.596</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=32:15">32:15</a></strong> What about publishing JSX, TSX, CSS, WASM, etc?</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=34:16">34:16</a></strong> What are Slow Types?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=36:34">36:34</a></strong> Do you think we’ll ever see another implementation of a TypeScript type checker?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=38:23">38:23</a></strong> Types as comments or adding types to JavaScript.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=40:10">40:10</a></strong> What is the anticipated timeline?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=41:52">41:52</a></strong> Are there any parts of TypeScript that you don’t like?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=43:32">43:32</a></strong> What about when TypeScript breaks?</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=46:20">46:20</a></strong> JSR community funding.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=49:39">49:39</a></strong> Are you planning on pre-registering popular names?</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=52:26">52:26</a></strong> Super secret new features!</li> <li class="has-line-data" data-line-start="34" data-line-end="36"> <strong><a href="#t=56:39">56:39</a></strong> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="36" data-line-end="37"> <a id="Sick_Picks_36"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="38" data-line-end="40"> Luca: <a href="https://hono.dev/">Hono</a></li> </ul> <h3 class="code-line" data-line-start="40" data-line-end="41"> <a id="Shameless_Plugs_40"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="42" data-line-end="44"> Luca: <a href="https://jsr.io/waitlist">jsr.io</a></li> </ul> <h3 class="code-line" data-line-start="44" data-line-end="45"> <a id="Hit_us_up_on_Socials_44"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="46" data-line-end="47"> 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></p> <p class="has-line-data" data-line-start="48" data-line-end="49"> 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></p> <p class="has-line-data" data-line-start="50" data-line-end="51"> 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></p> <p class="has-line-data" data-line-start="52" data-line-end="53"> 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></p>

737: JSR: The New TypeScript Package Registry (NPM Killer)

You asked us your most pressing questions about JavaScript runtimes, so join Matteo Collina, Node.js TSC member and Co-founder and CTO of Platformatic, and Kevin Whinnery, Dev Rel at Deno, as they answer those questions.
Links
https://github.com/mcollina
https://nodeland.dev
https://fosstodon.org/@mcollina
https://www.linkedin.com/in/matteocollina
https://www.linkedin.com/in/matteocollina
twitter.com/kevinwhinnery
github.com/kwhinnery
https://www.linkedin.com/in/kevinwhinnery
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guests: Kevin Whinnery and Matteo Collina.


Your JavaScript runtime questions answered

We welcome on Tony Alicea, Udemy and Pluralsight Instructor and Director of Education at The Smyth Group, who talks about taking a fundamentally different approach to delivering initial bundles to the browser and the performance optimizations that enables.
Links
https://qwik.dev
https://anthonyalicea.com
https://thesmythgroup.com
https://understandingreact.com
https://twitter.com/anthonypalicea
https://www.youtube.com/@TonyAlicea
https://www.udemy.com/user/anthonypalicea
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Tony Alicea.


Qwik and JavaScript streaming with Tony Alicea

<p class="has-line-data" data-line-start="0" data-line-end="1"> Scott and Wes introduce Syntax’s new Senior Content Producer, CJ Reynolds, who will be creating video deep-dives and companion content for topics covered on the podcast. CJ, also known as the host of Coding Garden, shares his passions for web development, teaching and experimenting with new technologies.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:06">01:06</a></strong> Brought to you by <a href="www.sentry.io">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=04:39">04:39</a></strong> What got you into web development?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=09:23">09:23</a></strong> Does a degree in computer sciences help you in your day to day as a web developer?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href= "https://x.com/_hariti/status/1761059582229573895?s=20">Bell Curve Meme</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=11:39">11:39</a></strong> Wes downloads every single .com domain name.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=15:19">15:19</a></strong> What was your very first web development job?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=18:12">18:12</a></strong> How did you go from C# to websites?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=21:12">21:12</a></strong> What is the worst thing you’ve had to do as a developer?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=22:31">22:31</a></strong> What are some of your favorite projects?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://isitnewyearsday.com/">Is It New Years Day</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://dunghero.online/">Dung Hero</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=26:32">26:32</a></strong> What tech are you into right now? What inspires you?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=27:52">27:52</a></strong> Why do you like experimenting with new technologies?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=29:39">29:39</a></strong> <a href= "https://hono.dev/">Hono v4.0.5</a>.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=30:29">30:29</a></strong> <a href= "https://leanrada.com/htmz/">HTMZ</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=31:44">31:44</a></strong> If you were to build a startup today, what would your stack be?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=32:39">32:39</a></strong> What’s your tech setup?</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://github.com/codingGarden/vscode-settings">Coding Garden GitHub</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href= "https://www.amazon.com/RK-ROYAL-KLUDGE-Bluetooth-Mechanical/dp/B08JCQ9JMQ/"> RK Royal Kludge Keyboard</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=37:51">37:51</a></strong> What got you into live-streaming?</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=40:13">40:13</a></strong> Why do you use a blue screen?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=41:19">41:19</a></strong> What’s your philosophy on teaching?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://en.wikipedia.org/wiki/Bloom's_taxonomy">Bloom’s Taxonomy</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=43:56">43:56</a></strong> What are your non-developer hobbies?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href= "https://twitter.com/coding_garden/status/1749488479887561078">CJ Skateboarding with Syntax deck</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://www.instagram.com/pigthesaint/">CJ’s floofy doggo, Pig</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://www.youtube.com/watch?v=qAhR1aWwLG0">Sony VX10000</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://en.wikipedia.org/wiki/Sony_Mavica">Sony Mavica</a></li> <li class="has-line-data" data-line-start="33" data-line-end="35"> <strong><a href="#t=51:00">51:00</a></strong> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="35" data-line-end="36"> <a id="Sick_Picks_35"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="37" data-line-end="38"> CJ: <a href= "https://en.wikipedia.org/wiki/Ergonomics">Ergonomics</a>, <a href= "https://www.cuh.nhs.uk/patient-information/seating-and-ergonomics/"> More on Ergonomics</a></li> <li class="has-line-data" data-line-start="38" data-line-end="39"> Scott: <a href= "https://www.youtube.com/watch?v=uw9SMpywYHY&ab_channel=ProjectFarm"> Project Farm YouTube trash bag comparison</a></li> <li class="has-line-data" data-line-start="39" data-line-end="41"> Wes: <a href= "https://www.amazon.ca/dp/B019S3W8AO?crid=2318NXG9JQ4PC&keywords=kitchy+pizza+cutter+wheel&sprefix=Kitchy+,aps,235&language=en_US&dib_tag=se&ref_=as_li_ss_tl&dib=eyJ2IjoiMSJ9.5GOxDTt8x_TajE-EzbID_c9K9tecJLxRGEpMbjRKq2uRGa6jCWrIqUVuSLQxXEoJmugLZrrVyal-RKhqaV8Vg7fPKPlwJ07msnHCGWjlHVJDeWr3TG5ELGpFqpc4JkxeiPELWuQaCxLayq9UIwjONNLt4QGYc3lVK4SqmKjpJ-9-LVtIKEq_CYmQOXmczsFXJhQYl69pftezvdwyhpQoUD9hBZ0K3I4oRXsqUzSZpd4XLrdnB1Vp1iee1Ny7i-42JzoW2M-s0pwUX71iROhHvAS7spVhBxKPnPxr2-NxPM0.rjqi8ZaItYx9mGugQmudhgcaoxZ3nP_EwNzyLRWr5LM&sr=8-5&linkCode=gs2&linkId=dcdd68d1c4400e58c0cdb10527761659&tag=isi777-20"> Kitchy Pizza Cutter Wheel</a></li> </ul> <h3 class="code-line" data-line-start="41" data-line-end="42"> <a id="Shameless_Plugs_41"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> CJ: <a href="https://coding.garden/">Coding Garden</a></li> <li class="has-line-data" data-line-start="44" data-line-end="46"> Scott: <a href="https://www.youtube.com/@syntaxfm">Syntax on YouTube</a></li> </ul> <h3 class="code-line" data-line-start="46" data-line-end="47"> <a id="Hit_us_up_on_Socials_46"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="48" data-line-end="49"> 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></p> <p class="has-line-data" data-line-start="50" data-line-end="51"> 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></p> <p class="has-line-data" data-line-start="52" data-line-end="53"> 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></p> <p class="has-line-data" data-line-start="54" data-line-end="55"> 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></p>

736: CJ Reynolds is Joining Syntax

<p>Today we explore the idea of treating your time as a product. Start with a wishlist: what do you wish was true about your week? What are your "if-only" statements?</p><p>Next, put on your product owner hat. How would you improve the situation, if you knew the "consumer"'s requests?</p><p>This exercise should provide unique insight and a new lens to view your time and agency through.</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://getunblocked.com">Unblocked</a></h2><p>If you would rather spend your time coding instead of digging for answers or dealing with questions from colleagues, give Unblocked a try. Unblocked provides helpful and accurate answers to questions about your codebase. Get started at <a href="https://getunblocked.com/">getunblocked.com</a>.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Treat Your Time as A Product You Own

416: Multi-Dimensional Numbers

<p class="has-line-data" data-line-start="0" data-line-end="1">Wes shares the story of how the Taliban stole his .af domain. Scott and Wes discuss top-level domain (TLD) best practices, how to find unique custom domain names for your website, and how to avoid having yours stolen.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:16">00:16</a></strong> Brought to you by <a href="www.sentry.io">Sentry.io</a></li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=01:11">01:11</a></strong> The story of how the Taliban stole my domain.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=05:10">05:10</a></strong> When you purchase a domain, does that country receive the registration fee?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href= "https://en.wikipedia.org/wiki/Country_code_top-level_domain">Country Code Top-Level Domain</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://en.wikipedia.org/wiki/.arpa">Infrastructure Top-Level Domain</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href= "https://en.wikipedia.org/wiki/Generic_top-level_domain">Generic Top-Level Domain</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href= "https://en.wikipedia.org/wiki/Sponsored_top-level_domain">Sponsored Top-Level Domain</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=07:29">07:29</a></strong> Notion lost their .so domain.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="www.notion.so">Notion</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=09:18">09:18</a></strong> .ai domain names.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=09:53">09:53</a></strong> Other popular TLD options.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://tolin.ski/">tolin.ski</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://wesbos.com/">wes.io</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=12:05">12:05</a></strong> What are the best TLDs?</li> <li class="has-line-data" data-line-start="19" data-line-end="21"> <strong><a href="#t=13:18">13:18</a></strong> <a href= "www.iwantmyname.com">iwantmyname</a></li> </ul> <h3 class="code-line" data-line-start="21" data-line-end="22"> <a id="Hit_us_up_on_Socials_21"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="23" data-line-end="24"> 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></p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 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></p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 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></p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 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></p>

735: The Taliban Stole My Domain

<h2>Show Description</h2><p>A follow up on jQuery conversation, Microsoft owning all the things, what VS Code plugins are your ride or die, the ability to Git from wherever you want, Tailwind drama, global design system follow up, Arc Search gets roasted, and Frontend Design Conference is back!</p>
<p><a href='https://shoptalkshow.com/604/' style='background: #ca6533; color: black; padding: 8px 20px; text-decoration: none;'>Listen on Website &rarr;</a></p><h2>Links</h2><ul>
<li><a href="https://github.com/tc39/proposal-type-annotations">GitHub - tc39/proposal-type-annotations: ECMAScript proposal for type syntax that is erased - Stage 1</a></li>
<li><a href="https://whiskeywebandwhatnot.fm/chris-coyier-on-embracing-technology-and-the-future-of-web-development">Chris Coyier on Embracing Technology and the Future of Web Development - Whiskey Web and Whatnot - Episode 131</a></li>
<li><a href="https://zed.dev/">Zed</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula">Dracula Official</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">GitLens</a></li>
<li><a href="https://www.git-tower.com/mac?">Tower Git Client</a></li>
<li><a href="https://desktop.github.com/">GitHub Desktop</a></li>
<li><a href="https://www.anildash.com/2024/02/06/wherever-you-get-podcasts">“Wherever you get your podcasts” is a radical statement - Anil Dash</a></li>
<li><a href="https://www.sourcetreeapp.com/">Sourcetree </a></li>
<li><a href="https://nuejs.org/blog/tailwind-misinformation-engine/">Tailwind marketing and misinformation engine</a></li>
<li><a href="https://heydonworks.com/article/what-is-utility-first-css/">What is Utility-First CSS?: HeydonWorks</a></li>
<li><a href="https://bradfrost.com/blog/post/a-global-design-system/">A Global Design System | Brad Frost</a></li>
<li><a href="https://chriscoyier.net/2024/02/05/thoughts-on-a-global-design-system/">Thoughts on a Global Design System – Chris Coyier</a></li>
<li><a href="https://arc.net/blog/arc-search">Arc Search</a></li>
<li><a href="https://bradfrost.com/blog/link/can-apple-win-back-music-vulf-opinion/">Can Apple Win Back Music - Brad Frost</a></li>
<li><a href="https://www.youtube.com/watch?v=uq6XNIJVDcM">Carolina Chocolate Drops</a></li>
<li><a href="https://www.twitch.tv/tpain">TPAIN - Twitch</a></li>
<li><a href="https://frontenddesignconference.com/">Front-end Design Conference - April 25-26, 2024</a></li>
</ul><h2>Sponsors</h2><h3><a href='https://srv.buysellads.com/ads/long/x/TFMXUIZHTTTTTTFCVS4NPTTTTTTFJRO6KWTTTTTTT3PKB7VTTTTTTJQUZHJI6LI7QMUMCYZV5ESN5JB4CQWNC2IDGQFT'>Wix</a></h3>Wix Studio combines pure web design with maximum productivity. Taking the grind out of website creation for professional designers. Use the powerful visual editor, or work online in a VS Code-based IDE, or code locally and push changes via GitHub.

604: VS Code Plugins, Git as a Radical Statement, Tailwind & Arc Drama

<p>The Von Restorff effect says we remember things that stand out. This is probably mostly intuitive - "that stood out to me" is a common colloquialism. But what isn't intuitive is the implied downside of uniformity, which is often the product of process.</p><p>In other words, if your process creates perfect uniformity, elevating any one thing, say, in priority, is going to be exceedingly difficult.</p><p>Additionally, if your "escalation" process is overused, it will once again violate the point of the escalation in the first place. "If everything is urgent, nothing is urgent."</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://jam.dev/?utm_source=podcast&utm_medium=paid&utm_campaign=2024_02_developertea">Jam.dev</a></h2><p>If you’re an engineer and you would rather spend your time writing code than responding to comments in your issue tracker, send your team Jam.dev. Go to <a href="https://jam.dev/?utm_source=podcast&utm_medium=paid&utm_campaign=2024_02_developertea">jam.dev</a> to get started, it’s free.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Von Restorff Isolation Effect and a Backfiring of Process

<p class="has-line-data" data-line-start="0" data-line-end="1"> Scott and Wes welcome HTMX creator Carson Gross to discuss the versatile applications and optimal scenarios for using HTMX, alongside insights into its creation and evolution. Join us as we explore the future prospects and improvements as we look towards HTMX 2.0.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:52">00:52</a></strong> Brought to you by <a href="www.sentry.io">Sentry.io</a></li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:22">02:22</a></strong> Who is Carson Gross?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://github.com/bigskysoftware">BigSkySoftware GitHub</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://bigsky.software/">BigSkySoftware</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=03:53">03:53</a></strong> What exactly is HTMX?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://htmx.org/">htmx.org</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://htmx.org/examples/">htmx.org/examples</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=07:04">07:04</a></strong> What made you want to create something like HTMX?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://intercoolerjs.org/">intercooler.js</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=10:01">10:01</a></strong> Would HTML look more like HTMX if we were to rebuild it today?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=12:54">12:54</a></strong> Isn’t HTMX a step backward into old-school AJAX?</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=16:09">16:09</a></strong> When would you avoid using HTMX?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=17:56">17:56</a></strong> Does HTMX put an unnecessary load on the server?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=21:46">21:46</a></strong> What are your thoughts on rendering everything on the server?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=26:29">26:29</a></strong> What is your favorite stack?</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=28:49">28:49</a></strong> Things that are lost moving to the JavaScript framework world.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=30:16">30:16</a></strong> HTMX coupling your front end and back end.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=32:28">32:28</a></strong> How do you feel about web components?</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=33:40">33:40</a></strong> What are the big templating engines and your top pick?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://htmx.org/essays/">HTMX Essays</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=36:33">36:33</a></strong> Object-oriented HTML.</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=37:38">37:38</a></strong> Is there an offline story or a “local-first” story for HTMX?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=38:44">38:44</a></strong> What does the future of HTMX look like given its rise in popularity?</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=40:03">40:03</a></strong> HTMX and X (Twitter).</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://syntax.fm/show/726">Syntax Show 726</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://twitter.com/htmx_org">HTMX on X</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=42:30">42:30</a></strong> The Microsoft story.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=45:26">45:26</a></strong> Carson’s thoughts on de-escalating the language around HTMX.</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> <strong><a href="#t=47:44">47:44</a></strong> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="35" data-line-end="36"> <a id="Sick_Picks_35"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="37" data-line-end="39"> Carson: <a href="https://alpinejs.dev/">AlpineJS</a>, <a href= "https://datastar.fly.dev/">Datastar</a></li> </ul> <h3 class="code-line" data-line-start="39" data-line-end="40"> <a id="Shameless_Plugs_39"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> Carson: <a href="https://hypermedia.systems/">Hypermedia Systems</a>, <a href="https://swag.htmx.org/en-cad/">HTMX Swag</a></li> </ul> <h3 class="code-line" data-line-start="44" data-line-end="45"> <a id="Hit_us_up_on_Socials_44"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="46" data-line-end="47"> 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></p> <p class="has-line-data" data-line-start="48" data-line-end="49"> 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></p> <p class="has-line-data" data-line-start="50" data-line-end="51"> 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></p> <p class="has-line-data" data-line-start="52" data-line-end="53"> 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></p>

734: HTMX Web Apps with Carson Gross

With StyleX recently going open source, we welcome on Naman Goel, StyleX lead, to talk about the styling system, how it was created, and what it’s offering React developers now.
Links
http://blog.namangoel.com
https://twitter.com/naman34
https://quiet.social/@nmn@indieweb.social
https://stylexjs.com
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Naman Goel.


StyleX with Naman Goel

<p>In today's episode, we do a journaling exercise to provide a new lens on developing your own career roadmap.</p><p>We're going to practice the power of hindsight, finding our wiser selves, and ultimately looking forward and backward...at the same time. It sounds a little odd, but it's all based in solid cognitive science. If you have a notoriously hard time figuring out your career path, I'd invite you to participate!</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://neo4j.com/developer?&utm_campaign=GDB&utm_content=AMS-SrDev-ABM-Evergreen%5B%E2%80%A6%5DvHub1--&utm_medium=Audio&utm_source=Developertea&utm_justglobal=">Neo4j</a></h2><p>Is your code getting dragged down by endless JOINs and long query times? Try simplifying the complexity with graphs!</p><p>With Neo4j, you can code in your favorite programming language and against any<br />driver. See what graphs can do for you at <a href="https://neo4j.com/developer?&utm_campaign=GDB&utm_content=AMS-SrDev-ABM-Evergreen%5B%E2%80%A6%5DvHub1--&utm_medium=Audio&utm_source=Developertea&utm_justglobal=">Neo4j.com/developer</a></p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Perform a Career Premortem

Eddy Vinck, Senior Software Engineer at FrontValue, shares how he uses Astro in his day-to-day development with practical applications.
Links
https://twitter.com/EddyVinckk
https://www.eddyvinck.com
https://github.com/EddyVinck
https://www.linkedin.com/in/eddyvinck
https://substack.com/profile/74566816-eddy-vinck
https://youtube.com/channel/eddyvinck
https://astro.build
https://docs.astro.build/en/getting-started
We want to hear from you!
How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?
Let us know by sending an email to our producer, Emily, at emily.kochanekketner@logrocket.com (mailto:emily.kochanekketner@logrocket.com), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod).
Follow us. Get free stickers.
Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers!
What does LogRocket do?
LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Eddy Vinck.


Astro IRL with Eddy Vinck

<p class="has-line-data" data-line-start="0" data-line-end="1">In this potluck episode of Syntax, Wes and Scott discuss egress, scraping, Safari EU changes, and answer questions on updating dependencies and SetInterval.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:35">01:35</a></strong> Brought to you by <a href="www.sentry.io">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:49">02:49</a></strong> I have over 100,000 user images on Cloudinary. How do I migrate to another service?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href= "https://github.com/wesbos/cloudflare-cloudinary-proxy">Cloudflare-Cloudinary Proxy</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=07:27">07:27</a></strong> Switching from Mac to PC.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="www.figma.com">Figma</a>, <a href= "https://www.blackmagicdesign.com/products/davinciresolve">DaVinci Resolve</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=12:32">12:32</a></strong> What’s your take on the Safari 17.4 PWA removal debacle for EU users?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://bugs.webkit.org/show_bug.cgi?id=268643">Bug Report</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://bugs.webkit.org/show_bug.cgi?id=267743">Fullscreen API Bug Report</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=19:45">19:45</a></strong> Is there any clear front-runner when it comes to monorepo tools?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=23:44">23:44</a></strong> Some big web apps have a div relatively high in the DOM with a class like “scroll-container” or “cursor-events”, why is that?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=32:15">32:15</a></strong> Is ChatGPT Plus worth it? I’m trying to avoid death by 1000 subscriptions.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://elevenlabs.io/">ElevenLabs</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=37:47">37:47</a></strong> Performance vs accuracy when working with timers.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=40:37">40:37</a></strong> How do you update the dependencies to work with a current version of Node? Also, if you are building from scratch, how do you determine what dependencies to use?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://syntax.fm/show/425/updating-project-dependencies">Syntax show 425: Updating Project Dependencies</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=45:52">45:52</a></strong> Clarification on the browser blocking.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://blog.mozilla.org/addons/2022/11/17/manifest-v3-signing-available-november-21-on-firefox-nightly/#:~:text=Firefox%20MV3%20stands%20apart%20from%20other%20iterations%20of,service%20workers%20in%20the%20future%20for%20compatibility.%20"> Mozilla’s vision for Firefox MV3</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=49:19">49:19</a></strong> Problems when working with JavaScript’s new Date().</li> <li class="has-line-data" data-line-start="23" data-line-end="25"> <strong><a href="#t=54:27">54:27</a></strong> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="25" data-line-end="26"> <a id="Sick_Picks_25"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="27" data-line-end="29"> Scott: <a href="https://amzn.to/48jcg4W">LED Flashlight</a></li> </ul> <h3 class="code-line" data-line-start="29" data-line-end="30"> <a id="Shameless_Plugs_29"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="31" data-line-end="33"> Wes: <a href="https://www.youtube.com/@syntaxfm">Syntax YouTube</a></li> </ul> <h3 class="code-line" data-line-start="33" data-line-end="34"> <a id="Hit_us_up_on_Socials_33"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="35" data-line-end="36"> 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></p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 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></p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 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></p> <p class="has-line-data" data-line-start="41" data-line-end="42"> 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></p>

733: Egress, scraping, Safari EU changes, is SetInterval worth it?

<p class="has-line-data" data-line-start="0" data-line-end="1">Wes and Scott explore the web standards and email authentication methods that keep your email from going to spam; DMARC, SPF and DKIM. If you send email via a custom domain name, you need to listen to this!</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:06">01:06</a></strong> Brought to you by <a href="http://Sentry.io">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:08">02:08</a></strong> What exactly are SPF, DKIM, and DMARC?</li> <li class="has-line-data" data-line-start="7" data-line-end="12"> <strong><a href="#t=02:53">02:53</a></strong> Different ways that you may want to send email. <ul> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=03:23">03:23</a></strong> Transactional emails.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://resend.com/">Resend, email for developers</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=05:07">05:07</a></strong> Email marketing.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=05:47">05:47</a></strong> Anything else that sends email on your behalf.</li> </ul> </li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=07:13">07:13</a></strong> SPF (Sender Policy Framework).</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://postmarkapp.com/guides/spf">Postmark defines SPF</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href= "https://postmarkapp.com/glossary/sender-policy-framework?utm_source=google&utm_medium=cpc&utm_campaign=Performance-Max&utm_adgroup=&utm_term=&gclid=Cj0KCQiAzoeuBhDqARIsAMdH14E-IfBWuTWX86AisSz6FMT7yVu_MVWdcki6lGu02-G03pmNHrVHe_YaAlQSEALw_wcB"> Postmark SPF in 5 Minutes</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=08:34">08:34</a></strong> You can only have one SPF record.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=10:18">10:18</a></strong> DKIM (DomainKeys Identified Mail).</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://postmarkapp.com/guides/dkim">Postmark defines DKIM</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=13:39">13:39</a></strong> DMARC (Domain-based Message Authentication, Reporting, and Conformance).</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://convertkit.com/">Convertkit</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=16:38">16:38</a></strong> RUA Reporting.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=18:03">18:03</a></strong> How to set up reporting.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=21:08">21:08</a></strong> Does emails marked as spam hurt the IP that sends them?</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=22:18">22:18</a></strong> Other things to consider.</li> <li class="has-line-data" data-line-start="24" data-line-end="26"> Special thanks to David Flanagan for the help on this! <a href= "https://twitter.com/rawkode">@rawkode</a></li> </ul> <h3 class="code-line" data-line-start="26" data-line-end="27"> <a id="Hit_us_up_on_Socials_26"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="28" data-line-end="29"> 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></p> <p class="has-line-data" data-line-start="30" data-line-end="31"> 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></p> <p class="has-line-data" data-line-start="32" data-line-end="33"> 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></p> <p class="has-line-data" data-line-start="34" data-line-end="35"> 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></p>

732: Stop going to Spam: DMARC, SPF and DKIM Explained

<h2>Show Description</h2><p>Josh (or Jsoh) stops by to talk about his work at Deno, recent blog posts on Copilot, why Svelte is awesome and React is not, Apple and PWA, and building word games on the web.</p>
<p><a href='https://shoptalkshow.com/603/' style='background: #ca6533; color: black; padding: 8px 20px; text-decoration: none;'>Listen on Website &rarr;</a></p><h2>Guests</h2><h3>Josh Collinsworth</h3><p><a href='https://joshcollinsworth.com/'>Guest's Main URL</a> • <a href='https://hachyderm.io/@collinsworth'>Guest's Twitter</a></p><p><p>Frontend Engineer at Deno, the maker and designer of the word games Quina, and Hondo.</p>
</p><h2>Links</h2><ul>
<li><a href="https://joshcollinsworth.com/">Josh Collinsworth</a></li>
<li><a href="https://deno.com/">Deno, the next-generation JavaScript runtime</a></li>
<li><a href="https://deno.com/deploy">Deno Deploy | Deno</a></li>
<li><a href="https://fresh.deno.dev/">Fresh - The next-gen web framework.</a></li>
<li><a href="https://joshcollinsworth.com/blog/copilot">I worry our Copilot is leaving some passengers behind - Josh Collinsworth blog</a></li>
<li><a href="https://www.youtube.com/watch?v=8pDqJVdNa44">How A Small Team of Developers Created React at Facebook | React.js: The Documentary</a></li>
<li><a href="https://vitejs.dev/">Vite | Next Generation Frontend Tooling</a></li>
<li><a href="https://www.screen.studio/">Screen Recorder for macOS. Beautiful videos in minutes | Screen Studio</a></li>
<li><a href="https://cleanshot.com/">CleanShot X for Mac</a></li>
<li><a href="https://crates.io/crates/stitchy">stitchy - crates.io: Rust Package Registry</a></li>
<li><a href="https://www.raycast.com/">Raycast</a></li>
<li><a href="https://sipapp.io/">Home</a></li>
<li><a href="https://squoosh.app/">Squoosh</a></li>
<li><a href="https://runjs.app/">RunJS - JavaScript Playground</a></li>
<li><a href="https://quina.app/">Quina - Menu</a></li>
<li><a href="https://www.playhondo.com/">Hondo - a word game in 100 words or less</a></li>
<li><a href="https://www.pwabuilder.com/">Home / PWABuilder</a></li>
</ul><h2>Sponsors</h2><h3><a href='https://elicit.com/shoptalk'>Join Elicit as a software engineer</a></h3>Elicit’s goal is to radically increase high-quality reasoning in science and beyond. As early as 2017, they pioneered process supervision, an approach to breaking down complex work for advanced machine learning systems, so that it remains transparent and controllable. Today they use language models to help more than 200,000 researchers each month. They just raised a $9 million seed round and are looking for exceptional engineers across frontend, backend, and ML. If you're an exceptional front-end engineer looking to build the next generation of AI interfaces with a modern tech stack (Next, Tailwind, Chakra), join them!

603: Deno, React Alternatives, and Copilot Concerns with Triple Threat Josh Collinsworth

Social media continues to impact us in some way or another. In this episode, we discuss what platforms we use and what value we get from them. We share our thoughts on what the future of social media might look like.

Panelists:
Ryan Burgess - @burgessdryan
Jem Young - @JemYoung
Augustus Yuan - @augburto
Shirley Wu - @sxywu

Episode transcript: https://www.frontendhappyhour.com/episodes/social-media-platforms-wheres-the-party-at

Episode 187 - Social media platforms - where's the party at?

<p class="has-line-data" data-line-start="0" data-line-end="1"> Scott and Wes are joined by security expert, Alex Sexton of Stripe to cover all things: client security, XSS, attack vectors, and CSP (content security policy).</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:31">00:31</a></strong> Brought to you by <a href="http://Sentry.io">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=00:57">00:57</a></strong> Who is Alex Sexton?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=04:44">04:44</a></strong> Stripe dashboard is a work of art.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=05:08">05:08</a></strong> Tell us about the design system.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://react-spectrum.adobe.com/react-aria/">React Aria</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=08:59">08:59</a></strong> Who develops the iOS app?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=09:50">09:50</a></strong> Stripe’s CSP (content security policy).</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=12:50">12:50</a></strong> What even is a content security policy?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://www.youtube.com/watch?v=JbfNWg6JS4U">Content Security Policy explanation</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=13:57">13:57</a></strong> Douglas Crockford of Yahoo on security.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://github.com/douglascrockford">Douglas on GitHub</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=15:13">15:13</a></strong> Security philosophy.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=16:59">16:59</a></strong> What about inline styles and inline JavaScript?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=19:41">19:41</a></strong> How do we safely set inline styles from JS?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=20:20">20:20</a></strong> Setting up with meta tags.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=22:52">22:52</a></strong> What are common situations that require security exceptions?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=26:24">26:24</a></strong> Potential damage with inline style tags.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=32:45">32:45</a></strong> Looping vulnerabilities.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=36:32">36:32</a></strong> What about JavaScript injection?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=37:09">37:09</a></strong> Myspace Samy Worm.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href= "https://en.wikipedia.org/wiki/Samy_(computer_worm)">Myspace Samy Worm Wiki</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href= "https://docs.sentry.io/product/security-policy-reporting/">Sentry.io Security Policy Reporting</a></li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=42:02">42:02</a></strong> Does a CSP stop code from running in the console?</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=43:28">43:28</a></strong> What are some general security best practices?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=46:35">46:35</a></strong> Strategies for rolling out a CSP.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=51:49">51:49</a></strong> Final tip, Strict Dynamic.</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href= "https://content-security-policy.com/strict-dynamic/">Strict Dynamic</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=56:36">56:36</a></strong> Where does the CSP live within Stripe?</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://stripe.com/en-ca/newsroom/news/bfcm2023">Original Black Friday story</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=59:35">59:35</a></strong> One last story.</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=01:01:20">01:01:20</a></strong> Sick Picks + Shameless Plugs</li> </ul> <h3 class="code-line" data-line-start="38" data-line-end="39"> <a id="Sick_Picks__Shameless_Plugs_38"></a>Sick Picks + Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="40" data-line-end="42"> Alex: <a href="https://www.instagram.com/wesbos/">Wes Bos’ Instagram</a></li> </ul> <h3 class="code-line" data-line-start="42" data-line-end="43"> <a id="Hit_us_up_on_Socials_42"></a>Hit us up on Socials!</h3> <p class="has-line-data" data-line-start="44" data-line-end="45"> 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></p> <p class="has-line-data" data-line-start="46" data-line-end="47"> 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></p> <p class="has-line-data" data-line-start="48" data-line-end="49"> 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></p> <p class="has-line-data" data-line-start="50" data-line-end="51"> 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></p>

731: Client side security, XSS attacks & CSP with Stripe’s Alex Sexton

<p>As you grow your career, you will continuously lean on delegation to scale your efforts and focus on the most important things.</p><p>True delegation requires ownership, and ownership can be thought of in two critical parts: agency and responsibility.</p><p>In today's episode, we discuss the fool's errand of delegating only one or the other of these parts.</p><h2>🙏 Today's Episode is Brought To you by: <a href="https://jam.dev/?utm_source=podcast&utm_medium=paid&utm_campaign=2024_02_developertea">Jam.dev</a></h2><p>If you’re an engineer and you would rather spend your time writing code than responding to comments in your issue tracker, send your team Jam.dev. Go to <a href="https://jam.dev/?utm_source=podcast&utm_medium=paid&utm_campaign=2024_02_developertea">jam.dev</a> to get started, it’s free.</p><h2>📮 Ask a Question</h2><p>If you enjoyed this episode and would like me to discuss a question that you have on the show, drop it over at: <a href="https://www.developertea.com/contact">developertea.com.</a></p><h2>📮 Join the <a href="https://developertea.com/discord">Discord</a></h2><p>If you want to be a part of a supportive community of engineers (non-engineers welcome!) working to improve their lives and careers, join us on the Developer Tea Discord community by visiting <a href="https://developertea.com/discord">https://developertea.com/discord</a> today!</p><h2>🧡 Leave a Review</h2><p>If you're enjoying the show and want to support the content head over to iTunes and <a href="https://ratethispodcast.com/devtea">leave a review</a>! It helps other developers discover the show and keep us focused on what matters to you.</p>


Dev Hub

A collation of the top Web Development Podcasts