VPS Hosting

A virtual private server (VPS) is a virtual machine sold as a service by an Internet hosting service. A VPS hosting environment mimics a dedicated server within a shared hosting environment. It is technically both shared hosting and dedicated hosting.

Why is VPS Hosting different than Shared and Dedicated?

With our dedicated servers, you rent an entire server. This is optimal for people that have very high traffic to their websites or need to setup their server in a very specific way. Not everyone needs to have a fully dedicated web server however. If you’re just getting started with your website, you can save quite a bit of money if you rent a small portion of the server. Shared hosting is when you share a portion of the server with other users rather than rent an entire server to yourself.

How does VPS Hosting Work?

A VPS runs its own copy of an operating system, and customers have superuser-level access to that operating system instance, so they can install almost any software that runs on that OS. In VPS hosting, every website is hosted on a virtual private server on a more powerful hardware. A physical machine is divided into several virtual compartments, and server software is setup on them separately, making each unit capable of functioning independently.

Though other websites may be hosted on the same physical system, yours would be the only website(s) hosted in the virtual compartment allocated – with independent server resources (CPU, RAM, disk space, etc) to you. Other websites on the machine won’t affect the performance of yours. That means you get exactly the same system resources you pay for.

It’s like each website resides in an isolated room with sufficient resources to live with.

You get complete root access to your server as if it were your dedicated server. But technically you are still on the same physical machine and sharing its CPU, RAM, disk storage, and bandwidth. VPS hosting gives you complete control over your server and almost the same benefits of the pricey dedicated server. This way, you can get a virtual dedicated server for a much cheaper price and get higher performance for your website than a shared server.

What are the benefits of VPS Hosting?

VPS hosting gives you the affordability of shared hosting while at the same time giving you more power and control like a dedicated server.

• Privacy - As you don’t share your OS with anyone else, there are no other websites on your server that potentially have access to your files.

• Customization - With a VPS Server, you have your own Operating System. This also means that you have your own instances of all server applications such as Apache, PHP, and MySQL. If you need to have any of these services customized, you can make changes to suit the server to your needs.

• Control - If you’re installing server applications that require a system restart, you can do so at any time. Even though technically you share a server with other VPS servers, your VPS server can be restarted without affecting anyone else.

• Dedicated Resources - On a VPS Server, you have dedicated amounts of RAM available to you at any time. Unlike shared hosting, there is no one else on your server that can use utilize all the RAM when you need it most!

The number of mobile users are increasing day by day and are greater than the number of desktop users. 80% of time spent on mobile devices is spent using apps, leading to apps becoming the dominant form of digital interaction. Developing both mobile website and mobile app for your business can prove to be a costly affair. You might have to choose one of the two channels, based on your budget and business goals. The choice between mobile apps and websites depends on their cost, usability, required features and the audience they serve. While both channels have their own pros and cons, mobile apps especially, can help you get higher conversions. Businesses have realised the need to effectively use mobile channels for attracting customers and these apps can offer greater personalisation and operational efficiency, along with other multiple exclusive features.

This makes for a strong reason to have mobile apps for reaching out to potential and existing customers. With mobile app it’s easy to treat users with personalised experience which can be curated for the users specific purposes to be actionable, and easily accessible in brief, spontaneous moments. Providing a more distinct engaging, efficient, and rich effective user experience, native apps have the advantage and capabilities which is a significant improvement over a responsive web site, thus saving the end-users time and frustration.

For example, if a student needs to visit a professor, he or she could visit a responsively-designed site, navigate to the directory, search for the professor, copy the phone number out to their phone to call the professor, return to the site to learn where the office is located, and copy that location into a mapping application, all from their phone.

 Alternately, the same student could open a native app, select the directory right from the home screen, tap to call from within the app, then tap on the office location pin and use the pathfinder to locate the office. All of this is accomplished quickly and efficiently within a consistent and immersive app experience, without having to switch between applications.

Users who encounter mobile web experiences that force them to tap, search, copy, and navigate too many times will often give up on their original task. The deep-linking capabilities of a native apps keep users focused, allowing them to complete their goal quickly and efficiently.

In fact, these days you’ll notice that many small businesses you interact with in your everyday life, have their own dedicated mobile app, be it the corner coffee shop or the beauty parlour downtown. These companies are ahead of the game when it comes to taking their marketing and productivity to the next level.

Either way you go, a mobile app is going to be a standard component of any business in the future. The choice you make today is going set the foundation for the future of your business. It’s up to you to choose whether you’d like to be one of the first..

AngularJS

AngularJS is a JavaScript framework.

AngularJS extends HTML with ng-directives

• The ng-app directive defines an AngularJS application.
• The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
• The ng-bind directive binds application data to the HTML view.
• The ng-repeat displays a list using the items in the array.

Here’s a Shopping App written using Angular JS

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.errortext = "";
        if (!$scope.addMe) {return;}
        if ($scope.products.indexOf($scope.addMe) == -1) {
            $scope.products.push($scope.addMe);
        } else {
            $scope.errortext = "The item is already in your shopping list.";
        }
    }
    $scope.removeItem = function (x) {
        $scope.errortext = "";
        $scope.products.splice(x, 1);
    }
});
</script>

<div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;">
  <header class="w3-container w3-light-grey w3-padding-16">
    <h3>My Shopping List</h3>
  </header>
  <ul class="w3-ul">
    <li ng-repeat="x in products" class="w3-padding-16"><span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li>
  </ul>
  <div class="w3-container w3-light-grey w3-padding-16">
    <div class="w3-row w3-margin-top">
      <div class="w3-col s10">
        <input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-border w3-padding">
      </div>
      <div class="w3-col s2">
        <button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button>
      </div>
    </div>
    <p class="w3-padding-left w3-text-red"></p>
  </div>
</div>

</body>
</html>

Features

• Two Way Data-Binding
• Templates
• MVC
• Dependency Injection
• Directives

Velocity is a cross-platform JavaScript library designed to simplify the client-side scripting of website animation. Velocity’s syntax is designed to make it easier to create complex animations for HTML and CSS elements. Velocity to be used for sophisticated animation programming that can be integrated into both web and mobile applications.

Library

<script src="velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>

Usage

// Animate an element's width to 100px and its left property to 200px
$element.velocity({ width: "100px", left: "200px" });
// Animate an element's width to 100px over a 1000ms duration after pausing for a 100s delay.
$element.velocity({ width: "100px" }, { duration: 1000, delay: 100 });

Chaining

//Creating a series of consecutive animation calls in Velocity consists of placing velocity() calls back-to-back on the target jQuery element object.
$element
    .velocity({ height: 300 }, { duration: 1000 })
    // Continue on to this animation once the previous one has completed
    .velocity({ top: 200 }, { duration: 600 })
   // And once more...
    .velocity({ opacity: 0 }, { duration: 200 });

Scrolling

// Scroll with a duration of 750ms
$element.velocity("scroll", { duration: 750 });

Reversal

// Reverse the previous animation; animate back to the element's original height using the previous duration
$element.velocity("reverse");

Features

• Browser window and element scrolling.
• Independence from the jQuery framework.
• Animation reversal and animation looping.
• RGB and hex color animation.
• CSS’s transform property animation.
• Pre-created animation effects via Velocity’s UI Pack.
• Physics-based motion via the spring easing type.
• Promises integration.
• Supports low-powered devices.

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world, as stated by the official website.

So, if you are a JavaScript enthusiast and want to try server side coding as well then here is the thing for you my friend.

Setting Up For short NodeJS is Javascript running outside the browser, in this case in the server. Installation To install it, you can go to NodeJS Website. But if you are using Mac and brew you can do:

brew install node

and in ubuntu use:

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

Once you have, to see if Node is installed, type node -v in Terminal. This should print the version number so you’ll see something like this v5.10.0

And if you are a windows user, you can simply download the Windows Installer directly from the official web site.

We’re all set to write our first server program! Wasn’t that easy :)

Hello Server

Okay so let’s start by opening your favourite text editor in my case I am using Sublime Text 3, and creating a new file with a “.js” extension. Ex: “getting-started.js”, and in here we write our very own server:

//Initialise http package built in to Node.js library to make http request.
var http = require('http');

//This simple code as states 'creates' server, returns a JSON object. 
var server = http.createServer( function (request, response) {
	response.writeHead(200, { 'content-type' : 'application/json'});
	response.end(JSON.stringify({hello: 'Server'}));
});

//We configure the server to listen to port: 3000
server.listen(3000);

console.log("Http server started");

Once we have the above code in our JavaScript file, we can simply run it from the terminal,

node getting-started.js

Here, “getting-started.js” is the name with which I have saved my the file. It should output something like this:

node getting-started.js Http server started

Now, if we just go to the browser and open the link we should be able to see a JSON object object is returned.

{"hello":"Server"}

Is it working? Cool, you have embarked upon the wonderful world of Node.js! Is NOT working? take a look at the code.

COLLECTION VIEWS

Collection views provided in swift programming language are helpful for easily creating grid like layouts. Collection views allows content to be displayed using arbitrary layouts.

Collection view employs a view recycling program i.e. as view moves off screen they are removed from view and placed in reuse queue. As new content is scrolled onscreen views are removed from queue and repurposed with new content.

Basic components:

• UICollectionView – the main view in which the content is displayed. It also has an in built scrolling property, provides both horizontal and vertical scrolling.
• UICollectionViewCell – these cells make up the content of the view and are added as subviews to the collection view. Cells can either be created programmatically or inside interface builder.

Supplementary views such as labels section headers and footers can also be added to the collection view.

Shared Preferences

Android provides many ways to store the data of the application. One of the way is Shared Preferences. Shared Preferences allows you to save the state of an activity or any important data in the form of key-value pairs and the data will persist even when the user closes the application.Each SharedPreferences file is managed by the framework and can be private or shared.

Android stores Shared Preferences settings as XML file in shared_prefs folder under

DATA/data/{application package} directory.

The DATA folder can be obtained by

callingEnvironment.getDataDirectory().

Shared Preferences is application specific i.e data is lost if the user uninstalls the application or if the user clears the application data through settings.

Step 1:To use shared preferences , you have to call a method getSharedPreferences() that returns a SharedPreference instance pointing to the file that contains the values of preferences.

SharedPreferences sharedPreferences = getSharedPreferences(MyPREFERENCES, Context.MODE_PRIVATE);
Ex : sharedPreferences = getSharedPreferences(MyPREFS, 0);

MY_PREFS : name of the file 0 : is the operating mode

The first parameter is the key and second parameter is the mode.

Step 2: We can save data to sharedpreferences using SharedPreferences.Editor class, for which we need to use edit method of the shared preference.

SharedPreferences.Editor editor = sharedPreferences.edit();
editor.putString("name", sName));
editor.putString("password", sPassword));

editor.commit();

Step 3:To retrive the values for corresponding keys you should use sharedpreferences.getString() method as shown below

if (sharedpreferences.contains("name")) {
  sharedPreferences.getString("name",””);
}
if (sharedpreferences.contains("password")) {
  sharedPreferences.getString("password",””);
}

Thus, using these get and put methods in shared preference we can perform this save and retrieval functionality.

As I am working on Collage of an images, so need to be comfortable with

• RecyclerView

• GridLayoutManager

RecyclerView: What it is?

The RecyclerView has been developed with extensibility in mind. It is new ViewGroup that is prepared to render any adapter-based view in an similar way. It is supossed to be the successor of ListView and GridView, and it can be found in the latest support-v7 version, and to know more.

GridLayoutManager:

GridLayoutManager will decide which part of screen the views are to be placed. It must be able to manage scrolling and recycling and to manage the views in different orders then we can use SpanSizeLookup which manages according to the spaces as shown in below code snippet:

GridLayoutManager mLayoutManager = new GridLayoutManager(this, 3);
mRecyclerView.setLayoutManager(mLayoutManager);

mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {
	if (position == 0 || position == 6) {
                return 3; // ITEMS AT POSITION 1 AND 6 OCCUPY 2 SPACES
            } else {
                return 1; // OTHER ITEMS OCCUPY ONLY A SINGLE SPACE
            }
        }
    });

you can change count of spaces on each position according to your needs. To know more

If any issues, you can check my github repository

ILImageEditor

While I was working on an image editing application I came across some very basic operations that every application performs on the image being edited. The code wasn’t difficult to write for it, but “Hey! who wants to do all that work”. So, I decide to write a simple framework that performs these operations for the developer.

ILImageEditor is a simple image editor that performs most basic yet widely performed operations on an image like rotation, mirroring of images, resizing and cropping.

Ok, so to start the tutorial we’ll just install the pod by adding the following line to our Podfile.

platform :ios, '8.0'

target 'MyProjectName' do
  use_frameworks!
  pod 'ILImageEditor'

end

If you haven’t initialised the pod yet then just type

pod init

and install the pod.

pod install

Now we’re all set to use the newly installed pod in our project.

Let’s start by import the framework in our class.

import ILImageEditor

In the class we initialise the instance of the ILImageEditor.

var editor = ILImageEditor()

Now, we can use this singleton to access the editing options provided by the installed framework.

Features

• Fix orientation.
• Rotate an image clockwise or anti-clockwise.
• Mirror an image along horizontal or vertical axis.
• Compress an image.
• Resize an image to make it smaller.
• Crop an image.

First let’s start by fixing the rotated image orientation that iOS devices usually have upon exporting or uploading the image.

let imageToFix = UIImage(named: "Sample")
let fixedImage = editor.fixImageOrientation(imageToFix)

Second, we can start performing operations on an image.

let image = UIImage(named: "Sample")
let finishedImage = editor.editImageWithOptions(image, withOptions: .rotateClockWise)

The above code takes an image and image operation as a parameter. So, as we can see we are asking ILImageEditor to rotate the image in a clock wise direction, and return the new image. The return image is new image generated with new orientation and not merely rotated and returned. It’s ready for export/upload.

Following are other options for “withOptions” that the above method provides functionality of are:

.rotateClockWise
.rotateAntiClockWise
.flipHorizontal
.flipVertical

And I hope the options are self explanatory.

Third, compress and resize an image to make it smaller in size or quality or both.

let image = UIImage(named: "Sample")
let finishedImage = editor.compressImageToSize(image, withSize: .half, compressionQualtity: 1.0)

Following are other options for “withSize” that resize the image to a smaller size with stated ratio:

.half
.oneThird
.oneFourth
.oneFifth

Fourth, crop an image to some rect.

let rect = CGRect(x: 0.0, y: 0.0, width: 50.0, height: 100.0)
let croppedImage = cropAnImageToRect(image, rectToCrop: rect)

The above function crops the image that lie in the provided rect and returns the cropped image.

Conclusion

Hope you enjoyed what you read, if have any suggestions or want to request a functionality in the pod then please get in touch with me on Twitter @muqtadir_ahmed, or if you find any bugs or crashes please fork my repository at Github and send raise an issue.

Bootstrap

Even in present day scenario, we have seen that most of the companies, organizations, enterprises and many startups use the key concept called “website” for marketing, advertising thier products and projects. Eventhough, it looks like an old concept, it has its own beauty and value that appeals to almost all the users. By using frameworks like Bootstrap we can construct some of the most awesome websites. The websites which are designed using Bootstrap gives quality touch which helps in building an instant relationship between the people and the company.

Bootstrap is the most popular front-end framework by twitter for developing responsive, mobile-first web sites. It is useful for faster and easier responsive Web development. It comprises 3 main techniques or tools like: HTML,CSS,Javascript.

What is Responsive Web design? Responsive web design is all about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

Why Use Bootstrap? Easy to use: Anybody with basic knowledge of HTML and CSS can start using Bootstrap. Responsive features: Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops. Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework.

Social Login

Social login, also known as social sign­in, is a form of single sign­on using existing login information from a social networking service such as Facebook, Twitter or Google+ to sign into a third party website instead of creating a new login account specifically for that website.

Login with facebook, Twitter and Google

‘Login with facebook’ redirects you towards facebook login page, on entering corect credentials,facebook generates an access token, this token is verified using facebook API’s. If valid, an access token is generated and the user is logged in to the application, also the user’s email address is fetched from the facebook account and registered.Next time the user gets an option to login with the registered email and set an password for the same using ‘forgot password link’. Similar steps are followed for login with Twitter and Google, in these cases Twitter and Google API’s are used.

Social Login helps in

• Targeted Content - Websites can obtain user’s profile information.
• Multiple Identities - Users can log in to websites with multiple social identities.
• Registration Data - Speed up the registration or sign­up process.