Image for post
Image for post
Photo by bruce mars on Unsplash
["1", "2", "111"].map(parseInt);  // returns [1, NaN, 7]

Have you ever tried passing parseInt to array’s map method ?

If not yet, I will say try it now. It’s very interesting.

When we try it for first time, it looks very confusing but once we understand the logic, it becomes easy to understand.

To understand how this works we need to understand how map method and parseInt work.

It creates a new array after executing a callback function on every array elements. Three parameters are passed to that callback function.

  • Current Object
  • Current Index
  • Source Array

In our case that callback function is parseInt. So parseInt will be called on each array element and it’s result will be added in newly created array. …


Image for post
Image for post
logo of npm

Why to reinvent the wheel ?

Lots of good things are built in the world. If we can use them, why to re-create them every time? We should use those things to create something new.

The same logic is applicable in front end development as well. Whenever we work on any front end project, we use lots of third-party npm packages for various purposes.

One day I was setting up one of my new mini-project to learn Redux Saga. I realized that these npm packages are really cool. Those packages are developed by some developers and used by anyone throughout the world. Just import it and use it. …


Image for post
Image for post
JavaScript Closure by Yuvraj Patil

A wise man once said

“You need to master the closure to be a Guru in JavaScript”.


Image for post
Image for post
Code Block from Yuvraj Patil

To achieve anything big in our life we have to be disciplined. We have to set some rules and we have to follow them no matter what happens. So to define strict in simple terms, it’s just rule, rule and rules. These rules help us to avoid the known mistakes.

Similarly in JavaScript, there are many known issues which may occur if we do not follow some rules. To force to follow such rules, there is a mode called strict mode. It imposes rules which help us to avoid upcoming issues.

To declare the strict mode you just have to add 'use strict'; at start of file or at start of functions. We can impose the strict mode at file level or at function level. Ideally strict mode should be on file level but if we are having a legacy code and file is big, it will take a lot of time to resolve the issues highlighted by strict mode. In such cases strict mode should be used on function level and gradually it should be kept on file level. …


Image for post
Image for post
Photo by Michael Winterdal on Unsplash

People do lots of things to get kicks. I am not talking about physical kicks but about mental kicks.

For such kicks someone drinks coffee, someone drinks tea, someone smokes and someone do something unique. Everyone has their own way to get kicks.

Kicks give us instant energy. It makes our mood happy. It increases our productivity for a while. We feel like this is what we needed to feel better.

Sometime in our career, time comes that we need to be at our top speed. At such time what we desperately needs is KICK.

Whenever such time comes to me, I listen some songs which I have collected till now. For me, these songs act like a kick. …


Image for post
Image for post
Unit Testing Angular Application using Jasmine

Unit testing is one of the most important part of any application development. It helps us to make our source code more robust. Purpose of this article is to cover Jasmine test cases for core component of Angular Application.

  1. You are familiar with Angular.
  2. You have created your project with Angular-CLI. i.e. All dependencies are installed and Karma config is ready.

Create a globalmocks.ts which will be keeping all test data and other global mocks. Make sure to export data and mocks. There are different levels of mock in case of callback functions.

Source Code of Global Mocks

When you create a new component using ng component new <component_name> command, it will create component as well as spec file for that component. Ex. your component file name is home.component.ts then spec file name will be home.component.spec.ts. …


Image for post
Image for post
Component Communication in Angular

In Angular, component communication is a very essential thing. For component communication, we use @Output() and @Input(). This works well if our application is small. But as our application grow, more and more components are added. So we have to add lots of @Output() and @Input() at many levels which becomes very difficult to manage. Debugging an issue in lots of @Output() and @Input() levels is a nightmare.

There are multiple ways to resolve this issue but in this blog we are focusing on component communication using RxJS. (RxJS is simply a library of event management).

This implementation consists of three…


Image for post
Image for post
Visual Studio Code Extensions for UI development

Visual Studio Code is the best IDE for any front end development. During the code development we do lots of things other than coding. Things like formatting, making builds and much more. To help the developers speed up there are lots of extensions available for Visual Studio Code.

I have listed down extensions which I believe will definitely help during front end development:


Image for post
Image for post
Stack implementation using JavaScript

Stack is a very popular data structure. It is present as library classes/interfaces in many object oriented language like Java, C#. In JavaScript there is no stack data structure by default but we can create one. I have written following code which can be used to utilize Stack features in JavaScript development.

Originally published at https://yuvi1422.blogspot.com on March 24, 2020.


Image for post
Image for post
Unit Test: React-Bootstrap Modal

Writing unit test always help in longer run. Now a days almost all frameworks and libraries are supporting unit testing. In React Bootstrap, there is documentation for using the unit test cases but still writing unit test cases for React-Bootstrap Modal can get confusing.

After spending hours on it finally I am able to write test cases for it. These code snippets can be used for other React-Bootstrap components as well (by changing the corresponding names).

"react": "^16.9.0",  
"react-bootstrap": "^1.0.0-beta.9",
"react-dom": "^16.9.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",

Happy Unit Testing.

Originally published at https://yuvi1422.blogspot.com on August 25, 2019.

About

Yuvraj Patil

Programmer who loves coding and enjoys learning new technologies. 8 years of experience in JavaScript development. Website: http://www.yuvrajpatil.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store