Screenity is a Chrome extension that will help you level up your screen recording/sharing game. How does it compare with other offerings in this category? Here’s a google sheet with the feature breakdown.

Nick, and Kball are joined by Mike Hartington to talk about Ionic, the state of web components, developer tooling, and more!

What the what is DivOps?! That’s the question Jonathan Creamer is here to answer. In so doing, we cover the past, present, and future of frontend tooling.

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.

Frontend Feud returns! Emma heads up team Boooooleans 👻 and Nick captains the Whiteboard Interviews Millionaires. We played this game for our friends at HalfStack Conf and the full video of the session is on our YouTube channel too. Take the survey!

The article explains how you can use the new Shape Detection and Text Detection APIs to detect faces, barcodes, QR codes, and text on images. Sample code and working demo are available, too.

Timelines are hard to get right and React-Chrono looks really well done. It has 3 modes (vertical, horizontal, and vertical alternating where cards alternate between left and right side of timeline), lets you include images & videos, and is highly customizable.

Typically, people say that testing is like a pyramid. A wide base of unit tests and very few end-to-end tests. I believe we’ve come to a point where a crab strategy is a better approach.

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

We take up a listener request this week and have an honest conversation about jQuery. Then, it’s time for something new! Our friends at Hot New Tech review tone.js for us. After that, it’s Pro Tip Time!

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

I am a huge proponent of a couple of specific ideas. One is that you should always try to understand what problems a specific tool is trying to solve… And another is that you need to understand exactly what problems you are trying to solve in your own application right now, and pick the tools that solve your problem best.

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.

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)