Mountain Studios Blog

jQuery Random Tip of the Day #1

2010-01-11T09:21:00.006-05:00

#1. Load the jQuery framework from Google

Not only does this save about 7 1/2 steps when developing a new site (finding the jQuery download page, downloading the most recent version, uploading it to your new site, linking it...), it may also speed up your site. There is a good chance your customer may already have the jQuery framework cached from a previous site that used the Google link.



<script src="http://www.google.com/jsapi"></script> 

<script type="text/javascript">



// Load jQuery 

google.load("jquery", "1.2.6"); 



google.setOnLoadCallback(function() { 

// Your code goes here. 

}); 



</script>

More info here.

Jailbreak Your iPhone with 1 Click

2009-11-09T11:18:00.002-05:00

With so much in the news these days about the iPhone, Verizon, the Droid, Palm Pre, and the expanded HSPA+ network in Canada, I'm planning on spending the next few posts or so on the pros & cons of the iPhone. We'll take a shallow dive into the world of Jailbreaking and I'll highlight some of the most beneficial apps for the business-types.

We won't get far today, but I'm guessing this post may be just what some of you were looking for if you haven't yet Jailbroken your phone.

A site by the name of "blackra1n" has just released a one-click solution for Jailbreaking any iPhone--even if you're running the most recent iPhone firmware (3.1).

I tried it out and it really was a "single-click" solution:

Go to the blackra1n website: blackra1n.com
Download the software for your platform (Mac or PC).
Open the downloaded program "blackra1n"
Click "make it rain"
Wait 12 seconds then you're done!

Ok, so looking back it's more like 4 or 5 clicks. But if you just count step 4, it really is a single click.

Enjoy your Jailbroken iPhone! Next time we'll talk about some of the advantages of it.

Coffee: How to Make it the Mountain Studios Way

2009-11-06T16:23:00.003-05:00

There are two types of people in the world (or perhaps I should say, two types of coffee drinkers in the world): those who drink great coffee and those who think they do. The latter tend to be more of the addicted-I-need-it-now-and-will-drink-any-coffee-type, while the former tend to be more of the coffee-connoisseur type. Now, I'm not here to mock the former group—a group of people who would be quite hurt and upset if I told them that Tim Horton's or Smitty's (or insert name of chain restaurant here) coffee just doesn't cut it. So I won't do that. Instead, I'd like to present a better way of making a great cup of coffee, professionally and artistically. (Because life is just too short to drink bad coffee.)

The Ingredients

Making a cup of coffee requires essentially just two ingredients: great beans and great water. If you mess up on either of these two, you won't get the perfect cup.

So let's start with the beans:

always buy whole beans, roasted within 10 days or less, and grind them just before you brew your cup
buy good beans, not the cheap no-name grocery variety (try a local roaster and expect to pay at least $12 or more per pound—here are some other suggestions: Kicking Horse Coffee, Just Us Coffee)

There is much more that could be said about the coffee itself, but let's leave it at that. Next, the water:

if you use bad water, either well-water or city-water, expect poor results
always use 100% pure water (either distilled or purified by reverse osmosis) note: most bottled water is not pure (besides, bottled water is bad for the environment, but let's leave that for another post)

The Process

boil water in a kettle
in the meantime, grind your beans using a good coffee bean grinder—to a coarse grind
use 1 tablespoon per 4 or 5 oz of water
pour the measured coffee into the bottom of your French Press
once the water is just off the boil, pour it into the French Press
stir it a few times to create a nice bloom on top
set your timer for 4 minutes
enjoy a great cup of coffee!

The Absolute Easiest and Fastest AJAX Form Solution using jQuery

2009-11-06T16:21:00.003-05:00

By now you've probably heard about AJAX and all its glory, but perhaps you have never ventured into that part of the web programming world. However, you have just built a simple contact form and thought about how great it would be to allow the user to submit this form without reloading the entire page. No problem, this is what we will do to make it happen using PHP:

Build your contact form as usual, using the POST method. (Nothing different here.)

<form method="post" action="process_form.php" id="contactForm"> Your Name: <input type="text" name="name" /><br /> Your Email: <input type="text" name="email" /><br /> Comments: <textarea name="comments" rows="10" cols="40"></textarea><br /> <input type="submit" name="submit" value="submit" /> </form>
Build your php form processing script as usual in PHP. (Nothing different here either.)

<?php if ($_POST['submit']) { $to = "email@domain.com"; $from = $_POST['email']; $subject = "New Website Comments"; $message = "Comments were left on your website from ".$_POST['email']." at ".date("g:i")." on ".date("M j, Y")."."; $message .= "\r\n".$_POST['name']."\r\n".$_POST['email']. "\r\n".$_POST['comments']; $headers = 'From: '.$_POST['email']."\r\n".'Reply-To: '. $_POST['email']."\r\n".'X-Mailer: PHP/'.phpversion(); mail($to,$subject,$message,$headers); } ?>
(This is where we add code.) Download the jQuery library (get the minified version to save time) and the AJAX Form jQuery script. Once you have those two files, include them both like so:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script>

Don't forget to change the paths and filenames to match the files you downloaded!
Then, all you need to do is add this script:

$(document).ready(function(){ $('#contactForm).ajaxForm(function() { alert("Your message has been sent!"); }); });

That's it! When you submit the form, the data will be sent asynchronously and your page won't have to refresh. If it is processed successfully, you will see an alert telling you it has been sent. See above -- whatever you put in that ajaxForm function will happen. So if you really want to get fancy, you could use jQuery to hide the form only to reveal a new DIV that says thank you.

All the best at using AJAX!

Write Faster and Easier Javascript With jQuery

2009-11-06T16:19:00.001-05:00

jQuery is "a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML." In plain English, it is a library that you include on your web page that allows you to add Javascript code much easier than writing out old-fashioned code.

The $ function

Taken from Wikipedia, "one of the critical concepts in any jQuery code is the so called '$' function. '$' is actually an 'alias' for the 'jQuery' namespace."

Example: Toggle a Div Visibility

To toggle the visibility of a div with a simple click of a button, add this code to the <a> tag:
<a onclick="$('#divid').toggle();">

Replace 'divid' with the ID of your div. Simple as that. Voila -- you have a DIV that hides and shows with the click of a button (or a link, in this case).

Not Impressed Yet?

It works great, but it's not quite smooth enough. Let's slow down the transition a little. That sounds complicated, right? Well, with jQuery it's as easy as adding one word to the code. Simply add the word "slow" to the toggle script like this:
<a onclick="$('#divid').toggle('slow');">

That's it! And when you get bored with toggling your divs, explore the many plugins on the jQuery site:
http://plugins.jquery.com/

Doesn't Work For You?

Don't forget to download and include the jQuery file:
<script type="text/javascript" src="jquery.js"></script>

Five Tips for Building Effective Web Sites

2009-11-06T16:17:00.000-05:00

Write Quality, Validated Code

Web design tools such as Front Page can help create web pages in "design" mode if you are unfamiliar with HTML, but be cautious as these tools can create unexpected results when viewed in different web browsers and platforms. When creating a web site, always check your code with a web page validator throughout the programming stages (http://validator.w3.org).

Use CSS

Never use <!;font>!; tags. Those tags are years old, deprecated and can create unexpected results on different platforms and browsers. Always attach the same stylesheet to every page. Then, if you need to change the font on your web site, you only need to change it once on the stylesheet; all pages will be changed.

Use Well-written Content

One of the best ways to get listed in search engines is to use well-written content. Content that is not-interesting or has spelling or grammar mistakes will not be noticed. If you want visitors, you may need to hire a professional to write or re-write your web site content.

Make Your Site Easily Navigable

Don't use frames. Don't use iFrames. Use breadcrumbs. Always put secondary and tertiary navigation links in the same place on every page. Use rollovers when possible. Include a site map. Don't underline text (unless it's a link). Use alt tags.

Update It Often

In order to keep customers coming back, it needs to be fresh. Update it often. Add a "News" section (as long as it doesn't get stale). Offer time-sensitive offers. Don't just set it and forget it.

Go For A Paperless Office

2009-11-06T16:10:00.001-05:00

Save a tree... and save space in your office.

If your filing cabinet is anything like mine, I welcomed this hint (I think I read about it in a recent edition of Mac Life).

Stop filing all those important receipts, credit card bills, government tax statements, the list goes on. Instead, scan them as you receive them, save them in an organized way on your computer, then shred them. No more filing!

You only need 3 things to start a paperless office (I’m assuming you already have a computer since you’re reading this):

A scanner. A multi-page scanner is preferable, but any USB scanner should work. Your scanner probably came with some kind of an application that let’s you scan documents. If you use a Mac, just use Image Capture.
A shredder. Any shredder will do. I use a $20 one from Loblaws. Note: if you use a cheap(er) one, it seems to work better if you fold the paper in half or in thirds before shredding it.
A backup plan. Now that you’re keeping all of your very important files on your computer that has never crashed on you... You need to backup these files. I use .Mac’s convenient backup tool. But just burning them to CD might be sufficient for you...

Go green

There are other things you can do to keep the paper out of your office:

send invoices by email
register to receive all your bills by email
request electronic payments from your customers