DEV Community: Anik Khan

JavaScript Interview Preparation Resources

Anik Khan — Wed, 29 Jul 2020 17:46:27 +0000

I am a bit tired now, yet I thought I would share these resources that I collected for preparing for my JavaScript Interview Preparation.
I believe it would be beneficial both for the frontend or backend(node.js) role.

Technical Coding Assessment

Many companies nowadays test their candidates via an online coding platform i.e. HackerRank. It is one of the first barriers to overcome.
This a source of fear and anxiety for many of us. Only preparation and practice in the right direction can help us get through this step.
Luckily platform like HackerRank & CoderByte has free interview preparation kit that are meant to help overcoming such fear.

For algorithm reference, check this repo-

JavaScript Algo

Core JavaScript Question

This is where your domain-specific knowledge will be put under test. I am gonna list a few of the most reliable resources that I have curated from the internet and renowned bloggers.
First, I highly recommend this series from Eric Elliot. I urge you to finish reading all of the posts from the series; it's a great value.

Master the JavaScript Interview (Must)

Conclusion

These resources are by no means mine but their respective owners & contributors, I just curated it for better reach. If you know any better resources, plz share in the comment; it'll benefit us.

Cover Photo by Steve Halama on Unsplash

JavaScript30: Day 4 - Solve Real Life challenges using Array Methods

Anik Khan — Wed, 22 Jul 2020 14:54:43 +0000

I've completed the Day 4 of Wes Bos JavaScript 30.
Unlike the previous challenges, this one is solely focused on language features, no HTML/CSS. It's about using various array methods to manipulate data.

What did I solve?

Wes Bos posed some of the very interesting and real-life problems which can be solved by various array methods i.e. Array.prototype.filter(), Array.prototype.map(), Array.prototype.sort(), Array.prototype.reduce()

My Experience

To be honest, this part made me feel at home😊 Being someone who had spent more time in the backend, it comes off as less intimidating than the CSS.
Having said that, I struggled with a couple of challenges especially the last one.

The Challenge & My Learnings

Given Data:


    const inventors = [
      { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
      { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
      { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
      { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
      { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
      { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
      { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
      { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
      { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
      { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
      { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
      { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
    ];

Filter the list of inventors for those who were born in the 1500's

const earlyInventors = inventors.filter((inventor) => inventor.year >= 1500 && inventor.year < 1600)
console.table(earlyInventors)

The filter() method- goes through each array element, check them against a certain condition, returns a new array with the elements that met the condition.

Give us an array of the inventors first and last names

const inventorsName = inventors.map((inventor) => `${inventor.first} ${inventor.last}`)
 console.table(inventorsName)

The map() method- goes through each element, make them do a specific task, and returns a new array with the result.
Here, each inventor from the inventors array is passed to an arrow function that concatenates the first name and last names & returns an array with the results

How many years did all the inventors live all together?

const livingYear = inventors.reduce((acc, inventor) => acc + (inventor.passed - inventor.year), 0)
console.log(livingYear)

The reduce() method- executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
When you asked to accumulate something from an array, you probably wanna use reduce() method.
The reducer function that it executes can take up to 4 arguments; but commonly we use 2 arguments- accumulator and the current value.
The accumulator is the accumulated value previously returned in the last invocation & we usually initially initialize it to 0 (as the second argument of reduce() method).
And the current value is the current item being processed.

Sort the inventors by years lived

const byLivingYears = inventors.sort((a, b) => {
      return (a.passed - a.year) < (b.passed - b.year) ? 1 : -1
    })
    console.table(byLivingYears)

The sort() method- when provided with a compare function(which takes 2 arguments) like here, all non-undefined array elements are sorted according to the return value of the compare function.
Return value -1 means, item comes first
Return value 1 means, item comes last
Return value 0 means, the item's position is unchanged
For example, aNumber < anotherNumber ? -1 : 1
means aNumber will comes first if it less than the anotherNumber & vice versa.

*create a list of Boulevards in Paris that contain 'de' anywhere in the name https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris *

//select all the boulevards anchors form the page
    //#mw-content-text is found by inspection chrome dev tool
    const linksNode = document.querySelectorAll('#mw-content-text a')
    //convert the linksNode to array, find the text of the anchor tag & get all that includes 'de' in them
    const deBoulevard = [...linksNode].map(link => link.textContent).filter(boulevards => boulevards.includes('de'))
    console.table(deBoulevard)

To solve this we need to use multiple array methods as you can see.
First, we select the DOM element that contains all the anchor tags, using the mw-content-text id
As querySelectorAll() returns a nodeList we need to convert that to an array & then we used map() to find the text of the anchortags and then used filter() to filter by checking if they include 'de'

Now working with different data-

    const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry',
      'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert',
      'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester',
      'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano',
      'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle',
      'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose',
      'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert',
      'Blair, Tony', 'Blake, William'
    ];

See all elements are string containing last and first name. They aren't structured correctly to work with. So if we need to do some operation on them we need to give them some shape based off of our challenge.

Sort the people alphabetically by last name

Sort the people alphabetically wouldn't be hard but as the first name and last name are packed in one single string, we need to find a way to split them. and do the operation accordingly.

    const peopleByLastName = people.sort((a, b) => {
      //The split() method divides a String into an ordered list of substrings
      const [aLast, aFirst] = a.split(',')
      //const [aLast, aFirst] is called restructuring 
      //which makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
      const [bLast, bFirst] = b.split(',')
      return aLast > bLast ? 1 : -1 //in ascending order. smaller letter like 'a' comes first
    })
    console.log(peopleByLastName)

Sum up the frequency of each of these-

 const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car',
      'truck'
    ];

This one is a bit tricky for me to solve. But the idea was pretty simple. The concept is each array item will be the object's key and its number of appearances will be it's key. For example, {car: 5, truck: 2}

create an empty object
loop through each array item; when a new item is found assigned it's value to 1 and if the item is existed previously increase it's value.

   const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car',
      'truck'
    ];
    const vehicle = data.reduce(function (obj, item) {
      if (!obj.item) { //checks if the item is new
        obj.item = 0 //assign 0 for the new item
      }
      obj.item++ //icrement the value
      return obj
    }, {})

GitHub:

View on GitHub

JavaScript30: Day 3 - CSS Variables😲😲🙀

Anik Khan — Tue, 21 Jul 2020 17:41:47 +0000

I've created a project based off of the JavaScript30 Challenge by Wes Bos.
It was about using CSS variables!! I am not sure about you, but I was quite surprised when Wes Bos said that CSS has variables!! I couldn't just wait to try it out.

What So Special About CSS variables?

CSS variables are not like SASS variables. You can change the CSS variables value from HTML via JavaScript DOM manipulation. How cool is that!💗

What the project about?

It is to create some input control for blur effect, padding, and changing the background on an image.

Lesson

My main lesson was to try the CSS variables and changing their values using DOM manipulation.
CSS variables should be declared at the root with --

/*these are the css variables*/
:root {
    --space: 10px;
    --blur: 0px;
    --color: #fa8072;
}

We assign them like-

img {
    background: var(--color);
    padding: var(--space);
    filter: blur(var(--blur));
}

Also got a chance to know more about the template string. I was stuck for a while because of this-

 //create property and set value accordingly
    document.documentElement.style.setProperty(`${--this.name}`, this.value + unit);

//`${--this.name}` is so wrong. I thought it would give me output like: --space
//correct way: `--${this.name}`

Live URL

There you go: http://blur-it.surge.sh/

Code

Here's the Js code, plz refer to GitHub for full code-

//changeTheImage method
const changeTheImage = function () {
    //get the unit
    const unit = this.dataset.sizing || ``;

    //create property and set value accordingly
    document.documentElement.style.setProperty(`--${this.name}`, this.value + unit);

    /********PERSONAL EXPERIMENT*********/
    //console.log(`--${this.name}`) //this is correct
    //console.log(typeof `--${this.name}`) //string
    //console.log(typeof this.value) //string
    // console.log(--this.name) //this is wrong
    // console.log(--`${this.name}`) //this is wrong
    /*************************************/
}

//select all the inputs
const inputs = document.querySelectorAll('input');

//addEventlistener to each of the input to detect change
inputs.forEach((input) => input.addEventListener('change', changeTheImage));
inputs.forEach((input) => input.addEventListener('mousemove', changeTheImage));

GitHub

View on GitHub

Minimalist Wall Clock

Anik Khan — Mon, 20 Jul 2020 17:06:46 +0000

I have created this project as part of the JavaScript30 Challenge by Wes Bos. It was to create a simple analog clock. Even though it was simple but it got me real hard especially with the CSS part and second to degree conversion (more on that later).

A bit about myself

I am a backend developer, recently trying to enhance my knowledge in frontend. It's fairly complicated for me to think in CSS & DOM way. Thus doing this sort of challenge keeps me pushing my boundary. This is the best way of learning, even though it's pretty frustrating like this very one😁

Live URL:

http://minimal-clock.surge.sh/

HTML Part

The HTML part seemed so simple at first. But it gave me a very important lesson- Try to think in parts.
Here's what I meant-

Try to imagine a clock and its parts before diving into HTML
A clock has a body, a clock face. And under the clock face it has 3 hands- the second hand, the minute hand, the hour hand.

Now put each of these parts as HTML elements and assign them classes based on their behavior.


<body>

    <div class="clock">
        <div class="clock-face">
            <div class="hand second-hand"></div>
            <div class="hand min-hand"></div>
            <div class="hand hour-hand"></div>
        </div>
    </div>


    <!-- This audio part is extra; just a treat for me😉 -->
    <!-- Song name Snowplay by WYS -->
    <audio controls autoplay>
        <source src="./audio/Snowman.mp3" type="audio/mpeg">
    </audio>

    <script src="script.js"></script>
</body>

CSS Part

CSS is like a catfish; One moment I thought aha! gotcha, next moment I thought I was just hallucinating.
I am still learning about the flexbox so while coding by myself I had to go through a lot of searches just to center the clock & understanding the purpose of each property.
Anyway, let's jump into the code-

The main job here to put the image and set it up the correct way so that it's neither stretched out too much nor repeat itself like tiles.

html {
    /* The image is from unsplash by David van Dijk */
    /* set an image such that it doesn't repeat stay center */
    background: url(./img/wall.jpg) no-repeat center center fixed;
    /* Resize the background image to cover the entire container */
    background-size: cover;

    /*setting the root font-size to calculate rem unit based off of this*/
    font-size: 10px;
    text-align: center;
}

This part was pretty time consuming for me. I wanted to center the clock using flex even though I wasn't comfortable with it. But I learned why each property exists and their functionality-

body {
    margin: 0;

    /*I want elements of body to be displayed as flexbox*/
    display: flex;
    flex: 1;

    /*center vertically*/
    align-items: center;

    /*center horizontally*/
    justify-content: center;
    margin-left: -200px;

    /*100% of the viewport height*/
    min-height: 100vh;


    font-size: 2rem;
}

This is where we target the actual clock container. And give it shape by setting its height and width. Fairly easy.
But box-shadow property is something amazing, I must say. It can take from 2 to 6 values. And you can define more than one shadow effect with just one property. Don't try to create two different properties for each effect cause it will overwrite the previous one.

.clock {
    /*give it a shape; from square to round*/
    height: 30rem;
    width: 30rem;
    border: 10px solid rgba(209, 231, 224, 0.904);
    border-radius: 50%;

    /*keep the hands away from border*/
    padding: 4px;

    /*set the shadow inside*/
    box-shadow: inset 0 0 10px black,
        inset 0 0 10px rgb(235, 233, 233);

    position: relative;
}

The other parts are fairly straightforward and I put relevant comments

.clock-face {
    height: 50%;
    width: 50%;
    transform: translateY(-3px);

    position: relative;
}

.hand {
    /*give the hands some shape*/
    background-color: rgba(15, 80, 69, 0.712);
    height: 3px;
    width: 75%;

    /*relating to the position*/
    position: absolute;
    top: 150px;
    left: 30px;

    /*to move*/
    transform: rotate(90deg);
    /*keep everything attached to the right point or middle point*/
    transform-origin: 100%;
    /*transition & speeding the effect*/
    transition: all 0.06s;
    transition-timing-function: cubic-bezier(0.07, 3.65, 0.76, 0.4);
}

audio {
    /*positioning the audio player*/
    align-self: flex-end;
    margin-left: -300px;
}

/*after 444 degree the second hand behaves weirdly; to stop that- (more on that in script.js file)*/
.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

Be careful though! Here the unit for height and width are different. % is relative to the parent element. px is fixed
Important questions to be answered here-

How do we move the hands?

using transform: rotate(90deg)
how do we move the hands but the common point for each hand remained the rightmost head?

using transform-origin: 100%; By default it is 50% so the common point for the hands is 50%; we need to set it 100%.

When transform-origin: 50%

JavaScript Part

The js part was fine for me.

Get the DOM elements for second-hand

//get the DOM elements for hands
    const secondDiv = document.querySelector('.second-hand')

Get the current time

//get the current time
    const now = new Date()

Extract the second from that

//current second
    const second = now.getSeconds()

Convert the second to degree

//convert second to degree
    const secondRatio = second / 60
    const secondDegree = (secondRatio * 360) + 90

Add the transform CSS style to rotate based off of the calculated degree

 //add the transform css style rotate
    secondDiv.style.transform = `rotate(${secondDegree}deg)`

Repeat the same for minutes and hours

Note about the second to degree conversion-

first imagine the clock. and imagine time: 10 min 20 s
For 20 s we want the second-hand at a position about 30% far from the start point
This 30% or 40% of the total second can be determined from ratio. In ratio, 0 means 0% or start, and 1 means 100% or finish.
To find ratio, we divide by the current value / highest value possible. so secondRatio = currentSecond / 60
Now we need to convert that to a degree for positioning. The degree is smaller than the seconds. Because at 15 seconds the degree is 90, at 30 sec the degree is 180. So to convert seconds to the degree we multiply. Thus, degree = secondRatio * 360
To understand why we added the extra 90, try remembering this- Initially, we started off by adding 90deg. So for each calculated value, we need to keep adding that 90deg to maintain that.

You can find the full javascript details in the GitHub.

About the Design

Simplicity is the ultimate sophistication. You can see that I didn't use extensive use of color; the clock color suits with the wall as if they are together.
The different objects like the table lamp and the audio player is a different color just to distinguish themselves from the main part of the app.

GitHub

https://github.com/AKdeBerg/analog-clock

Images are from unsplash

JavaScript Prototypes and Class Inheritance

Anik Khan — Tue, 14 Jul 2020 17:50:21 +0000

Javascript is object-based. Understanding the object system is very crucial to write a better, flexible, and robust application.

Not Your Typical Object System

It's important to note that javascript's object system is different from other major languages.

Javascript's object system is prototype based.

Major languages like Python, C#, Java are class based

So it's important to keep in mind that javascript's object system has a different mechanism than other commonly used ones.

Create a protypical object

Let's create an object using prototypes-

//here Vehicle is a constructor function to create Vehicle Object
let Vehicle = function (hasEngine) {
    this.hasEngine = hasEngine
}

//every js object has prototype. let's add a method to it
Vehicle.prototype.getDetails = function () {
    return `Vehicle Details------ Any Engine: ${this.hasEngine}`
}

Now getDetails() method is a part of Vehicle object via the prototype.
This code below will create a new object with Vehicle constructor and assign the values.

//the new keyword creates an object with Vehicle constructor
let vehicleOne = new Vehicle(true)

 //remember we added the getDetails method to Vehicle using prototype;
//here we invoke it
console.log(vehicleOne.getDetails())

//OUTPUT
Vehicle Details------ Any Engine: true

Prototypical Inheritance

Now let's take it one step further. Besides creating object using prototype we can use it for inheritance. This way of doing is known as prototypical inheritance.
Let's create a Car object that inherits from Vehicle-


let Car = function (hasEngine, model, color) {
    //hasEngine will belongs to Vehicle so we call it 
    //and attach it to this Car object
    Vehicle.call(this, hasEngine)

    this.model = model
    this.color = color
}

//Car will use Vehicle's prototype; thus will get the getDetails method
Object.setPrototypeOf(Car, Vehicle.prototype)

Car.prototype.getCarInfo = function () {
    return `Car Details------ Model: ${this.model}, Color: ${this.color}, Any Engine: ${this.hasEngine}`
}

//calling the Vehicle actually calls the constructor
let carOne = new Car(true, 'Model X', 'Black')
console.log(carOne.getCarInfo())

//OUTPUT
Car Details------ Model: Model X, Color: Black, Any Engine: true

What this code does is essentially give the Car object to access to Vehicle prototypes. This will allow Car object to having the methods and properties of Vehicle object.

Be Aware

Using ES6+ class syntax the code can be written as follows-

class Vehicle {
    constructor(hasEngine) {
        this.hasEngine = hasEngine
    }
    //method
    getDetails() {
        return `Vehicle Details------ Any Engine: ${this.hasEngine}`
    }
}

//calling the Vehicle actually calls the constructor
let vehicleOne = new Vehicle(true)
console.log(vehicleOne.getDetails())

//inherit
class Car extends Vehicle {
    constructor(model, color) {
        super(true)
        this.model = model
        this.color = color
    }
    carDetails() {
        return `Car Details------ Model: ${this.model}, Color: ${this.color}, Any Engine: ${this.hasEngine}`
    }
}

//calling the Vehicle actually calls the constructor
let carOne = new Car('Model X', 'Black')
console.log(carOne.carDetails())

The output is the same. So one might think this is the exact same thing as a prototypical inheritance; which is pretty wrong.
Using class syntax is like mimicking Java or C#'s class-based inheritance using js prototypical inheritance.
Class-based inheritance is always dangerous; it's wise to use composition. Yet in js using the class syntax we are mimicking the dangerous class inheritance. It's something that should be avoided at any cost.

Quote from Eric Elliot

Using class inheritance in JavaScript is more like driving your new Tesla Model S to the dealer and trading it in for a rusted out 1973 Ford Pinto.

Mysterious JavaScript Part-II: Callstack

Anik Khan — Mon, 13 Jul 2020 18:04:11 +0000

In part-I, we had to end with a question in mind- How does JavaScript keep track of the execution sequence?
Well! The answer is- using callstack.
In part we are going to know what is callstack & how does it work?

Is it really that important?

Yes, it is. Understanding this fundamental concept will help you write less error-prone code. Besides, using this you can debug your code in pro mode😎 Ohh! it's a common interview question too. More importantly, it will help you tackle some of the advanced js topics.

So, what is callstack?

Well, its like a manager.

Manager controls & keeps track of works to be done.

Callstack controls & keeps track of functions to be executed.

As simple as that😁
By the way, this manager has a hot assistant; more on that later on.😉

How does callstack work, btw?

Callstack uses something called a stack. To imagine stack, think of a pile of something.

You have to eat that ice cream from the top, right? The flavor that added last, have to be eaten first.
Callstack works exactly the same way. The last function added to the stack will be executed first.

This way of working is known as - Last in first out

🍧🍧
By the way, about the ice cream; do you know-
It takes 3 gallons of whole milk to make one gallon of ice cream. No wonder it’s so creamy.😋😋
🍧🍧

Example

See the code below-

//function declaration
function addChocolateFlavor() {
    return "Chocolate flavor added"
}

//function invocation (a.k.a function call)
let iceCream = addChocolateFlavor();

Here, javascript scans for function invocation and finds the line-

//function invocation (a.k.a function call)
let iceCream = addChocolateFlavor();

So it wants to execute it immediately but no! It has to be put on callstack.😉 Poor boy! Have some sympathy guys, each function invocation is like an ice cream flavor for the js. It's hard to resist, but to have full taste it has to wait.
By the way, here's how the callstack is looked like-

Note, main() is added by default and it's the first item to be pushed in a callstack.

As the javascript reaches the addChocolateFlavor(), it pushes it to the callstack.
Callstack now inspects the details of the function in the declaration and reaches the return statement.
Upon executing the return statement, it popped the function off of the stack.
As there is no other function exists, it removes the main too. Thus the program completes.

In a nutshell,

The moment a function is invoked, callstack pushes it to the stack

The moment a function returns, callstack pops it off of the stack

I'm done😉
Pretty dry, huh!! Well, this is the nature of programming. Yet, I tried my best to make it easy for you.
Still, you might not understand it fully at first; but this should serve as a "hi" to the callstack. Have a mindset to know more about it later down the road. This would be enough.
Before I say bye-

Exercise

Based off of what you've learned, try to draw the callstack for this program-

function addVanilla() {
    return "Vanila added!"
}

function addChocolate() {
    return addVanilla() + " choco added on top of vanilla"
}

function addMint() {
    return addChocolate() + " mint added on top of choco"
}

let threeFlavoredIcecream = addMint()

Give it a try! You can post it to the comment. Can't solve? Then reach out to me or others who can help you. That's how you tackle it.😀
Ohh almost forgot, the assistant that callstack has is very nice and warm. I am gonna talk about her and her roles in the next part.
Till then- Happy Coding!😍

Photos from dribble, unsplash, 123rf

Develop an Eye for Good Design

Anik Khan — Sat, 11 Jul 2020 17:07:59 +0000

Having a good design taste is essential; not gonna say why though. To many designs comes off as talent rather than skill. Truth is, artistic ability is achievable through practices.[Research approves].
Here I am going to share some tips for justifying good design. These will serve as a start to differentiate between good and bad design. Which will eventually lead to developing an eye for good design, I believe.

Target Audience:

Beginners who don't know much about design
Developers who doubt their artistic ability
Devs who got 2-3 min time

Tips:

1. Make sure the text and image in hero section contrast well

For brighter text choose darker image and vice versa.
If, however, text and image both are bright then darken the image with an overlay; maybe cutting off the opacity a bit. Something like this-

2. Highlight call-to-action buttons differently

If you have two or more action buttons in hero section, then make them different visually. Keep primary focus on the main call to action button that you want them to click.

3. Take good care of text alignment

Stick to one alignment throughout the design. If you choose to left align, then stick to it. Switching between alignment causes unnecessary eye moves for the users. Avoid it all costs.

4. Be very very serious with color contrast

I can't emphasize enough how big of a thing this is. Throwing colors randomly isn't about design; a good designer chooses his/her color wisely. You will be fine with two or three colors, one being the base color. Just make sure they contrast well.

5. K.I.S.S

Seriously just Keep It Simple and Stupid. Don't sacrifice usability for the sake of beauty or being feature-rich.

6. Careful with small font-size

If you have to put smaller fonts on a lighter image, increase the font-weight. This will improve the UX. Look how the small text is balanced here-

7. Careful when mixing different fonts

I highly recommend that you don't mix up different fonts if you are a novice. When you need to do so, try decreasing the font-weight of one in contrast to other one. Thus your text don't have to fight for attention from two different universe. Here are some examples that done right-

Finally, you should always be aware of your surroundings. Try to understand if something feels you right, why so?
Design is not some hard and fast rules; it's a process of evolution. See how your smartphone design is evolving. Have a mindset of understanding it. It will take you far, I promise.

photos from unsplash, qulix and dribble(@VladimirGruev, @ValeriaRimkevich).

Mysterious JavaScript Part-I: Synchronous Js

Anik Khan — Fri, 10 Jul 2020 15:12:36 +0000

Learning is fun. Well, I think it should be written like "Learning is fun🥱😒"
I don't know who said this but to me, learning is anything but fun. Imagine learning one of JavaScript's mysterious topics like synchronous & asynchronous programming😫😫
Could it be any harder?
Well, don't worry. I will try my best to explain some of the inner workings of javascript in a simple way so that you don't have to take the hard path. Join me!👯‍♂️
(Quite a marketing pitch, huh?😎😎)

Evolution of JavaScript

JavaScript evolved so much so that it sometimes feels like a different programming language that we used to know.

While this is a good thing, it sometimes can create confusion. One such confusion- Is JavaScript Synchronous or Asynchronous?

JavaScript is Synchronous

Yaay! The truth has been revealed😜. JavaScript at its core- a single-threaded, synchronous language. That basically fancy way of saying- JavaScript does one operation at a time.
While one operation is on run, others stay stand still and wait for their turn.

I hear you saying, what if I try to break this traditional way of executing things? I am glad that you ask. But I believe, in this case, the ladies have the answer😝😜
Protip: If you want to die sooner, come India and try breaking a line like this (referring the image).

Example

Let's assume that I have three sentences to log in console-

I would get output like this-

The output will be in sequence. JavaScript shows output in sequence.

Hence, if I were to change the sequence of the log-

the output sequence will also be changed-

The point is, JavaScript logs the outputs in a specific order So, changing the order changes the output sequence too. The execution order is tracked & strictly maintained.

Well! Now, the important question- How does JavaScript keep track of this sequence? I mean, we need someone to play the managerial role, right? The manager keeps the rules in place & makes sure that the functions are executed in proper order. Who is this manager?

This million 💲💲💲 question will be answered in the next part. So stay tuned 😍
(images are from unsplash and timesofindia)

Simple Guideline for Webdesign

Anik Khan — Thu, 09 Jul 2020 16:34:46 +0000

Lately, more and more websites are verbose with animation and graphics that serve little to no value to the actual purpose. Look and feel are very important but adding things in abundance for the sake of look is damaging.

Many newcomers in web design often get confused and feel a lack of creativity because of this situation. Webdesign is an art; randomly throwing stuff on the screen isn't about art.
So I like to share some of the well-accepted guidelines in various web design area i.e. typography, color, visual hierarchy, navbar, layouts.

Typography

Keep font size between 15 to 25 pixels.
Use line spacing between 120% to 150% of the font size.
Maintain 45 to 90 characters per line.
Try to stick with one font type especially if you are a novice.

Color

Always maintain the color contrast. Try using color schemes.
Choose a base color that goes with the project goal. Remember, choosing a base color isn't about picking your favorite color.
Don't try to incorporate more than 3 colors if you are just starting out web design.

Visual hierarchy & Layout

Organize elements in such a way that users naturally incline to the main element of the site.
Use whitespace to separate elements and groups when necessary. Don't crumble things together.
Don't put all your links in the navbar. Only important links should make into the primary navbar. For external links make a secondary navbar and put it in the footer.
Related items must be group together. Sperate items should be in separate groups. Think of your website as a room. Keep it well organized; don't put your shirts with sneakers.

This guide is no mean a detailed one. My purpose here was to show you the right direction.
Just keep things simple. Don't overcomplicate your design, it confuses your users. Have empathy for them. And most importantly never stop learning.😀
Images are from pixels and unsplash.

Seeing elements in CSS way: CSS Box Model

Anik Khan — Thu, 09 Jul 2020 01:04:36 +0000

Human, HTML, CSS are different by nature. They have their own world of purpose & vision. Generally, they don't understand each other. Yet, the modern web is impossible without them.
As it turns out, humans are lucky to have a tribe among them namely, developers. These developers are very empathetic to their non-human counterparts. They know how to see things in other HTML, CSS way.
Let's see how things are different in each of these worlds & how developers cope with it. Hopefully, we'll learn something along the way.

Hold on! Isn't the CSS part is quite abnormal? Why is there a box?
Well, that's because in CSS everything is a box. This convention is known as- CSS Box Model. Let's see what's this all about!
So every element is a box in CSS whether it'd be inline or block one. I hear you saying, a box contains something in real life; what about in CSS world?
It turns out, boxes in the CSS world aren't that different from the human world. They also comprised of certain things. Each box in CSS contains-

Content
Padding
Border
Margin

Before explaining what is what, let's visualize each of them. After all, we humans are visual creatures.

Alrighty! I know! There's nothing about margin on that image.
Margin is actually an out layer. It doesn't have anything to do with the box itself. Rather, when specified, its job is to put whitespace between the box itself and other boxes.
Let's see them in action.
Here we have two elements- Content A and Content B. Having them with background color will make them look like boxes.

Suppose, we wanna increase the size of the box. What do we do? We add some padding. This will put whitespace around the content thus makes the box size bigger. Remember, this doesn't make the content itself bigger rather the box.

To see the border, we can add border property. The border is what wraps the content & padding. Its the CSS way of marking territory for an element. It provides an element sovereignty.

Now to margin! Margin puts whitespace between the boxes. Adding margin-bottom for content A will do the job.

Note, the margin has a feature called margin collapsing. That essentially means only the bigger margin value will count. Say for example, for content A we have margin-bottom: 70px and content B margin-top: 30. You think the margin between them should be 70 + 30 = 100, right? Wrong! Here only the bigger margin value counts. So the margin would be 70.
Cool! So far so good. Now let's play a bit with the size of the box.
If we set the height and width of the boxes to 100px, it'll look something like-

You might think, the whole box size is now 100 X 100 (height X width). CSS will betray you. See the details in browser devtool-

Look! only the content (the blue area in the box) is 100 X 100. That means when we add height, width it applied only for the content. That's a bit weird!
Anyway, let's calculate the size of the whole box from the image above.
width = width of content + padding right + padding left + border right + border left
so in our case,
width = 100 + 20 + 20 + 10 + 10. Thus, width = 160.
Similarly, height = height of content + padding top + padding bottom + border top + border bottom
For us, height = 100 + 20 + 20 + 10 + 10. Thus, height = 160.
So according to our calculation, the size is 160 X 160.
And it is-

So each of our boxes is of size 160 X 160.
By now you are thinking, that's boring. When we specify height, width it should be for the whole box but here in CSS it's only for the content. To determine the actual size, we need to add content height, padding, border size. That is a bit tedious!
You might wish to determine height and width just by declaring the height and width property. I mean, when we declare height: 100 and width: 100, the total box size should be 100 X 100 including the padding, border. This would make life a lot easier.
Turns out there's a way to do so. That's by using the box-sizing property. Just add something like-

element {
box-sizing: border-box
}

Ahh!! Now take a deep breath.😤🤣 We are done! But before you go, remember to practice what you've just learned. And if stuck then I would be happy to help😉
I hope now you have a bit of ground on CSS box modeling. Have fun and keep learning.😎
Oh the cover image is taken by Matteo Kutufa from unsplash.com

Step by Step Guide to Install & Setup Babel 7 in JavaScript Project

Anik Khan — Wed, 08 Jul 2020 13:21:24 +0000

The JavaScript that born 24 years ago is now could seem like a very different language. Also after the ES5 era, the language has become very feature reach. But that cost us the browser compatibility issue.

To solve this issue Babel is a great solution. Babel transforms your ES5+ code into ES5 which is compatible with all browsers. Here's an example-

While this code looks elegant and concise, many older browsers have compatibility issues with this ES6 feature. That means your beautiful ES6 code will cause your program not to run in incompatible browsers.

But guess what, if you have Babel installed this won't be an issue. Babel will transform this ES6 code into ES5 code which will look like-

This is what babel can do for you!!!! So how can I use Babel in my project?

While Babel saves you from browser compatibility headaches, installing it can be a bit daunting and confusing. So here's the step by step how-to guide for installing Babel 7 in your project. But before we go, it's recommended that you install the Babel locally in your project so that you can handle each project with its due demand.

Step 01: First create a directory aka folder. This is your project directory. Here mine is demo-babel. This is the root project directory.

Step 02: Open Terminal & go to that directory-

//COPY THE COMMAND FROM HERE
$ cd your_directory_name

Step 03: Run the command-

//COPY THE COMMAND FROM HERE
npm init

This will create a package.json file where we can configure our babel 7.

You can crack open the package.json file, which will look like this-

Step 04: Now we are ready to install necessary babel packages. Just run the following commands in exact order-

//COPY THE COMMANDS FROM HERE
npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env

Now check the pacakge.json file, few new lines should be added by now-

Step 05: Now we need to set our preset. To do that open the pacakge.json file if you haven't already and paste this-

//COPY THE CODES FROM HERE
"babel": {
  "presets": ["@babel/preset-env"]
}

Step 06: All setup is done!!! Yaay! To test, now create a directory named scripts/ under our root directory and add a file index.js to it and write ES6 code that we want to transpile.

Step 07: Switch over to terminal & change your directory from demo-babel to its subdirectory- scripts/ and run the command-

//COPY THE COMMAND FROM HERE
npx babel index.js -o your_desired_name_for_the_output_file.js

This should create a new file name ouputES5.js which is the transpiled code for index.js!!!!
Yaay.....Mission accomplished! 😃