teleren/devto huggingface dataset:
How to Install React in Laravel 8
Tags: laravel, react
Published: 2021-05-29 20:09:21

## What is React.js?
React is an open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

In this blog, we will learn how to install React JS in Laravel 8. If you don't know how to install Laravel 8 in React JS, this example tutorial is for you. I will show you step by step to install react js in your Laravel 8 application.

We will use the Laravel UI package to install React JS in the Laravel 8 application. I will show you React JS installation process with auth or without auth in Laravel 8. So let's start our tutorial. So you will also see Laravel 8 React auth or Laravel 8 React authentication process.

If you are a beginner with Laravel 8, I am sure it will help you install React in Laravel 8. It's a straightforward and easy way to install React JS using the Laravel UI composer package.

Laravel UI package provides a way to install basic bootstrap, react and react setup, and Vue js or angular js. They also offer auth scaffold for login and registration with all of those javascript frameworks or libraries. Laravel 8 provides an easy way to work with bootstrap, react, vue, and angular js.

### Install Laravel
First, open Terminal and run the following command to create a fresh Laravel project:
```
composer create-project laravel/laravel react-js
```
or, if you have installed the Laravel 8 Installer as a global composer dependency:
```
laravel new react-js
```

#### Install Laravel UI

Install Laravel UI package for starting with Laravel 8 with React JS. So if you want to start with Laravel 8 with React, run the below command:
```
composer require laravel/ui
```

####Install React
```
php artisan ui react
```

#### Install React with Auth
```
php artisan ui react --auth
```

#### Install Required Packages
I assume that you have the Node and NPM installed on your development machine. If not, then have a look at this tutorial: Install Node.js and npm

You can check the Node and NPM version, Run the following command:
```
# Node Version
node -v

# NPM Version
npm -v
```

Now install NPM, Run the following command:
```
npm install
```

Now run NPM, Run the following command:
```
npm run dev
```

Run Laravel Server
```
php artisan serve
```


Thank you for reading this blog.
Introduction
Tags: gradle, guide, tutorial
Published: 2021-05-29 19:43:50

#### Preface
Gradle's documentation is more than only hard to read - oftentimes it feels like an information deadlock, where one document refers to another, which in turn refers back to the document you came from. In addition, parts of the descriptions, examples and practices are completely or partially outdated. All in all, despite the richness of the docs, it's uncleanly written and apparently does not receive any maintenance and care. Even Thehe company provides free trainings on the powerful build tool, however, a proper guide would make Gradle far more accessible to developers. That's the reason this guide exists.

#### The goal of this guide
The goal of this guide is not to introduce you to every feature of Gradle. Gradle is extensive and full of functionality. But I think, the purpose of a guide isn't explaining everything in detail anyway. It rather aims to cover the basic and some advanced concepts together with the fundamental mechanisms, giving you the knowledge to go on with your own research about the Gradle build tool. With that said, let's start!

----

# What is Gradle and how does it work?
Gradle is an open-source [build automation](https://en.wikipedia.org/wiki/Build_automation) tool that is designed to be flexible enough to build almost any type of software. It's extremely extensible and customizable. In fact, the actual building tool is nothing more than a framework which needs to be filled with custom logic. 

Gradle is based on Java, hence running inside the JVM. To instruct Gradle to build a project, we have to provide it information about **what** and **how** that should be accomplished. So the logic (e.g. compiling source files) has first to be added to Gradle - it does not do that out of the box! Fortunately, those things are already implemented by other developers and packaged for use, so there is (in most cases) no need for us to reinvent the wheel. Instead, we can just take that package and say that this **task** should be executed for us. Those _tasks_ and "packaged logic" (spoiler: those are called plugins) are some of the basic concepts you learn about soon.

# Installing Gradle
To be able to run Gradle and experiment alongside reading this guide (I highly recommend you to experiment), first of all you need to install Gradle. As the whole process of how to do that is well-documented by the Gradle documentation itself, I just refer to it [here](https://docs.gradle.org/current/userguide/installation.html).
Now as you have Gradle installed, you can run a lot of commands. An overview you can find [here](https://docs.gradle.org/current/userguide/command_line_interface.html).

----

If you have any questions or constructive criticism on the articles, post them in the discussion section below!
The Problem With My Website
Tags: reactnative, androidappdevelopement, paytm
Published: 2021-05-29 19:01:35

![Image](https://firebasestorage.googleapis.com/v0/b/portfolio-4e28f.appspot.com/o/personalBlogs%2Fpaytm.png?alt=media&token=9c6615d9-673d-4dd7-81de-a53584fbc857)


So in 2018, I was working on this project where I needed to integrate Paytm’s payment gateway to an app. I never used Paytm's gateway before in any of my applications. So I was researching on it a lot. After one day of research I started to work on it. In half day the integration was done, but there was an issue. 
 
The payment was only working via paytm's wallet and not by any debit or credit card. Me and my colleague [Aditya](https://www.linkedin.com/in/adityarshinde/) worked on it for another half day, but we did not find any solution for that. So finally we tweeted Paytm on this issue and started to wait for the response.

On the weekend me and my friend went outside for the dinner and I was trying to pay the bill by Paytm wallet but the transaction was not happening. Then a message came from the Paytm that ***I have to first complete Paytm KYC.*** And then I thought may be this the issue with my application. 

So on next day me and Aditya completed our KYC. Came back to office and tried to do any random transaction on my app but still it was not showing any card option to do payments. I was very frustrated with that, we went outside where temperature was like killing our body and till my payment was not happening. We gave a break and waited for the Paytm official to contact us. 

After two days Paytm’s response came and what the solution was very easy and laughable. They told that the integration you are trying is in **“Test"** mode, to do transaction with your debit card  you have to change your paytm mode to **“Transaction”** mode. 

I was laughing like anything because in other payment gateway like in **“Instamojo”** or **“PayUMoney”** you can use dummy debit card details to do payment and I thought it will be same with paytm too. I was wrong. HAHAHA   

> Always read the documentation carefully.

While writing down this blog also I was smiling becuase it was very silly mistake on my side. Well that's how you develope a mobile application I guess, by try and error. Cheers.

If you want to read more Do visit [my website](https://www.pradnyanandpohare.in). Cheers.
How to close a port in use on Windows
Tags: programming, tutorial
Published: 2021-05-29 19:19:41

Several times there was a task in my simple day-to-day life that often took me five minutes to remember the commands to execute it at the prompt, or a few more minutes to do a quick google search and remember the process as a whole.

Thinking that maybe some more people can go through the same simple stress, combining with the idea that knowledge does not occupy space and with the old desire that I have to write for you, I decided to write this short post that can help several people, just like me and use him as a pilot here in the medium.

**Problem**
Daily running the famous **yarn start**, between one project and another a door was in use and I wasn't even using it anymore. Because of that, I was going to remember the process that consisted of opening the cmd, setting some commands, taking the PID of the process in question and then ending it. Of course, there must be simpler ways to do the same, but at the moment I follow this and never remember it in my head. So below I will list how to do this role in a practical and quick way:

- Let's start by opening the command prompt by running it as a system administrator.
- After that go ahead and type in it **netstat -a -n -o**

![Image showing how the processes are listed.](https://miro.medium.com/max/700/1*8t7-WGavFjFV3bpIG_z_NA.png)
<figcaption>Image showing how the processes are listed.</figcaption>

Used with the **a** argument, the netstat command shows the set of connections and ports being listened to on the computer.

Used with the **n**. Argument, the netstat command shows addresses and port numbers in digital format, without [name resolution](https://br.ccm.net/contents/264-dns-sistema-de-nomes-de-dominio)(pt_BR).

Used with the **o** argument, the netstat command details the process number associated with the connection.

- After this we just need to identify the PID related to the connection we want to terminate, in my case it is port 9001, so we have 11348.

- Still at the prompt we trigger the following taskkill / PID <pid> command

- In place of <pid> we replaced it with 11348 and then the taskkill / PID 11348

- We then receive the following information at the prompt

![Prompt image stating that the process has ended.](https://miro.medium.com/max/506/1*w7_gid_HVbuWCQSsGcMUnQ.png)
<figcaption>Prompt image stating that the process has ended.</figcaption>

**But the list of processes is very long**
You may notice that when requesting the list of open cases, an extensive result of it will be displayed. There is a way to improve this command by filtering the search results by the **STATE** of the process. So it ends up looking like this:

- **netstat -aon | find / i “listening”**

However, it is important to remember that if your windows is running in a different language, it will be necessary to change “listening” to the term referring to it.

End =]
My Machine Learning Workflow
Tags: machinelearning, ai, learning, attaullah
Published: 2021-05-29 19:10:28



I take a constructive step when working on a problem. Be it programming or my daily doings. This helps me learn a little faster and gives me a clearer understanding of what I'm to do next after each successful step.

Learning ML is no doubt complicated but I hope with this problem solving flywheel that you too can discover as well.

- Problem Definition:
 It's important you start by defining your problems. What problems are you trying to solve? Is it a supervised learning problem or unsupervised learning problem? 

- Data: 
What kind of data do we have? Is it structured (eg. CSVs, spreadsheets, databases etc) or unstructured (Images, Audio etc.)

- Evaluation: 
Define what success means for that project. What Accuracy, precision or recall scores determines the success for your model. E.g. 95%, 80% etc.

- Features: 
What do you already know about the data? Apart from modelling this data, what have you learnt about this data you are working with. This is mostly where Data visualization plays a great role.

- Modelling: 
Based on your problem definition and data, what machine learning model should we use?

- Experimentation: 
Now we have modelled this data,  has the success we earlier defined been achieved. No? What can we do better? What can we try next? Should we try another machine learning model? Should we try tuning the parameters of our current model?

This is how I try solving each problem I face as a machine learning Intern. What's missing? Help me add it in the comment section. 😊


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7d6vrl8l0g1l6ehzt2cb.png)
HM Attaullah
attaullah@ieee.org
Install intel AX200 wireless WIFI 6 driver on Windows Server 2019
Tags: windows, server, 2019
Published: 2021-05-29 19:07:07

---
title: Install intel AX200 wireless WIFI 6 driver on Windows Server 2019
published: true
description: How to install Intel AX200 Wireless WIFI 6 driver on windows Server 2019
tags: windows, server, 2019
//cover_image: https://direct_url_to_image.jpg
---

This is a quick guide on installing the AX200 Wireless Wifi 6 driver on Windows server.
I ran through a problem when installing the Wifi 6 drivers on my Windows server (standard edition) 2019. I downloaded the driver files directly from Intel and it was not installing because of this `A service installation section in this inf is invalid` error.


1. Download the `Intel® PROSet/Wireless Software and Drivers for IT Admins` from https://www.intel.com/content/www/us/en/download/18231/intel-proset-wireless-software-and-drivers-for-it-admins.html and unzip it on the server.

2. Open Powershell on Windows server 2019 and run the following command 

```shell
Add-WindowsFeature -Name Wireless-Networking
```
3. Restart

4. Go into the Device Manager, click update the driver of the unknown device (normally the 2nd or 3rd unknown device)

5. Restart

6. Now you should see the Wifi panel on the bottom right hand corner.


Thanks to [Ruben Mamo](https://rubenmamo.com/solved-a-service-installation-section-in-this-inf-is-invalid-error-when-installing-wifi-driver-on-windows-server/) for the work around. :)
Light/dark mode: the lazy way
Tags: webdev, css
Published: 2021-05-29 18:02:47

## Color scheme

If you already have a website working, and you haven't used any styles (no custom background, no custom color, no custom inputs), then you can use in your HTML:

```html
<meta name="color-scheme" content="light dark" />
```

or in your CSS:

```css
:root {
  color-scheme: light dark;
}
```

This will enable both default `light` and `dark` modes for your website and will follow your system mode (no toggle available in the UI).

You can read more about it here: https://web.dev/color-scheme/.

## System colors

There is also another powerful tool available to us: native system themed colors.

In CSS, you can say that a color should follow the system color for multiple semantic elements, like `LinkText`, or `Canvas` (background color):

![A few examples of system colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itysdasc4tlijyvg12og.png)

The best is that those colors will have automated variants in dark mode.

For the whole list of system colors, and their semantic meaning, you can out the [MDN page](https://developer.mozilla.org/en-US/docs/Web/CSS/system-color), or check them out in the [CSS spec](https://w3c.github.io/csswg-drafts/css-color/#css-system-colors).

## Result

{% codepen https://codepen.io/ayc0/pen/GRWOgaR %}
Get GitHub Updates On Your Discord Server
Published: 2021-05-29 18:30:55

Want to get updates of changes from a certain repository on discord? Its really simple, lemme show you how its done.

First, open the repository, go to setting and click on the "Webhooks" tab.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nsvy1orjd9mm4ch21x6.png)
Click on "add webhook" and then enter your password when you are prompted to do so. You'll see something like this:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcu1upz7g53ilker7gam.png)
 
So first off, change the content type from "x-www-form-urlencoded" to "application/json"

Now for the payload URL. Go to discord. click on a text channel's settings -> Integrations
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z80xd5ss1bjqludt4gig.png)

Click on create webhook, and then click on the "Copy Webhook URL"
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9vyf479cg1ns24ykyr9.png)
Now paste that link in the Payload URL text box and add a "/github" at the end of the url without the quotes

Check the "Send me Everything" radio button and then click on add webhook.
 
And Volia! You now get updates!
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qzttkk9ze97zk3ngd88.png)
Connect with me on [Linkedin](https://www.linkedin.com/in/pranav-viswanathan-7976711b7/)
View my [Github Page](https://github.com/PranavViswanathan)
Why to use React if HTML/CSS/JS works fine?
Tags: discuss, webdev, react, javascript
Published: 2021-05-29 18:11:11

Few minutes ago I was checking the tag section of react on [dev.to/t/react](http://dev.to/t/react) , and I notice that React is just like simple JavaScript _with whole bunch of create element things_.

### My point of discussion is, when React should be used.
* If we take something simple like a Todo List then should we use a react app or do it with use of simple HTML/CSS/JS.
* What benefits a React App app gives over simple HTML/CSS/JS.
* Are people hyped about React because it's made and used by Facebook.
* How to choose wisely when to use and when not to use react.

>Read also:
{% post https://dev.to/areeburrub/hide-navbar-as-scroll-down-in-less-than-10-lines-of-javascript-1i00 %}
Follow:
{% user areeburrub %}
<a href="https://www.buymeacoffee.com/areeburrub" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
Migrating a notebook app from react to Next.js
Tags: react, webdev, showdev, nextjs
Published: 2021-05-29 17:27:24

I created a notebook app in react a few months ago. I wrote article about it.

{% link https://dev.to/m_ahmad/create-a-notebook-app-with-react-charaui-and-framermotion-dej %}

Now I migrated this app to Next.js smoothly. 
Here are the few steps that will guide you how i did this.  

# Step 1
Installed `next` in my project:

```
yarn add next
```

# Step 2
Updated `package.json` with the following scripts:
```
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}
```

# Step 3
Created pages folder:
```
src/pages/_app.tsx
src/pages/index.tsx
src/pages/projects/index.tsx
```

# Step 4
Migrated code:
```
from src/index.tsx and src/app.tsx
to src/pages/index.tsx and src/pages/_app.tsx
```
> Note: I didn't copy paste code here.

# Step 5
Deleted these files:
``` 
src/index.tsx
src/app.tsx
```

# Final step
* Used `next/router`. 
* Replaced `chakra links` and `react-router-dom links` with `next/link` in different files.

# App
**Demo Link:** [Notebook](https://next-notebook.vercel.app/)
**GitHub Repo:** [Repo](https://github.com/MA-Ahmad/next-notebook)
Is "Refactoring UI" worth the money?
Tags: tailwindcss, ux, design
Published: 2021-05-29 17:27:16

[Refactoring UI](https://www.refactoringui.com/book) is a PDF book that aims to help developers improve their design skills. It was written by the creators of [TailwindCSS](https://tailwindcss.com/) - [Adam Wathan](https://twitter.com/adamwathan) and [Steve Schoger](https://twitter.com/steveschoger). The book is quite popular among developers who are wondering how to come up with a good-looking UI on their own. Chances are you've already seen some recommendations online. It's not cheap though. This article is written to help you decide whether it worth your money. 

## What's inside

There are two versions of Refactoring UI you can buy. **Essentials** and **The complete package**. The Essentials contains a book in PDF format and three video tutorials. The complete package contains a book, video tutorials, component inspiration gallery, color palettes, curated font showcase, and icon library.
  
At the time of writing this article, the price of the Essentials package was $99, and The complete package was $149.

## Which version to buy?

The main value of Refactoring UI is in a PDF book. If you just want the book, buy the Essentials. If you have additional money to spare and are interested in some of the items from The Complete package, go for it, it's also very well done.
  
I, personally, bought The complete package but only used the book and videos.

## Book and videos

If you want to know what to expect out of the book, check out this [article by Steve Shoger](https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886). The book is written in the same format. It's 215 pages of tips and hacks to apply to make your design better.
  
Three tutorial videos included in the bundle show Steve redesigning an existing web page while giving his comments. You can find similar videos from Steve [here](https://www.youtube.com/watch?v=RC9cYdbQ-_c&list=PLDVpvW8ghDr9tasku_YvuTy_l0xPUtOHE&index=5) for free.

## Value

It's important to understand that this book won't make you a designer. Nor is it intended to do so. It's not a deep dive into design fundamentals, typography, and color theory. It is a cheat sheet of UI tricks that you can apply instantly to make your design look better.

So if your goal is to make a career in graphic design, and you expect that this book will equip you with everything necessary to achieve it, you will be disappointed.

But if you are a developer who wants to make better-informed UI decisions and be less dependant on the actual designer in the team, this book is the best value for money on the market. It will help you come up with much better-looking user interfaces. You won't be disappointed.
🔴 Build Instagram REELS Clone using HTML and CSS
Tags: webdev, beginners, tutorial, html
Published: 2021-05-29 17:16:59

Hello, Everyone. I Built Instagram Reels Clone using just HTML & CSS and little bit of JS. I Just Love to build these to practice my HTML & CSS Skills. I made a tutorial video to help beginners to improve there html & css skills to build real world projects.

------------------------------------------------------------------

**➜ Tutorial Video:**

{% youtube bxVSIv84xmE %}

**➜ Github:** https://github.com/somanath-goudar/html-css-projects

**Note:** [Subscribe](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA) to My YouTube Channel, This Week I Will also be building **Netflix and Twitter clone** with just HTML & CSS.

------------------------------------------------------------------

**➜ You may also like my other posts:**

{% link https://dev.to/somanathgoudar/facebook-clone-using-just-html-css-beginners-tutorial-2fe5 %} 

{% link https://dev.to/somanathgoudar/build-a-youtube-clone-with-just-html-css-for-complete-beginners-4fk1 %}

{% link https://dev.to/somanathgoudar/build-tiktok-clone-in-just-30-mins-using-html-and-css-213l %}
Awwward : Images following cursor, REACT.JS + UNSPLASH API
Tags: react, javascript, api, tutorial
Published: 2021-05-29 17:04:54

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krx4s8e9nykbij6t423g.gif)

I love spend time to study cool website on awwward.com, there are always impressive and inspiring effects.

In this tutorial we are building an interactive cursor using React and the Unspash API.


https://thecodingfreak-contact.medium.com/awwward-images-following-cursor-react-js-unsplash-api-5091d012432c

https://twitter.com/TheCodingFreak1
https://github.com/TheCodingFreak-Github