teleren/devto huggingface dataset:
Nuxt 3 and Pinia
Tags: pinia, nuxt, vue
Published: 2022-02-17 06:01:02


![Integrate Pinia as your state management library for your Nuxt 3 application.](https://codybontecou.com/images/nuxt3-and-pinia-meta.png)

# Nuxt 3 and Pinia

> Integrate Pinia as your state management library for your Nuxt 3 application.


## Vuex -> Pinia

Evan You, the creator of Vue himself, has stated "Pinia is de facto Vuex 5! At this point it’s really a naming/branding issue."

For the time being, it's probably best to be looking towards Pinia content rather than Vuex.

!["Pinia is de facto Vuex 5! At this point it’s really a naming/branding issue."](https://codybontecou.com/images/evan-pinia-tweet.png)

I recommend reading VueJS's official [post](https://vuejs.org/guide/scaling-up/state-management.html#pinia) regarding this to get a better understanding as to why Pinia > Vuex.

## Installing Pinia in Nuxt 3

Pinia nearly comes with first-class support for Nuxt 3. You'll need to install two packages:

```bash
yarn add pinia
yarn add @pinia/nuxt
```

## Add Pinia to your nuxt.config file

You'll need to add `'@pinia/nuxt'` to your buildModules array.

```js
// nuxt.config.js
import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  buildModules: ['@pinia/nuxt'],
})
```

## Build your Pinia store

Now build a named store. For my use-case, I needed to manage state regarding filters, so the skeleton of my store looks like:

```js
// store/filters.js
import { defineStore } from 'pinia'

export const useFiltersStore = defineStore({
  id: 'filter-store',
  state: () => {
    return {
      filtersList: ['youtube', 'twitch'],
    }
  },
  actions: {},
  getters: {
    filtersList: state => state.filtersList,
  },
})
```

This is just showing the general structure of your store. The key is to `defineStore` and make sure to include an `id`. In this case, I'm using `'filter-store'` as my id but it could be anything you prefer.

Read over Pinia's [Docs](https://pinia.vuejs.org/core-concepts/) to get a better grasp of how to use Pinia properly.

## Bring Pinia in Vue Component

With our store in place, simply import it into the component you want to use it in and have fun!

```js
<template>
  <div>
    {{ filtersList }}
  </div>
</template>

// components/FilterMenu.vue
<script>
import { useFiltersStore } from '~/store/filters'

export default defineComponent({
  setup() {
    const filtersStore = useFiltersStore()
    const filtersList = filtersStore.filtersList

    return { filtersList }
  },
})
</script>
```
ULN2003A vs ULN2803A？ Who is better?

Tags: beginners, electronics, product
Published: 2022-02-17 05:52:11

[ULN2803A](https://www.utmel.com/productdetail/stmicroelectronics-uln2803a-6266710) and [ULN2003A](https://www.utmel.com/productdetail/stmicroelectronics-uln2003a-6269665) are Darlington array ICs used to interface Logic circuits, such as microcontroller circuits, to high power devices. During the early days of your electronics tour, you may not understand the difference between these two ICs. This blog is to give you an idea about the major difference between these two ICs.

If you want to learn more, you can follow te below link to see the article about these product.
[ULN2003A](https://www.utmel.com/components/uln2003a-semiconductor-500ma-16-dip-pinout-datasheet-and-uln2003a-vs-uln2803a?id=1244) is a seven-channel Darlington array used to interface microcontrollers to high voltage, high current devices such as solenoids, lamps, relays, etc. It has the capacity to drive  500mA into a single channel, up to 250mA per channel if four of the seven channels are active and 125 mA per channel if all the seven channels are active. Its output has clamp diodes for transient suppression to protect the low-power microcontroller circuits.
The ULN2003 is the replacement for the ULN2803 when using the Prop-1 Trainer Board or when using P7 (Prop-1) or P15 (Prop-2 and Prop-SX) for serial communications with devices like the AP-8, DC-16, FC-4, and RC-4.

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

[ULN2803](https://www.utmel.com/components/uln2803a-array-8-npn-darlington-50v-18-dip-pinout-datasheet-and-uln2003a-vs-uln2803a?id=1245) is an eight-channel Darlington array used to interface microcontrollers to high voltage, high current devices such as solenoids, lamps, relays, etc. It has the capacity to drive  500mA into a single channel, up to 250mA per channel if four of the eight channels are active and 125 mA per channel if all the eight channels are active. Its output has clamp diodes for transient suppression to protect the low-power microcontroller circuits. ULN2803 is commonly used for controlling large seven-segment displays.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ij6mhkyay2o0zg16ey4.jpg)
LinkedIn Hashtag Analytics: Free feature updates
Tags: productivity, showdev, tooling
Published: 2022-02-17 04:04:06

I originally built [**this tool**](https://filtpod.com/resources/linkedin-hashtag-analytics-chrome-extension/) for my clients and my own personal use. Today it's **_free_** for everyone. 

The follower, like and comment count checks help determine the best hashtags for wider content distribution on LinkedIn.

There's also a **[complementary analytics dashboard](https://filtpod.com/resources/linkedin-hashtag-trend/)** that's updated weekly. With it, you can discover LinkedIn hashtags that are trending early in the game.

Both are featured on Product Hunt and I'd appreciate your support & feedback!
Need help please, I'm having trouble finding resources on the internet to set up this session connection system
Tags: javascript, react, webdev
Published: 2022-02-17 05:28:52

Hello, I am a beginner developer (Reactjs, mern...) But I remain open to learn other technologies.
I would like to develop a web application with two ways to access a user's session.
the first: the classic, the user enters his identifiers and he is recognized by the database and he can do all the manipulations he wants in his session.

And the second: without authentication, you access a user's session (from a link for example) but without having the rights to modify the elements that are displayed. We are just in “visitor” mode.


Can you guide me to sources that can help me achieve this?
Elixir logging to (multiple) file(s) using metadata_filter
Tags: elixir, metadata, logging, log
Published: 2022-02-17 05:20:08


This is a follow up post for [JSON Logging in Elixir using a custom formatter](https://dev.to/darnahsan/logging-json-messages-in-elixir-using-a-custom-formatter-25ld) where we looked in to how to log request logs to a file using a custom formatter. We require below hex dependencies in our project to log request logs and other app logs. 

```
{:plug_logger_json, "~> 0.7.0"},
{:logger_file_backend, "~> 0.0.12"}
```

Unlike non functional languages where you have log objects per log file and can use them to write to different log

```
require "logger"
request_logger = Logger.new('/src/obliviator/log/obliviator_request.log')
request_logger.debug("I'm a request debug log")

stream_logger = Logger.new('/src/obliviator/log/stream.log')
stream_logger.info("I'm a stream info log")

```

but in Elixir you only have a `Logger` object and need to differentiate based on metadata assigned to write to the associated log. `metadata_filter` can be assigned on multiple fields. We can separate logs by each application running on our VM or by key identifying our file.

```
# log by identifying application 
metadata_filter: [application: :plug_logger_json]
```

```
#log by tagging log by key value
metadata_filter: [log: :stream]
```

The full config would be as below

```
use Mix.Config

config :plug_logger_json,
  filtered_keys: ["password", "authorization"],
  suppressed_keys: ["api_version", "log_type"]

config :logger,
  backends: [
    {LoggerFileBackend, :request_log},
    {LoggerFileBackend, :message_log},
    {LoggerFileBackend, :debugging_log}
  ],
  utc_log: true,
  handle_otp_reports: true

# configuration for the {LoggerFileBackend, :request_log} backend
config :logger, :request_log,
  format: {Obliviator.Formatter.RequestLog, :format},
  metadata: :all,
  path: "/src/obliviator/log/obliviator_request.log",
  level: :info,
  metadata_filter: [application: :plug_logger_json]

config :logger, :message_log,
  format: {Obliviator.Formatter.MessageLog, :format},
  metadata: :all,
  path: "/src/obliviator/log/stream.log",
  level: :info,
  metadata_filter: [log: :stream]

config :logger, :debugging_log,
  format: {Obliviator.Formatter.MessageLog, :format},
  metadata: :all,
  path: "/src/obliviator/log/obliviator_debugging.log",
  level: :debug,
  metadata_filter: [log: :debugging]
```

Once the config is in place data can be logged as follows

```
# log to :stream
Logger.info("Stream msg", log: :stream)

#log to :debugging
Logger.debug("Debugging", log: :debugging)
```

Elixir logging might look limiting at the start but with a powerful custom formatter and metadata filtering ability its is sufficiently better than many ;)
Some Redux core concepts and their responsibilities
Tags: redux, react, javascript
Published: 2022-02-17 04:53:46



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

Hi, in the Redux world, I only change thanks to a reducer. 


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

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


Howdy, I am in charge of communicating what needs to be done.

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

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

Greetings, I am in charge of transforming the state as per an action request.


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


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

Hey, I am in charge of delivering the actions' messages to the reducers
How to customize HTTP Exception In NestJS
Tags: javascript, typescript, beginners, nestjs
Published: 2022-02-17 04:46:26

프로젝트가 조금씩 진행되어 질 때 마다, 코드의 양이 많아 질 때마다, 다루는 데이터가 많아 질 때 마다, 서버는 최대한 견고하게 작동해야 하며, 그 응답도 통일성이 있어야 한다고 생각한다.

응답은 물론, 우리의 소망과는 별개로 오류는 어디서든 항상 존재 할 수 있으며, `Front-end` 에서 응답과 오류를 잘 가공하여 로직을 처리하려면, 서버에서는 항상 통일된 형태의 객체로 응답/오류를 전해주어야 한다.

현재 진행중인 프로젝트에서는 다음과 같은 응답 객체 양식을 지켜주고 있다. 에러가 난다면 다음과 같은 형식으로 내려준다.
```json
{
  "status" : 401, // Http Status Code
  "code" : "UNAUTHORIZED_USER" // string Response code
  "error" : true // is error occurred?
  "message" : "권한이 없습니다." // message for request,
  "data" : // response data, original error object
}
```

하지만, NestJS의 기능 중에 다음과 같은 기능이 존재한다.
```typescript
export class SomethingDto {
  @IsNotEmpty()
  field : number
}
```
를 사용한 Validation과,

```typescript
throw new UnauthorizedException(object, 'description');
```
과 같은 NestJS 가 지원하는 HttpException 이다.

위와 같은 기능을 사용하면서 NestJS 가 자동적으로 던지는 응답(에러)객체는 다음과 같다
```json
{
  "statusCode" : HttpStatusCode,
  "message" : string[],
  "error" : string
}
```

따라서 프로젝트에서 사용하는 형식으로 응답 객체를 바꾸어 주어야 한다.

이때 사용한 것이 예외 처리 레이어를 두는 방식이며, Filter 를 사용한다. 다음은 내가 사용한 방식이다.
피드백이 있다면 언제든 부족한 점을 알려주면 감사드린다.

- http-exception.filter.ts
```typescript
@Catch()
export class HttpExceptionFilter implements ExceptionFilter {
  catch(exception: Error, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const res = ctx.getResponse<Response>();
    const req = ctx.getRequest<Request>();
  }

    if(!(exception instanceof HttpException)) {
      exception = new HttpException(new ResponseDto(~~),     
      HttpStatus.Internal_Server_Error);
    }

    let response = (exception as HttpException).getResponse();

    // 시스템이 자동으로 던진 에러에는 statusCode가 존재함.
    if(response['statusCode']) {
      // your transform response object
    }

    const log = {
      timeStamp: new Date();
      url: req.url;
      response
    };

    Logger.error(long)

    res.status((exception as 
    HttpException).getStatus()).json(response);
}
```

이렇게 작성한 이후 main.ts 에서 다음과 같이 사용했다.

```typescript
// 중략

app.useGlobalFilters(new HttpExceptionFilter());
await app.listen(8080);

// 후략
```

이렇게 했더니 다음과 같이 시스템에서 던진 에러메세지가 잘 변형되어 내려왔다.

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

나와 같이 헤메이는 초보자에게 힘이 되었으면 좋겠다.


Reference
- https://wikidocs.net/158651
How to carry PDF & document watermarking process?

Published: 2022-02-17 04:34:52

 PDF & document watermarking 
   
For PDF & document watermarking a user must choose this smartly designed PDF CHamp application. The tool contains some great features that help every user with PDF & document watermarking. Also, with an advanced Graphical User Interface, every novice user can do follow the process of PDF & document watermarking. Below are the steps provided for carrying out the process;

1. Step 1- Firstly, click on the option your choice option whether you want a watermark image or watermark text.
2. Step 2- Then browse the location of the watermark image or write the text
3. Step 3- Select the original or rotated option
4. Step 4- Choose the watermark option
5. Step 5- Select the opacity as per your choice
6. Step 6- Then browse the location where you want to save the added watermark pdf file
7. Step 7- Finally click on the ‘Generate pdf’ option

Refer:[http://www.watermarkpdf.pdfchamp.com/](http://www.watermarkpdf.pdfchamp.com/)
Different data science tasks 
Tags: datascience, machinelearning, deeplearning
Published: 2022-02-17 04:31:52

Open source tools are available for various data science tasks. In this article, we’ll have a look at the different data science tasks. we’ll walk through the most commonly used open source tools for those tasks. The most important tools are covered.

Data Management is the process of persisting and retrieving data. Data Integration and Transformation, often referred to as Extract, Transform, and Load, or “ETL,” is the process of retrieving data from remote data management systems.

Transforming data and loading it into a local data management system is also part of Data Integration and Transformation. 
Data Visualization is part of an initial data exploration process, as well as being part of a final deliverable. 

Model Building is the process of creating a machine learning or deep learning model using an appropriate algorithm with a lot of data.

Model deployment makes such a machine learning or deep learning model available to third-party applications. 

Model monitoring and assessment ensures continuous performance quality checks on the deployed models. These checks are for accuracy, fairness, and adversarial robustness. Code asset management uses versioning and other collaborative features to facilitate teamwork.

Data asset management brings the same versioning and collaborative components to data. Data asset management also supports replication, backup, and access right management. Development environments, commonly known as Integrated Development Environments, or “IDEs”, are tools that help the data scientist to implement, execute, test, and deploy their work. Execution environments are tools where data preprocessing, model training, and deployment take place. Finally, there is fully integrated, visual tooling available that covers all the previous tooling components, either partially or completely.
VS Code Shortcut Keys
Published: 2022-02-17 04:20:06

Save time, because time is more important than money.
List is non-exhaustive, will add more along the way.

# Default Shortcut Keys
## Open Terminal for the current working file
```
Ctrl + `
```
## Split work screen
```
Ctrl + \
```
## Close Current work screen
```
Ctrl + W
```
## Collapse Explorer side bar
```
Ctrl + B
```
## Alternate between 2 work screens
```
Alt + 1 and Alt + 2
```
## Search files
```
Ctrl + P
```
## Swap line of codes
```
Alt + up or down key
```
## To edit same lines at one go
```
Ctrl + alt + up or down key
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1jq79lk6iiegqusk6ci.png)

# Configure Global Snippets
Go File > Preferences > User Snippets > Global Snippets
```
  "console.log": {
    "scope": "javascript,typescript",
    "prefix": "cl",
    "body": ["console.log('');"],
    "description": "Log output to console"
  }
```
## Prevent auto conversion of single-quote to double-quotes
Go File>Preferences>Settings and search for prettier.singleQuote. Now check to true.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjbws1t84tllcfqx8oab.png)
 
Cheers!
#34 -Shortest code: Bug in Apple - CodeWars Kata (6 kyu)
Tags: javascript, webdev, tutorial, 100daysofcode
Published: 2022-02-17 03:30:21

##Instructions
**shortest code: Bug in Apple
(Code length limit: 80 chars)**

This is the challenge version of coding 3min series. If you feel difficult, please complete the simple version

**Task**
Find out "B"(Bug) in a lot of "A"(Apple).

There will always be one bug in apple, not need to consider the situation that without bug or more than one bugs.

> input: string Array apple
> output: Location of "B", [x,y]

**Code length calculation**
In javascript, we can't get the user's real code, we can only get the system compiled code. Code length calculation is based the compiled code.

<u>For example:</u>
If you typed sc=x=>x+1
after compile, it will be:sc=function(x){return x+1;}

---

##My solution:

```javascript
function sc(a){
  for (i = 0; i < a.length; i++)
  {
    j = a[i].indexOf('B')
    if (j > -1) return [i, j]
  }
}
```
---

##Explanation
First I used a loop to iterate in the first array that contained the other arrays, and then inside it I declarated "j", that contained the index of 'B' inside the array that is being iterated, and after that I added a conditional that if the index of 'B' is higher than -1, it means that there is a 'B' element so I just returned the last result that is an array with the index of the array being iterated so I get the row and "j" that is the index of 'B', so I get the column

---

**What do you think about this solution? 👇🤔**

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/56f8a648ba792a778a0000b9)
How do you guys keep different versions of your resumes and keep them updated?
Tags: watercooler, discuss, resume
Published: 2022-02-17 02:24:05

I've read that it is useful to tailor resumes to job applications, also I recently spent a lot of time updating my resume.

That made me think to try to build a tool to make updating resumes less time-consuming, with the design of the resume already taken care of, where you can create "branches" from resumes to tailor specifically for a position/area I just don't know if that would be something useful or if there is already something to do it.

I know people usually make a resume in LaTeX and commit it to a git repository, but seems like a massive time investment to learn LaTeX just to make a resume there.
DevOps-as-a-Service — Onward and Upward
Tags: devops
Published: 2022-06-20 20:34:10

---
title: DevOps-as-a-Service — Onward and Upward
published: true
date: 2022-02-17 02:12:00 UTC
tags: DevOps
canonical_url: https://duplocloud.com/blog/devops-as-a-service-onward-and-upward/
---

Today marks an important milestone for DuploCloud as we closed our Series A funding for $15M, led by Navin Chadda at Mayfield with continued participation from Monta Vista Capital.

Check out the press release [here](https://duplocloud.com/news/press-releases/devops-as-a-service-pioneer-duplocloud-raises-15-million-series-a-experiences-270-year-over-year-revenue-growth/).

This comes on the heels of tremendous growth for the company which would not have been possible without the support of our investors and customer, as well as the tireless work of our employees across the globe and their families who support them. As I pause to appreciate the past and what we have accomplished and look forward to an even brighter future, I want to extend a heartfelt Thank You!

Venkat

The post [DevOps-as-a-Service — Onward and Upward](https://duplocloud.com/blog/devops-as-a-service-onward-and-upward/) appeared first on [DuploCloud](https://duplocloud.com).
001/100 Days of Code: Expressões Regulares
Tags: 100daysofcode, javascript, regex
Published: 2022-02-17 01:53:48

---
title: 001/100 Days of Code: Expressões Regulares
published: true
description: A sopa de letrinhas que pode revolucionar sua maneira de validar entradas de dados! :stew:
tags: 100daysofcode, javascript, regex
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uphfstl0p6ehpjgbr2re.jpg
series: 100 Days of Code
---

A sopa de letrinhas que pode revolucionar sua maneira de validar entradas de dados! :stew:

## Ontem
Comecei a estudar sobre expressões regulares realizando os exercícios do módulo **Regular Expressions** no FreeCodeCamp e acompanhei uma explicação incrível do @erickwendel que, por feliz coincidência, lançou um material na segunda-feira em seu canal no youtube que, apesar de não ser o tema principal do vídeo, explica com excelência a respeito desse assunto.
[Esse é o vídeo](https://www.youtube.com/watch?v=G8_Feca_9U0)!

## Hoje
Sumarizei as principais flags e operadores dessa grande sopa de letrinhas e utilizei a maioria delas em alguns experimentos no [Regex101](https://regex101.com/), um editor online que te auxilia no processo de construção da sua expressão regular, uma ferramenta incrível e bem intuitiva, basta inserir os termos que devem ser testados e sair construindo sua expressão enquanto acompanha simultaneamente os resultados.

Um pouco do que foi aprendido:
### Expressões Regulares
- São padrões utilizados para identificar cadeias de caracteres em uma string
- São muito utilizadas para validação de entrada de dados
- Em Javascript as expressões regulares não são declaradas entre aspas
- Alguns caracteres:
<table>
 <thead>
  <tr>
   <th>Caractere</th>
   <th>Descrição</th>
   <th>Exemplo</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>|</td>
   <td>Ou</td>
   <td>/Yes|No/</td>
  </tr>
  <tr>
   <td>i</td>
   <td>Ignora a caixa do caractere</td>
   <td>/Alexandre/i</td>
  </tr>
  <tr>
   <td>g</td>
   <td>Retorna um vetor com todas as ocorrências</td>
   <td>/Alexandre/g</td>
  </tr>
  <tr>
   <td>.</td>
   <td>Indica um caractere qualquer</td>
   <td>/ti./</td>
  </tr>
  <tr>
   <td>[ ]</td>
   <td>Escolhas permitidas</td>
   <td>/B[au]g/</td>
  </tr>
  <tr>
   <td>[ - ]</td>
   <td>Intervalo de caracteres</td>
   <td>/B[a-j]u/</td>
  </tr>
  <tr>
   <td>[^ ]</td>
   <td>Negação de caractere</td>
   <td>/Alex[^a]ndre/i</td>
  </tr>
  <tr>
   <td>^</td>
   <td>Obrigatório estar no início</td>
   <td>/^a/</td>
  </tr>
 </tbody>
</table>

## Outros Canais
Fique à vontade para entrar em contato comigo por essas outras mídias sociais também:
- [LinkedIn](https://www.linkedin.com/in/joaovitoralexandre/)
- [Instagram](https://www.instagram.com/alexandrebekor/)
- [Twitter](https://twitter.com/alexandrebekor)