Posted on

The future of JavaScript is.. import maps?

#​552 — August 20, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Ruby on Rails’ Creator on Modern Web Apps without JS Bundling or Transpiling — David Heinemeier Hansson (the original creator of the popular Ruby on Rails 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.

David Heinemeier Hansson (DHH)

An Absurd Future for SQL on the Web?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

Learn the Fundamentals of 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 — 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.

Chromium is adding support to import CSS stylesheets with import much as you might with ES modules.

🎲 The annual JS13KGames coding competition has begun and runs until September 13 – the theme is “space.” Ready to build a game?

A look at the weird error message you’ll encounter if you put more than 2^24 items in a Map object.

🎂 Bootstrap is 10 years old!

RELEASES:

Mocha 9.1.0 – Testing framework.
svgo 2.4.0 – Node tool for optimizing SVG files.
Node 16.7.0 – Experimentally adds a recursive cp method.
Capacitor 3.2.0 – Build native PWAs for iOS, Android, and the Web.
WebTorrent 1.5.0 – Streaming torrent client for the web.
Cypress 8.3.0 – Testing for anything that runs in a browser.

💻 Jobs

Front-End Developer – Utrust (Remote, GMT -2/+4) — 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 — Series-A, neobank tailored to e-commerce, 12 developers and entering hypergrowth.

Juni

Find JavaScript Jobs with Hired — 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

Creating an Interactive Gantt Chart Component with Vanilla JS — 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 — 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 — 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 — 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 — A way to avoid build steps but still enjoy TypeScript type checking on your .js files.

Wes Goulet

return await promise vs return promise — 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.’

Louis Petrik

How to Build a Portfolio Site with Next.js and Tailwind CSS

Manu Arora

Truthy and Falsy: When All is Not Equal in JavaScript

Craig Buckler

🛠 Code & Tools

wavesurfer.js: Navigable Waveforms via the Web Audio and Canvas APIs — 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 — Works in the browser or server-side. Demo here to see it in action.

Christopher Jeffrey

Go from Zero to Live Streaming, in a Couple of Minutes — 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 — 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 — Uses Intersection Observer and then progressive rendering with CSS animations to keep things smooth. CodeSandbox demo.

Alex Jover

Pyodide: Python Compiled to WebAssembly for the Web — 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 to use Python in the browser, though.

Pyodide contributors and Mozilla

Book a Demo. Ship Fast. Rest Easy. LaunchDarkly

LaunchDarkly sponsor

Notistack: A Library for Easy Snackbar/Toast Notifications — You can try out a whole slew of demos and an API reference on the docs site.

Hossein Dehnokhalaji

Serendipity: A Beautiful VS Code Theme with Dark and Light Modes — 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.

Dmitri Pavlutin explains how to use the fetch() API to load and post JSON data.

Kilian Valkhof shows how you can detect media query support in CSS and JavaScript.

🐟 And one that didn’t quite get away…

Fishdraw: Procedurally Generated Fish Drawings — This Node-based project creates ‘all sorts of weird fishes’ and boasts being fully procedurally generated – the output looks pretty amazing.

Lingdong Huang

Leave a Reply

Your email address will not be published. Required fields are marked *