teleren/devto huggingface dataset:
Securing ASP.NET Core MVC 6 App - Add roles - Part 3
Tags: webdev, security, dotnet, programming
Published: 2022-06-27 19:00:52

In the previous two articles of this series, we have learned how to add the authentication to an ASP.NET Core MVC 6 based on Auth0 and how to display a profile page.
In this post, we will add the roles to the users, and we will deny or allow access to views.

## Create and assign a role
First of all, we need to create a new role in the Auth0 Dashboard.
Navigate to "User Management" -> "Roles".
Click on the button at the top of the page, called "Create Role".

Insert the name of the role and a description.

![Admin Role](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mk6f5iye8v5dguwsl07l.png)

In our example, we are using the name "Administrator".

From the Users list (in the User Management menu), click on a user and click on the tab "Roles".
And then, click on the button "Assign roles".

![Assign roles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xu6dgmpo6pc4f0aldxk.png)
 
Select the role that you want to assign to the user.
In our case "Administrator".

## Add Rules to Auth0
Now we need to add the role to the authorization token.
In order to do that, we need to create a new rule from the menu "Auth Pipeline" -> "Rules".
Create an empty rule and paste the code below.

```csharp
function (user, context, callback) {
  const assignedRoles = (context.authorization || {}).roles;
  const idTokenClaims = context.idToken || {};

idTokenClaims['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'] = assignedRoles;

  context.idToken = idTokenClaims;

  callback(null, user, context);
}
```
Now we are ready to come back to the code in our project.

## Add roles to the ASP.NET MVC 6 Project
If you followed the previous steps in the other two posts, you don't need to change the existing code, but we need to add the roles management in a Controller.
For instance we want to deny the access to the page "Privacy" if the user is not an administrator.

Open the "HomeController.cs" file and replace the code of the action Privacy with the code below.

```csharp
[Authorize(Roles = "Administrator")] 
public IActionResult Privacy()
{
    return View();
}
```
In this example only a user with at least the role "Administrator" can access to this page.

## Conclusion
In this short series we have learned how to implement a basic authentication flow with Auth0.
As you can see it's very easy but at the same time Auth0 offers a complete implementation for your next project in terms of security and productivity.

If you want to try Auth0, you can follow this [link](https://a0.to/signup-for-auth0) to create your own account and start to use it in your next project!
Build a 3D Website with Three.js
Published: 2022-06-27 18:52:35

## Project Demo 

[http://threejs-sahulnotsodevv.vercel.app/](http://threejs-sahulnotsodevv.vercel.app/)

# Build a 3D Website with Three.js

Create React App


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

## Install the following dependencies
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhai34bqqtnwap99k4bl.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqatuk0e3twawzpjbtu9.png)

## Run the project

```python
npm start
```
Object Storage
Tags: objectstorage, storage, aws, cloudskills
Published: 2022-06-27 18:33:00

 Object Storage, a relatively new comer in the storage world when compared to Block and file storage, arose from the needed to find a better way to store safely data that are being generated at an unprecedented rate these days due to the limitation of the traditional File Storage.

 Object Storage is an affordable way to store unstructured data, something that was hard to do with file Storage. Object Storage 
 offers storage at a relatively low cost and is designed to served areas like website hosting, web application. That is why it is widely adopted by all major cloud service providers like Amazon Web Service, Microsoft Azure and Google GCP as their primary storage.
   Object Storage by design has no built-in limit, thus are is the preferred method of storing safely and affordably unstructured data like audio, video, emails and more. 

_Let’s go a little deeper_

In an Object storage, data items that makes up the object along with its metadata are kept together in a single repository instead of being kept as files in folders or blocks, that allows the object to be easily located over a distributed system.
 
In Object Storage, Metadata are extremely important and can contain extremely detailed information regarding a particular object such as geolocation, camera type and more 

_ Advantages of Object Storage _

 As previously mentioned, Object storage allows unstructured data to be stored and managed with ease at any time. 
Object Storage can be configured to replicate contents, therefore allowing deleted or damaged object to be restored.

With Object Storage, no need to overspend, you only pay for what you use, making it one of the most affordable storage options on the market, that is why it is widely adopted by the major public cloud providers.
How to configure password in Amazon ec2 instance
Tags: aws, ec2instanc, awsec2instance, ubuntu
Published: 2022-06-27 18:21:06

- In this tutorial, I have added the configurations required for ec2 user password authentication for AWS ec2 Linux instances.
- As by default ec2 instance don't have any password .Follow these simple steps to configure password in your linux instance .

`Note:- It is not recommended to configure password in cloud instances unless required .Private key-based authentication is always the safest way to access cloud instances.`

**Step 1:** Log in to the linux machine using ssh client of your choice using the private key. 
- For Windows machines, you can use putty for connecting to the instance. [Click here](https://www.ssh.com/academy/ssh/putty/windows) to know how to use putty on Windows .

- If you are using Mac or Linux, you can use the following command to connect to the instance.

```bash
ssh -i your-key.pem username@(public-ip-address)
```
**Step 2:**  Enter the following command to open sshd_config file

```bash
sudo nano /etc/ssh/sshd_config
```
**Step 3:**  Find the line containing “PasswordAuthentication” parameter and change its value from “no” to “yes“

![Find the line containing “PasswordAuthentication” parameter and change its value from “no” to “yes“](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n31n99iztj4jwjmc7lpg.png)

**Step 4:** Now press ctrl + x button and then click on Y button to save the changes

![Now press ctrl + x button and then click on Y button to save the changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uw50qp4n67vpnegyb6yu.png)
 
**Step 5:** Setup ec2 user password using the “passwd” command along with the username.  

You need to enter the password twice. For example, if you want to set up a password for “centos” user, use the following command.

```bash
sudo passwd centos
```

In AWS, different ec2 instances have different usernames. Following are the default usernames of some popular ec2 instances.

| Instance     | Username      |
|--------------|---------------|
| Ubuntu       | ubuntu        |
| Redhat Linux | ec2-user      |
| Amazon Linux | ec2-user      |
| CentOS       | centos        |
| Debian       | admin or root |

**Step 6:** Now, restart the “sshd” service using the following command.

```bash
sudo service sshd restart
```
Step 7: Once the "sshd" service is restarted successfully , you can log out and log in using the password you set for the user. 
For example,

```bash
ssh ubuntu@34.10.100.1
```

I hope this "How to configure password in Amazon ec2 instance" article helps. Let me know in the comment section if you face any errors.
Add storybook to your SvelteKit app
Tags: svelte, storybook, frontend, tips
Published: 2022-06-27 18:02:52

---
title: Add storybook to your SvelteKit app
published: true
description: 
tags: svelte, storybook, frontend, tips,
# cover_image: 
# Use a ratio of 100:42 for best results.
---

Pre-requisites: 
- have a SvelteKit project. You cannot install Storybook on an empty project. 

Step 1: at your root project, run `npx storybook init`. During the installation, you will be asked if you want to run the 'eslintPlugin' migration on your project? Say yes. This is needed for the best Storybook experience. 

Step 2: `npm run storybook` 
You will probably get an `[ERR_REQUIRE_ESM]` error, something like this: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lbt0394a8z5kt1bd05q.png)
 
Fix: 
- in .storybook, rename your main.js file to main.cjs 
- in main.cjs file, replace this line `"preprocess": require("../svelte.config.js").preprocess` with `preprocess: import('../svelte.config.js').preprocess`.

Et voila! Enjoy 🙌
Como criar um hook para fazer requisições, usar loading e tratar erros no React
Published: 2022-06-27 17:58:44

Olá devs
Para evitar o uso excessivo de useState, facilitar o tratamento de erros e utilizar loading no react eu utilizo esse hook 

```
import { useEffect, useState } from 'react';
import { api } from '../axios';

export function useFetch<T = unknown>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [isFetching, setIsFetching] = useState(true);
  const [error, setError] = useState<Error | null>(null);
  useEffect(() => {
    api
      .get(url)
      .then((res) => {
        setData(res.data);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setIsFetching(false);
      });
  }, []);

  return { data, error, isFetching };
}
```
para utilizar esse hook é muito simples, basta importar o hook e passar uma url

```
const url = "https://pokeapi.co/api/v2/pokemon/ditto"
const {data, isFetching, error} = useFetch(url)
```

Utilizando o data você tem acesso a resposta de requisição, ou seja todos os dados da requisição feita. O isFetching permanesse como true ate que a requisição seja feita, podendo assim, utilizar essa validação para colocar um loading na sua aplicação, ate que a requisição termine. E por último se sua request der um erro, esse state (error) será true, podendo assim fazer também a validação desse caso.

Como descrito no começo do artigo a vantagem de usar esse hook é não precisar criar varios states em cada component da sua aplicação, além de facilitar a sua vida esse hook deixa seu código mais limpo.
HARGA BAN FORKLIFT SOLID UKURAN 28X9-15 (8.15-15)
Tags: forkliftt, banforklift, banforkliftsurabaya, jualbanforklift
Published: 2022-06-27 17:52:45

Saat anda melakukan pembelian ban forklift maka hal yang utama anda lakukan adalah melihat [daftar harga ban forklift](https://banforklift.xyz/index.html) terbaru. Harga ban forklift sangat berpengaruh terhadap biaya pengeluaran yang akan anda belanjakan ke toko jual ban forklift terdekat di kota anda. Semisal anda berada di Sidoarjo, maka anda perlu cek di toko jual ban forklift di Sidoarjo untuk mendapatkan harga ban forklift sesuai budget anda tentunya. Begitu anda telah mendapatkan harga ban forklift yang sesuai, maka segeralah untuk membeli ban forklift tersebut.

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

Selain harga ban forklift, anda perlu melihat bahwa ukuran yang anda inginkan sesuai dengan ukuran ban forklift yang sebenarnya. jangan sampai anda salah memilih ukuran ban forklift, sehingga menyebabkan kesalahan pembelian. Ukuran ban forklift berbeda-beda tergantung kapasitas unit forklift tersebut. pada umumnya, ban forklift memiliki standart ukuran yang sama meskipun berbeda merk unit forkliftnya. Misalnya ban forklift Mitsubishi 3 Ton, mempunyai ukuran ban yang sama dengan ban forklift Toyota 3 Ton, begitu juga dengan merk lain.

Ban Forklift 3 ton memiliki ukuran ban forklift depan 28x9-15 (8.15-15) dan ukuran ban forklift belakang 650-10. kedua ukuran ban forklift tersebut memiliki perbedaan harga yang signifikan. dikarenakan ban forklift 650-10 lebih kecil dibandingkan ban forklift 28x9-15, sehingga jelas mempengaruhi harga ban forklift.
Yang pasti daftar harga ban forklift sangat lah bervariasi tergantung dari ukuran ban forklift yang anda inginkan. selain harga ban forklift yang bervariasi, maka perbedaan harga ban forklift juga tergantung dari jenis ban forklift itu sendiri. anda menginginkan tipe ban forklift pneumatic atau tipe ban forklift solid.

daftar harga ban forklift di setiap wilayah dan toko berbeda-beda, hal ini dipengaruhi transportasi dan kelangkaan ban forklift disuatu wilayah tersebut. saran kami, jangan menilai harga ban forklift, tapi cobalah untuk menilai dari fungsi dan keawetan ban forklift. semisal anda hanya butuh ban untuk forklift yang hanya digunakan sehari cuman 4 jam saja, bahkan dalam satu bulan hanya digunakan hanya 200 jam saja, maka lebih baik anda memilih ban pneumatic.

Source : [https://banforklift.xyz/index.html](https://banforklift.xyz/index.html)
Introducing GTM to nuxt webapps.
Tags: javascript, vue, nuxt
Published: 2022-06-27 17:40:00


When you introduce GTM to Nuxt.js, all you have to do is only 3 things.

1. install a module
2. insert GTM's id
3. testing


## 1. install a module

Type a command below.

```
npm i @nuxtjs/gtm
or
yarn add @nuxtjs/gtm
```

When you finish installing the module, move to next part.

## 2. insert GTM's id
Open a file named nuxt.config.js and insert GTM's id.

```
export default {
  modules: [
    '@nuxtjs/gtm',
  ],
  gtm: {
    id: 'GTM-XXXXXXX'
  }
}
```

For other options, please check here. 
https://github.com/nuxt-community/gtm-module#readme


## 3. testing
Install a add-on to chrome and test weather it is working correctly or not.
https://chrome.google.com/webstore/detail/tag-assistant-legacy-by-g/kejbdjndbnbjgmefkgdddjlbokphdefk



Writer 
Takeshi Sawaki

CEO at [CoDigital, inc.](https://codigital.co.jp/en) in Japan.
CoDigital, inc. is a Japanese Digital Marketing Agency.

・We primarily deal in digital marketing services such as Advertising, SEO, Social Media and introducing CRM / MA tools in Japan. ・We work with a variety of industries such as SaaS Companies, Staffing Agencies, Website Design Company, Media and Software and App developers providing digital marketing consulting, implementation and analyzing services.
Começando o Desafio: 100daysofcode
Tags: python, 100daysofcode, programming, português
Published: 2022-06-27 17:38:50

Olá! 
Após ter terminado a graduação em Ciências da computação e ter aproveitado o tempo ocioso que me sobrou, resolvi que preciso revisar algumas coisas, me aprofundar na linguem que trabalho atualmente(Python) e quero aprender outra linguagem(Ruby).
Então, resolvi começar o desafio 100 dias de código e espero que eu consiga seguir o desafio e assim evitar a procrastinação nossa de cada dia.

# O que é o 100daysofcode?

O desafio tem o proposito de ajudar te ajudar a criar o hábito de  escrever código no mínimo 1 hora por dia para alcançar seu objetivo. 
O site oficial do desafio é o [100daysofcode](https://www.100daysofcode.com/) e nele dá para encontrar mais informações. 

# Iniciando

Bom, aqui dou inicio aos trabalhos haha.
Ainda não tenho um cronograma definido de estudos, estou providenciando. Pretendo começar revisando algumas coisas do Python.
Hoje vou começar revisando sobre leitura e escrita de arquivos com Python e ao final pretendo publicar posts falando sobre e mostrando a aplicação, na prática, do assunto estudado.

É isto, que os jogos comecem!
Problema para ingresar al VPS
Published: 2022-06-27 17:33:53

Estaba cofigurando mi VPS con centos y y su opanel de control sin ningun problema, lo deje para irme a dormir y cuando lo retomé no puden entrar mas.
No puedo entrar por ssh ni por la página del panel de control.
Probé reiniciar el firewall, reinstalar el SO con el CP y hasta reinstalar el So sin nada, todo con el mismo resultado.
Si hago un hospot con el celular y me conecto a esa red entro sin problemas.
Con la mia no.
El panel de control cuando intento entrar con mi red me dice que la conexión ha caducado y si entro por ssh me dice:

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

Ya no se que mas hacer. Si alguien me puede ayudar se los estaría agradecido, desde ya gracias a todos.
Laravel 9 Contact US Form with Send Email Example
Tags: webdev, laravel, tutorial, php
Published: 2022-06-27 17:20:27

Today what you are going to learn:
ello all! In this article, we will talk about laravel 9 contact form send email. let’s discuss about contact us form in laravel 9. step by step explain contact form validation in laravel 9. This article goes in detailed on laravel 9 feedback form lesson.

In this lesson we will create a contact us form with name, email, phone, subject, and message. we will also add form validation for the contact form. After submitting the form we will store data in the database and send an email notification to the admin email. so let's follow the below step to make this lesson.

## [read more](https://freecoder.co/post/laravel-9-contact-us-form-with-send-email-example-9921)
FruitsClassifier on Fruits 360
Tags: python, pytorch, deeplearning, machinelearning
Published: 2022-06-27 17:20:18

### _On this project, I build a classifier on the Fruits 360 dataset using Pytorch. I use a pretrained model and transfer learning, as well as do hyper-parameter search to help increase the accuracy._

&nbsp;

## **✍️ Documentation:**

### - _Full Training on [Kaggle] | GoogleNet | 94% Acc_

### - _Efficient Training with [Pytorch Lightning]_

### - _[GitHub Page]_

&nbsp;

## **📰 Dataset structure**

    train/test
        |___apple_braeburn_1
            |___r0_0.jpg
            |___r0_10.jpg
                ...
        |___carrot_1
            |___r0_0.jpg
            |___r0_10.jpg
            ...

&nbsp;

## **Large batch visualization**

![batch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lu8xrjuvf9e5u5ilsm2w.JPG)
 
&nbsp;

## **Separate visualization**

![se](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0uwwf250mroo5k28hro.JPG) 

&nbsp;

## **Single fruit visualization**

![singbatch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l635r9wh0af35v81r034.JPG)
 
&nbsp;

## **Single fruit visualization with transforms**

![singtr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqsc128aps968sguu6uz.JPG)
 
&nbsp;

## **Separate visualization with transforms**

![setr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pt0apk4hwluxcqfa9ocm.JPG)
 
&nbsp;

## **Batch visualization with transforms**

![batchtr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvkh8i3wqjdxczc9wbd4.JPG)

&nbsp;

## **Pixel Intensity**

![pixel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vco7wc1jlqnew9y9a7ax.JPG) 

&nbsp;

## **Visualize the number of classes**

![class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7fyr4rznmm1ufvss5zx.JPG)

&nbsp;

## **Visualize loss and accuracy**

![lossacc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lg29sp0q5p887jdedype.JPG) 

&nbsp;

## **Visualize model predictions: green(correct) and red(incorrect)**

![pred](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0ledgs4sc6rk9gj95oe.JPG) 

[kaggle]: https://www.kaggle.com/code/alevi0989/fruits-360-googlenet-94-acc
[GitHub Page]: https://qbaocaca.github.io/fruits_classifier/
[Pytorch Lightning]: https://dev.to/qbaocaca/fruitsclassifier-with-pytorch-lightning-49gi
TypeScript Tutorial for beginners to advance
Tags: typescript, javascript, webdev, programming
Published: 2022-06-27 17:19:32

TypeScript is an open-source, object-oriented language developed and maintained by Microsoft, licensed under Apache 2 license.

TypeScript extends JavaScript by adding data types, classes, and other object-oriented features with type-checking. It is a typed superset of JavaScript that compiles to plain JavaScript.

🟢 Full Tutorial here: [](https://itznur07.medium.com/typescript-tutorial-for-beginners-to-advanced-introduction-9eb8daac6819)
FruitsClassifier with Pytorch Lightning 🍉
Tags: pytorchlightning, python, deeplearning, machinelearning
Published: 2022-06-27 17:19:04


### _On this project, I convert my FruitsClassifier from Pytorch to Pytorch Lightning. I employ a callback module, a checkpoint mode to store and save the model state_dict. I conduct resume training, plot loss and accuracy from previous trains. I check the accuracy for each class and make predictions on images from outside the dataset._

&nbsp;

## **✍️ Documentation:**

### - **[Convert my Pytorch model to Pytorch Lightning]**

### - **[FruitsClassifier on Fruits 360]**

### - **Full Training on [Kaggle] | GoogleNet | 94% Acc**

### - **[GitHub Page]**

&nbsp;

## **💥 Training Epochs**

![training](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bezifxzyre8r66q82pcp.png) 

&nbsp;

## **🍇 Visualize Loss and Accuracy**

![lossacc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w06tjcrfoaonlml82pra.png)
 
&nbsp;

## **🍌 Visualize model performance on test dataset**

![visualize_model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aiur08w6w5vc2njpacjf.png)

&nbsp;

## **🍎 Accuracy of each class**

![accofeach](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n13yhf7t1ydi4e7jowj9.png)

&nbsp;

## **🍍 Image Predictions from outside the Dataset**

![prediction](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydie0i35bwlh10kf73rv.png)

&nbsp;

## **🍑 Accuracy of each class: green(correct predictions), red(incorrect predictions)**

![accofeach2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nagli9dtn1t2s93wl3sg.png) 

[Convert my Pytorch model to Pytorch Lightning]: https://blogbybao.wordpress.com/2022/06/24/1261/
[FruitsClassifier on Fruits 360]: https://qbaocaca.github.io/fruits_classifier/
[Kaggle]: https://www.kaggle.com/code/alevi0989/fruits360-pytorch-lightning-0-937-acc
[GitHub Page]: https://qbaocaca.github.io/fruits_clf_lightning/
HTML Introduction
Tags: webdev, javascript, beginners, tutorial
Published: 2022-06-27 15:20:44

## HTML Introduction
HTML is the standard markup language for creating Web pages.
##What is HTML?
1.  HTML stands for Hyper Text Markup Language
2.     HTML is the standard markup language for creating Web pages
3.     HTML describes the structure of a Web page
4.     HTML consists of a series of elements
5.     HTML elements tell the browser how to display the content
6.     HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

### A Simple HTML Document
####Example

```
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html> 


```

### Example Explained

  

1.   The <!DOCTYPE html> declaration defines that this document is an HTML5 document
2.     The <html> element is the root element of an HTML page
3.     The <head> element contains meta information about the HTML page
4.     The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
5.     The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
6.     The <h1> element defines a large heading
7.     The <p> element defines a paragraph

## What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag 	Element content 	End tag
<h1> 	My First Heading 	</h1>
<p> 	My first paragraph. 	</p>
<br> 	none 	none

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!