How and why I moved my blog to Amazon EC2 from WordPress.com

On October 30th, 2007, I launched my blog, GregsRamblings.com.  At the time, I needed something quick and simple so I went with WordPress.com, a very popular wordpress hosting site.  You can have a blog up and running in under 5 minutes.  Although WordPress.com has served me well, I’ve had a few frustrations along the way such as restricting me from using any JavaScript, Flash, iFrames, etc.  I’ve also felt limited by the relatively small collection of available themes.

Today, I re-launched GregsRamblings.com on it’s own virtual server, an Amazon EC2 instance.  The experience of moving from WordPress.com to my own self-hosted site had a few challenges, so I thought I would describe the steps involved for anyone else looking to make a similar move.

Why Amazon EC2?

Cost

There are a lot of great hosting companies that can be used to host a WordPress blog, but for me, having a virtual server made the most sense.  I wanted 100% control over the server.  Amazon recently announced a new micro-instance for about 2 cents per hour (about $15/month).  I recently blogged about my initiation into the world of EC2 and the new micro-instance here.

Scalability – being prepared for an explosion of traffic

Although my blog does ok on traffic, I don’t really worry too much about overloading my server… but, it’s nice knowing that if some major news organization mentioned one of my blog posts, I could scale up my infrastructure with a few clicks of the mouse.  Let’s imagine that I’m about to get millions of hits.  Amazon EC2 provides several options for scaling:

  • I could move from my micro-instance to one of the many larger instances and associate my assigned “elastic ip” to the new instance.  This would give me more CPU and faster I/O.
  • I could also fire up some clones of my existing instance and use Amazon’s Elastic Load Balancing feature to distribute traffic across the instances.  I like this model because it’s linearly scalable and easy to tear down after the excitement dies down.
  • It’s also worth noting that Amazon has a Auto Scaling service that can automatically scale your capacity up and down depending on conditions that you define.  This is way overkill for my blog, but it’s a cool feature.

Setting up my Amazon EC2 instance

I have a micro-instance created from an AMI (Amazon Machine Image) from Alestic.com, the home for Ubuntu AMIs.  I prefer the Ubuntu flavor of Linux mostly because I’m familiar with it.  I installed MySQL, PHP, Apache, ntp and other packages using Ubuntu’s apt-get.  Here’s the install command – sudo apt-get install apache2 mysql-server php5-cli libapache2-mod-php5 php5-mysql unzip zip ntp

I also enabled the following Apache mods — rewrite (required for permalinks to work), headers and expires (required for the WordPress caching plugin).

Setting up WordPress

I then installed WordPress using the installer at http://wordpress.org.  The install process was amazingly simple.  It prompts you for a few settings (database location, user, passwd, blog name, etc.) and then you’re good to go.

Themes

The hardest part of this whole experience was choosing a theme!  There are literally thousands of amazing themes to choose from.  Here are a few sites that I found to have some good choices:

There are many other sites offering great themes so you could spend several days browsing.  I was looking for a theme with a clean and simple look free of bells and whistles.  I finally settled on the Mortar theme from WooThemes.  WooThemes and several of the other sites offer a free sandbox to test drive the theme.  I spent a couple of hours taking advantage of this to confirm that the theme offered all of the features I required.

Plugins

One of the first things I noticed when I went to the administrative pages of my new WordPress installation was that many of the menu options I was accustom to were missing!  This is because WordPress.com had many installed plugins.  This led me on a plugin chase!  Below are the plugins I installed:

  • Akismet – protects your blog from spam comments.  Don’t skip this one!
  • Google Analytics for WordPress –  This plugin makes it simple to add Google Analytics to your WordPress blog.  I could have easily added the code myself, but the plugin guarantees that it’s in all of the necessary places which saves me from some work.
  • Google XML Sitemaps – auto-generates a sitemap.xml (and sitemap.xml.gz) for your entire blog and updates it every time a post is published.
  • Subscribe to Comments – Allows readers to receive notifications of new comments that are posted to an entry.
  • SyntaxHighlighter Evolved – provides syntax highlighting of source code.  Lots of great features.
  • WordPress.com stats – Tracks views, post/page views, referrers, and clicks. Requires a WordPress.com API key (free). This will give you the same stats screen that you have on WordPress.com.
  • WordPress Database Backups – On-demand backup of your WordPress database.  You could easily do a mysqldump, but this makes backups a mouse-click away while in the admin console.  You can also schedule hourly, weekly, etc. backups.
  • WordPress Importer – You’ll need this if you plan to import data from another blog.
  • wp-Table – This plugin is a simple table manager with buttons for adding new rows, columns, etc.  A good time-saver
  • WP Super Cache – If your blog gets any decent activity, you’ll want this.  It generates HTML files that are served directly by Apache without processing PHP scripts.  I’ve read multiple accounts of people’s blogs getting unresponsive after being mentioned on Techmeme, Techcrunch, etc.  This plugin will dramatically increase the amount of traffic your blog can handle.

Moving from WordPress.com to my new server

Moving the data (posts, pages, users, tags, etc.)

This part was simple.  I used the WordPress export feature to generate an XML file that contains all of my stuff.   I then logged into my new server and imported the file (requires the WordPress Importer plugin mentioned above).  NOTE:  If your new blog is going to have a different URL than your old blog, you should do a search and replace on the XML file before importing it.  Otherwise, you’ll have to do some database surgery (see below).

Hostname and DNS challenges

I had a custom domain on WordPress.com (GregsRamblings.com).  Obviously I wanted to have my new blog up and running before I turned off the old blog, so I needed to have it running in two different places simultaneously.   WordPress uses full URLs for everything in the database so all of my images, posts, etc., were  stored as “http://gregsramblings.com/….”.   For me to test anything, I would need to make the server think that it was gregsramblings.com and I also needed to make my laptop computer think that gregsramblings.com points to my new server.  In order to do this, I added a new entry to the /etc/hosts file on both the server and my laptop (if you are on Windows, you’ll need to add an entry to c:\windows\system32\drivers\etc\hosts).  Now I was able to finish customizing and testing.

My domain, gregsramblings.com, was originally registered with WordPress.com.  In retrospect, I should have registered it with my own chosen domain provider such as 1and1.com, register.com, godaddy.com, etc. so I would have full control over the ip address mapping.  Wordpress’s nameserver management system does allow you to add new hosts but it does not allow you to change the main “A” record that points the domain to a specific IP address.   WordPress does allow you to change nameservers so you can at least let another nameserver handle your mappings.  I chose to move the domain to 1and1.com which surprisingly only took 48 hours from start to finish.

Here is a summary of the steps I took to move the domain:

  • Logged into WordPress.com and went to the domain management screen and unlocked the domain.  Unlocking the domain allows it to be transfered away.  Make a note of the authorization code (needed in next step)
  • Logged into 1and1 and initiated the transfer of the domain and entered the authorization code received in the prior step
  • Once the domain showed up on the 1and1 console, I immediately mapped gregsramblings.com to my new IP address.
  • Logged back into WordPress.com and changed the nameservers to 1and1.com’s nameservers (in my case it was ns51.1and1.com and ns52.1and1.com)
  • At this point, both the old domain provider and new domain provider were using the 1and1 nameservers. (note – it takes a few hours before things start taking effect)
  • I later received an email instructing me to login to workpress.com and approve the transfer.  At this point, no other changes to the domain are allowed on wordpress.com because the transfer has been initiated.

Wrapping up

The rest of the work was tweaking css, php and configuring plugins.  As I was going through most of my posts, I found a few problems that were easily resolved:

  • There were several posts with embedded videos.  WordPress.com does not allow any <embed> tags so you have to use their video plugin syntax.  I spent a few minutes trying to find the same video plugins, but quickly realized that it was easier to just replace the tag with an actual embed tag.  I prefer to use the direct embed tags anyways.
  • When I first started my blog, it was referenced as gregorywilson.wordpress.com, so several of my older posts pointed to URLs with the wrong hostname.  I used the following SQL to correct this (gotta love the REPLACE function in MySQL!):
    UPDATE wp_posts SET post_content = REPLACE(post_content,”http://gregorywilson.wordpress.com”,”http://gregsramblings.com”);
    UPDATE wp_posts SET guid = REPLACE(guid,”http://http://gregorywilson.wordpress.com”,”http://gregsramblings.com”);
  • For some reason, some of the source code used in my blog posts got encoded so “<mx:Button/>” turned into “&lt;mx:Button/&gt;”.  I never figured out why some posts had this issue but others did not but I was able to fix it with the following SQL (I did this on a post by post basis to be safe):
    UPDATE wp_posts SET post_content = REPLACE(post_content,”&lt;”,”<”) where ID = 185;
    UPDATE wp_posts SET post_content = REPLACE(post_content,”&gt;”,”>”) where ID = 185;
    UPDATE wp_posts SET post_content = REPLACE(post_content,”&quot;”,’\”‘) where ID = 185;
  • I realized a few hours after going live that my server was not setup to handle outbound email, so I was not getting notifications on comments, etc.  For basic SMTP email, I prefer postfix.  I installed with:  sudo apt-get install postfix — It’s very important that your server block external access to the SMTP port (port 25).  Amazon EC2 blocks everything by default, so it will only be allowed if you specifically allow it.
  • I’ve considered adding one of several plugins/themes that provide a light-weight version of the blog to mobile devices, but from my own experiments, the current theme works really well as-is.

One final note – WordPress is also great for non-blog websites and there are of course themes available for about any type of site.  I recently upgraded my local airport’s website from this basic HTML site to this Wordpress site.   The new site is using the “destination” theme from Templatic.  This is a great example of how to use a good designer! ;)

New Tutorial – Build a new mobile application (RSS Monitor) in 30 minutes

The written version of the tutorial is now online.  This tutorial will show you how to build a mobile application for reading the Slashdot RSS feed using Flash Builder 4.5. In order to complete this tutorial, you will need Flash Builder “Burrito” and the sample files, which include two Flash Builder projects:

The starter project [contains icons and other assets]
The completed project [the finished project that you can use as a source code reference]

This tutorial is brought to you courtesy of the Adobe Evangelism team. You may reproduce, modify, and use these materials for just about any purpose as long as you respect the copyrights of the owners involved [including Slashdot and Adobe]. You may use this to teach courses in mobile development.

Link:  http://www.adobe.com/devnet/air/articles/mobile-rss-reader.html

Setting the background color when generating images from Canvas.toDataURL

One of the cool features of the HTML5 canvas element is the toDataURL method. This returns a Base64 encoded image in the form of a data url string. Among other things, this can be displayed directly within an IMG element on the page, or sent to the server so the image can be saved.

However, one thing that I found out this weekend is that there is no background color for the image returned from toDataURL. Looking at the actual canvas draft specification, I found this:

For image types that do not support an alpha channel, the image must be composited onto a solid black background using the source-over operator, and the resulting image must be the one used to create the data: URL.

Basically, if you are create an image type that supports transparency (such as PNG), the background will be transparent, otherwise, it will be black. When you think about it, it makes sense, as the canvas is a blank canvas, and only contains what is actually drawn to it. However, for an example I am working on right now, I needed to be able to specify a white background.

After some Googling failed turn up any solutions, I came up with my own solution which I thought I would share.

First, here is a simple demo:

 

Basically, click in the canvas on the left to draw some rectangles. When you click on one of the links, a PNG is generated from the canvas and displayed in the IMG element on the right. Each link creates an image with a different background color (none, solid red, red with 50% alpha).

You can view all of the code for the example in my GitHub repository, but here is the relevant snippet:

//Returns contents of a canvas as a png based data url, with the specified
//background color
function canvasToImage(backgroundColor)
{
	//cache height and width		
	var w = canvas.width;
	var h = canvas.height;
 
	var data;
 
	if(backgroundColor)
	{
		//get the current ImageData for the canvas.
		data = context.getImageData(0, 0, w, h);
 
		//store the current globalCompositeOperation
		var compositeOperation = context.globalCompositeOperation;
 
		//set to draw behind current content
		context.globalCompositeOperation = "destination-over";
 
		//set background color
		context.fillStyle = backgroundColor;
 
		//draw background / rect on entire canvas
		context.fillRect(0,0,w,h);
	}
 
	//get the image data from the canvas
	var imageData = this.canvas.toDataURL("image/png");
 
	if(backgroundColor)
	{
		//clear the canvas
		context.clearRect (0,0,w,h);
 
		//restore it with original / cached ImageData
		context.putImageData(data, 0,0);
 
		//reset the globalCompositeOperation to what it was
		context.globalCompositeOperation = compositeOperation;
	}
 
	//return the Base64 encoded data url string
	return imageData;
}

Basically, here is what is going on:

  1. Get the ImageData from the canvas
  2. Set the globalCompositeOperation to destination-over. This will make it where new drawing to the canvas will go UNDER existing graphics.
  3. Draw a rectangle the size of the entire canvas with a fillStyle set to the background color we want to use (can be any valid HTML color format).
  4. Generate the data url for the canvas.
  5. Clear the entire canvas (including background).
  6. Copy the original drawing data back into the canvas.
  7. Reset the globalCompositeOperation value to what it was when we started.

The key is the globalCompositeOperation, which allows you to control how new graphics are composited with existing graphics.

Now, this technique does require a number of full canvas writes, so be mindful of performance when using it (especially on mobile devices). However, in my testing, it performs well on both desktop and the iPad when running once in response to a user action.

I have added support for this to EaselJS in the form of a new Stage.toImage(mimeType, backgroundColor) method, which will be available in the next release of the library.

Post any comments, questions or suggestions below.

MTV launches personalized video application

If you’ve been following me for a long time you know that I absolutely love personalized video applications. The one that MTV just launched is just one of the best I’ve ever seen. After you’ve picked your favorite music style you can upload or take a photo of yourself. After a few easy steps the application will map your photo on to a 3D character… You know what… You just have to see it for yourself! Here’s me having a party ;-)

Hat tip Rob Ford @FWA

Android Pictures and MP3 Remote Control Reloaded

Last year, I’ve made two Android applications that connect to desktop apps: AndroidPictures (you can see the phone’s camera roll on a desktop) and Remote Control for desktop MP3 player (you can control an AIR desktop MP3 player from your mobile phone). Because at that time, Flex “Hero” wasn’t available I rewrote these apps last week  this time using the mobile components from Flex “Hero”.

The reason I rewrote them with Flex “Hero” is quite simple: to see if it simpler or more complicated compared to plain Flex. And not surprisingly it is much simpler with Flex “Hero”. Actually I love so much the Views and ViewNavigator, that I’d love to have them available for desktop applications too.

One note on how these apps connect to each other: I used the new Peer 2 Peer capabilities from AIR/Flash Player. This part is extremely simple actually and if you have a look at the source code you’ll find that I wrap this functionality in a library that is used in both projects.

You can download them from here:

Great Game Programming Book (with example)

I’ve been looking at many gaming books lately but ActionScript 3.0 Game Programming University by Gary Rosenzweig is a particularly good one. For a while I was trying to figure out how to make a Bejeweled game from scratch. Well this book actually walks you through building one. All of the examples are built using Flash Pro, which I found particularly helpful. Some of you hardcore folks may disagree though. There are many great examples of games ranging from space, trivia, casino games, and more. All of the source files can be downloaded from the book’s website.

Below you will find my Bejeweled ripoff called CS Jewels. All I did was basically reskin Gary’s example from the book in addition to a few minor tweaks. But the important thing is that I actually understand the code now. You have to click the pieces as dragging is not built in. Still pretty cool though.

<!–

Get Adobe Flash player

<!–

So if you are new to game programming, this book is a great introduction to most of the key concepts. Look for some more game book reviews in the future.

Great Game Programming Book (with example)

I’ve been looking at many gaming books lately but ActionScript 3.0 Game Programming University by Gary Rosenzweig is a particularly good one. For a while I was trying to figure out how to make a Bejeweled game from scratch. Well this book actually walks you through building one. All of the examples are built using Flash Pro, which I found particularly helpful. Some of you hardcore folks may disagree though. There are many great examples of games ranging from space, trivia, casino games, and more. All of the source files can be downloaded from the book’s website.

Below you will find my Bejeweled ripoff called CS Jewels. All I did was basically reskin Gary’s example from the book in addition to a few minor tweaks. But the important thing is that I actually understand the code now. You have to click the pieces as dragging is not built in. Still pretty cool though.

<!–

Get Adobe Flash player

<!–

So if you are new to game programming, this book is a great introduction to most of the key concepts. Look for some more game book reviews in the future.

What was your first computer? Here’s my computer history.

Isn’t it strange how the human mind works? I’m sure it’s not just me but I can really spiral in to reminiscing mode just by seeing or reading something. Just yesterday I had one of those moments when I saw this tweet from our friends at BlackBerry:

My first computer was an Atari 600XL. At least that’s what I thought until I started reading about it. The Atari 600XL apparently didn’t have a composite out and I definitely remember just being able to plug it into just about any TV set so it must have been the Atari 800XL. The 800XL did have a composite out, had a whopping 64KB of memory and a CPU that ran at 1.8MHz.

Photo from Wikipedia

I remember that my hometown used to have a Tandy store. I was a regular visitor after school because they had all the coolest stuff including a wide variety of computers. Our local supermarket also had a bunch of computers set up including the ZX Spectrum.


Photo from Wikipedia

I remember playing with that one a lot in the supermarket while my parents were shopping. I remember loving the soft touch buttons. It took a while to persuade my parents to get a computer and I don’t quite remember why I eventually got the Atari. I think a friend at school also had one and thought it was convenient to be able to swap cartridges. I don’t remember all the games I used to play on it but I do remember Decathlon being my one of my favorites. Remember that? Having to move the joystick from left to right as fast as you could?

After the Atari I was bitten by the computer bug and always wanted more. Next in line was the Commodore 64 with Datasette cassette player. The C64 was immensely popular back then. Everyone seemed to have one ;-) It was also on this computer that I started “programming”.

Next in line was the Amiga 500. I loved that machine! 512K memory, floppy disk drive (single sided) and a 7.09MHz processor. The Amiga Workbench OS was a revelation. Man I was spoiled.


Photo from Commodore Museum

I used that Amiga for a long long time until I got in touch with PCs and Macs in school. I studied “Graphic Design Techniques” and also got lessons in Quark Express, Corel Draw and yes… Photoshop. I remember drooling on the Apple devices but they were just too damn expensive. My hometown had an Apple dealer and I remember visiting them a lot ;-) At one time they had a Newton on display and I thought that was just amazing. A Mac was way out of my completely non-existant budget and after quite a long time I finally went for a PC. A 486 running at 66MHz running on Windows.

A bit later I discovered bulletin board systems. Krrrsssss…beeeep…beeeeeep…krrrrssssss… Aah… The beautiful sound of a modem… :D

After the BBSs came the Internet… and the ridiculously high phone bills. I stuck with PCs for a really long time and then at one time (now about 7 years ago, I think) I got sick and tired of having to spend more time keeping my system up and running than actually being creative. I was freelancing back then and did a lot of video work. One of my major problems with Premiere was that I couldn’t do anything with my computer when I was capturing video from a DV tape. I used to have two identical PCs so I could keep working on other stuff while I was capturing video… I didn’t think that was right. One of my friends worked at the local Apple office and I asked him if I could borrow a Power Mac G5 for a while to see if I could improve my workflow. And yes it did! Apple’s Final Cut Pro allowed me to capture video from tape while I was doing email or even while I was working in Photoshop. I also immediately fell in love with Mac OS and ended up buying a Power Mac G5 and even bought the (incredibly overpriced) 23″ Cinema Display. I rapidly became a Mac Head. Bought a PowerBook, iMac and later a Mac Mini as my first Intel based Mac.

Today I am still on a Mac but my addiction has worn off a bit. While I stood in line for iPhone, iPhone 3G and 3Gs I didn’t buy an iPhone 4 and also didn’t stand in line for an iPad. I actually did end up getting an iPad just a few weeks ago to do some research though. I found it important to know what everyone was raving about. I currently use a MacBook Pro on the road and a Mac Pro in my home office.

Aaah man… The memories this post brought up… Am I getting old? :D

I’d love to hear about your computer history! And now that I’m wrapping this up I think I should also do a post on my device history… If I can actually remember all of them ;-)

The Flash Gaming Summit Is Going To Rule!

I’m really excited to be attending and speaking at my very first Flash Gaming Summit. I have heard nothing but good things about this conference and I can’t wait to see what the Flash gaming community has in store. I’m trying to soak up as much gaming information I can so I will definitely be attending sessions while I’m there. My good friend Thibault Imbert and I will kick off the conference with a session named Flash+ A Whole New Dimension for Games, which will aim to bring developers up to speed on what Adobe has in store for game developers.

While I can’t go into specifics right now, I will say that there will be stuff shown in our session that has never been seen before. I try to never unnecessarily hype up sessions that I’m doing so trust me, this is going to be good! This conference is right before GDC and I will be attending that as well for the first time. Hope to see you there!