O que é Emmet e como ele vai adiantar MUITO o seu dia a dia! – Dica rápida

Tempo de leitura 2 minutos

O Emmet (antigo Zen Coding) é um recurso disponível para MUITOS editores de texto e IDEs. O objetivo dele é escrever menos, simples assim.

Embora tenha suporte a XML e até CSS, o Emmet da um show de verdade no HTML, em vez de escrever tags completas usamos “atalhos” mais simples e que irão gerar tudo de forma controlada.

Um exemplo bem prático:

Emmet na prática

No gif, vemos como o Emmet cria o HTML todo da página de forma rápida e prática, vou deixar os comandos do Emmet que usei logo a seguir, assim você pode refazer meus passos.

# Gera o template HTML
html:5

# Gera um H1 com conteúdo "Hello Emmet"
h1{Hello Emmet}

# Gera uma tabela completa com tags filhas
# conteúdo numerado (usando o $)
# é possivel "voltar" algumas tags com ^
table>thead>tr>th*3{header $}^^tbody>tr>td*3{item $}

Aqui você ve mais comandos suportados pelo Emmet

https://docs.emmet.io/

Instalação do Emmet

O Emmet é bem simples de instalar, em MUITOS casos acaba sendo um simples plugin para o editor ou IDE ou até já vem ativado (como no Visual Studio Code).

Se tiver dúvidas sobre a sua ferramenta preferida, consulte esta página de Download:

https://emmet.io/download/

Ativar Emmet para arquivos JSX (Javascript) no Visual Studio Code (VS Code)

Essa é uma boa dica. Por algum tempo eu só aceitei que o Emmet não rolaria no VS Code com JSX. Até que me revoltei de tanto escrever “HTML” “na mão” (me superei, dois termos com aspas duplas… seguidos).

É bem simples ativar o Emmet para o React no Visual Studio Code, é só abrir as configurações (ctrl/command + ,) ir em Extensions > Emmet e procurar por Edit in settings.json.

Agora só acrescente iso ao arquivo e salve:

{
   "emmet.includeLanguages": {
      "javascript": "javascriptreact"
   }
}

E pronto.

#ficaADica

O que é e como começar com PWA (Progressive Web Apps)?

Tempo de leitura 6 minutos

PWA é o acrônimo para Progressive Web Apps (Aplicativos Web progressivos) e nada mais são que aplicativos comumente construídos para web (HTML, CSS e Javascript) e que “se transformam” em aplicativos nativos.

A grande verdade é que muitos recursos que eram exclusivos dos apps nativos estão diponíveis AGORA para projetos nativamente web, graças as APIs do HTML 5.

Continue lendo “O que é e como começar com PWA (Progressive Web Apps)?”

Local notifications – API de notificação local nativa do Sistem Operacional com Javascript – Dica rápida

Tempo de leitura 4 minutos

Isso mesmo que você leu, o Javacript pode diparar notificações nativa do Window, Linux, MacOS, Android e IOS direto do Navegador ou aplicativo nativo/híbrido mobile e desktop que use Javacript.

Estas notificações são MUITO úteis e podem fornecer uma interface simples e que ajuda no engajamento do cliente com seu aplicativo.

Continue lendo “Local notifications – API de notificação local nativa do Sistem Operacional com Javascript – Dica rápida”

Reconhecimento de voz NATIVO com Javascript – Dica rápida

Tempo de leitura 4 minutos

Sério, ESSA FEATURE É MUITO LEGAL, nessa dica rápida quero mostrar na prática como você pode implementar reconhecimento de voz com Javascript em seus projetos web ou aonde implementar HTML5 (Ionic, Cordova, Quasar, Electron…) sem NENHUMA api externa, nativo e muito simples.

E para demonstrar o recurso eu criei um teste “para o mundo real” aqui no blog mesmo.

Continue lendo “Reconhecimento de voz NATIVO com Javascript – Dica rápida”

Área de transferência (Copiar e colar) com Javascript – dica rápida

Tempo de leitura 2 minutos

HTML 5 nos provê uma API que permite gerenciar a área de transferência de uma forma bem simples e prática, eu vou mostrar neste artigo como você pode adicionar o famoso “clique para copiar” no seu projeto.

Compatível com qualquer framework Javascript, incluindo Ionic e Quasar Framework.

Continue lendo “Área de transferência (Copiar e colar) com Javascript – dica rápida”