Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Improve your web development

Tuesday, March 10th, 2009 by Servage

firefox1When I work on web development or design projects I always repeat the same constant flow of activities: Edit something, test in browser. Edit something, test in browser… There are so many things to test for, that it can become a real hassle from time to time… I’m thinking valid code, cross-browser compatibility, support for non-javascript, search-engine-optimization, fast page load speeds and more. Fortunately there are some tools out there that make life a bit easier for developers like us.

My personal browser preference when developing is Firefox (on Mac). I have come to like it especially because of the many available extensions (plugins/add-ons) that are available. For web development I found three add-ons to be especially useful.

1) Web Developer adds a toolbar with various options useful for web design and development like enable/disable JavaScript, Cookies, CSS, test code for validity, find broken links and much more. Its nice to have these useful actions at hand when testing projects. It just makes testing a bit smoother.

2) Firebug is a fully featured debugging add-on that gives valuable feedback with regards to your code. It is nicely integrated in Firefox and allows you to spot and rectify issues fast and efficient.

3) YSlow (requires Firebug) is testing your page and provides suggestions for improvement of the page load time of your website. Using this tool can significantly increase your website’s speed.

All the add-ons can easily be obtained from the links above or directly within Firefox under “Tools > Add-ons”.

Improve your web development, 4.1 out of 5 based on 24 ratings
Categories: Servage

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

16 comments (leave a comment)

If developing on a Mac, the company Panic has a product called Coda which includes a pretty much complete solution for web development. Check it out: http://www.panic.com/coda/

Great hint… And you know what: I’m using that as my favorite editor too :-)

Yep, webdesign does some times suck…

A very good tool to use for windows users is Notepad++

http://notepad-plus.sourceforge.net/uk/site.htm

Yep, NotePad++ is a really good tool, but it’s ftp plugin doesn’t.

I already knew this plugins, and, I agree with you, Firefox really is good for web developing, because he is fast, and he have plugins support.

But, I test on IE and Chrome too, because always have incompatibility between the brownsers!

Firefox with the addons above are a must for any developer.

The applications i use most often:
Development:
# Aptana
# HTML-kit
# Notepad++
^ All have there good points and uses for certain situations.
Debuging:
# IETester – Great program for testing IE compatibility 5.5 – latest
# Firefox (with the listed plugins)

When cross-browser compatibility comes to mind, the abundance of stupidity that is the Internet Explorer’s dev team always pops up.

There is a simple error that has always plagued me for years, just when I think a site is perfect, Web Developer Toolbar gives me all ticks, it passes all compliance tests, Images are optimised.

Then I check it in IE and… bam a number of background image elements refuse to load, why because despite its complete compliancy with web standards, IE has a built in temperment that makes it screw up even the best of coding due to silly things.

Many of us like to use shorter code in css, instead of defining each element for a background on several lines (background-image, background-color etc) we use the classic but compliant background: element.

Something like background: #000000 url(‘images/background.png’)repeat-x; for say a title bar or h1,2,3 element. Nothing new and sophisticated about it. Works fine and meets web standards, but in IE it simply gets ignored, I have had this problem on sites for years and at first I was unable to figure it out but then I found it was the dumbest thing.

url(‘images/background.png’)repeat-x;

should be

url(‘images/background.png’) repeat-x;

if there is no space between the ) and repeat it messes up, why? not because it isnt propper coding but because IE is stupid. I agree with this post that Firefox is the best web browser to use, I just thought I’d drop in this little piece of knowledge to help anyone who had the same problem I did with background image rendering in IE.

As soon as I pay my outstanding Servage bill and get my account unsuspended I can get back to developing, but I was helping a friend who is also a Servage customer with their sites layout yesterday and today and came across that annoying problem again, and it brought back memories of banging my head up a wall not knowing where it went wrong. But there you have it.

Thank you for sharing this with us. I encourage everyone with stories or anecdotes like this to submit them here.

I use PSPad instead of Notepad++, its also free and its FTP upload function works like a charm.

Another useful tool (which is only available for Windows though) is “Fiddler”, a transparent local proxy that captures all your HTTP requests and allows you to view and modify headers and content as they flow between your local browser and the web server.

The firefox addon “Live HTTP headers” is also very useful in some circumstances.

Nice tools to have.

For FTP I recommend to use the FireFTP.
This tool will make your life a lot easier.

Firebug is just great!
When developing valid CSS and design structure, you can use firebug to achieve the correct setup, without needing to reloading the page.
In javascript related challenges, it also comes in handy.

What would really improve overall performance is when the Servage mysql database servers would be a lot faster and more fine tuned. I have lost count of how many times I had to move my database to another server just to get decent performance. I love Servage’s service, everyting works just fine, except those database servers. I think that they need to be fine tuned better, not just the hardware but the settings of the mysql server. Mysql does not run optimal straight out of the box after install, you have to tweak it, tell it to use more RAM, more buffers, bigger buffers, allow longer queries etc etc. I’m no expert but have done some tweaking of mysql in the past and have noticed huge improvement when doen correctly, of the opposit when done badly. I hope that Servage has experts that stay on top of these issues. I love Servage, the webservers work just fine, but the mysql servers are the weakest link in the chain. When they are slow it does not matter how fast the webserver is when you have a website that uses a mysql database, everything waits for that mysql server to finally respond.

I just had to move one of my databases again, and now the website is running fine again, but I really do not like having to do that so often. It can work fine for weeks and than slowly become worse and worse again.

Kepe up the good work, and please make the mysql servers perform better.

A webpage with iframes takes extra time to load, not just the content of the iframes but even when the iframe source url is set to “” (empty) at first. I improved the initial loading of my first page by leaving out the iframes and replacing each of them with an empty <div>, like <div id="mydiv1"></div> and then at the very end of the page I have added a bit of javascript to add the iframe within that <div> after the rest of the page has already been loaded.

Example page:

<html><head>…</head><body>

<div id="mydiv1"></div>

….

<script type="text/javascript">

// <![CDATA[
var afterload = null;
function loaditafter()
{
clearTimeout(afterload);
var iframe = document.getElementById('myframe1');
if (!iframe)
{
var idiv = document.getElementById('mydiv1');
if (!idiv) return false;
idiv.innerHTML='\<iframe id=\"myiframe1\" src=\"myiframe1.html \">\<\/iframe\>';
}
}
afterload = setTimeout("loaditafter();",1000); // 1 second, you can change this obviously
// ]]>

</script></body></html>

Of course you can add parameters to the HTML code for the iframe and do this a lot smarter, this was just a simple example. Notice the use of excaped (\) characters in the innerHTML code. You should at least escape the " character like this: \". I escaped more characters just to be safe.

Hi, dear i like your sites and also i like your content because you are giving more knwoledge about development .Dear i have a websites for database.
Here is my my websites information.
Big Database Solutions :-LEXST database system is designed to meet the demand of massive searching, in huge database tables, it’s some kind of relational database, and it’s a clustered and fastest database system with table partition technology.LEXST database system is cheap solution, it can run on ordinary PC, no need very professional server. It’s a very little human interference and also save labor cost. LEXST data base system is suns in LAN environment or extranet environment and server can be distributed in different geographical locations. Besides, it can be an internet web page search engine, if you dump data into LEXST database system.Lexst is fast database, no matter how many rows you have in your huge table and also partition your table into up to 20,000 nodes working together to search.Lexst database is full log management system. It’s mean if you have huge tables with too many rows in your database, you should consider using Lexst database.
Big Database SolutionsLEXST database system is designed to meet the demand of massive searching, in big tables , it’s some kind of relational database, but it’s a clustered and big database system with table partition technology.

I have found a fun way to make your page load faster by forcing some images to be loaded later by leaving the src link empty and having it fail the first time and then loading the image within the onerror event. It works fine in IE7 and Firefox3. You can add an Alt line to tell people that the image is loading. But you do not need that when the image loads fast enough or when the image is small. Beware within the onerror code itself (inbetween the ” “) i only use single qoutes ‘.
To prevent a loop when the image will not load, i remove the onerror code within the first call to the onerror event.
You can do this with offsite images as well as images on your own site.

Here is an example:

Leave a comment

You must be logged in to post a comment.