Archive for May 2011

CSS is a solution for HTML layouts but it is not a good solution

I don’t want to offend any CSS purists out there, but the more I use CSS the more I realize that is isn’t the best tool in the toolbox for layout. I am not saying html tags such as table layouts are better, but I am saying that there were problems that CSS was written to resolve, and as I understand it HTML layouts and page design is one of them, but even after 10 years it is nowhere near where it needs to be in a few areas:

  1. Feature set
  2. Simplicity
  3. Readability is low
  4. Ability to translate functionality into an IDE is poor (as seen by the fact that there is not good CSS IDE)

A while back I found a three column layout and posted about it: https://www.rhyous.com/2011/02/26/the-perfect-layout-for-a-three-column-blog/

At the time, I thought, great someone has figured out all the complexities for me. Well, actually no, they didn’t.  Trying to implement this for a blog design has been a nightmare because I want even more features and adding them to the design has not worked out very well. The design is great, and the author, Matthew James Taylor, should not think that I am trashing his work. No, not at all. He provided an excellent solution. No, instead, I am trashing CSS and its sub-par implementation.

How is it that after so many years and so many versions, CSS is overly complex and the “tricks” such as making  div elements embedded in div elements as Matthew James Taylor used, work but barely and they cause almost as many problems as they solve.

Now I have a problem trying to make the columns on the left and right have rounded corners.  Not going to happen. The way the nested div elements were used to make the background color go all the way down also seems to mean that four rounded corners in each column extending the lengthe of the screen is not likely to happen without more CSS tricks.

I need to add a menu bar, as this layout didn’t have one, but I need the menu bar to also have a drop down menu for submenu items.  However, the way this CSS layout used the div inside div trick, makes the drop down menu below the middle column so that is a problem.

Had I used a table to layout my site, it would be done already. Now, it wouldn’t be the most maintainable but it would be done.  However, maybe a programming language such as PHP or ASP.NET could be used to improve the maintainability.

So to all those who are participating in the CSS standards, please go back to the drawing board when it comes to the layout:

  1. It seems a sub-par job separating the design from the code.
  2. It seems a sub-par job providing an easy tool for laying out a website. You have left us with a tool that is not good enough!
  3. There are not any good IDEs for CSS and HTML (No, neither Dreamweaver or Expression Web are good for laying out web pages, but you know what, it isn’t the fault of the IDE!)

You did solve some of the easy parts quite well, most of the parts that are not “layout” but more just color schemes.

  1. Change font-size and color works great.
  2. Float something to the left, great.

However, a simple feature of “as tall as the page” or the idea of a few elements where all but one are fixed size and the one that isn’t stretches the width of the height of the screen doesn’t exist. It seems to be there for width, but not for height or else it is there but just too hard to get.  For example, look at the three column design.  The reason the author had to nest the div elements was to get the three column div elements to extend all the way to the bottom of the page.  Without this hack, when there are three columns (left, middle, right) normally each one is a different length.  Really, CSS hasn’t solved this with a simple solution, yet? Sorry to be critical, but after this long, it should be better.

Here is what I want it shouldn’t be so difficult.  These tags don’t exist, this is a hypothetical of what I want.  Funny that as I write this some is similar to WPF, which is far superior to CSS for layout design IMHO.

<div name="Header" width="stretch" height="100px"> .... </div>
<div name="Menu" width="stretch" height="sizetocontent> .. </div>
<div name="Columns" width="stretch">
    <Group type="Horizontal" width="stretch">
        <div name="LeftCol" width="250px" hight="stretch"> ... </div>
        <div name="MiddleColCol" width="stretch" hight="stretch" MinWidth="300"> ... </div>
        <div name="LeftCol" width="stretch" hight="stretch"> ... </div>
    </HorizontalGroup>
</div>
<div name="Header" width="stretch" height="100px"> .... </div>

First off, the readability of the above syntax is amazingly clear and simple (IMO) and one does not have to wonder what is intended.

So please, powers that be of CSS, lets start over. Yes, I am aware it could take a decade but it is worth it if this time, you get it right! Look at WPF, sure it is not exactly the same, but Microsoft invested a lot of time and money into Windows Forms and they still felt the need for a new solution in WPF and it has been around 6 years and still Windows Forms are around, but more an more everyone is moving to WPF. CSS should go the way of Windows Forms, and become the old solution that a better solution is designed to replace.

Here are some more articles where people agree that CSS needs to be replaced with a better tool.  Please note as you read these posts that I don’t think CSS sucks.  I think it was a descent tool written to solve a problem, and succeeded in some areas and failed in others, and now that we know what works and what doesn’t a new better tool should be developed that keeps what works in CSS bt also succeeds where CSS fails.

Ten reasons why CSS sucks « Greg’s Head

CSS Sucks (for layout) | Accidental Scientist (this is interesting because Layout is my main complaint)

Tables vs CSS: 15 points to consider when choosing (this one has a lot of links that are not in favor of CSS)

If you are a framer for a house, a hammer is better than a wrench for nailing nails.  But a nail-gun is better than a hammer. CSS is somewhere in between. Here is a good hammer/nail gun analogy to describe CSS. Once I had a nail gun but the air compressor wasn’t quite strong enough and didn’t send the nails all the way in. So I use the nail gun because this was still faster, and did all the nailing. Then I pulled out my hammer and to finish the job.  CSS is like a nail gun without enough air.  It is better than a hammer, but not as good as it could be.

Maybe CSS doesn’t need to go away, maybe it just needs to stop doing layout.  What if it just did size and color and decoration and a new tool integrated with HTML and CSS to do layouts. But maybe it is better to have one solution for design.

Motorola Xoom review – one month later

I had the Motorola Xoom for a month just to experience it. It was provided to me by work but only temporarily.  I just transferred it to a team member so they can now experience it.

If you don’t want to read anything more, and just want me to sum up my review here it is:

I want to buy one now that it is gone but the $599 price overcame my desire as I don’t need one.

So I that means that it is definitely a useful item but it is currently overpriced in my eyes.  I just bought my wife a 17.3″ widescreen HP laptop with a 4GB of RAM, a Blu-Ray, a web-cam, fingerprint reader, HDMI port, etc…It was $549.  Currently there are some Android 2.2 tablets that are in the $100 to $150 range. I think in a year these tablets in the $100-$150 dollar range will be running Android 3.0 or the next version and they will be everything your need.  So only spend the money if you need to.

I am going to own an Android 3.0 device soon, if for no other reason than technology is both my job and hobby so just to stay up to speed with technology, I will need one soon, just not right now.

Ok, let’s get to the positives and negatives.

Negatives

  1. Apps didn’t work until I restored to factory defaults.
  2. Wireless screen didn’t really indicate a scroll bar, took me an hour to figure out I had to scroll down to enter a password.  This was the first thing my team member ran into as well.
  3. Some apps just crash (but many actually updated and started working, so expect app support to improve rapidly)
  4. Learning to type on a touch screen. It is much better than typing on a phone, not as good as a laptop.
  5. Didn’t fit in my suit pocket at church, maybe I should get a 7″ one for myself.
  6. The fingerprints on the screen were annoying and I had to clean it often.

Positives of a tablet

  1. Time to browse.  Once you have your favorite sites, just hitting a site really quick was much faster.
  2. I loved the 10.1 inch screen.
  3. I loved replacing big books.
  4. A good casual game machine, especially for my 3-year-old.

Positives of the Xoom and Android 3

  1. Having about 5 desktops to put icons on.
  2. The first firmware update I received worked perfectly.
  3. Notification system is awesome.
  4. Flash web pages worked just fine.
  5. The email integration with Gmail.
  6. Plenty of disk space. (I never even used 2 GB as much is stored on the cloud)
  7. Multi-threading – It never once felt slow.
  8. Google Maps integration worked well.

Hopefully this review helps you.

How to disable row selection in a WPF DataGrid?

Disabling row selection in the WPF DataGrid included in .NET Framework 4 is not really easy. It is extremely difficult to do, unless you have the right tools and know exactly how to do it.

But all the difficulty is in figuring out how to do it. Once you know how to do it, the steps are quite easy to perform.

First, you basically have to use a copy of the default DataGrid style. However, the easiest way to get a copy of the default DataGrid style is using Expression Blend.

Read more one my new WPF Sharp site here:

How to disable row selection in a WPF DataGrid?

How to create a copy of a control’s default style?

Sometimes you need to make some advanced styling changes to a default control, such as a RadioButton, ListBox, DataGrid, Button, etc. However, you may want to keep the majority of the default style the way it is.

In Expression Blend, this is easy to do. If you don’t have Expression Blend and you are developing in WPF, get it immediately. There is a trial version you can test out.

Here is how to get your copy of any control’s default style….

Read more on my new WPF Sharp site
How to create a copy of a control’s default style?

Kanban for my crafty wife

So I introduced Kanban, the project management process we are using at work, to to my wife and she is going to try it out for her managing the tasks for her blog.

Of course, being a craft blogger, she made a craft project out of the idea for making a Kanban board. Check out her version of a Kanban board.

Old Window + Personal Kanban = Task Board

See my article on Mono in the BSD Magazine May issue

The BSD Magazine has released and there is an article in it by yours truly.

Check it out.

May issue of BSD magazine- Embedded BSD: FreeBSD and Alix

Article: Why Is My Amazing, Ground-Breaking Microsoft Kinect Collecting Dust?

I recently bought an X-Box and let’s be honest. It isn’t getting used. Yes I noticed dust on it over the weekend.

That is why this article caught my eye today:
Why Is My Amazing, Ground-Breaking Microsoft Kinect Collecting Dust?

The main reason my XBox is collecting dust is, besides the fact that I haven’t bought my wife Dance, Dance Revolution, is because there isn’t a game that is enticing me to play it when I get home from work.

I want to play something like Metroid, and jump around and shoot friekazoid alien creatures. I don’t care if I have to combine some type of controller or gun-like device with the Kinect.  Or I want to play Madden 2011 and just run over the computer team for 300 yards or bomb passes all games 7 touchdowns.

I just want to have fun and really, the Kinect just isn’t providing me the fun.

Brigham Young University News: BYU Center for Animation’s new film a double ‘student Emmy’ winner

This is pretty cool. The animation looks as good as anything out there.

BYU Center for Animation’s new film a double ‘student Emmy’ winner

It is good to see a program at my Alma mater doing so well and those involved getting some praise!

C# – The ?? operator or coalesce operator

Here is a little code that returns either x or y. It returns y if x is null, otherwise it returns x.
return (x == null) ? y : x;

The coalesce operator is basically short hand for this. The ?? operator simplifies and shortens the above expression.
return x ?? y;