A web é bastante vasta e está cheia de sites e aplicações estáticas. No entanto, embora sejam estáticas, elas não necessariamente precisam ser sem graça.

Como podemos usar a Framer Motion para adicionar algumas animações às nossas aplicações para web e tornar a experiência com elas mais interativa?

• O que é o Framer Motion?
• O que vamos desenvolver?
• Etapa 0: instalando o Framer Motion na sua aplicação do Next.js
• Etapa 1: animando o título da página com Framer Motion em uma aplicação do Next.js
• Etapa 2: adicionando efeitos de hover animados com Framer Motion a elementos de uma aplicação do Next.js
• Etapa 3: adicionando transições de página com Framer Motion a uma aplicação do Next.js
• Etapa 4: usando keyframes do Framer Motion para animações avançadas
• Etapa bônus: pirando um pouco na animação da nossa aplicação do Next.js de Rick and Morty

O que é o Framer Motion?

O Framer Motion (página em inglês) é uma API que vem diretamente da API Framer. Ela fornece uma biblioteca pronta de animações e controles de gestos que facilita a criação de efeitos dinâmicos.

O que é o Framer (página em inglês)? O próprio Framer é uma ferramenta de prototipagem de UI que permite criar interfaces interativas com animações que você pode disponibilizar para a sua equipe, ao passo que a API Framer (página em inglês) é uma biblioteca do Javascript que permite fazer isso com código.

A Motion API é derivada desse trabalho, mas está convenientemente disponível como um pacote separado, que pode ser usado para controle de animações.

O que vamos desenvolver?

Vamos usar os conceitos do Framer Motion para adicionar efeitos de interação e de transição de página à nossa aplicação.

Vamos começar com algumas animações básicas que acontecem quando a página é carregada. Depois, vamos aprender como acioná-las ao passar o mouse para, então, criar um wrapper que nos permita fazer uma transição elegante de nossas páginas em Next.js.

Antes de começarmos

Esta é a segunda parte de uma série de artigos sobre a construção de uma wiki de Rick and Morty. A primeira parte (texto em inglês) tem como foco solicitar os dados da API de Rick and Morty e criar páginas dinâmicas.

How to Create a Dynamic Rick and Morty Wiki Web App with Next.js (Como criar uma aplicação para a web dinâmica que sirva como Wiki de Rick and Morty no Next.js – página em inglês)

É possível acompanhar este tutorial sem ter passado pela primeira parte. Porém, pode ser de grande ajuda usá-la como ponto de partida. Caso queira continuar mesmo assim, saiba que a maior parte do que você vai ver aqui pode ser aplicada a qualquer aplicação feita em React.

Etapa 0: instalando o Framer Motion na sua aplicação do Next.js

Como vamos usar o Framer Motion para nos fornecer seus recursos de animação, a primeira coisa que devemos fazer é instalá-lo!

Com sua aplicação rodando localmente, execute o comando:

yarn add framer-motion
# ou
npm install framer-motion

Agora, você pode iniciar novamente o seu servidor de desenvolvimento e estaremos prontos para começar!

Este é o commit para você acompanhar

Etapa 1: animando o título da página com Framer Motion em uma aplicação do Next.js

Para começar, vamos animar o título da página da nossa aplicação wiki. Mais precisamente, vamos configurar o Framer Motion para fazer o título aparecer gradualmente enquanto a página é carregada.

A primeira coisa que devemos fazer é importar o Motion na nossa aplicação.

Comece adicionando a seguinte declaração de importação no topo do arquivo pages/index.js:

import { motion } from 'framer-motion';

Feito isso, estamos prontos para usar o motion. Podemos agora começar envolvendo o título <h1> com um componente motion:

<motion.div>
  <h1 className="title">
    Wubba Lubba Dub Dub!
  </h1>
</motion.div>

Envolver o elemento é o que nos permite conectá-lo à API do Motion.

Porém, nossa página ainda não faz nada ao ser recarregada. Isso acontece porque ainda não configuramos nossa animação. Vamos fazer isso agora!

Existem dois conceitos básicos que precisamos ter em mente quando usamos a API Motion com nosso componente <motion.x> . São eles:

• O ciclo de vida da animação
• As variantes

Cada uma das props do ciclo de vida da animação — como initial e animate — nos permite definir o nome da nossa animação como uma variante.

Nossas props variants são aquelas em que configuramos as animações ao definir nomes de variantes em conjunto com a animação que queremos usar.

Então, para começar, vamos adicionar duas definições de ciclo de vida ao nosso componente de título. Faremos isso ao adicionar duas props de ciclo de vida (initial e animate):

<motion.div initial="hidden" animate="visible">
  <h1 className="title">
    Wubba Lubba Dub Dub!
  </h1>
</motion.div>

Agora, precisamos das seguintes definições:

<motion.div initial="hidden" animate="visible" variants={{
  hidden: {},
  visible: {},
}}>
  <h1 className="title">
    Wubba Lubba Dub Dub!
  </h1>
</motion.div>

Aqui estamos definindo duas variantes: hidden e visible. Elas estão, respectivamente, referenciadas nas props de ciclo de vida initial e animate .

Ao recarregar a página, percebemos que nada acontece ainda. Isso porque ainda não definimos as animações em si. Então vamos fazer exatamente isso agora:

<motion.div initial="hidden" animate="visible" variants={{
  hidden: {
    scale: .8,
    opacity: 0
  },
  visible: {
    scale: 1,
    opacity: 1,
    transition: {
      delay: .4
    }
  },
}}>
  <h1 className="title">
    Wubba Lubba Dub Dub!
  </h1>
</motion.div>

Entenda o que está acontecendo:

• Até o momento, temos dois ciclos de vida: um initial e um animate. O initial se refere àquilo que acontece inicialmente quando a página é carregada; animate, por sua vez, se refere ao que deve acontecer quando a página termina de ser carregada.
• Inicialmente, estamos definindo que o elemento tenha seu tamanho ligeiramente reduzido e que sua opacidade seja 0.
• Quando a página carregar e acionar nossa animação, definimos para que seu tamanho e sua opacidade sejam restaurados para 1.
• Também definimos um atraso de 0,4 segundo na transição da animação. O objetivo disso é aguardar um pouco o carregamento dos elementos da página antes que a animação seja acionada.

Resumindo: 0,4 segundo após a página carregar, o título vai aparecer na página com um efeito de estar aumentando ligeiramente de tamanho.

Ao salvar essas alterações e recarregar a página, podemos ver o efeito do nosso título!

Este é o commit para você acompanhar

Etapa 2: adicionando efeitos de hover animados com Framer Motion a elementos de uma aplicação do Next.js

Agora que entendemos o básico de como adicionar animações no carregamento da página, é hora de adicionar alguma interação.

Nosso objetivo é adicionar alguns efeitos de hover aos cartões de cada personagem. Assim, quando você mover o cursor sobre um deles, a animação será ativada.

Primeiramente, dentro da nossa lista não ordenada <ul className="grid">, precisamos transformar o elemento <li> em um elemento <motion.li> :

<motion.li key={id} className="card">
  ...
</motion.li>

Ao salvar e recarregar a página, você pode notar que tivemos um problema.

Por conta da integração entre o motion e o CSS do Next.js, nossa aplicação está se confundindo no nome da classe.

Embora isso não resolva o problema em si, uma maneira de consertar esse erro para a nossa demo é remover a prop jsx do topo do nosso bloco <style>, no qual nosso .card é definido.

Mude de:

<style jsx>{`

Para:

<style>{`

Agora, é só recarregar a página e tudo parece estar como deveria.

Para adicionar o nosso efeito de hover, vamos criar uma nova prop no nosso componente <motion.li>, chamada whileHover, e preenchê-la com alguns estilos de base:

<motion.li key={id} className="card" whileHover={{
  scale: 1.2,
  transition: {
    duration: .2
  }
}}>

Nossa declaração acima diz ao motion que nosso elemento deve aumentar de tamanho para 1.2x do seu tamanho original quando passarmos o cursor sobre ele e que essa animação deve demorar 0,2 segundo.

Basta recarregarmos a página para ver nossa animação funcionando!

Repare na parte de baixo dessa animação. Quando o cartão aumenta de tamanho, ele atravessa o cartão de baixo; e isso faz o design parecer quebrado. Podemos corrigir isso aplicando algumas configurações de z-index e background-color!

<motion.li key={id} className="card" whileHover={{
  position: 'relative',
  zIndex: 1,
  background: 'white',
  scale: 1.2,
  transition: {
    duration: .2
  }
}}>

Se recarregarmos a página outra vez, notamos que agora o cartão se sobrepõe ao de baixo quando aumenta de tamanho.

Este é o commit para você acompanhar

Etapa 3: adicionando transições de página com Framer Motion a uma aplicação do Next.js

Acionar uma animação quando a página termina de carregar ou quando passamos o cursor sobre um elemento é bacana. Porém, adicionar bons efeitos de transição dá um toque elegante à sua aplicação. Esse é um dos diferenciais que vai tornar o seu projeto mais parecido com uma "aplicação para a web", ao invés dos sites estáticos da web.

Para fazer isso, precisamos configurar nossa aplicação do Next.js (página em inglês) envolvendo as páginas root do site com um wrapper. Isso vai nos conectar ao ciclo de vida da navegação do site e animar adequadamente nossas páginas.

Para começar, precisamos criar um arquivo no diretório pages chamado _app.js:

// In pages/_app.js
function App({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
  )
}

export default App;

Nesse momento, não há necessidade de saber em detalhes o que está acontecendo, mas tenha em mente que estamos criando um wrapper no qual podemos inserir funcionalidades adicionais.

Com esse arquivo até o momento, você não deve notar nenhuma diferença ao recarregar a página.

A seguir, vamos definir a base que nos permite configurar as transições entre páginas.

Vamos começar importando o motion no topo do arquivo:

import { motion } from 'framer-motion';

Feito isso, vamos fazer como nas outras animações e adicionar um novo componente <motion.div> que envolva nossa página.

<motion.div initial="pageInitial" animate="pageAnimate" variants={{
  pageInitial: {
    opacity: 0
  },
  pageAnimate: {
    opacity: 1
  },
}}>
  <Component {...pageProps} />
</motion.div>

Aqui estamos configurando um estado inicial com opacidade 0 e um estado animado com opacidade 1. A intenção é criar um efeito fade in, que fará o elemento aparecer.

Agora, ao recarregar a página, é possível notar que ela tem esse efeito de fade in. Porém, o mesmo não acontece ao clicar no cartão de um personagem e abrir a página referente a ele.

O problema é que o motion não reconhece a página do personagem como uma nova rota. Por isso, temos que forçá-la a reconhecer a página dessa forma e atualizá-la.

Para isso, vamos desestruturar o argumento router nas nossas props da função App:

function App({ Component, pageProps, router }) {

Vamos também usar esse argumento como uma key no nosso componente motion:

<motion.div key={router.route} initial="pageInitial" animate="pageAnimate" variants={{

Você pode notar que agora o conteúdo está com um efeito fade in quando navegamos entre a página inicial e a página do personagem.

Este é o commit para você acompanhar

Etapa 4: usando keyframes do Framer Motion para animações avançadas

Agora que já definimos as configurações básicas de animação para o ciclo de vida da nossa aplicação, podemos ir ainda mais longe com a ajuda dos keyframes.

Os keyframes funcionam da seguinte maneira: ao definirmos uma animação, podemos configurá-la para passar por uma série de outros valores nas propriedades que escolhermos — o que nos permite construir animações da maneira que preferirmos.

Por exemplo, vamos supor que o nosso objetivo é que um elemento, durante o hover, aumente 2x o seu tamanho original, depois fique 1.5x menor e, por fim, aumente novamente para 2x do tamanho original. Tudo isso em apenas uma sequência de animação. Podemos fazer isso utilizando keyframes!

A sintaxe para isso ficaria assim:

scale: [1, 2, 1.5, 2]

Aqui estamos especificando nossa sequência a partir de um array. Esse array diz que nosso elemento deve ter seu estado inicial no seu tamanho normal (1x), depois deve aumentar 2x, diminuir um pouco 1.5x e, por fim, aumentar novamente em 2x.

Para testar isso, precisamos fazer algumas mudanças no efeito de hover que já havíamos configurado para os cartões de personagem.

Em pages/index.js, mude a propriedade whileHover no elemento li motion para:

<motion.li key={id} className="card" whileHover={{
  position: 'relative',
  zIndex: 1,
  background: 'white',
  scale: [1, 1.4, 1.2],
  rotate: [0, 10, -10, 0],
  transition: {
    duration: .2
  }
}}>

Estamos definindo duas configurações de keyframes para o nosso elemento. São elas:

• O tamanho inicial com 0 de rotação (ou "sem rotação", se preferir).
• Depois, o elemento aumenta em 1.4x do seu tamanho original e tem uma rotação de 10 graus.
• Ele diminui o tamanho em 1.2x e rotaciona para o lado inverso com -10 graus.
• Nesse ponto, a escala do keyframes está completa. Logo, não precisamos mais mexer nela, mas ainda temos uma rotação para fazer, na qual retornamos o elemento para sua posição inicial 0 (sem rotação).

Agora, basta recarregarmos a página e passar o cursor sobre os elementos para vermos os efeitos animados em ação!

Sem os keyframes, tudo o que podemos fazer são animações de um único estado inicial a um único estado final. No entanto, com os keyframes, podemos adicionar animações mais dinâmicas variando entre diferentes valores.

Este é o commit para você acompanhar

Etapa bônus: pirando um pouco na animação da nossa aplicação do Next.js de Rick and Morty

Para tornar nosso projeto ainda mais divertido, podemos brincar com outras propriedades que vão deixar nossas animações ainda mais dinâmicas.

Vamos começar intensificando nossos efeitos de hover.

No arquivo pages/index.js, adicione a seguinte alteração à prop whileHover do elemento <motion.li> :

filter: [
  'hue-rotate(0)',
  'hue-rotate(360deg)',
  'hue-rotate(45deg)',
  'hue-rotate(0)'
],

Aqui, estamos definindo novas configurações de keyframes que vão "rotacionar" a matriz de cor (hue) da imagem com base na função hue-rotate do CSS (página em inglês).

Ao salvar e recarregar a página, temos um pequeno efeito de cor:

Assim ainda está um pouco sutil. O ideal seria deixar uma impressão de estranhamento ainda maior.

Vamos aplicar as seguintes alterações à propriedade filter:

filter: [
  'hue-rotate(0) contrast(100%)',
  'hue-rotate(360deg) contrast(200%)',
  'hue-rotate(45deg) contrast(300%)',
  'hue-rotate(0) contrast(100%)'
],

Agora, além de mudarmos a cor, usamos a função contrast do CSS para tornar as cores ainda mais extremas e causar uma maior impressão de estranhamento.

Em seguida, podemos fazer algo semelhante com nossas transições de página!

Para isso, vamos fazer uso de uma outra parte do ciclo de vida do componente Motion — a saída (exit). Aqui, nós vamos precisar usar o componente AnimatePresence, do Motion — que vai nos permitir animar componentes que forem removidos da árvore do React.

Vamos começar abrindo o arquivo pages/_app.js e importando o componente no topo:

import { motion, AnimatePresence } from 'framer-motion';

Agora, precisamos envolver nosso componente <motion.div> com o componente  AnimatePresence :

<AnimatePresence>
      <motion.div key={router.route} initial="pageInitial" animate="pageAnimate" variants={{

Depois de envolvermos nosso componente, podemos definir um novo ciclo de vida da prop exit  junto com sua variante:

<motion.div key={router.route} initial="pageInitial" animate="pageAnimate" exit="pageExit" variants={{
  pageInitial: {
    opacity: 0
  },
  pageAnimate: {
    opacity: 1
  },
  pageExit: {
    backgroundColor: 'white',
    filter: `invert()`,
    opacity: 0
  }
}}>

O que fizemos no código acima:

• Configuramos a variante pageExit
• Configuramos a propriedade de ciclo de vida exit para pageExit
• Na nossa variante pageExit , definimos a cor de fundo para branco e adicionamos um filtro para inverter as cores.

Observação: é importante definir a cor de fundo para branco, caso contrário, o filtro invert não será aplicado ao fundo.

Agora, podemos salvar e recarregar a página para vermos nosso efeito quando navegamos para um outro elemento.

Este é o commit para você acompanhar

O que mais podemos fazer?

Adicione algumas animações para dar um efeito de escalonamento nos resultados da pesquisa.

Você pode verificar minha demo original na qual baseei este tutorial. Nela, eu adicionei uma funcionalidade que faz os resultados flutuarem ao aparecer, deslocando-se ligeiramente para cima.

Podemos fazer isso com a propriedade de transição staggerChildren e definindo as posições x e y (página em inglês) na nossa lista de elementos.

https://github.com/colbyfayock/rick-and-morty-wiki/blob/master/pages/index.js#L11

Anime os botões

Atualmente, os botões são apenas estáticos. Você pode adicionar alguns efeitos de hover e de clique a eles, como, por exemplo, no Load More, na parte de baixo.

Adicione mais efeitos estranhos

Afinal de contas, estamos falando de Rick and Morty. Você pode pirar à vontade. Certifique-se, porém, de que o resultado final ainda seja algo utilizável.

• 𝕏 Siga o autor no Twitter
• Inscreva-se no canal do autor no YouTube
• ✉️ Cadastre-se na newsletter do autor

As variáveis de ambiente são uma parte fundamental do desenvolvimento em Node. Por alguma razão, porém, nunca fui atrás de como usá-las adequadamente.

O motivo é, possivelmente, o fato de elas serem chamadas de "variáveis de ambiente".

A expressão "variáveis de ambiente" por si só é um gatilho para o meu trauma de tentar adicionar o caminho correto para o diretório Home do Java no Windows. Devo usar PATH ou JAVA_HOME? Ou ambos? Preciso colocar ponto e vírgula no final? POR QUE RAIOS ESTOU USANDO JAVA?

No Node, as variáveis de ambiente podem ser globais (como no Windows), mas geralmente são usadas em um processo específico que você deseja executar. Por exemplo, se você tiver uma aplicação para a web, talvez tenha variáveis de ambiente que definem:

• A porta HTTP a ser monitorada
• A string que conecta ao banco de dados
• O JAVA_HOME... espere... isso não — desculpe. Ainda estou me recuperando do trauma.

Em contextos assim, as variáveis de ambiente são realmente mais como "ajustes de configuração". Viu como soa melhor dessa maneira?

Se você tem alguma experiência com .NET, talvez esteja familiarizado com o arquivo web.config. As variáveis de ambiente do Node funcionam de um jeito parecido com os ajustes feitos no web.config — são, basicamente, um modo de passar informações que você não quer deixar no código fonte.

Como usar essas variáveis na sua aplicação do Node? Foi difícil encontrar esse conteúdo com a dose necessária de piadas com Java. Portanto, decidi criar eu mesmo. Aqui estão algumas maneiras de definir e de ler variáveis de ambiente nas suas aplicações do Node.

Passando no terminal

Você pode passar variáveis de ambiente diretamente no terminal como parte do processo da sua aplicação do Node. Por exemplo: se você estiver rodando uma aplicação com o framework Express e se quiser passar um conteúdo para a porta 65534, pode fazer da seguinte maneira...

PORT=65534 node bin/www

Curiosidade: a porta 65535 é o maior valor de rede TCP/IP disponível. Como eu sei disso? StackOverflow, é claro (texto em inglês). De que outra maneira as pessoas sabem das coisas? Só podemos, no entanto, chegar à porta 65534 para uma aplicação da web porque essa é a maior porta a qual o Chrome se conecta. Como eu sei isso? O Liran Tal me disse nos comentários. Recomendo segui-lo. Diferente de mim, ele sabe o que está fazendo.

Para o caso de usar a variável no seu código, você poderia usar o objeto process.env.

var port = process.env.PORT;

Aí, a coisa pode ficar feia. Se você tivesse uma string de conexão, provavelmente não gostaria de passar um monte variáveis no terminal. Isso faria parecer que você está acumulando diversos valores de configuração. Uma pessoa que se importa com você poderia organizar uma intervenção; o que seria constrangedor para todos os envolvidos.

PORT=65534
DB_CONN="mongodb://react-cosmos-db:swQOhAsVjfHx3Q9VXh29T9U8xQNVGQ78lEQaL6yMNq3rOSA1WhUXHTOcmDf38Q8rg14NHtQLcUuMA==@react-cosmos-db.documents.azure.com:10255/?ssl=true&replicaSet=globaldb"
SECRET_KEY="b6264fca-8adf-457f-a94f-5a4b0d1ca2b9"

Isso não escala – e todo mundo quer escalar. De acordo com todos os arquitetos que conheci, a aplicação "escalar" é mais importante do que a aplicação funcionar.

Sendo assim, vamos tentar outra abordagem: os arquivos .env.

Usando um arquivo .env

O que os arquivos .env fazem é nos permitir armazenar nossas variáveis em um arquivo à parte. Você só precisa criar um arquivo .env no seu projeto e colocar as variáveis nele em linhas separadas.

PORT=65534

DB_CONN="mongodb://react-cosmos-db:swQOhAsVjfHx3Q9VXh29T9U8xQNVGQ78lEQaL6yMNq3rOSA1WhUXHTOcmDf38Q8rg14NHtQLcUuMA==@react-cosmos-db.documents.azure.com:10255/?ssl=true&replicaSet=globaldb"

SECRET_KEY="b6264fca-8adf-457f-a94f-5a4b0d1ca2b9"

Existem diferentes maneiras de se ler esses valores, mas a opção mais simples é usar o pacote dotenv via npm.

npm install dotenv --save

Feito isso, você só precisa fazer uma requisição desse pacote no seu projeto sempre que precisar usar suas variáveis de ambiente. O pacote dotenv vai pegar o respectivo arquivo e carregar suas configurações no Node.

// Usando o dotenv para ler variáveis de um arquivo .env no Node:
require('dotenv').config();
var MongoClient = require('mongodb').MongoClient;

// Referenciando variáveis .env fora do objeto process.env:
MongoClient.connect(process.env.DB_CONN, function(err, db) {
  if(!err) {
    console.log("Conectado");
  }
});

Dica importante: Não suba seus arquivos .env para o Github. Os valores armazenados ali devem ser mantidos em sigilo. O próprio Github vai enviar a você um e-mail alertando sobre isso. Não faça a mesma besteira que eu.

Certo — bacana. Isso, porém, é meio chato. Você precisa colocar esse código em cada arquivo em que deseja usar variáveis de ambiente E você deve enviar o dotenv para o ambiente de produção, onde não é exatamente necessário. Não sou muito fã de fazer deploy de código inútil, mas acho que isso descreve a minha carreira como um todo.

Felizmente, você está usando o VS Code (você está usando o VS Code, certo?). Então, você tem algumas outras opções.

Trabalhando com arquivos .env no VS Code

Primeiramente, saiba que você pode instalar a extensão DotENV no seu VS Code. Ela vai fornecer um destaque visual na sintaxe dos seus arquivos .env.

DotENV - Visual Studio Marketplace

O depurador do VS Code também oferece algumas opções mais convenientes para carregar valores de arquivos .env. Isso se você estiver usando o depurador do VS Code.

Configurações de execução do VS Code

O depurador do Node para o VS Code (que já está presente nele – não precisa instalar nada para usá-lo) tem suporte para carregamento em arquivos .env por meio de configurações de execução. Leia mais sobre configurações de execução aqui (texto em inglês).

Quando você cria uma configuração de execução básica do Node (clique na engrenagem e selecione "Node"), você pode fazer uma ou as duas seguintes ações:

A primeira é você simplesmente passar as variáveis para a configuração de execução.

É bacana e tal, mas, aqui, todos os valores precisam ser strings. Isso me incomoda um pouco. É um número, não uma string. O JavaScript só tem 3 tipos. Não quero perder um deles.

Existe um caminho mais fácil. Nós já aprendemos a amar os arquivos .env. Então, ao invés de passar os seus valores, podemos simplesmente informar ao VS Code o nome do arquivo .env em questão.

Desse modo, contanto que iniciemos nosso processo a partir do VS Code, os arquivos de variáveis de ambiente serão carregados. Não precisamos "mutilar" os números transformando-os em strings. Também não estamos enviando código inútil para o ambiente de produção. Ou, pelo menos, você não está.

Começando com o NPM ao invés do Node

Você pode ter chegado aqui pensando: "Burke, eu nunca rodei nada com o comando node. É sempre um script do npm como npm start".

Para casos assim, também é possível usar as configurações de execução do VS Code. Ao invés de usar um processo de execução padrão do Node, você adiciona a configuração "Launch Via NPM" (Executar via NPM).

Agora, você pode adicionar novamente seu arquivo .env na linha envFile e ajustar a linha runtimeArgs para rodar o script correto. Isso normalmente é feito com um comando "start" ou "debug".

Lembre-se de adicionar a flag --inspect ao seu script npm para que o VS Code possa vincular o depurador a ele. Do contrário, a tarefa até vai ser executada, mas o depurador do VS Code vai desistir de continuar – assim como eu, tentando arranjar um encontro no ensino médio.

Variáveis de ambiente em produção

Até agora, vimos como definir variáveis para o ambiente de desenvolvimento. Você provavelmente não vai usar arquivos .env em produção. As configurações de execução do VS Code não vão ser muito úteis em um servidor.

Em produção, as variáveis serão definidas de acordo com a sua plataforma escolhida. Se for a Azure, existem 3 maneiras diferentes de definir e gerenciar suas variáveis de ambiente.

A primeira maneira é usar o Azure CLI.

az webapp config appsettings set -g MyResourceGroup -n MyApp --settings PORT=65534

Até funciona, mas... eca.

Outra maneira é usar o Azure Web Portal. Eu nem sempre uso um portal da web, mas, quando uso, é para definir variáveis de ambiente.

Na nomenclatura da Azure, elas são chamadas de "Application Settings" (Configurações da aplicação).

Porém, como você está usando o VS Code, pode instalar a extensão Azure App Service para gerenciar todas as configurações da aplicação diretamente do seu editor.

Adoro não precisar sair do VS Code. Eu escreveria e-mails no VS Code, se pudesse.

UM MOMENTO!

markdown-mail - Visual Studio Marketplace

Agora você já sabe

Agora você já sabe o que eu sei — o que não é muito, diga-se de passagem — e sinto que cumpri meu objetivo de fornecer uma pitada de piadas com Java ao longo do caminho. Porém, caso eu não tenha conseguido, aqui vai uma:

Java é uma ferramenta muito poderosa para transformar XML em traços de erro.

- Autor desconhecido

Observação: a maior parte das piadas é apenas uma tentativa ruim de fazer humor, parte dessa tentativa feita às custas do Java. Sei que não é legal fazer isso, mas, com o Java, é bem fácil. Afinal, as piadas não se escrevem sozinhas.

O JavaScript ES6 traz uma nova sintaxe e novos recursos incríveis para tornar seu código mais moderno e legível. Ele permite que você consiga fazer mais escrevendo menos código. O ES6 nos apresenta muitos recursos excelentes, como as arrow functions, template strings, desestruturação de classes, módulos e muito mais. Vamos conhecê-los.

const e let

const é uma nova palavra-chave em ES6 para declarar variáveis. Além disso, const é mais poderoso do que var. Isso porque, uma vez utilizada, não podemos reatribuir um novo valor à variável. Em outras palavras, trata-se de uma variável imutável, exceto quando usada com objetos.

Isso é bastante útil para direcionar os seletores. Por exemplo, quando temos um único botão que dispara um evento, ou quando você deseja selecionar um elemento HTML pelo JavaScript, use const ao invés de var. O principal motivo é que var tem um escopo maior. Portanto, é sempre preferível usar const quando não queremos que a variável seja reatribuída. Exemplo:

No código acima, a variável const não vai mudar e não pode ser reatribuída. Se você tentar atribuir um novo valor a ela, vai receber uma mensagem de erro.

Por sua vez,  uma variável let pode ser reatribuída, recebendo assim um novo valor. Neste caso, temos uma variável mutável.

O let é semelhante ao const no sentido de que ambos têm seu escopo restrito. O que significa que a variável só é acessível dentro do escopo em que foi declarada.

Arrow functions

As arrow functions são fantásticas. Elas deixam o seu código mais legível, melhor estruturado e com um visual moderno. Ao invés de usar isto:

Use isto:

Como você pode ver, as arrow functions têm um visual mais legível e limpo! Você não vai mais precisar usar a sintaxe antiga.

Você também pode usar as arrow functions em algumas das funções integradas do JavaScript, como: map, filter e reduce. Veja este exemplo:

A função map fica mais legível com a sintaxe das arrow functions do que ficava anteriormente. Usando o ES6, você consegue escrever códigos mais curtos e funcionais. Você pode fazer o mesmo com filter e reduce.

Template literals

As template literals — também conhecidas como template strings — são um recurso muito bacana do ES6. Com elas, não precisamos mais usar o operador de soma (+) para concatenar strings nem para usar variáveis dentro de uma string.

Como era na sintaxe antiga:

Como ficou com a nova sintaxe do ES6:

Bem mais simples! Podemos notar uma grande diferença entre a sintaxe antiga e a do ES6. Para usar strings de maneira mais elaborada, as template strings do ES6 parecem mais organizadas e melhor estruturadas do que o que tínhamos antes.

Parâmetros padrão

Costumo usar os parâmetros padrão quando trabalha com a linguagem PHP. Esse recurso permite definir um parâmetro com antecedência.

Desse modo, você não receberá um erro de retorno indefinido caso esqueça de passar um parâmetro. Esse erro é evitado porque a predefinição do parâmetro já foi feita. Assim, quando você rodar uma função e esquecer de passar o parâmetro, o retorno será o valor do parâmetro padrão. Como bônus, não vai receber um erro por causa disso!

Vamos ilustrar isso melhor com o seguinte exemplo:

A função acima retorna undefined porque esquecemos de passar o segundo parâmetro: age.

No entanto, se usássemos um parâmetro padrão, não teríamos um retorno undefined. Usaríamos o valor padrão caso esquecêssemos de passar esse parâmetro!

Como você pode ver, a função retorna o valor mesmo quando não passamos o segundo parâmetro. Com o parâmetro padrão, conseguimos antecipar o erro e evitá-lo.

Desestruturação de arrays e objetos

O processo de desestruturação facilita a atribuição de valores de um array ou de um objeto a uma nova variável.

Como era na sintaxe antiga:

Como ficou com a nova sintaxe do ES6:

Anteriormente, precisávamos atribuir manualmente cada valor a uma variável. Na ES6, porém, basta colocarmos nossas variáveis entre chaves para obtermos qualquer propriedade de um objeto.

Observação: se o nome da variável que você usar não for igual ao nome da propriedade, vai ter um retorno undefined. Por exemplo, se o nome da propriedade for name e a atribuirmos a uma variável chamada username, o retorno vai ser undefined.

Precisamos sempre manter o nome da variável igual ao nome da propriedade do objeto. Porém, se quisermos renomear essa variável, podemos usar os dois pontos (:). Como no seguinte exemplo:

Para arrays, usamos uma sintaxe semelhante à dos objetos. A única diferença é que usamos colchetes ao invés de chaves. Veja no seguinte exemplo:

Importação e exportação

Uma aplicação em JavaScript fica mais poderosa com o uso de import e export. Esses recursos permitem a criação de componentes separados e reutilizáveis.

Se você estiver familiarizado com algum framework MVC (model–view–controller) do JavaScript, vai perceber que — na maioria das vezes — esses frameworks usam import e export para lidar com componentes. Como essa importação e exportação funciona?

É simples! O export permite a exportação de um módulo para ser usado em outro componente JavaScript. Por sua vez, o import serve para importar esse módulo e usá-lo em nosso componente.

Vamos a um exemplo. Considere que temos dois arquivos. O primeiro foi nomeado como detailComponent.js e o segundo como homeComponent.js.

Primeiro, vamos exportar a função detail do detailComponent.js. Fazemos isso da seguinte maneira:

Depois, vamos simplesmente usar import para acessar essa função em homeComponent.js. Isso é feito deste modo:

Para importar mais de um módulo de um mesmo arquivo, basta colocar os nomes desses módulos entre chaves na declaração da importação. Como no seguinte exemplo:

Não é legal?

Promises

As promises são uma novidade do ES6. Trata-se de um método para escrever código assíncrono. Elas podem ser usadas quando, por exemplo, queremos buscar dados de uma API ou quando usamos uma função que leva algum tempo para ser executada. As promises facilitam a resolução de casos assim. Então, vamos criar nossa primeira promise!

Se olhar no console, vai ver que ele retorna uma promise. Sendo assim, se quisermos executar uma função depois de obter os dados requeridos, vamos usar uma promise. As promises recebem dois parâmetros: resolve e reject. Para caso de sucesso e de erro, respectivamente.

Observação: a função fetch retorna nada menos do que uma promise!

const url='https://jsonplaceholder.typicode.com/posts';

const getData=(url)=>{return fetch(url);}

getData(url).then(data=> data.json()).then(result=> console.log(result));

Se olhar o resultado no console, você vai notar que o retorno é um array de dados.

Parâmetro rest e o operador de spread

Os parâmetros rest são usados para obter o argumento de um array e retornar um novo array. Seguem alguns exemplos:

O operador de spread (ou "operador de espalhamento") tem uma sintaxe semelhante à do parâmetro rest, com o diferencial de que o operador de spread pega o array em si e não apenas os argumentos dele. Podemos usar o operador de spread para obter os valores de um array ao invés de fazer o mesmo com um laço de repetição ou algo assim. Aqui temos um exemplo desse operador em ação:

const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?'];

const Func=(...anArray)=>{
  return anArray;
}

console.log(Func(arr));

//output  ["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"

Classes

As classes são o ponto central da programação orientada a objetos (POO). Elas tornam seu código mais seguro e encapsulado. O uso de classes dá ao seu código uma boa estrutura e o mantém orientado.

Para criar uma classe, basta usar a palavra-chave class, dar um nome a essa classe e finalizar com um bloco de chaves.

Feito isso, podemos acessar os métodos e as propriedades da classe através da palavra-chave new. Exemplo:

class myClass{
    constructor(name,age){
    this.name=name;
    this.age=age;
}
}
const Home= new myClass("said",20);
console.log(Home.name)//  said

Para herdar as propriedades de outra classe, é só usar a palavra-chave extends e informar o nome da classe de que deseja herdar. Veja no seguinte exemplo:

Você pode aprender mais sobre classes aqui.

Você também pode explorar outros recursos incríveis do ES6 aqui (website em inglês).

Conclusão

O autor espera que o artigo tenha sido útil e que tenha conseguido apresentar bem alguns dos recursos do ES6. Ele também convida os leitores interessados a se inscreverem nesta lista de e-mails para receber mais conteúdo sobre front-end. Por fim, o autor agradece a você por ter lido este artigo.

Além disso, o autor também informa que trabalhou recentemente com um ótimo grupo de engenheiros de software para a criação de uma de suas aplicações para dispositivos móveis. Ele disse que a empresa era excelente, e que o produto foi entregue com bem mais rapidez do que outras empresas e freelancers com quem ele trabalhou. Com isso, ele conclui que pode recomendar essa empresa para quem tiver interesse em ter seus projetos desenvolvidos. Se for do seu interesse, pode contatar o autor do artigo e perguntar sobre o assunto através do e-mail: said@devsdata.com.

É necessário construir projetos para dominar o desenvolvimento de software.

Não um.

Nem dois.

Muitos projetos!

No entanto, você deve começar da maneira correta. Se você começar qualquer projeto aleatório como desenvolvedor iniciante ou júnior, não apenas se sentirá perdido como também começará a questionar se programação é para você. Portanto, trabalhe de maneira inteligente.

Comece do mais simples.

Primeiro, melhore sua confiança a partir de um projeto pequeno. Depois, de outro projeto pequeno. Depois de vários desses projetos pequenos, passe para algo maior e vá tão longe quanto sua imaginação permitir.

Antes de construir qualquer projeto, aprenda o básico

Se você não aprender o básico, você estará construindo sobre uma base frágil.

Independentemente do nível de domínio que você espera alcançar em Python, você precisará desses fundamentos antes de começar qualquer projeto.

Você precisa saber como:

• declarar variáveis
• receber dados inseridos pelo usuário
• armazenar informações
• repetir uma ação através de laços de repetição
• escrever funções para reaproveitar blocos de código

É basicamente isso.

Naturalmente, há mais a ser aprendido em Python, mas esse é o básico que você precisa saber. Será suficiente para você começar projetos para iniciantes.

Há aquela sensação tentadora de que você precisa terminar diversos tutoriais em Python antes de trabalhar em qualquer projeto.

Não siga por esse caminho.

Muitos caem na armadilha de seguir um tutorial atrás do outro até se sentirem ultrapreparados. Em vez disso, aprenda o básico primeiro. Em seguida, construa alguns projetos pequenos. Feito isso, volte a aprender com mais tutoriais.

Vá por mim, você pode terminar 100 tutoriais e ainda sentir que não está pronto para construir projeto algum.

Estudar por conta própria não é suficiente.

Você precisa aplicar o que aprendeu.

Como fazer uso desses projetos

• Primeiro, leia as instruções e certifique-se de que as entendeu. Tente expressar com suas próprias palavras o que tiver entendido delas.
• Tente solucionar o problema por conta própria sem buscar um tutorial no YouTube ou um código semelhante no GitHub. Provavelmente, vai ser difícil. Tudo bem. Dê o seu melhor. Essa é a ideia de prática deliberada (texto em inglês) da Psicologia Comportamental.
• Se você não conseguiu progredir por conta própria, assista ao tutorial do YouTube e veja o código de exemplo. Você também pode pesquisar na internet por mais tutoriais de exemplo e outros códigos em Python que visam resolver o mesmo problema.
• Depois disso, tente dar um passo atrás e escrever o código sozinho sem olhar o tutorial. De novo: dê o seu melhor. Esse é o chamado grit (às vezes traduzido como garra), também da Psicologia Comportamental (vídeo com legenda em português disponível). Você precisa disso.
• Em hipótese alguma você deve copiar cegamente o código do tutorial e se dar por satisfeito. Você até pode terminar o projeto rapidamente, mas a realidade é que você não aprendeu nada.
• Se você por acaso sentir que está travado após várias tentativas, faça uma pausa. Sabemos pelas pesquisas neurocientíficas (texto em inglês) que o nosso subconsciente continua aprendendo mesmo quando paramos. Isso acontece porque nossa mente muda do modo focado para o modo difuso.
• Quando conseguir resolver um problema, comemore! É importante ter esse reforço positivo para construir referências do seu sucesso. No futuro, quando sua mente disser "Você não vai conseguir" e fizer você duvidar do seu potencial, você pode responder a ela: "não é verdade; e eis a prova de que consegui no passado e vou conseguir agora também".
• Repita, repita, repita.

Você também poderá usar essas dicas para outros projetos além dos que serão listados abaixo. Agora, vamos aos projetos em Python.

Projetos para desenvolvedores juniores de Python

Aqui estão alguns projetos amigáveis para iniciantes que você pode desenvolver:

1. Par ou ímpar
2. Jogo Mad Libs
3. Contador de palavras
4. Informações biográficas
5. Qual é a sigla?
6. Pedra, papel, tesoura
7. Adivinhar o número
8. Verificador de palíndromo
9. Calculadora de gorjeta
10. Divisor de e-mail
11. Gerador de letras de música

Par ou ímpar

Dê boas-vindas ao usuário e peça-o para inserir um número de 1 a 1000.

Depois de o usuário informar o número, verifique se ele é par ou ímpar e diga ao usuário.

Exemplo:

• Mensagem: Em qual número você pensou?
• Entrada: 25
• Saída: Esse é um número ímpar! Gostaria de verificar outro?

Jogo Mad Libs

Peça ao usuário para informar alguns valores.

Eles podem ser qualquer coisa como um nome, um adjetivo, um pronome ou mesmo uma ação. Uma vez recebidos esses valores, reorganize-os e crie uma história.

• Aqui temos um tutorial no YouTube de como criar um jogo Mab Libs usando o Python (vídeo em inglês).
• Aqui, você verá  um código de exemplo no Github.

Contador de palavras

Peça ao usuário que informe em uma frase algo em que ele pensou. Depois, conte o número de palavras na sentença informada e mostre esse valor na tela.

Examplo:

• Mensagem: Informe em uma frase algo em que você pensou hoje .
• Entrada: Bem, é só mais um dia para eu ser um profissional em programação .
• Saída: Legal! Você acabou de me dizer no que pensou usando 13 palavras!

Para dar um passo mais adiante: abra um arquivo com conteúdo textual nele, conte o número de palavras no texto e mostre esse valor na tela.

Eis aqui um código de exemplo no Github.

Informações biográficas

Faça algumas perguntas pedindo informações sobre o usuário. Em seguida, verifique se as informações inseridas são válidas. Por fim, mostre um resumo de todas as informações que foram introduzidas.

Exemplo: Qual é o seu nome? Se o usuário informar *, a aplicação deve informar que esse é um nome inválido e pedir que o usuário informe um nome válido.

Ao final, deve ser exibido na tela um resumo como este:

- Nome: João da Silva
- Data de nascimento: 1 de Janeiro de 1954
- Endereço: Avenida das flores, 1500, São Paulo
- Objetivos: Ser o melhor programador que já existiu.

Qual é a sigla?

Peça ao usuário para informar um conceito ou o nome de alguma organização. A aplicação deve retornar uma sigla adequada. Por exemplo:

• Entrada -> O Mais Rápido Possível. Saída -> OMRP.
• Entrada -> Organização Mundial da Saúde. Saída -> OMS.
• Entrada -> Ausência Sem Justificativa. Saída -> ASJ.

Pedra, papel, tesoura

Esta é uma brincadeira popular entre duas pessoas. Cada jogador usa uma das mãos para formar uma das seguintes opções:

• pedra (mão fechada)
• papel (mão aberta)
• tesoura (estender apenas os dedos indicador e médio da mão em formato de V)

Veja aqui um tutorial no YouTube sobre como programar um jogo de pedra-papel-tesoura em Python (vídeo em inglês).

Adivinhar o número

A aplicação deve pedir ao usuário para adivinhar um número entre 1 e 50.

Se o usuário informar um número fora desse intervalo, deve ser exibida uma mensagem de erro lembrando-o dos valores aceitos.

Sempre que o usuário errar o número, a aplicação deve perguntar se ele gostaria de tentar novamente ou de desistir.

Se o jogador conseguir acertar o número, parabenize-o e exiba o número de tentativas que ele fez até acertar.

Você pode conferir aqui um tutorial no YouTube para programar um jogo de adivinhar o número em Python (vídeo em inglês).

Verificador de palíndromo

Peça ao usuário que informe cinco palavras. Em seguida, verifique se alguma das cinco palavras é um palíndromo.

Um palíndromo é uma palavra que permanece a mesma, caso seja lida da esquerda para a direita ou no sentido inverso.

Exemplo:

• radar é um palíndromo.
• salas também é.
• geeks não é.

Aqui temos um código de exemplo no Github para esse projeto.

Calculadora de gorjeta

O objetivo dessa aplicação é calcular o quanto de gorjeta deve-se pagar pelo serviço. Nesse cenário, é preciso pedir pelo valor total da conta. Depois, é preciso exibir na tela as opções de gorjeta: 18%, 20% ou 25% do valor total da conta.

Exemplo:

• Mensagem: Qual o valor total da conta?
• Entrada: R$ 55,87
• Saída: 18% de gorjeta equivale a R$ 10,06; o que aumenta o total a ser pago para R$65,93

Lembre-se de arredondar os valores para cima para ter números mais amigáveis. Se quiser ir mais além, pode perguntar o número de pessoas envolvidas para dividir igualmente o valor da conta e da gorjeta entre eles.

Se quiser ir mais longe ainda, faça essa divisão de valores de maneira proporcional. Por exemplo: uma pessoa paga 70% do valor e outra paga 30%.

Divisor de e-mail

Receba o endereço de e-mail do usuário e verifique se ele tem um domínio próprio ou popular. Por exemplo:

• Entrada: mary.jane@gmail.com
• Saída: Olá, Mary. Vejo que seu e-mail está registrado no Google. Que bacana!.
• Entrada: peter.pan@myfantasy.com
• Saída: Oi, Peter. Parece que você tem sua própria configuração personalizada no MyFantasy. Impressionante!.

Esse é um projeto em Python bem útil e que pode ser bastante usado futuramente. O programa ajuda a obter o nome de usuário e o nome do domínio de um endereço de e-mail.

Se quiser ir mais adiante, você pode personalizar a aplicação para enviar uma mensagem para o host com essa informação.

Você pode conferir este tutorial no YouTube (vídeo em inglês) e este exemplo de código no Github sobre o projeto.

Gerador de letras de música

Peça ao usuário para escolher uma música de uma lista de 10 músicas exibidas. Depois de o usuário fazer isso, exiba a letra da música selecionada.

Exemplo:

Seja bem-vindo. Por favor, selecione uma dentre as 10 músicas a seguir:

1. Baby, de Justin Bieber
2. Hotline Bling, de Drake
3. Flawless, de Beyonce
4. Fall, de Eminem

Você escolheu Flawless, de Beyonce. Aqui está a letra da música:

---------- Flawless, de Beyonce ------------
I'm out that H, town coming coming down
I'm coming down, drippin' candy on the ground
H, Town, Town, I'm coming down, coming down
Drippin' candy on the ground...

Pressione * para escolher outra música.

Para desenvolver mais o projeto, tenha pelo menos 3 músicas para cada artista.

Assim, peça para o usuário escolher pelo nome do artista e depois selecionar uma música daquele mesmo artista. Assim, o usuário pode escolher uma música específica da lista exibida.

Finalizando

Trabalhando nesses projetos, você pode se deparar com alguns obstáculos e ficar completamente desanimado. Mantenha a calma. Você consegue.

Lembre-se: faça uma pausa e tente de novo mais tarde. Você também pode ler estas histórias de diversos programadores (texto em inglês) que conseguiram manter a motivação e seguir adiante.

Desenvolvimento de software é uma área difícil, mas tem muitas recompensas.

Se tantos outros conseguiram, você também consegue.

Obrigado pela leitura

Se gostou deste texto, pode conferir outros como ele.

• Junte-se à comunidade do autor via e-mail: lá, ele compartilha técnicas para que novos programadores e desenvolvedores juniores cresçam mais rapidamente e melhorem sua confiança. Se tiver interesse, faça parte da comunidade.
• Siga o autor no Twitter: Quer mais dicas rápidas? Ou, por acaso, tem alguma pergunta? O autor é bastante ativo no Twitter, então fique à vontade para entrar em contato com ele. Ele deixa a  DM aberta para conversas.

Atenção — o autor é apaixonado por pesquisa. Por isso, ele adverte que tem uma tendência a usar abordagens e conceitos da Psicologia Comportamental e da Neurociência.

De maneira geral, uma string nada mais é do que uma sequência de caracteres de determinada linguagem de programação.

Vejamos o exemplo de uma string com a seguinte sequência de caracteres: "Yes, You Can DO It!". Podemos criar uma string de maneiras diferentes em JavaScript. Por exemplo:

• Fazendo uma declaração literal

const msg = "Yes, You Can DO It!";

• Criando um objeto a partir do construtor String()

const msg = new String("Yes, You Can DO It!");

Um fato interessante sobre strings em JavaScript é que podemos acessar um caractere específico usando seu índice. O índice do primeiro caractere é 0 e os seguintes aumentam sequencialmente de 1 em 1. Assim, conseguimos acessar cada caractere de uma string, deste modo:

let str = "Yes, You Can Do It!";

console.log(str[0]); // Y
console.log(str[1]); // e
console.log(str[2]); // s
console.log(str[3]); // ,

console.log(str[10]); // a

A imagem abaixo representa o mesmo funcionamento:

Além da possibilidade de acessar caracteres de uma string por seus índices, o JavaScript também fornece diversos métodos para acessar caracteres, bem como recortar e manipular uma parte de uma string.

Neste artigo, aprenderemos sobre um método bastante útil chamado split(). Espero que goste do conteúdo.

O método split() em JavaScript

O método split() divide uma string em duas ou mais substrings, dependendo de um separador (ou splitter). Esse separador pode ser um único caractere, outra string ou até mesmo uma expressão regular.

Após separar a string em diversas substrings, o método split() adiciona essas substrings em um array e o retorna. Isso é feito sem nenhuma alteração na string original.

Vejamos um exemplo para entender melhor como isso funciona. A seguir, temos uma string declarada de maneira literal:

let message = 'I am a Happy Go lucky Guy';

Aqui, podemos chamar o método split() na string message. Vamos dividir a string usando um caractere de espaço ('  ') como base. O espaço servirá como um separador.

// Usando o caractere de espaço na divisão
let arr = message.split(' ');

// O array
console.log(arr); // ["I", "am", "a", "Happy", "Go", "lucky", "Guy"]


// Acessando cada elemento do array
console.log(arr[0]); // "I"
console.log(arr[1]); // "am"
console.log(arr[2]); // "a"
console.log(arr[3]); // "Happy"
console.log(arr[4]); // "Go",
console.log(arr[5]); // "lucky"
console.log(arr[6]); // "Guy"

O principal objetivo do método split() é obter as partes que queremos de uma string para usá-las de outras maneiras quaisquer.

Como dividir uma string caractere por caractere

Podemos dividir uma string caractere por caractere ao usar uma string vazia ('') como separador. No exemplo abaixo, dividimos a mesma mensagem do exemplo anterior usando uma string vazia. Como resultado, temos um array contendo todos os caracteres da string message.

console.log(message.split('')); // ["I", " ", "a", "m", " ", "a", " ", "H", "a", "p", "p", "y", " ", "G", "o", " ", "l", "u", "c", "k", "y", " ", "G", "u", "y"]

💡 Tenha em mente que dividir uma string vazia ('') usando outra string vazia como separador retornará um array vazio. Pode ser que lhe façam essa pergunta na entrevista para uma vaga!

''.split(''); // retorna []

Como dividir uma string em um array

Podemos chamar o método split() em uma string sem usar um separador. Isso significa apenas que o método split() não recebeu nenhum argumento.

Quando chamamos o método split() em uma string sem especificar um separador, o retorno será um array contendo todo o conteúdo da string.

let message = 'I am a Happy Go lucky Guy';
console.log(message.split()); // retornará ["I am a Happy Go lucky Guy"]

💡 Novamente, tenha em mente que chamar o método split() em uma string vazia ('') sem um separador retornará um array com uma string vazia. Nesse caso, o retorno não será um array vazio.

Veja estes dois exemplos para perceber a diferença:

// Este tetorna um array vazio
''.split(''); // retorna []

// Este retorna um array com uma string vazia
''.split() // retorna [""]

Como dividir uma string usando um caractere não correspondente

Normalmente, usamos um separador que faz parte da string que estamos tentando dividir. Em alguns casos, podemos acabar passado um divisor que não faz parte da string ou que não corresponde a nenhuma parte dela. Em situações assim, o método split() retorna um array com toda a string como elemento.

No exemplo abaixo, a string message não tem o caractere de vírgula (,). Vamos tentar dividir a string usando a vírgula (,) inexistente como separador.

let message = 'I am a Happy Go lucky Guy';
console.log(message.split(',')); // ["I am a Happy Go lucky Guy"]

💡 Você deve estar ciente desse comportamento para caso precise depurar o erro trivial de ter passado o divisor errado para o método split().

Como dividir com um limite

Se você pensou que o método split() tinha apenas o separador como parâmetro opcional, preciso contar a você que existe outro. Também podemos passar o limite (limit) como parâmetro opcional para o método split().

string.split(splitter, limit);

Como o próprio nome sugere, o parâmetro limit limitará o número de divisões. Isso significa que o array resultante terá, no máximo, o número de elementos especificado no parâmetro de limite.

No exemplo abaixo, dividimos uma string usando o caractere de espaço (' ') como separador. Passamos, também, o número 4 como o limite. Feito isso, o método split() retornará apenas quatro elementos — ignorando o restante.

let message = 'I am a Happy Go lucky Guy';
console.log(message.split(' ', 4)); // ["I", "am", "a", "Happy"] 

Como dividir usando regex

Também é possível passar uma expressão regular (regex) como separador para o método split(). Consideremos a seguinte string a ser dividida:

let message = 'The sky is blue. Grass is green! Do you know the color of the Cloud?';

Agora, vamos dividi-la nos caracteres de ponto final (.), ponto de exclamação (!) e ponto de interrogação (?). Podemos, agora, escrever uma regex para identificar a presença desses caracteres. Em seguida, passaremos a regex para o método split() e chamaremos o método na string acima.

let sentences = message.split(/[.,!,?]/);
console.log(sentences);

O resultado será semelhante a este:

Podemos ainda usar o parâmetro limit para limitar o resultado aos três primeiros elementos. Fazemos isso da seguinte maneira:

sentences = message.split(/[.,!,?]/, 3);
console.log(sentences);

O resultado será semelhante a este:

💡 Para pegar os caracteres usados na expressão regular, é preciso ajustar a regex um pouco. Devemos usar parênteses para pegar os caracteres correspondentes. A regex atualizada será:/([.,!,?])/.

Como substituir caracteres em uma string usando o método Split()

Podemos resolver diversos problemas usando o método split() em conjunto com outros métodos de string e de array. Vejamos um desses problemas agora. Pode ser uma situação comum precisar substituir todas as ocorrências de um caractere na string por outro caractere diferente.

Por exemplo, você pode querer criar o id de um elemento HTML a partir do valor de um elemento name. O valor de name pode ter um espaço (' '). Porém, no HTML, valores de id não podem ter espaços. Podemos resolver esse problema da seguinte maneira:

let name = 'Tapas Adhikary';
let subs = name.split(' ');
console.log(subs); // ["Tapas", "Adhikary"]

let joined = subs.join('-');
console.log(joined); // Tapas-Adhikary

Consideremos que o valor de name seja o primeiro nome (Tapas), com o sobrenome (Adhikary) separados por um espaço. Nesse caso, primeiramente devemos dividir name usando o caractere de espaço como separador. Isso retornará um array contendo os valores de nome e sobrenome: ['Tapas', 'Adhikary'].

Em seguida, usamos o método array chamado join() para unir os elementos do array usando o seguinte caractere: -. O método join() retorna uma string resultante da união dos elementos a partir do caractere passado como parâmetro. Assim, obteremos como resultado da operação o valor Tapas-Adhikary.

ES6: como dividir usando desestruturação de array

O ECMAScript2015 (ES6) introduziu uma maneira mais inovadora de extrair um elemento de um array e atribuí-lo a uma variável. Essa sintaxe inteligente é conhecida como desestruturação de array. Podemos usá-la juntamente com o método split() para atribuir o resultado a uma variável de maneira mais fácil e usando menos linhas de código.

let name = 'Tapas Adhikary';
let [firstName, lastName] = name.split(' ');
console.log(firstName, lastName);

Nesse exemplo, dividimos o nome usando o caractere de espaço como separador. Em seguida, atribuímos os valores retornados pelo array a duas variáveis (firstName e lastName) usando a sintaxe da desestruturação de array.

Antes de terminarmos...

👋 Gostaria de programar e aprender comigo? Você pode encontrar o mesmo conteúdo deste artigo no vídeo do YouTube abaixo. Basta abrir o seu editor de código favorito e começar a pôr a mão na massa.

Espero que você tenha achado este artigo esclarecedor e que ele o ajude a entender o método split() do JavaScript mais claramente. Peço que, por favor, pratique exaustivamente os exemplos aqui apresentados para obter um bom domínio sobre esses conceitos. Você pode encontrar todos os exemplos de código no meu repositório no GitHub.

Vamos nos conectar. Você pode me encontrar no Twitter (@tapasadhikary). Fique à vontade para me seguir.

Você também pode se interessar por estes artigos:

• The JavaScript Array Handbook – JS Array Methods Explained with Examples (conteúdo em inglês)
• 10 DevTools tricks to help you with CSS and UX design (conteúdo em inglês)
• A practical guide to object destructuring in JavaScript (conteúdo em inglês)
• 10 trivial yet powerful HTML facts you must know (conteúdo em inglês)
• 10 VS Code emmet tips to make you more productive (conteúdo em inglês)

Em Python, uma string é uma sequência de caracteres que podem ser especiais ou alfanuméricos.

Um exemplo de string é: "nos vemos na sexta-feira" (em inglês, we meet on Friday). Você pode acessar subpartes específicas da string, que são popularmente conhecidas como substrings.

Podemos definir uma substring como sendo uma sequência de caracteres dentro de uma string. Usemos a frase anterior como exemplo. No Python, poderíamos considerar como substrings as partes "sexta-feira", "na" e "vemos".

Como criar uma substring em Python

O Python nos fornece diferentes maneiras e métodos para criarmos uma substring, para verificarmos se uma substring está presente, para obtermos o índice de uma substring, entre outras funcionalidades.

Você pode extrair uma substring de uma string recortando-a com índices que obtêm sua substring da seguinte maneira:

string[começo:fim:passo]

• começo — O índice inicial da substring. O caractere deste índice estará incluso no recorte.
• parada — O índice final da substring. O caractere deste índice serve apenas como ponto de parada e não estará incluso no recorte.
• passo — O número que determina o intervalo do recorte. O valor padrão é 1.

Os valores dos índices podem ser positivos ou negativos. Índices positivos começam do início e vão até o final da string, enquanto que índices negativos começam do final e vão até o início da string.

Neste artigo, você aprenderá como executar várias operações relacionadas às substrings em Python.

Como obter os primeiros n caracteres de uma string em Python

Este exemplo nos mostra como recortar os primeiros 5 caracteres da string:

string = "hello world"
print(string[:5])

Aqui definimos o índice de parada como 5. O índice de começo é 0 por padrão.

A saída é: 'hello'.

Como obter os caracteres do meio de uma string usando substrings em Python

Este exemplo nos mostra como recortar os caracteres a partir do índice 3 até o índice 5 de uma string:

string = "hello world"
print(string[3:5])

A saída é: 'lo'.

Como obter o último caractere de uma string em Python

Para obter o último caractere, basta usar o índice -1 (índice negativo). Vejamos o seguinte exemplo:

string = "freecodecamp"
print(string[-1])

A saída será: 'p'.

Como obter os últimos n caracteres de uma string em Python

Neste exemplo, recortaremos os últimos 4 caracteres da string. Aqui, usamos o índice negativo para começarmos o recorte a partir do final da string.

string = "freecodecamp"
print(string[-4:])

A saída será: 'camp'.

Como recortar a string com passos usando substrings em Python

Podemos indicar o passo no recorte da string após indicarmos os índices de começo e de parada. Por padrão, o passo tem valor 1. No exemplo a seguir, porém, usaremos o passo com valor 2.

string = "welcome to freecodecamp"
print(string[::2])

A saída será: 'wloet fecdcm'. Isso porque, com passo 2, recortamos de 2 em 2 caracteres.

Como verificar se uma substring está presente em uma string em Python

Às vezes, gostaríamos de verificar se uma substring está presente em uma string. O exemplo a seguir verificará se a substring 'code' faz parte da string:

substring = "code"
string = "welcome to freecodecamp"
print(substring in string)

Se a substring definida estiver presente na string, o retorno será True. Do contrário, será False.

Nesse caso, a saída será: True. Isso acontece porque 'code' faz parte de 'freecodecamp'.

Outra maneira de verificar se uma substring está presente em uma string em Python

Podemos usar o método find() para verificar se encontramos a substring desejada na string.

Vejamos o seguinte exemplo:

substring = "zz"
string = "hello world"
print(string.find(substring))

Se a substring for encontrada na string, o retorno será o índice em que a substring começa. Se não for encontrada, o método retorna -1.

Neste caso, a saída é: -1. Isso significa que "zz" não está faz parte de "hello world".

Como obter o caractere de um determinado índice em uma string em Python

Podemos passar o índice de um caractere específico para recortá-lo.

string ="hello world"
print(string[4])

A saída será: 'O', que é o caractere presente na posição 4.

Como criar uma lista de substrings a partir de uma string em Python

Podemos usar o método split() para criarmos uma lista de substrings. Vejamos sua aplicação no seguinte exemplo:

string = "welcome to freecodecamp platform"
print(string.split())

A saída será: ['welcome', 'to', 'freecodecamp', 'platform'].

Como inverter uma string em Python usando passo negativo

Para inverter a string, o passo deve ter um valor negativo, por exemplo: -1.

string = "welcome to freecodecamp"
print(string[::-1])

A saída será: 'pmacedoceerf ot emoclew'.

Como contar quantas vezes uma substring está presente em uma string em Python

Podemos usar o método count() para sabermos quantas vezes uma determinada substring aparece em uma string.

string = "we will have a quick coding lesson this afternoon"
print(string.count('noon'))

A saída será: 1.

Considerações finais sobre substrings em Python

Parabéns por chegar ao final deste artigo. 👏👏 Espero que você tenha aprendido algo novo sobre substrings em Python.

Se você, de fato, aprendeu algo novo ou se gostou de ler este artigo, compartilhe-o para que outras pessoas também possam lê-lo. Até lá, nos vemos no próximo artigo!

Você também pode encontrar o autor no Twitter e ler mais artigos como este aqui (textos em inglês).

Se por acaso alguém disser que "JavaScript é apenas para desenvolvimento para front-end e PHP é para back-end", não dê ouvidos.

Antes de começar a afirmar que uma língua é melhor do que a outra, há algo que preciso deixar claro. Não quero transformar a discussão entre PHP e JavaScript em uma comparação de maçãs e laranjas. Portanto, explicarei a principal diferença entre as duas.

PHP é uma linguagem de programação voltada apenas para desenvolvimento para back-end. O JavaScript, por sua vez, foi inicialmente criado como uma linguagem para desenvolvimento para front-end. No entanto, com a introdução do Node.js, em 2009, o JavaScript tornou-se o que chamamos de full-stack.

Tendo isso em vista, a afirmação comumente citada de que "JavaScript é apenas para desenvolvimento para front-end e PHP é para back-end" simplesmente não é verdade. Hoje, você pode desenvolver toda uma aplicação usando JavaScript – tanto o lado do client quanto o lado do servidor. A questão é: qual linguagem é mais adequada para o seu projeto?

Portanto, se você está tentando decidir entre PHP e JavaScript, a discussão é reduzida a qual linguagem você deseja usar para o desenvolvimento do back-end. Para ajudá-lo a tomar essa decisão, compararei PHP e JavaScript para desenvolvimento para a web com base nos seguintes critérios:

1. Visão geral
2. Desempenho e velocidade
3. Extensibilidade
4. Universalidade
5. Comunidade
6. Curva de aprendizagem
7. Sintaxe
8. Apps para os quais é mais adequado

Visão geral

JavaScript

O JavaScript é uma linguagem de programação dinâmica, leve, multiparadigma, de alto nível, interpretada ou compilada just-in-time. Criado em 1995 por Brendan Eich, o JavaScript é caracterizado por sintaxe com uso de chaves ({}), funções de primeira classe e orientação a objetos baseada em protótipos.

De acordo com o site Statista(em inglês), 69% dos desenvolvedores ao redor do mundo usam JavaScript. Outros 5% pretendem adotar a linguagem. O relatório nos mostra que essa era a linguagem de programação mais popular no mundo ao no início desta década.

PHP

PHP é a sigla para PHP Hypertext Preprocessor. É uma linguagem de script de código aberto para desenvolvimento para back-end. Desenvolvida em 1994 por Rasmus Lerdorf, a linguagem é mundialmente reconhecida. De acordo com o site W3Tech(em inglês), 79% dos websites usam PHP. Entre os mais populares estão o Facebook, a Wikipédia e, claro, o WordPress.

PHP 0 x 0 JavaScript

Desempenho e velocidade

JavaScript

O JavaScript é caracterizado por um modelo de execução orientado por eventos, sem bloqueio de entrada e saída e thread única. Esse modelo é possível graças ao evento de loop e ao clustering do Node.

A natureza assíncrona do Node.js permite que ele percorra todo o código simultaneamente sem precisar esperar que algumas funções sejam executadas. Graças a isso, o JavaScript é a melhor solução para aplicações de baixa latência, como plataformas de streaming. O Node.js ganha ainda mais velocidade por conta do mecanismo V8, conexão constante com o servidor e funções de callback.

PHP

O PHP é caracterizado por um modelo de execução de threads múltiplas com bloqueio de entrada e saída. Ao contrário do JavaScript, o PHP é síncrono. A segunda linha de código em PHP só pode ser executada depois da primeira, o que o torna muito mais lento do que o JavaScript.

Embora o PHP, sem dúvida, perca em velocidade, alguns dizem que ele é mais estável do que o JavaScript. Porém, essa vantagem é duvidosa e ainda não foi totalmente comprovada.

A confiabilidade e a estabilidade de ambas as linguagens é uma questão que permanece aberta à interpretação. Porém, graças à sua excelente velocidade, o JavaScript ganha um ponto no critério desempenho e velocidade.

PHP 0 x 1 JavaScript

Extensibilidade

JavaScript

O JavaScript pode ser combinado com HTML, XML e Ajax.

Há um grande volume de frameworks para JavaScript. Seu número beira ao incontável, tendo em vista que novos surgem com bastante frequência.

As tecnologias de JS mais populares são: Vue, Angular e React. Aqui na KeenEthics, porém, vislumbramos um futuro promissor para o Svelte.

O framework mais comum do lado do servidor é o Node.js. O framework que você escolher para desenvolver sua aplicação pode determinar sua velocidade e custo de desenvolvimento, assim como desempenho e outros fatores técnicos.

Com relação aos gerenciadores de pacotes, o Node.js já conta com o NPM (Node Package Manager) pré-instalado. O NPM facilita muito a vida dos desenvolvedores, sendo o maior registro de softwares do mundo.

PHP

O PHP pode ser combinado apenas com HTML.

Provavelmente, a maior vantagem do PHP é a disponibilidade de CMSs, como o WordPress ou o Drupal. Essas soluções podem facilitar muito o desenvolvimento para a web e até torná-lo mais barato. O PHP também pode ser estendido com qualquer tecnologia da stack LAMP e soluções de servidor, como MySQL ou PostgreSQL.

Existem dois gerenciadores de pacotes para o PHP: PEAR e Composer. O PEAR (PHP Extension and Application Repository) é uma biblioteca estruturada do PHP de código aberto. O Composer é uma ferramenta de gerenciamento de dependências para PHP.

De maneira geral, o JavaScript oferece mais oportunidades de extensibilidade. Portanto, ele leva o ponto no critério extensibilidade.

PHP 0 x 2 JavaScript

Universalidade

O JavaScript é multiplataforma, assim como o PHP. Tanto o PHP quanto o JavaScript são voltados, principalmente, para o desenvolvimento de aplicações para a web. Embora ambos possam ser utilizados para o desenvolvimento de aplicações móveis.

JavaScript

A maior vantagem do JavaScript sobre o PHP está no fato de o JavaScript ser uma linguagem de desenvolvimento full-stack. A maior parte das comparações entre JS e PHP enfatizam que o JavaScript é uma linguagem usada apenas no front-end, o que não é verdade. Você pode desenvolver uma aplicação para a web ou para dispositivos móveis usando apenas o JavaScript.

A experiência da KeenEthics prova isso. Como uma empresa orientada para o JS, desenvolvemos soluções para a web e dispositivos móveis personalizadas a partir do zero usando apenas JavaScript.

PHP

O PHP é apenas uma linguagem de desenvolvimento para back-end. Além disso, o PHP pertence à stack LAMP, que é uma sigla para: Linux, Apache, MySQL e PHP/Perl/Python.

Para desenvolver um aplicativo para a web com essa stack de tecnologias, um engenheiro de software precisa conhecer quatro sistemas de sintaxe diferentes — bem como HTML e CSS. Alternar entre linguagens é tão inconveniente quanto ineficiente, além de complicar muito a curva de aprendizagem.

Desenvolver em JavaScript é desenvolver de maneira full-stack, sendo essa a maior vantagem da linguagem. Ponto para o JavaScript no critério universalidade.

PHP 0 x 3 JavaScript

Comunidade

JavaScript

De acordo com o site stackshare.io (em inglês), as principais razões que levam os desenvolvedores a gostar de trabalhar com o JavaScript são: sua universalidade (pode ser usado no front-end e no back-end), sua popularidade (está em todo lugar) e sua extensibilidade (conta com uma série de frameworks excelentes).

O JavaScript é usado pelas plataformas: Netflix, LinkedIn, Trello, Uber, Airbnb, Instagram, eBay, NASA e Medium.

A maioria dos frameworks de JS são de código aberto, embora o JavaScript propriamente dito não o seja.

O JavaScript é a linguagem mais popular do GitHub, com mais de 20% de pull requests compartilhados.

PHP

O stackshare.io nos mostra que as vantagens mais adoradas do PHP são: uma ampla comunidade, código aberto e facilidade de deploy.

O PHP é usado por empresas como Facebook, Lyft, Wikipedia, Slack, Tumblr e 9GAG.

O PHP é uma linguagem de código aberto, o que o torna mais flexível e personalizável.

No GitHub, o PHP ocupa a oitava posição — com cerca de 5% de pull requests.

Ambas as linguagens têm enormes comunidades de suporte e são favorecidas por gigantes da tecnologia. Tanto o PHP quanto o JavaScript levam este ponto no critério comunidade.

PHP 1 x 4 JavaScript

Curva de aprendizagem

PHP

PHP é muito mais simples de começar a aprender do que JavaScript. Configurar um servidor e tão simples quanto criar um arquivo .php — basta escrever algumas linhas de código envolvidas pelas tags <?php?> e colocar o URL no navegador.

Além disso, as particularidades do PHP — como funções inconsistentes ou valores de retorno — são mais fáceis de entender e de dominar do que as do JavaScript e de certos frameworks do JS.

JavaScript

Configurar o JavaScript — ou seja, o Node.js — para o lado do servidor não é tão complicado. É, porém, mais difícil do que seria com PHP. Um desenvolvedor de JS iniciante precisa de mais conhecimento sobre o assunto do que um desenvolvedor de PHP iniciante precisaria.

Porém, o esforço feito para se aprender JavaScript é totalmente recompensado. Por ser uma linguagem mais universal do que o PHP, o esforço de se aprender JavaScript acaba sendo mais valioso.

O PHP ganha este ponto pela sua simplicidade de aprendizagem. Fator que agrada aos desenvolvedores iniciantes.

PHP 2 x 4 JavaScript

Sintaxe

A sintaxe de uma linguagem de programação, na maioria dos casos, é apenas uma questão de preferência pessoal. Portanto, nenhuma das linguagens ganha este ponto.

Ainda assim, apresentarei uma comparação entre as regras de sintaxe de ambas, para o caso de o leitor estar em dúvida sobre qual delas aprender. Talvez as particularidades de uma linguagem sejam mais adequadas para você. Talvez seja assim que você fará sua escolha.

• Tanto o PHP como o JavaScript fazem uso de parênteses, colchetes e chaves.
• As variáveis em PHP e em JavaScript podem ser de qualquer tipo, podem mudar de tipo e podem ter seu tipo verificado pelo respectivo operador de cada linguagem — typeof no JS e gettype no PHP.
• Em ambas as linguagens, os arrays iniciam em "0".
• O laço for() funciona de maneira idêntica no PHP e no JavaScript. A diferença está apenas em como a variável dentro dos parênteses é declarada. O laço foreach() do PHP pode ser facilmente convertido para um laço for() do JavaScript.
• Em JS, as variáveis têm escopo global por padrão, a não ser que declaremos seu escopo como local com a palavra reservada var. Uma variável local está disponível para tudo dentro da função e de suas subfunções.
• Em JS, a adição e a concatenação são feitas com "+".
• O JS diferencia letras maiúsculas de minúsculas em variáveis e funções.
• Não há arrays associativos (pares de chave-valor) em JS. É necessário usar strings do JSON para esse recurso.
• Em JS, arrays e objetos são muito semelhantes e, muitas vezes, intercambiáveis. Um item de objeto também pode ser referenciado como um item de array.
• Em JS, os itens de objetos são referenciados por meio do ponto final ".".
• O PHP faz uso de cifrões "$" para indicar variáveis, coisa que o JS não faz. Todas as variáveis têm escopo local por padrão, a menos que declaradas globais com a palavra reservada global. Uma variável local não estará disponível em subfunções, a menos que a passemos como argumento.
• Em PHP, a adição é feita com " + " e a concatenação é feita com ".".
• O PHP diferencia letras maiúsculas de minúsculas APENAS em variáveis.
• O PHP permite arrays numéricos e associativos.
• Em PHP, arrays e objetos são duas coisas completamente diferentes — com sintaxes também diferentes.
• No PHP, itens em objetos são referenciados com uma seta "->".

Essas são algumas das diferenças mais básicas que você deve saber sobre as duas linguagens. Para conhecer mais diferenças de sintaxe entre o PHP e o confira este artigo (em inglês).

Como já foi mencionado, nenhuma das linguagens leva o ponto neste critério, pois a sintaxe é uma questão de preferência pessoal.

PHP 2 x 4 JavaScript

Aplicações para as quais é mais adequado

JavaScript

O JavaScript tem hospedagem de servidor dedicado, o que o torna perfeitamente adequado para grandes projetos. Ele pode ser usado para desenvolver para o front-end e para o back-end para quase qualquer tipo de aplicação de software — incluindo jogos 3D, soluções AR/VR, produtos IoT e assim por diante.

PHP

Embora o PHP seja uma linguagem de programação de uso geral, ele é usado principalmente para o desenvolvimento de páginas web dinâmicas. Considerando a disponibilidade de sistemas de gerenciamento de conteúdo baseados em PHP, como Moodle e WordPress, o PHP é a melhor opção para blogs, sistemas de gerenciamento de aprendizagem e sites de e-commerce.

Novamente, em termos de aplicações para as quais é mais adequada, cada linguagem é diferente, mas não necessariamente melhor ou pior do que a concorrente. Tanto o PHP quanto o JavaScript são bastante universais. Portando, as duas linguagens levam este ponto.

PHP 3 x 5 JavaScript

Para finalizar

A comparação entre PHP e JavaScript termina com um placar de 3 x 5 — conferindo a "vitória" para o JavaScript.

Ambas as linguagens são muito boas em termos de suporte da comunidade, extensibilidade e aplicações às quais são adequadas. O JavaScript é certamente mais eficiente em termos de velocidade e universalidade. Por outro lado, perde para o PHP em termos de curva de aprendizagem — embora a sintaxe, como concluímos, seja apenas uma questão de preferência pessoal.

Tenha em mente que nem sempre o JavaScript e o Node.js serão a melhor escolha. Isso cabe a você e ao seu projeto.

Opte pelo Node.js quando você for:

• Desenvolver uma aplicação de página única.
• Desenvolver uma aplicação em tempo real, tal como um serviço de streaming ou de troca de mensagens.
• Construir um grande projeto com uma carga de dados pesada.
• Usar o JavaScript para desenvolvimento para front-end.

Opte pelo PHP quando você for:

• Desenvolver um blog ou um site e-commerce.
• Fazer uso das tecnologias LAMP.

Tem uma ideia para um projeto?

Minha empresa, a KeenEthics, pode não ajudá-lo com PHP exatamente, mas somos um empresa experiente em JavaScript e estamos dispostos a aceitar o desafio. Se você está pronto para fazer a diferença e iniciar seu projeto, sinta-se à vontade para entrar em contato conosco.

Se você gostou deste artigo, definitivamente deveria ler outra comparação maravilhosa: Angular x React: qual deles escolher para a sua aplicação ou Node.JS x Python: como escolher a melhor tecnologia para desenvolver o back-end do seu aplicativo web.

Para encerrar

Gostaria também de agradecer a Yaryna Korduba, uma das mais impressionantes desenvolvedoras para a web da KeenEthics, por inspirar e contribuir para este artigo.

O artigo original publicado no blog da KeenEthics pode ser encontrado aqui: PHP vs JavaScript: Which Technology Will Suit Your Business Better?

Com a rápida evolução dos dispositivos conectados, o design responsivo continua a ser fundamental para o desenvolvimento para a web.

Até pouco tempo atrás, a expressão "design responsivo para a web" sequer existia. Porém, hoje, muitos de nós precisaram adotar esse conceito de alguma maneira.

De acordo com o site Statistica (em inglês), em 2019, 61% das pesquisas feitas no Google partiram de um dispositivo móvel. Em setembro de 2020, a Google viria a mudar seu algoritmo de pesquisa (texto em inglês) a fim de dar prioridade a sites que fossem compatíveis com dispositivos móveis.

Neste artigo, serão abordados os seguintes tópicos:

• O que é o design responsivo para a web?
• A tag meta viewport e como ela funciona
• Técnicas eficazes de design responsivo para a web para adaptar seu conteúdo a dispositivos móveis
• Ferramentas para ajudar a simular e monitorar a experiência do usuário em celulares e tablets

O que é o design responsivo para a web?

O design responsivo para a web é uma abordagem que tem como foco o ambiente do usuário do site. O ambiente do usuário dependerá do dispositivo que ele usa para se conectar à internet.

Existem diversos fatores que oferecem oportunidades para uma abordagem focada no usuário. Alguns desses fatores são:

• conexão de rede;
• tamanho de tela;
• tipo de interação (como tela sensível ao toque ou painel tátil);
• resolução gráfica.

Antes da popularização do design responsivo para a web, muitas empresas administravam um site à parte para receber tráfego encaminhado com base no agente do usuário.

Porém, no design responsivo para a web, o servidor sempre envia o mesmo código HTML para todos os dispositivos, enquanto o CSS é usado para alterar a renderização da página em cada dispositivo.

Independentemente dessas duas abordagens, a primeira etapa na criação de um site para celular ou tablet é garantir que o navegador conheça a intenção. É nesse ponto que a tag meta viewport entra em jogo.

Identificando um site da web para dispositivos móveis com a tag meta viewport

A tag meta viewport faz o navegador se ajustar à largura da tela de cada dispositivo.

Sem o elemento meta viewport, os navegadores de dispositivos móveis exibirão páginas da web com configurações padrão para dispositivos desktop. O resultado disso é uma experiência não responsiva e com uma visualização bastante distanciada do conteúdo.

A seguir, temos uma implementação padrão:

<meta name="viewport" content="width=device-width,initial-scale=1"/>

Agora que informamos ao navegador o que está acontecendo, que tal utilizarmos técnicas populares para tornar nosso site responsivo?

Media queries do CSS para diferentes tamanhos e orientações de tela

Se você é novo no design responsivo para a web, saiba que as media queries são o primeiro e mais importante recurso a ser aprendido. As media queries nos permitem estilizar os elementos com base na largura da viewport. Uma estratégia popular do CSS é estabelecer estilos com foco nos dispositivos móveis primeiro (técnica que, em inglês, chama-se mobile first) e, a partir deles, desenvolver estilos mais complexos e específicos para o desktop.

As media queries são uma parte importante do design responsivo para a web. Elas são comumente usadas para atributos como grid layout, font-size, margin e padding para que eles possam se comportar de maneira diferente, dependendo da tela do dispositivo.

Aqui, temos um exemplo bastante comum de estilo usando a técnica do mobile first. Nele, vemos que a largura da coluna será de 100% em telas pequenas e de 50% em telas maiores.

.column {
  width: 100%;
}

@media (min-width: 600px) {
  .column {
    width: 50%;
  }
}

O código acima pode ser simples, mas seu resultado é bem interessante.

1. Considerando o mobile first, O elemento "column" é definido como tendo uma largura de 100%;
2. Usando uma media query com min-width, definimos estilos específicos para viewports que tenham a partir de 600px. Assim, para viewports maiores que 600px, nosso elemento "column" terá uma largura que é de 50% com relação ao seu elemento pai.

Embora as media queries sejam essenciais para o design responsivo para a web, outros diversos recursos do CSS vêm sendo amplamente adotados e aceitos pelos navegadores. O flexbox é um desses novos e importantes recursos para o design responsivo para a web.

O que é o Flexbox?

Você pode estar se perguntando: "o que o Flexbox faz"? A pergunta mais adequada seria: "o que o Flexbox não faz"? Qual é a maneira mais fácil de centralizar um elemento verticalmente com CSS? Flexbox. Como criar um grid layout responsivo? Flexbox. Como conquistar a paz mundial? Flexbox.

O módulo de layout do Flexbox (Flexible Box) oferece um modo mais eficiente de dispor, alinhar e distribuir o espaço entre os itens em um contêiner; mesmo quando o seu tamanho é dinâmico (daí a palavra "flex").

No exemplo a seguir, combinamos as já mencionadas media queries para criar um grid responsivo:

<style>
  main {
    background: #d9d7d5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  div {
    background: #767775;
    flex-basis: 100%;
    height: 100px;
    margin-bottom: 0.5rem;
  }

  @media (min-width: 600px) {
    main {
      flex-wrap: nowrap;
    }

    div {
      flex-basis: 33%;
    }
  }
</style>
<main>
  <div></div>
  <div></div>
  <div></div>
</main>

Com esse código, nós:

1. Estabelecemos um layout com Flexbox usando display: flex em nosso contêiner main.
2. Estilizamos seguindo a técnica do mobile first. Definimos o elemento main para flex-wrap: wrap, o que habilitará uma quebra de linha para os elementos filhos — conforme podemos ver na figura 1. Definimos um flex-basis: 100% em nossas divs para garantir que elas ocupem 100% da largura do elemento pai (também na figura 1).
3. Definimos um estilo para dispositivos maiores, como tablets e desktops. Utilizamos uma media query igual à do exemplo da seção anterior para declarar no contêiner main a propriedade flex-wrap: nowrap. Isso impede que os elementos filhos tenham uma quebra de linha, o que os mantêm lado a lado no mesmo eixo. Ao configurar na div um flex-basis: 33% para essa mesma media query, estabelecemos que as colunas tenham 33% da largura do elemento pai.
4. A mágica deste exemplo deve acontecer em dispositivos maiores — com a combinação das nossas regras de media query e o Flexbox. Por termos definido display: flex e por termos mantido essa regra na media query, pudemos criar um layout de Flexbox para celulares, tablets e desktops. A media query que herda o display: flex e define a regra flex-basis: 33% nos apresentará um layout do Flexbox conforme podemos observar na figura 2. Antigamente, para conseguirmos esse layout em colunas, teríamos o trabalho de escrever extensas regras de CSS.

Graças ao Flexbox, porém, conseguimos ter layouts variados e fluídos. Em alguns casos, podemos não ter tanta liberdade no espaço vertical. Talvez seja necessário ajustar um elemento a uma altura fixa. Para isso, temos outra ferramenta à nossa disposição: a rolagem horizontal (do inglês, horizontal scroll).

Rolagem horizontal com overflow scroll

Em algum momento, você talvez se depare com conteúdo saindo da viewport e queira deixá-lo mais, digamos, elegante. Eis que temos overflow scroll para salvar o dia. Essa técnica pode ser aplicada para menus e tabelas com rolagem de conteúdo. Segue abaixo um exemplo de menu com essa característica.

<style>
  menu {
    background: #d9d7d5;
    padding: 0.25rem;
    overflow-y: scroll;
    white-space: nowrap;
  }

  span {
    background: #767775;
    color: #ffffff;
    display: inline-block;
    margin: 0.25rem;
    padding: 0.5rem;
  }
</style>
<menu>
  <span>Design responsivo para a web</span>
  <span>Responsividade</span>
  <span>Menu responsivo</span>
  <span>Exemplo de overflow scroll</span>
  <span>É muita coisa!</span>
  <span>Sim</span>
  <span>temos</span>
  <span>mais</span>
  <span>um</span>
  <span>item</span>
</menu>

Como fazemos isso? Vamos analisar mais de perto.

• overflow-y: scroll é o ingrediente secreto da nossa receita. Com essa declaração, os elementos filhos terão uma rolagem no eixo horizontal.
• Muita calma nessa hora, no entanto! Você pode pensar que o overflow-y seja suficiente, mas também precisamos dizer ao navegador para não envolver os elementos filhos com white-space: nowrap?

Agora que temos algumas técnicas de layout do design responsivo para a web na manga, vamos dar uma olhada em dois elementos que nos trazem desafios específicos à sua natureza visual: imagens e vídeos.

Imagens responsivas

Usando atributos modernos das tags de imagem, podemos adaptar seu conteúdo a uma variedade de dispositivos e resoluções. Veja este exemplo de imagem responsiva:

<style>
  img {
    max-width: 100%;
  }
</style>

<picture>
  <source type="image/webp" srcset="https://my-image.com/my-image-100.webp 1x, https://my-image.com/my-image-200.webp 2x">
  <source type="image/png" srcset="https://my-image.com/my-image-100.png 1x, https://my-image.com/my-image-200.png 2x">
  <img alt="my image" src="https://my-image.com/my-image-200.png" loading="lazy" width="100" height="100">
</picture>

Essa estrutura faz muita coisa acontecer. Vamos por partes:

1. Ao declarar max-width: 100%, a imagem será redimensionada para um tamanho maior ou menor dependendo da largura do contêiner.
2. Combinando as declarações das tags picture, source e img, vamos renderizar e carregar a imagem mais adequada ao dispositivo do usuário.
3. WebP é um formato de imagem moderno, que fornece uma melhor compressão para imagens na web. Com a tag source, podemos referenciar uma imagem WebP para usá-la em navegadores que têm suporte a esse formato. Para os que não tem, usamos outra source que referencia uma imagem PNG.
4. srcset é usado para informar ao navegador qual imagem usar com base na resolução do dispositivo.
5. Estabelecemos o lazy loading nativo ao declararmos loading="lazy".

Vídeos responsivos

A responsividade de vídeos é outro assunto que levou à elaboração de inúmeros artigos e documentações.

Uma coisa fundamental para termos em mente quando o assunto são imagens, vídeos, iframes e outros elementos responsivos é o uso da proporção de tela (em inglês, aspect ratio). A "caixa" de proporção de tela já é uma técnica conhecida e também uma ferramenta bastante útil que o desenvolvedor para a web deve ter no seu arsenal.

Este artigo fornece uma demonstração sólida de como se ter vídeos com largura "fluída" (texto em inglês). Vamos dar uma olhada no código a seguir e analisá-lo:

<style>
  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }

  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

No exemplo, temos a integração de um vídeo do YouTube em uma tag iframe dentro de uma div com a classe videoWrapper. Vamos ver o que esse nosso código faz:

• A declaração position: relative no contêiner faz os elementos filhos terem uma posição absoluta em relação a ele.
• height: 0, junto a padding-bottom: 56.25%, é a chave para estabelecer um comportamento dinâmico; reforçando a proporção de tela 16:9.
• As declarações position: absolute, top: 0 e left: 0 do iframe criam um comportamento no qual o elemento se posiciona de maneira absoluta em relação ao seu elemento pai, fixando-o no canto superior esquerdo.
• Por fim, largura e altura (as propriedades height e width) de 100% fazem com que o iframe tenha 100% da largura e da altura do seu elemento pai, enquanto o .videoWrapper — o elemento pai — assume total controle em estabelecer a proporção de tela.

Eu sei... é muita coisa. Podemos fazer ainda mais para que vídeos e imagens tenham a melhor adaptação possível para celulares e tablets. Inclusive, eu gostaria que você pesquisasse por conta própria por outras ferramentas para utilizar em conjunto com as já mencionadas.

Certo, agora que já dominamos o design responsivo para a web, como podemos testar tudo o que fizemos? Felizmente, temos uma série de ferramentas para simular e monitorar a experiência do usuário em uma variedade de dispositivos.

Ferramentas para simular e monitorar sites da web responsivos

Há uma variedade de ferramentas úteis para nos ajudar a criar sites com o design responsivo para a web. Abaixo estão algumas que considero especialmente úteis.

Emulação de dispositivos móveis nas ferramentas do desenvolvedor do Google Chrome

As ferramentas do desenvolvedor do Google Chrome fornecem emulação de uma variedade de dispositivos móveis, como tablets e celulares. Ele também fornece uma opção "responsive ", que permite definir um tamanho de viewport personalizado.

Monitorando o desempenho de um site da web para dispositivos móveis com o Foo

O Lighthouse é uma ferramenta de código aberto que fornece uma maneira de analisar o desempenho de um site para um dispositivo específico.

O Foo usa o Lighthouse internamente para monitorar o desempenho de um site, fornecendo um feedback para análise. Você pode configurar o monitoramento para dispositivos desktop e móveis para obter feedback contínuo sobre o nível de responsividade de seu site.

Por exemplo, um relatório do Lighthouse indicará se e quais imagens estão sendo carregadas incorretamente em algum dispositivo.

Conclusão

O design responsivo para a web seguirá evoluindo rapidamente, mas — se ficarmos por dentro das tendências atuais — poderemos proporcionar a melhor experiência aos nossos usuários. Espero que as ferramentas e técnicas apresentadas aqui sejam úteis a você! Com elas, podemos agradar aos usuários dos nossos sites e ainda conseguir um melhor posicionamento nos mecanismos de busca.