Spider-ball-vacuum
Posted by Phil on May 10, 2010 under LinkPost, Web Development | 
Be the First to Comment
It’s that time again. The time when I make good on those promises of finally posting all the backed up LinkPosts 
. The first quarter of this year has been fairly amazing, Google has started to include speed in page-ranking, jQuery released 1.4, and css3 is starting to build some serious momentum. There are links to all of that and more in this massive LinkPost
Posted by Phil on October 20, 2008 under Training Sessions | Be the First to Comment
So Branden was asking me this morning for help on acquiring a news video clip from msnbc.com. There are several and many ways one could tackle this issue. He had already aquired the video, but the audio wasn’t coming with it. Now I’m not 100% sure on how he grabbed the video (I didn’t really ask), but I’m thinking he used a screen recorder. That usually works, but sometimes it doesn’t capture the audio, and that can be for a myriad of reasons. So what did I do to aquire the video for him?
1- Go and grab TubeMaster Plus. This is a handy little tool that has a built in browser that lets you surf to a page and then grab any streaming video (complete with audio) from it. While the interface is a bit clunky, it is somewhat intuitive. It also does have a built-in “tutorial” site built into it to help you get started. The biggest help for me was if I had been told it was a stand-alone client, meaning no IE of FF needed, just throw the link on the main page and it will use the internal browser to render the page and aquire the video. Note that the video should come down as an FLV, you can either convert it inside TMPlus, or use your favorite software to do the encoding.
2- Go and get MediaInfo. This is a handy little app that will tell you the bitrate, video resolution, fps, etc of any media file. Open the FLV in MediaInfo and checkout the video bit-rate, the frame-size, and the audio encoding. Generally I leave this window up.
3- Use SUPER to re-encode/transcode the file into a format more suitable for your use. SUPER is a rough program to download, I’m not sure if the authors actually enjoy torture, or just can’t build a web-page to save their own life, so instead of grabbing it at the offical source, grab SUPER from somewhere trustworthy, like AfterDawn.com (yes the site name sounds like it could be naughty, but it’s not, they’ve been on the scene with video encoding since just about the birth of AngelPotion, and if you got that reference, you just gained a little of my respect 
).
4- When SUPER is done encoding, enjoy your video. A simple solution to your video ripping problems.
Other sites/tools you can use to aquire your favorite online videos.
If you need pictures I can create an actual Developer Training (with a minisite), but for now, I’m hoping the text will do. If you have questions or need more examples etc. Leave a comment and I’ll get on it.
Posted by Phil on September 10, 2008 under Web Development | Be the First to Comment
In my efforts to try to post more I have decided to share some tips about a few of the other Firefox add-ons that I find useful.
Today we will be covering:
YSlow is a firebug plug-in that has been created by the Yahoo Developer Network. It’s a relatively simple tool that shows up in your status bar (right next to firebug). It has a little speedometer and “YSlow” next to it. By clicking on it, you activate it’s function, which is to run a short series of tests on the site you are looking or working on. It then loads how long it took to load the page, the file-size, and the grade of the site. It then shows a “report card” on the left of the tool. The report card is broken down into performance areas. clicking on it will let you know what did wrong and give you a link to the Yahoo Developer Network guide to cleaning and speeding up your website. I personally used this yesterday and sped the WebTop up from loading in .5 seconds to .3 second (with and empty cache – .2 with a full one). I also sprited the site and cut off 80k worth of fat. I wouldn’t use this tool everyday, but it is nice to have around when you really want to see how your site performs (there are a ton of other features bundled in this, but for the sake of the post I’ll let you read it at the official YSlow website).
Live HTTP Headers is a great little app for firefox. Similar in nature to both Fiddler2 and httpspy for IE, this allows you to see exactly what is being passed through your browser as well as make small modifications to them and resend the request (remember kids, let’s not be malicious). If you don’t really know what fiddler or httpspy is, you probably won’t understand this tool… but I used it to find the real location of a video file I wanted to download that was being obscured by a flash player, so it can be helpful. Oh and I used it to find out why a page was throwing errors about content loading from both secure and non-secure links (turned out to be a tracking js file… dirty tracking js).
This of course brings us to Tamper Data. This is actually a “ninja approved” tool (meaning it came from ninja, and he uses it). This is perfect for checking values in a form submit in say a shopping cart. We used it to compare the values being sent from a ‘live’ cart, and our ‘dev’ cart. It came in very handy when testing the new HealthRider sight and enabled us to find that part of the cart was being double-html-encoded. Yep we could see that the cart was converting our string into html code (you know like a ‘space’ into a’ %20′), and then encoding that encode again. Very ugly stuff. So if you need to see what a form is really sending and you don’t want to skim through your headers etc. This is a great tool to see whats there. Oh I almost forgot, you can catch a form during submit and change the data on it on-the-fly. So we found the bad encode, switched it with a single-encoded string and viola! it worked.
The last tool XPather is not something that I think most of us here would use. However since jQuery has filters that use XPaths, this is a very helpful too to write some slimmed down jQuery-alized javascript code. This add-on allows you to generate and find XPaths in a document. If you’re a Firefox greasemonkey script writer, this will also come in very handy.
If anyone else has some great tools or add-ons that they’d like to share, throw them in the comments.
Posted by Phil on September 3, 2008 under Web Development | Be the First to Comment
It’s been a while since the last post, but never fear, we just got really busy (ask Dustin about Team Failure…). Anyway, for those on the intranet who have heard of the WebTop, it got a serious upgrade last week (and many serious tune-ups this week). For those of you who haven’t heard of the WebTop, you are in for a real treat. The delightful little web-app is hosted on myboxnumber:81. What does the WebTop do? Let’s take a very brief screenshot tour of the goodness that can be found inside it (it’ll be only a few pics because the webtop *should* be self-explanitory…ish).
(above)This is the WebTop, unless you know what the top nav is for, DONT CLICK IT. It is a “One-Click Regen®” bar. If you need to regenerate the static-homepage of a given site, click there and it will open the static homepage of the logo you clicked in a new window/tab. Also notice the clock in the corner (Dustin requested that ). Oh and in case you’re wondering the blurry on the top right is the news box, it displays a news feed.
(above)This is the menu (notice that it may or may not resembled popular OS interface designs (wink-wink). Also note that as of yesterday the feature of rolling over one of the menu options now enables the sub-menu to appear (Thank Drew for that, before that you had to click).
The webtop was built using jQuery for all the heavy lifting and gimp for the imagry. Note that it is running a ton of pngs, so don’t even try to use IE6 with it. In fact, just dump IE altogether and use Firefox, Safari, or even Chrome (runs it like a champ). If you have any additions, suggestions, comments, or questions please email/IM/comment about it to me so I can implement/answer your changes/questions.
Posted by Phil on July 2, 2008 under Web Development | Read the First Comment
I just thought I’d post a list of the tools that I use whenever I web develop. You may be using some of them, or you might not. Some of them probably don’t even fit under the “web development” category, but that’s the beauty of the DevBlog, I’m just throwing out what I use and you’re free to take it or leave it (also if you have a tool that is awesome that isn’t listed, throw it in the comments).
Browsers:
You can use Firefox as a standalone browser through a usb stick by going to portableapps.com and downloading the standalone version. They have some tutorials there on how to move your profile etc. There are many other good apps there as well.
Browser Specific Plug-ins/Add-ons:
IE:
Safari/any browser:
FireFox:
*Honorable Mention: YSlow is a Yahoo tool that tells you how well your site performs based on speed standards formulated by Yahoo. Since Yahoo was one of the first sites to use sprites for all their images, they may just know what they are talking about. This tool will tell you how long it took to load your page, and grade it. It gives you a ‘report card’ that you can use to make your page better. I don’t use it all the time, but it’s a nice little addition to the portable Firefox3 usb stick I have…
Color/image Tools:
Measuring and Screenshot Tools:
Misc Tools:
Completely unrelated to web developing sites/tools:
That about wraps up the tools that I currently use when developing, but feel free to throw more suggestions in the comments. Who knows, maybe I’ll have to do a follow-up post with all the goodness that gets suggested.
Posted by Phil on June 2, 2008 under PC, Web Development | Read the First Comment
I found a great tool out in the depths of the interweb, and I thought that I’d do a quick-ish post on it so that I can share the happiness with other people. The tool is called IETester, and it is brilliant. It seems to be a mdi container that is hooked into the api’s of IE5.5, 6, 7, and 8 beta 1. This allows you to crack open a tab using each rendering engine and view your websites the way they would look in that browser.
This (above) is a screen shot of the program with the about pop up showing as well as several tabs open (all at nordictrack.com)
NordicTrack in IE 5.5 (above)
NordicTrack in IE 6 (above)
NordicTrack in IE7 (above)
NordicTrack in IE8 (above)
As you can see from the pictures, each release of IE handled the css styling and the page layout a little bit differently. It’s almost fun to watch IE change from its quirky youth to an almost standards compliant browser (yes almost is a stretch isn’t it).
BUGS:
Yeah you knew there’d be some, here’s what I found, and what is posted on the developer’s website.
Posted by Phil on April 3, 2008 under Javascript, Training Sessions, Websphere Commerce | Be the First to Comment
It’s time to learn how to get the bugs out. This week we covered basic debugging (from starting the server) to using some external tools (such as the fantastic Firebug plug-in). For the full show you can check the audio clip at the end (I’ll post it when I’m done ‘cleaning’ it).
Highlights:
On a side note, there are two other tools that are very helpful when trying to debug or develop on IE, Safari, Linux browsers, etc. They are XRAY and Aardvark, and both are bookmarklets (meaning you bookmark the javascript itself and run it when you need it, similar to a bookmark).
XRAY can be found here http://www.westciv.com/xray/.
Aardvark can be found here http://karmatics.com/aardvark/bookmarklet.html.
Audio clip will be here when I’m done editing it… UPDATE: Or it won’t, looks like my sansa destroyed the file, I mean it’s still there, just not in a format that any program can read… I may still play with this, but I’m thinking it’s a lost cause… sorry 