MobX – Simple State Management for React component

Few days ago I have taken a small presentation about MobX at my office, Bashundhora, P1.

It was a small miniconf at our office, where we are sharing our work experience on a specific technology or tools with each other.

And presently, I am using React at font-end heavily. For state management first I have tried Redux then after checked out MobX, I just loved it.

So here it goes my small slide about React and MobX.

 

//slides.com/emranulhadi/deck/embed?style=dark

 

Cheers !!! 🙂

Advertisements

TODO app using Express JS and MongoDB

From many days I was willing to learn Node JS. And I am very much impressed with Express JS (web framework for Node.js). It’s just awesome.

Very minimal learning curve, very fast to start and develop anything will be much faster.

So what you have to do first install node obviously and MongoDB as well. Then to manage the dependency and install packages you need npm. Through npm you can install all the packages. I will not go through the all the details like installation and so on. just want to share my thoughts via this application.

So If you wanna interested to start from or explore any existing app then take mine 🙂

Within parent directory only models, views, router and app.js that’s it and TODO app is ready.

I have used these packages for the todo app.

"dependencies": {
    "body-parser": "~1.10.0",
    "cookie-parser": "~1.3.3",
    "express": "~4.10.6",
    "express-session": "~1.9.3",
    "mongoose": "~3.8.21",
    "passport": "~0.2.1",
    "passport-local": "~1.0.0",
    "ejs": "~1.0.0",
    "passport-http": "~0.2.2"
},

What package are doing what, to see that just go to the npmjs and search via the package name then you can see the details.

As I have used bootstrap to design. So using bower you can install front end dependencies very easily.

"dependencies": {
    "bootstrap": "~3.3.1"
}

Whatever I just want to share the experience of Tasting  node js via Express. So I made a very simple and basic TODO app using Express JS and MongoDB as a database. You can clone or download the source code form the download link.

download

 

And start exploring Express. After Download, goto the app directory then run following commands.


$1: npm install   // To install all the node packages

$2: npm install -g bower // Install bower, If not already installed

$3: bower install  // To install front end dependencies

$4: npm install -g nodemon // To see the live change

$5: nodemon app.js  // To RUN the app. 

App listening to the 3000 port. So browse http://localhost:3000 . You will get the homepage.

So What have in my small tiny app.

  • User Registration
  • User Login
  • User Basis task listing
  • User can add, edit, delete and checked any task

That’s it.

Here is the screenshot of TODO app for now, hopefully will add the demo very soon 🙂 .

 

registration

login

 

 

 

 

 

 

 

 

 

 

 

 

todoList

 

 

 

 

hadiList

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

So That’s it. I can understand, that It would be better if i can give brief in my coding level. Actually I have a plan to make screen cast on it. So for now, just install node, npm, mongoDB. Then clone/download my project and see how awesome is this.

So now Explore the Express.

Hope you will enjoy it. Thanks 🙂

undefined index: columns, one silly and irritating error while using Datatables library

This Error occurred suddenly in one of my project listing page and it takes my lots of hour to find out the solution. That’s why think to share the experience.

What I found after searching is its happened may be for two reason

  • The encoded array from ssp.class.php was not in UTF-8 what is needed for json_encode.
  • And another one reason if the column array is big then the big URL size makes it problem if you are using GET method while server side processing.

So What’s the solution 🙂

First reason’s solution is at SSP Class you have to add following line after PDO connect after line no #272 to define character set.

$db->query("SET NAMES 'utf8'");

Or you can see my cutomised SSP class .

And second reason’s solution is you have to do use POST instead of GET while server side AJAX call.

While assign the URL you have to use HTTP type POST.

"ajax": {
"url": "scripts/post.php",
"type": "POST"
},

And little reminder is at server side script use POST instead of GET variable while calling SSP simple function. Like

$Ssp::simple( $_POST, $sql_details, $table, $primaryKey, $columns)

You can see the POST examples here. 

Hope it may help. 🙂

Thanks

JOIN and extra condition support at Datatables library SSP class

Whenever I need to view some listing in TABLE, I LOVE to use Datatables. Datatables library is really Awesome. It works like charm!!!

If you are new with Datatables then please first check their documentation and examples then come back 🙂

For HUGE data handle their Server side processing works also fine. They provide Server Side Processing class to process the request for datatables @version 1.10.0. But it’s only works with single table :(.

So handle Complex query like join or extra condition not supported at their provided SSP class. After a lots of searching in google and forums not found any reliable solution. After that I changed the class as my own.

I faced problem like

  1. Get Data from Multiple table not supported via Joining.
  2. Extra Where, except filtering was not possible.
  3. During work on Multiple Table, to avoid Duplicate key was not possible.

So due to my purpose done I have changed the SSP class like my own. The changes i made are :

  1. I have added option to ADD JOIN Query and make necessary changes.
  2. I have changed Column ARRAY format to handle get data from multiple table. And add TWO new index(‘field’, ‘as’) for complex query handle.
  3. Add Extra Where condition through SSP Class.
  4. You can Group by the result via sending Query through simple function of SSP Class.

You can see the DEMO and DOWNLOAD server-side processing customised SSP class from the following link.

demodownload

I want to share the changes I made at SSP class and try to explain what & why I made the changes. And I will show the usage too.

Change in SSP::simple Function :


/*

*....

* @param array $columns Column information array
* @param array $joinQuery Join query String
* @param string $extraWhere Where query String
*
* @return array Server-side processing response array
*
*/
static function simple ( $request, $sql_details, $table, $primaryKey, $columns, $joinQuery = NULL, $extraWhere = '', $groupBy = '')
{......
 $where = Libs_SSP::filter( $request, $columns, $bindings, $joinQuery );

// IF Extra where set then prepare query
 if($extraWhere)
 $extraWhere = ($where) ? ' AND '.$extraWhere : ' WHERE '.$extraWhere;

 // Main query to actually get the data
 if($joinQuery){
 $col = Libs_SSP::pluckForJoin($columns, 'db');
 $query = "SELECT SQL_CALC_FOUND_ROWS ".implode(", ", $col)."
 $joinQuery
 $where
 $extraWhere
 $groupBy
 $order
 $limit";
 }else{
.........

Here is the screen shot

SSP::simple

SSP simple class

Change in Column Array Filtering :

I have change the column array to fulfill my purpose of joining table. You know column name may duplicatie, So sometimes its needed to rename, I give option to this column array.

    1. Index ‘db’ refer which tables which field will select.
    2. Index ‘dt’ refer data table index as before
    3. Index ‘field’ refer at output in which name the output will print from SQL result after rename.
    4. Index ‘as’ refer If this index set then the column name will renamed via the assigned value.  
$columns = array(
array( 'db' => '`c`.`id`', 'dt' => 0, 'field' => 'id' ),
array( 'db' => '`c`.`login`', 'dt' => 1 'field' => 'login' ),
array( 'db' => '`c`.`password`', 'dt' => 2, 'field' => 'password' ),
array( 'db' => '`c`.`name`', 'dt' => 3, 'field' => 'client_name', 'as' => 'client_name' ),
array( 'db' => '`cn`.`name`', 'dt' => 4, 'field' => 'currency_name', 'as' => 'currency_name' )

array( 'db' => '`c`.`id_client`', 'dt' => 5,
'formatter' => function( $d, $row ) {
return '<a href="EDIT_URL"><span class="label label-inverse"><i class="fa fa-edit"></i> Edit</span></a>
<span class="label label-danger pointer"><i class="fa fa-trash-o"></i> Delete</span>
';
}, 'field' => 'id_client' )
);

$joinQuery = "FROM `{$table}` AS `c` LEFT JOIN `currency_names` AS `cn` ON (`cn`.`id` = `c`.`id_currency`)";

$Ssp = new Libs_SSP();
echo json_encode(
$Ssp::simple( $_GET, $sql_details, $table, $primaryKey, $columns, $joinQuery )
);

Here is the Screenshot

Customized Column array

SSP Customized column array

Extra Condition/Where Add :

I have added one option to SSP::simple class as a parameter and i prepare query as it should be. If you need to send some extra data while datatables initialisation, then you can do that like this.

$Where = "`c`.`id_client`=".$CLIENT_ID; // OR For a Normal query condition could be $Where = "`id_client`=".$CLIENT_ID;
$Ssp = new Libs_SSP();
echo json_encode(
$Ssp::simple( $_GET, $sql_details, $table, $primaryKey, $columns, $joinQuery, $where);
);
where option

Extra where option added.

And how i prepare query for extra where that have shown at first screen shot.

Group By Option :

You can GROUP BY your result via sending the COLUMN name in SSP::simple function.

$groupBy = '`c`.`id_client`'; // for multiple COLUMN '`c`.`id_client`,`c`.`other_param`'
echo json_encode(
$Ssp::simple( $_GET, $sql_details, $table, $primaryKey, $columns, $joinQuery, $where, $groupBy);
);

In previous version of SSP class, the parameter took full format like below.

$groupBy = ' GROUP BY `c`.`id_client` ';
  • HAVING Option

You can use HAVING query within SSP class right now. And it’s pretty easy to use.

 $having = '`c`.`id_client` >= 100'; // same as the extra where
echo json_encode( SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns, $joinQuery, $where, $groupBy,$having); );

 

  • Output Format changes

For JOIN query the output field is mapping from ‘field’ index of COLUMN array rather than ‘db’ index.

output mapping

Output Mapping from Column field index for JOIN

Other Changes in SSP class :

  • filter function
    • Added $isJoin optional parameter.
    • IF $isJoin set then the Quotation have different due to change in db index of COLUMN ARRAY for JOIN.
    • Otherwise it works like before.
  • pluck function
    • Same as filter function added $isJoin optional parameter.
    • For rename column name, preparing query is here, If corresponding as index is set at COLUMN Array .

 Updated: Due to few re-factoring and renamed may be some code shown here will mismatch with present version of ssp.customized.class.php. 

Like the Class name is changed SSP from Libs_SSP, So It’s better to see/use Example code at github. You will get just the Idea of changes here, So don’t Use these code blindly.

That’s it…..

So Listing huge data with complex query is FUN with Datatables NOW.

So, Happy Coding!!! 🙂

Any kind of Suggestion or feedback is truly appreciated.

Create Facebook and Twitter button using CSS3

After released CSS3, I have practiced with it’s new features. After watching one tutorial i got an idea to make something nice. Then I am tried to build Facebook and Twitter button using CSS3 without using any image. And try to use some nice CSS tricks to make these button more realistic.

And one thing, I will not discuss the CSS3 new features format and params. I will just show how I have used these feature to create FB and Twitter button. Lets Start How I do that.

demodownload

Here is the List some of CSS3 property I have used to do this:

  • font-face
  • Gradient
  • Border radius
  • Text & Box Shadow
  • Other properties

Font-face

I have used font-face kit from here. To get the Facebook ‘f’ and Twitter ‘t’ I have used that. I have created Font by this font-face kit. And use this font later.

@font-face {
font-family: 'ModernPictogramsNormal';
src: url('font/modernpics-webfont.eot');
src: url('font/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
url('font/modernpics-webfont.woff') format('woff'),
url('font/modernpics-webfont.ttf') format('truetype'),
url('font/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
font-weight: normal;
font-style: normal;
}

Gradients

You can see Gradients syntax/format here. Then if you want you can make your own Gradient visually Here.

Here My Used Gradient for FB Icon:

/* Background Credients */
    background: #014464;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.4, #2E6C9E),
        color-stop(0.51, #1A5399),
        color-stop(0.6, #2774B8)
        );

Border radius

Border radius is a nice feature of CSS3. You can see the other property here Or you can create visually here.

 /* Border & Border Radius */
    -moz-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    border: 1px solid #368DBE;
    border-top: 1px solid #e3d6df;
    border-left: 1px solid #e3d6df;

Text & box shadow

Box-shadow, one of CSS3′s best new features. You can see details of Box shadow here.

To make the button more interactive I have used Text shadow. You can see some use of Text shadow here. here.

  /* Text Shadow */
    text-shadow: 0px -1px 1px #111;

    /* Box shadow */
    -moz-box-shadow: 0 1px 3px black;
    -webkit-box-shadow: 0 1px 3px black;
    box-shadow: 0 3px 8px black;

Others

To make interactive button I have added shadow while button active.

/*     WHILE BEING CLICKED   */
.button:active {
    -moz-box-shadow: 0 2px 6px black;
    -webkit-box-shadow: 0 2px 6px black;
}

Then I have used the Font i have made by font face.

.button:after {
    font-family: ModernPictogramsNormal;
    content: 'F';
    color: #FFF;
    font-size: 60px;
    float: left;
    margin-left: 15px;
    margin-right: -10px;
    text-shadow: 1 1px 1 #4190AF;
}

And here is the other normal CSS I have used for create the button.

.button {
    width: 55px;
    height: 55px;
    line-height: 63px;
    text-decoration: none;
    color: white;
    font-size: 40px;
    font-family: helvetica, arial;
    font-weight: bold;
    display: block;
    text-align: center;
}

I have shown all the CSS I have used for Facebook button. To see the Twitter button source download it from github. And you also can see the inspiring tutorials at Nettuts+

Cheers!!!

Git Basics

In my professional projects first I have used SVN
for source code versioning. Then after introducing with Git I have started use GIT to manage source control. GIT makes you stronger and confident to write code. When multiple developer work in one project then there is no better solution to use GIT to manage their code.

In my office I have taken one session about GIT. Where I have tried to discuss the versioning concepts and its benefits. I have discussed its basics usage and command. And shows some necessary ways to handle critical situation.

Hope you will Enjoy it.

Any review or question will be appreciable. Thanks for watching.

Memcache Installation

What is Memcached?

Free & open source, high-performance, distributed memory object caching system, generic in nature, but intended for use in speeding up dynamic web applications by alleviating database load.

So to faster your application its needed to use the memcache at your application. Lets proceed the main goal for my post.
Lets Install PHP5 Memcache Extension Module for Ubuntu (note: you must have memcached installed prior to installing this extension module. refer to prerequisite install below):

Follow the following steps to install memcache successfully.

  • Install g++ if you haven’t already.
  • sudo apt-get install make g++
    
  • Prerequisite Install
  • # Download & install libevent (memcached dependency)
    # Run the command at CMD
    wget http://www.monkey.org/~provos/libevent-1.4.8-stable.tar.gz
    # Extract the archieve file
    tar xfz libevent-1.4.8-stable.tar.gz
    # Enter the directory
    cd libevent-1.4.8-stable
    # Then install by run following command
    ./configure && make && sudo make install
    
  • Create a symlink to libevent
  • # Run command to symlink
    sudo ln -s /usr/local/lib/libevent-1.4.so.2 /usr/lib
    
  • Download & install memcached
  • # Run the following command in CMD
    # Download memcache latest version
    wget http://danga.com/memcached/dist/memcached-1.2.6.tar.gz
    # Extract the archive file
    tar xfz memcached-1.2.6.tar.gz
    cd memcached-1.2.6
    ./configure && make && sudo make install
    
  • Run the Memcache as a daemon
  • # Run memcached as a daemon (d = daemon, m = memory, u = user, l = IP to listen to, p = port)
    memcached -d -m 1024 -u root -l 127.0.0.1 -p 11211
    
  • PHP5-Memcache Install
  • # Download the extension module
    apt-get install php5-memcache
    
    #Edit /etc/php5/conf.d/memcache.ini and uncomment the following line by removing the semi-colon
    extension=memcache.so
    
    # Restart your apache server
    /etc/init.d/apache2 restart
    
  • Example code to Test Memcache Install
  • <?php
    $memcache = new Memcache;
    $memcache->connect('localhost', 11211) or die ("Could not connect");
    
    $version = $memcache->getVersion();
    echo "Server's version: ".$version."<br/>\n";
    
    $tmp_object = new stdClass;
    $tmp_object->str_attr = 'test';
    $tmp_object->int_attr = 123;
    
    $memcache->set('key', $tmp_object, false, 10) or die ("Failed to save data at the server");
    echo "Store data in the cache (data will expire in 10 seconds)<br/>\n";
    
    $get_result = $memcache->get('key');
    echo "Data from the cache:<br/>\n";
    
    var_dump($get_result);
    ?>
    

Enjoy the caching benefit. Enjoy!!!!!!