Tag: Saiba Mais

Publicado em

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

Publicado em

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.
Publicado em

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

Publicado em

Comparando JavaScript

Primeiro vou comparar JavaScript com linguagens que não são derivadas da linguagem C

 

JavaScript x Pascal

Pascal foi muito bom na época do Delphi7. Era muito integrado com o Windows. Naquela época o JavaScript estava começando.

O problema é que Delphi é praticamente só para Windows. Delphi ficou pra trás por causa da evolução dos browsers.

De certa maneira código Pascal/Delphi é muito bom pois permite ao programador acessar o hardware mais diretamente que js, mas, de certa maneira, Pascal perdeu a briga por causa da ‘portabilidade’ (que era e ainda é a vantagem dos browsers).

Um código escrito em JavaScript para browser roda no Windows, no Linux, no mac, no android… Pascal se tornou engessado.

Para alguns casos ainda vale a pena, mas JavaScript está muito mais acessível.

 

JavaScript x Python

Python é relativamente moderno. Python é uma linguagem interpretada (não compilada) assim como JavaScript. E isso parece ser uma tendência.

Escrever código JavaScript é ligeiramente mais fácil que escrever código em Python.

Em questão de portabilidade JavaScript ganha de longe porque todo dispositivo aceita. Python precisa ser instalado na maioria das vezes.

Em algumas vezes funciona como linguagem server-side, e nesses casos a performance de Python é comparável com a do JavaScript. Talvez Python até ganhe essa disputa.

Mas não ganha a guerra.

 

JavaScript x Asp (Vbscript)

Asp era uma opção. Existia a ‘browser wars’ e também existia a disputa entre PHP e Asp. Entre mySQL e SQL server. Entre Windows server e l.a.m.p.

Parece que isso evoluiu. Ouvi falar dos azure. Ouvi sobre os .net

Parece que ser parceiro da Microsoft tem suas vantagens. Tenho a impressão que existe um suporte ao consumidor. Quem continua investindo em Asp recebe junto no pacote acessória.

Mas de certo modo cai no mesmo buraco que o Delphi: faz software apenas para Windows.

Existe a opção Asp Windows-server, mas considero que a concorrência está na frente.

 

JavaScript x Assembly

Assembly parece ser a mais difícil de escrever. E parece que é a que dá ao programador maior domínio sobre o hardware. Em Assembly dá para fazer coisas que em JavaScript não dá.

Mas por ser tão difícil perde a disputa. E a questão da portabilidade é ainda mais severa. Parece que determinado código Assembly que funciona em um equipamento não funciona em outro determinado equipamento.

Por isso criaram as outras linguagens… o programador escreve o source em linguagem de auto nível e depois o compilador de cada máquina gera o Assembly específico.

 

JavaScript x HTML

HTML é uma linguagem ligada ao js. Na forma mais usual o JavaScript serve para alterar o HTML.

Mas o HTML não aceita instruções como o JavaScript. Html é uma linguagem de marcação.

 

JavaScript x CSS

Css é moderno. É a linguagem irmã-menor do trio: HTML, JavaScript e CSS.

É possível criar belas formas e animações interessantes com CSS, mas seu potencial é alcançado na junção com js.

 

JavaScript x SQL

Sql é uma linguagem tradicional. A história é que antigamente cada desenvolvedor armazenava os dados seguindo seu próprio padrão. Em um determinado momento decidiram facilitar e criaram o padrão SQL. A partir daí surgiu uma camada. Se antes o software era uma peça inteira, depois disso se dividiu em questões relativas a armazenagem de dados e questões relativas a como apresentar dados ao usuário e permitir que ele os edite.

SQL tem essa limitação. Não é para efeitos visuais. Serve por debaixo dos panos.

Agora vamos comprar JavaScript com linguagens que são derivadas da linguagem C

 

JavaScript x c

A linguagem c hoje em dia é referencial.

As outras linguagens são influenciadas por ela.

Ela é muito utilizada no ensino de linguagens de programação.

A sintaxe da linguagem C é a mesma da linguagem js.

Considero que JavaScript é descendente direta de C. A descendente mais famosa.

 

JavaScript x Java

Java também é descendente de C. A descendente mais certinha.

Funciona como linguagem desktop, apesar de que eu não recomendo. E também funciona como server-side, mas eu também não recomendo. Para mim a gloria do Java é ser a linguagem oficial do android.

São duas linguagens em níveis diferentes. Apesar de serem parecidas e terem o nome parecido.

Java é bem mais difícil porque mostra ao programador o hardware.

 

JavaScript x PHP

PHP já reinou absoluto no server-side. Apesar da concorrência com a Microsoft.

Agora concorre com nodejs, Python, Java e Microsoft. E outras.

Também é descendente de C.

É a linguagem C com o símbolo de dólar na frente dos nomes das variáveis.

Eu ainda vivo na época do PHP…

Gosto de PHP server-side e JavaScript client-side

E agora vou comparar JavaScript com ela mesma

 

JavaScript x JavaScript server-side

A linguagem JavaScript é muito permissiva. O programador pode escrever a mesma instrução de várias maneiras diferentes. Nada é tipado.

Isso facilita muito pra quem tá começando.

E oferece a possibilidade de o desenvolvedor fazer de várias maneiras.

Mas nem sempre isso é vantagem.

Considero que o server deve ser rápido na sua simples tarefa de receber a ‘requisição’, buscar como ‘resolvê-la’ e entregar o HTML para o browser.

E a permissividade pode acarretar perda de performance pelo tempo do server ‘entender’ um comando e pelo programador optar por um paradigma e abrir mão de outros…

Como disse acima: gosto de PHP.

 

JavaScript x JavaScript unity

A unity permite que o usuário codifique em JavaScript. Isso é bom pois facilita para o usuário.

Em relação ao JavaScript tradicional, a diferença está no interpretador.

No js tradicional é o browser que executa os comandos, no caso da unity o compilador lida com outros objetos.

Nos dois casos, escrever código JavaScript é abrir mão de lidar diretamente com o hardware.

Para finalizar afirmo que JavaScript é minha linguagem de programação favorita. Por ser executada em qualquer dispositivo.

Publicado em

Iniciando com Chart.js

 

[download id=”404″]

Caso queira ver meu próximo artigo, acesse: Gráficos Dinâmicos com Eventos – Chart.js

Hoje em dia, criar gráficos do zero é uma missão complicada, pois além de ter que escrever todo o Javascript também precisamos pensar no design responsivo, felizmente temos bibliotecas que facilitam nossa vida e deixam o trabalho ainda mais rápido.

O Chart.js é uma biblioteca muito utilizada pela comunidade, é uma biblioteca excelente e muito fácil de usar, mesmo se você não tiver conhecimentos avançados de Javascript você vai conseguir criar gráficos bons, bonitos e responsivos.

Importando Chart.js

Para começar, precisamos escolher a forma de importação, podemos fazer isso por um CDN ou fazendo download.

Existem dois tipos de arquivos Chart.min.js e Chart.js, os arquivos com a extensão .min.js são arquivos que foram minificados, comprimidos para que o carregamento em tela seja mais rápido.

Se você deseja utilizar um CDN, basta clicar neste Link para pegar a versão mais recente do Chart.js ou simplesmente copiar a linha de código abaixo e colar no corpo do seu HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

Se você prefere fazer download dos arquivos do Chart.js basta clicar neste Link para fazer o download e fazer uma importação normal de Javascript.

<script src="SuaPasta/Chart.min.js"></script>

Gerando o primeiro gráfico

A primeira coisa que precisamos para gerar o nosso plano cartesiano é criar uma tag canvas no HTML e atribuir um id para ela:

<canvas id="primeiroGrafico"></canvas>

Indo para o arquivo Javascript, precisamos criar uma variável capturando nosso canvas e contexto:

let primeiroGrafico = document.getElementById('primeiroGrafico').getContext('2d');

O próximo passo é criar outra variável e instanciar a classe do chart.js passando por parâmetro o nosso canvas e um Objeto Javascript de preferencias deste gráfico:

let primeiroGrafico = document.getElementById('primeiroGrafico').getContext('2d');
                        
let chart = new Chart(primeiroGrafico, {});

É nesse objeto que vamos configurar nosso gráfico, em primeiro lugar vamos dizer qual é o tipo de gráfico que queremos, usando a propriedade type, atribuindo a ela o tipo que desejamos, os tipos que o chart.js disponibiliza são line (gráfico comum de linhas), bar (gráfico de barras), pie (gráfico de pizza), e muito mais, neste exemplo iremos utilizar o tipo line:

let chart = new Chart(primeiroGrafico, {
    type: 'line'             
});

Logo após iniciarmos o plano cartesiano, iremos configurar os dados do nosso gráfico usando a propriedade data:

let chart = new Chart(primeiroGrafico, {
    type: 'line',
                        
    data: {
        labels: ['2000', '2001', '2002', '2003', '2004', '2005'],
                    
        datasets: [
            {
                label: 'Crecimento Populacional',
                data: [173448346, 175885229, 178276128, 180619108, 182911487, 185150806]
            }
        ]
    }
});

A propriedade data também é um objeto, no exemplo acima configuramos duas propriedades para o objeto data, que são labels e datasets.

Na propriedade labels inserimos um array de string referente aos pontos do gráfico no eixo X

Na propriedade datasets inserimos um array de Objetos, referente aos dados apresentados no Gráfico, a propriedade label é o título do gráfico, na propriedade data inserimos um array de number referente aos pontos do Gráfico no eixo Y

Importante:

Você deve inserir um array de Strings na propriedade labels, na propriedade data você deve inserir um array de Number

Os itens do array de data serão ligados aos itens correspondentes no array de labels, é importante que os dois arrays estejam na ordem desejada, por exemplo:

labels: [‘2000’, ‘2001’, ‘2002’, ‘2003’, ‘2004’, ‘2005’]
data: [173448346, 175885229, 178276128, 180619108, 182911487, 185150806]

Nesse caso o primeiro ponto será colocado no ano 2000 (eixo X) e no número 173.448.346 (eixo Y), e assim sucessivamente


Continue lendo “Iniciando com Chart.js”

Publicado em

Como fazer Captcha com JavaScript

[download id=”227″]

O Captcha (Completely Automated Public Turing test to tell Computers and Humans Apart) é uma ferramenta utilizada para combater spam utilizando um método chamado de teste de Turing reverso. Normalmente o servidor pede ao usuário que termine um teste que não pode ser completado por um computador e por isso assume-se que quem respondeu corretamente é um humano.

Nesse artigo/tutorial veremos como fazer 2 “captchas” simples e rápidos usando apenas o JavaScript puro ao invés efetua-lo pelo servidor. A vantagem de fazê-lo assim é a de podermos manter o controle no front-end e fornecer uma proteção básica e rápida. Por outro lado, o código estará exposto para “não robôs” contorna-lo. Vale o julgamento de cada um para saber se este controle é o suficiente.

Soma de números aleatórios

Um jeito fácil de fazer um teste é fornecer 2 números aleatórios e pedir para o usuário digitar a resposta completa.

  • Primeiro precisamos do html que será usado no exemplo:
<form id="formContato">
   <p id="teste"></p>
   <input id="valida" type="text" />
   <input type="submit" value="Enviar" />
   <p id="mensagem"></p>
</form>
  • Agora criamos as variáveis para o cálculo e a reposta. Neste exemplo, criaremos 2 números aleatórios de 0 a 9 e vamos soma-los. Mas você poder fazer qualquer faixa e operação
var num1 = Math.floor(Math.random() * 10);
var num2 = Math.floor(Math.random() * 10);
var resposta = num1 + num2;
  •  Adicionamos um evento para que, ao carregar a página, seja capturado o parágrafo que fará a pergunta do teste e utilizamos as variáveis para gerar uma pergunta diferente cada vez que a página recarrega:
window.onload = function () {
   document.getElementById("teste").innerHTML = "qual a soma de " + num1 + " + " + num2 + "?";
}}
  • Dentro da função anterior, adicionaremos um evento ao ser feito o submit do formulário para conferirmos se a resposta está correta. Caso esteja, a submissão dele ocorre normalmente, senão trancamos o envio e mostramos uma mensagem na tela
document.getElementById("formContato").onsubmit = function (e) {
  if (document.getElementById("valida").value != resposta) {
    document.getElementById("mensagem").innerHTML = "A soma está errada!";
    e.preventDefault();
  }
}

Com isso temos todo o código necessário para fazer nosso captcha funcionar, execute a página e faça o teste você mesmo.

Teste x Valor

A segunda alternativa é um pouco mais complexa, mas ainda assim muito simples de implementar. Ela pode ser utilizada para mostrar uma imagem, dados complexos, etc… e um valor que corresponde a resposta correta.

  • Neste exemplo vamos tentar utilizar o máximo possível da lógica anterior para evitar complicar algo desnecessário. O form de antes será reutilizado exatamente como era e a lógica será novamente implementada dentro da função do evento window.onload
  • Vamos então adicionar as 2 variáveis que precisaremos. A Primeira será um vetor contendo objetos com 2 propriedades, teste e valor. A segunda é um gerador aleatório de índice.
window.onload = function () {
  var vetor = [
    { teste: "BBbananaAA", valor: "banana" },
    { teste: "AAabacaxiII", valor: "abacaxi" },
    { teste: "BBtomateAA", valor: "tomate" },
    { teste: "BBkiwiAA", valor: "kiwi" },
    { teste: "BBmelaoAA", valor: "melao" }
  ];
  var indice = Math.floor(Math.random() * 100) % 5;
}

Note que a propriedade teste do vetor é possível utilizar o caminho de uma imagem, uma pergunta, uma data, qualquer coisa. O importante é que o que for colocado no teste precisa ter uma reposta correspondente e a tag onde ele será inserido talvez precise ser trocada ou tratada (ex.: se for uma imagem, trocar para img com o src sendo definido pelo caminho da imagem).

  • Utilizando o gerador aleatório de índice, buscamos um item dentro do vetor e o exibimos para ser o teste. Lembrando que aqui meu vetor tem 5 itens, você provavelmente terá um vetor maior, então ajuste o gerador de acordo com a necessidade
document.getElementById("teste").innerHTML = "Qual a palavra formada pelas letras minusculas do texto " + vetor[indice].teste + "?";
  • Por último temos novamente o teste antes de efetuar o submit do formulário que irá conferir se a resposta é igual ao valor do objeto naquela mesma posição do vetor. Com isso saberemos se podemos deixar o formulário ser enviado ou se precisamos bloqueá-lo
document.getElementById("formContato").onsubmit = function (e) {
  if (document.getElementById("valida").value != vetor[indice].valor) {
    document.getElementById("mensagem").innerHTML = "Resposta Errada";
    e.preventDefault();
  }
}

Conclusão

Como você pode ver, criar um controle de captcha pode ser bem simples e ajudará a evitar e-mails spam, pessoas clicando em enviar sem parar e outros incômodos básicos. Claro que existem outros jeitos de fazer a mesma coisa usando bibliotecas prontas ou técnicas de programação diferentes, mas acredito que a forma apresentada ajude a todos, principalmente os iniciantes.

 

Publicado em

Diferença de className, classList e setAttribute

A linguagem JavaScript nos permite manipular elementos HTML de diversas formas e algumas vezes precisamos montar componentes “on the fly” pois eles dependem de atualizações vindas de fontes externas, ações do usuário ou que o banco de dados finalmente termine de processar algum calculo monstruoso que aquele cliente disse ser fundamental.

Quando isso acontece, precisamos trabalhar para criar elementos que além de uteis sejam bonitos e com isso vem as implementações de CSS. Agora você que a passou por isso pode ter se deparado com a possibilidade de usar os métodos

  • Classname
  • Classlist.add
  • Setattribute

A performance

Mas qual é o melhor? Vale a pena ter um método para definir classes e um para definir atributos? Tendo isso em vista, resolvi pesquisar para saber qual seria a melhor opção. Segundo o site https://measurethat.net/Benchmarks/Show/54/0/classname-vs-setattribute-vs-classlist, alguém já havia se perguntado o mesmo. Eles fizeram o seguinte teste que rodei no Chrome, Edge e Firefox:

<div id="foo"></div>

className

var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    element.className = "bar";
}

setAttribute

var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    element.setAttribute("class", "bar");
}
classList
var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    element.classList.add("bar");
}

Resultado em operações por segundo

Chrome

Firefox

Edge

Na prática

Mesmo sendo bem claro, o teste acima não é um absoluto, devemos levar em consideração outros fatores como manipulação, funcionalidades e boas práticas.

  1. className: Permite a manipulação das classes no formato string, nesse caso tendo uma string com todas as classes escritas dentro e permitindo a manipulação dos dados neste formato. Por ser uma funcionalidade antiga, é utilizado por diversos navegadores
  2. setAttribute: O set atribute simplesmente faz isso, define o valor dentro de um atributo. Existe o getAttribute que permite visualizar este valor, mas a manipulação é limitada a isso.
  3. classList: Coloca as classes dentro de uma lista para serem manipuladas de forma ordenada através de diversos métodos específicos. A nível de funcionalidade é a mais prática, mas além de ter uma performance inferior, não foi implementada em navegadores mais antigos.

Conclusão

Acredito que o className e o classList sejam os melhores candidatos. Se você precisa de performance e está apenas definindo e apagando classes, utilize o className. Agora se você tem um sistema que precisa procurar por classes dentro da tag ou adicionar apenas se não existe, poupe o esforço de criar uma lógica para isso e utilize o classList.

Publicado em

Como criar a tag para uma string

Essa é uma dica rápida para ajudar você a criar a tag HTML <a> com base em um link digitado dentro de uma string. Há alguns dias atrás tive esta duvida pois precisava ajudar a criar o link para as mensagens de texto que os clientes colocavam dentro de um sistema que estamos desenvolvendo. Então precisávamos fazer com que uma frase como:

Confira o site www.mundojs.com.br para mais informações, ou acesse nossa fanpage https://www.facebook.com/mundojs/ para receber mais noticias

Exibisse em tela da com os hiperlinks da seguinte forma:

Veja o site www.mundojs.com.br para mais informações, ou acesse nossa fanpage https://www.facebook.com/mundojs/ para receber mais noticias

Depois de pesquisar bastante por um solução que fosse A) inteligente e B) Eficiente, encotrei a seguinte função regex

function urlify(text) {
    let urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, function(url) {
        return '<a href="' + url + '">' + url + '</a>';
    })
    /* ou de forma mais resumida */
    /* return text.replace(urlRegex, '<a href="$1">$1</a>') */
}

let text = "Confira o site www.mundojs.com.br para mais informações, ou acesse nossa fanpage https://www.facebook.com/mundojs/ para receber mais noticias";
let html = urlify(text);

Com ela você poderá passar qualquer strings que você receberá seus links adaptados para que em uma pagina HTMl possa exibi-los corretamente.

Publicado em

Fundamentos de JavaScript e DOM que você precisa aprender

Com o aumento continuo do desenvolvimeno de dispositivos móveis híbridos utilizando principalmente HTML e JS como tecnologia na criação de telas e lógica. Está cada vez maior a tendência de colocar o máximo possível de processamento na máquina do cliente e com isso vieram diversas novas tecnologias e atualizações que todo desenvolvedor Front-end precisa se atualizar.

Antes de tentar conseguir aquele emprego utilizando JavaScript, você precisa tentar garantir que possui um bom entendimento dos seguintes fundamentos:

  • ES6: A versão atual do JavaScript é o ES2016 (conhecido como ES7), mas muitos desenvolvedores ainda não aprenderam a utilizar corretamente o ES6. É a hora de aprender os fundamentos: funções Arrow, rest/spread, parâmetros default(padrões), desestruturação, etc…
  • Closures: Aprenda como as funções JavaScript se comportam
  • Funções e Funções puras: Você provavelmente acredita que tem um bom entendimento de funções, mas o JavaScript tem alguns truques na manga. E você precisará aprender sobre funções puras antes de começar com programação funcional.
  • Básicos de programação funcional: Programação funcional produz programas compostos por funções matemáticas que evitam estados compartilhados e dados mutáveis. Já existem diversos Apps desenvolvidos em JavaScript que dependem bastante da programação funcional e por isso é importante ter um bom entendimento do básico desta técnica.
  • Métodos nativos: Aprenda sobre os métodos que que acompanham a linguagem e oferecem formas de manipular os tipos de dados básicos (vetores, objetos, strings e números).
  • Callbacks: Callback é uma função normalmente passada como argumento de outra função quando um evento ocorrer, ou quando uma parte de código receber uma resposta de que estava à espera.
  • Promise: Uma promise(promessa) é uma forma de lidar com valores futuros. Quando uma função retorna uma promessa, você pode colocar call-backs usando o método “.then()” para rodar após a promessa ser resolvida. O valor resultante é então passado para a função callback.
  • Ajax e chamadas em APIs: A maioria dos Apps interessantes eventualmente terão que se comunicar pela rede. Por isso é importante saber como fazer chamadas ajax para outras APIs
  • Classes: Classes é um conceito novo no JavaScript, que precisa ser estudado em detalhes pois questões como herança pode causar problemas.
  • Generators e async/await: Estão entre as melhores formas de escrever código assíncrono que parece síncrono. Existe uma curva de aprendizado, mas após passar por ela é possível programar de uma forma fácil para outros entenderem.
  • Node: Node permite que você use JavaScript no lado servidor, isso significa que os usuários você pode utilizar a mesma linguagem (com algumas coisas que precisam ser aprendidas) no front e back-end.

Conclusão

Como você pode ver, o caminho é longo e árduo, mas não se deixe desmotivar simplesmente pelo volume de estudo necessário. Quanto mais você aprende sobre o JavaScript, mais fácil será de entender o próximo estágio. O segredo aqui está em estudar continuamente, com calma e tentar se divertir enquanto você faz isso. Vamos lá!

Publicado em

Ferramentas para minificar arquivos JavaScript

As boas práticas de JavaScript e ordenação correta do código permite aos desenvolvedores trabalharem de forma eficiente, ordenada e facilita a leitura do código ao se trabalhar em grupo. No entanto esse código é feito para entendimento dos humanos trabalhando com ele e para as maquinas, muito do que se coloca é desnecessário. Para isso efetuamos a minificação.

As técnicas de minificação são utilizadas por muitos desenvolvedores de website devido ao fato de gerarem versões dos arquivos que são menores e por isso, carregam mais rápido e permitem que o site execute sem afetar a experiencia de uso dos usuários com conexões mais lentas.

Para a sorte de muitos, existem diversas ferramentas disponíveis online que permitem que a minificação seja feita sem muito trabalho ou erro. Segue abaixo algumas delas:

JSMin

 https://www.crockford.com/javascript/jsmin.html

O JSMin promete conseguir reduzir arquivos JavaScript em até 50% através da remoção de comentários, linhas de espaço e quebras de linhas desnecessárias. Ao mesmo tempo, o programa sabe levar em consideração que certas peculiaridades da linguagem para evitar erros ao minificar Strings e onde o código pode considerar um fechamento de bloco implícito.

Para executa-lo, basta fazer um download do executável em formato ZIP ou do código fonte em C fornecido no próprio site.

YUI Compressor

http://yui.github.io/yuicompressor/

O YUI Compressor é mantido pelo Yahoo e serve para minificar tanto arquivos JavaScript quanto CSS. Para comprimir os arquivos JS, ele depende do Rhino que é uma implementação Open Source do JavaScript escrita totalmente em Java.

Ele começa analizando o arquivo JavaScript de para entender como ele está estruturado e após, imprime o fluxo dos tokens, omitindo o máximo de caracteres de espaço em branco e substituindo todos os símbolos locais por um símbolo de letra onde quer que tal substituição seja apropriada

AjaxminUi

http://ajaxmin.codeplex.com/

O Microsoft Ajax Minifier permite que você melhore o desempenho de seus aplicativos da Web reduzindo o tamanho dos arquivos JavaScript e CSS. Além de minificá-los, é possivel mapas de origem para arquivos JavaScript.

Com a opção -analyze na linha de comando para fornecer verificação de sintaxe no estilo “Lint” e análise de variáveis de código. Já com a opção -pretty na linha de comando resultará em um formato multilinha de fácil leitura.

Google Closure Compiler

https://developers.google.com/closure/compiler/

O Closure Compiler é uma ferramenta JavaScript para tornar o download e execução dos arquivos JS mais rápidos. Ao invés de compilar o código fonte em código de máquina, ele compila o JavaScript em uma versão “melhor”, mas ainda em JavaScript. Além de remover comentários e minificar os arquivos fornecidos, ele também analisa e otimiza o código, podendo remover ou reescrever trechos do script.

Gulp

https://gulpjs.com/

O Gulp é uma ferramenta completa que permite aos desenvolvedores reduzir o número de tarefas repetitivas que estão envolvidas com o a criação e deploy de aplicações web.

Com ele é possível minificar, organizar e controlar o tanto os arquivos JavaScript quanto os CSS. Comparado com as ferramentas mostradas aqui anteriormente, o Gulp é certamente mais complexo, mas se bem utilizado é o que permite o melhor controle e manutenção de seu projeto.