--- title: "The future of JavaScript is.. import maps?" publication: "JavaScript Weekly" issue: 552 published_at: "2021-08-20" canonical_url: "https://javascriptweekly.com/issues/552" --- Plus Bootstrap is 10, Gantt charts and.. fish? | #​552 — August 20, 2021 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/552) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/wncpadxdoj0bgw7wql8r.jpg)](https://world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755) [Ruby on Rails' Creator on Modern Web Apps without JS Bundling or Transpiling](https://world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755) — David Heinemeier Hansson (the original creator of the popular [Ruby on Rails](https://rubyonrails.org/) framework) has explained where he sees the future of JavaScript in Rails-based apps and it involves using import maps and _not_ needing bundlers like Webpacker – instead apps will just pull in the ES modules needed. He also shows off how it works in [this 27-minute screencast](https://www.youtube.com/watch?v=PtxZvFnL2i0). David Heinemeier Hansson (DHH) [An Absurd Future for SQL on the Web?](https://jlongster.com/future-sql-web) — [absurd-sql](https://github.com/jlongster/absurd-sql) is a project aiming to provide a persistent backend for SQLite on the web. It uses IndexedDB but with sql.js in front so you can use SQLite in a natural but persisted way from webapps. Some interesting thoughts here. James Long [![\](https://copm.s3.amazonaws.com/687a1afb.jpg)](https://frontendmasters.com/courses/typescript-v3/?utm_source=javascriptweekly&utm_medium=email&utm_campaign=typescript) [Learn the Fundamentals of TypeScript](https://frontendmasters.com/courses/typescript-v3/?utm_source=javascriptweekly&utm_medium=email&utm_campaign=typescript) — Use TypeScript to add strong typing to large JavaScript apps helps reduce bugs and keeps code performant and maintainable. This course covers all you need to know including how to migrate your codebase to TypeScript and improve productivity while building large-scale apps with ease. Frontend Masters sponsor [Announcing React Native 0.65](https://reactnative.dev/blog/2021/08/17/version-065) — The VM within React Native has had an upgrade and now has ES i18n API (Intl) suport, supports M1 Macs and Mac Catalyst, has a _much_ faster garbage collector, and more, including accessibility improvements. Luna Wei and Facebook **QUICK BITS:** - Want to speak at the online React Conf 2021 in November? You've got three days to [submit your proposal](https://reactconf2021cfp.splashthat.com/). - Chromium is adding support to [import CSS stylesheets with `import`](https://blogs.windows.com/msedgedev/2021/08/17/css-module-scripts-import-stylesheets-like-javascript-modules/) much as you might with ES modules. - 🎲 The annual [JS13KGames coding competition has begun](https://medium.com/js13kgames/js13kgames-2021-has-started-aa9345fd9fdf) and runs until September 13 – the theme is "space." Ready to build a game? - A look at the [weird error message you'll encounter](https://searchvoidstar.tumblr.com/post/659634228574715904/an-amazing-error-message-if-you-put-more-than-2-24) if you put more than 2^24 items in a `Map` object. - 🎂 [Bootstrap is 10 years old!](https://blog.getbootstrap.com/2021/08/19/ten/) **RELEASES:** [Mocha 9.1.0](https://github.com/mochajs/mocha/releases/tag/v9.1.0) – Testing framework. [svgo 2.4.0](https://github.com/svg/svgo/releases/tag/v2.4.0) – Node tool for optimizing SVG files. [Node 16.7.0](https://nodejs.org/en/blog/release/v16.7.0/) – Experimentally adds a recursive `cp` method. [Capacitor 3.2.0](https://github.com/ionic-team/capacitor) – Build native PWAs for iOS, Android, and the Web. [WebTorrent 1.5.0](https://github.com/webtorrent/webtorrent) – Streaming torrent client for the web. [Cypress 8.3.0](https://github.com/cypress-io/cypress/releases/tag/v8.3.0) – Testing for anything that runs in a browser. 💻 Jobs [Front-End Developer - Utrust (Remote, GMT -2/+4)](https://careers.utrust.com/front-end-developer/en) — We are changing the world with crypto. Join our team, working with technologies such as React, Redux, GraphQL and TypeScript. Utrust [Senior Software Engineer - React, 100% Remote](https://www.juni.co/careers?ashby_jid=b40df8a5-505f-44ae-bb43-e5a6b70e33c5) — Series-A, neobank tailored to e-commerce, 12 developers and entering hypergrowth. Juni [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, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/xna7izvgyxxsyjihzc2s.jpg)](https://www.smashingmagazine.com/2021/08/interactive-gantt-chart-component-vanilla-javascript/) [Creating an Interactive Gantt Chart Component with Vanilla JS](https://www.smashingmagazine.com/2021/08/interactive-gantt-chart-component-vanilla-javascript/) — Coding a Gantt chart (commonly used as a way to visualize schedules) as a reusable Web component, covering the architecture of the component, rendering the calendar with CSS Grid, and managing the state of the draggable tasks with proxy objects. Anna Prenzel [Loading Third-Party JavaScript](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript) — This isn’t new, but recently popped up on our radar again and remains a solid resource — learn how to optimize the loading of third-party scripts to reduce their impact on performance. Addy Osmani & Arthur Evans [Build a React Chat Application](https://getstream.io/chat/react-chat/tutorial/?utm_source=javascript_weekly&utm_medium=promoted_newsletter&utm_content=developer&utm_campaign=08_20_2021) — In a few simple steps we’ll show you how to launch a chat app using our React component library. Stream sponsor [Guidelines (from the 1970s!) on How to Split Your React Components](https://joaoforja.com/blog/guideline-on-how-to-decompose-a-react-component/) — Some interesting ideas extracted from a 1970s paper: _“Designing Software for Ease of Extension and Contraction”_ by David Parnas. João Forja [How to Write TypeScript Interfaces in JSDoc Comments](https://goulet.dev/posts/how-to-write-ts-interfaces-in-jsdoc/) — A way to avoid build steps but still enjoy TypeScript type checking on your `.js`files. Wes Goulet [`return await promise` vs `return promise`](https://dmitripavlutin.com/return-await-promise-javascript/) — Is there any difference between using `return await promise` and `return promise` in asynchronous functions? Dmitri Pavlutin ['I Tried Angular as a React Developer. Here are Six Things I Like About It.'](https://t.co/pWi8CtaXiB?amp=1) Louis Petrik [How to Build a Portfolio Site with Next.js and Tailwind CSS](https://www.freecodecamp.org/news/how-to-build-a-portfolio-site-with-nextjs-tailwindcss/) Manu Arora [Truthy and Falsy: When All is Not Equal in JavaScript](https://www.sitepoint.com/javascript-truthy-falsy/) Craig Buckler 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ruu1karvscexvhyd3q6z.jpg)](https://github.com/katspaugh/wavesurfer.js) [wavesurfer.js: Navigable Waveforms via the Web Audio and Canvas APIs](https://github.com/katspaugh/wavesurfer.js) — If you’re creating a podcast player, audio experience, or anything where seeing an interactive audio waveform could be useful, check this out. katspaugh and contributors [Marked 3.0: A Fast Markdown Parser and Compiler](https://github.com/markedjs/marked) — Works in the browser or server-side. [Demo here](https://marked.js.org/demo/) to see it in action. Christopher Jeffrey [Go from Zero to Live Streaming, in a Couple of Minutes](https://get.mux.com/3ka3IGv) — Mux Video is an API-first platform that makes it easy to build beautiful live video that streams everywhere. Mux sponsor [zx 3.0: A Tool for Writing Better Shell Scripts](https://github.com/google/zx) — Rather than using something like `bash` to throw together a quick script, `zx` provides a variety of niceties to do the same with the JavaScript you know and love. Google [v-lazy-image: A Vue.js Component to Lazy Load Images](https://github.com/alexjoverm/v-lazy-image) — Uses Intersection Observer and then progressive rendering with CSS animations to keep things smooth. [CodeSandbox demo](https://codesandbox.io/s/9l3n6j5944). Alex Jover [Pyodide: Python Compiled to WebAssembly for the Web](https://pyodide.org/en/stable/index.html) — Python continues its ascent in the worlds of programming education and data science, so if you have a use case for interoperating with it in the browser from JavaScript, this is what you need. It is just one of [numerous ways](https://yasoob.me/2019/05/22/running-python-in-the-browser/) to use Python in the browser, though. Pyodide contributors and Mozilla [Book a Demo. Ship Fast. Rest Easy. LaunchDarkly](https://learn.launchdarkly.com/demo/?utm_source=cooperpress&utm_medium=display&utm_campaign=21q3-cooperpress) LaunchDarkly sponsor [Notistack: A Library for Easy Snackbar/Toast Notifications](https://github.com/iamhosseindhv/notistack) — You can try out a whole slew of demos and an API reference on [the docs site](https://iamhosseindhv.com/notistack). Hossein Dehnokhalaji [Serendipity: A Beautiful VS Code Theme with Dark and Light Modes](https://wvsc.dev/) — The color palette was selected specifically to be pleasing to the eyes on retina displays. michael andreuzza 🕰 **ICYMI** _(Some older stuff that may catch your eye...)_ - Here's a look at [how to avoid/prevent uncaught async errors](https://advancedweb.hu/how-to-avoid-uncaught-async-errors-in-javascript/). - Dmitri Pavlutin explains [how to use the `fetch()` API](https://dmitripavlutin.com/fetch-with-json/) to load and post JSON data. - Kilian Valkhof shows how you can [detect media query support](https://kilianvalkhof.com/2021/web/detecting-media-query-support-in-css-and-javascript/) in CSS and JavaScript. 🐟 And one that didn't quite get away... [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/sx1u9zkvwakizqbtzepg.jpg)](https://github.com/LingDong-/fishdraw) [Fishdraw: Procedurally Generated Fish Drawings](https://github.com/LingDong-/fishdraw) — This Node-based project creates ‘all sorts of weird fishes’ and boasts being fully procedurally generated - the output looks pretty amazing. 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