CINXE.COM

<!doctype html> <html lang="en"> <head> <meta name="sentry-trace" content="f77009279287d1e6f6222f272965709b-f218ebd596a13f66-1"/> <meta name="baggage" content="sentry-environment=production,sentry-release=syntax%402.1.220,sentry-public_key=ea134756b8f244ff99638864ce038567,sentry-trace_id=f77009279287d1e6f6222f272965709b,sentry-sample_rate=1,sentry-transaction=GET%20%2F(site),sentry-sampled=true"/> <script > const f = window.fetch; if(f){ window._sentryFetchProxy = function(...a){return f(...a)} window.fetch = function(...a){return window._sentryFetchProxy(...a)} } </script> <meta charset="utf-8" /> <link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml" /> <link rel="shortcut icon" href="/favicon.png" type="image/png" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script defer data-domain="syntax.fm" data-api="/api/57475/3v3n7" src="/api/57475/script.js" ></script> <link href="./_app/immutable/assets/3.DYd8WwfR.css" rel="stylesheet"> <link href="./_app/immutable/assets/style.DXQfvQdH.css" rel="stylesheet"> <link href="./_app/immutable/assets/Toaster.CG8-CXDm.css" rel="stylesheet"> <link href="./_app/immutable/assets/HairButton.GFuxqwWZ.css" rel="stylesheet"> <link href="./_app/immutable/assets/Icon.CzttaEur.css" rel="stylesheet"> <link href="./_app/immutable/assets/AlbumArt.B5k4mYSg.css" rel="stylesheet"> <link href="./_app/immutable/assets/Logo.BLIVzkLD.css" rel="stylesheet"> <link href="./_app/immutable/assets/Header.CA9YJeZO.css" rel="stylesheet"> <link href="./_app/immutable/assets/Search.DjfUX5us.css" rel="stylesheet"> <link href="./_app/immutable/assets/SearchBox.s3_4Zb7s.css" rel="stylesheet"> <link href="./_app/immutable/assets/11.4zJ-l7om.css" rel="stylesheet"> <link href="./_app/immutable/assets/PodcastLinks.X5ZMkp0G.css" rel="stylesheet"> <link href="./_app/immutable/assets/ShowCard.Dy2507A7.css" rel="stylesheet"> <link href="./_app/immutable/assets/format_show_type.BeiWblzH.css" rel="stylesheet"><link rel="alternate" type="application/rss+xml" href="https://feed.syntax.fm" title="Syntax RSS Feed"> <meta name="image" property="og:image" content="https://syntax.fm/og/Syntax%20-%20Web%20Development%20Podcast.jpg"> <meta name="theme-color" content="#000000"> <link rel="canonical" href="https://syntax.fm"> <meta property="og:type" content="website"> <meta property="og:title" content="Syntax - Web Development Podcast"> <meta property="og:description" content="Full Stack Web Developers Wes Bos and Scott Tolinski dive deep into web development, CSS, JavaScript, Frameworks, Typescript, Servers and more. Listen in 3 times a week!"> <meta property="og:url" content="https://syntax.fm"> <meta name="description" content="Full Stack Web Developers Wes Bos and Scott Tolinski dive deep into web development, CSS, JavaScript, Frameworks, Typescript, Servers and more. Listen in 3 times a week!"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Syntax - Web Development Podcast"> <meta name="twitter:site" content="@syntaxfm"> <meta name="twitter:description" content="Full Stack Web Developers Wes Bos and Scott Tolinski dive deep into web development, CSS, JavaScript, Frameworks, Typescript, Servers and more. Listen in 3 times a week!"> <meta name="twitter:image" content="https://syntax.fm/og/Syntax%20-%20Web%20Development%20Podcast.jpg"><title>Syntax - Web Development Podcast</title> </head> <body data-sveltekit-preload-data="hover"> <div style="display: contents"> <a href="#main-content" class="skip-to-main-content svelte-dbylqh">Skip to main content</a> <div style="--progress: 0;" class="progress svelte-x5tde9 "><div class="track svelte-x5tde9"></div></div> <div class="theme-system theme-wrapper svelte-dbylqh"> <main style="--bg: var(--bg-sheet); --fg: var(--fg-sheet);" id="main-content" class="page-layout layout zone svelte-dbylqh"><h1 class="visually-hidden">Syntax Podcast</h1> <section style="--bg: var(--black); --fg: var(--fg-1);" aria-label="Podcast Information Section" class="zone full layout svelte-rttstt"><header style="--fg: var(--fg-1);" class="layout full svelte-kbdi8z transparent"><div class="header-container content svelte-kbdi8z"><div class="logo svelte-kbdi8z"></div> <nav class="desktop_nav content svelte-kbdi8z"><a class=" svelte-kbdi8z" href="/shows">Shows</a> <a class=" svelte-kbdi8z" href="/videos">Video</a> <a class=" svelte-kbdi8z" href="/snackpack">Newsletter</a> <a class=" svelte-kbdi8z" href="/about">About</a> <a class=" svelte-kbdi8z" href="/potluck">Potluck Qs</a> <a target="_blank" href="https://sentry.shop" class="svelte-kbdi8z">Swag</a> <button class="button-reset svelte-1jpmwru" aria-label="Search (shortcut: ⌘K)"><svg xmlns="http://www.w3.org/2000/svg" style="width: var(--icon_size, 16px);" viewBox="0 0 16 16" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Search</title><path fill="currentColor" fill-rule="evenodd" d="M11.5 7a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0Zm-.82 4.74a6 6 0 1 1 1.06-1.06l3.04 3.04a.75.75 0 1 1-1.06 1.06l-3.04-3.04Z" clip-rule="evenodd" class="svelte-e3bi7l"></path></svg> <div class="shortcut svelte-1jpmwru"><kbd>⌘K</kbd></div></button> <div class="mobile_nav svelte-ky1iwg"><button class="button-reset svelte-ky1iwg">Menu</button> </div></nav></div></header> <div class="hero svelte-rttstt"><div class="logo svelte-rttstt"><a href="/"><svg height="100%" viewBox="0 0 1371 1212" fill="none" xmlns="http://www.w3.org/2000/svg" class="svelte-1tw8111"><title>Syntax</title><path d="M255.125 590.149C293.973 588.793 328.25 580.303 357.957 564.68C387.663 549.056 410.404 527.329 426.179 499.497C441.953 471.665 449.219 439.944 447.975 404.333C446.675 367.104 436.983 337.055 418.897 314.187C400.812 291.319 379.282 274.244 354.308 262.961C329.334 251.679 298.565 240.733 262 230.125C226.514 219.48 201.053 209.7 185.615 200.785C170.178 191.87 162.167 179.05 161.583 162.324C161.074 147.756 166.619 136.352 178.216 128.114C189.813 119.876 205.593 115.409 225.557 114.711C274.117 113.016 316.128 132.617 351.59 173.516L418.564 95.8166C389.992 66.5623 359.962 45.8673 328.476 33.7315C296.99 21.5958 263.172 16.1591 227.021 17.4215C170.368 19.3999 124.856 34.8997 90.4849 63.9211C56.1142 92.9425 39.7956 132.273 41.529 181.912C42.6784 214.825 51.4441 241.53 67.8261 262.026C84.2081 282.523 103.788 297.91 126.566 308.189C149.344 318.468 177.917 328.41 212.286 338.014C239.566 345.705 260.872 352.524 276.206 358.471C291.54 364.418 303.962 372.087 313.474 381.479C322.986 390.871 328.005 403.12 328.533 418.228C329.211 437.652 322.608 453.549 308.725 465.919C294.841 478.288 275.759 484.897 251.479 485.745C223.961 486.706 197.905 479.242 173.311 463.354C148.716 447.467 126.672 423.386 107.178 391.114L22.1153 461.341C49.0383 505.239 82.5988 538.101 122.797 559.926C162.995 581.752 207.104 591.826 255.125 590.149ZM482.056 719.98C528.998 718.34 566.24 713.528 593.782 705.544C621.324 697.559 643.794 683.539 661.191 663.484C678.588 643.429 693.911 614.262 707.16 575.984L852.655 147.915L725.589 152.352L651.48 443.415L645.815 443.613L552.391 158.4L426.135 162.809L591.584 561.383C584.69 580.531 572.668 595.942 555.518 607.615C538.369 619.289 512.798 625.719 478.806 626.906L482.056 719.98ZM1015.6 557.11L1007.04 311.881C1006.19 287.601 1013.33 267.769 1028.46 252.385C1043.59 237 1063.56 228.875 1088.38 228.008C1110.51 227.236 1127.98 232.703 1140.82 244.409C1153.65 256.116 1160.49 274.109 1161.34 298.39L1170.19 551.712L1288.35 547.586L1278.77 273.22C1277.22 228.977 1262.89 193.688 1235.77 167.354C1208.65 141.02 1173.51 128.607 1130.34 130.114C1101.75 131.113 1076.85 137.52 1055.66 149.334C1034.46 161.149 1017.7 176.185 1005.37 194.443L1001.32 194.584L999.514 142.786L882.16 146.884L896.631 561.265L1015.6 557.11ZM302.156 1194.4L298.934 1102.13L249.564 1103.86C236.615 1104.31 227.194 1101.4 221.303 1095.12C215.412 1088.84 212.202 1078.15 211.674 1063.04L204.581 859.9L290.37 856.904L287.685 780.017L201.896 783.013L196.865 638.951L78.7017 643.077L83.7324 787.139L26.2695 789.146L28.9545 866.033L86.4174 864.026L94.5288 1096.31C95.697 1129.76 105.099 1155.36 122.736 1173.11C140.373 1190.86 164.838 1199.19 196.133 1198.1L302.156 1194.4ZM473.605 1197.32C495.727 1196.55 518.763 1191.02 542.714 1180.73C566.664 1170.44 587.501 1156.07 605.224 1137.63L606.835 1183.76L711.24 1180.11L701.376 897.653C699.737 850.712 681.516 816.234 646.714 794.22C611.911 772.206 566.993 762.16 511.958 764.082C469.872 765.552 434.646 773.94 406.279 789.246C377.912 804.552 354.218 826.043 335.196 853.718L409.986 907.019C423.914 888.165 438.964 874.404 455.138 865.736C471.312 857.068 491.539 852.31 515.819 851.462C543.337 850.501 563.456 854.255 576.177 862.725C588.897 871.194 595.886 885.671 597.141 906.155C585.384 909.807 576.556 912.276 570.659 913.563C523.611 927.631 489.409 938.279 468.053 945.507C446.697 952.735 426.997 960.986 408.954 970.26C358.06 997.967 333.49 1036.91 335.242 1087.09C336.486 1122.7 349.606 1150.33 374.602 1169.99C399.598 1189.64 432.599 1198.76 473.605 1197.32ZM502.898 1107.98C490.488 1108.41 480.119 1105.39 471.79 1098.93C463.461 1092.47 459.08 1083.04 458.647 1070.63C457.969 1051.2 469.572 1035.4 493.456 1023.22C504.059 1017.45 519.369 1011.11 539.385 1004.2C559.402 997.284 579.558 990.503 599.854 983.852L602.398 1056.69C589.455 1072.81 574.358 1085.22 557.105 1093.93C539.852 1102.63 521.783 1107.32 502.898 1107.98ZM882.378 1174.14L960.267 1037.71L1047.48 1168.37L1191.55 1163.34L1039.38 959.589L1177.07 748.959L1033.01 753.99L955.011 887.176L867.908 759.755L723.846 764.786L874.277 965.355L738.316 1179.17L882.378 1174.14Z" fill="var(--logo-color, var(--primary, #fabf46))"></path><path d="M1366.31 1031.2L1370.78 1159.08L1227.52 1164.08L1223.06 1036.21L1366.31 1031.2Z" fill="var(--logo-color, var(--primary, #fabf46))"></path></svg></a></div> <h2 class="text-center svelte-rttstt"><span class="tasty svelte-rttstt">Tasty Treats</span> for Web Developers</h2> <p class="hosted-by svelte-rttstt"><span class="svelte-rttstt">With<wbr></span> <span class="svelte-rttstt"><img width="50" height="50" src="https://github.com/wesbos.png" alt="A rather handsome Wes Bos" class="svelte-rttstt"><a href="/about">Wes Bos</a></span> <span class="amp svelte-rttstt">×</span> <span class="svelte-rttstt"><img width="50" height="50" src="https://github.com/stolinski.png" alt="Scott lookin absolutely fresh" class="svelte-rttstt"> <a href="/about">Scott Tolinski</a></span> <span class="amp svelte-rttstt">×</span> <span class="svelte-rttstt"><img width="50" height="50" src="https://github.com/w3cj.png" alt="A very dapper CJ" class="svelte-rttstt"> <a href="/about">CJ Reynolds</a></span></p> <p class="brought-by svelte-rttstt">Brought to you by <a href="https://sentry.io/welcome/?utm_medium=site&utm_source=syntax&utm_campaign=syntax-sentry-evergreen&utm_content=homepage" target="_blank" title="Sentry" class="naked svelte-rttstt" aria-label="sentry"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 44" class="svelte-rttstt"><path d="M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z M124.32,28.28,109.56,9.22h-3.68V34.77h3.73V15.19l15.18,19.58h3.26V9.22h-3.73ZM87.15,23.54h13.23V20.22H87.14V12.53h14.93V9.21H83.34V34.77h18.92V31.45H87.14ZM71.59,20.3h0C66.44,19.06,65,18.08,65,15.7c0-2.14,1.89-3.59,4.71-3.59a12.06,12.06,0,0,1,7.07,2.55l2-2.83a14.1,14.1,0,0,0-9-3c-5.06,0-8.59,3-8.59,7.27,0,4.6,3,6.19,8.46,7.52C74.51,24.74,76,25.78,76,28.11s-2,3.77-5.09,3.77a12.34,12.34,0,0,1-8.3-3.26l-2.25,2.69a15.94,15.94,0,0,0,10.42,3.85c5.48,0,9-2.95,9-7.51C79.75,23.79,77.47,21.72,71.59,20.3ZM195.7,9.22l-7.69,12-7.64-12h-4.46L186,24.67V34.78h3.84V24.55L200,9.22Zm-64.63,3.46h8.37v22.1h3.84V12.68h8.37V9.22H131.08ZM169.41,24.8c3.86-1.07,6-3.77,6-7.63,0-4.91-3.59-8-9.38-8H154.67V34.76h3.8V25.58h6.45l6.48,9.2h4.44l-7-9.82Zm-10.95-2.5V12.6h7.17c3.74,0,5.88,1.77,5.88,4.84s-2.29,4.86-5.84,4.86Z" fill="#ffffff"></path></svg></a></p> <div class="svelte-13gboj2"><a href="https://feed.syntax.fm" target="_blank" class="button subscribe subscribe--rss svelte-13gboj2">RSS</a><a href="https://open.spotify.com/show/4kYCRYJ3yK5DQbP5tbfZby?si=bOe7-kl6RnOHapMsVnFWgw" target="_blank" class="button subscribe subscribe--spotify svelte-13gboj2">Spotify</a><a href="https://itunes.apple.com/ca/podcast/syntax-tasty-web-development-treats/id1253186678?mt=2" target="_blank" class="button subscribe subscribe--apple-podcasts svelte-13gboj2">Apple Podcasts</a><a href="https://www.youtube.com/@syntaxfm" target="_blank" class="button subscribe subscribe--youtube svelte-13gboj2">YouTube</a><a href="https://overcast.fm/itunes1253186678/syntax-tasty-web-development-treats" target="_blank" class="button subscribe subscribe--overcast svelte-13gboj2">Overcast</a><a href="https://pca.st/fmx9" target="_blank" class="button subscribe subscribe--pocketcasts svelte-13gboj2">PocketCasts</a><a href="https://music.amazon.com/podcasts/3f16a46b-6281-4fc7-99de-380fbeb6d970/syntax---tasty-web-development-treats" target="_blank" class="button subscribe subscribe--amazon-music svelte-13gboj2">Amazon Music</a></div> <section class="svelte-naikeq"><p class="lines thrice svelte-naikeq">Served Fresh Thrice Weekly</p> <div><p class="tag length svelte-naikeq">15m</p> <p class="tag day svelte-naikeq">Monday</p> <div><p class="tag svelte-naikeq">HASTY TREAT</p></div> <p class="desc svelte-naikeq">Quick n' Informative</p></div> <div><p class="tag length svelte-naikeq">60m</p> <p class="tag day svelte-naikeq">Wednesday</p> <div><p class="tag svelte-naikeq">TASTY TREAT</p></div> <p class="desc svelte-naikeq">Deep Dives</p></div> <div><p class="tag length svelte-naikeq">60m</p> <p class="tag day svelte-naikeq">Friday</p> <div><p class="tag svelte-naikeq">SUPPER CLUB</p></div> <p class="desc svelte-naikeq">Industry Experts</p></div></section></div></section> <section aria-label="Latest podcast episodes full layout" class="svelte-dqy5ie"><h3 class="lines">Latest Episodes</h3> <div style="margin-bottom: 2rem;" class="grid"> <article class="card svelte-1p7tuxr"><a href="/show/876/midi-and-music-in-the-browser" aria-label="Show #876 posted 4 days ago, MIDI & Music in the Browser" aria-describedby="show876-description" class="svelte-1p7tuxr"> <span style="--transition-name: show-date-876;" class="show-number fst-900 grit svelte-1p7tuxr">876</span> <div class="details svelte-1p7tuxr"><p style="--transition-name: show-date-876;" class="date svelte-1p7tuxr">Tasty <span aria-hidden="true">×</span> <time datetime="2025-02-12T12:00:00.000Z" title="Wed Feb 12 2025">4 days ago</time></p> <h4 style="--transition-name: show-title-876;" data-testid="show-card-title" class="h3 show-title svelte-1p7tuxr"><span class="spa-ran-wrap">MIDI & Music in the Browser</span></h4> <p id="show876-description" class="description text-sm svelte-1p7tuxr"><span class="svelte-1p7tuxr">Discussion of capabilities provided by Web MIDI and Web Audio APIs for generating sound and music in the browser</span></p> <div class="badges svelte-47bkpf"><span class="badge text-sm svelte-15mvsj3">#web-audio</span><span class="badge text-sm svelte-15mvsj3">#web-midi</span><span class="badge text-sm svelte-15mvsj3">#music</span></div> <div class="bottom-row svelte-1p7tuxr"><div style="--face-size: 50px; --face-count: 2;" class="pile svelte-9tnkd1"><img src="https://github.com/wesbos.png" alt="Wes Bos" class="svelte-9tnkd1"><img src="https://github.com/stolinski.png" alt="Scott Tolinski" class="svelte-9tnkd1"></div> <div class="buttons svelte-1p7tuxr"><button data-testid="play-show"><svg style="width: var(--icon_size, 16px);" viewBox="0 0 8 10" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Play</title><path d="M7.629 4.306C7.74306 4.38231 7.83655 4.48555 7.90121 4.6066C7.96586 4.72765 7.99968 4.86276 7.99968 5C7.99968 5.13723 7.96586 5.27235 7.90121 5.39339C7.83655 5.51444 7.74306 5.61769 7.629 5.694L1.228 9.871C0.695 10.218 0 9.825 0 9.176V0.823997C0 0.174997 0.695 -0.218003 1.228 0.128997L7.629 4.306Z" fill="currentColor" class="svelte-e3bi7l"></path></svg> Play #876</button></div></div></div></a></article><article class="card svelte-1p7tuxr"><a href="/show/875/javascript-signals-explained" aria-label="Show #875 posted 6 days ago, JavaScript Signals Explained" aria-describedby="show875-description" class="svelte-1p7tuxr"> <span style="--transition-name: show-date-875;" class="show-number fst-900 grit svelte-1p7tuxr">875</span> <div class="details svelte-1p7tuxr"><p style="--transition-name: show-date-875;" class="date svelte-1p7tuxr">Hasty <span aria-hidden="true">×</span> <time datetime="2025-02-10T11:00:00.000Z" title="Mon Feb 10 2025">6 days ago</time></p> <h4 style="--transition-name: show-title-875;" data-testid="show-card-title" class="h3 show-title svelte-1p7tuxr"><span class="spa-ran-wrap">JavaScript Signals Explained</span></h4> <p id="show875-description" class="description text-sm svelte-1p7tuxr"><span class="svelte-1p7tuxr">Explainer on the concept of signals, which are reactive variables that can automatically cause side effects when they update. Signals are missing from base JS but are being proposed. All frameworks have some implementation of signals built in.</span></p> <div class="badges svelte-47bkpf"><span class="badge text-sm svelte-15mvsj3">#javascript</span><span class="badge text-sm svelte-15mvsj3">#reactivity</span><span class="badge text-sm svelte-15mvsj3">#frameworks</span></div> <div class="bottom-row svelte-1p7tuxr"><div style="--face-size: 50px; --face-count: 2;" class="pile svelte-9tnkd1"><img src="https://github.com/wesbos.png" alt="Wes Bos" class="svelte-9tnkd1"><img src="https://github.com/stolinski.png" alt="Scott Tolinski" class="svelte-9tnkd1"></div> <div class="buttons svelte-1p7tuxr"><button data-testid="play-show"><svg style="width: var(--icon_size, 16px);" viewBox="0 0 8 10" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Play</title><path d="M7.629 4.306C7.74306 4.38231 7.83655 4.48555 7.90121 4.6066C7.96586 4.72765 7.99968 4.86276 7.99968 5C7.99968 5.13723 7.96586 5.27235 7.90121 5.39339C7.83655 5.51444 7.74306 5.61769 7.629 5.694L1.228 9.871C0.695 10.218 0 9.825 0 9.176V0.823997C0 0.174997 0.695 -0.218003 1.228 0.128997L7.629 4.306Z" fill="currentColor" class="svelte-e3bi7l"></path></svg> Play #875</button></div></div></div></a></article><article class="card svelte-1p7tuxr"><a href="/show/874/fast-apps-easy-perf-wins" aria-label="Show #874 posted 11 days ago, Fast Apps - Easy Perf Wins" aria-describedby="show874-description" class="svelte-1p7tuxr"> <span style="--transition-name: show-date-874;" class="show-number fst-900 grit svelte-1p7tuxr">874</span> <div class="details svelte-1p7tuxr"><p style="--transition-name: show-date-874;" class="date svelte-1p7tuxr">Tasty <span aria-hidden="true">×</span> <time datetime="2025-02-05T11:00:00.000Z" title="Wed Feb 05 2025">11 days ago</time></p> <h4 style="--transition-name: show-title-874;" data-testid="show-card-title" class="h3 show-title svelte-1p7tuxr"><span class="spa-ran-wrap">Fast Apps - Easy Perf Wins</span></h4> <p id="show874-description" class="description text-sm svelte-1p7tuxr"><span class="svelte-1p7tuxr">Tips and strategies for improving web performance through caching, optimization, understanding metrics, and more.</span></p> <div class="badges svelte-47bkpf"><span class="badge text-sm svelte-15mvsj3">#optimization</span><span class="badge text-sm svelte-15mvsj3">#caching</span></div> <div class="bottom-row svelte-1p7tuxr"><div style="--face-size: 50px; --face-count: 2;" class="pile svelte-9tnkd1"><img src="https://github.com/wesbos.png" alt="Wes Bos" class="svelte-9tnkd1"><img src="https://github.com/stolinski.png" alt="Scott Tolinski" class="svelte-9tnkd1"></div> <div class="buttons svelte-1p7tuxr"><button data-testid="play-show"><svg style="width: var(--icon_size, 16px);" viewBox="0 0 8 10" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Play</title><path d="M7.629 4.306C7.74306 4.38231 7.83655 4.48555 7.90121 4.6066C7.96586 4.72765 7.99968 4.86276 7.99968 5C7.99968 5.13723 7.96586 5.27235 7.90121 5.39339C7.83655 5.51444 7.74306 5.61769 7.629 5.694L1.228 9.871C0.695 10.218 0 9.825 0 9.176V0.823997C0 0.174997 0.695 -0.218003 1.228 0.128997L7.629 4.306Z" fill="currentColor" class="svelte-e3bi7l"></path></svg> Play #874</button></div></div></div></a></article><article class="card svelte-1p7tuxr"><a href="/show/873/standard-schema-the-universal-javascript-data-interface" aria-label="Show #873 posted last week, Standard Schema: The Universal JavaScript Data Interface" aria-describedby="show873-description" class="svelte-1p7tuxr"> <span style="--transition-name: show-date-873;" class="show-number fst-900 grit svelte-1p7tuxr">873</span> <div class="details svelte-1p7tuxr"><p style="--transition-name: show-date-873;" class="date svelte-1p7tuxr">Hasty <span aria-hidden="true">×</span> <time datetime="2025-02-03T12:00:00.000Z" title="Mon Feb 03 2025">last week</time></p> <h4 style="--transition-name: show-title-873;" data-testid="show-card-title" class="h3 show-title svelte-1p7tuxr"><span class="spa-ran-wrap">Standard Schema: The Universal JavaScript Data Interface</span></h4> <p id="show873-description" class="description text-sm svelte-1p7tuxr"><span class="svelte-1p7tuxr">Discussion of the new standard schema effort to standardize data validation across JavaScript validation libraries like Zod, ValleyBot and Arctype.</span></p> <div class="badges svelte-47bkpf"><span class="badge text-sm svelte-15mvsj3">#javascript</span><span class="badge text-sm svelte-15mvsj3">#data</span><span class="badge text-sm svelte-15mvsj3">#validation</span></div> <div class="bottom-row svelte-1p7tuxr"><div style="--face-size: 50px; --face-count: 2;" class="pile svelte-9tnkd1"><img src="https://github.com/wesbos.png" alt="Wes Bos" class="svelte-9tnkd1"><img src="https://github.com/stolinski.png" alt="Scott Tolinski" class="svelte-9tnkd1"></div> <div class="buttons svelte-1p7tuxr"><button data-testid="play-show"><svg style="width: var(--icon_size, 16px);" viewBox="0 0 8 10" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Play</title><path d="M7.629 4.306C7.74306 4.38231 7.83655 4.48555 7.90121 4.6066C7.96586 4.72765 7.99968 4.86276 7.99968 5C7.99968 5.13723 7.96586 5.27235 7.90121 5.39339C7.83655 5.51444 7.74306 5.61769 7.629 5.694L1.228 9.871C0.695 10.218 0 9.825 0 9.176V0.823997C0 0.174997 0.695 -0.218003 1.228 0.128997L7.629 4.306Z" fill="currentColor" class="svelte-e3bi7l"></path></svg> Play #873</button></div></div></div></a></article><article class="card svelte-1p7tuxr"><a href="/show/872/too-much-ai-disappointed-in-firefox-planning-new-projects-hard-truths" aria-label="Show #872 posted 2 weeks ago, Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths" aria-describedby="show872-description" class="svelte-1p7tuxr"> <span style="--transition-name: show-date-872;" class="show-number fst-900 grit svelte-1p7tuxr">872</span> <div class="details svelte-1p7tuxr"><p style="--transition-name: show-date-872;" class="date svelte-1p7tuxr">Tasty <span aria-hidden="true">×</span> <time datetime="2025-01-29T12:00:00.000Z" title="Wed Jan 29 2025">2 weeks ago</time></p> <h4 style="--transition-name: show-title-872;" data-testid="show-card-title" class="h3 show-title svelte-1p7tuxr"><span class="spa-ran-wrap">Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths</span></h4> <p id="show872-description" class="description text-sm svelte-1p7tuxr"><span class="svelte-1p7tuxr">In this potluck episode, Scott and Wes answer developer questions on topics like finding truthful web development advice online, checking for null values in TypeScript, HTML tags for ecommerce, browser recommendations, lock files, sync engines, AI hype fatigue, lack of 3D web adoption, a bad app investment story, and more.</span></p> <div class="badges svelte-47bkpf"><span class="badge text-sm svelte-15mvsj3">#frontend</span><span class="badge text-sm svelte-15mvsj3">#javascript</span><span class="badge text-sm svelte-15mvsj3">#typescript</span></div> <div class="bottom-row svelte-1p7tuxr"><div style="--face-size: 50px; --face-count: 2;" class="pile svelte-9tnkd1"><img src="https://github.com/wesbos.png" alt="Wes Bos" class="svelte-9tnkd1"><img src="https://github.com/stolinski.png" alt="Scott Tolinski" class="svelte-9tnkd1"></div> <div class="buttons svelte-1p7tuxr"><button data-testid="play-show"><svg style="width: var(--icon_size, 16px);" viewBox="0 0 8 10" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Play</title><path d="M7.629 4.306C7.74306 4.38231 7.83655 4.48555 7.90121 4.6066C7.96586 4.72765 7.99968 4.86276 7.99968 5C7.99968 5.13723 7.96586 5.27235 7.90121 5.39339C7.83655 5.51444 7.74306 5.61769 7.629 5.694L1.228 9.871C0.695 10.218 0 9.825 0 9.176V0.823997C0 0.174997 0.695 -0.218003 1.228 0.128997L7.629 4.306Z" fill="currentColor" class="svelte-e3bi7l"></path></svg> Play #872</button></div></div></div></a></article><article class="card svelte-1p7tuxr"><a href="/show/871/coding-agents-cursor-windsurf-tips" aria-label="Show #871 posted 2 weeks ago, Coding Agents Cursor + Windsurf Tips" aria-describedby="show871-description" class="svelte-1p7tuxr"> <span style="--transition-name: show-date-871;" class="show-number fst-900 grit svelte-1p7tuxr">871</span> <div class="details svelte-1p7tuxr"><p style="--transition-name: show-date-871;" class="date svelte-1p7tuxr">Hasty <span aria-hidden="true">×</span> <time datetime="2025-01-27T11:00:00.000Z" title="Mon Jan 27 2025">2 weeks ago</time></p> <h4 style="--transition-name: show-title-871;" data-testid="show-card-title" class="h3 show-title svelte-1p7tuxr"><span class="spa-ran-wrap">Coding Agents Cursor + Windsurf Tips</span></h4> <p id="show871-description" class="description text-sm svelte-1p7tuxr"><span class="svelte-1p7tuxr">Discussion of using AI agents like Cursor for web development, focusing on the new agent mode for automating tasks.</span></p> <div class="badges svelte-47bkpf"><span class="badge text-sm svelte-15mvsj3">#AI</span><span class="badge text-sm svelte-15mvsj3">#Automation</span><span class="badge text-sm svelte-15mvsj3">#Productivity</span></div> <div class="bottom-row svelte-1p7tuxr"><div style="--face-size: 50px; --face-count: 2;" class="pile svelte-9tnkd1"><img src="https://github.com/wesbos.png" alt="Wes Bos" class="svelte-9tnkd1"><img src="https://github.com/stolinski.png" alt="Scott Tolinski" class="svelte-9tnkd1"></div> <div class="buttons svelte-1p7tuxr"><button data-testid="play-show"><svg style="width: var(--icon_size, 16px);" viewBox="0 0 8 10" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Play</title><path d="M7.629 4.306C7.74306 4.38231 7.83655 4.48555 7.90121 4.6066C7.96586 4.72765 7.99968 4.86276 7.99968 5C7.99968 5.13723 7.96586 5.27235 7.90121 5.39339C7.83655 5.51444 7.74306 5.61769 7.629 5.694L1.228 9.871C0.695 10.218 0 9.825 0 9.176V0.823997C0 0.174997 0.695 -0.218003 1.228 0.128997L7.629 4.306Z" fill="currentColor" class="svelte-e3bi7l"></path></svg> Play #871</button></div></div></div></a></article><article class="card svelte-1p7tuxr"><a href="/show/870/windsurf-forked-vs-code-to-compete-with-cursor-talking-the-future-of-ai-coding" aria-label="Show #870 posted 3 weeks ago, Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding" aria-describedby="show870-description" class="svelte-1p7tuxr"> <span style="--transition-name: show-date-870;" class="show-number fst-900 grit svelte-1p7tuxr">870</span> <div class="details svelte-1p7tuxr"><p style="--transition-name: show-date-870;" class="date svelte-1p7tuxr">Tasty <span aria-hidden="true">×</span> <time datetime="2025-01-22T12:00:00.000Z" title="Wed Jan 22 2025">3 weeks ago</time></p> <h4 style="--transition-name: show-title-870;" data-testid="show-card-title" class="h3 show-title svelte-1p7tuxr"><span class="spa-ran-wrap">Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding</span></h4> <p id="show870-description" class="description text-sm svelte-1p7tuxr"><span class="svelte-1p7tuxr">Discussion with Wind Surf CEO and VP of Product about the company's history, coding AI tools like Wind Surf, and the future of software development</span></p> <div class="badges svelte-47bkpf"><span class="badge text-sm svelte-15mvsj3">#ai</span><span class="badge text-sm svelte-15mvsj3">#coding</span><span class="badge text-sm svelte-15mvsj3">#tools</span></div> <div class="bottom-row svelte-1p7tuxr"><div style="--face-size: 50px; --face-count: 4;" class="pile svelte-9tnkd1"><img src="https://github.com/wesbos.png" alt="Wes Bos" class="svelte-9tnkd1"><img src="https://github.com/stolinski.png" alt="Scott Tolinski" class="svelte-9tnkd1"><img src="https://github.com/khou22.png" alt="Kevin Hou" class="svelte-9tnkd1"><img src="https://github.com/null.png" alt="Varun Mohan" class="svelte-9tnkd1"></div> <div class="buttons svelte-1p7tuxr"><button data-testid="play-show"><svg style="width: var(--icon_size, 16px);" viewBox="0 0 8 10" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Play</title><path d="M7.629 4.306C7.74306 4.38231 7.83655 4.48555 7.90121 4.6066C7.96586 4.72765 7.99968 4.86276 7.99968 5C7.99968 5.13723 7.96586 5.27235 7.90121 5.39339C7.83655 5.51444 7.74306 5.61769 7.629 5.694L1.228 9.871C0.695 10.218 0 9.825 0 9.176V0.823997C0 0.174997 0.695 -0.218003 1.228 0.128997L7.629 4.306Z" fill="currentColor" class="svelte-e3bi7l"></path></svg> Play #870</button></div></div></div></a></article><article class="card svelte-1p7tuxr"><a href="/show/869/node-typescript-in-2025" aria-label="Show #869 posted January 17th, 2025, Node + TypeScript in 2025" aria-describedby="show869-description" class="svelte-1p7tuxr"> <span style="--transition-name: show-date-869;" class="show-number fst-900 grit svelte-1p7tuxr">869</span> <div class="details svelte-1p7tuxr"><p style="--transition-name: show-date-869;" class="date svelte-1p7tuxr">Supper Club <span aria-hidden="true">×</span> <time datetime="2025-01-17T11:00:00.000Z" title="Fri Jan 17 2025">January 17th, 2025</time></p> <h4 style="--transition-name: show-title-869;" data-testid="show-card-title" class="h3 show-title svelte-1p7tuxr"><span class="spa-ran-wrap">Node + TypeScript in 2025</span></h4> <p id="show869-description" class="description text-sm svelte-1p7tuxr"><span class="svelte-1p7tuxr">Discussion on running TypeScript code in Node.js without needing compilation, now that Node supports type stripping. Covers limitations, tools like TSX and Deno, and the much smoother developer experience working with TypeScript.</span></p> <div class="badges svelte-47bkpf"><span class="badge text-sm svelte-15mvsj3">#nodejs</span><span class="badge text-sm svelte-15mvsj3">#typescript</span><span class="badge text-sm svelte-15mvsj3">#deno</span></div> <div class="bottom-row svelte-1p7tuxr"><div style="--face-size: 50px; --face-count: 2;" class="pile svelte-9tnkd1"><img src="https://github.com/wesbos.png" alt="Wes Bos" class="svelte-9tnkd1"><img src="https://github.com/stolinski.png" alt="Scott Tolinski" class="svelte-9tnkd1"></div> <div class="buttons svelte-1p7tuxr"><button data-testid="play-show"><svg style="width: var(--icon_size, 16px);" viewBox="0 0 8 10" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Play</title><path d="M7.629 4.306C7.74306 4.38231 7.83655 4.48555 7.90121 4.6066C7.96586 4.72765 7.99968 4.86276 7.99968 5C7.99968 5.13723 7.96586 5.27235 7.90121 5.39339C7.83655 5.51444 7.74306 5.61769 7.629 5.694L1.228 9.871C0.695 10.218 0 9.825 0 9.176V0.823997C0 0.174997 0.695 -0.218003 1.228 0.128997L7.629 4.306Z" fill="currentColor" class="svelte-e3bi7l"></path></svg> Play #869</button></div></div></div></a></article><article class="card svelte-1p7tuxr"><a href="/show/868/the-state-of-javascript" aria-label="Show #868 posted January 15th, 2025, The State of JavaScript" aria-describedby="show868-description" class="svelte-1p7tuxr"> <span style="--transition-name: show-date-868;" class="show-number fst-900 grit svelte-1p7tuxr">868</span> <div class="details svelte-1p7tuxr"><p style="--transition-name: show-date-868;" class="date svelte-1p7tuxr">Tasty <span aria-hidden="true">×</span> <time datetime="2025-01-15T12:00:00.000Z" title="Wed Jan 15 2025">January 15th, 2025</time></p> <h4 style="--transition-name: show-title-868;" data-testid="show-card-title" class="h3 show-title svelte-1p7tuxr"><span class="spa-ran-wrap">The State of JavaScript</span></h4> <p id="show868-description" class="description text-sm svelte-1p7tuxr"><span class="svelte-1p7tuxr">Wes and Scott discuss the State of JS survey results, including popularity of frameworks, tools and features.</span></p> <div class="badges svelte-47bkpf"><span class="badge text-sm svelte-15mvsj3">#JavaScript</span><span class="badge text-sm svelte-15mvsj3">#Tools</span></div> <div class="bottom-row svelte-1p7tuxr"><div style="--face-size: 50px; --face-count: 2;" class="pile svelte-9tnkd1"><img src="https://github.com/wesbos.png" alt="Wes Bos" class="svelte-9tnkd1"><img src="https://github.com/stolinski.png" alt="Scott Tolinski" class="svelte-9tnkd1"></div> <div class="buttons svelte-1p7tuxr"><button data-testid="play-show"><svg style="width: var(--icon_size, 16px);" viewBox="0 0 8 10" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Play</title><path d="M7.629 4.306C7.74306 4.38231 7.83655 4.48555 7.90121 4.6066C7.96586 4.72765 7.99968 4.86276 7.99968 5C7.99968 5.13723 7.96586 5.27235 7.90121 5.39339C7.83655 5.51444 7.74306 5.61769 7.629 5.694L1.228 9.871C0.695 10.218 0 9.825 0 9.176V0.823997C0 0.174997 0.695 -0.218003 1.228 0.128997L7.629 4.306Z" fill="currentColor" class="svelte-e3bi7l"></path></svg> Play #868</button></div></div></div></a></article><article class="card svelte-1p7tuxr"><a href="/show/867/zero-sync-is-the-future-of-data-loading" aria-label="Show #867 posted January 13th, 2025, Zero Sync is the Future of Data Loading" aria-describedby="show867-description" class="svelte-1p7tuxr"> <span style="--transition-name: show-date-867;" class="show-number fst-900 grit svelte-1p7tuxr">867</span> <div class="details svelte-1p7tuxr"><p style="--transition-name: show-date-867;" class="date svelte-1p7tuxr">Hasty <span aria-hidden="true">×</span> <time datetime="2025-01-13T11:00:00.000Z" title="Mon Jan 13 2025">January 13th, 2025</time></p> <h4 style="--transition-name: show-title-867;" data-testid="show-card-title" class="h3 show-title svelte-1p7tuxr"><span class="spa-ran-wrap">Zero Sync is the Future of Data Loading</span></h4> <p id="show867-description" class="description text-sm svelte-1p7tuxr"><span class="svelte-1p7tuxr">Deno Sync enables building fast, real-time web apps with local data syncing and the ability to bring your own Postgres database.</span></p> <div class="badges svelte-47bkpf"><span class="badge text-sm svelte-15mvsj3">#deno</span><span class="badge text-sm svelte-15mvsj3">#webdev</span><span class="badge text-sm svelte-15mvsj3">#database</span></div> <div class="bottom-row svelte-1p7tuxr"><div style="--face-size: 50px; --face-count: 2;" class="pile svelte-9tnkd1"><img src="https://github.com/wesbos.png" alt="Wes Bos" class="svelte-9tnkd1"><img src="https://github.com/stolinski.png" alt="Scott Tolinski" class="svelte-9tnkd1"></div> <div class="buttons svelte-1p7tuxr"><button data-testid="play-show"><svg style="width: var(--icon_size, 16px);" viewBox="0 0 8 10" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Play</title><path d="M7.629 4.306C7.74306 4.38231 7.83655 4.48555 7.90121 4.6066C7.96586 4.72765 7.99968 4.86276 7.99968 5C7.99968 5.13723 7.96586 5.27235 7.90121 5.39339C7.83655 5.51444 7.74306 5.61769 7.629 5.694L1.228 9.871C0.695 10.218 0 9.825 0 9.176V0.823997C0 0.174997 0.695 -0.218003 1.228 0.128997L7.629 4.306Z" fill="currentColor" class="svelte-e3bi7l"></path></svg> Play #867</button></div></div></div></a></article> <div class="grid-center" style="grid-column: 1 / -1;"><a href="/shows" class="button">See all shows</a></div></div></section></main> <footer style="--bg: var(--bg-root); --fg: var(--fg-1);" class="layout zone svelte-1xfr8nt"><div><div class="grid"><div class="links-col svelte-1xfr8nt"><a href="/shows" class="svelte-1xfr8nt">Podcast</a> <a target="_blank" rel="noopener" href="https://feed.syntax.fm" class="svelte-1xfr8nt">RSS Feed</a> <a href="/about" class="svelte-1xfr8nt">About</a> <a href="/sickpicks" class="svelte-1xfr8nt">Sick Picks</a> <a href="/guests" class="svelte-1xfr8nt">Guest List</a> <a target="_blank" rel="noopener" href="https://sentry.io/welcome/?utm_medium=site&utm_source=syntax&utm_campaign=syntax-sentry-evergreen&utm_content=footer" class="svelte-1xfr8nt">Sentry.io</a></div> <div class="links-col svelte-1xfr8nt"><a target="_blank" rel="noopener" href="https://github.com/syntaxfm/website" class="svelte-1xfr8nt">Source Code</a> <a href="/system/colors" class="svelte-1xfr8nt">Colors</a> <a href="/system/layout" class="svelte-1xfr8nt">Layout</a> <a href="/system/typography" class="svelte-1xfr8nt">Typography</a> <a href="/system/theme" class="svelte-1xfr8nt">Theme</a> <a href="/pages/privacy" class="svelte-1xfr8nt">Privacy Policy</a> <a href="/pages/terms-of-service" class="svelte-1xfr8nt">Terms of Service</a></div> <div class="links-col social-links svelte-1xfr8nt"><a target="_blank" rel="noopener" href="https://x.com/syntaxfm" class="svelte-1xfr8nt"><svg fill="currentColor" style="width: var(--icon_size, 16px);" viewBox="0 0 24 24" class="svelte-e3bi7l"><title class="svelte-e3bi7l">X</title><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" class="svelte-e3bi7l"></path></svg></a> <a target="_blank" rel="noopener" href="https://github.com/syntaxfm" class="svelte-1xfr8nt"><svg xmlns="http://www.w3.org/2000/svg" style="width: var(--icon_size, 16px);" viewBox="0 0 16 16" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Github</title><path fill="currentColor" fill-rule="evenodd" d="M7.976 0A7.977 7.977 0 0 0 0 7.976c0 3.522 2.3 6.507 5.431 7.584c.392.049.538-.196.538-.392v-1.37c-2.201.49-2.69-1.076-2.69-1.076c-.343-.93-.881-1.175-.881-1.175c-.734-.489.048-.489.048-.489c.783.049 1.224.832 1.224.832c.734 1.223 1.859.88 2.3.685c.048-.538.293-.88.489-1.076c-1.762-.196-3.621-.881-3.621-3.964c0-.88.293-1.566.832-2.153c-.05-.147-.343-.978.098-2.055c0 0 .685-.196 2.201.832c.636-.196 1.322-.245 2.007-.245s1.37.098 2.006.245c1.517-1.027 2.202-.832 2.202-.832c.44 1.077.146 1.908.097 2.104a3.16 3.16 0 0 1 .832 2.153c0 3.083-1.86 3.719-3.62 3.915c.293.244.538.733.538 1.467v2.202c0 .196.146.44.538.392A7.984 7.984 0 0 0 16 7.976C15.951 3.572 12.38 0 7.976 0Z" clip-rule="evenodd" class="svelte-e3bi7l"></path></svg></a> <a target="_blank" rel="noopener" href="https://discord.gg/W5y68HMfZV" class="svelte-1xfr8nt"><svg fill="currentColor" viewBox="0 0 71 55" style="width: var(--icon_size, 16px);" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Discord</title><path fill-rule="evenodd" d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" clip-rule="evenodd" class="svelte-e3bi7l"></path></svg></a> <a target="_blank" rel="noopener" href="https://www.youtube.com/@syntaxfm" class="svelte-1xfr8nt"><svg height="24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 461.001 461.001" xml:space="preserve" fill="currentColor" class="svelte-e3bi7l"><g class="svelte-e3bi7l"><path d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728 c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137 C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z" class="svelte-e3bi7l"></path></g></svg></a> <a target="_blank" rel="noopener" href="https://www.tiktok.com/@syntaxfm" class="svelte-1xfr8nt"><svg fill="currentColor" viewBox="0 0 32 32" style="width: var(--icon_size, 16px);" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svelte-e3bi7l"><title class="svelte-e3bi7l">Tiktok</title><path d="M16.656 1.029c1.637-0.025 3.262-0.012 4.886-0.025 0.054 2.031 0.878 3.859 2.189 5.213l-0.002-0.002c1.411 1.271 3.247 2.095 5.271 2.235l0.028 0.002v5.036c-1.912-0.048-3.71-0.489-5.331-1.247l0.082 0.034c-0.784-0.377-1.447-0.764-2.077-1.196l0.052 0.034c-0.012 3.649 0.012 7.298-0.025 10.934-0.103 1.853-0.719 3.543-1.707 4.954l0.020-0.031c-1.652 2.366-4.328 3.919-7.371 4.011l-0.014 0c-0.123 0.006-0.268 0.009-0.414 0.009-1.73 0-3.347-0.482-4.725-1.319l0.040 0.023c-2.508-1.509-4.238-4.091-4.558-7.094l-0.004-0.041c-0.025-0.625-0.037-1.25-0.012-1.862 0.49-4.779 4.494-8.476 9.361-8.476 0.547 0 1.083 0.047 1.604 0.136l-0.056-0.008c0.025 1.849-0.050 3.699-0.050 5.548-0.423-0.153-0.911-0.242-1.42-0.242-1.868 0-3.457 1.194-4.045 2.861l-0.009 0.030c-0.133 0.427-0.21 0.918-0.21 1.426 0 0.206 0.013 0.41 0.037 0.61l-0.002-0.024c0.332 2.046 2.086 3.59 4.201 3.59 0.061 0 0.121-0.001 0.181-0.004l-0.009 0c1.463-0.044 2.733-0.831 3.451-1.994l0.010-0.018c0.267-0.372 0.45-0.822 0.511-1.311l0.001-0.014c0.125-2.237 0.075-4.461 0.087-6.698 0.012-5.036-0.012-10.060 0.025-15.083z" class="svelte-e3bi7l"></path></svg></a> <a target="_blank" rel="noopener" href="https://www.instagram.com/syntax_fm/" class="svelte-1xfr8nt"><svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="svelte-e3bi7l"><rect x="2" y="2" width="20" height="20" rx="5" ry="5" class="svelte-e3bi7l"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class="svelte-e3bi7l"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" class="svelte-e3bi7l"></line></svg></a></div></div> <div class="presented svelte-nkak14"><div class="cred svelte-nkak14"><svg height="35" viewBox="0 0 1371 1212" fill="none" xmlns="http://www.w3.org/2000/svg" class="svelte-1tw8111"><title>Syntax</title><path d="M255.125 590.149C293.973 588.793 328.25 580.303 357.957 564.68C387.663 549.056 410.404 527.329 426.179 499.497C441.953 471.665 449.219 439.944 447.975 404.333C446.675 367.104 436.983 337.055 418.897 314.187C400.812 291.319 379.282 274.244 354.308 262.961C329.334 251.679 298.565 240.733 262 230.125C226.514 219.48 201.053 209.7 185.615 200.785C170.178 191.87 162.167 179.05 161.583 162.324C161.074 147.756 166.619 136.352 178.216 128.114C189.813 119.876 205.593 115.409 225.557 114.711C274.117 113.016 316.128 132.617 351.59 173.516L418.564 95.8166C389.992 66.5623 359.962 45.8673 328.476 33.7315C296.99 21.5958 263.172 16.1591 227.021 17.4215C170.368 19.3999 124.856 34.8997 90.4849 63.9211C56.1142 92.9425 39.7956 132.273 41.529 181.912C42.6784 214.825 51.4441 241.53 67.8261 262.026C84.2081 282.523 103.788 297.91 126.566 308.189C149.344 318.468 177.917 328.41 212.286 338.014C239.566 345.705 260.872 352.524 276.206 358.471C291.54 364.418 303.962 372.087 313.474 381.479C322.986 390.871 328.005 403.12 328.533 418.228C329.211 437.652 322.608 453.549 308.725 465.919C294.841 478.288 275.759 484.897 251.479 485.745C223.961 486.706 197.905 479.242 173.311 463.354C148.716 447.467 126.672 423.386 107.178 391.114L22.1153 461.341C49.0383 505.239 82.5988 538.101 122.797 559.926C162.995 581.752 207.104 591.826 255.125 590.149ZM482.056 719.98C528.998 718.34 566.24 713.528 593.782 705.544C621.324 697.559 643.794 683.539 661.191 663.484C678.588 643.429 693.911 614.262 707.16 575.984L852.655 147.915L725.589 152.352L651.48 443.415L645.815 443.613L552.391 158.4L426.135 162.809L591.584 561.383C584.69 580.531 572.668 595.942 555.518 607.615C538.369 619.289 512.798 625.719 478.806 626.906L482.056 719.98ZM1015.6 557.11L1007.04 311.881C1006.19 287.601 1013.33 267.769 1028.46 252.385C1043.59 237 1063.56 228.875 1088.38 228.008C1110.51 227.236 1127.98 232.703 1140.82 244.409C1153.65 256.116 1160.49 274.109 1161.34 298.39L1170.19 551.712L1288.35 547.586L1278.77 273.22C1277.22 228.977 1262.89 193.688 1235.77 167.354C1208.65 141.02 1173.51 128.607 1130.34 130.114C1101.75 131.113 1076.85 137.52 1055.66 149.334C1034.46 161.149 1017.7 176.185 1005.37 194.443L1001.32 194.584L999.514 142.786L882.16 146.884L896.631 561.265L1015.6 557.11ZM302.156 1194.4L298.934 1102.13L249.564 1103.86C236.615 1104.31 227.194 1101.4 221.303 1095.12C215.412 1088.84 212.202 1078.15 211.674 1063.04L204.581 859.9L290.37 856.904L287.685 780.017L201.896 783.013L196.865 638.951L78.7017 643.077L83.7324 787.139L26.2695 789.146L28.9545 866.033L86.4174 864.026L94.5288 1096.31C95.697 1129.76 105.099 1155.36 122.736 1173.11C140.373 1190.86 164.838 1199.19 196.133 1198.1L302.156 1194.4ZM473.605 1197.32C495.727 1196.55 518.763 1191.02 542.714 1180.73C566.664 1170.44 587.501 1156.07 605.224 1137.63L606.835 1183.76L711.24 1180.11L701.376 897.653C699.737 850.712 681.516 816.234 646.714 794.22C611.911 772.206 566.993 762.16 511.958 764.082C469.872 765.552 434.646 773.94 406.279 789.246C377.912 804.552 354.218 826.043 335.196 853.718L409.986 907.019C423.914 888.165 438.964 874.404 455.138 865.736C471.312 857.068 491.539 852.31 515.819 851.462C543.337 850.501 563.456 854.255 576.177 862.725C588.897 871.194 595.886 885.671 597.141 906.155C585.384 909.807 576.556 912.276 570.659 913.563C523.611 927.631 489.409 938.279 468.053 945.507C446.697 952.735 426.997 960.986 408.954 970.26C358.06 997.967 333.49 1036.91 335.242 1087.09C336.486 1122.7 349.606 1150.33 374.602 1169.99C399.598 1189.64 432.599 1198.76 473.605 1197.32ZM502.898 1107.98C490.488 1108.41 480.119 1105.39 471.79 1098.93C463.461 1092.47 459.08 1083.04 458.647 1070.63C457.969 1051.2 469.572 1035.4 493.456 1023.22C504.059 1017.45 519.369 1011.11 539.385 1004.2C559.402 997.284 579.558 990.503 599.854 983.852L602.398 1056.69C589.455 1072.81 574.358 1085.22 557.105 1093.93C539.852 1102.63 521.783 1107.32 502.898 1107.98ZM882.378 1174.14L960.267 1037.71L1047.48 1168.37L1191.55 1163.34L1039.38 959.589L1177.07 748.959L1033.01 753.99L955.011 887.176L867.908 759.755L723.846 764.786L874.277 965.355L738.316 1179.17L882.378 1174.14Z" fill="var(--logo-color, var(--primary, #fabf46))"></path><path d="M1366.31 1031.2L1370.78 1159.08L1227.52 1164.08L1223.06 1036.21L1366.31 1031.2Z" fill="var(--logo-color, var(--primary, #fabf46))"></path></svg> <span>×</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 44" height="35px"><path d="M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z" fill="white"></path></svg> <span>Syntax is Produced by Sentry</span></div> <p class="readable">Nearly 4M developers and 90K organizations rely on Sentry to see what actually matters, solve what's urgent faster, and learn continuously about their code.</p> <a href="https://sentry.io/welcome/?utm_medium=site&utm_source=syntax&utm_campaign=syntax-sentry-evergreen&utm_content=footer" class="button ghost">Try Sentry for Free</a></div> <div class="bg-indigo-600 bg-opacity-25"></div> <div><p>©️ 2025 - Sentry.io</p></div></div></footer>   <div class="toaster svelte-jzcty8" role="alert"></div>   </div>  <script> { __sveltekit_1rmrdko = { base: new URL(".", location).pathname.slice(0, -1), env: {"PUBLIC_GITHUB_ID":"e046f2bc253583eff439","PUBLIC_TURNSTILE_SITE_KEY":"0x4AAAAAAAkob51LqkKCGEhI","PUBLIC_URL":"syntax.fm"} }; const element = document.currentScript.parentElement; const data = [null,{"type":"data","data":{latest:[{id:"syntax_podcast_show_00876",number:876,title:"MIDI & Music in the Browser",date:new Date(1739361600000),url:"https://traffic.libsyn.com/syntax/Syntax_-_876.mp3",youtube_url:"https://www.youtube.com/watch?v=ZP3yfGwVjio",show_notes:"\nWes and Scott talk about the Web Audio and Web MIDI APIs, diving into how they enable powerful music and sound manipulation in the browser. They explore MIDI messaging, synthesizing audio, creative coding with music, and share hands-on projects, tips, and libraries to get started.\n\n### Show Notes\n\n* **[00:00](#t=00:00)** Welcome to Syntax!\n* **[01:17](#t=01:17)** Brought to you by [Sentry.io](https://sentry.io)\n* **[02:04](#t=02:04)** Fun audio experiments\n * [Bebot](http://www.normalware.com/)\n* **[05:32](#t=05:32)** What is MIDI?\n * [Web MIDI API](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API)\n* **[14:18](#t=14:18)** Advanced examples with WEBMIDI.js\n * [WEBMIDI.js](https://webmidijs.org/)\n* **[17:02](#t=17:02)** Outputting MIDI messages\n* **[24:40](#t=24:40)** Exploring the Web Audio API\n * [webmidirtc](https://github.com/philmillman/webmidirtc)\n* **[31:20](#t=31:20)** Audio sampling in the browser\n* **[37:35](#t=37:35)** Media Recorder\n* **[39:21](#t=39:21)** Fun projects\n * [MIDI chord machine](https://github.com/stolinski/midi-chord-machine)\n* **[42:08](#t=42:08)** Sick Picks + Shameless Plugs\n\n### Sick Picks\n\n- Scott: [MX Master 3S](https://amzn.to/42yAQPP)\n- Wes: [Microcontoller](https://www.amazon.com/s?k=microcontroller)\n\n### Shameless Plugs\n\n- [The MOST Starred JS Projects](https://www.youtube.com/watch?v=NBDnS9UQg5w)\n\n### Hit us up on Socials!\n\nSyntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)\n\nWes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)\n\nScott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)\n\nRandy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)",hash:"885f0b1a1b84acec5253ce91fcb483edc763a9e4bd929b842120bdcc01ba10b0",slug:"midi-and-music-in-the-browser",md_file:"/shows/876 - MIDI & Music in the Browser.md",created_at:new Date(1739369954183),updated_at:new Date(1739369954183),show_type:"TASTY",guests:[],hosts:[],aiShowNote:{description:"Discussion of capabilities provided by Web MIDI and Web Audio APIs for generating sound and music in the browser",topics:[{id:2149,name:"web-audio",showNote:661},{id:2150,name:"web-midi",showNote:661},{id:2151,name:"music",showNote:661}]}},{id:"syntax_podcast_show_00875",number:875,title:"JavaScript Signals Explained",date:new Date(1739185200000),url:"https://traffic.libsyn.com/syntax/Syntax_-_875.mp3",youtube_url:"https://www.youtube.com/watch?v=kZnQSrP-Yo4",show_notes:"\t\nJavaScript is missing a built-in way to make variables reactive—but Signals might change that. Scott and Wes break down what Signals are, how they compare to React state, and how different frameworks like Preact, Solid, Vue, and Qwik are already using them.\n\n### Show Notes\n\n* **[00:00](#t=00:00)** Welcome to Syntax!\n* **[01:49](#t=01:49)** Brought to you by [Sentry.io](https://sentry.io/syntax).\n* **[02:28](#t=02:28)** Why JavaScript needs reactive variables.\n* **[03:16](#t=03:16)** What exactly are signals?\n * [Signals Proposal](https://github.com/tc39/proposal-signals).\n* **[04:02](#t=04:02)** Understanding computed state.\n* **[04:59](#t=04:59)** How signals differ from React state.\n* **[06:12](#t=06:12)** How different frameworks handle reactivity.\n* **[07:09](#t=07:09)** DOM Parts.\n * [Pull Request](https://github.com/WICG/webcomponents/pull/1023).\n* **[07:26](#t=07:26)** HTML Template Instantiation.\n * [Template Instantiation](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md).\n* **[09:10](#t=09:10)** Comparing signals across frameworks: Preact, Solid.js, Vue, and more.\n * [PreactJS Signals](https://github.com/preactjs/signals).\n\n### Hit us up on Socials!\n\nSyntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)\n\nWes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)\n\nScott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)\n\nRandy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)",hash:"fbfd09f6bf394d935bc8576e832b1b98e3c5bce57d15ea62e399403cdf1842d5",slug:"javascript-signals-explained",md_file:"/shows/875 - JavaScript Signals Explained.md",created_at:new Date(1738962051925),updated_at:new Date(1739369954144),show_type:"HASTY",guests:[],hosts:[],aiShowNote:{description:"Explainer on the concept of signals, which are reactive variables that can automatically cause side effects when they update. Signals are missing from base JS but are being proposed. All frameworks have some implementation of signals built in.",topics:[{id:2146,name:"javascript",showNote:660},{id:2147,name:"reactivity",showNote:660},{id:2148,name:"frameworks",showNote:660}]}},{id:"syntax_podcast_show_00874",number:874,title:"Fast Apps - Easy Perf Wins",date:new Date(1738753200000),url:"https://traffic.libsyn.com/syntax/Syntax_-_874.mp3",youtube_url:"https://www.youtube.com/watch?v=1iAeSCwh92c",show_notes:"\t\nIs your app feeling sluggish? Scott and Wes break down the biggest performance bottlenecks—like bloated assets, slow databases, and waterfall requests—and share easy wins to make your site feel lightning fast. From smarter caching to preloading tricks, these tips will have your app zipping along in no time!\n\n### Show Notes\n\n* **[00:00](#t=00:00)** Welcome to Syntax!\n* **[00:58](#t=00:58)** Brought to you by [Sentry.io](https://sentry.io/syntax).\n* **[02:01](#t=02:01)** What makes apps slow?\n* **[02:10](#t=02:10)** Loading too much.\n* **[03:26](#t=03:26)** Slow database work.\n* **[04:04](#t=04:04)** Slow server.\n* **[04:54](#t=04:54)** Waterfall requests.\n* **[06:34](#t=06:34)** How do I know what is slow?\n* **[06:45](#t=06:45)** [Web vitals](https://webvitals.com/).\n* **[12:50](#t=12:50)** Streaming.\n* **[14:05](#t=14:05)** Network tab.\n* **[18:18](#t=18:18)** Performance tab.\n* **[22:53](#t=22:53)** Caching.\n* **[22:59](#t=22:59)** Client-side caching.\n* **[23:38](#t=23:38)** Server-side caching.\n * [Valkey.io](https://valkey.io/).\n * [Redis.io](https://redis.io/).\n* **[25:40](#t=25:40)** Local data.\n* **[26:11](#t=26:11)** Gzip.\n* **[29:23](#t=29:23)** CDN.\n* **[30:57](#t=30:57)** Images.\n * [Cloudinary](https://cloudinary.com/).\n * [Cloudflare Images](https://www.cloudflare.com/en-ca/developer-platform/products/cloudflare-images/).\n * [Imgix](https://www.imgix.com/).\n * [Vercel Images](https://vercel.com/blog/images-on-the-web).\n* **[31:08](#t=31:08)** Serving.\n* **[34:16](#t=34:16)** Compressing.\n* **[35:06](#t=35:06)** Ship fewer images.\n* **[35:50](#t=35:50)** Loading JS.\n * [Async vs Defer Attributes](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html).\n* **[37:00](#t=37:00)** CSS.\n* **[38:28](#t=38:28)** Preloading & Prefetch.\n* **[39:40](#t=39:40)** Preloading on hover.\n* **[41:44](#t=41:44)** Ship less code.\n* **[43:49](#t=43:49)** Icons\n * [Nucleo App](https://nucleoapp.com/).\n* **[47:01](#t=47:01)** Fonts\n * [Tolin.ski](https://tolin.ski/).\n* **[51:13](#t=51:13)** Sick Picks + Shameless Plugs.\n\n### Sick Picks\n\n- Scott: [Skywalkers on Netflix](https://www.netflix.com/ca/title/81758544).\n- Wes: [Oxo Swivel Peeler](https://amzn.to/40RO4Gt).\n\n### Shameless Plugs\n\n- Scott: [Syntax on YouTube](https://youtube.com/@syntaxfm).\n\n### Hit us up on Socials!\n\nSyntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)\n\nWes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)\n\nScott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)\n\nRandy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)",hash:"887cf8bb795a61abf5bb0ea8c360553257f67bf13586f7f01426be10996f632f",slug:"fast-apps-easy-perf-wins",md_file:"/shows/874 - Fast Apps Easy Perf Wins.md",created_at:new Date(1738702829214),updated_at:new Date(1739369954105),show_type:"TASTY",guests:[],hosts:[],aiShowNote:{description:"Tips and strategies for improving web performance through caching, optimization, understanding metrics, and more.",topics:[{id:2143,name:"web-performance",showNote:659},{id:2144,name:"optimization",showNote:659},{id:2145,name:"caching",showNote:659}]}},{id:"syntax_podcast_show_00873",number:873,title:"Standard Schema: The Universal JavaScript Data Interface",date:new Date(1738584000000),url:"https://traffic.libsyn.com/syntax/Syntax_-_873.mp3",youtube_url:"https://www.youtube.com/watch?v=P_etHPMftyY",show_notes:"\nWes and Scott talk about the standard schema for data validation, a collective effort by various library authors to create a unified interface. They discuss the benefits, how it works, and its impact on developers and libraries.\n\n### Show Notes\n\n* **[00:00](#t=00:00)** Welcome to Syntax! \n* **[01:24](#t=01:24)** Brought to you by Sentry.io \n* **[02:44](#t=02:44)** What is Standard Schema and how does it work? \n * [Standard Schema Spec](https://standardschema.dev/) \n * [Fabian Hiller](https://github.com/fabian-hiller) \n * [Valibot](https://valibot.dev/) \n * [David Blass](https://github.com/ssalbdivad) \n * [ArkType](https://arktype.io/) \n * [Colin McDonnell](https://github.com/colinhacks) \n * [Zod](https://zod.dev/) \n* **[06:00](#t=06:00)** Benefits of Standard Schema \n* **[08:54](#t=08:54)** Implementation and usage \n* **[11:25](#t=11:25)** Is this primarily for end users or library authors?\n\n### Hit us up on Socials!\n\nSyntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)\n\nWes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)\n\nScott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)\n\nRandy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)",hash:"5624457938f1805c042ecf44c537bb38f8a46eeca949ea96a57404a0f3b52da7",slug:"standard-schema-the-universal-javascript-data-interface",md_file:"/shows/873 - Standard Schema The Universal JavaScript Data Interface.md",created_at:new Date(1738346413284),updated_at:new Date(1739369954066),show_type:"HASTY",guests:[],hosts:[],aiShowNote:{description:"Discussion of the new standard schema effort to standardize data validation across JavaScript validation libraries like Zod, ValleyBot and Arctype.",topics:[{id:2140,name:"javascript",showNote:658},{id:2141,name:"data",showNote:658},{id:2142,name:"validation",showNote:658}]}},{id:"syntax_podcast_show_00872",number:872,title:"Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths",date:new Date(1738152000000),url:"https://traffic.libsyn.com/syntax/Syntax_-_872.mp3",youtube_url:"https://www.youtube.com/watch?v=UgN_LGsD2GE",show_notes:"\nWes and Scott answer questions about HTML semantics, TypeScript, adapting to AI’s impact on web development, and the best and worst browsers for developers. They also tackle project planning, deploying SvelteKit apps, and navigating online opinions in tech.\n\n### Show Notes\n\n* **[00:00](#t=00:00)** Welcome to Syntax!\n* **[01:04](#t=01:04)** Best container element for a grid of products?\n* **[04:50](#t=04:50)** TypeScript null checks\n* **[09:44](#t=09:44)** Adapt to AI or get left behind\n * [Syntax Episode 870](https://syntax.fm/show/870/windsurf-forked-vs-code-to-compete-with-cursor-talking-the-future-of-ai-coding)\n* **[13:13](#t=13:13)** Why did 3D never take off?\n * [three.js](https://threejs.org/)\n * [React Three Fiber](https://r3f.docs.pmnd.rs/)\n * [Rep Fitness Rack Builder](https://ca.repfitness.com/products/ares-2-0-builder)\n * [Maxime Heckel](https://maximeheckel.com/)\n * [GitHub Universe](https://githubuniverse.com/)\n * [The \u003Cmodel> element](https://immersive-web.github.io/model-element/)\n* **[18:53](#t=18:53)** Podcast audio and video in one feed?\n * [Who Smarted?](https://whosmarted.com/)\n* **[21:06](#t=21:06)** Brought to you buy [Sentry.io](https://sentry.io)\n* **[22:30](#t=22:30)** Best and worst browsers for web dev?\n * [Firefox](https://www.mozilla.org/en-US/firefox)\n * [Edge](https://www.microsoft.com/en-us/edge)\n * [Chrome](https://www.google.com/chrome)\n * [Arc](https://arc.net/)\n * [Safari](https://www.apple.com/safari)\n* **[27:39](#t=27:39)** Why use a lock file for managing dependency versions\n * [Don't gitignore your lock files!](https://www.youtube.com/watch?v=eZ0IHGhgIGg)\n* **[30:34](#t=30:34)** Should you build your own sync engine?\n * [Scott's Naive Sync Example](https://github.com/stolinski/the-break)\n* **[34:21](#t=34:21)** Best practices when starting a new project from scratch\n * [Habit Path](https://habitpath.io/)\n* **[38:33](#t=38:33)** How to deploy a SvelteKit app on something other than Vercel or Netlify\n * [Coolify Crash Course](https://www.youtube.com/watch?v=taJlPG82Ucw)\n* **[42:54](#t=42:54)** The reality of online opinions in tech\n* **[48:10](#t=48:10)** Spending $120k on an app idea\n* **[54:12](#t=54:12)** Sick Picks + Shameless Plugs\n\n### Sick Picks\n\n- Scott: [My Mind](https://mymind.com/)\n- Wes: [Metal Detector](https://amzn.to/4h8Rnid)\n\n### Shameless Plugs\n\n- Scott: [Syntax on YouTube](https://www.youtube.com/@syntaxfm)\n\n### Hit us up on Socials!\n\nSyntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)\n\nWes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)\n\nScott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)\n\nRandy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)",hash:"704598ba0f1eeb442dce43680a7dac2eaf8b850965abdac4bd233de0c878a90a",slug:"too-much-ai-disappointed-in-firefox-planning-new-projects-hard-truths",md_file:"/shows/872 - Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths.md",created_at:new Date(1738098013532),updated_at:new Date(1739369954027),show_type:"TASTY",guests:[],hosts:[],aiShowNote:{description:"In this potluck episode, Scott and Wes answer developer questions on topics like finding truthful web development advice online, checking for null values in TypeScript, HTML tags for ecommerce, browser recommendations, lock files, sync engines, AI hype fatigue, lack of 3D web adoption, a bad app investment story, and more.",topics:[{id:2137,name:"frontend",showNote:657},{id:2138,name:"javascript",showNote:657},{id:2139,name:"typescript",showNote:657}]}},{id:"syntax_podcast_show_00871",number:871,title:"Coding Agents Cursor + Windsurf Tips",date:new Date(1737975600000),url:"https://traffic.libsyn.com/syntax/Syntax_-_871.mp3",youtube_url:"https://www.youtube.com/watch?v=yOAKXYm7Ffg",show_notes:"\t\nScott and Wes explore the world of coding agents, diving into tools like Cursor and Windsurf that promise to change how we write and manage code. They discuss modes, workflows, and practical tips for experimenting with these AI-powered tools in your next project.\n\n### Show Notes\n\n* **[00:00](#t=00:00)** Welcome to Syntax!\n* **[04:12](#t=04:12)** What are AI Agents?\n * [Cursor Features](https://www.cursor.com/features), [Windsurf Features](https://codeium.com/windsurf).\n* **[07:25](#t=07:25)** Brought to you by [Sentry.io](https://sentry.io/syntax).\n* **[07:50](#t=07:50)** Chat Mode.\n* **[08:11](#t=08:11)** Composer Mode.\n* **[08:55](#t=08:55)** Agent Mode.\n* **[10:03](#t=10:03)** Inline Chat Mode.\n* **[11:02](#t=11:02)** JavaScript Set Methods Demo.\n * [Wes’ Example on X](https://x.com/wesbos/status/1881786548510966102).\n* **[16:10](#t=16:10)** Fire Dispatch Data.\n* **[20:01](#t=20:01)** Rules Files.\n * [Cursor Directory](https://cursor.directory/).\n* **[22:37](#t=22:37)** Use screenshots.\n* **[23:36](#t=23:36)** Refactoring to separate files.\n* **[23:53](#t=23:53)** Use it to experiment.\n\n### Hit us up on Socials!\n\nSyntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)\n\nWes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)\n\nScott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)\n\nRandy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)",hash:"6ce9aa8b6468ad81de53e6c375038c69670c872c68b215998ff919900f6803b1",slug:"coding-agents-cursor-windsurf-tips",md_file:"/shows/871 - Coding Agents Cursor Windsurf Tips.md",created_at:new Date(1737655206926),updated_at:new Date(1739369953988),show_type:"HASTY",guests:[],hosts:[],aiShowNote:{description:"Discussion of using AI agents like Cursor for web development, focusing on the new agent mode for automating tasks.",topics:[{id:2134,name:"AI",showNote:656},{id:2135,name:"Automation",showNote:656},{id:2136,name:"Productivity",showNote:656}]}},{id:"syntax_podcast_show_00870",number:870,title:"Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding",date:new Date(1737547200000),url:"https://traffic.libsyn.com/syntax/Syntax_-_870.mp3",youtube_url:"https://www.youtube.com/watch?v=ptekg6GNzIQ",show_notes:"\nWes and Scott talk with Kevin Hou and Varun Mohan from Windsurf about the evolving landscape of AI in coding, and the future of software development.\n\n### Show Notes\n\n* **[00:00](#t=00:00)** Welcome to Syntax!\n* **[00:50](#t=00:50)** The origins of Windsurf and Codeium\n * [Windsurf](https://wind.surf/)\n * [Codeium](https://codeium.com/)\n * [Vs Code](https://code.visualstudio.com/)\n * [Cursor](https://www.cursor.com/)\n* **[03:14](#t=03:14)** Rethinking IDE UX\n* **[05:45](#t=05:45)** Will Microsoft eventually implement these AI features in VS Code?\n* **[09:27](#t=09:27)** The \"agentic\" editor concept\n* **[17:58](#t=17:58)** The future of software development with AI\n* **[24:37](#t=24:37)** AI in large codebases\n* **[28:22](#t=28:22)** Brought to you by Sentry.io\n* **[28:46](#t=28:46)** How does AI stay current with frequent language/library updates?\n* **[33:07](#t=33:07)** Behind Windsurf's fresh design\n* **[35:23](#t=35:23)** Challenges with forking VS Code\n* **[38:47](#t=38:47)** AI and future innovations\n* **[43:04](#t=43:04)** How Windsurf approaches AI experimentation\n* **[45:11](#t=45:11)** Pricing and user segments\n* **[48:38](#t=48:38)** Will Windsurf ever run in the browser?\n* **[50:58](#t=50:58)** Sick Pick + Shameless Plugs\n\n### Sick Picks\n\n- Kevin: [Ricoh GR IIIx](https://www.ricoh-imaging.co.jp/english/products/gr-3/)\n- Varun: [Di2 Shifter](https://bike.shimano.com/en-AU/technologies/details/di2.html)\n\n### Shameless Plugs\n\n- [Windsurf](https://wind.surf)\n\n### Hit us up on Socials!\n\nSyntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)\n\nWes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)\n\nScott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)\n\nRandy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)",hash:"649cd09d1f8541870ec8de38e93390c40443677dafe0e303c54a27ff8aadd68d",slug:"windsurf-forked-vs-code-to-compete-with-cursor-talking-the-future-of-ai-coding",md_file:"/shows/870 - Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding.md",created_at:new Date(1737504008949),updated_at:new Date(1739369953907),show_type:"TASTY",guests:[{Guest:{id:"39d1a106-d7aa-41cf-965f-db89796acbd0",name:"Kevin Hou",name_slug:"kevin-hou",twitter:"kevinhou22",github:"khou22",of:"Windsurf",url:"https://wind.surf/"}},{Guest:{id:"6d19e7ee-3ad5-4d9c-8c03-646bc4ad632b",name:"Varun Mohan",name_slug:"varun-mohan",twitter:"_mohansolo",github:null,of:"Windsurf",url:"https://wind.surf/"}}],hosts:[],aiShowNote:{description:"Discussion with Wind Surf CEO and VP of Product about the company's history, coding AI tools like Wind Surf, and the future of software development",topics:[{id:2131,name:"ai",showNote:655},{id:2132,name:"coding",showNote:655},{id:2133,name:"tools",showNote:655}]}},{id:"syntax_podcast_show_00869",number:869,title:"Node + TypeScript in 2025",date:new Date(1737111600000),url:"https://traffic.libsyn.com/syntax/Syntax_-_869.mp3",youtube_url:"https://www.youtube.com/watch?v=28Mjeo0Esnw",show_notes:"\t\nScott and Wes explore the experimental world of running TypeScript in Node, breaking down the differences between type stripping and compiling. They cover the pros, cons, and quirks of the current implementation, plus explore tools like tsx, ts-node, and even alternatives like Deno.\n\n### Show Notes\n\n* **[00:00](#t=00:00)** Welcome to Syntax!\n* **[00:41](#t=00:41)** Brought to you by [Sentry.io](https://sentry.io/syntax).\n* **[01:29](#t=01:29)** Running TypeScript in Node.\n* **[01:45](#t=01:45)** Experimental Type Stripping.\n* **[03:17](#t=03:17)** TypeScript refresher.\n* **[04:05](#t=04:05)** TypeScript can be compiled and/or Type Stripped.\n* **[05:09](#t=05:09)** Current Node implementation is only type stripping.\n* **[05:40](#t=05:40)** Limitations of no compiling.\n * **[05:57](#t=05:57)** Enums.\n * **[08:30](#t=08:30)** Other issues.\n * **[08:35](#t=08:35)** Parameter properties.\n* **[09:20](#t=09:20)** Experimental transform types.\n* **[10:01](#t=10:01)** Importing types with type keyword.\n* **[11:17](#t=11:17)** No need for sourcemaps.\n* **[11:42](#t=11:42)** No dependencies.\n * **[13:08](#t=13:08)** Other tools.\n * **[13:25](#t=13:25)** [tsx](https://www.npmjs.com/package/tsx).\n * **[14:28](#t=14:28)** [ts-node](https://www.npmjs.com/package/ts-node).\n * **[14:44](#t=14:44)** [JSDoc](https://jsdoc.app/).\n * **[16:30](#t=16:30)** [Deno](https://deno.com/) and [Bun](https://bun.sh/).\n\n### Hit us up on Socials!\n\nSyntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)\n\nWes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)\n\nScott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)\n\nRandy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)",hash:"1e420d0491b4a1a356d963c6aca658624bef5ace65f6950af01847fb6e20fca7",slug:"node-typescript-in-2025",md_file:"/shows/869 - Node TypeScript in 2025.md",created_at:new Date(1737136821680),updated_at:new Date(1739369953863),show_type:"SUPPER",guests:[],hosts:[],aiShowNote:{description:"Discussion on running TypeScript code in Node.js without needing compilation, now that Node supports type stripping. Covers limitations, tools like TSX and Deno, and the much smoother developer experience working with TypeScript.",topics:[{id:2128,name:"nodejs",showNote:654},{id:2129,name:"typescript",showNote:654},{id:2130,name:"deno",showNote:654}]}},{id:"syntax_podcast_show_00868",number:868,title:"The State of JavaScript",date:new Date(1736942400000),url:"https://traffic.libsyn.com/syntax/syntax_-_868.mp3",youtube_url:"https://www.youtube.com/watch?v=VSRAvg9wA4g",show_notes:"\nWes and Scott talk about the State of JavaScript survey, tends, popular features, and the evolving landscape of tools and frameworks. \n\n### Show Notes\n\n* **[00:00](#t=00:00)** Welcome to Syntax!\n* **[00:27](#t=00:27)** Brought to you by [Sentry.io](https://sentry.io)\n* **[01:16](#t=01:16)** The state of JavaScript Twitter fantasy football\n* **[02:27](#t=02:27)** Syntax features\n * [The State of JavaScript survey](https://2024.stateofjs.com/en-US/)\n* **[05:27](#t=05:27)** Logical assignment\n* **[07:49](#t=07:49)** Strings\n* **[08:18](#t=08:18)** Arrays\n* **[14:16](#t=14:16)** Sets\n * [2025 New Years resolution: use maps and sets more and objects / arrays less.](https://www.youtube.com/post/UgkxrFcXWyrqgGuSj2wIcgBssSxjbQypz7fu)\n* **[16:10](#t=16:10)** Browser APIs\n* **[22:50](#t=22:50)** Library tiers list\n* **[27:21](#t=27:21)** Upgrading from M1 Mac\n * [Chris Coyier - M4](https://chriscoyier.net/2025/01/06/m4/)\n* **[30:08](#t=30:08)** Front-end frameworks\n* **[32:18](#t=32:18)** The top front-end frameworks used at work\n* **[33:49](#t=33:49)** What is the highest paying framework?\n* **[35:01](#t=35:01)** Meta frameworks\n* **[36:32](#t=36:32)** Meta frameworks pain points\n* **[42:33](#t=42:33)** Testing tools\n* **[43:58](#t=43:58)** Build tools\n* **[44:41](#t=44:41)** Most used libraries\n* **[46:33](#t=46:33)** Back-end frameworks\n* **[48:34](#t=48:34)** JavaScript runtimes\n* **[50:35](#t=50:35)** Serverless runtimes\n* **[51:25](#t=51:25)** Other languages people are using\n* **[52:49](#t=52:49)** AI tools\n* **[53:37](#t=53:37)** The State of JS Awards\n* **[57:18](#t=57:18)** Sick Picks + Shameless Plugs\n\n### Sick Picks\n\n- Wes: [Headted Vest](https://amzn.to/4gZ9dEh)\n- Scott: [Super Mario Party Jamboree](https://amzn.to/407UVcV)\n\n### Shameless Plugs\n\n- [Syntax YouTube Channel](https://www.youtube.com/@syntaxfm)\n\n### Hit us up on Socials!\n\nSyntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)\n\nWes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)\n\nScott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)\n\nRandy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)",hash:"c750e876aaddabe71e728869cce0b1132c103129532a91840fee46e47a4d8fe7",slug:"the-state-of-javascript",md_file:"/shows/868 - The State of JavaScript.md",created_at:new Date(1736888444729),updated_at:new Date(1739369953823),show_type:"TASTY",guests:[],hosts:[],aiShowNote:{description:"Wes and Scott discuss the State of JS survey results, including popularity of frameworks, tools and features.",topics:[{id:2125,name:"JavaScript",showNote:653},{id:2126,name:"Web Development",showNote:653},{id:2127,name:"Tools",showNote:653}]}},{id:"syntax_podcast_show_00867",number:867,title:"Zero Sync is the Future of Data Loading",date:new Date(1736766000000),url:"https://traffic.libsyn.com/syntax/Syntax_-_867.mp3",youtube_url:"https://www.youtube.com/watch?v=Mv6BzoO_H0w",show_notes:"\t\nWhat’s the deal with Zero Sync? Scott and Wes dive into this cutting-edge database tech, exploring its real-time interactivity, blazing-fast performance, and how it stacks up against the competition. Plus, they break down setup, querying, authentication, and whether it’s ready for prime time.\n\n### Show Notes\n\n* **[00:00](#t=00:00)** Welcome to Syntax!\n* **[01:59](#t=01:59)** Brought to you by [Sentry.io](https://sentry.io/syntax).\n* **[02:21](#t=02:21)** Today's agenda.\n* **[02:52](#t=02:52)** What is Zero Sync?\n * [The Docs](https://zero.rocicorp.dev/docs/introduction).\n * [InstantDB](https://www.instantdb.com/).\n* **[07:02](#t=07:02)** Zerobugs loading speed.\n* **[11:04](#t=11:04)** Real-time interactivity.\n* **[11:38](#t=11:38)** Why is it different?\n* **[12:11](#t=12:11)** How to get it set up.\n * **[12:58](#t=12:58)** Querying Data.\n * **[16:22](#t=16:22)** Writing data.\n * **[16:31](#t=16:31)** Upsert.\n * **[17:39](#t=17:39)** Authentication and permissions.\n * [Johannes Schickling Ep 767](https://www.youtube.com/watch?v=TrVYBfIsOa0).\n * **[19:27](#t=19:27)** Preloading.\n * **[19:41](#t=19:41)** Migrations and deployment.\n* **[20:17](#t=20:17)** Some extras.\n* **[21:16](#t=21:16)** CreateSubscriber.\n* **[23:08](#t=23:08)** Can you use this today?\n * [Zero Syn Roadmap](https://zero.rocicorp.dev/docs/roadmap).\n * [Scott’s YouTube Video](https://www.youtube.com/watch?v=hAxdOUgjctk).\n\n### Hit us up on Socials!\n\nSyntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)\n\nWes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)\n\nScott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)\n\nRandy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)\n",hash:"93550e054d074ab9a73c79f209e67eb00c1376f0e6ecd6c8d6f8e643d233b43f",slug:"zero-sync-is-the-future-of-data-loading",md_file:"/shows/867 - Zero Sync.md",created_at:new Date(1736532042176),updated_at:new Date(1739369953780),show_type:"HASTY",guests:[],hosts:[],aiShowNote:{description:"Deno Sync enables building fast, real-time web apps with local data syncing and the ability to bring your own Postgres database.",topics:[{id:2122,name:"deno",showNote:652},{id:2123,name:"webdev",showNote:652},{id:2124,name:"database",showNote:652}]}}],user:void 0,user_theme:"system"},"uses":{}},{"type":"data","data":{meta:{canonical:"https://syntax.fm"}},"uses":{}}]; Promise.all([ import("./_app/immutable/entry/start.CwecmlL3.js"), import("./_app/immutable/entry/app.CxNfdcCV.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 3, 11], data, form: null, error: null }); }); } </script> </div> </body> </html>