DEV Community: Dev Girls Mentor

Dashboard - Validações e formatação

NuryCaroline — Tue, 22 Feb 2022 18:23:17 +0000

Campos de data e hora

Existem vários tipos de inputs como date, time, tel, email que modificam o formato do input ( cada navegador tem uma interface diferente) e deixam o HTML mais semântico.

Para adicionar uma nova task temos os campos Data e Hora:

src/components/ModalFormTasks/index.js:

<div>
 <label>
   Date
   <input type="date" onChange={e => setDate(e.currentTarget.value)} />
 </label>

 <label>
   Hour
   <input type="time" onChange={e => setHour(e.currentTarget.value)} />
 </label>
</div>

E para dar uma 'descolada' do texto dos campos na lateral, vamos dar um espacinho nesses inputs:

src/components/ModalFormTasks/styles.js:

label {
...
    input[type=time],
    input[type=date] {
      padding-left: 5px;
    }
...
}

Toda as modificações acima podem ser encontradas aqui

Obrigando o preenchimento de todas as informações

Hoje temos um problema, que se o usuário não preencher as informações, mesmo assim estamos criando uma task, e assim deixando a task em branco. Para resolver isso, sempre que o usuário não preencher as informações vamos mostrar um alerta, para lembra-lo.

Uma maneira simples de fazer isso é verificando se os valores estão preenchidos antes de adicionar uma nova tarefa, e caso não estejam, mostramos um alerta:

src/components/ModalFormTasks/index.js:

function handleSaveTask() {
    if ( title && description && date && hour && responsable && status) {
   handleAddTask({
     title,
     description,
     date,
     hour,
     responsable,
     status,
   })
   onClose()
 } else {
   alert('Preencha todos os campos.')
 }
}

Toda as modificações acima podem ser encontradas aqui

Dashboard - Criando Task

NuryCaroline — Thu, 10 Feb 2022 11:13:17 +0000

Adicionar um botão fechar no modal

Adicionar o botão no componente ModalFormTask

receber `onClose` como prop

<button onClick={onClose}>fechar</button>

adicionar um style para o botão não ficar em cima do outro

button + button {
  right: 8rem;
}

Na page Task/index.js criar um estado para abrir/fechar o modal

const [showModal, setShowModal] = useState(false)

{showModal &&
    <ModalFormTasks
      onClose={() => setShowModal(false)}
    />
  }

Abrir modal ao clicar no `+` da coluna

No componente da coluna recebermos a prop onShowModal, e passamos para o botão

<button onClick={onShowModal}>
  <img src={IconPlus} alt="Add" />
</button>

E na chamada do componente passamos a função para abrir o modal como prop para o componente filho (Column)

<Column
  name="In progress"
  value="0"
  theme="yellow"
  icon={IconInProgress}
  **onShowModal={() => setShowModal(true)}**
>
  <CardsTasks />
</Column>

Abrir o modal com o status pré preenchido

Criamos um estado para o status default

const [defaultStatus, setDefaultStatus] = useState('to do')

Criamos uma função para alem de abrir o modal, também atualizar o status default, que recebe um status como parâmetro.

function handleOpenModalWithDefaultStatus(status) {
  setDefaultStatus(status)
  setShowModal(true)
}

Agora podemos modificar a função de onShowModal para alem de abrir o modal também atualizar o status conforme o botão da coluna

<Column
  name="To do"
  value="0"
  theme="pink"
  icon={IconTodo}
  onShowModal={() => handleOpenModalWithDefaultStatus('to do')}
>
  <CardsTasks />
</Column>
<Column
  name="In progress"
  value="0"
  theme="yellow"
  icon={IconInProgress}
  onShowModal={() => handleOpenModalWithDefaultStatus('in progress')}
>
  <CardsTasks />
</Column>
<Column
  name="Done"
  value="0"
  theme="green"
  icon={IconDone}
  onShowModal={() => handleOpenModalWithDefaultStatus('done')}
>
  <CardsTasks />
</Column>

Com o status default sendo preenchido conforme o click da coluna, podemos passar o status para o modal. Recebemos defaultStatus como prop, e adicionamos o valor no select

<select defaultValue={defaultStatus}>
    <option value="to do">To do</option>
    <option value="in progress">In progress</option>
    <option value="done">Done</option>
  </select>

Modificando o form do modal para utilizar o estado

Começamos criando os estados

const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [date, setDate] = useState('')
const [hour, setHour] = useState('')
const [responsable, setResponsable] = useState('')
const [status, setStatus] = useState(defaultStatus)

E depois adicionamos uma função para o onChange de cada input

<input onChange={e => setTitle(e.currentTarget.value)} />

Vamos adicionar um console ao clicar em salvar, para visualizar se os estados estão sendo preenchidos corretamente

function handleSaveTask() {
  console.log({
    title,
    description,
    date,
    hour,
    responsable,
    status,
  })
}

<button type="button" onClick={handleSaveTask}>Save</button>

Adicionar uma nova task

Começamos criando um estado para armazenas as atividades

const [tasks, setTasks] = useState([])

Vamos criar uma função bem simples para receber uma task e adiciona-la a lista

function handleAddTask(task) {
  setTasks([...tasks, task])
}

Vamos passar para o modal a função para adicionar uma nova tarefa

<ModalFormTasks
  onClose={() => setShowModal(false)}
  defaultStatus={defaultStatus}
    handleAddTask={handleAddTask}
/>

No modal, recebemos a nova prop, e ao clicar em salvar chamamos a função de adicionar tarefas passando as informações da nova tarefa

function handleSaveTask() {
  handleAddTask({
    title,
    description,
    date,
    hour,
    responsable,
    status,
  })
}

Mostrando as tasks criadas

Para mostrarmos as tasks criadas, vamos criar um map e passar para o componente CardsTasks as informações

<Column
  name="To do"
  value="0"
  theme="pink"
  icon={IconTodo}
  onShowModal={() => handleOpenModalWithDefaultStatus('to do')}
>
  {
    tasks.map(task => (
      <CardsTasks
        title={task.title}
        description={task.description}
        date={task.date}
        hour={task.hour}
        responsable={task.responsable}
        status={task.status}
      />
    ))
  }
</Column>

e temos que modificar o componente CardsTasks para ser dinâmico e receber as informações como props

<ContainerCardsTasks>
    <h4>{title}</h4>
    <p>{description}</p>

    <FooterCards>
      <time>{date} {hour}</time>
            <p>{responsable}</p>

      <div>
        <ContainerAvatar />
        <img src={IconEdit} alt="Edit" />
      </div>
    </FooterCards>
  </ContainerCardsTasks>

Separando as tasks por status

Para listarmos somente a tarefa de cada status em sua respectiva coluna, podemos adicionar uma função de filtro antes do map

{
  tasks.filter(t => t.status === 'to do').map(task => (
    <CardsTasks
      title={task.title}
      description={task.description}
      date={task.date}
      hour={task.hour}
      responsable={task.responsable}
      status={task.status}
    />
  ))
}

Adicionando KEY no map

Para o React atualizar o seu componente corretamente, é uma boa prática adicionar a prop key ao seu componente, quando utilizar a função map

{
  tasks.filter(t => t.status === 'in progress').map((task, index) => (
    <CardsTasks
      key={index}
      title={task.title}
      description={task.description}
      date={task.date}
      hour={task.hour}
      responsable={task.responsable}
      status={task.status}
    />
  ))
}

Estou pronta para o primeiro emprego?

Camila Araldi — Wed, 09 Feb 2022 19:24:46 +0000

Há alguns dias no nosso canal do discord criamos um formulário para pessoas que estão iniciando na área de tecnologia nos enviar perguntas referentes ao tema: Estou pronta para o primeiro emprego?.

Com o intuito de ajudar mais pessoas que possam a vir ter dúvidas sobre este assunto, decidimos compartilhar as perguntas que recebemos e as respostas de nossas mentoras @nurycaroline, @laismgaudencio e @araldicami.

1. Como lidar com a insegurança quando consegue o primeiro emprego? Aqueles pensamentos "será que vou dar conta?", "será que estou preparada?". Fora as inseguranças ao arriscar um emprego novo.

R: É difícil e a resposta parece bem clichê, mas respirando fundo e ignorando esses pensamentos invasores. Se você está nesse emprego é porque tem capacidade para estar.
Uma certeza também, é que você nunca estará 100% preparada. Mas você só vai saber como é se tentar, assim como tudo na vida. Pense nas entrevistas como forma de conhecer a empresa, não somente para a empresa te conhecer.

2. O que geralmente é cobrado nas entrevistas técnicas?

R: Depende muito da empresa e do nível da vaga. Para níveis júnior/pleno eu vejo as empresas pedindo testes práticos e um bate-papo sobre tecnologias e projetos que você já desenvolveu.

Uma dica é você ter um portfolio com projetos pessoais/desafios, isso pode fazer com que você pule a parte da teste prático além de ajudar você a desenvolver suas habilidades. Um lugar legal para montar seu portfolio é no Github. No Github também tem este repositório bem bacana https://github.com/rubenmarcus/120-perguntas-frontend onde reúne algumas perguntas que podem cair em entrevistas.

3. Vejo muitas vagas para Dev Front-End Jr. que pedem portfolio, seja pelo próprio GitHub ou por um site pessoal. Saberiam dizer o que é avaliado nos portfolios pelos contratantes?

R: Basicamente se sabe criar um projeto do zero, e o nível de projetos que você já desenvolveu sozinha(o).

4. Para o primeiro emprego, vocês acham que é melhor estudar mais a teoria (conceitos) ou a prática (escrever código)? Eu percebo que durante meus estudos, acabo focando bem mais na prática do que na teoria, porém já fui cobrada por não saber a teoria 'de letra'. Aproveito para agradecer pelo projeto de vocês que está sensacional!

R: Depende muito da empresa, e do "nível" de júnior que elas estão buscando (Muitas confundem as expectativas). Mas com certeza mais pratica e menos teoria. No dia a dia não vai fazer diferença se você sabe os termos técnicos, nome de todos os padrões, mas sim como você resolve um problema.

5. É realmente necessário ser um usuário bem ativo no LinkedIn?

R: Não, mas é importante manter suas informações sempre atualizadas. Além de também evitar deixar recrutadores no "vácuo", sabemos que as vezes recebemos algumas mensagens seguidas, mas é sempre bom responder pois amanhã podemos precisar deles.

Uma dica para o LinkedIn é você realizar os testes de skills, que são mini provas dos assuntos que você adiciona nas suas competências.

6: Alguma dica para se livrar da timidez durante as entrevistas?

R: Treinar em casa sozinha ou com amigos e familiares, pesquise na internet quais são as perguntas mais feitas e anote as respostas, é mais calmo quando você tem noção do que pode acontecer. Também não tenha medo de responder "não" para perguntas que você não sabe 😉

7. Como lidar com prazos tendo pouca experiência?

R: Deixando claro que você tem pouca experiência, muitas vezes os prazos que são passados são com base nos colegas que já estão a mais tempo no projeto/produto, se você acha que o prazo não é condizente deixe claro que pode atrasar e não tenha medo por ser o primeiro emprego.
Também é legal no final da entrega você refletir do porque você atrasou a entrega e como pode melhorar na próxima estimativa de tempo. Vai muita pratica com o projeto e desenvolvimento no geral para conseguir acertar nos prazos, e mesmo assim, existem variáveis que não controlamos, por exemplo, um mau dia em casa que afeta a produtividade, dependência com terceiros.

8. Enviei um código com erro e gerou bugs em produção, como se comportar durante essas situações?

R: Mantendo a calma, e resolvendo o problema (Caso você não consiga resolver, peça ajuda) todas as pessoas que programam em algum momento passam por isso, faz parte 😊

9. Qual deve ser meu relacionamento com QA e UX?

R: Respeito e colaboração, se houver atrito de qualquer parte, escale a pessoa superior a você.
Para quem não sabe a função destes cargos:
O QA vai ser quem vai garantir a qualidade da sua implementação, se esta de acordo com o que o usuário solicitou e de como ele vai utilizar.
O UX, é quem vai te passar qual a forma mais adequada de implementar que fique fácil e intuitivo para o usuário.

10. Devo me preocupar com habilidades não técnicas?

R: Sim, pesquise sobre soft skills e desenvolva tanto quanto as hard skills. E lembre-se, comunicação é uma chave importante no dia a dia corporativo.

11. Para as aspirantes à fullstack, é melhor se especializar em uma linguagem só (pensando na melhor absorção de conteúdo), como por exemplo o Javascript que pode ser usado tanto no front com o ReactJS, como no back com o NodeJS? Ou é uma opção viável escolher outra linguagem para back-end, como o Elixir e o C#?

R: Nunca case com uma linguagem, eu indico muito javascript pra quem está começando porque acho que é mais fácil para encontrar emprego, além de ser mais fácil de apender e roda em todo lugar. E cada linguagem tem um proposito diferente, então com o tempo você vai vendo o que se encaixa melhor á você.

12. Quais são caminhos possíveis quando seu primeiro emprego não está de acordo com suas expectativas (em relação à ambiente de trabalho, cultura da empresa ou até mesmo as tecnologias usadas)? Faço essa pergunta pois acredito que seja bom visualizar o que pode acontecer após o primeiro emprego, pois pela falta de experiência, criamos muitas expectativas e nem sempre a primeira oportunidade pode se encaixar com o nosso perfil, mesmo que no início pareça que sim.

R: É mais comum do que parece o primeiro emprego não atender as nossas expectativas, tem o mito da T.I ser um lugar perfeito e disruptivo, mas não é, algumas empresas de fato são ótimas, mas infelizmente, principalmente no Brasil não é o caso da maioria. É importante entender o contexto da empresa que você trabalha e pesquisar empresas que estejam de acordo com sua concepção de "boa", de qualquer forma experiências ruins ensinam também, aproveite todo o tempo que tem na empresa atual e assim que estiver disposta a procurar novas oportunidades se jogue, temos a vantagem do mercado aquecido e devemos nos aproveitar disso.

Essas foram as perguntas que recebemos, esperamos que possa ajudar de alguma forma você que estiver com dúvidas sobre este assunto.

Lembrando que no caso de timidez e inseguranças caso você sinta que isso esteja atrapalhando o andamento da sua vida, carreira e afins, busque um profissional que possa lhe ajudar com estes sentimentos.

Obrigada, e até a próxima ❤️

Mulheres & TI: Edith Clarke.

Lais M. Gaudêncio. — Wed, 09 Feb 2022 01:45:11 +0000

Não existem demandas para engenheiras tanto quanto para doutoras, mas sempre existem demandas para quem consegue fazer um bom trabalho.

Descrever sobre Edith Clarke é falar sobre pioneirismo e luta, ela foi a primeira mulher a ter mestrado de engenharia elétrica no MIT, primeira mulher engenheira e primeira mulher a lecionar engenharia elétrica, 66 anos de um legado incrível, inspirando e abrindo espaços para outras.

Em Maryland, no Condado de Howard, Estados Unidos, ano de 1883, nasce Edith Clarke, que infelizmente ficou órfã jovem. Usou a herança de seus falecidos pais para estudar matemática e astronomia no Vassar College, lugar em que se formou com 25 anos. Durante alguns anos Clarke ministrou aulas de matemática e física em uma escola particular para meninas em San Francisco (depois no Marshall College em Huntington, West Virginia).

Clarke almejava de ser engenheira, então no ano de 1911 passando por todos os preconceitos da época, matriculou-se para Engenharia Civil na Universidade de Wisconsin. Trabalhou durante os verões para a American Telephone and Telegraph (AT&T) em Nova York e este é o momento que a computação entra em sua vida, foi contratada como “computadora” (computadores humanos), alguém que resolvia equações matemáticas. Passou a ser gerente de um grupo de assistentes de computação que trabalhavam para o Departamento de Engenharia de Transmissão e Proteção durante a Primeira Guerra Mundial, trancou o curso de engenharia civil para fazer aulas noturnas de Engenharia Elétrica na Columbia University, aprendeu muito sobre a teoria das linhas de transmissão e circuitos elétricos de Campbell, em 1919 se tornou a primeira mulher a obter um mestrado em engenharia elétrica no MIT.

Mesmo formada as oportunidades para engenheiras eram limitadas, Clarke iniciou na General Eletric (GE) como computadora, treinou e dirigiu um pequeno grupo de mulheres que faziam cálculos de tensões mecânicas em rotores de turbina, frustrada com diploma de engenheira em 1921 se demitiu para dar aulas de física na Turquia, no Constantinople Women’s College, inventou a calculadora que recebeu seu sobrenome e até que em 1922 a GE a contrata novamente, dessa vez como a primeira engenheira da empresa. Edith não para e em 1945, aposentada se torna a primeira professora de engenharia elétrica dos Estados Unidos, no ano de 1957 deixa as salas de aula, por fim dois anos mais tarde faleceu.

Curiosidades:

A calculadora de Clarke consiste em um dispositivo gráfico para resolução de equações que envolvem corrente elétrica, tensão e impedância em linhas de transmissão. Uma das vantagens é que ele era muito mais rápido que os outros métodos disponíveis na época.
Edith Clarke foi a primeira mulher a entregar um artigo no American Institute of Electrical Engineers (AIEE). Nele, ela mostrou o uso de funções hiperbólicas para calcular a potência máxima que uma linha pode carregar sem ter instabilidade.
Posteriormente, Clarke teve dois artigos premiados pela AIEE. Em 1943, ela escreveu um livro influente na engenharia chamado Circuit Analysis of A-C Power Systems.
Em 1954, ela recebeu o The Achievement Award da Society of Women Engineers.
Entrou para o Hall da Fama dos inventores dos EUA em 2015.

Mulheres & TI: Ada Lovelace.

Lais M. Gaudêncio. — Tue, 25 Jan 2022 23:38:14 +0000

A imaginação é a faculdade da descoberta, predominantemente. É ela que penetra nos mundos invisíveis que nos rodeiam, nos mundos da ciência

Filha da matemática Anne Isabella Milbanke e do poeta Lorde Byron, Augusta Ada Byron King ou Ada Lovelace, como era conhecida, nunca chegou a conhecer seu pai. Anne cansada das inúmeras traições, deixou seu marido para trás e resolveu criar a filha sozinha. Os criados de Byron diziam que em seu leito de morte ele se arrependeu de nunca a ter conhecido, apesar do afastamento do pai, as pessoas diziam que ela tinha o temperamento de um poeta. Seu interesse em matemática foi influenciado pela rígida criação de sua mãe, além disso ela tornou aficionada pelos avanços tecnológicos da Revolução Industrial. “O amor de Ada tanto pela poesia quanto pela matemática levou-a a ver beleza em uma máquina de computação”, escreveu Walter Isaacson em seu livro “Os Inovadores: Uma Biografia da Revolução Digital”.

Começando desde cedo, aos 12 anos de idade escreveu o “|Flyology|”, um livro com suas ideias mais criativas e de como alcançar esses objetivos e com 17 anos Ada conheceu Mary Somerville, a primeira mulher a entrar para a Sociedade Real de Astronomia, junto com Caroline Herschel.

A famosa astrônoma se tornou amiga e mentora da jovem, responsável por coloca-la em uma mesma sala de jantar com Charles Babbage, matemático e físico francês. Nesse jantar Charles explicou sobre sua máquina analítica, na época Ada não conseguia ajudar. Em 1843, aos 28 anos, casada com o Conde de Lovelace e mãe de três filhos, ela traduziu um artigo de um pesquisador italiano, Menabrea. O artigo era um resumo do funcionamento da máquina analítica de Babbage. A Condessa não se limitou à ideia de Babbage e notou que a nova máquina tinha potencial para processar símbolos também, como notações artísticas, textos e imagens e ainda adicionou notas de rodapé que deixaram o trabalho com o dobro do tamanho. O resultado impressionou Babbage e então começaram a trabalhar juntos e entregaram um artigo três vezes maior do que o original. Ela sugeriu a Babbage um plano de como a máquina poderia calcular os números de Bernoulli, sequência matemática de números racionais profundamente relacionada com a teoria dos números. Este plano é considerado o primeiro programa de computador do mundo, além do programa, escreveu em suas notas que a invenção de Charles não só era capaz de computar números, mas conseguia também criar imagem.

Aos 36 anos, em 1852, morre de câncer de útero e por falta de apoio financeiro e político na época, a máquina analítica de Ada e Babbage foi construída somente depois de sua morte. Em 1979 no Departamento de Defesa dos Estados Unidos desenvolveu uma linguagem de programação, e em homenagem à autora do primeiro programa que foi rodado em uma máquina, chamou a linguagem de Ada.

Dica:

Pesquisar sobre Ada Lovelace e Alan Turing.

Curiosidades:

O verdadeiro nome de Ada Lovelace é Augusta Ada King. No entanto, Augusta era o nome de uma das amantes de Lord Byron e, quando Anne descobriu, passou a chamar a filha apenas por Ada. Depois de casada, Ada passou a ter o sobrenome do marido, King, mas ficou conhecida por seu título, condessa de Lovelace.
A segunda terça-feira de outubro é conhecida como o Dia da Ada Lovelace, dia de inspirar mulheres a trabalhar na área de tecnologia. Anote no calendário!
A Ada Initiative é uma organização sem fins lucrativos que tem como objetivo aumentar o número de mulheres no movimento pela cultura e em movimentos open source. Já a Ada Developers Academy também não possui fins lucrativos, mas se dedica a aumentar a diversidade na tecnologia, treinando mulheres cis, trans e pessoas não-binárias para se tornar engenheiras de software.
Além disso, em 1981, a Associação de Mulheres na Computação criou o Prêmio Ada Lovelace. Sete anos depois, a Associação Britânica de Computação criou a Medalha Lovelace e, atualmente, há uma competição anual para alunas.

Referências:

Iniciando com temas na aplicação "warship"

Camila Araldi — Fri, 26 Nov 2021 11:35:11 +0000

Repositório do projeto:

DevGirlsMentor / warship

É um jogo de Super trunfo utilizando os veículos de Star Wars.

Warship

O que é?

É um jogo de Super trunfo utilizando os veículos de Star Wars.

View on GitHub

Inicialmente, dentro de styles criamos um arquivo chamado themes.js com a estilização de ambos os temas.

Para iniciar com os temas no nosso projeto “warship”, no componente da home onde selecionamos a ordem que queremos seguir vamos passar a ordem selecionada por parâmetro através da url (query params).

Dentro do arquivo da sua página do “board do jogo” importamos o ThemeProvider da biblioteca styled-components, e também o useRouter do next.

Dentro da função do board, vamos criar as seguintes variáveis:

A router é criada para podermos utilizar as funcionalidades fornecidas pelo useRouter.
A segunda variável, side, é desestruturada de router.query, seria o mesmo que utilizar o router.query.side.

Para setar o tema, criaremos outra variável que receberá um objeto de temas, as chaves do objeto serão: play e comp (que identifica um jogador e o computador), a chave “play” recebe como valor Themes[side], onde Themes vem do arquivo de estilização e side vem da query param. A chave “comp” receberá o valor inverso do recebido pela chave “play”, para isso foi feita a validação: se o side for igual a “jedi” então, recebe “sith” senão, recebe “jedi”.

Para passar o tema para os componentes, precisamos utilizar em volta do componente do nosso board o ThemeProvider (importado do styled-components), como se este fosse uma tag HTML.Dentro deste ThemeProvider, coloca-se o componente Board.

O ThemeProvider recebe o parâmetro theme, que receberá como valor a variável criada acima, theme.

Links úteis:

Desestruturação

Temas com styled-components

Iniciando com Next.JS

NuryCaroline — Fri, 12 Nov 2021 18:29:58 +0000

Olá dev!

O intuito desse post é explicar um pouquinho o que é Next.js e o que podemos fazer com ele.

O que é Next.js?

É um Framework React para Produção.
Next.js oferece a melhor experiência de desenvolvedor com todos os recursos de que você precisa para produção: renderização híbrida estática e de servidor, suporte a TypeScript, agrupamento inteligente, pré-busca de rota e muito mais. Nenhuma configuração necessária.

Vantagens:

Next.js tem várias ferramentas para te auxiliar, algumas delas:

Otimização de imagem
- Com o Next.js podemos trocar a tag <img src="" /> pelo componente <Image src="" />, assim é incluído uma variedade de otimizações como: carregar somente o tamanho utilizado e quando a imagem for utilizada.
Next.js Analytics
- Ao publicar a sua aplicação na Vercel você tem acesso a uma ferramenta de analise em tempo real. Podendo assim, medir quantidade de visitantes, tempo de carregamento da página, entre outros.
Zero Config
- Utilizando um simples comando no terminal, é criado uma estrutura pronta para iniciar um projeto.
Suporte a CSS e CSS Modules
- O CSS Modules nos permitem separar o css em escopos, para evitar colisões.
Roteamento
- A navegação entre paginas é bem simplificado, basta criar um novo arquivo com o nome da pagina desejada e o roteador já identifica como uma página.
Rotas Api
- Com as Rotas você pode criar endpoints para retornar informações para sua aplicação.
Híbrido SSG e SSR
- SSR (Server Side Render) - Renderização do lado do Servidor:
  
  Ao solicitarmos uma página de perfil de usuário, por exemplo, o servidor efetua as buscas necessárias na aplicação e banco de dados, e retorna ao navegador um HTML pronto para ser apresentado ao usuário.
  
  Fonte: https://woliveiras.com.br/posts/qual-diferenca-server-side-render-ssr-e-static-site-generator-ssg/
- SSG (Static Site Generator) - Geração de Site Estático:
  
  São sites que não possuem conteúdos dinâmicos, uma pagina de apresentação de uma empresa, por exemplo.
  
  Fonte: https://woliveiras.com.br/posts/qual-diferenca-server-side-render-ssr-e-static-site-generator-ssg/

Como aprender Next.js

No próprio site do Next.js (https://nextjs.org/learn/basics/create-nextjs-app) há um curso interativo com os fundamentos de Next.js, como monitorar a performance, SEO e outras funcionalidades.

Referências

Nextjs.org
Qual a diferença entre SSR e SSG

Extensões para VSCode

NuryCaroline — Wed, 03 Nov 2021 20:50:20 +0000

Olá dev! Aqui está uma seleção de extensões para VSCode para te ajudar no dia a dia e trazer mais produtividade.

Medir produtividade

Antes de melhorarmos a nossa produtividade, primeiro precisamos ter dados de como ela está. Para obter esses dados, eu conheço essas três extensões:

Wakatime

Assim como a Code Time, essa extensão ajuda a mediar a sua atividade enquanto está desenvolvendo no dia dia, o quanto esta trabalhando em qual linguagem e várias outras informações.

Code Time

Além de ser uma pata de animal que com certeza á bem fofinha rsrs, com ele você tem um dashboard de como você trabalha no dia a dia, quais horários está mais produtivo, entre várias outras informações.

100 days of code

Os mesmos criadores do Code Time criaram essa extensão para ajudar você a alcançar seus desafios, e ganhando botons a cada conquista.

Conjunto de atalhos ( Snippets )

Algo que me deixa bem produtiva no dia a dia, é utilizar alguns atalhos para construção de códigos padrões, por exemplo, criar componentes React, arquivos de estilização, arquivo de configuração de api.

Para desenvolvimento com React e React Native, tem essas 2 extensões da Rocketseat:

Rocketseat ReactJS

Rocketseat React Native

Os atalhos que eu mais uso são:

rnfc → React Native Functional Componente: que cria a estrutura de um componente React Native
rfc → React Functional Componente: que cria a estrutura de um componente React
styled-react → Styled React: que cria uma estrutura inicial com styled componentes
api → Cria uma estrutura de configuração Axios.

Na página de cada extensão tem uma lista de comandos possíveis.

Facilitadores

SVG Viewer

Quando abrimos um .svg no VSCode ele nos mostra o seu código, mas na maioria das vezes queremos ver a imagem em si, e é isso que essa extensão faz.

ToDo Three

Essa é uma extensão que eu gosto de usar bastante, para adicionar comentários no meu código de coisas que ainda tenho que implementar e não esquecer nenhuma regra. Apenas adicionar um comentário como // TODO: e // FIXME:, a extensão coloca um destaque, que o torna mais visível e mais difícil de esquecer quando estiver analisando as suas alterações antes de enviar. Além disso ela também cria uma árvore, com os arquivos onde você adicionou.

Template String Converter

Com a atualização do JS, passamos a poder concatenar string facilmente com o Template String, o que pode ser chato no dia a dia, ficar mudando de aspas ( ' ou " ) para acentos graves (), e essa extensão vem para nos ajudar nisso, assim que colocamos ${}, dentro de aspas elas mudam para acentos graves.

Brackets Pair

Sabem quando esquecemos de abrir ou fechar parênteses ou chaves, e não sabemos onde colocar?! Essa extensão coloca uma cor diferente para cada conjunto de Abre e Fecha, facilitando encontrarmos onde está faltando.

Blockman

Acredito que essa extensão tenha o mesmo objetivo da Brackets Pair, mas com uma forma diferente de visualização. Com ela é criado uma borda envolta de cada conjunto de Abre e Fecha, facilitando um pouco mais descobrir onde está faltando abrir ou fechar algum parênteses ou chaves e também facilitando a visualização de cada bloco