Issue 5  July 14th 2023

Zdog - Round, flat, designer-friendly pseudo-3D engine for canvas and SVG

Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes.

Driver.js - Product tours, highlights, contextual help and more

A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page.

React95 - a React components library with Win95 UI

React95 is a component library inspired on the Windows 95 UI design.

Origins of JSX and Why It Exists

JSX is not a mix of HTML and JavaScript. It's just plain JavaScript with some clever syntax tricks that make it easier to represent HTML. It's similar to how Sass brings a lot of productive features but always boils down to regular CSS.

You're going to see how JSX came to be by understanding the problem it solves and by building your very own JSX interpreter.

party.js

A JavaScript library to brighten up your user's site experience with visual effects.

Have you ever seen the confetti effect when you register for something? This will do that.

[Part 1] React as a part of an Ember app: how we modernized October’s front-end

At October, we have been using Ember since the beginning. Almost 8 years. The reasons behind this choice are multiple (experience of the initial front-end team, an opinionated framework to start from the ground up, popularity at the time, …) and they were all valid at the time. And for as long as I’ve been working here, we have been very happy with how it allowed us to develop our app while keeping a stable and consistent codebase with a growing team of front-end developers, now 10+ people.

But about 3 years ago, October decided to invest even more in its technology, as a shift in strategy included selling its proprietary tech in a SaaS fashion via October Connect. One of the crucial parts of this plan was, you would have guessed it, to get the tech team to grow. A lot.

That led us to two big pain points with our front-end stack.

Firstly, Ember has steadily declined in popularity amongst developers over the last few years, as shown in studies like the State of JS. This was impeding recruitment, as developers would be less inclined to work for a company using what they feel is an outdated stack by today’s market standards.

This article is part 1 of a 3-parts series.

[Part 2] React as a part of an Ember app: how we modernized October’s front-end

In the first article, I have detailed the approach we chose at October for migrating our front-end framework, how we chose to go for React, and how we validated the technical feasibility.

This is great, but nonetheless, the biggest step was still ahead of us: actually implementing a production-ready way of making the two stacks work together and establishing a years-long action plan on how we will move our whole app towards React with the entire team.

If you’re reading this, it means that we managed to do it. This article will try to explain how.

This article is part 2 of a 3-parts series.

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) is a pending Core Web Vital metric that will replace First Input Delay (FID) in March 2024. INP assesses responsiveness using data from the Event Timing API. When an interaction causes a page to become unresponsive, that is a poor user experience. INP observes the latency of all interactions a user has made with the page, and reports a single value which all (or nearly all) interactions were below. A low INP means the page was consistently able to respond quickly to all—or the vast majority—of user interactions.

Regex Isn't Hard

Regex gets a bad reputation for being very complex. That’s fair, but I also think that if you focus on a certain core subset of regex, it’s not that hard. Most of the complexity comes from various “shortcuts” that are hard to remember. If you ignore those, the language itself is fairly small and portable across programming languages.

Here I’ll highlight a subset of the regex language that’s not hard to understand or remember. Throughout I’ll also tell you what to ignore. Most of these things are shortcuts that save a little verbosity at the expense of a lot of complexity. I’d rather verbosity than complexity, so I stick to this subset.

libav.js

This is a compilation of the libraries associated with handling audio and video in FFmpeg—libavformat, libavcodec, libavfilter, libavutil and libswresample—for WebAssembly and asm.js, and thus the web. It is compiled via emscripten. This compilation exposes the library interface of FFmpeg, not ffmpeg itself, and there is a separate project by a different author, ffmpeg.js, if what you need is ffmpeg.

In short, this is a pure JavaScript and WebAssembly system for low-level audio and video encoding, decoding, muxing, demuxing, and filtering.

react-tailwind-chrome-extension-template - Build your next Chrome Extension with React and Tailwind + Zero Setup!

So, you want to build modern web extensions with React & Tailwind? Step on in. This is the starting point for all my browser extensions, including Promptheus, which lets over 28,000 weekly users talk to ChatGPT with their voice.

Why do we need another extension boilerplate? Because v3 manifest! At time of writing, nothing out there comes as simple as this to working - If I can help just one person launch their extension then this project is a complete success in my eyes.

awesome-tiny-js - a collection of tiny JS libraries (under 2 kB) to put your bundle on a diet

Rules:

• Size is under 2 kB-ish, min + gzip, with all dependencies, except where noted.
• For multi-purpose libraries, the size of a useful subset must be under 2 kB-ish.
• Useful client-side. I haven't figured out participation rules for node-only libraries, and I'm not too worried about them.
• Second-level libraries only allowed for React, Vue, Angular, svelte.
• 100+ GitHub stars. Libraries with less are awesome, too, but stars indicate some community review.
• No zero-JS (CSS- or type-only) libraries. It's not awesome-css or something.

Infinite HTML canvas with zoom and pan

Simulate an infinite html canvas in typescript by using math to map the real coordinates to new virtual values. Implement zooming and panning effect by listening to touch events on mobile.

Make JavaScript Bookmarklets

A bookmarklet generator which is clean and easy to use. Create and test bookmarklets in your browser. Extend your browsing experience any way you see fit.