WordPress 3.3: It looks great!

WordPress team just announced that the new version of WordPress is available. It’s WordPress 3.3 “Sonny”. Matt posted some notes about this release. I have WordPress for multi-site installation, and since the previous upgrade went smoothly — except some minor issues — I had no reasons not to upgrade. It was easy, just took few seconds.

I like the way WordPress greets me with useful information. You will get information about new features. You know what your WordPress installation can do. Nice.

I need some more steps to upgrade since my blog is a network-blog. It took only few extra clicks. When I go to post creation page, I got a tiny  tooltip telling an information about what I can get from this installation. The media uploader is improved now. It’s drag-and-drop now. If you have problem, you can still use the basic uploader. And, it also supports additional files (.rar and .7z).

This release is also great for those who wants to start blogging using WordPress because “Help” provides more details about the current page — yes, it’s depending on the context.

If you want to read all details about this WordPress 3.3, go to WordPress Codex. For me, these are some to highlight:

  • Drag-and-Drop Media Uploader
  • Post-update About screen — After upgrading, you know what the new features are.
  • When inserting a Gallery to be ordered by Date/Time use the post_date field for ordering rather than ID

 

Missing WordPress’ Jetpack Statistics Data

I have been using WordPress Stats plugin for long time. And when Jetpack  was introduced, I had it installed right away. Everything works great. What I like about WordPress statistics data — from this plugin — is that it can give me some useful insight about my blog traffic. It’s not as detailed as Google Analytics, of course. But, it’s useful.

Yesterday, I made some modifications on the blog theme. I was not sure whether this problem has something to do with the issue or not. But, when I logged in to my WordPress dashboard and hit the Stats Page I found an error. Something regarding the invalid token.

I disabled Jetpack plugin, and had it enabled again. I did it using the standard procedure: install, connect to WorPress.com account, and configure.

All works. But, not the statistics. All statistics are gone.

I have some statistic profiles under a single WordPress.com account. I checked the other sites, and they’re all working. I’m still looking for a solution for this. I feel that all the statistics are stored at WordPress’ server. I think I will try to contact them. For now, I think I will use Google Analytics data and server log.

Design: Indonesia Airlines Websites

I’m not a frequent flyer, but I sometime visited multiple Indonesia airlines websites just to get some information, especially for the ticket prices. I sometime try the navigation, or test the website features. By this, I want to learn how those websites are designed.

So, here are some screenshots of Indonesia airlines websites. I took the screenshots using the same conditions: Mozilla Firefox Browsers with the same screen dimension. From the screenshots you can also see what elements are being displayed above the fold — on my screen, of course. The screenshots are displayed not in a particular order.

Continue reading »

Floating CSS menu on YouTube Flash Videos

I currently involve in a website project that put videos as its primary contents. My involvement is not primary on the design. I’m just helping a little. What I like from the process is to find solution. One of the problem is on the navigation menu. It’s very common to have navigation with sub-menus. Without having special objects like flash, everything should be under control. But, not this time.

The problem

When embedding a video from YouTube (in this case, using the iframe method), the navigation is broken because it sits behind the video. The same result with the old embed code. See the screenshot below:

It’s wrong. The menu should be displayed above the video. It should be like the image below:

So, is there a simple way to fix this problem? Yes.

The solution

The solution is pretty easy. You only need to add a parameter for the embed code. It’s wmode=transparent. I will use an example here. This is an embed code from Serabi Solo video at YouTube:

<iframe width="560" height="349" src="http://www.youtube.com/embed/Gi-lO8OMUns" frameborder="0" allowfullscreen></iframe>

The code above should me modified by adding wmode=transparent parameter. The final code will be like this:

<iframe width="560" height="349" src="http://www.youtube.com/embed/Gi-lO8OMUns?wmode=transparent" frameborder="0" allowfullscreen></iframe>

It’s easy, right? But, what if you want to use the old embed code? You can fix the problem using a same method. For example, this is YouTube’s old embed code from the same video:

<object width="560" height="349">
<param name="movie" value="http://www.youtube.com/v/Gi-lO8OMUns?version=3&amp;hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Gi-lO8OMUns?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

You need to add a parameter. Just add <param name="wmode" value="transparent" />.

The final code will be like this:

<object width="560" height="349">
<param name="movie" value="http://www.youtube.com/v/Gi-lO8OMUns?version=3&amp;hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="wmode" value="transparent" />
<embed src="http://www.youtube.com/v/Gi-lO8OMUns?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Have fun!

Google Plus Sticky Header’s User Styles

Pujiono shared a wishlist to have Google Plus‘ header displayed in sticky style. Since Google does not offer this feature, can we have this feature using a simple trick? The answer is: yes.

There is a small extension of User Styles called ‘Google Plus Sticky Common Header’. I have applied this simple style to my browsers (I currently use Mozilla Firefox and Google Chrome), and it works really well. If you want to install it, first you need to get the extension.

Voila!

Five Simple Steps Books

I think I want these books.

And, all books in collection including:

  • A Practical Guide to Designing Grid Systems for the Web by Mark Boulton
  • A Practical Guide to Designing the Invisible by Robert Mills
  • A Practical Guide to Strategic User Experience by Leisa Reichelt
  • Creating Web Content by Relly Annett-Baker
  • Designing Web App Success by Dan Zambonini

SSH login without password using OS X

KeysLately, I need to deal with more login combinations. And, most of them are about logging in to server via SSH. I decided to create a simple mechanism rather than having some login combinations written somewhere. Why not remember those logins? Well, too many things to remember.

So, I tried to create an automated system to servers and found this useful tutorial. I tried it on my Mac OS X Snow Leopard, and it works. I put it here for my reference:

  • From Terminal, run: ssh-keygen -t rsa
  • Copy/add ~/.ssh/authorized_keys:
    • If exist:  cat ~/.ssh/id_rsa.pub | ssh username@example.com "cat - >> ~/.ssh/authorized_keys"
    • If not exist: scp ~/.ssh/id_rsa.pub username@example.com:~/.ssh/authorized_keys

Done!

Moving a WordPress-powered site to another domain: The Permalink

Yesterday, I needed to move a self-hosted WordPress site to another domain. The process was easy because it’s like copying all files, edit the configuration file and editing internal links in all posts. All process only took less than 15 minutes. But, that’s not the only thing. One of the important things needed is to maintain the article links — known as “permanent link”.

This is important because I don’t want to send the visitors coming from other sources (links in blog posts, shared link on Twitter or Facebook) to missing pages. It’s called “permanent link”, right? So, having the permanent link broken is not a good idea.

I came up with a simple solution: using .htacess. After moving all files and checking all configurations I put these lines in the .htaccess file:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^.*olddomain\.com$ [NC]
RewriteRule ^(.*)$ http://newdomain.com/$1 [R=301,L]

So, when visitors visit olddomain.com/path/to/article/, the browsers will go automatically to newdomain.com/path/to/article/. Easy!

Are you using WordPress’ Post Formats feature?

If you have upgraded your WordPress installation to the latest version (right now, it’s Version 3.1), you can take advantage of its “Post Formats” feature. So, what is it anyway? WordPress Codex explains:

A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post. The Post Formats feature provides a standardized list of formats that are available to all themes that support the feature. Themes are not required to support every format on the list. New formats cannot be introduced by themes nor even plugins. The standardization of this list provides both compatibility between numerous themes and an avenue for external blogging tools to access to this feature in a consistent fashion. In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.

This feature might be useful if you want to “format” your blog posts, especially when you want to have different output format from your WordPress theme. Just think about Tumblr service. Tumblr is very easy to use when you want to make a kind of item collections. Sometime you want to embed a video, post a link, make a regular blog post, or even embed an audio file. If you want to create a new post, you will have something like this:

Continue reading »

Firefox 4: Graphic Drivers Problems

Yesterday, Firefox 4 was launched and lots of people — including me — are happy now. I heard about Firefox 4 features during last year Pesta Blogger in Jakarta. At that time, Mozilla Indonesia brought some people from the team (including the developer) to share some knowledge what could be expected from Mozilla Firefox 4. I was impressed with some features, even some features were already shipped with browser like Google Chrome. It was like, “Okey, that’s cool. But, {name one of the browsers here} already has that (feature)”.

After that, I have Firefox 4 Beta releases installed on my MacBook Pro. I had two version of Firefox browsers installed so I could jump between them when I want to see some changes. Everything was running great, including the upgrade processes. I haven’t found any problems so far. When I joined the Firefox 4 Twitter Party, I was happy.

Yahya Kurniawan's Twitter avatar

But, is everyone happy? No. Yahya Kurniawan, a friend from Jogjakarta, didn’t have his Firefox 4 run well. The issue was on the graphic drivers. Everything was fine — he had some browsers installed, anyway — until he had Firefox 4 installed. He’s still upset, I think. :)

Yes, Firefox confirmed that there are some bugs:

Firefox 4 automatically disables the hardware acceleration and WebGL features if the graphics driver on your system has bugs that cause Firefox to crash. You still get all the other benefits of Firefox 4, of course, just not the newest graphics features. But for best results, you need an up-to-date graphics driver that fixes those bugs.

You can also find some additional details at Benoit Jacob’s blog. So, if you happen finding the problem after installing Firefox 4, you might want to check this issue.

After using DISQUS for a month

A month ago, I migrated this blog commenting system to DISQUS and I notice that I got zero spam. Great! Previously, I used Akismet and it also worked great. Akismet can identify comment spams but the they still entered the system database.

I know, this blog doesn’t have a huge amount of traffic. But for a low traffic website, Akismet detected hundreds (and sometime thousands) of comment spams — according to the Akismet statistics in my blog. Not good. Thinking of using DISQUS for my other blogs I maintain.

Now, this blog is using DISQUS

I decided to switch the commenting system for this blog, from WordPress’ built-in commenting system feature to DISQUS. I was not sure which hosted service I wanted to use — DISQUS and Intense Debate came into consideration. Here are some reasons why I use external commenting system service right now:

  • DISQUS provides integration with other services like Twitter, Facebook and also OpenID. This features can be activated on WordPress-powered blogs using plugins. But, if DISQUS already has this feature, why not?
  • DISQUS also offers spam filter mechanism. I’m tired of spam. Akismet and TypePad Antispam plugin did a great job. Right now, I rely on DISQUS spam filter. And I have Akismet activated also.
  • I’m happy with how DISQUS display blog comments. Options can be managed directly from the dashboard.

The migration process was easy. It took less than 30 minutes to import all my comments (there were around 3,100 comments), and I got zero problem. It just worked.

He’s 15. And, he creates iTunes Instant

I’m enjoying Google Instant for its speed, suggestions and search results. If you like iTunes (and use its search feature) you might like iTunes Instant. This web-based search engine is developed by Stepen Ou, and he’s 15 now. :)

For the features, ideas and some stories behind this application, you can read its manifesto.

Things You Need to Know: Import VOX-powered Blog to Posterous

If you have heard  the news about VOX and you haven’t decided which service you want to use for your VOX blog, this post might be useful (I hope) for you. Since I use Posterous and it offers an import mechanism, I gave it a try. Let’s make this post short by having some key points. Anyway, you can stop reading this post if you want a brief process provided by Six Apart. This post is based on my personal observation.

I assume that you already have a Posterous account. If you don’t, you can sign up for free. Go to VOX-to-Posterous import page at http://posterous.com/switch/vox/, and enter your blog URL at VOX.

Follow the instruction, and you will have your posts imported. Finished? Almost. Your posts will be available from your Posterous dashboard page.

Continue reading »

How to Merge Two Blogs Using WordPress 3.0 Multi-Site Feature

Now, WordPress installation in this domain (orangescale.net) powers my other blog — in Bahasa Indonesia, using WordPress 3.0 Multi-Site feature. I decided to use this method so that I don’t have to manage two separated WordPress installation. In short: orangescale.net and thomas.or.id are now using a single WordPress installation, using orangescale.net as the primary blog.

This method works on my blog, but I don’t guarantee that you will have the exact process depending your own installation:

  • First, enable WordPress 3.0 Multi-Site feature
  • You should have access to modify domain DNS record. If your webhosting provider provide “Add-on domain” feature, it should work.
  • Create a new site under First Blog, you can use any address first.
  • Export contents from blog you want to move using WordPress export feature.
  • Import the export file you have to Second Blog.
  • Copy all media files from Second Blog to firstblog.com/wp-content/blogs.dir/files/X/ (Note: “X” is the Site ID).
  • Check all settings, escpecially the image locations in your posts. Later, the uploaded media files will use this path: seconddomain.com/files/path/to/image.jpg (the path might be different). If you have broken image path, check the settings and paths again.
  • Install WordPress MU Domain Mapping plugin. Follow the instruction. It’s easy.
  • Modify Second Blog DNS settings. Basically, you need to create an A record. Point your Second Blog domain to an IP address used by First Blog.
  • Check all plugins, blog settings, and permalink.
  • Enjoy!

I don’t know whether it’s an easy process or not, but here I want to show you that WordPress 3.0 Multi-Site feature can be useful. If you’re still comfortable to manage multiple blog installations, you don’t need to use this method.

It’s not a problem-free solution, of course. And it might be tricky sometimes. For example, about the plugin activation. Which plugins should be installed ‘globally’ or ‘locally’. Some plugins might work without any modifications. Here, I still have a plugin that does not work on my Second Blog. It works well on my primary blog, but not on the secondary. So far, I’m happy with the result.

Some Notes About Enabling Multi-Site option in WordPress 3.0

After upgrading my blog using WordPress 3.0, I was thinking of taking the opportunity to have the multi-site option. Previously, I played with WordPress Multi User. So, I think it would something I’m familiar with. If you’re not familiar with WordPress 3.0 features, you can check WordPress Codex first. You can find lots of useful information there. It’s a good place to start.

Currently, this blog is already using Multi-Site feature. The setup was easy, but I want to share few things I had during the ‘migration’. By default, this feature is disabled. So, you will see no settings/option under your WordPress Dashboard menus. If you’re ready to enable this feature, the first thing you need to do is to modify WordPress configuration file (wp-config.php). Add this line of code into wp-config.php:

define('WP_ALLOW_MULTISITE', true);

Continue reading »

WordPress 3.0 Error: Briefly unavailable for scheduled maintenance

I have upgraded this blog to WordPress 3.0 not long after it was available for download. Everything went without any major issues. I only use it without special hacks. One thing that makes this version a little bit different is that WordPress will bring your site offline if there is/are something not working. For example, when you’re upgrading your plugins. WordPress will temporarily bring your site under maintenance mode.

If all process were completed, you should be happy. Otherwise, you will need to do some extra works. WordPress will display this kind of error message: “Briefly unavailable for scheduled maintenance.” You will be locked out from your admin area. Your website will be inaccessible. Solution? Easy. You need to go to login to your webhosting server, and remove .maintenance file. You can find it in your blog folder — the same location with your wp-config.php.

YouTube Embed with New Player Design

In my previous post, I mentioned about YouTube’s new player design. Right now, it only works on YouTube site — not for videos embed externally. But, with a small modification on its player parameter, we can have the new player design for the video. Example? This is the original embed code:

<object width="560" height="340">
<param name="movie" value="http://www.youtube.com/v/XdQxtQFfxiM&hl=en_US&fs=1&rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/XdQxtQFfxiM&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed>
</object>

Now, look at the this line of code:

http://www.youtube.com/v/XdQxtQFfxiM&hl=en_US&fs=1&rel=0

To have the video inserted using a new player design, just put version=3 parameter there. So, it will be like this:

http://www.youtube.com/v/XdQxtQFfxiM&hl=en_US&fs=1&rel=0&version=3

You will have YouTube video displayed like what you see below. Of course, you can still modify out it looks using another player parameters.

I personally like the new player design. So, I modified all video codes used at my videoblog to have the new look. It didn’t take much time since I replaced the codes using search and replace plugin. :)

Facebook Like Box Shows 0 Fans?

I put Facebook Like Box at my videoblog site and so far it works really well. It shows how many Facebook users who “Like” my videoblog page. It worked really well, but not in the last few days. I thought it only happened to my site, but when I randomly visit some blogs using this Facebook Like Box, the same thing happened.

But, this ‘problem’ didn’t happen if the box is displayed using <iframe>. I use XFBML, so do the sites using the same code. Hmm… not sure what happen, but it’s not working really well right now. Any thoughts?

WordPress 3.0 Installation Process

Today, I tried the upcoming WordPress 3.0 distribution. It’s not yet released. I installed WordPress 3.0 Beta 2. I do this because I want to know whether I will have some WordPress installations upgraded or not, to find the possibilities and considerations.

The installation process is similar to the previous versions, but I think it’s improved now. After you fill in the database information, usually you will need to provide website name/title, and email address. The installation process will create “admin” as the first user, with randomly generated password. Here are some new fields during the installation process.

Better? Better. Previously, I usually modify the “admin” username directly from database manager — I’m using phpMyAdmin. Some people think that it’s a good practice to remove/change the default administrator login in the system. Now, you can have whatever username for the administrator.

Previously, the first thing you will need to do after you have your WordPress installed is changing the randomly generated password, since it’s not easy to remember. Setting up password during installation should be a time saver.

I haven’t dug any other features like the multi-site, custom menus, and other things offered in this distribution. Later.

Live search:

I'm @thomasarie on Twitter

Subscribe to RSS

Enter your email address and get recent updates sent to your email in the morning.

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Designed by Thomas Arie. Icon character by Fredy Sujono.