I'm currently programming a website that will be in multiple languages and I was wondering if there is an easy way to program the site only once for all languages.
For example, I have a variable called 'lang'. Basically if the user chooses Spanish then I would like the page to load images (or whatever asset) for buttons with Spanish as opposed to English. So for example, by changing the 'lang' variable, an image called 'home_button_eng.jpg' would instead load 'home_button_spa.jpg'.
I am thinking that this would require 'writing' or 'changing' an external document that contains the 'lang' variable which is then loaded by the page.
In other words, user clicks 'spanish' which makes lang='spa' then a new page loads which is connected to that language_choice.js file. The the appropriate content loads up.
Is there a way of doing this? I would much rather do this than duplicate every English page for Spanish.
Certainly you don't want to duplicate any content or code. I would organise all the assets in subfolders based on their language code:
content\
en\
images\
sp\
images\
This avoids having duplicate named files in a single folder for each language. When changing the language, you could store a session variable in your dynamic language of choice (Python, PHP, Ruby...) and use it to populate all the content with the correct language code.
Depending on how dynamic your content will be, you could implement it using .po and .mo internationalisation files and read them in to get your headings, text and so forth, while still implicitly determining the location of the images and other assets based on the language directory alone.
If all your language specific changes have to do with images you can just dynamically load a language specific CSS file.
If you have text as well you'd probably want to make a localization JSON object for each language you support and load that dynamically. The JSON object would contain the element-ids or element-classes with the language specific text or image source, you would iterating over the objects keys with JavaScript and fill-in the language specific data on the elements references in it.
Related
I am working on a React app which allows users to drag and drop UI elements to generate a template. At the end of the process, we have an HTML preview of the template displayed to the user.
What would be the best way to save this HTML (along with the styling) to the server ? A few approaches we tried:
Convert HTML to string and persist. This makes it difficult to import these templates at a later point in time (and extract the react components out of it)
Store all the HTML and styling data in some JSON format. But there is just too much to store (all the margins, padding values etc.)
Any ideas?
EDIT : The reason I am asking this is because there might be a totally different way of storing templates server side which I might be unaware of. For example, we currently store .docx files as templates. They provide an easy way of representing (and visualising) all the styling info of the document. And it is convenient to just save the docx file, than to parse through the HTML and extract all the styling info into a JSON. Now we are doing away with .docx because of some business limitations.
I am building a application for the first time in node.
My website will include a static list of countries, music genres and so on...
Should I store the data in my database, or should I use a static json file with a list(countries, genre)?
My folder structure looks something like src\lib..scsss..server and so on.
My question ultimately is - Is there a best practice for storing static lists in node - if a josn file is preferred where should this exist in my folder structure?
If your data is not gonna change and static, then you should use file system which will have high R/W operation rate compared to communication with DB Server overhead.
Moreover you can use filecache to cache all your static files. Which will load the files even faster.
The answer is really that "it depends" upon some things you have not specified.
First off, if it is a list of data that does not change while your app is running (or changes very infrequently), then you don't want to load it from some remote source every time you need it. You will want to load it once and then keep that list in memory for subsequent use. This will be a lot more efficient for your server.
As to where to store the list in the first place, you have several choices that depend upon who is going to maintain that list and what level of programming skill they might have.
If the list of countries will not change often and will be maintained by a Javascript developer, then you can either put the list right into a Javascript literal in your code or in a JSON file in your file system. If choosing the latter option as a JSON file, it can be in the same directory as your Javascript source files and just loaded directly with require() upon startup.
If the list of countries will be maintained by someone who is not a Javascript developer, but can be trusted to follow JSON syntax rules, then you can put the list in a JSON file. Whether you put this file in the same directory as your JS files or in a separate data directory really depends more upon how your application is deployed, who has permission to do what, etc...
If the list of countries will be maintained by someone who has no idea about programming or syntax rules and should be modifiable completely independently from your code, then you may want to either put it in the database and build some sort of admin interface for modifying it or put it in a plain text file (one country per line) and then parse that file upon app startup.
I am trying to figure out how to develop a multi-lingual website. My background in HTML, JS, CSS is not that broad (I have started only a week ago), therefore my understanding of this may not be the best.
For our example we will be creating three language mutations:
English (main one)
Spanish
French.
Here is what I have come across when I started searching for this under uncle Google.
The longest solution I can imagine: Create three folders named en, es, fr. These will contain the replica of the original webpage (e.g. index.html), but will be translated to respective language. Then on the top panel, you will have a button which upon clicking it will redirect used to a different folder (link is hard coded here). This solution is feasible if we are dealing with very small websites (with a few pages).
Second option I have found, was using WordPress plugins (found quite a few of those). Unfortunately, this solution is not viable, as I am not using wordpress to create a website.
Next option (which I believe would be the best), is to have one page for all language mutations, but instead of real text, you would insert some attribute with the key, which will determine what phrase should be inserted here. It could look like data-toTranslate('sTitle') (making this up). The question now would be, where would you store your texts? One option would be into a database, but I have not worked with them (under websites), therefore I would prefer something like a text file / csv file / or something like this. The problem I have with this solution (except the fact that I don't know how to do it yet :) ) is that I am not quite sure how website would react to this in terms of loading time. Maybe this is the best solution for a developer, yet the worst for the website?
Any comments, links or suggestions which would point me in the right direction would be more than welcome!
EDIT: as this question may seem too broad, I will try to trim it a bit down.
As I believe the option number three would be the best, then I would like to know the following things:
1) What do I need to create when I want to store simple key - value pairs (such as in this translation)? If I were in C#, I would e.g. create either simple XML or CSV file and I would parse it during runtime.
2) Can I achieve this with a simple JavaScript, or do I need to create some specific controllers / directives with AngularJS?
Create the english version of the website statically, as this is the main language. You should have a separate ID for every text element (and don't use obe word ids such as "a" "b" etc., so you can easily fibd them later.
Have a file on your server (text file works too) with the ids of fhe text tags, and the text in a format like
welcome-text | ["Welcome to the website" in Spanish]
-------------
Etc...
(Note: yoh need to store the translated sentences, but I don't know Spanish nor France)
Name your file to something like Spanish.txt.
When the page loads, download this file with javascript trough AJAX (this is where the static english version kicks in as a fallback), loop trough the text file and set the texts to the translated version.
You can of course use PHP with MysQL too, but I thought it is a bit overkill for 2 languages.
And yes, this can be done with 100% pure javascript, not even JQuery is required.
I normally using PHP to handle this multilingual. When every moment user view the website, it will set the default language to ENG. But, when the user select other language as the website display language, the website will reload and the PHP code will call the respective language folder to display all the selected language on the website. So, I think you should having few language folder, then dynamic calling each of the folder to get the keywords words and display it.
I have a webpage that works and all is swell. It is coded using mostly good practises of external css files and minimal inline styles/code. All is well.
Now however, I want to send that page via HTML text only, such as in an email. So there should be no external references to external sites at all. Meaning I now must move my beautiful external references, internally.
I am thinking I can write a javascript function that finds every class of an object, removes it from that class, then gives that object inline "style" attributes equal to what the class has.
But I was wondering if anyone else has other suggestions.
The end goal is to get a wall of text, that when pasted in a non-internet connected browser with no cache or anything, will display exactly what I have on the screen of my "normal operations" page.
There is a perl CPAN module for this:
CSS::Inliner
you can also find the source on github:
https://github.com/kamelkev/CSS-Inliner
I need to implement a webform (JSP, struts) featuring loads of checkboxes and textfields. Basically I have a tree made of checkboxes which has to be extendable (like adding a new node). On another page the same data is used, but refined. So you add again child nodes to the mentioned data structure using textboxes etc. I can describe the datastructure in XML:
But contains about 100 rows in reality.
I found 3 approaches:
1. Do a webform in JSP which lowers the user experience because lots of postbacks are necessary (every time i add/edit/delete a node, subnode...)
2. do it in async fashion. -> loads of javascript to handle the structure of the data (keep the XML data in a hidden div and update ui)
3. go for a RIA like OpenLaszlo
What do you suggest?
If you already know OpenLaszlo, go for it. You will end up with a better user experience with less work.
You should target user interface and performance when developing an app. So IMO, plain JSP will be my last approach.
You can consider client side rendering.It allows to build very responsive web apps:
build your JSP pages to deliver JSON data, no HTML here
use a javascript templating engine in the browser to convert the data in HTML client side. I'm the author of PURE but there are plenty of others on the web that may suit better your style
when the user types or press submit, parse the form using a common technique found in many frameworks. i.e: the "name" attribute is the path to set the value in the JSON<input name="employee.name" type="text" ... />
When the form is parsed, post back the JSON to a JSP page that will read it and do the backend work.
You can use XML instead of JSON and XSLT instead of a JS templating engine, but if you target the web browser only, it adds an extra layer of complexity and trouble to parse the XML.