Hacker News Reader

Comment by boubiyeah | Hacker News Reader

Some quick rants.

CSS is almost as bad as PHP when it comes to naming. Most flex related properties are prefixed with flex-; but some aren't (align-items, etc) so you now have tons of non prefixed properties that actually only work within a very specific context (vertical-align, etc) and there are no compilers to tell you which combinations don't make sense or whether you have redundant properties.

IE11 has tons of bugs with flexbox; I had to remove a flexbox layout earlier because of that crappy browser (it ignores explicit/inline width/height set on flex children).

Otherwise it's a great tool if used sparingly (heavily nested flexbox elements with lots of special properties start to become a bit hard to follow)

View on HN

I was using VS Code earlier today and used vertical-align in some case where it didn’t make sense and VS called it out. Such things do exist!

But I agree with your points. Despite its flaws, it is probably the best thing out there for creating visual layouts from code.

Webstorm is absolutely incredible. Everyone should try it. Seriously, `cd your-app && brew cask install webstorm && webstorm .`

Best IDE ever. Better than emacs. And I've loved emacs for a couple years, and Vim for 10 years before that. Webstorm even comes with a Vim plugin.

IntelliJ is really rocking it. Webstorm for webdev, Cursive for clojure (https://cursive-ide.com/), PyCharm for python (https://www.jetbrains.com/pycharm/)... every one of those IDEs feels amazing out of the box.

It sounds dumb, but just try it. You'll get hooked on Webstorm and never want to go back. Example: press shift twice. It pops up a "Search Everywhere" box, and you can type filenames, symbol names, actions (Rename, etc)... it's basically helm M-x, but way better.

You won't ever feel like "CSS names are bad!" because you won't ever need to remember anything. Want to center something? Just type "align" and usually webstorm pops up autocomplete with the right thing. And that's true in every context: https://i.imgur.com/jCAAesF.png

All of these IDEs are specializations of IntelliJ IDEA (https://www.jetbrains.com/idea/download/#section=mac). They specialize it for web and call it WebStorm, for Python and call it PyCharm, etc. But all the plugins and settings work in all the IDEs, so really the underlying awesomeness is IDEA.

At this point I trust IDEA enough to know that if I open any codebase, I can start navigating it right away. Doesn't matter if it's C++, ocaml, or VueJS. Typing shift-shift will always let me jump to definitions.

Yeah it costs money, but $13/mo is super reasonble. Dropbox was similarly impactful on my life, and that was $10/mo.

It also has 6000+ unresolved issues reported, a lot of them open for 3-4 years with little hope of getting fixed. They keep rolling out half-baked support for the trendiest new JS frameworks, while basic parts of the IDE are falling apart every day. (For example, when opening the mentioned "Search Everywhere" dialog, sometimes it just doesn't receive focus. Good luck with that productivity.)

Meanwhile, after launch, the IDE grabs focus about six times while loading. Symbol navigation sometimes picks up random unrelated functions from ignored folders instead of the one sitting right beside the file, because it has the same name. Want autocomplete for that vertical-align's value? It just throws up every possible value for any CSS property.

Pretty bad when code editors running in a browser engine are getting more usable than your paid product.

Yeah, the unresolved bug reports are pretty annoying. I ran into similar problems trying to get Live Edit working with AngularJS.

Symbol navigation sometimes picks up random unrelated functions from ignored folders instead of the one sitting right beside the file, because it has the same name.

Even after excluding a directory? If you have autogenerated build folders (e.g. dist/, out/, etc) you have to mark them as Excluded: https://i.imgur.com/E2uXJzu.png

Odd. I haven't noticed that, but I'll watch out for it.

This usually happens from node_modules, marked as a library folder, so it's indexed and might even be relevant, but it shouldn't really be a better match than the one in the source. And it's not even consistent.

Hope they'll get their shit together, it used to be a pretty great IDE before these annoyances started piling up.

Ah yeah, I've always excluded node_modules. That's true though, it should probably be indexed.

I like Webstorm, it's my primary dev environment.

But I can not praise its abilities as you do. My experience has been mixed. Sure it's cool when it works well, but then its bugs are all the more painful. You expect intelligence and you get the opposite.

Take this bug I reported two years ago: https://youtrack.jetbrains.com/issue/WEB-19183

It thinks "y" is a global if I put "x.y = ..." anywhere in my code. Genius!

Also, It's lacking in its support for Vue Js. I get lots of red squiggles all over my code for perfectly valid Vue props, and PostCSS within single-page Vue component also is weak (no $variables support).

Hmm, FWIW Vue is my primary stack and I haven't run into similar issues. Try this:

git clone https://github.com/vuejs/vue-hackernews-2.0 && cd vue-hack* && yarn && webstorm .

shift-shift "Item" should show https://i.imgur.com/AV1bbXG.png

And `this.$store.` should show the proper completions:

https://imgur.com/a/pjcNs

It's possible that I've been getting along without the features that some other editor provides. Does VSCode have better Vue integration?

VSCode is indeed awesome for Vue. It supports pretty much any lang in any block properly, due to its support for embedded language contexts. If you have template lang="pug" and pug grammar plugin, it just picks it up. Also Vetur extension adds a lot of autocompletes and typescript support.

My problem is more with CSS and template support.

Here is Webstorm complaining about in a legit Vue v-for statement in a .vue single-page component.

And second image is what it does when I try to use PostCSS variables.

https://imgur.com/a/BNAa8

Aha! I see. Do you happen to have a repo I can clone to reproduce the problem? I'm interested in fixing that.

Vue's tooling is context aware. It knows when you're within a <style scoped> tag. I see that there's a PostCSS plugin: https://i.imgur.com/JTPlIEk.png

Theoretically, the tooling should be able to use that plugin's lexer rules. PostCSS already registers itself as a language (pcss) so Vue's tooling logic should be: "are we within a <style scoped> tag? search for PostCSS tooling; if if none found, use vanilla CSS."

It already does this for <style lang="scss">, so postcss should definitely work. The logic happens in https://github.com/JetBrains/intellij-plugins/tree/master/vu... if you want to explore it.

Yes I am using this PostCSS plugin: https://plugins.jetbrains.com/plugin/8578-postcss-support

But it's flawed. PostCSS is itself a host for plugins. So a WebStorm PostCSS plugin would need to allow user to select the PostCSS plugins that they are using.

Case in point: I use postcss-simple-vars but the WebStorm plugin assumes I use postcss-custom-properties. And so it fails me.

> Do you happen to have a repo I can clone to reproduce the problem? I'm interested in fixing that.

Yeah for a repro you just just need to do this: https://imgur.com/a/N2S2r

And you can see the warning when you hover over choices in the second image.

Very strange. This code is supposed to handle that: https://github.com/JetBrains/intellij-plugins/blob/f1b45bf1b...

I'll try repro'ing it.

Thanks, I appreciate your help.

It's gonna be a little while before I can scrape together the time to look at this. This week is gonna be a doozy. Sorry.

I think we should open a ticket in the appropriate place though. There's a good chance that a plugin maintainer can look into this and fix it quickly. It's such a clear example of brokenness, and should be pretty easy to fix.

I'm not quite sure where to raise the issue though. And I'm falling asleep, so that's all for now.

There are a bunch of bugs in their tracker for vue:

https://youtrack.jetbrains.com/issues/WEB?q=vue

So I figure it'll get fixed some day... probably after I move to another framework.

>a "Search Everywhere" box, and you can type filenames, symbol names, actions

>Just type "align" and usually webstorm pops up autocomplete with the right thing

VS Code does both of these things, and is FOSS

Here's a more persuasive demo: https://news.ycombinator.com/item?id=15514285

https://imgur.com/z2euynI

https://imgur.com/vb4uDMw

https://imgur.com/4Xv4BMb

It's not so much that it has X feature or Y widget, but rather that the whole ecosystem feels cohesive. With emacs you sort of cobble together your configurations until you're happy with it, and that's very powerful -- it's why it's so successful. But there's something to be said for having "awesomeness out of the box". It's why Spacemacs was so popular.

I hear you about FOSS. I was reeeeally hesitant to throw my time into yet another closed source clusterfuck. I grew up as a gamedev, and back in 2000 that meant you had to use Visual Studio. All of my VS skills are now completely obsolete. And whenever I ran into VS issues, I couldn't debug it since it was closed source.

Two things convinced me IDEA is probably worthwhile:

1. They're partially open source. https://github.com/JetBrains/intellij-community You can build that from source and run it, so you can at least see how most of the system is architected. You won't be able to extend some of the closed-source plugins, but you get some of the benefits of FOSS.

2. Their tooling is their primary business model. When Microsoft lost their VS monopoly, Microsoft didn't die. JetBrains' sole focus is making the tooling ecosystem work; they're the Adobe of tooling.

VS Code is indeed nice (I use it as my quick file editor) but can't quite match the IntelliJ products, although it can get decently close.

I've been using WebStorm (and IntelliJ IDEA) for the past couple years and love it. I have no intention of swapping to any other IDE unless I really have to. Can definitely speak to the extreme convenience of instantly finding usages/definitions, "intellisense" of func params, plugin architecture, super customizable settings, built-in language support and linting/evaluation, refactoring assistance, live templates... Just a godsend, to be frank.

Idea sucks. It just sucks less than everything else.

Is there a reason you wouldn't just use IntelliJ and install the plugins you need? I used to use separate IDEs pycharm and phpstorm, but then I needed IntelliJ for some Java dev and realized I could just install PHP and Python plugins instead and from then on only needed one IDE (IntelliJ Ultimate). I havent been able to do this with C#, .Net but for everything else it seems to work.

How's performance? I've used PyCharm about once a year historically and kept going back to TextMate 2 or (now) VSCode for UI responsiveness.

Mm, good point. WebStorm performance is good, but IDEA is noticeably slower. I haven't used PyCharm yet, so it's possible performance could be a pain point there. I find myself firing up Webstorm instead of IDEA due to slower IDEA indexing.

FWIW Cursive is a bit sluggish to start, but after it's done indexing it feels like the best Lisp development environment ever made.

I liked PyCharm's feature list but the index-the-world behaviour definitely like it going back to the pre-SSD era. Not a show-stopper for my biggest project but the cost for everything else definitely left me hesitant to switch.

Sorry, this may be a silly question, but is it possible for PyCharm (and other IntelliJ IDE products) to define a specific working folder / path for the file index-the-world feature to stay within or does it always permeate through the entire computers hard drives, just in case?

It works similarly to git. You define a project root, and then exclude subdirectory trees as needed. I believe there's a way to add additional directories outside the root if needed.

I had the same experience with a Vim plugin called Jedi. It was great, but typing "pdb." would freeze Vim for 5 seconds. IDEs can definitely try to do too much.

You've got a JetBrains IDE working with OCaml? What plugin are you using with which IDE? The only plugin[1] I've seen seems to be 7 years out of date.

[1]: https://plugins.jetbrains.com/plugin/4986-ocaml-support

I saw that https://github.com/sidharthkuruvila/ocaml-ide was pretty recent and assumed that it worked. I haven't tried it though.

Amusingly someone made a plugin for pg's Arc 3.1 code back in '08: https://i.imgur.com/Xe7mvIB.png

If IDEA doesn't support a particular language, it's pretty easy to fork an existing plugin and throw together some lexer rules.

I just assumed the naming thing was for properties shared between grid and flexbox (such as align-items). It is still pretty frustrating to remember that kind of stuff though.

> Most flex related properties are prefixed with flex-; but some aren't (align-items, etc)

If I remember correctly that is intentional because properties like align-items are going to be added to non-flex containers in the future. Look up Box Alignment.

And you know, the article even says pretty much this. Flex and grid both use it.

>CSS is almost as bad as PHP when it comes to naming

It took browsermakers 1O OR SO YEARS! to agree on complete flexbox spec and completely implement it.

People who were in touch with w3c process whom I knew, tell that at some times a whole meetings were spent arguing over a nothing more than a naming convention for single CSS property, or whether flexbox will be able to align element position on integers

For me the worst bugs have been in Safari by far.

Having a significant amount of visitors using ie10 & ie11 rules flexbox out for me.

So I use Susy grid system (2) and absolutely love it.

I`m using flexbox heavily on 10mill+ pw site for 2 years now. we had a lot of issues at first but after learning the quirks those faded out. nothing came up in the last 6 months.

I’d be curious to see what issues did you deal with and the workarounds which solved them. Is thawed any way you could share?

"and there are no compilers to tell you which combinations don't make sense"

well thats not quiet true, in purescript you can write type-safe CSS checked at compile time

https://pursuit.purescript.org/packages/purescript-css/3.3.0...

Does it tell you that align-items by itself doesn’t make sense regardless of the value, of the element isn’t otherwise set to use display: flex or grid?

I don't know the answer, but I'd be surprised if it did.

I've also been very frustrated by CSS due to 1) its lack warnings and debug errors as mentioned above, and 2) that so many properties have side-effects (like setting an element to display:flex changes the auto value of min-width for all its children[1]).

I've started working on something to help with this, but it's a long way off (and it may not work at all).

[1] https://www.w3.org/TR/css-flexbox-1/#min-size-auto

Reply on news.ycombinator.com