Interview Prep

Question 1

What does CORS stand for and what issue does it address?

Answer 1

CORS stands for Cross-Origin Resource sharing. it allows you to make requests from one website to another website in the browser, which is normally prohibited by another browser policy called Same-Origin Policy (SOP).

Question 2

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

Answer 2

A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.

static - The default position; the element will flow into the page as it normally would. The top, right, bottom, left and z-index properties do not apply.
relative - The element’s position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
absolute - The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements.
fixed - The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn’t move when scrolled.
sticky - Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

Question 3

What are the different ways to visually hide content (and make it available only for screen readers)?

Answer 3

These techniques are related to accessibility (a11y).

width: 0; height: 0. Make the element not take up any space on the screen at all, resulting in not showing it.
position: absolute; left: -99999px. Position it outside of the screen.
text-indent: -9999px. This only works on text within the block elements.
Meta tags. For example by using Schema.org, RDF, and JSON-LD.
WAI-ARIA. A W3C technical specification that specifies how to increase the accessibility of web pages.
Even if WAI-ARIA is the ideal solution, I would go with the absolute positioning approach, as it has the least caveats, works for most elements and it’s an easy technique.

Question 4

Explain CSS sprites, and how you would implement them on a page or site.

Answer 4

CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons (Gmail uses it). How to implement it:

Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
Each image would have a corresponding CSS class with background-image, background-position and background-size properties defined.
To use that image, add the corresponding class to your element.
Advantages:

Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
Advance downloading of assets that won’t be downloaded until needed, such as images that only appear upon :hover pseudo-states. Blinking wouldn’t be seen.

Question 5

Describe z-index and how stacking context is formed.

Answer 5

The Z-index is a property that allows the developer to stack elements in the CSS. It’s basically a 3-d property so it allows the developer to choose how close the element appears. This is how stacking context is formed.

position: relative places an element relative to its current position without changing the layout around it, whereas position: absolute places an element relative to its parent’s position and changing the layout around it.

Question 6

Describe floats and how they work.​

Answer 6

Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike position: absolute elements, which are removed from the flow of the page.

Question 7

What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?

Answer 7

A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make

Normalize. css is mainly a set of styles, based on what its author thought would look good, and make it look consistent across browsers. Reset basically strips styling from elements so you have more control over the styling of everything.

Question 8

What is CSS selector specificity and how does it work?

Answer 8

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.

Inline Styles - 1000
ID selectors - 100
Classes, Attributes and Pseudo-classes - 10
Elements and Pseudo-elements - 1

Question 9

What is progressive rendering?

Answer 9

Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.

Question 10

Describe the difference between , and .

Answer 10

Async allows the execution of scripts asynchronously as soon as they’re downloaded. Defer allows execution only after the whole document has been parsed. Both attributes don’t have any effect on inline scripts

Question 11

Consider HTML5 as an open web platform. What are the building blocks of HTML5

Answer 11

HTML elements are the building blocks of the HTML web page. The elements consist of a pair of tags (starting and ending tags) and the textual or graphical content inside of the tags

Question 12

What are data- attributes good for?

Answer 12

data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.

Question 13

What kind of things must you be wary of when designing or developing for multilingual sites?

Answer 13

Be wary of layout or overflow issues in the design. It’s best to avoid designing where the amount of text would make or break a design. Character counts come into play with things like headlines, labels, and buttons. They are less of an issue with free-flowing text such as body text or comments.

Question 14

How do you serve a page with content in multiple languages?

Answer 14

When the page contains content in another language, add a language attribute to an element surrounding that content. This allows you to style or process it differently. For example: <p>The title is “<span>Le Bon Usage</span>”.

or

or

</p><p> French “ <span> Bonjour </span> “ </p>

Question 15

What does a doctype do?

Answer 15

The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. This ensures that the web page is parsed the same way by different web browsers.

Question 16

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

Answer 16

LocalStorage

Pros:

Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity. If you look at the Mozilla source code we can see that 5120KB (5MB which equals 2.5 Million chars on Chrome) is the default storage size for an entire domain. This gives you considerably more space to work with than a typical 4KB cookie.
The data is not sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - reducing the amount of traffic between client and server.
The data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site.
Cons:

It works on same-origin policy. So, data stored will only be available on the same origin.
Cookies

Pros:

Compared to others, there’s nothing AFAIK.
Cons:

The 4K limit is for the entire cookie, including name, value, expiry date etc. To support most browsers, keep the name under 4000 bytes, and the overall cookie size under 4093 bytes.
The data is sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - increasing the amount of traffic between client and server.
Typically, the following are allowed:

300 cookies in total
4096 bytes per cookie
20 cookies per domain
81920 bytes per domain(Given 20 cookies of max size 4096 = 81920 bytes.)
sessionStorage

Pros:

It is similar to localStorage.
The data is not persistent i.e. data is only available per window (or tab in browsers like Chrome and Firefox). Data is only available during the page session. Changes made are saved and available for the current page, as well as future visits to the site on the same tab/window. Once the tab/window is closed, the data is deleted.
Cons:

The data is available only inside the window/tab in which it was set.
Like localStorage, it works on same-origin policy. So, data stored will only be available on the same origin.

Question 17

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

Answer 17

• Use CSS animations for simpler “one-shot” transitions, like toggling UI element states.
• Use JavaScript animations when you want to have advanced effects like bouncing, stop, pause, rewind, or slow down.
• If you choose to animate with JavaScript, use the Web Animations API or a modern framework that you’re comfortable with.

Question 18

What is a CDN used for?

Answer 18

A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos.

Question 19

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

Answer 19

Make fewer HTTP requests.
Use a Content Delivery Network.
Add an Expires header.
Gzip components.
Put CSS at the top.
Move scripts to the bottom.
Avoid CSS expressions.
Make JavaScript and CSS external.

Question 20

Can you describe the difference between progressive enhancement and graceful degradation?

Answer 20

Graceful degradation is the practice of building an application for modern browsers while ensuring it remains functional in older browsers. Progressive enhancement is the practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.

Question 21

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

Answer 21

LocalStorage

Pros:

Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity. If you look at the Mozilla source code we can see that 5120KB (5MB which equals 2.5 Million chars on Chrome) is the default storage size for an entire domain. This gives you considerably more space to work with than a typical 4KB cookie.
The data is not sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - reducing the amount of traffic between client and server.
The data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site.
Cons:

It works on same-origin policy. So, data stored will only be available on the same origin.
Cookies

Pros:

Compared to others, there’s nothing AFAIK.
Cons:

The 4K limit is for the entire cookie, including name, value, expiry date etc. To support most browsers, keep the name under 4000 bytes, and the overall cookie size under 4093 bytes.
The data is sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - increasing the amount of traffic between client and server.
Typically, the following are allowed:

300 cookies in total
4096 bytes per cookie
20 cookies per domain
81920 bytes per domain(Given 20 cookies of max size 4096 = 81920 bytes.)
sessionStorage

Pros:

It is similar to localStorage.
The data is not persistent i.e. data is only available per window (or tab in browsers like Chrome and Firefox). Data is only available during the page session. Changes made are saved and available for the current page, as well as future visits to the site on the same tab/window. Once the tab/window is closed, the data is deleted.
Cons:

The data is available only inside the window/tab in which it was set.
Like localStorage, it works on same-origin policy. So, data stored will only be available on the same origin.

Question 22

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

Answer 22

LocalStorage

Pros:

Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity. If you look at the Mozilla source code we can see that 5120KB (5MB which equals 2.5 Million chars on Chrome) is the default storage size for an entire domain. This gives you considerably more space to work with than a typical 4KB cookie.
The data is not sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - reducing the amount of traffic between client and server.
The data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site.
Cons:

It works on same-origin policy. So, data stored will only be available on the same origin.
Cookies

Pros:

Compared to others, there’s nothing AFAIK.
Cons:

The 4K limit is for the entire cookie, including name, value, expiry date etc. To support most browsers, keep the name under 4000 bytes, and the overall cookie size under 4093 bytes.
The data is sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - increasing the amount of traffic between client and server.
Typically, the following are allowed:

300 cookies in total
4096 bytes per cookie
20 cookies per domain
81920 bytes per domain(Given 20 cookies of max size 4096 = 81920 bytes.)
sessionStorage

Pros:

It is similar to localStorage.
The data is not persistent i.e. data is only available per window (or tab in browsers like Chrome and Firefox). Data is only available during the page session. Changes made are saved and available for the current page, as well as future visits to the site on the same tab/window. Once the tab/window is closed, the data is deleted.
Cons:

The data is available only inside the window/tab in which it was set.
Like localStorage, it works on same-origin policy. So, data stored will only be available on the same origin.

Question 23

Explain CSS sprites, and how you would implement them on a page or site.

Answer 23

CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons (Gmail uses it). How to implement it:

Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
Each image would have a corresponding CSS class with background-image, background-position and background-size properties defined.
To use that image, add the corresponding class to your element.
Advantages:

Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
Advance downloading of assets that won’t be downloaded until needed, such as images that only appear upon :hover pseudo-states. Blinking wouldn’t be seen.