Show HN: Review my project: MarkUp, a tool to draw on any webpage. | Hacker News Reader

Show HN: Review my project: MarkUp, a tool to draw on any webpage.

90 pointssenex54 comments

Here's the website: http://markup.io/

We created MarkUp at Medium to help make the QA process better for sites we're working on. Grab the MarkUp bookmarklet, go to some page in your browser, then click it to draw on the page. Publish to make a link you can share.

We've tried similar tools like BounceApp, Notable, and Skitch. Everything else we found is screenshot-based or takes us out of the browser. We wanted something that felt quicker than screenshots and more integrated with the browsing experience.

Instead of taking a screenshot, MarkUp snapshots the DOM in the current page, strips the javascript, and overlays a transparent DIV to draw on. We used Raphael for the drawing tools. The server-side is Node.js/Express.

What do you think? It's in beta and we'll be adding more features, but we wanted to start getting feedback now.

Thanks

View on HN

Full list of (currently undocumented) keyboard shortcuts:

  Note: On Mac, substitute any ctrl with cmd
  
  general:
    ctrl+z:             undo
    ctrl+shift+z:       redo
    ctrl+s:             save (open publish dialog)
    ctrl+i or i:        open info window
    alt+r:              open reply dialog (on a published markup)
  
  tools:
    v or s:             select tool
    a:                  arrow
    m:                  marker
    t:                  text
    l:                  line
    c or e:             circle (ellipse)
    r:                  rectangle
    esc or ctrl+enter:  finish editing a textbox
  
  editing:
    backspace or delete: delete selected shape(s)
    ctrl+a:             select all
    arrow keys:         nudge selected shape(s)
    shift+arrows:       nudge selected by 10 pixels

Great work. Bookmarked it.

2 questions:

1) Is there a way to erase or reset the drawing in case i bungle it up?

2) It'd be brilliant if you could collaborate using the same URL. I sent a markup URL to someone who wanted to share his notes on my annotations and he hit respond, drew the appropriate stuff and hit publish only to find that there was a new link that had to be pushed to me for it to be seen. Again, I understand the concern of too many cooks spoil the broth but it's a usecase for a small team to collaborate on a page's UI without having to send a new link each time.

Great piece of work.

What about using socket.io to provide a real-time collaborative environment?

Here is the typical use case: my business partner is in Australia and I'm in China. We often browse the internet "together" to share some design inspirations. For now, we have to include position info in the skype call to say "if you look at the trending keywords on the right hand side, blah, blah". It'll be super nice for us to look at the same page and I can see his mouse movement.

1) Yep. Keyboard only for now (though we're looking into adding UI controls): You can select any shape, then hit backspace/delete. You can also select every shape with ctrl+a/cmd+a. Also ctrl+z/cmd+z and ctrl+shift+z/cmd+shift+z to go back and forth in the history.

2) We've got some ideas about making collaborating easier (revision history, realtime multi-user drawing, wave-style replaying, &c.) What would work well for you?

Thanks for the followup.

re. #2, i think even a revision history, keeping the same URL or a list of revisions on the dropdown should be very useful while you develop the entire product.

cool idea. just wanted to point out that drawing (with the circle) is a bit buggy on mac chrome 6.0.472.63. I've posted a screenshot of me writing the word "hack" here:

http://imgur.com/baqxi

the lines to the left side we'ren't drawn by me.

I confirm this problem on Chrome dev 7.0.544.0 on Win 7.

Very nice work!

I'm seeing a bug in the drawing demo on the front page. I can draw the first line and it works as expected, but if I release the mouse and try to draw a second line it's not working correctly. It doesn't show the shape that I've drawn until I release the mouse and it connects the end of the first line to the start of the second.

This is definitely the case for me too (Using Chrome on OS X). You can sort of fix it by right clicking and then restarting, but it works exactly as expected on other websites. Good job OP.

I also have a similar problem, and I'm using Safari 5.0.2.

I like this a lot, and for quick notes it's easier than Notable. I like the implementation as a bookmarklet, but here are two big problems:

1) Starting MarkUp clears any info you've entered into a form on the page 2) There is no easy way to exit/cancel (how about trapping ESC or adding a little X?)

Thanks for the feedback! I've added (1) to our bug list. Others have asked for (2), so we'll definitely be adding that sometime soon.

Obviously you've already added it to your list, but just for feedback, this is the biggest thing I'm missing right now too (no cancel or close). The history is amazing and I'm not sure if you've got a limit on it but I did undo roughly 30 times easily. You may want to also consider an undo button for people who don't think to try Ctrl-Z or just some info on possible commands on the info button. Do you support any other keyboard shortcuts (switching tools, size up or down etc?)

Cool. That (drawing on an existing web page to mark it up) is the same use-case we had that led to building Twiddla. It's pretty much the same thing, but realtime & multi-user.

Good luck!

I love twiddla. Fwiw, it runs circles around this.

On Firefox 3.6.10/Win7, I get this: http://i.imgur.com/cNt7g.png

Each number was drawn individually as shown. Each number took longer before showing up on the page, to the point where 4 and 5 tossed up the Firefox "unresponsive script" dialog.

Apart from that, this definitely has potential, and would actually give me a reason to un-mothball my tablet notebook. Props!

This is awesome. I usually use Awesome screenshot for Chrome - https://chrome.google.com/extensions/detail/alelhddbbhepgpmg... and Lightshot for OS screenshots straight out of Chrome - but usually I only annotate images and not web pages, respond feature is really nice to have also.

clickable: http://markup.io

This is amazing the tool itself is intuitive and easy to use, but powerful. The only thing I would say needs a bit of work is your website. Declutter it, and make it more like dropbox.com, where the user has no other choice but to try it (rather than read about it).

Seems to have a bug - on Mac/FF, I generally get the free-form no matter which tool I click on, although at one point I got the circle when the free-form tool was highlighted, and every once in a while I do get the arrow to work correctly - didn't figure out the pattern.

Nice. Some ideas (that you probably already have): typable sticky notes; a library of icons/images to overlay; audio notes; have some gestures (double-click like an iOS double-tap?) auto-select containing DOM elements.

You can get something pretty sticky-note-ish by dragging a box with the text tool. And yep, we've got some of those on our list.

Aha. Had no idea there was a text tool -- since it's not in the frontpage demo.

This is awesome. We use diigo right now for tagging pages and sharing them but it is pretty weak. The ability to login & keep a history of your markups to share with others in your group would be tops.

Reforma Grotesk -- nice font!

http://new.myfonts.com/fonts/paratype/reforma-grotesk-bold-e...

This is a great tool, I actually thought about something like this last year to share feedbacks on websites, but never got around to develop it. Bookmarked it, and I'll definitely use it.

Very nice. That's a tool I was just about to need. My circles and rectangles are a bit sloppy... Scratch that, I found the toolbox. Awesome.

How do you deal with the screen resolution problem?

We capture the dimensions of the page when the toolbar loads. People viewing the MarkUp with different screen resolutions might see an "empty" background or need to scroll a bit.

Here's an example: http://markup.io/v/x9ybmz4e5k7r

That's a good solution. Thanks.

The mischief quotient for this is rather high

Awesome utility/bookmarklet.

I've noticed some slowness but it may be my side due to applicaitons and tabs open. But awesome..

What happens if the page gets updated?

The page is cached out, so after publish the shapes aren't being laid on top of the original site.

http://dev.markup.io/v/fz1jwz3xv8nz

Fun. Is there a central place where I can search for web pages marked up with this tool?

Not yet, but we we're toying with the idea of adding a real-time stats/zeitgeist page. Stay tuned to @MarkupIO on twitter for updates.

Good idea. We can use this for design dev. Bookmarked.

This is pretty awesome, I might be using it a lot!

Great job. Who did the design for your page?

M.A. Turner did the design. He works at Medium (http://thisismedium.com/) with us. Usually we work for clients, but we've started some projects of our own like MarkUp.

what about this one?

http://drawhere.com/site/www.yahoo.com/

Pretty nice, and it's similar. But, no text tools, and no Safari/Chrome support. Also, MarkUp captures the DOM exactly as it is (including stuff loaded in through AJAX), and kills any javascript.

Doesn't support Chrome

good point - browser compatibility is kinda important if it's meant as a sharing tool.

Do you have any plans to support IE8?

Definitely. IE7+ support is on the way.

this looks quite helpful, works on Chrome, but not on IE9 when I used the published url

nicely done! passing this on to my ui/uix friends right now.

Strong work.

Great tool!

Whoaa. This is excellent. Thanks!

It's pretty similar to Coda Notes, but Markup seems to be much more professional. Also, Coda Notes is only for Safari, so that's one disadvantage they have.

Reply on news.ycombinator.com