
Introducing pixelJET: a live-coding IDE for HTML, CSS, and JavaScript - jmitcheson
http://www.pixeljet.net/index.html
======
Joe8Bit
I'm curious about the intended audience for this product: people working
professionally in this area are likely to have a predefined workflow that's
going to be difficult to fit this into be that: it's 'just not VIM'; it being
outside of version control and/or build systems; or any number of other
reasons (both with objective and subjective merit).

Is the audience not these professional people? Is it aimed more at the
shallower end of the learning curve?

~~~
jmitcheson
That's something we're still trying to work out ourselves. As for
professionals, the aim is to replicate a certain existing workflow, but move
it to the web. That workflow is design file > HTML template > ??? (cms
template, etc.)

A lot of people just use a text editor, their browser and firebug, so we want
to serve those people but with a much faster and streamlined experience.

------
dannnnnnny
One small issue with the site, that may improve your uptake: The slider moves
pretty fast and there is a lot of text to read on each slide. If you could
include a pause button on the slider, or even do away with it completely it
would probably improve the useability of the site. Looks like a great tool,
good luck with it!

~~~
jmitcheson
Thanks, we'll increase the timeout. Clicking a menu item on the slider will
stop it from moving :)

------
jrajav
I'm curious what value this really offers over existing suites like
Dreamweaver and Coda that already offer live preview and site integration. On
the flip side, it also doesn't seem to appeal to the vanilla crowd that
prefers vim + some file-watching reloader or CI tool.

Not to say it doesn't look neat, I'm just honestly having trouble finding the
differentiating factor.

~~~
jmitcheson
It might not sound like much, but the differentiating factor is pretty much
that it's all inside the browser. You get a professional live coding setup,
and instant hosting environment, and all you need is a browser. You can access
it anywhere; don't need to set anything up to use it; and it's the same setup
on any computer or device you happen to be using.

Right now, web development is carried out with an array of disparate tools
which vaguely connect to each other, if at all, plus you have to know how to
set them up. pixelJET is not trying do anything new, or anything that can't be
done by some existing combination of tools, but it brings them all together in
an easy to use package, available anywhere in the world, on any browser.

------
lukeholder
Great effort put into this but if you going to be editing source code, do it
in your text editor. If you want a 'live' view of your changes use something
like <http://livereload.com/>

livereload doesn't just refresh the page, it also updates css/js on the fly
also through ajax without any lag.

~~~
jmitcheson
Thanks. We have a text editor though; not sure if you saw it. If can operate
from a separate window, and it hotswaps all the HTML/CSS/JavaScript you code,
without any lag.

Our code editor is actually the open source "Ace editor"
(<http://ace.ajax.org>).

Of course, not everybody wants to code inside their browser, and that's fine.
For those that do, we aim to make pixelJET the best way to do that.

------
josteink
Technically speaking: Very very cool and impressive. Especially the real-time
editing.

On the flip side, it is styled very much to mimic Chrome's own editor. And
that makes me wonder. When or why would I use this over what is already built
into Chrome?

~~~
jmitcheson
Hi, thanks for the comment about the editing. The main problem this solves is
that the Chrome Dev Tools/Firebug don't save your changes back to your source
code. For people who do alot of front end development, they code some
adjustments (sometimes many at once) but then have to 'recode' those
adjustments in their css file. This is error prone and slow, and sometimes
this has to be done dozens of times per day!

~~~
paulirish
> the Chrome Dev Tools/Firebug don't save your changes back to your source
> code

Actually the Chrome DevTools can save your changes back to disk! It's not well
known, and its fairly new so I don't blame ya.

Here's how it works: (1) make changes to styles as you do (2) you can click
through to the Sources pane and live-edit styles there, just like a text
editor. (3) Right click and save to disk. choose where to save the file (4)
Make some more changes (5) Just hit ctrl-s (or cmd-s) to immediately save back
to disk in the same location.

I just made a screencast to show this in action:
<http://www.youtube.com/watch?v=Qy5obNItQiQ>

~~~
jmitcheson
Wow, _the_ paul irish! Hi...

That's totally right and it's a very cool feature, although that will only
help you if you are using Chrome. One of the things I wanted was for the
product to work on any browser, and without any plugins.

------
jmitcheson
Hi, I'm the developer/founder. Please ask me anything you like about the
application. NB: I'm in Melbourne, Australia, so I'll likely be offline in
about 5-6 hours!

------
patman81
Does the code editor support iOS? I love to use pixelJET on my iPad for quick
changes.

~~~
jmitcheson
That's definitely the sort of vision we have for the product.

Full iPad support is not ready yet but should be coming soon.

A bug is currently preventing the code editor from loading on the iPad
browser. Quickfire (the panel down the bottom, that replaces the browser
debugger) will load fine, but the interface is slightly awkward to use because
it is not touch optimised yet.

------
stdclass
you can use <https://addons.mozilla.org/en-US/firefox/addon/firefile/> instead

------
anigbrowl
I like this a lot. Feels as smooth as github.

~~~
jmitcheson
Thanks!

------
PhrosTT
This is really cool.

Can you explain the hosting aspect?

Where do the files sit?

