Joe joskid

What is new in the ES2021 edition of “JavaScript for impatient programmers”?

Free to read online: exploringjs.com/impatient-js/

The exercises now run as native ESM modules on Node.js. Previously, they were run via the esm package.
Material on new ES2021 features:
- String.prototype.replaceAll()
- Promise.any()
- Logical assignment operators
Underscores (_) as separators in number literals and bigint literals

	<template>
	<div class="ui cards" style="margin: 10px">
	<div class="ui icon input" style="width: 100%">
	<input type="text" placeholder="Search..." v-model="searchQuery" />
	<i class="search icon"></i>
	</div>
	<div
	class="card ui fluid"
	v-for="product in searchedProducts"
	:key="product.id"

	/*
	Google Drive API:
	Demonstration to:
	1. upload
	2. delete
	3. create public URL of a file.

	required npm package: googleapis
	*/
	const { google } = require('googleapis');

	import pytesseract
	import os
	import sys


	def read_image(img_path, lang='eng'):
	"""
	Performs OCR on a single image

	:img_path: str, path to the image file

	import React, { useRef, useState } from 'react';
	import { DndProvider, useDrag, useDrop } from "react-dnd";
	import { HTML5Backend } from "react-dnd-html5-backend";
	import { TouchBackend } from "react-dnd-touch-backend";
	import './assets/styles/App.css';
	import { COLUMN_NAMES } from "./constants";
	import { tasks } from "./tasks";

	const MovableItem = ({name, index, moveCardHandler, setItems}) => {
	const changeItemColumn = (currentItem, columnName) => {

	{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	// "Print to console": {
	// "prefix": "log",
	// "body": [
	// "console.log('$1');",

	import React from "react";
	import { Router, Route } from "react-router-dom";
	import { createBrowserHistory } from "history";
	import GreetingCat from "./GreetingCat";
	import RandomCat from "./RandomCat";
	import "./App.css";

	const defaultHistory = createBrowserHistory();

	function App({ history = defaultHistory }) {

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	html {
	font-size: 20px;
	font-weight: 300;