Her apartment and the complex itself are pretty damned nice. It’s got a pool, hot tub, gym, sauna, recreation room with couches, flatscreens and a pool table and a few (not so good) restaurants.  The part of town we’re at is also great, nice and shady with the public rail system right next door.

I spent yesterday afternoon here planning out my trip even further so that when I show up in Spain I won’t be completely without a plan. I used my travel book and some searching to find a nice hotel in Madrid (Hostal Cruz Sol) for about $60 a night. I’ll only be in Madrid for one night because the next afternoon I’m going to take a train to Malaga to move into my apartment there. To get to Malaga I’ll be taking the train which takes about 5 hours and costs about $60.

Other than that, I’ll be heading back into town tonight and tomorrow morning I’ll be getting my MacBook Pro, so I’m pretty excited about that. The MacBook will be my first voyage into the Apple world (other than my iPhone).

I’ll be working with ST at their downtown office above La Vera pizza during the week, working on making the new OasisCMS as kick ass as possible. We’ve laid out a mountain of ideas, features and bugfixes that we are going to implement in OasisCMS and I am pretty damned excited. We’ll be adding in a bunch of features that I have been wanting to add in for a while including some really cool customization tools and a whole new design.

One of the nice aspects of the new direction that we are taking with OasisCMS is that it is now much more focused on a particular niche (local communities), rather than trying to be everything for everyone. Our old method was a little more general; trying to make a very configurable system that could apply to a wide gamut of industries and markets.

This new focus will afford us much more power to create a very custom tailored solution for our clients which is crucial to succeed in any industry, let alone ours.

I’m looking forward to the change and to being able to work with smart, progressive thinking people.

Go local or go home!

http://code.google.com/p/jquery-showhide/

Overview

jquery-showhide is a more robust “toggle” function that allows you to do a few cool things that the default jQuery .toggle() function does not. Please check out the video below to see an example usage of the plugin:

This video shows you what you can do with the plugin, including using the “autofocus” feature.

Features

First off, you can toggle the text of the toggle object to whatever you want. For example, if you have a hidden “categories” table, you can have the toggle link say “Show categories” and after it is clicked and the categories table is shown, you can have it say “Hide categories”.

Another useful thing is “autofocusing” which lets you define a field within your hidden object to autofocus when showing it. This is useful if you have a hidden form that you want a user to be able to type in as soon as it is visible, rather than having to click on the field manually. I’ve been using this on some personal projects and it really does make things much quicker.

Since jquery-showhide is completely “class” based (it uses classes to show/hide objects, rather than applying style="dispaly: none"/style="display: block"), it is a little more robust, especially if you would like to do more than just show/hide a field (such as changing it’s display or size).

Using

If you want to use the plugin, go to http://code.google.com/p/jquery-showhide/ and download the latest release and view the demo/demo.html file to see how to use it. Also check out the notes on the Google Code page for more info.

I hope you enjoy the feature and if you need to get in touch with me or find a bug, please leave a comment or submit a bug to Google Code.

http://code.google.com/p/jquery-input-replacement/

The code performs a simple but useful function that I seem to always need so I decided to create a plugin that I (and others) could reuse.

Basically, the code replaces blank HTML form inputs with a string of text that is used to supply default values into the field. This is primarily used to give a field a default value, such as search fields. Below is a short little video showing what it does:

The plugin lets you define the field (or fields) that you want to apply the text to and (optionally) the CSS class to apply to the input when the text is applied to it.

When a user clicks on the field (when it gains “focus”), the CSS class gets removed and so does the initial text, allowing the user to enter in their content.

This can be used for search fields, login forms, and a number of other applications.

I hope the code is useful to someone out there and if you use it or have questions, feel free to post a comment or submit a bug to Google Code.

You can view the demo here.

You’ll see some similarity between this technique and A List Apart’s Sliding Doors menu, however there is one key difference between this technique and theirs and that is that the tabs on this menu are fully clickable. If you go to their working demo page, you will notice that you cannot click on the left portion of the tab which, for me, was not ideal.

Also, one other issue I had with ALA’s menu was that when clicked, it would leave a hit area highlight around only part of the menu item, rather than the whole menu item, which looks strange if you are using this menu in any sort of JavaScript menu or any menu that does not force the page to reload.

To solve this issue, I added an extra (somewhat) semantic span tag to the markup to create the desired rounded effect, while rendering the tab fully clickable. So, with that, here is the HTML we are going to start with:

The HTML

<ul id="menu">
    <li><a title="Link title here" href="#"><span>Home</span></a></li>
    <li><a title="Link title here" href="#"><span>About</span></a></li>
    <li><a title="Link title here" href="#"><span>Portfolio</span></a></li>
    <li><a title="Link title here" href="#"><span>Services</span></a></li>
    <li><a title="Link title here" href="#"><span>Testimony</span></a></li>
    <li><a title="Link title here" href="#"><span>Contact</span></a></li>
</ul>

Which will give you something like this:

Basic Styling

Now we need to add some basic CSS for stlying. We need to make the menu run inline and to remove the default list formatting:

#menu {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu li {
	float: left;
}
#menu a {
	float: left;
	display: block;
}

After adding the CSS to the page, we should get something like this:

Making It Pretty

OK, so now we have an inline menu, but it’s not too pretty is it? Well, now we’re going to spruce it up a bit by adding some padding and text styling with some CSS and we’re also going to style the span tags that we added in to the HTML as well:

#menu {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu li {
	float: left;
}
#menu a {
	float: left;
	display: block;
	padding-right: 16px;
	padding-left: 0;
	font-weight: bold;
	color: #666;
	text-decoration: none;
	cursor: pointer;
}
#menu a span {
	float: left;
	padding-top: 8px;
	padding-bottom: 6px;
	padding-left: 16px;
	cursor: pointer;
}

What we did here was applied some padding to the right of the link and some padding to the left of the span tag to center the text in the tab. We also applied the “cursor” property to the span tag to make sure that the browser treats it as a link by showing the pointer icon when the user hovers over it with their mouse. You should see something like this:

Adding The Rounded Tabs

Now that we have a properly padded and colored menu, we need to add in the images that will create the rounded corner effect:

#menu {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: url(images/bg_menu.png) repeat-x left bottom;
}
#menu li {
	float: left;
	margin-right: 1px;
}
#menu a {
	float: left;
	display: block;
	background: url(images/bg_menu_right.png) no-repeat right top;
	padding-right: 16px;
	padding-left: 0;
	font-weight: bold;
	color: #666;
	text-decoration: none;
	cursor: pointer;
}
#menu a span {
	float: left;
	background: url(images/bg_menu_left.png) no-repeat left top;
	padding-top: 8px;
	padding-bottom: 6px;
	padding-left: 16px;
	cursor: pointer;
}

With the images in, we should see our menu looking about like this:

Looks pretty neat huh? Well now all we have to do is tweak a few little things and we should be good to go!

Finishing It Up

To finish things off, I am going to add in a little line in the background to tie the tabs together as well as give the tabs a hover state so they are interactive. One other little thing I am going to add is an “on” state which can be used to show which tab’s content is active on the page. So lets add in the CSS now and see what we can do:

#menu {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: url(images/bg_menu.png) repeat-x left bottom;
}
#menu:after {
	content: " ";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
}
#menu li {
	float: left;
	margin-right: 1px;
}
#menu a {
	float: left;
	display: block;
	background: url(images/bg_menu_right.png) no-repeat right top;
	padding-right: 16px;
	padding-left: 0;
	font-weight: bold;
	color: #666;
	text-decoration: none;
	cursor: pointer;
}
#menu a span {
	float: left;
	background: url(images/bg_menu_left.png) no-repeat left top;
	padding-top: 8px;
	padding-bottom: 6px;
	padding-left: 16px;
	cursor: pointer;
}
#menu a:hover {
	background: url(images/bg_menu_hover_right.png) no-repeat right top;
	color: #333;
}
#menu a:hover span {
	background: url(images/bg_menu_hover_left.png) no-repeat left top;
}
#menu .on, #menu .on:hover {
	background: url(images/bg_menu_on_right.png) no-repeat right top;
	color: #000;
}
#menu .on span, #menu .on:hover span {
	background: url(images/bg_menu_on_left.png) no-repeat left top;
}

You’ll notice I added in a CSS rule for #menu:after. That piece of code is called a clearfix, which clears the floats used in the menu so that it does not overlap content below it. If you did not have this clearfix, the content following the menu will wrap around, causing many undesirable effects.

So now, after you’ve added the above CSS, you should see your menu looking about like this:

The “Home” tab has the class “on” applied to it and the “Contact” tab shows what the hover should look like. Now you’re done! Congrats!

Conclusion

And there you have it, an accessible, semantic rounded tab menu built with some lean HTML, a smidgen of CSS and a few images.

I have included the PSD files I used to create the tabs in the Zip file so that you can easily make your own, custom styled menus.

I hope you enjoyed this tutorial! If you’ve got any questions or feedback, please feel free to leave a comment below.

$ nano ~/.bashrc

Then scroll to the bottom of the file and paste this in:

export PS1='\[\033[02;36m\]\u@\h\[\033[02;33m\] \w \$\[\033[00m\] '
export LS_COLORS='di=01;33'

… and save the file by clicking “F3” and “Enter“ and then “Ctrl + X” to close the file.

Then just reload the file and you should see your new design:

$ . ~/.bashrc

This will give the design a compact attractive look. You can change the values above to whatever you want. See this page for more information.

Hope that helps!

Bald Mountain V. 1.0

I’ve been hanging out with Katie B. a lot lately and it’s been a blast! On June 28th I took her up to Bald Mountain (my favorite spot in town… so far.) We went to Olivers and loaded up on snacks and drinks – crackers, cheese, sandwiches, and red wine – and headed out to the park at about 6 p.m. We made our way up slowly but surely, checking out the sights as we went. As we were nearing the top Katie started getting tired but she soldiered on and we made the top about 30 minutes before sunset. As the sun was dropping we took out our cameras and snapped a bunch of pictures (check em’ out on Flickr). I taught Katie some basics in using an SLR and she picked it up quick. She snapped away a bunch of pictures and was getting very into using it. We stayed up till midnight, enjoying the sights. Great night.

Fourth of July (a.k.a. Bald Mountain V. 2.0)

On the Fourth of July I trekked to the top of Bald Mountain again, but this time with Brandon M. and Evan B. during the evening. After trudging up the hill for about two hours or so we reached the summit just as dusk disappeared. At the peak we’re many more people than I had expected to see – about 20 or so. We saw Tyler M. and Brendan W. at the top which was a bit of a surprise, especially for them (we saw their car in the parking lot.)

From the top of Bald Mountain you can see Santa Rosa, Kenwood, parts of Windsor, Calistoga, Napa, Sonoma, Petaluma and on clear nights the bay area, including San Francisco. To say the least, it’s amazing! It’s also a damn good spot to see the fireworks in… well every city in a 60 mile radius.

I brought my camera and tripod up and snapped a bunch of pictures (see them on Flickr.) My favorite shots were actually not of the fireworks but the people on the hill. I took long exposure of people moving around and got somre really interesting effects. Some of my friends saw the pictures and wanted to be in them so I set them up for some light drawing pictures that I had done before with Katie.

We screwed around for about two hours with the light exposures, doing all sorts of weird things. Everyone had a blast being involved in the process and they all seemed to pick up the techniques you need when doing photos like that.

Ping Pong Tourney

The day after the Fourth I went to Katie’s family ping pong tournament and hung out with her and Annie, and Mikah. The tournament was as serious as ping pong tournaments get and lasted for about 6 hours. They had a bracket of winners and every and even a freaking professionally made trophy. Crazy!

First, you’ll need a link that you will be clicking where you want the confirmation box to pop-up.

<p><a href="/some/path/to/delete" class="delete">Delete</a></p>

Next, you will need to add in the jQuery. If you haven’t imported jQuery in you page yet, do so above this code.

<script type="text/javascript">
    $(function() {
        $('.delete').click(function() {
            var answer = confirm("Delete this item?")
            if (answer){
                return true;
            }
            else{
                return false;
            };
        });
    });
</script>

Now all this does it pops up a “confirm” dialog box and if the user clicks “OK” the link will be followed, deleting the item. If they click “Cancel” nothing will happen.

Well, that’s it. Nothing special, but comes in handy once and a while.

Went to the Health and Harmony festival this weekend which, to say the least, was an adventure. Shelley managed to get me in free of charge because of her amazing manipulative powers. We camped out in the cow palace area Saturday and stayed all day Sunday. I got to see Pepper, Rebelelution and Matisyahu the first night. Late Saturday night we got into Techno Tribal and watched about 1000 people raving like mad, which was a pretty entertaining event.

On Sunday we met up with some friends, including Katie B. and went to the main stage and watched a few performers, including India.Ari which was cool but made me want to fall asleep or make love to something. We created a little pocket in the crowd and smoked some hookah and laid on our asses like the lazy people that we were. Our laziness was at least understandable since we stayed up till 5am drinking, dancing and running around and then woke up at 6:30am to a bunch of smelly hippies rocking out in a drum circle feet from our tent (Thanks guys!)

Overall the festival was fun but was tiring and a little expensive. There’s a whole hell of a lot of people there which is not really my native environment in the first place and even though camping was a really good idea, it’s just a bit too much for me.

Went on a nice bike ride down Santa Rosa Creek today with Katie B. after my class was over, which was relaxing and beautiful.

Anyways, got to go get my homework done, I got a test tomorrow, wish me luck!

Peace and love.

We were on a two game losing streak to start off the season but we finally put a stop to it and beat the Mona-Vine team by one run. I think our win had part to do with the kick ass uniforms we just got (thanks to our sponsor Portola Systems!) It always makes you feel like pros when you look as sharp as we did.

We played well overall, with the occasional fielding or running mistake, but nothing too embarrassing or terrible. Our hitting was pretty consistent and our fielding was solid. I ended up striking out about 6-8 batters which was sweet. Keep in mind, this is SLOW pitch softball, its hard to strike ANYONE out, so I was happy with my performance.

I decided it a bright idea to take an extra base in the 5th inning and slide to third which not only got me out but also re-opened my almost healed wound on my leg. Go Dana!

Other than the game today, I helped Terry move the last of his stuff over to his house in a rented van. After a few hours of packing and unpacking we grabbed some lunch at this cheap Chinese buffet and ate it on his patio with a beer to boot.

Good day.