Monthly Archives: September 2015

SEARCH ENGINE OPTIMIZATION FOR SINGLE PAGE APPLICATIONS

Search Engine Optimization for Single Page Applications

In case you’re running an AJAX application (SPA) with content that you’d like to show up in search engine result, we have another procedure that, when actualized, can help Google (and conceivably other internet searchers) slither and record your content.

Verifiably, AJAX applications have been troublesome for web search tools to prepare on the grounds that AJAX site content is created dynamically by the program and in this manner not obvious to web crawlers. While there are existing systems for managing this issue, they include standard manual support to stay up with the latest.

Using HTML Snapshot:

With a specific end goal to make your AJAX application crawlable, your site needs to submit to another understanding. This assentation lays on the accompanying:

1. The site receives the AJAX slithering plan.

2. For each URL that has rapidly delivered substance, your server gives a HTML depiction, which is the substance a client (with a program) sees. Frequently, such URLs will be AJAX URLs, that is, URLs containing a hash piece, for instance www.mywebsite.com/index.html#key=value, where#key=value is the hash part. A HTML preview is all the substance that shows up on the page after the JavaScript has been executed.

3. The internet searcher files the HTML depiction and serves your unique AJAX URLs in list items.

With a specific end goal to make this work, the application must utilize a particular structure in the AJAX URLs (pretty URLs). The web crawler will briefly change these “pretty URLs” into “ugly URLs” and solicitation those from your server. (This solicitation of a “ugly URL” demonstrates the server to return the HTML snapshot of the page rather than the normal page. At the point when the web crawler has gotten the content for the altered ugly URL, it lists its contents, then shows the first pretty URL in the search items.

As it were, end clients will only see the pretty URL containing a hash part

Using Fallback Pages:

Fallback pages are HTML pages that show if the requesting resource does not parse JavaScript. They are typically static pages that try to replicate the handiness and content of the JavaScript web application by means of server-side rendered pages. These pages hold the same substance the JavaScript application would show, using standard indexable states for route.

Fallback pages give web crawlers the content they require for critical hunt points of arrival. These pages are not planned for clients unless they are utilizing a restricted or content program. Going above and beyond, this way to deal with the issue is regularly alluded to as “Progressive enhancement” – a full site where clients get as much usefulness as their framework can deal with. This is additionally the best work, obviously, as code should be composed for every level of customer usefulness over the whole site.

Cons: Building fallback pages requires a lot time, cost and incorporates advancing workload. Also, customers may never see the fallback pages or their URLs – they will see the URL with the hash sign – and these URLs won’t gather inbound associations or social signs at the URL level. This may be an issue, dependent upon whether the URLs are imperative regular purposes of landing.

Finally, as it is may not be possible to totally copy JavaScript handiness through static pages, this infers you are subsequently making an alternate, to particular site for key regular presentation pages, which again incorporates workload.

Using a pushState:

Counting pushState is truly immediate and indeed a strong segment of the conspicuous Single Page.

Application frameworks like the openly discharged structure Ember or Google’s Angular framework offers APIs to easily get to the handiness. Regardless, despite for web specialists inclining toward custom Javascript change, the as of late included History API, which is a bit of the HTML5 determination, gives an essential interface to push full URL updates to the project bar on the client side without using the limited open URL parts or driving a page fortify.

In any case, there is downside in using pushState execution. The best SEO executions of pushState are on areas that are starting now open without JavaScript, with the AJAX version fabricated “on top” as depicted already. PushState is then engaged to think seriously about the duplicating and sticking of associations and the different focal points of having URLs that reflect the customer experience. For example, purpose of landing destination URLs, for occasion. Along these lines, subsequently, pushState is not a response for the issue of AJAX areas and SEO autonomous from any other individual, yet it has any kind of effect. Executing pushState incorporates change and bolster workload. The variables and URLs referenced ought to be updated as the site progresses. So, what is the best arrangement?

Precompiling Javascript:

To make a Single Page Application (SPA) accessible to crawlers the best plan starting now is to serve HTML snapshots. A HTML portrayal is a perfect HTML representation of the page that the SPA would render in the system. Following are the approaches to manage and render the reviews on the server:

1. Render the page in a headless project: The server can turn up a headless system like PhantomJS and run the first SPA inside it to render the page that the crawler inquired. At the point when the rendering is done the made HTML page is served to the crawler. On one hand this strategy has the point of interest that the SPA itself needn’t trouble with extra handiness for making HTML sneak peaks. On the other hand, the establishment must be manufactured for that. In addition, that adds progression and testing costs to your endeavor.

2. Utilize a cloud organization: Quite a few cloud organizations grew around the first approach reducing the utilization effort down to one line of code which propels crawler sales to their establishment. If your project spending arrangement grants you to buy their services, this is undeniably the most smooth course of action.

3. Have an isomorphic code base: If JavaScript is used on the server likewise (e.g. node.js) you may decide to develop your application method of reasoning in an isomorphic way. By then the SPA can be executed on the server even without a headless system. Regardless of the way that this setup decision wouldn’t be made if it were just for SEO. If the code base is isomorphic, this strategy is more clear than the first and less costly than the second one.

WEBSOCKET IN WEB DEVELOPMENT WORLD

WebSocket in Web Development World

In a client-server environment, one of the client’s responsibility is to request data from server, and a server’s responsibility is to fulfill those requests which went unchallenged for many years. Around 2005, Ajax was introduced to communicate with server which is an asynchronous request. With this many people are going ahead to delve into the possibilities of making connections between a client and server bidirectional. Let’s dive deep into the WebSocket protocol and API and know how it works to create real-time web applications.

Latency in the process:

If we consider an email application, to check the new mail, client need to send a request to the server. However, in most cases there may not be any new mail available, yet the client has to always send new request and it causes huge load on the server. This process is referred as polling. To overcome this issue, long-polling technique has been introduced where the client will check if there is a new mail and the server will respond as soon as there is a mail available. Even though this technique is a bit better than polling, we still have to send a request, causing a lot of unnecessary traffic. The problem with all of these solutions is that every time we make an HTTP request a bunch of headers and cookie data are transferred to the server. This can add up to a reasonably large amount of data that needs to be transferred, which in turn increases latency.

Persistent low latency connection:

With WebSockets (WS), we can establish a persistent and low latency connection between server and client based on WS protocol. It provides a full-duplex connection stream. (Full-duplex connection is like a telephone conversation where both parties can speak and hear at the same time).

Talking about websockets:

Websockets in HTML5 is considered as a type of PUSH technology. Though it’s not yet standardized by W3C, the browsers (Chrome/Safari) started to include support for Web Sockets.

websockets in html5

How is it useful?

IT can reduce their infrastructure cost. Companies who built real time applications which required hundreds of servers to run their processes (based on http) and suddenly drop to only few servers (two/three servers) after they have been ported to WebSocket.

How it works?
1. The browser sends a request to the server, indicating that it wants to switch protocols from HTTP to WebSocket. (Via headers i.e. upgrade header)
2. If the server understands the WebSocket protocol, it agrees to the protocol switch through the Upgrade header.
3. At this point the HTTP connection breaks down and is replaced by the WebSocket connection over the same underlying TCP/IP connection.
a. The WebSocket connection uses the same ports as HTTP (80) and HTTPS (443), by default. Once established, WebSocket data frames can be sent back and forth between the client and the server in full-duplex mode

Now the technical part, Using WebSockets via Interface
WebSockets API is available to javascript and making a connection with WebSocket is simple. We just need to pass url to WebSocket constructor.

// url refers to server url, protocols refers to connections i.e., single server can have multiple interactions

WebSocket WebSocket(

in DOMString url,

in optional DOMString protocols

);

var newSocket = new webSocket(‘ws://newWebCon/api’,[‘connection1’,’connection2’]) ;

Once the connection has been set up, the open event will be fired on your WebSocket instance.

Checking for Errors:
By listening to on error event,we can handle errors

newSocket.onerror = function(error) {
console.log(‘error in connection is’, error);
};

Sending data:
Sending data should be in UTF-8 format.
Whenever a connection is open, onopen event will be fired and send() function will send the information.

newSocket.onopen = function(event){
var data ={

“meta”: “gray”,

“reason”: “white”,

“verbose”: “gray”,

“error”: “red”,

“noproblem”: “green”

}
newSocket.send(JSON.stringify(data));
}

Receive data:
Whenever an incoming message is there, onmessage event will be fired.
function(event){
message = JSON.parse(event.data);

}

Closing the connection:
To close the connection,a close function is available withWebSocket instance.
newSocket.close();

WebSockets signifies a big step in improving a new and revolutionary web based communications. Just as AJAX changed the game in the mid 2000s; having the ability to open bidirectional, low latency connections allows a whole new generation of real-time web applications.

CREATING A MOBILE DEVELOPMENT STRATEGY

Creating A Mobile Development Strategy

Make your strategy scalable by developing secure mobile applications.

The Smartphone industry has seen an outstanding surge in sales over the past few years and one which shows no signs of receding in the foreseeable future. with the increase in usage of mobile phones, the requirement of having an mobile-online presence is becoming inevitable for companies to reach their customers. But to make this investment efficient, companies need to create a mobile strategy that will get them into the mobile market quickly, and provide a scalable plan for the future.

According to the Recent Survey:
“64% of American adults now own a smartphone of some kind, up from 35% in the spring of 2011.15% of Americans ages 18-29 are heavily dependent on a smartphone for online access and the percentage is increasing fast.”- PEW Research Center

“The number of smartphone users worldwide will surpass 2 billion in 2016, representing over a quarter of the global population. This number is expected to grow to more than 2.56 billion people or a third of the world population.” - eMarketer

Most businesses are aware of the necessity of rendering their business available on mobile internet platforms. The hurdle is they do not know how to do that as they are used to a certain modus operandi that has been made almost extinct due to this transformation. Many often fail to provide the correct strategy which do not fulfill their mobile needs and demands. There are several factors that need to be kept in mind while designing a mobile strategy. Below are few pointers that would help formulate a strategy:

Establish mobile objectives:

For a mobile strategy to be successful, objectives should help achieve company’s overall business goals. So, define mobile objectives that are aligned to the business strategy to avoid the risk of leaving mobile initiatives as a mere ‘check-offs’.

Prioritizing platform:

Unlike desktop applications, mobile development has a complexity of development in multiple platforms. Today there are multiple Operating Systems and device types catering to the mobile needs. While there are popular devices like iPhone, which cannot be ignored while designing a platform based on its market share. There are many other devices in the market which can be strategically chosen based on type of business. For example, Restaurant, Travel and Automobile companies may opt for smart phone devices at the top of their priority list while publishers can go with iPad or Android tablet implementation next, as the larger screen lends itself a better user experience.

Launch with Feature rich vs Progressively adding features after launch:

Once an app is developed, testing it for bugs and other anomalies prior to the release is paramount for its success, and it’s very survival in the cut-throat competitive app market it would be introduced in. If an app that has amazing features which entice people on a large scale fails to function efficiently over sustained period of time, people will eventually get frustrated and quit using the app which would naturally result to a terrible ROI.

Advanced features and updates can later be rolled out consistently as upgrades but a compromise on efficient functioning in order to accommodate high-end features is a bargain that doesn’t reap profit. However, another perspective is that if the features are really too good to resist and a little lesser app efficiency would just mean taking a weak punch in the strong area, then the risk becomes worth taking.

mobile development strategy

Evaluating technical resources:

The tendency is to outsource a mobile development project which brings the advantage of giving focus to marketing. But in cases of developing same app for multiple devices by multiple teams, there is risk of losing control. Also, the outsourced team may consume some time in understanding your business. So, better approach would be to make use of in-house developers who has wealth of knowledge on your business, products and customers with a mixture of outsourced developers who has specialized technical skills in mobile development.

Choosing a scalable technology:

Weather we are planning to develop the application for a single device or multiple devices initially, it would be a good strategy to plan for an architecture that can be scaled to multiple devices with minimal efforts. Infact, mobility is not merely about the good design and development of an app. Rather its flexible mobile architecture design and implementation is most important part of the strategy.

A good scalable architecture should:
• Deliver the best user experience possible across all platforms.
• Enable firms in deployment of Mobile applications across several operating systems and platforms, in order to reuse as much code as possible.
• Leverage worth investing in web development.

Identify all potential use cases:

Developing a strategy for mobility is more of investing in Mobility by addressing key aspects such as Employee-facing initiatives, customer engagement, partners, connected devices, and so on. This impacts the growth of your business, leaving no stone unturned.

Use APIs to deliver a seamless user experience:

Application Programming Interfaces (APIs) encapsulate back-end information systems, allowing them to be leveraged by front-end mobile applications for entirely new uses. Creating APIs is one of the fundamental element of a mobile app strategy to get an enterprise’s massive amounts of data into a usable framework on a mobile device.

Also APIs open up enterprise resources to multi-platforms developers. Companies no longer have to develop their own mobile apps. Also APIs are now being increasingly used to make data and information available to mobile and web applications, connected devices, and enterprise applications.

Incorporate the customer perspective:

Mobility is huge and many business leaders believe that they know better ideas to attract customers. As developing innovative ideas is critical, many fail to identify valuable ideas leaving their targeted customers. So it is highly recommended to incorporate the discovery and design process from the start based on customer’s perspective.

Social Media integration:

It goes without saying that customer engagement on social media is a necessity for businesses in this age. This means that businesses will have to interact in a much more direct manner which is satisfactory to the customer. In order to be able to make the right decisions, it is imperative for businesses to know what customers need. Listening raptly to the hum on social media platforms gives businesses a perspective of what must be the next step and which would be the right direction for that step to be put in. This phenomenon, which is being deemed as Social Media Intelligence, is an extremely powerful asset if leveraged adequately and a grave mistake that costs dearly if ignored as unimportant.

Don’t miss innovative ideas:

Today, based on the immediate pressing needs many companies are focusing on low-hanging fruit – most easily achieved and cheap to deploy tasks. These short quick wins might help in reaping maximum value, but truly innovative and transformative concepts can often suffer as a consequence. Developing innovative solutions with Mobility Innovation Lab, can help gain a comprehensive understanding of the mobility systems of tomorrow.

Create an integrated roadmap:

Your final mobile roadmap shouldn’t just be about your mobile apps. It should integrate the associated IT, architecture, governance, security, and analytics dependencies.

WEB 3.0: CUSTOMIZATION AT ITS CONVENIENT BEST

Web 3.0: Customization at its convenient best

The web industry today is all about adaptation and improvisation. With pioneers and intrepid thinkers constituting its vanguard, many tech enthusiasts understand and value this concept.

As part of the evolution and a result of an insatiable desire for more better, more convenient and more easier, this industry is on the verge of writing a new chapter in the annals of technical history called, “Web 3.0”. But before we delve into what web 3.0 is all about, let us take a look at its predecessors.

Contrary to web 1.0 websites, where the activity of a user was confined to mere passive viewing of available content, web 2.0 facilitated interaction and collaboration between users on social media platforms. These users were allowed to generate content, create and become a part of virtual communities which enabled them to break free from the restraints of web 1.0 that had until then prevented them from doing what they were now able to do with web 2.0.

Social networking websites, blogs, wikis, and video sharing sites are a few examples of web 2.0.

Shopping experience with Web 2.0:

Imagine this; you’re a diehard NBA fan and an ardent LA Lakers supporter. You know LA Lakers is coming to your town this weekend and will play a game at the local stadium. You have a couple of friends who’ve been planning to join you to watch the game. The typical practise would be that you’d browse the stadium’s website and buy tickets. After the game, you all wanted to go eat at a cool place, so you want to search for a nice restaurant near the stadium that is open till late night. You suddenly remember that your favorite player would be signing autographs and you want buy a Cap and a LA LAkers T-shirt so as to be signed. But except the T-shirt, you need to buy the hat and a life size poster of player you want autographed. So you visit some more websites to sort out store(s) that sell the merchandise you’re looking for.

The bottom line is, you end up visiting numerous websites that takes a lot of your time and effort to zero in on what you exactly want.

Web 3.0 Mantra: The more you browse the web the more the web learns about you, your needs and your preferences.

Transforming the shopping experience with Web 3.0: The concept of Web 3.0 is based on two important aspects: Requirement and Users. Requirement is the reason why User is on the internet in the first place.

Now, in a Web 3.0 enabled browser, all you might have to do is type in a sentence like “I’m a Lakers fan and I want to watch this Friday’s game and after that dine out with four of my friends in a nice restaurant nearby.” Your request will be analysed by the Web 3.0 browser, it will then search the internet for all possible answers and then organize them in a way that suits your requirements best. Voila! As many experts have started calling it, you now have your very own “Personal Assistant”.

This means that with time, you would have the luxury of being less meticulous and specific yet get what you really want. With time, you might just ask “When’s the game?” your Web 3.0 browser would skim its records of your preferences, consider your current location and display a list of customized and accurate-almost-to-the-T suggestions of the cheapest available tickets, restaurants nearby, merchandise stores nearby and detailed information about any pre game or postgame Lakers team activity.

The contemporary web search engines look for webpages that contain the keywords you’ve entered. This means that the search engine hasn’t completely understood your request and is unsure if the webpages suggested are relevant to your topic of interest. A Web 3.0 search engine however, would not only consider the entered keywords but also understand your actual requirement. Web 3.0 would treat the whole internet as an enormous database of information readily available to answer any query.

web_3.0_customization

Web 4.0: The next wave

Even though Web 3.0 is still in theory and its nascent stage, it still hasn’t prevented those with a profound flair for innovation to think about what would be after Web 3.0. Welcome to the not-in-the-so-distant-future Web 4.0. Web 4.0 has been characterized by experts as the Web OS. With the entire web being one single operating system, it enables flow of information from any given point to another. This shall be a groundbreaking advance in technology that would set precedents in the field of connected data. A bond between two completely different sectors shall be so seamlessly forged and needs that we didn’t even know we had, would be fulfilled.

Watch out for your own web-based “Personal Assistant”! Keep Browsing!

HOW IS THE CURRENT JOB MARKET FOR UI DEVS?

How is the current job market for UI devs?

Know why many are turning to UI as their next career move.

User interface (UI) developers combine programming, psychology and creative design to craft intuitive controls for software and hardware. The UI developer’s mission is to create an interface that behaves as users would expect it to, facilitating a seamless and efficient user experience.

In the decade paving the way to 2020, a record number of organizations will dispatch new applications to pick up an upper hand in the undeniably cloud-based computerized world. Interest for skilled client interface designers will thrive in all programming-driven areas, including web, programming and portable application improvement.

According to several recruiters on indeed and dice, programmers who knows HTML5, CSS3, and the newer JavaScript frameworks like AngularJS and BackboneJS are in high demand with fortune 500 companies. In fact, the Bureau of Labor Statistics takes note of that web engineer work is anticipated to grow an incredible 20 percent from 2012 to 2022, quicker than the normal for every single other occupation.

percentage change in web developer employment

What do front-end developers make?

Talking about pay rates, front-end web engineers have a standout amongst the most bankable expertise sets at work advertise today. As indicated by Glassdoor, the national middle compensation for front-end engineers beat more than $75,000. In businesses where the opposition for top tech ability is wild, the middle compensation can move above $100,000.

Where the jobs are?

Area assumes a noteworthy part in what you’ll at last gain as a front-end engineer. Indeed, as indicated by information from Payscale, geographic area is the greatest variable influencing pay for front-end web engineers—much more so than experience.

The seven urban communities with the most elevated normal compensation for engineers are, from most to slightest dollars above normal: San Francisco, Dallas, New York, Los Angeles, Washington, D.C., Atlanta, and Chicago.

The most minimal? Charlotte, St. Louis, Minneapolis, and Denver.

According to Glassdoor and Payscale, national median salaries look something like this:

job market for ui developers

While front-end devs may not beat the outline regarding pay, their part accompanies some one of a kind difficulties and opportunities. They work in association with everybody recorded above, giving them a more extensive part in the advancement process, and additionally the opportunity to make significant systems administration associations that can prompt other profession opportunities not far off. Salaries for UI Developers and related positions by experience, medium and specialization:

• User Interface Designer: $85,000
• User Experience Designer: $86,000
• Front-End Web Developer: $90,000
• User Interface Developer: $91,000
• iOS User Interface Developer: $93,000
• Android User Interface Developer: $96,000
• Lead User Experience Designer: $99,000
• Principal User Interface Designer: $101,000
• Senior User Interface Developer: $111,000

The time-based compensation for client interface designers ranges from $25 to $94 every hour, contingent upon the singular’s experience, geographic area, expertise set and portfolio. The particularly shot nature of client interface improvement means a nice number of agreement positions with month to month pay. The month to month UI designer pay scale ranges from $8,600 to $9,700 every month. As obvious, builders have a tendency to make a higher per-unit wage than full-time representatives, in lieu of the strength and advantages of full-time work.

According to the U.S. Bureau of Labor Statistics, UI developer employment is expected to explode by 30% from 2010 to 2020, generating upwards of 275,000 new jobs in the U.S. alone. Candidates in this field will find job openings across all employment types; UI developers with a mercenary spirit can hire out their skills to the highest bidder on a contract or project basis, while those seeking the benefits and stability of a full-time position will find ample opportunities to go this route.

Brilliant organizations comprehend that the UI is bleeding edge of the web shopping knowledge, and will seek after talented and qualified engineers in like manner. Designers with involvement in the main e-business content administration frameworks (CMS, for example, Magneto, WordPress, osCommerce and OpenCart, will be all around situated to gain by this interest). Due to rapid growth of the Internet and mobile computing, and recent advances in software and hardware capabilities, UI development job openings outnumber the pool of qualified professionals, otherwise known as an IT skills gap.

Bottom line

Appeal, solid pay rates, and heaps of adaptability make front-end advancement an awesome decision for a vocation, whether you’re simply beginning your expert life or setting out on another section. In case you’re contemplating rolling out an improvement, be mindful that there’s a long way to go.

EXPLAIN THE BIND() METHOD IN JAVASCRIPT?

Explain the bind() method in JavaScript?

We use the Bind () method primarily to call a function with the this value set explicitly. It other words, bind () allows us to easily set which specific object will be bound to this when a function or method is invoked.

The this value in methods and functions must be set explicitly when you need a specific object bound to the function’s this value.

The need for bind usually occurs when we use the this keyword in a method and we call that method from a receiver object; in such cases, sometimes this is not bound to the object that we expect it to be bound to, resulting in errors in our applications.

WHEN DO WE USE $APPLY() IN ANGULAR? IS IT A GOOD PRACTICE TO USE?

When do we use $apply() in Angular? Is it a good practice to use?

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches

We use it very rarely. AngularJS actually calls almost all of your code within an $apply call. travel Events like ng-click, controller initialization, $http callbacks are all wrapped in $scope.$apply(). So you don’t need to call it yourself, in fact you can’t. Calling $apply inside $apply will throw an error.

HOW DO JAVASCRIPT CLOSURES WORK?

How do JavaScript closures work?

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly. You create a closure by adding a function inside another function.

Closures have access to the outer function’s variable even after the outer function returns.

Closures store references to the outer function’s variables.

Closures have access to the updated values of the outer function’s variables, they can also lead to bugs when the outer function’s variable changes with a for loop. To fix this side effect (bug) in closures, you can use an Immediately Invoked Function Expression (IIFE).

IN CSS, WHAT DOES IT MEAN BY FLOATING ELEMENTS – HOW TO USE THEM, TROUBLES WITH THEM, AND HOW TO WORK AROUND THE TROUBLES?

In CSS, what does it mean by Floating elements – how to use them, troubles with them, and how to work around the troubles?

Float property can be used to align an entire block element to the left or right such that other content flows around it.

For instance, Float is used for wrapping text around images or create table-like columns in an HTML layout without the use of tables.

The most common problems of float-heavy layouts are:

The “collapsing parent”.

(a) Fix 1: one of the most common ways to fix a collapsed parent element is to place an element with the clear property after the floated element. This will cause the parent to begin reflowing after the floated element.

(b) Fix 2: There is a method that allows a parent element to clear itself of any floated elements inside it. It uses a CSS property called overflow with a value of hidden. Note that the overflow property was not intended for this type of use, and could cause some issues such as hiding content or causing unwanted scrollbars to appear.

In IE 7, the Bottom Margin Bug is when if a floated parent has floated children inside it, bottom margin on those children is ignored by the parent. Quick fix:using bottom padding on the parent instead.