Safari has been Mac user favourite browser when it comes to surfing the world wide web. However, web development using Safari may still seems a bit troublesome compare to Mozilla Firefox. But things is starting to change. Safari users are starting to develop their own unique Safari plugin to share with other developers around the world. Web development on Safari may change slowly when more Safari plugin is being developed, here are some of Safari plugin that developers used on web development.
Safari Tidy
Safari Tidy is plugin that lets you validate the webpages you browse for (x)html compliance. It is a validator that will show three status on Safari, warning, error, ok in a small icon on the lower right of the browser. If there is any error on your HTML, Safari Tidy will detect it!
Drosera
Drosera is a JavaScript debugger for WebKit that can be used with any application that uses WebKit. Like the Web Inspector, over 90% of it is written in HTML, CSS and JavaScript. If you are using a lower version of Safari, this is something you need for debugging as this has been replaced by Web Inspector.
Web Inspector
This is something alike Firebug in Mozilla Firefox. The Web Inspector lets you browse the live DOM hierarchy in a compact HUD style window. It also highlight the node on the page as it is selected in the hierarchy. You can also search for nodes by node name, id and CSS class name. This is a must have plugin if you are doing web development with Safari.
XRAY
XRAY is not really a Safari Plugin. It is a bookmarklet for most browser that can be used to look at the box model for any element on the page. You will just have to drag it onto your bookmark panel and hit on XRAY to see the details of the particular box or div. Details such as height,weight,position, etc. Mostly CSS rule details as shown below.This is very handy.
Safari Source
This simple plugin allows you to adds syntax coloring to Safari's source view so that it can be view much easier.
Safari Stand
An InputManager plugin that adds various useful functionality, such as bookmark/history searching, thumbnail tab sidebar, view related cookies/css/images for a site. This can be used with Safari Tidy side by side.
Saft
Saft is more like a improvement plugin for Safari than a web development plugin. Nonetheless, it can help you to speed up web development such as crush protection.
If the above Safari Plugin cannot serve you on your web development in Safari, you may wish to look for web based solution to continue web development. The other solution is to use cross browser plugin such as Firebug Lite, Fiddler, NitobiBug or DebugBar which can be found in Here. That is all i have for Safari plugin for your web development need. If you have any more cool plugin you would like to share. Please share it with us!
This is a list of addon to Mozilla Firefox for designers in web development. I believe most of the professional web designers may have this list. But for some of the designers who just started designing on web might find this pretty useful. The list here are being updated personally by me along with some of the list listed below for my web development need.
Nonetheless, feel free to suggest any good material you have for your web development! One thing to note, i recommend you to visit List Of Must Have Addons For Programmers In Web Development before reading this list. The list on the programmer side may have some useful tools you will need as a designer too.
Screengab
One of the easiest screen capture addon in Mozilla Firefox. The captured image can either be saved into your hard disk as an image file or you can just captured it into your memory and insert into your favorite image editor and edit the image! Can't get what you want on your screen? Grab it instead!
Pixel Perfect
Pixel Perfect required Firebug to work. By toggling the composition on and off, the developer can visually see how many pixels they are off in development. It saved the last CSS position of your development and compare with the current one. It is something similar to PageDiff just that it is usually used by designers. Great stuff designer must have!
Opera View
Opera View like what it named render the page you are viewing as Opera. This helps you check your design compatibility with Opera. Excellent if you are working on cross browser design which you should.
MeasureIt
Every desinger will agree that MeasureIt is something necessary in your designing cycle. You want to measure something with ruler or with MeasureIt?
IE NetRenderer
Similar to many IE view,tab etc. but this will render the current page to IE view. Very similar to Opera view but just that it is for Internet Explorer.
Font Finder
Saw a font used by some attractive site? Use Font Finder to check out what font is being used on their site! Very easy to use, just right click and select font finder! Best for simplify human being like me!
Firesizer
Firesizer is a plugin you should not miss. There are other plugin that did the same as Firesizer but this is the most simple to use plugin you can find for resizing your browser in different size. This is best used to check on your design on different browser size. What will happen to it? Better check.
Web developer
Web developer one of the most popular plug-in for Mozilla Firefox! Why? It provides you with all the informatin you need on development in CSS! It provides all the information contains on the web CSS sheet and give you a detail information you need on a particular website. The most awesome feature is the edit CSS which allows you to edit your CSS page on the fly! This is a must have add-on for your Mozilla Firefox if you are in to web design and font end programming.
FireShot
FireShot is similar to ScreenGrab. They both capture browser screen shot. But unlike ScreenGrab, FireShot gives you the ability to edit and insert stuff onto your captured image. Below list the amazing stuff FireShot can do.
uploaded to FREE public screenshot hosting
saved to disk (PNG, GIF, JPEG, BMP)
printed
copied to clipboard
e-mailed
sent to configurable external editor for further processing.
If you are prefer simple and basic function scroll up and click ScreenGrab if you prefer multiple function please click FireShot image. =)
CSSViewer
CSSViewer is a simple CSS view tool for you to view on elements on the page. If you have webdeveloper, this may not be what you want. But to be simple this is quite good.
ColorZilla (25/4/2009)
ColorZilla one of the important design tool i forgotten! This is used to check the color of a particular element in your browser, adjust it and paste it on another program. Great stuff!
Status-bar Scientific Calculator (25/4/2009)
You will need this scientific calculator to help you calculate width and height or some graphic animation. This is something you will find it handle. It allows you to calculate on the browser instead of searching for the calculator on your desktop. We are talking about speed up web development ain't we? =D
CoolPreview (25/4/2009)
need inspiration? But there are so many links available? Preview it before clicking it then! This way you only see what you like and filter all the bad ones. Perfect for generating ideas and inspiration!
GidFox (29/6/2009)
GridFox Draws a grid on top of a website. This is useful for checking designs that are supposed to follow a grid-based layout.
And that is all the unique stuff i used on Firefox for my designing work. Notice that some of the important tools are not shown here because i have listen them on the other post which i recommended reading it at the begining of this post. Anyway, if i neglected any important plugin, please share with me and i will update the list again =)
Google who owns majority market share on internet search engine made many web master to optimized their site in order to be listed and indexed by Google search engine. On the other hand, Google play their part to provide web master with relevant guidelines and tools. Although it may be common to most experience webmaster what Google has provided, but webmaster who just started their journey may find this useful. Here are the great tools from Google that you might or might not be aware of. It is definitely one of those SEO tool that you should not miss.
Google Webmaster
Google webmaster tools is a familiar tool that many webmaster has already utilised. Google Webmaster Tools provides you with detailed reports about your pages' visibility on Google. It is a tool that Google has provides to let webmaster aware of problems on their site with Google search engine. This is a must have tool for your website if you tend to optimize your website for Google search engine which you should.
Google Analytics
Google Analytics is another common tool for webmaster even if you have other stats program on your site. It provides you with rich insights into your website traffic and provides you with report on your visitors. These reports can be used to analyze your website to better improve on your SEO strategy. If you are using adwords, this is something you should get and analyze your target audience.
Google Insights
Google Insight is another webmaster tool that are fond by many of us. With Google Insights for Search, you can compare search volume patterns across specific regions, categories, time frames and properties. This means that you can target a specify target audience by comparing the keywords searched by the users in a specifc regions and categories by searching. This help you to analyze which are the keywords you wish to include in your SEO Strategy.
Google Website Optimiser
There are many factors you need to consider to build a SEO friendly website. Google Website Optimiser provides you with the necessary tools to optimize your design and content to improve your overall traffic. It is a testing tool that you will need to optimize your website for Google search engine.
Official Google Webmaster Central Blog
All the news you need for webmaster for Google. Google Webmaster Central Blog gives you the latest tips and information required as a Webmaster in Google. Surely, you can find all the necessary information you for Google search engine in this webmaster Central Blog.
Any other google tools that are useful for search engine optimization? Share it with me!
There are a rare number of Internet Explorer developer extension available on the net. Furthermore, most of them required payment which really discourage poor programmers like me. I have kept a few free Internet Explorer extension of my own and I believe this should be kept in an article and share with everyone else.
Web Accessibility Toolbar
Web accessibility toolbar is an extension for Internet Explorer and Opera developers. The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility. It provides some of the function such as resizing, validating, doc info and etc. it is one of the freeware available for Internet Explorer.
DebugBar
This is the most advance debugging tool for Internet Explorer. Firefox has Firebug and this is what IE has. It has the following features,
DOM Inspector: View DOM Tree and modify tags attributes and css attributes on the fly to test your page
HTTP Inspector: View HTTP/S request to check cookies, GET and POST parameters, view server info
Javascript Inspector and Javascript Console: View javascript functions for easier debugging, see Javascript and AJAX code
HTML Validator: Validate HTML code to correct and optimize your code and html size of your page
And many more features: See page cookies, get pixel color on a page, make a page screenshot...
It is free for both personal and education use but commercial will have to acquire a license for it.
Internet Explorer Developer Toolbar
Crap. I understand this is a ALL browser website tools but this one i just can't let it go anywhere else! Firefox has Firebug and webdeveloper to fire out all the bug in Mozilla, IE has developer toolbar! This toolbar is created by Microsoft and gives most of the ability of both Firebug and webdeveloper but not all of it. This is something you should download and install for your web development or debugging for IE.
NitobiBug
One of the great crossbrower javascript debugging tool. NitobiBug is JavaScript object logger and inspection tool similar to Firebug but unlike Firebug, this support many other browser which you can use for your debugging with ajax and javascript. This is one of the best debugging tool available for other browers.
Fidder
Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and "fiddle" with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.
Web Development Helper
Web Development Helper is a free browser extension for Internet Explorer that provides a set of tools and utilities for the Web developer, esp. Ajax and ASP.NET developers. The tool provides features such as a DOM inspector, an HTTP tracing tool, and script diagnostics and immediate window. Web Development Helper works against IE6+, and requires the .NET Framework 2.0 or greater to be installed on the machine.
Update: 23/4/2009
Firebug Lite
A excellent extension for Internet Explorer, Firebug Lite. This extension simulate some Firebug function in Mozilla Firefox for greater debugging possibility in Internet Explorer! Credit goes to Rich for being this up!
If the above doesn't really provides what you need for internet Explorer debugging especially in CSS, you may want to use web based tool when debugging in Internet Explorer. That is all i have from my side. What other Internet Explorer tools you have to debug your CSS and JavaScript? Share with me!
If you are not using Firefox, you may lose out the advantages that Mozilla Firefox has provided for web developers. But this doesn't means that you must develop in Mozilla Firefox. Some people will prefer to develop their web application on some other browser instead on Mozilla Firefox especially when majority of the normal users are using Internet Explorer as their default browser. For Mozilla Firefox developers, there is a list of useful plugin that may be useful for you. Nonetheless, this article will also be equally interesting for your collection. Web based tools has become a powerful tool for many users nowadays not only developers and designers are using it but even normal users love it. In this article, i will share with you a list of web based tools which i personally keep. Hopefully, you can use it and speed up your own web development. Please take note that the 28 in the title is the initial release of tools i have, this post will be updated with more web based tools in the future. If anyone suggested something good for web based tools or i found any, i will update this list again. I believe this will be the largest collection of web based tools on the internet which is consistently updated and maintained.
Koders
Koders a search engine that allows you to search for any codes not only PHP. There are many valuable source code available in Koders that you should be aware of. This is a must have link for your web development need! This will definitely speed up your development process.
gotAPI
This is also another must have link. gotAPI is another search engine that provides you with the essential API for your reference need. It allows you to search for any methods or rule for that particular language. This is not only limited to the above picture shown on their website. They also provides API for frameworks and application language API such as C++, j2SE and lots more. MUST CHECK THIS OUT! This is a one stop reference need for your web development!
POG
POG is a web based tool that automatically generates clean & tested Object Oriented code for your PHP4/PHP5 application. This way you won't have to repeatly generate all these codes manually whenever you want to start a new PHP class. It makes your backend web development quicker and more secure for beginner objecct oriental programmers in PHP.
PHPAnyWhere
This online editor gives you one best thing. Portable. Imagine you do not have to keep any codes and editor with you when you are outstation or your computer just breaks down? If you are a busy person who is required to handle both family and work. This maybe the thing you are looking for. It allows you to code anywhere and definitely speed up your web development and secure your coding copies.
CompressorRater
Compressor rater compress your javascript and rate those compressing algorithm in each library such as YUI compressor, gzip, etc.. This is useful to compress your javascript codes with more than 1 library and get the smallest site to optimal your website load time. It provides you with the duration and the amount of size reduced by the library. This means that no matter what, there will always be one library out there that can compress and optimize your complex javascript codes. Optimize your web development now!
Javascript Regular Expression Validator
Need a JavaScript validator for your regular expression? Try this site. Other than validation, it also provides you with useful library and resources for you to work with regular expression.
Javascript beautifier
This is not something really impressive about but its something i need. Especially when I'm writing tutorials to share as i tend to write my codes in 1 straight line without break,this web based JavaScript application helps organize my code neatly so that my visitor can read and understand. Definitely a useful JavaScript organizer for my web development need.
JavaScript Regex Generator
This is one of the kind. This helps simplify your brain and optimize your web development by generating regular expression for your pattern matching need.
JSBin
JSBin is used to test your snippets of codes on the fly. Just paste all your codes into JSBin and debug your code in there. You can save the snippets and share with others online. People can review and help you with this snippets URL you provide. However, if the URL is being left alone for 3 months without review by anyone, it will automatically be deleted from the server.
JSLint
JSLint is one of the hardly see JavaScript online verifier. It verify your codes to see if there is any errors on your JavaScript. There are many features and settings that you can use to customize verification algorithms to suit your needs. If there is no debugging tools, you should use this.
CleanCSS
Unlike many CSS compressor out there which may possible cause your CSS to break down, CleanCSS provides you with a 'only safe optimizing' option. It also provides many other related things other than optimizing and compressing. It helps you to format you CSS nicely for viewing purposes too. Other features include merge shorthand,sorting and etc.
CSS Redundancy Checker
Have many CSS rules and forgotten which one is useless? CSS Redundancy checker can help you! It helps you check which CSS rule is currently not in use and can be removed safely. Perfect stuff for optimize web development purposes.
Selectoracle
This is something you may like if you are not a professional CSS coder and wish to understand the code written by certain code. Selectoracle translates your CSS rule set into pure English so that you could understand and improve your CSS skill. Definitely great stuff for people who just started or is interested in getting their CSS skill brush up.
Tinglets
A cross browser CSS web application. Tingelets are a set of bookmarklets that you can be placed in your browsers bookmark bar. When clicked, they highlight a certain tag or set of tags in a specific color or background tile. They are very handy for quickly looking at web layouts in different browsers. You can either highlight tags directly or type in a tag, id or class name to highlight the matching element(s). This tells you where have your dynamic content has disappeared to and it make tracing easier.
PXtoEM.com
This is one of the tool you will only find one way either px to em or em to px. This web base tool provides both way!(finally) It is extremely useful for you when dealing with css and dynamic effect. Finding the exact pixel or em will really save you a lot of time on web development
Conditional CSS
Don't wish to write weird symbols just to perform some hack that some browser cannot be detected? Use conditional CSS instead. It allows you to write CSS rule set in conditional if-else case. This way you can cater for all different browser need without losing readability of your CSS rule set.
CSSFly
Mozilla Firefox has webdeveloper addon extension for editing CSS on the fly. Other browser have CSSFly! CSSFly not only allows you to edit your CSS but also xHTML on real time to build up your template before throwing the CSS or xHTML code to your web server. Debugging has never been easier with CSSFly. This is one of the most useful web based application you should know when debugging any layout issues with other browsers.
Pingdom Tools
Pingdom test your web efficiency just like YSlow in Firefox, Unlike YSlow, it does not tell you what to improve. But with information on which page is rendering slowly, you should be able to improve your site in no time!
W3C CSS Validation
Unfortunately, CleanCSS does not have a validation service built-in for you. Before you use CLEANCSS, it is best to validate your CSS. What place more reliable than the old W3C Offical site CSS validation service?
W3C HTML Markup Validation
The official W3C HTML Markup validation service. When all fail, this is most reliable!
mobiReady
Using mobile phone for surfing purposes is getting more and more common nowadays. Ensuring that your site is also compatible to mobile web browser is equally important nowadays. mobiReady is a testing tool to evaluates mobile-readiness using industry best practices & standards. It provides you with a report and a in-depth analysis on how well your site performs on a mobile device. Want to cater for mobile user? This web based tool is something you cannot miss.
Wave
WAVE is a free web accessibility evaluation tool. It helps you to check any broken link on your page and report back to you. As you know, even humans do not like broken links not to mention search engine spiders. It is important that you ensure that your site is free from broken links! There is also a Firefox addon for WAVE.
Browsershot
Browsershots is a web based tool that makes screen shots of your web design in different browsers. This way you will know whether your website is having problem with other older browsers that user might be using currently. It has many browser support and is able to test your site compatibility with different screen size. Excellent for testing your web development design!
Webwait
WebWait work similar as PingDom, the differences is that webwait allows you to bring up a bookmark icon and benchmark any website you came across. If PingDom doesn't work for you, webwait will definitely serve you unconditionally.
test everything
This is a crazy web based tool. It basically allows you to test EVERYTHING. From SEO to Validation to quality, its everything. If you are not aware of this tool. You should visit them up and play with it. Its really interesting.
TAW
Unlike WAVE which is also a web accessibility testing tool, TAW is like an old man telling you and advicing you what you should not do and what you should have done on your site. In order to improve your site web accessibility.
Geotak Netrender
Ever wonder how will your website looks like when it goes way down to IE4.0? If you have like i do (which scare the hell out of me), you should visit this site. It provides you with various version of Internet explorer for you to test your website. This web based tool helps verify your website compatibility with Internet Explorer.
Net2FTP
Don't have a ftp application on the PC you are using right now? Use this web based ftp instead. It is very easy to use and allows you to ftp anywhere!
Update After initial Post
Total Validator
Total Validator is a free one-stop all-in-one validator comprising a HTML validator, an accessibility validator, a spelling validator, a broken links validator, and the ability to take screenshots with different browsers to see what your web pages really look like. Something impressive that i missed. This is something you must bookmark for your web development.
HTML Tidy
Some company web portal pages are just horrible. Looking at how the HTML is being written all over the place just give me headache. If you are like me, try HTML Tidy and it might just save your time on your web development.
Rockstar Apps
There are two application currently in Rockstar Apps that can definitely assist you on your web development need, Rockstar Optimizer and Web Profiler. RockStar Optimizer helps you optimize your website entirely by compressing, concatenating, rebuilding your CSS and JavaScript. On the other hand, Rockstar Web Profiler give you in deep information on your web application and site. Information such as the duration spend on server and client side, resources being used in a chart and etc. which is of course more powerful than most simple web based application. But you will have to register in order to use. It is a free service by Rockstarapps.com. Credit goes to Bob who suggested this amazing tools.
prettyprinter (27/04/2009)
This is a multi code beautifier! it can beautifier PHP, Java, C++, C, Perl, JavaScript, CSS in one box. This means that if you have multiple different languages in your code, this can be in great help when individual beautifier won't work. An example will be HTML+CSS+JavaScript page.
HTML2PDF converter (29/6/2009)
Tired getting on to website just to take a look at those web cheat sheet? This safe LOT's of time by converting all these cheatsheet on the web into pdf and save them into your local computer. Definitely make your life easier looking at cheat sheet instantly on the wall!
Strip Generator (29/6/2009)
i haven't found my love for this application yet. But this application help you create the perfect strip for your web design. Pretty easy and cool. Most designer will love this site.
URL2jpg (29/06/2009)
JavaScript CSS properties references (08/08/2009)
Don't know which element properties can be used while coding in JavaScript to style your document? This site provides you with all the necessary CSS properties references that can be used in JavaScript!
Don't want to change to pdf format? Change your cheatsheet to jpg format instead! Just place them into the url and convert them to a size selected and your web cheat sheet will instantly become an image for your wallpaper!
Color Suckr
Something necessary for your web designing process. This online tool helps you create a color scheme out of the image you use in your web design!
Aviary Screen Capture
This might be the next cross browser checking tools you will be using in the future. This is a screen capture tool but currently do not have the ability to capture screen with different browser yet. However, it is being implemented. We shall wait and see!
The video said it all. Other than just sending HTTP Request, there are, of course, other things that can be done with this tool.
Spoon Browser
An interesting web based tool that allows you to run different version of browser on your local disk without the necessary to install the standalone version. However, it does required you to install a plugin in order for all these to work. But you will be able to run different type and version of browser to test your web site. Pretty cool.
HTML Entity Character Lookup
This web based tools allows you to quickly search for any HTML entity character with just a few click. Something both Web developers and designers would really LOVE to have. This tools really help reduce time to search for a particular entity on Google!
Anything Else?
The above materials are arrange according to groups. Hope this is useful for you guys! Any other fine made web based tools that you are using for your web development and i'm not? Inform me about it!
