Freelance Web Development

I added some error trapping to gitPush.app

The output of git is sent to a temporary file in the repo’s root. This way Applescript it not listening for it. Once the sh is done, I read the file. If it’s blank the app exists quietly. Otherwise the contents of the file are displayed.

git Error dialog

Now, the toolbar icon does not get stuck in chromo-mode upon error.

Get the update: http://github.com/WebVeteran/gitpush/

gitPush AppleScript, display dialog, error trapping, shell

Fancy Upload, a form widget that makes it appear as if we’ve styled the ‘browse…’ button and file name field with only CSS, is now on github:

http://github.com/WebVeteran/fancy-upload/

Fancy Upload github

I started to use git and github, and really like it. Except for one thing, no all-in-one GUI for the Mac. There is GitX and it does just about everything except push your committed changes to git hub. So to fill that gap I made a small Mac Application Bundle from an Applescript that fires off the git command. Here’s a screen shot:

gitPush 1.0

It works by you dragging the app to the Finder toolbar. See it there on the right?

After committing your changes in GitX (or command line… ick) just navigate to the root of your local repo and click the octocat button in the toolbar. The icon becomes chromatic, the committed files get uploaded, the icon goes monochrome. Done.

Hurry, they’re going fast! http://github.com/WebVeteran/gitpush/

gitPush apple, AppleScript, git, github, Mac, shell

The projects I work on and release as freeware / open source are developed on a ‘free time’ basis. That is, maybe 30~60 minutes a night, well after the rest of my family is asleep. Please consider making these projects worth my time with a small token of appreciation. I’d love to continue coding open source. Therefore

if:
you find any of my projects…
• Well written, documented, and commented
• Easy to install and use
• Optimized within reason
• Work as advertised
• Have saved you hours of work
then:

I promise to use the funds for something worthwhile. At the time being, that is feeding my growing family =)

Donate

So go and ‘git’ yourself a copy!

http://github.com/WebVeteran/tinymce-cf-gzip/

TinyMCE CF GZip git, github

TinyMCE CF GZIP is a ColdFusion based Javascript Concatenater, Compressor, and Cacher for TinyMCE.

This file compresses the TinyMCE JavaScript using GZip and enables the browser to do two requests instead of one for each .js file. From nearly 100 requests to 2, about 400KB to 80.

It is also a single file install. The current official TinyMCE ColdFusion Compressor requires a JAR file installed. But this one does not! Just drop the CF in, modify the TinyMCE js to use this file, and you’re done!

 

TinyMCE CF GZIP

Live demo

Later today the source will either be on sourceforge or github. Stay tuned!

TinyMCE CF GZip Caching, ColdFusion, Concatenation, JavaScript, TinyMCE

This is a test using the Visual Code Editor plugin with the WP-CodeBox plugin.

Original code:

	<Tr>
		<td style="background-color:##598CB5;color:white;font-weight:bold;">
			#l1title#
		</td>
		<td rowspan=16>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td style="background-color:##598CB5;color:white;font-weight:bold;">
			#r1title#
		</td>
	</tr>
<!--- ORDER --->
<cfhttpparam name="x_invoice_num"         type="formfield" value="#invoice_num#" >
<cfhttpparam name="x_description"         type="formfield" value="ScenicMesa.com online order">
<cfloop list="#x_line_items#" delimiters="#chr(9)#" index="i">
	<cfhttpparam name="x_line_item"       type="formfield" value="#i#">
</cfloop>

And here is WP-CodeBox enabled:

Rendering of WP-Codebox - I took this screen capture just before turning deactivating the plugin.

Visual Code Edior allows for syntax and code editing right in WordPress’ invocation of TinyMCE. Therefore, all html entitied are escaped. As you can see this sometimes does not work with WP-CodeBox since it expects non-escaped code. This is why WP-CodeBox made it on my “Plugins that failed to help” list.

Now for SyntaxHighlighter Plus, which, on the other hand expects escaped code. And so it works well when editing code in visual mode of the WordPress post editor:

	<Tr>
		<td style="background-color:##598CB5;color:white;font-weight:bold;">
			#l1title#
		</td>
		<td rowspan=16>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td style="background-color:##598CB5;color:white;font-weight:bold;">
			#r1title#
		</td>
	</tr><!--- ORDER --->
<cfhttpparam name="x_invoice_num"         type="formfield" value="#invoice_num#" >
<cfhttpparam name="x_description"         type="formfield" value="ScenicMesa.com online order">
<cfloop list="#x_line_items#" delimiters="#chr(9)#" index="i">
	<cfhttpparam name="x_line_item"       type="formfield" value="#i#">
</cfloop>

Visual Code Editor syntax highlighting, WordPress, wp-codebox

<iframe src='/test.html'></iframe>

PHP, Visual Code Editor syntax highlighting, WordPress

Visual Code Editor 1.2 allows iFrames in WordPress’s visual editor (TinyMCE). Example

And 1.2.1 has a code fix for WordPress installations on PHP4. Thanks to Keith for tipping me off!

PHP, TinyMCE, Visual Code Editor iframe, php4, plugin, WordPress

While working on the File Manager, and the upload function in particular, I had in mind to create a nice upload progress indicator. And I don’t want to use Flash, Java, or anything special installed on the server. So this is what I came up with:

It seems pretty magical at first. But after I break it down here, you might think “oh yeah… easy!”. Here are the steps it takes to pull it off:

1. Reset all variables and labels.
2. Ask CF for the list of files in the temp dir.
3. Start the upload, and start the timer.
4. Using the list of files above, ask CF if the list has changed yet. Do this every second until a change is noticed. When a difference is reported, that is our upload-in-progress file. For this I used a CF function called ListDiff by Ivan Rodriguez. It compares lists (in this case, our initial and current dir) and returns the difference.
5.  Every second, ask CF for the size of that file.
6. Update the labels with the information every second (size, time, size/time). Use prototype to tween the size in 0.8s.
7. On the upload action page use a JS to stop the timer and report the success.

There is a bunch of optimization to be had. Mostly in the ajax calls which, although they have fault tolerance, aren’t to smart about it. And also in the management of when ajax calls are made (there is a chance they can step on each others’ toes).

The final product to be entered into the file manager will of course be much more subtle than this. Simply displaying the Size and Speed. When the upload is done, everything goes away.

For your convenience, I updated Visual Code Editor to have TinyMCE accept iframes and I put the live demo in one below. But if you prefer, here is a direct link: ColdFusion file upload progress.

So… what should I call this thing? CFup?

CFup, ColdFusion, JavaScript, Scriptaculous ajax, file upload, progress