JavaScript Icon

JavaScript

Tracking all things JavaScript
1013 Stories
All Topics

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.

Zach Leatherman zachleat.com

Queue Code—“live” code without errors

Zach Leatherman wanted the effect of live coding for his tech talks, but none of the unbridled anxiety (his words). Sooo he did what any self-respecting software developer does: he built a thing.

You can use this for presentations (like me). You could use this for screencasts or recording video training materials. Hell, you could even use it for job interviews (probably don’t do this). But it wouldn’t hurt to have a fizzbuzz gist in your back pocket just in case 😅

See Queue Code in action in this tweet of Zach’s daughter “doing some HTML programming” then try it for yourself right here.

Mike Bostock observablehq.com

Did I learn anything from 10 years of D3.js?

Mike Bostock celebrates D3’s 10th by reflecting on what he’s learned over the years. There’s a lot to glean from Mike’s reflections. I really enjoyed this sentiment under the “Don’t go it alone” section:

To avoid entrusting your emotional wellbeing to internet randos (see #8), you must develop relationships with a small, stable group of people that you respect. In other words, find a team (or community) that can provide validation, feedback, support, and mentorship. Maybe this is obvious to everyone but me — yes, Mike, friends are good — but I feel like it’s worth repeating today when so much human interaction happens at a distance.

Node.js jam.systems

Jam is an OSS alternative to Clubhouse and Twitter Spaces

With Jam you can create audio rooms that can be used for panel discussions, jam sessions, free flowing conversations, debates, theatre plays, musicals and more. The only limit is your imagination.

The README has an excellent feature comparison to help you decide if Jam is right for you. They also have a PRIVACY file, which is nice to see.

Node.js github.com

UsTaxes – an open source tax filing web app

UsTaxes is an open source tax filing application that can be used to file the Federal 1040 form. It is different from paid tax preparation software in that it protects user privacy and is provided for free. It is available in both web and desktop formats.

The coolest thing about this (in addition to it being free-as-in-beer) is that it stores all data in the browser only, so your personal info never leaves your computer.

WIP Alert: You shouldn’t use it file your taxes for the 2020 / 2021 tax season, but it’s a great time to get involved and help this software become production-ready for the next go-around.

Browser London Icon Browser London

React is king (and that’s not changing anytime soon)

Connor Ward:

Before React, there was Angular and before that, there was jQuery – all frameworks that have fallen by the wayside. It’s just a matter of time before something comes along and takes the mantle as the new hotness. Or so they say.

I’m not so sure. In fact, I think React will be with us for many years to come.

He sites React Native’s success as one reason React will remain relevant, amongst others. I’m not so sure.

I believe React The Idea (uni-directional data flow through declarative component trees) is here to stay, but I’m not so convinced that React The Software won’t be soon replaced like its predecessors were.

JavaScript v8.dev

How the V8 team made JS calls faster with this clever trick

Victor Gomes details the elegant hack (in the best sense of the word) he and the V8 team came up with to significantly increase V8’s JavaScript function call performance (by up to 40% in some cases).

Until recently, V8 had a special machinery to deal with arguments size mismatch: the arguments adaptor frame. Unfortunately, argument adaption comes at a performance cost, but is commonly needed in modern front-end and middleware frameworks. It turns out that, with a clever trick, we can remove this extra frame, simplify the V8 codebase and get rid of almost the entire overhead.

A fascinating read and fantastic performance improvements for all to enjoy.

React github.com

Create videos programmatically in React

You may be wondering why this is a good idea. Thankfully, the README starts by answering that question:

  • Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc.
  • Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects
  • Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem

If you want to see it in action, the announcement video for Remotion was written in Remotion itself. (Because of course)

At this point, we may need to adjust Atwood’s Law, which states:

any application that can be written in JavaScript, will eventually be written in JavaScript.

I think a s/JavaScript/React/g would do the trick…

Ivan Novikov github.com

A log function with superpowers

1log is a new logging library for the browser and Node. This library provides a log() function which is like console.log, but with superpowers:

  1. It can be used in expressions - f(log(x))
  2. It supports plugins

There are plugins for setting a severity level, for adding badges, and for logging functions, iterables, promises, and RxJS observables. You can even use it in your tests. Instead of writing log messages to the console, you can inspect them in unit tests with help of Jest’s snapshots feature.

Nick Schot simplabs.com

An intro to animating with the Web Animations API

Nick Schot from Simplabs with a solid primer to get you started with the Web Animations API

The Web Animations API is a relatively new addition to the browser and is still very much in development. It promises to combine the benefits of CSS Transitions/Animations and JavaScript based animations.

All popular browsers have now implemented the minimum features necessary to do complex animations and a polyfill which adds support for the Web Animations API to older browsers is available. It’s time we tried it out!

Chris Coyier CSS-Tricks

Servers: cool once again

Chris Coyier rounding up recent frontend moves (by Basecamp and React, specifically) back to server-side rendering techniques of old:

So: servers. They are just good at doing certain things (says the guy typing into his WordPress blog). There does seem to be some momentum toward doing less on the client, which I think most of us would agree has been taking on a bit much lately, which asset sizes doing nothing but growing and growing.

Let’s push those servers to the edge while we’re at it.

I agree. Servers are cool. Clients are cool, too. But so are servers.

0:00 / 0:00