Write a HTML table tag sequence that outputs the following
What is an iframe and how it works?
What is the purpose of the alt attribute on images?
What is the difference between span and div?
How Can I Get Indexed Better by Search Engines?
How can you highlight text in HTML?
What were some of the key goals and motivations for the HTML5 specification?
How do you change the direction of html text?
Explain the difference between block elements and inline elements
When is it appropriate to use the small element?
What is the difference between <section> and <div>?
How do you serve a page with content in multiple languages?
What is the purpose of cache busting and how can you achieve it?
Can a web page contain multiple
elements? What about elements?What are data- attributes good for?
What are defer and async attributes on a <script> tag?
Discuss the differences between an HTML specification and a browser’s implementation thereof.
What are some differences that XHTML has compared to HTML?
Where and why is the rel="noopener" attribute used?
What is HTML5 Web Storage? Explain localStorage and sessionStorage.
Describe the difference between a 'cookie', 'sessionStorage' and 'localStorage'.
How do you set IE compatibility mode?
Have you used different HTML templating languages before?
Explain the difference between cookies, session and local storage
Explain almost standard, full standard and quirks mode
Describe the difference between <script>, <script async> and <script defer>.
What is progressive rendering?
Why to use HTML5 semantic tags?
Why do I need a doctype and what does it do?
What's the difference between Full Standard, Almost Standard and Quirks Mode?
What kind of things must you be wary of when designing or developing for multilingual sites?
How would you select svg or canvas for your site?
What are the building blocks of HTML5?
What is an HTML preprocessor and are you using it?
What is the purpose of 'main' element?
What is accessibility & ARIA role means in a web application?
Could you generate a public key in HTML?
Write a HTML table tag sequence that outputs the following:
50 pcs 100 500
10 pcs 5 50
Answer:
<table>
<tr>
<td>50 pcs</td>
<td>100</td>
<td>500</td>
</tr>
<tr>
<td>10 pcs</td>
<td>5</td>
<td>50</td>
</tr>
</table>An iframe is an HTML document which can be embedded inside another HTML page.
Example:
<iframe src="https://github.com" height="300px" width="300px"></iframe>- Meta tags always go inside head tag of the HTML page
- Meta tags is always passed as name/value pairs
- Meta tags are not displayed on the page but intended for the browser
- Meta tags can contain information about character encoding, description, title of the document etc,
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="I am a web page with description">
<title>Home Page</title>
</head>
<body>
</body>
</html>The alt attribute provides alternative information for an image if a user cannot view it. The alt attribute should be used to describe any images except those which only serve a decorative purposes, in which case it should be left empty.
In HTML5 it is not strictly necessary to close certain HTML tags. The tags that aren’t required to have specific closing tags are called “self closing” tags.
An example of a self closing tag is something like a line break (<br />) or the meta tag (<meta>). This means that the following are both acceptable:
<meta charset="UTF-8">
...
<meta charset="UTF-8" />divis a block elementspanis inline element
For bonus points, you could point out that it’s illegal to place a block element inside an inline element, and that while div can have a p tag, and a p tag can have a span, it is not possible for span to have a div or p tag inside.
It is possible to get indexed better by placing the following two statements in the <HEAD> part of your documents:
<META NAME="keywords" CONTENT="keyword keyword keyword keyword">
<META NAME="description" CONTENT="description of your site">Both may contain up to 1022 characters. If a keyword is used more than 7 times, the keywords tag will be ignored altogether. Also, you cannot put markup (other than entities) in the description or keywords list.
If you are working with an HTML5 page, the <mark> tag can be a quick and easy way of highlighting or marking text on a page:
<mark>highlighted text</mark>To highlight text with just HTML code and support for all browsers, set the background-color style, as shown in the example below, using the HTML tag.
<span style="background-color: #FFFF00">Yellow text.</span>Briefly describe the correct usage of the following HTML5 semantic elements: <header>, <article>, <section>, <footer>
-
<header>is used to contain introductory and navigational information about a section of the page. This can include the section heading, the author’s name, time and date of publication, table of contents, or other navigational information. -
<article>is meant to house a self-contained composition that can logically be independently recreated outside of the page without losing it’s meaining. Individual blog posts or news stories are good examples. -
<section>is a flexible container for holding content that shares a common informational theme or purpose. -
<footer>is used to hold information that should appear at the end of a section of content and contain additional information about the section. Author’s name, copyright information, and related links are typical examples of such content.
To display an HTML page correctly, a web browser must know which character set (character encoding) to use. This is specified in the tag:
HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">HTML5:
<meta charset="UTF-8">HTML5 was designed to replace HTML 4, XHTML, and the HTML DOM Level 2. The key goals and motivations behind the HTML5 specification were to:
- Deliver rich content (graphics, movies, etc.) without the need for additional plugins, such as Flash.
- Provide better semantic support for web page structure through new structural element tags.
- Provide a stricter parsing standard to simplify error handling, ensure more consistent cross-browser behaviour, and simplify compatibility with documents written to older standards.
- Provide better cross-platform support whether running on a PC, Tablet, or Smartphone.
The dir attribute is used to set the base direction of text for display. It is essential for enabling HTML in right-to-left scripts such as Arabic, Hebrew, Syriac, and Thaana.
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">
...- WebSQL is database API for client (browser) database using SQL.
- Similar to SQL, API are pretty simple.
- Not all the browser supports WebSQL.
- As of now WebSQL is deprecated.
- Block elements are those that take up the full width available on a web page, effectively blocking out any other elements from sitting next to it on the left or right.
- Inline elements are those who only take up as much width as is needed to display the contents of the element, thereby allowing other elements to be in line with the inline element.
Common block elements:
- Paragraphs (
<p>) - Headers (
<h1>through<h6>) - Divisions (
<div>) - Lists and list items (
<ol>,<ul>, and<li>) - Forms (
<form>)
Common inline elements:
- Spans (
<span>) - Images (
<img>) - Anchors (
<a>)
In HTML, some elements have optional tags. In fact, both the opening and closing tags of some elements may be completely removed from an HTML document, even though the elements themselves are required.
Three required HTML elements whose start and end tags are optional are the html, head, and body elements.
The HTML <small> element makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size. In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.
Consider:
<img src="image.jpg" alt="London by night">
<small>The copyright of this image is owned by Aurelio De Rosa</small>-
<section>means that the content inside is grouped (i.e. relates to a single theme), and should appear as an entry in an outline of the page. -
<div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.
- Web Workers helps us to run javascript code in the background without blocking application.
- Web Workers runs in an isolated (new) thread for executing our javascript code.
- Web Workers are usually used for large tasks.
- Web Workers needs a seperate file for our javascript code.
- Web Workers files are downloaded asynchronously.
- Web Workers are supported in all latest browser.
Example:
Our client side js file below:
var myWebWorker = new Worker("task.js"); // Creating a worker
// Listen to task.js worker messages
worker.addEventListener("message", function(event) {
console.log("Worker said: ", event.data);
}, false);
worker.postMessage("From web worker file"); // Will start the workertask.js (worker file) file below:
// Listen to client js file post messages
self.addEventListener("message", function(event) {
self.postMessage(event.data); // Send processed data to listening client js file.
}, false);DOCTYPE is an abbreviation for “document type”. It is a declaration used in HTML to distinguish between standards mode and quirks mode. Its presence tells the browser to render the web page in standards mode.
Moral of the story - just add <!DOCTYPE html> at the start of your page.
The question is a little vague, 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 <html> tag, such as <html lang="en">...</html>.
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.
Browsers have a cache to temporarily store files on websites so they don't need to be re-downloaded again when switching between pages or reloading the same page. The server is set up to send headers that tell the browser to store the file for a given amount of time. This greatly increases website speed and preserves bandwidth.
However, it can cause problems when the website has been changed by developers because the user's cache still references old files. This can either leave them with old functionality or break a website if the cached CSS and JavaScript files are referencing elements that no longer exist, have moved or have been renamed.
Cache busting is the process of forcing the browser to download the new files. This is done by naming the file something different to the old file.
A common technique to force the browser to re-download the file is to append a query string to the end of the file.
src="js/script.js"=>src="js/script.js?v=2"
The browser considers it a different file but prevents the need to change the file name.
Yes to both. The W3 documents state that the tags represent the header(<header>) and footer(<footer>) areas of their nearest ancestor "section". So not only can the page <body> contain a header and a footer, but so can every <article> and <section> element.
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 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.
If neither attribute is present, the script is downloaded and executed synchronously, and will halt parsing of the document until it has finished executing (default behavior). Scripts are downloaded and executed in the order they are encountered.
The defer attribute downloads the script while the document is still parsing but waits until the document has finished parsing before executing it, equivalent to executing inside a DOMContentLoaded event listener. defer scripts will execute in order.
The async attribute downloads the script during parsing the document but will pause the parser to execute the script before it has fully finished parsing. async scripts will not necessarily execute in order.
Note: both attributes must only be used if the script has a src attribute (i.e. not an inline script).
<script src="myscript.js"></script>
<script src="myscript.js" defer></script>
<script src="myscript.js" async></script>The DOM (Document Object Model) is a cross-platform API that treats HTML and XML documents as a tree structure consisting of nodes. These nodes (such as elements and text nodes) are objects that can be programmatically manipulated and any visible changes made to them are reflected live in the document. In a browser, this API is available to JavaScript where DOM nodes can be manipulated to change their styles, contents, placement in the document, or interacted with through event listeners.
- The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API.
- The DOM is constructed progressively in the browser as a page loads, which is why scripts are often placed at the bottom of a page, in the
<head>with adeferattribute, or inside aDOMContentLoadedevent listener. Scripts that manipulate DOM nodes should be run after the DOM has been constructed to avoid errors. document.getElementById()anddocument.querySelector()are common functions for selecting DOM nodes.- Setting the
innerHTMLproperty to a new value runs the string through the HTML parser, offering an easy way to append dynamic HTML content to a node.
HTML specifications such as HTML5 define a set of rules that a document must adhere to in order to be “valid” according to that specification. In addition, a specification provides instructions on how a browser must interpret and render such a document.
A browser is said to “support” a specification if it handles valid documents according to the rules of the specification. As of yet, no browser supports all aspects of the HTML5 specification (although all of the major browser support most of it), and as a result, it is necessary for the developer to confirm whether the aspect they are making use of will be supported by all of the browsers on which they hope to display their content. This is why cross-browser support continues to be a headache for developers, despite the improved specificiations.
HTML5defines some rules to follow for an invalidHTML5document (i.e., one that contains syntactical errors)- However, invalid documents may contain anything, so it's impossible for the specification to handle all possibilities comprehensively.
- Thus, many decisions about how to handle malformed documents are left up to the browser.
Some of the key differences are:
- An XHTML element must have an XHTML
<DOCTYPE> - Attributes values must be enclosed in quotes
- Attribute minimization is forbidden (e.g. one has to use
checked="checked"instead ofchecked) - Elements must always be properly nested
- Elements must always be closed
- Special characters must be escaped
The rel="noopener" is an attribute used in <a> elements (hyperlinks). It prevents pages from having a window.opener property, which would otherwise point to the page from where the link was opened and would allow the page opened from the hyperlink to manipulate the page where the hyperlink is.
With HTML5, web pages can store data locally within the user’s browser. The data is stored in name/value pairs, and a web page can only access data stored by itself.
Differences between localStorage and sessionStorage regarding lifetime:
- Data stored through
localStorageis permanent: it does not expire and remains stored on the user’s computer until a web app deletes it or the user asks the browser to delete it. sessionStoragehas the same lifetime as the top-level window or browser tab in which the data got stored. When the tab is permanently closed, any data stored throughsessionStorageis deleted.
Differences between localStorage and sessionStorage regarding storage scope:
Both forms of storage are scoped to the document origin so that documents with different origins will never share the stored objects.
sessionStorageis also scoped on a per-window basis. Two browser tabs with documents from the same origin have separatesessionStoragedata.- Unlike in
localStorage, the same scripts from the same origin can't access each other'ssessionStoragewhen opened in different tabs.
- WebSQL is database API for client (browser) database using SQL.
- Similar to SQL, API are pretty simple.
- Not all the browser supports WebSQL.
- As of now WebSQL is deprecated.
All the above-mentioned technologies are key-value storage mechanisms on the client side. They are only able to store values as strings.
cookie |
localStorage |
sessionStorage |
|
|---|---|---|---|
| Initiator | Client or server. Server can use Set-Cookie header |
Client | Client |
| Expiry | Manually set | Forever | On tab close |
| Persistent across browser sessions | Depends on whether expiration is set | Yes | No |
| Sent to server with every HTTP request | Cookies are automatically being sent via Cookie header |
No | No |
| Capacity (per domain) | 4kb | 5MB | 5MB |
| Accessibility | Any window | Any window | Same tab |
- By using http-equiv=X-UA-Compatible meta tag with content IE=edge
- IE=edge mode tells Internet Explorer to display content in highest mode available
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="I am a web page with description">
<title>Home Page</title>
</head>
<body>
</body>
</html>HTML 5 adds a lot of new features to the HTML specification
New Doctype
Still using that pesky, impossible-to-memorize XHTML doctype?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">If so, why? Switch to the new HTML5 doctype. You'll live longer -- as Douglas Quaid might say.
<!DOCTYPE html>New Structure
<section>- to define sections of pages<header>- defines the header of a page<footer>- defines the footer of a page<nav>- defines the navigation on a page<article>- defines the article or primary content on a page<aside>- defines extra content like a sidebar on a page<figure>- defines images that annotate an article
New Inline Elements
These inline elements define some basic concepts and keep them semantically marked up, mostly to do with time:
<mark>- to indicate content that is marked in some fashion<time>- to indicate content that is a time or date<meter>- to indicate content that is a fraction of a known range - such as disk usage<progress>- to indicate the progress of a task towards completion
New Form Types
<input type="datetime"><input type="datetime-local"><input type="date"><input type="month"><input type="week"><input type="time"><input type="number"><input type="range"><input type="email"><input type="url">
New Elements
There are a few exciting new elements in HTML 5:
<canvas>- an element to give you a drawing space in JavaScript on your Web pages. It can let you add images or graphs to tool tips or just create dynamic graphs on your Web pages, built on the fly.<video>- add video to your Web pages with this simple tag.<audio>- add sound to your Web pages with this simple tag.
No More Types for Scripts and Links
You possibly still add the type attribute to your link and script tags.
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>This is no longer necessary. It's implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>Make your content editable
The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>Attributes
requireto mention the form field is requiredautofocusputs the cursor on the input field
Yes
- Pug (formerly Jade),
- ERB,
- Slim,
- Handlebars,
- Jinja,
- Liquid
just to name a few. 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.
- fullstack.cafe
Cookies
- Limited storage space 4096 bytes / ~4 kb
- Only allow to store data as strings
- Stored data is sent back to server on every HTTP request such as HTML, CSS, Images etc,
- Can store only 20 cookies per domain
- In total 300 cookies are allowed on a site
- Setting HTTP only flag will prevent accessing cookies via javascript
- Can set expiration duration for auto deletion (can be set either from server or client)
Example:
// Set with expiration & path
document.cookie = "name=Gokul; expires=Thu, 18 Dec 2016 12:00:00 UTC; path=/;";
// Get
document.cookie;
// Delete by setting empty value and same path
document.cookie = "name=; expires=Thu, 18 Dec 2016 12:00:00 UTC; path=/;";Session Storage
- Storage space is 5 mb / ~5120 kb
- Storage space may vary a little based on the browser
- Only allow to store data as strings
- Data is available per window or tab
- Once window or tab is closed stored data is deleted
- Data will be only available on same origin
Example:
// Set
sessionStorage.setItem("name", "gokul");
// Get
sessionStorage.getItem("name"); // gokul
// Delete
sessionStorage.removeItem("name");
// Delete All
sessionStorage.clear();Local Storage
- Storage space is 5 mb / ~5120 kb
- Storage space may vary a little based on the browser
- Only allow to store data as strings
- Data will be only available on same origin
- Data is persistant (untill explicitly deleted)
- API is similar to session storage
Example:
// Set
localStorage.setItem("name", "gokul");
// Get
localStorage.getItem("name"); // gokul
// Delete
localStorage.removeItem("name");
// Delete All
localStorage.clear();There are now three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode.
- In quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards.
- 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.
For HTML documents, browsers use a DOCTYPE in the beginning of the document to decide whether to handle it in quirks mode or standards mode.
<script>- HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed.<script async>- The script will be fetched in parallel to HTML parsing and executed as soon as it is available (potentially before HTML parsing completes). Useasyncwhen 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 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, thedeferattribute will be useful in ensuring that the HTML is fully parsed before executing. There's not much difference in putting a normal<script>at the end of<body>. A deferred script must not containdocument.write.
Note: The async and defer attributes are ignored for scripts that have no src attribute.
- WebP is an image format like jpg, png which is approximately 10-20% less in size than other formats.
- Developed and introduced by Google in 2010.
- Not all the browsers support WebP.
- Plugins are available to convert other formats to WebP.
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/loadevent 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.
Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
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).
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. The first value is the image name and the second is the width of the image in pixels. For a device width of 320px, the following calculations are made:
- 500 / 320 = 1.5625
- 1000 / 320 = 3.125
- 2000 / 320 = 6.25
If the client's resolution is 1x, 1.5625 is the closest, and 500w corresponding to small.jpg will be selected by the browser.
If the resolution is retina (2x), the browser will use the closest resolution above the minimum. Meaning it will not choose the 500w (1.5625) because it is greater than 1 and the image might look bad. The browser would then choose the image with a resulting ratio closer to 2 which is 1000w (3.125).
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.
As their name says, this is for semantic purposes only. It's for improving the automated processing of documents. Automated processing happens more often than you realize - each website ranking from search engines is derived from automated processing of all the website out there.
// machine: okay, this structure looks like it might be a navigation element?
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>
// machine: ah, a navigation element!
<nav class="some-meaningless-class"><ul><li><a>...</nav>Consider the following markup. Is it valid? If not, can you explain why?
<figure>
<picture>
<source media="(min-width: 40em)"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320y">
<img src="medium.jpg" alt="London by night">
</picture>
<figcaption>A landscape of London by night</figcaption>
</figure>Answer:
The markup uses the relatively new picture element. The code is all valid apart from the last image specified in the srcset attribute. 320y is not a valid value, and the y should be replaced with a w.
The Doctype does two things.
- It identifies which dialect of HTML you're using.
- It controls whether the browsers uses "standards" or "quirks" mode to render the document.
If there is no doctype, or there's an unrecognized one, then it uses "quirks" mode and interprets the document as best it can. If there IS a doctype, and it recognizes it, then it follows the standards. The results of the rendering can vary depending on how it interprets the document.
When web was new to the world, the web pages were written in two versions:
- Netscape Navigator
- Internet Explorer
When W3C (World Wide Web Consortium) introduced new standards for web, the browsers introduced two layout modes to support new and old web standards.
Those modes are
- Quirks mode
- Standard mode
- Almost standard mode
Quirks Mode
- Browser will emulate non-standard behavior in Netscape Navigator 4 and Internet Explorer 5
- This was essential in order to support websites which was built before web standards
Full Standard Mode
- In Full Standard mode, behavior of browser is same as the HTML & CSS specification
- Almost all modern browser uses full standard mode now
To use full standard mode, specify <!DOCTYPE html> in your HTMl document.
<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
</head>
<body>
</body>
</html>Almost Standard Mode
- In Almost Standard mode, behavior of browser is same as full standard mode but with a very small number of quirks implementation
- Use
langattribute in your HTML. - Directing users to their native language - Allow a user to change his country/language easily without hassle.
- Text in images 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 it's 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.
SVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with a JavaScript). The differences between SVG and Canvas would be helpful in selecting the right one.
Canvas
- Resolution dependent
- No support for event handlers
- Poor text rendering capabilities
- You can save the resulting image as .png or .jpg
- Well suited for graphic-intensive games
SVG
- Resolution independent
- Support for event handlers
- Best suited for applications with large rendering areas (Google Maps)
- Slow rendering if complex (anything that uses the DOM a lot will be slow)
- Not suited for game application
Conclusion:
- SVG is better for applications and apps with few items
- Canvas is better for thousands of objects and careful manipulation, but a lot more code (or a library) is needed to get it off the ground.
- 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.
HTML Preprocessor helps us to write HTML code faster with less code.
Some Preprocessors are:
- Pug
- Haml
Example: index.jade
html
head
title= HelloWorld
body
h1 Using Jade to create HelloWorld web pageCompiled file: index.html
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<body>
<h1>Using Jade to create HelloWorld web page</h1>
</body>
</html>The HTML <main> element represents the dominant content of the <body> of a document, portion of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. One important facet of <main> is that it can only be used once per page.
<main> doesn't contribute to the document's outline; that is, unlike elements such as <body>, headings such as <h2>, and such, <main> doesn't affect the DOM's concept of the structure of the page. It's strictly informative.
- Web components are a set of web platform API.
- Web components allow us to create custom re-usable widgets or component in a web application.
- Web components are a part of the browser and will work across all modern browser.
- Web components doesn't require need any external libraries to work.
Features
- Custom Elements - let write our own fully featured DOM elements.
- Shadow DOM - gives the best feature of a iframe, style and markup for the web page.
- HTML Templates - allows to store some markup on the web page and we can later clone and reuse them.
- HTML Imports - allow to import an external HTML document.
Accessibility means letting the user navigate and interact with a website by any means. Let it be a keyboard, a mouse or people with disabilities or impairments.
- ARIA stands for Accessible Rich Internet Application.
- ARIA is a spec from W3C.
- ARIA is created to improve accessibility in web applications.
- ARIA provides a extra information to screen readers via HTML attributes.
- ARIA doesn't affect how an element is rendered in a browser.
The <keygen> element generates a public-private key pair and sends the public key to the server with form submission. The element is expected to be deprecated and does not have broad browser support.
If two parties want to communicate securely, they each need to be able to generate a public-private key pair, and then hare the public key with the other party. The <keygen> is intended to facilitate this within the context of an HTML form. In browsers that implement it (not all do), if the element is included with a form, the browser generates a key-pair locally and sends the public key to the server when the form is submitted. The private key is then stored locally and not shared.
It has been announced that the <keygen> element will be deprecated and removed from the HTML5 standard. This means that alternate methods of key generation will be needed. Naturally this simply means using JavaScript.
Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?
Placing <link>s in the <head>
Putting <link>s in the head is part of the specification. Besides that, placing at the top allows the page to render progressively which improves the user experience. The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is stuck viewing a blank white page. It prevents the flash of unstyled contents.
Placing <script>s just before </body>
<script>s block HTML parsing while they are being downloaded and executed. Downloading the scripts at the bottom will allow the HTML to be parsed and displayed to the user first.
An exception for positioning of <script>s at the bottom is when your script contains document.write(), but these days it's not a good practice to use document.write(). Also, placing <script>s at the bottom means that the browser cannot start downloading the scripts until the entire document is parsed. One possible workaround is to put <script> in the <head> and use the defer attribute.
- IndexedDB is javascript based object oriented database.
- IndexedDB is useful when we want to store large amount of data in a web applications.
- IndexedDB stores data as key-value pair.
- IndexedDB is an asynchronous API.
- IndexedDB is supported in most of browsers.