Front End

Question 1

What are synthetic events

Answer 1

Synthetic events combine the response of different browser’s native events into one API, ensuring that the events are consistent across different browsers.

Question 2

React features

Answer 2

Jsx
Community
High performance
Virtual dom
One way data binding

Question 3

What is virtual dom

Answer 3

React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM

Question 4

Difference ES5 and ES6

Answer 4

Imports

Question 5

What is an event

Answer 5

action that a user or system may trigger, such as pressing a key, a mouse click, etc.

Question 6

Why are keys necessary for lists

Answer 6

To find components on virtual dom and only replace them

Question 7

Arrow functions difference to normal functions

Answer 7

It is unnecessary to bind ‘this’ inside the constructor when using an arrow function. This prevents bugs caused by the use of ‘this’ in React callbacks.

Question 8

what are data structures

Answer 8

how to save and organize data

Question 9

files structure vs data structure

Answer 9

files are save on disk, data on RAM or disk. File has low compatibility with other applications

Question 10

what are linked lists

Answer 10

structure that has nodes that are connected to each other forming a chain

Question 11

ways of searching in structures

Answer 11

lineal: iterating through it
binary: separate into chunks, then perform a search

Question 12

what are hooks

Answer 12

specific react functions that allow you to use things like state, lifecycle events etc. in functional components

Question 13

limitations of react

Answer 13

high learning curve
low structure and much freedom make projects look different

Question 14

what is dangerouslySetInnerHTML

Answer 14

allows to dangerously add html that is not checked by React and may allow injection of malicious code

Question 15

React lazy

Answer 15

allow the use of components that don’t end up in the bundle. They are fetched when they want to be used and a fallback is shown. Lodable library adds suspense to it to make it easier to use

Question 16

How to optimize performance

Answer 16

React.lazy
React.memo
Fragments instead of divs
State and form libraries to improve rerendes

Question 17

What is reconciliation

Answer 17

react updates dom when value changes

Question 18

what are higher-order component (HOC)

Answer 18

Injects reusable logic in a component like styling, props, loading behavior etc.

Question 19

What is a closure?

Answer 19

Closure is a function in a function. The inner function has access to the outer’s function scope and parameters even after the outer function has returned.

Question 20

What are the differences between call, apply, and bind?

Answer 20

call and apply immediately calls a function while bind creates a new function that can be invoked in the future. Arguments with call are passed in one by one, separated with a comma while apply expects an array as its argument.

Question 21

What is currying function

Answer 21

separating a function with many arguments into many function with one argument to make code more readable

Question 22

What is memoization?

Answer 22

Memoization is an optimization technique by storing the result of expensive function calls and returning the cached results when the same inputs occur again.

Question 23

What is a higher-order function?

Answer 23

a higher-order function is a function that accepts another function as an argument or returns a function as a return value or both of them.

Map, filter and reduce are some examples of higher-order functions that are already built-in to JavaScript.

Question 24

what is css box model

Answer 24

The box model is a box that wraps around every HTML element.
The box contains content, padding, border, and margin.

Question 25

what is css sprite

Answer 25

CSS sprites combine multiple images into one single larger image. This would only require one server request resulting in a faster loading time.

Question 26

visibility hidden versus display none

Answer 26

visibility: hidden hides the element, but it occupies space and affects the layout of the document. display: none also hides the element but not occupy space. It will not affect the layout of the document.

Question 27

ways of positioning

Answer 27

static relative absolute fixed: relative to view port and don't move on scrolling sticky

Question 28

difference inline, block and inline-block

Answer 28

Block elements always start on a new line. They will also take space of an entire row. Inline elements don't start on a new line, These elements appear on the same line with the content and tags beside them. Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.

Question 29

pseudo-elements

Answer 29

A pseudo-element allows you to manipulate parts of an element in a special way like :after

Question 30

pseudo:class

Answer 30

:hover

Question 31

HTML Entities

Answer 31

starts with & and finish with ; Used for things like special characters

Question 32

seesion storage vs local storage

Answer 32

session storage is deleted after browser is closed

Question 33

difference of id and class

Answer 33

id can only be one. class can be many

Question 34

how does binary search works

Answer 34

get a sorted array split in the middle take a sample is sample is smaller, check the other half. if not, take this half continue until you find like looking wor a word in a dictionary

Question 35

what is a queue

Answer 35

a list of elements added after each other

Question 36

what is a binary tree

Answer 36

a tree data structure with two nodes after each node

Question 37

difference between throttle and debounce

Answer 37

throttle fires values periodically, debounce only until it end getting values and the period of time passed

Question 38

typescript primitives

Answer 38

boolean number string undefined null void symbol big int

Question 39

difference of interface vs type

Answer 39

type has an equal after the definition Interface can have extend and implement type can use intersections & or unions |

Question 40

what does the unknown type does

Answer 40

unknown is like any put it doesn't allow to perform operations after a type is assigned to a type

Question 41

difference between var and let

Answer 41

var is function scoped, let is block scoped var can redeclare variables, let not var is hoisted - it assigns an undefined even if it is declared before it is used

Question 42

what of this is hoisted: const let function var

Answer 42

function var they can be used before its declaration after ES6

Question 43

difference of null and undefined

Answer 43

undefined: has not been assigned typeof undefined null: could be assigned typeof object both are falsy but not strict equal

Question 44

what is the never type

Answer 44

used for functions that throw an error or has an infinite while loop It is used when you are sure that something will never occur

Question 45

what is typeof

Answer 45

gives type of variable as string

Question 46

what for is tsconfig?

Answer 46

to say the compiler what to do. Like ES version, accept implicit any etc

Question 47

what is optional chaining?

Answer 47

the elvis operator ?. It stops running the chain if something is undefined and returns undefined

Question 48

what is function overloads?

Answer 48

allows to define same function with different parameters. Example: ``` function buildDate(timestamp: number): Date; function buildDate(m: number, d: number, y: number): Date; function buildDate(mOrTimestamp: number, d?: number, y?: number): Date { if (d !== undefined && y !== undefined) { return new Date(y, mOrTimestamp, d); } else { return new Date(mOrTimestamp); } } ```

Question 49

What is meant by contextual typing?

Answer 49

Type inference based on how the variable is used. Example const a = 'd' infers that is a string

Question 50

what are abstract classes

Answer 50

abstract classes are like interfaces but it forces you to do a certain implementation

Question 51

what are anonymous functions

Answer 51

functions called without a name like `setTimeout` or ``` (function() { console.log('Invoked immediately after creation'); })(); ```

Question 52

What are union types

Answer 52

`|` types

Question 53

What are intersection types

Answer 53

`&` types

Question 54

What are alias types

Answer 54

when you give a name to the union types

Question 55

tuple types

Answer 55

many-dimensional arrays like `let values: [string, number] = ["Foo", 15];`

Question 56

what are type assertions

Answer 56

`as string`

Question 57

How to make object properties immutable in TypeScript

Answer 57

adding `readonly` like ``` interface Coordinate { readonly x: number; readonly y: number; } ```

Question 58

what are type declaration files

Answer 58

A type declaration file is a text file ending with a `.d.ts` extension providing a way to declare the existence of some types or values without actually providing implementations for those values. It contains the type declarations but doesn’t have any source code. It doesn’t produce a .js file after compilation.

Question 59

purpose of the ‘in’ operator.

Answer 59

says if prop is in an object ``` const car = { make: 'Hyundai', model: 'Elantra', year: 2017 }; console.log('model' in car); // true ```

Question 60

what is `implements` for?

Answer 60

An implements clause is used to check that a class satisfies the contract specified by an interface. If a class implements an interface and doesn’t implement that interface, the TypeScript compiler issues an error.

Question 61

string literal types

Answer 61

`'dfsfd' | 'dsfdfd'`

Question 62

template literal types?

Answer 62

``` type Shape = `Grid ${string}`; ```

Question 63

Write some of the utility types used by typescript

Answer 63

`Partial` Constructs a type with all properties of Type set to optional. `Required` Constructs a type consisting of all properties of Type set to required. `Readonly` Constructs a type with all properties of Type set to readonly. `Record` Constructs an object type with property keys are of type Keys, and values are Type.

Question 64

binary trees rules

Answer 64

only one root every child has max to children every children can be connected only to another child, not another parent every free child is called leaf

Question 65

what is lifo

Answer 65

last in first out

Question 66

Kind of scaling in load balancers

Answer 66

1. Vertical scalling: increase power of server. It is limited 2. Horizontal scalling: replicate the docker 3. Load Balancer: server between server that redirects to a replicated server Hardware load balancer: limited and not highly customizable but faster than software

Question 67

strategies for scaling load balancers horizontally

Answer 67

a. Random b. Round robin: after each pther c. Weighted round robin: prioritize servers. E.g. the most powerful gets more requests d. Server traffic: depending on how fast a server responds, it know which has more capacity to respond IP based like on CDN or edge computing

Question 68

protect from denial of service attack

Answer 68

a. Use CDN to take all the load b. User firewalls that protect with configured policies c. Use consistent hashing to keep operating with servers down

Question 69

what is sharding

Answer 69

Sharding: Data gets distributed in servers

Question 70

what is consistent hashing

Answer 70

algorithm in ring to distribute data efficiently

Question 71

difference SQL no-SQL

Answer 71

1. SQL: a. takes time to make structure b. Vertical scalling c. Table based d. Needs SQL languages e. Have constraints like data type, length etc f. Small project, low scale, unknown access patten g. Can read data faster 2. No SQL a. not relational b. Horizontal scalling c. Fast d. documents like key-value, e. Queries are less flexible f. High performance for medium to largeproject Can write data fast

Question 72

What is scope in JavaScript?

Answer 72

In JavaScript every function has its own scope. It is basically a collection of rules for how variables are accessed and variables itself.

Question 73

What does SOLID stand for

Answer 73

S- single responsibility principle O- open-closed principle L- Liskov Substitution principle I- interface segregation principle D- dependency.

Question 74

Reactive manifesto parts

Answer 74

responsive resilient elastic message driven

Question 75

Reactive manifesto: Responsive

Answer 75

The system responds in a timely manner if at all possible. Responsiveness means that problems may be detected quickly and dealt with effectively. Responsive systems focus on providing rapid and consistent response times, establishing reliable upper bounds so they deliver a consistent quality of service.

Question 76

Reactive manifesto: Resilient

Answer 76

The system stays responsive in the face of failure. This applies not only to highly-available, mission-critical systems — any system that is not resilient will be unresponsive after a failure.

Question 77

Reactive manifesto: Elastic

Answer 77

The system stays responsive under varying workload. Reactive Systems can react to changes in the input rate by increasing or decreasing the resources allocated to service these inputs.

Question 78

Reactive manifesto: MessageDriven

Answer 78

Reactive Systems rely on asynchronous message-passing to establish a boundary between components that ensures loose coupling, isolation and location transparency.

Question 79

How does delegation improves resiliency

Answer 79

Recovery of each component is delegated to another (external) component and high-availability is ensured by replication where necessary.

Question 80

How can resiliency be improved

Answer 80

Resilience is achieved by replication, containment, isolation and delegation.

Question 81

What does location transparent means

Answer 81

the use of names to identify network resources, rather than their actual location. Location transparent messaging as a means of communication makes it possible for the management of failure to work with the same constructs and semantics across a cluster or within a single host.

Question 82

CSS specificity order

Answer 82

Inline styles - Example:

IDs - Example: #navbar Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href] Elements and pseudo-elements - Example: h1, :before

Question 83

CSS min-content

Answer 83

as wide as the biggest children element or word size

Question 84

css selectors

Answer 84

* * select every element * . Class # id

Question 85

div > b

Answer 85

all b direct child of div

Question 86

div ~ span

Answer 86

all span sibling of a div (sibling means at the same level)

Question 87

div + span

Answer 87

very next span of a div

Question 88

Important pseudoclasses

Answer 88

:hover, :active, :focus, :required, :checked, :disabled, :first-child, only:child, :last-of-type

Question 89

p:not(.green)

Answer 89

every p that has not the class green

Question 90

[type="radio"]

Answer 90

any element with type="radio"

Question 91

^=

Answer 91

starts with

Question 92

$=

Answer 92

ends with

Question 93

~=

Answer 93

contain the word