der|Design

WordPress 3.1.2 Actions & Filters Reference

der — Wed, 11 May 2011 00:00:05 +0000

This is a complete reference of all the WordPress Actions & Filters available in version 3.1.2. Not all of the Actions and Filters are documented in the Codex.

You can also view the source code (from the WordPress Trac) of the files where the action or filter is being executed. You are brought directly to the line number in question. Really good to understand what’s going on under the Hood.

Actions Reference Filters Reference

Cross Browser setTimeout in JavaScript

der — Mon, 11 Apr 2011 22:09:26 +0000

According to the Mozilla Developer Network, in the Documentation for the window.setTimeout method, here’s what it does:

Executes a code snippet or a function after specified delay.

And here’s the syntax (also from MDN):

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);

As can be noticed in the syntax above, window.setTimeout accepts a series of parameters after the delay has been specified. This is good for all browsers, except Internet Explorer.

The Problem

Internet explorer has a different implementation of the window.setTimeout method. According to the Microsoft Developer Network, here’s the syntax:

iTimerID = object.setTimeout(vCode, iMilliSeconds [, sLanguage])

vCode represents the function pointer or string that indicates the code to be executed when the specified interval has elapsed. iMilliSeconds specifies the number of milliseconds, and sLanguage specifies a language string, which could be either jScript, VBScript or JavaScript.

This means that Internet Explorer expects a Source Language to be specified as the third parameter of setTimeout, instead of expecting one or more parameters to be passed to the function to be executed.

Microsoft’s Implementation differs from the Mozilla (and other modern browser’s) implementations. This means if you’ve written code in a way that the function patameter of setTimeout expect some arguments, then your code won’t work on any version of Internet Explorer.

The Solution

To overcome this limitation, I’ve decided to code a native implementation of setTimeout for Internet Explorer, making it compatible with the implementations of all the other browsers.

This means you can safely use setTimeout without worrying it will break your code in Internet Explorer. The script has been tested in Internet Explorer 6,7,8 and 9.

Live Demo View Source Download

To load the script, add the following Conditional Comment to your :

This will only load the script if the site is loaded using any version of Internet Explorer. On the other browsers the script won’t be downloaded, and the code will be treated as a regular HTML Comment.

This work is licensed under a dual MIT & GPL License.

Track empty directories with Mercurial/Git

der — Mon, 14 Mar 2011 21:50:37 +0000

Tracking empty directories is not a supported feature for all the SCM’s (Source Control Management tools) out there. Mercurial and Git can’t add empty directories to a repository, unless there is a file in it.

This limitation forces developers to create dummy/empty files inside a directory, in order for it to be added into the repository. I have coded a command line tool in python, that will help you create and delete these empty files dynamically.

Here’s the output when you run the command with the -h or --help option:

Usage: hg-touch.py [options] filename

Add or Remove placeholder files for SCM (Source Control Management) tools that do not support empty directories.

Options:
  -h, --help            show this help message and exit
  -p PATH, --path=PATH  search within PATH
  -r, --remove          remove FILE from any directory found on PATH

Creating placeholder files

When you run the command, it will create the files inside any empty directory in the directory specified by the -p or --path option.

The following command will create .hidden files in any empty directory found inside the /webroot/demo directory:

python hg-touch.py -p /webroot/demo .hidden

Internally, the script walks through the directory structure, finding empty directories and creating the placeholder files.

Deleting placeholder files

The command line tool can also remove the empty files you’ve just created, in case you want to rollback your last action.

The following command will remove the .hidden files from any directory found anywhere inside the /webroot/demo directory:

python hg-touch.py --remove -p /webroot/demo .hidden

You can also use the -r option instead of --remove.

You need to be extra careful when using the --remove option, since it will delete the files based on the filename you specify. For this reason, you need to assign filenames that you are pretty sure are placeholders. I personally use .hidden or .keep for the filenames.

Download

You can download the script from the following link:

hg-touch.zip

If you want to see how the script works, you can also view its source code.

This work is licensed under a dual MIT & GPL License.

Read PDF Files on your PS3 System

der — Sun, 27 Feb 2011 17:54:31 +0000

If you do a google search, you will see for yourself that a whole lot of people want to read PDF files on their PS3 Systems. There aren’t too many options available for those of us wanting to read our ebooks from the comfort of our beds, without having to sit in front of the computer (or have the laptop in bed the whole time).

1a) Converting your PDF to JPEG Images (Mac)

The first step of the process consists on converting your PDF File into a set of JPEG images, named sequentially. On OSX, You will use the Automator Script I have developed, which you can download from the link below:

Convert-PDF-to-JPEG-action.zip

After you’ve downloaded & extracted the Automator Action, double-click it to run it. It is going to prompt you for the PDF File you want to convert:

You will then be prompted for the Output Directory, which will be used to store all the images after they have been exported from the PDF File:

After you’ve chosen the Output Directory, the Automator Script will ask you for your desired Quality Settings, DPI & Format of the images.

Having a resolution setting of 200dpi makes the exported images considerably big. If you have a 1080p HDTV then you can definitely use such resolution. If you’re using a different resolution on your HDTV, then you can reduce the DPI setting until you’re satisfied with the results. You can start playing around from 72dpi, which is the default Resolution for screens.

You can set any resolution you want for the exported images. You can export to any of the image formats available. JPEG is the default since it’s an industry standard and it’s fully supported by the Playstation 3 Browser.

When you click on Continue, the Script will start working and it will present you with a small gear on the top right hand side of your menu bar, which means the Script is currently exporting the pages of your PDF File. Be aware that this process might take several minutes, depending on the size of the PDF and the speed of your computer.

After it’s done, you will be notified with a Growl Notification, letting you know the process has been completed:

Just after the notification appears, the Output Directory you’ve chosen earlier will appear in Finder, showing you all the exported images:

After you see those images, it’s now time to convert those images into a fully readable site, with navigation and all the bells & whistles.

Before we proceed to the nitty gritty, it’s time to show some love to the fellow linux users.

1b) Converting your PDF to JPEG Images (Linux/UNIX)

On (Ubuntu) Linux, you don’t have Automator, so you need to convert the files in some other way. For this, you need the Image Magick package. To install it, open your terminal, and run the following command:

sudo apt-get install imagemagick

This will install Image Magick and all its dependencies.

Now it’s time to convert the file to a sequence of JPEG images. In this example, we’re using the UbuntuServerBrochure804LTS.pdf file. As you can see in the command below, we set the image resolution using the -density command.

convert -density 200 UbuntuServerBrochure804LTS.pdf page.jpg

As in the previous section, we’re using a Resolution setting of 200dpi. As with the Automator Script method, this process takes a considerable amount of time, depending on the size of the PDF File, and the speed of your computer.

After you’re done, you will have all the images on the same directory where you’ve executed the command:

Important Note: It is very important for the next step, that you only have the exported images inside the output directory. The only thing that should be inside the output directory, are the exported images, nothing else. If there files other than images, then when the HTML is generated, you might have unexpected results. The Python Script expects only images to be present in such directory.

You also might be asking: But why didn’t you use Image Magick on OSX, it’s available on Darwin Ports? Well, I’ve tried it, compiled Image Magick and the result was not the same. The exported images were not Antialiased. When you use Automator, you’re using the built-in export capabilities of OSX. On linux it works pretty well, since you’re using native software built for such OS.

2) Generating the HTML from the Exported Images

After you have exported the images, it’s now Showtime! This step is compatible with both Mac & Linux, since they’re both UNIXes. To genereate the HTML, you need a Python Script that I generously coded and shared with you. Please download it below:

img2web.py

After you’ve downloaded it and extracted it, copy and paste it to the same directory where the output directory is. For the geeks: You can copy it to any directory on your $PATH.

To generate the HTML from your images, assuming the images are located on the output/ directory, run the following command:

python img2web.py output/

The script will ask you for the Page Title to use. This will be the Title of your HTML Book. Enter Ubuntu 8.04 Server, when prompted:

Page Title: Ubuntu 8.04 Server

After that, the Script will generate all the HTML files for your Book. Here’s the whole output from the moment you first run the command:

MacBook-Pro:test der$ ./img2web.py output/

  Copyright (c) 2011 Ernesto Mendez (der-design.com)
  Dual licensed under the MIT and GPL licenses.

 Page Title: Ubuntu 8.04 Server

- Creating Project Directory: 'Ubuntu 8.04 Server/'
- Copying images from source to img/
- Creating file index.html
- Creating file page-2.html
- Creating file page-3.html
- Creating file page-4.html
- Creating file page-5.html
- Creating file page-6.html
- Creating file pages.html
- Finished!

MacBook-Pro:test der$

And that’s it! you now have a directory with the same name of the Project Title you’ve specified. If you want, you can open the index.html file inside such directory, and start browsing the Book right away!

The next step, shows you how to setup a Web Server to be able to access the Book from yoru Playstation 3 System.

3) Starting a Web Server on your Computer

OSX has a built-in Web Server, which is started when you enable Web Sharing from your Preferences. To do that, go to your System Preferences » Sharing, and enable Web Sharing, as seen in the image below:

In this case, my LAN IP Address is 10.0.0.4, so this is the address that will be used to access your Book from your Playstation 3 System.

In this case, I can access my local Site by going to http://10.0.0.4/~der/. This will be different in your computer. Make sure you write down the address that appears on the Preferences window.

To make your book available in your local Site, just move or copy the Ubuntu 8.04 Server/ directory you’ve just created on the previous steps, to the Sites Folder, which is inside your Home Directory.

After you’ve copied your site to the Sites/ directory, you will be able to view the Book from your browser, when you access your local Web Server

3a) If you’re using Linux…

Linux doens’t come with a Web Server built-in by default. You need to either install Apache, Lighttpd or any other web server of your preference. This falls outside of the scope of this document. You can read this tutorial to get yourself started configuring a Web Server on your (Ubuntu) Linux system.

4) Reading the Book from your Playstation 3 Browser

After you have the Web Server setup, you can access the Book from your Playstation 3 Browser. The following image shows the awesomeness (Click to see the High Resolution version):

Final Notes

I hope this tutorial is useful to those of you looking for a way of reading PDF files on your Playstation 3 Systems.

Below are the links to donwload the Scripts used on this tutorial:

You can have a look at the Live Demo to see the end result:

Live Demo

To access the live demo from your PS3, you can use the following short link:

http://bit.ly/pdf2ps3

This work has been licensed under the MIT & GPL Licenses.

Chrome Extension: Personalized Web

der — Sat, 08 Jan 2011 12:23:04 +0000

Sometimes, I wish I could change some sites, in a way that it would be better for me to browse their content. Some of them have so many blinking annoyances, that make the site look like a Christmas Tree.

After researching for a Chrome Extension to provide me with the flexibility to hide elements from webpages by using CSS code, I came across this cute little extension:

Personalized Web

It is tremendously helpful, since it allows you to add custom CSS code to any website you visit, by using Regular Expressions. Now, that’s how you do it.

After you install the plugin, you won’t see any visual feedback as of where the extension button is placed on the top right hand side of your browser. You need to navigate through Window » Extensions, then locate the Personalized Web entry and click on Options. This will bring you to the interface where you are able to create rules, specify CSS and JavaScript code to run on any site(s) you define.

Example: Hiding Gmail Ads

On the Personalized Web Options, click on Add New Rule and then, specify its Name on the Rule Name field.

Now, set the following regexp on the Match URLs field:

^https://mail.google.com

Set the following code on the Add CSS field:

div.nH.mq { display: none; }

And that’s it! This will hide the Ads from your Gmail interface.

What could be done with this ?

Besides Hiding annoying advertising from some sites, you could also hide sections of a site that you’re not interested in, and make your browsing more enjoyable, without letting forced content to distract your experience on the site.