teleren/devto huggingface dataset:
Fetching Data in React
Tags: react, javascript, webdev, beginners
Published: 2021-11-23 15:24:46

## Introduction
This blog post will teach you how to fetch data from an external API and use it in your React apps.

Before you start reading you should be familiar with React,  [useState and useEffect hooks](https://dev.to/bhagatpratik07/introduction-to-react-hooks-3h02)  in React.


## Methods of Fetching Data

We will look at the following ways to fetch data: 

1. Using Fetch API
2. Using async function
3. Using Axios
4. Using custom hooks


## Using Fetch API
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It provides a global fetch( ) method that provides an easy, logical way to fetch resources asynchronously across the network.

We will use the fetch( ) method which takes a single argument i.e the path you want to fetch data from and it returns a promise containing a response.

```
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))
``` 

## Using async function

The async function returns a promise and the await keyword makes the function wait for a response.

Here's how we can use async/await to fetch data


```
async function fetchData() {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/todos/3"
      );
      const data = await response.json();
      console.log(data);
``` 

## Using Axios

Axios is a library that is used to fetch data and it already gives the result in JSON, so we don't have to convert it.

First, we have to install Axios with the following command: 

```
npm install axios
```

To use axios in our project we have to import it into our project


```
import axios from "axios"

  React.useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/todos/3")
    .then((response) => (console.log(response));
  }, []);
``` 

Here we used the .get() method to make a get request to our endpoint.

##  Using custom hook
We will make our custom react hook to fetch data which will take a single argument that is the endpoint we want to fetch the data from.


```
import { useEffect } from "react";

const useFetch = (url) => {
  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      });
  }, []);
};

export default useFetch;
``` 

Like this blog if you found it helpful and connect with me  on [Twitter](https://twitter.com/bhagatpratik07) and  [LinkedIn](https://www.linkedin.com/in/pratik-bhagat07/)  
## Thank you for reading ;)
Black and flickering screen encountered after upgrading to Windows 11
Tags: windows11, windows10, blackscreen, windows
Published: 2021-11-23 15:24:42

I installed Windows 11 last few weeks in Microsoft Page using Windows 11 Installation Assistant (https://www.microsoft.com/en-us/software-download/windows11). 

After few weeks of using it, my screen sometimes became black and flickering. Somehow it happened thrice, first one was when I installed Adobe After Effects. Second was when I was in a zoom meeting. Third one was when I was just scrolling at my Chrome browser. Moving the mouse will make the fonts and almost all the icons and images in the screen blurry and seems flickering. 

I tried to update my display drivers and all are still up to date. Yet no luck, I still experienced the issue. I also installed all the pending windows update for windows 11, but the issue still occurred. That's when I decided to go back to Windows 10.

Luckily, there's still a Recover button in my settings and I went back to Windows 10. 

I don't know if I am the only one who experienced this issue after upgrading to Windows 11. If you have the same issue and you happened to find a fix, I appreciate if you leave some comments and advance thank you. 

**Follow Me: https://twitter.com/beacreativedev**
Los trajes de boda de Sastrería Gentleman

Published: 2021-11-23 15:22:04

¿Qué trajes de boda ofrece Sastrería Gentleman?
Ubicada en Madrid, Sastrería Gentleman dispone de trajes y camisas a medida con una amplia variedad en telas y diseños. Entre ellos destacan los trajes de boda para caballeros con diseños originales, donde el novio podrá escoger el de su preferencia. Además, la sastrería cuenta con un personal experto y profesional que proporcionan asesoramiento personalizado y confeccionan el traje ideal para la ceremonia nupcial, siguiendo las directrices del novio e invitados. También dispone de un servicio de sastrería a domicilio, en el cual el personal de la empresa se desplaza hasta el sitio acordado en la cita para mostrar las telas o tejidos disponibles y tomar las medidas del cliente. Igualmente, una vez elaborado el traje realizan los ajustes y transformaciones que sean necesarios para que el traje quede perfecto.

Tendencia en trajes de boda en España con Sastrería Gentleman
El día de la boda es crucial para los novios y sus familiares, por eso, estos deben exhibir un traje que impresione y además le aporte comodidad en todo momento. Por ello, en Sastrería Gentleman se esfuerzan en diseñar y confeccionar el traje para la ceremonia nupcial, aportando múltiples ideas y sugerencias para crear un traje único acorde a la personalidad del novio y los invitados. Para lograrlo disponen de un catálogo online, donde los clientes podrán visualizar cada uno de los diseños desde la comodidad del hogar. La diversidad de diseños novedosos que confeccionan, tanto clásicos como contemporáneos, hace que Sastrería Gentleman se distinga de otras sastrerías, poniendo en tendencia los trajes para bodas en España y constituyéndose como una de las sastrerías más cotizadas.

A través de sus trajes de boda a medida, Sastrería Gentleman ha impactado el mercado europeo, logrando que miles de novios consigan el traje ideal para su boda con modelos originales y de gran calidad.

https://www.confines.es/
¿Amantes al cine? El equipo perfecto para disfrutar al máximo, según cinedesalon.com

Published: 2021-11-23 15:21:19

No existen límites para crear un cine en casa, solo es preciso conocer los implementos necesarios y cómo distribuirlos correctamente. Por ello, a continuación, se expone una lista con los equipos tecnológicos que no pueden faltar en el hogar de una persona amante al cine.

¿Qué debe haber en la casa de un amante al cine?Cada usuario tiene aficiones diferentes. Basándose en ellas, se dedican a adquirir diferentes productos para disfrutarlas en sus momentos de ocio y tiempo libre. Este aspecto, no es diferente para los amantes del cine y todo lo que una buena película conlleva, así que en los hogares no deberían faltar equipos tecnológicos como:

Proyectores: una compra indispensablePor lo general surge la pregunta de ¿Por qué un proyector y no un televisor? Y la respuesta es simple: conseguir la experiencia más parecida al cine es más simple con un proyector. Además, la relación del precio de estos equipos con un televisor convencional es más favorable y ofrecerá mejores resultados.

Claramente, antes de adquirirlo lo recomendable es evaluar el lugar donde se utilizará y asegurarse de que tenga las medidas indicadas para ello.

Pantalla para proyecciónPor supuesto, es un accesorio que no se puede dejar pasar y lo mejor es que puede encontrar en diferentes diseños para ajustarse mejor a la habitación donde se encontrará. No obstante, las más comunes son las fijas de pared o las enrollables. Ambas son de alta calidad, aunque la elección dependerá del espacio disponible.

Altavoces a la alturaAdemás de la buena imagen es preciso tener un sonido que permita disfrutar de cada uno de los efectos especiales y acontecimientos de la película, serie o videojuego. Ciertamente, algunos proyectores incluyen un sistema de sonido, pero para los verdaderos amantes del cine lo mejor es tener un sistema adicional.

Ahora bien, la opción más simple y económica siempre será la barra de sonido. Son ideales para aquellos que montan su particular cine en la habitación. No requieren de instalaciones complejas y siempre y cuando se compren de buena calidad, pueden ser un equipo tecnológico para toda la vida.

El aislamiento no puede faltarNo existe configuración acústica de calidad sin un buen aislamiento. La calidad del sonido que se obtendrá dependerá de las características acústicas de la sala. Para esto, lo más recomendable es que se instalen paneles acústicos en la sala, sin embargo, es la solución más cara.

En caso de necesitar una solución más asequible, puede mejorarse la acústica del salón cubriéndose las superficies de cristal con telas gruesas. La misión es que absorban gran parte de la energía de las ondas que lleguen a ella, y en conjunto, se tendría que colocar una alfombra en el suelo.

https://www.confines.es/
Convert Excel to JSON in ReactJS in just 2 steps
Tags: react, javascript, tutorial, webdev
Published: 2021-11-23 15:20:54

**Hello Developers 🙌**

Today we will see how to convert Excel to JSON

We will use `xlsx` package.

No more talking let's jump into the coding part.

### Install `xlsx` package

```npm
npm i xlsx
```

### Create a basic structure for file upload

```html

<form>
    <label htmlFor="upload">Upload File</label>
    <input
        type="file"
        name="upload"
        id="upload"
        onChange={readUploadFile}
    />
</form>

```

### Convert Excel file to JSON

```js
const readUploadFile = (e) => {
    e.preventDefault();
    if (e.target.files) {
        const reader = new FileReader();
        reader.onload = (e) => {
            const data = e.target.result;
            const workbook = xlsx.read(data, { type: "array" });
            const sheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[sheetName];
            const json = xlsx.utils.sheet_to_json(worksheet);
            console.log(json);
        };
        reader.readAsArrayBuffer(e.target.files[0]);
    }
}

```

Kaboom!🔥 in just two simple steps, you can convert Excel to JSON

**HappyCoding**

Closing here 👋👋👋

> This is **Shareef**.
> My recent project [yourounotes](https://yourounotes.vercel.app/)
> My [Portfolio](https://portfolio.shareef.vercel.app/)
> Twitter [ShareefBhai99](https://twitter.com/shareefBhai99)
> [Linkedin](https://www.linkedin.com/in/nadeem-shareef-7a8394182/)
> My [other Blogs](https://dev.to/shareef)
mmm.page — Make livelier, free-form personal websites. Try editing the homepage itself.
Tags: showdev, webdev, design
Published: 2021-11-23 15:07:27

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

Hey all,

I've spent the past few months working on a website builder (works on desktop & mobile) that makes it easy to create automatically-responsive, collage-like websites -- websites that allow you to overlap text, images, GIFs, YouTube videos, etc. etc.

I launched a few months back, and to my surprise it ended up on the [front page of Hacker News](https://news.ycombinator.com/item?id=27128424) and [#2 product of the week on Product Hunt](https://www.producthunt.com/posts/mmm-page-4).

Since then I've patched up a lot of the builder based on user feedback, and wanted to share it with everyone today.

Try here → https://build.mmm.page

## Motivation
Websites have begun to look more and more similar to one another, which makes sense, given how tedious responsive design can be, but I also lamented that increasingly rare personal website that I used to see everywhere. So I wondered: what if I could create a builder that was so easy to use -- one that would handle responsiveness, performance, usability, deployment, maintenance, etc. for you -- that more people could quickly launch a website of their own?

So this is my attempt at that. 

## Notable Features
* **Automatically responsive.** Every website automatically works across all screen sizes (try it with the [the builder](https://build.mmm.page)).
* **Smart embeds.** Paste in a supported link (YouTube, SoundCloud, Bandcamp, CodePen, Spotify, a few others) and it will automatically embed playable content.
* **Actual drag-and-drop.** No grids or locking. Overlap, rotate, and position just like you would with a scrapbook.
* **Custom domains.** 
* **Draw on your pages.** Draw/doodle directly on your websites.
* **Free, optional pro.** It's free forever. Upgrade only if you need custom domains or more blocks/pages!

## Future
A lot more features coming. Soonest are custom fonts + custom code support. Going into 2022, one of the biggest priorities will be the community/discovery features.

## Links
Discord: https://discord.gg/4ZCvv8aNKd
Twitter: https://twitter.com/mmmdotpage
Showcase: https://showcase.mmm.page

Try here → https://build.mmm.page
Follow [@xhfloz](https://twitter.com/xhfloz) for updates
How to Manage Threads in JavaScript / TypeScript / NodeJS
Published: 2021-11-23 15:06:25

# node-threads
## a Simple Module to Create Threads
[Commonjs Example](https://github.com/Titan3301/node-threads/blob/main/examples/commonjs.cjs)
[Modernjs Example](https://github.com/Titan3301/node-threads/blob/main/examples/modernjs.mjs)
[TypeScript Example](https://github.com/Titan3301/node-threads/blob/main/examples/typescript.ts)
### CommonJS Example
## At First Get the important files from https://github.com/Titan3301/node-threads
```js
const { createContinuousThreads } = require('./commonjs.cjs');
const { createThreads } = require('./commonjs.cjs');
const { createThread } = require('./commonjs.cjs');
//Create Thread
createThread(() => {
    setTimeout(function() {
        console.log(`new thread`);
    } , 5000)
})
createThreads(5 , () => {
    conole.log('multiple threads');
})
createContinuousThreads(6 , () => {
    console.log(`6 threads will run at a time :D after they end new thread will be created`);
})
```
### ModernJS Example
```js
import { createContinuousThreads } from './modernjs.mjs'
import { createThreads } from './modernjs.mjs'
import { createThread } from './modernjs.mjs'
//Create Thread
createThread(() => {
    setTimeout(function() {
        console.log(`new thread`);
    } , 5000)
})
createThreads(5 , () => {
    conole.log('multiple threads');
})
createContinuousThreads(6 , () => {
    console.log(`6 threads will run at a time :D after they end new thread will be created`);
})
```
### TypeScript Example
```ts
import { createContinuousThreads } from '../typescript.ts';
import { createThreads } from '../typescript.ts';
import { createThread } from '../typescript.ts';
//Create Thread
createThread(() => {
    setTimeout(function() {
        console.log(`new thread`);
    } , 5000)
});
createThreads(5 , () => {
    conole.log('multiple threads');
});
createContinuousThreads(6 , () => {
    console.log(`6 threads will run at a time :D after they end new thread will be created`);
});
```
Video: “A Year of Being Wrong on the Internet”
Tags: perl, blogging, conferences, video
Published: 2021-11-30 16:20:45

---
title: Video: “A Year of Being Wrong on the Internet”
published: true
date: 2021-11-23 15:00:00 UTC
tags: Perl,blogging,conferences,video
canonical_url: https://phoenixtrap.com/2021/11/23/video-a-year-of-being-wrong-on-the-internet/
---

I’m busy this week hosting my parents’ first visit to Houston, but I didn’t want to let this Tuesday go by without linking to my talk from last week’s [Ephemeral Miniconf](https://thibaultduponchelle.github.io/the-ephemeral-miniconf/). Thanks so much to [Thibault Duponchelle](https://dev.to/thibaultduponchelle) for organizing such a terrific event, to all the other speakers for coming together to present, and to everyone who attended for welcoming me.

{% youtube mC_FLFH8FMw %}
CV template made with Tailwind CSS
Tags: css, tailwindcss, cv, cvtemplate
Published: 2021-11-23 14:59:14

I've never used libraries before but learnt about Bootstrap and Tailwind CSS a little bit this time.
It actually took quite a long time for me to do this like a few hours because I wasn't familiar with the class names of Tailwind CSS. I had to search a lot on their document to find out how to do what I want. I kind of missed css and wanted to use it but I avoided using css at all today since it was to practice and to get used to Tailwind CSS.
I don't think I am going to use it a lot for my portfolio but I'm sure it's really good to use if you know their classes well enough and if you are making something small or have to build something in a very short time. Probably it's useful for creating prototype.

#CV template built with Tailwind CSS
[View the code](https://github.com/daaahailey/cv_template/blob/main/CV_with_tailwinds.html)
![CV template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gsgcqg7geiworxal7j7.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lemcuqh11eqmmx56o20o.png)
<figcaption>Image's from https://2020.stateofcss.com/en-US/technologies/</figcaption>

The satisfaction percentage of Tailwind CSS is quite high. I guess it's being used more and more these days. But it was bit uncomfortable that I couldn't give styles at once for multiple elements. 
<strong><em>Adding base style </em></strong> - maybe it can help that problem a bit.
https://tailwindcss.com/docs/adding-base-styles
With Tailwind CSS, you can change tiny bits of most things compared to Bootstrap.
Bootstrap is more like a library that you can borrow small parts of modules. There are already designed buttons, forms tables, navigators, and etc.
- [Tailwind CSS](https://tailwindcss.com/)
- [Bootstrap](https://getbootstrap.com/)

#Useful links for Bootstrap
- Free theme: https://startbootstrap.com/
- Bootstrap Themes: https://themes.getbootstrap.com/
- Bootstrap Themes: https://wrapbootstrap.com/
- Bootstrap Themes: https://themeforest.net/search/bootstrap
- For server: https://www.iwinv.kr/
- Toast UI: https://ui.toast.com/tui-editor
- Alert : https://sweetalert2.github.io/
Newbie Here, Who Dis?
Tags: beginners, webdev, programming, codenewbie
Published: 2021-11-23 14:58:23

# Who Am I?
 
Just a small town girl...alright enough of that. I just started my 100 days of code journey in October 2021 with ambitions to be a full stack web developer. A career change can be really scary but also fun and exciting. I know the road isn't going to be easy. If it were, everyone and their mom would be in tech. 

# Where Do I Start?

I, like many others, began my search on how to become a software developer/engineer/web developer on Google, Reddit and YouTube. There is tons and tons of information out there and can be a bit overwhelming. Then I stumbled upon [Jeremiah People's](https://www.youtube.com/c/JeremiahPeoples) YouTube channel. Hey look! An Air Force guy like me who wanted to teach himself how to code and did the damn thang! I watched his videos over and over, followed some of the people he follows and watched theirs. Just seeing a regular person, like me, getting into this field was so relatable, I knew I could do it! 

# Why DEV? 

I do have a face for movies as you can see in my profile lol but I enjoy blogging. I want to be able to record my journey in a safe space. Read posts from others going through the struggle and getting tips on good practices in coding and more along the way. 

That's it for now, I'll catch you guys on the next one. Mandy..out.
PHP note: For Loop Performance
Tags: php, softwareengineering, software
Published: 2021-11-23 14:45:41

---
title: PHP note: For Loop Performance
published: true
description: 
tags: php, Softwareengineering, Software
//cover_image: https://direct_url_to_image.jpg
---

About a year ago I started to writing code “BUT NOT JUST FOR WRITING IT”, I focused on to trying to fully understand what I’m about to write, in the whole software life cycle and I was giving attention to the performance, speed, and clean code.

So I was trying to improving my “PHP For Loop”.

I was repeating myself and write for loop on this way below:

```
$array = [0, 1, 2, 3, 4];
 
for($i = 0; $i < count($array); $i++) {
      print_r ($i);
      echo '<br/>';
}
```

The above way of writing for loop is WRONG. Why?

In every loop the Count function is called, and that is code overhead, we have just 5 items in the the array, imagine that we have hundred that will absolutely affect the performance of the script.

Let’s try to improve our loop:

```
$array = [0, 1, 2, 3, 4];
$j = count($array);
for ($i=0; $i < $j; $i++) {
  print_r ($i);
  echo '<br/>';
}
```

Let’s calculate for loop execution time in seconds and do comparison;

The first script: Executed in 4.0531158447266E-6 seconds

The second script: Executed in 3.0994415283203E-6 seconds

Those notes is about small scripts, try to imagine working on large-scale apps or websites. Making attention to these things will improve your code and totally improve your vision as a software developer or web developer.
Best YouTube Channels to learn Spring Boot
Tags: springboot
Published: 2021-11-23 12:35:06

In this post, I will like to suggest a few best YouTube channels to learn Spring Boot.

## 1. [@ Java Guides](https://www.youtube.com/channel/UC1Be9fnFTlcsUlejgfqag0g) // my youtube channel
JavaGuides has 50K subscribers and is considered one of the best YouTube channels to learn Java, Spring Boot, and Full-stack development.

JavaGuides channel publishes video tutorials on the following technologies stack:
* Core Java, Java EE(JSP, Servlet). 
* Spring Boot, Spring MVC, Spring AOP, Spring Rest, Spring Security, Spring data module, Spring Social, Spring Integration. 
* Angular Framework
* ReactJS, React Hooks
* Hibernate, JPA, Mybatis 
* Javascript, HTML and CSS
* MySQL, MS-SQL, Postgres, Oracle, H2 database, MongoDB. 
* Git, Github, CVS, SVN, Ant. 
* NodeJS 
* Restful 
* AWS 
* Jersey Rest using JAX-RS, SOAP, Web Services. 
* Elastic Search 
* Hadoop (Hive, Pig, HDFS, Hbase)

## 2. [@ Java Techie](https://www.youtube.com/channel/UCORuRdpN2QTCKnsuEaeK-kQ)
## 3. [@ Java Brains](https://www.youtube.com/channel/UCYt1sfh5464XaDBH0oH_o7Q)
## 4. [@ Telusko](https://www.youtube.com/channel/UC59K-uG2A5ogwIrHw4bmlEg)
## 5. [@ Tech Primers](https://www.youtube.com/channel/UCB12jjYsYv-eipCvBDcMbXw)
## 6. [@ Amigoscode](https://www.youtube.com/channel/UC2KfmYEM4KCuA1ZurravgYw)
## 7. [@ SpringDeveloper](https://www.youtube.com/channel/UC7yfnfvEUlXUIfm8rGLwZdA)
## 8. [@ in28minutes](https://www.youtube.com/channel/UCLz7LG4YVi7_iyk4yOARcxA)
## 9. [@ Spring Framework Guru](https://www.youtube.com/channel/UCrXb8NaMPQCQkT8yMP_hSkw)

If you know any other good YouTube channel to learn Spring boot then you can suggest in the comment section below.

## Original Post
[Best YouTube Channels to learn Spring Boot](https://www.javaguides.net/2020/06/best-youtube-channels-to-learn-spring-boot.html)
How to be a Microsoft Learn Student Ambassador
Tags: mlsa, microsoftlearn
Published: 2021-11-23 14:35:13

###What is MLSA Program?###
Recently I was selected as MLSA.
It is a program where the student developers learn using the resources provided by Microsoft on the trending technologies and then educate their fellow students on various Technical Skills. It helps building digital communities and connecting with students who share similar passion. 

###Application and eligibility###
You can fill the application form throughout the year, although MLSAs are recruited on a quarterly basis. You can apply at- 
[Microsoft Learn Student Ambassador](https://studentambassadors.microsoft.com/)
Here you would have to answer various questions-
1. Fill the form with your basic personal and academic information.
2. The "Written Sample" section is the most important part of the application. This is what decides your outcome and thus needs major effort. It requires you to answer three questions, one in video and two in written format. 
3. While responding to these questions make sure you answer them in a detailed manner. Write about your motive and passion to the community and the ways in which you can help to expand it. Make a video answer for the question you are most confident about. The video should be brief and presentable describing your response clearly.
4. In the "social media" section, try to fill as many fields as possible. This increases your chances of selection and provides an overview of your connectivity.

You will be informed about your selection or rejection through mail. 
Hope this article helps.

All the best!!!