How is responsive design different from adaptive design?

How is responsive design different from adaptive design?

Responsive and Adaptive design are two different designs which are aimed at the optimization of the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, and so on.

The principle of flexibility is the sole basis for Responsive Design. The technique is to have a single fluid design based upon media queries, flexible grids. Responsive images also can be used to create a user experience that flexes and changes based on multiple factors. The main benefit is that each user will experience a consistent design. The onlydisadvantage is that, it has a slower load time.

Adaptive Design can also be termed as progressive enhancement. Instead of one flexible design, adaptive design will detect the device and other features, and then it will provide the appropriate layout based on a predefined set of viewport sizes and other characteristics. The disadvantage is thatit can result in a lack of consistency across platforms and devices, but the load time is faster.

How do you serve a page with content in multiple languages?

How do you serve a page with content in multiple languages?

To serve a page with content in multiple languages, there are four steps:

1.You must have translated/localized pages on the server for each language you intend to support.
2.Your server must recognize the browser’s language request.
3.You must carefully name the files for the localized pages, so the server has a systematic way of locating them.
4.You need a method for serving a generic page when you don’t have the requested language.

The browser writes a value for the Accept-Language request header field that it sends to the web server. You can set this value in Preferences (Mozilla) or Internet Options (Internet Explorer). If you choose multiple languages, they are sent to the server as a comma-delimited list in your preferred order.

Deciding which page to serve is called content negotiation. Tim Berners-Lee’s discussion of generic web pages and their language variants describes two different naming conventions, index.fr.html and index.html.fr. The Apache Web Server 2.0 compiles in content negotiation (the mod_negotiation module) by default. It postpends the two-letter language code to the URL and looks for files to serve. For example, if you set your browser preferred language to French and browse to http://www.openinternetlexicon.com, an Apache server would look for the file www.openinternetlexicon.com/index.html.fr.

Web servers do not normally handle multi-lingual requests automatically. The web server must have multiple language versions of a web page in order to serve them. It needs to know how the language-variant web pages are named. Besides naming them with a URI (index.fr.html), it may be possible to transmit the language variance as metadata in the HTTP header. This is the direction of the WebDAV protocol being developed by the IETF.

Describe what a “reset” CSS file does and how it’s useful?

Describe what a “reset” CSS file does and how it’s useful?

A set of CSS rules that will reset the styling of all HTML elements, is described as a “reset CSS”file.

In order to have pages with no styles appear more proper, all browsers havetheir own default stylesheet. Most of the browsers by default have links as blue and visited links as purple, they also give tables certain amount of border, also they apply variable font-sizes to h1, h2, h3, h4, h5, h6. and also certain amount of padding to almost all the elements in the page.

The aim of this reset file is ultimately to reduce the browser inconsistencies like default line heights, borders, color,font sizes of headings, paddings and margins.

HTML5 Vibrate APIS for Web and Mobile App Development

HTML5 Vibrate APIS for Web and Mobile App Development

Today all modern web applications are utilizing HTML5 APIs to create interactive websites and powerful gaming apps on mobiles. Up until now, vibration feature have been used only in mobile native apps to send some notifications. We’re going beyond that with vibration for the mobile-web application that can provide you feedback with tactile vibrations. Let’s check out this API in a little detail.

HTML5 Vibrate API, one of the exciting APIs that helps to programmatically access the hardware component of a mobile devices allowing it’s vibration capabilities to work. Imagine you came across a product that you would love to buy it for lesser price. Imagine you could be trying to do some online banking. As a developer, you can create a tactile vinration and let the user know that their session is going to timeout in a minute, and offer the user a quick and easy way to keep their session going without having to log in again.

Use ful Scenarios:

  • When a user tries to submit the form while the required field is left empty or the entered text does not match the requirement.
  • For creating the Notifications, alerts in Video games etc.
  • To engage mobile shoppers by prompting new offers

Usage:

This api is simply a method in the navigator object. Below is the simple code sample that uses vibrate() method which you can tell the device to vibrate for a given duration.

// Vibrate once for 1 second
navigator.vibrate(1000);
Vibration pattern can be customized by passing an array of numbers. In the below example the devices will vibrate for 1000 ms, wait 300 ms and vibrate again for 1000 ms.
// device will vibrate wait vibrate
navigator.vibrate([1000, 300, 1000]);

This alerts the device how long to vibrate pointing out how long the pauses between the vibrations should be. You can even halt the device from vibrating by just passing an integer value 0 or an empty array to the navigator.vibrate() method

Browser support:

Recent versions of Firefox and chrome browser supports this Vibration API property, but it supports other standard browsers by using moz and webkit prefixes respectively.

Vendor prefixes would be handy for compatibility:
// enable vibration support
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
if (navigator.vibrate) {
// vibration API supported
}

Full Stack Development is a Myth

Why full stack developer is a myth?

Full stack developer is one who specializes in everything from front-end to back-end; to a developer who has a general knowledge in all steps from concept to finished product; with a virtually unattainable skill set. Up until few years ago, full stack developers were enough to tackle the whole project from start to finish as there weren’t much emphasis on UI (Web & Mobile). But with new technologies emerging, pushing the limits of virtually all areas of software technologies from full stack developers is a myth.

Reasons why Fullstack is myth:

  • With enhanced browser features, today many sr. Management architects have been pushing developers to shift to client side solution to build rich web apps.
  • And also backend is wrapped in the form of SOA architecture using Rest services.
  • More and more single page apps are coming into existence.
  • High volume websites are looking towards node.js to handle their backend processes.

Handling these entire technology stacks has become virtually impossible to find a skilled person with every facet of project development. If you are not using one, you are either not building a cutting edge technology application or you are just missing out on something. Each facet of new emerging technology was so complex that a specialist was often required, sometimes one for different tiers (e.g. front-ends, databases, application servers, etc.)

Full stack developers what they lack:

Full Stack Development

Many Sr.Managers have the opinion that Full stack developer’s work toward a singular goal to either design or develop a site. They found to be always scary smart, and scary employable. Few companies in Los Angeles and other Bay area’s also found that not all full stack developers are aspiring programmers, some simply looking to add a skill. There are also the entrepreneurs who noticed them to broaden their experience to different contexts rather than deepening their experience in the same context learning more fundamental and transferable skills. At times, 60% time was spent to try out their best to make that project happen.

The Full-Stack Market:

The challenge most companies face is committing themselves to the desired outcome they like to have. As soon the project begins, obstacles and hurdles come up, many start-ups companies look for full stack developers and unfortunately they are ending up the project with less productivity. It might be a great way to cut costs, especially in the beginning stages of a business, but does not work at a corporate level. Hiring the right people for your start-up is essential, but conducting the process efficiently is just as important. Very large and profitable companies gather experts from each field in their teams with a view to create the best-ever-possible web products of the world.

UI developers focus on various design constraints such as different browsers, resolutions, and different interaction methods. They put together the principles of design to create rich and intuitive site. Whereas backend developers focus on running a site effectively , working with languages specific to the web like Java, PHP, ASP, Ruby, Python, etc. They concentrate much on programming concepts and concerns, like security and structure. All of differences are two very different jobs and roles. They have different viewpoints, which aren’t suited to critical projects. But rather can perform at reasonable level at all necessary layers to make the project development happen.

Experience Working with NODE.JS FrameWork

Experience Working with NODE.JS FrameWork

It’s all about the Now.

A server side platform. An open source runtime environment. Used by LinkedIn, Yahoo! and PayPal. A platform that helped drop page load times and, according to PayPal development team, reportedly doubled the number of requests it handled per second. Today Node Js. is brought out to be one of the most useful application tools that provides “event driven architecture, optimizes an application capability and is able to handle thousand of concurrent connections with minimal overhead on a single process.” It’s a hot new commodity that we all want to get our hands on, or do we?

Introducing…

It’s really hard to find a professional in Node js… It’s so new that it’s limitations and security holes haven’t yet been discovered. However, HR departments already demand more experience than the platform has existed. So what’s the fuss about?

NODE.JS FrameWork

Unlike backend languages, Node js is all about non-blocking I/O operation that helps in ‘push technology’. It’s getting popular among developers to have 2-way connectivity i.e., both client and server can initiate communication and exchange data. The upside is to process multiple parallel requests (connections) on a single-thread by using non-blocking I/O calls. Node assigns separate threads for each connections using fewer resources and is able to switch between them with less delay. That makes it incredibly attractive for many ultra large websites. Node.js brings it best when the application is heavy data-driven (ajax based), especially if the app is a Single Page App with many requests per second that demands quick JSON responses. Such setup helps in processing on client-side; community loves it for developing Real time apps like Stock Exchange or Twitter-esque sites.

Same goes for the Java frameworks that are coming out for Node js. One of the cool things about Express, for instance, is it runs as the web server itself. It’s really different from Php and others as it loads your whole application in memory and then it sits as the server waiting for http request to come through and then responds to it. It never touches your file system, it just sits in your memory – which is why it s so blazingly fast.

The challenge

Whereas Node js is great for short quick demands on the server/chats… it’s not so great for the web apps that require a lot of memory from your computer. It’s not as efficient for anything that involves relational database and not a good fit for CPU intense apps like Language Translator etc. CPU intensive computations dramatically slow down Node js responsiveness.

And the flip side of it’s non blocking I/O operation: Node.js may not be used to fetch/deliver large sized files like video/combined assets.

EXAMPLE

Finally, end-end JS/HTML implementation in a single programming language is a sweet deal due to the ability to easily port logic across. It’s faster, lighter, more scalable. Which also means that very few UI developers lean towards learning Node js.

At this point “to learn or not to learn” is the matter of whether you’re a Java/C++ developer and whether your application is right for the Node js implementation (read: heavy data-driven and not memory greedy.) Or at least for HR department sake – until now becomes then.

Scope Inheritance in Angular JS

Scope Inheritance in Angular JS

In Angular, a scope is associated to an element, while an element is not necessarily directly associated with a scope. It is important to have a solid understanding of prototypical inheritance and differentiate the types of scopes. A child scope normally (prototypically) inherits from its parent scope, but not always. Scope inheritance is also normally straightforward, until 2-way data binding is required (i.e., ng- model) in the child scope. In that case, the child scope gets its own property that hides/shadows the parent property of the same name.

There are four types of scopes. The first one has “normal prototypical scope inheritance”; ng- include, ng-switch, ng-controller – create new scopes and inherit prototypically ( note that, ng- controller, however, is considered bad form for two controllers to share information via “scope inheritance.”), directive with scope: true. If more than one directive (on the same DOM element) requests a new scope, only one new child scope is created. Since we have “normal” prototypal inheritance, you want to be wary of 2-way data binding to parent scope primitives, and child scope hiding/shadowing of parent scope properties.

The second type has “normal prototypal scope inheritance with a cop y/assignment” – ng-repeat. Each item/ iteration of ng-repeat creates a new child scope, and that new child scope always gets a new property. Changing the child scope property’s value does not change the array the parent scope references.

The third type of scope and the one exception to the rule of inheritance is an “isolate scope” (created by directive with scope: {…}. Note, also, that, by default, directives do not create new scopes i.e., the default is scope: false so there is no inheritance there. Default is not a good choice for writing directives that are intended as reusable components.) An “isolate scope” is not prototypical but ‘=’, ‘@’, and ‘&’ provide a mechanism to access parent scope properties, via attributes. The object hash is used to set up two-way binding (using ‘=’) or one-way binding (using ‘@’) between the parent scope and the isolate scope. There is also ‘&’ to bind to parent scope expressions. So, these all create local scope properties that are derived from the parent scope. This construct is often the best choice when creating a “reusable component” directive, since the directive cannot accidentally read or modify the parent scope.

Scope Inheritance in Angular JS

The last type is a “transcluded scope”- directive with transclude: true. The directive creates a new “transcluded” child scope, which prototypically inherits from the parent scope. The transcluded and the isolated scope are siblings – the $parent property of each scope references the same parent scope.

It’s important to remember that for all scopes (prototypal or not), Angular always tracks a parent- child relationship (i.e., a hierarchy), via properties $parent and $$ childHead and $$childTail.

In the case of a more complex scope inheritance, your workarounds should include three basic steps: 1) define objects in the parent for your mode, then reference a property of that object in the child: parentObj.someProp, 2) use $parent.parentScopeP roperty (where possible), and 3) define a function on the parent scope, and call it from the child.