Gecko DOM Code Hints 0.2

Finalizei a versão 0.2 da Gecko DOM Code Hints – uma extensão para o Dreamweaver que adiciona code hints ao Gecko DOM – e nessa versão há correção de bugs encontrados na versão 0.1.

Os bugs estão relacionados a duplicação dos itens que apareciam na lista do Code Hints.

Leia o poste relacionado a versão 0.1 – Gecko DOM Code Hints – Extensão para o Dreamweaver

Mais informações sobre a Gecko DOM Code Hints no meu Labs.

Faça o download da Gecko DOM CodeHints versão 0.2.

Gecko DOM Code Hints – Extensão para o Dreamweaver

Após a criação da freeDOM.js inside Dreamweaver – uma extensão para o Dreamweaver que oferece Code Hints para as funções da freeDOM.js – acabei de finalizar a versão 0.1 da Gecko DOM Code Hints.

A Gecko DOM Code Hints é uma iniciativa minha em oferecer Code Hints ao se trabalhar com o DOM no Dreamweaver. Inicialmente nesta versão inicial 0.1, você terá Code Hints para todos os métodos e propriedades do objeto document. Além do Code Hints há algumas tooltips dos métodos do objeto document.

Exemplo de uso

Ao digitar o prefixo: “document.” (sem aspas) o Dreamweaver exibirá um menu popup com os métodos e propriedades do objeto document. Como demonstrado na imagem abaixo:

Exemplo do CodeHints ao digitar document.

Agora, veja um exemplo da tooltip para lhe ajudar no preenchimento dos parâmetros dos métodos.

Exemplo da tooltip da Gecko DOM CodeHints

Faça o download da Gecko DOM CodeHints versão 0.1.

Aguardo seu feedback :)

Firefox como aliado ao desenvolvedor web – código fonte

Particularmente sou um viciado em olhar códigos fonte de um site. Não consigo me controlar, ainda mais quando o site está devidamente dentro dos padrões da web.

De qualquer forma – por vício ou não – todo desenvolvedor vive atrelado a códigos fonte, mesmo quando precisa ir dormir para descansar, uma vez que algo que precisa ser corrigido e melhorado.

No Firefox há um visualizador de código fonte nativo acessado através do menu View > Page Source (Ctrl + U), o qual é aberto em uma nova janela – dando ao desenvolvedor uma maior visibilidade do código em si – e com o recurso de colorir as tags HTML. Portanto é agradável visualizar o código fonte no Firefox, ou não? Se você acha que não, talvez você queria Alterar o visualizador de código fonte do Firefox.

O Firefox além de destacar a sintaxe dos códigos e colorí-lo, permite que você analise somente uma parte do código fonte desejado. Por exemplo, selecione através da página uma parte dos elementos nela exibidos; posteriormente clique com o botão direito do mouse e selecione a opção View Selection Source. O que aconteceu? Exatamente, foi exibido no código fonte somente o código HTML dos elementos que você selecionou. Isso facilita a localização de uma parte da página entre todo o código fonte.

Na minha opinião, o grande problema do visualizador de código fonte do Firefox está relacionado com o fato dele exibir apenas o código fonte que foi carregado quando você abriu a página, e não o que o código fonte realmente é – na maioria da vezes.

Deixa eu me explicar melhor, você abre uma página e exibe o código fonte; até esse momento ambos estão condizentes um com outro. Mas, se você utilize algum recurso oferecido pela página que insira/altere ou exclua algum elemento através do DOM, por exemplo. O Firefox já não exibe o código fonte com tais modificações e sim o mesmo quando a página foi carregada.

A solução para termos um código fonte sempre sincronizado com o real estado da página é a utilizar a opção View Generated Source disponível no Firefox através da extensão Web Developer. Esse recurso também é encontrado na extensão Firebug.