ISSUE #196

Front-end tooling survey, top-level await, and more


TOP STORIES

The Front-End Tooling Survey 2019

It's been a little while coming, but the results from the 2019 Front-End Tooling Survey are now here!

⭐ TypeScript In Under 2 Hours

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. While it is still in progress, you can order it now with 67% discount using this link.

MODERN JAVASCRIPT

Top-level await · V8

Top-level await enables developers to use the await keyword outside of async functions. It acts like a big async function causing other modules who import them to wait before they start evaluating their body.

New Stable Sort Array in Javascript: ES10/2019 - Buginit

In this article, we will learn the new functionality of sort array in JavaScript with examples and will know about its stability and support.

FUNCTIONAL

Pure functions, immutability and other software superpowers | Simon Schwartz

Pure functions are without a doubt the most important technique for writing software that I have learnt thus far in my career. This is because they help us simplify our code and make the effects of our code much more predictable.

Map, Filter and Reduce – Animated

The animations might look a bit weird. But I was limited to the Tetris grid I created (in my previous how to make Tetris tutorial.) Check it out too. We often commit complex ideas to memory by…

TYPESCRIPT

Nullish Coalescing vs. Short-circuit vs. Default Params

The "Nullish Coalescing" (which is still in stage 3 by the way) has made its way into the latest TypeScript release, so I thought that might be a perfect time to finally have a closer look at what is this and how does it compare to other options.

OmitTypes

One frequent annoyance that comes up in Typescript is redundant null checks. Take the following interface, which describes a standard JSONAPI resource...

(Book) Effective TypeScript: 62 Specific Ways to Improve Your TypeScript 1st Edition

TypeScript is a typed superset of JavaScript with the potential to solve many of the headaches for which JavaScript is famous. But TypeScript has a learning curve of its own, and understanding how to use it effectively can take time. This book guides you through 62 specific ways to improve your use of TypeScript.

TypeScript 3.7 Utility Types — Printable PDF Cheat Sheet | Else Web Development

I am of the opinion that a nicely formatted and printed cheat sheet is a fantastic aid to learning, so here is one I made for all the TypeScript 3.7 utility types.

Taming Dynamic Data in TypeScript

Fully utilizing static types, with all the safety they provide, can be a bit tricky when dealing with dynamic data — like JSON from an API call. Let's look at how to do this in TypeScript.

REACT

Dan Abramov on Twitter: "🌀 Why Suspense matters, a short thread"

A whole twitter thread where Dan explains the React suspese.

Build your own React

We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the…

How I reduced the code in my Redux app by using Redux Hooks. | Sunil Sandhu

You can reduce the amount of boilerplate code in your React Redux app by making use of useSelector and useDispatch, two new Redux Hooks that eliminate the need to use connect() bindings.

Redux Toolkit · The official, opinionated, batteries-included toolset for efficient Redux development

The official, opinionated, batteries-included toolset for efficient Redux development

How Concurrent React changes the game for data-heavy UI 🕰️ | Topher Winward

The key advantage of this is it allows components to say “Hey, I’m not actually ready to be rendered yet, can you give me a few seconds?” At this point, the React renderer can decide to put off displaying new UI entirely, leaving the page as is, or show some fallback UI. This is particularly useful when clicking a link to change to a page that has heavy data requirements.

react-interactive-paycard

Inspired from a vue project vue-interactive-paycard, I decided to recreate the same on React as a part time fun project. I did some minor changes on the animations and optimizations on the code.

Microsoft looks to React Native as a way to tackle the cross-platform development puzzle • The Register

Windows and Office teams shun Xamarin in favour of JavaScript/C++ solution

BUILDING THINGS

Implementing Stack Mechanics (16-Bit VM in JavaScript 004) - YouTube

In this episode, we create an implementation for the stack mechanisms that were described in the last episode. If you have seen that, you can find it at http...

react-ssd1306/tutorial.md at master · doodlewind/react-ssd1306 · GitHub

📟 A React Renderer for SSD1306 OLED chip on Raspberry Pi. - doodlewind/react-ssd1306

The most simple Contentful + React tutorial using a NextJS application | Andréas Hanss

A very simple JAM Stack how-to tutorial to use Contentful and React without having to master +1000 tools as prerequisite.

OPINIONS

Micro Frontend Architecture: Replacing a Monolith from the Inside Out | Zack Jackson

How to modernize a legacy application with micro-frontend technology

How to avoid try/catch statements nesting/chaining in JavaScript ? | Andréas Hanss

Handle Javascript errors easy without the tears and the headache. Make your code looks sweet and efficient.

USEFUL LIBRARIES

SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes

A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes

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.