Freelance Web Development Blog

I took the plunge and copied all of my blogCFC posts to WordPress. To do so I I set the RSS max entries to 1500 (instead of 15). Then loaded that RSS into Firefox and saved it out as source. In WordPress I imported that xml and here we are! All the posts, but no comments. I will copy all comments as well, as time permits.

I will be moving my blog from blogCFC to WordPress. So I have it installed and played with skins and syntax highlighting… which is quite lacking.

The problem comes in when you edit your post twice. When you load that post again, WP converts ampersands into "&". Which is nice. But if you edit that post again, WP re encodes ampersands again. Giving you "&". Want to guess what happens if you save and load it again?

Now lets compound that with the visual editor, which automatically encodes for you as you type or paste. That only accelerates the process. And the fault here is with WP when it loads the post. Not with TinyMCE, at all.
Lets make matters even worse. WP's init for TinyMCE is really screwy. Looking at the code you'd think they were rocket scientists. But… dang it… the defaults are horrible for programmers who want to blog!

• Users have to switch to HTML or TEXT views to insert <pre> or <code> tags.
• TinyMCE does not allow unknown attributes for tags like <pre line="1">.

That may sound really picky. But most syntax highlight plugins require either <pre> or <code> and to use special attributes in them to display properly. Some require the syntax to have all entities escaped, some require the opposite.  What a freaking nightmare.  So I set out to end this nonsense.

Enter Visual Code Editor. It's a plugin I wrote for WordPress. Visual Code Editor makes it possible (and trouble free) to post and edit code snippets in wordpress's visual editor.

• Adds <pre> & <code> to block format menu
• Allows extra attributes for compatibility in some syntax highlighters (ie, <pre lang="php" line='5'>)
• Unescape WP's double escaping of &amp;

And the nicest thing is… it's a plugin! You don't have to go around editing WP's base installation. Download, extract, upload, activate, done.

Coupled with the SyntaxHighlighter Plus plugin, you get results like this:

Syntax highlighter Plus runs through javascript on the client and expects the code to have entities encoded. Thanks to my plugin and TinyMCE, we're golden. I chose Syntax highlighter Plus for a few reasons.

• it's the easiest to use and is smart.
• It runs in javascript, search engines do not see tons of inline css muddying the page.
• The page also downloads faster because of that.
• The 'copy to clipboard' does not require flash.

All you have to do is create a [sourcecode language="xxx"][/sourcecode] block, paste in your code, select the whole sourcecode block, then select Preformatted from Tiny's format menu. It should look like this:

The Preformatted area tells TinyMCE to leave the formatting the heck alone. [sourcecode] makes Syntax highlighter Plus do it's magic on the viewer side. And you can still edit all of your code in the visual editor. Awesome!

I also left the door open for other syntax highlighters, which instead of using [sourcecode], use <pre lang="xxx" [line="5"]> or even <code>, etc.

Feel free to download the plugin below, which should be in the WordPress PlugIn Directory soon enough.

Plugins that failed to help

I did my homework before writing this plugin. I tried all of the following. All of which failed in one way or another.

• Chili Code Highlighter
• CodeHighlighter
• Developer Formatter
• Disable wpautop
• Editor Extender
• EmbedIt
• Google Syntax Highlighter for WordPress
• Preserve Code Formatting
• Raw HTML capability
• Text Control
• TinyMCE Entities Patch
• Code Snippet
• Dean's Code Highlighter
• Highlight Source Pro
• iG:Syntax Hiliter
• Sniplets
• Snippet Highlight
• WP-CodeBox
• WP-Syntax

Here are the plugins that I am currently running:

• SyntaxHighlighter Plus
• Visual Code Editor
• WP Easy Uploader

WHEW! That's enough blogging for today. I gotta get some work done!

Apparently someone really likes my intro paragraph. They like my name, too!

Click for full size

Here’s a screen capture of the latest. I did some code cleanup and smoothing things out. It’s coming along nicely… though it doesn’t DO anything yet

Get the Flash Player to see the wordTube Media Player.

	

Whenever I looked for a simple calendar online, they are all super complicated. So I came up with this simple one myself. You can give it a list of dates to highlight (events, etc).

<cffunction name="calendar">
    <cfargument name="events" default="" hint="list of dates, ie: 20081023,20081025">
    <cfargument name="dateTime" default="#now()#">

    <div>
    <cfoutput>
    <center style="color: ##666b92;">
    #monthAsString(month(arguments.dateTime))#
    </center>

    <table border="0" cellspacing="0" cellpadding="4" id="calendar">
        <tr id="calHeader">
            <td>Sun</td>
            <td>Mon</td>
            <td>Tue</td>
            <td>Wed</td>
            <td>Thu</td>
            <td>Fri</td>
            <td>Sat</td>
        </tr>

        <cfloop from="1" to="#daysinMonth(arguments.dateTime)#" index="date">

            <!--- WEEK START or MONTH START --->
            <cfif dayofweek("#year(arguments.dateTime)#-#month(arguments.dateTime)#-#date#") mod 7 eq 1 or date eq 1>
                <tr>
            </cfif>

            <!--- PRE PAD FIRST DATE --->
            <cfif date eq 1>
                <cfloop from="1" to="#dayofweek("#year(arguments.dateTime)#-#month(arguments.dateTime)#-#date#")-1#" index="d">
                    <td class="calBlank">&nbsp;</td>
                </cfloop>
            </cfif>

            <!--- WEEK DAY --->
            <td class="calDay <cfif
listFindNoCase(arguments.events,
'#year(arguments.dateTime)##month(arguments.dateTime)##date#') neq
0> calDayEvent</cfif>">#date#</td>

            <!--- POST PAD LAST DATE --->
            <cfif date eq daysinmonth(arguments.dateTime)>
                <cfloop
from="#dayofweek("#year(arguments.dateTime)#-#month(arguments.dateTime)#-#date#")#"
to="6" index="d">
                    <td class="calBlank">&nbsp;</td>
                </cfloop>
            </cfif>

            <!--- WEEK END or MONTH END --->
            <cfif dayofweek("#year(arguments.dateTime)#-#month(arguments.dateTime)#-#date#") mod 7 eq 0>
                </tr>
            </cfif>

        </cfloop>
    </cfoutput>
    </table>
    </div>
</cffunction>

And for the styles:

#calendar {
	width: 100%;
	border: solid #e4e4e5;
	border-width: 1px 1px 0px 0px;
}

#calendar td {
	width: 14;
	text-align:center;
	font-size:8px;
	vertical-align: middle;
	padding: 6px;
	border: solid #e4e4e5;
	border-width: 0px 0px 1px 1px;
	color: #666b92;
}

#calHeader {
	padding:0px;
}

.calBlank {
	background: #e4f0f9;
}

.calDay {
	background: none;
}

.calDay:hover {
	background: #666b92;
	cursor: pointer;
	color: #e4f0f9 !important;
}

.calDayEvent {
	background: #e4f9e9;
	color: #000000 !important;
}

This works really nicely in an ajax application. Doubly so with some nice Scriptaculous transitions.

I have navigation working pretty well (wvfm vs finder):

I was able to give more hours to the wvfm. As planned, I started to incorporate Finder-like column navigation:

When clicking a dir the contents load on the right by an ajax function. The view automatically slides left to the new column.

Its sloppy looking right now. But the final omelet should be tasty.

This is a simple piece of code for MySQL (and ColdFusion).

Lets say you have pages in a CMS that are to display events from certain categories. You could cfoutput from the Page query, build a list of event categories, then use cfloop to create ORs in the WHERE clause:

SELECT id, title, datetime, category
FROM   events
WHERE
       ( <cfloop list="#variables.eventsList#" index="c">
            category = '#c#' OR
       </cfloop> 1=0 )
       AND
       events.datetime > #now()#
ORDER BY category, datetime

That could parse into a large messy query.

I learned to use MySQL’s IN(), ColdFusion’s valueList() and listQualify(). Together, the code is much tighter - there is no need to build a list of event categories. Simply give valueList the query.column name and list qualifier (use single quote for SQL):

SELECT   id, title, datetime, category
FROM     events
WHERE    category IN (#listQualify(valueList(read.events)), "'")#)
         AND
         events.datetime > #now()#
ORDER BY category, datetime

I haven’t done any performance tests, but I suspect this much execute faster.

I haven't come across any ColdFusion file manager that is good, free, and can be used with TinyMCE. Even the commercial products don't impress me. And  don't like relying on PHP in my CF applications. So I'm writing my own File Manager, WVFM. Sounds like an oldies station I plan on releasing it as open source for free.

The following are my main goals for WVFM:

• Speed
• Aethetics
• Easy to install
• Easy to use

I plan to accomplish those goals with:

• Optimized code (CFML and HTML/CSS)
• FamFamFam Silk Icons, and a designer willing to help for free
• AJAX w/ Scriptaculous web2.0 javascript library
• Mimics Mac OSX Finder's column view navigation
• Extra information for webmasters and content editors

Right now it's pretty much a drag and drop CFC. It runs immediately by navigating to its loader (index.cfm) with good default settings.

It figures out the root dir of the website, and if you're navigating within it, allows you to click on files to view/listen/download.

Every attribute of a file/dir is sortable. Sorting is prioritzed automatically as you sort by attribute. That sorting is saved as a cookie for when you return.

You can specify which attributes of the objects you need to see. The code is optimized to not bother asking the file system for those attributes. Good optimization for a large number of objects in a directory.

More to come! Next is making navigation like Finder's column view.

As promised last week, a CF Function that generates a pulldown of countries:

<cffunction name="SelectCountry">
	<cfargument
		name="selected"
		default="US">
	<cfargument
		name="name"
		default="country">
	<cfargument
		name="id"
		default="#name#">
	<cfargument
		name="omit"
		default="Select Country:">
	<cfargument
		name="ability"
		default="enabled">
	<cfargument
		name="onchange"
		default="">
	<cfargument
		name="value"
		default="abbreviations">
	<cfargument
		name="label"
		default="fullnames">
	<cfset abbreviations=
		"00,AF,AX,AL,DZ,AS,AD,AO,AI,AQ,AG,AR,AM,AW,AC,AU,AT,AZ,BS,BH,BD,BB,BY,BE,BZ,BJ,BM,BT,BO,BA,BW,BV,BR,IO,VG,BN,BG,BF,BI,KH,CM,CA,CV,KY,CF,TD,CL,CN,CX,CC,CO,KM,CG,CD,CK,CR,CI,HR,CU,CY,CZ,CS,DK,DJ,DM,DO,TP,EC,EG,SV,GQ,ER,EE,ET,MK,FK,FO,FJ,FI,FR,FX,GF,PF,TF,GA,GM,GE,DE,GH,GI,GB,GR,GL,GD,GP,GU,GT,GN,GW,GY,HT,HM,HN,HK,HU,IS,IN,ID,IR,IQ,IE,IM,IL,IT,JM,JP,JE,JO,KZ,KE,KI,KP,KR,KW,KG,LA,LV,LB,LS,LR,LY,LI,LT,LU,MO,MG,MW,MY,MV,ML,MT,MH,MQ,MR,MU,YT,MX,FM,MD,MC,ME,MS,MA,MZ,MM,NA,NR,NP,NL,AN,NT,NC,NZ,NI,NE,NG,NU,NF,MP,NO,OM,PK,PW,PS,PA,PG,PY,PE,PH,PN,PL,PT,PR,QA,RE,RO,RU,RW,GS,KN,LC,VC,WS,SM,ST,SA,SN,RS,SC,SL,SG,SK,SI,SB,SO,ZA,ES,LK,SH,PM,SD,SR,SJ,SZ,SE,CH,SY,TW,TJ,TZ,TH,TG,TK,TO,TT,TN,TR,TM,TC,TV,UG,UA,AE,UK,US,UY,UM,SU,UZ,VU,VA,VE,VN,VI,WF,EH,YE,YU,ZR,ZM,ZW">
	<cfset fullnames=
		"Select Country:,Afghanistan,Aland Islands,Albania,Algeria,American Samoa,Andorra,Angola,Anguilla,Antarctica,Antigua and Barbuda,Argentina,Armenia,Aruba,Ascension Island,Australia,Austria,Azerbaijan,Bahamas,Bahrain,Bangladesh,Barbados,Belarus,Belgium,Belize,Benin,Bermuda,Bhutan,Bolivia,Bosnia and Herzegovina,Botswana,Bouvet Island,Brazil,British Indian Ocean Territory,British Virgin Islands,Brunei Darussalam,Bulgaria,Burkina Faso,Burundi,Cambodia,Cameroon,Canada,Cape Verde,Cayman Islands,Central African Republic,Chad,Chile,China,Christmas Island,Cocos (Keeling) Islands,Colombia,Comoros,Congo,Congo (Democratic Republic),Cook Islands,Costa Rica,Cote D'Ivoire (Ivory Coast),Croatia (Hrvatska),Cuba,Cyprus,Czech Republic,Czechoslovakia (former),Denmark,Djibouti,Dominica,Dominican Republic,East Timor,Ecuador,Egypt,El Salvador,Equatorial Guinea,Eritrea,Estonia,Ethiopia,F.Y.R.O.M. (Macedonia),Falkland Islands (Malvinas),Faroe Islands,Fiji,Finland,France,France (Metropolitan),French Guiana,French Polynesia,French Southern Territories,Gabon,Gambia,Georgia,Germany,Ghana,Gibraltar,Great Britain (UK),Greece,Greenland,Grenada,Guadeloupe,Guam,Guatemala,Guinea,Guinea-Bissau,Guyana,Haiti,Heard and McDonald Islands,Honduras,Hong Kong,Hungary,Iceland,India,Indonesia,Iran,Iraq,Ireland,Isle of Man,Israel,Italy,Jamaica,Japan,Jersey,Jordan,Kazakhstan,Kenya,Kiribati,Korea (North),Korea (South),Kuwait,Kyrgyzstan,Laos,Latvia,Lebanon,Lesotho,Liberia,Libya,Liechtenstein,Lithuania,Luxembourg,Macau,Madagascar,Malawi,Malaysia,Maldives,Mali,Malta,Marshall Islands,Martinique,Mauritania,Mauritius,Mayotte,Mexico,Micronesia,Moldova,Monaco,Montenegro,Montserrat,Morocco,Mozambique,Myanmar,Namibia,Nauru,Nepal,Netherlands,Netherlands Antilles,Neutral Zone,New Caledonia,New Zealand (Aotearoa),Nicaragua,Niger,Nigeria,Niue,Norfolk Island,Northern Mariana Islands,Norway,Oman,Pakistan,Palau,Palestinian Territory (Occupied),Panama,Papua New Guinea,Paraguay,Peru,Philippines,Pitcairn,Poland,Portugal,Puerto Rico,Qatar,Reunion,Romania,Russian Federation,Rwanda,S. Georgia and S. Sandwich Isls.,Saint Kitts and Nevis,Saint Lucia,Saint Vincent & the Grenadines,Samoa,San Marino,Sao Tome and Principe,Saudi Arabia,Senegal,Serbia,Seychelles,Sierra Leone,Singapore,Slovak Republic,Slovenia,Solomon Islands,Somalia,South Africa,Spain,Sri Lanka,St. Helena,St. Pierre and Miquelon,Sudan,Suriname,Svalbard & Jan Mayen Islands,Swaziland,Sweden,Switzerland,Syria,Taiwan,Tajikistan,Tanzania,Thailand,Togo,Tokelau,Tonga,Trinidad and Tobago,Tunisia,Turkey,Turkmenistan,Turks and Caicos Islands,Tuvalu,Uganda,Ukraine,United Arab Emirates,United Kingdom,United States,Uruguay,US Minor Outlying Islands,USSR (former),Uzbekistan,Vanuatu,Vatican City State (Holy See),Venezuela,Viet Nam,Virgin Islands (U.S.),Wallis and Futuna Islands,Western Sahara,Yemen,Yugoslavia (former),Zaire,Zambia,Zimbabwe">

	<cfoutput>
	<script type="text/javascript">
		function changecountry(thestate, thecountry) {
			if ( $(thestate).value != '--' && $(thestate).value != '00' ) {
				$(thecountry).value = 'US';
			}
		}
		function changestate(thecountry, thestate) {
			if ( $(thecountry).value == 'US' ) {
				$(thestate).value = '00';
			} else {
				$(thestate).value = '--';
			}
		}
	</script>
	<select
		name="#name#" id="#id#" #ability#
		<cfif isdefined("style")>style="#style#"</cfif>
		<cfif isdefined("onchange")>onchange="#onchange#"</cfif>
	>
	<cfloop from="1" to="#listlen(fullnames)#" index="Country">
		<cfif not listcontains(omit,#listgetat(evaluate(value), Country)#) and not listcontains(omit,#listgetat(evaluate(label), Country)#)>
		<option value="#listgetat(evaluate(value), Country)#"
			<cfif #listgetat(evaluate(value), Country)# is "#selected#">selected</cfif>
			<cfif isdefined("style")>style="#style#"</cfif>>
		#listgetat(evaluate(label), Country)#
		</option>
		</cfif>
	</cfloop>
	</select>
	</cfoutput>
</cffunction>

And to invoke it for display in your form:

#session.utils.SelectCountry()#

This assumes you loaded the CFC into a session variable called ‘utils’. As you can see, you can pre-select a state, suitable for an update form.

You can configure what is shown for each option and what is the value using the ‘value’ and ‘label’ arguments.

Here is how you combine the States and Country pulldowns so that if you choose a state, the country changes to USA. And if you pick another country, the state changes to ‘not in usa’.

<b>Country:</b><br>
<cfoutput>#session.utils.selectCountry(onchange="changestate(country,state)")#</cfoutput>
<br><br>
<b>State:</b><br>
<cfoutput>#session.utils.selectState(onchange="changecountry(state,country)")#</cfoutput>