My first website, built in 2007 😱

This post is a text version of the video: My FIRST WEBSITE from 2007 - I finally found it! which I published on my YouTube channel.

It’s worth watching! 😊

---

Not all legacy code is bad

After a while working with tech, you start to realize that the code written today will eventually become tomorrow’s legacy code. Even if it was written following the best patterns and approaches, there will always be things that could be improved.

A sina do desenvolvimento é abrir uns códigos que escrevemos um tempo atrás e pensar:

- Que merda eu fiz aqui

That’s because, on top of how fast things change and new stuff shows up, we also tend to get better every day, which often makes projects created in the past look much worse than they actually were.

On top of that, there’s another factor we often don’t take into account when evaluating older code or projects:

The variables of that specific day and that specific project

We’ll hardly remember, but there are a bunch of variables that could have impacted the way that code was written or how some decisions were made, things like:

• Experience of the people involved
• Pressure to hit results
• Changes to the original scope
• Delivery deadline

Or it may simply have been written on a day when we weren’t doing so well.

So from time to time I like to look at projects I worked on in the past and do some evaluations, even trying to remember some factors like the ones I mentioned above.

It even helps me understand my own growth over that period.

Refactor yourself

An interesting tactic is to take older personal projects and build them again. That turns out to be useful both for studying and applying new technologies and for actually refactoring that code.

The project where I used this strategy the most was my own site (the one you’re visiting right now), which has at least 3 different versions over time (in Portuguese), with changes at every level: architecture, stack, even layout.

The best part is that all those code changes are recorded in the git history itself in case you want to analyze them later.

Looking to the past

With that intro out of the way, I’ve always been curious to see the first projects I built.

I remembered an experimental project I had built in college in 2007, when I was about 16 or 17, in the context of simple exercises to practice HTML and CSS.

But I remembered I had gone further: I took a few nights and tried to build a project that could serve as a portfolio later, so it was a few nights working on it with all the support of the late, great Maujor’s site, until I had a barely presentable version.

But I didn’t remember whether I had kept a copy of that project or whether it had been lost in the limbo of time.

So I looked for this project for a long time in vain, until the other day, digging through an old email inbox (which, by the way, was how we versioned files back then 😅), I ended up finding it.

The attachment’s name was of dubious credibility, right in line with what we did at the time:

Já temos uma geração inteira que não passou pela loucura do versionamento artesanal de arquivos através de intermináveis anexos no email e nomes com credibilidade duvidosa:

*_final.zip
*_final_final.zip
*_final_finalizada.zip

Sem saber ao certo qual era de fato a versão final.

It was really cool and funny to imagine myself as a 16-year-old teenager working on this prototype with no idea about the future that awaited me, and that this code would be responsible for completely changing my life 😊

Disclaimer

This wasn’t exactly my first experience with HTML and CSS. A few years earlier, around 2002 or 2003, an uncle subscribed to some computer magazines that had basic web development tutorials, and I loved playing around with them, trying to build Emulator and ROM sites 😂

But of course I didn’t keep any record of that, especially since at 12 or 13 years old I would never have imagined that pile of code would end up being my profession.

My first job

Refletindo sobre o que o "JavaScript me deu", além de conquistas materiais tem uma coisa intangível:

- Perspectiva

Programação me possibilitou sair da periferia de SP (que nunca saiu de mim) pra ter experiências e conhecer lugares que nem ousaria sonhar.

JS mudou minha vida ❤️

Back then it would have been completely impossible to imagine what my life, or even the world, would look like 15 years later.

But in the end I only landed my first job as a developer about 2 years later. Before that I ended up working in telemarketing and as an assistant in a computer lab.

I had to send literally thousands of emails and go through many interviews until I got my first opportunity as a web developer, in mid-2009

The start of a career is never easy.

Início de carreira nunca é fácil.

Entre 2007-2009, enviei milhares de emails desses e fui ignorado 99% das vezes.

É assim com quase todo mundo, se essa é sua situação atual, continue firme, com trabalho e um tiquinho de sorte sua carreira vai ser foda 👊 pic.twitter.com/VqrQOlSqbu

Technology and its evolution

I also stopped to think about the changes technology has caused in the world over time, and about things like

• Streaming
• Smartphones
• Cryptocurrencies
• Video calls
• Electric cars
• Virtual assistants
• Facial recognition
• Cloud storage
• Internet speed
• 3G, 4G, and 5G
• Messaging apps
• Ride-hailing apps
• And even Remote work

Many of these things were unthinkable in 2007 but seem completely mundane today.

Did you stop to think that we still bought things like DVDs to watch a movie and CDs to listen to music?

It sounds like something out of the Middle Ages, but a little over a decade has passed since then 😂

That shows that if we take a guess, we probably won’t get most of the technologies we’ll be using 15 years from now right.

My first website

Now, finally talking about my first project. First of all, I put the code in an open repository on GitHub and didn’t change anything in the files of the attachment I found in that email.

🔗 Really worth checking out 😁

It’s exactly as it was made back then.

It’s a fully static experimental site that uses only HTML and CSS, using some movies I really liked at the time as examples to simulate a DVD e-commerce store.

It’s really interesting to look at the layout structure, which clearly reflects other times, built for an 800x600 resolution

It was clearly made by someone still early in their career, but I noticed I tried to use some “fluid layout” techniques already in 2007, meaning it was an attempt to adapt the layout if the window size changed.

The code is pretty simple and represents web development of the time well, using images to create effects like opacity, rounded borders, and visual effects that would be easily done with CSS today.

On top of that, it goes all in on styling elements by ID, which to me has always been a bad practice but was commonly taught in the past.

In the HTML, pages were created literally by duplicating files, in an era still very far from the conveniences that Front-end frameworks would bring in the future.

Front-end evolution

Sempre que sugerem que Front-end é simples, lembro que precisamos dominar:

- HTML: Semântica, Tags, SEO, Acessibilidade

- CSS: Propriedades, Seletores, Layouts, Grids, etc

- JS: Manipulação de DOM, Fetch API, ES6+, Modularização, Hoisting, Scope, Prototype, etc

[...] thread

Front-end development, which back then didn’t even have a name, has changed a lot over these years

If back then the concerns were much more tied to the interface, today we deal with many layers of abstraction and need to worry about lots and lots of things.

We’ve gone through many technologies and stacks that kept getting better and making our lives easier day after day, at the same time as we started taking on more and more responsibilities within projects and within companies.

The profession got a name, got maturity, got recognition, became essential, and today Front-end professionals are among the most valued in the market.

I’ve even recorded a video (and written a post) about things I consider important for people working with Front-end to know today.

Nothing new on the Front

But even with all these changes, including in the way we write code today, the core specifications when it comes to HTML and CSS remain the same:

• HTML is concerned with semantics
• CSS is concerned with styles

This only reinforces the importance of really understanding what things are for, instead of just using them because someone said they’re cool or because they’re trendy and everybody’s using them.

Conclusion

It was really cool to take this trip back in time and reflect a bit on my own life over all these years. It helps us understand where we came from and where we’re going.

Thanks and see you next time!