JavaScript Icon

JavaScript

Tracking all things JavaScript
949 Stories
All Topics

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.

Antoni Kepinski DEV.to

How to embed a Changelog podcast player into a React app

Antoni Kepinski, who was a guest of ours on JS Party #85:

I wrote a short tutorial on how to embed Changelog’s podcast player into a React application so that it doesn’t affect the performance and accessibility of the site.

While I do understand that Changelog isn’t interested in How-to's and tutorials, I feel like this one can be an exception, as it is related directly to Changelog and its podcasts ;)

Antoni is correct! How-to’s and tutorials aren’t something we share often. It’s not that they aren’t useful, it’s just that they aren’t really news and they are rarely noteworthy. But I’ll make an exception this time. 😉

JavaScript github.com

A JS library for building regular expressions in (almost) natural language

I’ve seen tools like this one before, but every time I do I still pass them around because regular expressions are powerful but also quite unapproachable. With this library, you can chain together function calls describing how you think about a rule and it’ll generate the expression for you. Example!

const SuperExpressive = require('super-expressive');

const myRegex = SuperExpressive()
  .startOfInput
  .optional.string('0x')
  .capture
    .exactly(4).anyOf
      .range('A', 'F')
      .range('a', 'f')
      .range('0', '9')
    .end()
  .end()
  .endOfInput
  .toRegex();

// Produces the following regular expression:
/^(?:0x)?([A-Fa-f0-9]{4})$/

That matches and captures the value of a 16-bit hexadecmal number like 0xC0D3. Assuming this library generates clean, somewhat optimal expressions (which might be a big assumption), it’s a great way to learn how to write your own expressions over time.

JavaScript hyperapp.dev

Hyperapp – the tiny framework for building web interfaces

Hyperapp claims to be twice as fast as React, weighs in at 1.8KB, and renders interactively in ~10ms.

Hyperapp is a modern VDOM engine, state management solution, and application design pattern all-in-one. once you learn to use it, there’ll be no end to what you can do.

Filed under: zero-minutes-since-last-frontend-framework

Node.js github.com

An extremely fast and lightweight test runner for Node and the browser

uvu has minimal dependencies and supports both async/await style tests and ES modules, but it’s not immediately clear to me why it benchmarks so well against the likes of Jest and Mocha.

~> "jest"  took  1,630ms  (861  ms)
~> "mocha" took    215ms  (  3  ms)
~> "tape"  took    132ms  (  ???  )
~> "uvu"   took     74ms  (  1.4ms)

The benchmark suites are pretty basic, so it’d be cool to see a “production” grade library or application port their test suite to uvu for comparison.

Matteo mailgo.dev

mailgo makes `mailto` and `tel` links more useful

Instead of only triggering the default email or phone apps when selecting a mailto or tel link on your website, “mailgo” provides a modal with more options such as “Open in Gmail”, “Open in Outlook”, etc.

This will extra functionality will be less important on mobile now that Apple is letting us change our default clients in iOS 14 (so that the default app would already be set to Gmail, for example), but you may find it helpful for your users anyhow. 4.96 KB cheap.

Maxime Vaillancourt turven.xyz

See how many other people are currently on the same page as you

A neat idea:

turven is a tiny widget that shows how many people are currently on the same page as you, for “warm fuzzy feelings” purposes. There’s something cool about seeing that there’s another soul out there, somewhere on our little blue planet, who’s reading the same thing at the same moment ✨

In practice, I’m not sure if it’ll make us feel less lonely or more lonely:

You’re the only person in the whole world on this web page right now. Why not invite a friend?

I guess it depends on which web pages you frequent…

Sheshbabu Chinnakonda sheshbabu.com

Rust for JavaScript developers (functions and control flow)

This is part 3 of a three part series from Sheshbabu Chinnakonda introducing the Rust language to JavaScript developers — this one is focused on functions and control flow.

When Shesh kicked off this series he said, “I find it easier to understand something new if it was explained in terms of something I already know. I thought there might be others like me.”

BTW, here are links to the others from this series:

Zach Leatherman zachleat.com

Use Speedlify to continuously measure site performance

Zach Leatherman:

Instantaneous measurement is a good first step. But how do we ensure that the site maintains good performance and best practices when deploys are happening every day? How do we keep the web site fast? The second step is continuous measurement. This is where Speedlify comes in. It’s an Eleventy-generated web site published as an open source repository to help automate continuous performance measurements.

Demo here.

Use Speedlify to continuously measure site performance

npm sambleckley.com

Worrying about the npm ecosystem

Sam Bleckley:

The npm ecosystem seems unwell. If you are concerned with security, reliability, or long-term maintenance, it is almost impossible to pick a suitable package to use — both because there are 1.3 million packages available, and even if you find one that is well documented and maintained, it might depend on hundreds of other packages, with dependency trees stretching ten or more levels deep — as one developer, it’s impossible to validate them all.

He then spends some time measuring the extent of the problem.

Julia Evans jvns.ca

A little bit of plain JavaScript can do a lot

Julia Evans:

I was pretty surprised by how much I could get done with just plain JS. I ended up writing about 50 lines of JS to do everything I wanted to do, plus a bit extra to collect some anonymous metrics about what folks were learning.

Listeners of JS Party know I’m an advocate for JavaScript sprinkles. Not on every site, but on most sites I think that’s the best way to start out.

Now more than ever, you can get a lot done with what’s right there in the browser. Wait until you feel the pain before you solve the problem. Who knows, maybe you’ll never have to…

YouTube Icon YouTube

JS Danger: OpenJS World Edition

This episode of JS Danger recorded for OpenJS World won’t be hitting the audio feed, so I figured I should log it in news for those interested. What’s JS Danger?

JS Party’s don’t-call-it-jeopardy game show where 3 OpenJS World speakers put their web dev knowledge to the test. Can you out-wit your fellow devs? Play along to find out with special guests Cassidy Williams, Prosper Otemuyiwa, and Tiffany Le-Nguyen.

0:00 / 0:00