How can there be so much attention to detail everywhere, but when I decide to invert my world with a dark-themed website I get blotchy, leaky type? Blech. Through many hours of experimenting and a happy accident while coding on the train, I stumbled across a solution.

Did you know that if you apply the slightest text-shadow to your text, the rendering looks a hundred times better? Take a look:

Left: normal Mac rendering; Right: using the text-shadow trick

Nothing fancy going on here, just this on the right block:

You can use any color you want, it doesn’t matter as the 0.01 makes virtually invisible.

Of course, your mileage may vary: I’m not sure how efficient it is to throw text-shadows on everything. The more complex your HTML, the more this thing is going to weigh down page-rendering. Also, if you’re using text-shadows (that are made to show up) in certain areas, you wouldn’t want to apply this to everything as it may overwrite those.

Finally, it’s important to remember that this is only going to work in browsers that support text-shadow. Luckily — since we’re only targeting Mac browsers — most of the modern browsers support this. (Firefox 3.0 being the only exception.)

But either way: pretty cool, eh?

Update: And for those that are curious, here’s the same effect with the colors reversed.

Same as above: left is standard, right is adjusted.

Download Clouds Midnight now.

Like Clouds, this theme was built to work nicely with HTML, CSS, JavaScript and PHP. As always, please provide feedback if you use it with another language.

I’ve been developing this dark version for a couple of weeks now, and I’ve added some new highlighting that isn’t found in Clouds: HTML attributes are now a different color to stand out from the tag name (thank you to the talent Marc Amos of Boston Web Studio for this suggestion). I’ve been using this with my favorite 14px Inconsolata-dz (as pictured below), but I’ve found that this also works quite well with the old stand-by of 10px Monaco with Anti-Alias turned off.

The New Clouds Midnight

So, if you want it, here it is.

How to Install a TextMate Theme

There are a couple of ways you can do this: you can double-click on the file inside the zip file download, and assuming you have TextMate installed, the theme should load up.

Or, you’ll want to drop the file inside of the zip file download into:
~/Library/Application Support/TextMate/Themes

Then, go into TextMate’s preferences, choose the Fonts & Colors tab and choose “Clouds Midnight” from the drop-down. Poof, done.

And that’s that. Again, tell your friends and/or leave me feedback.

Download Clouds now.

It was build to work nicely with HTML, CSS, JavaScript and PHP. If you code in other languages, your feedback is encouraged. I’d love to know how to widen the scope of this theme.

For best results, I use this theme with Inconsolata-dz, a version of Inconsolata with straight-quotes instead of the weird semi-slanted ones the original font comes with. I suggest you download Inconsolata-dz and use it anti-aliased at size 14px. It’s a little larger than you may be used to, but give it an hour and you’ll never go back.

Here are some poorly laid out example with ridiculous content. You should be looking at the colors, not the code.

Clouds with HTML

Clouds with JavaScript

Clouds with PHP

Clouds with CSS

Like what you see? Get Clouds now.

How to Install a TextMate Theme

You’ll want to drop the file inside of the zip file download into:
~/Library/Application Support/TextMate/Themes

Then, go into TextMate’s preferences, choose the Fonts & Colors tab and choose “Clouds” from the drop-down. Poof, done.

Tell your friends, and give me feedback!

When translated to project management, encapsulation can increase productivity, ingenuity, quality, trust and morale. It establishes a connection between responsibility and authority — a key component of project management.

First Things First, Defining Encapsulation

Simply put, encapsulation is abstracting the completion of a task from how that task gets completed. These two aspects are connected by something called an “interface.”

Interfaces

When most people in our industry hear the word “interface,” they think of a “user-interface.” Obviously, a user-interface is an interface, but it’s just one kind. Since it is the most common, let’s roll with it. When users are using functionality that you’ve created — a contact form, for example — they are looking to accomplish a task: they want to ask a question to which you’ll answer.

The instructions that you provide, as well as the text-fields and buttons you give them are the interface by which the task is started. By validating the form, you are ensuring that the user has provided all of the required information needed to accomplish the task. After form submission, the user is alerted that someone will be in touch within two business days.

And a day later, the question is answered.

The Glory of Encapsulation

Notice that before that last sentence I left out a lot of stuff? How did the message get delivered? Via email or text message? What research or resources went into finding out the answer?

The glory of encapsulation is that to the user, these things doesn’t matter.

Here is a less technical example of encapsulation at work. A kid wants a green ball, so he asks the interface for one. In a couple of minutes, he is provided with the ball, exactly like he asked for.

(Look at how happy he is!)

Where did the ball come from? What’s on the other side of this wall that create these balls? How many people are over there studying and researching to create better and more cost-effective balls? As long as what came out was exactly what was expected by the kid, none of these questions matter to him. He fulfilled the interface requirements (providing the shape and color), and got what he wanted. If he asked the interface for the same shape and color again, an identical result would come out.

How This Applies to Project Management

Encapsulation should be used in day-to-day project management to solve three common management dilemmas:

1. Micromanagement
2. “Too many cooks in the kitchen”
3. Responsibility without authority

Step back for a moment and consider the bigger picture: the contract with your client is nothing but a large interface.

Your client brought you a project request, an amount of money they will pay for it and the time by which it must be completed. You’ve agreed to get it done. You shake hands to signify that the interface’s parameters were fulfilled successfully.

From here, most of the particulars of how the project gets done isn’t important to clients, as long as you deliver exactly what is expected on-time and on-budget.

In turn, you can think of that project as being a collection of smaller “sub-projects.” Assign one of your team members to be a “sub-project manager” for each of those sub-projects, making that person solely responsible for seeing it through. (Or, to continue the green ball metaphor, you be the kid and they’re the guy behind the wall.)

Create an interface with them:

• Describe in detail what must be accomplished to complete the sub-project
• Set the time and date by which must be completed
• Set any limits on a budget for them to work with
• Confirm that they understand the task that they are responsible for
• Inform them that they have the authority to use any means available to them

And Then What?

And then you turn them loose and trust them to make you proud.

Show up at the agreed-upon time, collect your agreed-upon deliverables as was defined in the interface and move onto the next sub-project. Just like the kid in the example: who knows what went on behind those bricks — your sub-project manager may have recruited other team members, may have made deals with other teams around the office creating interfaces of their own, or may have even ask their NASA-engineer brother for help on the weekends.

Most importantly: who cares?

Part of your sub-project manager’s responsibility is ensuring that any new interfaces that they’ve chosen to execute fits inside the interfaces they’ve already been bound to fulfill. Giving this responsibility-with-authority empowers your team members to be more than just “the people that do the work.” They become “people that get the work done.” Your trust and confidence in their ability to make things happen boosts team moral and relieves you of the stress of juggling too many items at once.

As a project manager you can’t be expected to be a master of every skill required to complete your project, you just need to know what isn’t possible. With that in mind, let the people on your team do what they were hired for: creating the most appropriate solution for the task they’ve been given. This leads to higher efficiency and, typically, better results.

And That’s It?

Well, rinse and repeat.

Encapsulate each of your sub-projects until all of them are complete. Of course, it’s impossible to fully stay away as a project manager. After all, while internally your team fully trusts encapsulation, the client paying for all of this is going to want updates.

It may be worth setting up milestones as part of your interfacing with your sub-project managers. Let them know that you’ll need updates to coincide with your schedule. Try not to spring these updates on them as they, like you, have a schedule of how things are getting done.

Finally, once your project launches, step back and ask the magic question: how did that go?

Review for Efficiency

It will take some tweaking to adjust the size of the sub-projects so that your team members (sub-project managers) don’t become either bored or overwhelmed. Have a small internal review after each sub-project completes to make sure your project is still on track and your team’s spirits are high.

Through encapsulation, everyone in the team gets empowered to make decisions. Having the control to get things done the way each person individually works best lowers the overall project stress and improves the results. So give encapsulation a try; start small and work your way up. You’ll be amazed at the results that you start seeing right away.

Oh, this post assumes you’re using Apache, which is what I use. If anyone has advice on other webservers, please leave comments about it.

1. Make Fewer HTTP Requests

This one is pretty self-explanatory. If you have a bunch of images all over your site, you’re going to trigger this one. Try using a spriting technique for multiple little icons, or removing images all together.

Remember: people are looking for your content, and generally most of that comes over tied to your base document. Don’t weigh them down with bells and whistles unless it’s enhancing your content or enhancing the site’s brand.

2. Use a CDN

Alright, I cheated a little on this one. My website is small, and I don’t anticipate landing tens of thousands of hits per day. That said, it didn’t make sense for this one to be tearing my score down. My solution: add my own custom CDN host to Firefox’s preferences.

To do this, visit about:config.

Right-click in the window of settings and choose New » String. For the first window, enter extensions.firebug.yslow.cdnHostnames. Second, list the domain names that are serving up your content. No quotes, please, just a comma-separated list. And that’s it. Instant A (as I said, with a bit of cheating).

3. Add an Expires Header

You’ll need Apache to be configured with mod_expires for this one to work. This code can be placed in your site configuration, or — more conveniently — in your site’s .htaccess file. You’ll want to add at least two lines to this file:

ExpiresActive on
ExpiresDefault "access plus 30 days"

The first line turns on expire-headers, the second sets the default expiration for files sent. I went with “access plus 30 days” for now, but there are a bunch of other options.

4. Gzip Components

For this one, you’ll need mod_deflate installed. To enable this, add the following line to your .htaccess file:

AddOutputFilterByType DEFLATE text/html text/javascript

You can add as many MIME types as you wish to the end of this, just separate them by spaces. I actually had to add a few more to get everything nicely zipped, including text/css, text/plain, text/xml and application/x-javascript.

If you have a file or two that seems to not be getting picked up after installing this, you can use the Live HTTP Headers plug-in for Firefox, hit that file directly and see what MIME type the browser is seeing. Simply add this to the end of your line and you should be all set.

5. Put CSS at the Top

You should put all of your calls to CSS files in your page’s <head> tag. ;)

6. Put JS at the Bottom

You should put all of your JavaScript at the bottom of your page, right before the </body>. This is easy if you’re practicing unobtrusive JavaScript.

7. Avoid CSS Expressions

I’ve never used CSS Expressions, so I can’t really speak much for them, but you probably shouldn’t use them. Rather than that, use JavaScript or a server-side language to set classes on items you wish to change.

8. Make JS and CSS External

I got an n/a on this one, but as a general rule virtually all of my multi-page sites have externally included CSS and JavaScript files. Why? Because this way the browser can cache things, meaning less download time for your users.

9. Reduce DNS Lookups

Another one I haven’t really ever had a problem with. Ideally, you should have as few domains as possible serving up your content. This means to cut back on hot-linking. Browsers will cache DNS lookups, but the timing can be oddly short. (According to Yahoo!, Firefox only caches lookups for 1 minute by default.)

10. Minify JS

Your hand-written JavaScript files probably have a lot of comments and new lines in them, and while this is great for readability, these are all wasted bytes your users are downloading. Minifying your JavaScript removes all of these extra characters, but doesn’t obfuscate your code.

There are websites out there that will take an uploaded JavaScript file and return nicely minified versions to you. I’ve been using http://jscompress.com for my files.

11. Avoid Redirects

All of the files that you link to should be the files that you’re loading. Redirecting generally occurs when you link to something that has been moved. For older files, this a reasonable trade-off because who wants to go back and update every single include on sites that no one really looks at anymore?

Something may be said for planning out your file structure ahead of time so that you’re not always moving things around. That’s probably a full blog post of its own.

12. Remove Duplicate Scripts

This is exactly what it sounds like. This problem usually occurs when either teams working on a site start getting really large (the ol’ “too many cooks in the kitchen”), or the number of files that require keeping track of becomes overwhelming. For small- to medium-sized sites, I wouldn’t think this would be a problem.

13. Configure ETags

YSlow has a big explanation about ETags that you can read, but the most important line for me was at the end. If you’re not going to take advantage of ETags, turn them off. This is a simple one-liner in your .htaccess again:

FileETag none

Simple as that. This isn’t to say that ETags aren’t worthwhile, but if you decide that they aren’t something you need at the moment, specifying so in your .htaccess will speed things up and improve your grade.

And YSlow is Stunned

The new SureDev has gone from a D (63) to an A (96) with about fifteen minutes worth of work! And call me crazy, but page loads really do feel faster.

It’s worth noting: I’m still getting a B in Add an Expires Header because of the Google Analytics tracking script, but I can live with that for now.

Version 2 of the site has been posted live for the world to see, and although there are still a bunch of tweaks that need to be made, things seem stable enough to release. IE users, I can’t promise you anything yet, but I’m working on it.

The New SureDev

This version has a number of changes from the first. Besides the obvious (new look, new branding, much lighter), we now have a nicely integrated blog. Hopefully I can come up with enough nuggets of quasi-wisdom to drive people back to the site — a problem that the first version had.

Also, our news and announcement platform has changes from a custom-build CMS tool to Twitter (if you didn’t know already, we’re @suredev). I encourage you to follow us for the latest updates and for keeping in touch. Don’t worry, you won’t get flooded with messages, and I certainly won’t be retweeting my posts on my personal Twitter account.

So there you have it. Your thoughts, ideas, questions and comments are welcomed (and encourage) as always. I look forward to posting a bunch here, updating the site with a lot of great work, and building a bunch of cool things to share with you all.

Ready? Go!

The Accounts I’m Talking About

My target for this complaint is actually people just like me: I have a personal twitter account (@fredleblanc), which I use for my day-to-day things of what I’m doing, and then my “business” account (@suredev). I post my company announcements through this account because it’s more interactive than a broadcast email list, much more viral, easier to update and —possibly the most important of all — limits my wordiness.

The Problem

I’ve seen an increasing trend in the above-described users of retweeting their business’s company posts on their personal account — not just now and then, but virtually every non-replying post. These posts usually happens within minutes (and sometimes seconds) of one another.

The Thought

The joy of Twitter is that I can choose the users that I wish to follow, not be forced into faux-friendships just to appease acquaintances (like on some other popular social networking sites). It can be tempting to tap into the potential of your personal account’s following crowd of users for retweeting your business’s latest accomplishments or announcements, but there’s a good chance that they’re not interested.

If people (friends, family, followers) are interested in the things your company has to announce, they will follow your company’s Twitter name as well.

The people that love you so much that they follow both you and your business are getting hit twice with information. In other words: your biggest fans and are being hit with the largest burden. The signal-to-noise ratio of Twitter is dangerous enough, and doubling your posts just adds to that.

Sometimes the personal excitement about something you’ve accomplished at your business — launching a project, for example — is something you want to post about personally. Under this rule of etiquette (Twittiquette?) posting the same fact on both accounts is acceptable, but each should bring something new to the table.

For example, my company’s announcement is more matter-of-factly worded, like “Launched BobsWidgets.com!” Compare this to something more loosely offered from your personal account, such as “Finally just launched BobsWidgets.com! A lot of hard work, but well worth it. Go look!”

Same information, different insight.
Company delivery: fact. Personal delivery: friendly fact.

If you simply retweet every post your company makes, why would anyone bother following both names? Why should they?

Shattered glass and everything.

It’s important to have, so thus: tonight’s project was spent creating a page-not-found page. I went against the grain on this one, choosing to berate my user rather than even remotely try to help them. Why? For one thing, they should never see this page anyway, and two, if they do see it, I want them to have a little fun.

I give you: the interactive 404 page.

It fits with the theme of this site and what I want it to be: relaxed and enjoyable. You have to repair the crack before you can actually click on anything useful to move on. This fixes two issues:

1. It’s a problem having a gigantic GIF over your page if you want to click anything underneath it.
2. Interactivity is fun.

If you’d like to give this page a whirl for yourself, be my guest.

My plan for this blog is to describe how I keep my plates spinning, and from time-to-time offer some advice on how to keep yours spinning, too.

From the start, I’m hoping to post thoughts, stories and helpful tidbits about all of the things I deal with in my professional life:

• project management
• web development
• web design
• website planning
• client relationships
• writing content
• making money
• doing what I love

Hopefully all with a laugh or two along the way.

And with that, I add another plate to spin: blogging. Good luck to me, and good luck to you. Your thoughts are welcomed and encouraged.