Whenever you create an object in JS, you do somehting like this (at least that’s how I do it):

// A Javascript Object
var MyJsObject = {
	param1: true,
	param2: false,
	func1 : function() {
		// my code here
	}
}

Whenever you expand that object, one would add a new function/param to the object, separated by a comma:

// Expanding the Object
var MyJsObject = {
	param1: true,
	param2: false,
	param3: "Yes we can",
	func1 : function() {
		// my code here
	},
	func2 : function() {
		// my code here
	}
}

Now, I myself have noticed that sometimes I forget to add a comma, like so:

// This will fail
var MyJsObject = {
	param1: true,
	param2: false,
	param3: "Yes we can"
	func1 : function() {
		// my code here
	},
	func2 : function() {
		// my code here
	}
}

The above of course won’t go undetected, as it will produce an error. Using Firebug you’ll get this lovely error, pointing you immediately towards the errorous file:

Another mistake one can make is to have an extra comma after your very last function. This – for example – can happen when you delete a function from the object:

// This will fail, will it?
var MyJsObject = {
	param1: true,
	param2: false,
	param3: "Yes we can",
	func1 : function() {
		// my code here
	},
}

The problem with the above is that it won’t give an error in Firefox (my weapon of choice), allowing to code along without even knowing I’ve left a lost comma at the very end of my JS file!

The real problem of the problem above is that it actually will give an error in – yeah, you’ve guessed it – Internet Explorer.

As many webdevelopers I test sites in IE not that often: I first get my stuff straight in Firefox, and then test IE and start fixing the errors.

Now, there’s a problem with “the problem of the problem”: IE gives an error, but – again, you’ve guessed it right – it totally isn’t descriptive; You get something like: “Line: 10; Char: 1; Error: Expected identifier, string or number; Code: 0; File: yourpage.html”

The error given is worthless as neither the correct file nor the correct line-number is mentioned in the error! Finding the file that’s causing the error can take quite some time if you have lots of JS files.

In order to never ever mistakenly produce such an error I use this little trick: the very last datamember/property/whatever-you-like-to-call-it of every Object I write is a dummy parameter _eeo, which is short for End Of Object. This _eeo always is the last datamember of the Object, as seen below:

// "Bramus! The lazy programmer" at work
var MyJsObject = {
	param1: true,
	param2: false,
	param3: "Yes we can",
	func1 : function() {
		// my code here
	},
	_eeo: true
}

Using the _eeo trick, one can never – mistakenly – have a lost comma at the end and one must always add a comma when adding new functions/datamembers (which you do before the _eoo param). This reduces mistakes, as there’s no doubt anymore

Turns out that this little trick is that good, that my former colleagues at Netlash and Netlog are using this trick too nowadays

I suggest you read Jurriaan’s excellent post on the subject if you’re not acquainted with the subject. It situates the problem and explains the necessity of this plugin.

Elementary my dear Watson, elementary:

Find the source on GitHub (click on the Download button)

Usage is simple: include the script after you’ve included jQuery. From then on you can use the classData() function on a jQuery Object:

// Set data - this will set the class 'extradata_yes' on the elements that match the selector (note that the plugin does not break chaining)
$('.mySelector').classData('extradata','yes').css('backgroundColor','lime');
// Get data - alerts the extradata value of the elements that match the selector
alert($('.mySelector').classData('extradata'));

Please note that the setting of data does not break jQuery’s chaining.

As you might have noticed the getter and setter functions are non-existent: there’s one function to handle both the mutation and accessing of the data (this differs from Jurriaan’s approach: he has two functions)

Now, you might have noticed that there’s no way to set the glue (which defaults to an underscore) used in the call itself. Therefor an extra function comes in handy: classDataGlue(). Via that function you can set glue before getting and/or setting data.

// Set data with custom glue - this will set the class 'extradata-yes' on the elements that match the selector (note that the plugin does not break chaining)
$('.mySelector').classDataGlue('-').classData('extradata','yes').css('backgroundColor','lime');
// Alert current glue (note that we need to have a jQuery object for this)
alert($('').classDataGlue());
// Get data (note that the glue is still known to the plugin) - alerts the extradata value of the elements that match the selector
alert($('.mySelector').classData('extradata'));
// Get data that uses % as glue:
alert($('.mySelector').classDataGlue('%').classData('otherdata'));

Again note that the setting of the classDataGlue does not break jQuery’s chaining. Also note that when you set the glue, the calls that happen after it will still use that glue (viz: once the glue is set, it keeps using that glue. Make an extra call to classDataGlue() to set it to an other value).

You may always leave a comment below and/or – it certainly is no obligation but it would most certainly put a smile on my face – make a donation.

It’s quite simple: Dropbox is as easy as it can be! Just install the client and drag and drop your data into your Dropbox (which is a folder located on your hard drive). From there on all syncing goes automatically, no need for one to manually invoke a commit command or anything like that. By this I always have the latest versions of all my files available on both my PC and my Mac.

Dropbox Intro Video

The great thing about Dropbox is that it supports Windows, OSX and Linux (unlike Live Mesh, which I’ve also tried) and also provides you a web interface (LM also provides you one).

However, the greatest feature (which I only discovered this weekend) is the sharing functionality: one can share parts of his Dropbox with other Dropbox users. It’s in this feature that I saw an opportunity to experiment …

It might be good to know that the current project I’m working on is from a client who has his own dedicated Windows2003 Server which I co-administer. On that server, IIS is configured to serve several sites over HTTP and one Sharepoint Portal over HTTPS. RDP access is available to me (only after establishing a VPN connection first) thus I basically have full access to the server.

Now, the idea I came up with was to create a new Dropbox account for the project (from here on named dropbox-project) and share the folder containing the project’s web files of my Dropbox (from here on named dropbox-bramus) with dropbox-project. By that dropbox-project will always have the latest files from dropbox-bramus (and vice versa)

The two Dropbox accounts, sharing 14MB in total.

By using the sharing functionality I’d also be keeping my personal files (and files from other projects) private from dropbox-project (which is the whole idea behind the sharing feature, otherwise I’d just add the client his server as a computer that connects to dropbox-bramus)

The two Dropbox accounts, folder comparison.

After having shared the files I’d install the Dropbox Client onto the client’s server and configure it to connect to dropbox-project. By this the server will always have the newest files whenever I save a new version on my computer.

The final step then would be to configure the webserver (IIS in this case) in such a manner that the Document Root of the http://www.project.com/ site points to the Dropbox Folder. By this the site will immediately be updated whenver I save a file in dropbox-bramus. As an extra, files that are uploaded via the site will appear into dropbox-project, and thus dropbox-bramus too

Although this guide is written for Windows Server running IIS it can easily be transformed to Windows Server running Apache. The only difference is that step 2 will differ (I’ve written down instructions for IIS)

UPDATE 2011.10.04: Joe Hewitt has instructions on how to configure/install a likewise setup on a Linux host.

It only takes three steps in order to get your Dropbox running as a Web Publishing solution. However, you won’t be able to do so if you don’t have full access to the server.

1. Installing Dropbox on the server
2. Sharing data between multiple Dropbox accounts
3. Configuring the webserver
4. Running Dropbox as a service

1. Installing Dropbox on the server

2. Sharing data between multiple Dropbox accounts

3. Configuring the webserver

Why it it’s working now and won’t work anymore.

What now?

4. Running Dropbox as a Service

I’m quite sure you’ll find a way of getting it to run. If you find it, feel free to document it and ping this post.

It certainly is no obligation but it would put a smile on my face

• Download HTMLArea Image Manager from http://sourceforge.net/projects/imgmngedt (ddl)
• Open the archive and extract the ImageManager folder from Copy of htmlarea_wei_31_03_2004/plugins/ in the archive to yourKayakoInstallPath/includes/htmlArea/plugins/ so that you end up with the following directory structure: yourKayakoInstallPath/includes/htmlArea/plugins/ImageManager/
• Open up the freshly extracted yourKayakoInstall/includes/htmlArea/plugins/ImageManager/config.inc.php and change the $IMConfig['base_dir'] and $IMConfig['base_url'] variables to reflect your setup. The other params in the config file can be changed but in most cases they’ll work out of the box.
• Save that file and you’re done.

For example: if we want our images to be located at http://support.company.com/images/ then we configure the two params as so:

$IMConfig['base_url'] = 'http://support.company.com/images'; // no trailing slash!
$IMConfig['base_dir'] = '/home/support/default_www/images'; // no trailing slash!

IMPORTANT: Don’t forget to set the write permissions on the path!

• Locate yourKayakoInstallPath/themes/admin_default/cpheader.tpl and find the line where it reads //HTMLArea.loadPlugin("TableOperations"); (line 53)
• On the next line, insert:

  <{if $htmlarea eq true}>HTMLArea.loadPlugin("ImageManager");<{/if}>

• Save that file and you’re done.

It could be possible that you need to rebuild your Kayako SupportSuite cache: From the admin zone, navigate to Diagnostics in the left tree and select Rebuild Cache

Now, when writing a KB article (for example) and with the WYSIWYG editor enabled, the functionality of the Insert Image Icon will be replaced: instead of entering an URL to an existing image, you’ll now see an image browser from where you can upload new files onto the server.

Dear Kayako,

it would be awesome of you guys to drop HTMLArea in the 4.0 release of SupportSuite in favor of using TinyMCE with the addition of a little custom plugin in order to enable image upload. (If you need any help on this, feel free to contact me.)

Now that I have your attention: I’m quite sure the new release – whenever it comes out – will have a full XHTML overhaul, along with a spiffy new design; Just like your new website which totally rocks.

The addition of some clever usage of Ajax throughout the staff and admin areas (drag and drop to sort items for example) also is on my wishlist, yet given your new website I’m quite sure you’ll manage.

Regards, and keep up the good work.

Don’t like reading? Member of the lazyweb? Savvy enough? You might as well just skip to the example then

PS_BRAMUS.TextConvert is the successor of PS_BRAMUS.TextExport and consists out of two scripts:

1. PS_BRAMUS.TextConvert.Export (PSD2TXT)
2. PS_BRAMUS.TextConvert.Import (TXT2PSD)

The first script is a modded version of PS_BRAMUS.TextExport which scans your PSD file for text strings. After retrieving all text, the output is saved into a TXT file in your Documents folder.

The second script is the counterpart: it reads in TXT files (which you first exported via the first script) and replaces all text layers with the new content in your PSD file.

PS_BRAMUS.TextConvert is ideal for agencies/companies who need to translate Photoshop mockups: Export all text layers via PS_BRAMUS.TextConvert.Export to a text file, send that text file to the translation agency and let them do the translation, then import the translated file via PS_BRAMUS.TextConvert.Import into the PSD file.

Of course its usage is not limited to the example above. The Export part of PS_BRAMUS.TextConvert can be used for (speed)slicing for example

• Photoshop CS2 or newer is required
• PS_BRAMUS.TextConvert has been tested and verified working with Photoshop CS2 and CS3 (CS4 untested but should work. Can anyone verify?)

PS_BRAMUS.TextConvert released under a creative commons Attribution-ShareAlike 2.5 license. Should you use the script within a commercial context, or for any other reason you fancy, please consider clicking the PayPal donate button.

▼ Download PS_BRAMUS.TextConvert 1.0

Note: PS_BRAMUS.TextConvert was made possible by means of lexia:park, Barcelona, Spain.

• Download PS_BRAMUS.TextConvert from the link above
• Extract it to the Presets/Scripts folder of your Photoshop installation folder (defaults to C:\Program Files\Adobe\Adobe Photoshop CS3\Presets\Scripts on Windows)
• Restart Photoshop if it was already running (important!)

Once installed, usage is simple:

1. Exporting text (PSD2TXT)

• In Photoshop go to File > Scripts and select PS_BRAMUS.TextConvert.Export-1.0 from the list to export all text.
• Per open PSD file, a TextConvert-[NAME_OF_YOUR_PSD_FILE].txt file will appear in your Documents folder
  (if multiple files are open, you can choose to only run PS_BRAMUS.TextConvert.Export on the currently active file or on all files)
• After the export was done, you’ll get a little notification of this
  (if PS_BRAMUS.TextConvert.Export ran with a single file, the .txt file will open instead)

2. Reworking text

• Locate the exported .txt file in your Documents folder and open it with your favorite text editor
• Translate the strings you find in there, but make sure that you leave the [BEGIN /XXXX ] and [END /XXXX ] lines untouched! (If changed importing will fail)
• Save the text file with the same name in the same location.

3. Importing text (TXT2PSD)

• In Photoshop go to File > Scripts and select PS_BRAMUS.TextConvert.Import-1.0 from the list to import all text.
• Per open PSD file, the script will look if the TextConvert-[NAME_OF_YOUR_PSD_FILE].txt file exists in your Documents folder, read it in (if it exists) and update the text layers of your PSD file
  (if multiple files are open, you can choose to only run PS_BRAMUS.TextConvert.Import on the currently active file or on all files)
• After the import was done, you’ll get a little notification of the number of files updated
  (if no txt files were found, then it will state that 0 files where changed)

Warning!

• Please note that PS_BRAMUS.TextConvert.Import is not compatible with any version PS_BRAMUS.TextExport!
• Please note that in between the running of the Export and Import NO CHANGES TO THE PSD FILE can be done!

Given the fact that the image pictured on the left is a normal Photoshop file (viz. background layer, image elements on different layers, text layers, layer groups, etc) I’m quite sure the figure below explains it all:

Now, did you download PS_BRAMUS.TextConvert already?

It certainly is no obligation but it would most certainly put a smile on my face