How To's

It seems like everyone nowadays has an iPhone or iPod Touch that they use to access their emails. As it turns out, one of the most popular questions we have from our clients now is “How do I setup my email account on my iPhone?” This can be confusing for new iPhone owners, so we came up with these simple steps to get you up and running.

At JVF Consulting we rely on Liquid Web for our hosting, so the steps we follow are specific to their requirements. If you do not use Liquid Web for your email routing, the following settings may not work for you, so beware.

1. If you're setting up an email account for the first time on your iPhone touch the Settings icon on the home screen. Next select Mail, Contacts, Calendars > Accounts and choose Add Account....

2. To setup your POP3 email account choose Other.

3. Select Add Mail Account under the Mail section.

4. Fill in your name, email address and password. Then click Save.

5. You will then be promted to enter your email account information. First select the POP button at the very top of your screen.

6.  Next, continue entering your email account information.
    * Incoming Mail Server

      Host Name: mail.####.com (Be sure to replace #### with your domain name.)
      User Name: username+####.com (Be sure to use a “+” sign where the @ symbol would be.)
      Password: Enter your current case sensitive password.

    * Outgoing Mail Server (SMTP)
      Host Name: mail.####.com (Be sure to replace #### with your domain name.)
      User Name: username+####.com (Be sure to use a “+” sign where the @ symbol would be.)
      Password: Enter your current case sensitive password.

When complete, press Save.

Step 7. Your iPhone will then verify your account information. During this process you will get a "Secure Connection Failed" error stating the smtp certificate is not valid. Press Continue to proceed.

Step 8. Next you will see another "Secure Connection Failed" error stating the certificate is not valid. Press Continue to proceed.

Step 9. Upon successful completion you will be taken back to the Mail Settings screen. You should now have a fully configured POP email account on your Apple iPhone.

There’s allot of webmasters out there who utilize the power of the robots.txt file, and use it to block search engine spiders from crawling their cms folders. At JVF we use this method in order to not reveal .js, .css, or any custom coding we use to the search engines. When implementing the Disallow feature within robots.txt we want to warn you that any images within the folder you Disallowed will not be indexed properly within Google Images. To ensure that the photos and images on your website are crawled and indexed properly, be sure to use the Allow rule. You can see an example of this when you take a look at what Google is doing in their robots.txt file. http://www.google.com/robots.txt

They first Disallow anything within their safebrowsing folder, then Allow specific folders which they want crawled and indexed.

Disallow: /safebrowsing
Allow: /safebrowsing/diagnostic
Allow:  /safebrowsing/report_error/
Allow: /safebrowsing/report_phish/

If you were to use this same scenario for your own website using a content management system, it should look something like this:

Disallow: /cms
Allow: /cms/images

JVF Consulting takes great pride in making sure all of our websites are secure when they’re deployed. Visitors to your website should not be able to browse or download files they’re not supposed to. For those of you with Apache servers who haven’t disabled index browsing these steps will help protect your files from being exposed to the public. When you deploy a website on an Apache server, it can be vulnerable unless you protect it by applying the most basic security feature, disabling directory browsing. To disable directory browsing in apache web server you need to edit the .htaccess file located in the root directory.

To disable directory browsing using .htaccess first locate and open the htaccess file. If you do not see a line that says Options –Indexes, create a new line and add it. Once the file is saved and uploaded your website is now secure.
 
For those of you who have cPanel installed on their hosting environment, first login to your cPanel dashboard. Next, click on Index Manager. From there you will be taken to a directory list. Click on the directory name which you want to disable. Select the No Indexing box, and click Save. The directory browsing feature is now disabled.

This simple 5 minute step of precaution could save you hours of hard work if your server was ever compromised. Here is an example of the 404 page you will be redirected to if you setup the htaccess file correctly.

The following is a guide for those folks that want to setup a proper development environment for building out a Magneto cart on your local windows box. I’m one of those old school developers that like’s to have a multi-phased approach when it comes to developing, testing and deploying a website. The first step of this process is to get your local windows development box setup to properly run the MySQL Database, the Apache Web server and most importantly trick your machine into believing it’s the actual server that hosts the domain.

Now, we’ve checked online and seen a bunch of places saying that this is not possible and to have Magento working on a Windows box and that you need to install Ubuntu to get this working. This couldn’t be farther from the truth and just adds unneeded complexity. So let’s keep it as simple as possible.

1. Download the XAMPP from Apache Friends: http://www.apachefriends.org/en/xampp-windows.html. We’re currently using XAMPP Version 1.6.6a, however, feel free to use the latest. Which has some differences and some Apache/MySQL extensions turned on default, but it will all work the same.
   1. It’s a very simple install and you can follow the instructions without really changing any of the defaults. However, for the sake of this document, we’ll change the install directory to the use the original settings that XAMPP used to come with and install to:
      1. C:\apachefriends\xampp
2. Once XAMPP is installed, we’ll need to setup our environment to handle multiple site development as well as for properly running Magento. We’re a web development shop, so we find that we need to work on multiple sites as once to properly support our customers.
   1. For the purpose of this document, we’ll be building out a website for CleanEase.
      1. Navigate out to your “C:\apachefriends\xampp\htdocs” directory and create the new “cleanease” folder:
         
3. We’ll then need to make sure that both the Apache & MySQL environments are setup for what Magento needs.
   1. MySQL
      1. We’ll need to edit the configuration files to support the InnoDB transactional storage engine otherwise you’ll get nowhere fast. Navigate out to your local my.cnf file found at: C:\apachefriends\xampp\mysql\bin\my.cnf. Open this up into your text editor of choice and make sure that the InnoDB settings are not commented out. It should looks something like this:
         1. # Comment the following if you are using InnoDB tables
            #skip-innodb
            innodb_data_home_dir = "C:/apachefriends/xampp/mysql/"
            innodb_data_file_path = ibdata1:10M:autoextend
            innodb_log_group_home_dir = "C:/apachefriends/xampp/mysql/"
            innodb_log_arch_dir = "C:/apachefriends/xampp/mysql/"
            ## You can set .._buffer_pool_size up to 50 - 80 %
            ## of RAM but beware of setting memory usage too high
            innodb_buffer_pool_size = 16M
            innodb_additional_mem_pool_size = 2M
            ## Set .._log_file_size to 25 % of buffer pool size
            innodb_log_file_size = 5M
            innodb_log_buffer_size = 8M
            innodb_flush_log_at_trx_commit = 1
            innodb_lock_wait_timeout = 50
         2. Make sure that the “skip-innodb” line is commented out, but all the other settings can use the defaults that are already specified. Save and close the file.
      2. We usually have MySQL installed as a service, so get into your Services Control Panel and restart it:
         
   2. Apache
      1. Configuring the php.ini file
         1. We’ll need to enable a few extensions for Magento to work properly. To do this, open up your php.ini file. The version of XAMPP we use (Version 1.6.6a ) has two php.ini files, however, the one that is really used by the web server is found in the Apache bin directory:
            1. C:\apachefriends\xampp\apache\bin\php.ini
               1. Note: On the newer version of XAMPP, we’ve found that they’ve finally cleaned things up and only have one php.ini file found in C:\apachefriends\xampp\php\php.ini. So please make sure to update this file.
         2. Make sure the following extensions are active. Meaning, that you just need to remove the “;” (semi-colon) character out from in front of it:
            1. extension=php_mcrypt.dll
               extension=php_curl.dll
               extension=php_pdo_mysql.dll
               extension=php_pdo.dll
      2. Configuring the httpd.conf file
         1. You’ll find this file located at:
            1. C:\apachefriends\xampp\apache\conf\httpd.conf
         2. Enable URL rewrites:
            1. You can do this by remove the “#” hash character in front of the following line:
               1. LoadModule rewrite_module modules/mod_rewrite.so
         3. Change the Document Root to point to the website you wish to work on, in this case, we want to change this to the CleanEase project:
            1. DocumentRoot "C:/apachefriends/xampp/htdocs/cleanease"
            2. IMPORTANT: This is the best way to go about installing a local version of Magento on your box and will allow you to easily deploy this out to your production environment without having to jump through a bunch of extra hoops.
      3. We usually have Apache installed as a service, so get into your Services Control Panel and restart it:
         
4. Next, go out and download Magento, you can find the No Registration download page here: http://www.magentocommerce.com/download/noregister. Make sure to get the “Full Release - stable version” download and don’t mess around with the other ones, I’ve found that they just lead you down the wrong path and take far too long for an install process. For this document, we’re using version 1.3.2.4, which we downloaded on 2/10/2010 and now I see another version 1.4.0.0 as of 2/12/2010. Why do these guys put out so many releases so quickly?
   
5. Once this is downloaded, you’ll want to exact the zip file into the CleanEase folder: C:\apachefriends\xampp\htdocs\cleanease.
   
   
   As you can see from the files in the zip, it will still extract them to a “magento” folder, so we’ll just need to move all of those files one level up:
   
6. Setting up your “hosts” file
   1. This is the most IMPORTANT step throughout all of this process. Without this step, the cookies of the Magento install will not work properly and the database will not properly install when going through the Magento setup.
   2. You can find your local “hosts” file in the following location:
      1. C:\WINDOWS\system32\drivers\etc\hosts
         1. There is no file extension, but you can easily open this in Notepad or any text editor.
   3. Make sure to add the following domain entry to point to your localhost IP address:
      1. 127.0.0.1 www.cleanease.com
      2. It’ll look something like this:
         
   4. Save the file
7. Create an empty database called “cleanease” within your phpMyAdmin instance:
   
8. Now that you’ve done all the setup, it’s now time to hit your local instance via your favorite web browser to start the Magento Installation Wizard. Open up the www.cleanease.com website in your browser, and if you did all the above setup correctly, you’ll see the first part of the Magento installation screen:
   1. 
   2. Feel free to use the default settings for the Localization:
      
   3. Make sure to enter in the “cleanease” database name, check also check the following:
      1. Skip Base URL validation before next step
      2. Use Web Server (Apache) Rewrites
      3. 
   4. This part of the process will take a bit of time as its building out the database and setting up your environment. However, if all works well, it will take to the final step of the wizard to create the administrator user:
      

Once you get through this portion, it will ask you if you want to go visit the frontend or login to the backend. Feel free to login to the backend to start setting things up. A few things to note:

• You can always use a different domain, it would be best to use the one you wish to ultimately install to.
• In addition, you can use any database name or directory name you wish, but just make sure you use ones that are consistent with the domain name so you can easily track them.
• Make sure to edit your httpd.conf file, specifically the DocumentRoot value to the directory you wish to run your other Magento instances.

Now that we’ve got this process down, we can finally use proven development techniques to get our websites looking exactly the way our clients want on our local boxes before we move them to production.

Enjoy!

First off, the shadowbox.js library is an amazing tool in our arsenal. It’s pretty light weight and adds a really nice touch when displaying images. After reading up on the different usage and options that it supports, I found out that it can easily support any content by utilizing the iframe player built into the runtime. If you want to pop open a nice window to a link, you can use a version of the function below. All this will do is open a 640x480 window with the given URL passed into the function.

  function OpeniFrameURL(url) {
    Shadowbox.open({
      content: url,
      player:  "iframe",
      height:  480,
      width:   640
    });
  }

Now, one thing I noticed by using this approach was that there was a lag while showing the content after the shadowbox window opened up. I had just built a carousel video player for our JVF homepage and wanted the videos to pop open quickly and start playing fast. So it was bugging me that I could hit the flash player webpage links directly and they would play within 2-3 seconds, however, each time I loaded that same URL into shadowbox it would take 8-10 seconds.

I tinkered around with the “options” a bit, even turned off all animation and it would still take the same 8-10 seconds to load. I decided to jump into the JavaScript to see how I could speed things up. With shadowbox, they have this hook to make a nice transition into the player, however, it requires setting the URL to the iFrame after the object is loaded. This was ultimately the root of the lag issue.

The file that you’ll need to find is shadowbox-iframe.js and is found in the players directory within the shadowbox library. The first thing you’ll notice is that the file has been reduced by removing all the white space, which makes it quick to load, but annoying to maintain. Do a quick search for the beginning of the “src attribute upfront:

src="'+this.obj.content+'"

Now, to ensure that we don’t double load the content, cause a flicker and introduce more lag, let’s make sure to remove the original call on onLoad event. To solve this, look for the following text “b.location.href=this.obj.content” and comment it out:

/*b.location.href=this.obj.content*/

This fix was able to cut our load time in half! Give it a try and see if this helps speed up your own dynamic content. Enjoy!