What is the difference between span and div?
Answer: div is a block element and span is inline element.
Extra: It is illegal to put block element inside inline element. div can have a p tag and a p tag can have a span. However, span can't have a div or p tag inside.
Describe event bubbling.
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.
Describe event bubbling.
Describe the difference between <script>, <script async> and <script defer>.
<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.
Explain Ajax in as much detail as possible.
The XMLHttpRequest API is frequently used for the asynchronous communication or these days, the fetch API.
Explain event delegation
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.
Explain prototypical inheritance
Explain the types of variables Var, Let, and Const
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.
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 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.
Have you played around with the new CSS Flexbox or Grid specs?
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.
How would you approach fixing browser-specific styling issues?
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.
What are some important HTML5 features?
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">
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 elements can be used to display visual content, such as photos, illustrations, diagrams or code snippets.
In the example code above, figure elements have the class “gallery-item”, and each contains an img element.
Section elements, like divs, can be used to organize webpage content into thematic groups.
Above, a section element is used to organize h2 and form elements for a website’s “Contact Us” feature.
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.
<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>
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.
<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>
Above, the header element encloses the img and nav.
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.
<p>© Acme Granola Corporation 2016<p>
<a href="#"><img src="instagram-icon.png"></a>
<a href="#"><img src="facebook-icon.png"></a>
<a href="#"><img src="twitter-icon.png"></a>
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”.
What is a closure, and how/why would you use one?
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.
What is CSS selector specificity and how does it work?
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
What is semantic HTML?
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
What is the CSS display property and can you give a few examples of its use?
What is the difference between npm and npx?
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.
What's a typical use case for anonymous functions?
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).
What's the difference between a variable that is: null, undefined or undeclared?
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.
What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
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.
Why do you need a DOCTYPE declaration?
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.
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.
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?
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.