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.

Ben Ilegbodu joins Divya, Suz, & Amal to talk about introducing TypeScript at Stitch Fix, why TypeScript and React work well together, building component libraries, and more.

Trends come and go and sometimes we forget to look at the value of tools for what they are. In an exploration of how to write React in a way that felt more pleasant, I rediscovered an old front-end tool, and thought it was worth sharing it.

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.

Gleb Bahmutov, PhD joins the show for a fun conversation around end-to-end testing. We get the skinny on Cypress, find out how it’s structured as both an open source library and a SaaS business, tease apart the various types of tests you may (or may not) want to have, and share a lot of laughs along the way.

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

Our much anticipated Family Feud rip-off inspired game show is finally here! Emma was joined by Nick and special guest Abenezer Abebe to form the Hypertext Assassins. KBall captained (despite never seeing Family Feud before) the DSL Destroyers with Mikeal and special guest Ali Spittel.

Holler if you want MOAR Feud and check the outro for a chance to win some JS Party swag.

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.

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.

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.

Redux maintainer Mark Erikson joins Jerod and Amal for an in-depth conversation around the React community’s fav state management solution. We learn how Mark came to be maintainer of Redux, why and how Redux Toolkit came about, when to go with Redux vs other options, and much more.

ALSO: prop drilling, the grep factor, & lasagna mode (oh my)

Emily Xie:

Urban legend says that Mona Lisa’s eyes will follow you as you move around the room. This is known as the “Mona Lisa effect.” For fun, I recently programmed an interactive digital portrait that brings this phenomenon to life through your browser and webcam.

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 });

Justin Searls from Test Double joins the party to talk about patterns he’s identified that lead to failure, minimalism, and of course, testing!

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.

Rick Nolan:

Evan You is an independent software developer and the creator of the open source JavaScript framework Vue.js. We had a chance to speak to Evan about the release of Vue 3, his opinion on no-backend & fullstack approaches, Vue.js use cases and the work-life balance of the creator of the technology.

The panelists discuss their thoughts on career progression while sharing some of their own history. They also talk about important considerations to think about when deciding where to go next, and share useful resources.

Mat Ryer makes the case for passive user preferences, which is where you store their last used setting for them without asking and then set it as the default the next time they interact with that part of your app. He then goes on to describe how they accomplish this with Svelte. Good stuff!

If you want to hear more about how they’re using Svelte and Go to build Pace, we did a pair of podcasts on the topic earlier this year.

Ahmad Nassri returns to the party for a deep, nuanced discussion around the thoughts he shared in a recent blog post called Solving Solved Problems. We hear about the common issue Ahmad’s seen at software shops of all sizes, learn the anatomy of the total cost of software ownership, and debate what to build and what to buy.

Psst… You’ve found it. This is the JavaScript meetup for 🥼 mad science, 🧙‍♂️ hacking, and 🧪 experiments. Hang out virtually on Friday at 4pm Pacific Time each week.

Many of these “vs” style articles are too shallow or narrowly-focused to be of much use. Not this one. It even has a table of contents. Dive in deep for the full analysis or jump straight to the end for the if/then framework selection advice.

Yes, it’s that time once again… Time for yet another front-end JS library!

Since Moon is so simple at its core, where it creates an abstraction to allow drivers to handle input and output, it only weighs 2kb minified and gzipped. On top of that, it is specifically optimized for JavaScript engines to perform fast virtual DOM diffing and DOM operations.

Often times “simple” is a proxy for “only solves my immediate use-case, but I will continue to link up JS solutions that bring good ideas to the table, and pure functions are a good idea for many reasons.

Built on WebRTC and Node.js. No downloads, no signups, just share a URL and you’re good to go.

Group video call is achieved using WebRTC mesh. So the quality of the call is inversely proportional to the number of people on the call. The sweet number is somewhere around 6 to 8 people in an average high-speed connection.

We kick off with some exciting TypeScript news, follow that with some exciting JavaScript news, then finish off with an exciting interview. Key word: EXCITING

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.