I am using Magnolia CMS 5.3.4, the STK, and freemarker (FTL) template scripts.
Some components I have defined relies on specific javascript files. Right now, what I do is that I include these javascript files in the main.ftl template script. I am looking for a way to get them included only if the specific component is present on the page.
I tried to use the jsFiles property in Template Definitions, but it seems it works only for page template definition.
The jsFiles property indeed works only for pages not for components. This is because Magnolia wants to include those files in header already, rather than loading them in middle of the body when component gets rendered.
As a general practice I would anyway recommend combining your js files into one (look at for example plugin loader in resources on how this is done) and set longer time for caching such file so that browser downloads all the script just once for the whole site rather then page by page. The bigger js file you are sending over the more overhead you are cutting off from requesting separate files and better the compression of content for transport will work.
HTH,
Jan
Related
We're building a site with NextJS, and noticed that in the source code of our website, we can find a _buildManifest.js file, which appears to list all pages currently defined on our site. We'd like this to not happen.
How is the _buildManifest.js file created, and what does it do?
How does it pull in the list of pages?
Is there a way disable its creation, and what breaks if we do?
We worked it out on our own, putting an update here.
It appears the build manifest is an autogenerated file that has a mapping of urls to the static JS chunk generated by webpack. This is primarily used for client-side navigation by the next/link component which, among other features, eagerly loads the JS on hover based on the href attribute.
The work is done by a webpack plugin defined here, which grabs all urls and generated JS chunks from webpack and spits out a JSON file.
As of Next v10, overriding this webpack plugin and filtering the output through an allowlist seems to work; the only observed side effect is that clicking these links must be done through a normal <a href> instead of the next/link component, which disables client-side navigation. This may lead to slightly slower page navs (no eagerly loading client-side JS on hover) but does allow for hiding the urls from a publicly visible endpoint.
How to use a free bootstrap template (e.g., from startbootstrap.com) in meteor. I mean where the resources- html file, css folders and js folders of the free template should be put and what packages are needed to add/remove in meteor project file? I have tried it several times but got errors and the program crashes each time. I also transfer the script and link tags from section to section, but it did not work.
Just add the css of the template to the client of your Meteor project. Also, try using the nemo64:bootstrap package for Bootstrap. This will add some files to your project automatically, one of which will say is editable at the top. You can put your custom css in that file.
You can put the relevant html, css, and js files anywhere on the client. (Sticking it inside a folder called client will do that).
Image and font files should go in a folder called public.
You will need to make meteor templates from the HTML files. As is they will be missing any <template name="foo"> tags.
The css files can go anywhere under /client and they will automatically be added to the project. These are the easy ones.
The js files are the harder ones. If you put these under /client they will be wrapped by Meteor and will not have global scope. In all probability they won't work at all. You can put them under /public and modify your head.html file to include them to get around that problem. Odds are there won't be very many js functions in the free template anyway so you might want to read through them and see which ones you really need and then convert those to be proper template helpers or global functions on the client.
My default ASP.NET MVC 4 project has bundles created for JQuery and JQuery UI that is referenced in the pages.
I want to change this to use an absolute link from a CDN instead of relative on my web server.
I thought it could be as simple as just changing the url's in the bundles to point to the CDN urls. I understand why this won't work because bundles essentially bundle everything up into one file. These cases, I only have one file though.
I'm wondering. What is the best practice here. Basically, I want the code to exist in my layout or even individual pages that directs the view to load the script tags for these scrips. Then I can manage which script tags are included. The same way we do it with bundling, but I want it to work by doing the bundling and also do any other alternative script tags instead of the bundle. This way I can swap in and out depending on how I feel I want to manage my scrips at any one time. Let's say I want to add another js file to the bundle some day, or I want to include another script that will have it's script tag rendered on every page. I want a central place to do this.
Thoughts?
I'm using jQuery plugins in an ASP.Net MVC site.
I've often to include CSS and JS files as required by the plugins I use in every page. So I want to centralize all those dependencies in a single place in my app. thus if a dependency for a given plug-in is changed or updated, I'll only have to modify a single place in my app.
I've thought in two possible solutions:
Extend the HTMLHelper with a partial method
like GetPlugin("jqgrid"); that
will print out all the script and
style tags needed.
Create a partial view for each
pluginlike jqGridDependencies.ascx
that will contain the script and
style tags needed.
Do you have any other idea? what do you think of both proposals?
Could http://combres.codeplex.com/ provide you with a framework for this.
My only personal objection to this method is that each individual pages will have a unique JavaScript/CSS file where as if you combined and compressed everything into one and simply used classes and events to trigger the JavaScript enhancements as and when needed your site would run a lot faster.
In VS 2008, I have an ASP.NET content page having one master page. I would like to add JavaScript functions for client side validation etc. for this page. My questions are:
Should I write these scripts in a separate .js file, or embedded within the .aspx file.
Does this choice affect the performance of the website?
Are there any rules for writing a JavaScript file?
I would say, you should create javascripts functions into separate .js file and link them up inside the the master page or .ASPX where it's needed.
Imagine you "copy and paste" the javascripts functions in each of the .ASPX, then when that .ASPX file is loaded, it will take longer to render that page since it needs to render also the javascript functions. If you maintain it into separate .js file, the browser will only download once if it's newer or not exist before.
You can also cache those .js files, so that the browsers won't reload it everytime.
The other advantage is when you need to make some changes in the .js files, you just need it to modify it centrally at one file, rather than do a "Find and Replace" through numerous .ASPX
You should consider the power of caching, if the JavaScript functions are likely to be used on several pages a user will visit. In this case you should put them in (if possible) one external .js file. With this the file will only get fetched once from the server and then stays in the browser cache. Your HTML pages get smaller (significantly for larger JS libs).
If the functions (typically validation rules) only apply to one single page only, an external JavaScript file would lead to an extra HTTP request that leads to a short blocking in the user's experience of your page. Here it's better to embed the JS in the HTML file.
See Yahoo!'s tips on this for more detailed hints.
Cheers,
It depends on your use. If its a page specific functionality then try and implement it in the page itself. If it is used by many pages then put that inside a js file.
Does it affect the performance of
website?
Yes, it can. If you have a js file with thousands of lines of code and in a page you have to call only one function inside the js file. If you refer the file for this one there should be a bandwidth wastage in downloading the entire file. For this case you can write the function inside the same page itself.
On the other side browser can cache a js file. So for subsequent requests if the file is present in the cache it won't be downloaded again. But in the case of JavaScript being written in the page itself, every time the page loads all of its contents will be downloaded.