PIXI JS.

1. Pixi js is an extremely fast 2D sprite rendering engine.
2. It is an open source.
3. Well tested API.
4. Using pixijs we can setup mouse events in sprite image.
5. Pixi is general purpose not for game engine.
6. Starting project in pixi is simple.

Starting Project: create a rectangle to display area and also create special container object called as "stage".
a. Create a rendered object. (Ex: var render = PIXI.autoDetectRenderer(width, height))
b. Add canvas to the html document.(document.body.appendChild(render,view))
c. Create container Object.(var stage = new PIXI.container().)
e. Tell render to the render stage.(render.render(stage))

Iframe

HTML inline frame element, which embeds independent html document into current document, it means display website with in the website.
Ex: <iframe src="http://bujjibau.blogspot.in/" width="300"  height="300"></iframe>

Advantages Of iframe:
1. Embedding third party media
2. Embedding your own media.
3. Embedding code samples
4. Embedding third party applets (like payment forms)
5. Displays the embedded video clearly.

Create Outside links and that loads in iframe:
<div><a href="http://bujjibau.blogspot.in/" target="internal">Developers blog</a></div>
<iframe src="http://www.xyz.com" style="width: 90%; height: 300px" name="internal"></iframe>
By giving the <iframe> a "name" attribute, and using the "target" attribute of the <a> tag to specify that name, you get a link that loads in the <iframe>.
Exp: Initially xyz.com loads in iframe when we click on developers blog anchor tag will load that developers blog in iframe.

Note: To deal with browsers, the browser do not support iframe add a text between the iframe opening and ending tag.

Attributes:
1. It will support all global attributes.
2. allowfullscreen (this attribute can set to true the screen allowed to placed into full screen by calling element.requestFullScreen() if this is not set the element can not placed into full screen mode and also you can call browser specific methods
 Ex: a. element.mozRequestFullScreen() for gecko 9.0 and latter.
        b. element.webkitRequestFullScreen() for chrome17 and latter. )
3. height set with pixels.
4. width set with pixels.
5. Sandbox (If specified as an empty string, this attribute enables extra restrictions on the content that can appear in the iframe. The value of the attribute can either be an empty string (all the restrictions are applied)).

Sandbox keywords: It will support only HTML5.
a. allow-forms (it allows to submit the forms if this key work not used this will not work)
    Ex:<iframe src="demo_iframe_sandbox_form.html" sandbox="allow-forms"></iframe>
You can apply same above example to below points also
b. allow-modals
c. allow-allow-orientation-lock
d. allow-pointer-lock
e. allow-popups
f. allow-popups-to-escape-sandbox
g. allow-presentation
h. allow-same-origin
i. allow-scripts
j. allow-top-navigation.

You want to give more than one keyword see below example
Ex: <iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="https://platform.twitter.com/widgets/tweet_button.html" style="border: 0; width:130px; height:20px;"></iframe>

CSS Best Practices

1.  Make it readable.
2. Use reset CSS it eliminates browser inconsistencies.
3. Organize the style sheet with top down structure
Ex: Header CSS
       Content CSS
        Footer CSS.
4. Combine the elements or grouping CSS (Ex: h1, .class1, .class2 {font-size:12px;})
5.  Use multiple class (Ex: class="class1 class2" )
7. Use shorthand notations (Ex: .class1{padding: 10px 10px 5px 3px;})
8. Use comments for sections for better readability.
Ex:
 /* header css */
     header css here.
 /*footer css*/
   footer css.
9.  Alphabetize your properties.
Ex: .class1 {
color: red;
float: right;
margin: 5px;
padding:10px;
width: 200px;
}
10. Use CSS Compressors.
11. Use generic classes for reuse.
12. Don't use -ve margins.
13. Validate CSS.
14. Remove extra selectors.
15. Use multiple style sheets, for easy debugging and better understanding.
16. Use meaning full class names (Ex: .user-form {})