Recursos frescos para web designers e desenvolvedores (março de 2019)
Muita coisa aconteceu nos últimos meses no mundo do desenvolvimento web. Em primeiro lugar, o novo editor baseado em bloco, codinome Gutenberg, foi finalmente mesclado no WordPress 5.0. É uma grande mudança desde a sua criação, pois define uma nova base para o WordPress evoluir no futuro e vai mudar a maneira como os desenvolvedores se estendem para as funcionalidades do WordPress..
Em segundo lugar, alguns de nossos colegas desenvolvedores criaram algumas ferramentas realmente úteis, como uma que permite ver JSON no terminal e um par de bibliotecas React que podem ser uma grande ajuda em projetos de web design e desenvolvimento.
E finalmente, alguns dos mais eficazes recursos, referências e plugins foram lançados para ajudar você a atualizar seus projetos de acordo com as novas tendências.
Vamos entrar na lista mais abrangente de novos recursos de desenvolvimento da web.
Manual do Gutenberg
O manual oficial do WordPress, onde você pode procurar referências para o design, exemplos de código para criar blocos e outros e um guia para contribuir com o projeto. É a sua primeira referência para desenvolvimento com Gutenberg.
Andaime de bloco
Com o editor baseado em bloco, o WP-CLI agora fornece uma maneira conveniente de começar criando um bloco Gutenberg com um novo comando CLI, bloco de andaime wp. Você pode criar e incluí-lo em seus plugins e temas existentes.
CGB
Outra maneira de iniciar facilmente um bloco de Gutenberg é Create Guten Block (CGB) é uma ferramenta para gerar um clichê para desenvolver um bloco de Gutenberg. Consiste em ferramentas modernas como React.js, Webpack, ESLint, Babel, etc. A melhor parte é que você não precisa configurar nenhuma dessas ferramentas então você pode simplesmente se concentrar em escrever seu código.
Blocos Elementor para Gutenberg
Um plugin WordPress que permite que você insira qualquer modelo Elementor e visualizá-lo diretamente no editor. O plugin vem com várias outras compatibilidades que fornecem experiência de edição contínua entre Elementor e Gutenberg. Confira este vídeo para ver como ele está em ação.
Blocos atômicos
Um conjunto de blocos de Gutenberg com um número crescente de colecções. No momento da redação deste texto, ele fornece o “Post Grid Block” o que permite que você adicionar uma lista de postagens do seu site em um layout de grade. Há também um “Bloco Testimonial” que, como o nome indica, inserir um depoimento dentro da página. Confira as prévias completas dos Blocos nesta página.
Galeria de blocos
Um bloco atraente para inserir sua galeria de imagens, o Block Gallery oferece uma experiência perfeita para adicionar imagens à sua postagem. Basta soltar suas imagens, estilizar a exibição da galeria (estilo de alvenaria, carrossel ou tela cheia), e está tudo pronto. É, no momento, simplesmente o melhor bloco de galeria para WordPress.
CoBlocks
Um conjunto de blocos do mesmo autor que desenvolveu a Galeria de Blocos acima mencionada, o CoBlocks consiste em vários Blocos que aprimoram o conteúdo do seu site com, por exemplo, Acordeão, tabela de preços, gif, clique-para-tweet, e mais Blocos a serem adicionados.
StagBlocks
Outro conjunto de blocos de Gutenberg. O plugin traz uma série de blocos interessantes que muitos de vocês gostariam. Inclui o Stat Block, que permite personalizar estatísticas dentro de suas postagens e páginas. Bloco de cartão de site que será site de visualização em um estilo de cartão de fantasia. Bloco de código que renderiza o código com cor realçada.
Blocos de Lontra
Além disso, uma coleção de blocos de Gutenberg, como o “Bloco do Google Maps” inserir um mapa, “Nosso bloco de serviço” para inserir uma lista de serviços com um botão em uma exibição de grade, e “Bloco de Área de Testemunhos” para inserir uma lista de depoimentos. Otter Block é uma coleção de blocos Gutenberg que empresas e desenvolvedores de temas gostariam.
Blocos Avançados de Gutenberg
Este plugin vem com um punhado de Blocos avançados para enriquecer seu conteúdo como o índice gerado automaticamente, “Giphy Blocks” para incluir imagem GIF de Giphy.com, “Bloco Unsplash” inserir imagens de Unsplash.com, “Bloco de anúncios em banner”, WooCommerce “Bloco de botão de adição ao carrinho”, e muito mais.
Laboratório de Blocos
O Block Lab facilita para os desenvolvedores criarem um bloco Gutenberg. O plugin permite que você registrar um novo bloco com uma GUI amigável e modelos em PHP. Você nem precisa aprender o React.js.
Blocos EDD
Um plugin que permite renderizar os produtos Easy Digital Downloads no editor Gutenberg. Ao contrário do uso do Shortcode, o bloco exibirá as visualizações do produto.
Teste Gutenberg
Não está pronto para instalar o plugin Gutenberg ou atualizar seu site para o WordPress 5.0? Você pode simplesmente carregar este site para experimentar o novo editor.
Gutenberg Cloud
É como uma AppStore para Gutenberg Blocks. Um lugar central onde você pode conseguir Blocos de Gutenberg que podem ser usados no WordPress e no Drupal. Sim, o Drupal também vai adotar o editor de Gutenberg para seu editor.
Exemplos do Gutenberg
Um repositório Github de amostras de código para criar blocos Gutenberg. Aqui você pode encontrar o mais simples Bloquear para um exemplo mais complexo, como aquele para criar um “Bloco de Receitas” que define um modelo no editor para os usuários adicionarem receita conteúdo. Uma boa referência para aqueles que preferem aprender com exemplos reais, em vez de um livro de texto.
GutenbergJS
A versão somente em JavaScript do Gutenberg. Está disponível como um pacote NPM que permite integrar o Gutenberg em qualquer aplicativo JavaScript.
Desativar Gutenberg
Embora Gutenberg traga novas possibilidades para o WordPress, mas nem todo mundo está pronto para isso. Se os seus sites existentes não funcionam bem com o Gutenberg, você pode instalar este plugin. Ele permite que você desativar o editor do Gutenberg para postagens específicas, tipos de postagens, funções de usuários, temas, bem como desativar as folhas de estilo de Gutenberg no front-end.
Editor Clássico
Alternativamente, você pode instalar este plugin para que você possa manter atualizado para o WordPress 5.0, enquanto continua usando o editor clássico antigo. Este plugin será suportado até 2022.
ClassicPress
Outra alternativa é mudar para um fork do WordPress, o ClassicPress. O foco do ClassicPress está ativado empresas, estabilidade e segurança. É compatível com plugins do WordPress e planeja trazer novos recursos interessantes em seus lançamentos futuros. Check-out nossa postagem: ClassicPress: alternativa ao WordPress sem Gutenberg & React.js
Acelerar o WordPress
Como o WordPress se tornou tão grande; mais do que apenas uma plataforma de blogs. Gutenberg, especialmente, adicionou algumas cargas extras, códigos, arquivos para o seu site que podem retardar o seu site. Este é um detalhe que você pode consultar para ajudá-lo a identificar os pontos problemáticos em seu site e abordar as práticas recomendadas mais recentes do setor.
Visualização do Navegador de Código do Visual Studio
Um editor de código visual que adiciona um navegador real com tecnologia Chrome Headless dentro do Visual Studio Code. Isso permite que você pré-visualize o seu trabalho em tempo real dentro do editor de código e ativa recursos como depuração no editor.
Bundlesize
Bundlesize é uma ferramenta para mantenha seu arquivo JavaScript agrupamento tamanho em cheque. Você pode definir o tamanho máximo de cada arquivo incluído e alertá-lo quando estiver prestes ou ultrapassar o tamanho máximo definido. O Bundlesize pode ser integrado a um serviço de IC como o TravisCI e o CircleCI para uma implementação perfeita do fluxo de trabalho em seu projeto.
WP Emerge
Moderno Estrutura de tema do WordPress baseada no padrão MVC. Se você está acostumado a trabalhar com uma estrutura PHP como Laravel e Slim, tenho certeza que você realmente apreciará essa estrutura. Você pode usar coisas como Roteador e Controlador, Contêiner DI e Middlerware.
Bot de Farol
Uma ferramenta de utilitário que permite executar o Lighthouse em um serviço de CI usando o Docker. É uma ótima ferramenta para automatize seu check-up de desempenho do website toda vez que você envia uma nova alteração para o código do seu website.
Aprenda React App
Learn React App é um recurso para aprender React.js. Mas ao contrário dos outros recursos lá fora, isso deve ser instalado localmente no seu computador. Ele não só contém materiais de aprendizagem, mas também codifica e amostras interativas. A melhor parte é que você pode fazê-lo enquanto estiver offline, uma vez instalado.
Aceitação WP
WP Acceptance é uma nova ferramenta que permite realizar testes de aceitação. Para simplificar, os testes de aceitação são uma série de testes para emular o comportamento do usuário. Existem vários frameworks para realizar esse tipo de teste.
No entanto, se estiver trabalhando principalmente com o WordPress, você apreciará essa ferramenta pela facilidade de uso, pois ela é projetada e adaptada aos projetos típicos do WordPress..
Brilhante
Uma biblioteca JavaScript para emular a reflexão de iluminação em seu website quando visualizada em dispositivos móveis. Você pode ver a demonstração em https://pqina.nl/shiny/. Vale a pena notar que ele funcionará somente em dispositivos móveis, pois depende de uma determinada API disponível apenas em dispositivos móveis..
Reagir Lúcido
ReactLucid é uma ferramenta para ajudá-lo Depurar aplicativos React e GraphQL de uma forma mais interativa. Ele permite que você veja a hierarquia do componente, as alterações de estado / props dentro do seu aplicativo React, bem como o esquema GraphQL, consultas e mutações em tempo real..
Alternar entre os recursos CSS
Uma extensão do Chrome que permite que você desativar determinados recursos CSS no Chrome. Com isso, você pode ver como seu site será renderizado e se comportará quando determinados recursos não existirem. Bastante útil para ajudar você a implementar novos recursos de CSS que podem não ser implementados em todos os navegadores.
Blendy
Uma ferramenta que pode ajudá-lo personalize os modos de mistura de fundo CSS com a sua imagem. Você pode visualizar modos de mesclagem, alterar cores e aplicar gradientes. Você pode usar imagens do Unsplash ou enviá-las do computador.
Reaja Elementar
Uma coleção de elementos React que funcionam diretamente da caixa. Nenhum CSS externo para importar ou personalizar configurações para adicionar no Webpack. Ele vem com componentes essenciais como Button, Checkbox, SelectList, Tabs, Tooltip e muito mais.
FX
Se você está sempre lidando com o formato JSON, tenho certeza que irá apreciar essa ferramenta. fx é um ferramenta de linha de comando que permite visualizar dados JSON no Terminal com o modo interativo. de uma forma que você pode expandir ou recolher os dados. fx pode ser instalado via NPM ou Homebrew.
Mônica
Monica é bastante em sua própria categoria. É um tipo de CRM (Customer Relationship Manager), mas não é para o seu cliente, mas para seus entes queridos, como sua família e amigos..
Como um CRM, ele permite que você acompanhe coisas como suas atividades com eles, e quando você as chamou pela última vez, etc. Ainda mais, ele pode ser configurado para lembrá-lo de ligar para alguém com quem você não fala há algum tempo. Eles chamam isso de PRM (Personal Relationship Manager).
Estrutura Iônica
O framework iônico já existe há algum tempo. Mas ultimamente, deu um grande salto em sua funcionalidade. Agora, não só isso, é mais rápido, mas o Ionic é agora compatível com dois frameworks em ascensão: React.js e Vue.js.
Isto estabelece o chão para que o Ionic seja um ferramenta agnóstica de framework. Então, não só isso funciona para estruturas específicas, mas também pode estar trabalhando com as novas, já que o desenvolvimento de front-end evolui no futuro..
Notável
Notável é um aplicativo de anotações para desktop. Ao contrário de qualquer outro aplicativo similar, ele não vem com formatação proprietária, WYSIWYG ou outros sinos e assobios típicos. o editor de aplicativos é alimentado principalmente pelo Markdown com sabor de Github. Notas são armazenadas em um arquivo simples .md arquivos, bem como o anexo. Apenas funciona e é simples.
TipTap
TipTap é um editor WYSIWYG construído sobre o ProseMirror com o Vue.js. Além de herdar alguns recursos de números do ProseMirror, como o incrível suporte à sintaxe Markdown, o TipTap traz alguns recursos modernos como o Menu Bubble, onde o menu de formatação aparecerá ao realçar texto, o recurso Sugestão, onde você pode marcar ou mencionar uma pessoa dentro do conteúdo e exportar capacidade de exportar conteúdo na formatação JSON.
Restplain
Restplain é um plug-in do WordPress que permite gerar facilmente a documentação de seus endpoints da API REST do WordPress, incluindo os terminais personalizados em seu site, bem como fazer uma chamada de API a partir dos documentos. Uma coisa a ser observada é que ela depende do esquema do terminal para gerar a documentação, portanto, certifique-se de ter adicionado um esquema adequado aos seus endpoints personalizados.
Carregador de Conteúdo Reagir
Carregador de Conteúdo Reagir é um componente personalizado Reagir que permite exibir o espaço reservado para conteúdo enquanto o conteúdo real está sendo carregado. É semelhante ao tipo de carregador que você vê no Facebook e no Instagram .
Mítico
O Mythic é um tema inicial do WordPress com práticas recomendadas modernas, como injeção de dependência, modos de exibição e controladores, bem como ferramentas modernas, como o uso de Webpack, Sass, Linting, PHP7 requisito mínimo, e BEM. É um ótimo tema para aprimorar sua habilidade como desenvolvedor de temas.
Github refinado
Uma extensão do navegador para refinar sua experiência ao usar o Github. Ele adiciona várias teclas de atalho úteis, refina alguns layouts e interfaces de usuário, adiciona automaticamente link para problemas e relações públicas, e muito mais.
WC aberto
Open WC é um conjunto de ferramentas que permite criar um Componente Web Customizado. Inclui a biblioteca principal para criar um Web Component, geradores Yeoman para gerar rapidamente “WC aberto” projeto, que inclui o scaffold para testes, linting, e continua a integração.
WC aberto pode ser uma boa alternativa se você prefira implementar com um recurso da web nativo em vez de usar uma estrutura como Vue.js ou React.js.
Gridsome
Gridsome é um ferramenta para construir sites estáticos e aplicativos da web com Vue.js e GraphQL. É capaz de lidar com vários fluxos de dados, como CMS, como o WordPress e o Drupal, um arquivo local como o Markdown ou o Yaml, ou APIs externas, como a AirTable e a Contentful. Esta é uma ótima alternativa ao Gatsby.js, especialmente se preferir o Vue.js ao invés do React.js.
O navegador
Este é o navegador como previsto pelo próprio inventor da World Wide Web, Tim Berners-Lee. É um navegador simples para renderizar HTML e não mostra uma barra de endereços como um navegador moderno, mas você pode ver navegando para Documento> Abrir da referência completa do documento e cole em um URL e clique em Abrir. E lá você verá como seu site será renderizado com o navegador original.
Raster
Raster é uma estrutura de grade moderna que é construída com especificação moderna de HTML e CSS, como CSS Grid, CSS Custom Property (Variável) e elemento personalizado. Um quadro perfeito para quem gosta de viver nas bordas.
Hooper
Um componente Vue.js para adicionar um carrossel ou slider. É acessível e utilizável através do toque, teclado, roda do mouse e outra navegação assistida, suporta RTL e direção vertical, extensível e, claro, resposta.
