A Firefox-only minimap (2021) | Hacker News Reader

A Firefox-only minimap (2021)

stefanjudis.com

699 pointssph113 comments

A decade ago I built a silly JS library for folding up DOM elements like paper [1] and I eagerly anticipated using element() instead of tediously cloning nodes for every fold. Here we are ten years later and this niche CSS feature has yet to be adopted by the other browsers. Similarly, I thought I'd soon be using the CSS custom filter spec from the same era (which allows custom GLSL shaders to be applied to elements), but it also has yet to pick up traction.

[1] https://oridomi.com

My understanding was that browser makers looked at the CSS custom filter spec and decided they were too difficult to implement securely[0].

On one hand, I definitely appreciate that, I'm glad to see a feature abandoned if it's being abandoned because it's impossible to do it safely. On the other hand... I wanted CSS custom filters so much and I still regularly think of things I could have done with them :)

[0]: https://lists.webkit.org/pipermail/webkit-dev/2014-January/0...

There's already enough problems with CSS and what it can do that I want an add-on which either disables it entirely, or allows only a tiny subset of it.

I can appreciate a clever use of CSS the same way I can with JS but for my day to day browsing I don't want either being able to do whatever it wants because far too often what websites use it for is user-hostile.

CSS shaders are the kind of feature that I would get a ton of use out of for specific projects, and would also very likely either turn off entirely or at least put behind a permission in my own personal browser.

I get why they're likely a bad idea, I'm not saying they should be implemented. It's very likely the right decision to get rid of them. I just mean... I want them XD

The first thing I do when I work in an editor with a mini-map is -- turn it off. I find it mostly the most useless feature for coding, and for sites it seems to be equally useless. Why?

1. Stuff is too small to really make out where I'm going or navigating.

2. Short or long pages, both don't really benefit from the loss of screen real-estate. Or the distraction really.

3. Other tools like a proper index with descriptive headers, or the search function work so much better to navigate the page.

Where mini-maps could be awesome are large images, or maps. They tend to visual in nature, and when zoomed in you can look at the mini-map to see where you are in the whole. Which is useful.

So, cool future, but this doesn't really seem like a great implementation.

I do the exact opposite.

I use the minimap a lot, as a much better scrollbar. I tend to work on long files and even if I am rarely looking directly at the minimap, it is in my field of view and I often subconsciously glance at it.

This kind of feature is clearly no one-size0-fits-all, but it would be a mistake to consider it is useless because you don't like it.

Same, also in vscode disable the text rendering (which is actually useless), increase the block sizes (shape of the code) and you can recognize bits of your code easily.

I will say that I kind of love minimaps. I don't think that they should be required and I absolutely get why you'd want to turn them off, they take up a ton of space. If you're splitting files more often I could also see it getting really annoying.

But I think of code very visually and spatially and I don't split files until I have to, so it does help me quickly navigate to be able to sort of see the "shape" of a file and to be able to quickly jump around in it, especially if the file is divided into clear sections. Mostly just personal preference, and I agree they should never be mandatory.

And agreed on the large images/maps, most image editors have a viewport feature like that and it's pretty useful when doing detail work.

>1. Stuff is too small to really make out where I'm going or navigating.

It's for looking at the shape of the code, not the contents. Also VSCode for example will show errors visibly highlighted in red in the minimap as well, which makes them easier to navigate to.

VS Code's also shows:

- (Linter) Warnings (in most themes a yellow or orange), like compile errors

- Marks for recently edited sections of code (in most themes a blue). Those marks are also shown in the left hand gutter beside lines but I think they are sometimes too subtle there, but their mini-map counterparts are less subtle.

- Current global search results (a bright gray or sometimes yellow, depending on theme)

- Current file search results (a slightly different gray)

- Current "active token" search results (another gray), such as when you put the cursor mid-word and VS Code naturally highlights all the other uses of that word

- Indicators for all of the lines containing your cursors when using multi-cursor (Alt+click to add additional cursors), which can be very useful to watch in large files with a bunch of shared refactors spread out over some distance

That's just off the top of my head because I use all of those to navigate some source documents.

I think one of the "shape of the code" things not everyone appreciates as well is that some languages create more interesting shapes than others. There are some languages where every file creates a very similar looking waterfall and there are others where the landmarks are much more obvious. Ironically it is sometimes the worst languages that have the most visually distinguishable shapes and where I find I appreciate the minimap most of all. You can visually see sections that began as copied and pasted duplicates, you can see the places where lines are highly repetitive and often those correspond to key patterns of very explicit landmarks ("there's the save code, you can tell because all the field string names are on the left side of assignments; there's the load code, you can tell because all the field string names are on the right side of assignments"). You can't make out the individual words, but you can certainly see those "blocks" like that from that "ten thousand foot view".

There's probably a visual processing/pattern matching thing about minimaps in general that some people have an easier time with than others. I've always liked a good map, regardless of context, so minimaps have always seemed useful to me. Map reading is a large combination of subtle skills, and I have just enough childhood training and natural aptitude that I have a great baseline for just about any map. I appreciate not everyone has those same skills, especially not in the weird arrangement that I do.

I think minimaps can also be great at improving on the 'preview' function of the classic scrollbar they iterate on. A scrollbar can tell me how long a page is and, therefore, give me an idea of whether I want to continue reading or not. But a minimap can help to differentiate between the "short article followed by pages of comments I can ignore" case and the "article far too long to even bother with" one.

I leave it on. It acts as a larger scrollbar when I use the mouse/trackpad/whatever pointing device to scroll. Operating systems these days are all about hiding the scrollbar and/or making it as small as possible. The minimap not only solves that issue, but also gives a bit of a visual representation of the file contents. Sure, you can't read the text, but if you've worked with a file long enough, you know exactly what you are looking at.

I just use the scroll wheel / touch pad, especially the one on Apple's mouse is really intutive. But I also try to not have my files get too large, or use the search function to quickly scroll to somewhere I know.

I do all that. But sometimes I find myself editing a file I did not create. Sometimes that file is large. Actually, that seems to happen a lot.

I think probably most of us use the scroll wheel (or equivalent) to scroll, but the advantage of the visible scroll bar is the immediate feedback of both document length and current location.

It's closer to proper width of the scrollbar than many modern ones :)

I disable it. I like vsc to be minimal like vim. I even use Vim extensions which help me avoid using scroll bar and use crtl-D/u/e/y instead.

Isn't it funny that scrollbars are deemed too space-wasting to make a reasonable size anymore, but there's plenty of space for nonsense like minimaps?

Bring back actual scrollbars! Or at least make it possible to turn them on.

The irony is that the future of scrollbars, especially with narrow webpages and wide monitors, could have been minimaps. But instead we got disappearing scrollbars and reading indicators…

> Operating systems these days are all about hiding the scrollbar and/or making it as small as possible.

At least while coding this is actually pretty old school to have no scrollbar at all. My emacs has no gui elements. I dont need them. I see a 89% to know where I am right now but this information is actually not really useful.

I move expression/function/method/bookmark wise for and backward or I just search and leave marks where I to jump back later. I really avoid touching my mouse and my window manager (xmonad) and development environment are entirely keyboard driven. I tried minmaps, its just distracting eye candy maybe a bit usefull while reviewing a codebase or looking for something.

You can use `figlet` to create banners which are readable in the minimap.

For longer documents, especially with multiple different blocks like code or images, it seems to be actually useful. It gives a fast impression on the length of the site, where you are and where the interesting and boring landmarks might be. But this also demand that the content is centered, and hos enough free space on the side, which is not that uncommon these days.

I can only think about one use, skipping the image/advertising bullshit but then those pages won't put minimap up exactly for that reason.

Marking recent / uncommitted additions and deletions to your code, and linter errors / warnings, so you can jump right down to them - is super useful, especially if you just changed one little thing amongst a pack of similar little things. You can jump back and forth between two trouble points in code with a single click, and without having to remember anything.

I don't use minimaps either, but I guess their utility much depends on what kind of documents you're editing. For programming languages where code is mostly structured inside functions, the "structure" view listing the types and functions in the file seems much more useful, as well as quick-search based on name and similar features.

But if the content is, say, HTML, or LaTeX, or a Word document, then I can see a visual representation being more useful. It would be interesting to know if there's some correlation between people liking/disliking minimaps and the type of content they tend to view/edit.

I think it's more useful for diffs or when you have search/match patterns that can differentiate by color. Especially in longer/bigger files.

When I first encountered mini-maps (in Sublime Text, which I still use), I just thought it was just a gimmick that looked cool, but that's about it.

Now, I use it all the time, that's essentially a better scroll bar. In fact, the moment I saw the mini-map on the linked websites, I instantly tried to use it as a scrollbar, and was very disappointed to see that it didn't work.

I am in your camp but to my surprise I met a lot of people who love them so I can understand why editors include minimaps these days.

After the spaces vs tabs war calmed down let's see what will be the aftermath of the minimap invasion

It's useful when you search, since you can see where all the matches are distributed in the document at a glance.

A lot depends on your use-case and the kind of website you're using this on.

I would find this very useful on a site like Wikipedia where I often know the section I want to jump to before landing on the page. (e.g. I want to see the number of goals Messi has scored each season at Barcelona and I know there's always a table at the bottom of most wiki articles regarding historical stats for soccer-players). I could see from the mini-map where the tables are jump straight to it.

Like you said, the the text is too small to make out where you're going or navigating. But most often I find myself visiting sites that I've visited in the past and for those I have a good mental image of what the page already looks like. I can use the hints from a minimap to jump to the relevant section of the page.

I can see the use, but this is also kind of wild. It's live-updating if you select text, it's almost literally a separate viewport into the same content.

I'm trying to figure out the use-cases and implications of this. You can do offscreen/overflow:hidden tricks to make it work with hidden elements. But... as far as I know there's still no way without a library to convert that element to an image (for privacy reasons I suspect).

I'm sorry for kind of being all over the place, but the MDN page is pretty short and I have a lot more questions. I guess I could always apply CSS filters and distortion directly to elements, does this being treated like a background open up possibilities there? It's the first time I'm hearing about this even though it's been around for a while, and I wouldn't have suspected this would be a CSS feature even on the table. How useful is this beyond just cloning viewports (assuming I'm only targeting Firefox and don't care about Chrome)?

Could be used for a lot of cool things, like a mirror, a magnifying glass, keeping a part of the page in view even if it is outside of the screen (for editing purposes for instance), I'm sure I'm missing many other use cases. None of them fundamentally useful but cool in their own ways.

The tricky bit here is that it's not going to do things like forward events, so using this to keep the page in view won't allow selecting text for example. For some things like the mimimap here, that seems like a feature? You want it to be purely visual in that case.

For other cases, I'm not sure if I should think of that as a feature or a limitation. Definitely something to play around with though.

Yes but you could make a change at the top of the page that would have an impact at the bottom, and that would be useful to see both changes at the same time.

Every day I hit sites that literally only work in Chrome.. it’s time to fight back :)

I exclusively use firefox, have a pretty normal browsing pattern, and that almost never happens to me! Much less that once a month, maybe once every 3 months

Same

For whatever reason car manufacturers are the worst at it. Microsoft is also pretty bad (worse than Google).

Finding one once every few months sound about right but usually the bugs impacting Firefox users are major PITA. Some I’ve had over the past few years:

* myADP had some kind of bug preventing firefox authentication that lasted months.

* Elan financial redid their credit card site for fidelity visa and had a CSS bug that hid the card total balance. This lasted for about a month.

* bitbucket (work required) had this bug that prevented pages rendering in firefox. It was some kind of JS client side bug and it impacted a bunch of people in my company. After months of support request they gave us some console commands that opted into an experimental feature which resolved the issue. This one was especially frustrating as they kept telling us to just clear our cookies and delete our profiles.

* Some random IRS system I had to use for either requesting a tax transcript or validating my identity just didn’t work.

It’s actually been so frustrating my coworkers joke anytime there is a bug I’m experiencing that it must be another Firefox only bug.

Opening fastmail in Firefox crashes the whole browser. I don't know why. I stopped my subscription due to that.

I have used fastmail in Firefox daily for years, never had an issue.

Well maybe it only happens for me. Not only the page becomes non responsive the whole browser becomes non responsive.

Yeah, something is going on with GP's browser. I have Fastmail open in Firefox right now, I've never had an issue with it.

I'm not saying that to dismiss the problem, I believe GP that it's crashing; more bringing it up to say "there is something going wrong here that's not at the browser/site level that could potentially be fixable for you on your local device if you want to use Fastmail in Firefox."

vanguard's website can't edit holdings with firefox. I reported it years ago and literally nothing's been done.

I've never had a problem on their UK site [1]. It might be a different code base.

1. https://www.vanguardinvestor.co.uk/

> myADP

For years they had a terrible implementation that only worked in _old_ versions of IE. They had no incentive to change because they were the main players in that space. I loathed them because their tagline was "Anytime, anywhere" which was clearly missing an asterisk.

Normally it's something else, like a plugin. To be honest I don't notice much, frequently I assume it's some tracking that's blocked which courses the site to not function and just move on.

Between blocking tracking, with DuckDuckGos privacy plugin, and using Firefox I'd say that blocking tracking breaks WAAAAY more sites.

I recently installed adguard on my home server, and it did indeed break a few sites.

Agreed. I regularly have to do a little "disable for site" dance with uBO and Privacy Badger to even get certain websites to load. It's kind of convenient in that it gives me an inflection point where I can choose not to use that website or service at all.

The times it does happen I've found more often than not switching the user agent fixes it...

I simply refuse to use websites if they require Chrome. I find some other way to do whatever it is I'm trying.

Logging into PSN was (is?) broken for a very, very long time. It was for at least 1.5 year, but I switched after that so I couldn’t tell beyond that.

Similar for me, I’d say it’s actually more like once or twice a year. More if you count sites that are specifically about Chrome experiments, which sometimes get linked from HN.

One factor I've found is the intersection of Enhanced Tracking Protection and Multi-Account Container in Firefox. I'm seeing daily "Please stop using an ad blocker, Firefox is an ad blocker, please use Chrome, this site works best in Chrome" banners and ad walls and paywalls and other similar cranky anti-patterns.

It fascinates me how many people I know have uBlock (Origin) installed in Chrome and see nowhere near as many whiny banners and "stop running an ad blocker" nonsense as I see running Firefox without an ad blocker just ETP and MAC. The people complaining "Firefox is an ad blocker" are making it clear that they don't actually care that you are blocking ads or not, they care that you are blocking trackers and hate you for trying to maintain a semblance of privacy. Keeps saying the quiet parts out loud.

Most of the sites that do that are a "close tab and ignore" thing, some are a sequester to their own account container and feed them garbage (create a dumb account for them, turn off ETP just for them just in that container). It is still only a once-a-month case where such a site I need to get something done on is entirely broken in Firefox and I need to open it in something Chromium based, but that's still too often and getting worse.

But that "Firefox is an ad blocker, please use a less private browser" is a daily annoyance for me for sure.

It's usually super critical things that don't work, for example:

I couldn't apply to become a registered engineer in my state using Firefox because the form was in an iframe, and for some reason the iframe didn't render on FF.

The credit portal for Shell Fuels only works in Chrome and doesn't display at all in FF due to a console error. (Enough of the page renders to make you think that the page is complete but i.e. the buttons to apply or make a payment don't render).

The field for setting the date of a consultation (work) in our accounting package doesn't work in FF, and no matter how many times I write to their support team they just write back with "Firefox is not supported, please download Chrome". There was a similar attitude at a software company I worked prior, but I managed to wear them down and get Edge (modern), Firefox and Safari on the QA supported browser list with the reasoning that they are the default browsers for Windows, Linux and macOS respectively.

But come on, browser standardization is so good these days I honestly don't understand how people are making pages that only work in Chrome?

Yeah it's upsetting the sites that I run into this on, especially since there's no excuse in 2023. On more obscure pages on Vanguard's website I've run into some broken stuff that results in console errors I don't remember, but switching to Chrome made it work :/

yeah the edit holdings page is broken in FF

Speaking of that, I've had issues with Firefox (both on Mac and Linux) where some checkboxes just don't appear. I was checking in for an international flight last month on American, and could not manage to get through the checkin process until I discovered there was a checkbox I needed to tick that didn't even appear on Firefox (but which did on Chrome)..

Yes. It reminds me of when there were rumours/(facts?) about open source sabotaging of FF. I see a lot of instances where pages worked fine on FF but now they don't, and sometimes I have to fire up another browser. I really hope that's not the case.

I use FF by default.

Spoofing your user agent to a chrome one will make most of these sites work. They're just not interested in allowing you privacy.

Is this a geographically local thing? This happens very rarely to me, although I there are some (Google) sites I use regularly that do work worse on Firefox than Chrome.

I don't think I've come across that yet with Firefox.

Crazy that `element()` has been fully supported (with `-moz-`) in Firefox since 2011 while no other browsers seem to even partially support it [0]. I can think of a few powerful use cases (not just minimaps) if this had cross browser support.

Does anyone connected to the Chrome or Webkit teams have any idea why? Is there a lack of interest, is it hard to implement with good performance, does it create any tricky security issues?

[0] https://caniuse.com/css-element-function

Chromium-based browsers have -webkit-box-reflect [0], which does some of the things that element() does.

Specifically, it does reflections of elements. That's really the big use case for -moz-element IMO.

[0]: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box...

The minimap is cute, but more entertaining to me is the screensaver that kicks in after 3 minutes of leaving the tab idle.

I'm glad there's still whimsy on the web

Haha, glad that my screensaver sparks some joy. :)

This seems like something that would be heavily abused by sites that deliberately try to break basic browser functionality (like being able to right click images, or select text). If they render the whole page as a background image, you'll no longer be able to inspect, save, translate, etc. any of the content. That's just the first thing I thought of, I imagine there's all sorts of nefarious ways to screw over the reader with this function.

I agree it feels like something that could be abused, but not with the example you've given. It already only takes a tiny bit of CSS or JS to do those things you mentioned; no need to do anything complex with element canvases. So the reason that most websites don't do those things cannot be that they don't have the ability. It is because they do not, in fact, have the inclination, and that's because there is an economic punishment for having a shitty website: people will start using your competitors instead. (Caveat: this doesn't work out in areas that aren't free markets, like company intranet portals, badly run local council sites etc, which is why those kinds of sites tend to have more user-hostile stuff.) In general it is a mistake to think that we need to purposefully hamstring website operators to make the standard of websites higher: the opposite is true.

https://news.ycombinator.com/item?id=36749766

It's impressive how well the minimap works for bigger articles, I clicked around randomly and ended up at https://www.stefanjudis.com/notes/should-responsive-images-w... and the minimap feels slightly magical since it appears instantly and updates synchronously if I do things like select text.

It feels kind of disappointing that I can't interact with it to scroll around like in i.e. Sublime Text, but I imagine that's a little harder to do as the author of a website. It's still very cool to me that you can do something like this on the web, and I wonder how much work it would be to support this complex CSS feature in Chrome or Safari.

Weirdly enough I can't see it on this article but it's showing just fine on the OP. Maybe my extensions?

Site author here: there's some logic to only show the minimap when there's enough screen estate and it generally fits.

Couldn't be bothered to scrolling/dragging logic. :D

It should definitely take a responsive design into account, I think. The beauty is that most sites, on desktop at least, should be able to benefit — we all have plenty of horizontal real-estate to spare!

I've been using Firefox for the past year due to some weird incompatibility between my GPU and Chrome's video decoding. It caused dropped frames and caused my YT quality to go down.

Haven't really noticed any issues on Firefox except the lack of actually good web translator.

-moz-element looks sweet, hope it comes to other browsers.

I have been using Firefox ever since Opera bit the dust, but I have been trying, so hard, to use Vivaldi the last 3-6 months, mostly because it offers a portable version out of the box that discovers profiles just by looking at folders, i.e. super sweet for syncing.

But it's such a dog. Even after turning off mail and feeds which just sit there eating CPU like candy, I just can't make it fast, and returning to and cleaning up my Firefox made it so snappy, I'd rather stick to my 3 profiles (normal,dev, media) and do the rest via Bookmarks. And for all the sweet UI options and configurability Vivaldi has, with Tree Style Tabs and some addons for it, and hacking the UI CSS, I am sheepishly making Firefox my primary again, pretending none of that happened.

I wish it cached compiled WebGL shaders though. That is the only thing where Chrome beats it to a pulp sadly. Maybe there are config tweaks, I haven't looked into it, but out of the box reloading a page with a lot of shaders is basically instant in Chrome, even on mobile, and can take ages on FF, depending on the shaders.

I would be ok with it if we started seeing "works best with firefox" instead of chrome/edge.

What am I supposed to see here? I’m using Firefox on Linux. All I see is a normal blog article about something called a minimap, but I fail to see any such minimap. Disabling the ad blocker didn’t help. What am I missing?

Look in the upper right side. There is a mini snapshot of the page, with a blue outline showing the portion of the page that the browser can see. When you highlight text on the page, you can see it highlighted in the minimap.

There's a minimap-type scroll bar for the article to the right. There's an image in the article of how it looks.

Not working for me on macos.

otoh firefox has been really weird since the 115 update - rock solid before that, but now all kinds of weird graphic glitches and hangs.

Working fine here for me on macos, latest FF, uBlock enabled

ok, it works in private mode, so must be one of my plugins - maybe vimium.

Anyway this is definitely cool, but it's a shame you can't use it as a scrollbar.

There should be a picture of what you are supposed to see on the article[1]. It works on this page for me but some of the other articles do not show it. Seems weird because I'm not changing browsers in between.

[1] https://images.ctfassets.net/f20lfrunubsq/2FuQMHycwersLjIf4d...

What a shame that it doesn't seem to work recursively.

With Firefox and CSS background you can open a portal to another dimension

That's the same thing I immediately had to try as well :)

The argument of -moz-element() can be a child of the styled element, but it can't be a parent (makes sense).

Yes it can- that's the first thing I tried- but it will not iterate forever. The trick is to use indirect recursion:

  <div id="a"></div>
  <div id="b"></div>

  #a,
  #b {
    height: 200px;
    width: 200px;
    border: dashed;
  }
  #a {
    background: -moz-element(#b) no-repeat;
    background-size: 80%;
    border-color: green;
  }
  #b {
    background: -moz-element(#a) no-repeat;
    background-size: 80%;
    border-color: purple;
  }

This is utter madness. I love it.

And since it is positioned and looks like the Sublime Text minimap, I instinctively tried to click on it to scroll to part of the page, and was saddened that this does not work. That would be the most logical extension, that feature is really cool in general.

Same. a shame too, because scrollTo seems to be supported in every browser.

IIRC, it's pretty finicky to get it lined up exactly. Maybe less-so with coordinates rather than elements.

I always liked Lars Jung's implementation where the text is abstracted into blocks (which works on chrome) [0][1] and Rauno Freiberg's demo (uses -moz-element) where you can use it to pin sections, jump between them, and navigate the page in general [2].

[0] https://larsjung.de/pagemap/ [1] https://larsjung.de/pagemap/latest/demo/text.html [2] https://uiw.tf/minimap

Wish this was an extension. I like it. Maybe it will be my next project.

It also doesn't show up on Fennec F-Droid, even in Desktop mode, but maybe that's just because I can't get the width to be big enough for it to trigger. Looks great on Librewolf!

Of course, browsers will never be fully at parity with each-other until they're all based on Chrome, so it's no surprise there are the occasional features that are just easier to implement in one browser than the other... though this one just seems kind of wild, I'll be honest.

For what it's worth, Vivaldi has the option to generate minimaps for whatever page you're on:

https://help.vivaldi.com/android/android-appearance/page-act...

Firefox has always been the browser that supports the cool stuff. I remember messing around with auto-enabling dark mode for my websites based on the reading of the ambient light sensor of my MacBook. Of course now our OSes decide when an app or website should use dark mode.

I wish more sites exposed all of their themes as different stylesheets. I remember learning about the 'View>Page Style' option before darkmode was even a trend, and was unsurprised it was built into the browser.

I mean, the article is good but no one is talking about that incredible screensaver. I opened like 10 links from HN and when I finally opened this tab there it was waiting for me.

For me on FF 115.0.2 (64-bit), the "how it looks like" pane was stuck, and only revealed on mouse-over what is instantly visible on Safari Desktop. On reload, the same state is still visible for a short period, before it's replaced by the intended content ("Screen_Shot_2021-10-17_at_21.45.35.png" – hey, built on FF/macOS!). This is also repeatable (and somewhat ironic.)

This would be cool to have for an online code editor or similar, but otherwise I hate these types of custom navigation things on websites.

Honestly I didn't notice it until it was pointed out by the article. Banner blindness has done a number on me.

Pretty cool thing here, just wish I could use it to navigate. That's the biggest reason why I keep a minimap on in VS Code.

Is there any bookmarklet to add this to another arbitrary page? I can't seem to make it work, even with modifying the CSS code.

Here's the adoption matrix for CSS element(): https://caniuse.com/css-element-function

I’m pretty sure this remains unimplemented for security reasons. Other apis that would let you render part of the page to an image are similarly blocked. We ran into this a lot when working on WebXR.

So you can render a tree of elements into a background? I'm guessing you can't then get that raster image back out? I would love to be able to get my webpages as images.

That's slightly harder, but still possible by first rendering the HTML onto a canvas.

Example here: http://html2canvas.hertzen.com/

It would be nice if the page defined what a minimap is?

In case anyone else had trouble finding it, the minimap is only displayed if the viewport width was ≥1120px when the page was initially loaded.

Why have a "minimap" if your content itself is already the size of a minimap? I have a 27" monitor, and this site's content takes up a ~5 inch strip down the center of my browser, with 9 inches on each side full of whitespace. Over 75% of the page is whitespace. If you let the content grow to fill the browser window, you could read the whole thing without scrolling.

I have never found this style of minimap useful and I turn it off in all my apps

Would be interesting to see how this worked on infinite scroll sites.

It would be super cool if this was implemented as a firefox plugin!

Looks like that intro paragraph is going to need an update =)

element() would be amazing for things like making thumbnails of slides in a presentation app.

Wow I had never heard of element()!

Along similar lines, HyperCard had a lockScreen flag that would stop sending draw commands to the screen, and instead buffer them internally, so that the screen would update once drawing was finished. It's such a powerful abstraction that much of the hand-waving we do today to avoid redraw would just go away, including nearly all of the effort that goes into building single-page applications (SPAs), because their functionality can be simulated by simply locking the screen and fetching new HTML from the server as a dumb terminal so the loading bar doesn't animate:

https://www.hypercard.center/HyperTalkReference/lockScreen

<rant>

To a first-order approximation, all apps/libraries/frameworks are missing critical functionality like this. The most common design mistake is to provide a setter without a getter, or vice versa. Another one is for a console app to provide a config file setting, with no way to override that as a shell argument to the executable. There are dozens, if not hundreds of these common anti-patterns, so statistically the odds of any piece of software having any of one of them can be considered to be 100%.

So in this case, most "modern" browsers provide a way to render the screen image from an HTML description, but no way to retrieve that image. The canvas element is a band-aid over these original design mistakes. A proper DOM implementation would look like iframes (windows) all the way down, where the contents could be specified from url, attributes, html, vectors/buffers or code. Each would have its own sandbox attributes defaulting to full isolation, so could be treated as its own browser, then their data dependencies could be piped together, a bit like unix executables. Mashups/portals/aggregators would be so easy to build that kids would be doing it.

It's a serious enough problem that honestly I don't really think in terms of HTML/CSS/Javascript anymore. I work in tables mentally, then let the designers transpile that description to CSS. And the real work of building the rich interactions available in desktop programming simply can't be done without massive yak shaving. This was also a problem in OpenGL before better access to render buffers and shaders went mainstream.

IMHO this all started when Netscape became a private enterprise from its Mosaic roots, then was exacerbated when Microsoft monopolized the browser market for so many years, then cemented when Firefox and Chrome endorsed the status quo. The only way out now would probably be to formally build a programmer's browser from scratch with hard security constraints around the core element's external communication, then emulate the current HTML/CSS/Javascript experience we're used to. Sort of like Qt, Postscript, etc. Which of course will never happen, so it's hard to see the positive in discussing these foundational decisions when there's nothing any of us can do to fix them in any reasonable amount of time/money/effort.

Reply on news.ycombinator.com