teleren/devto huggingface dataset:
Show & Hide Passwords with React
Tags: react, signup, authentication, form
Published: 2020-10-08 21:07:08

# Understanding React useState Hook

To understand the work around of showing and hiding password string inside of an input field we must first understand the useState hook.

Elements state inside of basic React apps is managed by something called a useState hook. Bodies of data like javascript objects, arrays, string, booleans, etc. can be stored inside of a useState variable. 

### For example:
```javascript
const [showPassword, setShowPassword] = useState(false)
```

In the example above we assign `showPassword` to false by default. After that comes the setter variable. We can use that whenever someone clicks on a button/icon to reveal the password.

### For example

```javascript
const [showPassword, setShowPassword] = useState(false)

const togglePass = (e) => {
  e.preventDefault() // Important! If you don't include this your page will refresh

  setShowPassword(!showPassword)
}

return (
<>
  <form>
    <input type='password' />
    <button onClick={togglePass}>Toggle Password</button>
  </form>
</>
)
```

As you can see from the example above, we have a function that set the showPassword to the opposite of what it currently is -- if its true set it to false, if its false set it to true.

After that we have a simple form field with one input and a button. The onClick on the button is set the the togglePass function. So whenever you click on the button it will perform the simple task of switching it from true to false and vice-versa.

This is where the magic happens. As you probably noticed, we hard coded the type on input in the code above. Lets fix that.

```javascript
const [showPassword, setShowPassword] = useState(false)

const togglePass = (e) => {
  e.preventDefault() // Important! If you don't include this your page will refresh

  setShowPassword(!showPassword)
}

return (
<>
  <form>
    <input type={showPassword ? 'password' : 'text'} />
    <button onClick={togglePass}>Toggle Password</button>
  </form>
</>
)
```

Using a ternary operation we can set a conditional statment. In plain English it reads as follows:

`If showPassword is true, then set the input type to password. If it is not true (false), then set the input type to text.`

With these few lines of code we can easily create a show and hide for a password form field in React!
Cloud architecture diagrams
Tags: architecture, c4model, productivity
Published: 2020-10-08 21:04:47

---
title: Cloud architecture diagrams
published: true
description: Favour deployment diagrams over infrastructure diagrams
tags: architecture,c4model,productivity
//cover_image: https://direct_url_to_image.jpg
---

I've seen a lot of discussion about cloud architecture diagrams recently, with people specifically asking how to create them, which tools to use, and where to get the icon sets. Many of the example cloud architecture diagrams that I see online are relatively generic, and look something like this.

![A typical cloud architecture diagram](https://dev-to-uploads.s3.amazonaws.com/i/1y62yyztvf58eux48vjr.png)

This diagram shows that a number of AWS services are being used; including Route 53, Elastic Load Balancer, EC2 (with auto-scaling), and MySQL on RDS. It looks good, it's colourful, and it uses the appropriate icons from the AWS icon set. It's a decent first attempt because it helps to highlight which AWS services are in use. But that's also the biggest problem - it's an "infrastructure diagram", and is only telling you half of the story. Understanding which AWS services are being used is great, but I'd really like to also know how _you_ are using them.

## Deployment diagrams

Most software development teams would be better creating a "deployment diagram", which shows the mapping of deployable things (e.g. your applications and data stores) to things that exist in the infrastructure environment. UML has a [deployment diagram](https://en.wikipedia.org/wiki/Deployment_diagram), which allows you to show the mapping of deployable artifacts onto device nodes and execution environments. The C4 model also has a [deployment diagram](https://c4model.com/#DeploymentDiagram), which shows the mapping of C4 model containers (again, applications and data stores) onto things that exist in the infrastructure environment (which I call "deployment nodes"). Here's an example.

![A deployment diagram](https://dev-to-uploads.s3.amazonaws.com/i/s51rwqhsnm4c4phdaic9.png)

This diagram again shows the AWS services in use, but it also shows what they are being used for, through the inclusion of the web application and database. You can, of course, add more detail as needed; including VPCs, VLANs, firewalls, IP addresses, instance counts, scaling limits, etc. It's worth noting that the same advice applies to diagramming Docker and Kubernetes environments too - remember to show your own applications and data stores.

## Summary

Many of the example cloud architecture diagrams you'll see online are good starting points but they only tell half of the story. To tell more of the story, favour deployment diagrams over infrastructure diagrams.

{% youtube ALuL9uKqWU4 %}
Teaching Myself to Code: HORRIBLE BOSS- Oh Wait, That Was Me...
Tags: codenewbie, devpride, leadership, motivation
Published: 2020-10-08 21:00:05

### The schedule from Hell ##

June 11, 2020 I sat down at my computer at 9am ready to start the day. This would be my first full day of teaching myself to code full time. I remember being so excited that I filled out my calendar for the next month jam packed with a strict schedule. 

6am-9am: Exercise and eat Breakfast
9am-12pm: Code with Treehouse 
12pm-1pm: Drive for DoorDash (Lunch)
2pm-5pm: Work on coding project
5pm-8pm: Drive for DoorDash (Dinner)

I knew that if I would stick to that schedule I would be successful, otherwise I would be undisciplined and get nothing done. 

For 4 months straight I have stuck to this strict routine and am a perfect human being.... HA just kidding. The schedule above literally lasted for ONE day. By the end of the day I felt like I couldn't breathe. 
It took me a few weeks to realize that I have complete freedom to learn right now. The issue was that I didn't trust myself. I did not believe that I could keep myself focused, accountable, and motivated. What actually happened was that I became my own boss. Through this learning journey, I have been both the boss everyone hates, and the boss that everyone respects. 

###Me, as the boss everyone hates:###

😡 I micromanaged every little thing that I did. If I didn't start coding at 9am sharp I became very stressed. I was irritated with myself and basically gave myself a mental smackdown for being "undisciplined".

😡 I was a bully and unless I achieved a certain amount, I forced myself to work overtime. This made my time less productive and just all around more stressful.

😡 I did was focused more on criticizing what I was NOT doing right rather than celebrating what I was doing right.

###Me, as the boss everyone respects:###

😎 I went with the flow of things, if I did not start right at 9am it was cool... I could just work a little later. I encouraged flexibility for a more balanced work/life. 
*(Side note: I am not condoning being compulsively late for things. Be considerate and be on time for important meetings.)*

😎 I was kind, respectful, loving, and appreciative to myself which gave me confidence and energy and in turn made me more productive and excited about my work.

😎 I celebrated my wins by sharing them on LinkedIn. While I still faced challenges and difficulties, I have looked at them with determination to solve the problem rather than with criticism of myself.

We have probably all experienced horrible bosses, and we would all prefer to have the boss that everyone respects. The one who is supportive, encouraging, flexible, and not breathing down our neck. 

When on the journey of learning full time, remember that YOU are your boss right now. Are you the boss that everyone hates, or the one that everyone respects? 

It's your choice to be the type of boss that you want to have. 

Cheers!

Image graciously borrowed from https://blogjob.com/thebossfromhell/
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2020-10-08 20:54:25

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

[This thread](https://dev.to/huncyrus/comment/165b3) on the best movies for programmers thread was a hit! @huncyrus shared a few suggestions that I'll definitely be adding to my queue:
{% devcomment 165b3 %}

This post asked the purpose of `.c` `.h` `.a` and `.o` in C — and @juancarlospaco delivered!
{% devcomment 15hol %}

In Jess' [Hacktoberfest post](https://dev.to/devteam/happy-hacktoberfest-here-s-how-to-show-up-for-open-source-this-month-4cee), @diptigautam spread the word about an awesome event in their community for Nepali women in coding! 
{% devcomment 15j2b %}

This salary negotiations tip thread is definitely worth a look — and not _just_ for @bpedroza's sage advice:
{% devcomment 16gb2 %}

Finally, I absolutely love this attitude about contributing to Hacktoberfest from @mcastellin! If you haven't checked out @coffeecraftcode's [Hcktoberfest Etiquette Guide for Contributors](https://dev.to/devteam/hacktoberfest-etiquette-for-contributors-ec6), it's definitely worth it!
{% devcomment 15i15 %}

See you next week for more great comments ✌
“I flunked out of a bootcamp. Now I'm one of its directors.” with Navira Abbasi of Galvanize
Tags: bootcamp, learning, leadership, coding
Published: 2020-10-08 20:53:52

Navira Abbasi flunked out of Hack Reactor by failing the midterm technical test. Instead of doing the part-time remote program, she repeated the entire program and graduated. In less than two years, Navira became their Director of Evangelism. Join us as we hear her story of stubbornness, resilience, and discovering her own sense of self-worth.

https://lu.ma/navira-abbasi-1008
I wrote the most depressing app ever in order to motivate you. What do you think?
Tags: discuss, motivation
Published: 2020-10-08 20:52:12


https://play.google.com/store/apps/details?id=de.pandaquests.whenwillidie

Shows how much time you have left on this planet

This app is not for the weak minded. However the aim is to motivate you to make the best of your time. This app tells you how much time you have left on this planet based on your birthday, gender, and country of living. It displays your remaining time to life as a life bar and shows you how many years, months, days, etc. you have left to live as a countdown.
Clearing terminal in any OS
Tags: python
Published: 2020-10-08 20:23:42

Compatibility of a program across different operating systems is very important, and going through a project codebase, I found one operation which might be of use. I didn't expect to learn cross-platform operations this early in my learning process, so I found it really cool, and figured I'd share.

You might need to clear the terminal screen for certain scripts. That's where the [os module](https://docs.python.org/3/library/os.html) comes in handy. It is a part of the Python standard library, so you do not need to install it separately. We'll need the module objects `system` and `name`, so:

```python
from os import system, name
```

Since you want to clear the terminal, it's likely that you'll be doing it multiple times, so it's best to define a function.

```python
def clearscreen():
```

Next, we want to check the operating system. Windows operating systems have the name value "nt", while Unix-based operating systems have the name value "posix". Both of them take different functions to clear the screen, which can be done as follows:

```python
if name == "nt":
    system('cls')
else:
    system('clear')
```

Thus, the _if_ statement runs for Windows, and the _else_ statement runs for Linux/MacOS.
Our complete code becomes:

```python
from os import system, name
def clearscreen():
if name == "nt":
    system('cls')
else:
    system('clear')
```

Now all you need to do is place your `clearscreen()` function wherever you require in your script, and voila!
Announcing Ruby APM, causal graphs at Slack, and Carole Baskin's take on AWS
Tags: performance, monitoring, performancematters
Published: 2020-10-08 20:42:51

Hi folks, 

Welcome back to Performance Matters. This week at Raygun, we've been busy [launching the general availability of Ruby APM](https://raygun.com/blog/announcing-ruby-application-performance-monitoring) 🙌.  Read all about how we're different from other APM players, and how we are redefining what APM should be for developers.

Read on for the latest update from the Chromium blog, how Slack's senior software engineers approach debugging complex systems, and David Hasselhof, Flavor Flav, and Carole Baskin help simplify DevOps. 

Enjoy! 

Your Curator 

------------------------------

### FEATURED ARTICLES

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

<strong>Ruby APM now available in Raygun</strong>

We are thrilled to launch the next chapter in our ongoing support for Application Performance Monitoring: Ruby support for Raygun APM. Ruby teams can now get end-to-end monitoring with features like detailed trace transactions, dashboards, code execution, and more.

[Read about the launch](https://raygun.com/blog/announcing-ruby-application-performance-monitoring)

------------------------------

<strong>Chrome is deploying HTTP/3 and IETF and QUIC</strong>

The latest update to Google will bring some additional performance improvements to Chrome.

[Read the announcement](https://blog.chromium.org/2020/10/chrome-is-deploying-http3-and-ietf-quic.html)

------------------------------

<strong>Tracing at Slack — Thinking in causal graphs</strong>

“Why is it slow?” is the hardest problem to debug in a complex distributed system like Slack.

[Diagnosing slow channels](https://slack.engineering/tracing-at-slack-thinking-in-causal-graphs/)

------------------------------

### BUG OF THE WEEK

<strong>A Facebook bug exposed anonymous admins of pages</strong>

A bad code update allowed anyone to easily reveal which accounts posted to Facebook Pages—including celebrities and politicians—for several hours. 

[The unexpected bug](https://www.wired.com/story/facebook-bug-page-admins-edit-history-doxxing/)

------------------------------

### COMMUNITY

<strong>Celebrities explain DevOps</strong>

David Hasselhof, Flavor Flav, and Carole Baskin help simplify AWS, Kubernetes, and Docker. 

[Please enjoy the video thoroughly](https://cto.ai/blog/celebrities-explain-devops/)

------------------------------

If you think Performance Matters is pretty great, why not [sign up](https://performancematters.dev/) to receive it in your inbox every week? 🙌

------------------------------

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8sahfwo6v3g5llqmozcn.png)

------------------------------
Logical Operators
Tags: javascript, react, beginners
Published: 2020-10-08 20:42:40

## `&&` - 'and'

`&&` - means 'and' and **both** the left-hand side and the right-hand side _operands_ **must** be 'truthy' for `&&` to be 'truthy.'

For example, if I tell my daughter that she will receive 🍦 if she gets an 'A' on her test **and** cleans her room, then both of those conditions **must** be `true` for her to get 🍦.

Here's how that might look in code:

```javascript
const daughter = {
  name: "Lily",
  devToUsername: "@awesomecoder123"
  mostRecentTestScore: "A",
  roomStatus: "Clean"
}

if (daughter.mostRecentTestScore === "A" && daughter.roomStatus === "Clean) {

  // This will only 'log' if BOTH CONDITIONS are 'truthy'
  console.log("🍦");
}
``` 

And, here are a couple of examples loosely referencing how this sort of thing might work in React:

{% embed https://replit.com/@CodeFinity/Logical-Operators#index.js %}

---

{% replit @CodeFinity/Logical-Operators-I %}

`&&`, if the left-hand side _operand_ is 'false-y,' then there is no reason to evaluate the right-hand side _operand._

If the left-hand side _operand_ is 'false-y,' then we _shortcircuit_ the `&&`.

Using the analogy above 👆🏽, if my daughter didn't receive an "A," there isn't any reason to check her room with regards to 🍦.

## `||` - 'or'

`||` - means 'or' and **either** the left-hand side _or_ the right-hand side _operand_ **must** be 'truthy' for `||` to be 'truthy.'

Using the same 'daughter analogy' 👆🏽, if the deal was that she could get 🍦 if either she got that "A," _or_ she cleaned her room...

```javascript
const daughter = {
  name: "Lily",
  devToUsername: "@awesomecoder123"
  mostRecentTestScore: "A",
  roomStatus: "Dirty"
}

if (daughter.mostRecentTestScore === "A" || daughter.roomStatus === "Clean) {

  // This will only 'log' even if the 'room is dirty' b/c she got the 'A' 😃
  console.log("🍦");
}
``` 

And, here's another example showing _short-circuiting_ of an `||`. This means that if the left-hand side _operand_ is 'truth-y,' we don't bother to look 👀 at the right-hand side _operand_ - we short-circuit the `||`.

---

Finally, we see one somewhat more realistic example putting things back together.

{% embed https://vimeo.com/466328439/0f131e6f24 %}
A Home for LIVE-Screaming Horror
Published: 2020-10-08 19:05:59

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

***

🎃 Each October my friends and I spend the month indulging in horror movies and pumpkin carving. Though the quarantine has kept everyone physically apart this year, the spirit is still with us. This October I took it upon myself to host a streaming movie marathon for them each week so we can continue to revel in the atmosphere of the season together.

It crossed my mind to put together a PDF to announce the schedule of screenings but I ultimately decided that this would be a great opportunity to build a simple site my friends could easily check for updates and show times. Though the scope of the site is small and simple, there were still quite a few lessons learned along the way:

## Sometimes A Library Is Just Clutter

I began building my site with the intention of learning how to use Bootstrap for rapid styling. Once the general layout of the site was completed I realized hardly any of the massive library the browser had been forced to download was being utilized. Here I made the decision to ditch Bootstrap and focus on using CSS3 Flexbox to achieve my responsive design goals without the bloat. Bootstrap, I'll call on you later for a future project.

## Manage Your Media Assets

My site includes a number of film poster images and the required download size grew to well over 8MB which introduced a noticeable delay on page load. Using a free photo editor I was able to reduce the total download size for the entire page to just over 1MB by resizing all of my images. This reduces the amount of data mobile-users have to download and resolved my delayed page load.

## Build Fun Projects

Small, silly projects like this are great practice for those that may be reluctant to touch CSS or front end development. You don't have to jump into a monolithic project to learn something big. What I thought was going to be a one or two hour project turned into multiple days of tweaking wireframes, layouts, assets, and color palettes as I became more determined to make this as polished as possible. Building something that is going to be used by your friends is also a great project motivator!

Overall, I had a lot of fun building this site and hope this leads to a Live-Screaming Horror Picture Show 2021! Let me know if you have any Halloween favorites I should have included in the schedule, and have a wonderful October! 🎃

🕸️ Site Link: https://skylerburger.github.io/lshps/

## TL;DR

1) Don't feel like you have to use a library unless you have good reason to 
2) Manage the file sizes for your media assets
3) Build more small, silly projects!
Criando uma animação de roleta usando a mudança de estados
Tags: react, javascript, animation
Published: 2020-10-08 20:22:39

Esse post servirá para o dia que a pessoa responsável pelo design decidir que é uma boa ideia ter um contador (ou algo que tenha botões de + / -) ou quando você simplesmente precisar animar um component de acordo com a mudança de uma prop ou estado.
Então vamos ao que importa...

## Requisitos

<small>(Lembrando que isso é pra você que está usando React)</small>

- [react-transition-group](https://reactcommunity.org/react-transition-group/)
  é uma mão na roda e se você já mexeu com VueJS vai pegar a ideia rapidinho

- [styled-components](https://styled-components.com/)
  isso facilita muito a vida quando vc precisa alterar as propriedades de css baseados nas props de react

## Let's code

Primeiro precisamos ter uma ideia do que vamos fazer. Então vamos codar os components necessários para, pelo menos, aparecer na tela.

{% codesandbox roulette-1-uofed %}

Ok... temos os nossos botões e o nosso component de roleta.
Temos também nosso estado, que é alterado toda vez que clicamos em algum dos botões.

Precisamos adicionar o react-transition-group para definir que queremos fazer uma animaçãozinha toda vez que o componente receber um novo value.

{% codesandbox roulette-2-vn24k %}

Pronto... Agora nós adicionamos o comportamento de roleta unidirecional. #topzeira

Vejamos alguns detalhes sobre o código em src/components/roulette.js:

- Usamos SwitchTransition para controlarmos o render do component na sua transição. O mode="out-in" diz explicitamente que queremos que o novo elemento filho seja inserido após a saída do antigo, por isso "out" e depois "in".
- O CSSTransition vai receber algumas props bem importantes para a nossa animação que são:
  - classNames é o prefixo que a gente usa nas classes do css. No nosso caso será .move-\*
  - key é uma boa colocar algo que diferencie os estados. No exemplo colocamos o próprio value
  - addEventListener serve para adicionar um listener para o elemento que é chamado durante a transição. A função recebe dois parametros: node que é o próprio elemento e done que é o callback de quando finaliza a transição.
- adicionamos um div antes do nosso component de exibição do valor, porque precisamos de um elemento que receberá nossas classes .move-\*

Show de bola... mas e se você quiser fazer uma animação pra cada lado, por exemplo, de cima para baixo quando "incrementa" e o contrário para quando "decrementa"? Bom... podemos armazenar um "direction" que receberá increment/decrement dependendo da situação e colocamos isso como prop no styled-components (é nesses casos que isso facilita bastante) fazendo com que alteremos a animação.

> Obs.: como vamos mexer com mais de um estado, vamos mudar para useReducer... é sempre uma boa fazer isso, porque você altera tudo que precisa de uma vez só.

{% codesandbox roulette-3-wiju5 %}

Bom é isso aí... espero que esse post ajude e que tenham gostado.
Push and Pop array methods in JavaScript tutorial (First video with my face 😮)
Tags: javascript, tutorial
Published: 2020-10-08 20:13:53

I've just posted my 4th YouTube video 🙂 explaining the use of the Push and Pop array methods in JavaScript!

{% youtube 91mnGhC6Kh0 %}

Let me know what you think and please give it a like and if you enjoy it [subscribe](https://bit.ly/alanmontgomerycoding) for more in the future.

I'm enjoying making these 😎