teleren/devto huggingface dataset:
React Animation using React-reveal
Tags: react, javascript, html, css
Published: 2021-07-21 08:07:00

Hello Everyone Today i am going to show you how to use animation in React using React-reveal

React Reveal is high performance animation library for React. It's MIT licensed, has a small footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll effects.

The best part is animation will happen only if you scroll down to the element not on loading time. At the time of loading page ,only those elements will have animation effect which is visible to the screen.Other parts animation will take effect when you scroll down to them.

Here is the docoumentation link for React-reveal-
https://www.react-reveal.com/docs/


Run this command in your terminal-
```terminal
npm install react-reveal --save
```

Here you will see how to use it-
```javascript
 <Fade left>
//You other code such heading , paragraph,card ,etc 
//In this block ,every thing will be animated
</Fade>
```
You can use following values for the effect 
- top
- down
- left
- right

Here is an example code - 

```javacript
import React,{useState,useEffect} from 'react'
import Fade from 'react-reveal/Fade'

function App() {

  const [todos, setTodos] = useState([])

  useEffect(() => {
    fetch('http://jsonplaceholder.typicode.com/todos')
    .then(res => res.json())
    .then((data) => {
      setTodos(data)
      console.log(todos)
    })
    .catch(console.log)
    }, [todos])

  return (
    <div className=""> 
   
    <h1 className="text-primary text-center display-4 mb-5">React fetch api using useEffect</h1>
      <div className="text-center" style={{display:"block",width:"50%",margin:"0 auto"}}>
        <div style={{display:"flex",flexDirection:"column",justifyContent:"center",justifyItems:"center",width:"100%"}}>
          {todos.map((todo) => (
            <Fade left>
             <div className="card bg-dark text-light my-3">
             <div className="card-body">
               <h5 className="card-title">{todo.title}</h5>
               <h6 className="card-subtitle mb-2 text-muted">
               { todo.completed &&
                 <span>
                 Completed
                 </span>
               }
               { !todo.completed &&
                 <span>
                   Pending
                 </span>
               }              
               </h6>
             </div>
           </div>
           </Fade>
          ))}
        </div>
      </div>
    </div>
  )
}

export default App

```

What we are doing here is fetching some data from api and displaying it in cards
I have put the cards in the <Fade> animation
So, all the cards will have fade effect on scrolling down


NOTE-
1.You need to install bootstrap also either using cdn or npm if you are going to use this code to see the effect
2.The other api fetching part is discussed in previous blog.

I am newbie developer so please highlight any mistake if you find any in this or any other post.
THANK YOU FOR READING THIS POST.

Instagram - https://www.instagram.com/w_a_a_d_u__h_e_c_k
Get blob from azure using Azure.Storage.Blobs
Tags: dotnet, azure, storage, csharp
Published: 2021-07-21 07:27:07

We can store blobs in Azure platform in C# using `Azure.Storage.Blobs`. In this article, we will fetch the blobs without downloading as a file.

## First thing first: install NuGet package
Install NuGet package `Azure.Storage.Blobs`. 

## Import library
```
using Azure.Storage.Blobs;
```

## Get connection string
I assume you have Azure account and thus connection string to connect to Azure Blob Storage. Store this in a variable or constant based on your need.
```
const string CONN_STRING = <connection_string_from_azure_portal>
const string BLOB_CONTAINER = <blob_container_name>
```

## Now the final thing
We will fetch the blob and read it.
```
string filePath = "<optional_path/file_name.extension>";
var blobClient = new BlobClient(CONN_STRING, BLOB_CONTAINER, filePath);
using (var result = await blobClient.OpenReadAsync())
{
  byte[] content = new byte[result.Length];
  result.Read(content, 0, (int)result.Length);
  var jsonContent = System.Text.Encoding.Default.GetString(content);
  // Do whatever you want to do with this content
}
```

That's it. I hope it would be helpful to you. 🙂
List of RGB Color Codes and Their Names
Tags: html, css, javascript, webdev
Published: 2021-07-21 07:23:33

![HTML RGB Color codes and their names](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v06pexu1zfg4pdglmcwn.png)
![HTML RGB Color codes and their names](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6ii6fwa49ii07yajns8.png)

Find all RGB color codes and their names here in my [blog post](https://anjandutta.com/html-rgb-color-codes-hex-name)
React Admin panel
Tags: react
Published: 2021-07-21 06:39:30

I created an Admin panel using React with multiple theme.
by following this video: https://www.youtube.com/watch?v=q8cabjyUTVY

But I used Zustand instead of redux for state management. and I think its so cool especially for small projects. it has much less boiler code compare to Redux.

here is [the demo](https://simple-admin-panel.vercel.app/)
here is the source code: https://github.com/miladr0/simple-admin-panel
Weekly web development resources #81
Tags: weekly, webdev
Published: 2021-07-21 06:32:39



______

##[Sa11y](https://ryersondmp.github.io/sa11y/)
[![Sa11y](https://wweb.dev/weekly/content/81/sa11y.jpg)](https://ryersondmp.github.io/sa11y/)
An accessibility quality assurance tool that visually highlights common accessibility and usability issues.

______

##[gridless.design](https://gridless.design/)
[![gridless.design](https://wweb.dev/weekly/content/81/gridless.jpg)](https://gridless.design/)
A website that describes the problems with traditional design when they it is used for web experiences.

______

##[GradientArt](https://gra.dient.art/)
[![GradientArt](https://wweb.dev/weekly/content/81/gradientArt.jpg)](https://gra.dient.art/)
A feature-packed editor for designing illustrations, patterns, icons, and more.

______

##[Glass UI](https://ui.glass/generator/)
[![Glass UI](https://wweb.dev/weekly/content/81/glassui.jpg)](https://ui.glass/generator/)
A CSS generator based on the glassmorphism design specifications.

______

##[Line Icons](https://lineicons.com/)
[![Line Icons](https://wweb.dev/weekly/content/81/lineIcons.jpg)](https://lineicons.com/)
5000+ handcrafted free line icons for modern user interfaces.

______

##[Bulletproof React](https://github.com/alan2207/bulletproof-react)
[![Bulletproof React](https://wweb.dev/weekly/content/81/bulletproofReact.jpg)](https://github.com/alan2207/bulletproof-react)
A simple, scalable, and powerful architecture for building production ready React applications.

______

##[Khagwal 3D](https://3d.khagwal.co/)
[![Khagwal 3D](https://wweb.dev/weekly/content/81/khagwal.jpg)](https://3d.khagwal.co/)
Free 3D illustration pack for web & mobile app designers

______

##[Rooks](https://react-hooks.org/)
[![Rooks](https://wweb.dev/weekly/content/81/rooks.jpg)](https://react-hooks.org/)
A collection of regularly used custom hooks as utils for React.

______

##[Reshot](https://www.reshot.com/)
[![Reshot](https://wweb.dev/weekly/content/81/reshot.jpg)](https://www.reshot.com/)
A website with curated SVG icons, vector illustrations and stock photos.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Features of JavaScript - That You Should Know About
Tags: javascript, programming, webdev
Published: 2021-07-21 06:29:36

## 1. Style Console Log ##
Are you know that? you can style the console log by using JavaScript. To customize the console log you need to add CSS on it to get the console log. If you want to print the source code you need to add %c before the code and then add console.log() after it. But it requires CSS to variable to execute it. It's one of the best features of JavaScript 2021. 

If you want to customize the variable in comparison to others you need to use %c and console.log() before it. And add CSS properties as you want in it. 

Let's see the example
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdhz3wm3kzly7cik4m5o.png)

## 2. Use Shorthand Operators ##
ES6 has a shorthand to define operators in a short way. And this is an operator that no one can talk about simply because they don't know about it. This operator makes your work easy and fast. And it looks very clean and neet to read and understand. This is one of the useful features of JavaScript.

Let's see the example:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjhbk98wch7k0t6e4ihj.png)

## 3. Elective Chaining ##
Chaining ?. is used to check properties before ?.  if it's null or undefined then it returns undefined otherwise its returns the value.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oh996jv8919evtycqr3e.png)

## 4. Use Generator Function ##
This is a function that similar to common functions the only difference between them is Generator function stops the execution on a particular line when you want and continue when you want.

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

## 5. Use in Keyword ##
in keyword is used to check the properties are available in an object or not. After using this keyword you can get the true or false value its depend on the value that available in an object or not. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0f12uz0is7srko3m1jp.png)
commit message vscode (same as last commit :)
Tags: vscode, github
Published: 2021-07-21 06:25:54

Taking some time to write a meaningful commit message is important.
But sometime we are in hurry and it is justified to repeat the last commit message (instead of writing a single letter in commit message like i did for long time).

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xdvd1qbvvgzw2tgddnk.png)
to do it using vscode UI you can press the arrow-up  key while focused on the commmit message box to bring previous commit messages.
React with p5.js
Tags: p5, reactnative
Published: 2021-07-21 06:23:23

I'm trying to use p5 library with react. everything is working fine except I can not use some of the p5s functions like: keyPressed(), keyReleased(). while functions such as mouseClicked() and mousePressed() work just fine. 
```
const setup = (p5, canvasParentRef) => {
        // use parent to render the canvas in this ref
        // (without that p5 will render the canvas outside of your component)
        console.log(props.test)
        const cnv = p5.createCanvas(500, 500).parent(canvasParentRef);
        plr = new Player(p5.width / 2, p5.height / 2);
        food = new Food(p5);

        cnv.mouseClicked((event) => {
            console.log(event);
        })
        cnv.keyReleased((event) => {
            console.log(event);
        });
    };
```
this is what the code looks like. mouseClicked gives no errors while keyReleased and other functions which are related to keyboard input give error saying `TypeError: cnv.keyReleased is not a function`
HTML tags | optgroup
Tags: html, tags, optgroup
Published: 2021-07-21 06:20:35

It is used to **group related options in a** `<select>`. In this way, the contents are easier for the user to handle in very long dropdown menus.

Cannot nest an `<optgroup>` within another `<optgroup>`.

It has two attributes: `label` to **define the text** that will be shown to the user as the title of the group of options, and `disabled` to **disable the selection** of all the options included in the group. The `label` **attribute is required**.

It has an **implicit ARIA role** `group`.

- Type: *block*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) | [Support](https://caniuse.com/mdn-html_elements_optgroup)
Are you looking to source a new UPS (Uninterruptible Power Supply)?
Published: 2021-07-21 05:51:00

In such a competitive market, it is difficult to know which brand, model and size of UPS you require. With over 25 years of experience, BCL Power are experts in calculating exactly which <a href="https://www.bclpower.co.uk/services/ups-battery-installations/">UPS battery</a> you need. This is often done through a site survey, where an engineer will gather all of the necessary information (load requirements, available feeds, space, access etc) and then create a solution which will give you the desired runtime, with an installation date and time that suits you.

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


<b>SUPPLY</b>

Once the site survey has been conducted, it is sent across to our office for the sales team to recommend the necessary equipment as well as any additional accessories required. These accessories include; network and environmental management cards, bypass switches and a variety of software. Kit can then either be delivered to site ready for an engineer to install, or come to BCL HQ where an engineer will pick up the equipment before heading to site.

<b>INSTALL</b>

After specifying the perfect solution for your standby power issues, obtaining the equipment and ensuring the kit has arrived to site safely and on time, one of our highly trained engineers will take care of the installation, and removal of old kit if needed. We take pride in the fact that no job is too small, whether it is a 750VA UPS system operating under a desk, to a large scale data center network solution, BCL Power will always provide a safe and professional UPS battery installation.

<b>READ MORE:</b>
<a href="https://www.bclpower.co.uk/sourcing-new-ups-system-can-help/">https://www.bclpower.co.uk/sourcing-new-ups-system-can-help/</a>
Set Page Size and Page Orientation for Word Document Using Java
Tags: java, word
Published: 2021-07-21 05:46:03

Usually the default page size of a Word document is A4, and sometimes we may need to change the page size to meet different requirements. Now, this article will demonstrate how to set page size and page orientation for word document programmatically using Free Spire.Doc for Java.

**Installation**
**Method 1:** Download the [Free Spire.Doc for Java](https://www.e-iceblue.com/Download/doc-for-java-free.html) and unzip it. Then add the Spire.Doc.jar file to your Java application as dependency.

**Method 2:** Directly add the jar dependency to maven project by adding the following configurations to the pom.xml.
```xml
<repositories>
   <repository>
      <id>com.e-iceblue</id>
      <name>e-iceblue</name>
      <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
   </repository>
</repositories>
<dependencies>
   <dependency>
      <groupId>e-iceblue</groupId>
      <artifactId>spire.doc.free</artifactId>
      <version>3.9.0</version>
   </dependency>
</dependencies>
```

**Sample Code**
```java
import com.spire.doc.*;
import com.spire.doc.documents.*;

public class WordPageSetup {
    public static void main(String[] args) throws Exception {
        //Load the sample document
        Document doc= new Document();
        doc.loadFromFile("Oscar Wilde.docx");
        //Get the first section
        Section section = doc.getSections().get(0);
        //Set the page size
        section.getPageSetup().setPageSize(PageSize.A3 );
        //Set the page orientation
        section.getPageSetup().setOrientation(PageOrientation.Landscape);
        //Save the document to file
        doc.saveToFile("PageSize.docx",FileFormat.Docx_2013);
    }
}
```

**Output**
![PageSize](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbhnz9654co8x98yh551.jpg)
Day 2 of Training: JavaScript in browser
Tags: javascript
Published: 2021-07-21 05:44:41

Yesterday was my day 2 of training in Ryaz.
The task was basically divided into different parts like:

1. Attaching events to HTML elements
2. Taking user input in browser
3. Showing output in browser
4. Making network calls to get relevant data.
5. Error handling network calls

I learnt many things from yesterday's lesson like:

* document.querySelector() - It returns the first element that matches a specified CSS selector(s) in the document.

* addEventListener() - This method attaches an event handler to the specified element.

and

* fetch() -  It is useful in fetching resources across the internet.

Do you Know: 

[funtranslations](https://funtranslations.com/) - This website provides API translations to the users for free. There are tons of API's you can go through like "minion", "yoda", "Dothraki" and many more. It is more fun working with a API that reference meme culture. Only and most irritating downside is that it only gives 5 API calls per hour or two.
Which is Array Reduce method in Javascript
Published: 2021-07-21 05:28:28

**Reduce** method in javascript is used to reduce the array to a single value. It takes a callback function which takes four parameters (accumulator, currentValue, index, array), but mostly we use the first two.

![array reduce method syntax](https://res.cloudinary.com/dljpca7mb/v1626843737/baljeetsingh.in/carbon_1_reyngn.png)

Now let's take a look at some of the examples,

**Calculate sum of all the elements in an array**

    const arr = [2,3,5,4];
    
    // here accumulator is names sum
    // item is the current value
    // 0 is the initial value
    const arraySum = arr.reduce((sum, item) => sum + item, 0);
    console.log('Output is: ', arraySum);
    // Output is: 14

**Calculate total number of fruits in the array**

    const fruits = [
      { name: 'Apple', quantity: 3 },
      { name: 'Banana', quantity: 4 },
      { name: 'Mango', quantity: 2 },
    ];
    
    const totalFruits = fruits.reduce((total, fruit) => total + fruit.quantity, 0);
    console.log('Total Fruits are:', totalFruits);
    // Total Fruits are: 9

**Group Students by ClassName**

    const students = [
      { name: 'Baljeet', className: 10 },
      { name: 'Fatehjit', className: 2 },
      { name: 'Ekjeet', className: 10 },
      { name: 'Manvir', className: 5 },
    ];
    const output = students.reduce((groupedStudents, student) => {
      const className = student.className;
      if (groupedStudents[className] == null) {
        groupedStudents[className] = [];
      }
      groupedStudents[className].push(student);
      return groupedStudents;
    }, {});
    console.log('Grouped Students: ', output);
    /* output 
    { 2: [ { name: 'Fatehjit', className: 2 } ],
      5: [ { name: 'Manvir', className: 5 } ],
      10: [ { name: 'Baljeet', className: 10 },
         { name: 'Ekjeet', className: 10 } ] } */
Full-Stack App Django and React
Tags: django, react, python, javascript
Published: 2021-07-21 05:12:27

Let us create a full-stack web application using Django Framework for Python and ReactJS , the famous Facebook library for UI ( everybody calls it a framework, but I'm sticking to the correct definition, you can call me a Nerd 🤓 )
 
{% youtube F5OUT3ijk8M %}

This is a very simple CRUD app for tasks management (fancy name for a TODO app ); even though you will learn a lot if you will follow along in the tutorial, we are designing the backend side first with Django, creating the database model, then REST API and this is all for backend side.

As far as the frontend, we will create the user interface with React then we will connect both React and Django using Axios which is used to send requests from the client to the server, and to send back responds from the server to the client.

This should be fun, and I promise you will learn a ton of stuff if you're a beginner to intermediate level programmer; but if you're above intermediate I don't think you will enjoy this video as this will be old news for you, but who knows maybe !

Github Code : https://github.com/BekBrace/django-react-app-Task_Manager
Website : https://bekbrace.com

That's about it, so thanks guys for reading, and probably for watching 😎.
Stay safe and be well, friends.
Peace out 👋
PHPUnit dataproviders to test validations in Laravel
Tags: php, laravel, phpunit
Published: 2021-07-21 04:33:59

Here an example with login.

A login should test:
    - email and password are not empty
    - email has a valid format
    - password has at least 8 characters length

All this tests are expecting a validation message for any of this cases, basically it is the same process with different data, this is a great scenario for PHPUnit Dataproviders.

## Install some authentication scaffold (optionally)

```
composer require laravel/breeze --dev
```

## Install breeze

```
php artisan breeze:install
npm install
npm run dev
php artisan migrate
```

## Make a tests for login to validates the request.


```
php artisan make:test LoginValidationTest
```

Here the basic test:

```php
/**
 * @test
 * @dataProvider invalidUsersData
 */
public function it_tests_a_login_form_validation($invalidData, $invalidFields): void
{
    $response = $this->post('/login', $invalidData);
    $response->assertSessionHasErrors($invalidFields);
    $this->assertDatabaseCount('users', 0);
}

public function invalidUsersData(): array  
{
    return [
        [
            ['email' => '', 'password' => ''],
            ['email', 'password']
        ],
        [
            ['email' => 'somethingNotValid', 'password' => 'password'],
            ['email']
        ],
        [
            ['email' => 'somethingNotValid', 'password' => 123],
            ['password']
        ],
    ];
}
```

## Explanation

First the annotation for data provider is necessary, then we see that the dataProvider function returns a multidimensional array, to explain this behavior:

PHPUnit dataProviders returns a value on every iteration, the first iteration of the data provider it would set:

```php
$invalidData = ['email' => '', 'password' => ''];
$invalidFields = ['email', 'password']
```

So every subarray would return values, in this case two values to make tests on every iteration.

So the first iteration would be equals to:

```php
public function it_tests_a_login_form_validation(): void
{
    $response = $this->post('/login', [
        'email' => '', 
        'password' => ''
    ]);

    $response->assertSessionHasErrors(['email', 'password']);
    $this->assertDatabaseCount('users', 0);
}
```

So you can create any amount of cases and the method would be executed the amount of times as subarrays are present on the dataProvider function returns.