Prova Front-End Pleno

Objetivos Realizados

• Front-end desenvolvido de acordo com os arquivos PSD da prova;
• Resultado responsivo com versão mobile deve condizente ao arquivo PSD mobile;
• Código semântico, bem organizado, estruturado e correto;

Observações

• Nenhum framework ou pré processadores CSS foram utilizados;
• O conteúdo final está totalmente funcional na última e penúltima versão dos principais navegadores, como o Google Chrome, Mozilla Firefox, Safari e Microsoft Edge, e Opera.
• Todas as funcionalidades requisitadas pela prova foram implementadas no projeto.

Diferencial:

• O projeto faz o uso do automatizador de tarefas Gulp Js, sendo utilizado mais de 10 plugins nativos do gulp para operar nas funções;

• Efeitos animados em todos os elementos interativos:

  dot-prova-pleno-animations.mp4

  [alt: vídeo de ilustração dos principais efeitos animados]

Iniciando as Tarefas Gulp

Execute o seguinte comando em seu terminal para instalar as dependências gulp:

npm install

Estão disponíveis para uso as seguintes tasks:

• gulp default ou gulp

  • Constrói a pasta dist para receber o diretório src otimizado. A otimização oferece: arquivos de imagem, estilo e script minificados, concatenados, compilados, transpilados, com sourcemap e prefixes.

• gulp watch

  • "Assiste" a pasta src, logo, qualquer mudança dentro do diretório executará a tarefa glup default. É recomendado NÃO criar nenhum arquivo fora da pasta assets.

• gulp clsdist

  • Deleta a pasta dist.

• gulp imgmin

  • Minifica imagens em PNG, JPEG, GIF e SVG. Use ela apenas se estiver tendo problemas com o tinypng, pois o minificador do tiny já é executado por padrão a partir da task gulp default.

Performance

Como forma de mostrar o quão poderoso é o Gulp Js, logo abaixo estão os resultados de seu uso dentro do sistema:

Podemos dizer que a pasta dist é o resultado da otimização completa sobre a pasta src, visto que, tivemos um ganho de 70% de performance ao calcularmos a diferença entre o peso dos dois diretórios da aplicação.

Além disso, o total de 18 arquivos foi reduzido em 10, economizando os requests da página e aumentando sua velocidade de carregamento. Isso tudo devido à concatenação de arquivos CSS e JS.

Solução para "primordials error"

Caso apareça o erro "ReferenceError: primordials is not defined" ao executar alguma task, realize os seguintes passos solucioná-lo:

• Passo 1 - crie um arquivo json chamado npm-shrinkwrap (caso ele já exista, apague-o e crie outro);
• Passo 2 - cole o seguinte código nele:

{
  "dependencies": {
    "graceful-fs": {
        "version": "4.2.2"
     }
  }
}

• Passo 3 - execute npm install em seu terminal, e o erro sumirá.