HostGator needs you to use https, not git when cloning or adding submodules

Standard

Just a quick note that will hopefully save you some time. If you are trying to clone a GitHub repository using git:// you will run into fatal: unable to connect to github.com. You can switch to using the https:// protocol instead.

Further, submodules will need to be called with the git:// protocol as well. This was rather annoying because I had to delete my submodules locally, commit the changes, and re-add the submodule using the https:// protocol.

As annoying as that was to figure out, it’s working now so I’m happy.

You may end up needing a few other resources to figure it all out:

Fortune 100 Websites

Standard

I just started work for Santander Consumer USA last month. It’s my first taste of the corporate world, having worked for a startup company right out of college and then several years as a freelancer. Wanting to become more acquainted with the possibilities and/or restrictions in the corporate world I figured I might take a look at what the Fortune 100 companies are doing.

We’re all fairly used to poorly designed, out of date corporate websites. Corporations tend to stay behind the trend in web design whether it’s because they move more slowly, don’t recognize the need to keep up, have leadership that thinks they already have a work of art, or any other number of reasons. The bottom line is that a smaller company is more nimble and not only react to business changes more quickly, but customer’s expectations as well.

Which corporations are innovating on the web? Which industries see the most innovation? Can any lessons be learned?

2012 Fortune 100 Websites

The standouts are mostly websites that customers would tend to interact with more (i.e. shopping, account administration) rather than holdings companies or business to business focused sites. This certainly makes sense, and there’s little need for some of the businesses listed here to spend much time on keeping their branding fresh and website modern (best exemplified by Berkshire Hathaway).

Auto websites like General Motors and Ford are visually stimulating and modern, likely because their product branding changes so regularly and because they’re designers at heart.

Communications companies like AT&TVerizon, and Comcast are playing it safe, but they’re admirably modern (in their design, at least … not so much in user experience) for companies that so rapidly change their products and services.

Home improvement competitors, Lowe’s and Home Depot, seem equally equipped to make your weekend shopping experience easy, with Lowe’s pull slightly ahead.

Technology behemoths HP, Apple, IBM, Microsoft, Dell, Intel, Google should be a step ahead of the rest of the companies in this list because of their access to the right people. Some are clearly doing better than others.

http://exxonmobil.com

http://walmart.com

http://chevron.com

http://conocophillips.com

http://gm.com

http://ge.com

http://berkshirehathaway.com

http://fanniemae.com

http://ford.com

http://hp.com

http://att.com

http://valero.com

http://bankofamerica.com

http://mckesson.com

http://verizon.com

http://jpmorganchase.com

http://apple.com

http://caremark.com

http://ibm.com

http://citigroup.com

http://cardinal.com

http://unitedhealthgroup.com

http://kroger.com

http://costco.com

http://freddiemac.com

http://wellsfargo.com

http://pg.com

http://adm.com

http://amerisourcebergen.com

http://intlfcstone.com

http://marathonpetroleum.com

http://wallgreens.com

http://aig.com

http://metlife.com

http://homedepot.com

http://medcohealth.com

http://microsoft.com

http://target.com

http://boeing.com

http://pfizer.com

http://pepsico.com

http://jnj.com

http://statefarm.com

http://dell.com

http://wellpoint.com

http://caterpillar.com

http://dow.com

http://utc.com

http://comcast.com

http://kraftfoodscompany.com

http://intel.com

http://ups.com

http://bestbuy.com

http://lowes.com

http://prudential.com

http://amazon.com

http://merck.com

http://lockheedmartin.com

http://coca-cola.com

http://express-scripts.com

http://sunoco.com

http://enterpriseproducts.com

http://safeway.com

http://cisco.com

http://searsholdings.com

http://thewaltdisneycompany.com

http://johnsoncontrols.com

http://morganstanley.com

http://sysco.com

http://fedex.com

http://abbott.com

http://dupont.com

http://google.com

http://hess.com

http://supervalu.com

http://unitedcontinentalholdings.com

http://honeywell.com

http://chs.com

http://humana.com

http://goldmansachs.com

http://ingrammicro.com

http://oracle.com

http://delta.com

http://libertymutual.com

http://wfscorp.com

http://newyorklife.com

http://paalp.com

http://tiaa-cref.org

http://aetna.com

http://sprint.com

http://newscorp.com

http://generaldynamics.com

http://allstate.com

http://hcahealthcare.com

http://americanexpress.com

http://tyson.com

http://deere.com

http://murphyoilcorp.com

http://pmi.com

http://nationwide.com

GuessAges: A new side project

Standard

I’ve always wanted a reason to learn how to interact with Facebook’s APIs to make a social-rich website. I finally came up with the excuse.

GuessAges is a new site I’ve launched for a bit of fun, but mostly as a “can I do it?” sorta thing. The point of the site is simple and fun: find out how old you look (and help others find out the same).

The site is built on WordPress and heavily tied into Facebook. Users are required to login with a Facebook account, and then they can begin to guess the ages of other users. You can add your own photos with one catch: the only photos allowed into the system are those from your Facebook profile photos album. This helps to keep users accountable to using appropriate photos, plus profile photos are generally your better shots, right?

I’m interested in all feedback. Like I said, this was sort of an experiment. I learned a lot building this and really improved by programming skills, which I only dabble in as a front-end developer. From talking to Facebook’s API to creating standard deviation formulas to figure out how accurate you are at guessing I feel pretty good about what I was able to accomplish.

A really sweet WordPress development environment

Standard

I’m always trying to figure out a more efficient way to do development. I’ve tried more than a dozen different applications to develop in: Notepad, Notepad++, Dreamweaver, FrontPage, Aptana, and so on.

Whichever application you end up using it still only solves some of the problems. So this post will divulge my development environment for some projects. This isn’t the ‘end all, be all’ and it will evolve, but its evolved to this point over years and years and I finally have something I really enjoy.

Most of the content in this tutorial is applicable to any operating system, but it is written for Windows users and some parts will need to be amended for Mac users.

Table of Contents

Local Environment

I used to hate local development. It makes sharing your work so much more difficult, configuring a local server isn’t always easy, and there’s so many things to change once you move to production. Not anymore.

Install Apache, MySQL, and PHP

First of all, for any local development you’ll need WAMP, XAMPP, or MAMP. These set up an environment that allows you to run a website on your machine. I use WAMP on a Windows machine. All of these programs will install Apache, MySQL, and PHP along with some helper applications like phpMyAdmin.

Choose which one you like the most and install.

Configure MySQL

After you’ve installed your server environment you need to create a database for your WordPress site.

Open phpMyAdmin or another bundled database application. From the homepage of phpMyAdmin you’ll be able to easily type the name of a new database and save it.

Configure Apache

There are two steps to allowing your computer to act as the server for a website using a real domain. Our intention is to setup example.com to run off of the local computer (rather than from the internet).

Use your real domain

One of the most annoying things about local development is that most tutorials have you setup http://localyourdomin/
. That means when its time for production you have to find and replace all occurrences of that in your database and files. Lots of room for error there. So let’s just use your real domain: http://example.com (obviously, replace all instances of example.com with your domain).

1. Edit your HOSTS file

In Windows, use Notepad to open C:\Windows\System32\drivers\etc (be sure to “Run as administrator”) .

Add to the bottom of the file:

# 127.0.0.1 example.com #local
# 123.4.5.6 example.com #production
  • The # (pound sign) denotes a comment. So everything following the pound sign is ignored. So this example won’t change anything once you add it to the file.
  • 127.0.0.1 is the IP address of your machine. Replace 123.4.5.6 with the IP address of your remote server (the one your website is hosted on).
  • #localand #production are just comments to signify which server goes where.

Now, if you un-comment the local server when you try going to example.com your browser will look to your local machine.

NOTE: You can get browser extensions to quickly switch between hosts. Since I do most of my development in Firefox I use HostAdmin.

2. Edit Apache’s httpd.conf

Your computer now knows that example.com is hosted on your machine, but your server needs to know where your local website is located.

Open up httpd.conf (varies depending on which software you installed, but in WAMP its in C:\wamp\bin\apache\Apache2.2.17\conf).

Add to the bottom of the file:

<VirtualHost 127.0.0.1>
 ServerName example.com
 DocumentRoot "C:/wamp/www/example_com"
 ServerAdmin [email protected]

<Directory C:/wamp/www/example_com>
 Order Allow,Deny
 Allow from all
 </Directory>
 </VirtualHost>

Save.

Install WordPress

Download the latest version of WordPress, unzip it, and put its contents intoC:\wamp\www\example_com.

Go to example.com and you should see the WordPress installation screen. Follow the wizard. The database name is the one you created earlier. The username (by default) is “root” and the password is blank (null).

Code Editor

You may use Notepad to do all of your development. Pat yourself on the back; you’re hardcore. You’re also missing out.

Finding the right software is hard. Some are ugly, featureless, slow, or dead. A couple years ago I found Aptana. Its an IDE, which basically means that it does way more than edit files.

What does an IDE (and specifically Aptana) offer?

  • Remote FTP/SFTP file editing. Upload/download of files.
  • Code completion: PHP, CSS, HTML and more.
  • Real-time error/warning checking against W3C standards.
  • Local projects

After you install Aptana you can create a project.

  1. Go to “New” → “Project…”
  2. Name your project (maybe example.com)
  3. Uncheck “Use default location”.
  4. Browse to and choose C:\wamp\www\example_com
  5. Click Finish

Your project now contains all WordPress core files, themes, and plugins. Use the project explorer to view all of your files

You can also use Aptana to connect to FTP and remotely edit files. A better method may be to edit locally and use Aptana’s synchronization features to push the files live after you’ve tested locally.

Source Control

At this point you don’t need to go any further unless you’re interested in using source control. Everything we’ve done so far is good enough for a local environment and/or remote editing. But you can make things even beefier with source control…

Source control can be confusing and I’m not going to explain everything here. Instead I’m just going to layout how to use various tools to interact with SVN.

For those a little unfamiliar though, here’s some benefits of source control:

  • History of changes
  • Backup of code
  • Teams can work on the same code simultaneously

I use a few different repository systems, but my favorite is Beanstalk. A single feature makes Beanstalk amazing: deployment. More on this in a bit.

SVN setup

Repository structure is important to get right. There’s lots of ways to do it and you probably will need to tailor it to your project’s needs. But imagine you’re developing several themes and plugins. This is the organization I’m using for just that:


/
    /themes/
        /my-theme/
            /branches/
            /tags/
            /trunk/
                index.php
                style.css
    /plugins/
        /my-plugin/
            /branches/
            /tags/
            /trunk/
                my-plugin.php

This organization allows you to add multiple themes and plugins and keep them each separate from each other and allows you to tag a new version of the theme/plugin.

Create that structure in Beanstalk or whichever solution you’re using. Add a theme or plugin directory and put some files in its trunk directory.

Checkout locally

Now we want to checkout our theme/plugin locally and have it sit right inside the local WordPress installation we already setup.

  1. Install TortoiseSVN
    1. This allows you to do SVN actions within the Windows file system
  2. You’ll need to restart after you install. So tweet this post so you know how to get back to it ;)
  3. Navigate to C:\wamp\www\example_com\wp-content\themes
  4. Add a new directory with the name of your theme, my-theme
  5. Right click my-themeand choose “SVN Checkout…”
  6. Enter the URL of your repository
  7. Make sure your Checkout directory is the one you right clicked on
  8. Click OK

You’ll probably have to enter your SVN credentials as well.

Now you can login to your local WordPress and your theme/plugin will be visible (assuming you have the necessary files).

You can edit files and view the changes locally, then once you’re satisfied with your work you can commit it to the repository.

Deployment

Here’s the fun part (and we’re almost finished). Like I said at the start, it annoys me to have to manually upload and overwrite files via FTP. Its just an extra step and more room for error.

Deployment works like file syncing. Beanstalk keeps a revision record and puts it on each of your servers. This file tells it which other files you’ve made changes to, added, or deleted. Then it scours your server and syncs the files by making it identical to latest revision in your repository.

Using Beanstalk you can automatically deploy all commits to your remote server. I don’t suggest doing this exactly.

Staging server

Use Beanstalk to setup an automatic deployment every time you commit to your staging server. Pushing all of your commits to a staging server makes your latest revisions remotely accessible. This is handy for showing clients or for non-developers to see a working example (i.e. quality assurance, marketing, etc.). Its also a good idea to keep the staging server environment identical (or very similar) to what you’ll be pushing it to on production.

Production server

Finally this is your 100% publicly accessible live website. I use Beanstalk to manually deploy to this environment. Automatic deployment to production may work for you (especially on smaller, less critical sites) but you’ll need to be ready to roll back in the event of any problems.

After staging looks and works perfectly then I use a few clicks of the mouse inside of Beanstalk to manually deploy the latest version. Within seconds I’m confident that all production files are up to date.

Roll back

In the case that something goes horribly wrong, just manually deploy the previous revision. Its so easy!

Show Me Yours

I’d love to know how you have your environments setup. I’m willing and ready to improve mine. Streamlining the process just means I can spend more time paying attention to better code.

DevPress Releases a New Theme

Standard

Visual Theme by DevPressIts been a while since I’ve written anything and even longer since I’ve written about DevPress, my collaboration with some awesome WordPress developers. Things are busy.

The latest thing keeping me busy was the launch of DevPress’ new theme: Visual. Its a simple photoblog theme with support for the BuddyPress social network plugin. It’s made for keeping family photos, staying connected with friends, and/or running your own photos community.

Visual is the follow up to our incredibly popular News theme (~3,000 downloads a week). The DevPress team prides itself on simple, easy to use, yet powerful code. I have to say, we’ve nailed it with both of these themes. Visual is quite powerful, especially when paired with BuddyPress.

Please check it out and let us know what you think.