Show HN: a web-based xkcd-style comix editor | Hacker News Reader

Show HN: a web-based xkcd-style comix editor

cmx.io

586 pointsdr_win109 comments

Disappointed the top comments are criticizing and discussing the browser limitations.

For a weekend project, this guy created a UI that deals intuitively deals with angles, bezier curves, dependent relations between objects, and turns it all into HTML, and you guys are that butt hurt it only works in Chrome?

Yeah, it is rather odd to see people complaining that the first prototype of a project does not contain all the features from all of the future releases...

While I agree with your message, I don't think "butt hurt" is the most appropriate term you could have used here.

Sure, while yes, these people don't actually seem "offended" as "butt hurt" would somewhat crudely imply, your need to assert such a pedantic issue is the very essence of my original point.

My thoughts exactly... http://cmx.io/#4942668

Also works in Safari for all I can tell...

Wish I could give you all of my karma for this comment.

Man, this is amazing.

Think about the endless possibilities. On top of that it will be possible to build a library of objects like: "NormalGuy", "Ninja", "Tree" and so on.

Then it will be cool to programmatically move them. No Idea if that is feasible or not. Maybe not, but I will say otherwise.

Then we could describe an environment in which they could act in a declarative way. We could add simple behaviours shaped on top of simple goals. Those goals could be described in a similar way as the environment. If we tie a behaviour to an animation we have small drones of "Ninja" that act on themselves (well..kind of).

Or we could move those animation with the keyboard. I mean, at this point possibilities are just to be enumerated.

At the end it will be like a DSL to describe animation and behaviour and environment. Like an engine for videogames, animation, even smart behaviour (not mentioning AI and similars)

I don't know, I smell something really great behind that think that you built.

Your comment reads exactly like an xkcd comic. I wonder why this is..

forgive me if i've missed any sardonicism, but you might be interested in learning you are describing Flash in thorough detail.

ahahah, yep you are actually right. A big difference, probably the only important one, is that you could read, and modify, the source using the same medium (the browser). So the gap for people to play with that is almost zero. This is probably one of the forces that have allowed the Internet to become what it is today.

"STOP! WebKit is required here. The Comix Editor was tested under Chrome. It uses some webkit-specific tricks."

WebKit - the new IE.

Strange, I don't get that message in Firefox; also it appears to work fine, but maybe I'm missing out on some stuff :)

A warning is fine, but I just hate it when a site doesn't even let me try in another browser. I use Firefox Nightly, maybe it fixed the issues that are breaking your app? If you're detecting via user agent, what if I use an odd user agent? What if I want to look at the web console to see just what breaks in case I know what the issue is?

> I use Firefox Nightly, maybe it fixed the issues that are breaking your app?

If it's using -webkit prefixed CSS, that's pretty unlikely.

> What if I want to look at the web console to see just what breaks in case I know what the issue is?

Anyone interested in doing that should be well aware of how to spoof a user agent.

> If it's using -webkit prefixed CSS, that's pretty unlikely.

Unsupported CSS features should not affect the functionality of a web app, only its appearance. Emphasis on "should"; far too many web apps end up fundamentally broken when this happens.

Well how do you expect it to work when the functionality is to change the appearance?

I think something like web-based SVG editor is pushing browser limits too far (some folks reported it crashed Chrome for them). CSS is not "just styling" here. It has functional meaning. For example invalid z-ordering, visibility or cursors can pretty much ruin the experience.

It's a proof-of-concept hobby project, as far as I can tell.

While this is true of bank, ecommerce, news, etc, sites, it doesn't apply when the author is just sharing something he's playing around with.

They should at least include the non-prefix css (or other prefixes) as well for when a feature becomes available on other browsers in case they forget to update it or if they're not aware of what other browsers support.

If you're building NBCnews.com, sure.

If you're building a fun hobby project, you can do whatever you like, including building it in a specific environment.

Of course :)

However, it does limit feedback for any of us not using Chrome. Author is probably cool with that though as it appears and I commend them for not making us jump through hoops to try it anyways by switching user agent.

or use something like this

https://github.com/LeaVerou/prefixfree

"Anyone interested in doing that should be well aware of how to spoof a user agent."

You are not answering the question. Why block a user-agent, if the check can be easily worked around?

Edit: I mean why block as opposed to display a simple warning ("this site is known to not work well with your browser").

So non technical users go "oh, I'll take a look in Chrome", not "this thing's stupid, nothing works".

The same thing can be achieved by displaying a simple warning that lets users bypass it ("oh, I was warned it might not work in my browser, and indeed it doesn't, I will take a look in Chrome").

Q: "I use Firefox Nightly, maybe it fixed the issues that are breaking your app?"

A: "If it's using -webkit prefixed CSS, that's pretty unlikely."

There's actually been talk of non-Webkit vendors supporting the webkit prefix. Opera already does, Microsoft and Mozilla have said they need to support it in at least some cases.

"Non-WebKit browser vendors first started talking about implementing the -webkit prefix [in February of 2012] during a CSS Working Group meeting. Microsoft, Mozilla and Opera all said they felt the need to support -webkit, lest their users be relegated to an inferior browsing experience (because so many sites are using only the -webkit prefix)."

http://www.webmonkey.com/2012/04/opera-forges-ahead-with-pla...

Tantek Çelik of Mozilla: "At this point we're trying to figure out which and how many webkit prefix properties to actually implement support for in Mozilla. Currently we have zero. Zero is no longer an option for us."

Florian Rivoal (Opera), Sylvain Galineau (Microsoft): "Zero is not an option for us anymore either."

http://lists.w3.org/Archives/Public/www-style/2012Feb/0313.h...

I hope browser vendors only implement support for webkit- prefixes for now-standard properties (eg. box-shadow), and not for properties that only WebKit implements.

It doesn't work under FF Nightly. I'm sorry this was a quick way how to deal with the issue. I don't want to deal with complains "it is broken / it doesn't work for me".

I'm going to push new version which will allow you to continue over that warning.

Updated, refresh your caches: https://github.com/darwin/cmx.io/commit/02ae7bc5b37cfc3117f8...

Thank you very much for the update! I apologize for being rude before, I don't want to bring you down on a very successful day on Hacker News. :)

For what it's worth, though the visual editor doesn't work in Nightly, the code editor + saving does work! It was really fun to mess around with the source and edit your sample comic. Great work!

The main problem with IE wasn't that it was an exclusive product incompatible with other browsers. The problem was that it was bad. I'm not a fan of people only supporting WebKit, but at least WebKit browsers are good.

I used IE briefly in 2000 and 2001, before Mozilla (0.9) became usable enough and Phoenix came out; back then (IE 5.5 to IE 6.0) it definitely was the best browser, by far.

It was the most forgiving browser, with a quirks mode that handled broken code like a champ. But Opera was the best browser, and if your code rendered correctly in it, it would probably render correctly everywhere else (except maybe Netscape 4, an abomination that took too long to die).

Opera was also commercial. At some point there was a free adware version, but I think that was later than 2001. After IE, most people stopped paying for web browsers.

IE isn't bad. It's bad because it is like 10 years old. IE actually innovated a ton of what we consider javascript and CSS/HTML now and days.

Actually, for a while, IE was the best browser available. It was lighter weight, faster than Netscape, and had better web standards support. Mozilla, with its new Gecko engine, took a long time to mature, and was still fairly slow and bloated until Firefox (née Phoenix) came around. Remember, IE was where several features that now form the basis of the modern web came from. Heard of something called XMLHttpRequest? That came from IE.

The problem was that it was bad, in the ethics sense of the word.

IE was an attempt to aggressively eject the competition and kill the open web. When the web stubbornly refused to buy into IE-only technologies, it became Microsoft's dog in the manger, holding back the day that web apps made the OS irrelevant. It was good, technically, and then it was bad, technically, but it was always always evil.

Yep. <strikeout>HTML Standards</strikeout> <strikeout>webkit</strikeout> Chrome proposed standards.

We're doomed to repeat the same mistakes over and over again.

It's not the new IE, far from it.

You can run Chrome on Linux, Mac and Windows! And at least in theory you can have a go at trying to port the Chromium browser to other platforms, as well.

Wow, combine this with http://xkcdgraphs.com and you've got the ability to do a pretty good Randall Munroe impression!

except most people don't have his wit or intelligence, so prepare your filters!

Wit? Intelligence? The phrase you're searching for is "shameless pandering".

I thought the Randall Munro personality came from the writing. Stick figures are not the hard part.

but they are the seasoning.

Here's my problem.

It works, fairly well. But I spent about 15 minutes doing one panel, trying to figure out the minor nuances. I kept thinking to myself "I could do a whole comic in about 5 minutes in photoshop" as I adjusted the person's location, arm, speech, etc (and that was just modifying the characters that were already in the scene). In the end it was just not worth it in my mind.

Also, imagine creating something like Randalls "Click and Drag" comic (xkcd.com/1110/) -- how would you create all these custom objects in the editor without changing it into something similar to an HTML5 web-photoshop, at which point you might as well do that?

Yes, this a prototype and definitely not for everyone. It has many downsides. I agree Photoshop gives you full pixel control.

I think it has some upsides too. You may treat comix source as html code and apply tools we have for coding today, eg. diffs, version control, collaboration via github. People may also collaborate on library of items, actors and their poses, so you don't have to re-create them or copy&pase all the time. Also localisation will be a snap. And it will possibly allow animations in the future.

Actually I built this for a bigger project. I want to explain Bitcoin technically in the form of XKCD comix. This won't be one-off comix strip. This will be something like wiki/book which will evolve and I hope it will attract other contributors (not necessarily graphic designers).

I agree it has some great upsides. I love the idea of localization, and version control is nice to easily revert changes, etc. Having a scalable comic that can change text on the fly is something that I've been hoping for for a long time.

But I think you're strongest element is the WYSIWYG editor, as most people aren't going to be coding from only the HTML view (unless they know what pose="-11,9|-5,117|-11,99" will look like in their heads). But the WYSIWIG interface is still pretty anemic, meaning I'm going to run into roadblocks faster (such as -- how do I create something like a tree? How can I add a hat to the man?).

I want to provide a nice blend between visual editing and source code editing (I'm a developer). Poses and transformations should be edited visually, but scene structure should be edited by hand via the code. This way you get total control over document structure. Creating good visual-only editor would require too much work and maybe it is not possible at all. Do you know any successful FrontPage-style HTML editor? Quite frankly, I don't need it myself, so that is the primary reason, I'm probably not going to build it at this point.

Heads should be customizable in the future: https://github.com/darwin/cmx.js/blob/master/app/lib/cmx/ent...

Actually the system already supports attach points, so you can attach items to hands, foots and necks (right now the bubble is attached by default to a head bone).

The last generic piece which is missing will be <drawing> element. Right now it just allows you to specify lines. In the future it will enable you to insert any SVG which is convertible down to paths. I will just resample them and convert them into XKCD-style lines while keeping other styling. This will enable you to insert arbitrary SVG drawings in the scene. I won't create web-based photoshop for SVGs, I will let you import SVG created in other tools as long it is convertible to paths. Imagine it as embedding bitmap images into HTML files. This will be similar idea.

OP is missing the point - the markup idea is brilliant.

The WYSIWIG will come in it's million forms later and you shouldn't focus on it.

I just need comix.vim and I'm good.

I'm imagining real time comics. Chat comics. Comic discussion forums. It's endless! ;)

It'd be like MUDding but with pictures!

> Chat comics.

It'll be 1996 all over again: http://en.wikipedia.org/wiki/Microsoft_Comic_Chat

Damn, good memories of that, forgot what it was called!

> And it will possibly allow animations in the future.

That was my first thought when I saw the markup. Brilliant work!

I suspect you are not part of his target audience.

I like this, but it's difficult to use and I expect that only the WYSIWYG will be a success. (Drag some control points, like foots or knees.)

But on another hand, some things are more complicated that one expects. Can you really draw well enough? Can you share an example of a xkcd-style comic?

Perhaps a higher-level comic description language that generates the html markup? A bit like the way that LaTeX generates TeX. It could have predefined 'styles' for character appearance, body posture, gestures, etc. Also the ability to embed lower-level html markup in the higher level description.

Perhaps I need to get back to doing some actual work...

I think its brilliant. I love the balance you've created between the visual editor and the markup.

Have you considered this as an educational tool? This is a fun and useful introduction to HTML and markup languages in general.

Would it be possible to highlight the relevant markup node when you've selected an object in the visual editor? That would be neat from a learning perspective.

I love the scribbly cubic beziers you have going on for the speech bubbles. Moving around their control points makes them dance a little. Great stuff.

Reminds me of that part from Bret Victor's Inventing on Principle talk.

Those who have seen it will know what I'm referring to.

To go along with it, making XKCD diagrams in Mathematica: http://blog.wolfram.com/2012/10/05/automating-xkcd-diagrams-...

This is neat!

Unfortunately, the editor does not work for me. It makes Chrome crash the page :(

I'm running Chrome 24.0.1312.69 on one of those new Dell XPS 13 Ubuntu machines running 12.04.2 LTS. Is there any other information you'd want for debugging, or pages to try?

It's like http://yUML.me, but better :)

http://yuml.me/e5d8e14e

http://yuml.me/diagram/scruffy;/usecase/edit/[Bob]-(This%20i...

Aw, snap! Crashes chrome 24.0.1312.57 on Ubuntu 12.10. I tried opening the console to get additional info, but it doesn't show anything.

This is one of the coolest things about HN. There's a link there, and it crashes your browser. Instead of getting angry, you try to help the person whose creation crashed your browser.

Brilliant. But... now wait for a deluge of tenth-rate internet comics!

Good news. Comix Editor will work on Opera soon. And without my work :-)

http://my.opera.com/ODIN/blog/300-million-users-and-move-to-...

This is awesome! Okay,I agree with others that say that photoshop is easier, and that most people (ahem, like yours truly) would make crappy comics. But...c'mon...an xkcd editor?!?!?1!! hecka cool

The source shows quite clearly why the HTML community needs try to address the adoption of namespaces in HTML5 ASAP, maybe not in the current form but in some simplified form.

I feel uncomfortable with the use of non-namespaced tags and squatting on common terms. For example, cmx.io uses tags like <scene>, <label>, <drawing> and so on. I really would prefer it used something like <cmx:scene> or <c:scene>, so that it would be possible to mix CMX tags with other libraries that use similar tag names.

Bravo! How difficult was it making the characters posable?

It'd be cool if changes in visual editor would focus & highlight the changes in text and vice versa.

Great project - really easy to use and works well. As other comments have said there's tonnes of potential / additional functionality which could be added, but this is a great start.

For anyone interested, here's my play: http://cmx.io/#4949114

You made my day :)

It reminds me I have to build some feed with published comics :)

Thanks, you made mine too - it's rare that I can find a library which I can create something with within an hour of coming across it, and this is also my first contribution to the world of memes, so chuffed that I got to do it using such a great utility. Looking forward to seeing what you come up with next.

(code now updated to include animation)

Better idea, draw the comic by hand in 5 minutes (I think everyone can draw stick figures), photo it, desaturate and add high contrast in gimp, voila. No webkit required :)

This is fun, but for it be useful in production the control scheme would need to be made more GUI-like. Great start!

Why do I also get a Windows Media Player extension warning? Surely, JS + CSS doesn't need WMP help?

This is really neat. It would be cool to combine it with one of the JS-based presentation engines.

Yep, that was actually my original plan. I wanted to make slides explaining some Bitcoin concepts, but I wasn't able to draw a comics. This actually started as a small hack on top of impress.js :)

Hey K., do you remember? You interviewed me back in 2009 for a Bespin position :-) The world is pretty small. Hope you are doing well.

And now, someone should create an AI capable of mimicking XKCD humor, and viola! Automated xkcd!

Cool. Take it a step further and make it so we don't have to edit the HTML/CSS code.

Hey folks, thanks for all your great comments and watch out for v0.2 :)

Science not included.

Stick some IRC behind this and instant Comic Chat!

Well done! That's really impressive work.

This is awesome. Such a great idea!

This is great, nice work!

bootstrap is everywhere

This little comic I "created" some time ago is never going to be so relevant again so here it is [inmature humor ahead]: http://i.imgur.com/EnXc9e9.jpg

Any known issue with Chromium?

I just get an error message saying that the page script was taking too much memory and was stopped.

Same here (Version 24.0.1312.56 Ubuntu 12.10 (24.0.1312.56-0ubuntu0.12.10.3))

Marry me.

Reply on news.ycombinator.com