Anyhow, while deploying a progressive download video for a client I chose to use this latest version of JWPlayer. I ran into an issue where the source file was an mp4 and it was fully downloading before playing, rather than a progressive download (play as it’s downloading). I’ve run into this problem before and luckily it’s an easy fix.

It has to do with the moov atom on an mp4 being placed at the tail end of the video rather than the head of the video. So once you ffmpeg the video into your require h264 specs, you need to run qt-faststart on the video which will relocate the moov atom to the beginning of the video and your problem is fixed. Very simple syntax:

qt-faststart sourceVideo.mp4 finalVideo.mp4

for those who don’t have qt-faststart already installed on their CentOS computer:

shell> svn checkout svn://svn.ffmpeg.org/ffmpeg/trunk ffmpeg
shell> cd ffmpeg/
shell> ./configure
shell> make
shell> make tools/qt-faststart
shell> sudo cp tools/qt-faststart /usr/local/bin/qt-faststart

Thanx to turbolinux blog for the qt-faststart install instructions.

We also will have clients edit their hosts file so they can see new versions of their site before we make any DNS changes.

The hosts file in Windows is located at:

Windows\system32\drivers\etc\

Once you locate the hosts file, right-click on the file and open it in any text editor such as notepad. From here editing it is easy. At the bottom of the file we enter the IP address of our internet connection, followed by the domain we want to to bypass (make sure there is a space or tab between the IP address and the hostname). Repeat for any additional hostnames and we’re done. If you want to temporarily omit an entry without completely deleting it, just ad a # in front of the IP address. The system will simply ignore the entry. Now just save and exit your file and your done. An example entry:

192.168.01.26 www.bashbang.com

On a Windows 7 machine you may not be able to edit the hosts file directly, in which case just simply copy the file temporarily to a different location, edit it there, then copy/overwrite it back to the proper directory.

Just had a small project that required some DVDs converted so they’d work in Movie Maker. It was a bit more challenging than I expected. I just assumed xVid, DivX, or H264 avi files would be imported into Movie Maker. Alas, this is not the case (at least from what I was able to find).

After several attempts at various video and audio codecs I finally got one to work. Here’s the process I used:

bash$> cat VTS_1_1.vod VTS_1_2.vob VTS_1_3.vob > myMovie.vob
bash$> ffmpeg -i myMovie.vob -qscale 7 -vcodec wmv2 -s 720x480 -aspect 4:3 -ab 256k -ar 48000 -vol 400 -async 48000 -ac 2 -acodec pcm_s16le -g 300 myMovie.wmv


** the asspect ratio, resolution and other settings were all defined to use the same specs as the original VOB file.

Sometimes though I’ll see a file and I’m unsure as to why it’s going to be pushed up to the live server. I’m not always the one who’s edited the files so I’d like to see the differences between the live and the dev server. I know looking at the diff in CVS or SVN is one way, but mid deployment sometimes it’s just easier to see the differences between the two files.

So use this to see the differences between a local file and one on a remote server:
ssh user@123.123.123.123 "cat /var/www/html/remote_file_to_compare.php" | diff - "/var/www/html/local_file_to_compare"

** Use the proper IP address and file names of course.

You can add switches to the diff command but this gives you the basic syntax. The nice think about this solution is that it’s transferable to any command. I’m doing a diff here, but you can run any remote server command in this way. For example:
ssh user@123.123.123.123 "free -m"
ssh user@123.123.123.123 "df -h"

This simple trick will save you some time of logging into the server with a new session.

I first attempted to place my html div content on top of the Flash using position: absolute; in my CSS (and of course, position: relative; on the parent div). This worked flawlessly in FF3, FF4, Chrome 11, Opera 11, and IE9 but the Flash content appeared above my html content in Safari 5 and (of course) IE7 and IE8.

To solve this issue I attempted to layer my content using z-index in my CSS, hoping to force the html content to display on top of the Flash, but that didn’t work. It didn’t matter if the Flash was set to a z-index of 0 and the html content was set to 1000, the Flash didn’t want to budge. At this point it seemed a shame to have to do all this the long convoluted way just to support those 3 odd behaving browsers.

Upon a little research, almost everyone who has ran into this particular issue has claimed that Flash will always take priority over any content on your page, but upon stumbling on a page from slightlymore, it appears there is a solution.

Turns out that altering the window mode in your Flash with a paramater of ‘opaque’ allowed the html to sit on top of the Flash quite nicely. Simple.

So what was:
'wmode', 'window',
was changed to:
'wmode', 'opaque',

Doing this made the z-index values in my CSS completely irrelavant, so I removed them. Now all had to do was re-design my current swf so content didn’t reside underneath the html and I was done.

Thanks to Clinton from slightlymore for pointing this out.

We implemented the free Google Site Search function and got it all up and working, then we launched it and upgraded to the premium ad free version for the live site. That all went smoothly until we hit what appeared to be a small problem.

The entire website in question is run over SSL. This means that in certain browsers (Internet Explorer in particular) a warning message pops up when mixed SSL/non-SSL content is displayed on a page. The Google content is non-ssl so we had a problem. Granted, it’s only a warning, but MS has done a good enough job of making the language scary enough that many users will opt not to display the unprotected content…resulting in a blank search results page in our case.

I did a lot of searching around and caused a few additional bald spots on my scalp looking for a fix to the issue. Something you’d expect to be a quick fix isn’t. On the Google Site Search customize section they even provide a HTTPS option for a user to choose. It pulls the required external javascript from HTTPS as it should. After looking at what that file actually does I saw that it generates an iframe that has a hard coded HTTP: within it. I simply downloaded that javascript file (https://www.google.com/afsonline/show_afs_search.js) put it on my site, modified the contents of the file where it shows HTTP: to HTTPS:, changed the call to use my own js file rather than the one from Google, and it’s done and works.

If you want to look at the code on show_afs_search.js you’ll need to read up on how to make the code readable. Start by reading this previous entry I wrote.

No credit to anyone this time…I figured it out all on my own. In case you’re thinking it’s such an obscure problem no one else would ever have the same issue, read here.

Update: I was premature with posting this fix. Although it did work on the results page there seems to be issues when you choose a link from that results page. The href makes a call to javascript that isn’t wrapped within the SSL which then produces a warning. I gave up on it and just went to using CURL to grad the XML data, parsed, styled it then outputted it.

It took some digging and a lot of experimenting, but we finally tracked it down to a line of CSS:
overflow: auto;

When I changed that to overflow: hidden; the problem went away.

I didn’t bother to dig any deeper into the problem or try and figure out the cause of the problem yet…I will when things settle down.

Font embedding is something I haven’t implemented into website development until recently. The main reasons for this was lack of browser support and the preparation and process that goes with making a font work within a website didn’t make it a worthwhile effort, especially when alternative methods of using graphics was satisfactory and gave a consistent cross-browser look.

Fortunately, the guys at Font Squirrel has made this process a bit easier by providing a service that gives us our desired fonts in all the necessary formats required by all the major browsers. With their @font-face Kit Generator, you upload your desired font (make sure it’s properly licensed), and it will spit out a downloadable package that contains your font in all the necessary formats needed plus the @font-face css code needed for implementation.

For example, uploading a font “MyFontFamily.otf” to the generator will result in in a downloadable package containing, “myfontfamily-webfont.eot” (needed for Internet Explorer 4+), “myfontfamily-webfont.svg” (required for iOS 4.2 and under), “myfontfamily-webfont.woff” (IE9+, FF3.6+, Chrome 5+) and “myfontfamily-webfont.ttf” (raw truetype file that works with FF3.5+, Safari 3.1+, Chrome 4.0.249.4+ and Opera 10+). You would then attach the @font-face CSS provided into your site’s CSS file:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

Make sure your fonts are placed and being called from the proper location and declare “font-family: ‘MyFontFamily’;” in your CSS where you want your font to show up. That’s it!

Check it out!

Debby at Hungry Oven needed a magazine style website that covered a great deal of content. She also wanted her staff to be able to have control over the content. We worked closely with her team to develop a WordPress theme that met all of these needs. There were a great deal of customizations done to meet all of the requirements.

I’m looking forward to enrolling my daughter into a class so she can prepare an evening meal once in a while.

Since I always forget and have to look it up each time I figured I’d post this info to my own blog:

– Headline: 25 characters max
– Line 1: 35 characters max
– Line 2: 35 characters max
– Display URL: 35 characters max
– Destination URL: 1024 characters max

Google Source
Google Optimization notes