Com o Angular 16 muitos desenvolvedores estão animados com as novas funcionalidades e melhorias que vieram com essa nova versão.
Neste artigo, vamos explorar as principais novidades do Angular 16 e o que elas significam para o desenvolvimento de aplicações web modernas.

### Signals

Um dos recursos mais aguardados do Angular 16 é a introdução dos Signals.
Os Signals são uma nova forma de gerenciamento de estados em aplicações Angular, inspirados no Solid.js.
Os Signals também podem depender de outros Signals, criando um grafo de valores reativos que é atualizado automaticamente sempre que houver mudanças nas dependências.
Os Signals podem ser usados com os observables do RxJS, que ainda são suportados no Angular 16, para criar fluxos de dados poderosos e declarativos.

#### O que são signals?

Um signal é uma abstração em torno de um valor que pode notificar consumidores interessados quando esse valor muda.
Signals podem conter qualquer valor, desde tipos primitivos simples até estruturas de dados complexas.
O valor de um signal é sempre lido por meio de uma função getter, o que permite que o Angular rastreie onde o signal é usado.
Signals podem ser graváveis ou somente leitura.

#### Signals graváveis
Signals graváveis fornecem uma API para atualizar seus valores diretamente.
Você cria signals graváveis chamando a função signal com o valor inicial do signal:

```ts
const count = signal(0);

// Signals são funções getter - chamá-las lê seu valor.
console.log('A contagem é: ' + count());
```

Para alterar o valor de um signal gravável, você pode atribuir diretamente o novo valor usando o método .set():

```ts
count.set(3);
```

ou usar a operação .update() para calcular um novo valor com base no valor anterior:

```ts
// Incrementa a contagem em 1.
count.update(valor => valor + 1);
```

Ao trabalhar com signals que contêm objetos, às vezes é útil mutar o objeto diretamente. Por exemplo, se o objeto for um array, você pode querer adicionar um novo valor sem substituir completamente o array. Para fazer uma mudança interna como essa, use o método .mutate:

```ts
const todos = signal([{title: 'Aprender signals', done: false}]);

todos.mutate(valor => {
  // Muda o primeiro TODO do array para 'done: true' sem substituí-lo.
  valor[0].done = true;
});
```

Signals graváveis têm o tipo WritableSignal.

#### Signals computados
Um signal computado deriva seu valor de outros signals. Defina um signal computado usando a função computed e especificando uma função de derivação:

```ts
const count: WritableSignal<number> = signal(0);
const doubleCount: Signal<number> = computed(() => count() * 2);
```

O signal doubleCount depende de count. Sempre que count é atualizado, o Angular sabe que qualquer coisa que dependa de count ou doubleCount também precisa ser atualizada.

Os signals computados são tanto avaliados preguiçosamente (lazily evaluated) quanto memorizados (memoized). A função de derivação de doubleCount não é executada para calcular seu valor até a primeira vez que doubleCount é lido. Uma vez calculado, esse valor é armazenado em cache, e leituras futuras de doubleCount retornarão o valor em cache sem recalcular.

Quando count muda, ele informa doubleCount que seu valor em cache não é mais válido, e o valor só é recalculado na próxima leitura de doubleCount.

Como resultado, é seguro realizar derivações computacionalmente caras em signals computados, como filtrar arrays.

Os signals computados não são signals graváveis
Você não pode atribuir valores diretamente a um signal computado. Ou seja, a seguinte operação produzirá um erro de compilação, porque doubleCount não é um WritableSignal:

```ts
doubleCount.set(3);
```

Em resumo, os signals são uma maneira poderosa e flexível de lidar com valores reativos em aplicações Angular.
Eles oferecem uma forma mais clara e simples de modelar dependências e fluxos de dados,
além de proporcionar melhor desempenho e interoperabilidade com outras bibliotecas, como o RxJS.
Com os signals, é possível criar sistemas reativos mais eficientes e elegantes, sem comprometer a simplicidade e a legibilidade do código.


### Required Inputs
Outra funcionalidade interessante do Angular 16 é a capacidade de marcar algumas entradas de componentes como obrigatórias,
o que significa que o componente pai deve fornecê-las, ou então um erro será lançado.
Isso ajudará a capturar erros e erros de digitação em tempo de compilação e garantir que os componentes recebam todos os dados necessários para funcionar corretamente.
As entradas obrigatórias também tornarão os componentes mais auto-documentáveis e fáceis de usar.

```ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-title',
  template: `
    <div>
      <h1>{{ title }}</h1>
      <ng-content></ng-content>
    </div>
  `
})
export class App {
  @Input({ required: true }) title: string = '';

  constructor() { }
}

```


### Passando dados do roteador como entradas de componentes
A nova versão do Angular, a v16, traz uma funcionalidade muito aguardada pelos desenvolvedores: a capacidade de passar parâmetros de rota diretamente para os inputs dos componentes correspondentes.
Isso significa que agora é possível acessar dados de resolvers, propriedades de dados, parâmetros de caminho e parâmetros de consulta diretamente nos inputs do componente de roteamento correspondente.
Essa é uma melhoria significativa na experiência do desenvolvedor, que agora pode acessar esses dados de maneira mais direta e conveniente.

```ts
const routes = [
  {
    path: 'about',
    loadComponent: import('./about'),
    resolve: { contact: () => getContact() }
  }
];

@Component(...)
export class About {
  // The value of "contact" is passed to the contact input
  @Input() contact?: string;
}
```

### Tags Auto fechadas
Uma funcionalidade recentemente implementada no Angular 16 é a possibilidade de usar tags auto-fecháveis para componentes em templates.
Essa é uma pequena melhoria na experiência de desenvolvimento que pode economizar tempo de digitação.
Em vez de escrever a tag de fechamento do componente, agora é possível fechar a tag usando uma barra (/) no final.
Essa é uma atualização simples, mas útil, que pode tornar o desenvolvimento Angular um pouco mais conveniente.

```html

<super-duper-long-component-name [prop]="someVar"></super-duper-long-component-name>


<super-duper-long-component-name [prop]="someVar"/>
```
### DestroyRef provider

Os hooks de ciclo de vida do Angular fornecem muita flexibilidade para conectar diferentes momentos da execução do seu aplicativo.
Nos últimos anos, uma oportunidade de melhoria tem sido permitir maior flexibilidade, por exemplo, fornecendo acesso a OnDestroy como um observável.
Na versão 16, o OnDestroy tornou-se injetável, o que permite a flexibilidade que os desenvolvedores estão pedindo.

Essa nova funcionalidade permite que você injete **DestroyRef** correspondente a um componente, diretiva, serviço ou pipe e registre o gancho de ciclo de vida onDestroy.
O DestroyRef pode ser injetado em qualquer lugar dentro de um contexto de injeção, incluindo fora do seu componente - nesse caso, o gancho onDestroy é executado quando o injetor correspondente é destruído.
Com isso, é possível criar uma lógica reutilizável que executa tarefas de limpeza necessárias em diferentes partes do aplicativo.

O novo provider chamado DestroyRef, que permite registrar callbacks de destruição para um ciclo de vida específico.
Essa novidade traz inúmeras vantagens, como a possibilidade de criar lógicas reutilizáveis para executar tarefas de
limpeza necessárias, além de facilitar a desinscrição de observables.
Com novo provider, é possível criar uma lógica que depende do **DestroyRef**, enquanto o novo operador **takeUntilDestroyed** permite concluir um stream quando
o contexto de um componente, diretiva ou pipe é destruído. Isso torna a programação Angular ainda mais eficiente e intuitiva,
proporcionando aos desenvolvedores uma maneira mais fácil e organizada de gerenciar os ciclos de vida de seus componentes.

```ts
import { Component, OnInit, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component(...)
export class App implements OnInit {

  public destroyRef = inject(DestroyRef);

 public ngOnInit() {
    this.getTodoList().pipe(
      takeUntilDestroyed(this.destroyRef),
    ).subscribe();
  }
}
```

### Re-hidratação não destrutiva

O Angular 16 traz uma novidade muito esperada pelos desenvolvedores: melhorias na renderização do lado do servidor (SSR) e na hidratação de aplicações.
Essa nova hidratação não destrutiva de aplicativos completos evita que o Angular renderize a aplicação do zero.
Em vez disso, o framework procura nós DOM existentes enquanto constrói estruturas de dados internas e anexa ouvintes de eventos a esses nós.
Entre os benefícios dessa nova funcionalidade estão:

* A eliminação da "flickering" de conteúdo na página para os usuários finais,
* Melhores Web Core Vitals em cenários específicos
* Uma arquitetura à prova de futuro que permite o carregamento de código granular com primitivas que serão lançadas ainda este ano,
* Integração fácil com aplicativos existentes em poucas linhas de código e
* Adoção incremental da hidratação com o atributo ngSkipHydration em modelos para componentes que realizam manipulação manual do DOM.

Em testes iniciais, foi observado uma melhoria de até 45% no Largest Contentful Paint com a hidratação completa do aplicativo!

### Conclusão

Em conclusão, a versão 16 do Angular trouxe diversas novidades e
melhorias que vão facilitar a vida dos desenvolvedores e aumentar a performance e eficiência das aplicações criadas com o framework.
Todas essas mudanças tornam o Angular 16 uma atualização bastante aguardada pelos desenvolvedores.
Além dessas novidades, o Angular 16 também trouxe outras melhorias como:

* Servidor de desenvolvimento baseado em esbuild/vite (para ng serve)
* criação de novos projetos standalone a partir do CLI.
* novo comando de esquemas de migração para atualizar componentes para a nova API de componentes autônomos
* suporte experimental ao Jest para testes unitários
* tokens de design na biblioteca Angular Material
* O serviço de linguagem agora permite a importação automática de componentes e pipes em templates.
* Suporte ao TypeScript 5.0

No geral, o Angular 16 promete ser uma ótima versão com muitos recursos novos e melhorias que tornam cada vez melhor.
Se você ainda não experimentou essa nova versão, vale a pena conferir e explorar todas as suas novas funcionalidades e melhorias.

Descubra as novidades do Angular 16, como o recurso de sinais, a melhoria no modelo de reatividade, a marcação de entradas obrigatórias em componentes, entre outros recursos e melhorias.

Bon Appétit - Katy Perry ft Migos


Nos últimos anos, o NestJS tem se destacado como um dos principais frameworks para o desenvolvimento de backend em Node.js. Com sua arquitetura modular e escalável, bem como sua poderosa CLI e suporte nativo para testes, o NestJS tem atraído a atenção de muitos desenvolvedores Node.js.

Mas o que faz o NestJS se destacar entre os outros frameworks de Node.js? Para começar, ele é baseado no Angular, um dos frameworks mais populares para desenvolvimento front-end. Isso significa que os desenvolvedores que já conhecem o Angular terão uma curva de aprendizagem menor ao trabalhar com o NestJS.

Além disso, o NestJS é altamente modular e escalável, o que o torna uma excelente escolha para projetos de diferentes tamanhos e complexidades. Ele é baseado no conceito de módulos e componentes, o que permite que os desenvolvedores construam aplicativos de forma modular, adicionando ou removendo funcionalidades com facilidade.

Outra vantagem do NestJS é sua poderosa CLI, que ajuda os desenvolvedores a automatizar tarefas repetitivas e criar rapidamente aplicativos de backend. Isso significa que os desenvolvedores podem se concentrar em escrever código de alta qualidade em vez de gastar tempo em configuração e gerenciamento de projeto.

### Vantagens do NestJS

1. Produtividade: o NestJS tem uma CLI poderosa que ajuda a criar aplicativos rapidamente e de forma organizada.

1. Modularidade: o NestJS é altamente modular, o que significa que você pode personalizar a estrutura do seu jeito e reutilizar partes do código em diferentes partes do aplicativo.

1. Facilidade de testes: o NestJS é fácil de testar e tem suporte nativo para testes unitários e de integração.

1. Escalabilidade: o NestJS é projetado para escalar e tem suporte para balanceamento de carga e clusters.

1. Documentação: a documentação do NestJS é muito boa e ajuda bastante a aprender e usar o framework.

### Arquitetura do NestJS

O NestJS é baseado no padrão MVC (Model-View-Controller) e fornece uma estrutura sólida e modular para construir aplicativos. Ele usa os conceitos de injeção de dependência e controle inverso para fornecer uma arquitetura flexível e escalável.

O NestJS é composto por cinco componentes principais:

1. Controladores: que recebem as solicitações HTTP e retornam as respostas.

1. Serviços: que contêm a lógica de negócios do aplicativo e podem ser usados em diferentes partes do aplicativo.

1. Módulos: que agrupam controladores, serviços e outros componentes.

1. Filtros: que permitem interceptar solicitações e respostas HTTP para fazer validações.

1. Pipes: que transformam os dados de entrada antes que sejam processados pelo controlador ou serviço.

No entanto, como acontece com qualquer framework ou tecnologia, o NestJS tem suas desvantagens. Uma das principais críticas ao NestJS é que ele é baseado em alguns conceitos avançados, como injeção de dependência e controle inverso, que podem levar algum tempo para serem dominados.

Apesar dessas desvantagens, acredito que o NestJS é uma excelente escolha para projetos de backend em Node.js. Sua arquitetura modular e escalável, juntamente com sua CLI poderosa e suporte nativo para testes, tornam o desenvolvimento de aplicativos mais fácil e rápido.

O NestJS é um framework muito legal para fazer backend Node.js. Ele é fácil de aprender e usar, tem uma arquitetura flexível e escalável e é ótimo para aumentar a produtividade do desenvolvedor. Se você está procurando um framework para trabalhar com Node.js, vale a pena dar uma conferida no NestJS.


Descubra os benefícios e a arquitetura do NestJS, um framework baseado no Angular para tornar a construção de aplicativos escaláveis e modulares mais fácil e rápida

Are You Bored Yet? (feat. Clairo) - Wallows

Introdução ao NestJS: Como acelerar o desenvolvimento de backend Node.js

Angular 16: Novos recursos para melhorar a experiência do desenvolvedor

## Lógica de paginação do Google

A lógica na paginação do Google é a seguinte:

Há 10 links de página mostrados a qualquer momento (por exemplo, 1 2 3 4 5 6 7 8 9 10) a menos que haja menos de 10 páginas totais
o link ativo (página atual) está na 6ª posição, exceto quando o link ativo da página está abaixo de 6 ou a menos de 4 da última posição

Aqui está o que parece para cada página se houver 15 páginas totais:

<AngularPagination />

## Executando o Exemplo Angular 2 Localmente

Foi usado o projeto angular 2 quickstart como uma base para o aplicativo, ele é escrito em TypeScript e usa systemjs para carregar módulos. Também é possivel usar o angular-cli para o aplicativo importando os componetes e services. Se você é novo no angular 2, eu recomendaria verificar o curos de angular 2 da [Loiane Groner](https://www.youtube.com/playlist?list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G), pois ela ensina em detalhes sobre como criar projetos com angular-cli.

1. Instale NodeJS e NPM de [nodejs.org](https://nodejs.org/en/download/), você pode verificar as versões que você instalou executando `node -v` e `npm -v` da linha de comando.

1. Faça o download do código-fonte do projeto em [github.com/cornflourblue/angular2-pagination-example](https://github.com/cornflourblue/angular2-pagination-example)

1. Instale todos os pacotes necessários com `npm install` npm é executando a partir da linha de comando na pasta raiz do projeto (onde o package.json está localizado).

1. Inicie o aplicativo executando `npm start` a partir da linha de comando na pasta raiz do projeto.

## Pager Service - Lógica de paginação em TypeScript como a do Google

Para facilitar a reutilização da lógica de paginação em diferentes componentes ou módulos Angular 2, colocamos a lógica de paginação em um serviço angular 2.

```typescript
import * as _ from 'underscore';

export class PagerService {
  getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
    // calculando o total de paginas
    let totalPages = Math.ceil(totalItems / pageSize);

    let startPage: number, endPage: number;
    if (totalPages <= 10) {
      // Se tiver menos de 10 páginas totais para mostrar tudo
      startPage = 1;
      endPage = totalPages;
    } else {
      // Se tiver mais de 10 páginas totais, calcular as páginas inicial e final
      if (currentPage <= 6) {
        startPage = 1;
        endPage = 10;
      } else if (currentPage + 4 >= totalPages) {
        startPage = totalPages - 9;
        endPage = totalPages;
      } else {
        startPage = currentPage - 5;
        endPage = currentPage + 4;
      }
    }

    // Cálculo de índices de itens iniciais e finais
    let startIndex = (currentPage - 1) * pageSize;
    let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

    // Criar um array de páginas para o ng-repeat no componente
    let pages = _.range(startPage, endPage + 1);

    // Retornar objeto com todas as propriedades exigidas para exibição
    return {
      totalItems: totalItems,
      currentPage: currentPage,
      pageSize: pageSize,
      totalPages: totalPages,
      startPage: startPage,
      endPage: endPage,
      startIndex: startIndex,
      endIndex: endIndex,
      pages: pages,
    };
  }
}
```

## AppComponent que usa o serviço Pager

Um exemplo de componente angular 2 que usa o Pager Service acima para paginar uma lista de itens fictícios que são extraídos de um arquivo json no servidor.

```typescript
import { Component, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import * as _ from 'underscore';

import { PagerService } from './_services/index';

@Component({
  moduleId: module.id,
  selector: 'app',
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
  constructor(private http: Http, private pagerService: PagerService) {}

  // array com todos os itens a serem paginados
  private allItems: any[];

  // pager object
  pager: any = {};

  // items paginados
  pagedItems: any[];

  ngOnInit() {
    // pega os arquivos
    this.http
      .get('./dummy-data.json')
      .map((response: Response) => response.json())
      .subscribe((data) => {
        //Definir os itens para a resposta json
        this.allItems = data;

        //Inicializar na página 1
        this.setPage(1);
      });
  }

  setPage(page: number) {
    if (page < 1 || page > this.pager.totalPages) {
      return;
    }

    // pega o objeto pager do serviço
    this.pager = this.pagerService.getPager(this.allItems.length, page);

    // pega a página atual de itens
    this.pagedItems = this.allItems.slice(
      this.pager.startIndex,
      this.pager.endIndex + 1
    );
  }
}
```

## HTML Template com itens paginados e navegação

Um exemplo de modelo angular 2 que mostra uma lista de itens paginados e os links de paginação para navegar entre páginas.

```html
<div>
  <div class="container">
    <div class="text-center">
      <h1>Angular 2 - Lógica de Paginação</h1>

      
      <div *ngFor="let item of pagedItems">{{item.name}}</div>

      
      <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
        <li [ngClass]="{disabled:pager.currentPage === 1}">
          <a (click)="setPage(1)">Início</a>
        </li>
        <li [ngClass]="{disabled:pager.currentPage === 1}">
          <a (click)="setPage(pager.currentPage - 1)">Anterior</a>
        </li>
        <li
          *ngFor="let page of pager.pages"
          [ngClass]="{active:pager.currentPage === page}"
        >
          <a (click)="setPage(page)">{{page}}</a>
        </li>
        <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
          <a (click)="setPage(pager.currentPage + 1)">Próximo</a>
        </li>
        <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
          <a (click)="setPage(pager.totalPages)">Último</a>
        </li>
      </ul>
    </div>
  </div>
</div>
```

O projeto está disponível no GitHub em [github.com/cornflourblue/angular2-pagination-example](https://github.com/cornflourblue/angular2-pagination-example)

---

## Referências

- Blog do Jason Watmore - [Angular 2 - Pagination Example with Logic like Google](http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google)
- Documentação do Angular 2 - [Angular docs](https://angular.io/docs/ts/latest/)

Este é um exemplo de como implementar uma paginação em Angular 2 com uma lógica como a do Google.

Strobe - deadmau5

Lógica de Paginação com Angular


Esses exemplos fornecem trechos de código testado para a exibição de vários
formatos de data em um site Jekyll. Eles também devem funcionar no GitHub Pages,
Shopify ou qualquer outra coisa que usa Liquid.

Jekyll (gerador de site estático) usa do Shopify o
[Liquid Template Engine](https://docs.shopify.com/themes/liquid-documentation/basics).
Para ver as datas é usando a tag `{{ page.date }}` fornecida pelo Liquid.
Com nenhuma outra alteração, as datas produzidas são algo como:

```
2015-12-17 09:00:00 -0300
```

Se houver projetos que usam esse formato, eles são poucos e não se relacionam.
A criação de uma data mais amigável é feita através da aplicação do filtro `date:` do Liquid.
Por exemplo, combinando a tag e o filtro:

```tsx
{{ page.date | date: '%B %d, %Y' }}
```

produz uma data mais amigável ao leitor:

```
December 17, 2015
```

Com isso fica muito melhor, mas dependendo da data, as questões de sutileza no design aparecem.
Por exemplo, durante os primeiros nove dias de cada mês "zeros à esquerda"
surgem (Ex: "August 03, 2013" em vez de "August 3, 2013").
Outros erros básicos com os filtros do Liquid incluem:

1. Adicionando uma data com os nomes dos meses abreviados temos que ajustar para lidar
   com Maio que em ingles fica May. Por exemplo, "Aug. 16, 2013" está abreviado.
   "May. 16, 2013" não esta.

2. Setembro é geralmente abreviado em ingle como "Sept" e não "Sep" como é o padrão do Liquid.

3. Para cumprir com o estilo americano os meses _April_, _May_, _June_ e _July_ não devem ser abreviados.
   Alterações semelhantes são necessárias para atender as orientações do Manual de Estilo de Chicago.

A maioria dos projetos acompanham os padrões disponíveis. Ou usando um formato que
não tem esses problemas ou, mais frequentemente, não se importam com esses detalhes.
Mesmo com essa situação as datas ainda ficam na home dos sites e como cada projeto
tem sua lista de tarefas de possíveis mudanças que se estendem até o horizonte as
datas não são itens de importância. Então é comum adiar encontrar uma solução, mas
não ter formatação de data adequada é sempre um incomodo. Enquanto essas soluções
resolverem a questão, esta postagem será como uma referência pública também.

Este conjunto de filtros para datas do Liquid resolve os problemas listados acima
e explora algumas outras opções de formatação. Cada um oferece uma solução para
um formato de exibição específico e é fornecido com quatro exemplos de saída
para as seguintes datas: 1) _3 de Maio de 2015_, 2) _4 de Julho 2015_, 3) _23 Setembro de 2015_ e 4) _26 de Novembro de 2015_. Estes exemplos demonstram como
os vários problemas de formatação são manipulados. Após os exemplos, alguns trechos
de código para elementos individuais são fornecidos. Com estas amostras, é fácil
conseguir praticamente qualquer formato de data desejado.

## Usando Filtros do Jekyll para Date

- **Data para String**

  ```tsx
  {{ page.date | date_to_string; }}
  ```

  Saída do Examplo 1: **03 May 2015** <br />
  Saída do Examplo 2: **04 Jul 2015** <br />
  Saída do Examplo 3: **23 Sep 2015** <br />
  Saída do Examplo 4: **26 Nov 2015** <br />

- **Data para String longa**

  ```tsx
  {{ page.date | date_to_long_string; }}
  ```

  Saída do Examplo 1: **03 May 2015** <br />
  Saída do Examplo 2: **04 July 2015** <br />
  Saída do Examplo 3: **23 September 2015** <br />
  Saída do Examplo 4: **26 November 2015** <br />

- **Data no padrão XML**

  ```tsx
  {{ page.date | date_to_xmlschema; }}
  ```

  Saída do Examplo 1: **2015-05-03T00:00:00-03:00** <br />
  Saída do Examplo 2: **2015-07-04T00:00:00-03:00** <br />
  Saída do Examplo 3: **2015-09-23T00:00:00-03:00** <br />
  Saída do Examplo 4: **2015-11-26T00:00:00-03:00** <br />

- **Data no padrão RFC-822**

  ```tsx
  {{ page.date | date_to_rfc822; }}
  ```

  Saída do Examplo 1: **Sun, 03 May 2015 00:00:00 -0300** <br />
  Saída do Examplo 2: **Sat, 04 Jul 2015 00:00:00 -0300** <br />
  Saída do Examplo 3: **Wed, 23 Sep 2015 00:00:00 -0300** <br />
  Saída do Examplo 4: **Thu, 26 Nov 2015 00:00:00 -0300** <br />

## Formatação de datas no Jekyll com Liquid

- **Data no formato ISO 8601**

  ```tsx
  {{ page.date | date: "%Y-%m-%d" }}
  ```

  Saída do Examplo 1: **2015-05-03** <br />
  Saída do Examplo 2: **2015-07-04** <br />
  Saída do Examplo 3: **2015-09-23** <br />
  Saída do Examplo 4: **2015-11-26** <br />

- **Data no formato Americano com ano de 4 digitos** (com zeros à esquerda)

  ```tsx
  {{ page.date | date: "%m/%d/%Y" }}
  ```

  Saída do Examplo 1: **05/03/2015** <br />
  Saída do Examplo 2: **07/04/2015** <br />
  Saída do Examplo 3: **09/23/2015** <br />
  Saída do Examplo 4: **11/26/2015** <br />

- **Data no formato Americano com ano de 4 digitos** (sem zeros à esquerda)

  ```tsx
  {{ page.date | date: "%-m/%-d/%Y" }}
  ```

  Saída do Examplo 1: **5/3/2015** <br />
  Saída do Examplo 2: **7/4/2015** <br />
  Saída do Examplo 3: **9/23/2015** <br />
  Saída do Examplo 4: **11/26/2015** <br />

- **Data no formato Americano com ano de 2 digitos** (sem zeros à esquerda)

  ```tsx
  {{ page.date | date: "%-m/%-d/%y" }}
  ```

  Saída do Examplo 1: **5/3/15** <br />
  Saída do Examplo 2: **7/4/15** <br />
  Saída do Examplo 3: **9/23/15** <br />
  Saída do Examplo 4: **11/26/15** <br />

- **Data no formato Americano com mês completo** (sem zeros à esquerda)

  ```tsx
  {{ page.date | date: "%-d %B %Y" }}
  ```

  Saída do Examplo 1: **3 May 2015** <br />
  Saída do Examplo 2: **4 July 2015** <br />
  Saída do Examplo 3: **23 September 2015** <br />
  Saída do Examplo 4: **26 November 2015** <br />

- **Data no formato Brasileiro com mês completo** (sem zeros à esquerda)

  ```tsx
  {% raw  %}
  {% assign m = page.date | date: "%-m" %}
  {{ page.date | date: "%-d de" }}
  {% case m %}
    {% when '1' %}Janeiro
    {% when '2' %}Fevereiro
    {% when '3' %}Março
    {% when '4' %}Abril
    {% when '5' %}Maio
    {% when '6' %}Junho
    {% when '7' %}Julho
    {% when '8' %}Agosto
    {% when '9' %}Setembro
    {% when '10' %}Outubro
    {% when '11' %}Novembro
    {% when '12' %}Dezembro
  {% endcase %}
  {{ page.date | date: " de %Y" }}
  {% endraw %}
  ```

  Saída do Examplo 1: **3 de Maio de 2015** <br />
  Saída do Examplo 2: **4 de Julho de 2015** <br />
  Saída do Examplo 3: **23 de Setembro de 2015** <br />
  Saída do Examplo 4: **26 de Novembro de 2015** <br />

- **Data no formato padrão Americano com mês completo** (sem zeros à esquerda)

  ```tsx
  {{ page.date | date: "%B %-d, %Y" }}
  ```

  Saída do Examplo 1: **May 3, 2015** <br />
  Saída do Examplo 2: **July 4, 2015** <br />
  Saída do Examplo 3: **September 23, 2015** <br />
  Saída do Examplo 4: **November 26, 2015** <br />

- **Data no formato Americano com mês completo e dias ordenados** (sem zeros à esquerda)

  ```tsx
  {% raw  %}
  {% assign d = page.date | date: "%-d"  %}
  {{ page.date | date: "%B" }}
  {% case d %}
    {% when '1' or '21' or '31' %}{{ d }}st
    {% when '2' or '22' %}{{ d }}nd
    {% when '3' or '23' %}{{ d }}rd
    {% else %}{{ d }}th
  {% endcase %},
  {{ page.date | date: "%Y" }}
  {% endraw %}
  ```

  Saída do Examplo 1: **May 3rd 2015** <br />
  Saída do Examplo 2: **July 4th 2015** <br />
  Saída do Examplo 3: **September 23rd 2015** <br />
  Saída do Examplo 4: **November 26th 2015** <br />

- **Data no formato Brasileiro com dia e mês completo** (sem zeros à esquerda)

  ```tsx
  {% raw  %}
  {% assign d = page.date | date: "%a" %}
  {% assign m = page.date | date: "%-m" %}
  {% case d %}
    {% when "Sun" %}Domingo
    {% when "Mon" %}Segunda feira
    {% when "Tue" %}Terça feira
    {% when "Wed" %}Quarta feira
    {% when "Thu" %}Quinta feira
    {% when "Fri" %}Sexta feira
    {% when "Sat" %}Sábado
  {% endcase %}
  {{ page.date | date: "%-d de " }}
  {% case m %}
    {% when '1' %}Janeiro
    {% when '2' %}Fevereiro
    {% when '3' %}Março
    {% when '4' %}Abril
    {% when '5' %}Maio
    {% when '6' %}Junho
    {% when '7' %}Julho
    {% when '8' %}Agosto
    {% when '9' %}Setembro
    {% when '10' %}Outubro
    {% when '11' %}Novembro
    {% when '12' %}Dezembro
  {% endcase %}
  {{ page.date | date: " de %Y" }}
  {% endraw %}
  ```

  Saída do Examplo 1: **Domingo, 3 de Maio de 2015** <br />
  Saída do Examplo 2: **Sábado, 4 de Julho de 2015** <br />
  Saída do Examplo 3: **Quarta feira, 23 de Setembro de 2015** <br />
  Saída do Examplo 4: **Quinta feira, 26 de Novembro de 2015** <br />

---

## Referências

- Blog do Alan W. Smith - [Jekyll Date Formatting Examples](http://alanwsmith.com/jekyll-liquid-date-formatting-examples)
- Documentação do Liquid - [Liquid for Designers](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers)
- Documentação do Shopify - [Additional Filters](https://docs.shopify.com/themes/liquid-documentation/filters/additional-filters#date)


Tudo o que você queria saber sobre formatação de datas no Jekyll, mas tinham medo de perguntar.

Houdini - Foster The People

Formatação de datas no Jekyll


Quando iniciamos um projeto do zero, fica fácil decidir qual a versão do PHP será usada.
Mais quando se trata de softwares legados, temos que utilizar a versão na qual o software foi feito.
As vezes também pode ocorrer que o servidor de hospedagem utilizado usa uma versão do PHP
que não temos instalado em nosso ambiente de desenvolvimento.

Com tudo isso, torna-se necessário instalar várias versões de PHP no mesmo ambiente de
desenvolvimento para diminuir a possibilidade de erros na hora de subir a aplicação
para o ambiente de produção.

## Wampserver 3.0

Desde 01 de maio de 2014, o wampserver 2.5 não sofria uma atualização,
o projeto parecia ter sido abandonado pela empresa francesa Alterway
que mantinha o projeto no sourceforge. Mais um francês de 71 anos de idade,
Dominique Ottello de codinome Otomatic, revoltado com o descaso, começou a
ele mesmo a fazer as atualizações do wampserver e a postá-las no fórum do
wampserver, ele chegou a atualizar até a versão 2.5.18 quando enfim a Alterway
decidiu implementar as atualizações feitas por ele e a inclui-lo no processo de
desenvolvimento do wampserver.

Veja o Changelog do wampserver 2.5.18 [aqui](http://forum.wampserver.com/read.php?2,130837).

Veja o Changelog do wampserver 3.0.0 [aqui](http://forum.wampserver.com/read.php?2,136483).

## Por onde começar?

Existem dois modos de adicionar versões do PHP no wampserver.
Uma das maneiras é a manual que pode ser conferida
[aqui nesse artigo](/blog/atualizando-a-versao-do-php-no-wampserver/).
E a outra é utilizando os add-ons do próprio wampserver.
Nesse artigo, vou mostrar como adicionar uma nova versão do PHP utilizando
os add-ons do wampserver 3.0.

1.  Instale o wampserver 3.0 no [sourceforge](https://sourceforge.net/projects/wampserver/files/latest/download)

    > É importante notar que apenas as versões do PHP 5.5 e superiores
    > dão suporte 64 bits por isso para instalar versões como o
    > PHP 5.4 ou inferiores é necessário instalar o wampserver x86

2.  Baixe os Add-ons do _wampserver x86_ <br />
    - [PHP 5.3](http://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/wampserver3_x86_addon_php5.3.29.exe/download)
    - [PHP 5.4](http://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/wampserver3_x86_addon_php5.4.45.exe/download)
    - [PHP 5.5](http://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/wampserver3_x86_addon_php5.5.30.exe/download)
    - [PHP 5.6](https://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/Php/wampserver3_x86_addon_php5.6.27.exe/download)
    - [PHP 7.0](https://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/Php/wampserver3_x86_addon_php7.0.13.exe/download)
    - [PHP 7.1](https://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/Php/wampserver3_x86_addon_php7.1.0.exe/download)
    - _Opcional_ [Apache 2.2](https://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/Apache/wampserver3_x86_addon_apache2.2.31.exe/download)

## PHP na linha de comando

O PHP, assim como outras linguagens de programação, oferece a opção
de execução via linha de comando. Para quem usa o [Composer](https://getcomposer.org/) é preciso
definir a variável de ambiente do PHP no Windows. Mas já que temos
várias versões do PHP instaladas será mais eficiente fazer com que
a variável de ambiente do Windows mude conforme mudamos a versão do php no wampserver.

Para isso vamos precisar cria um arquivo **php.bat** para que dinamicamente mude a variável de ambiente "PATH" após troca da versão do PHP no wampserver. O arquivo deve se parecer com esse abaixo.

```bat
@REM This file detects the current enabled PHP version
@REM of wampserver (http://www.wampserver.com/) and executes the enabled php.exe
@REM and all parameters are passed
@REM Copy this file to WAMPSERVERPATH\bin\php
@REM Now you can add WAMPSERVERPATH\bin\php to your Windows Environment-Variable "PATH".
@REM Now you can use "php" global. For example "php -v".
@REM You can show the current PHP version with "php -v"

@setlocal enableextensions enabledelayedexpansion
@echo off

set serverPath="%~dp0\..\.."
set file="!serverPath!\wampmanager.conf"
set area=[php]
set key=phpVersion

FOR /F "tokens=*" %%a IN ('type %file%') DO (
  set ln=%%a
  if "x!ln:~0,1!"=="x[" (
    set currarea=!ln!
  ) else (
    for /f "tokens=1,2 delims== " %%b in ("!ln!") do (
      set currkey=%%b
      set currval=%%c

      if "x!area!"=="x!currarea!" (
        if "x!key!"=="x!currkey!" (
          set !currkey!=!currval:"=!
        )
      )
    )
  )
)

CALL !serverPath:"=!\bin\php\php!%key%!\php.exe %*
```

Crie o arquivo **php.bat** em `path\para-o\wamp\bin\php`

Depois adicione a variável de ambiente _PATH_ para o php _`";path\para-o\wamp\bin\php"`_
(se existir remova seu _PATH_ php antigo)

Agora você pode executar o PHP na linha de comando sempre globalmente
com a versão atual do PHP no wampserver.


Use desde o PHP 5.3 até o PHP 7.0 no Wampserver.

Don't Stop - Knightlife

Várias versões do PHP no Wampserver


Siga os passos abaixo para atualizar o php no Wampserver

1.  Parar servidor WAMP.

2.  Vá para [A página de downloads do php](http://windows.php.net/download/) e faça o dowload do pacode zip da versão do php. Certifique-se que esta baixando a versão **Thread Safe** compativel (x86 ou x64).

3.  Crie uma pasta para sua versão do php. Ex: `wamp/bin/php/php5.6.11`

4.  Extraia o zip baixado para a pasta recém-criada

5.  Copie os arquivos:

    - php.ini
    - phpForApache.ini
    - wampserver.conf

    a partir da pasta do seu PHP existente (ex: `wamp/bin/php/php5.5.12`) para a nova pasta php5.6.11.

6.  Abra os arquivos:

    - php.ini
    - phpForApache.ini

    e substitua as string da versão antiga para a nova versão. Ex: de 5.5.12 para 5.6.11

7.  Vá para `wamp/bin/apache/apache/apache2.2.11/bin` e exclua o arquivo chamado `php.ini`

8.  Reinicie o servidor WAMP.

9.  Escolha a versão antiga do php. Ex: php 5.5.12
10. Reinicie o servidor WAMP.
11. Agora escolha a nova versão do php. Ex: php 5.6.11.
12. Verifique se o caminho do PEAR está correto em php.ini, e modifique caso precise.
13. Reinicie o servidor WAMP.
14. Aproveite!
