teleren/devto huggingface dataset:
Daily Developer Jokes - Wednesday, Mar 18, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-03-18 13:00:11

---
title: "Daily Developer Jokes - Wednesday, Mar 18, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Wednesday%2C%20Mar%2018%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258a3e5534.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did the developer ground their kid?

___A:___ They weren't telling the truthy
 -->
Going remote
Published: 2020-03-18 12:41:55

Health and safety come first and starting from 18.03 the HireTester team goes remote. But we're always open to new challenges and keep the process on bug hunting going. 

Facing the new work paradigm, you might experience personal and professional challenges of working remotely or managing a remote team. We've come up  with the top five the most popular recommendations for improving productivity and fighting procrastination that actually work.

1.Split your work up into little steps.

2. Develop a detailed timeline with specific deadlines.

3.Do the hard and important tasks first.

4. Get rid of distractions.

And finally, our favorite one: 

5. Get a Grip and Just Do It

And what recommendations do you follow?

http://hire-tester.com
Want to create a Dynamic React Native Stepper
Tags: reactnative
Published: 2020-03-18 12:28:34

This is the react-native stepper I'm using(https://github.com/colbymillerdev/react-native-progress-steps). But in my case, the number of steps to be provided to the stepper is obtained at run time (dynamic). Hence, in this case, how should I progress. Can anybody help?

Thanks in Advance !!!
⚛️ The useRef Hook, Fully Explained in Detail 👩‍🏫 👨‍🏫
Tags: react, javascript, webdev, tutorial
Published: 2020-03-18 12:19:57

**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!)_

Ever wondered how the `useRef` hook works?

This issue is one that my students ask about a lot; however, once understood correctly it can quite easily become one of the most powerful tools inside a React developer's toolbelt.

In the following video, I answer questions such as the following,

1. **How does the useRef hook work?**
2. **Why does it become an object with a `current` property?**
3. **Why is it sometimes used for referencing DOM elements, and sometimes used for random data?**

And I also cover an example of how to use the `useRef` hook in a real component. I hope you enjoy!

{% youtube jFR4ZS8VCNM %}

Happy coding!
some of my personal projects
Tags: react, node, javascript, android
Published: 2020-03-18 11:57:00

Here are some of my personal projects:

https://lunchpicker-2232b.firebaseapp.com/

http://t.me/lunchPickerMyBot

https://play.google.com/store/apps/details?id=com.donaldwu.lunchpickerandroid

http://t.me/weatherHKBot

I welcome everyone to contribute to the project, and just sharing and advertising of my project.

source code
https://github.com/yeukfei02

Thank you.
Why We Use Tailwind at ConvertKit
Tags: react, css, javascript
Published: 2020-03-18 11:53:44

When my coworker first introduced me to [Tailwind](https://tailwindcss.com/) (hi Mark), I had the same reaction as most people that hadn't used a utility-first CSS framework before. Why do we need this? If we're writing solid CSS everywhere, and all following the same patterns, conventions, and rules, and keeping our UI consistent across different teams, then we don't need a framework that pollutes our HTML with all these non-semantic class names. 

Then I took another look at our CSS...

We used bootstrap, BEM, OOCSS, some css modules, and many other patterns and conventions across the application. No one really knew which one was the right one to use at any given time. No one knows what is used and unused. Our CSS had become an append-only stylesheet. 

So we decided to give Tailwind a shot and styling our application immediately became easier for everyone. We no longer need to think about what conventions we're following, what to name things, or where to put styles. We don't have to worry about breaking styles somewhere else in the application or our stylesheets continuing to grow unchecked. We only need to follow a few simple rules:
- Use our component library
- Use Tailwind
- Fallback to inline styles

And that's it.

There are many articles about why you should use Tailwind, but why do we use Tailwind? **Because it simplifies just about everything when it comes to styling UI across our teams**. It eliminates decisions of where to put things or how to write them. It comes with great documentation. For teams, especially with varying backgrounds and UI skill levels, Tailwind is a massive productivity boost. 

Why do you use/not use Tailwind?

P.S. We're hiring a few full stack engineers at ConvertKit. Learn more here [convertk.it/engineer](convertk.it/engineer)
React Installation Issue
Tags: react, javascript, npm, git
Published: 2020-03-18 11:49:42

Hello,

I have been trying to install React in my PC frfom past 24 hours and couldn't do it.
I followed the following procedure:

1) node.js in C drive
2) node version 12.16.1
3)npm version 6.14.2
4) Windows 10
5) then I followed:  npx create-react-app my-app
6) cd my-app
7) npm start

But the following errors show up when I hit npm start

```
> my-app@0.1.0 start C:\Users\mohin\my-app
> react-scripts start

i ｢wds｣: Project is running at http://192.168.1.33/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\mohin\my-app\public
i ｢wds｣: 404s will fallback to /
Starting the development server...

events.js:288
      throw er; // Unhandled 'error' event
      ^

Error: spawn cmd ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
    at onErrorNT (internal/child_process.js:469:16)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:273:12)
    at onErrorNT (internal/child_process.js:469:16)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  errno: 'ENOENT',
  code: 'ENOENT',
  syscall: 'spawn cmd',
  path: 'cmd',
  spawnargs: [ '/s', '/c', 'start', '""', '/b', '"http://localhost:3000"' ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mohin\AppData\Roaming\npm-cache\_logs\2020-03-18T11_34_42_137Z-debug.log
```

I tried deleting node-modules and reinstalling and even cleared catche.
I tried every way I know but I couldn't find solution

I thought it was showing error for LIVE SERVER step so maybe I can still use it without live server but when i open index.html in public folder there is no output.


Please help me.

I really want to learn in this break quickly.
Build simple API service with Python FastAPI — Part 2
Tags: fastapi, apiservice, python
Published: 2020-03-18 11:29:37

---
title: Build simple API service with Python FastAPI — Part 2
published: true
description: 
tags: #FastAPI #API-service #python
---
In the [previous-post](https://dev.to/cuongld2/build-simple-api-service-with-python-fastapi-part-1-581o), I already went over how to set up and create a new user account API service.

In this post, I will show how to do an authenticate API using FastAPI.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ikyys96oxqoze865sdyn.png)

I. Hash the real password before save to database:

Previously, we’re doing like this :
{% gist https://gist.github.com/cuongld2/2a138a98444987d2eb54fc89338222da %}


Now, we will hash the password using the bycrypt library.

```javascript
bcrypt is a password hashing function designed by Niels Provos and David Mazières, based on the Blowfish cipher, and presented at USENIX in 1999.[1] Besides incorporating a salt to protect against rainbow table attacks, bcrypt is an adaptive function: over time, the iteration count can be increased to make it slower, so it remains resistant to brute-force search attacks even with increasing computation power.
```

To install bcrypt library in python, simply

```javascript
pipenv install bcrypt
```

And now the code for create new user will look like:
{% gist https://gist.github.com/cuongld2/7dfc6cfb38e374c86a86bb934480bb57 %}

II.Check the input password for authenticate API matching

{% gist https://gist.github.com/cuongld2/26f1648d0e3506535c6d158c426c130d %}

To be able to do this, we use bcrypt.checkpw from the bcrypt library.

III.Create a token object response if the username and password is correct

1.Define Token Schemas in schemas.py
{% gist https://gist.github.com/cuongld2/842e89692c689fc5916f458a38733c41 %}

2.Create an access token by using jwt library

Utilize the jwt library in python by installing it:
```javascript
pipenv install pyjwt
```

Then define a method that create an access token from the hashed_password in the database
{% gist https://gist.github.com/cuongld2/50a2b4b743cfc63604fc54f01b7f5c56 %}

IV.Wrap altogether and define the authenticate api from main.py
Wrap it altogether to create authenticate API

The below method will validate the username and password, then return the access_token in the response if the username and password is correct.
{% gist https://gist.github.com/cuongld2/e770e85a5d5e8d40ac09e3d1b3331f7b %}

To run the server, simply click on the run button from IDE, or by command line:

```javascript
uvicorn main:app --reload
```
Please check the full sourcecode from [github](https://github.com/cuongld2/rest_api_service_fastapi) .

Happy coding~~~
How to manage Users & Project in Openshift?
Tags: openshift, redhat, kubernetes, devops
Published: 2020-03-18 11:19:52

### Objective
- Create project **my-project**
- Create 2 Users **project-admin** & **project-developer**
- Assign admin role to user project-admin in project my-project
- Assign developer role to user project-developer in project my-project

#### Step 1: Set up OpenShift environment
Go to [Katacoda.com](https://katacoda.com/openshift/courses/playgrounds/openshift39) & click on start scenario

#### Step 2: Set up utility
Install httpd tools
```
yum install httpd-tools
```
Create file to store user & password
```
touch passwordfile 
```

#### Step 3: List projects
```
oc projects
```
#### Step 4: Create project
```
oc new-project my-project
```

#### Step 5: Create users
```
oc create user project-admin
```
```
htpasswd -b passwordfile project-admin pwd
```
```
oc create user project-developer
```
```
htpasswd -b passwordfile project-developer pwd
```

#### Step 6: Add admin role to user
```
oc policy add-role-to-user admin project-admin
```

#### Step 7: Add developer role to user
```
oc login -u project-admin -p pwd <SERVER_URL>
```
```
oc policy add-role-to-user edit project-developer
```

#### Step 8: List role bindings
```
oc get rolebindings
```

#### Step 9: Deploy application 
```
oc login -u project-developer -p pwd <SERVER_URL>
```
```
oc new-app --name nginx -l app=demo --docker-image nginx:latest
```

#### Step 10: List pods
```
oc get pods
```

#### Step 11: View application logs
```
oc logs <POD_NAME>
```

#### Step 12: Create service account
```
oc create sa useroot
```

#### Step 13: Add scc anyuid to service account
```
 oc adm policy add-scc-to-user anyuid -z useroot --as system:admin
```

#### Step 14: Patch DC with service account
```
 oc get dc
```
```
oc patch dc/nginx --patch \
'{"spec":{"template":{"spec":{"serviceAccountName": "useroot"}}}}'
```
```
oc get pods --watch
```

#### Step 15: Browse application
```
oc get pods -o wide
```
```
curl http://<POD_IP>:80
```

{% youtube NsTlJo2ih0Y%}
O que é Promise
Published: 2020-03-18 11:18:10

Um Promise representa um proxy para um valor que não é necessariamente conhecido quando a promessa é criada. Isso permite a associação de métodos de tratamento para eventos da ação assíncrona num caso eventual de sucesso ou de falha.

Isto permite que métodos assíncronos retornem valores como métodos síncronos: ao invés do valor final, o método assíncrono retorna uma promessa ao valor em algum momento no futuro.

### Um Promise está em um destes estados: 

* pending (pendente): Estado inicial, que não foi realizada nem rejeitada.
* fulfilled (realizada): sucesso na operação.
* rejected (rejeitado):  falha na operação.
* settled (estabelecida): Que foi realizada ou rejeitada.

Uma promessa pendente pode se tornar realizada com um valor ou rejeitada por um motivo (erro). Quando um desses estados ocorre, o método then do Promise é chamado, e ele chama o método de tratamento associado ao estado (rejected ou resolved).  

(Se a promessa foi realizada ou rejeitada quando o método de tratamento correspondente for associado, o método será chamado, deste forma não há uma condição de competição entre uma operação assíncrona e seus manipuladores que estão sendo associados.)

Como os métodos Promise.prototype.then e Promise.prototype.catch  retornam promises, eles podem ser encadeados — uma operação chamada composição.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wmfd7a590pvnz66pazvm.png)
React Native Manipulação de entrada de texto (Handling Text Input)
Published: 2020-03-18 11:11:59

TextInput é um componente básico que permite ao usuário inserir texto. Ele possui um onChangeText suporte que aceita uma função a ser chamada toda vez que o texto é alterado e um onSubmitEditing suporte que aceita uma função a ser chamada quando o texto é enviado.

Por exemplo, digamos que, à medida que o usuário digita, você está traduzindo as palavras para outro idioma. Nesta nova linguagem, cada palavra é escrita da mesma maneira: 🍕. Portanto, a frase “Olá, Bob” seria traduzida como “🍕🍕🍕”.
```react
import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}
```
Neste exemplo, armazenamos text no estado, porque ele muda com o tempo.

Há muito mais coisas que você pode querer fazer com uma entrada de texto. Por exemplo, você pode validar o texto interno enquanto o usuário digita. Para obter exemplos mais detalhados, consulte os [documentos React](https://reactjs.org/docs/forms.html#controlled-components) sobre componentes controlados ou os [documentos de referência para TextInput](https://facebook.github.io/react-native/docs/textinput).

A entrada de texto é uma das maneiras pelas quais o usuário interage com o aplicativo. 
(Traduzido da documentação original)
Simple Spinning Animation with CSS
Tags: css, animation
Published: 2020-03-18 11:08:38

I wanted to start exploring animations using CSS so I started with this simple example and wanted to share! VSCode has a very good MDN reference and suggestions concerning different animation functions. If you want to experiment more with bezier curves, check out [cubic-bezier.com](https://cubic-bezier.com/). 

Without further ado,  here’s the code:
```html
<!DOCTYPE html>
<html lang=“en”>
  <head>
    <meta charset=“UTF-8” />
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
    <title>Practicing CSS Animations</title>
    <style>
      :root {
        —-inner-color: salmon;
        —-border-color: saddlebrown;
        —-text-color: white;
      }

      body {
        padding: 200px;
      }

      .box {
        background-color: var(--inner-color);
        border: 5px solid var(--border-color);
        height: 300px;
        width: 300px;
        border-radius: 10px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: sans-serif;
        font-size: 32px;
        color: var(--text-color);
      }

      .box:active {
        animation: spin 3s infinite;
        animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p>Hold meee</p>
    </div>
  </body>
</html>
```

Check out the result here: [CodePen - Spinning Box](https://codepen.io/macekovick/full/oNXypgv)
The Importance of Persistence
Tags: motivation, 100daysofcode, codenewbie, career
Published: 2020-03-18 10:52:35

I received a call yesterday not long after I woke up, telling me i was laid off for at least two or three months, mainly due to the corona virus and whatever has caused the oil prices to plummet( there are multiple reasons). If anyone has experienced a layoff, or a firing, it's hard. It is an emotionally draining experience, one that can have an effect on both self worth and motivation.

I'm not sure it gets any easier either, unless you're prepared for it. I honestly saw something coming. I had a nagging feeling this last time out. Maybe it was the fact that I was sent to west texas which is considered the hellhole of the oilfield industry, or most of the gigs going remote after only one or two wells. I just had this really bad feeling, so I started job hunting as soon as I went on days off. 

I'm like a lot of Americans. I struggle to make a living, to pay bills, to make ends meet. That's part why I continue to learn to code. Some day, I hope not to struggle so much. I say part, because the other part is I love doing it so much. I'm almost to 150 days straight. 

Let me back up a minute and explain how my job worked. I would drive 850+ miles from Arkansas to texas, and mostly live in a trailer on an oil rig for a month and a half. Good paying jobs in Arkansas are scarce so a lot of people go to the oil field, or work on river boats to make real money. I have a wife and 4 year old son, so being away for that long and not being military is tough. I stayed out that long to make it worth it, collect a couple of full paychecks, then come home. 

The work itself wasn't bad, and the company was good to work for. They respected my time off, let me decide when I went back to work. I was pretty religious about only taking about 2 weeks before heading out again. The time away from home was soul crushing at times.

When I decided to pick up programming again I knew it would have to be something I was going to stick with long term. There are very few things I can see myself doing for a living, and programming is at the top of the list.i had dabbled in programming in the past, but had not given it the dedication that I do now.

This isn't a plea for help or a job, although I wouldn't turn down an offer of work (I'm more than willing to relocate). This is an affirmation, from me to whoever is reading, that I'm not going to quit. I'm not going to complain about how hard things are. I'm sure others have it worse. 

I've made a commitment to learning to program, to learn how to do things with code, make things come to life. Becoming a developer might take me a bit longer than I would like, but I'm not going to quit because what started as an attempt to build a habit has become a burning desire, one that won't be smoked by a small setback. Persistence through adversity is one thing I've learned, and the one thing I'll keep in mind as I go forward. Persistence is how I'll get where I want to go.
What are your opinions regarding(about) animated logos?
Tags: discuss, webdev, brand
Published: 2020-03-18 10:41:37

Hi everyone,

What are your opinions regarding(about) animated logos?

Also, how do you think they will affect the brand(improve or weaken it)?

On the other hand, what type of animation do you think will be most popular? (video, Javascript, CSS)

One last point that I also wanted to add to this discussion is how can we make sure that our animated logo will run on all clients(phone, tablet, pc, tv, VR) very fast?

Thanks in advance to all the participants to this discussion.