[Programação]:Carregando Javascript/CSS dinamicamente com jQuery [Revisitado]

Estes tempos estava eu apanhando aqui para umas chamas dinâmicas em Ajax para um componente de banners para um cliente aqui da empresa.

Lendo atentamente a documentação do jQuery, na parte de Ajax, me deparei com a seguinte função:

jQuery.getScript( url, callback ) - Returns: XMLHttpRequest
Loads, and executes, a local JavaScript file using an HTTP GET request.

Nossa, existia uma função pronta para carregamento de Javascript no framework e eu nem tinha notado? Antes da versão 1.2.6, eu inseria via DOM o script conforme função mostrada num outro artigo aqui:

function loadScript(src) {
          $("head").append(
                     $(document.createElement("script"))
                           .attr({
                                   type: "text/javascript",
                                   src: src + "?_" + parseInt((Math.random()*1000000))
                            })
                    )
}

A partir da versão 1.2.6 descobri que a mesma função estava fazendo uma chamada via Ajax, olhei o código-fonte e notei que tinha um condicional caso o que eu queria inserir via DOM era <script>, fazia uma chamada, pegava o resultado e dae sim injetava via DOM. Nada mais é do que a função descoberta na documentação do jQuery, mas feita de um jeito escroto de minha parte.

Eis então minha nova versão para a função de carregamento de scripts no HTML:

function loadScript(src, callback) {
	$.getScript(src, callback || null);
}

Mais simples que a anterior e utilizando a forma certa do jQuery. Caso optem, podem omitir o callback e executarem as funções requeridas depois da chamada da função, só tomar cuidado para que o Ajax seja o mais rápido possivel para não dar erro nas funções.

[Artigo]: Razões que considero para você ser um retrógrado.

Isto são comentários do que eu acho o que poderia ser um desenvolvedor retrógrado, baseado em experiências vividas ou atuais. É chato ficar em ambientes de pessoas que não almejam um conhecimento novo, você acaba se endeusando, sendo arrogante e prepotende… Lógico, todo mundo é menos que você! Tem vezes que nem perco meu tempo tentando explicar, jutando os motivos acima.

Usa Dreamweaver:
Vemos ainda muitos “profissionais” ainda atrelados a esta IDE da Adobe. Ele é bom, muito mas para quem está começando. Quando você adiquire um nível profissional de programação, começará a notar que ele suja muito o código, faz muita coisa atoa, aprende que seu melhor amigo pode ser o notepad. Utiliza-lo ele em modo visual então, se mate!

Pensa que Feeds são para idiotas, não possue um agregador de Feeds:
No começo eu achava isso mesmo, mas a facilidade que ele tem de trazer as informações para você é maravilhosa! Não preciso perder tempo visitando site por site, já tenho eles lá. Não usar um agregador de feeds é outro problema, não compartilhar (exemplo do del.ico.us) o torna alguem retrógrado.

Utiliza ainda IE ou Firefox sem Firebug+Webdeveloper:
Vejo ainda pessoal (não só os alto de data) ainda com fazendo layouts e testando somente no IE. Firefox para que? São para nerds mesmo…
Errou! Firefox é o navegador muito stardard, você tem sérios problemas tambem se não utiliza ferramentes de debug para agilizar seu trabalho.

Não participa de fóruns ou listas de discussão:
Não gosta de compartilhar conhecimento? Só sugar?
Você só posta algo quando tem dúvida e ainda não usa a busca do fórum?

Eu modero o fórum de PHP da WMOnline, compartilho meu conhecimento, pois é isso que um bom profissional faz, ajuda outros (não dando de mão beijanda) a acharem seu caminho para resolução de suas dúvidas. Tanto que diversar vezes ajo como um arrogante lá para a pessoa ver que nunca vai ter coisa de mão beijada, só penso no bem do usuário.

Chamda todo mundo de “viado”, sempre procura ridicularizar os outros:
Este tipo de comportamento que considero muito idiota. Estamos num ambiente de trabalho e você fica o tempo todo ridicularizando seus colegas? Isso é uma atitude muito idiota, de criança ainda. VOcê ganha para ser profissional, conheço muitos que se focassem suas palhaças no trabalho, já seriam CEO. Há horas e horas para brincadeiras, com todo o respeito à pessoa.

Pensa que sabe o sufuciente de HTML/CSS:
COnhecimento nunca é o suficiente, sempre há uma maneira de melhor isto ou aquilo. Já passei por situação que nem provando por A+B que não é semântico utilizar isto ou aquilo ele continuou a manter sua opinião. Sempre procuramos nos atualizar, seguir tendências para melhorarmos no profissional. Não fazer  isto é uma atitude comodista.

Não padroniza CSS:
Segue seu padrão e que se ferre os outros? Você tem que seguir um padrão definido pela equipe e manter aquilo e ser responsável pela auditoria daquilo. Muitos fazem uma folha de estilo nas coxas que temos que pegar e perder tempo criando um padrão. Acontece muito disto por onde passo.

Não faz a minima idéia o que é semântica:
Acha que DL serve para tudo? Adora por DIVS dentro de parágrafos? Tá poco se lixando para o tidyvalidator? Sò validar o código não basta como diria o Diego Eis (tableless), tem que saber ser semântico.

Não participa de palestrar/workshops:
Acha que isso é perda de tempo? Perda de tempo é manter alguem que não ancia conhecimento, opiniões diversas. É mais chato ver ainda empresas que não pensam nisto para o usuário, fico cansado de mandar indicações para meus superiores e eles pensarem que idiotice, empresa que procura não melhorar seu profissiona não merece ter ele no ambiente, um estagiário já basta então!

Não sabe escrever um e-mail num ambiente formal:
Sempre por onde eu passo vejo e-mails mal foratados, que temos que nos esforçar para entender. Sempre sou ridicularizado pois sempre sou o mais formal possível (afinal o ambiente é de trabalho?), especificando o máximo possível para não ficarem dúvidas. Não sabe o poder que tem uma correspondência formal. É feio ver pessoas acima de você que parecem analfabetos escrevendo.

Não utiliza uma IDE de desenvolvimento:
Tirando o Dreamweaver (não considero IDE, apesar de ser), hoje em dia temos Aptana, PDT, Zend, Netbeans para acelar seu desenvolvimento. Utilizar editorezinhos coloridos sem pelo menos um suporte para Ctrl+Space para auto completar? Isso não lhe torna analfabeto (pois você saberá quando utilizar) é só para facilitar seu trabalho.

Odeia orientação a objetos:
Tenho que pegar muita micragem porque os outros programadores tem preguiça de seguirem e manterem um padrão de Orientação. Ultimamente vejo muito disto, nem nomeclatura de classes segue um padrão, variáveis declaradas na hora. Isso é muito feio, seu cartão de visita é seu código!

Não utiliza frameworks de desenvolvimento:
Tem que preguiça de aprender o funcionamento de algo? Sabe que está ficando para trás. Hoje em dia temos frameworks tanto para Javascript (jQuery meu favorito) e para PHP (Zend, Cake, CodeIgniter). Isso acelara seu desenvolvimento e o força a seguir um padrão, um ponto muito grande para você!

Não se interessa por novas tecnilogias:
Delhpi e ASP só o que lhe importa, você consegue fazer muitas coisas mais rápido do que alguem utilziando coisa nova? Mas já penso que você tá meio atrasado nas tendências? Delphi hoje em dia tá sendo muito abandonado, são poucos cliente (geralmente os antigos) e empresas velhas que pensam ainda nisto. Se for usar ASP, prefira o .NET se pensa em Delphi, utilize C#!

Prefere bens supérfulhos do que material de conhecimento:
Prefere gastar seu dinheiro num fone de ouvido novo, num jogo ou ingressos para uma Rave? Pensa que livro é para idiotas? Idiota é você pensar assim. Lógico que temos que nos divertir, mas temos que pensar no nosso cerebro. Se eu fosse um cerebro já tinha abandonado meu dono que pensasse assim.

MSN+Orkut
Se seus passatempos são só isto, parebens, você pode ser uma secretária. Li um artigo que basicamente comparando este tipo de atividade à uma secretária. A Internet tem uma gama de conhecimento, pare de dar em cima da Sandrinha no MSN e ficar comentando em comunidade pornô no orkut, comece a focar no seu profissional.

Sei que muitos argumentos são derrubáveis, mas pensem que sempre há dois lados na moeda

Caso não tenha gostado, sinta-se a vontade para entrar à roda de discusão, pois foi este meu propósito para ter postado isto.

Programação: Garantindo segurança do seu Ajax com PHP

Sempre procurava dispor de alguma segurança em minhas requisições em Ajax. Tanto que meu primeiro passo foi passa-las para POST, mas para quê passar para POST?

Simples: asseguro que a requisição não seja feita via GET, assim já dificulta alguma pessoa com más intenções de tenta explorar bugs em minhas aplicações WEB.

Hoje navegando pela internet me deparei que algumas chamadas de Ajax passavam uma informação via header importante (as bibliotecas decentes de Ajax passam): HTTP_X_REQUESTED_WITH = ‘XMLHttpRequest‘.

Pronto, era o que era necessário para detectar se uma chamada foi feita via Ajax ou não, esbocei esta pequena função para auxiliar:
<?php
function isAjax() {
return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == ‘XMLHttpRequest’;
}
?>

Com isso eu garanto que algumas chamadas só passarão se forem chamadas via Ajax.

Uma outra boa dica é utilizar JSON nas suas resposta, bem mais prático do que retornar um HTML (a menos que o html seja muito grande). Uma função nativa a partir da versão 5.1 do PHP é o json_encode().

Se ainda escreve suas funções Ajax no braço e respostas em HTML, parabéns! Você é um desenvolvedor retrógrado. Com a gama de frameworks (jQuery, Prototype, Mootools, etc) só é atrasado quem quer.

Artigo: Unobtrusive JavaScript com o jQuery

Vendo meus Feeds no Bloglines, me deparei com um artigo muito bom do Ajaxian: Unobtrusive JavaScript with jQuery.

Simon Willison falou na XTech de 2008 sobre o uso não-obstrusivo de Javascript, mostrando o jQuery como instrumento demonstrativo e porque ele é uma boa escolha. Ele disponibilizou uma apresentação online de Slides para os mais interessados.

Javascript não-obstrusivo é um assunto muito falado nos dias de hoje, devido a vários fatores como interoperabilidade e manutenção facilitada.

Achei legal uma função que ele utilizou para verificar no PHP por requisições em Ajax, vou implementa-la em meus projetos.

FancyUpload - Swiff meets Ajax

Recomendo para quem quer fazer um upload mais dinâmico para seu site, o FancyUpload.

Swiff encontrou o Ajax para um modo poderoso e elegante para seus uploads. FancyUpload é uma espécie de “file-input replacement” que gera uma lista de multipla seleções de arquivos (tipo o do Flickr), com envio em espera, tudo isso com uma barra de progresso animada. É super fácil de implementar, totalmente independente do servidor, completamente estilisável via CSS ou (X)HTML e póde utilizar a MooTools.

Destaques do FancyUpload:

* Select and upload multiple files
* Filter files by type in the select dialog
* Optional Events to add your own behaviour
* Show and filter useful file information before the upload starts
* Limit uploads by file count and/or file size
* Platform and server independent, just needs Flash 9+ (> 95% penetration)
* Unobtrusive, since the element is replaced after the swf loaded successfully
* Cancel running uploads, add files during upload
* Everything is optional, documented and easy editable
* New in 2.0
o Get the server response after upload for showing additional informations or previewing the image, etc.
o Shows the current upload speed and the time left
o Send additional request data via GET or POST variables
o Set the filename for the upload request

Para verem um exemplo: FancyUpload Showcase.

Via Ajaxian

PHP - Limpando String de formulários via $_POST

Quando eu submeto alguns formulários, passando por Ajax, eu gosto de sempre limpar as strings vindas, afim de evitar ataques de injection neles, por isso fiz essas duas pequenas funções abaixo, para facilicar isso, já que eu manipulo os dados direto via $_POST.

 /**
* Função que descodifica dados no formato encodado de url de uma array.
* Bom para uso de dados que vem via javascript.
* @author Julio Luiz
* @license   http://creativecommons.org/licenses/by-sa/3.0
* @param Array $arr
* @return Array
*/
public static function rawurldecode_array($arr) {
foreach($arr as $key => $val) {
if (!is_array($val))
$arr[$key] = rawurldecode($val);
else
$arr[$key] = self::rawurldecode_array($val);
}
return $arr;
}
/**
* Função que aplica alguns filtros de limpeza, para evitar qualquer injection na strings.
* Bom para uso de dados que vem via javascript.
* @author Julio Luiz
* @license   http://creativecommons.org/licenses/by-sa/3.0
* @param Array $data
* @param Boolean $rawurldecode Se precisa descodificar os dados de url
* @return Array
*/
public static function limpaArrayRequest($data, $rawurldecode = false) {
foreach($data as $key => $val) {
if (!is_array($val))
$data[$key] = nl2br(strip_tags($val));
else
$data[$key] = self::limpaArrayRequest($val, $rawurldecode);
}
return ($rawurldecode) ? self::rawurldecode_array($data): $data;
}

Uso

$data = limpaArrayRequest($_POST, true); //Caso queira converter as strings codificadas no formato url

Qualquer dúvida, utilizem o fórum WMOnline

ps: maldito wp, tiro a Identação, desculpe :~

Google App Engine

A Google liberou hoje uma nova ferramenta que promete facilitar a infre-estrutura SDK-Google e com um plus: você hospeda tudo no servidor deles.

A “intenção” da Google é auxliar o desenvolvimento, dispensando aquela “romaria” de arrumar um servidor que rode direitinhoa aplicação.

O App Engine fornece 500MB e sem limite de banda (bandwidth, o fantasmata de qualquer desenvolvedor de aplicações web ) e garante ainda por mês 5 milhões de page views (pô, não precisava partir pra ignorância :B )

É uma “preview release” da aplicação, só para verem como vai ser a aderência dos desenvolvedores, tanto que a primeira leva é limitada para 10.000 desenvolvedores (de acordo com o site).

Algumas caracteristicas do App Engine:

• Google garante excelente ambiente de desenvolvimento (SDK)
• Fácil escalonagem
• Fácil startup

Caso queira dar uma olhadinha, visite Google App Engine.

É a google em sua odisséia para dominar o mundo. (6)

Em tempo (13:59): What does Google App Engine mean for Ajax developers?

Em tempo (2) (10/04/2008 - 10:25): Why not PHP for Google’s App Engine? (boa pergunta! pelo menos um suportesiznho ;~)

jQuery - codificar valores (escape()) com o serialize()

Hoje me deparei com um problema, estou enviando formulários via Ajax (bem mais rápido) via POST no PHP, com o auxílio do jQuery e em alguns métdos de chamada Ajax eu uso mais ou menos desta maneira:

$.ajax({
 url: form.attr('action'),
 data: form.serialize() + "&ajax=true",
 type: 'post',
(...)

Notem que eu uso o método serialize() do jQuery para me retornar uma string com todos os valores concatenados (ex: nome=julio&sobrenome=vedovatto&foo=bar), método muitíssimo util.

O que eu deparei é que tem o velho problema: acentuação, o fantasma do Ajax. Nem com reza braba se resolve isso direito, sem um bom e velho escape() na string e depois um rawurldecode() no PHP (ou outra função que faça isso na sua linguagem preferida :P).

O que eu resolvi fazer? Baixar um source atualizado do jQuery e modificar a função serialize(), deste modo (em torno da linha 2457 do código-fonte):

serialize: function(escape_chars) {
 	return jQuery.param(this.serializeArray(escape_chars || false));
 },
 serializeArray: function(escape_chars) {
 	return this.map(function(){
 		return jQuery.nodeName(this, "form") ?
 			jQuery.makeArray(this.elements) : this;
 	})
 	.filter(function(){
 		return this.name && !this.disabled &&
 			(this.checked || /select|textarea/i.test(this.nodeName) ||
 				/text|hidden|password/i.test(this.type));
 	})
 	.map(function(i, elem){
 		var val = jQuery(this).val();
 		return val == null ? null :
 			val.constructor == Array ?
 				jQuery.map( val, function(val, i){
 					return {name: elem.name, value: val};
 				}) :
 				{name: elem.name, value: (escape_chars) ? escape(val) : val};
 	}).get();
 }

Vejam que adicionei um parâmetro na função serialize(), quando passar true, ele irá usar um escape() nos valores dos dados. Desta maneira no php eu utilizo um rawurldecode() e pronto. \o/

É só você fazer esta modificação e compilar o código-fonte com o packer, para reduzir seu tamanho (de 94kbs do original para aproximadamente 31 kbs do compacto).