JS Party: JavaScript, CSS, Web Development

New Year's Party 🎊

It’s our 5th annual New Year’s party! Jerod & the gang review our predictions from last year, discuss what’s trending in the web world, make a few predictions for 2024 & even set some new resolutions for this year. Leave us a comment Changelog++ members save 3 minutes on this episode because they made the ads disappear. Join today! Sponsors: Socket – Secure your supply chain and ship with confidence. Install the GitHub app, book a demo or learn more Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs. Featuring: Jerod Santo – Mastodon, Twitter, GitHub, LinkedInAmal Hussein – Twitter, GitHubNick Nisi – Twitter, GitHub, WebsiteKevin Ball – Twitter, GitHub, LinkedIn, WebsiteChristopher Hiller – Mastodon, Twitter, GitHub, Website Show Notes: Last year’s New Year’s party Smoot - Wikipedia JS Party Survey Github Collaboration Repo (content coming soon) Something missing or broken? PRs welcome!

What's next in JavaScript (a TC39 update)

Daniel Ehrenberg (software engineer at Bloomberg, web standards author / champion & VP of ECMA International) joins us to discuss new features that have landed in JavaScript and to preview what’s cooking in various standards bodies across the web platform. We cover a wide array (get it?) of topics from improvements to built-in such as Promises, Maps & Sets, as well as new primitives like Records, Tuples & Temporal. We round out this epic discussion with a look at cross-project standardization efforts like WinterCG, open source sustainability & how Bloomberg’s open source program gives back in important projects in the web ecosystem. Leave us a comment Changelog++ members save 5 minutes on this episode because they made the ads disappear. Join today! Sponsors: Socket – Secure your supply chain and ship with confidence. Install the GitHub app, book a demo or learn more React Jam – React Jam is an online event where React developers come together to create games in 10 days. Let’s do this! Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs. Featuring: Daniel Ehrenberg – Mastodon, Twitter, GitHubAmal Hussein – Twitter, GitHubNick Nisi – Twitter, GitHub, WebsiteChristopher Hiller – Mastodon, Twitter, GitHub, Website Show Notes: Correction: Near the end, Dan misspoke when said the Bloomberg FOSS Fund was done in partnership with Bloomberg Philanthropies. It was actually done together with Bloomberg’s Corporate Philanthropy team. Something missing or broken? PRs welcome!

From WebGL to WebGPU

Gregg Tavares (author of WebGL/WebGPU Fundamentals) joins Jerod & Amal to give us a tour of these low-level technologies that are pushing the web forward into the world of video games, machine learning & other exciting rich applications. Leave us a comment Changelog++ members get a bonus 16 minutes at the end of this episode and zero ads. Join today! Sponsors: Socket – Secure your supply chain and ship with confidence. Install the GitHub app, book a demo or learn more React Jam – React Jam is an online event where React developers come together to create games in 10 days. Let’s do this! Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs. Featuring: Gregg Tavares – Twitter, GitHub, WebsiteJerod Santo – Mastodon, Twitter, GitHub, LinkedInAmal Hussein – Twitter, GitHub Show Notes: WebGL Fundamentals WebGPU Fundamentals WebGPU - Wikipedia “webgpu” | Can I use… Download the latest indie games - itch.io PlayCanvas WebGL Game Engine PICO-8 Fantasy Console Tomorrow, and Tomorrow, and Tomorrow: A Novel Changelog++ Zelda, Tears of the Kingdom - Disappointing Something missing or broken? PRs welcome!

Art of the state machine

Amal, Nick & special guest Laura Kalbeg geek out over the remarkable growth and evolution of the XState project and its team in recent years. Laura also tells everyone about Stately.ai, a SaaS platform that uses AI to create seamless state management solutions compatible with various tools like XState, Redux & zustand. Leave us a comment Changelog++ members get a bonus 6 minutes at the end of this episode and zero ads. Join today! Sponsors: Changelog News – A podcast+newsletter combo that’s brief, entertaining & always on-point. Subscribe today. Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs. Featuring: Laura Kalbag – Mastodon, Twitter, GitHub, LinkedIn, WebsiteAmal Hussein – Twitter, GitHubNick Nisi – Twitter, GitHub, Website Show Notes: XState JS Party debut w/ David “Piano” - X’ gon State it to ya (#191) Stately XState Jump straight into the Stately editor - via state.new (fancy!) Laura’s talk where she demoed state machines and the outputted state machine All the public machines that folks have made using Stately An intro to state machines and statecharts (with puppies!) Laura’s awesome book via Book Apart - Accessibility for Everyone NodeConf EU NodeConf EU talks from 2023 (workshops were live only) The amazing NodeConf EU venue we were ooo’ing and aaah’ing about 😍 Laura’s NodeConf Talk Accessibility for Everyone Migrate to XState 5 Actor Model Model-based testing Playwright Stately Discord Redux Toolkit zustand Something missing or broken? PRs welcome!

What's new in CSS land

Una Kravets, developer advocate at Google & web platform ambassador, joins Amal & Nick to take them CSS to school as they start this podcast in CSS kindergarten and end it with a Level-Up CSS Diploma. (LUCD?) We explore all the amazing features which have recently landed in CSS — enabling super-charged user experiences with no JavaScript. Don’t forgot to check out all the epic links & demos in the show notes — and hold on to your butts, kids, this one is a ride! Leave us a comment Changelog++ members support our work, get closer to the metal, and make the ads disappear. Join today! Sponsors: Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs. Typesense – Lightning fast, globally distributed Search-as-a-Service that runs in memory. You literally can’t get any faster! Featuring: Una Kravets – Twitter, GitHub, WebsiteAmal Hussein – Twitter, GitHubNick Nisi – Twitter, GitHub, Website Show Notes: What’s new in CSS UI 2023 (the blog post we referenced on the show) CSS Podcast - USA and Adam’s AMAZZZZZZING Podcast - 🙌🏾❤️ Like and Subscribe ❤️🙌🏾 Igalia Bocoup Follow Lea Verou and Chris Lilley for CSS Leveling up Releasing Color.js: A library that takes color seriously (Lea’s blog post) Releasing Color.js (Chris’ blog post) Contrast Ratio (a helpful tool to help find the right contract ratios) High Definition CSS Color Guide What is a color space? New color spaces! Proposal for “open-stylable” Shadow Roots (aka breaking shadow DOM encapsulation CSS Nesting Can I Use MDN Baseline - a unified view of stable web features What are Origin Trials? Origin Trials available via Chrome Origin Trials available via FireFox Origin Trials available via Edge “Accessibly blueberry muffin analogy” - Baking Accessibility In (Talk from Cordelia McGee-Tubb) “Accessibility is Delicious” - great blog post referencing Cordelia’s talk Trigonometric functions in CSS nth of syntax nth-of-child & nth-of-last-child Codepen demo Scoped CSS Scoped CSS Codepen demo Cascade Layers Cascade Layers Codepen demo Una’s wonderful YouTube video explaining CSS Cascade Layers Popover API Anchor positioning Scroll driven animations Scroll driven animations demo site (scroll-driven-animations.style) Container Queries Style Queries Linear Easing Function MDN Create complex animation curves in CSS with the linear() easing function Linear Easing Generator (a tool via Jake Archibald) View Transitions API View Transitions Guide View Transitions support in Svelte View Transitions support in Astro :has() API web.dev- Guidance to build modern web experiences that work on any browser developer.chrome.com - Simplifying the web to help you build, grow and innovate Something missing or broken? PRs welcome!