markwiens.net

This list is in no particular order.

1. The best way to learn a language?
   I’ll observe methods from several books of how someone can learn a computer programming language.
2. Skillset requirements for today’s web people.
   How far can a web designer go before having to be a web developer? How far can a web developer go before having to be a programmer?
3. What’s the big deal with Javascript?
   It’s one piece of the trio (HTML/CSS/Javascript), but why is it so important to know? How much do we need to know?
4. Web Site Reviews: Luxury Merchandise in Flash
   Sites like Fendi and Persol leave much to be desired. If a Fendi bag costs over $3000, why can’t they budget out a little more for their website? Come on! If I’m actually there to see some bags, it takes me to another site. And is Flash the medium of choice for all these upscale brands? Flash limits your viewing area to a set-sized stage. Try navigating one of these sunglass sites: Persol, Ray-Ban, and Revo. Well, I guess it doesn’t help that these were made by the same company.
5. IE7 is Here. When Will We Stop Supporting IE5/5.5?
   Box Model Hack be gone!
6. Big companies want Ajax.
   It’s time to start caring about Ajax frameworks.
7. Getting a lot of comment spam with Movable Type.
   Maybe I should just turn off the commetns altogether since nobody uses that feature.
8. Books I’ve been reading lately.
   I’ll even tell you what I think of them.
9. Java
   It’s ugly. It requires a lot to even program "Hello World". But is it worth learning?
10. Lose the templates.
    Design individual pages based on your content. Apple is a good example. Even the width of pages are different depending on the product or section of the site.
11. Content writing for people who want to sell product.
    Don’t ask a lot of questions like this is an infomercial. Just tell people why they want your product. Keep it simple and to the point. Educate them on the concepts in your product if it’s new or foreign to most. If you can’t do this, it might not be entirely your fault. It may be the product that needs some rethinking.
12. Beer
    Forget wine. BevMo has a crazy selection of beers that even get ratings on the 100-point scale from the “BevMo Beer Ambassadors”.

Posted in Apple, CSS, Fun, Other, UX, Web, Wine | Comments (2)

It was about 2 years ago when I first read the AJAX (or is it Ajax?) article by Jesse James Garrett. I thought it sounded like an interesting idea and possibly a good technology to welcome to my skillset. Unfortunately it involved Javascript, a language I wasn’t too fond of using. But I printed the article and looked at a couple other sites on the subject. A week went by and I was over it. Now it’s hot stuff and big names like Google are using it in most of their applications.

Then Ruby on Rails was released to the public in July 2004. I had been using Basecamp, from where RoR was extracted, at my job. And I thought Basecamp was a pretty good application to use there. I checked out some of the early talk about Rails and it led me to the Ruby site where there were some basic tutorials on how to get programming with Ruby. PHP was my main focus then and the thought of learning another language didn’t sound like the smartest thing to do at the time. So that dream was over by the end of the day.

But wait! How could I pass up learning Ruby and Rails? How could I pass up this opportunity especially with those clever screencasts? Who couldn’t turn their back on Rails after seeing the weblog built in less than 15 minutes. I know I couldn’t! So I bought some books and strapped myself in for a long journey into Ruby and Rails. More on that journey coming soon.

I even have an idea for my first real web application on Rails. I purchased three domains. My project is currently a secret and I won’t reveal what the domain names are. But since Rails is so easy to use, I should have the project up for the public by November 1st. You can stay “tuned” because I may slip a couple little hints here and there before then.

Now some people have been programming Ruby before Rails even came about. And some people have been using Rails since it was first released to the public. But I still think I have a chance. I can get myself up to speed. They did mention Rails was easy, right?

Lastly, don’t forget about the evolving world of CSS. Because CSS3 is still in its prime and unsupported by most browsers, I think I can jump into this early. Maybe I can actually be ahead on this one while others try to catch up. I better get started.

Posted in CSS, Ruby on Rails, Web | Comments (1)

And you thought I tripped and fell, got amnesia, and couldn’t remember my Textpattern login information.

Image Replacement

I have been using a modified version of the Malarkey Image Replacement technique ever since Andy wrote about it. But people mention seeing the first letter peeking out when viewing in IE. Here is what I did:

.mir { letter-spacing : -1000em; }
/*\*/
* html .mir {
    text-indent: -999em;
    overflow: hidden;
}
html>body .mir {
    letter-spacing: normal;
    text-indent: -999em;
    overflow: hidden;
}/**/

Yes, I do think it looks a heck of a lot cleaner without those span tags scattered all over the place.

Box Model Hack of Choice: Simplified BMH

Digging through the default stylesheet for Textpattern, I found this:

#myblock {
    width: 250px;
    \width: 300px;
    w\idth: 250px;
    padding: 0 25px;
}

It seems to work well for me so far. If there are any problems, I will look into the Modified Simplified BMH.

The ‘Forms’ Stylesheet

Remember that stylesheet we used to fix forms after using the Universal Selector? Well, I have seen some weird rendering effects in IE/Mac, and it all comes down to one line of code in the stylesheet. But I do have a solution for it. Hide it using the Backslash Hack.

/*\*/select > option{padding:0 5px 0 3px;}/**/

Just to make it up to you, I will have a few more thoughts in the next couple of days.

Posted in CSS

Alex Walker sheds some light on the subject of clearing floats with his article entitled Simple Clearing of Floats at sitepoint.com.

No more unnecessary <br style="clear:both" /> or <div style="clear:both"></div> code in your markup. And to think I’ve even used <div style="clear:both" /> before!

Posted in CSS

Update: The use of position: relative seems to work well for IR, but position: absolute should still be used for hiding text. Replacing absolute with relative on my own site showed unwanted side effects. I know, I know. I should really test my work thoroughly.

Now works flawlessly with IE5/Mac!

After changing the positioning from absolute to relative, I’ve now successfully tested this technique in the following browsers: IE5/Mac, IE5.x, IE6, Mozilla, Netscape 6/7, Opera, Firefox, and Safari.

<h2 class="ir">
    <span class="hide">My header text</span>
</h2>

h2.ir {
    background-image: url("/imogen/cunningham.gif");
    height: 20px;
    width: 60px;
}

.hide {
    position: relative;
    left: -9999px;
    font-size: 0;
}

Here is an example.

Posted in CSS | Comments (3)

Remember the one about using the universal selector to set margins and padding of all elements to zero? Remember the bit about having problems when using the universal selector when the page contained forms? Well, it would be nice to have a quick solution so we could be on our merry way. Speaking of quick solutions…

My Quick Solution

I copied the stylesheet, forms.css, embedded in Firefox, keeping only any references to margins or padding. Then an @import call was applied to the beginning of my regular stylesheet.

@import url("forms.css");

Download forms.css (1781 bytes).

Posted in CSS | Comments (1)

There are many techniques for Image Replacement (IR) found on the shelf today. For awhile I just used the bottle with the text-indent code in it. That seemed to work for basic use, until I found ugly side-effects when mixing it with IE5/Mac. I must not have read the label carefully enough.

Also, for hiding text, such as the many “skippers” (skip navigation, skip to content, skip to my Lou, etc.), I used the technique employed over at A List Apart. Here is a snippet of their stylesheet:

.hide {
    height: 0;
    width: 0;
    overflow: hidden;
    position: absolute; /* for the benefit of IE5 Mac */
}

Unfortunately, I don’t see how the positioning benefits our friend IE5/Mac. And, naturally, there have been times when this technique has not worked. A temporary solution was to hide the text in IE5/Mac using display: none and using the above technique for all other browsers. But what about our friends with screen readers? Screen readers will not “see” anything that has the display: none applied.

Is There A Happy Ending?

While rummaging through sites, I came across some talk about hiding text, which led me to The Aural Text Class, from where this technique originated.

This technique is great for hiding text, yet keeping it visible for screen readers. I noticed that some text was still showing on larger monitors so I increased the amount of negative…ness on the left positioning.

.hide {
    position: absolute;
    left: -9999px;
    font-size: 0;
}

It can also be adapted for Image Replacement. I am sure someone else has come up with this idea so I won’t bother naming it the WIR (pronounced like the noise of a vaccuum). Well, anyway, here is my adaptation:

<h2 class="ir">
    <span class="hide">My header text</span>
</h2>

h2.ir {
    background-image: url("/imogen/cunningham.gif");
    height: 20px;
    width: 60px;
}

.hide {
    position: absolute;
    left: -9999px;
    font-size: 0;
}

Now come on. Get out there and tell your friends. I know you want to tell them all about the technique that sounds like a vaccuum cleaner.

Please note that this IR technique does not solve the problem of having images off and CSS on. But then again, when do most people use those settings on their browser?

Posted in CSS

For the few people who can not read Czech, I thought I would explain what is the Matrjoška hack. For the rest of you, you may divert your attention over to Pixy’s site.

What It Means To Me

I just can’t stand the Box Model. Many projects I do rely on a pixel-perfect design and I don’t have the energy to think about how much padding I need or how wide are my borders, just so the blocks will come out to being the correct widths. I like to set my blocks’ widths according to the design. Then if I want some padding inside a block, I will just give it some padding and be done with it. Nothing to worry about, except when you design for browsers other than Internet Explorer 5.x for PC.

According to the W3C, IE5.x renders the Box Model incorrectly. Gee, and I thought Microsoft was doing something right for once. If you need a remedial class on the problems with the Box Model, check out Tantek’s example page that includes his famous workaround (Tantek’s Box Model Hack).

Give Me The Goods

It’s simple really. Normally, we create one div for our block. But for this hack, we create two div blocks per “block.” In the stylesheet, we apply the exact width of our “block” to the outer block, which we have named myblock. Padding and borders are then applied to the inner block which, in the following example, is called myblockpad.

<div id="myblock">
<div id="myblockpad">

    Content goes in here.

</div>
</div>

#myblock {
    width: 250px;
}

#myblockpad {
    border: 5px solid #b00;
    padding: 10px;
}

Take a look at this example.

If you only wanted to use one div, you could apply the Box Model Hack. Of course, you would have to figure out both widths. To make the above example work correctly, you would take the width of the outer block and subtract the padding from both sides (that is 20px) and subtract the border from both sides (10px). Then you could include width, padding, and border in one div. Don’t forget the hack.

#myblock {
    border: 5px solid #b00;
    padding: 10px;
    width: 250px;
    voice-family: "\"}\""; /* box model hack */
    voice-family: inherit; /* box model hack */
    width: 220px;
}

html>#myblock {
    width: 220px; /* be nice to Opera */
} 

What a pain! Be nice to Opera? What did it ever do for me? I prefer the Matrjoška Hack.

Posted in CSS | Comments (2)

Update:Judging by the lack of comments for this article, it is my impression that nobody is bothered by any other elements taking on an undesirable appearance. Yet I believe most or all of the other form elements could use their default margins and padding. So here are my thoughts about giving them back.

Introduced in CSS 2.0, the universal selector, displayed as an asterisk (*), assigns a property or properties to all elements in a document. For most of the block elements in my examples, the following properties have been given:

body {
    margin: 0;
    padding: 0;
}

It would be redundant to apply the previous styles to most of our document’s elements. Give all elements, or rather, do not give any element margins or padding. Then if a particular element needs a little padding here and another element needs a top margin there, it can be added as needed. This is where we use the universal selector to do the job.

* {
    margin: 0;
    padding: 0;
}

This is also a great way to reduce the style sheet’s filesize.

What? Problems?

Unfortunately, if you want to be nice to Mozilla-based browsers, you can’t get away with just using the universal selector to set margins and padding to zero. When using form elements, <select>s and <option>s in particular, you must put back a default browser style. I looked through the forms.css file included in Mozilla’s Firefox browser and found the following style:

select > option {
    padding: 0 5px 0 3px;
}

So far, this has been the only “glitch” in using the universal selector to zero out margins and padding. If anyone else finds other elements affected, please let me know. And if I discover any affected elements, I will be sure to let you know.

Posted in CSS

Nesting Floats

Looking over the last example in Part II, we can add a few new bits of CSS to allow for rendering nested floats correctly. In some recent projects, I have found a need to clear floats inside one of page’s two main columns. Unfortunately, because these main columns are also being floated, some browsers will render the layout in the way you would want it. An example has been created to better show the problem. For this example, we have switched the content to the right and the sidebar to the left. Because of this switch, the CSS has been modified. Also, we have added three floating images with captions inside the content block. A block of text should follow directly below the three images. When viewed in certain browsers mentioned below, you will see that this block of text falls a great distance below the images. It actually falls inline with the ending of the sidebar block. Let’s look at the example to clarify what I have just attempted to explain.

Example 1

This example only renders to how we intended in Mozilla-type browsers (Netscape 6+, Firebird, Firefox, and Mozilla). But how do we fix for all the rest? Well, before we can discuss a fix, we should get to know the code involved in making this example. The following code has been added to the code from the last example in Part II.

<div id="content">

    Content in here.

    <div class="image">
        <img src="image.jpg" alt="image" />
        <p>Image</p>
    </div>

    <div class="image">
        <img src="image.jpg" alt="image" />
        <p>Image</p>
    </div>

    <div class="clear"></div>

    Content that follows the images.

</div>

div.image {
    margin: 0;
    padding: 0 15px 0 0;
    float: left;
    width: 100px;
}

div.clear {
    clear: both;
}

Now we can start the fixing! The key to tackling the rendering problem in this technique is to actually float both of the two main columns. Of course, to work consistently over browsers, both columns must be given widths.

#sidebar {
    margin: 0; padding: 20px;
    float: left;
    width: 210px;
}

#content {
    margin: 0; padding: 20px;
    float: left;
    width: 460px;
}

There was a catch to floating the three images. I especially noticed that IE5/Mac would not float the images correctly without giving the divs wrapped around each image a width.

And there you have it.

Example 2

It took awhile to find a solution, but I finally found someone that must have had the same problem. This site also includes some other great CSS tests/techniques.

Posted in CSS

That Good Ol’ 2-Column Layout

Now that we have our entire page centered, we can move on to what goes inside the wrapper. This example will include a header on the top, content on the left, a small sidebar down the right side, and a footer along the bottom. The markup for this is as follows:

<body>
<div id="wrapper">

<div id="header">
    <h1>Header</h1>
</div>

<div id="content">

    Content in here.

</div>

<div id="sidebar">
    Sidebar goodies in here.
</div>

<div id="footer">
    Footer goes down here.
</div>

</div>
</body>    

Here is how it looks so far. A background color has been added for visual purposes.

In most common designs, the header often spans the entire width of the wrapper. Many times people use a banner image in place of any text that may be found in the header. The text is then hidden from sight by applying class="hide" to the tags inside the header.

<div id="header">
    <h1 class="hide">Header</h1>
</div>

.hide {
    position: absolute;
    height: 0; width: 0;
    overflow: hidden;
}

#header {
    background: #ddd url("images/header.jpg");
    width: 750px;
    height: 100px;
}

We do not use a display: none to hide the text in the header because it will also hide it from text readers. If someone can not see the image used, then the user must still be able to read the alternate text.

This is what it looks like with an image as the header.

Floating

We must use at least one float to position the content to the left and the sidebar to the right. Most designers float the content to the left and let the sidebar “float around” the content block. To keep the sidebar from wrapping around the content, creating our two columns, we must push the sidebar’s margin in from the left.

We give the floated content block a width and push the sidebar to the left the same amount or greater.

#content {
    margin: 0; padding: 20px;
    float: left;
    width: 400px;
}

#sidebar {
    margin: 0; padding: 20px;
    margin-left: 450px;
}

Now, our example after adding some filler text from lipsum.com.

If you have viewed this last example using IE5/Mac then you may have noticed the float doing its job. Eliminating any whitespace between the content’s closing </div> and the sidebar’s opening <div>, solves this problem.

<div id="content">

    Content in here.

</div><div id="sidebar">
    Sidebar goodies in here.
</div>

Don’t Forget The Footer

If the content is longer than the sidebar, the footer will continue to “float around” the content. To remedy this behavior and have the footer lie under the content and sidebar columns, the footer must clear the float on the content block.

#footer {
    margin: 0; padding: 20px;
    background-color: #ccc;
    clear: both;
}

And here is the final result.

Nesting Floats?

But what happens when you want to float and clear inside the content block? Because of the lack of solutions on the web, I don’t believe this is something many people have wanted to do. Yet on a few of my recent projects I have needed such a solution to this problem. Luckily I did come across a solution and would like to share it next time.

Posted in CSS

Let’s begin with the first thing most people want their page to look like. It’s the look commonly found over at CSS Vault.

For this example, I have chosen to go with a fixed-width page of 750 pixels. To get the page centered for IE5.x/PC, we apply text-align: center to the body tag. For all other browsers, we apply margin: 0 auto to the wrapper <div>. And to counteract the text from being centered within the page, text-align: left is applied to the wrapper <div>.

<body>
<div id="wrapper">
    Content in here.
</div>
</body>    

body {
    margin: 0; padding: 0;
    text-align: center;
}

#wrapper {
    margin: 0 auto;
    padding: 0;
    width: 750px;
    text-align: left;
}

Some browsers have been known to react differently to auto margins being applied to the shorthand margin property. To correct this, auto margins must be applied to the left and right margins individually, yet I have never witnessed this problem myself.

#wrapper {
    margin-left: auto;
    margin-right: auto;
}

Next time we will look at the good ol’ 2-column layout. You know. Put the content on the left and the sidebar goes on the right.

Posted in CSS | Comments (1)