Tales of an Entrepreneur by Chrys Bader

10 Tips for Budding Web Programmers and Designers

1. Use Firefox

This is the most important platform you have at your fingertips. Firefox is essential for developing websites. I'm not saying you need to use it as your browser -- you can use whatever browser you want for surfing.

Since the birth of Firefox, there have been a few extensions developed that are a MUST HAVE if you want to speed up development and learn faster.

Web Developer Extension by Chris Pederick.

This extension has many useful tools, though most of them have been trumped by FireBug (which I will talk about next), some are still useful. Features include:

• Resize the browser window

  Quickly and easily resize the browser to 800x600, 1024x768, or any other size you want. This tool helps you see how your site looks from your visitors' point of view. Check Google Analytics and see which resolution is the most popular. Design for that one. Firebug does not have this tool.

• Edit CSS/HTML without refreshing

  This tool is useful for writing free-form CSS without having to refresh the page, something that is not as easy in Firebug. As you edit your CSS and HTML you will see the changes instantly. This is a major time saver.

• View all Javascript loaded on the page

  For those of you that have Javascript code or are trying to see someone else's Javascript, you can view all the JS code that your browser has loaded on a single page. (Firebug shows you all the JS files, but you can't search through all of them at once like in this extension)

• View generated source

  This is an excellent trool if you have portions of your pages loaded by AJAX or via Javascript. Regular view source won't show you the HTML that is dynamically generated. (Firebug will also show you dynamically generated code. You can actually see it on the fly.)

Firebug Extension by Joe HewittOften at the office we ask the question, "Remember life before Firebug?". This extension has changed my life. Here are some of the major pros of this extension:

• Inspect the DOM (Document Object Model)

  Click 'Inspect' and hover over elements of the DOM to see where that element is in the HTML code and what CSS styles it has.

• Live CSS editing showing style inheritence

  This is money. This will save you literally hours in layout design. For example, you can select a DIV and then tweak it's margin by selecting the margin property in Firebug and pressing up and down to tweak it pixel by pixel. Page up and down to change by 10 pixels. You can also add new properties to current styles. Once you have made your changes, highlight the CSS and copy and paste it back into your actual file.

• Detailed Javascript debugging and profiling

  The Javascript console is slightly better here than in plain Firefox. It gives you more details and is a fine replacement for the default console. You can also profile your javascript and see the execution time as well as the number of calls are made to every function.

• See all files being loaded and total size of your webpage

  This is so key for optimizing your website's load time. You can see how long each individual file associated to your webpage took to load. Images, Javascript files, AJAX calls. At the bottom of the "Net" section of Firebug, you will see the total size of the page you just loaded.

2. Be Compatible

Being cross-browser compatible is very important. It's not something I personally have fun with. I told you to develop in Firefox, but don't forget to check your work in IE 6 and 7, Safari, and if you want to, Opera.

Once again, check your Google Analytics to see what browsers your visitors are using. The most important ones are the ones that your visitors are using.I've been watching the decline of IE6 in the Google Analytics of many of my sites, and it is steady. I will throw a party the day it drops below 5% and I don't need to support it anymore.

To have an easier time being compatible, keep your approach simple. If you try to do something fancy that takes a lot of work and tweaking in one browser -- it's more likely that it won't work properly in another browser, which takes me to my next tip: Less is More.

3. Less is More

Be tasteful. This applies to everything. Graphic design, programming, page layout. Keep it simple!

• Designing Graphics

  There's always a tendency to overdo a gradient, bevel, or drop shadow. If things just aren't working out, it's probably because you have too much going on. Keep it simple and the effects minimal or tasteful.

• Fancy Javascript

  It's always nice to write some really cool Javascript that enhances the user interface. On the down side, it can be taxing to a user that doesn't have the supercomputer that you do. You can also run into issues across multiple browsers. Again, don't rely too heavily on Javascript to do everything for you. If you want to do basic user interface stuff, I'd highly recommend jQuery, which I talk about in the next section. AJAX has it's time and place.

4. Want Javascript? Use jQuery

Javascript is great for showing/hiding information to give your page more space to breathe. If you want to write Javascript in a new, very easy to write fashion, I'd highly recommend using jQuery.

One of the major benefits of jQuery is that it has been tested across multiple browsers for you. This means that all of the methods you use in the jQuery system are guaranteed to work. The next major benefit: jQuery is extremely simple to use.jQuery uses CSS selectors to target items and then lets you manipulate them however you want. Below are some examples.

Hide all paragraph elements in a div with the id of myDiv:

Learn more about jQuery here. For help, visit the jQueryHelp Forum

It's only fair to mention other alternatives, such as mootools, prototype and scriptaculous.

5. AJAX has its time and place

AJAX has been all the craze of 'Web 2.0'. Lots of people I know ask me 'Do you know AJAX' as if it's a stand-alone programming language. AJAX is just a method of communicating with your server-side scripting language to retrieve new data or update data without refreshing the page.I've noticed a large tendency to use AJAX for everything. This is not always a wise choice. Why?

• Page Views

  By making everything AJAX, you're losing valuable page views.

• Usability

  This one is debatable, but I feel that the average web user (which you do not represent) is still getting used to this. Average users still take the page refreshing as an indication that something is happening.

AJAX definitely has it's place and it should be used in some conditions. Again, less is more. Be tasteful and moderate your usage of Javascript and AJAX.

6. Search engines like structured code

It's been all the rage to get to the top of search engines for your target keywords. As the developer, you have a responsibility of following code structure to make your site's code as optimal for search engines as possible.Here are some important structure tags:

• H1 - It's the most important header, and that's how search engines see it.

• H2, H3, H4, H5 - Subsequently important headers. Use these to disseminate your information properly and search engines will give the words within these headers weight.

• A - The link. Always give it a TITLE property.

  view sourceprint?

  1.<a href="" title="Contact A Clever Cookie">Contact A Clever Cookiea>

• IMG - Ye olde image tag. Always give the image tag an ALT property. This will add to the keywords search engines pick up on. Also, if your image doesn't load for some reason, users will still see a caption of sorts.

Here are some other important tags for your document:

• TITLE - The title tag is what will be shown as the search engine result, so title things carefully. Try to include the most descriptive keywords in the title.

• META - Always fill out your keywords and description META tags. Search engines still read these old suckers.

  view sourceprint?

  1.<meta name="keywords" content="blogging, web design, clever cookie" />

  2.<meta name="description" content="Try to have a different and detailed description for every page that includes important keywords related to your document" />

7. DIVs not TABLEs

We all used to do it. Making layouts in TABLEs nowadays is extremely frowned upon. Only use TABLEs to display tabular data.It takes a lot of practice, but once you get the hang of it, it becomes really easy and you actually gain more flexibility than you ever thought you had.It's as easy as float and width.I wrote a very basic two column tutorial on Virb, read it here.

8. Minimize inline styles

While coding, sometimes it's easier to just write styles into your element rather than giving it a class or property in your CSS file. You want to minimize that for one reason: supportability.You're going to come back to your code that you made in the past. You will sleep in the bed you made. After doing this for 10 years, I've learned that taking the extra time now will save you lots of time in the future. Which brings me to my next tip: Code with the future in mind.

Bad practice

Good practice

9. Code with the future in mind

Comment your code. Be neat. Be organized. Don't be lazy. If you're feeling in a rush, take a little break and come back to it.In many cases, that is, if you plan to be successful, someone else will be looking at your code in the future. Sometimes, that person may be you.When you come back to your code after a couple years and it's not commented and it's not formatted properly, you're going to be upset with yourself. Avoid future self-confrontations by simply commenting code where things don't immediately make sense.It is also possible to have too many comments. Please don't comment things that are blatantly obvious, because then the actual worthwhile comments get lost in the mix.

10. Know the standards, but you don't always have to follow

Don't use center, font, and other deprecated tags; it makes you look bad.

Valid XHTML and CSS badges on a website are mostly a matter of showing people you can follow some rules. Maybe it makes you feel special. But, it does not imply anything about the quality of your website. Try to find one large, successful website that has valid HTML. The standards can't keep up with growth of new techniques and technology.

Always start coding your site in valid HTML for as long as you can. There will probably be a situation where you need to bend the rules to get a feature of your design to function properly in all browsers. Don't sweat it. In the end, that's really all that matters.

You can use the W3's HTML Validator to validate your mark-up if you so desire

That's all folks!

Keep all of these tips in mind and start getting familiar with the tools I recommended. If you didn't already know, you have just stepped up your game.