teleren/devto huggingface dataset:
How to build a dynamically resizable textarea?
Tags: react, javascript, css, html
Published: 2022-05-21 22:33:31

Making a `textarea` dynamically resizable is fundamental to delivering a good UX on a text editor, a comment area or a get in a contact section. However, all the solutions available are too complex, require installing another dependency or need workarounds that are not a11y compliant.

In this post I'll show you a quick and simple solution for this problem using React, but you can apply it anywhere else. 

### Allright, show me the code then:
```css
textarea {
  width: 500px;
  min-height: 100px;
  padding: 8px;
  font-size: 18px;
  resize: none;
  border: solid 1px;
  border-radius: 4px;
  outline: none;
}
```

```jsx
const ref = useRef<HTMLTextAreaElement>(null);

const handleInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
  if (ref.current) {
    ref.current.style.height = "auto";
    ref.current.style.height = `${e.target.scrollHeight - 16}px`;
  }
};

return (
  <div className="App">
    <section>
      <textarea
        ref={ref}
        rows={1}
        placeholder="Enter text here..."
        onInput={handleInput}
      />
    </section>
  </div>
);
```
### Explanation
I want to call your attention to some key points. Notice we're setting the height to `auto` before setting it to `scrollHeight-16`. Forget the `-16` for now, I'll talk about it later. Let's just leave the line below to explain how it works.
```jsx
const handleInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
  if (ref.current) {
    ref.current.style.height = `${e.target.scrollHeight}px`;
  }
};
```
What happens is that on every keypress, the textarea will increase it's height. If you notice you'll see that the height is increasing by 16px on every keypres. That happens because the **scrollHeight include padding**. To exemplify, let's say the height of the textarea is 40px initially, then what happens on each keypres is this:
```
i) height = x+16
ii) height = x+16+16
iii) height = x+16+16+16
...
```
That's why I subtracted the 16, because it's the sum of `padding-top + padding-bottom` and I don't to count it over again.

So by now the height should be resizing correctly when the size is increasing but if you delete a line you'll see that the height don't go shorter. To fix that, I set the height to `auto` before and it will do the job for us.

Also notice that I added the `row={1}`. That's because I don't want to have an empty line below the last line. Try to remove it to see how it will add extra space at the bottom of the textarea.

That's it, hope it helps. Thanks.

### Sandbox
https://codesandbox.io/s/dynamically-resizable-textarea-9jbs1y

### References:
i) https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas
ii) https://www.npmjs.com/package/autosize
How to clone a Django project from Github and run it locally (MAC IOS).
Tags: django, python, github, beginners
Published: 2022-05-21 22:19:15

This is a quick guide on how to clone/fork a django project from github.

### Requirements
- You will need to have a version of [python 3](https://www.python.org/downloads/) installed.

check this by using the following command
```bash
python3 --version
```

### Installation

First let's clone the git repo, click on the code and copy the url. Heres an example of where to find that url:

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0iltcsnpwiyb43vzmt7e.png)

Then open your terminal and navigate to the directory you wish to store the project and run the following commands:

```
git clone https://github.com/REPONAME.git
```
(replace the url your own url)

Once you've cloned the repository, navigate into the repository. 

Create a virtual environment and activate it using the following commands:

```bash
python3 -m venv venv
source venv/bin/activate
```

Once you've activated your virtual environment install your python packages by running:
```
pip install -r requirements.txt
```

Now let's migrate our django project:
```
python manage.py migrate
```

If there are no hitches here you should now be able to open your server by running: 
```
python manage.py runserver
```
Quick and painless. If there are any issues or problems, leave a comment below!
FlatIron Journey: The Beginning
Tags: javascript, html, css, flatiron
Published: 2022-05-21 21:19:58

Growing up adults seemed almost obligated to ask the question, "what do you want to be when you grow up?" I have never really known what I wanted to do. Or maybe the issue was that I wanted to do everything. My answer was always changing, it went from dentist to astrophysicist to teacher to doctor to...you get the idea. Before I even started college my major switched 4 times, and when I began, I settled for wanting to go to medical school.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78o0d15mkktwl9p87shn.png)
 
It was the choice the majority of my family made so it became my career choice by default. However, by my senior of college, my complete lack of interest in the medical field made is abundantly clear that it was not correct path for me. I did a lot of soul searching and finally found a path that made sense for me. That path was software development and computer science. I got about 2 years into my new degree and my eagerness to start a career became more apparent. So, I began to do more research and that is where FlatIron comes in. The concept of bootcamps was new to me and I did not know much about it. However, the more research I did, the more I could see this was the right choice for me.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vm5922tykmg9nk6dn8ee.jpeg)
I am currently about 4 weeks into the Software Engineering Flex Program. I have added JavaScript, HTML, CSS and so many other skills to my skillset in just this short amount of time, and I cannot wait to learn even more throughout this course.
How to Calculate the Leaders in an Array
Tags: java, arrays, algorithms
Published: 2022-05-21 21:06:40

Leaders in an array are those elements that are greater than the elements on their right-hand side in the array. This is by default true for the last element as the array end at that element and we can’t compare it with anyone.

**Difficulty Level** — Easy

**Asked in** — Microsoft and Adobe.

Let’s see an example to understand it better.

## Example
Int[] arr = [16, 17, 4, 3, 5, 2]

Solution –

i=0 -> 16<17

**16 is not a leader**

i=1 -> 17>4, 17>3, 17>5, 17>2

**17 is a leader**

i=2 -> 4>3, 4<5

**4 is not a leader**

i=3 -> 3<5

**3 is not a leader**

i=4 -> 5>2

**5 is a leader**

i=5 -> 2 — **end of the array which makes it a leader as well**

Thus the leaders of the array [16, 17, 4, 3, 5, 2] are 17, 5, 2.

## Observations
1. The last element of the array is the leader by default
2. The same goes for the largest element of the array
3. Ordering doesn’t matter

## How to solve it
There are two possible methods of solving it — the brute force approach and max from the right. The brute force approach will give us a time complexity of O(n2) while the other one will give us a time complexity of O(n) — an efficient approach.

In this blog, we will use and understand both of these methods to solve this question.

## Approach — I — Brute Force
As the question said, we have to find the element greater than all the elements on its right-hand side. So the brute force should be to check for all the elements if there exists an element greater than the chosen element in the array specifically on the right-hand side.

The first thing that came to mind is to use a double loop system (nested) in which the outer loop will take an element and compare it with the other elements of the array using the second or the inner loop.

Below is the Pseudo Code and the actual code for the above-discussed approach.

[Continue Reading](https://tekolio.com/how-to-calculate-the-leaders-in-an-array/).
Day 43: Bye Material UI!
Published: 2022-05-21 20:48:08

Hi!
Last week I saw a project of a friend of mine that used Material UI with React and I thought it was so cool and fast so I decided to use it in my current personal project, I planned to use Tailwind CSS before, and I changed to Material UI until today after spending a whole day learning about to see that it's not suitable with this current project. I hated the fact that I had to import a lot of stuff just to do a simple thing and some of the components looked too generic for me that I may need CSS to customize them anyway. I will not use it for this project but maybe something in the future as it's not a bad framework per se.
So tomorrow I will be back to Tailwind probably write an article about setting up Tailwind CSS in a react project. so we'll see
Today I had to sleep earlier as it's a weekend :)

signing off...
Learning Golang - day 1
Tags: go, beginners, programming
Published: 2022-05-21 20:35:46

I just decided to start learning Go again. I was learning it a bit last autumn, but then I had a very rough time in my personal life and also decided to start looking for a frontend job with vanilla JavaScript. I got a job where I can learn on the job anything I need for it. So in my free time, after work, I want to focus on something a bit different. 

My plan is to learn a bit each day and preferably take some notes. I have quite a lot of materials - books, and online courses. I also read a lot good about Go documentation and tutorial in the docs. In order not to struggle with analysis paralysis, I want to use one resource at a time starting from Head First Go. 

Things I learned today:

## 1. Main structure of a file in Go:

```go
package main
// the name of the package -  we call the function the same

import (
	"fmt"
	"reflect"
)

// Here we import other packages we are going to use in our code.


func main() {
	fmt.Println("Hello, Go!")
	fmt.Println(reflect.TypeOf("Hello, Go!"))
}

// Then goes the function with its body between moustache brackets.
```

## 2. Go is a strictly typed language. 
It means that when we are creating a variable we should declare its type (string, boolean, int, float64 and so on) and while we can change the value of the variable, we can't change its type later on in the program. 

## 3. There are at least 3 ways of declaring variables: 
 **- we can declare a variable without assigning any value to it**

```go
var name string;
var age int;
var price float64;
```
This way, the value of each variable is 0 (for strings 0 means an empty string, for boolean it's false)

 **- when we declare a variable and assign a value, we don't have to declare the type because Go recognizes the type from the value**

```go
var city = "Warsaw"
var length = 3.5
```
Now, it knows that city is a string and length is a float64

**- while declaring the variable with its value, we can use a shorter declaration form**

```go
quantity := 4
fruit := "apple"
```

## 4. We can convert types. 
If we want to make mathematical calculations we can't add an integer to a float number in Go. We need to convert an integer into a float number. We can also convert a float number into an integer but it can change its value. 

```go
allApples := 3
eatenApples := 0.5
applesLeft := float64(allApples) - eatenApples
fmt.Println(applesLeft)
```

## 5. If we declare a variable, we need to use it.
Otherwise, we will have an error. The same imported but unused packages. 

## 6. Variables and functions usually start with a lowercase. 
But if we want to make it possible to use our package in another program and make some of the variables available there, we need to start them from an uppercase.

So far I've been using "fmt" package for printing the output of my code and it was possible thanks to the Println method. 

It's been mostly the repetition of what I learned in the autumn. But I think it's a good start.
Container Security Automation on AWS
Tags: trendmicro, aws, security, cloudnative
Published: 2022-05-21 20:18:09

Trend Micro 𝘾𝙡𝙤𝙪𝙙 𝙊𝙣𝙚:
(1) is a 𝙨𝙚𝙘𝙪𝙧𝙞𝙩𝙮 𝙨𝙚𝙧𝙫𝙞𝙘𝙚𝙨 𝙥𝙡𝙖𝙩𝙛𝙤𝙧𝙢 for cloud builders that enables Amazon Web Services (AWS) customers to secure cloud workloads with clarity and simplicity. 
(2) 📦 is purpose-built 𝙨𝙚𝙘𝙪𝙧𝙞𝙩𝙮 𝙛𝙤𝙧 𝙘𝙡𝙤𝙪𝙙-𝙣𝙖𝙩𝙞𝙫𝙚 applications.
(3) ➡️ uncovers 𝙞𝙣𝙙𝙞𝙘𝙖𝙩𝙤𝙧𝙨 of:
      - 𝙘𝙤𝙢𝙥𝙧𝙤𝙢𝙞𝙨𝙚 (𝙄𝙤𝘾) and 
      - 𝙖𝙩𝙩𝙖𝙘𝙠 (𝙄𝙤𝘼). 
(4) ⌖ can 𝙙𝙚𝙩𝙚𝙘𝙩 𝙘𝙡𝙤𝙪𝙙 𝙬𝙤𝙧𝙠𝙡𝙤𝙖𝙙 and 𝙘𝙤𝙣𝙩𝙖𝙞𝙣𝙚𝙧 𝙥𝙡𝙖𝙩𝙛𝙤𝙧𝙢 𝙖𝙩𝙩𝙖𝙘𝙠𝙨 with detailed 𝙧𝙤𝙤𝙩 𝙘𝙖𝙪𝙨𝙚 𝙖𝙣𝙖𝙡𝙮𝙨𝙞𝙨.
(5) 🧑🏻‍💻 integrates with various 𝙙𝙚𝙫𝙚𝙡𝙤𝙥𝙚𝙧 𝙩𝙤𝙤𝙡𝙨, like 
- continuous-integration/continuous delivery (𝘾𝙄/𝘾𝘿) 𝙥𝙞𝙥𝙚𝙡𝙞𝙣𝙚, 
- integrated development environments (𝙄𝘿𝙀𝙨), and 
- 𝙘𝙤𝙙𝙚 𝙧𝙚𝙥𝙤𝙨𝙞𝙩𝙤𝙧𝙞𝙚𝙨 
to provide 𝙛𝙖𝙨𝙩𝙚𝙧 𝙛𝙚𝙚𝙙𝙗𝙖𝙘𝙠—helping 𝙢𝙞𝙩𝙞𝙜𝙖𝙩𝙚 𝙧𝙞𝙨𝙠 𝙖𝙩 𝙩𝙝𝙚 𝙚𝙖𝙧𝙡𝙮 𝙙𝙚𝙫𝙚𝙡𝙤𝙥𝙢𝙚𝙣𝙩 𝙨𝙩𝙖𝙜𝙚.

Thanks to Nikhil Anand and Amith Singh S for their post which helps to understand how the Trend Micro 𝙊𝙣𝙚𝘾𝙡𝙤𝙪𝙙 𝘾𝙤𝙣𝙩𝙖𝙞𝙣𝙚𝙧 𝙎𝙚𝙘𝙪𝙧𝙞𝙩𝙮 solution can help in securing the workloads across the four different phases of the 𝙙𝙚𝙥𝙡𝙤𝙮𝙢𝙚𝙣𝙩 𝙡𝙞𝙛𝙚𝙘𝙮𝙘𝙡𝙚: 
(1) 𝙗𝙪𝙞𝙡𝙙 stage, 
(2) 𝙙𝙚𝙥𝙡𝙤𝙮𝙢𝙚𝙣𝙩 stage, 
(3) 𝙥𝙤𝙨𝙩-𝙙𝙚𝙥𝙡𝙤𝙮𝙢𝙚𝙣𝙩 stage, and 
(4) 𝙖𝙩 𝙧𝙪𝙣𝙩𝙞𝙢𝙚.

𝘼𝙪𝙩𝙤𝙢𝙖𝙩𝙚 𝘾𝙤𝙣𝙩𝙖𝙞𝙣𝙚𝙧 𝙎𝙚𝙘𝙪𝙧𝙞𝙩𝙮 𝙤𝙣 𝘼𝙒𝙎 𝙐𝙨𝙞𝙣𝙜 𝙏𝙧𝙚𝙣𝙙 𝙈𝙞𝙘𝙧𝙤 𝘾𝙡𝙤𝙪𝙙 𝙊𝙣𝙚
https://aws.amazon.com/blogs/apn/automate-container-security-on-aws-using-trend-micro-cloud-one/

𝙎𝙩𝙖𝙮 𝙩𝙪𝙣𝙚𝙙 𝙗𝙮 𝙛𝙤𝙡𝙡𝙤𝙬𝙞𝙣𝙜
https://www.linkedin.com/feed/hashtag/?keywords=did_you_know_that

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

https://www.linkedin.com/posts/mahmoudrabie2004_didabryouabrknowabrthat-aws-awscloud-activity-6933873499644030976-lQCd?utm_source=linkedin_share&utm_medium=member_desktop_web
What VS Code Extensions you are using for Web Development
Tags: vscode, webdev, programming, productivity
Published: 2022-05-21 19:37:21

Extensions to your IDE are invaluable to speed up your work without reducing the quality of your output. Here are some of my favorite extensions that I use to make my VSCode look the way I want and, make my life a little easier, and also some general-purpose extensions that will benefit everyone else too. Let me know your favorite code extensions and keyboard shortcuts in the comments.

I'm gonna share my favorite extensions here 😀

1.  HTML Snippets
2.  HTML CSS Support
3.  SQL Formatter
4.  Javascript Snippets Pack
5.  Simple React Snippets
6.  ES7 +React/Redux/React Native-Snippets
7.  Babel JavaScript
8.  Prettify JSON
9.  Color Picker
10.  Color Info
11.  Better Comments
12.  Add jsdoc Comments
13.  Remote SSH
14.  REmote WSL
15.  NPM
16.  NPM Intellisense
17.  Path Intellisense
18.  Path Autocomplete
19.  Jshint
20.  ESLint
21.  PHP Debug
22.  PHP Intelephense
23.  Git History
24.  GitLens
25.  Docker
26.  Css Peak
27.  Prettier
28.  Beautify
29.  Guides
30.  Highlight Matching Tag
31.  Auto Close Tag
32.  Auto Complete Tag
33.  Auto Rename Tag
34.  CodeQL
35.  Test Explorer UI
36.  Sublime Text Key map
37.  Material Icon Theme
38.  Live Server
39.  Window Colors
40.  Vscode-Icons

:smile: :smile: :collision: :collision:
Tips i needed when i starting, dicas de estudo.[pt and en]
Tags: motivation, webdev, programming, career
Published: 2022-05-21 19:34:11


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/poj448l0eve3lhystmn2.jpg)
[en]
Before you read this article, i hope that someone identify it, i am that kind of person that already think not trying anymore programming, just think that programming is didn't for me or that i don't be a suficient for development, before close this  navigation tab, i wanna show you one of some tips that i wanted  received and some that i learned.(yes, like new rules of Dua Lipa)

1.research, research more and more, study programming is not difficult but is toilsome, all requires cost and patiance  especially in tech.

2.Never compare about others you have your way and this is your own.And in the future think that you will conquest your place on the job market.

3.Create your own study rytm, 5 min of assimilation is more than 3 hours studying of the wrong way.

4.Know searching at first if you is studying development.
Good journey.

[pt]
Antes de ler esse artigo, espero que alguém se identifique, eu sou dessas muitas pessoas que já pensou em diversas vezes em desistir de programar, por achar que não tem paciência ou "tino"  para o desenvolvimento, mas antes de fechar a aba do seu navegador eu gostaria de deixar algumas dicas que aprendi e venho aprendendo.

1.pesquise, pesquise muito, estudar programação, não é difícil mas é trabalhoso, exige esforço constante e paciência.

2. Nunca se compare com outras pessoas, você tem sua trilha além de ser só sua, pense na possibilidade de no futuro você também conseguir seu espaço no mercado.

3. Crie um ritmo de estudo só seu e eu garanto que 5 minutos de assimilação eh melhor que 3 horas de estudo da maneira errada.

4. Relacionado a dica acima, saiba pesquisar, principalmente se você está estudando desenvolvimento.
Solution for problem with useState and eventHandlers
Tags: react, hooks, javascript
Published: 2022-05-21 18:57:36

```javascript
import { useEffect } from "react";
import { useRefState } from "utils";

export default function HomePage() {
  const [mouseDownCounter, setMouseDownCounter] = useRefState(0);

  useEffect(() => {
    window.addEventListener("mousedown", () => {
      setMouseDownCounter(mouseDownCounter + 1);
    });
  }, []);

  return <div>{mouseDownCounter}</div>;
}
```
With react functional programing we got a problem of accessing latest react state inside addEventListener. “mouseDownCounter“ value will always to 0 inside addEventListener callback function, this can be solved by creating a custom hook that uses ref to store the state. Solution below.
```javascript
import { useEffect } from "react";
import { useRefState } from "utils";

export default function HomePage() {
  const [
    mouseDownCounter,
    setMouseDownCounter,
    getMouseDownCounter,
  ] = useRefState(0);

  useEffect(() => {
    window.addEventListener("mousedown", () => {
      setMouseDownCounter(getMouseDownCounter() + 1);
    });
  }, []);

  return <div>{mouseDownCounter}</div>;
}
```
useRefState is same as useState, but has third parameter that exposes the current value of the state. To expose the current state we use react ref. Code below.
```typescript
/**
 * same as use state, but we get a third param to get current value. This will be useful while working with settimeout, eventHandlers, promises and axios api calls.
 */
export function useRefState<T>(
  defaultValue: T
): [T, (updatedValue: T) => void, () => T] {
  const ref = useRef(defaultValue);
  const [state, setState] = useState(defaultValue);

  function setStateFn(updatedValue: any) {
    ref.current = updatedValue;
    setState(updatedValue);
  }

  function getValueFn() {
    return ref.current;
  }

  return [state, setStateFn, getValueFn];
}
```
Guys I have a question for y’all. How much time should it take making Responsive navigation bar as a beginner?
Tags: navbar, menu, navigation
Published: 2022-05-21 18:53:03

Guys I’m struggling to make a responsive navbar. It’s taking my whole day to make a simple Navigation bar. How much time should it take actually? Or how much time do you make navbar? Gimme some advices. (By the way I am beginner)
Find Out How to Use the Free Geolocation API
Tags: api
Published: 2022-05-20 11:00:18

The Geolocation API is a powerful tool that can be used by developers to create location-based applications. In this blog post, we will take a look at how to use the Geolocation API to create a simple location-based application.
The Geolocation API is a simple way to create location-based applications. All you need is a browser that supports the API and you're good to go. In this tutorial, we'll show you how to use the [IP Geolocation API](https://ipstack.com/) to create a simple location-based application. We'll also show you how to use some of the more advanced features of the API, such as setting custom accuracy levels and getting position updates in real-time.
In addition to the standard latitude and longitude coordinates, the Geolocation API can also provide accurate information, on altitude, heading, and speed. All of this data can be very useful in a number of situations. For example, knowing accurate information can help you determine how reliable the data is. Altitude information can be used in conjunction with other data to estimate travel times or find potential shortcuts. Heading and speed information could be used together to track movement patterns over time or identify areas where people are driving erratically.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yytgbsyydeuxzuglxtia.jpg)
Fatal: Authentication failed (on git push)
Published: 2022-06-04 21:12:58

---
title: Fatal: Authentication failed (on git push)
published: true
date: 2022-05-21 17:55:00 UTC
tags: 
canonical_url: https://dcblog.dev/fatal-authentication-failed-on-git-push
---

## Problem

Lost authentication from BitBucket resulting in invalid credentials. Pushing to BitBucket and received this response:

```

remote: Invalid credentials
fatal: Authentication failed for **repo**
```

## Solution

1. Go to [https://bitbucket.org/account/settings/app-passwords/](https://bitbucket.org/account/settings/app-passwords/) and create a new app password

2. Tick all the permissions required, copy the password

In terminal:

On an already-cloned project:

```

git remote set-url origin https://bitbucket-username:app-password@bitbucket.org/repo-name.git
```

To clone a new project:

```

git clone https://bitbucket-username:app-password@bitbucket.org/repo-name.git
```

Why is it happening?

> Beginning March 1, 2022, you will no longer be able to use your Atlassian account password when using Basic authentication with the Bitbucket Cloud REST API or Git over HTTPS.

Solution has been provided from StackOverflow - [https://stackoverflow.com/questions/71378839/how-can-i-solve-this-invalid-credentials-problem-on-bitbucket](https://stackoverflow.com/questions/71378839/how-can-i-solve-this-invalid-credentials-problem-on-bitbucket)
3 things to improve your coaching
Tags: programming, leadership, career, management
Published: 2022-05-21 18:16:44

This week's newsletter article is about becoming a better coach. There are three basic characteristics of a good coach and practicing these can improve your leadership skills.

- Honesty
- Empathy
- Adaptability

Read this to find out more.

{% embed https://newsletter.attainable.engineer/p/what-makes-a-good-coach?r=1grfum&s=w&utm_campaign=post&utm_medium=web %}