🧩

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 encoun­tered 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>?
image
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.
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?
image
What is the difference between HTML and React event handling?
image
What is the DOM?
image
Briefly describe the correct use case for the following HTML5 semantic elements: <header>, <article>, <section> , <footer>
image
Can a web page contain multiple <header> elements? What about <footer> elements?
image