teleren/devto huggingface dataset:
Setting up VSCode to write commit messages like a boss
Tags: vscode, git, beginners
Published: 2022-10-09 16:38:37

So you've got your shiny code all ready to push up to remote, and you're about to write a commit message.

I am sure you've heard all the tips about writing excellent commit messages, like making sure the title is only so long, that the body is only x characters per line and all that fun stuff. Did you know that you can use VSCode to make your commit messages?

First, configure VSCode as the default editor for git:

`git config --global core.editor "code --wait"`

This command sets git to open up VSCode when you type `git commit` without passing in a `-m "message"` so that you can provide more context about your commit message. The `--wait` part just tells git to wait until the user closes the file before moving on.

Now, when you type `git commit` without `-m`, you'll see a file open in your VSCode called `COMMIT_EDITMSG` and git will wait until that file is saved and closed before continuing.

Second, we can actually set up some rulers to help you make sure you stay within the recommended formatting! You'll want to open up your `settings.json` and insert these lines:
```json
"[git-commit]": {
        "editor.rulers": [50, 72],
    },
```

This will add two rulers to the editor that will open for any git commit! The ruler is the 50 character limit for the title and the second is the 72 character limit for the body of the commit.

That's it, now you can write all the commit messages you want and know that they will render properly!
Polywork: O melhor currículo que você ainda não tem
Published: 2022-10-09 16:37:18

## O que é o Polywork?

O [Polywork](https://www.polywork.com) é uma plataforma de registro de atividades e interação profissional, especialmente para pessoas que trabalham com desenvolvimento, produção de conteúdo e eventos, que podem registrar tudo em um único lugar.

Pessoalmente, eu uso o Polywork para registrar meus artigos, eventos, podcasts, projetos e *reels*, como um portifólio.

## Criando a sua conta

Primeiramente, precisamos criar uma conta na plataforma. Isso pode ser feito no site [polywork.com](https://www.polywork.com/home) no botão `Join Polywork`

![Tela inicial do Polywork](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr3u13mptr3di0kkr378.png)

Depois, podemos adicionar a nossa posição atual na empresa que você trabalha, ou no local que você estuda.

![Tela de preenchimento de ocupação do polywork](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/105grnj564mndzgddg5p.png)

Depois de preenchermos a nossa ocupação atual, podemos adicionar algumas tags no nosso perfil, que indicam tecnologias ou áreas que a gente conhece. Como engenharia de software, UX Design, palestrante, voluntárie,etc.

![Tela de preenchimento de tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwk6istllm1pznk75vn2.png)

Depois de adicionarmos as tags, podemos colocar assuntos que estamos interessades em contribuir, como teste de produtos beta, *brainstorming*, criação de conteúdo,etc.

![Tela de preenchimento de interesses para contribuição](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwehszqy758n782c19bw.png)

Pronto! Há mais configurações opcionais, mas com todas essas informações básicas nossa conta terá sido criada.

## Registrando uma nova atividade

Para registrar uma nova atividade, clique no botão *Post* no canto superior direito, e depois em "Highlight".

![Print do botão Post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbf73si1uq72ikibzwgv.png)

Agora, na tela de registro de atividade, podemos colocar um título, data, tags dessa atividade, e pessoas que participaram nessa atividade.

![Print da tela de criação de atividade](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q65bgf8uxsmr0eqo5uni.png)

Pessoalmente, no título eu coloco o link da atividade, junto com o tipo daquela atividade, como artigo, palestra, live, painel,etc. Juntamente com a data que eu fiz/publiquei aquilo.

![Print de exemplo de highlight, disponível em https://www.polywork.com/lissatransborda/highlights/98smCU6W](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l665nf5gdt5tu82rxqf.png)

Pronto! agora temos nosso primeiro registro de atividade.

## Finalização

Nesse artigo, você aprendeu o que é o polywork, e como criar seu primeiro highlight dentro da plataforma.

Muito obrigada por ler ❤️🏳️‍⚧️ e me segue nas redes, é tudo [@lissatransborda](https://twitter.com/lissatransborda) 👀
3Sum Closest
Tags: twopointer, algorithms, computerscience
Published: 2022-10-09 16:07:52

Problem 3 Closest Sum
Given an integer array nums of length n and an integer target, find three integers in nums such that the sum is closest to target.

Return the sum of the three integers.

You may assume that each input would have exactly one solution.

 

Example 1:

Input: nums = [-1,2,1,-4], target = 1
Output: 2
Explanation: The sum that is closest to the target is 2. (-1 + 2 + 1 = 2).
Example 2:

Input: nums = [0,0,0], target = 1
Output: 0
Explanation: The sum that is closest to the target is 0. (0 + 0 + 0 = 0).


The idea that a lot of people will think of is to brute force all the possible 3 combinations of integers in the nums array sum them and return the closest one.
This solution works but comes with a cost which is the high time complexity of O(n^3)

There is a better way to do it, yes there is.
Using the two pointer technique.
[_Read about two pointer technique_](https://www.geeksforgeeks.org/two-pointers-technique/)

First Sort the array of nums.
the time complexity of the sorting nums is nlog(n)

declare the maxSum = 0

Then loop through the array from 0 to n-2.

Declare the two pointers
l = i + 1
r = n -1
loop while l < r
calculate the sum as nums[i] + nums[l] + nums[r]

check if i = 0 sum > 0;
reassign maxSum = sum

check if sum == target
if yes return sum

check if sum is closer than previous sum;
if sum > 0
check if target-sum < target-maxSum
if yes maxSum = sum
else sum < 0
target-sum > target -maxSum
maxSum = sum

Next is to move the pointer

if sum < target
increment l pointer

if sum > target
decrement r counter

and hence you don't have to bother about missing the values because the array is sorted.
nums[r] pointer is the max value hence you decrease r pointer to reduce the sum, and check again.

else if sum is less than target nums[l] pointer is the smallest and hence you increment the counter value, l=l+1, nums[l+1] which is larger than nums[l] hence you decrease in other to check for l+1.
until l == r.
Then you increment break out inner loop and continue to the first loop by incrementing i.
set l to i+1
set r to n-1.
Repeat the process
And when you get to i = n-2. Repeat the process stop and
Return MaxSum. 
Given the time complexity as nlog(n) + O(n^2).
We take the max And the overall time complexity is O(n^2)
with O(1) space complexity.
Handling Form Has Never Been So Easy | Mantine Form
Tags: javascript, react, tutorial, beginners
Published: 2022-10-09 15:57:37


###Handling Form with mantine use-form

A while ago when working on a project, my friend was searching for a good library to use on our new React based client-project. The project and he stumbled upon Mantine Library which was our savior right then and there.

###Using use-form

To start with use-form from Mantine, you need to install use-form into your package.json first. @mantine/form does not depend on other libraries so you can use it as a standalone package.

```npm install @mantine/form```
###Or
```yarn add @mantine/form```

After that you can start using @mantine/form right away!

To get started, you need to import useform from @mantine/form into your JS file.

```javascript
import { useForm } from '@mantine/form';
```

You can declare a variable and initialize it with **useform** like the example below: 

```javascript
const dog = useForm({
    initialValues: {
      name: '',
      breed: '',
      age: 0,
    },
  });
```

###Accessing Value

```html
<div>
  <h2>{dog.name}</h2>
</div>
```

###Setting form value
You can set form value by using **setFieldValue** from **useForm**

```javascript
<form>
 <label htmlFor="name">Name</label>
 <inputs 
  type="text"
  value={dog.values.name}
  onChange={(event) =>
  dog.setFieldValue('name',event.currentTarget.value)}
  />
</form>
```

###Reseting form values
Useform has a reset api that you can call to reset the whole form value

```javascript
<button type="reset" onClick={dog.reset}>Reset Form Value </button>
```

###Validating the form
Along with **initialValues**, you can also provide **validate** to easily validate your form with ease. To validate, you need to call a validate api from useForm like below:

```javascript
const dog = useForm({
    initialValues: {
      name: '',
      breed: '',
      age: 0,
    },
    validate: {
      name: (value) => (value !== null ? null : notify("Name can't be empty")),
      breed: (value) =>
        value !== null ? null : notify("Breed can't be empty"),
      age: (value) => (value > 0 ? null : notify('Age must be greater than 0')),
    },
  });
```

**Validating Function**
```javascript
const submit = () => {
    //Before submitting, you can check if form is valid
    if (dog.isValid) {
      //Submit form
    } 
    //Or the other way
    const validated = dog.validate();
    if (validated) {
      validated.errors; //Object with errors
      //Submit form
    }
  };
```

###Conclusion
Overall, from my personal opinion I really like Mantine's useForm just because it's really easy to use and beginner friendly. I seriously recommend checking out Mantine's document because there are a lot more stuff on their docs more than here. I hope this article spark your interest on checking Mantine Library out!
Day 19-20: Branding
Tags: 100daysofcode, devjournal
Published: 2022-10-09 15:33:17

This was the weekend, so I did not code, almost. Instead, I though of auxiliary stuff. This looks like a detail but I feel the rising need for a proper branding.

Currently I used the following banner on the main site ([passwordless.id](https://passwordless.id)) and in articles since it fits fairly well. (The image was bought from a stock images provider)

<img src="https://passwordless.id/img/banner-biometric-auth.svg" />

I also used a set of icons from that same provider since I liked them too, even if they don't fit together.

<img src="https://passwordless.id/img/icon-faq.svg" style="height:100px" />

<img src="https://passwordless.id/img/icon_register.svg" style="height:100px" />

But there are two things gravely missing.

1. **A Logo!!!**
2. **The theme primary color!**

The Logo is the primary problem currently. Despite it's a detail, it kind of appears everywhere, from the favicon to the github profile page. Like a brand, this logo symbolizes the app and appears in all kind of places. So it would be nice to have "something" ASAP but I haven't found a nice one yet. I even tried to draw one myself but it was time consuming and not very convincing. I tried a fingerprint with a shield background but that did not looked very friendly, so I dropped it. Perhaps I'll order one next time.

The theme primary color is another issue with multiple aspects.

- The colors used in the banner and the icons do not match
- For the demos, I used the default color of the framework (Buefy) to keep them simple
- I will have to homogenize colors... but which ones? (The framework? The banner? The icons?)

This is both a technical/artwork issue and a question of taste to know which theme color will "look better" for the app.

So while I guess I will postpone the theme color, but it would be nice to have a proper logo.

...well, we'll see. Do *you* have a good idea for a logo?

As usual, thanks for reading! Stay tuned.
Please help. Where is my mistake?
Published: 2022-10-09 15:25:43

Where is my mistake? Why is s equal to minus infinity at some loop iterations?


#include<stdio.h> 
#include<math.h> 

int main()
{
int a, b, c, i;
double x=-0.8, s, si, eps, y;
printf("Enter eps:");
scanf("%lf", &eps);
for (x=-0.8;x<1;x+=0.2)
{
si=1.0; s=1.0; a=2; b=3; c=4; i=1;
while (fabs(si)<eps)
{
si=(1.0/6)*a*b*c*pow(x,i);
s+=si;
a+=1;
b+=1;
c+=1;
i+=1;
}
y=pow(1-x,-4);
printf("x=%lf\t y=%lf\t s=%lf",x,y,s);
printf("\n\n");

}
return 0;
}
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzl6g3y917lfiuevn1bu.png)[](url)
Why doesn't Go have Ternary?
Tags: go, ternary
Published: 2022-10-09 15:09:59

One things I miss most about Go is Ternary, coming from PHP and Node where the ternary is already well established, I understand how it can be controversial since a lot of them use complex logic in them, that would fit more in IF, Else and Switch. It's like a famous quote form the comics: "With great power comes great responsibility".

The discussion about the Go and Ternary isn't new, there are a lot of issues on the topic, I'll leave her sources for you to delve into, I'll summarize the points that I think are most important on both sides, and the give my personal conclusion.

## Benefits

1) Drastucally reduces the use lines code.
```
var n T
if expr {
    n = trueVal
} else {
    n = falseVal
}
```
```
var n = expr ? trueVal : falseVal
```

2) If the problem is the sumbols `?`, `:`. `=`, an approach that not even in python can be quite interesting.
```
x := "yes" if true else "no"
```

3) Languages like C and C++, which are the example base of Go, have ternaries.

4) Variable that nedd a value default if no value is assigned to it, for example: service port.



## Disadvantages

1) When there is more than one expression to be validated, the ternary operation is difficult to read and it becomes impossible to determine its consummation.
```
var b1, b2, b3 bool
...
var s = b1 || b2 ? b2 && b3 ? b1 && b3 : "s1" : "s2" : "s3": "s4"
```

2) Can replaced by operations like IF, ELSE and Switch.

3) Deviates from Go's goal of clarity and simplicity when it comes to syntax.


## Conclusion

The ternary will not come to version 1.20 (at this time we are on 1.19), discussions are whether it will come in version 2 of Go, but the reality that will hardly come, the communicates it despite being divided the majority from what I see defends that should still keep the aspects of simplicity in its syntax, even if it requires more lines of code.

The biggest fear of communicating is the creation of more complex codes, I personally prefer autonomy for developers and their teams to choose the best way to write, one more option would be nice, since there are countless that make more sense to use just one line than to use at least 3.

No everything is lost, if it is really necessary there are packages in Go that create the ternaries in Go or leave it very close to what we have in other languages, example: [ternary](https://github.com/troylelandshields/ternary), logically we must have other scattered around Github.

## Sources

- [Issue 20774](https://github.com/golang/go/issues/20774)

- [Issue 31659](https://github.com/golang/go/issues/31659)

- [Issue 33171](https://github.com/golang/go/issues/33171)

- [Go Doc](https://go.dev/doc/faq#Does_Go_have_a_ternary_form)

- [Github Ternary](https://github.com/troylelandshields/ternary)
Got a false positive! AWS WAF HostingProviderIPList may block system linking.
Tags: aws, security, terraform, operations
Published: 2022-10-09 15:04:59

I ran into a false positive the other day, so I'd share it; There is a rule `AWSManagedRulesAnonymousIpList` in AWS WAF v2, use of the `HostingProviderIPList` in it may need a little care in a particular situation.

## What the problem
First, let me explain what the rules are.

| RuleName | Detail  |
| -------- | ------- | 
| [AWSManagedRulesAnonymousIpList](https://docs.aws.amazon.com/waf/latest/developerguide/aws-managed-rule-groups-ip-rep.html#aws-managed-rule-groups-ip-rep-anonymous) | Inspects for a list of IP addresses of sources known to anonymize client information, like TOR nodes, temporary proxies, and other masking services. |
| [HostingProviderIPList](https://docs.aws.amazon.com/waf/latest/developerguide/aws-managed-rule-groups-ip-rep.html#aws-managed-rule-groups-ip-rep-anonymous:~:text=awswaf%3Amanaged%3Aaws%3Aanonymous%2Dip%2Dlist%3AAnonymousIPList-,HostingProviderIPList,-Inspects%20for%20a)| Inspects for a list of IP addresses from hosting and cloud providers, which are less likely to source end-user traffic. The IP list does not include AWS IP addresses. | 

It is a very useful rule set that usually blocks suspicious accesses. However, the other day I decided to integrate the web service with my customer's external system, and when testing, we encountered a problem where communication could not be established and the service was blocked. As a result, we have set the rule set to "Count" and are now observing whether we should really turn off the rule set.


### Workaround
I used Terraform to build the WAF, so this will be an explanation using Terraform. The change is quite simple, just add `excluded_rule` to the rule in the [aws_wafv2_web_acl](https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/wafv2_web_acl)


![fixing diff](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocboq04t8zd6e2t42b17.png)


I hope it will be of some help to anyone who is encountering the same problem.

### Appendix
By the way, if you want to build a WAF using Terraform, please refer to my previous article!
{% embed https://dev.to/aws-builders/how-to-setup-aws-waf-v2-21f1 %}

Thank you for reading!
Sass: More about Nesting 📚
Tags: scss, css, design, webdev
Published: 2022-10-09 14:46:30

We learnt how to nest Scss rules in the [last post](https://dev.to/ak_ram/sass-interpolation-nesting-4d73). Today, we'll go into more depth regarding nesting.

**In this post, we will cover:-**

1. Parent Selector and pseudo-classes
2. Grouping and Nesting CSS Selectors
3. Selector Nest Combinators

Each point will be discussed in depth.

-----

## 1. Parent Selector and pseudo-classes

[Official SASS document](https://sass-lang.com/documentation/style-rules/parent-selector#:~:text=The%20parent%20selector%2C%20%26%20%2C%20is,a%20selector%20before%20the%20parent.) states that

> The parent selector, & , is a special selector invented by Sass that's used in nested selectors to refer to the outer selector

To further understand, consider the example below.

![Example on Parent Selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ietox695mfnn9thgdrhh.png)

`&` here works as a reference to the outer selector which is `.main .alert`

---

It may be puzzling to you how such a selector may be helpful, right? Parent selector is most commonly used in:

1.1 _**Suffix classes** context.

Many frameworks, including Bootstrap, have this pattern.

![Example of a parent selector-based suffix class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzfp5v3e933a7cvjc19b.png)


1.2 **_Pseudo classes_** also utilize a parent selector.

![Example on using parent selector with pseudo classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ah6hd5ydqzwi9ps15g9x.png)

1.3 also `&` can be used as an argument inside pseudo-selectors functions:

![Example 2 on using parent selector with pseudo classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxi6xevdqkgd6pxwac5a.png)

## 2. Grouping and Nesting CSS Selectors

We use a comma as a separator when there are many selectors in a list.


![Example on nesting and selector list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7i6bihd1tr8zose93ak.png)

## 3. Selector Nest Combinators (>, +, ~, space)

selector combinators can be placed in many places as shown below:


![where to write selector combinators?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33s8w0glve0g9rk9xzz0.png)

Need to read more about selector-nest-combinators? [selector-nest-combinators](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/selector-nest-combinators/README.md)

---

I almost covered everything I know about SCSS nesting; nevertheless, in the following post, we'll talk about a new subject called [placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors).
PostgresSQL unit-4
Tags: database, sql, postgres, javascript
Published: 2022-10-09 14:27:09

> Data generation site [Mackaroo](https://www.mockaroo.com/)

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



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



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


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



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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkt0zjtr4y4kpqb46jpv.png)
Top 5 Google Chrome extensions that every developer should be aware of!!
Tags: webdev, programming, productivity, hacktoberfest
Published: 2022-10-09 14:03:13

Here are a few chrome extensions that could make coding fun for developers and can help to increase their productivity

## 1. [CSS SCAN](https://getcssscan.com/)

CSS SCAN is the smartest browser extension for CSS inspection. You can understand how everything works without wasting time hunting through infinite CSS rules on the browsers' Dev Tools. If you want to copy the CSS of an element, it's a pain. With CSS Scan, you just click, and it's yours. It copies all child elements, pseudo-classes, and media queries.

## 2. [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)

This one is a must-have for any React developer. This extension doesn't do anything if you click on it, but rather, it adds two new tabs in your Chrome DevTools: "Components" and "Profiler".

If you've ever used React JS, then you know that
everything in React is a component.

The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering. By selecting one of the components in the tree, you
can inspect and edit its current props and state in the panel on the right. The Profiler tab allows you to record performance information.

## 3. [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm)

WhatFont is a very useful Chrome extension for developers who need to identify fonts used on web pages. It’s fast, effective, and identifies individual fonts within a page in seconds. It also identifies the family, size, weight, and color. All within a small popup window in the browser.

## 4. [HTML Validator](https://chrome.google.com/webstore/detail/html-validator/mpbelhhnfhfjnaehkcnnaknldmnocglk)

HTML Validator is a quick tool for checking your HTML within a browser. It is a browser extension that adds HTML validation inside the Developer Tools of Chrome. The number of errors of an HTML page is seen with an icon in the browser status bar. The details are seen in the developer tools.

## 5. [FakeFiller](https://chrome.google.com/webstore/detail/fake-filler/bnjjngeaknajbdcgpfkgnonkmififhfo)

Fake Filler is the form filler to fill all input fields on a page with randomly generated fake data. This productivity-boosting extension is a must for developers and testers who work with forms as it eliminates the need for manually entering values in fields.

### That's the end of the list!! Is there anything you would love to add to the list? Drop them in the comment section 🎉❤️.