teleren/devto huggingface dataset:
Why imperative code using refs should be avoided?
Tags: help, react, javascript
Published: 2020-04-18 16:04:08

Ok. I really thought the title would be self-explanatory, but it seems it isn't. I have a really strong Angular background and to access a child ref inside a component, you can use the [`ViewChild`](https://angular.io/api/core/ViewChild) decorator. Recently I found out about [`useImperativeHandle`](https://reactjs.org/docs/hooks-reference.html#useimperativehandle). This can be used to create components that can be managed with components refs as you can do with Angular's ViewChild. However, in the docs it says: 

> useImperativeHandle customizes the instance value that is exposed to parent components when using ref. As always, imperative code using refs should be avoided in most cases. useImperativeHandle should be used with forwardRef.

But, why imperative code should be avoided? This can be handy for cases like, a Modal component that can update its own state. Instead of having the parent handling a modal component state, whether is open or closed, the component could do this, and the parent only would have to call methods of the component ref. 

I remember reading this like "memory leaks", and the code to be underperformance, but this was back when all React component should use classes. Now that React has first-class support for functional components and has optimizations about when and how a component should be renderer, does this still being a thing?
Registration Form In Tailwind CSS
Tags: tutorial, webdev, css, html
Published: 2020-04-18 15:53:24

Registration Form has some input fields like username, email, password, and one register button. So here we designed an awesome Registration Form using Tailwind CSS and also used CSS properties.

In this form, we used the Tailwind CSS form component and also used utility classes. Here we also modify input fields in an attractive interface and used background image with a transparent form. Also, we used flex utilities classes and alignment item center classes with a justify-center class.

Make it yours now by using it, downloading it and please share it. we will design more elements for you.

[Download Source Code](https://w3hubs.com/registration-form-in-tailwind-css/)
If/else statements
Tags: javascript, beginners
Published: 2020-04-18 15:52:41

---
title: If/else statements
published: true
description: True False 0 1
tags: javascript, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/tmqvg2xfy65648s6mu1i.jpg
---

#The if/else statements
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p9oklkznnh5ecmeruqzh.png)
The if/ else statements in JavaScript decide the behavior of our program 
in front of different scenarios.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ex6avu3puk7zwblboqkk.png)
if/else statement are also called <mark>**control flow statement**</mark>.
Sometimes we need to evaluate more than one condition in this case we may use else if statement before the else final statemet.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ex5oobrx0dsfebprykx1.png)
JavaScript evaluate the code until the condition is met.
To determine if true or false JavaScript uses the comparison operators and truthy and falsey values.
#Comparison operators
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fhl4pi2kn2ga7ks44isy.png)
In this first part we use this two symbols <mark>**==**</mark> and <mark>**!=**</mark> to compare two values,<mark>**JavaScript by default will try to convert each value in number**</mark>,before starting the comparison. This can create bugs that are really hard to find, because the string "123" is not the same type of the number 123.
To avoid these annoying problems it is always better to use the strictly mode: <mark>**===**</mark> and <mark>**!==**</mark>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fw22suh09hz1i81lycuz.png)
From now on life gets easier:
- greater than <mark>**>**</mark>
- greater than or equal to <mark>**>=**</mark>
- smaller than <mark>**<**</mark>
- smaller than or equal to <mark>**<=**</mark>
We use this for numbers.
If we try to compare this two objects:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5c8yv954beeo51ksq7zg.png)
In javaScript each object has its personal reference like our identity card.
If we want have two equals objects we need that both point to the same reference:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tbqmc8x31qwrol8j8ilo.png)
#Truthy and Falsey
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2utvme3c8ci8ys5b8w8s.png)
In the example above javaScript, inside the if statement run the automatic 
type conversion to truthy and falsey values, than check if the const peaches is true or false; in this case is true and run the argument inside the if statement otherwise run the else statement. This kind of type conversion help us to write a better and coincise code.
In this example we see an example of falsey type conversion.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7wa5znle5mjnfww7fljh.png)
What’s your alternative solution? Challenge #26
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-04-18 14:21:55

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Create a function that will merge two arrays and return the result as a new array

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge24

var ar1 = [1, 2, 3];
var ar2 = [4, 5, 6];

var ar = mergeArrays(ar1, ar2);
println(ar);

function mergeArrays(ar1, ar2)
{
    var ar = [];
    
    for(let el of ar1)
    {
        ar.push(el);
    }
    
    for(let el of ar2)
    {
        ar.push(el);
    }
    
    return ar;
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
Getting Started With Data Structure and Algorithm With Revisiting DSA Series
Tags: algorithms, datastructure, javascript, computerscience
Published: 2020-04-18 15:24:01

## What is data structure and why it is so important

Original Article: [Revisiting DSA](https://rajeshberwal.com/what-is-revisiting-dsa-series)

You are thinking now why should I learn complicated stuff if there is no use of it in my life?
And why companies ask questions on data structure and algorithms?

As a beginner we avoid data structure because it seems to be complicated.
Data Structure doesn't mean some type of fixed syntax. It's all about organizing data in a better form that we can perform a task to extract information from it in a efficient way.
Data structure are used to store, manipulate and arrange data.

Data structure is the key part of an algorithm and algorithms are used to solve real world problem.

Some Data Structure Advantage:

1. Memory Efficiency
2. Reusability
3. Abstraction

__"Data Structure and Algorithms are not language specific."__

## What is **Revisiting DSA** Series

We have seen that most of the developers learns different programming languages, frameworks and libraries but they don't focus on their data structure skills and we have already talked about why data structure is important.

So, I decided to revisit the data structure and share the knowledge that I'm gaining from it.

Revisiting Data Structure and Algorithms is 30 days of series in which we will share DSA content everyday on this blog with full explanation.
And in this series we will start from basic and all the codes will be available on GitHub repo in JavaScript, Python, C++. And the repository is open for change and update if anyone want to do.

### So, how Revisiting DSA works

Revisiting DSA is community powered series and we started to help make our community better.

follow the given steps to be part of our community

1. Visit our blog daily for next part of the series.
2. Use hashtag #revisitingdsa and share your daily progress with the community.
3. Add your name to Revisiting DSA repo.

If you want to contribute to DSA repo. Then visit the given link and also share our articles with others and help them to learn. Links are given below.

So want to contribute to this series then follow the given link of the GitHub repository.

[Revisiting DSA](https://github.com/rajeshberwal/revisiting-dsa)

[Our Instagram Page](https://instagram.com/theinterviewcodes)
[Tutorial Git] git tag: Etiquetas (tags) no Git
Tags: git, tag, delete, braziliandevs
Published: 2020-04-18 15:15:46

**Etiquetas (tags)** são importantes para a organização dos nossos projetos. Elas demarcam um ponto **(commit)** que consideramos relevante e que representa alguma mudança significativa no nosso código.

É com elas que fazemos a **versão (ou release)** de um projeto (v1.0, v2.0 e assim por diante).

## Criando etiquetas (tags)

```
$ git tag -a <nome_da_etiqueta> -m 'insira sua mensagem aqui'
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.
- **git tag** chamando o git e em seguida o comando para criar a etiqueta (tag).
- **-a** identifica o **tipo da tag**; nesse caso é **annotated** *(anotada)*.
- digite o **nome para a etiqueta** sem os símbolos **< >**.
- **-m** informa ao git que haverá uma **mensagem**; que será digitada entre **aspas simples ou duplas**.

Exemplo:

```
$ git tag -a v1.0 -m "minha versão 1.0"
```

Esse tipo de **etiqueta (tag)** armazena uma série de objetos de dados do **git**, como checksum (soma de verificação; é um código usado para verificar a integridade de dados), um nome, email, data, arquivos alterados, entre outros.

O mais recomendado é que você crie **etiquetas anotadas (annotated tags)** assim você tem acesso a mais informações.

Abaixo temos o **fluxo do git** que contém uma **tag**.

![etiqueta no git](https://thepracticaldev.s3.amazonaws.com/i/a4qcr292x1aovf39ntgr.png)


## Verificando as etiquetas (tags)

```
$ git tag
```

E o retorno serão todas as etiquetas (tags) já criadas.

É importante notar que a etiqueta é criada no **commit** atual.

Para ver as informações mais detalhadas sobre uma determinada **etiqueta (tag)**, digite:

```
$ git show <nome_da_etiqueta>
```

- **show** é o comando que vai mostrar as informações detalhadas na **etiqueta (tag)**.


## Etiqueta (tag) no repositório remoto

Com a tag já criado, só precisamos enviar para o repositório remoto:

```
$ git push origin <nome_da_etiqueta>
```

> [clique aqui para saber mais sobre repositórios remotos.](https://dev.to/womakerscode/tutorial-git-enviando-um-projeto-para-o-repositorio-remoto-no-github-2p36)

É possível ir até o seu repositório remoto e verificar a *versão*:

![release no github](https://dev-to-uploads.s3.amazonaws.com/i/zoxv9zkjkbhifr49v793.png)


## Criando tag em um commit passado

```
$ git tag -a <nome_da_etiqueta> <chave_do_commit> -m 'insira sua mensagem aqui'
```

Exemplo:

```
$ git tag -a v0.1 c5d15de -m "versão beta"
```

Para verificar a **chave do commit** que deseja, use o comando

```
$ git log --oneline
```


## Excluindo uma etiqueta (tag)

Não é usual que as etiquetas (tags) sejam excluídas, mas caso seja necessário, primeiro é preciso fazer a exclusão local. Assim:

```
$ git tag -d <nome_da_etiqueta>
```

- **-d** de *delete*, para excluir a etiqueta (tag).

E em seguida fazemos a exclusão no repositório remoto:

```
$ git push --delete origin <nome_da_etiqueta>
```
What’s your alternative solution? Challenge #25
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-04-18 14:20:36

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Reverse a string

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge23

var s = reverseString("JavaScript");
println(s);

function reverseString(s)
{
    var s2 = "";
    
    for(var i = s.length - 1; i >= 0; i--)
    {
        var char = s[i];
        s2 += char;
    }
    
    return s2;
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
What Did You Learn This Week --April 17?
Tags: todayilearned, discuss
Published: 2020-04-18 14:23:01

---
title: What Did You Learn This Week --April 17?
tags: todayilearned, discuss
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--TpOOUw4B--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/67bb72156h4y13zl5cio.png
series: this-week-i-learned
---
What’s your alternative solution? Challenge #23
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-04-18 14:20:12

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Rotate an array to the right 1 position

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge21

var ar = [1, 2, 3];
rotateRight(ar);
println(ar);

function rotateRight(ar)
{
    var last = ar.pop();
    ar.unshift(last);
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
Deploy Jenkins job from the command line and chrome notification for job result
Tags: devops, javascript, jenkins, chromenotification
Published: 2020-04-18 14:14:59

## Reason:
- Current my daily tasks are:
 1. Develop feature
 2. Create a git merge request
 3. Create a git tag
 4. Go to Jenkins site and deploy to a specify env and git tag above
 5. Wait for Jenkins build result
- So, I think I can make the process at step 4 and 5 more automatic

## Solution:
- A script for deploy Jenkins from the command line
 - So we no need switch to Jenkins page, now you can do everything on you IDE
- A chrome extension for notifying when build success
 - Another solution is set up a webhook for Jenkins so it can send the result to Slack or Mattermost group. But I think it still makes spam for me, I just want to notify on some projects.

## Preconditions:
- You must have Jenkins username and API token
 - API token get at Configure tab on the account info page

## Script for deploy Jenkins from the command line
- It uses Jenkins API for send deploy request
- Basically, all of it is do this command
  ```
curl -v -X POST https://jenkins.com/job/admin-apibuild \
  --user yourusername:yourapitoken \
  --data-urlencode json='{"parameter": [{"name":"Environment", "value":"test"}, {"name":"COMMIT", "value":"dev"}]}'
```
- Value of `parameter` depend on the config of your Jenkins job
- I wrapper above curl command to Javascript file, so you need Node to run
- We can run a command like `node scripts/deploy.js dev v1.1.1`
  - You can custom to correct with your Jenkins config
- Source code at https://github.com/tungnt620/jenkins-auto

## A chrome extension for notifying when build success
### How it works
- We have a monitor server which uses for interval fetch status of jobs
 - We choose jobs to want to monitor
- This monitor server also serves an API get notifies which used by chrome ext
- Chrome ext interval fetch notifies from the monitor server and displays it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/khms5zw4lmjbapf193xx.png)
### Setup
- You can see detail at https://github.com/tungnt620/jenkins-auto

## The end
- I think one way to boot productivity is to avoid context switch as much as possible.
- If you have any other ways, solutions please share with us
What's it Like to Go From React to React Native - Jenn Creighton on Real Talk Javascript #78
Tags: podcast, react, reactnative, javascript
Published: 2020-04-18 14:10:27

---
title: What's it Like to Go From React to React Native - Jenn Creighton on Real Talk Javascript #78
published: true
description: Jenn Creighton talks with Craig Shoemaker about going from React to React Native and some of the issues she encountered and what she learned along the way.
tags: podcast, react, reactnative, javascript
---

What's it like to go from React to React Native? Jenn Creighton talks with Craig Shoemaker about her journey from React to React Native and some of the issues she encountered and what she learned along the way. She explains where React Native fits, how iOS and Android development differs, and what it's like to debug these apps.

Recording date: 2020-02-13

[Going React to React Native with Jenn Creighton on Real Talk Javascript #78](https://realtalkjavascript.simplecast.com/episodes/episode-78-going-react-to-react-native-with-jenn-creighton)

<pre class="line-numbers language-javascript" data-start="1"><code>const podcast = { 
  episode: 74,
  title: 'Going React to React Native',
  topics: [ 
    'react', 'pwa', 'deploying javascript',
  ],
  guest: 'Jenn Creighton',
  hosts: [
    'Craig Shoemaker', 
  ]
};
</code></pre>

### Brought to you by

* <a href="https://www.ag-grid.com/" target="_blank">ag-Grid</a>

    <a href="https://www.ag-grid.com/" target="_blank">![ag-grid-logo-2](https://johnpapa.net/content/images/2020/03/ag-grid-logo-2.png)</a>

* <a href="https://ideablade.com" target="_blank">IdeaBlade</a>

## Resources:

* [Jenn Creighton on Notist](https://noti.st/jenncreighton)
* [UseReactNYC](https://usereact.nyc/)
* [CircleCI](https://circleci.com/)
* [VS Code](https://code.visualstudio.com/?wt.mc_id=devto-blog-jopapa)
* [Expo](https://expo.io/)
* [Start React Native](https://start-react-native.dev/)

## Timejumps

* **[02:08](#t=02:08)** What is React Native?
* **[09:47](#t=09:47)** Sponsor: Ag Grid
* **[10:52](#t=10:52)** iOS vs Android development
* **[17:15](#t=17:15)** What sort of speed bumps did you hit along the way?
* **[28:28](#t=28:28)** What do you do for debugging?
* **[29:56](#t=29:56)** Sponsor: IdeaBlade
* **[31:05](#t=31:05)** Opportunities for talks and blogging
* **[35:41](#t=35:41)** Did you consider any other solutions?
* **[39:20](#t=39:20)** Final thoughts


## Hosts and Guests

Craig Shoemaker [@craigshoemaker](https://twitter.com/craigshoemaker)

Jenn Creighton [@GurlCode](https://twitter.com/gurlcode)
On Tech Blogging: If You Write It, They Will Come
Tags: javascript, productivity, blogging, career
Published: 2020-04-18 14:05:58

---
title: On Tech Blogging: If You Write It, They Will Come
published: true
description: 
tags: javascript, productivity, blogging, career
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/eb0q294y4s9szhq1t89o.png
---

This morning I checked the Google Search Console for my personal blog at https://typeofnan.dev. When I filtered to show the past year of search traffic, I was pleasantly surprised to see this trend:

![Google search console trending up](https://dev-to-uploads.s3.amazonaws.com/i/eb0q294y4s9szhq1t89o.png)

Don't get me wrong, ~1,700 clicks over a year is not too much to brag about, but it's clearly trending up! What once started as a modest endeavor to self-document various JavaScript and Typescript musings has become a little bit more--it's a place where others are coming to learn as well.

The moral of the story? If you write it, they will come. Do it for yourself and others will likely come to learn with you as well.

Happy coding!
Add Eat Repeat
Tags: javascript, reactnative, android
Published: 2020-04-18 14:05:30

This lockdown has given us opportunity to invest time in ourselves, explore, learn and create things. Well this app is on of those good things. Take a look here
https://play.google.com/store/apps/details?id=com.insu.sunny.addeatrepeat

Last time i created an app with react-native-cli. Apart from code writing i had to take care of several other things. Well this time things changed. I tried my hands on Expo and its managed work flow. I was pretty impressed the way Expo hold your hands from development environment till app store bundle generation with via their extensive doc. Only downside was the size of the app.

Do you think Expo is worth exploring? Would you prefer it over vanilla react-native-cli?
Product Management - TerminusDB Discussion #6
Tags: product, ops
Published: 2020-04-18 13:45:32

---
title: Product Management - TerminusDB Discussion #6
published: true
description: Every week the TerminusDB core team get together to hear a talk led by one of our members. The discussions are always very interesting, so we thought we'd share. This week we have our Director Of Services talking Product Management.
tags: product, discuss, databases, ops
---
Every week the TerminusDB core team get together to hear a talk led by one of our members. The discussions are always very interesting, so we thought we'd share. This week we have our Director Of Services talking Product Management. Slides can be found here:  https://themethod.surge.sh/

As we are a FOSS community, it is an open and free discussion.