Keep Your Copyright Message Fresh

There’s nothing that reeks of staleness and lack of attention, than a footer saying “copyright © 2009” in 2014. Doubly so when it’s a technology site. At best it says no one cares, at worst it suggests no one updated the site, or it’s look and feel, in years. Many times it’s not even the current maintainer’s fault: the stale message resides in a footer file, that gets included automatically with every page by a CMS system.

For my sites and web applications, as well as the ones I develop for my clients, I want to keep the copyright message fresh. It at least keeps up a pretense of someone updating the site once a year . And there’s no easier way to do it then with JavaScript.

All you need to do is locate the line in your footer that looks like:

<footer>copyright © 2009</footer>

and replace the year with a <span>:

<footer>copyright © <span id="year"></span></footer> 

And add this script tag to the end of the page:

<script>
    document.getElementById('year').textContent = (new Date()).getFullYear();
</script>

Even easier: if your site is using jQuery, add this to the ready event:

$('#year').text((new Date()).getFullYear());

This way, your copyright message will always show the current year. Keeping your content fresh? Well, that’s up to you .

Update:
Here's a shorter way to achieve the same effect, with one line:

<footer>copyright © <script>document.write((new Date()).getFullYear());</script></footer>

[This way is also more efficient, since no DOM selection is taking place].

Report the name of a JavaScript function

I do a LOT of JS development lately: straight up HTML5, PhoneGap for Android and iPhone and Node.JS on the server side. One command line I use in all environments is console.log.
console.log allows you to print out a string, a variable and even a complex object (just use JSON.stringify on it first) to the console view of:

• Developer Tools in IE8 and higher (hit F12)
• Developer Tools in Chrome (different keys for different OSs – nice, Google)
• Firebug in Firefox (install as an extension)

Since advanced JS uses a lot of event calls, anonymous functions and multiple files, it’s hard at times to figure out where things go wrong. So I’ve gotten into the habit of adding an entrance printout at the beginning of each function. But it has gotten cumbersome and annoying after a while, so I searched for a more elegant solution. I found this StackOverflow question, and based on the replies, constructed this code:

var fname = /^function\s+([^(]+)/.exec(arguments.callee.toString())[1];
console.log(fname);

Now, this looks like a cumbersome code to paste into each and every function, so I wanted to write a general funnction I can call anywhere to print the current function name. The problem is, if you put this code into a function, say reportFunctionName() and call it, you get "getFunctionName" printed out. The answer was in the same SO post:

function reportName() {
  var fname = /^function\s+([^(]+)/.exec(reportName.caller.toString())[1];
  console.log(fname);
}

Note the use of caller instead of callee. Also note both methods would not work well for anonymous functions (duh - no name -> nothing to print :)

Finally, I started using Github's Gist feature to collect all my code snippets, so you can find both code pieces mentioned here and here respectively.

Display JSON results

JSON (JavaScript Object Notation) is a great straight forward way to transfer information from one application/server to another. It's string-based, array-oriented, and does not carry with it the redundancy of XML or (shudder) SOAP. And the best feature in a web application: it's immediately transferable to a JavaScript object, without the need for (an explicit) parsing.

Add to the mix jQuery - a JavaScript framework that makes using JavaScript and writing dynamic web pages a snap. Once I picked it up, I couldn't go back. jQuery is now embraced by many - including Microsoft and Google, who include it in their default web templates, and provide hosted CDN versions of its latest versions.

jQuery shines when it comes to AJAX transactions - you can get a JSON result from a web service using one instruction! Going over the reply is also a snatch. I found myself many times just needing to dump the results on the page - either for debugging purposes, or so I could copy/paste them somewhere.

Here is a short code snippet that I use to get a JSON result from a local web service (a remote request requires JSONP - future post), and dumps the results in a form of a list. It assumes a single-level array reply and that you have a <DIV> element on the page called "result":

Explanation:

1. Line 1 includes version 1.5.2 of jQuery from the Microsoft CDN
2. Line 4 will make sure the function will run when the document has been fully loaded and drawn
3. Line 5 calls the JSON service and sends the results to a function
4. Line 8 iterates over the result object and creates an array of <LI> elements
5. Line 14 creates a new <UL> element, applies a CSS style to it, attaches the <LI> elements and places it inside the result <DIV>

That simple!