inditetheweb.com» Tips and Tricks | Indite the Web | Web Development Tips, Tricks, and Tutorials

Free “Lorem Ipsum” Generator Is a Great Resource

Kate — Wed, 02 Sep 2009 19:09:52 +0000

When I was a kid I tried to teach myself Latin using a program on the computer. After some minor mocking from my family, and life getting busier, I quit. Fast forward to present time, and I’m now a Web developer. As most developers and designers know, you don’t always have the content for a site layout. But, you still need some filler text. A common technique is to use “Latin”, namely lorem ipsum. (See the update at the end of the article for more info.) I came across a site quite a while back, and I thought it was pretty cool: lipsum.com Apparently one of the benefits of using their generated “lorem ipsum” text is that it’s “free from repetition, injected humour, or non-characteristic words etc.”. Well, the truth is, I’m not sure how true that is. (Remember, I never actually learned Latin.) So, if the above claim is false, I apologize in advance. If not, it may turn out to be a cool little resource for you to use.

UPDATE: Okay, a little clarification: Check out Wouter’s comment below, but in short, to be clear, Lorem Ipsum isn’t “valid Latin”… It’s a meaningless mish-mash of Latin(esque)/semi-Latin words. Do a quick Google search or visit Wikipedia for more info. Still a very handy tool!

Displaying Ads After Selected Number of Posts In WordPress

Kate — Mon, 27 Apr 2009 14:15:53 +0000

At wphacks.com, I found a solution for displaying ads after the first post only. I had thought about using it, as it would’ve worked fine for the project I needed it on. But, I decided to use a counter instead as I thought it would be more flexible. For instance, what if you want the ad to appear after the second post… or after the third post? The following code worked good for me, and I hope it does the same for you:



/*Code to initiate counter goes above the loop*/

    /*Initiate counter for post ads*/
    $counterAd = 1;
?>
 
/*Start of loop followed by post content here*/
 
/*Before the end of the loop, insert the ad code and counter incrementation:*/
 if($counterAd == 1){
 /*If $counterAd = 1 that means this is just after the first post.  If so, print ad.*/
/*NOTE: Alternatively you could change the one to be whichever post you'd like the ad to display after.*/
?>
	 

      }
?>

/*Increment counter*/
$counterAd ++;
?>

PNG Transparency Solutions For IE6

Kate — Mon, 27 Apr 2009 14:11:09 +0000

I’ve never really played around with PNG transparency because of IE6s lack of support. But, recently I wanted to use it on a project, and I knew there’s a Microsoft solution using AlphaImageLoader. So I gave it a try, and it worked fairly well. Until I went to click a link. And then I tried highlighting text. No dice. I assumed it was a z-index issue, so after trying a couple things myself, I did a quick search online. I came across this article:

http://www.hrunting.org/csstests/iealpha.html

And, it worked! (Didn’t need to add a z-index, either.) Now, bear in mind that the fix is to *not* set positioning on the element that you use a filter on. So it may not be right for your project. However, if your layout does rely on position:relative, consider using this:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

It’s a great JS library that easily whips IE6 into shape. I’m using it on a site that’s also using MooTools, and I’ve experienced no conflict issues, which is great.

I can’t wait until the percentage of IE6 users falls low enough to ease my mind about not supporting them. (I know many think it already has, but I’m holding on. At least for a little while.) The concession of sorts that I’ve made is that for IE6 users who don’t have JS enabled, obviously it’s not good news. But, in my opinion, to support both was just unnecessary.

Why You Should Comment Your Code

Kate — Sun, 22 Mar 2009 23:18:06 +0000

I know at times when you’re in the middle of a project, buried deep in the guts of its code, it’s hard for you to imagine that you could forget what you were trying to do. You may think: “There’s no way I won’t remember what this function does. I spent x amount of time coding and testing it.” But, step away for a few weeks or more, and you just may be surprised. (Hey, if the project’s big enough, I’m sure it wouldn’t even take that long.) That’s why it’s important to not only have well formatted code, (you know, everything lined up, etc.), but also to comment your code! Even something as seemingly simple as a stylesheet can benefit from notes. (Why I used this fix here, or that style there.)

I know, at least for me, commenting’s often the last thing on my mind when I’m coding something. But, if you don’t already, try and get in the habit of doing it. I’m sure you won’t regret it.

Controlling the Textarea Tag In Safari

Kate — Tue, 20 Jan 2009 17:46:14 +0000

If you’ve used Safari for any amount of time, there’s a good chance you’ve noticed it allows users to resize textarea sizes. This can be a cool feature, but not always a good one. It’s not likely to do any real harm, but it may break your layout. Of course, some could argue that that’s the user’s choice. Well, I can see that. But for those times or people that require a little more control, use this:

textarea{max-width:200px;}/*Insert your value here.  Additionally, you could add textarea width and height values which ensures that it will look the same across all browsers.*/

Styling the abbr Tag

Kate — Fri, 19 Dec 2008 18:20:23 +0000

There are several ways that CSS can work along with SEO. Today, I’ll cover one quick option: styling the abbr tag.

Say, for instance, you have a link that states that your site is valid XHTML. Well, inside of the link use the abbr tag around the word XHTML. Inside of the abbr tag you use the title attribute to fill in what the word is an abbreviation for. When a search engine crawls your site, they not only come across your abbreviation, but also the value you’ve put in for the title. When hovered over, the title creates a tool-tip. By default the abbreviation will have a line below it. However, if you don’t want the line used, you would use this declaration in the CSS:

abbr{border:none;}

(For simplicity sake, I’m using an inline style here. Because I have the abbr styled in my CSS, I had to override it by manually inserting what the browser does by default:)

Without the style:
Valid XHTML

With the style:
Valid XHTML

See the difference? It’s quick but handy. Alternatively, you could use a different border or another style if you wanted to.

Two Of My Favorite Tricks…

Kate — Thu, 23 Oct 2008 18:09:40 +0000

CSS can be one of the most powerful tools a developer has in their arsenal. It can make changing styles a breeze compared to inline styles. But, it can also be one of the most frustrating tools a developer has. It’s not CSS in and of itself. Rather, it’s the support, or lack of support that’s frustrating. Even seasoned developers can encounter a problem that makes them sit back and scratch their head. While such problems have usually come from, (ahem), IE6, other browsers have their fair share of quirks. So, at least for now, I wanted to list two of my favorite tricks/techniques that I use when I code a stylesheet. Hope they’re helpful. If you have any comments or questions, feel free to include them in the comments section.


* {margin:0;auto:0;} /*This takes away a browser's default padding and margin settings for all elements, (which is what the asterisk indicates).  This way, you know you're starting from scratch, and elements will only have the spacing you want them to.*/


! important /*I always code sites to be cross-browser compatible.  One of the tools that helps me with this is the "! important" declaration. */

Basically, it works this way: Standards-compliant browsers, (Safari, Firefox, IE7, etc.), will recognize and apply this to the style you’ve assigned it to. However, for a browser like IE6 that doesn’t recognize it, it goes unnoticed. For example, say you needed to make up for a 3px difference in IE6 on a paragraph tag. This is how you could accomplish it:


p{padding-right:0px ! important;padding-right:3px;}

IE6 will see the ! important declaration and essentially ignore it. Then, it will hit the next “padding-right” declaration and add 3px to the right side of the paragraph. However, for the standards-compliant browsers, they recognize and use the “! imporant” declaration. What I like about this solution is that it’s perfectly valid CSS, so, at least in my eyes, it doesn’t seem like a true “hack”. (NOTE: The order in which you use this technique is important. The “! important” declaration must come before the second declaration.)