Develop Reference

AngularJS 1.8.0 and Jquery 3.6.0 compatibility problem

I have java web project application, using Angular 1.8.0 and JQuery 1.12.2. It's working fine. Despite the fact that Angular 1.8.0 should maintain JQuery 3.6.0, when I update JQuery to 3.6.0 all that's placed after "command-bar" directive is not shown:
...
<div ng-if="home.showGrid" class="container-fluid ms-font-m">
<command-bar/>
<!-- the next part is not shown -->
<div id="homeGrid" ui-grid="home.gridOptions" ui-grid-save-state ui-grid-auto-resize ui-grid-edit ui-grid-selection ui-grid-pinning ui-grid-resize-columns ui-grid-pagination class="grid"></div>
</div>
...
If I place the div with "homeGrid" id before "command-bar" then it's shown.
Also I've tried to create new AngularJs directive with "<div>Hello</div>" only and empty controller, replaced command bar with it and it's not shown also.
If i'm trying to force Angular to use JQlite with ng-jq it's even worse, template is totally crashed and there are third party components that need JQuery in assets folder anyway.
Please advise what could be the solution and what steps I need to do to find the root of the problem?

Finally found the problem. It seems to me that Angular doesn't correctly recognize the short form of tags. After I changed "<command-bar/>" to "<command-bar></command-bar>" everything worked.

How can we generate static HTML files from JSP during the build process of our Maven app

We have a fairly old Maven web app and I have been tasked with optimizing the front-end. I have found that we have hundreds of unused style rules in our CSS (Which is generated from LESS). We have begun to implement Gulp into our apps build process and I would like to implement a task that removes all unused style rules from our CSS. This should drastically reduce the size of the CSS files we serve up. The problem I have is that this task requires the CSS and HTML files. As this is a JSP app the HTML is generated when a user makes a request for that page, not during the build process. This means I don't have the static HTML files that this task needs.
The plugin I was planning on using is:
https://www.npmjs.com/package/gulp-uncss
I was hoping that we could add a build step that generates static HTML files that we could then use in the Gulp task to remove the unused CSS rules, then run another Gulp task that deletes these files.

JSP is a dynamic, you never know what is generated from JSP page. It's absolutely dynamic templating engine that compiles to a servlet not html. This servlet writes to the response out a text used by the template.
So, you can't use Gulp on server side using JSP as an endpoint or a servlet retured that JSP.

By nature JSP is dynamic, so you cannot generate static pages from them.
One potential option is to manually visit each page in a browser and retrieve the generated HTML, but this would be time consuming and has issues.
Consider:
<c:if test="${something eq true}">
<div style="styleOne"/>
</c:if>
<c:if test="${something eq false>
<div style="styleTwo"/>
</c:if>
You'd need to be sure you're not accidentally omitting classes.
What I might do in this situation is use a script to get a list of classes in use. It's still going to be time consuming. You can use something as simple as ack to get a list of all uses of class="someClass" in the project. For example:
ack 'class=".*"'
This will print out each use of class= in the whole project. From there, you can filter that or just refine the regex to only print the contents inside the class attribute.
As for verifying IDs, that will be more time consuming, but hopefully they are not too prevalent. I would use ack again, but replace class with id. Then I'd use a similar query for CSS.
ack --type=css "#.*{"
This will find each use of an ID in your CSS files. Then I'd cross reference those with the previously gained ID list. Any IDs that exist in the CSS output but not in the id=".*" query can safely be removed.

How should I include other jsp files in a jsp file and why?

So there seems to be a few ways to include jsp files in jsp files, being:
<%# include file="header.jsp" %>
<jsp:include page="header.jsp" />
<c:import url="header.jsp" />
<tagfiles:tagfile />
So which one should I use and why? What advantages / disadvantages do they come with?

The include directive, makes a copy of the included page and copies it into a JSP page (the "including page") during translation. This is known as a static include (or translate-time include) and uses the following syntax:
<%# include file="/jsp/userinfopage.jsp" %>
Two alternatives exist for the dynamic include
The jsp:include tag, described in "Standard Actions: JSP Tags", dynamically includes output from the included page within the output of the including page during execution. This is known as a dynamic include (or runtime include) and uses the following syntax:
<jsp:include page="/jsp/userinfopage.jsp" flush="true" />
<c:import url="header.jsp" />
Unlike jsp:include, the c:import action provides a mechanism to access resources that can be specified through a URL, thus allowing page authors to get access to resources that reside outside the Web application. On the other hand, it lacks the ability to flush the response. Finally, c:import is comparatively more heavyweight and is therefore not appropriate when a lightweight solution is sought.
tagfiles are basically templates, which are like generic and can render some common views, but internally they will themselves use html tags itself.but not much of use while including jsp pages.

In my Project, I have used following approach
<jsp:include page="header.jsp" />
I have used this for loading specific div element instead of refreshing whole page.
This can be done by using JQuery's load method.
Including JSP file allows us to reuse the template in many places. Just write template code in JSP file and use it wherever required.
JSP page directives works at translation time while standerd actions works at run time.
You can tagfiles for calling functions on server side. You can also use tagfiles for creation of templates.

Where does this style information come from

I am debugging a web portal out of a Java project. In the resulting jsp page, a div is always not shown, the reason is because there is a "display:none" being set for it:
<div class="settings_nav" style="display: none;">
</div>
In the debug mode of the Chrome browser, there is a "Styles" section describes this as:
element.style {
display: none;
}
Interestingly, this style information is not associated with any CSS stylesheets in Chrome debug mode, I searched through the CSS stylesheet set, there is still not hit.
Could experts give me some hint on where is the best place to find this style definition? Thanks.

It's not coming from a style sheet since it's an inline style on the div.
Inline styles override values from style sheets.
Could have been added through JavaScript or server side code

element.style refers to dynamically added styles; that is, as others have pointed out, added by javascript. I would look through your js files. Your best bet is to search your js directory for keywords that are involved in changing CSS. I can almost guarantee that the word 'display' is used somewhere (unless you are using jquery) and if you are really lucky maybe you'll only get a couple hits on that search term.

There are a few different ways in which you might see the styles applied and you can check it through the dev tools.
Inline style
User-agent stylesheet
Styles defined in a stylesheet
Using Javascript

How do I make IntelliJ recognize wicket html tags?

I'm using IntellIJ with Apache Wicket and IntelliJ is showing me that tags like <wicket:extend> and <wicket:container> and adding wicket:id to other html tags is not valid.
What steps do I need to take to make IntelliJ recognize the wicket tags?
I'm using IntelliJ Ultimate 9 with the wicketforge plugin.

You can't really do it, adding the wicket namespace as in the other answer will only work for wicket:id, there is no dtd that also includes the wicket:container|panel etc.
There is this really old schema from the contrib project: http://wicket-contrib.googlecode.com/files/wicket.xsd but that doesn't include xhtml, so you'd need to create a schema to merge that and xhtml, and i don't believe there is a way other then manual.
The best you can do it add them to idea's ignored tags;

I use Eclipse, but to make validation errors go away, I just add the wicket namespace:
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
...
</html>

I suspect #slckin may be right. and to contribute to his answer, In IDEA, File->Settings->Inspections->HTML "Unknown HTML tag" is where you can add a list of comma seperated tags, mine looks like this: nobr,noembed,comment,noscript,embed,script,wicket:head,wicket:panel,wicket:remove,wicket:extend,wicket:child,wicket:container,wicket:enclosure,wicket:message,wicket:link,wicket:fragment
(not a complete list but covers most)
The best list of the tags in one place I've found is here: https://cwiki.apache.org/WICKET/wickets-xhtml-tags.html
The next block section down is "Unknown HTML tag attribute" and if you add wicket:id to the "Custom HTML tag attributes" list it should stop throwing that warning as well.

In "Project Settings - Schemas and DTDs" you can add the http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd DTD (download it save it somewhere, then browse to its location).
That will at least get rid of the warning about the undefined namespace, and make the red warnings less obtrusively brown, assuming your HTML files start with the following:
<?xml encoding="UTF-8" ?><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd"
lang="en" xml:lang="en">
(The first <?xml encoding="UTF-8" ?> is stripped away by wicket, used just to specify UTF-8 encoding)
Then follow Raystorm's advice about adding the unknown HTML tag definitions.
Only problem I have now is that I get double type-completion suggestions for the <wicket:whatever elements, but it beats having error-markers everywhere.