As web applications aim to become more dynamic, responsive, and feature-filled, they will inevitably need to include more JavaScript. As the amount of code increases, there is also an increase in the need to keep that code organized, extendable, and maintainable. The MooTools JavaScript framework provides you just that. This post will cover the basics of creating and organizing MooTools classes so that your web application’s JavaScript will stay organized and extendable for years to come.

Click here to read the post and please vote for it on Reddit!

Script Junkie: MooTools Class Creation and Organization is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Like all top-notch JavaScript toolkits, Dojo tries to make its classes as flexible as possible, knowing that users of the toolkit may have different ideas about how a given class or class method should work. Luckily, Dojo provides you a number of methods by which you can subclass or modify existing classes. Let’s examine a few ways you can make Dojo classes exactly the way you like.

Click here to check it out!

SitePen: Creating and Enhancing Dojo Classes is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

I’ve just released my third NetTuts post:  http://net.tutsplus.com/tutorials/javascript-ajax/sexy-animated-tabs-using-mootools/ .  From the post:

One modern, attractive way of placing a lot of content into a little space is by using a tab system. This tutorial will show you how to create a sexy, animated tab system complete with CSS sprites, cookies, and animated tab swapping.

Go over to NetTuts and check it out!

NetTuts: Sexy Animated Tabs Using MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

This post was authored by Jeremy Martin. To learn more about Jeremy, click here.

One of the catch 22′s of owning a blog or site on the cheap is that of not breaking the budget, while tip-toeing around an overly constrictive space/bandwidth quota. Along with countless others, I myself am often hanging in the aforementioned balance. One solution I recently deployed to stretch a little more mileage out of my current hosting package was to serve all my static content via one of the many dirt cheap or even free file hosting services out there.

Serving my static content from a remote location has had several benefits, such as reduced bandwidth consumption and fewer content requests. However, I immediately became aware of an inconvenience to this solution. Modifying any static content on my local machine (which I use for development and testing) forces me to change their references to local paths. The same is also true if I want to do any development while disconnected from the internet. And of course, these references must be switched back to point at my static hosting before deployment. I found this to be getting so tedious that I was simply testing in production – bad idea.

Well that’s when I thought of this painfully obvious solution – while I’m quite sure it’s not original, it is both very simple and very useful. I use a common.php file to hold all of my site-wide helper methods. I added to it this simple function:

function get_static_root() {
if($_SERVER['HTTP_HOST'] == 'localhost') {
return 'http://localhost/static';
} else {
return 'http://www.xxxxxx.com/static';
}
}

Then I organized all of my static content into the following directory structure:

• / (Site Root)
  • static
    • css
    • js
    • images

This causes all of my local static content to match the file structure of my remotely hosted static content. Now, when I want to reference an image, for example, I simply set the url equal to /images/image.jpg. If I’m testing on my local machine, the url will resolve to http://localhost/static/images/image.jpg, whereas in production it will resolve to http://www.xxxxxx.com/static/images/image.jpg.

While this does require a little more work up front, it has saved me a lot of time and makes development so much easier.

For those who like to visualize…

Well that’s it! Many thanks to David for letting me guest author on his excellent blog!

About Jeremy Martin

Jeremy Martin, born and raised outside of Seattle, Washington, received a B.S. in Computer Science in 2007. In July of the same year, he married his beautiful wife, Annie, and they now reside in the far, far away land of South Carolina. Jeremy is currently a software engineer for Charleston based Benefitfocus, and enjoys hanging out with his better half, and keeping his blog up to date (when she’ll let him…).

Load Your Static Content the Dynamic Way is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Using Weather Data to Change Your Website’s Appearance through PHP and CSS is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

This post was authored by Eric Wendelin. To learn more about Eric, click here.

A lot of blogs and websites that have a wide range of users tend to have buttons or images that change the text size for easier readability. This can easily be implemented with a bit of JavaScript and some HTML to attach it to. There are libraries out there that do this, but in many cases it is likely overkill. Simplicity is generally better where possible.

The Text-Resizing JavaScript Function

function resizeText(multiplier) {
  if (document.body.style.fontSize == "") {
    document.body.style.fontSize = "1.0em";
  }
  document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
}

Note that line 2 in the code above requires that you specify font-size on the <html> element (it is OK to have a font-size that is specified in pixels). Alright let’s see our options for using the resizeText() function.

The HTML (I use images here but you can use any HTML element)

<img id="plustext" alt="Increase text size" src="images/makeTextBigger.jpg" onclick="resizeText(1)" />
<img id="minustext" alt="Decrease text size" src="images/makeTextSmaller.jpg" onclick="resizeText(-1)" />

You can of course unobtrusively add the events like this:

The Unobtrusive Way Using JavaScript

$("plustext").addEvent("click", function() {resizeText(1);});
$("minustext").addEvent("click", function() {resizeText(-1);});

Here’s a simple example of this all put together. This works flawlessly on at least IE, Firefox, Opera, and Safari (others not fully tested, please give feedback :)

I’m sure you readers can think of some improvements so let’s see some in the comments!

About Eric Wendelin

Eric Wendelin is a software engineer for Sun Microsystems. When he’s not doing super-secret programming for Sun, he plays indoor soccer, playing Wii with his friends, and cheering on the Colorado Avalanche. He also writes a blog on JavaScript, CSS, Java, and Productivity at eriwen.com

Change Text Size On Click With JavaScript is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

This post was authored by Mark Sanborn. To learn more about Mark, click here.

A while back I had been working on a website project that required an authentication login system. In order for the login system to properly operate every page of my site needed to check to see if there was a session created and the user was logged in. Some of you may know that in PHP you cannot view session variables without in fact initiating a session. So, for example if you wanted to provide a simple, “you are logged in as Mark click here to logout.” on each and every page you would have to actually start a session to display this message properly.

At first this task may seem trivial. The code to start a session is one line:

session_start();

After changing an existing website that was already indexed in Google quite well to include sessions I was shocked to find out what effect this might have in the Google index. A few weeks after making the change most if not all of my pages were no longer indexed by Google and for awhile I had no idea what was causing it.

After awhile I would notice that sometimes my URLs were taking on an additional string of numbers. They would look like this:

http://www.yourdomain.com/?PHPSESSID=61ca9c60b10cc8f481ac9c1eacbee797

When I saw this I immediately knew this was the reason Google was dropping my pages. This string of numbers inherently does two drastic SEO mistakes. For one this number changes every time you go to the site. What this means is that Google thinks it is a different URL with the same content as the last URL it indexed. Many know that Google penalizes pages for duplicate content. This extra string of numbers essentially makes your entire website a bunch of duplicates.

If that isn’t enough already it also makes another SEO mistake. Google doesn’t weigh pages that appear to be static the same as they do a page that appears to be a one time randomly generated page. To Google the above URL appears to be a page only meant to be seen by one person. Google gives less indexing weight to it.

So what did I do to fix this issue?

Well after a little bit of searching I found that this is actually a common problem and there is a simple solution to fix it. I sure wish I knew about this before I sacrificed my page rank and indexing. To save you the trouble in the future please learn from my mistake and use the following code before starting any session variable.

//These commands must be set BEFORE the session is started
ini_set('session.use_trans_sid', false);
ini_set('session.use_only_cookies', true);
ini_set('url_rewriter.tags', '');
// start session
session_start();

Moral of the story?

Be very careful what you do to your pages your Google indexes may count on it.

About Mark Sanborn

Hi, I am Mark Sanborn. I am 22 and just graduated from the University of Montana. I have had an interest in computers for as long as I can remember. I still remember the DOS days and really started getting into computers when Windows 3.1 was around. I made my first webpage in the 7th grade. My passion for web design and computers has only progressed from there.

How did I learn to program?
In college I was approached by a group that wanted a realty website created for the University business plan competition. I gladly took the job and forced myself to learn PHP/mysql while working on the project. By the time the project was complete I was fairly fluent in PHP and was confident I could build pretty much anything I set my mind to. I later used these skills to create a corporate website with a custom ecommerce shopping cart for a client.

Computer Related Education
I just received my B.S. in Business Administration Information Systems. I scored nearly a perfect score on the MCP test allowing my to achieve the Microsoft Certifed Professional status. While attending college I worked for the University as tech support for dorm students and faculty. I have a lot of experience working with computers but there is still a lot I can learn from others. I also believe that you learn the most by teaching it to others. This is why I created my own blog.

What Languages Do You Use?
HTML, CSS, MySQL, PHP, Java, XML, Bash. For some reason I want to learn python yet I don’t know what I would use it for. Some experience in: ASP, Visual Basic, ColdFusion.

What Do You Do In Your Spare Time?
I spend a lot of time in front of the computer but I am not your typical programmer that loves Star Trek and converses with their friends about what to do in the event of zombie attacks. All stereotypes aside, I love to play guitar I am interested in all types of music, mostly blues and classic rock. I am an avid weight lifter and practice Judo. I don’t consider myself a fan of team based sports; however, I love individual sports. Last summer I learned to paraglide and for the past two winters I have been enjoying the fabulous sport of kiteboarding on snow.

Initiating PHP Sessions Without Sacrificing Your Page Rank is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.