JavaScript Icon

JavaScript

Tracking all things JavaScript
1085 Stories
All Topics

Rust github.com

An open source alternative to Cloudflare Workers

Blueboat aims to be a developer-friendly, multi-tenant platform for serverless web applications. A monolithic approach is followed: we try to implement features of commonly used libraries (in the web application context) natively in Rust to replace native Node addons, improve performance and reduce duplicated code. Blueboat’s architecture ensures the security of the platform, prevents code duplication and keeps the overhead low.

James Sinclair jrsinclair.com

How not to write property tests in JavaScript

Property-based tests give us more confidence in our code. They’re great at catching edge-cases we may not have thought of otherwise. But this confidence comes at a cost. Property tests take more effort to write. They force you to think hard about what the code is doing, and what its expected behaviour should be. It’s hard work. And on top of that, running 100+ tests is always going to take longer than running 3–5 example-based tests. This cost is real, and it raises the question:

How do we keep ourselves from over-specifying or writing unnecessary tests?

Django saaspegasus.com

Modern websites, JavaScript optional (Django + HTMX + Alpine)

Building a modern front end in Django without reaching for a full-blown JavaScript framework. Choosing the right tools for the job, and bringing them into your project.

This is as close to a tutorial as you’ll see on Changelog News. I’m linking to it not for the step-by-step bits like talking to your “Django backend without a full-page reload”, but for the decision making bits like “when you might choose low-JavaScript.”

React github.com

Remix is now open source

The much-anticipated (and admittedly much-hyped) full stack web framework for React has opened its source (MIT license) to the public. What’s interesting about Remix? Here’s some marketing copy from the homepage:

Remix is a seamless server and browser runtime that provides snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds. Built on the Web Fetch API (instead of Node) it can run anywhere. It already runs natively on Cloudflare Workers, and of course supports serverless and traditional Node.js environments, so you can come as you are.

Okay that is pretty sales-y (hit up the homepage for more like that), so you might prefer jumping straight over to the docs instead and check out the example Jokes app to see what’s what.

JavaScript github.com

Microdiff is a tiny, fast, zero dep object & array comparison library for JS/TS

<1kb light and claims to be “significantly faster than most other deep comparison libraries”, but current benchmarks (better ones coming soon) only cover one small and one very large object, so YMMV on the speed. Also full TypeScript support, if that’s your bag.

import diff from "microdiff";

const obj1 = {
	originalProperty: true,
};
const obj2 = {
	originalProperty: true,
	newProperty: "new",
};

console.log(diff(obj1, obj2));
// [{type: "CREATE", path: ["newProperty"], value: "new"}]

Python github.com

An open source, online reverse dictionary

This is the first time I’ve heard of a reverse dictionary, but now that I have… so cool!

Opposite to a regular (forward) dictionary that provides definitions for query words, a reverse dictionary returns words semantically matching the query descriptions.

Ever had a word on the tip of your tongue and you Just. Can’t. Think of it?! Reverse dictionary!

An open source, online reverse dictionary

Next.js nextjs.org

Rust and JavaScript, sitting in a tree (Next.js 12)

Have you heard? The just-released 12th version of Next.js uses a Rust-based compiler (swc) to achieve ~3x faster local refreshes and ~5x faster production builds.

Compilation using Rust is 17x faster than Babel and enabled by default using Next.js 12, replacing transforming JavaScript and TypeScript files. This meant we had to port the Babel transformations in Next.js to Rust, including a brand new CSS parser in Rust used to implement the styled-jsx transform.

With the increased popularity of Rust and Go-based JS tooling, could there be a future where we don’t use any JavaScript to build our JavaScript apps? 🤔

Oleksii Trekhleb trekhleb.dev

Content-aware image resizing in JavaScript

There are many great articles written about the Seam Carving algorithm already, but I couldn’t resist the temptation to explore this elegant, powerful, and yet simple algorithm on my own, and to write about my personal experience with it. Another point that drew my attention (as a creator of javascript-algorithms repo) was the fact that Dynamic Programming (DP) approach might be smoothly applied to solve it. And, if you’re like me and still on your “learning algorithms” journey, this algorithmic solution may enrich your personal DP arsenal.

Zach Leatherman zachleat.com

Who pays for web frameworks?

Zach Leatherman has been considering sustainability models for Eleventy, so he surveyed the field to see what everyone else in the web framework ecosystem are doing. Check out his post for the raw data and his analysis. Here’s where he stands as of today:

I don’t have the answers. I definitely wouldn’t agree that Eleventy has figured out our sustainable monetization strategy but I do really admire the success that Vue has had solving this exact problem. I do know that I have no interest in Trend 2 (raise investment money) but I’ll continue to keep a keen eye on what other indie-framework folks are doing.

JavaScript bryanbraun.com

I keep making things out of checkboxes

Bryan Braughn has been making good use of his Checkboxland library (which makes it easy to display text and animations on a grid of checkboxes). He’s made games, image transfers, and even videos like the one below. But then, some introspection:

This whole process has been fun but I really ought to stop.

I got nerd sniped, hard. Sure it’s harmless fun, but I’m starting to feel guilty spending months tinkering on these things when I’ve got the tools and skills to put actually useful stuff into the world. I feel like Superman, using his powers to fry an egg.

I understand where he’s coming from, but I also believe experiments like Bryan’s are what make the web great and when they inspire someone else to build something, they are absolutely “actually useful stuff”. Don’t you?

I keep making things out of checkboxes

JavaScript github.com

A first-party, fully-local simulator for Cloudflare Workers

Local development of remote/cloud functions has been various levels of painful ever since the computing trend started its rise, so it makes a lot of sense why Cloudflare would invest in easing that pain. Now they get to say developing with Cloudflare Workers is:

  • 🎉 Fun: develop workers easily with detailed logging, file watching and pretty error pages supporting source maps.
  • 🔋 Full-featured: supports most Workers features, including KV, Durable Objects, WebSockets, modules and more.
  • Fully-local: test and develop Workers without an internet connection. Reload code on change quickly.

Aftab Alam aalam.in

Get up & running with Astro

This is part 1 of a 5-part series on learning Astro, a new-kid-on-the-block static site builder that’s capturing the hearts of web developers due to its Bring Your Own Framework (BYOF) approach and Zero Emitted JS (ZEJS?) by default.

Throughout this series, I’ll walk you, step-by-step, through building an Astro-based blog(codenamed: Astro-Ink). You’ll discover more of Astro, its benefits, and super-interesting constructs and patterns that Astro brings to the table.

jQuery github.com

Auto-generate vanilla JS alternatives for jQuery methods

Migrating off jQuery? So was Sachin Neravath:

Most of the projects use only 15% to 20% or less than 30% of the jquery methods And in most of the cases, I didn’t want to support all the edge cases or legacy browsers. The hardest part was finding the jQuery methods in the existing project and writing the alternative vanilla js methods without making much changes in the codebase. So I wrote this library which automatically finds jquery methods in any particular JavaScript file and generates readable, chainable vanilla js alternatives. This can also be useful if you want to generate your own utility methods similar to jQuery.

Cory Etzkorn notion.so

Notion's journey to Next.js

What Vercel has enabled teams to do with Next.js is next level, and it’s truly evident when you read stories like this one from Cory Etzkorn on Notion migrating their marketing site to Next.js.

We rebuilt our entire marketing site from scratch, choosing to go with a statically generated architecture over our former purely client-rendered approach. Two months and 109 React components later, we’ve now fully migrated to our framework of choice, Next.js, and couldn’t be happier with our decision. Here’s how we got there.

Notion's journey to Next.js

Ryan Dahl deno.com

Deno Deploy Beta 2

Big news from Deno today.

Today we are releasing Deploy Beta 2. This is the second in a series of beta releases that will be made over the coming months. Each release will add features and refine the programming model. The releases will culminate in a General Availability announcement that we estimate will happen in Q4 2021.

Over the past eight months, we have been quietly designing this hosted service to supplement workflows with the open source Deno CLI. Deploy does not run on AWS Lambda nor does it use Cloudflare Workers; this is a new system with a unique design. We encourage people to look past the rough initial UI and explore this new JavaScript runtime.

What’s next: A general availability (GA) release is expected Q4 2021.

JavaScript web.dev

URLPattern brings routing to the web platform

Routing might be implemented in a number of ways: it’s sometimes code running on a server that maps a path to files on disk, or logic in a single-page app that waits for changes to the current location and creates a corresponding piece of DOM to display.

Buggy routing (and breaking your browser’s Back button) has been the achilles heel of SPAs since forver. Hopefully better tooling like this URLPattern proposal will help developers better handle the need.

I like what I see from the linked write-up. The feature is disabled by default in every major browser, but there’s a polyfill you can use in the meantime.

JavaScript zjy.cloud

A simple way to build collaborative web apps

This is an excellent post that takes you along on the author’s journey to build a simple, collaborative (desktop-like interactions and realtime collaborations, such as Notion, Discord, Figma, etc.) todo app:

With the help of many great tools, we’ve successfully built a fast, collaborative todo app. More importantly, we’ve worked out a reasonably simple approach to building similar web apps. As the user base and feature set grow, this approach shall scale well in both performance and complexity.

Both the resulting frontend and backend code are open source and you’ll likely learn about some new tools (like Replicache) along the way.

0:00 / 0:00