Важно Flashcards

1
Q

What is a recent technical challenge you experienced and how did you solve it?

A

Well… in my thesis project, where I was making ESP32 webserver, I had problem with establishing connection between two microcontrollers – ESP32 and Arduino. It was necessary to connect them, because ESP32 was a webserver, hosting website, and Arduino was part of the robot, that had to be controlled using this website.

The problem was that, unfortunately, ESP32 and Arduino have different logical signal voltage. For ESP32 logical true is 3.3 volts, and for Arduino it is 5 volts. And if connecting Arduino to ESP32 is quite simple, because you just need to use a voltage divider to reduce the voltage from 5 to 3.3 volts, connecting ESP32 output to Arduino input was a big issue, because Arduino could not normally read data on input, because of too low voltage.

So, to solve this problem, I used special library, that makes that possible to use two any digital pins of microcontroller as serial input/output pins, and I used then instead of default pins. Finally, I got working two-way serial connection between microcontrollers.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Можете ли вы объяснить общие принципы относительно фронтенд-безопасности или недавние проблемы, которые вы решили?

A

Well, I am not an expert in frontend safety, but some things I remember.

At first, this is important to use only frequently used safe libraries, and sometimes check them for found vulnerabilities. Also, this is recommended to avoid including in production build something, that is not necessary. Reducing amount of code, we are reducing number of possible vulnerabilities.
Also, we should sanitize data, received from user, because without it certain characters or character groups can be interpreted as HTML or JavaScript code, and executed. So, before outputting this data, we sanitize it.

Well, about last time I touched frontend safety…, It was when I was working on my task planner website. The problem was in authorization. Of course that is not safe to just get user login and password and then use it any time you need to get or send any user-specific information to server. Also, this is certainly not safe to save user password on local storage or somewhere else. In order to make everything more safe, there was made next authorization scheme:

When user goes to login page, he is entering login and password. Then, we get hash from this password and send it to server. On server we don’t save passwords, of course, we save hashes instead. Well, these hashes are compared, and if everything is okay, then we generate access token with limited life time, so we don’t keep this password hash in browser, we keep token instead.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Which version control systems are you familiar with?

A

I am familiar with Git version control system. I used it everywhere, from university, to my current job. I heard, other version control systems exist, but I never used to work with any other system.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Can you describe the difference between progressive enhancement and graceful degradation?

A

Okay… Well, progressive enhancement and graceful degradation are two ways of web project development.

In first case, on pages we start from basic functionality, accessible for all users and all browsers. After that, we step by step add functionality, what will be accessible for users with newer browsers with more wide support of features.

Graceful degradation is the opposite of progressive enhancement. Here we start from best variant of application, what uses all newest features, and then add fallbacks for older browsers, what can’t support all required functionality.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Explain what ARIA and screenreaders are, and how to make a website accessible.

A

Screenreaders are special programs that people with limited possibilities can use to interact with web page content. These programs can read page content, like texts, headers, links, lists, etcetera, and then tell about them in audial form.

ARIA is set of html attributes, that can be used to improve page content understanding for people with limited possibilities. We can provide alternative labels an description for certain page elements. This case screenreaders will read them too, and can give more information for user.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What does CORS stand for and what issue does it address?

A

Okay… Usually web-browsers are allowing to use only resources from one domain. So, you can’t inside your code request resources from any other domain, than your website domain. CORS is cross-origin resource sharing, and this is mechanism that provides possibility to set up certain list of domains, with that you also will be able to interact. So, with CORS, browser can request resources from other domains too, if server explicitly allowed this.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What does a doctype do?

A

Doctupe is used to tell browser, what kind of document it exactly works with. Different HTML versions, for example HTML5 and HTML4, should be interpreted differently. If browser accidentally will use HTML4 interpretation mechanisms on HTML5 document, then some functions will work not as expected, or won’t work at all.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

How do you serve a page with content in multiple languages?

A

In my last place of work there was system when we were saving all translations into JavaScript files, and then taking it from there using special function. Depending on the user selected language, certain language translations were shown. All these translations were loading on application load in one block. Later, instead of this slow and big system, I made another mechanism of page translations loading. In my solution, we were loading page template, and then for each place where we needed text, we were getting it by key through sending request to server.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What kind of things must you be wary of when designing or developing for multilingual sites?

A

First of all, language selection must be easy and simple for user. This is most important.

We also should ensure that our application can correctly show all symbols of all languages we are using.

Then, there also can be problem with Arabic languages, written from right to left, that they don’t look good with same design. Same problem is also in cases when translation takes more place than original text because this case will appear text overflow.

Next, we should ensure that any of words that we are not translating, for example logotypes or something like that, is not some kind of a swear or indecent word in other language.

Well, that are all main things, that I can remember.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is progressive rendering?

A

Progressive rendering is web application optimization method, when page content is shown to user immediately when it is loaded, instead of waiting for all possible elements and resources to be loaded. This case user can interact with already loaded part of page content, while other page parts are still loading. This helps to improve user experience.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.

A

Srcset is attribute that allows us to show different pictures inside image element depending on user device characteristics and viewport size. This attribute value is provided as list of images and their sizes.

When browser is deciding what image should be shown, at first it is checking user device characteristics, like screen resolution.
Then browser compares each image in list with available viewport size.
Finally, browser selects best suitable image from this list and show it on screen.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?

A

Both CSS resetting and normalizing are mechanisms used to make styles environment more predictable for developer.

CSS resetting is overriding of all default styles, used by browser to different elements. This case we avoid cases when certain elements can behave a bit differently in different browsers, and can start from scratch, when adding our styles.

CSS normalizing is partial overriding of default styles, for exact elements, to make them more predictable, without totally removing all the impact from default browser styles. This case we can force using of critical styles like padding and margin for certain elements but avoid need to write styles for all elements.

Which way I would choose depends on exact situation. If that would be needed to create for project its own unique design, and be sure that nothing will interfere it, then I would choose CSS resetting.

Otherwise, if that would be necessary to just make elements look a bit more unified and make their behavior more predictable in critical cases, then I would choose normalizing CSS.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are the different ways to visually hide content (and make it available only for screen readers)?

A

I know two ways.

First, if we want to create an element, what will be accessible only for screen readers, then we can just change its position to absolute and then move it out of screen borders. Then this element will remain in its container children list, so we will keep main structure, but user won’t see it.

Second way, we can change element visibility property to “hidden”.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Have you ever used a grid system, and if so, what do you prefer?

A

On my last job place we used Vue framework Vuetify library grid system on couple of pages. That was the only case I interacted with grids.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Can you give an example of an @media property other than screen?

A

Yes, I know two other media properties.

First is “print”, and styles inside this block will be used only in case if user is printing page.

Second is “speech”. These styles will be used only when text is read using a screen reader or voiced using speech synthesizer.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

How would you implement a web design comp that uses non-standard fonts?

A

First, I would download these fonts and save on main server, or just add corresponding links into page head. Then, I would add CSS selector, which would use these fonts, and finally, check if all texts with these fonts look okay.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What’s the difference between inline and inline-block?

A

Inline element is shown inside regular text flow. It takes only width and height, required for its content, and doesn’t allow padding and margin in vertical direction.

Inline block element is almost same as inline element, but it also has block element properties. So, it can have also vertical margin and padding, and can have custom width and height regardless of its content.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What’s the difference between the “nth-of-type()” and “nth-child()” selectors?

A

nth-child style will be used for each nth element inside parent container. So, if we have div:nth-child and two in brackets, then this selector will select second element where div is parent, regardless of its type.

Div:nth-of-type and two in brackets will select each second div element inside any parent.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What existing CSS frameworks have you used locally, or in production? How would you change/improve them?

A

I don’t have experience of using CSS frameworks, unfortunately, so I can’t tell anything about it…

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Have you used CSS Grid?

A

Maybe a couple of times. Mostly I was using flexboxes, and that was enough.

The only time I remember I used CSS grid was on my current job place, where we had lab creation form, and all items there were positioned using vuetify grid.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

How is clearfix css property useful?

A

Clearfix is not a CSS property, really. This is just trick what can be used to make elements markup look good.

For example, we have float elements inside parent container. Float elements are excluded from regular document flow, and their parent container doesn’t take them into account when calculating its content size. So, if we don’t have anything after these float elements, then they can get out of parent container. In order to avoid it, we can add additional element inside their parent container right after these elements, and set up its property clear value to both, so parent container will not be less than needed to make float elements be above this clearfix element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What’s the difference between host objects and native objects?

A

Host object are object, provided by execution environment, and depend on it. For example, that are window or document, accessible only in web browser.

Native objects are object, provided by language itself and accessible from anywhere. That are Object, Array, Function, and others.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What’s the difference between feature detection, feature inference, and using the UA string?

A

Feature detection is a method when we test certain features existence before we use them.
If testing results shown that certain features exist, then we can use them.

Feature interference is a method when we expect certain features to exist based on existence of other related features and methods. This method is less reliable than feature detection, because existence of certain features is not guaranteed.

Using user agent string is least reliable method, here we expect certain features exist or not exist based on information about browser name and version, user device, and operational system. This is not reliable method, because this string can be hidden or redefined by user.

But, from the other side, sometimes using UA string is better than feature detection. This is useful in cases when we know that certain browsers or browser versions have bugs or different realization of some features. This case, if we just check existence of certain method, for example, and then go and use it, then we can have unexpected bugs, but we can avoid this by checking browser version and using another method in browsers, where first method is not working correctly right now.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What’s the difference between an “attribute” and a “property”?

A

Attribute is a text value which defines certain element characteristics or state inside HTML code.

Property is DOM element object data, which represent its state or characteristics during runtime.

The difference between them is that attributes are static element state representation inside of HTML element code, which is used once to define DOM elements properties values, while properties are dynamic element state during runtime.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What are the pros and cons of extending built-in JavaScript objects?

A

Extending default objects makes code easier to read and write, also increases reusability.
Else this object extension functionality can be used to add polyfills to add new functionality to old JavaScript versions.

From other side, extension of built-in objects can lead to errors and bugs, because third-party libraries or other code parts, which were added previously, expect another functionality from methods.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Explain the same-origin policy with regards to JavaScript.

A

Same origin policy does not allow resources from one source access resources from another source. So it blocks XMLHttpRequests in script to access data from another source, also cookies and local storage data, set by script from one resource, not accessible for scripts from another resources.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Why is it called a Ternary operator, what does the word “Ternary” indicate?

A

Ternary means triple. This operator uses three operands to function.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Explain the difference between mutable and immutable objects. What is an example of an immutable object in JavaScript? What are the pros and cons of immutability? How can you achieve immutability in your own code?

A

Mutable objects can be changed, while immutable objects is not possible to change.

In JavaScript, immutable are numbers and strings.

About pros and cons. From one side, immutability makes states easier to manage, because you are always sure, that if you somewhere used any value, it won’t be accidentally changed somewhere else, and program is more predictable.
From another side, in case of immutability, if you want to somehow modify string, for example, then you create another new object, containing all changes, and this takes additional memory and time.

About how to achieve immutability. For simple things like number or string, we can just use const word when declaring variables with these values. But for more complex things like arrays and objects you need to use special libraries, which provide this immutability functional, or write your own code which will allow you to interact with arrays and objects like if they were immutable too.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What are the differences between ES6 class and ES5 function constructors?

A

First of all, of course, one important difference is declaration of classes and functions. In ES6 you use class keyword for creating a new class, in ES5 you create a function.

Second difference is inheritance. Both these mechanisms use prototypes for inheritance, but in class you can just use another class as base class using extends keyword, and for initialization use super keyword in class constructor, while in function constructor you should explicitly execute all actions with function prototype to make it work.

And finally, classes in JavaScript are not affected by hoisting, unlike functions.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

What is the difference between while and do-while loops in JavaScript?

A

The difference is in how they work. In while loop we check condition first, and if it is true, then we execute code. In do-while loop we execute code first, then we check condition, and finally, if condition is true, we continue loop.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Что такое grid?

A

Grid is CSS feature, that provide us possibility to create flexible and customizable layouts.
The main principle of grid is that we have certain matrix with columns and rows, and for each of elements in this matrix we define how many rows and columns it takes. Then, in browser, depending on other rules all these elements inside grid can be differently shown depending on screen size, size of elements, and grid rules that we set up.

I will be honest, I don’t have practical experience of working with grid, so I can’t tell you more, unfortunately.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

What is ORM?

A

ORM means Object Relational Mapping. The idea of ORM is to make it possible to connect database tables and objects in code with no need to write SQL requests manually.

Instead of it, your classes in your code are used to create a table in database, all fields of class and database columns are linked, and when you do changes and save them, then database is automatically changed too.

So, ORM makes it easier for regular developer to write code, related to databases, because you don’t need to manually write SQL code, so it saves time and reduces chances to write code with bugs. While not so experienced developer can write complicated and hard to read query, ORM usually generates optimized and reliable code, so it also improves safety in most cases.

From the other side, you need another dependency in your project, and more code means more possible vulnerabilities. Also, code, generated by ORM in some cases can be slower, than code, written by programmer.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

CSR vs SSR

A

Client-side rendering is a website organization method, when all our framework components and related elements are mounted on certain HTML template after page is loaded. Client-side rendering is simpler, than server-side rendering, because you do all actions in one stage, and all browser host objects like document, window and DOM tree are always accessible. But, from the other side, client-side rendering makes our page slow and less optimized for search engines. So, why is it so? It is slow, first of all, because in order to make our application work, we every time need to upload script, which contains instructions to build up our frontend, and execute it on client device. This takes time to load it, this takes time to run it. If user has device with minor computational power, then our website can load for quite long time, and user can lose interest and close the tab.

Server-side rendering is opposite to client-side rendering. This case, we do on server side as many website building steps, as possible, and send to client already mostly ready to use HTML template, which could need just minor modification through scripts. Through this, we reduce importance of user device computational power, and make our website load faster. Also, since our website this case is almost static HTML, loaded from first seconds of page life, search engines can see all these contents of our page.

34
Q

HTTP status codes

A

Okay… HTTP has quite a lot of codes, which aim is to tell the opposite side what is going on. We can divide them into few groups. Codes from 100 to 199 are reserved for informational status codes. From 200 to 299 we have success codes, from 300 to 399 we have redirection, from 400 to 499 - client-side errors, and from 500 – server-side errors.

35
Q

Caching in browser

A

Caching is a feature, which makes website work more responsive and fast in some cases. The idea of caching is that when we receive any data from server, browser saves this answer into temporary storage, and if later client requests same data, it can be loaded from cache, instead of loading it from server.

Caching has as positive as negative side. The positive side, is, as I already said, that if we make request to same resource, it can be quickly taken from cache, instead of sending slow request to server. So, cached page can be loaded almost immediately. But, from the other side, this also can harm user experience. For example, if cache is outdated. I mean, the situation, when the response content, which server should return, already changed, but browser still uses old version. That is not good. So, in order to reduce effect of this problem on user life, servers can set up cache lifespan limit, in order to be sure, that cache can’t be older than certain time period.

36
Q

What are cookies and how are they used?

A

Cookies are small pieces of text, which are stored on user device. Cookies usually are used to store information about user preferences, or authorization. Cookies purpose it to make websites remember user, and its certain actions between sessions.

Cookies work that way, that they can be accessed both from server and client side. But, while server can do this only through requests, which should be initiated from client side, client always has access to cookies JavaScript host object “document” property. This is important to say, that cookies are unique for each website, and the second thing to know, is that only main domain will receive all cookies by default.

So, another important part, is that localStorage and cookies are similar in some things, and the question is, when and where we should use cookies, and where and when we should use localStorage.
The first thing to notice here, is that cookies can be set up to have limited life span. So, this makes it good candidate for storing authorization token, for example. So, we just need to check if cookie exist, and if yes, then our access token is probably not outdated. This is also quite useful to use cookies, when all this data has to be sent to server in every request.
From the other side, cookies have very limited size. Their maximal size is four kilobytes, what is quite small comparing to localStorage, which size, depending on browser, usually from five to ten megabytes.

37
Q

What are HTTP headers and what are main.

A

HTTP headers are some kind of metadata attributes, send together with HTTP request or response. They can contain different information, which can be content type or length, cache control options, date and time of request or response creation, authorization data, or browser which is used.

38
Q

What is HTTP and what it is needed for?

A

HTTP is a Hypertext Transfer Protocol. If to talk simply, this is agreement about how different devices, connected to the internet, send data to each other.

Through HTTP this is possible to send not only text data, but also images, audio, or video files.

HTTP is fundament of modern Internet.

39
Q

What task would be better to solve using cookie, instead of localStorage?

A

Session Management:
Cookies are often used for user session management. You can store a unique session identifier in a cookie and check it with each request to identify the user and maintain session state.

Browser Compatibility:
Cookies have better support in older browser versions, so if you need to support older browsers, cookies may be a more reliable option.

Size Limitation:
Cookies have a size limitation (usually around 4 KB per domain), but they are automatically managed by the browser, which can help prevent storage overflow.

Data Sharing between Server and Client:
Cookies can be used to transfer data between the client and server, which can be useful if you need to send data to the server with every request, such as session information or user preferences.

40
Q

Что такое REST?

A

Rest is an architectural style for developing applications, which are using network. REST uses some restrictions and patterns to keep system simple, reliable and scalable.

REST includes few principles.
First is client-server architecture. That mean, that our application is separated into two parts, which communicate each other thorough special API, and one of parts, named client, is focused on interaction with user, while another, named server, is responsible for storing and processing business data.

Second principle is that server must not store information about previous sessions with client. All data, needed to process request, must be sent together with the request.

Third, is explicit caching. This mean, that server must provide information about caching for each sent resource, and through this control, how and when new data should be sent, and when cached data should be used.

Fourth is layered system. This mean, that client and server should not care about how request is sent, except of their direct neighbors. So, between client and server we can have absolutely everything, multiple proxy servers, balancers etcetera, but changing them should not affect on how client request is treated by server.

Final principle is code on demand. So, client does not have any source code on itself, instead, sever is sending source code to client, and then client executes it. Through this we get flexibility, because we can freely change source code on server side and it will automatically affect on final result on client side.

41
Q

How to center a div?

A

First, through setting its positioning to absolute and its top and left props to 50%.
Then, we translate it by –50% in both vertical and horizontal direction.

Second, through putting div into flexbox container, and setting it’s justify-content and align-items properties to center.

Third, through putting div into grid container, and setting it’s justify-content and align-items properties to center.

42
Q

What for do we need storages like Vuex or Redux?

A

First of all, we have global storage for certain information, which should be accessible from all our application parts. For example, when I was working with Vuex and Pinia storages, I was using this functionality to work with screen size and create responsive layout on the page. So, I was listening to screen resize event, saving this information into storage, and then I could access it from any part of the application and change layout to make it look good on mobile devices, for example.

Next, is that information flow in storages is predictable and we potentially have less problems when work with it. For example, in Pinia storage you don’t have write rights for storage state. So, you can read its value, but you can change it only using special action functions, what you define inside this storage. So you always know how your storage data will be changed.

Also, you can create different storages serving different purposes. Information inside these storages is centralized across your application, but separated from each other. This can be current viewport and user device information, or maybe some user preferences, like current theme of application.

Finally, for example, in Vue, storages like Pinia are reactive. So, you can directly import storage state into your component as computed property and use it as any other computed property.

43
Q

What is Vue instance and how to create it?

A

Vue instance is an instance of Vue component. This component has internal state, template, computed properties and other things following the component structure, on base of what it was created. Vue component instances can have children, so we can have tree of Vue components. You can create it using createApp function.

44
Q

What are provide / inject in Vue?

A

In Vue, you can avoid props drilling through using provide and inject items in component object. Provide object or provide function, which returns object, makes all object properties accessible in all components below this one. In children components you can access these properties using inject.

This is also possible to provide and inject values using corresponding functions, added in Vue 3.
So, you can also interact with providing and injecting values inside component setup.

45
Q

What are Vue event modifiers?

A

Well, in Vue you can modify event listeners behavior, through adding some modifires to them. To do this, you just need to add dot and modifier name after event name in component template.

Right now, I can remember few modifiers. Modifier “once” will make this event to be handled only once, “self” will catch only events what were fired directly on this certain element, “stop” will stop event propagation.

46
Q

How you can watch changes of nested data in Vue?

A

To watch changes of certain nested data value in Vue, you can use two ways.
First, is just to declare default watcher using Options API. This case you provide full path from root object to nested property, and then work with it as with any other watcher.

Other way, is to add watcher imperatively inside your component lifecycle hooks or methods.

47
Q

What is mixins merge strategy in Vue?

A

If you have two mixins, and each of them provides method, or data properties, or computed values with same name, then mixin loaded last will override first mixin properties.
Also, as I know, this is possible to somehow add your own mixins conflicts resolving functionality into Vue, but I never faced issues which would need that, so I can’t tell you a lot about this.

48
Q

What are Generators and how you could practically use them?

A

Generators are special kind of functions in JavaScript, which allow you to write functions with multiple steps of execution. On each of these execution steps you can read value returned from function and provide new values into function as arguments.

In order to create generator function, you must add an asterisk after function keyword.

After that, you can use “yield” keyword inside iterators in order to return intermediate function value and receive additional arguments from ouside of function.

If to talk in simple words, generator functions are iterable functions. When you create generator instance after executing generator function, you can move from step to step using next function. Next function takes one argument, which can be returned from yield inside generator.

Also, this is possible to extend one generator with another. To do this, we can add an asterisk after yield keyword of first generator, and after it add instance of another generator.
This case we will reach first generator yield, then iterate over all yields of second generator, and then return back to first generator.

So, what for we can use generators?
We can use generators, for example, to create functions, where we need to iteratively generate some output. Maybe even endlessly. For example this can be counters, or pseudorandom numbers generation, or something else.

Second way, is to use generators for splitting one big synchronous operation into few steps, to avoid interface freezing.

49
Q

What are ref, unref, toRef, toRefs, isRef, shallowReactive and shallowRef?

A

Ref is reactive reference in Vue. When returned from setup, ref is accessible like any other variable, defined in data option.

Unref returns inner value of ref.

ToRef can be used to create reactive property on reactive object.

IsRef is a function which returns true or false depending on is its argument a ref, or not.

Reactive is a function which takes object as argument and returns recursively reactive proxy of this object.

ShallowReactive is similar to reactive function, but it does not make inner objects properties reactive.

ShallowRef is same like ref, but it does not make inner objects properties reactive.

50
Q

Why this is necessary for the component data to be a function?

A

This is needed to always get new instance of data object.

Also, this case this is more convenient for you to manage complex initial component state, because when your data option is a function, your can do some calculations or calls to other application parts to get initial state data.

Finally, this makes component data loading to be lazy, so data will be initialized only when new instance of component is created. This makes application more optimized.

51
Q

In Vue router, what are navigation guards?

A

Navigation guards in Vue router are special middleware functions, which give you higher control over routing in your application.

There are three types of these functions.

First are global functions, which you can use in your router initial setup. These are:
- beforeEach, which is called each time before route will be changed.
- beforeResolve, which is called after component inner guards were called and asynchronous components are resolved, but before real navigation to the aim page.
- afterEach, which is called after Vue router already changed route.

Second type is route guard, which is beforeEnter. Works same as beforeEach, but called only for certain route.

Thrid type are component inner functions, which are:
- beforeRouterEnter, called right before component, related to this route, will be created
- beforeRouteUpdate, called in case if route changed, but this component is still used in this route
- beforeRouteLeave, called right before router will move on another route, where this component does not exist.

52
Q

ES6+ vs ES5

A

ES6 and newer versions are result of development of JavaScript as language. Comparing to ES5, they provide much more convenient instruments to work with, which allow developer to concentrate on features, instead of details of their realization.

If to talk more exactly, ES6 adds many new things like const and let variables, template strings, classes, arrow functions, Promises etcetera.

To make long story short, ES6 just much more convenient tool, but from other side, has less suport among browsers. But this problem can be solved using special libraries and plugins for build tools, which compile ES6 code into code for older JavaScript versions.

53
Q

Tell me about all Vue lifecycle hooks.

A

Lifecycle hooks in Vue are certain functions which are called on certain component livecycle stage.

First two hooks are beforeCreate and created.
BeforeCreate is fired when component already initialized, but no watchers or event listeners are added.
Created is fired when component has completely finished internal initialization of listeners, state reactivity, computed properties etcetera, but not yet mounted.

Next two hooks are beforeMounted and mounted.
BeforeMounted is called right before component will start mounting.
Mounted is called when component was successfully mounted on DOM tree.

Next two hooks are beforeUpdate and updated.
BeforeUpdate is called right after component internal state was changed, but before DOM tree was updated.
Updated is called right after DOM tree was updated accordingly to component internal state.

Final two hooks are beforeUnmount and unmounted.
BeforeUnmount is called right before component will start unmounting.
Mounted is called right after component was unmounted.

Also we have few special hooks, which are activated, deactivated and errorCaptured.
Activated is fired when we activate component inside “keep-alive”.
Deactivated is fired when we deactivate component inside “keep-alive”.
ErrorCaptured is called if we have got an error thrown from any children component. So, in ErrorCaptured we can handle this error.

54
Q

Why type of NaN is number?

A

Because this is necessary to provide safe way to work with values, which are not numbers inside matemathical expressions. Cause NaN is a number, all operators handle it as number, and there are no side problems, except of that every operation with NaN leads to NaN. But if NaN would be string, or object, then result of operations with it would be hard to predict.

55
Q

When can happen reactivity loss in Vue? How to find the problem source?

A

Well, in my practice reactivity loss can happen if you return from setup certain object or value without wrapping it with reactive or ref function.

About how problem source can be found…
First of all, you can just look over component, where you found this problem, and try to logically understand, which part of this component can be broken.
Second, probably, you could use certain development tools, to find this problem, but I am not sure which exactly, because I had this problem maybe just a couple of times in my life.

56
Q

What is nullish coalescing operator “??”?

A

Nullish coalescing operator is an operator which returns right operand if left operand is null or undefined, otherwise it returns left operand.

57
Q

What things can lead to memory leaks in JavaScript applications?

A

To memory leaks can lead things like not stopped timers, intervals, unfinished asynchronous operations and cyclical references.

58
Q

What you can do to improve accessibility of Vue application?

A

First of all, use correct elements in correct places. If you want to create button, you use button element, if you want to create input, you use input element etcetera. Through this screenreaders and other software for people with limited possibilities can recognize them on the page.

Then, you should ensure that all control elements are accessible and have correct aria labels and descriptions.

Third, this should be possible to navigate over your application using only keyboard.

Finally, contrast level should be high in your application, so users could easily recognize text on its background.

59
Q

What is namespace in VueX?

A

In VueX, that can be a problem to access certain storage property or action if you have multiple storages. To solve this problem, you can set namespaced property in VueX storage object to true, and then register it as named module in VueX.
Later, in Vue components, you can import them using default mapState or mapActions function through providing module name as first argument.

60
Q

What do Promise methods all, allSettled, race, any?

A

All – execute all promises, return array of promises execution results on success, on any reject – return rejected promise.
AllSettled – execute all promises, return array of promise execution results.
Race – execute all promises, return first finished promise.
Any – execute all promises, return first successfull promise result.

61
Q

What is semantic layout?

A

Semantic layout is a layout where we use semantically corrent elements for building interface of our application. So, if we need to make a button, we use button tag, if we need input, we use input tag etcetera.

62
Q

What except of promises will be handled as microtask?

A

First, MutationObserver callbacks.

Second, any task what we put into microtasks using queueMicrotask() function.

63
Q

What is __proto__ and prototype and what is the difference between them?

A

Well, to explain what is __proto__ and prototype I need to make short explaination about how classes in JavaScript work.

Long time ago, there were no classes in JavaScript. You could create only function constructors, and if you wanted to create function constructor which will create certain object with certain set of methods, accessible from any instance of this new object, and have these methods be created once instead of recreating them in function constructor, you had to add these methods into function constructor prototype.

And when you wanted to inherit one function constructor from another, you also had to do this through prototype.

Later, in ES6 we have got classes, which are, by fact, syntaxical sugar over this function constructors system.

So, when you call certain object prototype, you get its function constructor prototype.
Prototype can be received using prototype key only from function constructors and classes, which by fact are function constructors too.

__proto__ property is a property using what we can get prototype of function constructor of object instance.

64
Q

Is that possible to find out, how many arguments does JS function take?

A

Yes, you can just check this function “length” property. But in this case rest parameters won’t be counted.

65
Q

What is the difference between event.preventDefault and event.stopPropagation? How and when you need to use them?

A

event.preventDefault prevents default action, which would be made. For example, if you click on <a> tag, then this would prevent going to this <a> tag url.</a></a>

event.stopPropagation stops event bubbling and capturing across DOM tree.

66
Q

How you can forbid adding new properties into object?

A

Using Object.preventExtension method. This case we won’t be able to add new properties to this object.

67
Q

What is the difference between Map and WeakMap / Set and WeakSet?

A

In Map all references are strong. So, garbage collector won’t collect items, stored in Map. In WeakMap references are weak. If there are no other references for this resource, then item in WeakMap can be collected.

68
Q

What is the difference between throw “error” and throw new Error(“error”)?

A

In first case will be thrown only this exact string, and no additional information will be provided.
In second case, will be thrown an Error class instance object, which will include additional information about envoronment, like call stack, for example.

69
Q

How we can check is page opened in iframe or not? How we can prevent opening page inside an iframe?

A

We can check if current page is inside iframe through comparing window.self to window.top. If this comparison returns true, then our page is not inside an iframe.

About how we can prevent this… If I remember correctly, we can use certain HTTP header for this purpose. Unfortrunately, I don’t remember exactly, which header we should use.

70
Q

What WebSocket is?

A

WebSocket is a special protocol which allows to establish constant connection between client and server.
Inside WebSocket connection client and server can send information to each other using messages. These messages provide quicker connection and smaller delays, comparing to default HTTP protocol, because there are no need in new request to be created on each update.

71
Q

What is Shadow DOM?

A

Shadow DOM is a part from DOM which is isolated from other parts of DOM tree. Styles and code inside shadow DOM can’t interact with anything outside this shadow DOM fragment.

72
Q

Explain what is transition property in CSS and how it works.

A

Transition property in CSS is a property which is used to create certain animations between two states of certain element. In our CSS code we can specify, what properties should be affected by this transition, what is transition time, and what is the way in what we should interpolate intermediate state of this property.

73
Q

What is the difference between border and outline?

A

Border affects on visible form of element corners, while outline is always drawn around them and does not affect on them. Also, border is part of element, but outline does not affect on real element size and drawn outside of it.

74
Q

How you can make hyperlink element, which will be opening its target url in new tab?

A

By setting its target attribute value to _blank.

75
Q

What is boxing and unboxing in JS?

A

In JS, boxing and unboxing is a process of wrapping primitive value with object to make it possible to call certain specific methods, and unwrapping after operation was finished.

76
Q

What for do we need heap in JS?

A

Because stack does not allow access to random memory part, but heap does. Also, we can freely extend heap, while we have enough memory.

77
Q

What is accessor and what is descriptor?

A

Accessors are special component methods, which we can use to interact with this component properties values, like get and set, for example.

Descriptors are some kind of config, which defines, what actions we can do with certain properties in JS.

78
Q

What is the difference between type and interface in TypeScript?

A

First of all, type is created using type keyword, and interface using interface keyword. Interface creation syntax is similar to class syntax, but type creation syntax is just assignment.

Second, interfaces can be extended using extends keyword, for types we use “&” symbol.

Third, interfaces always describe objects, but type can be primitive.

Next, intefaces can be implemented by classes, while types can’t.

79
Q

What is unknown and never in TypeScript?

A

Unknown represents data type, which never should happen. For example, if function should throw an error, its return type is never.

Unknown is a data type, which represent data, about what we know nothing.
It is more safe than any, because TypeScript does not allow to do some operations, for example assignment, using variable of unknown type without explicit type narrowing.

80
Q

What does background-size do?

A

Background-size allows us to resize background image. There are two key values: contain and cover. Contain resizes image with preserving aspect ratio to make it cover element as full as possible, but does not crop it. Cover does almost same, but makes image completely cover container, even if it will be resized that much that it will be cropped.

81
Q

What is JWT token + add more infromation about other questions about JWT token

A

The idea of JWT is to encode certain information and then use it for authorized access.
Server generates JWT based on certain seed and token JSON content, and then gives it to client.
Client re-sends JWT back to server with the request, and then server can decode it to get information from it.

82
Q

In what Vue component lifecycle hook is recommended to make server requests?

A

In mounted(), because for this moment component is already mounted and if in server request callback some actions with component elements will be made, then there will be no errors.