Posts em "web"

  1. 0
    postado por white-queen em 1 year ago

    Posso misturar JavaScript normal com jQuery?

    HOLY SHIT D:

    HOLY FUCKING SHIT D:

    O que foi visto… não pode ser desvisto. comofas/

    Eu provavelmente vou martelar o teclado com minha cabeça até apagar essa informação de algum jeito. Mas eu tinha que fazer outras pessoas sofrerem com a pergunta também :D

    Comentários

  2. Sobrecarregando funções em JavaScript

    0
    postado por white-queen em 1 year ago

    No post anterior eu disse que era possível simular sobrecarga de funções em JavaScript sem muito trabalho, não é? Eu acabei me empolgando e resolvendo experimentar um pouco com a idéia.

    /**
 * Implementa sobrecarga de métodos com base no número de argumentos
 * de cada função.
 * Você pode passar uma ou mais funções para o construtor como
 * argumentos posicionais (exemplo: Overloaded(função 1,
 * função 2, ..., função n)), e elas serão
 * adicionadas ao objeto.
 *
 * Exemplo:
 * >>> var metodo = Overloaded(func1, func2, func3);
 *
 * Outra forma de sobrecarregar funções é instanciar o objeto e
 * chamar o método ``overload`` na instância. Como o ``overload``
 * retorna a instância do objeto de sobrecarga, você pode fazer
 * correntes de chamadas.
 *
 * Exemplo:
 * >>> var metodo = Overloaded(func1).overload(func2).overload(func3);
 */
function Overloaded() {
    var __methods__ = [], // array de métodos sobrecarregados
        def_meth,         // método padrão
        i, len = arguments.length;


    function add(method, def)
    {
        __methods__[method.length] = method;
        if (def || !def_meth) {
            def_meth = method;
        }
        return this;
    }

    function call()
    {
        var meth = __methods__[arguments.length] || def_meth;
        return meth && meth.apply(this, arguments);
    }

    call.overload = add;
    for (i = 0; i < len; ++i) {
        typeof arguments[i] == 'function' && add(arguments[i]);
    }

    return call;
}

    O código é simples e funciona da seguinte forma: Sempre que add é chamado, o método é armazenado na array de métodos de acordo com o número de argumentos que a função espera. Como exemplo, uma função de 2 argumentos seria armazenada no índice 2, uma de 7 argumentos no índice 7, e assim por diante. A função também define o método como padrão em dois casos: se o parâmetro def for verdadeiro, ou se nenhum método padrão tiver sido definido ainda.

    Depois objeto define a função call, que é responsável por chamar os métodos. A função procura primeiro um método que espere o número de argumentos passados para ela, e caso não encontre usa o método padrão. A última linha da função checa se qualquer método foi encontrado e chama esse método com os argumentos passados para a função, e por fim retorna qualquer valor que esse método retorne.

    Para que o objeto instanciado como Overload seja chamado como uma função comum, call é retornado, ao invés da instância para o objeto Overloaded. Como isso implicaria em não poder sobrecarregar outras funções, o objeto implementa a função de sobrecarga em call antes de retorná-la.

    O exemplo abaixo testa o funcionamento da sobrecarga de métodos, e você pode testá-los no console do seu navegador mesmo:

    >>> function greet(nome) { return "Olá, " + nome; }
>>> function greet2(sobrenome, nome) {
...     return "Olá, " + nome + " " + sobrenome;
... }
>>> var cumprimento = Overloaded(greet, greet2);
>>> cumprimento("Undercode");
Olá, Undercode
>>> cumprimento("Undercode", "Blog");
Olá, Blog Undercode

    Se quiser, você pode clonar/forkear o código fonte e alguns testes no meu Bitbucket.

    Comentários

  3. Simulando módulos em JavaScript

    0
    postado por white-queen em 1 year ago

    —análise sobre a organização e escalabilidade de web apps

    Uma das coisas que eu mais senti falta quando comecei a desenvolver a Lily foi um suporte nativo à módulos em javascript, já que a base do design da framework era justamente ser modular para que ela fosse bem extensível.

    Mas claro que a gamelily não é um caso isolado. A medida que o aplicativo cresce, você precisa de formas melhores para organizar seu código, tanto que isso virou discussão para as novas especificações da linguagem.

    E o que fazer quando nenhum dos navegadores oferece um bom suporte nativo à módulos? Bem, você procura soluções na interwebz, cria alguns hacks e escreve um artigo sobre eles :D

    Neste artigo eu vou falar um pouco sobre como simular módulos em JavaScript (claro), as técnicas e soluções disponíveis, e sobre os problemas que me fizeram martelar o teclado com a cabeça algumas vezes.

    Continue lendo »
    Comentários

  4. JSNES

    0
    postado por white-queen em 1 year ago

    —emulador de NES em JavaScript, yay!

    Existem loucos e existem loucos — Ben Firshman se encaixa no último grupo. O cara portou o emulador vNES para JavaScript, reescrevendo toda a parte de I/O (que óbviamente não existe em JavaScript… não para navegadores) e usando Canvas para renderizar o jogo.

    Super Mario Bros. 3 rodando no JSNESSuper Mario Bros. 3 rodando no JSNES

    O resultado vocês podem conferir aqui. Os jogos rodam muito bem no Chrome 5 (como era de se esperar da V8) e no Opera 10.6, relativamente bem no Safari e no Firefox (mesmo o novo beta), roda à uma taxa de quadros tão baixa que é difícilmente jogável. O suporte à som não é muito bom, e por algum motivo não gostou do Chrome no meu computador, mas é um recurso interessante.

    Ah, o código fonte do projeto foi colocado no Github.

    Comentários

  5. CSS3 e IE

    0
    postado por white-queen em 1 year ago

    —sim! Milagres ainda existem!

    Bordas arredondadas, sombras, gradientes e animações aumentam bastante as possibilidades de criar uma experiência mais agradável na web, mas algum tempo atrás tudo isso tinha de ser feito com bastante javascript, imagens, plugins ou hacks feios.

    Por isso as novas especificações do CSS e HTML em andamento e a implementação deles em um rítmo incrível nos navegadores geraram um hype bem grande, fazendo muitos designers e desenvolvedores implementarem esses recursos em seus projetos atuais.

    O problema? Certas… coisas insistem em ficar no caminho. E o problema não é apenas o IE6: São todas as versões atuais do IE!

    PIE (Progressive Internet Explorer) tira esses problemas do caminho e deixa você se concentrar mais no design e menos se preocupando em como deixar o layout interessante no IEca.

    E o melhor de tudo: PIE não é uma biblioteca ou framework de DOM javascript como jQuery ou Prototype. Também não é um plugin. É uma idéia interessante usando a falta de padrões do IE contra ele… ou seria à favor?

    De qualquer modo, tudo o que você tem que fazer é compilar o PIE, fazer o upload do arquivo PIE.htc no seu servidor e escrever seu CSS normalmente e adicionar uma única propriedade: behavior. Essa propriedade única do IE (e que na maioria das vezes deve ser evitada) permite adicionar comportamentos à grupos de objetos.

    #elemento {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(url/do/PIE.htc);
}

    Navegadores mais novos vão renderizar normalmente os cantos arredondados, sem nenhum overhead de código, e no IE um arquivo javascript vai ser carregado para simular a borda arredondada. Nada de imagens ou milhares de DIVs, o script usa VML, então a aparência é bem legal.

    Comentários