teleren/devto huggingface dataset:
Awesome Packages for React JS
Tags: beginners, webdev, react, npm
Published: 2022-08-22 11:20:24

Hello Guys today i will show you some awesome packages to use in React Js.I will only briefly explain them and provide the documentation link so that , you can check it yourself.

Let's get started...

# 1. React-router-dom -
This package helps in providing easy and flexible routings in React. 
Installation - 
```
npm i react-router-dom
```

Documentation - 
https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md

# 2. React-reveal - 
It is used for animation and is easy to use and the animations are also good and awesome.

Installation - 
```
npm i react-reveal
```

Documentation - 
https://www.react-reveal.com/docs/

# 3. React-icons - 
It provides nearly all the icons you need to create your website and the icons are awesome and comes in different shades and types.

Installation - 
```
npm i react-icons
```

Documentation - 
https://react-icons.github.io/react-icons/

# 4. React-redux - 
It is used with redux and lets your React component read data from the redux store and dispatch action to the store to update states.

Installation - 
```
npm install react-redux
```

Documentation - 
https://react-redux.js.org/introduction/getting-started

# 5. Formik with Yup - 
It is used to provide validation and Error Handling while dealing with forms in React Js. It is quite easy to use and also allow us to create validation schema for our forms with "yup".

Installation - 
```
npm install formik yup
```

Documentation - 
Formik - https://formik.org/docs/overview
Yup - https://github.com/jquense/yup
Formik with yup combined - https://blog.shahednasser.com/how-to-create-and-validate-forms-in-react-using-formik-and-yup/

# 6. axios 
It is HTTP client which works with promises.It can be used in place of fetch method where we need to manually do everything.
In axios , all we have to do is provide the API url , a then() method to handle the response coming back from the API and a catch() method to handle errors.

Installation - 
```
npm install axios
```

Documentation - 
https://axios-http.com/docs/intro

# 7. React-toastify - 
It is used to create toast notification which closed automatically when the timer goes down and it has many colors and designs available and also can be easily integrate with other React Components.

Installation - 
```
npm i react-toastify
```

Documentation - 
https://fkhadra.github.io/react-toastify/introduction/

THANK YOU FOR CHECKING THIS POST
You can contact me on - 
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/javascript-map-with-filter-2jgo

https://dev.to/shubhamtiwari909/e-quotes-3bng

https://dev.to/shubhamtiwari909/deploy-react-app-on-netlify-kl
Looking for a tech lead
Tags: php
Published: 2022-08-22 11:11:49

Hi community! I'm one of the founders of www.eoreka.it - we are a B2B marketplace that connects wholesalers and retailers in the HoReCa industry. We launched few months back our MVP on WooCommerce and recently raised a pre-seed round. I'm looking for a tech lead to take over the development of the project. Until now it was developed by Tarek (https://www.linkedin.com/in/tarekfah/) the CTO of the startup studio who launched us. If anyone interested in the project, I'd love to connect!
Here my linkedin and email address:

https://www.linkedin.com/in/pietrobs/
pietro@eoreka.it
Inline-Block in CSS
Tags: css, boxmodel, webdev
Published: 2022-08-22 10:50:19

Every HTML element is a piece of rectangle in CSS. When building a web page, the different elements will have to be displayed in various formats and sometimes have to be hidden too. This is where the _Display_ property comes into play. There are 3 major Display properties _Block, Inline & Inline-Block_.

**Block** level elements by default take up the entire space of the row they are in, whatever width we provide or even if we don't provide a width at all. This way, multiple block level elements end up being placed one below other. The elements don't show up next to each other, even if there is available space.

![CSS for block display](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ob0cy75xgusr4qn9qel.png)

![Block Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ob721qioyd0qetmah47q.png)

**Inline** level elements align horizontally and next to each other in the same row, as long as there is space. However, it is to be noted that we can't provide a width or height to the inline elements like we can for block-level elements.

![CSS for inline display](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uyjsk03fugkp90lzvqa.png)

![Inline Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98kumij8ihk8kr7jlsnd.png)

So what if we want to display elements next to each other and also have them adopt width and height that we provide? That is where Inline-block Display option proves to be handy.

## Inline-Block
The inline-block property of Display takes the best of bothe worlds. With an inline-block display property we can have elements being placed next to each other in same row like inline elements do. And we can also provide width and height for the elements like we are able to do in a block-level element. So inline-block has been a widely used Display property, apart from the recent and most popular Flex property.


![CSS for inline-block display](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ve1myadh68lnjz3kvrp.png)

![inline-block output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mv6lctl8g8pegyzeakav.png)
What's the Best Documentation You've Used?
Tags: discuss, webdev, programming, watercooler
Published: 2022-08-22 10:47:00

Documentation is very important for us developers as it guides us to build what we need using a tool or service. When the documentation is great, the developer experience feels seamless. When the documentation is incorrect, missing details, or not clear, we struggle building with the tool.

What was the best documentation you've used? It can be for any framework, service, or tool. Also, what made this documentation so useful to you?

P.S: at [Medusa](https://github.com/medusajs/medusa), we're currently in the process of revamping [our documentation](https://docs.medusajs.com/) to provide a better developer experience. If you're interested in contributing to an open-source project, you can always check out current [good first issues](https://github.com/medusajs/medusa/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) or [report any issues you find in the documentation](https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml).
Combination Sum- I
Tags: javascript, leetcode
Published: 2022-08-22 10:13:24

```js

/**
 * @param {number[]} candidates
 * @param {number} target
 * @return {number[][]}
 */
var combinationSum = function(candidates, target) {
    
    let result = [];
    let tempArray = [];
    
    backTrackRecord(candidates, target, result, tempArray, 0);
    return result;
};

const backTrackRecord = (candidates, target, result, tempArray, currIndex) => {
  if (target === 0) {
    result.push([...tempArray]);
    return false;
  }
  if (target < 0) {
    return false;
  }

  for (let i = currIndex; i < candidates.length; i++) {
    tempArray.push(candidates[i]);
    backTrackRecord(candidates, target - candidates[i], result, tempArray, i);
    tempArray.pop(candidates[i]);
  }
};
```
O que é DTO?
Tags: ruby, dto, mvc, api
Published: 2022-08-22 10:06:23

O que é Data Transfer Object (DTO)?

DTO é um objeto que é usado para encapsular dados. 

Normalmente usado na camada de Serviços que solicita dados de API de terceiros, ou do próprio sistema.

O benefício dos DTOs é converter os dados brutos em um objeto e reduzir informações desnecessárias.

O DTO torna o código muito fácil de manter e testar sempre que estamos escrevendo algum código para realizar a verificação de domínio da API de terceiros.

Em Ruby encontrei essa postagem que possuí 3 bons exemplos para ajudar na compreensão e uso.

Não é bala de prata, é bom conhecer e saber reconhecer qdo encontrarmos um, ou caso tenham a oportunidade de testar saber p/ onde começar

https://t.co/vuXIztW3pC

#ruby #DTO #MVC #API
How To Build NFT Website With Html CSS JavaScript
Tags: css, javascript, beginners, tutorial
Published: 2022-08-22 09:52:12

{% youtube xwXGdpRuSiQ %}

How To Build NFT Website With Html CSS JavaScript

This video will show you how to build NFT website with html css javascript

[Github Repo](https://github.com/codewithsadee/nftc)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
4:32 - File structure
5:59 - Project initial
17:29 - Header
43:01 - Hero section
55:11 - Explore section
1:19:21 - Top seller section
1:28:31 - Collection section
1:40:07 - Instruction section
1:47:03 - Footer
2:12:21 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
Command-line arguments
Tags: rust, beginners
Published: 2022-08-22 09:41:00

If you have already read [Accepting command line arguments](https://doc.rust-lang.org/book/ch12-01-accepting-command-line-arguments.html) and [Struct Args](https://doc.rust-lang.org/std/env/struct.Args.html), let's see how command-line arguments work using a simple calculator as an example.

Add the standard library

```Rust
use std::env::{args, Args};
```
Here is the main code

```Rust
fn main() {
	let mut arguments: Args = args();
	let first_argument = arguments.nth(1).unwrap();
	let operator = arguments.nth(0).unwrap().chars().next().unwrap();
	let second_argument = arguments.nth(0).unwrap();
	
	let first_number: f64 = first_argument.parse().unwrap();
	let second_number = second_argument.parse::<f64>().unwrap();

	let result = operate(operator, first_number, second_number);
	println!("{} {} {} = {}", first_number, operator, second_number, result);
}
```
Function operate() gonna match our operator of type ‘char’
```Rust
fn operate(operator: char, first_number: f64, second_number: f64) -> f64{
	match operator {
		'+' => first_number + second_number,
		'-' => first_number - second_number,
		'/' => first_number / second_number,
		'*' | 'x' | 'X' => first_number * second_number,
		=> 0.0,
	}
}
```

Cargorun it with arguments «number operator number» for example:
```
cargo run 1 + 2
```

The answer would be look like that:
```
1 + 2 = 3
```
Arguments look like that:
```
{ inner: ["target/debug/calculator", "1", "+", "2"] }
```
The first element is the path of the executable.

**Accessing command line arguments by index**

As soon as some of arguments used all previous arguments would be deleted.

```Rust
let first_argument = arguments.nth(1).unwrap();
```
Arguments:
```
{ inner: ["+", "2"] }
```
So we have to take 0th argument
```Rust
let operator = arguments.nth(0).unwrap().chars().next().unwrap();
```
Arguments:
```
{ inner: ["2"] }
```
And again wehave to take 0th argument
```Rust
let second_argument = arguments.nth(0).unwrap();
```
Arguments:
```
Args { inner: [] }
```
That’s why
```
args.nth(1) = 1
args.nth(0) = +
args.nth(0) = 2
```
Let’s tests it:
```Rust
#[test]
fn add() {
	assert_eq!(3.0, operate('+', 1.0, 2.0) );
}
#[test]
fn substruct() {
	assert_eq!(3.0, operate('-', 5.0, 2.0) );
}
#[test]
fn multiply() {
	assert_eq!(4.0, operate('*', 2.0, 2.0) );
	assert_eq!(4.0, operate('x', 2.0, 2.0) );
	assert_eq!(4.0, operate('X', 2.0, 2.0) );
}
#[test]
fn divide() {
	assert_eq!(3.0, operate('/', 6.0, 2.0) );
}
#[test]
fn error() {
	assert_ne!(2.0, operate('u', 4.0, 2.0) );
}
```
Step by Step: Learn Node.js from Scratch
Tags: webdev, javascript, node
Published: 2022-08-22 09:35:23

In this article, you learn nodejs step by step starting from the beginning. It is an open-source and cross-platform tool that is very popular. It helps to integrate coding languages with API and other languages and also has various benefits in backend and front-end development like easy to understand, for the growth of full stack development in which a single developer handles all facets of a program, offers trending apps under some limits and regulations, etc. As it is an open-source framework that makes learning very simpler and easier. If you want to learn Node.js systematically if you believe it will be your next step in advancing your career or if you want to know more about this framework, read on to find out more by visiting: 
https://technosmarter.com/nodejs/learn-node-js-from-scratch
TV Channel Website: Static Assets
Tags: webdev, tutorial, python, bottle
Published: 2022-08-22 09:23:00

GitHub: [https://github.com/Sokhavuth/TV-Channel](https://github.com/Sokhavuth/TV-Channel)
Vercel: [https://khmerweb-tv-channel.vercel.app/](https://khmerweb-tv-channel.vercel.app/)
<br/>

<p>In Bottle.py, to be able to use static assets such as font, picture, JavaScript, and CSS files, we need to set a route to a folder to store those static files</p>

<p>The name of the static folder could be anything we like, however, people like to name it as "public" folder in the root directory. And the best place to set the route to this folder is in the entry point file "index.py". Moreover, in this folder, we can create as many sub-folders as we need to store different kind of files.</p>

```python
# index.py

from bottle import static_file, get
from routes.frontend import index


app = index.app

@app.get('/static/<filepath:path>')
def staticFile(filepath):
    return static_file(filepath, root="public")


###################################################################
import socket
host = socket.getfqdn()    
addr = socket.gethostbyname(host)
if(addr == '127.0.1.1'):
    app.run(host='localhost', port=8000, debug=True, reloader=True)

###################################################################
```

<p>After the route to static assets is set, we can use different kind of static files as below:</p>

```html
<!--views/base.tpl-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>TV Channel Website</title>
        <script src="/static/scripts/jquery.js"></script>
        <link href="/static/images/sitelogo.png" rel="icon" />
        <link href="/static/fonts/setup.css" rel="stylesheet" />
        <link href="/static/styles/base.css" rel="stylesheet" />
    </head>
    <body>
        Hello World!
    </body>
</html>
```

```css
/* public/styles/base.css*/

:root{
    --body-font: 14px/1.5 Vidaloka, OdorMeanChey;
    --background-dark: #541616;
    --background: #c64242;
    --background-light: #f7c2c2;
    --foreground: #fce4e4;
    --color: white;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color: #ff60ac;
}

a:hover{
    opacity: 0.7;
}

.region{
    max-width: 1100px;
    margin: 0 auto;
}

body{
    background: var(--background-light);
    font: var(--body-font);
    color: var(--color);
}
```
Why Should Your Business Choose Cloud Backend As A Service For App Development
Tags: cloudconsultingservices
Published: 2022-08-22 09:16:55

Behind every software application is a series of comprehensive backend services intended for supporting the frontend that you use and see each day. The amount of work that is involved in creating the backend technology is never a simple task.

Backend as a service or BaaS offers organizations [cloud management service](https://appinventiv.com/cloud-services/) that cater to the backend processing. It frees businesses from purchasing onsite servers, thereby streamlining the backend services.

What Is BaaS? Is It Something Similar To Serverless Computing?

Backend-as-a-service or BaaS is a type of third-party service which allows you to build an intuitive and scalable website or application without worrying about the backend. BaaS frees you from expensive and time-consuming tasks and allows you to focus on the frontend.

How Does Backend-as-a-Service (BaaS) Work?

Having a Backend-as-a-Service solution is one of the best ways to ensure convenience for businesses on a daily basis. The best BaaS tools are ideal for overseeing and managing a cloud infrastructure as well as accelerating the backend development.

Business Constraints With Backend-as-a-Service

Although BaaS services have a long list of benefits that can easily integrate with the front-end programming, the service also contains a few minor inherent flaws. This includes

1. Lesser Control Over The Coding Structure

If you are too cautious about getting the little lines of codes corrected, then you might feel a sense of struggle while controlling the BaaS platform. Anyway, you will be saving a lot of time in the development process, but the only problem would be that you won’t get complete control of tweaking every small thing.

2. Vendor Lock-In

Another problem that most businesses face is the inability to move from one BaaS platform to another. While the service providers claim that the developers can migrate their applications, the technology might come as an obstacle in moving the code that connects both the back and front-end elements to a new platform. The developer would require to recreate the connections as the backend elements won’t move to the new provider or platform.

The main reason to utilize BaaS as a service platform is to reduce the app launch time, outsource the infrastructure management and lower the development cost. This BaaS implementation works perfectly for mobile and web apps.  

Source: [https://appinventiv.com/blog/cloud-backend-as-a-service-for-mobile-app-development/](https://appinventiv.com/blog/cloud-backend-as-a-service-for-mobile-app-development/)
How to run ReactJs on Windows container
Tags: windows, container, node, react
Published: 2022-08-22 09:05:00

Hi dev, in this article we'll see how to run ReactJs application on `windows container`.

We'll use docker images who can run NodeJs on Windows container (not are official of NodeJs) explained in [this article](https://dev.to/henriqueholtz/how-to-execute-windows-container-with-nodejs-4n5c).

First, we'll generate our own `create-react-app` to use it on `c:\Projects` as `my-own-cra`:

```
npx create-react-app my-own-cra
```

Now we can run the container directly, or using `docker-compose`, let's see both:

## 1. Run container directly

Now we'll run one container with our create-react-app inside, to do this we use the command below (use powershell):

```
docker run -t -p 3000:3000 --name=my-own-cra-windows-container -v C:\Projects\my-own-cra\:C:\app\ henriqueholtz/node-win:16.17.0 cmd /c "npm -v & node -v & npm start"
```

The result on the terminal will be something as:

![result of `npm start` in the terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8w6x0kit0e1l9il03ww.png)

Now we can access on your browser with `http://localhost:3000` and see our create-react-app running on windows container:

![create-react-app on browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rynx42pvvfgjpl65y5zc.png)


## 2. Run container with `docker-compose`

First we'll create our `dpcker-compose.yml` (in `c:\Projects\my-own-cra`, as: 

```
version: '3.8'

services:
  my-own-cra:
    container_name: my-own-cra
    image: henriqueholtz/node-win:16.17.0
    command: cmd /c "npm -v & node -v & npm start"
    ports:
      - '3000:3000'
    volumes:
      - "C:\\Projects\\my-own-cra\\:C:\\app\\"
```

After that, open the terminal (in the same folder) and run docker-compose:

```
docker-compose up
```
 
Here we can access `http://localhost:3000` also, and see our create-react-app running, same as before.

 Thanks for reading!
Kagermanov Blog is Live
Tags: machinelearning, ai, programming, webdev
Published: 2022-08-22 08:30:00

Hi Everyone,

I have recently opened [Kagermanov Blog](https://kagermanov.com), my personal blog without restrictions. Alongside blog post series on ML, I would like to share my short science fiction stories there. I’d be grateful if you check it out:

[https://www.kagermanov.com](https://www.kagermanov.com)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gle3hc5r7eoc0uyo3gx6.png)
Configure Blackbox Exporter with Basic Authentication in Microsoft Azure WebApp
Tags: azure, monitoring, tutorial, blackboxexporter
Published: 2022-08-22 08:07:21

**Goal :**

- Configuration of Blackbox Exporter Basic Authentication in Microsoft Azure WebApp.

**Pre-Requisite :** 

- [Deploying Blackbox Exporter Image to Azure Container Registry Using Azure CLI](https://dev.to/suryabhansv/deploying-blackbox-exporter-image-to-azure-container-registry-using-azure-cli-5dii)
- [Setup Blackbox Exporter in Microsft Azure (WebApp) using Azure CLI](https://dev.to/suryabhansv/setup-blackbox-exporter-in-microsft-azure-webapp-using-azure-cli-4lec)



**Steps**

1. [Create a web.yml file (documentation)](https://prometheus.io/docs/guides/basic-auth/#creating-web-yml)

2. [You can also use bcrypt generators on the web](https://bcrypt-generator.com/)


![Configuration of Blackbox Exporter Basic Authentication in Microsoft Azure WebApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6igdbp3vny3cxpdxz19x.png)
![Configuration of Blackbox Exporter Basic Authentication in Microsoft Azure WebApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xvfbnzvnlqxn4m7mbcq.png)
![Configuration of Blackbox Exporter Basic Authentication in Microsoft Azure WebApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lu2g6d02ylpghozgxim.png)

* ` web.yml (Upload this file in **suryasblackboxexporter** Storage Account Share)`
```
basic_auth_users:
  suryauser: $2a$12$6g5f3MZriVtoOZ7GrCEwzuTBxnPQwHurpktXTXUu1neg/XZeHzipy
```

![Configuration of Blackbox Exporter Basic Authentication in Microsoft Azure WebApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0p2g94ajci8ar7lfa1x.png)


* `Set an Startup Commmand for Blackbox Exporter WebApp which includes web.yml`
```
az webapp config set --name $WebAppName --resource-group $ResourceGroupName --startup-file `
"--config.file=/config/blackbox.yml --web.config.file=/config/web.yml"
```

![Configuration of Blackbox Exporter Basic Authentication in Microsoft Azure WebApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2eo71m9bo8lsknfl65m.png)
![Configuration of Blackbox Exporter Basic Authentication in Microsoft Azure WebApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3i7lefhdc3nh7fqrd24.png)
Enjoy Programming-Themed Humor? Here's today's daily developer joke!
Tags: jokes, dailydeveloperjokes, watercooler
Published: 2022-08-22 08:00:13

---
title: "Enjoy Programming-Themed Humor? Here's today's daily developer joke!"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes, #watercooler
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125925337e5.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why did the constant break up with the variable?

___A:___ Because they changed.
 -->