Introducing pixelJET: a live-coding IDE for HTML, CSS, and JavaScript

http://www.pixeljet.net/index.html

by jmitcheson • 14 years ago

22 22 14 years ago

jmitcheson10• 14 years ago

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!

josteink• 14 years ago

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?

jmitcheson10• 14 years ago

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!

nestlequ1k• 14 years ago

Agreed, is it possible to implement this as a hack ontop of the chrome's own dev tools? That all just implemented in html/css/js. Maybe you could override that.

Sounds super hard to me, but what you built looks super hard too :)

wiradikusuma• 14 years ago

If you use Firefox and any of these IDEs: (IntelliJ IDEA, RubyMine, PhpStorm, WebStorm, PyCharm), you can use CSS-X-Fire [1] to do precisely that (edit in browser, (optionally) reflect changes in IDE). Nevertheless it's a very good achievement for a JS-based app!

[1] http://code.google.com/p/css-x-fire

paulirish• 14 years ago

> 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

anigbrowl• 14 years ago

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

jmitcheson10• 14 years ago

Thanks!

Joe8Bit• 14 years ago

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?

jmitcheson10• 14 years ago

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.

lukeholder• 14 years ago

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.

jmitcheson10• 14 years ago

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.

patman81• 14 years ago

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

jmitcheson10• 14 years ago

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.

dannnnnnny• 14 years ago

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!

jmitcheson10• 14 years ago

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

jrajav• 14 years ago

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.

jmitcheson10• 14 years ago

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.

stdclass• 14 years ago

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

PhrosTT• 14 years ago

This is really cool.

Can you explain the hosting aspect?

Where do the files sit?

Introducing pixelJET: a live-coding IDE for HTML, CSS, and JavaScript

Related Stories