Primeiro, precisar instalar o plugin TwentyTwenty.

Depois, faça upload das imagens para seu site, pode ser por pelo gerenciamento de Mídia ou pela inserção de imagens nos posts. Com as duas imagens no servidor, é necessária pegar o link de cada uma, copie e cole em um arquivo a parte para ficar mais fácil.

Agora, basta editar ou inserir um post, no campo de edição, vamos utilizar o shortcode [TwentyTwenty][/ TwentyTwenty].

Certifique-se que ambas as fotos tenham as mesmas dimensões.

Com tudo pronto, vamos inserir o pequeno código para gerar o efeito.

[twentytwenty]
<img src="/wp-content/uploads/2014/12/batons-vermelhos-antes.jpg" alt="Antes" width="100%" height="350"/>
<img src="/wp-content/uploads/2014/12/batons-vermelhos-depois.jpg" alt="Depois" width="100%" height="350"/>
[/twentytwenty]

Explicação do código:

[twentytwenty] e [/twentytwenty] são a abertura e fechamento das tags que formaram os efeitos.

As imagens são, a 1ª o antes e a 2ª o depois.

1ª – /wp-content/uploads/2014/12/batons-vermelhos-antes.jpg
2ª – /wp-content/uploads/2014/12/batons-vermelhos-depois.jpg

Agora que já sabe como utilizar, vamos criar o efeito.

[twentytwenty]


[/twentytwenty]

Conforme você deslizar o seletor, verá que a imagem é sobreposta de acordo com sua necessidade, tornando visível e fácil de comparar, o “Before” e “After” somem de acordo que é feito o deslizamento.

Isso é tudo. Esperamos que este artigo tenha ajudado a você aprender a mostrar o antes e depois de uma foto em seu site WordPress.  Se você gostou deste artigo, também visite no link no Facebook e Google+, há diversas publicações interessantes.

Não apenas o Facebook, mas o Gmail, Twitter, Dropbox também possuem ferramentas para este tipo de ocasião, você pode e deve deslogar remotamente caso não for utilizar o serviço daquele computador mais.

O procedimento é muito simples, basta seguir os passos abaixo:

Primeiro, clique em Configurações:

Depois clique na opção Segurança:

Clique na opção editar na linha Onde você está conectado:

Agora é fácil, basta clicar em Encerrar atividade, como mostra o destaque. Desta forma, qualquer computador remoto perderá a validade do login e assim, solicitando senha e usuário novamente.

Esta é uma dica simples, mas muito efetiva. Melhor se prevenir e evitar dores de cabeça. Compartilhe esta dica a seus amigos, eles também podem precisar.

Dicas e sugestões, deixem nos comentários.

Porque não otimizar? Diminuir o tamanho do arquivo e entregar ao usuário apenas o que ele precisa é primordial, tanto que até o Google leva este requesito em consideração na hora de rankear o seu site.

A maneira mais fácil que encontramos é utilizando o recurso do site Fontello. Neste site você seleciona os ícones que deseja e depois faz download da Font compilada e otimizada, simples, rápido e fácil.

Após fazer o download, sua utilização é extremamente simples, basta inserir os arquivos em seu site e utilizar a nova fonte.

Código de exemplo de inserção dos arquivos:

<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/animation.css">
<!--[if IE 7]><link rel="stylesheet" href="css/fontello-ie7.css"><![endif]-->

Depois inserir os ícones desejados:

<i class="icon-emo-wink"></i>
<i class="icon-emo-thumbsup">
<i class="icon-vkontakte"></i>
<i class="icon-level-down"></i>

Veja o exemplo que o Fontello nos entrega ao efetuar download da fonte compilada:

Tudo muito simples, desta forma você e seu usuário serão beneficiados.  Alguma dica ou sugestão? Deixe nos comentários!

A forma de utilizar é muito simples, basta adicionar o arquivo css animation e inserir a classe ao objeto que deve ser animado, exemplo:

Inserção do CSS das animações:

<link rel="stylesheet" href="css/animations.css">

Adicionando classe ao objeto que será animado:

<div id="object" class="slideUp">

Abaixo você pode conferir o resultado das animações, clique nos links para ver os diversos efeitos:

CSS:

Javascript:

Html:

Para fazer com que a animação seja ativada quando o usuário ver o item, você deve colocar este código em Javascript e css, sendo que, deve ser carregado o Jquery antes:

CSS:

#object{
	background-color: #fe5652;
	visibility: hidden;
}

JS:

<script>
	$(window).scroll(function() {
		$('#animatedElement').each(function(){
		var imagePos = $(this).offset().top;

		var topOfWindow = $(window).scrollTop();
			if (imagePos < topOfWindow+400) {
				$(this).addClass("slideUp");
			}
		});
	});
</script>

Para ver o exemplo, acessem este LINK.

Esperamos que tenham gostado e aprendido, dúvidas e sugestões deixem nos comentários, isto incentiva-nos a sempre compartilhar conhecimento cada vez mais!

Vamos supor que temos 2 tabelas relacionadas, clientes e telefones. O cliente tem a seguinte estrutura:

CREATE TABLE `clients` (
  `idClients` int(11) NOT NULL AUTO_INCREMENT,
  `name` char(150) DEFAULT NULL,
  PRIMARY KEY (`idClients`)
)
insert  into `clients`(`name`) values ('Turbosite');

Note que no final inserimos um usuário para nosso teste.

A tabela de telefones ficaria desta forma:

CREATE TABLE `phones` (
  `idPhones` int(11) NOT NULL AUTO_INCREMENT,
  `number` char(20) NOT NULL,
  `idClients` int(11) NOT NULL,
  PRIMARY KEY (`idPhones`,`idClients`),
  KEY `idClients` (`idClients`),
  CONSTRAINT `phones_ibfk_1` FOREIGN KEY (`idClients`) REFERENCES `clients` (`idClients`)
)
insert  into `phones`(`number`,`idClients`) values ('(31) 4003-2322',1);
insert  into `phones`(`number`,`idClients`) values ('(31) 3261-2168',1);

Sem utilizar o NATURAL Join, a consulta para pegar os telefones de um cliente seria da seguinte forma:

SELECT C.`name`,P.`number` FROM clients C
INNER JOIN phones P
ON C.`idClients` = P.`idClients`
WHERE C.`idClients` = 1

Resultado seria:

Agora com o Natural JOIN, a consulta seria:

SELECT * FROM clients
NATURAL JOIN phones
WHERE idClients = 1

O resultado da pesquisa:

O Natural JOIN é inteligente o suficiente para não acusar erro por ambiguidade de coluna, como uma faz referência a outra, ele não lista em duplicidade as colunas de referência.
A consulta fica mais limpa, mais fácil de entender e de dar manutenção, caso esta tabela fizesse referência a uma 3ª tabela, era só adicionar uma linha ficando desta forma:

SELECT * FROM clients
NATURAL JOIN phones
NATURAL JOIN tabela3
WHERE idClients = 1

Vamos deixar aqui um link com uma apresentação de JOINS do MYSQL. É interessante ver e aprender para tomar a melhor decisão no desenvolvimento de seus projetos.

http://w3resource.com/gallery/mysql-joins-slides-presentation

A página inicial de seu site, provavelmente, é a página mais importante de todo seu domínio. Ela é o primeiro contato do visitante com seu site, o tapete de boas vindas para sua empresa. É por meio dela que o visitante vai decidir se explora o site ou se vai embora. E para conseguir o maior público possível, ela tem de estar perfeita.

Ao acessar o construtor de sites da Turbosite, a sua primeira interação vai ser com construção da página inicial. Todos nossos Templates já modelam uma ideia de localização e conteúdos que você pode colocar nessa página, o que já ajuda bastante a dar seus primeiros passos. Porém, tudo isso ainda não é o bastante para transmitir uma identidade única para seu site.

A equipe da Turbosite retirou da página da UpInside 5 dicas para a construção da página inicial. A seguir você confere estratégias interessantes, que buscam manter o visitante mais tempo em sua página e atraí-lo para navegar por outros conteúdos de seu site.

1) Sirva conteúdo de qualidade

Existe uma falsa ideia na internet que temos que servir muito conteúdo diariamente em nossos sites. Mas até que ponto isso é promissor? Será que vale tudo para atrair mais usuários ao site? E ainda, será que esse tipo de estratégia é sustentável?

A dica aqui é, vale mais 100 posts de qualidade do que 1000 posts mais ou menos. E a ideia é bem simples.

Todo site é construído com um nicho de mercado específico. Quando recebemos nossos usuários, eles entram em nosso site por um link de interesse. Pesquisa, indicação, social. Seja qual for a origem do tráfego, ele entrou procurando algo.

Se tivermos 100 posts dentro do site que forneçam conteúdo atrativo para esse usuário, a chance de navegação por mais conteúdo é bem maior. Com links de relação ou mais vistos você consegue servir mais conteúdo de interesse.

Ainda por ter menos posts e com mais qualidade, seu usuário vai consumir o conteúdo em menos tempo, vai aproveitar melhor esse conteúdo e ter uma experiência agradável.

Agora, se você tiver 1000 posts e entre eles 100 posts de primeira. A chance deste usuário bater em um conteúdo sem relevância antes de criar um vínculo é bem maior. O resultado? Talvez seu usuário saia e não volte mais.

Claro que a frequência também é importante. Afinal é muito raro você ler a mesma coisa 2 ou 3 vezes. Mas vale mais 1 post bom por semana, que 7 ganchos de conteúdo sem qualificação para seus prospectos.

Claro, se você tiver 1000 posts de primeira a conversão e ranqueamento são bem maiores.

2) Desperte o interesse sem entregar o conteúdo

Estamos falando de página inicial, que é o link de entrada para seu conteúdo. Essa página deve ser tratada como uma capa. Sua função é exibir as atualizações e entregar valor e interesse ao seu usuário. Não o conteúdo!

Procure aqui servir uma boa hierarquia de conteúdo. Crie uma vitrine de seus posts e exiba apenas o essencial. Uma capa, um título e uma pequena descrição com links de acesso intuitivos para que o usuário navegue em seu site.

Sites que mostram muito na capa tendem a ter maior rejeição e menos ranqueamento no Google. Isso acontece porque o motor entende que se o usuário não navegou é porque não gostou do que viu ou não encontrou o que o link propôs.

Também procure não servir muitos posts. Eu diria para você ficar entre 7 e 10 atualizações. Isso é importante pois esses posts terão seu rodízio. A medida que você posta novidades você está alterando o visual da capa.

Isso é importante para que o usuário tenha sempre um impacto diferente ao acessar seu site.

3) Nada é de graça, pague pela interação

Essa dica é simples e muito importante para que seu site tenha realmente conversões positivas em servir links de compartilhamento, curtidas e tudo mais. A interação não deve ser requisitada e sim remunerada.

Sua moeda aqui é o conteúdo. Então não faz sentido você servir Plugins de curtidas ou compartilhamento na página inicial do site. A não ser que você crie sua share box e consiga colocar esses links dentro do contexto do layout.

Mas no geral pense assim. Porque um usuário iria compartilhar ou curtir qualquer coisa antes de realmente gostar (curtir) daquilo? Então a página inicial do seu site não serve para pedir interações. Isso deve ser feito depois de entregar o conteúdo.

Mas claro, a página inicial pode fornecer prova social. Então em vez de servir uma ação de curtir, prefira servir uma box mostrando quantas pessoas já curtiram sua página. Isso gera engajamento com seu usuário.

A melhor prova social hoje é o like box do Facebook. Pois ele mostra (quando ocorre) os seus amigos que já curtiram aquilo e isso é uma grande prova social. Se seu amigo gosta você aumenta a confiança do usuário no site.

4) Evite tirar seu usuário do site

A página inicial do site tem por conquista a maior relevância para links. É como se fosse nosso MAPA do projeto. Sabemos naturalmente que a home foi construída para indicar o conteúdo do site. Nos levar até os melhores, mais vistos e últimos posts do mesmo.

Nosso comportamento? Qualquer usuário que entre em um site pela página inicial procura links para clicar! Um caminho ou direção para chegar até um conteúdo que procura. Sem falar na pesquisa interna.

Então é muito importante que você evite links externos na página inicial. E esses links podem estar em banners do AdSense, parceiros, entre outros. Se seu usuário sair do site logo que acessa a página inicial, sua taxa de rejeição aumenta imediatamente.

5) Monitore o comportamento

Existem várias formas de você monitorar o comportamento dos seus usuários. O GA (Google Analytics) é a melhor e mais completa ferramenta para isso.

Com o monitoramento correto você consegue saber muito mais do seu público. Monitorando a pesquisa por exemplo. Você consegue saber com precisão o que cada usuário procura dentro do seu site. Com isso você pode saber sobre o que escrever no futuro.

Você também pode criar vários funis dentro do GA. Criando um passo a passo de URL, um link de entrada ou até um destino, e assim saber quantos usuários estão convertendo aquele objetivo. Assim você pode melhorar ainda mais a experiência deste usuário nesse quesito.

Por fim, você ainda pode criar alertas de tráfego. Quantos % melhorou com relação ao dia, mês, semana anterior entre outros. Assim quando você posta um novo título ou cria alguma estratégia diferente. Você consegue saber se aquilo deu certo ou não.

Isso funciona para o site em um todo. Mas veja que é possível saber se sua página inicial está conseguindo essas conversões. Monitorar os links e saber se está realmente intuitivo para o usuário navegar a partir dela.

Negligenciar a importância do seu conteúdo, acreditando que ele não é lido pelos visitantes do canal virtual, e investir apenas na parte visual do site pode ser um erro. Isso porque é por meio desse conteúdo que possíveis clientes, fornecedores e investidores aprenderão sobre a empresa e poderão decidir se fecham ou não o negócio.

Para dar um auxílio na hora em que for escrever o link “Quem Somos”, a equipe da Turbosite compartilha com essa postagem algumas dicas retiradas do site de notícias Jornal do Empreendedor. Abaixo seguem essas dicas.

1. Forneça informações básicas e curiosas do negócio

Detalhar como surgiu a empresa, quem são os empreendedores e quais os valores e objetivos do negócio não pode ser excluído desse espaço. É importante também mencionar se a empresa possui mais de uma sede. Para não deixar o texto extenso e cansativo, é interessante contar curiosidades da constituição da empresa e possíveis hobbies dos diretores do negócio. Isso permitirá que o leitor ganhe proximidade com a empresa.

2. Mostre clientes e premiações da empresa

Para dar credibilidade ao negócio, é importante elencar nesse espaço os principais clientes e parceiros comerciais. A incorporação do logotipo dessas empresas na sua página pode ser um elemento interessante para o apelo visual. Mencionar prêmios e reconhecimentos recebidos pela empresa, bem como o trabalho de serviço comunitário e iniciativas sustentáveis, também ajudarão a tornar o negócio atraente.

3. Invista nas mídias sociais

Agregar vídeos que mostrem a dinâmica da empresa é interessante para que o visitante crie proximidade com o negócio. Além disso, procure divulgar o link da sua página em redes sociais como Twitter, Orkut e Facebook. Caso a empresa ou o empreendedor possua um blog, é interessante divulgá-lo nesse espaço.

JavaScript puro ou Vanilla JavaScript (felizmente) está voltando. E com força. Mas, quando você decide continuar nos estudos e começa a inspecionar códigos alheios, inevitavelmente você se depara com algo como:

(function (window, document, undefined) {
    //
})(window, document);

Frequentemente desenvolvedores descobrindo (ou redescobrindo) o JavaScript puro se perguntam sobre IIFE (Expressão de Função Imediatamente Invocada ou Immediately-Invoked Function Expression), frequentemente apresentado da seguinte maneira:

(function (window, document, undefined) {
    //
})(window, document);

Escopo privado em IIFE

JavaScript tem maneiras interessantes de trabalhar com escopo de função; então, primeiramente essa expressão cria um “âmbito privado” (private scope). Por exemplo:

(function (window, document, undefined) {
    var name = 'Foo';
})(window, document);
console.log(name); // "name" não definido, está em um escopo diferente

Como funciona IIFE

Uma função normal se parece com isso:

var logMyName = function (name) {
    console.log(name);
};
logMyName('Foo');

Ela é chamada (invoke) quando necessário, por escolha do programador, em qualquer ponto do código em que se queira e/ou seja possível.

A razão pela qual essa IIFE em JavaScript foi criada, foi para ser uma expressão de função imediatamente invocada, o que significa que elas são imediatamente chamadas em tempo de execução – também, não é possível chamá-la novamente, já que elas só rodam uma vez, mais ou menos assim:

var logMyName = (function (name) {
    console.log(name); // Todd
})('Todd');

(function () {
})();

O par de parênteses extra é necessário. Isso não funciona:

function () {
}();

!function () {
}();

+function () {
}();
 
-function () {
}();
 
~function () {
}();

Mas não é preciso se forçar a decorar isso para usar a todo momento para fazer uma IIFE.

Argumentos da IIFE

Agora que foi explicado como isso funciona, passemos para os argumento da IIFE:

(function (window) {
})(window);

Então, o que mais é possível fazer? Passar tudo o que for necessário! Por exemplo, passar o Objeto document:

(function (window, document) {
    // é possível usar "window" e "document" normalmente
})(window, document);

A resolução de variáveis ​​locais é mais rápida que a de variáveis ​​globais, mas esta está numa escala enorme e dificilmente alguém vai perceber o aumento da velocidade – mas vale a pena considerar se há muitas referências a globais!

E sobre o undefined?

Em ECMAScript 3, undefined é mutável. Isso significa que o valor poderia ser transferido com, por exemplo, undefined = true;…! Felizmente, no ECMAScript 5 em modo estrito ('use strict';) o parser lança um erro quando se depara com isso. Antes disso, começou-se a proteger uma IIFE da maneira já vista:

(function (window, document) {
    // é possível usar "window" e "document" normalmente
})(window, document);

(function (window, document, undefined) {
})(window, document);

undefined = true;
(function (window, document, undefined) {
    // "undefined" é uma variável local undefined
})(window, document);

Minificando

Ao minificar as variáveis ​​locais é que a grandiosidade do padrão IIFE realmente pode ser vista. Nomes de variáveis ​​locais não são realmente necessários se estas foram passadas dessa maneira​​, então, é possível dar o nome que quiser para elas.

Por exemplo, mudar disso:

(function (window, document, undefined) {
    console.log(window); // Object window
})(window, document);

Pra isso:

(function (a, b, c) {
    console.log(a); // Object window
})(window, document);

Imagine todas as referências a bibliotecas e window e document minificadas. Claro que você não precisa parar por aí; é possível passar jQuery, também, ou qualquer outra coisa que esteja disponível dentro no escopo léxico:

(function ($, window, document, undefined) {
    // use $ para se referir à jQuery
    // $(document).addClass('test');
})(jQuery, window, document);
 
(function (a, b, c, d) {
    // Se torna
    // a(c).addClass('test');
})(jQuery, window, document);

Isso também significa que você não precisa chamar jQuery.noConflict(); ou qualquer coisa como $ é atribuído localmente ao módulo. Aprender como escopos e variáveis ​​globais/locais funcionam ajuda ainda mais.

Passar o código por um bom minificador certamente garantirá a renomeação de undefined para c (por exemplo, e apenas se for usado). É importante atentar para o fato de que o nome undefined é irrelevante; só é preciso saber que o Objeto referenciado é indefinido (undefined) e, como undefined não tem qualquer significado especial – undefined é o valor que o JavaScript dá às coisas que são declaradas mas não têm nenhum valor (nem em IIFE).

Ambientes globais não-navegador

Devido a algumas tecnologias, Node.js, o navegador não é sempre o Objeto global, o que pode ser realmente problemático se você está tentando criar uma IIFE para funcionar em múltiplos ambientes. Por esta razão, há determinadas “alternativas”, como isso:

(function (root) {
})(this);

Em um navegador, o ambiente global this se refere ao Objeto window, de modo que não é preciso passar em window, é sempre possível reduzir para this.

Alguns preferem o nome root, já que ele pode se referir tanto a ambientes não-navegador, quanto à raiz do browser.

Se você estiver interessado em uma solução universal (muito útil para ser usada para a criação de módulos em projetos de código aberto) é o UMD (Universal Module Definition):

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(factory);
    } else if (typeof exports === 'object') {
        module.exports = factory;
    } else {
        root.MYMODULE = factory();
    }
})(this, function () {
    // 
});

A função está sendo invocado com outra função sendo passada para ela. É possível, então, atribuí-la ao ambiente relevante “de dentro”. No navegador, root.MYMODULE = factory(); é o módulo IIFE; em qualquer outro ambiente (como Node.js), será usado module.exports ou requireJS se define === 'function' && define.amd resolver como true.

Conclusão

Como foi visto, usar IIFE (Expressão de Função Imediatamente Invocada ou Immediately-Invoked Function Expression) é extramente benéfico. Além de ajudar na performance, por permitir que não seja preciso lookups no código a procura de variáveis globais, permite que seu código possa ficar “isolado”, protegendo o escopo de uma porção de código ou módulo do ambiente em que foi colocado.

O fato de diversos frameworks e bibliotecas JavaScript de renome como jQuery, Backbone.js, Modernizr e outros usarem IIFE já é bastante significativo. Use código de qualidade para fazer código de qualidade.

Primeiro vamos ver o comando Date() e suas propriedades, nativo do JavaScript, este comando pode ser utilizado das seguintes formas:

// Tipos para inicializar data em JavaScript
// new Date(); Data Corrente
// new Date(milissegundos); 
// new Date(string_de_data);
// new Date(ano, mes, dia);
// new Date(ano, mes, dia, hora, minuto, segundo, milissegundo);

var Hoje = new Date(); // Fri Sep 26 2014 14:06:47 GMT-0300 (Hora oficial do Brasil)
Hoje.getDate(); // 26
Hoje.getDay(); // 4 - Retorna o dia da semana, começando com 0 na segunda
Hoje.getFullYear(); // 2014
Hoje.getHours(); // 14
Hoje.getMilliseconds(); // 757 - De acordo com os milisegundos que a variável foi criada
Hoje.getMinutes(); // 6
Hoje.getMonth(); // 8 - Começa do 0, logo janeiro é 0, fevereiro é 1
Hoje.getSeconds(); // 47
Hoje.getTime(); // 1411751207757
Hoje.getTimezoneOffset(); // 180 - Menos 3 horas conforme horário GMT
data.getUTCDate(); // 26
// Neste caso, ele retorna a hora do UTC - Tempo Universal Coordenado
// Em inglês Coordinated Universal Time (UTC)
// Um teste rápido para mostrar a diferença
var Data2 = new Date("2014/09/26-23:59");
console.log( Data2 ); // Fri Sep 26 2014 23:59:00 GMT-0300 (Hora oficial do Brasil)
Data2.getUTCDate(); // 27 **Dia** UTC
data2.getUTCHours(); // 2 **hora** UTC
Data2.getDate(); // 26 Horário LOCAL de acordo com o GMT-300 
Data2.getHours(); // 23 Horário LOCAL de acordo com o GMT-300

Hoje.toDateString(); // "Fri Sep 26 2014"
Hoje.toGMTString(); // "Fri, 26 Sep 2014 17:06:47 GMT"
Hoje.toISOString(); // "2014-09-26T17:06:47.757Z"
Hoje.toJSON(); // "2014-09-26T17:06:47.757Z"
Hoje.toLocaleDateString(); // "26/9/2014"
Hoje.toLocaleString(); // "26/9/2014 14:06:47"
Hoje.toLocaleTimeString(); // "14:06:47"
Hoje.toString(); // "Fri Sep 26 2014 14:06:47 GMT-0300 (Hora oficial do Brasil)"
Hoje.toTimeString(); // "14:06:47 GMT-0300 (Hora oficial do Brasil)"
Hoje.toUTCString(); // "Fri, 26 Sep 2014 17:06:47 GMT"

// O objeto Date permite também setar novos valores, para isto, utilize o SET em vez de GET, exemplo
Hoje.getMonth(); // 8 - Setembro, lembrando que começa janeiro com 0
Hoje.setMonth(11); // Seta o mês como Dezembro
Hoje.getMonth(); // 11 - Dezembro

Agora que vimos os diversos tipos de saídas, queremos mostrar o plugin momentjs.

Link: http://momentjs.com/
Documentação em: http://momentjs.com/docs/

Por padrão, quando é utilizado o pacote com multi idiomas, o script tentará detectar qual é o idioma padrão do Browser, verificando em window.navigator.language. Se encontrar, já estará traduzido, do contrário será necessário executar a configuração via o comando abaixo:

moment.locale('pt-BR');

Definindo uma data com o Moment.

// Inicializando uma data e mostrando em String a saída
moment('30-09-2014','DD-MM-YYYY'); // Estamos definindo o dia como 30 de setembro de 2014, você pode alterar o formato e passar a data como desejar
moment().format(); // "2014-09-30T11:01:00-03:00"

// Formatando a saída de Datas
moment().format('MMMM Do YYYY, h:mm:ss a'); // setembro 26º 2014, 1:57:45 pm
moment().format('dddd'); // sexta-feira
moment().format("MMM Do YY"); // set 26º 14
moment().format('YYYY [escaped] YYYY'); // 2014 escaped 2014
moment().format(); // 2014-09-26T13:58:14-03:00

// Data Relativa
moment("20111031", "YYYYMMDD").fromNow(); // 3 anos atrás
moment("20120620", "YYYYMMDD").fromNow(); // 2 anos atrás
moment().startOf('day').fromNow(); // 14 horas atrás
moment().endOf('day').fromNow(); // em 10 horas
moment().startOf('hour').fromNow(); // uma hora atrás

// Calendário
moment().subtract(10, 'days').calendar(); // 16/09/2014 - Remove 10 dias
moment().subtract(6, 'days').calendar(); // Último sábado às 13:58 - Remove 6 dias
moment().subtract(3, 'days').calendar(); // Última terça-feira às 13:58 - Remove 3 dias
moment().subtract(1, 'days').calendar(); // Ontem às 13:58 - Remove 1 dia
moment().calendar(); // Hoje às 13:58
moment().add(1, 'days').calendar(); // Amanhã às 13:58 - Adiciona 1 da
moment().add(3, 'days').calendar(); // segunda-feira às 13:58 - Adiciona 3 dias
moment().add(10, 'days').calendar(); // 06/10/2014 - Adiciona 10 dias

// Múltiplos formatos de Data
moment().format('L'); // 26/09/2014
moment().format('l'); // 26/9/2014
moment().format('LL'); // 26 de setembro de 2014
moment().format('ll'); // 26 de set de 2014
moment().format('LLL'); // 26 de setembro de 2014 às 14:01
moment().format('lll'); // 26 de set de 2014 às 14:01
moment().format('LLLL'); // sexta-feira, 26 de setembro de 2014 às 14:01
moment().format('llll'); // sex, 26 de set de 2014 às 14:01

Agora, vamos mostrar o plugin DATE RANGE, é um plugin adicional ao moment para calcular diferença entre duas datas.
Download e documentação em : https://github.com/gf3/moment-range

var inicio = new Date(2014, 0, 1);
var fim = new Date();
var range = moment().range(inicio , fim);

range.diff('years'); // 0 - diferença entre anos
range.diff('months'); // 8 - diferença entre meses
range.diff('days'); // 273
range.diff(); // 23629091609 - diferença em milisegundos

/* Aceita os seguintes parâmetros o comando diff 
years
months
weeks
days
hours
minutes
seconds
milliseconds
*/

Outro plugin útil é o Precise Range. Este traz de forma explicita a diferença entre duas datas.
Download e documentação em : http://codebox.org.uk/pages/moment-date-range-plugin

Para traduzir a formatação de texto de saída, basta editar o arquivo readable-range.js na variável STRINGS.
Original:

var STRINGS = {
nodiff: '',
year: 'year',
years: 'years',
month: 'month',
months: 'months',
day: 'day',
days: 'days',
hour: 'hour',
hours: 'hours',
minute: 'minute',
minutes: 'minutes',
second: 'second',
seconds: 'seconds',
delimiter: ' '
};

Traduzido:

var STRINGS = {
nodiff: '',
year: 'ano',
years: 'anos',
month: 'mês',
months: 'meses',
day: 'dia',
days: 'dias',
hour: 'hora',
hours: 'horas',
minute: 'minuto',
minutes: 'minutos',
second: 'segundo',
seconds: 'segundos',
delimiter: ' '
};

// Datas Precisas:
moment("2014-01-01 12:00:00").preciseDiff("2014-09-30 10:44:00"); // 8 months 28 days 22 hours 44 minutes
moment.preciseDiff("2014-01-01 12:00:00", "2014-09-30 10:44:00"); // 8 months 28 days 22 hours 44 minutes

// Depois de traduzido:
moment("2014-01-01 12:00:00").preciseDiff("2014-09-30 10:44:00"); // 8 meses 28 dias 22 horas 44 minutos
moment.preciseDiff("2014-01-01 12:00:00", "2014-09-30 10:44:00"); // 8 meses 28 dias 22 horas 44 minutos

// Calculando o tempo de vida:
var data_de_nascimento = '1987-10-14';
moment(data_de_nascimento + " 00:00:00").preciseDiff( new Date() ); // "26 anos 11 meses 16 dias 10 horas 52 minutos 27 segundos"

//ou somente com o moment
var data_de_nascimento = moment('14-10-1987','DD-MM-YYYY');
moment(data_de_nascimento).preciseDiff( new Date() ); // "26 anos 11 meses 16 dias 10 horas 52 minutos 27 segundos"

Plugin Strftime ajuda na formatação de saída das datas,  Download e documentação em: https://github.com/benjaminoakes/moment-strftime

moment().strftime("%m/%d/%y %I:%M %p %Z"); // 09/30/14 01:24 PM
moment().strftime("%d/%m/%y %H:%M"); // "30/09/14 13:24

Este é o primeiro post de dois sobre como trabalhar com datas, o segundo será em PHP. Acompanhe-nos no Facebook e Google Plus para receber todas novidades.

Namespacing em JavaScript pode ser considerado algo um pouco nebuloso no começo, mas a organização (e, de certa forma, proteção) de seu código é algo essencial, que deve ser encarado com muita seriedade e feito com bastante atenção. JavaScript não possui uma construção formal de namespace, então é preciso saber como “simular” namespaces para que se possa desfrutar das vantagens que eles oferecem.

Variáveis ​​globais devem ser reservadas a objetos que têm relevância para todo o sistema e estas devem ser nomeadas para evitar ambiguidades e minimizar o risco de colisões de nomes. Na prática, isso significa que você deve evitar a criação de objetos globais a menos que eles sejam absolutamente necessários. Mas você já sabia disso, certo?!

Você deve evitar a criação de objetos globais a menos que eles sejam absolutamente necessários.

Então, o que você faz sobre isso? A “sabedoria popular” mostra que a melhor estratégia de redução de risco é criar um pequeno número de objetos globais que servirão como namespaces de facto para módulos subjacentes e subsistemas. A seguir, várias abordagens para namespacing em JavaScript interessantes, que você pode usar em seus projetos imediatamente.

Namespacing Estático (Static Namespacing)

O termo “namespacing estático” está sendo usado como um termo genérico para soluções em que a denominação “namespace” consta numa codificação, propriamente dita. É verdade, você pode reatribuir de um namespace para outro, mas o novo namespace vai referenciar os mesmos objetos como se fossem os antigos.

Atribuição Direta (Direct Assignment)

Essa é a abordagem mais básica. Exige mais código, mas é segura e inequívoca.

var myApp = {}
 
myApp.id = 0;
 
myApp.next = function() {
    return myApp.id++;  
}
 
myApp.reset = function() {
    myApp.id = 0;   
}
 
window.console && console.log(
    myApp.next(),
    myApp.next(),
    myApp.reset(),
    myApp.next()
); // 0, 1, undefined, 0

Você poderia tornar a manutenção futura um pouco mais fácil usando this para fazer referência a propriedades irmãs, mas isso é um pouco arriscado, já que não há nada que impeça suas funções no namespace de serem reatribuídas:

var myApp = {}
 
myApp.id = 0;
 
myApp.next = function() {
    return this.id++;   
}
 
myApp.reset = function() {
    this.id = 0;    
}
 
myApp.next(); // 0
myApp.next(); // 1
var getNextId = myApp.next;
getNextId(); // NaN whoops!

Notação de Objeto Literal (Object Literal Notation)

Nesta abordagem, é preciso fazer referência ao nome de namespace apenas uma vez, então, caso seja preciso alterar o nome mais tarde, isso é um pouco mais fácil de se conseguir (supondo que você não tenha referenciado o namespace muitas vezes). Há, ainda, o perigo de que o valor de this possa ser uma surpresa – mas é um pouco mais seguro assumir que os objetos definidos dentro de uma construção de objeto literal não serão reatribuídos.

var myApp = {
    id: 0,
 
    next: function() {
        return this.id++;   
    },
 
    reset: function() {
        this.id = 0;    
    }
}
 
window.console && console.log(
    myApp.next(),
    myApp.next(),
    myApp.reset(),
    myApp.next()
) // 0, 1, undefined, 0

Padrão de Módulo (Module Pattern)

Hoje em dia é bastante comum encontrar por aí o Padrão de Módulo (Module Pattern) em código JavaScript. A lógica é protegida do escopo global por uma função wrapper (geralmente numa IIFE) que retorna um objeto que representa a interface pública do módulo. Por imediatamente invocar a função e atribuir o resultado a uma variável de namespace, a API do módulo é “trancada” nesse namespace.

Além disso, todas as variáveis ​​não incluídas no valor de retorno permanecerão privadas, visíveis apenas para as funções públicas que lhes referenciam.

var myApp = (function() {
 
    var id = 0;
 
    return {
        next: function() {
            return id++;    
        },
 
        reset: function() {
            id = 0;     
        }
    };  
})();   
 
window.console && console.log(
    myApp.next(),
    myApp.next(),
    myApp.reset(),
    myApp.next()
) // 0, 1, undefined, 0

Namespacing Dinâmico (Dynamic Namespacing)

Esta seção também poderia muito bem ser chamada de “injeção de namespace” (ou namespace injection). O namespace é representado por um proxy que é referenciado diretamente dentro do wrapper da função – o que significa que não é mais preciso agrupar valores para o return no namespace. Isso faz com que a definição de namespace seja mais flexível e torna muito fácil ter várias instâncias independentes de um módulo existente em namespaces separados (ou até mesmo no contexto global).

Passando argumento de namespace

Aqui o namespace é simplesmente passado como um argumento de uma Expressão de Função Imediatamente Invocada. A variável id é privada porque não é atribuída ao contexto.

var myApp = {};
(function(context) { 
    var id = 0;
 
    context.next = function() {
        return id++;    
    };
 
    context.reset = function() {
        id = 0;     
    }
})(myApp);  
 
window.console && console.log(
    myApp.next(),
    myApp.next(),
    myApp.reset(),
    myApp.next()
) // 0, 1, undefined, 0

É possível até mesmo definir o contexto para o objeto global – com a mudança de uma palavra! Este é um grande trunfo para os fornecedores da bibliotecas (vendors), que podem envolver suas features numa IIFE e permitir que o programador decida se elas devem ser globais ou não (John Resig foi um dos primeiros a adotar esse conceito quando escreveu a jQuery).

var myApp = {};
(function(context) { 
    var id = 0;
 
    context.next = function() {
        return id++;    
    };
 
    context.reset = function() {
        id = 0;     
    }
})(this);   
 
window.console && console.log(
    next(),
    next(),
    reset(),
    next()
) // 0, 1, undefined, 0

this como proxy de namespace

O artigo “My Favorite JavaScript Design Pattern” aparentemente foi mal compreendido por muitos que pensaram que ele poderia simplesmente recorrer ao Module Pattern. O artigo mostra várias técnicas (o que provavelmente contribuiu para essa confusão), mas, em essência, é muito interessante e dá ensejo ao desenvolvimento de muita coisa boa relacionada a namespacing.

A beleza do padrão é que ele simplesmente usa a linguagem como foi projetada – nada mais, nada menos, sem truques, sem firulas. Além disso, já que o namespace é injetado através da palavra-chave this (que é estática dentro de um determinado contexto de execução), ele não pode ser acidentalmente modificado.

var myApp = {};
(function() {
    var id = 0;
 
    this.next = function() {
        return id++;    
    };
 
    this.reset = function() {
        id = 0;     
    }
}).apply(myApp);    
 
window.console && console.log(
    myApp.next(),
    myApp.next(),
    myApp.reset(),
    myApp.next()
); // 0, 1, undefined, 0

Ainda melhor, a API de apply (e call) provê separação natural entre contexto e argumentos; então, fica simples passar argumentos adicionais para o criador do módulo.

O exemplo a seguir demonstra isso e também mostra como executar o módulo de forma independente através de múltiplos namespaces:

var subsys1 = {}, subsys2 = {};
 
var nextIdMod = function(startId) {
    var id = startId || 0;
 
    this.next = function() {
        return id++;    
    };
 
    this.reset = function() {
        id = 0;     
    }
};
 
nextIdMod.call(subsys1);    
nextIdMod.call(subsys2,1000);   
 
window.console && console.log(
    subsys1.next(),
    subsys1.next(),
    subsys2.next(),
    subsys1.reset(),
    subsys2.next(),
    subsys1.next()
) // 0, 1, 1000, undefined, 1001, 0

E, se for preciso um gerador global de id:

nextIdMod();    
 
window.console && console.log(
    next(),
    next(),
    reset(),
    next()
) // 0, 1, undefined, 0

Mas essa ferramenta de gerar de ids mostrada como exemplo não faz jus a todo o potencial desse padrão. Envolvendo uma biblioteca inteira e usando a palavra-chave this como um suporte para o namespace, é fácil executar a biblioteca em qualquer contexto que se queira (incluindo o contexto global).

// Código de biblioteca
var protoQueryMooJo = function() {  
    // [...]
}
 
// Seu código
var thirdParty = {};
protoQueryMooJo.apply(thirdParty);

Considerações finais sobre Namespacing em JavaScript

É uma prática comum tentar evitar namespaces aninhados. Eles são mais difíceis de seguir (para ambos, humanos e computadores) e vão encher seu código de confusão desnecessária. Como Peter Michaux aponta, namespaces aninhados podem ser um legado de desenvolvedores Java nostálgicos tentando recriar aquelas cadeias longas de pacotes que eles conheciam e amavam…

É possível “propagar” um único namespace através de diversos arquivos.js (embora apenas por injeção de namespace ou atribuição direta de cada variável), contudo, é preciso ter cuidado com as dependências. Além disso, “ligar” um namespace a um arquivo pode ajudar o leitor a navegar mais facilmente pelo código.

Uma vez que JavaScript não possui uma construção formal de namespace, isso abre margem para vários tipos de soluções criativas para resolver a questão. Este artigo mostrou apenas algumas delas e, evidentemente, as melhores podem não terem sido abordadas, dada a vasta contribuição da comunidade a cada dia.

De qualquer forma, estas são algumas das mais conhecidas técnicas para namespacing em JavaScript e, garantimos, estudando um pouco além e sabendo aplicar corretamente em seus projetos, certamente você terá um incremento de qualidade de código considerável!