As web workers, we all have our favorite applications. There are the big ones, of course- the ones that get installed immediately on all our new computers- Photoshop, Dreamweaver, maybe Flash. Today, however, I want to share with you five of my favorite work tools- little applications and utilities that work for me every day.

Before anything else: these are all Mac apps. Although I run and work both OSX and Windows (thank you, Bootcamp!), I do most of my work on the former.

1. EverSave. This is an absolute gem, and you know why? Because most of the time, I don’t even know it’s there. EverSave will save all of your documents in specific time intervals- that’s right, I said all. Or you can set it to save only certain applications, or to ask you each time it’s about to save. I’ll tell you a little secret: I used to obsessively press Command+S every few minutes when I was working on something. With EverSave, I don’t need to do that any more.
2. TextWrangler. Okay, I know you have your own favorite text editor: TextWrangler is mine. Not only does it have a cool rope-like logo (wrangler- get it?), it’s constantly surprising me with features I didn’t know it had. And, I’ll admit it, I’d be lost without its multi-file search function.
3. Camouflage. How many icons do I have on my desktop? I’ll tell you: too many. Because I love the look of a clean and tidy desktop- not to mention being able to see my wallpaper- I love Camouflage, which, in one click, will hide all the icons on your desktop.
4. Jumpcut. So much of the work I do requires copying and pasting, that discovering Jumpcut was a glorious moment for me. It does “clipboard buffering”- which gives you access to text that you’ve cut or copied, even if you’ve subsequently cut or copied something else. Sort of like giving your clipboard a “history” you can return to. Pure genius, and something I use all the time.
5. RPP. And finally, because I work with images so much- and sometimes those images aren’t of the best quality- I adore my RPP: that stands for Raw Photo Processor, and it does just that:processes your images. It’s a little hard to explain how wonderful this little app is- I suggest you visit their page of examples.

And yes, they’re all free. Yay.

But I’m always on the lookout for apps to improve my work life. What are your favorite work tools?

One of the best ways to build your client base is to spend your marketing efforts on high profile bloggers.

Two popular web designers, Chris Pearson and Unique Blog Designs (UBD), have used this method do build their brand and increase their clients. Chris did the design for Brian Clark’s Copyblogger. This led to many other clients. Many people saw his design since Copyblogger is popular. Chris writes:

Although I had no idea at the time, that design [for Copyblogger] would basically end up serving as the foundation for a career niche that I actually enjoy.

I have no clue how many emails and referrals I’ve received from the little link at the bottom of that site , but I can safely say that it probably rivals the attention I’ve received from all my other designs combined.

UBD did a similar thing. In the early days of their business, they offered to do a redesign for John Chow, a popular make money online blogger. John took them up on the offer. Jeremy Schoemaker, another popular blogger saw John Chow’s design and ordered his own redesign. By landing these two popular bloggers, UBD was able to get a lot of traffic and sales.

Go After the Big Players

Some web designers are scared to target popular webmasters. However, if you have the design skill, you shouldn’t be shy. Many webmasters want a new design but they haven’t found a designer they like or they haven’t had time to search for one.

Also, keep this in mind. Even if you don’t land that big client right away, be persistent. You oftentimes just need one popular client to turn your business around.

Making the initial connection can be tricky. You can just send them a “cold” email, but that can backfire since they might think you’re a spammer.

In my next post, I’ll talk about some non-spammy ways to promote yourself to popular bloggers. Until then, make a list of popular bloggers that could use your services.

Over to You

Have you targeted any popular webmasters with your services?

After Ma.gnolia went down I was so disappointed that I decided to take matters into my own hands. I thought, why not use WordPress to store my bookmarks. It has all the neat features of most popular bookmarking sites, and even some more (XFN, for example).

Of course, I could just post a link whenever I saw one but it panged me to think that I would be putting to waste that wonderful link schema that the folks at WordPress have put so much thought into. And then Smashing Magazine reminded me about shortcodes. I had used them before in plugins but I never thought about just adding one off short codes to my functions.php file.

It turns out that this was the perfect solution to my problem. With one tiny little shortcode I was able to utilize the bookmarks system in WordPress and publish my links as normal. Here is how I did it.

1. The shortcode code

First you want to start by adding the following code somewhere in your functions.php file.

/**
 * Get a bookmark and display it
 *
 * usage: [magnolia id="bookmarkid"]
 *
 * @return string
 */
function magnolia_rip($atts) {
	extract(shortcode_atts(array(
		'ids' => '1',
	), $atts));

  $idarr = explode(',',$ids);
  $bookmarks = '';

  foreach ($idarr as $id) {
	  $bookmark = get_bookmark($id,ARRAY_A);
		extract($bookmark);

$bookmarks .= <<<LINK
	<div class="magnolia_rip">
		<p class="notes">$link_notes</p>
		<p><a class="more-link" rel="$link_rel" href="$link_url" title="$link_description">$link_name</a></p>
	</div>
LINK;
  }

  return $bookmarks;
}
add_shortcode('magnolia', 'magnolia_rip');

I’ll skip the details on how shortcodes work, the Smashing Magazine post does a great job of summing that up. However, I do want to explain the bookmark stuff.

We start by passing in the id or comma separated list of ids through the shortcode. They get put into an array where they are iterated. For each id we call the get_bookmark method, which is currently undocumented. It returns an object or array with all the values from the links table in your WordPress installation. The ARRAY_A parameter tells the method to return an associative array.

Here are all the fields in the links table:

• link_id
• link_url
• link_name
• link_image
• link_target
• link_category
• link_description
• link_visible
• link_owner
• link_rating
• link_updated
• link_rel
• link_notes
• link_rss

I have used the extract() method to convert each key (field) in the returned array to a variable. That’s probably not the best idea for performance reasons, but for demonstrational purposes it’s nice and clean. Next, I create a div with some paragraphs and a link. This is the part where you can customize to your hearts content. I just went with something basic.

2. Add a link

Now all you need to do is head over to your links page in the WP admin and add a link. I put mine in a category called bookmarks just to keep things organized. You can go crazy here if you want. Once you’ve saved the link make sure to get the ID for it.

The ID isn’t anywhere obvious, unfortunately, which makes this technique feel a little hacky. Regardless, if you go back to the links page and hover over the title of your link you will see something like this in your status bar at the end of the URL:

link_id=165

Just take note of the id, you’ll need it for the next step.

3. Write your post

Finally, lets post the link to the blog using the shortcode we created earlier. Start a new post and add the following:

[magnolia ids="165"]

That’s it! Now save your post and basque in the glory of your ingenuity!

Caveats

There is one caveat that I can think of. The RSS feed will not publish the generated text. So you’ll only have titles for those posts unless you add more text to the body of your post.

This is a great way to use an often under-utilized feature of WordPress. It is also fun to host and publish your own bookmarks for people to see. Let me know how it works for you!

Update: After more careful testing I realized that the full text does, in fact, show up in RSS. So there you have it, if you want to post your bookmarks to your site nothing is standing in your way!

Let’s have websites with boxed-in content this week. How were these designed to produce such neatly-arranged yet still visually interesting content?

Designs of the Week

You know how boxy designs tend to feel cold and industrial? It doesn’t feel that way here. Perhaps because of the lighter background, the surrounding typography, and the actual content in this designer’s portfolio.

The grungy feel and the bold letters reinforce the activist nature of this website. The heavy borders go well with a lot of their posters, too, as each one is calling your attention to take action.

The beauty of this layout is that the content dictates the shape and arrangement of the boxes, instead of shoehorning each item into equal widths and heights. What’s even more interesting is this is a WordPress theme, so if you’re running a WP blog out there you can use this design on it.

Social Media Weekly

Design – 50+ Most Useful Valentine’s Day Designer Resources
It’s just a week away.

Programming – Use CSS Diagnostics with Stylish to find bad HTML
Links to several CSS diagnostic techniques including the Firefox extension Stylish.

Design – 10 things a web designer would never tell you
Tongue in cheek!

In my previous post entitled, CodeIgniter: PHP Development Fun – Part 1, I talked a little about my excitement regarding CodeIgniter. So far, I have found the learning curve to not be too steep and continue on my trek to develop my own website with the framework.

Today, I wanted to talk about what I have been working on with CodeIgniter. I decided I wanted to make my own versions of Popurls, or AllTop. This is something I could have done in an hour or two with WordPress and some plugins as well as a bit of SimplePie usage, but on CodeIgniter, it has taken a little longer, but the excitement I experience as each piece works is much greater than if I had done the hack job of using WordPress for something it wasn’t intended for.

The first step for me was coming up with my database and then adding some information to it, and using the scaffolding feature in CodeIgniter, I was able to do this quite easily. Unfortunately, this wasn’t perfect as I was using two tables, and taking information from one table, to be used to reference the other was a pain in the butt. I decided to create my own administration panel to control the input of data into my site.

There were only three pieces of data that I wanted to have to input: the site name, the URL and selecting which category I wanted it to be in.

At first, I coded the category selection system in a convoluted way before realizing how silly it was. Much of the mistakes I have made in programming thus far have been planning and logic mistakes that could have been avoided if I had taken the time to really sit down and think through my plans.

My Administration Panel

Creating my administration panel was as simple as adding another view with the relevant form, and creating a function to insert the information into my database.

I first had to create a function in my front.php controller related to showing the administration panel view, and showing the right categories in my option box.

	function add_blog()
	{
		$data['query'] = $this->db->get('niches');
		$this->load->view('admin_view', $data);
	}

Then I needed to create a form in my admin_view.php file to fill out the details of the site I was adding. The following is of course without the requisite xhtml that should surround the form and create a layout to look pretty.

	echo form_open('front/submit');

	echo "Site Name: " .form_input('name');
	echo "<br />Site URL: " .form_input('url');
	echo "<br /><select name='niche'>";
	echo "<option selected='selected' value=''></option>";
	foreach ($query->result() as $row):
		echo "<option value='$row->id'>" . $row->nichename . "</option>";
	endforeach;
	 echo "</select>";

	echo "<p><input type='submit' value='Submit'></p>";
	echo form_close('');

And lastly, I needed a function in my front.php controller for putting that inputted information in the database which was as simple as:

	function submit()
	{
		$this->db->insert('sites', $_POST);
		redirect('front/add_blog');
	}

I know I’ve been bad, as I haven’t locked down my little administration panel yet, but this does show how easy it is to manage a database with CodeIgniter, from querying the database, displaying rows, and then inserting information into another table, I would have needed to write a lot more PHP had I done this without a framework.

Also, if you know of a way to do this with less code, better code or have any thoughts or opinions on these CodeIgniter posts, please let me know in the comments below.

Like most designers, I’m a font addict. I often wonder if one can ever have too many fonts- and I know that many people agree with me, and that many people love fonts even more than I do.

There are, of course, the fonts we love to hate. I used to feel this way about that script font (you know which one I mean), and for a while there you couldn’t pay me enough to use Comic Sans. I like to think, however, that I’ve made my peace with those fonts- and realized that maybe there are no bad fonts, just bad font usage.

Then there are the fonts we love. The ones we use over and over again. Helvetica, Garamond, Din- I’m looking at you, my darlings. Classic, time-tested fonts that can arguably be used in any application, the “desert-island” fonts any designer should have in their libraries.

And finally- there are what I like to call my Fonts of the Moment. These are fonts I fall in love with- for maybe six weeks, maybe six months (okay, so maybe infatuation is a better word). They don’t have to be new fonts- although many of them are. At any given time, I’ll have around five of these, winking at me from my Photoshop character list, just begging me to use them in a current project. Here, I share with you some of my current Fonts of the Moment:

The genius FF Mt from FSI Font Shop is described as “the most economical typeface ever”, and rightly so: the font “uses up to 50% less paper, screen, and wall space than other text faces without a single condensed letter.”

Romeral , which was designed all the way back in 2004, is a display typeface- meaning that it would be gorgeous in a header. To get it, email the designer with details on who you are and where you want to use the font. Get more details on his blog.

I heart all things vintage, and Millesime is wonderful because it’s a little bit vintage without looking too dated.

And finally, the minimalist within you will rejoice when it sees Cicle, a thin but strong sans-serif typeface that looks particularly good when used without capitals.

So there you have it: four worthy fonts I adore right now. Why not try them out in a current project? And commitment phobes need not worry- they’re all free.

One of the things I have been interested in lately is what people use for programming. I’ve always been rather simplistic, especially when I was a Windows XP user, sticking to my favourite little application, Crimson Editor.

In reading a post on Compare Degrees, about free programming tools, I noticed that I wasn’t alone in my usage of Crimson Editor, and many other tools that I had once used were also on that list, but is that just because myself, and whomever wrote that post don’t know any better?

Now that I am on a Mac, I still try to stick to open source and free applications, though that is much harder now than it was in either the Windows or Linux worlds, but have I been missing newer, better applications by sticking firm with my old faithfuls?

What applications are people using to develop programs these days? From websites, to compiled executables. What really rings home to you as the best applications available? Where are you finding these applications? Is it through your favourite websites, or do you troll SourceForge, trying out random programs until you find one you like? Almost all of my favourites have either come from recommendations from friends, or from magazines (that’s how old I am).

Check out the list on Compare Degrees, and let me know if they were right in their selections, or dead wrong. I really would love to get together 2009′s ultimate list of programming tools, and I think that you’ll know better than I, since I always stick to the same four or five applications. So please, leave a comment with your suggestions.

I know many web designers and developers blog. But for those who don’t, here are couple reasons why you should.

1. Marketing

Ask most internet marketers and they’ll tell you that blogs are great for driving traffic.

If you’re a freelance worker, getting more traffic to your site can increase your leads and sales. Even if you’re working for a company, your blog can send more traffic to your company’s site. In this economy, you probably want your firm to have more business so that you can stay employed.

Blogs can get a lot of traffic for a couple of reasons.

First, they often do well on the search engines. Blog have lots of pages for the search engines to rank as opposed to static brochure-like sites that only have a few pages.

Second, blogs usually get more repeat visitors. Internet users are much more likely to bookmark a blog since they expect blogs to get updated and they want to check back for new content.

Third, blogs are usually better than other types of sites at attracting links. There seems to be a culture of “linking out” between bloggers that’s missing with other sites. Most bloggers are open to sharing their traffic by linking to other bloggers. Of course, if you want to share in this traffic, you’ll be expected to link out too. It’s a win-win for you, since you can point your readers to interesting blogs while receiving traffic back.

2. Learning

Blogs can be great learning tools.

You can create helpful posts for your industry. This is a great way to solidify in your mind the things you’ve learned.

You can use your blog as a reference guide. Think of it as your old school notebook where you kept important notes to help you do your homework and pass your tests. Your blog has an advantage over the notebook because it’s online. This means you can save useful links with ease. Also, other people give you useful information by leaving blog comments.

You can also use your blog as a work diary or journal. By keeping track of your work activities, you can look back at your posts and be encouraged by your progress. You might uncover unproductive trends that you need deal with and productive patterns that you need to focus on. Again, other web designers and developers can interact with you through the comment section. They may leave helpful information or just a general encouraging word.

As your blog grows in traffic, you can start using your blog to get valuable feedback. You can ask your readers to answer questions that you have about your industry. You’ll need a good amount of traffic to make this work since most readers don’t leave feedback.

3. Networking

I’ve hinted about this already, but it deserves its own section. Simply put, blogs are an effective and efficient way to build relationships with other web workers.

You’ll still need to make the direct contact possibly with email or a face-to-face meeting, but your blog showcases your personality to anyone who has an internet connection. Over time, your readers will know you pretty well.

If you want to network with someone, you can contact them and point them to your blog to learn more about you. You won’t have to keep telling your story to each person you network with. Instead, you can just link to the relevant posts on your blog.

If you’re looking for a job, new clients, a business partner, or even online friends in your industry, your blog functions as a “living” updated real-time resume.

Over to You

If you’re a blogger, why do you blog?

Ah, RSS feeds- my favorite bit of “push” technology, where the good stuff comes to you, every day, several times a day. Current events, celebrity news, recipes, even Facebook updates, can all be delivered to one place, without having to browse or make new tabs. The question is, with so many wonderful sites out there, how do you keep your RSS subscriptions to a manageable number? More →

The W3C has worked hard to remove presentational elements from HTML. Unfortunately, old habits don’t die easily. This has resulted in some standard generic CSS classes that are contradictory to the intention of HTML and CSS. If you are using classes like .left, .right, and .clear you are guilty as charged.

More →