If you’re expecting some kind of long winded tutorial about optmising, caching and super-charging your site, sorry to disappoint. The advice is:

Don’t use flickr

Ok, if you’re not a flickr user you’ve probably stopped reading already, but if not you might be rewarded by one or two nuggets of useful information.

The story starts with Hiro’s personal blog being at the top of hatena’s bookmarks page (think Japanese delicious). Unfortunately, it was hosted in-house about 2 metres away from where I am sitting. I think I can still smell the smoke :p

It was swamped, no-one could get through to it but we kept it up in some vain attempt to let whoever access the Evangelion related story. The server wasn’t tuned or optimised and only had a basic caching. But that’s beside the point, and as I said this post isn’t about optimising, caching and tuning.

After the above episode, Hiro moved his blog to Amazon’s EC2 cloud servers, just like our main blogs and also messa.tv

I was curious though, how much of an improvement was it? Obviously the EC2 server wasn’t on its hands and knees begging for mercy (or to be put out of its misery) but still, how fast was it to load?

The answer surprised me. It was slow, 32 seconds slow. Half a minute to load the front page!

I used BrowserMob’s free Instant Test to do the measuring, highly recommended and no the above link isn’t an affiliate link.

The reasons I recommend BrowserMob are because it tests from 4 different locations around the world, and the results are easy to read. Plus there is no set-up. I found it because I was searching for Load or Stress testing in a user friendly set-up.

Ok, I thought let’s try some of my own sites, set up on a Linode VPS. Tuned, cached and nginx based. And I was floored…

1.2mins to serve up the 347.2KB front page! I couldn’t believe it, I almost cried.

I looked more closely at the report and then discovered why it was taking 72 seconds to serve up 347KB. It was a flickr widget I was using, pulling down thumbnails of recent photos in my public pool. Whereas a full sized photo hosted locally on the server was taking 0.234 seconds to load, a thumbnail from flickr was taking 30.1 seconds. And because of the number of thumbnails I was loading, it did them in batches, so 6 thumbnails took 30 seconds then the next took another 30 seconds. Note that the files are tiny, 337 bytes not 337KB.

The advanced caching I set up didn’t help because the thumbnails weren’t local so were not cached.

So I disabled the widget and re-tested. New load time: 1.52 secs with no single item loaded taking more that 300 milliseconds.

Owwwww! (That was the sound of me kicking myself repeatedly)

I then went back to the report of Hiro’s EC2 hosted blog and found that it was the same, images from flickr were taking 30 seconds to load. He wasn’t loading as many as I was hence the total time of 32 seconds. BTW (EC2 vs Linode comparison tidbit) loading a local image took 2.2 seconds on the EC2 server vs my 0.234 seconds on my Linode server.

So here are the takeaways:

1. Don’t use flickr for hosting images you will be displaying on your site
2. Even if you’re confident you’ve got uber-hosting, check your site
3. Your site may feel fast to you but it could be an illusion because of locality and browser (not server) caching
4. BrowserMob makes it easy to do No. 2 and its free

Related posts:

1. How to create a single wp-config file for local and remote WordPress development If you are developing WordPress sites, themes or plugins, you...

Related posts brought to you by Yet Another Related Posts Plugin.

If we imagine the “Scouter” in DragonBall or “AR glasses” in Dennō Coil, it seems like a technology set in the future, but how is it like in the real world? Here I examine 5 cases of AR as used in business in the present moment.

1. Zugara – a service which allows you to have your virtual fitting room

This is one of the most famous AR examples and has caught the imagination of many bloggers. You print out what they call “markers” prepared for each item of clothing and show it to the web camera, fitting it to your body. The marker will then change itself to the clothing you picked up. Once it is set, you don’t have to keep holding it. The feature of this service is that it allows you to control with motion-capture in addition to AR. You can change the color or design and purchase the clothes using the scroll button that appears in the window, just like “Minority Report”. It isn’t a finished product and not commercialized yet as you only can try on 2D catalog pictures, but it may well be that it becomes the prototype of future online shopping experiences.

2. Lego DigitalBox – Lego box on which kids can see the completed model

Showing how cool the finished model is, will capture the attention and imagination of kids. Here is Lego Digitalbox which is developed by Metaio, a leading AR company in Germany. So what is Lego Digitalbox? Lego Digitalbox is a special box on which the completed model will show up when you show it to the special monitor which is set up in a Lego shop . Some people joke that it is so cool that kids will be satisfied with seeing the “Virtual Lego” and won’t buy an actual one.

3. My.IKEA – a service that let’s you try out virtual layouts before buying furniture.

IKEA is also trying out AR (Augmented Reality) for their promotions. IKEA also uses Markers like Zugara. If you print out Makers prepared for each item and show it to the web camera, the furniture pops up on the monitor. You can try out this cool service from “My.IKEA”, but at this moment (July 1st 2010) I can’t find that page and have no idea how to access it. Please leave a comment if you know how. In the meantime, you can watch the demo to get a general idea of how it works.

4. USPS – Virtual box simulator

“The Virtual Box Simulator”, a service USPS has started, is another cool AR service. With this service, you can check which box size you need using a virtual 3D box. Feature of this service is you can change the size of the virtual box by clicking the box icon on the site. You also can adjust the transparency so you can see which side is too long. There is no other way to check if it’s the right size than actually you put your item in the box. From that point of view, this virtual box is a good example of how to use AR.

5. Ray-Ban – a service that you can try on virtual glasses.

This is a service it enable you to try on virtual Ray-Bans with AR.
Unlike trying on clothes, only your face needs to be shown to the camera. So it might be one of the best services that combine AR with a web camera. You can download what they call “Virtual mirror” from here and set up. Unfortunately, this service is available only on Windows.

Today I covered 5 Augmented Reality services which are being used in business. Unfortunately, at the moment there are not many opportunities we can feel and touch AR, but you can extrapolate how our lives might change with the current examples. With other technologies like location-based services and motion-capture services, AR will be part of the future revolution of the Internet.

If you know of other ground-breaking examples of AR, please tell us via the comments.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

If you’ve ever had problems with WordPress automatic updates on a local install of XAMPP this should fix it (note that I’ve tested it on OSX but it should work for Windows/Linux but the details will be different).  For a long time I just did the updates/installs by manually installing because the automatic upgrades never worked or it would ask for my ftp details.  And no matter what ftp details I entered it would never connect.  Same for plugin installs or updates.

Turns out that it has nothing to do with ftp settings, it was a simple file permissions conflict.  XAMPP was running its local Apache as user ‘nobody’ while the files on my hard disk were owned by my local user ‘ian’.  When WordPress came across this conflict it fell back to ftp mode but since it is a local install, that didn’t work.

So what to do? The easiest thing to do is to edit the XAMPP apache config file to run it as your local user.  To find out your local user name, just launch terminal and in your home directory run:

ls -al

then edit the config file.

sudo vi /Applications/XAMPP/etc/httpd.conf

look for these lines:

User nobody
Group admin

and change them to:

User yourusername
Group staff

You’ll have to restart XAMPP’s Apache and if you attempted automatic updates before and failed, you’ll have to delete the upgrades folder inside wp-content.

Hope this helps other WordPress designers and developers using XAMPP. Please leave a comment or have a look at messa.tv if it did :)

Related posts:

1. How to create a single wp-config file for local and remote WordPress development If you are developing WordPress sites, themes or plugins, you...
2. Thoughts on the GPL and WordPress themes Why the GPL doesn’t matter WordCamp Kyoto 2009 was...
3. Localizing dates in WordPress themes Our theme on the English side and the Japanese side...

Related posts brought to you by Yet Another Related Posts Plugin.

Dual screen iMac

Spotted in the offices of messaliberty. Hope we don’t get sued by Apple for showing this. :p

Related posts:

1. 2 Keyboard Shortcuts You Must Know For Google Wave We’re using Google Wave for our internal text meetings. And...
2. The 5 iPad apps I am looking forward to So the iPad will be delivered to lucky Americans in...

Related posts brought to you by Yet Another Related Posts Plugin.

We in Japan are not so lucky, we’ll be lucky to get them in late April but early May is also likely. This is opposite to what you know who claimed in his announcement in January. Oh well…

Anyway when it does arrive, these are the 5 apps I am most looking forward to using with the iPad and why. *Click on the images to go to the iTunes Preview page

Dropbox

Dropbox
If you’ve ever used Dropbox, I probably don’t need to explain but for some of you who haven’t it provides effortless and free syncing between computers and computers or computers and iPhones/iPod touches/iPads (paid plans are also available). As someone who doesn’t do the full USB sync often it is a lifesaver. Just drop a PDF or some pictures in the dropbox on your computer and seconds later you can access it on your iPad. If you mark files as favourites, it will store them locally.  But talking of pdfs…

GoodReader

GoodReader
The iPhone has built-in PDF reader functionality but it’s not very good. Zooming, controls, how to access it or files are all poorly implemented. It seems like an afterthought. GoodReader on the other hand is a supremely well made PDF reader. Zooming is great. It does PDF reflowing, where it tries to read the text of the PDF, fits it to the screen and then allow you to change font size. Access to files is easy too, download direct from the web, or from Dropbox or ftp servers. The files are then stored on the iPad/iPhone. With the likelyhood of the iBooks store not being available in Japan at launch and even then with limited or overpriced content, GoodReader will let me read PDF versions of books I already have or are available on the web. The biggest problem with GoodReader on the iPhone is the iPhone’s screen size. It isn’t really comfortable to read long books, even with all the tricks GoodReader has, but the iPad’s screen should be much better in this regard. It would be even better if it read ePub files, so that I wouldn’t need to use Stanza. Stanza is great for ePub files, stylish, usable, easy to read but trying to access books not in the libraries is a maze.

WriteRoom

WriteRoom
I’m actually typing this in WriteRoom and it is great for just bashing out text without distractions. You could say that the notes app is sufficient but I love the syncing abilities of WriteRoom. (see a pattern here?) Half of this post was typed on the iPhone and half on my desktop. I don’t actually see myself doing a lot of work on the iPad, but one type of task I probably could do without frustration would be writing. I can definitely see myself at Starbucks bashing out posts with the iPad 3G and a bluetooth keyboard ala Gruber.

VNC

VNC
I use vnc quite a lot with my iPhone. Of course with the screen resolution, it is bearable but not totally productive. With 1024×768 of iPad screen space I could control the mac mini being used as a media center in full screen mode and for my desktops I could control them with a lot less scrolling. Add in a VPN connection and I could access the Mac I use at work. In the same way, I’m sure some people are also looking forward to using the pricier LogMeIn Ignition.

Evernote

Evernote
This is a strange one as although it is available for the iPhone I haven’t made much use of it. I’m not alone, there are quite a number of 1 star reviews on the app store. So why am I looking forward to the iPad version? Because I can see how it can pair up with the one I have on the iPhone. The iPhone is a great capture device but it feels cramped as an organising or filing device. So I see myself using my iPhone to capture notes and photos, they would be automatically synced in the Evernote cloud and then I can review and organise on the iPad. And it isn’t just Evernote but all the other apps like JotNot that upload to the Evernote cloud that will make Evernote (iPad version) attractive to try out.

So those were my top 5 apps I am looking forward to using on the iPad. If you are thinking of getting an iPad what are yours?

Related posts:

1. Must have Mac apps for web developers Got a new mac? You should check this list to...
2. New Dual Screen iMac spotted – intergrated keyboard too! Spotted in the offices of messaliberty. Hope we don’t get...

Related posts brought to you by Yet Another Related Posts Plugin.

However, some settings like blog address are held in the database which makes mirroring local development and remote production servers a little tricky. If you just backed up the database on the remote set-up and imported it to your local XAMPP server through phpMyAdmin then WordPress will still think that it is at http://www.wordpressblog.com and not http://localhost

Permalinks might not work, plugins might break and so on.

What you need to do is either edit the database, searching and replacing the relevant fields or edit the wp-config.php file to override the database settings. I don’t recommend the first option as it is error-prone and you have to do it again if you throw the database in the opposite direction.

Editing the wp-config.php file is relatively easy, just add the lines

	define('WP_SITEURL', "http://localhost");
	define('WP_HOME', "http://localhost");

but if you edit the wp-config.php file you will have two different versions of the file.  This will cause your site to break if you absent-mindedly uploaded your local wp-config.php to the remote server.  If you are using source control, like git or svn, and forget to exclude the file the same thing happens.  Plus you have to maintain two versions.

Here’s what I do. I set-up the wp-config.php to check to see if it is a local server, if it is then set the configuration one way, otherwise set it using the production values.

The first 3 settings are the same whether local or remote.  In some cases the MySQL hostname will be different, so just set it later with the others.

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'wordpressdb');

/** MySQL database username */
define('DB_USER', 'wpdbuser');

/** MySQL hostname */
define('DB_HOST', 'localhost');

We’ve moved the 4th setting, the password, because it is different. And we will add the ‘WP_SITEURL’ and ‘WP_HOME’ settings later to override the database values. But first two more settings that are the same whether local or remote.

/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

Ok, now the fun starts. These five lines checks to see if the server’s address is 127.0.0.1 If it is, we assume it is a local machine and set a WP_ENV to development, otherwise we set it to production.

if ($_SERVER['REMOTE_ADDR']=='127.0.0.1') {
	define('WP_ENV', 'development');
} else {
	define('WP_ENV', 'production');
}

Having determined whether the environment is local or remote, we then grab the site address for use with ‘WP_SITEURL’ and ‘WP_HOME’.  I don’t hardcode it in as it gives me the flexibility to re-use it for any virtual server.

$debian_server  = preg_replace ('/:.*/',"", $_SERVER['HTTP_HOST']); $_SERVER['HTTP_HOST']);

Finally in these lines, if it is the local development, we set a simple dummy password and disable post revisions. We also set WP_DEBUG to false, this allows us to set it to true if we come across any tricky problems.

If it is the real production server then we set the password to its original value which should be a long and random set of characters.

if ( WP_ENV == 'development' ) {
	define('DB_PASSWORD', 'short_dummy_password');

	define ('WP_POST_REVISIONS', false);
	define ('WP_DEBUG', false);

	define('WP_SITEURL', "http://$debian_server");
	define('WP_HOME', "http://$debian_server");
} elseif ( WP_ENV == 'production' ) {
	define('DB_PASSWORD', 'the_real_password_which_is_a_very_long_and_random_string');
}

This wp-config.php file is now safe to be used on the remote production server or on your local development server.

One note, we didn’t set the WP_SITEURL and WP_HOME on the production server instead using the values in the database.  But if we moved a site from one domain to another we could do so.

If you have any questions, feel free to ask me in the comments.

Related posts:

1. How to fix WordPress automatic upgrades and plugin installs on XAMPP If you’ve ever had problems with WordPress automatic updates...
2. [JRuby on Rails on GAE/J] how-to put rubygems into a jar file to get around file limitations GAE (Google App Engine) has a limit number to the...
3. How To Use Email To Create And Reply To Forums on Redmine We’re using Redmine not only as a BTS (Bug Tracking...

Related posts brought to you by Yet Another Related Posts Plugin.

Google at Tully's

Like we discussed at recent episodes of messa.tv, Google is trying to become #1 player of Japanese search engine market. To achieve the aim, Google is spending huge amount of money for marketing campaigns on TV and anywhere around us.

Even here at Tully’s Coffee which is one of Starbucks clones in Japan, I found a small card by Google. It says “Connect to Free Wi-Fi here to see Google’s Search Story”. Sounds nice because it’s quite hard to find free Wi-Fi spots in Japan but don’t have excessive expectations for this campaign. ONLY 30min a day you can use it!

Partner companies of this campaign are Wi-Fi provider NTT and cafes like Tully’s. I know they don’t want to open the Wi-Fi for a long time but the only 30min limit gives me a negative impression. I’m always thinking that Google can give us deep impressions all the time.

Related posts:

1. 2 Keyboard Shortcuts You Must Know For Google Wave We’re using Google Wave for our internal text meetings. And...

Related posts brought to you by Yet Another Related Posts Plugin.

So it’s convenient to set  up a mouse-less environment.
I know many people use [Ctrl+P][Ctrl+C][Ctrl+V] and so on.
Some people uses 「Alt＋Tab」「Ctrl＋Tab」「Windows button＋D」as well.

Today I want to show you 5 ways to set-up a mouse-less environment that aren’t as well known.

1. Go to top-right search box(when browsing like Firefox, IE)
2. Go to address area (when browsing like Firefox, IE)
3. Call up the right mouse menu without mouse
4. Make scrolling smoother
5. Enable clicking links with keyboard

1. Have a look at the screenshot below

You can move to search box with the shortcut [Ctrl+E].

And in addition, you can choose the object for search with [Ctrl+↓]
You can use this with Firefox and IE as well.

2. Have a look at the screenshot.

You can move to address bar and attach the copied URL by clicking [Ctrl＋L]
You can use with with Firefox and IE, and Chrome as well.

3, Show the context menu, so-called right click which we use a lot.

The shortcut key for this one is [Shift+F10]
With this shortcut, you will be able to change the way to show the pics,
the way to make folders and so on without mouse.

4. Enable smooth scroll with space key (like Livedoor Reader)
You can do this using a Greasemonkey script.
http://d.hatena.ne.jp/nagaton/20060831/1156993415
(Sorry for it’s in Japanese)

5.  Click links without using the mouse.
Maybe the most useful tip when browsing, to enable this functionality you need to install an extension called “mouseless browsing”
http://journal.mycom.co.jp/articles/2009/04/13/mouselessbrowsing/index.html

Try out any of the above if they interest you!  By the way, one of the main reasons why I have been using Firefox is because of the number of extensions/add-ons it has.
But last week, Google Chrome also started to open up development of extension. http://journal.mycom.co.jp/news/2009/12/09/014/?rt=na
They have already covered a wide range of must-have extensions and it is expected that the number of extensions are going to increase so quickly.
I’m looking forward to the browser battle between Firefox and Chrome heating up ;)

Oh and if you have any other tips for a mouse-less working environment, tell us about it in the comments.  Thanks!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

messa.tv has been published since April 2006, and then became an English program since beginning of 2009. But finally we’ll re-start the Japanese show!

The Japanese version of messa.tv might help you if you’re interested in Japanese tech trends, culture and business. Or if you’re studying Japanese, you can watch and learn real live Japanese!

Now our English show have lots of visitors from all around the world and a few days ago we got a guest from Greece. He said he is a fan of our show!

Chris from Greece visit us

Anyway, we’re always welcome to your feedbacks or comments on our blogs, Twitter.

See you at the show soon!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

curvycorners

This one can show beautiful rounded corners but can be a bit heavy to load each time. I’m planning to replace it with a lighter and faster one but let me describe how to use “curvyCorners”.

1. Download it form here and load it at a header area of HTML files like this:

<script type="text/javascript" src="curvycorners.js"></script>

2. Next, create blocks with these class attributes:

Round top corners

<div class="myboxtop">
Round top corners. <br />
Round top corners. <br />
Round top corners. <br />
</div>

Round bottom corners

<div class="myboxbottom">
Round bottom corners. <br />
Round bottom corners. <br />
Round bottom corners. <br />
</div>

Round all corners

<div class="myboxall">
Round all corners. <br />
Round all corners. <br />
Round all corners. <br />
</div>

Then move to the js file.

3. Configure like below:

Round 10px of top corners

settingsTop = {
 tl: { radius: 10 },
 tr: { radius: 10 },
 bl: { radius: 0 },
 br: { radius: 0 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}

Round 10px of bottom corners

settingsBottom = {
 tl: { radius: 0 },
 tr: { radius: 0 },
 bl: { radius: 10 },
 br: { radius: 10 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}

Round 10px of all corners

settingsAll = {
 tl: { radius: 10 },
 tr: { radius: 10 },
 bl: { radius: 10 },
 br: { radius: 10 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}

[Note]
tl: top left
tr: top right
bl: bottom left
br: bottom right
antiAlias: Antialias (true or false)
autoPad: Margin (true or false)
validTags: curvyCorners applied tags (separated by commas)

4. Apply for classes

      myBoxObject = new curvyCorners(settingsTop, "myboxtop");
      myBoxObject.applyCornersToAll();

      myBoxObject = new curvyCorners(settingsBottom, "myboxbottom");
      myBoxObject.applyCornersToAll();

          myBoxObject = new curvyCorners(settingsAll, "myboxall");
      myBoxObject.applyCornersToAll();

That’s all!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.