CSS

What Will Save Web Programming?

H. Steele Price, IV — Wed, 16 Mar 2005 10:44:00 GMT

At the AZGroups ASP.NET meeting last night, I had a great conversation with Scott Cate and few other developers about the state of Web Programming.

The concensus was something like this: “HTML SUX” ok, its got it's place but providing a decent looking UI has become increasingly difficult to do, not easier. Making Cross-browser compatible interfaces is just nonsense given the tools we have for creating dynamic, data driven sites.

When I first saw Corel Draw and Illustrator back in 1987 I thought that Vector UIs were right around the corner, until we get Avalon we won't actually have a true Vector UI, so it only took 20 years to implement Vector UIs... Why have we had to wait SO LONG for a simple vector based set of tools so we don't have to do rediculous gymnastics to provide something as simple as a box with rounded corners, or an element with a drop shadow.

Sure all this can be done, but at what cost, and what if you want to change it, the ripple-effects are so frustrating that it makes you want to fall on your sword. CSS isn't supported the same everywhere, making Scalable gradients is a joke, and putting 100 gifs/jpgs/pngs on a page to achieve a design is a bit silly.

Most of us “professional coders” have an arsenal of tricks we use to make compliant html pages that work in most if not all browsers, but its just too much busywork when the tools exist to make this simple.

We have SVG, Flash, XUL and XAML all on the horizon to completely change the way we format pages, but will any of them rise to be a standard? Who really knows, unless somebody starts committing to these things and championing the reduction in development cost and maintenance designers and developers are just going to stick with what they know until they are forced to change.

Some people have jumped ship and just gone back to making Windows Apps that talk to web services and use one-touch deployment to ease the pain we used to have with installation and DLL Hell. While this is great for Windows based solutions it does nothing for the public web.

The bottom line is that we need a set of tools we can use to make all this really simple to implement, work in all browsers and look like a rich application.

With the Web Services tools (WSE2) we have today, Indigo on the horizon and equivalent support from the Open Source side of things we are most likely going to see a rapid shift in the way Web Apps look. Themeing is important, but so is consistency of operation. The whole reason Windows dominates the business world os because all programs follow a set of standard that are common throughout applications, F4 closes and App, F1 is help, ctrl-c cuts, etc. while this is great and can be over-ridden, most people can use any application immediately and learn the depths later.

If the Browser has any chance of really being the least common denominator, it's going to have to present a site the same no matter what developers and designers are doing (if they follow a set of standards). If Microsoft is serious about making IE7 a great product and not just a step up from IE6 they have alot to do.

On the same token, Firefox is not the Holy Grail of browsers either, it doesn't easily support SVG, you have to use an alpha version from Adobe to make it work and dig around for installation instructions.

I could ramble on and on about this, but I am going to attempt to make a difference and jump to SVG and make some tools that I can use that work the same in every browser. SVG doesn't yet have the penetration Flash has, but it's a lot easier to program with and you can use Illustrator or Visio to make your SVG, or you can create SVG programatically on the server. This is exactly what we need to make Rich UIs on the web and stop forcing HTML to do things in bizarre ways just to make it work across browsers.

The cool thing about SVG is that you can have the best of everything, now we just need to convince Browser makers that it should be BUILT-IN to the browser and not just be a plug-in, when we have this, we can make Win Apps, Linux Apps, Mac Apps, and Windows Apps all look, feel and operate essentially the same. I can't begin to tell you how many headaches that will solve for the real-world developers and bring a innovation to programming we have never seen before.

The tools are there, we just need to start using them.

Designing ASP.NET Code with Graphic Designers in mind

H. Steele Price, IV — Sun, 09 May 2004 20:30:00 GMT

While I am on the subject of CSS...

I want all you coders to take one thing into consideration:

“coders are usually terrible graphic artists”

While your left brain - right brain functionality might be quite intact, it is without question that some of the absolute worst layouts I have ever seen are done by programmers who think they are truly beautiful creations.

Beauty is quitefirmly in the eye of the beholder, but whose idea was it to make a <blink> tag? It surely wasn't a graphic designer. Doing things because they are cool or just because they are possible doesn't make them attractive.

Graphic designers make some really ugly stuff too, don't get me wrong here. I am not picking on coders alone.

However, as coders you have the ability to provide an escape route for poorly reasoned or misguided layouts by incorporating the thought of layout into your code designs.

We may think the world revolves around C# or XML or ada code, but in fact, the world sees your layout before they even consider your code. If you feel less comfortable designing a layout than you are writing a quicksort algorithm, get some help, consult a professional designer.

I really love the popularity blogs have gained because it gets more information into our hands than we ever had before. The thing is... Blogs are cool, mostly well written bits of code that only lack one thing, the ability to skin them in a way that a graphic designer can take and run with. Remember, graphic designers are artists, they are tempramental and NOT coders. They don't want to slog through some aspx code just to change the way a column is formatted.

So build these artistic capabilities into your code and even if you don't think anyone will ever want to change the design, someone somewhere will find a reason to.

Microsoft has seen this shortcoming in Windows and have they done anything about it? Not really, but we should have a bit more flexibility in Longhorn through Avalon, Aero and XAML. Linux is just as bad, sure you can skin it, but I don't want to decorate rectangles, we need ways to take containers and completely change them if the need arises. We don't live in a square world, square is just convenient for developers because they don't have to think too much to bang out a square design.

The popularity of Skin Sites and programs like Object Desktop should tell you something... There are enough people who want to make changes that you need to build it right into your code so someone doesn't need to come along and write a hack just to make a change that should have been able to have been set easily from the beginning.

Some coders already do this, others make basic attempts to allow for skinning, others still completely ignore it as a waste of time, or put it off until version 2. The problem with the latter two techniques is that you are alienating a group of potential customers that could be in love with your code if only it allowed them to work the way they like instead of the way you like.

I encourage you to take the time to consider all the ways people might want to change things, especially if you are designing code for use at the presentation level. Designing for artists takes more thought than simply making everything available from CSS. It takes considering how you are grouping objects on the presentation layer. It takes considering that what you put at the top of the screen may be desirable by someone else to go on the bottom of the screen (or not even there...). It takes considering that everything you have thrown into a menu may be desired to be in completely seperate groups by others.

All this can be done quite easily if its thought about while you are writing your code. If this is something that you think might be changed by someone, then by all means make it accessible without writing source code and recompiling to achieve it. For the most part, I really like .Text and as the name says, it's terrific if you only want to blog text. Maybe I should take that as a clue, but I really think that with a few tweaks to the basic skin code of .Text it can enable things like floating menus, image replacement of static text and a few others things that can make it even more attractive to people who want radically different looking loayout for their blogs. I'm not just bitching here, I have spent the better part of the weekend thinking about exactly how to do this so I don't need to jump ship and use a different backend for my blog (most suffer from the exact same thing). I know I am going to here from people who say “you can do that already in ... blah, blah, blah.” That's not what I am talking about, when I get the .Text code the way I think it is more reasonable for the types of layouts you might see on CssZenGarden then I will post it and put my money where my mouth is.

So if you are writing any kind of code with a presentation layer, please consider that your design may be beautiful, but someone else might want to make it radically different.

Does Microsoft Care About Web Standards?

H. Steele Price, IV — Sun, 09 May 2004 14:36:00 GMT

This is a very intriguing article.

Does Microsoft Care About Web Standards?

The question must seem absurd. After all, Microsoft is a member of the W3C and an active participant in the development of web standards. Each new Microsoft product announcement seems to include more standards compliant buzzwords than the last. True, Microsoft doesn’t always deliver complete standards compliance, but nobody’s perfect. At least they’re trying. Or are they?

I agree with just about every word of it. Microsoft (and all the other browser makers) really piss me off with their attitude of Standards compliance, trying to make extra tweaks to improve the marketability of their product, etc.

If Microsoft (or anyone else...) wants to make some extension they think will be beneficial to internet publishing, great, so long as they maintain adherance to the currently published W3C Standards in addition to this whizbang new extension they offer. If the W3C would get off their collective ass and actually publish standards more frequently than once a decade it would surely help.

Currently I am working on a completely new skin for this Blog that is as compliant as possible and uses some techiques via server-side browser sniffing to enable/disable certain features of the browser by delivering optimized CSS.

I have spent most of this weekend pouring over CSS pages at CssZenGarden, AListApart, W3C and several other widely respected places for CSS information.

My biggest gripe from Microsoft is the lack of correct support for PNG, they could have fixed this YEARS ago with a simple servicepack that they throw out all the time, If they even had some other IE Only enhancement to support 24bit Transparency I wouldn't really mind so much, but the filters are stupid and can't resize on the client.

Currently I have to use really strange hacks that I just don't like to support PNG. I am now in the process of getting rid of all those hacks and going back to seperate CSS sheets to do image replacement only if the browser is IE.

As for standards compliance, I am guilty of not being compliant on this site, but its something I have been meaning to correct but just haven't had the time to do it correctly until now. The skin I am building for .Text that is much more flexible through CSS than the current skins and is as compliant as possible given the connecting browser. When I have it implemented I will change this site over to use it and make it available for anyone to use.

CSS Stuff and Skinning

H. Steele Price, IV — Sat, 07 Feb 2004 17:36:00 GMT

I just updated some skinning stuff while I was doing the PNGHack. I'm not sure I like the rss.gifs everywhere, but i'm going to leave it for now. I did manaqe to get them all right justified with a little css trickery.

update - 02/11/2004 I finally got it down to a single pixel width difference between mozilla and IE, boxmodels really need to be the same, this is frustrating. I had to add a <div> in all the <li> elements so width='100%' calculated the same on all browsers, still off by the left border, but it's good enough.

A little more trickery produced the menu effects I was looking for. This one was somewhat challenging... I wanted the links to change on mouseover, usually .Text does this with a tag for the Links, however, there are 2 <a> items per line on the lines that have rss feeds. I wanted it to work on the entire ListItem tag and not wrap. If I used display: block; as you normally do for this kind of effect, it wrapped the links to a new line and I didn't like that. So I set the <li> tags to a specific class and used a little javascript to swap this.className, the result is precisely what I wanted.

A couple items of note: padding is broken in gecko... list item padding escapes to the right, it's off the screen so I don't care, but it would be nice if they supported it correctly. rss images all stack up in Konqueror, who cares Konqueror is a pile of ..... use anythingelseinsteadofkonqueror.

Coder Formatter

H. Steele Price, IV — Thu, 06 Nov 2003 22:55:00 GMT

I really disliked the way that dotText was screwing up my posts with code in them, and I ran across this great tool, complete with source code written by Jean-Claude Manoli.

I have plugged it into dotText so I can paste in code easily for blog entries and all my previous posts now look right :-)

I think I may just write a simple blog post utility too that includes some of this code, something similar but simpler than w.bloggar that works better with metablogapi... Too many projects, too little time.

Cool Article on PNG

H. Steele Price, IV — Tue, 28 Oct 2003 14:07:00 GMT

UPDATE! -- I knew someone must have already figured this out... Thank you Sean Michael Foy.

This is a nice article on PNG opacity, too bad we actually need it, I really don't know why Microsoft chose not to include png support in IE6 like they were supposed to, hopefully they are announcing IE7 at PDC.... one can only hope.

I need to implement this here so I can get rid of that lame gif mcp logo, the flat one was bad, the gif a little better, but the png looks great.

p.s. this also serves as a test for blogging to .text with w.bloggar :)

New Blog System

H. Steele Price, IV — Tue, 28 Oct 2003 11:01:00 GMT

I have officially converted this blog from Drupal on Linux to DotText on Windows.

I had a small amount of trouble getting it to work right in a subdomain, but it's all functioning correctly now (I think).

I had to make some small edits to the code to accomodate my hosting service (it just needed a try/catch block for the configure page) because it didn't want to load correctly with an Empty Application name since null is not allowed I wasn't sure what to do here so the try/catch just ignores the error when it tries to load the appname for editing now.

Creating the skin was not too bad, it's just a bunch of css and some tricks I use with images, the mcp logo is actually in the tagline :-) I could have edited a control to float it around, but why bother when css works just fine. I also didn't bother renaming leftmenu even though it's on the right, because I didn't want to recode the controls. This is based on the Hover skin with colors and some other things changed. If anyone wants to see what I did, email me.

I tested the CSS in Firebird as well as IE but I don't know how graceful it will downgrade to others, I don't really care either, anything less than a version 6 browser and you can just go upgrade... or suffer.

I need to figure out how DotText can use a summary for display on the front page, I thought it would just use the Description/Excerpt field, but it doesn't. Now that I officially have it up and running I can mess with it whenever I have some free time.

Converting over the nodes from drupal took some tweaking, thank goodness I only had a couple dozen entries, anything with code had to be html cleaned because it was running the code, that not quite safe and probably needs a filter added in the code..

Thunderbird

H. Steele Price, IV — Fri, 19 Sep 2003 10:01:00 GMT

Some qualifiers... I use IMAP exclusively, I had certain odd problems with Outlook, I wanted a run everywhere solution.
I have tried several others, not to mention names, but all the top 10...
Enter Thunderbird.

This is beta software, but is more functional than half the version 3+ production clients out there.
For me, it's perfect, I can't get over how much I like this Email Client. It works on all my machines (Haven't tried putting it on a PDA yet...) and the Theming is nice. I didn't like the Skypilot theme much in Firebird but it's sister in Thunderbird is spectacular. I edited the color in the folders window to tone it down a little, but that was my only change.

If you want to break free from the common interfaces and go for something new and different, give Thunderbird a try, I think you will be surprised how much it grows on you.

CSS The way it SHOULD be

H. Steele Price, IV — Wed, 09 Jul 2003 15:02:00 GMT

CSS Done Right
Finally there is a place to answer all those questions about how to do CSS Correctly and to incorporate it into your projects for real Theming. I know that this has been naggin at me for a really long time. How do we make CSS ubiquitous across all browsers, avoid those really "cool" bleeding edge techniques that only work in ONE browser, etc.

Spend a little time reading what is there and you can become a master at incorporating CSS correctly and your designers will love working with you as a coder.