One thing that has always impressed me with websites is how they present you with the most important information when you login. This could be a deadline, some updates from other users, or just general announcements.

Some of the sites I use at work and on a personal level are perfect examples, GitHub and Basecamp.

But how is this technically feasible? Sure, you are probably thinking just gather all the data you need and loop through it. Right? No, I will explain why. I didn’t understand this for the longest time, and I hope to help solve any your questions about using them.

With Garrett and Larry both having many comments, messages and connections, we already have the data we need.

Problem is we need to sort them accordingly (by date) and keep all associations tied. It is harder than it sounds.

In this case we have 3 datasets, some comments, some messages and some connections. If we were to put all 3 collections in a list in order of when we gather them, they will be out of order. What we need to do is make one collection that references any type of data we need to list out. What makes this useful is we can also track other information that is helpful to users and not possible if we loop through the actual data. That is what a Polymorphic Association is.

Within the Feed model we need to keep track of the model it will reference, the actual reference to the specific item within that model, and any other information you would like to have. I like to keep track of it’s action, as well as the user who performed that action.

How would this look like in the database?

For this example I will use Ruby to try to show you how easy it is to display a dashboard like interface for your users.

Within the view you can loop and render a custom template for each item, this will give you the desired look that simulates the dashboard feel.

I am going to leave this here, you can create the views however you want. I have this repo stored on GitHub so you can clone it and mess with it however you like. I have uploaded a demo on Heroku for you to see as well.

We have recently been using Cufón on some of our recent projects, most noticeably version 3 of our own site as well as Mering Carson, replacing sIFR which worked but was resource heavy as well as a cumbersome task of creating fonts.

This has opened a lot of creative freedom for our creatives, knowing they can use a font and to see it exactly the same from design in comparison to the build. I would have to say this makes Jeff’s and Demetre’s job a lot easier.

The nice thing about Cufón is it’s still SEO friendly as well as very lightweight compared to the flash solution that has been the de-facto method of typography treatment for the web, sIFR.

One downfall of Cufón is you can’t select text, although sometimes you get lucky, it just isn’t supported. You might be thinking, oh no?! But hopefully in later builds this won’t be a problem, and it will be the most “usable” solution. What are your thoughts?

This week I found a gem (literally) called glTail, it’s a log file visualizer using the tail command. All you need is Ruby and RubyGems. If you don’t have either of those (Ruby or RubyGems), follow this tutorial first.

Read the rest of this entry »

Lets say, you are making a site, were everything is AJAX, and you rely on event handlers to know when people double click on this element, drag the image across the site, etc. Normally you would start listening to things once the DOM fires (when the page loads), but problem is, it only fires once.

Here is an example of a normal “onload” listener in Prototype.js:

Event.observe(window, 'load', function () {
$$('tr[rel="file"]').each(function(element) {
element.observe('click', function(event) {

new Ajax.Request('file_info.php', {
asynchronous: true,
method: 'get',
parameters: 'ajax=true',
onComplete: function(t) {
$('files').update(t.responseText);
}
});
event.stop();
});
});
});

So, once the window loads, tell every table row with the rel attribute named “file” to some things once its clicked (in this case, gets the file info). Problem is, with all the new table rows coming in, Prototype wasn’t told to listen to the new table rows, only the previous ones that are gone.
Read the rest of this entry »

I was wrapping up on a project, and the time came where the color on the lists (1, 2, 3) needed to be different colors than the actual <li> inside needed to be. The only solution is to wrap any content inside the <li> with some sort of tag to target the text to change the color. Although that has no problem at all, what if this needs to be site wide? It will be very cumbersome to remember, let alone do it to every list you create.

I decided to use JavaScript to search for every <ol> and for every <li> inside of it, then it goes ahead and wraps it in the selector that changes it back to default color. In this case its a <span>.

This is what it does, this will be the before HTML:

<ol>
   <li>Item text goes here</li>
   <li>Item text goes here</li>
   <li>Item text goes here</li>
   <li>Item text goes here</li>
</ol>

And, after the JavaScript does its thing:

<ol>
   <li><span>Item text goes here</span></li>
   <li><span>Item text goes here</span></li>
   <li><span>Item text goes here</span></li>
   <li><span>Item text goes here</span></li>
</ol>

Here is the JavaScript:

window.onload = function () {
   var li = document.getElementsByTagName('ol');
   for(i=0;i<li.length;i++) {
      if(li[i].childNodes[1].nodeName == 'LI') {
         var li_count = li[i].childNodes.length;
         for(b=0;b<li_count;b++) {
            li[i].childNodes[b].innerHTML = '<span>'+li[i].childNodes[b].innerHTML+'</span>';
         }
      }
   }
};

Here is the CSS:

.container ol {
	padding: 8px 10px 8px 25px;
	list-style-type: decimal;
	color: #c19203;
	font-weight: bold;
	}
	.container li {
		padding: 4px 0;
		}
	.container ol span {
		font-weight: normal;
		color: #333;
		}

Continuing on what Mark started, I will explain how I do my email.

Mail is usually always open whenever I am here at the office, at home doing my own things, or on the iPhone. It’s hard to not be able to reach me. To be able to do this efficiently though, I setup IMAP on my email accounts rather than POP. IMAP allows me to be able to read a email on the go and mark anything I read as read, so later on in the evening everything I just read is marked as read so I don’t have to go through them all again. Same goes with deleting.

If I ever see a email in there, it bugs me not to look at it. I don’t do anything special with organizing my email, although I probably should. I just have a inbox for each of my accounts; BKWLD, .Mac, and my personal email.

One thing I tend not to do is delete email (other than spam of course), if I ever need to go back and look through my email I can. Although now with Time Machine, I can probably get away with it. If you have any suggestions, let me know.

Facebook back in August, let super secret code out. Which made its rounds on the internet before it has now died down. Due to the fact that, a extremely large social network, let out it’s source code opened the alley for media to scrutinize Facebook.

Due to the code being leaked, a PHP developer wrote a article about securing your site, making sure no valuable code is leaked.

I suggest reading up on this, as any practice that secures your code, is a practice you should know.