Build Your Own Custom Ubuntu Live CD

You turn on your trusty old Linux box, and things are going well as you pass through the boot loader, until the disk check reveals that your hard drive partition table is corrupt, and you are unable to access your machine. You need a good rescue disk — and the best way to get one is to create your own.

You can customize an Ubuntu 8.04 Hardy Heron live CD to make a good bootable utilities disk by adding and removing packages from the standard installation. Specifically, you can remove most of the Ubuntu applications and install antivirus, a partition recover tool, a few disk utilities, and a rootkit checker, among other things. I’m going to create the live CD within an Ubuntu installation, but the directions should work for most Debian-based operating systems, and can be easily ported elsewhere. This guide largely follows the community documentation article on the Ubuntu customization process, which is a good place to look for more advanced information and troubleshooting support, while the livecdlist.com wiki is the best place to look for customized directions.

To create and use the Ubuntu-based boot CD, you’ll need a computer with at least 3GB of disk space and 512MB RAM. 1GB of swap is recommended, though I did it with 512 MB.

Create the live CD environment

The first step is to download the Ubuntu 8.04 live CD ISO file for your system type. You can get it from the Web site, or you can use wget on the command line:

wget -v http://releases.ubuntu.com/hardy/ubuntu-8.04-desktop-i386.iso

To work with the image, you’ll need to install a few packages to support the squashfs filesystem format, and mkisofs, the utility to create ISO images. On Ubuntu, you can install them with the command sudo apt-get install squashfs-tools mkisofs.

Now, load the squashfs module, then copy, mount, and extract the contents of the ISO file in order to customize the contents:

sudo modprobe squashfs
mkdir rescue
mv ubuntu-8.04-desktop-i386.iso rescue
cd rescue
mkdir mnt
sudo mount -o loop ubuntu-8.04-desktop-i386.iso mnt
mkdir extract-cd
rsync --exclude=/casper/filesystem.squashfs -a mnt/ extract-cd
mkdir squashfs
sudo mount -t squashfs -o loop mnt/casper/filesystem.squashfs squashfs
mkdir edit
sudo cp -a squashfs/* edit/

You’ll want to customize the CD in a chroot environment. Chroot changes the root directory of the environment, allowing you to access the files and applications inside the CD directly, which you must do in order to use tools like apt-get. In order to use a network connection inside chroot, which you’ll probably want to do to add new packages, you’ll need to copy in the hosts and resolv.conf files to configure your network settings. You can achieve this with the following:

sudo cp /etc/resolv.conf edit/etc/
sudo cp /etc/hosts edit/etc/

Once you’ve completed these steps, you can start to work inside the live CD. Mount the live CD to the edit/dev mountpoint, then change your root directory into the newly mounted volume. You’ll need to mount /proc and /sys volumes to work with the kernel, and export your settings to avoid locale and GPG problems later on:

sudo mount --bind /dev/ edit/dev
sudo chroot edit
mount -t proc none /proc
mount -t sysfs none /sys

export HOME=/root
export LC_ALL=C

Free space by removing unneeded packages

You can configure the packages that are included with the live CD using apt-get or Aptitude. You’ll want to free up some space to add the rescue applications; even though the data is compressed, all of it needs to fit on a 700MB CD or on a higher-capacity DVD. You can remove packages and applications that aren’t useful for the recovery. I chose to remove the OpenOffice.org suite, the GNOME games set, Ekiga, Ubiquity, Evolution, and the GIMP, saving me around 200MB. If you are comfortable without a command-line environment, you might want to get rid of GNOME and Xorg; if you do that, you need not install GParted and the other graphical tools in the next section. In any case, the goal is to get rid of large applications. To sort all of the installed packages by size, run the following command in the chrooted environment:

dpkg-query -W --showformat='${Installed-Size} ${Package}\n' | sort -nr | less

You can use apt-get to remove a package. Use it with the --purge argument to get rid of configuration files. The sudo command won’t work in the chroot, and therefore should be omitted:

apt-get remove --purge package-name

Add rescue applications

Once you have removed all of the unneeded applications from the live CD you can start to add rescue and recovery applications. Generally, rescue CDs include a variety of disk utilities and security tools, as well as networking tools to find support and access outside machines. You may not want all of the applications I mention, and you can add some that I don’t. This is your personal boot CD, and should be configured as you see fit. For ideas about what to include on your CD, you might want to check out some of the prebuilt rescue distributions mentioned in the sidebar.

You can install packages from the repositories using apt-get, but you must add the multiverse repository to your /etc/apt/sources.list file:

deb http://us.archive.ubuntu.com/ubuntu/ hardy main multiverse
deb-src http://us.archive.ubuntu.com/ubuntu/ hardy main multiverse

A disk partition tool is the staple of a mature boot disk. Fortunately, the Ubuntu live CD comes with GParted, the GNOME Partition Editor, so adding a package isn’t required. If you chose to forgo a graphical environment, you should make sure that parted is installed instead to handle partition tables from the command line. If you accidentally delete a partition, installing a program like testdisk can help you recover it, as well as provide a few other basic disk tools. If you are using the ext2 filesystem type and you accidentally delete a file, you’ll find the e2undel package helpful in recovering it. If you need to copy an entire partition from a dying disk, or just want to make a backup, partimage is the way to go. You can also use it to restore a partition with a previously made backup.

If you plan to use this disc with Windows machines, you will want to install antivirus and rootkit tools. Clamscan provides quick and easy virus scan with a command-line-based update tool. Chkrootkit is a scanner to find and remove rootkits that could be hiding in your computer. You can use sleuthkit to conduct analysis of your filesystem and browse through hidden files.

After you finish adding packages, clean up your temporary data and unmount the environment:

apt-get clean
rm -rf /tmp/*
rm /etc/resolv.conf
umount /proc
umount /sys
exit
sudo umount edit/dev

Now, regenerate the manifest (which is basically a list of installed packages) and copy in into the correct directory:

chmod +w extract-cd/casper/filesystem.manifest
sudo chroot edit dpkg-query -W --showformat='${Package} ${Version}\n' > extract-cd/casper/filesystem.manifest
sudo cp extract-cd/casper/filesystem.manifest extract-cd/casper/filesystem.manifest-desktop
sudo sed -i '/ubiquity/d' extract-cd/casper/filesystem.manifest-desktop

Compress the filesystem to squeeze it onto a disc:

sudo rm extract-cd/casper/filesystem.squashfs
sudo mksquashfs edit extract-cd/casper/filesystem.squashfs -nolzma

And finally, create the ISO file:

cd extract-cd
sudo mkisofs -r -V "$IMAGE_NAME" -cache-inodes -J -l -b isolinux/isolinux.bin -c isolinux/boot.cat -no-emul-boot -boot-load-size 4 -boot-info-table -o ../ubuntu-8.04-desktop-i386.iso

Once the image file is created, you need to burn it to a disc. You can do that pretty easily with K3b or Brasero. If you want, you can do it from the command line:

cdrecord dev=/dev/cdrom ubuntu-8.04-desktop-i386.iso

Once the CD is finished burning, you should be able to put it into your optical drive and boot into the environment you just created.

This should give you more than enough information to start building your ultimate custom rescue CD. Add the packages and tools you need, and hopefully you’ll never be at a loss the next time your computer has a problem during startup.

JQuery for Beginners: Using Simple JQuery Effects for a Rockstar User Interface

This is the second part of my series on JQuery for Beginners. Be sure to check out the first part of the JQuery tutorial series where I introduce the framework and show readers show to use selectors, hierarchies, and attributes.

JQuery is a Javascript library that attempts to make things like editing styles, creating animations, and using AJAX much easier than it has been in the past. Let’s be honest: Javascript can be very occasionally be a nasty code to program with, and JQuery attempts to tone it down a little bit and make it much more manageable.

Simple Effects

One of my favorite parts about the JQuery library is the built-in effects, which can be tied into the events manager to animate the appearance and disappearance of elements in the web page. That is, you can make things like div and a elements slide or fade with ease.

So, the first thing we need to do is create a link and a paragraph to play with. My goal is to make the paragraph do things (i.e. slide and fade) when users click on the link. The most important thing is use fill in the id attribute of the paragraph and the link. Without it, JQuery won’t as easily know which elements we are referring to.

<p id="paragraph">This is the demonstration paragraph.</p>
<a href="#" id="link">Click this to do things!</a>

Now, we’ll get started with the JQuery. First, we want to declare a function that runs right when the page loads. We do that with $(document).ready. After that, we need to select the link and drop it into a function. We call the link with $("#link"), and make it react to click. Then, we select the paragraph, and do something with it. Here, we’ll hide it. Here’s the source code:

$(document).ready(function(){
    $("#link").click(function () {
      $("#paragraph").hide();
    });
  });

Slides, Fades, and Toggling

As soon as the page loads, JQuery finds the link and attaches an action to it when the link is clicked. That action, located inside the function, will hide the paragraph called #paragraph. Using the same format, you can swap in a whole variety of effects using the same pattern. For instance, you can make the paragraph fade out with the fadeOut method. Here’s some good ol’ source code for you:

$(document).ready(function(){
    $("#link").click(function () {
      $("#paragraph").fadeOut();
    });
  });

Here’s the full list of effects you can use like this:

• show
• hide
• toggle
• slideDown
• slideUp
• slideToggle
• fadeIn
• fadeOut

Speed and Callbacks

But you want more fine-tuned control, don’t you? Well, you can do two more things with these effects methods. First, you can pass a first argument that controls the speed of the animation. This can use one of three predefined speeds (such as slow, normal, and fast) or a speed defined in milliseconds (134 milliseconds, and not a millisecond more). The other thing you can do is add a callback. A callback is a function that will be called as soon as the effect is complete. For instance, you can make a fast fade out that alerts you when it is done:

$(document).ready(function(){
    $("#link").click(function () {
      $("#paragraph").fadeOut("slow", function () {
         alert("I'm done!");
    });
    });
  });

Custom Effects

So you want to add a little bit more customization that you have with the built-in effects? Well, then it’s time to make a custom animation. I’m going to omit the ready and the click function, so refer to the code samples above if you are still murky on the idea. In general, the custom animation method takes the following form:

$("#paragraph").animate({width: 50%, opacity: 0.5}, "slow", "swing");

The first attribute in the brackets is a series of styles you want to animate to. These are based on CSS. In my example, I’m going to increase the size of the paragraph by 50 percent and I’m going to half the opacity. The next parameter is the duration; here, I’m going to resize and dim slowly. The last parameter is easing. Easing, in a nutshell, controls the evenness of the animation. linear will make it the same speed the entire time. swing will make the animation faster toward the end. You can also include an optional callback as the last function.

I Hate Animations

One problem is that animations tend to destroy the notion of simple web design. Yes, they can add a more natural feel to the UI, but they can also make things a bit too flashy for a minimalist. Therefore, you may want to give users the option of disabling all animations. Anytime the following method is called, all animations will cease to work.

jQuery.fx.off = true;

Of course, you can turn it back on by setting it to false.

Wrap Up

I hope you find this quick premier on JQuery effects useful. Please, add any corrections and suggestions to the comments. And, of course, follow me on Twitter to get notified of the next JQuery installment.

Create a Hovering Scroll to Top Button With JQuery

JQuery Hovering Scroll to Top Button

Looking for an easy way to help your readers power through long web pages? Sick of scrolling for minutes at a time to get to the top of the document? Here’s a simple Scroll to Top button that hovers in the bottom right corner of your screen. Best of all, it’s made entirely from JQuery, CSS, and HTML, so you can easily drop it into preexisting pages and customize it to your hearts content.

The code is largely adapted from Brian Cray and David Walsh, but it’s a combination of the two ideas with the addition of a fade effect on the button and smooth scrolling action. Also, I moved the button to the bottom right corner of the page because I thought it was a little less intrusive. The browser will nicely and smoothly scroll up to the anchor when users click the link, and this is thanks to the super helpful ScrollTo plugin for JQuery, built by Ariel Flesler.

What’s that? You want to see it in action? Okay, you should check out the demo!

And without further ado, here’s the code. First, add the button and the anchor to your web page or template. The button should go at the bottom of your page, right above the </body> tag. And, the anchor should go at the top of your page.

<div id="top"></div> <!--this goes at the top-->
<div id="message"><a href="#top" id="top-link">Scroll to Top</a></div> <!--this goes at the bottom-->

Now, you’ll need some CSS to format the look and feel of the button. As you probably noticed, I left a gap at the bottom of the page so you can read the last few lines of text without being obstructed by the button. Here’s the stylesheet:

.container {padding: 0 0 70px 0;} /* the gap for the bottom */

#message
{
/* display: block before hiding */
display: block;
display: none;

/* link is above all other elements */
z-index: 999;

/* link doesn't hide text behind it */
opacity: .8;

/* link stays at same place on page */
position: fixed;

/* link goes at the bottom of the page */
top: 100%;
margin-top: -80px; /* = height + preferred bottom margin */

/* link is centered */
left: 80%;
margin-left: -80px;

/* round the corners (to your preference) */
-moz-border-radius: 24px;
-webkit-border-radius: 24px;

/* make it big and easy to see (size, style to preferences) */
width: 300px;
line-height: 48px;
height: 48px;
padding: 10px;
background-color: #000;
font-size: 24px;
text-align: center;
}

#message a { color: #fff; }

And, of course, the JQuery. Make sure you have JQuery and the ScrollTo plugin included in the source:

$(function () { // run this code on page load (AKA DOM load)

/* set variables locally for increased performance */
var scroll_timer;
var displayed = false;
var $message = $('#message');
var $window = $(window);
var top = $(document.body).children(0).position().top;

/* react to scroll event on window */
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () { // use a timer for performance
if($window.scrollTop() <= top) // hide if at the top of the page
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false) // show if scrolling down
{
displayed = true;
$message.stop(true, true).fadeIn(500).click(function () { $message.fadeOut(500); });
}
}, 100);
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});

… and there you have it! Let me know how it works for you in the comments, and feel free to share the code snippet with friends. Include your suggestions as well: I’m interested in good ways to expand the functionality.