Boilerplates e kits iniciais úteis

Hoje, estamos destacando os boilerplates e kits iniciais para todos os tipos de projetos, desde modelos de site estáticos e kits iniciais React/Vue até favicon e modelos de acessibilidade e modelos de sites de emergência. Esta coleção não está completa, mas sim uma seleção de coisas que a equipe da Smashing considerou úteis e espera que tornem seu trabalho diário mais produtivo e eficiente.

Se você estiver interessado em mais ferramentas como essas, dê uma olhada em nosso adorável boletim informativo por e-mail , para que você possa receber dicas como essas direto na sua caixa de entrada!

Índice

Abaixo, você encontrará saltos rápidos para boilerplates e guias específicos de que pode precisar. Role para baixo para uma visão geral ou pule o índice .

• acessibilidade
• ASP.NET
• extensões do navegador
• extensões para vários navegadores
• redefinições CSS
• snippets CSS
• temas de ambiente de desenvolvimento
• dotfiles
• Elétron
• site de emergência
• favicon
• formulários
• pilha front-end completa
• modelo GitHub
• gitignore
• modelo hackathon
• HTML padrão
• celular primeiro
• boilerplate HTML5
• e-mails HTML
• HTML
• PHP
• configuração do projeto
• snippets rápidos
• React
• imagens responsivas
• SaaS
• site estático
• guia de estilo
• kit para iniciantes de tipografia
• Fragmentos de código do VS
• Vue.js
• Plug-ins do WordPress
• WordPress para iniciantes

Modelo de acessibilidade

Para evitar que a acessibilidade se torne uma reflexão tardia, é uma boa ideia já lançar as bases ao iniciar um projeto da web. Portanto, se você está procurando uma solução padrão para iniciar seu projeto com responsabilidade, o Padrão de acessibilidade é para você.

O modelo usa marcação semântica simples e antiga para estruturar corretamente seu conteúdo, tornando-o facilmente acessível para mecanismos de pesquisa e tecnologias de assistência. A sintaxe HTML5 é ainda mais aprimorada com funções ARIA e Microdados. Antigo, mas bom.

Caso você precise de um pouco de ajuda com WAI-ARIA, esta coleção de fragmentos acessíveis certamente virá acessível. Os snippets incluem todos os atributos e descrições WAI-ARIA para ajudar a tornar seu conteúdo mais acessível. Para ajudá-lo a resolver os erros de acessibilidade existentes, Jacob Lett reuniu uma coleção de snippets para reduzir a redundância texto do título, lidando com links vazios usados ​​para comportamento de JavaScript e trazendo significado para elementos visuais, como ícones.

Boilerplate ASP.NET

O ASP.NET Boilerplate usa ferramentas familiares para fornecer a você uma experiência de desenvolvedor sólida ao criar aplicativos da web modernos. Com base no design orientado ao domínio, ele fornece uma infraestrutura forte e modelo de desenvolvimento para modularidade, multilocação, armazenamento em cache, trabalhos em segundo plano, filtros de dados, gerenciamento de configuração, eventos de domínio, testes de unidade e integração e tudo o mais que você precisa ter mais tempo para se concentrar em seu código de negócios. Os modelos de inicialização ajudam você a começar-com um aplicativo Angular de página única ou arquitetura MVC e jQuery clássica.

Outro padrão completo é o ASP.NET Core Hero Boilerplate . Ele permite que você execute uma única linha de CLI em seu console para obter uma implementação completa. O modelo inclui WebAPI e MVC. Um ponto de partida perfeito para aprender sobre vários pacotes e arquiteturas essenciais.

Padrão de extensões do navegador

Você planeja construir uma extensão de navegador? O Browser Extension Webpack Boilerplate está de sua responsabilidade. Projetadas para criar extensões de navegador baseadas em API WebExtensions usando Webpack, as extensões são, em teoria, compatíveis com Chrome, Chromium, Firefox, Firefox para Android, Opera e Microsoft Edge. A compatibilidade real dependerá das APIs que você usou.

Modelo moderno de extensões entre navegadores

Coisas que parecem triviais no mundo do desenvolvimento web podem ser surpreendentemente difíceis em um contexto de extensão web. Especialmente quando se trata de extensões para navegadores diferentes. Para lhe dar a experiência que você conhece da construção de aplicativos da web para vários navegadores ao desenvolver extensões da web para vários navegadores, Cezar Augusto construiu extensão-criar .

criação de extensão ajuda a desenvolver extensões para vários navegadores com suporte integrado para importação/exportação de módulo, recarregamento automático e muito mais. Não há configuração de compilação necessária: para criar uma extensão, uma nova instância do navegador (por agora, Chrome) será aberta e você está pronto para mergulhar de cabeça. Cada comando e recurso principal funciona como um módulo autônomo que é particularmente útil se você configurou sua extensão, mas deseja se beneficiar de recursos específicos, como o iniciador do navegador com recarregamento automático padrão.

Redefinições CSS modernas e suas alternativas

Com os problemas de compatibilidade do navegador CSS sendo muito menos prováveis ​​hoje, as redefinições de CSS tornaram-se quase sempre redundantes. No entanto, há casos em que uma redefinição de CSS moderna ainda pode fazer sentido. Dimensionamento de caixa, estilos de corpo, links, estilos de imagem fluidos, fontes e uma consulta @media para movimento reduzido, essas são coisas que você pode querer redefinir, como Andy Bell mostra . Uma redefinição moderna de padrões razoáveis, por assim dizer.

Outra alternativa moderna para redefinições CSS é Normalize.css . Ele normaliza estilos para uma ampla gama de elementos, corrige bugs e inconsistências do navegador, melhora a usabilidade com modificações sutis e usa comentários detalhados para explicar o que o código faz.

Boilerplates e snippets CSS

Você está embarcando em um projeto menor ou acha que uma estrutura maior é um exagero para suas necessidades? Barebones estiliza apenas um punhado de elementos HTML padrão e CSS Grid e, ao que parece, isso geralmente é mais do que suficiente para obter começado. Com suas aproximadamente 400 linhas, o clichê é leve como uma pena, e não há necessidade de compilar ou instalar para você começar.

A coleção de snippet CSS por 30 segundos de código contém utilitários e exemplos interativos para CSS3. Sejam caixas de seleção personalizadas, sobreposições de menu ou animações de botão, a coleção oferece trechos úteis para layouts, elementos de estilo e animação e manipulação de interações do usuário. CodeMyUI também apresenta uma coleção de snippets de código CSS puro para interfaces de usuário -alguns deles com efeitos bastante extravagantes.

Temas de cores para seu ambiente de desenvolvimento

Você já desejou um tema de cores simplificado em todo o seu ambiente de desenvolvimento? Um que você sente que é agradável para os olhos e que permanece o mesmo quando você muda do seu editor de código para o terminal e para o Slack? themer ajuda você a conseguir exatamente isso.

themer pega um conjunto de cores e gera temas para seu ambiente de desenvolvimento com base nelas. Você pode começar com um conjunto de cores predefinido ou criar um desde o início, inserindo dois tons principais para a cor de fundo e texto de primeiro plano e cores de destaque para destaque de sintaxe, erros, avisos e mensagens de sucesso. Quando estiver satisfeito com o resultado, você pode baixar os temas que deseja gerar da paleta-diferentes terminais e editores de texto são suportados, como Slack, Alfred, Chrome, Prism e outras ferramentas e serviços. Para completar a coordenação de cores, também existem papéis de parede correspondentes com base no seu tema.

Inicialize seus Dotfiles

Dotbot ajuda você a instalar dotfiles com apenas um comando curto, mesmo em um sistema recém-instalado. Ele é projetado para ser leve e independente (sem dependências externas ou instalação necessária) e pode ser usado como um substituto para qualquer outra ferramenta que você estava usando para gerenciar seus dotfiles. Dotbot usa arquivos de configuração formatados em YAML ou JSON para permitir que você especifique como definir seus dotfiles e sabe como vincular arquivos e pastas, criar pastas, executar comandos do shell e limpar diretórios de links simbólicos quebrados. Plug-ins de usuário são compatíveis com comandos personalizados.

Se você deseja se aprofundar nos dotfiles, a lista Awesome Dotfiles apresenta artigos e tutoriais úteis, bem como exemplos repositórios dotfile e estruturas, ferramentas e muito mais.

Elétron Boilerplate

Um aplicativo padrão para o tempo de execução do Electron minimalista é fornecido por Jakub Szwacz. Para fornecer uma base fácil de entender sobre a qual você possa construir, inclui apenas o mínimo de ferramentas e dependências necessárias para um ambiente Electron totalmente funcional. O clichê não impõe nenhuma tecnologia de front-end a você, então você é livre para escolher sua favorita.

Kit de emergência no local

Em caso de emergência, muitas organizações precisam de uma maneira rápida de publicar informações críticas. No entanto, os sites CMS existentes muitas vezes são incapazes de lidar com picos repentinos de tráfego e, dependendo do tipo de emergência, a infraestrutura de rede local pode até ser danificada, deixando de fora pessoas com conexões móveis ruins. O Kit de local de emergência de Max Boeck está aqui para fornecer às pessoas as informações de que precisam nesses casos, independentemente das circunstâncias.

O kit ajuda você a publicar rapidamente um site simples, rápido, acessível e que pode suportar grandes volumes de tráfego. Construído na regra do menor consumo de energia, ele usa tecnologias simples para garantir resiliência máxima: os arquivos estáticos são otimizados para a primeira viagem de ida e volta, há apenas um estilo básico e uma solicitação crítica, e os prestadores de serviço garantem o suporte offline. Um para os favoritos.

Como Favicon em 2021

Às vezes, é uma boa ideia reavaliar as práticas recomendadas. Quando se trata de favicons, por exemplo-especialmente considerando o fato de que os desenvolvedores front-end precisam lidar com mais de 20 arquivos PNG estáticos para exibir um favicon simples atualmente. Para tornar o processo mais simples, Andrey Sitnik criou um solução que requer apenas cinco ícones e um arquivo JSON para atender à maioria das necessidades modernas.

Inspirado pela abordagem de Andrey, Chris Coyier deu um passo além e foi ultra-minimalista para o favicon CSS Tricks. Ele explica como funciona em sua postagem “ How to Favicon in 2021 ”. Um conceito SVG para deixar seus favicons prontos para o modo escuro também está incluído.

Um padrão para formulários

Sejamos honestos, os formulários podem ser uma dor. Felizmente, há um pequeno código HTML e CSS para mudar isso: Boilerform . Fornecendo CSS estruturado em BEM de base e atributos apropriados nos elementos, o pequeno texto padronizado dá aos seus formulários uma vantagem inicial.

Projetado para ser simples de implementar, você pode, em sua forma mais básica, colocar um arquivo CSS em sua cabeça com um pequeno snippet e envolver seus elementos em um wrapper boilerform . Para lhe dar mais controle, há também uma biblioteca Sass e padrões para trabalhar. Seja um formulário de contato, pagamento com cartão ou inscrição de usuário, o Boilerform tem tudo para você.

Boilerplates frontais multifuncionais

O Modern Front-End Development Boilerplate é um kit inicial completo para desenvolver, construir, e implantar seu próximo projeto da web. Os recursos incluem vários frameworks SCSS front-end, uma estrutura de pastas fácil de gerenciar, um local centralizado para gerenciar configurações relacionadas ao projeto, como imagens, fontes e JavaScript, geração de fontes sem complicações, recurso de backup integrado e muito mais mais.

Outro padrão de front-end moderno vem da equipe do digital product studio tonik: o HTML Frontend Boilerplate é uma solução moderna para criar aplicativos e sites da Web rápidos, organizados e padronizados.

Diretrizes para modelos do GitHub

Não importa se é um repositório privado que você compartilha com sua equipe ou uma ferramenta de código aberto destinada à comunidade: a primeira coisa que as pessoas geralmente veem de seu projeto é o Leiame no GitHub. Mas o que entra no Leiame que realmente agrega valor ao usuário? Cezar Augusto elaborou diretrizes para a construção de modelos GitHub . Prático!

Crie arquivos.gitignore para seus repositórios Git

Outro pequeno detalhe que pode ser automatizado para poupar algum tempo precioso são os arquivos .gitignore . gitignore.io faz exatamente isso. O site tem um método gráfico e de linha de comando para criar arquivos .gitignore para seu sistema operacional, linguagem de programação ou IDE.

Você pode inserir o sistema e o idioma que deseja ignorar diretamente no site ou copiar o trecho que se ajusta ao seu shell dos documentos para criar um alias e, finalmente, o arquivo.gitignore com a ajuda da linha de comando.

Hackathon Starter

Se você já participou de um hackathon, sabe quanto tempo leva para iniciar um projeto: Depois de decidir o que construir, você precisa escolher uma linguagem de programação, um framework web, um framework CSS e você precisa configurar um projeto inicial para o qual os membros da equipe possam contribuir.

Hackathon Starter está aqui para ajudá-lo a definir a base para seus aplicativos da web Node.js para que você possa se concentrar em o que realmente importa: o próprio projeto do hackathon. O padrão apresenta autenticação local com e-mail e senha, autenticação via Twitter, Facebook, Google, GitHub, LinkedIn e Instagram, notificações flash, estrutura de projeto MVC, gerenciamento de conta, exemplos de API e muito mais para ajudá-lo a começar.

HTML Boilerplate explicado

Como você inicia um novo projeto? Você copia a estrutura HTML do último site que você construiu ou talvez um boilerplate do HTML5 Boilerplate? Manuel Matuzović geralmente faz o mesmo, mas recentemente ele se deparou com uma situação em que copiar e colar não era uma opção: para documentar a estrutura que ele e sua equipe estão usando no trabalho, ele teve que entender as escolhas que foram feitas.

A tarefa levou algum tempo para ser pesquisada, então Manuel publicou o boilerplate em seu blog para todos usar, junto com explicações detalhadas para cada linha de código para que você saiba exatamente com o que está lidando. Uma ótima oportunidade para mergulhar mais fundo na estrutura subjacente de uma página.

Boilerplates móveis primeiro

Você precisa de um texto padrão leve e que priorize os dispositivos móveis que inclua apenas o essencial? Então Kraken pode ser para você. Kraken não é para ser um produto acabado, mas sim um ponto de partida que você pode adaptar a qualquer projeto. A estrutura básica é um layout de coluna única totalmente fluido e uma abordagem orientada a objetos para CSS permite misturar, combinar e reutilizar classes em todo o projeto.

Outro pequeno ajudante excelente, se você sentir que não precisa de toda a utilidade de estruturas maiores, é Skeleton . Ele estiliza apenas alguns elementos HTML padrão e inclui uma grade. O clichê funciona com apenas 400 linhas e não há instalação e nem compilação necessária para começar.

Boilerplate HTML5

Um dos padrões mais populares (se não o mais popular) para ajudá-lo a criar aplicativos ou sites da web rápidos, robustos e adaptáveis ​​é o Padrão HTML5 . Ele reúne o conhecimento e o esforço combinados de centenas de desenvolvedores em um pequeno pacote.

O que há nele? Um modelo HTML simples e otimizado para celular, com snippet otimizado do Google Analytics, um ícone de dispositivo de toque de espaço reservado e documentos com dicas e truques extras. O clichê também inclui Normalize.css, uma alternativa moderna pronta para HTML5 para redefinições CSS e outros estilos básicos, auxiliares, consultas de mídia e estilos de impressão. Perfeito para dar ao seu projeto uma vantagem inicial.

Uma alternativa que vale a pena examinar é o Modern HTML Starter Template de Igor Agapov, que foi desenvolvido com foco no desempenho.

Boilerplates para e-mails HTML responsivos

Todos nós sabemos sobre os desafios que vêm com a formatação de e-mails em HTML. Um padrão útil para enviar mensagens bem formatadas e, ao mesmo tempo, evitar algumas das principais armadilhas vem de Sean Powell: HTML Email Boilerplate .

O modelo de Sean está disponível em duas versões-com e sem comentários-e consiste em um cabeçalho com estilos globais e uma seção de corpo com correções e orientações mais específicas para usar quando necessário em seu design. Se você deseja criar seu próprio modelo com base nos snippets ou escolher aqueles que corrigem seus problemas específicos de renderização, o clichê o ajudará.

Outro padrão de e-mail que vale a pena examinar é o modelo Good Email Code de Mark Robbins, um modelo simples e reduzido que você pode usar para cada e-mail que enviar. Se você estiver interessado em aprender por que cada parte do código está onde está, Mark o detalha com mais detalhes.

Desenvolvido para ajudá-lo a criar e-mails HTML responsivos com confiança, o Email Framework fornece opções de grade pré-construídas para responsivo/fluido e híbrido layouts, bem como com componentes comuns. A estrutura oferece suporte a mais de 60 clientes de e-mail e foi exaustivamente testada usando Litmus.

Por último, mas não menos importante, para aquelas ocasiões em que tudo que você precisa é um modelo HTML simples e responsivo com um botão de call to action claro, você também pode conferir Modelo de Lee Munroe . É testado em todos os principais clientes de e-mail, em dispositivos móveis, desktops e web. Feliz envio de e-mail!

Um guia completo para HTML

O cabeçalho de uma página da web pode ficar bastante cheio, especialmente em páginas grandes. Mas o que você realmente precisa? E como organizar a cabeça para evitar implicações no desempenho? Josh Buchea reuniu um guia prático que se aprofunda nos elementos HTML .

O guia cobre tudo, desde o mínimo recomendado e incluindo elementos de como um documento deve ser renderizado a links e referências, favicons, mídia social, assim como informações dependentes do navegador para coisas como banners de aplicativos inteligentes ou recursos de “adicionar à tela inicial”. Um bom bônus: o guia está disponível em 11 idiomas. Um para os favoritos.

Boilerplates PHP

Se você está procurando uma estrutura de PHP simples, mas poderosa, com uma pegada muito pequena, CodeIgniter tem tudo para você. O CodeIgniter incentiva o MVC sem forçá-lo, ele tem um desempenho excepcional e vem com proteção embutida contra ataques CSRF e CSS. Quase não há necessidade de configuração para colocá-lo em funcionamento.

Uma estrutura PHP que também foi construída com simplicidade, desempenho e segurança em mente é o PHP Microsite Boilerplate . Como o nome indica, é perfeito para construir um site pequeno sem uma estrutura de código complexa. Os principais recursos incluem roteamento fácil, cache de funcionário inteligente e é otimizado para SEO e preparado para Accelerated Mobile Pages, bem como para Progressive Web Apps.

Criar projetos da Cookiecutters

Um utilitário de linha de comando que cria projetos a partir de cookiecutters (ou seja, modelos de projeto)? Cookiecutter faz exatamente isso. Ele pega uma árvore de diretório de origem, copia-a em seu novo projeto e substitui todos os nomes que estão entre as tags de modelo {{ e }} por nomes que encontra no cookiecutter.json. Podem ser nomes de arquivo, nomes de diretório e strings dentro de arquivos. Isso permite que você inicialize um novo projeto a partir de um formulário padrão, ignorando todos os erros que costumam ocorrer ao iniciar um novo projeto. Os modelos de projeto podem estar em qualquer linguagem ou formato de marcação, e você pode usar tanto cookiecutters locais quanto remotos de repositórios Git ou Mercurial.

Snippets rápidos

Às vezes, você se depara com uma pequena dica que acaba sendo ouro verdadeiro: talvez seja uma solução para um problema que você está tentando resolver há algum tempo ou um pequeno snippet de código que torna seu fluxo de trabalho muito mais eficiente. O site QuickSnippets coleta pequenas pepitas como essas.

Atualmente, a coleção apresenta quase 1.300 trechos de 296 autores para ajudá-lo no seu trabalho diário. Os snippets cobrem tudo, desde navegadores, ferramentas e editores a CSS, HTML, JavaScript, Laravel, PHP, React, UI/UX e Vue.js. Um baú do tesouro esperando para ser aberto.

React Boilerplates

Quando se trata de React, existem vários boilerplates criados pela comunidade que vão economizar seu tempo. Um deles é o React Boilerplate . A base altamente escalável e offline primeiro foi criada com foco no desempenho, nas práticas recomendadas e na experiência do desenvolvedor e brilha com recursos como estrutura rápida, feedback instantâneo, gerenciamento de mudança previsível e suporte à internacionalização, entre outras coisas.

Outro padrão que vale a pena examinar vem da equipe da Infinite Red: Ignite é o culminar de cinco anos de desenvolvimento constante do React Native e foi criado para Expo e React Native. Ele vem com uma CLI, geradores de componente/modelo e muito mais.

O Electron React Boilerplate é outra grande base para aplicativos escalonáveis ​​de plataforma cruzada. Iteração rápida, digitação incremental e otimização e minimização de código prontas para uso são os três pilares sobre os quais ele se baseia.

O React Starterkit de Konstantin Tarkus é um kit inicial de front-end usando React, Relay, GraphQL e Arquitetura JAMstack. Ele é otimizado para implantação sem servidor em pontos de presença de CDN e vem pré-configurado com estilo CSS-in-JS, ferramentas de qualidade de código como ESLint, Prettier, TypeScript e Jest, bem como fragmentos de VSCode e configurações para tornar seu fluxo de trabalho mais eficiente.

Por falar em código VS: a extensão React + Redux Snippets garante que você sempre tenha os trechos de que precisa disponíveis em seu editor. Ele foi projetado para aproveitar ao máximo o preenchimento de código-perfeito para usuários avançados.

Por último, mas não menos importante, se você deseja usar o melhor de todos os mundos para criar seu próprio padrão React, O tutorial de Leonardo Maldonado é para você. Ele o orienta passo a passo na construção de seu próprio padrão do zero com as principais dependências usadas na comunidade React hoje.

Um snippet para carregar imagens WebP responsivas

Sempre foi complicado carregar imagens nos melhores tamanhos e formatos e, com os novos formatos de imagem como WebP e AVIF ganhando popularidade, as coisas não ficam mais fáceis. Se você deseja lançar o WebP já hoje, precisará de uma estratégia de carregamento que também forneça um substituto para navegadores que ainda não suportam o novo formato. Stefan Judis mostra como fazer .

A solução de Stefan para carregar uma imagem WebP responsiva usa o elemento picture e, embora envolva muitas linhas de código, vale a pena porque o snippet não carrega apenas a imagem no melhor formato, mas também os melhores tamanhos. Um para os favoritos.

Além disso, caso você tenha perdido, Stefan começou a publicar seu boletim informativo Web Weekly este ano. Every Monday, you’ll find a colorful mix of resources all around frontend, productivity and web development learnings paired with handy tools and GitHub projects in your inbox. Stefan’s goal: make it the best email to start your week.

SaaS Boilerplate

User authentication, cookie sessions, subscription payments, billing management, team management, GraphQL API, transactional emails — when you’ve built a SaaS product before, you know how much time it takes to make all the different tools involved play well together to offer the functionality you need. To change that, Max Stoiber created Bedrock.

The modern full-stack Next.js and GraphQL boilerplate combines the best tools the JavaScript ecosystem has to offer into one solid foundation for your SaaS product. No need to master all of the technologies involved, if you know Next.js and GraphQL, you can start coding almost immediately.

Static Site Boilerplate

Automated build processes, a local development server, production minification and optimizations, and the latest standards for static websites. Eric Alli’s Static Site Boilerplate uses the latest tech to make the process of building static websites more straightforward.

The built-in development server will get you up and running in seconds, your HTML, styles, and scripts will be automatically linted, changes to files are monitored in real time, images are compressed for your production build, and sitemap.xml and robots.txt files are automatically included with your production build. A real timesaver.

Style Guide Boilerplates

What do you need to consider when building a style guide that, well, works? Brad Frost’s Styleguide Guide takes you step by step through each and every section and what goes into it — from the homepage to guidelines, styles, components, utilities, page templates, downloads, and even support, and contributions. A very complete overview.

Brett Jankord’s Style Guide Boilerplate is a great starting point for crafting living styleguides. You can create a directory for it on your site to see how your live site’s CSS affects the base elements and start customizing the patterns and modules to your liking.

Typographic Starter Kit

Do you need a little bit of help with typography? Not in terms of aesthetic design choices, but regarding markup? The typographic starter kit Typeplate has got your back. It defines proper markup with extensible styling for common typographic patterns.

Typeplate is available as a stripped-down Sass or CSS library of your choosing (including Bower and CDNJS) and is primarily concerned with technically implementing design patterns, not their looks: from typographic scale and word-wrap to indenting, hyphenation, small and drop capitals, small print, code blocks, quotes, footnotes, lists, and more.

VS Code Snippets To Streamline Your Workflow

Are you using VS Code? We came across some useful extensions that handle the React, Vue, and Angular snippets you might need to type frequently for you. For Vue, be sure to check out Sarah Drasner’s extension. It was built for real-world use and focuses on developer ergonomics instead of cataloguing API definitions.

Burke Holland provides you with a collection of essential React snippets and commands that he selected from his day-to-day React use. And if you’re looking for Angular snippets, John Papa has got you covered. His extension adds snippets for Angular for TypeScript and HTML to your VS Code setup.

Speaking of VS Code setup: Have you heard of the “VS Code Can Do That Workshop” already? From customizing the editor to using Git and source control, it features eight exercises to enhance your VS Code skills.

Vue Boilerplates

Do you plan to build a Progressive Web App with Vue.js? Vuesion has got your back. Described as the “most complete boilerplate for production-ready PWAs”, Vuesion focuses on performance, development speed, and best practices. The code is all yours, ready to be modified and build upon, so that you can implement the things you actually need, without being limited by the template itself.

If you’re looking for a solution to achieve a consistent user experience across your applications, CION might be for you. The design system utilizes design tokens, a living styleguide with integrated code playgrounds, and reusable components for common UI tasks. A great starting point that can be extended to your project’s needs.

To improve prototyping in Vue, there’s the prototyping tool OverVue. It allows developers to dynamically create and visualize a Vue application, implementing a real-time intuitive tree display of component hierarchy and a live-generated code preview. The resulting boilerplate can be exported as a template for further development.

Have you ever tinkered with the idea of using Vue to power a blog? Ben Hong did, and created a dev environment to help you do the same. Optimized for blogging, the VuePress Blog Boilerplate includes default features like RSS feed generation, a list of recent posts, etc. The minimal setup and Markdown-centered project structure help you focus on writing, and, thanks to the Vue-powered engine, you can use Vue components in Markdown and develop your theme in Vue, too.

For handy Vue snippets, little tips, tricks, useful directives, and nice practices, be sure to also check out Vue Snippets collection. A small but mighty collection.

WordPress Plugin Boilerplate Generator

No one likes to repeat unnecessary tasks. That’s why WordPress developer Enrique Chavez built the WordPress Plugin Boilerplate Generator. Every time he started working on a new plugin, he found himself renaming file names, packages, subpackages. The generator automates the task.

All you need to do is type your plugin details in a short form containing plugin name, slug, uri, autor name, email, and uri, and the generator will generate a ZIP file for you with the correctly-named file structure. A great little timesaver.

WordPress Starter Theme

Do you plan to build your own WordPress theme? The starter theme Underscores helps you get started. It’s not meant to be used as a parent theme but as a stable base to kickstart your theme development adventures.

Underscores comes with only minimal CSS so that there’s less stuff getting in your way when building your own theme. It shines with lean, well-commented HTML5, a helpful 404 template, an optional sample custom header implementation, custom template tags that keep your code clean, a mobile-friendly dropdown, and some other nifty features.