Tech Hive

The wheels are finally turning for the the first ever Web Design Conference in the Philippines and in Asia. PWDO is finally a registered organization and <Form> Function() & .class‘ is finally up!

You can now reserve some seats for the main event that will be on July 10, 2009 at the Asian Institute of Management, Makati City.

We have an interesting set of speakers for this event:

• Rico Sta. Cruz – Creative Director, U.S. Auto Parts Philippines
• Nap Lara – Software Developer, Friendster
• Regnard Raquedan – Web & Usability Consultant
• Jojo Esposa – Founder, Philippine Web Accessibility Group
• Marco Palinar – Web Design Consultant
• Gail dela Cruz-Villanueva – Creative Director, Sheero Media
• Luis Buenaventura II – Co-founder and Social Software Architect, Syndeo Labs Director of Engineering, Exist Global

We’re also currently looking for sponsors (look at the sponsorship packages (PDF)) at this point and if you or your company’s willing just email Regnard at regnard [at] raquedan.com

I finally made time to work on the “experiment” (this Mae is so pretentious) I’ve been planning since last year but was too lazy to work on. I’m rewriting my other blog and once I’m happy with it I’ll be using the codes from there to here. I’ve been obsessed with semantic coding and structure lately and I find that I’m enjoying it a lot. I’m kinda stumped with the design though, creating a mockup is somewhat stressful these days, most probably because I have no idea what I want.

Plans

• Do not use any hacks, that is in my priority right now because I hate the me who resorts to hacks right away. So I’m going to bend IE using the will of CSS by hook or by crook! (Note: so if ever you read a headline that states “Woman died after bashing her head on the wall, beside her is a note that says “Damn you IE” that’s me.)
• I’m going to use dl for forms, I would like to explain but I’m thinking of dedicating an entire post for this.
• Separate my structure-related properties from the properties that defines the style (color, backgrounds, borders) of the site. I’ve done this to one of the projects we’ve handled in syndeo and I found that I like it so much, I would love to use it again on our other projects if the deadlines aren’t so tight.
• Aside from no hacks, I will also be using non-standard elements in my markup. Not saying that I’ll be using invalid and deprecated elements, but just like what I’ve mentioned, I’ll be using dl in my forms. I will also be using some CSS 3 properties here and there with blatant disregard whether IE or Firefox is supporting it. And of course, since I’m doing some non-conventional stuff anyway, I’ll also be throwing non-web safe fonts your way like Calibri and Cambria. I did tell myself that I want to go out of the box before.

Some observations

• One of the main reasons why I’ve been postponing this is because I detest adding more code than necessary which is my first impression with microformats before. That was until I actually checked out the code that WordPress adds to my blog and noticed that it’s hAtom-ready. Also, of course, there’s this high probability that I’m doing it wrong. heh.
• I hate how you have to override wp_comment_list in function.php instead of adding a dedicated file for it where users can override the darn thing properly. I mean WordPress is already 6.9 MB when uncompressed, what’s another 1 KB?
• I’m confused with what I’m doing, I started with using unordered list for my blog entries list until I realized that I’m using ordered lists for my comments section. My rationale to the latter is because it is important for you to read the comment in the order in which it is posted — therefore, it’s only just that I also code my blog entries in ordered list since it’s chronological! What bothers me though is that my blog entries are in reverse order, or maybe that doesn’t matter? I’m leaving it in ordered list.
• I have no idea how to put a timestamp in PHP, I used gmmktime(0, 0, 0, 1, 1, 1970); but I’m sure that’s not right. Because it’s not showing up.

  I’m also questioning this in the accessibility standpoint. Sir Jojo of PWAG mentioned in the 3rd Mini Web Design Conference (the 4th will be on March 18 by the way, you can still sign up) that screen readers read the title and alt attributes to the blind and I don’t think blind people would appreciate the machine saying “Abbreviation 2005-10-10T14:07:00-07:00 October 10, 2005” when reading about when the post was published. Or is the abbr tag really intended for the machine? Then how can I make screen readers skip that? Or is that even possible?

I would love to hear your thoughts on some of my predicaments and feel free to correct me with my mistakes.

PS: Yes, me overanalyzing this did cross my mind as I’m writing this post.

When we thought of starting a series of mini events to generate buzz for the main event, we thought it to be everything but huge and well-attended. It was supposed to be a very intimate affair between like-minded designers sharing ghost stories coding and design techniques. Imagine our surprise when the number of attendees rose to 60+ (sadly though only 40 something turned up).

Anyway, gathering 40 something designers still isn’t an easy task and is a huge deal to us! We’re glad that it may not be phenomenal but is a first step to gathering the country’s designers who are willing to see the faces behind the websites and usernames.

Expectations

For a first event, I have to say that the mini conference did exceed what we have expected. It may not be heartwarming but nevertheless, people are willing to stop and take a look at what we’re trying to do and they’re excited about it too! We really appreciate it and we hope that the turnout for next time (yes, a next time! Imagine that.) would be even better.

And I hope that next time, we would be all be friendly enough to talk to one another instead of us all waiting to be approached.

Read the rest of “form function class minified!” »

I wrote (as in handwritten) this a couple of weeks ago when I was having trouble sleeping, chances are you already know these things but, for the benefit of my rusty memory, I’ll still post it here. Besides, solving these problems took me hours of frustration, so I better chronicle it.

• There are times when list items occupy a huge space in IE even though you’re sure that you haven’t specified excessive paddings and margins to it. Setting the list item’s display value to inline-block will solve this (I’m a little surprised that IE 6 can interpret this value because I’ve always thought that it only knows block and inline, that’s how little I think of it).

  Inline doesn’t allow paddings and margins at the top and bottom area of the elements, however, it also means losing the width and layout of the element. In inline-block, we achieve just that, lose the excess top and bottom spaces while still being able to maintain the layout of the element. (That is, based on my understanding)

  And in some bizarre cases, inline will do and yes, it will still look like it’s a block item and will just take out the excess margin, weird, yes? I wish I have an explanation for this.

• There are numerous times and reasons why we want to set list-style to none. What sucks is that after you’ve turned off the list-style to the parent list item, you’d realize that you want the bullets to show in the children element.

  All hell breaks lose when no matter what head-banging you do, it just won’t show up. Thankfully, display: list-item is there to restore the bullets and is working in IE too!

• List items are supposed to line up neatly even when a float is used to an image before it. However, there are times when that’s not the case in, you guess it! IE 6. Standards-aware browsers will be solved by adding:

  
  { overflow:hidden; list-item-position:inside; }
  

  The result may be that the bullet may be a little too close to the text but at least it’s not below the list item just like in IE. The trick is to use display:inline-block too.

• Not all of the CSS problems are in IE. Sometimes the great Fx 2 has some quirks too. It usually happens in the useful, albeit a little used, autocomplete function. What usually happens is that the autocomplete items go under the div elements below it.

  Here’s what I usually do:

  HTMML

  
  <div class="parent_element">
    <div class="autocomplete">
      <ul>
        <li>Value here</li>
      </ul>
    </div>
  </div>
  

  CSS

  
  .parent_element { position:relative; z-index:99; overflow:visible; }
  

  What my understanding of this is that once the z-index is set, then it lifts the entire div and everything within it above every other element in the page therefore eliminating the problem.

Cross post (if you’re subscribed to Last Leaf, yes it’s the same thing)

I told you I’m bad with names and giving titles.

There’s Philippine Blog Awards and iBlog (bloggers), BarCamp and WordCamp (programmers, fine, WordCamp’s for bloggers too), SEMCON (SEO/SEM) and Graphika Manila.

Why, pray do tell, don’t we have an event for web designers? That’s the question from a fellow blogger, designer, and standardista, Ia, a call which was, surprisingly, answered by lots of interested and enthusiastic web designers. Apparently, it’s been in the minds of other people but no one’s making it happen.

We’re a bunch of newbies when it comes to event planning but after the initial meeting last Friday Thursday with Ia, Regnard, Joni, Sarah, Marco, Jolo, Rico and Kin, I’m very positive that we will see this through.

If you want to help in any way, you can contact any of us. We will need sponsors, a name for the event (yeah, yeah) and we’re also thinking of turning ourselves into an official organization, if you have any idea how we can do that please do let us know.