Важно Flashcards
What is a recent technical challenge you experienced and how did you solve it?
Well… in my thesis project, where I was making ESP32 webserver, I had problem with establishing connection between two microcontrollers – ESP32 and Arduino. It was necessary to connect them, because ESP32 was a webserver, hosting website, and Arduino was part of the robot, that had to be controlled using this website.
The problem was that, unfortunately, ESP32 and Arduino have different logical signal voltage. For ESP32 logical true is 3.3 volts, and for Arduino it is 5 volts. And if connecting Arduino to ESP32 is quite simple, because you just need to use a voltage divider to reduce the voltage from 5 to 3.3 volts, connecting ESP32 output to Arduino input was a big issue, because Arduino could not normally read data on input, because of too low voltage.
So, to solve this problem, I used special library, that makes that possible to use two any digital pins of microcontroller as serial input/output pins, and I used then instead of default pins. Finally, I got working two-way serial connection between microcontrollers.
Можете ли вы объяснить общие принципы относительно фронтенд-безопасности или недавние проблемы, которые вы решили?
Well, I am not an expert in frontend safety, but some things I remember.
At first, this is important to use only frequently used safe libraries, and sometimes check them for found vulnerabilities. Also, this is recommended to avoid including in production build something, that is not necessary. Reducing amount of code, we are reducing number of possible vulnerabilities.
Also, we should sanitize data, received from user, because without it certain characters or character groups can be interpreted as HTML or JavaScript code, and executed. So, before outputting this data, we sanitize it.
Well, about last time I touched frontend safety…, It was when I was working on my task planner website. The problem was in authorization. Of course that is not safe to just get user login and password and then use it any time you need to get or send any user-specific information to server. Also, this is certainly not safe to save user password on local storage or somewhere else. In order to make everything more safe, there was made next authorization scheme:
When user goes to login page, he is entering login and password. Then, we get hash from this password and send it to server. On server we don’t save passwords, of course, we save hashes instead. Well, these hashes are compared, and if everything is okay, then we generate access token with limited life time, so we don’t keep this password hash in browser, we keep token instead.
Which version control systems are you familiar with?
I am familiar with Git version control system. I used it everywhere, from university, to my current job. I heard, other version control systems exist, but I never used to work with any other system.
Can you describe the difference between progressive enhancement and graceful degradation?
Okay… Well, progressive enhancement and graceful degradation are two ways of web project development.
In first case, on pages we start from basic functionality, accessible for all users and all browsers. After that, we step by step add functionality, what will be accessible for users with newer browsers with more wide support of features.
Graceful degradation is the opposite of progressive enhancement. Here we start from best variant of application, what uses all newest features, and then add fallbacks for older browsers, what can’t support all required functionality.
Explain what ARIA and screenreaders are, and how to make a website accessible.
Screenreaders are special programs that people with limited possibilities can use to interact with web page content. These programs can read page content, like texts, headers, links, lists, etcetera, and then tell about them in audial form.
ARIA is set of html attributes, that can be used to improve page content understanding for people with limited possibilities. We can provide alternative labels an description for certain page elements. This case screenreaders will read them too, and can give more information for user.
What does CORS stand for and what issue does it address?
Okay… Usually web-browsers are allowing to use only resources from one domain. So, you can’t inside your code request resources from any other domain, than your website domain. CORS is cross-origin resource sharing, and this is mechanism that provides possibility to set up certain list of domains, with that you also will be able to interact. So, with CORS, browser can request resources from other domains too, if server explicitly allowed this.
What does a doctype do?
Doctupe is used to tell browser, what kind of document it exactly works with. Different HTML versions, for example HTML5 and HTML4, should be interpreted differently. If browser accidentally will use HTML4 interpretation mechanisms on HTML5 document, then some functions will work not as expected, or won’t work at all.
How do you serve a page with content in multiple languages?
In my last place of work there was system when we were saving all translations into JavaScript files, and then taking it from there using special function. Depending on the user selected language, certain language translations were shown. All these translations were loading on application load in one block. Later, instead of this slow and big system, I made another mechanism of page translations loading. In my solution, we were loading page template, and then for each place where we needed text, we were getting it by key through sending request to server.
What kind of things must you be wary of when designing or developing for multilingual sites?
First of all, language selection must be easy and simple for user. This is most important.
We also should ensure that our application can correctly show all symbols of all languages we are using.
Then, there also can be problem with Arabic languages, written from right to left, that they don’t look good with same design. Same problem is also in cases when translation takes more place than original text because this case will appear text overflow.
Next, we should ensure that any of words that we are not translating, for example logotypes or something like that, is not some kind of a swear or indecent word in other language.
Well, that are all main things, that I can remember.
What is progressive rendering?
Progressive rendering is web application optimization method, when page content is shown to user immediately when it is loaded, instead of waiting for all possible elements and resources to be loaded. This case user can interact with already loaded part of page content, while other page parts are still loading. This helps to improve user experience.
Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
Srcset is attribute that allows us to show different pictures inside image element depending on user device characteristics and viewport size. This attribute value is provided as list of images and their sizes.
When browser is deciding what image should be shown, at first it is checking user device characteristics, like screen resolution.
Then browser compares each image in list with available viewport size.
Finally, browser selects best suitable image from this list and show it on screen.
What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
Both CSS resetting and normalizing are mechanisms used to make styles environment more predictable for developer.
CSS resetting is overriding of all default styles, used by browser to different elements. This case we avoid cases when certain elements can behave a bit differently in different browsers, and can start from scratch, when adding our styles.
CSS normalizing is partial overriding of default styles, for exact elements, to make them more predictable, without totally removing all the impact from default browser styles. This case we can force using of critical styles like padding and margin for certain elements but avoid need to write styles for all elements.
Which way I would choose depends on exact situation. If that would be needed to create for project its own unique design, and be sure that nothing will interfere it, then I would choose CSS resetting.
Otherwise, if that would be necessary to just make elements look a bit more unified and make their behavior more predictable in critical cases, then I would choose normalizing CSS.
What are the different ways to visually hide content (and make it available only for screen readers)?
I know two ways.
First, if we want to create an element, what will be accessible only for screen readers, then we can just change its position to absolute and then move it out of screen borders. Then this element will remain in its container children list, so we will keep main structure, but user won’t see it.
Second way, we can change element visibility property to “hidden”.
Have you ever used a grid system, and if so, what do you prefer?
On my last job place we used Vue framework Vuetify library grid system on couple of pages. That was the only case I interacted with grids.
Can you give an example of an @media property other than screen?
Yes, I know two other media properties.
First is “print”, and styles inside this block will be used only in case if user is printing page.
Second is “speech”. These styles will be used only when text is read using a screen reader or voiced using speech synthesizer.
How would you implement a web design comp that uses non-standard fonts?
First, I would download these fonts and save on main server, or just add corresponding links into page head. Then, I would add CSS selector, which would use these fonts, and finally, check if all texts with these fonts look okay.
What’s the difference between inline and inline-block?
Inline element is shown inside regular text flow. It takes only width and height, required for its content, and doesn’t allow padding and margin in vertical direction.
Inline block element is almost same as inline element, but it also has block element properties. So, it can have also vertical margin and padding, and can have custom width and height regardless of its content.
What’s the difference between the “nth-of-type()” and “nth-child()” selectors?
nth-child style will be used for each nth element inside parent container. So, if we have div:nth-child and two in brackets, then this selector will select second element where div is parent, regardless of its type.
Div:nth-of-type and two in brackets will select each second div element inside any parent.
What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
I don’t have experience of using CSS frameworks, unfortunately, so I can’t tell anything about it…
Have you used CSS Grid?
Maybe a couple of times. Mostly I was using flexboxes, and that was enough.
The only time I remember I used CSS grid was on my current job place, where we had lab creation form, and all items there were positioned using vuetify grid.
How is clearfix css property useful?
Clearfix is not a CSS property, really. This is just trick what can be used to make elements markup look good.
For example, we have float elements inside parent container. Float elements are excluded from regular document flow, and their parent container doesn’t take them into account when calculating its content size. So, if we don’t have anything after these float elements, then they can get out of parent container. In order to avoid it, we can add additional element inside their parent container right after these elements, and set up its property clear value to both, so parent container will not be less than needed to make float elements be above this clearfix element.
What’s the difference between host objects and native objects?
Host object are object, provided by execution environment, and depend on it. For example, that are window or document, accessible only in web browser.
Native objects are object, provided by language itself and accessible from anywhere. That are Object, Array, Function, and others.
What’s the difference between feature detection, feature inference, and using the UA string?
Feature detection is a method when we test certain features existence before we use them.
If testing results shown that certain features exist, then we can use them.
Feature interference is a method when we expect certain features to exist based on existence of other related features and methods. This method is less reliable than feature detection, because existence of certain features is not guaranteed.
Using user agent string is least reliable method, here we expect certain features exist or not exist based on information about browser name and version, user device, and operational system. This is not reliable method, because this string can be hidden or redefined by user.
But, from the other side, sometimes using UA string is better than feature detection. This is useful in cases when we know that certain browsers or browser versions have bugs or different realization of some features. This case, if we just check existence of certain method, for example, and then go and use it, then we can have unexpected bugs, but we can avoid this by checking browser version and using another method in browsers, where first method is not working correctly right now.
What’s the difference between an “attribute” and a “property”?
Attribute is a text value which defines certain element characteristics or state inside HTML code.
Property is DOM element object data, which represent its state or characteristics during runtime.
The difference between them is that attributes are static element state representation inside of HTML element code, which is used once to define DOM elements properties values, while properties are dynamic element state during runtime.
What are the pros and cons of extending built-in JavaScript objects?
Extending default objects makes code easier to read and write, also increases reusability.
Else this object extension functionality can be used to add polyfills to add new functionality to old JavaScript versions.
From other side, extension of built-in objects can lead to errors and bugs, because third-party libraries or other code parts, which were added previously, expect another functionality from methods.
Explain the same-origin policy with regards to JavaScript.
Same origin policy does not allow resources from one source access resources from another source. So it blocks XMLHttpRequests in script to access data from another source, also cookies and local storage data, set by script from one resource, not accessible for scripts from another resources.
Why is it called a Ternary operator, what does the word “Ternary” indicate?
Ternary means triple. This operator uses three operands to function.
Explain the difference between mutable and immutable objects. What is an example of an immutable object in JavaScript? What are the pros and cons of immutability? How can you achieve immutability in your own code?
Mutable objects can be changed, while immutable objects is not possible to change.
In JavaScript, immutable are numbers and strings.
About pros and cons. From one side, immutability makes states easier to manage, because you are always sure, that if you somewhere used any value, it won’t be accidentally changed somewhere else, and program is more predictable.
From another side, in case of immutability, if you want to somehow modify string, for example, then you create another new object, containing all changes, and this takes additional memory and time.
About how to achieve immutability. For simple things like number or string, we can just use const word when declaring variables with these values. But for more complex things like arrays and objects you need to use special libraries, which provide this immutability functional, or write your own code which will allow you to interact with arrays and objects like if they were immutable too.
What are the differences between ES6 class and ES5 function constructors?
First of all, of course, one important difference is declaration of classes and functions. In ES6 you use class keyword for creating a new class, in ES5 you create a function.
Second difference is inheritance. Both these mechanisms use prototypes for inheritance, but in class you can just use another class as base class using extends keyword, and for initialization use super keyword in class constructor, while in function constructor you should explicitly execute all actions with function prototype to make it work.
And finally, classes in JavaScript are not affected by hoisting, unlike functions.
What is the difference between while and do-while loops in JavaScript?
The difference is in how they work. In while loop we check condition first, and if it is true, then we execute code. In do-while loop we execute code first, then we check condition, and finally, if condition is true, we continue loop.
Что такое grid?
Grid is CSS feature, that provide us possibility to create flexible and customizable layouts.
The main principle of grid is that we have certain matrix with columns and rows, and for each of elements in this matrix we define how many rows and columns it takes. Then, in browser, depending on other rules all these elements inside grid can be differently shown depending on screen size, size of elements, and grid rules that we set up.
I will be honest, I don’t have practical experience of working with grid, so I can’t tell you more, unfortunately.
What is ORM?
ORM means Object Relational Mapping. The idea of ORM is to make it possible to connect database tables and objects in code with no need to write SQL requests manually.
Instead of it, your classes in your code are used to create a table in database, all fields of class and database columns are linked, and when you do changes and save them, then database is automatically changed too.
So, ORM makes it easier for regular developer to write code, related to databases, because you don’t need to manually write SQL code, so it saves time and reduces chances to write code with bugs. While not so experienced developer can write complicated and hard to read query, ORM usually generates optimized and reliable code, so it also improves safety in most cases.
From the other side, you need another dependency in your project, and more code means more possible vulnerabilities. Also, code, generated by ORM in some cases can be slower, than code, written by programmer.
