GoodTodo PHP and SQlite App

I really like to keep track of tasks and projects (personal or otherwise) I work on. I used to keep my todos list in notepad or by using some other sticky notes application but I wanted dead simple todos app with beautiful looks and simple to use without irrelevant options or goodies. So here I introduce GoodTodo; a todo app made via PHP and SQlite. I chose SQlite because I wanted to make sure that app is portable and of course since it’s small todo app, choosing SQlite for it makes perfect sense. I have used flightPHP framework and idiorm ORM for it.

Here are its screenshots:

localhost todo home localhost todo settings localhost todo categories

 

How to use:

Make sure you have wamp/xampp or other stack installed. Download the app and put in www/htdocs folder and browse to that folder via browser something like http://localhost/todo. Please make sure you have sqlite extension turned on from php.ini if it isn’t already.

So go ahead and download GoodTodo to keep track of your todos.

 

Developer Wallpaper

I like to keep my desktop clean and icons categorized. I had been using Fences but it seems it doesn’t work well with Windows 8.1 and is no more a free product. This made me create custom wallpaper that would help me with categorization of desktop icons thereby allowing me to coin the term Developer Wallpaper or Programmer Wallpaper. I create two categories; one for development related softwares while other for general programs. Here is how my office desktop looks:

desktop

You can download above wallpaper or psd of it below.

desktop_background_template

 

Download PSD

So simply download wallpaper and use it by setting appropriate stretch settings.

My Local Development Workflow with WAMP/XAMPP, GIT and Google Drive

I like to share my local development workflow which has turned out to be extremely useful in that all my projects’ files are versioned and on the cloud. I use git to keep my files versioned and Google Drive so that I can access my projects anywhere. In this post, I will share really cool stuff that you definitely should consider implementing for your own projects.

If you don’t know about git and its benefits, there are numerous compelling reasons why it is useful, you might want to check out:

The benefits of keeping all my files and projects on the cloud like Google Drive should be obvious but if you are still not sure, check out:

Although there are many other cloud storage services such as Microsoft SkyDrive, Dropbox, Box, Bitcasa, etc but I chose Google Drive since it gives 10GB of free space which should be enough for my development needs. If that’s not enough for you, you can create another Gmail account and get another 10GB free. You might want to read their usage policies too if you want.  You may also consider using Bitcasa which gives you unlimited space but since it is new, I can’t personally trust it as yet.

Installing Google Drive

Step 1: Create a new Gmail account to be used with Google Drive client software. Although you can use your existing account but it is good idea to create a new one used for your projects’ backup only.

Step 2: Download Google Drive from here or here. During the installation, you would be asked to specify the folder path which will be synchronized with Google Drive. Make sure that you specify a folder present on any drive other than your OS drive so that even if your system crashes or corrupts, your projects remain intact. For example, I have that folder on path D:/Google Drive/

Step 3:  Once installed, run Google Drive software and specify the credentials of your newly created Gmail account.

Using Google Drive with WAMP/XAMPP

Now that we’ve setup google drive, it is time to setup document root to google drive folder and create virtual host. This would allow you to run your local projects through WAMP/XAMPP from google drive folder. The reason why we do this is that since google drive folder will be sync by google drive software, any project we put in that folder will automatically be uploaded in your google drive account.

Note: I am using XAMPP but if you are using WAMP, some settings or file paths might be different, you should consider reading its documentation.

Step 1: Inside your google drive folder, create a new folder named webroot making whole path X:\Google Drive\webroot where represents your drive letter.

Step 2: Assuming you have specified google drive folder to be  D:/Google Drive/, open httpd.conf (normally located at apache\conf folder) file in notepad or other text editor and find the line Include “conf/extra/httpd-vhosts.conf”. If there is a hash (#) before that line, remove it. Now find the line with <Directory /> and you should see something similar to:

<Directory />
 AllowOverride none
 Require all denied
</Directory>

Change Require all denied  to Require all granted

Or if you see something like:

<Directory />
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Deny from all
</Directory>

Change it to:

<Directory />
    ........
    Allow from all
</Directory>

Now come to bottom of the file and add:

<Directory "D:\Google Drive\webroot">
  Options Indexes MultiViews
  Order Allow,Deny
  Allow from all
</Directory>

Save the file and close it.

Step 3: Open httpd-vhosts.conf (normally located at apache\conf\extra folder) and add these lines at the end of it:

<VirtualHost 127.0.0.1:80>
    DocumentRoot "D:/Google Drive/webroot"
    ServerName gdroot.loc
    ServerAlias gdroot.loc
    ErrorLog "D:/Google Drive/webroot/logs/error.log"
    CustomLog "D:/Google Drive/webroot/logs/access.log" combined
</VirtualHost>

Save the file and close it. Notice that we have specified gdroot.loc as address which actually means google drive root (.loc signals that it is local folder) which actually maps to your google drive webroot folder eg D:/Google Drive/webroot. Notice that you could name it anything you want like mycoolwebsite.com, yourname.com, etc but of course that is local folder running from your own computer.

Step 4: Open hosts file in notepad or other text editor located at X:\Windows\System32\drivers\etc where stands for drive letter where your OS is installed. At the end of that file add this line assuming you specified URL in above step as gdroot.loc:

127.0.0.1       gdroot.loc

Or if you also use port to access your LAMP/XAMPP URLs, specify that as well:

127.0.0.1:PORT_NUMBER_HERE       gdroot.loc
Note: If you can’t edit hosts file, you need to have file owner permission, search on google how to do that.

Restart apache and access the new url by typing gdroot.loc in your browser. You should see screen similar to when you go to http://localhost.

Congratulations ! you have a nice workflow now. You can now put all your existing our new projects inside your new document root which was assumed to be located at D:\Google Drive\webroot and now all your projects are sync with google drive and automatically uploaded to your google account which you can access anywhere. For example, you can now access your projects at office or any other computer by installing google drive client software  there and telling it sync/download your webroot folder. Your projects are now always there and backed up on the cloud :)

Let’s take cool stuff one step further by using git so that our projects file are also versioned. If you don’t know much about git and its benefits consider reading links posted above or below in the Git Resources section.

Using Git with a Central Repository

Creating and using central repository is especially useful in a team. If you just want to keep your projects versioned and are the only developer working on a project, the normal flow is (unless you track your project to remote host such as github):

  • modify files
  • commit your changes
  • repeat

So essentially you can skip this section if you just want to version your project files and are only developer working on a project.

Step 1: Download msysgit from here, choose first link from there. Install it with default settings.

Step 2: Go to your google drive folder (D:\Google Drive\) and create a new folder there named central.git

Step 3: Right click on newly created folder and choose Git Bash Here and type: git init –bare

Step 4: Create a test project folder named myproject inside your normal WAMP/XAMPP webroot/htdocs folder or google drive webroot folder mentioned above (Although you can git-manage any folder anywhere on the drive but naturally we want to git-manage projects that we run from webroot/htdocs folder).

Step 5: Right click on newly created folder, choose Git Bash Here and issue these commands one by one:

git init
git remote add central /e/Google\ Drive/central.git/
git push --all central
git push --set-upstream-to central master

Great! now we’ve setup central repository for all our git-managed projects and we can commit, push, fetch all changes from that central repository. For any new repository, you can now issue commands like:

git clone /e/Google\ Drive/central.git/
git fetch /e/Google\ Drive/central.git/
git push central
and so on

Hope you liked the post and have fun !

Git Resources

Happy New Year & 2012 in Review

I wish you all a very happy new year that brings a lot of happiness to you, your family and friends,

No much blogging this years but here is the summary of my blog :)

Here’s an excerpt:

19,000 people fit into the new Barclays Center to see Jay-Z perform. This blog was viewed about 77,000 times in 2012. If it were a concert at the Barclays Center, it would take about 4 sold-out performances for that many people to see it.

Click here to see the complete report.

Facebookifying Pages

I became really sick of Google Chrome because of its crashing every now and then. Somebody informed me about SRWare Iron which is basically Chrome-like browser and I really like it for personal use, it has never crashed for the last few months I have been using it.

Though this browser works fine, I noticed that on some sites where there is facebook connect, you get “FB is not defined”, this seemed to happen only with this browser. I figured out that  for some reason, it does not fetch the FB’s JS API file eg http://connect.facebook.net/en_US/all.js. Now I love this browser for personal use but I was unable to use on some sites such as slideshare.net.

This made me inject FB object manually in the page which produced above error. For that I created bookmarklet which injected FB script in current page and told about that status. Here is the code for that bookmarklet you can add to your bookmarks toolbar:

</pre>
javascript: function loadScript(src, callback) {
 var s,
 r,
 root_node = document.createElement('div');
 s = document.createElement('script');
 s.src = src;
 s.onload = s.onreadystatechange = function() {
 if (!r && (!this.readyState || this.readyState === 'complete')) {
 r = true;
 callback()
 }
 };
 root_node.id = 'fb-root';
 document.body.appendChild(root_node);
 document.body.appendChild(s)
 }
loadScript('http://connect.facebook.net/en_US/all.js', function() {
 var el = document.createElement('div');
 el.style.position = 'fixed';
 el.style.textAlign = 'center';
 el.style.fontWeight = 'bold';
 el.style.MozBorderRadius = '5px';
 el.style.WebkitBorderRadius = '5px';
 el.style.borderRadius = '5px';
 el.style.margin = '0 auto 0 auto';
 el.style.top = '0';
 el.style.left = '40%';
 el.style.color = '#fff';
 el.style.padding = '5px 10px 5px 10px';
 el.style.backgroundColor = (typeof window.FB === 'object') ? 'green': 'red';
 el.innerHTML = (typeof window.FB == 'object') ? 'Page Facebookified :)': 'Unable to Facebookfiy :(';
 document.body.appendChild(el);
 window.setTimeout(function() {
 document.body.removeChild(el)
 }, 2500)
 });
<pre>

However, with this one would have to press Facebookify bookmarklet button manually. I then thought of auto-inserting FB object in each page I visited, so I went on developing a Greasemonkey addon for this which  automatically inserts FB object into visited page as soon as DOM is available. You can download it here if you want:

Greasemonkey Facebookify Userscript

This way, the FB problem is no more there and I continue to use this nice browser.
This post can be helpful for anyone who is also using SRWare Iron browser or anyone who wants to play around with FB JS API by injecting it on any page.

Free Admin Template

While working on a website or your custom CMS, you need to have an admin template and if you are already provided with one by designer or anyone, that’s good but sometimes you don’t have that option or you want to work on your personal project for which you need the admin template but designer isn’t available or you don’t want to buy an admin template or hire a designer. I often come across this requirement where I need an admin template which should have these features:

  • Easy to customize
  • Slick and nice looking interface
  • Can be modified to as many links as needed, suitable for small to big websites
  • Nice button and form styles
  • Nice looking info messages
  • Can be used as admin for any kind of website

Today I share with you guys an admin template that I created for my personal use. That’s free, you can use it for personal or commercial use.

Screenshots:

This slideshow requires JavaScript.

Download

I am an author on other famous sites !

I am pretty excited today because my very first post Create Simple Dropdown Menu Using jQuery has been approved on famous instantshift.com. In a matter of few hours, my post was tweeted and socialized/bookmarked on social/bookmarking networks with good numbers and still increasing, good feedback coming from all around !

In fact, I really like this idea of writing articles for various famous sites. It boosts and markets you or your company tremendously. Other than that, they also pay you for your articles, the payment varies on popularity and quality of the article and content. My first article was approved with fairly good amount I believe. I am all set to writing articles for those famous sites related to my expertise that is PHP, ASP 3.0, jQuery, CSS, HTML, Ajax, Javascript and more.

If you have expertise in web design or web development field and possess good writing skills, give yourself a go ! It is really worth of it, there are a lot of benefits in writing articles for such famous sites.

Happy Blogging !

.