Identi.ca

Wow. Seems like a large horde of people in Planet Fedora are jumping ship from Twitter to Identi.ca.

While I do have a twitter account, but I'm not that active. Anyway, guess I'll jump to the identi.ca bandwagon too in the spirit of supporting FOSS : http://identi.ca/kagesenshi.

/me anxiously wait for desktop integration (twitux, or similar), and phone based client (jtwitter or similar).

Prism 0.9.0 Static RPM SPEC

Call me impatient of whatever. I've been wanting to use Mozilla Prism. It is not yet packaged in Fedora so I tried my luck to package it properly for Fedora. However, I totally have no idea how Mozilla buildsystem work and how to compile Prism's trunk on Fedora. Trying to follow the Creating XULRunner Apps with the Mozilla Build System lead me nowhere. I got stuck trying to find what package provide the buildsystem and the "client.mk" file, but I given up due to I totally have no clue. In the end, I ended up packaging the official binary tarball released by upstream and make it installed in /opt.

Here is the specfile for those interested to use prism on Fedora: http://izhar.fedorapeople.org/static-specs/prism_static.spec

Like the Static OSS Skype SPEC I made before, just download the corresponding source and invoke rpmbuild with the spec. For those who are not familiar with rpmbuild, the shell commands below will help you


# as root
yum install rpmdevtools

# as user
rpmdev-setuptree
cd ~/rpmbuild/SPEC
wget http://izhar.fedorapeople.org/static-specs/prism_static.spec
spectool -R -g -A prism_static.spec
rpmbuild -bb prism_static.spec

# ... wait ... wait ... wait
# grab the generated RPM
# rpm -ivh (the generated rpm)
# enjoy~


Getting Shrinkable Tabs with Epiphany

One of my grudge against Epiphany is that its tabs goes off-screen when I open lots of tabs and I need to scroll through the tabs to find the tab I wish to switch to. This gets really annoying when I have like a dozen or more of opened tabs.



Googling around, and I was pointed to this epiphany extension from Epiphany 3rd Party Extensions page : Only One Close Button.

From the description:

Only One Close Button

Author: Stefan Stuhr

This extension has several purposes. The first is to get rid of the close buttons on all tabs. The second is to make the tab width more flexible; instead of a fixed width they will scale, so that there will first be overflow with many tabs open. The third is to make a close button available as a toolbar button.

The name might not tell me that is what I want, but the description do. So, I grabbed it, and here goes:



The close button had to be added manually using "Customize Toolbar", and because the Extension purpose is to make theres Only One Close Button, I couldn't get the close button to appear on each tabs like how Firefox handle it. Anyway, having all tabs appear on the same page have much more value than the close button.

Some side stuff,

I have been using Firefox3 for quite a while now. It is promised that FF3 will have better memory management. During the alpha, memory consumption does looks reduced, but lately, it got back like how it was during FF2. With constant 200-300MB of consumed swap and physical RAM maxed out, it gets annoying sometimes (I keep monitoring the RAM/Swap utilization using the gnome-system-monitor panel applet). Closing firefox frees my RAM from 150% to 80% utilization. So, I'm back to my old habit of cycling between epiphany and ff depending on my needs. But firefox still maintain as my primary browser because of the flexibility of the tabs. Now that Epiphany tabs are "better", I guess I can switch Epiphany as my primary browser, and FF and secondary. Midori browser is good too as another backup browser, but lately its been crashing when I start it (and the tabs follow the default Epiphany tabs).

Theme change

New looks for a new year .. :P

Actually, i got annoyed with the old theme where the main section is not wide enough to be comfortable with. Especially when the blog post is long.

So, I decided to google for some new blogger theme and decided to pick this : http://bloggertemplates.itmag.org/2007/11/blogger-template-underground.html. After some hack around and tweaking to my taste, the result is what you see now.

Comments whether this theme better/not than the previous theme are appreciated.

Compiz Fusion 0.5.2 packages | UiTM iHack 2007 | Hakaze 2ch-Type Forum/BBS Engine

Compiz Fusion 0.5.2 Packages

Its available in the main repo now .. both i386 and x86_64 packages ..

a little sidenote about the packages : 1 primary thing .. its not compatible with compiz 0.5.2 package from rawhide due to the one on rawhide is patched with a patch that forces indirect-rendering .. this, causes Nvidia cards to misbehave and also causes fusion-icon to need a patch to inverse its indirect-rendering option to direct-rendering ..


UiTM iHack Competition

I'm entering this competition tomorrow ... 2 days competition .. 1st day - computer forensic competition , 2nd day - ctf competition ... me and my friends entering both - 2 teams ... Hope we'll get 1st/2nd place with ctf like we did last year ..

http://www.tmsk.uitm.edu.my/~i-hack/ (They call it International Hacking Competition, but i have NO idea whats "international" with it .. perhaps its just yet another "Bolehland" attitude)

Hakaze 2ch-Type Forum/BBS Engine

For the past month i was playing with Django to build a forum engine .. I have released its 0.1.0rc1 release.. Its a 100% anonymous board based on a Japanese forum called 2channel..

GoogleCode page: http://code.google.com/p/kagesenshi-private/wiki/Hakaze
0.1.0rc1 package: http://kagesenshi-private.googlecode.com/files/hakaze-0.1.0rc1.tar.bz2
Demo page: http://devel.kagesenshi.org/hakaze/forums/

GPG Encrypt/Sign Texts in Firefox using FireGPG

Carthik Sharma pointed out a new Firefox extension called FireGPG in his blog post.

Just what I'm looking for! :D

Site URL: http://firegpg.tuxfamily.org/

FireGPG is a Firefox extension which brings an interface to crypt, decrypt, sign or verify the signature of a text in any web page, using GnuPG.

It will support some webmails. Right now, only GMail is supported, some useful buttons are added in the interface of this webmail !

FireGPG can sign/ecrypt basically anything in a HTML textarea and can verify anything on screen. However, during my test, if urls in the email was converted to hyperlink (thus, changed from original message), it couldnt verify it. Maybe they should create a function to trim the links or something.

Favourite Icon

Just added a favourite icon for this blog. Thanks to a myOSS member, surface, for his howto.

http://linux.byexamples.com/archives/209/create-favicon/

Template broke on IE6 - Fixed

I just noticed that my current template broke on IE6 at the <pre> tag. CSS overflow:auto doesnt work and made the layout haywire on posts that have some long codes I pasted. I found it out when I was using my father's laptop to enter the blog, and that laptop uses IE6.

After some investigation, I got found out that IE6 does not support CSS max-height and overflow:auto does not work with dynamically sized div/pre. Damn IE6

After googling around, I found a hack on how to make it at least wont break the template here. Now my template happily work with IE6 and W3C compliant browsers. Yay~!

btw, this problem doesn't exist on IE7

OpenDesigns.org : Open Web Templates for your website!

I found something interesting from StumbleUpon yesterday. An OpenSource website template community!!

The Open Design Community (TODC) is a group of Open Source Website Designers providing free web design templates helping to make the global internet a prettier place.
Our Goal

Our goal is to create a community owned and managed site, where users can share their free website designs and templates, discuss web design, and promote their services.

I browsed through the templates hosted there, and they are all awesome!. Almost all of them are well polished and professional looking and a lot are as high quality as expensive commercial web templates.

While browsing though, this Dark Ritual template caught my attention. I thought it'll look great for my blog. So I downloaded it and hacked it here and there to make it fit for Blogger's Layout engine and the product is, you're looking at it now!! (^-^)

Below is the modified Dark Ritual template for use in Blogger. For the image files , you can search and get it from OpenDesigns.org

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/*#############################################################
Name: Dark Ritual
Date: 2006-11-06
Description: Tribal-style three column layout.
Author: Viktor Persson
URL: http://templates.arcsin.se

Feel free to use and modify but please provide credits.
#############################################################*/
/*#############################################################
Changelog
Date: 2007-01-18
Hikaru Amano <http://kagesenshi.blogspot.com>
-> roughly modified template for use in new blogger's layout engine

#############################################################*/


/* standard elements */
* {
 margin: 0;
 padding: 0;
}


/******************************************************/
.post-body pre {
  font-size:small;
  border: 2px dashed #cccccc;
  background: #ffffff;
  max-height:120px;
  overflow:auto;
  color: #000000;

  padding: 2px;
}

textarea, input, select, option, button {
 font-family: Tahoma, Verdana, Arial;
 background-color : #F3F5F4;
 color : #7B9685;
 font-size : 10px;
 border: 1px solid #B9CAC0;
}
/************************************************************/



a {color: #682;}

a img {border:0;}
a:hover {color: #9A6;}

body {
 background: #333 url(img/bg.gif);
 color: #333;
 font: normal 62.5% "Lucida Sans Unicode",sans-serif;
 margin: 3% 0;
}

p,ul {
 padding-bottom: 1em;
}

ul {margin-left: 1.2em;}

li {list-style: none;}
.main li {list-style-image: url(img/li.gif);}

h1 {font-size: 1.2em;}

blockquote {
 background: #FFF;
 border-bottom: 1px solid #EEE;
 border-top: 1px solid #EEE;
 color: #333;
 display: block;
 font-size: 0.9em;
 margin-bottom: 1.2em;
 padding: 6px 12px;
}
blockquote p {padding: 3px 0;}

h1,h2,h3 {color: #994;}

/* misc */
.clearer {clear: both;}
.main_right .padded {padding: 6px 2px 6px 16px;}
.main .padded {padding: 7px 10px;}
.meta {font-size: 0.8em; color: #666;}
.left {float: left;}
.right {float: right;}

/* structure */
.container {
 font-size: 1.2em;
 background: url(img/bgcontainer.gif) repeat-y;
 margin: 0 auto;
 width: 840px;
 border: 12px solid #222;
}

/* header */
.header {
 float: left;
 width: 640px;
 background: url(img/header.jpg) no-repeat;
 font: normal 2.4em Verdana,sans-serif;
        height: 150px;
 line-height: 100px;
 text-align: center;
        vertical-align:bottom;
}


.header h1.title {
    color:#000000;
}

.header h1 a {
    text-decoration:none;
    color:#000000;
}

.header .description {
    font: normal small Verdana,sans-serif;
}

/* structure */
.top {
 background: #222;
 color: #DDD;
 float: left;
 font: normal 1.4em Verdana;
 height: 50px;
 text-align: center;
 width: 639px;
}
.subnav {
 float: left;
 width: 160px;
 color: #CCC;
}
.main {
 float: left;
 width: 480px;
}

.main .post-title {
       font-size: large;
}

.main .date-header {
       font-size:small;
}

.main img {
       border:1px solid #000000;
       padding: 5px;
}

.main .footnav img {
      border:0;
      padding:0;
}
.main_right {
 float: right;
 width: 200px;
 color: #CCC;
}

/* sub-navigation */

.subnav h1 {
 background: #222;
 color: #FFE;
 font: bold 1.1em Verdana,sans-serif;
 line-height: 24px;
 padding-left: 8px;
}
.subnav ul {margin: 0; padding: 0;}
.subnav li {
 border-bottom: 1px solid #696755;
 list-style: none;
}
.subnav li a {
 background: #89866F; 
 color: #111;
 display: block;
 padding: 8px 0 8px 12px;
 width: 148px;
 text-decoration: none;
}
.subnav li a:hover {
 background: #9C997C;
 color: #000;
}


div.widget {
        margin: 0 0 15px 0;
}
/* footer */
.footer {
 background: url(img/bgfooter.gif) repeat-x;
 color: #CCC;
 font-size: 0.9em;
 line-height: 39px;
 width: 100%;
 text-align: center;
}
.footer .left,.footer .right {padding: 0 16px;}
.footer a {color: #EEE;}
.footer a:hover {color: #FAFCB0;}


/** Page structure tweaks for layout editor wireframe */
body#layout { 
padding:0;
margin:0;

}

body#layout #main_wrap {
  width:380px;
}

body#layout #outer-wrapper { 
  width: 740px;
}

body#layout #header{
  width:540px;
  height:50px;
}



]]></b:skin>
</head>

<body>
  <div class='container' id='outer-wrapper'>

<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='&amp;laquo; Shadow Logs &amp;raquo; (Header)' type='Header'/>
</b:section>

 <div class='main_right' id='sidebar_right'>

 <b:section class='padded' id='sidebar' preferred='yes'>
               <!-- Right sidebar widgets here -->
 </b:section>

 </div>
 <div class='subnav'>
 <b:section id='subnav'>
  <!-- Left sidebar widgets here -->
 </b:section>
 </div>
  
 <div class='main' id='main_wrap'>

 <b:section class='padded' id='main_section' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
 </b:section>
<hr id='hrule1'/>
 <b:section class='footnav' id='footer'>
 </b:section>
 </div>
 
 <div class='clearer'><span/></div>

 <div class='footer'>
  <span class='left'> 2006 <a href='index.html'>Website.com</a>. Valid <a href='http://jigsaw.w3.org/css-validator/check/referer'>CSS</a> &amp; <a href='http://validator.w3.org/check?uri=referer'>XHTML</a></span>
  
  <span class='right'>Template design by <a href='http://templates.arcsin.se'>Arcsin</a>. Hacked for use in Blogger by <a href='http://kagesenshi.blogspot.com'>KageSenshi</a> </span>
  
  <div class='clearer'><span/></div>

 </div>

</div>

</body>

</html>          

Hacking Blogger's widgets engine #2

This is my second post about what I've learned from the new Blogger engine. This time, I'll explain the about the widgets, its tags, and how to create your first widget.

Widgets
To those who didnt know it, Blogger widgets are those drag-and-drop able page elements in the new Blogger. By default, you can only choose to use the widgets provided by Google for your page. However, that is not the limit. The widget engine in the new Blogger offers good customization and allows developers to develop their own widgets to share with others!. Its uses HTML for layout and XML for content, therefore, its not hard to create your own widget if you know the basics.

Widget Tags
Widgets are defined using <b:widget> tags. You can read Blogger's documentation about the tag here. The basic is, when you define a widget, you just need to give it an id and a type. For a list of available widget types and it data variables, visit here. Below is an example of a simple widget using the HTML type.

<b:widget id="myWidget" type="blog">

<b:includable id='main'>
   <div style="align:center">
      <h><data:title/></h>
      <data:content/>
   </div>
</b:includable>


<b:widget/>

Writing Your First Widget
Writing a widget is very easy if you have basics in HTML, XML and a little bit of programming. Blogger's widget is a combination of those 3 elements. A program have a main() function, user defined functions and variables. Blogger's widget similar to that. The <b:includable> tags are the functions, and <data:/> tags are the variables. It also support loops and conditional operations. Read here for more information about includes, loops and conditional operations.

A very basic skeleton of a widget contains a widget declaration and main includable.

<b:widget id="myWidget" type="html">

<b:includable id='main'>

     <-- main HTML layout -->

</b:includable>


<b:widget/>

From the skeleton, we can expand it more by adding includes and conditions.

<b:widget id="myWidget" type="html">

<b:includable id='main' var='post'>
     Title : <data:title>
     <b:if cond='data:content == ""'>
     Content : Empty
     <:b:else/>
     <b:include id='printContent'/>
     </b:if>
</b:includable>

<b:includable id='printContent'>
    Content : <data:content/>
<b:includable/>

<b:widget/>

With this, I beleive its already enough for y'all to start writing your own widgets. And if you do, don't forget to share it with the rest of the world.
Sadly though, I couldn't find how to define our own variables. Without user defined variables, it reduces your flexibility when writing the widgets because you'll be depending a lot on built-in variables and widget types. Anyway, good luck :D

LinkedIn : A friend network for professionals

I stumbled upon a url to this site from an email in a mailing list. Being curious, I opened the site. At first glance, I thought it was yet-another-friend networking site like friendster and myspace, but I noticed theres something different with it. So, I click the site's about page and read it.

LinkedIn is an online network of more than 8.5 million experienced professionals from around the world, representing 130 industries.

When you join, you create a profile that summarizes your professional accomplishments. Your profile helps you find and be found by former colleagues, clients, and partners. You can add more connections by inviting trusted contacts to join LinkedIn and connect to you.

Your network consists of your connections, your connections’ connections, and the people they know, linking you to thousands of qualified professionals.

Through your network you can:

* Find potential clients, service providers, subject experts, and partners who come recommended
* Be found for business opportunities
* Search for great jobs
* Discover inside connections that can help you land jobs and close deals
* Post and distribute job listings
* Find high-quality passive candidates
* Get introduced to other professionals through the people you know

Its kindof interesting to me, so I joined it. Feel free to invite me into you linkedIn connections.

Hacking Blogger's widgets engine #1

I just started playing around with the new Blogger's widget based template engine. At first it was confusing because its not normal HTML based template, but a strict XHTML 1.0 XML template. But after a playing around with it for a few hours, I started to understand the elements of the template and started to modify my template little by little (those who entered my blog a few times today might noticed that the template keep changing) and testing what element will affect what values. This is what I've learned so far.

The Template
The template generally consist of 2 significant parts, the layout and the widgets. The layout template is the one Blogger shows by default when you enter edit-html mode. The widgets are shown below the layout template after you check "Expand widget template" checkbox. You only need to change the layout part if you want to customize the base appearance of your blog. If you want more widget specific customization, edit the widget.


Theming
The theming system in the widgets engine depends heavily on CSS. If you scroll down the layout code of the default themes, you'll see that more than 80% of the layout is CSS. XHTML is only used to define how stuff will be arranged and CSS will define how stuff will look like.


Font and Colors
The new engine provide a nice UI interface for changing the color and font values in the CSS code. You just need to define the variables inside the CSS code using <variable> tags and it will appear at the "Font and Colors" setting in Blogger.



Example of a variable definition

<Variable name="bodyBgColor" description="Background Color" type="color" 
default="#cfcfcf" value="#C3D9FF">

Example of using the variable inside the CSS

body {
   background-color: $bodyBgColor;
}

From what I found for now, the variable tag only support 2 types which are color and font. So, you can only use it for CSS font and color settings only.

Thats all I guess for now. I will be posting more of this in the future. So, stay tuned (^-^)