Posts tagged as: css

My Web 2.0 stack

I'm not sure when "stack" came to mean a list of languages/technical standards used to build an app, but it is a useful description. It helps convey the logical architecture within a multi-layered development environment. The best example of a useful stack is LAMP (Linux, Apache, MySQL, Perl or Python or PHP), which summed up what most of us used to build Web 1.0. I've spent the last few months reading and skimming as many new technology books as possible, and I've narrowed down the list of things I need to become proficient in to understand how Web 2.0 works. What I still need is a catchy acronym. Here's the list:

• XHTML. This is basically HTML with some really prissy rules, like case sensitivity, and needing to close all tags. There are said to be tools that will make this conversion for you, but I haven't tried any.
• CSS. Once you understand the basic rules, CSS is a fun way to design a site, especially if you start with a pre-written stylesheet, so you can just change things like colors and spacing.
• XML. While XML itself can be understood in minutes, the many, many ancillary standards and protocols make it tough to find a real-world entry point. I've found RSS programming to be a good starting place.
• Ruby. I've been programming with Ruby for a month, and I'm getting to like it more and more. I think it may have the same level of ease and productivity that made the dBASE language so popular in its time.
• SQL. Yes, its still here, and its still the same, which is the problem. The issue will be fitting the object-oriented data structures of XML into the tables of SQL. The consultants will be paying their mortgages on this one for years.
• Javascript. I could say Ajax instead to assure a higher rating on the Web 2.0 Validator, but Ajax really means Javascript that maintains contact with a server without reloading a page.

Frankly, its not as much as I expected when I started researching Web 2.0 this summer. The good part is that it all fits together easily, and none of the parts are particularly challenging. That's when I am most productive. By the time a language gets as richly, and complexly supported as Java, for example, I get bored and confused and move on.

Tweaking the CSS

I've been playing with the CSS design for the site. I really love these dotted lines. I think I'm getting a little carried away with them. I'm also cutting back on the tables. I hope to have no tables left when I'm done.

Book Note: Cascading Style Sheets, The Definitive Guide

When I really get worked up about something it is often best to just give in and focus on it until I feel the obsession pass. After waking up early yesterday to play with CSS I decided to spend the day reading this other Eric Meyer CSS book. I'm glad I did. He is a much better technical writer than a teacher. While I had complaints about his pedagogical technique in "Eric Meyer on CSS", I found this book to be extremely clear. He goes through the CSS spec in exhaustive detail without become boring. He really does know his stuff. The best part is that he has a good historical sense of the standard's development. Instead of just saying this is how it is now, he explains how each rule came about in relation to past versions of the spec and past browsers.

I didn't read every page in detail, but I did read the first six or seven chapters and then skimmed the rest. I now know what is available and where to go back for it when needed. The next phase of my design will be to eliminate the major structural tables controlling the two column layout. This seems to be the test of a true CSSer. I know that I'll be coming back to this book repeatedly as I adopt more CSS for my sites.

The only complaint I have with this text is the missed opportunity he touched on in the preface. He explained there that by abandoning structural tags, like H1 and H2, in favor of complex FONT tags, HTML designers had removed valuable structural information about the page's content. This structure could have been used to programmatically extract more meaning from pages. I guess this is obvious, but I hadn't thought about it in years. Unfortunately, he never got back to expanding this idea. It is something I would like to explore further.

I can see this getting out of hand

Is it a bad sign that I am sitting here at 6am making minute tweaks to the CSS template? It should be clear by now that I'm slightly obsessive, and I don't think CSS will help. I'm also a database person at heart, and the primary rule for databasers is "eliminate redundancy." I love the idea of changing one line in a template and having the whole site change.

Book Note: Eric Meyer on CSS

I read two more chapters this morning to help prepare for the CSS redesign, and I still have the same complaint. He is very weak on explaining why he is doing something. I think this book might work better if he started each chapter by showing what he wanted to accomplish and discussed the best path to achieve this goal. Instead he is forced to keep saying "I'll explain later why I'm doing this" and then he never does.

I was especially disappointed in the third chapter, which covered a web calendar, because I needed to redesign my archive pages. He actually hand coded the CSS for a specific month, with unique elements for each day. I can't believe he expects people to do that every month.

I'm not going to give up on this book, but I think I'll just skim it for good ideas, and then maybe come back again after I'm more proficient. Maybe I'll understand his decisions once I know more.

New CSS design

I spent the day creating a new CSS based design for the site. There are still some things I'd like to improve, but this is a lot better. I like the level of control CSS gives me. I can adjust elements 1 pixel at a time. There are some odd behaviors however, and I can see that there is a lot more art than science in using CSS for design. I still don't know when it is better to control the TR or TD tag, and I see that I'll still have to rely on tables for the main structure until I get much better at this. I've been testing some CSS editors, and I'll post a round-up after I'm more comfrotable with them. I don't want to blame a program for what may be my lack of knowledge.

Must spend more time on CSS

I'm happy with the basic functionality on this and the Ruby blog, but they are both ugly as dirt. I need to put in a few days with the Eric Meyer CSS book.

Book Note: Ajax in Action

I've read the first two chapters, and this looks like exactly what I was looking for. It is aimed at someone who already knows how to do Web 1.0 type of development, what this book refers to as "classic web development" without any sense of irony. The first chapter is a very clear, executive summary style presentation of why you would want to use Ajax techniques. It addresses the prejudice that many programmers, including myself, developed against Javascript in the late Nineties, and makes a good argument for incorporating it within web applications today. If you are trying to convince your boss or your company to adopt Ajax, this chapter will answer many of their questions.

The second chapter quickly works through all the technologies necessary for Ajax, including CSS, Javascript, the Document Object Model, and XML. It is aimed at experienced programmers who have ignored many of these issues in favor of "classic" server-side web programming. I think the authors realize that there are many people who are either forced by their companies to stick with the older techniques, or like me abandoned web development after the dot-com crash. It is written in a "hello world" style, but it manages to integrate a wide range of key steps. It may be the most ambitious and best written hello world chapter I've ever read.

I especially appreciate the authors' sense of just what their target audience would already know and where the gaps might be. Instead of taking the "a memory variable is like a shoebox with a name on it" approach that so annoyed me with Teach Yourself Ruby in 21 Days, they only explain the details that might be new to someone who only knows Web 1.0 techniques. I have only read the second chapter through quickly, but I plan on going back and trying out each of the step-by-step examples in this chapter. To quote Spinal Tap, "There is a fine line between clever and stupid," and the examples in this chapter stay on the right side of that line, while still being simple enough to learn the underlying technique.

Lots of balls in the air

I've got so many projects ideas that I think I should list them, if only to remind me of where I want to go:

• CSS: Redesign Darwinianweb.com site to use style sheets.
• Ruby: Amazon API based app to determine the best book on a given subject.
• Ruby on Rails: Rebuild the CMS for this blog from the current FoxPro code.
• Ajax: Google API based app using Google Maps.
• Ajax: A stripped down version of TiddlyWiki as a form of self-modifying page.

Book Note: Eric Meyer on CSS

I just finished the first chapter and I have mixed feelings. The first thing to realize about this book is that it makes no attempt to teach CSS. It assumes that the reader knows the syntax and wants to learn how to apply it. The really challenging part of Meyer's approach is that he is starting with a completed page in HTML, stripping out almost all of the formatting, and then adding back CSS to recreate the original design. This means that he keeps switching between the old version and the new one. This is very challenging and he does it well. He moves in very small steps, and all of the sample files are on the book's website, so it is easy to follow along. My biggest complaint is that he almost never says WHY he is doing something a certain way. Adding a font or border is obvious, but when he has a choice between using a distinct table or <div> tag for example, he chooses one or another without discussing his decision process. Overall, I'm impressed by what can be done with CSS and look forward to rewriting this blog's design. The next chapter is a calendar, so I may try to rewrite my archive pages when I finish it.

Book Note: Eric Meyer on CSS

Back when CSS first appeared in the late Nineties I was too busy running the Andover.net websites to adopt a new model for web design. My philosophy was to get the cleanest site design possible while maintaining compatibility with the greatest number of browsers. We were a mass market collection of sites, so I refused to adopt any technology that excluded lots of trailing-edge users. This included Java applets, which crashed Linux versions of Netscape, Flash animations, and any form of plug-in that required a download in advance. We managed to create some great designs, but they were extremely table heavy. Now I have the time to explore CSS and it has had the time to mature. I guess the lesson is that Web technologies really need about five to six years to fully mature and for browsers to catch up wth support.

The current design for this site is again based on lots of tables and is deliberately simple, since I knew I would be rewriting it in CSS before too long. The one technique I have insisted on since I started building sites in 1996 is a template/page generation model. This means that all of the layout HTML is maintained in a small set of templates which are then combined with the data for each page by a program written in something like FoxPro or Perl. At Andover we had over a dozen sites with tens of thousands of pages overall, yet we were able to update the design of the entire network by changing a few lines in less than a dozen templates. Another design rule I insist on is separating the design from the code. I hate the idea of having a web designer mess around in a file with program code. This has always biased me against PHP and Javascript. I know that I'll run into this issue again when I start to learn AJAX.

I have kept up with CSS enough to know the basic principles, so I'm looking for books that will emphasize design and coding techniques rather than a simple how-to introduction. Eric Meyer seems to be the guy everyone turns to for this type of information. This book is based on a series of projects, and starts with the real-world issue of converting an HTML-only page into CSS compliance. So it seems perfect for my needs.

I have just started to read it, but I already like the techniques Meyer is using. For example, he starts with a simple piece of CSS that can be added to any page to display the underlying table structure:

<head>
<title>Darwinian Web</title>
<style type="text/CSS">
table {border: 2px solid red; margin: 3px;}
td {border: 1px dotted purple; padding: 2px;}
</style>
</head>

Here is a current archive page from this site with the CSS added.