While finishing up a project over the weekend I ran into an issue where the video player just displayed an infinite loading screen rather than actually playing. Odd. I checked the JavaScript console to see if there were any JavaScript errors or if there was a 404 request for the video, which neither of those were actually the case. I tried to visit the file directly, and what do you know, it’s asking me to download the video, it didn’t start playing in the browser like it should’ve. After realizing the only reason this would happen would be because the server must not be returning the correct Content-Type header and the browser didn’t know what to do with it, I gathered the MIME types for the few videos formats we were using and updated the nginx mime.types file and restarted the server. What do you know, that solved the problem and after refreshing it displayed the video and it played as expected. So to help anyone else who may have ran into this issue and not really sure what to do, I have both the nginx and Apache solutions for you. Hopefully soon all web servers include these new MIME types to their default configuration files, but until then be sure to include these in your server setups for future projects.

nginx

Apache

While working on a client project today, I decided to add some nice CSS transforms to add a richer experience for those who choose to use one of the more up to date browsers (Safari, Chrome, Firefox 4). I chose to use the hardware accelerated 3D transforms for both Safari and Chrome, and the standard 2D for Firefox 4. Only to be stumped as whenever the animations started to take place, the header and footer for the site would flicker like a broken down TV throughout the animation until it was done in Safari, but not in Chrome. Not cool. So the first thing I did was search Google for an answer, clicking right away on the first Stack Overflow post I saw.

The first answer seemed like the wrong approach, having to add -webkit-transform-style: preserve-3d to every element and having the browser transform all the elements to a 3D state which would seemingly add more work for the browser. Not good, next answer.

The next answer was thought out more and seemed a bit more logical. Although for my build, both the header and footer have a fixed position. Header to the top, footer to the bottom, both of them pinned to the full width of the browser, no wider so it didn’t make sense as to why it was still flickering when the answer said it will happen if the elements are wider than the window itself.

The first approach I took was just to take out the header and footer CSS to see if it’d still flicker. It stopped! So something within the CSS must be causing this. I added the styles back in and only kept the styles for the actual wrapper for both the header and footer, still no flickering, so I was on the right path. After adding all the CSS back in and digging some more, I noticed the navigation, logo and some footer links had text-indent: -999em;. Taking this out preserved the header and footer completely during the animation and had no flickering. So I found the problem, the text itself was adding onto the headers width in the browsers eyes.

In the end, the simple fix was to add span tags around the text that I was negative indenting and hide that specifically rather than using text-indent all together. You probably wonder why I go into great depth on such a simple problem, but this has happened to be quite a few times before, and it is great relief that I know now what was causing it and how to fix it. I hope anyone who has had this problem before or are currently dealing with it find this article so you can move forward in your development and keep on making awesome things.

I’ve created a simple example for you to check out and see what happens. Simply roll over the rounded square in the middle of the page and let the flickering begin. Remember, only for Safari does this happen.

Another thing to keep in mind, is it also only happens if you have z-index on the parent element where the text is overflowing. I created another example to demonstrate this, the only difference between the 2 examples is this one doesn’t set a z-index on the header, which prevents it from flickering. Although for this build, heavy z-indexing is required.

For an internal project I am working on I need the ability to set environment specific configuration settings, and I’d rather not set them with a file full of constants. So I came up with a way to have a simple YAML file for configuration, and then an initializer to load it and apply it to a single constant being Setting.

Just copy the settings.yml file to config/settings.yml, then copy the settings.rb file to config/initializers/settings.rb. Once you’ve done that, restart your server and you’ll have access to all your settings.

You have your default configuration that you setup, then all your environments listed below that override any settings set in defaults. You’ll also need to create additional environment keys for any for other environments you may have.

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.