On Development

CSS Naming Convention for Classes and IDs?

· 4 Comments

Well, just re-read­ing some of the cur­rent book­marks in my bag. To note:

I am try­ing to clean up and make things more effi­cient here at work. One goal would be to have a base CSS that will serve as a start­ing point for our Pro­duc­ers and Fron­tend peeps. Anoth­er goal would prob­a­bly be a con­ven­tion on how to use it and/or cre­ate new class­es and IDs.

One of the things that keeps com­ing up late­ly would be the nam­ing con­ven­tion of class­es and IDs. I used to imple­ment this kind of for­mat “class_name”. Then, only to switch to “class-name” in ear­ly ’06. Fast-for­ward to a cou­ple of months into the year dur­ing a project, I came to find out that if you are refer­ring to either a class­name or an ID (i.e. getEle­ment­ById, or some­thing like that) that the val­ue’s hyphen get stripped out. Can some­one con­firm this phe­nom­e­na and/or myth? That is, for exam­ple, doing “id-name” would be imple­ment­ed like so:

document.getElementById("idname")

With that how­ev­er, would it be more read­able using a camel­Cased name? Although against Tan­tek’s step #4 in terms of sav­ing the user(s) poten­tial headaches. But would there be prob­lems if there was a stan­dard with­in one’s orga­ni­za­tion? That is, class­es and IDs writ­ten as a vari­able, i.e. some­thing­LikeThis; no hyphens and no under­score.

I look for­ward to hear­ing your end­less wis­dom on this sub­ject sirs and madams. Thanks in advance.

IE Web Developer Toolbar

· Comment

Just stum­bled on a link of a link and found that there is too a “web devel­op­er tool­bar” for IE. Although (cur­rent­ly) unrat­ed, it seems to pro­vide some use­ful func­tion­al­i­ty:

  • Explore and mod­i­fy the doc­u­ment object mod­el (DOM) of a web page.
  • Locate and select spe­cif­ic ele­ments on a web page through a vari­ety of tech­niques.
  • Selec­tive­ly dis­able Inter­net Explor­er set­tings.
  • View HTML object class names, ID’s, and details such as link paths, tab index val­ues, and access keys.
  • Out­line tables, table cells, images, or select­ed tags.
  • Val­i­date HTML, CSS, WAI, and RSS web feed links.
  • Dis­play image dimen­sions, file sizes, path infor­ma­tion, and alter­nate (ALT) text.
  • Imme­di­ate­ly resize the brows­er win­dow to 800x600 or a cus­tom size.
  • Selec­tive­ly clear the brows­er cache and saved cook­ies. Choose from all objects or those asso­ci­at­ed with a giv­en domain.
  • Choose direct links to W3C spec­i­fi­ca­tion ref­er­ences, the Inter­net Explor­er team weblog (blog), and oth­er resources.
  • Dis­play a ful­ly fea­tured design ruler to help accu­rate­ly align objects on your pages.

But, don’t go and down­load­ing all at once… after all it is still in beta—“Beta 2” to be exact.

Who Said Yahoo Doesn’t Share for Free?

· Comment

Just last week, pre-Valen­tine’s Day, Yahoo! shows it love to the pub­lic by launch­ing User Inter­face Library and Design Pat­terns Library. Not to men­tion, the crazy cats over at the Yahoo! UI depart­ment have start­ed a blog as well. Dang, they seem to be grind­ing and shar­ing great tools with every­one. I like that. You may read more about inter­est­ing tech­nol­o­gy via Yahoo! Devel­op­er Net­work.

Spe­cial thanks goes out to Blingo.com, that I came across Peter Fre­itag’s blog entry about it. It’s just too bad I did­n’t win any­thing =|

Rehashing Firefox Extensions

· Comment

I recent­ly updat­ed to Fire­fox 1.5 as read in my pre­vi­ous entry a cou­ple of days ago. Not to men­tion, I also post­ed about exten­sions that I think are a must-have for web developers/designers a month ago. With those in mind, I took some time this past week­end to do some house clean­ing.

With the hol­i­days steadi­ly truck­ing its way for the new year, one should keep their envi­ron­ment free. This also helps you out so you don’t catch a cold or flu, and be bed-rid­den when every­one is par­ty­ing it up. I know this is com­mon knowl­edge but peo­ple still forget—even me some­times. Take for exam­ple this past Sat­ur­day morn­ing while I was get­ting ready to play pick­up-soft­ball at Krusi Park.

I was on my way to my car when I just seem to for­get an essen­tial item, my shoes. I knew that I put it near the bar in the enter­tain­ment room area but I seem to not find it any­where. I recall that I just left it there last week­end. Then I remem­ber Big­gy’s mom clean­ing up and prob­a­bly grabbed it along with the oth­er shoes. To make a long sto­ry short, I found it lat­er but used my san­dals to go to the park and play. Les­son-learned, stay orga­nized as it might save you some time and ener­gy when you need it the most.

Mean­while, back to Fire­fox exten­sions. So I was clean­ing my room and stuff, and decid­ed to do some main­te­nance on my PC as well. Did the usu­al Ad-aware, Anti-virus and Defrag work­flow. Then, was enticed of upgrad­ing my brows­er to 1.5 there too but lat­er decid­ed that I should keep my home-PC at 1.0.7 at the moment.

I then tried to see which exten­sions have updates, which led me to go and learn more about new exten­sions. After an hour or two of opti­miz­ing which exten­sions to take out, add and update, here’s what I think are neces­si­ty:

I also have been using Tab­brows­er Exten­sion (TBE) but late­ly fig­ured out that I don’t need every­thing that comes with it. So I did some research and dis­cov­ered that there’s a cou­ple of exten­sions that can achieve the same func­tion­al­i­ty. Here they are:

I hope these exten­sions become use­ful to you as they were for me. They total­ly make the Fire­fox expe­ri­ence bet­ter; not to men­tion, the improve­ment of effi­cien­cy and pro­duc­tion in my work­flow. I also noticed a low­er CPU usage when I took out TBE and installed the four exten­sions above (TBP, Ses­sion Saver, Tab X and Last­Tab) instead.

So, there you go… Keep things orga­nized. Keep things clean.

Note: Thanks goes out to Petr for updat­ing me with the Fire­fox Site­Bar exten­sion update (Site­Bar Client).