• Suporte para 30 linguagens de programação (JavaScript, C#, C++, Java, SQL,
  Typescript, JSON, Python, entre outras);
• Disponível para múltiplos ambientes: Linux. Windows e MacOs;
• Controle de versão do Git;
• Terminal de Comandos integrado;
• Coleção enorme de extensões para VS Code disponível no Marketplace.

[adrotate banner=”4″]

O que são as extensões para VS Code?

Extensões de software são programas, geralmente pequenos e leves, que são adicionados em outros programas maiores para adicionar funções a mais, estendendo esse programa com novas funcionalidades.

E o Visual Studio Code é um exemplo de programa maior que possui extensões variadas que auxiliam na programação, aumentando o rendimento e produtividade do desenvolvedor.

Extensões para VS Code

Então, vamos começar a citar as extensões mais utilizadas no Visual Studio Code, principalmente referente à programação em JavaScript/TypeScript para desenvolvimento Web e Mobile.

1) Quokka

O Quokka é um extensão para programação JavaScript e TypeScript que permite visualizar em tempo real os resultados de variáveis, condicionais e loops, sem a necessidade de executar o arquivo toda vez que você quer verificar o conteúdo delas. Então, chega de vários console.log() espalhados pelo seu código.

Download: Quokka

2) Beautify

Essa segunda extensão para VS Code, assim como o nome já sugere, permite manter nossos códigos com uma aparência bonita, realizando aquela indentação dentro do padrão de formatação, com o intuito de deixar mais legível e visualmente mais agradável aos nossos olhos. Além disso, a extensão Beautify permite indentar códigos em HTML, CSS, Sass, Javascript e JSON.

Download: Beautify

3) Git Lens

Todo desenvolvedor, ao tentar verificar as alterações já realizadas por outros desenvolvedores no projeto, sempre necessita retornar no gitHub para verificar o histórico. Mas com a extensão Git Lens não.

Dessa forma, o Git Lens tem como objetivo auxiliar na verificação de quem e onde realizou uma alteração em um determinado arquivo, no próprio VS Code.

Download: Git Lens

4) Bookmarks

Essa extensão é para quando você encontra uma ou várias linhas do código que você vai alterar, mas só quer mexer depois. E para não esquecer de realizar tal mudança, você pode utilizar o marcador do Bookmarks, onde ele cria um lembrete naquela linha em que você deve retornar, marcando a linha com uma bandeira e criando uma lista de marcações realizadas.

Download: Bookmarks

5) Javascript (ES6) Code Snippets

Se falamos de extensão, não podemos deixar de falar dos famosos snippets. Snippets são templates (modelos) de trechos de códigos automáticos que ajudam a evitar reescrever aquele corpo de código padrão que sempre precisamos usar. Por exemplo, um laço de repetição, corpo inicial de um documento de uma linguagem, entre outros.

Dessa forma, o Javascript (ES6) Code Snippets supre essa necessidade para quem é, principalmente, desenvolvedor front-end, pois gera trechos de JavaScript, TypeScript, Vue, React e HTML.

Download: Javascript (ES6) Code Snippets
Alternativas: ES7+ React/Redux/React-Native snippets e Rocketseat ReactJS

6) Material Icon Theme

O Material Icon Theme é uma excelente extensão para uma organização visual dos seus arquivos e pastas no VS Code. Ele possui inúmeros ícones para cada tipo de arquivos, linguagens e pastas, onde cada item será identificado por um desses ícones.

Download: Material Icon Theme

Alternativa: Vscode Icons

7) Visual Studio IntelliCode

A IntelliCode é uma extensão com inteligência artificial, que através do contexto do código que está sendo digitado, gera recomendações de autocompletes para o seu código. Assim, a extensão ajuda na otimização do seu tempo escrevendo o projeto.

Assim, essa extensão está disponível para linguagens C#, C++, Java, Python, SQL, Typescript/Javascript e XAML.

Download: Visual Studio IntelliCode

8) Auto Rename Tag

Essa extensão irá otimizar o seu tempo quando o assunto é mudar a tag que estava utilizando por uma outra tag. Quando alteramos uma tag, sempre temos que alterar a tag de abertura e posteriormente a de fechamento. Mas, com a Auto-Rename, no momento em que você alterar uma das tags, a outra tag será alterada automaticamente junto.

Download: Auto Rename Tag

9) Color Highlight

A extensão Colorize é muito útil para quando estamos trabalhando com CSS e Sass. Essa extensão ajuda a visualizar as cores quando você escreve o código de uma cor no seu projeto. Pensando nisso, é uma extensão que o desenvolvedor front-end deve ter.

Download: Color Highlight

Outra alternativa: Colorize

10) REST Client

Por último, temos a extensão REST Client que é ótima para realizar testes de requisições HTTP para APIs e visualizar as respostas sem a necessidade de utilizar aplicativos externos, como Insomnia ou Postman, para cada teste de requisição que você quiser efetuar. Isso porque ele apresenta os resultados no próprio editor VS Code.

Download: REST Client

Conclusão

Essas foram algumas das extensões para VS Code mais utilizadas pelos devs. Entretanto, é claro que existem muitas outras extensões que são tão boas quanto estas, tendo em vista que o MarketPlace do VS Code está em grande crescimento em questão de variedade.

Agora, caso você ainda não tenha testado alguma dessas extensões, teste e conte aqui nos comentários! Dessa forma, essas ferramentas podem te ajudar a acelerar o seu rendimento durante o desenvolvimento do seu código.

Autor: Taianny Sayuri Shiotani

[adrotate banner=”5″]

O post 10 Principais Extensões para VS Code apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Inicialmente lançado em 25 de outubro de 2006, Next.js surgiu como um framework React, com a proposta de facilitar a vida do desenvolvedor, trazendo várias features focadas em resolver problemas recorrentes. Como um roteamento dinâmico, SSR (server side rendering) e *SSG (static*site generation), roteamento pelo lado do cliente, utilizando funções como o prefetch para carregamentos mais rápidos, suporte ao CSS e Sass, ou qualquer outra biblioteca CSS javascript, suporte para Fast Refresh e rotas API para criação de endpoints e funções serveless.

Mas, afinal, do que o Next JS é capaz?

O Next.js é um servidor Node que funciona como uma camada entre o código React e o browser (cliente). Ele faz o intermédio da renderização dos componentes e apresentação deles para o cliente e conta com diversas features que serão listadas abaixo.

SSR (Server-side Rendering)

Como o próprio nome sugere, esse processo nada mais é do que a renderização dos elementos HTML do lado do servidor. Portanto, isso traz algumas vantagens e desvantagens em relação ao CSR (client server rendering), que listamos abaixo:

Vantagens

1. Segurança de dados

Muitas vezes, quando fazemos “queries” no banco de dados, trazemos algumas informações adicionais ou privadas que não deveriam estar disponíveis para os usuários. Neste caso, o SSR nos dá uma proteção adicional, uma vez que os dados estão sendo armazenados no servidor Node do Next.js e apenas as informações que devem ser mostradas estarão presentes no lado do cliente.

2. Velocidade de carregamento das páginas

Ao renderizar uma página utilizando o CSR, o browser deve fazer o download dos arquivos javascript para então executá-los. Assim, arquivos grandes podem fazer com que o carregamento da página demore mais. Todavia, isso não ocorre ao utilizar o SSR, uma vez que o carregamento é feito pelo lado do servidor e apenas o resultado da execução é exibido no cliente. Alguns testes indicam grandes melhorias em performance.

3. Melhor previsão de performance e processamento

Uma vez que a renderização é feita pelo lado do servidor e sabemos as especificações dele, uma medição de performance, em todos os dispositivos que se conectaram aquele website, será muito precisa!

4. Melhor integração com SEO (Search Engines Optimization)

Atualmente, ferramentas de busca têm tido um difícil trabalho ao tentar indexar páginas que utilizam CSR. Isso porque, com esse tipo de renderização, toda a informação de websites advém da execução de códigos em javascript. Crawlers responsáveis por adquirir informações da página e indexá-las para busca, em sua grande maioria, o fazem desabilitando o javascript e pegando apenas informações provindas do HTML, uma vez que baixar esses arquivos e executá-los seria muito custoso para as SE (search engines).

Como podemos observar, esse problema é facilmente contornado ao utilizar SSR, já que o conteúdo apresentado ao cliente é efetivamente HTML, que foi renderizado pelo código javascript no lado do servidor. Vale lembrar que o SSR não é “bala de prata”, ou seja, existem momentos em que sua utilização não é necessária ou recomendada. Logo, algumas desvantagens devem ser citadas.

Desvantagens

1. Maior gasto com servidores

Se uma página é demandada de muitas renderizações, isso pode ser custoso para o servidor e acaba impactando o gasto financeiro para manter a aplicação.

2. Incompatibilidade com algumas bibliotecas

Algumas bibliotecas que utilizam objetos window ou document podem não ser compatíveis com o SSR.

SSG (Static Site Generation)

Como o SSR, o SSG executa o javascript no lado do servidor e apresenta para o usuário o HTML compilado. A diferença ocorre no momento da renderização, que acontece em tempo de compilação e não quando as requisições são realizadas (SSR). Em decorrência disto, suas vantagens e desvantagens se assemelham muito.

Otimização Estática Automática

Next.js é capaz de determinar automaticamente se uma página é estática. Fazendo, assim, com que ele possa criar aplicações híbridas que contém SSR e SSG. Um dos principais benefícios disso é que páginas que foram otimizadas não precisam de nenhuma computação do lado do servidor, possibilitando entrega de dados de múltiplos CDN (Content Delivery Network), o que resulta em um carregamento extremamente rápido para os usuários.

Importação dinâmica e separação de códigos (code splitting)

Componentes só são importados e baixados quando são apresentados em tela. Com isso, o processo de espera de requisição é ainda mais veloz.

Routing

Next.js conta com um sistema de rotas integrado ao framework, quando um arquivo ou uma pasta é adicionada à pasta pages, o seu nome fica automaticamente disponível como uma rota; e arquivos com o nome index são automaticamente roteados para o nome da pasta “mãe”. Além disso, pastas aninhadas dentro de outras pastas também são roteadas.

-`pages/index.js` -> `/`
-`pages/blog/index.js` -> `/blog`
-`pages/blog/first-post.js` -> `/blog/first-post`
-`pages/dashboard/settings/username.js` → `/dashboard/settings/username`

Também é possível indexar rotas dinâmicas ao utilizar colchetes, que permitem adquirir parâmetros pelo nome que está no interior dos colchetes.

-`pages/blog/[slug].js` → `/blog/:slug` (`/blog/next`)

No exemplo acima, caso fosse acessado a rota /blog/next, o valor que recebido pelos parâmetros seria:

{ "slug": "next"}

De maneira análoga, é possível pegar todos os caminhos referentes aquela pasta.

-`pages/post/[...slug].js` // consegue pegar as rotas -> 'post/a', 'post/a/b', etc.

Tendo como valor recebido nos parâmetros **um array, da seguinte forma:

-'post/a' -> {"slug": ["a"]}
-'post/a/b' -> {"slug": ["a", "b"]}

API Routes

Next.js conta com rotas de API, que servem para uma conexão com a API do framework, análogo as rotas da aplicação, pastas aninhadas dentro de page/api são mapeadas para a rota /api/*, sendo tratadas como endpoints.

De toda forma, é importante colocarmos em evidência que a API do Next não deve substituir um Back-end completo, e sim facilitar algumas implementações no lado do Front-end. Alguns exemplos já integrados ao Next.js são: a autenticação social, e a facilidade de implementações do chamado JAMStack, integrando headless CMSs e possibilitando a criação de aplicações completas com a utilização de API externas.

Next.js vs React

Uma vez que Next.js é um framework de React, é provável que surja a dúvida entre qual framework escolher ao desenvolver os seus projetos. Nesse tópico serão comparadas essas duas ferramentas para elucidar essas incertezas.

Facilidade dar início a um projeto

Tanto o React quando o Next.js possuem maneiras fáceis de se iniciar um projeto, com uma simples linha de código. Ambos estão prontos para execução.

-NEXT -> yarn create next-app
-REACT -> yarn create react-app

Do mesmo modo, uma vez que Next.js tem um roteamento automático, menos linhas de códigos precisam ser escritas.

Performance

Com features como SSR e SSG, otimização automática, otimização de imagens (Next 10) e separação de código (code splitting), o Next.js ganha em performance facilmente, embora seja possível otimizar o React de diversas maneiras. Tudo isso deve ser feito após a inicialização do projeto.

Comunidade

Há diversos motivos para que a comunidade seja um fator muito importante ao se escolher um framework. Afinal, nenhum desenvolvedor gosta de encontrar um problema que ninguém mais se deparou. Em virtude disso, a comunidade do React é de longe a maior e conta com mais tutoriais.

Todavia, vale salientar que Next.js está em grande ascensão e que, cada vez mais, a sua comunidade cresce. Além disso, Next.js é um framework de React, então, problemas que podem acontecer muitas vezes estão intimamente atrelados.

Veja também:

Extensões VS Code Que Você Precisa Conhecer.

Biblioteca de Artigos Sobre Desenvolvimento de Software.

Bot Para testes.

Conclusão

Levando em consideração todos os dados apresentados neste artigo, é fácil perceber o poder que o Next.js traz consigo e suas implicações. Todavia, devemos sempre lembrar que Next.js é um framework de React, e que grande parte de suas implementações vem dele. Portanto, uma boa base é extremamente necessária.

Além disso, ter um bom entendimento de SSR, SSG e CSR é de extrema valia, uma vez que suas corretas implementações impactam fortemente no desempenho e otimização da aplicação.[/vc_column_text][/vc_column][/vc_row]

[adrotate banner=”5″]

O post Principais funcionalidades do Next JS apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Neste artigo, vamos mostrar algumas ferramentas que são muito úteis no trabalho diário de devs (principalmente para os que atuam no front-end).

Por isso, listei algumas das extensões chrome para desenvolvedores que eu utilizo e recomendo!

1. ColorZilla

Sabe aquela cor muito legal que você viu em um site mas não tem ideia do hexadecimal ou o rgb dela? Pois é! Com essa extensão chrome para desenvolvedores isso é possível! No ColorZilla, com um simples hover no elemento que você deseja conhecer a cor, a extensão mostra o hexadecimal e o rgb e voilá!

Então, curtiu a extensão? Para baixar é só clicar neste link.

2. CSS Viewer

Com o nome bem sugestivo, o CSS Viewer cumpre o que promete! Basta ativar a extensão do chrome para desenvolvedores e ver um css organizado e bem claro do elemento selecionado.

Dito isso, se você quiser baixar a extensão, vou deixar o link aqui.

3. JSON Viewer

Esta extensão chrome é um must have para qualquer desenvolvedor que utilize um JSON para integração. Você precisa ter! Porém, algumas vezes o JSON entregue é muito complexo e extenso, por isso, um formatador vai muito bem! Nessa extensão, você pode até adicionar temas de cores (para os adeptos).

Dessa forma, para baixar a extensão é só clicar aqui.

4. Lighthouse

O Lighthouse é uma das ferramentas mais incríveis se tratando de auditoria de sites. Com essa extensão chrome, é possível verificar a performance do site, acessibilidade, boas práticas, SEO e até o PWA! Tudo isso de forma simples.

Ou seja, tudo de bom! Se você quiser baixar, o link está aqui.

5. Octotree

Navegar pelas pastas de repositórios no Github não é uma tarefa agradável! Isso porque é necessário um loading para cada clique e você ainda tem de adivinhar onde cada arquivo se encontra. Com a extensão Octotree, o processo fica extremamente mais agradável! Muito parecido com a navegação entre pastas em uma IDE ou um editor de textos!

Massa né? Para baixar essa extensão chrome é só clicar aqui.

6. React Developer Tools

Essa extensão é uma ferramenta poderosa quanto ao debug de apps que utilizam ReactJS. Com React Developer Tools, é possível verificar desde componentes, suas props, seus hooks e até seus componentes children. Por isso, essa extensão é extremamente útil quando a aplicação toma proporções maiores.

O que achou dessa extensão? Se você curtiu, baixe através deste link.

7. Redux DevTools

Que atire a primeira pedra quem nunca ficou perdido nas actions e reducers! Utilizar a extensão Redux DevTools ajuda muito a se reencontrar! A extensão tem uma interface muito amigável, além de bem intuitiva. Assim, podemos ver as ações que foram disparadas e também podemos ver as mudanças nos nossos estados do redux.

Portanto, se você quiser baixar a extensão, é só clicar aqui.

8. What Font

Mais uma extensão chrome para desenvolvedores com nome bem sugestivo!

Curioso para saber aquela fonte linda nos sites por aí? E ainda levar junto toda a informação extra do CSS Viewer? É para isso que serve o What Font! Ele facilita o encontro de fontes em qualquer site que você quiser.

Então, para baixar a extensão chrome é só clicar neste link.

9. Window Resizer

Hoje em dia, a responsividade do site é algo primordial para qualquer empresa! Com certeza você quer que seu site ou app fique bonito e funcional em vários tamanhos de tela, não é mesmo? A extensão chrome Window Resizer ajuda justamente nesse ponto. Portanto, em um clique é possível modificar a resolução da sua tela facilmente.

Dessa forma, vou deixar o link aqui para você baixar a extensão chrome, se quiser.

Veja também:

Extensões para VS Code que você precisa conhecer.

Como Criar API da maneira correta.

Extensões chrome para desenvolvedores podem facilitar o seu trabalho

Existe uma série de extensões chrome para desenvolvedores que facilita muito o dia a dia de nós profissionais. Seja front-end ou back-end, minha dica é que você experimente todas as opções. Com ferramentas simples, é possível agregar muito a sua produtividade diária. Basta experimentar!

Depois que você testar, me conta aqui quais foram as extensões chrome para desenvolvedores que você mais gostou![/vc_column_text][/vc_column][/vc_row]

[adrotate banner=”5″]

O post 9 extensões para desenvolvedores que você deveria experimentar apareceu primeiro em Luby Software.