HTML/CSS Trickery

The whole web developer thing was boring me for a while. But last week I got to help on some preliminary webpage design for one of the projects, so my interest in HTML/CSS/Javascript is a bit tweaked. (Hence the slightly updated stylesheet — try changing font sizes now.)

Anyway, here’s

some HTML/CSS trickery

. I’ll add stuff here as I try them out.

If you’re using IE, you wouldn’t appreciate it much.

Yahoo!

Some comments on the Yahoo webapps.

  • The next/previous links on top of Yahoo mail messages are confusing. I’m not sure if they take me up or down the mail-list. Gmail is better, since it explicitly says “older” and “newer”; With Yahoo, I’m always wrong when I guess. After some experimenting, I figure it out. “Next” and “Previous” are based on the sort order in the list of messages. Since the default is sorted by date descending (newest first), “Next” corresponds to Yahoo’s “older” by default. Which is kind of hard to figure intuitively.
  • In the grid that lists mail messages, I wanted to test if the columns would wrap any words that were too long. Multiple observations here:

    • As part of this experiment, I wanted to create an email address with a very long name. Apparently, the Yahoo ID “abcdefghijklmnopqrstuvwxyz012345” was already taken. I settled on “solongandthanksforallthefish2005@yahoo.com”. You can send the account mail if you like.
    • There’s a UI bug in the password verification screen if the Yahoo ID is too long. The gray box on the left has its right border broken.
    • Bummer. I didn’t realize the value in the sender column was the name in the Yahoo profile instead of the actual email address. I update the account name to
      “AllTheThingsSheKeepsInsideAreTheThingsThatReallyMatterTheFacePutsOnItsBestDisguiseAndAllIsWellUntilT heHeartBetraysLordBringOutTheLightWrapItAllAroundMeLetItHoldMeTightSoakUpAllThatIBleedLordBringOutTh eLightWrapItAllAroundMeLetItHoldMeTightSoakUpAllThatIBleedIBleedWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWX”,
      which breaks even more layouts, including this one (mental note: fix that tomorrow).
    • Doh! I actually had to change the Outgoing name, which was set to the original account name. Why doesn’t it update the mail setting when I change the (global) Yahoo account setting? Updated it to “AllTheThingsSheKeepsInsideAreT”
    • I sent some mail messages with the long name and a long subject line. As I suspected…Yahoo compensates for the unwrappable words by expanding the grid cell, breaking the layout. This was a problem I encountered before in the webapps at workand I still don’t have a solution that would work in all browsers.
  • I’m also interested in how popular webapps handle timestamping, so I try this out as well. For the uninformed, timestamping means handling the case where two people both try to edit the same record at roughly the same time. If there’s no handling, the person who updates first usually has his changes lost, without any notification.

    • I try it out first with Yahoo Address Book and Notepad. Both experiments fail…there’s no timestamping. I tested it by opening a record (Address Book entry/Notepad note) for updating in two separate Firefox tabs. I update one tab and save, then update the second tab and save. Changes made in the first tab are lost.
    • Well, I guess that’s okay, since technically, only one person at a time is expected to access these webapps. So I do something else. I create

      a Yahoo Group

      . I get two moderators, me and a dummy email account. I login with both accounts, using Firefox for one and IE for the other. I try to update the group description with one account, then the other. Bam! First guy’s changes are lost, without notification! If this were some sort of mission-critical webapp, that would be a dangerous bug.

I’m sleepy. More later.

CSS-Based Design

A while back, inspired by the CSS Zen Garden, I modified my Blogger template to use entirely CSS-based design. That is, I can know update the layout instantly simply by replacing the stylesheet file used by template (like now!)

The new layout uses up a wider screen space, but I think it’s neat. The lighter colors are easier on my tired, computer-strained eyes. Hopefully, this new CSS-based design allows me to do more experimentation and improve my ability to design web UIs.

Speaking of web UIs, I only recently saw the new look for Yahoo Groups. Similar to the change for the main Yahoo site, it focuses more on lighter colors now, and has significant usage of font coloring to show important points. I like it. Maybe they’ll improve the Yahoo Mail layout next.

In Progress, But Sleepy

As it may mention in the page title, I’m currently screwing around with the blogger template, so this blog may look a bit…um…screwy for a while.

I’ve been wanting to toy around with Javascript hacks to extend the Blogger template functionality. The first thing I did was add some Javascript that allows you to show/hide individual posts on the page. But actually, I don’t really like it, I’ll remove it later.

I’m also wondering whether it’s possible to have a Javascript hack that allows Blogger to have categories? The Category names would have to be included in maybe the post title text or the post body text, then we’d have a Javascript parser that determines the correct categories for each post. Then we could append category names to the URL to allow viewing by category, using javascript again to parse the URL to find which categories need to be displayed.

Seems like a lot of work though. My Javascript is not as strong as I want it to be — although I have a pretty good idea of how it works, I’m no expert. So I guess working on these hacks would be good practice, but maybe the time would be better spent learning PHP and preparing to move to a paid webhost? (If wasting time is a consideration, it’s too late – I’ve already spent some two hours fooling around with the current template.)

A bit sleepy. After all, it is almost 4 AM. I’ll try to fix this thing later.

On hindsight, I should’ve set up a test blog and toyed around with that instead of modifying this one directly.

Excel problem

The Christmas season has been hellacious. Deadlines to catch up with at the start of the next year meant crunch time for most of the past two weeks. So, for my first blog post on my first rest day in a while, I’ll bring home some work.

I have a problem with Excel. I’m writing a web app that generates HTML files which are exported to Excel. In most cases, it’s easy, I just follow the template generated by using Excel->File->Save As->HTML

However, I’ve encountered a problem. One of my reports needs to show two tables side-by-side in Excel, but I have to generate the rows for each table independently (i.e. from separate SQL queries). My first thought was to use tables-within-a-table in the HTML source, but it seems that Excel loses the column widths (i.e., the column widths change from what I’ve set them to before) when I try to create a new table inside one of the existing s

I need to preserve the widths of the columns outside the inner table. Any idea how this can be done? Or maybe someone can point me to online resources that might help?

Unfortunately, this has been sort of a low-pri task for me, so I haven’t had much time to check it out; but the deadline is creeping up on me fast. I’ve posted on some forums and asked around, but no positive responses so far. Any assistance is appreciated.

Sinfest!

I was bored. And I was going through the

Sinfest

archives. But then I thought, why should I bother going through these comics manually over the net? I’m a programmer, I’ll make a

SinfestDownloader

!

I’ve left it running for about 4 hours now. There’s a lot of Sinfest strips…around 40MB worth have already been downloaded!

I wonder if this violates any sort of copyright? …

Update: Done in a little over 4.5 hrs. Sinfest weighs in at a bit more than 1700 strips, and roughy 50MB of space. I wonder if I should try for Penny-Arcade? 😛

The First Time I Hated Users

Yesterday, at around 6 PM, as I was winding up the day’s work, we received a request from the user that they wanted some maintenance work done on one of the more obscure programs. And they needed it the next day! And we still had to have a meeting (we had originally scheduled the meeting for 3:00PM but had to keep pushing it due to stuff coming up) I wanted to reach out across the internet and slap whoever made the maintenance request on the head. End result: Most of us went home a bit before 12, the meeting never pushed through, and I called in for half-day sick leave today because of a freakin’ headache.