Less Talk, More Example

Upgrading Ubuntu using Alternate ISO

noreply@blogger.com (Less Talk, More Example) — Thu, 11 Feb 2010 04:38:00 +0000

The Goal

Upgrading ubuntu using alternate ISO without having to burning it to the CD. We mount the ISO manually and install from there.

The Process

Important, upgrading an ubuntu require you to do it in sequence manner. For example, if your current version is Ubuntu 8.04 and you want to upgrade to Ubuntu 9.10 you must upgrade to 8.10 first, then 9.04 and finally 9.10. This tutorial cover upgrading from Ubuntu 9.04 to 9.10. So, here we go.

Download ubuntu-9.10-alternate-i386.iso from one of download mirror.
Save it to somewhere i.e. /home/abc/ubuntu-9.10-alternate-i386.iso
Mount the ISO $ sudo mount -t iso9660 -o loop /home/abc/ubuntu-9.10-alternate-i386.iso /media/cdrom0
Execute the cdromupgrade script. $ cd /media/cdrom0 $ sudo ./cdromupgrade &
It's better to choose "No", and only fully upgrade from the iso.
The upgrade process would start immediately.
After all procress complete, restart your system.
After logged in open the terminal and check the current Ubuntu version. $ sudo lsb_release -a Distributor ID: Ubuntu Description: Ubuntu 9.10 Release: 9.10 Codename: karmic
Enjoy your brand new Ubuntu :)

Updating Twitter Status via Shell Script

noreply@blogger.com (Less Talk, More Example) — Mon, 08 Feb 2010 13:35:00 +0000

The Goal

Updating twitter status via shell script. The command used to send the HTTP request is POST a.k.a lwp-request (a perl script) that included in most linux distribution.

The Process

Open your text editor i.e. gedit/geany/etc or even vi you are die hard fans of this editor.
Copy and paste code below. #!/bin/bash # TUNAME="lesstalkme" TUPASS="" TSTATUS="" TURL="http://twitter.com/statuses/update.xml" TDATA="source=LTME&status=" # print some fancy header :) echo "-----------------------------------------" echo " Twitter Status Updater" echo " http://www.less-talk-more-example.info/" echo "------------------------------------------" echo -n "Twitter Password: " read -ers TUPASS echo -e " Enter Twitter Status:" read TSTATUS # replace some characters ( I'm too lazy to replace all the characters :)) TSTATUS=`echo $TSTATUS | sed 's/ /%20/g'` # space => %20 TSTATUS=`echo $TSTATUS | sed 's/@/%40/g'` # @ => %40 TSTATUS=`echo $TSTATUS | sed 's/\//%2F/g'` # / => %2F TSTATUS=`echo $TSTATUS | sed 's/:/%3A/g'` # : => %3B TSTATUS=`echo $TSTATUS | sed 's/#/%23/g'` # # => %23 # now POST the data echo "" echo -n "Updating status..." echo "${TDATA}${TSTATUS}" | POST -C $TUNAME:$TUPASS $TURL | grep $TUNAME > /dev/null # check status # ------------ # successfull request always return XML format that containts our username # so we grep that to check the status if [ $? -eq 0 ]; then echo "DONE."; else echo "ERROR."; fi
Replace TUNAME value with your own username.
Save to somewhere i.e. /tmp directory just for testing.
Name it twitter.sh
Open the shell terminal in GNOME System » Application » Terminal
Go to /tmp directory and give execute permission to the file. $ cd /tmp $ chmod +x twitter.sh
Execute the file, you'll be promted to enter twitter password and status. $ ./twitter.sh
Fill it and voila!! your twitter status has been updated :).

Screencast

Download the Code

twitter.sh.zip via ziddu.com.
Size: 0.69kb
MD5 Checksum: f9d38c632430a617331cc4f8d298fcf1

Creating a Simple Wordpress Plugin

noreply@blogger.com (Less Talk, More Example) — Sun, 07 Feb 2010 12:47:00 +0000

The Goal

Creating a simple plugin that replace  with BIG and colored "Less Talk, More Example" words. Take a look at images below.

The Process

Open your text editor then create a new file.
Copy and paste code below. <?php /* Plugin Name: LTME Plugin URI: http://www.less-talk-more-example/ Description: Simple plugin to subtitude the  string BIG "Less Talk, More Example" string. Author: Rio Astamal Version: 1.0 Author URI: http://www.rioastamal.net/ */ // print some CSS to the header function ltme_head() { echo '  <style type="text/css"> .ltme { padding: 20px 12px; font-size: 2em; font-weight:bold; border: 1px solid #ccc; background: #E5E5E5; } </style>  '; } // function to replace the  string function ltme_replace($post_content) { $replacement = '<div class="ltme" style="color: $1">Less Talk, More Example</div>'; $post_content = preg_replace('//', $replacement, $post_content); // if we enter using visual mode, wordpress intrepet the <!-- string differently $post_content = preg_replace('/<!–ltme=([a-zA-Z#0-6]+)–>/', $replacement, $post_content); return $post_content; } // Register our hooks add_action('wp_head', 'ltme_head'); add_filter('the_content', 'ltme_replace'); ?>
Save the file to path wp-content/plugins/ltme.php
Now, activate the LTME plugin
Write some content that include LTME special tag. Hello LTME Reader, This is example of simple plugin creation on wordpress. Print LTME with green color  print LTME with #c60000 color 
Publish your post, the result should look like this
Congratulation for your first Wordpress plugin :)

Wordpress Version

Tested on Wordpress version 2.8.4 but should work for all version.

Download the Code

Having trouble copy or paste the code? Download the file here:
ltme-plugin.zip via ziddu.com.
Size: 0.72kb
MD5 Checksum: f8898209768ed7524afa4c59eefc82ee

Animated CSS Progress Bar

noreply@blogger.com (Less Talk, More Example) — Sun, 07 Feb 2010 07:28:00 +0000

The Goal

Creating animated progress bar using javascript and pure CSS. The final result will look like this:

The Process

Open your favorite text editor and create a new file.
Copy and paste code below: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Animated CSS Progress Bar</title> <style type="text/css"> div.progress-container { border: 1px solid #ccc; width: 200px; margin: 2px 5px 2px 0; padding: 1px; float: left; background: white; position:relative; } div.progress-container div { background-color: #ACE97C; height: 20px; } div.progress-container span { width:200px; text-align:center; float:left; font: normal 12px Arial,sans-serif; margin-top: 3px; } </style> </head> <body> <div class="progress-container"> <span id="progress_text">0%</span> <div id="progress_bar" style="width: 0%"></div> </div> <script type="text/javascript"> var forever = true; function start_anim() { var ptext = document.getElementById('progress_text'); var pbar = document.getElementById('progress_bar'); var curval = parseInt(pbar.style.width); var speed = Math.floor(Math.random() * 250) + 10; document.title = "Speed: " + speed; curval++; ptext.innerHTML = curval + '%'; pbar.style.width = curval + '%'; if (curval > 99) { if (forever) { pbar.style.width = '0%'; setTimeout('start_anim()', speed); } } else { setTimeout('start_anim()', speed); } } start_anim(); </script> </body> </html>
Save the file with .html extension i.e: css-js.html
Open the file using your web browser
Done.

Tested Browser

Firefox 3.5
Chrome 4.0.2
Opera 10

Download the Code

animated-css-progress-bar.zip via ziddu.com.
Size: 0.9kb
MD5 Checksum: d82877115e220fedcf15b04673404ef1

Creating Pure CSS Progress Bar

noreply@blogger.com (Less Talk, More Example) — Sun, 07 Feb 2010 04:36:00 +0000

The Goal

Creating progress bar using pure CSS. The final result will look like this:

54%

The Process

Open your favorite text editor and create a new file.
Copy and paste code below <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Progress Bar</title> <style type="text/css"> div.progress-container { border: 1px solid #ccc; width: 200px; margin: 2px 5px 2px 0; padding: 1px; float: left; background: white; position:relative; } div.progress-container div { background-color: #ACE97C; height: 20px; } div.progress-container span { width:200px; text-align:center; float:left; font: normal 12px Arial,sans-serif; margin-top: 3px; } </style> </head> <body> <div class="progress-container"> <span id="progress_text">54%</span> <div id="progress_bar" style="width: 54%"></div> </div> </body> </html>
Save it to some location i.e. css-pbar.html
Open the file using web browser
Done.

Tested Browser

Firefox 3.5
Chrome 4.0.2
Opera 10

Download the Code

css-progress-bar.zip via ziddu.com.
Size: 0.72kb
MD5 Checksum: 76424cd4f26e5ab2f1e75557e17ba41b

Install Apache Ant on Ubuntu Linux

noreply@blogger.com (Less Talk, More Example) — Sun, 07 Feb 2010 03:29:00 +0000

The Goal

You can install Apache Ant on Ubuntu Linux using manual installation method.

The Process

My Environment

My $HOME is located in /home/ltme
I put Ant package in $HOME/archive/a
I extract the package to $HOME/programs
My Ant version is 1.7.1

Pre-Installation

You must have Java Development Kit (JDK) installed first, refer to this article if you not install the JDK yet.

Installation

Download the latest version of Ant from http://ant.apache.org. Saved to some location i.e: I save to $HOME/archive. First we need to extract the package. $ tar -jxvf ~/archive/a/apache-ant-1.7.1-bin.tar.bz2 -C ~/programs $ cd programs $ ln -s apache-ant-1.7.1 ant
The next step is to add Apache Ant directory to shell environment variables. So we need to edit .bashrc file located in our home directory. $ gedit ~/.bashrc
Put this at the end of .bashrc file, after editing your file look something like this: JAVA_HOME=/usr/local/java JAVA_BIN=$JAVA_HOME/bin ANT_HOME=/home/astadev/programs/ant PATH=$PATH:$JAVA_HOME:$JAVA_BIN:$ANT_HOME/bin export PATH
Save the file, and then open new bash session by pressing CTRL-Shift-T. Try to execute ant. $ ant Buildfile: build.xml does not exist! Build failed
Done.

Error above indicate that ant command is recognized by shell but it did not find build.xml file that needed to compile ant projects. So, it's absolutely normal and the installation was successful.

Install Java (JDK) on Ubuntu Linux

noreply@blogger.com (Less Talk, More Example) — Sat, 06 Feb 2010 12:41:00 +0000

The Goal

You can install Sun JDK on Ubuntu Linux using "unpack and run" method not via apt-get.

The Process

Download the Sun JDK for Linux from http://java.sun.com/
Open the terminal to extract the package, move to the saved location first: (I assume you save it to your home directory) $ cd /home/user $ sh jdk-6u7-linux-1586.bin
You will be asked "License Agreement" and type yes to Agree. $ sudo mv jdk1.6.0_07 /usr/local $ sudo ln -s /usr/local/jdk1.6.0_07 /usr/local/java
Check the current java that running on your system $ update-alternatives --list java /usr/bin/gij-4.2
After running that command we knew that there is no alternative for java. So, we need to add our new JDK to the alternatives. $ sudo update-alternatives --install /usr/bin/java java /usr/local/java/bin/java 100 $ sudo update-alternatives --config java There are 2 alternatives which provide `java'. Selection Alternative ----------------------------------------------- * 1 /usr/bin/gij-4.2 + 2 /usr/local/java/bin/java Press enter to keep the default[*], or type selection number: 2 $ java -version java version "1.6.0_07" Java(TM) SE Runtime Environment (build 1.6.0_07-b06) Java HotSpot(TM) Client VM (build 10.0-b23, mixed mode, sharing)
Now let's test our new environment, for this purpose we will create simple Java program. Open your favorite text editor, e.g gedit (Application - Accessories - Text Editor) and try this following code. public class Hello { public static void main(String[] args) { System.out.println("Hello World!"); } }
Save it to some location, since this is only a test I would recommend to save it under /tmp directory. I name it Hello.java.
We need to add /usr/local/java in shell environment variables by editing .bashrc file located in our home directory. $ gedit ~/.bashrc
Add the following lines into .bashrc (put these code at the end of file). JAVA_HOME=/usr/local/java JAVA_BIN=$JAVA_HOME/bin PATH=$PATH:$JAVA_HOME:$JAVA_BIN export PATH
Save the file and close the editor. Now we need to close our Terminal to take affect. Open the terminal again and try to compile Hello.java. All the things should work :). $ cd /tmp $ javac Hello.java $ java Hello Hello World!
Done.