BitBonsai Labs Mauricio Wolff's geekness

29Jun/100

Testing pastie.org embed

29Mar/100

How to Make an HTML5 iPhone App

This is nice. An article on SixRevisions, short version here for my Archive.

If you write a couple meta tags, your html5 app will look like any other iPhone App, but will also work on Android, PalmPre, etc...

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="iphone_icon.png"/>
<link rel="apple-touch-startup-image" href="startup.png" />
<link rel="stylesheet" href="styles.css" type="text/css" media="screen, mobile" title="main" charset="utf-8">
  • apple-mobile-web-app-capable: This is another tip-off that we want to be an offline app.
  • apple-mobile-web-app-status-bar-style: This hides the status bar, and nav bar when the app is offline.
  • apple-touch-icon:This is the pointer to the image that want to be the icon.
  • apple-touch-startup-image: This is a url pointing to the startup image.

Application Cache

Application caching allows browsers to determine in advance all the files a web page will need for the web page to work.

One tricky part to this whole thing is that the manifest (the list of files that need to be cached offline) has to be passed with a filetype Header set to text/manifest. That is why you need access to a web server that can set HTTP headers.

    CACHE MANIFEST
 
    # Version 3 
 
    style.css
    index.html
    init.js
 
    # offline icons
    startup.png
    iphone_icon.png

Offline Data

Along with the ability to keep files that are needed offline, you can also store user data in an offline database. There are two major APIs for per user and/or per page data. The first is localStorage. localStorage, is an easy to use key-value store with a dead simple API.

    localStorage.dataToStore = 5;
    console.log(localStorage.dataToStore); // 5

Its also possible to use a webdatabase (SQLite):

    // Try and get a database object
    var db;
 
    try {
        if (window.openDatabase) {
            db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
            if (!db)
                alert("Failed to open the database on disk.  This is probably because the version was /
                bad or there is not enough space left in this domain's quota");
        } else
            alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");
    } catch(err) { }
 
    // Check and see if you need to initalize the DB
    db.transaction(function(tx) {
        tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) {
            loadNotes();
        }, function(tx, error) {
            tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp /
            REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) {
                loadNotes();
            });
        });
    });
 
    // Insert a test Note.
    var note = {
        id: "1",
        text:" This is a test note",
        timestamp: "112123000",
        left:10,
        top:10,
        zIndex:2
    };
    db.transaction(function (tx)
    {
        tx.executeSql("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES /
        (?, ?, ?, ?, ?, ?)", [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]);
    }); 
 
    // Get all the notes out of the database.
    db.transaction(function(tx) {
        tx.executeSql("SELECT id, note, timestamp, left, top, zindex /
        FROM WebKitStickyNotes", [], function(tx, result) {
            for (var i = 0; i < result.rows.length; ++i) {                 var row = result.rows.item(i);                 var note = new Note();                 note.id = row['id'];                 note.text = row['note'];                 note.timestamp = row['timestamp'];                 note.left = row['left'];                 note.top = row['top'];                 note.zIndex = row['zindex'];                 if (row['id'] > highestId)
                    highestId = row['id'];
                if (row['zindex'] > highestZ)
                    highestZ = row['zindex'];
            }
 
            if (!result.rows.length)
                newNote();
        }, function(tx, error) {
            alert('Failed to retrieve notes from database - ' + error.message);
            return;
        });
    });
29Jan/100

Python x PHP: Finding IPs with regex

Sometimes I just like to write code in Python and PHP to compare them, and admire both...

Here's a little code to find IP adressess inside strings (returned from a nslookup). The code is not optimal, but illustrate how both languages works. Just for some friday fun...

Python

 
Python 2.6.1 (r261:67515, Jul  7 2009,  23:51:51)
 [GCC 4.2.1 (Apple Inc. build 5646)] on darwin
 Type "help", "copyright", "credits" or "license"  for  more information.
 
>>> a  = 'yahoo.com IN A 69.147.114.224 18774s  (05:12:54)'
>>> a += 'yahoo.com IN A 209.131.36.159 18774s  (05:12:54)'
>>> a += 'yahoo.com IN A 209.191.93.53  18774s  (05:12:54)'
>>> print a
 'yahoo.com IN A 69.147.114.224  18774s (05:12:54)yahoo.com IN A 209.131.36.159 18774s  (05:12:54)yahoo.com IN A 209.191.93.53  18774s (05:12:54)'
>>>; import re
>>> p = re.compile('(?:\d{1,3}\.){3}\d{1,3}')
>>>; p.findall(a)
 ['69.147.114.224', '209.131.36.159',  '209.191.93.53']
>>>

PHP

$a  = 'yahoo.com IN A 69.147.114.224 18774s (05:12:54)';
$a .= 'yahoo.com  IN A 209.131.36.159 18774s (05:12:54)';
$a .= 'yahoo.com  IN A 209.191.93.53  18774s (05:12:54)';
 
print $a;
 
/*
saida: yahoo.com IN A 69.147.114.224 18774s (05:12:54)yahoo.com IN A  209.131.36.159 18774s (05:12:54)yahoo.com IN A 209.191.93.53 18774s  (05:12:54)
*/
 
$re = '/(\d+).(\d+).(\d+).(\d+)/';
 
preg_match_all($re, $a, $matches);
 
var_dump($matches[0]); // saida 1
var_dump($matches); // saida 2
 
/*
saida 1:
 
array(3) {
  [0]=>
  string(14) "69.147.114.224"
  [1]=>
  string(14) "209.131.36.159"
  [2]=>
  string(13) "209.191.93.53"
}
 
saida 2:
 
array(5) {
  [0]=>
  array(3) {
    [0]=>
    string(14) "69.147.114.224"
    [1]=>
    string(14) "209.131.36.159"
    [2]=>
    string(13) "209.191.93.53"
  }
  [1]=>
  array(3) {
    [0]=>
    string(2) "69"
    [1]=>
    string(3) "209"
    [2]=>
    string(3) "209"
  }
  [2]=>
  array(3) {
    [0]=>
    string(3) "147"
    [1]=>
    string(3) "131"
    [2]=>
    string(3) "191"
  }
  [3]=>
  array(3) {
    [0]=>
    string(3) "114"
    [1]=>
    string(2) "36"
    [2]=>
    string(2) "93"
  }
  [4]=>
  array(3) {
    [0]=>
    string(3) "224"
    [1]=>
    string(3) "159"
    [2]=>
    string(2) "53"
  }
}
*/
14Dec/091

recursively chmod only subdirectories

When I use Betterzip to uncompress a directory tree, it chmods the dirs with 700. Here's the command to solve this:

find . -type d | xargs chmod 755

It finds all subdirectories and chmod'em to 755. Clever, isn't it?

Tagged as: , , 1 Comment
6Dec/090

Lifesaver snippets

Alguns códigos são simplesmente salvadores da pátria...

Por exemplo: Tens de subir um site por 3g, e mesmo targzipando o site ele fica com 12Mb por causa dos .svn escondidos...

tar --exclude='.svn' -czvf file.tar.gz ./*

6MB. Simples e eficaz...

26Nov/090

Como testar o novo Google

É, o google está mudando... Eles estão testando um redesign, que por enquanto está sendo mantido em segredo.

Até agora...  :)

  1. Vá ao google.com
  2. Se estiver em Português, clique no Go to Google.com
  3. cole o código abaixo na location bar (barra de endereços) substituindo o http://google.com -
    javascript:void(document.cookie="PREF=ID=20b6e4c2f44943bb:U=4bf292d46faad806:TM=1249677602:LM=1257919388:S=odm0Ys-53ZueXfZG;path=/; domain=.google.com");
  4. tecle ENTER
  5. feche o browser
  6. abra o browser
  7. Vá ao google.com
  8. Perceba os botões azuis e faça uma busca. tada!!!
Antes...

Antes...

Depois

Depois

Tagged as: , No Comments
19Oct/091

Search Engines: Por que a google vai continuar a ser o primeiro lugar

Quando preciso buscar algo, não penso, vou no google. E olha que desde os anos 90 tenho procurado ficar antenado e experimentar as alternativas.

Gostava do antigo askjeeves.com, que depois que virou ask.com perdeu o charme pra mim. Teve o gigablast, ou algo assim, que não decolou apesar do logo ser um foguete. Acho que os pombos do pigeorank do google são melhores. E a massiva utilização tb deve ajudar.

Agora mesmo abri os três maiores sites de busca da atualidade para dar uma comparada, pois eles estão em fase de melhoria de design, etc. O Yahoo!, recém comprado pela MS precisa recuperar audiência, o Bing precisa se estabelecer e o google se manter. Ao abrir o google levei um susto, pois aquelas sugestões de feramentas, links, tudo havia sumido. Ao mover o mouse notei que voltaram. E eis as grandes diferença da google: foco e simplicidade.

bing.com

o Bing está tentando o mesmo caminho, e apelando para impacto visual. Mas comparando lado-a-lado, chego a conclusão de que é MUITA informação visual. O objetivo é chegar à próxima página, dos resultados, e o brinde da foto (deleite visual) é supérfluo. E os links distraem, o sujeito tem de escanear toda a tela para ver as opções disponíveis. Em cima à esquerda, à direita, o logo, em cima e embaixo da caixa de texto, no rodapé da página.

O Yahoo! deu uma boa limpada no visual, mas ainda acho muita coisa pra ver e fazer. Como portal, tipo terra.com.br o Yahoo é uma boa alternativa, pois tem notícias, webmail, grupos, favoritos, e tudo acessível de uma boa maneira, mas... eu quero buscar! Search Engine!

Screen shot 2009-10-19 at 09.50.48

E a evolução da google é justamente a de oferecer menos; ter mais para quem quer. Explico: Normalmente as pessoas abrem o browser, digitam um termo (e às vezes até um site) e teclam enter. Se esta pessoa tiver como home o google, vai ver o logo, uma caixa de texto já com foco (e letras GRANDES) e dois botões. Nada mais. Digita, enter, resultados. Se não mexer o mouse, nem vai saber que a home tem mais funções. Genial. Por este tipo de decisão é que eles vão continuar na frente...

Screen shot 2009-10-19 at 09.50.59

Minimalismo Google Style

Tagged as: , 1 Comment
6Oct/090

Dois programas para ser mais produtivo

Tenho uma inclinação natural ao ceticismo, ou seja, a não aceitar imediatamente o que leio ou vejo sem, no mínimo, uma boa reflexão sobre o assunto.

Uma das afirmações que li algum tempo atrás do Leo Babuta no mnmlist.com foi a dica de fazer menos, e procurar programas com menos distrações. É interessante perceber que programas que deveriam aumentar a produtividade por permitir multitasking acabam só atrapalhado (pelo menos a mim) pois para realmente utilizá-los é preciso dedicar um bom tempo a eles ao invés de trabalhar, e acabam ficando parecidos com uma escrivaninha com pilhas de papéis e coisas a resolver, que o sujeito fica olhando sem saber por onde começar.

Pois depois de um tempo descobri que esta é uma chave para uma maior produtividade. Menos botões, menos janelas, menos tudo. Uma coisa de cada vez, wrap it up, get it done.

Isto acabou influenciando inclusive como navego na internet, pois ter 15 tabs abertos ao mesmo tempo com leituras diferentes, referências, emails, etc estavam me deixando demasiado cansado e retendo menos informação do que agora. Então preparei uma lista de programas que estão me ajudando na mudança, que espero sejam úteis para outras pessoas. Como ultimamente estou só no mac são mac-only, mas com certeza existem equivalentes para Windows.

JDarkRoom

jDarkroomO melhor editor de textos, totalmente geek-style, que já vi até hoje.

Junte o nano (ou pico, para os mais antigos) e os atalhos de teclado do mac e o resultado é ele. Estou escrevendo este texto nele agora, pois a falta de formatação permite que o conteúdo seja o foco. Depois de terminar o texto, salve no desktop, copie e cole no editor preferido (word, wordpress, pages, whatever) e formate da melhor forma possível. Como ele toma conta da tela, além de uma certa nostalgia dos tempos dos PC XT, nada mais distrai.

Caso precise fazer algo, tipo abrir o mail ou algo em janelas, basta usar os atalhos do Spaces para mudar de desktop e depois voltar para a imersão nas próprias palavras. ⌘ + H também funciona.

PlainView

Plain View Start PageComo eu consegui viver tantos anos lendo vários tabs ao mesmo tempo, às vezes em várias janelas, não sei.

O PlainView é um programinha super simples e despretensioso, que abre um browser (WebKit engine) em fullscreen, e os atalhos de teclado abrem HUDs (janelas modal translúcidas) que executam uma determinada função (como digitar um endereço ou ver as outras páginas abertas) e depois são fechados, eliminando as distrações.

Tão interessante que está fixo no Dock, descoberto ao acaso ao procurar uma extensão de Full Screen para o Firefox, que no Mac não funciona o F11 para o FFox. Se for preciso, também pode virar uma janela (com ⌘ + ⇪ + F) mas o grande barato é abrir um artigo em tela cheia e fechar ao terminar de ler.

Por enquanto é só, mas vou continuar na procura e se achar mais algum atualizo este post.

25Sep/090

Capturar website screenshot no Mac

Algumas coisas no mac me deixam realmente feliz, como freewares práticos e objetivos, que fazem uma só coisa bem feita.

Agora mesmo descobri uma que é o resumo destas qualidades; precisei capturar um website, que é mais comprido que um screenshot comum me daria a possibilidade de capturar com um simples ⌘ + 3. Solução? Papparazzi!

Ele permite configurar a resolução mínima, crop na imagem final e salva em PNG. Depois é só abrir no preview para redimensionar e salvar. Doce.

Tagged as: , , No Comments
17Sep/090

Spaces no Snow Leopard

Um truque que usava de vez em quando no Leopard era teclar F8 para ver os Spaces, F9 para ver o Expose e, quando me incomodava ter várias janelas em vários Spaces, teclava c para consolidar todas as janelas no primeiro Space. Fui fazer isso hoje no Snow Leopard e... nada.

Não acreditei que tiraram um atalho tão útil. Procurando descobri que ele foi substituído por atalhos mais poderosos...

Agora o teclado funciona no Spaces, então pode-se navegar pelas setas. Clicando ⌘ ← por exemplo move as janelas do Space selecionado para o da esquerda.  Se ao invés de  for usado , ele troca a posição do Space da direita pelo da esquerda.

Melhor, não? Até agora todas as alterações que tenho visto no Snow Leopard o são...