teleren/devto huggingface dataset:
Dynamic routes in react-router v6
Tags: javascript, react, route, beginners
Published: 2022-03-10 08:44:12

Hey I found my self with a problem of not knowing how to do dynamic routes in react router v6 so here it is a short tutorial

In the file where you have your routes let's make a new dynamic routes such like this

App.tsx
```
    <BrowserRouter>
      <Routes>
        <Route index element={<Main/>}/>
        <Route path='/main' element={<Home />}/>
        <Route path='/main/:id' element={<ProductPage/>}/>
      </Routes>
      </BrowserRouter>
```

You will notice that the dynamic route is the one with the :id, once we got this we should go to the component page which in this case is ProductPage

ProductPage.tsx

```
import { useParams } from 'react-router-dom';
import React, { useContext } from 'react';
import shopContext from '../context/shopContext';

const ProductPage = () => {
    const state = useContext(shopContext)
    const { id } = useParams();
    const product = state.list.find((p: any) => p.id === id)

    return(
        <div>
            <h1 style={{color: 'white'}}>{product.title}</h1>

        </div>
    )
}

export default ProductPage;
```

Here you will see a lot but the main thing here is the following

```
 const { id } = useParams();
    const product = state.list.find((p: any) => p.id === id)
```
Here is where with useParams we know the url id and then on the product constant we compare it with the data from the api or mock data.

Once we got that from the product constant we can access to the data from our api like so

```
return(
        <div>
            <h1 style={{color: 'white'}}>{product.title}</h1>

        </div>
```

And now how to pass the data and navigate to the right page? Let's see

```
 <Link to={`/main/${data.id}`}>
 </Link>
```
With the above we pass the id of the product when we are map all the data, so depends on what product do we click it will pass the id of the right product.

Hope someone found it helpful.

Lautaro
Fake data makes for great programmers. A first timer approach to Mockaroo
Tags: javascript, webdev, node, programming
Published: 2022-03-10 08:34:46

## What is Mockaroo

It is a great day _the day that you find out you can speed up your development environment_ with just a few clicks on a random web application with a really good name.

**[Mockaroo](https://www.mockaroo.com/)**, or _crazy fast development data seeding_ for friends, is a web application, a _Software as a Service_ or SaaS, so to speak.

![Mockaroo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5hywyp5j45maj51xxfz.jpeg)

With _Mockaroo_ you can implement a digital twin of your data schema (_what your data looks like_) with ease, having a ready to use dataset with thousands of rows per table.

Say your database has 3 tables: _users_, _networks_, _offices_.

You could create three fake schemas that represent your data, along with their types, as you can see from the screenshot, and Mockaroo would take care of the data to seed to your datasets schemas depending on how the schema was represented.

![Mockaroo download types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk0an4haymm3w40vlqc5.png)

You can then _save_, _preview_ or _download_ the fake data that will be generated for you in different ways, as you see fit.

![Mockaroo download types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/advwus876n8z1b2ioh8y.png)

The datasets that will be generated with 1000 rows can be used to your liking to speed up the development process of your applications, so have fun with your new found powers!

This tutorial was small, I know, not too many memes either, but sometimes you just need to get your hands dirty and who am I kidding, I'm in bed after a long day at work and I just wanted to show you how cool Mockaroo can be and how satisfying it is to see data populated with ease and without any seeding effort.

## The goodbye

I hope you found this article useful and to your liking and if you have any requests, drop a message on one of my social media accounts or open an issue/start a discussion on github, on this [repository](https://github.com/404answernotfound/community/discussions)!

As always you can find me on [Twitter](https://twitter.com/404answnotfound), listen to my [Podcast on Spotify](https://open.spotify.com/show/0d3hBsVITjcFRxPRqvNtCQ?si=e060235591d54152) and add me on [LinkedIn](https://www.linkedin.com/in/lorenzopieri/) to talk professionally (_yeah, right_)
¿Cómo proteger tu correo de los hackers?
Tags: seguridadweb, hackers
Published: 2022-03-10 08:21:05


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgajx26yzdp25u2t7gkw.jpg)
**¿Por qué debes cuidar la seguridad de tu correo?**
Según las últimas cifras del FBI, el fraude por correo electrónico ha aumentado en los últimos meses. Por ejemplo, el daño total causado a las empresas por los ciberdelincuentes en los últimos cinco años ha sido más de 5.300 millones de dólares. Esto representa un aumento de más del 2,3 por ciento.

Tu cuenta de correo es un activo valioso ya que contiene datos personales, confidenciales o económicos que los ciberdelincuentes pueden robarte.
Cuando se trata de salvaguardar tu correo electrónico frente a malware y amenazas de phishing la información es poder. Por ello te damos unos consejos para que puedas mantener tu actividad sin interferencias y proteger tu correo de los hackers.

Desde **[digitalDot](https://www.digitaldot.es)** te damos _[8 consejos para mejorar la seguridad de los correos electrónicos](https://www.digitaldot.es/como-proteger-tu-correo-de-los-hackers/)_.
Transição de carreira para a T.I
Published: 2022-02-23 22:39:36

O LinkedIn divulgou a lista das 25 profissões em alta para 2022, dessa lista **ao menos 15 são da área de tecnologia**, evidenciando o que todos já sabem: a alta demanda de profissionais. A escassez de mão de obra qualificada tem valorizado os salários oferecidos, que por sua vez, acaba chamando a atenção de profissionais de outras áreas e faz com que tenham vontade de migrar para a T.I.

Antes de realmente mudar de carreira, existem **alguns pontos a serem considerados**:
O primeiro deles é entender que os salários altos, normalmente, estão ligados à senioridade do profissional. É muito difícil receber um salário astronômico nos primeiros meses de carreira, isso requer tempo, estudo e experiência. Mudar para a T.I apenas em busca de um alto salário, muitas vezes, pode ser frustrante.
O segundo é saber se você gosta de tecnologia a ponto de lidar com isso diariamente, se gosta de ser desafiado e do dinamismo que a profissão requer. 

Se, após entender tudo isso, achar que ainda assim vale a pena migrar pra área de tecnologia, eu tenho algumas dicas que podem fazer com que a transição seja mais fácil!

1. Antes de estudar alguma linguagem, estude a lógica. Sabendo a lógica de programação, você conseguirá aprender qualquer linguagem com mais facilidade;

2. Depois de aprender a lógica, aprenda sobre POO (Programação Orientada a Objetos);

3. Escolha seu foco. O desenvolvimento possui várias subdivisões, como back-end, front-end, mobile, análise de dados. Conheça todas e descubra com qual se encaixa;

4. Publique seu código no GitHub e peça a opinião de outras pessoas que já estão na área. Pode parecer um pouco assustador, mas se você explicar que está começando e que precisa de um feedback, as pessoas irão te ajudar;

5. Se você faz parte de algum grupo de pessoas menos representadas, encontre uma comunidade inclusiva. Hoje, a área é composta majoritariamente por homens. Encontrar uma comunidade vai fazer com que você se sinta mais a vontade para compartilhar seu processo e encontrar ajuda;

6. Pratique muito. Leia livros técnicos. Estude. E continue se atualizando!
A Quick 10-Second Programming Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-03-10 08:00:00

---
title: "A Quick 10-Second Programming Joke For Today"
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/5e1259b9b89f4.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:___ What do you call optimistic front-end developers?

___A:___ Stack half-full developers.
 -->
What Are The Current Social Media Trends?
Tags: social, mediatrends, socialmediamarketing
Published: 2022-03-10 07:10:09

The social media platform and its trends are a never-ending process. Social Media! Our virtual world revolves around social media. The trends on social media keep changing with a breeze of wind. And it is important to be up to date with the trends.
So, some of the current [social media marketing](https://externlabs.com/social-media-marketing.php) trends that every marketer should follow for online visibility are-

- Improving engagement with ephemeral contents
- Influencer marketing
- Local targeting to get more engagement
- Video contents
- Paid-advertising
- Linkedin + Influencer= LinkedInfluencer

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sp26k3t81zp0yk9x5gs2.jpg)
One color palette a day with example. - 005
Tags: uiweekly, webdev, design
Published: 2022-03-10 07:03:08

www.colorsandfonts.com

## Color and typography for Web Developers and Digital Designers.

From today, I will sharing 1 Color palette a day as I did before, when I started Colors & fonts.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46006aa4dvw0glm4iofh.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgkzlid4k33utrwsc9he.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxpjucwyyg8tmorjm77s.jpeg)

You will find them here, [Dribbble](https://dribbble.com/MichaelAndreuzza), [Instagram](https://www.instagram.com/apes_of_london/), [Pinterest](https://pin.it/w18zxbr) and [Twitter](https://twitter.com/Mike_Andreuzza).

Since 2017 - 2022
Which is the best company for web and mobile application development services?
Tags: webdev, app, android, ios
Published: 2022-03-10 06:50:52

This is a challenging question to answer because each business has its unique set of criteria and expectations that must be met by the web and app development firm. Hiring the best web and mobile app development firm in India that meets all of your demands is beneficial to your business and its growth.
This is also true that, as the mobile app and web development industries grow, more [mobile app development](https://iapptechnologies.com/mobile-app-development/) businesses come on the market, offering excellent services. In such a scenario, it is difficult to select the best one for your organization that operates according to your requirements. However, you can review some tips to choose the best web and mobile application development services including: 

Expertise
New developers may create great software, but they may lack the judgment to deal with difficulties that are unavoidable. Inquire about the kind of apps the developer has previously built, how they assisted in issue resolution, and their familiarity with the demands of your business and clientele.

Business Model
The provider's business model will offer you insights into how they operate. Are they solely concerned with starting or finishing the project? To supply you with a product that is suitable for your business operations, the organization you employ should be interested in your firm, its aims, your clientele, and its requirements.

Future Value
The goal of acquiring an application is to maximize the value it will offer to your business. In any case, consider the following: What happens if I scale my operations? Is it possible to link the app with pre-programmed developments? Will the company offer assistance and maintenance? Technology is sure to improve and falter, and you want a partner that can provide relevant services to support the app development.

Budget 
While you may desire the high-functioning software that has recently joined the market, keep in mind your financial restrictions. However, don't only look at budgets from the standpoint of allocating cash; additionally consider the expenses you may incur in the future. The necessity of the hour is to seek cost-effective services that do not compromise on product quality or service standards.
Here are some top mobile and [web designing companies](https://iapptechnologies.com/web-designing/) you might consider:
iApp Technologies LLP
Peerbits
The NineHertz
ValueCodes
Konstant Infosolutions
Prismetric
ARKA Softwares
[ Python ] - Iterator & Generator
Tags: python, computerscience, algorithms
Published: 2022-03-10 06:38:57

최근에 **Iterable, Iterator, Generator**에 대해 공부를 했는데,
도대체 어떻게 정리를 하고 글을 써야 할지 몰라서 거의 일주일은 미룬 것 같다.

그런데 이렇게 미루다 간 평생 못쓸 것 같아 일단 두서없이 쓰더라고 일단 그냥 써보려고 한다.

쓰다 보면 내가 어느 부분을 잘 알고 어느 부분을 잘 모르는지 알 거라 생각했다.

<hr>

**Iterable** : 반복이 가능한 모든 객체를 의미한다.
쉽게 말해, for in 구문에서 in 뒤에 올 수 있는 모든 값은 Iterable 하다고 할 수 있다.

**Iterator** : 요소가 여러 개인 데이터 타입에서 각 요소를 하나씩 꺼내어 어떠한 처리를 수행할 수 있도록 도와주는 **객체**이다.

**Generator** : Iterator의 한 종류이다. 하나의 요소를 꺼내려고 할 때마다 요소 Generator를 수행한다. Python에서는 주로 yield 문으로 구현한다.

Generator는 모든 데이터를 가지고 와서 사용하지 않는다. 그때그때 yield에 의해 하나씩 가져와서 사용한다. 그래서 메모리의 효율성이 좋다는 것이다.

뭔 소리인가? 일단 코드부터 살펴보자.

<hr>

## 메모리 크기 비교
하나는 List Comprehension을 이용해 10만의 크기를 가진 리스트를 생성, 남은 하나는 Generator 객체를 만들 것이다.
### size.py
```python
import sys

# Function Version
my_list = [i for i in range(100000)]
print(type(my_list), sys.getsizeof(my_list), "bytes")

# Generator Version
my_gen = (i for i in range(100000))
print(type(my_gen), sys.getsizeof(my_gen), "bytes")
```
### Result
```shell
<class 'list'> 800984 bytes
<class 'generator'> 112 bytes
```

크기가 1일 땐, 88과 112로 my_list가 더 작다.
하지만 크기가 커질수록 점점 차이가 나며, 위처럼 크기가 10만이라면 my_list의 크기는 800984 bytes가 나오게 된다.

my_gen의 크기는 크기가 몇이든 항상 112 bytes이다.
10만의 크기를 기준으로 약 8,000배의 차이가 난다.

위에 Generator는 모든 데이터를 가지고 오지 않는다고 했는데, 위 예제를 한 번 더 보면 my_list라는 변수에는 크기가 10만 개인 리스트가 메모리에 올라가 있다.

하지만 my_gen이라는 변수는 Generator 객체이다. 이미 10만 개의 크기를 갖고 있는 것이 아니라 그때그때 하나씩 가져와서 쓰는 친구이다.

위에서도 언급했지만, Generator는 Iterator의 한 종류이고, Iterator는 요소를 하나씩 꺼내어 어떠한 작업을 수행할 수 있도록 도와준다.

그리고 예를 들어 일반적인 for 문은 모든 요소를 다 돌아야지만 작업이 끝나고 다른 작업을 할 수 있는데, Generator는 한 번 yield로 반환 후, 다른 작업을 할 수 있다.

<hr>

## 속도 비교
10만 개의 크기를 가진 피보나치수열을 리스트로 생성 후, 하나씩 총 10만 번을 출력하는 코드를 작성하려고 한다.

1. 하나는 일반 함수로 10만 개의 크기를 가진 피보나치수열을 리스트로 생성할 것이고 for 문을 통해 출력한다.
2. 하나는 Generator를 이용할 것이다.
3. 모든 출력은 pass로 대체한다.

### time.py
```python
import time

# Function Version
start_func = time.time()


def fibonacci(n):
    a = b = 1
    result = []
    for i in range(n):
        result.append(a)
        a, b = b, a + b
    return result


for _ in fibonacci(100000):
    pass

end_func = time.time()
print('Function time = ', end_func - start_func)


# Generator Version
start_gen = time.time()


def fibonacci(n):
    a = b = 1
    for i in range(n):
        yield a
        a, b = b, a + b


for _ in fibonacci(100000):
    pass

end_gen = time.time()
print('Generator time = ', end_gen - start_gen)
```
### Result
```shell
Function time =  0.3048691749572754
Generator time =  0.13507723808288574
```
위 예제를 통해 알 수 있듯이, 속도에 있어서 큰 차이를 보인다. 100만 개의 크기도 테스트를 해봤는데, 크기가 클수록 더 차이게 크게 난다.

왜 속도의 차이가 날까?

일반적인 방법으로는 하나하나 리스트에 담고 마지막에 for 문을 돌려가며 출력을 한다.

하지만 Generator를 이용하면 list에 담지 않아도 된다.
굳이 어느 메모리에 리스트를 올려두지 않아도 Generator가 하나하나씩 가져와서 출력을 하기 때문이다.

## 정리
Generator를 이용하면 메모리를 효율적으로 사용할 수 있다.
물론 항상 그런 것은 아니다.

그리고 DB Session과 같이 많이 반복되거나 끝이 없는 작업을 할 때 Generator를 사용하면 매우 좋을 것 같다.

아직 많이 부족하다. 하지만 항상 생각하고 더 좋은 코드를 짜려고 노력해야 더 좋은 개발자가 될 수 있다.
My Git Aliases Categorized by Usage
Tags: git, productivity, webdev, programming
Published: 2022-03-10 06:32:00


These are the aliases I use in my `.gitconfig` file.

## Most Used

```bash
[alias]

# status of commit
st = status -sb

# add, commit, stage your changes
acm = !git add . && git commit -m

# add, commit, stage, and push changes to origin
acmp = "!f() { git acm \"$@\" && git p; }; f"

# commit with message
cm = commit -m

# get branch
br = branch

# delete a branch only if it has been merged
bd = branch -d 

# force delete a branch
bDf = branch -D 

# checkout a new not yet existing branch
cob = checkout -b

# push changes to a remote
p = push

# fetch from repo and prune any remote-tracking refss that no longer exist on remote
f = fetch -p

```

## Less Commonly Used

```bash

# edit this config file
edit-config = config --global -e 

# show aliases
aliases = config --get-regexp alias 

# stash list
sl = stash list

# stash work (along with untracked files) with message
ss = stash save -u

# get a stash (ie. stash@{2})
sp = stash pop

# get most recent stash
sprecent = stash pop stash@{0} 

# logging
plog = log --graph --pretty='format:%C(red)%d%C(reset) %C(yellow)%h%C(reset) %ar %C(green)%aN%C(reset) %s'

```

## Never Really Used, but Exist

```bash

# remove all branches merged into the branch I'm on
bdm = "!git branch --merged | grep -v '*' | xargs -n 1 git branch -d" 

# checkout a branch
co = checkout

# push changes to master
pom = push origin master 

# tag a version
t = tag

# list contributors
rank = shortlog -sn --no-merges

# logging
lg = log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit

tlog = log --stat --since='1 Day Ago' --graph --pretty=oneline --abbrev-commit --date=relative

# View unpushed commits
unpushed = !GIT_CURRENT_BRANCH=$(git name-rev --name-only HEAD) && git log origin/$GIT_CURRENT_BRANCH..$GIT_CURRENT_BRANCH --oneline

# View unmerged branches, except for those beginning with "archive/" and "staging"
unmerged-D = !git branch --no-merged develop | grep -Ev \"(archive/|staging)\"
unmerged-M = !git branch --no-merged master | grep -Ev \"(archive/|staging)\"

# View which branches need to be merged, except for those beginning with "archive/" and "staging"
active-merged-D = !git branch --merged develop | grep -Ev \"(archive/|staging)\"

```

**Comment below with your favorite git aliases!**

Thanks for reading, and Happy Coding!
Brian
HTML Attributes
Tags: webdev, html, beginners
Published: 2022-03-10 06:25:24

## What are attributes?
In an easy way, it's the first creepy thing you will learn in HTML that won't make any sense at the time. Because, well it doesn't affect much for most of them.

But for some, it's necessary like `img`, `a`, etc.

In a professional way, as a web developer, we develop code for vast fo people and we need a beautiful and interactive website that a user will love. So we use them.

I will talk about the common attributes,

### `src` and `alt`
`src` is an essential attribute for the `<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>` tag to function. So in `img` tag, we use something like this `<img src="my_image.png" alt="" >` So, `src` use for mentioning the URL for the image. And don't forget to use a descriptive `alt` tag, because if anything goes wrong with the URL it will show the text instead. So finally It will look something like this `<img src="my_image.png" alt="a demo image" >`. Another reason for using `alt` text is, the people uses a browser reader for their browsing experience the browser reader reads the `alt` text for an `img` tag.

### `href` 
It is necessary for the `a` tag to work. It defines the address you will be going after clicking the text within an `a` tag. So, we use it like `<a href="https://ah-jim-seed.web.app/">my website</a>`.

### class and id
Oh man, These are the most common day-to-day used attributes for you as a web developer. You will use them to style an element or make that interactive. You can use in any HTML element in the opening tag like `<tagName class="" id="">` ie, `<div class="demo__class" id="unique_ID">`. One thing to keep in mind here, the `class` can be repeatable on the page but the `id`s should be unique on that particular page and they are not required to write HTML code.

### height, width, and style
These are optional and you use them in any of the tags you can use in the `body` tag. So, height defines the right of that element, width defines the width, and style let you use CSS within the tag itself. you can write them this way `<p height="100px" width="20px" style="color: red;">...</p>`

### lang 
Lang is used to defining the language used in the element. The value are language code, it can be used as `<html lang="en">`.

In the `head` tag we use different sets of tags and attributes we will discuss them next week.
No Permission Handler Detected (IOS)
Tags: ios, xcode, permissionhandler
Published: 2022-03-10 06:22:56

---
title: No Permission Handler Detected (IOS)
published: true
description: 
tags: ios, xcode, permissionhandler
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8q00r8v818cexl23hme.png
---

Simply go to node_modules --> react-native-permission --> RNPermissions.m


In this file Search for "No permission handler detected"
and comment this line "RCTLogError(@"%@", message)"

then you're good to go, for now.
More then 10 String cases - I didn't knew about before today
Tags: javascript, apps4develope, webdev, beginners
Published: 2022-03-10 06:18:48

apps 4 developers
Lower Case

apps_4Developers
Camel Case

Apps 4 Developers
Capital Case

APPS_4_DEVELOPERS
Constant Case

apps.4.developers
Dot Case

Apps-4-Developers
Header Case

apps 4 developers
No Case

apps-4-developers
Param Case

Apps_4Developers
Pascal Case

apps/4/developers
Path Case

Apps 4 developers
Sentence Case

apps_4_developers
Snake Case

 Learn more on Apps4Developers.com - https://www.apps4developers.com/string-case-change/
Laravel 9 Step By Step Pagination Example Tutorial
Tags: laravel
Published: 2022-03-10 06:10:12

This tutorial will give you an example of laravel 9 pagination example blade. I explained simply about laravel 9 pagination bootstrap 5 example. This tutorial will give you a simple example of the laravel 9 pagination tailwind example. you will learn how to add pagination in laravel 9. So, let's follow a few steps to create an example of how to create pagination in laravel 9.

We know pagination is a primary requirement of each and every project. so if you are a beginner with laravel then you must know how to use pagination in laravel 9 and what is another function can use with laravel 9 pagination.

In this example, we will run the migration and create a "users" table. Then we will create dummy records using the tinker command. Then we will display that users with pagination. by default laravel pagination use Tailwind CSS design, we will use bootstrap 5 design for pagination here.

So, let's follow below tutorials:
[Laravel 9 Step By Step Pagination Example Tutorial](https://www.codecheef.org/article/laravel-9-step-by-step-pagination-example-tutorial)
Snippet... QR Code - Yes it's that easy to generate a QR Code
Tags: snippet, javascript, qrcode, apps4developers
Published: 2022-03-10 06:08:05


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

See it in Action : **https://www.apps4developers.com/qr-code/**

## Installing `qrcode`

Install QrCode library from [npm](https://www.npmjs.com/package/qrcode).

```shell
npm install qrcode
```

#### Generate QR Code from String

```javascript
import QRCode from 'qrcode';

QRCode.toDataURL(
  `https://www.apps4developers.com`,
  { margin: 2},
  function (err, url) {
    if (err) throw err;
   console.log(url);
  }
);

```