Pretty clever. I was trying to figure out if there was some DOM API to paint HTML to canvas that I did not know about.... I had to stare at it a few times to realize what was going on :-)<p>The code runs a DOM query to find the elements configured through the keys of the `styles` object on the parameters/configuration, then for each of those selectors, calculates a rect relative to the size of the canvas, and paints a colored rectangle for each of those elems (using the color coming form the values on styles). [1]<p>1: <a href="https://github.com/lrsjng/pagemap/blob/master/src/pagemap.js#L93-L100" rel="nofollow">https://github.com/lrsjng/pagemap/blob/master/src/pagemap.js...</a>
This is really nice work. Tried it out on a blog[1], works really well with content-heavy technical docs. Had to add some custom stylings for new blocks, but that was also pretty easy to do.<p>1: <a href="https://peteretelej.github.io/setup-ubuntu-vps" rel="nofollow">https://peteretelej.github.io/setup-ubuntu-vps</a>
I am currently trying out this Chrome extension [0] which brings a mini map to each website and my first impression is rather positive. The performance impact might be a little too much on my older laptop but on the desktop it seems fine (for now). I don't know if this is any useful but it just looks nice. :)<p>[0] <a href="https://github.com/chintown/monocle" rel="nofollow">https://github.com/chintown/monocle</a>
Funny, the demo on that page doesn't work for me (mobile, FF), but the other two examples do (at least, I assume they're working correctly - a minimap with a grey band for the viewer):<p><a href="https://larsjung.de/pagemap/latest/demo/boxes.html" rel="nofollow">https://larsjung.de/pagemap/latest/demo/boxes.html</a><p><a href="https://larsjung.de/pagemap/latest/demo/text.html" rel="nofollow">https://larsjung.de/pagemap/latest/demo/text.html</a>
That reminds me that I sometimes like to switch to a "Show me only function names" view in VIM.<p>This kinda solves it:<p><pre><code> :%g/^{/normal! zf%
</code></pre>
To make the info lines dimmer, this works:<p><pre><code> :hi Folded ctermfg=239
:hi Folded ctermbg=233
</code></pre>
Only problem is that comments outside of functions are still displayed.
This is great. Minimaps are so useful when editing code I'm amazed nobody's thought to do them for web. For viewing documentation in particular this would be amazing.
This is really cool and looks/feels a lot like the Sublime Text minimap, which I use a lot. I have a feeling it might be abused a lot though, like scroll wheel hijacking.
Nice achievement! But is it just an approximation of the content? It does not appear to be a scaled-down version of the web page - so I wonder how useful it really is. I wish there was a more substantial demo page with more graphical artefacts.
the only thing this needs is a way to display text on the mini-map.. this is so we can manually add titles so we know what we might be scrolling towards. small tiny text. this functionality seems to be missing from most mini-maps.
Great little library, can the title be renamed to include "Show HN: "?<p>Not sure if you have to be the author of the <i>thing</i>, to use the "Show HN: " title tag... but it would be helpful to people browsing...
If this is useful, then it's something the browser could render, instead of the page itself. We could add it to desktop UI toolkits like Gtk/Qt.