Aula de hoje é sobre as unidades de medida do #CSS: px; em; rem; %; vw; vh; ch; ex; unitless; vmin; vmax, Das 11 unidades de medida nós veremos hoje, 6.

Aparece pra trocarmos conhecimento às 22:00 ao vivo e de graça pela http://twitch.tv/marcobrunobr e http://youtube.com/c/collabcode .

Tem vídeo novo do #frontinsampa no YouTube galera: a Isabella Silveira da Work & Co apresenta como é possível utilizar #MachineLearning com #JavaScript para automatizar suas tarefas e aproveitar o ócio para coisas que realmente importam.

#javascript
A dica de hoje é: como clonar um objeto em JavaScript, copiando apenas algumas propriedades!

Sabemos que objetos em JavaScript são referências mutáveis em memória.

Existem alguns momentos em que precisamos criar uma cópia de um objeto, mas com apenas algumas propriedades, não com todas.

Por exemplo:

const user = {
  userId: 10293948,
  name: 'John Doe',
  age: 30
}

Olhe esse objeto acima. Ele contém algumas informações do usuário logado na nossa aplicação, e só está disponível no backend. Usamos a propriedade userId como uma "chave" para efetuar ações específicas com esse usuário: remover alguma informação específica dele, adicionar novas informações, etc.

Imagine uma situação onde temos esse código no backend da nossa aplicação, com Node.js, e precisamos passar os dados do usuário para o frontend, mas sem deixar o userId exposto, para que ele não seja usado de forma indevida.

Para isso, precisamos criar um novo objeto que será passado para o frontend, mas devemos remover o userId. Como fazer isso?

Existem algumas soluções. Acompanha comigo:

var newUser = {}
for (var prop in user) {
  if (prop !== 'userId') {
    newUser[prop] = user[prop]
  }
}
console.log(newUser)

Veja que, no código acima - usando ES5 - nós criamos um novo objeto newUser, e usamos um for in para copiar as propriedades de user, menos o userId. Funciona!

Outra forma seria assim:

var newUser = {}
for (var prop in user) {
  newUser[prop] = user[prop]
}
delete newUser.userId
console.log(newUser)

Fazemos o mesmo processo, só que dessa vez nós modificamos o novo objeto, removendo a propriedade userId, usando o operador delete.

Com ES6, existe uma forma muito simples de fazer, usando spread operator:

const { userId, ...newUser } = user
console.log(newUser)

O que está acontecendo?

A primeira coisa que precisamos fazer, é usar uma feature chamada destructuring assignment, que basicamente serve para criar novas variáveis "desconstruindo" um objeto:

const { name } = user
console.log(name)

Ao usar o código acima, eu estou dizendo o seguinte:
- Crie uma variável chamada name, que está dentro de um objeto (por isso a sintaxe de objeto envolvendo name;
- Passe para essa variável name o valor da propriedade de mesmo nome - name - que está dentro do objeto user, no caso, user.name.

Ao checar o valor de name, vamos receber a string 'John Doe'!

E agora, a parte mágica: usando o spread operator (três pontos) ao criar uma variável, junto com a feature de destructuring assignment, ele funciona fazendo com que todas as propriedades restantes nesse objeto - excluindo as que foram passadas antes do uso do spread - sejam criadas em um novo objeto e passadas para a variável com o nome que vem logo após os 3 pontos! O nome dessa feature é rest parameters. Olhe o código novamente:

const { userId, ...newUser } = user
console.log(newUser)

O que esse código faz, é basicamente criar 2 variáveis: userId e newUser.

A variável userId vai conter o valor de user.userId, como vimos acima. E a variável newUser vai conter todas as outras propriedades do objeto user, menos a propriedade userId!

Super legal, não? :D

A maior parte dos browsers modernos - e a versão mais recente do Node.js - já suportam essa feature!

Viu como ficou muito mais fácil remover propriedades de um objeto, criando um novo, e usando imutabilidade? 😁

#javascript

Dica rápida: criando arrays com tamanhos específicos de forma rápida!

Você pode usar o novo Array.from para isso:

const arr = Array.from({ length: 10 })
console.log(arr)

Isso irá criar um novo array com 10 itens undefined.

Se você precisar, por exemplo, criar um array numerado, de 1 a 10, pode usar um segundo argumento no método from, que recebe uma função que faz a mesma ação do método .map.

O código ficaria assim:

const arr = Array.from({ length: 10 }, (item, index) => index + 1)
console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Veja que isso gera agora um array numerado, de 1 a 10, pois usamos o índice do item que está sendo iterado, e somamos 1 =)

❓ Por que funciona usando um objeto { length: 10 }? ❓

Porque um array nada mais é que um objeto! E esse objeto contém uma propriedade length. O método from de Array serve para criar um array à partir de outro array.

Como arrays são objetos em JavaScript, eles contém uma propriedade length com o tamanho do array. Então podemos usar esse "hack" para criar um novo array do tamanho que quisermos, e usar o segundo argumento para gerar os itens conforme nessa necessidade =)

Se quiser saber mais sobre o método map e outros métodos de array, dá uma olhada nessa live que fizemos com os alunos dos cursos Ninja, falando sobre o assunto:
https://www.youtube.com/watch?v=GDZswgpSYQg

CollabCode:
Nas lives surpresas que tenho feito, foco em trocar conhecimento sobre Coisas do #JavaScript Moderno. Temos vídeos sobre:

- var, let e const
- Template String
- Tagged Template String
- Arrow Function

As lives que já foram e as que virão estão
https://www.youtube.com/playlist?list=PLirko8T4cEmzs-mQkPO_vxfPxRZ1Wv5_m

#javascript

Agora com a nova feature async / await no JavaScript - que é um _sugar_ para Promises - nosso código pode ficar muito menor e mais legível =)

Mas nem tudo são flores: com Promises, nós tratamos os erros usando o método .catch. Como async / await simula um comportamento síncrono, a forma de tratar erros fica no estilo mais "tradicional", usando try / catch, o que é bem feio xD

Mas tem uma forma de contornar isso, vou te mostrar :D

Imagine que seu código hoje, usando async / await, está assim:

async function func () {
 try {
   const result = await promiseFunction()
   // aqui vc faz alguma coisa com o resultado
 } catch (e) {
   console.error(e) // se der algum erro, vai cair aqui
 }
}

Dá pra elimir esse try / catch de uma forma bem elegante, olha só:

function to (promise) {
 return promise
   .then((result) => [null, result])
   .catch((error) => [error])
}

Dá uma olhada nessa função to: Ela recebe uma promise, e aguarda o resultado dela - usando o .then. Quando a promise for resolvida, então nós retornamos um array com dois valores: null no primeiro índice, e o resultado - result - no segundo índice.

E, se por acaso der algum erro, nós retornamos um array com o erro no primeiro índice desse array.

E para usar essa função to, nós fazemos dessa forma:

async function func () {
  const [error, result] = await to(promiseFunction())
  if (error) {
    return console.error(e) // se der algum erro, vai cair aqui
  }

  // aqui vc faz alguma coisa com o resultado
}

Olha a diferença que ficou nossa função! Veja que na função to, nós já tratamos o erro usando .catch, então, se a promise resolver sem problemas, ou der erro, o próximo .then vai receber esse valor. No caso, o próximo .then vai receber o array retornado, ou pelo primeiro .then da função to, ou pelo .catch.

E esse array tem um padrão: o primeiro indice é sempre o objeto de erro. Se a promise resolve sem problemas, então nós passamos null no primeiro índice desse array, e o resultado no segundo.

Se der erro, só passamos o error no primeiro índice, e como não passamos o result, ele vai ser undefined :)

Agora, para usar o to, dentro da função func, nós só precisamos envolver nossa promise com essa função, e o retorno disso já vai ser um array!

Como já tratamos o erro dentro da função to, não precisamos do try/catch. Se der algum erro, esse erro vai estar na variável error, no primeiro índice do array onde criamos as variáveis error e result, utilizando a técnica de destructuring assignment :D

Super legal, não? :D

Eu tenho usado bastante essa ideia nos meus projetos!

A fonte foi esse artigo aqui: https://blog.grossman.io/how-to-write-async-await-without-try-catch-blocks-in-javascript/

#JavaScript - Spread Operator os três pontos no meio do código

https://youtu.be/SDkV8pQ38tI

Galera hoje às 22hrs pela twitch.tv/Marcobrunobr e YouTube.com/c/cololabcode começa curso Free e ao vivo de FrontEnd e boas práticas que vamos trocar conhecimento sobre #HTML, #CSS, um pouco de #JavaScript além de #ITCSS e #RSCSS. Cola ao galera e me ajuda a divulgar ;-)

VAGA: ANALISTA #DESENVOLVEDOR #FRONTEND
REGIÃO: Vila #Olímpia – SP
Faixa salarial: R$ 6.500,00 – 8.700,00
Contratação CLT + Pacote de benefícios bastante atrativo.

• Pessoas proativas para resolução de problemas e que trabalhem bem em equipe
• Flexibilidade para o aprendizado de novas tecnologias

Experiência Necessária:
• Conhecimento em frameworks #javascript #AngularJS (Grunt ou Gulp) ou #React (#Webpack)
• Conhecimento em #frameworks #CSS (SASS) #Bootstrap ou #Semantic

Diferenciais:

• Conhecimento em #ReactNative
• Controle de versão de #software (GIT)
• Conhecimento do modelo de testes unitários #junit, #karma, #jasmine ou #phantomjs
• Conhecimento de metodologias ágeis como #Scrum

• Desenvolvimento e implementação de funcionalidades para site e app

@GuiaDev
INTERESSADOS ENVIAR CURRÍCULO COM A PRETENSÃO SALARIAL PARA:
contato@rhgrandestalentos.com.br

Na sexta meu pequeno passou mal e eu também por isso não tivemos a continuação dos 15 dias de #React ao vivo, mas estamos de volta, hoje às 21:47 continuamos as #lives pela http://twitch.tv/marcobrunobr e http://youtube.com/collabcode. Cola aí e divulgue para os amigos!

Subiu agora post novo no blog da CollabCode!

Template String é uma funcionalidade do #JavaScript que usamos muito no frameworks modernos como #React, #Angular e #Vue. Aprender ela vai te ajudar a entender de uma forma mais feliz quando for codar nesses frameworks na vida:

https://medium.com/collabcode/template-string-%C3%A9-top-demais-02-5d8964726a32

Acabou de subir o post menos técnico que já escrevi na vida, mas é difícil não falar de #HTML, #CSS e #JavaScript. Nele estou contando 5 dicas que usei para realizar o meu maior sonho. Espero que essas 5 dicas também te ajude.

Lê lá e me diz o que você achou: https://medium.com/collabcode/5-dicas-para-voc%C3%AA-realizar-seus-sonhos-6c2c5a508e68

Comunidade! Se você perdeu a aula de ontem do curso ao vivo e graça de #HTML, #CSS e #JavaScript que estou fazendo na twitch.tv/marcobrunobr às 19:32 (BR) de segunda e terça. Não tem problema você pode assistir o episódio #04 no YouTube da CollabCode:

https://www.youtube.com/watch?v=TUyVirq713o

Hoje às 19:32 (Brasília) na #twitch (http://bit.ly/twitch-marcobrunobr-telegram) finalizaremos o nosso cadastro de usuário e começaremos o login. Tudo isso ao vivo e 100% de graça, em um projeto real e #opensource

Estamos fazendo o #backend e o #frontend com #JavaScript. Vem trocar conhecimento!

@GuiaDev
No dia 15/11 vou estar no #DevelopersSergipe para falar um pouco mais de #JavaScript, #Node e #Kubernetes! Bora lá pessoal! https://lnkd.in/drKQx8f

Hoje curso de graça e ao vivo de #HTML, #CSS e #JavaScript com boas práticas:

🔴 Local: http://twitch.tv/marcobrunobr
🗓 Dia: 28/01/2020
⏰ Horário: 19:00 às 21:00 (Brasília)
📙 eBook grátis: http://bit.ly/ebook-curso-html-css-javascript

Chame uma pessoa para estudar com você! 😉

@erickwendel: Chegou a hora de parar de usar callbacks em aplicações Javascript!
Mesmo em bibliotecas antigas, é possível converter para a abordagem mais nova do Javascript e melhor, usando tudo que há de novo na linguagem!
https://youtu.be/_gmXKsVS40s

Já que sexta-feira é dia de maldade, é também dia de polêmica! A mensagem deste video é "Pare de usar console.log" nele vou te mostrar alternativas e padrões para evitar a poluição de seu terminal com logs desnecessários!

https://bit.ly/consolelog-video-ew

Ah, e nao esquece de comentar sobre o que voce quer ver nos proximos videos! Te espero lá!! 👊

Para quem ainda não viu, fiz essa super video aula falando sobre padrões de projeto, estrutura de pastas, e uma API Completa sem frameworks! 100% gratuita e com conteúdo pra estudar para o resto do mês ahhaha


https://youtu.be/NxHY14rMPvc

https://www.ddinstagram.com/reel/C4Ogom0vio0/?utm_source=ig_web_copy_link

Uma curiosidade aí pra vocês.