---
title: "Vite 4.0 released"
publication: "JavaScript Weekly"
issue: 618
published_at: "2022-12-09"
canonical_url: "https://javascriptweekly.com/issues/618"
---

Plus a new visual IDE for React from Wix, and how about a TypeScript-flavored CoffeeScript? |        

#​618 — December 9, 2022 

[Read on the Web](https://javascriptweekly.com/issues/618)  

Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/javascript-first-steps/?utm_source=javascriptweekly&utm_medium=email&utm_content=jsfirststeps)  

JavaScript Weekly 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/zosld1psn8ovtqurdk6c.jpg)](https://vitejs.dev/blog/announcing-vite4.html)  

[Vite 4.0 Released](https://vitejs.dev/blog/announcing-vite4.html) — From the same creator as Vue.js, Vite is an exciting piece of frontend tooling offering lots of goodies out of the box: fast hot module replacement, instant server starts, optimized builds with Rollup, TypeScript and JSX support (more on [why to use Vite here](https://vitejs.dev/guide/why.html)). You can even give it a quick spin _online_ via [vite.new](https://vite.new/). 

Evan You and Vite Contributors   [![\](https://copm.s3.amazonaws.com/649673c9.png)](https://frontendmasters.com/courses/javascript-first-steps/?utm_source=javascriptweekly&utm_medium=email&utm_content=jsfirststeps) 

[Anjana Vakil on the JavaScript Fundamentals](https://frontendmasters.com/courses/javascript-first-steps/?utm_source=javascriptweekly&utm_medium=email&utm_content=jsfirststeps) — This video course covers the core skills needed to become a professional JavaScript programmer, including writing reusable code with functions, conditionals, fetching data from APIs, and more. It's everything you need to continue your journey to become effective at JavaScript. 

Frontend Masters sponsor   

[npm Gains New Security Features](https://github.blog/2022-12-06-new-npm-features-for-secure-publishing-and-safe-consumption/) — GitHub continues its work in making the npm ecosystem safer. Two new things: [granular access tokens](https://docs.npmjs.com/about-access-tokens#about-granular-access-tokens) so package owners can better control access to publishing workflows, and a new [code explorer](https://www.npmjs.com/package/npm?activeTab=explore) to look directly at the contents of packages from the official npm site. 

Monish Mohan (GitHub)   

[Console Ninja: `console.log` Output Right Next to Your Code](https://console-ninja.com/) — A VS Code extension that displays `console.log` output and runtime errors next to your code. Jack Herrington recorded [▶️ a neat 6 minute intro](https://www.youtube.com/watch?v=bmKDT-yG2eE) showing it off recently. 

Wallaby.js Team   

**IN BRIEF:** 

- There's a React _documentary_ in production – [▶️ here's the trailer](https://www.youtube.com/watch?v=gmp0istg5xo).
- AWS has unveiled [_Step Functions Distributed Map_](https://aws.amazon.com/blogs/aws/step-functions-distributed-map-a-serverless-solution-for-large-scale-parallel-data-processing/), a way you can run hugely parallel (up to 10,000 simultaneous executions) operations (written in JavaScript, perhaps) over data and documents stored on S3.
- A quick look back 27 years to [the launch of JavaScript in 1995](https://www.webdesignmuseum.org/web-design-history/javascript-1-0-1995).
- 📊 [D3 7.7](https://github.com/d3/d3), the latest version of the popular data visualization framework, is out and I wanted to recommend looking at co-creator [Mike Bostock's notebooks](https://observablehq.com/@mbostock?tab=notebooks&type=public) if you want inspiration on using D3, a look at new features, etc. He posts interesting stuff.
- The JS debugger in the [latest VS Code release](https://code.visualstudio.com/updates/v1_74) now supports `console.profile` for CPU profiling code, as well as nested sourcemaps.   

**RELEASES:** 

- [Rome 11](https://rome.tools/blog/2022/12/06/rome11/) – _Linter in urbe novissima sunt._
- [Storybook 7.0 beta 0](https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.0)
- [Rollup 3.7](https://github.com/rollup/rollup) – ES module bundler.
- [xv 2.0](https://github.com/typicode/xv) – Zero-config Node test runner.
- [Nx 15.3](https://blog.nrwl.io/nx-15-3-standalone-projects-vite-task-graph-and-more-3ed23f7827ed) (A huge news update post.)
- [Ember 4.9](https://blog.emberjs.com/ember-4-9-released/)
- [Bun 0.3](https://bun.sh/blog/bun-v0.3.0) – The challenger JS runtime.  

📒 Articles & Tutorials  

[Sandboxing with Partytown](https://weston.ruter.net/2022/11/30/sandboxing-with-partytown/) — [Partytown](https://github.com/BuilderIO/partytown) provides a way to run third party scripts within a Web Worker rather than on the main thread. Could this be used for sandboxing? Weston tried it out and concluded it’s not _quite_ there. 

Weston Ruter   

[Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API](https://getstream.io/blog/build-a-medical-pager-app/?utm_source=JavascriptWeekly&utm_medium=Newsletter_Content_Ad&utm_content=Developer&utm_campaign=JavascriptWeekly_Jan2022_MedicalPagerMessagingApp) — Build a responsive chat app with emojis/reactions, built-in GIF support, ability to edit/delete messages, direct & group chat, and more. 

Stream sponsor   

[Is Prisma Better Than Your 'Traditional' ORM?](https://practica.dev/blog/is-prisma-better-than-your-traditional-orm/) — [Prisma](https://www.prisma.io/) has become a _very_ popular ORM option in the Node space in recent years. The creator of the [Practica](https://github.com/practicajs/practica) Node starter app considers if Prisma makes sense as a universal ‘go to’ ORM. No, but.. 

Yoni Goldberg   

[When to Use gRPC vs GraphQL](https://stackoverflow.blog/2022/11/28/when-to-use-grpc-vs-graphql/) — A balanced comparison of two popular API protocols to see where each works best. 

Loren Sands-Ramshaw   

[Breakpoints and `console.log` is the Past, Time Travel is the Future](https://wallabyjs.com/?utm_source=cooperpress&utm_medium=javascriptweekly&utm_content=javascriptweekly) — 15x faster JavaScript debugging than with breakpoints and console.log, now with support for Vitest. 

Wallaby.js sponsor   

▶[A Discussion on Optimizing Your JavaScript with Rust](https://stackoverflow.blog/2022/12/09/ready-to-optimize-your-javascript-with-rust/) — A chat with Vercel’s Lee Robinson at the recent Next.js conference. 

Ben Popper podcast  

🛠 Code & Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/n28eypwowm6ka4ixbbgy.jpg)](https://dev.to/codux/introducing-codux-15j5)  

[Codux: A Visual IDE for React](https://dev.to/codux/introducing-codux-15j5) — One of the co-founders of [Wix](https://www.wix.com) introduces a new standalone tool to accelerate the React development process. It currently only supports Chromium-based browsers but you can take it for a [test drive](https://codux-demos.com/blueprint-css-webapp/) or learn more from [its homepage](https://www.codux.com/). 

Nadav Abrahami (Wix)   

[Harlem 3.0: Simple Extensible State Management for Vue 3](https://harlemjs.com/) — Provides a simple functional API for creating, reading, and mutating state. 

Andrew Courtice   

[Open Source Firebase Alternative for Web, Mobile, and Flutter Devs](https://appwrite.io/cloud?utm_source=newsletter&utm_medium=homepage&utm_campaign=jamstackedapr14) 

Appwrite sponsor   

[JS Image Carver: Content-Aware Image Resizer and Object Remover](https://github.com/trekhleb/js-image-carver) — Uses the seam carving approach (if you’ve used ‘Content Aware Scale’ in Photoshop, you’ve seen it). The [live demo](https://trekhleb.dev/js-image-carver/) on this one is fun to watch. 

Oleksii Trekhleb   

[Civet: The CoffeeScript of TypeScript?](https://github.com/DanielXMoore/Civet) — If you liked CoffeeScript back in the day, here’s the same idea in a modern TypeScript-oriented form. 

Daniel Moore   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/zqbgrceskv1kbgtruprl.jpg)](https://beholdr.github.io/maska/#/)  

[Maska 2.1: Zero-Dependency Input Mask](https://beholdr.github.io/maska/#/) — Happy in vanilla situations, but can also integrate with Vue 2/3. [GitHub repo.](https://github.com/beholdr/maska) 

Alexander Shabunevich   

[node-calls-python: Call Python from Node](https://github.com/hmenyus/node-calls-python) — One use case the author mentions is plugging into Python’s rich ecosystem of machine learning tools. 

Menyhért Hegedűs   

[reduced.to: Open Source URL Shortening App Built with Qwik](https://github.com/origranot/reduced.to) — The app itself is live at [reduced.to](https://reduced.to/) but you might find it interesting as an example of a frontend built using the [Qwik](https://qwik.builder.io/) framework. 

Ori Granot   

📺 Yesterday, This Dot Media published Qwik's creator Misko Hevery giving [▶️ a live coding introduction to Qwik](https://www.youtube.com/watch?v=DxJgXw91cCQ) – a useful way to get up to speed.    

💻 Jobs  

[Software Engineer](https://www.stimulus.com/jobs/1539721e-7c7d-4f45-a5b0-17e5c02d7bd0) — [Stimulus](https://www.stimulus.com/jobs) is a social platform started by Sticker Mule to show what's possible if your mission is to increase human happiness. Join our engineering team. 
Stimulus   

[Senior UI Dev](https://vertexinc.avature.net/careers/JobDetail/Senior-UI-Developer/2299) — Join us and innovate with MicroFrontends, custom Node tools, build systems (Webpack/Github Actions), TypeScript, React, and more with a11y and DX in mind. 
Vertex Inc   

[Find JavaScript Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-javascriptweekly%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. 
Hired      

- [Spacetime 7.3](http://spacetime.how/)
 ↳ Lightweight JavaScript timezone library.
- [Partytown 0.7.3](https://github.com/BuilderIO/partytown)
 ↳ Run intensive third-party scripts in a worker.
- [Splitter 1.4](https://github.com/devbookhq/splitter)
 ↳ React component for split views.
- [reveal-md 5.4](https://github.com/webpro/reveal-md)
 ↳ Reveal.js presentations from Markdown files.
- [Mongoose 6.8](https://github.com/Automattic/mongoose)
 ↳ MongoDB object modeling library.
- [React Tooltip 5.0](https://github.com/ReactTooltip/react-tooltip)         

Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/cooperx86) 

'JavaScript' is a trademark of Oracle Corporation in the US
We are not endorsed by or affiliated with Oracle. 

[Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom