teleren/devto huggingface dataset:
How to complete the Hacktoberfest challenge ?
Tags: hacktoberfest, github, opensource
Published: 2021-10-02 19:05:08

## Signing up to the Hacktoberfest challenge :

- Go to the [Hacktoberfest website](https://hacktoberfest.digitalocean.com/)
- Click on Start Hacking
![Sign up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gcb9588l65rlcs4r4fd.PNG)
- Sign up with GitHub or GitLab
- Now,
 
     - if you maintain an open-source project (you own it), click on **maintainer**
     - if you want to contribute to open-source projects, click on **contributor**

<br/>

- You are going to be redirected to your profile page where you can see :
     - First :
![profile page : goal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpxuxb78cue1nwt3n4mg.PNG)
Your goal is to make 4 PRs, so you can see 4 svg there.

     - Then : 
![stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzy1at3v73qwlo9z85kw.PNG)
You can see here the avatar, and your PRs stats.
*For me, i submitted one PR that's why you can see 1 PR in progress.*

     - Then, you can see your contributions :
![contributions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8avthoomwntkd4hzdo1y.PNG)
Here, once you submit a PR you can see it.

<br/>

**If** your PR is merged, you will see the "Matures in 14 days".

<br/>

**If** not, you will see the error message.

## Contributing : Tips

- You should contribute to a Hacktoberfest labelled repo, it means that you should see in the About Section of the GitHub Repo : The Hacktoberfest Label like in :
![Hacktoberfest Label](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0emvnzggzjwwgi4f6nhe.PNG)

- You search for a issue labelled hacktoberfest, you can find all the github issues for the hacktoberfest 2021 [here](https://goodfirstissues.com/) 

- Choose the issue you want to fix and ask to be assigned

- Fix the issue and create your PR

- Wait for merge and ask the maintainer to give your PR the hacktoberfest-accepted label

- Now, you can go back to your [hacktoberfest profile](https://hacktoberfest.digitalocean.com/profile), and you will see your first contribution !

- You can make more than 4 PRs, but the main goal is 4.

## What's next ?

Try to complete the challenge and wait for the third part, ask me questions i will cover in the next post 

### Until the release of the third post of this serie, you can follow me on [GitHub](https://github.com/MidouWebDev) or check my profile to discover some open source projects i contributed to

See you ! :wave:

Good Luck !
Getters and Setters
Tags: beginners, programming, codenewbie, braziliandevs
Published: 2021-10-02 18:56:22

Getters e Setters são alguns dos principais métodos especiais na programação orientada à objetos. Mas, o que são realmente eles? Usamos em diversas linguagens de programação como recurso nativo e às vezes não paramos para pensar sobre seu verdadeiro propósito e comodidade. Assim, logo abaixo elencarei algumas das principais características desses métodos tão chamados! 

| Métodos         | Definição     |  
|--------------|-----------| 
| Getters | Os métodos especiais surgiram de maneira geral com o intuito de padronizar a segurança dos atributos da classe. Sendo assim, o método *get* cumpre com o comportamento de método acessor, ou seja, conseguem acessar um determinado atributo através de um método - O método *getter* - Mantendo a segurança de acesso ao atributo e evitando o acesso direto.     | 
| Setters     | De outro modo, os métodos modificadores, os *setters*, modificam a propriedade da classe através de um método - O método *setter* - Garantindo assim, a segurança do atributo e reduzindo a possibilidade de acesso direto a propriedade. Assim, apenas permitindo a modificação do atributo através do método. |
DigitalOcean Managed Kubernetes Service
Tags: microservices, devops, tutorial, linux
Published: 2021-10-02 18:28:07

### Setting Up Kubernetes using Digital Ocean K8s Managed Service

![Stepstostart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21aqdtayncaeer8p9dx8.gif)

You can use my referral you will get $100 free usage for 3 months.
By clicking below.

[![DigitalOcean Referral Badge](https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%201.svg)](https://www.digitalocean.com/?refcode=625e4379d2d4&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)

### Downloading the Config file and Setting up

![Download Config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szeh846h6o9yo5x35y75.gif)

And when we open the config file we will see these details.

![Config File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9nt58ixwie29b9x39z3.png)
 

### Setting up CLI kubectl

Kubectl need to connect to the k8s master, we nees:
1. DNS/IP of the cluster
2. Authentication Credentials

which will found in ***kubeconfig***.

I'm setting up in windows. So, will be using below reference.

https://kubernetes.io/docs/tasks/tools/install-kubectl-windows/

Download this Kubectl binary

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

Next Step, Move that Binary to ***C:\Binaries***. If Binaries folder is not there, create one.

![move](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9d9jtcu7yhqze3k3b2e6.png)

Create a Environment Variable to call this Binary.

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

### Setting up config to connect with Kubernetes master

Move the kubeconfig file to ***C:\Users\ <Your System Name>\.kube*** and name it as ***config*** ( _removing .yml extension_)

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


To Verify, run ***kubectl*** , it will work from any path.

![verifykubectl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/763ol48txw36cusvoc3f.png)


For, linux and MacOS installation refer below link.
https://kubernetes.io/docs/tasks/tools/


References:
[Official Documentation](https://kubernetes.io/docs/home/)
[Udemy Course](https://www.udemy.com/course/certified-kubernetes-administrator/)

Credit:
[Zeal Vora](https://in.linkedin.com/in/zealvora)
🪟 Windows 11 inspired portfolio 🪟
Tags: javascript, react, nextjs, webdev
Published: 2021-10-02 18:19:47

👋Hi there and Happy Hacktoberfest 2021 fellow developers! 🎊 
I hope you're doing fantastic!

In the past, I was powerfully impressed by a portfolio that was built like a simple OS. So, this basically has always been my small dream to build a portfolio-app that visually mimics an operating system.

Recently, I had some free time and I finally decided to turn this plan into reality. So, I started working on 🪟 Windows-11 inspired portfolio ✨.

You can try it out here: https://www.vovacodes.ca/
GitHub: https://github.com/vovaushenko/vovacodes

This is a Next.js app built from scratch, that has a small backend powered by MongoDB. It is fully written in TypeScript, so if you're learning it, you could explore the GitHub repo 💥

In a nutshell the stack is - 
⭐ Next.js, 
⭐ React, 
⭐ Styled-Components, 
⭐ Redux 
⭐ Mongo DB.

The app has a design and component system powered by 
💜 Storybook 💜 

This is not only an *OS-looking app* but also *beautiful slides* about me, which can be found by navigating and using the OS.

The App has a ton of cool features (for instance you can leave me a comment and later it will be displayed with a nice random avatar in a flying carousel). **So, leave a comment!😉** I would be happy to hear from You! 🙌

Essentially, it has a lot of nifty features, so consider exploring it and let me know what is your favorite one!✨ 

❗ *Notice, on mobile only portfolio part will be shown*


**PS. I Use Arch BTW**

Happy Hacktoberfest 2021 Again! Wish you all the best! 

Cheers! 🤙

**At a glance** :

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

![Portfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4y6o28hryik4xictggy5.png)

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

![Portfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4v8an8xlvnve68h16ass.png)

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

Keep in mind, this is a work in progress! More features to come (and bugs tackled 😄)
React useScrollTo hook
Tags: react, javascript, beginners, typescript
Published: 2021-10-02 18:06:44

Ever since the introduction of hooks in React 16.8, they have become an integral part of every React devs arsenal.
Hooks solve a wide variety of seemingly unconnected problems in React that one may encounter over years of writing and maintaining tens of thousands of components.

Recently while I was working on one of my projects, I encountered a relatively common problem. I wanted to scroll to a component when its loaded on screen or on some other event. If you have worked with pure js, then there is a very simple solution using `scrollIntoView` function.
```
const elmnt = document.getElementById("content");
elmnt.scrollIntoView();
```
Run the above code on that particular event and it works like a charm.

Now when I searched for a solution in React, I came across this library [react-scroll](https://www.npmjs.com/package/react-scroll). Its a react library for animating vertical scrolling that provides functionality to scroll to a component on an event. Its good but I didn't want to add another dependency and change the default scrolling I have been using in my app.

So here is a custom hook I came up with that scrolls to an element on an event like load or click.
```
const useScrollTo = <T extends Element>() => {
  const ref = useRef<T>(null);
  const [shouldScrollTo, setShouldScrollTo] = useState(false);

  useEffect(() => {
    if (ref.current && shouldScrollTo) {
      ref.current.scrollIntoView({ behavior: 'smooth' });
      setShouldScrollTo(false);
    }
  }, [shouldScrollTo]);

  return [ref, setShouldScrollTo];
};

// Scroll to the element on component load
const Example1: FunctionComponent = () => {
  const [scrollToRef, setShouldScrollTo] = useScrollTo();
  
  useEffect(()=> {
    setShouldScrollTo(true)
  }, [setShouldScrollTo]);
  
  return (
    <HTMLElementToScrollTo ref={scrollToRef}/>
    {/* Some Other Components */}
  )
}

// Scroll to the element on click 
const Example2: FunctionComponent = () => {
  const [scrollToRef, setShouldScrollTo] = useScrollTo();

  return (
    <HTMLElementToScrollTo ref={scrollToRef}/>
    {/* Some Other Components */}
    <HTMLElementToClick onClick={() => setShouldScrollTo(true)} />
  )
}
```
You can checkout this [demo](https://stackblitz.com/edit/react-ts-hd4nsl?file=hooks/useScrollTo.ts) that uses this hook to scroll to the first and last image on a button click.
<img width="100%" style="width:100%" src="https://media.giphy.com/media/hf9lDJfHkWIEQAm7Ek/giphy.gif">

{% github dagasatvik10/react-useScrollTo-demo no-readme %}
Logger decorator
Tags: logger, methods, typescript, decorators
Published: 2021-10-02 17:47:30

---
title: Logger decorator
published: true
date: 2021-10-02 17:36:57 UTC
tags: logger,methods,typescript,decorators
canonical_url: https://medium.com/@redin.gaetan/logger-decorator-1368975690ca
---

#### Typescript method decorator

Hey, often we make console.log(...) to see the value of a parameter or a result method.

Here I present you a decorator which allow to do it easily. It’s purpose is for debugging when you are developing something.

{% gist https://gist.github.com/GaetanRdn/05919b29632fd7405d9f046c7f71db19 %}

Now that’s how to use it:

```
class Toto {
  @Log()
  public myMethod(...args: unknown[]): boolean { ... }

  @Log({ outputs: false })
  public myMethod2(...args: unknown[]): void { ... }

  @Log({ inputs: false })
  public myMethod3(...args: unknown[]): unknown { ... }

  @Log({ type: 'trace' })
  public myMethod4(...args: unknown[]): unknown { ... }

  @Log({ type: 'trace', inputs: false, outputs: false })
  public myMethod5(...args: unknown[]): unknown { ... }

}
```

Hope this could help or inspire someone.

Thanks for reading, feel free to comment.

### Learn More

- [TypeScript Function Overloads](https://dev.to/gaetanrdn/typescript-function-overloads-1eeo)
- [My Favorite Git Commands](https://dev.to/gaetanrdn/my-favorite-git-commands-pgj)
- [How to Handle Required Inputs in Angular](https://dev.to/gaetanrdn/how-to-handle-required-inputs-in-angular-1ajg)
- [Angular for everyone: All about it](https://medium.com/@redin.gaetan/angular-for-every-one-table-of-contents-d24232940dd4)
Flutter Widgets Stateless – Stateful Widget Difference
Tags: flutter, dart, tutorial
Published: 2021-10-02 17:00:01

We will discuss the concept of widget, which is one of the structures we hear the most in Flutter. At the same time, we will talk about Stateless and Stateful widgets that change shape according to our page structure.

### What is widget?

Almost everything in Flutter is widget, and the concept we call widgets are components that are given to us ready-made. Many structures, like each interface element, are considered as widgets. You can review the <em><strong><a href="https://flutter.dev/docs/development/ui/widgets" rel="nofollow" target="_blank">widget catalog</a></strong></em> to look at Flutter's widget features and examples. Using these widgets, we can develop our application easily and quickly. It is appropriate, we use widgets within the widget. For this, it is important to understand the widget structure. We should know that each structure is actually a widget and the features of these widgets.

Speaking of nested widgets, we can give an example. While some widgets accept only one widget; some widgets can accept multiple widgets inside. We can think of it this way. In Flutter, there is a widget called Column, which we will cover in detail as page structures in the following lessons, it can take multiple widgets. Because we can think of the Column widget as a list that is aligned one after the other. Thus, we can easily understand that it can actually take more than one element. However, we think of the Container widget as a box, and we can add only one element to it.

<img alt="Basic widget structures for Flutter" src="https://baransel.dev/post/flutter-widgets-stateless-and-stateful/basic-widget-structure.png" style="height:75%;width:75%;"/>

Let's also talk about *MaterialApp* and *Scaffold* and *AppBar* widgets, which are the most used widgets.

The **MaterialApp** widget is one of the richest widgets. After we create our project in our Main class, we usually give a material app inside the run app method. In order to use other widgets, we especially need the MaterialApp widget for routing. When we build our application, we can consider this widget as its outermost part.

Then **Scaffold** widget means screen. We create our screen with Scaffold. If we don't create the scaffold, if we add it in, we will see a black screen. After creating a white screen with Scaffold, it is entirely up to us to shape it.

The **AppBar** widget is a structure that we created at the top of the screen that we created with Scaffold. Here we can write the name of the application, change the color of the area like this top line.

### What is a state?
Continue this post on my blog! [Flutter Widgets Stateless – Stateful Widget Difference](https://baransel.dev/post/flutter-widgets-stateless-and-stateful/).
Funções em Rust.
Tags: react, functional, tutorial, developer
Published: 2021-10-02 16:50:21

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09qnajvkp5g5kx6cf4rg.png)

No Rust existe uma das funções mais importantes que já conhecemos que é *main*. O *main* é responsável por ser o ponto partida, onde inicia o software.

As funções são escrita no Rust com base em conversão chamada snake case isso vale para as variáveis também.

*O caso de cobra (ou snake_case ) é a prática de escrever palavras ou frases compostas nas quais os elementos são separados por um caractere sublinhado (_) e sem espaços, com a letra inicial de cada elemento em minúscula no composto e a primeira letra superior ou minúsculas — como em “foo_bar” e “Hello_world”.*

Vamos para o exemplo abaixo para que possamos entender a nomenclatura.

```rust
fn main() {
    let x = 10;
    print_number(x);
}

fn print_number(x: i32) {
    println!("o valor de entrada é: {}", x)
}

/*
    o valor de entrada é: 10
*/
```

No exemplo temos uma função chamada *print_number* que a entrada tem um tipo inteiro e o objetivo é imprimir o valor que entrou.

Em cada assinatura de função você terá que declarar o tipo de valor que será de entrada, caso precise declarar uma função com varias entradas basta separar por virgula.

Segue o exemplo abaixo.

```rust

fn main() {
    let x = 10;
    let y = 20;
    print_number(x, y);
}

fn print_number(x: i32, y: i32) {
    println!("o valor de x: {} e y: {}", x, y)
}

/*
    o valor de x: 10 e y: 20
*/
```

### Declarações e Expressões

*Declarações* são instruções de código que não retornam resultado e nas expressões o resultado vem.

Se criar uma variável chamada de *numero* com o valor de entrada seis, estamos realizando uma declaração pois não há retorno.


```rust

fn main () {
 let numero = 6;
}

```

No caso de declarar uma variável que retorna algo deixa de ser declaração e se torna expressão.

Segue abaixo o exemplo.

```rust

fn main() {
    let numero_1 = 6;
    let resposta = {
        let numero_2 = 30;
        numero_2 + numero_1
    };

    println!("resposta: {}", resposta)
}

/*
    resposta: 36
*/

```

Nesse caso o resultado retornou 36 por que usamos um bloco que contém um novo escopo por meio *{}*, isso torna uma expressão.

### Funções com retorno

As funções podem retornar ou não valores para aqueles que solicitam, no Rust para que essa funções nos retornem algo usamos uma seta ->, na maioria das funções podemos usar a palavra-chave chamada *return* especificando um retorno mas nessa linguagem o retorno já está implícito na ultima expressão.

Segue abaixo o exemplo.

```rust

fn soma(x: i32, y: i32) -> i32 {
    x + y   
}

fn main() {
    let result = soma(10, 20);
    println!("resultado: {}", result)
}

/*
    resposta: 30
*/

```


Então galera é isso, espero que tenham gostado até a próxima.
I made a tool in Rust to play mechanical keyboard sounds on every key press
Tags: rust, opensource, keyboard, cli
Published: 2021-10-02 16:39:26

### Rustyvibes

A Rust CLI that makes mechanical keyboard sound effects on every key press. It was a collaborative effort that took months to make, is now finally releasing.


#### macOS:

```
brew install kb24x7/rustyvibes/rustyvibes
```

#### Windows / Linux:

```
cargo install rustyvibes
```

#### Usage

```
rustyvibes <soundpack_path>
```

![Screen Shot 2021-09-29 at 7.23.10 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ev05z1ps2ojcdyd4kahh.png)
 

### Download Soundpacks: [Here](https://drive.google.com/file/d/1LQEQ9aOVQAs_wgVecXkjaA9K4LXnCdp_/view?usp=sharing)

---

### Mechvibes vs. Rustyvibes

How does Rustyvibes compare to its competitors like Mechvibes? Mechvibes uses Electron and Chromium which is very resource intensive. Rustyvibes on the other hand is made with Rust and can be upto 10x-100x more resource efficient.

Mechvibes Soundpacks: [Here](https://docs.google.com/spreadsheets/d/1PimUN_Qn3CWqfn-93YdVW8OWy8nzpz3w3me41S8S494/edit#gid=0)


---


### Privacy

Rustyvibes is a fully [open-sourced](https://github.com/kb24x7/rustyvibes) project and never uses any network activity at all.


If you like what I'm doing, you can join my Discord server [here](https://dsc.gg/devhq)
Solved 3 Questions in LeetCode Biweekly Contest
Tags: programming
Published: 2021-10-02 16:37:32

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3f1p13qn803nw3252s2.png)

Though it's a small achievement, I wanted to share here.
Also, I need to improve upon the time that I take to solve them. I took nearly 1hr 10 minutes to solve these three (was unnecessarily stuck in the third question) but I believe it can be solved much faster.

Next Target: Improving my speed, being consistent in solving 3 questions.

P.S. Completed 200 questions on LeetCode.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9f2rupxgjp3z7724hbze.png)
Adding to localStorage
Tags: javascript, beginners
Published: 2021-10-02 16:19:57

This function will increase local storage location by one. 
x = localstorage location. 


    function localstorage(x){    
         var y = localStorage[x];
         var t = parseInt(y, 10);
        t = (t += 1);
        y = t.toString();
         localStorage.setItem(x, y);
     }
Belajar Linux OS? #End - Kenapa sih pake Linux?
Tags: indonesia, linux, beginners
Published: 2021-10-02 16:07:46

Buat kalian yang pengen berkarir di IT, baik di Tim Developer, Operations maupun Security, menguasai Linux bisa menjadi nilai plus buat kalian apalagi tim Operations dan Security yang sehari-hari tidak bisa lepas dari server.

Karena menurut [data statistik](https://hostingtribunal.com/blog/linux-statistics/#gref), 1 juta website terpopuler pake Linux buat OS Server-nya.

Lalu, kita ngga bisa denial kalo OS pilihan dari kebanyakan hacker itu ya Linux..

Ini karena hacker-hacker tuh suka otak-atik semaunya sendiri dan karena Linux itu open-source, Linux bisa di-_customize_ buat nyesuaiin kebutuhan mereka.

Dan juga, _unethical_ dan _bad hackers_ biasanya pake tools yang mereka bikin sendiri atau yang sudah tersedia di Linux untuk nge-hack ke dalam jaringan dan aplikasi yang lemah dan rentan keamanannya.

Banyak Distro Linux yang sudah terinstall tools buat hacking yang siap pake.

Tapi jika tools tersebut belum ada, maka tinggal diinstall dong wkwk.

Diantara Distro Linux buat hacking yang umum dipake adalah:
* Kali Linux, yang berbasis dari varian Debian.
* BackBox, yang berbasis dari varian Ubuntu.
* Parrot Security OS, yang berbasis dari varian Debian.
* CAINE, yang berarti Computer Aided INvestigative Environment yang biasanya dipake buat Digital Forensic dan
* Samurai Web Testing Framework untuk pentest (penetration testing) aplikasi web (web application).

Jadi jika kalian mau berkarir di Tim Operations (seperti DevOps dan SRE) maupun belajar hacking sebagai hobi, atau untuk menjadi _ethical hacker_, kalian wajib belajar dan jago di Linux xD.
Belajar Linux OS - #8 Distro
Tags: indonesia, linux, beginners
Published: 2021-10-02 15:48:57

Seperti pada Desktop Environment dan Aplikasi-aplikasi yang dapat diotak-atik, Linux OS-nya sendiri pun ternyata bisa kita otak-atik sesuai selera kita masing-masing.

Nah hasil otak-atikan kita tadi ituloh yang disebut dengan Linux Distributions atau Distro.
Belajar Linux OS - #7 Command Line (atau) Shell
Tags: indonesia, linux, beginners
Published: 2021-10-02 15:45:57

Linux Command Line atau Shell adalah process dari OS yang memungkinkan kita untuk mengatur komputer dengan menggunakan perintah-perintah sebagai text interface.

Pada Desktop Environment modern, tidak terlalu penting juga menggunakan Shell.

Tapi kebanyakan tool-tool buat hacking itu berbasis CLI dan jika kita mau belajar hacking, hukumnya fardhu 'ain (sangat wajib) buat terbiasa di _"dunia hitam"_ eh Shell terminal maksudnya dan juga wajib tahu di luar-kepala tentang perintah dasar dan perintah advance dari Linux.

Coba ketik perintah `date`
```
$ date
Sat  2 Oct 15:41:49 UTC 2021
```
Maka akan muncul jam dan tanggal seperti contoh di atas.
Yang barusan kita lakukan itu juga termasuk berinteraksi dengan shell lohh seperti yang kita lakukan juga disepanjang series ini.

Pada series Belajar Linux Commands kita akan belajar tentang macam-macam perintah Linux yang wajib kita tahu jika kita ingin menjadi hacker xD.

Seperti Desktop Environment dan Aplikasinya, Linux OS juga bisa diotak-atik sesuai selera kita masing-masing.

Nah hasil otak-atikan kita itu tadi yang disebut sebagai Linux Distributions atau Distro.