JSK Weekly - May 05, 2021

In case you haven't had enough of May the 4th references, today is Revenge of the 5th. If you're not sure what that means, you're definitely no Star Wars fan! No matter. A quick Google search and you'll be less confused. Speaking of confusion, Dmitri Pavlutin's "Don't Confuse Function Expressions and Function Declarations in JavaScript" is a popular read this week.


General

9 Reasons You Should Use Bit for Designer Developer Collaboration

By having design and code side-by-side you can instantly compare a component's implementation to its design, and make sure every single type and state of the component is in 100% match with its design. This is a very quick and effective way to improve consistency from day one!

Authored by: Bit

Standardizing the Development Environment of Different Teams in the Same Organization

The fact that multiple teams live under the umbrella of the same company doesn't automatically mean they'll be easy to coordinate. From a software development PoV multiple issues can (and normally do) happen when standards aren't enforced.

Authored by: Bit

How to Get Your First Job in Developer Relations

Hello, my name is Alex, and I'm an… Advocate. A Developer Advocate. What does that means? I am the bridge between a product and the developer community using that product. How did I get here? I'm going to tell you all about that and how you can do the same.

Authored by: Alex Lakatos

Jest: Clearing Module Mocks Effortlessly

I have a query module that is used throughout my app. Therefore, this module gets mocked often in my tests. To save time, I mocked it globally through a setup file that is loaded every time Jest runs. It works almost flawlessly, my specs are cleaner, and I can test exactly what I want.

Authored by: Michael Andemeskel


JavaScript

What is the JavaScript Event Loop?

For beginners it is difficult to understand how the execution order in JavaScript works, how the code runs. Mozilla says: "JavaScript has a concurrency model based on an , which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks.

Authored by: Czika Csenge

Import Assertions in JavaScript

The amount of data present in the world continues to grow exponentially with time. This huge amount of data exists in many different types. These data can be text files, images, videos, audios, etc...

Authored by: Bit

JavaScript setTimeout() - How to Set a Timer in JavaScript or Sleep for N Seconds

This tutorial will help you to understand how the built-in JavaScript method setTimeout() works with intuitive code examples. How to Use setTimeout() in JavaScriptThe setTimeout() method allows you to execute a piece of code after a certain amount of time has passed. You can think of the method as a

Authored by: NathanSebhastian

JavaScript Execution Context and Hoisting Explained with Code Examples

JavaScript is an easy-to-learn programming language compared to many of its counterparts. However, a few basic concepts need a bit more attention if you want to understand, debug, and write better code. In this article, we will learn about two such concepts, Execution ContextHoistingAs a beginner to JavaScript, understanding these

Authored by: Tapas Adhikary


Angular

Build A Hybrid App Using Cordova + Angular

Cordova is a cross-platform tool used to develop a Hybrid App. Hybrid apps using Cordova are web apps written using HTML, CSS, and any JavaScript framework/library. Cordova is responsible for...

Authored by: Rucha Deshpande

Handling HTTP Request using RxJs in Angular

Handling HTTP request in an Angular application is a crucial part. In this article we will go through below methods from RxJs to handle HTTP requests. map → applies the function supplied to each value of input observable and emits the resulting value as observable.

Authored by: Frontend Weekly


React

API Design for a React Tree Table

A recent React freelance project of mine offered me a challenging task: The client wanted to have a tree table component in React. The role model for this was MacOS's Finder and its tree view; and as a cherry on top: it should be able to fetch asynchronously up to 100.000 items in chunks as paginated and nested lists.

Authored by: Robin Wieruch

Common Mistakes React Developers Make - And How to Fix Them

In this article, we'll see some of the common mistakes that React developers make, and how you can avoid them. So let's get started. Don't Forget that Every Route Change Mounts and Unmounts a ComponentWhenever you're using routing in a React application, you declare routes inside the Switch component. This

Authored by: Yogesh Chavan

The Essentials of a React Application Architecture

Have you ever tried to find out some useful and basic information about React application architecture? It's as tricky as learning rocket science, really! I spent hundreds of hours Googling and the result was like "create src folder, components folder, middlewares, ..."

Authored by: Ilia Kniazev

React Hooks vs. RxJS

I'm currently working a lot with React which is a nice change of scenery. Coming from Angular I've had to learn quite a few things about the framework while I was able to re-use basic web development skills (HTML, (S)CSS, JavaScript/TypeScript) and transfer concepts like component-orientation.

Authored by: Nils Mehlhorn

Debouncing API requests in React

In this article we will discuss about how the unnecessary API call requests with every time the user input changes can be avoided to make your app more efficient and scalable. First of all I would like to give you a brief about the useEffect hook.

Authored by: PULKIT SHARMA

10 Valid Proofs that Show React Native App Development Cost is Lower

Whether you are a bootstrapper or a leading entrepreneur, choosing the best technology for app development and estimating the costs to build an app are the most pressing concerns of an organization. When it comes to app development, you all are familiar with the fact that JavaScript always brings all good things to the web industry.

Authored by: Sophia Martin

How to Perform Conditional Rendering in React with the Logical AND Operator

Oftentimes, we want to alter what we show to the user based on a condition. Let's say we want to change the content of a card when the user clicks a button. There are several ways to accomplish this, but in this example, we will be taking a look at the logical AND operator.

Authored by: Adam Workman


Vue

Laravel 8 Vue Inertia Pagination Integration Tutorial - positronX.io

Laravel 8 Vue Inertia pagination tutorial; This comprehensive guide will help you understand how to integrate pagination in the laravel app using the very popular inertia javascript and Laravel Breeze from scratch. Also, we will use Laravel Breeze; this package offers a minimal and simple origin point for developing a Laravel application with authentication.

Authored by: Digamber Singh


Node.js

Building a Mobile App Backend using Node.js and MongoDB.

There are various other choices to choose as a backend framework for your application. The most popular one out there is Firebase. It is a platform provided by Google that can be used to build a small-to-intermediate level application.

Authored by: Dhanam Parekh

How to Implement SendGrid using Node.js

Now let's jump to Node.js: 1. Install Axios using npm. npm install --save axios 2. Create an email helper file in your node project. Inside the email helper file paste your SendGrid API key & endpoint of SendGrid send API. I have created an 'EmailType' object to store multiple dynamic template id.

Authored by: JavaScript In Plain English


Libraries and Tools

React Table: The Headless Table Library for React

First, you need to create a React application and integrate relevant APIs to fetch data for your tables. In this example, I will be using "User Details" from " JSON Placeholder Free fake API." Also, I will be using Axios to make API calls.

Authored by: Bit


Testing

Unit Testing in React with Jest and Enzyme Frameworks

In this article, we will discuss unit testing in React and how to implement it using the Jest and Enzyme frameworks. Unit testing helps us improve the quality of code, identify future breaks, and reduce the cost of bug fixes.

Authored by: Syncfusion


Functional Programming

How to Build a React Application with Load More Functionality using React Hooks

In this article, we will build a React application using class components. Then we'll convert it to functional components using React Hooks in a step-by-step way. By building this app, you will learn: How to make API callsHow to implement load more functionalityHow to debug application issuesHow to use async/

Authored by: Yogesh Chavan

Don't Confuse Function Expressions and Function Declarations in JavaScript

In JavaScript, the function keyword does a simple job: creates a function. However, the way you define a function using the keyword can create functions with different properties. In this post, you'll find how using the function keyword you can write function declarations and function expressions, and what are the differences between the 2 types of functions.

Authored by: Dmitri Pavlutin





0 comments