So I decided to write my own function that would get the first paragraph from the post content to use it in the main index loop.

I place this in functions.php :-

if(!function_exists('get_the_content_first_paragraph')) :
function get_the_content_first_paragraph() {
    $content = get_the_content();
    $content = apply_filters('the_content', $content);
    $content = str_replace(']]>', ']]>', $content);
    $content_explode = explode("</p>", $content);

    $c = 0; $p = count($content_explode); $return_data = "";
    while($c < $p) {
        $test = strip_tags($content_explode[$c]);
        if($test != '') {
            $return_data = $return_data . $content_explode[$c] . "</p>\n";
            break;
        } else {
            $return_data = $return_data . $content_explode[$c] . "</p>\n";
        } $c++;
    }
    return $return_data;
}
endif;

The first part of the function gets the content of the post formats it and split all the paragraphs into an array.

    $content = get_the_content();
    $content = apply_filters('the_content', $content);
    $content = str_replace(']]>', ']]>', $content);
    $content_explode = explode("</p>", $content);

I wanted to get the first paragraph of the post, however sometimes I start my post with an image, if that’s the case then I want to get the image and the paragraph that comes after that. So the next part of the function goes through the array.

It first strips the HTML tags in the array item. If the first array item is an image, it’ll have the tag, and therefore returns empty, because we striped the HTML tag. In that case the function will return the first and the second paragraph from the post.

    $c = 0; $p = count($content_explode); $return_data = "";
    while($c < $p) {
        $test = strip_tags($content_explode[$c]);
        if($test != '') {
            $return_data = $return_data . $content_explode[$c] . "</p>\n";
            break;
        } else {
            $return_data = $return_data . $content_explode[$c] . "</p>\n";
        } $c++;
    }
    return $return_data;

If say you want to only return a single text of the first paragraph, and skips any image or embed codes, just remove the ‘else’ statement.

On the loop sometimes I due want to show more than just a single paragraph, when I have the <!--more--> tag on the post, so here is what I do on the loop :-

<?php
    if($pos = strpos($post->post_content, '<!--more-->')) :
        the_content(__(''));
    else :
        echo get_the_content_first_paragraph();
    endif;
?>

There are probably easier ways of doing this and I’m just to dumb to see it. If you due know any share in on the comments.

I’ve also decided to adopt html5boilerplate, not entirely just most of the basic ideas and snippets from that project. I even keep the bright pink highlighting color, go ahead highlight my text. Since I love doing my CSS with Sass now, I use this little project on Github, HTML5-Boilerplate-with-Sass.

I spend a large amount of time arguing with myself while doing this theme. Should I use a light border to separate items, or just a big fat white-space. You can see which route I took.

Here are some snapshots of how this website looks previously:-

I’ve also decided to share the code. The theme code are on a public Github repo.

If there is not trending venue, use the form to jump to a certain location. List of trending venues are displayed once you are at a location where there are a lot of checkins.

Some technology and API used for this project are, Foursquare API, Google Map API v3, Google Map Utility Library MarkerClusterer. Codes are up on Github, if you want to have a look.

Does this thing have legs? probably not.

Secretly I have a crush on the Metro UI design that Microsoft is adopting on all of it’s new OS devices. Even though on the Wikipedia page it says that the Metro principles were use as early as Microsoft Encrata 95, but I think it was the Zune that Metro makes its first appearance. And now you can see the user interface on Windows Phone 7.

The thought process behind Metro is as if the Microsoft designer folks are saying, “Look at what Apple is doing, we do the opposite.”

Apple has rounded corners in their icons and stuff, Microsoft’s Metro have sharp edges. Apple’s iOS is about icons of apps, Microsoft’s Metro is about tiles.

Metro to me is more then just a theme you slap on an OS or software. It’s a design philosophy.

“Metro is our design language. We call it metro because it is modern and clean. It is fast and in motion. It’s about content and typography. And it’s entirely authentic.”

Some people says that they are annoyed with the whole lack of UI in Metro, but it is in fact the lack of ‘UI’ that I love. There are few core principles that defines the Microsoft Metro Language, and I’ll try to go through here pretending that I know a thing or two about design.

Content not chrome

It is always the case that content is something that lives inside a UI wrapper. In Metro, most of the time the content itself is the UI.

Take an example of a dialog box. A dialog box only needs a title and the content message. In most Operating System either Windows 7, Mac OS X or Ubuntu, their dialog box have the content in the content field and the title in the title field. There is a border there separates the title and the content. Both the title sits inside a window container. The window needs to have some border on each sides. To make the window look like it is in focus there is some drop shadow on each sides. See how complicated it is to have a dialog box?

In Metro usually the case is that a dialog box have title and content. No chrome, just content. No gradient, just flat colors. I like the fierce reduction of unnecessary elements that Metro subscribes to. In Metro, typography is UI and so does white-spaces.

Typography

The title fonts usually is a little bit bigger then the content. Metro plays heavily on typography. In Metro they celebrate typography. In Metro typography is not just fonts, it is the UI. Typography done right can be beautiful. Not only that it’s attractive, it is also functional because it telling you something, you are reading from it. The right balance of weight and positioning can create a visual hierarchy. Text is not just text, text is UI.

Motion

This is one principles that Metro play on well. An OS needs to be fast and responsive. The key word here is responsive, because a responsive UI can give the illusion that the OS is fast, even though it might not be as fast as one would like. In metro, motions plays an important role but it’s always the case of just enough motion and not too much motion. You would want the dialog box to slides into place and stays there. You wouldn’t what to chase after a dialog box now would you?

Conclusion

Those were just some of the core principles of Metro that I really like. Metro lets you focus on the primary task and lets you do a lot with very little. I also like the full bleed canvas where it is as if the application is one big piece of canvas and only a section that is related to what you want to do are in focus.

I like how in Metro is about presenting you with information that you need so you can glance through. Metro wants to give you what you need and stay out of the way.

Metro is currently taking shape on Windows 8. Based on what I’ve seen in the Developer Preview version of Windows 8, there is still a ‘desktop’ you can go to, I wish they would eliminate this all together. The whole ‘desktop’ and ‘window’ metaphor is so 90s.

This whole post sort of reads like a love letter to Metro, can you imagine that? A self proclaim Apple fan writing a love letter to something Microsoft related.

Over the long Raya holiday, pet owners had send their cats to Petknode while they and their family went to their hometown to celebrate the Raya festive with the rest of the extended family. It’s a long known Raya ‘balik kampung’ tradition.

I am not to familiar with Petknode, but I’ve heard of them before. I’ve heard good things about them before, from those who had send their pet cats to them. So this whole incident came as a shock to some.

Petknode had took in over 200 cats and those cats were left in their cages for over 9 days or so with out any supervision. No food or water for the cats. Even prisoners have their daily meals, it’s as if the cats were left there to,… die.

Most of the animal lovers are still in rage over what had happened. I put the rage and anger aside and try to think of what or why Petknode did what they did. Nobody is pure evil, there is always some sort of reasoning behind it.

I can believe that they just leave the cats for over a week and thought that things would be fine when the owners come to pick their pets later after the holiday was over.

My first thought is that they are running a con job. Take the money and leave. However, to my knowledge Petknode have been operating for quite sometime and there were no complaints before this.

Can you imagine that over 200 cats were send by their owner to Petknode. This cat boarding service is a very lucrative business in a long term. Why would the Petknode owners jeopardize what seems to be a very profitable lucrative long term business for a making just a little quick buck? Are they that short sighted?

If this were a con job, then they the Petknode owners are the stupidest con men ever. They should already disappear, out of the country type of disappear, they should have already run away with the few bucks they had made over the Raya promotion. Yet they are still here, the police are able to get them at their house?

That does not make sense.

My second thought is that they had took in more cats than they can handle. This is obviously so. Maybe they had hire some illegal foreign workers to take care of the basic necessities of the cats while they were gone for the Raya holiday. The illegal foreign workers then had run away for some reason leaving the cats just like that.

But, if that was the case, didn’t they as the employers ever called and check? Can’t they come back if something were wrong?

That does not make sense either.

Third thought came to mind. Maybe they, the Petknode owner were running from someone? Maybe they had loaned some money from loan sharks and were unable to pay them back. They thought that by doing a Raya promotion and taking in 200 cats would be enough to save their ass, but it is not enough. It always isn’t enough when dealing with loan sharks. Fear of what the loan sharks would do to them they run and leave the cats under their care behind.

I know that people do make unreasonable decisions when pressured by loan sharks. Fear of their life, or fear of the public humiliation they might face with the loan sharks. It’s better to get sued by pet owners then to face the loan sharks? Who knows…

We will never know what or why and I am not saying that I know either. I am not trying to justified their action either. This is just me trying to make some sense over what had happen with the Petknode fiasco.

Introduction

I these days everyone is armed with mobile phones equipped with cameras. Either we realize it or not we are constantly putting up stuff on the Internet, Twitter, Facebook and so one. These days, the moment something happens the photos are already on the net.

Mainstream news media outlet curate what their publishing. Most of the time they are one sided. Alternative media outlet is also no different, just that they lean more on the other side.

News outlet, both mainstream and the so called alternative media outlet chooses what to show and what not to show. They choose what is news and what is not. While mainstream media demonize the protestors, the alternative media demonize the authority.

Jejak Kicau, as I see it, is un-curated, there is not editors. Tweets and pictures comes in as they are available. I don’t choose what to show and what not to show. As long as the app thinks that it’s related (via looking at the words and hashtag #bersih in this case) it shows them.

It’s raw, not edited, and not processed.

Here are some technical details:-

Codeigniter Framework

The reason I choose this is more of a personal preference then a technical one. I’ve been doing PHP/MySQL for quite sometime with Codeigniter. It just makes things faster for me. I’ve nothing against Ruby, Python or even Node.js

Codeigniter Twitter Library

I use Elliot Haughin’s Twitter Codeigniter Library. While write one when there is a perfectly nice working library that reads Twitter API.

Currently Jejak Kicau pulls searched tweets in an interval time. In the future I am planing to use the Twitter Streaming API if possible.

Google Map Cluster Marker

I suggest you take a look at Google Map JavaScript v3 API, it’s super easy. Each tweets with a geo location information gets a marker on the Google Map. Now when there are a lot of tweets in one place, the map gets crowded with markers. Fortunately Google Map API comes with a Marker Cluster API. It group nearby markers.

Photos from Twitter

Each tweets coming in there is a function that scrubs it for links to photo uploading websites. Currently it only aware of three, Lockerz.com, yFrog.com and Twitpic.com. This three image sharing service offers ways to get a thumbnail pic from the url.

For photos from Lockerz.com (I think formally it was Plixi):-

http://api.plixi.com/api/tpapi.svc/imagefromurl?url=[the pic url]&size=small

For photos from yFrog, you can use just add ‘:small’ at the end of the URL:-

http://yfrog.com/ke4xddj:small

For Twitpic you need to get the twitpic id code from the url and use this url:-

http://twitpic.com/show/thumb/[the twitpic id]

Future enhancement

1) To resolved shorten url to it’s full form. Read the title from the header and display that instead of the shorten link like what it is now.

2) Use Twitter Streaming API if possible.

3) Smoother animations when new tweets coming in and photos. The ajax call are rough at the moment.

4) Put the codes up on a public repository.

Wirawan Web is my latest project with Zaidel Baharuddin. We started this webzine/weblogs for web geeks and Internet freaks. We are keeping it web/internet related with topics ranging from silly things like Twitter trending hashtags and viral videos to a more serious stuff like Interent censorships and online privacy.

It is not yet a month since it was first launched with the first post, yet it seems that traffic is doing good. I guess we were lucky, thanks to the MCMC letter that we posted and the whole censorship issue. We thought we would have a month worth of web memes and viral videos before we touch on more serious stuff, guess not.

Check out WirawanWeb.com if you have not yet.