JavaScript Icon

JavaScript

Tracking all things JavaScript
1038 Stories
All Topics

Ivan Nikolić github.com

Node `timers/promises` for browser and server

Node recently introduced timers/promises API which provides functionality such as setTimeout and setInterval but using Promises. Developers usually achieved that functionality with various 3rd-party packages but now they have full STD support with additional features like native cancellation.

So, I thought it would be useful to have that same API available in browsers (even down to IE11) and older Node versions!

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.

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.)

Tooling sli.dev

Slidev – presentation slides for developers

The motivation for building Slidev:

I always found myself spending too much time styling and layouting slides when using apps like PowerPoint / Keynote / Google Slides. Whenever I need to share code snippets, I would also need to use other tools to generate the highlighted code as images over and over again.

So as a frontend developer, why not solve it the way that fits better with what I am good at?

Looks slick: themeable, hackable, and you write your slides in Markdown. 👌

Music github.com

An algorithmic human-computer techno jam

The music you hear is generated in your browser by a randomised algorithm, below you can see the notes and parameters that are currently in use. You can also interact with various parameters and buttons manually. The green autopilot switches change how automatic playback is. Leave them on for a lean-back experience. Buttons labelled ⟳ will generate new patterns. Source Code is on GitHub.

Bangin’

An algorithmic human-computer techno jam

JavaScript github.com

A form validation library that borrows its syntax from unit testing

You may have heard my little rant about WET form validation logic on the latest episode of The Changelog. Well maybe you didn’t, but Evyatar did. It prompted him to reach out and let me know about Vest, his declarative validation framework:

The idea behind Vest is that your validations can be described as a ‘spec’ or a contract that reflects your form or feature structure. Your validations run in production, and they are framework agnostic - meaning Vest works well with React, Angular, Vue, or even without a framework at all.

I dig the syntax! Here’s a taste:

import vest, { test } from 'vest';

export default vest.create('user_form', (data = {}, currentField) => {
  vest.only(currentField);

  test('username', 'Username is required', () => {
    enforce(data.username).isNotEmpty();
  });

  test('username', 'Username is too short', () => {
    enforce(data.username).longerThanOrEquals(3);
  });
});

Now all we need is a tool that will inspect our server-side logic and generate the equivalent Vest code. 😉

Node.js acco.io

I finally escaped Node (and you can too)

This is one of the least ranty “I’ve switched from X to Y” posts I’ve read and it’s filled with knowledge regarding the importance of data structures:

If you have solid foundation, the house will come with little effort. If the foundation is mud and sticks on top of a trash heap, your life as a builder is going to be complicated.

This principle applies to tools in a broader sense. You want to do the least work possible when swinging a sledgehammer, so you design it such that the hammer is a much heavier material than the handle. This gives you leverage. If you designed your sledgehammer in the inverse, you’d have to swing it harder every time you used it.

Bruno Vieira github.com

moovie.js - Movie focused HTML5 Player

In my professional work, a few years ago, I worked on a project where the objective was to make reviews of films and trailers, working through APIs that brought everything together.

The problem is that the subtitles were not always synchronized with the audio and it was very difficult (if not impossible) to find a player that could adjust in real time (at least without wierd plugins and hacks).

A few days ago I started working on a project called “moovie.js”, which is basically a standard HTML5 video, that allows you to adjust the offset manually in real time and has full support for .vtt and .srt caption files.

0:00 / 0:00