node.js ko
markover
markover
by Node Ice
Hyper-fast commenting + real time contextual comment feed. Comment faster; Never wait until the bottom of the article again. Select and comment as you go. An epic bookmarklet feed auto-sorts comments based on the viewport.
As you scroll and read, comments dynamically reorder to display relevant conversation surrounding what you’re reading.
Judging Instructions
- markover.nodejitsu.com
- Register
- Drag bookmarklet to your bookmarks bar
- Visit any news site, such as: NY Times, or Wordpress or Dive into HTML5
- Click the bookmarklet to load the markover feed
- Select text to make comments
- As you scroll through the page, see comments for the section of the article you are viewing
— use in Chrome ** :)
new comments appear in real time!
hover over the comments to see what they highlighted
Or, check out our demo at markover.nodejitsu.com/demo
Who
kfalter — NYC
EndangeredMassa — Chicago, IL
xonev — Chicago, IL
calebcornman — Chicago, IL
How
nodejs socketio mongodb nodejitsu
Votes
Your Vote
Voting is now closed.
Other Votes
(146)
geradjudge
b00giZmjudgeWhile I think that the concept is really great, I’m not sure if “social commenting” is something I would really enjoy. It sure is interesting to browse through all comments on a site, but if this thing went viral, it was all about spamming and trolling ;)
BUT I’d really like to use it as my own personal website-notebook. Or as some kind of collaboration tool I could use with my team (real-time) website annotations. So please consider offering private rooms. Those would make this app really awesome!
The minimalistic and unobtrusive design of the sidebar is decent, but the content are could need a bit more style and polish. I’d also like the website to keep a history of the sites I’ve already commented as my personal backlog. And, of course, integrate services like Twitter, Instapaper, Zootool, Readability etc.
markover is not the most polished, but sure it is one of the most promising apps this year :)
visnupjudgeutility – for the most part, I’m pretty sure I’d have this same type of general comment discussion somewhere else, maybe twitter or hackernews. for something in particular like hackernews or reddit or other link-sharing site, I could see this widget being a good addition (much like stumbleupon’s toolbar).
design – quite visually pretty. there were some holes when I had a failed login, I ended up on a stubby page, but otherwise looks nice. also, odd that the bookmarklet would stay named “drag this up” instead of being named “markover”.
innovation – I remember these types of sites back in 2000 actually. I don’t think any of them made it very far.
completeness – I couldn’t actually get any of my comments to show up (on the nytimes). the right side bar thing showed up, but when I opened it I saw no comments and when I tried commenting it didn’t work. this was in my versions of both chrome and safari.
erniehacksjudgeInteresting concept and could be quite useful. While the overall skin was slick and nuanced, I experienced some bugs in Mac/Chrome that leave room for improvement – my initial login disappeared and I didn’t see an obvious way to recover it; the sidebar loads in a closed state and is so visually subtle that I didn’t see it the first time I loaded it; the comment links are anchored in a manner that the highlighted text appears above the top page fold; the icon on the “drag this bookmarklet” link isn’t part of the draggable area; the inline comment form only seems to submit on click, not on an Enter keystroke; and the removal of comments related to off-screen content sometimes hides interesting comments and makes pages seem relatively uncommented on initial load.
That said, this is an ambitious project taking a strong shot at providing a useful app. The visual skin is sophisticated and the interactions are potentially useful. I’d love to see you debug the app and continue iterating this to completion!
3rd-Eden
contestantThe look and feel of the application reminds of Google+ I like minimal layouts big fat 5 stars for that.
I have seen a couple of applications that did the same as this, but it’s well executed. But personally wonder how long it will take until the
funfactor disappears from tagging and commenting on websites.The application feels complete, still some rough edges but nothing that cannot be fixed after the competition.
Btw, DEAR GOD how did you get that amount of public votes ;D
andrewfchenjudgeI get it! good concept, good use case. simple. I dig it!
maraksquiresjudgeVery good showing.
I’ve been interested in the idea of doing opt-in only dark-net collaborative commenting on web pages for awhile. I’ve even built a few prototypes.
This sort of tool allows users to start a discussion about any web page without having to rely on the sites internal commenting system, or the fear of moderation. Site owners often censor their sites for a variety reasons, tools like Markover help bring back the transparency we desperately need to the web.
I would have gone all 5s, but the tool has a few issues. In general, getting a bookmarklet to inject cross-browser and cross-site is an extremely difficult technical task. Writing defensive code to deal with all site and browser quirks is definitely out of the scope of a 48 project, so I didn’t want to penalize you too much for this.
I hope to see this project continued and improved!
therazorbladejudgeFirst, well done! Having to navigate the content through the comments is weird, especially when there are a lot of comments. When you open the demo comments there is just a long list of ‘see remarks on this section’ which is not very helpful.
zachstronaut
contestantSadly, this just is not working for me. I will explain what is broken. I think the idea is kind of neat… social tagging of sites. The problem is getting over the hump of there being so many sites with no tags by any users yet. You will need some sort of way to find things that have been tagged… a list of tagged sites or such.
First, commenting just does not work. Not even general commenting. My comments will not save. I tried Chrome 13 and Safari 5.1 both. Mac, Snow Leopard.
I was bummed that I had to create a user to try it out. Also, I provided a username and an email to your signup form, but your login form doesn’t specify that it wants me to use my email to login. This was confusing.
I’d like to be able to know if a page has any comments before opening the drawer. Also, it would be cool to put little indicators with # of comments inline in the page wherever there are comments on particular parts of the page. The list in the drawer with hovering was awkward.
There are z-index issues with the drawer. See: nodeknockout.com and also the new black bar at the top of google.
Interesting concept, but seems to be broken at the moment.
- contestant
Yep. it’s definitely rough around the edges. We have identified the z-index issue for sure, and of course we can’t drop the bomb and make it widespread overnight with tons of comments populated in the tray. I think that’s part of the process of moving forward —– listening to users, iterating, coming out with something better, actually launching beyond a 48hour coding competition. All of that :) and I think that’s the cool part about the commenting on the judging, that we are actually gaining a ton of feedback if nothing else. Apologies if commenting did not work for you especially on a page like this with nodeknockout.com, but I think we should have been more clear that this is to be used on blogs like wordpress blogs or articles like NYTimes articles, not on things like NKO that has constantly changing content that is always shifting around. A little shifting in an article online is fine, we tried to accomodate that. In any case, at least we know we have to be more clear about it’s use opportunities as well as move forward to incorporate all this awesome feedback.
Thanks so much!
- contestant
And ps. the stars look so lonely up there :( haha.
- contestant
And ps. the stars look so lonely up there :( haha.
zachstronaut
contestantawww ;(
- contestant
If nothing else, I’d say Node Knockout is GREAT for doing user testing and identifying problems. We appreciate the feedback and giving it a try. I find it curious that you weren’t able to create comments in any browser on any page. Is it possible that you were commenting but it got lost in the existing comments (another issue we’ve recognized after getting some people to use it)? Chrome is known to work (Firefox had been working but we forgot to test it soon enough before submitting).
- contestant
Ahhh HA! My comments are buried inside of a drawer I have to click instead of being at the top of the chat log! But they are being saved. Well, i’ll give you one more completeness then, but this is a pretty big design flaw, IMHO.
- contestant
Acknowledged. Again, thanks for the feedback and for giving it a try.
oddacon
contestantGood idea, works pretty well, and looks good also. You should give the option to see the comments in context also.
- contestant
Frank haha all the ppl are bringing the heat now! Thanks for the feedback .. we definitely have heard that point a lot.
mustardamus
contestant- contestant
Thanks for all the positive points!!
davidmoffitt
contestantI wish the app design was as pretty as the home page, which is gorgeous (bookmarklet feels a tad cumbersome usability wise too). That aside, this is a very neat take on something like Google Plus but simplified and MUCH more real-time feeling. I’d like to see this be adopted widely, it would be useful :)
- contestant
Thanks for the feedback. We definitely have a lot of work to do in order to have wide adoption. But with all the nko feedback, we have a lot of good ideas to help make that happen.
Thanks again!
martinciu
contestant- contestant
Thanks for the stars and encouragement. we need it now that the crowd is brining the fire with their lonely star ratings :)
lovehasnologic
contestantIt’s billed as making commenting faster. In reality it made commenting MUCH slower for me, and having a popout with the full comments seemed clunky as well and made me just want to ignore it. Especially as I discovered there were multi-levels of comments. I had no way to tell how the levels related to the contents of the article.
It is definitely an interesting rethinking of the commenting process. As many sites begin removing comments completely and pushing the conversation to social networks, it’s interesting to wonder and experiment with the idea of the comment process to see if that may help solve some of the problems that plague them. However, I don’t think this is it as it’s just a new skin obscuring the relation the comments have to the content.
- contestant
Thanks for your feedback. Really awesome observation about what commenting’s role is in online content. Tough question to as to how to actually be innovative in the commenting realm, versus just skinning the process.
Thanks for the UX feedback as well… Good to hear that the feed seems clunky. We’ll have to take a look and explore more options and test again :) The levels observation is important too, and we definitely have improvement to do on the algorithm as a whole! Thanks aagain!
paularmstrong
contestantAren’t comments on their way out? Can’t we just pull Twitter comments on the current page? Does anyone even read comments anymore? I have too many questions for the utility to really feel like this is a useful service.
The UI/UX wasn’t compelling me to use it. Why aren’t comments on objects noted inline with text instead of on the right? If I’m “marking over” some text, I kind of expect it well… marked over :-D
- contestant
I don’t know if people read the comments, but somehow articles on the NYTimes have pretty rich conversation with hundreds of comments and micro-conversations around articles within hours of being published. So we thought we’d create something that could allow for this. It would be awesome to pull twitter comments about the article, however, I think the key here is that we just wanted to make something that would grow the metadata, create a new way to comment without having to scroll to the bottom and comment in a box. In the end, the UX could definitely be improved by having websites just incorporate a JS snippet instead of haviing the user use a bookmarklet. And finally, marking over failed — miserably — in the past. Lots of site tried “inline” commentary, but it ended up being like sticky notes plastering a site page. So i guess that’s why we didn’t go down that route, but honestly, thank you for your comments and feedback nonetheless. You leave us with a lot to think about and consider — especially with that 1 star ;)
devin60070
contestantDefinitely well made. Would work well as a grease monkey script so the bookmarklet didn’t have to be clicked on every page refresh. The comments integrate nicely into the page and the registration is very easy and straightforward. I’m not sure how great the different comments on the different parts of the page are, as people may have comments about the article in general. Overall awesome bookmarklet
- contestant
Going to look into the grease monkey option. We need to make the general comment box on the top of the feed more clear because essentially you always have the comment box in view even if you don’t want to comment on a specific aspect, but we didn’t make it prominent enough I think. Glad you liked the registration. We tried to make everything clean so that no one would feel like the feed was cumbersome, but in doing so, I think we lost some necessary UX cues. Thanks for the feedback anyway!
stagas
contestant- contestant
Thanks for the positive points :P
Techwraith
contestantAwesome job on this one. I’ve seen a few commenting systems like this one before, but making it with node and with realtime takes it to the next level.
- contestant
Thanks for your encouragement! We have a lot of work to do, and ensuring we stay differentiated beyond just real time is going to be important.
seanami
contestantMaybe I should have been trying this with other people? The initial experience was pretty confusing/underwhelming. I didn’t figure out the highlighting thing until I read the entry description and then came back. It also seems kind of lame to drop a “reserve a username” form on a node knockout entry’s homepage with nothing else. You guys need more content or a better way to demo this tool to the uninitiated!
- contestant
In the future, we’ll try to be less lame and add more information on the home page :) Definitely appreciate the feedback. I think in general, unless it’s being used naturally, to comment on something that you really have an opinion about — in addition to not having a thriving comment community already on it — probably is underwhelming. Thanks for the feedback on all that stuff. Definitely good to hear ppl’s thoughts about the experience and the learning curve (aka highlighting to comment).
Thanks!
hij1nxjudgeUX needs polish, a lot of polish. That said, it’s worth polishing. This screams real-time and social; a perfect fit for nodejs. I’d love to see the team continue work on this and take it to the next level. I could see this become a widely successful web application for everyday use.
- contestant
We agree! UX is craving polish. esp with the issue of other site’s style sheets trumping our css (and in line styling on the feed is just not scalable in our opinion). Gratzi for the votes and thank you for the feedback. Doing the competition has given us some great insight especially regarding cues needed for the UX.
tornak47
contestantAwesome idea! I can definitely see a lot of uses for this – I’ve been looking for something similar for a while to take/share notes on certain websites – Could be worth looking at allowing ‘rooms’ in case users want restrict their comments to a certain group of people.
- contestant
Rooms is an awesome idea. Thanks so much. would be great to be able to be live commenting on aspects of content with a closed group.
Thanks for the feedback. We really appreciate it.
mbleigh
contestantIt’s a nifty idea, but one I’ve seen before (e.g. Scrible, others). Not something I’d use much personally but I like the simple black toolbar on the right and the clean aesthetic.
- contestant
Yeah we agree — we just wanted to created something more real time. A lot of the differentiated functionality didn’t reach it into the initial release. However, love that you like the simplicity, because that was a min focus. :) Thanks so much for the feedback.
nddrylliogjudgeHmm interesting concept but the user experience is just too much hassle. The design was okay (I liked the homepage but not the actual product design)
- contestant
Thanks so much for your feedback. The bookmarklet definitely could be streamlined into a browser plugin or simply a plugin for the content producers' sites. That takes the burden off the user in the latter case. Would love to hear more about what specifically you thought could be better about the product design.
- nddrylliogjudge
In general, a lack of feedback when selecting stuff – I was really unsure about what was going to happen, if it worked correctly, etc. Also, lack of visual indication that a particular part of the content was annotated by others. I saw the list of annotations on the right, but I couldn’t tell exactly which part of the page they referred to.
tl;dr MOAR VISUAL FEEDBACK KTHX :)
- contestant
Awesome. Really helps a lot :) Thank you.
aaronheckmannjudgeVery handy, works well. Nice idea.
- contestant
Thanks for the feedback!
mahemoffjudgeUseful as an extension and with an indication of existing comments (maybe a heatmap?). I found it didn’t work for me on The Economist for some reason.
- contestant
Right up my alley :) Visualization of high activity/high areas of commentary was on our list of things that didn’t make it into the release for this competition. However, definitely taking these things into consideration. Thanks so much for your feedback.
- contestant
Right up my alley :) Visualization of high activity/high areas of commentary was on our list of things that didn’t make it into the release for this competition. However, definitely taking these things into consideration. Thanks so much for your feedback.
jeffreyjudgeThis is a great idea and a great product. It’s a bit super-usery in terms of getting it to make sense or be useful to the “average” internet user, but overall this is fantastic. The design is great, it’s simple to use, simple to understand, and adds value. Great job.
- contestant
Thanks! Definitely is a bit super-usery. We want to get to the point of having it as a plugin for content creators instead. We want to add a few cues that will enhance the design, but keeping it simple is the key. The data set from contextual comments is where the real value is.
swoodiejudgelove the idea. badass design of the site. good marketing copy and website to back it up.
could not get it to work as expected tho :( – the comments didn’t seem to submit anywhere. could not see them after i entered them. there was no ui telling me what happened to them, if anything else was going on, other comments, etc. so while it would be a useful tool, it wasn’t fun for me. and wasn’t a complete experience.
but in general, annotation tools are both interesting and hard to do right, so i like that ya’ll tried it.
- contestant
Thanks for the feedback! So sorry it didn’t work as expected :( We definitely have gotten feedback that the default should show that the comment appeared in the tray. It is accessed from the arrow on black bar to the right in the browser. We tried to make it very unobtrusive, but in doing so, we should have added some sort of clue for the first time it’s used. Or an alert if the website you attempt to use it on cannot handle it.
Thanks so much for your comments!
- swoodiejudge
Sure. And thanks for your reply. Will try it again before the week is out for sure.
csanzjudgebeing able to reference small snippets of text and comment on it is genius. I can see where this is going and I love it. The real-time factor is also very cool. Good job!
- contestant
Thank you!!! We want to be able to expand this a bit as well, but for now, the data set acquired from more contextual comments is huge. Additionally with the real time aspect and the algorithm for separating comments as you scroll, we hope to build micro-conversations that are real time around the content being displayed in the viewport.
mdeitersjudgeThis is excellent, I could see actually using this on a day to day basis. I ran into a few pages where the bar collided with the main page but over all it worked great.
Might also be nice if the window defaulted to being expanded. If I click the bookmark then I intended to see the comments, its cumbersome to click the bookmark and then expand the comment window.
- contestant
We definitely have a need to tackle the z-index. Idealistically, this would be a plugin for the actual websites with a back end for the commenter to be able to link all of their accounts and have a universal login for all sites on commenting. That being said, the plugin is on the way, so hopefully we’ll be able to remove the need for the bookmarklet and z-index problem altogether.
phillyqueso
contestantncb000gt
contestantThe utility for something like this would be great. We lose context with comments and this seems to aim to solve that.
It would be awesome to highlight the selected text when hovering over a comment.
With some more work I think you’ll have something really nice.
It looks beautiful and I like how minimalistic the interface was. However why was there a > triangle when the bar was already closed? Also, the bar itself was easy to miss. It should show up opened after I click the bookmark. (Why would I click the bookmark unless I want to read / leave comments)? Also, perhaps you could consider putting the comments in an iframe. The styles were “leaky” on every site I tried, with either the site’s styles leaking into the comment frame or the comment frame’s styles leaking into the site. Ultimately, I think that you’re going to fight an uphill battle getting people to use the service, and instead probably want to target publishers ala Disqus or the meebo bar. They’re always looking for better ways to engage users, especially if it can get users to better engage others.