Обязательно Flashcards
When building a new web site or maintaining one, can you explain some techniques you have used to increase performance?
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.
What actions have you personally taken on recent projects to increase maintainability of your code?
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.
Can you describe your workflow when you create a web page?
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.
If you have 5 different stylesheets, how would you best integrate them into the site?
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.
How would you optimize a website’s assets/resources?
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.
Describe how you would create a simple slideshow page.
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.
Explain the importance of standards and standards bodies.
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.
What is Flash of Unstyled Content? How do you avoid FOUC?
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.
Explain some of the pros and cons for CSS animations versus JavaScript animations.
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.
How did you handle a disagreement with your boss or your collaborator?
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.
What skills are needed to be a good front-end developer?
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.
Explain the difference between cookies, session storage, and local storage?
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.
What are data- attributes good for?
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.
Describe the difference between <script>, <script async> and <script defer>.
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.
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?
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.
What are empty elements in HTML ?
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.
What is CSS selector specificity and how does it work?
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.
Describe Floats and how they work.
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.
Describe z-index and how stacking context is formed.
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.
Describe BFC (Block Formatting Context) and how it works.
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.
What are the various clearing techniques and which is appropriate for what context?
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.
How would you approach fixing browser-specific styling issues?
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.
How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
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.
Have you used or implemented media queries or mobile specific layouts/CSS?
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.
What are some of the “gotchas” for writing efficient CSS?
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.
What are the advantages/disadvantages of using CSS preprocessors? Describe what you like and dislike about the CSS preprocessors you have used.
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.
Explain how a browser determines what elements match a CSS selector.
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.
Describe pseudo-elements and discuss what they are used for.
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.
Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
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.
What does * { box-sizing: border-box; } do? What are its advantages?
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.
What is the CSS display property and can you give a few examples of its use?
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.
What’s the difference between a relative, fixed, absolute and statically positioned element?
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.
Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?
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.
Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why?
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.
Can you explain the difference between px, em and rem as they relate to font sizing?
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.
Can you give an example of a pseudo class? Can you provide an example use case for a pseudo class?
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.
What is the difference between a block level element and an inline element. Can you provide examples of each type of element?
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.
What is the difference between CSS Grid and Flexbox? When would you use one over the other?
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.
Explain event delegation.
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.
Explain how this works in JavaScript. Can you give an example of one of the ways that working with this has changed in ES6?
“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.
Explain how prototypal inheritance works.
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.
What’s the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?
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.
What is a closure, and how/why would you use one?
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.
What language constructions do you use for iterating over object properties and array items?
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.
What’s a typical use case for anonymous functions?
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.
Explain the difference between: function Person(){}, var person = Person(), and var person = new Person()?
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.
Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
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.
Can you explain what Function.call and Function.apply do? What’s the notable difference between the two?
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.
Explain Function.prototype.bind.
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.
Можете ли вы описать основное различие между циклом forEach и циклом .map()? И в каких случаях каждый из них используется?
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.
Explain “hoisting”.
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.
Describe event bubbling.
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.
Describe event capturing.
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.
What is the difference between == and ===?
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.
What is strict mode? What are some of the advantages/disadvantages of using it?
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.
What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
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.
