
Image via Wikipedia
to my old friend Jason Derifaj (DARE – A – FAY – you’re welcome). He’s got a great looking site here he just revamped and you may want to keep an eye on his blog as well. Fun stuff for web peeps and fans of web peeps – if fans of web peeps exist. If you’re looking for help with your javascript and/or Flash coding, do yourself a favor and give Jason a shout. Or just call us and we’ll put all of you talented people together to do something really cool.
Disclaimer: Do not use a javascript hack to fix each browser rather than adjusting your style sheets or using a reset style sheet first to solve the big stuff. This is last resort stuff here.
I managed to find a way to have Chrome show styles only set for Internet Explorer. Don’t ask me how but it has something to do with pulling Twitter updates via a js file into a custom WordPress template. The updates themselves already have styles attached to them before I pull them in so I have to undo/override them on my side.
This worked for all browsers using a conditional statement for IE and that straightened it all out – except Chrome. I know what you’re thinking. It can’t be broken in Chrome if it works in Safari. They’re both based on Webkit so they have to obey the same rules. Well, I found one they don’t agree on.
Anyway, here’s a last resort solution for you that will target any browser you want to via the style sheets by just adding the browser name to the selector like .chrome. I was led to the solution via Nathan Rice’s post on the subject but I used the one described in the contents since I couldn’t get his to play nice with the rest of what was going on. Here’s that solution:
Just upload this file to your server, call the script in the header of the page like this:
<script src="css_browser_selector.js" type="text/javascript"></script>
and then just set your trouble maker selectors using the browser name as a class. So let’s say you want links to be red for IE 6, black for Chrome and blue for Firefox 3.5. You’d do this in your style sheet:
.ie7 a { color: red; }
.chrome a { color: black; }
.ff3_5 a { color: blue; }
Pretty snazzy and works like a charm. Again, don’t use unless you have to but it’s great to know this is out there. There are tons more usage examples and all the browser class titles here.
Okay, so that might be the geekiest blog post title ever but I don’t know how else to say it. The situation is this: You have a client and they need to upload an album for download. Whether it’s a paid download or free doesn’t really matter at this point. You’re going to need this process to be as foolproof as possible so you should include both the M3U playlist to cover non-iTunes users and the PLS file format to cover iTunes and Windows Media Player users. This way your end user will be able to click these files and a playlist or album will be created in their software program or the playlist you determine will start to play immediately in their audio program.
You’re going to need to gather some info about your MP3s in order to build these files. Here’s what you need:
- Artist name
- Title of each track
- Length of each track (in seconds – multiply the number of minutes by 60 and add the seconds to it. So 4:22 would be 262 seconds)
- Full file name for each track (ex. Overview.mp3)
Okay so let’s build our files, M3U first. According to Wikipedia, the file starts out like so:
#EXTM3U
#EXTINF:41,Artist Name - Track Title
filename.mp3
So for the additional tracks in this file you just cut and paste the example above (except that opening line (#EXTM3U that tells your software what kind of file it is), the #EXTINF: will stay for all files, the 41 is the track time, artist name, hyphen, track title, line break, filename are all kind of self explanatory. It needs to be in this format including the hyphen and line break. Then skip a line and paste your next one in.
For the PLS file things are pretty similar. Here’s what it looks like for a two track playlist:
[playlist]
File1=01_Overview.mp3
Title1=Overview
Length1=41
File2=02_What_is_Meditation.mp3
Title2=What is Meditation
Length2=287
NumberOfEntries=2
Version=2
So things look pretty similar here. Filename, title, length in seconds. Then you tell how many entries were in the list and it has to be Version=2 for some reason. Again, Wikipedia has the scoop on this but this will get you started. Copy and paste tracks like you did before and duplicate the line breaks like I have here.
Here’s the key to both of these files as far as keeping it simple for your user: Zip all of your files together and include the M3U and PLS file in that zipped directory. Why? I know Wikipedia doesn’t tell you to but the thing is, when your user downloads the files, you don’t really know where they are going to be saved. By zipping the files up, you make sure all the files will be in the same place as your playlist files. So, when the user clicks one of the playlists, the player will look for the files RELATIVE to where your playlists are, and since they’re in the same directory they’ll work correctly :)

I’ve tried a lot of different slideshows to get something super easy to use that didn’t require a ton of backend work to make it fit the site I was working on. This might be the easiest. Simple Javascript file, simple css files and easy to edit the pictures and appearance/size. Here’s where I installed it today: http://www.tennep.com/solar.php

Visit the live project
Using a combination of the client’s current database structure and Google’s robust map application, we pulled their current parking information into a usable format that allows downtown visitors and business to easily see their options. The site was built with PHP, MySQL, Ajax, XML and Google’s Maps API. Total production time was ~90 days and the site generated news coverage on all four evening news shows in Nashville.