Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Mockups fixed by making collaboration effortless, built with React

precursorapp.com

Post reply on HN
Print view View original

71–80 of 109 posts

Re: Show HN: Mockups fixed by making collaboration effortless, built with React

#71

Post by arihant »

I have mixed feelings here:

1. This is just wire-framing, not mock-ups. Adding mock-up features will take away the realtime-discussion-ness of the product, so that's that.

2. Wire-framing is essentially a brainstorming exercise. I'm not sure if it's actually very worthy to do initial brainstorm together.

3. But, what is valuable is that once you brainstorm, to show that to coworkers and let them make edits in realtime to discuss.

4. However, this product is fully focused on making the brainstorming part collaborative, not the review part. So much so that for the review use case, I can use it for free.

So I don't know. I'd still like to explore and brainstorm alone. Things must pass a threshold before they are shown out. Maybe there is a market, but I have never started on a blank canvas with a coworker.

Re: Show HN: Mockups fixed by making collaboration effortless, built with React

#73

Post by lgas »

dwwoelfel wrote: post #45
BFay wrote: post #44

Earlier quoted context omitted.

I'm really impressed with the visual design, and curious about what's being used to generate the CSS. I'm also wondering, are there any difficulties that arise when working with canvas and svg using just Om, or in plain React?

css is generated with less. I can't say much about canvas, but using svg with React is a bit of a hassle. There isn't built-in support for every svg tag and attribute, so we have to maintain our own fork: https://github.com/precursorapp/react Once you add support for the tags, though, it's no different than working with any other html in React. I think we'll see React start to eat into d3's market-share pretty soon.

Can you elaborate on this a bit? I'm not that familiar with react itself, having only used it through om, but I built a proof of concept that let me work with SVGs via om with code like:

    (defcomponent circle-view [data]
      (render [_]
              (let [size (get-in data [:circles :size])]
                (html [:div.circle
                       [:svg {:height size
                              :width size}
                        [:circle {:cx (/ size 2)
                                  :cy (/ size 2)
                                  :fill "yellow"
                                  :r (/ size 2)
                                  :stroke "green"
                                  :stroke-width 4}]]]))))
And it seemed to all work fine? (Using sablono obviously)

Re: Show HN: Mockups fixed by making collaboration effortless, built with React

#74

Post by Too »

keithy wrote: post #58
thebouv wrote: post #12

I'm trying to figure out the audience. I've never had to collaborate on a mockup. I make mockups. I review mockups. I mark mockups up. But I've never wanted to do one live with someone else. That's just me though so an example of when this is used would be great. Some feedback: I use Balsamiq and have for years. The whole reason I use a mockup tool in the first place is so I don't have to draw everything by hand or m…

As a college CS student, It's actually super useful for college students working on a project. The only good choice right now is Google DOCS for collaboration, having a realtime collab mockup creation tool would be very helpful for multiple college students working on a project.

There are quite many choices if you look around, in uni we used http://cosketch.com for math alot and i was very happy with it, it looks a bit outdated today but the workflow is better than most similar tools i've tried, very quick, non intrusive, keyboard shortcuts etc. Only drawback is that things are not saved permanently and it doesn't have many widgets if you plan to use it primarily for mockups.

Another good tip, if you trust your friends, is just starting a remote desktop or teamviewer session. Then you have full access to proper tools like Word, Photoshop or IDEs.

Re: Show HN: Mockups fixed by making collaboration effortless, built with React

#75

Post by dwwoelfel »

lgas wrote: post #73
dwwoelfel wrote: post #45

Earlier quoted context omitted.

css is generated with less. I can't say much about canvas, but using svg with React is a bit of a hassle. There isn't built-in support for every svg tag and attribute, so we have to maintain our own fork: https://github.com/precursorapp/react Once you add support for the tags, though, it's no different than working with any other html in React. I think we'll see React start to eat into d3's market-share pretty soon.

Can you elaborate on this a bit? I'm not that familiar with react itself, having only used it through om, but I built a proof of concept that let me work with SVGs via om with code like: (defcomponent circle-view [data] (render [_] (let [size (get-in data [:circles :size])] (html [:div.circle [:svg {:height size :width size} [:circle {:cx (/ size 2) :cy (/ size 2) :fill "yellow" :r (/ size 2) :stroke "green" :stroke-…

Oh sorry, I didn't mean to imply that none of the svg tags are present. Most of the common svg things work, but there are lots of missing tags and attributes. There's an issue for it here: https://github.com/facebook/react/pull/1032

Some of the things we had to add for Precursor were clipPath, foreginObject, mask, patternTransform, marker, and vector-effect.

Re: Show HN: Mockups fixed by making collaboration effortless, built with React

#76

Post by LikeAnElephant »

cracell wrote: post #72

Why can't apps like this have a accessible demo available to try it out? Not interested enough to spend time signing up and I avoid SSO whenever I can for various reasons.

You can click the "Make Something" button on the main page and go directly into a demo.

Re: Show HN: Mockups fixed by making collaboration effortless, built with React

#77

Post by nazgul1 »

dwwoelfel wrote: post #69
nazgul1 wrote: post #68

I like it a lot but it's unusable for me as I need to make things that are longer than the screen (often much longer), yet this forces me to work within size of the screen.

You should be able to make things as large as you like--the canvas is infinite. To pan, you can scroll or hold space and drag. To zoom, hold alt and scroll.

Then it doesn't work properly in Chrome or something-- it's not letting me drag items to make them bigger than the screen size.

Re: Show HN: Mockups fixed by making collaboration effortless, built with React

#78

Post by lgas »

dwwoelfel wrote: post #75
lgas wrote: post #73

Earlier quoted context omitted.

Can you elaborate on this a bit? I'm not that familiar with react itself, having only used it through om, but I built a proof of concept that let me work with SVGs via om with code like: (defcomponent circle-view [data] (render [_] (let [size (get-in data [:circles :size])] (html [:div.circle [:svg {:height size :width size} [:circle {:cx (/ size 2) :cy (/ size 2) :fill "yellow" :r (/ size 2) :stroke "green" :stroke-…

Oh sorry, I didn't mean to imply that none of the svg tags are present. Most of the common svg things work, but there are lots of missing tags and attributes. There's an issue for it here: https://github.com/facebook/react/pull/1032 Some of the things we had to add for Precursor were clipPath, foreginObject, mask, patternTransform, marker, and vector-effect.

Ah, ok, that makes sense. Thanks!

Re: Show HN: Mockups fixed by making collaboration effortless, built with React

#79

Post by rainings »

First of all, this is an amazing app. It uses many SVG animation. But the drawback about SVG animation is when it comes to cross browser support, especially safari. You will have many issue working in safari browser. That is one of the reason i still pending to implement cool SVG animation and UI in to the real project development. Last but not least, Good work, keep it up.
Post reply on HN