entropia

A few days ago I wrote a bookmarklet to hide unwanted elements on a page. Today I have one to “fix” the colors on any page, so everything is black-on-white. Here it is, tested in IE7 and Firefox. Note that it doesn’t actually make most pages easier to read (for example all links will become the same color as regular text), but if someone tries yellow on red, or light grey on slightly lighter grey, now you have a weapon.

And here’s the readable version:

It builds upon what I learned when writing my dynamic CSS library. It’s a really simple process, complicated by browser quirks and inconsistencies. First it makes sure the page has a stylesheet, and adds one if not. Then it adds a rule at the end of the last stylesheet.

The if is needed because IE and Firefox use different functions for adding rules (IE uses addRule and Firefox uses insertRule).

The timeout is needed because of a Firefox quirk: if you add a stylesheet, it’s not immediately available. Setting the timeout forces Firefox to do whatever it needs to do before the rule is added.

For all the complaining some people do about working around IE’s problems, this is one script that’s much harder in Firefox.

Recently released Bioshock has some of the best looking in-game water ever (at least until Crysis is released). But there’s one thing it does very wrong, and it drives me crazy.

Why is that corridor distorted? We’re in another corridor, looking through a flat piece of glass with water outside. The water surface is not changing, but Bioshock still renders a distorting, “swimmy” effect. I can understand distortion when the camera is underwater — it gives a feeling of disorientation that you normally feel when swimming.

And Bioshock is not alone in this. Even though this is an uncommon situation it most games (looking through glass underwater), I cringe every time I see it.

Why do so many blogs have pictures of the writers on the front page? There’s nothing more distracting than an unfamiliar face staring at you when you’re trying to read. And when what you’re reading is technical or challenging, it just makes things worse. So, I wrote a little script to let you hide any part of a page by clicking on it. Just bookmark this link. Then you can just click the bookmark and click on the offending picture, or whatever, and it goes away.

It sets an onclick event to the document that hides the target, then clears the event. Careful though: if you click on the background the whole page will disappear.

I hope I’m wrong about this, but apparently Wordpress has no way of linking between posts. And for some reason, I couldn’t find a plugin to do it. I’m amazing that this fundamental blog feature would be missing from one of the most popular blog authoring tools, so I’m hoping that I’m just missing something. Either way, I ended up writing a plugin myself.

I hadn’t written a Wordpress plugin before, but I’d heard it’s easy. And you know what? It is. There’s plenty of documentation about writing a plugin and the plugin API. Plus it’s really simple to do: just create a function to do whatever, and use add_filter to set a hook. Here’s the entirety of my plugin:

A while ago I wrote about some of the issues I have with modern blogs.

Tag clouds are the worst thing to happen to blogs since the term “blog”. If you want to show the most popular tags, show a list; they’re smaller, easier to understand, and more informative.
…
[Calendar views] are nothing but more complex and less usable reworkings of more established views.

Unfortunately, my borderline-incoherent rambling would go unheard (although in a wierd coincidence, CodeBetter, which I used as an example, redesigned their site soon after I posted). But thankfully Jeff Atwood now has a nice post with a similar subject: Thirteen Blog Clichés.

I can’t think of a single time I have ever found the blog calendar widget helpful. My computer already has a calendar function, so it’s not like I need another calendar displayed in my web browser. Every post carries an obvious datestamp, so I can easily discern when it was published. But knowing whether someone posted an entry on the third tuesday of the month? Utterly useless.
…
The perception is that tag cloud visualizations are cool, like badges of honor for the tagging club. The reality is that tag cloud visualizations are chaotic, noisy, and unusable. Keep the tagging, lose the cloud. A simple sorted list of tags, along with the number of posts associated with each tag, is much more effective.

One of the most annoying errors someone can make on a webpage is incorrectly setting the overflow property of fixed-width containers. I notice this a lot when I read CodeBetter.com. In this post the screenshots overflow the post column and extend all the way behind the navigation column. This also happens with code blocks. I’m surprised that, not only do the writers fail to notice this when they preview their posts, as they should do, but no one has done anything to fix it.

I end up having to use IE Dev Toolbar or Firebug to select the offending images or codeblocks and set the overflow property to "auto". But even then, IE has problems: it shows a vertical scrollbar when it should just bump up the height of the container. The only fix I’ve found is to use JavaScript.

But before I get into that, here’s a quick primer on the overflow property. (W3Schools and W3C.org have more information, of course.)

Overflow determines what happens to content that can’t fit its container. For example, a long line of preformatted code in a narrow blog column. There are four options:

Visible The extra content is shown, even outside the borders of the container. This is generally not what’s wanted.
Hidden The extra content is hidden, with no way to see it. This is used for certain “tricks”, like single-image rollovers where the “hover” part of the image moved into view when needed.
Scroll The container is given scrollbars, even when the content doesn’t overflow. This usually looks wrong when the scrollbars aren’t needed.
Auto Scrollbars are added as necessary. I prefer this for most cases, since is will only show the scrollbars when they’re needed.

IE has a problem with "auto" though. Content that only overflows horizontally (like long lines of code) should only be given a horizontal scrollbar. But since the horizontal scrollbar covers up the bottom line of text, IE also adds a vertical scrollbar, instead of making the container bigger like Firefox does. Not only is this annoying with average-sized blocks of code, since you need to scroll to see that final line, but it makes it almost impossible to read one- or two-line blocks, since the vertical scrollbar is so small.

The only way I’ve found to fix this is using JavaScript:

This will loop through the elements that might need fixing (here, defined by the “codecontainer” class) and checks if clientHeight (the visible region) is different from scrollHeight (the height of the content). If height is not specified by CSS anywhere, the difference will be the height of the scrollbar. But to make sure, we first set style.height to scrollHeight. This makes the container’s height the same as the content height, which will change clientHeight but not scrollHeight. Now the difference is the height of the scrollbar, which we can add to style.height to remove the vertical scrollbar.

It’s all a little confusing with three varieties of “height” to work with. It just makes the container height equal to the content height, then increases it by the scrollbar height.

Unfortunately, I’m using a third-party syntax highlighter called … syntaxhighlighter, which I haven’t been able to update with this feature yet. So for now, this post is full of hypocracy, but I’ll get it fixed.

I’ve been programming more with C#/ASP.NET and less with PHP lately, and I think it’s interesting how they differ in extensibility. In PHP, it’s very easy to write something with a specific goal in mind. If you want to put data into an HTML table, you just loop through the data and write out the corresponding HTML. If you want to add some functionality to the table or render it slightly different on another page, you might end up having to rewrite it or duplicate code (of course, there’s always the option of using some third-party library of data widgets).

In ASP.NET, if you want a table of data you need to create a DataGrid, bind the data, set up the columns, etc. But when you want to change something, the framework you just set up allows for it.

I needed a way to reorder rows of data, so I made a DataGrid and gave it two columns for “Move Up” and “Move Down” buttons, and tied the buttons to a function that would swap rows. After I got it working for a particular set of data, I decided to turn it into a user control to be used with any set of data. The only change I had to make was replacing the column definitions in the aspx file with dynamic column creation code in the code-behind. Now, any DataGrid can be made into a OrderableDataGrid by replacing the definition tag.

Using multiple languages makes you a better programmer. Now, when I need to do something like a data grid in PHP, I’ll use what I know from C#/ASP.NET to make it easier and more powerful.

The importance of quality hardware for developers is well-established. Jeff Atwood went so far as to create a Programmer’s Bill of Rights which companys should adhere to:

1. Every programmer shall have two monitors
2. Every programmer shall have a fast PC
3. Every programmer shall have their choice of mouse and keyboard
…

My company recently (finally) upgraded my computer. Now things like switching windows, loading menus, and, maybe most importantly, compiling, happen almost instantly. I spend less time watching hourglasses and more time solving problems. Plus, without a delay everytime I try to do anything, I can stay more focused; I experience fewer “what was I just doing” moments.

But the biggest benefit from having a faster PC is that I am a lot less frustrated. I mean a lot. I was constantly fighting against my computer, trying to maintain my sanity while it chugged away performing some trivial task like loading the Start menu Programs list. I would have to step away a few times every day and read a book or go to the kitchen just to settle down.

Now I can actually get work done. I have better concentration. I’m more relaxed. Sometimes I’m almost actually happy at work. And this helps me stay in the flow and get more done.

If you’re going insane working against your computer, maybe it’s time to get one that will cooperate with you. And it’s not always just the computer; maybe the monitor, the keyboard, your chair is preventing you from getting work done.