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)?”

Eventos no PHP – PHP sem framework – parte 6

Tempo de leitura 5 minutos

E chegamos ao fim de mais um artigo, fechando com chave de ouro essa série com uma das dicas mais legais pra quem curte Single Responsability Principle, o Observer Pattern!!!

Imagine que você tem um determinado momento da aplicação em que quer executar algum código, mas não sabe bem o que pode acontecer ali, você quer a liberdade de “plugar” o que e quanta ações quiser.

Continue lendo “Eventos no PHP – PHP sem framework – parte 6”

Middlewares no PHP – PHP sem framework – parte 5

Tempo de leitura 6 minutos

Middleware é um nome complicado e que assusta quem não sabe o quão simples e útil é, mas eu prometo que ao fim deste artigo você vai dominar esse carinha.

O foco do middleware no contexto deste artigo (desenvolver aplicações web com PHP) é fornecer camadas que vão lidar com a entrada e saída das requisições HTTP, ou seja, request e response. Middlewares apenas interceptam e executam ações ANTES ou DEPOIS da ação principal (a action de um controller, por exemplo).

Continue lendo “Middlewares no PHP – PHP sem framework – parte 5”

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”