ISSUE #198

Destructoring, Generics in TypeScript, and more


TOP STORIES

If you care about user privacy, do NOT use Facebook JS SDK

Social Login buttons like the ubiquitous Login with Facebook/Google/Twitter/... button is convenient for users as they don't have to go through a lengthy registration process and create yet another username/password. And without a proper password manager (which probably 99% users don't use), they tend to reuse the same password which is bad in terms of security!

MODERN JAVASCRIPT

Destructuring in JavaScript

Destructuring assignment is one of the most flexible, simplest feature in modern JavaScript. It's a JavaScript expression that makes it possible to unpack values from Arrays, properties from Objects, or even Function params, into distinct variables.

An Approach to JavaScript Object Schema Migration | TypeOfNaN

Recently, I found myself in a position where an application was heavily reliant on a state object. This is fairly typical for single page applications (SPAs) and can pose a challenge when your state object’s schema changes significantly and you have users that have data saved under an old schema.

Video / Promises From Scratch In A Post-Apocalyptic Future

In this installment of Low Level JavaScript we build a Promise implementation from scratch in order to understand exactly how asynchronous abstractions can be built on top of lower level primitives like callbacks.

TYPESCRIPT

⭐ TypeScript In 1 Hour: A Video Intro

I've started a new video course to help you with that. We'll walk through some very basics of types to advance topics. We'll see how to migrate an existing project to TypeScript, and finally, learn to configure Visual Code and Vim for a comfortable and productive workflow. Get a 66% discount with this link.

TypeScript Generics for People Who Gave Up on Understanding Generics

Like TypeScript, the Java programming language supports generics. When I was studying Java in college, I was a beginner programmer, and generics felt very difficult to me. So I gave up on understanding generics at the time and used them without knowing what I was doing. I didn’t understand generics until I got a full time job after college.

FEATURES

For the Sake of Your Event Listeners, Use Web Workers

I’ve been tinkering with the Web Worker API lately, and as a result, I’m really feeling the guilt of not looking into this well-supported tool a lot sooner. Modern web applications are seriously upping demands on the browser’s main thread, impacting performance and the ability to deliver smooth user experiences. This tool is just one way to address the challenge.

How to Approach State Management in React, Vue and Angular | Matthew Tyson

How to deal with state in Angular, Vue and React. The same principles apply to all of them. UI Architecture. JavaScript.

REACT

Why you should choose useState instead of useReducer | Austin Malerba

Since the introduction of the React Hooks API, I’ve seen a lot of discussion about useState, useReducer, and when to use one over the other. From these conversations, one would conclude that useState is best suited for simple state with simple update logic and that useReducer is best for complex state shapes with complex update logic.

How Discord achieves native iOS performance with React Native | Miguel Gaeta

Early on at Discord, we adopted React Native as soon as it was open sourced to build our iOS app from the core of our React app. Years later, we are still happy with that decision. Our iOS app currently sees many millions of monthly active users, is 99.9% crash free, and holds a 4.8 star rating on the app store. React Native has been instrumental in allowing us to achieve this with a team of only three core iOS engineers!

BUILDING

Video / Finally Building the Frontend... | React/Node PWA Manga Reader

Get a A$100,000/year job as a web developer! https://codebetter.com.au

VUE.JS

Building animated draggable interfaces with Vue.js and Tailwind | BinarCode

The frontend landscape changed quite a lot in the last years (hopefully for the better). Now there are tools and technologies that help us achieve great results pretty quickly and efficiently.

OPINION

JavaScript doesn’t need to be replaced

Every now and then someone will argue that JavaScript needs to be replaced by some other language. The reasons for this are always that JavaScript has too many quirks that should have been fixed a long time ago.

MISC

Scaling SVG Elements | Amelia Wattenberger

Scaling s can be a daunting task, since they act very differently than normal images. Instead of thinking of s as images, let's change our mindset:

Static Generation / SSG Improvements · Issue #9524 · zeit/next.js · GitHub

Allow Next.js to become fully hybrid by providing methods to do both static generation and server-side rendering on a per-page basis.

Bangle.js - Open Source creating opportunities for Open Health wearables with JS & TensorFlow

If you’re new to Bangle.js and its recent launch at NodeConf EU by NearForm Research and Espruino, you can read the announcement that we published here.

How to successfully manage a large scale JavaScript monorepo aka megarepo

There are many tools already in the wild for managing a monorepo. This post will discuss using Bolt to manage a monorepo aka megarepo.

30 Tips & Tricks with the Firefox Developer Tools - Alex Lakatos - Medium | Alex Lakatos

I’ve curated a series of productivity tips and tricks that help me debug web applications with the Firefox Developer Tools. You can filter the CSS rules in the Styles view of the Inspector by any…

Manipulating AST with JavaScript | Tan Li Hau

Manipulating AST is not that hard anyway

LEARN FROM CODE

GitHub - btzr-io/Villain: An open source web-based comic book reader.

An open source web-based comic book reader. Contribute to btzr-io/Villain development by creating an account on GitHub.

GitHub - KilledByAPixel/JSONCrush: Compress JSON into URL friendly strings

Compress JSON into URL friendly strings. Contribute to KilledByAPixel/JSONCrush development by creating an account on GitHub.

GitHub - ronilan/blocklike-legra: Fun little lego "drawing" app built using BlocklLike.js and Legra.js

Previously, I’ve talked about how to write a babel transformation, and I went one step deeper into Babel, by showing how you can create a custom JavaScript syntax, I demonstrated how Babel parses your code into AST, transforms it and generates back into code.

Weekend JavaScript

Hey! I'm Ianis. And this is a curated list of JavaScript news and articles (sending every Friday). No spam. Just fresh write-ups on the language features, frameworks, testing practices and beyond.
1109 already subscribed.