DEV Community: Khaled Taymour

(Part-2) Internationaliztion Design & implementation tips

Khaled Taymour — Thu, 22 Sep 2022 18:58:14 +0000

I18N Design and UX Consideration tips:
I18N implementation tips:

I18N Design and UX Consideration tips:

Allow for the expansion of UI elements: All UI elements that include text — strings and integers displayed to the user—must be flexible to accommodate longer or shorter words. Usually German words are longer than English strings while Asian languages are usually shorter. As a general rule, if the English text is less than 10 characters, plan for at least a 300% expansion for translated strings. If the English text is more than 10 characters, 30% expansion should suffice.
Font size & emphasis (italics & bold): A font size less than 8 point font is really hard to read in English, but it’s impossible to read in Chinese. Also font emphasis don’t register in most East Asian fonts.
UTF-8: Use UTF-8 everywhere. This includes in your HTML, server-side language, database, etc. Unlike other encodings, UTF-8 encoding handles almost all languages really well.
Keep graphics, icons, and images separate from the text.
Keep images regionally related: A simple example is if there is a picture of a car displayed, updating the picture for regions where cars have the driver side on the left or right and drive on the left or right side of the road would be a good idea for a fully localized app.
Keep colors culturally relevant and appropriate: In the West, red often signals danger but in parts of East Asia, red is associated with happiness. Notice +8 in the below image.

Use generic versions for contact details: Using more optional fields and not marking all fields as required, e.g. Many countries such as Hong Kong don’t have post codes.
Avoid using countries flags to represent languages or locales: Many languages are used across different countries. For this reason, it’s advisable not to use a single flag to represent various languages, such as the Portuguese flag for both Portugal and Brazil. A more culturally considerate option is to use regions, like “Brazil,” or specific languages, like “Brazilian Portuguese.” Law/Policy: For example, in EU Cookies should be noted to the users. ----- ## I18N implementation tips:
Avoid “Just concatenating strings”: Translating languages is more than converting individual words. The way sentences are structured differ across languages, and concatenating strings makes it difficult for translators who must consider word order, gendered words, abbreviations, and more! Best practices recommend building layouts and strings for translation, that let translators change the order of words if needed.
Keep keyboard short-keys alphanumeric: Example: Although Spain & Mexico both speak spanish, they have different keyboard layouts. For example, the “@” symbol on a Mexican keyboard is on a number key, whereas on the Spanish keyboard the same symbol is on a letter key.Keeping short keys alphanumeric minimizes user error, improving the overall user experience.
Sorting and filtering across different locales: A table that sorts columns of strings by A-Z using ascending and descending characters does not always work across all locales, particularly with languages that have different dictionary orders than English — such as Chinese, Arabic, and Russian. In Javascript, String.prototype.localeCompare() is one simple solution to resolve this issue.
Units & Maps: e.g. weight units differ from a country to another e.g. in US pounds is the default weight unit while in Egypt it is kilos. Also for japanese user it is more relevant to show a map Tokyo instead of LA.
Test across multiple languages: To ensure an app is capable of displaying locale-specific content of varying lengths and formats, instead of just using basic Lorem Ipsum, use the Random Text Generator to get test data similar to Lorem Ipsum, but in different languages.
Continuous localization: Continuous localization optimizes the process of Continuous Integration / Continuous Deployment (CI/CD) by including machine-translated strings for testing. This helps with local development quality checks, particularly for common I18N bugs.

(Part-1) Internationalization & Localization Definitions

Khaled Taymour — Thu, 22 Sep 2022 18:34:10 +0000

Internationalization (I18N) & Localization (L10N)

Definitions:
Technical Notes:

Definitions:

Globalization (G11N): 🌍

Includes non-engineering business units and categories like marketing, legal, sales, etc.

Internationalization (I18N): 🗺️

is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.

Translation (T9N): ✍️

is the most granular level, the process of converting text strings from one language into another.

Localization (L10N): 🎌

refers to the adaptation of a product, application or document content to meet the language, cultural and other requirements of a specific target market (a locale). is the process of translating the internationalized app into specific languages for particular locales, such as Arabic in Egypt (ar-EG) or English in the UK (en-UK).

Technical Notes:

Internationalization typically entails:
- Separating localizable elements from source code or content, such that localized alternatives can be loaded or selected based on the user's international preferences as needed.
- Enabling the use of Unicode, or ensuring the proper handling of legacy character encodings where appropriate, taking care over the concatenation of strings, avoiding dependance in code of user-interface string values, etc.
- Support bidirectional text, or for identifying language. Or adding to CSS support for vertical text or other non-Latin typographic features.
- Enabling code to support local, regional, language, or culturally related preferences. Examples include date and time formats, local calendars, number formats and numeral systems, sorting and presentation of lists, handling of personal names and forms of address, etc.

Notice that the above items do not necessarily include the localization of the content, application, or product into another language; they are design and development practices which allow such a migration to take place easily in the future but which may have significant utility even if no localization ever takes place.

Internationalization significantly affects the ease of the product's localization. Retrofitting a linguistically- and culturally-centered deliverable for a global market is obviously much more difficult and time-consuming than designing a deliverable with the intent of presenting it globally. (Think back to the Y2K -Year 2000 problem- effort and trying to "undo" two-character year fields that were built on the assumption of "19xx").

Localization is not only synonym for translation of the user interface and documentation, it is more complex issue. It can entail customization related to:
- Numeric, date and time formats
- Use of currency
- Keyboard usage
- Collation and sorting
- Symbols, icons and colors
- Text and graphics containing references to objects, actions or ideas which, in a given culture, may be subject to misinterpretation or viewed as insensitive.
- Varying legal requirements.

VSCode Remote Connection

Khaled Taymour — Mon, 26 Apr 2021 15:55:33 +0000

In this article I will go through how to connect remotely in VSCode using SSH remote extension.

In both local and server: check that you have open SSH installed by searching Manage Optional Features in the Windows start menu.
In both local and server: open services.msc and make sure that the services of ssh are running.
In Server cmd: run netstat -a | findstr 22 You must see something like this (Listening):

its default port is 22.

From Local cmd: To go to the server run ssh <SERVER_USERNAME>@<SERVER_IP>
You’ll be asked to enter the server password.
In Local cmd: Now I am in a cmd seeing the Server
In Remote in C:\Users\<USERNAME>.ssh: run ssh-keygen and name the file of the ssh e.g. testSSH.
In Local: Create a config file (with no extension) in C:\Users\<USERNAME>.ssh.

Host <AnyName>
  HostName <IP>
  User <USERNAME>
  IdentityFile ~/.ssh/<name of the ssh file on the server made in previous step (e.g. ~/.ssh/testSSH)>

In VSCode in Local:

In Local: Make Sure to install Remote extension by Microsoft.
Click on its icon (1)
(2) select Remote-SSH: Connect to Host
Either do one of the following
Choose the just configured SSH Host

(3) Enter e.g.: ssh <SERVER-USERNAME>@<SERVER-IP>
(4) Choose as below in the image
A new instance of VSCode will be open.
You’ll be asked for the Operating System, the Server Password.
You’ll find that you’re connected to the Server
You can open terminal in VSCode but firstly make sure that the server has Git downloaded.
You are now in the Server terminal:
Now you can download plugins and extensions as Live Server on the server from your opened VSCode window.
In Local VSCode: File → Open Folder → type your project path on the server.
You can run Live Server extension and it will show that it is running on a port e.g. 5501 so now you can browse to http://:5501/ to see live dev.

Thanks for your time, and I am happy to get feedbacks.
Khaled Taymour