HTML

Question 1

What does a DOCTYPE do?

Answer 1

DOCTYPE is an abbreviation for Document Type. A DOCTYPE is always associated to a DTD - for Document Type Definition.

A DTD defines how documents of a certain type should be structured (i.e. a button can contain a span but not a div), whereas a DOCTYPE declares what DTD a document supposedly respects (i.e. this document respects the HTML DTD).

For webpages, the DOCTYPE declaration is required. It is used to tell user agents what version of the HTML specifications your document respects. Once a user agent has recognized a correct DOCTYPE, it will trigger the no-quirks mode matching this DOCTYPE for reading the document. If a user agent doesn’t recognize a correct DOCTYPE, it will trigger the quirks mode.

The DOCTYPE declaration for the HTML5 standards is .

Question 2

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

Answer 2

I will assume that it is asking about the most common case, which is how to serve a page with content available in multiple languages, but the content within the page should be displayed only in one consistent language.

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 return a version of the document in the appropriate language if such an alternative is available. The returned HTML document should also declare the lang attribute in the tag, such as ….

Of course this is useless for letting a search engine know that the same content is available in different languages, and so you must also make use of the hreflang attribute in the . Eg.

In the back end, the HTML markup will contain i18n placeholders and content for the specific language stored in YML or JSON formats. The server then dynamically generates the HTML page with content in that particular language, usually with the help of a back end framework.

Question 3

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

Answer 3

Use lang attribute in your HTML.

Directing users to their native language - Allow a user to change his country/language easily without hassle.

Text in raster-based images (e.g. png, gif, jpg, etc.), is not a scalable approach - Placing text in an image is still a popular way to get good-looking, non-system fonts to display on any computer. However, to translate image text, each string of text will need to have a separate image created for each language. Anything more than a handful of replacements like this can quickly get out of control.

Restrictive words/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.

Be mindful of how colors are perceived - Colors are perceived differently across languages and cultures. The design should use color appropriately.

Formatting 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.

Do not concatenate translated strings - Do not do anything like “The date today is “ + date. It will break in languages with different word order. Use a template string with parameters substitution for each language instead. For example, look at the following two sentences in English and Chinese respectively: I will travel on {% date %} and {% date %} 我会出发. Note that the position of the variable is different due to grammar rules of the language.

Language reading direction - In English, we read from left-to-right, top-to-bottom, in traditional Japanese, text is read up-to-down, right-to-left.

Useful-to-have - include the locale in the path (e.g en_US, zh_CN, etc).

Question 4

What are data- attributes good for?

Answer 4

Before JavaScript frameworks became popular, front end developers used data- attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

These days, using data- attributes is generally not encouraged. One reason is that users can modify the data attribute easily by using inspect element in the browser. The data model is better stored within JavaScript itself and stay updated with the DOM via data binding possibly through a library or a framework.

However, one perfectly valid use of data attributes, is to add a hook for end to end testing frameworks such as Selenium and Capybara without having to create a meaningless classes or ID attributes. The element needs a way to be found by a particular Selenium spec and something like data-selector=’the-thing’ is a valid way to do so without convoluting the semantic markup otherwise.

Question 5

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

Answer 5

Semantics - Allowing you to describe more precisely what your content is.

Connectivity - Allowing you to communicate with the server in new and innovative ways.

Offline and storage - Allowing webpages to store data on the client-side locally and operate offline more efficiently.

Multimedia - Making video and audio first-class citizens in the Open Web.

2D/3D graphics and effects - Allowing a much more diverse range of presentation options.

Performance and integration - Providing greater speed optimization and better usage of computer hardware.

Device access - Allowing for the usage of various input and output devices.

Styling - Letting authors write more sophisticated themes.

Question 6

Describe the difference between a cookie, sessionStorage and localStorage

Answer 6

All the above-mentioned technologies are key-value storage mechanisms on the client side. They are only able to store values as strings.

Question 7

Cookie - Initiator

Answer 7

Client or server. Server can use Set-Cookie header

Question 8

Cookie - Expiry

Answer 8

Manually set

Question 9

Cookie - Persistent across browser sessions?

Answer 9

Depends on whether expiration is set

Question 10

Cookie - Sent to server with every HTTP request?

Answer 10

Cookies are automatically being sent via Cookie header

Question 11

Cookie - Capacity (per domain)

Answer 11

4kb

Question 12

Cookie - Accessibility

Answer 12

Any window

Question 13

localStorage - Initiator

Answer 13

Client

Question 14

localStorage - Expiry

Answer 14

Forever

Question 15

localStorage - Persistent across browser sessions?

Answer 15

Yes

Question 16

localStorage - Sent to server with every HTTP request?

Answer 16

No

Question 17

localStorage - Capacity (per domain)

Answer 17

5MB

Question 18

localStorage - Accessibility

Answer 18

Any window

Question 19

sessionStorage - Initiator

Answer 19

Client

Question 20

sessionStorage - Expiry

Answer 20

On tab close

Question 21

sessionStorage - Persistent across browser sessions?

Answer 21

No

Question 22

sessionStorage - Sent to server with every HTTP request?

Answer 22

No

Question 23

sessionStorage - Capacity (per domain)

Answer 23

5MB

Question 24

sessionStorage - Accessibility

Answer 24

Same tab

Question 25

Describe the difference between , and

Answer 25

• HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed.
• The script will be fetched in parallel to HTML parsing and 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>
- The script will be fetched in parallel to HTML parsing and 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. If a script relies on a fully-parsed DOM, the defer attribute will be useful in ensuring that the HTML is fully parsed before executing. A deferred script must not contain document.write.

Note: The async and defer attributes are ignored for scripts that have no src attribute.
</script>

Question 26

Why is it generally a good idea to position CSS s between and JS s just before

Answer 26

Placing s in the

Putting s in the is part of proper specification in building an optimized website. When a page first loads, HTML and CSS are being parsed simultaneously; HTML creates the DOM (Document Object Model) and CSS creates the CSSOM (CSS Object Model). Both are needed to create the visuals in a website, allowing for a quick “first meaningful paint” timing. This progressive rendering is a category optimization sites are measured in their performance scores. Putting stylesheets near the bottom of the document is what prohibits progressive rendering in many browsers. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is then stuck viewing a blank white page. Other times there can be flashes of unstyled content (FOUC), which show a webpage with no styling applied.

Placing s just before

Question 27

What is progressive rendering?

Answer 27

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.

It used to be much more prevalent in the days before broadband internet but it is still used in modern development as mobile data connections are becoming increasingly popular (and unreliable)!

Examples of such techniques:

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.

Question 28

Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute

Answer 28

You would use the srcset attribute when you want to serve different images to users depending on their device display width - serve higher quality images to devices with retina display enhances the user experience while serving lower resolution images to low-end devices increase performance and decrease data wastage (because serving a larger image will not have any visible difference). srcsets solve the problem whereby you want to serve smaller image files to narrow screen devices, as they don’t need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low-density screens.

Question 29

Have you used different HTML templating languages before?

Answer 29

Yes, Pug (formerly Jade), and Handlebars. In my opinion, they are more or less the same and provide similar functionality of escaping content and helpful filters for manipulating the data to be displayed. Most templating engines will also allow you to inject your own filters in the event you need custom processing before display.

Question 30

What are empty elements in HTML ?

Answer 30

These elements are called empty or void and only have a start tag since they can’t have any content. A typical example of an empty element, is the <br></br> element, which represents a line break. Some other common empty elements are <img></img> , , , , <hr> , etc.

Question 31

What is the difference between canvas and svg?

Answer 31

SVG

Based on use case SVG is used for logos, charts because its vector graphics you draw and forgot about it. When view port change like re-sizing(or zoom) it will adjust itself and no need to redraw.

Document format for scalable vector graphics.

When the number of objects increases on the screen, SVG begins to degrade as we are continually adding them to the DOM.

Canvas

Canvas is bitmap (or raster) it done by painting of pixels to the screen. It is used to develop games or graphics experience (https://www.chromeexperiments.com/webgl) in a given area it paints pixel and changes by redraw it another. Since its a raster type we need to redraw entirely as view port changes.

Is a javascript API for drawing vector graphics to a bitmap of a specific size.

When the size of the screen increases, canvas begins to degrade as more pixels need to be drawn.