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;
}