JavaScript Icon

JavaScript

Tracking all things JavaScript
968 Stories
All Topics

Martijn de Haannullbyt.es

A new TypeScript Postgres query builder

Martijn de Haan:

It’s been almost 3 years since I started working on this query builder idea of mine. Today is finally the day Mammoth hits 1.0. Mammoth is a no-batteries-included type-safe Postgres query builder for TypeScript. Hooray!

Congrats on shipping, Martijn! Here’s a peak at the API:

const rows = await db
    .select(db.foo.id, db.bar.name)
    .from(db.foo)
    .leftJoin(db.bar)
    .on(db.bar.fooId.eq(db.foo.id));

Angie Rojasstackbuilders.com

Does Deno mean goodbye to Node.js?

Angie Rojas shared some insights into what Deno brings to the TypeScript ecosystem and whether or not it will “render Node.js obsolete.”

During the last 10 years, Node.js has become a big player in the backend framework market, powering several large scale applications across the globe. Meanwhile, JavaScript has also evolved greatly, not only because of the efforts of its development team, but also based on community feedback. However, integrating some of these new language features into a 10-year-old framework is not really straightforward, and has a high level of complexity.

Therefore we could say that Node.js’ architecture hasn’t evolved as fast as the language. As a basic example, Node.js is still based on callbacks, while there are far better ways to deal with asynchronicity in modern JavaScript. This is something that its creator, Ryan Dahl, has acknowledged in the past few years, and it has moved him to work on a new framework that addresses some of these issues. It is called Deno, and in the following article, we would like to explore some of its concepts to determine if it will render Node.js obsolete.

Tom MacWrightmacwright.com

If not SPAs, what?

Tom MacWright shared some concerns for SPAs place in the modern web and followed it up with a post sharing suggestions to use instead.

The SPA pattern (Single-Page Apps), I tried to define, was about the React model, which also covers, to a large extent, the model of Vue, Angular, and other frontend frameworks.

Like any critique, it begs for a prescription and I didn’t give one, other than gesturing toward server-side frameworks like Rails and Django. But I think there are some trends starting to form. I had queued up some time to really dive into the frameworks, but things like walking in parks have taken priority, so here’s just a grand tour.

JavaScriptgithub.com

An all-in-one starter kit for high-performance ecommerce sites

Next.js Commerce is Vercel’s (previously Now) latest open source offering that brings ecommerce to Next.js. The storefront can be hosted on any platform you choose and will at some point have built-in integrations for popular backends such as Shopify and Swell.

While this is an exciting project, it’s still very much a WIP and you can see the team’s progress and roadmap on this project board.

Morris Brodersengithub.com

A case study on vanilla web development

It’s a TeuxDeux clone in plain HTML, CSS and JavaScript. More importantly, it’s a case study showing that vanilla web development is viable in terms of maintainability, and worthwhile in terms of performance.

There’s no custom framework invented here. Instead, the case study was designed to find minimum viable patterns that are truly vanilla (see the rules). The result is maintainable, albeit verbose and with considerable duplication in certain areas.

If anything, it shows the value frameworks provide, but also highlights how effective standard web technologies can be used.

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

Communicationsgithub.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 CoyierCSS-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 visualizationawslabs.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

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

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

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

0:00 / 0:00