Inteligência Artificial: Deeplearn.js

A biblioteca Deeplearn.js permite o treinamento de redes neurais, não exigindo instalação de software ou back-end. “Uma biblioteca de aprendizado de máquina do lado do cliente pode ser uma plataforma para explicações interativas, para prototipagem e visualização rápidas, e até para computação offline”, disseram pesquisadores do Google. “E se nada mais, o navegador é uma das plataformas de programação mais populares do mundo”.

Ela é oferecida pelo Google no formato código aberto, com aceleração de hardware para aprendizagem de máquina que é executada em pelo seu navegador. Atualmente ela é suportada apenas na versão desktop do Google Chrome, mas o projeto está para oferecer suporte a outros dispositivos.

Usando a API JavaScript para o WebGL, o Deeplearn.js pode realizar cálculos no GPU. Isso oferece um desempenho significativo, passando assim os limites de velocidade do JavaScript, segundo os pesquisadores.

O Deeplearn.js imita a estrutura da biblioteca de inteligência de máquina TensorFlow da empresa e NumPy, um pacote de computação científica baseado em Python. “Também implementamos versões de algumas das operações TensorFlow mais utilizadas. Com o lançamento do Deeplearn.js, estaremos fornecendo ferramentas para exportar pesos dos pontos de verificação TensorFlow, o que permitirá aos autores importá-los para páginas da internet para a inferência Deeplearn.js “.

Embora o TypeScript da Microsoft seja o idioma escolhido, Deeplearn.js pode ser usado com JavaScript puro. As demonstrações de Deeplearn.js são apresentadas na página inicial do projeto. O Deeplearn.js junta outros projetos que trazem aprendizado de máquina para JavaScript e o navegador, incluindo TensorFire, que permite a execução de redes neurais dentro de uma página e ML.js, que fornece ferramentas de aprendizado de máquina e análise numérica em JavaScript para Node.js.

Caso você tenha interesse em conhecer mais, o site oficial deles é o https://deeplearnjs.org/index.html e eles oferecem diversos demos para que os novos programadores possam ter uma ideia do potencial do Deeplearn. Caso você queira brincar com o código, veja este link: https://deeplearnjs.org/index.html#demos

Nova versão do Reason

Para quem não conhece o Reason (veja o reasonml) não é uma nova linguagem; É uma nova sintaxe e toolchain alimentado pela linguagem OCaml. Ele dá a OCaml uma sintaxe familiar voltada para programadores de JavaScript, e atende aos usuários de fluxo de trabalho NPM / Yarn já conhecidos.

Agora com a versão 3, uma das mudanças mais visíveis na sintaxe do Reason é o uso da sintaxe de aplicação/abstração JavaScript em vez de Ocaml. Isso significa que no Reason 3 você chamaria uma função de dois parâmetros, colocando parênteses em torno deles, como você faz em JavaScript:

myFunction(arg1, arg2) // novo, sintaxe C-like
myFunction arg1 arg2   // antigo, sintaxe OCaml-like

 

Outras mudanças importantes são as seguintes:

  • Nova sintaxe para declarar o tipo de um objeto em Javascript, usando {. }, ex.:
type payload = {.  // Não precisa chamar o no need to call Js.t aqui
    "name": string,
    "age": int
};

 

  • Suporte ampliado para type punning com parâmetros marcados e nova sintaxe usando “~” em vez de “::”. É assim que você declara e chama uma função com o parâmetro marcados:

 

let addCoordinates = (~x, ~y) => {
    /* use x e y aqui */
};
...
addCoordinates(~x=5, ~y=6);

 

Compara a nova implementação com a antiga:

let addCoordinates x::x y::y => {
  /* use x e y aqui */
};
...
addCoordinates x::5 y::6;

 

Além disso, type punning (que, no exemplo acima, permite escrever ~x em vez do mais tedioso ~x como x) pode ser usado junto com tipos de anotações, que não haviam sido suportadas anteriormente:

let add = (~first: int, ~second: int) : int => first + second;

 

  • Concatenação de String agora pode ser feito usando o operador “++” ao invés do “^”.
  • Lógicas de negação agora será pelo operador “!” ao invés do “not”

Os desenvolvedores que possuem uma base de código Reason existente não devem se preocupar com a extensão das mudanças de sintaxe, que foram principalmente impulsionadas pela idéia de torná-lo mais “natural” para desenvolvedores de JavaScript. Na verdade, o Reason 3 vem com um script de migração que promete facilitar a transição.

Outra nova característica promissora do ecossistema Reason é a disponibilidade de uma API oficial para acesso programático ao Parser Reason, refmt, que já possui várias ferramentas como o Klipsereason-tools, a documentação no site do Reason, etc.

fonte:

https://reasonml.github.io/

https://www.infoq.com/br/news/2017/12/facebook-releases-reason-3

https://www.infoq.com/news/2017/11/facebook-releases-reason-3

Conheça o Ember.js

De acordo com os autores do Ember, o framework foi concebido para “criar aplicações ambiciosas na web”. Não só as aplicações web de uma única página (SPAs), mas também aplicativos de desktop e móveis. A Apple Music é um dos exemplos mais notáveis ​​de um aplicativo criado com o Ember, um serviço de transmissão de música capaz de suportar milhões de usuários.

O Núcleo do Ember foi criado pensando em um aspecto do desenvolvimento web que irritava seus fundadores. Olhando para o cenário de framework JavaScript, os autores do Ember queriam solucionar algumas falhas que percebem em outros frameworks. Eles sentiram que a capacidade de marcar e compartilhar URLs na web tornou-se mais um recurso de estrutura secundária. O roteamento está sendo visto como em segundo plano, por isso eles o tornaram prioridade no Ember.js.

Além disso, a abordagem popular do model-view-controller (MVC) para frameworks back-end como Rails e .NET não agradava a equipe do Ember. Outras estruturas de MVC JavaScript tendem a se concentrar na View, com os aspectos do Model e do Controller (ferramentas de dados e back-end) mais como segundo plano. A equipe do Ember queria abordar essas questões no Front-End e fornecer uma sensação mais semelhante a uma área de trabalho e que fosse mais fácil de trabalhar.

Embora possa não ter tanta visibilidade quanto o AngularJS ou BackboneJS, o Ember provou seu valor e tem sido usado por desenvolvedores em empresas como Zendesk, LivingSocial, Yahoo !, Timbuk2 e Square.


Do ponto de vista de um desenvolvedor, aqui estão algumas razões para amar a estrutura do Ember.

  1. Com a ajuda do transpiler de JavaScript Babel, o Ember permite que os desenvolvedores usem os futuros padrões de JavaScript e os transpilam para uso nos navegadores de hoje.
  2. “Convenção acima da configuração”. O Ember tem boas práticas bem definidas sobre como é estruturado. Isso significa que os desenvolvedores podem se concentrar mais na funcionalidade de suas aplicações e recursos únicos, e menos em reinventar a roda com código tedioso. Há mais construções e menos técnicas. Simplificando, Ember.js é construído para produtividade e suas convenções são o núcleo disso. É projetado com os desenvolvedores em mente, com muitas APIs incríveis para ajudá-los a obter aplicativos construídos de forma rápida.
  3. Ember é o WordPress do JavaScript. Enquanto o Ember é mais novo e menor em termos de base de usuários, a equipe principal está absolutamente comprometida com a compatibilidade com versões anteriores. A compatibilidade com versões anteriores é uma filosofia de fazer alterações em um software através de novas versões, mas nenhuma alteração que faria com que as versões mais antigas parem de funcionar – o sistema de gerenciamento de conteúdo do WordPress permanece e é extremamente bom. As principais atualizações de versão no Ember removem as depreciações, mas não adicionam novos recursos com alterações que quebrarão aplicativos usando versões mais antigas do framework.
  4. Modelos Ember. Construído naquela linda UI são os modelos do Ember, que são escritos com a linguagem de modelos do Handlebars. Handlebars é nomeado pelo uso de suportes de duas chaves “{ }” e permite que os desenvolvedores usem menos código. Os modelos criam muitos recursos possíveis no Ember, como componentes, tomadas e expressões. As placas também são atualizadas automaticamente se alguma coisa mudar nos dados subjacentes. Isso ocorre porque dentro da arquitetura MVC do Ember, seus modelos são suportados por modelos (o M do MVC ou a camada de dados) e eles suportam a ligação de dados. As atualizações para o modelo são imediatamente refletidas no modelo, sem trabalho extra.
  5. com. Este é o repositório de plugins do Ember, contribuído pela comunidade de desenvolvedores Ember.js. Tem tudo que você precisa. Precisa de um módulo de autenticação? Basta executar “$ ember install ember-simple-auth” e você está fazendo 90%. Outros plugins na biblioteca addons incluem ferramentas para APIs JSON, cache, solicitações AJAX e funcionalidades de preenchimento automático.
  6. Ember-CLI. Ember e Ember-CLI são duas coisas diferentes inteiramente, mas nenhuma delas seria totalmente total sem a outra. O Ember-CLI é um utilitário de linha de comando que acompanha a pilha de software da estruturo Ember. Para o não desenvolvedor, uma CLI ou uma interface de linha de comando, é uma interface visual simples que permite aos humanos interagir com o sistema operacional de um computador. O Ember-CLI é um foguete de produtividade, com suporte para ferramentas como o CoffeeScript, Handlebars, MENOS e Sass. O Ember também vem com a opção de usar outros componentes de sua pilha de software, incluindo o Ember Data, uma biblioteca de dados e o Ember Inspector, uma extensão de teste para depurar aplicativos.

Cursos gratuitos de JavaScript para iniciantes

Até onde sei, estudar JavaScript não está incluso em cursos de CC, nem em cursos técnicos (quando muito um basicão para web designers). Por isso, estudar e achar cursos acaba ficando a critério daqueles que querem aprender a programar com essa linguagem.

Acredito que não seja somente comigo, mas quando quero aprender uma tecnologia nova, prefiro não investir dinheiro antes de saber se realmente vale apena me aprofundar no conhecimento. Com o fim de ajudar que está começando ou migrando, estou colocando aqui uma lista de cursos Grátis e material de JavaScript para iniciantes.

Udacity – JavaScript básico

Segundo eles: “Neste curso, você vai explorar a linguagem de programação JavaScript, criando uma versão interativa do seu currículo. Você vai aprender os fundamentos de programação JavaScript que você precisa enquanto a constrói novos elementos e seções para melhorar o seu currículo.”

 

W3Cx – JavaScript Introduction (Ingles)

Ótimo curso feito pela equipe da W3C (não confundir com W3schools). Nele, além do JavaScript básico, é visto várias coisas que se tornam necessárias para aqueles que precisaram trabalhar com aplicações web
Continue lendo “Cursos gratuitos de JavaScript para iniciantes”

O que é Aurelia?

Aurelia é uma coleção de módulos de JavaScript modernos, que, quando usados ​​em conjunto, funcionam como uma poderosa plataforma para criar aplicativos de navegador, desktop e móveis, todos de código aberto e construídos em padrões de web aberto.

Ao invés de ser uma estrutura monolítica, o framework é dividido em uma coleção de módulos orientados a recursos. Exemplos de módulos de recursos incluem metadados, injeção de dependência, binding, templating, roteador e muito mais. Cada módulo é escrito usando ECMAScript (aka JavaScript) ou TypeScript (um superconjunto estrito de JavaScript que adiciona verificação de tipo de compilação). Muitos desses módulos podem ser usados ​​individualmente em qualquer tipo de projeto de JavaScript, incluindo Node.js.

Criação de aplicativos

Os módulos de Aurelia podem ser usados ​​para muitas finalidades, mas seu verdadeiro poder reside em usá-los juntos como uma plataforma de aplicativos de front-end. Se o seu objetivo final é criar experiências ricas e envolventes para seus clientes, encontrando ou excedendo o que é encontrado em aplicações nativas modernas, a Aurelia oferece os meios.

Através de seu rico modelo de componentes, composição dinâmica de UI, roteamento e extenso conjunto de plugins, a Aurelia fornece um conjunto abrangente de recursos e ferramentas para criar qualquer experiência de front-end que você possa imaginar, seja você visando o navegador, celular ou desktop.

Você pode achar que o Aurelia tenha um modelo de licenciamento caro ou seja de origem fechada, mas isso não é verdade. Ele é grátis e seu código é Open Source sob a licença MIT, uma licença muito permissiva usada por muitos projetos populares da web hoje.

Tanto os kits de inicialização e documentação do Aurelia estão disponíveis sob a licença Creative Commons. Também possui um Contrato de Licença de Colaborador (CLA) para aqueles que desejam se juntar à equipe principal trabalhando na Aurelia. Em última análise, isso significa que você pode usar Aurelia sem medo de repercussões legais e podemos construí-lo com a mesma confiança.

Benefícios técnicos

Existem muitas vantagens técnicas para usar a Aurelia. Neste artigo, você encontrará uma lista de pontos que pensamos serem interessantes. Em conjunto, hoje não existe outra estrutura de SPA que possa combinar Aurelia.

JavaScript moderno:

  • Totalmente escrito em ES2015 + baseado em padrões e TypeScript.
  • Compatível com a tecnologia JavaScript que virão nas futuras especificações do ECMAScript.
  • Suporte total tanto para Babel como para TypeScript.

DOM moderno

  • Aproveita as mais modernas API de DOM.
  • Bare “ao uso de metal” do DOM; nenhum invólucro de DOM para garantir o máximo desempenho e eficiência de memória.
  • Polvilhe automaticamente o DOM, quando apropriado, para suportar navegadores mais antigos.

Ferramentas modernas

  • Suporta ferramentas de construção modernas através da Aurelia CLI e Webpack, out-of-the-box.
  • Funciona bem com poderosas ferramentas de teste como Karma e Protractor.
  • Fornece um painel de depuração personalizado do Chrome, bem como um plugin do Código VS.

Qualidade do código

  • O código-fonte é coberto por um extenso conjunto de testes unitários.
  • Toda a fonte é totalmente equipada para o estilo e a consistência do uso de recursos em todas as partes.
  • Os arquivos d.ts do TypeScript e a documentação completa da API são fornecidos para todas as bibliotecas.

 

Veja mais no site deles: http://aurelia.io/

E para exemplos: http://aurelia.io/docs/overview/technical-benefits

Módulo para criação de tags e componentes

[download id=”390″]

Introdução

Nesse artigo serão mostradas funções que podem ser utilizadas para a criação de componentes HTML. O projeto será uma versão simplificada de uma biblioteca que estou montando para agilizar o desenvolvimento e gerenciamento de objetos criados dinamicamente.

Como requisito, você precisa ter conhecimentos básicos de JavaScript e HTML5, acesso a biblioteca CSS w3.css e um navegador atualizado que aceite o básico do ES6.

  • Criando as Tags básicas

    Como você deve saber, o JavaScript oferece uma função que permite a criação de qualquer tag. Basta fornecer corretamente o nome da tag como uma string por parâmetro que a função retornará o elemento para que você possa manipulá-lo. Segue abaixo um exemplo:

    document.createElement("p");

    O código acima retorna um elemento do tipo paragrafo. Ele pode ser manipulado (adicionadas, classes, estilo, texto, etc..) da mesma maneira que os elementos da função getElementById() também podem ser manipulados. Mas ele é simples e dependendo das necessidades, você acabará tendo diversos trechos de código onde cria uma tag, adiciona classes e adiciona conteúdo. Para nos ajudar com isso, teremos as duas seguintes funções:

    function CriarElementoComClasse(nomeTag, listaDeClasses) {
        let element = document.createElement(nomeTag);
        if (listaDeClasses) {
            listaDeClasses.forEach(classe => {
                element.classList.add(classe);
            });
        }
        return element;
    }
    
    function CriarElementoComClasseTexto(nomeTag, listaDeClasses, texto) {
        let element = CriarElementoComClasse(nomeTag, listaDeClasses);
        element.innerHTML = texto;
        return element;
    }

     

    A primeira função recebe uma string com o nome da tag e uma lista de strings com o nome das classes que serão adicionadas. Ela cria o elemento, confere se a lista não é nula ou indefinida e a percorre adicionando as classes uma a uma.

    A segunda função faz o mesmo que a primeira, mas também adiciona texto dentro da tag. É importante notar que esta função depende da anterior e que texto talvez seja uma definição muito ampla pois foi utilizado a propriedade innerHTML que permite que sejam adicionadas mais coisas. Por enquanto vamos com a ideia de adicionar texto, isso a torna uma boa candidata para criar <span>, <p>, <strong>, stc…

  • Criando Links e Imagens

    Como a parte simples e mais abstrata já foi feita, agora iremos implementar funções que nos auxiliaram a criar mais rapidamente tags de imagens e para links de hipertexto. Segue abaixo o código de implementação de ambas funções

    function CriarImagemCompleta(src, imgClasses, imgAlt = "imagem") {
        let element = CriarElementoComClasse("img", imgClasses);
        element.alt = imgAlt;
        element.src = src;
        return element;
    }
    
    function CriarLinkCompleto(link, linkClasses, texto) {
        let element = CriarElementoComClasseTexto("a", linkClasses, texto);
        element.href = link;
        return element;
    }

    Após analisar o código você poderá notar que ambas funções reutilizam as rotinas que criamos anteriormente, sendo que apenas implementamos o código que falta para que a criação de tag de imagem e link possam ser implementadas sem precisarmos ficar repetindo o código adicional que cada uma precisa toda vez que precisarmos cria-las.

  • Anexando diversos elementos juntos

    Até agora vimos 4 funções que nos permitem criar alguns componentes que podem ser bem úteis. No entanto, se você trabalha com códigos mais extensos, coisas parecidas ou piores que o código abaixo podem aparecer

    let umaDiv = CriarElementoComClasse("div", ["classe1","classe2","classe3"]);
    let umaDiv2 = CriarElementoComClasse("div",["classe1","classe2","classe3"]);
    let umSpan = CriarElementoComClasseTexto("span", ["classe2","classe2","classe3"],"Lorem Ipsum"); 
    let umSpan2 = CriarElementoComClasseTexto("span", ["classe2","classe2","classe3"],"Lorem Ipsum dolor"); 
    let umaImagem = CriarImagemCompleta("https://mundojs.com.br/images/logo.png", ["classe1","classe2","classe3"], "Logo MundoJS"); 
    let umLink = CriarLinkCompleto("https://mundojs.com.br", ["classe1","classe2","classe3"], "MundoJS"); 
    let umLink2 = CriarLinkCompleto("https://mundojs.com.br/artigos/index.html", ["classe1","classe2","classe3"], "MundoJS - artigos");
    
    umaDiv.appendChild(umSpan); 
    umaDiv.appendChild(umaImagem);
    umaDiv.appendChild(umLink); 
    umaDiv.appendChild(umaDiv2); 
    
    umaDiv2.appendChild(umSpan2); 
    umaDiv2.appendChild(umLink2);

    E quanto mais elementos tivermos, maior será o comprimento de código repetido. Por isso, iremos criar uma função ao qual passamos o elemento onde será feito o append e uma lista dos arquivos que serão adicionados a ele.

    function AppendElementos(pai, filhos) {
        filhos.forEach(element => {
            pai.appendChild(element);
        });
    }

    E isso nos permite transformar os diversos append anteriores em 2 linhas de código

    AppendElementos(umaDiv, [umSpan, umaImagem, umLink, umaDiv2]); 
    AppendElementos(umaDiv2, [umSpan2, umLink2]);
  • Criação de Thumbnail

    Por padrão, um thumbnail é uma área com uma imagem no topo seguida de um titulo e/ou texto descritivo. O interessante deste tipo de componente o fato que ele pode ser facilmente incorporado em páginas responsivas devido ao seu formato. Antes de continuarmos, no seu arquivo CSS será necessário adicionar as seguintes classes:

    .mundojs-media{
        overflow: hidden;
        display: block;
        text-decoration: none;
        -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    }

    Segue abaixo o código para implementarmos thumbnails utilizando nossas funções já criadas e a formatação fornecida pelo w3.css:

    function CriarThumbnail(linkArquivo, titulo, descricao, imagem) {
        let linkThumbnail = CriarLinkCompleto(linkArquivo, ["w3-third", "w3-margin-bottom", "mundojs-media"]);
        let divCard = CriarElementoComClasse("div", ["w3-card-4"]);
        linkThumbnail.appendChild(divCard);
    
        let imgThumbnail = CriarImagemCompleta(imagem, ["w3-image"]);
    
        let divConteudo = CriarElementoComClasse("div", ["w3-container", "w3-center"]);
        let h4Titulo = CriarElementoComClasseTexto("h4", null, titulo);
        let pDescricao = CriarElementoComClasseTexto("p", ["w3-small"], descricao);
    
        AppendElementos(divConteudo, [h4Titulo, pDescricao]);
        AppendElementos(linkThumbnail, [imgThumbnail, divConteudo]);
    
        return linkThumbnail;
    }

    Você poderá ver pelo código que ele sempre terá 1/3 do comprimento do container dele em telas maiores e 100% em telas de smartphones. Isso pode ser adaptado simplesmente trocando as classes fornecidas no elemento linkThumbnail.

  • Criado um Media Card

    Por último criaremos o media card, uma espécie de cartão que possui uma imagem em sua lateral. Ele é um estilo bem utilizado para a criação de objetos representando notícias, lista de notícias ou posts com o gravatar.

    function CriarMedia(linkArquivo, titulo, descricao, imagem) {
        function AreaImagem() {
            let divImagem = CriarElementoComClasse("div", ["w3-quarter"]);
            divImagem.appendChild(CriarImagemCompleta(imagem, ["w3-image"]));
    
            return divImagem;
        }
    
        function AreaConteudo() {
            let divConteudo = CriarElementoComClasse("div", ["w3-threequarter", "w3-container", "w3-margin-bottom"])
            let h2Titulo = CriarElementoComClasseTexto("h2", ["w3-xlarge"], titulo);
            let pDescricao = CriarElementoComClasseTexto("p", null, descricao);
            let linkArquivo = CriarLinkCompleto(linkArquivo, ["w3-btn", "w3-theme-l4", "w3-border", "w3-border-theme", "w3-round-large"], "Saiba Mais");
    
            AppendElementos(divConteudo, [h2Titulo, pDescricao, linkArquivo]);
    
            return divConteudo;
        }
    
        let divMedia = CriarElementoComClasse("div", ["w3-row", "w3-margin", "w3-border-bottom", "w3-border-theme-l4", "mundojs-media"]);
    
        AppendElementos(divMedia, [AreaImagem(), AreaConteudo()]);
    
        return divMedia;
    }

    Apesar de ser um pouco mais extenso que as funções anteriores, o resultado fica bem legal e pode ser utilizado facilmente para gerar uma lista de newsfeed, comentários de posts entre outras opções.

Conclusão

Como você pode ver, foi possível criar diversas ferramentas para auxiliar na montagem de itens na tela. Na minha experiência pessoal, eles não auxiliam muito se você utiliza um site estático. No entanto, caso você esteja trabalhando com dados dinâmicos ou simplesmente informações que se repetem muito, este tipo de técnica auxilia muita a reduzir o HTML e o JS comparado a criação manual sob demanda.

Gerenciando os plug-ins do Facebook em arquivos JS

[download id=”383″]

Introdução

Nesse artigo rápido, veremos como é possível centralizar o controle das tags do Facebook em um único arquivo JavaScript. O objetivo é facilitar o gerenciamento dos componentes que eles oferecem e remover todas as tags <script> com código embutido.

Para entender este artigo você precisará ter conhecimentos básicos de HTML, JS e da API de plug-ins sociais do Facebook. Apesar dos plug-ins serem um pouco mais complexos do que os iniciantes estão acostumados, a documentação é bem direta e boa parte do código é gerado automaticamente.

Passo 1

A primeira coisa que você precisa fazer é criar um arquivo JS onde colocaremos o código. Você pode nomeá-lo como quiser, mas para esse artigo o chamaremos de “codigoFB.js”. Dentro dele adicione o evento conforme abaixo e já explicaremos o que ele significa.

window.onload = function () {
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.10&appId=9999999";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

O que fizemos aqui foi o seguinte, estamos dizendo que ao carregar a tela deve ser executada uma função. Por enquanto a única coisa que colocamos dentro desta função é outra função que é a fornecida pelo Facebook (ver códigos da API no link deles) para ser possível utilizar os plug-ins deles.

Importante: Se você simplesmente copiar e colar, não dará certo pois o appID não é valido, será necessário ter o seu appID e/ou copiar o mesmo código fornecido em paginas como https://developers.facebook.com/docs/plugins/like-button.

Passo 2

A segunda coisa que faremos serão os objetos de configuração. Neste artigo, para fins de simplificação, iremos configurar apenas dois plug-ins, o de curtir e o de comentários.

No botão de comentários padrão fornecido no site, você pode ver que ele tem uma classe e 2 atributos.

<div class="fb-comments" 
    data-href="http://www.linkpaginaseusite.com.br" 
    data-numposts="5"></div>

Vamos tranforma-los em um objeto com o seguinte formato

let configFbComments = {
    classes: ["fb-comments"],
    atributos: [{
        nome: "data-href",
        valor: window.location.href
    },
    {
        nome: "data-numposts",
        valor: 5
    }]
};

Como você pode ver, o objeto é composto por duas propriedades, classes e atributos, e elas contem respectivamente um vetor de strings e um vetor de objetos. Note que como o comentário precisa utiliza o link da sua página como referência, para podermos reutilizar o objeto foi colocado o window.location.href que mudará em cada página.

Para o botão de curtir (e compartilhar), faremos um exemplo um pouco mais complexo.

let configFbLike = {
    classes: ["fb-like","FloRight"],
    atributos: [{
        nome: "data-href",
        valor: window.location.href
    },
    {
        nome: "data-layout",
        valor: "button_count"
    },
    {
        nome: "data-action",
        valor: "like"
    },
    {
        nome: "data-size",
        valor: "small"
    },
    {
        nome: "data-show-faces",
        valor: "true"
    },
    {
        nome: "data-share",
        valor: "true"
    }]
};

Aqui temos duas classes, sendo que “fb-like” é obrigatória, e diversos atributos, mas a lógica ainda é a mesma, um objeto com duas propriedades que são vetores. Agora precisamos de uma forma inteligente de processar nossos a plug-ins sem precisarmos nos importar com quais ou quantos dados são fornecidos, o que importa é apenas o formato. Segue abaixo o código para processarmos eles:

function configurarPlugin(elementoHTML, config) {
    elementoHTML.classList.add(config.classes);

    config.atributos.forEach(attr => {
        elementoHTML.setAttribute(attr.nome, attr.valor);
    });
}

O que estamos fazendo aqui? Estamos passando um elemento HTML e o objeto de configuração. Utilizando os métodos do classList, adicionamos todas as classes e após, percorremos o vetor de atributos e os adicionamos um a um ao elemento.

Após isso, basta fazermos a chamada das configurações após termos carregado a função do Facebook que adicionamos la no começo da página. No meu caso, eu fiz uma função (pluginsFacebook) que as adiciona e passa 2 divs que tenho na página, mas seria possível chama-las direto também.

window.onload = function () {
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.10&appId=999999";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    pluginsFacebook();
}

function pluginsFacebook() {
    configurarPlugin(document.getElementById("btnCurtirFb"), configFbLike);
    configurarPlugin(document.getElementById("frameComentariosFb"), configFbComments);
}

Conclusão

Como podemos ver, é possível separar a lógica de programação fornecida pelos plug-ins sociais do Face sem afetar negativamente a experiência do usuário. Pessoalmente eu prefiro este formato pois permite que a pessoa acessando veja o conteúdo da página antes do processamento deles iniciar, o que causa a impressão de conteúdo carregado mais rápido. Existem outros jeitos de fazermos o código acima, mas acredito que está tenha sido uma das formas mais rápidas e simples de implementar a funcionalidade proposta.

Crie código de barras em javascript com JsBarcode

[download id=”265″]

O JSBarcode é uma biblioteca JavaScript que permite montar em segundos um gerador de código de barras que é versátil e bonito. O código fonte é leve (menos de 50KB), podendo ser utilizado com o mínimo de impacto na aplicação web. Além disso ele permite a customização de diversas propriedades, tais como dimensões, margem e tipo de código de barras.

Exemplo Básico

A implementação dele é simples, basta baixar o código fonte ou fazer o link direto com o site da CDN, criar uma TAG <SVG>, chamar a função JsBarcode(elemento, valor) e pronto. Veja o Exemplo abaixo:

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
        <script>
            function GerarCódigoDeBarras(elementoInput){
                /*A função JsBarcode não aceita string vazia*/
                if(!elementoInput.value){
                    elementoInput.value = 0;
                }
                JsBarcode('#codBarras', elementoInput.value);
            }
        </script>
    </head>
    <body>
        <div>
            <label>Digite um valor</label>
            <input type="text" onblur="GerarCódigoDeBarras(this)"/>
        </div>
        <svg id="codBarras"></svg>
    </body>    
</html>

[download id=”268″]

Como você pode ver o código é simples e a chamada também. Caso seu item não tenha Id do svg, é possível seleciona-lo também pela classe, pelo nome da tag ou pelo elemento, mas lembrando que mais itens poderão ser alterados com essa seleção.

Exemplo com opções

Conforme já mencionado anteriormente, é possível editar as configurações do código de barras, para isso basta passarmos um parâmetro adicional na hora de chamar a função JsBarcode. Veja o exemplo:

<html>
<head>
    <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
    <script>
        function GerarCódigoDeBarras(elementoInput) {
            let configuracao = {
                format: "pharmacode",
                lineColor: "#0aa",
                width: 4,
                height: 40,
                displayValue: false,
                valid: function (valido) {
                    if (valido) {
                        document.getElementById("mensagem").innerHTML = "";
                    } else {
                        document.getElementById("mensagem").innerHTML = "Valor invalido";
            
                    }
                }
            };
            JsBarcode('#codBarras', elementoInput.value, configuracao);
        }
    </script>
</head>
<body>
    <div>
        <label>Digite um valor</label>
        <input type="text" onblur="GerarCódigoDeBarras(this)" />
    </div>
    <svg id="codBarras"></svg>
    <p id="mensagem"></p>
</body>
</html>

[download id=”271″]

Segue abaixo as opções que podem ser configuradas com seus respectivos tipos e valores. Para mais detalhes, acesse o link deles noGithub que além da definição completa de cada um, também oferece exemplos.

Opção Valor Default Tipo
format “auto” (CODE128) String
width 2 Number
height 100 Number
displayValue true Boolean
text undefined String
fontOptions “” String
font “monospace” String
textAlign “center” String
textPosition “bottom” String
textMargin 2 Number
fontSize 20 Number
background “#ffffff” String (CSS color)
lineColor “#000000” String (CSS color)
margin 10 Number
marginTop undefined Number
marginBottom undefined Number
marginLeft undefined Number
marginRight undefined Number
flat false Boolean
valid function(valid){} Function

Exemplo com as opções definidas no HTML

O último exemplo seta os valores das opções dentro da própria tag HTML, permitindo que os atributos sejam definidos de forma explicita nas tags e fornecendo uma forma alternativa de carregar os códigos de barra.

<html>
<head>
    <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
    <script>
        window.onload = function () {
            JsBarcode(".barcode").init();
        }
    </script>
</head>
<body>
    <svg class="barcode"  
            jsbarcode-format="upc" 
            jsbarcode-value="123456789012" 
            jsbarcode-textmargin="0" 
            jsbarcode-fontoptions="bold">
    </svg>
</body>
</html>

[download id=”274″]

Conclusão

Essa foi uma abordagem prática no uso do JsBarcode que mostra como é fácil utilizar a biblioteca. Apesar de ser uma ferramenta útil, foi observado também que o programador precisa ter conhecimento das validações de cada tipo de código pois em alguns casos a função JsBarcode simplesmente irá jogar uma exceção ou não renderizará, isso precisará ser tratado de acordo com cada caso e utilizando a função valid que nas opções. Para mais informações acesse o site fornecido abaixo.

Construindo um slider e parallax com JavaScript

[download id=”257″]

Nesse artigo prático e rápido você verá como construir um slider utilizando apenas o JavaScript, sem precisar importar nenhuma biblioteca e ou editar o CSS fora das funções. O objetivo aqui é trabalhar os conhecimentos de manipulação do DOM e o básico de estrutura de dados.

Configurando o HTML

Então vamos começar. Primeiro é necessário preparar no HTML o local onde será definido slider. Qualquer TAG de bloco serve, mas para simplicidade e por boas práticas, vamos utilizar uma DIV com o ID igual a slider. O código JavaScript ficará separado, mas por se tratar de um exemplo rápido, vamos manter tudo dentro da mesma pasta (incluído as imagens que serão adicionadas).

<html>
<head>
</head>
<body>
  <div id="slider"><div>
  <script src="slider.js"><script>
</body>
</html>

Adicionando uma imagem de fundo

Certo, está área terá o local que utilizaremos como referência, mas neste exemplo, as imagens serão parte do plano de fundo, então além de definir qual imagem aparecerá, teremos que estabelecer um tamanho para ela. Então quando a janela estiver carregada, vamos chamar a função criarSlider() que no momento apenas colocará uma imagem de fundo com tamanho igual a 40% da altura da tela.

window.onload = function(){
  criarSlider();
}
 
function criarSlider(){
  let slider = document.getElementById("slider");
  slider.style.height = "40vh";
  slider.style.backgroundSize = "cover";
  slider.style.backgroundImage = "url(imagem1.jpg)";
}

Adicionando o efeito Parallax

Para fazermos esse efeito de forma fácil e prática, utilizaremos a propriedade “backgroundAttachment” e a definiremos como “fixed”. OBS.: Ainda existem navegadores que não dão suporte ao atributo “fixed” (confira https://caniuse.com/#search=background-att).

function criarSlider(){
  let slider = document.getElementById("slider");
  slider.style.height = "40vh";
  slider.style.backgroundSize = "cover";
  slider.style.backgroundImage = "url(imagem1.jpg)";
  /*Efeito Parallax*/
  slider.style.backgroundAttachment = "fixed";
}

Definindo uma lista de imagens

Com esse código já é possível rodar a tela inicial e você verá sua imagem ocupado todo o espaço da div e com a altura fixa e possui o efeito. No entanto, nada acontece. Para mudarmos isso, vamos utilizar a função JavaScript chamada setInterval() que fará uma ação fixa a cada intervalo de tempo.

Poderíamos definir as imagens que serão passadas de forma fixa, mas para dar mais flexibilidade, vamos coloca-las em um vetor para que uma quantidade indefinida de arquivos possa ser utilizada, reduzindo assim o retrabalho futuro (basta adicionar a nova imagem ao vetor).

Para esta sessão, serão necessárias 3 implementações

  • Adicionar o vetor no começo da função
let imagens = ["imagem1.jpg","imagem2.jpg", "imagem3.jpg"];
  • Substituir a backgroundImage pelo primeiro item do vetor
slider.style.backgroundImage = "url(" + imagens[0] + ")";
  • Adicionar uma variável de contador e a função setInterval() conforme abaixo
let i = 1;
  setInterval(function () {
    slider.style.backgroundImage = "url(" + imagens[i] + ")";
    i = i + 1;
    if (i === imagens.length) {
    i = 0;
  }
}, 3000);

Melhorando o efeito

Você deve ter notado que a troca de imagens está meio crua, apenas piscando rapidamente e alternado entre elas. Para deixar esse efeito mais suave, adicione uma transição entre elas conforme a linha abaixo (pode ser colocado abaixo do style.backgroundSize):

slider.style.transition = "all 400ms linear";

Melhorando o código

Agora temos um slider parallax com um efeito de transição de imagens melhorado. Mas nosso código permite montar apenas um slider por tela pois todas as variáveis foram montadas dentro da função. Vamos passar como parâmetros da função os valores do Id do slider, o vetor de imagens, se será parallax e o tempo de troca entre imagens. Com isso teremos uma função que permite fazer diversos sliders com configurações diferente entre eles e sem precisar alterar muito o código como você pode ver abaixo:

function criarSlider(slider, imagens, isParalalx, tempo){
  let slider = document.getElementById("slider");
  slider.style.height = "40vh";
  slider.style.backgroundSize = "cover";
  slider.style.backgroundImage = "url(" + imagens[0] + ")";
  slider.style.backgroundAttachment = "fixed";
 
  if (isParalalx) {
    slider.style.backgroundAttachment = "fixed";
  }
 
  let i = 1;
  setInterval(function () {
    slider.style.backgroundImage = "url(" + imagens[i] + ")";
    i = i + 1;
    if (i === imagens.length) {
    i = 0;
    }
  }, tempo);
}

Conclusão

O projeto apresentado já é funcional e poderia ser aplicado em qualquer website, mas caso você queira se desafiar, existem coisas que podem ser implementadas. As variáveis de configuração poderiam ser em apenas um objeto com os todos os parâmetros que possam ser configurados e valores padrões (default), poderiam haver conferencias para garantir que dados incorretos ou nulos não travem o slider entre outras possibilidades.

De toda forma, o código do projeto pode ser utilizado em qualquer website pois oferece todas as funcionalidades necessárias para a montagem de forma simples e rápida. Caso você tenha gostado deste artigo, por favor, compartilhe-o e deixe seu comentário. Se você achou um bug ou tem uma sugestão, por favor avise que atualizarei o código.

FileSaver: Salve arquivos com JavaScript

 

[download id=”245″]

Este tutorial serve para quem precisa criar pequenos arquivos de texto e salva-los em um formato que o pc do usuário final possa ler. Para isso utilizaremos a biblioteca do FileSaver.js para eftuar a lógica de criação e baixar o arquivo na máquina cliente. Então vamos começar!

Passo 1

Baixe o script do FileSaver.min.js no link (https://github.com/eligrey/FileSaver.js/) ou junto com nosso código fonte acima e copie-o para o seu local de trabalho. Caso queira conhecer melhor o código, você pode baixar a versão não minificada, em qualquer outro caso não vale a pena.

Passo 2

Vamos criar alguns inputs html para que possamos salvar nossos dados. Precisaremos de um input para o nome do arquivo, um textarea para o texto do arquivo e um botão para iniciarmos a rotina.

<html>
<head>
   <style>
   div {
     min-width: 300px;
     width: 50%;
     margin: 10px auto;
   }
   input,
   textarea {
     width: 100%;
     min-width: 250px;
   }
   </style>
</head>
<body>
   <h3>Salvar arquivo com JavaScript</h3>
   <div>
     <label for="input-fileName">Nome do Arquivo</label><br/>
     <input type="text" id="titulo" placeholder="Nome do Arquivo">
   </div>
   <div>
     <label for="textarea">Texto</label><br/>
     <textarea id="texto" placeholder="Digite um texto para salva-lo"></textarea>
   </div>
   <div>
     <button onclick="salvar()">Salvar</button>
   </div>
</body>
</html>

Passo 3

O código acima já serve como uma base simples para implementarmos nosso código. Vamos adicionar, antes da tag de fechamento do body, a biblioteca do FileSaver e logo após colocaremos a seguinte função JavaScript.

  <!-- Biblioteca que adicionara o código -->
   <script type="text/javascript" src="FileSaver.min.js"></script>
   <!-- função ao clicar em salvar -->
   <script>
   function salvar() {
      let texto = document.getElementById("texto").value;
      let titulo = document.getElementById("titulo").value;
      let blob = new Blob([texto], { type: "text/plain;charset=utf-8" });
      saveAs(blob, titulo + ".txt");
   }
   </script>
</body>
</html>

Como função do FileSaver que cria o arquivo precisa de um objeto blob para definir a formatação além do texto do arquivo, criamos o objeto utilizando o valor obtido no textarea com id texto e definimos que será codificado em utf-8 (valor padrão para formatação de texto no Brasil).

Tendo feito isso, basta chamar a função saveAs(), passando como parâmetros o blob e o título concatenado com o formato desejado. Note que você pode colocar outros formatos (ex.: XML, CSV), mas terá que garantir que o conteúdo possa ser lido pelo sistema que o abrir.

Passo 4)

O passo final é o teste. Rode o código e preencha os campos de título e texto para ver se ao salvar o arquivo para download aparecerá na sua tela. Ele apareceu? Tem conteúdo dentro? Se a respostas das perguntas anteriores for sim, então parabéns, seu código está funcionando.


Possíveis problemas

É necessário observar que nem todos s navegadores onde ele será utilizado dão suporte ao Blob e também, se o título ou o texto não existirem, talvez seja necessário informar o usuário ou colocar valores padrões para o título ou texto


Conclusão

Como é possível ver, criar um arquivo de texto utilizando apenas o JavaScript é super fácil. Caso você leve em consideração os possíveis problemas, você poderá fazer uma ferramenta mais flexível e completa que permita ao seu usuário criar e editar pequenos arquivos de forma rápida e eficiente