JSBIN (JavaScript online)

JS Bin é uma ferramenta para a experimentação de linguagens web. Em HTML particular, CSS e JavaScript, mas JS Bin também suporta outras linguagens como Markdown, Jade e Sass.

é possível compartilhar código. Junto com o código, a saída completa também é compartilhada com outros desenvolvedores, colegas e / ou alunos. Conforme você digita em um dos painéis, você e qualquer um vendo o seu bin vai ver a saída a ser gerado em tempo real no painel de saída.

É possível adicionar uma extensão do JS Bin no Firefox: https://addons.mozilla.org/pt-BR/firefox/addon/easy-jsbin/

Anúncios

Mentalidade Mobile First

A ideia defendida por Luke Wroblewski é simples: desenhar sua solução primeiro para mobile, depois para web. Esse exercício forçará o seu poder de síntese ao máximo e, ao transportar para a versão web, você já terá limado o excesso de conteúdo.

Segundo Luke, o excesso de informação em grande parte dos sites se dá porque é relativamente fácil adicionar conteúdo web.

“O mobile não deixa espaço para nenhum conteúdo de relevância duvidosa. Você precisa saber o que realmente importa. Para fazer isso você precisa conhecer bem os seus usuários e o seu mercado.”, afirma Luke.

wpid-wp-1411570591317.jpeg

Um dispositivo mobile é por muitas vezes o primeiro dispositivo conectado que um bebê ou uma criança pequena interage e se familiariza. Se hoje eu der o kindle para meu bebê com 10 meses, ele tenta arrastar a tela como se fosse meu Smartphone.

“… Esta mentalidade mobile-first molda como eles interagem com o mundo e criam expectativas para tudo a sua volta. Incluindo dispositivos non-touch ou objetos inanimados, touch-friendly e sempre conectados. Estas mentes mobile-first são livres dos modelos mentais do passado da computação, e como resultado certamente moldarão o que esperamos mais a frente do nosso “mundo conectado.”

A definição mobile-first de Luke consiste em três principais componentes:

1. O crescimento do mobile é, mais do que nunca, uma grande oportunidade de atingir as pessoas;

2. As restrições do meio mobile nos força a focar no que realmente importa;

3. E as capacidades do mobile criam oportunidades inovadoras.

Então? Será que mobile-first seria a arquitetura a se pensar? Ou estamos apenas em mais um modismo?

Declarações HTML !DOCTYPE

A declaração <!DOCTYPE> não é uma tag HTML; ela é uma instrução para o browser sobre qual versão a página HTML está escrita. e deve ser a primeira declaração do documento HTML.

No HTML 4.01, a declaração <!DOCTYPE> faz referência a um DTD, por que o HTML 4.01 foi baseado no SGML. O DTD especifica as regras para a linguagem de marcação para que os navegadores renderizem o conteúdo corretamente.

HTML5 não é baseado no SGML, e, portanto, não necessita de uma referência para um DTD.
HTML 4.01 e HTML 5

Existem três diferente declarações <!DOCTYPE> no HTML 4.01. No HTML5 existe apenas uma:

<!DOCTYPE html>

Elementos HTML e DOCTYPE

Veja na tabela todos os elementos HTML e em qual <!DOCTYPE> cada elemento aparece.

Dicas e Notas

Nota: A tag <!DOCTYPE> não tem uma tag de fechamento.

Dica: a declaração <!DOCTYPE> NÃO é case sensitive.

Dica: Use o validador W3C para checar se você escreveu um documento HTML / XHTML válido.

Declarações mais comuns de DOCTYPE

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

Este DTD contém todos os elementos e atributos HTML, mas NÃO INCLUI elementos de apresentação ou depreciados (como font). Framesets não são permitidos.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;

HTML 4.01 Transitional

Este DTD contém todos os elementos e atributos HTML, INCLUINDO elementos de apresentação e depreciados (como font). Framesets não são permitidos.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;

HTML 4.01 Frameset

Este DTD é igual ao HTML 4.01 Transitional, mas permite o uso de conteúdo frameset.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”&gt;

XHTML 1.0 Strict

Este DTD contém todos os elementos e atributos HTML, mas NÃO INCLUI elementos de apresentação ou depreciados (como font). Framesets não são permitidos. A marcação também deve ser escrita como um bem formado XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

XHTML 1.0 Transitional

Este DTD contém todos os elementos e atributos HTML, INCLUINDO elementos de apresentação e depreciados (como font). Framesets não são permitidos. A marcação também deve ser escrita como um bem formado XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

XHTML 1.0 Frameset

Este DTD é igual ao XHTML 1.0 Transitional, mas permite o uso de conteúdo frameset.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”&gt;

XHTML 1.1

Este DTD é igual ao XHTML 1.0 Strict, mas permite que você adicione módulos (por exemplo para fornecer suporte ao Ruby para idiomas do Leste Asiático).

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”&g

Javascript, Debugger e Logging Para Firebug

Cada vez mais me surpreendo com as possibilidades e o poder do javascript, na sua mais ampla forma de utilização.
A última foi a possibilidade e interação com o firebug, além de simplesmente substituir as funções de “alert();“, o que para muitos, não é nenhuma novidade.
Entre elas a possibilidade de procurar valores de variáveis em determinados pontos de códigos, exibir uma estrutura XML, e muitas outras. Aperfeiçoando a DX (Developer Experience).

firebug

Entre os exemplos mais simples encontrados temos:

console.log
A maneira mais fácil escrever para o console do Firebug, podendo passar tantos argumentos quanto você quer e eles serão unidos em uma fileira, conforme os exemplos: console.log(“hello world”) , console.log(2,4,6,8,”foo”,bar) .

Código de cores

Além console.log , existem várias outras funções que você pode chamar para imprimir mensagens com uma distinção colorido visual e semântica. Estes incluem console.debug , console.info , console.warn , e console.error .

 

 

 

 

Timing e profiling

O Firebug permite duas maneiras fáceis de medir o desempenho JavaScript. Uma delas é chamar o console.time(“timing foo”) antes do código que você quer medir, e então console.timeEnd(“timing foo”) depois.

 

 

 

O Firebug, então, registra o tempo que foi gasto entre elas. E o profiler JavaScript. Basta mandar para o console.profile() antes do código que você quer medir, e então console.profileEnd() depois, mais simples não! O Firebug irá registrar um relatório detalhado sobre quanto tempo foi gasto em cada chamada de função entre elas.

Como falei, as possibilidades são muitas e excelentes.

Fonte(s):
http://getfirebug.com/logging

CSS White-Space e Display

Estive precisando um dia destes de algo para realizar a quebra de linha e não podia optar por JavaScript ou suas vastas opções. Então que descubro o White-Space e Display.

Tag White-Space

É usada para o tratamento de espaços em branco, que possuí as seguintes propriedades:
Valor         Descrição
normal      Os espaços em branco serão ignorados pelo browser.
nowrap     O texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag <br>
pre              Os espaços em branco serão preservados pelo browser.
pre-line     Os espaços em branco serão ignorados pelo browser e o texto será quebrado quando necessário.
pre-wrap  Os espaços em branco serão preservados pelo browser e o texto será quebrado quando necessário.
inherit       Será herdado as características do elemento pai.
Tag Display

Além de utilizar a tag div como uma quebra de linha quase natural, em muitos casos como na utilização de tags do jsf que geram divs e com isso muitas são renderizadas é que temos a tag Display.

Value                                    Description
none                                      O elemento não será exibido em todos
box (ou flex-box)            O elemento é apresentado como um em nível de bloco flex container box
block                                     O elemento é apresentado como um em nível de bloco do elemento(like paragraphs and headers)
flex                                         O elemento é apresentado como um em nível de bloco flex container box
inline Default.                    O elemento é apresentado como um elemento inline-level(like span)
inline-block                        O elemento é colocado como um elemento inline(on the same line as adjacent content), but it behaves as a block element
inline-flex                             O elemento é apresentado como um n inline-level flex container box
inline-table                           O elemento é apresentado como um n inline-level table
list-item                                 O elemento é apresentado como um list-item
table                                        O elemento é apresentado como um tabela
table-caption                       O elemento é apresentado como um tabela caption
table-cell                               O elemento é apresentado como um tabela cell
table-column                       O elemento é apresentado como um tabela column
table-column-group         O elemento é apresentado como um tabela column group (like <colgroup>)
table-footer-group            O elemento é apresentado como um tabela footer row group
table-header-group          O elemento é apresentado como um tabela header row group
table-row                              O elemento é apresentado como um tabela row
table-row-group                O elemento é apresentado como um tabela row group
inherit                                   Será herdado as características do elemento pai

Fonte(s):
http://www.w3schools.com
http://www.maujor.com