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.

ISSUE #199

Weak Sets, Async-await, Promises, and many more topics


MODERN JAVASCRIPT

Off The Main Thread | Chris Coyier/

We all feel a symptom of that regularly in the form of performance jank and non-interactivity on elements or entire sites. If we give JavaScript lots of jobs and it gets really busy doing them, then it's not doing other things, like, say, handling our event handlers quickly.

WeakSets in Javascript | Yoel Macia

The weakSet object lets you store weakly held objects in a collection.

A brief look at async-await | Markus Karlsen

The async function declaration defines an asynchronous function, which returns an AsyncFunction object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result. But the syntax and structure of your code using async functions is much more like using standard synchronous functions.

The Promise of Christmas | Markus Karlsen

In this article we will look into promises in Javascript. The concept of a real life promise is simple, as may also be the case when we first start using promises. However, as we gain more experience with Javascript, it becomes important to really understand promises.

JavaScript Promises: 9 Questions | Dan Levy

Learn about promises & take the quiz!

PROMO

⭐ TypeScript In 1 Hour: A Video Intro

I've started a new video course recently to help people get started with TypeScript. It gets you through from the 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 for a comfortable and productive workflow. Get started here.

TYPESCRIPT

Modeling State with TypeScript | Peter Caisse

Managing state on the frontend can often be tricky. Beyond perennial issues around keeping the view and model in sync (which modern frameworks can help with greatly) our model can simply have the wrong state in it. However, using TypeScript, we can define our types in such a way as to make those bad states unrepresentable. Let’s look at an example.

Taking Types Too Far | Robbie Ostrow

I love Typescript, but it isn’t nearly ambitious enough. It would be vastly improved with an --extremelyStrict flag enforcing that your Typescript code is free of side-effects; that is – no Javascript code is generated at all. Real programmers do all of their computation within the type system. Otherwise, they can’t be sure their program will work in production and should be duly fired.

The Lens Pattern in TypeScript

In this blog post, we will take a look at a pattern that can help us update and extract data from large immutable data structures. As mentioned in a previous blog post, updating immutable data is done by creating an entirely new copy of the data structure with some part of the data with new values.

Typescript method overloading | Kevin Kreuzer

Method overloading is a familiar concept from traditional programming languages like Java or C#. It allows a class to have multiple methods with the same name if their signature is different. But…

JavaScript design patterns #2. Factories and their implementation in TypeScript

  1. JavaScript design patterns #1. Singleton and the Module2. JavaScript design patterns #2. Factories and their implementation in TypeScript3. JavaScript design patterns #3. The Facade pattern and applying it to React HooksAs discussed in the previous part of this series, there are many design patterns out there. Some of them fit well into the JavaScript […]

REACT

Get started with animations in React

Have you never been able to make that menu appear in the awesome way you've always wanted? Perhaps you've got lots of experience making things move with CSS animations, but you want to learn how (or if) a modern animations library could make your life easier? Or perhaps you just want to have fun and see how easy it is to animate elements in React using Framer Motion? Then read on! This article won't give you all the answers, but hopefully it will help you getting started.

My Software Engineer Salary History as a React Developer - Do You Earn More Than Me? - YouTube

A complete run down of every salary i've had as a React Developer. Nothing held back, just real numbers.

The Facade pattern and applying it to React Hooks

The essential thing when approaching design patterns is to utilize them in a way that improves our codebase. The above means that we sometimes can bend them to fit our needs. The Facade design pattern is commonly associated with object-oriented programming. That doesn’t change the fact that we can take its fundamentals and apply them to something else. In this article, we explore the Facade pattern both in a conventional setting and with React hooks.

Understand Virtual DOM | Pixelstech.net

With the popularity of React, the internals and implementation of Virtual DOM has becoming top discussed topic in tech communities and interviews. This post will give an introduction of Virtual DOM and how to implement a simple Virtual DOM logic.

OPINIONS

Useless Stuff I Still Know | DrLongGhost.com

I’ve been doing Web Development since about 2002. In many ways, things are not all that different today than they were 17 years ago. Many of the problems I work on in my current job are similar to those I worked on almost 2 decades ago when I first learned Javascript by making an insurance calculator for the financial services company I worked for at the time.

SECUTIRY

Safer-Eval library branded ‘harmful’ with no patch planned | The Daily Swig

A critical vulnerability in Safer-Eval runs the risk of impacting over 36,000 projects that are dependant on the node.js library, a software engineer has warned.

Audit your app | Kristine Steine

Should you be scared? For sure. I know lots of people who would love to hack my app. Sure, we've taken care to secure our site from the risks described in the OWASP Top Ten Project. But I'm still kind of worried about the integrity of the 1113634 (😱) packages our frontend app depends upon.

DESIGN

Unified Architecture – A Simpler Way to Build Full-Stack Apps

Unified Architecture – A Simpler Way to Build Full-Stack Apps

GitHub - CanopyTax/single-spa: Microfrontends made easy

Build micro frontends that coexist and can (but don't need to) be written with their own framework. This allows you to:

GOTO 2019 • Building Resilient Frontend Architecture • Monica Lent - YouTube

Change is inevitable. So is legacy. And too often, we as developers (who love to solve problems by coding) fall into the trap of believing the only way to fix it is by rewriting everything again and again. But how can we design an application architecture that is more resilient to change in the first place? How can we defend against entropy in a system where people are pushing changes every day?

TOOLING

Setting up ESLint & Prettier for React Development in VSCode | Hayk Baghdasaryan

Let me guess. Spent hours trying to set up the project, when you should’ve had pushed your first commit already? I feel you. That’s why I won’t be torturing you with long paragraphs filled with…

Visual Studio Code November 2019

See what is new in the Visual Studio Code November 2019 Release (1.41)

TURORIALS

Building a Telegram Bot with Node.js — Soshace • Soshace

In this article you’ll learn how to build a Telegram bot using Node.js. You’ll also gain a very practical understanding by developing a bot that retrieves an English word from a user and then returns the various dictionary definitions of that word using the Oxford Dictionary API.

Deploying a Gatsby site to GitHub Pages from Travis CI | Snyk

I recently worked on a simple static website for an open source project I have and took Gatsby for a spin along with one of the theme starters. To serve

Making an Audio Waveform Visualizer with Vanilla JavaScript | CSS-Tricks Flywheel logo

As a UI designer, I’m constantly reminded of the value of knowing how to code. I pride myself on thinking of the developers on my team while designing

Build a GraphQL + React App with TypeScript - Level Up Coding | Trey Huffine

GraphQL has transformed the way we think about APIs and utilizes an intuitive key/value pair matching where the client can request the exact data needed to display on a web page or in a mobile app screen. TypeScript extends JavaScript by adding static typing to variables, resulting in fewer bugs and more readable code.

USEFUL LIBRARIES

react-spring

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces.

GitHub - cristianbote/goober: 🥜 goober, a less than 1KB 🎉css-in-js alternative with a familiar API

🥜 goober, a less than 1KB 🎉css-in-js alternative with a familiar API - cristianbote/goober

simpleParallax - a JavaScript library for parallax effects

simpleParallax is a simple and tiny JavaScript library which adds parallax animations on any images.

GitHub - trekhleb/nano-neuron: 🤖 NanoNeuron is 7 simple JavaScript functions that will give you a feeling of how machines can actually "learn"

🤖 NanoNeuron is 7 simple JavaScript functions that will give you a feeling of how machines can actually "learn" - trekhleb/nano-neuron