CSS Perspective Effect

DEMO: http://jsfiddle.net/ZAYzL/

PHP Packing Solution - How to divide items equally

This tutorial concept is actually come from stackoverflow where the solution was suggested in ruby script but I had translate it in PHP script.

$list_of_bags = array(11, 41, 31, 15, 15, 66, 67, 34, 20, 42, 22, 25);
# total weight of all bags
$weight_of_bags = array_sum($list_of_bags);
# how many containers do we have at our disposal?
$number_of_containers = 4;
# How much should one container weight?
$weight_per_container = $weight_of_bags / $number_of_containers;
# We make an array containing an empty array for each container
$containers[] = array();

$total = 0;

# For each bag
foreach ($list_of_bags as $bag) {
    for($i=0; $i<$number_of_containers; $i++){

        $total = (isset($containers[$i])) ? array_sum($containers[$i]) : 0;
        if($total + $bag < $weight_per_container){
            $containers[$i][] = $bag;
            break;
        }
    }
}

# output all containers with the number of items and total weight
foreach ($containers as $index=>$container) {
   echo "container $index has ";
   echo count($container);
   echo " ";
   echo "items and weigths: ";
   echo array_sum($container);
   echo "
";
}

Output:
container 0 has 3 items and weigths: 83
container 1 has 3 items and weigths: 96
container 2 has 2 items and weigths: 87
container 3 has 2 items and weigths: 76
container 4 has 2 items and weigths: 47

PHP Recursive Function

Tutorial by: Adam Lim


For example we need to create calculation as below:
5 => (5*2)+(4*2)+(3*2)+(2*1)+(1*1)

It can be resolved by for loop as below:

$total=0;
for($i=5; $i=0; $i--){
  $total += $i * 2;
}


To create a recursive function, it should as follow:

function test($int){
  if($int>0){
    echo $int.<br>;
    return(($int*2) + test($int-1));     // call back self function to continue loop
  }else{
    return 0;
  }
}

echo test(5);

Output:
5
4
3
2
1
30

DEMO

Dynamic Photo Framing API

Today bonus is to introduce photo framing api(apisilo.com) for framing industry. It is easy to use as you just need to pass four parameters which is art, frametop, framebtm, and framesize.

Parameter values and file format:
art - Photo or the artwork you wish to frame (only jpg, gif, png file format)
frametop - small piece of frame image, please see sample. (only jpg, gif, png file format)
framebtm - small piece of frame image, please see sample. (only jpg, gif, png file format)
framesize - integer value that you wish to control frame thickness.

How to use it:

Use with jquery getJSON to call API

$.getJSON("http://frame.apisilo.com/index.php?jsoncallback=?",
    {
      art: "http://www.tourismeoutaouais.com/blogue/wp-content/uploads/2014/10/halloween2-620x350.jpg",
      frametop: "http://www.imagemagick.org/Usage/thumbnails/blackthin_btm.gif",
      framebtm: "http://www.imagemagick.org/Usage/thumbnails/blackthin_btm.gif",
      framesize:"50"
    },
    function(data) {
        var str = data['result'];
        var finalData = str.replace(/\\/gi, '');

        $("#framed_artwork").attr("src",finalData);
    });

Append the result in framed_artwork as following:
<img id="framed_artwork" src="sample.jpg" />


DEMO

Step By Step Cross Domain Pass Parameter

Objective of this tutorial is helping those who want to create api but having the issue of cross domain problem.

How to Create Client Call API
Step 1:
Create javascript file name myjsfile.js and paste the following codes.

$(function(){
  $('#btn_name').on('click', function(e){
    $.getJSON("http://www.yourotherdomain.com/myapifile.php?jsoncallback=?",
    {
      variable1: "maybe textbox value",
      variable2: "maybe textbox value",
      variable3: "maybe textbox value"
    },
    function(data) {
        var str = data['result'];
        alert(str);
    });
  });
});

Step 2:
Include the following code before </head> tag.

<script src="js/myjsfile.js" type="text/javascript"></script>

You are now able to pass parameter to function from difference domain http://www.yourotherdomain.com/myapifile.php  .


How to Create Server Response
Step 1:
Create php file name myapifile.php and paste the following codes.

<?php

 header("Content-Type: application/json, charset: utf-8;");
 $arr=array();
 $arr['result'] = "Here is your result data";
 echo $_GET['jsoncallback'].'('.json_encode($arr).');';
 exit;

?>

~End~

Notice:
You may get Uncaught SyntaxError: Unexpected token if you did not include $_GET['jsoncallback'].

References:
http://stackoverflow.com/questions/3143698/uncaught-syntaxerror-unexpected-token
http://www.w3resource.com/JSON/JSONP.php

PROGRAMMING TOOLS

Well, this is for my own references as people tend to forget many things when they're getting older. : D

System Analysis and Design Tools

1. Pencil
2. MySQL Workbench

Coding and Development

1. Sublime Text 2
2. Notepad ++
3. MySQL
4. TortoiseSVN

FTP Uploader

1. Filezilla

Online Testing Tools

1. http://sqlfiddle.com/
2. http://jsfiddle.net/
3. http://regex101.com/
4. https://www.functions-online.com/preg_match.html
5. http://writecodeonline.com/php/
6. http://www.bootply.com/
7. http://putsmail.com/
8. http://phpfiddle.org/

Bootstrap

1. http://charliepark.org/bootstrap_buttons/
2. http://fontawesome.bootstrapcheatsheets.com/
3. To help you decide which to use http://tagliala.github.io/vectoriconsroundup/#angle-up

Allow Phone Access to Localhost

1. fiddler2 : To enable connection between mobile device and localhost device, you must change mobile device's proxy ip to follow localhost device connection ip. Port number in mobile device should be same as port number in fiddler setting.

Welcome for more tools sharing.

Opening new window/tab without using `window.open` or `window.location.href`

Answer from stackoverflow.com:

What it does:

1. Create a form
2. Give it attributes
3. Append it to the DOM so it can be submitted
4. Submit it
5. Remove the form from the DOM

Now you have a new tab/window loading "https://google.nl" (or any URL you want, just replace it). Unfortunately when you try to open more than one window at once this way, you get an Popup blocked messagebar when trying to open the second one (the first one is still opened).

Source Code:

var form = $("<form></form>");
form.attr(
{
    id     : "newform",
    action : "https://google.nl",
    method : "GET",
    target : "_blank"        // Open in new window/tab
});

$("body").append(form);
$("#newform").submit();
$("#newform").remove();