Front End Flashcards
What are synthetic events
Synthetic events combine the response of different browser’s native events into one API, ensuring that the events are consistent across different browsers.
React features
Jsx
Community
High performance
Virtual dom
One way data binding
What is virtual dom
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
Difference ES5 and ES6
Imports
What is an event
action that a user or system may trigger, such as pressing a key, a mouse click, etc.
Why are keys necessary for lists
To find components on virtual dom and only replace them
Arrow functions difference to normal functions
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.
what are data structures
how to save and organize data
files structure vs data structure
files are save on disk, data on RAM or disk. File has low compatibility with other applications
what are linked lists
structure that has nodes that are connected to each other forming a chain
ways of searching in structures
lineal: iterating through it
binary: separate into chunks, then perform a search
what are hooks
specific react functions that allow you to use things like state, lifecycle events etc. in functional components
limitations of react
high learning curve
low structure and much freedom make projects look different
what is dangerouslySetInnerHTML
allows to dangerously add html that is not checked by React and may allow injection of malicious code
React lazy
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
How to optimize performance
React.lazy
React.memo
Fragments instead of divs
State and form libraries to improve rerendes
What is reconciliation
react updates dom when value changes
what are higher-order component (HOC)
Injects reusable logic in a component like styling, props, loading behavior etc.
What is a closure?
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.
What are the differences between call, apply, and bind?
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.
What is currying function
separating a function with many arguments into many function with one argument to make code more readable
What is memoization?
Memoization is an optimization technique by storing the result of expensive function calls and returning the cached results when the same inputs occur again.
What is a higher-order function?
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.
what is css box model
The box model is a box that wraps around every HTML element.
The box contains content, padding, border, and margin.
what is css sprite
CSS sprites combine multiple images into one single larger image. This would only require one server request resulting in a faster loading time.
visibility hidden versus display none
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.
ways of positioning
static
relative
absolute
fixed: relative to view port and don’t move on scrolling
sticky
difference inline, block and inline-block
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.
pseudo-elements
A pseudo-element allows you to manipulate parts of an element in a special way like :after
pseudo:class
:hover
HTML Entities
starts with & and finish with ;
Used for things like special characters
seesion storage vs local storage
session storage is deleted after browser is closed
difference of id and class
id can only be one. class can be many
how does binary search works
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
what is a queue
a list of elements added after each other
what is a binary tree
a tree data structure with two nodes after each node
difference between throttle and debounce
throttle fires values periodically, debounce only until it end getting values and the period of time passed
typescript primitives
boolean
number
string
undefined
null
void
symbol
big int
difference of interface vs type
type has an equal after the definition
Interface can have extend and implement
type can use intersections & or unions |
what does the unknown type does
unknown is like any put it doesn’t allow to perform operations after a type is assigned to a type
difference between var and let
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
what of this is hoisted:
const
let
function
var
function
var
they can be used before its declaration after ES6
difference of null and undefined
undefined:
has not been assigned
typeof undefined
null:
could be assigned
typeof object
both are falsy but not strict equal
what is the never type
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
what is typeof
gives type of variable as string
what for is tsconfig?
to say the compiler what to do. Like ES version, accept implicit any etc
what is optional chaining?
the elvis operator ?.
It stops running the chain if something is undefined and returns undefined
what is function overloads?
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);
}
}
What is meant by contextual typing?
Type inference based on how the variable is used. Example const a = ‘d’ infers that is a string
what are abstract classes
abstract classes are like interfaces but it forces you to do a certain implementation
what are anonymous functions
functions called without a name like setTimeout or
(function() {
console.log('Invoked immediately after creation');
})();
What are union types
| types
What are intersection types
& types
What are alias types
when you give a name to the union types
tuple types
many-dimensional arrays likelet values: [string, number] = ["Foo", 15];
what are type assertions
as string
How to make object properties immutable in TypeScript
adding readonly like
interface Coordinate {
readonly x: number;
readonly y: number;
}
what are type declaration files
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.
purpose of the ‘in’ operator.
says if prop is in an object
const car = { make: 'Hyundai', model: 'Elantra', year: 2017 };
console.log('model' in car); // true
what is implements for?
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.
string literal types
'dfsfd' | 'dsfdfd'
template literal types?
type Shape = `Grid ${string}`;Write some of the utility types used by typescript
Partial<Type> Constructs a type with all properties of Type set to optional.
Required<Type> Constructs a type consisting of all properties of Type set to required.
Readonly<Type> Constructs a type with all properties of Type set to readonly.
Record<Keys, Type> Constructs an object type with property keys are of type Keys, and values are Type.
binary trees rules
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
what is lifo
last in first out
Kind of scaling in load balancers
- Vertical scalling: increase power of server. It is limited
- Horizontal scalling: replicate the docker
- Load Balancer: server between server that redirects to a replicated server
Hardware load balancer: limited and not highly customizable but faster than software
strategies for scaling load balancers horizontally
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
protect from denial of service attack
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
what is sharding
Sharding: Data gets distributed in servers
what is consistent hashing
algorithm in ring to distribute data efficiently
difference SQL no-SQL
- 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- 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
- No SQL
What is scope in JavaScript?
In JavaScript every function has its own scope. It is basically a collection of rules for how variables are accessed and variables itself.
What does SOLID stand for
S- single responsibility principle
O- open-closed principle
L- Liskov Substitution principle
I- interface segregation principle
D- dependency.
Reactive manifesto parts
responsive
resilient
elastic
message driven
Reactive manifesto: Responsive
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.
Reactive manifesto: Resilient
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.
Reactive manifesto: Elastic
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.
Reactive manifesto: MessageDriven
Reactive Systems rely on asynchronous message-passing to establish a boundary between components that ensures loose coupling, isolation and location transparency.
How does delegation improves resiliency
Recovery of each component is delegated to another (external) component and high-availability is ensured by replication where necessary.
How can resiliency be improved
Resilience is achieved by replication, containment, isolation and delegation.
What does location transparent means
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.
CSS specificity order
Inline styles - Example: <h1 style="color: pink;">
IDs - Example: #navbar
Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href]
Elements and pseudo-elements - Example: h1, :before
CSS min-content
as wide as the biggest children element or word size
css selectors
- select every element
- . Class
# id
- . Class
- select every element
div > b
all b direct child of div
div ~ span
all span sibling of a div (sibling means at the same level)
div + span
very next span of a div
Important pseudoclasses
:hover, :active, :focus, :required, :checked, :disabled, :first-child, only:child, :last-of-type
p:not(.green)
every p that has not the class green
[type=”radio”]
any element with type=”radio”
^=
starts with
$=
ends with
~=
contain the word
