Slightly Remarkable

As I’ve mentioned before, I am by no means a psychiatrist (or psychologist, or sociologist, or… well, you get the idea). I don’t even have any formal education in any of these areas. However, I have observed several patterns in social behavior and elected to comment on what I have observed.

Because I am a college student and work at the college, I spend several hours every day on the college campus. As I walk around campus, one of the things that I have noticed is the way girls dress. I don’t want to sound sexist or demeaning, but hear me out.

By my guess, about half of the time the clothes girls wear at the college are fine — I wouldn’t consider them skanky, slutty, or otherwise unnecessarily revealing. (Do I sound like a conservative bigot yet? Just wait, there’s more!) Interesting enough, the ones who dress more appropriately are generally less trendy, stylish, and post-modern. Conversely — and I have noticed this particularly among recent high school graduates — the more trendy girls have a tendency to wear very short shorts (with huge belt buckles), huge sunglasses (indoors!), and shirts that expose their midriffs.

This social behavior isn’t exactly surprising. Some girls dress more nicely, while others dress in a more revealing manner. That’s their decision, and it isn’t my job to tell either of them how they should or should not dress; and besides that, the eye-candy isn’t too bad on campus!

What I have observed that I find one part humorous, one part curious is the tendency that girls who wear shorter shorts or tighter t-shirts to reach behind themselves and tug on their clothing, as if to cover their exposed skin. I find this funny because, well, if you don’t want people staring at your butt or stomach, you should probably wear clothes that actually fit! The curious part is that, despite her supposed modesty (evidenced by her subconsciously realizing she is showing too much skin and trying to cover herself), a trendy girl doesn’t seem willing to give up the way she dresses in order to rectify the bothersome task of frequently tugging on her clothes. Is it simply that they don’t realize it consciously, or are they too determined to show off their goods? Do they feel compelled to adhere to what they consider societal normality? Certainly most of them are not dressing this way because they are, in fact, sluts; if that were the case, they would not react modestly in public by tugging their clothes to hide their exposed skin.

Has society conditioned young girls to treat themselves in a way that they would ordinarily be opposed to so that they can fit in or be more immediately assimilated into society? Is this just the next step of the American cultural evolution that started with flappers in the 1920s nearly a century ago?

This is just one of many social behaviors I’ve observed. There are others, and if you read my pointless musings from time to time, you’re liable to come across more of them. Feel free to discuss your thoughts on this topic in the comments. I’m not seeking an argument, but healthy discussion, so please don’t think that I am saying anything sexist, hateful, demeaning, or otherwise unfair.

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

I don’t know if it’s common knowledge, but I thought I’d share anyway. Several years ago, as Apple was gaining steam in the industry, Steve Jobs presented a keynote speech and cycled through his presentation slides using a small iPod-like device. It sparked a great deal of interest, and if nothing else, the biggest buzz after that keynote was “Will Apple be selling those little iPod remotes?” Of course, the answer turned out to be “Yes.”

Now they’re standard-issue. Apple introduced FrontRow, a sort of full-screen media browser for your Mac. In addition, this program was designed to be operated entirely using the Apple Remote — no mouse, keyboard, or other interface device necessary. It was (and still is) really cool.

Recently, I ordered a brand, spanking new MacBook Pro. (I am incredibly pleased, incidentally, with my $3200 purchase that included the Design Premium edition of Adobe CS4.) When purchasing my MacBook Pro, among many customization options (you know me, going for top-of-the-line stuff, as usual) was the Apple Remote. I chose not to include an Apple Remote with my purchase. My reasoning for this was simply because I could not justify the $20 price tag. Additionally, I didn’t think it would be necessary, since I was purchasing a laptop, not a desktop for multimedia purposes. And it’s only a 15″ screen.

In any case, I am glad I chose not to purchase the Apple Remote. As the owner of a Mac Mini, I already owned an Apple Remote. I know you can pair the Apple Remote with your computer, but what I didn’t realize was that the Apple Remote can operate multiple Macs simultaneously. In other words, I can maintain the same volume ratio on both my laptop and Mac Mini by using one Apple Remote to adjust volume. It’s really convenient to have the Apple Remote functioning on both computers.

I would complain that the Apple Remote is unreasonably expensive, but it seems that under normal circumstances, it’s only a one-time purchase anyway. Thanks again, Apple.

Although I am not exactly a psychiatrist — nor do I claim to be — I do spend a healthy (or unhealthy, depending how you look at it) amount of time meditating on myself in various ways. Searching within myself is often both revealing and enlightening, and I have discovered that, besides getting to know myself better (which, believe it or not, does not exclusively come natural), I am often able to improve who I am based on my findings. And yes, I have done this for a long time. A friend of mine at one point mentioned that my introspectiveness (which she did not see as self-centeredness, thankfully) would eventually dissipate once I “found my place.” I have yet to do so. Perhaps some eventually reach a point in their lives where they are satisfied with who they are, but I can never seem to achieve a level of change that makes me satisfied — each change stimulates more thought and thus more change.

Before you accuse me of egocentrism, allow me point out that Benjamin Franklin was similarly introspective. It’s not self-absorption or self-glorification. It’s an attempt to discover personality flaws, fears, and inadequacies within oneself, and of course, make the necessary lifestyle changes to remedy or eliminate these undesirable (yet natural) traits. It’s self-improvement.

With this in mind, let me tackle a couple of things. First of all, since I began driving several years ago, I have always had a slight precaution with being on the road. I don’t refer to it as a fear, really, because at the time it was a lack of confidence. With time and experience, driving has become second nature. Yet, interestingly, I have come to consider the possibility of an accident a very real fear of mine. The primary reason I now consider it a fear — although, by no means do I allow it to hinder me from driving — is that I frequently dream about getting in a wreck. In fact, I have begun keeping a track of how and when I dream of hitting another vehicle. Typically these dreams are not situations that are particularly dangerous — I dreamed last night that I hit a red truck in a parking lot — but, nevertheless, I have the fear of the event actually taking place in reality.

Having said all that, I am beginning to discover that this fear is merely an effect, not a cause, and may largely be based on my personality and upbringing. I’m not an overtly cautious individual, but I am careful, particularly if dangers are involved. My fear of an accident seems to stem not from the accident itself (although, to be clear, I am not jolted at the idea of being physically harmed in a wreck), but rather it seems to be from an overall fear of making a mistake, which in turn, seems to be directly related to the perfectionist aspect of my personality.

In other words, you might say that because I am a perfectionist, I react cautiously to taking any action that may result in a mistake. If I am unprepared, I see taking such an action as a possible mistake, and since a mistake seems to make me feel greatly disappointed, I always seek preparation prior to implementation. This seems logical and sensical, but the reality is that perfection is not always a possibility, and I have found that very difficult to accept. However, being conscious of the fact has made me realize that I should be prepared not for an action that could potentially result in a mistake, but for a mistake itself.

To be clear, I haven’t nailed down the exact method to qualify whether or not I am, in fact, a perfectionist. I cannot argue that the evidence I gave above indicates that I am a perfectionist, as that would be circular reasoning (these fears are because I am a perfectionist, and I am a perfectionist because of these fears — yes, quite circular). I will say that I have witnessed the personality trait of perfection in my mother, and that even if this is not a genetic quality, having been raised by her would surely affect to what degree I seek perfection (in this case, 100% of the time).  A quick Google search suggests that most people can only pinpoint the effects — not the causes — of perfectionism. However, I seem to meet all the qualifications perfectly.

We’ve all heard the phrase “play to your strengths” before, and that is my intention at this point. If I am indeed a perfectionist by nature, then instead of working to eliminate an entire aspect of my personality (and, by extension, my person), shouldn’t I attempt to channel it in a positive way? I believe that is the case, and since my perfectionism has been very helpful in providing wisdom (or at least avoiding circumstances in which much wisdom would be required) and prognosis, I can’t say that my fear of mistakes or accidents is a really bad quality to have.

Be advised, I’ll be keeping this blog updated with details regarding my nightmares — well, that’s a strong term. Better said, my dreams about making mistakes that result in accidents. My dreams seem to be a manifestation of my fears, after all, as I rarely dream at all otherwise.

Speaking of driving, I have noted a curious change in behavior over the last few weeks. Whereas I used to be the guy in a four-cylinder car driving 90mph on the feeder and taking 45mph turns, I seem to be very content driving at whatever pace the person just ahead of me permits. I find myself no longer complaining when people drive 10 – 20 mph below the speed limit, and instead of going around them, honking, and quite plainly displaying the extent of my American Sign Language vocabulary (which, naturally, consists exclusively of flipping them off), I am content to drive behind them at whatever pace they choose. I haven’t been able to relate this change to anything else, but I have noticed that my frequent and sometimes painful anxiety attacks, which often leave me seeking the nearest restroom, have subsided for the most part. My guess (and I may be wrong) is that I am a calmer individual overall. I may just be familiar and comfortable to a point where I am no longer anxious, or I may be more relaxed for some reason — perhaps a lack of stress. It’s an interesting thought and requires much more investigation, so I’ll leave it open for the time being.

In other news (or, perhaps something remotely interesting to you, as a reader or random Googler), I have made some fairly significant changes to the site. I have upgraded to Wordpress 2.7, which is really shaping up, and installed a few plugins and widgets (specifically, you’ll notice that the Delicious links on the homepage have fully visible comments, and the homepage sidebar includes tweets). I plan on making additional changes sometime soon and separating these longer entries to one side, with the more frequent, techie, and often more interesting posts from Twitter, Facebook, Delicious, and so on. And no, I don’t expect this means a complete redesign, although that may happen sometime in the future. I certainly don’t want to revert to a mostly black-and-white design like most of the more famous bloggers have (for some odd reason — if this is a trend, I can’t wait for it to end, Shaun Inman/Jason Santa Maria/Andy Clarke/others!). I’m not saying it’s ugly, but their older designs were so much cooler, and now it seems they’re just too popular/busy to make their own sites look nice (or maybe they find it frivolous?).

See you next time, my infrequent and possibly non-existent readers. ;-)

Dear Apple Inc.,

You may not know me. In fact, you may not care. But, I am writing to you in hopes that you will share a brief moment of your time to hear a couple thoughts that I have regarding the future of Apple as it relates to the health of figurehead Steve Jobs.

Now, despite having recently become an avid Apple fan and returning customer, I am concerned about the health of CEO and face of Apple Steve Jobs. In specific, though, I am worried about your future as a company. Although Mr. Jobs has allegedly overcome a rare form of pancreatic cancer and is working through a hormonal imbalance that has caused undue weight loss, it is becoming increasingly evident that Mr. Jobs will not — much as we may wish — live forever. The fact that Mr. Jobs’ health is so critical is easily seen when the stock price of Apple sways so quickly based on reports of Mr. Jobs’ health. Of course, I don’t need to tell you that. You already know. Why else would you have attempted to conceal details regarding Mr. Jobs’ health to the best of your ability during his struggle with pancreatic cancer?

In all fairness, I do wish that Mr. Jobs continues living a long and healthy life, but as a man ages, he naturally incurs more health problems as the immune system breaks down and the body wears with age. Since Mr. Jobs is not superhuman — mentally, perhaps, but not physically — we know that eventually his health will be a real issue, an unrecoverable issue, to the point where he must retire. When this circumstance becomes a reality, there is no doubt in my mind that Apple will take a hit from this news. This is inevitable — no one can live up to Mr. Jobs’ name as it stands.

The question now becomes, what can Apple do to make this inevitable event cushioned, less detrimental? My suggestion is to create a new face for Apple, a shift from the face of Jobs to the face of another charismatic, trustworthy, honest, cool dude (after all, that’s what Jobs is, isn’t it?). It may seem too early to reinvent an image that glows so brightly, and indeed you are right. Yet, Apple’s face has Mr. Jobs written all over it, and that face is slowly fading out. Naturally, the way to curb this problem is to nip it in the bud. I recommend that Apple begin moving toward a new face and slowly provide a transition so that faith and credibility — much of which is held by Steve Jobs — are seceded by a successor. Phil Schiller seems to be your worldwide marketing executive and first choice, but now you must qualify him based on his charisma, because for Apple, it is about image. It is about the “cool factor.”

Now, Apple, I must ask you. Who will be the next face of Apple? Will it be Phil Schiller? Please, choose soon. Not only as a customer am I eager to see this new face, but your investors will certainly be uniquely interested in the future of Apple, the success of which is largely attributed directly to Steve Jobs. I don’t think that Apple will continue so strongly without a figurehead, and it would seem your investors agree with me.

To clarify my reason for concern regarding the future of Apple — I think we both know that nothing is written without purpose and intended audience — as a customer, I chiefly enjoy the utility and simplicity of your hardware and software products. Unlike what some may suggest, I have completely switched to Apple products because of their feature set and ease of use. To ensure that I may continue receiving the highest quality products on the market, it is in my best interest to ensure that you, Apple, continue providing them. To that effect, I am seeking your attention, if for a moment, to consider your future and how the decisions you make now will affect your customers later.

Please consider deeply my thoughts on this topic. I don’t expect a response — you may never even see this letter — but I pray for Steve Jobs’ health, and I pray for many more years of the highest quality products Apple has so keenly developed in recent years.

Thank you for your time.

Respectfully,

Jona
Just another blogger at Slightly Remarkable.com, and not simply an Apple fan boy.