Обязательно

Question 1

When building a new web site or maintaining one, can you explain some techniques you have used to increase performance?

Answer 1

Well, performance… you mean, how fast page is loaded for user, or what?

…

In order to reduce page loading time we could to few things.

First of all, we have to understand, what step of process takes longest time. Is that connection to server, or loading a lot of heavy files, or execution of JavaScript, that we have to do before page is rendered, or something else.

If to talk about simple and often cases, well, on client side, if on our page we are using pictures, then we could compress them to make them take less memory space, so they will be loaded faster. Also, we must ensure that our code and other files are splitted into chunks of small size, and we are loading only these chunks, that we need at current moment.

On server side, we, for example, can save ofter accessed data into cache, to reduce time we need to send it to user, or, in case if on client side it takes long time to build DOM tree using complex frameworks with lot of JavaScript, then we could prebuild it on server using server side rendering, and then send to client mostly ready to use structure.

Question 2

What actions have you personally taken on recent projects to increase maintainability of your code?

Answer 2

Okay… At first, I am trying to keep same code style, because this makes code reading much easier. This was implemented as on my current workplace, same in my pet projects. This touches indentation, naming, etcetera.

Second, is splitting code into small functional blocks, each of what contains only certain information, and I am trying to avoid code mixing, following first SOLID principle.

All in all, I am trying always remember about SOLID and KISS principles and follow them.

Question 3

Can you describe your workflow when you create a web page?

Answer 3

Well… If we are talking about web page inside existing project with used framework, for example, Vue, then order is next.

First step is page content. This case I am thinking about what should be on the page, and what page structure would be better.

After that I create page file and add all necessary elements or framework components into template, and write JavaScript code. I also add necessary CSS, without which would be impossible to use the page.

Then I test if everything work fine, I add other CSS styles, to make page look pretty.

Finally, I make a short break, and then with fresh look return to the code, looking for possible mistakes or things I could do better.

Question 4

If you have 5 different stylesheets, how would you best integrate them into the site?

Answer 4

Well… It depends on exact project structure and needs. But if to talk in common, then I see next solutions.

First, most simple. We can just use <link></link> html element in header to directly import all these files.

Second variant. Like first one, but this case we merge all these five files, so we get less requests to server, and lower loading time.

Third. If these styles are used to add styling to framework components, then would make sense to split them into small parts, and then import when component is loaded. This case, we don’t need to load all styles, we can just use small piece.

Question 5

How would you optimize a website’s assets/resources?

Answer 5

Okay… At first, we should remove all assets, what we don’t really need, and load only necessary.

Second, we could load resources asynchronously, to load them in parallel.

Third, we should properly set up caching options, to reduce number of requests to server.

Finally, we can minify all code and style files, and also use compressed pictures.

Question 6

Describe how you would create a simple slideshow page.

Answer 6

Well, that is quite simple thing, I think. At first, I would create page itself and add it into framework router. Then, talking about slideshow…

Let’s imagine, that we have certain list of images in form of list of links. This case I just add an image element on page. I set source of image to first of this links. Then, after interval, I set it as second link, then third, etcetera, until I reach last link. Then I go to first one and everything repeats.

Question 7

Explain the importance of standards and standards bodies.

Answer 7

I think, this is important because this makes us confident in how our code will be working and how certain things should behave. Without standardization, things would be more complex and harder to work with, because code written for one case could not be used everywhere without conflicts.

Question 8

What is Flash of Unstyled Content? How do you avoid FOUC?

Answer 8

This is period, when on page loading page content is already loaded, but styles are not, and page is shown without any styles applied to it.

We can avoid it through different mechanisms. First of all, we could put our styles in head directly or put there links to our stylesheets, to make them start loading first.

Also, we can use styles asynchronous loading using “preload” rel attribute value, and defer our main script execution until all these styles are loaded.

Question 9

Explain some of the pros and cons for CSS animations versus JavaScript animations.

Answer 9

Okay. From one side, CSS animations are simple to declare, they are well optimized, so their performance is good, and finally, we can bind them to different states of components, like hover or active, or focus. From another side, CSS animations become quite difficult to use, when we are talking about complex animations, and also we are limited to certain set of effects.

JavaScript animations. Good sides are next: they are agile, because you have more control on process of execution, and we can execute these animations in certain cases, for example on page scrolling, or on click on certain element.
Bad side of JavaScript animations is bad performance. Also, if user disabled JavaScript execution in browser, then JavaScript animations can not work at all.

Question 10

How did you handle a disagreement with your boss or your collaborator?

Answer 10

Well… I have certain set of rules for cases like this. First, this is important to say, that even in case of disagreement, this is necessary to be calm and polite, because rage and rudeness don’t help to solve the situation.

Well, first situation is disagreement with boss. This case, at first, I am trying to get more information about boss point of view. Maybe, I just don’t know enough, and that is the reason. On next step, if I still have disagreement, I am trying to describe my position pros and cons as fully, as only possible, because maybe just my opponent don’t understand what I want to do, and thinks about something different, and that is the source of the problem. And if anyway we didn’t reach consensus, then I usually just do as my boss told me.

If to talk about dispute with my colleagues, then, I do step one and two as I described in first case, but then if we not reached agreement, I usually go and ask somebody more experienced in dispute sphere to look on our situation and tell us what to do here.

Question 11

What skills are needed to be a good front-end developer?

Answer 11

Well… First of all, in order to be good developer, you need to be able to work with other people on good level, because only through cooperation is possible to do something really big and valuable. You have to be polite, stay calm, and never be rude.

Second moment is personal traits. Good developer is developer who is patient and attentive to details. You have to read documentation, you have to use search engines, not always you can get information quickly, so you should have certain margin of safety to be sure that you will do everything as you have to.

Finally, of course good front-end developer should have good technical knowledge. And here I am talking more not about knowledge about certain frameworks, but about possibilities, that you can use during development. I mean, if for example I am working with button component, and my aim is to make it look pretty, I not always should remember all CSS properties, but I must remember about fundamental possibilities to change button color, or changing its border, or padding, or something else.

That were skills, which in my opinion, make a good front-end developer.

Question 12

Explain the difference between cookies, session storage, and local storage?

Answer 12

Cookies are small pieces with limited lifetime, can be sent to server through special HTTP headers. Both server and client can read and write cookies, and this is possible to make cookies accessible only from server side, which is useful for storing authorization tokens. Usually they are used to store small pieces of information about, for example, authorization session inside application, so this case they store access token, for example.

Session storage is special key-value string storage, used to store certain information during one session. Session storage is separate for each tab. Session ends when browser closes, or this exact browser tab closes, and then this data is deleted.

Local storage is like session storage, but it is common for whole domain, and it is not deleted after tab is closed. It is usually used to store cached data or user settings.

Question 13

What are data- attributes good for?

Answer 13

Data attributes are HTML attributes that are starting with data word. These attributes we can freely edit, because none of them are used in internal HTML mechanisms. We can use these attributes for different purposes. For example, we can save certain information about element inside these attributes. Then we can access it through JavaScript or apply CSS styles depending on the content. Also, as I know, Vue framework uses data attributes to apply scoped styles to component.

Question 14

Describe the difference between <script>, <script async> and <script defer>.

Answer 14

Script is loaded synchronously, so browser stops document parsing until resource is loaded.
Script async works differently. When browser reaches it, it starts resource loading, but none of browser processes are paused, they go in parallel.
Script defer is like script async, but its loading starts only after page is loaded.

Question 15

Why is it generally a good idea to position CSS <link>s between <head> </head> and JS <script>s just before </body>? Do you know any exceptions?

Answer 15

Because this case any resources, that we are loading using links, are loaded before page content render starts. This is important, because in case of styles this helps us avoid situation when page content is loaded, but unstyled.
Script is good to place before body closing tag because this case we start script execution after page content is rendered. For example, in case of frameworks, this makes us sure that all other elements on page already exist, all styles are loaded, and we can freely mount our application.

Question 16

What are empty elements in HTML ?

Answer 16

Empty elements are elements that don’t have any content between open and close tags.

Example of these elements are image element, input, or link. All necessary information for them is provided inside element attributes, and they don’t have children nodes.

Question 17

What is CSS selector specificity and how does it work?

Answer 17

Specificity is a rule that determines, which of styles will be applied to element when you have few conflicting styles.

It works so, that CSS looks on what of existing styles selector is most specific and uses this style to override styles with less specific selectors.

Most specific selector is inline style. CSS will always use inline style instead of any other.

Specificity for other selectors depend on many factors, including selector type and selector rule length.

I don’t remember all details, but mechanism works that way, when selector by element id is most important, then goes selector by class, and finally, selector by element type.

Question 18

Describe Floats and how they work.

Answer 18

Float property in css allows us to make some kind of merging of two elements.

Element with float property will be displayed same way as if it had display property value “block”, it will shrink to its content size, except of cases when you directly set up width of element, and all next elements on page will flow around this element.

For example, if we have an image with fixed size and then text element after this image, and then we set up image property float value to “right”, then image will align to right side of parent container, and text element content will be shown in empty space on left side of image and below it.

Question 19

Describe z-index and how stacking context is formed.

Answer 19

z-index is CSS property, which determines the priority of element on imaginary z-axis. In other words, elements with higher z-index will be drawn above elements with lower z-index.

Stacking context is context, that determines, which elements will be rendered below or above other elements on page.

Each element with z-index property creates stacking context. Inside this context, all children elements height on imaginary z-axis is determined by their own z-index property.

So, let’s imagine that we have certain root element, and then inside this element we have two other elements, lets name then A and B. If we set up A z-index to 10, and B z-index to 5, then A element will be drawn above B element. And if A element has children element, lets name it C, with z-index of 1, then anyway C element will be drawn above B element.

Question 20

Describe BFC (Block Formatting Context) and how it works.

Answer 20

Block formatting context is a region where block elements positioning is handled and where floats interact with other elements.

Block formatting context is created for all float elements, also for elements with absolute or fixed position, for elements with display set to “inline-block”, “table-cell”, “flex” or “grid”, or for elements where CSS property overflow is different from “visible”.

When this can be important? For example, if we use floats. Let’s imagine that we have container without fixed width and height, inside what we have float element. This case, this element doesn’t create its own block formatting context, and this float will affect on elements outside of this container. Also, this exact element size will be 0 pixels, because float removed from default document flow.
But if we, for example, set display property of this container to flow-root, or set it overflow to hidden, or something else, what creates new block formatting context, then this container will act as separate block, its width and height will already big enough to fit float element inside them, and this float effect won’t spread out of this container.

Question 21

What are the various clearing techniques and which is appropriate for what context?

Answer 21

There are few different techniques what I know.

First, we can add an empty element with CSS property clear set to “both” right after float elements. This case all elements after float won’t be affected.

Second case, you can put these float elements and elements, what must flow around them inside another container element, and make this container create its own block formatting context, so other elements after this container won’t be affected.

Question 22

How would you approach fixing browser-specific styling issues?

Answer 22

Emm… Okay, lets imagine that we have few browsers and in some of them our styles are not working well.

First, I would try to detect source of problem and understand what styles and why are not applied to elements. Then, in case if that is possible, I would try to replace styles, what have problems in certain browsers with styles giving same outlook but working everywhere.

After that, if problem is not fixed, I would try to use polyfills to make it work.

Finally, if none of these things works, I would write script what would detect browser version and apply additional styles for browsers, where common approach is not working.

Question 23

How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?

Answer 23

Well, on my last job place we were using polyfills to make page look same even in old browsers.

But if to talk in common, then I know few techniques that we could use in these cases.

We could use progressive enhancement or graceful degradation strategy, to make our page work even in case if user browser does not support all features.

Then, as I said before, we can use polyfills to support newer functionality in older browsers.

Question 24

Have you used or implemented media queries or mobile specific layouts/CSS?

Answer 24

Yes, I had. I used to work with mobile specific layouts both on my current job place and also while I was developing my CV website. In both these cases I used global Vue storages to store information about viewport size, and then depending on this information, I was adding or removing certain styles to Vue components elements. So, for example in my CV project, if viewport width is less that seven hundred eighty pixels, then I add mobile class for root element, and then depending on CSS selectors, final style of certain elements is changing.

Question 25

What are some of the "gotchas" for writing efficient CSS?

Answer 25

First, this is good practice to use simpler CSS selectors to improve performance. Second, this is necessary to avoid use of “!important” everywhere where this is possible, because it makes style management harder. Third, your class names should be understandable and tell developer what they are doing. Finally, this is good practice to maximally reduce use of inline styles inside project, because this also makes project harder to support.

Question 26

What are the advantages/disadvantages of using CSS preprocessors? Describe what you like and dislike about the CSS preprocessors you have used.

Answer 26

Good sides of preprocessors like “SASS” or ‘LESS” are variables, like in programming languages, higher agility, mixins, styles nesting and more complex mathematical operations. Bad sides are need to learn new syntax when working with them and necessity to use additional build instruments.

Question 27

Explain how a browser determines what elements match a CSS selector.

Answer 27

Okay… First, browser is parsing CSS file, to understand the structure of styles and rules, following which these styles are applied to elements on page. Then, browser goes through DOM tree to understand, which elements match CSS selectors.

Question 28

Describe pseudo-elements and discuss what they are used for.

Answer 28

Pseudo-elements are special CSS feature, that allows to modify part of element content through CSS rules, without need in additional HTML. For example, using pseudo-elements we can separately edit first line or first letter of text inside element, or apply styles for text, selected by user, or add some content after or before element.

Question 29

Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.

Answer 29

Box model is a main principle of elements layout in CSS. In this model, each element is a rectangle, or box, what consist of few components, like content, padding, margin, and border. We can control used box model using box-sizing property. By default, it is content-box, what mean that element paddings and borders will be added outside of element block, and the element block in that case is element content block. In case of border-box, all paddings and borders will be added inside element block, so in this case if we add borders or padding for element with fixed sizes, then they will take their space by reducing content box size.

Question 30

What does * { box-sizing: border-box; } do? What are its advantages?

Answer 30

This CSS selector makes browser change box model to border-box for all elements. This tells browser that for all these elements, their sizes should include not only their content, but also paddings and borders. Advantages of this are next: This makes manipulations with elements a bit easier, because when you change element width or height, then you can be sure that this element will be that size, and no additional space because of padding or borders will be used. Also, when you change paddings or borders, you can be sure that layout won’t break. Element sizes are always same, because adding or removing element borders does not affect on external element sizes.

Question 31

What is the CSS display property and can you give a few examples of its use?

Answer 31

Display property defines how element is displayed on page. Default value is block. Block element takes whole possible width on its row. If we set its value to none, then element won’t be shown on page at all. And with value set to flex, then element become a flexbox.

Question 32

What's the difference between a relative, fixed, absolute and statically positioned element?

Answer 32

Static positioning means that element will be positioned following regular elements flow, and won’t be affected by positioning props like top, left, right or bottom. In case of relative positioning element follows default positioning rules as static element, but its position can be adjusted using top, left, right or bottom props. Element with absolute positioning is removed from regular document flow and will be positioned depending on position of nearest parent non-static element. This can be element with relative, absolute or fixed positioning. Absolutely positioned element can be adjusted using top, left, right or bottom props. Elements with fixed positioning work same as absolutely positioned elements, but their imaginary parent, depending on which they are positioned, is viewport.

Question 33

Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?

Answer 33

In case of responsive design we are developing website that way, when it will automatically adapt for different screen sizes and devices. This case we have one version of website, what is aimed to work well on all devices. Mobile-first design mean, that our main aim is to make website look well on mobile devices. Mobile devices have less resources that computers, so we adjust its design to make website quick and minimalistic. Then, after version for mobile devices is finished, we use different mechanisms to adjust it for other devices too.

Question 34

Is there any reason you'd want to use translate() instead of absolute positioning, or vice-versa? And why?

Answer 34

I would use translate if I needed to create a CSS animation, because this way element remains in document flow, and keeps its space inside document. For example, if I had list of items, and I needed to move element a bit right when cursor hovered on it, then I would use translate property, because that is easier than move element using absolute positioning, because I need to keep its place in document flow. From the other side, if to talk about case when I would prefer to use absolute positioning, then, this is probably the case, when I want to add some elements on page, which will be accessible by screenreaders, but not visible to user. So, I could just make element absolutely positioned, and add to id so big offset, that this element would move outside of screen borders. This case element would anyway remain in dom tree and accessible by screenreaders, but not be visible for regular user.

Question 35

Can you explain the difference between px, em and rem as they relate to font sizing?

Answer 35

Size in px will be strictly that big in pixels, as its value. Element with size in em will depend on font size of its parent element. So, 1em mean same size, as its parent font-size, and 2 em mean twice as much as its parent font size. Element with size in rem works like em, but will depend on root element font size.

Question 36

Can you give an example of a pseudo class? Can you provide an example use case for a pseudo class?

Answer 36

The simplest example of pseudo class is hover. Selector with hover pseudo class will match when cursor is over this element. For example, we can create our custom link style, so we can use hover selector to make it change its background color to another when it is hovered.

Question 37

What is the difference between a block level element and an inline element. Can you provide examples of each type of element?

Answer 37

Block element takes all available horizontal space inside his parental container and located on separate row. You can edit element width and height, and also add any padding and margin you want. Simplest examples of block element is div or p. Inline element doesn’t create a line break, and take only space, necessary for showing their content. You can’t edit their width and height because it depends on their content, and you also can’t edit vertical margin and padding. Examples of inline elements are span and strong.

Question 38

What is the difference between CSS Grid and Flexbox? When would you use one over the other?

Answer 38

CSS grid is a complex bidimensional layout system, which allow to create grids with multiple rows and columns. Its purpose is to control elements positioning inside this grid, including cells merging and control over sizes and proportions of rows and columns. Flexbox is monodirectional layout system, where you can control elements positioning inside container in horizontal or vertical direction. The aim of flexbox is to control how elements and free space between them are distributed inside the container. Flexbox is better to use when you just need to align elements inside one row or column.

Question 39

Explain event delegation.

Answer 39

Event delegation is a programming pattern, when we handle events on parent element instead of handling it on its children’s elements. There is sense to use it if we have many children elements which should do almost same action when you interact with them. For example, we have page what consist of two sections. In the upper section there is a non-editable text area, and in bottom section there is a list of book names, and when we click on this list item, we need to open this book description in section above. Instead of adding separate click event handler for each of these items, we could add data attribute for each of these elements, which will contain this book description, and then add click event handler for list element. Then, when you click on any list item, this handler update text area content to clicked element data attribute value.

Question 40

Explain how this works in JavaScript. Can you give an example of one of the ways that working with this has changed in ES6?

Answer 40

“this” keyword is used to refer to context, where code is executed. The context is usually an object, where is located called function, where we use “this”. In ES6 was added arrow function. This is function which does not create a new context, and uses context of environment, where they were created.

Question 41

Explain how prototypal inheritance works.

Answer 41

An object in JavaScript can have internal reference for another object, which is called a prototype. It is some analogue for base class. If method not found in object itself, then JavaScript will search for them inside prototype, or prototypes of lower level. When you create a class, which inherits some another class, then you will have all base class methods accessible from prototype.

Question 42

What's the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?

Answer 42

Null mean, that variable has no value. Undefined mean same, but the difference is, that null is set by purpose, while undefined will be received when variable or property was not initialized. Undefined is some kind of soft error value, and you should not use it instead of null. Undeclared variable is a variable that was not declared using const, let or var at all. About how to check this. For null we can just use triple equality operator. For undefined variable we can use typeof operator or triple equality operator. For undeclared variable we should use typeof operator.

Question 43

What is a closure, and how/why would you use one?

Answer 43

Closure is a function in JavaScript, which remembers its lexical environment variables when it was created, and then can access them, even after program execution thread has exited this lexical environment scope. I would use a closure in case if I needed to create a callback, for example when I load something from server using special function and want to do some actions when server will return result. I would also use it in case if I needed to create few separate counters. By counter I mean a function, which has a counter variable in its outer scope, and during execution it increments this counter variable and then returns its current value.

Question 44

What language constructions do you use for iterating over object properties and array items?

Answer 44

Usually when I need to iterate over object properties, I use for…in loop, to iterate over its keys and then inside each cycle get object key value. But this is also possible to use Object.keys function to get array of object keys and then iterate it using forEach, map, or reduce function. For iterating over array items usually I use for…of loop, map or reduce.

Question 45

What's a typical use case for anonymous functions?

Answer 45

Usually use cases are next: First, callbacks, when we need to do some actions after our async function has finished. Second, immediately invoked function expressions. Last event handlers.

Question 46

Explain the difference between: function Person(){}, var person = Person(), and var person = new Person()?

Answer 46

In first case we create a function named Person, in second case we create a variable and set its value to result of Person function execution, and in third case we create a variable and set its value to new instance of class Person.

Question 47

Explain the differences on the usage of foo between function foo() {} and var foo = function() {}

Answer 47

In first case we create function with name foo. We can access this function from any other place of our code in same scope, even before its declaration. In second case we create a variable foo with its value set to anonymous function. In our code we can access this variable only after its declaration place.

Question 48

Can you explain what Function.call and Function.apply do? What's the notable difference between the two?

Answer 48

Both these functions do almost same thing. They call function passed as first argument. But call receives any number of arguments after function itself, and all these arguments will be used as function parameters, while apply receives array of arguments as second parameter.

Question 49

Explain Function.prototype.bind.

Answer 49

Using bind we can force our function to use another this scope by passing it as first argument, and use certain input arguments, passed as all next arguments.

Question 50

Можете ли вы описать основное различие между циклом forEach и циклом .map()? И в каких случаях каждый из них используется?

Answer 50

Map iterates over all elements in array and construct new array of values, returned from callback function for all items. forEach just iterates over all elements in the array, and doesn’t create new array.

Question 51

Explain "hoisting".

Answer 51

Hoisting in JavaScript is a mechanism, that moves declarations of all functions and all variables declared using var into top of their scope before code execution. This feature makes it possible to use function even before their declaration in code, which sometimes can make code writing easier.

Question 52

Describe event bubbling.

Answer 52

When any event is fired on JS element, this event propagation goes up in elements hierarchy. I mean, this event is also fired on its parent, then on its grandparent etcetera. Through this mechanism this is possible to handle events on multiple children elements using one handler assigned to parent element, with no need to add new handlers for children elements when you add them. But, from the other side, event bubbling can cause unexpected effects, for example, in case when we click on element, which is placed out of its parent box using fixed position, we still will get click event fired for parent element, even if children element is outside of its box. So this is usually a good practice to stop event propagation in cases when this is not necessary.

Question 53

Describe event capturing.

Answer 53

Event capturing is event propagation mechanism, which is realized in some browsers, which is opposite to event bubbling. During the event capturing our event is first fired on root element, then on its children element, which is one of target element parents, and then it goes in same cycle until reaches target element.

Question 54

What is the difference between == and ===?

Answer 54

Double equality operator is a non-strict comparison. When comparing two values, it first tries to turn them into values of same type, and only after this comparison is executed. So, if we have string with number 1, and number with value 1, double equality operator will show them as equal. Triple equality operator is a strict comparison. It returns true only if type and value of two operands are same.

Question 55

What is strict mode? What are some of the advantages/disadvantages of using it?

Answer 55

Strict mode appeared as a result of need of changes in JavaScript. By default, language has been developing with backward compatibility. So, new functionality was appearing, but old functionality was not ever removed. But this changed in ES5, where some already existing things were changed or deleted. In order to keep compatibility, it does not use them by default. In order to use modern variant of language, this is necessary to manually add “use strict” into script file. For example, strict mode forbids setting values for undeclared variables, or use of some outdated or unsafe functions, for example “with”. Also, I heard that in some cases using strict mode can improve performance, but I can’t give any examples. About disadvantages… Strict mode is not supported in old browsers, so it can create problems and unexpected behavior. Also using strict mode can change behavior of code of other libraries, or your own code, which was created following requirements of non-strict mode.

Question 56

What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?

Answer 56

At first, this makes it possible to make code more reliable. For example, you can use newest language constructions and functions, but they will be turned in safe and fully supported code, compatible with older versions of JavaScript. Also, of course, compilers can optimize your code, improving its performance, and minify it, to reduce code file size, and analyze it for possible mistakes made by programmer. Finally, some languages, which are compiled to JavaScript, can offer absolutely unique features, for example like types and interfaces in TypeScript. Disadvantages. First of all, of course you need additional step in your project assembly, this is compiler. This additional step not only takes time to do its job. Also compiler is a program, written by other people, and can contain bugs and errors.

Question 57

What tools and techniques do you use for debugging JavaScript code?

Answer 57

For me in most cases enough just few things. First of all, this is IDE and project build tools, like vite. They can check code on early stage and tell you if you made a mistake somewhere. Second, is Google Chrome developer tools. This is console, overview of DOM tree and network overview. I also had experience of using special plugins, for simpler interaction with frameworks. For example, I used plugin for Chrome which allows to see what Vue applications exist on current page, and see all their internals, like current state, computed values, methods, and more.

Question 58

Explain the difference between synchronous and asynchronous functions.

Answer 58

Synchronous functions are executed in series and block code execution until they finish their work, and result is returned directly after function has finished working. And if we have too many synchronous functions in call stack, this can lead to interface freezing. Asynchronous functions are functions what were made to handle things, what we usually handle with callbacks, in more convenient way. Asynchronous function is a function, which awaits for certain event, and only after this event happened it calls its handler functions. This asynchronous functions are stored in a queue, and after call stack is empty, browser checks if we have enough time before next frame should be drawn. By default, new frame should be rendered every 16 milliseconds. So, if we have enough time, it executes asynchronous function and all functions from microtasks queue, like then or catch. And then it repeats the process until we have no free time.

Question 59

What is event loop? What is the difference between call stack and task queue?

Answer 59

Event loop is a mechanism which makes it possible to use asynchronous code in JavaScript. There are two main parts of event loop, this is call stack and task queue. All synchronous code goes to call stack, and executed synchronously. All asynchronous code goes to task queue, and executed when there are no tasks in call stack. Browser checks if we have enough time before next frame should be drawn. By default, new frame should be rendered every 16 milliseconds. So, if we have enough time, it executes asynchronous function and all functions from microtasks queue, like then or catch. And then it repeats the process until we have no free time.

Question 60

Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?

Answer 60

Use cases… First, when we create a function, what should be instantly invoked right after its creation. Using arrow functions is more compact. Their compactness is also useful when we iterate over the array using map and need to do some simple actions with its elements, because this case we can write it inline. Also arrow functions are useful for making callbacks, because they don’t create their own context. Finally, we can’t use arguments keyword in arrow function to see all the arguments passed into function on call.

Question 61

What advantage is there for using the arrow syntax for a method in a constructor?

Answer 61

Advantage is that this case function doesn’t create its own context, and uses its environment context, so it can access this context variables later.

Question 62

What is the definition of a higher-order function?

Answer 62

Higher order function is a function which returns another function as result or takes any other function as its parameter.

Question 63

Can you give an example of a curry function and why this syntax offers an advantage?

Answer 63

Curry function is a function of higher order, which takes arguments one by one and on each step except of last, returns another function. Why this syntax offers an advantage? Well, probably is some cases we could need to have intermediate function with already partially applied arguments, and then we can use it in code later, without need to put again and again same parameters.

Question 64

What are the benefits of using spread syntax and how is it different from rest syntax?

Answer 64

Using spread operator we can easily surface clone array, or make a new array from few separate arrays. We also can use this operator to provide array elements as parameters for function with unlimited parameters number. Using rest operator we can accumulate arguments into array in function or destructive variable initialization. The difference is in their functionality. Spread operator is used to make arguments list from array items, while rest is used to accumulate arguments into array.

Question 65

How can you share code between files?

Answer 65

First of all, I can use JavaScript modules. This case I can export and import anything I need in convenient form. Second way is to use global variables. This case we create a variable with global scope and then use it to share data between different parts of our application. But this is not good practice, because this is hard to control and that makes code complicated.

Question 66

Why you might want to create static class members?

Answer 66

In few cases. First case, when I need to have some data common for all class members. This case I can use static variables, to access this data from class instances. That is also useful to create static class members in case when we need to create a singletone in our application. This can be class working with database, or with api, or with something else, where we must have only instance of class, interacting with all these things. Third, we can use static functions to create a helper class, providing some utilitary functionality. These functions don’t need any class instance variables to work. For example, this can be mathematical functions or API functions.

Question 67

What is a promise? Where and how would you use promise? Why do we need promise?

Answer 67

Promise is a special object which represents asynchronous function execution result. Promise can have three states, first is “pending”, while our asynchronous function not yet finished its work and not returned any result, “rejected” in case when an error was thrown inside function, and “fulfilled”, when our function has successfully finished its work. We use promises everywhere where we work with asynchronous functions and expect to get any result from it or handle possible errors. This can be API calls, timeouts, or other asynchronous things.

Question 68

Discuss how you might use Object Oriented Programming principles when coding with JavaScript.

Answer 68

Okay... So, JavaScript is functional language, basically, but it also provides some things that can help us to use it as object-oriented language. In some places it works better, is some worse. In order to work with it like with object-oriented language we can do few things. First, of course, is to use classes. JS classes are not real classes, this is just more convenient way to construct a JavaScript object with predefined properties and methods, but anyway you can do some object-oriented things with them. For example, classes in JavaScript support inheritance. You can new class based on another class, and then this new class will inherit all properties and methods from base class. Second thing is encapsulation. You don’t have private properties in JS same way as you can have them in C#, for example, but anyway, you can use closures and modules to create variables with very limited scope, and make them accessible only from certain functions. Finally, can use polymorphism in JS because you can override methods and variables in subclasses.

Question 69

Что такое область видимости?

Answer 69

Область видимости – это набор правил, по которому будет определяться, можно ли взаимодействовать с той или иной переменной или нет.

Question 70

Что такое полиморфизм?

Answer 70

Полиморфизм – способность объекта реализовывать принципиально одинаковый функционал разными способами. Примером этого может быть интерфейс, определяющий функцию, и различная реализация этой функции в классах, реализующих данный интерфейс. Polymorphism is the ability of an object to implement fundamentally the same functionality in different ways. An example of this would be an interface that defines a function, and a different implementation of that function in classes that implement that interface.

Question 71

Что такое KISS?

Answer 71

KISS is principle, that says, that code must be kept as simple and understandable, as possible.

Question 72

Что такое SOLID?

Answer 72

SOLID is set of rules that is recommended to follow to make code development easier. There are five rules. First rule is „Single responsibility“. This mean, that one class should be focused on making actions in only one aspect of application. For example, if we have a shop and for this shop we have class Product, that by idea describes one type of commodities we are selling, then this class Product can have properties that describe this product, but for example must not have any method that will directly implement saving information about this product into the database, because that is absolutely another functionality. To implement this functionality, we should create another class, what will be focused on interaction between any kind of product we have and database. Second is “Open-Closed principle”. This mean that any class we have should be open for extension, but closed for modification. If to talk simply, we must provide possibilities to add new functionality into class without touching existing code. This is possible to do using abstract classes and interfaces. For example, we have a function what takes array of different geometrical figures and must draw it. Each figure has its top left point coordinates, and figure-specific information, for example, for square that can be length of its side, and for triangle length of all its three sides, and for other figures something else. There are two ways of doing this. First way, we could create separate classes for each of shapes, each with its own specific information and methods. And then, in function, we check what class we interacting with and depending on this, we draw it, calling class-specific methods or functions. Other way, where we follow open-closed principle. We create certain interface for abstract shape, and in this interface we define only top left point and method Draw(). After that, we create all other shapes classes using that interface. During program execution, we handle each shape as abstract instance of this interface implementing object, and just call function Draw(). This case we are free to add new shapes classes without need to modify existing code of function. Third is “Liskov Substitution principle”. It says, that any child class of base class should extend functionality, but never narrow it. For example, we have a class that describes Rectangle. One moment, we want to add class, that is describing Square. The problem here is, that while Rectangle has width and height and these values can be different, Square width and height are always same. And if we inherit class Square from Rectangle and then override it that way, that when we set width, it also modifies height, and vice versa, then we violated this principle. This is bad, because this case any function or method that interacts with Rectangle, and during program execution can get instance of Square class as instance of Rectangle class, it will suffer from problems related to this width and height issues. Fourth is interface separation principle. This principle says us, that this is better to have a big number of small and specific interfaces, that small number of big interfaces. This is important because at first, helps us to develop program in cases, when there could be classes with similar functionality, but what are different in some moments. For example, imagine we have a class describing a calculator, and we have one big interface for this calculator. This calculator has huge functionality and allows us to use many complex mathematical functions. One moment, we decide, that we need to create another calculator class, but this case we need just simplest functionality, like possibility to add, subtract, multiply and divide numbers. And there is the problem, because this case if we use same interface as for previous complex calculator class, then we have to implement many methods that will never be used. This is not good. So, instead of making one big interface, we make a lot of small interfaces. For example, one interface describes method that sums up two numbers, second describes multiplying and so on. This case we can just implement few small interfaces for simple calculator class. Last principle is “Dependency inversion principle” This principle says that classes should depend on interfaces or abstract classes instead of exact classes or functions.

Question 73

Что такое миксин

Answer 73

Mixin is a piece of functionality or data that we directly inject into something. For example, if we talk about CSS, then in CSS preprocessor SCSS mixin is feature, that allows us to define set of CSS styles somewhere once, and then in other classes definition just import this mixin instead of manually writing all same rules again. If we talk about Vue, then mixin is like part of Vue component, that we add to our component. This injection can contain new data, new computed values, new methods, new action to do on component lifecycle hooks.

Question 74

What design patterns do you know?

Answer 74

Builder. This pattern is useful when we want to have a convenient and understandable way to create a class instance with certain set of characteristics. There are three ways we can go. First way is to follow telescopic constructor pattern. This case we have a very complicated constructor with many optional parameters on input, or multiple overloads of this constructor with different parameters on input. The problem this case is that we have to provide big number of arguments, and this makes code writing and reading difficult. Second way is so named JavaBeans pattern. This case we use constructor with no parameters to create a class instance, and then initialize all required fields of object by calling corresponding setters right after class instance creation. This pattern is solving readability issues, but is not so reliable, because you always can forget to initialize some of object fields. Also, this approach makes it not possible to make objects of this class immutable. Finally, builder pattern. This way we create else another class, which we use in first class constructor. In builder class, we have all these fields, both optional and required, and getters and setters for each of them. We set up all builder class fields to match needed configuration, and then provide it as only argument of first class constructor. This case we have all benefits, what have telescopic constructor and JavaBeans patterns. I mean, from one side, this is easy to read and edit, and we can initialize fields in any order, as in JavaBeans pattern, but we don’t lose possibility to make our final class instance immutable, or require some input parameters to be provided, like we have in telescopic constructor pattern. Next pattern in Singletone. The idea of the pattern is to have only one instance of certain class in our application. This can be static class which we use to call API, or database, or just class storing our application settings. Another pattern is event delegation. … Finally, last pattern I can remember is decorator. With decorator pattern, we wrap an object or function with another object or function in order to modify its behavior without changing class or class instance. The simplest example of this pattern are function debouncing or throttling in JavaScript. For example, we have a function, which logs certain text into console, but we don’t want it to be called too often. So, we create another function, which takes our function as input parameter, and calls it only if certain time period passed from previous function call. In case of throttling, it also calls our function in the end of debouncing period, if it was called during it.

Question 75

What is CI/CD?

Answer 75

CI/CD means continuous integration and continuous delivery. The idea is to have an automated pipeline which will analyze and test code after developers made changes, and then deploy it into environment, where application is accessible by developers, or, if that were fully tested and approved features, by final users. The aim of CI/CD is to improve reliability of code development and deployment process and automatize some things which other way would have to be made by developers manually. Usually typical CI/CD pipeline consist of next steps: First, detect changes in version control system, and build the project. Then, move final code into test environment, where is possible to run it, and turn on application and related things, like databases, API endpoints, and others. After that, go through the application and test it for bugs. If everything is okay, then deploy an application, else, stop the pipeline and notify developers about it.

Question 76

What for we use events in JavaScript?

Answer 76

Okay... I think, the main reason is that this is reliable and convenient way to do something when certain action was made. Right now, it works that way, that when you click on button, for example, browser creates an event object, and then if you assigned previously functions, which are handling this event, then after current code in call stack will be executed, browser will call your functions – handlers, with this event object as parameter. From event object we can take information about event and its environment, like event source, for example. And then inside this handler function we can do something with this information. But let's imagine for a moment, that we by some reason decided to get rid of this system, and just call certain function when certain event should be fired. So, when you click on the button, then it stops currently running program, and runs this handler function. Of course, this is not best way, because first of all, that would be not possible to assign more than one event handler for an event, and also would pause our synchronous code execution. And if to go even deeper, lets imagine that we decided to completely get rid of events. So, this case in order to execute certain actions when button is pressed, we would need to manually check this button state from our code, and this creates a lot of problems. For example, we would be always afraid of situation, when button click was not detected because during this time period, we were not checking this button state, but executing any other code. So that is the reason, why we use events. This makes it easier to handle things that happen to the user interface.

Question 77

MVC, MVP, MVVM

Answer 77

MVC – Model-View-Controller MVP – Model-View-Presenter MVVM – Model-View-View-Model In MVC we have three parts of our application. This is model, view and controller. The model is a business logic layer of application, or in other worlds, layer, responsible for manipulations with data. View is an interface layer, responsible for showing data to user. And controller is a layer between them, responsible for reliable communication between other two layers. So, for example, when user presses the button on View layer, it is sending request for Controller layer to return some data from Model. Controller Is checking if everything is okay with request and if yes, then returns requested data. The benefit from this organization of code is that our Model, View, and Controller are mostly separated from each other, and in MVC application modification of each of these layers can be made independently.

Question 78

What is DNS and what it needed for?

Answer 78

DNS or Domain Name System, is a system used in Internet to transform human-readable domain names, like youtube.com, into IP addresses, which are used by computers for identification and interaction.

Question 79

What is clean function?

Answer 79

Clean function is a function, which has two properties. First of all, it does not have any side effects. So, all changes, what it can do, it makes inside its internal scope. Second moment is that in case of clean function each time we provide same data on input, we get absolutely same output. Clean functions are easier to test and support, and also in case of clear function we can use caching decorator, to make it work faster in some cases.

Question 80

What is callback hell?

Answer 80

Callback hell is a situation, where we have nested callbacks. This code is hard to read, and this is hard to understand what is going on inside code and what and when will be executed. All this makes interaction with code a bit painful, so this is a good practice to avoid nested callbacks, through separating the code into few smaller functions, and using promises instead of nested callbacks.

Question 81

What is the difference between var, let and const?

Answer 81

The first difference is scope and accessibility. Var is affected by hoisting, and it is accessible everywhere inside its parent scope. By parent scope I mean global scope, or scope of the function, where variable is declared using keyword var. Also, var can be redeclared few times. Let and const, otherwise, are accessible only after their declaration, and can’t be redeclared. Also there is difference in case of const use. When we use const, first of all, we must give it value directly when it is initialized. So, if in case of var and let you can declare variable first, and assign value to it in code below, and before that moment variable value just will be undefined, in case of const this is necessary to have variable value assigned right in place of declaration. Also, const variable assigned value can’t be changed. So, if for example in case of let you can initialize it with value of 1 when you declare it, and later change its value to 2, in case of const you won’t be able to do this. Finally, the other big difference between var and const and let, is that const and let scope depend not only on function where they were declared, but also on any other construction. So, if you have a code, where you declare variable using let, and then you have if block, and inside of this if block you declare variable with same name, then both these variables will be two separate variables.

Question 82

What is scope?

Answer 82

Scope is a region of a program, where it exists and can be recognized, and outside of what it can’t be recognized and used. There are different types of scopes in JavaScript, which are global scope, functional scope and block scope

Question 83

What is shadowing?

Answer 83

Shadowing is a mechanism, which allows us to have multiple variables with same name inside same scope. The idea of shadowing is that variable on lower level of scope overrides variable on higher level of scope. By override, I mean, that when we are using this variable name, we will interact only with variable on lower level. As example of shadowing, let’s imagine next situation. We have a variable named “a” and declared using let on first line of our function. Then, a bit below, be have if condition block, and inside this block we have another variable named “a” declared. So, outer scope “a” variable will be shadowed by nested block scope “a” variable. And if we log variable a value inside this if block, we will get value of “a” variable, what was declared inside this block.

Question 84

What is First-class function?

Answer 84

First class function is a function what can be threated as any other variable. For example, function can be passed as argument to other functions, can be returned as function result, or can be assigned as variable value.

Question 85

What is lexical scope?

Answer 85

Lexical Scoping defines how variable names are resolved in nested functions: inner functions contain the scope of parent functions even if the parent function has returned.

Question 86

What “this” keyword refers to?

Answer 86

“This” keyword refers to the nearest parent object of function where this keyword was used. For example, if we use this keyword outside of any function, in global scope in browser, we will get window object. If we use this keyword inside a function, which is part of class object, then we will get this class instance using this keyword. If we call a function using new keyword, then this will refer to new object instance, created for this function.

Question 87

How to optimize Vue application?

Answer 87

First of all, if we would be talking about Vue 2, I would say, that we can optimize our application through turning all our stateless components into functional components, which would improve the performance. But in Vue 3, functional components does not work much faster than regular components, so this does not make a big sense. Then, we could check our application for cases, when we toggle component visibility using v-if directive. If these components what we toggle are quite heavy and take a lot of time to mount, and we by some reason need to toggle their visibility relatively often, then would be better to get rid of v-if directive and use v-show instead. Third, in order to reduce time it takes for user device to load code from server, we could chunkify our project final assets. For example, in tools like Vite we can achieve this through components lazy loading using import function, or through editing build config. Finally, in case if we have any place in our application where we perform big synchronous operation, we could check if we can split this operation into multiple asynchronous operations. This case we will have no interface freezes during runtime.

Question 88

What are slots in Vue?

Answer 88

Slots in vue are another way how we can provide certain information form parent component to children component. For example, we have parent component A, and its child component B. Through slot we can provide other Vue components or HTML elements, and these items will be used inside component B template in place where we have this slot what we are working with. Slots in Vue can have names, or be nameless. In case if we don’t provide any specific name for slot, its default slot, and it will receive all children of this B component, what we will have between opening and closing tag of B component. If we provide name, we can access this specific slot using template element and using v-slot directive on it. Also we can provide certain information from component B into component A when we use slot. We can set some properties inside component B, and then we will be able to access these properties inside template element what we use for this exact slot inside component A. Also, we can have some fallback content for slots. This fallback content we put between opening and closing tag of component slot, and it will be used in case if we did not provide any value for this slot when using component.

Question 89

What are the disadvantages of Vue 3 compared to Vue 2 and other frameworks?

Answer 89

Well, if to compare Vue 3 to Vue 2, then the most important disadvantage is that Vue 3 is not always backward compatible with Vue 2. Framework reactivity system was reworked, and also some other features from Vue 2 were removed. For example, it was possible to use certain Vue 2 component as event bus, and using this.$on and this.$emit handle events across the application. Now, in Vue 3, you have to use third party libraries for same functionality. Next problem is that Vue 3 is not still so wide used, and some third party libraries can support Vue 2, but not Vue 3. Well, so, talking about these third party tools and libraries, about this ecosystem, I can say that third disadvantage of Vue 3 is that its ecosystem is smaller than for example, ecosystem of React. Finally, last disadvantage what I can remember, is that all component parts are in one same file. I mean, in single Vue file you have component template, component internal scripts and logic, and also styles. This is good if component is small and compact, but it can become a problem is component is quite big and complicated.

Question 90

What are advantages of Vue comparing to other frameworks?

Answer 90

First of all, simplicity. This is easier for you to start with Vue than with other frameworks like React, for example. Everything is quite intuitive, you have less problems with its internal mechanisms. Also, as I know, Vue provides modularity. So, you can easily split your final build assets into smaller pieces, individual for each separate component you have in your project, and then during runtime load only these pieces of code which are currently needed, instead of huge JavaScript file where all application code is stored. Finally, I want to tell a couple of words about component file structure. In Vue, we have component template, script and styles all together in one file. From one side, this is good, because this is convenient for developer when you don’t need to switch between multiple files during development, but from other side, this quickly becomes a problem when your component is big, so you have to scroll a lot to get access to different parts of component.

Question 91

What is idea of Composition API in Vue?

Answer 91

Composition API allows you to split your component logic into separate pieces, named compositions. In each of these compositions you have your own separate logic and state, what this logic works with. These compositions can be reused in different components, reducing code duplication and increasing reusability. Composition API makes components code more structured, allowing for more effective ways to organize complex logic and state management in components. This is especially important in big projects, where we need to have good scalability and support. This approach, used in Composition API, solves two main problems which can have Options API. First is situation, when we have one component, which incapsulates few logically separated tasks. This case we could export this logic into reusable Composition API modules. Second problem is need in reusing same logic inside different component. Simplest example is sorting list of items. We can have one Composition API module which is aimed on solving this problem and use it in all places where we need to sort items

Question 92

What are Vue directives?

Answer 92

Vue directives are special attributes what start with “v”, and what you can use for adding special behavior for components. For example, using v-bind directive you can bind certain component attribute value to JavaScript expression. Using v-for you can repeat component multiple times. Using v-if, v-else and v-else-if you can control component rendering depending on certain condition. Using v-show you can control if element is visible or not. You can create your own directives

Question 93

What is DOM tree?

Answer 93

DOM tree is a tree what browser builds from HTML template. DOM tree consist of nodes, where each node is an element, representing certain HTML tag. Elements can have different functionality and different events what they can fire.

Question 94

What is BOM?

Answer 94

BOM is Browser Object Model. This is set of JavaScript objects, which provide you methods to interact with browser and browser environment. For example, it provides screen object, which provides you information about display, or navigator object, which provides you information about user browser, or location, using that you can get current url or go to another url.

Question 95

How events in Vue work?

Answer 95

In Vue, each basic HTML element and each Vue component can fire events, which you can listen to. In case of Vue components you can create new events what can be fired from this certain component. Later, in parent component you can listen to this child component custom events. Each event has its own key, by what it is listened and fired, and also this is possible to provide additional data together with event. In Vue 2 that was possible to programmatically add event listeners during runtime, so you could use certain Vue component instance as event bus for whole application. But in Vue 3, this feature was removed, so you still can fire events from the component, but this is not anymore possible to add event listeners during runtime, so if you were using event bus created like that in your application, then you would need to use third party libraries instead, when you migrate from Vue 2 to Vue 3.

Question 96

What is the difference between Vue slots and scoped slots?

Answer 96

The difference is next. Lets imagine a situation, that we have parent component A, and inside of it, child component B, for which slot we provide content inside component A template. In case of regular Vue slot, we can build its content based only on data that we have in parent component. But if we add some properties from component B data to slot element inside component B template, then we will can to access these properties from component A template, inside template element which we use to provide content for this certain slot.

Question 97

What are Vue filters?

Answer 97

Vue filters are functions, which you can apply to certain property or data value inside component template. To use filter, you should add vertical line after value you want to apply this filter to, and then write this filter function name

Question 98

How you can use v-for directive for rendering elements?

Answer 98

In v-for directive you can iterate over arrays using “in” keyword, and objects using “of” keyword. In case of in keyword you iterate over array elements, and can have access to this element value and index. In case of objects, you iterate over key-value pairs inside object, and have access to key, value, and index of current item inside object.

Question 99

How you can register Vue component inside another component?

Answer 99

You can register Vue component inside another component through importing it from file, and then adding this imported component into components object of your second component. This case, you will be able to use this first component inside second component template without need to globally register it.

Question 100

How you can define styles in Vue?

Answer 100

In Vue we can define our styles in two ways. First, we just create css file with styles and import it inside our component script. This case these styles will have global scope. Second, we can use