I have a lot of articles “in the pipes,” but I’ve been finding it hard to get into the rhythm of writing again, so I thought I’d start with an easy post to get the juices flowing. This sort of post is obviously something plenty of people have done before, but I usually find them interesting. Since it’s been done before, I thought I would concentrate on some of the smaller things that make my life better/easier, instead of the normal operating system (OS X Leopard)/text editor (Coda) writeup.

Versions

Versions is a Mac SVN client that works very, very well. I had been using svnX, which never really gave me any problems, but after using Versions for about a day, you wouldn’t really be able to convince me to go back. Versions has the polish that Mac users have come to expect, both visually, and interaction-wise. I’m able to group all of my repositories in different folders, and working copies show up under their respective repository. All in all, a very nice app that I take for granted now because it works so well.

TextExpander

Most text editors these days have the idea of “clips,” or something similar, in which you build a library of code snippets, and them access them in different ways. What TextExpander does is take that functionality and build it into the operating system, so that you can just type a certain code word, and it automatically replaces it with the given text.

This is not only useful for work (I type “rreset” to have it spit out Meyer’s CSS reset), but also for normal, everyday typing. I have my address saved, so that if I type the numbers from my address, it replaces it with the whole thing. Same with city (“bll” becomes “Bloomington”), email, lots of things. I use it without thinking, and every time I type the same thing more than a few times, it goes into textExpander. It keeps track of the time it saves you, and I’m over two hours now. Two hours is a lot of typing.

Billings

Any freelancer needs to have a setup that they’re completely comfortable with for tracking time, creating/sending invoices, and tracking clients/payments/etc. There are tons of great tools out there, and I’ve used a number of them. Up until about a month ago, I had been using OfficeTime for time tracking and invoice creating, and a plain spreadsheet for tracking client payments.

A month or two ago, I found Billings 3, and tried it out. Like Versions, Billings is a much nicer app to work with than OfficeTime, which attracted me from the beginning. However, Billings is a much more comprehensive tool for organizing your business than officeTime is. I need to try hard to be organized, so anything that helps me do that is a plus. Billings makes staying on top of the business end of things much easier on me. I can track estimates, time, clients, payments, personal projects, and a lot of other things, all in one place.

Billing’s invoice/estimate templating engine is also very extensive. I’ve been finding it a little difficult to get into it to build custom templates from scratch, but changing small things on one of their many built-in templates is pretty straight forward, and creates nice-looking results. They also export into pdfs, instead of rtfd’s (which is what OfficeTime used). All in all a great tool that has already helped me be more comfortable keeping track of things.

Evernote

Put Evernote into the “tools that help dan stay organized” pile. Their slogan is “Remember everything,” which is nice for me, because my unofficial slogan is “I forget everything.” I use Evernote constantly. I keep article ideas, work notes, javascript tricks i’d like to try sometime, and lots of other stuff in there. It searches instantly, and can capture all sorts of stuff. I’ve been using it for a couple months now, and have over a 100 notes stored, mostly work-related. Also, like most of the other apps on this list, it has that nice Mac “feel” to it.

Evernote is also useful because it has an iPhone companion app that syncs with your desktop account, so I can take a quick note when I’m away from my computer, and then file it when I get home.

Firebug

If I had to get rid of every app that I use in my business but one, I would keep Firebug. I can’t even begin to estimate how much time Firebug has saved me while developing websites, and there really isn’t anything that compares. I could write a whole article on it, but I’m just going to leave it at this: if you build websites, you should be using firebug.

It’s been a very busy summer. Between buying a house, moving into said house, getting married, vacationing, and somehow managing to work, I haven’t had any time for the website. But I’m finally caught up with (most) everything, so I thought it was time to get back to the blog.

Everything this summer went really well. Emily and I are both happy with the house, and being married ain’t half bad. It is good to get back to everything, though.

While this post might not be of very much use to you, I thought I’d drop a line, and let you know I’ve got some articles coming down the pipeline for you, plus I’ll be joining a handful of good people at AEA Chicago, and I’m sure I’ll have some something to say about that, as well. So stay tuned, and I’ll see you soon.

Today, April 9th, is Naked Day. It’s an annual event in which sites remove all of their style information, to reveal the naked page structure underneath. This is my first year participating, but I think it’s a great idea.

Naked Day promotes the importance of valid, semantic html and a solid page structure in your designs. The bottom line is this: your site should still look good, even if it’s naked.

I’m very excited to announce that CSS Off is back from a brief hiatus. Clevelander Brad Dielman has come on board to lend his expertise to the project, and Clevelander (and Brad) Brad Colbow is our guest designer. I’ve seen the comp already, and it’s going to be a challenge.

The contest will be on April 5, 2008, and will follow the same 24-hour format that it always has. So get out your coding hats and practice your microformats; CSS Off is back!

I know, I know. What this world really needs is a new rounded corners solution. With CSS3 support right around the corner (ha, right), why bother, right?

Well, this solution offers something new to the world of rounded corners. What it does is this: it crops the content below it, so that anything with a background color or image (headers, paragraphs, even images) automatically get the rounded corner treatment with no extra work. See below:

In this screenshot, the image is a normal, rectangular image. Nothing was done to it, except inserting it inside one of my rounded corners containers. It’s easy enough that you can even have your clients do it in their CMSs without the headache of trying to teach them to use the Rounded Rectangle Tool in Photoshop.

This technique solves a very specific issue. There are plenty of ways to render rounded corners that involve less markup, simpler CSS, and less time in photoshop, but none of them (that I am aware of) crop the content below it.

You can view the solution at work here, and I’ll try to take you through how it works.

First, The Images

So this part isn’t too hard, as long as you can navigate your way around photoshop. Just as a note, it’s definitely possible that there are better ways to go about this part in photoshop. If there are, don’t hesitate to drop a line in the comments.

First things first: go and download the Super PNG plug-in for photoshop. What this plug-in does is strips out the color information that photoshop usually saves with PNGs, which will help you avoid that little difference you can see between browsers. See here for a more detailed explanation, but this is important.

Once you’ve got Super PNG running, use the aforementioned Rounded Rectangle Tool to create a rounded rectangle with your desired radius and give it the background color of your container. Edit the layer style to give it a stroke of whatever width you’d like, then rastersize it. Then, decide how much padding you want to be cropped inside your container (I used 2 pixels in the screenshot above). Duplicate your rectangle, and shrink it to fit inside of your desired padding. CMD/CTRL+click on the layer thumbnail to load the selection on the smaller rectangle, then select the larger rectangle and hit delete. You can now throw out the smaller rectangle.

Once this is done, you should have the outline of a container. Now, zoom in to one of the corners, and, using the marque tool, select a square that is just big enough to contain the corner. Copy it, open a new document, and paste it in. Throw out the background, if there is one, and you should have a corner that looks something like this:

Once you’ve got this, simply save it, then rotate it and save it three more times so that you end up with each corner.

Second, The HTML

Now that that annoying photoshop work is done, I’m going to start referring you to an actual example, located here. Here’s the HTML for one box:

<div class="b_greyWhiteStroke">
	<div class="TL"></div>
	<div class="BL"></div>
	<div class="TR"></div>
	<div class="BR"></div>
	<div class="b_innerContainer">
		<h2>This Is A Block</h2>
		<p> Lorem ipsum dolor sit amet...</p>
	</div>
</div>

This is fairly simple. There’s a div for the outer container, a div for the inner container, and a div for each border. All of your content will go inside .b_innerContainer, and the corners of this content will automatically be cropped.

Third, The CSS

The CSS for this solution is a little more complicated, but nothing too bad. The basic idea is that you give the border divs position:absolute, place them in the corners, and let them sit on top of everything else, thus cropping it:

.b_greyWhiteStroke{
	position: relative;
	border-color: #dce3e7;
}

.TL, .BL, .TR, .BR{
	width: 6px;
	height: 6px;
	position: absolute;
	background-repeat: no-repeat;
	background-color: transparent;
	z-index: 9999 !important;
}

.TL{
	top:0;
	left:0;
}
.BL{
	bottom: 0;
	left: 0;
}
.TR{
	top:0;
	right:0;
}
.BR{
	bottom: 0;
	right: 0;
}

.b_greyWhiteStroke .TL{
	background-image: url(images/grey_whitestroke_tl.png);
}
.b_greyWhiteStroke .BL{
	background-image: url(images/grey_whitestroke_bl.png);
}
.b_greyWhiteStroke .TR{
	background-image: url(images/grey_whitestroke_tr.png);
}
.b_greyWhiteStroke .BR{
	background-image: url(images/grey_whitestroke_br.png);
}

.b_innerContainer{
	border-width: 1px;
	border-style: solid;
	padding: 2px 2px 8px;
}

.b_greyWhiteStroke .b_innerContainer{
	border-color: #dce3e7;
}

See, that’s not too bad, is it? A couple notes here. First, I’ve separated .TR from .b_greyWhiteStroke .TR. This is so that I can have multiple background-color schemes going with only minor additions to the CSS. So, if i wanted to create, say, and alert box with a yellow border, I wouldn’t have to rewrite all the existing CSS, I’d just have to make some additions.

What about ie6?

Ie6, as always, was the big headache here. However, by hacking up Angus Turnbull’s IE PNG Fix with a couple of my own modifications, I managed to get it to work. The problem, aside from ie6’s refusal to run transparent PNGs, was that the border block wouldn’t always line up with the edge of the container. I assume it’s some sort of rounding error, but I’m not positive about that. Anyway, the PNG Fix now fixes the transparency, and checks to make sure the borders are where they should be. The only problem here is that this solution doesn’t work in ie6 when you use a fluid width. Or, more correctly, it will correct itself when the page loads, but there is a possibility of the borders moving a pixel out of place if user starts manually changing the width of the window. Check out the example page in ie6 to see what i mean. Here is the code to include this fix:

<!--[if lte IE 6]>
<style type="text/css">
	.TL, .BL, .TR, .BR{ overflow: hidden; behavior: url("ie6fixborders.htc"); }
</style>
<![endif]-->

The End

So, there you have it. You can download the entire example here. This solution, for sure, is not the best for all situations. There are tons of smaller and easier solutions out there, and you should use them unless you have this specific need. However, if you do decide you need something like this, I think you’ll find it to your liking.

As always, I’m more than open for comments and suggestions for improvement. Hopefully you’ll find this solution useful sometime in the future.

Recently, I was writing a Javascript app that involved some animated, expanding boxes. While doing this, I realized I needed a way to dynamically convert pixels to computed ems. The function wasn’t too complicated, and so I decided to make a bookmarklet out of it that did the same thing. It was kind of fun. Hopefully you’ll find it useful, either in javascript, or to remove the headache when you’re trying to create pixel-perfect designs using ems

The Function

So, here are the functions:

//this function returns the computed pixel value
//of 1em relative to the given element
function getComputedEm(el){
	var tdiv = document.createElement("div");
	tdiv.style.height = "1em";
	tdiv.style.position = "absolute";
	tdiv.style.backgroundColor = "#f00";
	el.appendChild(tdiv);
	var emValue = tdiv.offsetHeight;
	el.removeChild(tdiv);
	return emValue;
}
//this function takes an integer, and a javascript element.
function convertPixelsToEms(pixels, el){
	var emval = getComputedEm(el);
	var value = pixels/emval;
	return Math.round(value*100)/100;
}

The Bookmarklet

And here’s the bookmarklet:

pixel2em

Just drag the link above to your menu bar, and click on it in any site. The bookmarklet will appear at the top of the page. It takes a pixel amount, and any css selector you can think of, so it will return the conversion relative to an element. For example, on this site, if you use “body”, 16 pixels = 1.14em, but if you use #content p, 16 pixels = 1.23em.

It’s probably not perfect, so please let me know if things aren’t working correctly. Although, I can tell you right now it’s not going to work on ie6, so don’t bother trying it there.

The bookmarklet makes use of Dean Edward’s cssQuery, a slick little script to retrieve elements based on CSS selectors.

All in all, this was a fun experiment, and I hope you find it useful. Have fun.