Monthly Archives: November 2009

2 years ago
5 comments

Optimizing Your Amazon Web Services Costs

I’ve been with Amazon for quite a long time now and you must have heard that their web hosting services aren’t very cheap. The average total of one instance per month (including EBS, S3 and all the others) was around $120 at the start. That was back in July 2009 when I had no idea about how all this stuff works. With a lot of experimenting I managed to drop my instance per month costs down by around 40%. Below are a few tips that can help you lower your Amazon Web Services charges:

  • Use reserved EC2 Instances where possible. Amazon charges $0.085 per hour for an m1.small Linux instance in the US, that’s around $61 per month and $734 per year. A reserved instance costs me $227 for one year, plus $0.03 per running hour, that makes it around $490 per year for an m1.small instance. Use reserved instances only if you’re sure that you’ll be using it for a whole year. You can save even more if you purchase a reserved instance for three years.
  • Storage: EBS vs EC2. Pick EC2! That’s right, EC2! EBS charges you for provisioned storage, IO requests and snapshots. These may rise pretty quickly if you’re running MySQL on an EBS block – very risky! Run your MySQL on EC2. The php files and everything else should preferably be on EC2 aswell. You can use your EBS block for tiny backups of core PHP files if you’re running more than one EC2 instance.
  • EBS is cheaper than S3. S3 should only be used in cases where you have to serve your static content from different servers (perhaps through CloudFront), and maybe store some backups there too (don’t forget to remove the old ones!), but EBS is cheaper, even with snapshots.
  • CloudFront is okay. It does speed up your website, but you have to know that it’s more expensive for requests to Japan and Hong Kong

There you go. With these tips you should be able to get the Amazon hosting services for around $90/month, unless of course you have a 3 million visitors per day website ;) Also, for those of you wondering.. I haven’t used RackSpace, but I did compare their prices to Amazon’s and they’re more expensive.

Published 2 years ago with 5 comments tagged , , , , , , ,


2 years ago
5 comments

The Facebook Platform: Building a Custom Fan Page

As you may have heard, I’m only starting as a Facebook developer and with a few recent experiments, Timothy and I thought about customizing a fan page on Facebook, which will hopefully soon take advantage of its own domain name (Facebook’s Open Graph API). This is less of a technical post and more of a thinking one. We started our new experiment on a Sochi 2014 Olympiad fan page on Facebook and we’re trying to replicate one of the the original websites (sochi2014.com) inside the fan page canvas.

Errm.. I’d like to give a huge shoutout to the talented (sarcasm) developers of sochi2014.com! Well, on the outside the website looks okay, but on the inside, oh brother, give me a break! I’ll point out the most interesting and fun ones:

  • Starting from the first line: no document type definition
  • I noticed an empty table with a cellpadding=3, is that the new standard for margins? ;)
  • Check out the script type=”" language=”javascript”, what the hell does that mean?
  • Wow,   heh, haven’t seen that for a while!
  • Cool, they’re replacing margin-top: 1px; with an empty.gif height=1 image!
  • Closer to the bottom of the page, I found 11 closing divs right next to eachother.. I don’t believe that they’re using a minify script for that one
  • And ~ 50 errors according to the W3C HTML validator, I don’t think there’s a reason to mention them all

That’s probably enough for a start. Very frustrating when a website like that is being built like *that*, and with a page rank of 8! I’d give those guys a solid 2 ;)

Now, back to Facebook. I registered a new application, did some setup and managed to get a four-page website, similar to sochi2014.com, inside apps.facebook.com, with a few modifications (and cleaning up of the code), including a dashboard and a tabs widget for navigation. This was quite straightforward and simple to do (take a look at the Facebook API Developers Guide), the linking structure was okay, the contact form was done in only a few seconds (thank you Facebook for your great FBML!) and the static pages were simply some copy-pasting.

Once I got that up and running I decided to port it into the fan page (as an application tab) that Tim and I manage. I was quite surprised that all the linking structure died, but was pleased that I could at least see the front page, besides the fact that you have to click on the flash element before it’s shown. With a few more experiments and some help from the Facebook Platform Developer Forum (which is a very sweet place btw) I came to a conclusion that multipaging will not work in application tabs on profiles and fan pages. The easiest way around this is of course to use FBJS (javascript) to imitate multiple pages by hiding and showing certain elements on mouse click events. Forms would be a problem too, unless submitted via Mock AJAX.

Tim then asked me if I could move the menu I built up to the top where the main tabs are (Info, Wall, Photos, etc) which seemed impossible. Well, at least from within one Facebook application. So if I’d like to have 5 tabs at the top of the fan page I’d have to register 5 new Facebook applications, what a mess! Wouldn’t it be easier to manage a certain amount of tabs within one application and let profile owners and fan page administrators decide which ones they’re going to put up their navigation? Oh well.

It’s very strange though why companies aren’t yet taking full advantage of what fan pages might look (and work) like. Let’s take a look at Mashable’s Killer Facebook Fan Pages. Out of the 5 pages featured there, the Redbull Fan Page is the one I liked most. They have FBJS pagination, flash video and links to their application page which is quite interesting (yet still a single page with minumum user interaction). The Adidas Originals custom fan page is fully based on Flash, which is why they ask you to “Click to Enter” before you could see anything. The Starbucks and Coca-Cola pages are less interesting, simple HTML with links to external pages. The Pringles fan page doesn’t even have an app of it’s own – Killer?

Here are a few other pages worth checking out. Smashing Magazine – they’ve got two sections: “The Smashing Book” and “Write for Us”, which are two different Facebook applications (judged by the URL). The BMW Fan Page features an interactive form with FBJS validation and submission – way to go guys! And I’m pretty sure there are tonnes of others which I didn’t come across.

Published 2 years ago with 5 comments tagged , , ,


2 years ago
7 comments

Video: Google Developer Day 2009 Moscow

I received an email this morning from the Alexey Shelestenko (from Google) with a link to some photos from GDD 09 Moscow and this fantastic 2 minute video from the event:

This definitely is one event I’ll never forget. Lars is a superstar ;) Oh and here’s last year’s.

Published 2 years ago with 7 comments tagged , ,


2 years ago
2 comments

Facebook API Experiments: Twitter Tags

For quite some time now I’ve been dreaming about getting into the Facebook Platform (API, Markup Language, etc) but haven’t had good enough reasons to do so. One good friend of mine Timothy gave me those reasons not so long ago and guess what! I came up with my very first Facebook App! It’s still in the sandbox, don’t rush searching for it in the applications database. I’m not going to share any code as it’s all clumsy but I do want to share some screenshots and my first experience with the Facebook API.

One very interesting thing about the API is the testing console, where you could run any Facebook API methods, very useful for debugging. Interface design is very catchy too, with the new Facebook Markup Language and the FBML testing console, so quick and robust! Pepole are still asking for form elements extensions though, such as the checkbox or option – it seems that they come out buggy as fb:editor-custom.

Anyways, the first thing that came into my mind is adding a Twitter Tags tab to a profile or fan page, so I used the Foller.me API and within a few hours I managed to get a fully working (or not) canvas application tab. I’m surprised by how well-written the Facebook PHP Client Library is. All the methods are explained in the code comments and do exactly what they’re expected to. The Facebook Markup Language takes care of application settings, private areas (app configuration, etc) and everything else. The overall Facebook Developers Documentation is okay, I’ll give that an 8 out of 10 and I like them running the MediaWiki software ;) Here are some screenshots of my application:

Still not sure where this is going but Timothy had some great ideas about custom Facebook Apps. I guess a release of the Twitter Tags application would be handy for some profiles (or at least for some more experience), so I might push that forward in the near future and file an “add to facebook database” request to go public. After that we’ll aim for something bigger.

Published 2 years ago with 2 comments tagged , , ,


2 years ago
57 comments

15 Google Wave Invitations from Moscow

That’s right. I’m giving out Google Wave invitations too! No VIP invites though (like the ones at Bit Rebels) and there’s no need to tweet anything to get them. The rules are simple: I know quite a lot of you readers comment here from time to time and yes, all you have to do is leave a tiny little comment to this post (please include your name and your Twitter account) to get your chance for a Google Wave invitation. Please don’t write your e-mail address or anything in the comment itself, doing it in the e-mail field would be enough for me to know your addresses.

By the end of this week I’ll look through your comments and send out the invitations. First to friends and people I interact with on Twitter, then to those who often comment on my blog, and if there’s anything left, to the rest. Don’t worry though, the last time I asked if anybody wanted a Google Wave invitation on Twitter I had 2 responses from people I follow, so there’s quite a good chance for everyone.

P.S. Make sure you filled in this Wave application form before asking for invitations, that (I guess) would speed up the whole process.

Update: 6 invitations have been sent out today (Thursday). Hope to see you waving soon! Others will receive theirs tomorrow.

Update: Okay, I sent out the rest of the invitations. Too bad some of you didn’t even read the post, thus, didn’t get their invitations. Anyways, I have a few left so feel free to bug me on Twitter if you need any ;) Good luck and thanks for your participation! Also, for the peeps who were sent an invitation but didn’t get it yet – you don’t generally get the invitation the day it was sent out. There’s a time frame for that, normally around a week, sometimes less, but you’ll get there, don’t worry ;)

Published 2 years ago with 57 comments tagged , ,


2 years ago
4 comments

Google Developer Day 2009 Moscow – Conclusion

Well I guess it’s time to give you a detailed update on the event of the year – Google Developer Day 2009 Moscow (Google I/O, #gdd09ru on Twitter). It was held on November 10th, with over 1,500 visitors and a few guys from Google! Here’s a little video (Chrome Experiments and the Google I/O song with the lyrics) that’s been playing around on the big screens during the conference.

Out of the many topics at GDD 2009 I had the chance to listen to HTML 5, OpenSocial, Speeding up the Web, Google Web Toolkit, Google AppEngine, Google Android and PubSubHubbub. The most interesting was of course OpenSocial by Chris Chabot – Developer Advocate at Google. I also had a little chat with Chris during one of the breaks and he seemed like a very nice guy to me. I found out some interesting stuff about OpenSocial and started writing some code already! Too bad though that Facebook aren’t yet supporting OpenSocial, guess they’re too fond of their own platform and API. Well, that’s Facebook ;)

One more interesting topic was Speeding up the Web, but I wrote about that earlier: Every Millisecond Counts: Page Speed for Firebug.

HTML 5 and PubSubHubbub were just introductory presentations of what’s going on with the web and why real-time matters. Basically all that stuff is available on the net for quite a long time now, though I didn’t quite understand why the RSS Cloud by Dave Winer doesn’t seem to have a future.

The Google Web Toolkit and AppEngine lectures were a bit more techy than the rest. We saw lots of code on the screen which showed some nice methods for testing web applications, the Model-View-Presenter (MVP) design pattern, and the keynote featured a little demonstration about how easy it is to write and deploy Java applications using the Google Web Toolkit and AppEngine plugins in Eclipse.

Other celebrities at Google Develoepr Day were Lars Rasmussen and Stephanie Hannon – the creators of Google Wave from Google Sydney. By the way a friend of mine Alex managed to get a cool photo with Lars, and I managed to get one (not so cool, blame the photographer) with Chris. Here are a few photos from the event:

I’d also like to give a huge shoutout to Alexey Shelestenko from Google Russia. There were way too many people dying to get to the event, but Alexey was the one who made sure I could come. Thank you so much Alexey! And I guess that’s it, waiting for Google Developer Day 2010 ;)

Published 2 years ago with 4 comments tagged , ,


2 years ago
11 comments

Loading jQuery from a CDN in WordPress

This may seem like an easy task to do but is quite tricky in WordPress. Using a CDN these days is very popular, cheap and helps speed up your website taking the load off your web server. I personally love Amazon CloudFront! The tips at Google Code suggest you serve all your static content from different domains, preferably ones without cookies, so CDNs are perfect.

All the problem with WordPress is script dependancies, and this applies not only to jQuery but to all the other predefined javascript libraries (prototype, scriptaculous, thickbox, see wp_enqueue_script for more info). It’s all about the handles and plugins that use jQuery will probably use the jquery handle in their dependency lists, which will automatically make WordPress include the standard jQuery from its wp-includes directory. This means that using the code:

wp_enqueue_script("my-handle", "http://s.kovshenin.com/jquery.js");

You might end up including two instances of the jQuery library, one from your CDN (s.kovshenin.com) and another one from the WordPress wp-includes directory, which will end up in a total mess. Strange though, that you cannot redefine an already known handle, such as jquery like this:

wp_enqueue_script("jquery", "http://s.kovshenin.com/jquery.js");

The javascript library will still be loaded from the default location (wp-includes on your local web server). So the right way to do it is with a little hack in your functions.php file (in case you’re doing it within your theme) or any other plugin file (in case you’re doing it within your plugin):

add_filter('script_loader_src', 'my_script_loader_src', 10, 2);
function my_script_loader_src($src, $handle) {
	if ($handle == "jquery")
		return "http://s.kovshenin.com/js/jquery.1.3.2.min.js";

	return $src;
}

Then any call to wp_enqueue_script with the jquery handler will output the correct path to your CDN version of jQuery. Oh and please, try not to use generic function names like my_script_loader_src, I used that just as an example, we don’t want any function name conflicts and can’t expect other plugin/theme developers to use non-generic names ;)

Published 2 years ago with 11 comments tagged , , , , , ,


2 years ago
7 comments

Every Millisecond Counts: Page Speed for Firebug

Here’s a little video that we’ve seen at Arvind’s and Sreeram’s presentation about speeding up the web at the Google Developer Day 2009 conference in Moscow. Inspiring isn’t it?

Arvind and Sreeram talked about a very nice plugin for Firefox (built upon Firebug) which is called Page Speed, developed and maintained by the Googlers. You may read more about the plugin on the official page at Google Code: Page Speed for Firefox/Firebug plus a bunch of cool tips and tricks right here: Let’s make the web faster. I used to run with one called YSlow by Yahoo, but the Googlers seem to have made a better job.

I ran the speed tests on my homepage and got quite a few sweet suggestions, mainly about combining and minifying my CSS and JavaScript files, distributing static content to different cookie-less domains and a couple more. Well combining and minifying CSS and JS would have been quite difficult in WordPress due to the series of plugins that use their own, if it weren’t of course for the W3 Total Cache plugin. In only a few minutes I managed to combine all javascript and stylesheets into single minified versions, which were recreated whenever a plugin was updated. After doing that, running the same test didn’t yield out that problem anymore. Distributing static content to different domains, well that’s one more issue that would have been solved by that brilliant cache plugin and its CDN features, but I guess I’ll have to wait for Amazon CloudFront compatibility.

One more thing I love about Page Speed is that not only they state the problem, but also provide the solution, or at least an easy guide to the solution. Now with a few warnings left, my Page Speed overall performance is okay. I hope to optimize that later this month for even faster access, and perhaps sign up with a PubSubHubbub service (Brett Slatkin had a fantastic presentation on that one at GDD too), and I can finally pronounce that correctly, Hubbub for short.

Published 2 years ago with 7 comments tagged , , , , , , , , , , , ,


2 years ago
no comments

Google Developer Day Moscow 2009

Okay it’s official, I AM going to be at Google Developer Day on the 10th of November in Moscow. I’ve got my business cards delivered yesterday, and yeah, they could have been a little bit better, but it’s alright. I posted them out on Twitter yesterday evening, if anybody’s missed it here’s the picture: twitpic.com/odnkt. Quite simple heh? Anyways, I haven’t yet decided which topics I want to go to and the ones I could miss, besides, some of them should be on YouTube the very next day, but I’m really looking forward to hearing about the Google Wave API, the Open and Social Web and of course HTML 5 and the Future of the Internet (at least it sounds funky).

Hope to meet a bunch of interesting folks there and have an overall great time! The official hashtag of the event is #gdd09ru.

Update: Google Developer day was fun, I had no idea it would be THAT awesome. You know what I mean if you’ve been following my tweets. Anyways, I’ll write up a new post with pictures and videos from the event later this week :)

Update: A detailed report has been filed here: Google Developer Day 2009 Moscow: Conclusion

Published 2 years ago with no comments tagged , ,


2 years ago
3 comments

Adding mod_rewrite Rules to .htaccess in WordPress

This is all about the Twitter Friendly Links plugin I’ve been working on lately. You might have noticed some 404 issues in the comments section on the plugin page, this in most cases is due to caching fail. I wrote about this a while ago when I was working on W3 Total Cache compatibility where all I had to do is set the wp_query object’s is_404 variable to false. Then again, the other caching plugins didn’t understand that, so I came up with my own links caching mechanism – direct cache with .htaccess ;)

The WP_Rewrite article in the Codex pretty much explains everything, except that it’s pretty difficult to add custom rewrite rules to .htaccess via WordPress, as even wp_query object’s non_wp_rules is handled like this:

RewriteRule ^Pattern /Substitution [QSA,L]

With the trailing slash and “Query String Append + Last Rule” hard-coded in the WordPress core. Well here’s how I managed to do Permanent 301 redirects to absolute URLs.

First of all add an action and a filter. My plugin code is wrapped up in a class (and I encourage you to do the same for maximum compatibility):

add_action('generate_rewrite_rules', array(&$this, 'generate_rewrite_rules'));
add_filter('mod_rewrite_rules', array(&$this, 'mod_rewrite_rules'));

The generate_rewrite_rules action is the place where we will add some rules to non_wp_rules, then modify (or customize) in the mod_rewrite_rules filter. Here’s the generate_rewrite_rules function which I’m hooking to:

function generate_rewrite_rules() {
	global $wp_rewrite;
	$non_wp_rules = array(
		'simple-redirect/?$plugin_name' => 'http://google.com',
		'one-more-redirect/?$plugin_name' => 'http://yahoo.com'
	);

	$wp_rewrite->non_wp_rules = $non_wp_rules + $wp_rewrite->non_wp_rules;
}

I used the string ‘plugin_name’ in every rule just to make sure that I don’t edit anyone else’s rewrite rules further on. You’ll understand what I mean once you read the next part of the code. Also make sure you use single quotes as double quotes would make $plugin_name a variable.

function mod_rewrite_rules($rules) {
	$rules = preg_replace('/^(RewriteRule \^.*+\/\?\$)plugin_name (\/)(.*) (\[QSA,L\])$/im', '\1 \3 [R=301,L]', $rules);
	return $rules;
}

There you go, so the rules are modified using a simple regular expression, which in .htaccess will turn out to be:

RewriteRule ^simple-redirect/?$ http://google.com [R=301,L]
RewriteRule ^one-more-redirect/?$ http://yahoo.com [R=301,L]

The regex is not perfect though, just a sketch. I believe it will not work if the RewriteBase is not set to / but you get my point ;) The rules are written to .htaccess when you access or save changes in the Permalinks section in the admin panel or whenever wp_rewrite object’s flush_rules is called. Now be careful, you cannot call flush_rules anywhere outside the admin panel (although you may try to link with a few includes – wp-admin/includes/misc.php and wp-admin/includes/files.php before flushing) but in my case I’ll just go with the publish_post hook.

Published 2 years ago with 3 comments tagged , , , , , , ,



back to top