Front-end

5 motivos para estudar React

Utilizada em milhares de aplicações, o JavaScript certamente está entre as linguagens de programação mais importantes. Isso tudo se deve também aos frameworks e bibliotecas que a tem como base, fazendo com que o JavaScript atinja novos patamares constantemente. Sendo assim, este artigo irá lhe apresentar cinco motivos para você aprender a biblioteca JavaScript mais famosa da atualidade: o React.

React está em alta no mercado

Podemos nos basear em dois indicadores de que algo está em alta no mercado: o alto número de pessoas que estão envolvidas e a quantidade de empresas que estão utilizando a ferramenta, sejam elas grandes, médias ou pequenas empresas. No caso do React, ambos estão em alta! Além disso, também podemos ver uma grande quantidade de oferta de vagas que pedem essa biblioteca. Aprender algo que tem uma boa aceitação no mercado é excelente.

Um dos fatores de sua popularidade é por ele ter sido criado pelo Facebook. Essa biblioteca de código aberto, que faz parte dos projetos open-source do Facebook, faz com que ele realmente ganhe muita visibilidade.

Segundo uma pesquisa do Stack Overflow deste ano (2020), podemos ver alguns indicadores. Ao focar puramente em estruturas da web, vemos que jQuery ainda é o líder, mas está lentamente perdendo terreno. Enquanto isso, o React vem aumentando sua participação no mercado.

Também podemos ver como os desenvolvedores gostam dessa biblioteca: ela está no topo entre os frameworks/bibliotecas mais amados e procurados.

Do React para o React Native

Ao aprender essa biblioteca, você não somente aprende como fazer interfaces web melhores, como pode usar os mesmos conceitos para fazer aplicativos para Android e iOS. Ao aprender o React, você pode complementar seus estudos com o React Native. O React Native também é disponibilizado de forma open-source pelo Facebook, permitindo criar aplicações móveis com interface nativa para iOS e Android. Ele se utiliza dos mesmos conceitos e design do React, exigindo baixo nível de esforço.

O React é flexível

Essa é uma ótima vantagem que resume bem um dos motivos para se aprender o React: ele é flexível e facilita a interface com outras bibliotecas e frameworks. Além disso, mesmo sendo uma bibioteca SPA, ele torna possível escrever aplicações que renderizam no servidor através do Next.js, fazendo com que as páginas carreguem mais rapidamente.

React - Introdução
Curso de React - Introdução
CONHEÇA O CURSO

Uso de componentes reutilizáveis

Uma das suas principais características é a utilização de componentes que, em conjunto, criam uma interface. Com ele, você pode criar, reutilizar e combinar componentes no seu código. Um componente é como se fosse uma função JavaScript que permite dividir a interface em partes independentes e reutilizáveis, livre de outras dependências externas.

Nós podemos reutilizar um simples componente em múltiplas interfaces, onde componentes podem conter outros componentes. Isso facilita a manutenibilidade e o acompanhamento do código.

Facilidade no aprendizado

React, antes de tudo, é JavaScript. Se você já tem experiência com JavaScript, é possível absorver toda a proposta do React facilmente, criando aplicações modernas com pouco tempo de estudo. Considerando todos os itens acima, podemos afirmar que hoje, certamente, ele está entre os melhores frameworks JavaScript disponíveis no mercado.

Desenvolvedores iniciantes, antes de iniciarem seus estudos em algum framework ou biblioteca (no caso do React), devem adquirir uma boa base de front-end. Estude primeiro os fundamentos, conceitos, HTML, CSS e JavaScript. Aí sim depois você estará pronto para iniciar no mundo do React.

Testes de Performance JavaScript

Olá Web Developers! Há momentos em que precisamos que um determinado código tenha um melhor desempenho. Certamente você já deve ter visto vários códigos diferentes fazendo a mesma coisa. Então vem a dúvida: no código que preciso criar, qual será mais rápido? E então vamos precisar fazer testes de performance.

Vamos conhecer algumas maneiras mais simples para se fazer isso.

console.time()

O console do JavaScript possui vários métodos. A fim de calcular o tempo de uma operação, temos o método time(). Precisamos passar para ele um nome que servirá de identificador único para o nosso timer. Após a execução do que queremos calcular usamos o método timeEnd(), com a finalidade de encerrar o timer criado.

Em uma mesma página você pode ter até 10.000 timers. Então pode ficar tranquilo que não vai faltar 😂

console.time('meu timer');
minhaFuncao();
console.timeEnd('meu timer');

Como resultado teremos o nome do timer impresso seguido do tempo, em milissegundos, que a operação levou para ser concluída.

JavaScript Console - Time

Já que o console do navegador fica responsável por calcular o tempo por um simples nome, é muito útil caso você queira indicar o início da contagem em um arquivo e quer finalizar em outro.

Google Chrome Developer Tools
Curso de Google Chrome Developer Tools
CONHEÇA O CURSO

performance.now()

A API performance possui o método now(), com o intuito de retornar o tempo que se passou desde que o documento foi criado. Portanto, ele também pode ser usado para fazer testes de performance.

const inicio = performance.now();
minhaFuncao();
const fim = performance.now();
console.log(`A operação levou ${fim - inicio} milissegundos`);

Conseguimos o tempo de execução da mesma forma. Porém, como o performance.now() nos retorna o tempo que se passou desde que o documento foi criado, a diferença entre início e fim fica por nossa conta.

JavaScript - Performance.now

Ferramentas Online

Também existem ferramentas online para esses testes de performance. Um exemplo é o https://jsben.ch/. Ele possui dois campos para se colocar códigos. Basta colocar os dois códigos que você quer comparar e mandar executar. Como resultado teremos uma indicação de qual foi o código mais rápido.

JavaScript Avançado
Curso de JavaScript Avançado
CONHEÇA O CURSO

Cuidado ao querer fazer testes de performance

Por mais que seja importante cuidar da sua aplicação para dar a melhor experiência possível ao usuário, evite ficar focando em micro-otimizações. Coisas como querer melhorar um looping com poucos elementos são desnecessárias.

Foque em coisas que exijam realmente muitos cálculos e que possam fazer a aplicação engasgar em dispositivos com hardwares mais simples. Isso se aplica normalmente a animações, jogos e outras coisas que possam precisar de várias execuções custosas em um período muito curto.

Se acaso sua aplicação não se encaixe nisso mas ainda apresenta alguns comportamentos que precisam ser melhorados, provavelmente utilizar a técnica de Debounce ou deixar as operações assíncronas já vai resolver.

Plop.js – Automatize a criação de arquivos

Olá Web Developers! Vamos conhecer o Plop.js, uma ferramenta incrível que nos permite automatizar a geração de arquivos em nossos projetos. Se você já precisou copiar o conteúdo de um arquivo já existente para criar outro, você precisa conhecer esta ferramenta!

Entendendo o problema

Caso você já tenha trabalhado com Angular, sabe que ele possui comandos do próprio Angular-CLI para gerar services, pipes, classes, modules, etc.

Por exemplo, se você precisar criar um Service, basta executar o comando para criá-lo. Assim será gerado automaticamente um arquivo com o nome do seu service, com código contendo o service com o nome que você escolheu, e ele automaticamente será inserido no seu módulo (atualização de arquivo).

Ou seja, com um simples comando você terá arquivos sendo criados e atualizados, já com o conteúdo pronto para você começar a programar. Então te poupa o trabalho de ter que escrever declarações repetitivas.

ng generate service hero
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor() { }

}

Porém, não temos essa praticidade em qualquer lugar. Um ótimo exemplo é quando trabalhamos com React. Por ser uma biblioteca, ele não é tão opinativo quanto frameworks como o Angular. Em resumo, cada um pode criar sua própria estrutura, modo de escrever seus códigos, bibliotecas, etc. Esta é uma das diferenças entre bibliotecas e frameworks.

Por consequência, não temos uma ferramenta que gere arquivos para nós. Isso muitas vezes faz com que a gente acabe criando um arquivo vazio e escrevendo tudo, ou até mesmo copiando um arquivo existente para acelerar um pouco. Com o Plop.js você economiza aqueles 5 minutos para cada arquivo criado, seja rota, componente, controller, arquivo de teste, etc.

Plop.js vem ao resgate!

Uma vez que seu projeto começa a crescer, é preciso ter uma boa estrutura, organização e padrões. Também é importante que todos do time sigam esse mesmo padrão.

Com o intuito de resolver isso, o Plop.js nos permite criar comandos que vão gerar arquivos com a estrutura que queremos de forma bem simples!

Grandes empresas utilizam o Plop.js, como Microsoft, PayPal, Adobe e Mozilla.

A imagem abaixo mostra o Plop.js sendo iniciado em um projeto React, me perguntando se quero criar um componente, serviço, hook ou uma estrutura para Redux-Saga (action, reducer e saga).

Plop.js - Escolhendo gerador

Angular - Introdução
Curso de Angular - Introdução
CONHEÇA O CURSO

Instalando o Plop.js

Primeiro precisamos instalar o Plop.js em nosso projeto. Execute o comando:

npm install --save-dev plop

No package.json vamos adicionar um comando para iniciar o Plop!

{
    ...
    "scripts": {
        "plop": "plop"
    }
}

Agora poderemos iniciar o Plop.js com o comando npm run plop.

Iniciando seu primeiro gerador

Crie na raiz do seu projeto um arquivo com o nome plopfile.js com o seguinte conteúdo:

module.exports = function (plop) {

};

Estamos expondo uma função que o Plop.js vai executar e passar para ela o objeto plop como parâmetro. Este objeto possui várias funções a fim de nos permitir criar nossos geradores.

Já podemos criar os geradores dentro desta função. No entanto, em projetos grandes isso vai gerar uma bagunça. Portanto, prefira criar um arquivo para cada gerador.

Por isso, vamos criar uma pasta chamada plop e dentro vamos criar um arquivo chamado hook-generator.js. Ele vai servir para gerarmos um React Hook.

Em hook-generator.js vamos ter o seguinte código:

module.exports = function (plop) {

};

É um código igual ao que fizemos antes, mas agora ele está em um arquivo separado. Então vamos conectá-lo ao arquivo principal, o plopfile.js;

const hookGenerator = require('./plop/hook-generator.js');

module.exports = function (plop) {
    hookGenerator(plop);
};

Dessa forma estamos fazendo com que o plopfile.js seja um lugar onde chamamos nossos geradores ao invés de declará-los diretamente aqui.

Iniciando um gerador de React Hooks

Volte ao arquivo hook-generator.js para podermos ver como é simples criar um gerador de arquivos.

module.exports = function (plop) {
    plop.setGenerator('hook', {
        description: 'Gerador de React Hooks',
        prompts: [],
        actions: []
    })
};

É desse modo que iniciamos um gerador. Vamos entender cada uma das suas partes:

  • setGenerator: Função para criar um gerador. Ela recebe uma string indicando seu nome e um objeto indicando suas configurações
  • "hook": Indica o nome que demos ao gerador
  • description: Campo para colocarmos uma descrição sobre o nosso gerador
  • prompts: Array que vai receber objetos que vão indicar as perguntas que o terminal vai fazer para nós respondermos, para assim ele saber como criar o arquivo.
  • actions: Outro Array, e ele vai receber objetos que vão indicar as ações que o Plop vai ter que executar baseado em nossas respostas.

Partiremos agora para o prompts. Para criar um hook, vamos simplesmente pedir para o usuário indicar o nome do hook a ser criado. Assim poderemos usar esse nome para criar o nome do arquivo e já criar um código com esse mesmo nome.

Em resumo, vamos usar os prompts quando precisarmos ter o valor de alguma variável. Vamos chamar essa variável de nomeHook. Ficará assim:

    ...
    prompts: [
        {
            type: 'input',
            name: 'nomeHook',
            message: 'Digite o nome do Hook: '
        }
    ],
    ...
  • type indica o tipo de entrada que vamos usar. Para permitir que o usuário escreva, utilizamos o input
  • name é o nome da variável
  • message é o texto que o terminal vai imprimir para pedir uma ação do usuário
React - Despertando o Poder dos Hooks
Curso de React - Despertando o Poder dos Hooks
CONHEÇA O CURSO

Definindo Ações

Para encerrar, precisamos indicar uma ação a ser executada. No nosso caso, um arquivo vai ser criado. Com o intuito de criar um arquivo com o código que quisermos usando as variáveis que pegamos em prompts, criamos um arquivo de template que usa Handlebars.

Crie um arquivo chamado hook-template.hbs. Dentro dele teremos o template do nosso código. Você pode escrever do jeito que quiser.

import { useState, useEffect } from 'react';

export function use{{nomeHook}}(){
    const [value, setValue] = useState(null);

    useEffect(() => {

    }, []);

    return value;
}

Então criamos aqui uma estrutura genérica para um React Hook. Esse é o conteúdo que o Plop.js vai colocar no arquivo que for gerado. Porém, veja que no nome da função escrevemos {{nomeHook}}. O Handlebars vai trocar essa parte pelo nome da nossa variável. Ou seja, se o usuário escrever Scroll, teremos uma função com o nome useScroll().

Por fim, para fazer esse arquivo ser gerado, vamos escrever nossa action.

    ...
    actions: [
        {
            type: 'add',
            path: 'src/hooks/use{{nomeHook}}.js',
            templateFile: 'plop/hook-template.hbs'
        }
    ]
    ...
  • Como queremos criar um novo arquivo, o tipo da ação deve ser add.
  • Em path indicamos o caminho do arquivo e seu nome. Note que colocamos {{nomeHook}} para que seja trocado pela nossa variável. Assim o arquivo será criado com esse nome.
  • templateFile indica o arquivo com a template que será usada para inserir conteúdo no arquivo a ser criado.

Executando o Plop.js

Finalmente, basta executar o comando npm run plop. Como só temos um gerador, ele vai iniciá-lo automaticamente. Vamos dar ao nosso hook o nome Scroll.

Plop.js sendo iniciado pelo terminal

Assim que você pressionar Enter, o arquivo do jeito que queríamos será gerado, como você pode ver na imagem abaixo:

Plop.js - React Hook gerado automaticamente

Desenvolvedor React Sênior
Formação: Desenvolvedor React Sênior
Nesta formação conheceremos a Arquitetura Flux, muito utilizada nas aplicações modernas e que nos trás muitos benefícios em relação às arquiteturas clássicas como o MVC. Aprenderemos a sua principal implementação, o Redux. Também veremos a trabalhar com código assíncrono com Redux Thunk e conceito de programação funcional com Redux-Saga.
CONHEÇA A FORMAÇÃO

O que é Bootstrap?

Os frameworks são ferramentas incríveis e que poupam muito tempo dos desenvolvedores. Neste artigo, vamos conferir o Bootstrap, um dos mais populares frameworks front-end atualmente.

Afinal, o que é o Bootstrap?

O Bootstrap é um framework front-end gratuito e de código-fonte aberto, que disponibiliza componentes prontos para você utilizar em seu projeto. Com ele, você consegue criar e personalizar sites responsivos para dispositivos móveis, desktops e notebooks, com componentes pré-construídos e com plugins JavaScript poderosos. Tudo isso porque toda a estrutura do HTML, CSS e Javascript já se encontram prontas, bastando apenas que o desenvolvedor importe suas dependências em seu projeto.

Por exemplo: se você quer colocar em seu site um botão estilizado, você pode utilizar o componente button do Bootstrap diretamente, ou mesmo fazer pequenas customizações no componente para que ele tenha a aparência desejada. Com estes componentes pré-prontos, você ganha tempo, o que consequentemente faz com que seu projeto seja finalizado mais rapidamente, com menos esforço e até mesmo com mais qualidade.

Primeiramente, o Bootstrap foi desenvolvido pelo Twitter, onde inicialmente era apenas um projeto para padronizar o desenvolvimento dentro da própria empresa. Porém, no meio do desenvolvimento do projeto, a equipe percebeu o potencial que este framework tinha para impactar e trazer benefícios para a comunidade. Dessa maneira, ele foi liberado em 2011 já como um projeto open source, ou seja, para que os outros desenvolvedores pudessem contribuir. De lá pra cá, nesse meio tempo, foram muitas mudanças até chegar sua atual versão 4, que possui inúmeras novidades tanto nos componentes CSS quanto nos componentes JavaScript.

Por que utilizar o Bootstrap?

O Bootstrap segue os princípios de usabilidade e tendências de design para interfaces. Além disso, sua padronização permite que os sites tenham um visual atraente, ou seja, uma forma de criar páginas esteticamente agradáveis aos usuários. Ele conta ainda com componentes e plugins já prontos para você utilizar em seus projetos, o que faz com que você ganhe muita produtividade na hora de desenvolver.
Você pode adaptar o modelo-base do Bootstrap para atender às necessidades do seu projeto.

framework Bootstrap

As APIs do Bootstrap são tão poderosas e flexíveis que você tem total liberdade para personalizar os componentes da maneira como desejar com um mínimo de esforço. Nas figuras abaixo, temos exemplos de componentes do Bootstrap que foram livremente personalizados.

Componentes do Bootstrap

Com o Bootstrap, você também não precisa se preocupar se seu site funcionará bem em todas as diferentes resoluções de dispositivos: o Bootstrap já contém componentes responsíveis, já diminuindo consideravelmente o esforço envolvido na criação de interfaces plenamente responsivas.

Vantagens e desvantagens

Algumas vantagens e algumas desvantagens podem ser destacadas com relação a este framework.

Vantagens:
  • Responsividade: possui um sistema de layout 100% responsivo, capaz de manter a página completamente responsiva em diferentes dispositivos e resoluções;
  • Extensa biblioteca de componentes: possui um conjunto de componentes extenso, como ícones, painéis etc.;
  • Documentação: possui uma documentação bem completa e acessível;
  • Reuso de código: Como o Bootstrap entrega uma gama muito grande de componentes pré-prontos, se torna muito mais fácil lidar com questões como reusabilidade de código.
Desvantagens
  • Excesso de padronização: como a gama dos componentes pré-prontos é extensa e atende a praticamente todos os cenários no que diz respeito ao desenvolvimento de páginas web responsivas, as diferentes aplicações podem acabar ficando “com a mesma cara”. Porém, sua customização é bastante simples.
Bootstrap 4 - Fundamentos
Curso de Bootstrap 4 - Fundamentos
CONHEÇA O CURSO

Como aprender sobre o Bootstrap?

O Bootstrap é muito simples para aprender e customizar. Além da documentação oficial, temos os nossos cursos de Bootstrap, que acabaram de ser atualizados. Então, vale a pena dar uma conferida 🙂

Se você é um desenvolvedor front-end ou deseja seguir essa carreira, é interessante colocar o Bootstrap em seu plano de estudos. Ele irá te auxiliar muito no desenvolvimento de seus sites, fazendo-o ter muita produtividade. Você também pode utilizá-lo com outras ferramentas atuais do mercado como o Angular e o React.

Quando falamos de frameworks de componentes visuais, o Bootstrap não é o único no mercado. Alguns de seus concorrentes diretos são o Materialize e o Foundation. Porém, a simplificação e a baixa curva de aprendizagem ainda fazem o Bootstrap ser um dos frameworks mais adotados pelo mercado.

O que é DOM, Virtual DOM e Shadow DOM?

Olá Web Developers! Vamos entender de forma simplificada o que é o DOM e qual a diferença entre ele e os tão falados Virtual DOM e Shadow DOM.

O que é o DOM?

DOM significa Document Object Model (Modelo de Objeto de Documento). Ele é uma API que nos permite acessar e manipular documentos HTML e XML válidos.

Vamos usar o seguinte código como exemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>Minha Página</title>
    </head>
    <body>
        <h1>Olá Web Developers!</h1>
        <p>E mais um texto aqui</p>
    <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"NRJS-e7d61b56663ee7a3078","applicationID":"463033615","transactionName":"Y1FWYRZZV0NTUhUIXlobYUcNF05AHUYRTFBQWV1bS0hWQ0YfEQlB","queueTime":0,"applicationTime":871,"atts":"TxZVF15DRE0=","errorBeacon":"bam.nr-data.net","agent":""}</script></body>
</html>

Ele pode ser representado pela seguinte estrutura em árvores de nós (Node Tree):

Mesmo que se pareça muito com nosso código, o DOM não é exatamente igual a ele. Quando o HTML não é válido, os navegadores tentam arrumá-lo, gerando um DOM um pouco diferente. O DOM também não é exatamente o que vemos nas DevTools. Um exemplo são os pseudo-elementos criados com CSS. Não podemos acessá-los com JavaScript porque não fazem parte do DOM.

React - Tópicos Avançados
Curso de React - Tópicos Avançados
CONHEÇA O CURSO

O que é Shadow DOM?

O Shadow DOM é uma tecnologia do navegador projetada para podermos criar componentes que contém uma aparência e comportamento sem influenciar os demais elementos a sua volta, escondendo sua estrutura.

Um exemplo bem simples: se você trabalha com HTML, provavelmente já viu a tag <video>, certo? Criei um arquivo apenas com esta tag. Mas ao mandar o navegador exibir o Shadow DOM, veja o que aparece:

Esta é toda a estrutura escondida dentro da tag <video>. Note que há várias <div>. Deixei selecionado no código um elemento, que é a barra de progresso do vídeo. Veja que ela é feita por um <input> do tipo range. E há vários outros elementos responsáveis pela estrutura e funcionamento da tag <vídeo>.

E não precisamos saber do que o elemento de reproduzir os vídeos é feito, como ele funciona ou como é estilizado. O Shadow DOM nos permite criar elementos assim, que possuem estrutura, estilo e comportamento encapsulados. Então o JavaScript e CSS de um componente não corre o risco de afetar outro componente. Basicamente essa é a diferença com o DOM comum: encapsulamento.

O que é Virtual DOM?

Quando estamos desenvolvendo aplicações com HTML, é por meio do DOM que podemos manipular os elementos presentes nele. Porém, cada acesso ao DOM leva um pequeno tempo, e cada alteração obriga o navegador a renderizar novamente a parte da tela afetada. Então se tivermos muitas coisas para atualizar, nossa aplicação terá problemas de perfomance.

É aí que entra o Virtual DOM (VDOM). Ele é uma representação do DOM mantida em memória. Assim, quando precisamos fazer alguma alteração, ela é feita no Virtual DOM, que é bem mais rápido que o DOM. Com isso ele analisa todos os lugares que serão afetados e sincroniza com o DOM em um processo chamado Reconciliação. A vantagem disso é que essa análise permite que haja o menor número possível de acessos ao DOM, melhorando muito a performance das aplicações.

Lembrando que o Virtual DOM não é algo do navegador, e sim, um conceito implementado por bibliotecas como o React.

Por ser algo feito em memória, e não algo preso ao DOM criado pelo navegador, o Virtual DOM também permite que a gente crie páginas no servidor. Hoje em dia é comum que algumas aplicações renderizem a tela inicial no servidor para enviar um HTML pronto com os dados ao usuário, passando a impressão de que tudo já foi carregado, para só então carregar o resto da aplicação. Isso pode ser feito utilizando bibliotecas e frameworks como Angular, React e Vue. Um caso bem famoso que utiliza esta técnica é a Netflix.

Desenvolvedor React Sênior
Formação: Desenvolvedor React Sênior
Nesta formação conheceremos a Arquitetura Flux, muito utilizada nas aplicações modernas e que nos trás muitos benefícios em relação às arquiteturas clássicas como o MVC. Aprenderemos a sua principal implementação, o Redux. Também veremos a trabalhar com código assíncrono com Redux Thunk e conceito de programação funcional com Redux-Saga.
CONHEÇA A FORMAÇÃO

JavaScript – Ordenando Elementos por Cores

Olá Web Developer. Hoje vou mostrar como ordenar elementos por cores usando JavaScript. Isso pode ser útil caso você tenha algo como uma galeria de fotos. Além disso também vamos acabar aprendendo como fazer conversão de cores entre os modelos RGB e Hexadecimal.

Eu usei quando fui criar uma imagem para o Instagram mostrando os cursos da TreinaWeb. Criar um código para ordenar os elementos do site e tirar print da tela foi bem mais rápido do que fazer manualmente em um editor de imagem, e teve um resultado melhor do que quando tentei ordenar os elementos do HTML manualmente também.

Como definir a ordem das cores?

O modo mais comum de se ordenar cores é usando o Círculo Cromático, mostrado na imagem abaixo:

Eu já falei sobre ele e sobre como combinar cores aqui no blog. Não se esqueça de dar uma conferida!

É muito comum em programação utilizarmos os modelos RGB ou Hexadecimal para declarar cores, porém, o que vem depois de rgb(32, 15, 59)?.

Desenvolvedor Front-end Sênior
Formação: Desenvolvedor Front-end Sênior
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

Também temos o modelo HSL (Hue – Matiz/Tonalidade, Saturation – Saturação, Lightness – Brilho). As cores (vermelho, verde, azul, etc) são definidas pela matiz, a qual é indicada por um ângulo no círculo. Começamos no topo, 0º, que indica o vermelho, e podemos ir mudando de cores conforme vamos indo aos 360º. Isso é bem melhor para usarmos na ordenação, depois de 121 vem 122, simples assim.

Então a primeira coisa que vamos fazer é converter nossas cores para o modelo HSL.

Convertendo Cores para HSL

É mais simples fazer a conversão para HSL a partir do modelo RGB, que possui números de 0 a 255. Se você estiver com cores em Hexadecimal, que utiliza valores entre 00 e FF, basta converter para RGB primeiro.

Hexadecimal para RGB

Os valores entre 00 e FF são basicamente 0 a 255 em hexadecimal. Isso é fácil de converter. Vamos criar uma função que vai pegar cada par de cores do código hexadecimal e retornar como números na base decimal. Então um FF deve retornar 255.

// exemplo de cor: #15FA3D
function hexToRGB(color){
    color = color.replace('#', ''); // vamos remover o #
    // e pegar os valores de Red, Green e Blue
    let red = color.substr(0, 2),
        green = color.substr(2, 2),
        blue = color.substr(4, 2);
    // agora vamos converter a string em número com o parseInt
    // por estar em hexadecimal, indicamos a base 16
    red = parseInt(red, 16);
    green = parseInt(green, 16);
    blue = parseInt(blue, 16);
    // e vamos retornar como um array
    return [red, green, blue];
}
// saída esperada: [21, 250, 61]

Formatando cores RGB

Já temos nossa cor hexadecimal em RGB em um formato de Array, o que nos facilita na hora de pegar cada uma das cores. Mas e se inicialmente já tivermos uma cor em RGB? Vamos criar uma função para formatar cores RGB para o formato que estamos usando.

É comum tanto o uso do RGB quanto o RGBA, então vamos primeiro deixar apenas os números, separar pelas vírgulas e pegar os valores de Red, Green e Blue.

// exemplo de cor: rgba(25, 15, 200, 0.8)
function formatRGB(color){
    // removemos as letras e parênteses
    color = color.replace(/[rgba()]/gi, '');
    // separamos por vírgulas
    color = color.split(',');
    // agora teríamos algo como ["25", " 15", " 200", " 0.8"]
    // vamos pegar cada um dos valores das strings e converter para números
    const red = parseInt(color[0]),
        green = parseInt(color[1]),
        blue = parseInt(color[2]);
    return [red, green, blue];
}
// saída esperada: [25, 15, 200]

Convertendo RGB para HSL

Para chegarmos na parte de ordenação precisamos das cores em HSL. Essa parte é um pouco mais complexa, então eu vou montar a função aos poucos para ir explicando melhor cada pedaço, e no final eu mostro a função inteira. Para não ficar repetindo, as partes já explicadas serão substituídas por ....

Vamos começar simplesmente declarando a função, que vai receber separadamente os valores de Red, Green e Blue.

function RGBToHSL(r, g, b){

}

Os valores de R, G e B sempre serão um número entre 0 e 255. Primeiro temos que transformar esses números em um valor entre 0 e 1. Para isso, basta dividí-los por 255.

function RGBToHSL(r, g, b){
    r /= 255;
    g /= 255;
    b /= 255;
    // lembrando que
    // r/= 255 é igual a
    // r = r / 255;
}

Agora vamos pegar qual o maior e o menor valor entre esses três números. Para isso utilizamos Math.min e Math.max.
Também vamos declarar uma variável chamada delta, que vai indicar a diferença entre o maior e o menor valor, e por último já vamos declarar as variáveis h, s e l, que terão os valores para termos as cores no modelo HSL.

function RGBToHSL(r, g, b){
    ...
    let min = Math.min(r, g, b),
        max = Math.max(r, g, b),
        delta = max - min,
        h = 0,
        s = 0,
        l = 0;
}

Cálculo da Matiz

Agora podemos começar a calcular cada uma das propriedades. Primeiro vamos calcular Hue (matiz). Temos algumas regrinhas para isso:

  • Se todos os valores (r, g e b) são iguais, h deve ser 0.
  • Se a maior cor for Red, a fórmula deve ser ((g – b) / delta) % 6
  • Se a maior cor for Green, a fórmula deve ser (b – r) / delta + 2
  • Se a maior cor for Blue, a fórmula deve ser (r – g) / delta + 4

Podemos utilizar o delta para saber se todas as cores são iguais. Afinal, se o maior valor e o menor são iguais, isso significa que todos os valores são iguais, fazendo o delta ser 0. Então agora, seguindo essas regras, teremos:

function RGBToHSL(r, g, b){
    ...
    if(delta === 0){
        h = 0;
    }else if(max === r){
        h = ((g - b) / delta) % 6;
    }else if(max === g){
        h = (b - r) / delta + 2;
    }else{
        h = (r - g) / delta + 4;
    }
}

Depois de definir o valor de h, multiplicamos por 60 e arrendondamos. Como precisamos de um valor entre 0 e 360, precisamos arrumar caso apareça um valor negativo. Para isso, basta somar 360. Isso significa que -90 resultaria em 270.

function RGBToHSL(r, g, b){
    ...
    h = Math.round(h * 60);
    if(h < 0){
        h += 360;
    }
}

Cálculo do Brilho

Agora vamos calcular Lightness (brilho), já que a saturação depende dele. O cálculo do brilho é a soma do maior valor e do menor valor dividido por 2.

function RGBToHSL(r, g, b){
    ...
    l = (max + min) / 2;
}

Cálculo da Saturação

Agora vamos usar o delta para calcular Saturation (saturação). Se o delta for 0, a saturação também deve ser 0.
Se o valor for diferente de 0 devemos pegar 1 e subtrair o valor absoluto do dobro do brilho menos 1. Valor absoluto é basicamente deixar um número negativo na forma positiva. Então -45 ficaria 45.

function RGBToHSL(r, g, b){
    ...
    s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
}

Finalizando a conversão para HSL

Agora que temos os valores de S e L, mas eles estão entre 0 e 1. Para converter para valores entre 0% e 100% basta multiplicar por 100. Vamos usar .toFixed(1) para limitar um número depois da vírgula. Assim um valor 0.3752 vai se tornar 37.5.

function RGBToHSL(r, g, b){
    ...
    s = +(s * 100).toFixed(1);
    l = +(l * 100).toFixed(1);
}

Nossa função completa ficará assim:

function RGBToHSL(r, g, b){
    r /= 255;
    g /= 255;
    b /= 255;

    let min = Math.min(r, g, b),
        max = Math.max(r, g, b),
        delta = max - min,
        h = 0,
        s = 0,
        l = 0;

    if(delta === 0){
        h = 0;
    }else if(max === r){
        h = ((g - b) / delta) % 6;
    }else if(max === g){
        h = (b - r) / delta + 2;
    }else{
        h = (r - g) / delta + 4;
    }

    h = Math.round(h * 60);
    if(h < 0){
        h += 360;
    }

    l = (max + min) / 2;
    s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));

    s = +(s * 100).toFixed(1);
    l = +(l * 100).toFixed(1);

    return [h, s, l];
}

Como temos nossas cores em um Array, como [25, 15, 200], podemos usar o operador spread para passar esses valores para a função, como:

const color = [25, 15, 200];
RGBToHSL(...color); // retorno: [243, 86, 42.2]
Desenvolvedor React Sênior
Formação: Desenvolvedor React Sênior
Nesta formação conheceremos a Arquitetura Flux, muito utilizada nas aplicações modernas e que nos trás muitos benefícios em relação às arquiteturas clássicas como o MVC. Aprenderemos a sua principal implementação, o Redux. Também veremos a trabalhar com código assíncrono com Redux Thunk e conceito de programação funcional com Redux-Saga.
CONHEÇA A FORMAÇÃO

Ordenando Cores

Agora que temos cores, tanto Hexadecimal quanto RGB, no formato HSL, podemos ordená-las. Como vimos, a matiz é definida pelo primeiro valor no modelo HSL. Então podemos usá-lo para ordenar nossas cores. Para isso basta utilizar o método .sort() dos Arrays e passar uma função para fazer a comparação entre as cores.

let colors = [
    "#fbb735", "#e98931", "#eb403b", "#b32E37", "#6c2a6a",
    "#5c4399", "#274389", "#1f5ea8", "#227FB0", "#2ab0c5",
    "#39c0b3"
];
// convertendo de hexadecimal para hsl
colors = colors.map(color => {
    // de hexadecimal para rgb
    color = hexToRGB(color);
    // de rgb para hsl
    return RGBToHSL(...color);
})

// ordenação pela matiz
colors.sort((a, b) => a[0] - b[0] > 0 ? 1 : -1 );

Resultado

Veja abaixo a implementação. Use os botões para gerar cores e depois para ordenar.

Você vai notar que a ordenação não é 100% perfeita. Isso porque utilizamos apenas a matiz para a ordenação, e o brilho e saturação também são muito importantes para a definição de uma cor. Mas para coisas mais simples esse código funciona muito bem, além de ter servido para aprendermos muitas coisas.

Para mais precisão, prefira utilizar bibliotecas como o color-sorter, onde podemos passar um Array de cores em qualquer formato, até mesmo misturando formatos. Ele também leva em conta coisas como saturação, brilho e transparência.

Veja como o resultado com essa biblioteca é mais preciso:

Há muitas maneiras de ordenar cores, e dependendo do que você quer pode ser necessário dar mais importância para uma propriedade ao invés de outra.

Como crescer no Front-End?

Olá Web Developers! Hoje trago uma coleção de dicas sobre como crescer na sua carreira no front-end.

Desafie-se e ignore a palavra impossível

Eu rio na cara do perigo

Algo que me ajudou muito no começo, e ainda ajuda, é se desafiar a fazer algo que você nunca fez. Isso vai te obrigar a pesquisar por soluções, o que fará com que você aprenda coisas novas.

E ignore a palavra “impossível”. Sempre que alguém me pergunta se é possível fazer uma funcionalidade X que funcione Y, eu digo que é totalmente possível e dou um prazo para a minha entrega. Confesso que várias vezes eu nem fazia ideia se realmente era possível e nem por onde começar, pois nunca havia feito ou visto algo parecido. Mas eu nunca deixei de entregar na data combinada.

Não sabendo que era impossível, ele foi lá e fez
– Jean Cocteau

Mas se comprometa. Se disser que fará algo e não conseguir você terá sua imagem manchada.

E claro que devemos manter o bom senso. Não prometa que um monitor comum pode saber onde o usuário tocou com o dedo, espelhar o fundo de uma página e gerar um holograma 😅
(ou será que dá? 🤔)

Aprenda a usar bem as suas ferramentas

Se você for a fundo em todas as funcionalidades que as ferramentas podem te oferecer, o seu desempenho e qualidade de trabalho vão melhorar muito.

Qual editor de código você usa? VS Code? Você realmente sabe quais os melhores plugins para te ajudar no seu trabalho? Você conhece todas as funcionalidades e atalhos ou só usa ele para escrever?

Se você trabalha com front-end deve estar usando o NPM. Você conhece todo o potencial do NPM além de simplesmente npm install e npm start?

Na hora de versionar seu código, você domina o Git além de simplesmente fazer commits?

Além dos nossos cursos de Git, NPM e outros aqui da TreinaWeb, também temos aqui no blog posts sobre dicas e truques de NPM e comandos do git que você precisa conhecer.

Também evite ficar fã de uma única ferramenta. Não tenha medo ou preguiça de experimentar algo novo, mesmo que seja muito diferente do que você está acostumado.

Leia códigos de terceiros

Ver como outras pessoas trabalham é uma ótima forma de aprender técnicas novas e como escrever um código mais limpo. Pode ser que alguém tenha tido uma sacada para resolver um problema que você passou dias quebrando a cabeça. Veja no GitHub como é o código de projetos famosos como React, Angular, Vue, ou qualquer outra ferramenta que você utilize.

Esqueça a W3Schools

Troque W3Schools por Mozilla

Nada contra a W3Schools. Eu comecei meus primeiros estudos de front-end por lá.

Acontece que as pessoas acreditam que por esse nome, ela pertença à W3C, o que passaria confiança e qualidade nas informações ali presentes. A W3Schools não tem nenhuma ligação com a W3C. Ela pertence a uma empresa norueguesa chamada Refsnes Data (informações presentes no próprio rodapé da W3Schools).

Constantemente são encontrados erros e material desatualizado (dito pela própria empresa), sem contar que não há material sobre tudo o que você pode pesquisar sobre HTML, CSS e JavaScript.

Ao invés disso, use a Mozilla (mesma organização por trás do Firefox). Eles mantêm uma documentação bem completa e atualizada (até mesmo com funcionalidades que ainda nem foram implementadas pelos navegadores), junto com exemplos práticos.

Desenvolvedor Front-end Pleno
Formação: Desenvolvedor Front-end Pleno
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos conhecer assuntos mais avançados do HTML5, CSS3 e JavaScript, conhecer o NPM, trabalhar com o RxjS (base do framework Angular), testes com Jasmine e uma pequena introdução ao TypeScript.
CONHEÇA A FORMAÇÃO

Experimente coisas novas

O JavaScript está presente em várias áreas. Se você é desenvolvedor front-end pode aproveitar para experimentar coisas novas com a linguagem que já conhece.

Você pode aprender a trabalhar com back-end, criar programas desktop, aplicativos mobile nativos, jogos, trabalhar com Internet das Coisas, Inteligência Artificial, etc.

Veja o nosso post sobre O que se pode fazer com JavaScript hoje em dia? para saber mais (e olha que tem muito mais coisas do que as presentes nesse post).

Siga pessoas, blogs e assista palestras

Seguir pessoas conhecidas na sua área é uma ótima forma de saber o que elas estão estudando. Há pessoas muito interessantes que estão sempre compartilhando conhecimento e participando de grandes projetos.

Você pode conhecer algumas delas nas entrevistas feitas aqui no blog da TreinaWeb. Recebemos convidados como Maujor, Loiane Groner, Diego Eis, Talita Pagani, Caio Ribeiro, etc. As redes sociais dessas pessoas estão nos posts.

Outras pessoas que recomendo seguir são: David Walsh, Lea Verou, Rebecca Murphey, Sara Soueidan.

Siga também blogs que passem informações e novidades, como é o caso do Blog da TreinaWeb. Há vários blogs por aí, mas dois que eu indico são CSS Tricks e Smashing Magazine.

Já conhece o nosso canal no YouTube? Lá postamos várias dicas sobre o mundo da programação.

Palestras também são um ótimo meio de se manter atualizado. Os palestrantes vão com o objetivo de divulgar novas tecnologias, ideias, experiências, etc. É um ótimo modo de aprender coisas novas, se manter atualizado e conhecer pessoas com quem você pode fazer networking.

Invista em você

Você não precisa gastar uma fortuna em certificações, mas aprender cada vez mais coisas novas te diferenciarão dos demais.

Se você acha que educação é cara, experimente a ignorância
– Derek Bok

Mesmo podendo aprender qualquer coisa sozinho e de graça na Internet, gosto de investir em cursos. Isso economiza muito o meu tempo, pois o instrutor já arrumou tudo o que preciso aprender em um único lugar, me poupando o tempo de pesquisar e procurar descobrir o que preciso aprender para executar algo. Sem contar que essas pessoas acabam também passando parte de suas experiências, te tando dicas para não cair em armadilhas que elas já caíram.

Ou seja, pagar por um curso ou livro pode ajudar a acelerar o seu crescimento e fazer com que você diminua problemas aprendendo com os erros das outras pessoas. E aqui na TreinaWeb temos até mesmo a área de Formações, onde indicamos uma lista de cursos que você deve seguir para alcançar seus objetivos. Você pode até pedir para criarmos uma formação personalizada para você.

Tenha boas conexões e relações

Por mais que eu já tenha passado em entrevistas em empresas muito legais, os melhores lugares em que trabalhei eu fui indicado por alguém.

E não estou dizendo apenas de pessoas que eram minhas melhores amigas. Você não é obrigado a gostar de todo mundo, mas é importante respeitar. E mostrando respeito pelos outros, humildade e eficiência em seu trabalho, as pessoas vão lembrar de você quando aparecer alguma oportunidade.

Até hoje, tanto grandes amigos quanto colegas que eu não gostava muito, me mandam mensagem avisando sobre vagas onde estão trabalhando.

Outra importância em ter boas relações é que em alguns lugares o cenário pode ser hostil, com pessoas querendo subir na empresa te ferrando. E se esse tipo de pessoa tiver algo contra você, ela pode acabar com a sua imagem ou até mesmo falar mal de você em outra empresa, o que vai te prejudicar caso você vá fazer entrevista em algum lugar e alguém já ouviu falar de você. Se você se der bem com as pessoas, elas vão acabar espalhando elogios relacionados ao seu nome por aí.

Isso é um assunto que daria para desmembrar em vários tópicos e fazer um post apenas disso. Apenas lembre-se que o mundo dá voltas e é melhor ter mais aliados do que inimigos.

Ensine ou finja ensinar

Uma das melhores maneiras de ter certeza de que entendeu algo é ensinar. Para ensinar algo você precisa ter as ideias bem organizadas e prontas em sua mente.

Se você não consegue explicar algo de forma simples, você não entendeu suficientemente bem.
– Albert Einstein

Mesmo com a minha experiência lecionando em sala de aula, criando vídeos para o YouTube, posts aqui para o blog e cursos para a TreinaWeb, quando fui escrever o meu primeiro livro a editora pediu para eu detalhar melhor alguns tópicos. Me pediram para justificar melhor e de forma bem mais simples algumas coisas.

Na hora de justificar por que fazer “A” ao invés de “B”, percebi que havia coisas que eu fazia no automático simplesmente porque “todo mundo escreve esse código assim”. E então pesquisei mais a fundo e pude entender melhor sobre alguns conceitos e como algumas ferramentas funcionam.

Então, será que você realmente sabe usar uma ferramenta ou será que apenas está seguindo o que os tutoriais da Internet te mandam fazer? Uma forma de averiguar isso é ensinando, pois as pessoas vão te questionar sobre alguns pontos.

Caso você não tenha um blog, canal no YouTube, etc, apenas finja estar explicando algo para alguém leigo no assunto. Será que a pessoa te entenderia?

Devo começar como Front-End, Back-End ou Full Stack?

Olá, Web Developers!

Muitos programadores no começo de suas carreiras acabam encontrando os termos Front-End, Back-End e Full Stack quando vão se candidatar a vagas de emprego. Então surgem as seguintes dúvidas: “o que devo seguir?”, “qual a mais difícil e qual a mais fácil?”, “qual paga melhor?”, etc.

Todos possuem vantagens e desvantagens. Vamos ver os pontos base sobre cada um.

Front-End

Desenvolvimento Front-End

Necessidades

O desenvolvedor Front-End terá que desenvolver as telas da aplicação que foram projetadas pelo Arquiteto e Designer, normalmente com HTML, CSS e JavaScript.

Este desenvolvedor também terá que saber analisar o trabalho do designer para poder seguir o que ele projetou, portanto também pode ser necessário saber o básico de softwares como PhotoShop, Illustrator, Adobe XD e Sketch.

Você não precisa saber sobre experiência de usuário e design, mas há empresas em que o próprio desenvolvedor Front-End precisa desempenhar os papéis de arquiteto e designer, tornando esses conhecimentos um diferencial deste profissional.

Há empresas que também vão querer um desenvolvedor Front-End para criar um site/blog feito com WordPress, então também pode ser interessante saber um pouco de PHP.

Desvantagens

O código feito por um Front-End é executado no cliente. Porém, não sabemos se o usuário está em um smartphone, tablet, notebook ou desktop. Será que o usuário está usando um bom Wi-Fi ou está com uma Internet móvel bem lenta?

Também não sabemos o sistema operacional, qual navegador, versão, etc. Um desenvolvedor Front-End precisa desenvolver um código que possibilite que a maioria dos usuários possam utilizar a aplicação sem problemas. Portanto, é necessário muitos testes em diversos ambientes.

Como estará em contato direto com o usuário, deverá entregar uma boa experiência, e isso se inicia no tempo de carregamento da aplicação. Portanto, também é preciso se preocupar com a otimização dos arquivos HTML, CSS, JS, imagens, etc.

Vantagens

Um Front-End tem como principal linguagem de programação o JavaScript, que está crescendo muito. Você pode ver mais no post O que se pode fazer com JavaScript hoje em dia?.

Além da web, este profissional pode aprender facilmente a criar aplicações desktop e mobile, desenvolver jogos e começar a trabalhar com Back-End utilizando apenas JavaScript.

Ele também não precisa se preocupar com performance do processamento feito no servidor e nem com o Banco de Dados.

Todas as empresas precisam de um Front-End, permitindo que você envie currículo para qualquer empresa.

Outro ponto é que o resultado do seu trabalho pode ser visto em ação (sistemas, aplicativos, sites, etc), permitindo deixar o seu currículo mais interessante.

Como normalmente as regras de negócio ficam no servidor, o Front-End pode ser um pouco mais amigável para quem não tem tanta lógica de programação (isso não significa que lógica é dispensável).

Hoje em dia as empresas estão valorizando cada vez mais o JavaScript, fazendo a demanda e o salário oferecido aumentarem, já que ainda há poucos Front-Ends de qualidade se comparar com a quantidade de desenvolvedores Back-End.

Back-End

Desenvolvimento Back-End

Necessidades

O desenvolvedor Back-End é aquele que responderá às requisições do cliente. Ele precisa saber alguma linguagem de programação, ter uma boa lógica para programar as regras de negócio do sistema, se conectar ao banco de dados para recuperar ou gravar dados, etc.

O banco de dados pode ser de responsabilidade de um profissional especializado, mas muitas vezes ele fica por conta do próprio desenvolvedor Back-End, fazendo da otimização de banco de dados algo interessante de se saber. Independente disso, o Back-End precisa saber mexer com banco de dados.

Além disso, este desenvolvedor também precisará saber publicar a aplicação, podendo ser necessário conhecimento em serviços como AWS ou Azure e a criação de contêineres como o Docker.
Para saber mais sobre o que é Docker, veja nosso post: No final das contas: o que é o Docker e como ele funciona?

Hoje em dia, dependendo do sistema, pode ser necessário que este profissional saiba lidar com Internet das Coisas (IoT), Aprendizado de Máquina (Machine Learning), Mineração de Dados (Data Mining), etc. Algumas destas habilidades será um grande diferencial deste profissional.

Desvantagens

Normalmente desenvolvedores Back-End tem mais familiaridade apenas com uma linguagem de programação, o que ilmita os lugares para onde podem enviar currículos. Então entra a questão: “devo estudar outra linguagem ou me especializar no que já sei?”

Se um Front-End pode enviar currículo para qualquer lugar, um desenvolvedor Back-End especializado em Java dificilmente será chamado por uma empresa que só trabalhar com Python, por exemplo.

Como lidam diretamente com a regra de negócio, precisam ser os mais atentos a cada detalhe, inclusive os dados enviados pelo Front-End, pois o cliente pode dar um jeito de burlar as regras do Front.

Devem estar atentos a vários casos de teste e lidar com a segurança do servidor para evitar ataques aos dados. Um pequeno problema aos dados e toda a empresa pode ter sérios problemas. Front e Back precisam estar atentos, mas erros no servidor podem ser muito mais graves.

Outro ponto é que a velocidade do Front-End muitas vezes vai depender das respostas do servidor, então também devem saber otimizar o banco e o código. Todos os usuários estarão acessando o seu servidor, então é preciso saber como escalar a sua aplicação para que ela não caia em um momento de grande quantidade de acessos.

Vantagens

O Back-End não precisa se preocupar com o dispositivo ou versão do navegador do cliente, pois seu código estará rodando em apenas uma única máquina a qual você mesmo pode configurar.

Um Front-End precisa saber logo de início HTML, CSS, JavaScript, deixar as telas funcionando em todos os tamanhos de dispositivos, etc, enquanto o Back-End precisará de uma linguagem de programação e um banco de dados, podendo o Back-End ser um pouco mais amigável para alguns iniciantes, principalmente os que tem boa lógica de programação e/ou aqueles que não se dão muito bem com as partes mais visuais de um sistema.

Além disso, hoje em dia ainda é muito comum que empresas paguem salários maiores para desenvolvedores Back-End, principalmente por sua alta responsabilidade com os dados da aplicação.

Full Stack

Pessoa Trabalhando

Necessidades

O NINJA! O Full Stack é o desenvolvedor que faz tanto Front quanto Back. Então tudo o que foi dito aqui são necessidades para que alguém seja considerado um verdadeiro Full Stack.

Mas deve-se tomar cuidado! Há desenvolvedores Back-End que só por saberem se virar com JavaScript e um pouco de CSS se consideram Full Stack (precisa mais que isso para ser Front), do mesmo jeito que muitos Front-Ends, por saberem como fazer uma API e salvar algo no Banco de Dados (precisa mais que isso para ser back), já se consideram Full Stack também.

Um verdadeiro Full Stack deve estar bem familiarizado com ambos os lados. Por esses motivos, muitos acreditam que um verdadeiro Full Stack é algo que não existe, como um ser mitológico. Porém, isto não te impede de ser Full Stack.

Há empresas que apenas esperam que uma mesma pessoa pegue dados do banco e exiba em uma tela, e depois pegue os dados da tela e salve no banco. Conseguir fazer o fluxo completo com qualidade já pode qualificar este profissional como Full Stack, mas é preciso se dedicar muito para fazer tudo isso com qualidade.

Você pode aprender mais sobre isso com o nosso curso MEAN 2 – JavaScript FullStack

MEAN 2 - JavaScript Full Stack
Curso de MEAN 2 - JavaScript Full Stack
CONHEÇA O CURSO

Desvantagens

As tecnologias estão sempre evoluindo, e é muito difícil se manter atualizado em várias coisas ao mesmo tempo, o que seria o ideal para quem quer se manter como Front e Back ao mesmo tempo.

Não confunda Full Stack (sabe bem Front e Back) com um generalista (sabe um pouco de tudo).

Vantagens

Possibilidade de enviar currículos para mais lugares e poder encontrar empresas que ofereçam salários maiores. Além disso, pode se oferecer para trabalhar apenas como Back ou apenas como Front.

Conclusão

Cada caminho possui vantagens e desvantagens. O melhor é analisar sua realidade, necessidade e objetivos para fazer a melhor escolha. E não se preocupe em ter que escolher certo de primeira, pois se não gostar da sua escoha sempre haverá tempo de recomeçar com algo diferente.

Confira também nosso Post sobre Ser especialista em algo ou saber um pouco de tudo?

TW Entrevista 12: Loiane Groner

Hoje trazemos para vocês uma entrevista com a Loiane Groner, que já escreveu diversos livros publicados internacionalmente e possui os títulos GDE (Google Developer Expert) e Microsoft MVP (Most Valuable Professional).

Se você ainda não viu, o Diego Eis foi o último entrevistado por nós.

Fale um pouco sobre você (de onde é, onde mora, o que faz, onde trabalha atualmente, etc)

Me chamo Loiane, trabalho há 10+ anos na área de TI como desenvolvedora, formada em Ciência da Computação, natural do Espírito Santo, porém nos últimos 9 anos morei em São Paulo (2 anos em Campinas e 7 na capital). Trabalho atualmente no Citibank como desenvolvedora e analista de negócios, e recentemente me mudei para os Estados Unidos.

Tenho um canal no Youtube onde publico tutoriais e cursos sobre desenvolvimento, já publiquei alguns livros em inglês pela Packt (editora Novatec traduziu o último livro lançado para o português) e já tive a oportunidade de palestrar em eventos no Brasil e EUA.

Desenvolvedor Java Júnior
Formação: Desenvolvedor Java Júnior
A formação Desenvolvedor Java nível Júnior da TreinaWeb tem como objetivo fornecer uma introdução ao desenvolvimento através do Java e todo o ecossistema para desenvolvimento da Oracle. Nesta formação, são abordados tópicos como o desenvolvimento da capacidade analítica, o paradigma orientado a objetos, a preparação do ambiente de desenvolvimento para o Java através do Eclipse e o controle de versão de código através do Git e do GitHub. Além disso, também são abordados aspectos mais essenciais da linguagem e estruturas importantíssimas dentro do ecossistema do Java, como a Stream API, que auxilia a lidar com coleções de dados; a implementação das estruturas de dados mais tradicionais como listas, filas e pilhas; e a API de coleções.
CONHEÇA A FORMAÇÃO

Quando e como você começou a se interessar pela área?

Essa parte é engraçada porque tudo foi uma decisão de qual curso fazer vestibular. Quando era adolescente sempre quis ser advogada/juíza, e perto do vestibular decidi fazer Ciência da Computação por gostar mais de responder perguntas e estudar a parte de exatas pro vestibular.

A decisão pelo curso de computação foi simplesmente por sempre ter sido curiosa por computadores (meu primeiro computador vivia no conserto por tentar comandos na linha de terminal, vivia estragando o sistema operacional por conta disso).

Naquela época pouco se falava sobre cursos de exatas e as informações não eram tão fáceis assim como hoje, onde temos quase tudo disponível na internet. Entrei na faculdade sem saber o que era algoritmos, custei a entender lógica de programação no primeiro semestre, mas depois me apaixonei e hoje não me arrependo da decisão.

Como foi seu primeiro trabalho na área?

Arrumei o primeiro trabalho/estágio ainda na faculdade, quando estava no segundo ano (quarto semestre). A faculdade tinha (até hoje tem) parceria com empresas e uma delas precisava de dois estagiários. Me inscrevi junto com um amigo e a coordenação do curso nos ajudou a conseguir as vagas.

Sabia apenas o básico do básico de Java (controles de fluxo e o básico de Orientação à Objetos). No estágio deram um treinamento pra gente de XML, SQL, controle de versão, web services e outros conceitos básicos.

Depois foram passando tarefas de desenvolvimento básicas e à medida que ia aprendendo, iam passando tarefas mais complexas. Trabalhei 2 anos nessa empresa. Me sinto muito sortuda pois tive dois mentores excelentes, que foram pacientes e me ensinaram muito. Trabalhei com Java backend, um projeto Java desktop (Swing), projetos Java web (com JSON e Ajax, que na época era super novidade, onde foi meu primeiro contanto com web também), relatórios, SQL e até um projeto .NET.

Como é a experiência como escritora? Ainda mais de livros que são distribuídos internacionalmente. Tem algum conselho para quem quer começar a escrever?

Comecei em 2009, quando publiquei meu primeiro post no blog loiane.com. Criei o blog para mim mesma, uma espécie de documentação e notas para que eu pudesse usar depois como referência e documentar o que estava escrevendo.

Depois que comecei a trabalhar numa multinacional e comecei a usar inglês no dia a dia, senti a necessidade de praticar mais a parte escrita, e como forma de praticar, criei um blog em inglês também. Escrevia os posts (tutoriais) em inglês e depois reescrevia o mesmo em português.

Depois de alguns anos, o blog começou a ganhar mais visibilidade e a editora entrou em contato com o convite para escrever um livro. Nunca imaginei que fosse ter tal oportunidade. A editora gostou da didática e depois foi convidando para escrever outros títulos também. Já convidaram até por conta de um repositório de exemplos no github.

Não tenho palavras para descrever o sentimento de ver uma pessoa lendo um livro seu e ver que aprendeu algo lendo o que você escreveu. É muito gratificante ver pessoas de diferentes partes do mundo consumindo seu conteúdo. Tenho guardado algumas teses de mestrado de universidades européias e canadenses que usaram algum livro meu como referência – isso não tem preço pra mim.

Os livros também foram incentivo para criar o canal no youtube. Como foram escritos em inglês, começaram a me puxar a orelha por não ter criado conteúdo em português, e aí decidi começar a fazer vídeos dos assuntos em português. É legal que são duas experiências bem diferentes: criar conteúdo escrito e em vídeo.

Algumas dicas:

  • Comece escrevendo para você mesmo. Hoje em dia existem diversas ferramentas que você não precisa se preocupar com domínio, hospedagem, etc. Publique algum tutorial ou algo que seja útil para você e depois compartilhe nas redes sociais (se te ajudou, pode ser que ajude outras pessoas também). Com o tempo você toma gosto e não consegue parar! rs
  • Algumas editoras pedem para ver conteúdo escrito já publicado (blog, etc) para ter uma noção do estilo de escrita, então a primeira dica é bem valiosa! rs
  • Você não precisa ser “O” expert no assunto para escrever. A motivação é sempre por compartilhar conhecimento. Até porque a gente aprende muito sobre o assunto enquanto escreve.
  • O público gosta muito de exemplos práticos. Mas é sempre bom colocar um pouco de teoria também, pois teoria é sempre a base e vai te ajudar a dar mais fundamento também.

Você é GDE (Google Developer Expert) e Microsoft MVP (Most Valuable Professional). Como conseguir esses títulos, quais as responsabilidades para mantê-los e que dicas dá para quem quer consegui-los?

Esses títulos são títulos de reconhecimento dados pelas respectivas empresas/comunidades a membros das comunidades que compartilham conteúdo sobre produtos dessas empresas.
Geralmente são pessoas ativas na comunidade que compartilham posts de blog, cursos, publicam livros, apresentam palestras em eventos, contribuem em projetos open-source, etc. A responsabilidade é continuar fazendo o que já vinha fazendo antes de receber o título, ou seja, compartilhar conhecimento porque gosta de fazê-lo!

Não tem uma receita de bolo para conseguir o título. Geralmente a pessoa já é um GDE ou MVP mesmo sem o título. Acaba vindo naturalmente. Esse post é bem legal sobre o assunto e pode ser aplicado a outros títulos também:

https://medium.com/@frosty/preparing-to-become-a-gde-752b551c88df.

Participar de comunidades é muito gratificante. É uma forma de aprender junto. Cada um compartilha o pouco que sabe e você aprende com outras pessoas que também estão compartilhando o que aprenderam. Além disso, participar de comunidades é uma ótima maneira de aumentar o networking. Já conheci várias pessoas em eventos, tive oportunidade de conhecer pessoalmente pessoas que apenas conversava pela internet e fiz amizades!

Quando estuda algo novo, qual a sua maior dificuldade e o que faz para contornar?

Sempre tento consumir diferentes tipos de conteúdo. Se for um framework novo por exemplo, primeiro acesso a documentação, e sigo os tutoriais. Gosto muito de ler livros também, pois fornecem uma base teórica muito boa.

Pra mim é importante saber usar uma ferramenta/framework, mas é importante saber como funciona também – e a base teórica vai me fornecer isso – saber como funciona ajuda muito nos casos complexos, e vai te ajudar a se diferenciar de outros profissionais também.

E cursos online: sempre tem algo ou um ponto de vista diferente que um instrutor pode te ensinar. Dificilmente consumo um curso ou leio um livro e saio sem aprender nada – mesmo achando que já saiba a tecnologia. Sou assinante de 2 portais de cursos e na empresa que trabalho também tem um grande portal de cursos liberado para os funcionários. E se for uma dúvida pontual, posts de blogs ajudam muito, principalmente com exemplos práticos também!

Resumo: estudar com diferentes formas de conteúdo sempre ajuda. Mas é importante saber o que funciona para você, pois cada um tem uma forma que aprender mais fácil.

Desenvolvedor Front-end Pleno
Formação: Desenvolvedor Front-end Pleno
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos conhecer assuntos mais avançados do HTML5, CSS3 e JavaScript, conhecer o NPM, trabalhar com o RxjS (base do framework Angular), testes com Jasmine e uma pequena introdução ao TypeScript.
CONHEÇA A FORMAÇÃO

Se pudesse falar com você mesma no começo de sua carreira, o que gostaria de falar? Teria algum conselho? Algum medo que gostaria de ter encarado ou alguma situação que poderia ter evitado?

Todos nós temos medo de algo, medo de tentar por achar não ser bom o suficiente ou achar que não tem mais idade pra isso (ou é muito novo). Não deixe de tentar por medo ou insegurança. O “não” você já tem.

E tenha paciência. Muita paciência. Algumas coisas na vida demoram, mas não perca o foco ou determinação. E as coisas acontecem para diferentes pessoas em diferentes momentos. Você vai ouvir muitos “nãos”, mas não deixe que isso te impeça de fazer algo ou de tentar novamente.

O que você considera que caracteriza um desenvolvedor raiz e um desenvolvedor Nutella?

Já vi alguns memes sobre o assunto. Mas acredito que todos nós nos dias de hoje somos uma versão híbrida. Hoje temos muitas ferramentas ao nosso dispor para solucionar problemas de forma mais fácil e rápida. Independente de título (programador, desenvolvedor, software engineer, etc), nosso trabalho é resolver problemas usando tecnologia, de forma a entregar a melhor solução para o cliente.

Como já disse anteriormente, aprenda a base, a teoria. Sim, é chato, é demorado, ir direto pra prática é muito mais legal. Mas depois tudo se torna mais fácil. Seja primeiro um dev raiz, para que você possa se tornar um dev nutella mais tranquilo e mais produtivo!

Como você explica a sua profissão para as pessoas que não são de TI?

Essa parte é sempre complicada. Geralmente falo que desenvolvo sistemas, que é basicamente falar para o computador o que precisa ser feito, uma sequência de passos, como uma receita de bolo. E existe uma forma especial de passar essa receita para o computador, que é através de uma língua que nós (humanos) podemos aprender que o computador também entende.

Escrevendo essa receita nessa língua, o computador entende o que precisa fazer e consegue executar os passos muito mais rápido que nós.

Fique Ligado!

Para seguir a Loiane Groner:

clipboard.js – Copiar e Colar com JavaScript

Olá, Web Developers!

Há momentos em que precisamos permitir que o usuário copie algo para a sua área de transferência (clipboard). Porém, isso pode ser complicado em alguns momentos, seja por APIs antigas ou implementação específica de algum navegador.

Um modo que era bastante usado tratava-se de criar um elemento em flash escondido na página. Isso permitia enviar os dados para a área de transferência do usuário, mas flash não é uma opção hoje em dia e alguns navegadores até o deixa desabilitado por padrão, como é o caso do Chrome.

Para facilitar essa tarefa de modo simples e com um código bem leve (3kb) veio ao mundo o clipboard.js. Ele usa a Clipboard API do HTML5 e foi criado pelo brasileiro Zeno Rocha.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Instalação

Você pode baixar o clipboard.js com o seguinte comando:

npm install clipboard --save

Ou faça download do arquivo js pelo site https://clipboardjs.com/.

Após incluir a biblioteca à sua página, instancie passando um seletor DOM, elemento HTML ou lista de elementos HTML.

new Clipboard('.btn');

Como usar?

Fazer a ação de um elemento copiar o conteúdo de outro elemento é um caso de uso bastante comum.

Na imagem abaixo temos um exemplo: um botão que faz com que o conteúdo de um input seja copiado.

Input com Copy to Clipboard

Para fazer isso funcionar, teríamos um HTML assim:

<!-- Target -->
<input id="input1" value="https://treinaweb.com.br">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#input1">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

Quando iniciamos a biblioteca, passamos a classe .btn. Isso fará com que as funções da biblioteca entrem em ação sempre que clicarmos em um elemento com a classe “btn”.

Veja que no nosso HTML temos um botão com essa classe. Mas como indicar para a biblioteca qual elemento possui o conteúdo que esse botão deve pegar e enviar para a área de transferência? Para isso a biblioteca usa atributos. Veja que no botão indicamos com o atributo data-clipboard-target o ID do nosso input.

Dessa maneira podemos ter vários botões com a classe “.btn”, e eles serão responsáveis por disparar a ação da biblioteca. Em cada botão a gente pode passar o id de um input. Veja que após iniciar a biblioteca a gente não precisou de mais nenhuma linha de JavaScript!

O comportamento padrão é o de copiar o texto. Caso você passe para o botão o atributo data-clipboar-action com o valor "cut", a ação de recortar será executada.

Também há a possibilidade de se ouvir eventos a partir do objeto clipboard que instanciamos lá no começo, além de outras funcionalidades mais avançadas.

Suporte

O clipboard.js funciona nos seguintes navegadores:

  • Chrome (42+)
  • Edge (12+)
  • Firefox (41+)
  • IE (9+)
  • Opera (29+)
  • Safari (10+)

Até a próxima!

JavaScript Avançado
Curso de JavaScript Avançado
CONHEÇA O CURSO

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200