Free Useful Add-ons To Strengthen Firebug

Firebug is probably one of the most helpful tools used when developing websites.

Specially, after JavaScript & Ajax became that much popular, it is hard to findout how we were developing & debugging without Firebug.

This great Firefox add-on, besides the ease of use & continious development by a talented team, has many features that make it a must-have like:

  • working inside browser, no need to switch apps.
  • being real-time, logging every request
  • ability to edit code & see results instantly
  • debugging JavaScript, measuring its performance & more..

It also has another feature, which is extendibility with help of Firefox add-ons.

There are various add-ons that can add more power to Firebug for creating better & faster. Here they are:

YSlow

YSlow Firebug Addon

YSlow is a Firebug add-on for analyzing web pages and getting suggestions on ways to improve the performance (parallel with the rules for high performance web pages).

YSlow grades web pages based on the predefined rulesets or a user-defined one . It also provides tools for performance analysis, including Smush.it? and JSLint. Continue reading

Important Tips to Create a More Usable Web, for designers and developers

Whether it?s your portfolio, a blog, a marketing web site, or a collection of games, we all want to attract visitors to our website and to ensure that they have a pleasant experience.

Usability measures the level of a user?s experience and can be characterized by how easily a given task can be completed; whether it?s done with prior knowledge, or by having the user learn a new way to interact. I think Jakob Nielson probably explained it best when he said:

?Usability is a quality attribute that assesses how easy user interfaces are to use. The word ?usability? also refers to methods for improving ease?of?use during the design process.?

In this article I hope to give you some form of a usability checklist, covering topics from form design to simple navigation tips that you can apply to any Web project.

1. Creating active navigation

Letting the user know what section of the site they?re in, or what category they?re navigating through can be give a huge usability boost to any site. Active navigation is one of those usability concepts that are almost automatic at this point. And we all have our own way of creating it.

The ideal situation for creating active navigation is to do it server-side, because it massively cuts down on the amount of HTML and CSS needed. If generating an active state server-side isn?t an option, manipulating your body element to style each navigation element directly is also a fine choice.

As a third option, you can easily create active navigation with JavaScript.

Your active navigation state should always be different from your hover state.

active and hover navigation example Continue reading

Good practice about Float, best for designers and developers.

What is ?Float??

Float is a CSS positioning property. If you are familiar with print design, you can think of it like an image in a layout where the text wraps around it as necessary.

In web design, an image that is floated remains a part of the flow of a web page. That means that if it changes in size or if the elements around it change, the page will automatically adjust (reflow). This differs from page elements that are absolutely positioned. Absolutely positioned page elements are removed from the flow of a web page. Absolutely positioned page elements will not affect any other page elements, whether they touch each other or not. Continue reading

You better watch out, because the HTML police are about. They scour your code and pick out the most unspeakable crimes against HTML markup. This handy list of ten HTML tag crimes sheds some light on some of the most common coding mistakes and helps provide an alternate solution. Tips include writing valid markup, making semantic choices, avoiding deprecated tags and more!

Crime 1: Placing Block Elements Inside Inline Elements

HTML elements can either be displayed in two ways, Block or Inline. Each tag by default is naturally either a block or inline element. Block elements include divs and paragraphs, that make up the structure of the document. Inline elements on the other hand should sit inside block elements and go with the flow of the document, examples include anchors and span tags. With this in mind, inline elements should always go inside block elements, and never the other way around. Continue reading

Well-Presented HTML Entities: EntityCode

HTML entities (character references) which are used to define reserved characters or to express characters that cannot easily be entered with the keyboard are generally hard to remember.

EntityCode is a website that lists HTML entities in an easy-to-find format. Rather than a long list of entities, they are simply grouped like currency, math, direction, etc.

A must-bookmark for every web designer & developer.

HTML Entities

Continue reading