Scott and Wes look back at 2024 and share highlights from a big year for Syntax and the web dev world. They review their 2024 predictions to see what they got right (and wrong), and break down the major moments in web development from CSS improvements to AI editors and beyond. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:30">01:30</a> Changes to the Syntax podcast.</li> <li class="has-line-data" data-line-start="6" data-line-end="15"> <a href="#t=05:56">05:56</a> What happened this year? <ul> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=06:07">06:07</a> React.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=06:36">06:36</a> Solid Start.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=07:04">07:04</a> Tanstack Start.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=07:43">07:43</a> Remix</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=09:42">09:42</a> AI Editors.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=11:53">11:53</a> Vite 6.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=14:02">14:02</a> Bluesky.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=19:52">19:52</a> CSS.</li> </ul> </li> <li class="has-line-data" data-line-start="15" data-line-end="26"> <a href="#t=22:17">22:17</a> What did we do? <ul> <li class="has-line-data" data-line-start="16" data-line-end="18"> <a href="#t=22:21">22:21</a> React Miami. <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://www.youtube.com/watch?v=oOoBlD7zHRo">React Miami Episode</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=22:26">22:26</a> JSNation <a href= "https://www.instagram.com/stolinski/p/C8qcO_exNOY/?locale=nl&hl=af&img_index=1"> Amsterdam</a>.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=23:55">23:55</a> JSNation <a href= "https://x.com/wesbos/status/1859281876063535134">US</a> + React Summit.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=24:57">24:57</a> <a href= "https://www.youtube.com/watch?v=fMy0XhFdLAE">Terminal Feud</a>.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=26:28">26:28</a> <a href= "https://www.youtube.com/watch?v=QMwNHaV5eMs">Laravel + Terminal basketball game</a>.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=27:02">27:02</a> <a href= "https://x.com/syntaxfm/status/1853531035847540928/photo/1">Syntax San Francisco meetup</a>.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=27:23">27:23</a> <a href= "https://x.com/syntaxfm/status/1853567942056935483/video/1">GitHub Universe</a>.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=28:07">28:07</a> <a href= "https://fitc.ca/speaker/wesbos/">FITC</a>.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=28:38">28:38</a> 153 Syntax Episodes + Video.</li> </ul> </li> <li class="has-line-data" data-line-start="26" data-line-end="57"> <a href="#t=29:32">29:32</a> <a href= "https://syntax.fm/show/712/2024-predictions">Our 2024 Predictions</a> Reviewed. <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=29:46">29:46</a> Types in JS will have real movement.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=31:29">31:29</a> Temporal API will ship in 1 browser.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=32:50">32:50</a> Perf tooling gets easy for everyone to understand.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=33:29">33:29</a> CSS continues to get better where you need less JS.</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=34:25">34:25</a> Svelte v5 is very fast.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=34:38">34:38</a> The year of the server in frameworks.</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="#t=35:28">35:28</a> Astro is going to have a good year.</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="#t=36:13">36:13</a> React server components.</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="#t=37:03">37:03</a> Remix moves away from page-based loaders, to component loaders.</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="#t=37:18">37:18</a> Hono will become more ubiquitous.</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="#t=38:28">38:28</a> We will see a route matching Proposal move ahead.</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="#t=39:23">39:23</a> Bun releases full node compat.</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="#t=40:42">40:42</a> We will see a new Linter + formatter entirely replace.</li> <li class="has-line-data" data-line-start="40" data-line-end="42"> <a href="#t=42:16">42:16</a> New TypeScript typechecker. <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://github.com/kaleidawave/ezno">Ezno</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="#t=43:40">43:40</a> Lightning CSS pops - or does it?</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="#t=45:10">45:10</a> You’ll hear more about Rspack and Turbopack.</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="#t=45:51">45:51</a> Vite isn’t going to release anything big in 2024.</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="#t=46:24">46:24</a> Relative color will land in all major browsers.</li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="#t=48:14">48:14</a> CSS contrast-color will land in chrome.</li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="#t=48:48">48:48</a> Scroll animation landing in 2 browsers.</li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="#t=50:03">50:03</a> The year of CSS discovery.</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="#t=51:09">51:09</a> Safari will Ship 3 missing PWA Support.</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="#t=52:11">52:11</a> Firefox usage will continue to slip.</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="#t=56:53">56:53</a> Paid Arc features.</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="#t=57:14">57:14</a> More XR web experiences as Apple releases in Vision Pro.</li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="#t=59:55">59:55</a> AI Tooling.</li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="#t=01:00:57">01:00:57</a> Small Models that run in the browser.</li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="#t=01:01:38">01:01:38</a> Apps get Sherlocked by OpenAI.</li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="#t=01:02:04">01:02:04</a> On prem corporate AI.</li> </ul> </li> <li class="has-line-data" data-line-start="57" data-line-end="59"> <a href="#t=01:04:49">01:04:49</a> Sick Picks + Shameless Plugs.</li> </ul> <a id="Sick_Picks_59"></a>Sick Picks <ul> <li class="has-line-data" data-line-start="61" data-line-end="62"> Scott: <a href="https://tcgpocket.pokemon.com/en-us/">TCGPocket App</a>.</li> <li class="has-line-data" data-line-start="62" data-line-end="64"> Wes: Huge Bag of Croc Charms</li> </ul> <a id="Shameless_Plugs_64"></a>Shameless Plugs <ul> <li class="has-line-data" data-line-start="66" data-line-end="68"> Scott: <a href="https://youtube.com/@syntaxfm">Syntax on YouTube</a>.</li> </ul> <a id="Hit_us_up_on_Socials_68"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

863: 2024: A Year in Review

Syntax - Tasty Web Development Treats

AI Chapters

AI Insights

Reviews