flaviojmendes / trilhainfo

| |

Trilha Info

Olá 👋

A Trilha Info é um projeto Open Source que nasceu em Junho/2022 com o objetivo de agregar e organizar conteúdos gratuitos em português para pessoas que querem ingressar na área de Tecnologia.

A motivação em criar esse aplicativo é por acreditar que a educação e o conhecimento devem ser democráticos. Qualquer pessoa deveria ter acesso aos assuntos que se interessa para que garanta um futuro cada vez mais próspero.

Encontrou um Bug 🐛, tem uma ideia 💡? É só abrir uma issue.

Portanto, se você também acredita nisso compartilhe para que o conhecimento chegue cada vez mais longe. E participe da nossa comunidade no Discord

Como contribuir?

Veja o CONTRIBUTING.md para mais informações.

Como rodar localmente?

Para rodar o projeto basta clonar/fork o projeto executar os seguintes passos:

Copie as variaveis de ambiente exemplo:

cp .env.example .env.local

Dentro do .env.local você tem a opção de usar uma API rodando localmente ou utilizar a própria API da trilha, basta descomentar e utilizar o que achar melhor.

Para rodar o projeto em desenvolvimento, você vai precisar do Yarn para instalar as dependências e iniciar o servidor:

# Instalar as dependências com:
yarn

# Rodar em modo de desenvolvimento com:
yarn dev

Rodando com Docker:

Para rodar o este projeto com o docker, você precisará do docker-compose, segue o comando abaixo:

# na raiz deste repositório
docker-compose up

Estando com a API rodando localmente:

# utilizando o mesmo env mencionado acima, referencie ao comando do docker:
docker-compose --env-file ./.env.local up

Quem já contribuiu:

Contribuição

Pull requests são bem-vindos. Para grandes mudanças, por favor, abra primeiro uma issue para discutir o que gostaria de mudar.

Por favor, certifique-se de atualizar os testes conforme apropriado.

Licença

MIT

trilhainfo's Issues

Adicionar label de SEO na trilha de Frontend

Acho que seria interessante botar isso no roadmap, tenho vários links úteis que poderiam estar listado como conteúdo. Se permitirem, eu mesmo posso puxar essa issue e fazer

Centralização de atividades concluídas

Em algumas páginas como front-end e devops existe uma inconsistência quanto a linguagem javascript, seria interessante criar componentes centralizados que possam ser consumidos e manter um histórico consistente para o usuário

Assets não estão na pasta "/public"

Os assets do projeto não estão na pasta public. Com isso tudo se torna mais dificil para usá-los, testes, etc.

Permitir comentários de usuários

Se um usário estiver logado, permitir criar um comentário para um determinado conteúdo.

Setup inicial de testes

Seria interessante configurar um setup de testes na aplicação

be able to create your own roadmap

This project is great

I'd like to create my own roadmap

Erros na tela de LOGIN

O badge.png está sendo baixado porém não está sendo renderizado.

A fonte Roboto aparentemente não tem permissão para ser baixada, está sendo bloqueada pelo CORS. Porém é possível baixa-la normalmente pelo link.

Estou usando o OperaGX.

Atualizar screenshot no Readme

Screenshot da Trilha está desatualizado. O ideal seria colocar algo atualizado.

[FEATURE] Adicionar conteúdo a trilha Backend

Descrição o problema que você quer resolver.
Falta de conteúdo no HTTP

Descreva a solução
Adicionando o artigo em português sobre HTTP da Mozilla Foundation
Link: https://developer.mozilla.org/pt-BR/docs/Web/HTTP
Sobre métodos HTTP
Link: https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods

Problema de layout - mobile

Quando acessamos a página pelo smartphone, na trilha de frontend aparece a rolagem lateral conforme imagem abaixo:

Colocar uma limitação no tamanho da caixa de texto seria uma opção.

Permitir exportar anotações

Remover o chakra completamente do projeto

Por que?

Chakra foi utilizado no início do projeto, agora só está sendo utilizado o Tailwind para a estilização, seria legal tirar todas as ocorrências do chakra. Ele também dá alguns conflitos na estilização por conta dos estilos padrões no body, por exemplo, que faz com que tenhamos que usar o !important para os efeitos do css no body funcionarem.

Remoção

Para tirar ele não é tão simples, mas seria interessante. Alguns dos componentes em que ele está sendo usado são: Drawer, Textarea, Checkbox, Button e outros.

Os componentes utilizados não devem ser removidos, mas sim trocados por componentes utilizando o Tailwind

Não acho que é uma prioridade agora, mas deixo aqui para ficar lembrado

Adicionar Frameworks no Backend

Assim como no front-end possui algumas frameworks, seria interessante adicionar as frameworks dos back-ends tbm ate pq foram citadas algumas lingagens na page.

Melhorias em descrição e adição de exemplo para algoritmos com mais de uma complexidade

Sugestão (só melhoria do que já está muito bom)

Em src/guides/bigO.jpg:

• Na parte onde tem array, informar que n é o tamanho do array. Pode facilitar a compreensão.
• No primeiro exemplo mudar para "Cresce linearmente conforme a quantidade de entradas", ao invés de "... conforme o tempo"
• No último caso, da soma de complexidades, colocar um gráfico da soma das "complexidades pra mostrar" que o "formato" é o do pior caso. Exemplo aqui:
  

Conteúdo sobre acessibilidade

Bom momento pessoal. Gostaria de saber se eu posso incluir na trilha Front-End, conteúdos sobre acessibilidade na web, visto que esse tema é de extrema importância e muito tem se falado sobre desenvolver softwares, mas pouco sobre esses softwares serem acessíveis para todos.
É muitas vezes a acessibilidade não é implementado no código, porque o desenvolvedor nem sabe que existe diretrizes globais para desenvolver um site acessível.
Dessa forma, quero deixar minha contribuição para a gente deixar a web um local de todos e para todos.

Alimentar trilha devops

Objetivo aqui é focar em conteúdos para deixamos essa trilha DevOps toda recheada de conteúdo, o que faltar tô me engajando com a comunidade pra criarmos conteúdo para preenchermos essas lacunas.

posso começar sr @flaviojmendes? 🥳

Melhorias no UX do projeto.

Pensei em deixar mais interativo o layout do site, utilizando uma time line no lugar de um diagrama de árvore.
Neste caso podemos deixar colapsado o to do dos conteúdos e quando finalizar todos ele dá o checkout no elemento pai que seria o módulo.

Adicionar seção dentro dos conteudos com ideas de projetos a serem construidos.

Descrição:

No momento o site está com uma quantidade de conteudos bem legais, porém ainda sinto falta de algo dentro do site que indique uma parte prática a ser feita para fixar o conteúdo que foi aprendido/assistido.

Caso de uso:

Um exemplo de uso, seria por exemplo, ao marcar que você já completou ao menos uma lang + banco de dados + algum framework isso de alguma forma "desbloquearia" um novo nó dentro do grafo que conteria uma ideia de API simples, detalhada passo a passo, que você poderia construir usando os conteudos que aprendeu.

Adicionar animações no Roadmap Horizontal

[BUG] Tela da Comunidade

Ao clicar em um campo vai para uma tela sem elementos somente o background.

Passos para reproduzir o bug:

1. Acesse 'Comunidade'
2. Clique em 'Visualizar Horizontalmente'
3. Veja o erro aqui.

Sei que talvez não seja suposto clicar ali neste ambiente, mas pode causar confusão ao usuário por ter o botão.

Abraço :D

• Desktop
• OS: MacOS
• Browser: Brave.

Alimentar roadmap de React (Ecossistema)

Poderíamos adicionar conteúdo em alguns tópicos do ecossistema React faltantes aqui

C# Básico - Conceitos sobre CLR vídeo não está mais disponível

[Sugestão de conteúdo] Git e Github na Vida Real - Willian Justen

Git e Github na Vida Real - Willian Justen

Curso gratuito do Willian Justen complementar ao Curso de Git e Github para Iniciantes.

Nesse segundo curso, Willian aborda comandos mais avançados e fala sobre como usar ferramentas visuais a seu favor para as tarefas cotidianas. Além disso, ensina comandos realmente úteis no dia-a-dia e alguns fluxos de trabalho comuns em várias empresas do mundo, o que facilita que as pessoas tenham uma visão melhor e se adaptem mais facilmente ao entrar numa nova empresa.

O curso é composto de 4 módulos, contendo 45 aulas no total com mais de 4 horas de conteúdo:

• Módulo 1: Utilizando o Visual Studio Code para os comandos comuns do Git, plugins úteis e mais.
• Módulo 2: Soluções e comandos úteis para o cotidiano, esse módulo tem muita coisa legal e interessante de problemas que podem ocorrer com qualquer um. Quem nunca subiu merda no master e queria reverter?
• Módulo 3: Trabalhando com o Github, veremos mais a fundo sobre Issues, Pull Requests, Code Review, etc.
• Módulo 4: Workflows do Git, como funcionam diferentes fluxos de trabalho, como o Git Flow e o Feature Branch.

O curso era ofertado na Udemy desde 2018 e, a partir de 2022, tornou-se gratuito.

Adicionar link para documentação vuex e pinia

Sugestão de Linux:
VUEX: Os stores Vuex são reativos. Quando os componentes do Vue obtêm o estado dele, eles atualizarão de forma reativa e eficiente se o estado do store mudar. -> https://vuex.vuejs.org/ptbr/guide/
PINIA : The Vue Store that you will enjoy using -> https://pinia.vuejs.org/

CURSO VUE3 FREE NO YOUTUBE : https://www.youtube.com/watch?v=9DRY-aNPta0&list=PLcoYAcR89n-qTYqfWTGxXMnAvCqY3JF8w

Adicionar espaçamento vertical nas caixas de conteúdo

Para altas resoluções, o espaçamento vertical deve ser maior para que a caixa de "React" não fique colada na linha de cima.

Adicionar conteúdo de C++ na trilha de DevOps

Descrição o problema que você quer resolver
Dentre as linguagens indicadas para automação de tarefas de infraestrutura / DevOps, a única que não possui nenhum tipo de conteúdo é o nosso bom e velho C++. Esse feature tem por objetivo acabar com essa injustiça.

Solução
Adicionar os conteúdos criados pela Universidade Federal do Paraná sobre C++ para iniciantes.

Existem alternativas que dariam um trabalho/complexidade menor?
A complexidade dessa tarefa é pequena, não sendo necessário nenhum plano alternativo / workaround.

Vizualizar Vertical

Olá,

Depois que seleciono a opção visualizar na horizontal, não tem a opção de voltar para a vertical.

Animação no layout horizontal #173 quebrando Roadmap Vertical

O PR: #173

Está quebrando Roadmap Vertical na hora de visualizar o conteúdo.

Conteúdo de GO Lang não abre

A definição do JSON de Go está errada.

Verificar no RoadmapItem qual a forma correta.

Orientação de contribuição no README

Orientar futuros contribuidores, ensinando quais são os primeiros passos para começar a contribuir e quais tecnologias são utilizados no desenvolvimento.

Mover tópico "Desafios para praticar" da página de comunidade para dentro dos Roadmaps

Opa, observei que na página de comunidade há um tópico "Desafios para praticar".

Mas a própria página de comunidade não tem tanta visibilidade quanto as outras (só consegui acessa-la pelo rodapé do site) e vejo muito mais sentido em adicionar o tópico "Desafios para praticar" no final de cada Roadmap. Também com isso é possível específicar o conteúdo dos desafio para cada área, por exemplo o tópico de desafios do Roadhmap de Front-End conter links como do FrontEndMentor e CssBattle, enquanto o de Devops conter outros links com sites que auxiliam as práticas ligadas a CI/CD, Deploy, etc..

Se o que falei fizer sentido, o botão de Desafios pode até ter alguma estilização ou animação diferente, já que se tratam de links com sites de desafios propóstos após a conclusão do Roadmap para fixar o conteúdo. Ou talvez um um lugar especial que diferencie que aqueles são desafios. Mas dai ja é só uma frescurinha que acharia dahora mesmo auhehuehue

Atualizar imagem do Readme com o design mais recente.

Bug ao salvar conteudo de CSS e CSS Moderno

[BUG] Erro ao fazer login

Ao clicar para fazer o login aparece um erro

Passos para reproduzir o bug:

1. Acesse a pagina principal
2. Clique em Login
3. Veja o erro

• OS: Windows 10
• Browser: Chrome

Trilha embarcados

Olá,

O que acham de adicionar uma trilha para micro controladores e micro processadores ? aprendendo C/C++.

Sobre aplicações

Opa, esse conteúdo ai seria sobre front-end em Web ou falando sobre aplicações desktop e mobile.

Pq caso isso for sobre sistema Web o nome "aplicações" fica muito genérico. poderia tira essa duvida sobre?
Caso for sobre aplicações em geral eu irei coloca uns conteúdos de C# ou caso ache necessário seria legal criar uma nova pagina para mobile e outra para desktop.

[WIP] - Roadmap Testes

Eae o/

Estou adicionando a parte de testes do roadmap com alguns frameworks e processos que utilizamos dentro da area de qualidade e testes.

Adicionar conteúdo de Typescript na trilha de Frontend

Talvez seria uma boa colocar imediatamente antes do Level: Escolha seu Framework

Conteúdo sobre Ruby para adicionar na trilha

Um pacote de três PDF's abordando tudo sobre Ruby -> https://drive.google.com/drive/folders/1NtdBKfh5RvbRETvJk8DdR99hkXgQg4WC

Em detalhes:

1. Conhecendo Ruby
2. 99 Bottles of OOP
3. Ruby Notes for Professionals

Sugestao de mudanca de UI pros Cards Principais

Abrir primeiro item do roadmap como padrão.

Ao abrir um conteúdo, o ideal é que o primeiro item do Accordion seja aberto como padrão.

Por exemplo, ao invés de:

O conteúdo seria aberto assim:

[BUG] Pagina Mobile fechamento de modal

Quando no celular ao acessar a pagina mobile e clicamos no botão do assunto da trilha, por exemplo "HTTP" é mostrado um modal que preenche a tela toda e pode ser fechado clicando no "X", alguns celulares android possuem a funcionalidade de deslizar na tela como um gesto para o botão "Voltar" e ao tentar fazer isso ele volta conforme histórico da pagina invés de fechar esse modal.

Passos para reproduzir o bug:

1. Acesse qualquer uma das trilhas 'trilha.info/rodmap/backend'
2. Clique em 'HTTP'
3. Use o voltar como gesto de tela
4. Veja o erro

• Device: Pocco Phone X3 Pro
• OS: MIUI 13.0.5
• Browser Chrome
• Version 114.0.5735.61

Não sei se deveria ser classificado exatamente como um bug mas encontrei esse comportamento.

Criar uma versão do README em PT-BR e outra em EN

Criar uma versão do README em PT-BR e outra em Inglês. A versão PT-BR será a padrão, com um link para o README em Inglês.

[FEATURE] Changelog baseado em PR's

Descrição o problema que você quer resolver.
O público geral não tem acesso às atualizações da Trilha Info.

Descreva a solução
O ideal seria compilar os PR's de forma que atualizasse em redes sociais/newsletter.

Existem alternativas que dariam um trabalho/complexidade menor?
Manualmente copiar os PR's.

Additional context
N/A

Alteração na ordem do conteúdo

Creio que seria interessante mover a sessão "controle de versão" para antes da sessão de linguagens.
Pois git independente da linguagem é sempre utilizado e isso poderia ajudar o estudante tanto a desenvolver mais prática com o mesmo quanto a já poder organizar um repositório com os estudos.

Já a sessão de testes creio que deveria estar logo apos a sessão de linguagens.
Pois quanto antes a pessoa compreender a importância e desenvolver a prática com testes melhor.
Se possível seria bom até se a pessoa já aprendesse a linguagem juntamente aos testes, mas creio que não seja possível organizar isso de uma boa forma no roadmap e penso não ser viável para quem não tem prática na área.

Alterar texto na seção da Comunidade

A seção está com o mesmo texto principal das trilhas de aprendizado.

Incluir transition-duration nos hovers

Ponto para discussao:

Acho os hovers da trilha mto seco. Fica aqui a minha sugestao de incluir alguns
https://tailwindcss.com/docs/transition-duration para deixar os hovers mais suaves.

Nao precisa ser algo grande... Mas acho que vai dar um charme grande com pouca mudanca.

Adicionar eslint para contribuições

Eslint

Seria legal ter um eslint pra manter um padrão no código, acabei vendo muita má formatação e seria facilmente resolvido com o eslint configurado.

Qualquer uma das configurações abaixo dão para configurar da maneira que gostar, não precisa ser a favor 100% de cada uma. Caso goste de uma delas, mas tenha alguns contras, é só ir adicionando nas rules do eslint o que não gostar e ir removendo.

Opções de padrões:

1. Rocketseat. Pra usar basta estender com: "@rocketseat/eslint-config/react".
2. Escolha através do próprio npx eslint --init respondendo as perguntas a partir do seu gosto (não possui todos plugins pro react que o da rocketseat tem).
3. Padrão do próprio eslint dentro das opções dadas pelo comando: npx eslint --init (não possui todos plugins pro react que o da rocketseat tem).

Melhorias com responsividade.

Acho que podemos colocar um margin no cabecalho:
de:

para:

Notei que ao diminuir a tela, tem uma perda de responsividade

Notei tb q nesse card aqui podefriamos arrumar o Contraste.

Esses botoes aqui existem hover.

Mas os outros botoes do site nao tem. Seria interessante aplicar o mesmo modelo para todo o site.

Ideia dos seguidores na live foi aumentar o padding dos botoes tb (ou se pa colocar um icone... sei la! Fica da escolha de quem for resolver issae) . parece uma boa!

Ordem de aprendizado da trilha frontend

Ao analisar a ordem da trilha para desenvolvedores front-end, é importante destacar a relevância do aprendizado de Search Engine Optimization (SEO) antes de outras habilidades técnicas, como mobile, graphql e frameworks.

SEO é uma técnica de marketing digital que visa melhorar o posicionamento do site nos resultados de busca orgânica do Google e outros motores de busca. Com a crescente importância da presença online para empresas e organizações, o SEO se tornou uma habilidade fundamental para desenvolvedores de front-end que desejam garantir que seus sites sejam encontrados pelos usuários e tenham maior visibilidade nos resultados de pesquisa.

Assim, é fundamental que os desenvolvedores de front-end aprendam as técnicas de SEO antes de outras habilidades técnicas, como mobile, graphql e frameworks. Embora esses tópicos sejam importantes para o desenvolvimento de front-end, a prioridade deve ser dada à otimização do site para os motores de busca.

Portanto, ao criar a ordem de aprendizado de uma trilha para desenvolvedores front-end, é essencial considerar a importância do SEO e colocá-lo antes de outras habilidades técnicas, a fim de garantir que os desenvolvedores de front-end tenham o conhecimento necessário para otimizar seus sites e melhorar sua presença online.