Tag Archives: developers

35 Absolutely Useful Firefox Plugins For Web Designers And Developers

Firefox is a very popular browser especially among web designers. There are more than 70% of WDB’s readers are using Firefox. There are few reasons which make Firefox so popular compare to others and obviously its plugins had contributed a lot for that.

Today, we are going to look into 35 useful Firefox extensions for both web designers and web developers. You are not required to install all extensions, as this will cause your Firefox slow and lag. Without talking much, let’s look into these extensions.

1. Firebug
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

2. Window Resizer
The Browser Window Resizer is useful for testing different screen sizes. It accurately resizes your browser so you can test to see what a web page looks like in all of the standard resolution sizes. Supports the 640×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200 resolutions.

3. Total Validator
Provides true HTML validation (HTML 2.0 to XHTML 1.1) using the official DTDs, plus added attribute checking. So you no longer have to put up with the limitations of the W3C validator (no type checking) and tools like HTML Tidy which interpret the standards incorrectly (they don’t use the official DTDs).

4. Fireshot
FireShot is a Firefox extension that creates screenshots of web pages (entirely or just visible part). Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations.

5. FireRainbow
FireRainbow is a Javascript syntax highlighting for Firebug 1.3+. It requires Firebug 1.3 or higher.

6. HTML Validator
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.

7. Library Detector
Detects what javascript libraries are being used on the current page and displays the result as icons with detailed tooltips in the statusbar.

8. Tamper Data
Use tamperdata to view and modify HTTP/HTTPS headers and post parameters. Trace and time http response/requests.

9. Firefinder for Firebug
Firefinder is an add-on to Firebug, to help find HTML elements matching chosen CSS selector(s) or XPath expression. Type in desired filter and view the results.

10. JSONView
With the JSONView extension, JSON documents are shown in the browser similar to how XML documents are shown. The document is formatted, highlighted, and arrays and objects can be collapsed.

11. JavaScript Deobfuscator
This add-on will show you what JavaScript gets to run on a web page, even if it is obfuscated and generated on the fly.

12. FireFTP
FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

13. HTTPFox
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. It aims to bring the functionality known from tools like HttpWatch or IEInspector to the Firefox browser.

14. Aardvark
Powerful and user-friendly selector utility for selecting elements and doing various actions on them. It can be used for cleaning up a page prior to printing it (by removing and isolating elements), and for web development.

15. Firecookie
Firecookie is an extension for Firebug that makes possible to view and manage cookies in your browser. Firebug has to be installed in order to use this extension.

16. Dummy Lipsum
Generate “Lorem Ipsum” dummy text (from http://www.lipsum.com). Minimum text length: 5 words. Context menu option on form inputs (”Insert Dummy Lipsum”). This option fills automatically the selected field.

17. Pixel Perfect
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.

18. EditCSS
Stylesheet modifier in the Sidebar.

19. Firediff
Firediff implements a change monitor that records all of the changes made by firebug and the application itself to CSS and the DOM.

20. FirePHP
FirePHP enables you to log to your Firebug Console using a simple PHP method call. FirePHP is ideally suited for AJAX development where clean JSON or XML responses are required.

21. OperaView
Open pages in Opera from Firefox and Mozilla context menus. Very useful for web developers.

22. DOM Inspector
DOM Inspector is a tool that can be used to inspect and edit the live DOM of any web document or XUL application. The DOM hierarchy can be navigated using a two-paned window that allows for a variety of different views on the document and all nodes within.

23. YSlow
YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.

24. CodeBurner for Firebug
CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS.

25. IE Tab
This is a great tool for web developers, since you can easily see how your web page displayed in IE with just one click and then switch back to Firefox.

26. CSS Viewer
A simple CSS property viewer.

27. ColorZilla
Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.

28. MeasureIT
Draw out a ruler to get the pixel width and height of any elements on a webpage.

29. Web Developer
Web Developer adds a menu and a toolbar with various web developer tools.

30. ViewSourceWith
The main goal consists to view page source with external applications but you can also open page source as DOM document, open CSS and JS files, open images with your image viewer and a lot of other features.

31. GridFox
GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.

32. Screengrab
It will capture what you can see in the window, the entire page, just a selection, a particular frame. Basically it saves web pages as images – either to a file, or to the clipboard.

33. Pencil
Pencil is a free and open source tool for making diagrams and GUI prototyping that everyone can use.

34. Palette Grabber
Palette Grabber creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, Paint.NET, or OS X based on the current page.

35. Dust-Me Selectors
Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors.


10 Reasons why – Ruby on Rails

Your development team has been frustrating you, projects start and four weeks later the development team is still developing the framework, your budget is running out. You want productivity but just don’t know how to get it. Is there an answer? One of your developers keeps mentioning this great framework called ‘Ruby on Rails’. Is this the answer? This article discusses the positives and the negatives in moving to this new technology.

1. Ruby on Rails provides a consistent approach to building web applications with an out of the box architecture. Traditionally starting a new web application is a fairly heavy weight process, you typically need to survey and choose your various software components to solve the common architectural problems of persistence, logging, build scripts, application configuration, web tier components and workflow. With the Rails framework these decisions are already made for you, so you can get on to understanding the business problem and quickly build a working system. You become productive in minutes not weeks or months.

2. In a Rails application, a pragmatic philosophy of convention over configuration is taken, this is apparent in all layers of the architecture with the highest productivity gains noticeable in the relationship between the model and the database. Once the developer understands the rules and constraints, Rails magically connects your view to your controller and model, and your model to the database. You don’t need generators or specialised tools to manage this, it all just works.

3. Unlike other productive web scripting languages, Ruby is a fully featured object-oriented language. Ruby also adds additional power with mix-ins modules which contain independent code to inject into your classes, blocks and closures simplifying client code behaviour. Its dynamic nature gives it power beyond static languages such as .NET and java, and the benefits are apparent by how the Rails framework has been put together itself.

4. Unlike other web templating technologies, the templating technology built into Rails can be used to generate web pages, emails, xml documents or any text document that requires dynamic content.

5. Rails includes a well thought out object relationship mapping tool, ActiveRecord, which provides your answer to database persistence. Your model is seamlessly persisted to the database. Transactions, inheritance models, validation, and caching have all been thought out and are production ready. With Rails you become a lot closer to the structure of the database than traditional object-oriented development methodologies. This is a good thing as over time as the database will no doubt end up being your project’s most valuable asset.

6. Rails includes support for a variety of web technologies. Every web application needs email integration at some point and Rails provides an out of the box smart solution, and as with other Rails technologies it gives you the complete package down to configuration in development, test and production environments. Ruby on Rails also supports web services, the integration with Rails due to the dynamic nature of Ruby is simply, clean and seamless. If you are moving into the Web 2.0 space, Rails provides a rich abstracted interface to implementing AJAX operations.

7. Generally software projects do not mature if at all to the point of having a solid foundation to perform database migrations and rollbacks between environments and across development systems. However with the Rails framework you will be delighted with the implementation of database migrations for applying and rolling back database changes. You enter your update and rollback scripts in Ruby, Rails understands the current version and can move forwards or backwards to any database version.

8. For development productivity, the shorter the gap between the change and test cycle the better. In Rails, changes are reflexed immediately within the runtime environment so developers can quickly iterate between fix and test cycles without any expensive redeploys. Ruby code is also easily testable. Methods and objects can be replaced at runtime so software components can easily be tested without resorting to external tools or generators.

9. Getting started with Rails is easy as generators will propel you along. An experienced Rails developer will also become aware of numerous idioms available within the Rails framework that shared the amount of code a developer need write. Overall less code to write means lower complexity, higher productivity and less bugs.

10. Ruby has been around for a long time, the Rails framework which has deservedly propelled Ruby into the spotlight has hit version 1.1 and is production ready. Ruby and the Rails framework is open source and well supported by a clever team of contributors.

*So what are some of the cons?*

1. If you take time to follow the Ruby examples and tutorials it may give you a false sense of productivity. They typically follow the formula of creating a database model, configuring a connection to the database and joining it up to the model controller and view by use of the generators. This is all very simple involving a dozen or so lines of code. In the real world however you will be working at higher level of complexity and will need to understand multiple facets of Ruby and the Rails framework to be productive in churning out business functionality. You will need to invest in getting up to speed with the language and framework. As Ruby is a dynamic language, more automated testing is required. Your developers will need to become more disciplined and rigorous in creating unit tests as part of their development process.

2. As the Rails framework is not in widespread use compared to technologies such as Tomcat and ASP.NET, you may not have access to the same level of community support from various website forums and open source libraries.

3. If the type of development you are doing is glueing together existing systems or building back end systems, be aware that Rails is optimized for building web applications, your host system or enterprise database may not have the integration module you require for Ruby.

4. If your system is likely to grow to that ‘10 person, 3 year project’, there are several factors you need to consider, you may find the level of tool support lacking. Features such as find references, refactoring techniques and code-complete are still not available on the current set of IDE’s. This however is hopefully only a problem of time, RadRails a version of Eclipse built for Ruby development and is now a viable and great Ruby IDE. New features are continuously appearing from the core version of Eclipse.

After considering the pros and cons, my advice would be that if your business has tight timelines and limited IT budgets (and who doesn’t?), and a requirement for web driven database applications then I seriously suggest considering investment into the Ruby on Rails framework.

Flash Catalyst

Adobe Flash Catalyst is a new professional interaction design tool for rapidly creating user interfaces without coding.

  • Create interactive prototypes with the ability to leverage them in the final product.
  • Transform artwork created in Adobe Photoshop and Adobe Illustrator into functional user interfaces.
  • Publish a finished project as a SWF file ready for distribution
  • Work more efficiently with developers who use Adobe Flash Builder4 to create rich Internet applications (RIAs). Designers use Flash Catalyst to create the functional user experience then provide the project file to developers who use Flash Builder to add functionality and integrate with servers and services.

Create the user experience through an approachable interaction design tool for designers with no coding required:

  • No coding required: Create the user experience and make it functional without coding.
  • Sell your ideas: Be able to show a functional design instead of static screenshots to communicate your ideas.
  • Ensure your creative vision is accurately expressed: Design with the expressiveness of Flash Player including graphics, typography and 3D effects.

Rapidly create and deliver a finished SWF file or collaborate more effectively with developers:

  • Fast learning curve: If you can use Photoshop or Illustrator you can quickly learn to use Flash Catalyst.
  • Fast Interaction Design: Transform native Photoshop and Illustrator files into functional user experiences. Publish finished projects for distribution as a SWF file.
  • Collaborate more effectively with developers: Provide Flash Catalyst projects to developers who use Flash Builder to add additional functionality and integrate with servers and services.

Flash Catalyst and Flash Builder are based on the open source Flex 4 framework.