NaNNaNNaNNaN Batman

#​573 — January 21, 2022

Unsubscribe  |  Read on the Web

⁉️ If the subject of this issue has got you confused, it's a reference to the infamous Wat video of 2012 which we mention a couple of times in the issue today :-)
__
Peter Cooper, your editor

JavaScript Weekly

TypeScript Features to Avoid?— Remember Gary Bernardt’s Wat video from ten years ago? He created the Execute Program dev education platform and now reflects on four things in TypeScript to either give a wide berth or at least seriously think about: enums, namespaces, decorators, and private. Opinionated - naturally!

Execute Program

Deeply Copying Objects with structuredClone()— Dr. Axel looks at the new kid on the block when it comes to copying JavaScript objects: structuredClone. Supported in cutting edge versions of most browsers and in Node.js and Deno, it’s time to be aware of this.

Dr. Axel Rauschmayer

New Course on State Machines with XState by David Khourshid— If you build large JavaScript apps and want to stop running into weird edge cases, you'll want to learn state machines. Spend your time modeling app logic clearly and robustly.

Frontend Masters sponsor

A JavaScript-Flavored Introduction to Monads— “I know a lot of people roll their eyes” says Kyle about yet another monad explainer, but.. if you liked Kyle’s work with You Don’t Know JS or you want something JavaScript oriented and with concrete takeaways for your own code, this is for you.

Kyle Simpson

Remix vs Next.js— Remix is the new kid on the JavaScript full-stack framework block so naturally it gets compared to other things like Next.js (and even Ruby on Rails). This comparison comes from the Remix team themselves but is well written and tries to be fair.

Ryan Florence

Deno 1.18 Released: The (Other) Modern JS/TS Runtime— Deno continues stepping forward. 1.18 boasts the culmination of a big effort to fully implement the Web Cryptography API, upgrades V8 to version 9.8, improves startup time, and more.

Deno Blog

IN BRIEF:

• Vue 3 is to become the new 'default' version of Vue.js as of February 7.

• The ▶️ Wat video poking fun at JavaScript's dynamically typed ways came out 10 years ago – and it still raises a chuckle.

• 📗 Classic computer science book Structure and Implementation of Computer Programs (a.k.a. SICP) has always used the Lisp dialect of Scheme but a JavaScript edition is out in April and can now be preordered.

• Interested in headless content management? This Dot Media are running a live 'State of the Web' on headless CMSes next Tuesday (25th).

RELEASES:

ESLint 8.7— Quality control for your JavaScript.
zx 4.3.0— Niceties for shell scripting with Node.js.
react-markdown 8.0— Markdown rendering component for React.
Capacitor 3.4— Cross platform native app framework.
Axios 0.25.0– Long standing HTTP client library.
better-sqlite3 7.5– Node.js SQLite library. Now supports strict tables.

📒 Articles & Tutorials

Replacing jQuery with Umbrella JS— A little case study of sorts here, looking at replacing once dominant jQuery with the notably smaller Umbrella JS— which has a similar API and plugin system but may help you break the ties.

Ben Nadel

On Grouping Arrays with .groupBy() and .groupByToMap()— A helpful proposal to be aware of (and, perhaps, support) but it’s still going through the TC39 process.

Dr. Axel Rauschmayer

Colors NPM: What Happened? Offending Commit Adds an Infinite Loop— Are you leveraging the widely popular npm package colors? Take these countermeasures today to avoid a DOS vuln.

Snyk sponsor

From ES6 to Scala: The Basics— If you want to give Scala.js a go as an alternative to JavaScript for some frontend work, knowing some Scala would certainly help...

Scala.js Team

The Optional Chaining Operator, “Modern” Browsers, and My Mom— Some unsupported JavaScript syntax caused an entire website to fail on two seperate hardware devices. A story of device obsolescence, accessibility, and progressive enhancement.

Jim Nielsen

Good Advice on JSX Conditionals— “Time after time I shoot myself in the foot with JSX conditionals. In this article, I look at the trickier corners of JSX conditionals, and share some tips for staying safe”.

Vladimir Klepov

Add Less— As developers, we frequently add tools and libraries to projects, but it can often lead to overloading an app with more than it really needs. So: add less, says Cassidy.

Cassidy Williams

Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API

Stream sponsor

How to Extract Secrets from an Electron App— The point is it’s so simple that you really shouldn’t be leaving such secrets in there anyway.

Kamil Staszewski

Embedding JavaScript Snippets in C++ with Emscripten
Ingvar Stepanyan

Multiline Mode (/m) in JavaScript Regular Expressions
Stefan Judis

🛠 Code & Tools

TinyBase: A Library for Structuring App State— If you want a bit more database-esque structure around the management of state in your apps, this is worth a look. The demos are notable for how well explained they are so do check those out. GitHub repo.

James Pearce

Sharer.js 0.5: Lightweight Social Sharing Components for 20+ Platforms— No dependencies too. We last linked this six years ago, so it’s about time, especially as it’s still being updated 😄

Ellison Leao

Studio 3T Manages Your Data, While You Wrestle Your App into Shape— Studio 3T's full suite of MongoDB tools lets you develop with data even faster and turn queries into code.

Studio 3T sponsor

Vanilla List: A Directory of Vanilla JavaScript Plugins— "Because lighter plugins mean lighter sites." Note that the plugins themselves may have dependencies, just not stuff like jQuery, React, etc.

Glitch.Family

mo.js 1.3: A Motion Graphics Toolbelt for the Web— Use a declarative API to get full control over animations. Check the getting started tutorial to see how it works from a code POV.

Oleg Solomka, Xavier Foucrier, Jonas Sandstedt

Rockpack 2.0: An Alternative React App Builder— Like Create React App the goal is to get project setup time as low as possible, but Rockpack holds some different opinions around how far to take things and packs in a lot of ideas including, now, server side rendering.

Alex Sergey

vue-easytable: A Flexible Table/Data Grid Component for Vue.js 2.x— This is one of those times where the demo will sell it to you or not.

happy coding clans

React Calendar 3.6: The 'Ultimate' Calendar for Your React App— A popular, simple-styled calendar component for React apps, focused mostly on letting users pick dates. GitHub repo.

Wojciech Maj

rasterizeHTML.js: Render HTML Onto an HTML Canvas
Christoph Burgmer