Mozilla Firefox and Safari Website

9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension

Whether you’re a front-end graphics designer or a back-end web programmer, if you’ve worked long enough in the field of creating web-based solutions, you’ve no doubt heard about an extension for the Mozilla Firefox web browser called (simply enough) the Web Developer extension. If you have no clue what I’m talking about, here’s a brief overview from Webs Tips to get you familiarized with this wonderful tool.

This article lists some practical, everyday uses of the Web Developer extension to help improve your web-building methods. I’ve tried to stay away from the more common and basic uses of the Web Developer extension like troubleshooting layout issues with the Information > Display Div Order option because I feel these have been discussed quite enough in other places. New users, don’t run away quite yet, I think this guide will help you get a rapid jump start into applying this tool into your daily development routine.

So without further ado, here’s nine highly pragmatic uses of the Web Developer extension for Firefox.

1) Change XHTML on-the-fly without changing your web files.

Unfortunately for many developers, we don’t all have the luxury of testing servers and sandbox environments. I for one, confess to developing on live websites even during peak web traffic times.

If you’d like to lessen customer support requests due to an inadvertent display:none; property assignment on the log-in box — use the Web Developer extension to effortlessly check your XHTML modifications before you commit them to the server.

Here’s an (extreme) example of how I was able to change a few of reddit’s XHTML markup.

The original front page:

And here’s the modified version:

As you can see in the above picture, I changed the top three stories (to something else I’d much read about) and modified the background color to pink (I have an odd affection towards hot pink for some reason).

You can achieve the same results by using the Miscellaneous > Edit HTML Markup option which will open up the Edit HTML tab panel displaying the XHTML of the web page. Unfortunately, the window isn’t color-coded and the Search HTML function doesn’t quite work properly (yet).

Tip: You can change the position of the Edit HTML panel by clicking on the Position icon (right next to the Edit HTML tab on the above screenshot).

To change the CSS styles of the page, use the CSS > Edit CSS option, which will allow you to edit the styles used on the web page.

2) Measure things quickly with the Ruler Tool.

Raise your hand if you’ve ever print-screen’ed, and then copy-&-paste’d the screenshot onto Photoshop just to determine dimensions of certain page objects (like the width of an image) with the selection tool. *Raises hand in shame*

With the Ruler Tool (enable it via Miscellaneous > Display Ruler Tool), you can speedily size-up objects inside the web browser. It’s a great tool in conjunction with outline options such as Information > Display Div Order option or Information > Display Block Size option, allowing you to detect the amount of padding and margin between elements.

3) See how web pages look on a non-traditional web browser.

Nowadays, tons of people have mobile devices that lets them view web pages in non-traditional ways. Determine whether your pages render correctly (or close enough) on portable device screens by using the Miscellaneous > Small Screen Rendering option. This saves you from going out and purchasing a Blackberry or a Trio with an internet dataplan just for cross-browser checking.

How the Gamespot website looks on normal browsers:

What it will look like on a Small Screen Rendering device…

4) Find out how optimized your page is.

Use the Tools > View Speed Report option to automatically send your page to WebSiteOptimization.com, a site that provides a plethora of information about your web page load times like how quickly your page loads and how many HTTP connections are being used among a ton of other things.

There are built-in tools in Adobe Dreamweaver and Flash (if you even have access to them) that simulates download speeds, but nothing beats a free, comprehensive and actual live speed report.

5) Populate web form fields instantly.

Don’t you hate it when you have to fill in your custom-built web form for the nth time because you’re testing it? You can quit tabbing and entering junk information on your form fields and switch to using the Form > Populate Form Fields option in the Web Developer extension.

In the example below, you can see that it populates most web forms somewhat intelligently – It was able to guess the email field — but missed the phone number field.

6) Find all the CSS styles that affect an element.

For most fairly-proficient CSS developers, it’s quite easy to find the exact selectors that style an element’s properties – fyi: #selector { property: value; }. This is especially true when you’re the original author and/or the styles are contained in one stylesheet.

But what if you were working on someone else’s project… and the project in question has 1,000+ lines of pure CSS goodness, split into several external stylesheets (because Bob a.k.a. “Mr. Modularity” likes to keep things “simple“)? Another scenario you might encounter is being tasked to theme a content management system like Drupal or WordPress and you’re not quite sure where all the external stylesheets are.

For example, the Yahoo! home page has over 2,400 lines of CSS, spread over several external stylesheets and inline styles (Bob, you built this page didn’t you?).

If you’re tasked with revising this page, you have two choices: (1) look through, understand, and hunt down the styles you need or (2) decide that you’re smarter (and lazier) than that and so you use the CSS > View Style Information option of the Web Developer extension. With this option enabled, clicking on a page element opens up the Style Information panel which displays all the styles that affect the element.

7) View JavaScript and CSS source code in a jiffy.

One of the ways I troubleshoot rendering issues is by looking at how other web pages do it. JavaScript and CSS are often divided into several files — who wants to look through all of them?

Using the Information > View JavaScript and the CSS > View CSS options instantly displays all the JavaScript and CSS in a new browser tab. This has the side benefit of being able to aggregate all the CSS styles or JavaScript in one web page allowing you to use the Find toolof the Mozilla Firefox browser (keyboard shortcut: ctrl + f for PC users).

8) See how web pages are layered.

It’s often very helpful to determine which page div’s and objects are on a higher plane. Using the Information > View Topographic information gives you a visual representation of the depths of the page elements — darker shades are lower than lighter shades of gray.

Original web design…

Using the Topographic Information option renders the page to this:

9) See if your web page looks OK in different screen sizes.

I use a monitor size between 19 – 22 inches (wide screen). This can be problematic because many of our visitors use smaller monitors. Short of switching to a smaller LCD screen to simulate the user experience, I just use the Resize > Resize window option. It helps test whether my fluid layout works well in smaller windows (sometimes you forget to set min-widths for div elements and it jacks up the layout in smaller screen sizes), or if your fixed-width layout displays important content without user’s having to scroll.

Be sure to enable the Resize > Display Window Size in Title option to help you determine the exact dimensions, and also for documentation purposes when you’re taking screenshots of your webpages.

So there we are, nine ways you can employ the Mozilla Firefox Web Developer extension to better your web development experience. I don’t claim to be an expert, but I certainly know enough about the Web Developer extension to improve my web-building speed.

Do you have other tips and strategies on how to further utilize the Web Developer extension? What are the ways you use Web Developer extension in your job? Share them here.

Related links:

6 Things You Need for Your Web Project to Succeed

Being at an age where I’m just beginning to carve my path in the real world, I tend to have many peers and co-workers who constantly think about making an income besides sitting in front of the computer eight to ten hours a day in a windowless room.

by Andrea Mercado

I’ve had thousands of conversations about initiating startup companies, selling IT products or services online, creating profit-generating web applications (like a derivative facebook site), and putting up blogs. Eventually, I began to see characteristics that I feel are needed in order for your own project to succeed, and I present them here.

Don’t be afraid to commit.

If you’re comfortable with your current salary and you need the promise of eating at least one meal a day (sans ramen noodles), why change it? If you can’t commit whole-heartedly to your endeavor, things won’t happen, and you’ll constantly put your project second on your to-do list (i.e. right below playing “teh gamez”). In addition, when you have other obligations that take up the majority of your day, you won’t be able to commit the time and resources needed to get things rolling. Who wants to sit in front of their computer after work to design the UI interface of your application or draft a business proposal to pitch to a small-business venture investor when you’ve already used most of your thinking and creative energy at something else?

While talking to a friend of mine who’s in the midst of developing a startup company, I heard the ultimate startup killer, “I think I’m gonna try and get a part-time job somewhere, just to help pay the bills”. To which I responded with, “There isn’t a better motivation then ‘hungry’”. Put yourself in the situation where there’s no other alternative to success. You can ask anyone who knows me, one of my most-used phrases is a rip-off from Nike, “Just do it”. Take a leap of faith in your ability to succeed and overcome the obstacles of your projects.

I’m not asking you to quit your day job (that would be hypocritical of me), but you may have to consider (a) scaling down your project to something you can manage on a part-time basis, (b) adjusting your commitment to other duties and responsibilities, or (c) coming up with something else that you’re equally passionate about, but can manage do to in your spare time.

Before doing anything, set your goals and develop your idea in a presentable way.

Right on the onset of your project, there should first be a clear definition of goals and what it is, exactly, you’re peddling. When you’re asked about your idea, you should be able to respond in a concise, clear, and marketable way. If it takes more than five minutes to describe your idea, it says that the concept is either (a) too complex — so you should consider simplifying, (b) you’re clueless as to what needs to happen — so you should develop your ideas further, or (c) a combination of both.

Whether you’re talking to an acquaintance about your idea (i.e. a random person you met at the bars) or pitching it to a potential investor, you should always be prepared to cover these questions:

  • How do you describe your project in two to three sentences?
  • Who are you selling to and what’s your plan-of-attack to reach and market to them?
  • Why would people attain services or products from you, or how are you different from what’s already out there?
  • Who are you working with, and how does it compliment your skill set? In other words, do you have the right people to make it happen?

Besides helping you conceptualize your idea in a more graspable way, these points give your audience the basics of what you’re trying to accomplish, and allows them to comment/suggest things constructively.

Avoid going solo.

There are several reasons why a single founder is bound to fail. For one, hard decisions are going to be tough to settle without another person (or two) calling the shots. Things won’t happen and there will always be impasse’s between you and yourself.

Also, there won’t be enough diversity in generating ideas and problem-solving processes. If decisions were made in a group, person A’s idea of “let’s make a myspace derivative… only we give the user even more freedom to customize their page” might be swayed by person B’s more even-keeled reasoning.

Additionally, with a partner, you can motivate each other to keep things going, akin to having a workout buddy to force yourself to go to the gym.

But there’s the other extreme, and it’s the “too many cooks/chiefs/shot-caller” team. This runs into the problem of things being argued constantly, a lot of profanity-slinging, and important decisions not being made in time.

A good-sized decision-making team (drawn from observation and experience) is two to threediverse (but like-minded in the end result) individuals. Personally, I believe a three-person team is the way to go because there won’t be any ties when issues are being decided upon.

For example, I, being technical, simplistic, and lacking business/marketing sense, would choose a more open-minded, “full-of-big-ideas”, business-savvy peer to be in a startup with. Then, I’d pick someone that falls in the middle, someone I’d dub “the mediator”, the person who’s in between the two extreme personalities. We will all have varying skill sets and personalities that compliments each other, and we each “fill in the blanks”, so to speak, of what the other partners lack.

Hire (and pay) well.

When your startup relies on other people (programmers, graphics designers, business school MBA grads), you have to pick the right people, and once you do, you have to keep them on the payroll. Being a cheapskate when it comes to human resources will cost you a lot in the long run. How would you expect employees to commit to developing your idea when you won’t commit to keeping them on board? When your employees jump ship, you’ll be stuck in the water. Your success hinges on the people working with and for you.

Don’t make money your sole goal.

You have to be passionate (borderline obsessive) about your idea. You can’t be in it just to make a boatload of cash. Look at profit as just one of the benefits of accomplishing your project. If you’re not passionate about your plan, come up with something else, because this shows your lack of interest (and most probably your lack of expertise) in your chosen area.

For example, I’ve been trying (for almost two months) to launch a blog that my brother and I co-founded (about consumer-related topics such as mobile phones, PDA’s, cars, etc). Although these are things I’m knowledgeable and deeply involved in, I lack neither the extreme fervor to get it up and running, nor the expertise that, say, a professional consumer technology editor working for a magazine, has. With Six Revisions, it took me two days to launch, design, set-up, and start publishing stories. When you follow your passion instead of chasing after the dollar bills, things happen quickly and successfully.

Be confident and unyielding, but listen to what other people are trying to say.

You have to believe in your idea, you should have the mindset of proving your naysayers wrong… but always listen to what your peers have to say. Believe it or not, other people are smart, reasonable, and experienced too. Don’t miss out on an angle that you failed to see, or make a mistake that your super-PHP-expert friend warned you from the start about SQL injections — listen keenly and avoid the temptation to shut them out just because they’re not saying what you want to hear. If you feel their criticisms or suggestions are wrong or won’t work in your case, simply say, “Thanks for the input, but I think I got it”. This says that even though you’re not going with their idea or suggestion — it still indicates that you appreciate their input and that you’re always open to any ideas they may have in the future. If you shut out these valuable resources, in the end, you’ll have no one to else to blame but yourself.

All in all, I think these are things you should keep in mind and try to have when you’re thinking of that next big project that will oust digg.com’s spot in the social bookmarking arena. My biggest suggestion is to believe in yourself and don’t doubt your abilitiesif you don’t think it’ll work, I can almost guarantee that you’ve killed your idea right there.

I’d like to hear your thoughts about the subject. What are the other ingredients for succeeding in your projects? Drop a comment!

Related links:

RSS News Feed Maker

While building out a website today, I stumbled upon a very helpful tool for RSS Feeds. The site is called newsfeedmaker.com and really saved me a lot of time in adding the RSS feed to my page. The site has a collection of thousands of feeds (at least) for you to choose. Newfeedmakers.com has everything from politics to fashion, including my selection of Geophysics News for the site that I was working on. Once you have selected an RSS feed using the basic version, it allows you to choose from several design templates for the look and layout of your feed. Using the pro version allows you to customize your color schemes to match your site, and choose the format of the feed you want as JavaScript, HTML, RSS, or an iFrame. The end result of this effortless work is emailed directly to you. Simply copy and paste the code onto your page to have a great looking, quick, and easy RSS Feed on your site.