My 25 years as a web developer

Not me, obviously. this is Sir Tim. The inventor of the web as we know it.

Here are a couple of things that changed, and things that stayed the same in a quarter-of-a-century of web development.

Holy shit that title makes me look old.

flashback 25 years ago. The World Wide Web was barely 4 years old. Search has just become a thing, MTV just put up its first website, and my first foray into web development was a program called (If memory serves me) Webdesign Wizard.

MTV’s first landingpage. First landingpage full stop.

Getting online wasn’t as easy as it is now. Cable was still a couple of years away and if you were lucky you’d have an ISDN connection to dial into your provider. Which would give you theoretically a 64k connection…
Yes, that is a k. 64000 Bit per seconds. Finding out what to do with the HTML that program generated was another thing. But somehow I managed to get it online. Sorry to say (or maybe thank god) I can’t find it anymore on the Way Back Machine. But it looked like a very trippy Geocities page with flashing text, animated gives that where supposed to mimick red line from either KITT or a Centurion from BG. And of course, everything was centered.

Couple of years into the future, just before the .com Boom and subsequent Bust (Around 1998 until beginning 2001) I started working for a Webdesign firm.

A Browser != Any other Browser

We didn’t have many browsers to select from back then. For normal users, there were basically only 2. There were quite a few more but the two main ones were Netscape Navigator and Internet Explorer. Proper HTML/CSS Standardization weren’t even a real thing. So the two browsers basically implemented any standard in there own way and were very loose with implementing proprietary features to the language (html/css) The subsequent browser wars, the big competition between these two companies (MS and Netscape, and later Mozilla) caused the implemented standards to deviate even more. Which left us, as developers in a lot of cases to implement the same thing twice. The one way for Netscape and another way for IE. Most infuriating being the fact that the same CSS property in both browsers sometimes gave completely different results. Sometimes calling only for the need of a browser reset CSS but a lot of the times resulting in the need for the infamous CSS hacks.

Because there was no way for us to target only a specific browser with just CSS some clever and most likely very patient people found out that if you for at a selector a certain way, it would target a specific browser.

For instance if we wanted to only target IE6 we could write our selector like this

html > body .selector { color: blue; }

If we wanted to target IE6 to IE8 we could write

.selector { color: blue\9; }

And if we wanted to target everything but IE6 or IE7

html>/**/body .selector { color: blue; }

Now we have things like @supports and polyfills to easily mitigate any cross browser issues that might come up. But back then (Actually hacks are still used to this day) we needed to be creative with the way we wrote our selectors.

Browser inconsistencies is still a thing, but not as big as they were, except if you are stuck with having to support legacy browsers (IE9 for instance) then let me give you a hug, I know you need one.

Page Layout? Flex? Grid? Naw man. We had tables for that.

I remember it becoming an interview question. Well actually come to think of it, it was something that incoming developers during the interview needed to show. That they had tables, and in particular nested tables under control. Using transparent sizing px’s or not.

Which were a thing (Transparent spacer images) In order to make sure a table cell or column didn’t collapse below it’s intended width, sometimes we would use invisible images, 1x1 px transparent gif’s (no no..no .png’s yet)

<img src=”transparent.gif” width=100 height=1></img>

Which placed in a cell, this would not allow that cell to get smaller than the width of that image spacer.

And with only tables we could create some well known and often used page layouts.

https://jsfiddle.net/do5abvjz/

Yes this is how we roll.

Now of course we have grid and flexbox where we can describe any layout in no more than 3 lines.

And if you didn’t want, or couldn’t use tables, we of course had :

Frames!

Frames, the mother of all web attack vectors. Basically what a frame did, was load another HTML page (or website) inside a frame that you defined on your page. In the very early day’s, when apparently XSS and Phishing weren’t such a big deal this meant that you could load a target website in an invisible frame, and you could inject some naughtiness into it, either scripts or different styling and have control over whatever happened on that website as far as a user was concerned. They would register a domain that has maybe one letter different like

mybank.com (actual website) would become mybnk.com (your own website)

And when they had a statistically significant amount of visitors at some point someone would mistakenly type in mybnk.com. But still see the webpage of mybank.com pop up inside that frame, being hosted on your domain.

Basically it was a browser within a browser. These holes where patched up pretty quickly and is now one of the reason we have Cross Origin Resource Sharing or CORS. The leftover from this are iframes of course.

But yah, it could also be used for page layouts. But that’s boring.

Nobody likes this Marco.

The magnificent <marquee>

This is actually something that was used, and still is supported in a lot of browsers, although very much deprecated and removed from any standard. But I suspect they keep supporting it for laughs.

It’s the magnificently capable <marquee> tag

<marquee>This is actually something that was used.</marquee>

It scrolls the text across the screen. That is what this does. Nothing more, although there was a way to make it bounce diagonally. If you combine a horizontal scrolling one, with a vertically scrolling one and set it to alternate (move back and forth)

<marquee direction="down" width="100%" height="100" behavior="alternate" style="border:solid">
  <marquee behavior="alternate">
    Bounce
  </marquee>
</marquee>

https://jsfiddle.net/utqa6bsp/

Back in the late 90’s early 00’s this was used to wooh corporate with fancy moving text on the screen. Whatever grabbed someones attention was greenlit right away. That is why everything looked like a Geocities page late 90’s. Plus we really didn’t know any better. UX was not a thing.

Because you could attach an event handler to the onbounce event, we could detect the bounces off the side, and trigger an event in a quasi random way. This feature is unsurprisingly not supported anymore. But was available as far back as IE4 and FF1/Chrome1

Stay tuned for more goodies from 25 years of webdevelopment. Also known as ‘God you should count your lucky stars you are a webdeveloper now’