--- title: "Making JavaScript executables with Deno" publication: "JavaScript Weekly" issue: 518 published_at: "2020-12-11" canonical_url: "https://javascriptweekly.com/issues/518" --- Plus a JavaScript advent calendar, Google's new IDE for Apps Script, and Flappy Bird in under 200 bytes. #518 — December 11, 2020 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/518) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ym0qviypnlrw97o4vlyw.jpg)](https://addyosmani.com/blog/import-on-interaction/) [The 'Import on Interaction' Pattern](https://addyosmani.com/blog/import-on-interaction/) — You know what’s faster than loading lots of front-end code? _Not_ loading it. You can then ‘lazy-load’ non-critical resources when the user needs to actually use them. Addy Osmani digs in deep as to how this can work here. Addy Osmani [The JavaScript Christmas Advent Calendar 2020](https://javascript.christmas/2020) — _Bekk_ has run these advent calendars on a variety of topics for a few years now and they’re a good source of bite size articles, tips, etc. You might enjoy [The Three Ways of Fetching](https://javascript.christmas/2020/2), [What’s New in ES2021](https://javascript.christmas/2020/7) or [Machine Learning with JavaScript](https://javascript.christmas/2020/5) so far this year. Bekk [![\](https://copm.s3.amazonaws.com/84772797.png)](https://blog.appsignal.com/2020/12/08/the-easiest-way-to-monitor-nodejs-automatic-instrumentation.html?utm_source=javascript-weekly-sponsored&utm_medium=email&utm_campaign=2020-12-08) [The Easiest Way to Monitor Node: Automatic Instrumentation](https://blog.appsignal.com/2020/12/08/the-easiest-way-to-monitor-nodejs-automatic-instrumentation.html?utm_source=javascript-weekly-sponsored&utm_medium=email&utm_campaign=2020-12-08) — Monitoring your Node.js apps can be hard. You need to understand what you need to monitor, instrument code, and then make sense of all the data. Automatic instrumentation makes that whole process easier and streamlined. [Find out how you can do it](https://blog.appsignal.com/2020/12/08/the-easiest-way-to-monitor-nodejs-automatic-instrumentation.html?utm_source=javascript-weekly-sponsored&utm_medium=email&utm_campaign=2020-12-08). AppSignal sponsor [Get Ready to Up Your (Google) Apps Script](https://developers.googleblog.com/2020/12/get-ready-to-up-your-apps-script.html) — Google introduced _Apps Script_ over ten years ago as a powerful, JavaScript-powered way to script its various services (e.g. Gmail, Sheets..) Rather than shutting it down, Google has unveiled a new online IDE to make the development process far smoother. Google [Deno 1.6 Released: You Can Now Build Executables](https://deno.land/posts/v1.6) — Perhaps the biggest post-1.0 release for the security-oriented TypeScript-leaning JavaScript runtime as it can now _build self contained, standalone binaries_ though there are limitations and drawbacks (one being the file sizes). A promising step forward for JS tooling, though? Certainly. Iwańczuk, Casonato, and Dahl ⚡️ Quick Releases - [Stimulus 2.0](https://discourse.stimulusjs.org/t/announcing-stimulus-2-0/1482) — 'Decorate your HTML' with JS functionality library from Basecamp — commonly associated with Ruby on Rails. - [Fable 3.0](https://fable.io/blog/Announcing-Nagareyama-4.html) — A F# to JavaScript compiler. - [μPlot 1.5](https://github.com/leeoniya/uPlot) — High performance time series plotting. - [mapbox-gl-js 2.0](https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0) — Tiled WebGL-powered maps. Note the license change. - [Pickr 1.8.0](https://github.com/Simonwep/pickr) — No depedency color picker library. - [jsPDF 2.2](https://github.com/MrRio/jsPDF) — Client-side PDF generation. - The [State of JavaScript 2020 Survey](https://stateofjs.com/?source=js_weekly) is back again for another year. The results of this survey are always fascinating and there's been a lot of buzz on social media about the questions this year. - Sebastian McKenzie, the creator of the [Rome](https://rome.tools/) toolkit, [needs your help in funding the project](https://rome.tools/funding/) now he's working on it full time. He also shares a lot of updates on what he's working on. - The [November 2020 update of VS Code](https://code.visualstudio.com/updates/v1_52) is out — you can now set default locations of Node.js and Chrome binaries if you want to debug with different versions. - If you didn't hear, GitHub has an optional ['dark mode' theme](https://github.com/settings/appearance) now. - Someone who was only 1 year old when Brendan Eich first developed JavaScript has [gone back and compiled an early JavaScript engine](https://github.com/doodlewind/mocha1995/blob/main/blog/about.md) and [put it online](https://mocha1995.js.org/) for you to play with. _Trés cool._ - NativeScript has [joined the OpenJS Foundation.](https://www.infoq.com/news/2020/12/nativescript-joins-openjs/) - A fantastic gist and comment thread of people [code-golfing a Flappy Bird implementation](https://gist.github.com/gullyn/95b2ab9e465317f1d4e4607cf6e94205) down to under 200 bytes. [Playable here.](https://jsfiddle.net/z3bmtg5u/1/) 📚 Tutorials, Opinions and Stories [A Deep Dive Into Rome: Linting, Compiling, and Bundling](https://blog.logrocket.com/deep-dive-into-rome-linting-compiling-and-bundling/) — We featured [Rome’s fundraising request](https://rome.tools/funding/) above, but what is it like to actually use and can it really replace tools like Prettier and Babel? Not yet, but it’s promising. Julio Sampaio [How to Create a 'Client-Serverless' JAMstack App with Netlify, Gatsby and Fauna](https://css-tricks.com/how-to-create-a-client-serverless-jamstack-app-using-netlify-gatsby-and-fauna/) — This is for you if you want a complete walkthrough of building a JAMstack app with Fauna providing data over GraphQL, functions hosted by Netlify, and a Gatsby powered client side app. Tapas Adhikary [Breakpoints and `console.log` Is the Past, Time Travel Is the Future](https://wallabyjs.com/?utm_source=cooperpress&utm_campaign=javascriptweekly&utm_content=javascript) — 15x faster JavaScript debugging than with breakpoints and console.log. Wallaby.js sponsor [Sticky Table Headers with React Hooks](https://webup.org/blog/sticky-header-table-with-react-hooks/) — For tabular data presentation, [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) is often chosen over the seemingly old-fashioned and much maligned `` element. But the latter can still be a good choice when aided by these techniques. Miroslav Nikolov ['No One Ever Got Fired for Choosing React'](https://jake.nyc/words/no-one-ever-got-fired-for-choosing-react/) — A modern frontend riff on the [old saying](https://www.ibm.com/ibm/history/ibm100/us/en/icons/personalcomputer/words/) about IBM. Maybe there is safety in numbers. It provoked [a bit of a discussion](https://news.ycombinator.com/item?id=25310462) on Hacker News too. Jake Lazaroff [How to Create a Favicon That Changes Automatically](https://css-tricks.com/how-to-create-a-favicon-that-changes-automatically/) — It doesn’t take a lot of JavaScript to make this trick happen. We also get to see how to wrap it up into a React component. Carlo Martinucci [Node.js + Express: An OpenTelemetry Deep Dive](https://lightstep.com/blog/opentelemetry-nodejs-express?utm_campaign=js&utm_source=cooper&utm_medium=Email) Lightstep sponsor ▶[A Chat with RedwoodJS's Tom Preston-Werner](https://fsjam.org/episodes/episode-4-bringing-fullstack-to-the-jamstack-with-tom-preston-werner) — A new podcast featuring Anthony Campolo and Christopher Burns that covers “fullstack jamstack”, a space that [RedwoodJS](https://redwoodjs.com/) is pioneering in. BTW, if Tom's name seems familiar, he was one of GitHub's founders! FSJam Podcast podcast [From Callback Hell to Callback Heaven](https://dev.to/loreanvictor/from-callback-hell-to-callback-heaven-4i0c) — ‘Reflecting back’ on the days of heavy use of callbacks.. although this is still the daily reality for many of us! :-) Eugene Ghanizadeh [The 'Async Disposer' Pattern in JavaScript](https://advancedweb.hu/what-is-the-async-disposer-pattern-in-javascript/) — How to automatically close and cleanup resources. Tamás Sallai 🛠 Code & Tools supported by [![Okta\](https://res.cloudinary.com/cpress/image/upload/v1602154330/de7dtktheistsfpqdem4.png)](https://developer.okta.com/?utm_campaign=newsletter_cooperpress_all_multiple_inc_dev_sponsored-section_null&utm_source=cooperpress&utm_medium=cpc) [Electron React Boilerplate 2.0: A Foundation for Scalable Cross-Platform Apps](https://github.com/electron-react-boilerplate/electron-react-boilerplate) — Brings together Electron (the popular cross-platform desktop app development toolkit) with React, React Router, webpack and React Fast Refresh. 2.0 waves goodbye to Redux and upgrades to Electron 11 and webpack 5. Electron React Boilerplate [htmlparser2 6.0.0: A Forgiving HTML and XML Parser](https://github.com/fb55/htmlparser2) — Consumes documents and calls callbacks, but it can generate a DOM as well. There’s [a live demo here](https://astexplorer.net/#/2AmVrGuGVJ). Felix Böhm [Announcing Prisma Migrate Preview - Simplified Database Migrations](https://www.prisma.io/blog/prisma-migrate-preview-b5eno5g08d0b) — Prisma is a Node and TypeScript ORM. Learn more about Migrate in their announcement blog post. Prisma sponsor [SiriWave: The Apple Siri Waveform Replicated in Pure JavaScript](https://github.com/kopiro/siriwave) — If you need an effect that implies sound is playing or being recorded, perhaps. Flavio Maria De Stefano [eslint-config-prettier 7.0: Turns Off ESLint Rules That Might Conflict with Prettier](https://github.com/prettier/eslint-config-prettier) Prettier [Markdown Editor 2.0: A Simple, React-Powered Markdown Editor with Preview](https://github.com/uiwjs/react-md-editor) [Sniffer 4.0: Isomorphic Browser, Engine, OS and Device Detection](https://github.com/wilddeer/Sniffer) Oleg Korsunskiy 💻 Jobs [Software Developer (Austin, TX)](https://www.srpatx.com/careers) — We're a largely ex-Pivotal tech team looking for developers with all levels of experience. If you enjoy learning, collaborating, and creative problem solving then let's talk. Stronghold Resource Partners [Senior Web Developer (Node/ReactJS) - Remote](https://www.komoot.com/jobs/senior-web-developer) — Millions get inspired and plan adventures with our apps. To help us make [komoot.com](https://www.komoot.com) the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team. Komoot [Find Your Next 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 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