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.

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