49 ms·

Genuine question: Is there a big advantage using an editor designed for HTML/CSS/JS? I do all my web work using straight Vim, but maybe I'm being a luddite...

Genuine question: Is there a big advantage using an editor designed for HTML/CSS/JS? I do all my web work using straight Vim, but maybe I'm being a luddite... What am I missing out on?

pekk 13y ago
Live preview would be one big thing.
bgar 13y ago
What doing web-dev is just edit in vim using Syntastic[1], and a couple other[2][3] useful plugins. 1: https://github.com/scrooloose/syntastic.git https://github.com/scrooloose/syntastic.git 2: https://github.com/pangloss/vim-javascript.git https://github.com/pangloss/vim-javascript.git 3: https://github.com/digitaltoad/vim-jade https://github.com/digitaltoad/vim-jade
- deleted 13y ago
  [deleted]
smrtinsert 13y ago
There was a vid floating around where you could edit the js and the browser could see the changes without a browser refresh. They were interacting with the code in realtime via the browser api. Great stuff. I wish LT had more workflow vids as it tries hard to know hard to be a next gen editor it can be a little difficult to find the cool features.
- RBerenguel 13y ago
  There's an emacs mode for that: https://github.com/skeeto/impatient-mode https://github.com/skeeto/impatient-mode
- tikhonj 13y ago
  Here's a video of just that[1]! Except in Emacs instead of LightTable. Emacs is like a somewhat crufty version of LightTable that's also a few decades older :D. "Some assembly required." [1]: http://emacsrocks.com/e11.html http://emacsrocks.com/e11.html
- Bogdanp 13y ago
  Shameless plug: that's also possible in VIM with [1]. [1]: https://github.com/Bogdanp/browser-connect.vim https://github.com/Bogdanp/browser-connect.vim
  - aidos 13y ago
    Cool! Are you using remote debugging for that? I wrote one recently that watches the file system for changes and keeps it in sync with chrome. It's really useful because you can change your js without reloading or losing existing objects. I have an angular project that takes a long time to go through the refresh cycle so it's a life saver on there. Also, because it just runs on the file system events it's text editor unaware. https://github.com/aidos/chromesync https://github.com/aidos/chromesync
- paultannenbaum 13y ago
  One more to add to the list: http://livereload.com/ http://livereload.com/
- jamii 13y ago
  From what I can see, all of the sibling links just eval javascript. I believe LT goes one step further and uses the jit to replace code, so that even closures (eg event handlers attached to the dom) are updated to use the new code.
  - ibdknox 13y ago
    That's correct! We're not just doing window.eval(yourCode)
logn 13y ago
In my experience vim is pretty good for JS/DOM development. Most IDEs out there targeting those stacks can't actually do much since JS is too difficult to do good code completion on. Aptana and WebStorm try their best to be good IDEs for this. I prefer LT over those. But really, I can't say you're missing out on much by using vim (and in fact are maybe on a better path). Compare this to Java where I'd think you're really cheating yourself by not using an IDE.
- pjmlp 13y ago
  Netbeans gives me live feedback of JsLint, the code completion engine is quite good, type inference, refactoring, popups with information from JsDoc, outline navigation with inference from most AMD patterns. CSS editing allows me to see the styles graphically. HTML editing allows for easy navigation between CSS, JavaScript and HTML elements on the page. The current beta version allows for 2 way editing between IDE and browser (chrome). Can I do all of this in vim?
  - johncoltrane 13y ago
    Why would you use a text editor if you need IDE features?
    - pjmlp 13y ago
      Because OP was suggesting a 70's development style, hence my remarks.
      - logn 13y ago
        Yep. But in my experience, developing JS and HTML in Netbeans feels like 70s style development. After using Eclipse (or Netbeans) for Java development, I find JavaScript development never is that great in IDEs. Maybe they've optimized certain use cases of JS auto-completion and type inference, but for me it always feels like the IDE is just an editor, and a lousy one at that, compared to vim.
vinceguidry 13y ago
Forget the editor, what I'd like is a browser that reloaded the DOM every time it saw that a source file change.
- paultannenbaum 13y ago
  You can do this with livereload: http://livereload.com/ http://livereload.com/ Grunt has a live reload plugin that is fairly easy to set up
  - aidos 13y ago
    I'm not sure that's really how it works though, right? It does an actual refresh of the page which is no good if you have lots of state. See my comment about (my) chromesymc above. https://github.com/aidos/chromesync https://github.com/aidos/chromesync
paultannenbaum 13y ago
Webstorm by Jetbrains has some really nice features if you are doing a lot of JS development. It is an IDE, but if you are ok with that it is quite good IMO

Genuine question: Is there a big advantage using an editor designed for HTML/CSS/JS? I do all my web work using straight Vim, but maybe I'm being a luddite... What am I missing out on?

pekk 13y ago

Live preview would be one big thing.

bgar 13y ago

What doing web-dev is just edit in vim using Syntastic[1], and a couple other[2][3] useful plugins. 1: https://github.com/scrooloose/syntastic.git https://github.com/scrooloose/syntastic.git 2: https://github.com/pangloss/vim-javascript.git https://github.com/pangloss/vim-javascript.git 3: https://github.com/digitaltoad/vim-jade https://github.com/digitaltoad/vim-jade

deleted 13y ago
[deleted]

smrtinsert 13y ago

There was a vid floating around where you could edit the js and the browser could see the changes without a browser refresh. They were interacting with the code in realtime via the browser api. Great stuff. I wish LT had more workflow vids as it tries hard to know hard to be a next gen editor it can be a little difficult to find the cool features.

RBerenguel 13y ago
There's an emacs mode for that: https://github.com/skeeto/impatient-mode https://github.com/skeeto/impatient-mode
tikhonj 13y ago
Here's a video of just that[1]! Except in Emacs instead of LightTable. Emacs is like a somewhat crufty version of LightTable that's also a few decades older :D. "Some assembly required." [1]: http://emacsrocks.com/e11.html http://emacsrocks.com/e11.html
Bogdanp 13y ago
Shameless plug: that's also possible in VIM with [1]. [1]: https://github.com/Bogdanp/browser-connect.vim https://github.com/Bogdanp/browser-connect.vim
- aidos 13y ago
  Cool! Are you using remote debugging for that? I wrote one recently that watches the file system for changes and keeps it in sync with chrome. It's really useful because you can change your js without reloading or losing existing objects. I have an angular project that takes a long time to go through the refresh cycle so it's a life saver on there. Also, because it just runs on the file system events it's text editor unaware. https://github.com/aidos/chromesync https://github.com/aidos/chromesync
paultannenbaum 13y ago
One more to add to the list: http://livereload.com/ http://livereload.com/
jamii 13y ago
From what I can see, all of the sibling links just eval javascript. I believe LT goes one step further and uses the jit to replace code, so that even closures (eg event handlers attached to the dom) are updated to use the new code.
- ibdknox 13y ago
  That's correct! We're not just doing window.eval(yourCode)

logn 13y ago

In my experience vim is pretty good for JS/DOM development. Most IDEs out there targeting those stacks can't actually do much since JS is too difficult to do good code completion on. Aptana and WebStorm try their best to be good IDEs for this. I prefer LT over those. But really, I can't say you're missing out on much by using vim (and in fact are maybe on a better path). Compare this to Java where I'd think you're really cheating yourself by not using an IDE.

pjmlp 13y ago
Netbeans gives me live feedback of JsLint, the code completion engine is quite good, type inference, refactoring, popups with information from JsDoc, outline navigation with inference from most AMD patterns. CSS editing allows me to see the styles graphically. HTML editing allows for easy navigation between CSS, JavaScript and HTML elements on the page. The current beta version allows for 2 way editing between IDE and browser (chrome). Can I do all of this in vim?
- johncoltrane 13y ago
  Why would you use a text editor if you need IDE features?
  - pjmlp 13y ago
    Because OP was suggesting a 70's development style, hence my remarks.
    - logn 13y ago
      Yep. But in my experience, developing JS and HTML in Netbeans feels like 70s style development. After using Eclipse (or Netbeans) for Java development, I find JavaScript development never is that great in IDEs. Maybe they've optimized certain use cases of JS auto-completion and type inference, but for me it always feels like the IDE is just an editor, and a lousy one at that, compared to vim.

vinceguidry 13y ago

Forget the editor, what I'd like is a browser that reloaded the DOM every time it saw that a source file change.

paultannenbaum 13y ago
You can do this with livereload: http://livereload.com/ http://livereload.com/ Grunt has a live reload plugin that is fairly easy to set up
- aidos 13y ago
  I'm not sure that's really how it works though, right? It does an actual refresh of the page which is no good if you have lots of state. See my comment about (my) chromesymc above. https://github.com/aidos/chromesync https://github.com/aidos/chromesync

paultannenbaum 13y ago

Webstorm by Jetbrains has some really nice features if you are doing a lot of JS development. It is an IDE, but if you are ok with that it is quite good IMO