I was planning on adding new stuff here but I never got around it due to deadlines at work, but I’ll eventually get to it.

I’ve been spending much of my time coding server-side, so I figured I’ll drop my Mootools training for now and focus on cURL. When I do start messing with that, I’ll make sure to post my progress here.

With that said, I’ve been working too much and haven’t had the chance to enjoy my salary yet… well, one of the first things that came to mind was getting a camcorder (which, actually is already happening, haha!), secondly, my computer upgrade itch.

Damnit, I’m eyeing the Samsung T260HD LCD monitor, and I’ve also been itching to upgrade my processor, motherboard and RAM.

Christmas is approaching, all in due time I guess.

If you’ve seen what I have so far, you might’ve guessed what I am aiming for. That’s right, I’m simulating a window-based workspace. For now the content is static but I’ll eventually fill it up with dynamic content once I am comfortable with AJAX.

That makes  3 major sub-areas of my website,

1. My blog – you’re currently reading this
2. TheDirtLab – a repository of my recent scripts and experiments
3. Canvas – my window-system experiment

I might even probably open up a section for multimedia, but I don’t see it anytime soon, lol.

Also, I’ve made slight modifications to the top navigation bar. The menus are now semi-transparent. I’ve yet to decide if I’ll keep it that way or revert to the old solid white and gray menus.

Aside from that, I am hoping to be able to find the time to work on the other planned features of my website. Please keep coming back for updates.

I’m not sure about the other databases, the last time I’ve used Oracle was around 2004-2005 during my college days, so I can’t really say if this is a MySQL-exclusive feature or something along those lines. I’m pretty positive that this isn’t standard SQL though, since we never had such lessons back in college.

Anyway, if you’re familiar with SQL and string matching within SQL, it makes use of the LIKE = '[string]' clause. Where [string] is the string to be searched for. Optionally, you could also use wildcards like _ (underscore), % (percent), [charlist] (character list) or [^charlist] (negated character list) or a combination of those to match string fragments. Unfortunately this has also been one of the major points of entry for hacking/hijacking a database-driven website, via SQL injection. Due to this vulnerability, I’ve either been using heavy data validation, or store encoded data, or at times, avoiding this altogether… but I digress.

Using regex in my SQL queries is a godsend. It helps reduce my data processing and validation overhead.

MySQL supports the use of almost all POSIX regex  metacharacters via the REGEXP or RLIKE clause (or a negation using NOT REGEXP or NOT RLIKE).

The following list describes some characteristics of extended regular expressions:

• “.” matches any single character.
• A character class “[...]” matches any character within the brackets. For example, “[abc]” matches “a”, “b”, or “c”. To name a range of characters, use a dash. “[a-z]” matches any letter, whereas “[0-9]” matches any digit.
• “*” matches zero or more instances of the thing preceding it. For example, “x*” matches any number of “x” characters, “[0-9]*” matches any number of digits, and “.*” matches any number of anything.
• A REGEXP pattern match succeeds if the pattern matches anywhere in the value being tested. (This differs from a LIKE pattern match, which succeeds only if the pattern matches the entire value.)
• To anchor a pattern so that it must match the beginning or end of the value being tested, use “^” at the beginning or “$” at the end of the pattern.

Let’s start with the traditional SELECT ...  LIKE query. Here’s a query that selects all animals whose name begins with “ant”

The results could be something like this:

A regex version of that would be:

So far they look similar… but, say, what if you wanted to use a complex rule like: “select all animals whose names starts with either ‘a’ or ‘c’ and ends with either ‘t’ or ‘p’.  It would look messy if you do it this way:

However with regex, it is as simple as this:

Imagine if your filtering conditions were much more complex. It’s not hard to see how regexp can help with that!

This is going to be yet another fun experience for me!

I’m currently in the planning stage of it, but I’d have to come up with a working prototype of the API tomorrow. I should be able to think of something as I sleep over it today so it won’t be a problem. I’ve always been able to get work done in my sleep anyway.

I’ll probably think of other things to add there as time goes by.

On closer inspection, adding that menu has a nice side effect towards search engine optimization, because a clean, straightforward list of URLs can be found at the very top of the code, before the other presentational bits. Which means search engines can see my site map a lot easier.

The framework was based on Magento. Since our teams were all CodeIgniter developers, we found it hard to adapt to that framework. We were shocked to find out that majority of the fixes were front-end related, requiring mostly CSS and JS to fix. This was because navigating through Magento’s files was a pain. In addition, most of my teammates and colleagues from the other teams avoided the CSS bits because they either had limited CSS knowledge or were simply not confident enough to manipulate that website’s huge CSS file. So I took that task.

The website we were working on had a 3-tier navigation menu on top, controlled by JavaScript. I spent the better part of the day on that navigation bar building the content for the other menu and tackling the JS browser incompatibility problems… I previously mentioned in another entry that I suck at JS, needless to say what I did was a quick and dirty hack that works but one I’m not proud of, haha.

Anyway, 2 days later (that’s today), I was thinking – I bet it’s possible to mimic that navigation bar using purely CSS and no JS. So I set out and tried my hand at it. I relied heavily on nested  declarations in order to keep the styles neat and the markup less cluttered. Here’s the stylesheet I came up with:

As for the menu’s markup itself, it consists of a master <ul> with an id of “navigation”, with nested <ul>s contained inside of it.

Here’s what the markup looks like:

The markup looks really neat and simple with none of those pesky class="" attributes to get in the way. Also you can add as much menu items as you please.

So far this CSS declaration only supports 2-tier menus. I could try working on 3-tier, or even maybe a dynamic-depth CSS menu, if I don’t feel lazy :p.

You could see it in action by viewing this page.

Alternately, if you’re not a fan of horizontal menus, you can easily convert it into a vertical menu by removing the float: left; property in the #navigation li ul li declaration. Getting rid of the white background should be easy.

Update: August 29, 2009

I wrote another CSS declaration for 3-tier menus in vertical format. You could see the sample by going here.

Curse my very basic SEO knowledge, lol.

At least I tried and it eventually worked.

That’s Dirt the Lab in a lab-coat, presumably working in a lab, but I still have to draw in the lab, lol!

It’s 1:38pm (12:38am CDT) so I really should get to bed now, lest I risk not waking up in time for today’s work shift.