3 ms·

The server side image map. 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 ba

by somat 3y ago

The server side image map. 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.

Magodo 3y ago
> 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
- somat 3y ago
  Sure the language is a little iffy, but as someone who enjoys shell scripting I have used worse. I think what I don't like is managing the logic two steps removed from where it is used. I tend to write my web apps in what is referred to today as server side rendered(Which sounds stupid to me, I am not rendering anything, I am outputting html for the html terminal to render) as such, all my logic is on one end, and mixing in logic, in a different language, for the other end feels really ugly. I have recently tried to be a better person and get more comfortable with javascript. What I have found that works is to completely invert the logic dynamics, give the browser a single static page that has nothing in it. only a single script tag that includes a javascript file. Then generate the whole page from that. Now all your logic is still in one language[1] and really javascript is a lot of fun to write, the language is still sort of crap, but now the dynamic stuff is really simple. 1. as a footnote, the great tragedy of the web is that (script language=) only works for javascript. wasm is an attempt to rectify this, but I think that while they are doing the best they can with the shitshow they have to work with. wasm is solving the problem at entirely the wrong layer.
  - steve_taylor 3y ago
    Using SvelteKit, Drizzle (with drizzle-zod) and tRPC, the process of building a full-stack, highly interactive web app in a single, statically-typed language is quite painless these days.
  - herbcso 3y ago
    > as someone who enjoys shell scripting Ya sick bahstahd! ;]
  - graemep 3y ago
    > I tend to write my web apps in what is referred to today as server side rendered(Which sounds stupid to me, I am not rendering anything, I am outputting html for the html terminal to render) as such, all my logic is on one end, and mixing in logic, in a different language, for the other end feels really ugly. And you often end up with server side rendering as well (hopefully provided by your framework) to make initial page loads faster.
electroly 3y ago
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 :(
pimlottc 3y ago
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.
- a1369209993 3y ago
  > Without the original server, there's no way to discover the destination URLs for the rest of the site. Try $ wget http://web.archive.org/cdx/search/cdx?url=http://example.com/* for a list of every archived page from the site. It won't include pages archive.org doesn't have, but without the original server, there's no way to get those anyway.
  - exikyut 3y ago
    That's the problem though. If the imagemap is serverside, how does the IA archiver know where to click? :(
whalesalad 3y ago
https://www.weather.gov/dtx/ https://www.weather.gov/dtx/ still use one almost daily for getting weather data in my area lol
dylan604 3y ago
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
- somat 3y ago
  If it were anything other than tagging features in a picture I probably could and would have.
- perilunar 3y ago
  > you could do the same with some CSS with absolute positioned hot spots Nah, just use a client-side image map. Image maps are not deprecated, they still work in browsers, and you can use polygons to create shapes that would be difficult in CSS.
commandlinefan 3y ago
> I am the worlds worst web programmer Hey there now, you can't just lay claim to my title without first beating me for it in a title match.
aidenn0 3y ago
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.
Gormo 3y ago
Any reason you couldn't have used a client-side imagemap and avoided having to write any code for it?
- somat 3y ago
  The function was to tag features on a photo, it ended up being this multi state process where you set a feature then click the point on the photo. Because I am an idiot, and the tool was really only for me, rather than infect my pristine, beautiful code(it's not, it is this horrible ball of python) with 5 lines of javascript, in a task that javascript was made specifically for. I spent all day figuring out how to do it with server side image maps. In conclusion. there is no way to send an arbitrary point using client side image maps. a task server side image maps specifically solves.

by somat 3y ago

Magodo 3y ago

> 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

somat 3y ago
Sure the language is a little iffy, but as someone who enjoys shell scripting I have used worse. I think what I don't like is managing the logic two steps removed from where it is used. I tend to write my web apps in what is referred to today as server side rendered(Which sounds stupid to me, I am not rendering anything, I am outputting html for the html terminal to render) as such, all my logic is on one end, and mixing in logic, in a different language, for the other end feels really ugly. I have recently tried to be a better person and get more comfortable with javascript. What I have found that works is to completely invert the logic dynamics, give the browser a single static page that has nothing in it. only a single script tag that includes a javascript file. Then generate the whole page from that. Now all your logic is still in one language[1] and really javascript is a lot of fun to write, the language is still sort of crap, but now the dynamic stuff is really simple. 1. as a footnote, the great tragedy of the web is that (script language=) only works for javascript. wasm is an attempt to rectify this, but I think that while they are doing the best they can with the shitshow they have to work with. wasm is solving the problem at entirely the wrong layer.
- steve_taylor 3y ago
  Using SvelteKit, Drizzle (with drizzle-zod) and tRPC, the process of building a full-stack, highly interactive web app in a single, statically-typed language is quite painless these days.
- herbcso 3y ago
  > as someone who enjoys shell scripting Ya sick bahstahd! ;]
- graemep 3y ago
  > I tend to write my web apps in what is referred to today as server side rendered(Which sounds stupid to me, I am not rendering anything, I am outputting html for the html terminal to render) as such, all my logic is on one end, and mixing in logic, in a different language, for the other end feels really ugly. And you often end up with server side rendering as well (hopefully provided by your framework) to make initial page loads faster.

electroly 3y ago

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 :(

pimlottc 3y ago

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.

a1369209993 3y ago
> Without the original server, there's no way to discover the destination URLs for the rest of the site. Try $ wget http://web.archive.org/cdx/search/cdx?url=http://example.com/* for a list of every archived page from the site. It won't include pages archive.org doesn't have, but without the original server, there's no way to get those anyway.
- exikyut 3y ago
  That's the problem though. If the imagemap is serverside, how does the IA archiver know where to click? :(

whalesalad 3y ago

https://www.weather.gov/dtx/ https://www.weather.gov/dtx/ still use one almost daily for getting weather data in my area lol

dylan604 3y ago

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

somat 3y ago
If it were anything other than tagging features in a picture I probably could and would have.
perilunar 3y ago
> you could do the same with some CSS with absolute positioned hot spots Nah, just use a client-side image map. Image maps are not deprecated, they still work in browsers, and you can use polygons to create shapes that would be difficult in CSS.

commandlinefan 3y ago

> I am the worlds worst web programmer Hey there now, you can't just lay claim to my title without first beating me for it in a title match.

aidenn0 3y ago

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.

Gormo 3y ago

Any reason you couldn't have used a client-side imagemap and avoided having to write any code for it?

somat 3y ago
The function was to tag features on a photo, it ended up being this multi state process where you set a feature then click the point on the photo. Because I am an idiot, and the tool was really only for me, rather than infect my pristine, beautiful code(it's not, it is this horrible ball of python) with 5 lines of javascript, in a task that javascript was made specifically for. I spent all day figuring out how to do it with server side image maps. In conclusion. there is no way to send an arbitrary point using client side image maps. a task server side image maps specifically solves.