Emmet não é tecnlogia, é magia mesmo.

Descupe Dr. Emmett Brown, mas não é do senhor que vamos falar…

Bora falar sobre o Emmet, uma ferramenta que é, indispensável, e utilizado por muitos desenvolvedores que já tenha boa experiência.
Não é um pré-processador como o LESS, porém ele abrevia o modo como você escreve o HTML e CSS, pra que você se torne mais rápido ao codificar. Escrito em Javascript puro (SIM JAVASCRIPT <3) e podendo funcionar em diferentes plataformas, a ferramenta foi desenvolvida para os editores de códigos mais utilizados do mercado, como o Sublime Text, Notepad++, Atom, Eclipse, Coda, Komodo Edit, NetBeans, Dreamweaver(Por favor não use esse) e o meu xodó o Brackets, mais para frente farei um post sobre…

Mas o que exatamente o Emmet faz?

Então chega de blá, blá, blá e vamos para o que interessa.

O site do Emmet.io diz;

Abbreviations are the heart of the Emmet toolkit

ou seja cerveja

O que o Emmet faz de melhor é abreviar

Os snippets são totalmente dinâmicos. A medida que você escreve e aperta a tecla tab, a abreviação em Emmet é transformado na hora. Veja um exemplo bem simples:

Para um criar um documento HTML5 utilizando a abreviação Emmet, digite apenas html:5, e tecle tab e a magica acontecerá! Não é magia é tecnologia! OPS clichê de propaganda não!

Para criar uma um menu com itens numerados, digite no editor .menu>.item*5>a[href="#"].

Percebendo que é muito fácil entender como o emmet funciona e como ele escreve o HTML.

Para nomear um elemento com classe, basta utilizar um ponto antes do nome, como no CSS. O mesmo vale para criar o elemento com ID, basta digitar o # antes do nome e teclar tab sempre. O sinal de >, serve para aninhar elementos, assim como o sinal de ^ serve para sair do aninhamento anterior. Exemplo: digite .menu>.item>a^.item2>h2: O sinal de * serve para multiplicar a quantidade de um determinado elemento. O sinal de + serve para quebrar adicionar mais elementos e quebrar as linhas. Por exemplo, ao digitar #menu+.sidebar+.footer: Parece complicado, mas com o passar do tempo e com prática, acaba ficando mais simples.

CSS

No CSS, a ferramenta ajuda bastante na hora de escrever as propriedades. Pra quem já sabe decorado quase todas as propriedades do CSS, fica mais fácil até de deduzir qual abreviação utilizará para escrever o código.

#elemento { w200+h100+pos-a+t0+l0 //tecle tab depois de escrever isso }

Resultará nisso:

#elemento { width: 200px; height: 100px; position: absolute; top: 0; left: 0; }

São uma porrada de abreviações que o Emmet possui e ainda permite que você mesmo crie suas próprias abreviações. Na Documentação você pode ler todas as abreviações disponíveis.

Então vai lá e de uma olhada.

Escreva um código aberto todos os dias

Lendo um artigo do John Resig, o criador da biblioteca JavaScript jQuery, onde o mesmo propôs um desafio no mínimo interessante: Escrever código aberto(open-source) todos os dias. O que já é um pouco complicado, pode se tornar ainda mais difícil, pois ele lhe impôs algumas regras:

1. Devo escrever um código todos os dias. Eu posso escrever docs, artigos, ou outras coisas, mas deve ser um completamentar ao código diário.
2. O código deve ser útil. Não vale ser um ajuste na formatação, apenas modificar a indentação e se possível, não deve ser uma refatoração. Todas essas alterações são válidas, mas não como o trabalho exclusivo do dia.
3. O código deve ser open-source e deve estar no site Github.

#####Confesso que pra mim será um grande desafio, pois não tenho muito tempo sobrando. Apesar do sacrifício no início, acredito que irei melhorar muito como profissional.

Artigo do John.

Criando extensões para o Google Chrome

Extensões são pequenos programas que permitem a você adicionar funcionalidades para o navegador, no nosso caso, o Google Chrome, usando tecnologias WEB, tais como: JavaScript, HTML e CSS.

A partir de um arquivo de manifesto, você diz ao navegador quais recursos você vai utilizar, e através de um arquivo JavaScript, você executa as tarefas desejadas.

Um recurso super legal em extensões, é que você consegue otimizar muitas tarefas. Um exemplo: Eu uso o One Click Note para me ajudar no controle diário das minhas tarefas. Uso também uma extensão que eu desenvolvi que abri um popup com os meus aplicativos. Resumindo, ao abrir o navegador, a extensão carrega uma lista de todos os meus apps no chrome, sem precisar ir para a pagina dos apps. Também faço o mesmo com meus e-mails e notificações do Github. Enfim, elas são muito úteis.

Hoje nós vamos criar uma extensão para o Google Chrome que abre um popup com uma calculadora. Algo bem simples. A idéia deste artigo é explicar como criar uma extensão, depois você pode criar extensões mais funcionais.

####Preparações: Para organizar os arquivos da nossa extensão, vamos criar uma pasta chamada: calculadora, e copiar os arquivos que esta no github e faça download.

#####agora vou esplicar um arquivo muito importante…

O Manifesto: Qualquer extensão deve conter em seu diretório raiz um arquivo chamado manifest.json, que é responsável por declarar algumas informações referentes a extensão. Um manifesto declara: o nome da extensão, a versão, as permissões que ela precisa, dentre outras configurações. Um arquivo de manifesto nada mais é do que um arquivo no formato JSON com algumas propriedades pré-definidas. Você pode encontrar todas as propriedades aceitáveis pelo arquivo manifest.json, no site do Google Chrome Developer. Nosso arquivo manifest.json ficará assim:

{
  "name": "Calculadora",
  "description": "Calculadora exemplo para chrome",
  "version": "0.0.1",
  "permissions": ["management"],
  "browser_action": {
    "default_icon": "browser_action_icon.png",
    "default_title": "Calculadora",
    "default_popup": "popup.html"
  },
  "icons": {
    "48": "icon.png"
  },
  "manifest_version": 2
}

Explicando:

name: Define o nome da extensão. Esse nome será utilizado para apresentar a extensão.

description: Uma breve descrição sobre o que faz a extensão. Seja simples e direto, pois, uma descrição não pode conter mais que 128 caracteres.

version: Qual é a versão da sua extensão? Quando falamos em versonamento, devemos seguir uma convensão. Mas isso é assunto para um outro artigo.

manifest_version: Informa qual é a versão do manifesto que estamos usando. Nós usaremos a version 2 do manifesto, pois, a versão 1 está defazada.

####Testando nossa extensão: Para testar nossa extensão, acesse a URL: chrome://extensions/, marque a opção: modo desenvolvedor; clique em: Carregar extensão expandida e, selecione a pasta calculadora. Após fazer isso, você verá que a sua extensão foi carregada e instalada, sendo assim, você pode acessar o plugin que aparecera no lado da barra de url. Pronto Uma Calculadora aparecera em forma de popup