Temas y preguntas frecuentes Junior Frontend / SW Engineering Interview

​When an event triggers on a DOM element, it will attempt to handle the event if there is a listener attached, then the event is bubbled up to its parent and the same thing happens. This bubbling occurs up the element's ancestors all the way to the document. Event bubbling is the mechanism behind event delegation.

<script> → used to define any client-side script <script async> → If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing) If async is not present and defer is present: The script is executed when the page has finished parsing. <script defer> → The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed

Hoisting is a term used to explain the behavior of variable declarations in your code. Variables declared or initialized with the var keyword will have their declaration "moved" up to the top of their module/function-level scope, which we refer to as hoisting. However, only the declaration is hoisted, the assignment (if there is one), will stay where it is. Note that the declaration is not actually moved - the JavaScript engine parses the declarations during compilation and becomes aware of declarations and their scopes. It is just easier to understand this behavior by visualizing the declarations as being hoisted to the top of their scope.

​Ajax (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly use JSON instead of XML, due to the advantages of JSON being native to JavaScript. The XMLHttpRequest API is frequently used for the asynchronous communication or these days, the fetch API.

Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are: Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant. There is no need to unbind the handler from elements that are removed and to bind the event for new elements.

This is an extremely common JavaScript interview question. All JavaScript objects have a __proto__ property with the exception of objects created with Object.create(null), that is a reference to another object, which is called the object's "prototype". When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object's __proto__, and the __proto__'s __proto__ and so on, until it finds the property defined on one of the __proto__s or until it reaches the end of the prototype chain. This behavior simulates classical inheritance, but it is really more of delegation than inheritance.

Var Variables declared using var keyword scoped to the current execution context. This means If they are inside a function we only can access them inside the function. and If they are not they are part of the global scope which we can access anywhere. Let This is the improved version of var declarations. Variables declaration using this way eliminates all the issues that we discussed earlier. let creates variables that are block-scoped. Also, they can not be redeclared and can be updated. Const Const variables are cannot be updated or redeclared. This way is used to declare constants. Same as the let declarations const declarations are block-scoped. Unlike var and let, If we are using const to declare a variable that must be initialized.

Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts. Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. Bootstrap and Bulma are based on Flexbox, and it is probably the recommended way to create layouts these days. Have tried Flexbox before but ran into some browser incompatibility issues (Safari) in using flex-grow, and I had to rewrite my code using inline-blocks and math to calculate the widths in percentages, it wasn't a nice experience. Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.

After identifying the issue and the offending browser, use a separate stylesheet that only loads when that specific browser is being used. This technique requires server-side rendering though. Use libraries like Bootstrap that already handles these styling issues for you. Use autoprefixer to automatically add vendor prefixes to your code. Use Reset CSS or Normalize.css. If you're using PostCSS (or a similar transpiling library), there may be plugins which allow you to opt in for using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into corresponding safe code that will work in the targets you've used.

video The video element allows you to easily stream video from a website. <video width="450px" height="350px" controls> <source src="video-url.mp4" type="video/mp4"> </video> In the HTML above, width and height set the dimensions for the video element. The controls attribute creates playback buttons such as “Play” and “Pause”. The source src tag provides the URL where the video is hosted and type specifies the video’s type, in this case, “video/mp4”. figure Figure elements can be used to display visual content, such as photos, illustrations, diagrams or code snippets. <figure class="gallery-item"> <img src="image-1.png"> </figure> <figure class="gallery-item"> <img src="image-2.png"> </figure> In the example code above, figure elements have the class “gallery-item”, and each contains an img element. section Section elements, like divs, can be used to organize webpage content into thematic groups. <section class="contact-form"> <h2>Contact Us</h2> <form> ... </form> </section> Above, a section element is used to organize h2 and form elements for a website’s “Contact Us” feature. nav The nav element is used for the part of a website that links to other pages on the site. The links can be organized a number of ways. Below, the links are displayed within paragraph elements. An unordered list could also be used. <nav> <p><a href="login.html">Log In</a></p> <p><a href="signup.html">Sign Up</a></p> <p><a href="contact.html">Contact Us</a></p> </nav> header The header element can be used to group together introductory elements on a website, such as a company logo, navigation items, and sometimes, a search form. <header> <img src="company-logo.png"> <nav> <p><a href="login.html">Log In</a></p> <p><a href="signup.html">Sign Up</a></p> <p><a href="contact.html">Contact Us</a></p> </nav> </header> Above, the header element encloses the img and nav. footer The footer element is typically found at the bottom or foot of a webpage. It can contain copyright information, links to social media and additional site navigation items. <footer> <p>&copy; Acme Granola Corporation 2016<p> <div class="social"> <a href="#"><img src="instagram-icon.png"></a> <a href="#"><img src="facebook-icon.png"></a> <a href="#"><img src="twitter-icon.png"></a> </div> </footer> Above, between <footer> and </footer>, copyright information is contained in the p element, and social media links are contained within the div with class “social”. From: Codecademy

A closure is the combination of a function and the lexical environment within which that function was declared. The word "lexical" refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Closures are functions that have access to the outer (enclosing) function's variables—scope chain even after the outer function has returned. Why would you use one? Data privacy / emulating private methods with closures. Commonly used in the module pattern. Partial applications or currying.

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Simply put, if two CSS selectors apply to the same element, the one with higher specificity is used. Calculating the specificity values of selectors is quite tricky. One way to calculate it is to use a weight system to rank different selectors to create an hierarchy. Style Type Value (higher = higher specificity) Inline Styles - 1000 ID selectors - 100 Classes, Attributes and Pseudo-classes - 10 Elements and Pseudo-elements - 1

Semantic HTML, or "semantically-correct HTML", is HTML where the tags used to structure content are selected and applied appropriately to the meaning of the content. for example, <b></b> (for bold), and <i></i> (for italic) should never be used, because they’re to do with formatting, not with the meaning or structure of the content. Instead, use the replacements <strong></strong> and <em></em> (meaning emphasis), which by default will turn text bold and italic (but don’t have to do so in all browsers), while adding meaning to the structure of the content. Question: Why you would like to use semantic tag? Answer: Search Engine Optimization, accessibility, repurposing, light code. Many visually impaired person rely on browser speech and semantic tag helps to interpret page content clearly. Search engine needs to understand page content to rank and semantic tag helps. ref: why important, Wiki: semantic HTML Question: What does “semantically correct” mean? Answer: read it in Stackoverflow

Table 1

npx is used to execute packages and it downloads any required dependency from internet without installing the dependency in the local machine, npm is a tool that installs, updates and removes packages from the local machine at local or global level.

​They can be used in IIFEs to encapsulate some code within a local scope so that variables declared in it do not leak to the global scope. As a callback that is used once and does not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body. Arguments to functional programming constructs or Lodash (similar to callbacks).

Resetting CSS: A CSS reset is a set of styles that you load before your other styles to remove built-in browser styles. Every browser has its own user agent stylesheet, which it employs to make unstyled websites more readable. Most browsers, for example, make links blue and visited links purple by default, add a border and padding to tables, apply various font sizes to H1, H2, H3, and practically everything, and apply a specific amount of padding to almost everything. Normalizing CSS: Normalizing CSS improves cross-browser consistency in HTML element default styling of the browser’s user agent. It’s an HTML5-friendly replacement for the standard CSS Reset. The purposes of normalizing are: Preserve default useful browsers instead of erasing them. Standardize styles for a wide variety of HTML elements. Correct bugs and incoherence of common browsers. Enhance usability through subtle improvements. Use comments and detailed documentation to explain the code. Now let’s move on to resolve the doubt of what is better and what should be used among these two techniques to smoothen the CSS. Normalizing maintains useful defaults over non-stylizing everything and it won’t clutter your dev tools window. Moreover, Resetting is meant to strip all default browser styling on elements. For e.g. margins, paddings, font sizes of all elements are reset to be the same. You will have to redeclare styling for common typographic elements, on the other hand, Normalizing preserves useful default styles rather than stripping all styles everything. Normalizing CSS is a newer technology than the old Resetting CSS, so it is modular and easy to use. Finally, as now we know the difference between Resetting and Normalizing, we understand that they are not much different as both fight to prevent the breaking of the UI of a webpage. It’s just a matter of approach both these techniques use based on which you can decide which among these you should be using along with your work. Resetting means setting every element to a selected default, removing any “normal” style applied by the browser. Normalizing tries to make styles look consistent across different browsers.

Undeclared variables are created when you assign a value to an identifier that is not previously created using var, let or const. Undeclared variables will be defined globally, outside of the current scope. In strict mode, a ReferenceError will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad just like how global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a try/catch block. A variable that is undefined is a variable that has been declared, but not assigned a value. It is of type undefined. If a function does not return any value as the result of executing it is assigned to a variable, the variable also has the value of undefined. To check for it, compare using the strict equality (===) operator or typeof which will give the 'undefined' string. Note that you should not be using the abstract equality operator to check, as it will also return true if the value is null.

ENGLISH: doctype is an instruction to the browser to inform about the version of html document and how browser should render it. It ensures how element should be displayed on the page by most of the browser. And it also makes browser's life easier. otherwise, browser will guess and will go to quirks mode. Moreover, doctype is required to validate markup. SPANISH: doctype es una instrucción para el navegador para informar sobre la versión del documento html y cómo el navegador debe renderizarlo. Se declara como primer elemento en un archivo HTML. Garantiza de cierta forma una estandarizacion entre multiples navegadores. De no declararse, el navegador asumira la version y pasará a quirks mode.

The main reason as to why JS files are linked at the bottom of the body is because whenever a browser encounters any JS, it parses it and executes that on the spot. Hence if it was to be added at the top, it would make the page rendering slow and thus it would take more time for page load. Moreover since the DOM won't be rendered fully, JS won't be able to manipulate the elements. On the contrary, CSS files are linked in the head because they get applied regardless of DOM already rendered or not. Hence the webpage looks elegant as soon as the page loads. However just like JS you can link the CSS at the end which would mean that the webpage first loads with just plain HTML and then the CSS is applied to it. This shift is clearly visible to the user and moreover an important thing to remember is that the page would load with bare minimum HTML and if the user has slow Internet connection, the CSS load would take considerable amount of time, which means that the webpage shows just the HTML meanwhile. This might make the user close the website without waiting for it to load fully. To avoid such things, a CSS file is linked at the head while a JS file is linked at the bottom. A notable exception: if you use Jquery, that won't be an issue since it would execute only after the document is ready. But even in that case, the browser would parse it slowing down the page load.

Basic CSS and box-model

Basic HTML