• mail@brunobrito.pt

Dicas

VS Code - Dicas, Extensões e Temas

As melhores dicas, temas e extensões para o VS Code

As melhores dicas, temas e extensões para o VS Code 1240 700 Bruno Brito

Se trabalhas com código com alguma frequência, provavelmente ja terás ouvido falar do Visual Studio Code – um editor de texto gratuito da Microsoft que surgiu há pouco tempo no mercado, mas que rapidamente se tornou numa aplicação indispensável para muitos programadores.

Quem me conhece, sabe que sou um enorme fã do SublimeText – um editor de texto apreciado não só pela sua velocidade, como pela quantidade de fantásticos atalhos de teclado e plugins disponíveis tanto para programação como para a escrita de artigos.

No entanto, tenho dado por mim a passar cada vez mais tempo no VS Code – tem alguns plugins (ou, como a Microsoft lhe chama, extensões) verdadeiramente indispensáveis, e uma enorme comunidade empenhada em transformar este editor de texto na melhor solução disponível.

Nesta viagem, tenho aprendido bastante sobre como personalizar e tirar o maior partido deste editor. É precisamente isso que vou partilhar hoje.

Vamos a isto!

Para quem vem do Sublime…

Se, como eu, estás demasiado habituado aos atalhos e ao look do SublimeText, sugiro que comeces por instalar o Sublime Keymap, uma extensão criada pela própria Microsoft que coloca os atalhos de teclado do VS Code idênticos aos do Sublime (estes são os meus atalhos preferidos, já agora).

Outros 2 bons companheiros que farão sentido instalar de imediato serão o Auto Close Tag e o Auto Rename Tag, porque de origem o VS Code não fecha as tags HTML que crias.

Se fores às definições do Code, vais encontrar uma coluna à direita onde podes inserir as tuas alterações às definições originais.

Aqui, recomendo fortemente que adiciones "editor.dragAndDrop": true para que possas seleccionar texto e depois movê-lo livremente com o rato e editor.multiCursorModifier": "ctrlCmd" para usares o mesmo atalho que o Sublime para inserir o cursor em várias posições diferentes e alterar tudo ao mesmo tempo.

Por fim, podes inserir "window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}" para ficares com o caminho completo do ficheiro na barra superior do programa.

Definições do VS Code

Extensões

Como trabalho sobretudo com frameworks JavaScript (como React), serão maioritariamente essas extensões que receberão destaque. Vamos conhecê-las!

#1: Live Server

Muito útil para rapidamente “disparares” um servidor que automaticamente refresca a página após cada save. Uma espécie de BrowserSync sem configurações complicadas, que podes activar a qualquer momento clicando no botão do rodapé do editor.

Live Server para VS Code

#2: Quokka

O Quokka é uma das melhores ferramentas para aprenderes (ou ensinares) JavaScript, porque para além de trazer um linter, corre o teu código à medida que o escreves, apresentando os resultados de imediato no editor.

Quokka para VS Code

A “Community edition” é gratuita e dá-te acesso às funcionalidades mais importantes. Se quiseres, podes adquirir a “Pro edition”, que instala packages de JavaScript por ti e importa outros ficheiros do teu projecto, entre outras funcionalidades.

A Pro Edition custa $100, mas podes experimentá-la sem restrições durante o tempo que quiseres – o único problema é que o teu editor terá ocasionalmente de ser reiniciado.

#3: Prettier

Disponível para praticamente qualquer editor (para além de VS Code, existe para Atom, Sublime, WebStorm, vim e Emacs), o Prettier formata o teu código, para assegurar consistência no estilo – de momento, já oferece suporte para JavaScript (incluindo JSON, JSX, TypeScript e FLow), CSS, GraphQL e até Markdown.

Prettier logo

Poderás ter de passar algum tempo a configurar as definições, mas a partir daí, não terás de pensar mais em formatação – o Prettier pode até actuar após cada save, melhorando a legibilidade do teu código de imediato!

#4: Bracket Pair Colorizer

Uma extensão muito útil se programas em linguagems com muitos parêntesis, como por exemplo JavaScript.

Com esta extensão instalada, cada parêntesis terá uma cor, o que facilita a tua vida na altura de perceber se está tudo devidamente fechado. Poupa algum tempo no despiste de problemas, acredita!

Aqui fica um exemplo meu, com código React.

Exemplo Bracket Pair Colorizer

E falando em React… vamos ao próximo!

#5: Reactjs code snippets

Se programas em React, saberás que é sempre preciso criar algum código repetitivo quando criamos um novo componente, por exemplo.

Este conjunto de snippets foi feito precisamente para te ajudar a ser mais produtivo. Existem vários plugins deste género, mas este foi o primeiro que usei, pelo que já me habituei aos seus triggers.

Por exemplo, ao escreveres rsc seguido da tecla TAB, eis o que acontece:

Independentemente da linguagem, deves sempre procurar um bom plugin de snippets para acelerar o teu workflow, ou criar tu próprio os teus.

#6: Import Cost

Uma extensão que te indica o custo de um import ou require em JavaScript. Assim, poderás reduzir o peso do teu bundle.

Import Cost para VS Code

O autor, que trabalha na Wix, explica as razões que o levaram a criar esta extensão neste artigo.

#7: Debugger for Chrome

Esta é uma das extensões mais populares, e por um bom motivo – quando devidamente configurado, poupa-te muitas refrescadelas no Chrome, visto que consegues ver toda a informação necessária no debugger presente no VS Code.

Chrome Debugger para VS Code

Se estiveres com dificuldades em configurar esta extensão, este tutorial poderá ajudar-te!

#8: Color Info

Esta extensão analisa as cores dos teus ficheiros CSS (ou Sass, ou LESS) e apresenta-te as cores nos seus vários formatos – seja hexadecimal, RGB, HSL ou CMYK. Bastante útil naquelas alturas em que tens de passar uma cor hexadecimal para RGB.

Color Info para VS Code

#9: Markdown All in One e Word Count

Para artigos, é uma óptima ideia aprender a escrever em Markdown. Com o Markdown All in One, fica ainda mais fácil formatares texto, graças a atalhos como CMD + B para colocar o texto a Negrito ou CMD + I para itálico.

A extensão oferece-te também a possibilidade de exportar ficheiros Markdown em HTML ou PDF, Live Preview para visualizares de imediato o aspecto final, e um formatador de tabelas.

Markdown All in One para VS Code

No campo do blogging, outra extensão que te dará jeito será o Word Count, que como o nome indica, conta o número de palavras do teu artigo.

#10: Text Pastry

Esta extensão é muito útil quando queres acrescentar um número crescente em cada linha seleccionada de uma multi-selecção.

Pode parecer trivial, mas é algo que utilizo todos os dias, na hora de enumerar algo durante o processo de escrita de um artigo. Podes até optar entre começar a lista no 0 ou no 1.

Aqui fica um exemplo:

#11: Polacode

O objetivo desta extensão é tirar fotos atrativas ao teu código, para que depois o possas partilhar (nas redes sociais, por exemplo).

Depois de correr o Polacode com o habitual comando CMD + SHIFT + P, podes seleccionar o texto que pretendes que fique na foto, redimensionar a imagem e finalmente gravar como PNG.

Este é um exemplo de resultado final:

Exemplo Polacode

Temas e Tipos de Letra

Se passas muito tempo no teu editor de texto, escolher um bom tema é fundamental. Vai ficar tudo muito mais agradável à vista, o que se pode traduzir em maior produtividade junto ao computador!

Os meus Temas preferidos VS Code

Vario o tema consoante a ocasião, mas sou fiel a estes 3. Vê lá se algum é do teu agrado:

  • Firewatch: o meu tema habitual, visto que adoro tons de laranja!
  • Nova: um tema mais suave, com tons pastel, que é bem “levezinho” para a vista.
  • Material Theme: provavelmente, o tema mais popular da actualidade. Aqui, utilizo sobretudo a variação de cor “Light” nas alturas em que preciso que o editor tenha o fundo branco (por estar, por exemplo, ligado ao projector). A variação “Palenight” também é bem apelativa!

Firewatch para VS Code

Os Tipos de Letra que utilizo

Há já vários meses que uso a font Victor Mono em todos os meus projetos. É gratuita, open-source, suporta ligaduras tipográficas (úteis para quem programa em JavaScript) e tem vários pesos disponíveis.

Antes de optar por este tipo de letra, utilizava outras que ainda hoje gosto bastante, como a CamingoCode e a Fira Code – ambas merecem a tua consideração.

Se quiseres utilizar esta última, para além de inserires "editor.fontFamily": "‘Fira Code’" nas definições, deves adicionar ainda outra linha: "editor.fontLigatures": true.

Fira Code em JavaScript

Conclusão

O VS Code ainda é jovem, mas já apresenta um enorme leque de possibilidades para programadores. Seja pela enorme oferta de extensões/temas ou por suportar tipos de letra com ligaduras, é já um editor robusto que merece forte consideração da tua parte.

Com o passar do tempo, a previsão é que fique um editor ainda mais completo – pelo caminho surgirão, certamente, ainda mais extensões e truques para conhecer.

Se entretanto tiveres alguma dica a acrescentar, manifesta-te nos comentários!

Os melhores Atalhos de Teclado para OSX

Os melhores Atalhos de Teclado para OSX

Os melhores Atalhos de Teclado para OSX 1240 700 Bruno Brito

Aqui fica a minha lista dos atalhos de teclado mais úteis que conheço para OSX.

À semelhança do que fiz recentemente com os meus comandos preferidos de terminal para OSX, tentarei actualizar este artigo sempre que encontrar novos truques que valem a pena divulgar.

Se gostas dos ganhos de produtividade que os atalhos de teclado te dão, não te esqueças de dar uma olhadela também neste artigo.

NOTA: a tecla OPTION equivale ao ALT.

Vamos a isto!

Gestão de Janelas

Comecemos com o básico dos básicos – aqueles atalhos indispensáveis para quem acabou de adquirir um Mac, e vem de Windows. Não te esqueças de consultar os atalhos universais que indico aqui, juntamente com estes 2:

  • CMD + H esconde a janela que está a ser utilizada (mas não a fecha);
  • CMD + Q encerra o programa que estás a usar.

Se quiseres fazer Force Quit numa aplicação que crashou, podes usar CMD + OPTION + ESC para aceder à lista de apps abertas.

Force Quit no OSX

Este é mais rebuscado: podes utilizar CMD + ` para trocar entre várias janelas abertas da mesma aplicação (muito útil para o Finder ou no browser).

Se quiseres maximizar uma janela sem ir para fullscreen, como acontece no Windows, podes premir o OPTION enquanto clicas no botão verde.

Se quiseres aprender um daqueles atalhos inúteis que pode impressionar os teus amigos, sabias que se premires SHIFT enquanto clicas no botão amarelo, minimizas a janela em “super slow motion”?

Com Texto

Utilizo o Sublime Text para tudo o que é texto (estes são os melhores atalhos para esse editor), mas estes são alguns atalhos que funcionarão em qualquer aplicação de texto:

  • CMD + ➡️ ou ⬅️ para ir rapidamente para o início ou fim da linha;
  • OPTION + ➡️ ou ⬅️ para ir rapidamente para o início ou fim da palavra;
  • CMD + BACKSPACE apagará a linha até à posição em que te encontras;
  • OPTION + BACKSPACE apagará a palavra até à posição em que te encontras;
  • SHIFT + CMD + OPTION + V colará o texto que tens no clipboard tirando-lhe toda a formatação, como cores ou tipo de letra;
  • CTRL + CMD + SPACE abre o painel para inserires Emojis.

Painel de Emojis do OSX

Capturas de Ecrã

O OSX é muito superior ao Windows no que toca a tirar screenshots sem precisares de software adicional. Certifica-te que memorizas estes atalhos!

  • CMD + SHIFT + 3 para capturar todo o ecrã;
  • CMD + SHIFT + 4 para capturar apenas uma área que defines;
  • CMD + SHIFT + 4 e depois SPACE se quiseres capturar uma das janelas que tens abertas.

Este último atalho inclui uma sombra bonita na aplicação, como aquela que vês nas imagens deste artigo, mas que podes tirar se premires OPTION enquanto clicas na janela.

Se não quiseres guardar num ficheiro, podes ainda carregar em CTRL juntamente com o atalho para a captura de ecrã, e a imagem ficará no clipboard em vez de ocupar espaço no teu disco.

No Browser

CMD + L para ir para a Barra de Endereços do browser;
CMD + Return para abrir o URL que acabaste de escrever numa nova tab;
CMD + SHIFT + T para restaurar a última tab que encerraste;
CMD + 1 (ou qualquer outro número) para “saltar” para a respectiva tab.

Extras

OPTION + CMD + SPACE abre uma janela do Finder.

CMD + OPTION + CTRL + 8 inverte as cores, assumindo que tens essa opção de acessibilidade activada. É uma espécie de “Dark Mode” que pode dar jeito para leres no browser à noite, por exemplo.

Para a activar, desde o Yosemite que é necessário ir até System Preferences > Keyboard > Shortcuts > Accessibility > Invert Colors.

Invert Colors como atalho de teclado

Por último, para além daqueles atalhos básicos de aumentar/reduzir o brilho ou o volume, há aqui um par de “truques” que vale a pena teres em conta:

OPTION + SHIFT enquanto primes o atalho respectivo permite-te alterar o brilho/volume/luz do teclado em menores quantidades.

Podes premir OPTION enquanto carregas numa tecla de som (Mute, Vol Up ou Vol Down) para aceder ao painel do Som das System Preferences.

Se fizeres o mesmo mas com uma tecla de brilho, irás para o painel de configuração dos Ecrãs.

E, por agora, é isto. Não te esqueças que podes aprender os atalhos de cada aplicação específica com a ajuda da app gratuita Cheatsheet.

Quais são os teus atalhos de teclado para OSX preferidos?

A lista dos melhores Comandos de Terminal para OSX

Os melhores Comandos de Terminal para OSX

Os melhores Comandos de Terminal para OSX 1240 700 Bruno Brito

Para utilizares o terminal, não tens que ser um daqueles nerds dos filmes de ficção científica ou do Michael Bay. E, se quiseres alterar algumas definições do OSX, esta será mesmo a melhor via.

Nos últimos dias, tenho compilado uma lista de comandos que utilizo com frequência, e tentarei actualizar este artigo à medida que encontrar mais.

Podes correr qualquer um destes comandos com a app Terminal que vem pré-instalada no OSX. Eu estou a utilizar o iTerm2 v3, que é grátis e traz alguns extras, mas funcionará exactamente da mesma forma.

Vamos a isto!

Actualizações do Sistema

Sempre que fazes uma actualização ao OSX pela App Store, tens de aguardar alguns minutos até que o sistema esteja pronto a ser novamente utilizado. No entanto, se utilizares estes comandos no terminal, podes continuar a trabalhar e só terás que fazer um restart – a actualização ocorre no background.

Começa por escrever softwareupdate -l para saberes as actualizações que estão disponíveis (está sincronizado com o que surgir na App Store).

Actualizações disponíveis via Terminal

Depois, sudo softwareupdate -i -a descarregará e instalará as actualizações encontradas.

É natural combinar vários comandos, recorrendo ao && – o 2º comando só corre se o 1º for completado com sucesso. Podes então solicitar, numa só linha, um restart automático após a instalação das actualizações, com sudo softwareupdate -ia && sudo reboot.

Se quiseres desligar a máquina em vez de um reboot, sudo poweroff em vez de sudo reboot.

Capturas de Ecrã

O OSX é fantástico para screenshots – raramente precisarás de software adicional. Ainda assim, existem algumas definições que poderás querer alterar:

  1. Queres alterar o endereço das imagens para ~/Desktop? defaults write com.apple.screencapture location ~/Desktop && \ killall SystemUIServer.

  2. As imagens são gravadas como PNG, mas podes alterar o formato – para BMP, GIF, JPG, JPEG, TIFF ou até PDF. Basta colocares a extensão correcta no final deste comando – defaults write com.apple.screencapture type -string "png".

  3. Queres tirar a sombra que surge nas screenshots que surgem quando usas a barra de espaços? defaults write com.apple.screencapture disable-shadow -bool true && \ killall SystemUIServer.

  4. Que tal gravar uma screenshot como JPG após 3 segundos, e abri-la no Preview? screencapture -T 3 -t jpg -P delayedpic.jpg.

Brincando com o Mac

O comando cal mostra o calendário do mês em que te encontras. Queres todos os meses do ano de 2018? cal 2018.

Calendário no Terminal

Podes pedir ao OSX que diga o que quiseres com o comando say. Podes alterar a voz do sistema indo às definições de Acessibilidade. Até podes gravar num ficheiro audio o que quiseres que ele diga, se tiveres o “guião” num ficheiro de texto – say -o audio.aiff -f FILENAME.txt!

Queres descarregar um ficheiro sem abrir o browser? Se souberes o endereço, basta acrescentares curl -O antes do URL.

Se a tua doca estiver a precisar de um restartkillall Dock.

Podes criar um pacote DMG de uma pasta com o comando hdiutil create -volname "Volume Name" -srcfolder /pasta/que/pretendas -ov diskimage.dmg.

Queres gerar uma palavra-passe segura de 20 caracteres e copiá-la para o clibpoard? O LastPass resolvia-te isso, mas este comando também: LC_ALL=C tr -dc "[:alpha:][:alnum:]" < /dev/urandom | head -c 20 | pbcopy.

Gestão de Energia

Queres saber há quanto tempo é que foi o teu último restart? Usa o uptime!

Uptime no Terminal

Queres que o Mac fique “acordado” durante 1 hora? Isso são 3600 segundos, portanto: caffeinate -u -t 3600.

Queres que o ecrã fique desligado após 15 minutos de inactividade? sudo pmset displaysleep 15.

Queres que o computador adormeça após 30 minutos de inactividade? sudo pmset sleep 30.

Velocidade da Repetição das Teclas

De origem, o OSX é algo lento no Key Repeat, e este nem sempre vem activado. Podes ligá-lo com defaults write -g ApplePressAndHoldEnabled -bool false e desligá-lo escrevendo true em vez de false.

O número deste comando vai impactar a velocidade do Key Repeatdefaults write -g KeyRepeat -int 2.

Para onde a seguir?

Se te sentes “em casa” quando estás no Terminal, talvez queiras investigar um pouco mais o que podes fazer por aqui.

Podes começar por este excelente curso gratuito do Wes Bos para aprender a navegar pelas directorias e manipular ficheiros.

Depois, instala o Homebrew, para poderes descarregar todo o tipo de apps mais tarde.

Aqui ficam algumas das minhas aplicações preferidas:

  1. Podes gravar vídeos do YouTube (ou só o audio) com facilidade recorrendo ao youtube-dl.

  2. Se trabalhas muito com WordPress, o WP-CLI vale muito a pena. O mesmo se pode dizer ao Google Font Installer, se quiseres instalar as fonts da Google na tua máquina.

  3. Se gostas de criar GIFs mas queres reduzir a dimensão do ficheiro final, experimenta o Gifify.

Existem centenas de apps disponíveis – esta lista talvez te ajude a encontrar algumas que sejam úteis para o teu caso.

Alguma que recomendes?

Melhores atalhos de teclado Sublime Text

Os melhores atalhos de teclado para o Sublime Text

Os melhores atalhos de teclado para o Sublime Text 620 350 Bruno Brito

Apesar da concorrência feroz de editores de texto como o Atom ou o Visual Studio Code, o Sublime Text ainda é o meu grande companheiro quando é altura de programar ou de escrever artigos.

Os motivos principais? O facto de ser tão leve, e as extensões que já tenho instaladas.

O Sublime, à semelhança dos outros editores que referi, é gratuito (a licença permite que o “experimentes” durante tempo ilimitado) e tem uma grande comunidade, que desenvolve um enorme conjunto de extensões e temas que o tornam tremendamente competitivo (estes são os meus packages preferidos para programar e escrever).

Apesar de ser uma ferramenta mais popular entre programadores, a verdade é que qualquer um pode ser muito mais produtivo com a ajuda de um bom editor de texto – se rediges e-mails com frequência, se fazes trabalhos para a escola, se és blogger ou se estás a escrever um livro, este artigo também é para ti.

Sou um grande fã de atalhos de teclado para ganhos de produtividade, e aqui tenciono mostrar-te como o Sublime te pode ser útil, partilhando contigo alguns dos meus atalhos de teclado preferidos.

Os atalhos aqui mencionados são para Mac, mas praticamente todos funcionarão também em Windows (por norma, basta alterar o CMD por CTRL). O Sublime tem alguns atalhos que diferem consoante o sistema operativo, mas não é o caso na maioria dos que listo aqui.

Aqui não vou falar dos atalhos “universais”, como CMD + N ou CMD + S, mas sim atalhos exclusivos do programa. Ainda são bastantes, portanto não te esqueças de ler também este artigo, que te pode ajudar a decorar novos atalhos de teclado com maior facilidade.

Podes também instalar a aplicação gratuita Cheatsheet para teres acesso rápido aos atalhos de teclado de qualquer aplicação do teu Mac.

CheatSheet para Mac

Vamos a eles!

Atalhos para selecções rápidas de texto

1. Para seleccionar várias repetições da mesma palavra: CMD + D

Se há atalho para dominar, é este. Quando premires estas teclas pela primeira vez, seleccionará a palavra em que te encontras. Depois, a cada nova combinação de teclas, seleccionarás mais uma instância do mesmo texto – e como o Sublime suporta selecções múltiplas, poderás depois alterar rapidamente uma palavra/frase, ou escrever algo à frente ou atrás, afectando todas.

Uma espécie de “Find & Replace”, mas mais imediato e só para as instâncias que quiseres.

Queres saltar uma palavra pelo caminho? Não há problema: basta premires CMD + K para ignorar a última selecção que fizeste e passar para a próxima.

2. Para seleccionar várias linhas: ALT + clique

Para este atalho vais precisar da ajuda do rato – uma das grandes características do Sublime, como pudeste ver na dica anterior, é a selecção múltipla. Com este atalho, podes seleccionar uma série de linhas ao mesmo tempo (e nem tem que ser necessariamente ao início), afectando depois todas.

Podes também realizar selecções múltiplas onde bem entenderes, recorrendo ao CMD + clique.

Por fim, se quiseres poupar a viagem ao rato, podes seleccionar várias linhas normalmente com a tecla SHIFT em conjunto com ou , e depois premir SHIFT + CMD + L para colocar um cursor de seleção no final de cada uma dessas linhas.

3. Para seleccionar uma linha inteira: CMD + L

Podes escrever um texto com várias linhas, mas enquanto não fizeres um parágrafo, o Sublime vai encará-lo como só uma linha – seleccioná-la por inteiro é facílimo.

Se for para apagar a linha, podes recorrer directamente ao CTRL + SHIFT + K.

4. Para seleccionar todo o conteúdo na mesma linha de indentação: CMD + SHIFT + J

Se programas, estarás habituado a indentar o teu código – este é um óptimo atalho para rapidamente seleccionares tudo o que estiver ao mesmo nível de indentação.

5. Para seleccionar todo o conteúdo dentro de uma tag: CMD + SHIFT + A

Este é também dirigido aos programadores: se queres rapidamente seleccionar todo o código HTML dentro de uma div, por exemplo, basta premir esta combinação de teclas.

Manipulação rápida de texto

1. Para cortar/copiar linhas inteiras: CMD + X / C

Aqui, não estou a falar do copy/paste habitual. Se não seleccionares nada e premires este atalho, o Sublime vai cortar ou copiar todo o conteúdo da linha para o teu clipboard. Parece insignificante, mas faz toda a diferença!

2. Para duplicar uma selecção de texto: SHIFT+CMD + D

Se a tua ideia com a dica anterior é a de duplicar texto, então mais vale este atalho. Muito útil para duplicar pedaços de código HTML, por exemplo.

3. Para envolver uma selecção de texto numa tag: CTRL + SHIFT + W

Quando estamos a programar, é frequente repararmos que faltou colocar uma tag HTML antes e depois de determinado pedaço de código – algo que deixa de ser um problema com este atalho, apesar de não o considerar o mais prático para as mãos.

Esta combinação de teclas vai encapsular tudo num <p> por predefinição.

4. Para passar uma linha de texto para cima: CTRL + CMD +

Este é um dos meus favoritos – podes facilmentar passar uma linha para cima ou para baixo recorrendo a este atalho, juntamente com o seu amigo CTRL + CMD + .

5. Para converter todo o texto para upper case (letras maiúsculas): CMD + K, CMD + U

Esta combinação de teclas, em sucessão, rapidamente passa uma selecção de texto para letras maísculas.

Se queres alterar tudo para lower case (letras minúsculas), podes usar o CMD + K, CMD + L em sucessão. Tens ainda outras opções se fores ao menu, a Edit > Convert Case.

Outros atalhos úteis do Sublime

1. Para navegares rapidamente entre os ficheiros: CMD + P

Um dos atalhos que usarás com maior frequência se estiveres a editar vários ficheiros em simultâneo – o atalho contempla não só os ficheiros já abertos, mas todos os que existam na pasta onde estiveres a trabalhar, se a tiveres arrastado para o Sublime.

Se pretendes aceder a opções do Sublime ou mesmo de algum package, o CMD + SHIFT + P é amigo.

2. Para apresentares ou ocultares a barra lateral: CMD + K, CMD + B

A barra lateral é muito útil, mas com o atalho de cima não a vais utilizar tanto e o espaço extra pode vir a dar jeito – esta combinação de teclas, em sucessão, exibe ou recolhe a barra lateral.

3. Para dividir a janela do Sublime em várias colunas: CMD + ALT + 1 / 2 / 3 / 4 ou 5

Se tiveres um monitor grande, ou simplesmente precisares de comparar 2 ficheiros lado a lado, este atalho divide o Sublime em 2, 3 ou 4 colunas – premindo a tecla 5 ficas com uma grelha.

Conclusão

Como vês, um bom editor de texto como o Sublime, quando bem dominado, pode ser muito útil para qualquer pessoa que escreve regularmente. E se algum atalho te está a faltar, podes ainda editar as Key Bindings do programa e personalizá-lo ao teu gosto.

Esqueci-me de algum? Qual é o teu atalho de teclado preferido do Sublime?

Como Conseguir Emprego em Marketing Digital

Como Conseguir Emprego em Marketing Digital

Como Conseguir Emprego em Marketing Digital 620 350 Bruno Brito

Uma das perguntas mais frequentes que recebo dos meus alunos de Marketing Digital, especialmente no 3º ano, é a inevitável questão sobre trabalho.

As notas na licenciatura foram boas, se calhar até já fizeram um ou outro estágio de verão, mas a pergunta persiste:

Como arranjo emprego em Marketing Digital?

Esta foi a principal motivação para escrever este artigo. Um texto mais virado para os recém-licenciados, é certo, mas que no fundo se pode aplicar a qualquer pessoa que procure um emprego em Marketing e, com o devido ajuste, qualquer pessoa que procure trabalho, ponto.

Naturalmente, não sou nenhum especialista em Recursos Humanos e no mundo dos empregos não há uma fórmula 100% eficaz, que agrade a todas as pessoas que estejam do outro lado.

Podes estabelecer 50 contactos com as dicas que refiro aqui e não obter nenhuma resposta, enquanto que outra pessoa pode enviar um e-mail de uma linha e obter feedback positivo.

Ainda assim, quero acreditar que estas palavras poderão ser úteis para ti e que a maior parte das pessoas responsáveis pelo recrutamento terão um pouco de bom senso e valorizarão quem merece!

NOTA: os conselhos aqui mencionados são para encontrares um emprego por conta de outrem. Se procuras algo por conta própria/freelancer, sugiro que leias este artigo.

O principal Objectivo

O principal Objectivo

Antes de irmos mais longe, convém entender qual o objectivo quando entregas um CV ou envias um e-mail.

O objectivo final é conseguires um emprego para trabalhares nessa empresa e ganhares dinheiro ao fim do mês, é certo, mas não é expectável que aconteça numa primeira interacção.

Assim sendo, o verdadeiro objectivo será só um: seres contactado para uma reunião. Um pé na porta, no fundo. A partir daí, já há algum investimento e já tens alguma margem de manobra.

As empresas recebem centenas de respostas a qualquer candidatura que colocam, mas aqueles que convidam para uma reunião (ou entrevista, se preferires) geralmente contam-se pelos dedos de uma mão. Não há simplesmente tempo (e provavelmente vontade) para conhecer toda a gente!

Se chegares a esta shortlist estás no bom caminho para o sucesso – deixas de competir com 400, para competir com 5 ou 10.

Assim sendo, é aqui que terás de aplicar a maior parte do teu esforço, certo?

Vamos lá então começar pelo fundamental para maximizar as tuas hipóteses.

Como Como Conseguir Emprego - #1: O Básico

#1: Os Básicos

Aqui vou falar daquilo que é comum constar numa primeira abordagem. O curriculum vitae, a carta de apresentação, esse tipo de elementos.

Se queres mesmo um trabalho naquele sítio, provavelmente não te deves ficar por aqui… mas é o que a maior parte das empresas está à espera (muitos até o exigem) e terás que falar a língua deles.

Mas antes de falarmos nisso tudo, vamos virar-nos para a oferta de trabalho em si – assumindo que não estás a pensar numa candidatura espontânea, claro está.

A Oferta de Trabalho

Andavas a fazer a tua ronda pelos sites de empregos do costume e encontraste algo que te interessou particularmente – ou um amigo enviou-te e disse “tem a tua cara”, e tinha razão.

A Oferta de Trabalho

É tempo de agir: mas antes de enviares aquele e-mail automático que já tens em rascunho com o CV anexado, perde algum tempo a ler a oferta devidamente e responde a estas questões:

  • cumpro todos os requisitos?
  • consigo entender como posso ser uma mais-valia para a empresa?
  • fiquei com alguma dúvida depois de ler a oferta?

Em Portugal há o triste hábito de se pedir “o mundo” a um recém-licenciado (experiência profissional prévia, x anos de conhecimento em y, carta e carro), quando muitas vezes não é necessário metade.

Se for um anúncio desses, terás de jogar com o teu bom senso e entender se cumpres o essencial para, pelo menos, tentares a tua sorte.

É verdade que verás com muito melhores olhos uma candidatura redigida com bom-senso, mas se não for o caso, é importante que sigas em frente na mesma, se te sentires à altura.

Vamos então tratar da resposta. Agora sim, podes abrir o Gmail.

O E-mail de Apresentação

Na maior parte dos casos, esta vai ser a primeira mensagem tua que a empresa vai ler. Estás a sentir a pressão?

O Gmail tem uma funcionalidade engraçada que são as Canned Responses – textos que ficam gravados para poderes voltar a usar mais tarde.

São muito úteis para aquelas mensagens genéricas de serviço ao cliente, por exemplo, mas SER GENÉRICO NÃO É O QUE QUERES AQUI.

Sobressai!

Lembras-te dos requisitos da oferta de trabalho, que cuidadosamente leste no passo anterior? São pistas.

Quando estás com os teus amigos da bola, falas de futebol, certo? Então aqui vais falar o idioma deles, e enviar um e-mail a explicar porque é que é cumpres o ponto x, y e z.

Se cada oferta de trabalho é diferente, a tua candidatura também deverá ser diferente.

Adaptar o produto ao consumidor, não é isso? Vá, não sejas preguiçoso. Queres isto ou não?

Pontos extra se fizeres alguma research e utilizares o mesmo tom da empresa – se é um grupo jovem e informal, não tens de começar o e-mail com “Exmo. Senhor” – mas sê sensato e não te ofereças já para lhes pagares um copo no Bairro, pelo menos para já.

Desta forma, vais mostrar que leste a oferta, que sabes perfeitamente ao que te estás a candidatar e que consegues traduzir o teu know-how para os bullet-points que eles procuram – assim, fica a papinha toda feita.

Assumindo que o teu e-mail cumpriu o seu propósito, as pessoas responsáveis pelo recrutamento abrirão os anexos – o que nos leva para o passo seguinte.

BTW, podes sempre saber se o teu e-mail já foi aberto, recorrendo a uma app como o MailTrack.

A Carta de Apresentação

Este passo é opcional, a não ser que na candidatura te peçam para redigir uma. Podes sempre inserir alguns destes tópicos no e-mail de apresentação e saltar este passo.

Aqui, novamente, o meu conselho passa por não utilizares a mesma carta para todos os empregos.

Ao redigir esta carta, considera os seguintes pontos:

  • Trabalho de Casa: investiga um pouco (vê as redes sociais, por exemplo) e analisa a cultura da empresa e tom utilizado;
  • Apresenta-te: explica o “porquê” de estares a concorrer e o que aprecias na empresa em questão;
  • Mostra o teu valor: explica de que forma serás útil à empresa (não procures ser humilde desnecessariamente, afinal de contas tens que te vender nesta fase)
  • Cria um Call to Action: fornece os teus contactos e tenta fechar uma reunião. É o teu objectivo, lembras-te?

Agora sim, vamos para o mítico CV.

O Currículo (ou Curriculum Vitae)

Este é, habitualmente, o elemento que se atribui mais importância, para o bem ou para o mal.

A minha opinião sobre um bom CV será diferente da tua e provavelmente, da pessoa que te vai contratar. O meu conselho será mostrares o teu currículo a várias pessoas, de diferentes idades e backgrounds, e encontrar algo que reúne algum consenso.

Outra questão vai para o design – pessoalmente, odeio o “formato Europeu” (ou Europass) e infelizmente é necessário para algumas ofertas. Mas enquanto profissionais de Marketing, sinto que nos devemos diferenciar em tudo – e, claro, o aspecto do CV é algo que a meu ver deve saltar à vista.

Se tens jeitinho com Photoshop/Illustrator, ou conheces alguém que tenha, elabora algo fácil de ler, com um tipo de letra agradável, e um esquema de cores à maneira.

Sim, eu sei que não és designer, mas se recebesses 100 CVs a preto e branco a dizerem essencialmente todos o mesmo e te aparecesse isto lá pelo meio, qual é que preferias ler primeiro?

CV Behance

Existem dezenas de templates gratuitos por aí e podes sempre ir ao Pinterest, ao Dribbble ou ao Behance buscar inspiração. Certifica-te é que não ficas com um PDF de 10 MB, porque algumas caixas de correio não vão gostar.

Relativamente ao conteúdo, o que deve constar provavelmente já sabes, mas só para estarmos alinhados:

  • Informação Pessoal: nome, e-mail, telefone, foto de perfil;
  • Sumário (e destaques na carreira): resumo de competências e experiência;
  • Formação: curso, estabelecimento, duração e competências adquiridas;
  • Experiência profissional: título do cargo, empresa, tempo, descrição;
  • Competências Especiais: TUDO o que possa ser uma mais-valia.

Se conseguires quantificar as experiências, melhor. Ou seja, algo deste género

No estágio de 3 meses no Banco Z, fiz mais de 400 telefonemas a clientes a apresentar novos produtos e encaminhei mais de 50 clientes por dia das filas da caixa para os canais diretos, onde ensinava a usar o Serviço X e o Serviço Y.

Organizei cerca de 30 processos de pedidos de crédito e propus uma metodologia que permitia poupar 20% de tempo na organização dos processos.

Números passam sempre melhor a mensagem e mostram que és orientado para resultados. Usa-os sempre que possível.

De seguida, já sabes o que vou dizer – não deves utilizar o mesmo currículo para todas as ofertas.

Se cada empresa procura competências e experiências diferentes, tu deves pensar no que já fizeste na tua vida e adaptar-te à candidatura.

Se já acumulaste bastantes experiências profissionais, não despejes todas. Pensa naquelas que realmente fazem sentido para a oferta – é melhor um CV curto e fácil de ler, do que algo épico com 4 páginas, onde 3 são irrelevantes.

Se não tens experiência profissional na área, não desanimes. Se pensares um pouco, certamente encontrarás algo que possa ter um paralelismo com o que procuram.

Transferable Skills

Pensa nas transferable skills – competências que poderás transferir de um emprego para outro, como a capacidade de liderança, resiliência, autonomia ou proactividade. São palavras algo cliché, é verdade, mas toda a tua experiência passada acumulou pontos nestes tópicos e deves aproveitá-la como tal.

Se calhar foste Delegado de Turma, Presidente da Associação de Estudantes ou estudaste piano durante 10 anos. Aprendeste algo relevante pelo caminho, portanto não sejas tímido e conta a tua história no CV!

O Telefonema de follow-up

Enviaste o e-mail, verificaste que foi lido mas não recebeste feedback. No news are bad news, pensas tu.

É aqui que o telefonema de follow-up te pode dar jeito. Basta ligares para o número da sede, pedir para falar com a responsável dos Recursos Humanos (muitas vezes a Oferta de Trabalho até tem o nome da responsável) e perguntar, cordialmente, se teve oportunidade de ver a tua candidatura à posição x.

Vais ficar admirado com o número de vezes em que a resposta é algo deste género:

Ainda não começámos o processo, está atrasado porque a minha superior está de férias, mas já agora dê-me o seu nome para garantir que o recebi.

Ou seja, para além de ficares com a resposta e acalmares a tua curiosidade, ganhas um bilhete para passar para a frente da fila na Loja do Cidadão. Nada mau!

Por norma, é boa ideia pensares neste telefonema se durante 4–5 dias não tiveres novidades da empresa.

Como Como Conseguir Emprego - #2: A tua Marca Pessoal

#2: A tua Marca Pessoal

OK, até aqui falámos de coisas que se podem aplicar a praticamente qualquer indústria ou cargo de trabalho. É tempo de passarmos aos detalhes – afinal de contas, somos de Marketing Digital!

Mostra que Dominas

E aqui estou a falar de Marketing de Conteúdos, do qual como deves saber, sou grande fã.

Imagina que estás à procura de uma nutricionista. Recebes 2 respostas: ambas dizem que são profissionais da área há 5 anos, mas uma tem um blog.

Passas por lá e vês que a pessoa está atenta às notícias da indústria, que partilha os seus conhecimentos com os seus leitores e que gosta verdadeiramente do que faz. Qual é que te deixa mais confiante?

A outra profissional podia ser igualmente competente – mas esta mostrou-te que domina.

Se adoras SEO, Redes Sociais ou E-mail Marketing, prova-o! Sim, escrever dá trabalho – mas estás a contribuir para a comunidade, a aumentar a tua awareness e a mostrar que és uma boa aposta para qualquer empresa.

Os benefícios são claramente superiores aos custos.

Como criar um blog no DigitalOcean

Escrevi este guia sobre como podes criar um blog, mas podes começar por algo tão simples como escrever artigos no Medium, no LinkedIn Pulse ou até no Blogger.

Gere a tua reputação online

Hoje em dia, uma boa parte de nós partilha a sua vida nas redes sociais e muita gente dos RH faz um pequeno background check para recolher mais informação sobre um candidato.

Talvez seja boa ideia pesquisares pelo teu nome no Google e ver o teu perfil nas várias redes sociais em modo incognito (ou navegação anónima) e confirmar que não aparece “aquela” noite que tiveste com os teus amigos, ou aquela publicação sobre política algo controversa.

Bruno Brito no Google

A partir do momento em que estás em candidaturas, recomendo fortemente que reflictas antes de “desabafar” no Facebook. Também será boa ideia reveres os teus últimos conteúdos.

Não tens de passar a ser uma pessoa super-aborrecida nas redes, nem mudar de identidade de um dia para o outro, apenas garantir que não tens algo demasiado polémico que comprometa a tua contratação – a não ser que essa polémica faça parte da tua estratégia.

Se quiseres utilizar as redes sociais para partilhares artigos que mostram que andas atento às novidades, podes sempre seguir os meus 10 Mandamentos de Social Media.

Não largues os teus hobbies

Mesmo que não tenham nada a ver com Marketing, será boa ideia continuares com os teus hobbies.

Posso-te dar o meu exemplo pessoal: sou praticante de Wrestling há imensos anos, e professor na academia do WrestlingPortugal há 9. É algo que adoro e que tenho muito orgulho em pertencer.

Para além de ter mostrado algumas das já referidas transferable skills, como a capacidade de liderar um grupo, a disciplina que esta prática confere e a persistência/resiliência depois de todos estes anos, é um tópico que é SEMPRE abordado nas entrevistas – e que sempre me favoreceu face aos restantes.

Para além disso, este hobby permite-me conhecer todos os anos pessoas interessantes, praticantes ou não, que de outra forma nunca se cruzariam comigo. E isso traz-me para o tópico seguinte.

O Networking

Existem dezenas de fóruns, grupos do Facebook, conferências de Marketing Digital como o ClickSummit (da qual já fiz parte) e meetups de Marketing Digital um pouco por todo o país (não acreditas? Procura aqui).

Meetup - Marketing

Não há melhor forma de melhorares as tuas competências do que falares com outras pessoas que partilham a mesma paixão que tu – ficarás a conhecer novas formas de fazeres as coisas e entrarás num círculo que te deixará mais atento às mudanças na indústria. E, se mostrares que tens conhecimentos, é normal que te convidem para integrar em projectos pelo caminho.

Como Conseguir Emprego - #3: A Milha Extra"

#3: A “Milha Extra”

Pensavas que já tinha acabado? Se leste este artigo até aqui, sinto que já estarás em boa posição para qualquer oferta de emprego que surja.

No entanto, ainda tenho mais umas palavras para ti.

Este último tópico é aquele que separa os bons dos muito bons. Aqueles que “até queriam o emprego” daqueles que não vão parar até conseguirem aquela cobiçada posição, naquela empresa específica.

Vou contar-te um segredo. Sabes, a malta do Marketing está mal habituada. Na nossa indústria, não é normal termos entrevistas técnicas (como os programadores), nem termos de apresentar portefólio, como por exemplo os designers.

Aparecemos na reunião, contamos a nossa história, dizemos que passámos 1 ano aqui e outros 2 ali e ficamos à espera que o telefone toque. E, muitas vezes, é suficiente.

Mas podes andar “a milha extra”. Ir mais longe do que é esperado. Porque se fores mais longe que os outros, tens melhores hipóteses, certo?

Eis uma história directamente do meu baú. Quando tinha 19 anos, fiz o meu primeiro CV, imprimi-o e coloquei-o dentro de uma garrafa de vidro de Coca-Cola. Tinha terminado o 1º ano de Publicidade e Marketing, e queria começar a trabalhar. Foi um bocado como esta imagem, mas muito menos épico.

Mensagem numa Garrafa

Na altura já adorava computadores e então dirigi-me a uma loja conhecida, para entregar essa garrafa pessoalmente. “Para darem ao chefe”, disse eu.

O telefone tocou nessa mesma tarde. O chefe quis-me conhecer, porque não estava habituado a este tipo de abordagens. Disse-me logo que provavelmente não iria ficar com o trabalho, porque queriam alguém com experiência de vendas e de caixa, mas queria pelo menos conhecer-me para me recomendar ao escritório do Marketing da empresa, para quando surgisse uma vaga. O tal pé na porta.

No mundo digital, há muitas maneiras de realizares este esforço adicional. Quanto melhor conseguires provar que trarás resultados (e dinheiro) à empresa, melhor.

Com esse raciocínio em mente, aqui ficam algumas sugestões. Se, para a marca em questão, queres…

  • Gerir a presença nas redes sociais, cria uma página de fãs desse tópico e mostra que sabes escrever, que gostas de gerir comentários e que consegues ter conteúdo infinito sobre esse tema.
  • Fazer e-mail marketing, cria uma conta no Mailchimp e elabora alguns exemplos de auto-responders, de comunicados a anunciar novos produtos, ou newsletters de content curation.
  • Gerir o blog, cria tu próprio um pequeno blog que fale sobre essa indústria e mostra que te interessas sobre essa indústria e tens algo a dar à comunidade.
  • Tratar de todo o SEO, faz um pequeno relatório em que analisas o site e mostras as várias oportunidades perdidas da empresa.

Percebes a ideia? O objectivo é ir mais longe que toda a concorrência. Se isto não fizer barulho no escritório, nada fará e, sinceramente, também não te merecem.

Considerações finais

Neste artigo tentei evitar aquilo que considero “o óbvio”. Pontos como estes:

  • Chegar a horas à reunião (e com boa aparência);
  • Utilizar o corrector ortográfico em todos os e-mails, cartas e CVs elaborados;
  • Cumprimentar toda a gente da sala, decorar os nomes e esperar que nos digam que nos podemos sentar.

Acima de tudo, lembra-te que vale a pena investir algumas horas na elaboração da tua candidatura, se é algo que realmente ambicionas – se fores só mais um, serás um candidato a mais!

Força nisso e boa sorte!

Como aceder às Base de Dados criadas no ServerPilot

Como aceder às Bases de Dados criadas no ServerPilot

Como aceder às Bases de Dados criadas no ServerPilot 620 350 Bruno Brito

Se tens uma conta no DigitalOcean e utilizas o excelente ServerPilot para gerir vários blogs WordPress, certamente já te terás questionado se será possível aceder às respectivas Base de Dados.

Este acesso é importantíssimo, não só para fazer back-up do nosso conteúdo como para criar novas tabelas ou retirar qualquer informação necessária se subitamente perdermos o acesso ao back-office do WordPress.

A ferramenta de gestão de base de dados mais habitual para este tipo de casos costuma ser o phpMyAdmin, que não é de todo instalada quando associamos o ServerPilot ao nosso droplet DigitalOcean.

Para quem vem de outros serviços de alojamento, como era o meu caso, isto pode causar alguma surpresa por se tratar de uma ferramenta tão popular.

Assim sendo, entrei em contacto com eles via Twitter e eis que me foi apresentada, em alternativa, uma aplicação que desconhecia: Adminer.

No passado, o Adminer até já tinha sido chamado phpMinAdmin, por se tratar de uma versão minimalista do já mencionado phpMyAdmin.

Mas esse minimalismo não é sinónimo de inferioridade.

Com um só ficheiro PHP, o Adminer permite-nos fazer muito mais do que conseguimos com o phpMyAdmin, como podemos confirmar neste comparativo. E para além de MySQL, também podes aceder a bases de dados PostgreSQL, SQLite, MS SQL, Oracle, Firebird, SimpleDB, Elasticsearch ou MongoDB.

Como se não bastasse, o Adminer conta também com um bom leque de plugins para acrescentar funcionalidades.

Instalando o Adminer

A instalação é simples, bastando para tal acesso ao FTP do nosso droplet DigitalOcean.

Basta descarregarmos a versão mais recente do site oficial e fazer upload para dentro da pasta public da nossa app, alterando o nome do ficheiro de adminer-4.2.5.php para algo mais aleatório como adminer-A52GA3D6.php.

Download Adminer

Agora, para acederes ao painel de controlo basta acederes a http://oteusite.com/adminer-A52GA3D6.php e inserires os dados de login e password da tua app (podes consultar os mesmos no ServerPilot – não te esqueças de actualizar o wp-config.php da tua app se alterares a palavra-passe!).

O servidor deverá ser sempre localhost.

Adicionando um tema

Podes alterar o look do Adminer adicionando um ficheiro CSS à mesma pasta onde colocaste o ficheiro adminer-A52GA3D6.php. Existem bastantes à escolha na página oficial – eu gosto particularmente deste.

Adminer com theme

Adicionando uma nova bases de dados

Se quiseres adicionar uma base de dados (para instalares outra aplicação PHP no teu droplet, por exemplo) é importante teres em conta que isto deve ser feito no próprio ServerPilot e não no Adminer.

Basta fazeres login, ires até uma das tuas apps, clicares no botão “Create Database” e preencher os campos respectivos!

Adicionar base de dados no ServerPilot

Como vês, o Adminer é muito poderoso, tornando-se num óptimo companheiro para a combinação DigitalOcean + ServerPilot!

Toca a instalar apps e “fazer coisas”!

Como criar um certificado SSL

Como passar para HTTPS – blog WordPress com DigitalOcean (e ServerPilot)

Como passar para HTTPS – blog WordPress com DigitalOcean (e ServerPilot) 620 350 Bruno Brito

Se procuras instalar um certificado SSL (ou Secure Sockets Layer) no teu blog WordPress alojado no DigitalOcean, este tutorial é para ti.

(Se quiseres saber como instalar um blog WordPress no DigitalOcean, podes seguir este tutorial).

Os certificados SSL têm sido alvo de bastante conversa ultimamente; para além de conferirem credibilidade a um site (especialmente se se tratar de uma loja online ou de uma webapp), apresentando o habitual cadeado ao lado da barra de endereços do browser, é também (desde 2014) um sinal de ranking para o Google – o que significa que para além da segurança acrescida, até por motivos de SEO é boa ideia adquirir um.

Os obstáculos para um certificado SSL

Até há bem pouco tempo, existiam no entanto dois problemas:

  1. adquirir um certificado SSL custava dinheiro;
  2. a sua instalação era um processo relativamente complexo.

O Let’s Encrypt, um serviço criado pelo Internet Security Research Group (ISRG), veio resolver o 1º problema.

Este projecto saíu da beta este ano e é, neste momento, a melhor opção gratuita para criar certificados SSL, tendo registado enorme adopção nos primeiros meses de existência, contando já com mais de 2 milhões de certificados emitidos.

Logotipo Let’s Encrypt

Resta-nos a 2ª questão – o processo de instalação. Existem inúmeros guias pela web fora, como este, que são interessantes se quisermos entender melhor os passos necessários para a emissão de um certificado.

Não é um processo muito complicado para quem tem alguma confiança na linha de comando, mas como temos de repetir este processo de 3 em 3 meses para renovar o certificado, o melhor será mesmo recorrer a um script – felizmente, também já alguém tratou disso.

Assim, o tutorial que se segue tem em conta este excelente script criado por Rudy Affandi – não só serão menos passos como só terás que fazer isto uma vez – e sim, também funciona para vários blogs na mesma conta DigitalOcean!

Requisitos para este tutorial

Antes de começar, vamos então recordar os requisitos:

NOTA: outras versões do Ubuntu poderão funcionar, mas estas são aquelas que testei. O autor do script também já referiu que pode não ser compatível com o Ubuntu 16.04.

Logotipos ServerPilot, DigitalOcean e WordPress

Para este guia, adquiri um domínio barato para testes (testesdobrito.xyz), que servirá como exemplo daqui em diante.

Vamos começar!

#1: Acesso via SSH

O primeiro passo será aceder à máquina do DigitalOcean via SSH. Como estou num Mac, gosto de utilizar o iTerm, que é grátis. Em Windows, o Powershell não é mau mas prefiro o Git Bash, simplesmente por ter uma shell que me é mais familiar.

Seja em que programa for, deverás aceder à máquina digitando ssh root@xxx.xx.xx.xxx trocando os “x” pelo IP da tua máquina DigitalOcean. De seguida, deves inserir a password da conta root, que deverás ter recebido por e-mail quando criaste o droplet no DigitalOcean.

Acesso SSH DigitalOcean

Agora que o login está efectuado, estás ligado remotamente e tudo o que fizeres será nesse computador.

#2: Instalação do script

De seguida vamos descarregar o script que referi em cima e torná-lo executável. O mesmo deve ficar instalado na pasta /usr/local/bin.

Para tal, estes são os comandos a inserir:

  1. cd /usr/local/bin para navegar até essa directoria;
  2. wget https://raw.githubusercontent.com/lesaff/serverpilot-letsencrypt/master/sple.sh para descarregar o ficheiro do script directamente do Github;
  3. sudo chmod +x /usr/local/bin/sple.sh para o tornar executável.

Comandos para descarregar script do Github

#3: Emissão do Certificado Let’s Encrypt

Chegou a altura em que devemos arrancar o script para instalar o certificado Let’s Encrypt no nosso blog. Para tal, basta escrever sudo sple.sh, confirmar que o queremos instalar (digitando Y) e inserir o nome da app do nosso blog, que deverá ser o mesmo do ServerPilot.

Dados da app no ServerPilot

Por fim, inserimos o(s) domínio(s) respectivo(s). Para concluir o processo, após um par de minutos terás de inserir o teu e-mail e concordar com a licença.

Execução do script HTTPS

Passados alguns segundos, deverás ler a seguinte mensagem de sucesso:

Your Let's Encrypt SSL certificate has been installed. Please update your .htaccess to force HTTPS on your app
Cheers!

Está feito! Vamos só então forçar o HTTPS, conforme sugerido, porque neste momento estás a apresentar ambas as versões do site.

#4: Forçar o HTTPS (redireccionar de HTTP para HTTPS)

Agora que tens uma versão HTTPS do site, deverás forçar o redireccionamento, para que quem não digite https:// seja automaticamente transportado para a versão segura.

Para tal, deverás ir à raíz da tua aplicação WordPress (que será em /srv/users/serverpilot/apps/xxx/public, trocando o xxx pelo nome da tua app) e criar (ou modificar) um ficheiro intitulado .htaccess (atenção ao .) – podes realizar este passo através de um programa de FTP como o Filezilla ou através do terminal, como preferires.

Nesse ficheiro, deves colocar o seguinte pedaço de código logo no início:

RewriteCond %{HTTP:X-Forwarded-Proto} !=https
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=302,L]

E pronto! Agora, se digitares http://oteusite.com deverás ser automaticamente levado para https://oteusite.com.

Redireccionamento HTTPS

Está feito! Em princípio deverá ficar tudo OK. Se não for o caso, sugiro que comeces por instalar o plugin SSL Insecure Content, porque ainda podem existir alguns redireccionamentos em falta.

Se tiveres uma CDN como a Amazon Cloudfront, é possível que tenhas de realizar mais algum trabalho de investigação – este blog, por exemplo, utiliza CloudFront e ainda não consegui que funcionasse a 100% com HTTPS.

Conclusão

Como vês, criar um certificado HTTPS para um blog WordPress não tem que ser dispendioso ou complicado – e graças a este script, não terás que repetir estes passos de 3 em 3 meses!

Estes serviços estão cada vez melhores!

Como alojar um site estático na Amazon S3

Como alojar um site estático na Amazon S3

Como alojar um site estático na Amazon S3 620 350 Bruno Brito

Esta semana desenvolvi um pequeno site estático (baseado apenas em HTML/CSS/Javascript) e, na altura de o publicar, optei por alojá-lo no popular Amazon Simple Storage Service (S3).

As razões para tal são simples: neste serviço da Amazon, só pagas o que efectivamente gastas, a nível de tráfego – e o valor por GB transferido? $0.03!

Mesmo com outros serviços de alojamento competitivos, dificilmente encontrarás melhor negócio do que este, especialmente se se tratar de um site estático leve, como era o caso.

Para além disso, se fores novo a utilizar os Amazon Web Services, ainda poderás desfrutar de um plano gratuito durante 12 meses, que te permitirá ficar a conhecer as poderosas ferramentas disponíveis.

Mas se chegaste até aqui, provavelmente já sabes que este é o serviço certo para ti – falta só saber como o configurar, certo?

Vamos a isto!

NOTA: Os primeiros passos já foram referidos noutro tutorial, que se encontra neste link. Ainda assim, vou-te poupar um clique e descrevê-los novamente aqui.

Passo #1: Criar um bucket com o nome do domínio que pretendes

Depois de fazeres o registo/login na AWS, é tempo de escolher o serviço S3, que encontrarás em Storage & Content Delivery.

Amazon S3 da Amazon Web Services

Uma vez dentro do S3, deverás criar um bucket, que é no fundo a “pasta” onde colocarás todos os ficheiros do teu site.

Este é um ecrã importantíssimo, por um simples motivo: o nome do bucket deve ser igual ao domínio que pretendes utilizar. Portanto se queres que o teu site seja www.omeusite.pt, o teu bucket deve-se chamar www.omeusite.pt.

Relativamente à região, se o teu site é essencialmente para Portugal, deverás escolher Irlanda ou Frankfurt, para que a proximidade (e consequentemente a velocidade de acesso) seja maior.

Se se tratar de um site internacional, pensa nos teus visitantes e não propriamente onde estás localizado (o preço do serviço é sensivelmente diferente, dependendo da região que escolheres).

Amazon S3 - Create a Bucket

Podes ignorar o botão Set Up Logging e avançar.

Passo #2: Alterar as permissões

Agora que já criaste o teu bucket, deves seleccioná-lo e clicar em Actions/Properties.

Amazon S3 - Bucket Properties

Em Permissions, deves clicar em Edit bucket policy e inserir este excerto:

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "AddPerm",
			"Effect": "Allow",
			"Principal": "*",
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::examplebucket/*"
		}
	]
}

Alterando depois examplebucket para o nome do teu próprio bucket (o tal www.omeusite.pt, seguindo o exemplo de cima).

Em Static Website Hosting, deves clicar em Enable website hosting e definir como index document o habitual index.html.

Amazon S3 - Static Website Hosting

Agora, se clicares no link que está em Endpoint (que deverá ser algo como www.omeusite.pt.s3-website-eu-west–1.amazonaws.com) verás que o teu site já está live!

O tutorial poderia terminar aqui, mas vamos associar o nosso domínio a este alojamento.

Passo #3: Associar um domínio à Amazon S3

Os próximos passos terão em conta o serviço Cloudflare, um serviço fantástico e na sua grande maioria gratuito que, na minha opinião, todos os sites deveriam considerar.

Entre muitas outras coisas, como velocidade ou segurança, o Cloudflare permite-te configurar todos os domínios num só local – tornando-se muito mais prático na altura de migrações do que teres de aceder a cada domain registrar para alterar os nameservers do teu site.

Assim sendo, o primeiro passo depois do registo/login será ir a Add Site. Aqui, deves inserir o teu domínio, como omeusite.pt.

Cloudflare - Add a Website

O Cloudflare fará o seu trabalho e depois de terminar o scan, indicará novos nameservers para colocares no teu domínio. Aqui, deves ir ao site da empresa onde adquiriste o domínio e alterar os nameservers para aqueles indicados pelo Cloudflare.

Cloudflare - Nameservers

Deverão ser algo deste género (atenção ao “.” no final):

  • matt.ns.cloudflare.com.
  • lola.ns.cloudflare.com.

NOTA: se tiveres adquirido um domínio .PT e o mesmo estiver no estado TECH-PRO, em vez de ACTIVE, não conseguirás utilizar o Cloudflare de imediato. Primeiro, terás que o associar a outro alojamento, para que o estado altere para ACTIVE, e só aí poderás colocar os nameservers do Cloudflare.

É possível que esta alteração leve algum tempo até ficar finalizada – podes ir confirmando no teu terminal, se escreveres whois omeusite.pt e procurando por Nameserver Information.

Agora que já tens o domínio associado ao Cloudflare, falta a outra parte da equação: ligar o Cloudflare ao Amazon S3.

No painel de controlo do Cloudflare, deverás ir a DNS e criar um CNAME onde o Name deverá ser www e o Domain Name o tal endereço que viste anteriormente do teu site, similar a www.omeusite.pt.s3-website-eu-west–1.amazonaws.com.

Cloudflare - DNS

Agora sim, quem aceder a www.omeusite.pt conseguirá ver o site como o concebeste – mas ainda há um problema; quem escrever http://omeusite.pt (sem www) terá uma mensagem de erro e não conseguirá visualizar o teu site!

Para resolver este problema, falta um passo adicional – criar uma regra para que haja um redirect para o endereço com www.

No Cloudflare vai até Page Rules e na caixa Add new rule faz o seguinte:

  • No URL Pattern, insere o URL como http://omeusite.pt/* (não te esqueças do “*”, que adicionará o redireccionamento automático para todas as outras páginas do site);
  • Activa o Forwarding, passando-o para On;
  • Em Forwarding, escreve http://www.omeusite.pt;
  • No Forwarding Type, opta pelo Permanent – 301.

Cloudflare - Page Rules

E agora sim, está feito! Quem disse que alojar um site tem que ser dispendioso?

Torna-te um Perito em Atalhos de Teclado

Adeus, Rato: Torna-te um Perito em Atalhos de Teclado

Adeus, Rato: Torna-te um Perito em Atalhos de Teclado 620 350 Bruno Brito

Como me posso tornar mais produtivo com um computador?

Quando me lançam esta questão, a minha resposta passa sempre por 2 pontos:

  1. aprender a escrever mais depressa, utilizando Text Expanders;

  2. dominar os principais atalhos de teclado das aplicações que utilizamos diariamente.

Faltava-me escrever sobre este último. Este tema não é o mais sexy, mas a verdade é que o considero um dos aspectos mais importantes da produtividade.

Todos nós devíamos dominar, no mínimo, os atalhos “universais” (que conhecerás mais à frente), mas há uma razão muito importante para não subestimares o poder deste assunto.

Pensa no seguinte: o que é mais rápido? Escrever CMD ou CTRL + C ou ir ao menu e clicar em Edit->Copy?

Sabes a resposta, certo?

Procurar a instrução certa no menu exige maior concentração e precisão do que premir 2 teclas ao mesmo tempo. Por outras palavras, largar o teclado para ir ao rato vai-nos interromper a cadeia do pensamento, tirando-nos tempo e capacidade de foco. Por esse motivo, faz todo o sentido depender do rato o menos possível.

Utilizar atalhos de teclado é frequentemente associado a “peritos”, mas não tem que o ser: com estas dicas, espero desmistificar um pouco este tópico e dar algumas dicas para começares a beneficiar da enorme poupança de tempo e concentração que proporcionam.

Antes de começarmos, quero dar-te 3 conselhos imprescindíveis para pôres em prática o que vem a seguir; vamos a eles!

#1: Resiste à tentação de usar o rato

Como vimos na introdução, o grande objectivo de aprender a utilizar os atalhos do teclado é o do aumento da produtividade.

Naturalmente, não terás grandes ganhos se não saíres da zona de conforto e continuares a usar o rato. Ao início, é normal que não te seja natural utilizar o teclado para tudo, mas tenta lembrar-te do atalho que procuras antes de passar de imediato a mão para o rato.

A grande excepção vai para a Web, onde é realmente mais prático utilizar o rato para navegar de link para link. Ainda assim, é possível utilizarmos apenas o teclado para este efeito, seja através dos atalhos convencionais seja recorrendo a extensões, como por exemplo o Vimum, para Chrome.

#2: Recorre a “auxiliares de memória” quando necessário

De início, vai ser complicado memorizar muitos atalhos, especialmente se envolverem mais do que 2 teclas ao mesmo tempo.

Aqui, é boa ideia usar uma cábula. Deixar os atalhos espalhados pela secretária é uma boa forma de te lembrares da combinação na hora H.

Podes recorrer a simples notas “post-it” ou, no caso de quereres dominar aplicações mais complexas como o Ableton Live ou o Adobe Premiere, podes ir mais longe e comprar autocolantes para as teclas!

Autocolantes Ableton Live para teclado

#3: Vai com calma: tenta aprender, no máximo, 5 atalhos novos por semana

Poderá ser tentador apontar 20 atalhos para aprender, mas o mais provável será ficares frustrado ao fim de algum tempo por nenhum deles ainda estar interiorizado.

Alguns atalhos terás que repetir muitas dezenas de vezes até que fiquem assimilados, pelo que convém começar com poucos e, aproveitando a Lei de Pareto, por aqueles que vais usar com maior frequência.

O que nos traz para o ponto seguinte…

Começa por aprender os atalhos “universais”

Se este assunto te intimida, vais gostar de saber que a maior parte dos atalhos é comum entre as aplicações, o que significa que trabalhar no Word para Windows não vai ser assim tão diferente de trabalhar no Pages para Mac.

Isto são excelentes notícias: só vais ter de decorar uma vez os atalhos para os comandos mais frequentes (como “Gravar”, “Abrir”, “Copiar” ou “Colar”), pois todas as aplicações partilham esses mesmos atalhos.

Vamos então começar por dominar os atalhos que usarás com maior frequência; sugiro que comeces por aprender estes 10 (em Windows utiliza a tecla CTRL em vez de CMD):

NOTA: Esta lista assume que tens o sistema operativo e software em Inglês.

CMD + N – Criar Novo
CMD + O – Abrir
CMD + S – Guardar
CMD + P – Imprimir
CMD + A – Seleccionar tudo
CMD + X – Cortar
CMD + C – Copiar
CMD + V – Colar
CMD + Z – Desfazer (Undo)
CMD + Y – Refazer (Redo)

Chamo especial atenção ao CMD + S – é “o” atalho, aquele que deves utilizar obsessivamente.

Depois destes, fará sentido passares para os atalhos do teu sistema operativo preferido – aqui, é normal que encontres diferenças (por exemplo, o comando para fechar uma aplicação em Windows, ALT + F4, é drasticamente diferente de CMD + Q usado em OSX) mas como são comandos recorrentes, vale a pena aprender pelo menos estes:

Em Windows:
ALT + F – Ir para “Ficheiro”
ALT + F4 – Fechar Aplicação
ALT + TAB – Mudar de Aplicação

Em OSX (Mac):
CMD + Q – Fechar Aplicação
CMD + H – Esconder Aplicação
CMD + , – Definições da Aplicação
CMD + TAB – Mudar de Aplicação

Descobre os atalhos para os comandos que mais usas em cada aplicação

Agora que já conheces os atalhos fundamentais, é tempo de olhares para as tuas aplicações preferidas.

Uma aplicação complexa, como o Adobe Photoshop ou o SublimeText, pode ter dezenas de atalhos pré-configurados – mas provavelmente há acções que realizas muito mais que outras.

Assim sendo, começa por memorizar os comandos mais frequentes: se reparares, nos menus tens sempre o atalho associado ao lado do comando onde clicas, pelo que seguindo as dicas mencionadas acima, podes apontar 5 atalhos dessa app e não utilizar o rato para realizar essas acções.

Em OSX, podes ainda instalar a app CheatSheet, que é grátis e te dá todos os atalhos disponíveis para a app em que te encontras.

CheatSheet para Mac

As webapps mais populares, como o Gmail, Facebook ou Twitter, também têm os seus próprios atalhos. Podes geralmente aceder à lista dos mesmos carregando em ?.

A título de exemplo, aqui ficam os atalhos disponíveis para o Facebook:

Atalhos para Facebook

Muitas outras webapps usam teclas de atalho similares, especialmente o J, o K, o ? e o /.

O nível seguinte

Quando já estiveres mais confortável em utilizar o teclado para comandar o software, podes ainda começar a pensar em criar os teus próprios atalhos.

Algumas aplicações, como o popular leitor de multimédia VLC, permitem-te definir os atalhos para cada acção.

Atalhos VLC

Mais à frente, podes aindar criar macros para tarefas repetitivas, que são executadas através de um simples atalho de teclado. A grande vantagem aqui é que podes gravar qualquer conjunto de acções e depois executá-las com um conjunto de teclas.

Para Windows, podes investigar o AutoHotkey e para Mac, o Keyboard Maestro.

No exemplo da imagem abaixo, criei um atalho para lançar os 3 browsers ao mesmo tempo.

Keyboard Maestro para Mac

Conclusão

Como vês, recorrer mais ao teclado e menos ao rato não tem que ser doloroso – com prática, vais depender cada vez menos deste último, terminando as tarefas em menor tempo e, especialmente, com menores quebras de concentração pelo caminho.

A sério, dá uma hipótese; deixa o rato para a Web e para jogar, e torna-te um mestre em atalhos de teclado – vais ver que vai valer a pena!

Como ter vários blogs Wordpress numa só conta DigitalOcean

Como ter vários blogs WordPress numa só conta DigitalOcean

Como ter vários blogs WordPress numa só conta DigitalOcean 620 350 Bruno Brito

A DigitalOcean começou em 2011 e registou um crescimento verdadeiramente astronómico nos últimos tempos – é, actualmente, uma das 3 maiores empresas de hosting do mundo!

Tal não será de admirar se experimentares o serviço – por 5 dólares por mês, tens uma VPS (Virtual Private Server) pronta a utilizar, que te garante maior liberdade e velocidade se compararmos com os alojamentos partilhados que são, para sites com muito pouco tráfego, geralmente a 1ª escolha.

As VPS sempre foram vistas como difíceis de configurar ou dispendiosas, mas como verás, a DigitalOcean veio simplificar o processo. E, com VPS a partir de 5 dólares, o alojamento acaba até por ser mais barato do que muitos serviços de alojamento partilhado.

Mas se estás a ler este artigo, provavelmente já conheces os benefícios de uma VPS e queres simplesmente saber como tirar maior partido do serviço, certo?

Vamos a isto!

DigitalOcean + ServerPilot = WIN!

Na passada semana, migrei 14 blogs WordPress para uma conta de $5 mensais da DigitalOcean. Aqui, vou-te explicar os meus passos, para beneficiares de várias instalações WordPress – não te esqueças é que se alguns dos teus sites forem populares (ie, muitos milhares de visitas diárias), uma conta de $5 poderá não chegar, mas podes esticá-la ao máximo se utilizares um plugin de caching como o W3 TotalCache e uma CDN, que podes aprender a configurar aqui.

Vamos então começar pelo DigitalOcean.

Criar um droplet no DigitalOcean

Depois de te registares no serviço, deves criar um droplet.

O DigitalOcean anuncia com orgulho que podes ter uma aplicação instalada em menos de 1 minuto recorrendo a um dos seus populares droplets. Com um par de cliques, poderás instalar um blog WordPress, Drupal ou Ghost.

Com a nova parceria DigitalOcean / Bitnami, novas apps são constantemente adicionadas, tornando o serviço ainda mais interessante.

As apps do DigitalOcean

É também aqui que escolhes as capacidades da tua máquina – tendo impacto directo no preço – e a região (tens 3 à escolha na Europa).

Configurar droplet no DigitalOcean

Aqui, o instinto seria criar um droplet WordPress, mas não é isso que vamos fazer. Vamos, isso sim, criar uma Distribution que terá de ser o Ubuntu 14.04 de 64-bit.

A razão para isto é simples: temos de integrar o ServerPilot, que só funciona nesta configuração. Se tivesses optado pela Application WordPress, só terias direito a um blog por droplet, que não é o pretendido, visto que se tivesses 3 blogs terias de pagar, no mínimo, 15 dólares mensais.

Distribuição Ubuntu no DigitalOcean

Integrando o ServerPilot

Agora, é tempo de criar uma conta no ServerPilot. O ServerPilot tem uma versão gratuita que permite criar apps sem limites, pelo que não terá qualquer custo para nós.

Ao delegarmos a instalação do WordPress para o ServerPilot, estamos basicamente a garantir que esta instalação será optimizada para a nossa VPS do DigitalOcean, criando uma instalação mais segura e mais rápida (utilizando Nginx), como podes consultar aqui.

Criada a nossa conta gratuita, devemos depois então associá-la ao nosso servidor, onde inserimos o endereço IP, a password SSH para ‘root’ (que deverás receber num e-mail enviado pela DigitalOcean) e uma palavra-passe, à tua escolha, para o utilizador SFTP que o ServerPilot criará por ti, com o nome serverpilot.

Configurar ServerPilot

Criar uma app

Criado o servidor, podemos prosseguir para a configuração da nossa appé aqui que será instalado um WordPress por nós.

Configurar WordPress no ServerPilot

Damos um nome, indicamos o domínio e decidimos se queremos uma instalação fresca do WordPress ou não. Se já tiveres uma migração do WordPress preparada, podes ignorar este campo.

Se optares por uma instalação nova, é aqui que defines o nome do teu blog e os acessos, para fazeres depois o login.

Por fim, escolhes a versão do PHP e o servidor, que será aquele que inseriste no passo anterior.

Se não colocaste o visto em WordPress, o próximo passo será criar uma base de dados, dando um nome, um username e uma password, para depois introduzires no habitual wp-config.php do WordPress (o DB_HOST será “localhost”, já agora).

Criar uma base de dados no ServerPilot

Se optaste por uma instalação nova do WordPress, o teu blog já deverá estar a funcionar!

Copiando os ficheiros para a migração

Este é um passo opcional, que assume que queres importar a informação do teu WordPress já existente – para tal, a minha recomendação é utilizares o brilhante plugin Duplicator, que cria um package que consiste num ficheiro ZIP com todos os conteúdos e um ficheiro, de nome installer.php.

Começa por instalá-lo no teu blog WordPress actual e activá-lo. Depois, cria o package, que levará alguns minutos, e descarrega-o para o teu computador.

Depois, deves aceder ao FTP da DigitalOcean (como root ou como serverpilot, cujo acesso configuraste em cima) e fazer upload dos 2 ficheiros que descarregaste.

NOTA: o caminho no teu FTP deverá ser algo do género /srv/users/serverpilot/apps/o_teu_blog/public

Para o configurar, basta depois ires ao [teudomínio.com]/installer.php e completar a instalação, dando os detalhes da base de dados que configuraste em cima.

Terminado este processo, já deverás ter o teu blog pronto a usar!

Adicionando mais blogs WordPress

O mais trabalhoso já passou. Agora é repetir estes passos para cada instalação ou migração WordPress, com umas pequenas diferenças.

No DigitalOcean

… não precisas de criar mais nenhum droplet. Tudo o que precisas é de ir à área DNS da tua conta e adicionar o domínio, escolhendo o droplet que já criaste.

DNS - DigitalOcean

No ServerPilot

… deves repetir todos os passos descritos, criando uma nova app com o domínio respectivo e, opcionalmente, a base de dados e posterior upload dos ficheiros.

Por fim, não te esqueças de actualizar os nameservers

Se já tinhas o teu site online, terás que actualizar os teus nameservers, se não os utilizadores continuarão a ser redireccionados para o site do alojamento antigo.

Se quiseres evitar o downtime, podes utilizar um serviço intermediário como o CloudFlare, que é grátis e excelente para gerires os teus DNS – basta apontares os teus nameservers para o CloudFlare e sempre que precisares de fazer alguma alteração, actualizas no CloudFlare (em vez de ser na empresa onde tens o teu domínio), que o disponibiliza instantaneamente.

Adicionar um Website no CloudFlare

Se adquiriste um domínio novo, podes claro também ligá-lo aos nameservers da CloudFlare ou directamente aos da DigitalOcean, que são:

ns1.digitalocean.com
ns2.digitalocean.com
ns3.digitalocean.com

NOTA: os nameservers da CloudFlare são variáveis, pelo que te deves registar e adicionar um site para ver quais é que te são atribuídos. Acredita que este serviço vale muito a pena!

Conclusão

O DigitalOcean é o serviço de hosting deste site desde Novembro de 2014 e estou super satisfeito até hoje.

As VPS deixaram ser um “bicho papão”, estando agora muito acessíveis e fáceis de utilizar, mesmo se o teu objectivo passa por configurar um simples blog.

E, como se viu, podes ir muito longe com apenas 5 dólares mensais – com a ajuda do ServerPilot podes criar um número ilimitado de blogs e, se alguns deles forem (ou se tornarem) populares, podes sempre configurar uma CDN como a Amazon Cloudfront para aliviar o tráfego do teu site (e torná-lo ainda mais rápido)!

Sublime Text – os melhores packages para Blogging e Web Development

Sublime Text – os melhores packages para Blogging e Web Development 620 350 Bruno Brito

O Sublime Text é um dos editores de texto mais populares da actualidade e por boa razão – é verdadeiramente fantástico!

Está disponível para os 3 principais sistemas operativos (OSX, Windows e Linux) e apesar de ser pago, a versão gratuita permite-nos utilizar o programa sem restrições (tudo o que teremos é um pequeno pop-up a surgir a cada 20 ou 30 saves para nos lembrar que a versão paga existe).

O pop-up da versão gratuita do Sublime

Um dos principais factores que contribuem para esta popularidade é o vasto conjunto de packages (extensões para o programa, ou plugins) que podemos instalar. Existem centenas de packages para este editor de texto, mas neste artigo tenciono focar-me nos 10 que utilizo com maior frequência, seja para escrever artigos ou para Web Development.

NOTA: O Sublime Text está oficialmente na versão 2, mas há já vários meses que utilizo a versão 3. Apesar de ainda estar em beta, está perfeitamente estável e é esta a versão que recomendo. Todos os packages que indico neste artigo funcionam com a versão 3, mas devem também funcionar com a versão 2, se necessário.

Como instalar packages no Sublime Text

Antes de avançar, uma nota sobre como instalar packages no Sublime. A melhor forma de o fazer é sempre através do Package Control, que é uma espécie de download manager interno do Sublime.

O mesmo pode ser instalado através da consola, indo a View-Show Console.

Lá, devemos inserir o código presente neste site, que dependerá da versão do Sublime instalada.

O código que deves colar para instalar o Package Control

Com o Package Control instalado, devemos depois executá-lo indo a Tools-Command Palette e escrever “install” – o primeiro resultado deverá ser Package Control: Install Package, que é a opção desejada.

A partir daí é muito fácil: basta escrever o nome da extensão que procuramos e o Package Control descarregará e instalará o package por nós.

O programa é super leve, portanto não tenhas medo de instalar os packages que desejares. Vamos lá então “artilhar” o nosso Sublime!

Packages para Blogging

Todos os meus artigos são escritos no Sublime Text e para este propósito só recorro a 2 extensões. Outra funcionalidade que adoro, mas que vem já de origem no Sublime, é o Distraction Free Mode (View-Distraction Free Mode) que coloca o Sublime em full-screen, exibindo apenas o que escrevemos.

Markdown Editing

Se escreves em Markdown (e se ainda não o fazes, realmente devias), ficarás contente em saber que existe um excelente package para formatar o texto.

O Markdown Editing detecta ficheiros .md e mudará o fundo do teu editor de texto para cinzento claro, aplicando depois a devida formatação (negrito, itálico, títulos, etc) para que vejas uma versão mais aproximada do resultado final do teu artigo.

Um exemplo para mostrar a formatação do Markdown Editing

Word Count

Às vezes é importante termos uma ideia de quantas palavras já escrevemos. O Sublime dá-nos bastante informação, mas só terás acesso ao número de palavras se instalares este package.

O número de palavras ficará disponível em baixo, na status bar.

Word Count para Sublime Text

Packages para Web Development

O Sublime Text é um dos editores de texto preferidos dos programadores e depois de veres o que estes packages podem fazer por ti, vais perceber o porquê.

A maior parte destas extensões valem a pena mesmo se ainda estiveres a dar os primeiros passos em HTML e CSS.

Autoprefixer

Se estiveres a utilizar algumas funcionalidades mais avançadas do CSS3, é quase inevitável que tenhas de adicionar alguns vendor prefixes para garantir o seu devido funcionamento na maioria dos browsers.

Mas é uma chatice escrever o mesmo código várias vezes, para não falar do trabalho que é ter de saber quais são os elementos que necessitam dos já mencionados vendor prefixes, certo?

É aqui que entra o Autoprefixer – depois de instalado, só tens de lançar a Command Palette (Tools-Command Palette) e escrever Autoprefix CSS, que todos os prefixos necessários serão imediatamente escritos por ti.

Vendor Prefixes para CSS

Browser Refresh

Em Web Development, é frequente teres de gravar as tuas alterações no Sublime, voltar para o browser e fazer um refresh. Uma tarefa algo monótona, se pensares no número de vezes que isso acontece por dia.

Há outras formas de contornar esse problema, mas no Sublime, o Browser Refresh faz esse trabalho por ti. Se já tiveres a tua página aberta no browser, podes configurar um atalho para o teu teclado (o chamado key binding) que fará com que esta extensão grave o teu projecto, passe para o browser e de imediato o refresque sem teres de fazer nada.

Podes ver como configurar este package no ponto 2 desta página – podes mudar o atalho do teclado (o atalho predefinido é o command/control+shift+r) e o browser (que por predefinição é o Chrome).

Color Highlighter

Se trabalhas muito com cores, vais adorar esta extensão!

O Color Highlighter vai sublinhar o teu código com a cor respectiva, permitindo-te assim identificar com facilidade qual a cor que estás a usar. Assim, vais poder confirmar se #0099ff é realmente aquele azul em que estavas a pensar.

Mas o Color Highlighter não funciona apenas com valores hexadecimais; para além de suportar todos os formatos de cor de CSS, também suporta variáveis SASS, por exemplo, e se utilizarmos um valor RBGA com transparência, a cor apresentada já terá isso em conta.

Nesta imagem podes ver como este package é versátil!

O Color Highlighter em acção

Por fim, este plugin conta ainda com um color picker, para a eventualidade de querermos rapidamente alterar a cor. Basta colocar o cursor na cor a ser alterada e, ao clicarmos no lado direito do rato, teremos no menu de contexto a opção Choose color, que lançará o picker.

O Color Picker do Color Highlighter

Emmet

O Emmet é algo que recomendo fortemente se trabalhares muito com HTML e CSS. É daquelas ferramentes essenciais para quem gosta, como eu, de escrever depressa.

Pode levar algum tempo a decorar os comandos, mas verás grandes ganhos de produtividade se o começares a utilizar aos poucos.

Podes testemunhar o potencial do Emmet se vires o vídeo de demonstração presente no site oficial. Depois disso, a melhor forma de aprenderes a utilizar o Emmet é consultares a documentação.

Em HTML é possível que leves mais tempo a conhecer todo o seu poder, mas em CSS é praticamente imediato: assim que começares a escrever código (mesmo que com erros) ele adivinhará quase sempre o que querias escrever, facilitando-te bastante o trabalho.

O Emmet existe, enquanto plugin, para os principais editores de texto, não sendo o Sublime uma excepção.

GitGutter

Se trabalhas com Git, este é um óptimo package para verificares rapidamente quais as linhas em que houve alterações no ficheiro desde o teu último commit.

As cores nas linhas informam-te quando existiu alguma adição, edição ou remoção de conteúdo.

O GitGutter para Sublime Text em acção

HTMLBeautify

Se gostas de ver o teu código bonito e devidamente indentado, parabéns! Estás a seguir uma das maiores boas práticas da programação.

O problema é quando já tens tantas <div>s que nem sabes por onde começar. Se te sentires perdido, dá uma chance a este package do Sublime – o mais provável é ele fazer um trabalho brilhante por ti!

Basta ires a Edit-Beautify HTML e o teu código ficará perfeitamente legível, como que por magia! Repara no “antes e depois” deste exemplo, que coloquei aqui em GIF.

O HTMLBeautify indenta o código por ti

SideBarEnhancements

A barra lateral do Sublime Text é um dos pontos fracos do programa e algo que deveria ser melhorado. Felizmente, já alguém tratou disso, adicionando várias funcionalidades críticas ao menu de contexto.

O SideBarEnhancements vai-te facilitar o trabalho de criar pastas, abrir ficheiros no Finder ou outras apps e, sobretudo, ajudar-te na pesquisa.

Estas são todas as opções que o SideBarEnhancements te oferece:

Tudo o que o SideBarEnhancements te permite fazer

SublimeLinter

O syntax highlighting ajuda imenso os programadores, mas às vezes é preciso um pouco mais… não seria bom saber se o nosso programa está bem escrito sem ter de o correr e ver as mensagens de erro?

Bom, é aqui que entram os Linters!

Os Linters estão disponíveis para variadíssimas linguagens (JavaScript, Ruby, PHP, Python…) e vão-te alertar quando algo vai gerar um erro – como a ausência de um ; ou de um end no teu código.

Neste exemplo, repara naquela bola vermelha. Ela está lá porque falta uma vírgula depois de controller: 'MainCtrl' .

Um exemplo de Linting em JavaScript

Para utilizares os Linters, deves não só instalar o SublimeLinter, como o plugin da linguagem respectiva – que geralmente estará disponível aqui.

Da primeira vez poderás ter de perder algum tempo até configurar devidamente o Linter, mas acredita que é tempo bem gasto! Vais passar a programar muito menos às escuras e vai ser a extensão que mais tempo te poupará daqui por diante.

Como sincronizar os nossos packages e definições entre vários computadores

É normal que queiras ter todos os packages instalados nos teus computadores, como acontece por exemplo com as extensões do Chrome.

Para tal, o melhor será fazeres backup da pasta Packages/User, seja para um serviço como o Dropbox, ou para o Github.

Este artigo poderá ser útil para ti se tiveres dificuldades no processo.

Conclusão

E pronto, ficaste a conhecer algumas das minhas principais armas secretas do Sublime. Existem muitas mais, como podes ver aqui, para além de inúmeros temas, que dão vida ao teu editor de texto (o tema que utilizo actualmente é o Materialize, já agora)!

Escapou-me alguma? Quais são as tuas extensões preferidas do Sublime?

Como responder a Reviews Negativas no Zomato

Como responder a reviews negativas no Zomato (ou sites similares)

Como responder a reviews negativas no Zomato (ou sites similares) 620 350 Bruno Brito

Dar a nossa opinião sobre locais não é propriamente novidade, mas parece que só agora é que a moda está a pegar em Portugal. No estrangeiro, plataformas como o Yelp ganharam bastante popularidade, aceitando opiniões (ou, como se costuma dizer, reviews) de qualquer negócio físico, como restaurantes, hóteis ou salas de espectáculo.

Em Portugal, um dos grandes responsáveis por esta actual “febre” de reviews é o Zomato. Focado em locais para comer ou sair à noite, o Zomato já contava, no final de 2014, com mais de 11 mil locais no distrito de Lisboa, estando o Porto nos planos para este ano.

Segundo este artigo, 1 milhão de portugueses já utilizam o Zomato todos os meses para encontrar restaurantes – e se pensarmos que, por agora, só Lisboa está contemplada, é um número verdadeiramente impressionante.

Zomato Greater Lisbon

Enquanto dono de um pequeno negócio, surgem aqui 2 grandes responsabilidades:

  • garantir que somos facilmente encontrados;
  • garantir que a opinião sobre o nosso local é positiva.

A última nem sempre se verifica, até porque não depende só de nós. Naturalmente, o serviço prestado em alguns locais não está alinhado com as expectativas de quem os visita – e isso poderá reflectir-se na nota de algumas reviews.

Mas já lá vamos. Vamos começar por entender os pontos positivos das reviews.

Vantagens das reviews

As reviews têm imensas vantagens, se não vejamos:

  • dão-nos a oportunidade de ficar a conhecer a opinião honesta de quem nos visita;
  • permitem-nos ficar a entender que tipo de expectativas os visitantes têm quando entram no nosso local;
  • são de acesso gratuito, o que significa que acabamos por obter uma apreciação potencialmente similar a um serviço de cliente-mistério, sem qualquer custo.

Aos olhos de outros utilizadores destas aplicações, as reviews podem ainda informar e influenciar no momento da decisão de visitar determinado local.

As reviews dão a oportunidade de qualquer negócio ser melhor. Os visitantes relatam o que está bem e o que pode ser melhorado e o serviço, se estiver atento, tem todas as condições para se ajustar.

Em suma: se tanta vez no mundo do Marketing e Serviço ao Cliente se fala em “ouvir o cliente”, esta é sem dúvida uma excelente forma de obter feedback sincero.

Considerando todos estes pontos, as reviews deveriam ser apreciadas e incentivadas por todos os negócios, certo?

Mas, na verdade, há muitos que as temem.

Medo de receber uma Review Negativa no Zomato?

O reverso da medalha

Pelo seu carácter influenciador, opiniões negativas podem condenar um negócio.

Se um negócio com 10 reviews tiver uma mão-cheia de más experiências, é provável que a maior parte dos utilizadores que consulte este local opte por não o visitar. O que se traduz em menor facturação ao final do mês, claro.

E ninguém quer isso. Mas, felizmente, há algo que é possível fazer para minimizar os danos de uma review negativa.

Por norma, há 2 tipos de reviews negativas:

  1. Uma review muito curta e que não acrescenta valor, que muitas vezes até é escrita por um negócio rival, com o simples intuito de baixar a nota média do concorrente. Algo como “fui lá e não gostei”, escrita por um utilizador que não escreveu mais do que 4 ou 5 reviews.
  2. Uma review detalhada e bem redigida, escrita por alguém que dá frequentemente a sua opinião e que é um utilizador com credibilidade nessa plataforma.

Para as dicas que refiro a seguir, vou-me focar neste último tipo de utilizadores.

Estas reviews são geralmente ricas em detalhes, são honestas e são de pessoas que não só merecem uma resposta atenciosa, como estarão disponíveis em voltar a visitar o negócio, na esperança de que a história seja diferente.

Ao mesmo tempo, estas são as reviews que verdadeiramente influenciam outros utilizadores e que merecem a nossa melhor atenção.

Como devemos encarar e responder a reviews negativas

Para além de ter trabalhado numa empresa de Cliente Mistério, também tive a oportunidade de ser o responsável em Portugal por um projecto muito similar ao Zomato, mas que surgiu um pouco antes – o projecto SaySo.

Nestas experiências profissionais, não só tive a oportunidade de contribuir enquanto cliente mistério para alguns projectos, como testemunhei (em primeira mão) como alguns negócios ficam incomodados ao receberem opiniões negativas sobre os próprios.

O que pude concluir foi que nem todos os donos se apercebem que mesmo após uma experiência negativa, existe uma oportunidade de recuperar um cliente. E, visto que o “mundo” está a ver, poderemos não só ganhar um cliente, mas vários, se soubermos responder à altura.

Na esperança de mostrar como qualquer review pode contribuir para o progresso de um negócio, o que se segue é uma lista de melhores práticas para garantir que respondemos da melhor forma possível a cada review desfavorável.

Guia para responder a Reviews Negativas no Zomato

#1: Nunca censures

No projecto SaySo, que anteriormente mencionei, era frequente os contactos de donos de pequenos negócios a solicitar (ou a exigir) a remoção de reviews negativas. E isso é uma péssima ideia.

Censurar um utilizador só contribuirá para a sua frustração e não resolve qualquer problema.

Nestes casos, o que sugeria era precisamente o contrário; um registo na plataforma, para dar a cara e mostrar que o negócio está atento ao que é dito sobre ele, o que demonstra preocupação e vontade de ser melhor.

#2: Mantém a calma

Muitas reviews poderão ferir a sensibilidade do dono do negócio. Tal não é de estranhar se pensarmos que muitos donos dedicaram toda a sua vida a um projecto que, aos olhos de um visitante, não manifesta qualidade.

Nestes casos, o melhor é não responder com a cabeça quente.

Não só corremos o risco de provocar uma discussão online pouco produtiva, como o mundo estará a observar, correndo o risco de perdermos mais clientes por uma acção mais emocional do que pensada.

#3: Mostra que te preocupas

O utilizador em questão visitou o teu local,consumiu e até foi mais longe: teve o trabalho de redigir um texto manifestando a sua opinião sobre o teu negócio, explicando o que esperava e o que encontrou.

O mínimo que podes fazer em troca é compreender o lado desse utilizador, manifestando isso mesmo nas palavras que utilizas ao elaborar a resposta à review.

#4: Escreve de forma diplomática

É importante não responder de forma demasiado ofensiva (ou defensiva).

Devemos escolher bem as palavras, para não parecer que ficámos ofendidos com o que foi dito ou que estamos a responder com “2 pedras na mão”.

E, escusado será dizer, nunca insultes a inteligência do utilizador em questão. Pode parecer óbvio, mas é incrível o número de respostas que visam rebaixar a opinião de quem escreveu uma review.

#5: Discute todos os pontos abordados pelo utilizador

Uma review bem redigida provavelmente falará do serviço, da decoração do espaço, do ambiente, da qualidade da comida e do preço.

Como tal, se vários destes pontos forem comentados, deves também abordá-los na tua resposta.

Assim, não só mostrarás que tiveste a decência de ler cuidadosamente tudo o que o utilizador referiu na sua review (preocupação essa que está em linha com o que foi mencionado no #3), como esclareces todas e quaisquer dúvidas que outros utilizadores também poderão ter sobre um determinado aspecto do teu espaço, que até poderá ser propositado (ou seja, “feitio e não defeito”).

#6: Responde SEMPRE e DEPRESSA

Reviews sem resposta desiludem não só o criador da mesma, como outros potenciais clientes que estejam a ver o que é dito sobre o teu local.

Com silêncio, transmitirás que não te interessas pelo que os outros acham do teu serviço.

Não deixes que semanas passem até reagires a uma review. Monitoriza o Zomato (e este tipo de sites) pelo menos uma vez por semana e responde a todas as questões – leva o teu tempo apenas se acontecer a situação revelada no ponto #2.

#7: Pede desculpa e agradece a opinião

O autor da review visitou-te. Deu-te o seu tempo, uma oportunidade e até algum do seu dinheiro. E, no fim de tudo, ainda foi mais longe: escreveu sobre o teu negócio, o que esperava e o que encontrou.

Muitos negócios estariam dispostos a pagar por esta informação. Tu recebeste-a de borla. No mínimo, agradece e pede desculpa, mesmo que não concordes de todo com o que foi dito.

#8: Dá uma razão para uma nova visita

Depois de explicares o que se sucedeu, ou de simplesmente pedires desculpa, tenta incentivar uma nova visita, para provar que o que aconteceu foi apenas um mau dia.

Se tiveres essa possibilidade, podes oferecer por exemplo o café, a sobremesa ou as bebidas da próxima vez, como incentivo-extra.

#9: Fornece os teus dados para eventual contacto

Numa conversa online, é sempre bom um pequeno toque humano, como foi referido neste artigo. Se possível, assina com o teu nome verdadeiro e indica outra forma de te contactar, como um telefone ou um e-mail.

Este pequeno passo quebra a barreira entre as máquinas e aumentará a tua chance de receber algum tipo de follow-up.

Conclusão

As reviews não devem ser temidas, mas sim encaradas com bons olhos.

Uma boa resposta não só é capaz de minimizar os danos, como pode recuperar clientes perdidos e cativar outros, isto se mostrarmos preocupação por quem nos visita e vontade de melhorar a qualidade do serviço prestado.

Por isso, já sabes: da próxima vez que receberes uma crítica desfavorável, sorri, respira fundo, agradece e… responde!

    Se quiser entrar em contacto comigo, pode enviar-me um e-mail para mail@brunobrito.pt ou preencher o formulário abaixo.

    NOTA: Todos os campos são de preenchimento obrigatório.