teleren/devto huggingface dataset:
The Developer Feedback You Are Actually Getting is Survivorship Bias
Tags: dx, documentation, ux, management
Published: 2021-08-21 16:57:18

Lots of people will get in touch with you about improvements to your developer-oriented product or library. This feedback is great, but take it with a grain of salt, there is a much quieter group with much bigger struggles.

{% tweet 1429097365563052034 %}

The people who are getting in touch with you are the ones who aren't having the biggest problems. They understand your docs enough not to fear embarrassment of asking the wrong questions. They overcame missing context themselves, only to be able to ask questions which represent their group.

{% wikipedia https://en.wikipedia.org/wiki/Survivorship_bias %}

They did not get tripped up by implied dependency installation steps. They did not get lost due to assumptions of typical CLI behavior that you did not document. They survived to give you feedback.

> During World War II, the statistician Abraham Wald took survivorship bias into his calculations when considering how to minimize bomber losses to enemy fire. The Statistical Research Group (SRG) at Columbia University, which Wald was a part of, examined the damage done to aircraft that had returned from missions and recommended adding armor to the areas that showed the least damage, based on his reasoning. This contradicted the US military's conclusions that the most-hit areas of the plane needed additional armor. Wald noted that the military only considered the aircraft that had survived their missions; any bombers that had been shot down or otherwise lost had logically also been rendered unavailable for assessment. The bullet holes in the returning aircraft, then, represented areas where a bomber could take damage and still fly well enough to return safely to base. Thus, Wald proposed that the Navy reinforce areas where the returning aircraft were unscathed, inferring that planes hit in those areas were lost. His work is considered seminal in the then-nascent discipline of operational research.


These are the planes which came home for you. Please find a way to account for the ones which never made it.
Clipping Path Service USA | Clipping path | 1-24 Hours Delivery
Tags: clippingpath
Published: 2021-08-21 16:50:47

Who Needs Clipping Path Service
Clipping service is gaining interest every day. Many people from e-commerce businesses choose clipping path providers because it improves their products’ look, and this appearance plays an excellent role in getting more sales. Business owners want to improve their sales and for that reason look for this service which could help in improving the calibre of the images of the products.

Professional photographers also make use of this service to help to make their images possess a quality look, which gives them additional time to tend in order to other clients as well as helps them within attracting more customers. So, they always wish to give their picture editing task in order to best clipping path company.https://clipp-asia.blogspot.com/
Smooth parallax effect not responding properly
Tags: help
Published: 2021-08-21 16:37:00

Currently what I'm trying to achieve is this, where 1 image moves from left to right as the user scrolls down creating a parallax effect:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsapah0q3g78tckx91vv.png)

Normally with DOM I would use:

```
let image = document.getElementById("image");

window.addEventListener('scroll', function() {
  let value = window.scrollY;
  image.style.marginRight = value * 4 + 'px';
  image.style.marginTop = value * 1.5 + 'px';
}
```

But currently I'm trying to replicate this effect in React using setState, but the image doesn't move along with mouse scroll wheel and the layout does not seem right:

CodeSandBox: https://codesandbox.io/s/modest-hill-2wuko?file=/src/App.tsx

Code:
```
const [leftScroll,setLeftScroll] = useState(false);
const [topScroll,setTopScroll] = useState(false);
const [textScroll, setTextScroll] = useState(false);

  useEffect(function onFirstMount() {
    const changeBackground = () => {
      let value =  window.scrollY;
      console.log(window.scrollY);

      if(value>0 && value<200){
        setLeftScroll(true)
        setTopScroll(true)
        setTextScroll(true);
      }else{
        setLeftScroll(false)
        setTopScroll(false)
        setTextScroll(false);
      }
    }

    window.addEventListener('scroll', changeBackground);

    return null;
  }, []);
  return (
    <div className="background">
     <div style={{backgroundColor:"#0E2043",padding:"50px",height:"1000px",display:"flex",justifyContent:"center"}}>
      <div style={{color:"#fff",textAlign:"center",fontSize:"100px",fontFamily:"Roboto", display:"flex",justifyContent:"center"}}>Vanuatu</div>
      <img className="image"
              style={{marginRight:leftScroll ? '300px' : '0px',transition:"2s",marginTop:topScroll ? "300px" : "0px"}}
              src="https://cdn.britannica.com/87/122087-050-1C269E8D/Cover-passport.jpg"
            />
       <div
          className="text"
          style={{
            marginTop: textScroll ? "300px" : "800px",
            transition: "4s",
            marginLeft: "120px"
          }}
        >
          Minimum Investment
        </div>
    </div>
    </div>
```

So is there an easier way to do this or can I implement those DOM functions in my React project and still have a parallax like effect?
The Simple Guide To Dockerizing Spring Boot
Tags: tutorial, docker, webdev, cloud
Published: 2021-08-21 16:30:56


## Why Should I Use A Docker Container? 🤨

-  They are a great replacement for Virtual Machines.
	- Why?
		- VMs are big in size (Gigabytes) and slow to run (1-5 mins).
			- Containers on the other hand:
				- Use a shared operating system, this means you can leave behind the useless **99.9** percent VM junk.
			- They are Linux processes that are isolated from each other.
			
![enter image description here](https://www.netapp.com/media/Screen-Shot-2018-03-20-at-9.24.09-AM_tcm19-56643.png)

-  	Containers enable us to easily pack, ship, and run any application as a lightweight, portable, self-sufficient container, which can run virtually anywhere.

- Containers are easy to deploy in the cloud.

---

### Why Should I Wrap My App In A Docker Container 🤓

Well, to give our app all the benefits we've just described.

---

## How To Do It? 👀

First, create a JAR file from your application.
Given that you are using Maven, run the following command in the `pom.xml` file directory

    mvn clean package

This will create a `target` directory, in which you can find your JAR file.

Then, create a Docker image using the JAR file we've just created.
Start by creating a file named `Dockerfile` 

```docker
FROM openjdk:8  
ADD target/demo-0.0.1-SNAPSHOT.jar demo-0.0.1-SNAPSHOT.jar  
EXPOSE  8085  
ENTRYPOINT java -jar -Dspring.profiles.active=dev demo-0.0.1-SNAPSHOT.jar
```
This means ☝️

-   Using the OpenJDK’s Java 8 machine (FROM)
    
-   Add this JAR to Docker’s host and name it demo-0.0.1-SNAPSHOT.jar (ADD)
    
-   Expose this app at port **8085** (EXPOSE)
    
-   And start the application using this command (ENTRYPOINT)

---

Then build the Docker image

     docker build -t demo .
This means ☝️
- Build an image and give it the tag demo.
- Look for the `Dockerfile` in the current directory.

---

Finally, run the image.

    docker run -p 8080:8085 demo

This means ☝️
- Run the image called `demo`, and map the requests coming from the host machine on port **8080** to the Docker port **8085**.

---

## How To Send Requests To Our App Inside Docker? 🤩
Simply send the requests local host on the port we've specified **http://localhost:8080/** and they will mapped to the port **8085** inside Docker which will lead to our app.

---

## Last Words ✍️
The Docker world is a wonderful and big place, I recommend you diver deeper into it. 
Check out those great resources.
[Full YouTube Tutorial💎](https://www.youtube.com/watch?v=p28piYY_wv8)
[Dockerizing a Spring Boot Application⚓️](https://www.baeldung.com/dockerizing-spring-boot-application)

---

## Code On [GitHub💻](https://github.com/Jarjanazy/spring-boot-docker-demo)
Announcing @ngx-env/builder
Tags: angular, devops, javascript, node
Published: 2021-08-21 16:29:08

---
title: Announcing @ngx-env/builder
published: true
description: Easily inject environment variables into your Angular
tags: angular, devops, javascript, nodejs
cover_image: https://res.cloudinary.com/chihab/image/upload/v1629563299/dev.to-image_bgyxnp.png
---

Have you ever wanted to consume variables declared in your environment inside your Angular application? 

```sh
# GitHub Action command
NG_APP_GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }} ng build
```

Environment variables can be useful for:

- displaying information conditionally based on where the project is deployed
- consuming data (potentially sensitive) that lives outside of version control

## @ngx-env/builder

With `@ngx-env/builder` the environment variables will be defined for you on `process.env`, just like in Node.js applications.

For example, having an environment variable named `NG_APP_API_BASE_URL` will be exposed in your TS/JS as `process.env.NG_APP_API_BASE_URL`.

**The environment variables are embedded during the build time**.

### Add @ngx-env to your CLI project

```sh
ng add @ngx-env/builder
```

### Define Environment Variables in `.env`

```sh
NG_APP_ENABLE_ANALYTICS=false
NG_APP_VERSION=$npm_package_version
```

###  Use in TS and HTML

```ts
@Component({
  selector: "app-footer",
})
export class FooterComponent {
  version = process.env.NG_APP_VERSION;
  branch = process.env.NG_APP_BRANCH_NAME;
  token = process.env.NG_APP_GITHUB_TOKEN;
}
```

```html
<!-- Same output -->
<span> {{ 'process.env.NG_APP_BRANCH_NAME' | env }} </span>
<span> {{ 'NG_APP_BRANCH_NAME' | env }} </span>
<span> {{ branch }} </span>
```

```html
<!-- index.html -->
<head>
  <title>NgApp on %NG_APP_BRANCH_NAME%</title>
</head>
```

###  Run your CLI commands

```sh
npm start
# Command Line environment variable
NG_APP_BRANCH_NAME=`git branch --show-current` NG_APP_GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }} npm run build
```

Variables defined in `.env` file or in the command line are injected into your Angular Application.

## Links

* GitHub repository: https://github.com/chihab/ngx-env.
* Npm package: https://www.npmjs.com/package/@ngx-env/builder.
[Part 3/4] ⚛️ Senior React Coding Interview, By A Professional React Developer 👨‍💻
Tags: react, javascript, webdev, tutorial
Published: 2021-08-21 16:08:58

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

Here's part 3 of the mock React coding interview! I take the reusable table hook a bit further, showing how I'd implement a basic pagination system, and explaining some of the conscious decisions I've made in designing the system this way so far. I hope you enjoy!

{% youtube WEu7AFbFIzw %}

Happy coding!
What is a Frontend and a Backend? Basics of web development to clear your doubts
Tags: webdev, tutorial, guide, react
Published: 2021-08-21 15:54:01

So you wanna be a full stack web developer but are confused with simple topics like a Frontend or a Backend. Stick around this article, and I'll guide you on how you can start with web development.

Before we start, you may wanna join my Discord if you have any doubts or just want to hang out: [Invite Link](https://discord.gg/eBaFj2ytTU)

Let's start with Frontend. The Frontend is basically the visual content that is rendered when you open a website. The browser renders that using HTML, CSS and JavaScript.

You can make a Frontend either in fully Vanilla JavaScript, or you can use a JavaScript framework like React.js or Vue.js. Larger web applications typically use frameworks like these to make workflows easier.

You might be asking, wait a minute, how is the content dynamic in websites? Those topics are better covered in web networking, but in a nutshell, the Frontend uses network requests from your server (which is the Backend) to display dynamic data onto the website.

And this is a nice segue to the Backend, the backbone of web applications. The Backend handles everything from user authentication to handling user data.

You can make a Backend with a Backend framework like Django, Ruby on Rails, Laravel, Express.js, etc.

A Backend is deployed on a server, you can use cloud services like AWS, GCloud, DigitalOcean, Azure, etc for this.

So how does the Backend store data? A Backend interacts with a database that stores all the data. You can use databases like Postgresql, MongoDB, etc.

So, onto the final question, where do I start?

For the Frontend, you MUST learn HTML, CSS and JavaScript to build dynamic websites. And then comes the option of frameworks, you may choose any one of them, React.js and Vue.js are the most widely used ones in this industry.

For the Backend, if you have already learnt JavaScript and don't want to learn another language, I recommend you use Express.js. Otherwise if you're familiar with multiple languages or just want to learn Backend development, you may learn Django or Ruby on Rails. Those are the best options for beginners.

Hit the like and follow button if you liked this article, I'll see you in the next one.
Are you Addicted to the Internet?
Published: 2021-08-21 15:53:56

There are studies that indicate that if you stay online more than 3 hours a day, you can be considered an internet addict. But who is not connected all the time in this period of isolation caused by the pandemic?

Leading access are messaging apps and social media. The internet is so ingrained in our lives that we accept it as normal behavior to leave the phone under our pillow.

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

Internet: This wonder of the mid-twentieth century that integrated the world and changed forever the way we communicate. 

Is possible, for example, studying at a university in the United States without even worrying about a Visa, tickets flights or a place to stay.  All in the comfort of your home. 

We are more efficient: We no longer need a big and unnecessarily heavy street guide. Not even books need to take up space in our bags. And what about the space that we no longer need to occupy in our memory, such as the contact book, totally retired. 

__But when does this facility become a problem?__

The Internet can gives us pleasure, facilities and often an escape from many situations. This generates dopamine for the brain, which associates it as a good thing and constantly demands more doses. Some people prefer personal relationships online over offline.

When excessive use disrupts the user's life, as occurs with other types of addictions and compulsions, such as drugs and drinks, an alert must be turned on. There are cases in which the user avoids these family members and starts a progressive isolation.

There are books about the effect social networks has in our lives.  A small part of this subject that we can mention is social approval mechanism called LIKE.  The amount of likes you get, either in a photo or in a message, makes you believe that you are accepted and are in a certain group, something that is inherent to the human being to seek.  

On the other hand, not receive this kind of approval and using this as a happiness thermometer can lead to a dangerous depression. 

A very interesting book about this is "Ten Arguments for Deleting Your Social Media Accounts Right Now" by Jaron Lanier, considered a founder of the field of virtual reality.

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


Like any addiction, the lack of internet access can generate the same symptoms of people addicted to alcohol or cigarettes as agitation, irritability and anxiety, and may even become aggressive. 

If you spend a lot of time connected, and feel the same symptoms as above when you can't connect or even avoid places where a connection won't be possible, you should turn on an alert. 

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

It's important to say that the internet is not the villain. At this point, it differs from other drugs.  Perhaps we need to learn to deal with it by clearly defining who uses and who is being used.
Useful Shortcut Keys to Navigate Faster on Ubuntu 20.04
Published: 2021-08-21 15:53:17

---
title: Useful Shortcut Keys to Navigate Faster on Ubuntu 20.04
published: true
description: My list of useful shortcut keys that I use daily on my Ubuntu 20.04
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcw1xf0gh5dw416kr6fe.jpg
---

As programmer, we tend to forget where the mouse is because our fingers are in standby mode at the home row keys on our keyboard.

In order to navigate faster from `terminal` to `vscode` to `web browser` and even to the next `workspace`, I think I could do faster using shortcut keys.

Here is my top list of shortcut keys to navigate around my Ubuntu 20.04:

* ` Super ` - To search & start application
* ` Super + PageUp/PageDown ` - To switch between workspace
* ` Super + ArrowUp ` - Maximize Window
* ` Super + ArrowLeft ` - Move current window to the left half of my screen.
* ` Super + ArrowRight ` - Move current window to the left half of my screen.
* ` Super + ArrowDown ` - Unmaximize window (not minimize)
* ` Alt + Tab ` - Switch between multi application windows within same workspace
* `` Alt + ` `` - Switch between same application type windows
* ` Ctrl + Shift + Alt + ArrowUp/ArrowDown` - Move current window to top/bottom workspace
* ` Ctrl + Alt + < ` - Volume Down
* ` Ctrl + Alt + > ` - Volume Up
* ` Ctrl + t ` - New Tab in app like `Nautilus`, `Chrome`
* ` Ctrl + w ` - Close Tab in app like `Nautilus`, `Chrome`
* ` Shift + Ctrl + t ` - New Tab in `Gnome Terminal`
* ` Shift + Ctrl + w ` - Close Tab in `Gnome Terminal`
* ` Ctrl + PageUp/Down ` - Switch between tabs in app


**Extra keystroke:**

Sometimes when there is a lot of tabs opened on my web browser during research, I need to open the latest tab in new window. But there isn't shortcut for this on Chrome. So I have to:
 1. Highlight the address - ` Ctrl + L ` or `F6`
 2. Copy the address - ` Ctrl + C `
 3. Open new window - ` Ctrl + N `
 4. Paste the address and go - ` Ctrl + V ` and ` Enter `
 5. Switch to previous window - ` Alt + Tab `
 6. Close the moved tab - ` Ctrl - w ` 

My actual list is longer. I couldn't type it all right now. But I will just publish this anyway and add more later when I have time.
What to keep in mind while describing Architecture?
Tags: architecture
Published: 2021-08-21 15:50:48

We need to describe Architecture on different occasions, be it requirement engineering, development or acquisition. As an architect we need to have empathy for the target audience. We need to make sure that our audience gets interest in the topic and easily understand the topic throughout. Often we can directly interact with our audience and the only form of interaction is through documentation.

 

To make your Architecture document understandable you need to explain the big picture, define the terms and vocabulary used etc. It's a good practice to provide an introduction of the whole system first before jumping into the specific parts of the software that you want to describe in detail. That's why, how you structure information in your document also plays a big role in understanding the Architecture document. The system structure is quite different from a software structure. system structure defines how the software runs and where and how its fully or part by part deployed. software structure on the other hand shows how its developed using different projects and modules. Also you need to describe the system the software automates. This is completely different from the system/software structure. For example if the software automates a coffee vending machine or a banking system, you first need to explain how in principle the coffee vending machine works or the banking system works in general. 

Here are few points to keep in mind
* Determine target audience
* Define Goal and scope of the document
* Gather information
* Use of proper Structuring, Formatting, Writing and Tools
* Use of Models or Diagrams
* Reviews

To read details on each point read the post [what to keep in mind while describing architecture](https://www.cloudnativemaster.com/post/what-to-keep-in-mind-while-describing-architecture)
Conheça o GitFichas!
Tags: git
Published: 2021-12-24 23:32:36

---
title: Conheça o GitFichas!
published: true
date: 2021-08-21 15:44:33 UTC
tags: git
canonical_url: https://jtemporal.com/conheca-o-gitfichas/
---

Eu comecei um novo projeto, e decidi vir aqui te contar tudo sobre ele! 👀

Há algum tempo eu tenho ajudado qualquer pessoa que precise de ajuda com Git. Pelo que tenho visto, a maioria das pessoas usa os comandos git diariamente sem necessariamente entendê-los…

Isso não é um problema, principalmente se você está começando a sua jornada com versionamento, no entanto, não entender os comandos pode te levar a enrascadas com o Git (conflitos eu estou olhando pra vocês). E por mais que o Git nos ajude no processo de desenvolvimento a rastrear alterações, conflitos e _detached heads_ são coisas chatas de resolver, principalmente se você não entende o que precisa fazer não é mesmo?

Com o objetivo de melhorar a vida de quem usa Git, eu comecei o [GitFichas](https://gitfichas.com/). O GitFichas nada mais é do que um site que agrega fichas de estudo sobre Git, tudo em bom português e da forma mais simples possível para que qualquer pessoa possa entender melhor cada comando ou conceito.

[![GitFicha explicando como adicionar interativamente partes de alterações em commits com o comando git add -p](https://gitfichas.com/assets/img/projects/008/thumbnail.jpg)](https://gitfichas.com/projects/008?utm_source=blog)

<center>
<i>GitFicha número 008 falando sobre o git add -p</i>
</center>

As fichas são imagens que explicam comandos ou conceitos que eu uso diariamente no Git e ainda trás dicas pouco conhecidas ou utilizadas, mas que quando bem aplicadas são uma mão na roda.

Toda semana saem duas fichas novas, uma na segunda-feira e outra na quarta-feira.

Eu publico as fichas no meu perfil no [Twitter](http://twitter.com/jesstemporal) e no [LinkedIn](https://www.linkedin.com/in/jessicatemporal/), mas você pode aproveitar e seguir o [GitFichas no Instagram](https://instagram.com/gitfichas) ou se inscrever no canal do [GitFichas no Telegram](https://t.me/gitfichas).

E se você quiser sugerir um comando ou conceito para ver no formato de ficha, deixa o seu comentário ali em baixo ou responde esse tweet aqui 👇

<center>
<br>
<blockquote>
<p lang="pt" dir="ltr">Perguntando pro meu TCC: Que comando <a href="https://twitter.com/hashtag/git?src=hash&amp;ref_src=twsrc%5Etfw">#git</a> você tem dificuldade mesmo rodando ele com frequência?</p>— Jessica Temporal (@jesstemporal) <a href="https://twitter.com/jesstemporal/status/1419992266828091408?ref_src=twsrc%5Etfw">July 27, 2021</a>
</blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</center>

Eu to colocando os comandos que me mandam na fila para fazer fichas 😉