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 {})

ionic iOS App Publishing

ionic iOS Publishing:

If you want publish app in app store First, you need to enroll in Apple Developer Program. need to buy account with $99(yearly).

Connecting Xcode with your developer account :

After you receive your developer account, open Xcode on your Mac and go to Preferences -> Accounts and add your account to Xcode by clicking the + button on the lower left hand side, and follow the instructions:

Click on View Details when you click on view details button will get below popup

Now you can click on create button for ios distribution. then the create option will disappear and you can see below image.

Now you can click on download and then done button.
You can find the certificates in you keychain access in certificates. see below image.

                                   

All team members can create their own development certificate. Only a team agent or admin can create a distribution certificate.

Verifying Using Your Developer Account:

1. Sign in to developer.apple.com/account, and click Certificates, IDs & Profiles.
2. In the Certificates section of the sidebar, select Development or Production depending on the type of certificate you want to verify. The type and expiration date of the certificate should match the information that you view in Keychain Access.

Exporting and Importing Certificates and Profiles:

The export file, called a developer profile, contains the following team assets:

• Development certificates
• Distribution certificates
• Provisioning profiles

You can also export selected certificates to share with other team members. In this case, the export file contains just the certificates you select.

Exporting Your Developer Profile

Because the developer profile represents your credentials to sign and submit apps to the store, Xcode encrypts and password-protects the exported file.

To export your developer account assets

1. Choose Xcode > Preferences.
2. Click Accounts at the top of the window.
3.  Click the Action button (the gear icon to the right of the Delete button) in the lower-left corner, and choose Export Developer Accounts from the pop-up menu.

4. Enter a filename in the Save As field and a password in both the Password and Verify fields. The file is encrypted and password protected.

5. Click Save. The file is saved to the location you specified with a .developerprofile extension.
6. In the dialog that appears, click OK.

Exporting Selected Certificates

To export a few certificates and exclude the profiles, select the certificates in the details dialog.

To export selected certificates

1. Choose Xcode > Preferences. 

2. Click Accounts at the top of the window.

3. Select the team you want to view, and click View Details. 

4. Control-click the certificate you want to export in the Signing Identities table and choose Export from the pop-up menu.

5.Enter a filename in the Save As field and a password in both the Password and Verify fields.The file is encrypted and password protected.

6.Click Save.The file is saved to the location you specified with a .p12 extension.

Importing Your Developer Profile

You import your developer profile to restore missing private keys or when you want to switch to another Mac.

To import your developer account assets

1. Choose Xcode > Preferences. 
2. Click Accounts at the top of the window.
3. Click the Action button (the gear icon) in the lower-left corner, and choose Import Developer Accounts from the pop-up menu.

4. Locate and select the file containing your developer profile, and click Open. The file should have a .developerprofile extension.

5. Enter the password you used to encrypt the file, and click OK.
6.In the dialog that appears, click OK.
Now you can able to create development profile.

Angularjs Interview Questions

1. What is angular js?
Ans:  Angularjs is javascript framework, used for create  a single page application.

2. Why angularjs?
Ans: HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

3. What are the general features of angularjs
Ans:

• AngularJS is a JavaScript framework.
• AngularJS is a efficient framework that can create Rich Internet Applications.
• Client side  MVC frameWork. 
• Applications written in AngularJS are cross-browser compliant.
• SPA (Single Page Application)
• Supported for Web and mobiles.
• AngularJS is open source, completely free.
• AngularJS is a framework to build large scale Apps.
• High performance, and easyto-maintain web applications.

4. What are the core Features Angularjs ?

Ans: 

• Two way Data-binding: It is the automatic synchronization of data between model   and view 
• Scope : scope is an object that refers to the application model. Every controller has an associated scope object. Scopes provide APIs ($watch) to observe model mutations.
• Controller: These are JavaScript functions bound to a particular scope.
• Services: AngularJS comes with several built-in services such as $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app.
• Filters: These select a subset of items from an array and returns a new array.
• Directives: directives are markers on DOM elements such as elements, attributes, css, and more. These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives such as ngBind, ngModel, ngApp, ngShow,ngHide, ngInit   etc.. 
• Routing: It is concept of switching views.
• Templates: These are the rendered view with information from the controller and model. These can be a single file (such as index.html) or multiple views in one page using partials.
• MVC: Model View whatever ex: MVVM (Model-View-ViewModel)

5. Explain what is data binding in AngularJS ?

Automatic synchronization of data between the model and view components is referred as data binding in AngularJS.  There are two ways for data binding
two way binding {{varName}} or ng-bind="varName"
once binding {{::varName}} or ng-bind="::varName"

HTML Best Practices

1. Start with DOCTYPE
Bad :
<html>
   <body>
      -----
   </body>
</html>
Good:
<!DOCTYPE html>
<html>
   <body>
     -----
   </body>
</html>
It helps to read and render your markup correctly.

2. Write Standards-Compliant Markup:
don't use the id attributes multiple time
don't omit the closing tags.
close the html tags properly.
Bad :
<p id="intro">properly close  the <strong> Html </p> tags .</strong>
<p id="intro">don't  omit the closing tag.
Good:
<p class="intro">properly close  the <strong> Html </strong> tags </p>
<p class="intro">don't  omit the closing tag.</p>

3. Use proper semantic elements
Bad:
<span class="heading"><strong>Heading</span></strong>
<br><br>
 some paragraph
<br><br>
Good:
<h1>Heading</h1>
<p>some paragraph</p>

4. Specify MIME type
Bad:
<link href="/pdf" rel="alternate">
<link href="/css/style.css" rel="stylesheet">
Good:
<link href="/pdf" rel="alternate" type="application/pdf">
<link href="/css/style.css" rel="stylesheet" type="text/css">

5. Write character encoding
Bad:
<head>
  <title>HTML Best Practices</title>
</head>
Good:
<head>
  <meta charset="UTF-8">
  <title>HTML Best Practices</title>
</head>

6. Avoid div structural elements
Bad:
<div class="container">
  <div class="article">
    <div class="headline">Heading</div>
  </div>
</div>
Good:
<div class="container">
  <article>
    <h1>Heading</h1>
  </article>
</div>

7. Syntax Organized
Bad:
<Aside>
<h3>heading</h3>
<H5 HIDDEN='HIDDEN'>Sub heading</H5>
<img src=sample.png alt="company logo" />
<ul>
<li>list item1</li>
<li>list item2</li>
</ul>
</ASIDE>
Good:
<aside>
  <h3>heading</h3>
  <h5 hidden>Sub heading</h5>
  <img src="sample.png" alt="company logo">
  <ul>
    <li>list item1</li>
<li>list item2</li>
  </ul>
</aside>

8. Don't use Inline Styles
Bad:
<p style="color:red">sample paragraph</p>
Good:
<p class="intro">sample paragraph</p>
keep external css
.intro {
color:red;
}

9. Keep all external style sheets inside head tag
<head>
<title>My Favorites Kinds of Corn</title>
<link rel="stylesheet" type="text/css" media="screen" href="libstyles.css" />
<link rel="stylesheet" type="text/css" media="screen" href="custom.css" />
</head>
The primary benefit is that your pages will load faster.
putting stylesheets in the HEAD allows the page to render progressively
load lib css first.

• Use a CSS Reset

• Placing Javascript Files at the Bottom

• validate html in w3c 

10. Use meaning full title tags.

The <title> tag helps make a web page more meaningful and search-engine friendly. For example, the text inside the <title> tag appears in Google’s search engine results page, as well as in the user’s web browser bar and tabs.

Ex: <title>Welcome To Web Developer's Library</title>

11. Use Descriptive Meta Tags
Meta tags make your web page more meaningful for user agents like search engine spiders.
it will give the whole summary about your webpage or blog.

12. Minify CSS and JS.
we can decrease the size of the file. it means we are removing unnecessary space and comments.

13. Use right elements in right place.

14. Should use alt tag for image

15. Use modular IE fixes.
You should use conditional comments to target IE.
Ex: <!--[if IE 7]>
<link rel="stylesheet" href="css/ie-7.css" media="all">
<![endif]-->

16. Use lower case markup.

17. Validate your code.

18. Write well formatted code.

19. CSS  Exteranal files load in head tag.

20. JS External files load in body tag.

21. Choose good editor to develop the code.

22. For Beginners don't use CSS frame work better use css.

23. Use class instead of id for css, because you are losing benefits of class.

Stop writing For loops. Start using underscore

Underscore:

Underscore.js is a JavaScript library which provides utility functions for common programming tasks. It is comparable to features provided by Prototype.js and the Ruby language, but opts for a functional programming design instead of extending object prototypes.

Underscore consists of a little more than 100 functions, which fall under four main categories depending on the datatypes which they manipulate: functions for manipulating arrays, functions for manipulating objects, functions for manipulating both arrays and objects (the name of the category is "Collections") and functions for manipulating other functions. There are also two utility categories : "Utility" and "Chaining".

Example:
for example if we use javascript to achieve some functionality we need to write the  below loop
var i,result = [];
for(i = 0; i < myArray.length; i++) {
  var myObject = myArray[i];
  if(myObject.isAwesome === true) {
      result.push(myArray[i]);
  }
}

The same functionality i can achieve  with underscore.js without loop.

var result = _.filter(myArray, function(myObject) {
  return myObject.isAwesome === true;
})

Underscore Reference : (http://underscorejs.org/)