thetransient

I just had a fleeting moment of stress! It began when I decided to Google the title of my most recent blog posting, Test driving Internet Explorer beta 2 developer tools. When the results came back, there were many postings with similar titles (to be expected) but one that stood out sent a shock wave through my body. It was for a posting on Robert Nyman’s blog and, for a moment, I thought the title was the exact same as my own! I admire Robert’s blog and read most of his postings, especially the ones focusing on CSS and JavaScript. Luckily I soon realized his entry was about IE7 beta 2 and not IE8 beta 2 developer tools. The remainder of his title wasn’t the same either, but because I instantly recognized his domain in the Google search results and saw that they were associated with a title that at first glance triggered familiarity with my own, thoughts of public condemnation due to plagiarism rippled through my brain!

Once I realized my mistake, I took survey of all the blog postings that were similar to my own, and there were many. Some were from small-time bloggers such as myself, and others from larger web design communities. I think from now on I’ll Google potential title’s just to see what’s out there. Maybe I’ll use them and maybe I won’t, but it will be a good exercise in understanding search results. After all, the writer in me could not go on living if I was blacklisted due to plagiarism!

I’m sure every first-time blogger goes through a similar experience that goes a little something like this:

1. Start your blog
2. Google the title of one of your postings
3. See many blogs with the similar titles and:
   A. Get stressed about the sheer volume of competition
   B. Get stressed about the prospect of being called out for plagiarism
   C. Give up blogging.
4. Blog about it (or not if you fall under 3 - C)!

Tags: blogging, observations, personal
Posted in Uncategorized | No Comments »

I’ve been playing with the IE8 developer tools and what at first seemed like a promising new UI utility has revealed itself as rather under-whelming and run of the mill. Sure it has typical features such CSS editing and image highlighting, but where’s the state of the art, move the web forward functionality we were expecting? Maybe I’m being delusional and that’s too much to expect from Microsoft!

The good

The mode switcher is awesome! To have the ability to see how code responds between Quirks Mode and Standards Mode is really handy, especially since IE’s rendering is so different between the two. It’s ironic that the developer tool’s best feature is only there due to its own shortcomings over the years.

Other nice features:

• Outline tab indexes and access keys
• Outline any element you want
• Outline positioned elements based on value

The bad

I’ve only scrutinized the CSS/HTML tools, but many not-so-positive things jump out even after just a few bug fix attempts.

• The Select Element by Click option is buried in a drop-down menu. There should be a button or key-command or a right-click menu option (actually, all three!).
• CSS style hierarchy pane descends when it should ascend. In the styles pane, the element styles line up from the very top of the cascade hierarchy to the bottom. More often than not, I’m going to want to see the very last styles that are applied to an element first and not the very top level styles on the BODY tag. Every time I select an item I have to scroll all the way to the bottom of the styles pane.
• There is no way to delete elements from the html. FireBug offers the ability to delete elements completely and this is a very handy function for bug hunting by using the process of elimination. IE8 dev team should implement this feature.
• Edit html changes don’t stick until leaving edit html mode.

It wasn’t my intention to compare it to FireBug, but I couldn’t help it since that is a tool I use quite often.

The buggy

It’s only a beta version but man is it buggy! Usually from anywhere within five to twenty options selected or styles deselected, the tool begins to slowly or dramatically lose functionality. Either the style pane completely goes white or the edits to styles stop showing up in the browser window.

Conclusion

If the developers of the IE8 development tools can fix the bugs in their tool and improve its usability, they’ll have a very handy tool to contribute to the community. If not, then they’ll simply be doing what they’ve always done…take something that they can really shine on and underachieve. I am still pulling for them to blow my socks off, but still have that simmering feeling that they will let me down once again.

Tags: development tools, IE8
Posted in development tools | 1 Comment »

Here’s a tip to reduce clutter on a page with lots of repeating links, icons and/or elements. Say you have a list of search results on your website and each result has many action icons and links. It isn’t necessary to have to links and icons visible at all times. The non-vital content can be hidden by default and only shown when the user hovers over the search result containing element.

Check out this hiding non-vital content example.

The method for the example is very simple and can be accomplished with a small jQuery function and a single class assigned to each element we want to hide. This can of course be done with plain old javascript as well but I’ll use jQuery because it’s so darn easy.

Here is the jQuery code:

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function() {
//hide secondary content
$(".secondaryContent").css("visibility","hidden");
 
// toggle secondary content items on hover
$("#p110_showHideExample li").hover(function() {
	$(this).find(".secondaryContent").css("visibility","visible");
},function(){
	$(this).find(".secondaryContent").css("visibility","hidden");
});
});

Now all we need to do is add the class “secondaryContent” to any element we want to be visible only when the user mouses over the containing element.

For example, here is the remove link html from the upper right corner of the example:

1

<div class="delete secondaryContent"><a href="#">X</a></div>

Tags: javascript, jquery, user interface design
Posted in Code, UI, jquery | No Comments »

CSS, xHTML and JavaScript can become very complicated, especially when code has had numerous, variously skilled developers working on it. To help understand what is going on in ever-growing code, it helps to understand the smallest details. Today my tip will be on spaces and the absence of said spaces in CSS selectors.

Scenario number one

1
2
3

#content.favorite {
font-weight: bold;
}

1
2
3
4
5
6
7
8
9

<div id="content">
<p>Content</p>
</div>
<div id="content" class="favorite">
<p>Content</p>
</div>
<div id="content">
<p>Content</p>
</div>

In the above scenario, there is no space between the id content and the class favorite. These selectors target any element with the ID of content AND a class of favorite. In the HTML example, the second div would be given bold text per the styles.

Scenario number two

1
2
3

#content .favorite {
font-weight: bold;
}

1
2
3
4
5
6
7
8
9
10
11
12

<div id="content">
<div id="content">
<p>Content</p>
<p>Content</p>
</div>
<p class="favorite">Content</p>
<p>Content</p>
</div>
<div id="content">
<p>Content</p>
<p>Content</p>
</div>

In scenario number two, which differs from scenario one by a single space, the selectors target a child of the id content with a class of favorite. In the HTML example, the paragraph with the class favorite would be given a style of bold.

Lots of things can be accomplished by simply deleting the space between certain selectors especially when multiple classes are being used as seen in scenario number three.

Scenario number three

1
2
3

.content.favorite {
font-weight: bold;
}

1
2
3
4
5
6
7
8
9

<div class="content">
<p>Content</p>
</div>
<div class="content favorite">
<p>Content</p>
</div>
<div class="content">
<p>Content</p>
</div>

The CSS in scenario number three gives the children in the div with both the classes content and favorite a style of bold.

For more reading on selectors, check out the very thorough selector page over at the W3C.

Tags: css, tips, xhtml
Posted in CSS, Code | No Comments »

Well, it’s been a long time coming. I’ve had thetransient.com domain for nearly a decade now and it’s served me well. I haven’t done it any favors, however, by letting it stagnate as the web grows by leaps and bounds all around it. By launching this blog, not only will I give thetransient.com the fresh content it deserves, but also give myself a platform to blab on about web design.

Tags: announcements
Posted in Uncategorized | No Comments »