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/)

Hybrid Mobile App Frameworks

Ionic & Angular:

The beautiful, open source front-end SDK for developing hybrid mobile apps with HTML5.

Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps. Built with Sass and optimized for AngularJS

Advantages:

• Open-source and free (under a permissive MIT license)
• Built around Angular (Ember and Backbone not supported)
• iOS and Android support (currently only WebKit supported devices)
• Ionic is built to perform and behave great on the latest mobile devices. With minimal DOM manipulation, zero jQuery
• Heavily optimized for touch devices (Ionic is focused on building native/hybrid mobile apps rather than mobile websites.)
• Great command line utility support (Cordova users will recognize the benefit)
• Optional Sass support
• Supports Cordova, PhoneGap, or Trigger.io
• Over 500 custom designed font icons MIT licensed

Built on top of the popular AngularJS framework from Google, Ionic utilizes AngularJS to provide the application structure, while Ionic itself focuses on the user interface. In other words, we see a match between the power of Angular and the beauty of Ionic UI.

Ionic provides a set of Angular directives (custom HTML elements) for it’s own components, making it as easy to use the widgets as writing a line of HTML code. In addition to directives, Ionic uses Angular’s touch recognizers, view animation logic, HTML sanitation, and asynchronous communication.
Ionic reference : ( http://ionicframework.com/)

Mobile Angular UI :

Build HTML5 create interactive mobile apps with Bootstrap3 and Angular JS

Mobile Angular UI is a mobile UI framework just like Sencha Touch or jQuery Mobile. If you know Angular JS and Twitter Bootstrap you already know it!

Main features of Mobile AngularUI

• Bootstrap 3
• AngularJS
• Mobile Angular UI provides essential mobile components that are missing in Bootstrap 3: switches, overlays, sidebars, scrollable areas, absolute positioned top and bottom navbars that don't bounce on scroll.
• AngularJS modules such as angular-route, angular-touch and angular-animate
• Mobile Angular UI doesn’t have any jQuery dependencies, all you need are some AngularJS directives to create awesome mobile user experiences.
• FontAwesome Icons are included by default in place of Glyphicons.

Mobile Angular UI Reference : (http://mobileangularui.com/)

Cordova/Phonegap:

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript

Apache Cordova is an open-source mobile development framework.

These apps are natively installed on iOS, Android, Windows Phone, Blackberry, Tizen, Firefox OS, and others, all leveraging HTML for the user interface, CSS for layout and styling, and JavaScript for interactivity, dynamism, and interaction with native-OS functionality.

When using the Cordova APIs, an app can be built without any native code (Java, Objective-C, etc) from the app developer

And because these JavaScript APIs are consistent across multiple device platforms and built on web standards, the app should be portable to other device platforms with minimal to no changes.

a mobile developer and want to extend an application across more than one platform, without having to re-implement it with each platform's language and tool set.

a web developer and want to deploy a web app that's packaged for distribution in various app store portals

a mobile developer interested in mixing native application components with a WebView (special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.

Cordova reference Link : (https://cordova.apache.org/)

jQuery Mobile

jQuery Mobile is an HTML5-based user interface system designed to make responsive websites and apps

jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet and desktop devices.

jQuery Mobile is HTML5 markup based framework (not like Ionic Framework or Sencha Touch) inonic and scncha touch are built to work only on web kit browsers but jquery Mobile will run on pretty much anything as long it supports HTML5 standard.

jQuery Mobile offers CSS-based enhancements for common user interface elements(like classes, grid layout, responsive grid, theme)

Advantages:

• Most commonly use, which means a lot of 3rd party information
• Extremely easy to use, HTML5 bases, just like App Framework
• Good official documentation.
• Support every HTML5 browser you can think which makes it good for a desktop and mobile use
• Excellent theme support
• Large number of 3rd party plugins 

DisAdvantages:

•  JQuery mobile apps are slow on mobiles.
• Avarage UI
• Every JQuery mobile app appears as a duplicate of the other with no customization.
• JQuery Mobile does not offer “out of box” MVC support.
• JQuery mobile, when combined with other mobile frameworks, becomes even more time-consuming.

jQueryMobile reference : (http://api.jquerymobile.com/)