JavaScript Icon

JavaScript

Tracking all things JavaScript
1036 Stories
All Topics

Brad Van Vugt blog.battlesnake.com

Controlling a battlesnake with a webcam, Replit, and your face

Battlesnake’s Brad Van Vugt:

This past spring on Coding Badly, Joe and I, for whatever reason, challenged ourselves to build a camera-controlled Battlesnake. The result was “Facesnake” – a Battlesnake controlled in real-time using your face and webcam. This post outlines how we built it using Replit and tracking.js :-)

You can also jump straight to the source code or watch Facesnake in action here.

JS Party JS Party #183

JS on Wasm

KBall and Nick Nisi sit down with Nick Fitzgerald to learn about running JavaScript on WebAssembly. They talk about almost instantaneous startup, running interpreted languages at the edge, and take a deep dive into the weeds of how Wasm based modules will change the future of application development.

Dan Abramov overreacted.io

npm audit: broken by design

Dan Abramov cuts right to the chase:

Have you heard the story about the boy who cried wolf? Spoiler alert: the wolf eats the sheep. If we don’t want our sheep to be eaten, we need better tools.

As of today, npm audit is a stain on the entire npm ecosystem. The best time to fix it was before rolling it out as a default. The next best time to fix it is now.

He goes on to lay out how it works, why it’s broken, and what changes he’s hoping to see.

JavaScript github.com

Solid – a declarative JavaScript library for creating user interfaces

Solid… does not use a Virtual DOM. Instead it opts to compile its templates down to real DOM nodes and wrap updates in fine grained reactions. This way when your state updates only the code that depends on it runs.

Solid takes a lot of cues from React, but sets itself apart in that it doesn’t use a Virtual DOM. Here’s what Michel Weststrate had to say about it on Twitter:

Not a revolution, but really solid (pun) evolution; clean component model, really efficient run-time model, deeply embedded reactivity. Definitely think it’s worth giving it a shot in fresh new, limited scope projects!

Axel Rauschmayer 2ality.com

Temporal: getting started with JavaScript’s new date time API

Dr. Axel Rauschmayer gives us a feel for one of the most exciting new APIs in JavaScript-land.

The Temporal date time API is accessible via the global variable Temporal. It is a pleasure to use:

  • All objects are immutable. Changing them produces new values, similarly to how strings work in JS.
  • There is support for time zones and non-Gregorian calendars.
  • There are several specialized classes for Temporal values (date time values with time zones, date time values without time zones, date values without time zones, etc.). That has several benefits:
    • The context of a value (time zone or not, etc.) is easier to understand.
    • It is often more obvious how to achieve a given task.
    • .toString() can be used with much less consideration.
  • January is month 1.

(The Temporal proposal is currently at Stage 3. The API isn’t expected to change and is being implemented.)

Benny Powers DEV.to

What's NOT new in React 18

Benny Powers is NOT pleased with what he believes is missing from the latest React release:

For five years now, there’s been a concerted, multilateral push to bring React into line with every other major framework on custom elements, enshrined in the HTML and DOM specs for years now. Much effort was spent both in public and behind the scenes to encourage the React core team to implement real support for the standards.

But then the PRs were closed, or ignored without public comment. And the issues languished. And the hopeful indications of a willingness to play ball with the rest of the web community grew stale and limp.

We, developers that want to write components that work in any frontend stack, were really hopeful that React 17 would deliver, but React is still the mobile iOS of front-end frameworks.

My spidey sense tells me that “the mobile iOS of front-end frameworks” isn’t a compliment…

JavaScript v2.parceljs.org

Parcel 2 is getting a 10x compiler speedup (thanks, Rust!)

The Parcel team is excited to release Parcel 2 beta 3! This release includes a ground up rewrite of our JavaScript compiler in Rust, which improves overall build performance by up to 10x. In addition, this post will cover some other improvements we’ve made to Parcel since our last update, along with our roadmap to a stable Parcel 2 release.

A growing trend in the JS tooling world is to replace bits and pieces with Rust || Go where it makes sense and reap the performance benefits. Congrats to the Parcel team on epic results from this rewriting effort.

Parcel 2 is getting a 10x compiler speedup (thanks, Rust!)

Node.js github.com

google/zx – a tool for writing better scripts

Bash is great, but when it comes to writing scripts, people usually choose a more convenient programming language. JavaScript is a perfect choice, but standard Node.js library requires additional hassle before using. zx package provides useful wrappers around child_process, escapes arguments and gives sensible defaults.

I wouldn’t say JavaScript is a perfect choice for this kind of scripting, but it’s definitely a suitable one (especially if it’s the language you already know well). Here’s what scripting looks like with zx:

#!/usr/bin/env zx

await $`cat package.json | grep name`

let branch = await $`git branch --show-current`
await $`dep deploy --branch=${branch}`

await Promise.all([
  $`sleep 1; echo 1`,
  $`sleep 2; echo 2`,
  $`sleep 3; echo 3`,
])

let name = 'foo bar'
await $`mkdir /tmp/${name}`

Top-level await sure makes things nicer. (Deno supports this out of the box, btw.)

0:00 / 0:00