Why we moved from OpenShift to Google Cloud

The good old days

When OpenShift was in its version 1 it was great from customer’s point of view with low budget. OpenShift v1 had free offers to deploy app and add a custom domain to it. There was no SSL support but it could be handled via CloudFlare solution, making overall solution a great one.

Then there comes OpenShift v2

RedHat then launched OpenShift v2 and added a restriction that gears will be shutdown after certain period of inactivity and also removed the support for custom domain.

That was the time that we had to move to some other cloud platform that could support our apps with low resources and without investing anything.

Since all good things in life are free.

Google Cloud to the rescue

So we came across Google Cloud platform offering and we had $300 credit in free trial for next 6 months. That was more than enough for us to start with. And in fact they have micro virtual machine instances that are free for life with 30gb storage. That is more than enough for small apps to run for free that are under experiments or don’t have any monetization plans.

So, we migrated several of our apps from OpenShift to Google Cloud and started leveraging free credits provided by Google.

Just this week we consumed all our credit and our trial expired. Our virtual machine instances were shutdown, but it didn’t take long that we enabled billing on our project and downgraded our instances to micro ones which is free. That gave us such a relief that our apps are still running although with low resources but it is fine as that are not our revenue generating apps and are just experiments.

Event handling with custom components in Vue.js

If you’ve been working with Vue.js lately and developing custom components to build your apps you might came across how to communicate from child component to parent. There are couple scenarios here.

Immediate parent child components

If you want immediate parent child components to communicate then child event can fire an event and parent can listen to it. To do this you can do something like this.

index.html

Vue.component('v-parent', {
 template: `
 
`, methods: { handleEvent() { alert('parent caught the event'); } } }); Vue.component('v-child', { template: `
Fire Event
` }); new Vue({ el: '#app' });

app.js

Non Parent-child components

If two different components want to communicate or if the component listening to the other component’s event is not a direct parent (like grandparent or even above in the hierarchy) then Vue provides the bus concept. I have created a fiddle on JSFiddle that you can see running here.

AngularJS vs BackboneJS vs EmberJS? What I decided and why?

I was researching for Javascript frameworks/libraries to use in my next project. I found three promising JS frameworks.

  • Angular.js
  • Backbone.js
  • Ember.js

What I was looking for that framework should be easy to learn and should be integrated in the project easily. Keeping in that mind I searched a little bit about each and went through some reviews. What I concluded I’ll just say it in one line for each.

Backbone.js – You need to write lots of boilerplate code to get to working.

Ember.js – It has a steep learning curve.

Anguler.js – Just in between. Offers more than backbone and easier to learn than ember.

So, that was it! I picked Angular for my next project since it was easier to learn and you don’t have to do a lot to get it working in your project. Since, the project was new and deadline was short so this was the requirement. So, I decided to go with Angular and I’m glad I made the right decision.

What’s your call? What you picked and why? I would like to listen in comments.

Create your first real-time AngularJS application

In my previous article I talked about creating real-time PHP application. That was on the server side and I demonstrated a very very basic client to connect with it. Let’s take that to next step and create a Javascript client with AngularJS.

Code

angular-client.html


<html>
 <head>
 css/bootstrap.min.css" rel="stylesheet">
 
 
 
 <script src="angular-client.js"></script>
<style>
 body { margin-top: 10px; }
 input.message { height: 30px; }
 </style>
 </head>
 AppCtrl">
 <form class="form-inline">
 <button ng-click="connect()" class="btn">Connect</button>
 <input type="text" ng-model="text" placeholder="input message to send" class="message"></input>
 <button ng-click="send()" class="btn">send</button>
 </form>
 
 <table class="table table-striped">
 <tr ng-repeat="message in messages">
 <td>{{message}}</td>
 </tr
 </table>
 </body>
</html>

 


angular-client.js


var app = angular.module('app', []);
app.factory('ChatService', function() {
 var service = {};
 
 service.connect = function() {
 if(service.ws) { return; }
 
 var ws = new WebSocket("ws://localhost:8080");
 
 ws.onopen = function() {
 service.callback("Succeeded to open a connection");
 };
 
 ws.onerror = function() {
 service.callback("Failed to open a connection");
 }
 
 ws.onmessage = function(message) {
 service.callback(message.data);
 };
 
 service.ws = ws;
 }
 
 service.send = function(message) {
 service.ws.send(message);
 }
 
 service.subscribe = function(callback) {
 service.callback = callback;
 }
 
 return service;
});
 
 
app.controller('AppCtrl', ['$scope', 'ChatService', function($scope, ChatService) {
 $scope.messages = [];
 
 ChatService.subscribe(function(message) {
 $scope.messages.push(message);
 $scope.$apply();
 });
 
 $scope.connect = function() {
 ChatService.connect();
 }
 
 $scope.send = function() {
 ChatService.send($scope.text);
 $scope.text = "";
 }
}]);


Details

It is pretty straightforward. We created an Angular Service and consumed that in our Angular controller. The only purpose of Angular service is handling communication. It will hand over the message to the subscriber in our case Angular controller and controller can do anything with that message. Here since we demonstrated the chat application so controller displays that message received.

That’s it! so simple.

Note: Both HTML and Javascript files are also available on Gist.

Code was referenced from here.

 

 

Create your first real-time PHP application

If you ever wondered if there is a way to write a real-time web application using PHP where any event or message is delivered/pushed to all recipients as they occur, in real-time? Then you are at right place. We’ll be building a sample real-time chat application using PHP and Ratchet and all messages will be pushed to all recipients in real-time. There are other technologies like node.js and socket.io but obviously there is a learning curve. If you don’t have time to learn a new thing or just want to stick with PHP then keep reading.

Goal

The goal of this application is to write a simple Chat application. Chats in event-driven programming are the “Hello World!” of applications. The chat will accept all incoming messages and deliver that message to all other connections.

The Chat class

Note: This document assumes you are familiar with PSR-0 and Composer. See Installation if you’re not yet familiar with this.

We’re going to hold everything in the MyApp namespace. Your composer file should look something like this:

{
    "autoload": {
        "psr-0": {
            "MyApp": "src"
        }
    },
    "require": {
        "cboden/ratchet": "0.3.*"
    }
}

We’ll start off by creating a class. This class will be our chat “application”. This basic application will listen for 4 events:

  • onOpen – Called when a new client has Connected
  • onMessage – Called when a message is received by a Connection
  • onClose – Called when a Connection is closed
  • onError – Called when an error occurs on a Connection

Given those triggers, our class will implement the MessageComponentInterface:

<?php
namespace MyApp;
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class Chat implements MessageComponentInterface {
    public function onOpen(ConnectionInterface $conn) {
    }

    public function onMessage(ConnectionInterface $from, $msg) {
    }

    public function onClose(ConnectionInterface $conn) {
    }

    public function onError(ConnectionInterface $conn, \Exception $e) {
    }
}

You’ll notice, in addition from just implementing methods from the MessageComponentInterface, we’ve given our application a namespace and are accepting the ConnectionInterfaceclasses. This class, usually implemented by a Connection instance, is a representation of a client’s connection on the other side of the socket. On each of the four triggered events, the client Connection representation is passed. These objects are re-used, you will receive the same Connection sometimes.

Save this as /src/MyApp/Chat.php. We’ll come back to our Chat class soon.

Instantiation

Our Chat class will be our application logic. Next, we’re going to piece together our shell script. This is the script/file we will call from the command line to launch our application.

<?php
use Ratchet\Server\IoServer;
use MyApp\Chat;

    require dirname(__DIR__) . '/vendor/autoload.php';

    $server = IoServer::factory(
        new Chat(),
        8080
    );

    $server->run();

Above, you’ll see we create an I/O (Input/Output) server class. It stores all the established connections, mediates data sent between each client and our Chat application, and catches errors. The new instance of Chat class then wraps the I/O Server class. Finally, we tell the server to enter an event loop, listening for any incoming requests on port 8080.

Save this script as /bin/chat-server.php. Now, we can run it with the following command in your terminal:

$ php bin/chat-server.php

The script should now execute, taking possession of your terminal. You can cancel the script, as we’re not quite finished yet.

Logic

So far, we’ve just set up structure, both in our shell script and our Chat class. Now, to add code to our Chat to complete our application.

Let’s add some logic to our Chat class. What we’re going to do, is track all incoming Connections, in order to send them messages. Typically, you would store a collection of items in an array, but we’re going to use something called SplObjectStorage. These storage containers are built to store objects, which is what the incoming Connections are.

<?php
namespace MyApp;
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class Chat implements MessageComponentInterface {
    protected $clients;

    public function __construct() {
        $this->clients = new \SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn) {
        // Store the new connection to send messages to later
        $this->clients->attach($conn);

        echo "New connection! ({$conn->resourceId})\n";
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        $numRecv = count($this->clients) - 1;
        echo sprintf('Connection %d sending message "%s" to %d other connection%s' . "\n"
            , $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's');

        foreach ($this->clients as $client) {
            if ($from !== $client) {
                // The sender is not the receiver, send to each client connected
                $client->send($msg);
            }
        }
    }

    public function onClose(ConnectionInterface $conn) {
        // The connection is closed, remove it, as we can no longer send it messages
        $this->clients->detach($conn);

        echo "Connection {$conn->resourceId} has disconnected\n";
    }

    public function onError(ConnectionInterface $conn, \Exception $e) {
        echo "An error has occurred: {$e->getMessage()}\n";

        $conn->close();
    }
}

Running It

Complete, let’s run it and test it. Open up three terminal windows, typing:

$ php bin/chat-server.php
$ telnet localhost 8080
$ telnet localhost 8080

In each of the telnet windows, type a message (“Hello World!”) and see it appear in the other!

Next Steps

Now that we have a basic working Chat application, let’s make that work in a web browser (Chrome, FireFox, or Safari [for now]). First, let’s go back to our chat-server.php script. We’re going to utilize another component of Ratchet; the WsServer class:

<?php
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use MyApp\Chat;

    require dirname(__DIR__) . '/vendor/autoload.php';

    $server = IoServer::factory(
        new HttpServer(
            new WsServer(
                new Chat()
            )
        ),
        8080
    );

    $server->run();

Run the shell script again, open a couple web browser windows, and open a javascript console or a page with the following javascript:

var conn = new WebSocket('ws://localhost:8080');
conn.onopen = function(e) {
    console.log("Connection established!");
};

conn.onmessage = function(e) {
    console.log(e.data);
};

Once you see the console message “Connection established!” you can start sending messages to other connected browsers:

conn.send('Hello World!');

This post was extracted from Ratchet documentation.


Global Variables in AngularJS

I’ve followed the angularjs tutorial and I noticed that I wasn’t able to have global variables.
Turns out to be actually simple but Angular doesn’t mention it.
You will need to edit your app module (app.js )

var app = angular.module('appName',);
//Add this to have access to a global variable
app.run(function ($rootScope) {
    $rootScope.globalVariable = 'Hi, global variabel'; //global variable
});

Now if you want to use it from your controller

function appNameCtrl($scope, $rootScope){
    $rootScope.globalVariable = 'Modji';
}

In your view

My name is {{globalVariable}}

If you are using any services like $http in your controller then you have to pass $rootScope as service along with $http.

app.controller('appNameCtrl', ['$http', '$rootScope', function ($scope, $rootScope){
    $rootScope.globalVariable = 'Modji';

}]);

To see the example visit my Plunker at http://plnkr.co/edit/JyIfkT1AxiCU2xx4WjJK?p=preview

This post is edited and was originally published at Coding Insight.

jQuery Image SlideShow

So to get started you’re going to need jQuery and the Orbit plugin (make sure jQuery is attached first).

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>

Now we can quickly hookup the CSS we need:

<link rel="stylesheet" href="css/orbit.css">

And finally, let’s dig into the markup.

Now, just a couple notes before moving on…

  • First, Orbit will dynamically determine the height and width of your set of images and scale accordingly, but make sure all your images are the same size or the larger images will peek out on the sides.
  • Secondly, you’ll notice that the “id” of the parent div is “featured”, but it doesn’t have to be. When you call the Orbit plugin, you set your own selector and the magical “orbit” class gets applied.

All we need to do now is activate the Orbit plugin.

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>

And there you have it. Orbit, implemented and ready to rock with all the default settings.

Article resource: http://www.htmldrive.net/items/show/928/Countdown-jQuery-Slick-Image-Slider-Plugin