Firebug for Google Chrome and IE6 / IE7 / IE8 (And Beyond!)

The crown jewel of web development (at least for me) has been Firebug. Unfortunately it’s only for Mozilla Firefox… or so I thought. Seems like the Firebug team has something they called “Firebug Lite”, that allows you to get and use many of the features in Firebug on browsers that don’t really support extensions. Yes, that includes Safari, Opera, Google Chrome, and Internet Explorer 6 and above.

Sorry Mosaic users, you’re out of luck on this one ; – )

So how do you get this magical debugging tool for your browser of choice? Simple, all you have to do is add one line of Javascript code:

<script type="text/javascript"
src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>

There are some extra customizations you can do for this, but you can check that out at the official Firebug Lite website.

Comments

Get MMS & Tethering Working on iPhone OS 3.0 (T-Mobile)

After days of delay, Dev Team finally released ultrasn0w, which allowed people with jailbroken iPhones running OS 3.0 to finally unlock their phone. The purpose? So people can use their iPhone on other carriers besides AT&T. In most people’s case inside the US, it’s to use on the T-Mobile carrier.

Once you do get things running, you’ll realize two things; MMS isn’t enabled by default and neither is Internet tethering. This quick tutorial will get your phone up and running so you can send MMS messages and tether your Internet with T-Mobile USA.

First we need to setup MMS (and internet too) by going to Settings then selecting General > Network > Cellular Data Network.

Under the first Cellular Data group, you’ll need to input the following information:

APN: internet2.voicestream.com
Username:
Password:

On some sites, you may see people tell you to put wap.voicestream.com. Doing this will send all your requests through the T-Zones service, which is much slower than Edge! Only internet2.voicestream.com unlocks the full power and potential of Edge.

Next, to setup MMS, you’ll need to put the following information under the MMS group:

APN: wap.voicestream.com
Username:
Password:
MMSC: http://216.155.174.84/servlets/mms
MMS Proxy: 216.155.165.50:8080
MMS UA Prof URL:

Now, restart your iPhone by holding the lock button and home button for about 15 seconds. Once your phone is back up you can go to the messages application and create a new text message to yourself. In this text message, press the picture icon and either take a new picture or select an existing picture. Select send and if all goes well you’ll not only successfully send a picture message, but also receive one.

The next step is to setup Internet tethering. Just as a warning some people have experienced some problems sending / receiving MMS messages after they do this, but I personally haven’t had any issues. If you do have this problem though, one way to fix it is by going to
Settings > General > Reset > Reset Network Settings.

To get tethering setup, you’ll need to add T-Mobile as a carrier to your iPhone. To do so, just navigate to this URL on your iPhone:

http://www.adamkparker.com/downloads/iphone/us_tmob.mobileconfig

It’ll ask you a couple of times if you want to install this carrier, just select yes each time until it’s installed. Once it’s installed reset your iPhone again like previously mentioned above. When the iPhone restarts, you can access the tethering options by going to Settings > General > Network > Internet Tethering.

Comments

Cross Browser Minimum Height (CSS)

A issue in my coding life is dealing with IE6 and making things work in it and Firefox (among other browsers). One thing I’ve learned to deal with successfully is putting minimum heights on DIVs. Some people may put a “spacer” image or DIV inside the parent DIV to stretch it out. The problem with that, is sometimes it can be buggy.

Here’s my solution:

#div_name {
    min-height:500px;
    height:auto !important;
    height:500px;
}

Firefox will go off of the min-height property, however, IE will ignore that and will render the element according to the height property. The keyword auto will automatically extend the height depending on what is inside the div. The !important tag is used to set a higher priority to the height, so that it is executed when height of the page exceeds 500px.

Comments

Quick way to plot keywords in a blurb.

I was updating the search feature to an online store that my company has built, which the whole purpose was to make it “more Google like in features”.

One of the features was plotting the keywords in the short description for that page. This makes the search results a little more relevant for people who are searching for a product or a page that’s housed on their store.

Example: So if someone searches for “John” and that keyword doesn’t appear until the end of the content, rather than just showing the blurb without the keyword highlighted, it should be in the middle or beginning of the blurb.

It’s the difference between seeing:
“The car over heated, but we really didn’t care, because it was Sunday and…”

and seeing:
“…when we walked to the car. John also went to the beach…”

So I came up with some quick code to do just this, it’s quick and dirty, but it does the trick.

	function plot_blurb($description, $words, $max = 150) {
		$last_position = 99999999999999999;

		foreach($words as $word) {
			$word = preg_quote($word);
			$current_position = stripos($description, trim($word));

			if( $current_position > 0 ) {
				if( $current_position < $last_position  ) {
					$last_position = $current_position;
					$last_length = strlen($word);
				}
			}
		}

		if( strlen($description) > $max ) {
			$half = round($max / 2, 0);
			$start = $last_position - $half;

			if( $start <= 0 ) {
				$start = 0;
			} else {
				$blurb = '...';
			}

			$blurb .= substr($description, $start, $max) . '...';
		} else {
			$blurb .= $description;
		}

		return $blurb;
	}

$description is the full text for the page, $words is the array of keywords to find, and $max is the maximum amount of characters to show in the blurb.

Also, this is using the PHP 5 command stripos, PHP 4 users will need this function in order to make it work.

    function stripos($haystack, $needle, $offset=0) {
        return strpos(strtolower($haystack), strtolower($needle), $offset);
    }

Hopefully this will help someone out.

Comments

Easy way to debug Javascript in IE6

While at work today, I found myself chasing a Javascript bug in IE6. For any of you who have even attempted to do such a thing, you know this is no small task. IE6 has a habit of giving generic error messages on non-existing lines of code.

So I went on a search looking for some kind of alternative to this and buried deep within the caves of the internet I found a solution.

It’s called Web Development Helper and it integrates directly into Internet Explorer 6. This plug in has a DOM inspector that allows viewing of all elements, selected elements, or elements matching an ID or CSS class (along with their attributes and styles), logging of HTTP / HTTPS requests that are initiated by the browser or through AJAX, the ability to trap specific script errors and to see detailed error messages, and much more.

The only down fall to this plug in, is that it actually locked up my IE6 a couple of times. Other than that, I highly recommend this product for people that are concerned with web sites that are compatible in multiple web browsers.

It’s free and you can download it from here: http://projects.nikhilk.net/WebDevHelper/Default.aspx

Comments

Class.Forms an Easy Form Builder in PHP

Not too long ago I released an open source application called class.forms. This class made in PHP allowed you to easily create forms with server side and client side validation. Since this was release over 5,000 of you have downloaded this class.

However as time has gone on, people either can’t find it on the site or ask about it, so I decided to make a new blog entry about it.

Here are some of the features:

  • Quickly add text, password, hidden, upload fields and more.
  • Automatically handle the posting of form data to a database (insert or update)
  • Resize uploaded images proportionally
  • Easily repopulate fields with GET, POST, or SQL data
  • Seamless client side and server side field validation on all inputs
  • You can customize a object by inserting your own html
  • Don’t have to memorize which order to pass variables to functions
  • Rapidly create dynamic forms easily

Words can’t describe how useful this class actually is, so give it a try today.

You can download class.forms here: http://www.adamkparker.com/programming/class-forms/

Comments

First Impression with Google Chrome: Worth it to switch?

I’m an avid Firefox user, I love how I can extend the base features of FireFox at anytime with a number of plug-ins. Although went buzz made it around the office that Google had officially launched it’s web browser, I was ready to pass it off. That was, until, a co-worker showed me the break off tabs feature. Seeing that made me want to give this infant in the browser world a spin.

As of right now, I think the jury is out for it’s the final verdict on this web browser, but it does contain several key elements that just might make me switch. Regardless of the many complaints I hear about such as no AdBlock support, no FireBug support, and no Delicious support — you can actually get similar functionality right inside this browser.

Pluses

Each tab runs in it’s own process, so if I’m watching a YouTube video while trying to post a blog and the YouTube page becomes unresponsive, I can kill that process (just that tab), while leaving my other tabs open unaffected.

The drag off / drag on tabs is something I’ve wanted for quite some time in a web browser. Such a simple concept was never adopted and I’m quite puzzled as to why. In case you’re wondering, you can click and drag a tab outside of your browser window to create a new browser window. You can also drag it back. This makes it useful if you wanted to break off the tab into a new window without having to open a new window and copy / paste the URL.

It loads super fast, especially sites heavy with javascript like Digg and Gmail, they load just like they would if they didn’t have all that javascript.

Creating application shortcuts are simply great. For those of you unaware, sites like Gmail and Google Docs are web based applications. With Chrome I can click the file icon and choose “Create application shortcut” and I can install a shortcut to this application in a variety of places (Desktop, Quick Launch, Start Menu). When launched, it opens in a new window with no address bar and acts just like an application would.

Peek-a-boo status bar has also been a want of mine for quite sometime. I really like the space a browser saves when I don’t have a status bar, but most of the times I want to know of the URL I’m about to go to so I’m not tricked into some scam of a website. Chrome finally answers my challenge by making a peek-a-boo status bar. It’s invisible for your whole browsing experience until you hover over a link, then a light blue bar with the address appears at the bottom.

There are a lot of other good things I could go over such as a really cool multiple browser import tool, download manager, history manager, and private browsing (just to name a few). I really like how Google has packed a ton of features into a browser without flooding you with a ton of options.

Minuses

The lack of plug-in support is a huge miss. Even though this is a beta, Google is making a real move for people to use this browser, and having the lack of plug-in support might be a deal breaker with a lot of people

Memory use can get out of control since each tab runs in it’s own process, so you might actually lose track of how taxing you may be to your machine. The good news about this is Chrome has a built in task manager that lets you see all Chrome tasks along with their memory, CPU, and network use. Plus it has additional stats for us geeky people.

There are some UI bugs, which I know will probably be hammered out sooner rather than later. This does drop the browsing experience quite a bit, especially when you’re trying to middle click to scroll.

Speaking of UI, who designed this thing? Even though the blue is part of Google’s common interface, it makes for a very childish browsing experience. Unless you’re running Vista with Aero Glass, in which case it’s a work of art.

But what about my FireFox plug-ins…

Delicious Bookmark Buttons
If you’re missing the ability to bookmark stuff to Delicious from your browser, worry not! You can use the handy bookmarlets for Firefox on Chrome! Just head on over to http://delicious.com/help/bookmarklets and follow the directions for the Firefox Bookmarklets. Let your delicious activities begin!

What about StumbleUpon?
There is a bookmarklet available for StumbleUpon too, just drag this “StumbleUpon” link to your browser bookmark bar. See, isn’t that handy? :-)  

And what about ….?
It’d take too long to list other sites, but all you have to do is a Google search to see if your favorite site has a bookmarlet that will do what you need it to do. Make sure you use the Firefox one as that seems to be the only ones that work in Google Chrome.

Okay, what do I do without FireBug?
Firewho? Chrome has a built in inspector that’s almost as useful as firebug. Just right click on any page and click “Inspect Element”. You can review bugs, make live changes, and view CSS details on the fly just like in Firebug. You also get a nifty javascript debugger and a search box to help you find what you need in the site. Resources works well if you want to see how long it takes to load different elements on a website, and size does exactly what you think it does. Something really cool under the Resources tab there is a section called Resources that allows you to view images, local / remote javascript files, and much more. If you’re looking for just debugging Javascript you can click on “File” and under the “Developer” area can find a couple of tools to help you.

Okay, well I know I got you on this one, what about AdBlocker?
Well since Chrome is Windows only right now, it makes it a lot easier to block ads. First, you can update your HOSTS file to include a number of spam, scam, and advertisement sites out there so they are blocked when you surf websites. This makes loading websites a lot faster. If that solution doesn’t work for you, there are a number of programs on the web that will site in your system tray to monitor your traffic and block any advertisements, pop ups, etc..

So now that you’ve heard what I have to say, what do you think of Google’s attempt to make it in the browser world? Post your comment and let your voice be known! :-)

PS: Here’s an undocumented Chrome tip for you. In a new tab type: about:network

Comments

So, what do you create websites in?

Something I get asked a lot is what I create websites in. Some people come to me for advice for which editor I think is the best or to boast about their personal favorites. Among the many editors I’ve heard mentioned have been Dreamweaver, Front Page / Expression Web, and Notepad.

See, I have a problem with each one of those choices. Well, actually I have a few problems with those options. First of all, if I’m on a guest computer and I notice something I need to change on one of my websites, I’m a 200-300mb trial away from Dreamweaver, that’s rough. If I’m using Notepad to edit my files I still have to connect to my site via FTP download the file, edit it, and then upload it. So I’m running a risk of my password being in the hands of the guest computer.

So what is my personal favorite? Well, to answer that I need to narrow down my basic requirements for an editor. It has to be secure, where I can edit my files from any computer and not risk exposing my password information, has to have file transferring built in, and definitely needs syntax highlighting. Plus it needs to be ultra portable and have all the normal operations of line numbering, searching, find/replace, etc…

Now this brings me down to my site editor of choice, Vi. Since I have dreamhost I use any SSH client (PuTTy if I’m in Windows or using the built in function on Mac/Linux), and edit any of my files. It’s ultra portable, so portable in fact that unless I’m on a windows machine, I don’t have to carry any software with me to access my sites. It fits all my basic requirements that I have for a editor.

I know Vi isn’t going to be for everyone, as some people are so use to working in a GUI editor that a text / command line based editor is almost completely out of the question. But, for me, Vi is probably the most perfect little page editor.

Comments

Don’t reinvent the wheel.

I’m in a industry where I occasionally deal with a lot of people and a lot of businesses and I’ve noticed quite an interesting trend. Now, I’m sure I’m not the only one to have noticed this, but I’m probably one of the few to actually blog about it.

I have had many people request for me to create “the next MySpace”, in fact, a lot of people think they have some great idea that will make their site take off and become number one. Like such ground breaking ideas as “YouTube plus MySpace” or “Facebook plus CNN” (and yes, those explinations are actually more detailed than ones I’ve received). But people have very little idea what kind of work has to go into a site like that.

People think that you just can hit a few keystrokes and have something ready in a week. In fact, I’ve had plenty of people request for a “YouTube plus MySpace” and ask for it to be up within a week. They usually don’t know a whole lot, but they do know they want it to be built from the ground up and they want full rights for it. Oh, did I mention that most people want to pay only a couple thousand dollars for this service (like $3,000 or less) and that is if they don’t offer you some “50/50 split”

50/50 split? For what? For me doing all the work and you paying some $7 a month host? Please, you know nothing about bandwidth consumption or scaling code so it can work with 10,000+ users. They just want it now, now, now and for a fraction of what your time is worth. Besides, if it was so simple, wouldn’t there already be a million of these sites out there already?

Well, scratch that, there are a million of these little sites out there and if you look at them you can usually tell exactly what they paid for them. You can spot those PHPFox sites and you can spot those quickly coded sites. My point is that you will get what you pay for. If you pay $3,000 for a site and want it up in a week, you’re going to get exactly that. A site that’ll have plenty of security holes and that’ll scale face first on the ground.

Now I’ve said all that just so I can say this. People, please, don’t reinvent the wheel. You don’t have to be the next MySpace or the next Facebook to make money, all you have to do is jump on the bandwagon. Both of the sites I just mentioned have APIs so you can make applications that their users can use. In fact, out of all the traffic I get from my sites, most of my traffic comes from Facebook and MySpace applications that I’ve created.

Both those sites have such huge penetration right now, so it’s fairly simple to piggyback on their success. But, just like with anything else, you have to make sure you keep with the times. So if the “next MySpace” does roll around from some kid in India who made it for $6.50 and had it done in a week, you can be prepared.

Hopefully I haven’t alienated any of you, but instead, enlightened you.

Comments

Video and Audio Content?

After I finally got the site up and running, I was trying to think of new ways to increase my content. So taking a page out of the Chris Pirillo and Leo Laport book, I’m considering doing a audio and video podcast.

The subject and the hosts would be yet to be determined, but I have a few people in my mind who are quite knowledgeable in their areas of expertese.

But besides that, I finally got the site back up and working after I inadvertently replaced some of the files on the server and didn’t  find out until after the backups had expired. Yes, it’s been a while since I’ve updated, but I plan on fixing that quite soon. As a treate I’ve made my eBook “How to Get Immediate Traffic to Your Website” free for the taking, so enjoy!

Comments