In this post, I will show you some advanced usage patterns for working with Playwright in order to take a screenshot of a specific element and modify the contents of the image, either before taking the screenshot or after, using image preprocessing tools.

KBall and Chris dive into the current JavaScript trends towards smaller frameworks, compiled JavaScript, and why Chris believes “this time is different” with regards to developers caring about network speed and reducing JS sent over the wire.

It’s our 4th annual New Year’s party! Jerod & the gang review our (failed) resolutions from last year, discuss what’s trending in the web world, make a few predictions of our own & even set some new (probably failed) resolutions for this year.

Sometimes all a project needs is the ability to read/write small amounts of JSON data and have it saved in some persistent storage. Imagine a simple data-model which receives infrequent updates and could be represented as JSON object. It doesn’t demand a full-blown database, but it would be neat to have a way to interact with this data and have it persist across sessions.

This is where gist-database comes in handy, by leveraging the power of the gist api you can easily create a key/value data-store for your project.

This is a perfect solution for low write / high read scenarios when serving static site content with Next.js and using Incremental Static Regeneration to keep your cached content fresh.

Deno creator Ryan Dahl goes one-on-one with Jerod to discuss their new npm support, why he’s so excited about JavaScript containers, Deno Deploy’s present & future, what he thinks about alternative runtimes like Bun, WinterCG, how Wasm fits into the story & more!

Thomas Steiner (Web Developer Advocate at Google) joins Amal & Nick to talk about Project Fugu – an effort to close gaps in the web’s capabilities enabling new classes of applications to run on the web.

This looks like an interesting framework for everything error-related. The core handles the usual tasks (wrapping errors, creating classes, etc.) and plugins offer more advanced use cases (serialization, CLI errors, logging, etc.).

If you’ve ever had to split a string into sentences, you may have reached for a naive regular expression:

'Hello! How are you?'.split(/[.!?]/);

Instead of giving yourself two problems, Stefan Judis says maybe reach for Intl.Segmenter, which he shows is quite sophisticated and supported everywhere but Firefox.

Debbie O’Brien –Senior Program Manager at Microsoft– joins Amal & Nick for a deep-dive on Playwright, an automation library for cross-browser end-to-end testing. Along the way, we learn why Microsoft decided to fork Puppeteer, Playwright’s unique value proposition, cool features like auto-waiting & the trace viewer, how it compares to Cypress & a lot more.

If you don’t have time to fill out the entire survey… at least skip down to the “Resources” ~> “Podcasts” section and help someone dethrone those rascals over at Syntax. I think it might be JS Party’s time, y’all…

KBall and Boneskull dive deep with Paloma Oliveira on the cultural and social consequences of open source software, explore her background in arts and government-supported open source, and discuss practical approaches to change the culture of open source towards more sustainability.

For web automation/testing, Selenium has been the de facto “standard” since forever. It’s simple to get started with and supports almost every programming language.
My problem with it has been: It’s good enough, but nothing more. It doesn’t work that well with modern, Javascript framework heavy sites (Angular, React etc). I’m not saying it doesn’t work– just not too well.

I know a lot of people who use Selenium, but I don’t know a lot of people who enjoy using Selenium. (That’s no knock on the Selenium team. They solved a hard problem for lots of devs over the course of many years. Huge impact!) Playwright on the other hand…

Maggie Johnson-Pint from Stanza sits down with Amal & Divya for a deep-dive in to the production side of the development world. If you’re at all curious (and/or intimidated) by terms like Site Reliability Engineering (SRE), Service Level Objective (SLO), OpenTelemetry, distributed tracing, and the like… this episode’s for you!

Vercel dropped Next.js 13 last week and there’s a lot of new stuff (router, server components, streaming & more) in this release. If you learn best by example (and subsequent tinkering with existing things), this (WIP) repo might be a good starting place for you.

If you’re feeling the FOMO of JavaScript or you’re writing “spaghetti code” just to do something a NextJS component would do out of the box, then read this post from Bill Prin on why he moved from Django to NextJS.

The summary is that using a language like Python or Ruby for a significant web project has increasingly gotten less reasonable over time to the point where now, in 2022, it’s getting hard to justify. By not keeping your web stack in pure Javascript, you are making your life unnecessarily difficult (as usual, we’ll include languages like TypeScript as part of the JavaScript ecosystem). You will almost certainly invest a bunch of time-solving problems that would be automatically solved for you if you just stuck with JavaScript.

I will provide specific examples of solving problems using Django that would have been trivially solved in NextJS.

He goes on to share two reasons why you should use Python or Ruby for web projects in 2022.

You’re working on an existing project that hasn’t been migrated yet or is not worth migrating.
You are already a master of a Python or Ruby web stack, and you need to implement a new project as soon as possible, and you don’t have time to learn a better stack.

Suppose you learn some functional JavaScript, and it’s wonderful. But, for some reason, your team doesn’t get it? What do you do? To understand what’s going on, we need to step back and get a little perspective…

Webpack creator Tobias Koppers announcing its (Vercel-funded) successor:

Turbopack is built on a new incremental architecture for the fastest possible development experience. On large applications, it shows updates 10x faster than Vite and 700x faster than Webpack. On even larger applications, the difference is greater—often 20x faster than Vite.

Turbopack is open source and still in alpha. Here’s what the future may hold:

To start, Turbopack will be used for the Next.js 13 development server. It will power lightning-fast HMR, and it will support React Server Components natively, as well as TypeScript, JSX, CSS, and more.

Turbopack will eventually also power Next.js production builds, both locally and in the cloud. We’ll be able to share Turbo’s cache across your entire team, using Vercel Remote Caching.

Webpack users can also expect an incremental migration path into the Rust-based future with Turbopack.

What do Story of the Week, HeadLIES & Pro Tip Time have in common? They’re all games we play on this seriously ridiculous episode of JS Party!

Docusaurus maintainer Sébastien Lorber joins Jerod & Amal for a deep-dive on everybody’s favorite documentation generator. It’s back with a big 2.0 release, boasts some big users, and has a big set of new features such as document versioning, a plugin architecture, and more.

This looks like top notch work:

Get more than 20 components with beautiful defaults and simple props. From charts to input and layout elements, we covered all the essential components to lift the tedious front-end work from your shoulders. Get ahead with our simple API approach in no time.

Check out their demo dashboard right here.

This week we’re talking fresh, faster, and new web frameworks by way of JS Party. Yes, today’s show is a web framework sampler because a new batch of web frameworks have emerged. There’s always something new happening in the front-end world and JS Party does an amazing job of keeping us up to date. So…what’s fresh, faster, and new?

The first segment of the show focuses on Deno’s Fresh new web framework. Luca Casonato joins Jerod & Feross to talk about Fresh – a next generation web framework, built for speed, reliability, and simplicity.

In segment two, AngularJS creator Miško Hevery joins Jerod and KBall to talk about Qwik. He says Qwik is a fundamental rethinking of how a web application should work. And he’s attempting to convince Jerod & KBall that the implications of that are BIG.

In the last segment, Amal talks with Fred Schott about Astro 1.0. They go deep on how Astro is built to pull content from anywhere and serve it fast with their next-gen island architecture.

Plus there’s an 8 minute bonus for our ++ subscribers (changelog.com/++). Fred Schott explains Astro Islands and how Astro extracts your UI into smaller, isolated components on the page, and the unused JavaScript gets replaced with lightweight HTML — leading to faster loads and time-to-interactive.

Hang with Jerod, Nick & KBall while we discuss what’s new & noteworthy in the web world. Cloudflare Turnstile, Linkify 4.0, TC39 updates, the Figma acquisition, Penpot, pay transparency, and more! We might even discuss TypeScript if Nick gets his way…

1. run npm install -g easy-sharing
2. run sharing /directory-or-file-to-share
3. scan the QR code with your phone

Tobias Bieniek:

Have you ever worked with JavaScript? Have you been annoyed by the three hundred copies of left-pad in all of the node_modules folders on your disk? Would you prefer if all of your projects shared their node_modules folders instead of each getting their own copy?

The single character that saved him all that space? The p in pnpm…

Patformatic co-founders Matteo Collina & Luca Maraschi join Amal & Chris to discuss their just-announced (and we mean just announced) open source database tool: Platformatic DB!

It’s a daemon that can turn any PostgreSQL, MySQL, MariaDB, or SQLite database into a REST and GraphQL endpoint. What makes it special is that it allows massive customization thanks to the flexibility of Fastify plugins.