Recursos frescos para web designers e desenvolvedores (outubro de 2017)

Este mês, o Fresh Resouces será um pouco diferente dos meses anteriores. Nós, desenvolvedores web, estamos ganhando a vida em uma indústria que muda rapidamente, e tenho visto muitos anúncios de algumas das maiores empresas de tecnologia, como Google, Microsoft, Firefox e PHP, que vão mudar a maneira como construímos a teia.

Nesta parte, metade da nossa lista será sobre esses anúncios. Então, esteja pronto para dizer olá ao futuro!

Otimização Essencial de Imagem

É um Artigo exaustivo para otimizar uma imagem para a web escrito por Addy Osmani. Não é como outros write-ups que giram em torno de como fazer ou apenas fazer e não fazer.

Este artigo realmente orienta os detalhes técnicos, bem como os ciência por trás da otimização. Você também encontrará informações completas sobre várias abordagens de otimização e formatos de imagem, ferramentas, dicas e alguns exemplos do mundo real.

PHP 7.2

Um abrangente referência sobre o que vem ao PHP 7.2. Além de adições que melhoram o desempenho de aplicativos PHP, o PHP 7.2 também vem com depreciação em que várias coisas vão ser removidas e não deve mais ser usado.

No PHP 7.2, existem duas funções que serão descontinuadas, create_function () e __autoload (). Se você é um desenvolvedor web, revise seu código e faça as alterações necessárias. Eu vi inúmeros plugins WordPress que ainda estão usando essas duas funções.

API de compartilhamento na Web

Eu sinceramente não vi essa API chegando à web. No entanto, como metade da nossa interação na web é sobre “compartilhamento”, esta API vai fazer muito coisas mais fácil para os desenvolvedores da Web criarem uma experiência de compartilhamento nativa, particularmente na plataforma móvel.

Atualmente, esta API está disponível apenas no Google Chrome para Desktop e Android. Confira este vídeo do Youtube para ver em ação.

Atributo Assíncrono de Imagem

Outra coisa que revolucionará a web é a assíncrono atributo para o elemento img. No momento da escrita, há um punhado de abordagens para carregar imagem de forma assíncrona que envolve um pequeno truque de JavaScript. Em breve poderemos apenas adicionar async = on no img elemento.

Firefox Quantum

Mozilla tem sido agressivamente empurrando atualizações para o Firefox com algumas melhorias, codinome “Projeto Quantum”. Inclui o Quantum CSS - um novo mecanismo para renderização CSS extremamente rápida, uma nova interface do usuário e novos DevTools.

O lançamento é ganhando força em desenvolvedores web e alguns já mudaram seu navegador principal para o Firefox. Há mais para vir neste projeto, incluindo o Quantum DOM e o WebRender. Será que vamos ver o contendor Node.js baseado no motor Firefox Quantum? Bem, talvez sim.

MS Edge para iOS e Android

Microsoft acaba de anunciar para liberar seu navegador mais recente, Edge, para iOS e Android. Isso significa que há mais um navegador para seus sites testarem com.

Gutenberg

O WordPress está atualmente em um projeto ambicioso, chamado Gutenberg. Gutenberg é um facelift para editor WordPress construído quase inteiramente com JavaScript.

Neste ponto, Gutenberg é construído com React mas o projeto está considerando outro framework como Preact, Vue ou outra coisa. É uma situação complicada por enquanto. Então, para desenvolvedores do WordPress construindo temas e plugins, fique de olho no projeto como vai mudar a maneira como construímos o WordPress para sempre.

FoitFout

FoitFout é uma ferramenta útil para comparar duas abordagens diferentes, chamadas FOIT e FOUT, para carregar fontes personalizadas na web. Com essa ferramenta, você pode emular as duas abordagens e decidir qual abordagem é a mais adequada ao seu site.

Vuera

Vuera é um Biblioteca JavaScript que permite usar o Vue e o React juntos. Você pode incluir um componente Vue de um .vue ou use um componente React no Vue. Sua equipe agora pode ser mais produtivo com qualquer estrutura que eles preferem usar.

Arrastável

“Arrastável” é uma fantástica biblioteca do Shopify. É construído em cima do navegador nativo API de arrastar e soltar e permite que uma API abrangente trabalhe com. No caso, ele não fornece algo que você precisa, você pode escrever um módulo personalizado para estender suas funcionalidades. Confira a demonstração para ver como funciona.

FlowchartJS

Como o nome indica, o FlowchartJS é um biblioteca que permite construir um fluxograma como no PowerPoint. Da mesma forma, você pode criar várias formas de gráfico, incluindo círculo, elipse, quadrado, diamante, triângulo, etc.

QuickBill

Um leve e aplicação web simples para criar uma fatura. Ele usa tecnologias nativas de navegador e APIs para ser executado, portanto, nenhuma conta é necessária. Basta ir ao site, adicionar os itens à fatura e gerar o arquivo PDF. É isso aí!

Mocka

Mocka é um espaço reservado de conteúdo que você pode usar para o site de prototipagem. São apenas 500 bytes e totalmente personalizáveis. Você pode facilmente incluí-lo no arquivo CSS do seu projeto usando o Sass mixin.

o CSS fornece um número de classes Incluindo mocka-media criar um alocador de espaço de imagem, mocka-título para criar um título e mocka-texto para criar um texto arbitrário.

VueStar

VueStar é um Componente Vue para adicionar um efeito brilhante quando você clica em um ícone, semelhante ao que o Twitter faz com o “coração” ícone em seu aplicativo móvel. O componente introduz um novo elemento chamado vue-star onde você pode adicioná-lo na era da web. E pronto!

Playground de grade

O CSS Grid introduz um novo conceito na web para construir um layout e é complexo à primeira vista, dadas as inúmeras novas propriedades que ele tem.

GridPlayground é basicamente um Iniciativa Mozilla para ensinar CSS Grid e para impulsionar a adoção da CSS Grid. Até mesmo o Firefox traz uma nova ferramenta para o DevTools para inspecionar o layout do Grid.

Gerenciador de trechos

“Gerenciador de trechos” é um simples aplicativo para armazenar e gerenciar trechos de código. Você pode criar um novo item, colar o código e definir o ponto. Neste ponto, nada muito chique e apenas fornece o código fonte que você precisará compilar usando NPM.

Interface com guias

Um ótimo passo a passo na construção de navegação de guias progressiva e acessível com uso mínimo de JavaScript. Um ótimo recurso para aqueles que querem aprender mais sobre design acessível.

SwissInCSS

A SwissInCSS exibe vários designs clássicos de cartazes suíços usando nenhum, exceto o CSS. O código fonte está disponível em CodePen.