I currently fight to reduce the amount of requests on page load. The main.js is not used in our custom theme, but still gets loaded.
So how can I remove the theme's main.js, so that the browser won't attempt to load it?
Overwriting it with an empty file in our theme is not an solution (wont reduce request count).
I can find the main.js instances in the following places:
In html/common/themes/bottom.jsp, (with a hook you can modify this)
<script src="<%= HtmlUtil.escape(PortalUtil.getStaticResourceURL(request, themeDisplay.getPathThemeJavaScript() + "/main.js")) %>" type="text/javascript"></script>
And in /themes/_unstyled/templates/init.vm (in your custom theme's init_custom.vm you can change this variable)
#set ($js_main_file = $htmlUtil.escape($portalUtil.getStaticResourceURL($request, "$javascript_folder/main.js")))
and finally in portal-impl/src/VM_liferay.vm (this is in the jar file so you might want to go the ext way but i think you may not need to do anything with this file since this is just a macro which is defined, the thing you may want to change is how this macro (sort of function in velocity) is accessed and from where it is accessed)
#macro (js $file_name)
#if ($file_name == $js_main_file)
<script id="mainLiferayThemeJavaScript" src="$file_name" type="text/javascript"></script>
#else
<script src="$file_name" type="text/javascript"></script>
#end
#end
I am not sure if modifying these files would give the behaviour you desire but you may try and find out. I have not tried yet.
Related
Our team wants to build a documentation website that can be opened in browsers and Excel add-ins.
We chose Docusaurus V2 as the main framework to build the documentation website, and embedded office.js in it.
Office.js deletes history.pushState and history.replaceState APIs after being loaded,
so I added some JS code to polyfill it, as follows:
<html>
<head>
... ...
<script type="text/javascript">
if (history) {
var pushStateRef = history.pushState;
var replaceStateRef = history.replaceState;
}
function patch() {
if (history && !history.pushState) {
history.pushState = pushStateRef;
history.replaceState = replaceStateRef;
}
}
function onOfficejsLoad() {
Office.onReady(function() {
console.log('office.js is ready.');
patch();
});
}
</script>
<script
type="text/javascript"
src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"
onload="onOfficejsLoad();"
></script>
</head>
</html>
The above code made the website to work well within our add-in in Excel Online in Chrome, Safari, as well as IE 11. However, it did not work well in Excel for Windows: when we clicked to tigger a router event, e.g. clicking on docusaurus' sidebar, there was a error, the router had no effect, and the sidebar did not work well (see Screenshot).
I managed to fix this error by adding the loading of history.js:
<html>
<head>
... ...
<script
type="text/javascript"
src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"
onload="onOfficejsLoad();"
></script>
<script
nomodule
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/html5-history-api/4.2.10/history.js"
></script>
</head>
</html>
I still post the question, because I don't understand why the previous version did work our in add-in in Excel Online IE 11, but not in Excel for Windows, shouldn't their behaviors the same? Most importantly, when developing Excel add-ins, is there any best practice to follow to manage the conflit of history.pushState and office.js?
I added some JS code to polyfill it
I think what you have done is what I would have done too. I don't think Office.js is right to delete/override the history methods, but perhaps they had good reasons to do so (e.g. only allowing full page refreshes).
However, it did not work well in Excel for Windows
Do you know what browser is being used in Excel for Windows? It could be an entirely different browser that doesn't conform to the standards/runs in a different environment (e.g. not all the HTML5 APIs are provided on the window object). That could be why there's the weird behavior.
Sorry I don't have a Windows machine to debug this issue.
I'm new to Electron. I'm writting an application that uses several client-side UI library, such as jQuery, mask-plugin and d3.js.
Considering perfomance, I would like to know if there is any difference between requireing a JS library in the Renderer process instead of directly refering in a script src tag. Precisely, are require calls more costly than simple scripts src tag in the Render process?
For instance (a very minimal and simple example), which one is faster?
<script>
"use strict"
window.$ = window.jQuery = require('jquery');
window.Tether = require('tether');
window.Bootstrap = require('bootstrap');
require("jquery-validation");
</script>
or refer to the min script directly in the src tag:
<script src="js/core/jquery.min.js"></script>
<script src="js/core/popper.min.js"></script>
<script src="js/core/bootstrap.min.js"></script>
<script src="js/plugins/jquery.validate.min.js"></script>
This is a matter of taste and style than performance I believe. For me personally, I prefer to call libraries from code with require (or import in newer JS) than to add additional scripts to the page.
This allows me to have better visibility of what is being called when working on the code, rather than jumping from source to view.
I'm using MathJax in a hand-written web page (which is unfortunately not online yet, so I cannot point you to the whole source code).
I embed MathJax in the page as follows, which is simply copy/pasted from the official documentation:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
webFont: "TeX"
}
});
</script>
<script
type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML.js">
</script>
After that, MathJax seems to work well on every formula I tried, but I cannot get it to render the \TeX and \LaTeX commands to obtain the TeX and LaTeX logos. Everything on the web makes it look like these two commands are supported by MathJax, and I remember of having used them with MathJax in a wordpress blog years ago, so I think there must be some extension or option missing.
So why are those commands not working and what can I do to fix them? Or are they not supported?
MathJax only processes the math on the page, not other text-mode macros. So if you want MathJax to process the \TeX or \LaTeX macros, try using
$\rm\TeX$ or $\rm\LaTeX$
in your page instead.
EDIT:
Here is an example. Run the code snippet to see it work.
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
\(\rm\TeX\) and \(\rm\LaTeX\)
Goal:
I am trying to build an effortless workflow for client side templating development.
Doc Root:
/views/uncompiled/
/static/js/compiled/
We start in /views/uncompiled/
This is where I can build stuff out, like /views/uncompiled/index.html for example.
Im building dust.js templates, so I am using dusterjs too listen for changes in my /views/uncompiled/ directory, and automatically render compiled *.js counterparts in my /static/js/compiled/ directory.
So /views/uncompiled/index.html renders out /static/js/compiled/index.js anytime a change is saved.
Problem:
My layout.html is growing bigger. I need to include a new *.js script everytime I add another template:
<head>
<script src='/static/js/compiled/index.js'></script>
<script src='/static/js/compiled/header.js'></script>
<script src='/static/js/compiled/footer.js'></script>
<script src='/static/js/compiled/baconstrips.js'></script>
...
</head>
Solution:
Use another watch on the /static/js/compiled/ folder too automatically concat *.js into a single app.js that will always be included in my <head> anytime the contents of that folder changes:
<head>
<script src='/static/js/app.js'></script>
</head>
Question:
I would like to use a concatonation tool like Uglify.js that also does compression.
Are there any node packages that automate the solution above?
Is there a native function of Uglify.js that already does this?
Use grunt.js. It has the ability to watch/concentate/minify your files through various contributed modules. Takes a little getting used to (I still am myself) but you will end up with a custom build process that works the way that you want it to work, which is priceless.
For example, a webpage loads its JavaScript files like this inside the head tag:
<script src="http://www.somedomain.com/js/somejsfile.js"></script>
or for CSS files:
<link rel="stylesheet" type="text/css"
href="http://www.somedomain.com/somecssfile.css">
What I want to achieve is that, while loading the page itself, instead of the original http://www.somedomain.com/js/somejsfile.js it should load another file http://www.anotherdomain.com/js/anotherfile.js
May be via some custom firefox/chrome (preferably not IE) extension or something else.
Hint:
This can be also used to subsitute jQuery library etc. to load from local source instead of remote Google* hosted file.
injecting your own content script at "document_start" will give you the chance to analise and modify the document, even before the DOM is constructed and any script is started.
But at that time, all CSS files are already loaded. Perhaps you may redefine them with other CSS.
See "run_at" property in "content-scripts" property, in manifest.json:
http://code.google.com/chrome/extensions/content_scripts.html