Corkboard app, all in HTML/CSS/Javascript | Hacker News Reader

Javascript

corkboard.me

Hey! Go to http://corkboard.me instead of the link set by ycombinator. corkboard.me automatically gives each person their own personal corkboard, but it does this through a 302 redirect. I should probably change this in the future, but for now go directly to http://corkboard.me for your own. (Admins, if you could change the link I'd appreciate it. Thanks!) -- Tim

It seems to have been updated to the direct link now. Neat simple site.

It would be nice to be able to zoom in and out to see more or less at a time. In general, this concept lands itself well for Google maps API where you model your board as a map and it handles scrolling and zooming for you.

Edit: something similar to this http://www.conwaylife.com/

The zoom in my browser seems to work fine.

That's cool, didn't even think of that.

for me (ffox 3.5.15 on mac) it zooms the text but not the images, I would expect it to shrink/expand the images as well so you could see more at once.

Do you have View->Zoom->Zoom Text Only enabled?

(OT: you are using an out of date version of ff, latest is 3.6.12)

Hey, late reply but no I do not have zoom text only turned on.

Off topic as usual, but interesting from the developer and user point of view.

If you are going to give me a 10 char ID, please make it all lower case and without numbers, I hate hitting shift or having to move my eyes from the keyboard to the numpad and back.

So, aren't 26 lowercase chars enough?

26^10 = 141,167,095,653,376

A hundred and forty trillion options!

* Hey Tim, nice app btw.

Or better, give the option to change to a vanity id.

Neat app and one of the best examples of a keep-it-simple webapp I've seen.

But let's talk about the ID. Sure, it's a hundred and forty trillion, but it's also less than 48 bits. Note that every visit to the site's root URL generates a new ID, and compare with The Fridge which (very reasonably) uses a 128-bit-equivalent ID: 25 alphanumerics!

I'm not buying this "hard to type" argument. First, an app would ideally just allow you to get a more-typable version if you specifically request it. Second, how often are you typing in IDs? When the URL is on paper or on another device? I'm thinking it's not often enough to truly affect usability. Third, I use a keyboard that doesn't even have a numpad and somehow I get by.

Finally, let's say we spec out that we do want at least 47 bits of IDs. The site can get there by using 10 lowercase letters or 8 of all alphanumerics. Game over. Now the lowercase option comes down to adding two characters for the sake of better typability, which is a crummy trade. Not only for Twitter reasons but because the longer the URL is, the less shareable it looks.

I see this type of ID everywhere and I'm curious as to how they are created and how "random" they are (the chances of generating two of the same). A python snippet would be great, of course :)

    id=''.join(Random().sample(string.ascii_lowercase,10))

Not really. Random.sample samples from a population multiple times: that means no doubles (unless they were in the population as well). Try it: sample 30 times from string.ascii_lowercase. Since you did it with 10, less than len(population), it didn't croak, but it also doesn't get you the numbers mentioned above.

Here's one I like better: "".join(random.choice(string.ascii_lowercase) for _ in xrange(len))

Hmm, if that's the case then 26x25x24... still gives you twenty trillion unique ids with non-repeating chars. Not bad after all.

Will have that in mind.

I did a corkboard concept over a year ago but it was mostly a UI exercise that incorporated mouse gestures for input (there was no backend). http://blog.pekpongpaet.com/2009/04/13/concept-virtual-corkb... Flash-haters don't hate

Doesn't work with some character sets. I just entered:

これは、いくつかの日本です

Then went away and came back, and all the characters had turned to question marks.

Obviously, you entered it on a non-Japanese-speaking corkboard.

I think you mean, "いくつかの日本語"... :)

It still doesn't make much sense, but I don't want to start Japanese lessons here...

Anyhow, some DBMS default the character encoding to ASCII (or ISO8859), not UTF, and Western developers often don't care.

I don't speak Japanese, I just went to translate.google.com and entered some text to get a sample. I can't even remember what I entered.

Oh yeah you're probably right about that. Good work. By the way, any suggestions on that phrase? I'm not a native speaker so my Japanese isn't very good.

That's strange, Japanese input worked for me. (Chrome / Japanese Win7)

Maybe they fixed it?

Nevermind, you can write, just not save. I assume they're using a latin-based field in their DB...

That could be the case. I often don't notice encoding issues until my colleagues complain their entries in Japanese are messed up.

This is one of the first things I test when I find a site like this. Most web developers don't seem to take into consideration things like character sets and encoding, yet they are so important.

Do you know if your input method produces unicode? That could be the difference.

It would be nice if you allowed us to rename our corkboard (corkboard.me/[my_name_or_whatever]) to something more meaningful, then I can get to it from work or home without checking my delicious account.

This is very easy to do. Will be in the next release. --Tim

Could you make it more obvious where to click and hold to drag?

I think you want to allow the user to select the text with the mouse without moving the note, but maybe some kind of styling at the bottom and top of the note to designate a "drag" zone.

I agree. It would be much clearer if you used a hover css property and put cursor: move;

Noted (on my own corkboard!). Will come soon.

Very cool! I need some more colors and other type of post-it (photos?) though before I seriously consider using it...

If you paste an image URL into a note it shows the image

Can't get that to work on Chrome, Mac, 7.0

not working under safari 4.0.4

Works for me in Firefox 3.6.12 - I have noticed that you seem to need to add a return after the image URL though.

One of the top requested features so far (colors). I have it on my list.

Looks like a neat idea, but can you please add a Terms of Service page, even if it's just a brief one? That might set folks a bit more at ease for posting their TODOs and reminders.

Looks really good. One small refinement: deleted notes could appear on a list in the corner say - maybe with a screwed up motif - so I can recover something I delete by accident :-)

You could even build in a wastebasket paper toss game :)

Great simple app.

Feature bloat alert!

Very cool, well built.. but from a UX/UI perspective, it strikes me as a little bit odd that I would be sticking post-its to a cork board. Maybe a refrigerator or whiteboard texture would be more fitting. Or, so that you don't have to change your domain and branding, you can add thumbtack graphics.

Works nicely in iOS too. Well done.

Very well done. It's nice and simple as software should be.

This thing would be great for story-boarding if it supported images and other media types. IFrame would be cool to be able to bring in external content into one of the notes. With a few more features, you got yourself a winner here. Making the controls contextual to the note could keep it simple. Let me know if you do decide to add other media types, I would be an avid user.

It does support images. Paste an image url into a new note, then hit return. For example: http://corkboard.me/mTJPwxMRha

Nice how does one add an image, I don't see any ways to add one. As well another nice feature would be the ability to group notes. So that when a user adds an image they could drop sticky's on it and then group them so that they move together.

Kick Ass!. Plain and Simple.

Some refinements - Mac, 10.6.5, Firefox 3.6.12, Creating a new note only happens in the lower right corner. I have to drag it more to be able to use the note.

I would pay to use this on my small biz intranet. i.e license it.

Thanks Jason! I thinking about ways of monetizing this. Send me your email or twitter handle and we can talk about getting you in as beta users (to tim [at] timothyjcoulter.com, free/low cost in exchange for feedback).

Bug noted. Will def check it out!

Great Job - A month ago I had the thought of creating a similar cork board concept app myself, using html/js/css - today I open HN and I see your app - well done!

It appears that two browsers (Firefox and Chrome) on the same machine can edit a board, but it can't be edited by two or more machines at the same time. Bummer.

Nicely done. I attempted doing something similar but it was not executed as cleanly as yours. Is there a way to pin items so I don't accidentally move them?

Couple of bugs in Opera 11 beta.

New notes only appear in the middle of the entire board. When I close a note, it pops up a new one.

Would be cool to be able to draw lines and labels for columns, rows or squares to organize the post-its.

Really neat, but what if I get lost? Maybe some sorta thing to zoom out, not sure. But its really nice!

Definitely. I'm thinking how I can implement that, possibly a mini-map or a snazzy zoom out feature. Definitely will come in a future release.

I can see some sort of coordinate system being useful if I wanted to send someone a link to a particular item / patch of cork.

What can i say... you make my dream look bad :) good job, cant wait to see where you take it

creating a new note by double clicking would be nice, since the rate of notes created by mistake would be lower :) plus the image url feature doesn't work with any of my browsers (Mac OSX 10.6.5 Safari 5, Chrome 8, Firefox 4)

Thanks! Noted. For the image url, are you pressing enter after pasting your URL? Let me know if that doesn't work, and if not, we'll drill down into why it's not working for you (def want to fix it if it isn't).

Img not working for me with / without pressing enter after pasting the url.

doesn't matter if i press enter or not.

png and jpg are now working :)

Imagine how great this would be on a big multie touch screen

Is the source code for this available, besides view source?

Loving the simplicity. Can't wait to see where you take it!

Agreed. Looks like it has potential. Nice work!

very nice. i will use this as it is.

That is really, really cool.

clean

Needs localStorage.

… but still retain server based storage

… and resolving my offline updates with the server

… even the provably incompatible ones

We are users! We want everything! Especially the impossible. And keep it free.

Easy — just make it a CouchApp.

This could be awesome, if done transparently. The greatest appeal of this application is it's straight-up simplicity: you click, start typing and your notes are stored. Feature bloat would really detract from this experience.

Reply on news.ycombinator.com