teleren/devto huggingface dataset:
Managing your profile README in Github
Tags: github, cloudskills, beginners
Published: 2022-08-29 18:33:00

## Did you know you can use a Markdown file for your profile on GitHub?

You can add a README to your GitHub profile (using your username as repo) to tell other people about yourself.


As Software Engineers our Github profile is pretty essential. Did you know that you can create a repo with your name and have all the vital information about you in a very single and technical place?


https://github.com/jorgetovar/jorgetovar/blob/main/README.md


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hw5g93ckjjcptlxfamml.jpg)
I found this amazing repository that could help you to create a more professional readme. Pretty nice, indeed. 

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


https://rahuldkjain.github.io/gh-profile-readme-generator/
Debouncing Component Methods in Angular
Tags: angular, typescript, tutorial
Published: 2022-08-29 18:26:00

Using component methods is generally unwise for known reasons, yet sometimes an application can have third party components that require using component methods in template to react to outputs.

In today's article we are going to explore a way of debouncing component's method execution, so it does not fire too often, without resolving to rxjs tools.

For the sake of simplicity we will be using a simple component that implements a counter.

```typescript
import { Component } from '@angular/core';

@Component({
  template: `<p>{{ calledTimes }}</p>
    <p><button (click)="increment()">increment</button></p>`,
  selector: 'app-root',
})
export class AppComponent {
  private _calledTimes = 0;

  public get calledTimes(): number {
    return this._calledTimes;
  }

  public increment(): void {
    this._calledTimes++;
  }
}
```

Everything is rather straightforward: there is a property that is incremented each time a handler in template is called. To show things down we could use rxjs' `Subject`s with `debounceTime`, but such solution would be limited to a component that implements it and not transportable to other components which might need debouncing their method calls.

What we can do as an alternative, is to create a parameterized decorator which would accept a debounce time in milliseconds and utilize `Promise` to postpone method execution.

```typescript
export function debounce(ms: number) {
  return (
    target: unknown,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ): void => {
    let timer: ReturnType<typeof setTimeout>;
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
      new Promise((resolve) => {
        if (timer) {
          clearTimeout(timer);
        }

        timer = setTimeout(() => {
          resolve(originalMethod.apply(this, ...args));
        }, ms);
      });
    };
  };
}
```

What is cool about this approach is that now we have a separate debouncing mechanism which we can apply to any method of any component. So if we wanted to limit increment to 2 seconds, we could simply decorate the method:

```typescript
import { Component } from '@angular/core';

import { debounce } from './debounce/debounce.decorator';

@Component({
  template: `<p>{{ calledTimes }}</p>
    <p><button (click)="increment()">increment</button></p>`,
  selector: 'app-root',
})
export class AppComponent {
  private _calledTimes = 0;

  public get calledTimes(): number {
    return this._calledTimes;
  }

  @debounce(2000)
  public increment(): void {
    this._calledTimes++;
  }
}
```

Simple as that :)
Looking for like minded Developers!!
Published: 2022-08-21 21:46:21

Hey everyone!! My name is Hady and I am a full-stack web developer trying to get my first job in the tech industry. I was a chef for a long time and then got certified as a Dell technician and did hardware repair for a few years but had to leave that job because I was looking for more stability. That's when I found out about an accelerator program called Pursuit and I fell in love with coding and the rest is history!! I always thought up till that point that the only way to become a developer was to go the traditional route and get a CS degree. My skillset include JavaScript, Html, Css, Postgres SQL and React as well. Im always willing to learn something new and I am glad that I found this awesome community to continue to learn and grow. I'm interested in learning more about mobile and cloud development and also brush up on my PERN stack skills! I look forward to meeting some other cool like minded developers and collaborating on some cool projects!! Please don't hesitate to reach out and let's build something awesome!
What is array.reduce() in JavaScript ?
Tags: javascript, webdev, beginners, tutorial
Published: 2022-08-29 18:01:06


![Reduce example overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xzd5p9bpq7uxov3xjls.png)



Reduce is an array method that can convert or reduce the data in an array and return a single output.

## Syntax:

```jsx
array.reduce( reducerfunction ( accumilator, item, index, array ), initalAccumilatorValue )
```

- **accumulator** is a variable that will be changed in each loop through the array.
- **item** refers to the current item in the array.
- **index** refers to the index of the current item in the array.
- **array** refers to the initial array.
- **reducer function** shows how the accumulator is modified.

## Where would we use **reduce**?

Consider we have an input array containing information about users, ie name, age, etc, and had to group them by age.

```jsx
    const array = [
        { name: "John", age: "20" },
        { name: "Mary", age: "20" },
        { name: "Peter", age: "50" },
        { name: "Sally", age: "50" },
    ];

```

if we had to group them by age.

```jsx
    {
        20: ["John","Mary"],
        50: ["Peter","Sally"]
    }

```

we could use the **array.reduce()** method.

```jsx

    const result = array.reduce((acc, curr) => {
    if (!acc[curr.age]) { //chk if age exist in accumilator
        acc[curr.age] = []; //createing empty array at accumelator.age
    }
    acc[curr.age].push(curr.name); // pushing name to appropriate accumulator.age
    return acc;
    }, {});

    console.log(result);

```

## How does it work?

when we call the array.reduce() method we pass two parameters.

1. accumulator function 
2. initial value for the accumulator

The **accumulator function** defines what action needs to take place to a value( the accumulator ) so that the desired final reduced value may be obtained

in the above example


![Reduce example explanation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zedmjqz6unv32e3pkunq.png)



Every element is passed one by one to the accumulator function, Which checks if the age of the given person is not already present in the accumulator, If that is the case, Then it creates a new property for the person's age and assigns an empty list to it. later the person's name is pushed to the property where their age is present ( either newly created or previously present )

## Conclusion

The `array.reduce()` method is a very powerful array method that could simplify complex loop logic and provide a much more intuitive programming experience to the developer and the reader.
Flutter Fix: flutter_facebook_auth 4+ No implementation found
Published: 2022-08-29 18:01:00

MUST HAVE!!!

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


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


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


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


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



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqxlrx7arem8d3u0z5sk.png)
Certificados SSL
Published: 2022-08-29 18:00:35

El protocolo SSL tiene sus fundamentos en dos conceptos:

**Criptografía Asimétrica **(tambien conocida como criptografía de la clave pública)

En este tipo de criptografía se generan dos claves relacionadas entre sí, una clave _pública_ y otra _privada, las cuales son generadas por algun algoritmo criptográfico.
Entre los algoritmos más conocidos encontramos RSA, DSA y PKCS

La clave pública es la que compartiremos con quienes queramos que se puedan comunicar con nosotros y la privada debemos mantenerla protegida, jamas compartirla. 

Cuando alguien quiere enviarnos un mensaje, este mensaje será encriptado con nuestra clave pública (previamente compartida) y solo nosotros podremos desencriptarlo utilizando la clave privada.

**Criptografía Simétrica**

La forma simétrica utiliza una sola clave para encriptar y desencriptar, por lo tanto en una comunicación la clave solo la deberian tener ambas partes involucradas. Algunos de los algoritmos más conocidos utilizados son AES-128, AES-192 y AES-256.

¿Qué es un certificado SSL?

Tambien conocidos como certificados digitales, son archivos de datos emitidos por una autoridad certificada (CA, Certificate Authority) que utilizan criptografia asimétrica para establecer la conección segura entre dos partes utilizando el par de claves pública y privada. El certificado SSL contiene la clave pública y otros detalles, como la fecha de creación y expiración, la CA emitora del certificado e información sobre quienes lo están utilizando, entre otras cosas.

El formato de un certificado esta dado por un standar llamado X.509.

Hay diferentes formatos, PEM y PKCS#7 utilizan un codificado en Base64 ASCII mientras que DER y PKCS#12 lo hacen en binario.
These Command Prompt (Tricks) will Amaze you.
Tags: tutorial, commandprompt, trick
Published: 2022-08-29 18:00:00

## 1.Change the color of the Command Prompt

Before we change the color we must be aware of how many colors are there in Command prompt So first run this command
 `color help` 

This will give you the list of available colors.

>   0 = Black       8 = Gray
    1 = Blue        9 = Light Blue
    2 = Green       A = Light Green
    3 = Aqua        B = Light Aqua
    4 = Red         C = Light Red
    5 = Purple      D = Light Purple
    6 = Yellow      E = Light Yellow
    7 = White       F = Bright White
 
Select any two number followed by color as prefix (number1 number2) number 1  is for background color
number 2 is for text color.

Now if you want to make your color green with black as a background type `color 02` or `color 0A`

Note: - `color 07` is the default color of command prompt.

![Command Prompt Color Changed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k04nk42dj8pfhqt2htxy.png)

## 2. Change the Prompt 

You can create your own custom prompt 
e.g. C:\Users\Downloads to Something like yourname@hacker.

`prompt your custom name`
 
e.g. 
`prompt harry@hacker$G`


![Command prompt name change ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csx5ts7qmlny4ay6vbvo.png)



## 3. Changing the title of  command prompt window

`title Enter your own title`

e.g. `title Hacking the system` & it will change the title of your command prompt.

![Command Prompt Title change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ic0pt7mhe8i7ftycdnbc.png)

## 4. Hide Your Personal Stuff!

  
To hide Use this command :- `Attrib +h +s +r folder name`

To Show USe this command :- `Attrib -h -s -r folder name`

## 5. Copy Output to Clipboard

`| clip` this command will copy the command output to your clip board.

`dir | clip` this command will copy the dir's command output to your clip board. 

> | this is a pipe symbol.

## 6. View Command History

by Using f7 key from your keyboard you can checkout the command history.

## 7. Create folders with reserved name 

What are name which we cannot use to make a folder.
1. con
2. aux

These are the by default reserved keyword in windows..
but we can overwrite this by using command

`md aux\` - this will generate a aux folder.
`md con\` - this will generate a con folder.

### 8. View All installed Programs in the Command Prompt.

`wmic product get name`

this command will show you all the programs installed in your machine.


![Programs see using cmd](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5um8xoc6zwwpnbb0g4wy.png)
URL Shortener : Microservice Maven
Tags: redishackathon, redis, database, microservices
Published: 2022-08-29 17:28:58



### Overview of My Submission
A URL shortening service with objective to:
- To provide a alias for long URLs
- Record the visits on the URL for info about its use

### Submission Category: Microservice Mavens

#### Video Explainer of My Project

{% embed https://www.youtube.com/watch?v=bB_ph71Oh7w %}

### Language Used
- Java : Spring Boot
- Golang : Fiber
- Javascript : React.js


### Link to Code

{% embed https://github.com/dev117uday/redis-dev-hackathon %}


### Additional Resources / Info

#### Typical Architecture


![Typical](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6zd5hqkxuwekfeas3dm.png)

#### Redis Stack Architecture

![Redis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vk4408a10btfhqea4hh5.png)

- TimeSeries visualization using redis stack 

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



### Collaborators
Just me ...

- - - 

* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
Podcast | Fathym on Views on Vue
Tags: javascript, webdev, vue, podcast
Published: 2022-08-29 17:45:28

Here in Colorado, we have many great views. From the mountaintops to the valleys and the hills in between.

And when it comes to Vue.js, Fathym is a fan of the JavaScript Framework.

Our Director of Engineering Jeremy Tomlinson and Brand Communications representative Rich Kurtzman were happy to be part of the Views on Vue Podcast in mid-August. 

During the interview, host Steve Edwards asked our team about many things including:

- Who Fathym is and what we do
- Hosting with Azure and/or AWS
- Modular frontends
- Our content on Vue

"On the whole, we like to think of Fathym as an innovation acceleration engine," Tomlinson explained. "On the hosting side, we help companies get their projects into the cloud. Right now, we're specifically focused on Microsoft Azure. We have a platform for controlling cloud cost." 

Jeremy and Rich touched on:
- [Modular frontends](https://www.fathym.com/blog/articles/2022/august/2022-08-16-modular-frontends-fantastically-functional) 
- Cloud hosting
- Our virtual developer
- How you can [host a headless WordPress with Vue](https://www.fathym.com/blog/articles/2022/april/2022-04-11-headless-wordpress-vue)
- [IoT Ensemble](https://www.fathym.com/blog/articles/2022/july/2022-07-15-discover-iot-ensemble)

"We're always aiming to lower the bar in terms of what it takes to build a website through our Fathym Platform," Kurtzman explained. "We allow people to use low-code tools, no-code tools or even JavaScript frameworks."

Check out the entire podcast and get all the awesome info into how the Fathym Platform works and how we can help companies get their site hosted in Microsoft Azure with ease. 

[Listen to the Views on Vue Podcast with Jeremy Tomlinson and Rich Kurtzman of Fathym here.](https://topenddevs.com/podcasts/views-on-vue/episodes/dive-into-the-benefits-of-fathym-with-jeremy-tomlinson-and-rich-kurtzman-vue-193)
Envie de contribuer à des projets open source sur Github ? (1/2)
Tags: python, github
Published: 2022-08-29 17:45:00

## Web scraping statique avec `BeautifulSoup`

Récemment j'ai cherché des projets open source auxquels contribuer. L'idéal pour commencer à contribuer est de trouver une issue avec le label `good first issue`. L'ennui c'est qu'il faut parcourir chaque repo et aller voir dans les issues s'il y en a une avec ce label ou alors aller visiter directement l'url `https://github.com/{username}/{repo_name}/contribute`

Peut être que j'ai tout simplement mal cherché mais je n'ai pas trouvé de moyens dans github de lister tous les repos ayant ce genre d'issues en fonction d'un filtre de `topic`. Je me suis donc servi de la deuxième méthode expliquée ci dessus et de la librairie [BeautifulSoup]
(https://www.crummy.com/software/BeautifulSoup/bs4/doc/) pour parcourir automatiquement les repos filtrés par topic et lister les issues avec le label good first issue s'il y en a.

cf. tweet 👇 {% embed https://twitter.com/_pacdev/status/1562919863433191424?s=21&t=ZYZBIqI4gYS7sg6DesHO2g/ %}

Ci dessous les quelques étapes qui permettent d'extraire les contenus des pages html:

On créé un objet instance de la classe

```python
soup = BeautifulSoup(html_content, 'html.parser')
```

> `html_content` est le contenu html de la page obtenu avec un `requests.get(url)` par exemple

Sur cet objet `soup` on applique les méthodes de la librairie. Il suffit de repérer dans sa page html statique, quelle est notre cible (`F12`  par exemple pour obtenir le code source de la page).

![Trouver la cible](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6guj5i0uwnp7ps0i6ani.png)

Le résultat est une liste de dictionnaires qui contiennent les infos de cette balise en particulier. Pour obtenir le lien hypertext il suffit d'aller chercher le contenu href de chaque dictionnaire.

👉 Plus de détail dans [le répo](https://github.com/p-acDev/find-good-first-issues.git)

👉 N'hésitez pas à [contribuer](https://github.com/p-acDev/find-good-first-issues/contribute)

## Web scraping dynamique

Il y a un ennui. Cette librairie est un outil pour les pages statiques. On ne peut pas interagir avec le site. Quand on applique un filtre par `topic` dans github explore, on ne récupère qu'une liste de quelques repos avec un bouton `load more` à la fin

![Import dynamique nécessaire](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njzwj8zce4216eaylfhi.png)

C'est un utilisateur github [AlexMihalache99](https://github.com/AlexMihalache99) qui m'a orienté vers la solution

{% embed https://github.com/p-acDev/find-good-first-issues/issues/2#issuecomment-1229367429 %}

### MAJ avec [selenium](https://selenium-python.readthedocs.io)

> La suite dans une prochaine update
Url Shortener
Tags: redishackathon
Published: 2022-08-29 17:42:00

 [Instructions]: # (To submit to the Redis Hackathon on DEV, please fill out all sections. DELETE ALL NOTES, reminders, and guidelines before publishing.)


### Overview of My Submission
It's an imitation of Url Shortener Service.

Only functional requirements are considered while developing this project i.e to generate short url and redirect short url to original url.

In case url got expired/moved to other domain/not responsding, a 404 error page is shown.

Redis is used as primary as well as caching database here.

Some analytics and expression values(like,star,thumbs up etc...) are permanently stored in database while urls are short lived.
![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4eaj7cnoog8ocy3fxsp4.png)
![404 Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5da0tqunjdq9zfrm5uhx.png)
![Analytics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zj99itgyet65l7i3qwas.png)
![Mobile Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jym2t9547e7wf1vqb6wr.png)
  
 


### Submission Category: 
MEAN/MERN Mavericks

{% embed https://youtu.be/YJlg9RTmKDM %}

[Note]: # (This is where you can embed the optional bonus video you created to accompany your submission. Ensure your video is published publicly to YouTube and you’ve used the embed tag here to share it with us. By opting to include a video, you will be eligible for BONUS prizes. Learn more in the announcement post.)

### Language Used:
NodeJs & React


### Link to Code
####Frontend:
{% embed https://github.com/anshulnegitc/url-shortener-app-frontend %}

####Backend:
{% embed https://github.com/anshulnegitc/url-shortener-app-backend.git %}

- - - 

[Note]: # (Please ensure  that the footer content below is part of your post when publishing. Please delete this note in parentheses but do not delete the content below.)


* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
Introducing juhu - an open source search engine
Tags: redishackathon, javascript, bot, webdev
Published: 2022-08-29 17:10:29

### Overview of My Submission
Juhu is an open-source search engine that is built using Nodejs and Redis database. As you have already guessed the use case scenario of the website. Why not try on your own, [Search for Elon Musk](http://143.198.136.81/search?q=elon%20musk).

I was always curious to know about how search engine are built and most importantly how SEO is done. Throught the journey of building the new search engine, I have learnt a lot of things about how the data should be displayed on the website, what are the HTML tags needed to make the crawler understand what your website is all about. Also, using a pre-styled HTML elements (built for the specific purpose) are better than using a CSS to style the elements later.


### Submission Category: 

MEAN/MERN Mavericks _Yes, I have used MERN, also replaced M with R, I mean I have used redis as a primary database_

### Video Explainer of My Project
{% embed https://youtu.be/a2KDXRHfrqA %}


### Language Used:

I have used Javascript as a primary language and Nodejs as a runtime environment. I have used different libraries/packages to build this application. Some of them are:

- **Puppetter** -> I have used this automation tool to scrape the websie

- **Redis OM** -> Used to interact with redis services (Redis search/ JSON database)

- **Express** -> To create server

- **React** -> To create client side (frontend)

- **Mongoose** -> To use secondary database (MongoDB)

### Link to Code

The MERN application repository:
{% embed https://github.com/aashishpanthi/search-engine %}

The bot repository:
{% embed https://github.com/aashishpanthi/web-crawler %}

### Architecture:

![Juhu architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqfqs2xtwe4j8xop8era.png)



### Links:

- [Web crawler](https://github.com/aashishpanthi/web-crawler)
- [MERN app](https://github.com/aashishpanthi/search-engine)
- [Website](http://143.198.136.81/)



# Some Screenshots of the website

- Home page

![Home juhu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0su25mcg3i7s04jkj2rk.png)

- Text Result (Search result) page

![Search result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uct9l9vazzcmz3pcwoi2.png)

- Image result (Search result) page

![Image search result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6di0byujk1ghfxdb31z.png)

### Collaborators

@roshanacharya and me @aashishpanthi

- - - 


* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
Games
Published: 2022-08-29 17:08:07

Hi, playing cards can be found almost everywhere. They are one of the most commonly used playing tools. They are used for everything from your grandmother's cribbage party to college drinking games. Then there is their significant gambling presence [https://www.baycitizen.org/top-5-mobile-casino-apps-everybody-should-try/](https://www.baycitizen.org/top-5-mobile-casino-apps-everybody-should-try/) , if you are really that interested in the history of cards, I suggest you refer to this article.