Thought I'd show some updates to the work Jenn and I are doing to redo our bathrooms in the new house. All three full bathrooms had awful green 70's tile which we're removing and replacing. One bathroom (the master) has a green tub as well...we'll be getting that resurfaced.

The steps have been as follows:

1. Remove old tile, being very careful to preserve it to donate to habitat
2. Remove existing rotted drywall
3. Clean all surfaces
4. Put up concrete backer board
5. Cut tile, apply mortar, put tile up (usually 4-5 stages per room)
6. Grout tile
7. Seal tile
8. Apply Caulk
9. Replace Fixtures

I've been developing a site where I'm using wordpress as a CMS more than a blog, for many reasons. I'm very familiar with it, I like the automated SEO, I think it's simple to use, etc. But one big challenge is the menu navigation and how to set it up. I want this to be automated and I don't want to have to edit the menu every time there's a new page.

To clarify the terms, there's a menu with "solutions" then "products" with 3 sub categories "indoor" "outdoor" and "media players." Plus there's a "guides" area and a "blog" area.

The menu system is handled by the category management. If a page is made that goes into the menu, you simply tag it with the category where it should go. You can click the main header of the menu to go to a page with all the posts in the category. Then you hover over the header of the menu, and I want a dropdown menu with a list of posts in there. I want to limit this to a certain number of posts, then have a button for "more" at the bottom. You can see an example here.

Let's take a look at the code at the start of my menu. This basically encapsulates the markup for the menu, and for the first dropdown. I have this in a separate "nav_menu.php" file but it could go in your header as well.

   <div id="nav_menu">
   <ul id="main-nav">
    <li id="solutions-nav" class="singlelevel"><a href="./?cat=9&amp;feature=solutions">Solutions For...</a>
     <div class="subnav">
      <ul>
        <?php query_posts('cat=9&posts_per_page=10&orderby=title&order=ASC'); ?>
       <?php while (have_posts()) : the_post(); ?>
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
       <?php endwhile; ?>
       <li><a href="./?cat=9">More...</a></li>
      </ul>
     </div>
    </li>

So, take a look at the php code there. First of all, important to note, this disrupts the wordpress loop so we'll need to fix it a little bit later. First, it does a post query limiting the list to one category (you can search by "category_name" but I'm a fan of the Id's) and then setting a limit to how many to pull; I chose 5 by default. Then, there's a while loop that pulls some data from each post and formats it into a listed menu entry. After the while loop closes, I throw out the "more" button which queries the whole category for posts.

If you do just that, every time you try to list posts you'll pull a list of every post you've got and it will supremely annoy you. You need to reset your post query to be able to limit it to the page at hand. At the bottom of my theme's "header.php" file, right before the posts would get displayed by "index.php," I added the following php line:

<php query_posts('cat='.@$_GET['cat'].'&p='.@$_GET['p']); ?>

This will pull the post list based on the categories selected or the specific post listed; all of my links and navigation are handled through those 2 "GET" variables so it will limit the posts queried to anything selected. Make sure to put the @ before $_GET to suppress any errors the get command gets, for example, if there's nothing passed.

I found a lot of disjointed instructions for rooting to the palm pre in linux, so I thought I'd document the process I used to make it work. These instructions were written using Ubuntu 9.04 Jaunty Jackalope and WebOS version 1.1.0.

1. Add the repository for virtualbox to your sources list. For Ubuntu 9.04, add deb http://download.virtualbox.org/virtualbox/debian jaunty non-free A list of repos for other distros can be found here: http://www.virtualbox.org/wiki/Linux_Downloads, or if you want to download the .deb and install it that way, go here and choose version 2.2: http://www.virtualbox.org/wiki/Download_Old_Builds I know V-Box is past 3 now, but I had the most success with 2.2. The source for the GPG key can be found here: http://download.virtualbox.org/virtualbox/debian/sun_vbox.asc. Virtualbox is a virtual machine platform that acts as a development platform for the pre, so you may not use it much, but you should do it anyway.
2. Install virtualbox using the following command: sudo apt-get install virtualbox-2.2
3. Install the Java JRE using the following terminal command: sudo apt-get install sun-java6-jre
4. Download the Palm Mojo SDK at the following website: http://developer.palm.com/index.php?option=com_ajaxregister&view=register&sdkdownload. You will be asked to register as a developer, at which point you will be able to choose to Download the sdk, and you should choose the Linux SDK, which will say it is designed for Ubuntu 8.04.
5. The SDK is a .deb file. You should double-click this file, which will prompt you to install. Install the package.
6. Download the Novacom Driver from the following link: https://cdn.downloads.palm.com/sdkdownloads/1.1/sdkBinaries/palm-novacom_0.3-svn177284-hud9_i386.deb Install it exactly as you did the SDK
7. Open your palm pre and load the launcher. Type the following text EXACTLY: upupdowndownleftrightleftrightbastart
8. This will launch a dialogue asking you to put the phone into dev mode. Slide the switch to activate dev mode, and agree when it asks you to reboot the phone. This same procedure is used to remove the phone from developer mode, and you will be asked to do that later.
9. Once the phone comes back on, plug it into the computer using the USB cable, and choose "Just Charge" on the phone's screen.
10. You now have terminal access to your phone. Open a terminal and type: cd /opt/Palm/novacom If this doesn't work, some people report the files for novaterm are located in /opt/nova/bin
11. Type novaterm and you should be brought to a command prompt that displays:"root@castle:/#
12. Before taking this step, make sure you either have a data signal, or make sure you have wifi access; you need the internet here. Type the following command in EXACTLY to enable Optiware . In fact, it's probably wise to copy and paste them into your terminal: cd /tmp
wget http://gitorious.org/webos-internals/bootstrap/blobs/raw/master/optware-bootstrap.sh
sh optware-bootstrap.shFollow the on-screen instructions to complete the setup.
13. This step istalls the "Quilt" patch manager (pun intended.) Type the following code in exactly: cd /tmp
wget http://gitorious.org/webos-internals/bootstrap/blobs/raw/master/quilt-bootstrap.sh
sh quilt-bootstrap.sh
14. The Pre already has a package management app, called FileCoaster, meaning you can install apps from the pre, without rooting in through a terminal, over the web. To install the package manager though, I recommend using the terminal. At the Pre terminal prompt, type this exactly: sudo ipkg -o /var install http://www.precentral.net/sites/precentral.net/files/webos-homebrew-apps/feeds/com.palm_.net_.precoder.fcoaster_1.1.1_all.ipk Check here for updated links to .ipk files for versions of FileCoaster past 1.1.1.
15. It's annoying to have to type the whole code to turn the developer mode on and off, but fortunately there's a patch to put a button in your launcher. This uses the procedure for applying patches using quilt, and there's an instruction sheet for this process here. Basically, you're going to enter the following code exactly:sudo mount -o remount,rw /
cd /
sudo quilt import /opt/src/modifications/luna/enable-dev-mode-icon.patch
sudo quilt push
sudo mount -o remount,ro / For a complete list of patches you can apply using this procedure, look here: http://www.webos-internals.org/wiki/Portal:Patches_to_webOS
16. To log out of your pre and close terminal access, type: exit
17. Turn off your pre, then turn it back on.
18. While this is not necessarily a step, you can now ssh to your pre even if you don't have a USB cable attached. I'll check my home router's config to find the IP of the pre (or just use www.checkmyip.com) and ssh in on port 222 with the following command:ssh <IP Address> -p 222 -l <username>

That should set you up to do most of what you could ever want to do with homebrew on the pre. Check out this thread for a list of homebrew apps, and the links to the .ipk files which you can use to install via FileCoaster: http://forums.precentral.net/homebrew-apps/194104-links-all-homebrew-apps-updated-7-31-a.html.

I credit this article to the following sources:

• Palm Mojo SDK Linux Installation Instructions
• WebOS Internals Wiki: Overview
• WebOS Internals Wiki: Accessing Linux Using Novaterm
• WebOS Internals Wiki: Applying Patches
• PreCentral Forums List of Homebrew Apps
• FileCoaster Instructions

I've been super frustrated on a web project I've been on where I've wanted CSS-only (no slow-ass JSON solutions) rounded corners with transparent backgrounds and and drop shadows. I originally tried a 3 image solution with transparent backgrounds, but it didn't work well and the middle image showed up behind the top and bottom images. I tried just making the backgrounds of the png's match the css background, and I discovered the OSX Safari png gamma correction bug. I hate GIF's and JPEG's as much as I can avoid them, so I decided to just rewrite the solution from scratch, which isn't that hard.

The real reason I am writing this is because 90% of the time I want to do something online I just search for code to do something and use the first result as a template. It took me like 30 tries and I still found nothing decent, so I decided to just do it myself from scratch, and maybe someone else can use it.

This is a 9 image solution made in 3 horizontal sections: a header, a center block, and a footer. Yea, it's a ton of nested divs, but it validates, uses no overlap, works on all browsershots I have tested, and can be used with very small pngs. First of all, here's a sample of the result. Here's the images, their titles, and their dimensions, all of which can be modified:

• Top Left Corner, 15px x 15px, tlc.png
• Top Border, 1px x 15px, tb.png
• Top Right Corner, 15px x 15px, trc.png
• Left Border, 15px x 1px, l.png
• Center, 1px x 1px, c.png
• Right Border, 15px x 1px, r.png
• Bottom Left Corner, 15px x 15px, blc.png
• Bottom Border, 1px x 15px, bb.png
• Bottom Right Corner, 15px x 15px, brc.png

The html for this box is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
 </head>
 <body>
  <div id="box">
   <div id="tlc"><div id="trc"><div id="tb"></div></div></div>
   <div id="lb"><div id="rb"><div id="c">
    <p>Holy Crap, content galore!</p>
   </div></div></div>
   <div id="blc"><div id="brc"><div id="bb"></div></div></div>
  </div>
 </body>
</html>

View the CSS for this technique here. Here's how this all breaks down in the box:

Here's the css required to make this happen, using the variables in the above image:

#box {
  text-align: left;
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: $g;
}
#box #c {
  background: transparent url('c.png') repeat center center;
  margin: 0 $e 0 $f;
}
#box #tlc {
  height: $c;
  background: transparent url('tlc.png') no-repeat top left;
}
#box #trc {
  height: $c;
  background: transparent url('trc.png') no-repeat top right;
}
#box #blc {
  height: $d;
  background: transparent url('blc.png') no-repeat bottom left;
}
#box #brc {
  height: $d;
  background: transparent url('brc.png') no-repeat bottom right;
}
#box #tb {
  height: $c;
  margin: 0 $a 0 $b;
  background: transparent url('tb.png') repeat-x top center;
}
#box #bb {
  height: $d;
  margin: 0 $a 0 $b;
  background: transparent url('bb.png') repeat-x bottom center;
}
#box #rb {
  background: transparent url('r.png') repeat-y center right;
}
#box #lb {
  background: transparent url('l.png') repeat-y center left;
}
p {
  margin: 0 auto;
  padding: 0;
}

It should be very flexible; if you need to you can make the borders bigger or smaller, you can even use different widths for the bottom corners if you must. I thought about toying with another master-div that was on a higher z-index plane so your content could dip into the header/footer, but I decided against it because I don't have time. I hope this is useful, it shouldn't be so complicated but there were no decent guides online.

I’m a strange guy and I know this. I often do a lot of weird things for some reasonable goal, for example, fixing the Big Screen TV. Nevertheless, I do a lot of things for no purpose as well, and the best example is the gum wrapper foil ball. I don’t really remember how I started, I do know it was my second year of undergrad sometime and that I had one and lost it before working on this second one. I started it by acquiring about 50 de-waxed wrappers and rolling them into a ball, meaning what you see is gum wrapper foil all the way to the core. I like to work on these when watching movies and stuff, just some mindless activity to keep my hands busy which seems to destress me.

This is the current state of the ball, with a nail clipper for a size comparison. It’s a little bigger than a raquetball, maybe a little smaller then a tennis ball. It weighs a couple of pounds.

Here’s the ball with an un-processed wrapper, once again for size comparison.

I have a process for removing the wax paper from the foil and leaving the foil as a full sheet, which I will now document. Here’s a wrapper.

Flatten the wrapper out.

Pinch the end with the foil side in.

Roll the wrapper between your fingers for its entire length.

When you’re done, it should still be bent. The rolling causes the wax to curl slower than the foil, seaprating them.

Now the ends should begin coming apart. Find any separation and begin to make it bigger with your finger.

I then slide my finger in which makes the separation bigger.

More separation.

Finally pulling the two layers together, the foil has some tacky glue on it still.

Here’s the wrapper, separated.

Put the wrapper on the ball, glue side down.

Fold the wrapper around the ball.

More. . .

Finally, the wrapper is down, though not smooth.

I take the ball and roll it against a smooth table, pushing down. It compresses the foil and makes the surface smooth and shiny.

Come by my room and see it sometime, it’s kind of amazing to look at and hold!