teleren/devto huggingface dataset:
React js
Published: 2021-12-22 14:20:07

				
	 In React js proptypes are a mechanism to ensure components use the correct data type to pass the right data that components use the right type of props that receiving components receive the right type of props.
				State-props
 props are variables passed to its parent component .In React  State on the other hand is still variables and its  directly initialized and managed by the component. The state can be initialized by props in React js.
				JSX
   Jsx is a react element which looks like html but it is not html.Behind the seen it world link javascript

                                         Component Lifecycle
   Component life cycle methods mean  which we can monitor and manipulate during its three main phases. The three phases are mounting, updating , unmounting.

				Hooks

Hooks are functional   and lifecycle features from function components. Hooks don't work inside classes; it let you use react without classes.we  can also create our own Hooks to reuse stateful behavior between different components.
				custom hooks

In React js   custom Hooks are a part  to reuse stateful logic  and every time you use a custom Hook, all state and effects inside of it are fully isolated. Each call to a Hook gets isolated state
				context API

In React js context api  is a way for a React app to effectively produce global variables which can be passed around. This is the alternative to prop drilling nad  moving props from grandparent to child to parent  or so on. Context is also touted as an easie rand  lighter approach to state management using Redux.
 
		           	React js

React js is a frontend framework that is most  popular nowadays.it is a very powerful framework .We can make single page web application using react js .Its give use so many powerful tools.It is developed by facebook React makes it painless to create  awesome ui design . Design is a  simple view  for each state in your application , React will efficiently update and render just the right components   your data changes.react. js is an open-source JavaScript library which is used for building user interfaces specifically for single-page web  applications
Mentoring Junior Developers
Tags: podcast, beginners, webdev
Published: 2021-12-22 14:17:44

{% spotify spotify:episode:4dzki7eMuXyJPO43w7A9Y4 %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://podcast.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.

## Announcements

The **Svelte for Beginners** Udemy course is now live! Mike took his experience in teaching and learning Svelte and created a course. 

This course will teach you the fundamentals of JavaScript frameworks. 

**Get it now on Udemy!** 👇

[Svelte For Beginners](https://www.udemy.com/course/svelte-for-beginners/?couponCode=HATTSALE)

## What's This One About?

Mentors are key to a junior developer's success. They can help you learn skills a lot faster, can guide you to which skills to learn in the first place, or can even help in avoiding common pitfalls like tutorial hell. Just like teaching, mentoring can be done in a variety of ways - some better suited for certain types of learners than others. In this episode, Matt and Mike discuss all the ins and outs of mentoring, including giving code reviews, various teaching types, and much more.


## Show Notes


-   Urge them to stand out
    

-   Don’t hand hold but shift focus

    

-   Allow them to talk
    

-   Pair programming
    

-   Connect
    

-   Level up passed Junior
    
 

## Thank you!

If you're enjoying the podcast consider giving us a review on [Apple Podcasts](https://podcasts.apple.com/us/podcast/html-all-things-web-development-web-design-small-business/id1412209136) or checking out our Patreon to get a shoutout on the podcast. 

**[Support us on Patreon](https://www.patreon.com/htmlallthethings)**


You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[TikTok (Html All The Things)](https://www.tiktok.com/@htmlallthethings)
Using Promise.race usefully
Tags: javascript, webdev, beginners, programming
Published: 2021-12-22 14:16:14

When doing long running tasks like :-

1. DB query which may take long time
2. Reading big files
3. API which may take long time to complete
4. Waiting for some event

You may want to stop if the task is taking more time than usual to get completed. In that case `Promise.race` can be useful.

> [Puppeteer](https://github.com/puppeteer/puppeteer/blob/main/src/common/FrameManager.ts#L239) project uses `Promise.race` to handle page/network lifecycle events with timeouts during automation.

Here's an example :-

```javascript
/**
 * A utility function which throws error after timeout
 * @param timeout - timeout in seconds
 * @returns - promise which gets rejected after timeout
 */
function timer(timeout) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(new Error('❌ failed with timeout'))
        }, timeout * 1000)
    })
}

/**
 * Mock db query which take 5 seconds to complete
 * @returns - query promise
 */
function bigQuery() {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, 5 * 1000)
    })
}

// race both bigQuery and timer tasks
// `Promise.race` can take multiple promises if you want to race them all
Promise.race([
    bigQuery(),
    timer(1)
]).then(() => console.log('✅ Query successful within time limit'))
    .catch(console.error)

// ==> will log '❌ failed with timeout'


// also try running above code by changing timer's timeout value to 6, you will get successful log
```

Promise returned by `Promise.race` resolve/rejects with whichever promise in array resolves/rejects first. For more info checkout [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race) docs.

You can play with the above code here :-

{% runkit %}
/**
 * A utility function which throws error after timeout
 * @param timeout - timeout in seconds
 * @returns - promise which gets rejected after timeout
 */
function timer(timeout) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(new Error('❌ failed with timeout'))
        }, timeout * 1000)
    })
}

/**
 * Mock db query which take 5 seconds to complete
 * @returns - query promise
 */
function bigQuery() {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, 5 * 1000)
    })
}

// race both bigQuery and timer tasks
// `Promise.race` can take multiple promises if you want to race them all
Promise.race([
    bigQuery(),
    timer(1)
]).then(() => console.log('✅ Query successful within time limit'))
    .catch(console.error)

// ==> will log '❌ failed with timeout'


// also try running above code by changing timer's timeout value to 6, you will get successful log
{% endrunkit %}


## 💡 Let me know in comments other cool ideas using `Promise.race`


See my projects on [Github](https://github.com/gajananpp).
A Brief Discussion About React Hooks
Tags: react, hooks
Published: 2021-12-22 13:47:44

Hooks are mainly used in react functional components which must be imported from react. Hooks make state management and life cycle easy. These are called inside react functional components and these must be unconditional. We can also build our custom hooks in react. 

**Hooks:** useState(), useEffect(), useContext(), useRef(), useReducer(), useCallback(), useMemo().

**useState():** Adds and track state which is any data or property.

At first, we have to import it thus:

```
import { useState } from "react";
```
Then, we initialise the state by calling useState(). For ex: if we want to keep track of loading, we can write,

```
const [loading, setLoading] = useState("");
```
Here, loading is the current state, setLoading is a function to set/ update the value of the state.

**useEffect():** Allows performing side effects like: fetching data, updating dom, timers etc. in the component. It has 2 arguments. First argument is function, second is dependency. Second argument is optional. useEffect() runs on every render. But we can control its rendering according to dependency. Most of the time, the second parameter is an empty array. Extra dependencies can be added inside the array.

**Syntax of it:** It can be divided in 3 conditions:

```
useEffect(() => {
  //Runs only on the first render
}, []);

useEffect(() => {
  //Runs on every render
});

useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes
}, [prop, state]);

```

**useContext():** Using react context, we can manage state globally. It can be used to share states between nested components easily. Without it, we have to follow the concept of prop drilling to pass props between nested components. But it adds more complexity for little large or medium projects. 

**How to add this in component:**
1) Importing it from react and initialising it. 

```
import { useState, createContext } from "react";
const UserContext = createContext();
```

2) Wrapping child components in context provider. 

```
<UserContext.Provider value={}>
      …….
</UserContext.Provider>
```

3) Using the hook.

**useRef():** Allows to persist values between renders. Using it, we can access dom elements directly and store a mutable value. We can use it to know how many times our application renders. It returns only one item which is an object called current.

**useReducer():**  It is similar to useState(). Custom state logic is applied by it. It accepts 2 arguments: reducer, initial state.

**useCallback():** Returns a memorised callback function. It only runs when the dependencies update.It prevents the re-rendering of a component. 

**useMemo():** It is the same as useCallback(), but it returns a memorised value.
Must have cheat sheet for WEB DEVELOPER
Tags: javascript, webdev, programming, tutorial
Published: 2021-12-22 13:44:01


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81yq0cxb6x4uvb10uwu5.jpg)
[HTML CHEAT SHEET](https://makeawebsitehub.com/the-html-5-mega-cheat-sheet/)
I love them as they offer me a simple way to recall a software program or help me to learn a new skill. Plus there’s always a useful keyboard shortcut to forget, a command you will just fail to remember, a newly introduced function that slips your mind or element you cease to think of.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av86jdp7hktkxgrrlez4.jpg)
[CSS3 CHEAT SHEET](https://makeawebsitehub.com/css3-mega-cheat-sheet/)
at this website we present a printable CSS 3 Cheat Sheet, a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a827z1t46xk89bl02snn.jpg)
[JAVASCRIPT CHEAT SHEET ](https://websitesetup.org/javascript-cheat-sheet/)
HERE YOU CAN FIND THE JAVASCRIPT CHEAT SHEET IN .pdf AS WELL AS IN THE TEXT.




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

Everything on one place, download a print able PDF.
[JQUERY CHEAT SHEET](https://makeawebsitehub.com/jquery-mega-cheat-sheet/)



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

Enjoy an interactive list of Bootstrap classes. Chose to copy Code snippet of CSS class.
[BOOTSTRAP CHEAT SHEET](https://hackerthemes.com/bootstrap-cheatsheet/)
Call Control Objects (NCCOs) | One Dev Minute
Tags: videoapi, javascript, node
Published: 2021-12-22 13:22:54

Welcome to [One Dev Minute](https://www.youtube.com/playlist?list=PLWYngsniPr_mwb65DDl3Kr6xeh6l7_pVY)! This series is hosted on the [Vonage Dev YouTube channel](https://www.youtube.com/vonagedev). The goal of this video series is to share knowledge in a bite-sized manner. 

In this video, Amanda Cavallaro, our Developer Advocate, talks about the Call Control Objects, which are a set of actions that instruct Vonage how to control the call to your Vonage application. For instance, you can connect a call, send synthesized speech using talk, stream audio, or record a call.

{% youtube 26rm0MP2up0 %}

## Transcript

A Call Control Object - or an NCCO - is a set of instructions that a voice call will follow.

An NCCO is composed of one or more actions. Their order is important, as it describes the flow of the call. Options are used to customize an action. A Call Control Object is represented by a JSON array.

In this example, we can see a connect action with the options to make a call from a given number to an endpoint of type phone with a number.

This second example is similar to the first one, but instead, it makes a call from a given phone number to an endpoint of type app, connecting to a client app, and we are also sending updates from the event URL. 

You can join multiple calls into one conversation conference call.
In this example, you can see one action talk with a descriptive text showing you’re joining a conference. It's followed by an action that creates the conversation for the conference call.

We can also leverage speech recognition. Here’s a code snippet that shows how to handle a user's input.

We can accept Dual Tone Multi Frequency (DTMF), speech, or both.

You can learn further from the links below.

## Links

More resources related to NCCO:

[NCCO Guide](https://developer.vonage.com/voice/voice-api/guides/ncco)

[NCCO Reference](https://developer.vonage.com/voice/voice-api/ncco-reference)

[NCCO Examples Collection](https://learn.vonage.com/blog/2019/10/25/introducing-the-ncco-examples-collection-dr/)

[Call Flow](https://developer.vonage.com/voice/voice-api/guides/call-flow)


Join the [Vonage Developer Community Slack](https://developer.nexmo.com/community/slack)
What's new in Ansible?
Tags: ansible, automation, ansiblecore
Published: 2021-12-22 13:06:29

#New releases

Ansible Core and community distribution of collections saw new releases at the end of 2021. Apart from regular fixes and enhancements, `ansible-core` 2.12 and `ansible` 5 packages made one rather drastic change: they dropped support for Python versions lower than 3.8. 

So, what does this change mean in practical terms? In short, we can no longer use older distributions such as RHEL 7, CentOS 7, and Debian 10 as control nodes. However, note that we can still manage older distributions using Ansible just fine since most Ansible modules in the wild still support Python 2.7. And this will not change anytime soon.
Welcome Thread - v156
Tags: welcome
Published: 2021-12-22 13:05:56

---
title: Welcome Thread - v156
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Ringo saying hello](https://media.giphy.com/media/12Ay4ElBWg6mdO/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Replace Linked List on Index
Tags: 100daysofcode, programming, java, algorithms
Published: 2021-12-22 13:05:14

# [Description](https://binarysearch.com/problems/Replace-Linked-List-on-Index)

You are given two linked lists `a` and `b` as well as integers `lo` and `hi`.

Remove `a`'s nodes from indices (0-indexed) `[lo, hi]` inclusive and insert `b` in this place.

**Constraints:** 

- `0 ≤ n ≤ 100,000` where `n` is the number of nodes in `a`
- `0 ≤ m ≤ 100,000` where `m` is the number of nodes in `b`

## Example 1

### Input

```
a = [1, 2, 3, 4, 5, 6]
b = [10, 20, 30]
lo = 1
hi = 2
```

### Output

```
[1, 10, 20, 30, 4, 5, 6]
```

### **Explanation**

```
We removed nodes 2 and 3 since their indices are in [1, 2]. In its place we inserted b.
```

---

## Example 2

### Input

```
a = [1, 2, 3]
b = [10, 20, 30]
lo = 0
hi = 2
```

### Output

```
[10, 20, 30]
```

### **Explanation**

```
We removed every node of a and inserted b.
```

---

---

# Intuition

1. find nodes whose index are `lo-1` or `hi+1`;
2. `(lo-1).next = b`
3. `b.next = (hi+1)`

# Implementation

```java
import java.util.*;

/**
 * class LLNode {
 *   int val;
 *   LLNode next;
 * }
 */
class Solution {
    public LLNode solve(LLNode a, LLNode b, int lo, int hi) {
        LLNode dummy = new LLNode();
        dummy.next = a;
        // find start node (a-1) and end node(b+1)
        LLNode start = null, end = null;
        int index = 0;
        while (a != null) {
            if (index < lo) {
                start = a;
            }
            if (index > hi && end == null) {
                end = a;
                break;
            }
            index++;
            a = a.next;
        }
        // if start is still eaqul null, means start from b
        if (start == null) {
            dummy.next = b;
        } else {
            start.next = b;
        }

        // replace [lo, hi] with b
        LLNode replace = b;
        // find the last node in b
        while (replace.next != null) {
            replace = replace.next;
        }
        // and point it back to the end of a
        replace.next = end;
        return dummy.next;
    }
}
```

## Time Complexity

- Time: O(n)
- Space: O(1)
Listen to the S7E7 of DevDiscuss: "We Have Tools To Help You With Your Imposter Syndrome"
Tags: discuss, podcast
Published: 2021-12-22 12:46:15

---
title: Listen to the S7E7 of DevDiscuss: "We Have Tools To Help You With Your Imposter Syndrome"
published: true
description: Listen to S7E7 of DevDiscuss!
tags: discuss, podcast 
series: DevDiscuss Season 7
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5ta9aixta660qcbm9ac.png
---

## On this week's episode of DevDiscuss, we talk about some tools that will help you get through your imposter syndrome.


{% podcast https://dev.to/devdiscuss/s7-e7-we-have-tools-to-help-you-with-your-imposter-syndrome %}

_Quick refresher — DevDiscuss is the first original podcast from DEV all about the burning topics that impact all our lives as developers._

**Episode Info** 

In S7E7, we talk about imposter syndrome and how to conquer it with some members of the Forem team and a mental health expert. Let's explore this challenging psychological pattern (that affects so many of us) together!

### Hosts:
- **@ben** — Creator of DEV & Co-Founder of Forem
- **@aritdeveloper** — Software Engineer @ Forem
  
### Guests: 
- **Michael Boroff** — Mental Health Program Manager @ Crossover Health
- **@nickytonline** — Lead Software Engineer @ Forem 

Let us know your thoughts on this show in the comments below — or on Twitter ([@thepracticaldev](https://twitter.com/thepracticaldev) ).

![Speakers](https://media.giphy.com/media/qZelsWAXfWpAA/giphy.gif?cid=ecf05e47ddu6jql6tkj8kvdmj4z5ofal65l38f235ruuinlo&rid=giphy.gif&ct=g)

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s7-e7-we-have-tools-to-help-you-with-your-imposter-syndrome/id1513053883?i=1000545752211)
- [Spotify](https://open.spotify.com/episode/1Cek03jUpA8jVBzvgFGeT8)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzU2?sa=X&ved=0CAQQkfYCahcKEwjouYTys_f0AhUAAAAAHQAAAAAQCg)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss-dev-xtQvoDylAUg/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=168597101)
- [RSS Feed](http://feeds.codenewbie.org/devdiscuss_podcast.xml)
- [DEV Pods Site](https://devpods.dev/podcasts/devdiscuss/episodes/239)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- _Our season seven sponsors: [Microsoft](https://www.microsoft.com/en-us/dev-community/Event/Register?eventId=DevDiscussPodcast_o7nllI4cp4Vg&ocid=aid3038582), [New Relic](https://developer.newrelic.com/), & [Vultr](ource=devdiscuss&utm_medium=syndication&utm_campaign=october21)!_
How to display laravel validation errors in vuejs
Tags: vue, laravel, php
Published: 2021-12-22 12:41:18

There are several resources that address this topic but I want to just share my solution for a situation where you have to display laravel validation errors in vuejs component not just with the traditional loop but, this time, a nested loop.  You should understand better by the time we are done.

Note: **_I will not go into details on how to write an API  in laravel or build a vuejs app frontend. I will just discuss this topic with code snippets that you are probably familiar with if you are used to writing laravel and Vuejs_**

Lets assume that we return error responses from our backend like so 

```javascript
  public function register(Request $request)
    {

        $validator = Validator::make($request->all(), [
            'name' => 'required|string',
            'email' => 'required|email|unique:users',
            'gender' => 'required',
        ]);

        if ($validator->fails()) {    
            return response()->json($validator->messages(), 400);
        }
}
```
Lets say the user have some empty fields from the frontend, so in our browser network tab, the laravel validation error responses from our backend looks like this: 

![Laravel Vuejs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcka0clpsxa80xkdk7tq.png)

Now, in our Vuejs Component;
We have a state in the data object where we assign the response errors to.

```javascript
export default {

  data() {
	return{
		
	notifmsg: ''
         }
    },
```
While in our `catch()` function we are assigning laravel validation response like so:
```javascript
.then(()=> {
// do some magic stuff here
    }).catch(e => {
       this.notifmsg = e.response.data
})
```
Now here is the thing:
If you go by the traditional way of looping through the response we got from our backend, like so:....
```javascript
<div v-for="(errorArray, index) in notifmsg" :key="index">
<span class="text-danger">{{ errorArray}} </span>
</div>
```
...the output on the FE will look like this: 

![Laravel vuejs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfxk0hfsn8z7f84u3zpb.png)

Yeaaah...this is not what we want right ? Yes. 

The reason is because validation error response from our laravel app being returned as an array of objects. So, to solve this we'll have to perform a nested loop like so:

```javascript
<div v-for="(errorArray, idx) in notifmsg" :key="idx">
	<div v-for="(allErrors, idx) in errorArray" :key="idx">
		<span class="text-danger">{{ allErrors}} </span>
	</div>
</div>
```

The output looks like this :

![Laravel Vuejs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmkh33rkquju2erhrgdc.png)

Boom...! And thats what we acctually want to achieve. Thanks for reading... 

You can reach me out on [Twitter](https://twitter.com/jovial_core). I'm on 
[Linked too](https://www.linkedin.com/in/chidiebere-chukwudi-49a982182/)

Please drop your contributions in the comment section if you have any...