HTML

‣

What is the difference between a User, a User-Agent and a Client?

‣

User

User refers to the person

‣

User-Agent

User Agent is the software or a software agent that acts on behalf of a user, such as a web browser that "retrieves, renders and facilitates end user interaction with Web content". An email reader is a mail user agent.

I.O.W. A user-agent is the browser or mobile application

‣

Client

Client is the application code

‣

What does a Doctype do?

Doctype stands for Document Type Declaration.
Which informs the web browser about the type and version of HTML used in building the web document. This allows the browser to load it properly.
The DOCTYPE declaration for the HTML5 standards is <!DOCTYPE html>.

‣

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

When an HTTP request is made to a server, the requesting user agent usually sends information about language preferences, such as in the Accept-Language header.
The server can then use this information to dynamically generate and return a version of the document in the appropriate language

Server uses the HTML markup will contain i18n placeholders and content for the specific language stored in Y(A)ML or JSON formats.

The returned HTML document should also declare the lang attribute in the <html> tag, such as <html lang="en">...</html>

‣

What should you think about when developing for sites in multiple languages?

‣

Formatting of Dates and Currencies

Calendar dates are sometimes presented in different ways. Eg. "May 31, 2012" in the U.S. vs. "31 May 2012" in parts of Europe.

Text in raster-based images (e.g. png, gif, jpg, etc.), is not a scalable approach
Using the lang attribute in your HTML.
Directing users to their native language and allowing a user to change his country/language easily without hassle.

‣

Overflow issues related to restrictive words and sentence length

Some content can be longer when written in another language.
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.

‣

Language reading direction

English is left-to-right, but some languages are up-to-down, right-to-left

‣

cookie vs sessionStorage vs localStorage

‣

cookies are strings are stored in the browser, which are generally used for authentication.

4kb storage limit
set by the Set-Cookie HTTP header
accessed via document.cookie
Expiry is determined by the server

‣

sessionStorage is a storage object of key-value pairs (both strings)

5mb storage capacity
set by window.sessionStorage.setItem()
Expires upon tab/page close

‣

localStorage is a storage object of key-value pairs (both strings)

5mb storage capacity
set by window.localStorage.setItem()
Does not expire, can be set by server

‣

<script> vs <script async> vs <script defer>?

‣

<script>

HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed.

‣

<script async>

The script is fetched in parallel to HTML parsing
Executed as soon as it is available (potentially before HTML parsing completes).
Use async when the script is independent of any other scripts on the page, for example, analytics.

‣

<script defer>

The script will be fetched in parallel to HTML parsing

‣

Executed when the page has finished parsing.

If there are multiple of them, each deferred script is executed in the order they were encountered in the document.

Use defer if the script relies on a fully-parsed DOM. There's not much difference in putting a normal <script> at the end of <body>.
A deferred script must not contain document.write.

‣

Why do we put CSS <link>s between <head></head>?

‣

To improve page load times.

💡

CSS is a render blocking resource, because without CSSOM there’s no Render Tree, and without Render Tree there’s no render.

When a page first loads, HTML is parsed and is transformed progressively into the DOM
When the <link> tag is found, a new request for the style sheet is made.
After which the CSS is transformed into the CSSOM
Finally, the page is rendered, i.e. this is the First Meaningful Paint (the the time it takes for the primary content of a page to be shown)

To prevent flashes of unstyled content (FOUC)
Some browsers block re-rendering to avoid having to repaint elements of the page if their styles change. The user is then stuck viewing a blank white page.

‣

High Performance Web Apps

When building for the web we all have this sense of how careful we should be about not shipping too much JavaScript and CSS to our users. That the more we send, the slower our web app might get. So...

itnext.io

Constructing the Object Model | Web Fundamentals | Google Developers

Before the browser can render the page, it needs to construct the DOM and CSSOM trees. As a result, we need to ensure that we deliver both the HTML and CSS to the browser as quickly as possible. Bytes → characters → tokens → nodes → object model.

developers.google.com

Constructing the Object Model | Web Fundamentals | Google Developers

‣

Why is it a good idea to position and JS <script>s just before </body>? Do you know any exceptions?

<script>s block HTML parsing while they are being downloaded and executed.
If your <script> manipulates DOM elements, your code could throw an error and halt the entire script
Placing the scripts at the bottom will allow the HTML to be parsed and displayed to the user first.

‣

Exception

If you NEED to put <script> in the <head>, use the defer attribute, which will achieve the same effect of downloading and running the script only after the HTML is parsed

‣

What is Progressive Rendering?

Progressive rendering is a collection techniques used to improve the performance, or perceived load time, of a webpage to render content for display as quickly as possible.

Examples of progressive rendering techniques include:

‣

Lazy loading of images

Images on the page are not loaded all at once. JavaScript will be used to load an image when the user scrolls into the part of the page that displays the image.

‣

Prioritizing visible content (or above-the-fold rendering)

Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the DOMContentLoaded/load event to load in other resources and content.

‣

Async HTML fragments

Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found here.

‣

What is the srcset attribute? Why would you use it?

The srcset attribute allows different images to be served to users depending on the client's resolution/device width.

‣

For example,<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> tells the browser to display the small, medium or large .jpg graphic depending on the client's resolution.

For a device width of 320px, the following calculations are made:

500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25
So the client's resolution is 1x, 1.5625 is the closest, and 500w corresponding to small.jpg will be selected by the browser.

‣

What are data- attributes used for?

Were originally used to store additional data in the DOM
These days, data- attributes are used as hooks for end-to-end testing frameworks without having to add additional classes or ids

‣

Where and why is the rel="noopener" attribute used?

‣

What is the difference between HTML and React event handling?

‣

What is the DOM?

‣

Briefly describe the correct use case for the following HTML5 semantic elements: <header>, <article>, <section> , <footer>

‣

Can a web page contain multiple <header> elements? What about <footer> elements?

‣