JSK Weekly - October 31, 2019

On this day, 204 years ago, Karl Weierstrass was born. Karl was a German mathematician and one of the founders of the modern theory of functions. One can only wonder how easy he would find today's functional programming to grasp. This week James Sinclair takes us through part one of his four part series on functional programming in "Things I wish someone had explained about functional programming."

Looking forward and planning for 2020? Jonathan Saring explores how familiar design tools like Invision and Sketch manage component design systems and introduces groundbreaking developer-first component collaboration tools in "7 Tools for Building Your Design System in 2020" while Eden Ella details some useful open-source data visualisation libraries for your React applications in "Top 5 React Chart Libraries for 2020", both on the Bits and Pieces blog.

Also, Firefox 70 was released this week, and includes great new features such as numeric separators, Intl improvements and performance improvements which you can read about in "Firefox 70 - a bountiful release for all - Mozilla Hacks - the Web developer blog."


How to Build a Bit Compiler for Svelte

How to extend Bit to share components built with your frameworks and tools of choice Bit is a tool that helps teams build components, test and render them in isolation, search and visualize them in a neat UI, and share them with other teams with ease.

Authored by: Bit

Firefox 70 - a bountiful release for all - Mozilla Hacks - the Web developer blog

Firefox 70 is released today, and includes great new features such as secure password generation with Lockwise and the new Firefox Privacy Protection Report; you can read the full details in the Firefox 70 Release Notes. Amazing user features and protections aside, we've also got plenty of cool additions for developers in this release.

Authored by: Mozilla Hacks

Encapsulation in JavaScript

Encapsulation is the bundling of data and the methods that act on that data such that access to that data is restricted from outside the bundle, or as Alan Kay describes it, "local retention and protection and hiding of state-process."

Authored by: Eric Elliott

Moving Between Screens in Your Game Using MelonJS

MelonJS is a very powerful and versatile 2D HTML Game Engine and although its documentation is quite extensive, there is a lack of explained examples when it comes to developing a game. I have already explained the basic concepts behind a platformer created using melonJS in this article.

Authored by: Bit

What is Tree Shaking?

Tree shaking is a form of dead code elimination in JavaScript, relies on es6 import/export statements, often implemented in module bundlers.

Authored by: Hoang Nguyen


Five Ways to Reverse an Array in Javascript

We can reverse an array by both modifying the source array or without modifying the source array. We will look at different ways to do each. We can use the reverse method available to JavaScript arrays.

Authored by: jagathish

5 interesting and not-necessarily-useful Javascript tricks

A while ago, I've created a post titled "7 adorable web development tricks" . There, I described some interesting tricks that you could pull off using one of 3 major web technologies - HTML, CSS, and JavaScript. And, I must admit - you guys seemed to like it!

Authored by: areknawo

Algorithms 101: Find Pairs in JavaScript

Noob v. Algorithms #16, frequency counters and Set Today's challenge on LeetCode: For each number in the array, we want to see if it can be paired with another number in the array such that the first number minus the other number has an absolute value of k.

Authored by: Joan Indiana Lyness

Doing it Right: Private Class Properties in JavaScript

The class syntax has been one of the most popular features introduced in ES2015. However, the lack of native support for private properties has hindered it from reaching its full potential. Although...

Authored by: Bit


Learn TypeScript Data Types - From Zero to Hero

It's all the rage these days in the world of web development - TypeScript [https://www.typescriptlang.org/]. I'd wager by now you have heard about it, even in passing. But, if you haven't or if you're just curious then you've come to the right place my friend!

Authored by: Jonathan Sexton

Getting Typescript 3.7 To Work With Webpack and ts-loader - I Like Kill Nerds

At the time of writing this post, TypeScript 3.7 is in beta. Eventually, this post will become irrelevant. But, for the moment if you are trying to get TypeScript 3.7 Beta or any of the RC builds working with Webpack and ts-loader you might have encountered a bunch of red text in your console.

Authored by: Dwayne Charrington


HTTP Requests with Promises Example - Angular 8/9 Tutorial

In this Angular 8/9 Promise tutorial, we are going to learn how to manage asynchronous HTTP response with JavaScript Promise objects. Get the full code of this tutorial on the following GitHub repo: Git Repo Introduction to JavaScript Promise Promises in ECMAScript are very much identical to the promises we make in our daily life.

Authored by: Digamber Singh

Loading And Using Remote Feature Flags In Angular 9.0.0-next.12

Ben Nadel looks at how to load remote feature flags using AJAX during the bootstrapping process of an Angular 9.0.0-next.12 application. By using the APP_INITIALIZER functions, we can block the Angular application until the remote data has been loaded and exposed as a Service Provider.

Authored by: Ben Nadel


Preparing for the Future with React Prereleases - React Blog

To share upcoming changes with our partners in the React ecosystem, we're establishing official prerelease channels. We hope this process will help us make changes to React with confidence, and give developers the opportunity to try out experimental features. This post will be most relevant to developers who work on frameworks, libraries, or developer tooling.

Authored by: React

React: useContext and dependency injection

How to use the useContext hook to inject dependencies on the components If you are familiar with the SOLID principles for creating maintainable and extensible applications, you will know that one of them establishes the rule of relying on abstractions and not on specific classes, also known as " Dependency Inversion Principle ".

Authored by: latteandcode

React onHover Event Handling (with Examples) - Upmostly

There is no onHover event handler in React. Instead, we have the onMouseDown, onMouseLeave, and onMouseEnter events to perform onHover actions in React. You'd think that the onHover event handler exists in React. Well, I've got news for you. When it comes to React event handlers and onHover: The onHover event handler does not exist in React.

Authored by: Upmostly


Build Colorful Command-Line Spinners in Nodejs

Make your CLI tools more fun to use, with colorful spinners In our last post "Build Spinners in Terminal using Nodejs", we saw how we can implement spinners in terminal/command-line using Nodejs/JavaScript. The spinners there were using the default terminal color.

Authored by: Bit

The Best Way to Install Node.js with Yarn

There are a few ways to install Node.js, but it looks like only one way gives you the best experience for long term. Please find a few tips below how could you setup Yarn as well. The best way to install Node.js on Mac is nvm.

Authored by: Zoltan

Writing A Multiplayer Text Adventure Engine In Node.js: Game Engine Server Design (Part 2)

Welcome to the second part of this series. The the first part, we covered the architecture of a Node.js-based platform and client application that will enable people to define and play their own text adventures as a group.

Authored by: Smashing Magazine

Libraries and Tools

Angular Tools You Should be Aware Of

As an Angular Developer, we often focus on using the overall framework. This isn't wrong since Angular was designed to have a uniform method of building great applications. However, Angular also...

Authored by: Santosh Yadav

Top 5 React Chart Libraries for 2020

Useful open-source data visualization libraries for your React application. Charts are like wheelchairs for our feeble minds. If you want to make a data-informed decision, you better get the right help 🙂 "There is magic in graphs. The profile of a curve reveals in a flash a whole situation - the life history of an epidemic, a panic, or an era of prosperity.

Authored by: Bit

7 Tools for Building Your Design System in 2020

Building a component design system? Seeking better designer-developer collaboration? Here are some awesome tools ⭐️ Legend has it that the first design system was introduced by NASA in 1976. Since then, design systems turned into a widely common practice used to standardize design and development of a visual language in multiple instances across different teams, projects and applications.

Authored by: Bit


I tested a React app with Jest, Enzyme, Testing Library and Cypress. Here are the differences.

As with Jest, I also couldn't fit all of the tests inside of these screenshots as some of the files had quite a lot of lines. But what I wanted to demonstrate here is the language (or rather syntax) used in these texts.

Authored by: Sunil Sandhu

Functional Programming

Things I wish someone had explained about functional programming

It's hard learning functional programming on your own. But it ought not to be. You don't need a PhD to understand functional programming. The concepts are abstract, yes. But that doesn't make them incomprehensible. It shouldn't be this difficult. This is the first in a four-part series on things I wish someone had explained to me about functional programming.

Authored by: James Sinclair

Using Callbacks and Closures in JavaScript

Callbacks and closures are used frequently in JavaScript. Callbacks are functions that are passed into another function as an argument. Closures are functions that are nested in other functions, and it's often used to avoid scope clash with other parts of a JavaScript program.

Authored by: John Au-Yeung