11 ms·

37signals' Chalk: a fun little browser-based app for iPad

59 points by eng 16y ago

jbail 16y ago
Seems like a remake of their Draft app with a chalky UI. To really make a mobile web app be cool, it's still gotta work on the web. Otherwise, it's not cool. I'm making that a rule right now. Visiting a URL that says I have to be on an iPad is not cool. It's like saying I need to install a plugin that costs $500.
- thenduks 16y ago
  I don't think they care if if it's 'cool'... It's just an experiment/toy that they decided to blog about.
  - jbail 16y ago
    Yeah, I don't care either. I'm saying it's not cool because I can't even play around with it.
    - deleted 16y ago
      [deleted]
- derekdahmer 16y ago
  Its still a work in progress, but check out my project http://blotjot.com http://blotjot.com Its a collaborative whiteboard that works in any browser that supports canvas, including mobile safari on the iPhone and iPad. Runs on node.js + socket.io Example: http://blotjot.com/heyhn http://blotjot.com/heyhn
  - jbail 16y ago
    I made a little canvas demo app myself about a month ago. Works on web or mobile (least on Dolphin Browser in Android). I haven't tested a ton though. http://napnote.com http://napnote.com It's more of a concept app to draw on Chipotle or Starbucks napkins than a serious endeavor. Some fellow engineers and I were joking about it at lunch one day and I promised to make a kick ass web 2.0 app that did indeed enable you to draw on napkins. Then I added some other backgrounds because it seems that whatever medium you draw on affects your thinking in subtle ways. So yeah, it's more or less pointless. Google wouldn't even give me AdSense for it. :)
  - tjarratt 16y ago
    This is pretty neat, but you should make it so that if you click, you create a small dot. Right now it looks like you only render when the mouse moves, but not on the initial mouse down event. (tested with latest safari and chrome). I've been working on a similar idea with canvas, node.js and socket.io - it's amazing how many people are taking these same technologies and solving similar problems.
- rauljara 16y ago
  I understand where you're coming from, but touch changes how you interact with a device. I personally wouldn't want people judging my work based on their experience dealing with an interface I never designed for. Everything about the project screams fast and easy, and I'm cool with people doing fast and easy things for fun that don't work on all platforms. edited to add - and I don't own an iPad.
  - jbail 16y ago
    I disagree for two reasons: 1) Chalk is a paint app that uses touch (finger painting you might say). We've had paint apps that use mice for as long as I can remember (which is the Apple IIC). The translation between dragging your finger on a surface and clicking a mouse and moving it across the screen is very similar. 2) I wrote a little tutorial on this thread that shows how easy it would be to add mouse event support using the exact same jQuery event binding they are using for the touch events. I actually suspect now that making the app iPad only is just to get more attention for 37Signals. There isn't a compelling technical reason for doing that other than marketing ploy.
    - jasonfried 16y ago
      "I actually suspect now that making the app iPad only is just to get more attention for 37Signals. There isn't a compelling technical reason for doing that other than marketing ploy." Cynical. There's no ploy here, there's no big picture plan here re: releasing this just for the iPad. It was just easier. For a proof of concept, easy was the goal. A couple of guys spent a few days messing around and this is what came out. We're really happy with it so we figured we'd share it with everyone else too. We just went with the iPad because it was a lot easier to build it for a specific use case. We knew the exact dimensions, for example. We didn't have to think about how it would scale if the browser was wider or narrower. We could put everything exactly where we wanted it. It just works all the time since the iPad browser size is the same all the time. We also didn't think it would be that fun to use with a mouse. Finger painting is more fun.
- tvandervossen 16y ago
  I have to agree, especially since it’s pretty easy to make this kind of app work in modern desktop browsers too. Here’s a preview for a drawing app I made this summer for the iPad and iPhone that also works fine on the desktop in Safari, Chrome, and Firefox: http://stuff.vandervossen.net/temporary/sketch.html http://stuff.vandervossen.net/temporary/sketch.html On the iPad it supports up to 11 touch points (don’t ask) and it has some pretty neat curve smoothing to deal with the rather low resolution of the touch events compared to a native app.
- andybak 16y ago
  http://twitpic.com/33c0ph http://twitpic.com/33c0ph
- toolate 16y ago
  Agreed, this is exactly like the old "you need Netscape 3.7.5.1 to view this page", except this time you need to shell out $500 for a whole new device.
steveklabnik 16y ago
If you're wondering if this still works in a non-iPad browser... it doesn't. I was curious if I could still draw with the mouse.
- RyanMcGreal 16y ago
  I was hoping to swoop in with a "User Agent Switcher to the rescue!" message. However: switching user agents works in Firefox but the app layout looks broken [1] and it doesn't do anything; and switching user agents doesn't seem to work in Chrome. [1] http://postimage.org/image/1z21v9nhg/ http://postimage.org/image/1z21v9nhg/
  - ceejayoz 16y ago
    The events are touch-specific. Would be pretty easy to add in support for mouse events too, but they've clearly no immediate interest in that.
nopal 16y ago
And here's the magic: http://chalk.37signals.com/chalk.js http://chalk.37signals.com/chalk.js http://chalk.37signals.com/stylesheets/chalk.css http://chalk.37signals.com/stylesheets/chalk.css It's fun to look at this stuff, especially from the perspective of someone who hasn't gotten into HTML5 yet.
- jbail 16y ago
  it would be super easy to add support for mouse events. [tutorial] They are attaching events using jQuery's bind method. Like: canvas.bind("touchstart", ... You can add multiple events into bind. To add support for mouse events, you'd just add in the requisite mouse events, like so: canvas.bind("touchstart mousedown" ... canvas.bind("touchmove mousemove" ... canvas.bind("touchend mouseup" ... [/tutorial]
TamDenholm 16y ago
Seems to me like a free version of 37signal's iPad app Draft. Much simplier idea but still awesome.
- apgwoz 16y ago
  > Much simplier idea but still awesome. Why is this "awesome"? I don't have an iPad, so I haven't tried it first hand, but it seems to be a simple drawing tool disguised as chalk instead of a solid line. They're a dime a dozen. I went back and re-checked it out to ensure that I didn't miss anything. This would certainly have been more noteworthy if it was collaborative in real time amongst multiple iPads (e.g. etherpad).
  - tptacek 16y ago
    I missed the part of the blog post where they said "this will revolutionize the way you do work!" It seems to me that they called it a "fun little app".
    - apgwoz 16y ago
      Sure, but a "fun little app" is hardly news in my opinion, especially for a well established company like 37 Signals. We're one step away from having "OMG, DHH picked his nose" blog posts on the front page.
      - tptacek 16y ago
        You don't think it's a bit d$*chey to compare these guys spare time project to DHH picking his nose?
        apgwoz 16y ago
        I think it's pretty obvious that I was exaggerating. I really don't see anything of value here. If you do, fine, go have fun with it.
  - TamDenholm 16y ago
parfe 16y ago
Is 37signals treading water? The frequency of these worthless blog posts attempting to draw attention to themselves has been increasing. They say they have a lot of customers but something feels wrong.
- steveklabnik 16y ago
  David races sports cars.[1][2] I'm pretty sure they're doing just fine. 1: http://www.youtube.com/user/dhhracing http://www.youtube.com/user/dhhracing 2: http://www.autoblog.com/2010/09/07/pagani-zonda-hh-commissioner-revealed-as-30-year-old-chicago-sof/ http://www.autoblog.com/2010/09/07/pagani-zonda-hh-commissio...
- tptacek 16y ago
  You seem to be looking for drama where there's none to be found. Two guys wrote an web-backed iPad app and wanted to share it. If I dinked around and came up with something like Chalk, I'd want to blog it too. Yes, 37signals is wildly more successful than most people on HN, and yes, it's sometimes hard to tell the difference between their "attempts to change the world" blog posts and their "look what I did with my 3-day-weekend" blog posts, but: it's a blog. They don't owe you anything more than blog posts. This is an above-average blog post; it came with a new app!
kilian 16y ago
Cool little detail: the eraser actually removes a layer of "chalk dust" from the chalkboard as well. Very nicely done.
fourfour 16y ago
For a 3 day side project this is pretty cool. Say goodbye to pen and paper at client meetings. I think it'[s cool that it looks like their office too.
twymer 16y ago
Slightly unrelated, but anyone know why they put chalkboards in their offices and not whiteboards?
- cpr 16y ago
  See http://www.fastcodesign.com/1662465/for-a-company-that-sells-productivity-a-space-that-fosters-it http://www.fastcodesign.com/1662465/for-a-company-that-sells... and find the part starting '"I can't stand whiteboards," says Fried.'
destraynor 16y ago
I believe they're releasing this, as a fun way to test the water with HTML5, Javascript, etc. I believe they're pissed off with iOS development, as it's significantly more hassle than their usual routine of web development. I think they're lining up HTML5 as their solution to mobile. So we'll see Basecamp,Backpack,Highrise, etc move to HTML5, this way they'll have iPhone,iPad,Android supported. I believe this based on the snippets of JS they've generously released, and I believe there is more to come. I think this is far more likely than it being a publicity stunt.

59 points by eng 16y ago

jbail 16y ago

Seems like a remake of their Draft app with a chalky UI. To really make a mobile web app be cool, it's still gotta work on the web. Otherwise, it's not cool. I'm making that a rule right now. Visiting a URL that says I have to be on an iPad is not cool. It's like saying I need to install a plugin that costs $500.

thenduks 16y ago
I don't think they care if if it's 'cool'... It's just an experiment/toy that they decided to blog about.
- jbail 16y ago
  Yeah, I don't care either. I'm saying it's not cool because I can't even play around with it.
  - deleted 16y ago
    [deleted]
derekdahmer 16y ago
Its still a work in progress, but check out my project http://blotjot.com http://blotjot.com Its a collaborative whiteboard that works in any browser that supports canvas, including mobile safari on the iPhone and iPad. Runs on node.js + socket.io Example: http://blotjot.com/heyhn http://blotjot.com/heyhn
- jbail 16y ago
  I made a little canvas demo app myself about a month ago. Works on web or mobile (least on Dolphin Browser in Android). I haven't tested a ton though. http://napnote.com http://napnote.com It's more of a concept app to draw on Chipotle or Starbucks napkins than a serious endeavor. Some fellow engineers and I were joking about it at lunch one day and I promised to make a kick ass web 2.0 app that did indeed enable you to draw on napkins. Then I added some other backgrounds because it seems that whatever medium you draw on affects your thinking in subtle ways. So yeah, it's more or less pointless. Google wouldn't even give me AdSense for it. :)
- tjarratt 16y ago
  This is pretty neat, but you should make it so that if you click, you create a small dot. Right now it looks like you only render when the mouse moves, but not on the initial mouse down event. (tested with latest safari and chrome). I've been working on a similar idea with canvas, node.js and socket.io - it's amazing how many people are taking these same technologies and solving similar problems.
rauljara 16y ago
I understand where you're coming from, but touch changes how you interact with a device. I personally wouldn't want people judging my work based on their experience dealing with an interface I never designed for. Everything about the project screams fast and easy, and I'm cool with people doing fast and easy things for fun that don't work on all platforms. edited to add - and I don't own an iPad.
- jbail 16y ago
  I disagree for two reasons: 1) Chalk is a paint app that uses touch (finger painting you might say). We've had paint apps that use mice for as long as I can remember (which is the Apple IIC). The translation between dragging your finger on a surface and clicking a mouse and moving it across the screen is very similar. 2) I wrote a little tutorial on this thread that shows how easy it would be to add mouse event support using the exact same jQuery event binding they are using for the touch events. I actually suspect now that making the app iPad only is just to get more attention for 37Signals. There isn't a compelling technical reason for doing that other than marketing ploy.
  - jasonfried 16y ago
    "I actually suspect now that making the app iPad only is just to get more attention for 37Signals. There isn't a compelling technical reason for doing that other than marketing ploy." Cynical. There's no ploy here, there's no big picture plan here re: releasing this just for the iPad. It was just easier. For a proof of concept, easy was the goal. A couple of guys spent a few days messing around and this is what came out. We're really happy with it so we figured we'd share it with everyone else too. We just went with the iPad because it was a lot easier to build it for a specific use case. We knew the exact dimensions, for example. We didn't have to think about how it would scale if the browser was wider or narrower. We could put everything exactly where we wanted it. It just works all the time since the iPad browser size is the same all the time. We also didn't think it would be that fun to use with a mouse. Finger painting is more fun.
tvandervossen 16y ago
I have to agree, especially since it’s pretty easy to make this kind of app work in modern desktop browsers too. Here’s a preview for a drawing app I made this summer for the iPad and iPhone that also works fine on the desktop in Safari, Chrome, and Firefox: http://stuff.vandervossen.net/temporary/sketch.html http://stuff.vandervossen.net/temporary/sketch.html On the iPad it supports up to 11 touch points (don’t ask) and it has some pretty neat curve smoothing to deal with the rather low resolution of the touch events compared to a native app.
andybak 16y ago
http://twitpic.com/33c0ph http://twitpic.com/33c0ph
toolate 16y ago
Agreed, this is exactly like the old "you need Netscape 3.7.5.1 to view this page", except this time you need to shell out $500 for a whole new device.

steveklabnik 16y ago

If you're wondering if this still works in a non-iPad browser... it doesn't. I was curious if I could still draw with the mouse.

RyanMcGreal 16y ago
I was hoping to swoop in with a "User Agent Switcher to the rescue!" message. However: switching user agents works in Firefox but the app layout looks broken [1] and it doesn't do anything; and switching user agents doesn't seem to work in Chrome. [1] http://postimage.org/image/1z21v9nhg/ http://postimage.org/image/1z21v9nhg/
- ceejayoz 16y ago
  The events are touch-specific. Would be pretty easy to add in support for mouse events too, but they've clearly no immediate interest in that.

nopal 16y ago

And here's the magic: http://chalk.37signals.com/chalk.js http://chalk.37signals.com/chalk.js http://chalk.37signals.com/stylesheets/chalk.css http://chalk.37signals.com/stylesheets/chalk.css It's fun to look at this stuff, especially from the perspective of someone who hasn't gotten into HTML5 yet.

jbail 16y ago
it would be super easy to add support for mouse events. [tutorial] They are attaching events using jQuery's bind method. Like: canvas.bind("touchstart", ... You can add multiple events into bind. To add support for mouse events, you'd just add in the requisite mouse events, like so: canvas.bind("touchstart mousedown" ... canvas.bind("touchmove mousemove" ... canvas.bind("touchend mouseup" ... [/tutorial]

TamDenholm 16y ago

Seems to me like a free version of 37signal's iPad app Draft. Much simplier idea but still awesome.

apgwoz 16y ago
> Much simplier idea but still awesome. Why is this "awesome"? I don't have an iPad, so I haven't tried it first hand, but it seems to be a simple drawing tool disguised as chalk instead of a solid line. They're a dime a dozen. I went back and re-checked it out to ensure that I didn't miss anything. This would certainly have been more noteworthy if it was collaborative in real time amongst multiple iPads (e.g. etherpad).
- tptacek 16y ago
  I missed the part of the blog post where they said "this will revolutionize the way you do work!" It seems to me that they called it a "fun little app".
  - apgwoz 16y ago
    Sure, but a "fun little app" is hardly news in my opinion, especially for a well established company like 37 Signals. We're one step away from having "OMG, DHH picked his nose" blog posts on the front page.
    - tptacek 16y ago
      You don't think it's a bit d$*chey to compare these guys spare time project to DHH picking his nose?
      - apgwoz 16y ago
        I think it's pretty obvious that I was exaggerating. I really don't see anything of value here. If you do, fine, go have fun with it.
- TamDenholm 16y ago

parfe 16y ago

Is 37signals treading water? The frequency of these worthless blog posts attempting to draw attention to themselves has been increasing. They say they have a lot of customers but something feels wrong.

steveklabnik 16y ago
David races sports cars.[1][2] I'm pretty sure they're doing just fine. 1: http://www.youtube.com/user/dhhracing http://www.youtube.com/user/dhhracing 2: http://www.autoblog.com/2010/09/07/pagani-zonda-hh-commissioner-revealed-as-30-year-old-chicago-sof/ http://www.autoblog.com/2010/09/07/pagani-zonda-hh-commissio...
tptacek 16y ago
You seem to be looking for drama where there's none to be found. Two guys wrote an web-backed iPad app and wanted to share it. If I dinked around and came up with something like Chalk, I'd want to blog it too. Yes, 37signals is wildly more successful than most people on HN, and yes, it's sometimes hard to tell the difference between their "attempts to change the world" blog posts and their "look what I did with my 3-day-weekend" blog posts, but: it's a blog. They don't owe you anything more than blog posts. This is an above-average blog post; it came with a new app!

kilian 16y ago

Cool little detail: the eraser actually removes a layer of "chalk dust" from the chalkboard as well. Very nicely done.

fourfour 16y ago

For a 3 day side project this is pretty cool. Say goodbye to pen and paper at client meetings. I think it'[s cool that it looks like their office too.

twymer 16y ago

Slightly unrelated, but anyone know why they put chalkboards in their offices and not whiteboards?

cpr 16y ago
See http://www.fastcodesign.com/1662465/for-a-company-that-sells-productivity-a-space-that-fosters-it http://www.fastcodesign.com/1662465/for-a-company-that-sells... and find the part starting '"I can't stand whiteboards," says Fried.'

destraynor 16y ago

I believe they're releasing this, as a fun way to test the water with HTML5, Javascript, etc. I believe they're pissed off with iOS development, as it's significantly more hassle than their usual routine of web development. I think they're lining up HTML5 as their solution to mobile. So we'll see Basecamp,Backpack,Highrise, etc move to HTML5, this way they'll have iPhone,iPad,Android supported. I believe this based on the snippets of JS they've generously released, and I believe there is more to come. I think this is far more likely than it being a publicity stunt.