teleren/devto huggingface dataset:
Blush | Made with Next JS
Published: 2022-05-18 04:49:08

![Blush: Illustrations for everyone | Made with Javacript | Next JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1652676174/large_blush_illustrations_for_everyone_made_with_next_js_03122e7de8.png "Blush: Illustrations for everyone | Made with Javascript | Next JS")


### Blush makes it easy to add free illustrations to your designs. 

> ### Tell your story with illustrations
> Easily create and customize stunning illustrations with collections made by artists across the globe. Try it, it’s kind of fun.
> 
> ### How does Blush make designing your projects simple and fun?
> 
> #### Choose a style
> Choose a collection from multiple styles and themes made by artists around the world.
> 
> #### Customize the art
> Play around with the variations until you create the art that tells your story.
> 
> #### Use on your design
> Download a PNG or SVG of your creation and use it on your web app, presentation, or any project you want to bring to life.
> 
> Play with fully customizable graphics made by artists across the globe.
> 
> 
> 
> 

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project


Simply Fill out this Google Forms page.

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Blush: Illustrations for everyone on Twitter](https://twitter.com/withjavascript/status/1526785622551191552?s=20&t=B1T_wrtg6FDKr0Pq0ITOtA)
 |
| Medium | [Blush: Illustrations for everyone on Medium](https://medium.com/@madewithjavascript/blush-made-with-next-js-f58fcfba83d1)
 |
| Facebook | [Blush: Illustrations for everyone on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02DKcmmWHPgHQW3gWsXdmDrCABuxPdUsHGnp3nvbcX37TiJ9vFmGH1wp9xs7QC8kJ2l)
 |
| Tumblr | [Blush: Illustrations for everyone on Tumblr](https://madewithjavascript.tumblr.com/post/684562023852474369/blush-illustrations-for-everyone-made-with-next)
 |
| LinkedIn | [Blush: Illustrations for everyone on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6932551707910443008)
 |

Filled Under:

 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with Next JS](https://madewithjavascript.club/categories/next-js)
Blank page on production build
Tags: react, reactrouterdom
Published: 2022-05-18 06:59:07

I have built a simple react app using `create-react-app` and `react-router-dom@6` 

And this happens only when i use `BrowserRouter`, `HashRouter` and `MemoryRouter` work just fine.

Please guide me how to build production app using `BrowserRouter` keeping in mind i will deploying it on linux server(hostinger.in) and in a subdirectory `domain.com/react-app`(!if .htaccess is required)

**Few things i tried**
1. Adding "homepage" : "./" or "homepage" : "." in `package.json`
2. Many .htaccess codes :')

You can see the hosted app [Here](https://sagri.co.in/captcha-generator/)
Volta—simple and fast node version manager
Tags: node, typescript, javascript, tooling
Published: 2022-05-18 06:53:16

---
title: Volta—simple and fast node version manager
published: true
tags: node, typescript, javascript, tooling
canonical_url: https://www.climbingdev.com/posts/volta
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gagsd8d8s874kpkpmrfa.png
---

*Volta* is a small tool that helps you manage multiple versions of node and package managers like npm or yarn.

It is especially useful when you work on multiple projects—you can update your environments independently.

Installing a new node version with Volta is as easy as:
```shell
volta install node@16
```
That will set up node 16 as a default version.

If you want to have a different version for some project, just use:
```shell
volta pin node@14
```
It will create an entry in your package.json file, saving the version of node.

And the best thing of Volta—it's superfast!

If you would like to get started with Volta, head over to [Volta—Getting Started](https://docs.volta.sh/guide/getting-started).

Happy coding! 😀
Two-factor authentication: How Beagle Security handles 2FA security testing
Tags: ai, aws, security
Published: 2022-05-18 06:41:37

2 FA plays an important role in securing our data against online attacks as an extra security layer, and users should be adopting it for their applications. 
There are many methods of two factor authentication available, all of which have a common goal: make it harder for a cyber criminal to get access to an account.
Thinking of the requirement, depending on a third-party application did not seem to fit our use case at Beagle Security.

> _With thorough research, we at Beagle Security decided to develop a device for 2FA purpose and we have achieved our goal with AI and IOT._

As a cyber security company, our approach to handling a two-factor authenticated application’s security testing is to gain access to a user’s account with their permission and find the hidden vulnerabilities in it by combining the usage of IoT, AWS cloud and AI.

See more on how beagle security handles 2FA services [here](https://beaglesecurity.com/blog/article/how-beagle-security-handles-2fa-security-testing.html)
TypeScript Quick Guide 101
Published: 2022-05-18 06:39:02

One appropriate next step for the React application would be to integrate TypeScript in order to add a layer of robustness and security.

TypeScript is a JavaScript superset that adds new features to the language, being one of the most important ones that, with TypeScript, you can add type-checking to your projects. TypeScript is the step that JavaScript needed to look like a high-level programming language (like Java).

My intention with this (short) article, is to write a quick guide with some of the most important features TypeScript has, without diving that much. So, let’s begin.

Most Important Types
: string
: number
: boolean
: array
: any
: void
: null
: undefined
How to apply types to your variables
```
let myVariable: number;
```
An array filled only with elements of a specific type type
```
let strArr: string[];

//or

let strArr: Array<string>;
```
Tuples
You use tuples when your array needs to contain a specific type of values in certain indexes. If the array overpass the size of the tuple, an error would not be throw. The only condition is to fulfill the requirements of the tuple.
```
let strNumTuple: [string, number];

strNumTuple = [3, ‘Hello’, 1, 2, 3]: // this would be correct.
```
Adding types to functions
You can add types to the parameters of a function, so, when the function is called, the types of the arguments would need to match. The type after the parameter represents the type of value the function should return.

```
const mySum = function(num1:number,num2:number):number{

return num1 + num2;

}
```
Interfaces
Let’s say you need that the argument passed to your function needs to be an object with values of specific types. This is one case when interfaces come in handy.
```
interface Todo{

title: string;

text: string;

} 
/* the object passed as an argument 
should contain at least values with those types.*/

function showTodo(todo: Todo){

console.log(todo.title+’ ‘+todo.text)

}

let myTodo = {title:’Trash’, text:’take out trash’};
```
And this is all for now…
Being TypeScript one of the best ways to strengthen applications that need JavaScript, it gains every day more and more importance in nowadays market. So, these days, to only learn JavaScript without Type it’s kind of pointless, and even if JavaScript evolves tomorrow and add features similar to TypeScript, these features are (almost for sure) going to be implemented in a very similar way (well, those are just my predictions).
What is Blue Prism?
Published: 2022-05-18 05:46:25

Blue Prism is a new digital workforce operating system that features even more than 12 decades of development and even RPA software advancements. Its software presents a secure and even expandable link program for the automation of robotic operations, specially designed to be able to provide robotic plans that are even more productive in typically the RPA industry. Typically the Blue Prism computer software also acts while an operating method with transaction optimization and automation, when providing an “artificially intelligent” correct program with AI and even cognitive capabilities.

Since 2002, Blue Prism has recognized the particular challenges faced simply by large companies any time dealing with very transactional activities. They will get the word “Automation of robotic processes” and, therefore, establish a totally new method of providing simple operations which may have started to transform the planet.

The particular robotic software for the automation of [blue prism certification](https://www.igmguru.com/machine-learning-ai/blue-prism-training/) provides companies of all types access to the agile digital workforce of the robot programs. Inside collaboration with sellers and traditional models for the shipping and delivery of technology, RPA opens very profitable alternatives that allow its teams to give attention to activities of better value. It really does so by employing rules according to guidelines that connect to existing organizational systems in the same way that individual work is doing.

To achieve this, RPA Digital Workforce is based on the need for a secure, steady, reliable and versatile way. Because of this techniques are assured in a precise and steady manner, improve compliance and reduce risks. Team groups may give attention to the value of driving as compared to processing continuing transactions.

Learn more : https://youtu.be/GDrPCwwQU-0
Java 8 lambda function implements deduplication of lists based on property values
Tags: java8, stream, lambda, list
Published: 2022-05-18 05:44:20

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vz7woikloxztznsx0lc.png)
If your project uses java8, there is a very simple way to deal with the deduplication according to the value of a certain attribute in the list, which is to use lamba function. The example code is as follows:
```java
List<UcShopCourseBizPojo> unique = ucShopCourseBizPojoList.stream().collect(
 collectingAndThen(
 toCollection(() -> new TreeSet<>(comparingLong(UcShopCourseBizPojo::getId))), ArrayList::new));
```
The comparingLong method is because in the pojo class UcShopCourseBizPojo, the duplication is removed according to the id, and the data type of the id attribute is Long. This method can be replaced by a more general method. The example code is as follows:
```java
List<UcShopCourseBizPojo> sLists = shopCourseLists.stream().collect(
        Collectors.collectingAndThen(Collectors.toCollection(
                () -> new TreeSet<>(Comparator.comparing(c -> c.getShopId()))), ArrayList::new)
);
```
However, this method of filtering weight has a disadvantage, which is, the obtained list may return random results each time, such as obtaining a list of store courses and deduplicating courses with the same shopid. If the shopid of two courses is the same, it may be called every time. Sometimes I will return to this course, and I will return to another course. I don’t know what the underlying cause is. This method is for reference only. If you know the reason, you can leave a message~
Terraform Configuration for comlying with CIS OCI Foundations Benchmark
Tags: terraform, benchmark, cis, oci
Published: 2022-05-18 05:40:00

Oracle 𝙌𝙪𝙞𝙘𝙠𝙎𝙩𝙖𝙧𝙩 𝙂𝙞𝙩𝙝𝙪𝙗 Repository has 𝙏𝙚𝙧𝙧𝙖𝙛𝙤𝙧𝙢 𝘾𝙤𝙣𝙛𝙞𝙜𝙪𝙧𝙖𝙩𝙞𝙤𝙣 for deploying a standardized environment in an Oracle 𝘾𝙡𝙤𝙪𝙙 𝙄𝙣𝙛𝙧𝙖𝙨𝙩𝙧𝙪𝙘𝙩𝙪𝙧𝙚 (𝙊𝘾𝙄) tenancy that helps organizations to 𝙘𝙤𝙢𝙥𝙡𝙮 𝙬𝙞𝙩𝙝 𝙩𝙝𝙚 𝘾𝙄𝙎 𝙊𝘾𝙄 𝙁𝙤𝙪𝙣𝙙𝙖𝙩𝙞𝙤𝙣𝙨 𝘽𝙚𝙣𝙘𝙝𝙢𝙖𝙧𝙠 𝙫1.1.

The 𝘾𝙡𝙤𝙪𝙙 𝙍𝙚𝙨𝙤𝙪𝙧𝙘𝙚𝙨 within the template is configured to meet the 𝘾𝙄𝙎 𝙊𝘾𝙄 𝙁𝙤𝙪𝙣𝙙𝙖𝙩𝙞𝙤𝙣𝙨 𝘽𝙚𝙣𝙘𝙝𝙢𝙖𝙧𝙠 𝙨𝙚𝙩𝙩𝙞𝙣𝙜𝙨 related to:
(1) 👤  𝙄𝘼𝙈 (Identity & Access Management)
(2) 🌐  𝙉𝙚𝙩𝙬𝙤𝙧𝙠𝙞𝙣𝙜
(3) 🔑  𝙆𝙚𝙮𝙨
(4) 🛡️ 𝘾𝙡𝙤𝙪𝙙 𝙂𝙪𝙖𝙧𝙙
(5) 🖊️  𝙇𝙤𝙜𝙜𝙞𝙣𝙜
(6) 🕳️ 𝙑𝙪𝙡𝙣𝙚𝙧𝙖𝙗𝙞𝙡𝙞𝙩𝙮 𝙎𝙘𝙖𝙣𝙣𝙞𝙣𝙜
(7) 🔌  𝘽𝙖𝙨𝙩𝙞𝙤𝙣
(8) ⚡ 𝙀𝙫𝙚𝙣𝙩𝙨
(9) ⏰  𝘼𝙡𝙖𝙧𝙢𝙨
(10) 📲 𝙉𝙤𝙩𝙞𝙛𝙞𝙘𝙖𝙩𝙞𝙤𝙣𝙨
(11) 🔋𝙊𝙗𝙟𝙚𝙘𝙩 𝙎𝙩𝙤𝙧𝙖𝙜𝙚
(12) 💰 𝘽𝙪𝙙𝙜𝙚𝙩𝙨

This 𝙧𝙚𝙥𝙤𝙨𝙞𝙩𝙤𝙧𝙮 𝙚𝙣𝙘𝙡𝙤𝙨𝙚𝙨 𝙩𝙬𝙤 𝙙𝙚𝙡𝙞𝙫𝙚𝙧𝙖𝙗𝙡𝙚𝙨:

(1) A 𝙍𝙚𝙛𝙚𝙧𝙚𝙣𝙘𝙚 𝙄𝙢𝙥𝙡𝙚𝙢𝙚𝙣𝙩𝙖𝙩𝙞𝙤𝙣 written in 𝙏𝙚𝙧𝙧𝙖𝙛𝙤𝙧𝙢 (HashiCorp Language) that provisions fully functional resources in an OCI tenancy.
(2) A 𝙋𝙮𝙩𝙝𝙤𝙣 𝙨𝙘𝙧𝙞𝙥𝙩 that performs 𝙘𝙤𝙢𝙥𝙡𝙞𝙖𝙣𝙘𝙚 𝙘𝙝𝙚𝙘𝙠𝙨 for most of the 𝘾𝙄𝙎 𝙊𝘾𝙄 𝙁𝙤𝙪𝙣𝙙𝙖𝙩𝙞𝙤𝙣𝙨 𝘽𝙚𝙣𝙘𝙝𝙢𝙖𝙧𝙠 𝙧𝙚𝙘𝙤𝙢𝙢𝙚𝙣𝙙𝙖𝙩𝙞𝙤𝙣𝙨. The script is completely independent of the Terraform code and can be used against any existing tenancy.

𝙌𝙪𝙞𝙘𝙠𝙨𝙩𝙖𝙧𝙩 𝙏𝙚𝙧𝙧𝙖𝙛𝙤𝙧𝙢 𝙘𝙤𝙣𝙛𝙞𝙜𝙪𝙧𝙖𝙩𝙞𝙤𝙣 𝙛𝙤𝙧 𝙩𝙚𝙣𝙖𝙣𝙘𝙮 𝙨𝙚𝙩𝙪𝙥 𝙖𝙘𝙘𝙤𝙧𝙙𝙞𝙣𝙜 𝙩𝙤 𝘾𝙄𝙎 𝙊𝘾𝙄 𝙁𝙤𝙪𝙣𝙙𝙖𝙩𝙞𝙤𝙣𝙨 𝘽𝙚𝙣𝙘𝙝𝙢𝙖𝙧𝙠
https://github.com/oracle-quickstart/oci-cis-landingzone-quickstart

𝙎𝙩𝙖𝙮 𝙩𝙪𝙣𝙚𝙙 𝙗𝙮 𝙛𝙤𝙡𝙡𝙤𝙬𝙞𝙣𝙜
https://www.linkedin.com/feed/hashtag/?keywords=did_you_know_that

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

https://www.linkedin.com/posts/mahmoudrabie2004_didabryouabrknowabrthat-cloud-cloudcomputing-activity-6932565146124890112-vGth?utm_source=linkedin_share&utm_medium=member_desktop_web
Why HTML is a must for every website.
Tags: html
Published: 2022-05-18 05:39:29

HTML stands for Hyper Text Markup Language and is the standard markup language for creating Web pages. It describes the structure of a Web page, telling the browser how to display the content.
Examples of website built only with HTML include: [The WWW project](http://info.cern.ch/hypertext/WWW/TheProject.html), [The mother fucking website](http://motherfuckingwebsite.com/), [Toad Hall](http://www.toad.com/) e.t.c.

## Semantic HTML
HTML semantic elements clearly give the content it wraps meaning to both the browser and the developer. For example and `H1` indicates a top level heading on our page. A few semantic elements include `nav`, `header`, `p`, `footer` etc.

## 40 HTML tags
### Container tags:
1. `html`: Opens and closes an HTML document
2. `head`: contains information about document
3. `title`: document title
4. `body`: contains all visible content of the web page
5. `p`: defines a paragraph
6. `div`: container for a block of content
7. `span`: container for in-line content
8. `nav`: contains navigation content
9. `main`: contains the main content of the web page
10. `header`: contains introductory content for a page
11. `footer`: contains information about the content on page. e.g the author and a copyright statement.
12. `td`: defines a cell in a table 
13. `ol`: defines an ordered list
14. `em`: italicize text  
15. `strong`: bold text
16. `ul`: defines an unordered list
17. `li`: defines a list item
18. `th`: defines table headings
19. `tr`: defines a table row
20. `table`: adds a table
21. `form`: defines a form
22. `label`: Defines a label for an `input` element
23. `textarea`: Defines a multiline input control

### Empty tags
24. `hr`: defines a horizontal line
25. `br`: defines a line break
26. `img`: inserts an image
27. `input`: used to collect user input (text, email e.t.c)
28. `link`: link external files e.g css styles
29. `meta`: contains metadata for web pages
30. `source`: includes external media to page
31. `area`: defines area inside an image man
32. `base`: defines abase URL for all URLs in document
33. `col`: defines column properties for each column within a `colgroup` element
34. `embed`: used for interactive content for external application integration
35. `wbr`: word break opportunity
36. `param`: defines parameters for plugins
37. `track`: defines track to be used with a media file
38. `command`: define command a visitor can invoke
39. `keygen`: defines a key-pair generator field that used by forms
40. `menuitem`: defines a command that a user is able to invoke through a popup menu
15 Ways to Kick Burnout in the Butt
Tags: burnout, productivity, tips
Published: 2022-05-18 05:36:37

1. Reevaluate your priorities

Take a daily break from technology. Nourish your creative side. 

2. Identify your stressors and admit that you are struggling

If 50% of people in the workplace struggle with anxiety and burnout then you are not alone. Tell your boss, tell your partner, tell your friend, tell me. Tell anyone!

3. Create a habit of journaling

Journaling has proven to be an excellent emotional decompressor. Creating the habit might take some time, but the results will naturally teach you how to recover from mental exhaustion.

4. Build a support network

Don’t be afraid to lean on others for support, whether those relationships are personal or professional. Talk to people you trust. Involving a trusted loved one can help you feel supported and less alone. Friends, family members, and partners can help you brainstorm possible solutions.

5. Get enough exercise

Moving your body will release the tension it holds while producing feel-good hormones like endorphins.

6. Create a work-life balance

One of the many causes of burnout is an imbalanced relationship with work. Cultivating a work-life balance will help you lead a much more functional and stress-free life.

7. Do things that you enjoy...With your phone on "Do not disturb"

When you are starting to burn out, procrastination ramps up several notches. The more overwhelming everything is, the more you procrastinate about doing it.

8. Create a healthy sleep schedule

Not getting enough sleep due to stress poses threats to physical strength, mental focus, and emotional stamina. Turn off your alarm clock on weekends. 

9. Set boundaries

Many people struggle to say no when being asked to take on extra work. Learning how to set boundaries at work and in relationships can help reduce the chances of burnout.

10. Be firm about your needs

Talk to others involved and let them know what’s happening. Explain that you need some support in order to take care of your health and manage your workload productively.

11. Practice self-compassion

Reaching a point of burnout can bring up feelings of failure and a loss of purpose or life direction. You might feel as if you can’t do anything properly or you’ll never achieve your goals. Grant yourself the same love and support. Remind yourself you don’t have to be perfect, and that it’s ok to need a break.

12. Take a vacation and fully unplug

If you can, remove yourself from your environment entirely that is causing you stress to renew your energy. If you can’t afford a holiday then take a staycation.

13. Schedule your relaxation time

Put a block of time in your calendar to do this, and then make yourself do it.

14. Detach self-worth from achievement

You are not your biggest success. How you feel about yourself should not be based on how many hours you put in at the office or how many times someone praised you.

15. Reduce caffeine intake

Caffeine is a stimulant. It’s all too tempting to try and push through the tiredness by drinking vats of tea and coffee but this will only make it worse.

Happy coding!
"pcieport 0000:00:1c.7" Diski Dolduran Log Problemi Çözümü
Published: 2022-05-18 05:17:47

Merhabalar, eğer sizde ***/var/log*** dizini altında bulunan **"kern.log, syslog, messages"** dosyalarının içerisinde aşağıdaki hataları alıyorsanız:
``` 
pcieport 0000:00:1c.7: AER: Corrected error received: 0000:00:1c.7
pcieport 0000:00:1c.7: PCIe Bus Error: severity=Corrected, type=Physical Layer, (Receiver ID)
pcieport 0000:00:1c.7:   device [8086:a297] error status/mask=00000001/00002000
pcieport 0000:00:1c.7:    [ 0] RxErr
```

Aşağıdaki adımları izleyerek bu sorunu ortadan kaldırabilirsiniz:
- **/etc/default/grub** Dosyasını bir editör ile açın.
```
sudo nano /etc/default/grub
```

- Dosya içerisindeki aşağıdaki satıra "**pci=noaer**" eklemesini yapın.

Ekleme yapılmamış hali:
```
GRUB_CMDLINE_LINUX_DEFAULT="quiet splash"
```

Eklenmiş hali:
```
GRUB_CMDLINE_LINUX_DEFAULT="quiet splash pci=noaer"
```

- Sonrasında aşağıdaki komut yardımı ile grub'ı güncelleyin.
```
sudo update-grub
```

- Güncelleme yapıldıktan sonra sisteme reboot atarak işlemi tamamlayabilirsiniz.
```
sudo reboot
```
How do I refactor IF_ELSE condition
Tags: javascript, node, refactorit, webdev
Published: 2022-05-18 05:02:36

Writing if-else is a daily job for a programmer. Whenever we write code, we check if something is true or false. But writing too many if-else conditions makes code unreadable. Below are some steps which I follow to refactor my if-else blocks.

## Method calling: 
Sometimes based on one parameter, we had to do different operations. 

```
class SomeClass {
  public action(status: string) {
    if (status === 'draft') {
      //Do some operations
    } else if (status === 'confirmed') {
      //Do some operations
    } else if (status === 'payed') {
      //Do some operations
    } else if (status === 'shipped') {
      //Do some operations
    }
  }
}
```
We can improve this by calling the method based on the parameter value.

```
class SomeClass {
  public action(status: string) {
    if (typeof this[status] === 'undefined') {
      //Throw your exception, do some default operations and return
    }
    return this[status]()
  }

  public draft() {
    //Do the draft operations
  }

  public confirmed() {
    //Do the confirm operations
  }

  public payed() {
    //Do the payed operations
  }

  public shipped() {
    //Do shipped operations
  }
}
```

## Object literal: 
If you only have to return one value based on a parameter, then you can use an object literal

```
if (operator === '=') {
  return a === b;
} else if (operator === '<') {
  return a < b;
} else if (operator === '>') {
  return a > b;
} else if (operator === '>=') {
  return a >= b;
} else if (operator === '<=') {
  return a <= b;
} else if (operator === 'like') {
  return String(a).toLowerCase().includes(String(b).toLowerCase());
}
```
Refactored
 

```
action(operator) {
    const operators = {
      '=': (a, b) => a === b,
      '<': (a, b) => a < b,
      '>': (a, b) => a > b,
      '>=': (a, b) => a >= b,
      '<=': (a, b) => a <= b,
      like: (a, b) => String(a).toLowerCase().includes(String(b).toLowerCase()),
    };

    if (typeof operators[operator] === 'undefined') {
      //Do your operation and return
    }
    return operators[operator];
 }
```


Note: We can also use a factory design pattern for it. But in most cases, it will be an overkill