--- title: "Mathematics is the music of reason." publication: "JavaScript Weekly" issue: 593 published_at: "2022-06-10" canonical_url: "https://javascriptweekly.com/issues/593" --- Plus Fastify 4.0, RedwoodJS explained quickly, halftone printing, creating timelines, and comparing approaches to animation with JS. | #​593 — June 10, 2022 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/593) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/vrloiijswpn061pdnssi.jpg)](https://runjs.app/blog/mathematical-notation-for-javascript-developers-explained) [Mathematical Notation Explained with JavaScript](https://runjs.app/blog/mathematical-notation-for-javascript-developers-explained) — Math has its own fascinating world of notation but if it feels a bit opaque to you, this post will help. It boils down numerous areas of mathematical notation into _JavaScript equivalents_ making it easier to follow what’s going on. Haas Labs Ltd ➕ The math fun doesn't stop here – check out _Code & Tools_ below for a neat project ([KaTeX](https://katex.org/)) for rendering math notation on the Web _very_ quickly. ['JavaScript Hydration is a Workaround, Not a Solution'](https://thenewstack.io/javascript-hydration-is-a-workaround-not-a-solution/) — Is hydration, as offered by many newer frameworks, unnecessary overhead? Miško, the inventor of Angular, explains why he thinks so and shares the strategy [the Qwik framework](https://qwik.builder.io/) uses instead. Miško Hevery [![\](https://copm.s3.amazonaws.com/d3b6c397.png)](https://quokkajs.com/?utm_source=cooperpress&utm_medium=javascriptweekly&utm_content=javascriptweekly) [JavaScript Scratchpad for VS Code, Now with Online Sharing](https://quokkajs.com/?utm_source=cooperpress&utm_medium=javascriptweekly&utm_content=javascriptweekly) — Quokka.js is the #1 tool for exploring and testing JavaScript. Code runs immediately as you type. The new [online sharing](https://codeclip.io/?utm_source=cooperpress&utm_medium=javascriptweekly&utm_content=javascriptweekly) feature allows you to share your code and replay its execution (including runtime values). Wallaby.js sponsor [Plasmo: 'It's Like Next.js for Browser Extensions'](https://github.com/PlasmoHQ/plasmo) — A React and TypeScript oriented framework for building your own browser extensions complete with live-reloading, automated deployment to the main browser extension marketplaces, etc. Plasmo **IN BRIEF:** - The [latest VS Code update](https://code.visualstudio.com/updates/v1_68) is out. TypeScript 4.7 is included and, more excitingly, **Go to Definition** [now jumps](https://code.visualstudio.com/updates/v1_68#_go-to-source-definition) to the JS implementation of functions and symbols in external libraries rather than the type definitions. - 😆 Last week we linked to a guy who made a graphical game in Word with JavaScript using _Office Add-Ins_ - he's back again [▶️ implementing Wordle in Word.](https://www.youtube.com/watch?v=N2btcfPtxQ0) It's nice to see someone having some fun. - **DOOM?** We recently linked to [Sliderland](https://sliderland.blinry.org/), a curious minimalist JS coding playground – its creator has now created [a DOOM-like game](https://blinry.org/sliderland/doom/) on top of it(!) - **SAFARI:** Apple's developer conference, WWDC, is currently underway and [new WebKit/Safari features](https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/) are on show in Safari 16 Beta. There's support for _Web Inspector Extensions_ and support for [_Shared Workers_](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker), service workers that can be shared between browsing contexts. We can expect [Web Push](https://webkit.org/blog/12945/meet-web-push/) support in 2023, too. - [Astro 1.0 was expected this week](https://astro.build/blog/astro-1-release-update/) but the release of [the novel static site builder](https://astro.build/blog/introducing-astro/) is being pushed back to late July. - GitHub is introducing [the idea of Achievements](https://github.blog/2022-06-09-introducing-achievements-recognizing-the-many-stages-of-a-developers-coding-journey/) where you earn badges for achieving as yet undefined goals. **RELEASES:** [Flicking 4.9](https://github.com/naver/egjs-flicking) – Flexible web carousel control. [Bree 9.0](https://github.com/breejs/bree) – Node.js job scheduler. [Jasmine 4.2](https://github.com/jasmine/jasmine/blob/main/release_notes/4.2.0.md) – Testing framework. [EmojiMart 5.1](https://github.com/missive/emoji-mart) – Emoji picker control. [Puppeteer 14.3](https://github.com/puppeteer/puppeteer) 💻 Jobs [Software Engineer at Blueground (Remote)](https://www.theblueground.com/careers?department=Engineering) — Help us build the world’s leading next-gen platform for home rentals and shape the future of living. Blueground [JavaScript Developer at X-Team (Remote)](https://x-team.com/remote-javascript-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-js&utm_content=js) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [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/xu5zrq7nh8qnjkpuzctt.jpg)](http://anderoonies.github.io/projects/halftone/) [JavaScript of Halftone Printing](http://anderoonies.github.io/projects/halftone/) — A delightful, practical _and_ interactive walk through what’s involved reproducing a classic halftone style printing process using basic JavaScript and a canvas. Andy Bayer [Building Framework Interoperable Web Components](https://css-tricks.com/building-interoperable-web-components-react/) — If you use different frameworks like React, Svelte, Vue, etc. it’s common to pick a component library that suits each one, but what if you could write such components once in a framework agnostic way and use them wherever you want? Web Components provides an approach. Adam Rackis [Creating an Ultrasonic Payments System with JavaScript](https://charliegerard.dev/blog/ultrasonic-payments/) — A fun experiment with ultrasonic data transmission between devices. Charlie Gerard [Take the Misery Out of JavaScript Security](https://www.feroot.com/preventing-client-side-javascript-supply-chain-attacks/?utm_campaign=Anchored%3A%20A%20deep%20dive%20into%20JS%20software%20supply%20chain%20security&utm_source=Media%20Advertisement&utm_medium=newsletter-ad&utm_term=JS-weekly-newsletter&utm_content=Supply-chain-WP) Feroot Security sponsor ▶[RedwoodJS Explained in 100 Seconds](https://www.youtube.com/watch?v=o5Mwa_TJ3HM) — [RedwoodJS](https://redwoodjs.com/) is a full-stack JS framework backed by one of GitHub’s cofounders and not to be slept on. Fireship [Running Windows/ARM on Apple Silicon Macs via UTM](https://2ality.com/2022/06/windows-on-macs-via-utm.html) — Are you a macOS user who wants to spin up Windows to see how Node.js works there, how tooling feels, etc? Dr. Axel has some tips. Dr. Axel Rauschmayer [Should You Use Framer Motion or Motion One for Animation?](https://motion.dev/blog/should-you-use-framer-motion-or-motion-one) — The author of _both_ [Framer Motion](https://www.framer.com/motion/) and [Motion One](https://motion.dev) compares and contrasts the two JavaScript animation libraries. _Framer Motion_ is the way to go for React but _Motion One_ is more agnostic. Matt Perry [The Best Way to Cache API Responses with Angular and RxJs](https://tomastrajan.medium.com/the-best-new-way-to-cache-api-responses-with-angular-rxjs-5cbc05d12f10) Tomas Trajan 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/po3ajke6hokwsqtyxcjm.jpg)](https://katex.org/) [KaTeX 0.16.0: The Fastest Math Typesetting Library for the Web](https://katex.org/) — Hundreds of expressions to render on a single page? No problemo and no dependencies either despite [supporting](https://katex.org/docs/supported.html) many TeX functions. There’s a [sandbox demo page](https://katex.org/#demo). Emily Eisenberg and Sophie Alpert [Timeline JS: Create Useful Timelines for the Web](https://timeline.knightlab.com/) — Built by a journalism lab at a university, this is not aimed at expert developers but folks who just need to tell a story or show off some data online. [Here’s an example](https://timeline.knightlab.com/examples/houston/index.html) showing a timeline of Whitney Houston’s life. Northwestern University Knight Lab [Self-Hosted, Open-Source Firebase Alternative](https://appwrite.io/?utm_source=newsletter&utm_medium=homepage&utm_campaign=javascriptjun10) — Appwrite provides APIs that cover your core backend needs. Build secure and fast with Appwrite. Click to learn more. Appwrite sponsor [Fastify 4.0 Released: A Node.js Webapp Framework](https://medium.com/@fastifyjs/fastify-v4-ga-59f2103b5f0e) — The first major release of a popular, high performance Node.js Web framework in two years warrants some celebration. A focus has been placed on stabilization, modernization, and improving the already quite stable developer experience, rather than flashy new features, although this post does cover a few updates. Fastify Team [pretty-ms: Convert Milliseconds to Human Readable Strings](https://github.com/sindresorhus/pretty-ms) — `1337000000` → `15d 11h 23m 20s` Sindre Sorhus [The Best JavaScript and CSS Animation Libraries for UI Designers](https://www.sitepoint.com/our-top-9-animation-libraries/) — Runs through nine animation options covering strengths and weaknesses and when to choose each one. Alex Walker [qnm: CLI Utility for Looking at `node_modules` Directories](https://github.com/ranyitz/qnm) — The goal is to make it easier to see what’s going on in a `node_modules` directory of choice including letting you search for packages. Supports both npm and Yarn. Ran Yitzhaki [Project Management for Today's (and Tomorrow's) Software Teams](https://shortcut.com/?utm_source=cooperJSWeekly&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=tomorrow) Shortcut (formerly Clubhouse.io) sponsor [is-online 10.0: Check if The Internet Connection is Up](https://github.com/sindresorhus/is-online) — Works in both Node.js and the browser and uses different approaches to check if the Internet is really available. Now a pure ES module. Sindre Sorhus [Awesome Readme Template: A README Template for GitHub Projects](https://github.com/Louis3797/awesome-readme-template) Louis-Kaan Ay [math.gl: Math Modules for Geospatial and 3D/WebGL Visualization Use Cases](https://math.gl/) Uber 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