I was developing a simple site with multilingual function. My stack was AngularJS + JSON, basically a JSON file with different context in different languages.
Then I started to think if it is indeed a better solution in terms of performance to parse simple text from JSON and substitute text content variable values on the fly versus just creating a simple .html page for one language and another .html page for another language with text inside the html pre filled and then just using angular to change those pages by using route.
I would gladly hear out any thoughts about which method to use, or maybe you have a suggestion for a totally different approach in order to optimise the loading and rendering time of a page.
Thanks in advance for your time!
It is always better to use JSON files for the same. You can use i18n library for the multilingual purpose. With this you will be having multiple JSON's for each language and a single .html file. i18n will handle the language switching, there is no need to create route for each language. If you need to accommodate more languages in future, that can be achieved easily. Please refer the below link for more details.
https://angular-translate.github.io/
Related
I have a help system that is completely offline, no server, using file://.
I have one main page, with hundreds of line of html that represent many sections of the help system. I would like to stick each section in a html file and just include it. Unfortunately it seems like this is only possible with some nifty server side include techniques, with HTML5 (which I do not want to assume my users have), or with a nasty javascript hack where you copy your html file into js files with document.write calls for every line as written about here: Ways to include html in html.
What about something like handlebars.js or mustache.js? Can I use templating?
Since you don't want to use server-side includes, I would suggest using a static site generator (SSG).
If you are not familiar with SSG's, they allow you generate HTML pages from templates & includes (often Handlebars templates) and HTML, Markdown, JSON, or YAML, content using a CLI.
If you want to get started with an SSG, there are plenty of options, from Ruby based Jekyll, or Node.js based Assemble. In my opinion, Assemble is the best option and I would highly recommend it.
So I realize that anyone can view the javascript in-line with HTML running in their browser, so if I use an external js library on my server will its contents be completely hidden?
Another question is are there any cases where it's better to use in-line javascript, like with jQuery or something, or is there really no down side to just using a js library for all of it?
No, there is no way that your javascript will ever be "hidden". Anything that can be run in a browser can be trivially saved and inspected. The best you can do is use an obfuscator.
The downside to using an external file is that it's another request. The upside is that it can be cached independently. For best performance, code that will be used from more than one page should be stored in its own file, and code that is page-specific is better off being stored within the page that uses it.
JavaScript operates on the Browser level, that means that the browser at some point read your JS (external or internal same s.). You can easily conclude from this that if at some point the JS is now registered by the browser, and it's accessible by anyone with a bit more knowledge in web stuff. you'll not be able to hide your JS trickery.
Pus inside your JS a Copyright notice and pray.
Never send sensitive data through the yellow wire.
If you have some extra sensitive strings, encode and compare them on server side - sending them like MD5 or in some SHA model to the server.
Javascript, with the exception of something like node, operates client-side so you can't really use an "external js library" on your server, whatever that means.
Best practices dictate that you should almost always reference your javascript using <script> tags and link to your javascript file using the src attribute.
I have Javascript, Django templates, Python code, and CSS which all work with the same configuration data. Where's the best place to configure it?
Specifically, I have a browser-side entry widget in Javascript which controls an embedded Java app. When the user is done, the Javascript asks the Java applet for an image of the result, which will be embeded in the HTML. The user can specify if the image should be small, medium, or large. That image and the choice are sent via an AJAX call to my Django app, which does some input validation. When the HTML is displayed it includes my CSS, which has special a[href^=http://internal.server] markup to show those images in a different way than other images.
While someone asked a similar question, the answers were either: "use a DSL" or "use a format like XML or JSON." Neither of which work with CSS.
The two solutions I came up with are:
put the data in Python and have it generate the HTML through a Django form/template. Also have Django dynamically generate the Javascript configuration and generate that CSS.
I don't like this because I would rather serve all my Javascript and CSS statically.
Introduce a build step where configuration data gets applied to a template to build the respective Javascript, HTML, CSS, and Python files.
Which makes things more complicated because I'll have special "*.in" or such files which build the actual files, and everyone will have to watch out that they know which files are the ones to edit.
What do you do?
Use JSON. Generate the CSS dynamically, using caching to reduce load.
I think an really good approach would be to effectively have a DSL expressed indirectly via JSON data structures laid out using some sort of coding convention, coupled with a separate build step that used that to create the configuration files needed. If the tool(s) for this build step were written in Python, creating, maintaining, and enhancing it or them ought to be relatively easy.
Forgive my ignorance since this seems like its something I should know by now.
I know I could make a stylesheet that will allow me to make changes in my CSS throughout several pages that use the CSS. I also know that you can make an external javascript file that could contain functions you want to reuse. But lets say I had pure HTML content (lets pretend a bunch of buttons or links) that I wanted replicated on several pages. Is there anything similar to a stylesheet in that regard? This would allow you to update the buttons/links all at once.
Try server-side includes.
The most frequent use of SSI is to include the contents of one or more files into a web page on a web server. For example, a web page containing a daily quote could include the quote by placing the following code into the file of the web page:
You could also use PHP, if your host allows it. Just change the name of the page from .html to .php and reference the header:
<?php include "header.php" ?>
Both of these require you to change the file's extension, so you might also want to use mod_rewrite to let users still access it via the .html name. Again, if your host supports it.
The question isn't that stupid, as there in fact is nothing native in HTML to do this.
If supported by your server, Server Side Includes are your best option. If you have PHP, you can also do a <?php include "footer.html"; ?>
All other server side languages have a similar construct.
Depends... I know Dreamweaver has some rather advanced support for templates. You can delve into the manual of your WYSIWYG HTML editor and get acquainted to how it can help you with repeatable content items. Otherwise, as Simon hinted, you should consider learning some server side technology (scripting language such as PHP is an easy choice), write your repeatable HTML and let the scripts output that whenever and wherever you need. Good luck!
It seems you're not using some server side technology like ASP.NET which has user controls on which you could place those.
An alternative would be to use Server Side Includes like:
<!--#include virtual="header.html"-->
Grz, Kris.
You can try using the CSS content property, but the content is inserted after/before the target. http://www.w3schools.com/Css/pr_gen_content.asp
EDIT
You can also try storing your content in XML documents and using JavaScript to load the XML sheets. Each sheet can store your button content, input content, etc. All you have to do is parse the XML and render the content as HTML elements.
While SSI seems like the best idea I believe, if memory serves me well, that if you're using IIS you're going to have to adjust some settings on the server to work get SSI with the html file extention.
While SimpleCoder's idea doesn't seem like the best idea it is an interesting one. Building on that idea maybe json data instead of xml would be best. I'd play around with this just for the fun of it.
If neither SSI or PHP is available, you could do it with javascript only:
Load the page into a hidden IFRAME, then grab it (with innerHTML)
- and move it to where you need it..
Unless you don't care about SEO, I would advise against using javascript for this purpose.
It's possible, but such a technique could prevent search engines from properly indexing your site.
I have a legacy JSF application. Now that we want to add i18n support to the application. Some portion of the textual content comes from javascript code and is added dynamically. How do we best internationalize this? The approach that i have in mind is to get the entire resource bundle as a json object from a server side script and then use jsonobj.propname wherever needed.
Is this is a right approach? Do you have any better solution?
That certainly sounds like an approach that will work.
A commercial application I worked on generated a separate JavaScript library for each language as part of the build process. This was done for performance reasons - the results were minified, a single file reduced latency and the results were cached "forever." But not every application has such tight constraints.