I'm working on different language packs for my web app. Some of the output is generated by the JavaScript/JQuery and I can't use .aspx.resx resource files within the JavaScript. What options do I have in order to localize output produced by the client?
Thanky you
The most common way I've seen is different .js language files being kept in a lang/ or locale/ folder in the project, with only the file for the current language being included using a <script> tag.
If you want to manage your languages in one, central, server-side place, I think you would indeed be best of outputting your translations from ASP as a JavaScript file. I don't know ASP but that should be perfectly possible to do - just remember to send a Content-type: text/javascript header along.
Related, PHP oriented but doesn't really matter: this question. Check out the translation plugins mentioned there, they may save you work additionally.
Related
I'm fairly new to web development, but I've take a couple hands-on introductory courses where the basic structure of a website is you have an HTML file (or several ejs template files), a CSS file, and then you have something called a "server" file which is a JavaScript file, typically called app.js
I know that if I wanted to, I could include all my CSS inside the HTML file in <style> tags. My question is, should I have the need to do so, would it be possible for me to include the server code in <script> tags within a single HTML file?
Debating on whether or not I should put forth the effort to attempt to do so, but if it's generally problematic (note: I don't car about "best practice") for some reason such as it prevents you from working with certain packages/modules like EJS or Node.js then I will likely conclude that it doesn't make sense to try. As a novice web developer, I fear I am not aware of certain restrictions that I would likely run into if any (besides lack of module support).
would it be possible for me to include the server code in <script> tags within a single HTML file?
No.
Web browsers, which execute the scripts in webpages, do not provide JavaScript programs with the APIs required to run a server.
If you want to write a web server in JavaScript then you'll need to run it using a tool like Node.js and not a web browser.
No, you cannot put server-side code in HTML or in JS files that are sent to the client. Server-side code is code that is run on a server that you host, while client-side code is code that is run on the computer of the person who is visiting your webpage.
You can put client-side code in HTML <script> tags., and you can also include client-side code in separate JS files. The drawbacks are immense though, as:
Code highlighters won't be able to highlight your code and point out things like syntax errors as easily.
You won't be able to use tools like Babel and TypeScript, which input and output JS files.
You can't use NPM modules without a bundler like Webpack, which itself will output JS files.
Overall, there isn't really a good reason to use the <script> tag. It takes 2 extra seconds to just create another file for your JS, and it's more organized, more modularized and easier to use with external tools.
Doing translation in JavaScript in Django apps is covered in the documentation quite well. However, the built-in Django way is to load a JS file in a <script>. Of course, they suggest to cache this, but one either needs to use etags or another mechanism and it will normally add at least one more request to the page load.
However, most decent websites already have a build system for preparing static files, i.e. using gulp - for compiling SCSS, sprites and whatnot. This is the perfect place to build a JS translation catalog, concatenate it with the rest of the JS and make 1 single bundled JS file. There doesn't seem to be way to generate a static JS file from the current *.mo files. Reading through the Django code, it seems that the JavaScriptCatalog view is responsible for generating that JS code and it's not easily reusable for that purpose either.
TL;DR Is there an easy way to generate a static .js file with the current translation catalog in a fashion similar to using the built-in JavaScriptCatalog?
Take a look at https://github.com/zyegfryed/django-statici18n which I think does what you're asking for. Note however, that there will be one javascript catalog file per supported language, and you must serve only one of them to the browser. So to make "1 single bundled JS file" means making one bundled file per language.
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.
Is there some way to change mod_autoindex so that whenever a file of image types (jpg, png, etc.) or audio (mp3, ogg) it either opens one of those little embedded windows and shows the image or uses a flash or HTML5 based audio player to play the file. I know this module has many options for customization, but I can't figure out what code it uses to generate the file list.
Short Answer
Yes, there are several ways how to do this. Which one is right for you depends on your personal needs and skill-set. Your options are to either edit the C source code and create your own Apache Module, or to add extra functionality by declaring either a Client Side or Server Side script to be used as (or included from) the header of the index file.
Long Answer
Edit the Source Code
The only way to actually change the list, which is also the hardest option, would be to edit the source code and compile your own Apache Module. The HTML code for each file is put together on line 1852 in the mod_autoindex.c file. If you don't know C or if the code looks too daunting for you, there is no way to change the list directly.
You can, however, change the list indirectly by adding (either server side or client side) functionality to the index header or footer file.
Which brings us to easier options.
Add Server Side Functionality
Although you can't alter the list, you can make additions by having a server-side script that scans the directory you are browsing and adding thumbnails/previews for certain files. You could even hide the original list entirely with CSS and have the server side script build your own custom list.
Of course, you would have to be able to program Python/Perl/Ruby/PHP/etc. to do this.
I took a stab at this in PHP a while ago (mostly as an exercise) in my Apache Directory List Theming project. It doesn't do anything other than show a list of thumbnails for all of the images and PDF files in a given directory. (It's also not very sophisticated).
If you would also like to add previews for audio and/or video files, and you would like these previews to be present in the list generated by Apache, you're probably better of with a client side solution.
Add Client Side Functionality
By adding Javascript functionality, you could parse the list and for each file that is of interest to you insert a preview into the list. The prettyAutoIndex project does this. I haven't personally used it but it looks, well, pretty :-) It doesn't seem to be actively developed, but if it works it doesn't really have to be.
If its not what you want and you can code in Javascript, it shouldn't be too difficult to create something by yourself.
Wrapping up
If you decide to create a server or client side solution, it shouldn't be much more complicated than creating a file with some functionality and calling it from your Apache Config with headername:
<IfModule mod_autoindex.c>
HeaderName /path/to/header.file
</IfModule>
Unfortunately there are some gotchas, so I would suggest taking the time to read the relevant parts of the mod_autoindex manual.
I left this question as generic as possible, but I do have a specific problem that I need to solve in my application and the answer to this would help.
The application I am working on uses PHP/MySQL as its backend, and is set up so that no text/words/phrases visible to the user are hardcoded in the HTML/JS that is output to the browser, rather they are stored in a database table associated with a language key that is used to fetch the correct translation of the word/phrase based on the user's language preference. Now this works great for text that exists inside the application's HTML, but in order for this system to work with the javascript files, all javascript must be placed in a .php file and wrapped in <script></script> tags and included inline with the HTML, CSS ect.
This creates some problems with the flexibility in the system's javascript, as it cannot be included as external scripts via <link> tags (I guess unless you set the .php file's headers manually), and perhaps more importantly it cannot be minified/packed etc. when served in the production environment.
My first thought of a solution to this problem is to have a php script that's placed before any other javascript which loops through every record in the language database table and creates an associative javascript array using the language key as the array keys and setting their value to the translated phrase according to the user's preference. So, in this way all javascript files could be made into actual .js files and link'ed, minified, packed, etc. as needed, and they would just reference the phrases they need from the master language array that was created (i.e. alert(LANGUAGE.some_text);)
Only problem is, the number of elements in this array could easily get into the thousands possibly even bigger. So back to my original question, what is an acceptable max size for a javascript array, based on the average PC? Or am I attacking this problem entirely wrong to begin with?
I think the problem has less to do with how much data javascript can theoretically handle and more to do with how your application is handling the data.
It sounds like you're returning all of the phrases for the user's language on every page, not just the phrases they need on that particular page. If that's the case, fixing it will be part of the solution to your problem.
The rest of the solution will be not using javascript for anything until the app is completely functional. Then go back and do progressive enhancement stuff with js.
Instead of generating javascript from those database queries, generate pages (server-side) in the user's natural language, and serve them from a separate subdomains/subdirectories. Have your web server load the appropriate config for the user's language based on subdomain/subdirectory.
It's not the answer you were looking for, but I hope it helps.
JavaScript is by its nature a scripting language. The interpreter is nestled inside the browser's kernel. Correct me if I'm wrong, but I don't believe there is a definitive upper limit. The only thing that constricts an unlimited upper bound are memory constraints.
You can house gigs of uncompressed data (more if you compress it).
You're more likely to get one of the top errors in the list here, before you'll see any "upper bound limit reached."
in order for this system to work with the javascript files, all javascript must be placed in a .php file and wrapped in tags and included inline with the HTML, CSS ect.
This creates some problems with the flexibility in the system's javascript, as it cannot be included as external scripts via tags
Actually, not necessarily true. You can serve javascript files (not html) using PHP. Of course doing this most likely mean that all your javascript file will have the extension .php but that is a small matter. If you don't care about being strictly correct you don't even have to set the Content-type to js since browsers will treat anything served by <script> tags as javascript anyway.
A lot of sites actually do this, though not necessarily in PHP. Google, Yahoo etc often serve javascript using a server side scripting language to enable them to do any or all of the following:
automatically concatenate javascript/css files into a single file
automatically minify the javascript/css files
automatically obfuscate the javascript files
automatically do dependency resolution to source needed javascript files
Some people use mod_rewrite to rename the .php (or .pl or .cgi) files to .js to hide the details of the implementation. But it's strictly not necessary.
Here's an example bookmarklet that I serve as a .php file.
I tried solving a similar problem as a non-web programmer before, and ended up hosting the language package as a separate XML which JS queries into. Bad idea, and I'll tell you why. Google can't see pages filled dynamically with JS. But if that's no issue to you, I would recommend that way, simply because I don't know any other. :)
The method Array.prototype.push , append arguments to the end of the array, and return the new length.
In some JavaScript engine such as v8, the length is bounded to 32bit unsigned integer, so this might be the limit you want to know.