--- title: "Genius misuse of WOFF 2 and Brotli to win a JavaScript contest." publication: "JavaScript Weekly" issue: 601 published_at: "2022-08-05" canonical_url: "https://javascriptweekly.com/issues/601" --- Plus fail-safe JSON serialization, speeding up a React component, and a naughty dog. | #​601 — August 5, 2022 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/601) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/glelkm75qu8jwap5jmnl.jpg)](https://js1024.fun/results/2022) [JS1024 2022 Competition Winners](https://js1024.fun/results/2022) — JS1024 is a ‘code golfing’ contest where you get 15 days to create a JavaScript or GLSL program within 1024 bytes. This results in lots of creative ideas, complete with fantastic (non-minified) source to check out. The winning JS entry is [this quirky typing game](https://js1024.fun/demos/2022/18) and the winning shader-based entry is [a 3D tunnel experience.](https://js1024.fun/demos/2022/1) There’s much to learn here as these folks have used every trick in the book, including **compressing 1900+ English words in [a heavily commented entry that uses](https://js1024.fun/demos/2022/18/source) Brotli and a specially crafted WOFF2 font file(!)** JS1024 [Docusaurus 2.0 Released](https://docusaurus.io/blog/2022/08/01/announcing-docusaurus-2.0) — Docusaurus powered sites are everywhere in the JS space (e.g. [the Babel docs](https://babeljs.io/docs/en/)) and after four years of effort, [version 2.0](https://github.com/facebook/docusaurus) of the popular React-powered documentation-focused static site generator is here. Rebuilt from scratch, it adds [MDX](https://github.com/mdx-js/mdx) support, a new plugin system, theming, dark mode, SPA navigation, offline support, and more. Meta (Facebook) [![\](https://copm.s3.amazonaws.com/3e86d376.jpg)](https://www.edgedb.com/blog/edgedb-2-0) [Announcing EdgeDB 2.0](https://www.edgedb.com/blog/edgedb-2-0) — Try the database that makes ORMs obsolete. EdgeDB’s TypeScript client has the simplicity of an ORM but the power of a full-fledged query language. And with the release of EdgeDB 2.0 it’s better than ever—read the announcement for details. EdgeDB sponsor [Electron 20: The Cross Platform Desktop App Framework](https://www.electronjs.org/blog/electron-20-0) — 20 sounds like a big, round release number but it’s mostly a typical release. Chromium is bumped up to v104, V8 to 10.4, and Node to 16.15.0. Windows gains an ‘immersive dark mode’ and Electron windows can now [‘float’ over full-screen apps panel-style](https://github.com/electron/electron/pull/34665). Charles Kerr **IN BRIEF:** - 🔎 [`npm query` is a new command](https://github.blog/changelog/2022-08-03-introducing-the-new-npm-dependency-selector-syntax/) in the latest version of `npm` to query a project's dependencies using a CSS-like selector string. - Remember the guy who built JavaScript games using Microsoft Excel and PowerPoint as a canvas? He's back building [▶️ a multiplayer game in Word](https://www.youtube.com/watch?v=87nzxrRFq8U). Just 3 minutes and much fun. - There's [a new VS Code release](https://code.visualstudio.com/updates/v1_70) and while the [JS debugging features](https://code.visualstudio.com/updates/v1_70#_javascript-debugging) see improvements, [▶️ this 'sticky scrolling' feature](https://twitter.com/stefanjudis/status/1555466217774882818) is particularly neat as it keeps your function signatures on screen even during long functions. - If you use AWS's _Lambda_ serverless platform for running your functions and you use it _a lot_, their [new tiered pricing structure](https://aws.amazon.com/blogs/compute/introducing-tiered-pricing-for-aws-lambda/) may yield some big savings. **RELEASES:** [Parcel 2.7](https://twitter.com/parceljs/status/1554881568287559680) [Ember 4.6](https://blog.emberjs.com/ember-4-6-released/) [Ionic 6.2](https://ionicframework.com/blog/announcing-ionic-v6-2/) – Cross-platform app building toolkit. [Redwood 2.2](https://github.com/redwoodjs/redwood/releases/tag/v2.2.0) – React-backed full-stack framework. [Cypress 10.4](https://github.com/cypress-io/cypress) – Popular testing approach for anything browser-based. [Ohm 16.4](https://github.com/harc/ohm) – Parser / interpreter building toolkit. 📒 Articles & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/shpvbpmdj9y1lx5y28dg.jpg)](https://mmazzarolo.com/blog/2022-07-30-checking-if-a-javascript-native-function-was-monkey-patched/) [Checking if Native JavaScript Functions are 'Monkey Patched'](https://mmazzarolo.com/blog/2022-07-30-checking-if-a-javascript-native-function-was-monkey-patched/) — Along with JavaScript’s dynamism comes the potential for functions to be overridden (or ‘monkey patched’, as some people call the idea of runtime modifications) but there are (imperfect) ways to see if this has occurred. Matteo Mazzarolo [On Building Modern Webapps Faster with Bud](https://goingwithgo.com/2022/08/matt-mueller-building-modern-web-applications-faster-with-bud/) — [Bud](https://github.com/livebud/bud) (no, not _Bun_) is a relatively new Go(lang) and JavaScript powered full-stack web framework with a lot of good ideas – [▶️ this 15-minute video](https://www.youtube.com/watch?v=LoypcRqn-xA) on creating a Hacker News clone with it is a fun demo. If Go works for you on the backend, it's worth a look. Preslav Rachev [Level-Up Your Cypress Testing Knowledge for Free](https://learn.cypress.io/?utm_medium=newsletter&utm_source=sponsorship&utm_campaign=javascript-weekly-sponsorship-august-5-2022&utm_term=&utm_content=website) — Learn from top industry experts with over 25 lessons on how to get started with Cypress. Cypress.io sponsor [From 500ms to 1.7ms in React](https://orizens.com/blog/500ms-to-1-7ms-in-react-a-journey-and-a%20checklist/) — A sluggish customized grid triggered a journey to analyze some bottlenecks, followed by some tweaks resulting in a dramatic perf improvement. Oren Farhi [Parsing Command Line Arguments with `util.parseArgs()` in Node.js](https://2ality.com/2022/08/node-util-parseargs.html) — A feature added in Node 18.3, just this year. Dr. Axel Rauschmayer [Use Jest to Replace Default Test Runners in an Angular Project](https://spin.atomicobject.com/2022/08/02/jest-angular-project/) Rob Bell 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/zis2oetjn4a5ch0daajf.jpg)](https://jbaysolutions.github.io/vue-grid-layout/) [vue-grid-layout: Draggable and Resizable Grid Layout for Vue.js](https://jbaysolutions.github.io/vue-grid-layout/) — Like [Gridster.js](http://dsmorse.github.io/gridster.js/) (from the jQuery days!) , but for Vue.js. There’s a demo right on the homepage. [GitHub repo.](https://github.com/jbaysolutions/vue-grid-layout) JBay Solutions [safe-json-value: For When JSON Serialization Mustn't Fail](https://github.com/ehmicky/safe-json-value) — Prevents `JSON.serialize()` from throwing an exeception, changing types, or otherwise transforming values unexpectedly, because sometimes you need that sort of reassurance. ehmicky [Quokka.js Is the #1 JavaScript / TypeScript Scratchpad for VS Code](https://quokkajs.com/?utm_source=cooperpress&utm_medium=javascriptweekly&utm_content=javascriptweekly) — Ideal for exploring and testing JavaScript. Code runs immediately as you type with feedback right next to your code. Wallaby.js sponsor [colorgrad: High-Perf, Rust-Powered Color Gradient Library](https://github.com/mazznoer/colorgrad-js) — Uses Rust compiled to WebAssembly behind the scenes – very modern! It’s also a nice small codebase with which to learn the technique if you want to try it too. [Live demo](https://mazznoer.github.io/colorgrad-js/). Nor Khasyatillah [Embla Carousel 7: Carousel with Fluid Motion and 'Swipe Precision'](https://www.embla-carousel.com/) — A much maligned UI element, but the [examples](https://www.embla-carousel.com/examples/basic/) worked pretty well for us. Library agnostic but has easy integrations for React, Vue, and Svelte, if you need them. David Jerleke [Nativefier: Make Any Web Page a Desktop App](https://github.com/nativefier/nativefier) — A basic Node.js-powered tool for creating a desktop ‘app’ for any Web site using Electron as the webview. For Windows, macOS and Linux. Goh Jia Hao [ts-version: Access the Current TypeScript Version from Types](https://www.npmjs.com/package/@phryneas/ts-version) — The creator puts it best: _“Frustrated how TS versions handle your package slightly differently, but don’t want to ship a full copy of your types with TypesVersions? Now you can adjust your types depending on the TS version!”_ Lenz Weber-Tronic [Integrate eSignatures in Your App in Less Than a Week](https://www.hellosign.com/products/api?utm_campaign=cooperpress_direct_8522&utm_medium=cpm&utm_source=programmatic&utm_content=newsletter) HelloSign, a Dropbox Company sponsor [PowerGlitch: A Tiny Library to 'Glitch' Images on the Web](https://7ph.github.io/powerglitch/#/) PowerHat **OTHER QUICK RELEASES:** [React Native Boilerplate 3.5](https://github.com/thecodingmachine/react-native-boilerplate) – A starter template for RN apps. [Stripe Node 10.0](https://github.com/stripe/stripe-node) – Node.js library for Stripe's API. [Electron Store 8.1](https://github.com/sindresorhus/electron-store) – Simple data persistence for Electron apps. [Meriyah 4.3](https://github.com/meriyah/meriyah) – Compliant, self-hosted JS parser. ([Demo](https://meriyah.github.io/meriyah/)) [React Spreadsheet Grid 2.3](https://denisraslov.github.io/grid/) – Excel-like grid component for React. [Inferno 8.0.2](https://github.com/infernojs/inferno) – Fast, React-like library. [∿ Peaks.js 2.0.3](https://github.com/bbc/peaks.js) – BBC's audio waveform UI component. 💻 Jobs [Senior JavaScript Developer (Warsaw or Remote) 🇵🇱 🇺🇦](https://cksource.com/careers/?utm_source=jsweekly&utm_medium=email&utm_campaign=aug5#senior-javascript-typescript-developer) — Open Source rich text editor used by millions of users around the world. Strong focus on code quality. Join the CKEditor team. 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 ❓ **Did you know..** - There's a useful curated [list of over 150 static site generators](https://github.com/myles/awesome-static-generators) and related resources? If you want to cast a wider net and stretch the SSG definition a little, [here are hundreds more.](https://jamstack.org/generators/) - On macOS, if you hold down Option (⌥) when resizing a window, it resizes from all directions at once? Handy for those windows that wander off screen. - 🐶 Rewarding a dog for rescuing people in danger can have [unintended negative consequences?](https://nowiknow.com/hungry-hungry-hero-dog/) 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