Create WordPress Widget for the Yelp Bling

Internet 2 Comments

I was writing a Yelp review (log into Yelp and click the “About Me” tab) and noticed a small google map object on the Yelp page that showed the locations for my reviews one by one. At the bottom of that object was a link named “I want this bling on my blog”. So I clicked on it. It took me to a page where I could generate the HTML code for my very own Yelp Bling object. (I kept the default Javascript version and did not select the Flash version.)

To put the Yelp Bling on my blog, I decided that the cleanest way is to create a WordPress widget to contain all that bling. I inputted a border color (C33907), text color (000000) and background color (FFFFF) which matched my blog’s theme. To find the RGB (Red, Green, Blue) values from your theme, use the Windows Paint program per these instructions.

Follow these instructions to create your very own Yelp Bling widget:

  1. Create a text file named “yelpbling.php” with the following content:
    <?php
    /*
    Plugin Name: YelpBling
    Plugin URI: http://www.chanhvuong.com/
    Description: Yelp Bling widget
    Author: chanhvuong.com
    Version: 1
    Author URI: http://www.chanhvuong.com/
    */

     
    function yelpbling_widget() {
    ?>

    <!-- Paste generated Yelp Bling HTML code here -->

    <?php
    }
     
    function init_yelpbling() {
       register_sidebar_widget("YelpBling", "yelpbling_widget");    
    }
     
    add_action("plugins_loaded", "init_yelpbling");
    ?>
  2. Paste your Yelp generated HTML code into the file under the “Paste generated Yelp Bling HTML code here” comment.
  3. Copy the “yelpbling.php” file to your web server’s WordPress plugin directory, usually “wp-content/plugins”.
  4. Log into your website as an administrator and select the Plugins tab. You should see the YelpBling widget listed.
  5. Activate the YelpBling widget.
  6. Go to the Appearance->Widgets tab and drag the YelpBling widget from “Available Widgets” into the Sidebar.
  7. View your blog and you should now see the Yelp Bling object in the Sidebar.

You may need to adjust the CSS style directives in the generated HTML code to make the Yelp Bling object fit nicely in the Sidebar. For example, I deleted the <div> containing the “Recent reviews by …” headline link (to compensate, I adjusted the header height to 25px from 40px) and the <div> containing the “What’s this?” footer link.

In the end, I decided that the Yelp Bling object did not belong on my blog and removed it.

2 Comments

Use the Macbook Keyboard and Trackpad With Windows 7

Windows 2 Comments

I have a 15in Macbook Pro that can boot into Windows 7. For portability’s sake, I do not use a separate PC keyboard/mouse, but instead have adapted to using the Macbook’s keyboard and trackpad with Windows 7. Below are some customizations I made to make the Macbook keyboard and trackpad more useful with Windows. These instructions pre-suppose that the Apple Boot Camp Windows drivers have already been installed.

Customize the Macbook Keyboard

You can use the AutoHotkey utility to remap keys on the Macbook keyboard to adjust to your usage style. For example, I tend to use the delete key more often than the backspace key, so I usually swap the backspace key (the Mac “delete” key) with the delete key (the Mac “fn+delete” combo key). Here’s how I do the swap:

  1. Install and run AutoHotkey. I downloaded the AutoHotkey_L installer.
  2. Create a script text file named “SwapBSDel.ahk” (the .ahk extension is mandatory) with the following content:
    Delete::Backspace
    Backspace::Delete
  3. Run the script by double-clicking on the “SwapBSDel.ahk” file to have AutoHotkey launch with it.

AutoHotkey is a very powerful tool. For example, here’s a way to add a menu to enable/disable the delete/backspace swap above.

Note: There are other key mapping utilities such as SharpKeys, but I prefer AutoHotkey because it is temporary and the key remaps only take effect when I run the script. If I want to apply the changes more permanently, I would configure the AutoHotkey script to run automatically during startup (put a shortcut to the script file in the Windows Startup folder).

Also, the Page Up/Down keys are missing from the Mac keyboard, but there are keyboard shortcuts: fn and up arrow for Page Up, fn and down arrow for Page Down, fn and left arrow for Home, and fn and right arrow for End.

Customize the Macbook Trackpad

twofingergestureBecause I configured one-finger tap-to-click/drag and two-fingers tap-to-right-click/scroll functionality with Boot Camp, I encountered several issues and also found their workarounds. To configure the one-finger and two-fingers tap functions, do the following:

  1. Run the “Boot Camp Control Panel” and go to the Trackpad tab.
  2. Under the One Finger section, check the “Tap to Click” and “Dragging” boxes.
  3. Under the Two Fingers section, check the “Secondary Tap” box.
  4. Click the OK button.

The two-fingers scroll is so fast that it is not useable with documents and browsers. To slow down the scrolling speed, I had to do the following:

  1. Run Control Panel.
  2. Type “mouse” into the “Search Control Panel”.
  3. Click on “Change mouse settings” and then the Wheel tab.
  4. Under “Vertical Scrolling”, change “The following number of lines at a time:” value to be 1, instead of 3.
  5. Click on the OK button.

When doing a multiple item selection and then drag to move/copy items, the double-tap-to-drag will deselect the items. I had to hold down the Shift (move) or Ctrl (copy) key to preserve the multiple selection when doing the double-tap-to-drag.

When doing a double-tap-to-drag on items and even a window, there is a half second pause after the double-tap, before the drag action occurs. This pause may interfere with your intention and result in unpredictable behavior; i.e., the window gets resized or moved to a random position. I’ve taught myself to insert a manual pause before doing the drag action to avoid this issue. (The problem is a known issue with the Boot Camp driver; unfortunately, even at this late version, Apple has not corrected it.)

There is a free 3rd party Mac trackpad driver called Trackpad++ which may solve the above drag-pause problem. In addition, Trackpad++ may help to eliminate the accidental drag-n-drop actions (which I encounter now and then) and provide support for 3-finger and 4-finger gestures. I will try it out one of these days.

Note: If you do not use the one-finger and two-fingers tap functionality, you may not encounter the issues above.

Customize the Windows 7 Aero Behavior

Because my Macbook’s 1440×900 resolution is not that large, the Windows 7 Aero Snap behavior (where windows are automatically maximized or resized when dragged close to the edges of the desktop) occurs quite frequently. In almost all cases, performing an Aero Snap is not my intention. Here’s how I disable the Aero Snap feature:

  1. Run Control Panel.
  2. Click on the green “East of Access” header link.
  3. Click on the blue “Change how your mouse works” link.
  4. Check the “Prevent windows from being automatically arranged when moved to the edge of the screen” box.
  5. Hit the OK button.
2 Comments

Install Eclipse Indigo 64bit on Windows 7 64bit

Windows Development 6 Comments

I recently installed the latest version of Eclipse on Windows 7 64bit and noticed some changes which I wanted to document below. I will copy some tips from my previous posts concerning Eclipse (on Mac OS X and Windows) here for your convenience.

Note: These instructions also work for the latest Eclipse Juno version. Just replace references to Indigo, like in the Eclipse plugin URLs, with Juno.

Install Eclipse

  1. Download the latest Eclipse. I chose the “Windows 64 Bit” download link for the “Eclipse IDE for Java Developers” package. (I downloaded a zip archive named “eclipse-jee-indigo-SR2-win32-x86_64.zip”.)
  2. Unzip the Eclipse zip archive using WinZip or 7-Zip (7-Zip is free). Do not use Windows’ built-in zip support as it will create a corrupt Eclipse installation. (Update: With the latest Eclipse Juno release, Winzip will return an error. 7-Zip will still work fine.)
    • When I attempted to run Eclipse after unzipping with the Windows’ built-in zip support, I got an error. In the error log file was this exception: “java.lang.IllegalStateException: Unable to acquire application service. Ensure that the org.eclipse.core.runtime bundle is resolved and started (see config.ini).” I was not able to find the “config.ini” file.
  3. Start Eclipse and select your workspace location. (If you select an old location which was used by an older version of Eclipse, make sure to delete the “.metadata” sub-directory there first; otherwise, your new Eclipse will display old plug-ins and IDE modes which may not be installed.)
  4. The latest Eclipse versions set the default search behavior to reuse the editor. This default behavior can be annoying because it prevents you from being able to simultaneously view more than one search result. Opening a new search result would reuse the editor tab and cause the previous search result to become unavailable. To configure Eclipse to open each search result in a new editor tab, do the following:
    • Go to menu “Windows->Preferences->General->Search”.
    • Uncheck the “Reuse editors to show matches” option.

Install Javascript Development Tools (JSDT)

  1. Run Eclipse.
  2. Go to the Eclipse menu “Help->Install New Software…”
  3. Click on the dropdown arrow for the “Work with:” box and select “Indigo – http://download.eclipse.org/releases/indigo”. (If you don’t see this entry, just type in the URL manually.) The table will populate with a bunch of Indigo-compatible plugins (it may take a couple of minutes to do so the first time).
  4. Type “javascript” into the “type filter text” field to show only the Javascript related plugins.
  5. Check the “JavaScript Development Tools (JSDT)” (under “Programming Languages”) and click Next, Next, accept the license, Finish.
  6. Click on “Restart Now” to restart Eclipse.

Install PHP Development Tools (PDT)

To install the PDT, repeat the steps above with the following modifications:

  1. Type “PHP” into the “type filter text” field to show only the PHP related plugins.
  2. Check the “PHP Development Tools (PDT)” (under “Programming Languages”) and click Next, Next, accept the license, Finish.
  3. Note: For Eclipse Juno, when I first selected the PDT under “Programming Languages”, the installation failed. When I then selected the PDT under “General Purpose Tools” after restarting Eclipse, it installed successfully. So if it fails for you, just restart Eclipse and try again with the PDT under “General Purpose Tools”.

Install Subversion Integration (Subclipse)

  1. Run Eclipse.
  2. Go to the Eclipse menu “Help->Install New Software…”
  3. Type “http://subclipse.tigris.org/update_1.8.x” into the “Work with” field and the table will be updated with installation packages available at that location.
    • You can look up the latest Eclipse update site URL for Subclipse here.
  4. Check the “Subclipse” package and click Next, Next, accept the license, Finish.
  5. If the Security Warning dialog about the “unsigned content” appears, click Ok to accept.
  6. Click on “Restart Now” to restart Eclipse.

Note: If you install a command line Subversion client (I’ve successfully used the CollabNet Subversion Client on Windows 7 64bit) and put it in the Windows search path (%PATH% environment variable), make sure that the Subversion client version is compatible with Subclipse. Otherwise, Subclipse will stop working. For example, Subclipse 1.8.x is compatible with Subversion 1.7.x.

Problem: I cannot pin Eclipse to the taskbar!

If you find that you cannot pin the running Eclipse icon (right-click menu doesn’t have the option) to the Windows 7 taskbar, it may be because Eclipse is using the JRE (“C:\Windows\System32\java.exe”), instead of the JDK. Even if you find the Eclipse.exe file directly and pin it (using the right-click menu), when you run Eclipse, the running Eclipse icon will be a separate, second icon in the taskbar.

The solution is to install the JDK (Java SDK 1.6 or newer), set the %JAVA_HOME% environmental variable to the JDK directory, and set the %PATH% to have “%JAVA_HOME%\bin” as the first entry. This will ensure that Eclipse will use the JDK and you will then be able to pin the running Eclipse icon to the taskbar.

  1. Right click on Start->Computer and select Properties.
  2. Click on the “Advanced system settings” link on the left and then the “Environment Variables” button.
  3. Under “System variables”, click on the “New…” button, input JAVA_HOME as the name and the JDK installation path as the value, and click OK.
  4. Under “System variables”, double-click on the “Path” variable and add “%JAVA_HOME%\bin;” (without double-quotes) to the front of the “Path” value, and click OK.
  5. Run Eclipse and pin its icon to the taskbar.

Problem: Eclipse complains about a missing org.eclipse.swt jar file!

Note: This issue occurs with Eclipse Mars, a newer version than Indigo.

When attempting to do an Ant build, Eclipse throws the following error message: “The archive: C:/Program%20Files/eclipse_lunar/plugins/org.eclipse.swt.win32.win32.x86_64_3.104.0.v20150528-0211.jar which is referenced by the classpath, does not exist.”

This is an Eclipse Mars bug which occurs when Eclipse is installed under a directory path with a space in its name, such as “C:\Program Files”.

To fix, create the requested “C:\Program%20Files” as a symbolic link:

mklink /d C:\Program%20Files "C:\Program Files"
6 Comments