teleren/devto huggingface dataset:
react-app with sidebar - logo only
Published: 2022-05-03 10:59:43

[freecodecamp](https://youtu.be/bmpI252DmiI
)
[react router ref](https://v5.reactrouter.com/web/api/NavLink)
```
npx create-react-app name
cd name
code .

npm i @emailjs/browser
npm i @fortawesome/free-brands-svg-icons
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome
npm i animate.css
npm i gsap-trial
npm i loader.css
npm i react-leaflet
npm i react-loaders
npm i react-router-dom
npm i sass

```

sass
.scss
import .scss

prettier
.prettierrc

```
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}
```

App.scss

```
$primary-color: #ffd700;

@import 'animate.css';

@font-face {
  font-family: 'Helvetica Neue';
  src: url('./assets/fonts/helvetica-neu.ttf') format('ttf');
}

@font-face {
  font-family: 'La Belle Aurore';
  src: url('./assets/fonts/LaBelleAurore.woff2') format('woff2');
}

@font-face {
  font-family: 'Coolvetica';
  src: url('./assets/fonts/CoolveticaRg-Regular.woff2') format('woff2');
}

input,
textarea {
  font-family: 'Helvetica Neue';
}
```

index.scss

```
html {
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 300 11px/1.4 'Helvetica Neue', 'sans-serif';
  color: #444;
  background: #022c43;
  overflow: hidden;
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

```

index.js

```
import { BrowserRouter } from 'react-router-dom'
```
```
<React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
```

src/components/Sidebar/index.js

```
import { Link } from 'react-router-dom'
import './index.scss'
import LogoS from '../../assets/images/logo-s.png'
import LogoSubtitle from '../../assets/images/logo_sub.png'

const Sidebar = () => (
  <div className="nav-bar">
    <Link className="logo" to="/">
      <img src={LogoS} alt="logo" />
      <img src={LogoSubtitle} alt="slobodan" />
    </Link>
  </div>
)

export default Sidebar
```

src/components/Sidebar/index.scss

```
.nav-bar {
  background: #181818;
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 3;
  min-height: 500px;

  .logo {
    display: block;
    padding: 8px 0;

    img {
      display: block;
      margin: 8px auto;
      width: 24px;
    }
  }
}

```


src/components/Layout/index.js

```
import Sidebar from '../Sidebar'
import './index.scss'

const Layout = () => {
  return (
    <>
      <Sidebar />
    </>
  )
}

export default Layout
```
Github Actions: set-variables
Tags: cicd, github, environment, variables
Published: 2022-05-03 10:33:09

[set-variables](https://github.com/marketplace/actions/set-variables) is a Github Action for setting multiple variables dynamically. It also accepts the ternary operator syntax `VARIABLE_NAME: conditional_statement ? true : false`.


## USAGE

### Variables

Variable names are dynamic - you're free to name your variables as you wish.
Example:

```yaml
- uses: marcdomain/set-variables@v1
    with:
      variables: |
        ENVIRONMENT: "${{ github.ref }}" == "refs/heads/main" ? "production" : "staging"
        USERNAME: 1 > 2 ? "John" : "Doe"
```

> **_NOTE:_** Only `string`, `number`, and `boolean` data types are accepted in the conditions/values. The maximum number of variables allowed is 10.

### Output

Outputs are the resolved variables. In the example above, you can get the expected values with `${{ env.ENVIRONMENT }}` and `${{ env.USERNAME }}` respectively.

#### Links
https://github.com/marketplace/actions/set-variables

If you would like to buy me coffee ☕️ 😍

https://www.buymeacoffee.com/marcdomain
Let's make Instagram Logo using HTML & CSS!
Tags: html, css, beginners, codepen
Published: 2022-05-03 10:29:36

Hello Everyone,
I am posting a Article after a long time so **hope you like it!**

Today we are going to make Instagram's Logo using **HTML** and **CSS**

Let us get started!

## 1. HTML

```html
<div class="outer">  
    <div class="inner">  
    </div>  
</div> 
```
We have made a div which contains another div with classes _outer_ and _inner_ respectively!

## 2. CSS

```css
 /* Basic */  
 * {  
   margin: 0;  
   padding: 0;  
   box-sizing: border-box;  
 }   
 body {  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   width: 100vw;  
   height: 100vh;  
   overflow: hidden;  
 }
```
Above, we used css to make our page look nice. Now let's design the logo.

```css
.outer {  
   width: 150px;  
   height: 150px;  
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);  
   border-radius: 35px;  
   display: grid;  
   place-items: center;  
 }  
 /* innerside in outer box */  
 .inner {  
   width: 120px;  
   height: 120px;  
   border: 10px solid #fff;  
   border-radius: 32px;  
   display: grid;  
   place-items: center;  
   position: relative;  
 } 
 /* center circle of logo */  
 .inner::before {  
   content: '';  
   width: 45px;  
   height: 45px;  
   border: 10px solid #fff;  
   border-radius: 50%;  
   background: transparent;  
   position: absolute;  
 }  
 /* top right circle of logo */  
 .inner::after {  
   content: '';  
   width: 10px;  
   height: 10px;  
   border: 2px solid #fff;  
   border-radius: 50%;  
   background: #fff;  
   position: absolute;  
   top: 8px;  
   right: 10px;  
 } 
```
This is it. You have made Instagram's logo. 
You can view the codepen below.

{% codepen https://codepen.io/coding_dev_/pen/yLvyKRY %}
How to publish a React app with surge.sh
Tags: react, surge
Published: 2022-05-03 10:21:31

## We're need some tools installed:

- **NodeJs;**
- **Surge CLI;** (`npm install --global surge`)
- **Yarn;** (optional)

## Steps:

### 1. Build our React project
- `yarn build` or `npm build`

### 2. Publish with [surge.sh](https://surge.sh/)
- `surge` (Will request your credentials)
- `{your_email}`
- `{your_password}`
- `{path of build result from your project}`
- `{your_domain}` (without HTTP/HTTPS, ex: myreactapp.surge.sh)

### 3. Wait to access your project with output link from previous step!

- [My Github](https://github.com/henriqueholtz)
- [My LinkedIn](https://www.linkedin.com/in/henrique-holtz/)

Thanks for reading!
Journey to 100 Days of Code
Published: 2022-05-03 10:03:37

I recently started my coding journey by watching Angela Yu's 100 Days of Code Python Bootcamp course on Udemy.

I was hoping to have started making blog posts by now on what I have been learning already. But I was distracted by studying for my AWS Cloud Practitioner Exam (which I have now passed!) 

My goal now, is to post everyday and document the things that I am learning on this coding journey.
[Appwrite Submission Post Placeholder Title]
Tags: appwritehack
Published: 2022-05-03 09:59:06

[Instructions]: # (To submit to the Appwrite Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
[Note]: # (Share what you built, how you built it, and the inspiration behind the idea! Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)


### Submission Category: 

[Note]: # (Web2 Wizards, Web3 Wunderkinds, Mobile Moguls, Wacky Wildcards)


### Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% embed link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note:] # Screenshots/demo videos are encouraged!

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly.)

[Reminder]: # (Submissions are due on May 12th, 2022 @ 11:59 PM UTC).
API security best practices: How to stay ahead of API attackers
Tags: webmethods, apigateway, apimanagement
Published: 2022-05-16 06:40:20

---
title: API security best practices: How to stay ahead of API attackers
published: true
date: 2022-05-03 09:45:37 UTC
tags: webMethods, APIGateway, APIManagement
canonical_url: https://tech.forums.softwareag.com/t/api-security-best-practices-how-to-stay-ahead-of-api-attackers/257170
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2uyjlutzocli3zzdet5.png)
 
[https://www.youtube.com/embed/vpYpdJOGBBU](https://www.youtube.com/embed/vpYpdJOGBBU?autoplay=1&feature=oembed&wmode=opaque)


[Visit original post](https://tech.forums.softwareag.com/t/api-security-best-practices-how-to-stay-ahead-of-api-attackers/257170)
Remix - Styled with TailwindCSS 3.0 🚨
Tags: react, remix, tailwindcss, tutorial
Published: 2022-05-03 09:08:59

##Remix App :wave:
I'm going to be using the default create-remix@latest command which sets up our project and gives us a demo site.
##TailwindCSS Setup with Remix
Open your terminal and let's install tailwindcss, its peer dependencies, and concurrently via npm or yarn
```
npm install -D tailwindcss postcss autoprefixer concurrently
or if you prefer yarn
yarn add -D tailwindcss postcss autoprefixer concurrently
```
and then run the init command to generate both tailwind.config.js and postcss.config.js.
```
npx tailwindcss init -p
```
Let's update our tailwind.config.js file, Add the paths to all of your template files in your tailwind.config.js file.
```js
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
now we need to update your package.json scripts
```json
{
  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
  }
}
```
**Tailwind styles**
> We need to Add the Tailwind directives to your CSS.
Create a ./styles/app.css file and add the `@tailwind` directives for each of Tailwind’s layers.
```cs
@tailwind base;
@tailwind components;
@tailwind utilities;
```
now we need Add a reference of the generated CSS files using links in  `./app/root.jsx` file.
```jsx
import styles from "./styles/app.css"

export function links() {
  return [{ rel: "stylesheet", href: styles }]
}
```
TailwindCSS is all setup in our Remix app.
Now when we run npm run dev it will generate a tailwind.css file in the root of our /app/ folder
```npm
npm run dev
```
*Start using Tailwind in your project* :partying_face:
Start using Tailwind’s utility classes to style your content.
```jsx
export default function home() {
  return (
    <h1 className="text-3xl font-bold ">
      Remix + Tailwindcss 
    </h1>
  )
}
```
Well done! :clap:
Read original post [Click](https://fathymuhamed.vercel.app/blog/remixRun-tailwind)

Thanks for reading!  Say Hallo! [Twitter](https://twitter.com/Pxuee)
Ultimate Guide to Digital Mammography to Prevent and Fight Breast Cancer Successfully
Published: 2022-05-03 08:42:46

In conventional mammography, films are used to store and read the mammograms.

[https://nura.in/cpw/blog-post/?postId=594&catId=20
](https://nura.in/cpw/blog-post/?postId=594&catId=20)
Reconfigure SSH Public Key in Azure VM
Tags: ssh, linux, azure
Published: 2022-05-03 08:39:46

"I have lost my ssh private key and now I cannot login to my Azure VM"

If you create Azure VM from Azure CLI which has a parameter `--generate-ssh-keys` that will generate the keys (both public and private). The private key will be in the local machine from where the `az vm create...` command was executed. Unless you have explicitly mentioned the path of the ssh key file. 

In case you change the machine from where you connect to the VM you need to carry your private key. If you do not have it and want to access the VM you can reset it. 

First, generate a new pair of keys. Both private and public. Then update the existing VM with the new public key. Below are the simple steps. 

Generate a new key if you do not have any. Just follow the instruction by running the command. 

```
ssh-keygen
```

Make sure the keys are stored in .ssh folder. 

Then run the following command to update your existing Azure VM. You need Azure Subscription access with the necessary permission. 

```
az vm user update \
  --resource-group MyRG --name MyVM \
  --username NewUser \
  --ssh-key-value ~/.ssh/id_rsa.pub
```

Now you are done. From the machine where you have this new private key can now simply log in using ssh

```
ssh NewUser@PublicIP
```

Thank you very much. Hope you have enjoyed it.
Debugging Nodejs in VSCode
Tags: node, vscode, debugging, productivity
Published: 2022-05-03 08:18:06

👨‍💻 I want you to become a better software engineer through debugging in this series of articles.

> Debugging is the process of detecting and removing existing and potential errors (also called 'bugs') in a software code that can cause it to behave unexpectedly or crash.

⚙️ To configure debugging of Node in a VSCode, you should follow these steps:

1. Create a folder `.vscode` at the root of your project.

2. Put a file `launch.json` inside `.vscode` folder. This file will be a config file for debugging.

3. Inside `launch.json`, you should put this code

```JSON
{
  "configurations": [
    {
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "request": "attach",
      "skipFiles": [
      "<node_internals>/**"
      ],
      "type": "node"
    }
  ]
}
```

> :bulb: **Tip:** You can generate the same code by pressing the "Add configuration" button in VSCode bottom right corner.
![Add configuration green button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn1gn9agjsejuer1hx54.png)
After clicking the button, you will see a context menu where you should choose Node.js Attach to process.
![Configuration context menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eh1mywkuwjref2n8pblk.png)
Node.js Attach to process will bring you the same configuration as in step #3

After that, go to the run and debug section in VSCode
![Run and debug section in VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79v1ng8sbdnkkehee620.png)
Choose your configuration, and press start
![Select and run configuration options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9v3la9ndzng9tfny35gh.png)
You should pick the node process you want to attach. Your running node application inside VSCode will be in the first place.
![Context menu for choosing node process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0mo7wr51lpwpiebrdh9.png)
 
But if you didn't find the right PID (process id) of your Node, I recommend you run a command that will show you the id of a running process on the exact localhost.

For macOS
```bash
sudo lsof -i :PORT
```
After getting the right PID, you should put it in a context menu, and here you go!

See you in the following articles 🥳
Enjoy Programming-Themed Humor? Here's today's daily developer joke!
Tags: jokes, dailydeveloperjokes
Published: 2022-05-03 08:00:28

---
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
---

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/5e12588592f15.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 security conscious engineer refuse to pay their dinner bill?

___A:___ Because they could not verify the checksum.
 -->
Everything wrong with Indian IT industry
Tags: itindustry, greatresignation, technology, discuss
Published: 2022-05-03 07:58:26

Don’t get me wrong Indian IT industry is huge and had done lot of good for the thousands of engineering students of India. But where you here news like 
“ Labour ministry issues notice to Infosys on non-compete clause issue”, you are compelled to think why this is happening.

**TLDR;**
Quantity over Quality
Developer turned manager
Quality of work
Practice what they preach
Risk takers
Employee benefits

Details here:
https://medium.com/@improgramer/everything-wrong-with-indian-it-industry-fd9ba1c6c8e3
JS Tip: #1 - async/await over arrays
Tags: javascript, programming
Published: 2022-05-03 07:56:42

Suppose that, for whatever reason, we are traversing an array with the `map()` method and we have to execute an asynchronous function on each of the elements. Something like the following:

```js
const users = ['user1', 'user2', 'user3']
const data = users.map(async (user) => await fetchApiData(user))
```

What we need to understand here is that the dummy function `fetchApiData` (which receives as parameter the name of one of a user) will be making an asynchronous call to an external API that our application works with. 

What happens if we now write the content of the `data` variable through the console? Well, we are going to find something like the following:

```js
const users = ['user1', 'user2', 'user3']
const data = users.map(async (user) => await fetchApiData(user))

console.log(data)
/*
[
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> }
]
*/
```

That is, the execution of the code does not stop waiting for the results of the external API call and therefore the array data will be formed by as many elements as users we have declared in the array `users` and associated to each of the positions a JavaScript `Promise` object in the **pending** state.

## Resolution of all calls in parallel.

The first option we have to solve this problem is to use the `all()` method of the JavaScript `Promise` object, which will allow all the promises it receives as parameter (this method expects to receive as parameter an array of promises to be resolved) to be executed in parallel, without depending on each other, and it does not finish its execution until all these promises have finished.

```js
const users = ['user1', 'user2', 'user3']
const data = await Promise.all(
	users.map(async (user) => await fetchApiData(user))
)

console.log(data)
/*
[
  dataFromUser1,
  dataFromUser2,
  dataFromUser3
]
*/
```

When running in parallel we have to understand that the total execution time of the method will be that of the promise that consumes more resolution time, which makes it a very fast alternative when there is no dependency between promises.

## Resolution of flames sequentially.

But what will happen if we have a dependency in the execution of the promises, i.e. the calls to the asynchronous function (in our example the external API will depend on the result of the previous call)? In this case we should use the structure `for ... of` structure as follows:

```js
const users = ['user1', 'user2', 'user3']
const data = []

for (const user of users) {
	data.push(await fetchApiData(user))
}

console.log(data)
/*
[
  dataFromUser1,
  dataFromUser2,
  dataFromUser3
]
*/
```

In this case it is easy to understand that, as one call depends on the previous one, the result of the execution of all the code will be the sum of the resolution of each of the promises separately.
JS Tip: #1 - async/await sobre arrays
Tags: javascript, spanish, programming
Published: 2022-05-03 07:52:50

Supongamos que, por la razón que sea, estamos recorriendo un array con el método `map()` y que tenemos que ejecutar una función asíncrona en cada uno de los elementos. Algo como lo siguiente:

```js
const users = ['user1', 'user2', 'user3']
const data = users.map(async (user) => await fetchApiData(user))
```

lo que tenemos que entender aquí es que la función ficticia `fetchApiData` (la cual recibe como parámetro el nombre de uno de un usuario) estará realizando una llamada asíncrona a una API externa con la que trabaja nuestra aplicación. 

¿Qué ocurre si ahora a continuación escribimos el contenido de la variable `data` por la consola? Pues que nos vamos a encontrar con algo como lo siguiente:

```js
const users = ['user1', 'user2', 'user3']
const data = users.map(async (user) => await fetchApiData(user))

console.log(data)
/*
[
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> }
]
*/
```

Es decir, que la ejecución del código no se para a la espera de recibir los resultados de la llamada a la API externa y por lo tanto el array data estará formado por tantos elementos como usuarios hemos declarado en el array `users` y asociados a cada una de las posiciones un objeto `Promise` de JavaScript en el estado **pending**.

## Resolución de todas las llamadas en paralelo.

La primera de las opciones que tenemos para poder solucionar este problema pasa por utilizar el método `all()` del objeto `Promise` de JavaScript el cual va a permitir que todas las promesas que recibe como parámetro (este método espera recibir como parámetro un array de promesas que se deben resolver) pasan a ser ejecutadas en paralelo, sin depender unas de otras, y no finaliza su ejecución hasta que todas estas promesas hayan finalizado.

```js
const users = ['user1', 'user2', 'user3']
const data = await Promise.all(
	users.map(async (user) => await fetchApiData(user))
)

console.log(data)
/*
[
  dataFromUser1,
  dataFromUser2,
  dataFromUser3
]
*/
```

Al ejecutarse en paralelo tenemos que entender que el tiempo de ejecución total del método será el de la promesa que consume más tiempo de resolucíón, lo cual lo hace una alternativa muy rápida cuando no hay una dependencia entre promesas.

## Resolución de las llamas de forma secuencial.

Pero ¿qué ocurrirá en el caso de que tengamos una dependencia en la ejecución de las promesas, es decir, que las llamadas a la función asíncrona (en nuestro ejemplo la API externa dependerán del resultado de la llamada anterior)? Es este caso deberemos utilizar la estructura `for ... of` como sigue:

```js
const users = ['user1', 'user2', 'user3']
const data = []

for (const user of users) {
	data.push(await fetchApiData(user))
}

console.log(data)
/*
[
  dataFromUser1,
  dataFromUser2,
  dataFromUser3
]
*/
```

En este caso es fácil entender que, como una llamada depende de la anterior, el resultado de la ejecución de todo el código será la suma de la resolución de cada una de las promesas por separado.