Novos recursos para web designers e desenvolvedores (janeiro de 2022)

Com o início do novo ano, é importante manter-se atualizado com as ferramentas e tecnologias de desenvolvimento da Web mais recentes. Nesta edição da série Novos recursos para desenvolvedores da Web, veremos alguns dos recursos mais promissores para ajudar nossos colegas desenvolvedores da Web a se manterem à frente no novo ano.

De tutoriais sobre novos sistemas de design a tutoriais de CSS, cursos gratuitos, bibliotecas e estruturas, temos algo para desenvolvedores de todos os níveis aprimorarem suas habilidades e iniciarem sua jornada de desenvolvimento web em 2023.

Então, sem mais delongas, vamos mergulhar na lista completa.

iconizar

Estrutura de ícone universal com mais de 100.000 ícones de mais de 100 pacotes de ícones. Ele permite incorporar ícones em HTML simples usando SVG, com uma estrutura de front-end como Vue.js ou React.js usando uma API unificada.

Ele também permite que você use ícones em um aplicativo de design com plugins para Figma, Sketch e Adobe XD. Em última análise, isso ajuda a evitar o bloqueio do fornecedor e também fornece acesso a milhares de ícones de alta qualidade. Está disponível como pacote NPM E Compositor para PHP.

Precedente

Uma coleção de componentes, ganchos e utilitários para seu projeto Next.js. Ele é construído com todas as bibliotecas e estruturas mais recentes, como A base da interface do usuário para interface de usuário básica, Auth.js Para processamento autenticação de usuário com provedores como Google, Twitter e GitHub, Movimento Framer Para animar componentesE Tailwind CSS Para estilo de componente com um conjunto de classes CSS utilitárias predefinidas.

mafs

kit componentes React opinativos ele facilita a criação de conteúdo matemático bonito e envolvente para seus usuários. Esteja você construindo uma plataforma de aprendizado de matemática, uma ferramenta de visualização de dados ou qualquer outra coisa, o Mafs é a ferramenta perfeita para criar experimentos matemáticos interativos.

Guia de componentes da Web

Os componentes da Web permitem que os desenvolvedores crie seus próprios elementos reutilizáveis com seu próprio comportamento e exibi-los no navegador como um elemento HTML padrão. É rápido e pode ser integrado com alguns frameworks.

Se você quiser saber mais sobre Web Components, este site contém alguns introduções e tutoriais para criar seus próprios componentes da web. Você aprenderá alguns conceitos como encapsulamento, Shadow DOM, eventos, slots e muito mais.

HTML com superpoderes

Para saber mais sobre Web Components, você pode acessar este site. Cobre noções básicas de componentes da web, como usar template marcação, slot etiqueta e estiloe inclui muitos exemplos úteis que vão do simples ao complexo.

Guia do sistema de design

Este site oferece o guia definitivo para aprender sistemas de design. Abrange tópicos importantes, como fundos, tokens de design e outros recursos.

O sistema de design visa aumentar a consistência e a eficiência no design e desenvolvimento, fornecendo linguagem comum e conjunto de princípios para as equipes trabalharem. Se você estiver interessado em aprender sobre sistemas de design, este site pode ser um excelente ponto de partida.

Alfredo

A um aplicativo de geração de cores que cria versões translúcidas de cores que parecem idênticos aos seus homólogos opacos quando colocados contra o mesmo fundo.

Com este aplicativo você pode especifique o plano de fundo e ajuste a saturação em etapas consecutivas de sua paleta, o que pode ajudá-lo a criar uma paleta de cores coesa que pode ser usada em todo o projeto.

Gerador OpenAPI

A especificação OpenAPI é um padrão amplamente aceito para documentar APIs RESTful, fornecendo um ecossistema de ferramentas e bibliotecas interoperáveis.

Esta ferramenta permite que você gerar automaticamente bibliotecas de cliente de API, stubs de servidor, documentação e configuração com base na especificação (versão 2 ou 3). Isso ajuda a acelerar o desenvolvimento e manter a consistência.

EnvShare

EnvShare é ferramenta segura para troca de variáveis ​​de ambiente. Com o EnvShare, você pode compartilhar variáveis ​​de ambiente com segurança enviando um link e limitando o número de vezes que o link pode ser lido.

Os links podem ser configurados para expirar automaticamente após um determinado período de tempo., garantindo que os dados sejam excluídos quando não forem mais necessários. Ele usa criptografia AES-GCM para criptografar seus dados antes de enviá-los ao servidor, o que garante que seus dados sejam transmitidos com segurança.

Semi-projeto

Semi é um ambiente de design de interface de usuário que ajuda designers e desenvolvedores criar interfaces digitais de alta qualidade . Ele está em conformidade com os padrões W3C, oferecendo suporte para vários idiomas, fusos horários e idiomas da direita para a esquerda.

Além disso, este compatibilidade com scripts de renderização do lado do servidor e pode ser usado em estruturas populares como Next.js e Gatsby. Além disso, fornece tokens de design abrangentes e opções de componentes que são sincronizados e executados no Figma.

Design do modo escuro

O recurso que mostra sites lindamente projetados que estão exclusivamente no modo escuro ou têm a capacidade de alternar para ele. Isso pode servir de inspiração para criar um recurso de modo escuro em seu próprio site.

Todos os sites apresentados neste site foram cuidadosamente selecionados e curados por Kai Cardenas para garantir a qualidade e o design dos sites.

PXP

PXP é um poderoso superconjunto da linguagem de programação PHP ele foi projetado para melhorar a experiência do desenvolvedor. Ele oferece um conjunto aprimorado de regras de sintaxe e recursos de linguagem, permitindo que você crie códigos mais expressivos e eficientes.

Um de O principal recurso do PXP é seu sistema de tipo estendido, que permite uma análise estática mais poderosa. No momento em que escrevo, o PXP está em desenvolvimento ativo e estou ansioso para ver como isso afetará o desenvolvimento do PHP no futuro.

Novidade na plataforma web

A série Newbies to the Web Platform da equipe Chrome DevRel apresenta recursos interessantes recursos que foram adicionados a versões estáveis ​​e beta de navegadores da web. Série realmente boa para ajudá-lo a acompanhar os tempos e construir interfaces da web de ponta.

Amêndoa CSS

Uma coleção de estilos CSS sem classe projetados para aprimorar a aparência de sites simples. Esse normaliza estilos CSS para compatibilidade entre navegadores e adiciona estilos personalizados que você pode personalizar.

Os objetivos do projeto são usar apenas tags, obter compatibilidade entre navegadores, criar facilmente temas, responsivo, acessível e confortável, levee mantenha o design simples, mas elegante.

estilo “pré” que contém “código”

Neste artigo, Eric A. Meyer, criador do meyerweb, compartilha sua experiência com CSS. :has() seletor de estilo pre elemento contendo code elemento. Ele fornece entender como você pode preservar a semântica de um site enquanto obtém um design visualmente atraente com sintaxe CSS moderna.

Crie um componente de avatar dinâmico com React e TypeScript

E isto um curso gratuito de TypeScript que visa ensiná-lo a usar o idioma em situações da vida real. Ele demonstra os benefícios do uso do TypeScript, especialmente em termos de segurança aprimorada de tipos e prevenção de erros.

vai cobrir uso real do TypeScript criando um componente de avatar dinâmico com React e TypeScript, que é um recurso comum da maioria dos aplicativos com um sistema de login. Se você Eu quero aprender TypeScripteste artigo pode ser um bom começo.

Desenvolvedor full stack Node.js

Outro curso gratuito que ensinará como criar um aplicativo de compartilhamento de fotos funcional usando a pilha MEEN (MariaDB, Nginx, Express e Node.js). Você aprenderá como configurar e usar Node.js, NPM e MariaDBassim como alguns conceitos técnicos como rotas e middleware.

Este é um ótimo curso para desenvolvedores de todos os níveis de habilidade que desejam aprender habilidades completas de desenvolvimento de Node.js e JavaScript.

Aprenda controle de versão com Git

A curso em vídeo gratuito para iniciantes que ensina o básico do Gitcobrindo tudo, desde a instalação do Git e noções básicas de controle de versão até tópicos avançados.

O curso é dividido em pequenos vídeos passo a passo abordando apenas um tópico por aula, com duração média de apenas 5 minutos. Isso permite que você aprenda no seu próprio ritmo, mesmo com um vídeo curto por dia.

Aprendendo estática com Jack

A um curso gratuito de Laracasts que ensina como usar o Statamic, um sistema de gerenciamento de conteúdo usando Laravel. O curso aborda temas como construindo complementos e kits iniciais e entendendo como o Statamic funciona internamente. Além do mais, este curso é ministrado por Jack, o criador do Statamic.

PHP para Iniciantes 3+ Hour Crash Course

O curso de PHP para iniciantes da @TraversyMedia é Um curso intensivo de mais de 3 horas projetado para ser o primeiro passo para aprender PHP..

Abrange todos os fundamentos do PHP, incluindo configurar um ambiente de desenvolvimento usando o XAMPP, configurar o VS Code e recarregar automaticamente, aprender sobre designs e funçõesentender tipos de dados e variáveis, trabalhar com arrays e usar condições.

O PHP cresceu constantemente e foi constantemente aprimorado ao longo dos anos. Se você deseja começar com PHP, este é um ótimo curso em vídeo.