I’ve been a web application developer for several years and I have began working systematically as of late (finally). There are a few things that without them I feel lost as a developer and need them for debugging and testing my web applications before deployment. These tools are mostly available through firefox or rather real web browsers, (ones that use the gecko engine).
- Web developer tool bar - the masterer plugin of the lot. With this you can easily disable java, javascript, manage cookies, view css, edit css, manipulate forms (auto form fill - because we know manually filling out forms for testing is the pits). manipulate images, outline tables for debugging, and tonnes more.. You must have this if you are a web developer or hope to be one. Get the web developer toolbar extension for firefox
- Css Viewer - Very nice css overlay tool which shows a overlay box with all the properties of whatever you hover your mouse over, showing the title of the class applied to it as well as the class’s details. Get Css Viewer extension for firefox
- Colorzilla - This plugin allows you to suck the color from any page element. See a color like it want the hex color code for it. You click on color zilla click on the color and double click the color zilla icon and there’s the hex value. Sadly there is some situation with this plugin and linux or rather ubuntu (from my experience). It was working at one instance but since dapper drake I have had no luck with it. Get colozilla extension for firefox
- Measurit - What dimensions should i make a banner to fit into this space on that web page. Measure it gives an overlay over the page where you can measure spaces in rectangular / square units and get exact pixel dimensions. A very handy tool. Get Measure extension it for firefox
- I.E tab- I honestly wish this extension didn’t have to exist (see stance on internet explorer here). However.. sigh.. this extension allows you to preview the developed page using internet explorers rendering engine from within firefox. Therefore you can ensure that your pages render properly and looks the same in both browsers. Get Ie. Tab extension for firefox
That is the end of my tools i utilize from firefox relative to web development.
On the actual development side of things get a copy of php, mysql and apache. You may download these separately from php.net mysql.com and apache.org , install them individually then get them talking to each other in unison. If you are a windows user you may chose to get an installer which does that for you. example of popular ones are wamp and appserv. If you are an ubuntu linux user you may simple open a terminal and run this command
sudo apt-get install apache2 php5-mysql libapache2-mod-php5 mysql-server
supply your password and this will download and install and configure thh applications for you.
These will both setup php, mysql, apache and also another useful tool phpmyadmin which makes it easier to administer your mysql databases. The great thing about these webdevelopment tools which i have discussed is They are all 100% open source Free for usage :D. After installing using which ever method you so desired open your web browser (hopefully firefox) and type local host or 127.0.0.1 to access your local web server.
With relation to coding. I use bluefish as my weapon, I have messed around with nvu on small occasions but I tend to use bluefish most of the time as nvu generally encodes my html entities meaning <?php becomes < and so on. In days long long ago in a land not so far away when I was a windows user I would typically use edit+ or dreamweaver as my coding tool.
Hope this helps. Be not affraid to ask via comment if shrouded by darkness is your understanding.
comment