Slightly Remarkable

I read. A lot. No, not novels or fiction (and not the dictionary, either). I read a lot of news and blogs. That’s where the everyday content lives; the new and upcoming. It’s a source of ideas and knowledge and insight that can’t be obtained anywhere else. I subscribe to an overwhelming number of sites and (mostly) keep up with them every day. But sometimes, the quality of these sites declines over time.

One such example, which was difficult for me to part with, is CNET News. I started reading CNET News for tech news several years ago, and some of the content is still great (particularly those reviews on home theater systems with video included!), but I’ve grown tired of the excessive amount of useless content that I’m forced to sift through each day.

I feel like CNET has gone overboard with publishing too much content, instead of just the good stuff. I feel like a kid whose Oreos have lost their filling. It gets worse, though. There’s just too much editorial mud-slinging and speculative, biased opining. Why must every news event be a conspiracy? Why are there 8,000 “news” posts on Google Buzz making a few minor adjustments, as if they’re a big deal? (For the record, I know business owners who’ve begun using Google Buzz over other products because they are integrated into GMail and other Google Services, making their content distribution streamlined and simple; and this is what Twitter and similar networking services have missed: they’re too isolated. Google wins, again.)

All right. The rambling is over for now, folks. But if you’re out there and you’re a content provider — blogger, news site, whatever — please, please don’t just throw content at your readers, because you’ll lose them. And if you fill a niche for conspiracy theories and government cover-ups, that’s fine, but if your purpose is to report the news as it happened, then please, do just that, and skip all the garbage. It’s frustrating.

In 2005, well-known designer Jonathan Snook built a floating comment form into his blog design using CSS. (Editor’s note: the archives at Snook’s Web site say “2006,” but I am fairly certain that this actually occurred in May of 2005. If you have the facts, please let me know in the comments.) Unfortunately, because Snook has redesigned his blog several times since then, you can no longer see this functionality in action. The short version: his old design had an empty sidebar, where a comment form floated and could easily be used to add comments without needing to scroll to the bottom of the page. Convenient, stylish, effective, and you might even say revolutionary. I do not know why Snook has not opted to maintain this feature on his blog — perhaps it was too much of a struggle to maintain, or maybe he didn’t plan for it.

And that’s just the thing: planning a design is a critical part of developing how visitors will interact with it. If Snook’s current design didn’t have in mind the option to add a floating comment form, then naturally it would not make sense for him to implement such a form — it wouldn’t fit.

Likewise, since I developed this design for Slightly Remarkable several years ago (I can’t nail down the exact date, but it was sometime in 2006), I never considered the option of creating a floating or dockable comment form. Until the other day, when I decided that Snook’s idea was too indespensible to be forgotten like so many over-hyped “web 2.0″ ideas.

Now, let me say that I am not the first to have decided that a full redesign is unnecessary simply for the purpose of implementing a floating comment form feature. In fact, I believe that many feel this way. Derek Featherstone seemed to think so, which is why he wrote about the concept and how he implemented it into his design. Clever, yes?

I thought so, but I didn’t use Featherstone’s CSS/JavaScript. I opted for a slightly different route, requiring significantly less code (very little CSS, a tad JavaScript, and jQuery), excluding the use of the JavaScript library jQuery (which is actually fairly small, and I do intend to use it later — perhaps to include Ajax in my comment form — so it will be handy to have already cached). The script that I have written allows the comment form to appear normally, at the end of the list of comments, for users without JavaScript; for JavaScript users, however, it literally detaches the comment form from the page, hides it, and displays a nice little “Join the conversation” link button that floats in the bottom right-hand corner of the page. I may add icons to it to make it a little more noticeable, but that’s how it is for the time being. Let’s dig in, shall we?

The first step: modifying the comment form.

I am using Wordpress, so I’ll go ahead and show you how to do this using Wordpress. If you use any other software, you’ll have to do a little digging to find out where you can apply this modification — it’s probably fairly easy, though, since it’s very small change. In essence, you need only encapsulate your comment form <form> element in a <div>, and of course give that <div> an id. I called mine remarksform.

In Wordpress, this file is located in your /wp-content/themes/your-theme-name/comments.php file. With minimal PHP knowledge, you should be able to see where to place your <div> tag. I put mine just before the <h3> tag that says “Leave a Remark” and immediately after the closing </form> tag.

That’s all there is to modifying your (x)HTML. Technically, you could even achieve a dockable comment form without doing this, but I find it is a better idea to detach the entire <div> element, instead of just the <form>. Choose your poison.

Here’s an example of what your HTML might look like.

1. <div id="remarksform">
2. <h3 id="respond">Leave a Remark</h3>
3. <form action="http://slightlyremarkable.com/blog/wp-comments-post.php" method="post" id="commentform"><fieldset>
4. <legend>&nbsp;</legend><br><br>
5. <label>Name (required) <input type="text" class="input_text" name="author" id="author" value="" size="22"></label>
6. <label>Email (required) <input type="text" class="input_text" name="email" id="email" value="" size="22"></label>
7. <label>Web site <input type="text" name="url" id="url" class="input_text" value="" size="22"></label>
8. <label>Your remarks<br> <textarea name="comment" id="comment" cols="50" rows="10"></textarea></label>
9. <p class="commentnotes">Note: HTML is allowed. (<strong>&lt;a href=&quot;&quot; title=&quot;&quot;&gt; &lt;abbr title=&quot;&quot;&gt; &lt;acronym title=&quot;&quot;&gt; &lt;b&gt; &lt;blockquote cite=&quot;&quot;&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=&quot;&quot;&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=&quot;&quot;&gt; &lt;strike&gt; &lt;strong&gt; </strong>).</p><br>
10. <label><input name="submit" type="submit" id="submit" value="Submit Comment"></label>
11. <input type="hidden" name="comment_post_ID" value="220" class="hide">
12. <div class="hide"><input type="hidden" id="_wp_unfiltered_html_comment" name="_wp_unfiltered_html_comment" value="279925c214" /></div>
13. </fieldset></form></div>
14. Download this code: formexample.html

The second step: the CSS.

I’m going to outline the CSS that added to my main style.css file. Mileage may vary; you can modify this to your own accord. This may not make sense now, but it will make sense once we get to the meat of the floating comment form feature. For now, create the following CSS (replacing “remarksform” with the id that you gave your comment form <div>).

1. #remarksform {
2. width: 60%;
3. margin: 0 auto;
4. }
5.  
6. #sfloatform {
7. border: solid 1px #333;
8. position: fixed;
9. right: 5px;
10. bottom:0px;
11. background: #000;
12. width: 20%;
13. }
14.  
15. a.flink {
16. padding: 10px;
17. text-decoration: none;
18. color: #999;
19. display: block;
20. text-align: center;
21. }
22.  
23. #remarksform a.flink {
24. display: inline;
25. font-size: small;
26. }
27.  
28. a.flink:hover {
29. color: #fff;
30. font-weight: bold;
31. }
32. Download this code: styleadditions.css

Next up: jQuery

As I mentioned before, we’re going to make all this magic happen in just a few lines of code, but it’s going to be based upon the incredible jQuery JavaScript library, so go download it, and put it on a location on your server that you can access. I put mine in a js subdirectory in my theme directory. It looks like this: /wp-content/themes/slightlyremarkable3/js/jquery.js. Be sure to include this code in the <head> tag of your header.php file in your theme directory. Here’s what it might look like.

<script src="/wp-content/themes/slightlyremarkable3/js/jquery.js" type="text/javascript"></script>

Finally: the real stuff

So now that all the pieces are in place — we have the HTML as we need it, the CSS for styling elements (that don’t even exist — yet!), and the JavaScript library uploaded and in our header — we need to actually write a script that will produce the feature we’re aiming for: the floating comment form.

Create a new JavaScript file — I called my “functs.js,” since I plan to use it for general functionality later in addition to the comment form, but you can calls yours whatever you want. I also placed this file alongside jQuery in my /themes/your-theme-name/js/ directory. Below is the JavaScript file that does all of the magic for my floating comment form. I’ll explain it after you get to see it.

1. $(document).ready(function (){
2. commentform = $("#remarksform");
3.  
4. if(commentform.is("div")){
5.  
6. commentform.css({
7. position: "fixed",
8. width: "40%",
9. left: "59%",
10. bottom: "1%",
11. background: "#000",
12. border: 'solid 1px #333'
13. });
14.  
15. commentform.children("h3").append("<a href=\"#\" class=\"flink\" id=\"sfloatclose\">(Close me)</a>");
16. commentform.hide();
17.  
18. $("BODY").append("<div id=\"sfloatform\"><a href=\"#\" class=\"flink\">Join the conversation!</a></div>");
19.  
20. sfloatform = $("#sfloatform");
21. sfloatclose= $("#sfloatclose");
22.  
23. sfloatform.click(function (){
24. $(this).hide();
25. commentform.show('fast');
26. return false;
27. });
28.  
29. sfloatclose.click(function(){
30. commentform.hide('fast');
31. sfloatform.show();
32. return false;
33. });
34.  
35. }
36. });
37. Download this code: functs.js

All right, so 30-some-odd lines of code. Not bad, huh? Let’s break it down.

Line 1 is your standard “do not execute JavaScript until the DOM has completed loading” command. This is very common and ensures that our elements are in place and actually exist before it attempts to access or otherwise manipulate them. More information about the DOMReady function is available in the jQuery Wiki.

Line 2 declares a variable, called commentform, to reference the <div> element that encapsulates our comment form. Remember earlier I told you that I called mine remarksform; be sure to change this to your <div>’s id, otherwise this will not work.

Line 4 checks to ensure that you are using a <div> element. If you are not, you will need to change this to reflect it. I recommend the <div> for semantics. The reason this line even exists is simple: this <div> element is not present on pages that do not have a comment form — you do not want this code to run on a page that does not have a comment form, so this if statement dictates that the code should only run if your comment form can be found in the (x)HTML code on the current page.

Lines 6-13 apply CSS code to the commentform object. You could alternatively change the class name and apply these CSS rules to your stylesheet (which may be faster, but I haven’t done any testing, since this seems to work fine — anyone that does test it, be sure to let me know what’s better).

Also, notice that one of the CSS rules applied is the position: fixed style. This will not work in browsers that do not support position: fixed. This naturally means that the comment form may be broken or completely unusable in Internet Explorer 6. But, really, who uses that anymore? If it becomes a problem, I’ll update the script later with IE6 support.

Lines 15-16 create a “close me” link and apply it as part of the h3 heading. If you do not have an h3 element titling your form, then you will need to change this to another element above the form that you can attach a “close me” link to. Notice that the “close me” link also has a class called “flink.” You can change this as you please, but remember that you will need to modify your CSS code as well. Line 16 uses the jQuery hide() function to render the comment form (in its entirety) invisible. This is how we have effectively “detached” the entire comment form area from the page.

Line 18 creates a link button that will be used to evoke the comment form. We don’t want to have the comment form floating around on top and in the way of everything, or hogging up screen real-estate unnecessarily, so of course we’re going to have it hidden by default, and then have a pleasant little link button that will bring it up when it’s needed. This is the opposite of the “close me” function. We have appended this link to the end of the body of our document. It has position: fixed already applied because of our CSS rules.

Lines 20-21 declare variables to identify (1) the sfloatform object (the link button we created in line 18) and (2) the sfloatclose object (the “close me” link that we attached to the h3 element earlier).

Lines 23-27 set the onClick event of the sfloatform object (the link button, line 18). Upon clicking the link button, it hides itself, shows the commentform object using jQuery’s default smooth transition (this can be controlled, by the way, and made to appear however you like!), and returns false so that the link doesn’t jump you to the top of the page (because its href is set to “#”).

Lines 29-33 set the onClick event of the sfloatclose object (the “close me” link, line 15). Upon clicking the “close me” button, the entire commentform object is hidden (once again, using jQuery’s default smooth transition, and this is customizable to different kinds of transitions such as fading out), the sfloatform object (link button, line 18) is once again revealed, and again the function returns false to avoid page-jumping.

Clean up

That’s about all there is to it. Do note that this script probably makes your comment form look terrible in Internet Explorer 6 or earlier, so if you’re aiming to continue supporting older versions of IE6, then the script will require some modifications. I’ll be happy to update the script with an IE6-compatible version if I get enough requests for it. Otherwise, enjoy the script. If you have questions, post a comment (using the notably amazing comment form). I’m also open to suggestions, such as better transitions or other, more intuitive ways of using the floating comment form idea.

Update: Jonathan Snook has imparted his wisdom by confirming April 2005 was when the floating comment form became a reality. Links updated accordingly. Thanks, Jonathan.

Update 2: I booted up VMWare for kicks, popped IE6/WinXP open to see what abomination IE6 has made of my Web site. It’s bad — real bad — but the comment form does actually show up, so besides looking like a pile of crap, the Web site actually works (with JavaScript errors). Well, at least it’s not a big deal at the moment.

Update 3: Ideas for changes to my script follow.

• IE6 support (speak of the devil)
• Class-based link button functionality (any (x)HTML element with a specific class-name will evoke the floating comment form)
• Ajax support
• Replying to specific comments (via Ajax)
• A Wordpress widget/plugin

“It’s quiet. Too quiet.” At least, it has been quiet after my recent re-entry into semi-regular blogging here at Slightly Remarkable. But what has caused such quietness? Certainly I’ve many things to write about, discuss, and share my opinion on. I have unwritten (or barely written) drafted blog entries like “The U.S. Education System: Flaws, Features, and Future” or “Imminent Blog Redesign” or … Oh, that hit a note, didn’t it?

Don’t get too excited because I’ve given you insight into my random ponderings (or that you may see a fresh new look around here sooner or later). I make no promises. They are, after all, drafts!

“But, Jona,” you ask, “why have you been so quiet of late?” The fact of the matter is, I’m finally seeing a number of weeks’ hard labor come to fruition. But we aren’t there yet. I have a number of very, very exciting projects underway. Really cool stuff. Stuff you might find yourself using somewhere down the road. And this stuff all comes under one roof… I’m starting a new company.

Not Again…

Oh yes, again. Remember that silly old start-up that never really got finalized? “Computer Master Minds” was the name. Well, you can forget that less than legendary concept altogether. We’re back, Ryan Gabbard and Jonathan Fenocchi, the dynamic duo, and we’ve got a new name. We’ve got a new look. We’ve got a new direction. And we’re taking the Web 2.0 scene by storm! Look out for announcements here within the coming weeks. I will begin using my blog to provide insight into our processes, procedures, and things that might even help you start your own company. Many exciting things await, and we’re so close I can taste it!! This is the calm before the storm. And the storm is coming… (cue climactic, thematic, dramatic musical finale, etc.)

Yesterday evening, I made some changes to the blog design. They’re not major, by any means, but tweaking the design from time to time really breathes life into the blog itself. It becomes a living creature — one that must be tended to by feeding and grooming.

What changes were made? Well, first, I removed the whole “grunge” theme. It was getting worn out (pardon the expression). I also updated the navigation bar and got rid of that awkward “ghostly” kind of bar. I replaced it with a sleeker bar and changed the hover graphics for the navigation items.

Second, I changed the links. They used to be yellow and would just lose the underline when you put your mouse over them. Now they’re gray and turn a dark red color. This is probably a bad change, but for a few minutes I had a gray/blue theme going. I might change the entire design to blue/black instead of red/black, or maybe blue/white, and keep the design elements similar… The possibilities are endless when you have a design where you can simply replace the graphics files and the entire design transforms. Gotta love that CSS!

Another change I made was the header graphic. I put a couple funky bubbles on the letters “S” and “R.” I don’t know why, but that’s what I did. The way the design works has the added benefit of putting a couple random bubbles along the header (they usually sit behind the search bar on a 1024 × 768 screen).

I have also made some changes today, most notably (and insignificantly at the same time), I removed the quotes around the list of categories at the bottom of each post. So, for example, in this entry, you would normally have seen something like:

In "Site News," "Design," "Blogging."


Now you will see:

In Site News, Design, Blogging.


It’s not much, but something in the way of “change” and “improve” and… er… “ameliorate.” You know, keep moving forward kind of thing… All right, well that will conclude my ranting for today.

Also today I installed Steve Smith of OrderedList.com’s FeedBurner plugin to redirect all my feeds to FeedBurner. It was a simple setup and it’s effective, and lots easier than going and manually setting everything up. Thanks, Steve, for another great plugin to go along with your amazing Wordpress Tiger Admin theme!

Incidentally, has anyone upgraded to Wordpress 2.0 yet? I’m using a very recent version, but I haven’t upgraded to the big “2.0″ yet. I’m thinking I need to wait just a little bit longer for all the plugins to get updated and be compatible with version 2.0, huh? I should really check, because I don’t even know how they revamped the plugin system in 2.0 (or if they have revamped it).

Well, that’s all for now, folks. Toodles!

Update (Thurs. Feb 9th) — As of today, Akismet has caught 205 spam comments!

What FeedBurner Is

FeedBurner is a service. Not a program that you download, but a site you subscribe to, much like Technorati or Bloglines. FeedBurner combines all the RSS and/or Atom feeds your blog has into one feed. When someone, or something, requests this feed, FeedBurner spits out a compatible version.

If you look at my feed in your browser, it appears like any other web page (but with lots of information). This may be the biggest turn-off, since it tends to confuse people, but this page explains how you can utilize an aggregator to subscribe to the feed. Once subscribed, you can open your aggregator to view the latest blog entries from my site. Some aggregators only support specific versions of RSS or Atom, which is why, as I mentioned earlier, FeedBurner is a centralized feed that will automatically convert the feed to a compatible version on-the-fly. This is exceptionally convenient if your blog normally only generates one specific kind of feed and is known as a SmartFeed according to FeedBurner.

What FeedBurner Does

For those of you using a blog system like Wordpress, a number of feeds are generated automatically. This does not, however, eliminate the necessity (or perhaps luxury) of signing up with FeedBurner. In addition to providing a centralized feed, FeedBurner does much more.

As you’ve already seen, my feed is Browser Friendly. Where normally, a feed would appear as an XML document when viewed in the browser, FeedBurner changes the appearance of the feed in the browser to make it easier for one to understand what the page is about. This Browser Friendly setting comes along with a number of options, including three templates (one for podcasts), feed content, and custom information, all of which would be displayed when the feed is viewed in the browser (but not in your aggregator).

Another helpful feature, although I don’t personally use it, is the SmartCast setting, which is for podcasts. This one you’ll need to discover on your own, but it appears to be highly configurable, so if you publish a podcast in addition to text, I’ve no doubt that SmartCast will be a help to you.

Another feature is the Link Splicer. With this setting, you can select from del.icio.us, Furl, or Bloglines Clip Blog, enter your username, and at the end of each day, your bookmarks will appear as a blog entry in the feed (but not on your site). This is really cool, since people won’t have to subscribe to a separate feed anymore to see what you’ve bookmarked each day.

Next in line is the Photo Splicer. This is essentially the same as Link Splicer, except it integrates with services such as Flickr and Buzznet. I’ve no doubt that this is useful for photography blogs.

Other services I won’t go into detail on include the following.

• Geotags: let everyone know where you live.
• Feed Image Burner: more of a self-advertisement, puts a FeedBurner image in your feed.
• Title/Description Burner: lets you customize the title/description of your feed. Useful for bloggers who have no control over this information.
• Convert Format Burner: converts your feed to a specific kind of feed (e.g., RSS 2.0 to RSS 0.92). Careful, this does not work when the SmartFeed feature is active.
• Content-Type Burner: allows you to customize the content-type output of your feed (for advanced users who lack control of their feeds).
• Summary Burner: like the title/description burner, except it allows you to customize the summary of each post, instead of the title/description of the entire feed.

Get the Word Out!

But FeedBurner does more! What else is there? Well, in order for this service to have any practical use, you’ll need some readers. Of course, that means you need to publicize your feed. FeedBurner gives a buttload of options in regard to getting word about your blog out there, and in addition, it gives lots of tips along the way. I’m going to once again list these features concisely, as they aren’t the best part of FeedBurner (we haven’t gotten to that yet).

• BuzzBoost: publish your feed as HTML. Allows you to publish a feed from one site on another site. Helpful for bloggers who have more than one site with related content.
• Headline Animator: an animated GIF image that cycles through your feed’s five most recent items. Great for forums!
• PingShot: notify aggregators when you’ve updated. Useful for those who don’t have customization over what sites are pinged when new entries are published.
• Email Subscriptions powered by FeedBlitz: for people who don’t wish to use an aggregator, they can get an email each time you publish an entry.
• FeedCount: show off how many people are subscribed to your feed with an image (completely customizable).
• Awareness API: external access of traffic data.
• Chicklet Chooser: HTML-generator that creates an image that links to an aggregator and subscribes to your feed.
• Password Protector: for those of you who want a specific audience, you can password protect the feed in order to ensure that only a few users can read it.
• Creative Commons: make sure everyone knows just what they can legally do with your content.

What? Who? When? Where?

Now that you’ve spread the word about your blog, gotten readers to subscribe to your feed, and customized your feed to best suit your readers, you need (or perhaps want) to analyze. Just how many people are subscribed, and what are they subscribed with?

Daily Circulation Trend: the feed circulation feature tells you how many people have subscribed to your feed within the past 24 hours. You can also select “earliest to date” which will bring up a chart and show you trends and so forth. Pretty cool, huh?

Readership: this is my favorite feature of FeedBurner. This feature will show you a pie chart of how many users are subscribed with each aggregator. It’s a beautiful chart, too…

There are more analyzing options available to Pro users, but you’ll have to decide for yourself if those features are worth paying for. Personally, I’m satisfied with what’s free.

But I Want Money!

Finally, there is the last feature I’ll discuss, which is what FeedBurner calls “monetizing” — “a fancy term for adding revenue-generating services to your feed.”

First, FeedBurner can automatically insert your Google Ads between blog entries (or, if you want, between X number of blog entries) for you. All you have to do is have a Google AdSense account, have permission from Google to put ads in your feeds, insert your client ID, and activate the service. Simple, easy, and fast.

The only other way to make money aside from ads would be through Amazon. You can tell FeedBurner to process any catalog links to Amazon and insert your Associates ID.

Whew, finally…

In conclusion, be skeptical of services to filter out the bad or useless ones, but don’t be so critical to the point of never giving the service a chance to begin with. If you’re not sure what a service is, does, or why it exists, search the Web to find an article something like mine. Typically, the site itself does a poor job of conveying what, exactly, their service is and what it does. (Actually, that may be more on the part of the reader, but a second account from some random blog somewhere may help you to understand better — a walk-through of “how to use such-and-such service” is generally most helpful.)

For those of you who signed up because of this tutorial, to try it out and see if you like it, if you’re having problems, don’t forget that you can always “troubleshootize.” And when that doesn’t work, you can, uh, “ask-in-the-forum-ize.” Have fun!

This confuses me since it would appear that the Technorati Weblog is very popular, as the site is very popular. To give you an idea of how shocked I was, let me point out an interesting contrast…

Go ahead, check for yourself. If only I could turn that into real money, I’d be set.

At first I thought, “Well perhaps it’s due to the fact that the Technorati Weblog is part of Technorati and therefore few individuals blog about it.” However, this blog entry is about it, and it looks like many other blog entries are about it, too. Maybe the Technorati Weblog is excluded from the calculation for some reason, since it appears that many other weblogs are allegedly worth tens of thousands of dollars.

So, how much is your blog worth?

It’s nice to be noticed. :)

There were some pretty cool shirts, though I’d heard most of them. The winner goes to Bob for his fairly long list of shirts (kudos on having so many, by the way) — a couple of them I’d never heard of before. The one that really got me was, “There’s no place like 127.0.0.1.” Way to go, Bob!

I’m going to change the rules a little. Since only continuing the meme by selecting a winner would cause the meme to quickly die (Bob has a lot of the same readers as I do, myself included, I’m sure), I’m going to let anyone pick this up and post it on their blog. Get your readers to let you know about the awesome apparel they wear, and be sure to let me know when you pass it on!