Blog

Debug of Shame: Field is Required

This night debug of shame was, react/redux hang on loading and not getting a response from the database.

During this project, I was building a page to add a form to add education to a user profile, just had the same done with add experience just fine. This new React component had the same structure internally with just a few different field names.

When the submit was sent nothing happened, the page stuck there for about a minute then react dev responded saying something was undefined.

The back end was not reporting any error. How I got it fixed was:

By the Redux dev tools extension, I found out that the state was reporting a change in the state saying that the fieldOfStudy was required. While this camp was not required in the front end React, it was in the backend API, I renamed every ooccurrenceof this field in the front end component and done, it was fixed.

Now I have a TODO, learn how to handle this kind of error better.

 

 

Reduxing redux…

This is getting confusing… But I will keep going.

this.props.registerUser(newUser);
This calls the Auth action imported:
import { connect } from 'react-redux';</div>
<div>import { registerUser } from '../../actions/authActions';
That action takes a parameter to register, and loads a dispatch, still a test in this case:
import { TEST_DISPATCH } from './types';</div> <blockquote> <div>/* Register */</div> <div>export const registerUser = userData => {</div> <div>  return {</div> <div>    type:'TEST_DISPATCH',</div> <div>    payload:userData,</div> <div>  };</div> <div>};
The action file is a collection of functions.
  • UI sends a user registration
  • The action file executes the Axios function. Action takes the current state tree and an action to be executed
  • When the Axios function returns it sends its result to the Reducer
  • The Reducer makes a copy of the state and saves to the Store
  • Store updates the state and remounts the render()

I will eventually understand how to apply this. But by the moment it does feel it is an overcomplicated way to flow data.

“JavaScript’s a mess – and that’s a good thing” – 2ality

Saving this info for later.

A cleaner JavaScript

If you want to program in as clean a JavaScript as possible, there is much you can ignore (some suggestions are more radical than others):

  • var. Use let and const, instead.
  • function. Use only arrows and method definitions. Benefit: handling this becomes much simpler (details).
  • Promises. Use only async functions. Learn what to watch out for (you can’t ignore Promises as completely as var).
  • Iterating over objects. Use Maps, instead.
  • Loops: for-in (avoid always), for (avoid if you can). Use for-of, instead.
  • arguments. Use rest parameters (...args), instead.
  • Function.prototype.apply(). Use the spread operator (f(...myArray)), instead.
  • Constructor functions. Use classes, instead.
  • IIFEs. Use blocks, instead.

From this great JS blog.

 

Bonus:

Import statements snippet for VS Code

http://2ality.com/2017/08/typing-import-statements.html

Text navigation in VS Code without VIM or arrows

 

I hate having to move a few inches to reach the arrow keys. After searching for navigation alternatives I found out VIM.

VIM is great, everybody that can get past the initial learning curve, which is incredibly hard, will learn a really solid skill that will save a lot of time typing and a lot of real pain in his hands.

But… I really like VS Code and the VIM plugin for it is not that great, I wanted just the navigation and a few other functionalities, instead, I found a lot of conflict with ctrl functions and had to go over a lot of configuration, that plus the learning curve killed it for me.

In VIM, you use HJKL keys to navigate around, you can quickly navigate to other parts of your code with advanced commands like 20k goes 20 characters in k (up) direction.

I really liked that, and the best way I found to set something similar with basic VS Code is… WASD. Alt + WASD allows me to go in any direction, and while I am not able to jump X characters, just to be able to jump a few characters to add that ‘{‘ or a whole word (with ctrl) without having to reach the mouse is awesome.

I still need the mouse for big code block manipulation, but overall I am happy with the alt + WASD setup and I can recommend it.

A arte do debug, pensar como um programador

“The art of debugging is figuring out what you really told your program to do rather than what you thought you told it to do.” — Andrew Singer

Aprender a resolver problemas é o fundamento mais importante na vida de um desenvolvedor. Muito tempo é gasto tentando solucionar um grande problema na criação de um software, que poderia ter sido melhor entendido se divido em parte menores, e se um tempo maior fosse gasto no momento inicial, quando o problema é apresentado.

  • Escrever o problema ao primeiro contato, tentar explicar o problema para alguém ou algo.
  • Investir tempo em entender o problema e seus desdobramentos antes de começar a escrever o código.
  • Dividir o problema em partes menores que possam ser absorvidas com mais facilidade e solucionadas com maior certeza e agilidade.
  • Continuar extraindo partes do problema até que chegue em um ponto que consiga solucionar, então fazer o mesmo com outra parte.
  • Testar a solução completa.

É interessante o treino constante da solução de problemas, de nada adianta você treinar 100 socos e 100 chutes todos os dias, se são socos dado ao vento que não solucionam nada. As vezes um minuto de treino de combate, por mais simples que seja, ajuda a transformar informação, aquilo que você viu, em conhecimento, aquilo que você realmente sabe.

Com o passar dos anos e décadas um soco basta para acabar o conflito.

No pain no gain, se não houver esforço e dificuldade, não há aprendizado, não há ganho.

Tente resolver um problema por dia, com o passar do tempo perceberá que problemas diferentes muitas vezes tem soluções similares, e com o tempo você cria um ‘framework’ internalizado de soluções.

“Just when you think you’ve successfully navigated one obstacle, another emerges. But that’s what keeps life interesting.[…]

Life is a process of breaking through these impediments — a series of fortified lines that we must break through.

Each time, you’ll learn something.

Each time, you’ll develop strength, wisdom, and perspective.

Each time, a little more of the competition falls away. Until all that is left is you: the best version of you.” — Ryan Holiday (The Obstacle is the Way)

O site Coderbyte é um local interessante pra treinar esse fundamento, o de solucionar problemas.

Anotações sobre um tópico interessante que encontrei hoje.