--- title: "Getting creative with JavaScript" publication: "JavaScript Weekly" issue: 581 published_at: "2022-03-18" canonical_url: "https://javascriptweekly.com/issues/581" --- Plus a package-based protest, delightful directory structuring for React apps, and two ways to visualize audio with JS. | #​581 — March 18, 2022 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/581) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/fwlwspwujh4vunf8emyx.jpg)](https://shaderpark.com/) [Shader Park: Create Interactive 2D and 3D Shaders with JavaScript](https://shaderpark.com/) — An open source Web-based platform, community, _and_ [library](https://www.npmjs.com/package/shader-park-core) for simplifying the mystifying world of shaders and GPUs by letting you create them procedurally with JavaScript. Lots to play with and [explore](https://shaderpark.com/explore) here. _Note: This site is heavy on the browser given its use of WebGL, so may not be suitable for every device._ Blankensmith and Whidden 💡 If you'd prefer something solely in 2D on the good old HTML canvas, [▶️ this 55-minute introduction to _creative, visual coding_](https://www.youtube.com/watch?v=dQKYao-daYw) with JavaScript is a neat alternative. [Prettier 2.6 Released](https://prettier.io/blog/2022/03/16/2.6.0.html) — The popular code formatting tool now has a `singleAttributePerLine` option to only place one attribute per line (as is common in certain types of template), adds TypeScript 4.6 support, and better formats JS code in various contexts (e.g. decorators, inline `await` in JSX, end-of-line comments). Sosuke Suzuki [![\](https://copm.s3.amazonaws.com/f795c60a.jpg)](https://vultr.com/promo/try150?promo=150OFFER30&utm_source=jsweekly&utm_medium=syndication&utm_campaign=q122) [Tired of Explaining Why Your Big Tech Cloud Bill Keeps Growing?](https://vultr.com/promo/try150?promo=150OFFER30&utm_source=jsweekly&utm_medium=syndication&utm_campaign=q122) — Vultr offers cloud compute and bare metal at a fraction of the cost of the other guys. Redeem your $150 credit today. Vultr sponsor [How npm Packages Were Used in a Protest Against the War in Ukraine](https://snyk.io/blog/peacenotwar-malicious-npm-node-ipc-package-vulnerability/) — A few days ago, users of projects reliant upon [node-ipc](https://github.com/RIAEvangelist/node-ipc) ([such as Vue CLI](https://github.com/vuejs/vue-cli/issues/7054)) began to notice odd behaviors, including files being overwritten on systems geolocated to Russia (or Belarus) and [protest messages](https://github.com/RIAEvangelist/node-ipc/issues/233). This is a complex story and another reminder of how fragile the package supply chain can be. _The Register_ has a [shorter and news-ier writeup](https://www.theregister.com/2022/03/18/protestware_javascript_node_ipc/), if you prefer. Liran Tal (Snyk) [Deno 1.20 Released](https://deno.com/blog/v1.20) — A pretty big release for the JavaScript / TypeScript runtime with increased performance, new commands for running benchmarks and test suites, timeouts for AbortSignal, plus an upgrade to V8 10.0 and TypeScript 4.6. If only all projects wrote release posts as thorough as this. The Deno Core Team **IN BRIEF:** - Joel Smith brings us up to speed with [what came out of GatsbyConf 2022](https://www.gatsbyjs.com/blog/whats-new-at-gatsbyconf-2022/). - 📅 Talking of events, [VueConf US](https://us.vuejs.org/) is headed to Fort Lauderdale, Florida between June 8-10, 2022. - Node.js has had a [swathe of security releases](https://nodejs.org/en/blog/vulnerability/mar-2022-security-releases/) (for each maintained branch) to fix an OpenSSL related [issue of high severity](https://www.openssl.org/news/secadv/20220315.txt). - [Boa](https://boa-dev.github.io/) is an in-progress JS lexer, parser and compiler being written in Rust. The [newest version](https://boa-dev.github.io/posts/2022-03-15-boa-release-14/) adds more ECMAScript features, supports almost 50% of the Test262 suite, and now uses a virtual machine to execute JS. - Writing Twitter-facing apps in JavaScript? [Twitter has announced](https://twittercommunity.com/t/introducing-new-developer-tools-for-the-twitter-api-v2/168348) a new Twitter API v2 SDK (in beta) for TS/JS. - 🤡 It's one year since the issue of JavaScript Weekly featuring [our officially worst feature image](https://javascriptweekly.com/issues/529). **RELEASES:** [Verdaccio 5.8](https://github.com/verdaccio/verdaccio) – Private npm registry, now with [customizable web UI.](https://verdaccio.org/docs/webui/) [Vuetify 3.0 Beta](https://github.com/vuetifyjs/vuetify/releases/tag/v3.0.0-beta.0) – Material Component framework for Vue. [MDX 2.1](https://github.com/mdx-js/mdx) – JSX in Markdown. [React Menu 3.0](https://szhsin.github.io/react-menu/) – Customizable nested menu component. [Angular 13.3.0](https://github.com/angular/angular/releases/tag/13.3.0) 💻 Jobs [Fullstack Engineer (Remote, EU Timezones)](https://feather-insurance.com/careers/full-stack-engineer) — We’ve built a product thousands of people love (See [Trustpilot](https://www.trustpilot.com/review/feather-insurance.com) if you don’t believe us). We need your help with Node & TypeScript. Feather [Senior Frontend Engineer (React) — Remote / NYC](https://boards.greenhouse.io/ramp/jobs/5646274002?t=b8cbf9cf2us) — We're the leading spend management platform for businesses. Small cross-functional front-end operations using React and TypeScript. Ramp [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 📒 Articles & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/jjcp6am2zg0ywsmq2thj.jpg)](https://www.smashingmagazine.com/2022/03/drag-drop-file-uploader-vuejs-3/) [How To Make a Drag-and-Drop File Uploader with Vue.js 3](https://www.smashingmagazine.com/2022/03/drag-drop-file-uploader-vuejs-3/) — A whole _four_ years ago, we linked to [Joseph’s guide](https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/) to making a drag-and-drop file uploader with _vanilla_ JavaScript, but now he’s back to take on the same challenge with the latest version of Vue.js. Joseph Zimmerman [A Delightful React File/Directory Structure](https://www.joshwcomeau.com/react/file-structure/) — We have featured a number of these types of articles, but there’s always room for another perspective on the ‘right’ way to lay out a project, particularly as React itself is reasonably unopinionated on the matter. Josh W. Comeau [How to Use JavaScript to Extend the Functionality of Your Chatbot](https://bit.ly/3q1oJ9Z) — Create custom actions and extend the functionality of your NLU chatbot builder with JavaScript. Botpress sponsor [The 'Double-Assignment Pattern' in jQuery's Source Code](https://www.zhenghao.io/posts/double-assignment) — The author found an interesting technique in jQuery’s code and set out to figure out its benefits. Zhenghao He [Next.js's New Official 'Foundations' Course](https://nextjs.org/learn/foundations/about-nextjs) — Next.js released a new foundational course that covers the essentials of React, how it relates to Next.js, and building a first Next.js app. Next.js [Remix vs Next.js](https://bejamas.io/blog/remix-vs-nextjs/) — [Remix](https://remix.run/) is a relatively new React-based full-stack framework created by the original team behind React Router. It takes a different approach to the better known [Next.js.](https://nextjs.org/) This is a detailed guide to the key differences. David Herbert [Creating a Simple Table Sorting and Pagination Feature](https://www.raymondcamden.com/2022/03/14/building-table-sorting-and-pagination-in-javascript) — Rendering a sortable, paginated table with some help from JavaScript. Raymond Camden [Announcing Build Matrix](https://buildkite.com/blog/announcing-build-matrix?utm_campaign=CPress&utm_source=ppc&utm_medium=cypress&utm_term=build%20matrix&utm_content=DevOps) — See how we reduced a 402-line pipeline YAML down to 160 lines 📉 Buildkite sponsor ▶[A Discussion of Where TypeScript Excels](https://thenewstack.io/earning-its-way-to-a-first-class-programming-language-where-typescript-excels/) — Extracts from an interview with TypeScript’s Luke Hoban and Daniel Rosenwasser. The New Stack podcast [Upgrading Next.js for Instant Performance Improvements](https://vercel.com/blog/upgrading-nextjs-for-instant-performance-improvements) — A case study of how the Vercel team brought a Next.js 8 demo up to Next.js 12 standards and saw huge improvements in the process. Lydia Hallie [Getting Unique Values from an `Array` with `Set`](https://daily-dev-tips.pages.dev/posts/getting-unique-values-from-a-javascript-array-using-set/) Chris Bongers 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ikffzxz0rblvqlyl8tbx.jpg)](https://github.com/bbc/peaks.js) [Peaks 1.0: UI Component for Interacting with Audio Waveforms](https://github.com/bbc/peaks.js) — Let’s say you’re building an audio editor of some kind - this is the sort of control you might want to use. And it’s from the BBC too, which is cool. BBC [Wave.js 2.0: An Audio Visualization Library](https://github.com/foobar404/Wave.js) — If you don’t need to create an audio editor and just want a _music go wub wub, lines go wiggle wiggle_ type of visualization, this is for you. There are some [live demos here](https://foobar404.dev/Wave.js/). Austin Michaud [Faker 6.0: Generate Massive Amounts of Fake Data in Node or Browser](https://github.com/faker-js/faker) — After an issue of a maintainer going 'rogue', a community team [took over](https://fakerjs.dev/update.html) the popular Faker project and their first major release is now out, complete with ESM support. [v5 to v6 migration instructions](https://fakerjs.dev/migration-guide-v5/). Faker.js Team [Pulumi: Developer-First Infrastructure with JavaScript](https://www.pulumi.com/docs/get-started/?utm_source=javascript-weekly&utm_medium=sponsored-link&utm_campaign=iac) Pulumi sponsor [sysend.js: Send Messages Between Open Pages or Tabs in Same Browser](https://github.com/jcubic/sysend.js) — A small library that abstracts a mechanism for sending messages between pages open in the same browser. Supports cross-domain communication and is based on localStorage and the BroadcastChannel API. Here’s [a demo](https://jcubic.pl/sysend.php) (if you open it twice). Jakub T. Jankiewicz [Chrome Extension CLI: The CLI for Your Next Chrome Extension](https://github.com/dutiyesh/chrome-extension-cli) — Want to get building an extension for Chrome as quickly as possible? This tool aims to get you on the right path ASAP. Dutiyesh Salunkhe [js2xml: Convert JavaScript Code to an XML Document](https://github.com/scrapinghub/js2xml) — Why? To make it easier to extract things from elsewhere using XPath, apparently. Scrapinghub [![\](https://res.cloudinary.com/cpress/image/upload/w_140,e_sharpen:60/eesglwuwfvvwkgkzi1hf.jpg)](https://emoji-button.js.org/) [Emoji Button: A Vanilla JavaScript Emoji Picker](https://emoji-button.js.org/) — Turns a button element into an emoji picker (similar to that some operating systems provide). [GitHub repo](https://github.com/joeattardi/emoji-button). Joe Attardi [Liqvid 2.1: Create Interactive Videos with React, HTML, CSS, and JS](https://liqvidjs.org/blog/2022/03/13/liqvid-2-1/) — Now lets you use the Web Animations API in videos too. Yuri Sulyma Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/peterc) '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