Mar 4 2010

10 Popular Firefox Add-ons for Web Developers

We searched forums, blogs, and TwitterTwitter to find out which FirefoxFirefox add-ons are most popular with web developers, and we came up with this top 10 list.

Every plug-in on the list offers outstanding utility to developers who install them in their browsers. In fact, some of them are even considered indispensable. And they’re all available as free downloads for Firefox, right now.

If you know any other developer staples that didn’t make our top 10, be sure to share them with us and our other readers in the comments. And if you’re more into Google ChromeGoogle ChromeGoogle Chrome, be sure to check out our list of 10 essential Chrome extensions for developers.


1. Firebug


With Firebug, you can edit the CSS, HTML, and JavaScript on any web page live without navigating to a different application. Changes can be made and previewed in real-time. The add-on also comes with network activity analysis tools and a JavaScript performance profiler. Like the Firefox browser itself, Firebug can be extended with plug-ins that add new features.


2. Web Developer


The Web Developer add-on is the most powerful and dynamic extension in this list; it adds a toolbar that lets you do numerous useful things.

You can disable Java, disable or view cookies, disable CSS, view styles, see detailed information on forms, disable images, find broken images, view JavaScript, display all kinds of behind-the-scenes information, edit HTML, show hidden elements, resize the window to a specified resolution, validate code and much more.


3. ColorZilla


ColorZilla is a color picker that lives down in your browser’s status bar. Just click the ColorZilla button and move the cursor over the color you want to find out about; you’ll be given a reading that includes the color’s RGB values and the hexadecimal code you need to duplicate the color on your own site. ColorZilla also includes a color wheel, a page zoomer and a measuring tool.


4. HTML Validator


HTML Validator appears as an icon in the status bar, and displays the number of HTML errors Firefox encountered when opening up a web page. You can then dive into the HTML code to investigate what caused the errors.

Be warned that when you navigate to the Firefox add-on page for HTML Validator, you’ll be told that the add-on isn’t available for download for your operating system if you’re a Mac or LinuxLinux user. Take a quick trip tothe developer’s website and you’ll find versions for several platforms, though.


5. FireFTP


FireFTP is an adequately featured FTP (File Transfer Protocol) client that runs inside Firefox. When you execute it, it appears as an extra window just like Firefox’s bookmark or download managers. Features aren’t just limited to the basics; you can perform integrity checks or searches, sync directories while navigating, compare directories and so on. This add-on should meet the needs of the majority of FTP users.


6. IE Tab


Microsoft’s Internet ExplorerInternet Explorer web browser is barely used by web developers, but it’s the most popular browser in the world at large. With IE Tab you can open any website in a tab that’s actually running IE instead of Firefox. That way, you can more easily make sure your website runs correctly for millions of people who aren’t using Firefox.

Note that IE Tab is not available for Mac or Linux, since you need to have IE installed for it to work and there are not any currently supported versions of IE for non-WindowsWindows operating systems.


7. MeasureIt


With MeasureIt, you can draw a rectangular ruler anywhere on the website to get the measurements (height and width) in pixels of any element or space. Similar functionality is offered by ColorZilla, so running both add-ons at the same time would be redundant, but this plug-in is nevertheless hugely popular.


8. Greasemonkey


Greasemonkey allows more advanced customization of your browser by executing custom JavaScript scripts that change the way websites are displayed. Hundreds of scripts are available, and many of them are tailored to specific websites. For example, we’ve covered the Facebook Friends Checker script in the past; it monitors your friends list when you’re logged in to FacebookFacebook and notifies you when one has been removed.


9. View Source Chart


When you look at the source for a web page using Firefox’s normal tools, you’re given a massive block of barely-organized text; it’s not very easy to scan and look for something specific. View Source Chart displays a web page’s source code in a set of smartly divided, colored partitions. It visually represents tag boundaries and DOM structure so you can navigate efficiently without getting lost in the noise.


10. Aardvark


Use Aardvark to select elements on a website and perform any one of a broad selection of functions on them. You just click on an element and hit one of several keyboard shortcuts. Possibilities include hitting R to remove the element, W to widen it, I to isolate it or V to view the element’s source. Hitting H for “help” brings up a list of all 14 shortcuts.


Feb 4 2010

11 Outstanding Online Resources for Web Developers

If you’re a web developer, you’re almost certainly constantly looking for ways to improve your skills, expand your technology arsenal, and keep on top of the latest trends in development and design. Whether you need to pick up a new coding language, get informed about new standards, brush up on best practices, or simply get inspired by great examples from your peers, we’ve collated a number of great resources to help you stay at the top of your game.

Have a look at some of the online repositories for great development information and inspiration below, and be sure to tell us about any other trusted sources we haven’t included in the list that other developers should check out.


1. W3 Schools


Featuring one of the largest collections of tutorials and reference articles for web developers on the internet, W3 Schools offers a huge assortment of learning and training resources on just about every relevant language and web service in use on the web today. You’ll find content tailored towards the full range from beginner to expert developer along with code examples, quizzes, tutorials, and reference guides in a relatively clean and well-organized site complete with a well-trafficked forum community.


2. A List Apart


Taking a holistic approach to the subject of web development, A List Apart is “for people who make websites” including designers, developers, and online content creators of all stripes. From its origins as a mailing list in 1997, to its official launch as a website the following year, and on into today’s ALA 4.0 incarnation, A List Apart has consistently produced and curated top notch content at the intersection between design and development for the web.


3. Webmonkey


Now a property of Wired Digital, Webmonkey has been a resource to developers on the web with a long and storied history stretching back to 1996. Having been brought back to life twice during that time, Webmonkey now operates as a wiki, featuring contributions from the developer community to an extensive code library, reference section, and tutorial clearinghouse.


4. Dev Shed


Combining extensive coding tutorials with an active forum community, Dev Shed is one of a family of interconnected sites offering free guides and instructional material to web developers. From language tutorials to webmaster tools to example scripts, the Dev Shed collection has something for webdevs at various skill levels and technology needs.


5. Smashing Magazine


Aimed at both web designers and developers, Smashing Magazine is a frequently updated and independent web publication serving up quality information and community discussion surrounding best practices and techniques on the web. Though the heavier emphasis is on design, the articles, resources, and tools address dynamic HTML technologies, WordPressWordPress template coding, and development software as well.


6. Developer Tutorials


Dedicated to “helping ordinary people create extraordinary websites,” Developer Tutorials has offerings for major languages and multimedia production software. In addition to free scripts and extensive developer manuals, the site also has sections for finding reputable online services for common development needs, and to help with projects where you may need to outsource certain components.


7. Ajaxian


A great resource for folks building dynamic web content, Ajaxian is a long-running blog featuring news, editorials, podcasts, resource links, code examples, and more. Less a repository of tutorials and more a timely resource for news and developments of interest to dynamic web builders, Ajaxian also features an active community of readers and commenters in addition to its experienced staff of writers and practitioners.


8. DZone


The simplest analogy is to think of DZone as DiggDigg for developers. The link-sharing community surfaces great resources of interest to webdevs as well as providing free reference cheatsheets, white papers, and original editorial articles as well.


9. IBM developerWorks


A clearinghouse for tutorials and articles on a wide range of development topics, IBM’s developerWorksexplores dynamic web content technologies as well as related fields including systems administration and open source applications. Various learning resources and downloads are offered surrounding a wide variety of web projects from PHPPHP and DHTML to wikis and web service mashups.


10. Sitepoint


Having waxed and waned in popularity over the years, Sitepoint has survived the changing tastes and standards on the web to currently bring fresh perspectives and information for both developers and designers. Instructional videos are available in both free and paid series flavors, a well-organized reference section covers CSS, HTML and Javascript, and an active forum community round out this resource for webdevs.


11. O’Reilly


Best known for its extensive book series covering a wide variety of technical topics, O’Reilly’s online site is also home to a number of web resources both free and paid of interest to web developers. An Answers platform provides a community knowledge base, original blog and video content provide news and commentary, and the Safari Books Online service gives access to thousands of technology reference books from major publishers for a monthly subscription fee.

Source: mashable.com


Get Adobe Flash playerPlugin by wpburn.com wordpress themes