teleren/devto huggingface dataset:
Here we go again
Tags: 100daysofcode, webdev, html, womenintech
Published: 2020-07-31 00:30:47

Olá, meu nome é Sarah e junto com uns amigos eu estou de volta aos 100 dias de código. 
Sou uma estudante de desenvolvimento de jogos (quase formada) apaixonada por web e que gosta e faz muita coisa relacionada a arte também. Dentro do desafio de 100 dias de código , juntando com o cenário atual eu achei com uns amigos que seria um bom momento pra nós darmos as mãos e nos ajudarmos a estudar hahaha.
Embora cada um de nós esteja estudando linguagens e partes de desenvolvimento diferentes, saber que não estamos sozinhos sempre ajuda. Eu começo o meu Dev.To  com o intuito de fazer um acompanhamento mais detalhado do meu progresso e postar minhas opiniões relacionadas a coisas diversas voltadas a área de tecnologia.

Dia 001

Meu intuito e propósito dentro destes 100 dias de código é desenvolver pequenos projetos que me deem confiança para continuar na minha área de interesse e também me ajudem a montar um pequeno portfólio do qual eu consiga me orgulhar.

Hoje comecei estudando o básico de HTML pois estava usando a  Free Code Camp como minha principal plataforma de base para estudos, também porque meu primeiro projeto focal é fazer um site pessoal. Ver tudo por escrito estava sendo bastante massivo pra mim, mesmo com o site sendo interativo e usando a metodologia dos pomodoros. Acabei optando por ver se algum dos cursos da udemy que eu possua poderia me ajudar e achei um que parecia ser bem útil. 

Hoje o estudo foi basicamente uma revisão de conceitos que eu já conhecia dentro de html e como usá-los. Foi bom ter começado os estudos assim porque o simples fato de um botão que referência dentro da própria página já foi um conceito que eu havia esquecido como aplicar e me demorou um pouco mais de tempo do que o necessário para recordar. Além disso também houveram conceitos gerais sobre, html, backend, fronted e afins. 

Sinto que estou bem enferrujada e acabei ignorando muita coisa por muito tempo justamente por já ter feito várias vezes e agora vejo a necessidade de realmente mater a prática.  

A parte boa e que me deixa feliz é perceber que mesmo com o "ferrugem" encrustado no meu ser, tudo me pareceu bem tranquilo e possível. Então sabendo que por mais que sejam passos pequenos e pouco tempo diário de estudo é legal perceber que, evoluir é possível e alcançável. Então daqui pra frente, vai ser só uma questão de paciência.

Quem quiser me acompanhar, será muito bem vindx! haha :)
Z-index in CSS explained
Tags: zindex, html, css, webdev
Published: 2020-07-31 00:09:23

Z-index is a complex css property for beginners and gets confusing when used on many elements. 

Let's demonstrate how it works and explain the reasons why sometimes you can't get it to work properly.

The Z-index property is based on priorities and works like a stack of books on a desk. 

If we have many books on a desk and none of them are stacked on another then we can see all the books from a bird's eye view. 
But what happens if we place a book on top of another? This newly added book will hide the one underneath it, naturally. 

In real life we can't do anything to fix that except place them in bookcases, but in web design with CSS we can define which book in a stack we want to be visible.

The values of z-index range from -2147483647 to 2147483647 (basicallt -infinity to infinity). 
The higher the number the higher priority it has to be displayed over another element with lower priority. 

For example: a div with z-index of 10 will be shown above a div with z-index of 5. That much, we all know. But here are 2 examples where it gets complicated.

Say we have div1 with z-index of 100 and div2 with z-index 50. Each div has a p tag inside it, the div1 p has a z-index of 200 and the div2 p has a z-index of 100. 
Now say we place these two divs, div1 and div2 at the same place on a web page, which p tag will be displayed on top? 
Its not the div p with the higher z-index! 
Why? 
Because div1 has a higher z-index than the z-index of div2. And priorities always go back to the parent element. 

The other complication is when we don't specify a position to an element, the z-index will simply not work! 
Z-index needs a position, any position value, for z-index to work. 

Whenever your z-index is not displaying properly, most of the time its either because you have not specified a position or that another parent element has a higher z-index than the element you are trying to use z-index on.

I hope this clears things up on this elusive CSS property!
What is [[Prototype]] in JavaScript?
Tags: javascript
Published: 2020-07-31 00:00:00

---
  title: What is [[Prototype]] in JavaScript?
  published: true
  tags: JavaScript
  date: Fri Jul 31 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/prototype-in-objects-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-0465a8597e7c0c21a0b22f7b2fa77716.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/prototype-in-objects-javascript)
  
Most of the time when programming in JavaScript we may want to extend or inherit the properties and methods of another object to one object.

This is done using prototypal inheritance in JavaScript.

Let me explain, suppose you have two objects `user` and `admin`

```javascript
// admin object
let admin = {
  userlevel: "admin",
  shutdownSystem: () => {
    console.log("Shutting down system");
  },
};

// a user object
let user = {
  name: "John Doe",
};
```

How do we make our `user` object get or inherit the methods and properties of the `admin` object?

We can do this using a property called `__proto__`.

```javascript
// admin object
let admin = {
  userlevel: "admin",
  shutdownSystem: () => {
    console.log("Shutting down system");
  },
};

// a user object
// inherit properties and method using the __proto__ property
let user = {
  name: "John Doe",
  __proto__: admin,
};
```

Now try to get the properties or invoke the methods in the `admin` object using the `user` object.

```javascript
// admin object
let admin = {
  userlevel: "admin",
  shutdownSystem: () => {
    console.log("Shutting down system");
  },
};

// a user object
// inherit properties and method using the __proto__ setter property
let user = {
  name: "John Doe",
  __proto__: admin,
};

// accessing userlevel property of admin object from user object
console.log(user.userlevel); // ==> admin

// invoke or call shutdownSystem() method of admin object from user object
user.shutdownSystem(); // ==> Shutting down system
```

As you can see we have successfully inherited all the properties and methods of `admin` object to the `user` object using the `__proto__` property.

The `__proto__` is a setter and a getter for the `[[Prototype]]` hidden property. See this to understand what [setter and getter properties](https://melvingeorge.me/blog/getters-and-setters-javascript) are.

The `[[Prototype]]` is a hidden and internal property of every object. It can be of value `null` or references to other objects. When we set the `__proto__` value to another object, we are setting the value for `[[Prototype]]` hidden property.

When there is no function or method defined in the object we are calling it. The JavaScript looks for these methods and properties through this `[[Prototype]]` hidden property internally.

### Feel free to share if you found this useful 😃.

---
Syntax Takeaways
Tags: javascript, react, hooks
Published: 2020-07-30 23:26:04

`React` is a very dynamic environment, it is changing, updating and developing quite rapidly and hooks are the latest and a very significant implementation into React logic. You cannot say that hooks made classes, render props, aka previous way of doing things, obsolete, however hooks makes using React way simpler and more intuitive.The developers made possible for hooks to be opted-in so you don't have to rewrite your code completely. Before, render props there were mix-ins and they were removed.
Hooks are solving the problem of adding state to the stateless functional component. If you created a stateless functional component but then at some point you would have to add state to that component you would  have to turn it into class component and it can be very difficult. 
Hooks are made to inject functionality into "dumb" components. Hooks can be created by developers and implemented for specific problems along the way,there are some very popular like: `Context hooks`, `Effect hooks`, `Reducer hooks` and `Ref hooks`  however, the most usable hook right now is `State hooks` - `useState`.

*State Hooks*
`useState` is a replacement of a `SetState` component in a class syntax. Before executing a `return`, `useState` declares a 'state' variable, that way we can 'save' some values, between invocations. It is a way substitute `this.state` functions. `useState` returns a couple of values: present state and a function that refreshing the state.

*Effect Hooks*
`useEffect` hook allows you to access the data inside the component. Effect hooks can be used as a substitute to the lifecycle methods like: "Component Did Mount", "Component did Update" and "Component will Unmount".  What it does is, when you have an "unpure" function and you don't have a React component, 
you do have to write code for those components. Effect hook solves this problem. Also, previously you had to pass logic into each component and it could lead to potential difficulties, however now, you can build a special hook to store that logic.

 *Reducer Hooks*
`useReducer` hook is a less used, however it allows functional components in React access to reducer functions from your state management. Reducer is a function that takes in the current state,as well as a specified action. Inside of your reducer function you can store multiple use cases. According to the use case you can access specific data return an updated state.
[Tutorial Linux] Terminal: Limpando a tela
Tags: linux, terminal, clear, braziliandevs
Published: 2020-07-30 23:08:06

É bem comum de acontecer do terminal ficar cheio de comandos, enquanto estamos usando-o. Caso precise limpar a tela, como se você tivesse acabado de abrir um terminal novo, basta digitar o comando

```
$ clear
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.

Ou ainda, usar o atalho **Ctrl + L**.

![limpando tela terminal](https://dev-to-uploads.s3.amazonaws.com/i/d2q7fzkggkfsmsng9rx5.gif)
Compress images in React: React Image File Resize
Tags: react, compression
Published: 2020-07-30 22:58:47


Okay for this one I highly recommend, the speeds is just amazing. I loved it. I am gonna do a comparison real quick, between `browser-image-compression` and `react-image-file-resizer`.

| `browser-image-compression`               | `react-image-file-resizer`                       |
| ----------------------------------------- | ------------------------------------------------ |
| Really fast                               | Compressed the same took a while                 |
| Quality option on the config              | Only offers size limit                           |
| Return `base64` or `Blob`                 | Returns `Blob` only do the conversion yourself   |
| No need to handle Promise                 | Must handle Promise                              |
| Specify compress format (png, webp, jpeg) | The compress format provided is the one returned |

Below is an image I was able to compress with the following config

```text
width -> 480px
height -> 480px
file format -> Set to JPEG
quality -> 50
rotation -> 0
```

### Actual size: 1.6mb

[<span style="color: blue">(Click here)</span>](https://res.cloudinary.com/duoxba7n1/image/upload/v1596140171/actual.jpg)
Click on the link its a huge image and I just want the load time for this blog to be faster.

### Compressed size: 16.3kb

![](https://blog.bywachira.com/post_images/compressed.jpeg)

Let's jump into how you can plug it into your React app

## React Image File Resizer

1. Install the package

   ```bash
   yarn add react-image-file-resizer
   ```

2. Create your react component

   ```javascript
   import React from "react";

   // ...

   class App extends React {
     // ...
     render() {
       return (
         <div className="App">
           // ...
           <h3>React Image File Resizer</h3>
           <br />
           <input
             type="file"
             id="file"
             accept="image/*"
             onChange={this.onFileResize}
           />
         </div>
       );
     }
   }
   ```

3. Start compressing

   ```javascript
   ...
   import Compress from "react-image-file-resizer";

   ...
   onFileResize = e => {
       const file = e.target.files[0];

   Compress.imageFileResizer(
     file, // the file from input
     480, // width
     480, // height
     "JPEG", // compress format WEBP, JPEG, PNG
     70, // quality
     0, // rotation
     (uri) => {
       console.log(uri);
       // You upload logic goes here
     },
     "base64" // blob or base64 default base64
   );
   }
   ```

Again I highly recommend this library especially because it supports compressing to `WEBP`(files of this format are really fast).

> **Note**: Set quality to 100 if you want to compress to PNG/WEBP(Lossless) else set the compress format to JPEG(Lossy)

## Next

We will cover understanding **Lossy** and **Lossless** compression.
Compress images in React: Browser Image Compression Libary
Tags: react, compression
Published: 2020-07-30 22:57:34


I recently got interested in compressing images on the client-side for a couple of reasons:

- Reduce my cloudinary bandwidth and storage usage
- Users were complaining about long waits while uploading images

So I ventured to look for a library that will help me solve this fast and easy, maybe in the future I might build my own from scratch.

So I came by a couple of libraries that will help in compressing images on the client-side.

# Browser Image Compression

1. Install it with your favorite package manager

   ```bash
   npm install browser-image-compression --save
   ```

   or

   ```bash
   yarn add browser-image-compression
   ```

2. Create your react component

   ```javascript
   import React from "react";

   class App extends React.Component {
     onChange = async (e) => {
       // Some onchange event calls
     };

     render() {
       return (
         <input name="file" id="file" onChange={this.onChange} type="files" />
       );
     }
   }
   ```

3. Start compressing

   ```javascript
   ...
   import Compress from "browser-image-compression";

   ...
   onChange = (e) => {
       // Get the files selected from the input tag
       // On select files always come in an array even
       // if you choose one its the first index
       // if you selected a couple then loop through the array
       const file = e.target.files[0]

       // Compression config
       const options = {
           // As the key specify the maximum size
           // Leave blank for infinity
           maxSizeMB: 1.5,
           // Use webworker for faster compression with
           // the help of threads
           useWebWorker: true
       }

       // Initialize compression
       // First argument is the file object from the input
       // Second argument is the options object with the
       // config
       Compress(file, options)
           .then(compressedBlob => {
               // Compressed file is of Blob type
               // You can drop off here if you want to work with a Blob file
               console.log(compressedBlob)

               // If you want to work with the File
               // Let's convert it here, by adding a couple of attributes
               compressedBlob.lastModifiedDate = new Date()

               // Conver the blob to file
               const convertedBlobFile = new File([compressedBlob], file.name, { type: file.type, lastModified: Date.now()})

               // Here you are free to call any method you are gonna use to upload your file example uploadToCloudinaryUsingPreset(convertedBlobFile)
           })
           .catch(e => {
               // Show the user a toast message or notification that something went wrong while compressing file
           })
   }
   ```

# Next

Next, we will cover using `react-image-file-resizer` library
Attaching Visual Effects
Published: 2020-07-30 22:54:58

I had the task to implement the particle effects system for my team's game project. Initially, the particle effects were relatively simple to create but was difficult to put into our game's engine. The particle system's renderer was separated from the engine's renderer, but it needed the ID3D11Device and ID3D11DeviceContext to render properly. The particle system needed access to those, so I had to put it in the engine. After putting it in the engine, I realized that the gameplay side needed to trigger the particles.

The way to fix this was pretty simple. It involved a way to activate the particles indirectly from the gameplay side. Our team chose to do this by using an event system that triggered the particles with an event. The event system turned out not to be a cure-all for the problems with the particles. The other things that needed to be corrected were the positions of the particle emitters and the current camera position. The positions were added to the event system's parameters and the camera position was updated and added to the particles every frame. With those fixes, we were able to attach particles to anything in the game that we wanted.

Taylor Addington
Character Death
Published: 2020-07-30 22:53:59

Player death was at first a simple thing to implement. I then had to make the character's death animation play before the failure screen. That's when the issues started to become a problem. The failure screen popped up as soon as the death animation was started. So I had to find a way for the character's death animation to play before the failure screen appeared on the screen.

I thought of a pretty basic way to check if the player was dead or alive. In the character class, I added a bool called isAlive. In the character class, I added a secondary death function to play the animation before the player's death was triggered. After I added the secondary function and all the checks that were necessary to tell if the player was alive or not, I got the death animation to play before the failure screen showed up.

Taylor Addington
Jittery Movement
Published: 2020-07-30 22:53:04

I noticed that sometimes when the character in our game moved they would suddenly turn 90 degrees left or right and turn back immediately which created a jittery movement bug.  After a while, I noticed that it only happened when I went perfectly straight. After that, I noticed that the jittery movement did not happen when going straight but also the camera had to be in its default position. This took a while to test but eventually, I was able to figure out what the problem was.

The problem was that when the character was moving their transform would be rotated according to their movement direction and the camera's position. When moving straight the character's direction was 0 and the camera's position rotation was 90 degrees so it would rotate the character by those 90 degrees. I put in a check to see if the player is moving straight and if the camera is in its default position. With that fix in place, the jittery movement bug was gone.

Taylor Addington
JFrog Xray & Microsoft Teams
Tags: jfrog, msteam, security, devsecops
Published: 2020-07-30 22:50:09

<h1>JFrog Xray & Microsoft Teams</h1>
<p>More than ever we need to be made aware when security issues arise. JFrog Xray is a great product that brings operational awareness to your software development lifecycle combined together with Microsoft Teams we have the channel of communication we need to ensure our team is always on top of the latest security concerns.</p>
<h3>Getting Started</h3>
<p>Let's get started by opening up Microsoft Teams. We will need to make a new connector on the channel we want to deliver our messages into. Click on the more options "..." icon to bring up the menu of options for a channel. Select "Connector app" to bring up the popup.<p>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/okftblpbi341udgn34x2.png"/>
<p>Inside of the Connector popup search for "Incoming Webhooks" and click the "Add" button which will then bring you to the Configure screen shown below.</p>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/1e36bqvyn5bgqby1gn1a.png"/>
<p>Enter the name "Xray Webhook" and <a href="https://github.com/jfrog/xray_msteam/raw/master/images/xray.png">download</a> and save the Xray image to upload into the new webhook.</p>
<p>Scroll down in the popup after adding the webhook to grab the URL for the incoming webhook</p>
<h3>Deploy the integration server</h3>
<p>Download the Github repo <a href="https://github.com/jfrog/xray_msteam">here</a></p>
<p>Build the code using Golang</p>
<code>go build</code>
<p>Export environment variable MICROSOFT_TEAM_WEBHOOK with the URL of the incoming webhook</p>
<code>export MICROSOFT_TEAM_WEBHOOK=http://the-incoming-webhook-url</code>
<p>Run the integration server<p>
<code>./xray_msteam</code>
<p>Grab the hostname/ip address of the machine running the integration server we will use this to supply to Xray webhook in the below format</p>
<code>http://ip/host:8080/api/send</code>
This is the endpoint to send the messages from Xray. Last stop let's configure Xray to send the outgoing webhook.
<h3>Xray Outgoing Webhook</h3>
<p>As an admin user, open up JFrog Unified Platform and goto the administration setting shown below for Xray</p>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/b6shza7wzkz78x76cdga.png"/>
<p>Click on Webhooks and click on + New Webhook to open the new webhook screen. In this screen give a name and supply the URL of the integration server. Save the new webhook.</p>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/eofe5i0j35sb1djfknvi.png"/>
<p>The next step is to add the new webhook to an Xray policy as a new rule. This is what will trigger the webhook when new violations are found in a watch associated to this policy.  Click on Policies and create a new policy or update an existing one to add a new rule using the webhook as shown below.</p>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/466suhr46zl7nk23qnvx.png"/>
<h3>That's it! Your done!</h3>
<p>Congrats begin to watch the messages flow...</p>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/cyh9spn9xfiroe55fgyh.png"/>
Using Dropbox or Google Drive for Git repositories
Tags: git, dropbox
Published: 2020-07-30 22:46:57

When Git projects are considered too private to be pushed to GitHub or GitLab and you don't mind about missing the features there, then you could utilize your Dropbox or Google Drive as a Git repository.

## Example
Following is an example with Dropbox on Ubuntu-Mate:

1. Dedicate a directory in Dropbox for Git:
```bash
you@your-pc:~$ cd Dropbox
you@your-pc:~/Dropbox$ mkdir git
```
2. Initialize your repository, at best with the same name with your project:
```bash
you@your-pc:~/Dropbox$ cd git
you@your-pc:~/Dropbox/git$ git init --bare your-project.git
```
3. If your project is not yet initialized as a Git project:
```bash
you@your-pc:~$ cd your-project
you@your-pc:~/your-project$ git init .
```
4. Connect your project with the Git repository in Dropbox:
```bash
you@your-pc:~/your-project$ git remote add origin ~/Dropbox/git/your-project.git
```
5. Commit your project for the first time and push to the repo. Start your Dropbox. You're done.
```bash
you@your-pc:~/your-project$ git add .
you@your-pc:~/your-project$ git commit -m "First commit." -m "From Dropbox."
you@your-pc:~/your-project$ git push -u origin master
you@your-pc:~/your-project$ caja-dropbox start
```