teleren/devto huggingface dataset:
10 dicas para o desenvolvedor Angular
Tags: angular, webdev, javascript, beginners
Published: 2023-03-09 17:10:05

Angular é um dos frameworks mais populares para desenvolvimento web. Com sua poderosa arquitetura de componentes e recursos avançados, ele pode ajudar a criar aplicativos robustos e escaláveis. No entanto, para aproveitar ao máximo o Angular, é importante ter algumas dicas e truques na manga. Neste artigo, compartilharemos 10 dicas valiosas para desenvolvedores Angular.

**1. Aprenda TypeScript**: O TypeScript é a linguagem de programação principal usada no desenvolvimento de aplicativos Angular. É importante ter um bom conhecimento dessa linguagem para criar código limpo e fácil de manter.

**2. Use o Angular CLI**: O Angular CLI é uma ferramenta poderosa que ajuda a criar e gerenciar projetos Angular. Ele automatiza muitas tarefas comuns, como a criação de componentes e serviços.

**3. Utilize o Angular Material**: O Angular Material é uma biblioteca de componentes pré-construídos que ajuda a criar aplicativos com aparência profissional. É uma boa prática usá-lo para manter a consistência visual em todo o aplicativo.

**4. Use o RxJS**: O RxJS é uma biblioteca reativa que ajuda a lidar com fluxos de dados assíncronos em aplicativos Angular. É importante ter um bom conhecimento dessa biblioteca para criar aplicativos mais responsivos e escaláveis.

**5. Use o Lazy Loading**: O Lazy Loading é uma técnica usada para carregar módulos sob demanda, em vez de carregá-los todos de uma vez. Isso ajuda a reduzir o tempo de carregamento do aplicativo e melhorar a experiência do usuário.

**6. Use o NgRx**: O NgRx é uma biblioteca de gerenciamento de estado baseada em Redux para aplicativos Angular. É uma boa prática usá-lo para manter um estado consistente em todo o aplicativo.

**7. Faça Testes Unitários**: Os testes unitários são importantes para garantir que o código esteja funcionando corretamente e evitar problemas futuros. É uma boa prática escrever testes unitários para cada componente e serviço no aplicativo.

**8. Otimize o Desempenho**: O desempenho é um fator crítico para a experiência do usuário. É importante usar técnicas como a compressão de arquivos, o armazenamento em cache e a pré-busca para melhorar o desempenho do aplicativo.

**9. Mantenha o Código Limpo**: O código limpo é fácil de ler, manter e depurar. É importante seguir as práticas recomendadas, como a organização adequada do código, a nomenclatura adequada e a documentação.

**10. Esteja Atualizado**: O desenvolvimento web está em constante evolução. É importante estar atualizado com as últimas tecnologias, ferramentas e práticas recomendadas para se tornar um desenvolvedor Angular de sucesso. Participar de comunidades online, ler blogs e participar de eventos de tecnologia são boas maneiras de se manter atualizado.

Seguindo essas dicas, você pode se tornar um desenvolvedor Angular mais eficiente e produtivo. Lembre-se de que o desenvolvimento web é uma jornada contínua e nunca é tarde demais para aprender novas habilidades e técnicas. Mantenha-se curioso, pratique bastante e continue aprendendo para se tornar um especialista em Angular.
Read, insert, update or delete with Supabase
Tags: webdev, javascript, beginners, supabase
Published: 2023-03-09 16:41:01

{% embed https://www.youtube.com/watch?v=qpX5SMZCN_4&ab_channel=CodewithGuillaume %}

Supabase is an open-source backend-as-a-service that provides developers with a set of tools to build and scale web applications quickly. One of the key features of Supabase is its ability to handle data operations such as read, update, and delete with ease.

Read Operations: Supabase provides developers with several options for reading data from their databases. The most common method is to use the select statement, which allows developers to query the database for specific data based on criteria such as columns, rows, and values. Supabase also provides additional features such as filtering, sorting, and pagination to help developers optimize their queries and minimize the amount of data returned.

Update Operations: Updating data in Supabase is straightforward and can be accomplished using the update statement. Developers can use this statement to modify existing data in their databases based on specific criteria such as columns, rows, and values. Supabase also provides additional features such as transactions, which allow developers to group multiple update statements into a single unit of work, ensuring data consistency.

Delete Operations: Deleting data from a database is a common operation that developers often need to perform. Supabase provides developers with several options for deleting data, such as using the delete statement to remove specific data based on criteria such as columns, rows, and values. Supabase also provides additional features such as cascading deletes, which allow developers to delete related data from multiple tables in a single operation.

In conclusion, Supabase provides developers with a powerful set of tools to handle data operations such as read, update, and delete. These operations are critical for building scalable and reliable web applications, and Supabase simplifies them, making it easier for developers to focus on building the best user experiences. Additionally, Supabase's open-source nature and vibrant community make it an excellent choice for developers looking for a flexible, customizable backend-as-a-service platform.

G.D
How to set .env variables to Heroku dynamically with a .sh script
Tags: heroku, bash
Published: 2023-03-09 16:40:29

One of the things I really missed when I started using .env files to securelly store important variables, instead of just putting it in the source code, was the abillity to push them to my remote effectivelly.

## Code to send .env variables to heroku

After some reasearch, I didn’t found anything related so I decide to code it myself. And here is the result:

```bash
#!/bin/bash
# USAGE: bash addEnvToHeroku.sh <filepath>

# SET VARIABLES ________________________________________________________________
input=$1
output=$1.sh

# DEFINE FUNCTION TO DELETE FILE _______________________________________________
function deleteIfExist {
   if test -f "$1"; then
      echo "$1 exists."
      unlink "$1"
   fi
}

# SHOW SCRIPT TITLE ____________________________________________________________
echo -e "Setting heroku variables for the file $input: \n"

# DELETE THE SH FILE IF IT EXISTS ______________________________________________
deleteIfExist "$output"

# READ THE CONTENT AND SAVE IN A SH FILE _______________________________________
while read -r line; do
   echo "heroku config:set $line" >> "$output"
done < "$input"

# EXECUTE THE SH FILE __________________________________________________________
bash "$output"

# DELETE THE SH FILE IF IT EXISTS ______________________________________________
deleteIfExist "$output"
```

## Configuration if you’re using Windows
As you can see, it is a .sh file, but you can run it in Windows as well, you just need to specify the git bash location in your `.bashrc` file, which is located in `C:\user\[your user name]\.bashrc`, as it is show bellow:

```bash
alias bash='"C:\\Program Files\\Git\\bin\\bash.exe'
```

## How to use

Now let’s see a simple example on how to use the script.

```bash
# Create a project folder
mkdir MySimplepProject

# Go to the project path
cd MySimpleProject

# Initialize git
git init

# Select your heroku app
heroku git:remote -a mySimpleProjectInHeroku

# supposing you have a ".env" and "addEnvToHeroku.sh" in the project root

# Send the .env variables to heroku
bash addEnvToHeroku.sh ".env"
```

And if you go to heroku you should see all your .env variables:


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

Now you can change and update these variables quicker and easier! 🤘

<div align="center"><a href="#"><img src="https://github.com/lucasvtiradentes/my-tutorials/blob/master/.github/images/divider.png?raw=true"></a></div>
<br>

## RELATED

👉 you can also find the above mentionated code in [this repository](https://github.com/lucasvtiradentes/my-tutorials/tree/master/content/004%20-%20How%20to%20set%20.env%20variables%20to%20Heroku%20dynamically%20with%20a%20.sh%20script/src)
👉 See also all [my projects](https://github.com/lucasvtiradentes/lucasvtiradentes/blob/master/portfolio/PROJECTS.md#TOC)
👉 See also all [my tutorials](https://github.com/lucasvtiradentes/my-tutorials/blob/master/README.md#TOC)
How to add a .bashrc equivalent to the windows cmd terminal
Tags: windows, dotfiles, bashrc
Published: 2023-03-09 16:28:01

In *nix operational systems there is a file called .bashrc, which is loaded before the bash terminal is ready to use, so you can use all the variables setted in that file. It is really useful as you can create personal macros and aliases to boost you productivity.

If you want to to do the same thing in the Windows Command Prompt (CMD), you have to do these steps:

1) Create a .bat with the variables you want
This file should be saved in a place it is not going to be deleted accidently, for example, you could create a folder in `C:\scripts` and save it there.

The file should look like this:

```batch
@echo off
set GITHUB_TOKEN=[here is my github token]
set AWS_TOKEN=[here is my aws token]
```

2) Add the file to be loaded before cmd init
In order to do that you have to add a registry key specifying the path of the cmdrc, as it is shown bellow:

```batch
:: ####################################################################################################################################
   @echo off
   color 04
   title Add cmd rc to registry

:: ####################################################################################################################################
   set "OpenCurrentFolderKey=HKLM\SOFTWARE\Microsoft\Command Processor"
   set "cmdRcPath=C:\scripts\cmd rc.bat"
   REG ADD "%OpenCurrentFolderKey%" /v "AutoRun" /t REG_EXPAND_SZ /d "\"%cmdRcPath%\""

:: ####################################################################################################################################
   pause>nul
   exit /b
   
:: ####################################################################################################################################
```

Save the file also with a .bat extension and make sure to run it as admin. After that you should be able to retrieve all your variables whenever the Command Prompt is open 🚀.

<div align="center"><a href="#"><img src="https://github.com/lucasvtiradentes/my-tutorials/blob/master/.github/images/divider.png?raw=true"></a></div>
<br>

## RELATED

👉 you can also find the above mentionated code in [this repository](https://github.com/lucasvtiradentes/my-tutorials/tree/master/content/002%20-%20How%20to%20add%20a%20.bashrc%20equivalent%20to%20the%20windows%20cmd%20terminal/src)
👉 See also all [my projects](https://github.com/lucasvtiradentes/lucasvtiradentes/blob/master/portfolio/PROJECTS.md#TOC)
👉 See also all [my tutorials](https://github.com/lucasvtiradentes/my-tutorials/blob/master/README.md#TOC)
CSS Black & White Grogu
Tags: codepen, css
Published: 2023-03-09 16:22:49

The Mandalorian is back with a new season. Which prompted me to pull this post out of my drafts. 

This was a intermediate step from my [CSS Ugly sweaters](https://dev.to/jarvisscript/ugly-sweater-css-the-child-l41) to later CSS posts. I was attempting to make a basic starter template for CSS characters. All the sweater background was removed leaving just a rectangular box.

I stripped out color to see if I could make a black and white image with only lines.


I ended up using similar boxes for the [CSS Gradients](https://dev.to/jarvisscript/css-color-gradients-258n) post.

{% codepen https://codepen.io/chrisjarvis/pen/QWmZEXw %}

This was also shared to learn how to show CodePen Pen here.
Developer Nation 23rd Edition Pulse Report
Published: 2023-03-09 16:16:23

Our latest Pulse Report (Q3, 2022) has been out for a couple of weeks now, providing deep insights into the developer eco-system from a community perspective.

If you haven't checked it out yet, here's a small teaser video we made for our Youtube channel. When you're there don't forget to hit the subscribe button ▶️


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

[Watch here](https://www.youtube.com/watch?v=JPbV7Hdg_o4)

#community #developer #pulsereport
How we can execute Cypress E2E Test cases under CI/CD GitLab
Tags: cypress, testing, qa, docker
Published: 2023-03-09 15:50:04

GitLab provides integration with Cypress through its CI/CD pipelines. Developers can configure GitLab to run Cypress tests as part of the pipeline and view the test results within the GitLab UI. 

GitLab also provides the ability to store test artifacts such as screenshots and videos.

**Please follow the [link](https://qaautomationlabs.com/how-to-execute-cypress-e2e-test-cases-using-ci-cd-gitlab/) to get more detail about how we can execute Cypress test cases under GitLab**
High Order Function Explained
Tags: javascript, beginners, programming, webdev
Published: 2023-03-09 15:32:07

---
title: High Order Function Explained
published: true
description: Simple explaination for High Order Function with examples. 
tags: javascript, beginners, programming, webdev
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-09 14:28 +0000
---

One of the commonly asked question for Frontend Interview. This question is valid from Junior role to Lead role. Your answer determine if you have JS basics clear or not. 

## What is **High Order Function** ?
By Definition - A Function which accepts a function as argument or returns a function as value or Both. 

Most of the candidates answers half correctly. In order to qualify a function as High Order Function it has to pass one of the 3 criteria - 
1. Accept a function as a argument
2. Return a function as a value
3. Both of the above


Example of 1st Criteria : 

![Example of High order Function accepting function as argument](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80byrubbfsbp77mdxzuc.png)

Here `getUser` function accepts `onSuccess` and `onError`. These are functions as argument. In this example, `getUser` does not return anything. 



Example of 2nd Criteria :

![Example of High order Function returning function as value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uww30rcixlbyxibu43m.png)

Here `getSumFunc` returns a new function as value.



Example of 3rd Criteria :

![Example of High order Function accepting function as argument and returning function as value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx3cxaqhf7cvv64lxfky.png)

Here `getConfidentialFunction` is a funtion which converts a normal function into a function with access to confidential data. Here `getConfidentialFunction` accepts a fucntion as argument but also returns a new function.
Important Skills to a NodeJS Developer
Tags: node, javascript, webdev, programming
Published: 2023-03-09 11:18:46

# Introduction
NodeJS is a popular open-source framework that has revolutionized web and server-side programming. NodeJS is built on top of the Google V8 JavaScript engine and what makes it popular and useful is because it is designed to be scalable, efficient, and fast. There are various skills that a NodeJS developer should possess to be successful in their career. In this blog post, we will discuss the crucial skills that a NodeJS developer should have.

# 1. Mastery of JavaScript
NodeJS is built on top of the JavaScript programming language, so it's essential to be proficient in JavaScript basics. JavaScript is used to create interactive web pages and is used as a server-side language in NodeJS. NodeJS developers must have a strong grasp of the language's fundamental concepts, such as data types, functions, objects, and arrays. Additionally, it is essential to understand advanced concepts such as closures, prototypes, and asynchronous programming, we would talk about them in another post.

# 2. Knowledge of NodeJS Core Modules
NodeJS has several core modules that are built-in and provide developers with essential functionality to build web applications. A NodeJS developer should have a good understanding of these core modules, including HTTP, OS, FS, and Path. Knowledge of these modules will help developers build web applications more efficiently and handle tasks such as file system operations, server-side communication, and routing.

# 3. Familiarity with NodeJS Frameworks
NodeJS has several frameworks that developers can use to build web applications. These frameworks provide developers with a structure and set of tools to build scalable and efficient web applications. Some popular NodeJS frameworks include Express, Koa, and Hapi. A NodeJS developer should be adept at using at least one of these frameworks and understand the different features and advantages of each framework.

## Conclusion
NodeJS developers are in high demand, and it's essential to have a good understanding of the skills required to be successful in this field. Mastery of JavaScript, knowledge of NodeJS core modules, and familiarity with NodeJS frameworks are the crucial skills that a NodeJS developer should have. With these skills, a NodeJS developer can build robust and scalable web applications that meet the needs of their clients.
Chrome extensions, Manifest v3 and local storage views
Published: 2023-03-09 15:05:21

The other day I started coding a Chrome extension that makes heavy use of Chrome's [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB). Until this time then I had no problem inpecting any local storage using the DevTool's "Application" tab. Those were extensions that used Manifest v2 but as of June 2023 Google will only acept Manifest v3 extensions. 
One of the main changes is that background pages are replaced with service workers. So I changed my code accordingly from:

```
"background": {
    "page": "background/background.html"
  },
```

to

```
"background": {
	"service_worker": "background.js",
  }
```

and coded happily on. When I reached the local storage part and wanted to check the local storage by clicking on the new "service worker" link:

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

Surprisingly the IndexedDB pane in the "Application" tab was empty though I definitely knew that there was data stored:

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

o what was happening? After a long search on the Internets I came across [an answer on StackOverflow](https://stackoverflow.com/a/32471596/259184) that saved my day.

If your extension contains a popup  you can right click and select "Inspect" to open the correct DevTools window:

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

And there you go:

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

But what do you do if your extension does not containa popup? There is a solution though it's a bit more complicated.
Open the extension page and look for the extension's ID:

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

Copy that ID and enter the following URL into the address bar, replacing "ID" with the actual ID:

```
chrome-extension://ID/manifest.json
```

Right click on the window and select "Inspect":

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

One last problem: In contrast to the "classical" DevTools popup this one disappears if you reload the extension. Fortunately you can bookmark the tab:

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

**Update:** You don't actullay need to insert the ID manually but you can click on any script in your default Devtools window (opened with "Inspect views service worker" link), right click on any script in the "Sources" pane, select "Open in new tab" and, just like above, right click the tab and select "Inspect":

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

The only question that remains is: Why, Google, why has this be so complicated?
Weekly Awesome JS KT Part-1
Published: 2023-03-09 15:03:19

1=> ⚡️ Spread Operator(...)

>```
let numbers = [1, 2, 3, 4];
let newArray = [...numbers, 5, 6];
console.log(newArray)
```
>`Output: [1,2,3,4,5,6]`

2=> ⚡️ Closures in javascript with real world example

>Closures: a function that returns another function with access to the parent scope. Example below:

>```
function outerFunction(outerValue) {
  return function innerFunction(innerValue) {
    console.log(`Outer value: ${outerValue}, Inner value: ${innerValue}`);
  };
}
const innerFunc = outerFunction("Hello");
innerFunc("World");
```
>`Output: "Outer value: Hello, Inner value: World"`

>Here we can see that parent function's variables are preserved and still accessible by child function even though parent function has been already executed.

>Now, let's see a real world use case:

```
function createCounter() {
  let count = 0;

  function increment() {
    count++;
    console.log(`Count: ${count}`);
  }

  function decrement() {
    count--;
    console.log(`Count: ${count}`);
  }

  return {
    increment,
    decrement,
  };
}

const counter = createCounter();
counter.increment(); // Output: "Count: 1"
counter.increment(); // Output: "Count: 2"
counter.decrement(); // Output: "Count: 1"
```

>In this example, the createCounter function returns an object with two methods, increment and decrement. The count variable is defined inside the createCounter function and is not accessible outside of it. The increment and decrement methods have access to the count variable due to the closure created by the createCounter function.

>This allows us to create an object with private variables and methods that are not accessible from outside the object, providing a way to encapsulate functionality and prevent outside code from interfering with the object's state.

3=> ⚡️ Prototypes in javascript with example

>Prototypes: an object that is associated with every function and object in JavaScript. Example: 

```
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person("John", 30);
const jane = new Person("Jane", 25);

john.greet(); // Output: "Hello, my name is John"
jane.greet(); // Output: "Hello, my name is Jane"

```

>In this example, we define a Person constructor function that takes a name and an age parameter and sets them as properties on the newly created Person object using this. We then define a greet method on the Person.prototype object, which is shared by all Person objects.

>By using the prototype object to define methods on the Person class, we can create new Person objects that inherit these methods, without having to define them again for each new object. This makes our code more efficient and easier to maintain, as we can make changes to the Person class and have those changes reflected in all instances of the class.

>In addition, we can also use prototypes to add new methods and properties to existing objects, allowing us to extend their functionality dynamically.


---