sábado, 16 de junho de 2018

Data Attributes – O que são e como usar


Olá, hoje eu vou falar sobre algo que eu particularmente acho muito legal do HTML 5, que são os Data Attributes, ou simplesmente atributos de dados (data-*). Não é algo novo, rsrsrs mas muitas pessoas não usam e muitas usam e nem entendem o que estão fazendo. Você já precisou recuperar no JavaScript valores de um <li>, <ul>, <div> ou qualquer outra tag que não lhe dê a opção de retornar valores como as tags<input>? Bom, com os Data Attributes isso é possível.

O HTML 5 foi desenvolvido para ser extensível, podendo ter dados associados a um elemento específico através de atributos mesmo que esses atributos não tenham sido definidos pela linguagem. Ou seja, podemos adicionar informações a atributos não padrão do HTML e depois recuperar essas informações para usá-las de alguma forma.

Esses atributos valorados não devem conter nenhuma informação confidencial, pois ficam expostos no HTML. Servem para facilitar a manipulação de informações no JavaScript e CSS. Com ele podemos adicionar informações em links, botões, formulários, etc.

A forma de usar é bastante simples, basta declarar um atributo data-* e atribuir o valor desejado. Ex:

<article
  id="carrosEletricos"
  data-columns="3"
  data-index-number="12314"
  data-parent="carros">
...
</article>

Uma vez tendo criado os atributos podemos acessá-los via JavaScript de várias formas e trabalhar em cima dos valores, inclusive alterando-os.

Podemos acessar o valor do atributo diretamente através de um método disponibilizado para varrer os atributos dos elementos HTML - element.getAttribute(“nomeDoAtributo”);. Caso o atributo não exista, o valor retornado será null ou “”. Esse método pode ser usado para atributos padrões do HTML ou os Data Attributes criados. Ex:

<script>
var artigo = document.getElementById(‘carrosEletricos’);
var atributo = artigo.getAttribute(“columns”);
</script>

Mas o padrão recomendado é usando a propriedade dataset do DOMStringMap para recuperar os dados, então teríamos:

<script>
var article = document.getElementById(‘carrosEletricos’);

var colunas = article.dataset.columns; // "3"
var index = article.dataset.indexNumber; // "12314"
var pai = article.dataset.parent; // "carros"
// setar um valor
article.dataset.columns = 5;
</script>

          É claro que podemos também acessar via JQuery:

<script>
var artigo = $("#carrosEletricos");

var colunas = artigo.data("columns"); // "3"
var index = artigo.data("indexNumber"); // "12314"
var pai = artigo.data("parent"); // "cars"
</script>

Abaixo segue um outro exemplo onde temos uma lista de funcionários onde queremos armazenar alguns valores como matricula, idade e sexo, mas não mostrá-los na tela:

<ul>
  <li data-matricula="001" data-idade="23" data-sexo="M" onclick="chamaFuncao(this)">Pedro</li>
  <li data-matricula="002" data-idade="28" data-sexo="M" onclick="chamaFuncao(this)">Daniel</li>
  <li data-matricula="003" data-idade="30" data-sexo="F" onclick="chamaFuncao(this)">Joana</li>
</ul>

Os atributos criados também podem ser usados diretamente no CSS, para isto vamos voltar ao exemplo da tag artigo. Para mostrar o atributo data-parent como conteúdo poderíamos ter o código abaixo:


article::before {
  content: attr(data-parent);
}

Ou usar os “Attribute Selectors” – atributos seletores, que correspondem a elementos com base em seu valor ou simplesmente em sua existência:

// baseado na existência:
article[data-columns] {
       border-right: 1px #bbdefb groove;
}

// baseado no valor:
article[data-columns='3'] {
       width: 400px;
}

article[data-columns='4'] {
       width: 600px;
}

Quando usado por valor, o CSS traz várias opções de comparação e não apenas o “=”. Essas opções funcionam como as Regex do Java ou RegExp do JavaScript. Veja os exemplos:
  
Consideremos o HTML abaixo:

<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>

<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好!</div>
<div lang="zh-TW">世界您好!</div>
<div data-lang="zh-TW">?世界您好!</div>


Tendo então as seguintes regras CSS:

a {
  color: blue;
}

/* links internos, começando com "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links com "example" em qualquer parte da URL */
a[href*="example"] {
  background-color: silver;
}

/* Links com "insensitive" em qualquer parte da URL,
   desconsiderando letras maiúsculas e minúsculas -> (i) */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links que terminam ".org" */
a[href$=".org"] {
  color: red;
}

/* Todas as divs com atributo 'lang' são bold. */
div[lang] {
  font-weight: bold;
}

/* Todas as divs em US são azuis. */
div[lang~="en-us"] {
  color: blue;
}

/* Todas as divs em Português são verdes. */
div[lang="pt"] {
  color: green;
}

/* Representa elementos com um nome de atributo
   cujo valor pode ser exatamente igual ou pode
   começar com valor imediatamente seguido por um hífen( - ).
   É frequentemente usado para correspondências de subcódigo
   de idioma.
   Todas as divs em Chinês são vermelhas, mesmo se
    simplificado (zh-CN) ou tradicional (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* Todas as divs com 'data-lang' Chinês Traditional
   são roxas. */
div[data-lang="zh-TW"] {
  color: purple;
}

Os resultados seriam:



Espero que possa ter ajudado, seguem os links que usei para fazer esse post:


segunda-feira, 19 de fevereiro de 2018

Publicando módulo Angular 4 no NPM

O NPM serve para instalar, compartilhar e distribuir códigos. É um gerenciador de pacotes para JavaScript e também um repositório para compartilhamento de códigos fonte onde temos inúmeros pacotes de códigos reusáveis. Para quem trabalha com o Java, seria uma espécie de Maven para JavaScript.

O NPM é instalado juntamente com o Node.js, que pode ser baixado do seguinte endereço:


Após instalado você pode executar o seguinte comando para ver as versões do Node.js e do NPM respectivamente:

$       node -v
$       npm -v

Mesmo tendo baixado o NPM juntamente com o Node.js, eles são independentes e provavelmente você precisará atualizar sua versão do NPM, para isso use o comando  npm install npm@latest -g.

Depois de instalado o NPM, é preciso criar uma conta caso você não tenha, ou fazer login para poder compartilhar seus pacotes. A criação da conta é bem simples e eles pedem um username, password e e-mail. É necessário a confirmação do e-mail antes de publicar algo caso a conta seja nova. O comando para criar uma conta é:

$       npm adduser

Ao criar a conta ele já loga no NPM. Para efetuar logins posteriores, os mesmos dados são pedidos, e o comando é:

$       npm login

Uma vez tendo usuário e senha e estando logado, devemos entrar no diretório do projeto que queremos compartilhar e prepará-lo para ser compartilhado. Para isso precisamos do ng-packgr. Essa biblioteca vai compilar nosso código para um formato de pacote do Angular. Digite o seguinte comando:

npm install ng-packagr --save-dev

Então crie um novo arquivo chamado ng-package.json na raiz do seu projeto. Insira o seguinte trecho de código nele:

{
    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
    "whitelistedNonPeerDependencies": ["."],
    "lib": {
       "entryFile": "index.ts"
    }
}

A parte marcada de amarelo acima eu adicionei depois de tentar publicar uma atualização em um componente e me deparar com um erro do NPM não permitindo publicar pacotes com dependências, porém o componente não funcionava sem as dependências publicadas. Essa linha adiciona uma "lista branca" de dependências que podem ser publicadas, colocando o ponto (".") eu defini que todas as dependências podem ser publicadas.

    Agora precisamos criar o arquivo que indicamos como arquivo de entrada no “entryFile”. Esse arquivo deve também estar na raiz do seu projeto e no conteúdo precisamos exportar nossos módulos como abaixo:

Export * from “./src/app/caminho_do_seu_modulo/seumodulo.module”

O módulo que for exportado será acessado por quem usar nossa biblioteca. Lembre-se de no decorator exportar os componentes, para que eles possam ser usados fora do módulo, como no exemplo abaixo:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { FormsModule } from '@angular/forms';

import { SeuComponent } from './seu-component.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    BrowserAnimationsModule
  ],
  declarations: [SeuComponente],
  exports: [
    SeuComponente
  ]
})
export class SeuModule { }

Precisamos agora adicionar um novo script no package.json, atualizar a versão do seu projeto e remover a propriedade "private": true. Se você não atualizar a versão a cada vez que for publicar, não será possível uma nova publicação no NPM. Depois de remover a propriedade "private": true, dentro do arquivo procure a propriedade “scripts” e adicione ao final:

“packagr”: “ng-packagr -p ng-package.json”

Agora execute o comando npm run packagr, que irá gerar a dist da nossa biblioteca. Note que foi criada uma pasta dist. Ela é o conteúdo que deve ser publicado.

Por fim, execute os comandos npm pack para gerar um arquivo .tgz com a versão do nosso projeto e o comando: npm publish dist para que possamos publicar a nossa biblioteca no portal npm.


Segue o link de um componente que publiquei no NPM e o fonte no GitHub:










Links de referência:

https://imasters.com.br/desenvolvimento/publicando-modulo-angular-4-no-npm/?trace=1519021197&source=single
https://medium.com/@programadriano/nodejs-criando-um-m%C3%B3dulo-global-e-publicando-no-npm-9bb046a1db4f 
http://clubedosgeeks.com.br/artigos/publicando-pacotes-no-npm

terça-feira, 6 de fevereiro de 2018

Git – Configurando o SSH no Windows e no GitHub

Criar uma chave SSH não é muito complicado. Quando instalamos o Git no Windows, ele já traz uma ferramenta para isso, o OpenSSH.

Então, vamos começar executando o git-bash, um terminal Linux para o Windows que também faz parte da instalação do Git. Após aberto o git-bash, digite:

ssh-keygen -t rsa -b 4096 -C "seu-email@aqui.com"

Você será indagado sobre onde salvar a chave, sendo que o prompt também já mostra um caminho default. Basta pressionar o “Enter” para criar a chave SSH no caminho default. Caso já exista uma chave salva, ele perguntará se deseja sobrescrever. Logo depois, ele pedirá uma senha e a confirmação:

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

Caso não queira informar uma senha, pode apenas confirmar sem digitar nada (é recomendado criar uma senha, claro!). Então o prompt lhe informa que a sua chave privada e a sua chave publica estão no caminho indicado previamente, que se for o default é: C:\Users\seu-usuario\.ssh.

Adicione sua chave SSH ao SSH-Agente:

eval $(ssh-agent -s)
ssh-add ~/.ssh/id_rsa

E por fim, adicione sua chave a sua conta no GitHub, o comando abaixo copia sua chave para a memória e deixa pronto para colar no GitHub:

clip < ~/.ssh/id_rsa.pub

Depois, acesse sua conta no GitHub e vá nas configurações:




Clique em “SSH and GPG keys”.




Clique em “New SSH key”:




Adicione um título para identificação da sua chave (pois você pode ter mais de uma, de diferentes dispositivos) e cole a sua chave SSH, depois, confirme sua senha.




Pronto! 




https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/
http://guides.beanstalkapp.com/version-control/git-on-windows.html