JSK Weekly - March 25, 2020

As the full impact of this unprecedented time unfolds, with some countries going into full lock down, we'd like to extend our heartfelt love and thoughts to anyone in our community that is directly affected, whether through illness or the economic backlash.

We hope anyone not working or working less at the moment can use this time to teach others, learn new skills and possibly even create something magical. We will continue to distribute information, as always, and remember to check in with your loved ones as often as you can.


5 Ways to Share Code in 2020

Effectively share code in a managed way to speed development to avoid code duplications. Sharing code in different projects is a powerful way to speed development. However, writing the same code over and over again in different projects is a bad practice. Copy-pasting code doesn't make it any better.

Authored by: Bit

For of loops, one loop to rule them all

For the longest time, for in and for were the main loops you could use to iterate over collections of things in JavaScript. Then we got some fancy array methods like forEach, map, filter, etc. It starts to get a bit confusing of when to use each loop type. For

Authored by: Jonathan Creamer

How to Cancel a Fetch Request

JavaScript promises have always been a major win for the language - they've led to a revolution of asynchronous coding that has vastly improved performance on the web. One shortcoming of native promises is that there's no true way to cancel a fetch...until now. A new AbortController has been added to the JavaScript specification that ...

Authored by: David Walsh

Quick Front-End Integrations Through Components

Use "low-touch" component-driven integrations to help your team build faster and better together. The recent Coronoavirus outbreak stresses the need for effective remote teamwork for front-end teams, while everyone is working from home. Integrations between people and projects are a challenge for every organization. For teams that work remotely, it's twice as challenging.

Authored by: Bit

Optimizing Collaboration Between Distributed Front-End Teams

Integrating Bit with Slack and Github to optimize collaboration between frontend developers working remotely. Maintaining effective collaboration is always a challenge but much more so in distributed teams - especially if this type of workforce model was brought on, quite suddenly and unwillingly, by the new Coronavirus.

Authored by: Bit


5 Best Practices for writing clean JavaScript

So what is clean code anyway? The answer may differ from person to person but for me, clean code is self-documenting. The intent is clear from first sight, different responsibilities are well separated. You can almost read code like natural language and this means you don't have to use comments as a crutch.

Authored by: Ferenc Almasi

Where can you find useful resources to help you with JavaScript?

A quick guide for useful learning resources on the internet Here are some top places you should bookmark as a beginner coder. These places offer invaluable advice, help, hacks, tips, fixes and everything else to do with your JavaScript code.

Authored by: Trung Anh Dang

Use collections wisely in JavaScript

Original -> () -> () -> () -> Final A collection is a data structure used to store a list of values. These are called arrays, sets, and maps. In JavaScript, quite often there is a need to take a collection of elements and apply some functions to each of those elements to map each element, filter elements, find an element, or reduce the original array in any other way.

Authored by: Trung Anh Dang

What is null in JavaScript? - TamalWeb

Every programming language has at least one bottom value but JavaScript has two: null and undefined (Crockford, 2017). We are going to focus on null for this article because there is so much that's going on behind the scenes. What is null in JavaScript? null means no-value.

Authored by: Tamal Anwar Chowdhury

Most popular 25+ JS repositories in March 2020 - Kriss

I strive to collect and improve the most important JS projects that you can use to your advantage. And, of course, how it develops and [...]

Authored by: kris

JavaScript Debugging: Order of Operations

Today's article is different from the many others I've written. We are not really going to solve an algorithm but we are going to solve a problem. We are going to debug a short snippet of code. Debugging is a routine process of locating and removing computer program bugs, errors or abnormalities.

Authored by: gitconnected


Introducing React Navigation 5

React Navigation is the closest navigation library to come in mind when we are talking about the navigation in React Native, I'm a big fan of this library and my first solution to handle the Navigation in React Native, it has an awesome and easy API, very customizable

Authored by: SaiD

Server-Side Rendering in React - ExpressJS

In my previous article about Server-Side Rendering in React, I have briefly described the idea of isomorphic and universal applications. I've also shown the advantages and disadvantages of this approach. Today, I will get to the point and show you how to configure a universal React app using the ExpressJS framework!

Authored by: Bartek Dybowski

useEffectlessState for data fetching with React hooks - Notes of Maks Nemisj

Have you ever been into a situation where you wanted to do something with your state inside useEffect hook but didn't want to put it into a dependency array? react-hooks/exhaustive-deps is an excellent guard when working with primitive values, but as soon as you have an object in the state, it might stay on your ...

Authored by: Maks Nemisj

How to Use WordPress with React to Build a Modern Web App

In a rush? Skip to tutorial steps or live demo When we first wrote about using WordPress as a headless CMS and the WP REST API back in 2017, it was a very big deal for us, JAMstack aficionados. I mean, a concept like "headless CMS" was only beginning to make noise, and WordPress embracing it was a huge statement.

Authored by: Snipcart


Vue Components - Dynamic and Async Components

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we'll look at how to define and use dynamic and async components. We sometimes want to maintain the state or avoid re-rendering for performance reasons when we switch between components dynamically.

Authored by: John Au-Yeung

What is Vue.nextTick?

My experience of using nextTick to improve User Experience According to vue.js offical documentation ( Defer the callback to be executed after the next DOM update cycle Use it immediately after you've changed some data to wait for the DOM update https://vuejs.org/v2/api/#Vue-nextTick immediately , DOM update , Callback ...

Authored by: JavaScript in Plain English


The Complete Guide to Connecting to a Database in Node.js

One syntax for multiple databases, do SQL migrations, and seed data like a PRO in a Node application. In this article, I will share the methods that I am using to work with databases. The primary tool we will be using is Knex.

Authored by: transonhoang

Node.js Bcrypt vs BcryptJS Benchmark

Bcrypt is among the most popular and safest, one-way hashing functions for passwords. For Node.js applications, we have 2 options bcrypt and bcryptjs. bcrypt is written in C++ with more than 400.000 downloads per week at npm and 5.1k stars at github . bcryptJS is written in Javascript with...

Authored by: petros koulianos

Libraries and Tools

7 Awesome JavaScript Web App Tour Libraries

Tour and guide libraries are there to help you guide your users through using your app. They do so by adding extra information to your UI, provide tips or text (usually obtained from the server in...

Authored by: Bit

5 Recommended Tools for Optimizing Performance in ReactJS

My top favorite tools for monitoring and optimizing my React components. In the spirit of speed and optimization, let's jump straight to my list of favorite tools for performance monitoring and optimization for React. Profiler, a new component in React, developed by B.

Authored by: Bit

20 Top Tools for Distributed Development Teams

Collaboration tools for developers working from home. Coronavirus has forced a lot of teams in the IT industry to start working remotely, even when they weren't prepared for it. And consequently, a lot of bloggers have turned to writing guides and lists of Tips & Tricks on how to best approach this new reality.

Authored by: Bit

10 Top Preact Libraries and Tools for 2020

My top favorite tools and libraries for Preact, React's lightweight twin. Preact is an alternative to the popular React library. It has fewer complexities and performs faster in comparison to React due to its smaller size of 3kb. Preact also uses the ES6 API similar to React.

Authored by: Bit


How to Start Unit Testing Your JavaScript Code

We all know we should write unit tests. But, it's hard to know where to start and how much time to devote to tests compared to actual implementation. So, where to start? And is it just about testing code or do unit tests have other benefits?

Authored by: freeCodeCamp.org

Testing dynamic links and fixing react-native-firebase issues - Vijay Thirugnanam

Firebase Dynamic Links module provides a link which we can share with other apps. The recipient of the link may not have the app. In that case, the dynamic link takes the user to the App Store and prompts the user to install the app.

Authored by: Vijay T

Functional Programming

Function Construction, What's Your Function?

Theatrics aside, let's get down to business and define what a Function Constructor is. A Function Constructor is a plain old, normal function that is used to construct objects. That doesn't sound special, and on a surface level, it isn't.

Authored by: gitconnected

JavaScript Callback Functions - What are Callbacks in JS and How to Use Them

If you're familiar with programming, you already know what functions do and how to use them. But what is a callback function? Callback functions are an important part of JavaScript and once you understand how callbacks work, you'll become much better in JavaScript.

Authored by: freeCodeCamp.org

JavaScript Algorithm: Shopping List

For today's algorithm, we are not going to write a function but instead, we are going to learn basic JavaScript fundamentals, mainly the use of math operators. For this algorithm, you are in charge of ordering food and you plan on ordering a lot of food.

Authored by: JavaScript in Plain English