DEV Community: Sumit Joshi

Notifications issue in Firefox

Sumit Joshi — Mon, 11 Apr 2022 17:36:15 +0000

I was working on web notification module where I have to send notifications to web application users. In google chrome and edge push notifications works smoothly but when it comes to mozilla firefox its not the case. I was not able to receive any notification when I have signed in with firefox browser. After searching about this issue on the internet I found that its the thing with windows 10 action center.

All web browsers have their own built in notification functionality. When windows 10 was launched it came with new action center. Some browsers have started using this action center. In google chrome its default setting.

In the case of firefox user need to enable it manually by changing configuration.

Here are steps to enable web notifications in firefox browser.

*Step 1 *:- Open mozilla firefox and go to about:config
, it will shows warning message, accept the risk and continue.

Step 2 :- now type alerts in the textbox and it will shows a preference

alerts.useSystemBackend

mark this preference true - if you want to receive web notification in the firefox browser.
mark this preference false - if you don't want to receive web notification in the firefox browser.

Notifications issue in Firefox

Sumit Joshi — Mon, 11 Apr 2022 17:26:14 +0000

In the case of firefox user need to enable it manually by changing configuration.

Here are steps to enable web notifications in firefox browser.

*Step 1 *:- Open mozilla firefox and go to about:config
, it will shows warning message, accept the risk and continue.

Step 2 :- now type alerts in the textbox and it will shows a preference

alerts.useSystemBackend

mark this preference true - if you want to receive web notification in the firefox browser.
mark this preference false - if you don't want to receive web notification in the firefox browser.

Passing array of json to Postgresql Function / Procedure and access it

Sumit Joshi — Wed, 06 Apr 2022 13:54:59 +0000

As a backend developer I prefer to develop database functions or procedures rather than using any ORMs(performance issues).

So sometimes I have requirements to insert more than one row at a time to table and getting array of object in API's request body.Generally people prefers to loop over array and makes repetitive Insert call to database.

In this article, I will show the way to Insert multiple entries into database from json array and without making Database calls for every array objects. I am using Postgresql Database language to solve this scenario

First of all we will create one Postgresql Procedure or Postgresql Function Which takes array of objects as argument and process it.

we are expecting argument of type json in this function.
In the declare section of the postgresql function we have assigned this argument to over function's declared variable and have declared two others variable. "json_object" to hold one json object and "user_name" to hold key of json object.

JSON_ARRAY_ELEMENT :- is a postgresql function to process json, this function expands the top-level of JSON array into a set of JSON values.

So in our case JSON_ARRAY_ELEMENT will return JSON objects and We are looping through this JSON array and storing this json object into "json_object" variable.

While iterating through array we are getting each JSON object in "json_object" variable. after that we are extracting over required or useful key from the json object and inserting it into our database table.

user_name := json_object ->> 'user_name';
this code will extract "user_name" key from our json object.

To Test this function in your postgresql environment.
Create one table.

Then execute above function to your postgresql environment
And call the procedure with below mentioned call.

Hope you find this informative and in case have any doubts or queries, Feel Free to reach on below mentioned Details:
EmailId: ssquare489@gmail.com

Flag Emoji rendering issue on google chrome | React JS

Sumit Joshi — Mon, 04 Apr 2022 17:56:34 +0000

I was developing common react component for selecting country code for phone number input. In the testing I have observed that Flag emojis are getting rendered on Firefox browser but in google chrome it wasn't the same case. In google chrome its not able to render flag emoji based on the string.

In Google Chrome It was getting rendered like following image.

And In Firefox It was getting rendered like following image.

After going through some stack overflow and other articles get to know that it depends on the OS and sometimes the browser. In Apple platforms it renders the flag and in the windows platforms it shows two-letter country codes.

Can refer this stack overflow question's answer.

https://stackoverflow.com/questions/54519758/flag-emojis-not-rendering

So came up with 2 solutions to overcome this issue in my React JS Code.

First Solution (this solution is also available in stackoverflow question's link I have shared above).

Need to find All two letters country code and replace it with image from FlagCDN.

Snippet to convert two-letter country code to png image:

snippet to replace all occurence of two-letter country code to png
"var reg = new RegExp('(?:\ud83c[\udde6-\uddff]){2}', 'g');
document.body.innerHTML = document.body.innerHTML.replaceAll(reg, flagemojiToPNG);"

Second Solution

For this I have used React-select library to create dropdown.
First Of all have created Data source for the select dropdown.

"{
label: ${item.attributes.name} (${ item.id }) +${item.attributes.country_code},
value: ${item.attributes.country_code},
emojiFlag: item.attributes.emoji_flag
};"
Structure of my array's object was like above.
Label: To showcase Label with country name, country code(numeric).
Value: this is supposed to be the value of dropdown
emojiFlag: two-letter country code.

Utilised above created function to convert two-letter country code to flag image.

To render country code select Dropdown:

style={this.props.style}
options={this.state.dataSource}
formatOptionLabel={data => (
<>{this.flagemojiToPNG(data.emojiFlag)} {data.label}
</>
)}
placeholder={this.state.placeHolder}
onChange={}
value={}
isDisabled={}
/>
I have used formatOptionLabel property to render image flg.

Install ElasticSearch,Logstash and kibana on Local System(windows) Part -02

Sumit Joshi — Sat, 17 Oct 2020 12:24:08 +0000

Steps For Windows 10

1.Download ElasticSearch
Download Logstash
Download Kibana :- Download zip files from this link.

2.To start elastic search service
-Extract downloaded zip and open bin directory in command prompt(As Admin)

Type command "elasticsearch.bat"

3. To start kibana service
-Extract downloaded zip and open bin directory in command prompt(As Admin)

Type command "kibana.bat"

4. To start Logstash service
-Extract downloaded zip and open bin directory in command prompt(As Admin)
-create configuration file "logstash.conf" in configuration file you need to confgiure INPUT(from where you want to fetch data),OUTPUT(where you want to send data) in our example output will be elastic search (for example output{ elasticsearch { hosts =>["localhost:9200"] index => "indexForLogstash }} ,hosts in which port your elasticsearch service is running.
-Type command "logstash -f logstash.conf".

You can visualise your data in kibana using index which is in logstash configuration.

Rotate Linked List with javascript (LEET CODE)

Sumit Joshi — Mon, 05 Oct 2020 16:35:13 +0000

Problem:-
Given a linked list, rotate the list to the right by k places, where k is non-negative.

Example 1:

Input: 1->2->3->4->5->NULL, k = 2
Output: 4->5->1->2->3->NULL
Explanation:
rotate 1 steps to the right: 5->1->2->3->4->NULL
rotate 2 steps to the right: 4->5->1->2->3->NULL
Example 2:

Input: 0->1->2->NULL, k = 4
Output: 2->0->1->NULL
Explanation:
rotate 1 steps to the right: 2->0->1->NULL
rotate 2 steps to the right: 1->2->0->NULL
rotate 3 steps to the right: 0->1->2->NULL
rotate 4 steps to the right: 2->0->1->NULL

Algorithm:-
Step 1 :- First we will find the length of linked list by traversing through it.
step 2:- after traversing through linked list we are at tail node
step 3:- connect tail node to head node
step 4 :- comparing the length of linked list with passed rotation value(k)
step 5:- after comaring it with k we will get new length to get new rotated linked list

SOLUTION:-

var rotateRight = function(head, k) {
if(head == null || k == 0){
return head
}
let i = 1
let tail =head
while(tail.next != null){
i++
tail =tail.next
} //i = 5(length of list)
if(k == i){
return head
}
while(k > i){
k = k - i
}
let j = i-k // j = 5-2
tail.next =head;
let newTail = tail;

while(j-- > 0){
    newTail = newTail.next
}
let newHead = newTail.next
newTail.next = null;
return newHead

};

Basics of ELK Stack(Elasticsearch-Logstash-kibana) Part -01

Sumit Joshi — Wed, 30 Sep 2020 17:21:17 +0000

What is ELK Stack?

-Collection of three open source products
1.ElasticSearch - used for storing logs
2.Logstash - used for shipping as well as processing and storing
logs
3.Kibana - visualization tool

Motive behind ELk
-Designed to take data from any source, in any format and to search ,analyze, and visualize that data in real-time.
-Provide centralized logging that be useful when attempting to identify problems with servers or applications.

Simple Architecture For ELK Stack

Log File -> Logstash(Data Processing) -> ElasticSearch(Storage) -> Kibana(Visualize)

Logs - Server Logs that need to be analyzed.
Logstash - Collect logs and events data and parses and
transfers data to ElasticSearch.
Elasticsearch - The transformed data from logstash is
store,search and indexed.
Kibana - Kibana Uses ElasticSearch DB to Explore ,Visualize
and Share.

Mountain Array with Java Script

Sumit Joshi — Wed, 12 Aug 2020 16:53:13 +0000

What is Mountain Array?
Given an array A of integers, return true if and only if it is a valid mountain array.

Recall that A is a mountain array if and only if:

A.length >= 3
There exists some i with 0 < i < A.length - 1 such that:
A[0] < A[1] < ... A[i-1] < A[i]
A[i] > A[i+1] > ... > A[A.length - 1]

Examples Of Mountain Arrays.
Example 1:

Input: [2,1]
Output: false
Example 2:

Input: [3,5,5]
Output: false
Example 3:

Input: [0,3,2,1]
Output: true

Solution Approach

It's very easy to keep track of a monotonically increasing or decreasing ordering of elements. You just need to be able to determine the start of the valley in the mountain and from that point onwards, it should be a valley i.e. no mini-hills after that. Use this information in regards to the values in the array and you will be able to come up with a straightforward solution.

so as per above explanation,

if(A.length > 3){
let n = A.length;
let i = 0;

while(i+1 < n && A[i] < A[i+1]){
    i++;
}

if(i==0 || i == n-1){
    return false
}

while(i+1 < n && A[i] > A[i+1] ){
    i++;
}
return i == n-1;

}
else{
return false
}
*
-> here A is Array.