For the first time in my life - i dare to interview the interviewer

Recently I went to some job interview, which i, lets face the truth - totally failed. Since my career as developer last longer than 10 years, and had chance to work in a lot of places and on a lot of projects - it is definitely not my first interview, and event not first failed interview. Yet, at this post I want to tell you about some unique experiences I had during this particular adventure.

Details

Lets start from the beginning: It was an interview for the front-end position, and i was asked some javascript questions, like: how to check if a variable is an Array, or: how to prevent click event from bubbling from a child element to its parent. To be honest - I found myself caught unprepared for those questions (since almost year im working as a devops and completely forgot the differences between currentTarget and target, e.preventDefault and e.stopPropagation - shame on me!).
Yet the interesting thing was, that at some point, instead of focusing on my loose situation - I found myself trying to analyze the situation of the team that seeking to hire some frontend developer - and how it would be feel like working at this team

Conclusions

Here are some conclusions I come up with:

• The interviewer didnt knew about ES Array.isArray method (instead - the answer he considered right was

  
  variableToCheck.constructor === Array
  
  

  )
• Interviewer was surprised to find about existence of native javascript "fetch" method - instead he preferred to use jQuery ajax method for doing ajax request
• The question about stopPropagation was a part of question:
  "how do you prevent a click on some element inside modal window to propagate to an overlay, when implementing modal dialog"
  - i tried to point out that nowadays browsers come up with a dialog HTML5 element which do exactly the dialog scenario (without need of coding anything) - but again caught the interviewer by surprise

Summary

Things can have various - a negative and a positive angles. At least I finally find out that as much important as to prepare yourself well for an interview - It is also important to try and figure out: what kind of work need to be done in the place you apply for. For example - this place did the impression of building some kind of new javascript framework instead of using some current, much better and simplier existing tools - a work I for sure would not be comfortable doing...

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