The Design
First of all I have to say I’m in love with the design of the muxtape site as a whole. Ever since I visited the homepage to set up my account I knew this was going to be a solid app. Isn’t it funny how much design influences everyone?

Managing Your Playlist and Music
Besides the deisgn as a whole being very clean and easy to read, I’m very impressed with the amount of time spent on the user interface of the member sections. Uploading songs is fast and easy, and is even ajax assisted so you don’t get worried if your file is truly uploading or not. Same with the organization of your playlist. You can drag and drop songs around to dynamically manage the order of your playlist!

The Playlist “Itself”
Finally the actual playlist you can visit and play from any browser that supports javascript and flash is not lacking in either design or user interface. First of all, I love the deisgn with the big fonts for artists and song names. Secondly it doesn’t get much easier than clicking on a song to start playing, and clicking again to stop. The playlist will continue playing in order until it reaches the end without you touching a thing!

Lacking Features?
Lastly there are a couple things in my review that I noticed when I was playing around with my muxtape. I can’t complain about the member back-end section, but I do wish there were a “stop” or back to beginning feature to the playlist itself. There have been a couple times when I’ve just wanted a little slider to drag to a different section of the song. I’m hoping this is a feature that is in development or future development of muxtape.

Closing Thoughts
All-in-all muxtape to me feels like a pretty good web application that tons of people can enjoy, and continue to enjoy in the future, especially since your playlists are not permanent in the sense that you can remove songs and add new ones later on! I’d recommend muxtape to all music lovers out there on the web; go ahead and set yourself up with an account and play around.

Check out my muxtape: Josh Mosh
Mixtape with Fluidapp: Muxtape+Fluid=Coverflow

Just in-case your wondering, the Virtual Haircut is an audio piece put together to make you feel like your in a real environment using only audio. The piece is intended for headphones use, and I promise you will not get the same effect without headphones. So if you decide to check it out please promise me you’ll at least use headphones the first time around. Feel free to experiment with surround sound and all the stuff later, but please don’t ruin the first preview.

If you check it out I want to hear what you guys think, and your reactions. Personally I kept looking around the room cause I thought someone was in my room with me.

I know its not much, but I got a little chuckle out of it… So I thought I’d share it with everyone who spends time reading my blogs.

There you go! Anyone else have a “funny” person in their neighborhood?

If don’t know, or haven’t noticed by the topics I talk about, I’m very much intrigued with web 2.0 culture. Not only is the design of the web becoming nicer and more platform friendly, but website are much more dynamic than before as well. In fact, I think if there is a web 3.0 culture, it will be focused much more on databasing techniques backing the web as we know it.

With that said, in my opinion, I feel like web 2.0 has sparked browser developers like Apple, Microsoft, and Mozilla to look into the future of web development, and start accounting for new technologies. Just take a look at the improvements that Internet Explorer 8 will offer for the windows platform when it is out of beta. Same with Safari 3 pushing for CSS3 support as well. Not only is Apple and Microsoft making their mark, Mozilla has been working on the much awaited FireFox 3 browser. Rumors say it performs faster than Safari 3 does on a Mac; that’s incredible! Not only is it rumored to run much, much faster, but it also has many fixes such as memory leaks. After reading about FireFox 3 coming to it’s final stages of beta, I though I’d download it and test it myself.

After downloading, and installing, I started browsing the web with FireFox 3, and yes, I did notice much faster speeds than Safari. I also noticed that most of my add-ons worked completely fine in the new version on FireFox 3 as well. I thought that was pretty impressive since the platform was basically restructured from the ground up. Not to mention, Mozilla did a great job “re-skinning” the browser to make it feel like it “belonged” with MacOSX now! I know what your thinking, this is too good to be true. But after the “playing around” stages were over, I noticed something with the new FireFox 3 toolbar that kind of disappointed me…

Like I said, being a web developer I notice much more “quirks” with browsers than most people would even think about, thinking about. The new FireFox 3 toolbar has roughly 16 more pixels in height added onto it. I know its not the end of the world, but when you think about it, for a web developer, thats another 16 pixels you have to account for when designing “above the fold.” Lets take a look at the different browser toolbars and compare them.

Safari 3

FireFox 2

FireFox 3 (Beta 5)

Honestly, I know its not really that bad, considering the new FireFox3 toolbar looks much cooler in MacOSX. But did Mozilla really have to make that back button soo big. That alone could be sized down to save those 16 added pixels. But I can’t give them too much criticism yet considering its still beta. For all I know, they have a design team working on new buttons that will save 30 pixels…?

First of all, I’ve been “gone” because I’ve been very busy with school and work this semester. As a matter of fact, I have a presentation and speech due this week for two of my classes that I am taking. I’ve also been working on a few little side projects of mine such as LoveCSS (Will be launching soon), and a website for a friend of mine. Besides school and my personal projects, I’ve been working on 3 big projects at work. Including one I’m very excited about, that will be launching very, very soon!

Third of all, I’ve been trying to get caught up with a lot of people in my life including my friends, and girlfriend. For the past two months I’ve managed my time soooo badly that I haven’t talked to some of my dearest friends for almost two months straight. Don’t get me wrong, I’m not depressed, and I’m not having a breakdown, I just managed my time badly, and by the time I get around to calling someone, its like 2 in the morning.

Last of all, I’ve realized a lot of flaws in my current site design that have made me a little unhappy with the finished product. Part of me doesn’t want to part with the current site design because its so nice, but another part of me wants to take what I’ve learned, an expand on that knowledge. I’ve learned a lot about managing content and being prepared working for visicswire, and I’d really like to apply it to my personal work.

With all of that said, I’m currently looking for some help writing some articles for my delayed project LoveCSS. I’m basically looking for people with the following qualifications:

• A good knowledge of CSS and the theory behind how it works
• Takes great pride in web standards (Gotta keep everything clean!)
• Cross-Browser coding knowledge
• Passionate about Web Development

If you feel like you meet all those qualifications please send me an email and give me your contact info and maybe a link to your site (if you have one). Just in case your wondering, I want this project to be something like Digital Web Magazine in the future. “A great web reference for web developers.”

NOTE: This tutorial is for intermediate jQuery users! This tutorial will not explain how to download, or set up jQuery, it is simply to use for reference when applying jQuery to current projects.

Today I had a JavaScript revelation I guess. For some reason when I was at work I realized the a good way to account for JavaScript on the client side. What I mean by that, is how I handle certain events happening on a webpage that use JavaScript. I’m not recommending the <noscript> tags. I’m actually talking about setting a default link in your html, and overwriting it with jQuery for added usability; And if the user has JavaScript disabled, they get the regular html link.

Lets start off with our regular html link…

<a class="contactme" href="contact.html">Contact Me!</a>

Our goal is when the user clicks, we want to show a hidden div, and if the user has javascript disabled, we will direct them to contact.html.

So after linking jQuery, we need to make a function that will “rewrite” the href part of the link, and onClick of the link will show a div that has our contact information hidden in our layout.

$('contactme').attr("href", "javascript:void(0);");
$('.contactme').click(function(){
$('.contactdiv').show();
});

Its that simple! Basically the attr function in jQuery allows you to modify element attributes on the page. So we select our desired link, and change the href attribute to javascript:void(0); to prevent the page from loading anything. And best of all, if the user has JavaScript disabled, the link still keeps it original contact.html link!

61%How Addicted to Apple Are You?

There you have it… 61% addicted. Let me know how addicted you are!

Click the image above to take the quiz!

For work I need to keep track of how long I spend on certain projects or modules I work on. At first I had a hard time doing this, because I would forget to make notes of when I started and ended work on a project. But thanks to the Daily Grind my problems are all solved!

If you don’t know what the Daily Grind is, it’s a dashboard widget you can download and use to keep track of time. Basically I can hit my dashboard key and set up a new timer, even give it a color for organization, hit the start button and start my work. When I’m finished, I just hit my dashboard button again, and hit the pause key to stop the timer. If needed, I can have multiple timers going. For example: if I have a couple projects, or phone calls I need to keep track of.

Even better, if your a Basecamp user, I recently came across another widget I still need to try out called Sundial. I would guess that I can use the Daily Grind to keep track of my time, then without needing to browse to Basecamp, I could easily enter my info into Sundial, and everything is good to go! All without leaving my dashboard!

NOTE: Sundial does not support Open ID yet. Maybe the next version…

Correction! Thanks to Walker Hamilton I found out a way to use your Open ID with Sundial! First you need to go login to your Basecamp account and click my info up in the top right corner. Once your on the my info page, click “Reveal my special username/password.” It will give you the needed username and password to use Open ID!

First we need to create the favicon file itself. Of course, we can use any image file as our favicon, but the best solution is an actual .ico file. You might be asking why this is; why not just use a PNG or GIF file? Basically ICO files have better support and sweet programs like transmit and other recognize ICO files and put them in your FTP bookmarks!

If your using Photoshop you may notice that you can’t save as ICO by default. To take care of this we need to download a plug-in that extends Photoshop’s saving abilities. Don’t worry if your broke, cause this plug-in is free! Download the plug-in at Telegraphics.

After downloading and installing the plug-in get your favicon file ready. Don’t forget, this image needs to be at 16×16 pixels for optimal usability. You can really have any dimensions you want, but 16×16 works best. Go ahead and save that file somewhere or uploading it to your website root directory, or images directory. To tell the truth, where you save the image is not the important part, we just need to remember the path to the ICO file. Note: Although it doesn’t matter where you put the favicon, placement can be crucial for maximum use. Placing the favicon in the webroot allows programs like RSS readers, and FTP clients to use your favicon for favorite sites.

Now that all the graphic work is done, we need to add two lines of code to the <head> of our HTML.

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

I’m not exactly sure why you need both lines of code, both of the seem almost exactly the same. Anyways, you’ll notice in both lines, you need to specify a path to the ICO file. In this example I’m storing the favicon in the website root. If you want to be a little more organized and put them in another folder, thats completely fine. Just make sure you write the correct path that is relative to the document you are inserting this into.

After you’ve added the two lines, make sure you refresh your browser. Make sure you clear out your browser cache if you need. If your cache isn’t clear, and your positive your path is right, you probably won’t be seeing your favicon.

Have you ever went to some kind of site documentation or API website and noticed they always have really awesome code block with nice color coding and stuff? What if I told you theres a cool little feature built into Textmate that writes that for you? Would you get excited and jump out of your chair? Maybe even leave me a comment? Ok, enough with the small talk, lets take a look at how we can do this.

First things first…
The first thing we need to do is create our sample code or text that we would like to put in our code block ready. This is the text we want to use to inset into our code block.

After we have our code block text ready and formatted the way we like, we need to create a CSS theme for our code. Lucky for us, Textmate can automatically create a CSS stylesheet of our favorite theme without us doing any work. Make sure you select the Textmate package from the drop down, and choose “Create CSS From Current Theme.” This will open another Textmate window with the CSS styles for your Textmate theme. Go ahead and save that somewhere you can link to from the page we’ll be creating soon. I recommend saving it in a CSS folder and naming in textmate.css.

Creating the pre-formatted text.
Now that we have our CSS created and our text ready, we can finally create the actual HTML needed for our code block. Choose the “Create HTML From Document” (or with Line Numbers, your choice) from the Textmate package, and it should open a new Textmate window with the HTML for the text. Unfortunately we need to do a little bit of editing, because this HTML file has all kinds of content we don’t need in it. Go ahead and copy everything from the first <pre> tag until the closing @ tag and paste that into a new Textmate file. Go ahead and save that somewhere for reference.

The busy work is over!
So let’s do a short recap, we have our desired code block text, we’ve “exported” it via Textmate bundle along with the stylesheet. The next thing we need to do is insert that exported text in our code block. Heres what I did…

IMPORTANT: Please make sure that you push your text in the <pre> tags all the way to the left of your text editor. If you fail to do this your text will have irregular spaces. This is caused by the <pre> tag which stands for “pre-formatted.”

Heres the finished product!

NOTE: I limited my div to 450px without overflow, so I get a extra space in between the numbers. You can do some CSS tweaks to fix this!

With that said I would like to say that I will be re-creating the CSS for the site using my newly released css reset that features much greater Internet Explorer support! So all you Internet Explorer users will soon be able to appreciate the site design like the Firefox, Opera, and Safari users on my site now.

I also have recently set up a personal basecamp account (the free one) so I can finally start adding projects and keeping track of them. I really need to get some things in order and planned out, and I think basecamp can help me. Maybe if I enjoy using basecamp for my own personal project I’ll upgrade to the $12 a month package. Is there anyone else out there who enjoys using basecamp as well?

It wasn’t until I was working on a recent project for visicswire that I noticed the previous reset CSS file was lacking in IE6 support. I must have spent hours correcting CSS errors only showing up in IE6. After wasting a whole day or work, including overtime, I realized that I needed to do some major research and build a new CSS reset that went just a step further.

I started out by visiting the Yahoo Developer Network and checking out the CSS framework they have been developing recently. But if you know me, I’m not a big fan of CSS frameworks. So I decided to come up with a new CSS reset based off the Yahoo Developer Network framework and add what I like to call “dynamic typography support.” Its actually not dynamic at all, but I made the typography section of the CSS very easy to customize to your liking. It supports both percents and em’s perfectly; and the math couldn’t be easier.

For example: 100% = 10px, 150% = 15px, 200% = 20px, etc, etc.

And if your an em kinda person (like I am)

1em = 10px, 1.5em = 15px, 2em = 20px, etc, etc.

Anyways, I’ll stop boasting and talking about this new phenomenon that should save you hours of headache, download it already!

Heres a list of some of the software I use for work:

• Adobe Photoshop
• Adobe Illustrator
• Adobe Flash
• Microsoft Office OSX
• Textmate
• Transmit

Heres a list of what I use for myself at home for fun and productivity:

• FlashFXP
• mIRC
• Microsoft Office 2007
• e Text Editor
• RealVNC Enterprise
• Winamp Pro

Finally lets total up the software packages to get an idea of how much money I need to spend on applications to get my work and personal business done.

• Adobe Creative Suite 3 Design Premium: $1800
• Microsoft Office OSX: $130
• Microsoft Office 2007: $130
• Transmit: $18
• FlashFXP: $17
• mIRC: $20
• Textmate: $60
• e Text Editor: $35
• RealVNC Enterprise: $50
• Winamp Pro: $20

Total: $2280!

Keep in mind that my work computer is a MAC and my home computer is a PC, so I need to buy different licenses unless the company offers a different package for both platforms. Other wise I would totally buy 2 licenses of one application and save some money

Let me know how much you spend on software…

After developing sites professionally for about a year now, I decided to compile a list of “must have” plug-ins if you develop sites in Firefox. So lets get on to the list…

Web Developer Toolbar
If your not familiar with the web developer toolbar, I recommend you stop anything you doing right now (including reading this article), and download it now. This toolbar has way too many tools you can use to check your page that your working on. Such as outlining div elements, and tables, and showing layers if there are any divs with z-index applied to them. I use it mostly to disable my Firefox cache so I can keep refreshing the page knowing everything is being reloaded. Of course, this isn’t good for surfing, but it works out great for developing.

Firebug
I can say without a doubt that Firebug is the best Firefox add on ever created. After installing, and enabling Firebug, you’ll have the power to make on-the-fly CSS, HTML, and JavaScript edits to your web pages and see the changes immediately. I love positioning elements on the page and using my arrow keys to move my divs until I get them where I want, then I’ll make the necessary changes to the actual CSS file. This plug-in also shows you if images and PHP include files can’t be found, and will show you where its looking so you can make the necessary changes!

Html Validator
If you take pride in your web sites and want them to validate according to w3c ten this plug-n is for you. Not only can you validate according to w3c, but to html tidy as well! This plug-in displays a red, yellow, or green “X” based on the validation guidelines or html tidy.

ColorZilla
How many times have you been working on sites and wanted to take a color sample? Honestly, I’m always doing this because I can never remember the specific colors I’m using on the site, so I’ll take a color sample of the color I need, and this plug-in displays the HEX Code right in the status bar!

MeasureIt
I can’t tell you how many times I’ve needed to measure out areas on a web page to get the width and height of something. In the past I had to take a screen shot and measure it out in Photoshop, but thanks to this plug-in, and can enable the ruler when needed and take pixel measurements of my web pages!

Hopefully this list inspires some of you to take a couple minutes and install these to make future development much more efficient and easy. The only other plug-in I could see being very useful would be some kind of CSS style dictionary that could give you accurate predictions of performance for a specific browser. So for instance, I could select float, and it would tell me that IE6 doesn’t handle floats well unless the element has display:inline applied to it.

Coming from a Wordpress background myself I remember the days when I could just download a template, upload it, and then activate it. I feel like Textpattern almost “forces” users to come up with more original ideas and publish them. So hopefully this new design is fresh enough that you haven’t seen any others quite like it.

I’ll admit that at first, my intension was to use the Hemingway Wordpress Theme as a reference to the design. If you compare the Hemingway theme to my current design you’ll notice that the only thing the two share are the big horizontal sections. Thats about all I stole from the design, but I didn’t style anything on the page to match anything else, so I don’t feel like stealing is quite the best word.

On another note, if anyone is still interested, I’ve finally started mapping out the design that I want to use for my new project, Love CSS. Shortly after creating the design I’ll be making a couple notes for articles that I want to appear on the site at launch. So if there are any tutorials, questions, or anything that you would like addressed at launch, or shortly after, please make sure you leave a comment or contact me.

I hope everyone enjoys the new design! Happy new year in advance to everyone as well.