Marginotes on HackerShow

Dev tools

javascript library

SHOW HN2016

Marginotes, quick and elegant side notes for your paragraphs

Shown by Stately on Mar 9, 2016. Click the card to turn it over.

111points

29comments

#327of 2,264 in 2016

Top 15%of 2016 by points

How HN took it

DebatedReal support and real criticism

5 positive, 7 neutral or asking, 1 mixed, 5 critical, out of 18 comments about the project. Thread score +0.06.

Execution: 3 for, 4 againstIdea: 1 for, 0 againstDesign: 1 for, 0 against

Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.

positive neutral or mixed critical about another commenter or something else the maker

Nice, elegant margin note effect
From 3 comments
- Pretty. Thanks.
  anacleto on HN
- 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.
  kozak on HN
- 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…
  joeclark77 on HN
Useful for margin notes instead of footnotes
From 1 comment
- 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…
  joeclark77 on HN

Does not work on touch devices without hover
From 1 comment
- Mouse-over actions are nice on desktop. But what happens if I use a touch device?
  tauchunfall on HN
Notes invisible when JavaScript is disabled
From 2 comments
- What happens if I have JavaScript disabled (and I do have)?
  gkya on HN
- You don't see anything.
  onion2k on HN
Uses jQuery plugin conventions incorrectly or unnecessarily
From 3 comments
- 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…
  lolc on HN
- http://youmightnotneedjquery.com/
  gberger on HN
- 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…
  jakejake on HN
Non-standard HTML attributes are invalid
From 1 comment
- 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…
  DenisAyumu on HN

Remove jQuery dependency
From 2 comments
- 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…
  mshenfield on HN
- 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.
  kozak on HN
Print stylesheet fallback
From 1 comment
- 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.
  kozak on HN
Tap-to-show fallback for touch devices
From 1 comment
- Tap to show, tap to hide? Not quite the same, but that's how I'd do the fallback for mouse hover effects.
  Mahn on HN
Fallback footnotes for no-JS users
From 2 comments
- 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…
  gkya on HN
- Why not just: ``` <a href="#fn-gcc" class="has-footnote">GCC[1]</a> … <p id="fn-gcc" class="marginnote"><label>1. </label>The GNU Compiler Collection</p> ``` It's compatible with…
  geocar on HN

What happens with JavaScript disabled
From 1 comment
- What happens if I have JavaScript disabled (and I do have)?
  gkya on HN
How to handle touch devices
From 1 comment
- Mouse-over actions are nice on desktop. But what happens if I use a touch device?
  tauchunfall on HN

Pure CSS hover-based notes
From 1 comment
- 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…
  Chris_Newton on HN
Medium marginal notes feature
From 1 comment
- 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…
  joeclark77 on HN
Standard footnotes via POSH/HTML idiom
From 1 comment
- Why not just: ``` <a href="#fn-gcc" class="has-footnote">GCC[1]</a> … <p id="fn-gcc" class="marginnote"><label>1. </label>The GNU Compiler Collection</p> ``` It's compatible with…
  geocar on HN