The name Batu Pahat can be translated as “chiselled rock” in English. Popular belief among the town people regarding the origin of the name is that it was taken from a chiselled rock well located at the mouth of Batu Pahat River, believed to be dug by Siamese troops after a failed attack on Malacca. Another name of the town, which is Bandar Penggaram, literally means the town of salt-makers. The name is less often used by the locals, except when differentiating the Batu Pahat town and the Batu Pahat district in a context.

The most significant and symbolic landmark of this small town is the fountain with a sculpture depicting a pair of floating hands chiselling a rock in the town square, Dataran Penggaram. Families come to the town square to have picnics and other family activities during evenings and weekend nights.

Batu Pahat contributes the most to textile production of Malaysia, with more than 300 textile and garment factories established here. Other than that, food processing, electronics, and furniture industries have also established prominent existence in the city.

Some of the refurbished pre-WWII shophouses in Batu Pahat.

Some of the refurbished pre-WWII shophouses in Batu Pahat. The wall sculpture are unique for each shophouse.
I was born in Batu Pahat town, was brought up and educated here during my childhood and adolescence. Then I left for Perak, a northern state in Peninsular Malaysia for university for about five years. After that, I went straight to Kuala Lumpur to work for about two years. During these seven years that I am not really living in Batu Pahat, the little town has grown a lot. Several shopping malls and hypermarkets have flourished within a few years with the third town centre established.

Having travelled and lived in different places in Malaysia all these years, there are no other places that I love as much as my beloved hometown Batu Pahat – the perfect ratio of blend between serenity and modernisation that I cannot find in another place.

Images courtesy of Achmal.

I enjoy the air and the climate in Batu Pahat. Whenever I step down from the long-distance coach, I feel relived again breathing the air with the scent of my hometown. I enjoy driving in the town centre of Batu Pahat. Everyone drives at a decent speed but not overly fast. The pace of life is just nice for me.

Although Batu Pahat is not a big city like Kuala Lumpur or Johor Bahru, I never have trouble getting something I need in Batu Pahat. Food and household supplies are definitely cheaper than those in big cities due to the standard of living. Electronics and IT products are more or less at the same price as those in the cities as well. Although we do not get big-scale concerts or exhibitions here, the other things are pretty much comparable to those in Kuala Lumpur or Johor Bahru. If there is a thing that I would complain about Batu Pahat is that whenever there is new high speed broadband and cellular network or technology, Batu Pahat usually only gets them after they have been rolled out for a few years in the big cities.

Nevertheless, Batu Pahat is still a great place to settle down to me. Urban development has destroyed much of the tranquillity in big cities. Even so, I can’t live without a good amount of urbanisation. My beloved hometown Batu Pahat has the ‘just nice’ amount of both to me, and I selfishly hope it stays at the size it is now so that the serenity can be retained.

The post A City of Our Own Part IV: Batu Pahat appeared first on Stampede: the strategic design & technology company.

Disclaimer: This may not be the only nor the best way for anyone to achieve the same presentation, but I intend to share it as a reference for interested people.

There are several reasons I usually choose to use the Sticky Post feature instead of implementing another custom field or tag or category etc. First, I notice the native WordPress Sticky Post feature is not in use in most of the blogs (note: personal observation), and I think this native feature should be more well utilized.

Second, I think the current way presenting Sticky Posts in WordPress takes away too much attention from the worthy latest posts because Sticky Posts take up the place before the latest posts at the same content area. A separate area to display the Sticky Posts such as the post slider area is a good way to give attention to some ‘selected’ posts while not attracting too much attention away from the latest posts.

Third, implementing the post slider using a tag or a category is more like a hack because tags and categories are supposed to describe the contents of the blog post. Sometimes there may be a need to present contents with a certain tag or category differently (e.g. tag templates or category templates), but the main point of using tags and categories should be to describe the blog post contents, not merely as a way to differentiate the way blog posts are presented.

Enough said. Let’s get into how I do it.

Let’s say I have these blog posts and several of them are made ‘Stick Posts’:

In the default Twenty Ten theme, each of the Sticky Posts appears in a box in a light-blue background with a thick black top border line in the home page of the blog, in the main blog posts area above all most recent posts:

MooTools and noobSlide

Since in this post, I’m going to use noobSlide as our content slider, we need to include MooTools JavaScript library. Go to the functions.php file in the template and add the following codes at the bottommost.

function register_custom_js() {
    wp_register_script( 'mootools', 'http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js', '1.3.0' );
    wp_register_script( 'noobslide', get_bloginfo('template_directory') . '/_class.noobSlide.packed.js' , array( 'mootools' ) );
}
add_action( 'init', 'register_custom_js' );

function enqueue_noobslide() {
    if ( is_home() ) { // our slider only appear in the home page, so load the script only in home page
        wp_enqueue_script( 'noobslide' );
    }
}    
add_action( 'wp_print_scripts', 'enqueue_noobslide' );

Post Thumbnail Support

In this tutorial, I’m going to use post thumbnails in my slider. If your theme has not yet added the feature, you can add it using the following codes in your functions.php:

function custom_theme_setup() {
    add_theme_support( 'post_thumbnails' );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );

Also make sure your Sticky Posts has set the ‘Featured Image’ (BTW, WordPress should standardize the use of name).

Custom ‘Read more’ Link

In the default Twenty Ten theme, a custom “Read more” link is used. I’m going to change it to use my own customized “Read more” link so I can place a class for styling.
I will comment out this line in the Twenty Ten functions.php file:

//add_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' );

Then, I will add the following to the same file:

function custom_excerpt_with_more( $excerpt ) {
    if ( has_excerpt() && ! is_attachment() ) {
        global $post;
        return $excerpt . '<p class="slider-more"><a href="' . get_permalink( $post->ID ) . '">Continue reading</a></p>';
    }
    return $excerpt;
}
add_filter( 'get_the_excerpt', 'custom_excerpt_with_more' );

function custom_excerpt_more( $more ) {
    global $post;
    return '<p class="slider-more"><a href="' . get_permalink( $post->ID ) . '">Continue reading</a></p>';
}
add_filter( 'excerpt_more', 'custom_excerpt_more' );

custom_excerpt_with_more() function is for automatic excerpts or user-specified excerpts with read-more tag. custom_excerpt_more() is for hand-crafted excerpts.

CSS and JavaScript

Then, we add the custom CSS and JavaScript codes in functions.php to make the theme serve them when we are in the home page where the slider will appear.

function custom_slider_css_js() {
    if ( is_home() ) { // only in home page
?>
<style type="text/css">
#slider{border:1px solid #ccc;width:640px;position:relative;overflow:hidden;height:213px;margin-bottom:20px;}
#mask{position:absolute;height:213px;}
.items{float:left;height:213px;width:640px;position:relative;}
.items .wp-post-image {float:left;}
.info{width:320px;float:left;font-family:Arial, Helvetica, sans-serif;}
#content .info h2{font-size:20px;font-weight:bold;color:#1c3f95;margin:10px 10px 15px 10px;}
#content .info p{font-size:11px;color:#1c3f95;line-height:16px;margin:10px;}
.info a{font-size:10px;padding:5px 7px;background:#e1e1e1;text-decoration:none;text-transform:uppercase;font-weight:bold;color:#1c3f95;}
.info a:hover{color:#ffffff;background:#1c3f95;}
#slider .handle{position:absolute;bottom:0;right:5px;line-height:10px;text-align:center;font-size:25px;font-weight:bold;}
.handle a{color:#ccc;height:20px;width:20px;display:inline-block;cursor:pointer;}
.handle .active{color:#1c3f95;}
.handle a:hover{color:#1c9f65;}
</style>
<script type="text/javascript">
/*<![CDATA[*/
window.addEvent('domready',function(){
    var nS8 = new noobSlide({
        box: $('mask'),
        items: $$('#mask .items'),
        size: 640,
        autoPlay: true,
        interval:8000,
        handles: $$('.handle a'),
        onWalk: function(currentItem,currentHandle){
            $$(this.handles).removeClass('active');
            $$(currentHandle).addClass('active');
        }
    });
    var handle = $$('.handle a');
    handle.each(function(el,i){el.addEvent('click',nS8.walk.bind(nS8,[i,true]));});
});
/*]]>*/
</script>
<?php
    }
}
add_action('wp_head', 'custom_slider_css_js' );

WordPress Theme Modification

Next, go to the theme template file that display the Loop in the home page, in this case, it is the loop.php file in the Twenty Ten theme. Place the cursor right before the Loop area and we can start putting our codes for the slider.

<?php 
if ( is_home() ):
    $sticky = get_option('sticky_posts');
    $slider = new wp_query( array( 'post__in' => $sticky ) );
    ?>
    <?php if ($slider->have_posts()): $count = 0; ?>
        <div id="slider">
            <div id="mask">
                <?php while ( $slider->have_posts() ): $slider->the_post(); $count++; ?>
                    <div class="items">
                        <?php the_post_thumbnail( array( 320, 213 ) ); ?>
                        <div class="info">
                            <h2><?php the_title(); ?></h2>
                            <?php the_excerpt(); ?>
                        </div>
                    </div>
                <?php endwhile; ?>
            </div>
            <div class="handle">
                <?php for ($count; $count > 0; $count--): ?>
                    <a>&bull;</a>
                <?php endfor; ?>
            </div>
        </div>
    <?php endif; ?>
<?php endif; ?>

At this point of time, when you go to the home page of the blog, you will see the slider is up and running already and we are almost done:

But wait, we are not done yet. Notice the main blog posts area still have the Sticky Posts? We need to get rid of them to return the attention taken away from the latest posts. To accomplish that, we will add the following codes right after our content slider codes:

<?php 
if ( is_home() ):
    $sticky = get_option('sticky_posts');
    $slider = new wp_query( array( 'post__in' => $sticky ) );
    ?>
    <?php if ($slider->have_posts()): $count = 0; ?>
        <div id="slider">
            <div id="mask">
                <?php while ( $slider->have_posts() ): $slider->the_post(); $count++; ?>
                    <div class="items">
                        <?php the_post_thumbnail( array( 320, 213 ) ); ?>
                        <div class="info">
                            <h2><?php the_title(); ?></h2>
                            <?php the_excerpt(); ?>
                        </div>
                    </div>
                <?php endwhile; ?>
            </div>
            <div class="handle">
                <?php for ($count; $count > 0; $count--): ?>
                    <a>&bull;</a>
                <?php endfor; ?>
            </div>
        </div>
    <?php endif; ?>

    <?php
    $args = array_merge( $wp_query->query, array( 'post__not_in' => $sticky ) );
    query_posts( $args );
    ?>
	
<?php endif; ?>

All Done!

Now enjoy your fully functional content slider. =)

Images in the sample blog courtesy of phalinn.

The post Sticky Post Slider in WordPress without a Plugin appeared first on Stampede: the strategic design & technology company.

Maybank2u – Malaysian’s favourite online banking service

I have always been hoping that Malaysian websites would become better at adopting web technologies and employing smarter user experience design. I must say that despite being the most visited Malaysian website, Maybank2u does not take lead in both areas. In terms of design, it’s probably how a banking website should look, though I have seen better ones. Plus, I’m not in a good position to comment as I’m no designer.

Flashback…

Personally, I think the navigation structure is somewhat unintuitive. I remember the first time I logged into the website some four years ago and was overwhelmed by the Dashboard. There was no visual focus on banking functions useful to me. I became distracted and felt a little lost.

Does your OS come with a digital clock? If not you can use ours!
So I decided to explore one banking options after another. The first one said, quite naturally, ‘Accounts & Banking’. Clicking the link took me to a page with a secondary navigation menu on left. But hold on, what’s that about ‘Bill Payment’? I thought I saw something about bills in the homepage?

We have another link for you to pay your bill, in case the first link is, erm, down.

I then clicked the back button in my browser. It didn’t take me to the previous page. Instead it says, due to security, I was not allowed to use the back button at all and the system promptly logged me out. I felt frustrated and confused – how could the back button possible cause any security issues? (Update: It appears that the website now supports use of back button, notwithstanding their initial security concerns. I didn’t realize it until I test it again in preparation of this post.) I have tried another online banking websites before, but they let me browse the way I do, back button and all.

So I logged in again. And I saw that the homepage has a link that reads ‘Bills & Statements’ (although they meant different things). I was puzzled by the logic used by the UI designer when designing the navigation structure. When I clicked on the link, it took me to a page with a totally different main navigation structure. While the style looked the same, the main navigation structure was so out of touch that I’m certain they were built with the only integration to each other being the link.

You must click on ‘Online Banking’ first before you log out, because… you are not on an online banking site now?
I felt uncomfortable browsing a banking website patched up like this. So I decided to go back to the previous section I landed on when I first logged in, to get some bearing. Again, forgetting about the ‘security’ reason for disabling the usage of the back button in browser, I clicked on it and I was logged out again.

No, it wasn’t like this (this is when the user logs out on his own). I remembered clearly that they said I was not allowed to use the back button in my browser because it was not secure.

I couldn’t get used to how I need to change my browsing habits and got fed up by it, so I decided to discontinue exploring any further until I absolutely need to use its online banking service.

What Went Wrong?

I think what went wrong for me was:

• Confusing navigation structure
• Lack of visual cue on things ought to be focused on
• Enforcement of browsing habits change

Four Years Later…

It has been four years since I started using Maybank2u and I realized that  the only thing they have improved is the support of  the cautionary back button (duh). I don’t know when the change was made because since my first or second visit, I have made myself adapt to their no-back button policy until today (damn, I feel so stupid).

Maybank2u is not the only Malaysian banking website that causes my itch, but I will save the rest for another day. 😉

P.S.:

I tried to access Maybank2u today by the address maybank2u.com.my and it didn’t work. My gut  feeling  told me it’s probably caused by one of the most common issues with Malaysian websites—the www and Only www Syndrome.

So I tried www.maybank2u.com.my. Voila, it works, and I’m right about the www and Only www Syndrome. 😉

We vow not to serve any visitors trying to reach us without ‘www’ in the web address.

The post My Maybank2u Experience appeared first on Stampede: the strategic design & technology company.