Frontend Developer Interview Questions and Answers (1)
What's a doctype do?
Basically, the DOCTYPE describes the HTML that will be used in your page.
Browsers also use the DOCTYPE to determine how to render a page. Not including a DOCTYPE or including an incorrect DOCTYPE can trigger quirks mode. The kicker here is that quirks mode in Internet Explorer is quite different from quirks mode in Firefox (and other browsers), meaning that you'll have amuch harder job trying to ensure your page works consistently in all browsers if pages are rendered in quirks mode than you will if they are rendered in standards mode.
Wikipedia has a more indepth summary of the differences in rendering when using various DOCTYPEs. Note that there are some subtle differences between the "skinny DOCTYPE" (<!DOCTYPE html>) and other DOCTYPEs that trigger "standards compliant" rendering.
There is quite a bit of debate about the use of XHTML which is covered well in XHTML — myths and reality.
Explain what “Semantic HTML” means
Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look. Semantic HTML is processed by regular web browsers as well as by many other user agents. CSS is used to suggest its presentation to human users.
As an example, recent HTML standards discourage use of the tag <i> (italic, a typeface)[1] in preference of more accurate tags such as<em> (emphasis); the CSS stylesheet should then specify whether emphasis is denoted by an italic font, a bold font, underlining, slower or louder audible speech etc. This is because italics are used for purposes other than emphasis, such as citing a source; for this, HTML 4 provides the tag <cite>.[2] Another use for italics is foreign phrases or loanwords; web designers may use built-in XHTML language attributes[3] or specify their own semantic markup by choosing appropriate names for the class attribute values of HTML elements (e.g. class="loanword"). Marking emphasis, citations and loanwords in different ways makes it easier for web agents such as search engines and other software to ascertain the significance of the text.
Semantic = Meaning.
Semantic elements = Elements with meaning.
How to write 'Semantic HTML'?
write correct tags
Semantics applies to IDs and Classnames as well as tags
html first, then css
always separate style from content
What's the difference between standards mode and quirks mode?
In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.
There are now three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode. Inquirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5 for Windows that is required not to break existing content on the Web. In full standards mode, the behavior is (hopefully) the behavior described by the HTML and CSS specifications. In almost standards mode, there are only a very small number of quirks implemented.
https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode
What are the limitations when serving XHTML pages?
Are there any problems with serving pages as application/xhtml+xml?
Perhaps the biggest issue is the poor browser support XHTML currently enjoys. Internet Explorer and a number of other user agents cannot parse XHTML as XML. Thus, it is not the extensible language it was promised to be. There are many other issues.
XHTML does not have good browser support. So problems can arise from places like internet explorer, safari etc.
HTML5 has more descriptive semantics.
XHTML is not extensible if you hope to support Internet Explorer or the number of other user agents that can’t parse XHTML as XML. They will handle the document as HTML and you will have no extensibility benefit.
The new version of HTML has features like offline storage or the ability to handle data even when the app is no longer connected to the internet
How do you serve a page with content in multiple languages?
What kind of things must you be wary of when design or developing for multilingual sites?
http://stackoverflow.com/questions/3876213/design-patterns-for-multiple-language-website
What are data- attributes good for?
Prior to HTML5 we had to rely on using 'class' or 'rel' attributes to store little snippets of data that we could use in our websites. This sometimes led to problems and could cause conflicts between the styling and functionality of websites. The advent of HTML5 introduced a new attribute known as 'data'.
We can now use this stored data in our site’s JavaScript to create a richer, more engaging user experience. Imagine that when a user clicks on a vegetable a new layer opens up in the browser displaying the additional seed spacing and sowing instructions. Thanks to the data-attributes we’ve added to our <li> elements, we can now display this information instantly without having to worry about making any Ajax calls and without having to make any server-side database queries.
Prefixing the custom attributes with data- ensures that they will be completely ignored by the user agent. As far as the browser and indeed the website’s end user are concerned, this data does not exist.
The spec says (emphasis ours):
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
These attributes are not intended for use by software that is independent of the site that uses the attributes.
Every HTML element may have any number of custom data attributes specified, with any value.
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
http://lacquer.fi/radidoc/The_building_blocks_of_a_HTML5_web_page
Describe the difference between cookies, sessionStorage and localStorage.
HTML5 web storage = generic umbrella term for the new client-side data storage options:
'default' = stores things in name/value pairs
Web SQL (aka Web Database) = uses a SQL database
Local Storage = persistant and scoped to the domain. At the moment two flavors are usually mentioned:
Session Storage = non persistent and scoped only to the current window
Cookies = the old school way of doing all of the above. Stores name/value pairs per domain.
Can you explain the difference between GET and POST?
http://stackoverflow.com/questions/3477333/what-is-the-difference-between-post-and-get
