teleren/devto huggingface dataset:
2 Python Project Ideas for Beginners
Tags: python, beginners, programming, womenintech
Published: 2022-05-01 09:43:11

### 1. Text Detection and Extraction using OpenCV and OCR.

OpenCV (Open source computer vision) is a library mainly aimed at real-time computer vision, in python it helps to process an image and apply various functions e.g. pixel manipulations, object detection, etc. For this project using contours to detect the text in an image and save it to a text file.

#### Requirements
```PYTHON
conda install -c conda-forge opencv
conda install -c conda-forge pytesseract
```
##### Coding
I will use the following sample image:

![Sample image for text detection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fp6dx9mhfpv3848tv1b.jpeg)
```PYTHON
import cv2
import numpy as np
import pytesseract as pyt

image = cv2.imread('The_Zen_of_Python.jpeg')

# image convertion to grey scale
image_gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
image_gray, binary_image = cv2.threshold(image_gray, 128,255, cv2.THRESH_BINARY)
image_gray =cv2.bitwise_not(binary_image)

kernel = np.ones((2,1), np.uint8)
image = cv2.erode(image_gray, kernel,iterations = 1)
image = cv2.dilate(image_gray, kernel,iterations = 1)
```
The next code will convert the image into a string and print the string as text.

```PYTHON
# image conversion into string
image_text = pyt.image_to_string(image)

print(image_text)
```
Check out the video of the project above -[Project video](https://www.linkedin.com/posts/ochwada-l-66630a36_python-code-python-activity-6923530327688658944---ys?utm_source=linkedin_share&utm_medium=member_desktop_web)

### 2. Stock Price Visualisation using Yahoo's yfinance .

**yfinance** is an open source library developed by [Ran Aroussi](https://aroussi.com/) as a means to access the financial data available on Yahoo Finance.

Yahoo Finance offers a wide range of market data on stocks, bonds, currencies and cryptocurrencies. In addition it offers market news, reports and analysis and fundamentals data- setting it apart from some of it’s competitors.

#### Requirements
```PYTHON
pip install yfinance
conda install -c conda-forge pandas
pip install plotly-express
```
##### Coding
```PYTHON
import yfinance as yf
import pandas as pd
import datetime 
from datetime import date, timedelta

today = date.today()

date1 = today.strftime("%Y-%m-%d")
end_date = date1

date2 = date.today() -timedelta(days = 365)
date2 = date2.strftime("%Y-%m-%d")
start_date = date2 

data = yf.download ( 'AAPL', 
    start = start_date, 
    end = end_date,
    progress = False)
print(data[:10])
```
Visualise your Stock price data using [Plotly Express](https://pypi.org/project/plotly-express/). This visualisation will prompt a new window to open in your browser with up todate data.
```PYTHON
import plotly.express as px 
fig = px.line(data, x = data.index, 
                y = "Close", 
                title = "Stock Price data")
fig.show()
```
My experience with Angular
Tags: javascript, webdev, react, angular
Published: 2022-05-01 09:42:32

####My Frontend Knowledge
I am familiar with react. I have mostly used react with functional component, hooks and react router. I am aware of class based components and redux but never used them.

####My experience with Angular
I was recently checking a open source project that is using angular for their dashboard. I wanted to contribute to the frontend part of that open source project but before that I had to learn angular. I started learning angular from their official docs and their [tutorial](https://angular.io/tutorial). It is overwhelming. The amount of concepts you have to understand before writing a slightly complex app is too much. Angular CLI creates a whole lot of files and folders that also makes it very hard navigate. I have been learning and experimenting with angular for last 2 weeks but still it is very confusing to me. I was hoping that it will be a easy for me to understand angular because of my previous experience in react. Maybe it will take more time for me to have a solid understanding of Angular. But for now I am taking a break from angular.
100 days of interview questions series!
Tags: javascript, react, mysql, career
Published: 2022-05-01 09:41:26

The tech world is currently buzzing with a lot of recruitment moves! So the chances are the majority of those who are reading this blog are either already actively looking for new opportunities or preparing to do so!

Preparing for an interview can be a bit hard! Especially when you are already working full-time. There may be a lot of things you want to prepare and yet have so little time and in the end, overwhelmed by the enormity of the task, we may end up binging Netflix instead. (Not me and I definitely didn't get hooked up on "The Office". lol)

So in order to reduce the complexity of this task, we need to reduce it to small actionable steps!

That's the reason for the inception of this blog series! We will be discussing 1 interview question a day from java/javascript/MySQL/ReactJS and possibly more, designed to be a short byte-sized content, which you can peep through every morning!

Hop in!

cover image-@itsprasa twitter.
DevBook Social Media App build with flutter and appwrite [Update]
Tags: appwritehack, flutter
Published: 2022-05-01 09:40:53

[Instructions]: # (To submit to the Appwrite Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
I created social media app called devbook using flutter and appwrite. I found appwrite is a firebase alternative ,so i tried to build app with it.


### Submission Category: 

**Mobile Moguls**


### Link to Code
{% embed https://github.com/b14cknc0d3/devbook_flutter.git %}

### APP LINK
Note I hosted appwrite on single core vps.It will be slow!!!!
[DevBook.apk](https://www.mediafire.com/file/xrfpuk9daikt1k7/app-release.apk/file)


### Additional Resources / Info


![DevBook Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cavgf7pbtgmv1wnfxmnu.png)

![DevBook Image2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51s6a8oa6wsiktszzfte.png)

![DevBook Image3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/raoxwtgtyg4kikfxknlk.png)


![DevBook Image4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pawyamk2jz8s9i4wz3ji.png)


![DevBook Image5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8xx3bul2z4qy864xlen.png)

[VIDEO](https://vimeo.com/705040961)
CSS Gradient Generator Tool
Tags: webdev, productivity, javascript, css
Published: 2022-05-01 09:32:15

Published CSS Gradient Generator Tool on [Design Drastic](https://designdrastic.com/).
Do check it out and comment your thoughts/suggestions.

Link: [CSS Gradient Generator Tool](https://designdrastic.com/tool/gradient-generator)

![CSS Gradient Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7bwaghsgjlzpj1gg1mn.png)

![CSS Gradient Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhkn6k9w43c1df79ot6u.gif)
Have you ever thought that your life is complete?
Tags: news, discuss, productivity, talktime
Published: 2022-05-01 09:29:59

## Talk Time :D

- Have you ever thought that your life is complete?
- If yes, how do you think life came to be complete?
- Otherwise, what do you think will make your life complete?

---

So far I have never feel like that!
I have no idea what will complete my life 😅
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2022-05-01 08:00:21

---
title: "A Fun Programming Joke To Start Your Day"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258b057385.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why did the functions stop calling each other?

___A:___ Because they had constant arguments.
 -->
কেন আমরা টুলস হিসেবে লারাভেল ব্যবহার করি?
Tags: howtolearn
Published: 2022-05-01 09:11:07

ধরেন আপনি মাটি কাটা শিখবেন। কিন্তু আপনি নিশ্চয়ই মাটি কিভাবে কাটতে হয়, এই জন্য মাটি কাটা শিখবেন না। 
তাহলে? আপনার হয়তো একটা গাছ লাগানো লাগবে অথবা আপনার হয়তো জৈব সার বানানোর জন্য একটা গর্ত খোঁড়া লাগবে। তেমনি আপনি লারাভেল কিভাবে কাজ করে সেই জন্য লারাভেল শিখবেন না। বরং লারাভেল দিয়ে কোন একটা সমস্যা সমাধান করার জন্যই আপনি লারাভেল শিখবেন।
যেমন আপনি হয়তো কিছু অসাধারণ কুকি তৈরি করেন যা এখন আপনার এলাকায় সারভ করতে চাচ্ছেন যার জন্য একটা সিম্পল ওয়েবসাইট দরকার। লারাভেল আপনাকে খুব দ্রুত এই কাজটা করতে সাহায্য করবে।
তাই টুলস শেখার জন্যই শিখেন না। বরং তা দিয়ে কিছু একটা করার জন্য শিখেন।
Angular Extract Csv From Spreadsheet
Tags: angular
Published: 2022-05-01 08:57:57

Hello,

What my options are for extracting from excel/ods into Csv, and then processing that Csv to add a new column?

Fairly new to angular but confident using what I know. I am looking for options which won't cost anything as this project is a small free one im volunteering on. It won't make any money.

I have been looking on stack overflow and the web generally but it's a little confusing.

Many thanks in advance
Slack App Home Tab
Tags: slack, boltjs, hometab, apphomeopend
Published: 2022-05-01 08:50:14

https://github.com/slackapi/bolt-js/issues/308

When you want to show a home tab on your Slack App using bolt-js, the event handler `app_home_event` in your app.js won't work until your app subscribes 'app_home_opend' event.
Log API request and response in Nodejs
Tags: node, logging
Published: 2022-05-01 08:49:44

Logging helps us to debug our application and solve the issue easily. Before we added logging in backend we used to face problems in reproducing the bug related to API requests and responses. We used the logging tools to log the request and responses of the APIs. Loggly is a cloud-based log management tool. You can create a free account [here](https://www.loggly.com/). While creating an account it asks for the subdomain name that you need later. After creating an account, you have to set up the source. 

![loggly source setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khi3n1rmuvj7mf99i306.png)
We are using Nodejs in the backend, so we selected the Nodejs as the source. 

![source selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37otdjz1hvirx8i2plr2.png)
The custom token is required to initialize the Loggly. You will get it in the custom tokens tab. 

![token select](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ez253ihpkrf079mfy9j.jpg)

Once the account setup is completed, let's start integrating it into our code. We can install the Loggly using the `npm install winston-loggly-bulk`. We will need the subdomain and token to initialize the Loggly. 

```
const winston = require('winston');
const { Loggly } = require('winston-loggly-bulk');
winston.add(new Loggly({
  token: 'custom token',
  subdomain: 'sub domain',
  tags: ['Winston-NodeJS'],
  json: true,
}));

```
Now use the log to log the request and response of the api.

```
const winston = require('winston');
      winston.log('info', {
        url: `${req.protocol}://${req.get('host')}${req.originalUrl}`, body: req.body, method: req.method, response: res('response sent to the user'),
      });
```
If everything is done correctly, you can see the logs from the log explorer

![explorer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pur8qpchhxt6p82vodzk.png)


![dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/561pptrb8zlwbf4ue8x0.png)
Designing Google Cloud Networks
Tags: googlecloud, networkdesign, bestpractices, considerations
Published: 2022-05-01 08:25:17

Designing your Google 𝙘𝙡𝙤𝙪𝙙 𝙣𝙚𝙩𝙬𝙤𝙧𝙠 can be a critical part of your cloud journey. 𝙃𝙤𝙬 𝙩𝙝𝙚 𝙛𝙞𝙣𝙖𝙡 𝙙𝙚𝙨𝙞𝙜𝙣 𝙡𝙤𝙤𝙠𝙨 will depend on your own use case. Thinking ahead can save you some time and help avoid potential issues in the future. 𝙏𝙝𝙚𝙨𝙚 𝙩𝙚𝙣 𝙩𝙞𝙥𝙨 𝙥𝙧𝙤𝙫𝙞𝙙𝙚 𝙨𝙤𝙢𝙚 𝙞𝙣𝙨𝙞𝙜𝙝𝙩 𝙞𝙣𝙩𝙤 𝙝𝙚𝙡𝙥𝙞𝙣𝙜 𝙮𝙤𝙪 𝙙𝙚𝙨𝙞𝙜𝙣 𝙖 𝙗𝙚𝙩𝙩𝙚𝙧 𝙘𝙡𝙤𝙪𝙙 𝙣𝙚𝙩𝙬𝙤𝙧𝙠 𝙖𝙧𝙘𝙝𝙞𝙩𝙚𝙘𝙩𝙪𝙧𝙚 from the beginning.

( 1 ) ➡️ 𝘼𝙪𝙩𝙤 𝙢𝙤𝙙𝙚 𝙣𝙚𝙩𝙬𝙤𝙧𝙠 𝙤𝙧 𝙘𝙪𝙨𝙩𝙤𝙢 𝙣𝙚𝙩𝙬𝙤𝙧𝙠

( 2 ) ➡️ 𝙎𝙝𝙖𝙧𝙚𝙙 𝙑𝙋𝘾 𝙤𝙧 𝙑𝙋𝘾 𝙉𝙚𝙩𝙬𝙤𝙧𝙠 𝙋𝙚𝙚𝙧𝙞𝙣𝙜

( 3 ) ➡️ 𝙑𝙋𝙉 𝙤𝙧 𝙣𝙤 𝙑𝙋𝙉
https://lnkd.in/ereBQj3f

( 4 ) ➡️𝙒𝙝𝙞𝙘𝙝 𝙄𝙣𝙩𝙚𝙧𝙘𝙤𝙣𝙣𝙚𝙘𝙩 (𝙙𝙚𝙙𝙞𝙘𝙖𝙩𝙚𝙙 𝙤𝙧 𝙥𝙖𝙧𝙩𝙣𝙚𝙧)

( 5 ) ➡️ 𝙊𝙧𝙜𝙖𝙣𝙞𝙯𝙖𝙩𝙞𝙤𝙣 𝙥𝙤𝙡𝙞𝙘𝙮 𝙖𝙣𝙙 𝙑𝙋𝘾 𝙨𝙚𝙧𝙫𝙞𝙘𝙚 𝙘𝙤𝙣𝙩𝙧𝙤𝙡𝙨

( 6 ) ➡️ 𝘽𝙧𝙞𝙣𝙜 𝙮𝙤𝙪𝙧 𝙤𝙬𝙣 𝙄𝙋 (𝘽𝙔𝙊𝙄𝙋)

( 7 ) ➡️ 𝘿𝙉𝙎

( 8 ) ➡️ 𝙇𝙞𝙢𝙞𝙩 𝙚𝙭𝙩𝙚𝙧𝙣𝙖𝙡 𝙄𝙋 𝙖𝙙𝙙𝙧𝙚𝙨𝙨 𝙪𝙨𝙖𝙜𝙚
https://lnkd.in/e56PcZ5U

( 9 ) ➡️ 𝙄𝙋 𝙖𝙙𝙙𝙧𝙚𝙨𝙨 𝙢𝙖𝙣𝙖𝙜𝙚𝙢𝙚𝙣𝙩

( 10 ) ➡️ 𝙃𝙤𝙬 𝙙𝙤𝙚𝙨 𝙛𝙖𝙞𝙡𝙪𝙧𝙚 𝙡𝙤𝙤𝙠 𝙞𝙣 𝙢𝙮 𝙚𝙣𝙫𝙞𝙧𝙤𝙣𝙢𝙚𝙣𝙩?

Thanks to Ammett Williams and Jens Kuehlers for their blog post
10 𝙘𝙤𝙣𝙨𝙞𝙙𝙚𝙧𝙖𝙩𝙞𝙤𝙣𝙨 𝙩𝙤 𝙝𝙚𝙡𝙥 𝙮𝙤𝙪 𝙙𝙚𝙨𝙞𝙜𝙣 𝙘𝙡𝙤𝙪𝙙 𝙣𝙚𝙩𝙬𝙤𝙧𝙠𝙨
https://cloud.google.com/blog/topics/developers-practitioners/10-considerations-help-you-design-cloud-networks

𝙎𝙩𝙖𝙮 𝙩𝙪𝙣𝙚𝙙 𝙗𝙮 𝙛𝙤𝙡𝙡𝙤𝙬𝙞𝙣𝙜
https://www.linkedin.com/feed/hashtag/didAbRyouAbRknowAbRthat/


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1712rg5xodgkirbfb9iz.png)
A new way to construct/debug Arrays
Tags: javascript, showdev, productivity, devtool
Published: 2022-05-01 07:38:15

A few days back while I was working I wrote a long block of code that made use of map, reduce & filter. Without testing I finished the code assuming it's gonna work but it broke. I had to console.log every operation to debug it. It was a minor issue, but I spent more time debugging it as I had to convert every shorthand arrow function to a regular function, log it, & revert it back after fixing it. 



I couldn’t find a tool that matched my needs. So I thought of making it.



**‘Array Builder’** - A free tool to visualize the output of array operations

Provide an array, write code inside map/reduce/filter blocks & see the results live in the adjacent column. 

It simplifies writing blocks of code & debugging chained operations.



It was a small interesting weekend project & I am launching it today.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezbkp6qjz85r79dj8e1o.gif)


[Demo](https://www.youtube.com/watch?v=acNBogMEbOg) • [Product Hunt](https://www.producthunt.com/posts/array-builder)

[arraybuilder.com](https://www.arraybuilder.com)


Hope it brings some value
Thanks :)

---
Few other projects:
* [Fireboard](https://bit.ly/fireboardapp) - A work tracker for software developers
* [File Ops](https://bit.ly/file-ops) - A VS Code extension to easily tag/alias files & quick switch between files
* [Code Drops](https://bit.ly/codedrops-tech) - Micro-blogging on Web development
Simple Deployment with Bash Script
Tags: bash, devops
Published: 2022-05-01 07:34:11

Automate common commands used for deployment is very useful to simplify deployment process. One of my project have the following set of commands used for deployment.

```bash
#!/usr/bin/env bash

echo "Navigate to project directory..."
cd /var/www/project
echo "Pulling codes..."

git fetch --tags
tag=$(git describe --tags `git rev-list --tags --max-count=1`)
echo "Checkout latest tag"
git checkout $tag

echo "Install dependencies..."
y | composer install

echo "Clear config caches..."
php artisan config:clear
echo "Clear view caches..."
php artisan view:clear

echo "Change project ownerhship to www-data..."
chown www-data:www-data /var/www/project -R

clear
```

You may want to add SSH key to your project repository, to skip Git ask for credentials.

**Idea for Enhancements**

I may want to automate deployment from [release](https://docs.github.com/en/developers/webhooks-and-events/webhooks/webhook-events-and-payloads#release) event. 

On released, Github would send webhook to my webhook handler, to run the above script. But I might need a server which handle the webhook and handle internally connect to respective nodes to execute the deploy script I've created above.

1. Additional server to handle Github Webhook
2. Webhook handler server should be able to SSH to respective app servers to login and run deploy script.
3. Each app servers require SSH key to be add to Github repository.

Basically the flow as following:

Github Webhook > Webhook Handler > App Servers

Since this project is on client's premise, I would definitely require to request to have additional server to handle any incoming Github Webhooks. 

Photo by [Annie Spratt](https://unsplash.com/@anniespratt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/working?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
How to convert any existing website into a mobile app
Tags: reactnative, expo, android, ios
Published: 2022-05-01 07:17:26

Today we will discuss how to convert a website into a mobile app and here mobile app doesn't mean that it is only Android or iOS. We will be discussing cross-platform mobile apps and this app will run on both Android and iOS using the same code. You don’t have to code both apps separately. Also, you can build an iOS app without any macOS device. 

So for this post, we have chosen the [WebOS app template][webos]. [WebOS app template][webos] is a mobile app template that allows us to easily convert an existing website into a cross-platform mobile app and not only that it has some amazing features too (one-click push notifications, Google Admob support, FaceBook Audience Network support, etc). 

Who can use [WebOS app template][webos] for their site?
Well, [WebOS app template][webos] is for anyone who wants to:
Grow his brand or,
Have a PWA website or,
Grow daily page views or,
Earn more from app Monetization

What technology doess [WebOS app template][webos] use?
[WebOS app template][webos] uses the latest version of [React Native][react] and [Expo][expo]. 

The fun fact about [WebOS app template][webos] is that anyone who doesn’t know [React Native][react] and [Expo][expo] can also use it as no coding experience is required. You just have to simply edit clues from the JSON file to make your app ready to launch. And their documentation is also awesome and easy to understand. Anybody who knows English can understand their documentation.


And to build an app you will be needing only a device that will allow you to edit the code.

Just there is only one con of this [WebOS app template][webos] and this is that [WebOS app template][webos] is not OpenSource and you need to buy it from [CodeCanyon][webos]. 

But if we see it has more pros than it cons and also the developers are very friendly and helped me whenever I was facing any issue. So, you can also give it a try to convert your existing website into a cross-platform mobile app using it and if this post helps you to convert your website into an app don't forget to share your app link in the comment section.


[webos]:https://cutt.ly/webos
[docs]:https//webos.softisia.com

[react]:https://reactnative.dev
[expo]:https://expo.dev
The top 10 AWS architecture built with Qovery in 2022
Tags: aws, devops
Published: 2022-05-01 06:41:52

We are in May 2022, and hundreds of startups have built their infrastructure on AWS using Qovery. Check out [this guide](https://www.qovery.com/blog/the-top-10-aws-architecture-built-with-qovery-in-2022) where I share the 10 best (and fancy) AWS architectures our users have made.

https://www.qovery.com/blog/the-top-10-aws-architecture-built-with-qovery-in-2022
Net Core postgreSQL connection string on windows 10
Tags: postgres, dotnet, csharp
Published: 2022-05-01 05:38:04

**Prepare knowledge**:

- The file “pg_hba.conf” control whether password or not:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4en5fxfhqoz1wpcw3nre.png)

- Find server port number at pgAdmin4:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4ts7qcw611kycka8oyv.png)

- Restart PostgreSQL server: 
typing “services.msc” on Run and Enter key.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xc075fza31a0tqmb9xpi.png)


**config password Steps:**

- find the file pg_hba.conf;
- Back it up;
- place the following line
```
local all all trust
```

- restart your PostgreSQL server

- you can now connect as any user. Connect as the superuser postgres
```
>psql -p 5433 -U postgres
``` 
- Reset password ('replace my_user_name with postgres since you are resetting postgres user)
```
ALTER USER my_user_name with password 'my_secure_password';
ALTER USER postgres with password 'pass@2022';
```

- Restore the old pg_hba.conf as it is very dangerous to keep around

- Restart the server, in order to run with the safe pg_hba.conf.

**Result:**
The ConnectionString is "Host=localhost;Port=5433;Username=postgres;Password=pass@2022;Database=dvdrental;";

**Dos Commands:**
```
>cd C:\Program Files\PostgreSQL\14\bin>
>psql -p 5433 -U postgres
postgres=# ALTER USER postgres with password 'pass@2022';
```
It worked!
The end!
Top JavaScript Tips
Published: 2022-05-01 05:26:48

As one know that our IT Industry is nothing without JavaScript. JavaScript plays a very important role in the development of Websites, Mobile App, Desktop Apps etc.

Also, it's not possible to master JavaScript or any other language. So today, I come up with the **Tricks and Tips**  of JavaScript that help in my career for Software Development.


So let's go with Jungkook 🧡 , 

<img width="100%" style="width:100%" src="https://media.giphy.com/media/LMQy30J8SFirRfOFd5/giphy.gif">

**TOP TRICKS AND TIPS :**

**Flatten the array of the array :** In this, we will learn about how to flatten a deeply nested array of arrays by using Infinity in flat.

```
var array = [1, 2, [3,4,5,[6,7,8[9,10]]]];
//flatten array of array
array.flat(Infinity)

//Output
// [1,2,3,4,5,6,7,8,9,10]
```

**Alphabetically Sorting:**  As we know that for sorting we have to write a long code and use different algorithms like Bubble, Insertion, Merge Sort etc. But one can sort an array of alphabets in just 2 lines of code. 

```
let array = ["j", "u", "n", "g", "k", "o" ,"o" ,"k"];
console.log( array.sort((a, b) => a.localeCompare(b)));

// Output 
['g', 'j', 'k', 'k', 'n', 'o', 'o', 'u']
```
 
**Performance  Calculation :**  This tip I personally used to calculate the performance of JavaScript Program.

```
const {performance} = require('perf_hooks');
const starttime = performance.now();
let array = ["j", "u", "n", "g", "k", "o" ,"o" ,"k"];
console.log( array.sort((a, b) => a.localeCompare(b)));

const endtime = performance.now();
const totaltime = starttime - endtime
console.log("This takes "+totaltime +" milisecond");

//OUTPUT 
[ 'g', 'j', 'k', 'k', 'n', 'o', 'o', 'u' ]
This takes -6.933455999940634 milisecond
```

**Use === instead of = :**  The == (or !=) operator performs an automatic type conversion if needed. The === (or !==) operator will not perform any conversion. It compares the value and the type, which could be considered faster than ==.

```
[5] === 5   // is false
[6]  == 6    // is true
'1' == 1     // is true
'1' === 1    // is false
 []   == 0     // is true
 [] ===  0     // is false
 '' == false   // is true but true == "a" is false
 '' === false // is false 
```

**Sum all the values from an array :** As we know that for getting Sum of array we have to use **for**  loop. But with this shortcut, no more use of loop is need. It's just done with 2 lines of code.

```
var numbers =[1,2,3,4,5,6,7,8,9,10];
console.log(numbers.reduce((x,y) => x+y))

//Output
55
```

That's all for this post, me with **BTS meme's** come with the next part of JavaScript Tips and Tricks soon.