teleren/devto huggingface dataset:
6 Boas práticas para o code review
Tags: codereview, softskills, developer
Published: 2021-10-07 19:24:36

O processo de code review é muito realizado em projetos de software que possuem uma estrutura mínima de qualidade. Esse procedimento consiste em, após uma pessoa desenvolvedora terminar uma tarefa e gerar um pull request (PR), outra pessoa desenvolvedora analisará e indicará melhorias para esse código.

Assim, as pessoas desenvolvedoras atuam na melhoria do código do time, aumentando o nível de qualidade do código e evitando possíveis bugs. Além disso, contribuindo para o aperfeiçoamento das habilidades técnicas e nivelando o time.

6 Boas práticas para executar no code review

1. Use emoticons apenas para demonstrar aprovação, por exemplo 👍🏽 , ✅, 🚀, 😊.

2. Não refatore o PR de outra pessoa sem que ela saiba. Caso sejam necessárias muitas modificações, realize comentários. Refatorar sem informar, retira a oportunidade de aprendizado da pessoa desenvolvedora.

3. Prefira explicar suas sugestões com pequenos pedaços de código ou links que direcionem a pessoa desenvolvedora.

4. Sempre que possível responda os comentários no PR. Habilitar a configuração para enviar alerta de novos comentários para o seu e-mail, pode ser uma ótima prática.

5. Prefira usar linguagem sugestiva à imperativa. Outra boa opção, é utilizar perguntas, por exemplo:

Exemplo 1

❌ ” Ficou ruim ”

✔️ ” É uma ótima prática utilizar nomes mais descritivos. Sugestão: isFlowStateFinished”.

Exemplo 2

❌ ” Nada disso ficou bom”

✔️ ” É mais interessante utilizarmos o padrão do MVC. Você consegue perceber as melhorias associadas? Podemos conversar melhor sobre 😄 ”.

Exemplo 3

❌ ” Esse for está com uma performance ruim”

✔️ ” Utilizar um find() poderia gerar uma performance melhor nesse trecho de código”.

6. Em PRs maiores ou mais difíceis dê parabéns, ou envie uma mensagem positiva, na aprovação do PR. Trabalhar com desenvolvimento normalmente não é fácil, o incentivo dos colegas é uma prática bem positiva. Apesar de parecer simples, essa prática ajuda na manutenção da cultura e clima.

Curtiu as dicas?

Comenta aqui se você utiliza outras práticas interessantes no code review 😄
A way to review a Pull Request
Tags: opensource, github, javascript
Published: 2021-10-07 19:23:48

This week's work consists of contributing to hacktoberfest repo and adding a new feature to a ssg repo which I am going to share my experience. 
## Adding code to support new feature

After looking at a few repos, I decided to filed an issue on [Roxanne's repo](https://github.com/TueNguyen2911/SiteGen).  

It took me not too long to finish implementing the feature, Roxanne's code was broken into descriptive functions, therefore, it was a breeze to read. 

The script has a few `if` statements to catch options like `--input`, `--stylesheet`, so my approach is to catch the `--config` option first and override all properties of the `options` object. 

```javascript
if(options.config !== undefined) {
    try {
        let configData = fs.readFileSync(options.config);
        let configOptions = JSON.parse(configData); 
        for(const [key, value] of Object.entries(configOptions)) {
            value || value.length > 0 ? options[`${key}`] = `${value}` : options[`${key}`] = undefined;
        }
        if(!options.input) {
            console.error(`error: input <file or directory> is not specified in config file ${options.config}`);
            process.exit(-1);
        }
    } catch(error) {
        console.error(`Can't read or parse config file ${options.config}\n ${error}`);
        process.exit(-1);
    }
}
```
And if `input` option is missing from the config file which is required, the program will log the error and exit. 

## Testing and reviewing other's work using git remote
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2w6tdxz74haxilr53k7.png)
> http://jlord.us/git-it/assets/imgs/remotes.png

    
Git remote makes it easier to test and review any pull request or additional code. 

First, I added Roxanne's code as a remote to my local repo and `fetch` instead of `pull` to avoid merging to my local repo. 
```console 
git remote add rclee1 https://github.com/rclee91/tue-1st-ssg.git
git fetch rclee1
```
I then created a tracking branch which is a reference to Roxanne's [fork](https://github.com/rclee91/tue-1st-ssg.git) branch `issue-19` using 
```console
git checkout -b rclee1-issue-19 <rclee1>/<issue-19>
```
In this branch, I experimented the script to check if there was anything to improve or fix and with this approach, reviewing a PR is definitely more effective than checking a PR on GitHub. 

You can take a look at Roxanne's repo [here](https://github.com/rclee91/SiteGen) or [mine](https://github.com/TueNguyen2911/tue-1st-ssg)
How to Access GoDaddy Email? [GreenHatFiles]
Tags: godaddyemail, beginners, tutorial, discuss
Published: 2021-10-07 18:49:22

You can access the GoDaddy Workspace Webmail mail server with the desktop Web browser as well as a mobile browser, as well as the GoDaddy mobile application on <a href="https://en.wikipedia.org/wiki/GoDaddy">godaddy wiki</a>. GoDaddy Webmail is a GoDaddy Webmail service allows users to view the email accounts that are associated with one or more domain names that are hosted by GoDaddy.

The GoDaddy mobile app, which is available on users of both Android as well as iOS devices, allows you to establish a safe connectivity between your smartphone and GoDaddy emails <a href="https://greenhatfiles.com/how-to-access-godaddy-email/">https://greenhatfiles.com/how-to-access-godaddy-email/</a>. You can also customize your preferred email clients for example, Outlook or Thunderbird in order to control your GoDaddy account. You can also login to your GoDaddy email account even while connected to the GoDaddy dashboard.

<h2 style="text-align:left">Accessing GoDaddy Webmail on Desktops</h2>

To access the status of your GoDaddy email account on your desktop computer, you can make use of the standard Web browser. Enter your desktop-specific version of Workspace Webmail URL (link in Resources) into the browser's address bar and click "Enter" to open the web-based email application.

Enter the email address of the account you wish to access in the Username field and then enter the password for the account into the Password box. Select on the "Log In" icon to login to your email account.

<h2 style="text-align:left">Accessing GoDaddy Webmail on Mobile</h2>

Utilize an internet browser installed on your smartphone to examine your GoDaddy account. Open the browser and then type in the mobile email URL (see resources). Log in using an email account and password.

<h2 style="text-align:right">Using Mobile Apps</h2>

GoDaddy offers a secure and free email application to Android as well as iOS devices. Install and download the GoDaddy mobile application through iTunes as well as Google Play.

Start the mail app on your device then click on"Email Management" and then the "Email Management" tab to access the dashboard for email <a href="https://greenhatfiles.com/godaddy-email-webmail-login/">greenhatfiles.com | godaddy</a>. Enter the email address for the account you wish to examine into the "Email" field, and then enter the password of the account into the Password box. Click "Go" or press the "Enter" keyboard key to gain access to the account that you have chosen.

<h2 style="text-align:left">Accessing the GoDaddy Dashboard</h2>

You can also log into Workspace Webmail by login to the GoDaddy account dashboard on the Web browser and selecting the "Email Management" tab. Select"Webmail "Webmail" option next to the email address of the account you'd like to access to make it possible to sign in to your account through Workspace's Webmail tool.
Find the best repos to contribute to in #hacktoberfest
Tags: hacktoberfest, opensource, contributorswanted
Published: 2021-10-07 18:40:18

Contributing to open source is difficult. Ironically, it's particularly difficult during #hacktoberfest. Why? Most of the issues in the open source network are solved by programmers that already know the codebase where those issues live. Hacktoberfest flips the script and makes it cool to scavenge the open source network hunting for _easy_ issues to solve. The problem? The open source network is vast and disorganised, so finding the communities (and issues!) that align with your skills and interests is extremely difficult.

At [Quine](https://twitter.com/quine_sh) we believe that contributing to open source is the best way to level up as a developer, so Hacktoberfest should be celebrated all year round! That is why we are building [Scout](https://scout.quine.sh), a platform that allows you to easily find projects to contribute to, add to your stack, or simply enjoy! Our powerful ML engine will crunch your Github metadata to provide you the issues that best align with your interests - all through a fresh, simplified, and personalised interface!

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

🎟 Quine is still in closed beta, but we're giving out 100 beta-tester invites this month! To snap one, go [here](https://scout.quine.sh) and use the access code **`hacktoberfest2021`**

More stuff is coming soon, follow us on [Twitter](https://twitter.com/quine_sh) for updates 🐦
Javascript text-to-sppech 
Published: 2021-10-07 18:22:46

Did you know javascript have native text-to-sppech?
Try it in your console.
```javascript
const speak = (msg, lg = 'en') => {
  const sp = new SpeechSynthesisUtterance(msg);
  [sp.voice] = speechSynthesis.getVoices();
  sp.lang = lg;
  speechSynthesis.speak(sp);
};

speak('Hello, my name is Alison Silva, and I\'m a software developer. Did you know javascript have native text-to-sppech?');
```
You include can change the language as you see in the code above.
Type Aliases in Kotlin
Tags: kotlin, typealias, programming
Published: 2021-10-07 18:04:06

type alias provide alternative name for existing type. if type name is longer  can be introduces shorter name , it will not introduced new types, they are equivalent to corresponding types.


```kotlin
data class User(
    val name:String? = null,
)

// alias for Int type and ArrayList
    typealias u = Int 
    typealias l = ArrayList<String>
fun main(){
    val users:l = ArrayList()
    users.add("Jb")
    users.add("hdshj")
    print(users)
    val x:u = 34
    print(x)
}
``` 



```kotlin
// type alias for inner class 
class A {
inner class Inner
}
class B {
   inner class Inner
}
    typealias AInner = A.Inner
    typealias BInner = B.Inner
``` 

```kotlin
 // provide alias for Function type 
 val lamb = { x:Int, y:Int, z:Int -> print("$x $y $z") } 

 typealias MyHandler = (Int, Int, Int) -> Unit
 fun my(f:MyHandler){
     f.invoke(20,21,22)
 }
 fun main(){
     my(lamb)
 }
```

```kotlin
 typealias Predicate<T> = (T) -> Boolean
 
 fun foo(p: Predicate<Int>) = p(42)
 fun main(){
     val f1: (Int) -> Boolean = { it > 0 }    
     print(foo(f1)) // true 
     
     val p: Predicate<Int> = { it > 0 }
     println(listOf(1, -2).filter(p)) // [1]
 }
 
 
```
Social Media Icons Widget
Tags: javascript, webdev, widget
Published: 2021-10-07 18:00:00

https://codepen.io/scoley77/pen/abweyqE

Instructions: 
1 - Copy each social media link from your browser, paste it into the widget, and click "Add Link"
2 - Once all your links are added, "Submit" 
3 - Copy and paste the code into your website
4 - Connect your fontawesome kit to your site
5 - Style your icons and enjoy!
React timeline animation component
Tags: javascript, react, webdev, frontend
Published: 2021-10-07 10:10:09

![timeline animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lihj5p7el615ih3a5vf.gif)
Hi! 
In this post, I'd like to introduce a react component, that was designed for animating the timelines and the scroll-dependent animations. 

Firstly I try to find existing solutions, but they work with a solid timeline. In my case, I have a banner in the middle of the timeline. It gives me an idea to create a wrapper component for any part of the timeline, sticks or step circles whatever. You can see the full [demo](https://codesandbox.io/s/brave-kepler-fdbzv?file=/src/App.js:2443-2454) 

The main idea is to change the background gradient of timeline elements smoothly, during the scroll.
```javascript
const depthPx = rect.bottom - halfScreenHeight;
const depthPercent = (depthPx * 100) / rect.height;
entry.target.style.background = `linear-gradient(to top, #e5e5e5 ${depthPercent}%, #53b374 ${depthPercent}% 100%)`;
entry.target.style.transform = "translateZ(0)";
```
The component uses the "render prop" pattern.
```javascript
<TimelineObserver
  initialColor="#e5e5e5"
  fillColor="#53b374"
  handleObserve={(setObserver) => (
    <Timeline
      className="timeline"
      setObserver={setObserver}
    />
  )}
/>
```
And we pass a ref to the setObserver function:
```javascript
 const timeline1 = useRef(null);

 useEffect(() => {
    setObserver(timeline1.current);
  }, []);

<div id="timeline1" ref={timeline1} className="timeline" />
```
In order to filter already filled elements and prevent further position recalculations, we use the "id" prop.

In terms of optimization, we use the "IntersectionObserver" to interact with elements only if they are in the viewport. And the requestAnimationFrame to handle the color fill animation.
```javascript
  const callback = entries => {
    entries?.forEach(entry => {
      if (entry.isIntersecting) {
        setObservable({
          obs: entry,
          observableList: observablesStore.current,
          callbacks: callbacks.current,
        });
      }
    });
  };
  const observer = useRef(new IntersectionObserver(callback, options));
```
You also can add a callback that fired after the element will fully cross the middle of the screen. (watch the demo)
```javascript
 const someCallback3 = () => {
    setMessage3("Finish");
    fireConfetti();
  };

  useEffect(() => {
    setObserver(circle3.current, someCallback3);
  }, []);
```
This is react-timeline-animation at first glance. Be free to suggest ideas or contributions, contacts in github below.
Code can be found in [github](https://github.com/akashuba/react-timeline-animation).
And [npm](https://www.npmjs.com/package/react-timeline-animation) package.
Hello, scarcity mindset
Tags: freelancing, mindset, approach, career
Published: 2021-10-07 17:53:49

The scarcity mindset frames our current circumstances as "not enough." It's feast or famine as a freelancer, so you better eat while you can. I fell victim to the scarcity mindset while freelancing, which caused me to accept more projects than I could personally handle. Doing so caused ripple effects throughout my entire life:

- I struggled to push myself outside of my comfort zone.
- I became _way_ too profit-driven.
- Managing client projects became more complicated.
- Hiring people required me to manage their work and increased my financial complexities.
- I couldn't fully invest myself in a single project because I was spread too thin.

As a result of all of this, I got burnt out. This led to many bouts with anxiety; my body felt worse; and countless servings of stress, overwhelm, and unhappiness.

> As a freelancer, if you're not working, you're not eating. Lacking a regular paycheck can make the future seem uncertain, especially for anyone who has been through a client drought.

Still, we should all be aware of the tendency to fall into a scarcity mindset. This awareness can help with mindful decision-making.

I'd be curious to know how I would feel if I were to do another year of freelancing and try keeping my scarcity mindset in check.

**How would reducing the hustle and raising my investment in each project change how I feel?**

**Would I be more satisfied with what I've done and provide myself with room to grow?**

Photo by <a href="https://unsplash.com/@flovayn?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Florian van Duyn</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
customize your zsh 
Tags: zsh, mac, terminal, github
Published: 2021-10-07 17:53:05

![Alt customize zsh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yj24ak80bkspdsqifqzh.png)

When someone wants to customize own mac zsh terminal and use color for each text also wants to show git branch name then you can add below code in your `.zshrc`

```
# Git branch in prompt.
parse_git_branch() {
    git branch 2> /dev/null | sed -n -e 's/^\* \(.*\)/[\1]/p'
}

setopt PROMPT_SUBST
export PROMPT='%F{cyan}%n@%M:~ %F{yellow}%. %F{green}$(parse_git_branch)%f %F{normal}$%f '
```

Here,
%n => mac username
%M => mac computer name
%. => current folder name
$(parse_git_branch)%f => git branch name (if working in git repo)
Bubble-sort
Tags: beginners, algorithms, javascript
Published: 2021-10-07 17:30:57

Cover image from: [Unsplash  - Kai Dahms](https://unsplash.com/photos/IBo9Ehrzcfs)
### Intro

This is going to be a series about different sorting algorithms, some explanation and a quick demo with solution in JavaScript. 

#### Bubble sort

First of all, let start with the most basic one - bubble sort.
The logic behind bubble sort is the following:
- starting from the beginning, compare two adjacent elements
- if the previous one is bigger than the following one, swap those two
- repeat until there is no element left in the array

This is just one iteration, which guarantees that the biggest element is at the end of the array.

- repeat this process for every element in the array

#### Complexity

As you may see, there are several different outcomes, and based on the number of the elements to compare, things quickly can get out of control. 

**Best case scenario**: The elements are ordered > we will do **O(n)** comparisons. 


**Worst case scenario**: The elements are reverse ordered > we will do **O(n<sup>2</sup>)** comparison. It does not look like a problem for 10 elements, but for 1000, there will be a lot of zero after that first leading one. :)

**Average scenario**: Sadly, the average scenario has the same time complexity as the worst one, which still will be **O(n<sup>2</sup>)**.

#### Usage

I think bubble sort is not so problematic, because of its ease to understand. Use it wisely, and use it for small amount of elements. There is nothing wrong with it - up to a minimal amount of elements.

#### Implementation

Of course, there are a lot of way to implement this, but I will leave mine here for anyone who is interested in. I will link the GitHub repo for this as well.

```
function bubbleSort(_array) {
  const array = _array;
  for (let i = 0; i < array.length - 1; i++)
    for (let j = 0; j < array.length - i; j++)
      if (array[j] > array[j + 1]) [array[j], array[j + 1]] = [array[j + 1], array[j]];

  return array;
}
```

Some sneak peak:
- the easiest way to swap two variables is [a, b] = [b, a] > you do not need a `tmp` one then
- you do not have to loop the array until the end every iteration > if the greatest is already at the end (and the nth greatest .. so on) leave that alone

#### Reference

[Repo](https://github.com/vazsonyidl/sorting-algorithms/blob/main/src/bubble-sort.js)
Why I seduced Django
Tags: javascript, webdev, python
Published: 2021-10-07 17:28:12

I had the worst case in my first year as a programmer. Jumping in from AI, mobile, and web development within weeks. But I guess I had three days per week concentrating on Artificial intelligence. After realizing I was doing nothing, I re-started my schedule. I decided to focus on web development technologies before shifting back to my interests. Here is the reason why I preferred Django for my web applications:


Simple server language

Django has many built-in plugins like the form, admin platform, pagination and more. Furthermore, the authentication has been catered for. The only struggle you will experience is using the Python SQL command when extracting data. But when it comes to learning, the server language will take you less than 3 months if you have intermediary python skills.


Fast while dealing with large projects

This is true, maybe not. But the presence of many built-in libraries means you can use existing staff to implement your designs. Many clients won’t ask you about the backend or how I look. If you are the one going to manage the code, granting access to other staff members, then you can decide to use the available admin panel. As the project continues, you will need to build some pages for your team to avoid the clumsy Django administration. However, there is no offense in launching the project with the built-in admin.


Easy to integrate with Artificial Intelligence models

Of course, this is natural, the fact that most projects in AI or data science use python, then it becomes easier to integrate with Django. As AI gains popularity, there is no place where web technologies will lose track. It’s here to stay. People need their models on the internet, and the only way is through web technologies. The world at large needs you to iterate its models with a web platform to make the project accessible in all places.


Able to build full-stack site

Ok, this is simple, it’s not a must for us to know any other frontend technologies. HTML, CSS, and little JS are key, you’re good to go. I have built many sites with Django alone, and they look amazing. But don’t jump in before you become a hero in the basics of web technologies. It’s gonna look hard, but it is not. In general, having a basic understanding of everything will accelerate your training process.
Exploring Neumorphic design
Tags: css, codepen, html
Published: 2021-10-07 17:14:56

Was always thinking of doing a neumorphic design, and finally gave it a try. Not sure whether it meets up to the mark.

But Looks OK though.

Waiting for your feedbacks which are more valuable to me!

PS: will be posting more of this type of designs until it gets perfect

codepen : https://codepen.io/sankar254/pen/XWgvyym

Thanks :)
C# IEnumerables
Published: 2021-10-07 17:12:11

IEnumerable:

`OfType<TResult>(IEnumerable)` - Filters the elements of an IEnumerable based on a specified type.

`Concat<TSource>(IEnumerable<TSource>, IEnumerable<TSource>)` - Concatenates two sequences.

`GroupBy<TSource,TKey>(IEnumerable<TSource>, Func<TSource,TKey>)` - Groups the elements of a sequence according to a specified key selector function.
Amazon's Inconsistency Invites Imitation
Tags: amazon, aws, api, design
Published: 2021-10-07 16:56:00

Last week, Cloudflare announced their R2 cloud storage service, promising "full AWS S3 API compatibility". 

Unfortunately, consistency across AWS APIs (or even within them) is not a thing Amazon is known for. Deliberate cultural decisions on team autonomy and decision making speed make it this way.  

From a challenger standpoint, copying the AWS API makes sense: it lowers the barriers for customers to switch. Practically, however, it means that problematic artifacts of Amazon's culture end up persisted across the development landscape. 

[I dig deeper into what this means for the industry in my Net API Notes, Issue #177](https://tinyletter.com/NetAPINotes/letters/net-api-notes-for-2021-10-06-issue-177-amazon-s-inconsistency-invites-imitation). 

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