Neste artigo, vou dar uma dica para os colegas desenvolvedores web. Trata-se dos ambientes simulados de desenvolvimento, ou “fiddles“. Em uma tradução ao pé da letra do inglês, “fiddle” significa violino. Na gíria, significa defraudar, enganar ou falsificar. Neste caso, podemos traduzir como simular.
Enquanto estou programando, as vezes tenho que dar uma parada para pesquisar sobre um comando ou função do Javascript ou PHP. Nestas ocasiões, é comum que eu tenha que escrever um pequeno programa, um ensaio, para entender o funcionamento do comanda ou da função. Isso é importante para não “contaminar” o projeto em que estou trabalhando, criando um isolamento entre o que esto pesquisando e o projeto. Não quero escrever linhas de código no projeto e depois descobri que não funciona como desejado ou que o resultado não é o esperado e ter que apagar tudo.
Contudo, para criar este isolamento, eu procurava me desligar totalmente do projeto, abrindo outra janela do navegador, outro editor de textos e por ai vai. Isso, acabava sendo muito trabalhoso, pois na maioria das vezes é necessário criar um arquivo HTML com algum conteúdo como textos, formulários etc., dependendo do que deseja fazer. Então, depois de salvar o arquivo em uma pasta no computador, abri-lo na navegador para ver o resultado.
Com os “fiddles”, a coisa fica mais simples, uma vez que tudo já está disponível em um único lugar. Neste artigo, vou falar de alguns sites onde é possível fazer tudo isso em única tela, escrevendo os códigos necessários e vendo o resultado com um único clique.
Javascript e CSS
Os “fiddles” que utilizo, são sites que apresentam um página com áreas onde o códigos HTML, Javascript, CSS podem ser editados individualmente e outra onde o resultado é exibido e, na maioria deles, tudo isso pode ser visualizado simultaneamente.
Os dois primeiro “fiddles“, de destinam exclusivamente ao HTML, ao Javascript e ao CSS.
JSFiddle
O JSFiddle, é um site que a principio, deveria ser utilizado para testes e ensaios em Javascript. Porém, também pode ser usado para o CSS. No JSFiddle, a página é dividida em 4 seções. Uma para o HTML, uma para o CSS, outra para o Javascript e a última para o resultado gerado. O funcionamento é muito simples. Só é necessário escrever o código que se deseja testar na seção correspondente.
Como exemplo de utlização do JSFiddle, vamos escrever um programa muito simples em Javascript que exibe uma mensagem em uma página ao clique de um botão. A mensagem deve ser exibida dentro de uma DIV, que precisa ter o seu estilo formatado par exibir o texto em vermelho em um fundo amarela e com uma borda tracejada vermelho.
Primeiro, escrevemos o HTML com o conteúdo da página e clicamos em Run no menu do topo da página. O resultado do HTML, será exibido na quarta seção da página. Agora vamos ao CSS onde vamos apenas definir o estilo da DIV, definindo as propriedades de tamanho e cores. Mais uma vez, clicando-se em Run, o resultado é exibido agora com a DIV aparente. Vamos alterar o CSS, ocultando a DIV com a propriedade display igual a none e clicar em Run para ver o resultado, agora sem a DIV.
Na seção destinada ao Javascript, vamos incluir a definição de uma função que será executada quando o botão for clicado. Somente algumas linhas de código bastam para referenciar a DIV, definir a mensagem que será exiba e tornar a DIV visível como pode ser visto na imagem abaixo, e pronto.
Agora clicamos mais uma vez em Run para atualizar a nossa página simulada e depois no botão da página, o que vai fazer com a DIV seja exibida com o texto.
O JSFiddle, tem recursos muito interessantes com a definição da versão do HTML que deve utilizado, a inclusão de arquivos Javascript ou CSS externos, bastando para isso informar a URL do arquivo e a utilização de framesworks e extensões consagrados com o JQuery, Mootools, AngularJS entre outros.
CodePen
O CodePen, diferentemente do JSFiddle, não é somente um “fiddle” destinado ao HTML, CSS e Javascript. Segundo o próprio site, 0 “CodePen é um playground para o lado “front end” da web. É tudo sobre inspiração, educação e compartilhamento“.
O CodePen é uma coleção de projetos de “front ends“. Depois de fazer um cadastro gratuito, você pode escrever o código da sua interface, salvar e disponibilizar para que ela possar ser vista e utilizada. Tem coisas muito loucas por lá como os esses robôs dançarinos, mas o que nos interessa é o seu “fiddle“, que pode ser utilizada por qualquer um até mesmo sem cadastro. O “fiddle” pode ser acessado diretamente no endereço https://codepen.io/pen/.
Uma vez não lá, teremos a mesma estrutura de 4 seções na página. Então para ver como a coisa funciona, vamos voltar ao JSFiddle e copiar os conteúdos das seções HTML, CSS e Javascript para o CodePen.
Uma coisa que diferencia o CodePen do JSFiddle, é que a seção de resultado é atualizada em tempo real. Assim como o JSFiddle, é possível incluir arquivos externos e a utilização de framesworks, incluindo o Bootstrap para o CSS.
A vez do PHP
Os programadores PHP, sabem que esta é uma linguagem com muitos recursos. São centenas de comandos e funções e é impossível decorar a sintaxe de todos. Da mesma forma, fica difícil saber todos os recursos da linguagem. Então as vezes é necessário parar para consultar o manual para conferir a sintaxe de uma função ou à busca de um comando que faça alguma coisa. Mas então, encontrando o que se procura, é necessário testar e ver se gera o resultado desejado. Nesse ponto encontramos o problema do início do artigo. Isolar o nosso projeto do teste. É ai que entra o PhpFiddle (PhpFiddles foi encerrado mas pode ser substituído pelo PHPTester ou pelo OnlinePHP).
O PhpFiddle, como os dois já mencionados no artigo, é um site que disponibiliza todo o ambiente para se testar um script PHP.
Não tem mistério, o funcionamento é o mesmo dos demais. A diferença é que não há a divisão da página em seções mas sim em abas. Depois de incluído o código na aba do editor Code-Space, deve-se de clicar no botão Run ou pressionar a tecla F9. Então a aba de resultado Window é exibida.
O PhpFiddle não aceita apenas PHP mas também HTML e Javascript. Ou seja é possível digitar ou colar o código inteiro de uma página no Code-Space e ver o resultado gerado em Window.
Talvez para para você que não conhecia os “fiddles“, eles possam parecer uma coisa sem muita utilidade. Mas agora, conhecendo, com certeza em algum momento vai sentir a necessidade de utilizá-los. Além do mais, a utilidade dos “fiddles” na aprendizagem é muito grande. Não podemos esquecer a praticidade que os “fiddles” proporcionam no que diz respeito a portabilidade. Ao se cadastrar nos sites deste artigo, você poderá salvar os códigos criados e acessá-los em qualquer lugar.
Por medida de segurança. Os “fiddles” mencionados neste artigos tem alguns recursos bloqueados, mas nada que impeça a sua utilização para ensaios de soluções em projetos web.
E tem mais
Os “fiddles” estão disponíveis para várias linguagens. Além dos já mencionados aqui, existem outros sites com simuladores em várias linguagens. O site fiddles.io tem uma relação de sites de fiddle em Java, LESS, NodeJS, Ruby, Python, RegEx, entres outros.
Espero que o artigo tenha sido interessante e útil. Até o próximo.
