Archive

Posts Tagged ‘chuck cerrillo’

New Year, New Stuff

January 12th, 2010 Chuck No comments

Hey, it’s been a while since I laid my hands on my blog. I’ve been too busy with work. I guess that’s a good thing. Yes I’m still alive, haha!

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.

The itch

October 22nd, 2009 Chuck No comments

It’s been a while since my last post… almost a month actually. It’s just that I’ve either been too busy with work, or enjoying work too much that I kinda neglected doing my regular stuff here for a while…

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.

My Canvas

September 27th, 2009 Chuck 2 comments

I have recently opened yet another section for my website, named “Canvas“. This is basically my testing area for my Mootools experiments.

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.

More minor website updates

September 8th, 2009 Chuck No comments

If you’ve visited the front page recently, you’d have probably noticed the mailbox on the far right side of the lawn. This mailbox will be linked to a contact form (which I haven’t started coding in yet, haha!).

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.

Regular expressions in MySQL

September 1st, 2009 Chuck No comments

MySQL I’ve been using MySQL for the better part of the past 6 years so it comes as a pleasant surprise when I found out last month that it can do regular expressions within its SQL!

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”

SELECT name

FROM animals

WHERE name LIKE 'ant%'

The results could be something like this:

name

---------

ant

anteater

antelope

...

A regex version of that would be:

SELECT name

FROM animals

WHERE name REGEXP '^ant'

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:

SELECT name

FROM animals

WHERE name LIKE 'a%t'

OR name LIKE 'a%p'

OR name LIKE 'c%t'

OR name LIKE 'c%p'

However with regex, it is as simple as this:

SELECT name

FROM animals

WHERE name REGEXP '^[ac].*[tp]$'

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

We are doing Mashups

September 1st, 2009 Chuck No comments

Since I’m way ahead on my tasks schedule, I’ve been tasked to work on mashups of our current modules.

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

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.

The Mashup<br />
Ecosystem

Categories: General Tags: , , , ,

Top navigation bar

August 30th, 2009 Chuck No comments

I liked how my CSS-based navigation bar turned out, so I thought of integrating it into my website’s design. As of this writing, I only included a basic “sitemap” menu and a filler menu for recent blog posts.

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.

A neat and clean CSS menu

August 28th, 2009 Chuck 5 comments

Earlier this week, our team of developers was temporarily reassigned to help with another team’s debugging tasks due to a pressing deadline. Our front-end team was busy and only some of us from the back-end team were free to help.

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:

html, body {
     margin: 0px;
     padding: 0px;
}
#navigation {
     width: auto;
     border: 1px solid #888;
     background-color: #EEE;
     color: #444;
     list-style: none;
     height: 22px;
     margin: 0px;
     padding: 0px;
     font-family: "Trebuchet MS";
     margin-bottom: 30px;
}
#navigation>li {
     float: left;
     width: 100px;
     text-align: center;
     height: 100%;
     cursor: pointer;
}
#navigation li:hover, #navigation>li:hover>a {
     background-color: #000;
     color: #FFF;
}
#navigation li a, #navigation li ul {
     text-decoration: none;
     color: black;
}
#navigation li a:first-letter {
     color: blue;
     font-size: 100px;
}

#navigation li ul {
     border-bottom: 1px solid black;
     border-top: 1px solid black;
     width: 100%;
     background-color: white;
     height: auto;
     display: none;
     position: absolute;
     float: left;
     left: 0px;
     list-style: none;
     overflow: hidden;
     padding: 0px;
}
#navigation li ul li {
     float: left;
     margin: 0px;
     clear: right;
     width: 200px;
     padding-left: 1em;
     padding-right: 1em;
}
#navigation li:hover ul {
     display: block;
}
#navigation li ul li:hover {
     background-color: red;
}

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:

<ul id="navigation">
<li><a href="#">Dogs</a>
     <ul>
          <li>Dog 1</li>
          <li>Dog 2</li>
          <li>Dog 3</li>
     </ul>
</li>
<li>Cats
     <ul>
          <li>Cat 1</li>
          <li>Cat 2</li>
          <li>Cat 3</li>
          <li>Cat 4</li>
          <li>Cat 5</li>
     </ul>
</li>
<li>Pigs</li>
</ul>
<div>Place your content here</div>

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.

Finally!

August 25th, 2009 Chuck No comments

After trying many many times since sunday, I was finally able to make my personal website appear at the very top of the Google search when you try to search for “Chuck Cerrillo”.

Curse my very basic SEO knowledge, lol.

At least I tried and it eventually worked.

TheDirtLab logo

August 24th, 2009 Chuck 1 comment

I thought I put enough effort and attention to the main website’s design so far, so I figured I start working on the actual testing area’s theme. So here’s my second revision of the “laboratory” theme’s logo:

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.