My Own Responsive Admin Template - Part 2

Almost every template/website is using some font icons (because it is easier use font rather than loading images) So In my case I will use font-awesome icons library.
when using this battle tested (and free!) library - you could display icons by using "fa" prefixed classes in your HTML:

      <header class="topbar">
          <a id="sidebar-toggle" class="sidebar-toggle" href="javascript:void(0);">
            <i class="fa fa-bars"></i>
          </a>
          <div class="input-wrapper">
            <input type="text"><i class="fa fa-search"></i>
          </div>

          <nav class="right-nav">
            <a href="javascript:void(0);">
                <i class="fa fa-bell"></i>     
            </a> 
            <a href="javascript:void(0);">
                <i class="fa fa-comment"></i>     
            </a>           
          </nav>
      </header>

Instead of install the library files locally I prefer to use online CDN. That way it can easily included in project:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.css

My Own Responsive Admin Template - Part 1

Motivation

There are lot of various admin templates out there across the internet like here and there (some even free) and you can find every combination you need instead of creating admin dashboard by yourself.
Yet, since I consider myself an experienced front end programmer - I decided to create responsive admin template of my own, sticking to recent best practices of web development.
Lets see there this little journey will take me and what discoveries I will make

Skeleton

So here I'm starting by create the first skeleton of dashboard using the basic HTML5 tags: aside, nav, main, section

  <div class="wrapper">
      <aside><!--for side nav-->
      </aside>
      <header class="topbar"><!--for topbar-->
         <nav> </nav>
      </header>
      <main>
      </main>
  </div>

Basic css

First thing here - I will declare css variables for each section:

:root {
    --topbar-bg-color: #2A62FF;
    --main-bg-color: #EDF5F8; 
    --sidebar-bg-color: #FFF; 
    --card-bg-color: #FFF;
    --text-color: #2F2F2F;
}

body { 
    background: var(--main-bg-color);
    color: var(--text-color);
}

/*  topbar  */
.topbar {
    background: var(--topbar-bg-color);
}
/*  aside  */
aside {
  width: 240px;
  background: var(--sidebar-bg-color);
}
/*  main  */
main {
    background: var(--main-bg-color);
}
/*  card  */
.card {
    background: var(--card-bg-color);    
}

Basic Layout using CSS Grid

Css grid - is a grate CSS3 feature for build various layouts
It gives you the ability to associate html elements with various grid areas

.wrapper {
    display: grid;
    height: 100vh;
    grid-template-areas:
    "aside topbar"
    "aside main";
    grid-template-columns: 240px auto;
    grid-template-rows: 40px auto;
}
.topbar {
    grid-area: topbar;
}
aside {
    grid-area: aside;
}
main {
    grid-area: main;  
}

Implementing javascript Promise by myself

Motivation

I remember that once (at some job interview) i was asked to write the Promise implementation by myself. Since it was long ago, and i dont remember what i wrote then (or if) - I decided to take the challenge again.
So i will write here about the process of implementation step by step.

Class

First of all - i decided to take advantage of ES6 feature - the classes, which makes you to write classes instead of functions:

// using ES6 "class" feature
class MyPromise {
  constructor() {
    console.log('constructor called');
  }
}
const p = new MyPromise();

Executor

One of the most significant specifications of Promise - is that it must receive an "executor" as parameter
Executor must be passed by user and it must be function
I implemented it - by placing executor as a constructor parameter:

class MyPromise {
  constructor(executor) {
    executor();
  }
}
// must get executor fired 
const p = new MyPromise(()=>{
  console.log('executor fired')
});

Resolve and Reject

A Promise executor must have two parameters - resolve and reject.
These "resolve" and "reject" are promise methods which can be passed as parameters to function where user can inject them according to his needs

// passing "res" and "rej" memebers to executor
class MyPromise {
  constructor(executor) {
    executor(this.resolve, this.reject);
  }
  resolve() {
    console.log('resolve fired');
  }
  reject() {
    console.log('reject fired');
  }  
}
const p = new MyPromise((res, rej)=>{
  res(); // calling the resolve
});

Then

Until now it was pretty easy...
Now comes the hard part: the "then"
The Promise must return the "then" and "catch" methods in which user should be able to pass success and error callbacks
It is not difficult to get "then" method returned:

class MyPromise {
  constructor(executor) {
    executor(this.resolve, this.reject);
  }
  ...
  ...
  then() { // then added to "myPromise" object
 
  }
  catch(err)  {
    
  }
}

The goal here is to get "success" callback to fire if "resolve" method called inside the executor
Here where is had 2 difficulties:
- the success callback must be already set when resolve method called (since resolve must trigger it! )
- how to pass "this" into resolve, since it called from "outside"!
I manage to solve the first obstacle by using "setTimeout", to call the executor asyncronously

// then must be returned
class MyPromise {
  constructor(executor) {
    setTimeout(()=>{executor(() => this.resolve(), () => this.reject());});   
  }
  
  resolve() {
   this.success && this.success(); // this.success should be set before resolve called 
  }
  reject() {
    console.log('reject fired');
  }
  then(cb) {
    this.success = cb;
  }
  catch(err)  {
    
  }
}
const p = new MyPromise((res, rej) => {
  res();
});
p.then(() => {
   console.log(`then callback fired `);
})

Data of Resolve

The last specification i decided to implement - is make "resolve" to able pass data to "success"
Here is what i come with:

//  "res" should pass data
class MyPromise {
  constructor(executor) {
    setTimeout(()=>{executor((d) => this.resolve(d), () => this.reject());}); 
  }
  
  resolve(data) {
   this.success(data);
  }
  reject() {
    console.log('reject fired');
  }
  then(cb) {
    this.success = cb;
  }
  catch(err)  {
    
  }
}
const p = new MyPromise((res, rej) => {
  res('o'); // "o" is the example data
});
p.then((data) => {
   console.log(`then fired ${data}`);
})

Summary

The "creating my own Promise" challenge - made me to think about few interesting question I nave not thought until now
I'm not sure i did the best solution possible here, but now i have motivation to look and search for implementations of better javascript coders ...

Hot vs Cold Observables

Recently I noticed the following code In the tests of some effect:

   const action = new fromActions.LoadPosts();
   actions$.stream = hot('-a', { a: action });
   const expected = cold('-b', { b: completion });
   
   expect(effects.loadPosts$).toBeObservable(expected);

This effect purpose is to activate request in response of "load posts" action:
Here is the effect code:

   loadPosts$ = this.actions$.ofType(postActions.LOAD_POSTS).pipe(
    switchMap(() => {
      return this.postService
        .getPosts()
        .pipe(map(posts => new postActions.LoadPostsSuccess(posts)));
    })
  );

According to Ben Lesh's explanation here: "observable is cold if its underlying producer is created and activated during the subscription"
In our case - the producer is Ajax request to "/post" API.
Since request is NOT made until someone subscribed to it - it considered cold
Unlike "loadPosts" action - which is hot:

export class LoadPosts implements Action {
  readonly type = LOAD_POSTS;
}

And here is what the test us checking - is in response to hot action, the cold request is following