HOW TO: Using Performancing for Firefox

Nick keeps bugging me to blog, so here it is, direct from the PFF extension.
Keeping track of all the support posts in the forums, comments made on other blogs and emails regarding PPF is not an easy task.
Fortunately for me, a lot of the questions are the same, so I thought I would take this opportunity to explain how ‘I‘ use PFF, and how to maximize your blogging output with this tool. As most of you might know, I’m the PFF author, so hell yeah, I’m biased ;).

This post will be divided into the following categories so you can easily jump around and test it out for yourself as you read along;

Launching the PFF extension.

In-line
Tab
Window

‘Blog This’ context menu.
Formatting your post (CSS or HTML)
Adding Images
HotKeys
Additional features
- In-line Spell checking with Spellbound

1.- Launching PFF

There are 4 possible ways to launch PFF, of which 3 I will cover now, and the fourth can be found in point #2.

Statusbar Icon
On the lower right of Firefox, you will find the following icon
By clicking on the icon, you will launch PFF in in-line mode ( Screenshot )
If you right-click on the status bar icon, you will get the following options as seen in the image below:
.
Hitting F8
By hitting F8 on your keyboard you will get the exact same functionality as left-clicking on the status-bar icon as mentioned above.

2.- Blog This

Title and URL:

PFF gives you an easy way to blog about the webpage you are viewing.
When you right-click anywhere on a webpage, you will find an additional context-menu item called “Performancing” and a submenu-item called “Blog this page (in Split Browser)” as seen in the image below:

Clicking on “Blog this page (in Split Browser)” will launch (if not already open) the PFF extension in in-line mode and paste the Title of the web page you are on as an html link to it’s appropriate URL.

Title, URL and Selected text as blockquote

If you have selected text on the webpage, and followed the steps above, you will get the same linked title as mentioned above with the addition of the selected text enclosed by a blockquote tag.

As an example, I just selected text from one of Nick’s posts on the front page, and PFF produced the following:

Performancing.com | Helping Bloggers Succeed

After a couple of days talking about PFF with members, and amongst ourselves, and gettin a TON of feedback both onsite and off, we finally got time to catch up with our friends over at Technorati today

3.- Formatting your post

Formatting your post in PFF is easy, in the ‘Normal’ WYSIWYG mode, you have an easy to use toolbar with all your favorite formatting optoins.

By selecting test then pressing a toolbar button you will get the desired effect.
If you don’t have any test selected, then you will get the format applied to whatever you type next, pretty much like Word or any other standard rich text editors.

In the ‘Source’ mode, you have the access to the exact same toolbar.
Select text and choose the appropriate button, or hit a button and the cursor will be placed in between the two tags so you can immediately start typing.

You can also use the keyboard hotkey as mention in Section 5.

Table Support:
The ‘Normal’ view also has enhanced table support, either start some table code of your own, or drag and drop a table from somewhere else to begin.

Consider a small table we have created for the hotkey descriptions below:

In the case if the the 1st table control element (1), clicking the upper arrow will add a new row above the current row, clicking on the lower arrow will add a new row below the current row, clicking on the ‘Delete’ control (X), will delete that entire row.

In the case if the the 2nd table control element (2), clicking the left arrow will add a new column to the left of the current column, clicking on the right arrow will add a new column to the right of the current column, and clicking on the ‘Delete’ control (X), will delete that entire column.

4.- Adding Images

Adding Images in PFF is easy.
If you know the URL of your uploaded image, click on the Image icon and paste in the URL of your image.
Or, if the image is on a webpage, righht-click and hold down on the image and drag and drop in into the editor.

I’ve done this here with the performancing image, and resized it as seen in the screenshot below:

To resize an image, right-click on the image so that the square dots are showing, then click and drag the dots to your desired location.
Now wasn’t that easy?

5.- Hotkeys

PFF has the following hotkeys witch work in both ‘Normal’ and ‘Source’ mode.

Key	Action
Ctrl-b	Bold
Ctrl-i	Italic
Ctrl-u	Underline
Ctrl-s	Save as Note
Standard Formating Hotkeys	ctrl-p, ctrl-v, ctrl-x, ctrl-u, ctrl-y, etc.

6.- Additional Features

If you are daring, and don’t mind installing a beta extension, then in-line spelling is a must have for any spelling idiot like me.

[Install Spellbound Development Version]

You need the latest Spellbound development version from here, once installed you will have built-in spell checking in
both Firefox and PFF as seen in the image below.

Clicking on the correct menu-item will replace your misspelled word with the correct one.
If any of you have been using the latest Thunderbird 1.5rc’s, you will already be accustomed to, and thankful for this awesome feature.

You can read more about the latest Spellbound development version here.

That it for me today, I hope this post has been useful, and as always, comments, suggestions, and corrections are always welcome!

[*Update*]

It appears that when you post here from PFF, drupal defaults it to ‘Filtered HTML’, be sure and change that to ‘Full HTML’ when you login if you want to keep your normal html formatting. (I didn’t know this, woops)