Monumental week for the Web

Published on 26 Jan 2008 at 12:47 am. .
Filed under Web stuff.

I cannot think of a week for the Web in all of the years that I have been a Web developer. Let’s go over the highlights.

1. Ten years of Mozilla — I know that this is relatively minor, but it is worth pointing out that it has been 10 years since the birth of Mozilla from the Netscape Communicator 5 code branch. We have seen a rendering engine birthed by the dominant browser of the day flounder into near obscurity and then rise up as a Phoenix into the mighty Firefox Web browser. A browser that took away enough market share from Internet Explorer that Microsoft resurrected the development team after it had been discontinued. Thanks to a plethora of development tools, Firefox is the browser of choice in the Web development field.

2. W3C publishes the first working draft of HTML5 — HTML 5 is the next step in the evolution of HTML. With the inclusion of a new DOCTYPE we will see a large number of new elements that finally standardize a number of very common page elements, such as navigation, headers, footers, and sections. More useful are an increase in the number of form input types to automatically validate input natively (like email and links), as well as define behavior like Google Suggests. Additionally, it provides a standard for embedding plugins onto a Web page, and even comes with audio and video elements which allow Web developers the ability to create controls through JavaScript, just like they can in Flash. This allows designers to create buttons that fit the style of a Web page with ease, and gives developers to do things like automatically pause or reduce the quality of a video if a user scrolls down the page so that the video is no longer even on the screen. There a great number of other cool things that are being created in HTML5. Sadly it will take a great number of years for the major browser makers to implement them all. 🙁

3. the * hack is dead, long live the * hack — Using * html was a fairly well known CSS hack that caused a rule to be set in versions of Internet Explorer 6 and below, but did not work in Internet Explorer 7 or any other A grade browser. During a discussion Eric Meyer’s update of his Browser History Timeline he revealed that a new form of the * hack lives on in Internet Explorer 7 through the use of the adjacency selector (because IE7 sees the DOCTYPE as being adjacent to the html element). While CSS hacks are very bad in theory, they are very useful in practice.

4. New Elements were found to exist in Internet Explorer 7 — it appears that through the use of VERY simple JavaScript, Internet Explorer 7 will follow allow Web Designers to create style rules for elements that it does not know exist, such as the HTML4 abbr element. Every other Web browser already lets you set styles rules for elements, even if the browser does not know about that element, so this revelation now moves IE7 more in line with the behavior of other browsers. Also, while it may not provide the behavior proposed in HTML5, it will allow Web designers the opportunity to design sites today that are forward compatible with Web browsers of tomorrow that do render HTML5.

5. Let me start off by saying I hate WordPress and really wish that accidentally hitting a link and then hitting back did not cause me to lose everything I had just wrote on this next point….

   Microsoft’s announcement of Super Standards Mode in IE8 — under the premise of “Don’t Break The Web”, Microsoft has brought forth a proposal for a new way of determining the rendering mode that a browser should display a page with. In the past, if a DOCTYPE was missing all browsers would render the page in Quirks Mode, which is basically the same across all major browsers. Developing new pages in Quirks Mode is very difficult because there are a lot of undocumented bugs that causes weird rendering. The presence of Quirks Mode today stems from a need to keep pages written in the past still working today, and giving todays developers another mode to render in that does a better job at behaving sensibly during Standards Mode (through use of the (X)HTML Strict DOCTYPE) or Almost Standards Mode (using the Frameset or Transitional DOCYPEs) — a mode that is like Standards, but shrinkwraps table cells whose only element is a single image to the width/height of the image, leaving no padding. Unfortunately, Microsoft is in a unique position where they have had the quirkiest Standards Mode of any browser out there, and the largest user base. When they rolled out IE7 with hopes of catching up with all of the other browsers that had greatly past them up in terms of accurate rendering, they were met by a large number of (IMHO amateurish) organizations that claimed Microsoft “broke” their Web site. This claim has seen by many as to be disingenuous because it is not Microsoft’s responsibility that a Web page render the same in Standards Mode across each new version. This is not an action taken by any other Web browser, nor should it be. The only fair thing to do is to give the community the opportunity to beta test the browser before launching it so that necessary changes can be made before it is released to the masses, which was done with IE7.

   Because of this fear, Microsoft feels the need to introduce a stricter mechanism for determining the rendering engine. The proposed opt-in mechanism is to require either an HTTP header or a meta tag that contains a certain value stating what the page should render as. Because they do not want to re-release the furor that they received from organizations after they released IE7 with the release of IE8, they are proposing that the absence of this opt-in will result in pages (assuming they have a DOCTYPE) to render using the IE7 engine instead of the most recent engine available. This opt-in mechanism need not be specific to Internet Explorer, but so far the consensus from the other major browsers is that they do not feel that they need to implement this type of switch because the DOCTYPE switch works for them just fine.

   The Web Standards community has been fiercely divided upon whether or not this is a good approach. The detractors of the opt-in approach are angered that they feel that they are being punished for writing standards compliant code and need to muck around with their page structure (or reconfigure their servers) to use the best possible rendering engine that a user has available. They feel annoyed that Microsoft is coddling the, in their opinion, lazy and/or amateurish organizations by allowing them to never need to progress there sites beyond that capabilities of IE7. The supporters of the opt-in approach feel that this is the best compromise that they feel Microsoft can allow. Many argue that, through the use of Conditional Comments or CSS hacks, we are already mucking with our page layout for Internet Explorer and this proposal is merely a method of standardizing what we are doing. Seeing as how well educated, industry leaders cannot come up with any non-trivial page layout without the need for at least some form of convoluted markup or other hack-ish behavior to work flawlessly across browsers [I had this linked before I lost my content and cannot re-find the quote, but it was by Eric Meyer] I believe this is a strong argument.

   What wasn’t discussed in the initial announcement about the new mode was that there is a third mechanism for triggering the new rendering mode in IE8. Just one day after the publication of the A List Apart article Microsoft’s Chris Wilson announced that the HTML5 DOCTYPE will trigger Super Standards Mode in IE8. Given that this DOCTYPE was designed as to cause all present browsers to continue rendering sites using the best possible rendering mode when presented in browsers that do not yet support the new elements in HTML5, it feels to me that the HTML5 DOCTYPE is the optimal compromise for the Web Standards community. It falls in line with how mode switching has always occurred. It shows that the page was clearly developed for use in modern browsers by standards aware developers/designers that know that they will have to support older browsers that do not fully support HTML5 yet, and thus the designer/developer really does want the best possible rendering their client can handle without mucking up changes for a single browser, but rather for every browser.

CSS letter spacing oddities

Published on 12 Nov 2007 at 8:43 pm. .
Filed under Web stuff.

While trying to help my friend Jeff help work on his sister’s web site I explained to him that he had a text-align justify rule. For a lark I suggested if he wanted to keep that going he could always use letter-spacing/word-spacing. While looking for a URL to send to him I discovered that word/letter-spacing may take negative values.

For the life of me I could not think of a real-world use case for allowing negative values. The best I could think of was to reverse the display of characters, so I tried giving letter-spacing a negative 1em value. Holy macaroni! Talk about inconsistent! Safari 3 on Windows does show the content inverted like I expected. The content is entirely hidden in Firefox. The last ‘e’ in ‘Content Here’ is the only character to display in Internet Explorer 6. It appears that Opera 9.5 ignores the rule entirely!!!

100th Post!

Published on 11 Nov 2007 at 3:10 pm. .
Filed under Life.

Okay, technically a couple of articles have been deleted during my early days testing out the system, but this is my 100^th blog entry. So what should I blog about? My new car of course!

My 2006 Chevrolet Monte Carlo

It was a rental car from Massachusetts that was bought from a GM auction with 25,000 miles on it. It gets 31 mpg highway, 21 mpg city, has 211 hp.

It is OnStar and XM capable (too bad I have Sirius). The stereo can remember about 20 channels more than I actually listen to. It has a sensor that shows off the oil life for the car. I am honestly loving finally owning a car with a remote, and have taken great pleasure in showing off the remote starter feature. 🙂 Too bad the remote seems to start the fans in my living room for some reason. 🙁

Yet Another CSS Based Column Layout

Published on 1 Nov 2007 at 11:46 pm. .
Filed under Uncategorized.

The concept of a CSS column based layout has been written about to death. We all have our favorite method of accomplishing it, be it floats or absolute/relative positioning, but no one seems interested in using the simplest method available display: table;.

The reasoning behind this stems from the fact that Internet Explorer does not support this property, and it is only fairly recently that the standards compliance crowd has begun to advocate the use of Internet Explorer’s proprietary use of conditional comments. We now use conditional comments instead of CSS hacks, like the * html, but we have not yet fully taken to the practice of giving Internet Explorer a completely different layout structure from everyone else.

While branching out into different layouts might be a bit of a headache for maintenance, it can also open up opportunities by removing barriers. For example, imagine the following layout:

With this layout we can imagine the top left side will hold a small logo, while the top right has the site’s title. The bottom left will contain the navigation and the bottom right is the actual content. Obviously you want the the colors to stretch if the content is incredibly wide. This is pretty damn simple with a table based layout, but any self respecting standards-aware designer would know that a <table> tag should be used for tabular data, not layout. That said, said self designer should not be opposed to changing the default display property of an element. Heck, that’s the whole point of having it available. Let’s look at the simple markup:

<div id="wrap">
	<div id="top" class="row">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div id="bottom" class="row">
		<div class="left"></div>
		<div class="right"></div>
	</div>
</div>

And let’s start with the following mark CSS:

html, body, #wrap { width: 100%; height: 100%; margin: 0; padding: 0; }
#wrap { display: table; }
.row { display: table-row; }
.left, .right { display: table-cell; }


The very first line will remove the margin and the padding and set our page to use the full view-point. The display: table is really only necessary for Safari, as Firefox would handle the layout fine with the default value of block for the div, but since we’re already using the table-row and table-cell there is no reason why it would be wrong to not include that. And Safari is a nice browser to support. 🙂 I’m not sure if Opera needs the display: table like Safari does, but it definitely works with it there.

Now let’s add a few rules to set the background colors, the left width and some padding.

.left { width: 150px; background: #0072BC; }
.right { padding-left: 20px; }
#top .right, #top .left { height: 60px; border-bottom: 15px solid #DF9422; }
#bottom .right { background: #99CCCC; }


As you can see from my working example, we have Yet Another CSS Based Column Layout that works in all standards aware modern browsers. 🙂 Oh course, it’ll fail miserably in Internet Explorer, so let’s add a conditional comment to fix this:

<!--[if lte IE 7]>
<style type="text/css">
#wrap { overflow: hidden; }
.right, .left { float: left; }
.right { width: 100%; margin-right: -170px; } /* .left's width + .right's padding-left */
#bottom .right, #bottom .left { margin-bottom: -9999px; padding-bottom: 9999px; } /* stretch the background colors the rest of the viewpoint */
</style>
<![endif]-->


Update: After a little bit of back and forth testing with Internet Explorer 6-7 (I wish Microsoft made it easier to test in both), the above set of rules are the definite set needed to get everything working in both versions.

Congratulations newly weds

Published on 29 Jul 2007 at 8:33 pm. 1 Comment.
Filed under Life.

So in a weird twist of fate yesterday both my cousin Blake and my old grade school friend Matt got married and both had their reception at the Burgundy Basin. My cousin also got married there, but Matt did not. I am incredibly happy for both couples and wish them the best.

I was the best man at my cousin’s wedding. Here is the text of my toast.

Blake and Kelly.

Going on what? 7 years strong?

Through out that time they’ve made a lot of memories. A lot of significant memories. I think it’s safe to say that I don’t think any of them will have topped this.

Like every couple, they’ve also had some sad memories. In the last two years they’ve both lost loving grandmothers that were important to each of them. I know that we all wish that they could both be here for this.

(pause)

I think the moment to show me how much they really needed each other happened a couple of years ago. It was Easter, and Blake… let’s just say that Blake wasn’t feeling very well. We had to take Blake to the hospital because he wasn’t making much sense. During that time, the one person that could reach him was Kelly. She helped center him. Looking to the future, I don’t see that ever stopping. Heh, not taking Blake to the hospital that is.

Let the love they share never die.

God bless Kelly and Blake.

During the reception my mom, Blake, Kelly and I decided to crash my old friend Matt’s wedding.

You see, Blake remembers hanging out with Matt’s now wife Shannon about a decade ago when the two of them, myself, and my old friend Derek had went to a festival. I believe this may have been around the time my mom was suffering from cancer. I believe Matt had just met Shannon around that time or may have met her at that date (I forget the exact details). Matt and Shannon have been together on and off ever since then. 🙂

Ybug

Published on 25 Jul 2007 at 10:23 pm. .
Filed under Web stuff.

It seems that Yahoo has released a new Firefox extension for developers called Yslow. The purpose of this extension is to help rate the performance of a Web site. It does this by extending on the popular Firebug extension. A meta-extension if you will.

While I deeply appreciate the work of the Yahoo development team and think that this could be a very useful extension, this tool really needs some more polish. After just a few minutes of playing around with it I’ve found the following bugs:

• Incorrectly lists CSS files as being outside of the HEAD element. This doesn’t happen all of the time.
• Incorrectly lists ETags as being missing when they are not. By clicking on the ‘Stat’s button you can see all of the served out ETags.
• Not really a bug, but not having an expires tag on every file shouldn’t constitute an F rating.
• While I can’t be sure that they really aren’t, I find it odd that Akami, one of the leaders in Content Delivery Network (CDN), is listed as not using a CDN. Nor is the WWE, one of their clients.

I’ve seen many of these bugs on one of our client sites, Montgomery Chiropractic Center.

Beyond the bugs, one really has to question the fact that they weighed each proponent equally. Most web sites will never be Amazon level and thus will have no need for a CDN. True, having one will improve your site’s performance, but weighing it the same as setting Expires/ETag headers is just unrealistic.

Also, this tool is only useful for measuring sites that have a high percentage of returning visitors and does not score very highly for sites geared primarily for unique visitors that only view 1-2 pages before they leave. In those situations it would be preferable to not have any external CSS or JavaScript but better to have them all on one page to decrease the number of HTTP requests. Of course, for most Web sites you are going to want to compromise between these two so this tool only measuring the one is a bit poor.

Due to its bugs and a metric that lends itself to low scoring, I really don’t advice taking this extension too seriously right now. It can help point out some bugs and will be great in the future, but for now it’s not up to par. Then again, maybe this extension was really meant only for developers of Amazon-like level sites and isn’t for general Web developers, but if that’s so then they really should say that somewhere.

Fark redesign

Published on 26 Apr 2007 at 11:32 pm. .
Filed under Uncategorized.

Honestly, I kind of like what they went for, but like most others I feel it has too much contrast and wastes space. Firefox users, add the following style rules to your user style sheet (userContent.css).

@-moz-document domain(fark.com), domain(totalfark.com) {
#bodyMainContainer { width: 100% !important; padding-right: 0 !important;}
#bodyRightSideContainer { display: none !important; }
#commentsArea .ctext { margin-bottom: 0 !important; }
.bodyHeadlineContainerNotNews, .bodyHeadlineContainerVoting, .bodyHeadlineContainerFoobies {background-color: #CCCCCC !important; }
}

If you are the type that feels it is wrong to remove ads from sites, remove the first two rules (bodyMainContainer and bodyRightSideContainer). The third one cleans up a little bit of space in the comments section. The last rule sets the background color on the main site from white to gray. I was too lazy to fix it up any further, but I was happy with those results. I might suggest looking for a slightly different shade of gray, but that was the only shade I remembered off the top of my head and again I’m too lazy to look it up more.

I still live!

Published on 8 Apr 2007 at 9:11 pm. 1 Comment.
Filed under Comics,Life,Web stuff.

It’s been quite a while since I’ve posted on here. I’ve had quite a bit happen in that time frame.

• Back in November I started as a full time Web developer for Brabon Justice International. This makes me one of lead developers behind igniteworldwide, Up Your Image, and IHCPR. Ignite Worldwide is our custom Web site business, while Up Your Image and IHCPR are template driven Web site builders. The latter geared towards those in the medical practice while the latter is a general purpose template business. Since starting their I have learned A LOT about DNS stuff and working as a systems admin.. Gotta say I’m enjoying it. 🙂
• Some pains I had been experiencing in my stomach/abdomen area started getting more severe. It turned out I had gall stones and had to get my gall bladder removed. 🙁
• I joined the Rochester Athletic Club. They started me off a little too easy and I was bumping up program a little too slowly each time I went I learned, so I can’t really say I’ve seen any results yet since I’ve adjusted my program. Still, it’s good to do I guess.
• I’ve caught up on a substantial about of reading and DVD watching. I’ve read the 300 hard cover, the first six volumes of Sandman, as well as caught up on a number of runs of comics that I’ve picked up including all of Kirby’s and some of Ditko’s runs on Machine Man, Peter David’s first run on X-Factor, a handful of Todd McFarlane’s Spawn, many issues of Alan Davis’ run on Excalibur, Jim Starlin’s first Breed mini, as well as the second volume of Superman Chronicles. I am nearly finished with my Thundercats DVDs, and have watched this DVD of Rozen Maiden that my friend Loun-Loun sent me. Once I have finished with Thundercats than I am going to watch the last volume of Batman Beyond and then both volumes of Justice League Unlimited. Yeah, I need a life. :p

Fallen Angel Christopher Daniels interview

Published on 20 Dec 2006 at 11:13 pm. .
Filed under Comics,Wrestling.

Just recently Marvel comics interviewed “The Fallen Angel” Christopher Daniels. The interview reinforced my belief that there is a strong correlation between wrestling fans and comic book fans, as Daniels cited Samoa Joe, Raven, Frankie Kazarian, and Alex Shelley as fellow comic book fans in Total Nonstop Action (TNA). It’s been known that TNA’s Kevin Nash is also a comic book fan, which was part of the reason why he was in the Punisher movie, and that Extreme Championship Wrestling (ECW)’s Rob Van Dam and World Wrestling Entertainment (WWE)’s stars Matt and Jeff Hardy, and Gregory Helms are huge comic book fans (I believe Triple H is as well, but I could be mistaken).

I’m a bit annoyed that the very first question they asked him was how he got into the squared circle. While that is a fairly famous synonym with professional wrestling, TNA uses a six sided ring. A little research would have avoided this little faux pas.

Usenet

Published on 19 Dec 2006 at 11:20 pm. .
Filed under Uncategorized.

Just writing in to say that Roadrunner’s recent newsgroup upgrades are incredible. I had to purge my settings and download all headers, but now I’m seeing data from as far back as 11/18! I’m used to only having a retention rate of a day or so, having a full month is a blessing.

Now I need a bigger hard drive. 🙂