#494 — June 26, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Lessons Learned Refactoring Optional Chaining Into a Large Codebase — Lea Verou, creator of Mavo, decided to refactor Mavo to use optional chaining (?.) and here’s some of what she discovered along the way. (As an aside, Lea was the subject of a neat 10 minute programming documentary recently – worth a watch!)

Lea Verou

A Little Bit of Plain JavaScript Can Do A Lot — For anyone more than happy to dive in and write JavaScript without dragging in an entire framework and tooling to manage it, there will be no surprises here, but this is a nice reminder otherwise. Do you always need a 'framework'? No.

Julia Evans

Creating a Voting App with Firestore and Wijmo — Learn how to build a realtime voting app quickly and easily with the Firestore database and Wijmo components. The app uses OAuth for authentication and allows users to submit and vote for ideas.

Wijmo by GrapeCity sponsor

Angular 10 Released — A major release for the popular Google-led framework, though smaller in scope than usual as Angular 9 only came out in February ;-) 10 gains a new date range picker, optional stricter settings, and an upgrade to TypeScript 3.9.

Stephen Fluin (Google)

What's Coming in TypeScript 4? — The first beta of TypeScript 4 is due any moment with a final release due in August. New bits and pieces include variadic tuple types, labelled tuples, short-cut assignment operators (e.g. ||=) and more.

Tim Perry

⚡️ Quick bytes:

💻 Jobs

JavaScript Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📚 Tutorials, Opinions and Stories

ECMAScript Proposal: Private Static Methods and Accessors in Classes — Dr. Axel takes a look at another forthcoming language feature (in this case being at stage 3 and already supported by Babel and elsewhere).

Dr. Axel Rauschmayer

npm v7 Series: Why Keep package-lock.json? — If npm v7 is going to support yarn.lock files, then why keep package-lock.json around as well? Isaac goes into some depth as to how yarn.lock works and why it doesn’t quite suit every npm use case.

Isaac Z. Schlueter

How to Dynamically Get All CSS Custom Properties on a Page — Some fun DOM and stylesheet wrangling on display here.

Tyler Gaw

Stream Chat API & JavaScript SDK for Custom Chat Apps — Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

Getting Started with Oak for Building HTTP Services in Deno — A comprehensive Oak with Deno tutorial for beginners (which, I guess, we all are when it comes to Deno). Oak is essentially the most popular option for building HTTP-based apps in Deno right now.

Robin Wieruch

Understanding Generators in JavaScript — Generator functions can be paused and resumed and yield multiple values over time and were introduced in ES6/ES2015.

Tania Rascia

Build a CRUD App with Vue.js, Spring Boot, and Kotlin — It’s a fact of life that not everyone is building apps with JavaScript at every level of the stack. Sometimes.. people use Java too 🤫

Andrew Hughes

▶  Creating a Basic Implemention of 'Subway Surfers' — No modules, webpack or such-like here.. just exploring the joy of throwing a game mechanic together quickly using rough and ready JavaScript. Love it.

Shawn Beaton

Rubber Duck Debugging for JavaScript Developers — When you’re stuck with something, why not talk to a rubber duck?

Valeri Karpov

🔧 Code & Tools

Tabulator 4.7: An Interactive Table and Data Grid Library — Supports all major browsers and can be used with Angular, Vue, and React if you wish. 4.7 is a substantial release. Among other things is a new layout mode that resizes the table container to fit the data (example).

Oli Folkerd

Tragopan: A Minimal Dependency-Free Pan/Zoom LibraryTry it out here. Claims to work faster due to use of native browser scrolling for panning (left/right/up/down) and transform/scale for zooming.

team.video

Builds Run Faster on Buildkite 🏃‍♀️ — Build times <5 mins at any scale. Self-hosted agents work with all languages, source control tools & platforms.

Buildkite sponsor

React Query 2: Hooks for Fetching, Caching and Updating Async DataReact Query is well worth checking out and has extensive documentation and even its own devtools. Main repo.

Tanner Linsley

Rando.js: A Helper for Making Randomness Easier — The rando function lets you get random integers in a range, floats in a range, pick between multiple items, return a random element from an array, and more. There’s also randosequence for a more shuffle-like experience.

nastyox

jinabox.js: A Customizable Omnibox for AI Powered Searching — Designed to be used with a Jina back-end. It’s all open source, but will take some digging around to understand fully.

Jina AI

MongoDB Is Easy. Now Make It Powerful. Free Download for 30 Days.

Studio 3T sponsor

IntersectionObserver Visualizer — If you’re new to using the IntersectionObserver API, this useful interactive demo might help you comprehend it a little better.

michelle barker

Polly.js 5.0: Record, Replay, and Stub HTTP Interactions

Netflix

Vest: Effortless Validations Inspired by Testing Frameworks — If you’re used to unit testing, the syntax used here will be familiar.

Evyatar

👻 Scary Item of the Week

Checkboxland: Render 'Anything' as HTML Checkboxes — This frivolous experiment is equal parts terrifying and impressive. It’s a JS library that displays animations, text, and arbitrary data using nothing but HTML checkboxes and, to be fair, they’ve presented it really well!

Bryan Braun