Flash, Photoshop and General Web Design Helps

Use a YouTube video thumbnail image in your HTML

December 29, 2010 – 3:00 pm

Today I was working on a project where I wanted to create links to about 20 different YouTube videos. I wanted to use thumbnails images for each video and didn’t really want to create those images myself … because I’m lazy.

I figured YouTube has already created all those thumbnail images for me so why should I create them again? There must be a way to just grab them from YouTube right? Well there is and it’s super easy.

Adding the following URL into your img tag will display the default thumbnail image for the video:

http://img.youtube.com/vi/Video_ID/default.jpg

Just replace “Video_ID” with the actual id of your video and you are all set. You have some flexibility with which thumbnail you display as well.

Here are some examples using Trale Lewous’ Butterfingers Commercial:

http://img.youtube.com/vi/Zp-PX13ZlX8/default.jpg

http://img.youtube.com/vi/Zp-PX13ZlX8/1.jpg

http://img.youtube.com/vi/Zp-PX13ZlX8/2.jpg

http://img.youtube.com/vi/Zp-PX13ZlX8/3.jpg

http://img.youtube.com/vi/Zp-PX13ZlX8/0.jpg

If you are using jQuery there is also a super simple way to pull these in on the jQuery HowTo Blog.

Jesse Harding |

A Startup’s Guide to Branding - Video and Slides

June 12, 2010 – 4:45 pm

Big thanks to Clark over at Mustache Power for shooting video of the LaunchUp 7 talks and getting me the file of my presentation. I synced it up with my slides using Zentation which has a pretty slick interface for side-by-side video and Powerpoint. Enjoy:


Jesse Harding | Also posted in Branding, Speaking Events |

Using a graphics tablet in Photoshop

May 19, 2010 – 8:52 am

jesse1Tonight I will be presenting at the Salt Lake City Adobe User Group on using a graphics tablet to create illustrations and paintings in Photoshop.  This is something I’ve just started to experiment with but I’m having a lot of fun with it and will be sharing some of the tips I’ve picked up.

There are a few files I have available for download that go along with my presentation:

Photoshop Brush Set (35MB) - This is a combination of the BittBox High-Res Watercolor Brush set and some modifications/additions I made.

Shortcuts for Photoshop Illustration - This is a PDF file with some of the keyboard shortcuts that I have found useful while using a graphics tablet.

Also - I’ll be mentioning these two About.com links on graphics tablets:

Before You Buy a Graphics Tablet

Top 10 Pressure-Sensitive Graphics Tablets

Chuck Keeler will also be presenting on using Photoshop and a graphics tablet to paint Google Sketchup models.

If you are interested in attending, there are details here:
http://groups.adobe.com/index.cfm?event=post.display&postid=25978

Jesse Harding | Also posted in Speaking Events |

The Logo Design That Wasn’t

December 10, 2009 – 8:08 pm

northface_logo-1aBeing a designer takes thick skin. You can’t grow so close to your work that you get offended or upset when a design or idea is turned down. I’ve had numerous experiences throughout my career where I thought I had come up with the perfect design, only to be told by the client that for one reason or another the design needed to be changed. I usually find that what I come up with in the end, once I really understand what the client is looking for, is much better than my initial concept.

I’m currently working on some branding and web design for a docmentary about an amazing rescue that took place on the north face of the Grand Teton. The film is titled “North Face 1967″, and I am so excited to be a part of the project.

When we initially started talking about the logo, the client mentioned a concept that I really liked. She thought it would be interesting to see if we could incorporate the mountain peak itself and the path taken by the rescuers, into the logo design. I immediately started sketching up ideas and a day or two later, I had the concept flushed out.  Everyone (including me) loved the design.

However, as the client started thinking about the tone of the film it was decided that something more simple would fit better. I had to agree. While I love the original logo I came up with, it looks more like a clothing brand or ski shop logo, and doesn’t really fit with a documentary film. Instead, we’re going to go with a simple typeface logo and let the pictures and trailer tell the story. I back that decision up 100% and am glad we made it. Even though I like the original logo I did, the client knows the story she is trying to tell and the logo needs to embody that.

Since this logo will never see the light of day, I thought I’d post it here as a reminder that situations like these can teach us to be better designers. Sometimes it’s frustrating to have to start over, but if we internalize everything that we learn, we’ll end up better than when we started and more prepared for the next adventure.

I’m excited to see what we come up with for the logo and website design and I’ll of course be posting that here as soon as it’s online

Jesse Harding | Also posted in Branding, Graphic Design, Portfolio, Random Rants |

Online Code File Comparison with Google Documents

November 21, 2009 – 3:11 pm

Recently I needed to compare two very large code files (1200+ lines) in order to make a few small revisions. At work we use the Tortoise SVN Subversion app for revision control and it makes side-by-side file comparison very easy. However, since I was at home, I had to find another way to do it. I Googled “File Comparison” and got a huge list of different free and non-free apps that I could try. I hate downloading unknown apps especially when I won’t be using them much, because they often come with spy-ware and other garbage. I ended up trying something different and it worked pretty well.

I did my file comparison using Google Docs. I was happy to find another cool way to use Google Docs. Plus this keeps it in the cloud in case I needed to access the file from somewhere else. You can do a simple file comparison using the Revision History tool. Here’s how:

1. Create a new document and paste your old code into it. Save your document:
step1

2. Now delete all the code and paste your new code into the same doc. Save your document again.

3. Go to File >> See Revision History

step2

4. Select the current and the previous versions and click the “Compare Checked” button.

step3

5. Where ever changes have been made, the code from your old file will show up as crossed through and the code from your new file will show up as highlighted.

step4

Now the obvious advantage you have in a real file comparison program like Tortoise is that you can make the changes right in the actual code file. With Google I had to find the changes I was looking for, copy the old content and paste it into the file in the correct place.  Not the most efficient, but it got the job done quickly and kept me from having to download who knows how many free programs to find one that worked right.

Jesse Harding | Also posted in Random Rants, Web App Review |

I’ll be speaking at the SLC Adobe User Group next week on Photoshop Wizardry

September 10, 2009 – 2:20 pm

wizI’ll be speaking at the Salt Lake City Adobe User Group on Wednesday, September 16th. The meeting starts at 6:30 pm. Here is a map to the location.

My presentation is titled Photoshop Wizardry: Tips & tricks for efficient photo editing. I’ll be going over:

  • masks
  • batch editing
  • auto-blend
  • and some other cool Photoshop tricks

This is the same presentation I gave at Photocamp UT earlier this year. Hope to see you there!

Jesse Harding | Also posted in Speaking Events |

Photoshop Tutorial - Change a daytime photo into a nighttime photo

September 3, 2009 – 11:45 pm

Photoshop Tutorial - Change a daytime photo to a nighttime photo

I created this quick tutorial that shows you how to use Photoshop to change a daytime photo into a nighttime photo.

View the tutorial

Jesse Harding | Also posted in Random Rants |

HOW Conference Presentation Slides

July 3, 2009 – 12:15 pm

wwicI’ve (finally) uploaded the PPT deck (in pps format) from my HOW Conference session on “Working with Indecisive Clients”. The slides are pretty simple without much text. I apologize that there aren’t supporting notes for the actual presentation. It was largely improvised based on mental notes from each slide.

These slides use the Powerpoint Push transition as mentioned in my previous blog post. Since each slide is a jpg the pps file size is rather large (~17MB).

Download the PPS file

Enjoy!

Jesse Harding | Also posted in Speaking Events |

Working with Indecisive Clients

June 25, 2009 – 10:39 pm

austintexasI’m currently in Austin, Texas at the HOW Design Conference. It’s been a great time so far and I’m totally looking forward to some more inspirational presentations tomorrow.

I presented on “Working with Indecisive Clients” today and passed out this handout/paper toy. The F’N Lemon thing has to do with a story I told about a friend trying to cut a lemon with the blunt end of a knife.

I got some good comments on my Powerpoint layout/flow. A lot of people wanted to know how I did it, so I thought I’d document it here. I used a PPT technique that I first saw in the book slide:ology called the Push Transition. You can download an example here. By overlapping design elements between the jpgs for your slides, and hooking them together with Push transitions you can create the illusion of a single larger image that is being pushed around on the screen.

I got the idea to do a whole presentation this way from the online presentation app called Prezi. Unfortunately Prezi is an online-only app with no offline mode. Until that changes, the Push transition will have to do for conference talks.

A word of warning; doing a whole presentation (70+ slides) using Push is very time-intensive and also limits your ability to switch slide order at the last minute (which I usually do a lot of). I probably ended up spending over 12 hours gathering artwork and creating the slides (not including writing the presentation itself). Since it’s HOW Conference, which I have wanted to speak at for years, I figured it was time well spent.

If you were at HOW and caught my presentation, I hope you enjoyed it. If you had any further questions, feel free to drop me a line on twitter.

Jesse Harding | Also posted in Speaking Events |

Empty Div Tags Taking Up Space in Internet Explorer

June 8, 2009 – 8:52 am

Recently I ran into a pretty frustrating IE7 bug that had to do with empty div tags. In the web app that I am working on there is some content that is hidden when the module loads, and then is displayed on a button click. An empty div where the content will be displayed is in the code even when the content is hidden … something like this:

<div id=”theHiddenStuff”></div>

In Firefox the empty div does not take up any space in the layout. However, in Internet Explorer the empty div was actually taking up space and throwing the design off. I played a little with the css to try to see what was going on. The obvious answer would have been that the div style had a height set in the css. I got in to remove the height and was disappointed to find that there was no height set on that div id.

Next I did what any professional css designer would do and pulled up Google. I found a lot of people with the same problem, but none of the solutions listed worked for me. There seemed to be everything from padding, to margin to spaces inside the empty div that were causing this in IE. Finally after a little more testing I found the solution.

My solution:
In my situation the problem ended up being that the div id had a width set in the styles. I wasn’t aware that setting a width had an inherent height that came along with it, but that looks to be the case in Internet Explorer 7. Pretty strange if you ask me, but removing the width fixed my issues. After a little more styling to accommodate for the missing width style, everything looked perfect in IE and FF.

If you try this with no success, try removing some other styles from your empty div or check out some of these other solutions.

Jesse Harding |

Div “Tables”: How to stop using tables for grid features

June 2, 2009 – 8:54 am

Broken TableIn the web standards world it’s a general rule that HTML tables should only be used for tabular data.

In this post I am assuming you are already using css (as opposed to tables) for layout. If you are interested in learning how to create table-less layouts, check out this article from A List Apart or read Johnathon Snook’s post.

The question that often pops into my mind as I am designing certain features on a website is, “Is this tabular data?” For example, does a 3 column, 5 row grid of links or a 3×3 grid of partner logos really require that tables be used?

On a recent project I got the opportunity to test out that question and discovered some real benefits to using css rather than tables even in table-like structures. Let me explain the scenario:

I designed a press page for a client that consisted of a logo grid linking to articles that had been written about their product. When I designed this grid I decided that since it was technically tabular data I would use a 3 column table, to display the logos. The product was new, so initially there was not a lot of press (maybe 2 or 3 articles).  As the product began to get more popular, more and more sites were reviewing it and soon there were 10 or 12 logos on the press page. With tables, the easiest way to add a logo to the grid was to add it at the bottom of the table. The problem with that approach is that the newer press items were at the bottom of the page instead of the top where they would be noticed.

As the press list grew, the client asked if there was a way to have the grid start with the newest press logo at the top. Now think for a minute about what you’d need to do to get this to work with tables. You’d have to add a new <td> containing the new press logo to the first <tr>. Now there are 4 columns in that row. So you’d copy the last <td> and paste it in the next <tr>.  You’d then have to do the same thing again. Copy the last <td> in the row, paste it in the next <tr>, all the way to the end of the table.  This could obviously be pretty tedious especially since the client was adding new press logos weekly!

Instead what I chose to do was rip this section out of the table and create a div-based “table”. I simply created a container div and then put each listing in its own div starting with the newest and going down from there. Something like this:

<div id=containerDiv”>
<div class=”pressItem”><a href=”link.html”><img src=”image.gif” /></a></div>
 <div class=”pressItem”><a href=”link.html”><img src=”image.gif” /></a></div>
 <div class=”pressItem”><a href=”link.html”><img src=”image.gif” /></a></div>
 <div class=”pressItem”><a href=”link.html”><img src=”image.gif” /></a></div>
 <div class=”pressItem”><a href=”link.html”><img src=”image.gif” /></a></div>
</div>

I give the containerDiv id a width in my style sheet:

#containerID {width:600px;}

I float the pressItem class left and give it a width as well:

.pressItem {width:200px; float:left;}

Since the container is 600 pixels wide and each press item is 200 pixels wide, the press items will automatically wrap to the next line after every third item.

Now if I want to add a new press item, I simply add a new div to the top of the list and the whole grid rearranges itself accordingly. The process is much easier and the code is much cleaner than it would be with a table.

You could cut the code down even more by removing the press item divs all-together and adding a class to the anchor tag. Since an anchor tag is an inline element, it can’t accept a width style, but you could fix that by doing the following:

a.pressItem {display:block; float:left; width:200px;}

Try it out the next time you need to add a grid to a page. I think you’ll find it is a much cleaner, more flexible and easier maintained way to get the job done.


Jesse Harding |

Most Annoying Internet Explorer Bug Ever: z-index conflict with other positioned elements

May 5, 2009 – 4:34 pm

It’s been quite some time since I blogged. I’ve been super busy on some larger freelance projects that will soon (hopefully) hit my portfolio. At work I’ve been dealing mostly with CSS bugs on our internal web app UI and after knocking out a particularly difficult one this afternoon I decided to share the experience with you, my faithful readers. There is some documentation out there but no “sure-thing” fixes.

In-frame JavaScript pop ups are quite popular these days. Basically these are divs that start out hidden when the page loads but can later be displayed by clicking a button on the page. These may be tool tips, images, forms or other elements that are optional to the usage of the UI.

Many times the z-index attribute of the position style is used to pull these elements to the very front of the screen so they float over the rest of the UI. The problem in IE 6 and 7 (not yet tested in IE8 ) is that if any of the elements underneath the pop up div are positioned relatively or absolutely, they are on their own z-index scale and thus show up on top of your pop up element no matter how high that element’s z-index is.

It’s a real pain to deal with especially because often these pop up elements are added in after the basic UI is created, thus making it hard to simply remove the positioning on the other elements.

Here are a couple of the solutions I found:

  • Remove the positioning and use margins to position. This obviously will not always work without considerable work to get your UI layout looking right again.
  • Set a negative z-index on the elements that are appearing in front of your pop up. Again this isn’t always possible. Often setting a z-index negatively will drop the element underneath the UI itself rendering it completely invisible.
  • Pull the pop up div out of all parent divs and place it at the top of your code. This ensures that there are no other positioning elements that are conflicting with the z-index of your pop up. Again - not always doable.

For my particular situation I had to employ all of these tactics in different spots on the page. It was a brutal couple days of bug fixing and I am glad to be through with it.

I found quite a lot of good info on the subject here:
http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

Jesse Harding | Also posted in Random Rants |

PhotoCamp UT - Photoshop Wizardry - Tips and Tricks for Efficient Photo Editing

March 14, 2009 – 10:45 am

Here is my Powerpoint presentation from my PhotoCamp UT presentation on Photoshop tricks:

You can download the presentation here

Jesse Harding | Also posted in Speaking Events |

University of Utah - Web Design Class

March 5, 2009 – 7:03 pm

Tonight I spoke at the University of Utah on the topic of “Web Design Career Options”.

You can download the Powerpoint presentation here.

Jesse Harding | Also posted in Speaking Events |

Salt Lake City Adobe User Group Meeting

February 18, 2009 – 9:40 am

I’ll be speaking Wednesday night at the local Adobe User Group about Search Engine Optimization. You can get more details on groups.adobe.com

Download the presentation here


Jesse Harding | Also posted in Speaking Events |

Edit Multiple Photos Using Photoshop and Bridge with Batch Processing

January 24, 2009 – 7:21 pm

Edit Multiple Photos with Bath Processing

I created this quick tutorial that shows you how to use batch processing to edit multiple photos.

View the tutorial

Jesse Harding |

Retouch Photos using Auto-Align Layers in Adobe Photoshop

December 5, 2008 – 4:30 pm

Auto Align Layers in Photoshop

I created this quick tutorial that shows you how to use the Auto-Align Layers feature Photoshop (CS3+) to retouch photos.

View the tutorial

Jesse Harding |

Salt Lake City Adobe User Group Meeting

November 18, 2008 – 9:24 am

I’ll be speaking tomorrow night at the local Adobe User Group about how to create a Flash video web site using Adobe Encore. You can get more details here:

http://www.slcadobeug.com/

Jesse Harding | Also posted in Speaking Events |

Menu animations with jQuery

September 22, 2008 – 11:32 am

I just read a really great piece on snook.ca about using jQuery to create menu hover animations. I’m a big fan of jQuery so I figured I would check it out. I was pretty impressed. Take a look at these demos!

Here are the instructions on how to accomplish this effect:

http://snook.ca/archives/javascript/jquery-bg-image-animations/

Jesse Harding | Also posted in Random Rants |

Photoshop or Fireworks?

August 26, 2008 – 4:46 pm

I recently read a really good article/interview about the ongoing debate on which tool is better for web design; Photoshop or Fireworks.

Personally I am a Photoshop guy and have been for over 10 years.  I haven’t really ever given FireWorks a try simply because I can get everything I need done in Photoshop. Still the question remains, what would I gain from switching over to FW?

The main bullets I gathered from the Digital Web Mag article are that Photoshop is probably still better at creating beautiful rich designs, but maybe lacks in speed and image optimization. FireWorks, being specifically tailored to web design has a lot of tools and options that PS does not, and can (possibly) crank out a web site faster.

All in all the article confirmed my belief that Photoshop is the program for me. I consider myself and artist first and web designer second and try to convey that through my designs (when the client allows). FireWorks seems more suited to speed and optimization than art (no offense to artists who like FW).

Take a look at the article and see what you think

photoshop versus fireworks

Jesse Harding | Also posted in Random Rants |

The incredible searchable swf

July 1, 2008 – 6:07 pm

That’s right. Adobe announced today that it is working with Search Engine companies (namely Google and soon Yahoo) to increase the indexability of swf files.

As a Flash designer I am very happy about this. In the past the best option you had in optimizing a swf was to put your text content in a hidden div. That was always somewhat sketchy on the S.E. rules.

Thus this is great news. If I understand right Adobe is working with Google to develop a Flash plugin for the spiders that would reside on Google’s side. The idea being that when the spider hit a swf file it would now understand what to do with it rather than just skipping over it.

With Adobe’s push towards Flash dominance, Flash Video and RIAs, I think this is a very smart move and will end up benefiting designer and end-user alike… oh and Adobe too :-)

Read the full press release >>

Jesse Harding | Also posted in Random Rants |

How to verify that users have the Flash 9 Security Update

June 18, 2008 – 5:49 pm

I mashed up some existing frameworks out there to create an alert that displays on your web site if your visitors don’t have the latest version of the Flash player (9.0.124.0). It is highly recommended that all web users install the latest version of the player due to exploits possible in the previous version.

You can see an example of my alert here.
(for testing purposes I am requiring Flash 11 here so everyone should get the alert for the time being)

Download the files for my script here.

The zip file download has a readme.txt file that explains how to use the script in detail. I’ll give a brief summary here:

My hack uses swfobject and a  jQuery Thickbox together to display a very noticeable alert.

Normally swfobject is great for verifying the most recent version, but considering the urgent nature of this update, I combined it with a  Thickbox as the alert to make sure it is very visible.

The way I did this was somewhat sneaky. Rather than point to the expressInstall.swf file that swfobject usually defaults to when flash is out of date, I pointed to my own thickBoxWarning.swf which uses ExternalInterface to launch the Thickbox.

If for whatever reason you want to go without the Thickbox simply remove the reference to thickBoxWarning.swf in the swfobject code and you’ll get a standard swfobject warning banner at the top of your site.

Here is an example of what that looks like.

Basically all you need to do to use this is place the flashSecurity folder on your server. The paths in these examples assume your flashSecurity folder is in the same folder as your web pages. If this is not the case, you’ll need to update the paths in the code appropriately. You may also need to change the path to the Thickbox window which is set in the included thickBoxWarning.fla file. Add a couple divs to the top of your page (there are examples in the zip) and you are good to go.

This is a very simple but effective way to protect your users and ensure they are aware of the update.

If you have any questions on this email me at jesse AT frogblade.com

Jesse Harding | Also posted in Random Rants |

Launch ThickBox from Flash with AS3

June 13, 2008 – 10:25 am

Just read a great article on DesignFission Blog about how to launch ThickBox from Flash AS2 using the ExternalInterface class. ExternalInterface allows you to interact with external scripts in the browser.

Here’s an example of the code AS3 stylee:

//Import the class
import flash.external.ExternalInterface;

someButton.addEventListener(MouseEvent.MOUSE_UP,function():void {
ExternalInterface.call(”tb_show” , null ,”somePage.html?keepThis=true&TB_iframe=true&height=120&width=250” , false);
}
);

Just change the green text to the code you would put in your href to launch ThickBox and you are good to go. Make sure you are bringing all the necessary ThickBox styles and classes into your page as well.

Read the article

Jesse Harding | Also posted in Random Rants |

Creating a Flash Video Website with Encore

June 7, 2008 – 9:43 am

Here is my TODCon presentation on how to use Encore to create a Flash video web site.

Jesse Harding | Also posted in Speaking Events |

Evernote Text Formatting - adding bullets, bold etc.

June 7, 2008 – 9:29 am

You may have read my “I heart Evernote” post a week or so ago. I’ve had a few people ask about how to do text formatting (i.e. bullets, bold, italic etc.) using the Evernote desktop app. It is possible, just very hidden.

If you double click on the title bar for your note (light blue bar at the top of a note with the title in it), the note pops up in its own Wordpad-esque window that has… you guessed it, a text formatting toolbar.

Now, I’m not quite sure why they didn’t add that in to the main interface. Seems like a logical thing to do. Until that change is made, the feature just a double click away.

Now I still heart Evernote. I mean seriously Evernote and I have taken our relationship to the next level and I can overlook its little flaws like this or the way Evernote makes a choking sound when spitting out its toothpaste or leaves its shoes all over the house. I love it too much to let the little stuff get in the way.

Jesse Harding | Also posted in Random Rants, Web App Review |

Adobe AIR , iframes and cookies

May 28, 2008 – 10:49 am

Adobe AIRUntil yesterday most of my Adobe AIR experimentation had been with Flash and a tiny bit with Flex.

Yesterday I started working with the AIR SDK and playing around with some html AIR apps.

I was happy to find that both iframes and cookies work in AIR. Apparently since AIR uses the Safari WebKit for its browsing engine, anything that would work in WebKit will work in AIR. I even found a couple Adobe posts referencing the use of iframes and cookies so I’ve decided it’s not poor practice.

It seemed almost too easy though. I mean with an iframe you could pull almost anything (cf, php, asp) into your AIR app. Add cookies to the mix (NPI) and you could store data from your app online for later use. It can’t be that simple can it?

Adobe has always touted the benefit of AIR as being able to “use your existing web development skills to create desktop apps”. But for some reason I just thought there would be a catch. I figured you’d have to know some Flex or have some mad JS skills to make anything really cool. But with this new discovery, my mind is racing as to all the cool things that could be done. I don’t even need to learn MXML or figure out how to work with the MySQL lite db that can run inside an AIR app. Sure picking up those skills won’t hurt, but I can actually use my EXISTING skills to build an app!

And that, my friends, is why AIR rocks like nothing else out there. Stay tuned for some Harding AIR apps.

Jesse Harding | Also posted in Random Rants, Web App Review |

ColdFusion 8 wins a 2008 Codie Award!

May 21, 2008 – 2:24 pm

The Software & Information Industry Association has announced the 2008 Codie Awards. Cold Fusion 8 was the winner of the “Best Web Services Solution” category.

It’s great to see ColdFusion get the recognition it deserves as a powerful programming language and web services creator/integrator. As a designer, I’ve always been impressed with how robust cf can be while still remaining simple enough for a “non-programmer” to pick up and run with rather quickly.

Read more here

…and here

Jesse Harding | Also posted in Random Rants, Web App Review |

iStockAudio - Stock Audio Clips

May 20, 2008 – 1:55 pm

Ever since I got hooked on iStockPhoto a few years back, I’ve been wondering when someone would create a similar site for audio (particularly music clips). Sure Flashkit has a kind of similar thing. And there are some great audio clip sites like Beatsuite, but the great thing about iStock has always been great quality community generated content at a reasonable price. I was often heard saying, “Couldn’t someone do the same with audio?” Seriously - like very often. Perhaps daily.

Well folks. It’s been done. And who better to do it than iStock themselves:

http://www.istockphoto.com/audio

Right now they are just requesting audio clips from musicians so the option to search through audio is not yet in the search bar. However, once they get enough clips to be able to produce some accurate results, etc. I am sure this will be a great way to find audio for Flash movies, sites and also video production etc.

Needless to say - I am excited. Soon this whole blog will be laden with techno beats everytime you click or hover over anything. It’s going to be so rad!

Jesse Harding | Also posted in Random Rants |

Install Multiple Versions of IE on the same computer

April 25, 2008 – 4:12 pm

One of the major issues in designing web pages using standards compliant code is browser to browser testing. On a recent project, I was testing in Internet Explorer 7, Firefox, Netscape, Opera and Safari. I thought I had covered my bases.

It turns out Internet Explorer 6 was even worse with styles than IE7, thus much of my site was all freaked out in IE6. So how do you test in both IE6 and IE7?

I searched around and found a lot of cautionary messages saying most of the hacks to do this didn’t work. However, one of my work buddies found a great program. It’s called “Multiple IEs” and as the name implies, it lets you install multiple versions of IE all the way back to IE3!

I think for testing purposes 6 is probably as far back as you need to go unless you have special user scenarios where you know visitors to your site are on ancient machines or traveling through some time warp portal.

There are some features (like bookmarking) that are disabled, but for simple layout and css testing this is the perfect solution:

Install multiple versions of Internet Explorer with Multiple IEs.

Jesse Harding | Also posted in Random Rants |

Highlight or Delete Form Field Data on Click with Javascript

April 21, 2008 – 3:53 pm

Sometimes you want to highlight or delete the value of an HTML form field when a user clicks on it. This is very simple to do using javascript. Just add the following to your input tag:

To Highlight:
onFocus=”this.select()”

To Delete:
onFocus=”this.value=””

Here are examples of how each of these works:

Have fun and be careful!

Jesse Harding |