Aqui você encontrará links para ferramentas que acreditamos que podem ajudá-la a enfrentar o desafio que propusemos para essa semana de pré-admissão. Essas ferramentas ajudarão você a organizar a maneira como trabalha com suas duplas/trios e a maneira como elas mantêm e apresentam seu código. As ferramentas que queremos que explore são:
- GitHub
- Trello
- Code review
- Code Pen (sua professora explicará como essa ferramenta funciona)
- Um Guia de Estilo para JavaScript
| # | Ferramenta | Link | | --- | --- | --- | --- | --- | --- | --- | | 1.1 | Github | Vídeo. | | 1.2 | Github | Leitura. | | 2.1 | Trello | Leitura. | | 2.2 | Trello | Vídeo . | | 3 | Code Review | Ver abaixo | | 4 | Code Pen | Ver abaixo |
Quando vocês estiverem mais avançadas em seu desafio, teremos um espaço especial no qual você terá a possibilidade de fazer comentários e observações sobre o código e observações sobre o de outro grupo de trabalho. Esta atividade tem como objetivo fazer com que possa colaborar com outras colegas: você terá a oportunidade de aprender com o trabalho das outras e também contribuir com ideias para elas melhorarem seus códigos. A dinâmica é a seguinte:
Cada dupla/trio expõe seu código ao resto do grupo. Todas comentam/discutem o código que está sendo apresentado. Todos esses comentários ajudarão você e seu grupo a melhorar o código. Este exercício de melhorar chamamos de refatoração.
O importante é tentar entender o código da sua parceira, isto é, o que ela fez, como pensou no problema, como construiu a solução, etc. Você tem que tentar dar soluções baseadas na lógica da outra pessoa, ao invés de dizer "faça assim", "mude isso", "assim está ruim", "eu fiz assim".
Você deve considerar que:
- Todas as soluções são válidas: muitos códigos podem alcançar a solução, uma vez que a nossa forma de escrever o código é pessoal. Sendo cada código, a ideia da revisão de código é buscar um o código mais preciso, isto é, autoexplicativo, refatorado, com comentários, que utiliza boas práticas, etc. Assim, podemos aprender e integrá-lo na aprendizagem.
- Aproveite o aprendizado: não importa que você não atinja a solução perfeita, o importante é aproveitar o momento de aprendizado para buscar melhorias ou soluções que não encontramos.
- Companheirismo: a visão de outras companheiras pode me ajudar. Se não tenho a solução, meu squad provavelmente a tem.
Você pode considerar:
- Documentação: o código é devidamente documentado e comentado? (Possíveis respostas: Precisa de mais trabalho/Um pouco/Sim, é ótimo). Em que a documentação deveria melhorar?
- Tratamento de Erros: o código trata erros corretamente? (Possíveis respostas: Precisa de mais trabalho/Um pouco/Sim, é ótimo). Em que o tratamento de erros deve ser melhor?
- Sugestões: Forneça duas sugestões para a autora do código sobre como melhorar o código.
- LEMBRE-SE... A qualidade do código raramente é preto no branco. Haverá discordâncias, diferentes soluções corretas e preferências pessoais.
eslint: semi
var x = 5 // ✗ evitar
var x = 5; // ✓ okeslint: recuo
// ✗ evitar
function hello(name) {
console.log('hi', name);
}
// ✓ ok
function hello(name) {
console.log('hi', name);
}eslint: id-length
eslint: camelcase
// ✗ evitar
const OBJEcttsssss = {};
const this_is_my_object = {};`
const miObjecto = {};
function c() {}
// ✓ ok
const thisIsMyObject = {};
function thisIsMyFunction() {}eslint: espaçamento de palavra-chave
if (condition) { ... } // ✓ ok
if(condition) { ... } // ✗ evitarCom exceção dos operadores de incremento e decremento (por exemplo, i++oui--).
eslint: space-infix-ops
// ✗ evitar
var x=2;
var message = 'hello, '+name+'!';
// ✓ ok
var x = 2;
var message = 'hello, ' + name + '!';Exceto se for o último símbolo na linha.
eslint: espaçamento entre vírgulas
// ✓ ok
var list = [1, 2, 3, 4];
function greet(name, options) { ... }
// ✗ evitar
var list = [1,2,3,4];
function greet(name,options) { ... }eslint: space-before-blocks
if (admin){...} // ✗ evitar
if (admin) {...} // ✓ okeslint: espaçado-comentário
//comment // ✗ evitar
// comment // ✓ ok
/*comment*/ // ✗ evitar
/* comment */ // ✓ okeslint: espaçamento entre chaves
var obj = { 'key' : 'value' }; // ✗ evitar
var obj = { 'key' :'value' }; // ✗ evitar
var obj = { 'key':'value' }; // ✗ evitar
var obj = { 'key': 'value' }; // ✓ okeslint: não-multi-espaços
const id = 1234; // ✗ evitar
const id = 1234; // ✓ okeslint: espaço-em-parênteses
getName( name ) // ✗ evitar
getName(name) // ✓ okeslint: space-before-function-paren
function name (arg) { ... } // ✗ evitar
function name(arg) { ... } // ✓ ok
run(function () { ... }) // ✗ evitar
run(function() { ... }) // ✓ okeslint: func-call-espaçamento
console.log ('hello'); // ✗ evitar
console.log('hello'); // ✓ okeslint: no-multiple-empty-lines
// ✗ evitar
var value = 'hello world';
console.log(value);
// ✓ ok
var value = 'hello world';
console.log(value);eslint: blocos acolchoados
if (user) {
// ✗ evitar
const name = getName();
}
if (user) {
const name = getName(); // ✓ ok
}Exceto quando você precisa usar aspas simples em sua string.
eslint: citações
var str = "hi"; // ✗ evitar
var str = 'hi'; // ✓ okeslint: sem-decimal-flutuante
const discount = .5; // ✗ evitar
const discount = 0.5; // ✓ okeslint: object-property-newline
const user = {
name: 'Jane Doe', age: 30,
username: 'jdoe86' // ✗ evitar
};
const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' }; // ✗ evitar
const user = {
name: 'Jane Doe',
age: 30,
username: 'jdoe86' // ✓ ok
};eslint: brace-style
// ✗ evitar
if (condition) {
// ...
}
else {
// ...
}
// ✓ ok
if (condition) {
// ...
} else {
// ...
}Com exceção de obj == null para verificar se o objeto é nulo || indefinido
eslint: eqeqeq
if (name == 'John') // ✗ evitar
if (name === 'John') // ✓ ok
if (name != 'John') // ✗ evitar
if (name !== 'John') // ✓ okeslint: no-array-construtor
var nums = new Array(1, 2, 3); // ✗ evitar
var nums = [1, 2, 3]; // ✓ ok