Category Archives: IT Posts

UNd web Template

After a break of 3 months, where I was very busy with my internship at Accenture as a Business Intelligence consultant, I’ll try to post more frequently on this blog. To start here’s a brand new template I made, pretty clear without any fancy effects. Use it for free!

Below is a preview of the template and links to download it:

Conky configuration file

A couple of months ago I put on an article about conky, a lightweight application to monitor your system/hardware status.
Here is my new configuration file, this is not actually mine, I took it from the archlinux forum and changed it to fit with my needs.

background yes

use_xft yes
xftfont DejaVu Sans:size=8

update_interval 1
total_run_times 0
double_buffer yes
text_buffer_size 1024

own_window yes
own_window_type normal
own_window_transparent yes
own_window_hints undecorated,below,sticky,skip_taskbar,skip_pager

minimum_size 185 768
maximum_width 185

draw_shades no
use_spacer yes
default_color white

alignment top_right
gap_x 12
gap_y 30

no_buffers no
net_avg_samples 2

override_utf8_locale yes
if_up_strictness address

color0 7bb7ef
color1 c8e4fd
color2 ffffff

TEXT
SYSTEM ${hr 2}
${voffset 2}${font OpenLogos:size=16}B${font} Kernel: ${alignr}${kernel}
${font StyleBats:size=16}A${font} CPU: ${cpu cpu1}% ${alignr}${cpubar cpu1 8,60}
${font StyleBats:size=16}g${font} RAM: $memperc% ${alignr}${membar 8,60}
${font Webdings:size=16}~${font} Battery: ${battery_percent BAT0}% ${alignr}${battery_bar 8,60 BAT0}
${font StyleBats:size=16}q${font} Uptime: ${alignr}${uptime}
${voffset 4}${font Pie charts for maps:size=14}7${font} ${voffset -5}HDD:${alignr}${fs_used /}/${fs_size /}

NETWORK ${hr 2}
${if_up wlan0}
${voffset -6}${font PizzaDudeBullets:size=14}O${font} Up: ${upspeed wlan0} ${alignr}${upspeedgraph wlan0 8,60 F57900 FCAF3E}
${voffset 4}${font PizzaDudeBullets:size=14}U${font} Down: ${downspeed wlan0} ${alignr}${downspeedgraph wlan0 8,60 F57900 FCAF3E}
${voffset 4}${font PizzaDudeBullets:size=14}N${font} Upload: ${alignr}${totalup wlan0}
${voffset 4}${font PizzaDudeBullets:size=14}T${font} Download: ${alignr}${totaldown wlan0}
${voffset 4}${font PizzaDudeBullets:size=14}Z${font} Signal: ${alignr}${wireless_link_bar 8,60 wlan0}
${voffset 4}${font PizzaDudeBullets:size=14}a${font} Local Ip: ${alignr}${addr wlan0}
${voffset 4}${font PizzaDudeBullets:size=14}b${font} Public Ip: ${alignr}${execi 3600 curl http://riivo.eu/php/ip.php}
${else}
${if_up eth0}
${voffset -6}${font PizzaDudeBullets:size=14}O${font} Up: ${upspeed eth0} ${alignr}${upspeedgraph eth0 8,60 F57900 FCAF3E}
${voffset 4}${font PizzaDudeBullets:size=14}U${font} Down: ${downspeed eth0} ${alignr}${downspeedgraph eth0 8,60 F57900 FCAF3E}
${voffset 4}${font PizzaDudeBullets:size=14}N${font} Upload: ${alignr}${totalup eth0}
${voffset 4}${font PizzaDudeBullets:size=14}T${font} Download: ${alignr}${totaldown eth0}
${voffset 4}${font PizzaDudeBullets:size=14}a${font} Local Ip: ${alignr}${addr eth0}
${voffset 4}${font PizzaDudeBullets:size=14}b${font} Public Ip: ${alignr}${execi 3600 curl http://riivo.eu/php/ip.php}
${endif}${else}
${font PizzaDudeBullets:size=14}4${font} Network Unavailable
${endif}

CPU MANAGER ${hr 2}
${voffset 6}${color #e5e5e5}${top name 1}${alignr}${top cpu 1}%
${color #c4c4c4}${top name 2}${alignr}${top cpu 2}%
${color #a3a3a3}${top name 3}${alignr}${top cpu 3}%
${color #828282}${top name 4}${alignr}${top cpu 4}%
${color #505050}${top name 5}${alignr}${top cpu 5}%
${color white}${alignc}${font styleBats:size=14}K${font}

${color white}MEM MANAGER ${hr 2}
${color #e5e5e5}${top_mem name 1}${alignr}${top_mem mem 1}%
${color #c4c4c4}${top_mem name 2}${alignr}${top_mem mem 2}%
${color #a3a3a3}${top_mem name 3}${alignr}${top_mem mem 3}%
${color #828282}${top_mem name 4}${alignr}${top_mem mem 4}%
${color #505050}${top_mem name 5}${alignr}${top_mem mem 5}%
${color white}${alignc}${font styleBats:size=14}U${font}

${color white}DATE ${hr 2}
${alignc 35}${font Arial Black:size=26}${time %H:%M}${font}
${alignc}${time %A %d %B}

Sad grey: css3 template

Here is a brand new blog template.
I tried some features of CSS3 which mean you won’t be able to have the same render with navigators that does not fully support CSS3 yet.

This version of CSS really ease the development of webdesign:

  • Include custom fonts
  • Rounded corners
  • Text’s shadows
  • Multiple backgrounds images
  • And many more…

I am thrilled about all of these and I hope that we will be able to use CSS3 as soon as possible. You can take a look at that blog template I was talking about earlier:

Create your first jQuery plugin

In this article I will show you how to create a simple jQuery plugin menu.
First of all, check this demo so you know where we are heading to: smoothymenu plugin.

As you can see, we will create a plugin to render a menu with fading effect on its items.
The first step to create your plugin is to download the latest jQuery library at jquery.com.

Now you can create a new JavaScript file, this file will contain the main function of our plugin (our plugin will also use a CSS file). To declare a plugin function in jQuery you have to use this syntax:

jQuery.fn.smoothymenu = function() {}

Before we get started with the Javascript let’s take a look at an HTML example file. By doing this we can define the basic structure of our menu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>SmoothyMenu Jquery plugin</title>
	<link href="css/smoothymenu.css" rel="stylesheet" type="text/css" media="screen"></link>
	<script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="lib/jquery/smoothymenu.jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('ul#menu').smoothymenu();
		});
	</script>
    </head>
    <body>
        <h1>SmoothyMenu Jquery plugin</h1>
 
	<ul id="menu">
		<li>
			<a href="#">Home</a>
		</li>
		<li>
			<a href="#">Contact</a>
		</li>
		<li>
			<a href="#">About</a>
		</li>
	</ul>
    </body>
</html>

As you can see I apply my plugin on a list with an id. Now we can write our plugin, the first step is to retrieve the element we will work with. In or case the list, to do that you can create a variable:

var menu = $(this);

After that, we want to apply some styles to our menu so we will programmatically add a class to the menu. This class is in our CSS plugin file and will be provide with the JavaScript file (of course the end user will be able to customize the CSS to match his needs).

menu.attr('class', 'smoothymenu');

Here is the trick to create the fade in/out: we add a block to each menu item, if the mouse if out of the item it will be not visible, when the user will hover an item we will fade it in and vice-versa.

/* Append the specific effect block to each menu items. */
menu.find('li').append('<div class="hover-effect"></div>');
 
/* Apply an effect on the hover of an element of the menu. */
menu.find('li').bind('mouseover', function(){
	$(this).find('div.hover-effect').stop().fadeTo('fast', 1);
});
 
/* Apply an effect when the mouse is out of an element of the menu. */
menu.find('li').bind('mouseout', function(){
	$(this).find('div.hover-effect').stop().fadeTo('fast', 0);
})

Ok we are done, of course you can add parameters to your function and do more complexes operations.
I tried to keep it it simple in this example, to sum up here is the whole smoothymenu plugin function:

jQuery.fn.smoothymenu = function()
 {
 	var menu = $(this);
 
	/* Define the class of the menu */
	menu.attr('class', 'smoothymenu');
 
	/* Append the specific effect block to each menu items. */
	menu.find('li').append('<div class="hover-effect"></div>');
 
	/* Apply an effect on the hover of an element of the menu. */
	menu.find('li').bind('mouseover', function(){
		$(this).find('div.hover-effect').stop().fadeTo('fast', 1);
	});
 
	/* Apply an effect when the mouse is out of an element of the menu. */
	menu.find('li').bind('mouseout', function(){
		$(this).find('div.hover-effect').stop().fadeTo('fast', 0);
	})
 };

You can download the sources right here: smoothymenu jquery plugin sources (see the demo).

Write a simple Google Chrome extension

An extension is a small piece of programm which add features to your web browser. In Google Chrome we will simply use HTML/CSS & Javascript to build our own extention.

The first step to build your extension is to declare a manifest.json file. JSON is a simple data exchange format (you can see a JSON file like a XML file if you want). This manifest.json file contains information about our extension: its name, description, or version. But, more importantly it will declare which libraries/api we will use and how we want to display it into the browser.

In this article we will create a simple extension to display the tweets from someone, lets started with the manifest.json file:

{
	"name": "Chrome Tweets",
	"version": "1.0",
 
	"description": "Displays tweets of someone.",
	"icons": { "128": "icon.png" },
 
	"browser_action": {
		"default_icon": "icon.png",
		"default_title": "Chrome Tweets",
		"popup": "index.html"
	},
 
	"permissions": [
		"http://twitter.com/*"
	]
}

Most of those declarations are easy to understand. Look more precisely the brower_action and the permissions blocks:

  • Our extension will be a browser action which means we want it to be available in the browser and not in a webpage (for instance subscribe to a rss feed is a page action, check regularly your gmail account is a browser action). We define an icon for our extension, and we also set the page to open when the user will click on our icon.
  • Then we have to declare permissions. It this example we will need the twitter api.

Once you have done this manifest.json file you have all you need to deploy your extension, the rest is only html/css & JavaScript like you do to develop a web site.

Now you have got to load your extension, to do that just go to the extensions management page: chrome://extensions/, enable the developer mode and load an unpacked extension.

We will see how to interact with the twitter API to retrieve all the tweets from someone and we will use a simple list template to display those tweets. To see where we are going you can take a look at the final result:

The HTML page of our extension

<html>
	<head>
		<script src="tweets.js" type="text/javascript"></script>
		<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
    <body>
        <h1 id="mainTitle">Chrome Tweets</h1>
		<div id="loader"></div>
		<div id="profile">
			<img />
			<p></p>
		</div>
		<div id="tweets">
			<ul id="timeline" />
		</div>
 
		<ul id="template">
			<li>
				<div class="text">
					<span></span>
					<a></a>
				</div>
			</li>
		</ul>
    </body>
</html>

You can easily understand this code when you compare it with the preview. The main code will be in JavaScript, if you want you can use a library like jquery to work with JSON object faster, in this example I have done it without any library.

var timeline;
var author;
var image;
 
var template;
var content;
var link;
 
var req;
var tweets;
 
onload = setTimeout(init, 0);
 
function init() {
	displayLoader(true);
 
	/* Retrieve various part of the page */
	timeline = document.getElementById('timeline');
	template = xpath('//ul[@id="template"]/li', document);
	author   = xpath('//div[@id="profile"]/p', document);
	image    = xpath('//div[@id="profile"]/img', document);
	content  = xpath('//div[@class="text"]/span', template);
	link     = xpath('//div[@class="text"]/a', template);
 
	/* Send the request */
	req = new XMLHttpRequest();
	req.open('GET', 'http://twitter.com/statuses/user_timeline/flhacqueba.json');
	req.onload = process;
	req.send();
}
 
function process() {
	var res = JSON.parse(req.responseText);
	tweets = res.concat(tweets);
	update();
}
 
function update() {
	displayLoader(false);
 
	var user;
	var item;
 
	for(var i in tweets) {
		user = tweets[i].user;
 
		/* Profile : only on the first tweet to fill the profile div */
		if (i == 0) {
			author.innerHTML = user.screen_name;
			image.src = user.profile_image_url;
			image.alt = user.name;
		}
 
		/* Add a tweet */
		content.innerHTML = tweets[i].text;
		item = template.cloneNode(true);
		timeline.appendChild(item);
	}
}
 
function xpath(expression, node) {
	return document.evaluate(expression, node).iterateNext();
}
 
function displayLoader(bool) {
	var loader = document.getElementById('loader');
	if (bool) {
		document.getElementById('tweets').style.display = 'none';
		loader.innerHTML = '<img src="ajax-loader.gif" alt="loading..." />';
	}
	else {
		document.getElementById('tweets').style.display = 'block';
		loader.innerHTML = '';
	}
}

As you can see, this is a simple Javascript code using an XmlHttpRequest object. Most of the hard work is done by the Twitter API.

First of all we initiated the request to retrieve the tweets, once twitter gave us our answer (a JSON file) we parse it and generate our list item.

Furthermore you can add more features: add an input box to give the user the ability to choose the tweets to get, get your friends list tweets or add a text-area to add a new tweet to your account. To do that you will have to use OAuth, check out the Twitter API documentation to get more info on this subject.

WIP : SlickPong

Here is another project I am currently working on, it is a pong like game called SlickPong. Why SlikPong? Because Slick is the name of the Java library I am using to develop this game.

Slick is a 2D Java game library based on LWJGL. This library really ease the development of games, a bad point about it is the lack of documentation in the API but you will find plenty of tutorials to fill this void.

For now the ball can bounce on the screen and I handle the player movement. I am currently working on the collisions between the player & the ball. You can follow this project on GitHub, get the sources if you want: http://github.com/flhacqueba/SlickPong

Enhance native looking of Netbeans on Linux

Netbeans is an IDE that I use to develop Java softwares but, if you have already launched this software on Linux you may have noticed that the font rendering and the global UI aren’t that good, and it is not comfortable to work in an environment like that.

I am talking about the ugly Swing’s default theme and more especially the lack of a decent font rendering. Fortunately, you can fix those issues with options. You have to passed those arguments when you are launching Netbeans.

First of all, we will see the options needed to fix the fonts:

netbeans -J-Dswing.aatext=true -J-Dawt.useSystemAAFontSettings=on

If you try it now, I bet you will like the fonts, it is much better. Second of all, the GUI well I should called it the Look & Feel of the software. We will change the Swing L&F to your current GTK L&F:

netbeans --laf com.sun.java.swing.plaf.gtk.GTKLookAndFeel

And you are done, you should now have something like that (depends on your GTK theme of course, but it does not look like a foolish software anymore).

It is important to know that you should put those options in the netbeans.conf file which contains a variable with all the options netbeans should load on startup. It depends on the installation folder of netbeans but in my case the location of this file is /usr/share/netbeans/etc/netbeans.conf. Edit this file and add the options to the netbeans_default_option variable. It should looks like that:

netbeans_default_options="-J-Dswing.aatext=true -J-Dawt.useSystemAAFontSettings=
on --laf com.sun.java.swing.plaf.gtk.GTKLookAndFeel"