Eu finalmente decidi lidar com esse problema e para isso vou testar o 1password-cli, um utilitário de linha de comando que permite interagir com o 1Password.

No contexto deste artigo, vou pular a configuração do 1password-cli e vou assumir que o comando op está disponível em seu terminal.

$ which op
/Users/fnando/local/bin/op

O primeiro passo é fazer login com o comando op signin. Quando você terminar, pode listar os seus cofres com o comando op vault ls.

$ op vault ls
ID                            NAME
zyxlrxyu53kax7qqrxz554fgbq    Private
oblww37jzanxpl4wruzjz43i71    dev

No meu caso vou usar o cofre dev para armazenar os segredos que uso em desenvolvimento. Você pode criar o item usando a linha de comando ou a interface do 1Password. Eu vou usar o tipo server para isso:

$ op item create --title main --category server --vault dev
ID:          kbfa7n6hcziy6ck7ys63pzta3a
Title:       main
Vault:       dev (oulww37jzinxpl4wruzjz43i44)
Created:     now
Updated:     now
Favorite:    false
Version:     0
Category:    SERVER
Fields:
  Admin Console:

  Hosting Provider:

Eu recomendo que você abra o 1Password e remova os itens que são adicionados por padrão; infelizmente, eu não achei uma maneira de remover esses itens usando a linha de comando. Aproveite para remover também os campos que foram adicionados por padrão, já que eles não serão usados (senha, usuário e url).

Agora você pode adicionar os segredos usando a o comando op item edit. Se preferir, você também pode usar a interface do 1Password.

$ op item edit --vault dev main 'dev.SOME_API_KEY[password]=SOME_KEY' 'dev.ANOTHER_API_KEY[password]=SOME_OTHER_KEY'
ID:          kbfa7n6hcziy6ck7ys63pzta3a
Title:       main
Vault:       dev (oulww37jzinxpl4wruzjz43i44)
Created:     40 seconds ago
Updated:     now by Nando Vieira
Favorite:    false
Version:     2
Category:    SERVER
Fields:
  dev:
    SOME_API_KEY:       SOME_KEY
    ANOTHER_API_KEY:    SOME_OTHER_KEY

Os segredos acima serão adicionados na seção chamada dev. Aqui tem um screenshot mostrando os segredos no aplicativo do 1Password.

Depois que todos os segredos foram adicionados, podemos pegar esses itens em formato JSON usando o comando op item get.

$ op item get --vault dev main --format json
{
  "id": "kbfa7n6hcziy6ck7ys63pzta3a",
  "title": "main",
  "version": 3,
  "vault": {
    "id": "oulww37jzinxpl4wruzjz43i44",
    "name": "dev"
  },
  "category": "SERVER",
  "last_edited_by": "XCFD5SQIJNCZZOF2PBC7XED6QE",
  "created_at": "2022-12-28T08:44:55Z",
  "updated_at": "2022-12-28T00:45:35.033579-08:00",
  "sections": [
    {
      "id": "Section_6r6xfx7vkbniby2fogqg7tvmee",
      "label": "dev"
    }
  ],
  "fields": [
    {
      "id": "notesPlain",
      "type": "STRING",
      "purpose": "NOTES",
      "label": "notesPlain",
      "reference": "op://dev/main/notesPlain"
    },
    {
      "id": "xzuhdgcumcnz5peyvjckq2z4gi",
      "section": {
        "id": "Section_6r6xfx7vkbniby2fogqg7tvmee",
        "label": "dev"
      },
      "type": "CONCEALED",
      "label": "SOME_API_KEY",
      "value": "SOME_KEY",
      "reference": "op://dev/main/dev/SOME_API_KEY"
    },
    {
      "id": "4mg4ejw7q3pnsyworyiflofemq",
      "section": {
        "id": "Section_6r6xfx7vkbniby2fogqg7tvmee",
        "label": "dev"
      },
      "type": "CONCEALED",
      "label": "ANOTHER_API_KEY",
      "value": "SOME_OTHER_KEY",
      "reference": "op://dev/main/dev/ANOTHER_API_KEY"
    }
  ]
}

Note que o 1Password sempre retornará o campo notesPlain, já que ele é nativo e não pode sequer ser removido.

O próximo passo é usar essa lista e convertê-la em um formato que seu terminal entenda. Eu vou usar o jq para essa tarefa.

$ op item get main --vault dev --format json | jq -r '.fields | map(select(has("value"))) | map("export " + .label + "=\"" + .value + "\"") | join("\n")'
export SOME_API_KEY="SOME_KEY"
export ANOTHER_API_KEY="SOME_OTHER_KEY"

Você pode usar o eval com a saída acima, ou pode mandar a saída para um arquivo que pode ser carregado pelo seu terminal. Eu vou usar a segunda opção, mas antes vamos fazer uma limpa e criar um script executável. Vou chamar esse script de op-env.

#!/usr/bin/env bash

set -e

op item get main --vault dev --format json | jq -r '.fields | map(select(has("value"))) | map("export " + .label + "=\"" + .value + "\"") | join("\n")'

Torne esse script executável com o comando chmod +x op-env. Você poderá ver os exports na tela se rodar o comando op-env.

$ op-env
export SOME_API_KEY="SOME_KEY"
export ANOTHER_API_KEY="SOME_OTHER_KEY"

Agora basta adicionar as linhas seguintes ao seu perfil de terminal. Se você usa ZSH, pode usar o arquivo ~/.zshrc. No Bash você pode usar o arquivo ~/.bashrc.

if [ ! -f ~/.op-env ]; then
  op run -- true
  op-env > ~/.op-env
  chmod 600 ~/.op-env
fi

source ~/.op-env

O código acima irá criar um arquivo chamado ~/.op-env a menos que um já exista, permitindo que os segredos fiquem em cache até que este arquivo seja removido ou que você faça a atualização com o comando op-env > ~/.op-env. Essa etapa é necessária porque o 1Password pede autorização primeira chamada do comando op em uma seção de terminal, ou seja, se você abrir uma nova aba, terá que reautorizar o acesso do comando op. Ao fazer cache dos resultados, você precisar fazer isso apenas de vez em quando.

Finalizando

É isso! O 1password-cli permite remover todos os segredos do seu perfil de terminal, sem falar que faz o compartilhamento de segredos uma tarefa muito mais fácil.

E por falar em 1password-cli, aproveite para dar uma olhada no suporte de arquivos .env, que permite o compartilhamento de segredos entre as pessoas do seu time.

Como você lida com este problema? Você usa alguma outra técnica para isso? Compartilhe sua solução nos comentários abaixo.

A ideia é fazer algo estilo Flickr/Instagram, com um monte de funcionalidades. O projeto tem o nome de Photomatic e o código-fonte está disponível integralmente no Github.

O projeto é ambicioso e se tudo der certo (i.e. eu não perder o gás), muita coisa vai acontecer, como você pode ver no mindmap abaixo:

Até agora fiz quatro sessões com um total de mais de 12h de live coding, cobrindo o setup do projeto com Ruby on Rails 7, a configuração do frontend e implementação do login por email. A ideia é fazer uma sessão semanal, mas vamos como fica no futuro.

Para ver os vídeos anteriores, acesse a playlist com todos os vídeos dessa série. Se quiser acompanhar os próximos streams ao vivo, , se inscreve no canal em https://youtube.com/fnando ou me segue no Twitter.

É muito comum ver pessoas tentando configurar HTTPS em modo de desenvolvimento. Se você desenvolve a bastante tempo, já deve ter tentado fazer isso com certificados auto-assinados, comprando seu próprio certificado e mexendo em seu arquivo de hosts ou usando ferramentas como puma-dev. Enquanto essas soluções funcionam até um certo nível, Let’s Encrypt mudou o jogo, pelo menos para mim.

Com Let’s Encrypt e um provedor de DNS como AWS Route 53, você poderá usar HTTPS com subdomínios sem ter que mexer no arquivo /etc/hosts toda vez que precisar de um novo host, nem ter que instalar ferramentas que criam um DNS resolver.

Eu vou focar no macOS, que é o meu ambiente de desenvolvimento, mas você pode seguir as mesmas instruções para outros sistemas. Lembre-se apenas de instalar as dependências de software de acordo com o seu ambiente.

Configurando AWS Route 53

No dashboard da AWS, escolha “Route 53”, listado em “Networking & Content Delivery”. Você também pode digitar “route 53” no campo de busca. Isso irá te levar para o dashboard do AWS Route 53.

Na barra lateral, clique em “Hosted Zones”.

Você vai precisar de um domínio, então aqui vão algumas opções:

1. Use um domínio que você já tem mas que não está sendo usado (e.g. fnando.com).
2. Use um subdomínio em um domínio que já existe e está sendo usado (e.g. dev.fnando.com).
3. Compre um novo domínio, talvez .dev, que diz exatamente para o que você está usando (e.g. fnando.dev).

Eu decidi comprar outro domínio e fui com a opção 3. O domínio é menor, especialmente quando você está usando subdomínios (acme.dev.fnando.com vs acme.fnando.dev). Sem dizer que é muito mais legal! 🤓

Depois que você criar a hosted zone, você precisa configurar o seu domínio e apontar seu DNS para o AWS Route 53. Os hosts que você precisará estão no registro de tipo NS. Vá ao seu provider de domínio e configure-o com esses hosts. Eu uso Namecheap, e é assim que você faz lá:

De volta ao AWS Route 53, crie dois registros do tipo A, apontando para seu ambiente de desenvolvimento, nesse caso o endereço 127.0.0.1.

O primeiro registro é fnando.dev. Clique em “Create Record Set”, escolha “A - IPv4 address” como tipo de registro e defina 127.0.0.1 como o valor do registro. Certifique-se de não digitar nada no nome; caso contrário, você estaria apontando um subdomínio.

O segundo registro cuidará dos subdomínios. Clique em “Create Record Set” outra vez, escolha “A - IPv4 address”, mas desta vez use * como o nome do registro. Você valor deve ser 127.0.0.1, assim como fizemos anteriormente.

Agora temos que esperar o domínio ser propagado, mas isso não deve demorar muito. Você pode verificar se já foi propagado com comando dig, como no exemplo abaixo.

$ dig +short fnando.dev A
127.0.0.1

$ dig +short '*.fnando.dev' A
127.0.0.1

Enquanto você espera, é hora de configurar uma credencial da AWS restrita para esse domínio. Antes de continuar, olhe para a url do seu navegador: você vai precisa do id da hosted zone, então guarde esse id em algum lugar.

Nós vamos precisar de um novo usuário e uma política de acesso. Isso pode ser feito em AWS IAM, então procure por esta opção no menu “Services”.

Na barra lateral, clique em “Policies”, e então “Create Policy”.

Use o JSON abaixo como sua política de acesso. Lembre-se de mudar YOUR_ZONE_ID para a zone id que você guardou anteriormente.

{
  "Version": "2012-10-17",
  "Id": "letsencrypt-mac policy",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": ["route53:ListHostedZones", "route53:GetChange"],
      "Resource": ["*"]
    },
    {
      "Effect": "Allow",
      "Action": ["route53:ChangeResourceRecordSets"],
      "Resource": ["arn:aws:route53:::hostedzone/YOUR_ZONE_ID"]
    }
  ]
}

Clique em “Review policy”. Dê um nome e clique em “Create policy”.

Agora é hora de criar um novo usuário. Na barra lateral, clique em “Users”, e então “Add User”. Dê um nome como letsencrypt-mac ou algo que descreva sua máquina de desenvolvimento. Selecione a opção “Programmatic Access” em “Access type”.

Clique em “Next”. Agora, você precisa selecionar a política de acesso que criamos anteriormente; clique em “Attach existing policies directly” e procure pela política, nesse caso letsencrypt-mac.

Clique em “Next: Tags”, e então “Next: Review”. Finalmente, clique em “Create User”.

Esse passo é extremamente importante: aqui são listadas as chaves de acesso que esse usuário deverá usar, então guarde-as em algum lugar seguro, como seu gerenciador de senhas.

No que diz respeito à AWS, você configurou tudo o que precisava. Agora é hora de configurar o certbot, a command-line que permite interagir com o Let’s Encrypt.

Configurando certbot

No macOS, eu uso homebrew para gerenciar pacotes. Para instalar o certbot, execute o comando brew install certbot. Você pode encontrar instruções para outros sistemas no site do certbot.

$ brew install certbot
==> Downloading https://homebrew.bintray.com/bottles/certbot-1.4.0.catalina.bottle.tar.gz
Already downloaded: /Users/fnando/Library/Caches/Homebrew/downloads/f25750b88db0e526ac7fce38587eade58ef847892744acd31091a7d8fa4cdda4--certbot-1.4.0.catalina.bottle.tar.gz
==> Pouring certbot-1.4.0.catalina.bottle.tar.gz
🍺  /usr/local/Cellar/certbot/1.4.0: 1,451 files, 12.5MB

Parar gerar certificados que são validados automaticamente pelo certbot usando o DNS da AWS Route 53, precisamos de um plugin chamado certbot-dns-route53, que pode ser instalado com o pip do Python.

$ pip3 install certbot-dns-route53
...
Installing collected packages: setuptools, zope.interface, pycparser, cffi, six, cryptography, PyOpenSSL, josepy, pytz, pyrfc3339, urllib3, certifi, chardet, idna, requests, requests-toolbelt, acme, docutils, python-dateutil, jmespath, botocore, s3transfer, boto3, parsedatetime, configobj, ConfigArgParse, distro, zope.deprecation, zope.event, zope.hookable, zope.proxy, zope.deferredimport, zope.component, certbot, certbot-dns-route53
Successfully installed ConfigArgParse-1.2.3 PyOpenSSL-19.1.0 acme-1.4.0 boto3-1.13.16 botocore-1.16.16 certbot-1.4.0 certbot-dns-route53-1.4.0 certifi-2020.4.5.1 cffi-1.14.0 chardet-3.0.4 configobj-5.0.6 cryptography-2.9.2 distro-1.5.0 docutils-0.15.2 idna-2.9 jmespath-0.10.0 josepy-1.3.0 parsedatetime-2.5 pycparser-2.20 pyrfc3339-1.1 python-dateutil-2.8.1 pytz-2020.1 requests-2.23.0 requests-toolbelt-0.9.1 s3transfer-0.3.3 setuptools-46.4.0 six-1.15.0 urllib3-1.25.9 zope.component-4.6.1 zope.deferredimport-4.3.1 zope.deprecation-4.4.0 zope.event-4.4 zope.hookable-5.0.1 zope.interface-5.1.0 zope.proxy-4.3.5

Para saber se o certbot pode ver o plugin, execute o comando certbot plugins.

$ certbot plugins

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* dns-route53
Description: Obtain certificates using a DNS TXT record (if you are using AWS
Route53 for DNS).
Interfaces: IAuthenticator, IPlugin
Entry point: dns-route53 =
certbot_dns_route53._internal.dns_route53:Authenticator

* standalone
Description: Spin up a temporary webserver
Interfaces: IAuthenticator, IPlugin
Entry point: standalone = certbot._internal.plugins.standalone:Authenticator

* webroot
Description: Place files in webroot directory
Interfaces: IAuthenticator, IPlugin
Entry point: webroot = certbot._internal.plugins.webroot:Authenticator
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Agora chegou a hora de gerar os certificados. A primeira coisa a saber é que você vai precisar exportar as credenciais da AWS como as variáveis de ambiente AWS_ACCESS_KEY_ID e AWS_SECRET_ACCESS_KEY. Você decide como quer gerenciar essas variáveis, mas eu gosto de adicioná-las ao arquivo ~/.zsh/user.sh, que é carregado pelo arquivo ~/.zshrc. Para o propósito deste artigo, vou exportar essas variáveis antes de usuá-las.

$ export AWS_ACCESS_KEY_ID=AKIAY7V6RRKVYA3Z4MGA
$ export AWS_SECRET_ACCESS_KEY='REDACTED_SECRET'

Para gerar certificados, você vai precisar usar o comando certbot certonly. Note que estamos definindo diretórios locais; isso permite que você execute o comando se precisar de sudo. Depois que o processo estiver concluído, o certificado será salvo em ~/local/letsencrypt/live/fnando.dev. Se você tem dúvidas se configurou tudo corretamente, use a opção --dry-run; isso executará o certbot em seu ambiente de staging, que tem um limite mais para as falhas. Em produção, você terá o acesso bloqueado por uma hora depois de um certo número de tentativas.

certbot certonly \
-n \
--agree-tos \
--email user@example.com \
-d fnando.dev \
-d '*.fnando.dev' \
--dns-route53 \
--preferred-challenges=dns \
--logs-dir /tmp/letsencrypt \
--config-dir ~/local/letsencrypt \
--work-dir /tmp/letsencrypt

Quando a execução terminar, você verá algo como isso:

Saving debug log to /tmp/letsencrypt/letsencrypt.log
Found credentials in environment variables.
Plugins selected: Authenticator dns-route53, Installer None
Obtaining a new certificate
Performing the following challenges:
dns-01 challenge for fnando.dev
dns-01 challenge for fnando.dev
Waiting for verification...
Cleaning up challenges
Non-standard path(s), might not work with crontab installed by your operating system package manager

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /Users/fnando/local/letsencrypt/live/fnando.dev/fullchain.pem
   Your key file has been saved at:
   /Users/fnando/local/letsencrypt/live/fnando.dev/privkey.pem
   Your cert will expire on 2020-08-23. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot
   again. To non-interactively renew *all* of your certificates, run
   "certbot renew"
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

Pronto! Seus certificados foram gerados. Quando o certificado estiver para expirar (os certificados tem validade de três meses), você receberá um email da Let’s Encrypt.

Para renovar o certificado, basta executar o mesmo comando acima (i.e. certbot certonly).

Configurando NGINX

No macOS, podemos instalar o NGINX usando homebrew. Basta executar o comando brew install nginx.

$ brew install nginx
==> Downloading https://homebrew.bintray.com/bottles/nginx-1.17.10.catalina.bottle.tar.gz
Already downloaded: /Users/fnando/Library/Caches/Homebrew/downloads/d7118d9cc53ef3be545ac049f7e50aa30f2378f673aa925702deaa6117fb403c--nginx-1.17.10.catalina.bottle.tar.gz
==> Pouring nginx-1.17.10.catalina.bottle.tar.gz
==> Caveats
Docroot is: /usr/local/var/www

The default port has been set in /usr/local/etc/nginx/nginx.conf to 8080 so that
nginx can run without sudo.

nginx will load all files in /usr/local/etc/nginx/servers/.

To have launchd start nginx now and restart at login:
  brew services start nginx
Or, if you don't want/need a background service you can just run:
  nginx
==> Summary
🍺  /usr/local/Cellar/nginx/1.17.10: 25 files, 2.1MB

Como desenvolvo aplicações web constantemente, eu gosto de iniciar o NGINX automaticamente. Para fazer isso, execute o comando sudo brew services start nginx, e o homebrew se encarregará de copiar o arquivo /Library/LaunchDaemons/homebrew.mxcl.nginx.plist.

$ sudo brew services start nginx
Warning: Taking root:admin ownership of some nginx paths:
  /usr/local/Cellar/nginx/1.17.10/bin
  /usr/local/Cellar/nginx/1.17.10/bin/nginx
  /usr/local/opt/nginx
  /usr/local/opt/nginx/bin
  /usr/local/var/homebrew/linked/nginx
This will require manual removal of these paths using `sudo rm` on
brew upgrade/reinstall/uninstall.
Warning: nginx must be run as non-root to start at user login!
==> Successfully started `nginx` (label: homebrew.mxcl.nginx)

É, eu sei… sudo. Mas só assim você poderá acessar https://fnando.dev sem ter que especificar uma porta. Outra alternativa é mudar a permissão do diretório /usr/local para o grupo admin, então você decide.

A configuração do NGINX deve ser adicionada no diretório /usr/local/etc/nginx/servers/. Eu gosto de usar o domínio apex (i.e. o domínio sem nenhum subdomínio) como nome do arquivo, então nesse caso seria /usr/local/etc/nginx/servers/fnando.dev.conf. Use o conteúdo abaixo.

upstream fnando_dev {
  server 127.0.0.1:3000 max_fails=0;
  server 127.0.0.1:4567 max_fails=0;
  server 127.0.0.1:5000 max_fails=0;
  server 127.0.0.1:5001 max_fails=0;
  server 127.0.0.1:9292 max_fails=0;
  server 127.0.0.1:9393 max_fails=0;
}

server {
  listen              80;
  listen              443 ssl;
  server_name         fnando.dev;

  ssl_certificate     /Users/fnando/local/letsencrypt/live/fnando.dev/fullchain.pem;
  ssl_certificate_key /Users/fnando/local/letsencrypt/live/fnando.dev/privkey.pem;

  ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers         HIGH:!aNULL:!MD5;

  location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://fnando_dev;
  }
}

server {
  listen              80;
  listen              443 ssl;
  server_name         *.fnando.dev;

  ssl_certificate     /Users/fnando/local/letsencrypt/live/fnando.dev/fullchain.pem;
  ssl_certificate_key /Users/fnando/local/letsencrypt/live/fnando.dev/privkey.pem;

  ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers         HIGH:!aNULL:!MD5;

  location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://fnando_dev;
  }
}

Note que você não pode usar ~ para indicar o diretório home, então use o caminho completo. Outra coisa que você precisa fazer é especificar as portas que as aplicações web podem rodar no bloco upstream, então adicione a porta dos frameworks que você usa ali.

Agora, reinicie o NGINX com o comando sudo brew services restart nginx.

$ brew services restart nginx
Stopping `nginx`... (might take a while)
==> Successfully stopped `nginx` (label: homebrew.mxcl.nginx)
==> Successfully started `nginx` (label: homebrew.mxcl.nginx)

Se tudo deu certo, você já pode acessar sua aplicação web usando um domínio com HTTPS, como https://fnando.dev. Para testar, inicie sua aplicação e visite essa url.

Como você pode ver, esse é um certificado 100% válido.

E subdomínios funcionam sem problema algum, e sem precisar que você mexa no seu arquivo /etc/hosts. 😎

Finalizando

Você pode estar se perguntando por que desenvolver usando HTTPS, e a resposta é simples: muitas coisas exigem HTTPS, como webauthn. Você pode ver uma lista completa de todas as funcionalidades que existem contexto seguro no site da Mozilla.

Eu já testei diversas combinações para fazer HTTPS funcionar em ambiente de desenvolvimento, mas essa é de longe a melhor opção. Nenhum hack, nada de adicionar certificados raíz na máquina. Obrigado, Let’s Encrypt.

Existem benefícios em se usar dark mode?

Quando você começa a ler sobre dark mode, logo encontra frases como “é melhor para os olhos” ou “mais eficiente no consumo de energia”. A verdade é que para que sua bateria se beneficie de dark mode, é preciso que você tenha telas OLED/AMOLED, que só estão disponíveis em aparelhos novos mais caros.

• iPhone X ou mais novo.
• Samsung Galaxy S10 ou mais novo.
• Google Pixel 3 ou mais novo.
• Huawei P30huawei-p30 ou mais novo.

Se você usa LCD ou outro tipo de tela, mudar as cores não irá estender o tempo de uso de sua bateria. Isso significa que a maior parte das pessoas não irá se beneficiar desse aspecto do dark mode.

Mas e quanto a benefícios à saúde? Com certeza é melhor, certo? Não é bem assim. Infelizmente não temos muitos estudos científicos sobre o assunto para dizermos com precisão que o dark mode é melhor. O que sabemos é que o tempo que passamos olhando para telas é o fator mais importante para o cansaço dos olhos. Quanto menos você ficar olhando sua tela melhor.

Alguns médicos também mencionam que mais contraste (seja tema claro, seja escuro) é mais importante que mudar o tema. E alguns médicos inclusive mencionam que dark mode pode ser mais prejudicial para pessoas com astigmatismo.

Eu não gosto muito de temas escuros com textos muito claros (i.e. fundo preto com texto branco); meus olhos ficam com aquela sensação de imagem fixa que demora um tempo até sumir. E o oposto também é verdade para algumas pessoas. O fato é que sem pesquisas sérias sobre o assunto tudo o que podemos fazer é falar sobre nossas experiências pessoais.

Agora, eu realmente acredito que a maior vantagem de dark mode é quando você está usando seu telefone em um quarto com pouca iluminação, mas você não deveria estar usando seu telefone antes de dormir de qualquer modo, certo?

Suporte dos navegadores

Qual o suporte dos navegadores para dark mode? Para detectar se um navegador tem suporte a dark mode ou não, você precisará da media query (prefers-color-scheme: dark), disponível nos seguintes navegadores:

• macOS Safari 13 ou mais recente.
• iOS Safari 13.2 ou mais recente.
• Android Browser 76 ou mais recente.
• Chrome for Android 78 ou mais recente.
• Firefox for Android 68 ou mais recente.
• Opera 62 ou mais recente.
• Chrome 76 ou mais recente.
• Firefox 67 ou mais recente.
• Microsoft Edge 76 ou mais recente.

Pois é… o versionamento de navegadores se tornou estúpido, e eu não deveria nem ter listado aqui de qualquer modo. Enfim, o que você precisa saber é que o Safari 13 é muito, muito novo, assim como o suporte para esse tipo de media query em todos os outros navegadores. Do ponto de vista de negócios, não faz muito sentido adicionar suporte para dark mode, mas você vai fazer isso de qualquer modo que eu sei. Então, aqui vai… é assim que você define seu CSS:

body {
  color: #333;
  background: #fff;
}

@media screen and (prefers-color-scheme: dark) {
  body {
    background: #2d3239;
    color: #75715e;
  }

  h1 {
    color: #e9d970;
  }
}

Você pode alternar entre um modo e outro no Web Inspector do Safari. Eu acho que o Chrome ainda não tem nada parecido, mas não deve demorar muito para lançarem algo similar. Veja este exemplo aqui.

Eu sei o que você pensando. O CSS pode sair de controle rapidinho, e concordo totalmente! A menos que você use variáveis. Mais especificamente, variáveis de CSS.

Criando temas com variáveis de CSS

O truque para manter o CSS sobre controle é usar variáveis. Para fazer isso, você precisa usar o formato --variable-name: value.

:root {
  --page-background: #fff;
}

body {
  background: var(--page-background);
}

É simples assim. Agora, como definir variáveis para os temas claro e escuro? Primeiro, você precisa declarar todas as variáveis que serão usadas sem nenhuma media query.

:root {
  --page-background: #fff;
  --page-title: #333;
  --page-text: #333;
}

body {
  background: var(--page-background);
  color: var(--page-text);
}

h1 {
  color: var(--page-title);
}

Depois, você pode adicionar as mesmas variávies usando a media query que casa dark mode. O CSS ficará parecido com isso:

:root {
  --page-background: #fff;
  --page-title: #333;
  --page-text: #333;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --page-background: #2d3239;
    --page-title: #e9d970;
    --page-text: #75715e;
  }
}

body {
  background: var(--page-background);
  color: var(--page-text);
}

h1 {
  color: var(--page-title);
}

Você pode ver este exemplo aqui. Você pode definir qualquer propriedade do seu tema incluindo imagens de fundo, bordas, sombras e filtros.

Dark mode em imagens e vídeos

Não é incomum termos imagens/vídeos com bastante brilho por toda a página. Um truque que pode ajudar a reduzir a luminosidade de imagens e vídeos é usar filtros; você pode tentar uma combinação de opacity e grayscale. Adicione as variáveis --image-grayscale e --image-opacity e modifique até atingir algo que funcione para sua página.

:root {
  --page-background: #fff;
  --page-title: #333;
  --page-text: #333;
  --image-grayscale: 0;
  --image-opacity: 100%;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --page-background: #2d3239;
    --page-title: #e9d970;
    --page-text: #75715e;
    --image-grayscale: 50%;
    --image-opacity: 60%;
  }
}

img,
video {
  filter: grayscale(var(--image-grayscale)) opacity(var(--image-opacity));
}

Você pode ver este exemplo aqui. Este truque pode não funcionar em todos os lugares e pode precisar de um elemento englobando as imagens e/ou vídeos. Eventualmente você precisará renderizar uma imagem completamente diferente. É aí que entra o elemento <picture>.

O elemento <picture> tem suporte a media queries. Se você quer renderizar uma imagem diferente para dark mode, use um <source> diferente que tem media="(prefers-color-scheme: dark)". Se o navegador não tiver suporte para dark mode, ou se o usuário estiver usando um tema claro, então a imagem que será renderizada será a padrão.

<picture>
  <source srcset="beach.jpg" media="(prefers-color-scheme: dark)" />
  <img src="pool.jpg" />
</picture>

Agora, o CSS não precisa mais de nenhum código relacionado a filtros, mas deixo isso como exercício para você. O resultado final pode ser visto aqui.

Em alguns casos, usar uma imagem SVG direto na página fará mais sentido. Basta mudar as cores com CSS e pronto! Essa técnica funciona muito bem para ícones, logos e coisas semelhantes. É importante mencionar que para poder estilizar elementos contidos em <svg> é preciso renderizar o SVG diretamente na página. Usar a tag <img> não irá funcionar. Dito isso, nosso código para SVG pode ser algo assim:

<svg
  id="logo"
  width="250px"
  height="55px"
  viewBox="0 0 250 55"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="logo">
      <path d="..." id="background" fill="#0091FF"></path>
      <path d="..." id="letter" fill="#FFD700" fill-rule="nonzero"></path>
      <path d="..." id="words" fill="#45638B" fill-rule="nonzero"></path>
    </g>
  </g>
</svg>

As cores aplicadas no arquivo SVG são referentes ao tema padrão. Por isso, teremos que sobrescrever todas as cores para que funcionem em dark mode. Logo, esta tarefa será extremamente entediante se você tiver um SVG muito complexo.

@media screen and (prefers-color-scheme: dark) {
  :root {
    --page-background: #2d3239;
    --page-title: #e9d970;
    --page-text: #75715e;

    --logo-background: #4d5866;
    --logo-words: #fff;
  }

  #logo--words {
    fill: var(--logo-words);
  }

  #logo--background {
    fill: var(--logo-background);
  }
}

Veja este exemplo aqui.

Alternativamente, você pode usar currentColor como o valor das propriedades fill e stroke. Assim, só será preciso mudar a propriedade color do elemento SVG ou de um de seus elementos-pai. Essa abordagem funciona extremamente bem com ícones de linha.

O exemplo acima gera uma nova cor toda vez que o botão é clicado, definindo a propriedade color do elemento <body>. Isso é feito com document.body.style.color = newColor.

Detectando dark mode com JavaScript

Você pode precisar detectar dark mode com JavaScript para atualizar gráficos, por exemplo. Para isso será necessário usar window.matchMedia. A detecção é bastante simples.

function isDarkMode() {
  return (
    window.matchMedia &&
    window.matchMedia("(prefers-color-scheme: dark)").matches
  );
}

function renderCanvas() {
  const theme = isDarkMode()
    ? { background: "#4d5866", border: "#7091ba" }
    : { background: "#ffffff", border: "#000" };

  const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");
  const x = 15;
  const y = 15;
  const width = canvas.width - x * 2;
  const height = canvas.height - y * 2;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 5;
  ctx.strokeStyle = theme.border;
  ctx.strokeRect(x, y, width, height);
  ctx.fillStyle = theme.background;
  ctx.fillRect(x, y, width, height);
}

renderCanvas();

Como você pode ver, basta definir o tema do código JavaScript condicionalmente quando você detectar o uso de dark mode. Este exemplo pode ser visto aqui.

Se você alternar entre um modo e outro (o seu computador pode estar configurado parar alternar entre os modos automaticamente), as cores do código renderizado pelo JavaScript ficariam erradas. Você pode usar MediaQueryList.addListener para detectar a mudança de temas e iniciar uma nova renderização do gráfico.

const darkModeMatcher =
  window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");

function isDarkMode() {
  return darkModeMatcher && darkModeMatcher.matches;
}

function onDarkModeChange(callback) {
  if (!darkModeMatcher) {
    return;
  }

  darkModeMatcher.addListener(({ matches }) => callback(matches));
}

function renderCanvas(useDarkTheme) {
  const theme = useDarkTheme
    ? { background: "#4d5866", border: "#7091ba" }
    : { background: "#ffffff", border: "#000" };

  const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");
  const x = 15;
  const y = 15;
  const width = canvas.width - x * 2;
  const height = canvas.height - y * 2;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 5;
  ctx.strokeStyle = theme.border;
  ctx.strokeRect(x, y, width, height);
  ctx.fillStyle = theme.background;
  ctx.fillRect(x, y, width, height);
}

renderCanvas(isDarkMode());
onDarkModeChange(renderCanvas);

Esse código irá garantir que a função renderCanvas seja executada toda vez que o tema mudar. Você pode ver este exemplo aqui.

E com isso você tem praticamente todas as informações para implementar dark mode em conteúdos web.

Finalizando

Dark mode é a mais nova moda no mundo da tecnologia. E mesmo sem nenhum estudo sério comprovando os chamados “benefícios do dark mode”, você pode considerar implementar apenas pela felicidade de seus clientes. Os aspectos técnicos são bastante simples, mas não se engane: criar temas escuros é um processo desafiador, especialmente quando você precisa levar em consideração a direção de arte de todo o site, incluindo imagens e vídeos.

Outra coisa a se considerar é se você deve mudar o tema automaticamente ou se deve adicionar uma opção para que os usuários escolham o tema de preferência. Essa última opção também é simples de ser implementada se você adicionar uma classe ou atributo data em um elemento (e.g. <html data-theme="dark">), mas isto traz um problema que é ter que alternar imagens e vídeos manualmente quando existe a mudança de um tema para o outro. Ou isso, ou apenas ignore a mudança do tema, o que provalmente funcionará para a maioria dos casos.

React Native é a plataforma de escolha para quem conhece React e precisa desenvolver aplicativos mobile. Em vez de usar uma abordagem híbrida como muitos projetos por aí, React Native tem como objetivo criar apps nativos com ferraments que já usamos para desenvolvimento web.

Em grande parte, essa abordagem funciona perfeitamente, especialmente se você faz parte de um time pequeno e não tem todos os recursos necessários para desenvolver código nativo para dispositivos Apple e Android. No entanto, é preciso estar ciente dos prós e contras, assim como qualquer decisão que você precisa tomar. Felizmente, o Airbnb public um artigo muito legal que cobre esse assunto, então dê uma lida.

E depois de fazer sua pesquisa, você decidiu que React Native cobre suas necessidades. E agora? Neste artigo irei mostrar como configurar apps feitos com React Native para rodar em simuladores de iOS e Android, assim como aparelhos físicos.

Instalando Xcode

Você precisará de um Mac para usar o simulador de iOS. Você pode usar serviços como Appetize (que eu não testei) para isso, mas já que o meu ambiente de desenvolvimento é o Mac, irei focar nele.

Muitas pessoas desenvolvem aplicações web e instalam apenas o command-line tools sem o Xcode para poder compilar extensões e usar o homebrew. No entanto, você precisa do Xcode completo para rodar o simulador, então certifique-se de instalá-lo através da App Store.

A instalação do Xcode vai levar um tempo. Quando terminar, abra o Xcode e instale os componentes extras.

Agora você precisa instalar os simuladores de iOS. Vá em “Preferences > Components” e baixe todos os simuladores que você precisar. Eu normalmente instalado apenas a versão mais recente, mas isso vai depender do suporte oficial que você quer dar aos apps.

É isso! Agora vamos ver como instalar o simulador de Android.

Instalando o Android Studio

O ecossistema de Android é diferente do da Apple. Primeiro, é possível instalar diversos simuladores desenvolvidos por terceiros, com alternativas pagas inclusive. Se você não quer ter que escolher, sugiro que use o Android Studio, a IDE oficial para desenvolvimento de apps para Android.

Depois de fazer o download do Android Studio, move o app para o seu diretório /Applications.

Agora, abra o Android Studio e siga as instruções. Se você não instalou o Android SDK, você verá uma tela como esta:

Click em “Next” e o Android Studio irá instalar o SDK para você.

Assim que a instalação terminar, você a tela de boas-vindas.

Vá em “Configure > SDK Manager”, e então “SDK Tools”. Clique no checkbox para selecionar o Build Tools, que serão usados pela command-line do React Native. Clique em “Apply” para iniciar a instalação.

Agora, note o diretório no qual foi instalado o Android SDK. Você vai precisar desse valor para definir uma variável de ambiente em seu terminal. Aqui as coisas podem complicar um pouco porque a sua configuração pode ser diferente da minha. De um modo geral, você terá um dos dois casos à seguir:

• Para bash, adicione as linhas abaixo ao arquivo ~/.bashrc.
• Para zsh, adicione as linhas abaixo ao arquivo ~/.zshrc.

export JAVA_HOME="/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home"
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH="$ANDROID_HOME/platform-tools:$ANDROID_HOME/emulator:$PATH"

Reinicie o seu terminal para recarregar suas configurações. Para verificar se tudo está funcionando corretamente, execute os comandos abaixo:

$ echo $JAVA_HOME
/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home

$ echo $ANDROID_HOME
/Users/fnando/Library/Android/sdk

$ which adb
/Users/fnando/Library/Android/sdk/platform-tools/adb

$ which emulator
/Users/fnando/Library/Android/sdk/emulator/emulator

Se você receber uma saída muito diferente desta, verifique se você adicionou as linhas de export nos arquivos corretos e se reiniciou o terminal.

Agora você pode finalmente criar um novo dispositivo virtual. De volta à tela de boas-vindas, vá em “Configure > AVD Manager”.

Clique em “Create Virtual Device” e escolha uma definição de dispositivo. Neste exemplo, estou escolhendo Pixel 3.

Quando você terminar, clique em “Next”. Na tela seguinte você precisará escolher qual versão de Android irá usar. Você pode usar a última disponível, que neste momento é Android Pie. Certifique-se de clicar no link “Download”.

Depois que o download do Android acabar, clique em “Next” mais uma vez. Você verá uma tela com o perfil do dispositivo que está criando. Clique em “Finish”.

Você voltará à lista de dispositivos virtual disponíveis no seu computador. É aí que você iniciará o dispositivo, além de poder criar outros se precisar.

Para iniciar o simulador de Android, clique no botão de play disponível na coluna “Actions”. Lembre-se sempre de fazer isso. Caso contrário, você verá uma mensagem como No connected devices! quando for rodar React Native no simulador de Android.

Você também pode iniciar o emulator através da linha de comando. Para isso, basta usar o comando emulator.

$ emulator -list-avds
Pixel_3_API_28

$ emulator -avd Pixel_3_API_28
emulator: INFO: boot completed
emulator: INFO: boot time 34488 ms
emulator: Increasing screen off timeout, logcat buffer size to 2M.

Parabéns! Se tudo deu certo, você acabou de configurar o Android Studio e seu simulador. Agora, vamos iniciar um novo app para ver se tudo está funcionando.

Configurando o React Native

A documentação oficial recomenda instalar o react-native-cli globalmente, mas eu evito fazer isso. Eu prefiro usar o npx para gerar o esqueleto de nosso app.

$ npx react-native-cli init sample
...

✨  Done in 5.90s.

  Run instructions for iOS:
    • cd /Users/fnando/Projects/sample && react-native run-ios
    - or -
    • Open ios/sample.xcodeproj in Xcode
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd /Users/fnando/Projects/sample && react-native run-android

Entre no diretório do projeto e execute react-native run-ios. Isso irea compilar o app, instalá-lo no simulador e iniciar uma nova aba como o Metro, o bundler de JavaScript do React Native que foi criado pelo Facebook.

$ react-native run-ios
...
info + exit 0

info

info ** BUILD SUCCEEDED **


info Installing build/sample/Build/Products/Debug-iphonesimulator/sample.app
info Launching org.reactjs.native.example.sample
org.reactjs.native.example.sample: 5043

Fique de olho na aba do Metro. É nela que você verá erros enquanto estiver desenvolvendo o app. Depois que toda a compilação inicial terminar, você deverá ver o app de exemplo rodando no simulador como na imagem abaixo.

Agora, e o simulador de Android? Certifique-se que o seu disposito virtual está rodando (lembre-se de fazer isso atráves da opção “Configure > AVD Manager” da tela de boas-vindas). Você pode verificar todos os dispositivos em execução com o comando adb devices.

$ adb devices
List of devices attached
emulator-5554 device

Para executar o app no simulador de Android, execute o comando react-native run-android. Essa etapa irá compilar um monte de coisas e, então, irá instalar e iniciar o app de exemplo.

$ react-native run-android
...

BUILD SUCCESSFUL in 14s
26 actionable tasks: 26 executed
info Running /Users/fnando/Library/Android/sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081
info Starting the app on emulator-5554 (/Users/fnando/Library/Android/sdk/platform-tools/adb -s emulator-5554 shell am start -n com.sample/com.sample.MainActivity)...
Starting: Intent { cmp=com.sample/.MainActivity }

Se tudo deu certo, o simulador será iniciado como na imagem abaixo.

Executando o app em dispositivos físicos

Em algum momento, você deve testar o app em dispositivos físicos, ou seja, o aparelho de verdade. Isso ajudará a corrigir problemas na experiência que podem não incomodar tanto em simuladores.

Executando o app no iPhone

Para executar o app no iPhone, abra o arquivo ios/sample.xcodeproj no Xcode. Você pode fazer isso através do terminal com o comando open ios/sample.xcodeproj.

Primeiro, você terá que criar um novo perfil de desenvolvimento. Clique no nome do projeto, depois no target (nesse caso sample). Mude o bundle identifier para seu próprio domínio, ou não considerá compilar o projeto. Clique no botão “Add Account”, informe sua conta da Apple e selecione o seu nome no dropdown. Você também precisará selecionar o seu perfil de desenvolvimento para o target sampleTests.

Conecte o seu iPhone ao computador e clique no seletor de simuladores.

O seu iphone será listado no começo da lista.

Finalmente, clique no botão “Build and Run”, ou pressione cmd-R. Essa etapa irá instalar e abrir o app em seu iPhone.

Executando o app no Android

Eu não tinha um Android antes de começar a desenvolver com React Native. Por isso, decidi comprar um aparelho para testes e, depois de ver diversos reviews, decidi comprar um Xiaomi Mi A2, que me custou por volta de $170 na Amazon. É um Android muito legal até mesmo para o uso diário, principalmente porque ele vem com o Android oficial, e não uma versão modificada que não presta.

Primeiro, você terá que ativar o Developer Options. Aqui a coisa pode complicar um pouco. No meu caso, eu tive que fazer isso em “Settings > About phone” e dar tap 7 vezes no Build Number para ativar o modo de desenvolvimento. Depois disso, vá em “Settings > System > Advanced > Developer Options” e ative “USB Debugging”.

Para verificar se o seu disposito pode ser visto pelo React Native, execute adb devices.

$ adb devices
List of devices attached
bbb5cc28  device

Finalmente, execute react-native run-android. Este comando irá instalar e abrir o app em seu Android.

Usando TypeScript

Essa é uma etapa opcional, mas usar TypeScript, a linguagem tipada da Microsoft que compila para JavaScript, pode ser uma boa opção se você pretende publicar o seu app como um projeto open-source.

Para novos projetos, basta que você use o gerador de apps com --template typescript.

$ npx react-native-cli init sample --template typescript
...
✨  Done in 4.96s.

  Run instructions for iOS:
    • cd /Users/fnando/Projects/sample_ts && react-native run-ios
    - or -
    • Open ios/sample_ts.xcodeproj in Xcode
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd /Users/fnando/Projects/sample_ts && react-native run-android

Para projetos existentes, você terá que configurar manualmente tudo o que o template de TypeScript fornece, além de ter que renomear arquivos para as extensões .ts e .tsx. Eu não vou mostrar como fazer isso, mas existe um artigo publicado no blog oficial que tem o passo-a-passo.

Finalizando

Apesar de todos os esforços em criar um bom ecossistema, o React Native ainda é um projeto imaturo e você verá que desenvolver apps para ele é bem desafiador. Mesmo com essas dificuldades, eu acredito que o React Native é uma excelente alternativa para times e empresas pequenos que precisam desenvolver apps nativos.

Antes de apostar em React Native, pergunte-se se um PWA pode ser uma alternativa viável. Infelizmente, PWA vem com seus próprios desafios, como uma nova forma de instalar apps e inconsistências no suporte entre Android e iOS, assim como diversas limitações do dispositivo. Mesmo assim, pode ser um bom primeiro passo para se criar mobile apps quando responsive web não é suficiente, mas React Native é muito complicado.

Neste artigo iremos ver quais são as mudanças mais interessantes que esta nova versão introduz. Para ver uma lista completa de todas as mudanças, acesse a lista de mudanças.

Frozen strings

Até o Ruby 2.2, as strings são mutáveis, ou seja, dada uma string, você pode alterar seu valor sem precisar instanciar um novo objeto.

language = "Ruby"
#=> "Ruby"

language.upcase!
#=> "RUBY"

language
#=> "RUBY"

Para que isso aconteça, o Ruby tem que instanciar um novo objeto toda vez que você define uma string, mesmo que ela já tenha sido criada anteriormente.

"Ruby".object_id
#=> 70168324162560

"Ruby".object_id
#=> 70168315321340

Perceba como os identificadores acima são diferentes. Isso acontece sempre que você definir uma nova string. Em alguns casos, você pode usar uma string imutável, que irá reutilizar este objeto. Quando você precisa de alguma otimização extra, definir uma constante e torná-la imutável irá ajudar:

class Greeting
  DEFAULT_GREETING = "Hello there!".freeze
end

Em alguma situações, você pode ter um ganho de performance¹ se reutilizar o mesmo objeto. O exemplo abaixo mostra a quantidade de objetos alocados em um loop.

strings = []

before_count = GC.stat[:total_allocated_objects]

10_000.times { strings << "Ruby" }

GC.stat[:total_allocated_objects] - before_count
#=> 10001

Como você pode ver, foram alocados 10001 objetos neste loop. Com uma simples mudança, o números de objetos alocados poderia cair para 1.

strings = []

before_count = GC.stat[:total_allocated_objects]

10_000.times { strings << "Ruby".freeze }

GC.stat[:total_allocated_objects] - before_count
#=> 1

Muitas bibliotecas utilizam deste artifício para diminuir a quantidade de objetos alocados. Veja, por exemplo, como o Rack faz:

# rack-1.6.4/lib/rack.rb
module Rack
  # ...

  PATH_INFO      = 'PATH_INFO'.freeze
  REQUEST_METHOD = 'REQUEST_METHOD'.freeze
  SCRIPT_NAME    = 'SCRIPT_NAME'.freeze
  QUERY_STRING   = 'QUERY_STRING'.freeze
  CACHE_CONTROL  = 'Cache-Control'.freeze
  CONTENT_LENGTH = 'Content-Length'.freeze
  CONTENT_TYPE   = 'Content-Type'.freeze

  GET  = 'GET'.freeze
  HEAD = 'HEAD'.freeze

  # ...
end

Posteriormente, essas constantes são utilizadas por todo o código, para evitar a alocação de strings que vão servir apenas para acessar hashes. Veja um benchmark simples mostrando a diferença entre strings mutáveis e imutáveis.

require "benchmark/ips"

GC.disable

CYCLES = 10_000_000

Benchmark.ips do |x|
  x.report("immutable") {CYCLES.times{ "Ruby".freeze }}
  x.report("mutable") {CYCLES.times{ "Ruby" }}
  x.compare!
end

# Calculating -------------------------------------
#              mutable     1.000  i/100ms
#            immutable     1.000  i/100ms
# -------------------------------------------------
#              mutable      0.828  (±120.7%) i/s -      3.000  in   6.152329s
#            immutable      1.926  (± 0.0%) i/s  -     10.000 
# 
# Comparison:
#            immutable:        1.9 i/s
#              mutable:        0.8 i/s - 2.33x slower

No Ruby 2.3.0-preview2, strings mutáveis foram ~2x mais lentas que strings imutáveis. No ruby-2.2.3 essa diferença é ainda maior, chegando a ser 4x mais lentas.

Além disso, as alocações de objetos necessárias pelas strings mutáveis precisam sem removidas pelo Garbage Collector com mais frequência, como no exemplo do loop. Veja:

GC.start
1_000_000.times { "a" }
GC.stat[:count]
#=> 48

Se formos usar apenas strings imutáveis, a quantidade de vezes que o Garbage Collector precisará executar é bem menor:

GC.start
1_000_000.times { "a".freeze }
GC.stat[:count]
#=> 5

Pensando nisso, o Ruby trouxe suporte para strings imutáveis definidas no escopo de execução. Atualmente é possível ativar essa opção de modos diferentes; a maneira mais simples é usar o novo flag do interpretador, --enable-frozen-string-literal².

$ ruby --enable-frozen-string-literal -e 'puts "Ruby".frozen?'
true

Você também pode ativar esta opção com um magic comment por arquivo; isso significa que todas as strings definidas naquele arquivo serão imutáveis.

# frozen_string_literal: true

"Ruby".frozen?
#=> true

Para facilitar a conversão de strings, foram adicionados os métodos String#+@ e String#-@.

(+"Ruby").frozen?
#=> false

(-"Ruby").frozen?
#=> true

O método String#+@ é particularmente útil para os casos onde você tem strings imutáveis por padrão e precisa modificar uma string, pois ele é 2x mais rápido que String#dup.

# frozen_string_literal: true

name = "John"
message = +"Hello there, " << name << "!"
#=> Hello there, John!

Existe a possibilidade de strings imutáveis serem o padrão no Ruby 3.0, sem a necessidade de se configurar nada. Por isso, se você usa e abusa de mutabilidade de strings, está na hora de repensar sua estratégia.

Tickets: #8976, #11725, #11782.

Safe navigation operator

Um novo operador foi adicionado ao Ruby. Trata-se do Safe navigation operator, também conhecido como lonely operator. Ele funciona de forma semelhante ao método Object#try, utilizado principalmente em aplicações Ruby on Rails. Com ele você pode encadear chamadas sem a necessidade de verificar se o objeto tem um valor nulo.

name = nil

# ruby-2.3.0+
name&.upcase
#=> nil

# ActiveSupport
name.try(:upcase)
#=> nil

A maior diferença entre o lonely operator e a implementação adicionada pelo método Object#try é que a versão nativa fará lazy evaluation, executando expressões apenas quando o objeto é um valor diferente de nil.

def run
  puts "=> Executed!"
end

nil&.call(run)
#=> nil

Com o ActiveSupport, o método run seria sempre executado.

def run
  puts "=> Executed!"
end

nil.try(run)
#=> Executed!
#=> nil

Outra diferença importante é que a atribuições também são possíveis com o lonely operator.

class Counter
  attr_accessor :count

  def initialize
    @count = 0
  end
end

counter = Counter.new
counter&.count += 1
#=> 1

Finalmente, vale deixar claro que a implementação do lonely operator é mais parecida com a de Object#try!, que lançará uma exceção NoMethodError caso o método não exista no objeto-alvo quando este é um valor não-nulo.

num = 0
#=> 0

num&.upcase
#=> NoMethodError: undefined method `upcase' for 0:Fixnum

Ticket: #11537

Acessando estruturas encadeadas

Você provavelmente já precisou acessar objetos em uma estrutura encadeada, onde seu acesso parecia muito verboso. E uma preocupação muito comum é garantir que os objetos-pai existam, para evitar que exceções como NoMethodError: undefined method [] for nil:NilClass sejam lançadas. Com os métodos Array#dig e Hash#dig sua vida se tornou muito mais simples, sem a necessidade de usar uma biblioteca externa.

hash = {a: {b: {c: "hello"}}}

hash.dig(:a, :b, :c)
#=> "hello"

hash.dig(:d, :e, :f)
#=> nil

array = [[["hello"]]]

array.dig(0, 0, 0)
#=> "hello"

array.dig(1, 1, 1)
#=> nil

O mais interessante é que você pode, obviamente, usar isso para navegar uma estrutura mais complexa composta por arrays e hashes, como aquelas retornas por APIs. Veja a diferença para pegar o nome do primeiro usuário da estrutura à seguir:

data = {users: [{name: "John Doe"}]}

# ruby-2.2
data[:users] && data[:users][0] && data[:users][0][:name]
#=> "John Doe"

# ruby-2.3
data.dig(:users, 0, :name)
#=> "John Doe"

Vale lembrar que outras classes também implementam o método dig, como Struct e OpenStruct.

Tickets: #11643 e #11688.

Hash#to_proc

A classe Hash agora implementa o método Hash#to_proc, extremamente útil para os casos onde você precisa pegar todos os valores dada uma lista de chaves.

hash = {a: 1, b: 2, c: 3}
wanted_keys = [:a, :c]

# ruby-2.2
wanted_keys.map {|key| hash[key] }
#=> [1, 3]

# ruby-2.3
wanted_keys.map(&hash)
#=> [1, 3]

Para entender como isso funciona, vamos ver como seria uma possível implementação de Hash#to_proc.

class Hash
  def to_proc(&block)
    proc {|key| self[key] }
  end
end

hash = {a: 1}
hash.to_proc.call(:a)
#=> 1

1. Toda vez que um objeto precisa ser convertido em Proc, o método to_proc é executado. Seria o equivalente a converter o objeto em bloco. Isso é feito implicitamente quando usamos array.map(&hash), por exemplo.
2. O método que recebe essa Proc irá, por sua vez, executá-la passando cada um dos itens do array como sendo o argumento da execução, como em hash.to_proc.call(:a).
3. A Proc recebe a chave e retorna o valor associado a ela.

A mesma ideia se aplica na implementação de Symbol#to_proc, ao qual já estamos acostumados. Uma possível implementação pode ser vista à seguir:

class Symbol
  def to_proc(&block)
    proc {|target| target.public_send(self) }
  end
end

:upcase.to_proc.call("hello")
#=> "HELLO"

Ticket: #11653.

Hash#fetch_values

O método Hash#fetch_values retorna o valor de diversas chaves de uma só vez. Caso uma das chaves fornecidas não exista, a exceção KeyError será lançada. Essa é a principal diferença em relação ao já existente Hash#values_at, que retorna nil para chaves não encontradas.

hash = {a: 1, b: 2, c: 3}

hash.values_at(:a, :c)
#=> [1, 3]

hash.fetch_values(:a, :c)
#=> [1, 3]

hash.values_at(:a, :d)
#=> [1, nil]

hash.fetch_values(:a, :d)
#=> KeyError: key not found: :d

Ticket: #10017.

Comparação de hashes

Se você já precisou fazer comparações entre hashes, deve ter tentado usar o método Hash#include?. Imagine que você quer saber se o hash a contém o hash b. Parece natural fazer algo como a.include?(b). Acontece que o método Hash#include? não passa de um alias para o método Hash#has_key? e irá apenas verificar se a chave é existente ou não.

Para resolver este problema, agora podemos usar alguns os métodos Hash#>, Hash#>=, Hash#< e Hash#<= para fazer este tipo de comparação.

# left é exatamente igual a right?
{a: 1} == {a: 1}
#=> true

# left contém e tem mais itens que right?
{a: 1, b: 1} > {a: 1}
#=> true

# left contém right e, opcionalmente, possui mais itens?
{a: 1} >= {a: 1}
#=> true

# left contém right e possui menos itens?
{a: 1} < {a: 1, b: 2}
#=> true

# left contém right e, opcionalmente, possui menos itens?
{a: 1} <= {a: 1}
#=> true

Note que estes novos métodos não interferem na ordenação de hashes, já que o método Hash#<=> permaneceu inalterado.

A proposta original utilizava o método Hash#contain?, mas o Matz achou que este nome era ambíguo (embora ele não tenha especificado, acredito que é por causa do próprio Hash#include?).

Ticket: #10984.

Enumerable#grep_v

O método Enumerable#grep_v é a contra-partida do método Enumerable#grep e emula o comportamento do comando grep -v, ignorando todos os itens que casarem a condição. No exemplo à seguir, estamos ignorando todas as cores que tiverem a letra w.

colors = %w[white black brown]

colors.grep_v(/w/)
#=> ["black"]

Tickets: #11049 e #11773.

Números positivos e negativos

Sugerido pelo Rafael França após serem adicionados ao ActiveSupport, estes métodos permitem verificar se um número é positivo ou não, seguindo a mesma linha dos métodos Numeric#zero? e Numeric#nonzero?.

1.positive?
#=> true

-1.negative?
#=> trues

0.negative?
#=> false

0.positive?
#=> false

Ticket: #11151.

Module.deprecate_constant

O método Module.deprecate_constant permite emitir um aviso quando uma constante é acessada.

module A
  module B
  end
end

A.deprecate_constant(:B)

A::B
#=> warning: constant A::B is deprecated

Um problema desta nova funcionalidade é que não é possível especificar qual é a alternativa para esta constante, caso haja uma. Idealmente deveria ser possível fazer algo como A.deprecate_constant(:B, A::C) para emitir o aviso warning: constant A::B is deprecated; use A::C instead.; se nenhuma alternativa fosse fornecida, exibiria a mensagem do exemplo anterior.

Ticket: #11398.

Did You Mean

O Ruby 2.3 agora possui integração nativa com a gem did_you_mean, que melhora as mensagens de erros para casos de nomes incorretos de classes, métodos e variáveis (typos).

# ruby 2.2
Strin
#=> NameError: uninitialized constant Strin

# ruby 2.3
Strin
#=> NameError: uninitialized constant Strin
#=> Did you mean?  String
#=>                STDIN

O mesmo acontece com nomes de variáveis e métodos.

users = []
#=> []

user
#=> NameError: undefined local variable or method `user' for main:Object
#=> Did you mean?  users

users.revers
#=> NoMethodError: undefined method `revers' for []:Array
#=> Did you mean?  reverse
#=>                reverse!

Ticket: #11252.

Heredoc Strings

O Ruby possui suporte para strings multilinhas. No entanto, em muitos casos é comum usarmos strings heredoc.

sql = <<SQL
SELECT * 
FROM users
WHERE user_id = 1
SQL

Perceba que no exemplo anterior, você precisa obrigatoriamente adicionar o delimitador SQL no começo da linha. Este delimitador pode ter o nome que você quiser e, em alguns editores como o Sublime Text, irá ativar o syntax highlighting.

Você também pode usar um outro tipo de heredoc que permite indentar o delimitador. Ele é especialmente útil quando você possui métodos.

class UserFinder
  def self.query
    sql = <<-SQL
      SELECT * 
      FROM users
      WHERE user_id = 1
    SQL
  end
end

A maior desvantagem do <<- é que ele irá adicionar os espaçamentos da indentação na string. Isso significa que se você fizer o output daquela string, terá algo como

      SELECT * 
      FROM users
      WHERE user_id = 1

em vez de

SELECT * 
FROM users
WHERE user_id = 1

Se você tem acesso à biblioteca ActiveSupport, pode usar o método String#strip_heredoc.

class UserFinder
  def self.query
    sql = <<-SQL.strip_heredoc
      SELECT * 
      FROM users
      WHERE user_id = 1
    SQL
  end
end

À partir do Ruby 2.3 você não precisa mais do método String#strip_heredoc e agora tem um novo tipo de heredoc. Trata-se de <<~, que ignora todos os espaçamentos da indentação, mantendo as quebras de linha.

class UserFinder
  def self.query
    sql = <<~SQL
      SELECT * 
      FROM users
      WHERE user_id = 1
    SQL
  end
end

Ticket: #9098.

Finalizando

O Ruby vem melhorando incrementalmente ao longo dos anos. Depois da migração mais complicada de 1.8 para 1.9, não tivemos tantas mudanças drásticas que dificultaram a migração. E isso é uma característica importante para que a adoção de novas versões seja grande. Além disso, cada versão lançada tem tido melhorias de performance de 5 a 10% em comparação à versão anterior.

Para saber quais são os planos para o Ruby, recomendo que você assista o keynote do Matz apresentado na Rubyconf deste ano. Dentre os objetivos está melhorar o suporte para multi-cores e programação concorrente, tornando a versão 3.0 três vezes mais rápida que a versão 2.0 em uma iniciativa chamada de Ruby3x3. O futuro do Ruby ainda é promissor.

Neste artigo veremos quais as principais dificuldades de se trabalhar com datas e como usar os diversos utilitários disponibilizados pelo Ruby e Rails para garantir que seu sistema usa corretamente as datas.

Como funciona no Ruby

O Ruby possui duas classes para lidar com datas: Date e Time¹. Com elas é possível gerar datas usando strings que são interpretadas por estas classes ou com atributos individuais que identificam o ano, hora, mês, etc.

require "time"

Time.parse("Dec 8 2015 10:19")
#=> 2015-12-08 10:19:00 -0200

Date.parse("Dec 8 2015")
#=> 2015-12-08

Todo o cálculo de dados deve ser feito de forma manual. Por exemplo, para avançar uma hora, você pode somar 3600 segundos à data atual.

time = Time.now
#=> 2015-12-08 10:26:40 -0200

time + 3600
#=> 2015-12-08 11:26:40 -0200

Algumas operações podem ser mais trabalhosas (não difíceis), mas de um modo geral esses cálculos são simples de serem feitos. O mesmo não pode ser dito de cálculos que envolvem o fuso horário.

Trabalhando com fuso horário

A definição de fuso horário é, sem dúvida nenhuma, a parte mais complicada ao se trabalhar com datas. Primeiro, você precisa entender como o Ruby funciona.

No Ruby, a definição de fuso horário é feita exclusivamente pela variável de ambiente TZ. Na maioria das vezes, essa variável de ambiente não é definida, mas isso vai depender de como seu servidor foi configurado; sistemas POSIX mais antigos usavam esta variável para configurar o fuso horário, mas hoje isso é feito através do arquivo /etc/localtime.

Veja como o Ruby se comporta com e sem a variável TZ.

ENV["TZ"]
#=> nil

Time.now
#=> 2015-12-08 10:30:00 -0200

ENV["TZ"] = "America/Los_Angeles"
#=> "America/Los_Angeles"

Time.now
#=> 2015-12-08 04:30:14 -0800

O comando date, disponível em sistemas *nix, também usa a variável TZ, caso ela esteja disponível, para exibir a data na sessão de um usuário.

$ date
Tue Dec  8 09:37:12 BRST 2015

$ export TZ=America/Los_Angeles

$ date
Tue Dec  8 03:37:27 PST 2015

O maior problema é que nem todo software irá utilizar esta variável automaticamente. No PostgreSQL, por exemplo, mesmo que a variável TZ esteja definida, ele irá retornar o valor definido pela configuração timezone².

SELECT current_setting('timezone');
#=> Brazil/East

A melhor maneira de evitar de lidar com fuso horário nas diferentes peças de sua infraestrutura é simplesmente ignorando-o; em vez de definir um fuso horário em particular, use Etc/UTC. Isso evitará problemas comuns relacionados a horário de verão em cron jobs, além de simplificar o modo como diferentes aplicações irão trabalhar com datas e conversar entre si. Deixe toda a formatação de fuso horário ser responsabilidade da camada da aplicação.

Como funciona no Ruby on Rails

Para definir o fuso horário de sua aplicação, utilize o arquivo de ambiente ou crie um arquivo de inicialização.

# config/initializers/time_zone.rb
Time.zone = "America/Sao_Paulo"

O Ruby on Rails permite que você defina o fuso horário de sua aplicação, independente do valor definido na variável TZ e isso traz algumas implicações.

Primeiro, o Ruby desconhece totalmente o fuso horário definido pelo Rails. Isso significa que se meu sistema estiver definido como America/Sao_Paulo e meu fuso horário estiver como America/Los_Angeles, terei datas diferentes dependendo de como eu gere essas datas.

Time.now.zone
#=> "BRST"

Time.zone = "America/Los_Angeles"
#=> "America/Los_Angeles"

Time.now.zone
#=> "BRST"

Para que você gere datas que tenha conhecimento sobre o fuso horário, é preciso usar os métodos definidos pelo ActiveSupport, que são objetos gerados à partir da classe ActiveSupport::TimeWithZone³. São diversos métodos e seu uso vai depender do que você precisa.

Time.zone.now
#=> Tue, 08 Dec 2015 03:37:57 PST -08:00

Time.zone.today
#=> Tue, 08 Dec 2015

Time.current
#=> Tue, 08 Dec 2015 03:38:17 PST -08:00

1.hour.ago
#=> Tue, 08 Dec 2015 02:38:28 PST -08:00

1.day.from_now
#=> Wed, 09 Dec 2015 03:38:36 PST -08:00

Date.yesterday
#=> Mon, 07 Dec 2015

Date.tomorrow
#=> Wed, 09 Dec 2015

De um modo geral:

• Use Time.current em vez de Time.now.
• Use Date.current em vez de Date.today.

É importante dizer que Time.current pode ignorar informações de fuso horário caso esta configuração não esteja definida; o mesmo é válido para Date.current. Veja a implementação destes métodos na biblioteca ActiveSupport:

# activesupport-4.2.5/lib/active_support/core_ext/time/calculations.rb
# line 30
class Time
  def current
    ::Time.zone ? ::Time.zone.now : ::Time.now
  end
end

# activesupport-4.2.5/lib/active_support/core_ext/date/calculations.rb
# line 46
class Date
  def current
    ::Time.zone ? ::Time.zone.today : ::Date.today
  end
end

Você pode usar Time.zone.today e Time.zone.now para ter um resultado determinístico.

Lidando com o horário de verão

O ActiveSupport utiliza a gem TZInfo para ter conhecimento sobre os diversos fusos horários. Para isso, essa gem carrega diversas informações do sistema operacional; no Ubuntu, essas informações são disponibilizadas através do pacote tzdata.

Se você mantém o seu servidor atualizado, isso significa que a aplicação terá acesso às informações sobre quando começa ou termina o Horário de Verão por todo o mundo.

Veja, por exemplo, como fica o Horário de Verão deste ano⁴:

Time.zone.parse('2015-10-17').dst?
#=> false

Time.zone.parse('2015-10-18').dst?
#=> true

Time.zone.parse('2016-02-20').dst?
#=> true

Time.zone.parse('2016-02-21').dst?
#=> false

Às vezes você precisará fazer a conversão e o horário de verão pode retornar um horário diferente. Recentemente precisei integrar a geração de datas com um calendário. A maior dificuldade foi em relação à exibição de uma data futura, levando em consideração o fuso horário local.

Acontece que a solução é bastante simples; basta não definir o fuso horário na string que será interpretada, deixando isso para o método Time.use_zone.

Time.current
#=> Mon, 07 Dec 2015 18:57:51 BRST -02:00

Time.use_zone("America/Sao_Paulo") do
  starts_at = Time.zone.parse("2016-03-05 10:00")
  #=> Sat, 05 Mar 2016 10:00:00 BRT -03:00

  ends_at = Time.zone.parse("2016-03-05 17:00")
  #=> Sat, 05 Mar 2016 17:00:00 BRT -03:00
end

Como as datas são persistidas

O ActiveRecord é configurado por padrão para persistir as datas como UTC. Isso é definido pelas configurações ActiveRecord::Base.default_timezone e ActiveRecord::Base.time_zone_aware_attributes.

ActiveRecord::Base.default_timezone
#=> :utc

ActiveRecord::Base.time_zone_aware_attributes
#=> true

Isso significa que toda vez que você define uma data para um atributo do ActiveRecord, esta data será armazenada como UTC. Ao carregar o registro, o Rails irá converter a data de volta para o fuso horário definido na aplicação⁵.

Perceba que que a data pode ser armazenada incorretamente caso você utilize os métodos Date.today ou Time.now.

Time.zone = "America/Los_Angeles"
#=> "America/Los_Angeles"

Time.now.beginning_of_day.utc
#=> 2015-12-08 02:00:00 UTC

Time.current.beginning_of_day.utc
#=> 2015-12-08 08:00:00 UTC

Essa diferença acontece porque Time.now ignora o fuso horário definido pela aplicação e está usando o fuso horário local do sistema (que neste caso é BRST-0200). Por isso é muito importante que você use uma data que tenha conhecimento do fuso horário, como mostrado anteriormente.

O Rails assume que todas as datas armazenadas no banco de dados estão em UTC. Se alguém adicionar um registro por fora do sistema sem considerar o fuso horário pode ter uma diferença de algumas horas na hora que esse registro for carregado na aplicação. O PostgreSQL possui um campo que tem conhecimento do fuso e que fará a conversão para você antes de persistir a informação. Infelizmente, o Rails não tem suporte nativo para time with time zone, mas você pode adicioná-lo facilmente; basta criar um arquivo de inicialização que contenha o seguinte código:

# config/initializers/active_record.rb
ActiveRecord::ConnectionAdapters::PostgreSQLAdapter::
  NATIVE_DATABASE_TYPES[:datetime] = {name: "timestamp with time zone"}

Fazendo consultas de banco de dados

Como o Rails considera que todas as datas são armazenas como UTC, a única coisa que você precisa garantir é que as datas estejam definidas com a informação de fuso horário (Time.current ou Date.current, por exemplo) e o framework irá se encarregar de fazer a conversão correta.

Article.where("published_at >= ?", Time.current)

Lembre-se que definição de datas como 1.day.ago e Date.current.beginning_of_month, dentre outros, irão gerar objetos que carregam o fuso horário, então você não terá problemas.

Interpretando datas enviadas pelos usuários

Os mesmos cuidados valem na hora de converter uma string em um objeto de data. O Ruby possui os métodos Time.parse e Date.parse, mas eles ignorarão as informações de fuso horário. Por isso, use Time.zone.parse sempre que precisar fazer esta conversão.

Time.parse("8:47am Dec 7th, 2015").utc
#=> 2015-12-07 10:47:00 UTC

Time.zone.parse("8:47am Dec 7th, 2015").utc
#=> 2015-12-07 16:47:00 UTC

Para o caso de você receber diversos números para cada item que compõe uma data, utilize o método Time.zone.local em vez de Time.new.

Time.new(2015, 12, 7, 8, 47, 0).utc
#=> 2015-12-07 10:47:00 UTC

Time.zone.local(2015, 12, 7, 8, 47, 0).utc
#=> 2015-12-07 16:47:00 UTC

Finalmente, se você tiver um timestamp, use Time.zone.at.

Time.zone.at(1449506820)
#=> 2015-12-07 16:47:00 UTC

Para definir um fuso horário apenas durante uma execução qualquer, podemos usar o método Time.use_zone. Ele irá definir o fuso horário especificado apenas para a execução do bloco.

Time.zone = "America/Sao_Paulo"
#=> "America/Sao_Paulo"

now_in_sao_paulo = Time.current
#=> Tue, 08 Dec 2015 09:40:31 BRST -02:00

now_in_los_angeles = Time.use_zone("America/Los_Angeles") do
  Time.current
end
#=> Tue, 08 Dec 2015 03:40:31 PST -08:00

now_in_sao_paulo.utc
#=> 2015-12-08 11:40:31 UTC

now_in_los_angeles.utc
#=> 2015-12-08 11:40:31 UTC

now_in_sao_paulo.to_i == now_in_los_angeles.to_i
#=> true

Esse método pode ser usado no controller, caso você precise definir o fuso horário especificado pelo usuário.

class ApplicationController < ActionController::Base
  around_action :set_timezone, if: :logged_in?

  private

  def set_timezone(&action)
    Time.use_zone(current_user.time_zone, &action)
  end
end

Trabalhando com fuso horário no JavaScript

A melhor maneira de se trabalhar com datas e fuso horário no JavaScript é usar a biblioteca moment.js.

Para enviar uma data do Ruby para o JavaScript, utilize o método Time#iso8601. Ele irá retornar uma formatação como 2015-12-07T19:25:45Z. Com o moment.js, você pode fazer a conversão desse formato para o objeto Date do JavaScript.

var date = moment("2015-12-07T19:25:45Z");
//=> Mon Dec 07 2015 17:25:45 GMT-0200 (BRST)

date.format("MMM DD, YYYY - h:mma");
//=> Dec 07, 2015 - 5:25pm

No exemplo acima ele fez a conversão automática para o fuso horário identificado pelo navegador, no meu caso BRST-0200. Se você precisar fazer conversão para outro fuso horário, use o momentjs-timezone.

Finalizando

Se o seu aplicativo usa datas, principalmente quando há cálculo envolvido, entender como funciona o sistema de datas do Rails é essencial. Para facilitar a sua vida, basta seguir as regras abaixo:

• Defina o fuso horário de seus servidores como Etc/UTC.
• Defina sempre o fuso horário em sua aplicação Ruby on Rails, mesmo que seja Etc/UTC.
• Lide com a apresentação do fuso horário na camada da aplicação.
• Use os métodos Time.current e Date.current para pegar as datas atuais.
• Use Time.zone.parse para converter strings em datas.
• Converta Date em ActiveSupport::TimeWithZone para fazer comparações, como em date.in_time_zone == Time.current.beginning_of_day.

Resources

• Dealing With Time Zones Using Rails and Postgres
• Dealing with timezones effectively in Rails
• Handling Dates & Timezones in Ruby & Rails
• Handling Time Zones in Rails
• How Rails and MySQL are handling time zones
• The Exhaustive Guide to Rails Time Zones
• The Worst Server Setup Mistake You Can Make
• Working with time zones in Ruby on Rails

Bartender

O Bartender ($15) é um daqueles aplicativos essenciais que uso para diminuir as distrações da tela. Veja, por exemplo, como é a menu bar usual de um Mac.

Note como são exibidos mais de 20 ícones. Isso é ruim principalmente se você faz screencasts, pois gera um ruído completamente desnecessário. Em contra-partida, com o Bartender é possível controlar quais ícones serão exibidos. Na minha atual configuração, exibo apenas 6 ícones, como você pode ver abaixo. Todos os outros ícones podem ser visualizados com um simples clique.

Backdrop

Já que falamos em screencasts, o Backdrop (grátis) é um app que permite esconder os ícones de sua área de trabalho, útil para casos onde você não tem esse suporte nativamente nos apps de screencasting, ou se vai gravar GIFs animados.

O Backdrop permite que você configure uma cor ou imagem de fundo, facilitando a configuração de seu workspace de gravação.

ScreenFlow

O ScreenFlow ($99) é um dos apps mais poderosos para gravação de screencasting. Ele permite gravar tudo em separado (câmera, áudio, tela, cliques e atalhos de teclado), de modo que você tenha controle total na hora de editar o seu vídeo. Uma das maiores vantagens é que ele é muito simples de usar.

Screenflick

Além do ScreenFlow, uso bastante o Screenflick ($29), principalmente para gravações de longa duração, como as dos meus workshops. A maior vantagem é que ele tem uma performance melhor, sem deixar de ter funcionalidades interessantes como gravação da câmera, atalhos de teclado e cliques de mouse. Ele não possui funcionalidades avançadas de edição e só permite fazer trimming.

Dash

O Dash ($25) é um daqueles apps que você não dá muita bola no começo mas que depois se mostra essencial. Com ele você instalar documentação para diversas linguagens e frameworks, permitindo que você faça buscas em um único lugar e sem precisar de uma conexão com a Internet. Pode ser integrado com a maioria dos editores e com o Alfred.

Existe uma alternativa opensource que não tem um acabamento tão bom, mas que usa os mesmos pacotes de documentação do Dash.

Alfred

Um dos primeiros apps que conheci quando comecei a usar Mac foi o Quicksilver. Como ele não era muito atualizado, não demorou muito para surgir uma alternativa. Trata-se do Alfred (£17), essencial no meu dia-a-dia. Com uma interface muito bem feita, é flexível e permite que você crie workflows (extensões que automatizam um processo) de um modo bastante simples.

O Alfred não é apenas um lançador de aplicativos. Ele permite que você configure os mais diversos workflows. Veja, por exemplo, como fica a integração com o Dash.

O Alfred tem uma versão gratuita que não faz muito além de abrir aplicativos.

ImageOptim

Embora você possa automatizar o processo de comprimir imagens sem perder a qualidade, às vezes é mais fácil apenas arrastar as imagens para um app. Neste caso, ImageOptim (grátis) é o aplicativo indicado para você.

Annotate

O Annotate ($2) permite fazer anotações em imagens existentes e também em screenshots. Ele possui integração com o Dropbox e permite gravar GIFs de até 10 segundos.

IconPing

Já pensou em dar 20 minutos de aula para só então perceber que sua conexão tinha caído e você não tinha a menor ideia? Pois é, já aconteceu comigo. Com o IconPing (grátis) você terá um indicativo de como está sua conexão.

LICEcap

Com o LICEcap (grátis) você pode criar GIFs animados sem limite de tempo com uma qualidade muito boa. É possível configurar as dimensões da gravação, além de configurar a quantidade de quadros por segundo.

Servus

Servus é uma alternativa para o CloudApp que integra com o Dropbox. Infelizmente ele foi descontinuado, mas é listado neste artigo porque continua funcionando muito bem, sem nenhum erro. Se você conhece alguma alternativa que integra com o Dropbox, deixe seu comentário.

DaisyDisk

DaisyDisk ($10) é um daqueles apps que uso frequentemente. Embora existam alternativas opensource, o que gosto neste app é que sua interface é muito bem trabalhada. Você consegue visualizar facilmente como anda o uso de seus discos (incluindo externos), permitindo que você apague rapidamente o que não é mais útil.

MindNode

Ultimamente tenho usado mindmaps para ter uma ideia geral de assuntos que quero abordar em palestras e artigos. Não apenas para isso, mas para tudo que possa se beneficiar de brainstorming. Com o MindNode ($30) você pode criar esses mindmaps em uma interface muito fácil de usar e exportar para diversos formatos, incluindo PDF e imagens.

Runway

O Runway ($10) é uma ferramenta que permite criar diagramas de diversos tipos. Comprei esse app recentemente para fazer alguns diagramas de banco de dados¹ e vem me servindo muito bem para este propósito.

Boom

Sabe quando você está em algum lugar, sem seu fone de ouvido, e queria poder aumentar um pouco mais o som de seu computador? Com o Boom ($15) você pode fazer isso.

Reflector

Quando dou workshops de Responsive Web Design, é interessante demonstrar em smartphones e tablets reais como está ficando o markup que está sendo implementado. Nestes casos, gosto de usar o Reflector ($15), que recebe conexões de dispositivos baseados em iOS e Android, exibindo na tela tudo o que você está fazendo no dispositivo. Também é muito útil se você precisa gravar vídeos da interação do usuário com sites e aplicativos nestes dispositivos.

Should I Sleep

Você provavelmente já conhece o Caffeine (grátis). Ele evita que seu computador entre em modo de hibernação ou ative o protetor de telas. Com o Should I Sleep ($2) você leva esse conceito a outro nível!

O Should I Sleep tem diversos tipos de detecção, como facial, movimentos e som, dentre outros, com a possibilidade de configurar o nível de sensibilidade da detecção.

Infelizmente o app parece estar abandonado, pois há tempos não recebe atualização (não que isso seja um problema, já que o app funciona muito bem).

Sip

Sip ($10) é fundamentalmente um color picker. Mas além disso, ele permite que você salve temas de cores que você coletou, sincronizando entre computadores diferentes. Você pode escolher diferentes formatos de cor para copiar, como hexadecimal (CSS) ou formatos específicos de linguagens de programação.

Sketch

Há pouco mais de um ano, deixei de usar o Photoshop para criação de designs para web. Agora uso o Sketch ($99), que é programa vetorial que tem uma série de funcionalidades interessantes, como a possibilidade de exportar assets em diversos formatos e escalas de uma só vez (como SVG, imagens em 1x e 2x).

1Password

O 1Password ($50 para Mac, $10 para iOS) é definitivamente o melhor gerenciador de senhas que existe. Com ele você consegue manter em um só lugar e de forma sincronizada todas as suas senhas (geradas randomicamente), cartões de créditos e outras informações importantes, como números seriais de programas. Ele possui extensões para todos os navegadores, facilitando ainda mais seu uso no dia-a-dia.

Uma das melhores coisas do 1Password é que ele também serve para gerar tokens TOTP (autenticação de dois fatores) tanto no Macbook, quanto no iPhone.

Finalizando

Como você pode ver, o ecossistema de aplicativos do Mac OS X é imbatível. Não é apenas sobre a quantidade de ofertas disponíveis e que cobrem todas as necessidades que tenho, mas é principalmente sobre a qualidade dos aplicativos.

Em nenhum outro sistema operacional, seja Windows ou Linux², você conseguirá encontrar aplicativos tão bem feitos quanto os de Mac. Claro que isso vem com um custo, mas estou disposto a pagar pelo que há de melhor em nível de software.

Muitas pessoas me perguntam como se tornar um palestrante ou como fazer slides melhores com uma certa frequência. Eu normalmente dou algumas dicas, mas não dou detalhes, pois é um assunto complexo.

Então, desta vez decidi documentar neste artigo uma série de dicas que podem auxiliar você nessa difícil tarefa que é entregar conteúdo útil em uma palestra com tempo limitado.

Escolhendo o tema

Escolher o tema do que você quer palestrar é uma das tarefas mais difíceis. O maior problema é que achamos que não temos nada interessante para falar. E isso simplesmente não é verdade!

Sempre existirão pessoas mais experientes que você em eventos, assim como também sempre existirão pessoas que estão começando e que são menos experientes. Por isso, mesmo que você julgue seu tema como sendo básico, ele pode ser avançado e interessante o bastante para estas pessoas.

Além disso, mesmo que seja um assunto que já foi exaurido, você pode dar uma nova perspectiva sobre o assunto. Basta não falar o que já foi dito extensivamente por outras pessoas.

Um problema muito comum é sobre o escopo de sua palestra. Tenha em mente que o tempo reduzido tornará difícil a tarefa de abordar um escopo muito grande. Por isso, experimente focar em uma parte do conteúdo em vez de tentar abraçar o mundo.

Falando sobre algo que você domina

Se você está dando sua primeira palestra, escolher um assunto que você domina é uma excelente escolha. Isso porque você poderá se dedicar em aprender como palestrar melhor, em vez de também ter que aprender sobre o assunto da palestra.

Estas palestras podem beneficiar pessoas experientes e inexperientes. Para pessoas experientes, você pode falar sobre dicas e assuntos mais avançados. No caso de pessoas inexperientes, você pode dar dicas que como ter um início mais sólido, tirando da frente problemas que você mesmo já enfrentou.

Falando sobre algo que você tem interesse

Às vezes você decide por falar sobre algo que você tem interesse. Dar uma palestra sobre este assunto é uma excelente maneira de se aprofundar e aprender mais sobre ele. Penso que é melhor fazer isso quando você já tem uma certa experiência em dar palestras, já que você precisará se preocupar em aprender mais sobre o que vai falar.

Normalmente são palestras apaixonadas e que podem estimular os participantes por causa de sua empolgação sobre aquele assunto.

Falando sobre algo que é popular

Uma excelente maneira de garantir que sua palestra seja aceita em eventos é falar sobre assuntos populares do momento. Neste caso, você pode abordar o assunto sobre a ótica de porque ele é mais relevante que uma tecnologia concorrente ou porque alguém deveria considerá-lo para começo de conversa.

Falando sobre algo que é importante

Muitos assuntos são de suma importância e também tem grandes chances de fazerem sucesso em conferências. Eu, por exemplo, gosto muito de falar sobre segurança em aplicações web, pois mesmo sendo um assunto essencial e muito apresentado, ainda não é algo que todos dominam (e que muitos desconhecem totalmente).

Quando apresentadas com um tom de urgência, podem estimular os participantes a procurarem mais sobre o assunto após a palestra.

Preparando sua palestra

Depois de escolher o tema, é hora de preparar sua palestra. Ultimamente tenho usado mindmaps para organizar as minhas ideias. Veja, por exemplo, como ficou o mindmap da minha palestra da Rubyconf Brasil 2015.

Me arrependo de não ter usado mindmaps antes. Eles realmente facilitam o modo como você visualiza os tópicos pertinentes à sua palestra. Você pode adicionar tudo o que pretende falar (ou não), de um modo rápido e que servirá como guia para a produção dos seus slides depois.

Mesmo que você conheça sobre o assunto que vai falar, é importante estudar um pouco mais sobre ele. Além disso, saber como outras pessoas abordam o mesmo assunto podem dar algumas ideias novas. Confreaks, Speaker Deck e SlideShare são excelentes fontes de pesquisa que uso frequentemente com este intuito.

Blog posts também são ótimos para explorar ideias sobre o assunto que você vai falar, servindo como confirmação de algo que você acredita, como contra-ponto ou até como objeto de crítica. Quando estou pesquisando para palestras, acabo com centenas de abas abertas em meu navegador, então use um navegador separado para fazer essas pesquisas.

Organizando o texto

Seus slides devem ter poucas palavras. Evite cair na armadilha de ter escrito tudo o que você vai falar de qualquer modo. Em vez de ter diversos bullet points no seu slide, tenha vários slides com uma frase que sumariza o que você quer dizer.

Veja os slide à seguir, de uma palestra sobre aplicações distribuídas escritas em Ruby:

Eles poderiam ter sido apresentados de uma maneira muito melhor, mesmo que a sua fala seja exatamente igual.

No exemplo acima, basta mudar os slides mais rapidamente para explicar cada um dos tópicos, em vez de ficar parado com todo aquele texto na tela. A maior vantagem para esta abordagem é que os participantes não irão despender muito tempo lendo o slide e poderão se concentrar em ouvir o que você tem a dizer.

Pensando no design de seus slides

Quem não gosta de ver uma apresentação bem feita, com slides bonitos que mostram o cuidado que a pessoa dedicou ao fazê-los? Eu sim! Então saiba que não é preciso ser um designer experiente para deixá-los visualmente interessantes, como você pode ver nas dicas à seguir.

Use fontes grandes. Use um tamanho que seja confortável para ler de qualquer lugar da sala. Para que isso funcione bem, siga a dica anterior, aquela de usar pouco texto nos slides.

Use uma fonte que possua diferentes variações de pesos. Assim você mantém o design coerente, permitindo mudar o estilo quando precisar. Eu recomendo a fonte OpenSans, distribuída gratuitamente. Use “OpenSans Extrabold” para definir títulos ou frases importantes. Use “OpenSans Regular” para definir outros textos.

Use sempre cores que tenham bastante contraste. Projetores dificilmente terão resolução suficiente para exibir adequadamente uma esquema de cores de baixo contraste. E mesmo que tenham, é muito provável que a iluminação do lugar desfavoreça o seu uso de cores. Você não precisa usar um esquema de cores super elaborado. Veja como é possível obter diversos temas diferentes simples apenas mudando a cor de fundo do slide:

Na dúvida, use o bom preto (cor do texto) no branco (cor de fundo).

Crie seus slides para telas widescreen. Hoje tenho feito todos os meus slides em 1280x720 (720p). Não me lembro de quando foi a última vez que usei um projetor que não suportava esta resolução. A vantagem é que seu slide ocupará todo o espaço útil disponível para a projeção.

Garanta que seu display está configurado corretamente para apresentar nesta resolução. No Mac, você pode ir em System Preferences e, então, Displays. Selecione a resolução 720p ou 1280x720.

Se estas resoluções não forem listadas, pressione a tecla option e clique na opção Scaled; isso exibirá todas as opções disponíveis para aquele projetor.

Use fotos do tamanho do slide e adicione o seu texto como uma camada sobre esta imagem. Fotos são excelentes para ilustrar ideias e deixar os seus slides mais bonitos. Também são uma ótima maneira para ilustrar frases que você está citando. Veja como um slide falando sobre a famosa frase de Steve Jobs:

Se você usar uma imagem melhor que ocupe todo o tamanho do slide, terá uma apresentação que causará muito mais impacto:

Nem sempre é possível escrever o texto diretamente sobre a imagem; nestes casos, use uma caixa com um fundo preto (talvez até com 90% de opacidade) para que seja fácil distinguir o que está escrito.

Use animações para mostrar exemplos mais claramente. Animações devem ser usadas para um propósito. Animações entre slides devem ser rápidas e sem muita firula.

Trabalhando na narrativa

As melhores apresentações contam histórias. Elas iniciam com um problema, desenvolvem o assunto durante a apresentação e, por fim, encerram com uma conclusão (mesmo que a conclusão seja não ter concluído nada).

Tente ligar a narrativa dos slides de modo que você fazer a transição entre eles sem pausas bruscas.

Inicie a apresentação. Aqui normalmente começo dizendo algo como “Olá, tudo bem? Hoje vou falar um pouco sobre [assunto].”. Não se apresente aqui ainda. Você já pode iniciar com um pouco de contexto, explicando porque este assunto é relevante.

Fale um pouco sobre você. Faça uma apresentação bem rápida e sucinta. Não fale o seu currículo inteiro, pois parecerá que você apenas está se gabando de suas conquistas (mesmo que sejam besteira pura, como certificações). Do mesmo modo, não perca muito tempo apresentando sua empresa; os participantes não estão ali para ouvir seu spam comercial.

Escopo. Aqui é preciso prender a atenção dos participantes. Fale sobre os problemas que sua palestra tentará elucidar. Faça declarações que você irá detalhar posteriormente. Faça com que o suspense mantenha os participantes envolvidos com a palestra.

Faça sua apresentação. Aqui não tem muito segredo a não ser praticar o que você pretende falar. Pense em pausas na fala, o modo como você pretende abordar o tema e, se for você for bom nisso, como pretende encaixar piadas.

Se você for apresentar códigos, utilize um tema claro, ou os participantes podem não conseguir ler por causa do contraste do projetor. Também não adianta nada usar fontes tamanho 11 apenas para adicionar mais código ao slide.

Crie pequenos blocos de código, com syntax highlight, suficientes para dar o contexto; o código não precisa ser funcional. Se o seu editor não tiver suporte para copiar código como RTF (no Sublime Text, tem a extensão SublimeHighlight), use o pygments. No Mac, você pode usar algo como o comando abaixo:

pbpaste | pygmentize -l ruby -f rtf -O style=friendly | pbcopy

Se você pretende fazer live coding, pense duas vezes. A probabilidade de algo dar errado é muito grande. Em vez disso, prefira gravar um screencast, sem voz mesmo, e faça a narração no momento da palestra. Faça isso também se você precisa de conexão com a Internet. Acreditar que você terá uma rede disponível com banda suficiente para você é apostar no incerto.

Ao fazer um screencast, grave apenas a janela do programa que você está utilizando. Lembre-se de utilizar um tamanho menor que a resolução dos slides (1280x720) e, em hipótese alguma, grave a tela na resolução total.

De uma forma geral, para códigos, utilize uma fonte monospace com tamanho 20 ou superior. O mesmo se aplica ao tamanho do terminal em caso de screencasts.

Faça um recap. Palestras técnicas podem ser muito densas. Por isso, coloque em suas conclusões finais os pontos que você quer que os participantes levem de sua palestra.

Encerre a apresentação. Ao encerrar sua conclusão, é hora de agradecer pelo tempo. Aqui eu gosto de terminar com um slide escrito “Obrigado”. Normalmente falo algo como “Bom, era isso que eu tinha para fazer para vocês. Obrigado.”. Ao fazer isso, não fica aquele silêncio constrangedor, já que este tipo de frase fará com que os participantes aplaudam o apresentador.

Abra para perguntas. Assim que os aplausos cessarem, abra para perguntas se o tempo permitir (e se fizer sentido). Lembre-se de responder sinceramente às perguntas e, caso você não saiba algo, não tenha vergonha de dizer isso. Muitas perguntas assumem um contexto que você não tem a menor ideia. É melhor jogar aberto e dizer que não sabe como algo funcionará neste contexto do que falar uma besteira e ficar marcado por isso para sempre.

Fazendo a apresentação

Controle e adaptadores

Compre um controle remoto para fazer sua apresentação. Eu tenho um Logitech R400 e ele funciona muito bem, sem ser muito caro. Verifique um dia antes da palestra se a pilha ainda tem carga. Na dúvida, tenha sempre pilhas novas de backup na sua mochila.

Lembre-se também de levar adaptadores de vídeo, principalmente se você tem um Macbook. A maioria dos eventos assume que você seu notebook tem entrada VGA ou HDMI e você terá que usar um notebook emprestado. Tenha um adaptador de cada tipo (você consegue encontrar estes adaptadores no Mercado Livre por volta de R$30 cada).

Gravando sua palestra

Muitos eventos não disponibilizam as gravações da conferência. Uma coisa que você pode fazer é gravar sua palestra e disponibilizar depois.

Na conferência Web.br deste ano, nem todas as palestras foram gravadas. Então, para evitar que o conteúdo se perdesse, decidi gravar a tela enquanto fazia a apresentação. Para que o áudio ficasse com uma qualidade boa, usei um microfone de lapela que fez a gravação do áudio separada no meu iPhone. Depois sincronizei tudo no ScreenFlow. O resultado foi excelente.

Ao fazer isso você também aumenta o público que sua palestra pode alcançar. Lembre-se que muitas pessoas podem não ter os recursos necessários para participar de eventos em outros estados, e assim você irá disseminar o conhecimento com mais abrangência.

Você não precisa gastar dinheiro com um microfone como este se não quiser. Os fones de ouvido com microfone que vem com seu smartphone consegue fazer o trabalho muito bem. Basta achar uma maneira de deixar o microfone preso na sua roupa.

Por não ter seguido esta dica antes, dezenas de palestras que dei se perderam. Não deixe que isso aconteça com você também.

Configurando a tela do apresentador

O Keynote permite configurar uma tela de apresentador. Use-a a seu favor. Coloque anotações que permitam lembrar números sobre pesquisas, nomes de pessoas, datas e/ou outros fatos curiosos que você possa esquecer.

Configure também o tempo restante para sua palestra, para que você possa controlar o tempo dedicado a cada slide. Vale lembrar que não existe um cálculo mágico de tempo por slide e isso depende muito mais de quanto detalhe você quer dedicar e, embora treinar sua palestra dê uma ideia de quanto tempo você precisa, às vezes esse tempo varia porque você decidiu improvisar no palco. Para ativar o modo do apresentador sem estar com um monitor externo, utilize o atalho command-shift-R.

Configure esta tela da maneira que você acha melhor. Eu gosto de dar destaques para notas, mas saber qual é o próximo slide ajuda bastante na hora de dar continuidade na narrativa de sua apresentação.

Se você pretende usar animações, acostume-se com as indicações que esta tela dá para saber quando a animação está em andamento e qual é a próxima animação.

Como falei sobre atalho de teclado, aqui vai uma dica para usuários de Mac: no Keynote, você pode pressionar / para ver um guia com os atalhos disponíveis.

Aprenda alguns deles, pois são extremamente úteis:

• X: alterna as telas de apresentador e apresentação.
• H: esconde o Keynote e abre o último programa em execução, ótimo para quem faz live coding.
• K: pausa/continua vídeo, ótimo para quem tem screencasts e quer explicar um pouco sobre algo que foi exibido antes de continuar.
• [ e ]: vai para o item de build anterior/seguinte do seu slide, sem executar animações ou transição de slides.
• shift+left e shift+right: vai para o slide anterior/seguinte sem executar animações ou transições. Note que cada dos builds será exibido sequencialmente, mas sem animações.

Um outro atalho muito útil do Mac é command-F1, que alterna entre o modo estendido de monitores e o modo espelho. Assim você não terá que ir até o Display Settings só para mudar esta opção.

Um lembrete muito importante: nem todas as conferências irão fornecer uma segunda tela de apresentador grande, como televisões no chão. Isso é especialmente verdade para eventos menores. Se você, por algum motivo precisar ler as notas de seus slides, aproxime-se de seu próprio notebook discretamente no slide anterior.

Outras coisas para ter em mente

Não faça apresentações sem estar conectado a uma fonte de energia. Mesmo que carga da bateria esteja completa, o uso de dois monitores consome mais energia e você pode acabar ficando na mão. Seria vergonhoso ter que parar sua apresentação para conectar o seu carregador.

Desabilite seu wi-fi. Principalmente se você estiver conectado em uma rede. Você pode receber notificações de redes sociais ou ter problemas de rede (colisão de endereço IP, por exemplo), onde um alerta pode tirar o foco da apresentação.

Desabilite o protetor de telas. Se for usar uma apresentação feita em HTML, lembre-se de desabilitar o protetor de telas. Isso normalmente não é um problema para quem usar programas como Keynote ou Powerpoint. De qualquer modo, você pode instalar programas como Should I Sleep ou Caffeine para garantir que seu notebook não irá ativar o protetor de telas.

Coloque seu telefone em modo avião. Para evitar distrações, é melhor simplesmente silenciar seu telefone. Assim, se alguém te ligar ou mencionar você em alguma rede social, não perderá o foco.

Chegou o grande dia

Finalmente chegou o grande dia. O nervosismo pode bater na porta e você acha que vai fazer uma palestra ruim. Primeiro, acalme-se (ou pelo menos tente). Todo mundo fica nervoso, até mesmo os palestrantes mais experientes. A única solução para isso é se preparar e… fazer mais palestras!

Palestre o máximo que você puder em grupos de usuários locais antes de palestrar em conferências maiores. Se a sua cidade não possui nenhum desses grupos, aproveite a oportunidade e comece um. Faça apresentações na sua empresa, pedindo sugestões. Apresente para ninguém, falando sozinho como se fosse louco. O importante é apresentar de algum modo, para sentir o que pode ser melhorado.

Treine diferentes tipos de entonação. Isso prenderá a atenção de quem estiver assistindo. Sua voz pode ser usada para ditar o ritmo de sua palestra. Falar mais rápido pode ser usado para trazer energia para algo que você acha que é empolgante. Pausas são ótimas para dar ênfase a algo que você acabou de falar. Falar mais devagar pode ser usado em momentos que você queira que as pessoas prestem mais atenção. Acima de tudo, não deixe o tom monótono ditar sua palesta.

Gerenciando o dano. Eventualmente, as palavras sairão de sua boca de um modo que não era sua intenção. Você vai, sem intenção, ofender pessoas. Você vai esquecer o que tinha para falar em um determinado… é, deu branco! Ou ainda, contar uma história longa e chata que só depois que começou a contar é que percebeu que era melhor não ter dito nada. Pois é, isso acontece.

A melhor maneira para lidar com essas situações é continuar sua apresentação, sem dar muito foco para essas coisas. Termine rapidamente o que você acha que não está funcionando, e continue sua apresentação. Se for algo muito ruim que merece retratações, faça isso depois que a palestra terminar em um blog post ou sua rede social favorita.

Finalizando

Palestrar e dar a cara a tapa não é para todo mundo. Se você quer palestrar, lembre-se que pessoas irão criticar você. Lembre-se que, eventualmente, você vai cometer algum deslize e vai falar besteira. Lembre-se que muitas pessoas estarão em seus notebooks/smartphones, mas não se sinta ofendido por isso. Lembre-se também que pessoas vidradas, sem se mexerem muito pode ser um sinal de que sua palestra está muito interessante, mesmo quando seu cérebro diz o contrário.

Tente manter a calma, não importa qual seja a reação do público. Se você acha que a reação das pessoas pode afetar a sua performance, olhe sempre em frente, acima das cabeças dos participantes sem se preocupar com o que você acha que eles estão pensando.

O nervosismo que você sente, é o mesmo para todos. A diferença é que com experiência, você conseguirá gerenciá-lo melhor. Com a experiência, seu nervosismo irá embora logo nos primeiros slides. Por isso palestrar mais vezes é importante.

Fazer uma palestra exige muito mais dedicação do que você pensa que é necessário, mas no fim, vale muito a pena. Parabéns por dar esse importantíssimo passo em sua carreira e na disseminação de conhecimento. Mas não é só isso.

Palestrar em conferências é uma excelente maneira de conhecer pessoas interessantes. Afinal, tem bastante gente para interagir dentre os organizadores, palestrantes e participantes da conferência. ​

Resources

• 10 Things I Wish I’d Known About Giving Good Tech Talks
• 7 Storytelling Techniques Used by the Most Inspiring TED Presenters
• 8 Classic storytelling techniques for engaging presentations
• Dicas de Mac para palestrantes
• How to give a good presentation
• How to give good live coding talks
• How To Give the Killer Tech Talk — A Pamphlet
• Lista de palestras sobre Storytelling do TED
• Presenting Lessons I’ve Learned
• Slide Design for Developers
• Speaking: Because “imagine everyone’s naked” is terrible advice
• The secret structure of great talks
• What They Don’t Tell You About Public Speaking
• Your live coding demo is boring

Depois de quase 9 anos, chegou a hora de dizer adeus ao Simples Ideias. Mas não se preocupe. O conteúdo continua o mesmo, apenas com um domínio diferente.

Há pouco mais de um ano comecei a escrever em inglês em http://nandovieira.com. Não demorou muito para que eu começasse a achar estranho ter dois domínios extremamente diferentes para conteúdos tão semelhantes. Então, como eu já tinha o domínio http://nandovieira.com.br disponível, foi só uma questão de preparar a migração.

Como fazer a migração dos domínios

O primeiro passo foi garantir que todas as URLs estavam sendo redirecionadas corretamente com o status 301. Isso foi bem fácil de fazer com NGINX.

server {
  listen 80;
  server_name www.simplesideias.com.br;
  return 301 http://nandovieira.com.br$request_uri;
}

server {
  listen 80;
  server_name simplesideias.com.br;
  return 301 http://nandovieira.com.br$request_uri;
}

Depois, fiz a migração dos comentários no Disqus. Como os redirecionamentos estavam corretos, utilizei a opção Redirect Crawler.

Finalmente, tive que fazer a migração da busca no Google Webmasters Tool. Após criar uma nova propriedade para o domínio nandovieira.com.br, foi necessário solicitar a mudança de endereço. No domínio original, escolha a opção Mudança de Endereço.

Depois, basta seguir cada um dos passos apresentados, para solicitar a migração. No meu caso, este processo ainda está em andamento.

Uma coisa interessante é que mesmo esse processo não tendo sido finalizado, não senti nenhum impacto no número de visitas, segundo o Google Analytics.

Finalizando

Era isso! Nenhuma alteração significativa para quem já acompanha o blog. O link do feed também está sendo redirecionado, então tudo deve continuar funcionando sem que você precise alterar nada.

Ah, nesse processo aproveitei e dei uma renovada no visual. Nada radical, mas achei que deu uma modernizada boa.