Experiências do Google com armazenamento de valor-chave

O Google anunciou recentemente (link em Inglês) sua intenção de enviar duas novas propostas do WICG em uma versão futura do Chrome. KV Storage (armazenamento de valor-chave) tenta trazer a conveniência do LocalStorage, mas com melhor desempenho. A intenção é entregar isso como o primeiro exemplo de um módulo integrado, aproveitando a proposta de mapas de importação.

O ecossistema JavaScript teve uma abordagem um pouco fraturada para armazenar e armazenar dados em cache localmente. Conforme explicado por Philip Walton, engenheiro de software do Google que trabalha na plataforma Web,

Os fornecedores de navegadores e especialistas em desempenho da Web têm dito, durante boa parte da última década, que o localStorage é lento e os desenvolvedores da Web devem parar de usá-lo. Para ser justo, as pessoas dizendo isso não estão erradas. localStorage é uma API síncrona que bloqueia o thread principal e, sempre que você acessá-lo, você pode impedir que sua página seja interativa. O problema é que a API localStorage é tão tentadoramente simples, e a única alternativa assíncrona ao localStorage é o IndexedDB, que (vamos encarar isso) não é conhecido por sua facilidade de uso ou API de boas-vindas.

A Web Incubator CG (WICG) recentemente promoveu o KV Storage para fazer parte da especificação do W3C IndexedDB. KV Storage semelhante ao localStorage no utilitário, mas mais moderno e fica em camadas em cima do IndexedDB. A especificação exige que ele seja implementado pelos fornecedores de navegadores como um módulo interno e use o IndexedDB como seu backing store.

Exemplo de uso da API de armazenamento KV conforme fornecido pela especificação:

import { storage } from "std:kv-storage"; // specifier prefix not final

(async () => {
  await storage.set("mycat", "Tom");
  console.assert(await storage.get("mycat") === "Tom");

  for await (const [key, value] of storage.entries()) {
    console.log(key, value);
  }
  // Logs "mycat", "Tom"

  await storage.delete("mycat");
  console.assert(await storage.get("mycat") === undefined);
})();

Existe um polyfill de Armazenamento KV para navegadores que suportam IndexedDB.

O módulo KV Storage é resolvido conforme definido na iniciativa Biblioteca Padrão do JavaScript e seu suporte para mapas de importação.

Os mapas de importação não são um conceito novo e faziam parte de sistemas de módulos JavaScript anteriores, como AMD e sistemas de módulos em outras linguagens de programação. Sua inclusão com módulos ES padrão é nova. Essa proposta de mapas de importação fornece controle sobre as URLs obtidas por instruções de importação JavaScript e expressões import () e permite que o mapeamento seja reutilizado em contextos que não são de importação. Os mapas de importação permitem instruções de importação simplificadas, resoluções de módulo de fallback, polyfills para módulos internos e compartilhamento de contextos entre as tags de busca, de imagem e de link e muito mais.

A implementação bem-sucedida desses dois novos recursos altamente esperados deve melhorar significativamente o processo pelo qual os recursos são adicionados a versões futuras do JavaScript e fornecer APIs da Web adicionais convenientes. Importar mapas e módulos embutidos se esforçam para resolver uma parte faltante do manifesto web extensível.

Os desenvolvedores que desejam experimentar hoje com armazenamento KV pode alavancar o polyfill, ou instalar um Dev Chrome ou a versão Canárias de Chrome 74. Antes do lançamento dominante desses recursos, os desenvolvedores podem tornar esses recursos disponíveis para todos os usuários Chrome 74+ para domínios específicos, registando interesse no teste de original do Armazenamento KV.

JNation: Confêrencia para Desenvolvedores Java e JavaScript

A JNation é uma conferência de desenvolvedores atualmente incorporando Java e JavaScript em sua essência, as duas linguagens de programação mais populares do mundo. A conferência que traz a Portugal diversos desenvolvedores conhecidos mundialmente ao Convento São Francisco, em Coimbra.

Para aqueles que podem se viajar até o local, no ano passado, a conferência contou com mais de 450 participantes, sendo que quase metade dos participantes tinham mais de 6 anos de experiência.

 O orador mais esperado e já anunciado é Venkat Subramaniam, professor na Universidade de Houston, autor premiado de livros de referência para qualquer programador, tais como “Practices of an Agile Developer” ou “Rediscovering JavaScript”, e fundador da Agile Developer, Inc. É Venkat quem faz o keynote de abertura.

Depois desta primeira sessão, os participantes vão dividir-se em 4 salas onde mais de 24 oradores vão partilhar as suas experiências e apresentar novidades de Java e JavaScript. Até dia 31 de março, os bilhetes estão disponíveis em jnation.pt a um preço reduzido, havendo também descontos para estudantes. Mas há mais oradores já confirmados (veja a lista oficial: https://jnation.pt/our-speakers/): Emily Jiang (IBM), Paulo Lopes (Principal Software Engineer, Red Hat), Burr Sutter (Founder, DevNexus), Philipp Krenn (Developer Advocate, Elastic) e Carlos Sanchez (Principal Software Engineer, CloudBees).

Esta segunda edição do evento traz a novidade do JavaScript. A edição do ano passado foi dedicada exclusivamente à comunidade Java. Dois meses antes da conferência ter lugar, já não havia bilhetes para a participar na JNation. Como causa, Roberto Cortez e Bruno Baptista, organizadores do evento, apontam: “nunca tinha havido uma conferência de Java em Portugal que desse o privilégio de falarmos com pessoas que só vemos nos códigos dos programas com que trabalhamos”.

A patrocinar a conferência estão marcas como Idealista, Present Technologies, Mercedes-Benz.io, Red Hat, Wit Software, Mindera, Blip, La Redoute, Feedzai, Tomitribe, Bosh e Critical Software.

A JNation está a ser organizada por duas comunidades de programadores: a JUG Coimbra, comunidade de programadores de java, e a undefined.js, comunidade de programadores de JavaScript, e ainda pela AlphaCoimbra, um grupo que tem como missão sedimentar o ecossistema empreendedor e tecnológico na cidade.

Fonte:

Site Oficial da Jnation

Tataruga Imobiliaria

Como converter uma String em objeto HTML (DOM)?

Recentemente tive que trabalhar com a alimentação de dados vindos do servidor que guardavam dados HTML em formato String.

Para caso em que em bastava colar a resposta na tela, basta que se use o innerHTML que já deve ser conhecido por todos

let umTexto = "<h1>Titutlo</h1><p>Texto</p><p>Texto</p>";

document.geElementById("idDoObjeto").innerHTML = umTexto;

No entanto, dificilmente algo é tão simples quanto isso e esse no meu problema isso não era uma excessão. Veja o exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td colspan="3" style="padding:20px;background-color: burlywood;">
                <table class="subtabela">
                    <tr>
                        <td>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td colspan="3" style="padding:20px;background-color: burlywood;">
                <table class="subtabela">
                    <tr>
                        <td>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Giovanni Rovelli</td>
            <td>Italy</td>
        </tr>
        <tr>
            <td colspan="3" style="padding:20px;background-color: burlywood;">
                <table class="subtabela">
                    <tr>
                        <td>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Acima seria o perfeito, mas na verdade vem assim e no formato String:

let stringResultado = '<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr><tr> <td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr><tr> <td colspan="3" style="padding:20px;background-color: burlywood;"> <table class="subtabela"> <tr> <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td></tr></table> </td></tr><tr> <td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr><tr> <td colspan="3" style="padding:20px;background-color: burlywood;"> <table class="subtabela"> <tr> <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </tr></table> </td></tr><tr> <td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr><tr> <td>Magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Italy</td></tr><tr> <td colspan="3" style="padding:20px;background-color: burlywood;"> <table class="subtabela"> <tr> <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td></tr></table> </td></tr></table></body></html>';

De toda forma, apenas os itens dentro da table com class=“subtabela” precisavam ser listados e exibidos. Para alcançar isso, após pesquisa, descobri que o JavaScript possui uma classe muito útil chamada de DomParser.

let parser = new DOMParser();
let doc = parser.parseFromString(stringContendoHTML, "text/html");

Com isso, foi possível transformar o resultado da seguinte forma e manipular o objeto da mesma forma como se manipula o DOM. Podendo acessar elementos por Id, classe, etc…

let doc = new DOMParser().parseFromString(stringResultado, "text/html");

let subtabelas = doc.getElementsByClassName("subtabela");

for(let i = 0; i < subtabelas.length; i++){
    console.log("Tabela " + (i+1));
    console.log(subtabelas[i].innerText);
    console.log("------------------");
}

Espero que isso ajude outras pessoas. Qualquer coisa, deixe um recado aqui nos comentários.

Bibliotecas JavaScript para autenticação de usuários

A autenticação serve para identificar usuários e fornecer diferentes direitos de acesso e conteúdo, dependendo do seu id. Como novos tutoriais aparecem na web e mais pessoas tentam entender a equação de custo-benefício para implementar sua própria solução versus usar uma biblioteca ou serviço, reunimos uma breve revisão do que está por aí. Confira abaixo algumas opções:

1. Passaport
O Passport é um middleware de autenticação compatível com o Express para o Node.js. O objetivo do Passport é autenticar solicitações, o que é feito por meio de um conjunto extensível de plugins conhecidos como estratégias. Ele não monta rotas nem assume qualquer esquema de banco de dados específico, o que maximiza a flexibilidade e permite que decisões do nível do aplicativo sejam tomadas pelo desenvolvedor. A API é simples: você fornece ao Passport uma solicitação para autenticação e o Passport fornece ganchos para controlar o que ocorre quando a autenticação é bem-sucedida ou falha.

O Passport não é apenas uma biblioteca user-auth amplamente usada, é provavelmente a maneira mais comum de usar uma biblioteca externa para autenticação do usuário por desenvolvedores JS. Basicamente, esta biblioteca oferece o Node.js middleware relativamente flexível e modular que pode ser integrado em qualquer aplicação web baseada no Express.

2. Permit
Antes da Permit, a única opção real para bibliotecas de autenticação no Node.js era o Passport.js. O Permit facilita a adição de uma camada de autenticação a qualquer API do Node.js. Ele pode ser usado com qualquer uma das estruturas de servidor populares (por exemplo, Express, Koa, Hapi, Fastify) e pode ser usado para qualquer tipo de API (por exemplo, REST, GraphQL, etc.) devido ao seu design simples e não animado.

Também, o Permit permite que você se autentique por meio dos dois esquemas que a maioria das APIs precisa: um único token de portador secreto ou um conjunto de credenciais de nome de usuário e senha. Como a bilbioteca não é fortemente acoplada a um framework ou modelo de dados, ela fornece controle total sobre como você escreve sua lógica de autenticação – exatamente da mesma maneira que você escreveria em qualquer outro manipulador de solicitações.

3. Grant
Uma biblioteca relativamente nova e promissora com mais de 180 fornecedores suportados e um playground ao vivo para Express, Koa e Hapi com o OAuth Middleware. Se você quiser usá-lo com seu provedor OAuth particular, poderá especificar a chave necessária. Embora esta biblioteca já tenha tração (+1 K estrelas), ela tem relativamente poucos recursos, então tente com cuidado.

4. Feathers
Feathers é uma estrutura open source para o NodeJS que permite controlar seus dados por meio de recursos RESTful, soquetes e plug-ins flexíveis em tempo real. O Feathers também oferece módulos de autenticação e gerenciamento de autenticação que permitem adicionar verificação, redefinição de senhas esquecidas e outros recursos para autenticar as penas locais.

A ideia geral é combinar vários métodos de autenticação em uma infraestrutura flexível sob o mesmo teto.

5. Autenticação do Firebase (para pequenos aplicativos)
A autenticação do Firebase é necessária para fornecer aos seus usuários privilégios de leitura/gravação por meio de regras de segurança. Ainda não abordamos as regras de segurança, mas sabemos apenas que as regras de segurança dependem do status de autenticação de um usuário.

O Firebase envia o Google, o Facebook, o Twitter e o GitHub com suas próprias integrações de email/senha auth e OAuth2. Você também pode integrar seus próprios autores a ele para fornecer aos usuários acesso aos dados sem forçá-los a criar uma conta fora dos sistemas existentes.

O Firebase pode não ser a solução de longo prazo para gerenciar a autenticação do usuário em sua plataforma de dimensionamento (ou é?). Mas é uma maneira muito útil de realizar seus aplicativos implantados com o Firebase de maneira rápida e fácil.

Cursos completos de JavaScript

Seguindo a linha da postagem feita ano passado sobre Cursos completos que você não conhecia, estou postando uma nova lista atualizada para de cursos de empresas menos conhecidas, mas que nem por isso sejam ruins. Já cursei alguns dos listados abaixo e posso dizer que são muito bons.

Para ficar mais fácil de se organizar, os cursos estão agrupados pelas pessoas ou empresas que os criaram.


Alfamidia

Programação JavaScript Completo

Descrição: Um curso do básico ao avançado sobre JavaScript e JQuery. Ele permite que um pessoa que não saiba muito de programação possa aprender a usar o JS e conceitos mais avançados de programação a medida que o aluno avança nas aulas

Nível: Básico – Avançado

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: Sob consulta

 

Desenvolvimento Web e Mobile

Descrição: O curso online de desenvolvimento web e mobile percorre todos os campos da programação (do front-end ao back-end). O intuito é ensinar o estudante a ser um desenvolvedor com capacitação em todas as áreas do desenvolvimento de apps.

Nível: Básico – Avançado

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: Sob consulta

 


A´gora

JavaScript Completo

Descrição: Completo e passo a passo tem por objetivo principal ensinar todos os passos necessários que um iniciante na linguagem javascript precisa para dominar esta linguagem de programação que está crescendo bastante neste últimos tempos. Nela você terá todos os conhecimentos exigidos pelo mercado, do mais elementar ao mais avançados.

Nível: Básico

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: R$197,00, podendo parcelar em 2x sem juros

 

Formação Jquery Completo

Descrição: Este curso tem por objetivo ensinar do básico ao avançado do Jquery. Então você não tem muito conhecimento ou gostaria de aprimorar o que sabe para o nível profissional, esse é o curso ára você.

Nível: Básico

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: R$157,00, podendo parcelar em 2x sem juros


Udacity

Fundamentos Web Front-End

Descrição: Curso criado nos Estados Unidos com o foco em ensinar os fundamentos da programação Front-end. Ele lida com diversos detalhes da programação JavaScript não encontramos em qualquer lugar e aponta você para outros cursos gratuitos dentro do site deles.

Nível: Básico

Duração: 2 meses de curso e acesso irrestrito somente se você completar tudo

Curso recebe atualizações: Não

Investimento: 5 x R$106,00 – Com desconto à vista

 

Web Front-end Avançado

Descrição: Continuação do curso anterior. Aprofunda-se no entendimento do JavaScript de forma a ensinar a diferença entre as novas técnicas e as antigas. Você também descobrirá mais sobre o ganho de performance e aumento de produtividade do ES6.

Nível: Avançado

Duração: 3 meses meses de curso e acesso irrestrito somente se você completar tudo

Curso recebe atualizações: Não

Investimento: 9 x R$119,00 – Com desconto à vista

 


Danki Code

Curso Webmaster Front-end Completo

Descrição: Um curso de front-end bem completo que tem por objetivo ensinar do zero sobre como lidar com todos aspectos da tela, tanto visuais quanto lógicas. Diferente de um curso de web design que foca mais na questão visual e manipulação de imagens

Nível: Do básico ao avançado

Duração: Você define seu ritmo e com acesso vitalício.

Curso recebe atualizações: Sim

Investimento: 12 x R$19,00 – Com desconto à vista

 

Pacote Fullstack

Descrição: Inclui o curso Webmaster Front-end completo mencionado acima e fornece ainda mais material para ensina-lo sobre o funcionamento do back-end. É bem indicado para aqueles que querem se tornar desenvolvedores responsaveis (ou com o conhecimento) de ambas pontas da criação de uma aplicação web.

Nível: Do básico ao avançado

Duração: Você define

Tempo de acesso: Irrestrito

Curso recebe atualizações: Sim

Investimento: 12 x R$27,00 – Com desconto à vista

 

Desenvolvimento Web Completo

Descrição: Pronto para além de estudar os conceitos de HTML, CSS e JavaScript, também estudar muito PHP? Se sim, esse curso tavez seja para você. No curso de desenvolvimento Web Completo você estará se tornando um desenvolvedor Full Stacke aprendendo a conectar todas as pontas de uma aplicação web.

Nível: Do básico ao avançado

Duração: Você define

Tempo de acesso: Irrestrito

Curso recebe atualizações: Sim

Investimento: 12 x R$22,12 – Com desconto à vista


 

Conclusão

Isso ai, espero que algum destes cursos possam ajudar alguém. Caso você tenha uma duvida, pegunta ou sugestão, deixe seu comentário aqui abaixo para que possamos melhorar essa postagem.

Expressões de Função Imediatamente Invocadas – IIFE

Mesmo se você for um programador novo, não irá demorar muito quando você trabalhar com JavaScript antes de se deparar com esse padrão:

(function () {
    // código
})();

Ao primeiro encontro provavelmente parecerá bastante confuso, no entanto, o conceito em si é simples.

O padrão é chamado de expressão de função imediatamente invocada (Inglês: Immediate Invoking Function Expression) ou IIFE (pronunciado “iffy”).

Em JavaScript funções podem ser criadas através de uma declaração de função ou uma expressão de função. Uma declaração de função é a maneira “normal” de criar uma função nomeada.

function myFunction () { 
    /* código */ 
}

Por outro lado, se você está atribuindo uma função a uma variável ou propriedade, você está lidando com uma expressão de função.

var umaFunc= function () { /* código */ };

var objeto = {
    myFunction: function () { /* código */ }
};

Uma função criada no contexto de uma expressão também é uma expressão de função. Por exemplo:

(function () { /* código */ });

A principal coisa sobre expressões JavaScript é que elas retornam valores. Em ambos os casos, acima do valor de retorno da expressão é a função.

Isso significa que, se quisermos invocar a expressão de função imediatamente, precisamos apenas colocar alguns parênteses no final. O que nos traz de volta ao primeiro trecho de código que vimos.

(function () {
    // código
})();

Agora sabemos o que o código está fazendo, mas a pergunta “Por quê?” ainda resta.

A principal razão para usar um IIFE é obter privacidade de dados. Como var variáveis do escopo do JavaScript para sua função de contenção, quaisquer variáveis declaradas no IIFE não podem ser acessadas pelo mundo externo.

(function () {
    var foo = "bar";

    // exibe: "bar"
    console.log(foo);
})();

// Se tentar acessar a variavel, ocorrerá um erro
// ReferenceError: foo is not defined
console.log(foo);

É claro que, você poderia explicitamente nomear e depois invocar uma função para alcançar os mesmos fins.

function myImmediateFunction () {
    var foo = "bar";

    // exibe: "bar"
    console.log(foo);
}

myImmediateFunction();

// Igual ao exemplo anterior, se tentar acessar a variavel, ocorrerá um erro 
// ReferenceError: foo is not defined
console.log(foo);

No entanto, esta abordagem tem algumas desvantagens. Primeiro, ele ocupa desnecessariamente um nome no namespace global, aumentando a possibilidade de colisões de nomes. Em segundo lugar, as intenções deste código não são tão auto-documentadas quanto um IIFE. E terceiro, porque é nomeado e não é auto-documentado, pode acidentalmente ser invocado mais de uma vez.

Vale a pena ressaltar que você também pode facilmente passar argumentos para o IIFE.

var foo = "foo";

(function (innerFoo) {
    // exibe: "foo"
    console.log(innerFoo);
})(foo);

E essa é a história por trás dos IIFEs. Em breve, estaremos desenvolvendo isso analisando o padrão de módulo em JavaScript.

Tradução:

http://adripofjavascript.com/blog/drips/an-introduction-to-iffes-immediately-invoked-function-expressions.html