tableless com br modularizacao em javascript us11hz5dwsp
TRANSCRIPT
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
MENU
MENU
JAVASCRIPT
JAVASCRIPT
Modularização em JavaScript
Modularização em JavaScript
9 de December de 2013
9 de December de 2013
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
29 Tweetar 99
Modularização em JavaScript
Modularização em JavaScript
Componentes e módulos nunca foram tão mencionados como ultimamente.
Componentes e módulos nunca foram tão mencionados como ultimamente.
Ambos são conceitos antigos que devemos entender e passar a adotar o quanto
Ambos são conceitos antigos que devemos entender e passar a adotar o quanto
antes. Quem sabe você possa repensar o seu JavaScript hoje mesmo?
antes. Quem sabe você possa repensar o seu JavaScript hoje mesmo?
Por
Por
Jean Carlo Emer
Jean Carlo Emer
Modularização implica na divisão das funcionalidades de um código em partes distintas. Os módulos compõe peças
Modularização implica na divisão das funcionalidades de um código em partes distintas. Os módulos compõe peças
que podem ser adicionadas e removidas quando necessário, vejam:
que podem ser adicionadas e removidas quando necessário, vejam:
reuso de código
reuso de código
.
.
Os frutos do
Os frutos do
encapsulamento
encapsulamento
alcançado com a modularização são a
alcançado com a modularização são a
redução da complexidade
redução da complexidade
,
,
separação de
separação de
interesses
interesses
e
e
manutenção descomplicada
manutenção descomplicada
. Ainda, a definição de cada módulo força o programador a determinar
. Ainda, a definição de cada módulo força o programador a determinar
quais os limites e responsabilidades de cada porção do código.
quais os limites e responsabilidades de cada porção do código.
Acredito que estes argumentos já justificam a adoção de um sistema de módulos para seu código. Assumindo que
Acredito que estes argumentos já justificam a adoção de um sistema de módulos para seu código. Assumindo que
estamos escrevendo código segundo a
estamos escrevendo código segundo a
especificação ECMAScript 5
especificação ECMAScript 5
, tudo começa por uma das palavras grifadas
, tudo começa por uma das palavras grifadas
no início do texto: encapsulamento.
no início do texto: encapsulamento.
Encapsulamento em JavaScript
Encapsulamento em JavaScript
Todo programador que se depara com um código, por menos complexo que seja, precisará entender o conceito de
Todo programador que se depara com um código, por menos complexo que seja, precisará entender o conceito de
escopo. O
escopo. O
escopo de uma variável
escopo de uma variável
ou função no JavaScript são as linhas de código em que estas são acessíveis.
ou função no JavaScript são as linhas de código em que estas são acessíveis.
290Like
6
6
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
escopo. O
escopo. O
escopo de uma variável
escopo de uma variável
ou função no JavaScript são as linhas de código em que estas são acessíveis.
ou função no JavaScript são as linhas de código em que estas são acessíveis.
Encapsulamento é um dos fundamentos da programação orientada a objetos tradicional. Considerando que não
Encapsulamento é um dos fundamentos da programação orientada a objetos tradicional. Considerando que não
temos classes no JavaScript e se entendermos encapsulamento como uma forma de restringir acesso à informação,
temos classes no JavaScript e se entendermos encapsulamento como uma forma de restringir acesso à informação,
concluímos que a definição de escopo é o caminho para alcança-lo.
concluímos que a definição de escopo é o caminho para alcança-lo.
O JavaScript possui um escopo global, que quando em navegadores é
O JavaScript possui um escopo global, que quando em navegadores é
window
window
, e aqueles criados a partir da
, e aqueles criados a partir da
execução de uma função
execução de uma função
. A maneira mais fácil de alcançar encapsulamento é utilizando uma função anônima
. A maneira mais fácil de alcançar encapsulamento é utilizando uma função anônima
invocada imediatamente após sua definição:
invocada imediatamente após sua definição:
1.
(
(
function
function
()
()
{
{
2.
var
var
hideFromOutside
hideFromOutside
=
=
true
true
;
;
3.
})();
})();
Por favor, saiba que este
Por favor, saiba que este
pattern
pattern
chama-se
chama-se
Immediately-Invoked Function Expression (IIFE)
Immediately-Invoked Function Expression (IIFE)
e que os parênteses
e que os parênteses
iniciais servem para que a instrução seja reconhecida como uma expressão.
iniciais servem para que a instrução seja reconhecida como uma expressão.
Módulos
Módulos
Mencionado já há mais de 10 anos, o mais simples dos padrões de escrita de módulos em JavaScript é o
Mencionado já há mais de 10 anos, o mais simples dos padrões de escrita de módulos em JavaScript é o
module
module
pattern
pattern
. O padrão consiste de uma IIFE que retorna um objeto com valores e funções, veja:
. O padrão consiste de uma IIFE que retorna um objeto com valores e funções, veja:
1.
var
var
counter
counter
=
=
(
(
function
function
()
()
{
{
2.
var
var
current
current
=
=
0
0
;
;
3.
return
return
{
{
4.
name
name
:
:
"counter"
"counter"
,
,
5.
next
next
:
:
function
function
()
()
{
{
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
5.
next
next
:
:
function
function
()
()
{
{
6.
return
return
current
current
+
+
1
1
;
;
7.
},
},
8.
isFirst
isFirst
:
:
function
function
()
()
{
{
9.
return
return
current
current
==
==
0
0
;
;
10.
}
}
11.
};
};
12.
})();
})();
Revealing Module Pattern
Revealing Module Pattern
O
O
module pattern possui muitas variações
module pattern possui muitas variações
, uma delas é o
, uma delas é o
revealing module pattern
revealing module pattern
. Neste padrão, todas as funções
. Neste padrão, todas as funções
e valores do módulo são
e valores do módulo são
acessíveis no escopo local
acessíveis no escopo local
e apenas referências são retornadas na forma de objeto.
e apenas referências são retornadas na forma de objeto.
1.
var
var
counter
counter
=
=
(
(
function
function
()
()
{
{
2.
var
var
current
current
=
=
0
0
;
;
3.
function
function
next
next
()
()
{
{
4.
return
return
current
current
+
+
1
1
;
;
5.
}
}
6.
function
function
isFirst
isFirst
()
()
{
{
7.
return
return
current
current
==
==
0
0
;
;
8.
}
}
9.
10.
return
return
{
{
11.
next
next
:
:
next
next
,
,
12.
isFirst
isFirst
:
:
isFirst
isFirst
13.
};
};
14.
})();
})();
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Apesar de mencionado no
Apesar de mencionado no
artigo que define o padrão
artigo que define o padrão
, o ideal é retornar apenas referências a funções,
, o ideal é retornar apenas referências a funções,
retornar
retornar
outros valores pode dar dor de cabeça
outros valores pode dar dor de cabeça
.
.
Revealing module pattern
Revealing module pattern
é bastante interessante pela garantia de acesso
é bastante interessante pela garantia de acesso
descomplicado sem a necessidade de uso do
descomplicado sem a necessidade de uso do
this
this
, por exemplo. A propósito, este conceito será útil para a
, por exemplo. A propósito, este conceito será útil para a
construção de módulos melhores em outros padrões.
construção de módulos melhores em outros padrões.
Namespace
Namespace
Os padrões que vimos até então poluem o escopo global da aplicação com a definição de uma série de variáveis.
Os padrões que vimos até então poluem o escopo global da aplicação com a definição de uma série de variáveis.
Uma solução é a criação de um
Uma solução é a criação de um
namespace
namespace
de uso específico para os módulos.
de uso específico para os módulos.
1.
window
window
.
.
App
App
=
=
{
{
2.
modules
modules
:
:
{}
{}
3.
};
};
4.
5.
App
App
.
.
modules
modules
.
.
counter
counter
=
=
(
(
function
function
()
()
{
{
6.
/* ... */
/* ... */
7.
})();
})();
8.
9.
App
App
.
.
modules
modules
.
.
slider
slider
=
=
(
(
function
function
()
()
{
{
10.
/* ... */
/* ... */
11.
})();
})();
Módulos robustos
Módulos robustos
É natural que módulos dependam uns dos outros. Uma característica importante de um sistema de módulos robusto
É natural que módulos dependam uns dos outros. Uma característica importante de um sistema de módulos robusto
é a possibilidade de
é a possibilidade de
indicar quais são as dependências
indicar quais são as dependências
de um determinado módulo e traçar uma estratégia de
de um determinado módulo e traçar uma estratégia de
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
é a possibilidade de
é a possibilidade de
indicar quais são as dependências
indicar quais são as dependências
de um determinado módulo e traçar uma estratégia de
de um determinado módulo e traçar uma estratégia de
carregamento caso esta não esteja disponível.
carregamento caso esta não esteja disponível.
Asyncronous Module Definition (AMD)
Asyncronous Module Definition (AMD)
Módulos AMD podem ser requisitados, definidos e utilizados a medida que necessários. Nosso contador, se
Módulos AMD podem ser requisitados, definidos e utilizados a medida que necessários. Nosso contador, se
reescrito em AMD, ficaria da seguinte maneira:
reescrito em AMD, ficaria da seguinte maneira:
1.
define
define
(
(
'counter'
'counter'
,
,
function
function
()
()
{
{
2.
var
var
current
current
=
=
0
0
;
;
3.
function
function
next
next
()
()
{
{
4.
return
return
current
current
+
+
1
1
;
;
5.
}
}
6.
function
function
isFirst
isFirst
()
()
{
{
7.
return
return
current
current
==
==
0
0
;
;
8.
}
}
9.
return
return
{
{
10.
next
next
:
:
next
next
,
,
11.
isFirst
isFirst
:
:
isFirst
isFirst
12.
};
};
13.
});
});
Diferente de outros sistemas de módulos, as dependências de cada módulo AMD são indicadas na sua própria
Diferente de outros sistemas de módulos, as dependências de cada módulo AMD são indicadas na sua própria
definição. Isto significa que as dependências não precisam estar prontas para o uso assim que o módulo seja
definição. Isto significa que as dependências não precisam estar prontas para o uso assim que o módulo seja
definido, estas podem ser carregadas assincronamente condicionando a execução do módulo.
definido, estas podem ser carregadas assincronamente condicionando a execução do módulo.
O trecho de código a seguir define um módulo com duas dependências:
O trecho de código a seguir define um módulo com duas dependências:
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
1.
define
define
(
(
2.
[
[
3.
'dep1'
'dep1'
,
,
4.
'dep2'
'dep2'
5.
],
],
6.
7.
function
function
(
(
dep1
dep1
,
,
dep2
dep2
)
)
{
{
8.
/* ... */
/* ... */
9.
}
}
10.
);
);
Caso tenha achado estranho, saiba que a definição do módulo geralmente utiliza uma formatação de espaços
Caso tenha achado estranho, saiba que a definição do módulo geralmente utiliza uma formatação de espaços
bastante específica para facilitar a leitura e entendimento das dependências.
bastante específica para facilitar a leitura e entendimento das dependências.
Em meio ao trecho de código, caso não tenha notado, não definimos o identificador deste módulo. Os módulos
Em meio ao trecho de código, caso não tenha notado, não definimos o identificador deste módulo. Os módulos
podem (e devem) ser definidos um em cada arquivo e, nestes casos, o nome do arquivo torna-se o identificador.
podem (e devem) ser definidos um em cada arquivo e, nestes casos, o nome do arquivo torna-se o identificador.
Requisitando módulos
Requisitando módulos
Toda aplicação terá um trecho principal de código que irá requisitar os módulos e fazer o
Toda aplicação terá um trecho principal de código que irá requisitar os módulos e fazer o
bootstrap
bootstrap
da aplicação. O
da aplicação. O
require
require
(sim, a semântica é lógica) não exige identificação e atende ao requisito, veja a seguir:
(sim, a semântica é lógica) não exige identificação e atende ao requisito, veja a seguir:
1.
require
require
(
(
2.
[
[
3.
'slider'
'slider'
,
,
4.
'counter'
'counter'
,
,
5.
'inputMask'
'inputMask'
6.
],
],
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
6.
],
],
7.
8.
function
function
(
(
slider
slider
,
,
counter
counter
,
,
inputMask
inputMask
)
)
{
{
9.
/* ... */
/* ... */
10.
}
}
11.
);
);
Uma boa prática é criar uma interface comum para iniciar o comportamento de cada um dos módulos. Existem
Uma boa prática é criar uma interface comum para iniciar o comportamento de cada um dos módulos. Existem
diferentes preferências, particularmente utilizo uma função
diferentes preferências, particularmente utilizo uma função
init
init
. Desta forma, o corpo de código do
. Desta forma, o corpo de código do
require
require
conteria algo como
conteria algo como
slider.init()
slider.init()
e
e
counter.init()
counter.init()
.
.
Carregando os módulos
Carregando os módulos
Módulos AMD podem ser utilizados em qualquer navegador, porém sua definição não é suportada nativamente. O
Módulos AMD podem ser utilizados em qualquer navegador, porém sua definição não é suportada nativamente. O
que significa que precisamos de uma biblioteca que provenha as tais funções
que significa que precisamos de uma biblioteca que provenha as tais funções
define
define
e
e
require
require
. O mais popular
. O mais popular
loader
loader
de AMD é o
de AMD é o
require.js
require.js
. Desculpe decepcionar, mas
. Desculpe decepcionar, mas
sua configuração
sua configuração
não está no escopo deste texto.
não está no escopo deste texto.
Empacotando os módulos
Empacotando os módulos
Um dos principais argumentos contra o uso de AMD é a demora para o carregamento de todos os módulos e suas
Um dos principais argumentos contra o uso de AMD é a demora para o carregamento de todos os módulos e suas
dependências.
dependências.
Apesar de possível, o carregamento assíncrono de cada um dos módulos é sumariamente
Apesar de possível, o carregamento assíncrono de cada um dos módulos é sumariamente
não recomendado
não recomendado
levando em conta os
levando em conta os
protocolos de rede
protocolos de rede
que utilizamos atualmente.
que utilizamos atualmente.
Existem ferramentas como o
Existem ferramentas como o
r.js
r.js
que tem a função de empacotar os módulos e entregar um único arquivo para
que tem a função de empacotar os módulos e entregar um único arquivo para
donwload no client-side. O r.js depende de Node.js e introduz uma etapa de análise e concatenação dos arquivos.
donwload no client-side. O r.js depende de Node.js e introduz uma etapa de análise e concatenação dos arquivos.
Caso já possua um
Caso já possua um
workflow para cuidar do seus assets
workflow para cuidar do seus assets
, concatenar os arquivos e utilizar o
, concatenar os arquivos e utilizar o
almond
almond
pode ser uma
pode ser uma
solução bem mais simples. O único detalhe é que você precisará atribuir um identificador para cada módulo. Mesmo
solução bem mais simples. O único detalhe é que você precisará atribuir um identificador para cada módulo. Mesmo
que os módulos estejam definidos cada um em um arquivo, lembre-se que a biblioteca entrará em ação apenas
que os módulos estejam definidos cada um em um arquivo, lembre-se que a biblioteca entrará em ação apenas
após a concatenação.
após a concatenação.
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
após a concatenação.
após a concatenação.
Motivação para o uso
Motivação para o uso
Os módulos AMD já são utilizados nos mais famosos projetos escritos em JavaScript, basta acessar os repositórios:
Os módulos AMD já são utilizados nos mais famosos projetos escritos em JavaScript, basta acessar os repositórios:
jQuery
jQuery
,
,
Flight
Flight
,
,
Lo-Dash
Lo-Dash
,
,
Mout
Mout
; e muitos outros.
; e muitos outros.
A definição permite ainda definir plugins para estender o comportamento de carregamento dos módulos e carregar
A definição permite ainda definir plugins para estender o comportamento de carregamento dos módulos e carregar
outros conteúdos que não sejam unicamente JavaScript.
outros conteúdos que não sejam unicamente JavaScript.
O futuro
O futuro
A especificação ECMAScript 6 já possui um rascunho de uma nova
A especificação ECMAScript 6 já possui um rascunho de uma nova
definição de módulos
definição de módulos
. Os assim chamados
. Os assim chamados
ES6
ES6
modules
modules
são baseados em um sistema de módulos robusto da especificação CommonJS.
são baseados em um sistema de módulos robusto da especificação CommonJS.
CommonJS modules
CommonJS modules
Os módulos CJS se tornaram bastante populares por serem a base do padrão adotado pelo
Os módulos CJS se tornaram bastante populares por serem a base do padrão adotado pelo
Node.js
Node.js
. O principal
. O principal
impedimento para seu uso atualmente é o não suporte a este padrão nos navegadores. Existem ferramentas para
impedimento para seu uso atualmente é o não suporte a este padrão nos navegadores. Existem ferramentas para
viabilizar o seu uso em navegadores, inclusive módulos
viabilizar o seu uso em navegadores, inclusive módulos
AMD podem internamente utilizar a sintaxe proposta
AMD podem internamente utilizar a sintaxe proposta
pela
pela
especificação de CommonJS.
especificação de CommonJS.
ES6 modules
ES6 modules
O sistema de módulos ES6 combina os dois melhores sistemas de módulos existentes. A definição dos módulos se
O sistema de módulos ES6 combina os dois melhores sistemas de módulos existentes. A definição dos módulos se
parece muito com CJS e as mesmas características assíncronas da AMD são endereçadas pela especificação de
parece muito com CJS e as mesmas características assíncronas da AMD são endereçadas pela especificação de
um
um
loader
loader
nativo
nativo
.
.
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
[ES6 modules] permitirão a definição de dependências sem uso de
[ES6 modules] permitirão a definição de dependências sem uso de
callbacks
callbacks
(como em
(como em
CJS) mas serão assíncronos (como AMD). – David Herman
CJS) mas serão assíncronos (como AMD). – David Herman
Considerações finais
Considerações finais
Um sistema de módulos adequado é a saída para manter a sanidade do seu código JavaScript. A despeito das
Um sistema de módulos adequado é a saída para manter a sanidade do seu código JavaScript. A despeito das
inúmeras soluções, saiba que a escolha de um sistema já padronizado garante o uso de uma solução otimizada
inúmeras soluções, saiba que a escolha de um sistema já padronizado garante o uso de uma solução otimizada
para este problema comum.
para este problema comum.
Se me permite um conselho:
Se me permite um conselho:
prefira sempre um sistema de módulos robusto
prefira sempre um sistema de módulos robusto
, é difícil prever o quão complexa
, é difícil prever o quão complexa
uma aplicação poderá se tornar. Em outras palavras, escolha entre: AMD,
uma aplicação poderá se tornar. Em outras palavras, escolha entre: AMD,
CommonJS modules
CommonJS modules
utilizando
utilizando
ferramentas como
ferramentas como
Browserify
Browserify
e até mesmo (por sua conta e risco)
e até mesmo (por sua conta e risco)
ES6 modules
ES6 modules
com
com
ES6 Module Loader
ES6 Module Loader
.
.
Por
Por
Jean Carlo Emer
Jean Carlo Emer
Artesão da internet, cientista da computação e palestrante. Adora aprender uma linguagem diferente, seja as do tipo que
Artesão da internet, cientista da computação e palestrante. Adora aprender uma linguagem diferente, seja as do tipo que
solucionam problemas aritméticos e lógicos, marcam, estilizam ou geram outras. É também um dos criadores da Rye.js e
solucionam problemas aritméticos e lógicos, marcam, estilizam ou geram outras. É também um dos criadores da Rye.js e
defensor da pluralidade das bibliotecas aspirantes a superar a jQuery.
defensor da pluralidade das bibliotecas aspirantes a superar a jQuery.
http://jcemer.com
http://jcemer.com
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Mais pos ts do autor
Mais pos ts do autor
7 comentários
Join the discussion…
Mais votados Comunidade Compartilhar
• Responder •
Leo Balter • um mês atrásObrigado, Jean, tinha me programado para procurar algo compatível com módulos CommonJS e fosse similar aoesquema do NodeJS, com require() e module.exports, no finalzinho do artigo encontrei logo o Browserify que foiexatamente o que procurava. \o/
Confesso que demorei um tempo pra utilizar ferramentas AMD/CommonJS pois queria aguardar a especificação doES6, mas parei em uma situação que não estou vendo mais utilidade invés de apenas continuar esperando.
8
• Responder •
Suissa • um mês atrás Leo BalterTb tem esse aqui do Miller https://github.com/millermedei... Eu nunca usei, acho o browserify mto bom :D
Compartilhar ›
Compartilhar ›
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
NOSSOS SERVIÇOS
NOSSOS SERVIÇOS
Produzimos seu código front-end
Produzimos seu código front-end
Sites WordPress
Sites WordPress
• Responder •
Pedro Nauck • um mês atrásValeu Jean, ainda essa semana tava buscando um bom conteúdo sobre modularização Javascript.
1
• Responder •
Luiz Henrique • 13 horas atrásValeu pelo conteúdo. Obrigado
• Responder •
Tiago Celestino • 22 dias atrásUsei o require.js em uma app, achei super prático, o problema é que em alguns momentos parava de funcionar,principalmente no IECA.
• Responder •
Palmer • 23 dias atráshardcore heim
• Responder •
marlonnauweb • um mês atrásExcelente Jean, conceitos importantíssimos para os novos desenvolvedores js. Profissionalizando a área ;)Parabéns e obrigado
Assinar feed Add Disqus to your site
Compartilhar ›
Compartilhar ›
Compartilhar ›
Compartilhar ›
Compartilhar ›
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Micro Workshops Online
Micro Workshops Online
Aulas Particulares
Aulas Particulares
Vídeos tutoriais
Vídeos tutoriais
MAIS VISITADOS
MAIS VISITADOS
PHPUnit, como iniciar sem dores
PHPUnit, como iniciar sem dores
O grande desencontro do HTTP com o HTML
O grande desencontro do HTTP com o HTML
Assista: [Live Coding] Codificando um Layout com HTML/CSS
Assista: [Live Coding] Codificando um Layout com HTML/CSS
O grande desencontro do HTTP com
O grande desencontro do HTTP com
o HTML
o HTML
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Não tenho versão mobile, faço ou não faço?
Não tenho versão mobile, faço ou não faço?
CSS Transition e CSS Animation
CSS Transition e CSS Animation
SEJA UM AUTOR
SEJA UM AUTOR
Quer escrever no Tableless?
Quer escrever no Tableless?
NEWSLETTER
NEWSLETTER
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
NEWSLETTER
NEWSLETTER
Email Address
Primeiro nome
Sobrenome
Cadastrar
Cadastrar
MAIS RECENTES
MAIS RECENTES
PHPUnit, como iniciar sem dores
PHPUnit, como iniciar sem dores
O que falamos em 2013?
O que falamos em 2013?
O grande desencontro do HTTP com o HTML
O grande desencontro do HTTP com o HTML
Não tenho versão mobile, faço ou não faço?
Não tenho versão mobile, faço ou não faço?
Domínio Gratuito existe, mas, devo usá-lo?
Domínio Gratuito existe, mas, devo usá-lo?
Como escrever bem para o SEO – Texto e Contexto, da palavra-chave à semântica.
Como escrever bem para o SEO – Texto e Contexto, da palavra-chave à semântica.
Formulários acessíveis com wai-aria
Formulários acessíveis com wai-aria
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
JavaScript de forma assíncrona e legível
JavaScript de forma assíncrona e legível
Ensine mais
Ensine mais
Criando um blog com Octopress e Github Pages
Criando um blog com Octopress e Github Pages
Introdução ao Selenium 2
Introdução ao Selenium 2
TDD, por que usar?
TDD, por que usar?
Transições inteligentes na experiência do usuário
Transições inteligentes na experiência do usuário
Assista: [Live Coding] Codificando um Layout com HTML/CSS
Assista: [Live Coding] Codificando um Layout com HTML/CSS
Turbinando as Media Queries
Turbinando as Media Queries
Tableless
+ 4,044
Follow +1
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Tableless
28,466 people like Tableless.
Facebook social plugin
Like
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
VAGAS E TRAMPOS
VAGAS E TRAMPOS
DESENVOLVEDOR PHP (Rio de Janeiro)
DESENVOLVEDOR PHP (Rio de Janeiro)
Desenvolvedor web pleno (front e back-end) (São Paulo)
Desenvolvedor web pleno (front e back-end) (São Paulo)
Web Designer (São Paulo)
Web Designer (São Paulo)
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Atendimento / Analista de Negócios na Object Edge (Rio Grande do Sul)
Atendimento / Analista de Negócios na Object Edge (Rio Grande do Sul)
Estágio desenvolvedor front-end (Rio Grande do Sul)
Estágio desenvolvedor front-end (Rio Grande do Sul)
Gerente de Projetos na Object Edge Brasil (Rio Grande do Sul)
Gerente de Projetos na Object Edge Brasil (Rio Grande do Sul)
Desenvolvedor Web HTML/CSS/JS (Rio Grande do Sul)
Desenvolvedor Web HTML/CSS/JS (Rio Grande do Sul)
CATEGORIAS
CATEGORIAS
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
CATEGORIAS
CATEGORIAS
Select Category
HISTÓRICO
HISTÓRICO
Select Month
O Básico
O Básico
Tudo o que você precisa saber sobre Sitemaps
Tudo o que você precisa saber sobre Sitemaps 17
17
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Tudo o que você precisa saber sobre Sitemaps
Tudo o que você precisa saber sobre Sitemaps
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Semântica
Semântica
Semântica, padrões e o que você tem a ver com isto
Semântica, padrões e o que você tem a ver com isto 14
14
Artigos
Artigos
Modos de Mesclagem em CSS
Modos de Mesclagem em CSS 9
9
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Modos de Mesclagem em CSS
Modos de Mesclagem em CSS
MAIS ARTIGOS
MAIS ARTIGOS
PHP
PHP
PHPUnit, como iniciar sem dores
PHPUnit, como iniciar sem dores
Instalando o PHUnit utilizando o gerenciador de pacotes
Instalando o PHUnit utilizando o gerenciador de pacotes
Composer.
Composer.
ARTIGOS
ARTIGOS
O que falamos em 2013?
O que falamos em 2013?
E o que vamos falar em 2014?
E o que vamos falar em 2014?
Confira alguns do assuntos que fizeram a cabeça em 2013 e podem ser
Confira alguns do assuntos que fizeram a cabeça em 2013 e podem ser
grandes promessas para 2014.
grandes promessas para 2014.
CÓDIGO
CÓDIGO
O grande desencontro do HTTP com o HTML
O grande desencontro do HTTP com o HTML
Duas tecnologias criadas sob o mesmo projeto que possuem uma falha de compatibilidade. Vamos
Duas tecnologias criadas sob o mesmo projeto que possuem uma falha de compatibilidade. Vamos
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Duas tecnologias criadas sob o mesmo projeto que possuem uma falha de compatibilidade. Vamos
Duas tecnologias criadas sob o mesmo projeto que possuem uma falha de compatibilidade. Vamos
conhecer um pouco da história do HTTP e HTML, boas práticas e como manter interações coerentes
conhecer um pouco da história do HTTP e HTML, boas práticas e como manter interações coerentes
entre cliente e servidor.
entre cliente e servidor.
CSS
CSS
Não tenho versão mobile, faço ou não faço?
Não tenho versão mobile, faço ou não faço?
Ainda tem dúvidas se deve ou não fazer a versão mobile do seu produto ou site? Saia
Ainda tem dúvidas se deve ou não fazer a versão mobile do seu produto ou site? Saia
dessa...
dessa...
ARTIGOS
ARTIGOS
Domínio Gratuito existe, mas, devo usá-lo?
Domínio Gratuito existe, mas, devo usá-lo?
Muitos tipos de domínio estão espalhados pela web, inclusive os gratuitos, mas, afinal, eu posso
Muitos tipos de domínio estão espalhados pela web, inclusive os gratuitos, mas, afinal, eu posso
realmente usar?
realmente usar?
SEO
SEO
Como escrever bem para o SEO – Texto e Contexto, da palavra-chave à
Como escrever bem para o SEO – Texto e Contexto, da palavra-chave à
semântica.
semântica.
Entenda como melhorar o texto para os sistemas de busca.
Entenda como melhorar o texto para os sistemas de busca.
ACESSIBILIDADE
ACESSIBILIDADE
Formulários acessíveis com wai-aria
Formulários acessíveis com wai-aria
Crie formulários incríveis usando as boas práticas e acessibilidade,
Crie formulários incríveis usando as boas práticas e acessibilidade,
afim de suprir todos os tipos de
afim de suprir todos os tipos de
usuários.
usuários.
GERAL
GERAL
JavaScript de forma assíncrona e legível
JavaScript de forma assíncrona e legível
A programação assíncrona possui a vantagem de gerar códigos perfomáticos. Em certos casos, a
A programação assíncrona possui a vantagem de gerar códigos perfomáticos. Em certos casos, a
implementação de diversas funções assíncronas encadeadas através de funções callback pode
implementação de diversas funções assíncronas encadeadas através de funções callback pode
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
NÓS FAZEMOS
NÓS FAZEMOS
Produzimos seu código front-end
Produzimos seu código front-end
Sites WordPress
Sites WordPress
Micro Workshops Online
Micro Workshops Online
Aulas Particulares
Aulas Particulares
Vídeos tutoriais
Vídeos tutoriais
POSTS RECENTES
POSTS RECENTES
PHPUnit, como iniciar sem dores
PHPUnit, como iniciar sem dores
O que falamos em 2013?
O que falamos em 2013?
O grande desencontro do HTTP
O grande desencontro do HTTP
com o HTML
com o HTML
Não tenho versão mobile, faço ou
Não tenho versão mobile, faço ou
não faço?
não faço?
Domínio Gratuito existe, mas,
Domínio Gratuito existe, mas,
devo usá-lo?
devo usá-lo?
SIGA-NOS
SIGA-NOS
FEED Rss
FEED Rss
Google+
Google+
implementação de diversas funções assíncronas encadeadas através de funções callback pode
implementação de diversas funções assíncronas encadeadas através de funções callback pode
prejudicar a leitura e a manutenção do código. Para demonstrar esse encadeamento, vamos utilizar
prejudicar a leitura e a manutenção do código. Para demonstrar esse encadeamento, vamos utilizar
um trecho …
um trecho …
ARTIGOS
ARTIGOS
Ensine mais
Ensine mais
Aprenda ensinando em
Aprenda ensinando em
2014.
2014.
CÓDIGO
CÓDIGO
Criando um blog com Octopress e Github
Criando um blog com Octopress e Github
Pages
Pages
Crie um blog em Octopress, framework baseado em Jekyll.
Crie um blog em Octopress, framework baseado em Jekyll.
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Arquitetura de Informação e UX:
Arquitetura de Informação e UX:
Diego Eis
Diego Eis
. Design:
. Design:
Luis Vilela
Luis Vilela
. Ilustrações:
. Ilustrações:
Tilman Zitzmann
Tilman Zitzmann
.
.