<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: This Week In JavaScript</title>
    <description>The latest articles on DEV Community by This Week In JavaScript (@thisweekinjavascript).</description>
    <link>https://dev.to/thisweekinjavascript</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2143025%2Fec54b6b6-98cd-4fbd-b4d3-d6fef6ab11fa.png</url>
      <title>DEV Community: This Week In JavaScript</title>
      <link>https://dev.to/thisweekinjavascript</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/thisweekinjavascript"/>
    <language>en</language>
    <item>
      <title>TypeScript 5.9 is here, GLM 4.5 is EPIC for Programming, Node.js 22.18 LTS, and more</title>
      <dc:creator>This Week In JavaScript</dc:creator>
      <pubDate>Sun, 03 Aug 2025 17:00:00 +0000</pubDate>
      <link>https://dev.to/thisweekinjavascript/typescript-59-is-here-glm-45-is-epic-for-programming-nodejs-2218-lts-and-more-48h8</link>
      <guid>https://dev.to/thisweekinjavascript/typescript-59-is-here-glm-45-is-epic-for-programming-nodejs-2218-lts-and-more-48h8</guid>
      <description>&lt;p&gt;Hello JavaScript Enthusiasts!&lt;/p&gt;

&lt;p&gt;Welcome to a new edition of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;"!&lt;/p&gt;

&lt;p&gt;This week, TypeScript 5.9 streamlines developer workflows with minimal configurations and deferred imports, ZhipuAI's GLM 4.5 showcases incredible coding capabilities including building Space Invaders games, and Node.js 22.18 LTS solidifies production reliability while Node.js v24 pushes performance boundaries.&lt;/p&gt;

&lt;p&gt;Plus, we've got some powerful new + updated tools for your development workflow!&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;TypeScript 5.9: Developer Experience Gets Better&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-9/" rel="noopener noreferrer"&gt;&lt;strong&gt;TypeScript 5.9&lt;/strong&gt;&lt;/a&gt; delivers practical enhancements that directly address common developer pain points, making the development experience smoother and more productive. This release focuses on reducing setup complexity, improving IDE interactions, and optimizing performance for real-world applications.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;What's New&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Simplified Setup Removes Onboarding Friction:&lt;/strong&gt; The redesigned tsc --init generates clean, prescriptive configurations instead of overwhelming comment-heavy files. New developers get modern defaults like "module": "nodenext" and "target": "esnext" without decision paralysis, while experienced teams benefit from stricter type-checking options like noUncheckedIndexedAccess being prominently featured.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Better Performance Control with Deferred Imports:&lt;/strong&gt; The new import defer syntax gives developers granular control over when modules execute. Instead of all imports running immediately, you can defer execution until actually needed with import defer * as a feature from "./module.js". This is particularly valuable for large applications where startup performance matters.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Enhanced IDE Experience:&lt;/strong&gt; Expandable hovers transform how developers explore type information. The new + and - buttons in tooltips let you drill down into complex types without leaving your current context. Combined with configurable hover lengths, this means less time jumping between files to understand type definitions and more time actually coding.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Production-Ready Module Resolution:&lt;/strong&gt; The &lt;strong&gt;--module node20&lt;/strong&gt; option provides a stable, predictable alternative to nodenext specifically modeling Node.js v20 behavior. Unlike the potentially shifting nodenext, this gives teams a fixed target with consistent --target es2023 compilation, crucial for enterprise applications requiring predictable deployment behavior.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Faster Compilation Where It Counts:&lt;/strong&gt; Performance optimizations targeting complex libraries like Zod and tRPC address real-world bottlenecks. Cached instantiations and optimized file checks translate to noticeably faster compilation times, especially valuable for large codebases where build performance directly impacts developer productivity.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;TypeScript 5.9 removes common friction points while adding features that enhance both immediate productivity and long-term maintainability, exactly what developers need for modern JavaScript projects.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;GLM 4.5 is a Fullstack POWERHOUSE&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://z.ai/blog/glm-4.5" rel="noopener noreferrer"&gt;&lt;strong&gt;ZhipuAI's GLM 4.5&lt;/strong&gt;&lt;/a&gt; represents a breakthrough in open-source AI, specifically engineered for fullstack development automation and complex agentic workflows that rival proprietary models in coding capabilities.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Key Innovations&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Massive Scale with Efficiency:&lt;/strong&gt; GLM 4.5 features 355 billion total parameters with 32 billion active parameters using Mixture of Experts architecture. This design delivers exceptional performance while maintaining computational efficiency for real-world development tasks.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Hybrid Reasoning Modes:&lt;/strong&gt; The model provides both thinking mode for complex reasoning and tool usage, and non-thinking mode for immediate responses. This dual approach ensures optimal performance whether you're debugging complex logic or need quick code suggestions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Fullstack Development Excellence:&lt;/strong&gt; GLM 4.5 excels in both frontend and backend development, making it powerful for building modern web applications. Users can create entire websites with just a few words, then effortlessly add features through multi-turn dialogue, making the coding process smooth and enjoyable.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Interactive Game Development:&lt;/strong&gt; The model demonstrates remarkable capabilities by building complete JavaScript games like Space Invaders through natural language interaction. This showcases its understanding of game mechanics, canvas manipulation, event handling, and complex interactive programming patterns that would typically require extensive coding knowledge.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;LLM Whisperer Integration:&lt;/strong&gt; GLM 4.5's advanced prompt engineering capabilities make it exceptionally skilled at communicating with other AI models, acting as an intelligent intermediary that can optimize prompts, chain multiple AI interactions, and orchestrate complex multi-model workflows for enhanced development automation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Superior Coding Benchmarks:&lt;/strong&gt; With a 64.2% score on SWE-bench Verified and 90.6% tool-use success rate, GLM 4.5 outperforms many leading models in real-world coding scenarios, demonstrating its practical utility for professional development workflows.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;GLM 4.5 transforms fullstack development by enabling developers to build complete applications through natural language interaction, from rapid prototyping to production deployment, all while maintaining the flexibility of open-source accessibility.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Node.js 22.18 LTS: Production-Ready Stability&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://nodejs.org/en/blog/release/v22.18.0" rel="noopener noreferrer"&gt;&lt;strong&gt;Node.js v22.18.0&lt;/strong&gt;&lt;/a&gt; establishes the new Long-Term Support baseline with critical performance improvements, security patches, and stability enhancements that make it the recommended runtime for enterprise applications.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;What's New&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Long-Term Support Baseline:&lt;/strong&gt; As the first LTS release of the Node.js 22.x line, this version provides the stability and predictable update cycle that production applications require. Enterprise teams can now confidently adopt Node.js 22 knowing they'll receive security updates and critical fixes through April 2027.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Enhanced Performance:&lt;/strong&gt; This release includes significant V8 engine updates, improved garbage collection performance, and optimized module loading that translates to faster startup times and better runtime performance for both server and tooling applications.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Security Hardening:&lt;/strong&gt; Multiple security vulnerabilities have been addressed, including improvements to the permission model, enhanced cryptographic operations, and strengthened HTTP/2 implementation for more secure production deployments.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Developer Experience Improvements:&lt;/strong&gt; Enhanced debugging capabilities, improved stack traces, and better error messages make development and production troubleshooting more efficient and developer-friendly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Node.js v24 on the Horizon:&lt;/strong&gt; While Node.js 22.18 LTS focuses on production stability, the upcoming Node.js v24 (currently in development) promises even more dramatic performance improvements with the latest V8 engine, experimental features like the Permission Model refinements, and enhanced ECMAScript modules support that will further modernize the JavaScript runtime ecosystem.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Node.js 22.18 LTS represents the mature, battle-tested foundation that production applications need, while Node.js v24 development continues pushing the boundaries of JavaScript runtime performance and capabilities.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Tools &amp;amp; Releases You Should Know About&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://nodered.org/" rel="noopener noreferrer"&gt;&lt;strong&gt;Node-RED&lt;/strong&gt;&lt;/a&gt; continues evolving its visual programming capabilities for IoT and automation workflows, providing developers with an intuitive drag-and-drop interface for connecting hardware devices, APIs, and online services into powerful automation systems without requiring extensive coding expertise.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://ionicframework.com/" rel="noopener noreferrer"&gt;&lt;strong&gt;Ionic 8.7&lt;/strong&gt;&lt;/a&gt; enhances cross-platform mobile development with improved performance optimizations, enhanced UI components, and better integration with modern web standards, making it easier to build native-quality apps using familiar web technologies and deployment pipelines.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://storybook.js.org/" rel="noopener noreferrer"&gt;&lt;strong&gt;Storybook 9.1&lt;/strong&gt;&lt;/a&gt; advances component-driven development with enhanced testing capabilities, improved performance, and better integration with modern frontend frameworks, streamlining the development and documentation of UI component libraries for design systems.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://ghost.org/" rel="noopener noreferrer"&gt;&lt;strong&gt;Ghost 6.0&lt;/strong&gt;&lt;/a&gt; revolutionizes content management with headless CMS capabilities, advanced membership features, and enhanced developer APIs, providing creators and developers with powerful tools for building modern publishing platforms and content-driven applications.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://github.com/vadimdemedes/ink" rel="noopener noreferrer"&gt;&lt;strong&gt;Ink 6.1&lt;/strong&gt;&lt;/a&gt; elevates CLI development by bringing React's component model to terminal applications, enabling developers to build sophisticated command-line interfaces using familiar React patterns, hooks, and modern JavaScript tooling workflows.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;And that's it for the forty-sixth issue of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;", brought to you by &lt;a href="https://jam.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;jam.dev&lt;/strong&gt;&lt;/a&gt;—the tool that makes it impossible for your team to send you bad bug reports.&lt;/p&gt;

&lt;p&gt;Feel free to share this newsletter with a fellow developer, and make sure you're following for more weekly updates.&lt;/p&gt;

&lt;p&gt;Until next time, happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>GitHub Spark builds EPIC apps in minutes, Qwen3-Coder is INSANE, EPIC JavaScript utility library, and more</title>
      <dc:creator>This Week In JavaScript</dc:creator>
      <pubDate>Sun, 27 Jul 2025 17:00:00 +0000</pubDate>
      <link>https://dev.to/thisweekinjavascript/github-spark-builds-epic-apps-in-minutes-qwen3-coder-is-insane-epic-javascript-utility-library-3f7d</link>
      <guid>https://dev.to/thisweekinjavascript/github-spark-builds-epic-apps-in-minutes-qwen3-coder-is-insane-epic-javascript-utility-library-3f7d</guid>
      <description>&lt;p&gt;Hello JavaScript Enthusiasts!&lt;/p&gt;

&lt;p&gt;Welcome to a new edition of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;"!&lt;/p&gt;

&lt;p&gt;This week, GitHub Spark brings true prompt to app coding at scale, Alibaba pushes boundaries with Qwen3-Coder for intelligent automation, and es-toolkit resets the standard for JavaScript utilities.&lt;/p&gt;

&lt;p&gt;Plus, we’ve got some powerful new + updated tools for your development workflow!&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;GitHub Spark builds Production-Ready Apps in MINUTES&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://githubnext.com/projects/github-spark" rel="noopener noreferrer"&gt;&lt;strong&gt;GitHub Spark&lt;/strong&gt;&lt;/a&gt;, currently in public preview, is an AI-powered, comprehensive platform that enables developers to create, refine, and deploy intelligent full-stack applications using natural language, visual controls, or code.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;What’s New&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Full Power, No Setup:&lt;/strong&gt; Start from a single prompt, Spark scaffolds your frontend and backend using trusted frameworks like React and TypeScript. No manual configuration, servers, or SDK installs needed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Live Preview and Instant Deploy:&lt;/strong&gt; Applications can be instantly visualized with Live Preview and deployed to production with a single click. GitHub authentication and managed hosting are provided by default, enabling real time updates via straightforward prompts.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Integrated GitHub Tools:&lt;/strong&gt;Each Spark application operates as an independent project, complete with automated GitHub Actions, Dependabot for security, and integrated features for code reviews, collaborative work, and version control.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;AI Feature Integration:&lt;/strong&gt; Integrate LLM capabilities (chatbots, content generation, automation) from leading providers (OpenAI, Meta, DeepSeek, xAI) effortlessly, requiring no API keys.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Copilot Harmony:&lt;/strong&gt; Seamless integration with Copilot is achievable for all coding, whether through VS Code or by employing Copilot Agents for advanced automations, all within the robust Spark environment.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Flexibility:&lt;/strong&gt; Spark provides adaptable solutions for diverse applications, encompassing prototypes, SaaS offerings, workflow automation, and utility applications. It integrates effortlessly with established processes and is appropriate for both collaborative teams and individual developers.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Developers can iterate straight from idea to live application while staying anchored in the GitHub ecosystem.Spark facilitates rapid prototyping and delivery, enabling developers to ship smarter, faster, and with less friction. It allows for seamless iteration from concept to live application, all while remaining integrated within the GitHub ecosystem.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Alibaba’s Qwen3-Coder is INSANE&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.alibabacloud.com/help/en/model-studio/qwen-coder" rel="noopener noreferrer"&gt;&lt;strong&gt;Alibaba’s Qwen3-Coder-480B-A35B-Instruct&lt;/strong&gt;&lt;/a&gt; is a cutting-edge, open source code model and agentic platform, built for real development automation and cross-codebase reasoning.Alibaba's cutting-edge open-source code model, Qwen3-Coder, is designed to enhance the capabilities of software engineers. It offers advanced automation, the ability to reason across different codebases, and seamless integration with various developer tools.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Key Innovations&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Agentic Workflow Engine:&lt;/strong&gt; Outperforms earlier models at handling complex, multistep software engineering tasks.Generate code, refactor large projects, or execute procedural workflows, all via prompt or CLI.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;480B Parameters (35B Active):&lt;/strong&gt; Leveraging Mixture of Experts, it manages large, diverse tasks with high efficiency, and supports native 256K-token context (scalable to 1M for ultra-large codebases).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Trained for Engineering:&lt;/strong&gt; Qwen3-Coder learns from 7.5T tokens (70% code), using advanced reinforcement learning to develop true coding intuition and context awareness,ideal for repository wide analysis.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Command-Line and API Ready:&lt;/strong&gt; Qwen provides developers with excellent integration possibilities, including command-line interface (CLI) and API access, as well as compatibility with IDEs and CI/CD pipelines.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Easy Setup and Broad Availability:&lt;/strong&gt; Available in multiple variants on GitHub, Hugging Face, and ModelScope. Installing or using Qwen Code is straightforward for developers familiar with modern JavaScript tooling (Node.js v20+ supported for CLI workflows)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Broad Multilingual Coding Support:&lt;/strong&gt; Handles 358 programming languages, making it suitable for diverse software stacks, teams, and global projects&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Open Source and Community Driven:&lt;/strong&gt; Qwen3-Coder is fully open source, inviting contributions and adoption by teams and enterprises seeking transparency and state-of-the-art AI coding capabilities.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Qwen3-Coder is an open-source artificial intelligence coding solution developed for software engineers encountering intricate engineering automation challenges. It demonstrates proficiency in comprehensive code analysis, refactoring, and tool integration, thereby establishing itself as an essential collaborator in surmounting complex programming obstacles.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Modern Utilities for the Fast JavaScript Stack&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://es-toolkit.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;es-toolkit&lt;/strong&gt;&lt;/a&gt; is a state-of-the-art, high-performance JavaScript utility library designed to help developers build, iterate, and optimize codebases with maximum efficiency and minimal overhead.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;What’s New&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Efficient by Design&lt;/strong&gt;: Delivers better performance than legacy libraries and reduces JavaScript bundle size by up to 97%. Every delay, chunk, sum, pick, and more is implemented for speed and modularity, perfectly suited for modern, performance-focused projects.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Seamless Migration:&lt;/strong&gt; Includes a Lodash compatibility layer (es-toolkit/compat) for effortless migration. Replace Lodash in existing projects without rewriting code, enabling quick transitions to more modern, lightweight tooling.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;TypeScript Excellence&lt;/strong&gt;: Features strong, built-in type annotations and advanced type guards like isNotNil, enabling safer, predictable development with robust TypeScript integration.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Battle-Tested Reliability&lt;/strong&gt;: 100% test coverage ensures every function is production-ready from day one. es-toolkit is trusted by popular open-source projects including Storybook, Recharts, ink, and CKEditor.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Universal Compatibility:&lt;/strong&gt; Runs anywhere JavaScript does Node.js, browsers, Bun, Deno offering true universality without tradeoffs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Developer Tooling Ecosystem:&lt;/strong&gt; Community has already built migration tools including es-toolkit-webpack-plugin for Webpack 5 and vite-plugin-es-toolkit for Vite, showing strong ecosystem support for production adoption.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;es-toolkit empowers developers to simplify code, accelerate development, and maintain high standards of reliability and performance across any JavaScript environment.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Tools &amp;amp; Releases You Should Know About&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://docs.swmansion.com/react-native-reanimated/" rel="noopener noreferrer"&gt;&lt;strong&gt;React Native Reanimated 4.0&lt;/strong&gt;&lt;/a&gt; ushers in a major rearchitecture that delivers lightning-fast, silky-smooth animations for mobile apps. It’s fully compatible with the latest React Native releases, making it easier than ever to craft complex layout animations and even bring these capabilities to the web.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://oxc.rs/docs/guide/usage/linter" rel="noopener noreferrer"&gt;&lt;strong&gt;Oxlint 1.8&lt;/strong&gt;&lt;/a&gt; stands out as a new generation, high-speed linter developed in Rust, offering rapid one-pass linting for JavaScript and TypeScript. It exceeds ESLint in performance and integrates easily into development pipelines.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://jasmine.github.io/" rel="noopener noreferrer"&gt;&lt;strong&gt;Jasmine 5.9&lt;/strong&gt;&lt;/a&gt; continues to be a trusted staple for JavaScript testing, elevating reliability for both CI/CD workflows and browser or Node.js environments. With Jasmine, teams can feel confident about rigorous automated testing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.npmjs.com/package/npq" rel="noopener noreferrer"&gt;&lt;strong&gt;npq&lt;/strong&gt;&lt;/a&gt; further enhances your package management workflow by automatically scanning for vulnerabilities with Snyk before any npm package is installed. This proactive security ensures that only safe dependencies are added to your project, reducing the risk of introducing known issues.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://apexcharts.com/" rel="noopener noreferrer"&gt;&lt;strong&gt;ApexCharts 5.3&lt;/strong&gt;&lt;/a&gt; equips developers with powerful tools to create interactive, visually appealing JavaScript data charts for the web. The latest version adds features that streamline both customization and responsiveness, enabling sophisticated data visualizations with less effort.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://vue-multiselect.js.org/" rel="noopener noreferrer"&gt;&lt;strong&gt;vue-multiselect 3.3&lt;/strong&gt;&lt;/a&gt; is purpose-built for Vue 3 applications, delivering a robust and flexible select and tagging component. It supports advanced data structures, complex selection logic, and asynchronous loading for large datasets.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://bun.com/" rel="noopener noreferrer"&gt;&lt;strong&gt;Bun v1.2.19&lt;/strong&gt;&lt;/a&gt; continues to make waves as an all-in-one JavaScript runtime, delivering major speed improvements, reliable dependency management, and powerful CLI tools to supercharge modern development.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;And that's it for the forty-fifth issue of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;", brought to you by &lt;a href="https://jam.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;jam.dev&lt;/strong&gt;&lt;/a&gt;—the tool that makes it impossible for your team to send you bad bug reports.&lt;/p&gt;

&lt;p&gt;Feel free to share this newsletter with a fellow developer, and make sure you're following for more weekly updates.&lt;/p&gt;

&lt;p&gt;Until next time, happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Kimi K2 is the BEST coding agent, Next.js 16 sneak peek, Nuxt 4.0 is here, and more</title>
      <dc:creator>This Week In JavaScript</dc:creator>
      <pubDate>Sun, 20 Jul 2025 17:00:00 +0000</pubDate>
      <link>https://dev.to/thisweekinjavascript/kimi-k2-is-the-best-coding-agent-nextjs-16-sneak-peek-nuxt-40-is-here-and-more-22fm</link>
      <guid>https://dev.to/thisweekinjavascript/kimi-k2-is-the-best-coding-agent-nextjs-16-sneak-peek-nuxt-40-is-here-and-more-22fm</guid>
      <description>&lt;p&gt;Hello JavaScript Enthusiasts!&lt;/p&gt;

&lt;p&gt;Welcome to a new edition of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;"!&lt;/p&gt;

&lt;p&gt;This week, Moonshot AI’s Kimi K2 arrives as a powerful open-weight coding model, Next.js 15.4 makes Turbopack production-ready, Vue 3.6 alpha introduces Vapor Mode for high-performance apps, and Nuxt 4.0 brings big improvements to the developer experience, and more.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Kimi K2 is the BEST coding agent&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Could models like Claude, GPT-4, or Gemini Pro be losing their top spot? &lt;a href="https://moonshotai.github.io/Kimi-K2/" rel="noopener noreferrer"&gt;&lt;strong&gt;Moonshot AI’s Kimi K2&lt;/strong&gt;&lt;/a&gt; is making waves across the developer community, offering open access, strong benchmarks, and real-world coding power—right when it matters most.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Agentic Mastery Beyond Code Suggestions:&lt;/strong&gt; Kimi K2 moves far beyond being just another code-completion AI. It executes, tests, debugs, and iteratively improves full software projects—demonstrated by automating complex tasks like developing Minecraft mods in JavaScript. It can handle rendering, run and debug multiple test cases, capture logs on failure, and refine solutions until all tests succeed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Built for Scale and Depth:&lt;/strong&gt; With a Mixture-of-Experts architecture (32 billion activated parameters from a trillion total), Kimi K2 processes entire repositories thanks to a 128,000-token context window. This enables deep, cross-file project reasoning and robust documentation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Benchmark-Leading Results:&lt;/strong&gt; Kimi K2 achieves 65.8% on SWE-Bench and leads LiveCodeBench v6, showcasing its capabilities in end-to-end coding, debugging, and realistic project workflows.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Open Access and Developer Control&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Ready for Any Workflow:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Kimi-K2-Base:&lt;/strong&gt; Start with a model designed for custom research, innovation, and fine-tuning in-house solutions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Kimi-K2-Instruct:&lt;/strong&gt; Unlock a production-ready chatbot or agent—perfect for IDE, CI, or documentation automation.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;&lt;p&gt;&lt;strong&gt;Developer-Friendly Deployment:&lt;/strong&gt; Everything you need—deployment tools and open inference code—are available on &lt;a href="https://github.com/MoonshotAI/Kimi-K2?tab=readme-ov-file#4-deployment" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;, so you can start building advanced, transparent AI workflows without vendor lock-in.&lt;/p&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;Kimi K2 is helping developers not only generate code but also manage advanced automation, debug large projects, and streamline end-to-end engineering tasks—all within an accessible open-source framework.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Next.js 15.4 brings a sneak peek to Next.js 16&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The&lt;a href="https://nextjs.org/blog/next-15-4" rel="noopener noreferrer"&gt; &lt;strong&gt;Next.js 15.4 release&lt;/strong&gt;&lt;/a&gt; is a game-changer for developer productivity. The headline feature is that Turbopack is now production-ready. Developers can enable it with next build --turbopack to see a dramatic reduction in build times.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Production-Proven Speed:&lt;/strong&gt; Turbopack is officially powering major sites like vercel.com, passing over 8,000 integration tests and delivering tangible reductions in build and deploy times. For developers working on large codebases or maintaining rapid CI/CD cycles, this means less waiting, more iterating, and shipping features faster.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Developer-First Improvements:&lt;/strong&gt; The release isn’t just about raw speed—quality-of-life fixes are everywhere. With smarter server-side path generation, enhanced error handling, the new &lt;code&gt;onInvalidate&lt;/code&gt; option for router prefetch, and detailed debug tooling, routine workflows become smoother and less error-prone. Expect smaller server bundles—and a more robust App Router—out of the box.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Glance at the Future—Next.js 16:&lt;/strong&gt; The roadmap lights up with features like unified Cache Components (beta) to streamline data-fetching and caching logic, stable Node.js Middleware for consistent routing and security, and optimized client-side navigation. Enhanced DevTools are coming too, prepping Next.js for AI-powered debugging and even more developer clarity.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Zero-Hassle Upgrades:&lt;/strong&gt; Migration headaches are minimized with automated commands (like &lt;code&gt;npx @next/codemod@canary upgrade latest&lt;/code&gt;) and thoughtful deprecation guidance for Node.js 18 and AMP. Adopters of prior Turbopack alphas will immediately notice the leap in stability and performance.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Developers have been waiting for a practical, reliable performance leap—and with Turbopack finally production-ready in Next.js 15.4, that leap is here. It’s the perfect moment to revisit your stack and experience what modern React builds should feel like.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Vue 3.6 Alpha: Optimize Performance with Vapor Mode&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Imagine boosting a single Vue component’s speed—no full rewrite, no confusing migration, just pure, surgical performance when you need it most. That’s exactly what &lt;a href="https://github.com/vuejs/core/releases/tag/v3.6.0-alpha.1" rel="noopener noreferrer"&gt;&lt;strong&gt;Vue 3.6.0-alpha.1&lt;/strong&gt;&lt;/a&gt; delivers with its new Vapor Mode, now shaking up how devs approach frontend bottlenecks.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;What makes Vapor Mode exciting?&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Drop the V-DOM baggage:&lt;/strong&gt; With Vapor Mode, your templates are compiled straight into super-efficient vanilla JavaScript that updates the DOM directly—no diffing or middlemen, just instant UI updates.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Instant optimization, zero churn: Need a lightning-fast data grid or real-time chart? Add&lt;/strong&gt; &lt;code&gt;&amp;lt;script setup vapor&amp;gt;&lt;/code&gt; &lt;strong&gt;to your SFC, and that’s it. No more spinning your wheels trying to squeeze out performance gains across your whole app.&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Mix and match: No need to bet the farm! Use Vapor Mode on just those heavy components, while the rest of your project keeps humming along in standard Vue. The&lt;/strong&gt; &lt;code&gt;vaporInteropPlugin&lt;/code&gt; &lt;strong&gt;means you get the best of both worlds—legacy and futuristic, side by side.&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Less code, more speed:&lt;/strong&gt; Benchmarks show near-native DOM speeds and smaller bundles—the stuff frontend dreams are made of.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Smart, modern reactivity:&lt;/strong&gt; Under the hood, the core’s been upgraded for leaner computed properties and snappier state management, so even your non-Vapor code benefits.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;A real migration path:&lt;/strong&gt; Vapor Mode isn’t for everything—yet. It’s perfect for new projects, perf-sensitive features, or greenfield micro frontends. Plus, features like SSR hydration and transitions are on the way.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;How do you try it out?&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Just add the &lt;code&gt;vapor&lt;/code&gt; option to your &lt;code&gt;&amp;lt;script setup&amp;gt;&lt;/code&gt; block and build as usual. Then watch as that sluggish component turns into a speed demon—no codebase rewiring or framework gymnastics required.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With Vapor Mode, Vue gives developers direct control over where performance matters most—unlocking a whole new way to build fast, efficient interfaces with the tools you already know and love. If you’re ready to see how “fast” Vue can really be, it’s never been easier to jump in and push your next UI feature to new heights.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Nuxt 4.0: A Major Overhaul for Developer Experience&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://nuxt.com/blog/v4" rel="noopener noreferrer"&gt;&lt;strong&gt;Nuxt 4.0&lt;/strong&gt;&lt;/a&gt; is here after a year of real-world testing, focused on stability and making setup, coding, and upgrades more intuitive for developers. It introduces carefully considered changes aimed at cleaner workflows and easier project maintenance, with backwards compatibility and a smooth upgrade path.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Cleaner Project Organization&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;The biggest visible change:&lt;/strong&gt; your app now lives in an &lt;code&gt;app/&lt;/code&gt; directory by default. This makes project structure clearer, file watchers faster, and helps IDEs better recognize what’s client, server, or shared code.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Don’t want to migrate? No problem&lt;/strong&gt;—Nuxt 4 detects old layouts and works as before.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Redesigned Starter Templates, Error, Home, and Loader Pages&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Based on &lt;a href="https://github.com/nuxt/nuxt/pull/27843" rel="noopener noreferrer"&gt;PR #27843&lt;/a&gt;, Nuxt 4 introduces all-new, modern UI branding for its starter templates—including a refreshed home page, a more accessible layout, a polished error page (&lt;code&gt;error.vue&lt;/code&gt; at the project root), and a visually improved loader page. There’s a new logo, better focus outlines, a well-structured &lt;code&gt;&amp;lt;main&amp;gt;&lt;/code&gt; for accessibility, and updated favicon and title defaults for SEO and professionalism.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;These updates mean every new project starts with a cleaner look, improved accessibility, and an easier base to build on for teams and solo developers alike.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Smarter Data Fetching by Default&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;useAsyncData&lt;/code&gt; and &lt;code&gt;useFetch&lt;/code&gt; are now more intelligent: components using the same key share data automatically, reactively refetch when keys change, and clean up after themselves. That means less boilerplate and fewer duplicated network requests out of the box.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;More flexibility is coming to the data layer as development continues.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Enhanced TypeScript Experience&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Nuxt 4 separates TypeScript projects for app, server, and shared code, providing more accurate type inference, less confusion across code contexts, and smoother, more reliable editor support.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Your root &lt;code&gt;tsconfig.json&lt;/code&gt; is now set up for you, and TypeScript integration is more robust across the board.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Faster CLI &amp;amp; Dev Server&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;The CLI sees upgrades with socket-based communication, native file watching, and v8 compile cache reuse—resulting in faster cold starts and less resource usage, especially on Windows.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Upgrade Path &amp;amp; Migration Tools&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Upgrading is straightforward. Use &lt;code&gt;npx nuxt upgrade --dedupe&lt;/code&gt; for a safe update and deduped lockfile, or the Codemod migration tool to automate many common steps.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Detailed guides cover major breaking changes and help you fix any module or type errors.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Looking Ahead&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Nuxt 3 will continue to get maintenance through January 2026.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Next up: Nuxt 5 with Nitro v3, h3 v2, the new Vite Environment API, and other developer-focused enhancements—plus SSR streaming, built-in fetch caching, multi-app support, and more in the pipeline.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Nuxt 4.0 isn’t about hype—it’s about everyday developer wins: faster starts, simpler structure, smarter defaults, and even better TypeScript. If you want a modern, production-grade Vue framework, this is a great time to upgrade.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Tools &amp;amp; Releases You Should Know About&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://tiptap.dev/docs/resources/whats-new" rel="noopener noreferrer"&gt;&lt;strong&gt;Tiptap v3&lt;/strong&gt;&lt;/a&gt;&lt;strong&gt;:&lt;/strong&gt; The popular headless rich text editor framework gets a major v3 update focused on developer experience. It now supports unmounting and remounting editors (ideal for dynamic UIs), custom component views for text segments with 'Markviews', and an SSR mode, making it easier than ever to build powerful editing experiences.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://hyperfetch.bettertyped.com/" rel="noopener noreferrer"&gt;&lt;strong&gt;Hyper Fetch&lt;/strong&gt;&lt;/a&gt;&lt;strong&gt;:&lt;/strong&gt; A powerful, framework-agnostic data-fetching library inspired by Axios and TanStack Query. It offers a type-safe API for both browser and server, with advanced features like request lifecycle management, real-time communication, progress tracking, and even code generation from OpenAPI specs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://astro.build/blog/astro-5120/" rel="noopener noreferrer"&gt;&lt;strong&gt;Astro 5.12&lt;/strong&gt;&lt;/a&gt;&lt;strong&gt;:&lt;/strong&gt; Astro continues to be the go-to framework for content-heavy sites that need to be incredibly fast. This release further improves its content collections API, making it easier to build blogs, portfolios, and marketing sites. Its "island architecture" is perfect for building internal dashboards or tools, like an AI-powered code review interface.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://github.com/dahlia/upyo" rel="noopener noreferrer"&gt;&lt;strong&gt;Upyo&lt;/strong&gt;&lt;/a&gt;&lt;strong&gt;:&lt;/strong&gt; A simple, cross-runtime email library that gives you a unified, type-safe API for sending emails. It supports both traditional SMTP and modern HTTP-based providers like SendGrid or Amazon SES, simplifying a common backend task.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://github.com/openpgpjs/openpgpjs/releases/tag/v6.2.0" rel="noopener noreferrer"&gt;&lt;strong&gt;OpenPGP.js 6.2&lt;/strong&gt;&lt;/a&gt;&lt;strong&gt;:&lt;/strong&gt; Adding client-side encryption to your web app can be complex, but OpenPGP.js provides a robust, open-source solution. This version introduces faster key generation and improved compatibility with modern browser APIs for secure, end-to-end encrypted features.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;And that's it for the forty-fourth issue of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;", brought to you by &lt;a href="https://jam.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;jam.dev&lt;/strong&gt;&lt;/a&gt;—the tool that makes it impossible for your team to send you bad bug reports.&lt;/p&gt;

&lt;p&gt;Feel free to share this newsletter with a fellow developer, and make sure you're following for more weekly updates.&lt;/p&gt;

&lt;p&gt;Until next time, happy coding!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Grok 4's coding powers, TypeScript 5.9 Beta, the BEST Postgres provider, Vercel acquires NuxtLabs, and more</title>
      <dc:creator>This Week In JavaScript</dc:creator>
      <pubDate>Sun, 13 Jul 2025 17:28:23 +0000</pubDate>
      <link>https://dev.to/thisweekinjavascript/grok-4s-coding-powers-typescript-59-beta-the-best-postgres-provider-vercel-acquires-nuxtlabs-2bai</link>
      <guid>https://dev.to/thisweekinjavascript/grok-4s-coding-powers-typescript-59-beta-the-best-postgres-provider-vercel-acquires-nuxtlabs-2bai</guid>
      <description>&lt;p&gt;Hello JavaScript Enthusiasts!&lt;/p&gt;

&lt;p&gt;Welcome to a new edition of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;"!&lt;/p&gt;

&lt;p&gt;This week, Grok 4 steps up as a coding assistant for web developers, PlanetScale launches its blazing‑fast Postgres platform, Vercel welcomes NuxtLabs into the fold, and TypeScript 5.9 Beta brings deferred module evaluation, and more.&lt;/p&gt;

&lt;p&gt;Plus, we’ve got some powerful new+updated tools for your development workflow!&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Is Grok 4 a Good Coding Assistant?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;xAI’s &lt;a href="https://x.ai/news/grok-4" rel="noopener noreferrer"&gt;&lt;strong&gt;Grok 4&lt;/strong&gt;&lt;/a&gt; isn’t just a benchmark star, it’s showing real promise as a coding assistant built for ambitious developer workflows. While the dedicated Grok 4 Coding Agent is still in development, the core model already delivers features that rival and, in some cases, surpass established tools.&lt;/p&gt;

&lt;p&gt;With a 128K token context window (256K via API), native web search, and an integrated code execution sandbox, Grok 4 can handle entire codebases, generate structured multi-file solutions, and even run your code to identify bugs or test logic.&lt;/p&gt;

&lt;p&gt;It already excels at:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Code generation &amp;amp; scaffolding:&lt;/strong&gt; From React components to Express routes, Grok 4 produces runnable, modular code. Thanks to its huge context window, it understands cross-file dependencies and refines outputs through iterative feedback, making it ideal for large, modern web projects.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Debugging with tool use:&lt;/strong&gt; Grok doesn’t just read your code, it runs it. It reproduces bugs in a sandbox, looks up the latest Stack Overflow or GitHub issues via live search, and suggests clear, actionable fixes. While its deep reasoning sometimes adds a bit of latency, the trade-off often results in more reliable solutions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Code explanation &amp;amp; documentation:&lt;/strong&gt; Paste in thousands of lines of legacy code and get back plain-English summaries, line-by-line breakdowns, or high-level overviews. Its real-time web access means it can explain even the newest framework features, versions, and APIs accurately.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Advanced problem-solving:&lt;/strong&gt; With “Heavy” mode (not publicly available yet), Grok 4 uses multi-agent reasoning. Think of it as a team of AI reviewers debating and validating a solution. This gives it an edge in algorithmic problems, architecture planning, and performance tuning. It is also the first model to break 15% on ARC-AGI 2.0, a benchmark known for testing true general intelligence.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Compared to GitHub Copilot’s speed or ChatGPT’s versatility, Grok 4 trades a bit of polish for raw intelligence and autonomy. It’s not flawless. Some early users have noted bugs and slower responses, but it’s a powerful foundation. For developers who want an AI that can reason through messy bugs, understand full-stack apps, and adapt to fast-evolving tech, Grok 4 is already a strong start, and the coding agent hasn’t even launched yet.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;PlanetScale for Postgres: the world’s fastest Postgres hosting platform&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;PlanetScale’s &lt;a href="https://planetscale.com/blog/planetscale-for-postgres" rel="noopener noreferrer"&gt;&lt;strong&gt;private preview of Postgres&lt;/strong&gt;&lt;/a&gt; hosting brings their Metal‑powered performance and rock‑solid reliability to the Postgres ecosystem.&lt;/p&gt;

&lt;p&gt;Highlights include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Benchmark leadership:&lt;/strong&gt; Outperforms Aurora, AlloyDB, Neon, Supabase, and more, even when competitors run on 2× resources.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;High availability &amp;amp; uptime:&lt;/strong&gt; Automatic failovers, query buffering, connection pooling via PSBouncer, and zero‑downtime version upgrades.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Local NVMe SSDs:&lt;/strong&gt; Locally attached storage delivers unrivaled performance/cost ratios for relational workloads.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Nova (Vitess for Postgres):&lt;/strong&gt; A from‑scratch sharding solution inspired by Vitess, currently in development with early access for high‑scale users.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Built on real Postgres v17 and supporting imports from v13+, PlanetScale for Postgres combines enterprise‑grade security, mature sharding, and the “boring” engineering that keeps your apps running.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Vercel Acquires NuxtLabs&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://vercel.com/blog/nuxtlabs-joins-vercel" rel="noopener noreferrer"&gt;&lt;strong&gt;NuxtLabs joins Vercel&lt;/strong&gt;&lt;/a&gt; to fuel the future of the Nuxt ecosystem. Under MIT license and community‑driven governance, Nuxt and Nitro will continue evolving with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Nuxt UI v4 free‑for‑all:&lt;/strong&gt; All Pro components and Figma kits open‑sourced.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Self‑hostable Nuxt Studio:&lt;/strong&gt; Edit Nuxt Content sites with a first‑class admin interface.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;NuxtHub agnosticism:&lt;/strong&gt; Seamless integration with Vercel Marketplace add‑ons like Postgres and Redis.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Vercel’s track record, Next.js, Turborepo, Svelte, shadcn, means Nuxt’s roadmap, transparency, and community focus only get stronger, without sacrificing independence or open governance.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;TypeScript 5.9 Beta&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-9-beta/" rel="noopener noreferrer"&gt;&lt;strong&gt;TypeScript 5.9 Beta&lt;/strong&gt;&lt;/a&gt; brings features designed to streamline setup, boost performance, and align with upcoming ECMAScript specs:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Streamlined tsc --init&lt;/strong&gt; A minimal, prescriptive tsconfig.json now defaults to &lt;code&gt;"module": "nodenext", "target": "esnext", jsx: "react‑jsx"&lt;/code&gt;, and an empty &lt;code&gt;types&lt;/code&gt; array, reducing friction and encouraging modern best practices.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;import defer&lt;/strong&gt; Support for the deferred module evaluation proposal via &lt;code&gt;import defer * as ns from "./mod.js"&lt;/code&gt;. Modules initialize only when you first access a namespace property, improving startup performance and controlling side‑effects.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Stable --module node20&lt;/strong&gt; A fixed Node.js v20 resolution strategy (&lt;code&gt;--module node20&lt;/code&gt;) models Node 20 behavior predictably, unlike the evolving &lt;code&gt;nodenext&lt;/code&gt;, and implies &lt;code&gt;--target es2023&lt;/code&gt; by default.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Enhanced editor &amp;amp; performance&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Smarter hovers:&lt;/strong&gt; Interactive “expandable” Quick Info and larger default hover lengths, no more truncated type details.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Type‑checking optimizations:&lt;/strong&gt; Cached instantiations for mappers (faster Zod/tRPC checks) and leaner file existence checks, yielding up to an 11 % speed‑up in large codebases.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;TypeScript 5.9 refines the core developer experience while paving the way for next‑gen language features.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Tools &amp;amp; Releases You Should Know About&lt;/strong&gt;
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://foresightjs.com/" rel="noopener noreferrer"&gt;&lt;strong&gt;Foresight.js&lt;/strong&gt;&lt;/a&gt;
&lt;/h4&gt;

&lt;p&gt;Foresight.js hooks into standard mouse and keyboard events to build a real‑time model of user intent. By analyzing cursor velocity, hover duration, scroll position, and key navigation patterns, it can anticipate which link, button, or section a user is heading toward. Developers can then:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Prefetch critical assets (images, scripts, API calls) just before they’re needed, slashing load times and perceived latency.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Warm up heavy modules (e.g. code-splitting bundles or WebAssembly) in the background, so expensive downloads complete before the user clicks.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Trigger early analytics or personalization workflows, enabling real‑time A/B tests or custom UI tweaks without delay.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With its lightweight core and easy API, Foresight.predict(element).then(…), you can retrofit Foresight.js into existing projects or integrate deeply into single‑page apps to make every interaction feel instantaneous.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://driverjs.com/" rel="noopener noreferrer"&gt;&lt;strong&gt;Driver.js&lt;/strong&gt;&lt;/a&gt;
&lt;/h4&gt;

&lt;p&gt;Onboarding and feature discovery become frictionless with Driver.js. This library lets you walk users step‑by‑step through your UI, highlighting elements, dimming the background, and displaying custom tooltips. Key benefits for developers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;No heavy dependencies, just include the Driver.js script and CSS.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Declarative tour definitions, an array of steps specifying target selectors, popover text, and positioning.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Event hooks for start, next, prev, and complete: integrate analytics, consent checks, or dynamic steps based on user state.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Theming &amp;amp; styling, override default CSS or supply custom templates for a branded look.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Whether you’re launching a new dashboard feature or guiding new users through form workflows, Driver.js ensures your first‑time user experience is clear, concise, and code‑driven.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://www.npmjs.com/package/jsonrepair" rel="noopener noreferrer"&gt;&lt;strong&gt;JSONRepair&lt;/strong&gt;&lt;/a&gt;
&lt;/h4&gt;

&lt;p&gt;When third‑party APIs, logs, or legacy systems produce malformed JSON, pipelines can grind to a halt. JSONRepair solves this by:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Automatically detecting common syntax errors, missing commas, stray trailing characters, unquoted keys, mismatched brackets.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Applying heuristic corrections while preserving as much original content as possible.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Offering both CLI and programmatic interfaces, so you can plug it into build scripts (jsonrepair input.json &amp;gt; fixed.json) or call repair(jsonString) in Node.js.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Reporting a summary of fixes applied, helping you trace and diagnose recurring data issues.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For developers building ETL jobs, log parsers, or front‑end apps that fetch unpredictable data, JSONRepair eliminates manual debugging and keeps data flowing smoothly.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://x.com/jarredsumner/status/1943492457506697482" rel="noopener noreferrer"&gt;&lt;strong&gt;Claude Code in a Single Executable&lt;/strong&gt;&lt;/a&gt;
&lt;/h4&gt;

&lt;p&gt;Installing and managing Node versions, Bun releases, and native addons can derail AI coding workflows. Josh Sumner’s bundled executable changes that by:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Packaging Claude Code, Node.js, Bun, and all native modules into one self‑contained binary.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Ensuring consistent behavior across Windows, macOS, and Linux, no more “it works on my machine” headaches.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Supporting direct execution of JavaScript and TypeScript code with AI assistance, without extra script or dependency setup.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Enabling offline or air‑gapped usage, since all runtime components are embedded.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Developers can drop the binary into a project, run claude-code start, and immediately interact with Claude’s code generation, refactoring, and debugging features, accelerating prototyping and minimizing setup friction.&lt;/p&gt;




&lt;p&gt;And that's it for the forty-third issue of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;", brought to you by &lt;a href="https://jam.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;jam.dev&lt;/strong&gt;&lt;/a&gt;—the tool that makes it impossible for your team to send you bad bug reports.&lt;/p&gt;

&lt;p&gt;Feel free to share this newsletter with a fellow developer, and make sure you're following for more weekly updates.&lt;/p&gt;

&lt;p&gt;Until next time, happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Deno 2.4 brings back deno bundle, GitHub Copilot Chat is now open source, Minecraft built in 100% CSS, and more</title>
      <dc:creator>This Week In JavaScript</dc:creator>
      <pubDate>Sun, 06 Jul 2025 17:00:00 +0000</pubDate>
      <link>https://dev.to/thisweekinjavascript/deno-24-brings-back-deno-bundle-github-copilot-chat-is-now-open-source-minecraft-built-in-100-1o8d</link>
      <guid>https://dev.to/thisweekinjavascript/deno-24-brings-back-deno-bundle-github-copilot-chat-is-now-open-source-minecraft-built-in-100-1o8d</guid>
      <description>&lt;p&gt;Hello JavaScript Enthusiasts!&lt;/p&gt;

&lt;p&gt;Welcome to a new edition of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;"!&lt;/p&gt;

&lt;p&gt;This week, deno bundle made an insane comeback, GitHub Copilot Chat gets open-sourced, Someone made Minecraft with CSS, and PNG receives updates too.&lt;/p&gt;

&lt;p&gt;Plus, we’ve got some powerful new+updated tools for your development workflow!&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Deno 2.4: deno bundle is Back&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://deno.com/blog/v2.4" rel="noopener noreferrer"&gt;&lt;strong&gt;Deno 2.4 reintroduces the long-requested deno bundle command&lt;/strong&gt;&lt;/a&gt;, enabling single-file JavaScript or TypeScript bundles for both server and browser environments. With support for npm and JSR dependencies, plus automatic tree-shaking and minification via esbuild, this marks a major leap forward for Deno’s developer experience.&lt;/p&gt;

&lt;p&gt;Previously deprecated due to complexity, deno bundle now uses esbuild under the hood and is here to stay. Future plans include exposing a runtime bundling API and plugin support for customizable builds , making it more flexible than ever.&lt;/p&gt;

&lt;p&gt;Beyond bundling, Deno 2.4 introduces several notable features that enhance both DX and spec-alignment:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Importing text and binary files&lt;/strong&gt; directly into modules, useful for assets like markdown, icons, or binary blobs. Instead of loading assets at runtime, developers can now import them statically in a spec-friendly way, aligning with the direction of the Import Attributes proposal.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Stable OpenTelemetry support&lt;/strong&gt; is now built into Deno, enabling structured observability without extra setup.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A new &lt;code&gt;--preload&lt;/code&gt; flag allows you to modify the Deno runtime environment before executing scripts, useful for injecting setup code or instrumentation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;deno update&lt;/code&gt; simplifies dependency management by keeping everything fresh with one command.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Script coverage can now be collected via &lt;code&gt;deno run --coverage&lt;/code&gt;, making it easier to track test quality and identify untested logic.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Additional changes include:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Support for &lt;code&gt;DENO_COMPAT=1&lt;/code&gt; mode for better Node compatibility&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Conditional exports in &lt;code&gt;package.json&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;XML and SVG support in &lt;code&gt;deno fmt&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Expanded support for local npm packages&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Better &lt;code&gt;tsconfig.json&lt;/code&gt; handling&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Simplified Node global handling&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Improvements to the Language Server Protocol (LSP)&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Deno 2.4 is one of the most substantial releases yet, tightening the runtime's alignment with modern standards while improving bundling, observability, and ergonomics across the board.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;GitHub Copilot Chat Is Now Open Source in VS Code&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://code.visualstudio.com/blogs/2025/06/30/openSourceAIEditorFirstMilestone" rel="noopener noreferrer"&gt;&lt;strong&gt;Microsoft has officially open-sourced the GitHub Copilot Chat extension for Visual Studio Code&lt;/strong&gt;&lt;/a&gt; under the MIT license, marking its first major milestone toward building an open-source AI-powered code editor. This move opens up a fully transparent look into how Microsoft implements agent-based AI coding inside VS Code.&lt;/p&gt;

&lt;p&gt;You can now explore how context is passed to LLMs, how system prompts are structured, and how AI interactions are embedded into the editor interface , directly in the public repo. Everything from the telemetry capture to the prompt engineering logic is visible and modifiable.&lt;/p&gt;

&lt;p&gt;The release is part of a broader effort to promote community-driven innovation in AI tooling. By open-sourcing Copilot Chat, Microsoft hopes to replicate the success of VS Code’s open model while advancing trust, extensibility, and insight into AI integration.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Developers can&lt;/strong&gt;:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Study how agent mode works under the hood&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Learn from Microsoft’s implementation of multi-step task handling and chat-based programming&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Contribute directly to the extension or file issues&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use Copilot’s own chat capabilities to navigate and understand the codebase itself&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Long term, Microsoft aims to integrate the Copilot Chat extension directly into VS Code core. While the original Copilot inline-completion engine remains closed source for now, Microsoft has stated that future iterations of that functionality may also move to the open-source Copilot Chat foundation.&lt;/p&gt;

&lt;p&gt;This release supports full chat interaction inside the editor, from multi-turn conversations to AI-driven edits, method refactoring, and error handling, across dozens of languages like Python, JavaScript, Go, and C++.&lt;/p&gt;

&lt;p&gt;With full integration into the VS Code UI, Copilot Chat updates alongside every VS Code release. To access the latest capabilities, users must stay on the most recent VS Code version.&lt;/p&gt;

&lt;p&gt;This open-sourcing step strengthens transparency, improves community trust, and gives developers fine-grained control over how AI tools are embedded into their workflows. Microsoft’s commitment is clear: AI-first development should be open by design.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Minecraft... in Pure CSS?!&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://benjaminaster.com/css-minecraft/" rel="noopener noreferrer"&gt;&lt;strong&gt;Yes, it’s real: someone recreated Minecraft using only HTML and CSS&lt;/strong&gt;&lt;/a&gt;, no JavaScript, no WebGL. You can build blocks, break them, rotate the world, and explore, all with just CSS selectors, radios, and some wild creativity.&lt;/p&gt;

&lt;p&gt;This project pushes CSS to its absolute limits, using a mix of &lt;code&gt;:has()&lt;/code&gt;, radio inputs, and label mechanics to simulate interactive 3D state changes , essentially turning the browser into a voxel engine using pure style rules.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;At its core:&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The game uses &lt;strong&gt;over 35,000&lt;/strong&gt; &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt; &lt;strong&gt;elements&lt;/strong&gt; and nearly &lt;strong&gt;6,000&lt;/strong&gt; &lt;code&gt;&amp;lt;input type="radio"&amp;gt;&lt;/code&gt; &lt;strong&gt;elements&lt;/strong&gt; to store state.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Each cube in the 3D grid is represented using combinations of these inputs, allowing CSS to "track" block types and positions.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Changing blocks works by selecting different radio inputs. The associated label targets use for attributes to update visible styles, changing textures or removing blocks based on which input is checked.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Rendering and interactivity are handled through&lt;/strong&gt;:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;CSS-only animations&lt;/strong&gt; that run on interaction using the &lt;code&gt;:active&lt;/code&gt; and &lt;code&gt;animation-play-state&lt;/code&gt; trick. Holding a movement button (like "up" or "down") triggers smooth transforms and rotates the world.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;3D transforms and perspectives&lt;/strong&gt;, including pixelated rendering of textures for that authentic Minecraft look.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A precompiled &lt;strong&gt;46,000-line HTML file&lt;/strong&gt; with just &lt;strong&gt;480 lines of actual CSS&lt;/strong&gt; (generated via SCSS templates) orchestrates the entire experience.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;What makes it possible:&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Clever use of &lt;code&gt;:has()&lt;/code&gt; and &lt;code&gt;:checked&lt;/code&gt; selectors allows input states to trigger DOM changes without JavaScript.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;image-rendering: pixelated&lt;/code&gt; ensures clean visual fidelity for block textures.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Layered container elements track perspective and axis-based movement in 3D.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s not just a visual demo, it’s &lt;strong&gt;fully interactive&lt;/strong&gt;. You can dig, place blocks, rotate, and explore a miniature CSS world. While not built for production or scalability, the engineering behind it is astonishing.&lt;/p&gt;

&lt;p&gt;This is a stunning example of how far native web technologies have come , and how much is possible when you're willing to explore the boundaries of CSS.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;PNG Gets Its First Major Update in Over 20 Years&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.programmax.net/articles/png-is-back/" rel="noopener noreferrer"&gt;&lt;strong&gt;The PNG image format just received its first major spec update in two decades&lt;/strong&gt;&lt;/a&gt;, and it’s a big one. With contributions from Adobe, Apple, Google, the BBC, W3C, and more, PNG is now officially modern again, ready to compete with cutting-edge image formats in HDR workflows, animation, and metadata.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;So what’s new?&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;True HDR Support&lt;/strong&gt; PNG now supports High Dynamic Range color with just 4 extra bytes per image (plus chunk overhead). This brings vivid, wide-gamut color support to a format previously limited to SDR , and it’s designed to be future-proof. The new color encoding is well documented and already supported in major browsers and image tools.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Animated PNGs (APNGs) Are Now Official&lt;/strong&gt; Long supported unofficially in Firefox and later Chrome and Safari, APNGs are now formally part of the spec. This codifies their place in modern image workflows and clears the way for broader adoption.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Embedded EXIF Metadata&lt;/strong&gt; PNG now supports embedding EXIF data , including GPS, copyright, and camera settings , just like JPEG. This improves compatibility across photo and archival applications, while reducing reliance on sidecar files.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Spec Cleanup and Clarifications&lt;/strong&gt; The update also includes long-needed housekeeping: clearer documentation, resolved errata, and harmonized interpretations of key features.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Why Now?&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;This update was sparked by a need for HDR support in subtitling workflows from the W3C Timed Text Working Group. What began as a narrow technical proposal gained rapid momentum, drawing interest from a who's-who of media and platform giants.&lt;/p&gt;

&lt;p&gt;Backers of the new spec include:\&lt;br&gt;
&lt;strong&gt;Adobe, Apple, BBC, Comcast/NBCUniversal, Google, MovieLabs, and W3C.&lt;/strong&gt;With this kind of institutional backing, PNG is not just updated , it’s accelerating.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Already Supported- The updated PNG spec is already implemented in:&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Browsers:&lt;/strong&gt; Chrome, Firefox, Safari&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Operating Systems:&lt;/strong&gt; iOS, macOS&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Tools:&lt;/strong&gt; Photoshop, DaVinci Resolve, Avid Media Composer&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Broadcast workflows are also adopting it. So the next time you see an HDR news ticker or sports graphic, there’s a good chance it’s running on this modernized PNG.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Tools &amp;amp; Releases You Should Know About&lt;/strong&gt;
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://rspack.rs/blog/announcing-1-4" rel="noopener noreferrer"&gt;&lt;strong&gt;Rspack 1.4&lt;/strong&gt;&lt;/a&gt;&lt;strong&gt;: High-Speed Web Bundling , Now in the Browser&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Rspack is a Rust-based web bundler designed to be a faster, drop-in replacement for Webpack.&lt;/p&gt;

&lt;p&gt;It compiles modern JavaScript, TypeScript, CSS, and other frontend assets with lightning speed, and is fully compatible with existing Webpack configs , making migration seamless for large codebases.&lt;/p&gt;

&lt;p&gt;Version 1.4 takes a bold step forward: Rspack can now run inside the browser, thanks to WebAssembly. This unlocks use cases like online code editors, playgrounds, and instant previews without server roundtrips. For teams building DX tools or educational platforms, Rspack’s new in-browser capabilities offer fast, portable builds where traditional tooling can’t reach.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://www.electronjs.org/blog/electron-37-0" rel="noopener noreferrer"&gt;&lt;strong&gt;Electron 37.0&lt;/strong&gt;&lt;/a&gt;&lt;strong&gt;: Build Cross-Platform Desktop Apps with Web Tech&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Electron is the go-to framework for building desktop apps using web technologies like HTML, CSS, and JavaScript. It packages Chromium and Node.js together, giving developers full control over UI and system-level features in a single codebase.&lt;/p&gt;

&lt;p&gt;Electron 37.0 includes the latest Chromium and Node updates, performance improvements, and better compatibility across operating systems. Whether you’re building productivity apps, developer tools, or internal utilities, Electron lets you reuse your frontend skills to ship native-feeling apps across macOS, Windows, and Linux.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://eslint.org/blog/2025/07/eslint-v9.30.1-released/" rel="noopener noreferrer"&gt;&lt;strong&gt;ESLint 9.30.1&lt;/strong&gt;&lt;/a&gt;&lt;strong&gt;: Cleaner Linting for TypeScript Imports&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;ESLint is the industry-standard linter for JavaScript and TypeScript projects, helping developers catch bugs early, enforce style guides, and maintain consistent code across teams.&lt;/p&gt;

&lt;p&gt;Version 9.30.1 is a patch release, but includes a notable fix for TypeScript users: the no-duplicate-imports rule now allows default and named type imports to coexist from the same module. This resolves a long-standing friction when using TypeScript with strict linting rules, and ensures cleaner, conflict-free import statements without workarounds.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://babeljs.io/blog/2025/06/30/7.28.0" rel="noopener noreferrer"&gt;&lt;strong&gt;Babel 7.28.0:&lt;/strong&gt;&lt;/a&gt; &lt;strong&gt;TypeScript Native, and Ready for the Future&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Babel is a widely-used JavaScript compiler that allows developers to use next-gen JavaScript features today by transpiling them to widely supported syntax. It’s essential for large codebases that want to stay modern without sacrificing browser compatibility.&lt;/p&gt;

&lt;p&gt;In version 7.28.0, Babel introduces native support for TypeScript config files (babel.config.ts and babel.config.mts), eliminating the need for additional tooling. It also enables ES2026’s explicit resource management by default (using using statements), supports the discard binding proposal (useful for ignoring values in destructuring), and adds a new sourceType option to better handle CommonJS modules.&lt;/p&gt;

&lt;p&gt;These upgrades make Babel more capable, ergonomic, and future-ready for modern JS projects, especially in hybrid codebases mixing ESM, CJS, and TypeScript.&lt;/p&gt;




&lt;p&gt;And that's it for the forty-second issue of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;", brought to you by &lt;a href="https://jam.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;jam.dev&lt;/strong&gt;&lt;/a&gt;—the tool that makes it impossible for your team to send you bad bug reports.&lt;/p&gt;

&lt;p&gt;Feel free to share this newsletter with a fellow developer, and make sure you're following for more weekly updates.&lt;/p&gt;

&lt;p&gt;Until next time, happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>9 new JavaScript Features from TC39, Angular's official AI prompting guide, Vite 7, and more</title>
      <dc:creator>This Week In JavaScript</dc:creator>
      <pubDate>Sun, 29 Jun 2025 17:00:00 +0000</pubDate>
      <link>https://dev.to/thisweekinjavascript/9-new-javascript-features-from-tc39-angulars-official-ai-prompting-guide-vite-7-and-more-1jp8</link>
      <guid>https://dev.to/thisweekinjavascript/9-new-javascript-features-from-tc39-angulars-official-ai-prompting-guide-vite-7-and-more-1jp8</guid>
      <description>&lt;p&gt;Hello JavaScript Enthusiasts!&lt;/p&gt;

&lt;p&gt;Welcome to a new edition of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;"!&lt;/p&gt;

&lt;p&gt;This week, we’re tracking the latest ECMAScript proposals in motion, looking at Angular’s plans to bring LLMs into the developer workflow, unpacking the long-awaited release of Vite 7.0, and exploring V8’s cutting-edge WebAssembly optimizations. Plus, we’ve got some powerful new tools for your development workflow!&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;TC39 Moves 9 JavaScript Advancements Across 4 Stages&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://deno.com/blog/updates-from-tc39" rel="noopener noreferrer"&gt;&lt;strong&gt;At the 108th TC39 meeting&lt;/strong&gt;&lt;/a&gt;, nine new proposals moved through the four official standardization stages — showing how fast JavaScript is evolving across performance, safety, and usability.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://deno.com/blog/updates-from-tc39#stage-1" rel="noopener noreferrer"&gt;Stage 1&lt;/a&gt; explores early ideas, &lt;a href="https://deno.com/blog/updates-from-tc39#stage-2" rel="noopener noreferrer"&gt;Stage 2&lt;/a&gt; defines their shape, &lt;a href="https://deno.com/blog/updates-from-tc39#stage-3" rel="noopener noreferrer"&gt;Stage 3&lt;/a&gt; signals implementation readiness, and &lt;a href="https://deno.com/blog/updates-from-tc39#advanced-to-stage-4" rel="noopener noreferrer"&gt;Stage 4&lt;/a&gt; finalizes them for the JavaScript standard.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Stage 4&lt;/strong&gt; now includes three finalized features. First is Explicit Resource Management, which introduces &lt;code&gt;using&lt;/code&gt; and &lt;code&gt;await using&lt;/code&gt;—declarations that automatically clean up resources like file handles or streams when their block ends. Inspired by patterns from C# and Python, this brings safer and more predictable memory handling to JavaScript. Alongside this, Array.fromAsync offers a clean way to collect async iterable values into an array by returning a promise, making asynchronous data handling more intuitive. Finally, Error.isError lets you reliably check if a value is truly an error object, even across realms or subclassed types—filling a long-standing gap in error-checking behavior. All three are already supported in Chrome 134, Node 22, and Deno 2+.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Stage 3&lt;/strong&gt; brings Immutable ArrayBuffer, a proposal that introduces two methods—&lt;code&gt;transferToImmutable()&lt;/code&gt; and &lt;code&gt;sliceToImmutable()&lt;/code&gt;—which allow binary data to be frozen and safely shared between threads or runtimes. Once a buffer is made immutable, it can’t be detached or modified, which helps prevent accidental changes and improves performance in scenarios like streaming, file writing, or HTTP responses.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Stage 2&lt;/strong&gt; focuses on predictability and precision. Random.Seeded lets developers create deterministic sequences of random values using a seed, solving long-standing issues in reproducible simulations, tests, and procedural content generation. Meanwhile, Number.prototype.clamp adds a simple and expressive way to restrict any number within a defined min and max range, avoiding the verbosity of &lt;code&gt;Math.min(Math.max(...))&lt;/code&gt; patterns.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Stage 1&lt;/strong&gt; introduces early drafts of three forward-looking ideas. Keep Trailing Zeros adds fine-grained control over how formatted numbers display trailing decimal places—useful in financial apps or when consistency matters. Comparisons proposes a standardized, cross-environment way to print JavaScript values, making test outputs and debugging logs more uniform. Lastly, the proposed &lt;em&gt;Random&lt;/em&gt; namespace would unify a range of utilities—like &lt;code&gt;Random.int, Random.sample, Random.shuffle&lt;/code&gt;, and more—into a consistent, safer API for generating random numbers and selecting data.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These updates signal a thoughtful evolution of JavaScript balancing power, safety, and simplicity while giving developers better tools to write cleaner, more predictable code.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;2. Angular’s Official AI Prompting Standards Are Here&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;As AI-generated code becomes more common, frameworks like Angular are stepping up to guide it in the right direction. Angular’s team has now introduced a &lt;a href="https://angular.dev/ai/develop-with-ai" rel="noopener noreferrer"&gt;&lt;strong&gt;dedicated set of LLM instructions, prompt templates, and context files&lt;/strong&gt;&lt;/a&gt; to help large language models generate code that actually follows Angular best practices.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;It starts with the basics: Angular now provides a system prompt that defines what good Angular code should look like. This includes TypeScript best practices like avoiding &lt;code&gt;any&lt;/code&gt;, using strict type checking, and preferring type inference. On the Angular side, the prompt encourages standalone components over NgModules, &lt;code&gt;NgOptimizedImage&lt;/code&gt; for image performance, and signals for local state management. Even in templates, native control flow constructs like &lt;code&gt;@if&lt;/code&gt;and &lt;code&gt;@for&lt;/code&gt;are recommended over their structural directive equivalents. There’s also a push to avoid common anti-patterns like &lt;code&gt;ngClas&lt;/code&gt;s and &lt;code&gt;ngStyle&lt;/code&gt;, instead using &lt;code&gt;class&lt;/code&gt; and &lt;code&gt;style&lt;/code&gt; bindings directly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Beyond prompts, Angular now supports &lt;em&gt;rules files&lt;/em&gt; tailored for specific editors and AI IDEs — including Copilot, Cursor, Firebase Studio, JetBrains IDEs, and even Windsurf. These rules help fine-tune LLM behavior inside your development environment by setting guardrails that align with Angular’s evolving standards.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;And to tie it all together, the Angular team is experimenting with &lt;code&gt;llms.txt&lt;/code&gt;, a proposed web standard designed to expose structured resources that LLMs can use to better understand a site or framework. Think of it like &lt;code&gt;robots.txt&lt;/code&gt;, but for AI models instead of crawlers. There’s a base version that points to prompt files and references, and an extended &lt;code&gt;llms-full.txt&lt;/code&gt; with deeper documentation on Angular’s inner workings.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Taken together, these changes don’t just help LLMs write better Angular — they also signal that AI-assisted coding is being treated seriously by framework maintainers.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Vite 7 Is Out With Major Internal Upgrades&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://vite.dev/blog/announcing-vite7.html" rel="noopener noreferrer"&gt;&lt;strong&gt;Vite 7&lt;/strong&gt;&lt;/a&gt; marks a major milestone in the evolution of modern frontend tooling. Over the past five years, Vite has grown into a foundational part of the JavaScript ecosystem, powering many frameworks and tools. With over 31 million downloads per week — up by 14 million in just seven months — the growth reflects its central role in enabling faster, modular frontend development.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;One of the most impactful changes in this release is the introduction of a new Rust-based bundler, now available as a drop-in replacement through a separate package. Built to eventually become the default, this bundler significantly improves build performance, especially for large-scale applications. It’s part of a broader effort to modernize the internal architecture and push toward a faster, more efficient toolchain.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Vite 7 also updates its &lt;strong&gt;browser target&lt;/strong&gt; defaults to a new standard called &lt;code&gt;baseline-widely-available&lt;/code&gt;. This shift ensures better compatibility with features that have been supported across major browsers for at least 30 months. With this update, minimum versions are now Chrome 107, Firefox 104, Safari 16.0, and Edge 107 — offering more predictability for future browser support.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;On the &lt;strong&gt;Node.js compatibility&lt;/strong&gt; side, Vite now requires Node 20.19 or 22.12 and drops support for Node 18, which has reached its end of life. These newer versions allow ESM-only distribution while maintaining interoperability with CommonJS modules, simplifying API usage and resolving long-standing compatibility issues.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The &lt;strong&gt;experimental Environment API&lt;/strong&gt; continues to evolve. Vite 7 introduces a new &lt;code&gt;buildApp&lt;/code&gt; hook to help plugins better coordinate environment setup during build processes. While still in review, the API is already showing potential in runtime-specific tooling and integrations. Developers are encouraged to test it out and provide feedback as it moves toward stabilization.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;For testing setups, Vite 7 is fully compatible with the latest versions of Vitest. The update also removes deprecated features like the Sass legacy API and &lt;code&gt;splitVendorChunkPlugin&lt;/code&gt;, aiming to keep the codebase lean while preserving backward compatibility for most projects.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Upgrading to Vite 7 should be relatively straightforward for anyone already on Vite 6. Migration guides are available to help smooth the process, and the complete changelog documents all updates in detail.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;V8 Gets Smarter: Speculative Inlining &amp;amp; Deoptimizations&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;V8 team has rolled out &lt;a href="https://v8.dev/blog/wasm-speculative-optimizations" rel="noopener noreferrer"&gt;&lt;strong&gt;two major performance upgrades for WebAssembly&lt;/strong&gt;&lt;/a&gt;: &lt;strong&gt;speculative inlining&lt;/strong&gt; and &lt;strong&gt;deoptimization support&lt;/strong&gt; — now shipping in Chrome M137. Together, they significantly improve execution speed, especially for apps compiled from higher-level languages like Dart, Java, or Kotlin using the WasmGC model.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Previously, inlining was limited to direct or well-known function calls. But with &lt;code&gt;call_indirect&lt;/code&gt; — where the callee is only determined at runtime — inlining was tricky. Now, V8 uses runtime profiling to identify likely targets at hot call sites and &lt;strong&gt;speculatively inlines&lt;/strong&gt; them. If a function is called frequently via &lt;code&gt;call_indirect&lt;/code&gt;, V8 tracks the target using feedback vectors and replaces the call with inlined code for up to four targets. This reduces call overhead and opens the door for further compiler optimizations like constant folding and dead code elimination.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Speculative optimizations rely on assumptions — and when those assumptions break, V8 needs a safe fallback. That’s where &lt;strong&gt;deopts&lt;/strong&gt; come in. If the inlined assumption is wrong (for example, a different target function is called), V8 exits the optimized path and jumps back into baseline (unoptimized) code without breaking execution. This new deopt support for WebAssembly mirrors what’s long been used in JavaScript JITs and is now a key foundation for even deeper optimizations in future WasmGC workloads.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Combined, these changes show big wins. On Dart microbenchmarks, V8 saw over &lt;strong&gt;50% speedups&lt;/strong&gt;, and real-world WasmGC apps (like databases and UI engines) saw &lt;strong&gt;1 to 8% performance boosts&lt;/strong&gt;. More importantly, this brings WebAssembly performance optimization closer to what we've long had with JavaScript — making Wasm a truly competitive target for modern web and app development.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Tools &amp;amp; Releases You Should Know About&lt;/strong&gt;
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Transformers.js Adds Gemma 3n, Qwen3 Embeddings, and Llava-Qwen2&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/huggingface/transformers.js/releases/tag/3.6.0" rel="noopener noreferrer"&gt;Transformers.js&lt;/a&gt; now supports several new models across NLP, vision, audio, and multimodal tasks. The biggest update is Gemma 3n — a local-first model built for multimodal inputs (text, images, audio, video), optimized to run efficiently with only a 2B footprint despite its 6B parameter design. It also introduces MatFormer, allowing model nesting and custom sub-models via mix-and-match. The Qwen3 Embedding models are also live, purpose-built for dense, multilingual embeddings and reranking. Llava-Qwen2 support is in progress, pairing vision with Qwen2’s language backbone.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;zx 8.6: Write Shell Scripts in JavaScript&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/google/zx/releases/tag/8.6.0" rel="noopener noreferrer"&gt;zx&lt;/a&gt; simplifies writing shell scripts using JavaScript, offering a cleaner alternative to bash. Version 8.6 brings improved defaults, cross-platform behavior, and less boilerplate for scripting tasks. Perfect for developers who want to script automation without leaving the comfort of Node.js.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Node.js 22.17.0 LTS Brings Clarity to APIs&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://nodejs.org/en/blog/release/v22.17.0" rel="noopener noreferrer"&gt;The latest Node LTS version&lt;/a&gt; discourages instantiating core HTTP classes like IncomingMessage without new, aligning with standard JavaScript expectations. Setting options.shell to an empty string now warns, urging explicit configurations. HTTP/2’s prioritization API is deprecated due to poor ecosystem support. Also stabilized: assert.partialDeepStrictEqual(), a handy utility for partial object testing.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;SVGO Continues to Optimize the Web&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://svgo.dev/docs/introduction/" rel="noopener noreferrer"&gt;SVGO &lt;/a&gt;remains a trusted tool for minimizing SVG file sizes without affecting rendering. Whether via CLI or Node.js API, SVGO strips away unnecessary metadata and default values. It's widely integrated into tools like PostCSS, webpack, and Docusaurus, helping teams deliver lighter and faster web experiences by default.&lt;/p&gt;




&lt;p&gt;And that's it for the forty-first issue of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;", brought to you by &lt;a href="https://jam.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;jam.dev&lt;/strong&gt;&lt;/a&gt;—the tool that makes it impossible for your team to send you bad bug reports.&lt;/p&gt;

&lt;p&gt;Feel free to share this newsletter with a fellow developer, and make sure you're following for more weekly updates.&lt;/p&gt;

&lt;p&gt;Until next time, happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>ESLint and Prettier are dead, HUGE update to JSON modules, 9 new JavaScript features, and more</title>
      <dc:creator>This Week In JavaScript</dc:creator>
      <pubDate>Sun, 22 Jun 2025 17:00:00 +0000</pubDate>
      <link>https://dev.to/thisweekinjavascript/eslint-and-prettier-are-dead-huge-update-to-json-modules-9-new-javascript-features-and-more-2e8h</link>
      <guid>https://dev.to/thisweekinjavascript/eslint-and-prettier-are-dead-huge-update-to-json-modules-9-new-javascript-features-and-more-2e8h</guid>
      <description>&lt;p&gt;Hello JavaScript Enthusiasts!&lt;/p&gt;

&lt;p&gt;Welcome to a new edition of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;"!&lt;/p&gt;

&lt;p&gt;This week, we’ll be lookin into Biome's game-changing v2 release, celebrate the baseline availability of JSON modules across modern browsers, explore Astro's move toward dynamic content, and review some exciting tool releases from Hono, MockRTC, and more.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Biome v2 is coming for ESLint and Prettier&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://biomejs.dev/blog/biome-v2/" rel="noopener noreferrer"&gt;&lt;strong&gt;Biome v2&lt;/strong&gt;, &lt;strong&gt;codenamed Biotype&lt;/strong&gt;,&lt;/a&gt; is officially out and it's big news. For the first time, a JavaScript and TypeScript linter can offer type-aware rules without relying on the TypeScript compiler. This reduces the need for TypeScript as a dependency, improving performance while preserving advanced linting capabilities.&lt;/p&gt;

&lt;p&gt;One standout feature is the noFloatingPromises rule, which already detects 75% of the issues caught by typescript-eslint, but at a fraction of the performance cost. This is powered by Biome's newly introduced multi-file analysis and custom type inference engine.&lt;/p&gt;

&lt;p&gt;Biome 2.0 also introduces Assist actions, such as import organization and attribute sorting, without diagnostics. Support for monorepos is now significantly better with nested config files, and a new HTML formatter (still experimental) can now handle .html files, bringing Biome closer to supporting Vue and Svelte templates in the future.&lt;/p&gt;

&lt;p&gt;Migrating is simple with a built-in &lt;code&gt;migrate&lt;/code&gt; command:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install --save-dev --save-exact @biomejs/biome

npx @biomejs/biome migrate --write
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;With Vercel backing the type inference work, Biome is signaling its intent to compete seriously with ESLint and Prettier.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;JSON Module Scripts Are Now Baseline in All Major Browsers&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://web.dev/blog/json-imports-baseline-newly-available" rel="noopener noreferrer"&gt;&lt;strong&gt;The long-requested feature to import JSON&lt;/strong&gt;&lt;/a&gt; as a module is now finally supported across all modern browsers, enabled via import attributes. This marks a big step for standard module behavior on the web, making it easier than ever to work with structured data directly inside JavaScript.&lt;/p&gt;

&lt;p&gt;Instead of fetching and parsing JSON manually, you can now write:&lt;/p&gt;

&lt;p&gt;import data from './foo.json' with { type: 'json' };&lt;/p&gt;

&lt;p&gt;This feature comes from the Import Attributes proposal, which enables passing metadata alongside imports to tell the JavaScript engine how to treat the file. It was split from the original proposal into a separate track to speed up adoption, and now JSON modules are the first to become baseline.&lt;/p&gt;

&lt;p&gt;Security concerns around MIME type mismatches led to this explicit declaration approach, ensuring that modules like JSON or CSS don't execute arbitrary code. Future extensions may include support for CSS and HTML modules using the same mechanism. Dynamic imports and re-exports also support the new syntax:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import("./config.json", { with: { type: "json" } })
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;This change enhances interoperability and simplifies frontend workflows by aligning the module system more closely with what developers expect from modern toolchains like Vite and Webpack.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;9 New JavaScript Features in ES2025&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;ES2025 introduces nine powerful JavaScript features that streamline data manipulation, regular expressions, module imports, and numerical operations. Here’s a quick breakdown of what’s coming:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. RegExp.escape()&lt;/strong&gt; - A new static method to safely escape user-inputted strings for use inside regular expressions.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const escaped = RegExp.escape("Hello.");

const re = new RegExp(escaped, 'g');
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;2. Float16Array&lt;/strong&gt; - A new typed array that enables 16-bit floating-point operations. Perfect for GPU work, color processing, and memory-sensitive applications.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Promise.try()&lt;/strong&gt; - A more ergonomic way to safely wrap sync or async functions and handle errors immediately.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Promise.try(() =&amp;gt; mightThrow()).then(...).catch(...);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;4. Iterator Helpers&lt;/strong&gt; - Additions like &lt;code&gt;.map()&lt;/code&gt;, &lt;code&gt;.filter()&lt;/code&gt;, &lt;code&gt;.reduce()&lt;/code&gt;, &lt;code&gt;.toArray()&lt;/code&gt; on native iterators make them much more powerful and array-like.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. JSON Modules&lt;/strong&gt; - Now standardized and handled via import attributes, allowing JSON imports to behave predictably and securely.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6. Import Attributes&lt;/strong&gt; - A syntax improvement to pass metadata along with module imports, like the type of file being imported.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import data from "./file.json" with { type: "json" };
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;7. RegExp Pattern Modifiers&lt;/strong&gt; - Support for enabling or disabling regex flags inline within subpatterns.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const re = /^(?i:[a-z])[a-z]$/;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;8. New Set Methods&lt;/strong&gt; - Mathematical operations like &lt;code&gt;.union()&lt;/code&gt;, &lt;code&gt;.intersection()&lt;/code&gt;, &lt;code&gt;.difference()&lt;/code&gt;, and &lt;code&gt;.isSubsetOf()&lt;/code&gt; bring power-user capabilities to sets.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;9. Duplicate Named Capturing Groups&lt;/strong&gt; - JavaScript will now support using the same named capture group in multiple parts of a pattern without throwing an error.&lt;/p&gt;

&lt;p&gt;These improvements make JavaScript more powerful and expressive for data-heavy, UI-rich, and performance-sensitive applications.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Astro 5.10: Live Content Collections and Stable Responsive Images&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://astro.build/blog/astro-5100/" rel="noopener noreferrer"&gt;&lt;strong&gt;Astro 5.10&lt;/strong&gt;&lt;/a&gt; ships with an exciting new experimental feature: live content collections. Unlike static content that gets compiled at build time, live collections fetch data at runtime. This means your content can now reflect real-time updates, user preferences, or dynamic filters.&lt;/p&gt;

&lt;p&gt;This feature is ideal for sites where data changes frequently or is user-specific. Instead of rebuilding your site for every change, live collections let you serve fresh content on demand, improving flexibility without sacrificing performance when static data is sufficient.&lt;/p&gt;

&lt;p&gt;Also now stable are Astro's responsive images. These automatically generate optimized image variants and srcsets, helping you reduce layout shifts and improve Core Web Vitals. This is especially useful for performance-focused builds and image-heavy layouts.&lt;/p&gt;

&lt;p&gt;Additional updates include CSP improvements, a customizable Cloudflare Workers entrypoint, and enhanced error handling for live content collections using predictable result objects.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Bun v1.2.16: File Routing and Memory Leak Fixes&lt;/strong&gt; 
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://bun.sh/blog/bun-v1.2.16" rel="noopener noreferrer"&gt;&lt;strong&gt;Bun 1.2.16&lt;/strong&gt;&lt;/a&gt; introduces support for returning files directly in route handlers using Bun.serve. This allows developers to easily serve static files without manually reading or buffering them.&lt;/p&gt;

&lt;p&gt;The update includes 73 bugfixes, memory leak patches, and over 100 additional Node.js compatibility tests. Notably, memory leaks in N-API handle scopes and piped stdio from Bun.spawn have been fixed, improving stability in long-running processes. A new hashing API, Bun.hash.rapidhash, also debuts, promising faster hash computations.&lt;/p&gt;

&lt;p&gt;Additional updates include support for vm.SyntheticModule, HTTPParser bindings, and improvements to the bun outdated command, making Bun more versatile for modern web app workflows.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Tools &amp;amp; Releases You Should Know About&lt;/strong&gt;
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;LogTape: Structured Logging Across All Runtimes&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://hackers.pub/@hongminhee/2025/logtape-0-12" rel="noopener noreferrer"&gt;&lt;strong&gt;LogTape&lt;/strong&gt;&lt;/a&gt; is a zero-dependency logging library that works seamlessly in Node, Deno, Bun, browsers, and edge runtimes. It supports structured logging, redaction of sensitive data, template literals for log formatting, and a hierarchical category system for fine-grained log levels.&lt;/p&gt;

&lt;p&gt;Its standout feature is the ease of extending it with custom sinks, allowing you to ship logs wherever you want. Whether building a logging solution for a library or a full-stack application, LogTape provides a flexible and consistent API.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Hono: A Lightning-Fast Web Framework That Runs Anywhere&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/honojs/hono" rel="noopener noreferrer"&gt;&lt;strong&gt;Hono&lt;/strong&gt;&lt;/a&gt; is a tiny and ultrafast web framework built on Web Standards. It works everywhere - Cloudflare Workers, Deno, Vercel, Node, Bun, and more.&lt;/p&gt;

&lt;p&gt;With first-class TypeScript support, Hono offers batteries-included middleware, blazing-fast RegExp routing (no linear scans), and a delightful developer experience. Its hono/tiny preset weighs in at under 12kB, making it one of the most lightweight full-featured frameworks out there. If you're building edge-native apps or APIs, Hono is definitely worth a look.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;MockRTC: Mock and Test WebRTC Like a Pro&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/httptoolkit/mockrtc" rel="noopener noreferrer"&gt;&lt;strong&gt;MockRTC&lt;/strong&gt;&lt;/a&gt; gives developers the power to intercept and mock WebRTC connections for testing, debugging, or simulating failure conditions. It can capture traffic, inject behaviors, and even hook into live WebRTC sessions without modifying production code.&lt;/p&gt;

&lt;p&gt;You can simulate real peers, automate tests, or create proxy layers for transformation or monitoring. MockRTC's hook functions make integration seamless, and its assertion capabilities help verify edge-case behaviors with confidence. It's a must-have for teams working on real-time communication platforms.&lt;/p&gt;




&lt;p&gt;And that's it for the fortieth issue of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;", brought to you by &lt;a href="https://jam.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;jam.dev&lt;/strong&gt;&lt;/a&gt;—the tool that makes it impossible for your team to send you bad bug reports.&lt;/p&gt;

&lt;p&gt;Feel free to share this newsletter with a fellow developer, and make sure you're following for more weekly updates.&lt;/p&gt;

&lt;p&gt;Until next time, happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Apple WWDC 2025's biggest updates, Oxlint is finally stable, pnpm's newest update, and more</title>
      <dc:creator>This Week In JavaScript</dc:creator>
      <pubDate>Sun, 15 Jun 2025 15:58:06 +0000</pubDate>
      <link>https://dev.to/thisweekinjavascript/apple-wwdc-2025s-biggest-updates-oxlint-is-finally-stable-pnpms-newest-update-and-more-jcf</link>
      <guid>https://dev.to/thisweekinjavascript/apple-wwdc-2025s-biggest-updates-oxlint-is-finally-stable-pnpms-newest-update-and-more-jcf</guid>
      <description>&lt;p&gt;Hello JavaScript Enthusiasts!&lt;/p&gt;

&lt;p&gt;Welcome to a new edition of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;"!&lt;/p&gt;

&lt;p&gt;This week, we’re unpacking Safari 26 Beta’s game-changing WebKit updates, pnpm 10.12’s performance leaps, and Oxlint 1.0’s blazing-fast linting. As always, we’ll also talk about some powerful tools to elevate your development workflow.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;WWDC 2025 &amp;amp; Safari 26 Beta: WebKit in SwiftUI, WebGPU, and CSS Anchor Positioning&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://webkit.org/blog/16993/news-from-wwdc25-web-technology-coming-this-fall-in-safari-26-beta/" rel="noopener noreferrer"&gt;&lt;strong&gt;Apple’s Safari 26 Beta&lt;/strong&gt;&lt;/a&gt;, released this week, introduces 67 new features and 107 improvements, with WebKit stealing the show. The star is a brand-new WebKit API tailored for Swift and SwiftUI, making it seamless to integrate web content into apps across iOS, iPadOS, macOS, and visionOS. Let’s break down the key additions.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;WebView and WebPage: A New Era for Web Integration&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;The WebView type, a native SwiftUI View, simplifies displaying web content. With just a URL, you can embed a webpage in your app:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;struct ContentView: View {

      var body: some View {

      WebView(url: URL(string: "https://www.webkit.org"))

      }

      }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;WebView supports a suite of view modifiers like webViewScrollPosition, webViewMagnificationGestures, and findNavigator, allowing fine-grained control over the user experience. For advanced use cases, connect WebView to WebPage, a new Observable class designed to manage web content. WebPage enables loading, controlling, and communicating with web content, even without displaying it directly. Its observable properties and functions make reacting to changes effortless, especially in SwiftUI’s reactive paradigm.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For example, you can build a dynamic article viewer&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;struct ArticleView: View {

      @Environment(ArticleViewModel.self) private var model

      var body: some View {

      WebView(model.page)

      navigationTitle(model.page.title)

      }

      }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The URLSchemeHandler protocol leverages Swift Concurrency to handle custom schemes, enabling local resource loading with an AsyncSequence. Meanwhile, WebPage.NavigationDeciding and WebPage.DialogPresenting protocols let you customize navigation policies and JavaScript dialog presentations, offering unparalleled control over web interactions in your app.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;This API empowers web developers to leverage their JavaScript and HTML skills to create native Apple apps, bridging the gap between web and native development. Whether you’re building a news reader or a web-enhanced dashboard, these tools make integration smoother than ever.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;WebGPU: GPU-Powered Computing on the Web&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Safari 26 Beta introduces WebGPU, a JavaScript API that revolutionizes GPU programming. Unlike WebGL, which was built on OpenGL and required heavy translation to modern GPUs, WebGPU maps directly to Apple’s Metal framework, reducing overhead and boosting performance. It supports graphics rendering and introduces compute shaders for general-purpose GPU computations—a first for the web.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;WebGPU uses the WebGPU Shading Language (WGSL, pronounced “wig-sill”), a safe, verifiable language designed for the web. WGSL avoids risks like unchecked bounds accesses, ensuring security without sacrificing power. After over a year in Safari Technology Preview, WebGPU is now stable in Safari 26 Beta across Apple platforms.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Frameworks like Babylon.js, Three.js, Unity, and Transformers.js already support WebGPU, delivering stunning visuals and complex computations in the browser. For developers, WebGPU’s streamlined validation minimizes performance hits, approaching native app speeds.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;CSS Anchor Positioning: Smarter Layouts&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Anchor positioning, a new CSS layout mechanism, simplifies anchoring elements to one another. Paired with the popover attribute (introduced in Safari 17.0), it’s perfect for responsive menus, tooltips, and overlays. The position-area syntax makes layouts intuitive:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;      .thing-that-gets-anchored-to {

      anchor-name: --profile-button;

      }

      .item-that-pops-up {

      position-anchor: --profile-button;

      position: absolute;

      top: anchor(bottom);

      left: anchor(left);

      }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;The anchor() function, combined with absolute positioning, offers pixel-perfect control, ideal for animated anchors or multi-anchor layouts. This feature enhances the web’s layout capabilities, making complex designs more accessible. Safari 26 Beta’s CSS improvements cement its position as a developer-friendly browser.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;pnpm 10.12: Near-Instant Installs and Enhanced Catalogs&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://socket.dev/blog/pnpm-introduces-global-virtual-store-and-expanded-version-catalogs" rel="noopener noreferrer"&gt;&lt;strong&gt;pnpm 10.12.1&lt;/strong&gt;&lt;/a&gt;, released this week, supercharges JavaScript package management with an experimental global virtual store and a revamped version catalog system. These updates make pnpm a top choice for developers managing monorepos or large projects.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The global virtual store slashes install times by linking dependencies to a shared &amp;lt;store-path&amp;gt;/links directory, where packages are stored in folders named after their dependency graph hashes. This NixOS-inspired approach lets multiple projects reuse dependencies without redownloading, delivering near-instant installs on warm caches. Enable it with:&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; pnpm config -g set enable-global-virtual-store true

      Or add to pnpm-workspace.yaml:

      enableGlobalVirtualStore: true
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;p&gt;pnpm auto-disables this in CI environments to avoid slowdowns on cold caches. A YouTube demo shows the speed, and PR #8190 details the tech. Zoltan Kochan, pnpm’s maintainer, highlights its graph-based isolation for robust performance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The version catalog system gains flexibility with catalogMode settings: strict enforces catalog versions, prefer allows fallbacks, and manual (default) skips auto-additions. New CLI options --save-catalog and --save-catalog-name=&amp;lt;name&amp;gt; save dependencies to pnpm-workspace.yaml and package.json with catalog: specifiers (PR #9425). The pnpm update command now supports catalog protocols, streamlining dependency updates.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Minor tweaks include semantic version sorting for pnpm patch, clearer error messages for mismatched specifiers (PR #9598), and a ci setting to flag CI environments. A semi-breaking change updates side-effects cache keys, requiring a new cache (PR #9605). Check the release notes for more.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Oxlint 1.0: Redefining Linting Performance&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://voidzero.dev/posts/announcing-oxlint-1-stable" rel="noopener noreferrer"&gt;&lt;strong&gt;Oxlint 1.0&lt;/strong&gt;,&lt;/a&gt; the first stable release of the Rust-powered JavaScript and TypeScript linter, delivers 50–100x faster performance than ESLint. Supporting over 500 rules with zero-config setup, it’s adopted by Shopify, Airbnb, and Mercedes-Benz, transforming linting workflows.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Oxlint processes 10,000 files per second, linting 264,925 files in 22.5 seconds on 10 threads. Airbnb lints 126,000+ files in 7 seconds with rules like no-barrel-file, where ESLint fails. Mercedes-Benz cut lint times by 71–97%, and Shopify uses it in its admin console. Benchmarks show Oxlint at 615.3ms (multi-thread) versus ESLint’s 33.481s. Open-source projects like Bun and Preact also benefit.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Start linting with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; npx oxlint@latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Customize via .oxlintrc.json, based on ESLint v8’s flat config. The oxlint-migrate tool converts ESLint configs, and eslint-plugin-oxlint supports hybrid setups. Rules include ESLint, TypeScript-ESLint, and plugins like eslint-plugin-react, plus unique Oxlint rules like bad-comparison-sequence. Editor support covers VS Code, IntelliJ, and Zed. See the installation guide.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Oxlint’s semantic versioning ensures stability, with minor releases adding rules that may affect CI. Review the versioning guide. With maintainer Cameron and a growing team, Oxlint is set to evolve rapidly.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Tools &amp;amp; Releases You Should Know About&lt;/strong&gt;
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Jest 30: Faster, Leaner, Better&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://jestjs.io/blog/2025/06/04/jest-30" rel="noopener noreferrer"&gt;&lt;strong&gt;Jest 30&lt;/strong&gt;&lt;/a&gt; brings faster test runs and lower memory usage, with up to 37% speed improvements and 77% less memory in large projects. It drops Node 14/16/19/21 support, upgrades jsdom to v26, and requires TypeScript 5.4+. New features include expect.arrayOf for array validation, test.each with a %$ placeholder, and jest.advanceTimersToNextFrame() for animation testing. Configurable retries and jest.unstable_unmockModule() enhance control. Check the migration guide for breaking changes.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Orange ORM: Seamless Database Integration&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://orange-orm.io/" rel="noopener noreferrer"&gt;&lt;strong&gt;Orange ORM&lt;/strong&gt;&lt;/a&gt; is a powerful Object-Relational Mapper for Node.js, Bun, and Deno, supporting TypeScript and JavaScript. Its intuitive querying and Active Record pattern simplify database interactions without code generation. It works in browsers via an Express.js plugin, ensuring secure credential handling. Ideal for developers needing flexible, typed database solutions.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Vue Equipment: Frontend Toolkit&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://www.vue.equipment/" rel="noopener noreferrer"&gt;&lt;strong&gt;Vue Equipment&lt;/strong&gt;&lt;/a&gt; offers unstyled, typed plugins and composables for Vue and Nuxt apps. With a clean API, it reduces complexity using CSS variables, grouped options, and exposed state via data attributes. It’s perfect for developers building modern web apps without reinventing common solutions.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;darkmodejs: Easy Dark Mode&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/Assortment/darkmodejs" rel="noopener noreferrer"&gt;&lt;strong&gt;darkmodejs&lt;/strong&gt;&lt;/a&gt; simplifies dark mode on the web using the prefers-color-scheme media query and matchMedia API. It supports macOS 10.14+, iOS 13+, and Windows 10+, with v2+ using addEventListener for modern compatibility. A lightweight utility for theme-aware sites.&lt;/p&gt;




&lt;p&gt;And that's it for the thirty-ninth issue of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;", brought to you by &lt;a href="https://jam.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;jam.dev&lt;/strong&gt;&lt;/a&gt;—the tool that makes it impossible for your team to send you bad bug reports.&lt;/p&gt;

&lt;p&gt;Feel free to share this newsletter with a fellow developer, and make sure you're following for more weekly updates.&lt;/p&gt;

&lt;p&gt;Until next time, happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Forget VS Code, Cursor 1.0 is here, This JavaScript bundler is FAST AF, new JavaScript features, and more</title>
      <dc:creator>This Week In JavaScript</dc:creator>
      <pubDate>Sun, 08 Jun 2025 17:27:15 +0000</pubDate>
      <link>https://dev.to/thisweekinjavascript/forget-vs-code-cursor-10-is-here-this-javascript-bundler-is-fast-af-new-javascript-features-1a2i</link>
      <guid>https://dev.to/thisweekinjavascript/forget-vs-code-cursor-10-is-here-this-javascript-bundler-is-fast-af-new-javascript-features-1a2i</guid>
      <description>&lt;p&gt;Hello JavaScript Enthusiasts!&lt;/p&gt;

&lt;p&gt;Welcome to a new edition of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;"!&lt;/p&gt;

&lt;p&gt;This week, we’re hyped about Cursor 1.0’s release and how it might make VS Code obsolete, Rolldown’s lightning-fast Vite builds, TC39’s bold JavaScript advancements, and WebStatus.dev’s game-changing web insights. As always, we’ll also talk about some powerful tools to elevate your development workflow.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Forget VS Code, Cursor 1.0 Is Finally Here&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://www.cursor.com/changelog" rel="noopener noreferrer"&gt;&lt;strong&gt;Cursor 1.0&lt;/strong&gt;&lt;/a&gt; has landed, bringing AI-driven coding to new heights with BugBot for automated pull request reviews, Background Agent for remote coding tasks, Memories for contextual intelligence, Jupyter Notebook integration, and one-click MCP setup. It’s a must-have for JavaScript devs looking to automate and accelerate their workflows.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;BugBot enhances code quality by automatically reviewing pull requests on GitHub, identifying bugs and potential issues, and providing detailed comments. It includes a “Fix in Cursor” button that directs you to your editor with a pre-filled prompt to address the issue.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Background Agent enables developers to execute remote coding tasks efficiently. You can activate it using Cmd/Ctrl+E or the cloud icon in the chat interface. If you enable privacy mode, Cursor will soon provide full support to ensure secure workflows. Developers who adopted Background Agent early praised its efficiency, and now all users can utilize it to generate React components or optimize Node.js APIs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Memories, currently in beta, transforms how Cursor understands your projects by storing project-specific facts for each user and project. You can manage these facts through Settings → Rules, allowing Cursor to recall details like your preferred state management approach, which results in more accurate suggestions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;For data science professionals, Cursor’s Jupyter Notebook support allows the Agent to create and edit multiple cells directly, significantly improving productivity. This feature, available only with Sonnet models, makes Cursor ideal for crafting JavaScript-driven data visualizations or machine learning pipelines.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Cursor simplifies server authentication with one-click MCP installations and OAuth support. A curated list of official MCP servers is available at &lt;a href="http://docs.cursor.com" rel="noopener noreferrer"&gt;docs.cursor.com&lt;/a&gt;. The chat interface now supports richer responses, the redesigned Settings and Dashboard provide a polished user experience, offering analytics on tool and model usage, which helps teams optimize their workflows.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;This JavaScript Bundler Is FAST AF&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://voidzero.dev/posts/announcing-rolldown-vite" rel="noopener noreferrer"&gt;&lt;strong&gt;Rolldown, a next-generation bundler built in Rust&lt;/strong&gt;&lt;/a&gt;, is revolutionizing the core of Vite. The rolldown-vite package serves as a drop-in replacement for Vite, delivering exceptional performance improvements for JavaScript applications. As a technical preview, Rolldown leverages Oxc, a high-performance JavaScript toolkit that handles parsing, transforming, resolving, and minifying, setting new benchmarks for speed and efficiency.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;By replacing Vite’s dependency on esbuild with Oxc, Rolldown achieves build time reductions ranging from 3 to 16 times faster and reduces memory usage by up to one hundred times. For example GitLab’s build time decreased from 2.5 minutes to 40 seconds, Excalidraw’s from 22.9 seconds to 1.4 seconds, Appwrite’s from over 12 minutes to 3 minutes, and Particl’s from over a minute to 6 seconds, outperforming Vite by nearly ten times and Next.js by twenty-nine times. Even this blog post, built using VitePress with Rolldown Vite, completed in just 1.8 seconds on Netlify. To integrate Rolldown Vite, you can alias Vite in your package.json:&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{

"dependencies": {

"vite": "npm:rolldown-vite@latest"

}

}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;For projects using VitePress or meta-frameworks, you can use overrides to replace vite with rolldown-vite. Most Vite plugins and frameworks are compatible, though some incompatibilities exist, which you can review in the migration guide. As a standalone package, rolldown-vite allows rapid iteration, though patch versions may introduce breaking changes, which are documented in its changelog. Once stabilized, Rolldown will integrate into Vite’s main codebase, phasing out the separate package.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Rolldown Vite is a must-try for developers building performance-critical JavaScript applications.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Upcoming JavaScript Features From TC39&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://socket.dev/blog/tc39-advances-9-proposals" rel="noopener noreferrer"&gt;&lt;strong&gt;The 108th TC39 meeting advanced nine JavaScript proposals&lt;/strong&gt;&lt;/a&gt;, with three,Array.fromAsync, Error.isError, and Explicit Resource Management,reaching Stage 4, positioning them for inclusion in the ECMAScript specification. These developments enhance JavaScript’s capabilities for asynchronous workflows and resource management.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The Array.fromAsync proposal, simplifies the handling of asynchronous iterables, eliminating the need for manual for await...of loops. It serves as a native alternative to libraries like it-all, which sees 50,000 weekly downloads, and supports asynchronous iterables, synchronous iterables with promises, and array-like objects.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;async function* asyncGen(n) { for (let i = 0; i &amp;lt; n; i++) yield i * 2; }

const arr = await Array.fromAsync(asyncGen(4)); // [0, 2, 4, 6]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;This feature is particularly valuable for unit tests, command-line applications, or streaming data processing in Node.js, offering optional mapfn and thisArg parameters for added flexibility.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The Error.isError proposal, introduces a reliable method for detecting errors across different realms, resolving inconsistencies with instanceof Error in environments like iframes or Node.js virtual machines. This improvement is crucial for debugging, serialization tasks in platforms like RunKit, or structured cloning operations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The Explicit Resource Management proposal, introduces using and await using declarations, supported by DisposableStack and AsyncDisposableStack, to ensure deterministic cleanup of resources such as file handles, streams, or locks. Inspired by C#’s using and Python’s with statements, it reduces boilerplate code significantly.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For instance:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;using handle = acquireFileHandle(); // Automatically disposes at block end

const stack = new DisposableStack(); // Manages multiple resources

stack.use(resource1); stack.use(resource2); // Ensures reverse-order cleanup
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ul&gt;
&lt;li&gt;This approach mitigates common errors, such as omitting try/finally blocks or mismanaging multiple resources, in Node.js applications that handle files or streams. These advancements collectively empower JavaScript developers to build robust asynchronous APIs and resource-intensive systems.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;The Ultimate Web Platform Dashboard&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://webstatus.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;WebStatus.dev&lt;/strong&gt;&lt;/a&gt; has undergone a massive evolution, now tracking over 1000 web platform features,nearly 100% coverage,with mobile browser data, usage timelines, and deep insights to guide JavaScript apps toward Baseline interoperability. It’s an indispensable tool for front-end developers.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Sourced from the W3C’s web-features project, involving all major browser vendors, WebStatus.dev provides Chrome usage data since 2012, complete with adoption timelines for nearly all features.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Mobile browser support highlights Baseline gaps, enabling smarter progressive enhancement strategies for React or Vue apps. Powerful sorting and filtering let you query specific scenarios, like API landing in Safari in the last 12 months that were already in Chrome and Firefox, sorted by usage. Shareable dashboards streamline team workflows, letting you create custom views for Web UI APIs or project-specific needs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;This helps devs like you plan adoption of cutting-edge APIs. WebStatus is a must for building cross-browser JavaScript apps with confidence.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Tools &amp;amp; Releases You Should Know About&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://blog.platformatic.dev/seamlessly-blend-php-with-nodejs" rel="noopener noreferrer"&gt;&lt;strong&gt;@platformatic/php-node&lt;/strong&gt;&lt;/a&gt;: This innovative Node.js runtime seamlessly integrates PHP into your Node.js applications, allowing PHP to function as a high-performance request processor. Developed using Rust and napi.rs, it employs a language-agnostic lang_handler system to route requests to multi-threaded PHP workers within Node.js’s worker pool, significantly reducing latency by eliminating network calls.This tool is perfect for developers who seek a unified development environment for JavaScript and PHP, simplifying workflows and boosting application performance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://github.com/wooorm/starry-night" rel="noopener noreferrer"&gt;&lt;strong&gt;Starry Night v3.8&lt;/strong&gt;&lt;/a&gt;: This open-source syntax highlighter replicates the functionality of GitHub’s closed-source PrettyLights, supporting over 600 programming languages with TextMate grammars, which deliver exceptional quality, as used in editors like VS Code, SublimeText, and Atom. Starry Night generates abstract syntax trees (ASTs) for versatile rendering, such as ANSI sequences for command-line interfaces or React/Preact for virtual DOM applications, and supports CSS-driven themes for effortless dark mode integration. Unlike shiki, which uses inline styles, Starry Night’s CSS class-based approach simplifies theming, making it a top choice for developers building code-rich platforms.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.ngx-vflow.org/getting-started/what-is-ngx-vflow" rel="noopener noreferrer"&gt;&lt;strong&gt;ngx-vflow&lt;/strong&gt;&lt;/a&gt;: This Angular library empowers developers to create node-based applications, ranging from static diagrams to fully interactive visual editors. Built on Angular signals for outstanding performance, ngx-vflow simplifies complex interactions like dragging, zooming, and curve rendering through an intuitive API. Whether you are visualizing JavaScript application architectures or debugging Angular-based pipelines, ngx-vflow provides robust, scalable solutions for building interactive development tools.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://docusaurus.io/blog/releases/3.8" rel="noopener noreferrer"&gt;&lt;strong&gt;Docusaurus 3.8&lt;/strong&gt;:&lt;/a&gt; This powerful React-based documentation platform boosts build performance with Docusaurus Faster, leveraging Rspack’s persistent cache and Node.js worker threads for 2–5x faster rebuilds and 2x quicker static site generation. New Future Flags prepare your site for Docusaurus 4, while optimizations like SVG sprites and macOS startup tweaks enhance efficiency. Perfect for JavaScript devs crafting sleek, high-performance documentation sites for React or Node.js projects.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;And that's it for the thirty-eighth issue of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;", brought to you by &lt;a href="https://jam.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;jam.dev&lt;/strong&gt;&lt;/a&gt;—the tool that makes it impossible for your team to send you bad bug reports.&lt;/p&gt;

&lt;p&gt;Feel free to share this newsletter with a fellow developer, and make sure you're following for more weekly updates.&lt;/p&gt;

&lt;p&gt;Until next time, happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Angular v20 is 35% faster, Remix v3 is breaking up with React, and the future of JavaScript</title>
      <dc:creator>This Week In JavaScript</dc:creator>
      <pubDate>Sun, 01 Jun 2025 17:00:00 +0000</pubDate>
      <link>https://dev.to/thisweekinjavascript/angular-v20-is-35-faster-remix-v3-is-breaking-up-with-react-and-the-future-of-javascript-4h8p</link>
      <guid>https://dev.to/thisweekinjavascript/angular-v20-is-35-faster-remix-v3-is-breaking-up-with-react-and-the-future-of-javascript-4h8p</guid>
      <description>&lt;p&gt;Hello JavaScript Enthusiasts!&lt;/p&gt;

&lt;p&gt;Welcome to a new edition of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;"!&lt;/p&gt;

&lt;p&gt;This week, we’re hyped about Angular v20’s lightning-fast features, Remix’s game-changing framework overhaul, and the future of JavaScript. We’ve also got an updated list of tools supercharge your development workflow, as always.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Angular v20 Is Now 35% Faster&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;At Google I/O on May 21, 2025, the Angular team announced &lt;a href="https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301" rel="noopener noreferrer"&gt;&lt;strong&gt;Angular v20&lt;/strong&gt;&lt;/a&gt;, scheduled for release on May 29. This version significantly enhances server-side rendering (SSR), signals, and authoring capabilities, providing an improved developer experience and optimized application performance.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Zoneless Angular (Developer Preview)&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Zone.js is now optional:&lt;/strong&gt; Angular supports running without Zone.js by leveraging signals for precise change detection.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Efficient UI updates:&lt;/strong&gt; Developers can use markForChange or signal state awareness to trigger targeted change detection.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Example of enabling zoneless mode:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;typescript

      bootstrapApplication(App, {

      zoneless: true

      });

      Manual change detection invocation:

      typescript

      import { markForChange } from '@angular/core';

      markForChange();

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;strong&gt;Signal Ecosystem Enhancements&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Signals and Computed are stable:&lt;/strong&gt; Recommended for reactive state management.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;LinkedSignal (stable in v20):&lt;/strong&gt; Supports writable signals with access to previous state values.&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;typescript

      const count = signal(0);

      const double = computed(() =&amp;gt; count() * 2);

      const history = linkedSignal([], (prev, next) =&amp;gt; [...prev, next]);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Resource and HTTPResource:&lt;/strong&gt; Simplify asynchronous data fetching; StreamingResource supports real-time UI updates.&lt;br&gt;
typescript&lt;/p&gt;

&lt;p&gt;const user = resource(async () =&amp;gt; await fetchUser());&lt;/p&gt;

&lt;p&gt;const posts = httpResource('/api/posts');&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Server-Side Rendering (SSR) Improvements&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Route-level render mode APIs:&lt;/strong&gt; Enable hybrid rendering strategies, allowing SSR, static site generation, and client-side rendering on a per-route basis.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;typescript

      export const routes: Routes = [

      { path: '', component: HomeComponent, renderMode: 'ssr' },

      { path: 'about', component: AboutComponent, renderMode: 'client' }

      ];
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Incremental hydration:&lt;/strong&gt; Allows deferring component hydration using Angular’s defer block, reducing initial JavaScript bundle size.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Event replay:&lt;/strong&gt; Captures and replays user interactions during JavaScript loading to prevent missed events.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Authoring Experience Improvements&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Standalone components as the default:&lt;/strong&gt; Simplifies development by reducing reliance on NgModules.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Introduction of let syntax:&lt;/strong&gt; Provides a cleaner way to declare template variables.&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;xml
      &amp;lt;ng-container *let="user of userSignal()"&amp;gt;

      {{ user.name }}

      &amp;lt;/ng-container&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Untagged literals for dynamic styling:&lt;/strong&gt; Enables direct binding of dynamic class and style objects.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;xml

      &amp;lt;div [class]="{ active: isActive }"&amp;gt;&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Hot Module Replacement (HMR):&lt;/strong&gt; Maintains application state during development reloads, enhancing developer productivity.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;New Integrations and Tooling&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Experimental Vite support for testing:&lt;/strong&gt; Offers faster and modernized development workflows.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Custom Angular track in Chrome DevTools:&lt;/strong&gt; Flame charts now include color-coded frames for Angular change detection and TypeScript execution.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Firebase App Hosting:&lt;/strong&gt; Provides streamlined deployment for SSR applications.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Additional Highlights&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;AI portal launch:&lt;/strong&gt; &lt;a href="https://angular.dev/ai" rel="noopener noreferrer"&gt;&lt;strong&gt;angular.dev/ai&lt;/strong&gt;&lt;/a&gt; introduces AI-driven workflows to assist Angular developers.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Angular v20 delivers substantial improvements across SSR, reactive programming with signals, authoring, and developer tooling, reinforcing its position as a robust framework for enterprise-grade applications.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Remix v3 And The Breakup With React&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://remix.run/blog/wake-up-remix" rel="noopener noreferrer"&gt;&lt;strong&gt;Remix v2&lt;/strong&gt;&lt;/a&gt; powers React Router v7 with robust server-side rendering capabilities, enabling fast, scalable applications used by Shopify, GitHub, and over 11 million projects worldwide&lt;a href="https://remix.run/blog/wake-up-remix" rel="noopener noreferrer"&gt;.&lt;/a&gt; Its architecture is well suited for e-commerce platforms, blogs, and other content-driven sites, providing a reliable full-stack React framework experience.&lt;/p&gt;

&lt;p&gt;Following the close integration and eventual merging of Remix into React Router v7, as detailed in the &lt;a href="https://remix.run/blog/merging-remix-and-react-router" rel="noopener noreferrer"&gt;&lt;strong&gt;merging announcement&lt;/strong&gt;&lt;/a&gt;, Remix v2 had become a thin wrapper around React Router. This consolidation allowed React Router to inherit many of Remix’s strengths, including server-side rendering and React Server Components (RSC) support, creating a stable, battle-tested platform with long-term support.&lt;/p&gt;

&lt;p&gt;Remix v3 marks a significant departure from this model. It replaces React with the lightweight Preact library and embraces a model-first, low-dependency, web API-centric approach. This reimagining minimizes reliance on heavy build tools by favoring runtime execution, making it ideal for AI-driven applications, lightweight websites, and modern web development workflows.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Key features of Remix v3&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Web API-Centric Design:&lt;/strong&gt; Leveraging web standards and native browser APIs reduces complexity and shortens the learning curve, allowing developers to focus on building rather than framework-specific abstractions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Minimal Dependencies:&lt;/strong&gt; Adhering to a “no dependencies” philosophy, Remix v3 frees developers from external package roadmaps and increases project control.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Modular Architecture:&lt;/strong&gt; Bundled components such as database connectors and a revived Reach UI library simplify setup and customization. Single-purpose modules enable easy swapping or upgrading of parts.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Composability and Flexibility:&lt;/strong&gt; The framework encourages mixing and matching tools, providing a scalable developer experience suitable for both small and large projects.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Performance and Reliability:&lt;/strong&gt; Google’s use of Preact underscores the framework’s stability and efficiency. Runtime optimizations and reduced bundle sizes contribute to faster load times and smoother user experiences.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Developer Experience:&lt;/strong&gt; Drawing from years of web-building expertise, Remix v3 focuses on simplicity, clarity, and productivity, aiming to make development intuitive and enjoyable.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Overall, Remix v3 represents a bold evolution toward leaner, faster web applications by reimagining the framework’s foundations around modern web standards and minimalism. It is poised to reshape how developers build scalable, high-performance web apps with a fresh, streamlined approach.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;The BIGGEST JavaScript Change?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The Temporal API, a modern replacement for JavaScript’s legacy Date object, has been in development for several years and is now enabled by default in Firefox 139, with broader runtime support expected soon. This API addresses long-standing issues with date and time handling, offering a more reliable, precise, and developer-friendly approach.&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Key improvements and features&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Comprehensive Time Zone Support:&lt;/strong&gt; Unlike the traditional Date object, Temporal supports full IANA time zones, enabling accurate handling of local times worldwide.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Immutability:&lt;/strong&gt; All Temporal objects are immutable, preventing unintended side effects and making date/time manipulation safer.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Consistent Parsing and Formatting:&lt;/strong&gt; Strict adherence to ISO 8601 standards ensures reliable parsing and serialization across environments.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Fine Precision and Extended Range:&lt;/strong&gt; Supports nanosecond precision and a wider range of dates, suitable for high-precision and historical applications.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Clear Separation of Date/Time Concepts:&lt;/strong&gt; Multiple specialized classes such as PlainDate, PlainTime, PlainDateTime, ZonedDateTime, and Duration allow developers to work precisely with the data they need without confusion.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Example&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;typescript

    const date = Temporal.PlainDate.from("2025-05-23");

    const oneWeekLater = date.add({ days: 7 }); // 2025-05-30

    const dt = Temporal.PlainDateTime.from("2025-12-31T23:30");

    const nextHour = dt.add({ hours: 1 }); // 2026-01-01T00:30
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The Temporal API’s introduction marks a significant evolution in JavaScript date/time handling, eliminating many pitfalls of the old Date object such as DST bugs, mutability, and inconsistent parsing. Its rollout in Firefox 139 signals readiness for wider adoption, promising developers a robust, standardized toolset for all date and time needs in modern web applications.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Tools &amp;amp; Releases You Should Know About&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Let’s speed-run through some of the other big tool updates this week!&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://reactjust.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;ReactJust.dev&lt;/strong&gt;&lt;/a&gt; is a minimal, zero-config React starter kit focused on simplicity and performance. It provides a clean, lightweight foundation with minimal dependencies, enabling fast project setup without complex tooling. Designed for developers who want to quickly bootstrap React apps, it supports modern React features and best practices out of the box. Ideal for prototypes, small projects, or learning React fundamentals, ReactJust.dev streamlines development by eliminating boilerplate and unnecessary complexity, helping you focus on building your app efficiently.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://bun.sh/blog/bun-v1.2.15" rel="noopener noreferrer"&gt;&lt;strong&gt;Bun v1.2.15&lt;/strong&gt;&lt;/a&gt;: Delivers bun audit to catch dependency risks and bun pm view for package insights, fixing 11 issues with 261 upvotes. New BUN_OPTIONS and node:vm support enhance Node.js compatibility, ideal for secure APIs or microservices.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://github.com/vadimdemedes/ink" rel="noopener noreferrer"&gt;&lt;strong&gt;Ink 6.0&lt;/strong&gt;&lt;/a&gt;: Brings React-style UI building to command-line apps with Flexbox layouts, using Yoga for CSS-like designs. It’s perfect for crafting interactive CLI tools or scripts, with full React feature support.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://jspm.org/jspm-4.0-release" rel="noopener noreferrer"&gt;&lt;strong&gt;JSPM 4.0&lt;/strong&gt;&lt;/a&gt;: Simplifies ESM workflows with import maps, TypeScript stripping, and zero-config builds for web-standard apps. Its focus on native modules makes debugging easy and keeps projects future-proof.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://github.com/faker-js/faker" rel="noopener noreferrer"&gt;&lt;strong&gt;Faker 9.8&lt;/strong&gt;&lt;/a&gt;: Creates realistic fake data like names, addresses, and crypto details across 70+ locales for testing or prototyping. From job titles to product names, it’s a quick way to mock up robust datasets.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And that's it for the thirty-seventh issue of "&lt;strong&gt;This Week in JavaScript&lt;/strong&gt;", brought to you by &lt;a href="https://jam.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;jam.dev&lt;/strong&gt;&lt;/a&gt;—the tool that makes it impossible for your team to send you bad bug reports.&lt;/p&gt;

&lt;p&gt;Feel free to share this newsletter with a fellow developer, and make sure you're following for more weekly updates.&lt;/p&gt;

&lt;p&gt;Until next time, happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Angular v20's big launch at Google I/O 2025, Claude Sonnet and Opus 4, TypeScript’s 10x Speed Boost, and more</title>
      <dc:creator>This Week In JavaScript</dc:creator>
      <pubDate>Sun, 25 May 2025 18:10:38 +0000</pubDate>
      <link>https://dev.to/thisweekinjavascript/angular-v20s-big-launch-at-google-io-2025-claude-sonnet-and-opus-4-typescripts-10x-speed-23fi</link>
      <guid>https://dev.to/thisweekinjavascript/angular-v20s-big-launch-at-google-io-2025-claude-sonnet-and-opus-4-typescripts-10x-speed-23fi</guid>
      <description>&lt;p&gt;Hello JavaScript Enthusiasts!&lt;/p&gt;

&lt;p&gt;Welcome to another edition of &lt;em&gt;This Week in JavaScript&lt;/em&gt;!&lt;/p&gt;

&lt;p&gt;This week, we’re buzzing about Angular v20’s blockbuster reveal at Google I/O, Anthropic’s Claude 4 revolutionizing coding, TypeScript’s lightning-fast native compiler, and ESLint’s v9.0 milestone reflections. Plus, a killer lineup of tools, including Astra and Defuddle, to supercharge your development workflow.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Angular v20 Previewed at Google I/O 2025&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://youtu.be/eIeJmYdYMQo?si=6KsvJG8P-ylxLpbU" rel="noopener noreferrer"&gt;At Google I/O on May 21, 2025, the Angular team dropped a bombshell&lt;/a&gt;&lt;/strong&gt;, unveiling Angular v20, set to launch May 29. This release turbocharges server-side rendering (SSR), signals, and authoring, delivering a slicker developer experience and blazing-fast apps.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Zoneless Angular (Developer Preview)&lt;/strong&gt;: Ditches Zone.js for precise change detection using signals, slashing unnecessary DOM checks. Use markForChange or signals’ state awareness for targeted updates.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Signal Ecosystem Overhaul&lt;/strong&gt;: Signal and Computed are now stable, with LinkedSignal (stable in v20) enabling writable, state-dependent signals that access prior states. Resource and HTTPResource streamline async data fetching, with StreamingResource for real-time UI updates.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;SSR Enhancements&lt;/strong&gt;: Route-level render mode APIs allow hybrid rendering (SSR, static site generation, client-side). Incremental hydration defers component hydration via defer blocks, reducing initial bundle sizes. Event replay captures user interactions during JS loading, ensuring no missed clicks.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Authoring Improvements&lt;/strong&gt;: Standalone components are default, with let syntax for template variables and untagged literals for dynamic class/styling. Hot module replacement (HMR) preserves app state during dev.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;New Integrations&lt;/strong&gt;: Experimental Vite support for testing, a custom Angular track in Chrome DevTools’ flame chart (color-coded for change detection, TypeScript), and Firebase App Hosting for seamless SSR deployments.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Angular v20 is a powerhouse for enterprise apps, with a new AI portal (angular.dev/ai) for LLM-driven workflows. Tune in to the v20 event on May 29 at 9 AM Pacific on YouTube!&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Anthropic’s Claude 4: A Coding Revolution&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://www.anthropic.com/news/claude-4" rel="noopener noreferrer"&gt;Anthropic unveiled Claude 4 (Opus 4 and Sonnet 4) &lt;/a&gt;&lt;/strong&gt;on May 23, 2025, setting a new bar for coding AI. With 72.5% (Opus) and 72.7% (Sonnet) on SWE-bench, these models power Claude Code and top-tier coding agents, transforming JavaScript workflows.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Opus 4’s Coding Edge&lt;/strong&gt;: Leads with 43.2% on Terminal-bench, excelling in long-running tasks (e.g., 7-hour open-source refactors). Creates “memory files” for local file access, boosting task coherence (e.g., generating a Pokémon “Navigation Guide”).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Sonnet 4’s Efficiency&lt;/strong&gt;: Balances performance and cost, with enhanced steerability for precise implementations. Reduces navigation errors from 20% to near zero, ideal for multi-file edits and autonomous app development.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Agentic Improvements&lt;/strong&gt;: 65% less shortcut behavior, with parallel tool execution and memory enhancements. Thinking summaries (using a smaller model) condense long thought processes, with full chains available via Developer Mode.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Claude Code SDK&lt;/strong&gt;: Now generally available, integrates into VS Code/JetBrains (beta extensions) for inline edits. The SDK enables custom agents, with a GitHub beta for PR feedback and CI error fixes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use Cases&lt;/strong&gt;: Cursor praises Opus 4’s codebase understanding, Replit lauds multi-file precision, and GitHub integrates Sonnet 4 into Copilot for agentic scenarios.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Claude 4 is a JavaScript developer’s dream, automating complex tasks with surgical precision.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;TypeScript Native Previews: 10x Faster Compilation&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://devblogs.microsoft.com/typescript/announcing-typescript-native-previews/" rel="noopener noreferrer"&gt;Microsoft announced TypeScript Native Previews&lt;/a&gt;&lt;/strong&gt; on May 23, 2025, introducing “tsgo,” a Go-based compiler delivering up to 10x faster compile times on large projects, slashing editor startup and memory usage.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Go-Powered Architecture&lt;/strong&gt;: Leverages Go’s shared memory parallelism and concurrency for rapid type-checking and compilation.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Current Capabilities&lt;/strong&gt;: Supports editor scenarios, loading complex projects like TypeScript’s own codebase. Available via npm (typescript-native) and VS Code Marketplace.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Roadmap&lt;/strong&gt;: Targets feature parity by year-end, adding project builds, emit, and language services. Future integration with tsc for seamless adoption.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Performance Gains&lt;/strong&gt;: Early tests show 2-3x faster incremental builds on large codebases, with potential for 10x on optimized setups.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A must-try for TypeScript developers, tsgo promises to obliterate build bottlenecks.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;ECMAScript 2026: The Future of JavaScript&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://tc39.es/ecma262/" rel="noopener noreferrer"&gt;The ECMAScript 2026 Language Specification&lt;/a&gt;&lt;/strong&gt;, the 17th edition, is shaping up to evolve JavaScript further. Building on ECMAScript 2025’s pattern matching and JSON module imports, it’s set to enhance web, server, and embedded apps.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Proposed Features&lt;/strong&gt;: New Set methods (union, intersection, difference) for robust data manipulation. Enhanced regex with potential duplicate named capturing groups.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Performance Focus&lt;/strong&gt;: Optimizations for reactive systems and async operations, building on Promise.try and RegExp.escape from 2025.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Ecosystem Impact&lt;/strong&gt;: Aims to streamline state management and improve interoperability with frameworks like React and Angular.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;ECMAScript 2026 keeps JavaScript at the cutting edge, powering tomorrow’s apps.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;ESLint v9.0.0: Lessons from a Landmark Release&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;On May 21, 2025, Nicholas C. Zakas reflected on &lt;strong&gt;&lt;a href="https://eslint.org/blog/2025/05/eslint-v9.0.0-retrospective/" rel="noopener noreferrer"&gt;ESLint v9.0’s April 2024&lt;/a&gt;&lt;/strong&gt; release, which introduced the flat-config system, streamlining linting for JavaScript developers.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Flat-Config System&lt;/strong&gt;: Replaces eslintrc with a single eslint.config.js, simplifying rule setups. Supports ESLint#calculateConfigForFile for dynamic configs.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;New Features&lt;/strong&gt;: Config inspector (--inspect-config) visualizes rule setups. Enhanced Node.js version handling for better compatibility.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Challenges&lt;/strong&gt;: Breaking changes caused migration hurdles, with lessons for smoother transitions in v10.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Trusted by Microsoft and Netflix, ESLint v9.0.0 remains a code quality cornerstone.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Tools &amp;amp; Releases You Should Know About&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Let’s speed-run through some epic tools from this week to supercharge your JavaScript projects!&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://github.com/astracompiler/cli" rel="noopener noreferrer"&gt;Astra&lt;/a&gt;&lt;/strong&gt;: This CLI tool compiles JavaScript into standalone Windows executables, bundling Node.js apps into single .exe files without external dependencies. Supports custom icons and metadata for branded apps. Ideal for desktop utilities or distributing CLI tools, with a lightweight footprint and fast startup. Perfect for developers targeting Windows users with zero-hassle installs.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://github.com/kepano/defuddle" rel="noopener noreferrer"&gt;Defuddle&lt;/a&gt;&lt;/strong&gt;: A JavaScript library for extracting clean, readable content from web pages by stripping clutter like ads and sidebars. Uses heuristic parsing and DOM traversal to isolate main content, with options to customize extraction rules. Great for scraping, content aggregation, or building reader modes, with minimal setup and high accuracy on complex sites.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://github.com/humanwhocodes/crosspost/" rel="noopener noreferrer"&gt;Crosspost&lt;/a&gt;&lt;/strong&gt;: A CLI tool for cross-posting content from one blogging platform to another, built with Node.js. Supports platforms like Dev.to, Hashnode, and Medium, with configurable mappings for markdown, frontmatter, and metadata. Handles authentication via API tokens and batch processing for bulk posts. Perfect for JavaScript developers managing multiple blogs, saving time on content syndication.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://peggyjs.org/" rel="noopener noreferrer"&gt;Peggy&lt;/a&gt;&lt;/strong&gt;: A parser generator for JavaScript that creates fast, customizable parsers from PEG (Parsing Expression Grammar) definitions. Generates standalone or module-based parsers with zero dependencies, supporting complex grammars for DSLs, compilers, or data formats. Features error reporting, tracing, and TypeScript compatibility. Ideal for devs building language tools or processing structured data in JavaScript.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And that’s it for the thirty-sixth issue of &lt;em&gt;This Week in JavaScript&lt;/em&gt;, brought to you by &lt;strong&gt;&lt;a href="https://jam.dev/" rel="noopener noreferrer"&gt;jam.dev&lt;/a&gt;&lt;/strong&gt;—the tool that makes it impossible for your team to send you bad bug reports.&lt;/p&gt;

&lt;p&gt;Feel free to share this newsletter with a fellow developer, and make sure you’re following for more weekly updates.&lt;/p&gt;

&lt;p&gt;Until next time, happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Fully agentic coding with OpenAI Codex, JavaScript’s New Superpower, Deno’s updated next-gen web framework, and more</title>
      <dc:creator>This Week In JavaScript</dc:creator>
      <pubDate>Sun, 18 May 2025 17:00:00 +0000</pubDate>
      <link>https://dev.to/thisweekinjavascript/fully-agentic-coding-with-openai-codex-javascripts-new-superpower-denos-updated-next-gen-web-3lk5</link>
      <guid>https://dev.to/thisweekinjavascript/fully-agentic-coding-with-openai-codex-javascripts-new-superpower-denos-updated-next-gen-web-3lk5</guid>
      <description>&lt;p&gt;Hello JavaScript Enthusiasts!&lt;/p&gt;

&lt;p&gt;Welcome to a new edition of &lt;strong&gt;“This Week in JavaScript”&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;This week, we’re diving into V8 13.8’s JavaScript resource management, The latest update to Fresh, the next-gen web framework from Deno, and tools you don’t want to miss. Let’s get started!&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;OpenAI Codex is Finally Here&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://openai.com/index/introducing-codex/" rel="noopener noreferrer"&gt;Codex&lt;/a&gt;&lt;/strong&gt; is OpenAI’s software engineering agent that helps developers, especially web and JavaScript developers-automate coding tasks, boost productivity, and handle multiple tasks securely. Each task runs in its own cloud sandbox environment, preloaded with your repository.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Built for developers:&lt;/strong&gt;&lt;br&gt;
Codex excels in JavaScript and frameworks like React, Node.js, and TypeScript. It can generate, refactor, debug code, write tests, and help understand codebases for both frontend and backend projects.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Technical details:&lt;/strong&gt;&lt;br&gt;
Powered by the codex-1 model and trained via reinforcement learning on millions of coding tasks, Codex runs in secure, isolated cloud containers. It takes natural language or code prompts, generates code, and runs tests and linters automatically until passing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Parallel task handling:&lt;/strong&gt;&lt;br&gt;
Codex can manage multiple tasks at once, such as adding features, fixing bugs, and running tests, speeding up development and reducing interruptions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Use cases:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Prototyping React components with accessibility&lt;/li&gt;
&lt;li&gt;Migrating JavaScript to TypeScript&lt;/li&gt;
&lt;li&gt;Automating Node.js CI/CD pipelines&lt;/li&gt;
&lt;li&gt;Enhancing test coverage and debugging&lt;/li&gt;
&lt;li&gt;Helping non-developers with small fixes&lt;/li&gt;
&lt;li&gt;Supporting large refactors in companies like Cisco&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Security and compliance:&lt;/strong&gt;&lt;br&gt;
Runs in sandboxed environments without internet access, protecting sensitive data and including automatic vulnerability scanning.&lt;/p&gt;

&lt;p&gt;**Limitations &amp;amp; future plans:&lt;br&gt;
**Some tasks take up to 30 minutes; no visual design or real-time collaboration yet. Future updates include browser-based execution, Figma integration, and multi-agent coordination.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;JavaScript’s New Superpower: Explicit Resource Management in V8 v13.8&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://v8.dev/features/explicit-resource-management" rel="noopener noreferrer"&gt;The V8 engine&lt;/a&gt;&lt;/strong&gt; now introduces Explicit Resource Management (ERM) — a feature long requested by developers seeking more control over resource cleanup. Traditionally, JavaScript relied on garbage collection, making resource disposal non-deterministic. ERM changes that.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;using Blocks&lt;/strong&gt;: Wrap resources like file handles or streams in using/await using blocks for automatic cleanup.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Custom Disposable Protocol:&lt;/strong&gt; Objects can implement a &lt;a href=""&gt;Symbol.dispose&lt;/a&gt; or &lt;a href=""&gt;Symbol.asyncDispose&lt;/a&gt; method to define how they release external resources.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Synchronous + Async Support:&lt;/strong&gt; This covers both sync and async resource management needs.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This gives developers more deterministic control — especially for scenarios involving file handles, streams, sockets, or GPU resources — all without waiting for GC to catch up.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Deno Fresh is (Still) Here, with a v2 Upgrade&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://deno.com/blog/an-update-on-fresh" rel="noopener noreferrer"&gt;The Deno team just dropped a major update on Fresh, &lt;/a&gt;their edge-first full-stack web framework built for performance and simplicity. With V1.6 and beyond, Fresh is moving into a more mature phase of development.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;New Build System&lt;/strong&gt;: Fresh now uses a faster Rust-based builder (Island Builder) to speed up dev experience and production builds.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Improved DX&lt;/strong&gt;: A simplified CLI, better error messages, and smarter routing improve developer onboarding and iteration speed.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;New Plugin Architecture&lt;/strong&gt;: Official support for plugins and integrations, starting with Tailwind and Deno KV.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Focused on "island-based" rendering, Fresh delivers fast pages by sending minimal JavaScript to the client — ideal for edge environments like Deno Deploy. Fresh is increasingly becoming a strong choice for those who want performance without giving up on Developer Experience.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Node.js Released Critical Security Updates&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Heads up, Node.js developers! Critical security patches are out for multiple versions — including v24.0.2, v23.11.1, v22.15.1, and v20.19.2. If you’re running on Node, this one’s important.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Cryptographic Fix&lt;/strong&gt;: Resolves crashes during TLS and encryption operations, essential for secure data handling.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;HTTP Header Bug&lt;/strong&gt;: Prevents request manipulation and protects against accidental data leaks.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Memory Leak Patch&lt;/strong&gt;: Improves performance for long-running servers and background services.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you’re on an LTS version, this is a must-do update. Don’t skip it !&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Tools &amp;amp; Resources You Should Know About&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Let’s speed-run through some of the other big tool updates this week!&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://www.npmjs.com/package/diff" rel="noopener noreferrer"&gt;diff v8.0.1&lt;/a&gt;&lt;/strong&gt;: The popular text diffing library now offers improved performance for large datasets, better error handling, and an updated online demo—perfect for JavaScript-based CLIs or code editors.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://www.npmjs.com/package/react-aria-components/v/1.3.3" rel="noopener noreferrer"&gt;React Aria Components v1.3&lt;/a&gt;&lt;/strong&gt;: Enhanced accessibility for React apps with new components for modals and tooltips, plus better keyboard navigation—ideal for building inclusive user experiences.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://github.com/nitrojs/nitro/releases" rel="noopener noreferrer"&gt;UnJS Nitro v2.9:&lt;/a&gt;&lt;/strong&gt; This server toolkit now offers even faster cold starts, enhanced TypeScript support for stricter type safety, and improved middleware handling—perfect for JavaScript server-side projects.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://www.npmjs.com/package/tamagui?activeTab=versions" rel="noopener noreferrer"&gt;Tamagui v1.126.13&lt;/a&gt;&lt;/strong&gt;: A UI library for React Native and web, now with improved performance for complex layouts, new adaptive components for responsive design, and enhanced theming options—your cross-platform UI just got even better.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And that's it for the thirty-fifth issue of "This Week in JavaScript", brought to you by &lt;strong&gt;&lt;a href="https://jam.dev/" rel="noopener noreferrer"&gt;jam.dev&lt;/a&gt;&lt;/strong&gt;—the tool that makes it impossible for your team to send you bad bug reports.&lt;/p&gt;

&lt;p&gt;Feel free to share this newsletter with a fellow developer, and make sure you're following for more weekly updates.&lt;/p&gt;

&lt;p&gt;Until next time, happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
