JSK Weekly - April 28, 2021

As April draws to a close, walk through Ayush Verma's guide on Closures in "How Closures Work in JavaScript: A Guide" and put an end to spaghetti code with "3 Ways to Write Elegant JavaScript Code" by Zachary Dorcinville.


How Bit Versions Independent Components

A component object stores general information about a component. That includes its component id, scope name, references to its version objects, and more. The component's hash is not based on its content since it is not immutable. It is updated whenever a component gets tagged with a new release version.

Authored by: Bit

How to Build a Blog Site App with Next.js and Ghost

Continuing our Next.js journey, the next application which we will build is a blog. We will use Ghost CMS for our blogs and Next.js for the frontend. So, open your terminal and create a new Next.js application by using the command below. npx create-next-app ghost-nextjs Now, as per the instructions, change to the newly created folder.

Authored by: Nabendu Biswas

Independent Components: The Web’s New Building Blocks

Why everything you know about Microservices, Micro Frontends, Monorepos, and even plain old component libraries, is about to change. Independent components are a revolutionary way to build web projects. They replace or transform much of today’s software development strategies and architectural styles. Even so, it seems like they have kept themselves behind a veil of mist — misunderstood and unexplained.

Authored by: Bit

A Beginner's Cheatsheet to Understanding DOM Manipulation

A short JavaScript primer for the overwhelmed front-end newbie. The structure of my Bootcamp had us learning a back-end in Ruby on Rails first, and then we popped right into JavaScript. With Ruby, we had months of legwork in the basics, and with JavaScript, it was oh, about a weekend, followed by a firehose of a week.

Authored by: JavaScript In Plain English


How to Use the Fetch API in JavaScript: Explained with Inspirational Quotes

The Fetch API in JavaScript is a simple interface for fetching resources over the internet. Fetch makes it easier for us to make web requests and handle the responses. This feature is built as a Promise-based JavaScript API for making asynchronous HTTP requests in the same way as the old XMLHttpRequest (XHR).

Authored by: Handhika Yanuar P

The lazy-loading property pattern in JavaScript

Traditionally, developers have created properties inside of JavaScript classes for any data that might be needed within an instance. This isn't a problem for small pieces of data that are readily available inside of the constructor. However, if some data needs to be calculated before becoming available in the instance, you may not want to pay that cost upfront.

Authored by: Nicholas C. Zakas

How I Created My Own Tombola Ticket in JavaScript

Writing the tombola algorithm using JavaScript. During the pandemic, the gaming industry boomed a lot. After my working hours, I played a lot of games on mobile devices. We played a tombola game over a Zoom call, which was quite interesting.

Authored by: shreyvijayvargiya

Improve JavaScript Code Quality with These Best Practices

If you write JavaScript today, it's worth your time staying in the know of all the updates the language has seen in the past few years. Since 2015, with the release of ES6, a new version of the ECMAScript spec has been released each year.

Authored by: Saif Sadiq

JavaScript Splice - How to Use the .splice() JS Array Method

The splice() method is a built-in method for JavaScript Array objects. It lets you change the content of your array by removing or replacing existing elements with new ones. This method modifies the original array and returns the removed elements as a new array. In this tutorial, you will learn

Authored by: NathanSebhastian

3 Ways to Write Elegant JavaScript Code

Whenever I finish building a project or take a look at some older code, I always try to find ways to refactor and improve readability. Methods of doing this can include writing custom React hooks, wrapping repeated code into subroutines, and others.

Authored by: JavaScript In Plain English

How Closures Work in JavaScript: A Guide

Using private variables and methods −Languages such as Java provide the ability to declare methods private, meaning that they can only be called by other methods in the same class. JavaScript does not provide a native way of doing this, but it is possible to emulate private variables and methods using closures.

Authored by: Ayush Verma


Calculating Derived Datasets Using Objects As Indexes In AngularJS 1.2.22

At InVision, when I retrieve data from the server, the payload that's returned contains all the necessary information for the view. But, it's not always in the necessary view-model format. As such, I have to generate some degree of client-side data based on the AJAX response.

Authored by: Ben Nadel


Composition: An Alternative to Props Drilling in React

React implements a unidirectional pattern for data flow for building components. The pattern itself is not unique to React but is followed strictly. Unidirectional data flow simply means that data can only flow in one way alone.

Authored by: Fakorede Boluwatife

How to Safeguard Your React Native Application from Getting Hacked?

Basic tips to consider to secure your React Native application. Being software developers, we often underestimate the need for implementing security features. Why do you ask? Possibilities are time constraints, lack of expertise, and unawareness of the risks involved. No matter what your reason is, not having robust security on your app may result in unexpected consequences.

Authored by: Edison Dsouza


What Are The Best Practices For Vue.js Development?

If you are implementing this practice - you have to use the data property on components by the function that not only returns property as a simple object. Value of data is only shared to all the instances of components when it is an object.

Authored by: Steven Davis


How to Set Up Nodejs and MongoDB on Production Server

One of the biggest challenges that a developer faces while working with the Node environment is the production phase. After spending days or even weeks on development, you'd expect the production and...

Authored by: JavaScript In Plain English

Create Your Own Customized Bit Node Environment for a Standardized Node Modules Development

With that out of the way, we can now begin to customize our environment. Note though, that by default Bit already provides a very sturdy and complete environment for our Node.js components.

Authored by: Bit

Best Tricks to Make Your Node.js Web App Faster

When it comes to developing a web application, JavaScript is the only programming language that comes to your mind. According to the survey report of Stack, JavaScript is the most popular choice of programming language in the world for web app development as it is easy to learn, works well when combined with other languages, and can be used to build a variety of applications.

Authored by: Sophia Martin

How to Create a Node.js Back-End using the MVC Software Design Pattern

In this tutorial, you will learn how to create a Node.js back-end using the Model-view-controller (MVC) software design pattern. This design pattern gives you the ability to make user interfaces that are separated into three different elements. The business logic is separated so that the data, user interface, and user input are not mixed together.

Authored by: 🟣 Andrew Baisden 🇬🇧

My Favorite Microservice Design Patterns for Node.js

After working for a while with Node.js I've come to the conclusion that there is no better tool to use when writing microservices. Of course, that is my opinion, completely biased by my preference for JavaScript as a language.

Authored by: Bit

How to Use ECMAScript Modules in Node.js

How to enable and use ECMAScript 2015 modules in Node.js.

Authored by: Dmitri Pavlutin

Why are Web Developers Choosing Node.js over PHP?

There is an interesting phenomenon happening that I want to talk about. PHP is gradually being looked down upon. I remember seeing an interesting report once on the battle amongst the web browsers for the position of the leader. The report roughly talked about several browsers astriving to win the throne.

Authored by: Shingai Zivuku


Cypress Test Statuses

How to track the written tests using the Cypress test statuses After the Cypress spec completes every test has one of the 4 statuses: passing, failing, pending, or skipped. Let's look into each status. Passing tests are the best, aren't they? The have successfully completed all their commands, never failing any assertions.

Authored by: Gleb Bahmutov

How to Write File-Based JavaScript Tests with Real Files

Hey guys, this post is about writing tests for projects that access the file system by reading and writing files to disk. A lot of my past projects in some way had to do with file access.

Authored by: Sebastian Landwehr

Functional Programming

How to Create the Entire Front-End Boilerplate with a Single Function.

Automating the repetitive process of creating a front-end boilerplate. I was working with some clients and developing their projects. Most of my clients have requirements for a front-end interface. Every time, I undertake the repetitive process of creating a repository on Github, running the initial yarn commands, followed by creating more or less the same folders or architecture.

Authored by: shreyvijayvargiya

A Mistery of parseInt() in JavaScript

parseInt() is a built-in JavaScript function that parses integers from numerical strings. For example, let's parse the integer from the numeric string '100': As expected, '100' is parsed to integer 100. parseInt(numericalString, radix) also accepts a second argument: the radix at which the numerical string argument is.

Authored by: Dmitri Pavlutin

How to Re-Render a Functional React Component

There are lots of reasons you may want a component to re-render, but not nearly as many ways to accomplish this. React is pretty strict when it comes to triggering a re-render. I have touched on the reasons why mutating state directly is a big "no-no" in the React world, and this is a big part of it.

Authored by: Adam Workman