1. Instalando o Python:
   Primeiro, verifique se o Python já está instalado no seu sistema. No terminal, execute o seguinte comando para verificar a versão do Python:

   python --version

   Se não estiver instalado, você pode instalá-lo com o seguinte comando:

   sudo apt update
   sudo apt install python3-venv python3-full
   sudo apt-get install python3-pip

2. Criando um ambiente virtual (venv):
   O venv é a ferramenta padrão para criar ambientes virtuais no Python. A partir do Python 3.3, ele faz parte da biblioteca padrão. No terminal, navegue até o diretório do seu projeto e execute o seguinte comando para criar um ambiente virtual com o nome desejado (substitua "nome_do_ambiente" pelo nome que você preferir):

   python -m venv seu_nome_do_ambiente

Nota: Se der erro no comando acima, vc pode criar a pasta manualmente antes de executar o comando acima para a mesma.

3. Ativando o ambiente virtual:
   Para ativar o ambiente virtual, use o seguinte comando:

    source seu_nome_do_ambiente/bin/activate
    # Para o fish terminal
    source nome_do_ambiente/bin/activate.fish

   Agora você está dentro do ambiente virtual e pode instalar pacotes Python específicos para o seu projeto.

4. Desativando o ambiente virtual:
   Quando terminar de trabalhar no projeto, você pode sair do ambiente virtual com o comando:

   deactivate

Lembre-se de substituir "seu_nome_do_ambiente" pelo nome que você escolheu para o seu ambiente virtual. Espero que isso ajude! 😊

Sucesso! 🐍🔧

1. Documentação Python - Instalando módulos Python
2. Guia Completo para Usar o Virtual Environment (venv) no Python

Qualquer dúvida e/ou sugestão, comente!

As principais lições e dicas compiladas para quem está começando na programação ou migrando para a área.

*Texto por Camila Coelho

Hoje devs são peças fundamentais de todo negócio, estão nas startups e nas pequenas e médias empresas que buscam soluções tecnológicas para seus produtos e serviços.

Em uma busca rápida, é possível encontrar centenas de notícias e pesquisas que apontam a falta de mão de obra qualificada na área. A conclusão das matérias é a mesma: sobram vagas no Brasil e chovem oportunidades internacionais.

Quem se destaca pode nadar de braçada nesse oceano de possibilidades. Nesse artigo estão reunidos todos os ensinamentos para você iniciar sua carreira em programação com o pé direito.

Defina sua jornada
Antes de tudo, você precisa saber para onde está indo. Iniciantes na programação costumam se perder em meio a tanta informação. Você precisa ter objetivos bem definidos para traçar a melhor rota de evolução na carreira.

Certifique-se de ter uma base sólida nos fundamentos da programação. Só depois de conhecer o básico, você saberá para onde seguir. Esse curso gratuito ensina programação desde o marco zero, para quem nunca teve contato com tecnologia e ajuda a consolidar conhecimentos padrões.

Escolha uma linguagem
Conhecer uma única tecnologia profundamente vai te ajudar mais que saber várias superficialmente. Isso não significa que você nunca poderá aprender outras no futuro, apenas que vai direcionar seu foco para um objetivo de aprendizagem.

Dominando uma linguagem você se aproxima de empresas que costumam buscar por pessoas que cumpram papéis específicos em um time de tecnologia.
Acompanhando a evolução das ferramentas que usa, você não deixa que suas aplicações fiquem ultrapassadas e continua relevante para o mercado.

Organize seus estudos
Tenha em mente que a tecnologia está em constante evolução, devs precisam continuar estudando mesmo depois de ingressar no mercado. Ter o hábito de se dedicar aos estudos irá fazer toda a diferença no seu crescimento de carreira.

Crie um cronograma de estudos
Defina um plano de estudos que faça parte da sua rotina da melhor forma possível. Dicas para construir seu cronograma de estudos:

Entenda sua rotina. Faça um planejamento realista. Liste suas tarefas, refeições, obrigações e reserve um tempo de foco profundo para se dedicar ao código.
Organize seu cronograma conforme pequenos objetivos. Separe seu tempo para absorver conteúdos, praticar, testar e revisar o que aprendeu nos últimos dias.
Use ferramentas de organização. Plataformas como o Notion são ótimas opções para planificar sua agenda e para documentar seus materiais de estudo, links úteis e ideias de projetos.
Aplique a técnica Pomodoro. Esse método te ajuda a aproveitar tempos de estudo sem nenhuma interrupção, intercalando com momentos de descanso. Cronometre 25 minutos de estudos, quando o tempo terminar, faça uma pausa de 5 minutos e retome os estudos por mais 25 minutos.
Tenha constância nos estudos
Ter frequência nos estudos é mais relevante para o seu aprendizado que focar por grandes períodos de tempo.

Estudar todos os dias o ajudará a fixar conhecimentos ao manter-se em contato recorrente com o que precisa aprender. É preferível que você estude por um período de tempo menor por dias recorrentes, que por muitas horas em um único dia da semana.

Pratique e Pratique
Não tem jeito, programação é uma disciplina prática. Apenas codando que você vai conseguir desenvolver suas habilidades técnicas. A teoria virá a partir da prática, não ao contrário. Praticar também vai te ajudar a desenvolver o pensamento crítico necessário para resolver problemas e priorizar tarefas.

Conte com a comunidade
Se envolver em comunidades será um divisor de águas para sua carreira. Ajudar outras pessoas desenvolvedoras vai fazer com que você fixe melhor seu aprendizado. A comunidade vai te dar suporte frente a problemas desafiadores para você.

Evoluir em comunidade também é uma ótima oportunidade para você se preparar para trabalhar em um ambiente de Pair Programming.

Pair Programming é uma técnica de desenvolvimento ágil em que devs trabalham em pares, em uma única estação de trabalho. Em algum momento da sua carreira você vai ter contato com o trabalho em par, use a comunidade para sair na frente e se preparar para ele.

Dica: abra em nova aba ou favorite esse guia prático de como contribuir para o ecossistema de tecnologia. Ele tem dicas super úteis para você que está começando a programar.

Networking é tudo!
Em toda e qualquer carreira, fazer Networking é uma das principais estratégias de visibilidade para profissionais. Em desenvolvimento não seria diferente.

Ao passo que ganha relevância na comunidade, melhores oportunidades chegarão até você. Ou talvez, você possa encontrar aquela pessoa que vai criar sociedade com você para empreender conforme seus objetivos, e se conectar com profissionais que você conhece as competências.

Desenvolva suas soft skills
Soft Skills são as habilidades comportamentais, aquelas que vão além dos seus conhecimentos técnicos. Não negligencie suas habilidades de comunicação, atitude, pensamento crítico, criatividade e outras que não podem ser substituídas pelo domínio da programação.

Parece complicado para quem se acostumou a lidar apenas com a sua própria tela, a boa notícia é que você verá o desenvolvimento dessas habilidades fluir sempre que você estiver presente em comunidade, compartilhando conhecimento.

Impulsione sua carreira
Pense na sua carreira profissional como uma marca. Sua marca precisa ser sólida, ter credibilidade e ser divulgada. Para se destacar no início da sua carreira ou em qualquer outra etapa dela, avance por alguns atalhos como Eventos de Tecnologia, Hackathons e Projetos Pessoais.

Eventos de tecnologia - Basta acompanhar as comunidades para ficar por dentro dos principais eventos de tecnologia. Desde workshops, para você aprender praticando, a empreendedorismo e conversas, para você acompanhar o avanço da tecnologia. O Networking é outro ponto positivo de fazer parte dos eventos sempre que possível.

Hackathons - Esses são eventos que podem ser definidos como uma disputa prática para profissionais de tecnologia. Os Hackathons te ajudam a ganhar experiência no desenvolvimento de soluções em grupo, indo da ideação ao produto final.

Projetos pessoais - Os projetos pessoais são uma forma de você desenvolver suas habilidades técnicas, criatividade e pensamento crítico. Tudo que você construir se torna bagagem para seu currículo e casos reais para o seu portfólio.

Importante, adicione tudo que você fizer ao Github e escreva um bom README.

Todos seus projetos contam como experiência para seu portfólio, independentemente da complexidade. Como toda sua evolução, a construção do seu portfólio também começa com um primeiro passo e vai avançando de nível.

Mesmo que você acredite que não tem por onde começar, comece. Com o tempo seu conhecimento e projetos vão ganhando forma.

Tá sem ideia de projetos e já quer começar a se desafiar? Entre no Discover, você terá acesso a dezenas de desafios com instruções de como realizá-los.

Lendo Markdown usando o react.js

• Primeiro instale as seguintes libs na sua aplicação:

npm i react-markdown react-syntax-highlighter remark-gfm

npm i -D @types/react-syntax-highlighter

• Crie um componente como abaixo:

import { forwardRef, ReactNode } from 'react'
import { Prism } from 'react-syntax-highlighter'

interface Props {
  language: string
  PreTag: any
  style: any | undefined
  children: ReactNode
}

const SyntaxHighlighter = forwardRef<any, Props>(
  ({ children, language, style, PreTag }, ref) => {
    return (
      <Prism language={language} PreTag={PreTag} style={style} ref={ref}>
        {String(children).replace(/\n$/, '')}
      </Prism>
    )
  },
)

SyntaxHighlighter.displayName = 'SyntaxHighlighter'

export { SyntaxHighlighter }

• Configure o returno da sua aplicação/componente como abaixo:

 <ReactMarkdown
          remarkPlugins={[remarkGfm]}
          components={{
            code: ({ node, content, className, children, ...props }) => {
              const match = /language-(\w+)/.exec(className || '')
              return !content && match ? (
                <SyntaxHighlighter
                  style={darcula}
                  language={match[1]}
                  PreTag="div"
                  {...props}
                >
                  {String(children).replace(/\n$/, '')}
                </SyntaxHighlighter>
              ) : (
                <code className={className} {...props}>
                  {children}
                </code>
              )
            },
          }}
        >
          {issue?.body}
        </ReactMarkdown>

Feito isto, sua aplicação estará pronta para exibir páginas em markdown!

Sugestões

• Você pode alterar o tema da aplicação, bastando escolher o tema desejado na importação com abaixo, bastando escolher oi tema desejado.

import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism'

O que você vai precisar?

Basicamente o código! Mas este código é bem simples e de fácil manipulação e entendimento.

Veja como é simples!

• Crie um arquivo menu.html
• Crie uma pasta junto a este chamada css.
• Dentro da pasta, crie um arquivo chamado style.css

Código para dentro do arquivo menu.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Menu sidebar</title>
  <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
  <div id="container">
        <div id="nav-menu">
            <div class="bg"></div>
				<div class="button" tabindex="0">
				  <span class="icon-bar"></span>
				  <span class="icon-bar"></span>
				  <span class="icon-bar"></span>
				</div>
			<div id="content-menu" tabindex="0">
			<ul>
				<li><a href="#">Página inicial</a></li>
				<li><a href="#">Quem somos?</a></li>
				<li><a href="#">Nossa empresa</a></li>
				<li><a href="#">Nosso portifólio</a></li>
				<li><a href="#">Trabalhe conosco</a></li>
				<li><a href="#">Faça um orçamento</a></li>
				<li><a href="#">Fale conocos</a></li>
				<li><a href="#">Ferramentas</a></li>
				<li><a href="#">Nosso endereço</a></li>
				<li><a href="#">Ajuda</a></li>
			</ul>
			</div>
		</div>
	</div>
</body>
</html>

Conteúdo do arquivo style.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
}

body {
  width: 100%;
  min-height: 100%;
  background: #333;
  background-size: cover;
  font-size: 16px;
  font-family: 'Arial', sans-serif;
  font-weight: 400;
}

a {
	text-decoration: none;
	color: #fff;
}
a:hover {
	text-decoration: underline;
}
ul, li {
	list-style: none;
	line-height: 2;
}
/* Menu */
#nav-menu {
  position: fixed;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

#nav-menu .bg {
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
  height: calc(100% - 70px);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}

#nav-menu:focus-within .bg {
  visibility: visible;
  opacity: 6;
}

#nav-menu * {
  visibility: visible;
}

.button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 0;
  height: 70px;
  width: 30px;
  cursor: pointer;
  margin-left: 26px;
  touch-action: manipulation;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-appearance: none;
  z-index: 99;
}

#nav-menu:focus-within .button {
  pointer-events: none;
}

.icon-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: #f5f5f5;
  transition: .3s;
}
.icon-bar + .icon-bar {
  margin-top: 5px;
}

#nav-menu:focus-within .icon-bar:nth-of-type(1) {
  transform: translate3d(0,8px,0) rotate(45deg);
}
#nav-menu:focus-within .icon-bar:nth-of-type(2) {
  opacity: 0;
}
#nav-menu:focus-within .icon-bar:nth-of-type(3) {
  transform: translate3d(0,-8px,0) rotate(-45deg);
}

#content-menu {
  margin-top: 70px;
  padding: 10px;
  width: 90%;
  background: #00BFFF;
  max-width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 70px);
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  transform: translateX(-100%);
  transition: transform .3s;
  will-change: transform;
  contain: paint;
  opacity: 0.8;
}
#nav-menu:focus-within #content-menu {
  transform: none;
}

Basicamente com este código você já terá seu menu sidebar funcional para seu site.