

Highlighter.js - 720kb
http://720kb.github.io/highlighter.js/

======
S4M
I don't get why this requires a special purpose library. Why not create a css
class _highlighted_ where the borders of an elements would be in fluorescent
green and modify the class of the elements of the DOM one wants to highlight
with jquery?

~~~
davej
I agree, most of the code in the library is for element navigation. Why not
open-source that and let people define their own CSS props.

By the way, I believe it uses the `outline` CSS property as opposed to
`border` (border changes layout, outline doesn't).

~~~
720kb
Yes it's outline, just because it is probably the less used css rule available
for the scope. Probably the alternative could be box-shadow. Having to modify
borders will probably result in breaking third parties CSS etc.. more troubles
guess.

The code is already open-source, feel free to open issues, fork and PR also if
you want to add new features, the door is open wide!

~~~
gravity13
Yeah, you also have to account for box sizing by adding borders. What I've
done for this in the past is use a css &:after pseudo-element and make it
absolutely positioned, and set width and height at 100% and position it at
left: 0 and top: 0. You can do things like give it a fill with opacity too, to
highlight not with just outline but color overlay too.

.outlined:after { content: ""; position: absolute; top: 0; width: 0; height:
100%; width: 100%; background-color: green; opacity: 0.3; }

.outlined { position: relative; } // this part my be a poor assumption

~~~
720kb
Hi, yes this is another alternative, probably the best one but it's hard
actually to find the real best one because in the end everyone use different
styles, different css frameworks, different use cases, in many cases it may
break something in many others not, you know :)

Anyway appreciated a lot your example and your tips, let's just wait for some
feedback from people who use it and make decisions more clear.

Thank you really :)

------
err4nt
Neat little tool, and love the size constraint!

I made a little JS bookmarklet a while ago that reveals script, style, and
meta tags, and tries to display which tags are used to build the layout:
[http://www.youtube.com/watch?v=wp2d24t2POI](http://www.youtube.com/watch?v=wp2d24t2POI)

Are there any plans in the future to make your tool so the highlight follows
that I tap on mobile? Keep up the great work!

~~~
720kb
Hi, thank you a lot for supporting, the aim, actually, is to stay lightweight,
but for sure you can bind it for your own pourposes and needs, like tap and
select, or click and select, why not :)

This project was meant to easily surf the nodes and maybe highlight them, but
it's still at early stage and any help is much appreciated!

Thanks for sharing the video, very interesting :)

------
leeoniya
zooming in on Android 4.4.4 browser prevents scrolling for me

~~~
720kb
Hi, thanks for reporting the issue, it's still at early stage we need to
improve it.

Here you can check what's wrong and post new issues
[https://github.com/720kb/highlighter.js/issues](https://github.com/720kb/highlighter.js/issues)

Any help is appreciated!

------
slaction
People were doing this 15 years ago, before all the hipster web designers
picked up javascript, opened terminal and called themselves programmers.

I"m sure the old JS programmers moved on to a real programming language, but
they put you new guys to complete shame, and they didn't need 18 dependencies
and a dependency manager to get it done.

jQuery was a great invention for web development, but everything since then
has been total crap. Angular, React, Node, all of it's crap. The only people
who like it are those who aren't smart enough to be real programmers.

~~~
volaski
Whatever you say old man

