PixelJET - Dreamweaver meets Firebug, in JavaScript | Hacker News Reader

PixelJET - Dreamweaver meets Firebug, in JavaScript

thepixeljet.com

36 pointsjmitcheson29 comments

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!

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

Chrome 10.0.648.133 on Linux.

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... for an implementation that uses completely different elements instead of changing the style of the active element.

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.

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.

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

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.

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.

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.

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

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

"Onion skinning" is a more widely used term for your "Pixel Perfect" feature.

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.

Hi,

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

Wow! so many anti-Coufon:)

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.

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.

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

That demo is AWESOME!

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

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

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?

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

Could we see a screencast?

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.

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

Thanks, I'll check it out

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

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

Reply on news.ycombinator.com