6 Técnicas Para Otimizar Seu Site

Com o passar do tempo, começamos a desenvolver sites e aplicações mais ricas e poderosas, que possuem uma interface cheia de funcionalidades maneiras e lindas! Como todos sabem, Nada pode ser obtido sem sacrifício. Para se obter algo é preciso oferecer algo em troca de igual valor. Mas o que quer dizer isso? Significa que cada vez mais utilizamos recursos, importamos novas bibliotecas para auxiliar em nosso desenvolvimento, com intuíto de produzir a melhor aplicação possível e consequentemente deixamos nosso produto um pouco mais pesado. Isso pode transformar em um grave problema de performance.

Performance te ajuda a manter um usuário

De acordo com uma pesquisa realizada pelo Google, sites que demoraram até 5 segundos para carregar, possuiram sessões mais duradouras e rentáveis. Afinal, performance também diz muito sobre melhorar suas conversões!
Afinal, quem nunca desistiu de entrar em um site que demorava muito para carregar? É pensando nisso que será demonstrado neste post 6 Técnicas para otimizar seu site

Ler mais

Test Driven Development - O Que É TDD?

Em nosso dia-a-dia de desenvolvimento, nos deparamos com abreviações, metodologias e diversas informações diferentes e novas, uma delas que é muito falada é o TDD. Mas o que é TDD? O desenvolvimento orientado a testes(Test-Driven Development) é um processo de desenvolvimento de software que depende da repetição de um ciclo de desenvolvimento muito curto: os requisitos são transformados em casos de teste muito específicos e, em seguida, o software é aprimorado para passar apenas nos novos testes.

Desenvolvimento Guiado por Testes - TDD simples e prático!

Sim, tem como: desenvolver o software baseado em testes que são escritos antes do código de produção!
Com certeza você já ouviu (mas nunca tentou!) A ideia é antiga e tomou força em 2003 com o lançamento do famoso livro de TDD de Kent Beck, além de ser um dos pilares do Extreme Programming (XP) também.
Basicamente, o TDD se baseia em pequenos ciclos de repetições, onde para cada função, um teste é criado primeiro. Esse novo teste falha, visto que não temos nada implementado ainda, assim que implementado, o teste passa.

Ciclo de desenvolvimento

Definido em 3 etapas -> Red, Green e Refactor. ou seja:

  • Escrevemos um teste que de início, não passa -> Red
  • Implementamos a funcionalidade
  • O teste inicial agora passa -> Green
  • Refatoramos o código da nova implementação -> Refactoring
  • Próximo teste!

Ler mais

Como Centralizar Uma Div No Meio Da Página

Centralizar um conteúdo no centro de um elemento é uma situação comum de acontecer. Existem diversas formas de fazer isso, mas nesta publicação, mostrarei como centralizar uma div utilizando o flexbox!

Flexbox é uma propriedade introduzida no CSS3 que tem como objetivo organizar os elementos de uma forma ágil. Esta propriedade trabalha com uma dimensão por vez, isto é, a propriedade atua como linha ou como coluna

Ler mais

Multiplas SSH Key No Github No Mesmo Computador

Digamos que você esteja trabalhando em dois projetos diferentes, com github diferentes e você precisa adicionar a SSH Key em ambos repositórios. Ao tentar adicionar sua deploy key, você tenta colocar aquela chave que usa no outro projeto mas ao clicar em salvar, se depara com o seguinte erro:

Erro de Chave em uso

Para resolver esse problema, você deveria adicionar outra ssh key sem perder a que já está em uso. Mas como?

Ler mais

Como Usar O Método Filter Em Javascript

Em um determinado momento de seu desenvolvimento, você recebe um array com diversos valores aleatórios, mas precisa trabalhar apenas os que são maiores que 20. Para isso, você poderia percorrer essa lista e verificar um por um e retornar um novo array apenas com os valores que passam nessas condições, que poderia ser feito com um for ou um while mas, coincidentemente, o Javascript possui um método do chamado filter que faz justamente isso!

Você tem uma série de idades e deseja apenas quem é maior de idade.

1
let idades = [9, 10, 19, 1, 40, 55, 6, 87];

Ler mais

Como Encontrar O Índice De Um Elemento De Um Array Em Javascript

Digamos que temos o seguinte array e o banco de dados nos retorna apenas o valor da role, mas precisamos exibir em nosso front-end o valor da label. Para isso, precisamos acessar a lista pela role e retornar o nome da mesma. Mas como fazer isso?

1
2
3
4
5
6
7
8
const lista = [
  { role: "DOUTORADO", name: "Doutorado" },
  { role: "MESTRADO", name: "Mestrado" },
  { role: "POS_GRADUACAO", name: "Pós-graduação" },
  { role: "GRADUACAO", name: "Graduação" },
  { role: "ENSINO_MEDIO", name: "Ensino Médio" },
  { role: "NONE", name: "None" },
];

Ler mais

Entendendo O Z-Index

Em geral, uma página HTML pode ser considerada bidimensional, isto é, seus elementos como textos e imagens são organizados na página sem uma sobreposição. Neste caso, a construção da página segue um fluxo e os elementos têm consciência do espaço e tamanho que outros elementos ocupam. Com o z-index, podemos mudar esse funcionamento.

Ler mais

Template Strings, O Que É E Como Usar?

Template Strings são literais strings que permitem a concatenação de strings e expressões de um modo muito mais fácil e agradável de interpretar o código. Em minha opinião, é uma das features implementadas no ECMAScript 2015 que facilitou meu desenvolvimento de códigos!

Como utilizar template strings

A utilização de Template Strings é muito fácil, basta envolver o que você deseja entre acentos graves (também conhecido como crase).
No exemplo abaixo, mostramos como é a utilização normal e como ficaria usando a template string.

Ler mais