

PixelJET - Dreamweaver meets Firebug, in JavaScript - jmitcheson
http://www.thepixeljet.com/preview/

======
jat850
Briefly playing with it, I only had the minor-est of nitpicks, and I don't
suspect other users would necessarily react the same way as I did.

When I began live-editing the CSS, the semicolons disappear as you start
editing the text, then automatically re-appear after you stop editing the
text. I found myself adding a semi-colon automatically, and that led to 2
semi-colons. Not harmful, but certainly weird.

It might be useful if either the edit box included the semi-colon, or a semi-
colon remained visible but not editable, at the end of the edit field.

Good luck with this product!

~~~
jmitcheson
Hey thanks for letting me know, yeah that's a bug. What browser were you
using?

~~~
jat850
Chrome 10.0.648.133 on Linux.

------
bgrins
I have thought about the two window browser IDE before and am glad you
implemented that idea, I think it could be really useful for quick HTML/CSS
comps.

Two small suggestions:

* When in the two window mode, make ctrl+s do an instant refresh on the preview, and preventDefault on the event so that it doesn't open up the browser save window. I save constantly out of habit, so that gets distracting.

* For the 'inspect element' control: Don't use borders on the active element, because it causes the layout to jump around and if you already have a border applied to an element, it wipes it out. The easiest way to fix this would be to use 'outline' instead - and if you apply it with a class instead of inline styles, it will not wipe out existing outlines after leaving (as it does with borders now). If you really want to make it work to not replace existing outlines, see the 'Firebug.Inspector.BoxModelHighlighter' in [http://code.google.com/p/fbug/source/browse/branches/firebug...](http://code.google.com/p/fbug/source/browse/branches/firebug1.8/content/firebug/html/inspector.js) for an implementation that uses completely different elements instead of changing the style of the active element.

~~~
jmitcheson
Awesome tips, thank you. I never considered the control + s thing but it's a
good point.. control + s is used in the main window but it's not picked up in
the code editor.

Also I did write some code to restore the previous border style at one point
but I must have regressed it. Using outline + a class is miles better though,
will put that on the list - cheers.

------
jmitcheson
Dear HN:

Please try out editing code in a separate window. It's really cool! We hotswap
your code changes live into the document - no more swapping windows, recoding,
then saving / refreshing. See the "code" tab on the demo for more info.

Code changes also sync up with the debugging tool. Why not check this out too
- if you add a css style, it will appear in code. And if you alter a css style
in code, it will update the debugging tool.

------
micheljansen
One word on your landing page: I initially clicked on through to the demo,
tried some things, ended up a little underwhelmed and then only came back
because of all the positive comments here on HN.

A few highlights on what PixelJET can do (such as editing code in a separate
window and see the changes live) would have made me stick around in the first
place.

Your product is awesome, but your presentation could use some work :)

~~~
jmitcheson
Well thanks for going back to it! It does say exactly what you said in the
third paragraph of the preview page, though. (code editing and live changes).
It was supposed to be the 'hook point'. My copy writing isn't really that
great, it seems :)

I was trying to make it short enough so people wouldn't be bored, but detailed
enough that they would want to see the features in action.

------
tambourine_man
Very impressive. The source window should be launched by default, as that's
the killer feature.

I think we all know that inspector/firebug + code environment is the way to
go. We all want that. Copy&pasting sucks.

Now, since we can compile everything down to javascript this days, maybe the
source window could run Vim. One can dream.

A real WYSIWYG would be the second step: Insert element -> content. Drag and
drop positioning and nesting. Edit CSS properties.

------
Meai
Each word on that landing page is inside a separate canvas tag? Why?

Anyway: Autoscrolling vertically doesn't work in the sourceview, FF4, Fedora
15.

The features are confusing. It says I can move the design around by clicking
'pixel-perfect', but it doesn't actually move, and it only ever moves the
whole thing, not for example just the box.

It would be neat if the stuff I select visually on the webpage gets optionally
selected inside the codewindow aswell.

Of course, you really really need a search feature for the html window, auto
expanding whatever nodes are found.

Also, color wheels for all the CSS properties would be nice. Also,
suggestions, you could make a dropdown box next to each css property that lets
a user quickly switch between all possible variations. Like

top: 200px; [x] <\- clicking here opens a popup with 'bottom', 'left' etc. On
mouse hover, you see the realtime change.

You really need a few IDE features like search+replace and vertical selections
for your code windows.

You need a javascript debugger.

~~~
jmitcheson
Hi,

Thanks for the feedback

Can you elaborate on the design overlay not moving around? The whole thing
should basically be able to be moved around while the page stays static. If
it's doing that, then it's working correctly. It's a little unpolished to use
in the demo, but basically the workflow is that you select the box, then move
the overlay so you can see the error, then line up the box with left / top.

The landing page uses Cufon for font replacement which in turn uses the
canvas. I like the way it renders the font but maybe it's impractical..

Also the page has overflow:hidden on the body. The editor behaves weirdly
sometimes with scrolling so it's disabled for now but will support scrolling
in the release.

All the other features are great suggestions, i'll make sure they are all in
the release too - re: the Javascript debugger.. I wondered about this one.
Most browsers have them already so I wasn't sure. I'm still on the fence

~~~
Meai
I probably misunderstood the 'pixelperfect' feature. I thought I could move
css elements around in a visual drag&drop style to position them at absolute
values. I think what you built, is an overlay of a static image to check for
errors.

The font with Cufon looked pretty blurry to me, for some subconscious reason I
also like to select text while reading. It's less passive, and when I can't do
that, I get annoyed. But I see, you already changed it :) Another thing: I
mostly just scan until I find the "demo" button, unfortunately yours was hard
to find because it has almost the exact look like the surrounding text. I know
you want us to read the rest too, but that's just not an investment people are
going to make unless they already like/see your idea.

In the same spirit, I would make some kind of screenshot walkthrough of your
killer features. Your live-editing feature is pretty cool, but in the end it's
a tiny button people have to click, and then they have to edit something on
the same page, and then they have to pay attention so they see that the thing
actually changed. I myself first thought it was broken, instead I simply
wasn't in the correct tab, so I didn't see what changed! I imagine a common
mistake which can be easily fixed by doing a single page layout of your page.

I think you have a good idea, but it's a lot more work than one would imagine.
You say it yourself: You are competing with Dreamweaver, so you'll need some
kind of code intellisense too. <http://cloud9ide.com/> could probably
implement something like a liveview pretty easily, so that's where you are
competing aswell. I wish you the best of luck :)

------
tnorthcutt
Cufon, really?

Your twitter profile is obnoxiously hard to find. Why don't you just link to
it from your site? Same for Facebook. Or at least include the actual Twitter
profile name (thepixeljet, not pixeljet), and use real text (instead of cufon)
so that a visitor can copy/paste it.

~~~
jmitcheson
Hi,

It is linked.. but not underlined so it's not obvious. I might just ditch
Cufon though..

------
gootik
Impressive product!

Only suggestion I have is that in the edit window I press CTRL+S instinctively
to save my work, this brings up Firefox's page save window and takes a while
to load, if you can bypass this it would be awesome.

------
dquigley
Anyone else notice that their logo is extremely similiar to Delicious' logo.

PixelJET - <http://public5010.thepixeljet.com/demo/buttons.png>

Delicious - <http://l.yimg.com/hr/15213726/img/delicious.48px.gif>

Looks like a cool service though. I'm not trying to knock the idea at all, I
just couldn't help but notice the similarities.

~~~
jmitcheson
Yeah we noticed that about half way through. Logo is being changed for the
release :)

------
wccrawford
That demo is AWESOME!

The ability to have the source code on a second monitor and have updates
happen in realtime is amazing.

~~~
jmitcheson
Hey thanks :) That part took a lot of hard work. I thought it was time that a
web ide could match exactly what we're used to on the desktop

------
Produce
Live code changes... so what? Two screen editing... again, so what? I can
replicate this behavior by having an editor on one screen and a browser in the
other, make changes, hit F5. Not to mention the huge amount of features you
lose by using a toy editor. Have you all been drinking too much coffee?

~~~
jmitcheson
People doing HTML/CSS development all day get very tired of doing that,
though. There is also no synchronization with your debugging tool. We make all
of that painless. Plus, the code editor isn't a toy. It's called Ace - backed
by Mozilla and team of others that aims to be on par or better with desktop
tools. <http://ace.ajax.org/>. The demo is just a bit basic on the features it
uses is all. MVP. Thanks for the thoughts though

------
cpr
Could we see a screencast?

~~~
jmitcheson
I don't have one handy but I can whip one up a bit later - anyone know of some
good free software? Needs to capture 2 monitors.

~~~
bbarthel
For windows boxes, I like CamStudio [1]. The latest version lists dual monitor
support but I don't know how well that particular bit works (the forums list a
couple of issues).

[1] <http://camstudio.org>

~~~
jmitcheson
Thanks, I'll check it out

------
iambot
one thing that bugged me, (i use firebug Alot) is that when i used the inspect
tool to select an element on the page, it didn't navigate to that part in the
DOM view in the bottom panel, and I couldn't edit html int he bottom panel i
had to navigate away before editing html

but its looking good so far, good luck

------
grillz
Looks like a great tool. Pixel Perfect will come in very handy.

Some thoughts: \- In FF 3.6 the inspector doesn't work at all - maybe you need
an "About" tab with supported browsers etc.

\- <http://www.thepixeljet.com/preview/> needs a twitter link. I was about to
follow @pixeljet instead of @thepixeljet

