ISSUE #200

A Frontend Recap 2019, Promises mistakes to avoid, debounce vs throttle and more


MODERN JAVASCRIPT

A Recap of Frontend Development in 2019 | Trey Huffine

The frontend development world once again evolved at a rapid pace over the past year, and this article recaps all the important events, news, and trends from 2019.

Common Javascript Promise mistakes every beginner should know and avoid

Whenever some new developer says that their code is not working or complain about the execution speed, I always check for these mistakes first. When I started coding 4 years back, I didn't know about this and I used to ignore them. But after being assigned to a project which handles around a million requests in a few minutes, this was no longer a case.

Debounce vs Throttle: Definitive Visual Guide | Redd Developer

A complete guide to learn the difference between debounce and throttle using visual examples. Never confuse the two again.

Just JavaScript by Dan Abramov

What if there were an online course that could better prepare you to understand JavaScript, but wasn't a grueling march to get through?

STRICTMODE

⭐ TypeScript In 1 Hour: A Video Course

I've started a new video course recently to help people get started with TypeScript. It gets you through from the very basics to some 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.

DESIGN

JavaScript Design Patterns in Action

In this article, we are going to explore all the popular design patterns used in JavaScript. We will discuss how to implement these patterns and we will discuss why we need to build them.

SECURITY

Why npm lockfiles can be a security blindspot for injecting malicious modules | LIRAN TAL

I recently started playing around with the idea of threat modeling packages on the npm ecosystem. Can an event-stream incident happen again? How about other supply chain attacks? What will be the next vector of attack that we haven't seen yet and might it be entirely preventable?

TYPESCRIPT

📘 A comprehensive handbook on how to create transformers for Typescript with real code examples

A handbook on how to create transformers for Typescript which are synonymous with Babel Plugins. Inspired by the Babel Handbook.

Step by Step using TypeScript in a Node.js Application | Dhananjay Kumar

In this blog post, you are going to learn to configure the Node.js application to use TypeScript. At the end of the blog post, you will have a REST API created using TypeScript and Express in Node.js.

Expressions and IQueryables in TypeScript | Wim Jongeneel

In this article I will show a way to query external data sources in a way that is close to LINQ and the IQueryables of C#. We will use expression trees to describe our queries like they are a real language and make generic connectors for a variability of data providers. All of this will lead to a client where we write queries like we write normal predicates and lambdas in TypeScript.

React+TypeScript: Use unions of objects for props

When typing React component props using TypeScript, I often see code that makes use of optional and nullable fields

REACT

What Are the React Team Principles? | Dan Abramov

During my time on the React team, I’ve been lucky to see how Jordan, Sebastian, Sophie and other tenured team members approach problems. In this post, I’m distilling what I learned from them into a few high-level technical principles. These principles aren’t meant to be exhaustive. This is my personal attempt to formalize observations about how the React team operates — other team members may have different perspectives.

Behavior-driven React development with Cucumber | Charles Stover

This article is not meant to sell you on behavior-driven development. If you are reading this, you likely already know the benefits. This article is a tutorial for getting Cucumber testing into your React project today.

Using Google Sheets as a Database for React Apps | Ather Sharif

We would like a custom-made website and a little birdie told us React is what the cool kids are going for these days — like, it’s faster, scalable, and easy to update compared to Wordpress? But we want to be able to update the content ourselves. Like, everything. Oh, Post…what? Postgres? What’s that? No, we don’t know MySQL either. Firebase? I feel attacked by yet another tech jargon! Why can’t we just use Google Sheets?! — Well, yes, now you can.

Don't call a React function component | Kent C. Dodds

I ran into an issue where if I provided a function that used hooks in its implementation and returned some JSX to the callback for Array.prototype.map. The error I received was React Error: Rendered fewer hooks than expected.

(Video) Learn React in 2020

A quick video course by Mahmoud Shehata

Master these 11 Core ReactJS concepts to conquer your next interview | Saeed Ahmad

In this article, I have tried to outline those core concepts which are normally asked in a ReactJS interview.

How to Handle Async Actions for Global State With React Hooks and Context | Daishi Kato

This post shows some examples how to handle async actions. It’s written for React Tracked, but it can be used without React Tracked.

(Video) Simple Form in React Using Formik - Part 1

This series will explain why we should be using Formik to create our forms in React instead of using native HTML form elements. We will be creating a sign in...

What I Learned from Translating React Docs | Gasim Gasimzada

In this post I talk about my experience in working on translating React Docs to my Azerbaijani Language

Diving Into React Suspense Render-as-You-Fetch for REST APIs | Daishi Kato

This post mainly discuss Render-as-You-Fetch for basic fetch calls, like calling REST APIs. But, some of discussions are not limited to REST. One could invoke GraphQL endpoints with simple fetch calls. For more complex use cases with GraphQL, it’s worth looking into Relay documentation too.

Create a React app from scratch with Webpack and Babel | Sentinel Stand

Create a React app from scratch with Webpack and Babel. Create your own boilerplate code and understand each step of the configuration process.

UI

The Ultimate Guide to Drag and Drop Image Uploading with Pure JavaScript

This is a comprehensive guide on how to utilize drag and drop image uploading with pure Javascript.

OPINION

My Decade in Review | Dan Abramov

I started this decade as a first-year college student fresh out of high school. I was 17, didn’t have a job, didn’t have any industry connections, and really didn’t know shit. And now you’re reading my blog! I would have been proud.

USEFUL

GitHub - aeksco/react-typescript-chrome-extension-starter

A Chrome Extension starter kit built with React, TypeScript, SCSS, Bootstrap, EsLint, Prettier & Webpack

GitHub - oguzeroglu/Rhubarb

A WebSocket library for multiplayer JS games, works on WebWorkers with binary data.

LEARN FROM CODE

GitHub - victorqribeiro/ocr

Simple app to extract text from pictures using Tesseract

FUN

Bot Land

Bot Land is an automated strategy game. Create bots, write scripts, and battle other players! Try it today for free on your computer or mobile device!

Multiplayer 2d car game!

A nice little game where you get to drive a small car with other players.

Weekend JavaScript

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.
1128 already subscribed.