Front End

Question 1

What happens during the layout or reflow process in a browser

Answer 1

The browser calculates different element sizes and positions

Question 2

What is the painting part of a browser process

Answer 2

Painting refers to physically rendering pixels to a screen

Question 3

What are the main components of a browser

Answer 3

1. UI - everything the user sees except the main window
2. Browser Engine - marshals actions between the ui and rendering engine
3. Rendering Engine - responsible for displaying content. For example if displaying html. Engine parses html and css and displays it on the screen. Can also render pdfs, images, xml etc. Different browsers use different engines. Chrome and Opera use Blink a fork of webkit which Safari uses.

4. Networking - responible for network calls like http rquests

5. UI Backend - used for drawing basic widets like combo boxes and windows. Exposes a generic interface that is not platform specific. Uses OS UI methods.
6. JavaScript Interpreter - Parses and executes JS
7. Data Storage- persistence layer which in cludes cookies, localStorage IndexedDB, websql, and filesystem.

Question 4

Add more

Answer 4

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing

Question 5

What is a virtual DOM in react?

What components does it involve. What advantages does it have?

Answer 5

1. An in memory representatino of the dom
2. a way to translate that memory tree into the real dom
3. a diffing algorathim that compares changes.
   a. DOM manipulation is quicker in memory, not all the flow processes are need before a final update (reflow, paint etc).
   c. Real DOM manip required imperative programming, you repeatedly tell the program how to change and iterate. UI programming is easier when declarative programming is involed - tell it what we want to see.
   c. Sits between the browser dom and application developer.
   d. It is an abstraction, just makes it easier for devloper to use the dom properly.

Question 6

What are the three steps to designing Internationalization (intl,i18n).

Answer 6

1. Detect Users Locale
2. Translate UI Elements (titles as well as hints etc)
3. Serving locale-specific content like dates, currencies and numbers.

Question 7

How do you detect a user’s Locale

Answer 7

1. The main way to guess a language is using hte Accept-Language header in HTTP requests that all modern browsers send which detects what their OS language is.
   - This can have a range: Accept-Language: da, en-gb;q=0.8, en;q=0.7. (meaning this user prefers danish but will accept british english or other types of english).
2. Older ways to use Geo location with IP address but this approach can often be inaccurate (for travels and second language speakers, etc)
3. Accept-=Language can still be imperfect so as a stop gap implement a language widget.