Using JS to create user-customized home pages - javascript

I believe this question is related to this one also, since I'm trying to figure out different aspects of creating a custom homepage: Click here
Once again, I'm developing a downloadable homepage (a custom index.html file + some images and more if needed) that you can store on your computer and then set it as your homepage. It would have a compact layout where you could sort your favorite bookmarks and other stuff the way you want. So the idea is clear.
In the previous question (link above) I wondered whether it's possible to write/read from a file with JS. Unfortunately, it isn't and I do not want to utilize any plugins or an ActiveX object.
I would like to know whether it is possible to add new lines of code (user input) to the page file? For instance, if index.html is the file from which the script is running, can the same script add new lines of code to it? Not an external file, but to the same file the script is running on at the moment?

Instead of writing to a file, I recommend using localStorage. It's a persistent JavaScript object that is stored across pageviews and sessions.
alert(localStorage.myStorageKey);
localStorage.myStorageKey = 'test';
Try using the above code and refreshing the page.

Related

javascript reference refresh from aspx and cshtml pages

We have a production application with several aspx and cshtml pages. These pages refer to multiple javascripts which gets changed frequently.
Since we are using CDN, Whenever a change is made to any of the javascript file, we manually version it across all the aspx/cshtml it is being referred from.
For example:
if abc.aspx has [script src="abc.js?v=1"] and we make changes to abc.js, we manually have to change abc.aspx like [script src="abc.js?v=2"]
This becomes very difficult to do with several aspx and javascript/css files.
I read it here:
force browsers to get latest js and css files in asp.net application
But there are few problems in suggested approaches:
It looks like the solution would version js for each request made by a user. This is not correct. Since ours is performance oriented website, we need to cache it unless it gets changed.
if at all its #Html.IncludeVersionedJs("/MyJavascriptFile.js") looks only for mvc. what is web form version to do this?
Basically we want to avoid manually versioning javascript references and build something intelligent enough to detect if any of javascript has changed in my solution, it automatically updates its corresponding references too with new versions.
I guess you can possibly achieve this by using RegisterClientScriptInclude . Something like below (I haven't tested it so you may need to tweak it accordingly)
var physicalPath = context.Server.MapPath(filename);
var version = "?v=" + new System.IO.FileInfo(physicalPath).LastWriteTime.ToString("yyyyMMddHHmmss");
Page.ClientScript.RegisterClientScriptInclude("script", filename + version);
You can adding a caching layer before checking the PhysicalPath.

Javascript: Load one js-file into another js-file like it was one file

I'm using babylon.js as a framework for easy access to WebGL. Unfortunetaly, I'm struggling a bit with managing my code.
For example, I want to create a mesh in a js-file, then I want to edit its position in another js-file.
So what I need is that the index-file loads all javascript-files like their code was written as one large block in the index file.
Using jQuerys getScript for example runs the other js-File, but does not implement it into the code like it was one file.
EDIT: using the php-include it works how it should. Just for understanding: The server is creating the output in this case, doesn't it?
Looking forward answers!
Browser interprets JS files as it receives them. In case of jQuery, requireJS or other loaders new tag is added to the page, so browser loads a new file, and processes it as a new file.
The only way to achieve what you want is to make server compile different files together and give it to browser as one file. This is what PHP does, this is what any other compiler is for (like Grunt).
On a large scale though, it may be a bad idea to write code in different files such as it works differently whether it's loaded as is or compiled to one file. It can be a major pain to support that code later on.

How to modify bigcommerce frontend with api (add js code in app)

I am writing and app for biggommerce which should a bit of code JS to the header. Does bigcommerce allow to do something like that? (something like ScriptTag in Shopify)
Best Regards
Vahe Abelyan
There is no way to access/edit template files thru the Bigcommerce API. It would just be best to guide the user to pasting the JS into their header (as most apps already do).
Rob is correct, however, depending on how complex you want to get you could technically write an app that would fetch or put a file into the theme's template structure using WebDAV.
Basically
if /template/panels/htmlhead.html exists find it, add your script code before , then post file back to webdav
if /template/panels/htmlhead.html does not exist, allow user to upload the default one from their theme, and then have you app do the same thing.
However I'd recommend sticking with the easy way, just provide instructions for a user to place the code into the file themselves. If you want a great example of this, see YOTPO's installation instructions.

Save HTML As Standalone Page: Exporting Tool?

I need to regularly send html pages to a client as standalone .html files with no external dependencies. The original pages are done with node.js and express and they contains several librairies such as High Charts.
I have done the preparation manually until now, this includes:
Transform all images into blobs
Copy all external .js and .cs inside the page
Minimize where possible (standards librairies such as jQuery or Bootstrap...)
The result is a single .html file that can be opened without an internet connection and looks just like the original.
Is there any tool to do this automatically? If not, maybe I'll code it myself in Python. Do you have any recommendation around that?
Thanks
Monolith is a CLI tool for saving complete web pages as a single HTML file
See https://github.com/Y2Z/monolith
With apologies to OP, as this answer is probably far too late for him, but I'm posting it to help anyone with a similar problem:
HTTrack is an open-source project that does almost exactly what you described, though it doesn't work perfectly on some of the more peculiar JS.
It saves the page with most of the JS, the major images, and everything that the page needs to appear complete. It can be configured to include or exclude the entire or partial JS, images, and CSS.
This does not import all of the JS and other content into the HTML file, but neatly organizes all of the content into one folder and corrects all of the paths to make the folder portable.
It also seems to have trouble grabbing some external sources that are protected, but if it is your local site and simply uses common scripts like JQuery, you should be fine. When I tested it, it correctly downloaded all of my local CSS and any valid external CSS library that I incorporated, the JQuery and derivative scripts that I was using, and the embedded images.
Just to save everyone a question, the program by default saves the downloaded websites to C:\My Web Sites.

Play framework auto javascript and CSS minifier

Does anyone know a good play plugin that automatically minifies javascript and css to attach to a production play server?
I've found this one, but I guess there are more out there:
https://github.com/greenlaw110/play-greenscript
The main problem I see here is that the having javascript being generated from the play side, the plugin would have to detect JS code that gets generated on the fly. Mainly because I'm writing values directly into the javascript like:
function foo${handlerID}(someVar){
var x = ${some_val};
(...)
}
var t = foo${handlerID}('bar');
The reason we do minimizing/compressing/merging for css/js/img is because we want to save the network bandwidth and accelerate application performance, lower the server's load and make the user be more happy.
When you are putting those groovy variables into your javascript code you are shifting to the other way, i.e. making the server slowing down. Because each request will get a different javascript file to be downloaded, and the user will be no longer benefit from the local cached js copies. For the same reason using greenscript or any other minimizing tool to compress it is meaningless, because each time your need to compress and merge again instead of get it directly from cache.
If there are cases that you HAVE TO put the groovy variables into some javascript code, you'd better separate them from other parts (which should reasonably be most the majority). By doing that you could still using greenscript or press to process your static js files and leave the dynamic parts stay inside your view.
Check out the press module.
As long as the generated Javascript and css are in their separate own respective files you should be able to minify them automatically.

Categories

Resources