teleren/devto huggingface dataset:
Why you need hooks and project
Published: 2024-06-22 18:18:07

1. Install Vite:
Open your terminal or command prompt and run the following command to create a new Vite project:

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

2. Navigate to Your Project Directory:
Change directory to your newly created project directory by using command cd.

3. Install Dependencies:
Once inside the project directory, install the necessary dependencies by running: `npm install`.

4. Run the Development Server:
Start the development server to see your project in action: `npm run dev`.

We will explore hooks by creating a project and understanding the problems we solve.

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

The addValue function is defined to increment the counter variable. It logs the current counter value to the console and then increments it by 1.

## Understanding problem 

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

<h3>Issues and Improvements</h3>

Like we use one variable to more places if we do these things in classic javascript it create many references like document.getElementById, document.getElementByClassname, change the text inside the button. So, in react to change in UI react provide hooks
1. <u>State Management:</u> The counter should be a stateful variable to ensure that changes are reflected in the UI. This can be achieved using the useState hook.
2. <u>Reactivity:</u> To make the component re-render on counter changes, the counter variable should be managed by React's state.


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

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

The useState hook is a function that takes an initial state as an argument and returns an array with two elements: the current state value and a function that allows you to update that value.
•  useState Hook: const [counter, setCounter] = useState(0); initializes a state variable counter with an initial value of 0 and provides a function setCounter to update it.
•  State Update: setCounter(counter + 1); updates the state, causing the component to re-render and display the updated counter value.

<h3>Here it is another example of useState</h3>

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zh0p1z84k5b624bc2y5v.png)
First Post
Tags: linux, beginners
Published: 2024-06-22 18:17:46

Hello there,

I hope my first post finds everyone well. As someone who follows the Feynman technique, which emphasizes explaining concepts as if you're teaching a child, I decided to share what I'm learning with others. Sharing is a great way to track progress, and I want to document this journey of "grinding" until I reach my goal, and hopefully help everyone else reach theirs too. I can't promise daily posts, but I will post as often as I can. I want to start this journey with a dive into **Linux**, and I plan to discuss each topic in a way that might be different from what you’ve seen elsewhere. I'm also open to people's criticism and corrections—not seeking perfection, but aiming to learn and benefit others as well.
30 Days of Google Cloud- a review
Published: 2024-06-22 17:51:25

30 days of Google Cloud is a program primarily run by Google Developer Student Clubs as a way to introduce students into the realm of Cloud Computing via the Google Cloud Platform, commonly referred to as the GCP.

Here, tracks/milestones are given which are to be completed within a given timeframe to be eligible for certain prizes. All the work should be done via the cloudskillsboost platform in order to achieve the milestones, which consists of labs, courses videos, quizzes, etc.

Every year, the syllabus is different, & the program name may also vary, like being called as Cloud Study Jams. Previously, there used to be a lot of seats, but these days, things are pretty limited & a bit harder.

Here, I am sharing my experience as a GDSC Lead organizing Cloud Study Jams for the first time in my college campus.

`Registration process`
Before people could participate join the program, they are required to fill out an interest form to register their keenness.
Note that crucial information is usually taken using this form & one should fill it carefully to avoid complications during the entire campaign. Since these days, seats are pretty limited, would say that filling forms ASAP maximizes chances of getting accepted.

`Approval process`
The data team then cross checks each individual application, filtering out the incorrect & inapplicable ones. Note that the GDSCs do not influence the selection process once the data is sent from the latter. Eligibility criteria varies from program to program, so pay heed to the guidelines before jumping to conclusions.

`Campaign period`
This is the actual time period for carrying out the tasks of the campaign. mails are sent out by the GDSC regional team to the eligible participants, & sometimes, a leaderboard might also be included in the mix to make things more competitive, especially when the number of approved folks for a campaign is more than the number of rewardable slots. Generally help is available from the organizing GDSC, in the forms of specially curated speaker sessions, resource list, offline doubt clearing sessions. Note that it is upto the particular GDSC if they want to conduct a session or mentoring session, as I have seen many unable to do so due to issues/conflicting schedules. Make the most out of this by joining the community groups, asking questions(don't spam anyway), facilitate helping others & yourself in the turn by the means of networking. Alternatively, you are at your free will to join sessions from one GDSC & complete the campaigns from another.
Computer Programming: What is Looping?
Tags: devchallenge, cschallenge, computerscience, beginners
Published: 2024-06-22 17:59:01

*This is a submission for [DEV Computer Science Challenge v24.06.12: One Byte Explainer](https://dev.to/challenges/cs).*

<!-- ## Explainer -->

<!-- Explain a computer science concept in 256 characters or less. -->

Looping is a way to execute a set of instructions multiple times without repeating code. Without it, you’d have to write needlessly longer and harder to maintain programs. Loops enable iterative operations, resulting in brief, readable, and powerful code.

<!-- ## Additional Context -->

<!-- Please share any additional context you think the judges should take into consideration as it relates to your One Byte Explainer. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image to your post (if you want). -->

<!-- Thanks for participating! -->
The Concept of Looping in Computer Programming
Tags: devchallenge, cschallenge, computerscience, beginners
Published: 2024-06-22 17:58:37

*This is a submission for [DEV Computer Science Challenge v24.06.12: One Byte Explainer](https://dev.to/challenges/cs).*

<!-- ## Explainer -->

<!-- Explain a computer science concept in 256 characters or less. -->

Looping, in computer programming, is a way to execute a set of instructions multiple times without repeating code. Without looping, you would have to write needlessly longer and harder to maintain programs. Examples are “for” loops and “while” loops.

<!-- ## Additional Context -->

<!-- Please share any additional context you think the judges should take into consideration as it relates to your One Byte Explainer. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image to your post (if you want). -->

<!-- Thanks for participating! -->
[JS]Bootstrap version converter
Tags: javascript, bootstrap, css, beginners
Published: 2024-06-22 17:56:34

Cambiar la versión de Bootstrap con JavaScript.

Estructura
- conversions
 - b3to4.json
 - b3to5.json
 - b4to5.json
- css
 - style.css
- js
 - script.js
- index.html

Script para convertir código HTML con bootstrap 3 a una versión actual ej: Bootstrap 3 a Bootstrap 4 o Bootstrap 3 a Bootstrap 5.

Toda la función se realiza en script.js mientras que utiliza los json para obtener las clases y luego reemplazarlas.

Url del proyecto: [https://github.com/JkDevArg/bootstrap-version-converter](https://github.com/JkDevArg/bootstrap-version-converter)
Benchmarking & diagraming my home network
Tags: homelab
Published: 2023-04-02 20:33:05

---
title: Benchmarking & diagraming my home network
published: true
description: Just a update on what my home network looks like at the moment
tags: homelab
---

Every once and a while I have to call my ISP and renegotiate my internet speed.

Before this last call, I was at 300/300 Mbps, which I thought was quite fast and ridiculous.

I call or chat online when I start seeing offers for new customers well exceeding the performance or beneath the price I'm paying.

I've learned to expect they will not give you the same price as new customers, as they are introductory offers and only last 1 year or so. But using that as leverage can spark up some pretty good deals.

So I was paying $90 for 300/300, I saw new customers were offered $45 for 1G/1G.

Popped in a chat with my ISP and now I'm at 2G/2G for $90.

Now with 2G/2G, I'm going back and reevaluating my network and seeing if I need to address any issues.

Thus, this network diagram was born. It's still slightly a WIP, I want to better document the actual ISP provided equipment and connections, but I'm going out to see the new D&D movie with any luck, so this will have to do for now.

![Network diagram outlining network speeds between certain devices](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cd2y49vi4g5u1xu6bzu.png)

One thing I've found interesting is my M1 MBP is not performing as well as my desktop that is running in nearly the same configuration. I might need to check cables there. Happy to see the desktop is reaching nearly gig speeds at least.

Now to ponder about upgrading the internal network to support 2.5G (:sad-face:).

I didn't think I'd be here doing this. I thought 1 Gig Fiber was out of reach even but it seems things are changing quickly.

If you haven't reached out to your ISP lately, I'd highly suggest doing so.
React Interview HTML Table Question
Published: 2024-06-22 17:50:43

Create an HTML table clicking on a cell of which activates that cell by providing some additional css to it.
**Note**: Only one cell can be active at a time.

AppTable.js

```JS
import React, { useEffect, useState } from "react";
// import { useEffect, useState } from "react";
import axios from "axios";
import './ApiTable.css'

const ApiTable = () => {
  const [userList, setUserList] = useState([]);
  const [selectedCell, setSelectedCell] = useState({row:-1, col:-1});

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        console.log(res);
        setUserList(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  const clickCell = (index, column) => {
    setSelectedCell({row: index, col: column});
  }

  return (
    <div className="table-container">
      <table className="table-style">
        <tr>
          <th>ID</th>
          <th>name</th>
          <th>Username</th>
          {/* <th>Email</th>
          <th>Phone</th>
          <th>Website</th> */}
        </tr>
        {userList.map((user, index) => {
          return (
            <tr onClick= {(e)=>{console.log(e)}}key={user.id}>
              <td className = {(index==selectedCell.row && selectedCell.col==0)?"selected-cell":null} onClick={() => {clickCell(index, 0)}}>{user.id}</td>
              <td className = {(index==selectedCell.row && selectedCell.col==1)?"selected-cell":null} onClick={()=>{clickCell(index, 1)}}>{user.name}</td>
              <td className = {(index==selectedCell.row && selectedCell.col==2)?"selected-cell":null} onClick={()=>{clickCell(index, 2)}}>{user.username}</td>
              {/* <td>{user.email}</td>
              <td>{user.phone}</td>
              <td>{user.website}</td> */}
            </tr>
          );
        })}
      </table>
    </div>
  );
};

export default ApiTable;
```

AppTable.css

```CSS
/* .table-style{
    border: 1px solid black;
} */

.table-container{
   display: flex;
   justify-content: center;
   align-items: center;
}

table, td, th{
    border: 2px solid red;
    border-collapse: collapse;
    align-items: center;
}


.selected-cell{
    color: yellow;
}
```
index.js

```JS
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import ApiTable from './ApiTable';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ApiTable />
  </React.StrictMode>
);

reportWebVitals();
```
Getting Started with React.js: A Beginner's Guide
Tags: react, javascript, beginners, programming
Published: 2024-06-22 17:40:45

**Introduction**

Introduce what React.js is, its popularity, and why beginners should learn it.

1. What is React.js?

- Definition: Explain React.js as a JavaScript library for building user 
 interfaces, primarily for single-page applications.
 
- Beautifull touch by facebook (now our meta);

2. Why Learn React.js?

- Popularity and Demand: Mention its widespread use in the industry.

- Performance: Touch on its efficient rendering with the virtual DOM. 

Friends 🍟 we can stope theory && startup with React JS [](https://react.dev/)

3. Setting Up Your Environment

> Make sure installed Node js in your system


```
npx create-react-app my-first-react-app
cd my-first-react-app
npm start
```

4. Start By our Favor Hello World;

> You can start editing from App.js file (sub main of a main file which is Index.js);

```
// src/App.js
import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;
```

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


Happy Coding;
Dr. Anahita Gupta: The Premier Pediatric Dentist in Janakpuri
Published: 2024-06-22 17:39:20

When it comes to your child's dental health, finding a trusted and skilled paediatric dentist is crucial. In Janakpuri, one name stands out above the rest—Dr. Anahita Gupta. Renowned for her gentle approach and exceptional expertise, Dr. Anahita Gupta has become a favourite among kids and parents alike. This article explores why Dr. Anahita Gupta is the go-to paediatric dentist in Janakpuri and highlights the reasons why you should consider visiting her clinic for your child’s dental care needs.https://www.dantvilla.com/pediatric-dentist-in-janakpuri
Is Your Child’s Smile in Safe Hands? Best Pediatric dentist in Pune - Hadapsar
Published: 2024-06-22 17:37:49

When it comes to our children's health, every parent wants the best. But have you ever wondered if your child’s dental care is in the best hands? Meet Dr. Pranil Survashe, Pune's leading pediatric dentist, whose expertise and child-friendly approach have made him a favourite among both kids and parents alike.

Why Choose Dr. Pranil Survashe for Your Child's Dental Care?https://www.kidsdentistpune.in/pediatric-dentist-in-hadapsar
Entity Framework e SQL Server
Tags: sqlserver, ef, csharp, dotnet
Published: 2024-06-22 17:33:42

Entity Framework
O EF é um ORM (Object-Relational Mapping). Foi desenvolvido pela Microsoft. Ele permite que os desenvolvedores trabalhem com dados relacionais usando objetos .NET, eliminando a necessidade de grande parte do código SQL de baixo nivel que seria necessário de outra forma.

Modelos de Dados: O EF permite criar um modelo de dados a partir de um banco de dados existente (Database First), criar um banco de dados a partir de um modelo de dados (Model First) ou definir o modelo de dados por meio de classes de código (Codigo First)

Consulta de dados: Com EF, é possivel consultar dados usando LINQ (Language Integrated Query), que permite escrever consultas usando a sintaxe de linguagem de programação .NET, gerando uma integração mais fluida e intuitiva

Trabalhando com Objetos: Permite que os desenvolvedores trabalhem com dados como objetos de domínio, usando as mesmas técnicas e padrões usados em outros aspectos do desenvolvimento de software orientado a objetos.

Migrações: O EF oferece suporte a migrações de banco de dados, permitindo que os desenvolvedores atualizem a estrutura do banco de dados de forma incremental, sincronizando as mudanças no modelo de dados com o banco de dados físico.

Lazy Loading e Eager Loading: Suporta lazy loading, onde os dados relacionados são carregados sob demanda, e eager loading, onde os dados relacionados são carregados antecipadamente, oferecendo flexibilidade na maneira como os dados são recuperados.

Como instalar para SQL Server (Visual Studio)
No Visual Studio basta seguir: Ferramentas -> Gerenciador de Pacotes do Nugget -> Gerenciar Pacotes do Nugget para Solução:

Na aba de Procurar busca por Entity Framework e selecione Microsoft.EntityFrameworkCore.SqlServer e instale no seu projeto.

Para criar um contexto (Conexao com banco de dados), você deve utilizar o nome da sua aplicação + Context: NomeDaAplicacaoContext.cs

```cs
using Microsoft.EntityFrameworkCore;

public class NomeDaAplicacaoContext : DbContext
{
    private string connectionString = "Server=<host>,<port>;Database=<DataBaseName>;User Id=<NomeDeUser>;Password=<Senha>;Encrypt=False;";

    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
    {
        optionsBuilder.UseSqlServer(connectionString);
    }
}
```
javascript exeuction context
Tags: javascript, context, webdev, interview
Published: 2024-06-22 16:23:21

javascript execution context
That is, execution context in JavaScript
The first means an environment in which the code is executed, and in order to imagine it, we put in our minds that it is a large container that contains something that we can use, for example, variables.

Inside the large container, we may have small containers. Each container, of course, contains the code that will be executed, and with the code there are also the needs that the code may need in order to execute, as well as the variables.

There is something that manages this

This engine provides JavaScript, which varies from browser to browser

When the JavaScript engine receives the code, it downloads it and starts creating a code tree

It starts to work automatically on the large container that we talked about, and it contains every thing in the code and every thing that the code can need.

If you tried to debug the browser and it got a breakpoint

The debug will of course start from breakpoint and will remain, for example, function

While you are monitoring the stack we talked about, you will find that put the global execution context in the stack

Then creates something called the Function Execution Context for the function, which is a breakpoint.

This is the small container we talked about

But apart from debug, every invoke function is executed by an execution context

This means that every caller on a function, this function creates an execution context in which the code for the function and anything needed in the function.

There is another execution context called eval function execution context, and this is executed when the engine finds the breakpoint called eval()

Where do these context exeuctions go to be implemented?

When the engine finds a function, it creates the execution context for this function

Then he puts it in the stack to be executed

Of course, the global execution context is created automatically and placed in the stack first

This is a simplified explanation of the execution context

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kub1yjilps8okzs1qs62.gif)
Pediatric Dentist in Kharadi
Published: 2024-06-22 17:33:10

Pediatric Dentist in Kharadi: Your Child's Smile is Our Priority
Finding the right pediatric dentist is crucial for ensuring your child's dental health. For residents of Kharadi, a thriving suburb in Pune, this task is made easier with several qualified pediatric dentists available to cater to the specific needs of children. A pediatric dentist in Kharadi specialises in providing dental care for infants, children, and adolescents, ensuring that every child

https://www.kidsdentistpune.in/pediatric-dentist-in-kharadi
🌟 Exciting News: Unstoppable in Namma Yarti Open Mobility Challenge! 🚀
Published: 2024-06-22 17:27:58

Hey Everyone,

**Certifications Link:** [Unstop-Certifications](https://github.com/Vidhey012/My-Certifications/tree/main/Unstop)

I'm thrilled to share that I've participated in the Namma Yarti Open Mobility Challenge! This challenge has been an incredible opportunity to explore innovative solutions and contribute to shaping the future of mobility. It's been an enriching experience, allowing me to delve into Problem Solving Key Experience.

I'm grateful for the support and encouragement from everyone who has been part of this journey. Your support means a lot to me!

Looking forward to more such opportunities that push boundaries and drive meaningful change!
🎉 Exciting News: Unstoppable Flipkart Grid 5.0 Certificate Achieved! 🏆
Published: 2024-06-22 17:26:25

Hey Everyone,

**Certifications Link:** [Unstop-Certifications](https://github.com/Vidhey012/My-Certifications/tree/main/Unstop)

I'm thrilled to share that I've successfully completed the Unstoppable Flipkart Grid 5.0 program! This experience has been incredibly enriching, allowing me to dive deep into ML & Full Stack. It's been a fantastic journey of learning and growth, and I'm excited to leverage these new insights in my professional endeavors.

A big thank you to everyone who supported me along the way. Your encouragement means the world to me!

Here's to embracing new challenges and continuously pushing the boundaries of knowledge!