Neatly Sliced

I initially started my Facebook account because I was working tech support at the college and a student needed help linking Facebook to his school email. I walked through the steps with my own address; lo and behold, a Facebook account was born.

I dabbled with it here and there, the hot wastes of time that it is. With the advent of Beacon and its intrusive nature, I seriously began to consider deactivating my account. I did not take action until reading The Anonymity Experiment - one week experiment with the notions of conspiracy theorists and their guidebook to keeping under the radar.

In Facebook’s “My Account” page, you can choose to deactivate your account. Click first screenshot here to view the form (along with my diatribe to Facebook), but note two features of this form. First, every option to deactivate your account pops up a corresponding sales pitch. Wow. Does their revenue really depend on the number of active accounts? Are you trying to guilt me into keeping my account?

Second, and even more important, I must delineate two sub-gripes regarding the fine print of the “Opt Out” checkbox.

1. Sub-gripe a: Why am I checking a box to opt out of maintaining communication with an organization with whom I have deactivated my account? Opt In is the appropriate default: check to Opt In to maintain communication. The very nature of deactivation is a separation of person and application.
2. Sub-gripe b: Facebook is deleting nothing! They are muting my account, not deactivating it. Click thumbnail here for full sized deactivation message. If at any time you say, “hey, you know what, I really screwed up Facebook. I think I’d like to have my account after all. But woe! I have deleted it! All those friends I shall have to re-friend!” You know what I say to that? TOUGH COOKIES! You deactivate your account, you don’t deserve to keep all those friends. Yeah, maybe next time you’ll be more careful when you click that “permanently deactivate my account”.

   Is this what is happening, though? No. Instead, I mute my account, and I just have to log in like normal to access all of my old information.

So deleting isn’t really deleting, so what is deleting? Well, the help section has a handy option, “How do I delete my account?”, which directs us to fill out the contact us form and request an account deletion.

I have filled out such an email, pasted below (along with my diatribe). I will keep you posted on the Facebook account deletion progress. I anticipate no issues, due to previous outcry on the web resulting from the woe of account deletion - I gather Facebook has more or less streamlined the process.

:days pass:

I received a message from Facebook informing me that my profile and account details have been deleted. Moral of the story: deleting your Facebook account is not a big deal anymore. Just use the contact form and they take care of the rest.

Update April 4, 2008 I just discovered that Facebook did not delete my account, rather, they disabled it. Just for fun, I decided to try logging in to see what happens. Much to my chagrin, it was not deleted, but disabled.

See more at the upcoming blog post.

An Event Apart is coming to a town near you! It’s two days of web standards and best practices.

Jeremy Keith is speaking at Chicago’s event. Jeremy Keith rocks - I have learned more about JavaScript and AJAX from Jeremy Keith’s books than I have in all my time coding sites.

Dan Cederholm is also speaking, as well as the event’s co-founders Eric Meyer and Jeffrey Zeldman.

This is a must-see event for fans of A List Apart. Buy your seat soon, early registrants receive a $100 discount!

detergent 2.0
Originally uploaded by neatlysliced.

I saw this and thought, how wild that web 2.0 design trends are bleeding into mainstream marketing.

Recently, A List Apart posted "Multi-Column Layouts Climb Out of the Box", an article featuring the ingenius approach of multi-columns of equal height utilizing borders and negative margins. Read: No JavaScript! This is a perfect approach if you wish a sidebar of a single color. However, what if you wish for a border between content and sidebar? You have already used the border CSS property, so how could one accomplish this look?

The answer, although not utilizing ideal semantic design in the XHTML tree, resides in a nested div in the main content column.

View it in action!
I always name my sidebar div id "secondary-content" and my main content div id "primary-content". To create this effect, I created an id "primary-content-inner" inside #primary-content.

The thick border and margin-left styles are applied to #primary-content. However, the margin-left negative margin must increase by the width of the additional thin border (the black border in my example). In like manner, the width of #primary-content-inner must be reduced by the width of the additional border. #primary-content-inner carries the style for the additional thin border (as border-left here).
You also must apply the thin additional border to #secondary-content - a border-right in my example. You must add it here in case the sidebar is longer than #primary-content.
The only catch I could discern is that you must set your p tags to margin-bottom:0;. If anything inside #primary-content-inner has a margin-bottom, the thin border will not extend to the bottom of #primary-content, as the margins are outside of the borders. In effect, you will be making #primary-content larger than #primary-content-inner by the height of the margin-bottom of the last element, and thus your borders will not align.

The CSS:

The HTML:

PLAIN TEXT
HTML:




<div id="container">


   <div id="primary-content">


      <div id="primary-content-inner">


         Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


      </div><!-- /primary-content-inner -->


   </div><!-- /primary-content -->


   <div id="secondary-content">


      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


   </div><!-- /secondary-content -->


</div><!-- /container --> 

View it in action!

I was admiring the CSS for the section headings on BuzzFeed, although I do not necessarily love the content of the site (no offense, just not my thing).
View it in action.

The method to overlay the captions is alarmingly simple. Essentially, the image and caption are contained in a div, and corresponding classes are applied to the nested elements. The caption has styling featuring a negative margin-top to pull the caption up, thus making an overlay. BuzzFeed overkills the divs and puts the caption and image in their own subsequent nested divs when they could merely apply classes to the corresponding < a > tags. I will explain my modified method.

The HTML:

PLAIN TEXT
HTML:




<div class="image-unit">


   <a class="image" href="#">


      <img width="125" height="127" alt="Yum!" src="http://blog.neatlysliced.com/orangeslice.jpg" />


   </a>


   <a class="num-links" href="#">9 Links</a>


</div> 

The CSS:

(I'll comment explanations on pertinent lines)

.image-unit is your block that contains both the image and the caption.

The .image class is applied to the link that wraps around the image.

a.num-links refers to the link that contains the caption overlay. The link should match whatever link the image has, so that the whole block functions as one linking entity.

A cool-looking effect that it not very difficult to pull off. I often wish that more designers knew the capabilities of CSS so that they could incorporate these cool, simple effects in their designs.

View it in action.

If you notice any errors, amendments, or improvements, please leave a comment for the betterment of web development.

Utom Box created the most beautiful Web 2.0 icons. I have implemented a few of them in this site. There is currently no Digg icon, but one of the icons provided by Digg looks Web 2.0 enough to match.

I also started using FeedBurner for my RSS feed. I was confused regarding FeedBurner before. I had thought that it was automagically creating its own feed. In reality, FeedBurner takes the feed that your blog already generates and processes it all fancylike. For example, with FeedBurner I have added the feature to "Email This", "Save to del.icio.us", or "Digg This" right in the RSS feed itself. Additionally, I can derive other statistics regarding the feed. As the user, you receive no significant additional benefit other than the "Email This" and bookmarking links.

One day I will change .htaccess so that the old feed automatically rewrites to the FeedBurner feed, per the instructions in this "Using FeedBurner" WP post. In the meantime, update the feed at your discretion - it makes little difference to me.

I'm not being arrogant, but I'm great at XHTML and CSS. What I'm not great at is the visual design.

I want to redo my site, but I need a designer to make the look and feel of my site. Then I can code it.

Don't get me wrong, I love my watermelon layout. I just want something that I made from scratch and not something I pulled from the WordPress theme machine and had to go in and fix to make the CSS valid.

So, all you designers-but-not-coders out there, if you're looking for a bit of pro bono or portfolio building work, I need your help! Let's work together and make something beautiful.