Back in September, Brenda and I decided we were getting fat.  Well, we’re not that bad off…but we both sit in front of a computer for the vast majority of the day, and had been feeling a bit flabby.  So, we decided maybe it was time for a change of diet.  We reasoned “When was the last time you saw an overweight vegetarian?” and decided to try and adopt a veggies and eggs only routine for awhile.  I didn’t know it at the time, but this has actually been a very interesting and developmental experience for me, so I thought I’d share a bit about why we did it, the results thus far, and the impact it has had on our lives.

The Reasoning

In addition to the all-American goal of weight loss, we genuinely wanted to adopt a healthier lifestyle to try and offset our working environs, which are sort of the antithesis to being healthy.  It’s no secret that, proportionately, meat doesn’t provide near the amount of dietary needs that an all-vegetable-and-fruit diet would.  As an added bonus, vegetables are typically cheaper than purchasing pounds of meat, can be fixed in just as many varying recipes, and can even serve as meat substitutes as far as texture and consistency are concerned.  Vegetables are also easier to produce and have less impact on the environment and farmlands than raising livestock, so we get a little bit of a green feeling in the mix too :)  There are some health concerns, mostly centered around getting enough of important nutrients such as B12, but nothing that can’t easily be fixed by taking a multivitamin.

The Results

So far, our adopted diet has been really great for a variety of reasons, and not necessarily the ones you might think.  We have lost weight and feel better overall, but that has probably (inadvertently) been only a small part of the gains from this particular endeavor.  Since the typical American diet is heavily meat-oriented (and if you don’t think it is, try finding something vegetarian to eat at Steak N Shake), it’s really forced us to watch what we’re eating.  Gone are the days of walking into a McDonald’s and casually ordering a double quarter-pounder with cheese.  Now, any restaurant we happen across is immediately subjected to close scrutiny concerning what they offer on their menu.  Most places do have at least the option of a salad, but it can sometimes be very difficult to find a satisfying meal when eating out.

Another facet we’ve taken notice of that most people no longer bother to, is the size of the portions being placed in meals.  I mean, a double-quarter pounder with cheese?  Seriously?  Think about that a second: that’s a half a pound of beef, and most of your daily intake of dairy products, not to mention smothering it with salty ketchup and the ubiquitous McDonald’s fries.  If/when vegetables are included with a meal, they are typically disproportionately small, and oftentimes have portions of meat mixed in them.  Take a look at your green beans the next time you’re at a barbecue place, or the little bits of bacon mixed into your mashed potatoes.  We are definitely a meat-and-potatoes society (on the whole), and our self-imposed diet has been a boon in objectively observing that.

Somewhat surprisingly, our family and friends have been very accommodating in our lifestyle change (note: the holidays seemed to be exempt from that statement) and will always check with us before preparing a family meal or food for a party.  More importantly, none of them seem to think we’re psycho-liberal-environmental-nutjobs, which is a relief here in uber-conservative Midwest USA.  We’ve actually found that many people are interested in our diet and very supportive of the reasoning behind it.  My parents have even let us cook white chili with tofu for them.

And on that note, we come to probably the most important part about this whole experience: the cooking.  Since it’s infinitely easier to make something we want to eat than to go elsewhere and try and pick something we will eat (and cheaper too), we’ve taken to cooking a lot - to the tune of 4-5 times a week typically.  This has been exceedingly awesome, because we’ve been inspired to experiment with different foods and preparation techniques, and a host of new recipes we most likely would have never tried before because we would have been making hamburgers.  Now, we make bean burgers.  Cooking together has also strengthened our relationship, and I highly recommend it as both an adventure and a therapy for any couple out there looking to improve their marriage/dating life/etc.

Recipes

For anyone who might be interested in giving a vegetarian meal a whirl, I thought I’d include a few of our favorite main dishes.  Any of these can be accompanied by a salad or other side, but they work great on their own:

Black Bean Veggie Burgers  (via AllRecipes)

Ingredients:

• 1 (16 ounce) can black beans, drained and rinsed
• 1/2 green bell pepper, cut into 2 inch pieces
• 1/2 onion, cut into wedges
• 3 cloves garlic, peeled
• 1 egg
• 1 tablespoon chili powder
• 1 tablespoon cumin
• 1 teaspoon Thai chili sauce or hot sauce
• 1/2 cup bread crumbs

Directions:

1. If grilling, preheat an outdoor grill for high heat, and lightly oil a sheet of aluminum foil. If baking, preheat oven to 375 degrees F (190 degrees C), and lightly oil a baking sheet.
2. In a medium bowl, mash black beans with a fork until thick and pasty.
3. In a food processor, finely chop bell pepper, onion, and garlic. Then stir into mashed beans.
4. In a small bowl, stir together egg, chili powder, cumin, and chili sauce.
5. Stir the egg mixture into the mashed beans. Mix in bread crumbs until the mixture is sticky and holds together. Divide mixture into four patties.
6. If grilling, place patties on foil, and grill about 8 minutes on each side. If baking, place patties on baking sheet, and bake about 10 minutes on each side.

Notes:

We typically do these on a griddle on the stove.  I place the patties on aluminum feel sheets and peel them off onto the griddle as needed.  DO NOT use a slatted grill surface without foil underneath: the patties will fall apart and through the slats.  This recipe makes four (4) large patties which are more than enough for 2 people.  Spinach leaves instead of lettuce really compliment the patties well.  Toasted buns are highly recommended.

White Chili (via AllRecipes)

Ingredients:

• 1 pound tofu, cut into cubes
• 1 cup medium salsa
• 1 cup frozen corn kernels
• 1 cup water
• 2 (14 ounce) cans great Northern beans, rinsed and drained
• 1 (8 ounce) package jalapeno pepper Cheddar cheese, cubed

Directions:

1. In a large pot or saucepan combine the browned turkey, salsa, corn, water, beans and cheese. Stir together and simmer over low heat for about 30 minutes, or until cooked through and cheese has melted.

Notes:

This is a real favorite because it’s so easy to make.  We’ve exchanged the original recipe’s pound of ground turkey for a pound of cubed tofu.  Be sure to stir it frequently and use only medium heat, as the cheese *will* melt and adhere to the bottom of your pot, making for hours of fun and fascinating scrubbing with steel wool.  For extra spice, throw in a small can of green chiles.

Spinach Enchiladas Verde (via AllRecipes)

Ingredients:

• 1 cup light sour cream
• 1 (7 ounce) can green salsa
• 1 bunch fresh spinach, rinsed and thinly sliced
• 2 cups shredded Monterey Jack cheese
• 1 (10 ounce) package corn tortillas

Directions:

1. Preheat the oven to 350 degrees F (175 degrees C).
2. In a small bowl, stir together half of the sour cream and the green salsa. Spread enough to coat the bottom into a 9×13 inch baking dish. On each tortilla, spread a small amount of the salsa and sour cream in the center. Lay a small handful of spinach over that, and sprinkle with Monterey Jack cheese. Roll up, secure with a toothpick and place into the baking dish. When all of the tortillas are in the pan, pour the remaining salsa over the top and sprinkle with the remaining cheese.
3. Bake for 20 to 25 minutes in the preheated oven, until the enchiladas are browned and heated through.

Notes:

Don’t be afraid to double the quantities for a big crowd.  This meal reheats well for a week’s worth of food.

Over the holidays I’ve been going through my ever-lengthening To-Do List and trying to cross off some of the things that I’ve been meaning to get to for quite some time.  I decided to put off teaching myself how to train ferrets and underwater basket weaving, and instead try and finally get my massive book collection into an online, electronic format.  I went straight to www.librarything.com to get started because, well, everyone uses it (or so I’ve observed).  What follows is an overview of my trial experiences with the LibraryThing service, Shelfari, and Goodreads:

LibraryThing

This service has come highly recommended from several people I know.  I few of them even have updates via their site when they add new books, and there seems to be an integration capability with FriendFeed.  After going through their site briefly, I created an account and started to add books.

Pros:

• Huge user backing (come on…everyone’s doing it).
• Customized search options from multiple library databases.
• You can use a barcode scanner to import books (that’s really nifty).  Problem is, you have to have access to a barcode scanner.
• Advanced statistics viewing (users, libraries, book types, etc.)
• Ability to create widgets to embed on your site/blog/whatever.
• Well-developed community of readers, reviewers, and authors.  Good perk if you’re in it for the people as well as the books.
• Supports a multitude of languages, netting it a much larger user base.
• Allows you to link your books to Amazon with a referral code so you can make some bank.

Cons:

• Since LibraryThing seems to be so popular, they have some really critical performance issues.  As I write this, their site has been down for almost 2 hours 3 hours now.
  EDIT: at the time of writing, LibraryThing was undergoing massive maintenance.  They never bothered to give a notification about that though.
• The site is horrid looking.  Not quite 1990-era…but almost.
• The customized search makes you choose which library from the 690+ they have to search from.  Not a big deal, except they neglected to include a “Search From All” feature.  So if one library doesn’t have your book, it becomes a guessing game to which library you go to search for it.  You can always manually enter a book, though.
• Adding books is time-consuming and somewhat painful.  Besides to aforementioned search issue, every time you add a book you must search again for another one.  This is a massive usability problem if you’ve done a search by author and want to add multiple books.
• Likewise, choosing your correct edition is a headache as you have to view the books individually and select the edition from their details page.  Because of the performance issues, this is a bigger hassle than it really needs to be.
• Semi-pay service.  200 books for free, then you have to pay $10/yearly or $25/lifetime.  Not a big deal to the casual reader, but for weirdos like me who have hundreds of books it is an imposition.  But, I’m not opposed to supporting such a great idea as a personal online book catalog.

Shelfari

Apparently this service was featured on Oprah, or her magazine, or another of her billion publications; I didn’t know that going in to it.  I originally found the site from this post: Catalog your books online! (Including Test).  Kim, the author, had embarked upon a similar journey as what I’m describing here.  Credit where credit is due :)

Pros:

• Shelfari, in basic visual terms, is much easier to look at and comprehend than the retro LibraryThing setup.  There are less navigation options, it it follows a slightly more traditional navigation structure.
• The site doesn’t have near the performance issues that LibraryThing did.  However, there is a downside (see below).
• Shelfari is owned by Amazon, so it has the full backing of one of the most powerful entities on the web (for whatever that’s worth).
• Adding books is a very easy process.  You can add multiple books from a returned list, with details such as “I’ve read this” or “I own this book” all in AJAX-ified goodness.
• Allows the creation of multiple widgets, each being customized to your needs.  Of the 3 services I’ve tested, this is the only one that powers its widgets with CSS that can be restyled to suit your whims.
• Completely free.
• Allows you to link your books to Amazon with a referral code so you can make some bank.
• Book searchs are more compiled, with less inclusion of extraneous copies and versions of the same book (duplicates).

Cons:

• There may not be many performance issues, but there isn’t a very large user base (yet).  The interface for your bookshelf (books you’ve added) is very graphics & javascript heavy…so any increases in popularity might cause it to become extremely cumbersome.
• The community surrounding Shelfari is relatively non-existence…at least compared to the behemoth LibraryThing.
• As far as I can tell, only supports English across the site.  Doesn’t mean you can’t add books in other languages though.
• Lots of fun ads from Amazon :)
• Even though their site is obviously superior in usability and style to that of LibraryThing, they seem to do less to promote themselves than LT does.
• No FriendFeed integration (negligible).
• Lacks some of the statistical data about libraries and individual books that true bibliophiles may crave (also negligible).

Goodreads

I happened upon Goodreads while checking FriendFeed to see if they had an integration available or Shelfari.

Pros:

• Very stylish, and yet still light on the graphics and bandwidth.  Feels much more optimized than either of the other services, having very fast response times to information requests.  Follows a navigation scheme that is different from Shelfari, yet still easily understood.  It might even be better in the long run.
• Seems to have an active, and growing, community.
• Searching for and adding books is the easiest and fastest of the 3 services reviewed here.   Searches
• Has built-in integration with Twitter, in addition to Facebook, Myspace, and Bebo.
• Widgets!  They aren’t customizable, but all the code is provided.  Simply copy and paste.
• Allows you to link your books to Amazon with a referral code so you can make some bank.
• Has a unique authors and sellers program, that I haven’t really explored yet.
• Completely free.

Cons:

• Still can’t compete with the sheer number of people that seem to be using LibraryThing.  I guess you have to decide how big of a crowd you want to be a part of.
• Widgets for your site are not customizable, and the better options are Flash, which kind of sucks.
• You still have to go to a separate details page to choose the correct edition of your book if it’s different from the one pulled up in the search.
• English only as far as I can tell.
• AdSense ads abound in your members area.  Hey, have to pay the bills somehow, right?

Conclusion

In the midst of doing the research for this article, I was accused of being “a designer, rather than a librarian, bibliophile, author, reviewer, and/or community member”.  I guess I have to plead guilty to half those counts, but I am a bibliophile (in my own right), an author, a review, and a community member (if just a lowly troll).  However, this particular sentiment was voiced from a proponent of LibraryThing when I had initially declared that Shelfari was much better, and I get the point of his jibe.  If you’re looking for a vast community of other book-nerds (a good portion of them probably academics) then LibraryThing is the obvious choice.

But, if you’re like me and enjoy books on a more recreational level, and simply want to be able to catalog your books to keep track of them and display them on your site…I’m going to have to say that Shelfari or Goodreads are much better services.  I say this mostly from a usability standpoint, as most of the extraneous features (like the widgets, Amazon referral codes, etc) are the same across the 3 services.  I personally have decided to throw my hat in the ring for Goodreads.  It was easy to use, fast, and had all the features I needed plus a vibrant community should I magically discover extra time in my day for such pursuits.  I would invite anyone searching for their ideal book catalog service/community to post a comment and let everyone know which service you use, and why you use it.  Perhaps there is some undiscovered gem floating around out there.

Image credit: 11010010

For most people, FeedBurner is old news.  Nearly anyone who has subscribed to an RSS feed from a major site has probably come into contact with a feed redistributed by FeedBurner, whether you’ve known it or not.  Heck, even I, a relative newcomer to this land of pingbacks, comments, and calibrated SEO measures has known of FeedBurner for quite sometime.  However, knowing it’s there and trying to use it are two different things, and I recently had a very pleasurable experience when I signed up for my first FeedBurner feed.  So, I thought I would share why I thought it was so nifty, and offer a few quick tips on how to easily get your WordPress site spitting out feeds enhanced with FeedBurner.

What Is FeedBurner?

I felt I should answer this first, before I dug into it a bit more.  Even knowing about FeedBurner beforehand didn’t really give me a clear indication of what FeedBurner actually does.  So, here’s the skinny:

• FeedBurner is, at a basic level,  a service that takes a single feed that you provide, and recompiles it into a “super feed” that is readable in all formats (RSS1, RSS2, Atom, etc)
• FeedBurner also modifies your feed output to include a number of custom features, such as animated images and links for social networking in each post (Share on Facebook, Digg It, etc)
• You are given a stats report, detailing who your subscribers are and what they are reading.
• Other options are available, like having FeedBurner notify indexing services when your feed has been updated, integrating AdSense

Why Is It So Awesome?

Lots of reasons.  The entire goal of having a blog (and the giant dispersal of information we know as the “Internet”) is to reach as many people as possible.  FeedBurner’s ability to take a single feed and tailor multiple XML formats for various readers means that you can hit a wider range of potential recurring readers.  Couple that with its custom modifications to include monetization (AdSense) and social networking links to improve your shareability, means that you have a much higher potential for making the most of your blog/podcast/rightwing ultra-conservative anarchist revolutionary feed.

Being a designer, I’m innately concerned with the presentation of whatever materials are before me.  With this in mind, the first thing I noticed was the superb usability FeedBurner brings to its services.  The homepage has a fair amount of information, but the reason you are most likely there is front and center and ready for easy use:

I was able to sign up for a free account, and convert my WordPress default feed to a FeedBurner super mutant feed in about a minute.   I then instantly had access to this wonderful workflow navigation:

Everything I need is right there, in an ordered format, with helpful hints and instructions under each tab.  That’s a breath of fresh air compared to a lot of web apps, which can easily become so cumbersome that they collapse under the usability issues of their own vast amount of features.  On top of that, I couldn’t help but notice the subtle humor and personality present throughout the site.  This is something I’ve come to expect (and enjoy) from most Google-owned services, which breaks the monotony of the business of business.  I found this starting page viewable immediately after creation of my first feed particularly…um…cute? :

It makes sense, it gives you some options, and it even makes you smile a little.  Perfect.

FeedBurner & WordPress

Ok, so now we’ve got this nifty hybridized feed that monetizes, optimizes, customizes and Simonizes…how do we get it into WordPress?  This part is really simple, thanks to Google/FeedBurner fully supporting the FeedSmith plugin for WordPress.  Basically, you follow the instructions on this page: Creating your WordPress feed (self-hosted WordPress).  The page details a 5-step process, but it can basically be summarized as:

1. Download FeedSmith, upload it to your plugins folder, and activate it.
2. Go to Settings > FeedSmith, and paste in the URL to your FeedBurner feed and hit the button…you’re done.

Easy.  There’s also a guide for using FeedBurner through WordPress.com, found here: Creating your WordPress feed (WordPress.com)

FeedBurner isn’t just another WordPress supporting service; it’s a standalone that you can use in any situation where a default feed can use some major optimization.  Try it out, recommend it to your friends, all hail Google.

I’m going to do something that is very uncharacteristic of me: I’m going to bare my personal life to the world at large (at least briefly).  I really feel that my conscience commands me in this case to share a little bit.  You see, I’ve been witness to a miracle.

There was this guy.  He grew up, had the typical childhood (whatever that is), had all the growing pains, the struggle with being “cool”, trying to be popular, and all the other crap that seems to accompany life before college (or post-high school).  While formative, this period of his life was relatively unimportant.  There was more to it coming.  He could feel it.  This fellow had a great desire.  A desire to be someone.  To be important.  To be worth something…and absolutely no idea how any of that would happen or, truthfully, really what he wanted in those desires.

He wanted to love.  Not just the kind where two people really like each other and the time they share.  He wanted something more, that kind of mushy, unrealistic, fairytale love that you only see in the movies and know isn’t real.  This guy was a romantic…painfully so.  He found the first girl who seemed to take an interest in hi and went full speed ahead, only to have in fail spectacularly after a great investment of time.  He’d taken a shot at love, found he was severaly lacking in it by his own account and by the account of his significant other, and filed that away as a portion of his dreams that wouldn’t be fulfilled.

This guy really wanted to create.  There was a burning in his soul that drove him to build, to design, to study, and to obsess (not to put too fine a point on it).  But the Real World came knocking in the form of that cursed timesink, “Education.”  Art was too preachy, Design was too trendy, Media was too uninformative, and everything else was bland beyond all desire.  And so this fellow ended his Education, with high honors, fancy titles, and his very being still craving the skills to allow him to be creative in a business-centric world.  He filed this away also, hoping perhaps that some day he could power that raw creative spark.

This man, as he had unfortunately realized he had become, now just wanted to work.  To move forward with his life, and begin the rat race of existence: toiling endless days for money to spend on things that might make him happy.  He held out hope that his job would provide him an outlet for his creativity, to allow him to live his dream of supporting himself with his passions.  But this was also, not to be.  Be sheer dint of circumstance, he found himself to have been born in a region almost entirely devoid of professionals of the creative variety.  His first job devolved into tiresome days filled with backward managerial thinking and feeling frustratingly useless.  In time, he moved to another job, hoping that it would allow him the opportunity to improve his skills and perform his craft.  This, too, ended poorly, the company folding entirely after giving him the boot.

And so this man was left, his spirit broken, feeling helpless and alone in a reality that had done its best to subdue his dreams and desires.  He restled with himself, not knowing if he was more angry at the world for preventing him, or at himself for failing to enable his own future.

You’ve probably guessed by now that I’m writing about myself, and I must say that I have thus far enjoyed this first-person cum third-person narrative.  Theatrics asside, all I’ve ever wanted to do was live my life with a person that I’m ridiculously happy to be with, to play and create for a living, and take everything else as it comes.  And life throughout college and past had more or less robbed me of any hope of that.

And here’s the miracle.  God, in His infinite wisdom (and for once I’m not being sarcastic), has led me through these last 24 years over ground that has felt very rocky.  And then one day it happened: I met the person I’m going to spend my life with.  The details of it are unimportant (at least to you, Reader), but she has been everything I ever wanted, and many things I never knew I needed.  She has made the professional struggle I have endured worth it, and has never once been a source of discouragement or stress.  Not even in the slightest.

After the layoff I experienced, I floundered.  And then I was provided with a wealth of freelance work.  I am reminded of mana from heaven, because it has certainly felt that way.  Through no real action of my own, I have found myself busy beyond reason, using my creative skills in web design and development to support myself and (most importantly) find happiness in my work.

So all that being said, I just wanted to declare to the world at large that miracles do happen.  The Lord provides.  God is good.

A few last things that were sent to me by my grandmother that are worth reading:

• Don’t worry about  anything instead pray about everything; tell God your needs, and don’t forget to thank him for his  answers.   If you do this, you will experience God’s peace, which is far  more wonderful than the human mind  can understand.  His peace will keep your thoughts and your hearts quiet and at rest.  Philp. 4:6-7
• Be joyful in hope, patient in affliction, faithful in prayer.  Romans 12:12

Merry Christmas.

I’ve discovered as of late that there are a lot of practices that haven’t been adopted by the web community that have been around for quite some time (meaning a year or two in web terms).  This is particularly surprising to me in some cases simply because of the sheer usefulness of the practice(s) in question.  A lot of this is simply because of ignorance, and I use that term as it was intended, not with any negative connotation.  So, to help correct that, I thought I’d churn out a quick post on one of the biggest time-savers: the reset stylesheet.

If you’re unfamiliar with what a reset stylesheet is, the concept is very simple.  So simple, in fact, that once you understand it you’ll wonder why we haven’t been using the idea all along.  But to understand why a reset stylesheet is so great, there’s a bit of a back story.

A Brief History of Web Browsers and Why They Suck

The web has been, unbeknownst to most people, a fairly brutal battleground since its inception.  The W3C has been the determining body for what standards browsers and other content devices should adhere to, and they have been soundly ignored from the beginning.  Things really came to a head in the battles between Microsoft and Netscape, with each racing to develop their own proprietary methods that would make developers want to create sites for their browser specifically.

Eventually things calmed down, mostly because of accessibility concerns.  However, the fallout from the earlier battles is apparent in that most browsers still have differing methods of rendering data on the screen.  Things like forms having extra spacing inside them, input fields having their own font families different from the surround elements, lists with varying levels of padding, etc.  This is a huge headache for design and development, to say the least.

Ok, so what is it?

A reset stylesheet is a specialized CSS file, or a collection of CSS definitions, that override all default styling provided by a browser for HTML tags with a visual output.  The practical result of such a sheet is that it removes the ambiguity in display, telling all browsers that this has these types of margins and that has this type of padding.

Exactly what a particular reset stylesheet does is, obviously, based on its contents.  Different stylesheets have been developed with varying degrees of specificity as to what styling they apply.  The stlyesheet that I’ve found to work best for most situations has been one developed by CSS guru, Eric Meyer.  I’ve made a few modifications to his stylesheet and added a few other items:

Download the stylesheet listed below here: Reset Stylesheet (save as…)

1. html, body, div, span, applet, object, iframe,
2. blockquote, pre,
3. a, abbr, acronym, address, big, cite, code,
4. del, dfn, em, font, img, ins, kbd, q, s, samp,
5. small, strike, strong, sub, sup, tt, var,
6. dl, dt, dd, ol, ul, li,
7. fieldset, form, label, legend,
8. table, caption, tbody, tfoot, thead, tr, th, td {
9. margin: 0;
10. padding: 0;
11. border: 0;
12. outline: 0;
13. font-weight: inherit;
14. font-style: inherit;
15. font-size: 100%;
16. font-family: inherit;
17. vertical-align: baseline;
18. }
19. /* remember to define focus styles! */
20. :focus {
21. outline: 0;
22. }
23. body {
24. line-height: 1;
25. color: black;
26. background: white;
27. /* opacity: .99; text-rendering bug in Fx2/Mac --- doesn't validate */
28. }
29. h1, h2, h3, h4, h5, h6 {
30. margin: 10px 10px 10px 5px;
31. padding: 0;
32. }
33. p {
34. margin: 5px;
35. padding: 0;
36. }
37. ol, ul {
38. list-style: none;
39. }
40. /* tables still need 'cellspacing="0"' in the markup */
41. table {
42. border-collapse: separate;
43. border-spacing: 0;
44. }
45. caption, th, td {
46. text-align: left;
47. font-weight: normal;
48. }
49. blockquote:before, blockquote:after,
50. q:before, q:after {
51. content: "";
52. }
53. blockquote, q {
54. quotes: "" "";
55. }
56. /* CLEAFIX */
57. .clearfix:after {
58. content: ".";
59. display: block;
60. height: 0;
61. clear: both;
62. visibility: hidden;
63. }
64. .clearfix {display: inline-block;}
65. /* Hides from IE-mac \*/
66. * html .clearfix {height: 1%;}
67. .clearfix {display: block;}
68. /* End hide from IE-mac */
69. .clearer {
70. clear: both;
71. }

It’s a bit lengthy, but still a very small overall file as far as size is concerned.  It can obviously be condensed and is presented in its current format for readability.  The notable changes that I’ve made to Eric’s base stylesheet have been the addition of the “clearfix” methodology (as described at Webtoolkit) to the bottom, as well as a utility clearing class that I found myself using in nearly every site.

Briefly, what the above code does:

• The <html> <body> <div> <span> <form> <ul> <ol> and other tags are all specifically told to have no margins, no padding, no borders, no outlines, and to inherit their font settings from their parent elements.
• The <body> is given a default color attribute of black and a default background color of white, so you don’t have to set these every time you make a new site.
• Headings and paragraphs are given a specified set of margins and zero padding.
• List items are set to show no bullet or other notation by default (especially useful since most lists tend to end up as navigation or with custom styling).
• For browsers with better support of CSS2 & 3 standards, other things like defining a default focus state for form elements are added as well.
• The clearfix code snippets allow the application of a clearfix class to any element, resulting in that element clearing itself after all floated elements inside it (extremely useful).
• The utility clearer class can be applied to any element, causing it to clear any floats above it.

And that’s basically it.  Here are some important tips and directions:

• Include your reset stylesheet above all other stylesheets.  People tend to forget that HTML is read in a procedural manner, and if your reset stylesheet is placed below all other stylesheets, it’s styling will take precendence over the other CSS definitions. “Thou shalt not have other stylesheets before me.”
• To make your life less of a hassle, always include your reset stylesheet from the very start of your design/development.  Trying to add a reset stylesheet after the fact can sometimes be more of a headache than starting from scratch.
• Recycle!  Save your reset stylesheet code as a snippet or simply as a file located somewhere that you can easily copy and paste into any new projects you begin to work on.

Thanks to all those people who have developed this idea long before I got hold of it, because it has saved me a ton of time and headache.  Enjoy!

Image credit: sumeja

As of late I’ve been fortunate enough to have some very fun freelance projects come across my what-passes-for-a-desk.  One such project that I just recently complete was for an interesting company based out of Massachussetsand New Jersey, called The Aardvark Brigade, for the website of UK-based Twisted Records.

Aardvark (henceforth to be notated as “AB”) has some really awesome projects under their belt, and I was extremely excited to work wth them.  They’ve produced mini-sites for the Dark Knight, Spiderman, and 300 soundtracks, websites for bands such as Static-X and Mute Math, and even some work for Dow Jones.  They work in Flash-based sites as well as more standards-friendly traditional markup pages.  This particular project involved taking a prefab design provided by AB and converting it to XHTML/CSS/JS/etc so that they could then drop in the necessary server-side code to populate the pages with actual data.  And since I also have a special place in my heart for house beats and other electronic styled music (which is what Twisted specializes in), this project was particularly satisfying to me.

The Twisted site is not yet live as of this posting, but last I knew they were very close.  For the time being please enjoy some screenshots below:

Update: for an alternate viewpoint, and one that I agree with wholeheartedly, read Twitter is going to die, by Eric Karjaluoto.

I’ll be the first to admit that I’m a bit of an oddity when it comes to my profession.  Web designers tend to be trendy to a fault, early-adopters, eager to use the latest UI technique.  I’ll also be the first to say that there’s nothing wrong with that at all.  But that isn’t me.  I’m a cautious, calculating person.  Rarely do I jump on the bandwagon without waiting to see how many people fall off on the curves first.  Enter Twitter.

*Tweet*

Twitter has been an Internet phenomenon for several years now.  The idea is pretty simple: you get 140 characters per post, with the aim of keeping posts simple.  It takes its idea from birds sitting in trees, sending short “tweets” to their neighbors as a means of communication.  You can follow other Twitter members, send responses back to people who have posted something of interest, and customize how your profile and updates are viewed.

Just based on the capabilities, it’s pretty cool.  Twitter has quickly become adopted as an Internet standard for communication, and there are a ton of independent services that have been built around people generating their “tweets.”  “Then what, Ryan,” you may ask “is your problem?”

“Isn’t Twitter just too much information?”

That question is taken directly from Twitter’s site, and kudos to them for addressing such a  critical concern in a very open manner.  I have some very strong opinions on the Internet, the free exchange of ideas and communication, and where a willful loss of privacy falls in to the mix.  My first inclination is to dismiss Twitter, seeing it simply as another means for me to reveal more (albeit small) chunks of my personal life to The Web.

I’m all about community, and getting to know others, but I think the mass scale on which this occurs and the fact that you don’t have any way of knowing exactly who is listening in on those relationships being developed makes me a bit edgy, to say the least.  This is especially true with Twitter, where I can get a link to anyone’s update page and start deducing some very interesting things about their life.  Sure, there’s an option to hide your profile from anyone who isn’t following you…but then why are you using Twitter in the first place?  But the option is there, so I have say that particular concern has been addressed.

Twitter: 1
Ryan: 0

It’s All In Who You Know

This article is a semi-direct result of a conversation I was having online (just today in fact) with friend and fellow web junkie, Ted Kaemming.  Conversation is perhaps too light a word…more of a heated discussion on why I wasn’t using Twitter.  Ted’s main argument was that it’s yet another way to reach a potential audience, with the main end goal being to gain notoriety and further your career.  My main argument was that I didn’t need another way to reach my potential audience and that if I had one more profile or feed that I had to generate content for then I wouldn’t be able to focus on the notoriety I had and making money from my career.  I believe this ended in a stalemate.

Ted’s point is valid though: people want to choose their medium of receiving and sharing information, a lot people seem to have chosen Twitter, and those people don’t care a bit if I think it’s silly of them to do so.  And I have to admit that working out of Springfield, MO means that I can use all the outside contacts I can get.

Twitter: 2
Ryan: 0

Yeah, yeah…but what about the updates?

Building off my reservations so far, my biggest concern apart from privacy was the daunting fact that I would have one more medium that I needed to update to receive any sort of benefit from.  Generating new content for this site is a big enough struggle for me sometimes when trying to keep up with my workload and the mundane tasks of day to day life.  I already maintain a website, and that website generates an RSS feed via the magic of WordPress, so why do I need another RSS feed…especially one limited to 140 characters per post?

Twitter Advocate (i.e. Ted) pointed me to this site: http://twitterfeed.com/ It’s a third-party service that takes your Twitter account info and the address of any feed you want, and publishes updates on the feed to your Twitter wall…er branch…or whatever it’s called.  Other like-minded services exist such as TweetFeed, each with their own spin on integrating Twitter’s posts into standardized RSS.

Well, that takes care of having to make constant updates to keep having a Twitter account meaningful.  And Twitter did spur this post, which will now be added to the development of this site…so…

Twitter: 3
Ryan: 0

The Trendy Anti-Trendsetter

My final wall of defense against Twitter has/had to have been my innate resistance to being overly trendy.  There are the people who ignore trends.  There are the people who set trends.  There are the people who adopt trends, thus making them less trendy.  And then there’s me: someone who really has a desire to be somewhere outside all of this and do his own thing but really doesn’t have the faintest idea how to survive doing it.  But with the desire to be creative must come the realization that in many cases someone has probably already done what you want to do, and probably a lot of other people have seen it and think it’s really neat and start doing it themselves.

And we’re back to Twitter.  I can’t deny that, even with my reservations, the idea behind it is really pretty cool and at the very least can be a useful tool for establishing your own little niche on the Web.  Yes, everyone is doing it, and that makes me not want to, but sometimes the masses can be right (though history often teaches that the masses are usually completely ignorant, blood-thirsty zombies).  Yes, it requires near-constant updates to be viable, but there are ways to integrate other updating platforms to ease the load.  I’ve watched, I’ve read, and I’ve seen the benefits of twittering, even against my comfort zone.

So, I guess what I’m saying is: *Tweet*

I love what I do.  I love designing for such a dynamic environment as the web.  I love the challenges inherent in a medium as fluid and malleable as a web page.  I love the interactivity with the audience that completely devoid from formats like print and video.  I love it….except for the last step (at least for me) in the evolving process of web page creation: browser debugging and troubleshooting.

Why So Sad?

The depth of my hatred for browser debugging is unfathomable.  I’m not a believer in karma, or some sort of balancing scale that governs the universe…but I somehow feel that the sheer love and joy that I get from designing for this medium exacts some sort of price in the Spreadsheet of Life, and that the somehow ends up being the time I always have to spend debugging issues after everything is said and done.  I know that it comes with the territory, but it always seems to be a giant buzzkill at the end of the creation process.

1. My typical workflow goes something like this:
2. Create design (i.e. play in Photoshop for several hours/days)
3. Chop up design into component images, tiling backgrounds, etc.
4. Write up the basic HTML for the structure of the page
5. CSS the crap out of it
6. Spend several days testing it in every browser I can find, making changes, making changes to the changes I made because they don’t work in IE6, making changes to those changes because they don’t work in IE7, wishing every browser had a debug tool like Firebug, and generally becoming very frustrated and angry.

Browser Defaults

A ton of potential problems that lead to extended time debugging a design are because of the default ways that browsers display objects in the DOM.  Forms, fields, paragraphs, buttons….these all look and behave differently depending on which browser you use.  The IEs are particularly bad in their addition of extra margins around <form> tags.  <ul> and <ol> bullet displays have a reasonably wide variety of possible outcomes.  And of course there are the OS/browser overrides of buttons and form controls.  Macs get shiny buttons, Firefox makes select boxes that actually pay attention to widths correctly, and Opera does all manner of odd things with Flash.

A lot of these issues can be resolved by using a reset stylesheet.  This is simply a CSS file that’s included in every page before any other stylesheets come into play.  The actual content of the reset sheet varies depending on personal preference, but the idea is to declare your own set of standards for most, if not all, HTML tags.  For instance, the stylesheet that I use on this site declares that all heading tags (H1 - H6) have a 10 pixel margin all the way around.  This standardizes the output in every browser, before I ever actually style an H# tag.  That way, I know that whatever styling I apply starts from a standard set of “ground rules”, regardless of browser.

CSS Compatiblity

This isn’t as much of an issue now as it was even 3 years ago.  However, even modern browsers contain a large amount of spotty or outright absent CSS support.  This means that there limitations imposed from a design standpoint going forward because of the imperative of using CSS methods that are acceptable to all browsers.  The alternative is to use some method of browser detection and apply stylesheets based on the browser brand and version viewing the page.  This is called version targeting, and it can get messy very, very quickly.  For more info on CSS support, check out this awesome report from Quirksmode.

Alas, IE6

This probably doesn’t come as a surprise, but I abhor IE6.  Actually, that’s not really fair.  Yes, IE6 is terrible, but most “old generation” browsers were/are.  No, I hate IE6 because everyone still uses it.  It is the ultimate bottleneck of progression in the wonderful world of the interwebs.  This is more of a rant toward people who wont upgrade.  I understand that there are still a sizable amount of people still on non-broadband connections and updates are painful at best.  Yet, even worst-case it would only take one evening of downloading the update to IE7 and the world would be a much better place.

Because of the sustaining prevalence of IE6 usage, it’s still a major browser and debugging must be done for it.  The problem is that IE6 is so strange and backward, that changes made to correct visual flaws when viewed in IE6 almost always result in breakage when viewed in IE7, FF, or some other nextgen browser.  Often it seems an either-or situation: you can fix it for IE6 or you can make it work with everything else.  Thankfully, there are still IE’s proprietary conditional tags.  Even though these are a mild form of version targetting, they allow for and easy inclusion of an IE6-only stylesheet that can be used to make the tweaks and special formatting needed for the monstronsity.

You.

That’s right…you.  Well, maybe more specifically, your computer.  It isn’t really your fault, but even the addons or inconsistency in operating system updates on each individual system can have an effect on how the page you’re viewing is rendered.  IE6 v6.0.2 could display things differently than v6.1.6 of the same browser.  Even Firefox 2 and Firefox 3 contained some variations in padding and margin displays.

I think this is perhaps the worst part of the debugging for me personally, and it’s largely because of the feeling of impotence about it.  There is simply no way to make every design and page look and behave exactly the same in every browser on every computer, anywhere, all the time, forever.  The unfortunate thing is that some people are less understanding of this fact that others, and those people seem to be the ones who become the clients of web designers.

I take great pride in my ability to create CSS and markup that avoids the vast majority of the issues mentioned above.  Even so, I still find myself battling these issues on a daily basis.  I don’t have a solution to it; I really wish I did.  Hopefully, as more and more browser versions are released and more and more people begin to make the web an integral part of their lives, we’ll see a smoothing out of the bumps in the debugging process.

But I feel better now that I’ve complained about it.

In my previous post, I decided I would share my rough methodology on how I went about sprucing up my search widget in WordPress. If you’re just tuning in, here’s a quick update on what I described in The Making of a Not-So-Boring Search/RSS Widget:

• We downloaded some cool Photoshop brushes featured in Smashing Magazine, and used one of those to give a torn paper background to the search widget
• We took that background and prepped it for use from Photoshop, making minor modifications to include background transparency.
• We then modified the HTML for the search widget to accommodate the background styling.
• Finally, we added some simple CSS to pull in the background images.

Awesome. But what about the nasty, plain text links below the search area for the post and comment RSS feeds? Icky. Bland. Boring.

A Different Approach

Why do these links need to take up so much space? There’s no reason that we can’t compact them down into a single RSS button placed somewhere on the page, but I want to give my readers the ability to subscribe to both the posts and the comments…so we’re at a bit of a dilemma. But wait! Why can’t we roll these into a hidden section of the page that is easily accessible? A lot of sites do have that single button RSS link; this one will just have a special surprise.

Basically, the idea is to do this:

Making The Wrapping

Creating the images is just as easy if not easier than the images for the search background. I used the Rounded Rectangle Tool in Photoshop and then simple used the Pen Tool and the Direct Selection Tool to add some extra points for the tab curve and tweak the curve outward, respectively.

Once I have the shape the way I want it, I add a gradient across the surface in RSS-ish colors.  I add some text and a little RSS icon, and the tab is done. Then, all I need to do is turn off the background, crop it to just the tab portion (including the curve on the far left), and Save For Web.

That takes care of the tab, but we still need to save the background for when the tab is extended upward. That’s as easy as saving a 1px high strip from the extended background like so:

Note: the icons I’m using for the RSS links are adaptations from the Silk set found at FamFamFam. I’ve modified these separately and uploaded them.

Preparing The Box

Now that we’ve cropped out the images we need and uploaded them, it’s time to look at some code. As with the search box, it’s pretty basic. The following is placed in the sidebar.php file for my WordPress theme, right above the code for the search section:

1. <div id="rss">
2. <a class="tab">RSS</a>
3. <div id="rss_feeds" class="clearfix">
4. <a id="rss_comments" href="<?php bloginfo('comments_rss2_url'); ?>" title="Comments Feed">Comments</a>
5. <a id="rss_posts" href="<?php bloginfo('rss2_url'); ?>" title="RSS Feed">Posts</a>
6. </div>
7. </div>

Nothing scary there. Just some organizational <div> tags and some WordPress function calls to specific RSS link locations (which can be found in their Codex). I’m using the <a class="tab">RSS</a> tag to serve as the point of interaction where the reader will click to expand/contract the RSS section. And now for the CSS wrapping paper:

1. /* RSS Feeds */
2. #rss {
3. background: url(../images/bkgrd_rss_top.png) no-repeat;
4. margin: 10px 0 0 0;
5. }
6. #rss a {
7. display: block;
8. padding: 0;
9. }
10. #rss .tab {
11. height: 20px;
12. margin: 0 0 0 119px;
13. width: 68px;
14. }
15. #rss #rss_feeds {
16. background: url(../images/bkgrd_rss.png) repeat-y;
17. display: none;
18. padding: 3px 10px 3px 6px;
19. }
20. #rss_feeds a {
21. float: right;
22. padding: 2px 20px 2px 0;
23. }
24. #rss_feeds #rss_posts {
25. background: url(../images/ico_rss_post.png) no-repeat center right;
26. }
27. #rss_feeds #rss_comments {
28. background: url(../images/ico_rss_comment.png) no-repeat center right;
29. margin: 0 0 0 14px;
30. }

Nothing too fancy, but a brief explanation will help:

• #rss produces the background image of the tab, telling it not to repeat. This will sit behind the <a class="tab">RSS</a>.
• #rss a forces all <a> tags to display in block format, which allows margin and padding properties to be applied to them.
• #rss .tab sets the <a class="tab">RSS</a> to have a height matching the height of the tab background. It also sets a margin and width, making it act as a box over the tab on the right side, instead of a block clickable area across the top of the entire RSS section.
• #rss #rss_feeds sets the 1px background to tile and fill in the space occupied by the RSS links. We set it to hide by default with the display:none property.
• #rss_feeds a floats the RSS links, allowing them to still have block properties applied to them while displaying inline next to each other.
• #rss_feeds #rss_posts and #rss_feeds #rss_comments set the background icon images for the post and comments feed links, respectively.

All that give us the finished visual product. But how do we make it expand and collapse all nifty-like?

Enter jQuery

JQuery is a fantastic javascript library that makes visual effects extremely easy to achieve. It also does a lot more, like AJAX, but we’re just using the visual portion for this. Here’s what you need:

• jquery framework file
• jquery UI core file

You can customize the UI core file if you want to keep the filesize low. All we’ll be working with is the Blind effect, so you can build your own UI JS file to include just that. All I need do is link these files in the head section of my WordPress theme by writing:

1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.6.js"></script>
2. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-ui-1.5.2.js"></script>

Now, I’ve made a separate JS file called functions.js where I store all my global javascript functions that are used throughout the site. I’ve linked this in the theme and I’ll take the following code and place it in there:

1. $(document).ready(function() {
2. //Function to hide/show RSS feeds tab and disable button unless JS is active
3. $('#rss_feeds').hide();
4. $('a.tab').click(function(){
5. $('#rss_feeds').toggle("blind", { direction: "vertical" }, 250);
6. });
7. });

In English this means that once the document is ready ($(document).ready(function()), make sure that the <div id="rss_feeds"> is hidden. Once that’s done, setup a function so that when the <a class="tab"> is clicked, jQuery will toggle the <div id="rss_feeds"> using the Blind visual effect of the jQuery UI.

That’s really it. It’s not very complicated at all, and it adds a nice little visual effect. The best part is, should javascript be disabled, the RSS tab will default to being open so that the reader doesn’t miss out on the easy access to the RSS links.

In the future, I’ll look for more little things that can be done to tidy up a site and add an extra little personality to it. Except to read about them here when I do.

Maintaining your own site can be a real chore.  That’s one of the many reasons why I like WordPress so much: it makes updating and adding new content easy.

But what about non-content updates?  I’m talking about tweaking something that doesn’t look exactly the way you’d like it to visually.  A lot of people seem to shy away from this because it seems very daunting.  That’s yet another reason why I love the general setup of WordPress: changing the visual composition is just as easy as changing the content.

Note: from this point on I’m going to assume the reader’s at least beginner knowledge of Photoshop, CSS, and HTML.

The Goal

As you can tell from the header picture above, the search section in the sidebar of this site was pretty lacking for awhile.  It worked fine, but looked like crap (which in my book is just as important as making sure it works).  So, I set out to give it facelift.

But where to begin?  Probably the most daunting part of making a visual change to any part of a site is the fact that it involves being *GASP* creative.  It’s really not that hard; give yourself some credit: you’re more creative than you think.  In my case, I’ve decided to go with this whole mixed-media jump-off-the-page approach because I feel it is more engaging to the viewer and keeps me from being entirely bored after staring at it for hours trying to get something to work right in IE6.  So, I decided I need to do something that goes along with that.  Enter the torn paper look.

Texturize Me!

Awhile back I found this great post on Smashing Magazine.  I think I downloaded almost every brush they had listed, but in particular I was intrigued by the torn paper brushes.  I selected one that looked like a scrap of paper, and smacked it over my original layout file in Photoshop.

I added a little bit of emboss to make it pop, and called it good.  Nothing super fancy, but enough to make it interesting.

Now, the bigger issue is scalability.  Since whatever I end up putting in this search area could potentially increase with the browser’s text size, I need to make sure that it grows.  So, what is now a single image will become two, and the bottom portion will have a transparent background so it can move down the page and still have the page background show through.  Let’s look at the code:

1. <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
2. <div>
3. <label class="nodisplay" for="s"><?php _e('search for:'); ?></label>
4. <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
5. <div class="right">
6. <input type="image" src="<?php bloginfo('template_directory'); ?>/images/btn_search.gif" id="searchsubmit" value="search" />
7. </div>
8. </div>
9. <div class="btm"></div>
10. </form>

Now, I made my theme from the Default Theme that’s included with WordPress, so the above code is located in the searchform.php template page.  All themes are different, so yours may be somewhere else entirely.  The idea here is that the background portion that is more solid will be its own image that will tile, while the bottom part with the ragged edge will be a single, non-tiling image.  To accommodate this, all of the actual content of the search form (the <label> <input type="text"> and the <input type="image">) is contained within its own <div> that will have the tiling background.  A separate <div> (the one with the class="btm") is placed just below that, which will be styled to show just the ragged edge.

Next up, saving the images and writing the CSS.

Enter Photoshop

Photoshop is great.  Saving the first background image (the one that will tile) is easy.  The image is cropped to only have the solid portion, click the Save For Web option in the menu, and you’re done.

The ragged portion at the bottom is a little trickier.  We want the ragged edge to be able to move down the page as this search widget area lengthens.  If we simply cropped the image with the page background behind it, then when it moved it would eventually show the crop line.  Nope, instead we’re going to erase around the ragged edge of the image to make it transparent, and then save it as a GIF.  Don’t worry about being too exact; a surprisingly large amount of visual effects on the web rely on your eye automatically blending like-colored and blurred areas together on screen and other visual tricks:

The CSS

Now that the images have been cropped, edited, saved, and uploaded correctly, we’ll write in some simple CSS to make everything come together.  The following is entered into the stlyesheet I have connected to my site that defines the visual composition:

1. /* Search Form */
2. #searchform div {
3. background: url(../images/bkgrd_search.jpg) repeat-y;
4. padding: 0 12px 0 7px;
5. }
6. #searchform div.right {
7. background: none;
8. padding: 0;
9. }
10. #searchform div.btm {
11. background: url(../images/bkgrd_search_btm.gif) no-repeat;
12. height: 18px;
13. }
14. #searchform input#s {
15. border: solid 1px #A5ACB2;
16. margin: 12px 0 6px 0;
17. width: 100%;
18. }

I quick run-through on what the code is doing here.

• #searchform div assigns the background to the <div> containing all the form elements, tiling by default.  Since this is assigned to all <div> tags within the <form>, we need:
• #searchform div.right.  This excludes the <div> that aligns the search button to the right from tiling the background image again.
• #searchform div.btm edits the “empty” <div class="btm">.  It tells it to have the ragged edge as a background, to not tile, and to be the exact height of the image.  This is important, because otherwise the <div> would collapse since it contains nothing inside it.
• #searchform input#s just contains some simple styling for the search box.

That’s it; we’re done!

Going Further

Next time up: the RSS portion.  It’s a bit more complicated, but luckily it involes jQuery, which makes it extremely easy.  Until then…