Since the textareas were part of a situation where the form was absolutely positioned, it was imperative that the user could not enter more information than the textarea size.

Note that modern browsers allow you to resize a textarea – this can be overcome with some simple css:

textarea {
    resize: none;
}

Now that the textarea size is fixed, I just need to limit the amount of text the user can enter, so that it doesn’t overflow the given space.

All of the javascript solutions out there assumed a predefined maxlength for the textarea.  But that’s a bit problematic, too – most fonts aren’t fixed-width, which means that some letters take more space than others.  I wanted to allow completely dynamic, automatic calculation of the space required, and limit the text based on that real information.

So, using some creative programming, I’ve developed a jQuery plugin that can determine the dynamic maximum size of the textarea, and limits the user input to that maximum length.

The code is simple to use. Just include the script file (there’s a link for you below), and then call the following line:

jQuery(function($) {
    $("textarea").textareaMaxLength();
});

And voila! Your textareas magically will limit the amount of text to just the text that fits within the textarea.

Download textareaMaxLength 1.0

How it works

Some of you are going to want to know how it works.  Here you go:

The plugin detects the key-up stroke in a textarea.  When the keyup takes places, it does the following:

1. It creates a hidden div (off screen) with the same size, shape, and font properties as the textarea.
2. It adds the text from the textarea to that div
3. It compares the height of the hidden div (which is allowed to stretch vertically) to that of the textarea.
4. If the hidden div is taller than the textarea, it trims characters off the end of the input until the height is no longer too tall.
5. Once the focus has left the textarea (on blur), it removes the div from the DOM.

WordPress aims to be stateless, so it uses cookies, not sessions.

Which is fine, except for there are things you may need to do that would best be accomplished by tapping into PHP’s sessions.

But, there’s a problem: WordPress iterates over the $_SESSION variable and unsets any session data in wp-settings.php file.

There’s articles out there suggesting editing the wp-settings.php file, but I have a hard and fast rule about not modifying core files for WordPress (or Magento, or Open Cart), because the next time you update your installation (which is important for security), you may wipe your modifications.

There’s a better way.  Why not just hook the session_start AFTER wp-settings.php has run?

Simple as can be with just five lines of code. First, we set up the action to hook into wp-loaded:

add_action('wp_loaded', 'start_my_custom_session');

And then we set our function start_my_custom_session:

function start_my_custom_session() {
	if (!session_id()) {
		session_start();
	}
}

Out of the box, Magento’s order confirmation is weak. The client wanted a more robust solution, and after scraping the web for resources and dumping class methods out, I was able to put together a very robust solution.

What to Edit

First, you should no that all of this takes place in the your template file located here: app/design/frontend/[package]/[theme]/template/checkout/success.phtml

How to Test

Second, testing the checkout can be daunting – unless you know a couple of little tips that make a big difference:

1. Set your payment method to Test in your dashboard. Then you can use a test credit card to checkout and get the success page to display. (FYI, the Visa test card number is 4111111111111111)
2. Temporarily edit a Magento Core code file to disable clearing session. In app/code/core/Mage/Checkout/controllers/OnepageController.php, comment out this line (at or about line 227):

   // $session->clear();

3. Now you are ready to implement your code, and you can refresh the order confirmation page as many times as needed, and the content will display.

Displaying Order Details on the Order Confirmation Page

// First, let's load some Load order details
$order_id = Mage::getSingleton('checkout/session')->getLastRealOrderId();
$order_details = Mage::getModel('sales/order')->loadByIncrementId($order_id);

Displaying Shipping Address and Shipping Method

// Get shipping method
$shipping_method = $order_details->_data["shipping_description"];

// Get ship-to address information
$shipping_address_data = $order_details->getShippingAddress();

// Output the ship-to address information
echo "
" . $shipping_address_data['firstname'];
echo " " . $shipping_address_data['lastname'];
echo "
" . $shipping_address_data['street'];
echo "
" . $shipping_address_data['city'];
echo ", " . $shipping_address_data['region'];
echo " " . $shipping_address_data['postcode'];
echo "
" . $shipping_address_data['country_id'];

Displaying Products

/*** Product Listing ***/
// Iterate through each product listing the sku, the name, the quantity ordered, and the item price
foreach ($order_details->getAllItems() as $item) {
     echo '
';
     echo '
Product:' . $item->getName() . '
';
     echo '
' . Mage::helper("core")->currency($item->getPrice()) . '
';
     echo '
' . round($item->getQtyOrdered(), 0) . '
';
     echo '
' . Mage::helper("core")->currency($item->getPrice() * $item->getQtyOrdered()) . '
';
     echo '
';
     echo '
SKU: ' . $item->getSku() . '
';
     echo '
';
}
// Get the product id from the item (useful later for loading product attribute information)
$product_id = $item->getData('product_id');

Displaying Payment Method and Billing Address

// Get payment information
$payment_method = $order_details->getPayment()->getMethodInstance()->getTitle();

// Get billing address information
$billing_address_data   = $order_details->getBillingAddress();

// Output the billing address information
echo "
" . $billing_address_data['firstname'];
echo " " . $billing_address_data['lastname'];
echo "
" . $billing_address_data['street'];
echo "
" . $billing_address_data['city'];
echo ", " . $billing_address_data['region'];
echo " " . $billing_address_data['postcode'];
echo "
" . $billing_address_data['country_id'];  

Displaying Order Summary Amounts

/*** Billing amounts ***/
// These leverage the Magento core helper to format the numbers to currency
echo '
Subtotal:' . Mage::helper("core")->currency($order_details->subtotal)  . "
";
echo '
Tax:' . Mage::helper("core")->currency($order_details->tax_amount)  . "
";
echo '
Discount:' . Mage::helper("core")->currency($order_details->discount_amount) . "
";
echo '
Amount Paid:' . Mage::helper("core")->currency($order_details->total_paid) . "
";

Loading custom product attribute information

// Load the CMS helper
$_cmsHelper = Mage::helper('cms');
$_process = $_cmsHelper->getBlockTemplateProcessor();
// Load the product model class
$product = Mage::getModel('catalog/product');
// Load the product into the class
// Uses ID we loaded earlier - see block about looping through products
$product->load($product_id);
// Load the learn block into the variable so we can test the size before displaying
// NOTE: "learn" is the identifier of the attributed.  use the id you defined for the attribute
$block = $product->getData('learn');
if (strlen($block) > 20) {
     echo '
Learn more about your new product
';
     echo '
';
     // Run the block through the cms filter to get cms code rendered properly
     echo $_process->filter($block);
     echo '
';
}

How to load a custom static CMS block into the order confirmation page directly

// Loads the CMS static block directly
// Note: the identifier for the cms block in this example is success_faq - adjust to suite your cms
echo $this->getLayout()->createBlock('cms/block')->setBlockId('success_faq')->toHtml();	   

What Makes a Password Secure

There are two elements of a secure password:

1. Length. The longer the password, the more difficult it is for humans OR programs to guess or brute-force your password. Make sure your password is AT LEAST 8 characters long
2. Complexity. Complexity simply means having more characters to choose from. If you use a combination of lower case letters, upper case letters, numbers, and symbols (such as #, @, $, punctionation, etc), then your password is much more secure than one that is all lower-case letters.

A Hard Password Doesn’t Mean Hard To Remember

Building a secure (or “hard”) password that is ALSO easy to remember is possible. Just use these “tricks” to build your password so that you can remember it:

1. Build a pretend word that is meaningful to you.
   

   EXAMPLE:
   If your name is Susan, and your husbands name is Thomas, and your Son’s name is Brandon, then build a short word that is a “mashup” of the first three letters of your name and their names, like so:
   susthobra

   • Why it works: It adds complexity to the password.
   • Why it’s easy to remember:: If you use it naturally like the example, it uses information you already know.
2. Use uppercase and lowercase letters. Using #1 as an example, it’s simple (and would make sense) to make it:
   

   EXAMPLE:
   SusThoBra

   • Why it works: It adds complexity to the password.
   • Why it’s easy to remember:: If you use it naturally like the example, it just makes sense.
3. “Haystack” your password by putting several letters or characters before and after the password.
   

   EXAMPLES:
   ****susan**** is MUCH better than susan for a password
   ((((susan))))
   !!!!susan!!!!
   …. you get the idea

   • Why it works: Length is your friend when it comes to secure passwords, and haystacking makes adding length SIMPLE. (This is a technique developed by Steve Gibson of GRC)
   • Why it’s easy to remember:: Rather than having to remember a long string of characters, you just remember that you add four # symbols before and after the password.
4. Combine some things you already know by heart.
   

   EXAMPLES:
   if your ATM pin number is 7799, then make your password susan7799 – better yet, !!!!susan7799!!!!
   If your husbands birthday is October 21, you could use something like susan1021 – or better yet, ####susan1021####

   • Why it Works: It adds length AND complexity.
   • Why its easy to remember: It’s something you already know by heart.
5. Use a “replacement” technique. The number 4 LOOKS like an A, so you could replace the A in susan with 4, the letter S with a 5, an L with an exclamation (or number 1), etc.
   

   EXAMPLES:
   replacing an A with a 4: sus4n
   Replacing an S with a 5: 5u54n
   …etc (1 for L, or an $ for S, or an ! for i, etc)

   • Why it Works: It adds complexity.
   • Why its easy to remember: It’s something you can remember easily if you develop your own system, and use the visual similarities as reminders.
6. Use a combination of these techniques to get a REALLY EXCELLENT password, that means something to you, but nobody else could possibly guess:
   

   EXAMPLE:
   using EVERY ONE of the techniques above (and using the Susan/Thomas/Brandon and pin examples)
   ####5u5ThoBr47799####

   Notice how that looks like gibberish to you? BUT, if YOUR name was Susan, your husband was Thomas, and your sone was Brandon, and your PIN was 7799 – this would actually be meaningful to you, VERY secure, and easy to remember!

Best Tip Ever

Using a different password for each site is very important (don’t want someone who get’s your Facebook password to have access to your Bank Account!). What’s the best way to manage and track them? The ONLY password manager I recommend: LastPass. It’s secure (see this review on Security Now), easy to use, and FREE.

A word of Encouragement

I know this seems complicated. I do. Even if you just only use TWO of these techniques, your password will be much, much stronger than most. AND, I promise that you can use all 5 techniques – just go through each step with words/names that are MEANINGFUL to you, and add on a number that is MEANINGFUL to you, I promise it does not end up complicated – it ends up to be a GREAT password that you can remember! Always use at least 2 of these techniques – you’ll be glad you did!

Super-short, super simple:

Using text-shadow, which is supported across most modern browsers, you can achieve the text-stroke (outlining the text) like so:

a.hover {
	text-shadow: -1px -1px 0 #990000, 
	1px -1px 0 #990000, 
	-1px 1px 0 #990000, 
	1px 1px 0 #990000; 
}

But, IE9 and earlier stubbornly refuses to participate. So, drop this in:
filter: glow(color=#990000,strength=1);

And, last but not least, add a width and height (to make it work in IE7 and earlier):

a.hover {
     width: auto;
     height: auto; /* width/height so IE7 and lower will work */
     filter: glow(color=black,strength=1);
     text-shadow: -1px -1px 0 #000, 
     1px -1px 0 #000, 
     -1px 1px 0 #000, 
     1px 1px 0 #000; 
}

And there you have it! Works in IE8 and later!

Example:

Cross Browser Text-Stroke

Font Libraries

I’ve got the professional subscription to TypeKit (see the article I wrote on it here: Typekit and Google Expand Web-Safe Fonts), which means I can use it on as many websites as I like. What that means for you (if you are one of my clients), is that if you choose, you can use this service on your site at no charge.

E-Mail Testing

One of the things that many people don’t realize is that sending a good looking e-mail is actually MUCH more difficult than making a website look good across multiple browsers. That’s because ever e-mail client displays the e-mail slightly differently. While I USED to test manually in a handful of e-mail clients, the problem was that I could never test in ALL of them effectively – until I started using Email on Acid. This service shows me what the e-mail looks like in over 40 different e-mail clients, including Outlook (all the different versions), Yahoo!, GMail, Hotmail, AOL, and more. This allows me to be sure your e-mail will work properly in the e-mail clients that are important to you.

Staging Hosting

While your site is in development, we will host it (with a domain name such as yourname.acgdemo.com).  And when it’s ready to be launched, we’ll move it to it’s permanent home as part of our service.