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 :-)
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]
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.
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. :)
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):
First of all, I prefer to have less on my screen, not more. I believe that the less visual clutter you have on the screen the better you feel and the more productive you are.
Second, activating tagbar adds a bar on the right. That means my code window will shrink. But my code window is exactly the size I like it.
Third, I would have to trust those many thousands of lines of code by "someone from the internet".
> First of all, I prefer to have less on my screen, not more. I believe that the less visual clutter you have on the screen the better you feel and the more productive you are.
Completely agree on this one. I'd probably prefer it if you can toggle between tagbar's view and your code (there may or may not be a way to do that, I didn't look at the docs).
> Third, I would have to trust those many thousands of lines of code by "someone from the internet".
This is true, but then again, you're already trusting vim, Linux and millions of lines of code all around you ;) It all comes down to trade-offs at the end of the day.
I’m using :cex/:cadde + conceal instead, along with grep or hand-written regex-based filter. This way I can even name ‘sections’ and see commented out functions. Non-custom ctags is too restrictive in that regard, and writing custom one is a little trickier.
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.
It would function great as a scrollbar for long-form documentation on desktop. The built-in browser scrollbar only conveys your current position in the document. A minimap lets you, for example, quickly flick directly to the next section header even if it's currently off-screen. It would also help reduce cognitive load if you're trying to alternate back and forth between two sections of the same document.
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.
Check out the 'styles' section of the usage notes. Tags (selectors?) specified in the configuration have an associated bounding box that will get drawn on the minimap in the configured color.
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.
I believe you do have to be the author to add "Show HN". Show HN indicates that the maker is present in the thread. If we lose this distinction, Show HN becomes quite meaningless as a prefix.
I was wondering if something like this existed the other day, and I was excited to see this / share it, but I didn't want to put people under the false impression that I'd written this library.
On iPhone there was nothing visible on the main page. The boxes demo didn’t scroll enough for a worthwhile demo. The text demo however looked pretty good. Somewhat sublime-like as observed in other comments.
If the window is narrow, even on the desktop, the mini pagemap disappears. There is indeed a @media query in the css turning off the aside.right element if the page width is less than 1000 px.
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]
1: https://github.com/lrsjng/pagemap/blob/master/src/pagemap.js...