Dec
02

Search Git Logs

Sometimes you want to search your git commit logs to find occurrence of keywords or entries in your commit. If you are familiar with the classic UNIX string searching tool, ‘grep’ then you’ll find this to be pretty handy to find entries in your commit log. Git comes standard with a ‘grep’ mode for achieving this purpose.

Just type:

1
git log --grep="paypal"

Suppose that you want to search more than just the commit messages, but the commits themselves. Then, remove the ‘log’ argument, like this:

1
git grep "paypal" $(git rev-list --all)

Alternatively, if you want to get a more human-friendly display of the above command, use this command:

1
git log -S"paypal"

Dec
07

HTML5: Using a custom proxy browser to implement a custom protocol

Proxy Browsing

Proxy Browsing

Proxy Browsing

Proxy browsing has been going on for quite sometime now, but some developers may not know the technical know-how on how to use it safely without infringing on some security issues pertaining to anonymity and ethical practices. There are several security issues concerning using proxy browsers which is to anonymously browse websites so as to hide your browsing history. Other times, you use a proxy browser to visit websites that has been prohibited by your systems administrator or bypassing blocks on banned websites.

 

I am simply going to mention some of its uses, give a technical breakdown of how it works and try to point out some directions in which some modern web browsers can implement custom protocols.

Uses of a proxy browser
- Surf the internet anonymously
- Bypass blocks on prohibited websites
- For web application testing purposes

Security-related Issues
- It can promote unethical browsing behaviors.

 

Note: This discussion is not advocating the use of proxy browsers for performing unethical surfing practices as you will suffer serious penalties from your ISP, who can place a ban on the IP address for which you are surfing with, which can result in heavy financial fines. It is simply for educational purposes to show you how to develop a simple proxy browser, create custom proxy protocols which can be interpreted into RAW HTTP protocols.

A proxy browser

Web proxy

Web proxy

A proxy browser is simple a light-weight web page that allows a user to type in a web site address, establishing transfer of data between a proxy server and remote resource object. A proxy browser sits on a proxy server that fetches the web resources interprets its contents and transmits the resulting resource back to a client object.

Creating a Proxy Browser in HTML
To begin with, you need to create a basic HTML page with a canvas for loading external web pages, add an input box and 3 or 4 basic buttons to perform the following basic browsing functions:
- Browse to a URL address
- Browse back
- Browse forward
- Refresh the page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
<head>
<title>A simple proxy browser</title>
</head>
<body>
<div id="canvas">
  <div id="address">
    <span id="browse"></span> <a id="back" href="javascript: history.go(-1)"></a><div id="address-bar"><input id="address-bar-input" name="address-bar" value="platform://" autocomplete="on" /></div> <input id="go" name="go" type="submit" value="GO" /><a id="forward" href="javascript: history.go(+1)"></a>
  </div>
  <div class="clear"></div>
  <div id="page">
     <iframe id="site" name="site" src="page.php"></iframe>
  </div>
</div>
</body>
</html>

[browser.phmtl]

Using PHP for loading and rendering target URL
We will create a PHP document which will remotely fetch a URL specified by the end-user. In this example, I use the the function file_get_contents(), alternatively, you can use a PHP’s build-in cURL function to get the remote URL.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
global $url;
 
$url = 'http://www.google.com/';
$request = isset($_GET['request']) ? $_GET['request'] : $url;
 
$xml = @file_get_contents($request);
$cache = 'cache.html';
 
$f = fopen($cache, 'w+');
fwrite($f, $xml);
fclose($f);
echo $xml;
?>

[page.php]

The above also creates a cache file for saving the content of the remote URL in HTML format. e.g. cache.html

And its that simple, you now have a proxy browser to surf the web.

Using Javascript and jQuery to create custom protocols
The next snippet of code illustrates how you would implement custom protocols for loading websites, mirrored websites, and web applications etc etc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
/* The following snippet is copyright Entilda IT solutions and is borrowed from 
  * platform browser developed by http://www.entilda.com to demonstrate and 
  * illustrate the point of using custom protocols
  */
$(document).ready(function(){
  urlprotocol('en://platform');
   $('#address-bar-input').keypress(function(e){
    enter_keycode = 13;
    if (e.which == enter_keycode){
      var address = $('#address-bar-input').val();
      urlprotocol(address);
    }
  });
 
  $('#go').click(function(){
    var address = $('#address-bar-input').val();
    urlprotocol(address);
  });
});
 
function pageloader(address){
  $('iframe').attr('src', address);
}
 
function urlprotocol(url){
  http = "http://";
  https = "https://";
  server = http + 'mercury';
  address = $.trim(url);
 
  if (address == '') {
    address = server + "/platform";
  }
 
  query_string = address.split("://");
  protocol = query_string[0];
  command = query_string[1];
  command = $.trim(command);
  switch(protocol){
    case '~':
    case 'e':
    case 'en':
    case 'platform':
      if (command.length === 0) {
        address = server + "/platform";
      } else {
          switch(command){
            case 'platform':
               address = server + "/platform";
               break;
            case 'applications':
            case 'framework':
            case 'help':
            case 'info':
            case 'libraries':
            case 'mirrors':
            case 'networks':
            case 'respository':
            case 'sandbox':
            case 'servers':
            case 'sites':
            case 'system':
            case 'workspace':
              address = server + "/platform?"+command;
              break;
          }
      }
      break;
    case 'apps':
      address = (command.length === 0)
                ? server + "/platform?applications"
                : server + "/sandbox/system/applications/" + command;
      break;
    case 'applications':
    case 'framework':
    case 'help':
    case 'info':
    case 'libraries':
    case 'mirrors':
    case 'networks':
    case 'respository':
    case 'sandbox':
    case 'servers':
    case 'sites':
    case 'system':
    case 'workspace':
      address = server + "/platform?" + protocol;
      break;
 
    case 'tests':
      address = server + "/sandbox/workspace/tests/" + command;
      break;
 
    case 'sh':
    case 'shell':
    case 'console':
      address = server + "/sandbox/workspace/console?command=" + command;
      break;
 
    case 'play':
    case 'video':
    case 'tube':
    case 'screen':
      address = server + "/sandbox/workspace/tests/video/player?command=" + command;
      break;
    case 'stream':
      address = server + "/sandbox/workspace/tests/video/streaming?" + command;
      break;
    case protocol :
      address = protocols(protocol, command);
      break;
 
    default:
      address = server + "/platform";
      break;
  }
  console.log(address);
  pageloader(address);
}
 
function protocols(protocol, command){
  switch(protocol){
  // generic protocols
      case 'http':
      case 'https':
        // do nothing
        break;
 
  // social protocols
 
     //google
     case 'bible':
        address = 'https://www.biblegateway.com/passage/?search=' + command + '&version=NIV';
        break;
      case 'g':
      case 'goog':
      case 'google':
        address = 'https://www.google.com/search?q=' + command;
        break;
      case 'gplus':
        case 'gcal':
        address = 'https://plus.google.com/';
        break;
      case 'gmail':
        address = 'https://mail.google.com/';
        break;
      case 'greader':
        address = 'https://reader.google.com/';
        break;
 
    //last.fm
      case 'last':
      case 'lastfm':
        address = 'http://www.last.fm/user/' + command;
        break;
 
      //facebook
      case 'fb':
      case 'facebook':
        address = 'https://www.facebook.com/' + command;
        break;
 
      //twitter
      case 'tw':
      case 'twitter':
        address = 'https://www.twitter.com/' + command;
        break;
 
      // delicious
      case 'del':
      case 'delicious':
        address = 'http://www.delicious.com/' + command;
        break;
 
  // other protocols
    // bee-yee protocols
      case 'bee-yee':
        address = 'http://bee-yee.com/' + command;
        break;
 
  }
  return address;
}
</script>

By implementing the above snippet, you will get some custom protocols such as below:

1
2
3
4
5
tw://bileckme
twitter://bileckme
del://bileckme
delicious://bileckme
bible://John 10:10
1
2
3
4
5
6
[Platform Browser]
apps://
video://
mirrors://
networks://
sites://

Another example usage, is loading a database application such as Chive or PHPMyAdmin:

1
2
apps://chive
apps://phpmyadmin

A lot more protocols can be achieved by implementing custom protocols in this manner.

Oct
03

Interfacing custom jQuery functions with PHP

If you really want to dig into writing your own custom a PHP/JQuery interface you might want to try something like this:

- use ajax function name as a php pseudo function name
- implement jquery and let php echo the output.
- this can be useful if you want to only write your code in php only
- not really practical but it works some 90% of the time.

Note sure if there’s any library out there that does this implementation but I do have some sample implementation which I use on some custom development projects, maybe you might find some of the insights useful if you are really into writing your own code.

See the following code snippet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
function js_start(){
  return '<script>';
}
 
function js_add_jquery($version='1.4.2'){
  return '<script src="https://ajax.googleapis.com/ajax/libs/jquery/'.$version.'/jquery.min.js"></script>';
}
 
function js_ajax($url, $data, $success){
 return "
 $.ajax({
    url: '$url',
    data: '$data',
    success: $success
  });";
}
 
function js_end(){
  return '</script>';
}
 
//Example usage:
// where success is behaviour you want executed on success
$success =
"function(data) {
  $('#page').html(data);
}";
 
echo js_add_jquery(); // default version 1.4.2 is used here
echo js_start();
echo js_ajax('test.php', 'name=John&surname=Doe', $success);
echo js_end();
?>

Sep
20

Storing data locally with WebKit’s browser storage engine using HTML5

Local Storage with HTML5

Local Storage with HTML5

HTML 5 is starting to gain momentum in its adoption as a standard for developing the next generation web sites and web applications. We see its use in almost every web or mobile web application out there, and I am quite impressed with the kind of features exposed to developers to use for web application development.

One of my favorite uses of HTML5 is accessing the browser’s storage engine and storing data for local use.

What is Local Storage?

Modern browsers today have the capacity to save large amount of data locally using light-weight database engines such as SQLite which can used for storing user prefere

nces and settings. The browser’s storage engine is now accessible using HTML5 which exposes its properties using the DOM allowing web application access to the storage properties of the browser.

This DOM property can be referenced using window.localStorage as we see in the example below:

1
var store =  window.localStorage;

localStorage is a client-side key-value database, meaning it is stored in the users browser. This property is available in HTML5 by default, but for compatibility with HTML4 and older browsers you can try out the YUI Storage Lite or YUI Storage Utility which allows cross-browser support.

Why use Local Storage?

One might ask the question of why this is really needed and question its importance in web development.

Here are some of the important points to keep note of:

  • Saving the state of an application
  • Caching data for reuse
  • Storing user preferences
  • Better alternative to using browser cookies

Saving State: Your application does not necessarily need to connect to some web service again to acquire the last state since its last active state. If a user closes the browser, the application can reload its last state when the application is reinstated since it has access to locally stored information.

Caching: If data has not changed then there is no reason to reloading the information over the internet again.

User settings: You can use local storage to store user preferences and give users more control on how they want your application to behave.

Using Cookies, Its Out-dated: Its more painful to fetch data in flat files, the information is relatively insecure and its not structured.

 

Testing browser support for localStorage

Its quite simple. See why that is:

1
2
3
4
5
if (typeof(localStorage) == 'undefined' ) {
 
alert('Your  browser does not support HTML5 localStorage. Try upgrading.');
 
}

Using Local Storage

I will be using the WebKit Sticky Notes examples to illustrate my point and explain just how easy it is to manipulate data and store data using your web browser’s storage engine.

Establishing database connection

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var  db =  null;
 
try {
 
if ( window. openDatabase) {
 
db =  openDatabase( "NoteTest",  "1.0",  "HTML5 Database API  example",  200000);
 
if (! db)
 
alert( "Failed to open the  database on disk.  This is probably  because the version was bad or there is not enough space left in this domain's  quota");
 
}  else
 
alert( "Couldn't open the  database.  Please try with a WebKit  nightly with this feature enabled");
 
}  catch( err) {
 
db =  null;
 
alert( "Couldn't open the  database.  Please try with a WebKit  nightly with this feature enabled");
 
}

WebKit Developer Tools

WebKit is an open-source web browser engine that powers Apple Safari and Google Chrome browser. It comes stacked with a lot of useful tools for debugging web applications.  Have a look at the WebKit Developer Tools below:

WebKit Developer Tools: Database Console

WebKit Developer Tools: Database Console

 

Resources tab

The Resources tab shows your storage engine. The Databases section reveals the NoteTest Database with a table called “WebKitStickyNotes”.

By typing an SQL query into the console screen, you can query the database and access data being store locally within the NoteTest database file.

1
SELECT * FROM WebKitStickyNotes;
WebKit Developer Tools: using native SQL query in Console

WebKit Developer Tools: using native SQL query in Console

After typing some text inside our notes application, you can see example of it being stored locally.

WebKit Developer Tools: One database storage entry

WebKit Developer Tools: One database storage entry

By digging a little further, and adding a second NOTE, you are able to see two more records added to the database table.

WebKit Developer Tools: Two database storage entries

WebKit Developer Tools: Two database storage entries

Sep
20

Evaluating some light-weight PHP database management tools

I came across two very light-weight database management tool which is very useful for developers that do not necessarily want to go through the trouble of installing an massive database administration tool. What amazes me about these tools is how extremely small they are, sitting at less than 100kb on gzip compression. Some of the benefits of using a light-weight database management tool is:

  • its easy to upload to web server
  • requires very low bandwidth
  • its a single file that takes up negligible disk space

TinyMy
TinyMy is extremely small and supports MySQL databases. You browse through the database schema, write scripts and execute SQL queries from the one-page file. The file size after compression is just under 7kb and uncompresses into three files:

1
2
3
readme.txt
tinymy.php
sample.html

DBKiss
DBKiss is a one-page PHP file used to manage and manipulate 3 of the most common databases today. It is easy to upload to a web server and use, with very little overhead on your web server, if any. It supports MySQL and PostgreSQL and features import/export of data, searching of the whole database or single tables, an advanced SQL editor, saving of templates, multi-query execution with pagination, and more.

Jun
05

Mobile Platform OS In History


Over the past 20 years systems development has evolved from the trends of developing applications for the desktop based operating systems, to web-based applications, and then mobile application development.

For many people like myself, it wasn’t easy to view development for mobile platforms as a viable alternative to desktop or web-based platforms, it just made perfect sense to develop for desktop or the web. I guess mainly because it seemed perfectly easy to view and work on.

Obviously, for application developers, one still needs a desktop-based device to develop, test and deploy an application. But since the evolution of mobile platforms, developers have simply seen a much better alternative to developing which involves smaller, lighter and elegant mobile devices which performs just as fast and efficiently as the traditional desktop based devices.

Several mobile development companies took advantage of this idea of developing for smaller and lighter devices, many of which focused on the actual device and focus on the software that powers these devices was not powerful in comparison to their desktop counterparts. There were several innovations which took different forms, shapes and sizes, innovations of the tablet devices also took place, where the size of the devices was not as big as the desktop device or not as small as mobile device, but an intermediate of the two.

The market became flooded with companies manufacturing these different sizes, and shapes of mobile devices to attract the masses and this trend carried along for several years with not enough focus on the platform that powers these devices.

Then, an evolutionary transformation immediately took place pretty quickly when Apple announced their first mobile device platform which was based the Apple iOS, a BSD-based OS derivative, had been truely impressive to say the least. Its success was inevitable because it was the first time such an implementation was successfully executed with next to zero fault in practice. I was quite impressed with this way of viewing application development, because applications were not just developed for the desktop, they were also developed for mobile devices and run-off the same operating system that powers the desktop-based applications and web-based systems.

This transformation was the breakthrough mobile devices needed to ensure that developers only needed to work on the same platform without loosing or changing the traditional development methods and processes which helped to boost the adoption of mobile application development. However, the challenge was to find a platform that was easily accessible to developers which was inexpensive and freely accessible to anyone and has the benefits of desktop-based platform OS and web-based platform OS.

And then came along the Android platform, which is based on the Linux kernel-based operating system, which includes the power of the desktop and the web and is freely available and accessible to anyone.

With this new transformation and innovation in technology for mini-devices (mobile devices), it was paramount that its adoption will be fast and widely accepted as the norm.
Since this transformation, the adoption of the Android platform took center stage in the world of mobile application development. Several mobile operators, manufacturers and system developers quickly adopted this trend and use of android platform as the core for their systems operations.

The good news is that it runs off the Linux kernel-based operating system, therefore, it makes it very easy to port existing applications to the platform without making any or minimal changes to existing applications framework architecture.

I have also taken a huge interest in this way of developing applications and I can’t wait to see how far developers can push this platform or platforms with a similar business model to its limit into future inventions that will bring to life innovations similar to the imaginations of some famous science-fiction book writers of the past and present.

Jun
05

jQuery: fixing conflicts with other JavaScript frameworks

When working with multiple JavaScript frameworks, you’ll find that odd occasions of conflicts occurring, when one framework grabs functionality of the other but the intended functionality is in conflict with the other. This often occurs with instances of jQuery and for instance MooTools both used within a project.

To fix this problem you need to explicitly declare the jQuery object instance to prevent conflicts and replace all instances of the

$

object instance with jQuery. Have a look at the following code snippet for better illustration of its implementation:

1
2
3
4
5
$(document).ready(function() {
// no conflict on all jquery implementations
jQuery.noConflict();
// remember to replace all $ instances with jQuery in your code
});

QUICK TIP:
Don’t forget that you can also assign jQuery to any other variable name to use it as your pseudo reference to jQuery:

1
2
3
4
5
var $jq = jQuery;
 
// or 
 
var $_

Mar
27

Chive – Database Management gets even better!


So I have been following the Chive project, an open source database management tool, for quite some time now. This impressive database application still in its beta stage boasts of performing incredible faster than its predecessor, in terms of responsiveness and a clean user interface.

MySQL Database Management has come along way since PHPMyAdmin to name but a few, but today just as many web technologies started to mature from what we knew as web 1.0 phase to web 2.0, so is the case for Online Database Management Tools. And MySQL is not backing out of the equation!

One feature I personally find that out-performs PHPMyAdmin is the handling of large database dumps, assuming that it uses a possible combination of  AJAX and cURL to perform stream buffering over TCP by writing several chunks of data as streams from the database directly to a flat file. It uses the light-weight Yii Framework, therefore, borrowing numerous features from its design and implementation.

Chive is still pretty young and the code-base is immature in comparison to PHPMyAdmin, but only time would tell, before it makes it to the top of the best free Open Source Database Management  Tools and accepted widely by the Open Source community. For instance, I believe that PHPMyAdmin comes bundled with some Linux Distros (I stand to be corrected), but if I were maintaining a Linux Distribution, I wouldn’t mind including it in its source.

It would be fairly biased of me to only mention only the merits and not mention any limitations. There are few features I find lacking so far, and I believe that if included in future updates, it would definitely make managing database tasks even easier:

Limitations

  • It is not able to search the entire Database for a search term matching a specific keyword.
  • It is not capable of maintaining multiple remote connections.
  • It cannot print out or generate a Database Dictionary.

After all said and done, Chive still stands out as being a free Open Source Database Management tool with all the bells and whistles associated with all Web 2.0 standard applications.

Try Chive now, and see for yourself,  just how easy it is to query MySQL and manipulate data.

Mar
27

Creating custom shell script with Zend Framework

Nothing beats writing an application using PHP CLI features. Its one of the basic requirements for all aspiring PHP Developers and PHP Gurus find it very handy when it comes to dealing directly with the core Operating System functions. Its even more interesting when working on Unix-based environment.

It is far more easier to be able to write scripts for the shell in PHP. And Zend Framework plays a very important role with its implementation of the Zend Framework library which has several useful components to make performing tedious tasks, a breeze. You can easily access the Zend Framework components and their configurations as if you are writing a normal MVC app, but without loading any unnecessary resources or invoking the MVC stack.

If is often and always not necessary to load controller actions when performing a simply task for your PHP CLI–dependent application, as a matter of fact it is absolutely inefficient to do so, as you end up introducing more problems into your application and using countless resources just to execute a CLI application. Zend Framework provides a way to solve these problems by implementing the Zend_Application component.

Zend_Applicaton
To begin with, add the following sets of code in your web application’s bootstrap file often being “index.php” – a script that sets up and launches an application. It looks something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
 
// Initialize path to application directory
defined('APPLICATION_PATH')
    || define('APPLICATION_PATH',
              realpath(dirname(__FILE__) . '/../application'));
 
// Initialize application environment
defined('APPLICATION_ENV')
    || define('APPLICATION_ENV',
              (getenv('APPLICATION_ENV') ? getenv('APPLICATION_ENV')
                                         : 'production'));
 
require_once 'Zend/Application.php';
$application = new Zend_Application(
    APPLICATION_ENV,
    APPLICATION_PATH . '/configs/config.php'
);
 
$application->bootstrap()->run();

With Zend Application you have the flexibility of choosing what resources you intend to  bootstrap, instead of referencing it in your application config and bootstrap (_init methods.) This script assumes the use of email and database to drive the point across:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
 
// Initialize path to application directory
defined('APPLICATION_PATH')
    || define('APPLICATION_PATH',
              realpath(dirname(__FILE__) . '/../application'));
 
// Initialize application environment
defined('APPLICATION_ENV')
    || define('APPLICATION_ENV',
              (getenv('APPLICATION_ENV') ? getenv('APPLICATION_ENV')
                                         : 'production'));
 
require_once 'Zend/Application.php';
$application = new Zend_Application(
    APPLICATION_ENV,
    APPLICATION_PATH . '/configs/config.php'
);
 
//restrict the application to limited resources needed for this script to run.
$application->bootstrap(array('db', 'mail')); // loading the database and mail functions

Once we’ve completed the bootstrapping process and loaded only specific minimum system resources required for your application to load, you can then access the resources from the application like the code snippet seen below:

1
2
3
$db = $application->getBootstrap()->getResource('db');
// fetch records for the contacts table
$row = $db->fetchRow('SELECT * FROM contacts');

As you see, working with Zend Framework is as simple as 123, well not quite as easy, in its literal sense but you get my point!

Mar
27

Google Listen – Android App for Podcasts

Android App

Ever since I got my latest gadget, yes, I said it “The HTC Desire HD”, I have been meaning to find a convenient way to listen to my favorite podcasts from the killer handset. In my search to redeem myself since I have been used to using iTunes on my previous iPhone, I found Google Listen, just the app to do the trick.

Google Listen
Google Listen can be found on the Android Market free for download. It has some cool features which allows the ability to sync and manage podcast feeds through Google Reader.

After playing around with it, I found it to be quite useful since in the past I usually listen to roughly 1 hour of podcasts everyday on iTunes without any hassles.

It quite easy to setup, all you really need to do add an RSS feed subscription.

Adding subscriptions is very straightforward, but if you really can’t remember the RSS feed links to your favorite podcast channel, just use the search feature and all there is left to do is simply sit back, keep your mind open and just listen!

Older posts «