Using Web Fonts in CSS3

Currently, you can only use about 10 to 15 types of fonts on the web without having to create time-consuming and non-Google friendly images. In order to promote and further the idea of simple web design, it would be better to use plain text. Thankfully, you can use CSS3 web fonts along with other typography techniques to dress up the font on your website.

As a disclaimer, remember that CSS3 is not universally supported yet by all browsers, so use the following techniques with caution. Off of the top of my head, I believe that this is supported in Webkit (Safari, Chrome) and Firefox, but if I’m wrong let me know in the comments.

Import Web Fonts Into Your Design

With CSS3, you can import fonts into our design much like you import video, images, text, and scripts. First, find a font on the web that you would like to use. Generally, it has to be publicly accessible in a TrueType format (.ttf). For this example, I’m going to use the Kimberley TrueType font referenced recently on A List Apart.

To import the font, merely reference it as follows in the stylesheet:

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}

The @font-face selector indicates that you are declaring a font for use in the stylesheet. The font is named (anything you like) after the font-family: selector. The path to the font is referenced via the src: attribute.

Now, you can use the font in CSS as you would any other font by using the name you previously gave the font.

h1 { font-family: "Kimberley", sans-serif }

You can use this pattern to import a huge variety of fonts without hosting any of them on your site or by creating cumbersome images. One issue, though, is copyright issues attached to fonts you find on the internet. You should either ask permission before using a font, or find a font that is Creative Commons friendly.

Interested in learning more about simple web design? You can follow @simplrdesgn on Twitter, join the Cherrysave Facebook page, or read along by subscribing to RSS.

The Semantic Web: Speaking to Humans With Readable Code

The semantic web consists of teaching computers to understand the meaning of web content. You should earn the advantages of writing on the semantic web when working on web development projects because search engines (and people) strongly rely and prefer code that makes sense intuitively instead of having to read pages of documentation and confusing inline comments.

What is the Semantic Web?

So what exactly is the semantic web? It turns out that it is difficult to define it simply, yet I’ll try anyway. The semantic web is best described as structured data. The main goal is to take the structure that the web and some applications have as a whole — URLs, categories, tags — and apply them to the data represented by code. That is, the semantic web envisions an interconnected web of data.

Many consider the semantic web to be a founding anchor of Web 3.0. British engineer Tim Berners-Lee envisions a web with SVG graphics built on a well-organized and self-descriptive (tagged, friended, categorized) Web 2.0. The semantic web promises to organize the world’s information in a dramatically more logical way.

Riding the Semantic Web: Organizing Your Code in a More Cohesive Way

The current HTML schema doesn’t have much support for the semantic web. In fact, one of the few ways you can tell computer systems about the actual content of your page and not just the display properties is through the meta tags. Using that, you can tell search engines about things like the title and keywords associated with a piece of content, but you can’t do much more than that.

Yet, there are some things you can do with the semantic web when you code to take advantage of semantic principals. And the best part is that they tend to be quite simple. Here’s a few examples of some of the things you can do:

• For headings, use a heading tag (h1, h2, h3, etc...)
• For paragraphs, use a paragraph tag (p)
• For lists, use a list item tag (li, ol, ul, etc...

Like I said, these are really simple principals, yet it can make a huge difference in the readability and clarity of code for both web developers, computers, and end-users. For example, look at the difference between the following two snippets of code:

Non-semantic

<span id="heading-1"><font size="8" color="black"><strong>Heading 1</strong></font></span>

Semantic

<h1>Heading 1</h1>

Obviously, the second snippet is much more simple for people and for computers (read: search engines and data miners) to read, and they should (or could) look about the same in a web browser.

The Advantages of Writing in Semantic Code

There are at least two advantages in taking advantage of the semantic web. First, computers can how understand the content of your page and make use of that. For example, in the current iteration of HTML, you can tell search engines the title and content of your page with the meta. In the future, Amazon could tell computers, in code form, the type and style of the products on their web page. The books would be classified as such, dramatically improving the categorization and usability of the internet. The second benefit is that it will improve communication between web developers and designers. Engineers will instantly understand what the code is attempting to model much more so than if one was using the common universal tags.

That’s all well and good, but I’m sure you’re looking for a better way to currently take advantage of the semantic web. XFN (XHTML Friends Network) uses data in the rel attribute to describe relationships between people. For instance, I could link to my friend Creed, whom I’ve met in real life, in the following way:

<a href="http://www.creedsblog.us.creedsthoughts.office.doc/" rel="met friend">

From the rel tag, you can see that I’ve met Creed, my friend, in real life (when he was stealing things out of my garage). The key to the semantic web, though, is that computers should be able to easily parse the meaning of those friend relationships. You can use a CSS snipet to do that:

a[rel~="friend"] {font-weight: bold;}

That will bold all of your friends via the stylesheet on a given page.

Of course, these are merely the beginnings of the semantic web. There will be undoubtedly more ways to classify and organize data on the web. Keep in touch with these updates by subscribing to the RSS feed or following me on Twitter.

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.