Archive

Archive for the ‘Projects’ Category

Custom scrollbars in Adium – ‘Elegant Simple’ Message Style

March 11th, 2010

Visually based on the “Pretty Simple” Message Style by Piotrek Marciniak, I’ve created a new breed of Adium Message Style – which boasts a completely custom scrollbar.

This message style is a working proof of concept. It is a prototype for the talented folks that create  wonderful message styles. I’m a developer, not an artist. I hope that others will use it as a spring board for rapid development of a whole new breed of message styles with custom scrollbars.

Since Adium Message Styles are really web pages, it only seemed right to mash up Prototype JS, LivePipe UI and Scriptaculous!

Features

  • Fade-in of messages
  • Auto smooth scrolling when new message is received
  • Custom styled scrollbar
  • Dynamic height scrollbar handle
  • Header and Footer objects of scrollbar handle
  • Auto-hiding and fading scrollbar (mouse in/out of window)
  • Mouse wheel support

Get the Flash Player to see the wordTube Media Player.

( View full size 800×600 MP4 3.7MB )

Go and get it!

Adium, JavaScript, Mac OS X, Scriptaculous , , ,

Visual Code Editor 1.2.5

March 4th, 2010

I’ve updated Visual Code Editor. Not so much an upgrade, but tested it out with SyntaxHighlighter Evolved 2.3.8 and WordPress 2.9.2.

SyntaxHighlighter Evolved fixes a lot of the problems that VCE also fixed (for SyntaxHighlighter Plus 1.x). But VCE still comes into play when you want to use tinyMCE (the post editor) in WordPress.

  • 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 & (not needed with SHE)
  • Allows iFrames in the post
  • Support for syntax highlighting in comments
  • Removes extra `<pre>` tags around SyntaxHighllighter Plus’s sourcecode blocks

I tested it out with SHE and they both play very well together. Although the fixes in VCE are no longer needed, it still adds some functionality to the Visual Editor. Since nothing broke, I’m not going to fix it (remove the fixes). This allows its continued use in other client side syntax highlighters.

Go get it –> http://wordpress.org/extend/plugins/visual-code-editor/

Also, I highly recommend SyntaxHighlighter Evolved.

Visual Code Editor , , , ,

CFup build 090624 – now on github

June 25th, 2009

It’s been asked that I release the source of CFup. Initially I was not comfortable doing so as I threw it together as a test of concept. Certainly nt my best work! Feeling inspired I cleaned up some of the code – mostly just so the ajax routines don’t clash – and uploaded it to github. Now anyone can download it, try it out, and contribute. I’m excited to see what optimizations and cleanups can be done to it. So if you’re interested in kicking the tires or helping develop it, check it out on github: http://github.com/WebVeteran/CFup/

CFup , , ,

CF TinyMCE 090616 – Vscope no longer required for automatic multiple instance tracking

June 17th, 2009

A big thank to Mr. Camden for giving me a few minutes of his time! With his insight I was able to remove the required Vscope argument. Instead, multiple instances per page are tracked through Request. No more required argument, and it’s backwards compatible again.

Grab the update here: http://github.com/WebVeteran/cf-tinymce/

CF TinyMCE, ColdFusion, TinyMCE , ,

ColdFusion clips for Coda

June 16th, 2009

I have made quite a few Clips in Coda to make development a little speedier. Hopefully you can get some use out of them too.

Coda Clips

Preview of Coda Clips - keep in mind the clips window only shows the first line of each clip.

Download the Clips here:
ColdFusion Coda Clips

Coda, ColdFusion

CF TinyMCE 090612 – automatically handles multiple instance per page

June 16th, 2009

I updated CF tinyMCE with a small nicety. It now automatically handles multiple instance per page. Previously, it would have to be invoked like so:

<cfoutput>
<tr>
	<td>
		#application.includes.tinymce(
			content=read.en,
			element="en",
			csswidth="444px",
			resizing=true,
			theme='advanced',
			theme_advanced_buttons1 = "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
			theme_advanced_buttons2 = "",
			theme_advanced_buttons3 = ""

		)#
	</td>
	<td>
		#application.includes.tinymce(
			content=read.es,
			element="es",
			csswidth="444px",
			resizing=true,
			theme='advanced',
			loadbase='0',
			language='es',
			theme_advanced_buttons1 = "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
			theme_advanced_buttons2 = "",
			theme_advanced_buttons3 = "",
			gecko_spellcheck = "false"
		)#
	</td>
</tr>
</cfoutput>

Notice the ‘loadbase=0′ argument on the second invocation. That told the previous version of CF TinyMCE to not all of TinyMCE again – just load the settings instead.

The new version automatically handles multiple instances and not loading TinyMCE all over again for subsequent invocations on the same page. Therefore, the new syntax example is:

<cfoutput>
<tr>
	<td>
		#application.includes.tinymce(
			VScope=Variables,
			content=read.en,
			element="en",
			csswidth="444px",
			resizing=true,
			theme='advanced',
			theme_advanced_buttons1 = "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
			theme_advanced_buttons2 = "",
			theme_advanced_buttons3 = ""

		)#
	</td>
	<td>
		#application.includes.tinymce(
			VScope=Variables,
			content=read.es,
			element="es",
			csswidth="444px",
			resizing=true,
			theme='advanced',
			language='es',
			theme_advanced_buttons1 = "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
			theme_advanced_buttons2 = "",
			theme_advanced_buttons3 = "",
			gecko_spellcheck = "false"
		)#
	</td>
</tr>
</cfoutput>

No more loadbase! The key is the argument “Vscope=Variables”. That lets CF pass the Variables scope back and forth between a page and a function. It is a required argument which I am not happy about. But since it’s value never changes it’s not so bad.

Because of this fundamental change, CF TinyMCE 090612 is not backwards compatible. If anyone knows how to pass the Variables scope back and forth between a page and a function, without an argument like I am here – please let me know!

You can download CF TinyMCE at github: http://github.com/WebVeteran/cf-tinymce/

CF TinyMCE, ColdFusion, TinyMCE , ,

ColdFusion function: create tinyMCE instances

March 31st, 2009

As promised, I am releasing the CF function I use to display tinyMCE instances. It can handle multiple languages, multiple instances per page, and of course compression.

It’s somewhat basic right now. I set up defaults for most end-clients, meaning its easy to use and familiar feeling. I came to this configuration after working with clients for two years – listening to their complaints and slowly molding the defaults to what is here now.

The simplest incarnation is:

<cfoutput>
#application.formutils.tinymce(content=read.bio)#
</cfoutput>

This assumes you cached the CFC into an application variable called ‘formutils’, and a query named ‘read’ with a field called ‘bio’. That will generate the base code (put into the htmlhead by default), create the textarea named ‘content’, set up modified defaults for tinyMCE and then display it.

But you can get fancier:

<cfoutput>
#session.utils.tinymce(
	content=read.rightcolumn,
	element="rightcolumn",
	cssfile="/includes/css/common.css,/includes/css/tiny_dyn.cfm?csswidth=210px",
	resizing=false,
	loadbase=0
)#
</cfoutput>

That one will create a textarea with name and id of ‘rightcolumn’. It will also use specific css files. If you notice that last css file is a cfm page that dynamically creates the width of the page. This is awesome for giving the editor a real-time view of their page. Then it turns resizing off. Finally, with loadbase=0, the base of tinyMCE will not be loaded (this example is for a secondary tinyMCE instance in the same page).

Most of the defaults can be overridden with arguments as demonstrated above. However this function is not all-encompassing of tinyMCE’s many attributes. If you need more customizability, feel free to fork the git project, or simply ask me for the attribute you need inserted.

You can get this CF function directly from github: http://github.com/WebVeteran/cf-tinymce

Bonus example

A multilingual coldfusion application using tinymce for translations. One instance is the english, the other is spanish. Both use a very simple editor. It’s actually the advanced editor configured to mock the simple editor, but with a few extra buttons.

<cfoutput>
<tr>
	<td>
		#application.includes.tinymce(
			content=read.en,
			element="en",
			csswidth="444px",
			resizing=true,
			theme='advanced',
			theme_advanced_buttons1 = "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
			theme_advanced_buttons2 = "",
			theme_advanced_buttons3 = ""

		)#
	</td>
	<td>
		#application.includes.tinymce(
			content=read.es,
			element="es",
			csswidth="444px",
			resizing=true,
			theme='advanced',
			loadbase='0',
			language='es',
			theme_advanced_buttons1 = "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,undo,redo,|,code,cleanup",
			theme_advanced_buttons2 = "",
			theme_advanced_buttons3 = "",
			gecko_spellcheck = "false"
		)#
	</td>
</tr>
</cfoutput>

Output is:

two tinymce instances

two tinymce instances - click to view larger

CF TinyMCE , , , , ,

TinyMCE CF GZip has moved from github to sourceforge

February 27th, 2009

With the CF gzip compressor now part of the TinyMCE, further development will commence at SourceForge. Right now (and just for link’s sake) it is at github.

Old: http://github.com/WebVeteran/tinymce-cf-gzip/
New: https://sourceforge.net/projects/tinymce

ColdFusion, TinyMCE, TinyMCE CF GZip ,

TinyMCE CF GZip – now officially part of tinyMCE

February 27th, 2009

I am very pleased to announce that my ColdFusion based compressor for TinyMCE has been adopted by Moxiecode’s for their official CF compressor.

Coldfusion Gzip Compressor 2.1.0 released

This version of the Coldfusion Gzip compressor is a complete rewrite that doesn’t require any jar file to be installed in the lib directory. The previous versions was basically written in Java and the cfm file only called the logic in this Java file. This was a major problem when the compressor was to be used on shared hosting servers since users can’t install these .jar files by themselves.

The rewrite of this compressor was done by Jules Gravinese. He will be the new maintainer for the Coldfusion compressor. So this release is also an introduction to a new team member.

We are trying to move TinyMCE from being a tightly maintained Moxiecode project to more of a community project. We recently added a new team page to the site that lists the members that are the core part of the TinyMCE community.

This is great news for shared hosting. Now you can run TinyMCE, compressed, without installing a jar file.

Many thanks to Artur Kordowski for his gzip work in Zip CFC.

You can look forward to tweaks and improvements over time!

ColdFusion, TinyMCE, TinyMCE CF GZip , ,

gitPush 1.1 – added error trapping

February 17th, 2009

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.

read the log file for errors
set theResult to do shell script “cd \”" & thePath & “/\”; cat gitPushOutput.temp”
if theResult is not “” then
    tell application “gitPush”
        activate
    end tell
    display dialog “There was an error. git said… 

” & theResult buttons {“Quit”} default button 1 with icon 2
end if

 


git Error dialog

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 , , ,