# Technical

## General

{% embed url="<https://medium.com/@supreethama/commonly-asked-questions-at-front-end-engineer-interview-amazon-a1d2aad958c0>" %}

{% embed url="<https://www.indeed.com/hire/interview-questions/front-end-developer#question_1>" %}

{% embed url="<https://www.perfecto.io/blog/comprehensive-guide-front-end-testing>" %}

## Front-end coding challenges

{% embed url="<https://bigfrontend.dev/>" %}
Practice front-end coding here
{% endembed %}

## Web

### Server-side Rendering Vs Client-side Rendering

{% embed url="<https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/>" %}

### HTTP Status Codes

* 1XX - Informational (We don't use much)&#x20;
* 2XX - Success codes
* 3XX - Redirection codes
* 4XX - Client-side error codes
* 5XX - Server-side error codes

#### Popular codes

**2XX Codes**

* **200**  **OK** - General success status code, meaning everything was okay and we might receive back some content
* **201** **Created** - All of our post requests - When we create a new resource on our server and was successful
* &#x20;**204** **No Content** - Everything was okay but the server has nothing to return. For example, when we delete a user/resource, we don't have to get back any info and that is ok. So we can use 204 for that type

**3XX Codes - If we visit a URL and it redirects to another URL, the first URL would return us 3XX**

* &#x20;**304** **Not modified** - This is not much to do with redirecting, but it is related to caching. When we call an API, maybe we don't want to get all the results every time because the results might not change that often but they might change every few days but we constantly want to check if something changed. So we send a request asking, "Has anything been changed since x date" and the server returns 304 if nothing has been changed.&#x20;

**4XX Codes - Error from the client-side. A person using API either sent bad info to the server or they are not authorized and so on**

* **400 Bad request** - Server says "Something you sent was bad". Don't know the specific reason for something being bad or the user just send bad parameters (when email and name was expected, the server got only the name)
* **401 Unauthorized** - You're trying to access that requires authentication but your API key or some credentials are bad so I don't know who you are
* **403 Forbidden** - The client is authenticated with the right API but doesn't have permission to access that resource he's requesting
* **404 Not found** - API endpoint not found. /cart doesn't exist

**5XX Codes**

* **500 Internal Server Error** - Generic error which says something went wrong on the server. When server-side code has a bug generally

## JavaScript

### 0. Why do you like Javascript?

JS is one of the best languages out there according to me, not because of it's syntax or working, but because the way it is designed keeping in mind about old and modern feature implementations. It should keep in mind while designing not to introduce breaking changes while supporting so many browsers out there. Hats off to the developers who should spend more time on taking care of each and every detail not to break anything before actually implementing it.

The second reason I love it because, even though it's so complex to develop Js, it has let more modern way of web based on which all the new libraries and frame works like react, angular and vue are built upon. In today's world, everything is Javscript in the web. Even JS started supporting mobile (react native and ionic frameworks).&#x20;

Though JS is dynamically typed, we now have TS which adds upon JS for catering static typing which is again appreciable.&#x20;

This way, JS basically encourages developers of any language to pick up JS soon. JS is in front-end, back-end, mobile and soon I believe it takes up the space of Machine learning and Artificial intelligence.&#x20;

This is all possible because of huge community support where we have over a million modules on npm today.

### 1. Iterables and Iterators - ES6&#x20;

> #### 1. **Why Iterables and Iterators were introduced?**
>
> #### **2. What is iterable & iterator?**
>
> #### **3. Implement your own iterable and iterator.**

#### **1. Why Iterable and Iterator were introduced?**

Iteration in JS was done using for, while, and do-while loops before the Iterators and Iterables concept was introduced.&#x20;

![](/files/-MVlbYnf8gYMfCBvOeBu)

{% hint style="danger" %}
We first had to think about how to access the element before doing something with it because, you see we had to access elements differently for each, string and array. We also had to introduce a new variable, `i` just for this purpose.

In short, managing the iterations over different data structures was difficult.  I mean, same for-loop can't be used for both string and array&#x20;
{% endhint %}

So **we wanted a way to iterate over different data structures in the same way/uniform way**. This was the reason for introducing iterator and iterable.&#x20;

They were introduced to process the sequence of data more efficiently. It will **make us access one element at a time** so we can focus on what to do with the data rather than how to get individual data&#x20;

#### 2. What is Iterator and Iterable?

An object that implements the iterable protocol is called **ITERABLE** and an object that implements the iterator protocol is called **ITERATOR**

**An iterable is a data structure that wants to make its elements accessible to the public** (we can loop through elements easily)

**An iterator is an object that knows how to access elements from iterable one at a time keeping track of the current position in the sequence.**

JS in ES6 decided to **implement iterable** to built-in data structures like - **string, array, map, set.** This means there is a way to access elements from these one at a time.

Now ES6 thought about iterators. They can't modify the existing for, while and do-while to improve the iterators because every existing code containing these loops must be modified.&#x20;

{% hint style="success" %}
So they decided to introduce a **new looping construct** - **`for of` loop.** This would **iterate** over **data structures implementing iterable**.
{% endhint %}

![for-of loop for different data structures implementing iterable](/files/-MVljMrMaGNsM1OYbg14)

#### Iterable protocol - Technical details

* This protocol decides if an object is iterable
* For an object to be **iterable**, it should **implement** **a** **method** called `[Symbol.iterator]` at the key
* This method should not accept any argument and should return an object that conforms/complies with the rules of iterator protocol. **Note: `Symbo.iterator`** guarantees a unique value for the key of the iterable object

#### Iterator protocol - Technical details

* This protocol decides if an object is an iterator or not
* An object is an iterator when it satisfies the following rule. The object must have a&#x20;

  method called `next()` and this method must return two properties&#x20;

  * **value -** which gives the current value
  * **done** - which is a boolean to indicate if there are any more elements  remaining to iterate upon
* Each time when `next()` is called, it returns the next value in the collection.&#x20;

&#x20;`{value : 'next val' , done: 'false' } // it has more values`

&#x20;`{value : 'undefined' , done: 'true' } // it has no more values`

#### 3. Implementing our own Iterable and Iterator.

As I said, the map, set, string, and array all are iterable as they implement,`[Symbol.iterator]` at the key. But the object is not a builtin iterable as it doesn't implement `[Symbol.iterator]`&#x20;

![array and string are iterable](/files/-MVm_4gzKmNpC3uFwOun)

![objects are not iterable](/files/-MVm_9VsOXqcWMDCB8iI)

{% hint style="success" %}
&#x20;By making an object implement the iterable protocol, we can make it iterable. After implementing it, our object should iterate over and give the hardcoded values of "Hello" "world"
{% endhint %}

&#x20;

![Implementing Iterable protocol to an object](/files/-MVmcu0D9Q_G_WuwVxcK)

![Implementing iterator protocol but not yet returning the object containing value and done](/files/-MVmdayiepOfcnLE89nH)

![Returning the value from iterator function](/files/-MVmeqZwF3yxr8ip79QQ)

![When for of is called, iterator is returned as the Symbo.iterator is called. This gives access to next()](/files/-MVmgw28E7Dfy4pEFVMm)

![Using next() directly on object that implements iterator protocol](/files/-MVmhh50JDiQgYt8moYu)

{% hint style="info" %}
**Summary**

1. JS didn't have a better iteration protocol so Iterator and Iterable was introduced
2. Accessing the data is always the first part before using it and it wasn't uniform among various Data Structures and was confusing
3. Then iterable and iterator protocols were introduced in ES6
4. Data Structures like String, Map, Array, etc. implemented them so that the data could be iterated using `for of` loop and other operators like `spread`
5. A data structure becomes iterable when it implements, `[Symbol.iterator]` as a key and have a method assigned to it
6. This method doesn't take any argument but returns an object that complies with the iterator protocol
7. Iterator protocol dictates that the object should implement a key called `next` and have a method assigned to it
8. This method should return an object having `{value, done}` that indicates the next value and if that exists or not
9. After implementing iterable and iterator protocols like told above, we can now use `for of` loop to iterate over this data structure
10. The `spread` syntax, `promise.all,` `for of` loop all implement these 2 protocols
    {% endhint %}

#### Challenges

1. Make an object iterable and use `for of` loop and `spread` to print 1 to 50

```javascript
const range = {
    [Symbol.iterator]: function() {

        let counter = 1;

        const iterator = {

            next: function() {
                const keyValPair = {
                    value: counter,
                    done: false
                };
                if (counter <= 50) {
                    counter++;
                    return keyValPair

                }
                return {
                    done: true
                }
            }
        };
        return iterator
    }
};

// for of loop. Logs 1 to 50
for (let ele of range) {
    console.log(ele)
}

// spread operator. Logs 1 to 50
console.log([...range])

// Iterator is returned and when called next() on it, it logs the {value,done}
const iterator = range[Symbol.iterator]()
console.log(iterator.next())

```

&#x20;  2\. Customize the above behavior by giving a start value, interval, and end value functionality

```javascript
const customRange = {
	[Symbol.iterator]: function (start = 1, interval = 2, end = 20) {
		let counter = start;

		const iterator = {
			next: function () {
				const keyValPair = {
					value: counter,
					done: false
				};
				if (counter <= end) {
					counter = counter + interval;
					return keyValPair;
				}
				return {
					done: true
				};
			}
		};
		return iterator;
	}
};

// for of loop. Logs 1 to 50
for (let ele of customRange) {
	console.log(ele);
}

// spread operator. Logs 1 to 50
console.log([...customRange]);

// Iterator is returned and when called next() on it, it logs the {value,done}
const iterator = customRange[Symbol.iterator]();
console.log(iterator.next()); // {value: 1, done : false}
console.log(iterator.next()); // {value: 3, done : false}
console.log(iterator.next()); // {value: 5, done : false}

// using a while loop to iterate the iterator
while (!iterator.next().done) {
	console.log(iterator.next().value); // logs 1 to 19
}
```

In the iterator method, we not only can have the method, `next()` but also has can define a `return()` method. This method is called when the iteration is stopped prematurely.&#x20;

![return() inside iterator is called when it is stopped prematurely](/files/-MVnCj6So6fk52XO6Jeu)

{% hint style="success" %}
**That completes Iterators and Iterables**
{% endhint %}

### 2. Generators - ES6

Creating Iterators ourselves involves implementing, `[Symbol.itertor],next()` function, and so on. It's a bit verbose to create the iterator functions ourselves.

Generators are the **special class functions** that simplify the task of writing iterators.&#x20;

{% tabs %}
{% tab title="GeneratorFunction" %}

```javascript
// creating a generator function

function* generatorFunction(){
  yield 'Hello'
  yield 'World'
}

const generatorObject = generatorFunction() // generatorObject is an iterator

// this object can now be used to iterate
for (const word of generatorObject){
  console.log(word)
} 

// it also contains next method
generatorObject.next() - Returns {value:'Hello', done:false}
generatorObject.next() - Returns {value:'World', done:false}
generatorObject.next() - Returns {value:undefined, done:true}
```

{% endtab %}

{% tab title="Normal Function" %}

```javascript
// normal function

function normalFunction() {

 console.log("Hello");
 console.log("World");
 
}

```

{% endtab %}
{% endtabs %}

| Normal Function                                                                       | Generator Function                                                                                                    |
| ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| It's a run-to-completion model                                                        | It is a stoppable model                                                                                               |
| It can't be stopped until it hits the end of the block                                | It can stop the midway and continue from where had stopped                                                            |
| The only way to exit the function is by `return` statement or by `throwing` and error | It can pause its execution                                                                                            |
| On calling the function again,  it will execute it from the top                       | We use the "yield" keyword to achieve that behavior.                                                                  |
| returns a value                                                                       | returns an object known as 'generator object'. This object is an iterator.                                            |
|                                                                                       | Since this returned object is an iterator, we can iterate over that object using `for-of` loop, `array destructuring` |

#### Advantages of using generators over defining our own iterators (4 points to remember)

![](/files/-MVxQVGG-M_8mskO2uVN)

#### More on generators

* In generators, we can use`return`. However, `return` sets `done` to true after which generator cannot generate any more values

![](/files/-MVxRi0_8QkFkpPmfr_1)

* If you return a value rather than yield the value, the returned value will not iterate over for loop or spread syntax

![](/files/-MVxSBFTUhp514SH-HbC)

* The Generator function cannot rerun after it has yielded values or returned. We will have to make another generator object to run the generator again.

{% hint style="info" %}
**Summary**

* Generators were introduced in ES6 and allow execution which is not continuous. This allows you to implement iterative behaviour.
* Generator functions are written using `function*` syntax
* When called, they return a special object called generator object&#x20;
* Generator object's value can be consumed by calling `next()` method on it and it runs until it encounters the `yield` keyword
  {% endhint %}

### 3. What is Web Worker?

{% embed url="<https://www.youtube.com/watch?v=EiPytIxrZtU&t=621s&ab_channel=BenAwadBenAwadVerified>" %}

{% embed url="<https://www.youtube.com/watch?v=0k9erXiSp9Q&ab_channel=CodingWithChaim>" %}
JS Web Worker
{% endembed %}

### 4. What are service workers? Service workers vs web workers.

**Worklets** are hooks into the browser’s rendering pipeline, enabling us to have low-level access to the browser’s rendering processes such as styling and layout.

**Service workers** are a proxy between the browser and the network. By intercepting requests made by the document, service workers can redirect requests to a cache, enabling offline access.

**Web workers** are general-purpose scripts that enable us to offload processor-intensive work from the main thread.

{% embed url="<https://bitsofco.de/web-workers-vs-service-workers-vs-worklets/#:~:text=Service%20workers%20are%20a%20proxy,work%20from%20the%20main%20thread>." %}

{% embed url="<https://www.youtube.com/watch?v=rtdP6dvWfus&t=1144s&ab_channel=FunOfHeuristicFunOfHeuristic>" %}

{% embed url="<https://www.youtube.com/watch?v=JJSloXLTyNg&t=535s&ab_channel=BenAwadBenAwad>" %}

{% embed url="<https://youtube.com/watch?v=5JAZcSQ2u1I&ab_channel=CodingTechCodingTechVerified>" %}

### Drawbacks of Service Workers

* It has to have SSL certificate (it has to run over https and not http except local host)
* It cannot be used in old version of browsers like IE

### 5. What Happens When You Type in a URL?

This is how I would explain it:

1. You enter a URL into a web browser
2. The browser looks up the IP address for the domain name via DNS
3. The browser sends a HTTP *request* to the server
4. The server sends back a HTTP *response*
5. The browser begins rendering the HTML
6. The browser sends requests for additional objects embedded in HTML (images, css, JavaScript) and repeats steps 3-5.
7. Once the page is loaded, the browser sends further async requests as needed.

{% embed url="<https://wsvincent.com/what-happens-when-url/>" %}

## CSS

### 1. CSS Selectors

#### Basic Selectors

We have 5 types of basic selectors

1. Universal Selector
2. Type Selector
3. Class Selector
4. ID Selector
5. Attribute Selector

![Basic CSS Selectors](/files/-MVnEZS5ojPFLOkFqMn-)

#### Advance/Complex Selectors

We have 5 types of complex selectors

1. Selector List
2. Descendent Combinator
3. Child Combinator
4. General Sibling Combinator
5. Immediate Sibling Combinator

![complex selectors](/files/-MVnFkYw0UQkUhGIbdrH)

![complex selectors](/files/-MVnGfKXoJ7Er2kK-ihL)

#### Pseudo Selectors

1. Pseudo Classes (:)
2. Pseudo Elements (::)

![pseudo selectors](/files/-MVnHVEbBFBUBapQJD-M)

### 2. CSS Specificity

Sometimes, the style we apply doesn't work but still gets some kind of style which we specified in another file or inline style. Basically, two or more styles defined on an element can lead to confusion and provokes us to think about which one might get applied. This is where we need to know CSS specificity. &#x20;

Specificity is a weight that is applied to given CSS declaration. Let's visualize the specificity as a 4 digit no.

![CSS Specificity](/files/-MVnK_flH-obNTxUdFZ4)

### 3. CSS Box Modal

![](/files/-MVnLpDdQNuUMNC9_xhL)

&#x20; **Content-Box Vs Border-Box**

![](/files/-MVnNNmdoKKIjMgi_JY_)

### 4. CSS Positions

There are 5 positions

1. **Static position (Default position)** - This represents elements exactly the way you put in HTML markup. You can use width, height, margin, padding, and so on, but you can't use top, left, bottom, right props. It doesn't add any effect.
2. **Relative position -** This also represents the way you put in HTML markup but you can position this element relative to other elements unlike static and can use top, left, right, and bottom to do that.
3. **Fixed position** - The position is fixed at that particular place and doesn't move even on the scroll. It doesn't occupy any space, so the elements might be hidden behind it.
4. **Sticky position -** The position is static until it is scrolled. When its position hits the bottom of the screen during the scroll then it becomes fixed. Unlike fixed, it occupies some space so the elements will not be hidden behind it.
5. **Absolute positio**n - An element with `position: absolute;` is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

   However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

   **Note:** A "positioned" element is one whose position is anything except `static`.<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sandeepamaranath.gitbook.io/notes/interview/technical.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.