teleren/devto huggingface dataset:
Git blame should be called git credit
Tags: git, mentalhealth
Published: 2020-07-04 23:07:53


## Positive language

Language is important, really important. How we express our ideas and our desires has a big impact on how our words will be received. Positive statements get more quickly received by the audience, but they are also _well-received_.

Which of these would you like to hear better?

- Please don't be late at the restaurant tonight.
- Please be on time at the restaurant tonight.

* 66% chances you won't die, 33% chances you will die.
* 66% chances it will save you, 33% chances you will be saved.

Well, in both cases I'd rather hear the second version of those statements. In the second set, it is known as the [**framing effect**](<https://en.wikipedia.org/wiki/Framing_effect_(psychology)>). You'll be more likely to choose the option with the positive connotations rather than the option with the negative ones.

## git blame

Ok, back to our software things. The reason I got to think about this was because of _git blame_. Isn't it kind of strange that they went with a negative word such as blame for the command?

Here is the definition for blame:

> feel or declare that (someone or something) is responsible for a fault or wrong.

> responsibility for a fault or wrong.

Ew, that's not really joyful. But what's the point of the _git blame_ command anyway?

According to the [git documentation](https://git-scm.com/docs/git-blame):

> git-blame - Show what revision and author last modified each line of a file

So, _git blame_ tells you who wrote what code in a specific file. But there are no mention that it's to find a fault or wrong doing. We just want to find who wrote some code!

Why go with negative language when we could have something positive?

## Here comes credit!

Here is the definition for credit:

> publicly acknowledge a contributor's role in the production of (something published or broadcast).

Well, that's a lot more positive! Maybe I want to find who wrote that code so I can congratulate her on such a beautifully crafted piece of engineering.

You know who wrote that 6 months ago?

You. You did. Give yourself some credit you rockstar :heart:

## Aliasing

Turns out it's not that complicated if you are some weird person like me who likes to use positive language in your git commands. We can use some alias!

All you have to do is run this command:

`git config --global alias.credit blame`

Now, _git credit_ does the same job as _git blame_!

It's a tiny tiny change. But it makes me feel happy to use positive language whenever I can :smile:

Have fun :heart:
What FTP software do you use?
Tags: discuss
Published: 2020-07-04 22:51:43

---
title: What FTP software do you use?
published: true
description: What FTP software do you use?
tags: discussion
//cover_image: https://direct_url_to_image.jpg
---
So I've just re-installed my PC, and before I download Filezilla, I'm interested to know what FTP software other people use :)
Clarification on NPM
Tags: npm, discuss, node
Published: 2020-07-04 22:26:34

Hello, I just learned about npm and I'll like to get more clarification on usage of npm in web development(especially frontend development). From what I learned, npm installs packages to a local directory while cdn gives access to packages on a server. So this is where I get confused, if, for instance, I host my git repository on netlify, how would my site access the packages since I didn't upload npm modules?
CSS nth-child trick: get the first/last half of elements
Tags: css, html, tutorial
Published: 2020-07-04 22:09:29

`nth-child` is a common way to style a specific element. For example `2n+1` is for all odd elements, and `2n` is for all even ones.

But how to choose the first/last half of elements without any JavaScript? One of my projects had this wired situation, and I prefer to not use any JavaScript codes.

##Negative child range and nth-last-child

`:nth-child(n+2)` means all elements without the first one.
`:nth-child(-n+2)` means all elements without the last and the second ones.
`nth-last-child(n+2)` will select elements from the second last one to the first one.
`nth-last-child(-n+2)` will select elements from the second last one to the last one.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ont3ntngfy19cnypdahw.png)

##Last half of elements
According the example image, let's assume there are 4 elements - 
###half or more elements
```javascript
:nth-child(n+2):nth-last-child(-n+2)
```
###half or less elements
```javascript
nth-child(n+3):nth-last-child(-n+2)
```
###last half or more elements, top to 12
```javascript
first-child:last-child,
nth-child(n+2):nth-last-child(-n+2),
nth-child(n+3):nth-last-child(-n+3),
nth-child(n+4):nth-last-child(-n+4),
nth-child(n+5):nth-last-child(-n+5),
nth-child(n+6):nth-last-child(-n+6)
```
##Converts it to SCSS
What if there are 100 elements? You have to write 50 lines in CSS...
But we can make a `@mixin`, then add a max number.
```javascript
@mixin last-half-of-nth($maxNumber){
  &:first-child:last-child{
      color: white;
      background: darkblue;
  }
    @for $n from 2 through $maxNumber{
        &:nth-child(n+#{$n}):nth-last-child(-n+#{$n}){
            color: white;
            background: darkblue;
        }
    }
}
```
###last half or more, top to 100
```javascript
 @include last-half-of-nth(50);
```
##Limitation
You have to know the max number of the elements, otherwise it won't work. But this trick is still good for pure CSS without any JavaScript codes.

##Preferences
[https://stackoverflow.com/questions/15466898/selecting-half-the-elements-with-nth-child](https://stackoverflow.com/questions/15466898/selecting-half-the-elements-with-nth-child)
Corte imagens no CSS com object-fit
Tags: css, webdesign, frontend
Published: 2020-07-04 22:01:29

Aquele momento em que você faz uma página toda bonita e precisa adicionar uma imagem 1:1 mas tem uma 3:4, o que fazer? Bom, eu acredito que você queira ir até um editor gráfico para recortar a imagem. Mas, e se eu te falar que tem como fazer este recorte sem precisar do editor, somente usando o CSS? Você acredita? Se sim, ótimo, mas se não acredita, este post vai te mostrar que é possível.

Para que a imagem seja cortada, será necessário de uma única propriedade, o `object-fit`, que especifica como o conteúdo deve ficar dentro do atributo determinado e para isso, eu irei te mostrar como usa-lo e o significado de seus 5 valores.

![Usplash: person hand holding photo frame](https://blog.allytiago.me/img/pine-watt-3_Xwxya43hE.jpg)<figcaption>[Usplash: person hand holding photo frame](https://unsplash.com/photos/3_Xwxya43hE)</figcaption>

Será usada essa imagem acima como exemplo, ela possui originalmente 1920px de largura e 1280px altura e foi reduzida para 300px de largura e altura, isso não irá perder a qualidade, mas vai achatar. O `object-fit` pode ajudar, e eu irei mostrar as diferenças entre cada um.

{% codepen https://codepen.io/allytiago/pen/ZEQvzMX default-tab=css,result %}

O `contain` faz com que a imagem se reduza para conter dentro do espaço definido, sem que haja cortes.

O `cover` faz com que a imagem sofra um zoom até que todas as bordas sejam preenchidas.

O `fill` faz com que a imagem seja achatada para que ela caiba totalmente no espaço.

O `none` irá usar um algoritmo para capturar o trecho da imagem correspondente ao tamanho definido.

O `scale-down` dimensiona a imagem se o `none` ou `contain` for especificado, fazendo com que a imagem tenha um tamanho menor.

###Suporte dos navegadores

Desktop:

| Chrome | Firefox | Opera | Safari | Edge | Internet Explorer |
| -------|---------| ------|--------|------|-------------------|
| 31     | 36      | 19    | 10     | 79   | Não tem           |

Smartphone / Tablet:

| Chrome | Firefox | Opera | Safari    | Android WebView| 
| -------|---------| ------|-----------|----------------|
| 81     | 68      | 24    | 10.0-10.2 | 4.4.3-4.4.4    |

### Referências
- _[MDN: object-fit - CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/object-fit)_
- _[Alligator.io: Cropping Images in CSS With object-fit](https://alligator.io/css/cropping-images-object-fit/)_
- _[CSS-Tricks: object-fit](https://css-tricks.com/almanac/properties/o/object-fit/)_


<hr>

| [➕ Telegram](https://t.me/allytiago) | [🌐 Blog](https://blog.allytiago.me/?utm_source=dev.to) |
|---------------------------------------|----------------------------------------------------------------------------|
What headphones do you use?
Tags: webdev, discuss, productivity
Published: 2020-07-04 21:50:38

---
title: What headphones do you use?
published: true
description: 
tags: webdev, discuss, productivity
//cover_image: https://direct_url_to_image.jpg
---
Whether it's coding, commute, leisure time or workout, most of us love music around us. I was wondering, what headphones or earphones do you use and could you expand a bit why you like them?

I use [Sennheiser HD-201](https://www.amazon.com/Sennheiser-HD-201-Lightweight-Headphones/dp/B0007XJSQC/ref=sr_1_1?dchild=1&keywords=hd201&qid=1593899604&sr=8-1) headphones. Great price/quality ratio.
I also use [Plantronics BackBeat FIT](https://www.amazon.com/Plantronics-BackBeat-Waterproof-Headphones-Interactive/dp/B07532V3L2/ref=sr_1_5?dchild=1&keywords=Plantronics+BackBeat+FIT&qid=1593899785&sr=8-5) Bluetooth headphones for training. Super durable and comfortable for their purpose.
Essential Laws of User Experience(UX) every Software Developer must know
Tags: ux, webdev
Published: 2020-07-04 21:49:47

---
title: Essential Laws of User Experience(UX) every Software Developer must know
published: true
description: 
tags: ux,webdevelopment
//cover_image: https://direct_url_to_image.jpg
---

**Doherty Threshold:** Propounded by Walter J. Doherty and Ahrvind J. Thadani states that “neither the user nor the computer should have to wait for each other”. The average interval between request and response should be less than 400 milliseconds. Keeping users waiting longer reduces productivity and loses attention. To achieve this both Front and Back-end engineers need to work together. For instance, back-end engineers ensure that frequently accessed resources are cached in-memory using a caching tool like Redis while Front-end engineers ensure that scripts and styles are minified and served only when needed.

**Aesthetic and Usability Effect:** An aesthetically pleasing design was studied in 1995 by Maasaki Kurosu and Kaori Kashimura from Hitachi design centre. They found out that users are more tolerant of minor functional defects, so far as an app is aesthetically appealing or beautiful. Keep in mind that the front-end of an application is what users interact with, as such it should be given the attention it deserves, to reflect the brand whilst allowing users to carry out functions seamlessly.

**Fitts Law:** Size and distance. The time to acquire a target is a function of the distance to and size of the target. The target here are buttons, links and Call To Actions (CTAs) users interact with. These should be conspicuous and strategically placed. As an example, an E-commerce site will not have the “Add to cart” button hidden at the footer of the product page, if the goal is to convert visitors to customers.

**Jakob’s Law of Internet User Experience:** “Users spend time on sites other than your site. They prefer your site to work just like other sites.” This law essentially discourages web developers from being too innovative to the extent where users are unable to interact with their products simply because it requires a steep learning curve.

**Occam’s Razor:** “Among competing hypothesis that predicts equally well, the one with the fewest assumptions should be selected”. In design, we strive to keep it simple. Not reaching for complex solutions where simpler ones would not just suffice but be perfect.

There you have it. Thanks for reading. If you learned something new from this article, please like and share.

Did you spot a typo, an error or want to contribute? [Here's the repo on GitHub](https://github.com/samtimberlan/Blog-Posts/blob/drafts/Essential%20Laws%20Of%20UX%20every%20Web%20Developer%20must%20know.md)
Unide and start.vaadin.com
Tags: java, vaadin, gui
Published: 2020-07-04 21:00:36

The service at start.vaadin.com (SVC) is an excellent way to start working on a project. You can add different views, choose what type they are, modify the overall theme and finally download a zipped project you can start hacking away with.

While there is a java+html choice for editing with Vaadin Designer, some developers would probably like to start adding new views written in traditional server side Java and also enjoy the simplicity that a visual design application brings.

With Unide that is possible using version 0.5.0 onwards. It will not be possible to edit the views that are produced by the service, but new views can be added all the same. And they will be in good'ol plain Java

How to do it
------------
Projects from SVC use [App Layout](https://vaadin.com/components/vaadin-app-layout) to provide the UI structure and navigation. We need to provide the class that is the main layout using App Layout. That can be done in settings in Unide. Click on the settings buttons and check the "Use App Layout" checkbox. Then type in the fully qualified name of the `MainView` class in your exported project to the adjacent text field.  For example, with default settings that would be `com.example.application.views.main.MainView`. At the same time you can set the package where Unide will write the exported views and related aux classes. `com.example.application.views.unide` could be one choice, if we assume the default package structure. Here the above settings are applied in the settings page:

![Settings page with proper package and app layout class values](https://dev-to-uploads.s3.amazonaws.com/i/iv8k1yvafwvg1bditn2m.png)

Finally save your changes by clicking save. The next step is to add a new view to the project. Saving the view exports it and we can proceed adding it to the application. Find the `MainView.java` file in your IDE of choice and in it navigate to the `getAvailableTabs` method. Observe how tabs have been added, assuming any views were included when downloading a project from SVC. Add the view just exported in a similar manner. In the image below `TestDesign` is added to the available views.

![TestDesign added the list of tabs](https://dev-to-uploads.s3.amazonaws.com/i/cpv1qefngpq6vvokzmf1.png)

Naturally the class needs to be imported into MainView to make it available. Once these two steps have been completed the project can be run. The added view should be available in the list of views.

Some things are missing
-----------------------
While adding views is possible, there are limitations. For example, currently the theme from the project is not applied in Unide. That might be the subject of a future article or something that needs to be fixed in Unide. I am also very interested in any other missing features or  limitations that come to mind. Creating an issue in the Unide repository [here](https://github.com/mjvesa/unide-src) is a good way to get the issue fixed. 

Thanks for reading, see you in the next one!
Care to share some painfully funny debugging stories?
Tags: watercooler
Published: 2020-07-04 21:17:45

---
title: Care to share some painfully funny debugging stories?
published: true
description: 
tags: watercooler
cover_image: https://images.unsplash.com/photo-1453227588063-bb302b62f50b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80
---

Let me start:

I have a React + Django API that sits behind Nginx that I'm trying to containerize with Docker. For some reason, React can't get pass the CORS policies of the API, even though I can manually open the API endpoints on my browser without any problems. I even tried using CURL and [HTTPie](https://httpie.org/) to issue the requests, and I can successfully get the response with the appropriate `Access-Control-Allow-Origin` header. 

The culprit? [UBlock Origin](https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/) tags the endpoint `/api/ping/` (that is used within the API) as an advertisement server. Big yikes!
🌒 Enable Dark Mode on WhatsApp Web
Tags: showdev, javascript, product, chrome
Published: 2020-07-04 21:12:07

---
title: 🌒 Enable Dark Mode on WhatsApp Web
published: true
description: Enable Dark Mode on WhatsApp Web
tags: #showdev #javascript #product #chrome
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jaofh2fgswpr4hlos2o2.png
---

WhatsApp Web is super convenient — we can work and communicate without checking the phone repeatedly. At times, it could be annoying for the light-sensitive people, and in general, at night. So I wrote this extension, which enables dark mode on WhatsApp Web and allows you to work seamlessly.

## 👨‍💻 Setup

Download the extension [here](http://saqib.dev/wdm). When you install the extension, it automatically enables the dark mode. You can always change the mode using the toggle button from the extension menu. Your preferences are saved for the future.

## 🧶 Features

- Enables Dark Mode on WhatsApp Web
- Remember your preference
- Automatically set the mode next time

## 📋 Permissions

It only requires permission to the WhatsApp Web page to manage the colors. No extra permissions.

## 🤔 What's Next?

- Refactor the code and open-source it
- Extension for Firefox

## 👋 Get in touch

Say hi [@saqibameen](https://twitter.com/saqibameen) and follow for updates.
World of WoqlCraft - Ep.14 Finish building movies data graph
Tags: python, tutorial, querylanguage, database
Published: 2020-07-04 20:59:11

---
title: World of WoqlCraft - Ep.14 Finish building movies data graph
published: true
description: We finally solve all the problems and finish loading all data in the most powerful TerminusDB 2.0, we are now ready to get some analysis out of the IMDB movies data. Follow this series to see how we use TerminusDB client and making queries in Python.
tags: python, tutorial, querylanguage, database
---
We finally solve all the problems and finish loading all data in the most powerful TerminusDB 2.0, we are now ready to get some analysis out of the IMDB movies data. Follow this series to see how we use TerminusDB client and making queries in Python.

Find the source code from our [tutorial repo](https://github.com/terminusdb/terminus-tutorials).

Join the TerminusDB community at [Discord](https://discord.gg/Gvdqw97)
A selfish reason to contribute to open source
Tags: career
Published: 2020-07-04 20:55:34

About a month ago, a recruiter at Google told me that if I didn't get the position at Google, the closest thing I could get to the role is to regularly contribute to an open source project that Google maintains such as Kubernetes or Angular. Long story short, I didn't get the position, but that advice really stuck with me, and I started contributing to open source. 

So far I made contributions to more than 7 codebases, all maintained by different organizations I admire ranging from a browser vendor such as Mozilla to a developer focused blogging platform such as DEV.

I think contributing to an open source project is the closest experience you can get to a developer job. For one, you have direct access to 2-3 project maintainers as mentors. And second you're contributing to a large code base just as you would do at any programming job. The best thing about contributing to open source is that you needn't formally apply on a competitive job board. You simply raise your hand and ask if you can help, and for the most part the project maintainers are totally happy to have you on board. Remember: very few people say no to free labor.

The final takeaway: do you ever want to play in the big leagues? If yes, contributing to an open source project that is actively maintained by a target company is a pretty decent proxy.

PS: I wrote about my experience contributing to Dev [here](https://dev.to/icncsx/os-how-i-made-my-first-pr-to-dev-as-a-code-newbie-3io8). In brief, they are awesome. Go contribute to their [codebase](https://github.com/thepracticaldev/dev.to).

Warmly,
DH
How to Setup netgear extender with mywifiext?
Published: 2020-07-04 20:43:30

Are you finding <a href="https://mywifiexthelp.net/">mywifiext</a> not working? Looking for technical support expert? Dial on the toll-free number 1-866-988-8965 and rest leave on the technical support team. They will take care of your Netgear Wifi Extender and provide you the best results for <a href="https://mywifiexthelp.net/new-extender-setup/">New Extender setup</a>.
How I passed DVA-C01 - AWS Certified Developer - Associate 
Tags: aws
Published: 2020-07-04 20:27:04

So I finally passed an AWS certification (AWS Certified Developer - Associate) after two months of preparation and I wanted to share my experience here.
I used the following resources for preparation.
- Stephane Maarek's course on Udemy
- AWS Practice Exams by Jon-Bonso on tutorialsdojo
- AWS Practice Exams by Whizlabs
- AWS exam cheat sheet by tutorialsdojo
- AWS FAQs 

I had already used mainstream AWS services like AWS lambdas, S3, and EC2, and that's all. So I wanted a course that not only covers the theoretical part but also offers hands-on experience. After some googling, I came across Stephane Maarek's course on Udemy. It was rated best seller so I bought this course. This course was well managed and the author had logically grouped different services together. This helped me understand the use of different AWS services in a better way. The author also provided pdf lectures of the course to quickly revise concepts. This is what I really liked about this course. There was a quiz activity at the end of each section. 

After I finished this course, one of my colleagues told me that this course alone won't help you pass your AWS exam. He advised me to buy exam dumps from tutorialsdojo for practice. I bought the dumps and started solving a paper. I roughly got only 30% of the questions right. This was alarming as I was supposed to give this exam in a week. I told my manager to give me another month for preparation. Tutorialsdojo exam dumps provide detailed explanation for each question. Always read the explanation. I started reading AWS FAQs provided on the official website and AWS cheatsheet by tutorialsdojo. With these materials, I gradually started doing better in the exam dumps. After finishing all exam dumps, I wanted to practice some more questions so I bought exam dumps from whizlabs as well. They were slightly difficult than tutorialsdojo exam dumps but the theme was the same. The AWS cheat sheet provided by tutorialsdojo is really good but due to time shortage, I only studied the main topics from the cheatsheet. I also didn't read all the AWS FAQs given on the official website(Please read them. They really help). I was now confident that I can pass the AWS exam. I scheduled the exam and passed my AWS certification on 2 July. I got 904/1000 marks in the exam.

I am happy and wanted to share this with the Dev community. Sorry for any typos or grammatical mistakes in the post. This is my post ever and I am nervous.

Please feel free to comment if you have any questions.I'd love to answer your queries.

Stay safe <3
Virtual Hosts or Docker?
Tags: docker, webdev, devops, discuss
Published: 2020-07-04 19:13:58

Since I taught myself web development I have always run my websites using Virtual Hosts and this works fine.

Recently I have been playing around more with docker and docker-compose.

I currently run 3 websites, all of which use PHP and MariaDB.

Looking online I couldn't find any recent discussion on the pros and cons of either Virtual Hosts or separate Docker containers, with a reverse proxy in front (Either Traefik or Nginx).

I'd be interested to hear peoples opinions on the two methods.