[mjordan79]

This is my personal experience with Webclipse and HTML 5 / CSS 3 editing, including the Live Preview feature.
Before explaining what I think, this is the setup I’m using right now for web development:

1) Eclipse Oxygen 1a for Java EE Developers.
2) Webclipse plugin, v1.8.4
3) Apache Tomcat 8.5.23
4) Oracle JDK 8 Update 152 for project building, Oracle JDK 9.0.1 for the Eclipse execution.
5) Firefox Quantum (v 57.0)
6) Application created using maven-archetype-webapp.
7) WAR file deployed on Tomcat manually, using “Run on server” with Live Preview enabled.
8) index.html included in the webapp/myapp folder, it references assets inside a subfolder of the main one. <welcome-file> points to index.html in the web.xml file.

At the moment, I’m just doing UI / styling works, this means I’m writing just plain HTML 5 and CSS 3 (no Java files at the moment).

Besides the fact that Webclipse doesn’t seem to offer any addition to the bad html / css editors / autocompletion shipped with Eclipse (quite ironic, considering the emphasis on the word “web”), I feel that the use of the Live Reload feature is not working good at all and seems to be problematic. Changes are immediately reflected in the browser only when they’re simple (text modification). Everything that goes beyond text insertion (layout changes, changes to a block-element, float position adjustments, etc) always require a page reload. I feel a bit disappointed, frankly. Emmet is a nice addition, but it seems to be working only when you operate on an already well formed file. Inserting boilerplate HTML code using the directive “!” or “html:5” doesn’t seem to be working when operatiing on an empty html file. I still have to try JavaScript / Angular tools though.

• This topic was modified 6 years, 12 months ago by mjordan79.

[support-swapna]

mjordan79,

Thank you for trying Webclipse and appreciate your feedback.

The issue with Emmet abbrevations in an empty HTML file is a known issue and we already have a bug filed for it. The workaround is to select the abbreviation i.e highlight the abbreviation instead of placing the cursor at the end of the abbreviation and then hit Ctrl+Alt+Enter. We will keep you posted when it is fixed.

One of the dev team members will get back to you soon regarding the HTML/CSS autocomplete and the Live Preview issues.

Apologies for inconvenience caused.

–Swapna
MyEclipse Support

[Brian Fernandes]

1) I must say that we hadn’t really thought about Emmet being used for boilerplate (which is a great idea) – that bug had a lower priority, we’ll try to address this for the next release.

2) On the HTML 5 and CSS 3 support – we do add several bug fixes to these editors to improve stability, and made quite a few changes in the HTML 5 area, but I will admit this hasn’t been a focus area recently. We’re going to be working in these areas in the near future though, mind sharing features that you care about the most? Better content assist and validation, for instance?

3) On Live Reload

a) When you do make a change that does not get picked up, do you see the CodeLive dashboard within the browser report that the page is now out of synch, and you should reload? Or does it just silently fail?

b) There are some cases where a reload may really be required where the change is really too complex (not saying this is true for your tests), in such a case, would you rather CodeLive automatically reload the page for you?

c) Can you try Chrome instead of Quantum, does the experience improve at all?

Thank you again for taking the time to provide detailed feedback – I hope we’ll be able to make some changes that improve your experience with the product in the near future.

[mjordan79]

Hello Brian, thanks for the answers.
2) Better content assist and validation would be great (transform, for example, doesn’t propose anything for the value of the property) or overflow-x and overflow-y properties are not even mentioned by the content assist, but I’m also thinking to some additional tools that complement these editors and make the everyday work more productive. For example,
the color picker could be improved a lot: actually it allows to generate colors only in hexadecimal values. Would be great if it would propose colors in rgb(r, g, b), hsl(h, s, l) or even allowing to select an alpha channel for rgba(r, g, b, a) and hlsla(h, s, l, a).
Regarding other tools, a box / text shadow builder and a border radius generator would be incredible (using a specific site for every of these task is generally annoying). With animations the possibilities are endless, an editor for keyframe animations would be fantastic. You know, one can dream. 😀

Regarding LiveReload:
a) No, the dashboard doesn’t advice to reload at all. It just silently fails. I was doing a project from scratch and everything deteriorated to the point no live change is visible, except for the text modifications. Even boxes for containers don’t show up anymore.

b) The tool warns me that it’s adviceable to reload but I have never received an automatic reload at this point.

c) Tried both and they work practically the same. I have not experienced any advantage in using Chrome with this functionality.

Thanks to you for the time spent considering my rants.

• This reply was modified 6 years, 11 months ago by mjordan79.

[Brian Fernandes]

These aren’t rants, these are rubies! (pardon my poor alliteration). It’s always great to get really specific requirements from customers about would make their lives easier.

1) We’ll take a renewed look at the content assist for both HTML5 and CSS 3.
2) Noted on color picker – what OS are you on?
3) Shadow builder, radius generator – what sites do you use for these?
4) I think the keyframe animation editor might be beyond what we can deliver, but I’ll note it down anyway.
5) On LiveReload, I’m a bit confused – during the time when it goes out of synch, you said that the tool does not let you know it’s out of synch in point A, but it does in point B – can you clarify? It does not auto-reload at this point, I was asking if you would like that to happen automatically?
6) Good to know it’s not a browser problem.

Thanks again for the feedback, we’ll keep you posted on when we add any of these features or fixes to the project, and if you think of more – please let us know.

[mjordan79]

Hi Brian,

1) Appreciated.
2) Windows 10 Fall Creators Update (attached: color.jpg). It’s pretty bad according to me. It shows values for HSL, but when I click ok only the hex value are produced.
3) I use the set of tools from css3maker:
http://www.css3maker.com
and angrytools for CSS:
http://angrytools.com/

For animations and quick presets for common effects theappguruz is invaluable, it just let you preview an animation and visualize the css code:
http://www.theappguruz.com/tag-tools/web/CSSAnimations/

I know this kind of things are better done during in-browser tweaking using dev-tools, but having something like this inside the IDE would allow me to fast prototyping effects quickly without never change the window and only use dev tools for pixel perfect works.

4) Right, but hey, I told you I was dreaming. 😀 And by the way, while a keyframe animation tool would be certainly overkill, a good set of premade animations with some sort of preview would also be useful (according to me).
5) Well, this is what I’m experiencing right now: starting fresh, with a clean container and a fresh deployed app, everything works (even the box underlining). While editing the CSS, everything degrade to a non working preview. When this happens, the tool doesn’t advice you that a manual reload is necessary. For me, an automatic reload is NOT necessary, it’s sufficient that the tool detects when you should manually reload. But if it stops working during css editing, I’m forced to go back to brackets. And this is really a thing I don’t want to do.

Attachments:

You must be logged in to view attached files.

[Brian Fernandes]

Again, thanks for providing further details and clarity, much appreciated.

As far as the LiveReload is concerned, there certainly seems to be something wrong, both with the CSS editing as well as the “de-scynhronization” detection.

We’ll keep you posted on fixes and updates.

[Author]

Posts