I was recently asked to display the remaining characters in a field as the user types (eg. 500 maxlen). So, I of course went online to avoidre-inventing the wheel.

Here is what I found. Coding forums had an article entitled Characters remaining as you type. The code is pretty straightforward. I made some minor tweaks to get the code where I wanted it and came up with the following as a result.

> & < replaced with {} for display
-field value

{textarea cols="58" rows = "3" onKeyUp="updatelen(event,500,this,document.getElementById('textCounter'))" onBlur="document.getElementById('textCounter').innerHTML='';" name = "npdShortDesc" }{/textarea}
{div id="textCounter"}{/div}


-jsheader

//called on onKeyUp - shows remaing characters in text field
// @ maxchars = max # of chars to allow
// @obj = text field in question
//@msgObj = div to hold remaining text messages
function updatelen(event,maxchars,obj,msgObj){
var xlen = 0;
var curText = obj.value;
curText = curText.replace(/\W/g,"ZyXw")
var x = curText.match(/ZyXw/g);
if (x) {xlen = x.length;}
var remaining = maxchars - curText.length - xlen;
if (remaining < 0) {remaining = 0}
msgObj.innerHTML = "Characters remaining: " + remaining;
if (remaining == 0) {
curText = curText.substr(0, (maxchars - xlen));
obj.value = curText;
alert ("You have now used the maximum number of characters allowed! ");
}
}


-examples (Tom)

I was trying to reload a page after it was updated and the function was eluding me. So, I am putting it here for my own reference.

Here is the link to the MSDN documentation on the reload method; location.reload([x]). Where x can be true, false, or a location: true = from the server; false = from cache; location = location.href.

http://msdn.microsoft.com/en-us/library/ms536691(VS.85).aspx

Just read a great article in TechRepublic that talks about two new Firefox add-ons. View formatted source and View Source Chart — for viewing and working with the source code for pages viewed within Firefox.

Great new add-ons that I just started playing with. Read the rest of the article for more info.

Andre Guirard of Best Practice Makes Perfect has a new whitepaper out on how to write well-performing Notes/Domino apps. It is invaluable and long overdue. Thanks Andre ! Read it now.

I was asked to weigh in on a strange occurrence. A developer had worked on the design of a database in test and had refreshed the production template's design. Soon after, the database owner called and reported a 404 error; page not found. Upon further investigation, the cause of the error was a missing design element. What? The page the owner navigated to, a view, was missing. That page wasn't even affected by the change. But, this error was not present prior to the development changes. Although it was not part of the development changes, it must have been deleted , right? Ok, restore the design from backup and we're ok. Well, not exactly. The design element is missing there too. What's up ?

A little background. The original design was signed by a user who is no longer with the organization. No, this organization does not sign all design elements prior to moving into production (that will be a point for discussion soon). About a week prior to the design changes, the user id in question was terminated. They validated that there were no agents in production that were signed by the old employee, so that was enough right? Apparently not.

Fast forward to the answer. Here is how the missing design element was discovered. We restored the terminated employees id and opened the design (the newly changed design in test) and viola, there was the design element. Ok, you say, the design element was hidden (using the last tab in the design properties that looks like a key) right? Yes, but not to show only to the ex-employee, but rather to a currently existing, valid role [DBAdmin]. So, if the role still exists, why did the design element suddenly go away when updated and refreshed? There in lies the question.

To review, a view signed by a newly terminated id had its design hidden to only members of the role [DBAdmin]. The ONLY change in the environment was the signing developers id was terminated one week prior to development changes being moved into production. This move caused the design element to disappear (seemingly) when the design was refreshed. Not immediately upon termination of the id but only after the design was refreshed. Admittedly, the new developer probably did not see the missing design element during the design changes and this was the reason that the design element eventually disappeared from production, however, the question I have is why was the design element missing in the first place? The role was still viable and the new developer was a member?

Even if I never truly find the answer, I posted this as a reference for me and anyone else that experiences this issue.

Now I am far from a bit-head and cannot really get into any heady discussion of run-time and loads etc etc. I can say, however, that there are two relatively easy ways to gain performance in a web app. 1. Stop using @import and start using link tags and script tags to reference outside code 2. Minify but be careful with obfuscation (love that word by the way). If you're interested, both of these tips and 10 more (that makes 12) are listed on AlastairC.ac: High Performance Web Pages by Nate Koechley.

I have read a lot about compression but never really did anything about it; until now. Turns out I was able to reduce the sizes of said css and js files by an average of 30% and reduced load times in my css and js files by almost half (from 300ms to 180ms using Firebug for FF and Fiddler for IE). Both are great debugging tools.

So, what did I use. Well I have listed the links to the sites/tools (free and online) below. In addition, I keep a duplicate file in the design for reference (eg. help.js and helpcompress.js). I reference the compressed js in the header and leave the original, fully commented code in the design for help.

Has anyone else used compression/obfuscation and have you run into any drawbacks?

Links -
Blogging Pro: Good tool reference site. Pick from any of the css compression tools on the site. I chose CSSClean.
Online Dojo Javascript Compressor/Obfuscator: Javascript compression
CleanCSS:CSS Compression