---
title: "Why document.write() is bad"
publication: "JavaScript Weekly"
issue: 622
published_at: "2023-01-20"
canonical_url: "https://javascriptweekly.com/issues/622"
---

Plus some rough notation, a fresh Bun, improved WebAssembly / browser API interop, and a handy VS Code extension. |        

#​622 — January 20, 2023 

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

Together with [![Snyk logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_250,h_120/e_make_transparent/co_white,e_outline:7/sdeteoqcmni8srbzlfbm.png)](https://snyk.io/blog/dependency-injection-in-javascript/?utm_campaign=AOM-2023&utm_medium=Paid-Email&utm_source=cooperpress-javascript-weekly&utm_content=dependency-injection-in-javascript)  

JavaScript Weekly 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/pwdvtg1908v8it2x6h1k.jpg)](https://csswizardry.com/2023/01/why-not-document-write/)  

[Why Not `document.write()`?](https://csswizardry.com/2023/01/why-not-document-write/) — Many moons ago, `document.write` was a mainstay of client-side JavaScript code, but it's long been considered a bad practice – why? Harry digs in, noting that it “_guarantees both a blocking fetch and a blocking execution, which holds up the parser for far longer than necessary_”. 

Harry Roberts   

New: [The WebAssembly JavaScript Promise Integration API](https://v8.dev/blog/jspi) — A technical explanation from the V8 team on a new API to let WebAssembly apps bridge the synchronous / asynchronous gap of expectations around external functionality (consider that many apps are written synchronously, but modern Web APIs are usually _asynchronous_). JSPI helps bridge both worlds and can be tested via a flag in Chrome. 

McCabe, Michaud, Rezvov, Dahl / V8 Team   [![\](https://copm.s3.amazonaws.com/f1f2cf88.png)](https://snyk.io/blog/dependency-injection-in-javascript/?utm_campaign=AOM-2023&utm_medium=Paid-Email&utm_source=cooperpress-javascript-weekly&utm_content=dependency-injection-in-javascript) 

[Break the Programming Mold with Dependency Injection](https://snyk.io/blog/dependency-injection-in-javascript/?utm_campaign=AOM-2023&utm_medium=Paid-Email&utm_source=cooperpress-javascript-weekly&utm_content=dependency-injection-in-javascript) — **Keep your code on the cutting edge with dependency** injection in JavaScript. Check out Snyk’s guide that gives a breakdown of what dependency injection is, when you should use it, and what popular JavaScript frameworks it’s implemented. 

Snyk sponsor   

[Why Is My Jest Suite So Slow?](https://t.co/7KzLDKqSyc) — [Jest](https://jestjs.io/) is known for its speed and simplicity so the author was surprised at how quickly his team’s test suite was slowing down. This is a write up of the ensuing investigation along with the improvements that slashed test running time. 

Steven Lemon   

[Bun v0.5 Released](https://bun.sh/blog/bun-v0.5.0) — [Bun](https://bun.sh/) is another JavaScript runtime taking the world by storm and a level of Node compatibility has been baked in from the start. v0.5 adds support for `node:readline`, workspaces, a `node:dns` shim, and network socket creation support such that more Node.js-based database libraries work out of the box. 

Ashcon Partovi   

**IN BRIEF:** 

- The [▶️ latest episode of the _JS Party_ podcast](https://changelog.com/jsparty/258) tackles 'the rise and fall' of JavaScript frameworks and the modern trend towards smaller ones.
- The folks at NodeSource have put together [a top 10 list of Node open-source projects](https://nodesource.com/blog/2023-NSolid-Awards) 'to keep an eye on' in 2023.
- [Aurelia 2 is now in beta.](http://aurelia.io/blog/2023/1/14/announcing-the-aurelia-2-beta/)   

**RELEASES:** 

- ⭐️ [esbuild 0.17.0](https://github.com/evanw/esbuild/releases/tag/v0.17.0)
 ↳ Popular bundler. Note that this is a key release with backwards incompatible changes.
- [Inertia.js 1.0](https://inertiajs.com/)
 ↳ Build SPAs for any backend.
- [React Native 0.71](https://reactnative.dev/blog/2023/01/12/version-071)
- [Remix 1.10.0](https://github.com/remix-run/remix/releases/tag/remix%401.10.0)
 ↳ Popular full stack framework.  

📒 Articles & Tutorials 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/dew3pufmxkcqmymf5qt8.jpg)](https://fossheim.io/writing/posts/accessible-theme-picker-html-css-js/)  

🎨 [Building an Accessible Theme Picker](https://fossheim.io/writing/posts/accessible-theme-picker-html-css-js/) — An attractively presented, easy to follow tutorial for a handy site feature. 

Sarah L. Fossheim   

[Fixing a Memory Leak in a Production Node.js App](https://kentcdodds.com/blog/fixing-a-memory-leak-in-a-production-node-js-app) — Kent encountered a variety of weird memory and CPU usage spikes in his Node-powered app and decided to figure out what was going on. This post walks through his complete journey, with plenty of side problems encountered along the way, before discovering the root cause was where he least expected it. 

Kent C Dodds   

[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=Promoted_Newsletter&utm_content=Developer&utm_campaign=JavascriptWeekly_January2023_blog_klmh22&utm_term=textbody) — Build a responsive chat app with emojis/reactions, built-in GIF support, ability to edit/delete messages, direct & group chat, and more. 

Stream sponsor   

📊 [A Beginner’s Guide to Chrome Tracing](https://nolanlawson.com/2022/10/26/a-beginners-guide-to-chrome-tracing/) — For when you want to go deeper than the _Performance_ tab. With tracing, you can record what a browser is up to far behind the scenes. 

Nolan Lawson   

[Handling Errors Like a Pro in TypeScript](https://engineering.udacity.com/handling-errors-like-a-pro-in-typescript-d7a314ad4991) — _“Learn the design pattern I use to handle errors and write cleaner code.”_ 

Kolby Sisk   

[A Beginner's Guide to `async/await` with Examples](https://www.sitepoint.com/javascript-async-await/) 
James Hibbard   

[10 Mistakes to Avoid When Starting with Vue 3](https://fadamakis.com/10-mistakes-to-avoid-when-starting-with-vue-3-1d1ced8552ae) 
Fotis Adamakis  

🛠 Code & Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ljpze8xielxxhmpojg9z.jpg)](https://roughnotation.com/)  

[RoughNotation: Cute Animated 'Rough' Text Annotations](https://roughnotation.com/) — Uses [Rough.js](https://roughjs.com/) (itself a project worth checking out) to get a hand-drawn look. Lots of nice interactive examples on the page showing a variety of annotation styles (boxes, underlines, circles..) 

Preet Shihn   

[Free Website Speed Test: Does Your Site Meet Google's Core Web Vitals?](https://www.debugbear.com/test/website-speed?utm_source=newsletter&utm_medium=sponsored&utm_campaign=javascript-weekly-1) — Get an in-depth technical analysis of your site and learn how to make it fast. Rank higher in Google & deliver great UX. 

DebugBear sponsor   

[Modern Errors: Handle Errors in a Simple, Stable, Consistent Way](https://github.com/ehmicky/modern-errors) — Create error classes, wrap or aggregate errors, or use one of several plugins to do things like print bug reporting info, print stack traces, or more. Happy in both Node and the browser. 

ehmicky   

[Shifty: A Small, Fast Tweening Engine](https://jeremyckahn.github.io/shifty/doc/) — _All_ it does is tweening. It’s a low level animation solution that you can integrate into any rendering mechanism of your choice. The examples here demonstrate it well as it can be used for ‘animating’ things in an unconventional sense. [GitHub repo.](https://github.com/jeremyckahn/shifty) 

Jeremy Kahn   

[Barba.js: For Smooth Visual Transitions Between Pages](https://barba.js.org/) — You certainly can’t say the project’s homepage doesn’t show off all of its features! For such a dramatic set of effects, things feel smooth and.. surprisingly tolerable 😁 [GitHub repo.](https://github.com/barbajs/barba) 

De Rosa, Michel, et al.   

[Rete.js 1.5: A Framework for Visual Programming](https://rete.js.org/) — Create a node-based editor in the browser and apply logic. Check out [these](https://codepen.io/Ni55aN/pen/xzgQYq) [demos](https://codesandbox.io/embed/9jp88p1jpy?view=preview) on CodePen. [GitHub repo.](https://github.com/retejs/rete) 

Vitaliy Stoliarov   

[Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut](https://shortcut.com/?utm_source=cooperJSWeekly&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=fourletter) 

Shortcut (formerly Clubhouse.io) sponsor   

[gpu-io: GPU-Accelerated Computing Library](https://github.com/amandaghassaei/gpu-io) — for physics simulations and other mathematical calculations. A neat look at the power of WebGL. [Several examples.](https://apps.amandaghassaei.com/gpu-io/examples/) 

Amanda Ghassaei   

- [Chart.js 4.2](https://github.com/chartjs/Chart.js)
 ↳ Simple Canvas-based charts. ([Samples.](https://www.chartjs.org/docs/latest/samples/information.html))
- [Serialize JavaScript 6.0.1](https://github.com/yahoo/serialize-javascript)
 ↳ Serialize JS to a JSON superset.
- [axios-retry 3.4](https://github.com/softonic/axios-retry)
 ↳ Axios plugin that retries failed requests.
- [Axios 1.2.3](https://github.com/axios/axios) – Popular HTTP client library.
- [Commander.js 10.0](https://github.com/tj/commander.js) – Node.js CLIs made easy.
- [Mineflayer 4.7](https://github.com/PrismarineJS/mineflayer) – JS API for Minecraft bots.
- [Wretch 2.4](https://github.com/elbywan/wretch) – Fetch API wrapper with niceties.    

💻 Jobs  

[Developer Relations Manager](https://cksource.com/careers/?utm_source=jsweekly&utm_medium=email&utm_campaign=jan06#developer-relations-manager) — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀 
CKEditor   

[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           

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