Week 9 - git command and starting tooltip

From the last week, I worked on creating and handling session for the close private chat. I sent pull request it but there are several comments on my pr so I am going to fix it.

I learned new command of GitHub. After sent pull request, new tasks were started without merging previous one.
New branch was created with git checkout -b new_branch 

When the new branch send pull request, the history in the new branch included the pr of closing private chat because it was not merged yet.

So, this new branch should be divided from the previous pr.

When there is no master branch in the branch list, we need to create it first.

git fetch origin
git checkout -b master upstream/master

After created master branch, start to pick the specific commit up and assign into the new branch.

git checkout -b slide-arrow-button upstream/master
git cherry-pick 1b3d5a ( this number is hashcode, you can check it on the send pull request page of GitHub)

Don't forget the test! After then, you can send pull request with new(picked) branch.


My next task is creating tooltip in React.

Tooltip is displayed string or hint which is explained when the mouse hover is occurred or the focus is on the icon, url and others.

In the css, just need to add style for some classes.

And then it works like below.

For Reactjs, we need to create new component for reusable. There are lots of plug-in related to tooltips-react, even react-bootstrap. But we are going to create new component. 

Reference : css_tooltip

Week 8 of winter-term at CDOT and underscore.js

Due to I had terrible flu last week, I could not work well. So, I'm still working on session for closed private chats. When user1 close(remove) the chat with user2 and/or user3, these chatID are going to save in the session. Also the closed chat seems like removing from the list. The first version of code was finished to implement, but my code was so much messy, too long and it is difficult to understand for others although I wrote down comments. So I'm working on improving my code.

For the first time, I thought using flag is efficient to send information into session. So, if currently opened chat is removed(closed), flag is set to true, and this chat is going to be displayed again on the list. But, my logic was not proper because of flag so I removed and improve it by some functions in underscore.js.


Underscore.js is one of the java script library which provides useful and functional programming utility(function) to user. There is nothing to need built-in object for using it.


I'm going to improve my previous code to functional way and do another task

References : underscore.js

SessionStorage

At this week, I worked on removing the private chat on the chat-list when the user closes one of the private chats. For the first time, it looked working well, but the list returned when I refreshed a page. So, I thought some logic is needed to add in DB, I spend lots of time for it. But, using sessionStorage was a correct at my current task.


Session refers to a limited time of communication between server and client. In the sessionStorage, you can store large amount of data into it without any effects on the performances of the web or mobile application. Also, expiration of session in sessionStrage is whenever the page session is ends. A page session lasts for the browser is opened including page reloads and restores. When a user open a new tab or new window, new session will be initiated.

sessionStorage contains key-value pair.
 --> sessionStorage.setItem("name", "BBB");

When you want to use some data from the sessionStorage, just call the key of session.
 --> sessionStorage.getItem("name");

To sessionStorage clear.
 --> sessionStorage.clear();


**localStorage vs sessionStorage

localStorage object stores the data with no expiration data. The data survive until the user delete it.

sessionStorage object is equivalent to localStorage but sessionStorage is expired when the user close the tab or browser.


References:
localStorage guide
sessionStorage guide

React Router in closing the private chat

At this week, I am struggling with React Router part. My task is removing the private chat from the list when the user select close it. When the user click "X" button(icon) of opened private chat, the link should be moved from "/users/chatID" to "/users/" and the opened private chat should be closed.


Router is used to keep UI in sync with the URL. It is a powerful and simple routing library and helps to add new screen and flows to application quickly, keeping url in sync with what's being displaying on the page. I thought there are some specific logic to handle changing url without reloading a page in server-side, but nothing is in there.

In the Route component, the url will be changed and the private chat window will be opened automatically. And when the user input just user/chat, public chat room is going to be opened instead of opening the private room.

This component is Link which is the primary to navigate the page(url) and it is the similar functionality with <a> tag in HTML5 which is not including reloading the page. If the current route is linked including the descendant, this <Link> will be active.


I am going to implement the part of re-rendering the messages from other when the user close the private chat. I need saving the information of the closed chat and filter by using this information.

CSS Pseudo-elements and SASS

CSS Pseudo-elements

I already took the JavaScript and CSS course in the second semester. Even though I learnt about the basic level of CSS from INT222, I didn't know well about the pseudo-elements of CSS. From the last task, my code was improved using pseudo-elements instead of using huge number for margin or padding.

To display the white line between the title and two circle, my code was

but it is changed to this.

fixed huge number on margin-left and top. Also it changed to use before pseudo-element.


:before
-> it can be used to insert some content before the content of an element.

:after
-> it can be used to insert some content after the content of an element.

:first-line / first-letter
-> it is used to add some specific style to the first line / letter of text.

:selection
-> it is to add style which are selected part by user.

More info of pseudo-elements : CSS Pseudo-elements


* !important rule in CSS
-> This rule is used on a CSS declaration, and it can override any declaration in CSS.
It is not recommended rule to use generally, but if specific style / CSS which is overrided by external libraries(Bootstrap) can allow to use !important rule. It can add the same line as CSS. ( padding: 0 !important; ).

References:
!important rule
When using !important is the right choice

Sass (Syntactically Awesome StyleSheets)

* Sass is a scripting language which is interpreted into CSS. This is very useful script to improve CSS by using many function in Sass. There are two types of syntaxes in Sass. The first one is Scss which is extension of CSS. So, CSS can be worked the same meaning in SCSS stylesheet. Also SCSS understands the most CSS hacks and vendor-specific syntax. Another one is Sass which provides a more concise way of CSS writing. It uses indentation rather than brackets for nesting of selectors or classes. The indented syntax has all the same features.


References :  

SASS Style Guide
SASS Reference

In case of error when arrow function is used

Arrow function in ES6

It is shorter syntax than function expression and it is always anonymous. In Asp.net, arrow function is called lambda expression. This can be called local functions that can be passed as arguments or returned as the value of function calls. Arrow function does not need to use bind().

Basic Syntax

(p1, p2, ..., pN) => { statements }
(p1, p2, ..., pN) => expression // => { return expression; }

(single) => { statements }
single => { statements }

() => { statements }
() => expression // => { return expression; }


Case 1. Callback functions with dynamic context and using global property

"this" keyword is global and allows to change the context which is depends on the means a function is called. It is like "something is happening with this object." So, for dynamic coding, "this" can be efficiently used.

"arrow function" binds the context statically on declaration and is not allowed to use dynamically.

For example, when event listeners are attached to DOM, it is on the client side programming. So, for implementing event listeners, we should use this keyword. Because an event triggers the handler function with this as the target element. Also, when global object/property are using in the code like this, window and others, function() is needed to use instead of using arrow function.


Case 2. Invoking constructors
"arrow function" is not allowed to be used as a constructor due to JS throw an exception.

e.g)
var Example = () => {};
var exp = new Example();  // --> TypeError: Example is not a constructor.

Case 3. Low readability
When the code is toooo short, because arrow function is using too much.

e. g)
let calculate = (a, b) => b === undefined? b=> a*b : a/b;
let result = calculate(6, 3);

This can be changed like below.

function calculate(a, b) {
  if(b === undefined) {
    return function(b) {
      return a * b;
    }
  }
 return a / b;
}

Web accessibility basic

As working and living with the WEB is fundamental feature in the modern society, the needs of consideration for all people whatever their language, hardware/software problem, age, location, any other problem on physical or mental is rapidly increased. Therefore, web should be composed without any inconvenience or trouble to access or use for people with a diverse range of hearing,  motion, vision, and others.

Due to the web is essential in many part of life including education, government, employment, money management, and even hobby, web should provide equal access and opportunity for people with disability, especially. The reason why is that web accessibility includes a wide movement of removing barrier to prevent access to webpage for people.

The Web Accessibility Initiative which is a project by the World Wide Web Consortium(W3C) and published the Web Content Accessibility Guidelines(WCAG 1.0) in 1999.
The WCAG 2.0 was released in 2008 to recommend and the most governments in many country are applying gradually this web accessibility guide to their official webpage.


The several components of web development and interaction to improve the web for accessibility.

• Content - the information in a web page or web application (text, images, sound, presentation and others)
• Web browsers, media players and other "user agents"
• Assistive technology - screen readers, alternative keyboards, switchers, scanning software, etc
• users' knowledge, experiences, and in some cases, adaptive strategies using the web
• Developers - designers, coders, authors, etc
• Authoring tools - software that creates web sites
• Evaluation tools - web accessibility evaluation tools, HTML/CSS validator, etc.

How to communicate each component?
For example, e-Learning contents or website developers use authoring tools to develop or design website, evaluate their work through evaluation tools. Also, users use e-Learning site through web browsers and study with media players in the web browser or other user agents. In case of people with disability need to use assistive technology to access learning web site. If the web site does not provide any proper efficient way(word, sentences, etc) to assistive technology for figuring out, then users can be faced with problem to access the web site. This is why web accessibility guide is the most important.


https://www.w3.org/WAI/intro/components.php

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