Introducing pixelJET: a live-coding IDE for HTML, CSS, and JavaScript | Hacker News Reader

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

pixeljet.net

22 pointsjmitcheson22 comments

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?

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.

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!

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

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.

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.

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.

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.

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?

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!

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 :)

That's a really good question, one that I spent a lot of time thinking about before I started. Basically the way that they deal with changes to the page is fundamentally not suited to persisting the changes back to text. It would take a lot of hacking :)

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

> 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

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.

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!

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

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.

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

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

Thanks!

This is really cool.

Can you explain the hosting aspect?

Where do the files sit?

Reply on news.ycombinator.com