teleren/devto huggingface dataset:
ReactJS components continues to impress me!
Published: 2023-06-26 16:18:46



Imagine you want to create a section that contains five cards using HTML, CSS, and vanilla JS! How many lines of code would you need? Maybe it would look like this:

```html
<div class="card">
  <img src="path/to/image1.jpg" alt="Image 1">
  <h2>Card 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="card">
  <img src="path/to/image2.jpg" alt="Image 2">
  <h2>Card 2</h2>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card">
  <img src="path/to/image3.jpg" alt="Image 3">
  <h2>Card 3</h2>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="card">
  <img src="path/to/image4.jpg" alt="Image 4">
  <h2>Card 4</h2>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
```

OMG! That's a lot of lines!

But in React, you can create a reusable `Card` component in a separate file (e.g., `Card.jsx`) and pass props to it like this:

```jsx
export default function Card(props) {
  const { name, title, src, alt } = props; // destructuring props object
  return (
    <div>
      <h1>{name}</h1>
      <img src={src} alt={alt} />
      <p>{title}</p>
    </div>
  );
}
```

Then, in your `App.js` file, you can simply import the `Card` component and use it like this:

```jsx
import Card from './Card';

function App() {
  return (
    <div>
      <Card
        name="Card 1"
        title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        src="path/to/image1.jpg"
        alt="Image 1"
      />
      <Card
        name="Card 2"
        title="Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        src="path/to/image2.jpg"
        alt="Image 2"
      />
      <Card
        name="Card 3"
        title="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        src="path/to/image3.jpg"
        alt="Image 3"
      />
      <Card
        name="Card 4"
        title="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
        src="path/to/image4.jpg"
        alt="Image 4"
      />
    </div>
  );
}
```

You can use a loop (e.g., `map`) to generate the cards dynamically based on an array of data if you need to render a large number of cards.

so it's may look like this :
```
import arr from './Mocks/images_objects'
export default function App() {

    return ( 
       <div className='App'>
        {arr.map((object, index) => (
        <Card
          key = {index}
          name={"john Doe"}
          title={"welcome"}
          src={object.src}
          alt = {object.alt}
        />
      ))}
       </div>
      

      );
}
```
[Italian] L'Olivetti di Mario Tchou, uno sfortunato destino.
Published: 2023-06-26 16:18:33

Il giorno 26 Giugno del 1924 nacque a Roma Mario Tchou , un ingegnere elettronico di origine cinese. 

Fu a capo di uno gruppo di progettisti che lavorarono alla costruzione dei primi computer a transistor nella storia.
Si formo negli Stati Uniti, figlio di un diplomatico cinese in servizio negli uffici del Vaticano a Roma.

Il leggendario Olivetti Elea 9003, presentato a Milano nell'Aprile del 1959, era uno dei prodotti della linea di computer ELEA.
ELEA stava per Elaboratore Elettronico Aritmetico, e il nome fu scelto in onore della scuola Filosofica nata nell'antica città di Elea, fondata dal Filosofo presocratico Parmenide, ora l'odierna Ascea in provincia di Salerno. 


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


L'ELEA è stato sicuramente tra i primi computer in Europa ad essere commercializzato, prima di alcuni esperimenti di alcuni prototipi costruiti all'università di Manchester a metà degli anni 50.

Morì tragicamente in un incidente stradale il 9 novembre 1961, mentre stava andando ad Ivrea a discutere di un nuovo prototipo da costruire. 
Alcuni dissero che l'incidente non è stata una fatalità.

Tra cui una recente intervista a Carlo De Benedetti, che dichiarò che dietro ci furono i Servizi Segreti USA intenzionati a indebolire l’Olivetti e l'Italia e per favorire la nascente IBM, che creò un prototipo simile (l'IBM 7090) uscito nel Novembre del 1959.

Non lo sapremo mai, certamente non è difficile pensare comunque ad una tragica fatalità, accompagnata al decesso dell'anno prima del fondatore Adriano Olivetti.
How to Fix GitHub Error – WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
Tags: git, tutorials, changed, errors
Published: 2023-07-16 19:10:24

---
title: How to Fix GitHub Error – WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
published: true
date: 2023-06-26 16:15:12 UTC
tags: Git,Tutorials,changed,error
canonical_url: 
---

 ![error-temrinal](https://www.panayiotisgeorgiou.net/wp-content/uploads/2023/06/error-temrinal.png)

If you encounter the error message “WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!” when using Git or GitHub, it typically means that the SSH fingerprint for the remote host has changed since the last time you connected to it. This post will indicate you How to Fix GitHub Error – WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

 ![err](https://www.panayiotisgeorgiou.net/wp-content/uploads/2023/06/error-temrinal-1024x389.png)

Error in Terminal

### \*\*\*Normally, this is a very serious error, and you should pay attention to it.

 ![error-vscode](https://www.panayiotisgeorgiou.net/wp-content/uploads/2023/06/error-vscode.png)

Error VS code

## Why this happened?

It turns out GitHub updated their RSA SSH host key a few days ago because it was briefly exposed in a public GitHub repo.

### The Solution

I fixed the problem by removing the old SSH key with the following command:

```
ssh-keygen -R github.com
```

Then the next time I ran `git push` I added the new SSH key by answering `yes` to the following question:

```
Are you sure you want to continue connecting (yes/no)? yes
```

I’m running Windows 10 with PowerShell and `git version 2.30.1`.

For more information about why GitHub updated their SSH key see [here](https://github.blog/2023-03-23-we-updated-our-rsa-ssh-host-key).

![follow-instagram](https://lh3.googleusercontent.com/aYbdIM1abwyVSUZLDKoE0CDZGRhlkpsaPOg9tNnBktUQYsXflwknnOn2Ge1Yr7rImGk=w300)

[Follow me on Instagram](https://www.instagram.com/panayiotisgeorgiou)

![😉](https://s.w.org/images/core/emoji/13.0.0/svg/1f609.svg)   **That’s it for now. **

If you liked this article, then please subscribe to my [YouTube Channel](https://www.youtube.com/c/PanayiotisGeorgiou?sub_confirmation=1) for video tutorials.

You can also find me on [Twitter](http://twitter.com/panay_georgiou) and [Facebook](https://www.facebook.com/panayiotisgeorgiou.net).

The post [How to Fix GitHub Error – WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!](https://www.panayiotisgeorgiou.net/how-to-fix-github-error-warning-remote-host-identification-has-changed/) appeared first on [Panayiotis Georgiou](https://www.panayiotisgeorgiou.net).
What order do you learn AWS?
Tags: aws, webdev, tools, devops
Published: 2023-06-26 16:06:26

What’s the basics, roadmap, to learning AWS? 

I’ve messed around a little bit years ago, but that was just getting a VM started.
I also used Oracle, and got VMs started. But… what’s the roadmap of what to truly learn first? 

Some seems like “review”, but, what would the needs be of to learn first?
Progress Bar using HTML, CSS, JS
Tags: javascript, beginners, tutorial, webdev
Published: 2023-06-26 16:06:00

```


HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>progress bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="progress-wrapper">
        <progress id="progress" value="50" max="100"></progress>
        <span class="progress-label">Level <span id="level">0</span></span>
      </div>
      


   <script src="index.js"></script>
</body>
</html>

CSS
`body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
  }
  
  .progress-container {
    display: flex;
  }
  
  .progress-wrapper {
    position: relative;
    height: 20px;
    width: 200px;
  }
  
  #progress {
    appearance: none;
    height: 100%;
    width: 100%;
    border: none;
    background-color: #f0f0f0;
  }
  
  .progress-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: white;
    pointer-events: none;
  }
  `
JS
`const progress = document.getElementById('progress');
const levelElement = document.getElementById('level');

let level = 0;
levelElement.textContent = level;

function updateProgressBar() {
  progress.value += 1;
  if (progress.value === 100) {
    level += 1;
    levelElement.textContent = level;
    progress.value = 0;
  }
}

setInterval(updateProgressBar, 100);
`
```

``
What are your goals for the week of June 25?
Tags: discuss, motivation
Published: 2023-06-26 15:44:05

## What are your goals for this week?


- What are you building? 
- What will be a good result by week's end?
- Are you attending any events this week? 
  * Any suggestions of events to attend?
- Did you meet your goals last week?


I'll start with how I did last week.

### Last Week's Goals

- [:white_check_mark:] Continue Job Search. [:star:] Attended a job fair, made connections, applied for positions.
- [:white_check_mark:] Blog
- [:white_check_mark:] Code Challenges [:star:] CSS Battles
- [:x:] Project work 
- Events
  * [:white_check_mark:] Attend Virtual Coffee(VC) Thursday.   
  * [:white_check_mark:] Other VC events if I can.
  * [:white_check_mark:] Virtual Job Fair
  * [:white_check_mark:] Figma's Config
- [:white_check_mark:] Wrap up moving a site to a new host. Plus Moved another site. 
- [:white_check_mark:] Family is coming have to do some cleaning.


### This Week's Goals

- Continue Job Search.
- Blog
- Code Challenges
- Project work
- Events
  * Attend Virtual Coffee(VC) Thursday.
  * Other VC events if I can.
  * Zapier event
  * Dallas Software Developers Meetup Thursday, June 29 at 7:00 PM Night of JavaScript. (Virtual)

### Your Goals for the week


You've read my goals so I'll throw the questions back to you.


- What are you building? 
- What will be a good result by week's end?
- Are you attending any events this week? 
  * Any suggestions of events to attend?
- Did you meet your goals last week?

```html
-$JarvisScript git push
```
Map, Filter & Reduce in JavaScript # 17
Tags: javascript, beginners, programming, react
Published: 2023-06-26 15:14:05

// map() => Create new array by progamining some operation on each array element .

// let arr = [42, 23, 21]
// let a = arr.map((value, index, array )=>{
//   console.log(value, index, array)
//   return value + 1
// })
// console.log(a)
// // console.log(arr)

// // filter() => filter an array with value that passes a test create a new array 

// let arr2 = [42, 23, 21, 0, 3, 5]
// let a2 = arr2.filter((a)=>{
//   return a<10
// })
// console.log(a2)

// reduce method --> reduce an array to a single value 

let arr3 = [42, 23, 21, 0, 3, 5]
const reduce_func = ((h1, h2)=>{
  return h1 + h2
})
let newarr3 = arr3.reduce(reduce_func)
console.log(newarr3)

[](https://replit.com/@SkSage/Map-Filter-and-Reduce-in-JavaScript-20#index.js)
My 1st NET #ChatGPT Plugin. Demo Included!
Tags: englishpost, chatgpt, codesample
Published: 2023-06-27 17:37:21

---
title: My 1st NET #ChatGPT Plugin. Demo Included!
published: true
date: 2023-06-26 15:13:46 UTC
tags: EnglishPost,ChatGPT,CodeSample,EnglishPost
canonical_url: 
---

![Sample NET ChatGPT Plugin GitHub Repository](https://brunocapuano.files.wordpress.com/2023/06/github-repository-for-a-sample-chatgpt-plugin-written-in-net-1.png?w=1024)

Hi!

Plugins are the [hottest topics now](https://dev.to/azure/code-building-plugins-for-chatgpt-microsoft-bing-and-edge-4pk5), for both ChatGPT and Microsoft products like BingChat and Windows Copilot.

After learning and testing using Javascript and Python versions, I decided to create one in NET. I even talk several times about it in my podcast ([in Spanish)](https://go.ivoox.com/rf/111140745).

## NET Pet Store ChatGPT Plugin Repository

And here is the repository with the working demo:

#### [https://github.com/elbruno/OpenAI-Plugin-NET-Sample](https://github.com/elbruno/OpenAI-Plugin-NET-Sample)

This is a QuickStart for sample for creating [ChatGPT Plugin](https://openai.com/blog/chatgpt-plugins) programing in NET, using GitHub Codespaces, VS Code, and Azure.

To gain access to ChatGPT plugins, [join waitlist here](https://openai.com/waitlist/plugins)!

![El Bruno Pet Search plugin working in dev mode in ChatGPT](https://brunocapuano.files.wordpress.com/2023/06/04plugininstalled.png?w=1024)

## Run and Test Locally

1. Open `src/OpenAI.PlugIn.NETSample/Program.cs`. Press [F5] To Start Debugging. Choose your preferred Debugger.
2. Once the project is compiled, the app should be running. A new browser will open with the URL [http://localhost:5100/swagger/index.html]. 
3. Open ChatGPT. Select `GPT-4`, open the PlugIn Options. Open the PlugIn Store and select [Develop your own plugin] 
4. Type [http://localhost:5100], and select [Find Manifest File]. ChatGPT will search for the manifest file at [http://localhost:5100/.well-known/ai-plugin.json] and load the plugin information. Select [Install LocalHost PlugIn] 
5. The PlugIn will now be enabled in ChatGPT 
6. We can now test the plug in. ChatGPT will use the Pet plugin for pets related questions.  

Here is the plugin working in devMode in ChatGPT.

![who is the oldest pet?](https://brunocapuano.files.wordpress.com/2023/06/05oldestpets.png?w=934)

I’m working on adding CodeSpaces support to the repo, so no local development environment will be needed!

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

More info in [https://beacons.ai/elbruno](https://beacons.ai/elbruno)

* * *
Diario de Vue 3
Tags: spanish, vue, webdev
Published: 2023-06-26 14:48:45

A lo largo de mis 5 años de experiencia he tenido la oportunidad de conocer y probar muchas herramientas que han sido de gran utilidad, por esta razón decidí empezar con esta serie donde compartiré mi conocimiento adquirido de este maravilloso framework.

## Contenido

- <a href="https://dev.to/dowar/herramientas-de-vue-3-2ehn" target="_blank">Herramientas</a>
- <a href="https://dev.to/dowar/curso-de-vue-3-3ila" target="_blank">Curso</a>
How to network and create a personal brand?
Tags: programming, beginners, productivity, devjournal
Published: 2023-06-26 14:44:24

Let's say I have the right skills for a given position. I can't find an application page in the company I desire. How do I go about dealing with this situation? If I message the recruiters and HR of the company, I just get left on seen. How do I expand my network of connections and create new opportunities for myself?

I want to create a personal brand and an online presence, any tips on that as well?

If you are someone with experience in this matter, comment to let us know your strategies to form new connections and establish an online brand.
Advice for real-time data system infrastrucutre
Published: 2023-06-26 14:42:55

There is a case to collect transaction data in real time. And there is an api that return transaction data from transaction id. And there are millions of transaction ids. There is an api that can get last transacton id. And that number increases every second. Also, Aggregated information like daily active user or daily transaction should be retrieved. What would be the best approach to do this?

I tried to run the ETL code in infinite while loop and stored those raw data into PostgreSQL. But not sure how to get the statistics information like daily active users or number of transaction per day. May I create the aggregated table manually while inserting raw data to table? Or May I run the sql query to get statistics information? Note: This is the real-time data.
A special family tradition
Published: 2023-06-26 14:34:09

Hhhhhhh!!,
I'm happy now to share you 
a special family tradition , but It's
amazing on this blog in my life.

There are some special family tradition
in instant born I was took the religion for 
pray in Adventist until now my family we
we are Adventist, In my family every one 
welcome visitors visit my family ,In my 
family we can't panic all things are easiest.

we are family which are happy now 
because work together without any 
conflicts even morning we praise 
the lord for protect us.

we are one in my life,
THANK YOU!!!!!
Ricostruzione di ambienti virtuali
Published: 2023-06-26 14:32:36

La **[ricostruzione 3D degli ambienti virtuale](https://www.wegroups.eu/ricostruzioni-3d)** è una tecnologia che permette di creare rappresentazioni realistiche e dettagliate di beni culturali, come edifici, siti archeologici e monumenti.
Queste rappresentazioni possono essere utilizzate per la documentazione, la conservazione, la valorizzazione e la fruizione dei beni culturali.
L'uso di tecnologie di realtà virtuale e aumentata permette anche di fruire in modo interattivo delle ricostruzioni 3D.



**[ricostruzioni 3d beni culturali
](https://www.wegroups.eu/ricostruzioni-3d)**
**[ricostruzione 3d archeologia
](https://www.wegroups.eu/ricostruzioni-3d)**
**[ricostruzione virtuale sito archeologico](https://www.wegroups.eu/ricostruzioni-3d)**

**[ricostruzioni virtuali siti archeologici
](https://www.wegroups.eu/ricostruzioni-3d)**
**[archeologia 3d](https://www.wegroups.eu/ricostruzioni-3d)**
Why the software process Model is important
Tags: programming, webdev, softwareengineering, sre
Published: 2023-06-26 14:01:07

Software Process models have great importance in the development of software products. Every software model control, manage, guide, and monitor the software development process. Software process models give a clear way for the development process.

**We discuss some important reasons why software process models are important given below.
**

- Every Software model provides the software development cycle that helps us to efficient and effective development.
- By using the Software development process model, we can get the requirements from the customer very effectively.
- The software process model provides an effective way of requirement management.
- The software Process model defines the product business modeling.
- It provides the testing environment throughout the development cycle.
- It provides the complete details of the project by documenting all the processes during development.
Like: SRS, Design Document, Feasibility Reports, Testing Reports  

- Modern software products are faster and more efficient because they were built using certain engineered techniques these techniques are software process models.
- Modern software products are quality products because they were built using certain formal techniques during the development phase production house follows the software process models and test each step again and again to improve the quality of the product.
- Life Critical systems need more effective and efficient planning to complete the software product. In this situation, software process models give us the way of planning to complete such types of software systems.
- The modern software product is used to reduce the workload of a company and some origination needs software systems because they want the exact statistics of customers and if the software product failed to satisfy the needs of customers, then this type of software development is worse because this process had not used the software process models and leads to business failure.
- The software process Model Provides quick and early delivery of software products by reducing development.
- The software process model provides the Architectural Design and System design of the software systems.
- In the Software process model, the development of self-organization and motivations are very important areas of interactions like co-location and pair programming.
- In the Software process model, the development of the demos of the working software is the best way of communicating in the software development with stakeholders of the software product instead of just describing the documentation to all stakeholders.
- In software development, the requirements are very important for the development of the software product to gather complete, clear, and rich requirements for software to interact with customers.
- In software development responding to change is a challenge and the agile model is focused on quick changes in continuous development.
O poder transformador do Developer Relations #DevRel
Tags: devrel, developer, motivation, career
Published: 2023-06-26 13:50:27

Ei pessoas, hoje quero compartilhar com vocês algo realmente empolgante: o poder transformador do Developer Relations (DevRel)! 


Como parte(euquipe) da área de DevRel na Vindi, tenho a incrível #oportunidade de ajudar pessoas desenvolvedoras a atingirem todo o seu potencial e impulsionar o sucesso da nossa empresa. Depois de uma longa trajetória em consultoria e #suporte de informática para pequenas #empresas, encontrei minha verdadeira paixão ao embarcar nessa área inovadora. 

Imagine que por meio de programas #educacionais, #meetups e entrevistas com convidados especiais, a área de DevRel na Vindi tem o prazer de colaborar com o crescimento profissional da #comunidade de tecnologia e claro de nossa equipe. 

No dia a dia eu compartilho dicas de #agilidade, engenharia de software, esclareço motivações sobre a cultura e valores que norteiam nossa empresa, colaboro com lideranças tech a manter fluxo de desenvolvimento de forma adequada a realidade do #produto, acompanho as dores das pessoas desenvolvedoras e ajudo a pensar em como melhorar nosso ambiente de trabalho, e acima de tudo, levo conhecimentos que agregam valor à vida dos nossos colaboradores. 

**Mas alguns ainda podem se perguntar: Como investir em DevRel e programas educacionais pode ser uma verdadeira revolução para minha empresa?**

Pesquisas e tendências de mercado comprovam que o investimento em programas de desenvolvimento profissional é uma estratégia vencedora. Empresas que adotam essa abordagem têm mais chances de atrair talentos qualificados e mais chances de reter seus melhores colaboradores. Acredite ou não, 84% dos profissionais afirmam que o acesso a oportunidades de aprendizado e #desenvolvimento influencia diretamente sua permanência e engajamento com a empresa. 

Na área de DevRel, nosso objetivo é fomentar uma cultura de aprendizado contínuo, fornecer recursos valiosos e criar um ambiente de trabalho inspirador para nossa equipe. Através de workshops, cursos e mentorias, e observação constante, capacitamos pessoas desenvolvedoras a se manterem atualizados com as últimas tendências e tecnologias. 

Ser parte da área de DevRel me permite estabelecer conexões valiosas com a comunidade de desenvolvedores. Ao compartilhar conhecimentos, participar de eventos e criar parcerias estratégicas, posicionamos nossa marca como uma referência no mercado. Isso atrai talentos excepcionais, gera oportunidades de negócio e fortalece nossa reputação como uma empresa inovadora e comprometida com o crescimento da comunidade de tecnologia em geral. 

**A área de DevRel, por ser "cross" é muito mais do que um cargo, é uma verdadeira força impulsionadora! **

Então, se sua empresa ainda não possui uma área de DevRel, é hora de considerar essa transformação. E se já tem uma área de DevRel, compartilhe conosco como essa área tem sido uma verdadeira mudança de jogo para sua equipe nos comentários. 

Juntos, vamos inspirar +empresas a abraçarem o poder do DevRel e impulsionarem seu crescimento!