Node.js pros and cons

* Node.js

Node.js is server-side platform(Not framework!) built on Google Chrome's JavaScript Engine(V8 Engine).
The definition of Node.js by official site is..

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.


Node.js is an open-source and support cross-platform environment for developing a diverse variety of server tools and application. Also, it provides a various JavaScript library which simplifies the development of web applications. Node.js are asynchronous and non-blocking library.


- Advantage of Node.js

1. Speed : Node.js is executed on Google Chrome's V8 JavaScript Engine. This engine compile directly JavaScript code into machine code. So, execution speed is fast and efficient. In addition to, the runtime environment increases significantly the execution speed by supporting non-blocking I/O operations.

2. Using a single programming language : Since Node.js consist of JavaScript language and provide JavaScript libraries, developers are able to use only one language between server-side and client-side. It brings easy and efficient development environment to deploy application. For example, developer can choose express.js or meteor.js as a backend part and backbone.js or React.js as a frontend part.

3. npm :  npm makes it easy for JavaScript developers to share and reuse code as a package. Also, it make easy to update the package. Numerous kind of package are involved in npm and it is still growing.

4. Facilitates Real-Time Application Development : Node.js is used to build real-time and multi-user applications like chats. It manages multi-user requirements through event loop. It uses websockets simplify and speedup bi-directional communication between the server and the client.


- Disadvantage of Node.js

1. Unstable Application Programming Interface : In contrast with C++ or Java, Node.js keeps changing at frequent intervals. So, sometimes, backwards-incompatible changes are occurred and made developers to change the existing code.

2. Scalability - Node.js does not provide ability to scale in order to take advantage of the multiple cores which is commonly in today's server-class hardware.

3. Node.js is not able to support CPU-intensive tasks. It is only for I/O operation.

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