teleren/devto huggingface dataset:
How to pass parameters from child commponent to parent component in React?
Tags: webdev, javascript, programming, react
Published: 2023-08-14 17:15:43

Lets say we have a parent component App 

```
import React from "react";
import { useState, useEffect } from "react";
import Search from "./Search";


const App = () => {
  const [SearchData, SetSearchData] = useState("Enter text");

  const ReceiveText = (txt) => {
    console.log(txt);
    SetSearchData(txt);
  };

  return (
    <div>
      <Search HandleSearch={ReceiveText} />
      <h1> {SearchData}</h1>
    </div>
  );
};

export default App;
```

and we have a child component Search 

```

const Search = ({ HandleSearch }) => {
  return (
    <div classs="search">
      <label>Search </label>
      <input
        placeholder="Search for movies"
        onChange={(e) => HandleSearch(e.target.value)}
       
      />
      <br></br>
      <button>Search</button>
    </div>
  );
};

export default Search;

```
App.js is a simple react component which has a child component Search.js.  In app.js I have created a method which take an arguement text and print the text that we will be passing from child. also I have declared a usestate hook searchdata which would have initial text 'enter text' and also we will be setting the state based on the input from child.
In search.js file we are grabbing the method that is passed  from App.js.Also it has a simple input tag from where we can input our text.  it has an event handler onchange inside which iam calling handlesearch method which would get the text that we are entering from the input element and this text will be passed on to the handlesearch method of the parent component(App.js). As a result Searchdata would be updated which is in the App.js.
And that is how you can pass property from child to parent.
Thank you
How to fix Error 404 Resource not Found in Azure Custom Vision API
Tags: java, azure, azurecognitiveservices, microsoftcustomvision
Published: 2023-08-14 17:07:23

How to fix Error 404 Resource not Found in Azure Custom Vision API
------------------------------------------------------------------

As a software developer, you might have encountered the dreaded Error 404 - Resource not Found when working with the Azure Custom Vision API. This error occurs when the requested resource, such as a model or project, cannot be found in the API. But don't worry, we've got you covered! In this article, we will explore some common causes of this error and provide solutions to fix it.

### Possible Causes of Error 404

There can be several reasons why you are getting a 404 error in the Azure Custom Vision API. Here are a few possible causes:

*   The project or model you are trying to access does not exist.
*   You are using an incorrect endpoint URL.
*   There might be a typo in the resource name or ID.
*   There could be an issue with the authentication token.

### Fixing Error 404

Now that we know some possible causes, let's dive into the solutions:

1.  Double-check the resource name or ID: It's easy to make typos, so make sure you have entered the correct name or ID for the project or model you are trying to access.
2.  Verify the endpoint URL: Ensure that you are using the correct endpoint URL for the Custom Vision API. Any mistake in the URL can lead to a 404 error.
3.  Check the existence of the resource: Use the API's list endpoints to check if the resource exists. If it doesn't, create it before attempting to access it.
4.  Verify the authentication token: If you are using an authentication token to access the API, ensure that it is valid and has the necessary permissions to access the resource.
5.  Ask the Magic 8 Ball: When all else fails, consult the Magic 8 Ball for guidance. It might have the answer you seek!

By following these steps, you should be able to resolve the Error 404 - Resource not Found in the Azure Custom Vision API. Remember to double-check your inputs, verify the endpoint URL, and ensure the resource exists before accessing it. And don't forget to consult the Magic 8 Ball for some extra luck!

### Conclusion

Error 404 can be frustrating, but with the right approach, it can be easily fixed. We hope this article has helped you understand the possible causes of Error 404 in the Azure Custom Vision API and provided you with the necessary solutions. Happy coding!

### References:

*   [Azure Custom Vision API Documentation](https://docs.microsoft.com/en-us/azure/cognitive-services/custom-vision-service/)
Storing Container Data In Docker Volumes
Tags: docker, devops
Published: 2023-08-14 17:06:54

Let's learn about volumes in **Docker**
What you will learn?
- Anonymous Volumes
- Create a Docker Volume
- Use the Website Volume with Containers
- Clean Up Unused Volumes

**1. Anonymous Volumes**
When we create a container then automatically docker creates an anonyous volume for that container. 

![Anonymous Volume](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ghp4tazz739xkq3h3s5.png)

Now, lets inspect the volume using the following command

![Inspect Information](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m20c3z551wv32iu2f0us.png)

**2- Create a Docker Volume**
```bash
~ docker volume create webiste
~ docker volume ls
```

![Creating Volume using docker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3dagc2cidehns2mi2q0.png)



**3. Use the Website Volume with Containers**
```bash
~ docker run -d --name web1 -p 80:80 -v webiste:/usr/local/apache2/htdocs:ro httpd:2.4
```

**4- Clean Up Unused Volumes**
```bash
~ docker volume prune
```
5 Extensões do VSCode para facilitar sua vida
Tags: vscode, developer, beginners, webdev
Published: 2023-08-14 17:06:44

Neste post, vou apresentar a vocês cinco extensões fantásticas do [VSCode](https://code.visualstudio.com/) que podem aumentar significativamente sua produtividade.




## 1. Code Spell Checker

O Code Spell Checker é um salva-vidas para pegar aqueles erros de ortografia sorrateiros do seu código. Com um dicionário embutido e listas de palavras personalizáveis, ele garante que seu código não seja apenas funcional, mas também que esteja escrito corretamente.

O Code Spell Checker vem com o dicionário para inglês, porém é possível instalar para outras línguas como Português, Espanhol etc.


![Exemplo - Code Spell Checker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsbus6ycmlvzlajgfhye.gif)


## 2. Tabnine AI
Diga adeus à digitação interminável e olá à mágica do preenchimento de código. Esta extensão de preenchimento automático conta com uma inteligência artificial que aprende seus padrões de codificação e contexto, oferecendo sugestões de códigos que economizam tempo e reduzem erros.


![Exemplo - Tabnine AI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4fxmvn542qru3l18he5.gif)



## 3. Color Highlight

Trabalhando com CSS, SASS ou qualquer outra linguagem de folha de estilo? O Color Highlight vem para ajudar, exibindo visualmente as cores diretamente no seu editor de código. Esta extensão torna incrivelmente conveniente identificar e ajustar a paleta de cores no seu projeto.


![Exemplo - Color Highlight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/866o0193fgapssoc6i44.gif)



## 4. Indent Rainbow

A indentação do código pode parecer um assunto trivial, mas é crucial para manter a legibilidade. O Indent Rainbow serve como um auxilio visual, adicionando um toque de cor aos níveis de indentação do seu código. Facilitando a identificação de aninhamentos e a compreensão da estrutura do seu código.


![Exemplo - Indent Rainbow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ey0s1fi5ultlv7qi0shc.gif)



## 5. Auto Rename Tag

Se você está trabalhando linguagens baseadas em tags, vai apreciar a conveniência do Auto Rename Tag. Esta extensão atualiza automaticamente a tag de fechamento correspondente sempre que você renomeia uma tag de abertura, poupando-o do incômodo de ajustes manuais de tags e garantindo que seu código permaneça livre de erros.

O VSCode tem a configuração `linkedEditing `, porém atualmente não é tão funcional quanto a extensão citada.


![Exemplo - Auto Rename Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ercsbe7xgl8wws2hzru9.gif)



## Conclusão
Essas cinco extensões do VSCode podem levar a um aumento significativo na produtividade e na qualidade do código.

Você conhece alguma extensão que facilita o seu fluxo de trabalho e não foi mencionada na lista? Compartilhe nos comentários abaixo!
Re-render?
Published: 2023-08-14 17:04:47

Hola! Estoy trabajando con NextJS y quiero guardar el resultado de la llamada a una API en un state. No solo veo que mi state esta vacio, sino que la linea "console.log(visits)" se ejecuta indefinidamente.
Alguien podria explicarme como adaptar el codigo?

Muchas gracias!

`'use client'
import {useState} from 'react'
import styles from './visitas.module.css'
import {BsFillFileArrowDownFill} from 'react-icons/bs'

export const metadata = {
  title: 'Modulo Visitas',
}

async function getData() {

  const res = await fetch('http://localhost:3000/api/visitas', {cache: 'no-store'})

  if (!res.ok) {
    
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}

export default async function Visitas() {

  const [visits, setVisits] = useState()

  const visitas = await getData();
  setVisits(visitas)
  console.log(visits)
  const {data:{list}} = visitas

  
  return (
    <main>
      <h1>Modulo Visitas</h1>
      <table className={styles.tablaVisitas}>
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Documento</th>
            <th>Empresa</th>
            <th>Nº Reserva</th>
            <th>Recibe</th>
            <th>Fecha Programada</th>
            <th>Matricula</th>
            <th>Estado</th>
            <th>Acciones</th>
          </tr>
        </thead>
        <tbody>
    
        {
                    list.map( visita => (
                      
                      <tr key={visita.appointCode}>
                        <td>{visita.visitorInfo.visitorName}</td>
                        <td>{visita.visitorInfo.certificateNo}</td>
                        <td>{visita.visitorInfo.companyName}</td>
                        <td>{visita.appointCode}</td>
                        <td>{visita.receptionistName}</td>
                        <td>{visita.appointStartTime.split('T')[0]}</td>
                        <td>{visita.visitorInfo.plateNo}</td>
                        {(() => {
                          switch(visita.appointStatus) {
                            case 0:
                              return (<td className={styles.pendiente}>Pendiente</td>)
                            case 1:
                            return (<td className={styles.expirada}>Expirada</td>)
                            case 3:
                              return (<td className={styles.enCurso}>En Curso</td>)
                            case 4:
                              return (<td className={styles.finalizada}>Finalizada</td>)
                            case 5:
                              return (<td className={styles.finalizada}>Finalizada</td>)
                            default:
                              return null
                          }
                        })()}
                        <td>
                          <BsFillFileArrowDownFill />
                        </td>
                      </tr>
                    ))
                  }
            
          
        </tbody>
      </table>
    </main>
  )
}`
Can I Earn Money After Learning Python?
Tags: career, programming, job, developer
Published: 2023-08-14 17:02:12

## The Question

Another common question that beginner programmers ask is a variation of "Can I earn money after learning [insert programming language]?" Sometimes it is phrased along the lines of "What do I need to learn to become a developer?"

## How To Get The Answer

The obvious way to answer this question is to look at what the employers actually publish. You can find this in job ads. So look at job ads wherever you hope to get a job, whether in the area where you live or online. Look at several of them so that you can start noticing the commonly asked for skills and requirements. Also look at requirements from other places, so that you can see if there are possible emerging trends that may not yet be in your area.

## Requirements
If you come across a requirement that is frequently asked for and you do not have it, at least familiarise yourself with it, or if possible, learn it to a point where you can use it to an extent. You can consider incorporating some of these technologies into your projects, so you can legitimately claim that you have used them, even if just in your own projects.

## Evaluating Courses
Also, this knowledge will help you evaluate courses that you are considering. If a course includes a number of sought-after technologies, then it is probably better than one that teaches old or little-used or proprietary technologies.

Bottom line - look at job ads and keep familiar with the technologies in use in the modern workplace. Learn about them and if you get a chance, use them in your own projects.
How to send email using python
Tags: python, programming, webdev, tutorial
Published: 2023-08-14 16:47:02

## welcome everybody 🙂🖐

Today I will share with you How to send email using python


## step 1 

you need to choice Mail Service Provider
like **yahoo, gmail, aol**
[this is list of 10 Best FREE Email Account: Mail Service Providers (2023 List)](https://www.guru99.com/best-free-email-service-providers.html)

choice one of them 🤗

## step 2

In this step you need to go to your account
To generate an application password or set the settings according to the service 
if you useing **aol** or **yahoo** you will make the Same settings
Because they are similar to each other


Go to your account
Then select "security".


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

Scroll down the page
Even the "ACCOUNT ACCESS" section
"



Click on Generate app password
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4dk9kt81f8xsfikpdor.PNG)

Click Get started


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

Choose the name of the application

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

Copy the password

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




## step 3

you need to kenow 2 things **1 - SMTP server name** **2 - SMTP server port** of your Mail Service Provider
for example **aol**

AOL SMTP server name: smtp.aol.com
AOL SMTP username: your AOL address
AOL SMTP password: your account password
AOL SMTP port: 25 or 465

**Note!**
i used port : **587** instead of **465** Because port **465** is not working


The same idea on all Mail Service Provider's
Use Google to find this info or use [**Google bard**](https://bard.google.com/)



## step 4
you need an email to receive the message
you can use [**temp-mail**](https://temp-mail.org/)

## step 5

```python

import smtplib
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText

msg = MIMEMultipart()
msg['From'] = 'your email'
msg['To'] = 'receiver email'
msg['Subject'] = 'Test ;)'


html = """ 

<h1>Hi, This is test 🙂</h1>

"""

msg.attach(MIMEText(html, 'html'))
msg_str = msg.as_string()


server = smtplib.SMTP('smtp.aol.com', 587)

server.starttls()
server.ehlo()


server.login('email username', 'your password')
server.send_message(msg)

```


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

**Now we're done 🤗**

**Don't forget to like and follow 🙂**


**Support me on PayPal 🤗**
https://www.paypal.com/paypalme/amr396
Raku Blog Posts 2023.33
Tags: programming, rakulang, summary
Published: 2023-08-14 16:44:31

- [Raku: A Language for Gremlins - By Gremlins, For Gremlins™](https://buttondown.email/hillelwayne/archive/raku-a-language-for-gremlins/)

*Hillel Wayne* surprised everybody with an extensive attempt at describing the Raku Programming Language.

- [raku: the Variable Lifecycle](https://rakujourney.wordpress.com/2023/08/07/raku-the-variable-lifecycle/)
- [raku – Sunshine on Jupyter](https://rakujourney.wordpress.com/2023/08/13/raku-sunshine-on-jupyter/)

*Steve Roe* ventured into Raku's OO and concurrency features to show the lifetime of a scalar variable.  And blogged about how to use their [Physics::Measure](https://raku.land/zef:librasteve/Physics::Measure) on an interactive Jupyter notebook.

- [UTF-8 (de)composition](https://dev.to/bbkr/utf-8-decomposition-1n3m)
- [Fun with UTF-8: browsing code points namespace](https://dev.to/bbkr/fun-with-utf-8-browsing-code-points-namespace-4bgm)
- [UTF-8 grapheme clusters](https://dev.to/bbkr/utf-8-grapheme-clusters-42o7)

*Paweł bbkr Pabian* continued their blog series about Unicode, using Raku examples.

- Not So Obvious Semantic Changes ([Part 1](https://dev.to/lizmat/not-so-obvious-semantic-changes-part-1-of-2-5584), [Part 2](https://dev.to/lizmat/not-so-obvious-semantic-changes-part-2-of-3-167k), [Part 3](https://dev.to/lizmat/not-so-obvious-semantic-changes-part-3-of-3-l0d))
- [Containers vs References](https://dev.to/lizmat/containers-vs-references-4id2)
- [Subroutine Signatures](https://dev.to/lizmat/subroutine-signatures-53gh)
- Sigils ([Part 1](https://dev.to/lizmat/sigils-part-1-of-2-48pf), [Part 2](https://dev.to/lizmat/sigils-part-2-of-2-3n3o))


*Elizabeth Mattijsen* continued their series of blog posts about the differences between Perl and the Raku Programming Language.

- [Rakudo Weekly News 2023.33](https://rakudoweekly.blog/2023/08/14/2023-33-gremlin-time/)

*Elizabeth Mattijsen* reports on all recent developments around Rakudo, an implementation of the [Raku Programming Language](https://raku.org).
Simplifying Database Backup and Restore with Easy Automation
Tags: postgres, node, aws, javascript
Published: 2023-08-14 16:18:47

Hey guys, I am lazy to write the article, but I still wanted to share this with all of you. So, I used GPT to write articles by my code.

So, for those interested in delving into the code, here you go ✨

https://github.com/jacksonkasi1/psql-backup-restore-s3

Are you new to database management but want to ensure your data is safe and sound? We've got you covered with a super-simple way to handle backups and restores, along with an automatic backup schedule that'll make your life easier.

## Why Backup and Restore Matters

Imagine your data as a collection of precious memories. Just like you'd want to keep your photos safe, it's vital to protect your database's content. Backing up your database means creating a copy of it that you can fall back on if things go wrong. It's like having a spare key for your digital door!

## The Magic of Automation

Introducing Node.js, your tech-savvy assistant. With its help, you can automate the whole backup process. This means you won't have to remember to create backups manually – Node.js will do it for you, like an automatic pet feeder for your data!

## Easy Peasy Manual Backup and Restore

Suppose you want to manually back up your database. Just a few clicks, and it's done:

**Backup**: You tell Node.js to create a backup of your database. It's like taking a photo of your data's happy state.

**Restore**: If something goes wrong, you use Node.js to restore your database from the backup. Think of it as hitting the "Undo" button for your data.

## Rise and Shine with Cron Job!

Now, let's talk about your backup schedule. With a little thing called a cron job, you can set a time for Node.js to automatically create backups. Say you want to backup your data every day at 5 AM – the cron job makes it happen like clockwork!

**Setup**: You tell Node.js to wake up at 5 AM every day and make a backup. It's like programming your alarm clock to wake you up.

**Result**: When you wake up, you'll find fresh backups waiting for you. No manual effort is needed – just reliable automatic backups!

## In a Nutshell

**Backup**: Node.js creates snapshots of your data, so you always have a safety net.

**Restore**: If things get messy, Node.js helps you turn back time and restore your data.

**Cron Job**: Node.js is your timekeeper, making sure backups happen while you're still dreaming.

No more worries about losing data or forgetting to make backups. With Node.js and this simple setup, you'll be a data guardian without breaking a sweat. Time to enjoy peace of mind and focus on what truly matters!

So, are you ready to let technology lend you a helping hand? Get started, and let your data stay safe, sound, and effortlessly managed! 😎
How To Use Record Type In Typescript
Tags: typescript, datastructures, javascript
Published: 2023-08-14 15:51:11

Today I was facing a problem where I wanted an object with a list of properties but with specific values like:

For example:

```typescript
export type NBATeam = "Lakers" | "Celtics" | "Bulls" | "Warriors";

const nbaChampionships = {
    Lakers: 17,
    Celtics: 17,
    Bulls: 6,
    Warriors: 6
};
```

How can Typescript help me to do it?

Well, TypeScript provides a list of utility types that make it easier to handle various type-related operations; one of these [utility types](https://www.typescriptlang.org/docs/handbook/utility-types.html) is the `Record` Type.

### **What is the** `Record` Type?

The `Record` type allows us to construct an object type with specified keys and their corresponding values, so we can think of it as defining a map or a dictionary.

In deep is like:

```typescript
type Record<K extends keyof any, T> = {
    [P in K]: T;
};
```

With `Record`, you're essentially telling TypeScript: "Hey, I want an object that has keys of type `K`, and every value under those keys should be of type `T`."

> Learn more about [Record Types](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)

### **Example**

Suppose we want to create a type representing the number of championships won by different NBA teams. We can define our team names and the corresponding type for the number of championships:

```typescript
type NBATeam = "Lakers" | "Celtics" | "Bulls" | "Warriors";
type Championships = number;
```

Using the `Record` type, we can create a type that maps each NBA team to the number of championships they have won:

```typescript
type ChampionshipRecord = Record<NBATeam, Championships>;
```

This tells TypeScript that our `ChampionshipRecord` type is an object where every key is an `NBATeam`, and every value is a `Championships` (number).

Now, let's use this type:

```typescript
const nbaChampionships: ChampionshipRecord = {
    Lakers: 17,
    Celtics: 17,
    Bulls: 6,
    Warriors: 6
};

console.log(`Lakers have won ${nbaChampionships.Lakers} championships.`);
```

If you accidentally add a team that's not in our NBATeam type or provide a value for championships that isn't a number, it generates a compile-time error, ensuring our data stays consistent.

### **Recap**

For me `Record` is so powerful and helps to be it ensures objects conform to a specific shape. It guarantees that the keys and values of an object are of a certain type, adding a level of predictability to our codebase.

I hope it helps you ;)
Nothing gives you a reality check faster.
Tags: developer, programming, beginners
Published: 2023-08-14 15:47:46

---
title: Nothing gives you a reality check faster.
published: true
description: Don't hang your head and keep going!
tags: #developer #programming #beginner
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-08-14 15:40 +0000
---

Do you know the feeling when you have been programming for half an eternity on a mega cool feature and you are totally excited because it has become so good? Then you show it to your partner/friend and the only answer is "ok". 

Nothing will bring you back down to earth.


Have you experienced this too?

Share your experiences in the comments.



PS: Don't let it get you down, here on dev.to you can get some praise! just write about your new project! 😁