SUBSCRIBE TO UI STREET

HOW TO CHOOSE CLOUD SERVICE?

How To Choose a Cloud Service?

It is an undeniable truth that Information Technology has transformed the way business is done. The enticing features inherent to the cloud concept such as storage and processing of data in third party data centres, access to various services at convenient prices and adequate sharing of necessary resources etc. have ensured its widespread acceptance and dependence across industries.

Choosing a cloud computing service can be a simple process if one knows what he wants, knows what to expect and understands business requirements. Primarily, there are three types of cloud computing service providers that provide unique cloud services:

Software as a service (SaaS)-

These are service providers that offer software as services. For example: Google Docs, Microsoft Office 365 etc. SAAS eliminates the need to install and run applications on individual computers. Though a few plugins might be required, SAAS applications can be run directly from a web browser without any downloads or installations.

Platform as a service (PaaS)-

PaaS is primarily a framework for developers to build, develop and customize applications. The development, functioning and testing of applications made using PAAS is hassle free, fast and economic.

Infrastructure as a service (IaaS)-

Iaas provides a virtual environment for access to the computing resource. The clients subscribing to this form of cloud computing are given access to virtualised components so that they could build their own IT platforms.

All these services are cost efficient and time saving as they save clients the trouble of setting everything right from servers to hardware up from scratch. This means that the memory required by a website to respond to a sudden increase in end users can be doubled within minutes, given the efficiency and scalability of these services. Most of these services can be availed on a pay-per-hour basis that is exclusive to each server, role or process.

Deployment Models: Which one to choose?

There are choices to make when it comes to adopting a cloud solution. The deployment of different models depends on the needs of each company. Some of the most effective cloud services available are as follows:

Windows Azure:

Windows Azure, which functions on the PaaS platform and supplies as well as manages the operating system, is a great choice to opt for if a specialized OS is not required in the building of applications. This means that one can devote complete attention to the building, deployment and the management of cloud applications without having to worry about OS updates and patches. Primarily, Azure offers three main roles:

  • Web Role: This is an Internet Information Services 7 Windows Azure supplied OS that enables the development of applications using web technologies such as ASP.NET, PHP and Node.JS
  • Worker Role: This Windows Azure supplied OS enables the hosting of applications such as Apache, Tomcat amongst several others and runs arbitrary code.
  • Virtual Machine Code: By uploading a Windows Server 2008 R2 (Enterprise or Standard) VHD image, the customer supplies the OS in this service. This role, which is presently in Beta, renders the customer responsible for updating the OS. Applications can be built on Windows Azure using any language, tool or framework.Microsoft offers a three month free trial of Azure, which is adequate time enough for professionals to become well-versed with it. The service can be bought on a pay-as-you-go basis or a six month commitment for customized, reduced pricing.

Amazon’s AWS:

Amazon Web Services (AWS Cloud) from Amazon that offers raw infrastructure to enable the functioning of any OS a customer’s applications might require. Despite offering OS control, Amazon Elastic lacks automated patching. Import of supported virtual machine images, creation of instances based on numerous Linux and Windows OSs is made possible. The service can be bought on an hourly rate basis, a one-time fee basis which entails a discounted hourly rate with a commitment of one or three years and on the basis of bidding. Following are best compute services in Amazon Web Services :

  • Auto Scaling:Auto Scaling helps you maintain application availability and allows you to
    scale your Amazon EC2 capacity up or down automatically according to conditions you define.
  • Amazon RDS: This makes easier to set up, operate, and scale a relational database in the cloud. It provides cost-efficient, resizeable capacity while managing time-consuming database management tasks, freeing up to focus on applications.
  • Elastic Load Balancer:This automatically distributes incoming application traffic across multiple Amazon EC2 instances in the cloud.

OpenStack:

OpenStack is a popular and rapidly developing cloud platform for the creation of IaaS (infrastructure as a service) platforms. It is jointly founded by Rackspace and NASA and is supported by other multiple established vendors including HP, IBM, Rackspace, Dell and Red Hat. It is a platform for creating and managing large groups of virtual private servers in cloud computing environment.

It controls large pools of compute storage and networking resources throughout a datacenter all managed through a dashboard that gives administrators control while empowering users to provision resources through a web interface. Many have deployed Openstack clouds to achieve control,business agility and cost savings without the licensing fees and terms of proprietary software. Its massive industry support, AWS compatibility, security, and powerful dashboard has made it highly competitive.

Rackspace Cloud Hosting:

Is a service that provides raw infrastructure with control over the OS. Rackspace, unlike other Iaas providers, does not allow the upload of a customer’s own virtual machines. Rather, either the Windows or the Linux versions, which are supported by the company must be chosen.

Rackspace offers numerous server sizes and charges a per hour fee for each server.
Rackspace, unlike others, does not let one stop the per-hour charges by halting instances. If one wants to be in possession of an idled server without being charged for it, the back-up must be done for the image (Which again incurs charges from Rackspace) and the server must be deleted from the account. The server can be added back anytime later.

The company presently does not offer a free trial. However, an account can be created for free to gain access to the administrative portal which gives a better understanding of the service’s functioning. Charges would only be incurred if any instances are created or other resources are used.

SUBSCRIBE TO UI STREET

WEBRTC ON THE RISE

WEBRTC ON THE RISE
The Next Generation of Communication

Web RTC – An incredibly ground breaking technology that functions in symphony with other technologies and protocols.Voice and video chat between peers is the primary function of this protocol. The WebRTC is an initiative supported by industry stalwarts such as Google,Opera, Mozilla amongst others. Imagine if it was real easy to add video chat and peer-to-peer data sharing to your web application – without downloading any plugins! That’s the vision of WebRTC.

In order to be able to understand this concept and appreciate it better, let us start from the basics. Despite the potential for utilisation in several aspects, peer to peer communication remains the primary objective of WebRTC.

Let us consider an example, when we visit a website, we either click on a certain link or type in the web address. This triggers a request sent to the host server which combines all the scattered data/assets and then displays it in the form of a webpage. The simple logic here is that we send a request to a known and locatable server to get the response. This is the case of websites where requesting and receiving responses is involved. However, if I wish to have a video conference with a friend, the physics of the web change drastically. My friend’s computer is not a server so as to respond satisfactorily to requests. What is the solution then? The Session Initiation Protocol (SIP) comes to rescue and saves the day. This signalling protocol along with the aid of a Session Description Protocol (SDP) is utilized in WebRTC. The metadata relevant to multimedia is passed through the SDP protocol.

Through a series of interactions between the peers’ public facing IP addresses and signalling data channels, back end peer to peer negotiations and sessions are established. When two or more peers are connected to the same channel, communication and negotiation of session information is enabled.

To explain this further, the peer, that initiates, actually sends an offer with the aid of SIP and
SDP. The peer then awaits a response from any receivers that are connected to the channel. Once the answer is received, a complex technical procedure follows which results in the complete establishment and activation of the network socket session between peers. After the creation of data channel endpoints and local data streams, multimedia data is finally transmitted between the peers with the aid of the relevant communications technology used.

What’s the need for WebRTC?

WebRTC is an open source technology that provides Real-Time Communications (RTC)
capabilities to best serve real-time, plugin-free video, audio and data communication. There are many reasons why the need is real:

  • Though many use RTC already, there is a need to downloads, native apps or plugins such as Skype, Facebook (which uses Skype) and Google Hangouts (which use the Google Talk plugin).
  • Downloading, installing and updating plugins is usually more complex, and many people get confused to deploy, debug, troubleshoot, test and maintain.
  • Also, integration with other applications via simple, standardized web APIs or browsers is difficult and sometimes may require purchasing license.

All these reasons are a considerable problems to the goal of achieving real-time communication. Hence, WebRTC is the technology that was in place to make these all possible. Open source, free, standardized, built into web browsers and more efficient than existing technologies is what makes WebRTC prominent to choose.

How WebRTC is better than others?

The quality of WebRTC videos is clearly better than those of Flash. Enabling more effortless
and near flawless virtual conversations, WebRTC offers significant improvements in latency. By eliminating the reliance on downloading proprietary softwares and creating accounts, WebRTC solves the prevalent problem of real time communications incompatibilities. By facilitating browser-to-browser communication, WebRTC capitalizes on the trend of a browser behaving as an application.

Businesses using WebRTC:

Businesses that utilize the WebRTC are providing personalized solutions to customers across the world by enabling direct hassle-free video conferences between clients and service providers seamlessly. WebRTC is also foraying into the field of robotics where a robot’s “eye”, the camera, is integrated with this technology which streams live video to users effectively. Fluke, a mobile field service app leveraging the ShareLive video call feature with the aid of WebRTC, enables teams across different locations to stay on the same page so that what is seen by one is also seen by all. Chegg Tutors,are another in a line of WebRTC beneficiaries that are leveraging the concept to offer online expert tutorials to those who need help in a certain area of academics. By enabling video conferencing, file sharing and file uploading, Chegg Tutors has utilized the WebRTC and witnessed its manifold benefits.

These are only a few names that have been mentioned here. There are many more businesses that are resorting to WebRTC due to the ubiquitous positive effects. It can therefore be said with the utmost certainty that WebRTC is not just on the rise but on the path of transforming real time communications.

SUBSCRIBE TO UI STREET

WHICH TOOLS COULD BE USED TO DEBUG NODE.JS APPLICATIONS?

Which tools could be used to debug Node.js applications?

Many times when a complex situation arises. A good debugging tool will make our lives easy. Here some of the tools that you may consider to “npm install”

  1. node­inspector
  2. Joyent
  3. Node Webkit Agent
  4. NodeJS Plugin for WebStrom
  5. Cloud9 IDE (has built in debugger for Node)

 
 

SUBSCRIBE TO UI STREET

WHAT ARE THE ADVANTAGES AND DISADVANTAGES OF “USE STRICT” KEYWORD IN JS?

What are advantages and disadvantages of “Use Strict” keyword in JS?

“Use Strict” is a new feature introduced in ECMAScript 5. The purpose of “use strict” is to indicate that the code should be executed in “strict mode”. For example, with strict mode, you cannot use undeclared variables.

“use strict”;
display();
function display() {
info = 30; // This will also cause an error
Strict mode helps out in the following ways:
• It catches some common coding bloopers, throwing exceptions.
• It prevents, or throws errors, when relatively “unsafe” actions are taken (such as gaining access to the global object).
• It disables features that are confusing or poorly thought out.
Browser support:
• Internet Explorer from version 10.
• Firefox from version 4.
• Chrome from version 13.
• Safari from version 5.1.
• Opera from version 12.

SUBSCRIBE TO UI STREET

HOW DO JAVASCRIPT CLOSURES WORK?

How do JavaScript closures work?

Closure is related to Scope. Let’s assume that we have a function named ‘Outer’. Inside this function, let’s create a ‘inner’ function. Looks something like below:

function outer(){
function inner(){
}}

Let’s create a variable in outer function. Now, the inner function will have access to this outer function variable. The inner function is now a closure.

function outer(){
var info = “Hello”;
function inner(){
console.log(info); //Prints Hello – inner() fn has access to info var
}}

So, to put it in as a text book definition, A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain.The inner function shall have access to three different scope vars:

• It’s own variables
• Outer function variables
• Global variables
var greet = “Welcome”;
function outer(){
var info = “Hello”;
function inner(){
var name = “James”;
console.log(info); //Prints Hello – inner() fn has access to info var
console.log(name); //Prints James
console.log(greet); //Prints Welcome
}
}
P.S: The inner function shall have access to the outer function parameters as well
Dispelling the Myths of closure:
Myth 1. Closures are created only after an inner function has been returned
Myth 2. Closures only apply to inner functions

SUBSCRIBE TO UI STREET

FLOATING ELEMENTS – HOW TO USE THEM, TROUBLES WITH THEM, AND HOW TO WORK AROUND THE TROUBLES?

Floating elements – how to use them, troubles with them, and how to work around the troubles?

Float property is used for wrapping text around images, Floats can be used to create entire web layouts and are also helpful for layout in smaller instances.

The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables

One of the most common symptoms of float-heavy layouts is the “collapsing parent”. One of the most common ways to fix a collapsed parent element is to place an element with the clear property after our floated element. This will cause the parent to begin reflowing after the floated element. In IE 7, the Bottom Margin Bug is shown when 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.

SUBSCRIBE TO UI STREET

SUBSCRIBE TO UI STREET

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.

SUBSCRIBE TO UI STREET

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.

  1. Pages:
  3. 1
  4. ...
  5. 44
  6. 45
  7. 46
  8. 47
  9. 48
  10. ...
  11. 56