After almost five years, working exclusively with laptop for my home use, i still miss using a full size keyboard for coding.
The reason why i use laptop is purely economical and portability, is easier to meet clients and the electricity cost around 1/3 lower than a desktop.
I came home from work around 7 – 8 pm, while on the way home I either listen to the radio, mp3s, Twitter, Facebook, Vines, Path or Reddit. One of the shortcoming of using it intensively, is the battery life tend to shorten and it is obnoxious. Because the trip from work to home is around 100 minutes, I don’t want spending it by daydreaming just because the battery is dead.
I knew this all along, I never been a fan of saving battery apps, so i have a couple of routine things that i do to save battery. But never have I seeing the benefit directly from my action. Last week, i was Redditing intensively, suddenly i got a warning that battery is only 15% left, that’s quite horrific, knowingly i just charged up my phone to 80% around noonish.
The activity that I’ve done that costing the battery is reading & posting path, reading feed at Feedly and last Reddit, using bacon reader app. I notice before that the biggest battery hog are screen, after a quick check, the battery cost around 35%, and more quick look, i notice gps cost 5% battery, android keyboard eats a large amount too, around 5-10%, WiFi 5%, and others like OS & system 30% etc ( which we can’t do anything about it ).
So what did I do to save up battery? The first thing I do is, sets the brightness setting all the way to the lowest setting, because its night time I don’t really need really bright screen. The second I did is, turning off the WiFi, the bus that I rode doesn’t provide any WiFi, so why bother? And turning off GPS is also a must, unless you’re using apps that uses GPS (Path, Instagram, Google maps, if you’re just reading news or Reddit, just turn it off right away).
That’s just the basic, I usually do extra things to save more on battery life, i skim apps that run on background. Facebook is one of the apps that run intensively on the background, i usually uninstalled right away on my phone, but have it on my tablet. Antivirus cost around 5 to 10 %, but there’s not much to do there. One of the dreaded, background apps that i hate the most are carrier app, that pop notification a couple of times a day, you can’t remove it (unless you root it), but fortunately in android 4.1, you can disabled (look in setting menu) it so it does not active at all. This is awesome btw, this feature are alpha on android 4.0 .
TL;DR version of this writing are, to save up battery
Just by doing this, my 15% battery, gone to 10% in the next 30 minutes later
I’ve been active buying PC games from steam for quite a while now, the reasons are, the concept are dead simple: buy once and installed anywhere as long I have only one account logging on on my steam client, I can play at home and office the same game (sometimes the same save game too); there are workshop for many pc games (like fan base in game customization) and last but not least, the crazy game sale that they often have, either on steam itself or on other site.
Now about the sale that happen often, are sometimes crazy cheap, it felt irrelevant to buy or download pirated games. Why, you say? First of all it’s freaking cheap, sometimes I can have 3 awesome games for a mere 1-2$ USD; the second is I don’t need to worry about cracking or viruses, upload ISO, daemon etc. here’s a couple of website that I always take a look to find those sale:
I use Google reader to read these site, but because its going to close on July 1st, now I use Feedly. There are company that offer game sales (mostly high quality indie game) in a bundle:
With all of these sale happens on regular basis, its going to make my game backlog abundance, plus the steam summer sale is going to happen soon, so time to save up! :)
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 “<user home 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:
Cons:
Check out YouWave Android here
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:
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
It ranked (like A, B, C, D) your website for performance based on three predefined rulesets:
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 .
This extension analyzes web pages and tells you how good they fulfill on-page Search Engine Optimization criteria. It gives you
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.”.
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <?php 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('/<img.+src=[\'"]([^\'"]+)[\'"].*>/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() ?> <?php $counter++; ?> <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>"> <div class="clear-fix"> <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>"> <?php thematic_postheader(); ?> <?php if(catch_that_image()) { echo '<a href="' .get_permalink(). '" title="' .get_the_title(). '"><img src="' .get_stylesheet_directory_uri(). '/timthumb.php?src=' .urlencode(catch_that_image()). '&h=100&w=240&zc=1&q=90"></a>'; } ?> <div class="entry-content"> <?php the_excerpt(); ?> <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?> </div> <?php thematic_postfooter(); ?> </div><!-- .post --> </div><!-- .clear-fix --> </div><!-- .column --> <?php 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
1 2 3 4 5 6 7 8 9 10 11 12 13 | function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/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 | <?php if(catch_that_image()) { echo '<a href="' .get_permalink(). '" title="' .get_the_title(). '"><img src="' .get_stylesheet_directory_uri(). '/timthumb.php?src=' .urlencode(catch_that_image()). '&h=100&w=240&zc=1&q=90"></a>'; } ?> |
change the h=100&w=240 for the size as needed
Voila! it’s done! simple right! :)
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <?php 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() ?> <?php $counter++; ?> <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>"> <div class="clear-fix"> <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>"> <?php thematic_postheader(); ?> <div class="entry-content"> <?php the_excerpt(); ?> <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?> </div> <?php thematic_postfooter(); ?> </div><!-- .post --> </div><!-- .clear-fix --> </div><!-- .column --> <?php 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
1 2 3 4 5 | .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
1 2 3 4 5 6 | <?php 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?php 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() ?> <?php $counter++; ?> <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>"> <div class="clear-fix"> <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>"> <?php thematic_postheader(); ?> <div class="entry-content"> <?php the_excerpt(); ?> <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?> </div> <?php thematic_postfooter(); ?> </div><!-- .post --> </div><!-- .clear-fix --> </div><!-- .column --> <?php 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 | <?php $counter++; ?> <div class="column <?php 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
1 2 3 4 5 6 | <?php <div class="entry-content"> <?php the_excerpt(); ?> <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?> </div> ?> |
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 | <?php 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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() ?>
<?php $counter++; $clear=''; ?>
<div class="column <?php if ($counter == 1) { echo 'one'; } elseif ($counter == 2) { echo 'two'; } else { echo 'three'; $counter = 0; $clear='<div style="clear:both;height:0px;"></div>';} ?>">
<div class="clear-fix">
<div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
<?php thematic_postheader(); ?>
<div class="entry-content">
<?php the_excerpt(); ?>
<?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
</div>
<?php thematic_postfooter(); ?>
</div><!-- .post -->
</div><!-- .clear-fix -->
</div><!-- .column -->
<?php 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
1 2 3 4 5 | .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;} |
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.
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
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 :)
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.
