Meu primeiro site feito em 2007 ūüėĪ

Sempre tive curiosidade pra ver os primeiros projetos que trabalhei e depois de muito tempo procurando finalmente encontrei o primeiro site experimental que desenvolvi.

Esse texto é uma versão em texto do vídeo: Meu PRIMEIRO SITE feito em 2007 - Finalmente encontrei! que publiquei no meu canal no Youtube.

Vale a pena assistir! ūüėä


Nem todo legado é ruim

Depois de um tempo trabalhando com tecnologia a gente come√ßa a perceber que o c√≥digo escrito hoje eventualmente vai acabar sendo o c√≥digo legado de amanh√£, mesmo que tenham sido escritos seguindo os melhores padr√Ķes e abordagens sempre v√£o ter coisas que podem ser melhoradas.

Isso porque além da velocidade que as coisas mudam e novidades aparecem, a tendência é que a gente também fique cada vez melhor dia após dia fazendo com que projetos criados no passado muitas vezes pareçam muito piores do que na verdade eram.

Fora isso ainda tem outro fator que muitas vezes não levamos em consideração ao avaliar um código ou um projeto mais antigo:

As vari√°veis daquele dia especifico e daquele projeto especifico

Dificilmente vamos lembrar, mas existem uma s√©rie de vari√°veis que podem ter impactado a forma com que aquele c√≥digo foi escrito ou algumas decis√Ķes foram tomadas, coisas como por exemplo:

  • Experi√™ncia das pessoas envolvidas
  • Press√£o pra atingir resultados
  • Mudan√ßas no escopo original
  • Prazo de entrega

Ou ele simplesmente pode ter sido escrito num dia que n√£o est√°vamos muito bem.

Sendo assim de tempos em tempos gosto de olhar para projetos que trabalhei no passado e fazer algumas avalia√ß√Ķes, inclusive tentando lembrar de alguns fatores como os que falei anteriormente.

Isso ajuda até mesmo a entender minha evolução nesse período.

Refatore-se

Uma t√°tica interessante √© pegar projetos pessoais mais antigos e desenvolve-lo novamente. Isso acaba sendo √ļtil tanto para estudar e aplicar novas tecnologias como pra de fato refatorar esses c√≥digos.

O projeto que mais usei essa estrat√©gia foi justamente o meu pr√≥prio site (que voc√™ est√° acessando nesse exato momento) que conta com pelo menos 3 vers√Ķes diferentes ao longo do tempo, sofrendo altera√ß√Ķes em todos os n√≠veis como arquitetura, stack at√© mesmo layout.

O melhor de tudo é que todas essas mudanças no código ficam registradas no próprio histórico do git caso você queira analisar depois.

Olhando pro passado

Feita essa introdução, sempre tive curiosidade pra ver os primeiros projetos que desenvolvi.

Lembrava de um projeto experimental que tinha desenvolvido na faculdade em 2007, quando tinha uns 16 ou 17 anos num contexto de exercícios simples pra praticar HTML e CSS.

Mas eu lembrava que tinha ido além, peguei umas noites e tentei fazer um projeto que pudesse servir como portfólio depois, então foram algumas noites trabalhando nisso com todo suporte do saudoso site do Maujor até que eu tivesse uma versão minimamente apresentável.

Porém não lembrava se tinha guardado alguma cópia desse projeto ou se ele tinha ficado perdido no limbo do tempo.

Ent√£o procurei por esse projeto por muito tempo em v√£o at√© que esses dias, vasculhando numa caixa de email antiga (que inclusive era a forma que a gente versionava arquivos no passado ūüėÖ) acabei encontrando.

O nome do anexado era de credibilidade duvidosa, bem em linha com o que a gente fazia na época:

Foi muito legal e engra√ßado me imaginar como um adolescente de 16 anos trabalhando neste prot√≥tipo sem saber nada do futuro que me esperava e de como esses c√≥digos seriam respons√°veis ‚Äč‚Äčpor mudar completamente minha vida no futuro ūüėä

Disclaimer

Essa n√£o foi exatamente a primeira experiencia que tive com HTML e CSS, uns anos antes, por volta de 2002 ou 2003, um tio assinava umas revistas de inform√°tica que tinham uns tutoriais b√°sicos de desenvolvimento web e eu adorava brincar com isso tentando criar uns sites de Emuladores e ROMs ūüėā

Mas é claro que não guardei nenhum registro disso, até porque com uns 12 ou 13 anos jamais imaginaria que aquele monte de códigos no fim viraria a minha profissão no no futuro.

Meu primeiro emprego

Naquela altura seria completamente impossível imaginar como minha vida ou mesmo como o mundo estariam 15 anos depois.

Mas no fim eu só consegui meu primeiro emprego como desenvolvedor uns 2 anos depois. Antes disso acabei trabalhando com telemarketing e como monitor num laboratório de informática.

Tive que mandar literalmente milhares de emails e participar de muitas entrevistas até conseguir minha primeira oportunidade como desenvolvedor web já em meados de 2009

Começo de carreira nunca é fácil.

Tecnologia e suas evolu√ß√Ķes

Então também parei pra parar pra pensar nas mudanças que a tecnologias causou no mundo ao longo do tempo e em coisas como

  • Streaming
  • Smartphones
  • Criptomoedas
  • Video chamadas
  • Carros el√©tricos
  • Assistente virtuais
  • Reconhecimento facial
  • Armazenamento na nuvem
  • Velocidade da Internet
  • Tecnologia 3G, 4G e 5G
  • Aplicativos de mensagens
  • Aplicativos de transporte
  • E at√© mesmo o Trabalho remoto

Muitas dessas coisas eram impens√°veis em 2007 mas parecem completamente banais hoje em dia.

Voc√™ parou para pensar que a gente ainda comprava coisas como DVDs para assistir um filme e CDs para escutar m√ļsicas?

Parece coisa da Idade M√©dia mas um pouco mais de uma d√©cada se passou desde ent√£o ūüėā

Isso mostra que se gente chutar provavelmente n√£o vamos acertar a grande maioria das tecnologias que vamos usar daqui 15 anos.

Meu primeiro site

Meu primeiro site

Agora finalmente falando sobre o meu primeiro projeto, antes de tudo deixei o código aberto em um repositório no GitHub e não alterei nada nos arquivos do anexo que encontrei naquele email.

ūüĒó Vale muito a pena dar uma olhada ūüėĀ

Tá exatamente como foi feito na época.

√Č um site experimental totalmente est√°tico que usa apenas HTML e CSS usando alguns filmes que gostava muito na √©poca como exemplo para simular um e-commerce de DVDs.

√Č bem interessante observar a estrutura do layout, que claramente reflete outros tempos, feito para resolu√ß√£o 800x600

Claramente foi feito por algu√©m ainda no inicio de carreira mas percebi que tentei usar algumas t√©cnicas de ‚Äúlayout fluido‚ÄĚ j√° em 2007, ou seja, era uma tentativa de adaptar o layout caso se o tamanho da janela mudasse.

O código é bem simples e representa bem o desenvolvimento web da época, usando imagens pra criar efeitos como opacidade, bordas arredondadas e efeitos visuais que seriam facilmente feitos com CSS atualmente.

Além disso usa e abusa da estilização de elementos usando IDs que pra mim sempre foi uma má prática mas era comumente ensinada no passado.

No HTML as páginas foram criadas literalmente duplicando os arquivos, numa época ainda muito distante das facilidades que os frameworks de Front-end trariam no futuro.

Evolução do Front-end

O desenvolvimento Front-end que na época ainda nem tinha nome mudou demais ao longo desses anos

Se naquela √©poca as preocupa√ß√Ķes eram muito mais ligadas a interface hoje lidamos com v√°rias camadas de abstra√ß√£o e precisamos nos preocupar com muitas e muitas coisas.

Passamos por várias tecnologias e stacks que foram ficando cada vez melhores e facilitando nossa vida dia após dia ao mesmo tempo que começamos a ganhar mais e mais responsabilidades dentro dos projetos e dentro das empresas.

A profiss√£o ganhou nome, ganhou maturidade, ganhou reconhecimento, passou a ser fundamental e hoje profissionais Front-end est√£o entre os mais valorizados do mercado.

Inclusive já gravei um vídeo (e escrevi um texto) com coisas que considero importante que pessoas que atuam com Front-end saibam atualmente.

Nada de novo no Front

Mas mesmo com todas essas mudan√ßas, inclusive na forma que escrevemos os c√≥digos hoje em dia, as especifica√ß√Ķes principais quando falamos de HTML e CSS seguem as mesmas:

  • HTML se preocupa com a sem√Ęntica
  • CSS se preocupa com estilos

Isso s√≥ refor√ßa a import√Ęncia de realmente entender pra que servem as coisas ao inv√©s de simplesmente sair usando s√≥ porque algu√©m falou que √© legal ou porque t√° na moda e todo mundo t√° usando.

Conclus√£o

Foi muito legal fazer essa viagem no tempo e refletir um pouco sobre a minha própria vida ao logo desses anos todos, ajuda a entender de onde viemos e pra onde estamos indo.

Valeu e até a próxima!