JavaScript Icon

JavaScript

Tracking all things JavaScript
949 Stories
All Topics

Deno github.com

Aleph.js is a React Framework in Deno

Aleph.js doesn’t need webpack or other bundler since it uses the ESM imports syntax. Every module only needs to be compiled once and then cached on the disk. When a module changes, Aleph.js just needs to re-compile that single module, there’s no time wasted to re-bundle every changes, and instantly updates in the browser by HMR (Hot Module Replacement) with React Fast Refresh.

The “$X but for Deno” meta trend is starting to pick up steam. Expect more like this in 2021 and beyond.

Martijn de Haan nullbyt.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 Rojas stackbuilders.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 MacWright macwright.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.

JavaScript github.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 Brodersen github.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.

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.

0:00 / 0:00