--- title: "Even faster JS bundling and minification with esbuild" publication: "JavaScript Weekly" issue: 508 published_at: "2020-10-02" canonical_url: "https://javascriptweekly.com/issues/508" --- Plus more JavaScript links, tutorials, and projects. #508 — October 2, 2020 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/508) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/bdwcemzchunxdkazceak.jpg)](https://blog.tensorflow.org/2020/09/bringing-mona-lisa-effect-to-life-tensorflow-js.html) [Bringing the Mona Lisa Effect to Life with TensorFlow.js](https://blog.tensorflow.org/2020/09/bringing-mona-lisa-effect-to-life-tensorflow-js.html) — Do the Mona Lisa’s eyes follow you as you move around the room? Even if the real painting’s eyes and head don’t move, you can make it happen on the screen with this simultaneously unsettling and exciting use of TensorFlow.js. Emily Xie [esbuild: A Super Fast JavaScript Bundler and Minifier](https://github.com/evanw/esbuild) — It’s common to link to a new library or tool and it doesn’t get any further development and [231 days ago](https://javascriptweekly.com/issues/475) we were uncertain about this.. but built in Go to be the fastest JS and TS bundler going, this has seen significant development and is worth a try if you’re running into bundling performance issues. Evan Wallace [![\](https://copm.s3.amazonaws.com/829c8eff.png)](https://www.grapecity.com/spreadjs?utm_source=CooperPress&utm_medium=Dynamic&utm_campaign=JS%20Weekly%20Newsletter_10/2020) [The Most Complete Spreadsheet Solution for JavaScript Apps](https://www.grapecity.com/spreadjs?utm_source=CooperPress&utm_medium=Dynamic&utm_campaign=JS%20Weekly%20Newsletter_10/2020) — Fast enterprise JavaScript spreadsheet for delivering true Excel-like spreadsheet experiences. Download for a free evaluation. SpreadJS by GrapeCity, Inc sponsor [Announcing MobX 6](https://michel.codes/blogs/mobx6) — [MobX](https://mobx.js.org/README.html) is a popular and long standing state management system that lets you manage state with relatively little magic and outside of any particular UI framework (the [homepage](https://mobx.js.org/README.html) has a good demo of it living alongside React). Michel Weststrate **⚡️ Quick bytes:** - [Node 14.13.0 has been released](https://nodejs.org/en/blog/release/v14.13.0/) with support for named exports for CommonJS modules. - The [first release candidate of npm 7](https://blog.npmjs.org/post/630786103662821376/release-v700-rc0) is out. - [Declarative Shadow DOM](https://web.dev/declarative-shadow-dom/) is a new way to implement and use Shadow DOM directly in HTML. - A look at [the state of RxJS](https://indepth.dev/the-state-of-rxjs-rxjs-7-and-beyond/) as it approaches version 7. - The Svelte project has launched a 'What's new in Svelte' series with [its October 2020 edition.](https://svelte.dev/blog/whats-new-in-svelte-october-2020) - [Node Weekly](https://nodeweekly.com/) passed 50,000 subscribers, so if you work with Node and weren't aware of it, [check out the latest issue.](https://nodeweekly.com/issues/358) 💻 Jobs [JavaScript Developer at X-Team (Remote)](https://x-team.com/join/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=js) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Find a Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-javascriptweekly&utm_term=tech&utm_content=grouped&utm_campaign=ad-77584) — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers. Vettery 📚 Tutorials, Opinions and Stories [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/b7hbvgcw94qmafgorzkw.jpg)](https://web.dev/detached-window-memory-leaks/) [Detached Window Memory Leaks](https://web.dev/detached-window-memory-leaks/) — If code causes a popup window to appear but then retains a reference to such a window, a memory leak can occur. This thorough post looks at why, when they occur, and how to solve the problem in your own code. Jason Miller and Bartek Nowierski ▶[Learn How to Recreate Flappy Bird and Doodle Jump](https://www.freecodecamp.org/news/javascript-tutorial-flappy-bird-doodle-jump/) — Ania has really been knocking these fun, accessible and no-nonsense JavaScript tutorials / code-alongs out of the park lately and this time she tackles some recently popular game mechanisms. Ania Kubow [Getting Started with OpenTelemetry in JavaScript](https://opentelemetry.lightstep.com/js?utm_campaign=js&utm_source=cooper&utm_medium=Email) — OpenTelemetry is an open source framework that provides a single set of APIs, libraries and instrumentation to capture traces and metrics. Lightstep sponsor [Building Scalable GraphQL APIs on AWS with CDK, TypeScript, AppSync, DynamoDB, and Lambda](https://aws.amazon.com/blogs/mobile/building-scalable-graphql-apis-on-aws-with-cdk-and-aws-appsync/) — AWS AppSync is a managed serverless GraphQL service and you can bring it together with numerous other technologies to create powerful solutions like a real-time GraphQL API as here. Nader Dabit [Eleventy and Vue Components - Behind the New Netlify.com](https://www.netlify.com/blog/2020/09/18/eleventy-and-vue-a-match-made-to-power-netlify.com/) — An interesting look at how the new Netlify site that launched in May was built using Vue as the templating tool via [a plugin](https://github.com/11ty/eleventy-plugin-vue/), allowing the site to built based on components. Zach Leatherman [Creating Mirrors in React-Three-Fiber and Three.js](https://tympanus.net/codrops/2020/09/30/creating-mirrors-in-react-three-fiber-and-three-js/) — A brief walk-through of how to create a mirror scene. This is for you if you like creating striking visual effects with JavaScript. Gianmarco Simone and Marco Ludovico Perego [Data Visualization: Interpreting Uncertainty in Product Design](https://www.shopify.com/partners/blog/data-visualization?utm_campaign=become+a+partner+cooperpress&utm_medium=brief&utm_source=newsletter&utm_term=javascript+weekly+data+visualization) Shopify Partners sponsor [A React Cheatsheet for 2020](https://dev.to/codeartistryio/the-react-cheatsheet-for-2020-real-world-examples-4hgg) — We somehow missed this when it came out earlier this year but it’s a handy resource for those who prefer just-in-time learning or want _even more_ prep for nailing that interview. Reed Barger 🔧 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/wnih0hcyqpn5cwcel9wz.jpg)](https://github.com/prabhuignoto/react-chrono) [react-chrono: A Modern Timeline Component for React](https://github.com/prabhuignoto/react-chrono) — Render a themeable timeline in 3 unique modes (vertical/horizontal, tree, or auto-playing slideshow). Also includes keyboard navigation support. [Try it here](https://react-chrono.vercel.app/). Prabhu Murthy [Duet Date Picker: An Accessible WCAG-Compliant Date Picker](https://github.com/duetds/date-picker) — Has an elegant default design with lots of ways to customize it (e.g. min/max ranges, changing first day of the week, localization, etc). [Try different examples here](https://duetds.github.io/date-picker/). No specific frameworks needed. Duet Design System [Elder.js: A Svelte Framework and Static Site Generator](https://elderguide.com/tech/elderjs/) — An opinionated static site generator designed for building SEO-friendly sites at scale (it comes from a project to build a 18,000 page site for its creators). [GitHub repo.](https://github.com/elderjs/elderjs) Elder.js Team [Wallaby.js Introduces Free Plan For Open Source Projects](https://wallabyjs.com/oss/?utm_source=cooperpress&utm_campaign=javascript&utm_content=javascript) — Continuous in-editor test runner that allows you to view runtime values, edit-and-continue, perform time-travel debugging, and more. Wallaby.JS sponsor [smolpxl: Write Retro Pixelated Games in JavaScript](https://gitlab.com/andybalaam/smolpxl) — There’s a variety of [example games here.](https://smolpxl.artificialworlds.net/) The [source for the Snake clone](https://gitlab.com/andybalaam/smolpxl/-/blob/master/public/snake/game.js) shows off how simple it makes things. Andy Balham [visx: Visualization Primitives for React from Airbnb](https://medium.com/airbnb-engineering/introducing-visx-from-airbnb-fd6155ac4658) — Formerly known simply as _vx_, browse the [gallery](https://airbnb.io/visx/gallery) and see if you’re not inspired. [GitHub repo.](https://github.com/airbnb/visx) Williams and Shoff (Airbnb) [Elsa: A Minimal, Secure Runtime for JavaScript and TypeScript Written in Go](https://github.com/elsaland/elsa) — Joining [Deno](https://deno.land/) in the land of new JS runtimes this year comes the Go-powered Elsa which uses [QuickJS](https://bellard.org/quickjs/) rather than V8. It feels somewhat more experimental, but it’s always fun to see such projects, and if you don’t like it.. you can 🎵 _let it go… let it go…_🎵 Elsaland Team [Parsel: A Tiny, Permissive CSS Selector Parser](https://projects.verou.me/parsel/) — This is an ES module with a simple API that lets you parse and traverse CSS selectors, calculating specificity. Supports the full Selectors 4 syntax and no dependencies. Lea Verou [q5xjs: A Small and Fast Alternative Implementation of p5.js](https://github.com/LingDong-/q5xjs) — It’s described an experimental version of the well known ‘accessible creative coding’ library. [Lots of examples here](https://q5xjs.netlify.app/). Lingdong Huang 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