--- title: "Common JavaScript issues developers face" publication: "JavaScript Weekly" issue: 599 published_at: "2022-07-22" canonical_url: "https://javascriptweekly.com/issues/599" --- Plus where the Bun benchmark went wrong, AST manipulation with Babel, and an online MIDI editor. | #​599 — July 22, 2022 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/599) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/t4kfyaz9aeh5izpuwgru.jpg)](https://blog.risingstack.com/redwoodjs-vs-blitzjs-comparison/) [RedwoodJS vs. Blitz.js: The Future of Fullstack Meta-Frameworks](https://blog.risingstack.com/redwoodjs-vs-blitzjs-comparison/) — Quite a lengthy review of both frameworks. Redwood is an opinionated React-based framework oriented heavily round the idea of a GraphQL server as the ‘one API’ at the heart of an app. Blitz, on the other hand, is a Ruby on Rails-inspired layer on top of Next.js with SPA, server side rendering _and_ static site generation chops. Don't forget [Remix](https://remix.run/) too.. this is a busy space! Tamas Kadlecsik [Ten Common JavaScript Issues Developers Face](https://www.toptal.com/javascript/10-most-common-javascript-mistakes) — If you’ve been working with JavaScript for many years (perhaps since 2014 when this newly-updated article was _first_ penned), these are potholes you (probably) already know how to steer around, but there’s plenty to chew on here otherwise. Ryan J. Peterson [![\](https://copm.s3.amazonaws.com/20dc038e.jpg)](https://frontendmasters.com/courses/css-animations/?utm_source=javascriptweekly&utm_medium=email&utm_content=cssanimations) [CSS Animations and Transitions](https://frontendmasters.com/courses/css-animations/?utm_source=javascriptweekly&utm_medium=email&utm_content=cssanimations) — Join David Khourshid on this detailed video course and discover how to bring your interfaces to life with UI animations. Learn about CSS transitions, keyframes, custom properties, choreography, animation states, and much more Frontend Masters sponsor [Reducing the Size of a Large JavaScript SDK Package by 29%](https://blog.sentry.io/2022/07/19/javascript-sdk-package-reduced) — After some comments on how large their JavaScript package was getting, developers at Sentry (an app monitoring service) set to work trying to get an initial 30% reduction. Tree shaking turned out to have the biggest effect. Abhijeet Prasad (Sentry) [Payload 1.0: A Headless CMS Platform Built on Node](https://payloadcms.com/blog/payload-launches-version-1) — An exciting project that appeared in early 2021 [with a bang](https://payloadcms.com/blog/introducing-payload-2021s-node-react-headless-cms-for-javascript-developers) then [became open source](https://payloadcms.com/blog/open-source) just a couple of months ago. There’s a lot to like about Payload if you need a headless CMS including a customizable React-based admin system, GraphQL _or_ REST APIs, flexible auth and file upload systems, and it’s easy to [get started](https://payloadcms.com/docs/getting-started/installation). [GitHub repo](https://github.com/payloadcms/payload). Payload CMS **IN BRIEF:** - **UPDATE / ERROR:** Last week we linked to [a comparison of Bun and Node.js's performance](https://techsparx.com/nodejs/bun/1st-trial.html) but, as is often the case with benchmarks, [there was a flaw:](https://mobile.twitter.com/jarredsumner/status/1549790511422062592) Node.js was being run in both cases! 😬 We await further results. _Thanks to Craig Doremus for letting us know._ - Hemanth HM presents a [quick update from the 91st TC39 meeting](https://dev.to/hemanth/updates-from-the-91th-tc39-meeting-779) where several language proposals were advanced. - _Hermes_ is a JS engine built by Facebook primarily for use in _React Native_ and, curiously, it was possible to misuse its quicksort implementation [to run the classic FPS _DOOM_](https://engineering.fb.com/2022/07/20/security/hermes-quicksort-to-run-doom/) – a bug resulting in a $12k bounty payout. - 📊 [A data-driven attempt to compare](https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190) the popularity of React, Angular, Angular.js, Vue and Svelte. Spoiler: React sits on top. **RELEASES:** [NeutralinoJS 4.7.0](https://github.com/neutralinojs/neutralinojs/releases/tag/v4.7.0) – Lightweight cross platform apps with JS & HTML. [npm-check 6.0](https://github.com/dylang/npm-check) – Check for outdated or unused dependencies. [Fastify 4.3](https://github.com/fastify/fastify) – Fast Node.js web framework. [ESLint 8.20](https://eslint.org/blog/2022/07/eslint-v8.20.0-released/) [Angular 14.1](https://github.com/angular/angular/releases/tag/14.1.0) [Vue 2.7.8](https://github.com/vuejs/vue/blob/main/CHANGELOG.md) .. and more releases at end of this issue. 📒 Articles & Tutorials [Thoughts on Integer Math in JavaScript](https://james.darpinian.com/blog/integer-math-in-javascript) — No concrete examples here but if fast integer math is something you need, you could do worse than to build upon James’ thinking (to which he hopes to write a more complete follow-up). James Darpinian [JavaScript Obfuscation Techniques by Example](https://www.trickster.dev/post/javascript-obfuscation-techniques-by-example/) — The [Hacker News discussion](https://news.ycombinator.com/item?id=32130313) around this article was, perhaps, even more interesting, I thought. Trickster Dev [10 npm Security Best Practices](https://snyk.io/blog/ten-npm-security-best-practices/?utm_campaign=AOM-2022&utm_medium=Paid-Email&utm_source=Cooperpress-Javascript-Weekly&utm_content=ten-npm-security-best-practices) Snyk.io sponsor [JavaScript AST Manipulation with Babel: The First Steps](https://www.trickster.dev/post/javascript-ast-manipulation-with-babel-the-first-steps/) — From the same author as the item on obfuscation (above) comes a look at the basics of using Babel to turn obfuscated code into a syntax tree and then back into more readable JavaScript. Trickster Dev ▶[An Introduction to SvelteKit in 80 Minutes](https://www.youtube.com/watch?v=oJqkhK_FkQ4) — [Svelte](https://svelte.dev/) is an increasingly popular way to build reactive frontend apps and [Svelte_Kit_](https://kit.svelte.dev/) provides a framework and more complete development experience around Svelte. Nacho gives us a tour. Nacho Falk ▶[Blazingly Fast 'React' with Fresh](https://www.youtube.com/watch?v=Q4dos7-gX68) — One of the most popular React YouTubers out there heads Deno-side to look at [Fresh](https://fresh.deno.dev/), a new islands-based web framework that doesn’t use React _per se_ but.. close enough, with Preact and JSX for rendering and templating. Jack Herrington [2022 State of the Java Ecosystem Report](https://newrelic.com/resources/report/2022-state-of-java-ecosystem?utm_source=javascript-weekly&utm_medium=community&utm_campaign=global-fy23-q1-state-of-java-ecosystem-report) — New Relic’s report is based on data gathered from millions of applications providing performance data. New Relic sponsor [Converting Cypress E2E Specs from JavaScript to TypeScript](https://glebbahmutov.com/blog/cypress-js-to-ts/) — More to it than you might expect. Gleb Bahmutov 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/cojxryukbkv3szwnvwja.jpg)](https://cocopon.github.io/tweakpane/) [Tweakpane 3.1: Compact UI Element for Tweaking Parameters and Viewing Value Changes](https://cocopon.github.io/tweakpane/) — This is the sort of thing you see in _creative coding_ demos quite often, but could be used almost anywhere. You can create your own mini pane of basic UI controls to dynamically adjust (or just reflect) values relating to something going on on the page. It’s simple and looks great, and if you want a demo, then… cocopon [Fireworks.js 2.0: It's Literally Fireworks for Your Web Page](https://fireworks.js.org/) — Well, literally in a _visual_ sense at least ;-) The homepage is a neat demo given you can dynamically play around with all of the library’s parameters (courtesy of [Tweakpane](https://cocopon.github.io/tweakpane/), mentioned above!) Vitalij Ryndin [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 [Superstate: A New 'Micro' State Management Library](https://superstate.dev/) — So micro, even, that the [getting started](https://superstate.dev/getting-started/first-state) tutorial takes all of 30 seconds to read. [GitHub repo](https://github.com/chiefGui/superstate). Guilherme Oderdenge [TanStack Table v8: Headless UI for Building Tables and Datagrids](https://tanstack.com/table/v8) — Want the hard work of managing a table or data grid element taken care of _but_ want to keep 100% control over markup and styles? This is what you need (if the idea of a ‘headless UI’ is new to you, [read this intro](https://tanstack.com/table/v8/docs/guide/introduction)). Vanilla JS, React, Vue, Solid and Svelte developers are all taken care of. Tanner Linsley [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/k0p8ezfzsdgj1luvadba.jpg)](https://atroposjs.com/) [Atropos: Create Touch-Friendly 3D Parallax Hover Effects](https://atroposjs.com/) — Use with plain JS, React, or Vue and it’s easy to configure with no dependencies. The home page includes some quite striking examples that aren’t as over the top as you’d expect. Vladimir Kharlampidi **OTHER QUICK RELEASES:** [PrimeNG 14](https://www.primefaces.org/primeng/) – Suite of 80+ Angular UI components. [Acorn 8.8](https://github.com/acornjs/acorn) – Tiny JS parser written in pure JS. [Discord.ts 10.0](https://github.com/oceanroleplay/discord.ts) – Framework to create a Discord chat bot. [Prisma 4.1](https://github.com/prisma/prisma) – Popular ORM for Node.js and TypeScript. [MelonJS 13.0](https://github.com/melonjs/melonJS) – 2D sprite-based JS game engine. [Secure Electron Template 20.0](https://github.com/reZach/secure-electron-template) – An Electron boilerplate app. [zip.js 2.6.2](https://github.com/gildas-lormeau/zip.js) – Zip and unzip files in the browser or Deno. [Octokit.js 2.0.4](https://github.com/octokit/octokit.js) – GitHub SDK for browsers, Node, and Deno. 💻 Jobs [Software Engineers](https://www.stickermule.com/careers) — Sticker Mule is the Internet's most "kick ass" brand. Our software team operates from 17 countries, and we're always looking for more exceptional engineers. Sticker mule [Attend Our July 27th 2022 State of Wage Inequality in Tech Discussion](https://stateofwageinequalityintech.splashthat.com/Newsletters) — Join Hired, Blacks in Technology, Ada’s List, Interview Kickstart, and Speak_ for a collaborative panel discussion about Hired’s 2022 Impact of Wage Inequality data report. Hired ❓ **Did you know..** - ... there's a fully [open source online MIDI editor](https://signal.vercel.app/) called _Signal?_ Quite fun to compose with (or, in my case, just scribble notes over). - ... _Smashing Magazine_ has done a roundup of [image compression and optimization tools?](https://www.smashingmagazine.com/2022/07/powerful-image-optimization-tools/) Mostly online, but some local ones too. - ... there's a Web site that [satirizes the modern Web browsing experience?](https://how-i-experience-web-today.com/detail.html) Amazing and dispiriting in equal measure. - ... 🌆 you can [create a miniature 3D 'city'](https://honzaap.github.io/GithubCity/) of your GitHub contributions? - ... we have [💌 a Node.js newsletter too?](https://nodeweekly.com/issues/447) 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