Tag Archives: web development

Wordpress Plugin

Some old posts restored and Other updates

Leave a reply

I know that I haven’t post anything in a while. I have been busying with the new site lately. In fact, today is the first time I visited this blog after the last post I wrote about two weeks ago.

Anyway, I discovered that the traffic has been surprisingly increasing since this blog relaunched a while ago. All of these traffic surges are thanks to the posts I wrote two years ago or so when I was still using Linux. As you know, I already deleted these posts because of the white screen of death, which means that the visitors of these links were presented with the 404 error page.

Based on the traffic log, I restored some of the posts which are still popular today from my backup copy of the site. These posts didn’t actually stored in the WordPress files. They stored in the WordPress MySQL database. I will write about how to do a scheduled backup of the database in another post.

Here are the restored posts with no specific order:

Unfortunately, not all of the posts are recoverable. Here is one post which I couldn’t find. I can’t remember the exact content for the post. But by looking at its URL, I think it is about using jQuery to generate the breadcrumb navigation.

The URL for each of these post are maintained so that others can visit the posts from other sites without updating their links. This is achieved by changing the publishing date to the original publishing date. For example, the publishing date for the post wrote on 12/19/2010 was set to 12/19/2010 and so on.

The content for these posts are almost original. I removed the images in these posts since I don’t have them anymore. The original comments were retained for nearly all of the posts thanks to Disqus.

I will be adding more of these old posts as they appear in the traffic log.

Now onto the updates for the site. In the next several days, I will be creating the child theme for this blog based on the Twenty Twelve theme. The upcoming posts will be the daily report for the child theme features of the day.

As of right now, I’m focusing on the WordPress development, mainly the plugin. For the last several months, I have been modifying the WordPress plugins for others. Recently I started my own WordPress plugin project. It will be used to managing my modified plugins and others’ feedbacks for  my plugin modification service. If all goes well, I will publish this plugin to the WordPress plugins repo.

That’s all for this post. Be sure to leave a comment below to discuss which of my old posts do you want me to publish except for those that were already on the blog, as well as other feedbacks for this post.

header

rabbweb, A Gameplay and Web Development Vlog site

2 Replies

Today I’m announcing the official opening for my new site, rabbweb. It’s a vlog (video blog) site dedicated to the gameplay and web development tutorial videos. Right now I’m focusing on the iOS games. However, in the future, I will be including console games as well.

As I stated in the last post, this is the side project for me. So I will still be focusing more on the web development projects.

And I haven’t decided on how the web development tutorial videos should format on the site yet. Right now on the site, it’s just about the iOS games.

Please check out the site and tell me what do you think in the comments below. Thanks.

Working with jQuery and CakePHP

Leave a reply

Recently I’m working with CakePHP and SQLite to develop a gallery for a client. This is going to be my first CakePHP app.

While I’m working on the admin section, I wanted to allow the client to see the image once the image filename field is out of focused so that he could see if it’s the correct image.

The only JS library included with CakePHP is Prototype. Fortunately, the latest version of CakePHP (1.3.11 as of right now) allows us to include with other JS library. I included jQuery with the help of Js helper:

[php]var $helpers = array("Js"=>array("Jquery"));[/php]

The above code is included with the whatever controller(s) you want to use this helper. In my case is galleries_controller.php and images_controller.php.

Then I just need to add the following code into the corresponding views, in my case is some of the admin views (admin_edit.ctp, and admin_add.ctp):

[php]echo $this->Js->set("imageLoc", $this->Html->image("0"));

echo $this->Js->get("#GalleryCover")->event("blur", "$(‘#cover’).html(window.beta.imageLoc.substring(0, window.beta.imageLoc.length-12) + ‘images/’ + $(‘#GalleryPath’).val() + ‘/thumb/’ + $(this).val() + ‘\" />’);");

[/php]

Note that I used image object in the Html helper to generate a dummy img tag so that I could precisely get the image folder location in the webroot folder. Then I used set object in the Js helper to transfer this generated PHP value to Javascript variable “imageLoc”. The second line is self-explanatory if you know jQuery. Here is the documentation in the CakePHP Cookbook for you to review.

In the jQuery code section of the second line, I used the substring function to remove the last 12 characters in the img tag (0″ alt=”" />). And used the html function to include the generated code into the “cover” div. Every time the “GalleryCover” field is blurred out of focus, the image inside the “cover” div would change to the corresponding images.

If you need more information on how to use CakePHP generated Javascript variables, please refer to the second article in the reference section.

Do you have any other tips on how to incorporate jQuery into CakePHP? Please share them in the comment below.

Reference

My First Tip on using Ubuntu with Chrome OS on CR-48 Notebook (Updated)

Leave a reply

Update (12/19/2010): I wrote a post on how to use your flash/USB drive to (re)install Ubuntu on the CR-48. Check it out.

Update (12/18/2010): I just discovered that .bashrc file is never executed in Chrome OS unless running another bash after chronos is logged in, and .profile is the file which being executed after each login. Therefore I changed the following instruction to .profile for Chrome OS. If you already created .bashrc file in the chronos home folder, you just have to rename it to .profile using the command below:

[bash]
mv .bashrc .profile
[/bash]

Introduction

I have used the newly received CR-48 from Google for two days. I enjoyed so far for web browsing, but not so for web development / programming. Since I couldn’t find any good IDE on the cloud which has support for WebDAV, I decided to following the instruction on the Chromium Project website to install Ubuntu onto this device. After several hours of installation, Ubuntu loaded to the device. However, because it comes from a VirtualBox disk image, it’s nearly impossible to reinstall Ubuntu without re-transferring the disk image from my laptop to this notebook which is a 5GB file, it would spend another 5 hours just for transferring this file over ssh. I’m trying to shorten this long waiting hours. I will post another tip if I find a way. But for now, here are the two scripts I wrote to switch between Ubuntu and Chrome OS using the alias command.

Steps

First of all, I assume you also received a CR-48 notebook and installed Ubuntu on it by following on this page.

This first script is for Ubuntu:

  1. Open the file named .bashrc in the home folder using your favorite text editor (make sure to show the hidden files by pressing Ctrl+H).
  2. Add the following line to the end of the file:
    [bash]
    alias chromeos=’sudo cgpt add -i 6 -P 0 -S 0 /dev/sda;echo "Switched to Chrome OS, restart the machine to take effect"’
    [/bash]
  3. Open a new terminal window to load the new alias.
  4. Type chromeos and a message will be displayed stating that you need to restart to switch to Chrome OS
  5. Restart your device and you are in the Chrome OS.

Now inside the Chrome OS:

  1. Press Ctrl + Alt + -> (the Forward button in the first row) and login as chronos
  2. Since Chrome OS also uses bash, we can write to the .profile file, but this time in the chronos home folder.
    [bash]
    qemacs .profile
    [/bash]

    The command above creates and opens a new file called .profile inside the home folder using the only text editor available in Chrome OS qemacs.

  3. Insert the following line into .profile
    [bash]
    alias ubuntu=’sudo cgpt add -i 6 -P 5 -S 1 /dev/sda;echo "Switched to Ubuntu, restart the machine to take effect"’
    [/bash]
  4. Execute bash to launch another instance of bash, or if you are confused, you could just logoff current session by typing exit command and login again.
  5. Typing ubuntu command to switch to Ubuntu on the next startup.
  6. Restart your device to begin using Ubuntu.

In the future, you could just use chromeos and ubuntu commands to switch back and forth between Chrome OS and Ubuntu without changing back to normal mode using the small switch on the back of the battery.

Enjoy the free dual-boot notebook from Google.

Import additional snippets to Bluefish

3 Replies

Update (12/5/2010): As Matt pointed out in the comments section below, you need to replace HTML code for the special characters with raw characters during the import process. For example, replace &lt; with the less than (<) character. Scroll down for more information on the replacement process. Thanks, Matt.

In the last post, I talked about the snippets plugin in Bluefish that allows me to import HTML 5 and CSS 3 tags as well as other languages for reference and reuse purposes. This time I’m going to show you how to import the snippets from the Bluefish wiki into the Bluefish snippets menu.

  1. First, go to this page to copy the xml code of your choice. Make sure not to copy the <pre> tag.
  2. Paste the copied code into a text editor and save as a xml file.
    Update (12/5/2010): Make sure to use the Find and Replace feature in your text editor to replace all the HTML code for special characters with the actual characters. Here are some common ones (HTML code is in the parentheses): < (&lt;), > (&gt;).
  3. Start Bluefish and switch to the third tab on the left side bar.
  4. Right-click inside the left-side bar and choose Import.
  5. Select the xml file you just saved and click Open.
  6. If the xml code was copied correctly, there should be a new branch appear inside the left sidebar.
  7. Right-click the newly created branch and choose Edit snippet to change the displayed name if you want.
  8. Now you can browse through the code snippets and hover the cursor over one element to learn more about the new tags of HTML 5.

Do you have any questions regarding the import process? Feel free to leave a comment below.

Switching my Development Environment to Bluefish (Updated)

2 Replies

Update (10/15/2010): It seems that the snippets plugin for Bluefish is just used for reference and reuse of code. It doesn’t affect the auto-completion feature, which disappoints me. However, it could help me to learn new HTML 5 and CSS 3 techniques.

I had always used NetBeans for my only web development environment for a long time. Today when I tried it on the netbook and felt a little sluggish. Perhaps it’s because it is a multi-purpose IDE – PHP, Java, C, and Ruby. I don’t use many of its features, such as upload and compile/run, because I use FireFTP and command line to upload and compile code. These features are waste of RAM space and I think that’s the cause to slow down the system.

Therefore I tried to search for a light-weight web development IDE for GNU/Linux and found Bluefish. It has the features I need for a perfect IDE to develop web applications. The auto-complete and spellcheck are two of my most used features. It also has the snippets plugin which I think it is used to add more tags support for the auto-completion feature, such as the HTML 5 tags add pre-defined tags for the reuse purpose.

Bluefish starts up on my netbook very fast. It also runs very smoothly compare to the NetBeans. I enjoyed using it so far. To install Bluefish, type the following command:

sudo apt-get install bluefish

It should be placed in the Programming section after installed it.

By the way, it appears to also support the C language according to the snippets, although I have not test it yet.

Please share your thoughts in the comments section on how does the Bluefish IDE work for you.