HTML

html content help to improve the coding

Wednesday, 23 August 2017

Adobe CQ5 Interview Questions and Answers

What is AEM?

A: Adobe Experience Manager (AEM), is a java based content management system that is offered from Adobe. It was previously called Day CQ5, but was acquired from Adobe in 2010. AEM is based on a content repository and uses the JCR to access the content in the repository. AEM uses the Apache Sling framework to map request url to the corresponding node in the content repository. It also uses the OSGI framework to internally allow modular application development.

Q: What are the advantages of AEM over another CMS?

A: One big advantage of AEM over another CMS is how it integrates with other products from Adobe and with the Adobe Marketing Cloud. AEM comes built in with features like workflows to control content in the CMS, the use of search queries to find anything you are looking for, setting up social collaboration, tagging content, and a way to manage your digital content.


AEM also includes a way to manage mobile applications, mobile websites, e-commerce, and marketing campaign management. 
 
 Q. Difference between CQ5.4 and CQ5.5?
 
A:
Versions of CQ before 5.5 were based on a servlet container (CQSE, by default, though others could be used) running with multiple webapps: One for the CRX content repository and one for the OSGi container which itself contained Sling and AEM. The Sling webapp was bound to the root and handled most of the request processing.
With CQ 5.5 and AEM, the OSGi container is positioned at the root and the OSGi HTTP service, backed by Sling acting as the sole request handling end point. The CRX content repository is now just another OSGi service, alongside the various services that comprise the rest of the AEM unctionality. These changes do not affect applications built on top of AEM or Sling.
The new architecture means that the quickstart jar installation of AEM can no longer support other web applications running alongside AEM. However, the war version of AEM is designed to be deployed in an application server, where additional web applications can be deployed alongside it.
Added three new connectors to key adobe products – Creative Suite, Scene7, Search&Promote
Authors can directly work on mobile apps.
Partnered with hybris software to add some nice eCommerce capabilities.
Added Undo(Ctrl+z) and Redo(Ctrl+y) functionalities.
 
 

Q: What is the technology stack that CQ5 is based on?

A: The CQ5 technology stack is based on three technologies. These technologies are: Apache Sling, OSGI (Apache Felix), and the Java Content Repository (JCR).

Apache Sling is a RESTful framework that is used to access a jcr over http protocol. It will then map that request url to the node in the jcr.

OSGI is a framework that is used for modular application development using Java. Each module, which is called a bundle, can be stopped and started independently during runtime.

The Java Content Repository uses the JSR-170 API to access the content repository by using Java independently of the physical implementation. CQ5 uses its own implementation of the jcr called CRX.

Q: What is the role of the dispatcher?

A: The dispatcher is AEM’s caching and/or load balancing tool. By using the dispatcher it can also help protect your AEM server from attack since it will be using cached pages. The goal of the dispatcher is to cache as much content as possible, so it does not need to access the layout engine.

Load balancing is the practice of distributing computational load of the website across several instances of AEM.

The benefits of using the dispatcher as a load balancing tool is so that you gain increased processing power since the dispatcher shares document requests between several instances of AEM, and to have increased fail-safe coverage. This is accomplished by if the dispatcher does not receive responses from an instance, it will automatically relay the request to another instance.
 
Q. Difference between Design Dialog and Edit Dialog
 
A:
Both dialog and design dialog defines the UI interface for allowing the user to configure the component.
Design Dialog of a component can be seen/edited in design mode of the page. Design dialog is at template level so all the page of the template will share same design dialog and it is stored under /etc/designs folder.
Where as Dialog of a component is at page level so each component instance will have its own dialog and information entered in dialog will be stored under /content folder.

Q. What is the purpose of clientlibs?
 
A:
It is used for adding site specific js and css files to the page and also thridparty js and css files.

Q. What is Dependency/Dependencies  in client library?
 
A:
It is a list of other client library categories on which this library folder depends. For example, given two cq:ClientLibraryFolder nodes F and G, if a file in F requires another file in G in order to function properly, then at least one of the categories of G should be among the dependencies of F.

Q. Difference between package and bundle?
 
A: Package: A Package is a zip file that contains the content in the form of a file-system serialization (called “vault” serialization) that displays the content from the repository as an easy-to-use-and-edit representation of files and folders. Packages can include content and project-related data.
Bundle: Bundle is a tightly coupled, dynamically loadable collection of classes, jars, and configuration files that explicitly declare their external dependencies (if any).

Q. Role of Dispatcher in CQ5?
 
A:
Dispatcher is CQ5 caching and/or load balancing tool. Dispatcher also helps to protect your AEM server from attack. It cache responses from publish instance, to increase the responsiveness and security of your externally facing published website.

Q. What is difference between live copy and language copy?

A:
Live Copy – Copy created from existing site or blue print is called Live Copy. Rollout configurations for this Live Copy can be configured from tools console.
Language Copy – Site which is created using language tool is called Language copy. Basically to create a site for different language.

 

Tuesday, 19 July 2016

New JavaScript APIs in HTML5

HTML5 changes the web landscape considerably, because the specification mandates support for JavaScript APIs which can be used to build web pages which can act as web applications.
In this article, we will do a quick rundown of all the JavaScript APIs referenced in HTML5 specification.
Contacts - The HTML5 specification mentions that the Contacts API allows to have a common contacts repository in the browser which can be access by any web application.
  • Selection - The selection API supports selecting items in DOM (supports CSS3 type of selectors), to be used along with JQUERY.
  • Offline apps - This API allows marking pages to be available in Offline mode. This is useful if a resource requires dynamic processing.
  • Indexed database - This API is meant for a database of records holding simple values (including hierarchical objects). Every record has a key and a value. An indexed database is supposed to be implemented using b-trees. Web SQL DB is no longer being pursued as part of HTML5 specification.
  • Web workers - This API is meant to be invoked by web application to spawn background workers to execute scripts which run in parallel to UI page. The concept of web works is similar to worker threads which get spawned for tasks which need to invoked separate from the UI thread.
  • Web storage - This specification defines an API for persistent data storage of key-value pair data in Web clients.
  • Web sockets - This API used for persisting data storage of data in a key-value pair format for Web clients.
  • Server-Sent Events - This API is used for opening an HTTP connection to receive push notifications from a server. These events are received as DOM events. This API is supposed to be used with Push SMS.
  • XMLHttpRequest2 - This API is used to provide scripted client functionality to transfer data between a server and a client.
  • Geolocation - This API is used to provide web applications with scripted access to geographical location information of the hosting device.
  • Canvas 2D Context - This API provides objects, methods and properties to draw and manipulate graphics on a canvas drawing surface.
  • HTML Microdata - This API is used to annotate content with specific machine-readable labels, e.g. to allow generic scripts to provide services that are customized to a page. Microdata allows nested groups of name-value pairs to be added to documents.
  • Media Capture - This API is used to facilitate user access to a device's media capture mechanism (camera, microphone, file upload control, etc.). This only coves a subset of media capture functionality of the web platform.
  • Web Messaging - This API is used for communications between browsing contexts in HTML documents.
  • Forms - The Forms API can be used with the new data types supported with HTML5.
  • File API - The File APIs are used by the browser to provide secure access to the file system.
  • Css3 Less & Sass

     Css3 Less & Sass

    Write less do more

    A program that takes one type of data and converts it to another type of data.
    Popular CSS preprocessor languages include LESS and SASS
    Following reasons should consider using a CSS preprocessor
    It adds the stuff that should have been in CSS in the first place
    It will make your CSS dry
    It will save you time
    It will make your code easier to maintain
    It will make your CSS more organized
    It's easy to set up
    It will make your websites prettier
    It's easier to write than you think
    Frameworks that supercharge your CSS
     
     
    Functions
    Less provides a variety of functions which transform colors, manipulate strings and do maths.
    @base: #f04615;
    @width: 0.5;
    .class {
      width: percentage(@width); // returns `50%`
      color: saturate(@base, 5%);
      background-color: spin(lighten(@base, 25%), 8);
    }
    Nested rules
    oYou can also bundle pseudo-selectors with your mixins using this method.
    o& represents the current selector parent
    o
    .clearfix {
      display: block;
      zoom: 1;
      &:after {
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }
    Media query bubbling and nested media queries
    Media queries can be nested in the same way as selectors.
    Selectors are copied into the body of the media query:

    Importing
    oimport a .less file, and all the variables in it will be available.
    oThe extension is optionally specified for .less files.
      @import "library";  // library.less
      @import "typo.css";
    Operations
    oAny number, color or variable can be operated on.
    oLess understands the difference between colors and units.
     
      @base: 5%;
      @filler: @base * 2;
      @other: @base + @filler;
      color: #888 / 4;
      background-color: @base-color + #111;
      height: 100% / 2 + @filler;
    Importing
    oimport a .less file, and all the variables in it will be available.
    oThe extension is optionally specified for .less files.
      @import "library";  // library.less
      @import "typo.css";
    Operations
    oAny number, color or variable can be operated on.
    oLess understands the difference between colors and units.
     
      @base: 5%;
      @filler: @base * 2;
      @other: @base + @filler;
      color: #888 / 4;
      background-color: @base-color + #111;
      height: 100% / 2 + @filler;
    Sass is
    oa CSS preprocessor
    oan extension of CSS
    oadds power and elegance to the basic language.
    Allows to use 
    oVariables
    oNnested rules
    oMixins
    oInline imports
    oWith a fully CSS-compatible syntax
    Helps to
    oKeep large style-sheets well-organized
    oGet small style-sheets up and running quickly
     
    Installation
    > Install Ruby
    > gem install sass
    > sass style.scss appstyle.css
    > sass --watch style.scss appstyle.css