Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Ben Vinegar × Distributed Tracing and TypeScript Migrations

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p>In this episode of Syntax, Wes and Scott talk with Ben Vinegar about his work with Sentry, their migration to TypeScript, and advice for running JavaScript on other websites.</p> <h2 class="code-line" dir="auto" style= "margin-top: 0px; font-weight: normal; margin-bottom: 0.2em; position: relative; color: #d6deeb; font-family: -apple-system, system-ui, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif; font-variant-ligatures: normal; orphans: 2; widows: 2; text-decoration-thickness: initial;" data-line="9">Kontent by Kentico - Sponsor</h2> <p class="code-line" dir="auto" style= "margin-top: 0px; margin-bottom: 0.7em; position: relative; color: #d6deeb; font-family: -apple-system, system-ui, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif; font-size: 14px; font-variant-ligatures: normal; orphans: 2; widows: 2; text-decoration-thickness: initial;" data-line="11">Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.<a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://kontent.ai/syntax" href="https://kontent.ai/syntax" data-href="https://kontent.ai/syntax">Spin up a new project today</a> and discover Kontent.</p> <h2 class="code-line" dir="auto" style= "margin-top: 0px; font-weight: normal; margin-bottom: 0.2em; position: relative; color: #d6deeb; font-family: -apple-system, system-ui, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif; font-variant-ligatures: normal; orphans: 2; widows: 2; text-decoration-thickness: initial;" data-line="13">Hashnode - Sponsor</h2> <p class="code-line" dir="auto" style= "margin-top: 0px; margin-bottom: 0.7em; position: relative; color: #d6deeb; font-family: -apple-system, system-ui, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif; font-size: 14px; font-variant-ligatures: normal; orphans: 2; widows: 2; text-decoration-thickness: initial;" data-line="15">Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community.</p> <p class="code-line" dir="auto" style= "margin-top: 0px; margin-bottom: 0.7em; position: relative; color: #d6deeb; font-family: -apple-system, system-ui, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif; font-size: 14px; font-variant-ligatures: normal; orphans: 2; widows: 2; text-decoration-thickness: initial;" data-line="17"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://hashnode.com/" href="https://hashnode.com/" data-href="https://hashnode.com/">Hashnode: Everything you need to start blogging as a developer!</a></p> <h2 class="code-line" dir="auto" style= "margin-top: 0px; font-weight: normal; margin-bottom: 0.2em; position: relative; color: #d6deeb; font-family: -apple-system, system-ui, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif; font-variant-ligatures: normal; orphans: 2; widows: 2; text-decoration-thickness: initial;" data-line="19">Show Notes</h2> <ul class="code-line" dir="auto" style= "margin-top: 0px; margin-bottom: 0.7em; position: relative; color: #d6deeb; font-family: -apple-system, system-ui, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif; font-size: 14px; font-variant-ligatures: normal; orphans: 2; widows: 2; text-decoration-thickness: initial;" data-line="21"> <li class="code-line" dir="auto" data-line="21"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://github.com/benvinegar" href= "https://github.com/benvinegar" data-href= "https://github.com/benvinegar">Ben Vinegar</a></li> <li class="code-line" dir="auto" data-line="22"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=00:20" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=00:20" data-href="#t=00:20">00:20</a></strong> Guest introduction</li> <li class="code-line" dir="auto" data-line="23"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=05:58" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=05:58" data-href="#t=05:58">05:58</a></strong> Seeing bug reports from Sentry</li> <li class="code-line" dir="auto" data-line="24"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=07:38" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=07:38" data-href="#t=07:38">07:38</a></strong> Distributed tracing for full stack developers</li> <li class="code-line" dir="auto" data-line="25"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=12:16" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=12:16" data-href="#t=12:16">12:16</a></strong> Amazon X Ray</li> <li class="code-line" dir="auto" data-line="26"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://aws.amazon.com/xray/" href= "https://aws.amazon.com/xray/" data-href= "https://aws.amazon.com/xray/">AWS Xray</a></li> <li class="code-line" dir="auto" data-line="27"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=15:32" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=15:32" data-href="#t=15:32">15:32</a></strong> Using Tracing</li> <li class="code-line" dir="auto" data-line="28"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=19:40" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=19:40" data-href="#t=19:40">19:40</a></strong> Sponsor: Kontent by Kentico</li> <li class="code-line" dir="auto" data-line="29"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=20:58" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=20:58" data-href="#t=20:58">20:58</a></strong> Cloudflare Worker Integration</li> <li class="code-line" dir="auto" data-line="30"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=22:30" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=22:30" data-href="#t=22:30">22:30</a></strong> How does Sentry have open source and a business?</li> <li class="code-line" dir="auto" data-line="31"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://heroku.com" href="https://heroku.com/" data-href= "https://heroku.com">Heroku</a></li> <li class="code-line" dir="auto" data-line="32"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://www.digitalocean.com/products/app-platform" href= "https://www.digitalocean.com/products/app-platform" data-href= "https://www.digitalocean.com/products/app-platform">App Platform</a></li> <li class="code-line" dir="auto" data-line="33"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://mediatemple.net" href="https://mediatemple.net/" data-href="https://mediatemple.net">Media Temple</a></li> <li class="code-line" dir="auto" data-line="34"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://www.dreamhost.com" href="https://www.dreamhost.com/" data-href="https://www.dreamhost.com">Dreamhost</a></li> <li class="code-line" dir="auto" data-line="35"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://github.com/Automattic/wp-calypso" href= "https://github.com/Automattic/wp-calypso" data-href= "https://github.com/Automattic/wp-calypso">WordPress Calypso</a></li> <li class="code-line" dir="auto" data-line="36"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=32:30" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=32:30" data-href="#t=32:30">32:30</a></strong> Sponsor: Hashnode</li> <li class="code-line" dir="auto" data-line="37"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=34:07" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=34:07" data-href="#t=34:07">34:07</a></strong> What is the tech stack of Sentry?</li> <li class="code-line" dir="auto" data-line="38"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=38:20" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=38:20" data-href="#t=38:20">38:20</a></strong> Sentry switching to TypeScript</li> <li class="code-line" dir="auto" data-line="39"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title= "https://blog.sentry.io/2021/04/12/slow-and-steady-converting-sentrys-entire-frontend-to-typescript" href= "https://blog.sentry.io/2021/04/12/slow-and-steady-converting-sentrys-entire-frontend-to-typescript" data-href= "https://blog.sentry.io/2021/04/12/slow-and-steady-converting-sentrys-entire-frontend-to-typescript"> Sentry switching to TypeScript</a></li> <li class="code-line" dir="auto" data-line="40"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=44:36" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=44:36" data-href="#t=44:36">44:36</a></strong> Running JavaScript on other websites</li> <li class="code-line" dir="auto" data-line="41"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=51:24" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=51:24" data-href="#t=51:24">51:24</a></strong> Sponsor: Sentry</li> <li class="code-line" dir="auto" data-line="42"><strong><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="#t=53:08" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/434%20-%20Ben%20Vinegar.md#t=53:08" data-href="#t=53:08">53:08</a></strong> Sick Picks</li> </ul> <h2 class="code-line" dir="auto" style= "margin-top: 0px; font-weight: normal; margin-bottom: 0.2em; position: relative; color: #d6deeb; font-family: -apple-system, system-ui, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif; font-variant-ligatures: normal; orphans: 2; widows: 2; text-decoration-thickness: initial;" data-line="44">××× SIIIIICK ××× PIIIICKS ×××</h2> <ul class="code-line" dir="auto" style= "margin-top: 0px; margin-bottom: 0.7em; position: relative; color: #d6deeb; font-family: -apple-system, system-ui, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif; font-size: 14px; font-variant-ligatures: normal; orphans: 2; widows: 2; text-decoration-thickness: initial;" data-line="46"> <li class="code-line" dir="auto" data-line="46"> <p class="code-line" dir="auto" style= "margin-top: 0px; margin-bottom: 0.7em; position: relative;" data-line="46">Scott: <a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://www.wbur.org/podcasts/lastseen" href= "https://www.wbur.org/podcasts/lastseen" data-href= "https://www.wbur.org/podcasts/lastseen">Last Seen</a></p> </li> <li class="code-line" dir="auto" data-line="47"> <p class="code-line" dir="auto" style= "margin-top: 0px; margin-bottom: 0.7em; position: relative;" data-line="47">Wes: <a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://amzn.to/3HP29IL" href="https://amzn.to/3HP29IL" data-href="https://amzn.to/3HP29IL">SEOUL Sisters Korean Kimchi Seasoning</a></p> </li> <li class="code-line" dir="auto" data-line="48"> <p class="code-line" dir="auto" style= "margin-top: 0px; margin-bottom: 0.7em; position: relative;" data-line="48">Ben: <a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title= "https://podcasts.apple.com/us/podcast/worst-scene-best-scene/id1290069572" href= "https://podcasts.apple.com/us/podcast/worst-scene-best-scene/id1290069572" data-href= "https://podcasts.apple.com/us/podcast/worst-scene-best-scene/id1290069572"> Worst Scene / Best Scene</a></p> </li> <li class="code-line" dir="auto" data-line="50"> <p class="code-line" dir="auto" style= "margin-top: 0px; margin-bottom: 0.7em; position: relative;" data-line="50"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://www.earwolf.com/show/i-was-there-too/" href= "https://www.earwolf.com/show/i-was-there-too/" data-href= "https://www.earwolf.com/show/i-was-there-too/">I Was There Too</a></p> </li> </ul> <h2 class="code-line" dir="auto" style= "margin-top: 0px; font-weight: normal; margin-bottom: 0.2em; position: relative; color: #d6deeb; font-family: -apple-system, system-ui, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif; font-variant-ligatures: normal; orphans: 2; widows: 2; text-decoration-thickness: initial;" data-line="52">Shameless Plugs</h2> <ul class="code-line" dir="auto" style= "margin-top: 0px; margin-bottom: 0.7em; position: relative; color: #d6deeb; font-family: -apple-system, system-ui, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif; font-size: 14px; font-variant-ligatures: normal; orphans: 2; widows: 2; text-decoration-thickness: initial;" data-line="54"> <li class="code-line" dir="auto" data-line="54">Scott: <a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title= "https://leveluptutorials.com/tutorials/keystone-js/introduction" href= "https://leveluptutorials.com/tutorials/keystone-js/introduction" data-href= "https://leveluptutorials.com/tutorials/keystone-js/introduction">LevelUp Tutorials</a></li> <li class="code-line" dir="auto" data-line="55">Wes: <a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://wesbos.com/courses" href= "https://wesbos.com/courses" data-href= "https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" dir="auto" style= "margin-top: 0px; font-weight: normal; margin-bottom: 0.2em; position: relative; color: #d6deeb; font-family: -apple-system, system-ui, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif; font-variant-ligatures: normal; orphans: 2; widows: 2; text-decoration-thickness: initial;" data-line="57">Tweet us your tasty treats</h2> <ul class="code-line" dir="auto" style= "margin-top: 0px; margin-bottom: 0.7em; position: relative; color: #d6deeb; font-family: -apple-system, system-ui, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif; font-size: 14px; font-variant-ligatures: normal; orphans: 2; widows: 2; text-decoration-thickness: initial;" data-line="59"> <li class="code-line" dir="auto" data-line="59"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://www.instagram.com/stolinski/" href= "https://www.instagram.com/stolinski/" data-href= "https://www.instagram.com/stolinski/">Scott's Instagram</a></li> <li class="code-line" dir="auto" data-line="60"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://www.instagram.com/LevelUpTutorials/" href= "https://www.instagram.com/LevelUpTutorials/" data-href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="code-line" dir="auto" data-line="61"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://www.instagram.com/wesbos/" href= "https://www.instagram.com/wesbos/" data-href= "https://www.instagram.com/wesbos/">Wes' Instagram</a></li> <li class="code-line" dir="auto" data-line="62"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://twitter.com/wesbos" href= "https://twitter.com/wesbos" data-href= "https://twitter.com/wesbos">Wes' Twitter</a></li> <li class="code-line" dir="auto" data-line="63"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://www.facebook.com/wesbos.developer" href= "https://www.facebook.com/wesbos.developer" data-href= "https://www.facebook.com/wesbos.developer">Wes' Facebook</a></li> <li class="code-line" dir="auto" data-line="64"><a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://twitter.com/stolinski" href= "https://twitter.com/stolinski" data-href= "https://twitter.com/stolinski">Scott's Twitter</a></li> <li class="code-line" dir="auto" data-line="65">Make sure to include <a style= "color: var(--vscode-textlink-foreground); text-decoration: none;" title="https://twitter.com/SyntaxFM" href= "https://twitter.com/SyntaxFM" data-href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li> </li> </ul>

In this episode of Syntax, Wes and Scott talk with Ben Vinegar about his work with Sentry, their migration to TypeScript, and advice for running JavaScript on other websites.
 Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.
 Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community.
 Hashnode: Everything you need to start blogging as a developer!
 Show Notes Ben Vinegar

00:20 Guest introduction

05:58 Seeing bug reports from Sentry

07:38 Distributed tracing for full stack developers

12:16 Amazon X Ray
 AWS Xray

15:32 Using Tracing

19:40 Sponsor: Kontent by Kentico

20:58 Cloudflare Worker Integration

22:30 How does Sentry have open source and a business?
 Heroku
 App Platform
 Media Temple
 Dreamhost
 WordPress Calypso

32:30 Sponsor: Hashnode

34:07 What is the tech stack of Sentry?

38:20 Sentry switching to TypeScript
 Sentry switching to TypeScript

44:36 Running JavaScript on other websites

51:24 Sponsor: Sentry

53:08 Sick Picks
 ××× SIIIIICK ××× PIIIICKS ×××  Scott: Last Seen

 Wes: SEOUL Sisters Korean Kimchi Seasoning

 Ben: Worst Scene / Best Scene

 I Was There Too

 Shameless Plugs Scott: LevelUp Tutorials

 Wes: Wes Bos Tutorials

 Tweet us your tasty treats Scott's Instagram
 LevelUpTutorials Instagram
 Wes' Instagram
 Wes' Twitter
 Wes' Facebook
 Scott's Twitter
 Make sure to include @SyntaxFM in your tweets
  

Aplikace Youradio Talk

Ben Vinegar × Distributed Tracing and TypeScript Migrations

Poslechněte si podcast