True story. I am the worlds worst web programmer, that is I am not a web programmer, I am a sys-admin that occasionally makes web based tooling. And as such my web skills are stuck in the early 2000's. On top of that I have this terrible aversion to javascript(I am already writing a code generator in one language to create a second language, now you want me to throw a third language on top of that... no thanks). On one of my recent tools I needed to do some basic operations involving points on a picture. it probably would have been 5 lines of javascript, the only 5 lines of javascript in the whole infernal thing. No thanks, I won't be having any of that in my program, I am going with server side image maps... in 2023... yeah. So now instead of 5 lines of JS I now have 50 lines of python managing state and a special case in the request handler to handle the screwball fragment syntax.
I cringe a little, but am also strangely enough, a little proud of getting the thing to work at all.
The worst part about server side image maps is that it completely breaks archiving. So many times I've tracked down an old website address on archive.org's Wayback Machine, only to find that the homepage is one big server side image map. Without the original server, there's no way to discover the destination URLs for the rest of the site. It's a complete dead end.
Back in 2015 I fixed Chromium's support for server side image maps. It was almost totally broken at the time--any zoom/scale level other than 100% would throw it off, nonzero padding would throw it off, several issues like that. Nobody had noticed because image maps aren't used any more in general, and server-side image maps REALLY aren't used, but I was in the same boat as you: I wanted an easy way out without JavaScript, and I remembered my 90s HTML.
Sadly, after I fixed the Chromium bug, I decided the server-side image map sucked and I wrote the JavaScript anyway. The JavaScript version is better :(
> only 5 lines of javascript in the whole infernal thing. No thanks, I won't be having any of that in my program
I feel exactly the same way. HTMX is a godsend. That and a Tailwind UI purchase can make anybody very dangerous at frontend. I'm curious for other viewpoints though: what exactly about js gives that icky feeling. For me it's just the inconsistent syntax. With TS, on the other hand just seeing a node modules folder makes me nauseous. The whole thing gives me a feeling of a lack of control over what's happening and has thrown me off front end for many years until now
Funny story, but I was at home in late 2019 and needed to interact with a device gui that didin't have any remote desktop software at work. It did have a screenshot tool and a command-line tool that would inject clicks though.
a few dozen lines of lisp later and I had a web server that served up an image map of the screen, and would respond to image-map requests by inserting a click. A nice little one-off to save me the round trip to work.
Then COVID happened and this tool got used by way too many people. For all I know someone is still using it.
good gawd! you could do the same with some CSS with absolute positioned hot spots. i can think of plenty of other CSS ideas to make it responsive. not one line of JS required.
i get it. i hate being in charge of UI. i'm a backend type through and through. however, i do have to do it much more regularly than you. i refuse to use libraries. so i've kept up with the changes to CSS since the early 2000s, and you can do some amazing things with it. i think it fits your "get off my lawn" style and can't recommend enough teaching an old dog new CSS tricks.
Edit: left out enough which is totally the opposite of intended point
> To this day it is the only way to vertically center elements.
Not true anymore (edit: didn't see the 2014) but the productivity cost of not being able to just "vertical-align: middle;" inside divs for the last 30 years must be billions of dollars.
Also does anyone remember the fade of the overline style on :hover links? It must has been around the IE4 or IE6 era.
Tables were also used to make divs and buttons with rounded corners, but that was true into the 2000s as well. The agony of designing and splicing them in Photoshop and putting them in table cells...
> > To this day it is the only way to vertically center elements.
> Not true anymore (edit: didn't see the 2014) but the productivity cost of not being able to just "vertical-align: middle;" inside divs for the last 30 years must be billions of dollars.
Even back then (possibly even back in the 90s? I know this existed in the 2000s) we had "VALIGN=MIDDLE" inside table cells.
Nowadays I just ask ChatGPT to write the CSS for me for that, and amusingly, it seems to be able to produce at least a dozen of solutions (often came with redundant rules, too: like having 5+ rules when 2 or 3 of them are enough).
It's still a huge PITA and requires all sorts of subtle understandings. Even in tailwindcss it's not simple, you need to think about what kind of element is it (block or not), is it text or not, what layout is on the parent, yada yada yada.
> Tables were also used to make divs and buttons with rounded corners, but that was true into the 2000s as well. The agony of designing and splicing them in Photoshop and putting them in table cells...
Wasn't an image with a click <map> easier? I wasn't old enough to write very complicated html pages so my experience is lacking here.
> The agony of designing and splicing them in Photoshop and putting them in table cells...
Wasn't there a Photoshop-adjacent tool that did the slicing for you? I remember a print designer on my first job feeding what was, essentially, a full-bleed leaflet design through it, and producing a "landing page" with hundreds of table cells.
This week I ran into a problem with vertical centering I couldn't figure out: Text in a flex item with overflow ellipses and vertical centering. Other people online have shared solutions that did not work for me, but I've since convinced myself it looks better as-is. Billions of dollar is not an exaggeration.
> Sites like Dynamic Drive meant that instead of thinking through creative solutions for problems you face, you could just copy and paste this 50 line block of code and everything would be fixed.
DHTML in this context stood for Dynamic HTML, not “distributed”, hence the Dynamic of Dynamic Drive.
Let's not forget frames, the original 'solution' to the problem of having to edit the navigation bar on every page.
Unfortunately, you then had to figure out what to do if someone accessed the frame page directly, since search engines could still index these parts of the page seperately. And they always felt jarring and awkward too, since the cutoff between sections was always obvious...
The year is 1996. Microsoft's homepage has a menu bar that expands when you move your mouse over it. I am determined to figure out how this works.
At the time, IE has a "view source" button, but it's not very platform aware. You get a Notepad doc. The server is running Unix with files where lines break on "\n" and I'm on Windows, which needs "\r", so the source is one single long line of html.
I look through the source thoroughly: what is in their html that I don't know about that lets them make things move around? All the html tags are ones I know. All the content is text I can see on the page.
The only mysterious bit is these " "s. I've never seen those before and don't know what they are. They appear on sites with moving menus. They must be related.
(For six months, I believed the effect of dhtml was achieved through magic incantations of what turned out to be html entities. A bit later I found WebMonkey tutorials and this turned into a whole career.)
Minimizers and compilers are great, but I so miss reading through the well manicured and maintained source of a well-designed site.
I wish we could have gone with a type of compression that allowed us to keep the original source formatting for perusing production code, and ideally keep the expectation that others from around the world will be reading our code.
I imagine it had a lot to do with how quickly this thing has progressed early on. It's definitely a big part of my own origin story in this industry.
I want to know what was actually causing the moving menus! I wasn't around coding at the time, so I'm going to guess that the moving menus were actually caused by a `<script>` tag (maybe one pointing at an external JS file?). Did you ever find out the reason? Is my guess correct?
Similar experience wanting to replace images on mouse over. Bought "JavaScript Bible" at Barnes & Noble, read it that weekend and never stopped learning.
Don't forget that tables could be used for rounded corners. Or maybe I'm an early 00s web developer with that? The trick is that we created 3×3 tables, and aside of the middle cell, it would contain <img>s, so that the creation was a website element with rounded edges, the pinnacle of human expressiveness.
Since HTML emails were also the rage, and email clients updated much slower than browsers, this technique was used well into the 2010s, if you wanted your thing to be displayed correctly.
No 90s/00s website would be complete without a "best viewed in 800x600 resolution" button. If you wanted to go fancy, you'd also put "Valid HTML 4.01".
Another goodie: ads used to be simple standard sized <img> banners, instead of the crazy JavaScript bundles & video ads like today.
I remember being in shock when I realized that Norton Internet Security 2003 was silently rewriting HTML on the pages I visit and removing `<img width=468 height=60>` banners (and a few other standard ad sizes) but keeping everything else. (20-years old confirmation that adblockers are a security solution! ;)
I recommend The Geocities Gallery [1] to go back in time and experience the 90s web yourself, there is something beautiful about all these personal web pages. Each one has a distinct look that alone can tell a lot about the author's personality, usually contains some bio info together with several random personal pictures, lists of recommended links with short descriptions, loose talk about their hobbies and so on - it's just so personal and calming, a striking contrast to today's social media where each profile page looks the same (bland and boring), with overwhelming, ever growing amount of content and a pressure to maintain a certain image of one's life.
Ah, the 90s - a time when <table> was the answer to every web layout question. Miss aligning your text? <table>. Need a fancy menu? <table>. Creating a full website? Nested <table>s! Who needed CSS when you had rows and cells to hack your way through design? Good old days of <td>-ing everything!
Speaking of the greatness of the 90s, does anyone have a good version of the classic "Under Construction" GIF?
You know the one — it was in the style of a yellow road sign, and on it was a pixelated silhouette of a construction worker diligently shoveling.
Long before Gmail had the smug audacity to leave "Beta" on their product name, you could use this GIF (or even a whole row of them!) to proudly announce to the world that your site was — like all great works of art — never complete.
I've searched high and low for the classic version of this GIF — the true, original, platonic ideal — but all I've been able to find are poor knockoffs.
I don't remember if this was a common technique, but before XmlHttpRequest (came in 2000, i think) we used to do "Ajax" by loading data into an invisible iframe and reading the contents. Worked well iirc.
I remember how shocked my friends looked whenever they came by and saw it open on my screen. They never understood why I spend hours on that thing instead of just playing games.
The first time I thought about learning to code was when I visited Linkin Park's website. Sure, it took 10 long minutes to load but it was a masterpiece of its own.
I'd just open the website and stare at it. And one day I just decided that I'm going to make one myself. I'm trying still...
Image Maps were huge in the 90s. You’d have your landing page or header navigation as a giant image and just define shapes around the areas you wanted to be buttons. Saved you from having to chop the image up into tables.
<input type=image> was similar but processed server side, clicking the image submits the form and reports the clicked X and y to the server. We used this at my first job a ton for maps. The MDN article actually doesn’t do this input type justice and misses their true use.
HTTP 204 was huge too, and something I still use. Early way to send a message to the server without a page refresh before AJAX. If a request responds with a 204 the browser stays on the current page. Lots of star rating systems like on Amazon and early Netflix for instance used this. Click a star, link makes the request, 204 keeps you on the current page. Sometimes you’d add a little JS to pretty the interaction up. CSS active was usually good enough.
> Have you ever shoved a <blink> into a <marquee> tag?
If you did, it would blink on Netscape, and it would be a marquee in IE, but not both (in the 90s!). Netscape had blink and IE had marquee and did not support the other[1][2], at least in the 90s.
[2] marquee: "the first time I tried Netscape 7, in 2002. Netscape 7 and its close descendent (sic) are, as far as I can tell, the only web browsers to support both <blink> and <marquee>." https://danq.me/2020/11/11/blink-and-marquee/
On the other side we were told that those colorful gradients that will be the fad of the 20s are cheap and we were scolded by professional designers for using them.
Not that we had CSS gradients, we were using gifs or jpegs.
[+] [-] somat|2 years ago|reply
True story. I am the worlds worst web programmer, that is I am not a web programmer, I am a sys-admin that occasionally makes web based tooling. And as such my web skills are stuck in the early 2000's. On top of that I have this terrible aversion to javascript(I am already writing a code generator in one language to create a second language, now you want me to throw a third language on top of that... no thanks). On one of my recent tools I needed to do some basic operations involving points on a picture. it probably would have been 5 lines of javascript, the only 5 lines of javascript in the whole infernal thing. No thanks, I won't be having any of that in my program, I am going with server side image maps... in 2023... yeah. So now instead of 5 lines of JS I now have 50 lines of python managing state and a special case in the request handler to handle the screwball fragment syntax.
I cringe a little, but am also strangely enough, a little proud of getting the thing to work at all.
[+] [-] pimlottc|2 years ago|reply
[+] [-] electroly|2 years ago|reply
Sadly, after I fixed the Chromium bug, I decided the server-side image map sucked and I wrote the JavaScript anyway. The JavaScript version is better :(
[+] [-] Magodo|2 years ago|reply
I feel exactly the same way. HTMX is a godsend. That and a Tailwind UI purchase can make anybody very dangerous at frontend. I'm curious for other viewpoints though: what exactly about js gives that icky feeling. For me it's just the inconsistent syntax. With TS, on the other hand just seeing a node modules folder makes me nauseous. The whole thing gives me a feeling of a lack of control over what's happening and has thrown me off front end for many years until now
[+] [-] commandlinefan|2 years ago|reply
Hey there now, you can't just lay claim to my title without first beating me for it in a title match.
[+] [-] aidenn0|2 years ago|reply
a few dozen lines of lisp later and I had a web server that served up an image map of the screen, and would respond to image-map requests by inserting a click. A nice little one-off to save me the round trip to work.
Then COVID happened and this tool got used by way too many people. For all I know someone is still using it.
[+] [-] dylan604|2 years ago|reply
i get it. i hate being in charge of UI. i'm a backend type through and through. however, i do have to do it much more regularly than you. i refuse to use libraries. so i've kept up with the changes to CSS since the early 2000s, and you can do some amazing things with it. i think it fits your "get off my lawn" style and can't recommend enough teaching an old dog new CSS tricks.
Edit: left out enough which is totally the opposite of intended point
[+] [-] whalesalad|2 years ago|reply
still use one almost daily for getting weather data in my area lol
[+] [-] Gormo|2 years ago|reply
[+] [-] conradfr|2 years ago|reply
Not true anymore (edit: didn't see the 2014) but the productivity cost of not being able to just "vertical-align: middle;" inside divs for the last 30 years must be billions of dollars.
Also does anyone remember the fade of the overline style on :hover links? It must has been around the IE4 or IE6 era.
Tables were also used to make divs and buttons with rounded corners, but that was true into the 2000s as well. The agony of designing and splicing them in Photoshop and putting them in table cells...
[+] [-] Izkata|2 years ago|reply
> Not true anymore (edit: didn't see the 2014) but the productivity cost of not being able to just "vertical-align: middle;" inside divs for the last 30 years must be billions of dollars.
Even back then (possibly even back in the 90s? I know this existed in the 2000s) we had "VALIGN=MIDDLE" inside table cells.
[+] [-] thrdbndndn|2 years ago|reply
It's hilariously stupid.
[+] [-] chasd00|2 years ago|reply
i remember when that was all the rage. So much time spent on freaking corners...
[+] [-] davedx|2 years ago|reply
[+] [-] Andrex|2 years ago|reply
One of my favorite CSS hacks, it doesn't always work in every single situation though...
div { display: table-cell; vertical-align: middle; }
Feels dirty at first but separation of concerns is still enforced, and I can't see any other downsides.
[+] [-] Vespasian|2 years ago|reply
so while "technically" flex was available at the time it wasn't really widespread yet.
[+] [-] consp|2 years ago|reply
Wasn't an image with a click <map> easier? I wasn't old enough to write very complicated html pages so my experience is lacking here.
[+] [-] flir|2 years ago|reply
Wasn't there a Photoshop-adjacent tool that did the slicing for you? I remember a print designer on my first job feeding what was, essentially, a full-bleed leaflet design through it, and producing a "landing page" with hundreds of table cells.
[+] [-] aimor|2 years ago|reply
[+] [-] spacecadet|2 years ago|reply
[+] [-] rzzzt|2 years ago|reply
[+] [-] cqqxo4zV46cp|2 years ago|reply
[+] [-] eps|2 years ago|reply
[deleted]
[+] [-] donatj|2 years ago|reply
> Sites like Dynamic Drive meant that instead of thinking through creative solutions for problems you face, you could just copy and paste this 50 line block of code and everything would be fixed.
DHTML in this context stood for Dynamic HTML, not “distributed”, hence the Dynamic of Dynamic Drive.
[+] [-] balls187|2 years ago|reply
That was meant as a joke, which you misquoted.
Edit to add: others made the same misquote, so I wonder if the author cheekily edited it recently.
[+] [-] blantonl|2 years ago|reply
[+] [-] layer8|2 years ago|reply
[+] [-] xnorswap|2 years ago|reply
Conclusion was that it's a joke, but not a good one.
[+] [-] CM30|2 years ago|reply
Unfortunately, you then had to figure out what to do if someone accessed the frame page directly, since search engines could still index these parts of the page seperately. And they always felt jarring and awkward too, since the cutoff between sections was always obvious...
[+] [-] asolove|2 years ago|reply
At the time, IE has a "view source" button, but it's not very platform aware. You get a Notepad doc. The server is running Unix with files where lines break on "\n" and I'm on Windows, which needs "\r", so the source is one single long line of html.
I look through the source thoroughly: what is in their html that I don't know about that lets them make things move around? All the html tags are ones I know. All the content is text I can see on the page.
The only mysterious bit is these " "s. I've never seen those before and don't know what they are. They appear on sites with moving menus. They must be related.
(For six months, I believed the effect of dhtml was achieved through magic incantations of what turned out to be html entities. A bit later I found WebMonkey tutorials and this turned into a whole career.)
[+] [-] enobrev|2 years ago|reply
Minimizers and compilers are great, but I so miss reading through the well manicured and maintained source of a well-designed site.
I wish we could have gone with a type of compression that allowed us to keep the original source formatting for perusing production code, and ideally keep the expectation that others from around the world will be reading our code.
I imagine it had a lot to do with how quickly this thing has progressed early on. It's definitely a big part of my own origin story in this industry.
[+] [-] lelandbatey|2 years ago|reply
[+] [-] unknown|2 years ago|reply
[deleted]
[+] [-] tracker1|2 years ago|reply
[+] [-] joefearnley|2 years ago|reply
[+] [-] npteljes|2 years ago|reply
Since HTML emails were also the rage, and email clients updated much slower than browsers, this technique was used well into the 2010s, if you wanted your thing to be displayed correctly.
[+] [-] jakub_g|2 years ago|reply
Another goodie: ads used to be simple standard sized <img> banners, instead of the crazy JavaScript bundles & video ads like today.
I remember being in shock when I realized that Norton Internet Security 2003 was silently rewriting HTML on the pages I visit and removing `<img width=468 height=60>` banners (and a few other standard ad sizes) but keeping everything else. (20-years old confirmation that adblockers are a security solution! ;)
[+] [-] Spare_account|2 years ago|reply
[+] [-] pkorzeniewski|2 years ago|reply
[1] https://geocities.restorativland.org/
[+] [-] trojan13|2 years ago|reply
[+] [-] q7xvh97o2pDhNrh|2 years ago|reply
You know the one — it was in the style of a yellow road sign, and on it was a pixelated silhouette of a construction worker diligently shoveling.
Long before Gmail had the smug audacity to leave "Beta" on their product name, you could use this GIF (or even a whole row of them!) to proudly announce to the world that your site was — like all great works of art — never complete.
I've searched high and low for the classic version of this GIF — the true, original, platonic ideal — but all I've been able to find are poor knockoffs.
[+] [-] jeswin|2 years ago|reply
[+] [-] ahmedfromtunis|2 years ago|reply
I remember how shocked my friends looked whenever they came by and saw it open on my screen. They never understood why I spend hours on that thing instead of just playing games.
The first time I thought about learning to code was when I visited Linkin Park's website. Sure, it took 10 long minutes to load but it was a masterpiece of its own.
I'd just open the website and stare at it. And one day I just decided that I'm going to make one myself. I'm trying still...
[+] [-] esafak|2 years ago|reply
https://www.creativebloq.com/adobe/image-slicing-photoshop-6...
(2014)
[+] [-] donatj|2 years ago|reply
<input type=image> was similar but processed server side, clicking the image submits the form and reports the clicked X and y to the server. We used this at my first job a ton for maps. The MDN article actually doesn’t do this input type justice and misses their true use.
HTTP 204 was huge too, and something I still use. Early way to send a message to the server without a page refresh before AJAX. If a request responds with a 204 the browser stays on the current page. Lots of star rating systems like on Amazon and early Netflix for instance used this. Click a star, link makes the request, 204 keeps you on the current page. Sometimes you’d add a little JS to pretty the interaction up. CSS active was usually good enough.
[+] [-] nbittich|2 years ago|reply
[+] [-] drivers99|2 years ago|reply
If you did, it would blink on Netscape, and it would be a marquee in IE, but not both (in the 90s!). Netscape had blink and IE had marquee and did not support the other[1][2], at least in the 90s.
[1] blink: "some, such as Internet Explorer, never supported the element at all" https://en.wikipedia.org/wiki/Blink_element
[2] marquee: "the first time I tried Netscape 7, in 2002. Netscape 7 and its close descendent (sic) are, as far as I can tell, the only web browsers to support both <blink> and <marquee>." https://danq.me/2020/11/11/blink-and-marquee/
[+] [-] alamsterdam|2 years ago|reply
[+] [-] denton-scratch|2 years ago|reply
"Dynamic", I think; not "distributed".
[+] [-] pmontra|2 years ago|reply
Not that we had CSS gradients, we were using gifs or jpegs.