teleren/devto huggingface dataset:
Callback Hell In JavaScript
Tags: javascript, beginners, programming, tutorial
Published: 2022-10-10 09:46:12

Callback hell is **a phenomenon that afflicts a JavaScript developer when he tries to execute multiple asynchronous operations one after the other**. **By nesting callbacks**
 in such a way, we easily end up with error-prone, hard to read, and hard to maintain code. Soln: Best code practice to handle it.

This is a big issue **caused by coding with complex nested callbacks**. Here, each and every callback takes an argument that is a result of the previous callbacks. In this manner, The code structure looks like a pyramid, making it difficult to read and maintain.

**⇒ Example of Callback Hell.**

1. Find User by username.
2. Find Posts by userId.
3. Find latest Post.
4. Find Comments by postId.
5. Find latest Comment.
6. Find User of the last Commented User.

→ Implementation.

- /users?username=[username]
- /posts?user_id=[user_id]
- /comments?post_id=[post_id]
- /users?username=[username]

```jsx
// GetData..
function getData(path, cb){
	const data = []; // Somehow collect the Data..
	cb(data);
}

function getUserNameFromComment(username){
	getData(`/users?username=${username}`, (user) => {
		getData(`/posts?user_id=${user._id}`, (posts) => {
			getData(`/comments?post_id=${posts[0]._id}`, (comments) => {
				getData(`/users?username=${comments[0].username}`, (user) => {
					// Then 😃 you can get latest user of comment.
					console.log(user);
				});
			});
		});
	});
}

getUserNameFromComment("Mohammad Asad");
```

### Real Life Example of Callback Hell.

- We used [https://jsonplaceholder.typicode.com](https://jsonplaceholder.typicode.com/users) this REST API website for using fake API to complete our example.
- And we used [Axios](https://axios-http.com/docs/intro) library to handle HTTP request.

```jsx
/// Real World Example with Fake REST API..
// Example of Callback Hell.
const Axios = require('axios').default;

const USERS_URL = 'https://jsonplaceholder.typicode.com/users';
const POSTS_URL = 'https://jsonplaceholder.typicode.com/posts';
const COMMENTS_URL = 'https://jsonplaceholder.typicode.com/comments';

function getFunc(URL, cb){
	Axios.get(`${URL}`)
		.then((response) => {
			const { data } = response;
			cb(data);
		});
}

function getCommentByUser(username){
	getFunc(`${USERS_URL}?username=${username}`, (user) => {
		getFunc(`${POSTS_URL}?userId=${user[0].id}`, (posts) => {
			getFunc(`${COMMENTS_URL}?postId=${posts[0].id}`, (comments) => {
				const firstComment = comments[0];
				console.log(firstComment);
			});
		});
	});
}

getCommentByUser("Samantha");
```

**So Let's see the solution of callback hell**
[Solution Of Callback Hell in JavaScript](https://dev.to/asadanik/solution-of-callback-hell-in-javascript-3p8e)
JavaScript Functions Deep Dive
Tags: javascript, programming, beginners, tutorial
Published: 2022-10-10 09:36:19

A function can also create with **new** keyword. And a function can assigning with multiple ways. And It’s called the Function Constructor. **Function** this is our function Constructor.

**⇒ Simple Function..**

```jsx
// Function define & defination..
function strToObj(str){
	let obj = new Object();

	for (let s of str){
		if (s !== ''){
			obj[s] = s;
		}
	}
	return obj;
}

// Invoking function with calling..
console.log(strToObj("Asad Anik"));
```

**⇒ Construct a function.** This mode is awesome to working and declaring function inside the Runtime😎. And the Runtime makes it the normal function as well. This also known as Runtime Function.

→ Similar function with **new** keyword like creating an Object or calling Class’s Constructor method. 

→ Syntax ⇒ **new Function(Arguments, Body);**

```jsx
// Actual function in JavaScript Behid the scense..
const strToObj = new Function(
	'str',
	`let obj = new Object();

	for (let s of str){
		if (s !== ''){
			obj[s] = s
		}
	}
	return obj;`
);

console.log(strToObj("Asad Anik"));
```

→ With multiple params. 

⇒ Syntax — **new Function(Argument1, Argument2, ….., Body);**

```jsx
// Multiple arguments..
const mySum = new Function(
	'a',
	'b',
	`
		const sum = a + b;
		console.log(sum);
	`
);

// Calling & Invoking..
mySum(20, 10);
```

→ Also can code like this way.

```jsx
// Take all data of function into an object.
const fData = {
	params: ['num1', 'num2'],
	body: ['const sum = num1 + num2', 'return sum']
};

// Bring body array to string body..
const fBody = fData.body.reduce((acc, cur) => {
	acc += cur + ';';
	return acc;
}, '');

// Calling Function Constructor..
const myOwnFunc = new Function(...fData.params, fBody);
console.log(myOwnFunc(20, 10));
```

## Multiple Operations Constructor Function.

```jsx
// Mutiple Operations Constructor Function..
const Operations = [
	{
		args: [10, 20],
		params: ['num1', 'num2'],
		body: `console.log("Operation 1:", num1 + num2)`
	},
	{
		args: [10, 20],
		params: ['num1', 'num2'],
		body: `console.log("Operation 2:", num1 - num2)`
	},
	{
		args: [10, 20],
		params: ['num1', 'num2'],
		body: `console.log("Operation 3:", num1 * num2)`
	},
	{
		args: [10, 20],
		params: ['num1', 'num2'],
		body: `console.log("Operation 4:", num1 / num2)`
	},
];

// Calling Stack..
Operations.forEach((operation) => {
	const fn = new Function(...operation.params, operation.body);
	fn(...operation.args);
});
```
在 App Inventor 中連續進行語音辨識
Tags: ai2
Published: 2022-10-10 09:13:54

App Inventor 內建有語音辨識元件, 不過以前因為這個元件會出現語音辨識的使用者介面, 而且如果逾時沒有說話, 也必須自己按按鈕才能繼續辨識語音, 在需要連續辨識語音的情境下並不適用：

![](https://i.imgur.com/qSK2T8E.jpg =300x)

但其實早在 2019/7/30 的 nb178 版本, 語音辨識元件就多了一個 `UseLegacy` 選項, 預設為勾選, 表示採用前述的使用者介面。如果不勾選, 就會暗中開啟麥克風辨識語音, 以下就來看看如何使用。

以下是我的簡易測試程式

![](https://i.imgur.com/HwfMmZT.png)

請記得加入語音辨識元件後取消勾選 `UseLegacy` 屬性。

在程式設計介面中, 當按下畫面上的 `StartRecog` 鈕後叫用`辨識語音`啟用語音辨識：

![](https://i.imgur.com/OuOi40P.png)

語音辨識元件會在辨識到內容時自動觸發 `辨識完成` 事件：

![](https://i.imgur.com/ykYqKWy.png)

不過要注意的是, 不勾選 `UseLegacy` 時這個事件會在辨識到部分內容時就被觸發,因此實際得到完整內容前會觸發多次, 必須在程式中檢查`部分` 參數, 其值不為 `真` 時才是辨識告一段落。

如果要終止辨識, 就要叫用`停止`：

![](https://i.imgur.com/xjU5lmM.png)

要特別注意的是, 如果超過時間沒有辨識到語音, 未勾選 `UseLegacy` 時會產生編號 3806 的錯誤：

![](https://i.imgur.com/lSwsXZZ.png)

如果不處理, 就會結束語音辨識, 如果希望能夠持續辨識, 就要自行再叫用 `辨識語音` 重新啟用語音辨識功能。

利用這樣的方式, 就可以達到完全不用再觸碰螢幕, 就可以一直辨識, 即使中間沒有講話, 也不會中斷辨識程序了。
You are front-end developer? This is for you, Sample Data API
Tags: javascript, webdev, beginners, programming
Published: 2022-10-10 09:14:09

Hello,

Today i am making this post for my new website which is based on sample data.

Here, I have created for the front-end developer. 

It can be useful to new beginners who has started learning new front-end tech, But they are not having ready to use APIs. Sampledataapi is providing a ready to use APIs.

It can be also get used to practice for APIs calls.

Test your front-end against a Real / Fake APIs

1. 24 / 7 Available
2. SSL Enabled
3. CORS Enabled
4. Sample Data API / Fake Data API
5. Real Response

A hosted ready to use REST-APIs.
Ready to respond to your mobile app / react-native / AJAX or any other requests

Complete signup and user profile APIs


Hey Guys please visit the site and share your valuable thoughts here.

Thanks.

Here is the link for it [Sample Data APIs](https://sampledataapi.com/)
How to manage permission in Github like a boss
Tags: productivity, opensource, github, go
Published: 2022-10-10 09:00:21

In all the companies I know, rights management on Github repositories was just hell. 

At [Formance](https://formance.com), we are starting to have more and more repositories on Github, and I often find myself having to add / remove rights to the developer to be able to push on a repository for example. 

After a while, this is no longer sustainable.

I started, a few days ago, a project in OpenSource that would allow me to manage easily and in a few minutes the different rights on the GitHub repository. 
**You can find it [here](https://github.com/flemzord/gh-manager).**

For more simplicity, the whole configuration is managed in a YAML file. (I am YAML Engineer)

In a future release, I would like to add a webhook that launches the addition of rights when creating a new repos on Github! And so be able to completely forget this kind of problem :) 

I'm looking forward to your feedback / comments / suggestions
Volume of lakes
Tags: google, discuss, algorithms, programming
Published: 2022-10-10 08:51:49

Given an array of positive integers representing 2-D bar heights, design an algorithm that can compute the total volume of water that could be held in all lakes on such an island given an array of the heights of the bars. Assume an elevation map where the width of each bar is 1 unit.
Example Given Array of heights [1,3,2,4,1,3,1,4,5,2,2,1,4,2], return 15 (3 bodies of water with volumes of 1,7,7 yields total volume of 15).

```
Input: [1,3,2,4,1,3,1,4,5,2,2,1,4,2]
Output: 15
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18fsbi09b7mknjr26fta.png)

####My Approach:
* Iterate the Array of heights.
 * Find maximumBefore(maximum height before the current height)
 * Find maximumAfter(maximum height after the current height)
 * `If` current is greater than maximumBefore or maximumAfter, update maximumBefore and continue, `else` the volume at current height will be `(minimum of maximumAfter, maximumBefore) - height`.

####CODE:
```javascript
var a = [1,3,2,4,1,3,1,4,5,2,2,1,4,2];
function getVolume (arr) {
    let maxBefore = 0;
    let answer = 0;
    let maxAfter = 2;
    for(var i = 1; i < arr.length-1; i++){
        if(arr[i] >= arr[maxBefore]) {
            maxBefore = i;
            continue;
        }
        if(i >= maxAfter){
            let max = i+1;
            for(var innerIndex =i+1; innerIndex< arr.length; innerIndex +=1) {
                if(arr[max]<=arr[innerIndex]) {
                    max= innerIndex;
                }
            }
            maxAfter = max;
        }
        if(arr[i] < arr[maxBefore] && arr[i] < arr[maxAfter]) {
            answer += Math.min(arr[maxBefore], arr[maxAfter])-arr[i];
        }
    }
    return answer;
}
let sol = getVolume(a);
console.log('volume of lakes: ',sol); //volume of lakes: 15
```
Let's discuss your approach in the discussion box or you can hit me up at aastha.talwaria29@gmail.com.

Thanks for reading.
Humble pie or grateful pie?
Tags: elixir, beginners, life
Published: 2022-10-10 08:47:26

Three weeks ago I did not know any Elixir at all.

Today, some of my classmates, as well as yours truly, sometimes experience feelings of frustration, impatience, self-doubt, or any combination of the above.

It is theoretically easy to see the sheer amount of progress and new learnings that we have incorporated in around three weeks.

Still, there is a part of us that considers that to not be enough.

Maybe not enough speed of assimilation. Not enough amount of knowledge. Not enough amount of fluency on the use of our new tools.

It has been said that we are eating plenty of humble pie in the last three weeks, and with that I have to agree.

The other side of the coin is also true: when was the last time we learnt this much in such a short period of time? When reflecting upon this, it may be a tool to put things in perspective, and to tame the parts of us that want instant results at the pace that we determine.

We will get there, gang.
Why you need to Hire Spring Boot Developer for your project?
Tags: springboot, webdev, programming
Published: 2022-10-10 08:40:00

An open-source custom application framework called Java Spring Boot enables programmers to create applications and programs that can function without the aid of a third-party web server. These spring projects are deployable with a single run command on any platform.
One can hire spring boot programmers from bacancy if you need Spring Boot applications developed quickly. We offer various packages with the top Java Spring Boot developers in India to meet your company's demands.
 

## Why Do You Need to Develop with Spring Boot?
Businesses may create and deploy lightweight applications more quickly thanks to Spring Boot. The following are a few of the main benefits of Spring Boot Development.
**Independent Application:** Standalone, ready-to-launch apps are what Spring Boot services are. They don't make use of an outside web server. Instead, internal servers like Tomcat or Netty will be integrated from step 1 to last final process of the development phase. Therefore, Java Spring Boot apps can run independently as hold programmes.

**Automatic Configuration:** A significant amount of development time is saved by Spring Boot's automatic configuration capability. Spring Boot will analyse your jar dependencies when you select a starter pack and will then automatically build the Spring implementation for you.
 
**Built-in Support:** It also incorporates a constructed support system for operations like type conversion, validation, exception handling, management systems, data binding, and exception handling. Therefore, managing spring book apps is much simpler.

As you can see, businesses can profit in a number of ways from Spring Boot development. To maximise your rewards, you must, however, work with the top developers. At this point, bacancy enters the picture. With bacancy, you can engage developers quickly and easily without making any upfront payments. View the surprises we have in waiting for you.
 

## Why Hire Java Spring Boot Developer From Bacancy?
Below are a few of the key characteristics of our Spring Boot business solutions.
**Full-scale Development:** At Viithiisys, we provide full-scale Spring Boot development services. You can employ our developers for just any project, no matter how big or minor, and we'll complete it flawlessly.
**Dedicated Hiring:** With us, you hire devoted developers who will collaborate with you on your project as an internal team, resulting in quicker development and higher quality.
**Flexible Packages:** You just pay for the solutions you select when you engage specialised spring boot developers. You can do it on a full-time, part-time, or even an hourly basis. You can employ the labour you require for the timeframe you require.

So, get in contact with us and [Hire springboot Developers](https://www.bacancytechnology.com/hire-spring-boot-developer) in just 48 hours and begin your project with teh positive note.
MySQL Sample Database: Sources, Installation, and Basic CRUD Operations
Published: 2022-10-10 08:34:13

---
title: MySQL Sample Database: Sources, Installation, and Basic CRUD Operations
published: true
description: Where and how you can use MySQL Sample Database
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
Before implementing any new software solution, it must be properly tested against the database at full workload. In this case sample databases are the best option, and in this article we will look at where and how you can successfully use them in your projects - https://www.devart.com/dbforge/mysql/studio/mysql-sample-database.html
opnGauss SQL Syntax - View
Published: 2022-10-10 08:06:43

define view 

⚫ A view is a virtual table derived from one or several basic tables, which can be used to control user access to data. The SQL statements involved are shown in the following table.

⚫ Description: 

 The view is different from the basic table. The database only stores the definition of the view, not the data corresponding to the view. These data are still stored in the original basic table. 

 If the data in the basic table changes, the data queried from the view also changes. 

 In this sense, a view is like a window through which data and changes in the database of interest to the user can be seen.

Create a view 

⚫ Syntax

CREATE [ OR REPLACE ] [ TEMP | TEMPORARY ] VIEW view_name [ ( column_name [, ...] ) ] [ WITH ( {view_option_name [= view_option_value]} [, ... ] ) ] AS query;

⚫ Example: 

 Create the view privilege_view and update the view if it exists.

postgres=# CREATE OR REPLACE VIEW privilege_view AS SELECT b_number, b_type FROM bank_card;

 View the data in the view, the syntax is the same as the query table.

postgres=# SELECT * FROM privilege_view;

 View the view structure.

postgres=# \d privilege_view;

delete view 

⚫ Syntax

DROP VIEW [ IF EXISTS ] view_name [, ...] [ CASCADE | RESTRICT ];



⚫ Parameter description 

 IF EXISTS 

◼ If the view exists, delete it. 

 view_name 

◼ The view to be deleted. 

 CASCADE | RESTRICT 

◼ CASCADE: Cascading delete objects that depend on this view (such as other views). 

◼ RESTRICT: Refuse to drop this view if any dependent objects exist. This option is the default. 

⚫ Example

postgres=# DROP VIEW IF EXISTS privilige_view;
How to Implement Passwordless Authentication in Next.js
Tags: password, passwordless, authentication, nextjs
Published: 2022-11-01 06:42:24

---
title: How to Implement Passwordless Authentication in Next.js
published: true
date: 2022-10-10 08:03:58 UTC
tags: password, passwordless, authentication, nextjs
canonical_url: https://mojoauth.com/blog/how-to-implement-passwordless-authentication-in-next.js/
---

What is Passwordless Authentication? Passwordless Authentication is a way of authenticating your users without any passwords. Instead, it uses email, phone number, or biometrics as the identifier. Passwordless authentication can also be used as 2-factor authentication since the email, phone number, or biometrics is something you have. Passwordless authentication eliminates the password need and hence is a better choice of authentication. As the user creates accounts on multiple sites, the complexity of remembering passwords keeps increasing for them.

[Read On](https://mojoauth.com/blog/how-to-implement-passwordless-authentication-in-next.js/)
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2022-10-10 08:00:17

---
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/5e1258f2759b6.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:___ What did the server say to his client who was having a bad day?

___A:___ Everything's going to be 200
 -->
Oracle Index: CREATE, DROP, RENAME – Guide with Examples
Tags: oracle, database
Published: 2022-10-10 07:59:27

---
title: Oracle Index: CREATE, DROP, RENAME – Guide with Examples
published: true
description: Indexes are one of the most popular means of tuning the performance of an Oracle database.
tags: #oracle #databases
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
Let's take a closer look at the process of creating various indexes in Oracle - https://blog.devart.com/create-oracle-index.html
Insight into QuickBooks install diagnostic tool
Tags: javascript
Published: 2022-10-10 07:56:12


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24hb41f2qsjdvalm49wm.png)
QuickBooks install diagnostic tool is a tool specially designed to diagnose and fix the errors that could be faced while installing the software. This tool is used to diagnose as well as fix the annoying install errors. It can also be used for fixing the issues related to .Net Framework, C++, and MSXML. This tool ensures that the QuickBooks installation is commenced without any kinds of delay. To know more about this amazing tool, you can read the blog post till the end, or you can also contact us at +1-888-351-0999. Our team of QuickBooks professionals will provide you with the best possible information and service. 

Also Read: [Fix QuickBooks script error](url=https://www.axpertaccounting.com/fix-quickbooks-script-error/)

Fix errors with QuickBooks Install Diagnostic tool
1.	Verify and diagnose the Connection tab 
The connection tab can be used to examine the system. Also, it can help the users in setting up the QuickBooks company data file. 
2.Examine the firewall status
This tool caters the relevant information on the firewall status, which helps the QuickBooks users to take the necessary action as considering the provided information.
 
3.Analyzes the connectivity 
This tool also overviews the connectivity and helps the users in analyzing the workstation connectivity. 
4.Reinstall in a selective start-up mode 
At times, the third party apps just like anti-virus and anti-spyware programs might create certain problem with the QuickBooks desktop installation. Thus, in order to rectify the issue, it is essential to carry out the installation process in the selective mode. Also, the selective mode will start the windows with a few selected items running in the system. 
The discussion on the [QuickBooks install diagnostic tool](url=https://www.axpertaccounting.com/quickbooks-install-diagnostic-tool/) can be endless. Thus, we recommend you to discuss any of your queries associated with QuickBooks install diagnostic tool with our [QuickBooks Pro support team](url=https://www.axpertaccounting.com/). Just ring up at +1-888-351-0999, and our seamless team will provide you with the most relevant information.
Complete Guide to install mongdb driver for XAMPP PHP
Published: 2022-10-10 07:20:45

**<u>Step 1:</u>**
Make sure that have downloaded an install the mongodb community edition if not download it from 

https://www.mongodb.com/try/download/community2

**<u>Step 2:</u>**

Download the Mongodb PHP extension file from
https://pecl.php.net/package/mongodb

For Windows Users click the DLL button to download the Windows version of the extension
Make sure to download the file according to your PHP version.


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


**<u>Step 3:</u>**
Copy the downloaded php_mongodb.dll file to 
C:\xampp\php\ext


**<u>Step 4:</u>**
Add the extension in php.ini File

**method 1:** open the php.ini file selected from xampp config and select php.ini

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

Find extension=php_

and add line 
extension=php_mongodb.dll

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


**method 2:** open the php.ini file from C:\xampp\php\php.ini and follow the process from method 1.

**<u>Step 5:</u>**

create a testfile.php in folder C:\xampp\htdocs\

and add the code 

<?php phpinfo(); ?>

and check if the mongodb extension is installed.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xbdlymyo4xhc6bmnwt9.png)
Get selected Radio button Dynamically using JS
Tags: javascript, html, radiobutto, webdev
Published: 2022-10-10 07:05:55

Explained about how to create Radio button,have radio button checked default , group radio buttons and show selected radio button programatically.

Timeline :
-------------------------------------------------------------
00:00: Whats in Video
00:12: Create Radio Buttons
01:00: Check radio button by default
01:16: Group Radio Buttons
02:00: Get Selected Radio Button using JS
04:13 Show selected gender

{%youtube pF2AOQkoM0s%}