Toda vez que tento abrir/rodar um projeto antigo, eu perco 1 dia inteiro tendo que resolver problemas, sempre algo para de funcionar, ou não funciona da forma como era antes, ou algo externo mudou e quebrou o sistema...

Enfim, agora eu percebo a falta que faz um Docker, imagina se outra pessoa tenta rodar algum projeto meu do Github, não vai rodar...

`import st from './style.module.css` funciona, mas typescript não reconhece.

A solução é criar um arquivo `globals.d.ts` e colocar lá

```tsx

declare module "*.css"

declare module "*.scss"

```

Ai o typescript passa a reconhecer CSS modules.

Comecei a estudar GraphQL, era uma tecnologia que eu não tinha nenhuma experiência e até evitava, por ser bem diferente do REST.

Tem algumas coisas novas como tipagens própria e decorators, ainda vai levar um tempo até tudo ficar intuitivo.

Comecei a estudar GraphQL porque quero agregar no projeto Mentor Cycle, um projeto Open Source que conecta aprendizes e professores de quaisquer graus, o projeto usa GraphQL, então fiquei um pouco perdido, mas a chavinha ta começando a virar.

Eu tive uma ideia de projeto interessante.

A forma que eu mais aprendi sobre negócios, tráfego pago e copywritting, foi na época que eu ensinava sobre isso em grupos, mas eu ensinava e tirava dúvidas, por vontade própria, talvez eles não sabiam, mas o meu pagamento ali era que quanto mais eu explicava um assunto, mais ele se soldificava na minha cabeça, é doido, só quem ensina sabe o quanto isso é verdade.

Isso com certeza ajudou muita gente, e me ajudaria muito caso eu estivesse começando em uma área nova.

Então eu pensei, qual incentivo a pessoa tem de dispor o tempo dela à ajudar os outros em grupos, tirar dúvidas e ensinar? Foi aí que eu pensei em uma forma de recompensar as pessoas por isso.

A ideia do app que pensei, seria uma forma de fórum, onde as pessoas fazem perguntas ou tiram dúvidas, com cada post com status de aberto, ai todos podem responder e tentar ajudar essa pessoa.

Feito o post, as pessoas deram possíveis soluções, agora o autor pode escolher uma solução que funcionou e premiar essa resposta como a vencedora.

O autor da solução poderá acumular esses pontos, e isso é salvo em seu perfil.

Poderia também implementar um podium/tabela com os membros que mais tiraram dúvidas.

O app terá todo o histórico da pessoa, e como ela agregou pra comunidade, isso poderá ser visto com bons olhos para possíves recrutadores e possíveis parceiros de negócio.

Me doi ver a atividade do meu Github ficando baixa agora que eu vou começar a prospectar e aplicar as vagas. Infelizmente é o que deve ser feito.

Agora que finalizei meu portfólio, eu quero aprender a fazer upload de mídias usando Next, pra isso vou utilizar UploadThing.

Quero aprender a implementar um sistema de rate limiting, essencial pra qualquer site em produção, pra isso vou aprender a usar Redis e/ou Next KV.

E também quero aprender outra forma de autenticação para Next que não seja Next Auth, gosto muito do Next Auth mas vejo pouca frequência em projetos novos.

Pra sidebar ficar sticky, ela precisa ter primeiro, tela pra descer, ou seja, ela não pode ocupar todo espaço vertical, height fit content é bem vindo, mas mais interessante é colocar max-height 100vh, assim faz com que ela mantenha o tamanho da tela, e caso passe, ele scrolla.

Top 0 pra dizer aonde deve começar o sticky.

No futuro, entre um projeto e outro, pretendo adicionar uma forma de criar esses posts de forma mais abstraída. Da forma que eu to fazendo agora, eu to literalmenete escrevendo cada post como objetos, criando ID na mão, colocando data de criação na mão, niguém merece.

Uma boa ideia seria colocar todos os posts em um banco de dados, pra isso tava pensando em implementar isso usando MongoDB, vai ser a primeira vez que eu vou utilizar Mongo então escolhi uma implementação simples.

Ainda vou criar uma página secreta pra isso, é possível que alguém mau intencionado possa excluir todos os posts, ai ferrou tudo

Acredito que finalizando o blog agora, o portfólio vai finalmente ficar pronto, graças a Deus, esse projetinho tomou muito tempo, to com saudades de implementar uma lógica, mexer com API, com banco de dados...

Quero voltar pro Auction App!! 🥶🥶

Agora na Home, o botão de contact na header ta funcionando, mas ele não funciona em outras páginas.

Eu vou fazer com que caso ele não esteja na home, ele mude de página e então de o foco. Por agora eu tenho ideia de como vou implementar, mas a sequencia de trocar de página e então scrollar que é algo que vou aprender, talvez com promises? Espero que seja.

Eu vou adicionar uma funcionalidade de sumir o elemento flutuante da toolbar quando chegar no final da página.

Vou adicionar um toolbar na página do blog para filtrar ele e acessar melhor os posts.

Dado o relato anterior, eu quero adicionar uma funcionalidade de preservar a posição vertical do usuário entre navegações ida e volta, como o feed to Twitter, você abre um post, mas quando volta, ele volta exatamente aonde você estava.

Isso é super simples de fazer com javascript, mas eu to usando server components, então o approach precisa ser diferente.

Eu imagino que uma vez que a página esteja baixada no client, um post é aberto, a página de feed não seja perdida, então quando voltar, ele deveria voltar no feed sem mudar absolutamente nada, nem mesmo o scroll vertical, mas pelo contrário, ele muda o scroll lá pra cima.

No momento desse post eu ainda to procurando uma solução pra esse problema.

Relato, não gosto de React Server Pages/Components, é tudo menos intuitivo, qualquer solução que você pense em fazer, você precisa esperar que seu framework ja tenha implementado isso de forma nativa para Server Components, caso contrário terá que usar client component.

A relação entre o que pode ser compartilhado entre client e server é muito nebulosa, o que ta disponível pra ser usado muda, hooks e state management ficam super engessados. Praticamente você precisa re-aprender a usar React.

Aplicado a solução responsiva hard coded, surge outro problema, 100vw - paddings em telas maiores, a tabela fica imensa, então eu teria que aplicar uma forma de limitar o tamanho da tabela até certo ponto, ponto esse que poderia ser seu tamanho mínimo, sem scroll horizontal, e sem crescer além do necessário.

Colocando "max-width: fit-content;" ele funciona a primeira vista, mas ai acontece algo que eu não sabia e me deixou triste.

O max-width apenas limita o tamanho do que nós vemos, porém o width continua do mesmo tamanho no contexto, o que ocasiona em toda a section estar sendo esticada porque "100vw - paddings" estava esticando toda a largura da section, mesmo com max-width.

A única solução que eu consegui pensar para esse problema, foi usar "width: min(var(--tamanho_do_elemento), calc(100vw - paddings))" e funciona perfeitamente, por algum motivo, "width: min(fit-content, calc(100vw - paddings))" não funciona, mas seria perfeito na ocasião, então o que me restou foi usar uma variável CSS a nível de tabela, para definir seu width de forma manual.

Criando a página do projeto "Análise de Estruturas", me deparei com um problema na hora de criar a tabelas, elas não são responsivas por padrão.

Eu tentei várias formas de deixar elas responsivas de forma dinâmica, mas não consegui, a única coisa que funcionou foi fazer "100vw - paddings", o que é uma solução funcional mas não é dinâmica, caso eu mude os paddings da section, eu teria que mudar nessa outra parte do código também.

Aprendi que existe como importar coisas de forma mais dinâmica usando next/dynamic.

No meu caso eu tinha um componente que tava dando erro de conteúdo sendo renderizado de forma diferente no server e no client. Eu resolvi isso usando o next/dynamic dizendoq que o componente seria apenas carregado no client side.

const Component = dynamic(() => import("./Component").then(mod => mod.Component), { ssr: false })

Por algum motivo que ainda não sei, a fonte Montserrat, em dev mode não estava sendo carregada na página, inspencionando, a classe estava la, mas não aparecia na seção onde tinha as classes e suas propriedades.

Talvez seja algum problema relacionando a má configuração.

Pra usar uma fonte do next em um client, é só envolver o elemento com um Server Side Component que contenha aquela font.

edit: se usar tailwind da pra as variants pra colocar a fonte de forma dinamica a nivel de elemento

Por algum motivo que ainda não sei, a fonte Montserrat, em dev mode não estava sendo carregada na página, inspencionando, a classe estava la, mas não aparecia na seção onde tinha as classes e suas propriedades.

Talvez seja algum problema relacionando a má configuração.

Quando imprimir paragrafos de texto em tags HTML, na key deve se colocar também o índice, dado que surgirão paragrafos de string vazias `` mais de uma vez, não sendo útil para ser usado como key de um elemento.

Portfólio: Tava dando um erro de UI não correspondendo ao HTML enviado pelo servidor, porque eu tava utilizando uma tag Link dentro da outra.

Tentei colocar minha foto de perfil na sessão Sobre Mim com a tag <Image /> do Next, mas é uma dor de cabeça ajustar o tamanho da imagem, se tu quiser ela quadrada então, esquece.

Optei pela e velha boa tag <img />

Assim que eu acabar meu portfólio, vou voltar a trabalhar no Auction App para resolver o problema de agendamento de ações, envio de notificações, e upload de arquivos para uma CDN, para assim finalizar a primeira versão daquele projeto.

Sobre desenvolver o portfólio, eu realmente estive indeciso entre user React puro e Next.

Next possui um superset de funcionalidades que são essenciais para produção, principalmente para servir as páginas já prontas de forma estática.

Já o React puro, precisa montar a página em runtime, porém ele é muuito mais rápido para desenvolver, coisa que o Next com certeza não é, o hot reload do Next não é amigável.

O meu projeto Auction App infelizmente vai ficar pausado por um tempo até eu finalizar meu portfólio.

Eu descobri também que a Vercel é serverless, o que impede o agendamento de ações dentro do servidor, ou seja, não consigo fazer com que anuncios sejam finalizados de forma automática nem consigo enviar notificações para os usuários.

Até que eu encontre uma solução para isso, eu vou deixar o projeto adormecido.