Show HN: Marginotes, quick and elegant side notes for your paragraphs

https://github.com/fdansv/marginotes

by Stately • 10 years ago

111 29 10 years ago

github.com

gberger• 10 years ago

http://youmightnotneedjquery.com/

plugnburn• 10 years ago

I second this. JQuery must die.

have_faith• 10 years ago

What do you consider a reasonable reason to build something as a jQuery plugin as opposed to pure-js? or do you believe jQuery plugins are redundant by default?

Just interested.

jakejake• 10 years ago

I personally find it odd to create every component as a jquery plugin. To me, it makes more sense to write a plugin only when you're extending jquery core functionality itself in some way.

As far as "extending" goes though, it's not always clear. Is a date picker extending jquery's core? I personally think not, but there has evolved an expectation that every web component must be initialized like so:

$('#container').doSomething();

So I suppose a lot of people do it that way just to have a familiar look to their API, or even just to show up in listing as a jquery plugin.

kozak• 10 years ago

Very nice. It would be even better if it had some CSS media query-based fallbacks for the case when the page is being printed. And yes, jQuery should not be a requirement.

lolc• 10 years ago

Looks nice!

I was a little surprised at the last line in your code:

window.jQuery.prototype.marginotes = window.$.prototype.marginotes = marginotes

Last I checked (one minute ago) jQuery and $ refer to the same object. jQuery === $ unless somebody is using $ to refer to something else in which case thanks you just clobbered $'s prototype. You should follow the jQuery conventions https://learn.jquery.com/plugins/basic-plugin-creation/

gkya5• 10 years ago

What happens if I have JavaScript disabled (and I do have)?

onion2k2• 10 years ago

You don't see anything.

gkya5• 10 years ago

Which is bad if them notes are not ornaments only. So there should be some fallback. I guess a good approach would be to collect the content from some p.marginnote elements which would be hidden if JS is present and left intact if not. So, like

  <a href='#' mnref='gcc'>GCC</a>
  ...
  <p class='marginnote' mnname='gcc'>The GNU Compiler Collection</p>

With JS, they'd become margin notes, whithout it, they'd render as plain footnotes.

dspillett3• 10 years ago

and I do have

So you can tell us: what happens if you have Javascript turned off?

I have sympathy for the "what happens if I'm using a screen reader or other accessibility device" question, not excluding those who need to use assertive technologies where possible is important. geocar's post below suggests what might be a better implementation in that regard, which will support your use case too, but some advanced screen readers might try run the script (to access generated content like Google does for indexing) and then not read the text because said code has hidden it via DOM manipulation, meaning the technique might not work in all cases.

But disabling all javascript and expecting the world to support your preference in everything we produce (you can at least read be core content in this case) feels a bit entitled IMO, along the lines of people/companies (who I deal with in my day job) who use legacy browsers and are upset when that means they can't have shiny new features in the browser based applications that they use (or want to use).

I understand the desire to block all the iffy JS (adverts, particularly adverts that eat CPU cycles and therefore my battery when mobile, tracking, and so on) and I understand that running noscript or similar plugins is too cumbersome in many opinions, but unless you are paying for the content in some way you can't really expect to demand to control how it is delivered to you.

A thought for reducing tracking and such without blocking code used for page functionality: I'd like to see browsers block 3rd party code as an option (as some do for 3rd party cookies), with a whitelist to enable CDNs (possibly with the major CDNs on the whitelist by default). That would still allow iffy code if it is served from the same site (by design or because it has been hacked) so isn't perfect, but it might be a good compromise.

gkya5• 10 years ago

I disable javascript for two reasons: I do not want to download megabytes of useless scripts everyday dozens of times, and I do not want to allow strangers run arbitrary Turing-complete code on my computer, even on a restricted platform like the browser. Thus, I use xombrero + very strict whitelisting. I do not want the world to conform to me, I just conform selectively. I know the consequences of being a NoJS surfer, I just live with it, and don't complain. I even have chromium installed for edge cases.

And here I try to make some criticism of the posted work, and constructively. I think coding defensively for the noscript case is a good, important practise, even if the chosen remedy is to show up a "please enable JS" message. And then there's the case of printing the page, the read-it-later things, archival, etc... I can't run JS on paper, or on PDFs, right? But the WWW is ephemeral, and if something is important, I have to archive. And people have disablities, how would margin notes be readable with say 5x zoom? How will a disabled person get to read the popup margin note if he can't even move the mouse to hover the anchor tag? One may well say that disabled people are not worthy of seeing their content, and however disgusting may it sound they've the right to say so, but the OP may be open to such suggestions for inclusivity and improvement, and I suggest.

I think the JS CDNs are the most stupid things on the world. It is a virus vector. Hack one CDN, and you'll get to run your code on maybe millions of websites. And who decides which CDNs are major, and/or better or more secure?

anacleto• 10 years ago

Pretty. Thanks.

tauchunfall• 10 years ago

Mouse-over actions are nice on desktop. But what happens if I use a touch device?

Mahn• 10 years ago

Tap to show, tap to hide? Not quite the same, but that's how I'd do the fallback for mouse hover effects.

Chris_Newton• 10 years ago

Notes on web pages are tricky because there are so many edge cases, and they tend to expose the limitations of our current HTML+CSS model.

For example, we can achieve an effect similar to the one shown here using just CSS (no JS) if we’re able to use position:relative on the containing paragraph without breaking anything else in the styling:

HTML:

    <p class="note-container">This is some text with a <span class="note" desc="Style me!">marginal note</span>. Lorem ipsum dolor sit amet...</p>

CSS:

    .note-container {
      position: relative;
      width: 400px;
    }
    
    .note {
      text-decoration: underline;
    }
    
    .note:hover::after {
      content: attr(desc);
      position: absolute;
      top: 0;
      left: 440px;
      width: 150px;
      height: 100%;
      border-left: 1px solid black;
      padding-left: 9px;
    }

I put a quick demo of this one here:

https://jsfiddle.net/2ejk2who/

However, what happens if we need to work with touch-only devices, where hover effects aren’t available? Two options would be to show the notes all the time, or to embed a hidden checkbox and make the anchor text its label. In the latter case, tapping on the text could then toggle whether the marginal note appears if we used something based on :checked instead of :hover.

But now what if more than one note is set to visible at once? We can’t combine the position:absolute technique to get neat alignment at the top of the paragraph with using floats so multiple notes automatically fall under one another. I don’t have a good pure-CSS answer for this one.

In any case, on a smaller screen we might not want to show marginal notes alongside the main text anyway. It would be helpful if there were a way to have the notes drop underneath the paragraph and stack up, but again, we can’t combine the kind of absolute positioning that would place a note there with something that extends the paragraph’s box so later content moves down after any visible notes.

Perhaps one day we’ll have more flexible options for generated content and CSS positioning that will let us do these things, but for now the only ways I know to achieve some of these effects still rely on JS.

joeclark77• 10 years ago

This is excellent. I've been thinking about rolling my own blog software since Medium took away their marginal note feature (IIRC, you can now make notes but they're for yourself only, readers can't see them). Since reading Ed Tufte's books, I'm convinced that margin notes are infinitely better than footnotes or (egad) endnotes for sharing little "extras" with your readers.

mshenfield2• 10 years ago

I made a little experiment, and converted this to a vanilla Javascript library. Relevant to some of the questions below about whether this should use jQuery or not.

Edit: There were two gotchas beyond browser compatibility. jQuery provides a consistent interface to set numeric style values - in vanilla Javascript you have to remember to turn these numbers into strings suffixed with "px". And I hacked together the code that stops fadein and fadeout from stepping on each other.

Changes: https://github.com/fdansv/marginotes/pull/2 Working Example: http://mshenfield.github.io/fdansv.github.io/

cornstalks• 10 years ago

Looks like you've got a bug when the mouse passes over a link that has no sidenote. To reproduce:

  1. Hover over a link with a sidenote (i.e. "Bill Gates").
  2. Hover over a link without a sidenote (i.e. "unrecognised").
  3. Move your mouse off of the link.

During step 3 the previous sidenote will briefly appear.

(I'm running Chrome 48.0.2564.116 on OS X 10.11.3 if that matters)

mshenfield2• 10 years ago

Nice catch! My fadeout function mistakenly set the opacity to 1 to start off. Fixed.

DenisAyumu• 10 years ago

Last time I checked you couldn't add HTML properties that don't exist. It's not valid HTML code. The exception are "data-*" properties. So the HTML markup should be <span data-desc="whatever">whatever</span>.

Show HN: Marginotes, quick and elegant side notes for your paragraphs

Related Stories