Localization and Internationalization.

As the world is getting bigger and online users are increasing rapidly, websites or applications need to provide the websites which is proper in the different nations especially for the international companies. Because each country use different languages and formats for date, time, currencies and others. Unfortunately, it is easy to overlook to consider users from a different countries. To fix these issues, we need to understand 'Localization' and 'Internationalization'.


Localization

Localization refers to the adaption an existing website to local language and culture in the place that will using the current website.It is sometimes written as 'i10n' which is 10 number of letters betwen i and n. A successfully localized website is that users can feel naturally when they use the website.


Internationalization

Internationalization supports the languages and other formats of people from the different world and cultures. It is often written 'i18n' which is eighteen letters between 'i' and 'n'. In the websites or applications, languages or formats are typically localized in according to the users by locales. 

Internationalization might involve the below:

  1. Barriers might remove in designing and developing to localization or international deployment. This entails the enabling the use of Unicode(UTF-8), or the proper character encoding.
  2. Add markup to support bidirectional text, or languages. Or add CSS support for vertical text.
  3. Code should support local, regional, language, or culturally related preference. For example, each country has the different format of date, time, calendars, number and even name and address.


Locales

A "locale" is a collection of language-related user preference information represented as a list of values. The locales argument must be either a string in BCP47(https://tools.ietf.org/html/bcp47) or an array of language tags. If there is no arguments in locales, the default locale is going to be used. The language tag which is languages, scripts, countries and others in BCP47 can find in the IANA Language Subtag Registry.

Implemented Actions-dropdown list for actions button

I've worked with dropdown components to change reusable component for a long time but it is refactored. Because the components are strongly coupled and dependent. I thought I understood what coupling and dependency are, but I was wrong. Knowing and understanding are totally different.

Dependency is the relationship between two classes. If a class Vehicle uses a class B, then A depends on B. If a class A cannot be reused without a class B, then a class A is dependent and a class B is dependency. According to this, my components have problems as a reusable component.

My next task is to implement actions button with reusable dropdown components. When I did with new component, it was more convenient than old version of dropdown. I didn't need to pass a lot of props in component. I'm still figuring out how new dropdown components work as a reusable component.

It has some issues related to the font and icon style. It will update later.

I'm also studying about Internationalization API in ECMAScript and why we need to use this api for handling messages. (http://www.w3.org/International/) and underscorejs (http://underscorejs.org/)

Implement dropdown components for reusability

I've implemented drop-down components for settings with using modal dialog.
However, there are some parts which need to use drop-down stuff on html5-client, so I changed drop-down to be reusable component.


My Component Structure :

<Dropdown>
  -<DropdownTrigger>
  -<DropdownContent>

<DropdownTrigger> can be a trigger which open the drop-down menu like button.
<DropdownContent> can be lists of the menu.

In case of the settings menu, the horizontal three dots is <DropdownTrigger> and the three menus are <DropdownContent>.

<Dropdown> Component : 
 This component controls that the menu is opened(showed) or closed(disappeared) by using clicking button or key-down event.
  It also close the drop-down menu automatically when user click outside of the menu.
  For key-down event, drop-down menu is only allowed to use enter key, space bar and down arrow key.

<DropdownTrigger> Component : 
  In this component, button is used as a trigger. So, a developer can pass icon name or label of button as a property. 
   
<DropdownContent> Component : 
  With this component, the menu list is just shown when user click the button(trigger).

<SettingsDropdown> Component:
  This component includes the specific information about the menu such as the title, icon, tab-index for keyboard control, and others.
  There are a function related to keyboard control in this component.
  In this component, a developer can import <Dropdown>, <DropdownTrigger> and <DropdownContent>.

<Accessibility>

  Drop-down menu also includes accessibility stuff for button and the list. Button has aria-haspopup, aria-labelledby and aria-describedby.
  

  

  * aria-haspopup : Indicates that the element has a popup context menu or sub-level menu.

  * aria-labelledby : Identifies the element that labels the current element. It provides the user with a recognizable name of the object

It provides the user with a recognizable name of the object. It provides the user with a recognizable name of the object. It provides the user with a recognizable name of the object.

  * aria-describedby : Identifies the element (or elements) that describes the object

  For menu list, each menu also has aria-labelledby and aria-describedby. It has paragraph tag for label/description of the menu.

A developer can use <FormattedMessage> component to be read by screen reader. So, description is message for developer, and defaultMessage is for screen reader. This message is also declared at en.json which is English version string.

Dropdown list for setting menu

I'm working on the dropdown list for setting menu.
When a user clicks setting button, it will be shown as dropdown list, not modal window.


So, I googled it to figure it out how to work at React and examples.
Well, I found lots of examples and most of them are provided as a package like react-menu, react-dd-menu, rc-menu, and others.
I downloaded it to check how it works.
But everything that I set up on my test server, they gave me an error.
So I couldn't do with that.

My times were totally waste of times.

Somehow, I did implement that the dropdown is shown when I click the button.
But, this dropdown is shown at the bottom of the window.
So, I'm studying animation on React(https://facebook.github.io/react/docs/animation.html)
and figuring css out with this example (http://codepen.io/anon/pen/jALAjk).

Complete my PR and logout confirmation modal.

My PR was finally merged yesterday on git repository. To my shame, I didn't know well the way that I implement the code simply and exactly. I also had mistake like missing space or semicolon, although I did check my code with lint. I should learn and study about that according to practice coding many times and taking a look others' code. And I should be more methodical person about my work.


I implemented a confirmation modal for logout.
In current code, a modal is already used for Setting menu. So I tried to use the same function and style with it. However, a modal for confirmation was shown behind of Setting menu, not in front of it and I couldn't click any button on confirmation modal.So I implemented another modal for confirmation.

This modal is shown according to double click of Leave Session menu. Setting menu lists are called from the array(submenus) so I compared with class name of menus, not index. Because the menu order can be changed.

Although my PR was merged, I'm going to test my logout process.

My first pull request at git repository.

I worked with HTML5 client logout from the second week of Jun.

After finished to implement, I tried to send pull request at git repository on last week.

However, I had some problem log-in part after I did git stash and fetch, merge from upstream/master branch.

According to console log, the meeting room could not be created and the 'validated' column of Users was set to false. When user logout, the user could not log out normally.


I could not find where the error was for the first time. However, I compared with the file from my laptop, I found the error. The error was in eventHandler.js at meeting.


Before merge with upstream/master, the code was..

eventEmitter.on('get_all_meetings_reply', function (arg) {


After merge with upstream/master, the code was changed to

eventEmitter.on('get_all_meetings_reply_message', function (arg) {

This message is coming from MessageNames at akka-bbb-apps, the version between mine and server was different.


After checking everything, I sent pull request at git repository for the first time.
I got comments a lot about my PR and I fixed everything.

Some of them was that I made files unnecessarily.
I divided every function in different files, especially the functions related to clear session and set the location when user logout.
But I put it together in Auth. 

I also set up dev_1.1 of bigbluebutton development environment.
And I'm implementing to open confirmation box when user do double click "Leave session"

SVG and Canvas in HTML5

SVG

• It stands for Scalable Vector Graphics.
• It is used to define graphics for the web.
• It is also define graphics of xml format so users can use text editor after create the svg images.
• It is built into the document using elements, attributes and styles.
• While SVG can be delivered as a standalone file, the initial focus is on its natural integration with HTML.
• Users can use text editor for svg.

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

The <height> and <width> attributes define the height and width of  the <svg> element.
The <circle> element is to draw a circle.
The <cx> and <cy> attributes are the x and y axis of the center of the circle.
The <r> attribute is radius of the circle.
The <stroke> is the color of the circle line and the <stroke-width> is the border of the line.
The <fill> is the color of the circle.


Canvas

• It is used to draw graphic.
• It present bitmap images with JavaScript. (pixel based)
• It is introduced by Apple for Safari, and other graphical widgets.
• The images in canvas are deleted after rendering to the browser. If the image is changed,  a user needs to re-invoke the image to draw a entire scene.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid black;"> </canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

Working with new computer at three weeks in CDOT.

Tuesday : I got a new desktop computer on last Tuesday from professor and started to assemble my new computer. I assembled my computer and tried to install windows but it was stuck in the first step of installation. I thought computer is very slow to install windows so it had some problems.

Wednesday : I assembled my computer with another parts of computer and tried to install windows again. Fortunately, it worked and checked the update whole day.

Thursday : My computer didn't finish to check windows update when I turned on the computer. So I waited to finish it.

Friday : I started to set up the BBB's development environment on my new computer.
I changed "sudo npm install grunt-cli"at package.json.
Unfortunately, it showed the error when I run "./start.sh" at bigbluebutton-html5 directory.

Error was ..

  "react" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/component.jsx (web.browser)

  "load-grunt-tasks" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/Gruntfile.js (web.browser)

  "react-dom" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/imports/ui/components/chat/message-list/component.jsx (web.browser)

  "react-router" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/component.jsx (web.browser)

  "history" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/imports/startup/client/routes.js (web.browser)

  "classnames" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/component.jsx (web.browser)

  "underscore" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/imports/ui/components/button/component.jsx (web.browser)

  "react-intl" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/client/main.jsx (web.browser)

  "react-addons-css-transition-group" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/imports/ui/components/whiteboard/default-content/component.jsx (web.browser)

  "react-modal" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/imports/ui/components/modals/settings/submenus/SessionMenu.jsx (web.browser)

  "react-autosize-textarea" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx (web.browser)

  "classnames/bind" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx (web.browser)

  "react-intl/locale-data/en" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/client/main.jsx (web.browser)

  "react-intl/locale-data/es" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/client/main.jsx (web.browser)

  "react-intl/locale-data/pt" in /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/client/main.jsx (web.browser)

I just tried to clone my git repository again and my console showed another error when I run "npm install" according to the instruction.

Error was ..

  npm ERR! Error: EACCES, mkdir '/home/firstuser/tmp/npm-112557-pCIYTMRR'

  npm ERR!  { [Error: EACCES, mkdir '/home/firstuser/tmp/npm-112557-pCIYTMRR']

  npm ERR!   errno: 3,

  npm ERR!   code: 'EACCES',

  npm ERR!   path: '/home/firstuser/tmp/npm-112557-pCIYTMRR' }

  npm ERR!

  npm ERR! Please try running this command again as root/Administrator.

  npm ERR! System Linux 4.2.0-27-generic

  npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install"

  npm ERR! cwd /home/firstuser/dev/bigbluebutton/bigbluebutton-html5

  npm ERR! node -v v0.10.25

  npm ERR! npm -v 1.3.10

  npm ERR! path /home/firstuser/tmp/npm-112557-pCIYTMRR

  npm ERR! code EACCES

  npm ERR! errno 3

  npm ERR! stack Error: EACCES, mkdir '/home/firstuser/tmp/npm-112557-pCIYTMRR'

I tried to set up on my laptop on Sunday.
My laptop also had the same problem so I googled the solution.

Finally, I found the solution.
"npm install" was not correct.
"sudo npm install" is correct.

What a stupid I am!! OMG!!

softlock problem in VMware

When I turned on the VMware, it showed "soft lockup - CPU#1 stuck for 23s"

I tried to forced shutdown and then VMware seemed to work correctly.
Unfortunately, my VMware could not find an ip for my remote server.

I tried

sudo service networking restart
sudo /etc/init.d/network restart
sudo service network-manager restart


sudo ifdown eth0 && sudo ifup eth0


But this command showed "No DHCPOFFERS received." and "No working leases in persistent database - sleeping."


Finally I found the solution.
apt-get -o Acquire::ForceIPv4=true update