Hacker News new | ask | show | jobs
by the8472 3978 days ago
> * better editors for HTML/CSS, maybe even some decent WYSIWYG

Editors? How about an IDE.

In the java environment I can manage an application container, profiler, debugger, compiler, packager, test suite all from one application.

Also included: near-omniscient auto-complete, hot-code replace, incremental building, dependency fetching, visual version control, automatic refactoring, deployment and many other conveniences I'm taking for granted. Hell, I could even file tickets from my IDE if I wanted to.

5 comments

WebStorm (https://www.jetbrains.com/webstorm/). Or if you use other languages as well, check out any of Jetbrains' IDEs: https://www.jetbrains.com/

I haven't found a better IDE for any language yet.

I think that WebStorm is decent JavaScript IDE but if we 're talking about editing HTML/CSS/Sass, WebStorm is not any better than plethora of other text editors.

IMO basic problem lies in fact that we're still trying to edit hierarchical tree structures of HTML and CSS/SCSS as a plain text instead of editing underlying tree structure.

I think that good HTML/CSS editor should operate on tree and every CSS rule and every property should be object rather than plain text. That would allow to more natural editing and faster code modification/refactoring (I am frontend developer but I hate writing CSS/HTML by hand. It feels like using punch cards... Better editor could allow to do things faster and more effective).

I was looking for structural (and projectional) editor for HTML/CSS and didn't find any. So I started making my own (here is prototype: https://www.youtube.com/watch?v=yRwx09bAT08 )

I agree with edwinnathaniel, IntelliJ with its browser JavaScript debugging plugins is pretty awesome and I find it a fantastic JavaScript IDE.

I am curious what use cases you have for editing in the fashion of your demo video? I don't find myself frequently wanting to view just fonts in a css file. I either have specific rules I want to edit, or I pull up reused fonts and colours into re-used classes (or less variables) and just edit that one spot.

Why would you want to view just colours? Or just fonts? BTW, I am not trying to put down your idea, infact I think it's very interesting concept to work more closely with the tree structures.

Edit: as I think about the idea, it would be awesome if I could click on any html element in a file and it would be able to statically analyze and show all applicable css selectors. Although I frequently use angular and dynamically applied css classes.

> or I pull up reused fonts and colours into re-used classes (or less > variables) and just edit that one spot.

good editor could pull up reused fonts and colours automatically (detecting if they the same in various nodes).

> I either have specific rules I want to edit

Yes, I'm also making possibility of filtering by specific rules and finding by CSS selector (in HTML also)

And different filters are just a part of the editor. Actually, my first idea was creating something that would allow to make quick changes that are super easy when operating on tree, but you must do them by hand in text editors (e.g. operations like "move to parent", "wrap this HTML element in new `div` element etc.).

I also want editor to be operable without keyboard/mouse switching. And because when I make websites I often use mouse to test in browser all functions, I want good mouse support and be able to change e.g. top from 0px to 10px using only mouse. This is possible in e.g. DevTools, why not to put this feature in editor?

> Edit: as I think about the idea, it would be awesome if I could click on

> any html element in a file and it would be able to statically analyze and

> show all applicable css selectors.

Yes. It would be nice, although I didn't solve this from technical perspective yet.

But for now I think about something like in Brackets - you edit HTML and could edit styles in place without switching to the other file.

These are some great ideas. There are little features in DevTools that I wish my IDE had (or I am not aware of the features if they do).

Be sure to post anything awesome you create to HN!

I'll do :) As soon as my editor is advanced enough to show.
Decent JS IDE?

It's the best one I've tried out there. Literally. No other text-editor-with-plugins (VIM, Emacs, Sublime, Atom) or IDEs come anywhere close.

Webstorm on OSX actually became more of a burden to use as my projects grew large. Excessive memory usage and crashing forced me to dump it in favor of Sublime Text. It's version history saved my butt a few times, but it was nothing that better Git habits couldn't solve.
WebStorm is pretty good already imo.
Some of those features are only possible because Java is statically typed. They couldnt exist in the same way for "pure" JavaScript.
But they can exist in a statically typed extension to javascript. See typescript in Visual Studio.
I've been playing with Typescript in both Visual Studio and Visual Studio Code and Intellisense is great.
Facebook is doing something that enables better IDE support for JS, so static typing isn't absolutely required, it just makes it a lot easier. I forgot the projects name though, the IDE part was also not open sourced back then.
Their optional typing for JS is called Flow, and they've open sourced an IDE of sorts (a suite of Atom plugins) called Nuclide (http://nuclide.io/).
That was the one, thanks.
I have never seen anyone successfully bolt type-checking onto an existing language. It is always painful to use. It usually requires ugly added syntax and you need a special compiler if the language isn't flexible enough.

Why not just use a different language altogether? One that was designed with static type checking from the ground up?

Maybe Facebook likes the pain, they also pushed PHP further than anyone else was willing to. Burning insane amounts of resources with a somewhat disappointing result.

Give Visual Studio a try (particularly v2015). It's pretty good at auto-complete at the very least. And you could still file tickets from it as well.
An IDE is not a fundamentally different thing from an editor, and certainly not a superior one.