Category Archives: geeks

How to Add Typekit to your Thematic Child Themes

@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){}</script>

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

1
2
3
4
5
function childtheme_typekit() { ?>
<script type="text/javascript" src="http://use.typekit.com/XXXX.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php }
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.

Miabebo Shop: Nursing Covers & Diaper Bags

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.

A week with green PC

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.

c01578420

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.

Using Thematic Child Themes

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

Old themes

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

my thematic childthemes screen shot

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

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
// 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(){ ?>
    		<div id="blog-title"><span><a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo3.png" alt="<?php bloginfo('name') ?>"/></a></span></div>
<?php }
add_action('thematic_header','childtheme_title',3);
 
function childtheme_access(){?>
	<div id="access">
		<?php wp_page_menu('sort_colum=menu_order')?>
	</div> <!--#access-->
<?php }
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)

1
2
3
4
5
6
7
8
9
function analytic_footer() {?>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "XXXXXXX";
urchinTracker();
</script>
<? }
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

Doin It Wrong?

humorous pictures
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.

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

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.

The List

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

  1. Themes lay-out should cross browser compatible. i check it at least to 4 browser: IE 6 and 7, Firefox, Opera and Safari.
  2. Is the comment form awesome or not.
  3. Not using PNG transparency (i’m sorry but i hate to use hacks on IEs)
  4. Check the navigation menu, sometimes IE act nasty on this issue
  5. 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.
  6. 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.
  7. I want to play with font lots more, no more graphic heavy

Well i guess i better start it.

Smush It!

Asleep on a sunbeam
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.

clipboard01

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.

logo

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.

fontsquirrel

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.

Learning Thematic

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.

Awry
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 = '<div id="menu"><ul>';
	$menu .= str_replace( array( "r", "n", "t" ), '', wp_list_pages('include=24,27,28&title_li=&sort_column=menu_order&echo=0') );
	$menu .= "</ul></div>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

<?php
function childtheme_favicon() { ?>
    <link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.ico">
<?php }
add_action('wp_head', 'childtheme_favicon');
 
function home_menu() {
    $menu = '<div class="menu"><ul>';
    if ( is_home() ) {
        $menu .= '<li class="current_page_item"><a href="';
    }
    else {
         $menu .= '<li><a href="';
    }
    $menu .= get_option('home') . '/" title="Home">Home</li>';
    $menu .= str_replace( array( "r", "n", "t" ), '', wp_list_pages('title_li=&sort_column=menu_order&echo=0') );
    $menu .= 	'<li><div class="clear" id="rss-feed"> 
					<a href="http://feeds.feedburner.com/XXXX" class="rss">RSS</a>
					<a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=XXXX&amp;loc=en_US" class="email">Email Updates</a>
				</div></li>';
    $menu .= '<li><form action="'.get_option('home').'" method="get" id="searchform">
					<div class="">
						<input type="text" tabindex="1" size="20" value="" name="s" id="s"/>
						<input type="submit" tabindex="2" value="Search" name="searchsubmit" id="searchsubmit"/>
					</div>
				</form></li>';
	$menu .= "</ul></div>n";
    echo $menu;
}
add_filter('wp_page_menu', 'home_menu' );
 
function analitycs_footer() { ?>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("XXXXXXX");
pageTracker._trackPageview();
} catch(err) {}</script>
<?php }
add_filter('wp_footer', 'analitycs_footer' );
?>
</php>

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

Website Re-design


by stocks photography

After last month setting-up new themes for my site, i notice a hollow point in the flow of the design, i see that there’s not much a room to move with the design, so decided to change it to new themes this January following the spirit of change this month :)

Rather than re-invent the wheel, i intend to create wordpress child themes with a couple tweak on the core themes. I was interested in Vigilance themes since last December last year because of the simplicity and typography, so i use this theme for the site. But because of the nature of child theme force u that u could not change the core file of the themes, i couldn’t make the themes the way i want it, till the end i had to change the themes core file.

Here’s a screen shoot of the new design

here’s a link to view the old design.

The child theme that i create is called vigilante. I use the background from Dinpattern plus Featured Content plugins for the sidebar, i tweak the featured content plugins from showing a certain category to the latest post and rather than putting it in the front like common magazine themes i decided to put it on the sidebar.

Actually the design was not finished yet, because i want to change the header to a certain font but don’t want to use image, sIFR (Scalable Inman Flash Replacement) was the the first thing in my mind and i found a great tutorial from Stefan Vervoort of divitodesign on how to implant sIFR3. For those who are new to sIFR, here’s a quote from divitodesign

sIFR is the “Healthy alternative to browser text”, regarding to the authors Mike Davidson and Mark Wubben. With sIFR it is possible to display fonts on the internet that doesn’t have to be installed on the computer of the user. sIFR creates more typography options for the web!

After a couple hours setting up and browse a hundred font in dafont, i made decision to postpone using sIFR :) i couldn’t find the right font for my name in the header. I dont know, i think i want to learn more about creating logo, i was intending to create business card for my wife anyway. oh yeah i forgot to tell, i also updated my about page and added contact me page :)

Toko Dephe Site Launch

huhuhu never had a time to post on my site since new year :) been a bit busy this month, i create a couple of sites for client and one of the most recent site i create is for my beloved wife website about selling her stuff online :D

Well it’s not online store website, but rather a showcase of her work on customize flannel knit on shirt. She focuses on creating product for children by request. The site provide recent item on customize flannel knit. but enough of her stuff, i’d like to tell u more about the technical stuff of her site.

At first i create her site using a free themes using simple blog design, but long after that i notice that if she continue to use her site, she will get less exposure on her work. I was thinking in upgrading her site to a magazine themes site where the first page will be filled with her product structured by categories. But after a couple of thought the final decision is i was going to use a gallery themes.

Here are the screen shot on the old design

and here are the new design

The explicit advantage of using the new design is the total volume of the index page. The old design with pictures has around 736 kb and it is relative with content of the post, is the post is heavy with pictures or not. While the new design have more fixed size around 384kb to 400kb with more exposure on the index page, it’s fixed because the picture is resized into a fixed size.

To crop the picture automatically i use Darren Hoyt script timbthumb, Thank god for this script, i can downsize the custom field from 3 into one custom field only and the size of the picture is free as long it is wider than 330px.

The themes that i use is an already made theme from snapshoot woothemes, i use it to cut time in developing. Of course i use WordPress as the site engine and the necessary plugin for snapshoot is WP-PostRatings and WP-PageNavi. i also add shadowbox plugin to pop-up the pictures nicely and sharethis button.

In the future i’d like to put more plugins on the site, like db backup and google sitemap, but in the mean time i want to promote this site to my friends. U can visit her site at http://toko.dephe.com but its using Indonesian language. The keyword that i want to associate with the site is kaos flanel. but i’m proposing to her to create new product because i notice that this kind of product is getting dense in here, so the keyword is still not fixed for the site.