Lea Verou shared this story of using Javascript for the first time…

Today I tried to help a friend who is a great computer scientist, but not a JS person use a JS module he found on Github. Since for the past 6 years my day job is doing usability research & teaching at MIT, I couldn’t help but cringe at the slog that this was. Lo and behold, a pile of unnecessary error conditions, cryptic errors, and lack of proper feedback. And I don’t feel I did a good job communicating the frustration he went through in the one hour or so until he gave up.

It went a bit like this…

This comes from the just-announced Supabase, which is “an open source alternative to Firebase”. Oh, and if you’re thinking NOTIFY is good enough… maybe it is, maybe it isn’t.

Tobias Uhlig:

Neo is based on top of ES8 and uses the latest ES features as long as they can run directly inside the browser. This is one of the major design goals: the dev mode can run inside a browser without needing any JS related builds or transpilations. Instead of using any kind of templates, persistent JSON structures are in place. The combinations of these concepts lead to a pretty amazing performance and adds new possibilities for scaling to the UI area.

I haven’t seen any benchmarks or examples where using Neo produces extreme performance, but conceptually it makes sense that moving computationally expensive things to background threads would keep your UI thread snappy.

Nick and Jerod welcome Dojo’s Matt Gadd to the show to catch us up on what’s changed with the framework since episode #25, what’s coming in version 7, and to defend Nick’s comment that if you like React you just might like Dojo better.

It’ll mirror user interactions across 30+ devices and give you a single element inspector so you can make and inspect changes in one fell swoop. (Built with Electron.)

Every 10 years there is a changing of the guard in JavaScript. I think we have just started a period of accelerated change that could in future be regarded as the Third Age of JavaScript.

Divya and Nick welcome Deno’s Kit Kelly to the show to celebrate the highly-anticipated new JavaScript/TypeScript runtime’s big 1.0 release.

This is a wide-ranging discussion about all things Deno. We discuss why they’re using Rust, how they’re rewriting parts of the TypeScript compiler, their take on package management, what adoption looks like, their code of conduct, and more.

Recoil provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Straight outta Facebook. See also the conference talk where it was announced at React Europe 2020.

Nick does a great job with these videos. If you’ve never given Turbolinks a serious look, this would be 20 minutes well spent. We’ve been using Turbolinks for 4+ years now with great success.

I’ve had my eye on esbuild for awhile now (because I’m impatient), but there didn’t seem to be an easy way to use the Go-based JS bundler with our current webpack setup. (I want speed, after all, but I don’t want to have to work for it!)

I’m pretty excited by esbuild-loader, because its README says:

It makes sense to use [esbuild] over Babel/TSC with webpack to take advantage of both worlds (Speed and the webpack ecosystem).

That’s music to my ears, right there. I’ll report back how it works for us. ✊

Node 14, Vue’s Vite, and is-promise are in the news. We’ve got some working from home tips and unpopular opinions to share. And… shout outs! 👏

This is a very detailed article on:

directly comparing Ember and React, using the latest idioms and best practices from both frameworks.

It goes really deep into the differences and the developer experiences of both frameworks and is a really good read for someone who is curious about what modern Ember looks like, especially if they have some previous React knowledge.

Gatsby creator Kyle Mathews joins Jerod fresh off the launch of incremental builds to tell the story of this feature that’s 3 years in the making. We talk about Kyle’s vision for Gatsby, why incremental builds took so long, why it’s not part of the open source tool, how he makes decisions between Cloud and open source features, and more.

One of Gatsby’s greatest virtues is how it normalizes all data sources through its source plugin architecture. This is cool because it gives you a unified access layer for everything from the file system to 3rd-party APIs to headless CMSes.

Kevin Titor must’ve liked the idea enough that he’s bringing it to other frameworks that support static site generation (Next.js, Nuxt.js, Eleventy, etc.). The main thing missing from Mordred is a community creating plugins for popular CMSes and services; a great way to get involved!

This week Feross and Emma chat with Segun Adebayo about Chakra UI, a modular React component library that’s changing the game for design systems and app development.

Addy Osmani has created an excellent resource for all developers interested in optimizing their web performance (which should be pretty much all of us).

You’ve probably heard of Puppeteer, which lets you control Chromium headlessly over the DevTools protocol. This repo shows you how to use Puppeteer to automate performance measurement, such as getting a performance trace for a page load:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // Drag and drop this JSON file to the DevTools Performance panel!
  await page.tracing.start({path: 'profile.json'});
  await page.goto('https://pptr.dev');
  await page.tracing.stop();
  await browser.close();
})();

Which produces the results in the image below.

Editly is a tool and framework for declarative NLE (non-linear video editing) using Node.js and ffmpeg. Editly allows you to easily and programmatically create a video from set of clips, images and titles, with smooth transitions between and music overlaid.

The video in the gif below was produced by sending Editly this JSON config.

We all know our users pay a cost when we push our JS framework in to their browser. Now, thanks to Tim Kadlec doing the yeoman’s work of crunching the numbers, we can approximate just how much that cost really is.

There is no faster (pun intended) way to slow down a site than to use a bunch of JavaScript. The thing about JavaScript is you end up paying a performance tax no less than four times:

1. The cost of downloading the file on the network
2. The cost of parsing and compiling the uncompressed file once downloaded
3. The cost of executing the JavaScript
4. The memory cost

Thanks to HTTP Archive, we can figure that out.

I’m pretty happy with how sites using jQuery size up. Granted, it’s not really a UI framework like the others are, but you have to imagine that many of those sites also use jQuery UI and their overall cost still compares well to the more modern solutions.

Emma, Divya, and Suz are joined by Quincy Larson from freeCodeCamp where they chat about virtual conferences. Are they better than in-person conferences? What are the differences? Let’s find out!

Phelia transforms React components into Slack messages by use of a custom React reconciler. Components (with their internal state and props) are serialized into a custom storage. When a user interacts with a posted message Phelia retrieves the component, re-hydrates it’s state and props, and performs any actions which may result in a new state.

It’s crazy interesting to me how many of these “Use React for X” projects keep popping up. People are making CLIs with React, games with React, desktop apps with React. What else?

This is a nice, Smashing deep-dive by the author of React HereMaps:

Armed with basic knowledge, beginner and intermediate developers of Node.js struggle with many things: “It’s just a runtime!” “It has event loops!” “Node.js is single-threaded like JavaScript!”
While some of these claims are true, we will dig deeper into the Node.js runtime, understanding how it runs JavaScript, seeing whether it actually is single-threaded, and, finally, better understanding the interconnection between its core dependencies, V8 and libuv.

The New Stack with a nice rundown of what’s new/noteworthy in Node 14. The once-an-npm-package node-report is now mainlined, an experimental AsyncLocalStorage API has been added, and more.

These libraries come from the team at repl.it and you can play with them in your browser on repl.it.

Find security vulnerabilities in open source npm packages while you code. Receive feedback in-line with your code, such as how many vulnerabilities a package contains that you are importing.

Inspired by Import Cost

For those searching for ways to shave a few kilobytes off of their bundles, that’s less than 1/5th of the size. This is made possible by using the browser’s native [Fetch API][fetch], which is supported in all modern browsers and polyfilled by most tools including Next.js, Create React App and Preact CLI.

Of course, you could always use Axios directly if/when you can justify the dependency.