JavaScript Icon

JavaScript

Tracking all things JavaScript
934 Stories
All Topics

JavaScript p01.org

A JavaScript demo in 1021 bytes (!)

It’s amazing what p01 has done with MONOSPACE– winner of this year’s Assembly 1kb competition:

For MONOSPACE, the main inspiration came from plot writers and flip dots displays like the ones in train stations. After experimenting with speech synthesis in previous productions in 1kb and 256 bytes, I wanted to break the fourth wall. Another thing dear to me was to mimic a handheld camera that slightly shakes and goes out focus to increase the immersion in this monospace world.

View here. Interact here.

Communications github.com

An open source alternative to Twilio

Project Fonos is open-source telecommunications for the cloud. This repository assembles the various components needed to deploy a telephony system. It helps VoIP integrators quickly deploy new networks and include value-added services such as Programmable Voice, Messaging, and Video.

I sincerely love the audacity on display when open source hackers sit down, roll up their sleeves, and compete with publicly traded companies. 💪

Chris Coyier CSS-Tricks

The widening responsibility for front-end developers

Chris Coyier:

This is an extended version of my essay “When front-end means full-stack” which was published in the wonderful Increment magazine put out by Stripe. It’s also something of an evolution of a couple other of my essays, “The Great Divide” and “Ooops, I guess we’re full-stack developers now.

This is a lengthy, sprawling piece on the evolution of frontend development by someone who really gets the web. It also has its own art-direction and design so you’ll want to read it onsite vs in an Instapaper-alike.

Data visualization awslabs.github.io

A library to display an interactive editor for any graph-like data

Diagram Maker is a framework & data format agnostic library that is fully customizable in terms of look & feel as well as behavior. It also exposes a declarative interface to reduce the code required to integrate the library in any application and comes with many interactive features built in.

See it in action on their interactive demo.

A library to display an interactive editor for any graph-like data

React github.com

visx – airbnb's visualization components built with D3 and React

At Airbnb, we made it a goal to unify our visualization stack across the company and in the process, we created a new project that brings together the power of D3 with the joy of React.

The library boasts small bundle sizes due to package splitting, is un-opinionated about integrations like state management and animations (if that’s a feature for you), and is explicitly not a charting library.

As you start using visualization primitives, you’ll end up building your own charting library that’s optimized for your use case. You’re in control.

JavaScript github.com

urlcat – a tiny JS library for building URLs

If building URLs to make API requests is something you do commonly in your JavaScript code, this little dependency might be worthy of a position in your package.json. It’ll help you turn code like this:

const requestUrl = `${API_URL}/users/${id}/blogs/${blogId}/posts?limit=${limit}&offset=${offset}`;

Into code like this, which is more ergonomic and less error prone:

const requestUrl = urlcat(API_URL, '/users/:id/posts', { id, limit, offset });
urlcat – a tiny JS library for building URLs

Chrome github.com

Headless Recorder

Headless recorder is a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script. Install it from the Chrome Webstore. Don’t forget to check out our sister project theheadless.dev, the open source knowledge base for Puppeteer and Playwright.

You may have heard of this when it was called Puppeteer Recorder, but its recent addition of Playwright support warranted a rename.

Mat Ryer pace.dev

Passive user preferences with persisted stores in Svelte

Mat Ryer makes the case for passive user preferences, which is where you store their last used setting for them without asking and then set it as the default the next time they interact with that part of your app. He then goes on to describe how they accomplish this with Svelte. Good stuff!

If you want to hear more about how they’re using Svelte and Go to build Pace, we did a pair of podcasts on the topic earlier this year.

JavaScript moonjs.org

Moon – a purely functional user interface library that's fast, tiny, and intuitive

Yes, it’s that time once again… Time for yet another front-end JS library!

Since Moon is so simple at its core, where it creates an abstraction to allow drivers to handle input and output, it only weighs 2kb minified and gzipped. On top of that, it is specifically optimized for JavaScript engines to perform fast virtual DOM diffing and DOM operations.

Often times “simple” is a proxy for “only solves my immediate use-case, but I will continue to link up JS solutions that bring good ideas to the table, and pure functions are a good idea for many reasons.

Antoni Kepinski github.com

Fast & lightweight (157 bytes) date formatting for Node and the browser

After searching for a fast and lightweight universal date formatting library, I’ve decided to create my own! I managed to include the most common features in just 157 bytes. The thing is also more than 2 times faster than Moment’s format and 3,5 times faster than date-fns lightFormat. 😃

Formatting patterns are compliant with Unicode Technical Standard #35.

While only a basic set of features is included with the format function, I added an additional localeFormat for locale-based formatting (such as month names). I’m planning on extending the package in the future to potentially include string escape mechanism and time-zone formatting.

Sean DuBois webrtcforthecurious.com

WebRTC for the Curious 📘

A new CC0 book about WebRTC by Sean DuBois (and friends). Sean recently shared his love for and deep knowledge about the technology on our Go Time podcast.

This book was created by WebRTC implementers to share their hard-earned knowledge with the world. WebRTC for the curious is an Open Source book written for those that are always looking for more. This book doesn’t settle for abstraction.

This book is all about protocols and APIs, and will not be talking about any software in particular. We attempt to summarize RFCs and get all undocumented knowledge into one place. This is book is not a tutorial, and will not contain much code.

This is very much a WIP, but there’s a fair bit ready for consumption and the authors are actively collaborating in the GitHub repo.

TypeScript github.com

Airbnb's tool for helping migrate code to TypeScript

ts-migrate is a tool for helping migrate code to TypeScript. It takes a JavaScript, or a partial TypeScript, project in and gives a compiling TypeScript project out.

ts-migrate is intended to accelerate the TypeScript migration process. The resulting code will pass the build, but a followup is required to improve type safety. There will be lots of // @ts-expect-error, and any that will need to be fixed over time. In general, it is a lot nicer than starting from scratch.

ts-migrate is designed as a set of plugins so that it can be pretty customizable for different use-cases. Potentially, more plugins can be added for addressing things like improvements of type quality or libraries-related things (like prop-types in React).

JavaScript github.com

A tiny JS library for keybindings

Yes, you can do keybindings directly. But for a mere ~400 bytes you can do keybindings like this instead:

import tinykeys from "tinykeys"

tinykeys(window, {
  "Shift+D": () => {
    alert("The 'Shift' and 'd' keys were pressed at the same time")
  },
  "y e e t": () => {
    alert("The keys 'y', 'e', 'e', and 't' were pressed in order")
  },
  "$mod+KeyD": () => {
    alert("Either 'Control+d' or 'Meta+d' were pressed")
  },
})

Apple github.com

A virtual Apple Macintosh with System 8 (running in Electron)

First things first… does it actually work?!

Yes! Quite well, actually - on macOS, Windows, and Linux. Bear in mind that this is written entirely in JavaScript, so please adjust your expectations. The virtual machine is emulating a 1991 Macintosh Quadra 900 with a Motorola CPU, which Apple used before switching to IBM’s PowerPC architecture in the late 1990s.

Ok, cool. Does it run my favorite game?!

The short answer is “Yes”. In fact, you’ll find various games and demos preinstalled, thanks to an old MacWorld Demo CD from 1997. Namely, Oregon Trail, Duke Nukem 3D, Civilization II, Alley 19 Bowling, Damage Incorporated, and Dungeons & Dragons.

There are also various apps and trials preinstalled, including Photoshop 3, Premiere 4, Illustrator 5.5, StuffIt Expander, the Apple Web Page Construction Kit, and more.

A virtual Apple Macintosh with System 8 (running in Electron)

Node.js github.com

A lightweight and powerful wiki app built on Node

I’m not sure what makes this lightweight (their word, not mine), but it does load pretty fast from where I’m accessing it. I definitely see what they mean by powerful, though, as wiki.js boasts many features: multiple editors, multiple auth schemes, search functions, comments, multiple locales, the list goes on…

The demo is worth a thousand words.

0:00 / 0:00