Henry's Web Notes

My dev notes about the web

JavaScript: Avoiding Implied Globals In Your Functions

You were told that any variables inside a function are supposed to be available only to that function and not accessible outside. So you are doing something like this:


function add(x, y) {
    sum = x + y;
    return sum;
}

So you called the function add with some arguments and got a the correct return value. Great, it works, your function is working but there’s one problem though. After calling the function, you had implicitly added one more variable sum to the global namespace. You can try the code above for yourself. After you call add, you can print out this.sum or window.sum and you’ll see that it has the same value as the variable inside the function.

How did that happen? In JavaScript, any variable that you don’t declare automatically becomes a property of the global object just like the variable above. Unless that was your intention, it is always a good habit to declare a local variable with var.

Here is the correct way to do it:


function add(x, y) {
    var sum = x + y;
    return sum;
}

Now, when you call the function and tried to print window.sum, you will get undefined.

Apache: Serving Your Website Without “www”

In the early days of the web, people used to always type www in front of a domain name. I believe this became a convention to distinguish the web server from other services like the mail server. In reality, there’s no need for distinction because a typical web server responds to port 80 and the mail server responds to port 25, 110, etc. There was never a rule that requires a website to start with a www or any other prefixes. So typing just your domainname.com should be a valid website address.

These days, it is now a common practice to serve a website either with or without the www prefix. In fact, most companies prefer it without the www because it’s easier to type and remember. Not to mention, the letter “w” has the longest syllable in the alphabet. Try to say that three times before the domain name. And don’t give me that “dubdubdub” stuff :)

So, if you’re hosting your own server and/or have access to the Apache configuration file (it’s usually httpd.conf or apache2.conf) and running multiple sites, you can copy the following lines in your conf file (replace example.com with your domain name):

<VirtualHost *>
    DocumentRoot /var/www/web
    ServerName www.example.com
    ServerAlias example.com
</VirtualHost>

In addition, make sure that the A Record in your DNS setting had the example.com and www.example.com pointing to the same IP address.

Testing Twitter Tools

Just testing twitter tools without the bit.ly plugin…

Update:
You don’t need to install/activate the bit.ly plugin that came with Twitter Tools since Twitter is already using bit.ly for shortening URL.

Linux: How To Install Apache And PHP5 In Ubuntu

From the command line, run the following commands:

sudo apt-get install apache2
sudo apt-get install php5
sudo apt-get install libapache2-mod-php5
sudo /etc/init.d/apache2 restart

And that’s it. Your web server with PHP is ready to go. The default location of the Doument Root can be found in /var/www

If you need a CLI (command-line-interface) for PHP you can run the following command:

sudo apt-get install php5-cli

PHP: Session Save Path Error

Error: Cannot start session without errors, please check errors given in your PHP and/or webserver log file and configure your PHP installation properly.

This error has something to do with the directory where your PHP sessions are saved. Check the value of session.savepath in your php.ini and make sure that the directory has a write permission or if it exists. If you are running PHP on Windows, typically on install time, the default setting for this is under C:\Documents and Settings\[user]\Local Settings\Temp\php\Session. In some weird cases, Windows deletes this directory. So if you get the error message above, make sure that this directory still exist. If not, you can simply create the directory or better yet, change your session.savepath setting to a directory out of temp.

JavaScript: How To Force Page To Reload

When you want to load a page on a browser, you would normally click the Refresh / Reload button or press F5 or CTRL-R on your keyboard. If you set your browser to cache previously viewed pages, doing a normal page reload will cause the browser to fetch the requested page from cache unless otherwise instructed by a script or meta tag in the page. When this happens, images and css will be read from cache and form fields will also retain their values (this included text, textarea, radio button and checkbox).

In order to completely force a page to reload, which means, instructing the browser to skip the cached data and re-fetch everything from the server, you need to press CTRL-F5 on IE and Firefox or Command-R on Mac-Safari.

In JavaScript, there are also different ways to reload a page. Here are the methods for a normal page reload:

window.location.assign(url);
Loads the page at the the provided URL.

window.location.replace(url);
Same as assign() method except that when replace() is used, the current page will not be saved in the session history as it was replaced by the provided URL.

document.location = url;
Technically, location is a read-only property of the document. But some browsers allow you to assign a URL to it, which causes the page to reload. The reason for this is because whenever the location property is modified, a page will reload with the new assigned URL. I recommend using window.location for browser compatibility.

window.location.href = url;
Same as document.location

The other properties of location that when modified will reload the page are hash, host, hostname, pathname, port, protocol and search.

What if you want to completely force a page to reload? Say, you want to clear all entered values in a form or maybe you have modified your CSS and you want to make sure that the page will pickup the new changes. In order to do so, you can do the following:

window.location.reload(true);

The reload method accepts a boolean value, which, when it is true, causes the page to always fetch document from the server. When none is specified, it defaults to false, which may reload the page from its cache.

As you can see, the methods for forcing a page to reload has their own purposes. If you simply want to reload the page and do not care about displaying fresh data, you should not always force it to reload from the server to avoid making http requests, which is an expensive call and a waste of bandwidth. You are not only calling the page itself but you maybe reloading an external CSS page too.

Web Acronyms

I want to blog some basic stuff for at least a month. How about I start with listing some of the acronyms commonly use on the web. You probably already heard all of them, but do you know what they stand for? Here they are:

ASCII – American Standard Code for Information Interchange
AJAX – Asynchronous Javascript
ASP – Active Server Pages
CGI – Common Gateway Interface
CF – Cold Fusion
CFM – Cold Fusion
CFML – Cold Fusion
CSS – Cascading Style Sheet
DB – Database
DHTML – Dynamic Hypertext Markup Language
DMX – Dreamweaver MX
DOM – Document Object Model
DTD – Document Type Definition
DW – Dreamweaver
FF – Firefox
FE – Front-end
FEE – Front-end Engineer
FH – Freehand
FL – Flash
FP – Fireworks
FTP – File Transfer Protocol
FW – Fireworks
GIF – Graphic interchange Format
GUI – Graphical User Interface
HDML – Handheld Device Markup Language
HTML – Hypertext Markup Language
HTTP – Hypertext Transfer Protocol
HTTPS – Secure Hypertext Transfer Protocol
IDE – Integrated Development/Design Environment
IE – Internet Explorer
IP – Internet Protocol
IRI – Internationalized Resource Identifier
JPG/JPEG – Joint Photographic Experts Group
JS – Javascript
JSP – JavaServer Pages
LAMP – Linux, Apache, MySQL, PHP/Perl/Python
MIME – Multipurpose Internet Mail Extensions
MM – Macromedia
MOZ – Mozilla
MSIE – Microsoft Internet Explorer
NN – Netscape Navigator
PERL – Practical Extraction/Expansion and Report Language
PHP – Hypertext Preprocessor
PNG – Portable Network Graphics
POP – Post Office Protocol
PS – Photoshop
RDF – Resource Description Framework
REST – Representational State Transfer
RPC – Remote Procedure Call
RS – Recordset
RTSP – Realtime Streaming Protocol
SB – Server Behavior
SGML – Standard Generalized Markup Language
SMIL – Synchronized Multimedia Integration Language
SMTP – Simple Mail Transfer Protocol
SOAP – Simple Object Access Protocol
SQL – Structured Query Language
SRGS – Speech Recognition Grammar Specification
SSI – Server Side Includes
SSML – Speech Synthesis Markup Language
SSL – Secure Sockets Layer
SVG – Scalable Vector Graphics
TCP/IP – Transmission Control Protocol over Internet Protocol
TLS – Transport Layer Security
UCS – Universal Character Set
UI – User Interface
URI – Uniform Resource Identifier
URL – Uniform Resource Locator
UTF – Unicode Transformation Format
W3C – World Wide Web Consortium
WAI – Web Accessibility Initiative
WASP – Windows, Apache, SQL, PHP
WML – Wireless Markup Language
WSDL – Web Services Description Language
WWW – World Wide Web
WYSIWYG – What You See Is What You Get
XHTML – Extensible HyperText Markup Language
XML – Extensible Markup Language
XPATH – XML Path Language
XRI – Extensible Resource Identifier
XSL – Extensible Stylesheet Language
XSLT – Extensible Stylesheet Language Transformations