Optimal Setup for SyntaxHighlighter & TinyMCE

Posted on November 1, 2009 at 14:50

My favorite Javascript-based WYSIWYG editor is TinyMCE. I find it the most visually appealing, and the most well constructed from all of the offerings available on the Internet.

When posting code for others to see, I prefer using SyntaxHighlighter. This javascript-based formatting tool by Alex Gorbatchev allows you to put the code to be displayed into a Pre or TextArea tag, formats based on the code language, and allows for good degradation in case of NoScript.

I have previously posted on how to get SyntaxHighlighter to play nicely with the built-in text editor inside WordPress (TinyMCE). Now for the first time I needed to set it up on another platform (Telligent Community Server). Here are my recommendations on what to use to achieve optimal setup (this can work on any platform):

Problem 1: Need Friendlier Way to Input Code – The default method for adding code to be formatted woudl be to open up HTML mode in TinyMCE, type in the Pre or TextArea tag with specially formatted attributes, and put in the code. This is ok for myself (this is what I use in WordPress), but when designing a site for others, a friendlier interface is preferable. I found a plugin for TinyMCE: SyntaxHL by Richard Grundy. After installing this (download and copy files to tinymce/plugins directory, and add plugin and button to TinyMCE.Init), a new button is added to TinyMCE that loads a popup which allows easy entry of the code to be formatted and customization of language and display options, without the need to enter html mode. (I would prefer something that could load up highlighted text when the button is pressed, but I will settle on this one for now)

Problem 2: TinyMCE adds BR Tags within PRE – When opening up TinyMCE it performs some cleanup of the Html that is input. Part of this cleanup involves (by default) substituting <BR /> tags instead of New Lines in the source text. For code that has already been saved, this presents a problem. When editing a post with code formatted in a <PRE> tag, instead of preserving the new lines, <BR />’s are inserted, completely messing up the formatting. This has been noted by others, and has even been reported in the TinyMCE forums, but so far the bug is still in there. To the rescue, another plugin for TinyMCE: PreElementFix by T Andersen. After installing the files and adding the plugin to TinyMCE.Init, PRE acts as it should: no more insertion of <BR /> tags, and the tab key adds a Tab to the text, rather than advancing to the next field.



MS Office Live Addin for 2007 Causing Word, Excel and Powerpoint to Crash on Vista

Posted on August 6, 2009 at 17:44

I ran Windows Update a few days ago, and it ended up installing an add in for MS Office, to allow connectivity with Office Live Workspace. Very soon afterwards, Word, Excel and Powerpoint started to crash immediately after they were started up. The Office Live add in is the culprit. I was able to open up Word in safe mode (hold down Ctrl) and deactivate the add in, after which Word started working again. After I uninstalled the add in from my computer, Excel and Powerpoint are working again.

I am not the first person to whom this happened. Hopefully my wasted time figuring this out can help save someone out there a few hours.



Casting vs. Converting in .Net

Posted on December 11, 2008 at 23:40

I recently saw a piece of code in a project that was throwing an exception that I did not understand:

string boolString = (string)DataBinder.Eval(DataItem, "IsNew");

One would expect that boolString would be assigned the value “True” or “False” depending on the value of the IsNew property of the DataItem object. However, this through an Exception with the message: “Cannot explicitly convert bool to string”. What is going on here?

The syntax of (type)variable attempts to explicitly cast the variable into the given type. Casting does not attempt to interpret the data in the variable – it just tries to fit the object referred to by the variable into the new data type. This will work whenever the two types are somehow compatible (for example, an int can be cast into a float with no exceptions) though sometimes it may result in data loss (a float cast into an int). However, in cases where there is no connection between the two classes, casting will result in an Exception (like the one that I received above).

(There is another way to cast an object – using the as keyword. This will return a null if the cast fails, and is much faster than the explicit casting referred to above).

However, when converting an object, the conversion function has “knowledge” of the data contained in both the source and final object types, and will create the equivalent of the variable in the new data type. In the case above, using the System.Convert.ToString() method in place of the attempted cast to (string) would have worked fine. This is because the ToString method “knows” that a bool cannot be case into a string – but it also knows what the equivalent string to each value of a bool will be, and is able to process the operation accordingly. In this case, reflector uncovers the following code (in the Boolean class):

public string ToString() {
    if (!this) {
        return "False";
    }
    return "True";
}

This is obviously a very simple type conversion. However, there are many more complex conversion utilities built into the .Net framework (accessible through the System.Convert class – see the DateTime.ToString conversion for an example of this. Also see the IConvertible interface). While conversions can be more expensive to run, since they are strongly typed, they are checked at compile time, and when used properly are more reliable to use when producing stable code. (See the MSDN article on Casting and Type Conversions for more info).



No Budget for Off the Shelf Software?

Posted on September 10, 2008 at 19:41

I was reading a question today on StackOverFlow that was asking for advice on how to build a load-testing program for a website. At the end of the question is the following parenthetical remark (preempting the obvious answers pointing the questioner at any number of applications available for purchase that do exactly what they need):

We have a budget for programmer time but no budget for buying software, so it wouldn’t matter how money we’d save to buy a COTS product.

This strikes me as a pretty stupid corporate policy that in the end will result in the company spending more than they need to in order to reinvent the wheel. What is they would save 1,000 programmer hours by spending $1,000 on one piece of software. It is not too far fetched. In today’s programming world, the most capable development teams are those that know how and when to leverage expertise from outside of their immediate circle (and outside of the company payroll, when necessary). I realize that from an accounting perspective, one could claim that payroll is a fixed, budgeted cost, and since the developers have to be paid anyway, why shouldn’t they do everything in house? But every hour spent on developing something in-house that could be bought elsewhere for less money than the cost of the salaries being spent is another hour that the company could have used to use its employees for increasing its own revenues and profitability. Oh well, their loss.



Where Does Google Chrome Store User History, Profile & Bookmarks?

Posted on September 8, 2008 at 23:08

I have been using and enjoying Google Chrome for the past couple of days. So as I am setting up my new computer, I am installing Chrome there as well. While doing this, I would like to bring over my saved browsing history and bookmarks so that I don’t have to build it from scratch on the new machine. The only problem is that while Chrome makes it very easy to import existing settings from Firefox, it does not display any visible option to export current settings.

After a bit of digging, I found the location where Chrome stored user data:

  • On XP – C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data
  • On Vista - C:\Users\<User Name>\AppData\Local\Google\Chrome\User Data

The User Data folder contains three files: Local State, Safe Browsing and Safe Browsing Filter, along with a folder called Default. Default in turn contains your browser cache, plugin data, and all of your cookies and history data. To move my profile over to my new computer, I copied all of the files and folders under User Data on my XP machine, and moved them into the User Data on my new Vista machine (all of the files were nearly 100mb after only four days of use, which will give you some kind of idea about the amount of indexing going on in the background). When I next started Chrome on my Vista machine, it was identical to the app on my XP machine, down to most popular sites, history and cookies. I even started writing this post on my XP machine, and then continued it on my Vista machine without having to log in again into my WordPress admin.

In the end this was pretty easy to do. Though the ease of profile transfer could in turn make it easy for someone to steal someone else’s identity – after all, the cookies file (presumably a sqllite db or something similar) was only 256KB, and merely dropping it in the new User Data allowed a complete transfer of identity (perhaps a good security feature would be to allow the \User Data\Default\Cookies file to work only on the originally installed instance).



Google Chrome – Likes and Dislikes

Posted on September 7, 2008 at 13:04

I just downloaded Google Chrome and am going to try using it for some of my day-to-day web browsing over the next few days. Here are my initial reactions:

Likes

  • Fast. Very fast, and small memory footprint.
  • Each tab is a different process. This will make it very easy to any single tab that is using lots of memory, without having to close the browser (unlike in FF).
  • Tab positioning over the address bar (as oppossed to underneath in FF) seems more natural.
  • No header or footer bars. Do we really need to waste vertical screen space just to tell me the name of the program and reserve space for status messages? Nope. Here there is no header bar (functions like close/minimize are squeezed to the right side of the tab area), and status messages and urls in links appear in a temporary popup box fixed to the bottom left corner of the browser window, when necessary. Seems like a very good use of screen space.
  • Address bar has the domain name of the site appear in regular type, with the rest of the url appearing in a lighter type. It highlights the domain, which very quickly highlights where you are.
  • Real warnings for potentially problematic domains. In IE and FF, you just get a small red box in your address bar. In Chrome, when you go to a page that is potentially troublesome (example: loads resources from a domain associated with malware) you have to go through a confirmation screen before loading the site. Seems like a much better way of implementing this than the halfway solution in IE and FF that everyone will tend to ignore.
  • Useful built-in developer extensions (View Source, Debug Javascript, Javascript Console, Task Manager).
  • In-page search is slick and improves on FF’s implementation. You now see all occurences of the search term highlighted on the page at once, while maintaining the ability to enumerate through the bunch.

Dislikes

  • Non-existent bookmarking. I like my delicious add-on and bookmarks toolbar in Firefox as well as my different bookmarklets (Note in Google Reader, delicious, Seed Newsvine). It gives me easy access to the pages that I use frequently (I know that they are stored in the Chrome history, but often just clicking on my bookmark link is more efficient than going to remember the title or url, typing it into the address bar and sorting through the results to find the one that I want). I take it back. Ctrl-B attaches a bookmark bar to the bottom of the address bar. 
  • No page titles. Since there is no header bar, the page title is squeezed into the tab for that browser window, which in almost all cases is too small to see the page title. 
  • Clicking my mouse scroll bar doesn’t bring up the scroll pointer like it does in almost every other application.
  • I like having the search box separated from the address bar like it is in FF. 
  • No FF add-ons. No Firebug, Greasemonkey, Adblock, FireFTP or IE Tab).
  • No built-in support for RSS. I would at least have expected them to include an auto-subscribe to Google Reader.

This is what I can come up with after using Chrome for 3 hours. So I like it better than IE7 (haven’t tried 8 beta yet), though it does not beat out FF3 (yet).