teleren/devto huggingface dataset:
Stereotype no CDI
Tags: java, javae, jarkataee, cdi
Published: 2022-08-28 12:23:53

### CONHECENDO

Hoje vou escrever um pouco sobre Stereotype, uma funcionalidade bem simples de usar e entender.

No nosso dia-a-dia as vezes criamos várias anotações para várias situações diferentes como por exemplo um interceptor que audita todas as chamadas de métodos para saber se usuário pode ou não usar aquela ação ou simplesmente logar alguma informações sobre o método em execução, logo colocaríamos todas as anotações como no exemplo abaixo:

```java
@Named @Audit @Log
public class CheckoutBean{

  public void anyAction(){

    ...

  }

}
```

Imagine que todos os desenvolvedores devem sempre seguir esse padrão, mas dessa forma corremos um grade risco de em um determinado momento alguém esquecer de usar alguma anotação.

Para ajudar nesse problema podemos criar uma nova anotação da seguinte forma:

```java
@Stereotype
@Audit
@Named
@Retention(RetentionPolicy.RUNTIME)
@Target(ElementType.TYPE)
public @interface BeanDefault { }
```

vamos ver como ficaria a classe agora:

```java

@BeanDefault
public class CheckoutBean{
   public void anyAction(){
      ...
   }
}
```

Essa e uma definição mínima de Stereotype,ainda podemos usar vários outros targets como :

- Method
- Field

Agora temos uma única anotação que uni tudo o que será padrão para todos os beans, quando precisarmos evoluir basta irmos em um único lugar.

### CONCLUSÃO

Então isso e um pouco sobre a criação de stereotype do CDI.

Por enquanto e só, até a próxima.
5 daily NPM packages are used in every React project
Tags: programming, webdev, tutorial, javascript
Published: 2022-08-28 12:19:32

## 01
**Lodash**
I have already covered a one-minute short video for this, lodash makes writing logic in javascript a cakewalk.

[NPM package link](https://youtube.com/shorts/Noz55W2lpiM)

---

## 02
**React Toastify**\

[NPM package link](https://www.npmjs.com/package/react-toastify)

---

## 03
**React Icons**
I have covered a short description for react icons.

[Only library you need for icons](https://youtu.be/PXb99yVy0-s)

[Short link](https://www.youtube.com/shorts/QW9514m5dlI)

---
## 04
**React Query**
This might amuse you but yes to cache, and fetch the data in the frontend, I used react query a lot to make things fast.

---
## 05
**Tailwind CSS**
It doesn’t matter what framework I will work on, I will always go with a tailwind to write CSS.

[Introduction to tailwind css](https://youtu.be/Tmm75GmyRvw)

**Conclusion**
That’s for today, until next time, have a good day, people.

Keep developing
Shrey
[iHateReading](www.ihatereading.in)
How to update Certbot on Debian 11
Tags: debian, certbot, productivity, ssl
Published: 2022-08-28 12:11:00

# Description of the problem

In Debian 11 your CertBot version is: https://packages.debian.org/bullseye/certbot
(on 28th August 2022 = 1.12.0)

Last release: https://github.com/certbot/certbot/releases
(on 28th August 2022 = 1.29.0)

In Debian 11 CertBot is outdated. First step: if installed, remove it:

```sh
sudo apt remove certbot -y
```

# Installation of CertBot

1. Install Snapd manager: `sudo apt install snapd -y`
2. Install Snap core & refresh: `sudo snap install core; sudo snap refresh core`
3. Install CertBot: `sudo snap install --classic certbot`
4. Setup link in your Debian: `sudo ln -s /snap/bin/certbot /usr/bin/certbot`

# Check version CertBot installed

1.- View version: `sudo certbot --version`
Output: `certbot 1.29.0`

# Using manually

In next command replace: **yourmail@example.com** for your **email**. And **\*.example.com** for your **domain**

```sh
sudo certbot certonly --manual --preferred-challenges=dns --email yourmail@example.com --agree-tos -d *.example.com
```

Finally follow CertBot steps in your command line.
How to get hired as a front-end developer - Part 1
Tags: webdev, javascript, beginners, career
Published: 2022-08-28 12:00:13

If you want to get a job at a MANGA company without any degree or not much academic background you'll have to put in the work for a couple of months grinding your ass off and learning all the required skills to even get passed the initial screening.

Or, you could learn the bare minimum, build projects, get a job at a small company and then work your way towards your dream job. The choice is yours.

## Required technical skills
HTML, CSS, and JavaScript are the building blocks for learning front-end web development. These three are the most important things in front-end development and you don't need to completely master all of them, knowing enough HTML to make a solid structure, enough CSS to nicely style your sites, and enough JavaScript to add interactivity to your projects will be enough to land you an internship.

Out of all the three JavaScript is the most important and you should spend the most amount of time learning it. There are some core concepts in JavaScript such as scopes, closures, and the DOM which are one of the most important things that you must know when applying for a job.

## Pick your framework
After learning the three core concepts you need to learn a few more things like a JavaScript and CSS framework which makes your job a whole lot easier.

- A JavaScript framework combines little things like page routing, styling, and state management into a single boilerplate type project for you to use. 
- A CSS framework provides you with pre-built styles, components, and classes that you can just copy-paste and modify to your liking.

Although frameworks provide a lot of functionality, there are too many of them. (especially JavaScript ones.) Pick only one that you like the most, the most popular, or the one required in most job postings in your area.

Other things like version control, pre-processors, search engine optimization, and accessibility are also good to know and are easy to learn.

If you deep dive into front-end web development you'll learn about design systems, serverless computing, UI/UX design, and progressive web applications. These skills are the ones that will make you stand out from the rest.

If you've read this far thank you! I'm a new writer and your support will be highly appreciated. I'll talk about how to build your online portfolio and resume in the next part.

If you like you can follow me on Twitter @SyedUmairCodes
Why and what to plan for building apps.
Tags: planning, webdev, firebase, webperf
Published: 2022-08-28 10:31:10

**why you need to do planning up everything?**
Simple, the answer is to be 

1. More organised, explanatory
2. Collaboration with others become easier.
3. Helps you to remember single step of your thinking process.

This are the points, i think that are important and sure there are many more to learn on your way.

**What need to be planned?**
_you can't sit with team of engineers and say ok we know this tech let's make something out of it. Instead you start solving things as a user or customer._ **_-inspired by Steve jobs speech._**

So you need to plan data structure, back end logic, network (routing) and front end.

Figma (figjam) is the only tool u need to start planning.
Easy to share and view across all devices.

Thanks for reading this blog, and support.
Like, share and follow me for more such content.
😊
Handling an action in redux store (Freecodecamp notes)
Published: 2022-08-28 11:11:00

Notes in QnA format

**1. How do we usually handle an action in redux?**
We do it by using a function called the Reducer function
**2. What does a reducer do?**
It takes state, and action as arguments, and it always returns a new state.  Reducer doesnt create any side effects, it is simply a pure function that takes state and action , then returns a new state
**3.What are some important things to note about reducer?**
A key principle in in Redux is that state is read-only, the reducer function must always return a new copy of state and never modify state directly. Redux does not enforce state immutability,  however you are responsible for enforcing it in the code of your reducer functions. 

**4. Below is an example with an example of a reducer function, fill in the body of the reducer function , so that it receives an action of type 'LOGIN' then returns a state object with login set to true, Otherwise it returns current state.?**
```javascript
const defaultState = {
  login: false
};
const reducer = (state = defaultState, action) => {
  // Change code below this line

  // Change code above this line
};
const store = Redux.createStore(reducer);
const loginAction = () => {
  return {
    type: 'LOGIN'

  }
};
```
Answer
```javascript
const defaultState = {
  login: false
};

const reducer = (state = defaultState, action) => {
  // Change code below this line
   if(action.type=='LOGIN')
   {
     return {
      login:true
     };
   }
   else{
     return state;
   }
  // Change code above this line
};

const store = Redux.createStore(reducer);

const loginAction = () => {
  return {
    type: 'LOGIN'
  }
};

```
**Knowledge Check**
 

1. How do we usually handle an action in redux?
2. What does a reducer do?
3.What are some important things to note about reducer?
4. Below is an example with an example of a reducer function, fill in the body of the reducer function , so that it receives an action of type 'LOGIN' then returns a state object with login set to true, Otherwise it returns current state.?
```javascript
const defaultState = {
  login: false
};
const reducer = (state = defaultState, action) => {
  // Change code below this line

  // Change code above this line
};
const store = Redux.createStore(reducer);
const loginAction = () => {
  return {
    type: 'LOGIN'

  }
};
```
How do I convert a string to lowercase in Python?
Tags: python, beginners, programming
Published: 2022-08-28 11:02:21

### str.lower()

Python's standard method for converting a string to lowercase is `str.lower()` and is compatible with both Python 2 and Python 3. While this is the standard way for most cases, there are certain cases where this method might not be the most appropriate, especially if you are working with Unicode strings.

```py
'Hello'.lower()               # 'hello'
'Straße'.lower()              # 'straße'
'Straße'.upper().lower()      # 'strasse'
# Example of incorrect result when used for unicode case-insensitive matching
'Straße'.upper().lower() == 'Straße'.lower() # False ('strasse' != 'straße')
```

### str.casefold()

Python 3 introduced `str.casefold()`, which is very similar to `str.lower()`, but more aggressive as it is intended to remove all case distinctions in Unicode strings. It implements the casefolding algorithm as described in [section 3.13 of the Unicode Standard](https://www.unicode.org/versions/Unicode9.0.0/ch03.pdf).

```py
'Hello'.casefold()            # 'hello'
'Straße'.casefold()           # 'strasse'
'Straße'.upper().casefold()   # 'strasse'
# Returns the correct result when used for unicode case-insensitive matching
'Straße'.upper().casefold() == 'Straße'.casefold() # True
```

---

_Do you like short, high-quality code snippets and articles? So do we! Visit [30 seconds of code](https://www.30secondsofcode.org/) for more articles like this one or follow us on [Twitter](https://twitter.com/30secondsofcode) for daily JavaScript, React and Python snippets!_ 👨‍💻
Most used DevTools shortcuts
Tags: javascript, webdev, devtools, frontend
Published: 2022-08-28 10:43:00

Using shortcuts makes you faster and a productive developer

Here are some shortcuts I found them useful.

### 1. `Command+Option+I`
it opens the last opened panel

### 2. `h`
it hides the currently-selected element

### 3. `Command+EE`
it clears the network logs 

### 4. `ESC`
It pulls up the console on any tab



## Some Shortcuts in Console 

### 2. `$`
it equals to 
```
document.querySelector
```

### 3. `$$`
it equals to 
```
document.querySelectorAll
```

### 4. `$x`
it equals to 
```
document.querySelector with xPath
```

### 5.`$0, $1, ...`
`$0` It exactly returns the element in the elements' inspector that you selected. (current element)

`$1` it returns the previous element 
`$2` it returns the two previous element

### 6. `Command + K`
it equals to 
```
clear()
```




Here also a video playlist of devtools tips will be updated gradually:

{% embed https://youtube.com/playlist?list=PLfBo6N311DyTaEK-dmI1QaiglJl09i-F_ %}

let me know which else do you use regularly, share them in the comments

Best
Cara Install VueJS 3
Tags: vue, javascript
Published: 2022-08-28 10:40:00

VueJS merupakan sebuah framework javascript untuk membangun web user interfaces.

**Hal yang dibutuhkan sebelum install VUEJS**
- NodeJS
- NPM

1.Pertama Buka Terminal atau CMD lalu ketikan perintah install vuejs menggunakan npm sebagai berikut

```
npm init vue@latest 
```

2.Beri nama project dan pilih **no** atau **yes** sesuai kebutuhan yang kalian inginkan, disini saya memberi nama project **vue3** dan **no** pada setiap step.

![Install VueJS 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzh58sqd0w58oqtx0j6j.png)

3.Masuk ke folder project kita dengan perintah

```
cd vue3
```

4.Ketikan perintah berikut untuk menginstall package / library yang dibutuhkan

```
npm install
```
![Install Package VueJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4x8a0h7exmqwjipbbqs1.png)
 
5.Setelah semua package terinstall, lalu jalankan aplikasi dengan perintah

```
npm run dev
```
![Menjalankan Aplikasi VueJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yp3h975xpwqaja72sbb.png)

Aplikasi bisa diakses di browser di http://localhost:5173/
![Buka VueJS di Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fp7xo666q9a499757bxu.png)
Responsive ToDo App Using Redis As Main Database
Tags: redishackathon, javascript, beginners, tutorial
Published: 2022-08-28 10:26:10

### Overview of My Submission
Here, we are going to make a simple todo-app showing how we can use redis as main db.

* For starters in backend server we will be using **`express`**, **`cors`**,**`redis-om`**. Where:

>**`express`**: Provides basic server for connecting db and frontend.

> **`cors`**: Provides connection btw backend and frontend.

> **`redis-om`**: It is new library by redis which provides all basic neccessities required in a databse and can be managed and created using redis-cloud.

####### Note: See repo on how to setup the basic db and api's.[Link To Backend](https://github.com/201B153/ToDo-Using-Redis/blob/master/todo-backend/src/index.js)

* Now lets setup the database:

1. Here, we will be using redis cloud db which comes in both free and paid db @[Redis-Cloud](https://redis.com/try-free/?_ga=2.112859588.1175317799.1661010142-187499918.1660282909).
2. For creating a db in redis cloud you just need to signup on #link and create a subscription.
3. On creating a subscription redis will provide a db with particular `endpoint` and `defaultuser&password`.
4. We just need endpoint and password for accessing the db.
5. Then we will create the schema on which the db will work.

####### Note: See repo on how to setup Schema. [Link To Schema](https://github.com/201B153/ToDo-Using-Redis/tree/master/todo-backend/src/schema) 

* Later, for frontend we will be using react as framework and bootstrap 5 as styling.

####### Note: See repo on how to setup Frontend. [Link To frontend](https://github.com/201B153/ToDo-Using-Redis/blob/master/todo-frontend/src/App.js)

* The whole process works as:

1. Firstly, on initiating the backend we create a server on port `8000` which provides access to db and initiates api's.
2. On otherhand, the frontend which is initiated on port `3000` can call api's to access the db and edit or update it.
3. On for checking db we can use RedisInsight which is free to download provided by redis.

####### Note: RedisInsight keeps db record on local machine. It helps in easy access to db and also it makes db easy to read and modify.[Link To redisinsight](https://redis.com/redis-enterprise/redis-insight/#insight-form)


#### Submission Category: MERN Mavericks

#### Following languages are used in this project: `JS/Node.js/CSS`.


#### Here, you can find complete source code of the project:
[Link To Source Code](https://github.com/201B153/ToDo-Using-Redis)


#### The demo app can be seen on:
[Link To Demo](https://todo-redis.herokuapp.com/)
- - -
Beans !
Tags: python, programming
Published: 2022-08-28 10:16:00

Utilisation de pandas.groupby et de pandas.cut
Imaginons qu'on ait un Dataframe représentant une time serie qui représente l'élévation du niveau d'eau et la direction de la houle à chaque pas de temps.

```python
#+BEGIN_SRC
import pandas as pd
import numpy as np
import random as rdn

# build fake dataframe
df = pd.DataFrame()
df['dir'] = [rdn.randint(0, 360) for _ in range(100)]
df['elevation'] = [rdn.uniform(-3, 3) for _ in range(100)]
print("df:\n", df)
#+END_SRC

#+RESULTS:
df:
     dir  elevation
0    48   2.437835
1     4   1.489722
2   130  -0.576090
3   169   2.721867
4   315  -1.120620
..  ...        ...
95  247  -1.256091
96  301   2.014663
97  175   0.901548
98  289   2.903849
99   98  -0.712153

[100 rows x 2 columns]
```

Cela peut être fastidieux à lire. On peut vouloir lire les informations par secteur. On effectue alors un binning.

```python
#+BEGIN_SRC python
# create the bins
bins = pd.cut(df['dir'], np.arange(0, 390, 30))

df_grp = df.groupby(bins).describe()['elevation']
print("df_grp:\n", df_grp)
#+END_SRC

#+RESULTS:
df_grp:
             count      mean       std  ...       50%       75%       max
dir                                    ...                              
(0, 30]       5.0  0.249184  1.670480  ...  0.605261  1.489722  1.771682
(30, 60]      6.0  0.530561  2.120228  ...  1.271229  2.242043  2.437835
(60, 90]     14.0  0.280099  1.937723  ...  1.548581  1.775393  2.223731
(90, 120]     9.0 -0.894609  1.444726  ... -0.712153 -0.239352  1.684734
(120, 150]    5.0 -0.542193  0.655393  ... -0.576090 -0.259147  0.374463
(150, 180]   11.0 -0.000794  1.906180  ... -0.093552  1.132952  2.759483
(180, 210]    5.0 -0.104412  1.175992  ... -0.471943  1.037076  1.221931
(210, 240]   11.0  0.447931  1.605676  ...  0.832420  1.552965  2.335645
(240, 270]    4.0 -0.556329  1.708697  ... -1.300140 -0.443048  1.996078
(270, 300]   12.0 -0.406191  1.708407  ... -0.800965 -0.041385  2.903849
(300, 330]   11.0  0.168334  1.585117  ...  0.135546  1.177059  2.553054
(330, 360]    7.0  0.411437  1.725589  ...  0.466246  1.667764  2.716199

[12 rows x 8 columns]

```

## Pour centrer autour de 0

```python
condition = (df["dir"] > 360 - bin_size/2) | (df["dir"] < bin_size/2)
df1 = df[condition]
df2 = df[~condition]
```
What is Github Push
Published: 2022-08-28 10:05:00

## **1. Creating a new repository**
You need to create a new repository and click on the plus sign.
Fill up all the required details, i.e., repository name, description and also make the repository public this time as it is free.
(Yeni bir depo oluşturmanız ve artı işaretine tıklamanız gerekir.
Depo adı, açıklaması gibi gerekli tüm ayrıntıları doldurun ve bu sefer ücretsiz olduğu için depoyu herkese açık hale getirin.)

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

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

## **2. Open your Git Bash**
Git Bash can be downloaded in here, and it is a shell used to interface with the operating system which follows the UNIX command.
(Git Bash buradan indirilebilir(https://git-scm.com/downloads)ve UNIX komutunu izleyen işletim sistemiyle arayüz oluşturmak için kullanılan bir kabuktur.)
Buradan kendi pc'mize göre uyumlu olan git bash dosyasını indiriyoruz.

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

**3.Open vs code file**
We open it after source control in vs code.Then we initialize the repository from here.
(Source Kontrolden dosyayı açtıktan sonra c'de
yani depo başlatmadan depomuzu başlatıyoruz.) 

**4.We pull data from github using test remote**
(Test uzaktan kumandası kullanarak githuba verileri çekiyoruz)

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

**5.We link vs code to github**
(Vs code github'a bağlıyoruz)

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

**6.We paste our url into the field you see above in vs codev**
(url'mizi vs code'da üstteki gördüğünüz alana yapıştırıyoruz)

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

7.Githuba VsCode'yi bağlamış bulunduk.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i86c47eqogc9h1n6j7ix.png)
I made a maze which follows the principles of the 👑 N-Queen Problem.
Tags: problem, project, nqueen, maze
Published: 2022-08-28 10:03:23

---
title: I made a maze which follows the principles of the 👑 N-Queen Problem.
published: true
description: Interactive way to solve N Queen Solve.
tags: #problem #project #nqueen #maze #project
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

[try Maze!](https://nqueen.vercel.app/)
The maze is a simple chess board with *n number of rows and columns*.
The work is simple for n number of rows and columns you have to place n number of queens in such a way that none of the queens should intersect to its rows, columns, and even diagonals.
![Nqueens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kv5qgspz371u2fv3mvmg.png)

In Computer Science the main goal is solve this problem in minimum number of attempts.

There are several ways to solve this problem using methods like brute force, backtracking, dynamic programming etc.
Give it a try!
[n-queen](https://nqueen.vercel.app/)
Why You Should Keep A Dev Diary
Tags: beginners, programming, devjournal, productivity
Published: 2022-08-28 10:01:58

## Introduction

Hello! 😀
In this post I will explain my reasons why I keep a dev diary and why it will benefit you in your dev life. 

---

## Reasons to keep a dev diary

My personal reasons for keeping a dev diary are as follows:
* I use it to plan my TODOs for the day
* It allows me to memorise the increasing number of API keys etc
* Any errors I encounter I note them down as well as how I solved the issue
* By jotting down any errors, you can use the search feature to find the same error if you encounter it in the future. Sort of like a personal Stack Overflow.
* It allows me to note any ideas for future reference
* Allows me to keep track of time/progress and any unfinished tasks
* It notifies me the next day of what leftover tasks still need to be completed
* It gives future me a laugh, when I look back at the memo's I wrote a year ago 😅

---

## How I lay out my dev diary

I always start with the day's TODO/s, ordered from the most important to the least important.

Then I give each todo a separate heading, I then actually start working on the todo, noting anything important including any problems/errors etc I encounter. Any problems encountered I always right the solution and how I solved it as well as tagging the error for future reference. 

At the end I write what still needs to be done and what I need to do Tomorrow.

The software I use to do this used to be Evernote, but recently I've switched to a tool called "Joplin" which is free to use and open source. Notes can also be backed up to DropBox/Self Hosted Server.

https://joplinapp.org/

---

## Conclusion

Here I have shared my reasons why every dev should keep a dev diary. 
I've personally been keeping a diary for over 2 years now, yes it does take time to update it etc. But I feel for that time used my performance has sky rocketed. 😎

Please feel free to share if you keep a dev diary, if you do please give me your reasons for keeping one.

Happy Coding! 🤓