Hardian Nazief » geeks

YouWave Android: the easy way to run Android on your PC

dian — Thu, 03 Feb 2011 15:58:18 +0000

While looking for a demo of Angry Birds, I notice that Angry Birds for Android are free but alas, I don’t have an Android phone yet. So in the spirit of getting free stuff :) I try to install Android OS on my PC.

A lot of tutorial teaches how to install Android on PC but many of them are for developer, take a lot of numerous steps, needs Java to runs or even using live CD. This means, the choice is not for ordinary users who just want to try Android app. That is where YouWave Android came along. The process is brief; you just download and install the software.

To install YouWave Android, first you download the software at YouWave Android site (currently only for Windows XP/Vista/7)

Follow through the installation step and you’re done! To use it just click on the icon in the desktop

It came pre-installed with a couple of apps, a news aggregate app Newspaper, tower defense game Robo Defense free, puzzle like rush hours, Othello, jewels and Advanced Task Killer to easily kill running app.

To install Android app are easy, just download from your browser and put it in the default apps directory “ /youwave/Android apps/” or any directory of your choice.

No direct install from Android market yet so you have to install it manually, there are many places you can download Android app, just Google it using “Android apps” keyword, or you can visit slideme.org or getjar.com to download the apps, Android apps use .apk for its file extensions.

The minimum requirements for YouWave Android are Intel 1.6GHz CPU or its equivalent, with 1G of RAM and 500MBytes of free disk space. Internet connections are needed depends on what the apps you are using.

Pros:

It is easy to install the software
And it is easy to install Android apps; just download it on the default or preferred apps folder
Can try a huge library of Android apps
It is fast.
Have screen rotations features but you have to click it manually

Cons:

Ads, there is a lots of ads in it, but there is a work way around, just block any connection to the internet. Usually there is a connection each time the software start, you can block those connections using firewall or just turn off the internet connection.
Huge resource use, it means it decreases laptop battery fast, my laptop battery usually lasted around 2-3 hours before it needs to be plugged in, with this software, my laptop only lasted 1 hour or so while playing tower of defense game (Xeno Tactic II Lite) (tested on i5).
Huge resolutions, this is usually good news but for wide monitor like my laptop and LCD (1366 x 768 pixels) it is bad news, because it uses a really high resolutions for its height and no resize options, that is why I couldn’t took a good screenshot of the software.
No access to Android market yet but you can download apps
The means to use the software only trough mouse and keyboards, so no microphone, camera, orientation sensor, SD card support and accelerometer in here yet (tested version 1.31).
Still can’t play Angry Birds, because it need ARM Code processor (tested on Intel i5) :(

Check out YouWave Android here
u may also like this :

– 6 Flash Based Game Similar to Angry Birds
– To Know Wether U Need To Get a Life or Not
– Firefox 3 Download Day!!
– i’m waiittiiinnggg
– WHAT THE F***!!!!

Awesome Extensions for Your Firebug

dian — Fri, 24 Dec 2010 01:21:11 +0000

Firebug, an add-on for Firefox browser, is an awesome tool for web development. It can inspect and tweak HTML page and CSS in real-time, so you can see temporary changes that are made to the page in that moment without refreshing the page. It also has an advanced JavaScript debugger; you can see the full Firebug features here

This article is about further extensions for Firebug, which can extend Firebug from its basic feature for web development by installing additional extensions (that is also a Firefox add-on). If you’re still new in what is Firebug and how to use it, there is an extensive tutorial here at Makeuseof about “Amateur’s Guide To Customizing Website Design With Firebug”.

Here are a couple of its popular extensions, which I use in day to day basis:

YSlow

Among other extensions for Firebug, the most popular one, are developed by Yahoo! inc Company. YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites. The rules are

Minimize HTTP Requests
Use a Content Delivery Network
Add an Expires or a Cache-Control Header
Gzip Components
Put StyleSheets at the Top
Put Scripts at the Bottom
Avoid CSS Expressions
Make JavaScript and CSS External
Reduce DNS Lookups
Minify JavaScript and CSS
Avoid Redirects
Remove Duplicate Scripts
Configure ETags
Make AJAX Cacheable
Use GET for AJAX Requests
Reduce the Number of DOM Elements
No 404s
Reduce Cookie Size
Use Cookie-Free Domains for Components
Avoid Filters
Do Not Scale Images in HTML
Make favicon.ico Small and Cacheable

It ranked (like A, B, C, D) your website for performance based on three predefined rulesets:

YSlow(V2) – this ruleset contains the 22 rules listed above.
Classic(V1)- this ruleset contains the first 13 rules listed above.
Small Site or Blog- this ruleset contains 14 rules that are applicable to small web sites or blogs.

Note, the tools that are available in YSlow are also really useful, like JSlint a JavaScript code quality tools; YUI CSS compressor, Yahoo own tools that minifies CSS and including one of my favorite image compressors, Smush.it. It compresses image size so it became smaller without any loss of quality and thus makes the web load faster because of it smaller size.
You can install the YSlow extensions here and the full guide for the extensions here .

SenSEO

This extension analyzes web pages and tells you how good they fulfill on-page Search Engine Optimization criteria. It gives you

Overview of SEO-important web page components
Analysis of on-page-SEO-criteria
In the newest version SenSEO (1.4.3 in the time of writing) checks
Correct usage of Document-Title, Meta-Description and Meta-Keywords
Headlines, Domain and URL-Path
Other general content-criteria

As you can see in the screenshot, it shows all of the component that are needed for search engine optimization, from h1 to h6, meta description and keyword, the alt attribute in images and it even show how the search engine read the website trough visible content.
You can install the extensions from here.

There are others popular extensions like Flashbug (displays all the running .SWF file trace output), FireQuery (plugin for jQuery development), you can see it at “Firebug Extensions add-on page”, The extensions is ranked by its popularity and the complete list is in the official “wiki for list of all Firebug extensions.”.

u may also like this :

– What do u do if u don’t have sense of art in designing a website
– Miabebo Shop: Nursing Covers & Diaper Bags
– Google Hack on Document
– Toko Dephe Site Launch
– Google hack query Summary (yes, another one… )

The Quick Brown Fox Jumps Over The Lazy Dog

dian — Mon, 08 Feb 2010 00:08:52 +0000

in case you’ve missed, The quick brown fox jumps over the lazy dog, no he really does, literally jump over that darn it lazy dogs! :D
here’s the video

Pic by GL.ANDIS
via Attu
u may also like this :

– Learn how to iron [ultimate guide]
– Video: Tilt-Shift Monster Truck Rallye
– A Very Good Reason to Upgrade Your PC
– Gecko Pimp
– Numa Numa!

Create Thumbnail From Offsite Image Using Timthumb Beta

dian — Sat, 26 Dec 2009 18:19:30 +0000

by petervanallen

I host most of my images in Picasa and Flickr, for along time i couldn’t use the native feature in WordPress to create custom thumbnail that i wanted, i could upload it and use custom fields, but it would be tediously boring to do that.

A couple of month ago a message from heaven came by to fulfilled my wishes and whisper it to Ben Gillbanks ear, the developer of timthumb. So thus came the timthumb beta for offsite image. After downloading it i tried it, my wishes fulfilled and it looks awesome! Oh Joy

Happy! Happy! Joy! Joy! from psherman420 on Vimeo.

This hack is similar with the one that i use on this website and this was a follow up from my previous post about how to create custom index post layout, but the method could be applicable for other WordPress themes.

Here is the screen shot on how the thumbnail will look like on the home page (i’m using thematicsamplechildtheme in the Thematic folder)

First we need to download timthumb beta at Binary Moon in here, put it on your child theme folder then create a folder called temp & cache (writeable 777)

Here are the code that we are going to use


function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
 
function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('//i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
 
  if(empty($first_img)){ //Defines a default image
    $first_img = "images/default.gif";
  }
  return $first_img;
}
 
function custom_index_loop() {
  global $post;
    /* Count the number of posts so we can insert a widgetized area */ $count = 1;
      while ( have_posts() ) : the_post() ?>
         $counter++; ?>    
           if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">
            
               the_ID() ?>" class=" thematic_post_class() ?>">
                 thematic_postheader(); ?>
                   if(catch_that_image()) {
                    echo '.get_permalink(). '" title="' .get_the_title(). '"> .get_stylesheet_directory_uri(). '/timthumb.php?src=' .urlencode(catch_that_image()). '&h=100&w=240&zc=1&q=90">'; } ?>
                    
                     the_excerpt(); ?>
                     wp_link_pages('before=' .__('Pages:', 'thematic') . '&after=
') ?>
                
             thematic_postfooter(); ?>
          

      

   

    comments_template();
    if ($count==$thm_insert_position) { get_sidebar('index-insert');}
    $count = $count + 1;
    endwhile;
}
add_action('thematic_indexloop', 'custom_index_loop');
?>

The code below are to catch the first image on the post

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('//i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
 
  if(empty($first_img)){ //Defines a default image
    $first_img = "images/default.gif";
  }
  return $first_img;
}

i use the_excerpt for the content so there’s no image there, i’m going to try catch the first image from post so i can feed it to the timthumb, this awesome function is from WPrecipes Jean-Baptiste Jung.

after catching it, we can call it with this

1	echo catch_that_image()

then i’m going to insert it to the custom index loop

1
2

 if(catch_that_image()) {
                    echo '.get_permalink(). '" title="' .get_the_title(). '"> .get_stylesheet_directory_uri(). '/timthumb.php?src=' .urlencode(catch_that_image()). '&h=100&w=240&zc=1&q=90">'; } ?>

change the h=100&w=240 for the size as needed

Voila! it’s done! simple right! :)
u may also like this :

– Be Water My Friend… With Thematic
– Create Custom Posts Layout in Home Page (Thematic Child Theme)
– Toko Dephe Site Launch
– Learning Thematic
– Website New Themes

Create Custom Posts Layout in Home Page (Thematic Child Theme)

dian — Wed, 23 Dec 2009 07:26:51 +0000

As I said before in the last post, there two ways to do this, First is using page template, the other one is using Thematic hooks & filter.

pic by Everything and the rest

What I want to describe here is using the theme filter & actions. if you’re lazy like me to read articles, download a couple of thematic child themes, see examples of filters and see the core of thematic and learning by doing.

After viewing the core, I notice that there are two or three files that I needed to see in adding filter for post layout. First, because I want to change the post layout in the home page so I checked function.php and search for the post or content filters. In there I was leaded to content-extensions.php (see the comment “Load custom content filters”). then I looked for thematic index loop (line 22 comment).

For this example i want to try to create two column of posts that will appear like this in home page, note that i’ll be using thematicsamplechildtheme (inside thematic folder) from Ian Stewart

here are the code for basic index posts lay-out, if you want to copy paste it, put it in your child theme function.php, I will explain more after the code


function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
 
function snippet_index_loop() {
  global $post;
        /* Count the number of posts so we can insert a widgetized area */ $count = 1;
        while ( have_posts() ) : the_post() ?>
             $counter++; ?>    
             if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">
                
                     the_ID() ?>" class=" thematic_post_class() ?>">
                         thematic_postheader(); ?>
                        
                             the_excerpt(); ?>
                             wp_link_pages('before=' .__('Pages:', 'thematic') . '&after=
') ?>
                        
                             thematic_postfooter(); ?>
                    

                

            

 
                     comments_template();
                    if ($count==$thm_insert_position) { get_sidebar('index-insert');}
 
 
        $count = $count + 1;
        endwhile;
}
add_action('thematic_indexloop', 'snippet_index_loop');
 
?>

And for the styling, you could use this

.column{width:250px; display:inline;float:left; overflow:hidden;}
.clear-fix{display:box;}
.one{margin-right:40px;}
.hentry{padding:0;}
.column .entry-content{width:245px;}

Lets elaborate the code first


function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
?>

The first thing that we need to create is adding the remove function for the default thematic index loop. The default (as seen in the content-extensions.php) is thematic_index_loop.

then we add an action to replace the loop that we move, lets called it custom_index_loop


function custom_index_loop() {
  global $post;
        /* Count the number of posts so we can insert a widgetized area */ $count = 1;
        while ( have_posts() ) : the_post() ?>
             $counter++; ?>    
             if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">
                
                     the_ID() ?>" class=" thematic_post_class() ?>">
                         thematic_postheader(); ?>
                        
                             the_excerpt(); ?>
                             wp_link_pages('before=' .__('Pages:', 'thematic') . '&after=
') ?>
                        
                             thematic_postfooter(); ?>
                    

                

            

 
                     comments_template();
                    if ($count==$thm_insert_position) { get_sidebar('index-insert');}
 
        $count = $count + 1;
        endwhile;
}
add_action('thematic_indexloop', 'custom_index_loop');
?>

the code

1 2	$counter++; ?> if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">

add the two column, if you want three column, just add another elseif and change the $counter then adjust the styling, but for now i will only give the styling for two column.

also i use the excerpt for the content


<div class="entry-content">
    the_excerpt(); ?>
    wp_link_pages('before=' .__('Pages:', 'thematic') . '&after=
') ?>

?>

i’m not using the default loop for thematic index (thematic_content), because it will be strange to see full content in small width column.

and the last one is

1
2
3


add_action('thematic_indexloop', 'custom_index_loop');
?>

to insert the action.

for the styling of the column

1 2	.column{width:250px; display:inline;float:left; overflow:hidden;} .clear-fix{display:box;}

overflow hidden makes every one happy :)

1
2
3

.one{margin-right:40px;}
.hentry{padding:0;}
.column .entry-content{width:245px;}

this styling is for more whitespace in the column.

by all means I’m still a noob, any and all feedback you can give would be helpful to me. please do leave a comments below.

Update:
This is an old article :) i may forgot a couple of things, but if you want to make three column using the function above, you add an else if in the code, the final code will look like this

function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
 
function snippet_index_loop() {
  global $post;
        /* Count the number of posts so we can insert a widgetized area */ $count = 1;
        while ( have_posts() ) : the_post() ?>
             $counter++; $clear=''; ?>    
			 if ($counter == 1) { echo 'one'; } elseif ($counter == 2) { echo 'two'; }  else { echo 'three'; $counter = 0; $clear='
';} ?>">
			    
                     the_ID() ?>" class=" thematic_post_class() ?>">
                         thematic_postheader(); ?>
                        
                             the_excerpt(); ?>
                             wp_link_pages('before=' .__('Pages:', 'thematic') . '&after=
') ?>
                        
                             thematic_postfooter(); ?>
                    

                

            

 
                     comments_template();
                    if ($count==$thm_insert_position) { get_sidebar('index-insert');}
 
		echo $clear;
        $count = $count + 1;
        endwhile;
}
add_action('thematic_indexloop', 'snippet_index_loop');

and the styling will be like this in the style.css

.column{width:160px; display:inline;float:left; overflow:hidden;}
.clear-fix{display:box;}
.two{margin:0 20px;}
.hentry{padding:0;}
.column .entry-content{width:245px;}

u may also like this :

– Be Water My Friend… With Thematic
– Using Thematic Child Themes
– Learning Thematic
– Create Thumbnail From Offsite Image Using Timthumb Beta
– Puspaningrum Theme

Be Water My Friend… With Thematic

dian — Mon, 21 Dec 2009 08:34:59 +0000

At last i’ve re-align my website. The last time i’ve updated my site design I’ve thought that this is it, i wont change it anymore, but after a couple of month i have some doubt, Google doesn’t give me enough love juice.

Google always acknowledge me on what that i put on my first page, and just that. For the time being I prefer to have more exposure for all of my posts content, yes the first purpose of the design before this (puspaningrum theme) is that i want more exposure to each new post content that I’ve write, but beyond that, looks like Google bot didn’t read the sidebar recent post, because of that, there’s no other topic that appear in Google search beside the one on my home page. So I’ve decided to change it.

Two choices

Blogzine design is the one that appeal in my mind, but then i have to change the typography a lot more, every time i’ve publish a post, I don’t have a lot of time, i want to post once a week or twice a week, without the hassle designing each of it (for now).

Then magazine themes comes to my mind, i love the structure and the small thumbnail for each post that could make my posts look more interesting, so i decided i want to create it. The only hurdle for this kind of design is the thumbnail, if i upload my images in my server then i can automatically scan each post to create thumbnail in the home page, but alas since the beginning of my writing in this site, i use Google Picasa & Flickr. I believe that images is the biggest bandwidth hog for a site, so i rely on both of them to do the job. Unfortunately my favorite thumbnail maker (timthumb) doesn’t allowed to create thumbnail from external server images, so it discourage me to re-align the new design.

Two month ago after i subscribe to Binary Moon (Ben Gillbanks), a friend of Darren Hoyt (my favorite WordpPess designer ) I notice that he release a beta version of timthumb for external server, like a message from heaven i was completely happy. That means that I could automatically creates thumbnail on the fly from major image hosting site like picasa or flickr, but back then, i was handling two client online store project (Living With Nara & Asibune) so i haven’t enough time to create it.

Now i have the times, for about two-three days i have finish my website re-align, why re-align? because i felt my old design is my signature, simplicity. I prefer to stick with its typography and color scheme and only re-design the content layout for the home page, category and tag page.

by shizenquest

The Framework

Thumbnail is ready, design sketch is ready, the psd file are ready so the last thing that i want to do is choosing the framework to create a new child theme, my recent design i use Thematic framework but then i was interested about WooThemes Framework
what i love about WooThemes is that it uses 960 gs for the layout, it makes the layout designing freakishly faster than others that don’t. Thematic doesn’t use that.

I have some doubt in choosing WooThemes, because unlike Thematic that offer fully gpl, the WooThemes have multi-license in some of the script, some of the admin feature use cc license. so i choose Thematic instead. Beside the utterly helpful forum , right now there are a lot of reading source about Thematic so i’m sure that it won’t be a problem for me.

I find many fascinating stuff designing with Thematic, i thought it’s going to be difficult because i see no child themes that uses multi-column for its layout, so i expected a rough ride in coding the themes, but fortunately i was dead wrong, it was very easy designing with Thematic :)

There are two methods that you can use to change the content layout in Thematic (as a child theme). First, is using a page template, like adding category.php or tag.php on your child theme folder and the other one you can add a filter or hooks in the function.php, Using page template is easy and quick but by using it you are ignoring the biggest advantage of using Thematic, the themes hook & filter.

Most of the Thematic feature that i’ve use in changing the posts layout of this theme is using Thematic filter. There are only two files that i needed to see to learn how to create a filter, function php and content-extention.php

About the code, i’ll share it in the future post about how i change the layout for the home page, the category page, the tag page, filtering post for image, get the image in post, changing the excerpt length.

Here are the screenshot of my old design (using Puspaningrum Theme)

The purpose of the old design is major exposure on the content on the home page and i was considering in developing blogzine for future upgrade, but as time gone by, i prefer in using a magazine layout for the moment.

here are the new design screen shot.

Right now, I won’t release the design to the public like Puspaningrum theme, because I want to polish it event more, like adding more admin feature, custom widget or as we all say to make it more premium :)
u may also like this :

– Create Custom Posts Layout in Home Page (Thematic Child Theme)
– Learning Thematic
– Using Thematic Child Themes
– Puspaningrum Theme
– Create Thumbnail From Offsite Image Using Timthumb Beta

R.A. Kosasih, The Indonesian Comic Author

dian — Mon, 21 Sep 2009 07:06:23 +0000

About two month ago my father reminded me about his collection of comic books, and i remembered it too that his collection of comics is super awesome, there are almost three 2 meter high cabinet filled with classic Indonesian’s comic book.

But after time went by, we don’t know how to preserve comic the right way, one by one the collection is destroyed by humidity and reading bugs :(

it’s a sad day for me and my dad the day that mom had to throw away our comic book. Nevertheless time gone by, we tried no to regret it.

Later, after my dad reminded me, me & my wife made a pact that we shall bought him the comic book that he had before, one by one. Since then we bought 8 comics book, it’s far from his total collection he once had before, but it’s a start.

The comic author that we got is R.A Kosasih, and the price is significantly higher than the first time we bough it’s around Rp,400. Now the price is Rp,35,000 to 85,000 (3,5 – 8,5 USD). We have a couple of more that we want to buy but i want to postponed it.

The publisher of the comic book, doesn’t use royalty system for the comic, so the comic author doesn’t get any penny after it was bought (i read it somewhere in Kompas newspaper), It’s been forty years and the comic still republished, i’m quite ashamed of the system, because in my opinion RA. Kosasih has the same status like Stan Lee did in US comic books .

Here’s a couple screen shot of the comic book cover that i bought

here’s clip of the content

the hand drawn for the comic is very classic, all of the story that brought by R.A Kosasih is around the epic of Mahabarata. He take the middle story of many version of the story trough his comic.

Here’s another screenshot of his comic book

and the content

honestly i haven’t read it all, in the old days i read it all but i was kid back then so i dont really understand what the story is about.

Right now i read half of the comic and felt this comic is LOL :D and you can’t complaint about the quality of the comic, it’s a reprinted edition from 40 years ago. it’s full of awesomeness in my childhood, maybe i’ll post the content in the future post.
u may also like this :

– Been Reading
– The Jakarta 4th Toys and Comic Fair
– a week goes by
– Either U Have It or U Don’t
– This Month Time Waster: Daily Funny Pictures

How to Add Typekit to your Thematic Child Themes

dian — Fri, 28 Aug 2009 04:58:45 +0000

@font-face at-rule is one of the most anticipated feature in CSS3, it allow you to define custom font for your website, allowing you to upload fonts to your web server and deliver the font itself to the client browser

Typekit is a web service that provide fonts & the font delivery service for this use, the huge benefit of using Typekit is that you dont have to think about the font license that you’re going to use and the bandwidth that the font are going take, Typekit will take care of that. But lets get to the point on how to use it on your thematic child themes,

After signing in (currently on invitation only), you’re asked about the name and the address of your website (you can use localhost for testing environment) then you’re asked to add snippet code to your html head tag like this

1 2	<script type="text/javascript" src="http://use.typekit.com/XXXX.js">script> <script type="text/javascript">try{Typekit.load();}catch(e){}

to use it on your thematic child theme use this code at functions.php

function childtheme_typekit() { ?>


 }
add_filter('thematic_head_scripts','childtheme_typekit');

(change the XXXX or change all the snippet code)

What this code does is put the script at your head tag. Easy right? if you want to know more about thematic you could visit Thematic Framework.

About Typekit, I was a late invitation on Typekit, i’ve notice on twitter that every body got the invitation since first august but i just get the invitation yesterday. My experience using typekit? it’s downright easy, u could automatically add font stack on the Typekit Editor in case the client browser doesn’t support @font-face.

after testing in localhost environment this is the screenshot of Typekit in action

This is good-dog font, using h1 selector with letter-spacing -1

Typekit comes in two version, the free and the pay version, the free version you’ll get less choice of font and you’ll get typekit badge while using it. There are 3 pay version scaling up the number fonts, bandwidth use & features.

Right now i’m using the free version, i haven’t thought in upgrading my account, because right now i dont have any plans on what i’m going to use it for.

u may also like this :

– Using Thematic Child Themes
– Create Custom Posts Layout in Home Page (Thematic Child Theme)
– Learning Thematic
– Puspaningrum Theme
– Website Re-design

Miabebo Shop: Nursing Covers & Diaper Bags

dian — Mon, 24 Aug 2009 14:40:52 +0000

I’ve just finished helping my friend setting a simple online store for her last week, this project has been really an insightful experience for me, She gives many input to the design and response quick in every question i’ve ask, so development went fast. Without her input, the development wont be so quick, the only things that held us down is the product aren’t available when the website ready, so we have to wait a couple of days to fill the site with product pictures.

The site sell Nursing covers for breastfeeding, bib for baby and diaper bags. The language that are used is Indonesian because she targeted the Indonesian market first, but to her affirmation she also confirm that she is capable in dealing with international buyers.

Here are the screenshot of the site,

The question that may pop-up in your mind is why does an online store doesn’t have a shopping chart? It’s because the nature of the online consumer here in Indonesia. Using credit card in an online environment are still rare here, many of the Indonesian consumer doesn’t believe in the security of the interwebs and the popular bank here also doesn’t have the support in online transaction, they do have internet banking but they doesn’t support retailer to use their bank service on the retailer site. So the solution? using the good old fashion of contact form, even so, in my experience there still difficulty in using it, in that position, the default comment form of WordPress coming in, to back-up it up i also use chat-box and Yahoo messenger status ID.
u may also like this :

– Toko Dephe Site Launch
– John Chow & Steve Pavlina VS Kumiko Cash Quest
– Site Soft Launch: readingbugs.org
– Jatinegara
– Yes!! Paypal now can add Indonesian Bank Account!

A week with green PC

dian — Tue, 23 Jun 2009 19:44:27 +0000

Last week my PC went down and in the emergence of work that i have to do, i want to buy a PC quick, without the necessity to think the specification. I had a couple of things in my mind when i want to buy the PC. First, it has to be energy efficient, it had to be cheap and it had to be durable, because my pc went on around 20 hours a day. i was thinking to build my own specification for the pc but the budget that are available at that time are only $450 and the time was not sufficient.

After careful thought in choosing the right PC, i stumbled upon a great bargain branded PC, HP Compaq CQ2030L at bhinneka.com for $419. I choose this because compared with building the PC by myself with the compaq specification it makes around $390, it still a bit pricey but considering that it is branded and uses intel Atom 230, i’m sure that it’s durable and very energy efficient, the uses of Intel Atom that coined me the PC with the term green PC.

The things that interested me the most is that the package that are offered by Bhinneka was bundled with an 18.5inch wide Compaq LCD and HP Deskjet 1550, The LCD will surely help me in coding but unfortunately for the printer, is that i’ve just bought a new printer and scanner last month, so i gave it away the printer to my relatives. The first time i hand on the PC, i was quite shocked of how small it is because it’s my first time using a thin PC like this. I’ve done a couple of research before i bought it, one of them is the PC only consume less than 100watt of electricity, the processor itself is only 22watt max.

When the package came, i asked to the delivery guy, is there a Windows XP driver on the box? the guy answer, there’s none. That’s when the first problem came, i was intended to install win XP on the PC but there’s no driver at hand and no PC at my house, later then the delivery guy promise me that it’s not a problem, i can ask the technician at Bhinneka to help. Felt relieved by the promised, i’ve knew that i can count on the help of the technician at Bhinneka. But boy do i was wrong about it, i sent a polite email to care@bhinneka.com to guide me to the location to download win XP driver.

After three days with no response (no autoresponder too), i knew that i can’t expect help from them, so i had to search it by my self. After googling, i found the driver at HP but only for Windows VISTA. Such a crap moment, knowing pretty sure that the PC itself couldn’t run Vista smoothly, but the HP only provide VISTA driver for that type.
After googling a few hours more, i’m pretty sure there’s no other site providing the driver. So i went back to HP.com and tweak the keyword and found the driver. The driver i get is from the Compaq CQ2000 type, the CQ2030L type is for Indonesian only and doesn’t provide XP driver. Everything went smoothly with the CQ2000 driver, It runs really well on XP sp2. if u want to download HP Compaq CQ2030L driver for Windows XP u can download it here.

So how is the performance of the PC? it runs everythings smoothly, right now at the time of the writing, the programs that are running is notepad++ with 8tabs, Firefox with 9 tabs and 8 add-ons, Xamp Server (httpd & mysqld), Comodo firewall and antivirus, password manager and download manager. Is there any hiccups? nope, there’s none. Does it runs Adobe photoshop? or illustrator? yes, but i only test it with Adobe CS2.

I’ve runs photoshop with Firefox, notepad++ and Xamp server, there’s not a single hiccups. i use the photoshop to edit 3000×4000 res photo. the system runs smoothly. All in all, the PC fulled up to my expectation, the only things that i don’t try with this PC is playing 3D games which is not the first thing it was intended.
u may also like this :

Using Thematic Child Themes

dian — Mon, 08 Jun 2009 09:46:08 +0000

Third time’s a charm :) this is my third time creating child themes with thematic framework, there’s a learning curve to create it, like themes hooks and filters but all of them can be tackle in a matter of minutes. All of the unanswered ones can be found & solved in the thematic forums which have a very friendly community.

I hope from this moment on, I wont change themes anymore, maybe just re-align it in the future :) The purpose of the themes is simple, i dont want to feel bloated with many post in one page. Wont scroll much to read the content and of course i want to have the right font on the right place :)

The old themes i use vigilance themes from jestro

the themes is awesome but i never really click with the font and the structure. Now, i’m using my own child themes based on thematic framework. The purpose large header for the title of the writing, because i think people will get tired seeing those same large logos over and over again but it will be more interested is the focus is in the title of the current content.

here are the new themes screenshot

i wouldn’t lie that i get a lot of the inspiration of the design of this child themes from Coudal and Jason Santa Maria website design. I was looking an inspirational use of Georgia font and Jason’s site happen to give me a really excellent example on how to use one.

The site is still along way from finish, i didn’t add twitter widget yet but i’ve add my recent google reader’s favorite link. Didn’t use favicon yet, I’m going to mock-up a little touch of graphic on the site in the near future.

next are a couple of function that i’ve use in my functions.php on my thematic child theme.

i’ve change the header so there’s no dropdown menu here and i’ve removed , replace it with the new ones. Here’s how i edit the header title on thematic, also adding new title and access using thematic_header() filters

// Delete drop down!
function childtheme_head_scripts() {}
add_filter('thematic_head_scripts','childtheme_head_scripts');
 
// Remove default Thematic actions
function remove_thematic_actions() {
 remove_action('thematic_header','thematic_blogtitle',3);
 remove_action('thematic_header','thematic_access',9);
}
add_action('init','remove_thematic_actions');
 
function childtheme_menu_args($args) {
    $args = array(
        'show_home' => 'Home',
        'menu_class' => 'menu',
        'echo' => true
    );
	return $args;
}
add_filter('wp_page_menu_args', 'childtheme_menu_args');
 
function childtheme_title(){ ?>
    		 echo get_option('home') ?>/" title=" bloginfo('name') ?>" rel="home"> echo get_stylesheet_directory_uri(); ?>/images/logo3.png" alt=" bloginfo('name') ?>"/>
 }
add_action('thematic_header','childtheme_title',3);
 
function childtheme_access(){?>
	
		 wp_page_menu('sort_colum=menu_order')?>
	
 
 }
add_action('thematic_header','childtheme_access',9);

after that i’ve change a little bit on the post_meta and the post_footer. The last function that i’ve use is adding google analytics code on the footer. Here’s how to add Google analytics code on the thematic child themes footer (before close body tag)

function analytic_footer() {?>


 }
add_filter ('thematic_after', 'analytic_footer');

all of the functions here is almost the same as the last time i post about thematic.

Update:
I’m releasing this thematic child theme, it’s called Puspaningrum Theme, you can view it here
u may also like this :

– Learning Thematic
– How to Add Typekit to your Thematic Child Themes
– Create Custom Posts Layout in Home Page (Thematic Child Theme)
– Be Water My Friend… With Thematic
– Puspaningrum Theme

Doin It Wrong?

dian — Mon, 13 Apr 2009 17:15:53 +0000

see more Lolcats and funny pictures

i found it odd that facebook has a double breadcrumb that leads to the same page, even thought the links is different, the page where its headed is the same, its been a long time but no one seems to bother to wrote it. Here is a couple of navigation that i found linking the same page. the first one is

The home page, clicking the home button and the facebook button leads to the same page, why? seeing that it use “ref” keyword on the string of the link, at first i was thinking maybe it’s for surveys or something, but after a year using facebook, does it still need survey for that function?

The second one is, the breadcrumb on the view all friends page, using see all and clicking the amount of your friends lead to the same page too, i dont know why it bother to use two link that leads to the same page (and positioned damn near too).

There are maybe more of this on other page, but i never intended to research about it, i use facebook only to connect with my friends and never intended to use it other than that. It just bother me, seeing it every time i use facebook.
u may also like this :

– A nice way to phish
– a Wonderfull Afternoon
– Like Button Metadata in WordPress
– Faster Browsing in a Limited Connection
– Using Thematic Child Themes

My list of things to remember when re-design my own site

dian — Wed, 08 Apr 2009 12:40:53 +0000

The worst part in creating or modifying WordPress themes is the multiple browser compability, a lot of my friends and client use old PC and use (gasp!) Internet Explorer, using those dreaded version 5 and 6. So if they find the site that i help make or create looks weird, shame on me. In the next couples of weeks maybe i’m going to re-design my site, i should have re-align but i felt this themes doesn’t click with me yet after a couple month. So I decided to change it.

I usually have a list of what i check the themes before i implemented the design on my site, here it is and a couple of changes that i’m going to do with the next design

Themes lay-out should cross browser compatible. i check it at least to 4 browser: IE 6 and 7, Firefox, Opera and Safari.
Is the comment form awesome or not.
Not using PNG transparency (i’m sorry but i hate to use hacks on IEs)
Check the navigation menu, sometimes IE act nasty on this issue
Because the interwebs is still expensive here in indonesia, specially in rural area, i tend to use less image on the themes, because here, the internet connection is really slow.
Checking out the http request using firebugs, well this is a quite long explanations. but the keyword is, the more request files from the external page that is loads up, the page load more slowly.
The files that sometime creates a huge pile of http request is, not using the CSS Sprites. Those million files of css and javascripts, the style.css, reset.css, the grid css, the layout css, the lightbox script, the form contact script, the rating script, u name it, it’s a huge pile of request too for sure. so i want to minimalize it in the next future.
I want to play with font lots more, no more graphic heavy

Well i guess i better start it.

u may also like this :

– Toko Dephe Site Launch
– Site Soft Launch: readingbugs.org
– Whooaa I Have to Slow Down in Posting blogs
– Website Re-design
– Google Hack?

Smush It!

dian — Tue, 10 Mar 2009 13:13:56 +0000

by .little.princess.

Been busy this couple of weeks due to my personal project. So i haven’t have the time to write a post, but many interesting things that i found during this a couple of weeks. The most interesting things is i remembered that i promised my friends to help her develop a site for her organization last december.

Seeing that it’s been to long delayed, I contact her that i’ll do it immediately postponing my personal project for two weeks. In theory if we routinely communicate at each other two weeks it’s a bit too long, but in reality it’s quite short. There are a couple of problem that we’ve stumbled, and i know that two weeks is too short for her demand, but seeing that she had limited budget i can’t help her too long. At the start of the project I immediately ask a couple question regarding her wants on the website, i figured out that she want a magazine type of site.

With the limited resources and time, in two days i use and customized Mimbo 3.0 theme from Darren Hoyt,and the result is perfect. The font that i use in the title is change, using big italic Georgia font for the h2 and the other things i change is the color themes to yellow. Right now i’m still waiting for her reply regarding the content.

The other things that is interesting is i found Smush it!! This site is very awesome for optimizing pictures for web. A quote from the site

Performance just got a little bit easier. Optimizing images by hand is time consuming and painful. Smush it does it for you.

The result of using it is fantastic, on some occasion it’s better than using the “Save for webs” feature on adobe photoshop.

Other things that i’ve found interesting while exploring fonts, i found fontsquirrel which different from dafont.com, where comes with a variety of license, with fontsquirrel the font comes with commercial-use license.

There are also many interesting things i found regarding understanding web development like PatternTap and many articles from smashing magz. but i guess it’s time to get back to work.
u may also like this :

– 31 Days, The First Step
– WHAT THE F***!!!!
– A little redesign on the site
– Night Market at Jakarta, Cipinang
– How to Add Typekit to your Thematic Child Themes

Learning Thematic

dian — Fri, 06 Feb 2009 17:15:01 +0000

At the moment i was designing a new themes for my wife, but it is still not finished yet because i’m not click with the final result, i want to change it again if i still felt awry with the design. So i wont give screen shot of the site in this post.

Pic by papadont

What i want to tell u in the process is, i was amaze this couple of week, i learn a lot. In the process of re-designing the site I use Thematic Theme Framework from Ian Stewart for the based framework, using child themes to create new themes, same as i did with my site. I was amaze how easy it is to create child themes with thematic, i use Thematic before on this site a couple of month a go but didn’t quite grasp yet the full feature of Thematic, i was really lazy back then :) boy do i miss a lot of things because of this laziness.

The first thing that help me the most in the process is Thematic provide me with 960 grid system background template (12 column 18px height) to help me change layout, using it as the background on the body (just un-comment it) i could easily move within the grid system. But the template that was provided is the 12 column, i prefer the 16 columns, so i create a new background template with 16 column with 18 pixel high based on the 960 Grid System, here’s the template if u want to use it.

Other things that help me also are guide on adding and customizing page template on child themes in Ian’s blog. The forum also filled with helpful people, just be sure to post there politely :)

Oh yeah in case u want to add Home link to the navigation bar, just add this code to your functions.php in your child themes folder, this is the first thing i look in the forum, the newbie code to add home in your nav bar :P

function nav_menu() {
	$menu = '';
	$menu .= str_replace( array( "r", "n", "t" ), '', wp_list_pages('include=24,27,28&title_li=&sort_column=menu_order&echo=0') );
	$menu .= "
n";
	echo $menu;
} 
 
add_filter( 'wp_page_menu', 'nav_menu' );

There are others beside home that i want to add in the navigational bar, one of them are rss icon, feed by email and search bar. The current code below is one of the way to add all of them and adding favicon before the head tag and also adding google analitycs code before the close of body tag


function childtheme_favicon() { ?>
     echo bloginfo('stylesheet_directory') ?>/images/favicon.ico">
 }
add_action('wp_head', 'childtheme_favicon');
 
function home_menu() {
    $menu = '';
    if ( is_home() ) {
        $menu .= ';
    }
    else {
         $menu .= '
;
    }
    $menu .= get_option('home') . '/" title="Home">Home
';
    $menu .= str_replace( array( "r", "n", "t" ), '', wp_list_pages('title_li=&sort_column=menu_order&echo=0') );
    $menu .= 	' 
					RSS
					Email Updates
				
';
    $menu .= '.get_option('home').'" method="get" id="searchform">
					
						
						
					
				
';
	$menu .= "
n";
    echo $menu;
}
add_filter('wp_page_menu', 'home_menu' );
 
function analitycs_footer() { ?>


 }
add_filter('wp_footer', 'analitycs_footer' );
?>

Don’t forget to customize the css to make the rss button, rss feed by mail and the search bar more pretty :)
u may also like this :

– Using Thematic Child Themes
– Create Custom Posts Layout in Home Page (Thematic Child Theme)
– Be Water My Friend… With Thematic
– Puspaningrum Theme
– How to Add Typekit to your Thematic Child Themes