Javascript

Classes e heranças com Javascript sem usar framework

js

Usar coisas prontas adianta a vida, não investigar suas entranhas é um erro fácil de cometer. Eu tenho andado bem ocupado com EmberJS, AngularJS, BackboneJS e KnockoutJS.

E sabe o que eu descobri? Todos compartilham o mesmo comportamento de MVC, dessa semelhança o que eu mais gostei foi que ambos implementam um certo tipo de extensão de classes, é como se você registrasse ela no root do documento DOM (window).

O que garante o trunfo de um para outro são técnicas especificas como templates, data-biding, componentes UI; Ao mesmo tempo que aprendo com cada um deles de dentro para fora, eu vou escrevendo o meu, a vida fica bem mais fácil melhorar o que já foi criado, lá na frente quem sabe alguém não chegue a usar o meu!?

Certo, como é então que se usa classes e heranças no Js sem framework? Simples, implemente um você mesmo com poucos passos. Me lembra muito da época que o Actionscript 1.0 ainda estava sendo especificado, JS dos dias de hoje é o actionscript de 10 anos atrás. No dia que essa linguagem ganhar tipação das coisas, provavelmente as coisas virarão coisas, sacou?!

Boilerplate necessário

 
;(function(){
 
	var Classe = window.Classe = {};
 
	var fator = function () {};
 
 
    var inherits = function (parent, protoProps, staticProps) {
        var child;
        if (protoProps && protoProps.hasOwnProperty('constructor')) {
            child = protoProps.constructor;
        } else {
            child = function () { return parent.apply(this, arguments); };
        }
        // vindo do underscoreJS
        _.extend(child, parent);
 
        //Prototype é quem vai fazer valer a pena
        fator.prototype = parent.prototype;
        child.prototype = new fator();
 
        if (protoProps) _.extend(child.prototype, protoProps);
        if (staticProps) _.extend(child, staticProps);
 
        child.prototype.constructor = child;
        child.__super__ = parent.prototype;
 
        return child;
    };
    function ExtendsEls(protoProps, staticProps) {
        var child = inherits(this, protoProps, staticProps);
        child.extend = ExtendsEls;
        return child;
    }
    Classe.Base = function () {};
    Classe.Base.extends = ExtendsEls;
})();

Digamos que eu até poderia mudar no final e chamar direto ().call(this,name). Só que ai eu quebro a idéia de fazer simples sem precisar chamar o construtor e fazer a evaluação da classe em tempo de execução.

Ao invés disso você pode criar o construtor e inicar o que precisa dentro dele.

No final das contas eu criei outro arquivo MeuApp.js e escrevi o seguinte código.

// Classe extendida da classe pai Classe
var Carro = Classe.Base.extends({
	aceleracao : 0,
	buzinar: function (){
		console.log('bit bit, sai do meio!');
	}
});
 
// Carro de corrida extende Carro
 
var CarroCorrida = Carro.extends({
	constructor : function (name){
		CarroCorrida.__super__.constructor.call(this,name);
	},
	acelerar: function (){
		var acc = this.aceleracao > 300 ? this.aceleracao=Math.round(300 - Math.random()*300) : this.aceleracao+=10;
		$('body').html('<p>'+ acc +' km/h</p>');
		console.log(this.aceleracao + ' km/h');
	}
 
});
 
 
// Ferrari é um objeto 
var ferrari = new CarroCorrida();
ferrari.buzinar();
 
// Testar a aceleracao
window.setInterval(function(){ferrari.acelerar()},100);

Fácil, não? Ai agora é só implementar Views e Controllers, só depende do que você quiser fazer. A boa notícia é que mesmo sem tipação você pode simular tal opção sem se preocupar com decadência do objeto.

Ah! o código está no Github também.

Apache Cordova/ Phonegap

Apache cordova 2.6 lançado

cordova_logo

Quem estiver pensando em já adotar o phonegap ou já possui projeto e quer atualizar, o Apache Cordova que é o coração do projeto phonegap acaba de lançar a última versão 2.6.

Eu até anunciquei aqui até a versão 2.4 e pulei a versão 2.5 por que para mim foi uma versão precipitada e ainda possuia muita função que não funcionava especialmente para o Windows 7+ e 8, além do suporte mal acabado para Storage no iOS.

Essa última versão 2.6 em seus change logs mostram quanta coisa mudou da 2.5 para 2.6.

Baixe a nova versão.

Notícias/ Open-source/ Pessoal

Sobrevivendo à um ataque DDoS

Anonymous-hater-takes-credit-for-Pirate-Bay-Ddos-Attack

Domingo e ainda hoje passei por 2 ataques DDoS, a notícia veio logo de imediato, assim que eu comecei a receber mensagens de status do servidor que haviam mais de 1 mil requisições por segundo de determinados IP.

Vivemos em um mundo onde odiamos,batemos e massacramos gays/lesbicas/pastor sem noção/ político corrupto. Pelo simples fato de não ir com a cara ou ser contra algumas idéias, de onde surgem esses tipos de pensamentos é onde se cria os maiores ódios internos. Rasteiramente você colocar um site para baixo “tango down” por pura diversão ou malícia é o mesmo que cometer um crime.

Ataque de DDoS o que é?
Basicamente existem N formas de fazer isso, a mais comum é fazer requisições em um determinado arquivo grande em um site, para que o servidor seja ele apache, nginx, possa ficar com todas as conexões simultaneas abertas em um intervalo de tempo de ms e assim quem for entrar em seu site ele fica inacessível. Ou seja fora do ar.

Em termos de compração é basicamente assim.

tumblr_inline_mjkn9enrGw1qz4rgp

Você tem milhares de conexões e sobrecarrega o servidor, outras formas desse ataque. E ai eu me pergunto, por que diabos alguém quer derrubar um site simples de desenvolvimento? Meu exclusivamente?

Aqui vai meu conselho para quem está fazendo isso.

[quote style=”1″] Na boa, você provavelmente deve está lendo esse post, você conseguiu sua glória troll por uns instantes, é deprimente usar seu talento para destruição, você deveria usar suas habilidades em coisas fantásticas, construtivas e acima de tudo praticar o bem.[/quote]

Como se prevenir dessas atitudes?

1 . Mantenha seu sistema operacional sempre atualizado, especialmente com pacotes críticos.

2 . Se você tem acesso ao seu servidor Linux e usa Apache, ative os módulos mod_evasive e mod_security . Desative o Whoopsie do seu linux , ele é basicamente um correspondente de erros que fica doidinho nessas situações de multiplas requisições.

3. Utilize um CDN para seus arquivos js/css/png/jpg/swf.

4. Se você usa o wordpress como seu engine, é bom fazer cache para não ficar com problema de sobrecarregamento das queries e travar o servidor, o WP_super Cache é um excelente plug-in.

5. Monitore os acessos ao seu servidor usando o comando

netstat -anp |grep 'tcp\|udp' | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n

Você pode criar um script bash DAEMON para monitorar a cada 1 hora para ver como anda os acessos e assim você ficar sabendo quando um ataque DDoS está sendo iniciado.

Essas são medidas que diminuem os ataques quando é necessário, seu site pode voltar a cair mesmo depois de adotar tais medidas, você só precisa ter um pouco de paciência, experiência e tudo se resolve.

AngularJS/ HTML5 / CSS3/ Javascript/ JQuery

Criando um scroll Infinito com o AngularJS e JQuery

scrollinfinito-jquery

Esse post é o início de uma série de posts relacionados ao AngularJS, se você não conhece, é bom conhecer, muito de seu comportamento é semelhante ao que tinhamos no Flex, por exemplo Databind e a idéia de componentizar. E o mais legal de tudo é que ele é compatível com qualquer biblioteca que manipule o DOM, por exemplo Zepto e JQuery, ou até mesmo o Twitter Bootstrap.

O AngularJS facilita e muito certas tarefas e mantem o DRY bem vivo. Por exemplo, esse post eu quero falar sobre o scroll infinito, igual o comportamento que o Twitter possui ou o LinkedIn possui quando você vai rolando a página e dados vão pipocando em sua frente. Pois bem, como eu faria isso em puro Javascript e usando o seletor do DOM jQuery?

O scroll é um mal necessário, é o que a Microsoft tenta adotar na nova interface do Windows 8 e o que o Flex tentou quando lançou a versão 4.0. Porém é necessário trazer informações à medida que elas vão acontecendo ou carregar só o necessário e à medida que o usuário for investigando elas forem brotando.

scrollinfinito-jquery

Scroll Infinito com Javascript e JQuery.

O HTML é bem simples:

	<div id="conteudo">
    <ul id="lista"></ul>
</div
var contador = 1;
 
$(document).ready(function () {
    carregar();
    $(this).on('scroll', function () {
        if ($(window).scrollTop() + $(window).height() >= $(this).height()) {
            carregar();
        }
    });
});
 
function carregar() {
    for (var i = 0; i < 10; i++) {
        $("#lista").append('<li><img src="http://placehold.it/100x100"/><div><h4>' + contador + ' Item</h4><p>Descrição do item '+contador+'</p></div></li>');
        contador++;
    }
}

A medida que a soma da posição da barra mais a altura da janela superar o tamanho da altura do documento, ele executa a função carregar, jogando mais itens na lista.

O truque também está na maneira como você declara o CSS, margin faz um estrago danado quando não aplicada de forma correta, nesse exemplo eu coloquei uma aparência de uma lista de smartphone, igual no Android.

body, ul,li,img,h4,p{
    margin:auto;
    font-family:'Droid Sans';
}
ul {
	margin-left: -40px;
	list-style:none;
}
li {
    color:#111;
    height: 100px;
    border-bottom:1px solid #fff;
    padding:10px;
}
li h4 {
    font-weight:400;
    font-size:20px;
    padding:0;
}
li img {
    padding-right:10px;
    float:left;
    display:block;
    vertical-align:text-top;
}
li div {
    display:inline;
}
li p {
    font-weight:300;
    font-size:12px;
}
#conteudo {
    width:100%;
    background:rgba(0,0,0,0.1);
    overflow:auto;
}

E aqui está o exemplo rodando, eu usei o jsFiddle para demonstrar melhor.

Você pode ver sendo executado diretamente no jsFiddle

Criando agora uma lista infinita com o AngularJS

O AngularJS possui vários truques na manga para deixar sua vida mais fácil, módulos, tags personalizados, data-bind, repetidores, diretivas, controllers, esses são alguns de seus recursos. A melhor parte dele como mencionei acima é que é compatível com outras bibliotecas.

Para fazer esse exemplo você vai fazer uma pequena alteração no html e substituir o Javascript, os estilos que é o visual continuam o mesmo.

Logo de cara para identificar como um App, você precisa alterar o html e fazer da seguinte forma:

<!doctype html>
<html ng-app="Rolagem">
<head>

Isso define que o módulo Rolagem será seu App nesse arquivo de html, então na parte de repetir os itens você faz da seguinte forma.

<body ng-controller="Main">
	<div id="conteudo" fazer-rolagem="carregar()">
    <ul id="lista">
         <li ng-repeat="i in items">
            <img src="http://placehold.it/100x100"/>
            <div><h4>{{i.id}} Item</h4>
            </div>
        </li>
    </ul>
</div
</body>

Como o AngularJS abstrai bastante o escopo do javascript para com o HTML, é notável algumas propriedades como o ng-controller, fazer-rolagem que são primariamente customizáveis, a presença do ng-repeat indica que o arquivo vai ser repetido N vezes, conforme vamos adicionando novos itens à lista.

E a parte fundamental desse processo é o Javascript:

function Main($scope) {
    $scope.items = [];
 
    var counter = 1;
    $scope.carregar = function() {
        for (var i = 0; i < 10; i++) {
            $scope.items.push({id: counter});
            counter += 1;
        }
    };
 
    $scope.carregar();
}
 
angular.module('Rolagem', []).directive('fazerRolagem', function() {
         return function(scope, elm, attr) {
        elm = $(document);
 
        elm.bind('scroll', function() {
             if ($(window).scrollTop() + $(window).height() >= $(this).height()) {
                 scope.$apply(attr.fazerRolagem);
             }
        });
    };
});

Agora você já sabe como criar uma diretiva, fazer um módulo e carregar os itens conforme forem feitos os scrolls, no JQuery quando você quer escutar um evento você geralmente usa o $on(), no AngularJS é necessário usar o bind, ele que vai escutar pelo evento.

Maneiras diferentes de aplicar a mesma técnica, para um resultado igual, Eu gostei mais do AngularJS, escrevi menos código e atingir o mesmo resultado.

Ah! lembrando que esses códigos estão disponíveis no Github.

Pessoal

Minha história com a Logitech

logitech

Dificilmente nós brasileiros agradecemos à empresas, pessoas; O carinho e cuidado com que elas nos trata. É mais fácil a gente criticar do que elogiar, e esse é um post de agradecimento a Logitech por respeitar um direito tão privado de nós “A garantia”.

Minha história com a Logitech começa 15 meses atrás, quando eu comprei um mouse sem fio deles o M305, de longe foi o melhor mouse sem fio que eu já comprei, em especial por responsividade, ergonomia e qualidade de acabamento.
Só que depois desse tempo, ele parou de funcionar, do nada! Eu deixei de lado no canto da mesa e comprei outro mouse Microsoft, fenomenal também.
A grande sacada foi quando fui comprar o mouse da Microsoft sem fio, esses que você ver ai abaixo eu usando.
2013-04-04_0002

Na mesma sessão havia o da Logitech M305 e lá eles tinham o telefone de suporte e um adesivo que frisava bastante a frase “3 anos de garantia”. Eu fiquei meio assim sem acreditar, já que se tratava apenas de um mouse, perfiférico baratinho menos de R$100,00. Decidi não arriscar mais e comprar o Microsoft mesmo.

Foi ai que eu arrisquei em ligar para o suporte técnico deles e explicar o que aconteceu. Com muita calma o pessoal do suporte tentou verificar se não era algum problema do sistema operacional, eu refiz o procedimento nos 2 computadores que estavam próximos de mim e mesmo assim o coitado do mouse morreu, eu fiquei com dó, por que o problema estava apenas no Dongle “aquela parte que você conecta no computador para receber os dados do mouse”. Eu até perguntei se eles não tinham para me vender essa parte e deixar o mouse ainda em uso.

Para minha surpresa, eles deram entrada no processo de troca do meu mouse antigo por um mouse novinho em folha. Me pediram a nota fiscal, fotos e assim fiz, enviei para eles e esperei uma semana pelo retorno.

Estranhamente me pediram para eu destruir o mouse, pensei duas vezes, já que o mouse estava sem deifeito algum, era apenas o dongle e reforcei meu pedido “Envie-me só o dongle” eu pago por isso. Eles preferiram continuar com a idéia de destruir, me garantindo que eu não tivesse preocupação que eles me dariam um novo. Assim eu fiz, destrui o coitado.
2013-03-22_0001

Quase que não quebro nas marteladas, é um bichinho bem duro de quebrar. E deu dó, por que é um aparelhozinho que você não dá nada, mas faz uma falta danada quando a pilha acaba não é?

Passados mais uma semana e ontem chega para mim um novo mouse, mesmo não sendo preto, é um novo mouse do mesmo modelo. Estou bem feliz que o processo de suporte realmente funciona e que a Logitech respeita para caramba seus clientes.

2013-04-04_0001

Mesmo com garantia extendida, tem lojas e fabricantes que preferem enviar para o conserto do que enviar uma nova peça. Por isso que é importante saber de quem você compra, prefira algo um pouco mais caro e sempre olhe de primeira instância à garantia e suas regras.

Fica aqui meu agradecimento público à Logitech pelo seu carinho e atenção para o mais simples produto que eles vendem. Parabéns e espero que quem leia esse post não tire proveito da situação para receber um produto novo. Sejam honesto com eles também.

Pessoal

Código fonte causa coma em desenvolvedor

coder-sick

Agora o negócio ficou sério. Vejam isso.

coder-sick

Cientistas da universidade Seicheles conseguiram uma prova que pode melhorar a vida de muitos desenvolvedores de software pelo mundo. O estudo foi publicado na Scientific Coder, boa parte relatando o ocorrido com James Franco um famoso Londrino criador de Apps para smartphones ficar em coma após uma falha no compilador do iOS da Apple o que acarretou em uma perca de memória em 30%.
James hoje recuperado, diz que os estudos da universidade de Seicheles o ajudaram a recompor sua consciência, ajudando-o a depurar suas memórias e assim garantir que outros desenvolvedores não sofram do mesmo problema.

Walter Mantega, cientista responsável pelo estudo afirma que esses acontecimentos são extremamente frequentes entre jovens desenvolvedores de 20 à 30 anos, porém muito pouco percebido já em sua grande maioria esses “black outs”, ocorrem em sono profundo. No Caso de James, que ocorreu em tempo de trabalho, foi gerado um stress causado pelo seu gerente de produtos, o que ocorreu uma ligeira aceleração de raciocínio o que fez James apagar por mais de 9 dias contínuos.

O estudo foi patrocinado por uma ONG “Código sem fronteiras” e empresas que fornecem SDKs “Apple, Microsoft, Planalto Central, Plato Donald e Mc Donalds”, todas grandes players de mercado.

O estudo foi publicado na revista Scientific Coder, que é ligado à revista Americana Scientific American, a mais respeitada revista de publicações de estudos no mundo.

Fonte: Scientific Coder