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.

jQuery to AngularJS Paradigm Switch

jQuery to AngularJS Paradigm Switch

It’s March 2015 and the AngularJS is hotter than ever. According to our statistics alone 60% of developers are adopting the Google brain child. Hiring rate in AngularJS has gone up to 42% in 2015, compared with 13% in 2012.  Now before you start your relationship with this beautiful client-side framework, you want to understand its peculiarities to see if you’d want to spend hours on end playing with it. Let’s say that you’re an active jQuery developer and you’d like to switch to AngularJS – you’re wondering what it’d be like.

Well, the first thing you have to have in mind is that AngularJS and jQuery are pretty much like apples and oranges. They do different things and adopt different ideologies. Technically speaking, jQuery is a library and AngularJS is a framework. In the community, there isn’t even a common word to describe them together- library, platform, framework? There is definitely a common ground here; it’s just not on the surface. Let’s dive deeper into this.

AngularJS provides you with a set of features to produce a web applications, while jQuery mainly gives the ease of DOM manipulation and AJAX. With jQuery you instruct the DOM about what needs to happen step by step. With AngularJS you describe what end result you’d like to see but not how to do it. And here comes first piece of advice : In AngularJS you have to start from the ground up with your architecture in mind. Start with your objective, then move to designing your application flow, followed by data design and then finalize by designing your view for presentation. Your kind of need to plan out the whole project, you can’t just add AngularJS on top. Basically, don’t augment jQuery with AngularJS. If you observe keenly, we planned out to create Data Objects (Models), Behavior and Flow of Application (Controller) and Presentation (View) – making us think in terms of MVC – that’s what AngularJS is mainly about.

(Note: You could rewrite/inject a jQuery plugin in AngularJS but don’t make it your primary solution or you’ll never master AngularJS.)

Ok, so now you know that you need to operate like a server-side developer in addition to thinking like a client-side developer. Now you have to think about how to divide your application into individual, testable components.

Angular allows you to separate/isolate the DOM manipulation in the directives(directives can be considered extensions of HTML – in case HTML doesn’t do something you need.

These directives tell the AngularJS HTML compiler how to behave and what to do (attaching event listeners and interactions). And that is a key differentiator of the framework. If you want, you can create your own custom directives that will contain all your view logic or DOM manipulation. In contrast, jQuery says very little about how you should organize your code. It is you who have to tell the DOM what to do. Let’s break it down:

In jQuery, we programmatically change the view by responding to events and then updating them. AngularJS, on the other hand, will automatically update (synchronize) your view so you don’t have to. The view here is the “official record” of view-based functionality. So outside of a directive (applied in the view) you never need change the DOM.

Let’s repeat again:
Only do DOM manipulation in a directive.

However, in AngularJS there is a separate model layer that is independent from the view that we can manage how we want. Your model represents(or holds) your data and is tied to a view via scopes. Views therefore are a projection of the model. You can create HTML templates for each view, using the directives.

EXAMPLE
Angular.module(“mySampleApp”,[])
.directive(“paymentform”,function(){
return{
restrict: “E”,
templateUrl: “partials/paymentForm.tmpl.html”
}
});

AngularJS also uses directives and controllers (your controller’s function is to initialize $scope) to remove certain behaviors from HTML.

EXAMPLE (CONTROLLERS)

Angular.module(“mySampleApp”,[])
.controller(“paymentCtrl”,function($scope, payFactoryModel){
$scope.title = “Payment Methods”;
payFactoryModel.initiatePayment();
}

When looking for a comprehensive all-in-one solution, many tech enthusiasts realized that AngularJS is the right choice between the two. Its two-way data binding, in-built directives and filters has allowed developers to build applications very rapidly and has made them think about Angular.js as a viable replacement to jQuery.

Responsive web design VS Mobile application

Responsive web design VS Mobile application

Responsive web design in Mobile ApplicationThe trend of accessing content on tablets and Smartphones has revolutionized many users to shift from desktop to mobile devices. Their digital way of accessing services and products has become inevitable. This has led developers to develop two approaches to mobile-ready web design: Responsive websites and Mobile websites.

A responsive website is a website that can adapt itself on various screens-sizes regardless of the devices that you use it. Responsive websites are usually optimized for viewing on mobile phones, tablets and desktops. Hence, the Responsive Web Design approach eliminates the need for developing a separate website for every mobile device platform. This method of designing is now preferred by web designers and developers as it covers a large number of users’ devices.

Mobile website is a website created significantly for small-screen devices. Similar to a regular website, mobile websites can also be accessed through various browsers. A mobile website generally consists of limited content and hence it is light-weighted and faster when compared to regular websites. If a browser is using a mobile phone to view a website, then the website automatically detects that the website has accessed on a mobile phone and then it redirects the browser to a separate URL to view the mobile specific website.

Mobile applications are the applications developed mainly for mobile device platforms such as iPhone, Android, Google, etc. Usually, mobile applications have been downloaded from app stores. There are a large number of mobile applications available for various platforms. As there are many mobile phones available with various operating systems, mobile applications are incredibly expensive to develop and maintain. If you want to provide users a mobile experience that engrosses speedy decisions and also selling and buying, then you need to have a separate mobile website.

If you want to constantly add something or update your website based on new trends, then having a single responsive web design is the best option. When thinking about the advantages of using responsive websites, first thing that comes to our mind is the download activities that are not required for responsive websites whereas the mobile applications require you to download them from app stores. Also, a responsive website doesn’t require you to update any information again and again. You just need to update the information on your main website that makes your work done.

Responsive websites provides you the compatibility across various platforms. It enables the content updates in the websites driven by Content Management Systems. The main disadvantage of using a responsive website is that the responsive website cannot be used without an internet connection while the mobile applications support this situation. Comparing the development cost, both responsive websites and mobile applications entail a strong budget. As a responsive website is entirely composed of complicated codes and technicalities, it requires a huge development cost. However, a mobile website requires a very low development charges. When considering the optimization process and SEO, responsive website takes up the priority than the mobile websites.

Optimize Mix and match typography in web design

Optimize Mix and Match Typography in Web Design

Mix and Match Typography in Web Design
Technology advancements has popularized a typography style in websites. The ability of selecting the appropriate font has broaden to the extreme to make websites attractive. Mix and Match typography has become the necessary features of web design for creating the best user experience. To improve the website look and feel in long run, selecting the right typographic plays the key role to leave viewers attractive. After years of working, many customers are focusing and pushing designers to go with mix and match typography style of usage in their websites.

With emergence of new trends popping up for better readability, there is raise in usage of usage of typography in web design. Most notably, retro typography on vintage style websites is quiet powerful across the web. This trend has been around for a while but now we are seeing this in full force for websites who want to set up their brand in bold and visually interesting ways. This Mix and Match typography relies on the designer’s ability to choose the right fonts to match not just the message, but the other typographic styles in use.

Some designers usually stick to one font to what they like, but it is good to mix and match fonts with the flow of website without effecting the overall look. Think of not to use too-small or too loopy fonts that are hard to read and look for long periods of time. Though there are several kinds of fonts available, look for the right mix and match typography that fits the mood and aesthetic of your design. Try out new things to achieve a desired effect for your website allowing viewers with maximum readability.