What I like about Firefox 3

On June 17 of this year, Mozilla released the launch of Firefox 3. I've been using it for about a week now and I'd like to share what I like about it. (And maybe what I don't like about it, but it's kind of hard not to like Firefox.)

What I like about it:
I'll start with the address bar. A lot of browsers today have the feature that when you type in what you're searching into the address bar (fire, for example), hit enter and you get a page of the search results by your chosen search engine. But what if you type "fire" and you could see the matching search result pages being populated as a list as you type? That's the new feature in Firefox 3.


As described from Edward Lee:

"Firefox will remember the text you typed and the page you selected, so next time when you give a similar input, Firefox will give a higher rank to those pages. It even matches partial inputs, so I can even type just "p" from planet, and Firefox knows to put that above other pages that just happen to also match "p"..."

Here's an overview of what you can do with the new address bar in Firefox 3 (from Firefox 3 Revealed):

• Search your history and bookmarks for any combination of words while you're typing
• Restrict your searches to bookmarks, history or tagged pages only by prep ending your search terms with "*", "^" or "+" respectively.
• Match whole phrases by enclosing words within double quotes
• Provides search results ordered by frequency and recency.

Also, it is rumored that the address bar will replace the search bar in later versions of Firefox :)

Next is the Places feature, which you can organize your History and Bookmarks. I don't have a need for this, nor have tried it out, but it looks like it has a boatload of options. Instead I use Bookmarks in the Google Toolbar.

The Download Manager has been improved in Firefox 3. It now lets you pause downloads to resume later, especially large downloads. And they will stay paused when you close Firefox and restart it back up.

Well here is something I don't like about Firefox 3; that you still have to restart Firefox when you install an add-on (extensions, themes, plugins). According to Firefox 3 Revealed from sitepoint.com,

"This feature was planned but didn't make the cut because it involved core changes that were too invasive."

Oh well. Maybe next time.

Okay. Now for my favorite part: CSS Improvements.
Firefox 3 now supports more CSS2.1 and it seems a lot of bugs have been fixed. Such as support for negative z-index values and inline-block. (IE7 still doesn't support inline-block.)

These are just a few things I wanted to point out with the new Firefox 3. Of course, there are tons of other stuff like, HTML 5, APNG (animated portable network graphic) , Microformats, and SVG (scalable vector graphic) support. Be sure to get a copy of Firefox 3 Revealed from sitepoint.com.

I found a secret stracciatella yogurt

Every time I come back from Germany, I always miss the yogurt and quark. I'm not a big fan of yogurt, but I recently bought a cup of Stonyfield Farm Organic Vanilla Truffle whole milk yogurt. It was on sale and I decided to get that flavor.
So this morning, I opened it and mixed the cream with the truffle at the bottom. Took one taste and it was like stracciatella from Europe. BTW, stracciatella is vanilla with chocolate shavings. You can find more info here.
I plan to buy more of this stuff. I think it was the first time I ever really enjoyed yogurt in the States.

02/10/2011 Edit:
Stonyfield Farm doesn't make the Organic Vanilla Truffle whole milk yogurt anymore. Instead try the Stonyfield Farm Organic Chocolate Underground whole milk yogurt. It's still the closest taste I've found for stracciatella yogurt in the USA.

Featured in Create Magazine for May/June 2008

I totally forgot to write about this!


My design for the El Patio Motel web site was chosen as number 1 in the image battle for web sites. See the full page for more information.
It was featured in the May/June 2008 issue.

My Favorite Post by FreelanceSwitch: 12 Breeds of Client

12 Breeds of Client and How to Work with Them

http://freelanceswitch.com/clients/12-breeds-of-client-and-how-to-work-with-them/

Creating an Outlined, Rounded-Corner Box Using CSS

On a Web project I'm currently working on, I created rounded-corner boxes with outlines. At first I couldn't find any tutorials on this to get an idea of how to start. I played with the idea for a couple of hours and came up with what I have pictured to the left.

This is a fixed-width box, so the height is elastic. I started measuring the width I needed. In this sample the width is 250 pixels. From there I created two images in Photoshop for the top and bottom of the box and saving them as pngs to keep the transparency.

After that, I constructed my HTML. I used a table to contain the box. The table has 3 rows and 1 column like this:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

Then I created my styles for the top and bottom of the box and the inside of the box.

.top250x14 { background-image: url(images/250x14Top.png); background-position: top left; background-repeat: no-repeat; width: 250px; height: 14px; }

.bottom250x14 { background-image: url(images/250x14Bottom.png); background-position: top left; background-repeat: no-repeat; width: 250px; height: 14px; }

.boxColors { border-left: 1px solid #cfcf99; border-right: 1px solid #cfcf99; background-color: #fff; }

.sidebarBox { width: 247px; padding: 0; }

The classes top250x14 and bottom250x14 are for the top and bottom images of the box. The class boxColors creates the left and right borders of the box and gives the box a white background color. The sidebarBox class gives the width for the inside of the box with considering the left and right border widths. I'm not sure about the one pixel that is left over from the sidebarBox class. It needed one less pixel in order to align with the top and bottom box images correctly.

Now let's put it all together:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="top250x14"></td>
</tr>
<tr>
<td>
<div class="boxColors sidebarBox">
<h3>Sample Box</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam pretium turpis sed nisi. Sed condimentum metus eu nibh. Suspendisse vitae tellus sit amet pede placerat malesuada. Ut non libero nec nibh hendrerit pretium. Integer neque. Duis purus risus, scelerisque vitae, dignissim nec, sodales semper, metus.</p>
</div>
</td>
</tr>
<tr>
<td class="bottom250x14"></td>
</tr>
</table>

Download the files used:
outlinedrounded.zip