Tradução em português europeu

Existem várias maneiras de se utilizar menus acordeão, tais como exibir uma lista de FAQs (Perguntas frequentes, em português), exibir vários menus e submenus, exibir as localizações de uma empresa em particular, e assim adiante.

Neste artigo, verás como criar um menu acordeão em React completamente do zero, passo a passo, sem utilizar qualquer biblioteca externa.

Vamos utilizar a sintaxe de "React Hooks" para criar esta aplicação em React. Então, se não tiveres experiência em React Hooks, dá uma vista de olhos ao meu artigo An introduction to React Hooks (texto em inglês) para aprender os conceitos básicos dos Hooks.

Podes ver uma demonstração da aplicação aqui.

Então, vamos começar.

Configuração inicial do projeto

Cria um projeto utilizando create-react-app.

npx create-react-app react-accordion-demo

Assim que o projeto for criado, remove todos os ficheiros da pasta src e cria os ficheiros index.js, App.js e styles.css dentro da pasta src. Além disso, cria uma pasta com o novo utils dentro da pasta src.

Abre o ficheiro styles.css e adiciona os conteúdos daqui dentro dele.

Como criar as páginas iniciais

Abre o ficheiro src/App.js e adiciona o seguinte conteúdo dentro dele:

import React from 'react';

const App = () => {
  const accordionData = {
    title: 'Section 1',
    content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
      laborum cupiditate possimus labore, hic temporibus velit dicta earum
      suscipit commodi eum enim atque at? Et perspiciatis dolore iure
      voluptatem.`
  };

  const { title, content } = accordionData;

  return (
    <React.Fragment>
      <h1>React Accordion Demo</h1>
      <div className="accordion">
        <div className="accordion-item">
          <div className="accordion-title">
            <div>{title}</div>
            <div>+</div>
          </div>
          <div className="accordion-content">{content}</div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default App;

Aqui, utilizamos as propriedades do objeto accordionData para exibir o conteúdo do acordeão.

Para a propriedade content, utilizamos a sintaxe de template literals do ES6 (``) de maneira a podermos distribuir o conteúdo por várias linhas e utilizamos algum texto lorem ipsum para preencher.

Agora, abre o ficheiro src/index.js e adiciona o seguinte conteúdo dentro dele:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './styles.css';

ReactDOM.render(<App />, document.getElementById('root'));

Agora, se executares a aplicação utilizando o comando yarn start a partir do terminal, verás o seguinte ecrã:

Como abrir e fechar o menu acordeão

Tal como podes ver acima, exibimos uma única secção como uma parte do acordeão. Por defeito, contudo, o acordeão está expandido e não podemos fechá-lo. Então, vamos adicionar a funcionalidade para abrir e fechar o acordeão.

Adiciona um novo estado dentro do componente, tal como mostrado abaixo:

const [isActive, setIsActive] = useState(false);

Aqui, definimos o estado isActive. Com base nisso, vamos ocultar ou exibir o conteúdo do acordeão.

Importa também o hook useState no início do ficheiro:

import React, { useState } from 'react';

Agora, para a div com a classe accordion-title, adiciona o manipulador onClick, desta forma:

<div className="accordion">
  <div className="accordion-item">
    <div
      className="accordion-title"
      onClick={() => setIsActive(!isActive)}
    >
      <div>{title}</div>
      <div>{isActive ? '-' : '+'}</div>
    </div>
    {isActive && <div className="accordion-content">{content}</div>}
  </div>
</div>

Aqui, estamos a inverter o valor do estado isActive quando clicamos na div accordion-title. Se o valor de isActive for false, estamos a defini-lo para  true, e vice-versa.

Também estamos a exibir os sinais + ou - com base no valor de isActive, utilizando o operador ternário.

Se o valor de estado de isActive for true, vamos exibir apenas o conteúdo do acordeão, tal como mostrado abaixo:

{isActive && <div className="accordion-content">{content}</div>}

Agora, se verificares a aplicação, verás o seguinte ecrã:

Como podes observar, inicialmente, o acordeão está fechado. Quando clicamos no título, o acordeão abre e podemos clicar nele novamente para fechá-lo.

Como adicionar várias secções em acordeão

Isto funciona bem para uma única secção em acordeão. No entanto, se tivermos várias secções, não será bom copiar e colar o mesmo código JSX vezes sem conta com conteúdo diferente.

Então, vamos criar um componente separado para exibir apenas o acordeão. Depois, com base no número de secções, vamos iterar sobre o componente para exibir várias secções.

Cria um ficheiro Accordion.js dentro da pasta src e adiciona-lhe os seguintes conteúdos:

import React, { useState } from 'react';

const Accordion = ({ title, content }) => {
  const [isActive, setIsActive] = useState(false);

  return (
    <div className="accordion-item">
      <div className="accordion-title" onClick={() => setIsActive(!isActive)}>
        <div>{title}</div>
        <div>{isActive ? '-' : '+'}</div>
      </div>
      {isActive && <div className="accordion-content">{content}</div>}
    </div>
  );
};

export default Accordion;

Aqui, movemos o estado e a div accordion-item do ficheiro App.js para o ficheiro Accordion.js. Estamos a passar os props dinâmicos title e content para o componente utilizando a sintaxe de desestruturação do ES6, como isto:

const Accordion = ({ title, content }) => {

Agora, abre o ficheiro App.js e substitui-o pelo seguinte conteúdo:

import React from 'react';
import Accordion from './Accordion';

const App = () => {
  const accordionData = [
    {
      title: 'Section 1',
      content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
      laborum cupiditate possimus labore, hic temporibus velit dicta earum
      suscipit commodi eum enim atque at? Et perspiciatis dolore iure
      voluptatem.`
    },
    {
      title: 'Section 2',
      content: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veniam
      reprehenderit nam assumenda voluptatem ut. Ipsum eius dicta, officiis
      quaerat iure quos dolorum accusantium ducimus in illum vero commodi
      pariatur? Impedit autem esse nostrum quasi, fugiat a aut error cumque
      quidem maiores doloremque est numquam praesentium eos voluptatem amet!
      Repudiandae, mollitia id reprehenderit a ab odit!`
    },
    {
      title: 'Section 3',
      content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
      quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
      dolor ut sequi minus iste? Quas?`
    }
  ];

  return (
    <div>
      <h1>React Accordion Demo</h1>
      <div className="accordion">
        {accordionData.map(({ title, content }) => (
          <Accordion title={title} content={content} />
        ))}
      </div>
    </div>
  );
};

export default App;

Aqui, convertemos accordionData de um objeto para um array de objetos. Estamos a iterar sobre ele utilizando o método de mapeamento de array e a passar os title e content correspondentes para o componente Accordion.

Agora, se verificares a aplicação, verás que as três secções são exibidas e que podemos abrir e fechar cada secção, tal como mostrado abaixo:

Como refatorar o código

Então, tal como podes ver, ao mover simplesmente a secção do acordeão para fora para uma componente separado e ao passar o conteúdo dinâmico como props, conseguimos criar com sucesso uma versão funcional de um acordeão a partir do zero.

É uma boa prática manter a informação estática num ficheiro à parte. Então, vamos mover o array accordionData para um ficheiro diferente e importá-lo para App.js.

Cria um ficheiro chamado content.js dentro da pasta utils e adiciona-lhe o seguinte conteúdo:

export const accordionData = [
  {
    title: 'Section 1',
    content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
    laborum cupiditate possimus labore, hic temporibus velit dicta earum
    suscipit commodi eum enim atque at? Et perspiciatis dolore iure
    voluptatem.`
  },
  {
    title: 'Section 2',
    content: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veniam
    reprehenderit nam assumenda voluptatem ut. Ipsum eius dicta, officiis
    quaerat iure quos dolorum accusantium ducimus in illum vero commodi
    pariatur? Impedit autem esse nostrum quasi, fugiat a aut error cumque
    quidem maiores doloremque est numquam praesentium eos voluptatem amet!
    Repudiandae, mollitia id reprehenderit a ab odit!`
  },
  {
    title: 'Section 3',
    content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
    quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
    dolor ut sequi minus iste? Quas?`
  }
];

Agora, abre App.js e substitui-o pelo seguinte conteúdo:

import React from 'react';
import Accordion from './Accordion';
import { accordionData } from './utils/content';

const App = () => {
  return (
    <div>
      <h1>React Accordion Demo</h1>
      <div className="accordion">
        {accordionData.map(({ title, content }) => (
          <Accordion title={title} content={content} />
        ))}
      </div>
    </div>
  );
};

export default App;

Aqui, apenas importamos a informação estática do ficheiro externo e removêmo-la do ficheiro App.js.

Então, agora o código está mais limpo e fácil de compreender e a funcionalidade está a funcionar como antes.

Pontos finais

Terminamos a construção da funcionalidade da nossa aplicação.

Podes encontrar o código fonte completo desta aplicação no GitHub neste repositório.

Obrigado pela leitura!

Desejas aprender todas as funcionalidades do ES6+ em detalhe, incluindo let e const, promises, vários métodos de promises, arrays e desestruturação de objetos, funções de seta, async/await, importação e exportação e muito mais a partir do zero?

Consulta o meu livro "Mastering Modern JavaScript" (em inglês). Ele aborda todos os pré-requisitos para aprender React e ajuda-te a ficar mais competente em JavaScript e React.

Tradução em português europeu

Escrito por: Vamsi Vempati

Tenho vindo a trabalhar numa aplicação de grande escala em Angular na Trade Me, na Nova Zelândia, há um par de anos. Ao longo dos últimos anos, a nossa equipa tem vindo a refinar a nossa aplicação tanto em termos de normas de programação como em desempenho, para que esteja no melhor estado possível.

Este artigo descreve as práticas que utilizamos na nossa aplicação e está relacionado com Angular, Typescript, RxJs e @ngrx/store. Também vamos abordar algumas diretrizes gerais de programação para ajudar a aplicação a ficar mais limpa.

1) trackBy

Ao utilizar ngFor para iterar sobre um array em templates, utiliza-o com uma função trackBy, que retornará um identificador único por cada item.

Por quê?

Quando um array muda, o Angular renderiza novamente toda a árvore do DOM. Se, no entanto, utilizares trackBy, o Angular saberá que elemento foi alterado e realizará alterações à árvore do DOM apenas para esse elemento em particular.

Para uma explicação detalhada sobre isso, consulta este artigo por Netanel Basal (em inglês).

Antes

<li *ngFor="let item of items;">{{ item }}</li>

Depois

// no template

<li *ngFor="let item of items; trackBy: trackByFn">{{ item }}</li>

// no componente

trackByFn(index, item) {    
   return item.id; // correspondência de id único do item
}

2) const x let

Ao declarar variáveis, utiliza const nos casos em que o valor não será redefinido.

Por quê?

Utilizar let e const quando for adequado clarifica a intenção das declarações. Também ajudará a identificar problemas quando um valor é acidentalmente reatribuído a uma constante, ao gerar um erro de compilação. Também ajuda a melhorar a legibilidade do código.

Antes

let car = 'ludicrous car';

let myCar = `My ${car}`;
let yourCar = `Your ${car};

if (iHaveMoreThanOneCar) {
   myCar = `${myCar}s`;
}

if (youHaveMoreThanOneCar) {
   yourCar = `${youCar}s`;
}

Depois

// o valor de car não é redefinido, por isso podemos torná-lo numa const
const car = 'ludicrous car';

let myCar = `My ${car}`;
let yourCar = `Your ${car};

if (iHaveMoreThanOneCar) {
   myCar = `${myCar}s`;
}

if (youHaveMoreThanOneCar) {
   yourCar = `${youCar}s`;
}

3) Operadores canalizáveis

Utiliza operadores canalizáveis ao utilizar operadores RxJs.

Por quê?

Os operadores canalizáveis são "tree-shakeable", o que significa que apenas o código de cuja execução precisamos será incluído quando os operadores são importados.

Isso também faz com que seja mais fácil identificar operadores inutilizados nos ficheiros.

Nota: isso requer a versão 5.5+ do Angular.

Antes

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';

iAmAnObservable
    .map(value => value.item)
    .take(1);

Depois

import { map, take } from 'rxjs/operators';

iAmAnObservable
    .pipe(
       map(value => value.item),
       take(1)
     );

4) Truques isolados de API

Nem todas as APIs são à prova de bala — por vezes, precisamos de adicionar alguma lógica no código para compensar os erros nas APIs. Em vez de ter os truques em componentes onde eles são necessários, é melhor isolá-los num local — como, por exemplo, um serviço e utilizar o servido a partir do componente.

Por quê?

Isso ajuda a manter os truques "mais próximos da API", ou seja, tão próximo do local onde o pedido de rede é realizado quanto possível. Desse modo, existe menos código a lidar com erros. Além disso, existe um local onde residem todos os truques e é mais fácil encontrá-los. Ao corrigir erros nas APIs, é mais fácil procurar os truques num ficheiro, em vez de procurar os truques que poderiam estar espalhados pela base de código.

Também podes criar tags personalizadas, como API_FIX, semelhante a TODO e anexar as correções à tag para que seja mais fácil de encontrar.

5) Subscrever em template

Evita subscrever a observáveis a partir de componente. Em vez disso, subscreve aos observáveis a partir do template.

Por quê?

Os canais async removem a sua subscrição automaticamente e tornam o código mais simples ao eliminar a necessidade de gerir manualmente subscrições. Também reduz o risco de acidentalmente esquecer a remoção da subscrição no componente, que causaria uma fuga de memória. Esse risco também pode ser mitigado ao utilizar uma regra de lint para detetar observáveis não subscritos.

Isto também impede que os componentes tenham estado e introduzam erros onde os dados são alterados fora da subscrição.

Antes

// template

<p>{{ textToDisplay }}</p>

// componente

iAmAnObservable
    .pipe(
       map(value => value.item),
       takeUntil(this._destroyed$)
     )
    .subscribe(item => this.textToDisplay = item);

Depois

// template

<p>{{ textToDisplay$ | async }}</p>

// componente

this.textToDisplay$ = iAmAnObservable
    .pipe(
       map(value => value.item)
     );

6) Limpar subscrições

Ao fazer subscrição a observáveis, certifica-te sempre que removes a subscrição a eles adequadamente ao utilizar operadores como take, takeUntil etc.

Por quê?

Não remover a subscrição a observáveis causará fugas de memória indesejáveis, pois o fluxo de observáveis é deixado aberto, potencialmente, até mesmo após a destruição de um componente/o utilizador ter navegado para outra página.

Melhor ainda, cria uma regra lint para detetar observáveis cuja subscrição não tenha sido removida.

Antes

iAmAnObservable
    .pipe(
       map(value => value.item)     
     )
    .subscribe(item => this.textToDisplay = item);

Depois

Utilizar takeUntil quando desejas aguardar por alterações até que outro observável emita um valor:

private _destroyed$ = new Subject();

public ngOnInit (): void {
    iAmAnObservable
    .pipe(
       map(value => value.item)
      // Queremos aguardar por iAmAnObservable até que o componente seja destruído,
       takeUntil(this._destroyed$)
     )
    .subscribe(item => this.textToDisplay = item);
}

public ngOnDestroy (): void {
    this._destroyed$.next();
    this._destroyed$.complete();
}

Utilizar um sujeito privado como esse é um padrão para gerir a remoção da subscrição de vários observáveis no componente.

Utilizar take quando queres apenas o primeiro valor emitido pelo observável:

iAmAnObservable
    .pipe(
       map(value => value.item),
       take(1),
       takeUntil(this._destroyed$)
    )
    .subscribe(item => this.textToDisplay = item);

Observa aqui a utilização de takeUntil com take. Isso é para evitar fugas de memória quando a subscrição não tiver recebido um valor antes do componente ter sido destruído. Sem takeUntil aqui, a subscrição ainda permaneceria até obter o primeiro valor, mas visto que o componente já foi destruído, ele nunca obterá um valor — levando a uma fuga de memória.

7) Utilizar operadores apropriados

Ao utilizar operadores de flattening com os teus observáveis, utiliza o operador adequado para a situação.

switchMap: quando desejas ignorar as emissões anteriores quando existe uma nova emissão.

mergeMap: quando desejas lidar simultaneamente com todas as emissões.

concatMap: quando desejas lidar com as emissões uma após a outra, à medida que são emitidas.

exhaustMap: quando desejas cancelar todas as emissões novas enquanto processas a emissão anterior.

Para uma explicação detalhada disso, observa este artigo de Nicholas Jamieson (em inglês).

Por quê?

Utilizar um único operador quando possível, em vez de encadear vários outros operadores para alcançar o mesmo efeito, pode fazer com que seja enviado menos código para o client. Utilizar os operadores errados pode levar a comportamentos indesejados, visto que operadores diferentes lidam com observáveis de maneiras diferentes.

8) Carregamento lento (lazy loading)

Quando possível, tenta carregar lentamente os módulos na tua aplicação em Angular. Carregamento lento é quando carregas algo apenas quando é utilizado – por exemplo, carregar um componente apenas quando ele tiver de ser visto.

Por quê?

Isso reduzirá o tamanho da aplicação a ser carregada e pode melhorar o tempo de iniciação da aplicação ao não carregar os módulos que não são utilizados.

Antes

// app.routing.ts

{ path: 'not-lazy-loaded', component: NotLazyLoadedComponent }

Depois

// app.routing.ts

{ 
  path: 'lazy-load',
  loadChildren: 'lazy-load.module#LazyLoadModule' 
}

// lazy-load.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LazyLoadComponent }   from './lazy-load.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
         { 
             path: '',
             component: LazyLoadComponent 
         }
    ])
  ],
  declarations: [
    LazyLoadComponent
  ]
})
export class LazyModule {}

9) Evitar ter subscrições dentro de subscrições

Por vezes, podes querer que os valores de mais do que um observável realizem uma ação. Nesse caso, evita subscrever um observável no bloco de subscrição de outro observável. Em vez disso, utiliza operadores de encadeamento adequados. Os operadores de encadeamento correm nos observáveis do operador antes deles. Alguns operadores são: withLatestFrom, combineLatest etc.

Antes

firstObservable$.pipe(
   take(1)
)
.subscribe(firstValue => {
    secondObservable$.pipe(
        take(1)
    )
    .subscribe(secondValue => {
        console.log(`Os valores combinados são: ${firstValue} e ${secondValue}`);
    });
});

Depois

firstObservable$.pipe(
    withLatestFrom(secondObservable$),
    first()
)
.subscribe(([firstValue, secondValue]) => {
    console.log(`Os valores combinados são: ${firstValue} e ${secondValue}`);
});

Por quê?

"Code smell"/legibilidade/complexidade: não utilizar RxJs em toda a sua extensão, sugere que o programador não está familiarizado com a área de superfície da API RxJs API.

Desempenho: se os observáveis estiverem inativos, o código subscreverá para firstObservable, esperará que ele termine e DEPOIS iniciará o trabalho com o segundo observável. Se esses fossem pedidos de rede, seria mostrado como assíncrono/cascata.

10) Evitar "any" e atribuir tipo a tudo

Declara sempre variáveis ou constantes com um tipo diferente de any.

Por quê?

Ao declarar variáveis ou constantes em Typescript sem uma tipologia, o tipo da variável/constante será deduzido pelo valor que lhe é atribuído. Isso causará problemas não pretendidos. Um exemplo clássico é:

const x = 1;
const y = 'a';
const z = x + y;

console.log(`O valor de z é: ${z}`

// Resultado
O valor de z é 1a

Isso pode causar problemas indesejados quando esperas que y também seja um número. Esses problemas podem ser evitados ao escrever as variáveis de maneira apropriada.

const x: number = 1;
const y: number = 'a';
const z: number = x + y;

// Isto gerará um erro de compilação a dizer:

Type '"a"' is not assignable to type 'number'.

const y:number

Dessa forma, podemos evitar erros causados pela ausência de tipos.

Outra vantagem de ter boas tipologias na tua aplicação é que torna a refatorização mais fácil e segura.

Considera estes exemplos:

public ngOnInit (): void {
    let myFlashObject = {
        name: 'My cool name',
        age: 'My cool age',
        loc: 'My cool location'
    }
    this.processObject(myFlashObject);
}

public processObject(myObject: any): void {
    console.log(`Name: ${myObject.name}`);
    console.log(`Age: ${myObject.age}`);
    console.log(`Location: ${myObject.loc}`);
}

// Resultado
Name: My cool name
Age: My cool age
Location: My cool location

Digamos que queremos renomear a propriedade  loc para location em myFlashObject:

public ngOnInit (): void {
    let myFlashObject = {
        name: 'My cool name',
        age: 'My cool age',
        location: 'My cool location'
    }
    this.processObject(myFlashObject);
}

public processObject(myObject: any): void {
    console.log(`Name: ${myObject.name}`);
    console.log(`Age: ${myObject.age}`);
    console.log(`Location: ${myObject.loc}`);
}

// Resultado
Name: My cool name
Age: My cool age
Location: undefined

Se não tivermos um tipo no myFlashObject, este pensará que a propriedade loc em myFlashObject é apenas indefinida, em vez de não ser uma propriedade válida.

Se tivéssemos um tipo para myFlashObject, obteríamos um bom erro de tempo de compilação como mostrado abaixo:

type FlashObject = {
    name: string,
    age: string,
    location: string
}

public ngOnInit (): void {
    let myFlashObject: FlashObject = {
        name: 'My cool name',
        age: 'My cool age',
        // Erro de compilação
        Type '{ name: string; age: string; loc: string; }' is not assignable to type 'FlashObjectType'.
        Object literal may only specify known properties, and 'loc' does not exist in type 'FlashObjectType'.
        loc: 'My cool location'
    }
    this.processObject(myFlashObject);
}

public processObject(myObject: FlashObject): void {
    console.log(`Name: ${myObject.name}`);
    console.log(`Age: ${myObject.age}`)
    // Erro de compilação
    Property 'loc' does not exist on type 'FlashObjectType'.
    console.log(`Location: ${myObject.loc}`);
}

Se estiveres a iniciar um novo projeto, vale a pena definir strict:true no ficheiro tsconfig.json para ativar todas as opções rigorosas de verificação de tipo.

11) Faz uso das regras de lint

O tslint tem várias opções já incorporadas como no-any, no-magic-numbers, no-console etc, que podes configurar no teu tslint.json para impor certas regras na tua base de código.

Por quê?

Ter regras de lint aplicadas significa que obterás um erro útil caso estejas a fazer algo que não deverias estar a fazer. Isso garantirá consistência e legibilidade. Por favor, consulta aqui (em inglês) mais regras que podes configurar.

Alguma regras de lint até têm correções para resolver o erro de lint. Se desejares configurar a tua própria regra de lint personalizada, também podes fazê-lo. Consulta, por favor, este artigo de Craig Spence (em inglês) sobre como escrever as tuas próprias regras de lint personalizadas utilizando o TSQuery.

Antes

public ngOnInit (): void {
    console.log('Eu sou uma mensagem do console');
    console.warn('Eu sou uma mensagem de aviso do console');
    console.error('Eu sou uma mensagem de erro do console');
}

// Resultado - sem erros, imprimirá o que vemos abaixo na janela do console:
Eu sou uma mensagem do console
Eu sou uma mensagem de aviso do console
Eu sou uma mensagem de erro do console

Depois

// tslint.json
{
    "rules": {
        .......
        "no-console": [
             true,
             "log",    // console.log não é permitido
             "warn"    // console.warn não é permitido
        ]
   }
}

// ..component.ts

public ngOnInit (): void {
    console.log('Eu sou uma mensagem do console');
    console.warn('Eu sou uma mensagem de aviso do console');
    console.error('Eu sou uma mensagem de erro do console');
}

// Resultado - erros de lint para as instruções de console.log e console.warn, mas sem erro para console.error, já que não foi mencionado no config

Calls to 'console.log' are not allowed.
Calls to 'console.warn' are not allowed.

12) Pequenos componentes reutilizáveis

Extrai as partes que podem ser reutilizadas num componente e cria outro. Torna o componente tão "burro" quanto possível, visto que isso fará com que funcione em mais cenários. Tornar um componente "burro" quer dizer que o componente não tem nenhuma lógica em especial e opera puramente com base nos inputs e outputs que lhe forem fornecidos.

Como regra geral, o último descendente na árvore de componentes será o mais burro de todos.

Por quê?

Os componentes reutilizáveis reduzem a repetição de código, tornando-o assim mais fácil de gerir e de receber alterações.

Os componentes "burros" são mais simples e, por isso, têm menos probabilidade de terem erros. Os componentes "burros" fazem-te pensar mais sobre a API de componente pública e ajudam-te a detetar preocupações contraditórias.

13) Os componentes devem lidar apenas com lógica de exibição

Evita ter qualquer outra lógica para além da lógica de exibição no teu componente sempre que puderes e faz com que o componente lide apenas com a lógica de exibição.

Por quê?

Os componentes são projetados para fins de exibição e controlam o que a vista deve fazer. Qualquer lógica empresarial deve ser extraída nos seus próprios métodos/serviços, onde for apropriado, separando a lógica empresarial da lógica de exibição.

A lógica empresarial é geralmente mais fácil de testar quando é extraída para um serviço. Ela pode ser reutilizada por quaisquer outros componentes que precisem da mesma lógica empresarial aplicada.

14) Evita métodos longos

Métodos longos geralmente indicam que estão a fazer muitas coisas. Tenta utilizar o Princípio de Responsabilidade Única. O método por si só pode estar a fazer uma coisa, mas, dentro dele, existem algumas operações que podem estar a acontecer. Podemos extrair esses métodos para o seu próprio método e fazer com que façam cada um uma coisa e utilizá-los.

Por quê?

Os métodos longos são difíceis de ler, compreender e manter. Também são susceptíveis a erros, visto que alterar uma coisa pode afetar diversas outras coisas nesse método. Também tornam a refatorização (que é uma coisa essencial em qualquer aplicação) difícil.

Isso é por vezes medido como "complexidade ciclomática". Também existem algumas regras do TSLint para detetar complexidade ciclomática/cognitiva, que podes utilizar no teu projeto para evitar erros e detetar "code smells" e problemas de manutenção.

15) DRY (Não te repitas)

Do not Repeat Yourself (Não te repitas). Certifica-te de que não tens o mesmo código copiado para locais diferentes na base de código. Extrai o código repetido e utiliza isso em vez do código repetido.

Por quê?

Ter o mesmo código em vários locais significa que, se quisermos fazer uma alteração à lógica nesse código, temos de fazê-la em vários locais. Isso torna-o difícil de gerir e também é susceptível a erros. Podemos falhar e não alterar em todas as ocorrências. É mais demorado realizar alterações à lógica e testar o código também é um processo demorado.

Nesses casos, extrai o código repetido e utiliza essa alternativa em vez disso. Isso quer dizer que existe apenas um local para alterar e uma coisa para testar. Ter menos código duplicado enviado para os utilizadores quer dizer que a aplicação será mais rápida.

16) Adicionar mecanismos de cache

Ao realizar chamadas de API, as respostas delas não mudam com frequência. Nesses casos, podes adicionar um mecanismo de cache e armazenar o valor da API. Quando for realizado outro pedido à mesma API, verifica se existe um valor para ele na cache. Caso exista, utiliza-o. Caso contrário, realiza a chamada da API e coloca o resultado em cache.

Se os valores alterarem, mas não regularmente, podes introduzir uma cache de tempo onde podes verificar quando foi colocado algo em cache pela última vez e decidir se chamas ou não a API.

Por quê?

Ter um mecanismo de cache significa evitar chamadas de API indesejadas. Ao realizar apenas as chamadas de API quando necessário e evitar código duplicado, a velocidade da aplicação melhora pois não temos de esperar pela rede. Também significa que não descarregamos a mesma informação vezes sem conta.

17) Evitar lógica em templates

Se tiveres qualquer tipo de lógica nos teus templates, mesmo que seja uma simples cláusula &&, é bom extraí-la para o seu próprio componente.

Por quê?

Ter lógica no template significa que não é possível realizar testes unitários ao template e é, então, mais susceptível a erros quando alteramos o código do template.

Antes

// template
<p *ngIf="role==='developer'"> Status: Developer </p>

// component
public ngOnInit (): void {
    this.role = 'developer';
}

Depois

// template
<p *ngIf="showDeveloperStatus"> Status: Developer </p>

// componente
public ngOnInit (): void {
    this.role = 'developer';
    this.showDeveloperStatus = true;
}

18) Strings devem ser seguras

Se tiveres uma variável do tipo string que possa ter apenas um conjunto de valores, em vez de declará-la com o tipo string, podes declarar a lista de valores possíveis como o tipo.

Por quê?

Ao declarar o tipo da variável adequadamente, podemos evitar erros ao escrever o código durante a compilação em vez de durante a execução.

Antes

private myStringValue: string;

if (itShouldHaveFirstValue) {
   myStringValue = 'First';
} else {
   myStringValue = 'Second'
}

Depois

private myStringValue: 'First' | 'Second';

if (itShouldHaveFirstValue) {
   myStringValue = 'First';
} else {
   myStringValue = 'Other'
}

// Isso gerará o erro abaixo
Type '"Other"' is not assignable to type '"First" | "Second"'
(property) AppComponent.myValue: "First" | "Second"

Visão geral

Gestão de estado

Considera utilizar @ngrx/store para gerir o estado da tua aplicação e @ngrx/effects como modelo de efeito secundário para armazenamento. As alterações de estados são descritas pelas ações e as alterações são realizadas por funções puras chamadas reducers(redutores).

Por quê?

@ngrx/store isola toda a lógica relacionada com estados num só local e torna-a consistente ao longo da aplicação. Também tem um mecanismo de memorização ao aceder à informação armazenada, levando a uma aplicação com melhor desempenho. @ngrx/store combinado com a estratégia de deteção de alterações do Angular resulta numa aplicação mais rápida.

Estado imutável

Ao utilizar @ngrx/store, considera utilizar ngrx-store-freeze para tornar o estado imutável. ngrx-store-freeze impede que o estado seja alterado ao lançar uma excepção. Isso evita alterações acidentais do estado, o que leva a consequências indesejadas.

Por quê?

Alterar o estado em componentes faz com que a aplicação se comporte de modo inconsistente com base na ordem de carregamento dos componentes. Quebra o modelo mental do padrão redux. As alterações podem acabar sobrepostas caso o estado de armazenamento altere e seja emitido novamente. Separa as responsabilidades/preocupações — componentes são camadas de vista, não devem saber como alterar o estado.

Jest

O Jest é uma framework de testes unitários da Facebook para JavaScript. Torna os testes unitários mais rápidos ao colocar em paralelo as execuções de testes ao longo da base de código. Com o seu modo de observação, são executados apenas os testes relacionados com as alterações, o que torna o ciclo de resposta para os testes muito mais curto. Ele também fornece cobertura de código dos testes e é suportado no VS Code e Webstorm.

Podias utilizar um preset (texto em inglês) para Jest que fará a maior parte do trabalho por ti quando estiveres a configurar a Jest no teu projeto.

Karma

Karma é um executante de testes desenvolvido pela equipa do AngularJS. Este requer um browser real/DOM para executar os testes. Também pode ser executado em browsers diferentes. O Jest não precisa do Chrome headless/phantomjs para executar os testes e é executado em Node puro.

Universal

Se não tiveres tornado a tua aplicação numa aplicação Universal, agora é uma boa altura para fazê-lo. O Angular Universal (link em inglês) permite-te executar a tua aplicação do Angular no servidor e faz renderização no lado do servidor (SSR), que serve páginas html estáticas pré-renderizadas. Isso torna a aplicação muito rápida, pois apresenta o conteúdo no ecrã quase instantaneamente, sem ter de esperar que os JS bundles carreguem e analisem, ou pela iniciação do Angular.

Também é bom em termos de SEO, visto que o Angular Universal gera conteúdo estático e torna mais fácil a indexação da aplicação por parte dos rastreadores da web e tornam a aplicação pesquisável sem executar JavaScript.

Por quê?

O Universal melhora drasticamente o desempenho da tua aplicação. Atualizamos recentemente a nossa aplicação para realizar renderização do lado do servidor e o tempo de carregamento do site passou de vários segundos para dezenas de milésimos de segundo!

Também permite que o teu site apareça corretamente nos modelos de pré-visualização das redes sociais. O primeiro carregamento significativo é muito rápido e torna o conteúdo visível aos utilizadores sem quaisquer atrasos indesejados.

Conclusão

Criar aplicações é uma jornada constante e existe sempre espaço para melhorar coisas. Esta lista de optimizações é um bom local para começar, e aplicar de maneira consistente esses padrões fará a tua equipa feliz. Os teus utilizadores também vão adorar-te pela boa experiência na tua aplicação com menos problemas e com melhor desempenho.

Obrigada pela leitura! Se gostaste deste artigo, fica à vontade para partilhar e ajudar outras pessoas a encontrá-lo. Segue a autora no Medium ou Twitter para ver mais artigos. Boa programação, pessoal! ☕️

Tradução em português europeu

O Unity é uma ótima ferramenta para criar protótipos de tudo, desde jogos até visualizações interativas. Neste artigo, analisamos tudo o que precisas saber para começar a utilizar o Unity.

Primeiro, um pouco sobre mim: sou um programador amador em Unity, modelador 3D e designer gráfico, que já trabalho com Unity e Blender há mais de 5 anos. Agora, sou aluno de Matemática Financeira na Universidade College Dublin e, ocasionalmente, faço design gráfico, protótipos para a web e protótipos de jogos como freelance.

Introdução

Este artigo é para aqueles que nunca utilizaram o Unity, mas que tenham alguma experiência em programação ou design/desenvolvimento para a web. No final deste artigo, deves ter uma boa compreensão geral do motor (em inglês, engine), assim como de todas as funções e código necessários para começar a criar um jogo básico.

Por que o Unity?

Se quiseres criar jogos

Existem apenas algumas opções quando falamos de desenvolvimento de jogos independentes. As três escolhas principais, se quiseres desenvolver jogos, são o Unreal, o Unity ou o GameMaker.

O Unity é provavelmente a opção menos restritiva entre as 3 plataformas. Este fornece-te um produto muito cru logo à partida, mas é muito flexível, bem documentado e altamente extensível para criar basicamente qualquer género de jogo que possas imaginar.

Existem bastantes jogos muito bem-sucedidos, como o Escape from Tarkov (Atirador), Monument Valley (Puzzle) e o This War of Mine (Estratégia/Sobrevivência), todos criados com o Unity.

Na realidade, o motor em que crias o teu primeiro jogo provavelmente não é muito importante. Por isso, o meu conselho é que escolhas um e sigas com esse.

Se quiseres criar protótipos de experiências de utilizador

Visto que o Unity é apenas um motor com algumas físicas, animações e renderização 3D em tempo real, também é um ótimo espaço para criar protótipos completos e interativos para estudos de Experiências de Utilizador (UX – do inglês, User Experience).

O Unity tem suporte total para Realidade Virtual e Realidade Aumentada. Ele pode, então, ser uma ótima ferramenta para explorar arquitetura, automatizações e simulações com os clientes.

Secções deste artigo

• Por que o Unity?
• Janela de edição do Unity
• Objetos de jogo do Unity
• Componentes incorporados do Unity
• Criar componentes personalizados
• Estrutura de MonoComportamento
• Manipular GameObjects
• Raycasting
• Deteção de colisão
• Características avançadas
• Conselhos para iniciantes
• Bons recursos e comunidades
• Conclusão

Janela de edição do Unity

A janela de edição é dividida em várias secções. Vamos abordar isto muito brevemente porque vamos referir esta janela constantemente ao longo deste artigo. Se já te sentires à vontade com isto, podes passar esta parte à frente!

Vista da cena: permite a colocação e o movimento de GameObjects na cena

Vista do jogo: permite visualizar como o jogador verá a cena a partir da câmara

Inspetor: fornece detalhes sobre o GameObject selecionado na cena

Recursos e projeto: todos os pré-fabricados, texturas, modelos, scripts e outros estão armazenados aqui

Hierarquia: permite colocar e estruturar GameObjects dentro da cena

Agora, estamos prontos para começar!

Objetos de jogo do Unity

O que são os GameObjects

Os GameObjects são o bloco de construção principal para tudo no motor de jogos Unity. O nome quase que revela tudo:

Tudo o que colocares dentro de uma cena no Unity deve estar envolvida por um "game object" (objeto de jogo).

Se tiveres experiência em design para a web, podes pensar em GameObjects muito como elementos <div>! Recipientes extremamente aborrecidos, mas altamente extensíveis, para criar funcionalidades ou visuais complexos.

Praticamente tudo, desde efeitos de partículas, câmaras, jogadores, elementos de Interface de Utilizador, … (a lista continua) é um GameObject.

Criar hierarquia

Tal com uma <div> em desenvolvimento para a web, um GameObject também é um recipiente. Tal como colocas <div>s umas dentro de outras para criar layouts variados e desejáveis ou abstrações, podes querer fazer o mesmo com os objetos de jogo.

A lógica por trás da colocação de game objects uns dentro de outros é muito parecida com o que é feito em desenvolvimento para a web, vou fornecer alguns exemplos…

Desorganização e eficiência

Analogia com a web: tens muitos elementos semelhantes que podem ser gerados dinamicamente em tempo real em resposta a interações de utilizadores e desejam manter as coisas organizadas.

Tradução do Unity: estás a criar uma cópia do Minecraft e tens muitos blocos na cena, então precisas de adicionar e remover 'pedaços' de blocos da cena por questões de desempenho. Então, faz sentido ter cada pedaço associado a um GameObject pai vazio, visto que remover o pedaço pai remove todos os blocos filhos.

Posicionamento

Analogia com a web: queres manter a posição do conteúdo contido 'relativo' ao recipiente e não à página da web.

Tradução do Unity: criaste um conjunto de drones ajudantes que pairam à volta do jogador. Preferias claramente não escrever código para indicar aos drones para seguir o jogador. Então, em vez disso, instancias os drones como filhos do game object do jogador.

Componentes incorporados do Unity

O Modelo de componente do ator

Os GameObjects por si só são bastante inúteis — tal como vimos, são praticamente apenas recipientes. De maneira a fornecer funcionalidade, temos de adicionar componentes, que são essencialmente scripts escritos em C# ou em Javascript.

O Unity funciona com base num modelo de componente de ator – simplificando, os GameObjects são os atores e os componentes são os teus scripts.

Se já tiveres alguma vez criado uma aplicação para a web, estarás à vontade com a ideia de criar pequenos componentes reutilizáveis, tais como botões, elementos de formulário, layouts flexíveis que têm várias diretrizes diferentes e propriedades personalizáveis. Depois, podes montar estes pequenos componentes em páginas da web maiores.

A grande vantagem dessa abordagem é o nível de reutilização e canais de comunicação claramente definidos entre elementos. Tal como em desenvolvimento de jogos, queremos minimizar o risco de efeitos secundários indesejados. Pequenos erros tendem a ficar fora do controlo se não tivermos cuidado e são extremamente difíceis de depurar. Por isso, criar componentes pequenos, robustos e reutilizáveis é crucial.

Componentes chave incorporados

Acho que está na hora de mostrar alguns exemplos dos componentes incorporados fornecidos pelo motor de jogos Unity.

• MeshFilter: permite-te atribuir materiais a uma malha (em inglês, mesh) 3D para um GameObject
• MeshRender: permite-te atribuir materiais a uma malha 3D
• [Box | Mesh]Collider: ativa a deteção do GameObject durante colisões
• Rigidbody: aciona uma simulação física realista para ser aplicada num GameObjects com malhas 3d e aciona eventos de deteção em colisões de caixas
• Light: ilumina partes da tua cena
• Camera: define a vista do jogador para ser anexada a um GameObject
• Vários componentes de tela da Interface de Utilizador para exibir Interfaces Gráficas de Utilizador

Existem muitos mais, mas estes são os principais que precisas conhecer. Uma dica é que podes aceder a todos os documentos através do manual do Unity e na referência de scripting off-line, onde quer que estejas:

Criar componentes personalizados

Os componentes incorporados controlam primeiramente a física e o visual, mas, para realmente criar um jogo, vais precisar de aceitar inputs do utilizador e manipular esses componentes padrão assim como os próprios GameObjects.

Para começar a criar componentes, vai até ao GameObject desejado > Add Component (Adicionar componente) > escreve o nome do teu novo componente na barra de pesquisa > new script (novo script) (C#).

Como recomendação geral, eu desaconselho utilizar Javascript no Unity. Não foi mantido atualizado com todas as coisas boas que vieram com o ES6 e a maioria das coisas mais avançadas depende de coisas em C# transferidas para Javascript… Por experiência própria, torna-se simplesmente numa solução alternativa gigantesca.

Estrutura de um MonoComportamento

Funções-chave

Todos os componentes herdam da classe do MonoComportamento. Ela inclui vários métodos predefinidos, principalmente:

• void Start(), que é chamado quando um objeto que contém o script é instanciado na cena. Isso é útil sempre que queremos executar algum código de inicialização (por exemplo, definir o equipamento de um jogador após este ser colocado num jogo).
• void Update(), que é chamado a cada frame. É aqui que fica a parte do código que envolve o input do utilizador, atualizando várias propriedades como o movimento de um jogador na cena.

Variáveis do inspetor

Por vezes, queremos tornar os componentes o mais flexíveis possível. Por exemplo, todas as armas podem ter um dano diferente, cadência de tiro, se tem visão etc. Embora todas as armas sejam essencialmente a mesma coisa, podemos querer ser capazes de criar rapidamente diferentes variedades no editor do Unity.

Outro exemplo onde podemos querer fazer isso é quando criamos um componente da Interface de Utilizador, que acompanha os movimentos do rato do utilizador e coloca o cursor na janela. Aqui, podemos querer controlar a sensibilidade dos movimentos do cursor (se o utilizador está a utilizar um joystick ou controlador x um rato de computador). Então, faria sentido ter essa variável fácil de alterar, tanto no modo de edição como durante o tempo de execução.

Podemos fazer isso facilmente ao declará-las como variáveis públicas no corpo do componente.

Aceitar inputs de utilizador

Como é óbvio, queremos que o nosso jogo responda a inputs de utilizador. Uma das maneiras mais comuns de se fazer isso é utilizar os seguintes métodos na função Update() de um componente (ou noutro local que queiras):

• Input.GetKey(KeyCode.W): retorna verdadeiro quando a tecla W está a ser pressionada
• Input.GetKeyDown(KeyCode.W): retorna verdadeiro quando a tecla W é pressionada pela primeira vez
• Input.GetAxis("Vertical"), Input.GetAxis("Horizontal") Retorna entre -1,1 a partir do movimento de input do rato

Manipular GameObjects

Assim que recebermos inputs do utilizador, vamos querer que os GameObjects na nossa cena respondam. Existem vários tipos de respostas que podemos considerar:

• Translação, rotação, escala
• Criar GameObjects
• Enviar mensagens a GameObjects/componentes existentes

Transformações

Todos os GameObjects têm uma propriedade transform, que permite que várias manipulações úteis sejam realizadas no game object atual.

Os métodos são bastante auto-explicativos, basta observar que utilizamos  gameObject em minúsculas para nos referirmos ao GameObject que detém essa instância em específico do componente.

Por norma, é boa prática utilizar local[Position,Rotation] em vez da posição/rotação global de um objeto. Isso, geralmente, torna mais fácil mover objetos num modo que faça sentido, pois o eixo do espaço local estará orientado e centrado no objeto pai e não na origem do mundo e direções x, y e z.

Caso precises de fazer a conversão entre espaço local ou global (que é geralmente o caso), podes utilizar o seguinte:

Como podes imaginar, existe alguma álgebra linear bastante simples atrás disso, indicada pelo 'Inverse' no nome do método.

Criar GameObjects

Visto que os GameObjects são basicamente tudo na tua cena, podes querer ser capaz de gerá-los na hora. Por exemplo, se o teu jogador tiver um género de um lançador de projéteis, podes querer ser capaz de criar projéteis na hora, que vão ter a sua própria lógica encapsulada para voar, efetuar dano etc…

Primeiro, precisamos de introduzir a noção de um Prefab. Podemos criar esses ao arrastar qualquer GameObject na hierarquia da cena para a pasta dos assets.

Isso, basicamente, armazena um template do objeto que tínhamos na cena, com todas as mesmas configurações.

Assim que tivermos estes componentes prefab, podemos atribuí-los a variáveis de inspeção (como abordamos anteriormente) em qualquer componente na cena. Então, podemos criar GameObjects como especificado pelo prefab a qualquer altura.

Podemos realizar 'Instanciação' do prefab e manipulá-lo para a localização desejada na cena e estabelecer as relações hierárquicas necessárias.

Aceder a outros GameObjects e componentes

Por vezes, precisamos de comunicar com outros GameObjects assim como os seus componentes associados. Assim que tiveres uma referência a um game object, isso fica muito simples.

ComponentName comp = some_game_object.GetComponent<ComponentName>();

Depois disso, podes aceder a quaisquer métodos/variáveis públicos do componente de maneira a manipular o GameObject. Essa é a parte mais direta, no entanto. Obter realmente a referência para o GameObject pode ser feito de várias formas diferentes…

Aceder através de variável de inspeção

Esta é a maneira mais direta. Cria simplesmente uma variável pública para o GameObject, tal como demonstramos anteriormente com os prefabs, e arrasta-a manualmente para o componente através do inspetor. De seguida, acede à variável tal como acima.

Aceder através de tags

Podemos atribuir tags a GameObjects ou prefabs através do inspetor e depois utilizar as funções find do game object para localizar as referências para eles.

Isso é simplesmente feito como abaixo.

GameObject some_game_object = GameObject.FindGameObjectWithTag(“Brick”);

Aceder através do atributo transform

Se quisermos aceder a componentes em algum objeto pai, podemos simplesmente fazer isto através do atributo transform.

ComponentName comp = gameObject.transform.parent.GetComponent<ComponentName>();

Aceder através de funções SendMessage

Como alternativa, se quisermos enviar uma mensagem a muitos outros componentes ou desejarmos enviar uma mensagem a um objeto que está bastante acima na hierarquia, podemos utilizar as funções de envio de mensagem, que aceitam o nome da função, seguido pelos argumentos.

gameObject.SendMessage("MethodName",params); // Mensagem de Broadcast

gameObject.SendMessageUpwards("MethodName", params); // Apenas recebido por componentes que estão hierarquicamente acima.

Raycasting

Podes ter ouvido falar disso antes, quando as pessoas comparam jogos de FPS que são 'baseados em físicas' ou 'baseados em raios'. Raycasting é essencialmente como ter um laser que, quando entra em contacto com um 'collider' ou 'rigidbody', retorna um 'hit' e passa de volta os detalhes do objeto.

Existem dois cenários onde isto é útil (existem provavelmente muitos mais):

1. Se estivesses a desenhar um sistema de armas para um jogo, poderias utilizar raycasting para detetar a colisão e até mesmo personalizar o comprimento do raio de modo a que as armas corpo-a-corpo 'atinjam' apenas a curtas distâncias.
2. Criar um raio desde o ponteiro do rato até um ponto num espaço 3D, ou seja, se desejares que o utilizador seja capaz de selecionar unidades com o seu rato num jogo de estratégia.

Como podes ver, o código para isso é um pouco mais complicado. A coisa principal a compreender é que, para criar um raio para onde o rato está a apontar num espaço 3D, é necessária a transformação ScreenPointToRay. A razão para isso é que a câmara está a renderizar um espaço 3D como uma janela 2D no ecrã do teu computador. Então, existe naturalmente uma projeção envolvida para transferir de volta para 3D.

Deteção de colisão

Anteriormente, mencionamos os componentes Collider e Rigidbody, que podem ser adicionados a um objeto. A regra para colisões é que um objeto na colisão deve ter um rigidbody e o outro deve ter um collider (ou ambos terem os dois componentes). Repara que, ao utilizar raycasting, os raios vão interagir apenas com objetos com componentes collider anexados.

Assim que fizermos a configuração dentro de qualquer componente personalizado anexado ao objeto, podemos utilizar os métodos OnCollisionEnter, OnCollisionStay e OnCollisionExit para responder a colisões. Assim que tivermos a informação de colisão, podemos obter o GameObject responsável e utilizar o que aprendemos anteriormente para interagir também com componentes anexados a ele.

Uma coisa a ter em conta é que os rigid-bodies fornecem físicas como gravidade aos objetos. Então, se desejares desligar isto, vais precisar de marcar o is_kinematic.

Características avançadas

Não vamos abordar nada disto para já, mas talvez num artigo futuro — isso é apenas para ficares a par da sua existência.

Criar interfaces gráficas de utilizador (GUI)

O Unity tem um motor de UI completo para definir a GUI do teu jogo. Por norma, esses componentes funcionam de maneira muito semelhante ao resto do motor.

Estender o editor do Unity

O Unity permite-te adicionar botões personalizados aos teus inspetores para que possas afetar o mundo no modo de edição. Por exemplo, para ajudar com a construção do mundo, podes desenvolver uma janela personalizada de ferramentas para criar casas modulares.

Animação

O Unity tem um sistema de animação baseado em gráficos que te permite juntar e controlar animações em vários objetos, tais como jogadores a implementar um sistema de animação com base nos ossos.

Materiais e PBR

O Unity funciona num motor de renderização com base em físicas que permite ter luzes em tempo real e materiais realistas. A realidade é que vais aprender primeiro modelação 3D ou vais utilizar modelos já feitos e otimizados por alguém, de modo a criares algo que realmente tenha bom aspeto.

Dicas para principiantes

Se estiveres a planear criar o teu primeiro jogo, não subestimes a complexidade e o tempo que leva a escrever até o mais trivial dos jogos. Lembra-te que a maior parte dos jogos lançados na Steam têm equipas a trabalhar neles durante anos a tempo inteiro!

Escolhe um conceito simples e divide-o em pequenos objetivos alcançáveis. É altamente recomendado dividir o teu jogo em tantos componentes independentes quanto possível, pois é muito menos provável encontrares erros se mantiveres os componentes simples em vez de blocos de código monolíticos.

Antes de avançares para a escrita de qualquer código para qualquer parte do teu jogo, pesquisa o que outras pessoas fizeram antes para resolver o mesmo problema — é provável que tenham uma solução bastante mais otimizada.

Bons recursos e comunidades

O desenvolvimento de jogos tem uma das melhores comunidades de todas. Existem muitos profissionais altamente habilitados na indústria, que fornecem conteúdo gratuitamente ou por quase nada. É uma área que requer modeladores 3D, artistas conceptuais, designers de jogos, programadores e assim adiante. Abaixo, coloquei os links para alguns recursos gerais ótimos (em inglês) que encontrei para cada um desses campos:

Arte Conceptual

• Feng Zhu Design School (mais de 90 horas de tutoriais de arte conceptual)
• Tyler Edlin Art (ótima comunidade de arte BST com feedback de profissionais em desafios mensais)
• Art Cafe (entrevistas e workshops com artistas conceptuais famosos)
• Trent Kaniuga (ilustrador e artista 2D que também está a criar o seu próprio jogo)

Modelação 3D

• CG Cookie (melhores princípios básicos de malhas 3D no Blender – eles têm muitos outros excelentes conteúdos para o Blender)
• Tor Frick (modeladores de Hard Surface e escultores no Blender)
• Gleb Alexandrov (pequenos tutoriais potentes sobre renderização no Blender)

Desenvolvimento de jogos

• DoubleFine Amnesia Fortnight (programadores de jogos que fazem maratonas de duas semanas a programar e gravam todo o seu processo de design)
• GameMakers Toolkit (examina princípios de design de jogos)

Programação

• Série Handmade Hero no canal Molly Rocket (como criar um jogo e motor a partir do zero em C)
• Jonathan Blow (programador independente que faz livestreams do seu desenvolvimento de jogos)
• Brackeys (bons tutoriais de Unity)

Conclusão

Espero que tenhas gostado deste tutorial! Também faço um pouco de design gráfico, assim como protótipos de jogos e Interfaces de Utilizador.

Se o tutorial foi do teu agrado, dá uma vista de olhos ao portfólio do autor! Ele também está presente no LinkedIn.

Tradução em português europeu

Este artigo é um resumo do que estou a escrever no meu projeto mais recente, solidbook.io - The Handbook to Software Design and Architecture with TypeScript (link em inglês). Dá uma vista de olhos por lá se gostares desta publicação.

É uma loucura para mim considerar o facto do Facebook ter sido em tempos um ficheiro de texto vazio no computador de alguém. 🤣

Neste último ano, tenho-me esforçado muito em design e arquitetura de software, Design Orientado a Domínio (link em inglês) e a escrever um livro sobre isso, e queria tirar um tempo para tentar juntar as peças todas em algo útil que pudesse partilhar com a comunidade.

Aqui está o meu roteiro para como aprender design e arquitetura de software.

Dividi-o em duas partes: o stack (pilha) e o map (mapa).

O stack

De modo semelhante ao modelo OSI em redes, cada camada é construída sobre a base da camada anterior.

O map

Embora eu ache que a pilha é boa para ver o panorama geral de como tudo funciona em conjunto, o mapa é um pouco mais detalhado (e inspirado pelo roteiro do programador web – link em inglês) e, como resultado, penso que seja mais útil.

Aqui está ele! Para duplicar o repositório, ler a minha redação detalhada e fazer o download em alta resolução, clica aqui.

Nota da tradução: houve uma revisão do conteúdo em março deste ano. Caso deseje acessar o conteúdo mais recente (em inglês) acesse aqui.

Fase 1: código limpo

O primeiro passo em direção à criação de software duradouro é descobrir como escrever código limpo.

Código limpo é código que é fácil de compreender e alterar. Logo no início, isto manifesta-se em algumas escolhas de design como:

• Ser consistente
• Dar preferência a nomes significativos de variáveis, métodos e classes em vez de explicar em comentários
• Garantir que o código está corretamente indentado e espaçado
• Garantir que todos os testes possam ser executados
• Escrever funções puras sem efeitos secundários
• Não passar nulos

Escrever código limpo é incrivelmente importante

Pensa nisso como se fosse o jogo do Jenga.

De modo a manter a estrutura do nosso projeto estável ao longo do tempo, coisas como indentação, pequenas classes e métodos, e nomes significativos, compensam bastante a longo termo.

O melhor recurso para aprender como escrever código limpo é livro de Uncle Bob, "Código Limpo" (link em inglês).

Fase 2: paradigmas de programação

Agora que estamos a escrever código legível que é fácil de fazer a manutenção, seria uma boa ideia compreender realmente os 3 maiores paradigmas da programação e a maneira como influenciam o nosso modo de escrever código.

No livro de Uncle Bob, "Arquitetura Limpa" (link em inglês), ele destaca que:

• Programação Orientada a Objetos é a ferramenta mais adequada para definir como passamos limites arquitetónicos com polimorfismo e plugins
• Programação funcional é a ferramenta que utilizamos para enviar dados para os limites das nossas aplicações
• E programação estruturada é a ferramenta que utilizamos para escrever algoritmos

Isso implica que o software eficiente utiliza uma mistura de todos estes 3 estilos de paradigmas de programação em alturas diferentes.

Embora possas adotar uma abordagem estritamente funcional ou estritamente orientada a objetos para escrever código, compreender onde cada um deles se destaca melhorará a qualidade dos teus designs.

Se tudo o que tiveres for um martelo, tudo se parece com um prego.

Recursos

Para programação funcional, dá uma vista de olhos:

• Guia Maioritariamente Adequado do Professor Frisby para Programação Funcional (link em inglês)
• Modelação de Domínio Tornada Funcional (link em inglês)

Fase 3: programação orientada a objetos

É importante saber como cada um dos paradigmas funciona e como te incentivam a estruturar o código dentro deles, mas no que diz respeito à arquitetura, Programação Orientada a Objetos é claramente a ferramenta ideal para o trabalho.

A programação Orientada a Objetos não só nos permite criar uma arquitetura de plugin e criar flexibilidade nos nossos projetos; Programação Orientada a Objetos vem com 4 princípios de Programação Orientada a Objetos (encapsulamento, herança, polimorfismo e abstração) que nos ajudam a criar modelos de domínio ricos.

A maior parte dos programadores a aprender Programação Orientada a Objetos nunca chega a essa parte: aprender como criar uma implementação de software para o domínio do problema, e localizá-la no centro de uma aplicação web com camadas.

Programação funcional pode parecer a solução para todos os problemas nesse cenário, mas eu recomendo familiarizar-te com o design orientado a modelos e Design Orientado a Domínio para compreender o panorama de como os modeladores de objetos são capazes de encapsular um negócio completo com um modelo de domínio com zero dependências.

Por que é que isso é importante?

É muito importante porque, se podes criar um modelo mental de um negócio, podes criar uma implementação de software desse negócio.

Fase 4: princípios de design

Neste momento, a tua compreensão de que a Programação Orientada a Objetos é muito útil para encapsular modelos de domínio ricos e para resolver o terceiro tipo de "Problemas de Software Difíceis"– Domínios Complexos (link em inglês).

No entanto, a Programação Orientada a Objetos pode introduzir alguns desafios de design.

Onde devo utilizar composição?

Quando devo utilizar herança?

Quando devo utilizar uma classe abstrata?

Princípios de design são boas práticas muito bem estabelecidas e testadas que podes utilizar como segurança.

Alguns exemplos de princípios de design comuns com que te deves familiarizar são:

• Composição sobre herança
• Encapsular o que varia
• Programar contra abstrações, não concreções
• O princípio de Hollywood: "Não nos chames, nós chamamos-te"
• Os princípios SOLID, especialmente o princípio de responsabilidade singular
• DRY (Do Not Repeat Yourself – Não te Repitas, em português)
• YAGNI (You Aren't Gonna Need It, Não Vais Precisar Disso, em português)

Certifica-te de que alcanças as tuas próprias conclusões, no entanto. Não te limites a seguir o que outra pessoa diga que deves fazer. Certifica-te que faz sentido para ti.

Fase 5: padrões de design

Praticamente todos os problemas de software já foram categorizados e resolvidos em algum momento. Chamamos a esses padrões: padrões de design, na verdade.

Existem 3 categorias de padrões de design: criativo, estrutural e comportamental.

Criativo

Padrões criativos são padrões que controlam como os objetos são criados.

Exemplos de padrões criativos incluem:

• O padrão Singleton, para garantir que existe uma única instância de uma classe.
• O padrão Abstract Factory, para criar uma instância de várias famílias de classes.
• O padrão Prototype, para começar com uma instância que é clonada a partir de uma já existente.

Estrutural

Padrões estruturais que simplificam como definimos relações entre componentes.

Exemplos de padrões de design estruturais incluem:

• O padrão Adapter, para criar uma interface para acionar classes que normalmente não funcionam em conjunto, para funcionarem em conjunto.
• O padrão Bridge, para dividir uma classe que deve ser um ou mais, num conjunto de classes que pertencem a uma hierarquia, permitindo que as implementações sejam desenvolvidas de forma independente umas das outras.
• O padrão Decorator, para adicionar responsabilidades a objetos dinamicamente.

Comportamental

Padrões comportamentais são padrões comuns para facilitar comunicações elegantes entre objetos.

Exemplos de padrões comportamentais são:

• O padrão Template, para diferir os passos exatos de um algoritmo para uma subclasse.
• O padrão Mediator, para definir os canais de comunicação exatos permitidos entre classes.
• O padrão Observer, para habilitar classes para descrever algo de interesse e para notificar quando ocorrer uma alteração.

Criticas sobre o padrão de design

Padrões de design são bons, mas por vezes podem trazer complexidade extra aos nossos designs. É importante lembrar o YAGNI e tentar manter os nossos designs tão simples quanto possível. Utiliza apenas padrões de design quando tiveres mesmo a certeza que precisas deles. Saberás quando for o momento.

Se soubermos o que cada um destes padrões faz, quando utilizá-los, e quando nem sequer nos preocuparmos em utilizá-los, estaremos em boa forma para começar a compreender como fazer a arquitetura de sistemas complexos.

A razão por trás disso é que padrões arquitetónicos são simplesmente padrões de design com a escala elevada para alto nível, enquanto que os padrões de design são implementações de baixo nível (mais próximas a classes e funções).

Recursos

Refactoring Guru - Padrões de Design (link em inglês)

Fase 6: princípios arquitetónicos

Agora estás num nível de pensamento mais elevado do que o nível de classe.

Compreendemos que as decisões que tomamos para organizar e criar relações entre componentes, a nível elevado e a nível baixo, vão ter um impacto significativo na facilidade de manutenção, flexibilidade e capacidade de testagem do nosso projeto.

Aprende os princípios orientadores que te ajudam a criar a flexibilidade que o teu código-base necessita para ser capaz de reagir a novas funcionalidades e exigências, com o mínimo esforço possível.

Aqui está o que eu recomendo que aprendas logo à partida:

• Princípios de design de componentes: o Princípio de Abstração Estável (link em inglês), o Princípio de Dependência Estável (link em inglês), e o Princípio de Dependência Acíclica, para como organizar componentes, as suas dependências, quando juntá-las, e as implicações de criar acidentalmente ciclos de dependência e depender de componentes instáveis.
• Política x Detalhe (Link em inglês), para compreender como separar as regras da tua aplicação a partir dos detalhes de implementação.
• Limites e como identificar os subdomínios a que as funcionalidades da tua aplicação pertencem.

O Uncle Bob descobriu e documentou originalmente muitos destes princípios. Então, o melhor recurso para aprender isto é, novamente, "Arquitetura Limpa" (link em inglês).

Fase 7: estilos arquitetónicos

Arquitetura é sobre as coisas que importam.

É sobre identificar as necessidades do sistema de maneira a que este seja bem-sucedido e de seguida aumentar as hipóteses de sucesso ao escolher a arquitetura que melhor se adequa aos requisitos.

Por exemplo, um sistema que tem muita complexidade de lógica de negócio beneficiaria da utilização de uma arquitetura por camadas para encapsular essa complexidade.

Um sistema como a Uber precisa de ser capaz de lidar com muitos eventos em tempo real de uma só vez e atualizar a localização do condutor, então, um estilo de arquitetura publicar-subscrever poderia ser o mais eficaz.

Vou-me repetir a mim mesmo aqui porque é importante observar que as 3 categorias de estilos arquitetónicos são semelhantes às 3 categorias de padrões de design, porque estilos arquitetónicos são padrões de design de alto nível.

Estrutural

Projetos com níveis variantes de componentes e grande intervalo de funcionalidades beneficiarão ou serão prejudicados pela adopção de uma arquitetura estrutural.

Aqui estão alguns exemplos:

• Arquiteturas com base em componentes enfatizam separação de preocupações entre os componentes individuais dentro de um sistema. Imagina a Google por um segundo. Considera quantas aplicações eles têm dentro da empresa (Google Docs, Google Drive, Google Maps, etc). Para plataformas com muitas funcionalidades, arquiteturas com base em componentes dividem as preocupações em componentes independentes vagamente agrupados. Isto é uma separação horizontal.
• Monolítico significa que a aplicação é combinada numa única plataforma ou programa, implementada completamente. Observação: podes ter uma arquitetura com base em componentes E monolítica se separares as tuas aplicações adequadamente, enquanto implementas tudo em conjunto.
• Arquiteturas por camadas separam verticalmente as preocupações ao dividir o software em camadas de infraestrutura, aplicação e domínio.

Um exemplo de corte das responsabilidades/preocupações de uma aplicação de modo vertical usando uma arquitetura de camadas. Lê aqui (texto em inglês) para obter mais informações sobre como fazer isso.

Mensagens

Dependendo do teu projeto, enviar mensagens pode ser um componente realmente importante para o sucesso do sistema. Para projetos como esse, arquiteturas com base em mensagens criadas sobre princípios de programação funcional e padrões de design comportamental como o padrão observer.

Aqui estão alguns exemplos de estilos de arquiteturas com base em mensagens:

• Arquiteturas Orientadas por Eventos vêm todas as alterações significativas a estados como eventos. Por exemplo, numa aplicação de venda de discos de vinil, o estado de uma oferta pode alterar de "pendente" para "aceite" quando ambas as partes concordam com a troca.
• Arquiteturas Publicar-subscrever são criadas sobre o padrão de design Observer ao fazer com que seja o método de comunicação principal entre o próprio sistema, utilizadores finais/clientes, e outros sistemas e componentes.

Distributivo

Uma arquitetura distributiva significa simplesmente que os componentes do sistema são implementados separadamente e operam ao comunicar num protocolo de rede. Sistemas distributivos podem ser muito eficazes para escalar a taxa de transferência, escalar equipas e delegar (tarefas potencialmente caras) responsabilidades a outros componentes.

Alguns exemplos de estilos de arquiteturas distributivas são:

• Arquitetura client-servidor. Uma das arquiteturas mais comuns, onde dividimos o trabalho a ser feito entre o client (apresentação) e o servidor (lógica de negócio).
• Arquiteturas ponto-a-ponto distribuem tarefas de camada de aplicação entre participantes igualmente privilegiados, formando uma rede ponto-a-ponto.

Fase 8: padrões arquitetónicos

Padrões arquitetónicos explicam em grande detalhe tático como realmente implementar um destes estilos arquitetónicos.

Aqui estão alguns exemplos de padrões arquitetónicos e os estilos que estes herdam:

• Design Orientado a Domínio é uma abordagem ao desenvolvimento de software para problemas de domínio realmente complexos. Para que o design orientado a domínio seja bem-sucedido, precisamos de implementar uma arquitetura de camadas de maneira a separar as preocupações de um modelo de domínio dos detalhes infra-estruturais que fazem a aplicação realmente executar, como bases de dados, servidores web, caches etc.
• Controlador Modelo-Vista é provavelmente o padrão arquitetónico mais conhecido para desenvolver aplicações baseadas na interface de utilizador. Funciona ao dividir a aplicação em 3 componentes: modelo, vista e controlador. O controlador modelo-vista é incrivelmente útil quando estás no início e ajuda-te a aproveitar outras arquiteturas, mas existe uma altura em que percebemos que o controlador Modelo-Vista não é suficiente para problemas com muita lógica de negócio.
• Fornecimento de eventos é uma abordagem funcional onde armazenamos apenas as transações e nunca o estado. Se alguma vez precisarmos do estado, podemos aplicar todas as transações desde o início.

Fase 9: padrões empresariais

Qualquer padrão arquitetónico que escolhas introduzirá um número de construções e linguagem especializada para te familiarizares e decidir se vale a pena o esforço ou não.

Ao pegar num exemplo que muitos de nós conhecemos, no Controlador Modelo-Vista, a vista armazena todo o código da camada de apresentação, o controlador é comandos de tradução e consultas da vista para pedidos que são tratados pelo modelo e retornados pelo controlador.

Em que parte do Modelo (M) lidamos com estas coisas?:

• Lógica de validação
• Regras invariáveis
• Eventos de domínio
• Casos de utilização
• Consultas complexas
• E lógica empresarial

Se simplesmente utilizarmos um ORM (object-relational mapper) como Sequelize ou TypeORM como o modelo, todas essas coisas importantes são deixadas para interpretação onde devem estar, e acabam por ficar numa capada não especificada entre o (que deveria ser um rico) modelo e o controlador.

Retirado de "3.1 - Slim (Logic-less) models" em solidbook.io (link em inglês).

Se existe alguma coisa que eu tenha aprendido até agora na minha jornada para lá do controlador modelo-vista, é que existe uma construção para tudo.

Para cada uma destas coisas em que o Controlador Modelo-Vista falha em abordar, existem outros padrões empresariais para resolvê-las. Por exemplo:

• Entidades (link em inglês) descrevem modelos que têm uma identidade.
• Objetos de valor (link em inglês) são modelos que não têm identidade e podem ser utilizados de modo a encapsular a lógica de validação.
• Eventos de domínio (link em inglês) são eventos que significam algum evento empresarial relevante a acontecer e podem ser subscritos de outros componentes.

Com base no estilo arquitetónico que tiveres escolhido, vão existir muitos outros padrões empresariais para aprenderes de maneira a implementar esse padrão no seu potencial máximo.

Padrões de integração

Assim que a tua aplicação estiver operacional, à medida que recebes mais e mais utilizadores, podes obter alguns problemas de desempenho. Chamadas de API podem demorar muito tempo, os servidores podem quebrar por estares sobrecarregados de pedidos etc. Para resolver esses problemas, podes ler sobre a integração de coisas como consulta de mensagens ou caches de modo a melhorar o desempenho.

Estas são provavelmente as coisas mais desafiantes: escalar, auditar e desempenho.

Desenhar um sistema para escala pode ser incrivelmente desafiante. Isto requer uma compreensão profunda sobre as limitações de cada componente dentro da arquitetura e um plano de ação para como mitigar o stress na tua arquitetura e continuar a servir pedidos em situações de grande tráfego.

Existe também a necessidade de auditar o que está a acontecer na tua aplicação. Grandes empresas precisam de ser capazes de fazer auditorias de modo a identificar potenciais problemas de segurança, compreender como os utilizadores estão a utilizar as suas aplicações, e ter um registo de tudo o que aconteceu até agora.

Isso pode ser desafiante de implementar, mas as arquiteturas comuns acabam por parecer baseadas em eventos e são criadas sobre uma grande variedade de conceitos de design de software e sistemas, princípios e práticas como Event Storming, DDD, CQRS (command query response segregation) e Event Sourcing.

Traduzido em português europeu.

O Python é uma linguagem de programação de utilização geral, que é escrita e interpretada dinamicamente, conhecida pela sua fácil legibilidade com ótimos princípios de design.

O freeCodeCamp tem um dos cursos mais populares sobre Python. É completamente gratuito (e também não tem quaisquer anúncios, basta estar conectado à plataforma). Podes, também, assistir ao curso no YouTube.

Queres aprender mais?

A internet é um sítio vasto, existe muito mais para explorar (links em inglês):

• Livro prático de Python: http://anandology.com/python-practice-book/index.html
• Pensa em Python: http://greenteapress.com/thinkpython/html/index.html
• Python prático para negócios: http://pbpython.com/
• Outro curso: https://realpython.com/?utmsource=fsp&utmmedium=promo&utm_campaign=bestresources
• Generalidade: https://www.fullstackpython.com/
• Aprenda os fundamentos: https://www.codecademy.com/learn/learn-python
• Ciência computacional utilizando Python: https://www.edx.org/course/introduction-computer-science-mitx-6-00-1x-11?ref=hackernoon#!
• Lista de mais recursos para aprender Python: https://github.com/vinta/awesome-python
• Python interativo: http://interactivepython.org/runestone/static/thinkcspy/index.html
• Manual do programador para Python: https://devguide.python.org/

Para que é utilizado o Python?

O Python pode ser facilmente utilizado para projetos pequenos, grandes, on-line e off-line. As melhores opções para utilizar Python são a programação para a web, criação simples de scripts e análise de dados. Abaixo estão alguns exemplos do que o Python permitirá fazer:

Programação para a web:

Podes utilizar o Python para criar aplicações para a web de vários níveis de complexidade. Existem muitas frameworks de Python para a web, incluindo Pyramid, Django e Flask, para mencionar algumas.

Análise de dados:

O Python é a principal escolha em termos de linguagem para muitos cientistas de dados. O Python cresceu em popularidade neste ramo devido à disponibilidade de várias bibliotecas excelentes focadas em ciências de dados (das quais, NumPy e Pandas são duas das mais conhecidas) e visualização de dados (como Matplotlib e Seaborn). O Python tornou o processamento de dados interessante com todas as suas inúmeras bibliotecas disponíveis. Ipython com JupyterLab é outra forma de Python que melhora a utilização de Python no ramo da ciência de dados.

Automatização:

Python é uma linguagem muito flexível que pode ser utilizada para automatizar tarefas aborrecidas e repetitivas. Administradores de sistemas utilizam-na geralmente ao escrever scripts que podem ser facilmente executados no terminal. O Python também pode ser utilizado para criar bots que automatizam algumas das nossas tarefas diárias.

Inteligência artificial:

O Python também é utilizado extensivamente no ramo emergente da Inteligência Artificial (IA). A Google selecionou o Python como uma das primeiras linguagens de programação bem suportadas para treinar e interagir com modelos, utilizando o Tensorflow.

Desenvolvimento de aplicações para dispositivos móveis

Podem ser criadas aplicações para dispositivos móveis e jogos com Python através da utilização de Kivy, Pygame e PyQt.

Segurança e rede:

O Python é utilizado para criar ferramentas de rede e segurança que são utilizadas amplamente. A automatização remota do Python é a mais segura, rápida e eficaz para testes de frameworks na cloud. É por isso que programadores profissionais utilizam Python para criar as frameworks mais seguras e para programação de sockets.

Machine Learning, Deep Learning

Python é uma das melhores linguagens adequadas para machine learning, deep learning e análises de dados, com uma forte eficácia em todos eles.

Existem linguagens especializadas mais adequadas para vários papéis, como R e MATLAB, mas, no que diz respeito a combinar vários ramos de aplicações, o Python vence facilmente devido à sua flexibilidade, rápida criação de protótipos e disponibilidade de bibliotecas.

Desenvolvimento de bots para o Telegram

Podes utilizar Python e algumas bibliotecas do Python para desenvolver os teus próprios Bots do Telegram (link em inglês).

Obtenção de dados através de gathering e scraping

O Python também pode ser utilizado para analisar o código-fonte das páginas e obter a sua informação. Utilizar alguns módulos do Python, tais como o Scrapy e também (para algumas páginas que utilizam JavaScript) o Selenium deve resolver o problema!

O Python é geralmente utilizado para:

• Desenvolvimento para a web e Internet
• Progresso educacional
• Estudos/computações científicos
• Desenvolvimento para desktop
• Computação numérica
• Desenvolvimento de software
• Desenvolvimento de aplicações empresariais
• Machine Learning
• IOT (Internet Of Things)
• Desenvolvimento de jogos
• Prototipagem rápida
• Automatização de browser
• Análise de dados
• Obter dados de websites
• Processamento de imagens

Alguns artigos que abordam a utilidade do python

• 10 Major Uses of Python (10 principais utilizações do Python, link em inglês)
• Applications for Python (Aplicações para Python, link em inglês)
• Where is the Python Language Used? (Onde é utilizada a linguagem Python?, link em inglês)
• What is Python used for? (Para que é utilizado o Python?, link em inglês)

O índice oficial de pacotes para o Python está aqui (link em inglês).

Deves utilizar Python 2 ou Python 3?

As duas versões são semelhantes. Se conheceres uma delas, trocar para escrever código na outra é fácil.

• Python 2.x não recebe mais manutenção desde 2020 (link em inglês).
• 3.x está em desenvolvimento ativo. Isto quer dizer que todas as melhorias recentes de bibliotecas predefinidas, por exemplo, estão apenas disponíveis por defeito na versão Python 3.x.
• O ecossistema do Python acumulou uma quantidade significativa de software de qualidade ao longo dos anos. A desvantagem de quebrar a compatibilidade com versões anteriores ao 3.x é que alguns desses softwares (especialmente software interno em empresas) ainda não funcionam na versão 3.x.

Instalação

A maior parte dos sistemas operativos com base *nix já trazem o Python instalado (geralmente o Python 2, ou Python 3 nos mais recentes). Substituir a instalação predefinida do Python no teu sistema não é recomendado e pode causar problemas. No entanto, podem ser instaladas diferentes versões do Python em segurança, juntamente com a versão predefinida do teu sistema. Ver Configuração do Python e utilização (link em inglês).

O Windows não vem com o Python instalado, mas o instalador e as instruções de instalação podem ser encontradas aqui (link em inglês).

Intérprete de Python

O intérprete de Python é o que é utilizado para executar scripts de Python.

Se este estiver disponível e no caminho de pesquisa da linha da shell do Unix, é possível iniciá-lo ao escrever o comando python, seguido pelo nome do script. Isto invocará o intérprete e executar o script.

hello_campers.py

print('Hello campers!')

A partir do terminal:

$ python hello_campers.py
Hello campers!

Quando estão instaladas várias versões do Python, é possível chamar o intérprete por versão, dependendo da configuração da instalação. No ambiente personalizado do IDE Cloud9, podem ser invocados da seguinte forma:

$ python --version
Python 2.7.6
$ python3 --version
Python 3.4.3
$ python3.5 --version
Python 3.5.1
$ python3.6 --version
Python 3.6.2 
$ python3.7 --version
Python 3.7.1

Modo interativo do intérprete de Python

O modo interativo pode ser iniciado ao invocar o intérprete de Python com a flag -i ou sem qualquer argumento.

O modo interativo tem uma prompt onde podem ser inseridos e executados comandos de Python:

$ python3.5
Python 3.5.1 (default, Dec 18 2015, 00:00:00)
GCC 4.8.4 on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> print("Hello campers!")
Hello campers!
>>> 1 + 2
3
>>> exit()
$

O Zen do Python

Alguns dos princípios que influenciaram o design do Python estão incluídos como extra e podem ser lidos ao utilizar o comando dentro do modo interativo do intérprete de Python:

>>> import this
O Zen do Python, escrito por Tim Peters

Bonito é melhor que feio.
Explícito é melhor que implícito.
Simples é melhor que complexo.
Complexo é melhor que complicado.
Linear é melhor do que aninhado.
Esparso é melhor que denso.
Legibilidade conta.
Casos especiais não são especiais o bastante para quebrar as regras.
Ainda que praticidade vença a pureza.
Erros nunca devem passar silenciosamente.
A menos que sejam explicitamente silenciados.
Diante da ambiguidade, recuse a tentação de adivinhar.
Deveria haver um — e preferencialmente só um — modo óbvio para fazer algo.
Embora esse modo possa não ser óbvio a princípio a menos que você seja holandês.
Agora é melhor que nunca.
Embora nunca frequentemente seja melhor que já.
Se a implementação é difícil de explicar, é uma má ideia.
Se a implementação é fácil de explicar, pode ser uma boa ideia.
Namespaces são uma grande ideia — vamos ter mais dessas!

Prós e contras do Python

Prós

1. Linguagem interativa com suporte de módulo para quase todas as funcionalidades.
2. Código aberto: portanto, podes contribuir para a comunidade com as funções que desenvolveres para utilização futura e para ajudar outros.
3. Muitos bons intérpretes e notebooks disponíveis para uma melhor experiência, como o Jupyter Notebook.

Contras

1. Sendo de código aberto, foram desenvolvidas muitas formas diferentes das mesmas funções ao longo dos anos. Isso, por vezes, cria caos quando outras pessoas leem o código de outra pessoa.
2. É uma linguagem lenta. Por isso, é uma linguagem muito má para desenvolver algoritmos comuns.

Documentação

O Python está bem documentado (link em inglês). Esses documentos incluem tutoriais, guias, referências e informações chave da linguagem.

Outra referência importante são as Python Enhancement Proposals (PEPs –Propostas de Melhoria do Python, em português). Incluído nas PEPs está um guia de estilos para escrever código Python, o PEP 8 (link em inglês).

Depuração

Podem ser utilizadas instruções print em linha para depurações simples:

… por vezes, a forma mais rápida de depurar um programa é adicionar algumas instruções print ao código: o ciclo rápido de edição-teste-depuração torna esta abordagem muito eficaz.

Sumário executivo (link em inglês)

O Python também inclui ferramentas mais potentes para depuração, tais como:

• módulo de registo, logging (link em inglês)
• módulo de depuração, pdb (link em inglês)

Por enquanto, tem apenas em mente que elas existem.

Olá, mundo!

Voltando à documentação, podemos ler sobre a função print, uma função integrada (link em inglês) da Biblioteca Predefinida do Python (link em inglês).

print(*objects, sep=' ', end='\n', file=sys.stdout, flush=False)

As funções integradas estão listadas por ordem alfabética. O nome é seguido por uma lista entre parênteses de parâmetros formais com valores predefinidos opcionais. Por baixo disso, é fornecida uma breve descrição da função e dos seus parâmetros e existe, ocasionalmente, um exemplo.

A função print do Python 3 substitui a instrução print do Python 2.

>>> print("Olá, mundo!")
Olá, mundo!

Uma função é chamada quando o nome da função é seguido por (). Para o exemplo Olá, mundo!, a função print é chamada com uma string como argumento para o primeiro parâmetro. Para os restantes parâmetros, são utilizados os valores predefinidos.

O argumento com que chamamos a função print é um objeto str, ou string, um dos tipos integrados do Python. Além disso, a coisa mais importante sobre Python é que não precisas de especificar o tipo de dados quando declaras uma variável. O compilador do Python, ele próprio, fará isso com base no tipo do valor atribuído.

O parâmetro objects tem um * como prefixo, que indica que a função receberá um número arbitrário de argumentos para esse parâmetro.

Traduzido em português europeu

Escrito por: Nikita Kholin

O Telegram é uma ótima plataforma com muitos utilizadores – eu próprio sou um utilizador do Telegram. Qual seria a melhor forma para os utilizadores do Telegram receberem notificações? Não podemos ter a certeza. Talvez gostem de receber por e-mail ou de outro forma, mas podemos supor que enviar notificações para o Telegram seria bastante conveniente.

Se gostarias de enviar notificações para o Telegram a partir da tua aplicação, vieste ao sítio certo. Adicionei esta funcionalidade à minha aplicação e adorei.

Uma pequena nota: neste artigo, forneci exemplos de código em Python. As ideias, contudo, não são específicas para o Python e podem ser traduzidas para outra linguagem sem qualquer problema.

Então, sem mais demoras, vamos ver como podemos fazê-lo.

Criar um bot do Telegram

Em primeiro lugar, precisas criar um bot do Telegram. Para fazer isto, tens de utilizar outro bot do Telegram, o BotFather. Começa a falar com ele (clica em start).

Agora, podes ver o que ele pode fazer, mas o que nos interessa é criar um novo bot. Por isso, vamos escolher (/newbot).

Vamos descobrir rapidamente que o nome do bot deve terminar com "bot". E, visto que és como eu e chegaste à festa muito tarde, maior parte dos nomes de bot já estão ocupados.

Eventualmente, porém, vais encontrar um nome para o teu bot e receber um token de acesso de que vamos precisar.

Agora que tens um bot, os utilizadores do Telegram podem encontrá-lo e utilizá-lo, mas há um problema — não podes associar os utilizadores que vêm do Telegram aos utilizadores da tua aplicação. Permite-me mostrar-te a razão.

Assim que um utilizador clicar no botão "Start" no teu bot, vais receber uma "atualização". Podes verificar todas as atualizações do bot até mesmo no teu browser ao visitar o seguinte URL: https://api.telegram.org/bot{bot_token}/getUpdates (não te esqueças de utilizar o teu token de acesso no URL). Isto é o que obtive:

Não consegues ler nada? Não te preocupes. Podes corrigir isso ao instalar alguma extensão JSON prettifier no teu navegador. Eu utilizo o JSON Formatter para o Chrome. Tem um aspeto muito melhor.

Então, como podes ver, não recebemos grande informação sobre a pessoa. A partir dessa informação, podes obter o nome completo da pessoa. Seria, no entanto, uma sorte se o utilizador fornecesse o seu nome completo na tua aplicação, e não temos garantia que seja único. Por isso, não podemos utilizar isso para encontra um utilizador nas tuas aplicações.

Outra informação que obtemos é o nome de utilizador. Isto é mais útil porque é único entre todos os utilizadores do Telegram. O mais provável, porém, é que não tenhas isso disponível nas tuas aplicações. Então, teríamos de pedir ao utilizador para inserir o seu nome de utilizador algures na aplicação. É muito trabalho que não tenho a certeza se alguém o faria.

Outra opção para associar um utilizador seria pedir-lhes para fornecer o e-mail que utilizaram para o bot na tua aplicação. Ocorre que isso tem muitas falhas: o utilizador pode enganar-se ao escrever o e-mail, o utilizador pode inserir um e-mail de outro utilizador para se aproveitarem do sistema. Isso é muito mau.

Podemos fazer melhor?

Associar um utilizador

Claro que podemos. Para associar o utilizador, vamos utilizar uma técnica chamada deep linking (texto em inglês).

Primeiro, tens de criar um token aleatório único para cada utilizador. Utilizei o seguinte código para gerar o token, utilizando Python:

from secrets import token_url
safetoken = token_urlsafe(8)
token
# => 'uEDbtJFHxKc'

De seguida, precisas guardar esse token para ser possível encontrar um utilizador com o token mais tarde. Podes guardar o token na tua base de dados ou utilizar outro local, como por exemplo uma cache. Tenho um modelo Notification, por isso adicionei um campo a uma tabela do modelo.

class Notification(models.Model):
	user = models.ForeignKey(User, on_delete=models.CASCADE)
    	# ...
    connect_token = models.CharField(max_length=64, null=True)

Então, geramos o token uEDbtJFHxKc e guardamo-lo. Agora, vamos ter de utilizar este token num URL para o bot do Telegram, que o utilizador tem de clicar para fazer com que tudo funcione:

telegram_url = 'https://www.telegram.me'
bot_name = 'music_notification_bot'
token = 'uEDbtJFHxKc'
url = f'{telegram_url}/{bot_name}?start={token}'

Agora que temos o nosso URL, 'https://telegram.me/music_notification_bot?start=uEDbtJFHxKc', está na hora de o exibir ao utilizador. Exibe-o em qualquer sitio da tua aplicação e aguarda que o utilizador clique nele.

Assim que o utilizador morder o isco e clicar em “Start”, deves receber outra atualização:

{
    "ok": true,
    "result": [
        // ...
        // atualizações anteriores
       	// ...
		{
			"update_id": 599162365,
			"message": {
                "message_id": 174,
                "from": { ... },
                "chat": { ... },
                "date": 1549788357,
                "text": "/start uEDbtJFHxKc",
                "entities": [ ... ]
        	}
        }
    ]
}

Podemos, finalmente, identificar o nosso utilizador. O campo text contém agora o nosso token de utilizador. Vamos avançar e removê-lo deste campo:

bot_token = 'your_bot_token'
updates_url = f'https://api.telegram.org/bot{bot_token}/getUpdates'

import requests
response = requests.get(updates_url).json()
text = response['result'][0]['message']['text']
text
# => '/start uEDbtJFHxKc'

splitted_text = text.split(' ')
# => ['/start', 'uEDbtJFHxKc']

token = splitted_text[-1]
# => 'uEDbtJFHxKc'

Este token pode ser utilizado para encontrar o utilizador. A tua implementação depende da forma como guardaste o token inicialmente. Mas aqui fica como eu faço:

notification = Notification.objects.get(channel='telegram', connect_token=token)
user = notification.user

Então, o utilizador clicou no botão "Start", mas reparou que nada aconteceu. Vamos dar as boas vindas, pelo menos.

Para dar as boas vindas ao utilizador, precisamos de descobrir se o utilizador iniciou uma conversa com o nosso bot. Existem duas opções para como podemos fazer isso: polling e webhooks.

Já sabes o que é polling. Já o fizeste. Ou pelo menos já me viste a fazê-lo. Assim que consultamos a página https://api.telegram.org/bot{bot_token}/getUpdates, fizemos uma poll. Polling é verificar constantemente se existem atualizações, a cada 2 segundos, por exemplo. Desta forma podemos saber sempre quando alguém interagiu com o bot.

Os Webhooks vão numa direção um pouco diferente. Em vez de verificar a cada 2 segundos se existem atualizações, simplesmente esperamos que aconteça uma atualização. Quando acontecer, o Telegram enviará um pedido com a informação da atualização para um URL que especificamos. Deste modo, podemos dar algum descanso tanto aos nossos servidores como aos do Telegram, e simplesmente esperar que chegue alguma atualização.

Polling pode ser melhor se tiveres um tráfego elevado mas, infelizmente, é uma exceção, por isso, decidimos utilizar o webhook.

Webhooks

Configurar um webhook no Telegram é muito fácil. Só tens de enviar um pedido para https://api.telegram.org/bot{bot_token}/setWebhook?url={your_server_url}. Abrir este link no teu browser também funciona. your_server_url é o URL para onde o Telegram enviará as atualizações. Aqui está o que deves obter como resposta:

{
    "ok": true,
    "result": true,
    "description": "Webhook was set"
}

Se não confiares nas tuas capacidades, podes visitar https://api.telegram.org/bot{bot_token}/getWebhookInfo apenas para verificar que está tudo OK. Deves ver algo como isto:

{
    "ok": true,
    "result": {
        "url": "https://example.com/your_server_endpoint",
        "has_custom_certificate": false,
        "pending_update_count": 0,
        "max_connections": 40
    }
}

Agora, se algo não estiver OK (como teres colocado o URL errado), podes sempre remover o webhook ao visitar https://api.telegram.org/bot{bot_token}/deleteWebhook e de seguida, configurar novamente o webhook.

Desenvolvimento local

Antes de avançar, gostaria de partilhar algumas palavras sobre o desenvolvimento local. Os webhooks não são muito adequados para isto. Os webhooks são enviados para um URL e muito provavelmente não sabes qual é o URL do teu computador. Além disso, um webhook do Telegram requer que o URL seja seguro (HTTPS).

Existe, no entanto, uma solução para este problema: ngrok. ngrok é uma ferramenta que expõe o teu ambiente local ao mundo. Descarrega o ngrok, faz a instalação e inicia-o com a porta em que o teu servidor está a executar. O meu servidor está a executar na porta 8000, por isso, teria de executar o seguinte na consola

/path/to/ngrok http 8000

Depois, o ngrok deve fornecer-te um URL que podes utilizar para configurar um webhook.

Dar as boas vindas a um utilizador

Agora que tens tudo pronto para o desenvolvimento, vamos dar as boas vindas ao nosso utilizador — está à espera disso.

Assim que o utilizador clicar em "Start", o teu Telegram enviará uma atualização para o URL do teu servidor. As partes interessantes da atualização devem ter este aspeto:

{
    "message": {
        "chat": {
            "id": 457
        },
		"text": "/start uEDbtJFHxKc",
    }
}

Esta é a altura ideal para associar o utilizador através de uma mensagem de texto. Também existe um pedaço de informação interessante, ID de Chat. O ID de Chat é o que precisamos para enviar uma mensagem a esse utilizador. O Telegram tem um endpoint de  API para enviar uma mensagem, que tem este aspeto: https://api.telegram.org/bot{bot_token}/sendMessage?chat_id={chat_id}&text={text}. Não tenho a certeza se preciso de explicar como utilizá-lo, mas aqui está como fica o meu código que processa o webhook:

import json
import requests

def callback(request):
    body = json.loads(request.body)
    text = body['message']['text']
    token = text.split(' ')[-1]
    associate_user_by_token(token)

    bot_key = os.environ.get('TELEGRAM_API_KEY')
    chat_id = body['message']['chat']['id']
	text = "Welcome!"

	send_message_url = f'https://api.telegram.org/bot{bot_key}/sendMessage?chat_id={chat_id}&text={text}'
	requests.post(send_message_url)

Se enviarmos uma mensagem de boas vindas depois do utilizador ter clicado no famoso botão de "Start", o utilizador não terá dúvidas sobre o funcionamento da aplicação.

Enviar notificações

Por fim, chegamos à razão pela qual estamos a fazer tudo isto — enviar notificações. Podes querer notificar o utilizador sobre algo que tenha acontecido na tua aplicação. Por exemplo, alguém colocou um gosto na publicação do utilizador, ou algo do género. Eu utilizo o Telegram para enviar notificações sobre novos lançamentos de músicas dos artistas favoritos do utilizador.

Já sabes como enviar notificações. Apenas precisas enviar uma mensagem utilizando https://api.telegram.org/bot{bot_token}/sendMessage?chat_id={chat_id}&text={notification_text}.

Claro, se não estiveres a planear enviar notificações só quando o utilizador interage com o bot, vais ter de guardar o chat_id na tua base de dados.

Também podes querer incluir links ou outro tipo de formatações na tua mensagem. Neste caso, é necessário adicionares outro parâmetro ao URL de envio da mensagem, o parse_mode. Existem duas opções de parsing: Markdown ou HTML. Eu utilizei Markdown porque acho mais simples de utilizar. Se não estiveres à vontade com Markdown, podes utilizar HMTL, mas recomendo que leias quão fácil é realmente o Markdown (texto em inglês).

Aqui está o aspeto do URL de envio da mensagem com o parâmetro parse_mode: https://api.telegram.org/bot{bot_token}/sendMessage?chat_id={chat_id}&text={notification_text}&parse_mode=markdown.

Eu adiciono links para novas atualizações ao texto das notificações desta forma: {release.date}: {release.artist.name} - [{release.title}]({release.url}). Podes ler mais sobre como formatar as tuas mensagens aqui (Link em Inglês).

Além disso, existem mais parâmetros disponíveis para o URL de envio da mensagem, como por exemplo o disable_notification. Existe sempre algo a ser explorado.

Conclusão

Agora, deves saber como:

• Criar um bot no Telegram utilizando o BotFather
• Verificar se existem atualizações (e qual é a melhor forma de o fazer — webhooks ou polling)
• Associar utilizadores utilizando deep linking
• Enviar uma mensagem de boas vindas e continuar a enviar notificações
• Formatar as mensagens que envias

Espero que este artigo tenha sido útil para ti. Esta é a quinta parte de uma série de artigos sobre o MuN (link em inglês). Fica atento/a à parte 6. Podes encontrar o código deste projeto, assim como os meus outros projetos na minha página do GitHub. Segue o autor se tiveres gostado deste artigo.

Publicado originalmente em https://kholinlabs.com/telegram-push-notifications, a 12 de Fevereiro de 2019.

Tradução em português europeu

O React é um dos frameworks mais populares do JavaScript alguma vez criados, e acredito que seja uma das melhores ferramentas que anda por aí.

O objetivo deste manual é fornecer um guia inicial para aprender React.

Nota da tradução: grande parte dos conceitos trabalhados neste manual seguem válidos para todas as versões de React. No entanto, é importante reforçar que, desde a concepção do artigo original, o React passou por atualizações e é possível que algumas das soluções oferecidas aqui estejam diferentes em versões mais recentes.

No final deste manual, terás conhecimentos básicos sobre:

• O que é o React e porque é tão popular
• Como instalar o React
• Componentes do React
• State do React
• Props do React
• Manipulação de eventos de utilizador em React
• Eventos de ciclo de vida num componente do React

Estes tópicos serão a base sobre a qual construirás em outros tutoriais de React mais avançados.

Este manual é escrito especialmente para programadores de JavaScript que estão a começar com o React. Por isso, vamos começar.

O que é React?

O React é uma biblioteca do JavaScript que tem o objetivo de simplificar o desenvolvimento de interfaces visuais.

Desenvolvido pela Facebook e lançado ao mundo em 2013, ele impulsiona algumas das aplicações mais utilizadas no mundo, potenciando o Facebook e o Instagram, entre outras inúmeras aplicações.

O seu objetivo principal é facilitar o raciocínio sobre uma interface e o seu estado (em inglês, state), a qualquer momento. O React faz isso ao dividir a UI (Interface de Utilizador, em português) numa coleção de componentes.

Podes enfrentar algumas dificuldades iniciais ao aprender React. Porém, assim que fizer o "clique", garanto-te que será uma das melhores experiências que terás. O React facilita muitas coisas e o seu ecossistema está repleto de óptimas bibliotecas e ferramentas.

O React por si só tem uma API muito pequena e, basicamente, precisas compreender quatro conceitos para começar:

• Componentes
• JSX
• State
• Props

Vamos explorar todos eles neste manual e vamos deixar os conceitos mais avançados para outros tutoriais. Irei fornecer algumas dicas na última secção sobre como seguir em frente.

Podes também fazer o download deste manual em PDF / ePub / formato Mobi gratuitamente.

Resumo do manual

• Quanto JavaScript precisas saber para utilizar o React
• Porque deves aprender React?
• Como instalar o React
• Componentes do React
• Introdução ao JSX
• Utilizar JSX para compor uma UI
• A diferença entre JSX e HTML
• Incorporar JavaScript em JSX
• Gerir o state em React
• Props de componente em React
• Fluxo de dados numa aplicação em React
• Lidar com eventos de utilizador em React
• Eventos de ciclo de vida num componente React
• Para onde seguir a partir daqui

Quanto JavaScript precisas saber para utilizar o React

Antes de avançar diretamente para o React, deves ter uma boa compreensão de alguns conceitos fundamentais do JavaScript.

Não precisas ser um especialista em JavaScript, mas acho que precisas de uma compreensão (textos do autor abaixo em inglês) de:

• Variáveis
• Funções de seta
• Trabalhar com objetos e arrays utilizando Rest e Spread
• Desestruturação de objetos e arrays
• Literais de template
• Funções de callback
• Módulos da ES

Se estes conceitos não te forem familiares, deixei alguns links para descobrires mais sobre esses assuntos.

Porque deves aprender React?

Recomendo vivamente que qualquer programador para a Web tenha, pelo menos, uma compreensão básica do React.

Recomendo isto por algumas razões.

1. O React é muito popular. Como programador, é bem provável que vás trabalhar num projeto com React no futuro. Talvez num projeto existente, ou talvez a tua equipa vai querer que trabalhes numa nova aplicação com base no React.
2. Hoje em dia, muitas das ferramentas são criadas utilizando o React no seu núcleo. Frameworks populares e ferramentas como Next.js, Gatsby e muitos outros utilizam React em segundo plano.
3. Como engenheiro de front-end, o React provavelmente surgirá numa entrevista de emprego.

Estas são todas boas razões, mas uma das principais razões para eu querer que aprendas React é que o React é espetacular.

O React promove várias boas práticas de desenvolvimento, incluindo a capacidade de reutilizar o código e desenvolvimento orientado a componentes. É rápido, é leve, e a maneira como te faz pensar sobre o fluxo de dados na aplicação combina com vários cenários comuns.

Como instalar o React

Existem algumas formas diferentes de instalar o React.

Para começar, recomendo vivamente uma abordagem, que é utilizar a ferramenta oficial recomendada, chamada create-react-app.

create-react-app é uma aplicação de linha de comandos, que tem o objetivo de te colocar a par do React sem demoras.

Começas por utilizar o npx, que é uma forma fácil de descarregar e executar comandos do Node.js sem ter de instalá-los.

Vê o meu guia sobre o npx aqui: https://flaviocopes.com/npx/ (em inglês)

O npx vem com o npm (desde a versão 5.2). Se ainda não tiveres nenhum npm instalado, instala agora a partir de https://nodejs.org (o npm é instalado com o Node).

Se não tiveres a certeza que versão tens do npm, executa npm -v para verificar se precisas de atualizar.

Dica: analisa o meu tutorial sobre o terminal OSX, disponível em https://flaviocopes.com/macos-terminal/ (em inglês), caso ainda não te sintas à vontade a utilizar o terminal. Aplica-se ao Mac e ao Linux.

Quando executas npx create-react-app <app-name>, o npx irá descarregar a versão mais recente de create-react-app. Executa-a, e de seguida, remove-a do teu sistema.

Isto é ótimo porque nunca vais ter uma versão desatualizada no teu sistema, e sempre que a executares, iras obter a versão mais recente e o melhor código disponível.

Vamos então começar:

npx create-react-app todolist

Isto é quando termina a execução:

create-react-app criou uma estrutura de ficheiros na pasta que indicaste (todolist, neste caso), e inicializou um repositório Git.

Também adicionou alguns comandos no ficheiro package.json:

Nota da tradução: como é possível ver na parte das dependências, a versão na época da criação deste artigo é a versão 16.14.0. A versão atual, no momento em que esta tradução foi realizada, é a 18.2.0.

Então, podes iniciar imediatamente a aplicação ao seguir para a pasta da aplicação recentemente criada e executando npm start.

De início, este comando executa a aplicação na tua porta local 3000, e abre o teu navegador, apresentando o ecrã de boas vindas:

Agora, está tudo pronto para trabalhares na aplicação!

Componentes do React

Na última secção, viste como criar a tua primeira aplicação de React.

Esta aplicação vem com uma série de ficheiros que fazem várias coisas, em maior parte, relacionadas com a configuração, mas existe um ficheiro que se destaca: App.js.

App.js é o primeiro Componente do React que vais conhecer.

Este é o código dele:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

Uma aplicação criada utilizando React, ou um dos outros frameworks de front-end populares, como Vue e Svelte, por exemplo, é criada utilizando dezenas de componentes.

Vamos começar, no entanto, por analisar o primeiro componente. Vou simplificar o código deste componente, assim:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return /* algo */
}

export default App

Podes ver algumas coisas aqui. Importamos algumas coisas e exportamos uma função chamada App.

As coisas que importamos são, neste caso, uma biblioteca do JavaScript (o pacote de npm react), uma imagem SVG e um ficheiro CSS.

create-react-app está configurado num modo que nos permite importar imagens e CSS para utilizar no nosso JavaScript, mas isto não é algo que tenhamos de nos preocupar para já. O que precisas de te preocupar é o conceito de um componente

App é uma função que, no exemplo original, retorna algo que, à primeira vista, tem um aspeto muito estranho.

Parece ser HTML mas tem algum JavaScript incorporado.

Isto é JSX, uma linguagem especial que utilizamos para criar o resultado de um componente. Vamos falar mais sobre o JSX na próxima secção.

Para além de definir algum JSX para ser retornado, um componente tem muitas outras características.

Um componente pode ter o seu próprio state, que significa que encapsula algumas variáveis que outros componentes não conseguem aceder, a não ser que este componente exponha o state para a restante aplicação.

Um componente também pode receber dados de outros componentes. Neste caso, estamos a falar sobre props.

Não te preocupes, em breve vamos olhar com mais detalhes para todos estes termos (JSX, State e Props).

Introdução ao JSX

Não podemos falar sobre React sem explicar primeiro o JSX.

Na última secção, ficaste a conhecer o teu primeiro componente React, o componente App definido na aplicação predefinida criada pelo create-react-app.

O seu código era o seguinte:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

Anteriormente, ignoramos tudo o que estava dentro da instrução return, mas, nesta secção, vamos falar sobre isso.

Chamamos JSX a tudo o que esteja entre os parênteses do que é retornado pelo componente:

<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</div>

Isto parece HTML, mas não é realmente HTML. É um pouco diferente.

É um pouco estranho ter este código dentro de um ficheiro JavaScript. Isto não se parece nada com JavaScript!

Em segundo plano, o React irá processar o JSX e vai transformá-lo em JavaScript, que o navegador será capaz de interpretar.

Então, estamos a escrever JSX, mas, no final, existe um passo de tradução que o torna legível para um interpretador de JavaScript.

O React fornece-nos esta interface por uma razão: é mais fácil criar interfaces de UI utilizando JSX.

Assim que estiveres mais à vontade com o JSX, claro.

Na próxima secção, vamos falar sobre como o JSX te permite compor facilmente uma UI, e depois vamos ver as diferenças em relação ao "HTML normal" que precisas saber.

Utilizar JSX para compor uma UI

Tal como introduzido na secção anterior, um dos principais benefícios do JSX é que torna muito fácil criar uma UI.

Em particular, num componente do React, podes importar outros componentes do React e podes incorporá-los e exibi-los.

Um componente do React é geralmente criado no seu próprio ficheiro, porque é assim que podemos facilmente reutilizá-lo (ao importá-lo) em outros componentes.

Um componente do React, no entanto, também pode ser criado no mesmo ficheiro de outro componente, se planeares utilizá-lo apenas nesse componente. Aqui não existe uma "regra", podes fazer o que achares melhor.

Eu geralmente utilizo ficheiros separados quando o número de linhas fica muito grande.

Para manter as coisas simples, vamos criar um componente no mesmo ficheiro App.js.

Vamos criar um componente WelcomeMessage:

function WelcomeMessage() {
  return <p>Welcome!</p>
}

Vês? É uma simples função que retorna uma linha de JSX, que representa um elemento de HTML p.

Vamos adicioná-lo ao ficheiro App.js.

Agora, dentro do componente de JSX App, podemos adicionar <WelcomeMessage /> para exibir este componente na interface de utilizador:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function WelcomeMessage() {
  return <p>Welcome!</p>
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <WelcomeMessage />
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

Aqui está o resultado. Consegues ver a mensagem "Welcome!" (em português, "boas-vindas") no ecrã?

Dizemos que WelcomeMessage é um componente-filho de App, e App é o seu componente-pai.

Vamos adicionar o componente <WelcomeMessage /> como se fizesse parte da linguagem HTML.

Esta é a beleza dos componentes React e do JSX: podemos compor uma interface de uma aplicação e utilizá-la como se estivéssemos a escrever HTML.

Com algumas diferenças, como veremos na próxima secção.

A diferença entre JSX e HTML

O JSX parece mais ou menos HTML, mas não é.

Neste secção, quero apresentar-te algumas das coisas mais importantes que precisas ter em mente ao utilizar o JSX.

Uma das diferenças pode ser bastante óbvia se observaste o componente de JSX App: existe um atributo estranho chamado className.

Em HTML, utilizamos o atributo class. É provavelmente o atributo mais utilizado, por várias razões. Uma dessas razões é o CSS. O atributo class permite-nos estilizar facilmente elementos de HTML. Frameworks de CSS, como o Tailwind, colocam este atributo no centro do processo de design em CSS da interface de utilizador.

Existe um problema, contudo. Estamos a escrever o código desta UI num ficheiro de JavaScript e o atributo class na linguagem de programação JavaScript é uma palavra reservada. Isto quer dizer que não podemos utilizar esta palavra reservada como quisermos. Ela serve um propósito específico (definir classes de JavaScript) e os criadores do React tiveram de escolher um nome diferente.

Foi assim que acabamos com className em vez de class.

Vais ter de memorizar isso, especialmente quando estiveres a copiar/colar algum HTML existente.

O React vai fazer o seu melhor para impedir que as coisas quebrem, mas irá criar uma série de alertas nas Ferramentas de Programador:

Esta não é a única funcionalidade do HTML que sofre deste problema, mas é uma das mais comuns.

Outra grande diferença entre JSX e HTML é que o HTML é muito relaxado, digamos. Mesmo que tenhas um erro na sintaxe, ou tenhas fechado incorretamente uma tag, ou tenhas uma discrepância, o browser fará o seu melhor para tentar interpretar o HTML sem dar problemas.

É uma das principais funcionalidades da Web. É muito indulgente.

O JSX não perdoa. Se te esqueceres de fechar uma tag, receberás uma mensagem clara de erro:

O React geralmente fornece mensagens de erro muito boas e informativas que te apontam na direção correta para resolver o problema.

Outra grande diferença entre JSX e HTML é que em JSX podemos incorporar JavaScript.

Vamos falar sobre isto na próxima secção.

Incorporar JavaScript em JSX

Uma das melhores funcionalidades do React é que podemos facilmente incorporar JavaScript no JSX.

Outros frameworks de frontend, por exemplo Angular e Vue, têm as suas próprias formas específicas de imprimir valores JavaScript no template, ou realizar coisas como ciclos.

O React não adiciona coisas novas. Em vez disso, permite-nos utilizar JavaScript no JSX, ao utilizar chavetas.

O primeiro exemplo disto que te vou apresentar vem diretamente do componente App que temos estado a estudar até agora.

Importamos o ficheiro SVG logo utilizando o comando

import logo from './logo.svg'

e de seguida, no JSX, atribuímos este ficheiro SVG ao atributo src de uma tag img:

<img src={logo} className="App-logo" alt="logo" />

Vamos fazer outro exemplo. Vamos supor que o componente App tem uma variável chamada message:

function App() {
  const message = 'Hello!'
  //...
}

Podemos imprimir este valor no JSX ao adicionar {message} em qualquer local do JSX.

Dentro das chavetas { }, podemos adicionar qualquer instrução JavaScript, mas apenas uma instrução por cada bloco de chavetas.

Á instrução deve retornar algo.

Por exemplo, esta é uma instrução comum que irás encontrar em JSX. Temos um operador ternário onde definimos uma condição (message === 'Hello!'), e imprimimos um valor caso a condição seja verdadeira, ou outro valor (o conteúdo de message, neste caso) caso a condição seja falsa:

{
  message === 'Hello!' ? 'The message was "Hello!"' : message
}

Gerir o state em React

Qualquer componente React pode ter o seu próprio state.

O que queremos dizer com state? O state é o conjunto de dados que é gerido pelo componente.

Imagina um formulário, por exemplo. Cada elemento input individual do formulário é responsável pela gestão do seu state: o que está escrito dentro dele.

Um botão está responsável por saber se está a ser clicado ou não. Se está a ser focado.

Um link está responsável por saber se o rato está por cima dele.

Em React, ou em qualquer framework/biblioteca com base em componentes, todas as nossas aplicações são baseadas e utilizam muito o state do componente.

Gerimos o state através do utilitário useState fornecido pelo React. É tecnicamente um hook (não precisas saber os detalhes dos hooks por enquanto, mas é o que isto é).

Importas o useState do React desta forma:

import React, { useState } from 'react'

Ao chamar useState(), irás receber uma nova variável de state e uma função que podemos chamar para alterar o seu valor.

useState() aceita o valor inicial do item de state e retorna um array que contém a variável de state e a função que chamas para alterar o state.

Exemplo:

const [count, setCount] = useState(0)

Isto é importante. Não podemos simplesmente alterar diretamente o valor de uma variável de state. Temos de chamar a sua função de modificação. Caso contrário, o componente React não ira atualizar a sua UI para refletir as alterações feitas aos dados.

Chamar o modificador é a maneira com que podemos indicar ao React que o state de um componente foi alterado.

A sintaxe é um pouco estranha, não é? Visto que useState() retorna um array, utilizamos desestruturação de array para aceder a cada item individual, assim: const [count, setCount] = useState(0)

Aqui está um exemplo prático:

import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('app'))

Podes adicionar quantas chamadas useState() quiseres para criar quantas variáveis de state quiseres:

const [count, setCount] = useState(0)
const [anotherCounter, setAnotherCounter] = useState(0)

Props de componente em React

Chamamos props aos valores iniciais passados para um componente.

Anteriormente, criamos um componente WelcomeMessage

function WelcomeMessage() {
  return <p>Welcome!</p>
}

e utilizamos o componente desta maneira:

<WelcomeMessage />

Este componente não tem nenhum valor inicial. Não tem nenhum prop.

Os props podem ser passados como atributos para o componente no JSX:

<WelcomeMessage myprop={'somevalue'} />

Dentro do componente, recebemos os props como argumentos:

function WelcomeMessage(props) {
  return <p>Welcome!</p>
}

É comum utilizar desestruturação de objetos para obter os props pelo nome:

function WelcomeMessage({ myprop }) {
  return <p>Welcome!</p>
}

Agora que temos o prop, podemos utilizá-lo dentro do componente. Por exemplo, podemos imprimir o seu valor no JSX:

function WelcomeMessage({ myprop }) {
  return <p>{myprop}</p>
}

Aqui, as chavetas têm vários significados. No caso do argumento da função, as chavetas são utilizadas como parte da sintaxe de desestruturação do objeto.

De seguida, utilizamos as chavetas para definir o bloco de código da função, e por fim, no JSX, para imprimir o valor em JavaScript.

Passar props para os componentes é uma boa forma de transmitir valores na tua aplicação.

Um componente armazena dados (tem state) ou recebe dados através dos seus props.

Também podemos enviar funções como props. Por isso, um componente-filho pode chamar uma função no componente-pai.

Um prop especial, chamado children, contém o valor de tudo o que é passado entre as tags de abertura e de fecho do componente, por exemplo:

<WelcomeMessage> Here is some message </WelcomeMessage>

Neste caso, dentro de WelcomeMessage, poderíamos aceder ao valor Here is some message ao utilizar o prop children:

function WelcomeMessage({ children }) {
  return <p>{children}</p>
}

Fluxo de dados numa aplicação em React

Numa aplicação em React, os dados geralmente fluem de um componente-pai para um componente-filho utilizando props, tal como vimos na secção anterior:

<WelcomeMessage myprop={'somevalue'} />

Se passares uma função para o componente-filho, podes alterar o state do componente-pai a partir de um componente-filho:

const [count, setCount] = useState(0)

<Counter setCount={setCount} />

Dentro do componente Counter, podemos agora pegar no prop setCount e chamá-lo para atualizar o state de count no componente-pai, quando algo acontece:

function Counter({ setCount }) {
  //...

  setCount(1)

  //...
}

É preciso saberes que existem formas mais avançadas de gerir dados, que incluem a API Context e bibliotecas como Redux. Estas formas, contudo, trazem mais complexidade. Em 90% das vezes, as duas maneiras que acabei de te explicar são a solução ideal.

Lidar com eventos de utilizador em React

O React fornece uma forma fácil de gerir eventos acionados a partir de eventos DOM, como cliques, eventos de formulário, entre outros.

Vamos falar sobre eventos de clique, que são bastante simples de digerir.

Podes utilizar o atributo onClick em qualquer elemento JSX:

<button
  onClick={(event) => {
    /* gerir o evento */
  }}
>
  Click here
</button>

Quando o elemento é clicado, a função passada para o atributo onClick é acionada.

Podes definir esta função fora do JSX:

const handleClickEvent = (event) => {
  /* gerir o evento */
}

function App() {
  return <button onClick={handleClickEvent}>Click here</button>
}

Quando o evento click é aciona no botão, o React chama a função do gestor de eventos.

O React suporta uma grande variedade de tipos de eventos, como onKeyUp, onFocus,onChange, onMouseDown, onSubmit e muito outros.

Eventos de ciclo de vida num componente React

Até agora, vimos como gerir o state com o hook useState.

Existe outro hook que te quero introduzir neste manual: useEffect.

O hook useEffect permite aos componentes terem acesso aos eventos de ciclo de vida de um componente.

Quando chamas o hook, passas-lhe uma função. A função será executada pelo React quando o componente é renderizado pela primeira vez, e em todas as re-renderizações/atualizações subsequentes.

O React atualiza primeiro o DOM, e depois chama qualquer função passada para useEffect().

Tudo isto ocorre sem bloquear a renderização da UI, mesmo no código de bloqueio.

Aqui está um exemplo:

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log(`You clicked ${count} times`)
  })

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

Visto que a função useEffect() é executada em todas as renderizações/atualizações subsequentes de um componente, podemos dizer ao React para passá-la à frente, para efeitos de desempenho. Fazemos isto ao adicionar um segundo parâmetro que é um array que contém uma lista de variáveis de state a ter em atenção.

O React irá executar novamente o efeito secundário apenas se um dos itens neste array for alterado.

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
}, [name, count])

Da mesma maneira, podes dizer ao React para executar o efeito secundário apenas uma vez (no início), ao passar um array vazio:

useEffect(() => {
  console.log(`Component mounted`)
}, [])

Podes vir a utilizar essa opção muitas vezes.

useEffect() é ótimo para adicionar registos, aceder a APIs externas, e muito mais.

Para onde seguir a partir daqui

Dominar os tópicos explicados neste artigo é um grande passo no teu objetivo de aprender React.

Agora quero dar-te algumas dicas, porque é fácil perderes-te no mar de tutoriais e cursos sobre o React.

O que deves aprender a seguir? (os links citados pelo autor abaixo estão todos em inglês)

Aprende mais sobre o DOM Virtual, escrever código declarativo, fluxo de dados unidirecional, imutabilidade, composição.

Começa a criar algumas aplicações simples em React. Por exemplo, cria um simples contador ou uma interação com uma API pública.

Aprende como fazer renderizações condicionais, como fazer ciclos em JSX, como utilizar as Ferramentas de Programador do React.

Aprende como aplicar CSS numa aplicação em React, com CSS simples ou componentes estilizados.

Aprende a gerir o state utilizando a API Context, useContext e Redux.

Aprende como interagir com formulários.

Aprende como utilizar o Router do React.

Aprende como testar aplicações React.

Aprende uma aplicação de framework construída sobre o React, como Gatsby ou Next.js.

Acima de tudo, não te esqueças de praticar ao criar aplicações simples para aplicar tudo o que aprendeste.

Conclusão

Muito obrigado por leres este guia.

Espero que te inspire a aprender mais sobre o React e tudo o que podes fazer com ele!

Lembra-te que podes fazer download deste manual em PDF / ePub / e formato Mobi gratuitamente, caso queiras.

O autor publica tutoriais de programação com frequência em seu site, flaviocopes.com, se quiseres dar uma vista de olhos a outros bons conteúdos como este.

Podes entrar em contacto com o autor no Twitter: @flaviocopes.

Tradução em português europeu

Demorei algum tempo a compreender o que os termos programar e escrever código realmente significam e o que cada campo implica. Tenho a certeza de que não sou o único que ficou confuso com estes termos quando estava a começar na área da tecnologia.

Durante algum tempo pensei que eram a mesma coisa e demorei algum tempo a perceber que existem diferenças entre os dois "mundos".

Neste artigo, vou explicar as diferenças básicas entre escrever código e programar, como cada um funciona e como trabalham em colaboração para desenvolver aplicações e sites.

Então, vamos explorar estes termos e como os profissionais os utilizam, começando por compreender o que eles significam.

O que é escrever código?

Podes ter visto cursos, bootcamps ou artigos a falar sobre escrever código – então porque enfatizamos este termo?

Isto acontece porque o simples ato de escrever código torna possível fazermos todas as coisas interessantes que fazemos todos os dias. Permite-nos utilizar aplicações mobile, trabalhar com programas diferentes e operar sistemas, e até mesmo brincar com os jogos que amamos, ou visitar o website onde estás a ler este artigo. É tudo possível através da escrita de código.

Então, o que é escrever código em termos simples?

Podemos definir a escrita de código como sendo o ato de traduzir instruções para um computador, de uma linguagem humana para uma linguagem que uma máquina consiga compreender. O código indica ao computador como se comportar e que ações deve realizar.

Se quiseres tornar-te um/a escritor/a de código, vais precisar de ter alguns conhecimentos básicos sobre linguagens de programação. Quando digo linguagens de programação, quero dizer linguagens como: Python, Java, Go, PHP ou JavaScript, só para mencionar algumas.

Abaixo está um bom exemplo de código escrito na linguagem Python, que irá converter qualquer PDF num Audiobook:

import PyPDF2                     # pip install pypdf
import pyttsx3                    # pip install pyttsx3
from tkinter.filedialog import *  # pip install tkinter

book = askopenfilename()
pdfReader = PyPDF2.PdfFileReader(book)

pages = pdfReader.numPages

for num in range(0, pages):
    page = pdfReader.getPage(num)
    text = page.extractText()
    speak = pyttsx3.init()
    speak.say(text)
    speak.runAndWait()

O que é programação?

Provavelmente, também já ouviste alguém a dizer, "Sou programador/a". Algumas pessoas que utilizam este termo têm noção do significado do termo, enquanto outras pessoas não. Se não souberes exatamente o que significa programação, vamos tentar alcançar alguns esclarecimentos ao compreender o que realmente é programar.

Programar é o processo de criar as instruções que vão indicar ao computador como realizar uma tarefa em particular que lhe seja atribuída. Fazes isto ao utilizar linguagens de programação como:

Quando falamos de programação, pensa em algo como um controlo remoto da tua televisão – ele aguardará que tu lhe dês instruções ao pressionar diferentes botões, que por sua vez, indicam à televisão para realizar uma tarefa específica (como mudar de canal, aumentar o volume e assim adiante). Bem, é o mesmo modo com que os programadores podem instruir um computador a fazer várias coisas.

Com programação, podes fazer praticamente tudo – como programar robôs para ajudar nas lides domésticas, ou até mesmo programar carros autónomos como a Tesla.

De maneira a que um programador desenvolva um programa que implemente a sua ideia, é necessário realizar as seguintes tarefas:

• Planear a estrutura da aplicação (com a ajuda de ferramentas como o Trello)
• Criar o design da aplicação (ao utilizar ferramentas como Figma ou AdobeXD)
• Desenvolvê-la (ao utilizar a sua linguagem de programação de eleição)
• Testar as suas funcionalidades
• Implementá-la (quer num serviço de alojamento gratuito quer pago)
• Fazer a manutenção depois de estar terminada.

Por isso, como podes ver, podemos dizer que a programação não lida apenas com a própria escrita do código. Também envolve a utilização de estruturas de dados e algoritmos e, em geral, lidar com o panorama geral da criação e desenvolvimento de sistemas complexos.

A diferença entre escrever código e programar

Vamos dividir as diferenças em quatro categorias principais, o que nos vai ajudar a decompor os conceitos e compreendê-los melhor.

A terminologia

Escrever código lida com colocar o código numa linguagem compreendida tanto por máquinas como por humanos. O foco principal da escrita de código é fornecer comunicação entre os dois (humanos e computadores).

Programação envolve criar perfil e estrutura para o código de um programa, que segue determinados padrões, antes de o código em si ser escrito para realizar a tarefa que necessita realizar.

As ferramentas que utilizas

No que diz respeito a escrita de código, uma das ferramentas mais importantes será o teu editor de texto (como o Bloco de notas, ou algo mais complexo e rico em funcionalidades, como o Visual Studio Code, Sublime, Atom ou Vim).

Quando falamos de programação, por outro lado, precisas adicionar algumas outras ferramentas. Como programador/a, irás realizar revisões de documentos, fazer muito planeamento, pensar em design e assim adiante.

Para te ajudar nestas tarefas, vais utilizar ferramentas como editores de código mais avançados, ferramentas de análise, depuradores, frameworks de modelação, ferramentas de montagem, algoritmos de modelação e muito mais.

Como programador/a, vais precisar de ter muita experiência a utilizar estas ferramentas e mais exposição ao processo que os programadores utilizam para criar aplicações e outros produtos.

O teu nível de conhecimentos

Como escritor/a de código, ter conhecimentos básicos de uma linguagem de programação e a sua sintaxe é um bom começo. Assim que souberes como escrever código numa linguagem, fica mais fácil aprender outras. Novamente, o teu principal objetivo está na escrita no próprio código que indica à máquina o que fazer.

Por outro lado, os/as programadores/as precisam de mais conhecimentos. Vais precisar de saber como criar e trabalhar com algoritmos, como desenhar sites, como depurar e testar o teu código, como gerir projetos, e claro, como trabalhar com outras linguagens de programação.

Resolução de problemas, pensamento crítico e habilidades analíticas também são coisas essenciais quando estás a desenvolver sistemas complexos.

O produto final

Como escritor/a de código, o teu resultado esperado é geralmente uma solução simples que, depois de compilada, irá reproduzir com sucesso o resultado desejado. Um bom exemplo é o que demos anteriormente – converter um PDF num ficheiro de áudio.

Por outro lado, os/as programadores/as vão trabalhar para fornecer uma aplicação completa funcional ou um pedaço de software que as pessoas vão utilizar no mercado. Também serão responsáveis por dar seguimento e fazer a manutenção do que criaram para garantir que está a funcionar suavemente, sem nenhum problema.

Como a escrita de código e a programação trabalham em conjunto

Por esta altura, espero que sejas capaz de dizer a diferença entre escrita de código e programação e com o que estas duas coisas lidam. Agora, vamos ver como as duas podem (e devem) trabalhar em conjunto para alcançar muita coisa.

Para compreender melhor o como, vamos começar por fornecer um cenário real, onde ambas, escrita de código e programação, vão ter de trabalhar em conjunto para produzir uma aplicação funcional completa.

Imagina que te deram a tarefa de criar uma aplicação que irá ajudar a gerir ou acompanhar a tua rotina diária ou estar a par das tuas despesas diárias. Ao utilizar os conceitos dos dois mundos, podemos realizar a tarefa.

Vais precisar de um/a programador/a, que será capaz de:

• Planear a estrutura da aplicação (com a ajuda de ferramentas como o Trello)
• Escrever as principais funcionalidades da aplicação, qual a utilização esperada por parte dos utilizadores, etc.
• Desenhar a aplicação (ao utilizar ferramentas como Figma ou Adobexd)

Após completar estes passos, entra o trabalho do/a escritor/a de código. Eles recebem as ideias que o/a programador/a cria e transformam-nas num formato legível para máquinas ao escrever código para realizar as tarefas especificadas. Depois do passo mágico da escrita do código, o/a programador/a volta novamente ao trabalho.

Então, o/a programador/a, irá analisar o código e verificar se existem erros, executará testes e verificará se está tudo a funcionar corretamente e que o código gera o resultado esperado. Se tudo isto se verificar, a aplicação está agora pronta para lançamento e manutenção – que permanece nas mãos do/a programador/a.

Este simples exemplo explica como as duas habilidades podem ser utilizadas em conjunto para melhor produtividade.

Apenas um apontamento final: um/a "escritor/a de código" e um/a "programador/a" nem sempre são duas pessoas distintas. Pode ser que a mesma pessoa realize todas as tarefas.

Resumindo

Onde nos enquadramos nestes dois mundos? Levei bastante tempo a perceber o que realmente me interessa.

Se tiveres mais interesse na lógica, tenta focar as tuas forças em todo o processo da programação. Se simplesmente gostares de ler e escrever código, então investe o teu tempo nisso.

Como sabemos, a ciência da computação é um campo muito amplo e ainda em desenvolvimento. Trabalha em encontrar o caminho que desejas explorar e foca-te nisso – certifica-te apenas que também desfrutas e te divertes.

Se ainda estiveres com dificuldades, espero que este artigo te tenha dado algumas luzes e ajudado a encontrar o teu caminho.

Obrigado por leres até aqui. Se tiveres gostado deste artigo, por favor compartilha-o para que possas ajudar outro programador (ou escritor de código) a encontrar o seu caminho.

Entra em contacto com o autor nas redes sociais: Twitter | LinkedIn | GitHub

Desfruta da programação ❤

Tradução realizada em português europeu

Angular é um framework de código-livre com base no TypeScript, utilizado para desenvolver aplicações de front-end para a web. É o sucessor do AngularJS e todas as menções ao Angular referem-se à versão 2 ou superior. O Angular tem funcionalidades como generics, static-typing e algumas outras funcionalidades do ES6.

Histórico de versões

A Google lançou a versão inicial do AngularJS a 20 de outubro de 2010. A versão estável do AngularJS foi lançada a 18 de dezembro de 2017, com a versão 1.6.8. A última atualização significativa do AngularJS, a versão 1.7, ocorreu a 1 de julho de 2018, e está, atualmente, num período de 3 anos de Suporte a Longo Prazo. O Angular 2.0 foi anunciado pela primeira vez a 22 de setembro de 2014, na conferência ng-Europe. Uma das novas funcionalidades do Angular 2.0 é o carregamento dinâmico. A maior parte das principais funcionalidades foram movidas para módulos.

Após algumas modificações, o Angular 4.0 foi lançado em dezembro de 2016. O Angular 4 tem compatibilidade com a versão mais antiga do Angular 2.0. Algumas das novas funcionalidades são a biblioteca HttpClient e os novos eventos de ciclo de vida do router. O Angular 5 foi lançado a 1 de novembro de 2017, tendo uma funcionalidade muito importante que é o suporte para aplicações web progressivas. O Angular 6 foi lançado em maio de 2018, enquanto o Angular 7 foi lançado em outubro de 2018. A versão estável mais recente é a 7.0.0.

Nota da tradução: o texto que estás a ler é de 2018. A versão mais recente do Angular, no momento desta tradução, é a versão 16.1.2, de 21 de junho de 2023, compatível com as versões 16.14.0 a 18.10.0 do NodeJS, 4.9.3 a 5.2.0 do TypeScript e 6.5.3 a 7.4.0 do RxJS.

Instalação

A forma mais fácil de instalar o Angular é através da Angular CLI. Esta ferramenta permite a criação de projetos e a geração de componentes, serviços, módulos e assim adiante. Como padrão, a equipa do Angular considera que esta seja a melhor prática.

Angular 2.x e versões mais recentes

Instalar a Angular CLI

npm install -g @angular/cli

Criar um espaço de trabalho e a aplicação inicial

Vais desenvolver aplicações no contexto de um espaço de trabalho do Angular. Um espaço de trabalho contém os ficheiros para um ou mais projetos. Um projeto é o conjunto de ficheiros que compõe uma aplicação, uma biblioteca, ou testes end-to-end (e2e).

ng new my-app

Servir a aplicação

O Angular inclui um servidor para que consigas criar e servir facilmente a tua aplicação localmente.

1. Navega até à pasta do espaço de trabalho (my-app)

Inicia o servidor ao utilizar o comando CLI ng serve com a opção --open

cd my-app
ng serve --open

Boa, criaste a tua primeira aplicação em Angular!!!

O Angular contém muitos esquemas para criar aplicações. Os componentes são um desses esquemas. Eles englobam uma única unidade de lógica relacionada com uma única parte da aplicação. Os componentes fazem geralmente parceria com outros esquemas para operar de maneira mais eficiente.

Os componentes simplificam a aplicação. Canalizar a lógica para uma única secção da interface visível é o seu principal objetivo. Para criar aplicações passo a passo, precisas de criar componente a componente. No final de contas, os componentes funcionam como blocos de construção do Angular.

Classe de componente e metadados

O comando da CLI ng generate component [nome-do-componente] produz o seguinte:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  constructor() { }

  ngOnInit() { }
}

Esta é a estrutura básica da qual todos os grandes componentes se originam. O decorator @Component é a parte mais importante. Sem ele, o exemplo acima torna-se uma classe genérica. O Angular depende dos decorators para distinguir o tipo esquemático da classe.

@Component recebe metadados como um único objeto. Os decorators são apenas funções JavaScript em segundo plano. Eles recebem argumentos assim como o objeto de metadados. O objeto de metadados configura as dependências básicas do componente. Cada campo tem o seu papel.

• selector: indica ao Angular para associar o componente a um determinado elemento no template HTML da aplicação.
• templateUrl: aceita a localização do ficheiro do template HTML do componente (é também aqui que a informação é exibida).
• styleUrls: aceita um array de localizações de ficheiros das folhas de estilos (strings). Estas folhas de estilos focam o template atribuído ao componente.

Pensa em metadados como uma grande bolha de configuração. O decorator recebe-os de maneira a que possa gerar a informação específica ao componente. O decorator decora a classe subjacente com informação necessária para o comportamento da sua classe, ou seja, uma classe de componente.

A assinatura da classe é exportada por padrão, de maneira a que o componente possa ser importado. ngOnInit é também implementado. implements indica à classe para definir certos métodos de acordo com a definição da interface. ngOnInit é um hook de ciclo de vida.

Informações de componente

A informação comanda tudo. Os componentes não são exceção. Os componentes englobam toda a informação. Para receber dados externamente, um componente deve declarar isso explicitamente. Este modo de privacidade impede que a informação entre em conflito ao longo da árvore de componentes.

A informação determina o que é exibido da classe de componente para o teu template. Qualquer atualização à informação da classe atualizará (ou, pelo menos, deverá atualizar) a visualização do template.

Os componentes, geralmente, vão inicializar um conjunto de membros (ou variáveis) que armazenam informação. São utilizados ao longo da lógica da classe de componente por conveniência. Essa informação alimenta a lógica resultante no template e o seu comportamento. Observa o seguinte exemplo:

// ./components/example/example.component.ts

import { Component, OnInit } from '@angular/core';
import { Post, DATA } from '../../data/posts.data';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
  username: string;
  totalPosts: number;
  allPosts: Post[];

  deletePost(index: number): void {
    this.allPosts.splice(index, 1);
    this.totalPosts = this.allPosts.length;
  }

  ngOnInit(): void {
    this.username = DATA.author;
    this.totalPosts = DATA.thePosts.length;
    this.allPosts = DATA.thePosts;
  }
}

<!-- ./components/example/example.component.html -->

<h1>{{ username }}</h1>
<span>Alterar o nome: </span><input [(ngModel)]="username">
<h3>Publicações: {{ totalPosts }}</h3>
<ul>
<hr/>
<div *ngFor="let post of allPosts; let i=index">
  <button (click)="deletePost(i)">EXCLUIR</button>
  <h6>{{ post.title }}</h6>
  <p>{{ post.body }}</p>
  <hr/>
</div>
</ul>

Repara nas formas como o componente interage com a informação. Primeiro, vai buscar a ../../data/posts.data antes de começar a encaminhar para o template para exibir.

A informação aparece ao longo do template. Dentro de chavetas, o valor de uma variável é mapeado da classe de componente para as chavetas. O *ngFor itera pela classe de array allPosts. Clicar no botão remove um elemento específico de allPosts pelo seu índice. Podes até alterar o username mais acima ao escrever na caixa de input.

As interações acima alteram a informação da classe de componente que, por sua vez, altera o template HTML do componente. Os componentes fornecem a lógica principal, que facilita o fluxo da informação. O template HTML torna essa informação legível para o utilizador.

Ligação (binding) dos dados

A informação define geralmente o aspeto de uma aplicação. Interpretar essa informação para a interface de utilizador envolve a lógica de classe (*.component.ts) e uma vista de template (*.component.html) . O Angular conecta-os através da ligação (do inglês, binding) dos dados. Pensa na ligação dos dados como uma ferramenta para interação de componentes.

Componente e template

O componente armazena maior parte da sua lógica e informação dentro da sua classe decorada com @Component. Esse decorator define a classe como um componente com template HTML. O template do componente representa a classe dentro da aplicação. Aqui, o foco deve ser entre a classe do componente e o template HTML.

É aqui que a ligação de dados ocorre. As propriedades de elementos e eventos recebem valores. Esses valores, definidos pela classe de componente, servem um de dois propósitos. Um é produzir informação que o template receberá. O outro é lidar com os eventos emitidos pelo elemento de template.

Propriedades de elemento

Para reconhecer propriedades de elemento vinculadas aos dados, o Angular utiliza uma sintaxe especial de chavetas.

// my.component.ts
@Component({
  templateUrl: './my.component.html'
})

export class MyComponent {
  value:type = /* algum valor de tipo */;
}

<!-- my.component.html -->
<any-element [property]="value">innerHTML</any-element>

Tem paciência comigo aqui.

[property] espelha a propriedade no nó do objeto do elemento no Domain Object Model (DOM). Não confundas propriedades de objeto com um atributo de elemento do DOM. As propriedades e os atributos partilham por vezes o mesmo nome e fazem a mesma coisa. No entanto, existe uma clara distinção.

Lembra-te de que attr (atributos) é uma única propriedade do objeto do DOM subjacente. A declaração é feita na instanciação do DOM, com valores de atributo correspondentes à definição do elemento. O elemento mantém o mesmo valor após isso. Cada propriedade tem o seu próprio campo chave-valor num nó de objeto do DOM. Essas propriedades são mutáveis após a instanciação.

Compreende a diferença entre atributos e propriedades. Isso levará a uma melhor compreensão de como o Angular vincula a informação às propriedades (vinculação de propriedade). O Angular raramente vinculará a informação ao atributo de um elemento. As excepções a isso são muito raras. Uma última vez: o Angular vincula a informação de componente às propriedades, não aos atributos!

Voltando ao exemplo, o [ … ] na atribuição da propriedade do elemento tem um significado especial. Os parênteses retos mostram que property está vinculado ao "value" à direita da atribuição.

value também tem significado especial no contexto dos parênteses retos. O próprio value é uma string literal. O Angular faz a leitura e compara o seu valor ao dos membros da classe. O Angular substituirá o valor do atributo de membro correspondente. Claro que isto refere-se à mesma classe de componente que hospeda o template HTML.

O fluxo unidirecional de informação do componente para o template está completo. O membro correspondente à atribuição correta da propriedade entre parênteses retos fornece o value. Nota que alterações ao valor do membro na classe do componente filtram para baixo para o template. Essa é a deteção de alteração do Angular em funcionamento. Alterações dentro do âmbito do template não tem efeito no membro da classe do componente.

Informação principal: a classe de componente fornece a informação enquanto que o template a exibe.

Não mencionei que os valores da informação também podem aparecer num innerHTML de um componente. Este último exemplo implementa chavetas duplas. O Angular reconhece essas chavetas e interpola a classe de dados de componente correspondente para o innerHTML da div.

<div>O valor do membro 'value', da classe de componente, é {{value}}.</div>

Lidar com eventos

Se o componente fornece dados, então o template fornece eventos.

// my.component.ts
@Component({
  templateUrl: './my.component.html'
})

export class MyComponent {
  handler(event):void {
      // a função faz algo
  }
}

// my.component.html
<any-element (event)=“handler($event)”>innerHTML</any-element>

Isto funciona de maneira semelhante à vinculação de propriedades.

O (event) refere-se a qualquer tipo de evento válido. Por exemplo, um dos tipos de eventos mais comum é o click. Ele emite quando clicas com o rato. Independentemente do tipo, o event está vinculado ao "handler" no exemplo. Os gestores de eventos são geralmente funções de membro da classe de componente.

Os ( … ) são especiais para o Angular. Os parênteses indicam ao Angular que um evento está vinculado à atribuição correta do handler. O próprio evento origina a partir do elemento hospedeiro.

Quando o evento emite, ele passa o objeto Event sob a forma de $event. O handler mapeia para a função que tem o mesmo nome do handler da classe de componente. A troca unidirecional do elemento vinculado ao evento para a classe de componente está finalizada.

Os eventos de emissão do gestor, enquanto possível, não causam impacto no elemento de template. Afinal, a vinculação é unidirecional.

Diretrizes

Diretrizes são elementos de componente e atributos criados e reconhecidos pelo Angular. O Angular associa o elemento ou atributo com a sua definição de classe correspondente. @Directive ou @Component decora essas classes. Ambos são indicativos para o Angular que a classe funciona como uma diretriz.

Algumas diretrizes modificam o estilo do elemento hospedeiro. Outras diretrizes exibem vistas ou inserem em vistas já existentes como vistas incorporadas. Por outras palavras, elas alteram o layout HTML.

De qualquer forma, as diretrizes sinalizam o compilador do Angular. Elas marcam componentes para modificação, dependendo da lógica da classe da diretriz.

Diretriz estrutural

Aqui estão três exemplos de diretrizes estruturais. Cada uma tem uma contrapartida lógica (if, for e switch).

• *ngIf
• *ngFor
• *ngSwitchCase e *ngSwitchDefault

Nota importante: todas as três estão disponíveis através da importação do CommonModule, que está disponível a partir de @angular/common para importação dentro do módulo raiz da aplicação.

*ngIf

*ngIf testa um determinado valor para ver se é verdadeiro ou falso com base na avaliação booleana geral em JavaScript. Em caso de ser verdadeiro, o elemento e o seu innerHTML vão ser exibidos. Caso contrário, nunca vão renderizar para o Domain Object Model (DOM).

<!-- renders "<h1>Olá!</h1>" -->
<div *ngIf="true">
  <h1>Olá!</h1>
</div>

<!-- não renderiza -->
<div *ngIf="false">
  <h1>Alô!</h1>
</div>

Esse é um exemplo fictício. Qualquer valor de membro da classe de componente do template pode ser substituído por true ou false.

Nota: também podes fazer o seguinte com *ngIf para obter acesso ao valor observável:

<div *ngIf="observable$ | async as oNomeQueQuiseres">
  {{ oNomeQueQuiseres }}
</div>

*ngFor

*ngFor itera com base numa expressão, microssintática, atribuída à direita. A microssintaxe vai para além do âmbito deste artigo. Fica apenas a saber que a microssintaxe é uma forma abreviada de uma expressão lógica. Ocorre como uma única string capaz de referenciar valores de membro de classe. Podes iterar através de valores iteráveis, o que os torna úteis para *ngFor.

<ul>
  <li *ngFor=“let potato of ['Russet', 'Doce', 'Rosalinda']; let i=index”>
      Potato {{ i + 1 }}: {{ potato }}
  </li>
  <!-- Resultados
  <li>
      Batata 1: Russet
  </li>
  <li>
      Batata 2: Doce
  </li>
  <li>
      Batata 3: Rosalinda
  </li>
  -->
</ul>

['Russet', 'Doce', 'Rosalinda'] é um valor iterável. Os arrays são uns dos valores iteráveis mais comuns. O *ngFor cria um <li></li> por cada elemento do array. É atribuído a cada elemento do array a variável potato (em português, batata). Isto é feito ao utilizar a microssintaxe. O *ngFor define o conteúdo estrutural do elemento ul. Isso é característico de uma diretriz estrutural.

Nota: também podes fazer o seguinte com a diretriz *ngFor para obter acesso ao valor observável (atalho):

<div *ngFor="let oNomeQueQuiseres of [(observable$ | async)]">
  {{  oNomeQueQuiseres }}
</div>

*ngSwitchCase e *ngSwitchDefault

Estas duas diretrizes estruturais trabalham em conjunto para fornecer a funcionalidade switch ao template HTML.

<div [ngSwitch]="potato">
  <h1 *ngSwitchCase="'Russet'">{{ potato }} é uma batata Russet.</h1>
  <h1 *ngSwitchCase="'Sweet'">{{ potato }} é uma batata doce.</h1>
  <h1 *ngSwitchCase="'Laura'">{{ potato }} é uma batata Rosalinda.</h1>
  <h1 *ngSwitchDefault>{{ potato }} é um tipo diferente de batata.</h1>
</div>

Apenas uma das expressões *ngSwitch… é renderizada. Repara no atributo [ngSwitch] dentro do elemento div a envolver o switch. Ele passa o valor de potato ao longo da cadeia *ngSwitch.... Essa cadeia de diretrizes estruturais determina que elemento h1 renderiza.

Como tal, [ngSwitch] não é uma diretriz estrutural ao contrário das instruções *ngSwitch…. Ele passa o valor enquanto que o bloco determina o layout final do HTML.

Lembra-te de que a estilização e passagem de valores não são da responsabilidade das diretrizes estruturais. Isto é responsabilidade das diretrizes de atributos. As diretrizes estruturais determinam apenas o layout.

As transformações à informação resultante garantem que a informação esteja num formato adequado quando chega a hora de carregar para o ecrã do utilizador. Normalmente, as transformações de informação ocorrem em segundo plano. Com pipes, a transformação de informação pode ocorrer no template HTML. Os pipes transformam a informação de template diretamente.

Os pipes têm bom aspeto e são convenientes. Eles ajudam a manter a classe de componente com poucas transformações básicas. Tecnicamente, os pipes expressam a lógica da transformação de informação.

Casos de utilização

O Angular vem carregado com um conjunto básico de pipes. Trabalhar com um par deles desenvolverá a intuição para lidar com os restantes. A lista a seguir fornece três exemplos:

• AsyncPipe
• DatePipe
• TitleCasePipe

AsyncPipe

Essas secções requerem uma compreensão básica de Promises ou Observables para apreciar totalmente. O AsyncPipe opera num dos dois. O AsyncPipe extrai informação das Promises/Observables como resultado para o que vier a seguir.

No caso dos Observables, o AsyncPipe subscreve automaticamente para a fonte de informação. Independentemente de onde vier a informação, o AsyncPipe subscreve para a fonte observável. O async é o nome sintático do AsyncPipe, tal como apresentado abaixo.

<ul *ngFor=“let potato of (potatoSack$ | async); let i=index”>
  <li>Batata {{i + 1}}: {{potato}}</li>
</ul>

No exemplo, o potatoSack$ é um Observable a aguardar um carregamento de batatas. Assim que as batatas chegarem, quer de maneira síncrona, quer assíncrona, o AsyncPipe recebe-as como um array iterável. O elemento de lista é, então, preenchido por batatas.

DatePipe

Formatar strings de data requer um pouco de manipulação com o objeto de JavaScript Date. O DatePipe fornece uma forma potente de formatar datas assumindo que o input fornecido está num formato válido de data.

TitleCasePipe

Transforma texto para estilo de título. Coloca em maiúscula a primeira letra de cada palavra e transforma as letras restantes da palavra em minúsculas. As palavras são delimitadas por qualquer caracter de espaço em branco, tal como um espaço, um tab ou caracter de avanço de linha.

// example.component.ts

@Component({
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  timestamp:string = ‘2018-05-24T19:38:11.103Z’;
}

<!-- example.component.html -->

<div>Hora atual: {{timestamp | date:‘short’}}</div>

O formato do timestamp acima é ISO 8601¹ — não é o mais fácil de ler. O DatePipe (date) transforma o formato de data ISO no formato mais convencional mm/dd/yy, hh:mm AM|PM. Existem muitas outras opções de formatação. Todas estas opções estão na documentação oficial.

Criar pipes

Embora o Angular tenha apenas um determinado número de pipes, o decorator @Pipe permite aos programadores criarem os seus próprios. O processo começa com ng generate pipe [nome-do-pipe], substituindo [nome-do-pipe] por um nome de ficheiro preferível. Este comando produz o seguinte:

import { Pipe, PipeTransform } from ‘@angular/core’;

@Pipe({
  name: 'example'
})
export class ExamplePipe implements PipeTransform {
  transform(value: any, args?: any): any {
      return null;
  }
}

Este template de pipe simplifica a criação de um pipe personalizado. O decorator @Pipe indica ao Angular que a classe é um pipe. O valor de name: ‘example’, sendo neste caso example, é o valor que o Angular reconhece quando procura no template HTML por pipes personalizados.

Avancemos para a lógica da classe. A implementação PipeTransform fornece as instruções para a função transform. Esta função tem significado especial dentro do contexto do decorator @Pipe. Ela recebe dois parâmetros de início.

value: any é o resultado que o pipe recebe. Pensa no <div>{{ umValor | example }}</div>. O valor de umValor é passado para o parâmetro value: any da função transform. Esta é a mesma função transform definida na classe ExamplePipe.

args?: any é qualquer argumento que o pipe recebe opcionalmente. Pensa em <div>{{ umValor | example:[um-argumento] }}</div>. [um-argumento] pode ser substituído por qualquer valor. Esse valor é passado para o parâmetro args?: any da função transform. Isto é, a função transform definida na classe do ExamplePipe.

O que quer que a função retorne, (return null;) passa a ser o resultado da operação de pipe. Observa o próximo exemplo para ver um exemplo completo de ExamplePipe. Dependendo da variável que o pipe recebe, ele passa o valor de entrada ou para maiúscula ou para minúscula  no novo resultado. Um argumento inválido ou inexistente fará com que o pipe retorne o mesmo valor de entrada como resultado.

// example.pipe.ts

@Pipe({
  name: 'example'
})
export class ExamplePipe implements PipeTransform {
  transform(value:string, args?:string): any {
    switch(args || null) {
      case 'uppercase':
        return value.toUpperCase();
      case 'lowercase':
        return value.toLowerCase();
      default:
        return value;
    }
  }
}

// app.component.ts

@Component({
  templateUrl: 'app.component.html'
})
export class AppComponent {
  someValue:string = "HeLlO WoRlD!";
}

<!-- app.component.html -->

<!-- Outputs “HeLlO WoRlD!” -->
<h6>{{ someValue | example }}</h6>

<!-- Outputs “HELLO WORLD!” -->
<h6>{{ someValue | example:‘uppercase’ }}</h6>

<!-- Outputs “hello world!” -->
<h6>{{ someValue | example:‘lowercase’ }}</h6>

Hooks do ciclo de vida

Os hooks do ciclo de vida são métodos temporizados. Eles diferem no tempo e na razão pela qual são executados. A alteração de deteção aciona estes métodos. Eles executam dependendo das condições do ciclo atual. O Angular executa constantemente deteção de alterações nos seus dados. Os hooks do ciclo de vida ajudam a gerir os seus efeitos.

Um aspeto importante destes hooks é a sua ordem de execução. Ela nunca se altera. Eles executam com base numa série previsível de eventos de carregamento produzidos a partir de um ciclo de deteção. Isto torna-os previsíveis. Alguns ativos estão apenas disponíveis depois da execução de um determinado hook. Claro, um hook executa apenas sob determinadas condições definidas na alteração atual do ciclo de deteção.

Por ordem de execução:

ngOnChanges

ngOnChanges é acionado seguindo a modificação do @Input vinculado aos membros da classe. Dados vinculados pelo decorator @Input() vêm de uma fonte externa. Quando uma fonte externa altera os dados numa forma detetável, eles são passados novamente pela propriedade @Input.

Com essa atualização, ngOnChanges aciona imediatamente. Também é acionado na inicialização dos dados de entrada. O hook recebe um parâmetro opcional do tipo SimpleChanges. Este valor contém informação das propriedades alteradas vinculadas ao valor de entrada.

ngOnInit

ngOnInit é acionado uma vez na inicialização da propriedade (@Input) de um componente vinculado aos dados. O próximo exemplo terá um aspeto semelhante ao anterior. O hook não aciona porque o ChildComponent recebe os dados de entrada. Em vez disso, ele aciona logo após a renderização da informação para o template do ChildComponent.

ngDoCheck

ngDoCheck é acionado a cada ciclo de deteção de alteração. O Angular executa frequentemente a deteção de alterações. Realizar qualquer ação fará com que faça mais um ciclo. O ngDoCheck é acionado com esses ciclos. Utiliza-o com precaução. Ele pode causar problemas de performance quando implementado incorretamente.

O ngDoCheck permite aos programadores verificarem os seus dados manualmente. Eles podem acionar uma nova data de aplicação condicionalmente. Juntamente com ChangeDetectorRef, os programadores podem criar as suas próprias verificações para a deteção de mudanças.

ngAfterContentInit

ngAfterContentInit é acionado depois da inicialização do DOM do conteúdo do componente (quando ele é carregado pela primeira vez). Esperar por queries @ContentChild(ren) é o principal caso de utilização do hook.

As queries @ContentChild(ren) produzem referências de elemento para o conteúdo do DOM. Como tal, elas não estão disponíveis até que o conteúdo do DOM carregue. É por isso que ngAfterContentInit e sua contrapartida, ngAfterContentChecked, são utilizados.

ngAfterContentChecked

ngAfterContentChecked é acionado depois de cada ciclo de deteção de alteração focado no DOM do conteúdo. Isto permite aos programadores facilitar como o DOM do conteúdo reage a deteção de alterações. O ngAfterContentChecked pode ser acionado frequentemente e causar problemas de performance se for mal implementado.

ngAfterContentChecked também é acionado durante as etapas de inicialização de um componente. Vem logo após o ngAfterContentInit.

ngAfterViewInit

ngAfterViewInit é acionado uma vez depois da vista do DOM terminar a inicialização. A vista carrega sempre logo após o conteúdo. O ngAfterViewInit espera pela resolução das queries @ViewChild(ren). Estes elementos são consultados a partir de dentro da mesma vista do componente.

ngAfterViewChecked

ngAfterViewChecked é acionado depois de qualquer ciclo de deteção de alterações focado na vista do componente. O hook ngAfterViewChecked permite aos programadores facilitar como a deteção de alterações afeta a vista do DOM.

ngOnDestroy

ngOnDestroy é acionado quando um componente é removido da vista e do DOM subsequente. Este hook fornece uma oportunidade para limpar qualquer ponta solta antes de remover um componente.

Vistas

As vistas são quase como o seu próprio DOM virtual. Cada vista contém uma referência para uma secção correspondente do DOM. Dentro de uma vista estão nós que espelham o que está nesta secção. O Angular atribui um nó de vista por cada elemento DOM. Cada nó tem uma referência para um elemento correspondente.

Quando o Angular procura por alterações, este verifica as vistas. O Angular evita o DOM em segundo plano. As vistas referenciam o DOM em seu nome. Existem outros mecanismos para garantir que as alterações de vista renderizem no DOM. Por outro lado, alterações ao DOM não afetam as vistas.

Novamente, as vistas são comuns ao longo de todas as plataformas de desenvolvimento para além do DOM. Mesmo no desenvolvimento para uma plataforma, as vistas ainda são consideradas melhor prática. Elas garantem que o Angular tenha uma interpretação correta do DOM.

As vistas podem não existir em bibliotecas externas. A manipulação direta do DOM é uma saída de emergência para este tipo de cenário. Certamente, não esperes que a aplicação funcione em várias plataformas.

Tipos de vistas

Existem dois tipos principais de vistas: incorporada e de anfitrião.

Também existem recipientes de vista. Eles armazenam vistas incorporadas e de anfitrião e são geralmente referidos como "vistas" simples.

Qualquer classe @Component regista um recipiente de vista (vista) com Angular. Novos componentes geram um seletor personalizado focado num determinado elemento do DOM. A vista anexa-se a esse elemento quando ele aparecer. O Angular sabe agora que o componente existe ao olhar para o modelo de vista.

Vistas de anfitrião e recipientes

Vistas de anfitrião hospedam componentes dinâmicos. Recipientes de vista (vistas) são anexados automaticamente a elementos já existentes no template. As vistas podem ser anexadas a qualquer elemento para além do que é único em classes de componente.

Pensa no método tradicional da geração de componente. Ele começa por criar uma classe, decorá-la com @Component, e preenchê-la com metadados. Esta abordagem ocorre em qualquer elemento de componente predefinido do template.

Tenta utilizar o comando da interface da linha de comandos do Angular (CLI): ng generate component [name-of-component]. Ele produz o seguinte:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  constructor() { }

  ngOnInit() { }
}

Isso cria o componente com o seletor app-example. Ele anexa um recipiente de vista a <app-example></app-example> no template. Se essa for a raiz da aplicação, a sua vista encapsularia todas as outras vistas. A vista raiz marca o início da aplicação na perspetiva do Angular.

Criar componentes dinamicamente e registá-los no modelo de vista do Angular requer mais alguns passos. As diretrizes estruturais ajudam a gerir conteúdo dinâmico (*ngIf, *ngFor, e *ngSwitch…). No entanto, as diretrizes não escalam para aplicações maiores. Demasiadas diretrizes estruturais complicam o template.

É aqui que instanciar componentes a partir de lógicas de classe existentes vem a calhar. Estes componentes precisam de criar uma vista de anfitrião que pode inserir no modelo de vista. As vistas de anfitrião armazenam dados para componentes de maneira a que o Angular reconheça o seu propósito estrutural.

Vistas incorporadas

Diretrizes estruturais criam um ng-template à volta de um pedaço de conteúdo do HTML. O elemento anfitrião da diretriz tem um recipiente de vista anexado. Isto faz com que o conteúdo possa renderizar à condição no seu layout pretendido.

O ng-template armazena nós de vista incorporados a representar cada elemento dentro do seu innerHTML. ng-template não é de todo um elemento do DOM. Ele comenta-se a si próprio. As tags definem a extensão da sua vista incorporada.

Instanciar uma vista incorporada não requer recursos externos para além da sua própria referência. A query @ViewChild pode ir buscar isso.

Com a referência do template, chamar createEmbeddedView a partir dele dá conta do recado. O innerHTML da referência passa a ser a sua própria instância de vista incorporada.

No próximo exemplo, <ng-container></ng-container> é um recipiente de vista. O ng-container é comentado durante a compilação, tal como o ng-template. Por isso, ele fornece uma saída para inserir a vista incorporada mantendo o DOM leve.

O template de vista incorporada é inserido na localização de layout do ng-container. Esta vista recentemente inserida não tem encapsulamento de vista adicional para além do recipiente de vista. Lembra-te de como isto é diferente das vistas de anfitrião (as vistas de anfitrião são anexadas ao seu invólucro de elemento ng-component).

import { Component, AfterViewInit, ViewChild,
ViewContainerRef, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
  <h1>Application Content</h1>
  <ng-container #container></ng-container> <!-- embed view here -->
  <h3>End of Application</h3>

  <ng-template #template>
    <h1>Template Content</h1>
    <h3>Dynamically Generated!</h3>
  </ng-template>
  `
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild("template", { read: TemplateRef }) tpl: TemplateRef<any>;
  @ViewChild("container", { read: ViewContainerRef }) ctr: ViewContainerRef;

  constructor() { }

  ngAfterViewInit() {
    const view =  this.tpl.createEmbeddedView(null);
    this.ctr.insert(view);
  }
}

As queries @ViewChild para o template fazem referência à variável #template. Isto fornece uma referência de template do tipo TemplateRef. TemplateRef armazena a função createEmbeddedView. Esta instancia o template como uma vista incorporada.

O único argumento de createEmbeddedView é para contexto. Se desejares passar metadados adicionais, podes fazê-lo aqui como um objeto. Os campos devem corresponder aos atributos de ng-template (let-[context-field-key-name]=“value”). Passar null indica que não são necessários mais metadados.

Uma segunda query @ViewChild fornece uma referência a ng-container como um ViewContainerRef. As vistas incorporadas são apenas anexadas a outras vistas, nunca ao DOM. O ViewContainerRef referencia a vista que recebe a vista incorporada.

Uma vista incorporada também pode ser inserida na vista de componente do <app-example></app-example>. Esta abordagem posiciona a vista no final da vista do ExampleComponent. No entanto, neste exemplo, queremos que o conteúdo apareça mesmo no meio, onde está ng-container.

A função insert do ViewContainerRef insere a vista incorporada no ng-container. O conteúdo da vista aparece no local pretendido, no centro da vista do ExampleComponent.

Redirecionamento

O redirecionamento é essencial. Muitas aplicações da web modernas hospedam demasiada informação para uma página. Os utilizadores também não devem ter de percorrer todo o conteúdo de uma página. Uma aplicação precisa de se dividir em secções distintas. Uma boa prática do Angular é carregar e configurar o redirecionamento num módulo separado, de nível superior, que é dedicado ao redirecionamento e importado pela raiz, AppModule.

Os utilizadores dão prioridade a informações necessárias. O redirecionamento ajuda-os a encontrar a secção da aplicação com tal informação. Qualquer outra informação útil para outros utilizadores pode existir num caminho totalmente diferente. Com redirecionamento, ambos os utilizadores podem encontrar o que precisam rapidamente. Detalhes irrelevantes permanecem escondidos atrás de caminhos irrelevantes.

O redirecionamento funciona muito bem ao ordenar e restringir acesso a dados da aplicação. Informação sensível nunca deve ser exibida a utilizadores não autorizados. A aplicação pode intervir entre cada caminho. Ela pode examinar a sessão de um utilizador por questões de autenticação. Este exame determina que caminho deve ser renderizado. O redirecionamento dá aos programadores a oportunidade perfeita para validar um utilizador antes de proceder.

Quanto ao Angular, o redirecionamento ocupa toda a sua própria biblioteca dentro do framework. Todos os frameworks modernos de front-end suportam redirecionamento – o Angular não é exceção. O redirecionamento acontece no lado do client utilizando quer redirecionamento de hash, quer de localização. Ambos os estilos permitem ao client gerir os seus próprios caminhos. Não é necessária assistência adicional por parte do servidor após o pedido inicial.

Redirecionamento básico

Os utilitários de redirecionamento exportam com o RouterModule disponível em @angular/router. Não faz parte da biblioteca principal, visto que nem todas as aplicações requerem redirecionamento. A forma mais convencional de introduzir redirecionamento é com o seu próprio módulo de recursos.

À medida que a complexidade cresce, ter o seu próprio módulo irá promover a simplicidade do módulo raiz. Mantê-lo estupidamente simples, sem comprometer a funcionalidade, constitui um bom design para os módulos.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AComponent } from '../../components/a/a.component';
import { BComponent } from '../../components/b/b.component';

// um array de futuros caminhos!
const routes: Routes = [];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

.forRoot(...) é uma função de classe disponível a partir da classe RouterModule. A função aceita um array de objetos Route como Routes. O .forRoot(...) configura caminhos para eager-loading, enquanto que a sua alternativa, .forChild(...), configura para lazy-loading.

Eager-loading significa que os caminhos carregam o seu conteúdo para a aplicação logo no início. Lazy-loading acontece por pedido. O foco deste artigo é o eager-loading. É a abordagem predefinida para carregar uma aplicação. A definição da classe RouterModule tem um aspeto semelhante ao próximo bloco de código.

@NgModule({
  // … montes de metadados ...
})
export class RouterModule {
  forRoot(routes: Routes) {
    // … configuração para caminhos eagerly loaded …
  }

  forChild(routes: Routes) {
    // … configuração para caminhos lazily loaded …
  }
}

Não te preocupes com a configuração dos detalhes que o exemplo omite com comentários. Ter uma compreensão geral é suficiente por enquanto.

Observa como o AppRoutingModule importa o RouterModule enquanto também o exporta. Isto faz sentido visto que o AppRoutingModule é um módulo de recursos. Ele importa para o módulo raiz como um módulo de recursos. Ele expõe diretrizes RouterModule, interfaces e serviços para a árvore de componente raiz.

Isto explica a razão para o AppRoutingModule ter de exportar o RouterModule. Ele faz isto em prol da árvore de componentes subjacente da raiz do módulo. Ele precisa de ter acesso a essas funcionalidades de redirecionamento!

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AComponent } from './components/a/a.component';
import { BComponent } from './components/b/b.component';
import { AppRoutingModule } from './modules/app-routing/app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    AComponent,
    BComponent
  ],
  imports: [
    AppRoutingModule, // redirecionamento de módulo de funcionalidades
    BrowserModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

O token AppRoutingModule importa a partir do topo. O seu token é inserido na raiz do array de importação do módulo. A árvore de componente raiz pode agora utilizar a biblioteca RouterModule. Isto inclui as suas diretrizes, interfaces e serviços tal como já foi mencionado. Um grande agradecimento ao AppRoutingModule por exportar o RouterModule!

As funcionalidades do RouterModule vão dar jeito para os componentes da raiz. O HTML básico para o AppComponent utiliza uma diretriz: router-outlet.

<!-- app.component.html -->

<ul>
  <!-- routerLink(s) aqui -->
</ul>
<router-outlet></router-outlet>
<!-- conteúdo redirecionado é anexado aqui (DEPOIS DO ELEMENTO, NÃO DENTRO!) -->

routerLink é uma diretriz de atributo do RouterModule. Vai ser anexada a cada elemento do <ul></ul> assim que os caminhos estejam configurados. router-outlet é uma diretriz de componente com um comportamento interessante. Funciona mais como um marcador para exibir conteúdo redirecionado. O conteúdo redirecionado é resultante da navegação para um caminho específico. Geralmente, isto significa um único componente, conforme configurado no AppRoutingModule.

O conteúdo redirecionado é renderizado logo após <router-outlet></router-outlet>. Nada é renderizado dentro dele. Isto não faz grande diferença. Dito isto, não esperes que o router-outlet se comporte como um recipiente para conteúdo redirecionado. É simplesmente um marcador para anexar conteúdo redirecionado ao Modelo de Objeto de Documento (DOM).

A primeira questão a ser abordada é que caminhos esta aplicação irá consumir? Bem, existem dois componentes: AComponent e BComponent. Cada um deve ter o seu próprio caminho. Estes podem renderizar a partir do router-outlet do AppComponent, dependendo da localização atual do caminho.

A localização do caminho (ou caminhos) define o que é anexado à origem de um website (por exemplo, http://localhost:4200), através de uma série de barras (/).

// … mesmas importações de antes …

const routes: Routes = [
  {
    path: 'A',
    component: AComponent
  },
  {
    path: 'B',
    component: BComponent
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

http://localhost:4200/A renderiza AComponent a partir do router-outlet do AppComponent. http://localhost:4200/B renderiza BComponent. No entanto, precisas de uma maneira de encaminhar para essas localizações sem utilizar a barra de endereços. Uma aplicação não deve depender da barra de navegação de um browser para a navegação.

O CSS (do inglês, Cascading Stylesheets) global suplementa o HTML abaixo dele. Um link de redirecionamento da aplicação deve ter uma boa aparência. O CSS abaixo também é aplicado a todos os outros exemplos.

/* styles.css global */

ul li {
  cursor: pointer;
  display: inline-block;
  padding: 20px;
  margin: 5px;
  background-color: whitesmoke;
  border-radius: 5px;
  border: 1px solid black;
}

ul li:hover {
  background-color: lightgrey;
}

<!-- app.component.html -->

<ul>
  <li routerLink="/A">Vá para A!</li>
  <li routerLink="/B">Vá para B!</li>
</ul>
<router-outlet></router-outlet>

Isto é redirecionamento básico! Clicar em qualquer um dos elementos routerLink encaminha para o endereço web. Isto redefine-o sem atualizar o browser. O Router do Angular mapeia o endereço encaminhado para o Routes configurado no AppRoutingModule. Ele faz a correspondência com a propriedade path de um único objeto Route dentro do array. A primeira correspondência vence sempre, por isso, caminhos de correspondência total devem estar no final do array Routes.

Caminhos de correspondência total previnem que a aplicação pare de funcionar se não conseguir corresponder a nenhum caminho atual. Isto pode acontecer a partir da barra de endereços, onde o utilizador pode escrever outro caminho. Para isso, o Angular fornece um valor de caminho **, que aceita todos os caminhos. Esse caminho geralmente renderiza um componente PageNotFoundComponent, que exibe "Error 404: Page not found" (Erro 404: página não encontrada).

// … PageNotFoundComponent importado juntamente com todo o resto …

const routes: Routes = [
  {
    path: 'A',
    component: AComponent
  },
  {
    path: 'B',
    component: BComponent
  },
  {
    path: '',
    redirectTo: 'A',
    pathMatch: 'full'
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

O objeto Route que contém redirectTo impede que o PageNotFoundComponent renderize como resultado de http://localhost:4200. Este é o caminho principal da aplicação. Para corrigir isto, o redirectTo redireciona o caminho principal para http://localhost:4200/A. O http://localhost:4200/A torna-se indiretamente o novo caminho principal da aplicação.

O pathMatch: 'full' indica ao objeto Route para fazer correspondência com o caminho principal (http://localhost:4200). Isto corresponde a um caminho vazio.

Estes dois novos objetos Route ficam no final do array, visto que a primeira correspondência vence. O último elemento do array (path: '**') corresponde sempre, por isso fica no final.

Existe mais uma coisa que vale a pena abordar antes de avançarmos. Como é que o utilizador sabe onde ele ou ela está na aplicação, em relação ao caminho atual? Claro que pode existir conteúdo específico para o caminho, mas como se supõe que um utilizador fará essa ligação? Deve existir algum tipo de destaque aplicado ao routerLinks. Deste modo, o utilizador saberá que caminho está ativo para a página da web fornecida.

Esta é uma solução simples. Quando clicas num elemento routerLink, o Router do Angular atribui-lhe foco. Esse foco pode acionar determinados estilos que fornecem feedback útil ao utilizador. A diretriz routerLinkActive pode rastrear este foco para o programador.

<!-- app.component.html -->

<ul>
  <li routerLink="/A" routerLinkActive="active">Vá para A!</li>
  <li routerLink="/B" routerLinkActive="active">Vá para B!</li>
</ul>
<router-outlet></router-outlet>

A atribuição correta de routerLinkActive representa uma string de classes. Este exemplo retrata apenas uma classe (.active), mas qualquer número de classes com espaço delimitado pode ser aplicado. Quando o Router atribui foco a um routerLink, as classes de espaço delimitado são aplicadas ao elemento anfitrião. Quando o foco desaparece, as classes são removidas automaticamente.

/* styles.css global */

.active {
  background-color: lightgrey !important;
}

Os utilizadores podem agora facilmente reconhecer como o caminho atual e o conteúdo da página coincidem. O destaque lightgrey aplica-se à correspondência do routerLink com o caminho atual. !important garante que o destaque se sobrepõe a estilo em linha.

Tradução realizada em português europeu

Imagina que estás a criar um site para um cliente, uma pequena loja familiar, que tem apenas duas páginas.

Não é muita coisa. Por isso, quando terminas a página principal e começas a trabalhar na página de contactos, simplesmente crias um ficheiro HTML e copias todo o código da primeira página.

O cabeçalho e o rodapé já têm bom aspeto e tudo o que precisas fazer é alterar o conteúdo restante.

O que fazer, no entanto, se o teu cliente quiser 10 páginas? Ou 20? Como farias se ele pedir pequenas alterações no cabeçalho e no rodapé ao longo do desenvolvimento?

De repente, qualquer alteração, por mais pequena que seja, tem de ser repetida ao longo de todos os ficheiros.

Esse é um dos maiores problemas que coisas como o React ou Handlebars.js ajudam a resolver: qualquer código, em especial, coisas estruturais como o cabeçalho ou o rodapé, pode ser escrito uma vez e reutilizado ao longo do projeto.

Até bem recentemente, era impossível utilizar componentes em HTML simples e em JavaScript. Porém, com a introdução dos Web Components, é possível criar componentes reutilizáveis sem utilizar coisas como o React.

O que são os Web Components?

Os Web Components são, na realidade, uma coleção de algumas tecnologias diferentes que te permitem criar elementos HTML personalizados.

Essas tecnologias são:

• Templates HTML (texto em inglês): fragmentos de código HTML utilizando elementos <template> que não vão ser renderizados até que sejam anexados à página com JavaScript.
• Elementos personalizados (texto em inglês): APIs do JavaScript com vasto suporte que te permitem criar elementos do DOM. Assim que criares e registares um elemento personalizado através dessas APIs, poderás utilizá-lo de modo semelhante a um componente do React.
• Shadow DOM (texto em inglês): é um DOM menor, encapsulado, que está isolado do DOM principal e renderizado separadamente. Os estilos e scripts que crias para teus componentes personalizados no Shadow DOM não afetarão outros elementos no DOM principal.

Vamos abordar cada uma dessas tecnologias ao longo do tutorial.

Como utilizar templates de HTML

A primeira peça do quebra-cabeças é aprender como utilizar templates de HTML para criar código HTML reutilizável.

Vamos observar um exemplo de uma simples mensagem de boas-vindas:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="index.js" type="text/javascript" defer></script>
  </head>
  <body>
    <template id="welcome-msg">
      <h1>Hello, World!</h1>
      <p>And all who inhabit it</p>
    </template>
  </body>
<html>

Se observares a página, nem os elementos <h1> nem os <p> são renderizados. Se, contudo, abrires a consola de desenvolvimento, verás que ambos os elementos foram analisados:

Para renderizar mesmo a mensagem de boas-vindas, vais precisar de utilizar um pouco de JavaScript:

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

Embora esse seja um exemplo bastante simples, já é possível veres como a utilização de templates torna mais fácil reutilizar código ao longo da página.

O principal problema é que, pelo menos no exemplo atual, o código da mensagem de boas-vindas está misturado com o resto do conteúdo da página. Se desejares alterar a mensagem mais tarde, terás de alterar o código em vários ficheiros.

Em vez disso, podes puxar o template HTML para o ficheiro JavaScript, de maneira a que qualquer página onde o JavaScript está incluido irá renderizar a mensagem de boas-vindas:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="index.js" type="text/javascript" defer></script>
  </head>
  <body>
      
  </body>
<html>

const template = document.createElement('template');

template.innerHTML = `
  <h1>Hello, World!</h1>
  <p>And all who inhabit it</p>
`;

document.body.appendChild(template.content);

Agora que temos tudo no ficheiro JavaScript, não é necessário criares um elemento <template> – podes simplesmente criar um elemento <div> ou <span>.

No entanto, os elementos <template> podem ser combinados com um elemento <slot>, que te permite fazer coisas como alterar o texto para elementos dentro de <template>. É um pouco fora do âmbito deste tutorial. Por isso, podes ler mais sobre elementos <slot> na MDN (texto em inglês).

Como criar elementos personalizados

Uma coisa que podes ter reparado ao utilizar templates de HTML é que pode ser complicado inserir o teu código no local correto. O exemplo anterior da mensagem de boas-vindas estava apenas anexado à página.

Se já existisse conteúdo na página, digamos, uma imagem de banner, a mensagem de boas-vindas apareceria abaixo da imagem.

Como elemento personalizado, a tua mensagem de boas-vindas poderia ter este aspeto:

<welcome-message></welcome-message>

Poderias colocá-la em qualquer local da página.

Com isto em mente, vamos observar os elementos personalizados e criar os nossos próprios elementos de cabeçalho e rodapé ao estilo do React.

Configuração

Para um site de portfólio, podes ter algum código predefinido que se pareça com isto:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <main>
      <!-- O conteúdo da tua página -->
    </main>
  </body>
<html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #333;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

Cada página terá o mesmo cabeçalho e rodapé. Por isso, faz sentido criar um elemento personalizado para cada um deles.

Vamos começar pelo cabeçalho.

Definir um elemento personalizado

Primeiro, cria uma pasta chamada components. Dentro dessa pasta, cria um ficheiro chamado header.js, com o seguinte código:

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

É apenas uma simples class do ES5 a declarar o teu componente Header personalizado, com o método constructor e a palavra-chave especial super. Podes ler mais sobre isto na MDN.

Ao estender a classe genérica HTMLElement, podes criar qualquer tipo de elemento que queiras. Também é possível extender elementos específicos como HTMLParagraphElement.

Registar o teu elemento personalizado

Antes de começares a utilizar o teu elemento personalizado, vais precisar de o registar com o método customElements.define():

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('header-component', Header);

Esse método recebe pelo menos dois argumentos.

O primeiro é uma DOMString que vais utilizar quando estiveres a adicionar o componente à página, neste caso, <header-component></header-component>.

O próximo é a classe do componente que criaste anteriormente, neste caso, a classe Header.

O terceiro argumento, é opcional, e descreve qual é o elemento HTML existente do qual o teu elemento personalizado optional vai herdar propriedades, por exemplo, {extends: 'p'}. No entanto, não vamos utilizar esta funcionalidade neste tutorial.

Utilizar callbacks de ciclo de vida para adicionar o cabeçalho à página

Existem quatro callbacks de ciclo de vida especiais para elementos personalizados que podemos utilizar para anexar o código do cabeçalho à página: connectedCallback, attributeChangeCallback, disconnectedCallback e adoptedCallback.

Destas callbacks, connectedCallback é uma das mais utilizadas. connectedCallback executa cada vez que o teu elemento personalizado é inserido no DOM.

Podes ler mais sobre outras callbacks aqui.

Para o nosso simples exemplo, connectedCallback é suficiente para adicionar um cabeçalho à página:

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      <style>
        nav {
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color:  #0a0a23;
        }

        ul {
          padding: 0;
        }
        
        a {
          font-weight: 700;
          margin: 0 25px;
          color: #fff;
          text-decoration: none;
        }
        
        a:hover {
          padding-bottom: 5px;
          box-shadow: inset 0 -2px 0 0 #fff;
        }
      </style>
      <header>
        <nav>
          <ul>
            <li><a href="about.html">About</a></li>
            <li><a href="work.html">Work</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </header>
    `;
  }
}

customElements.define('header-component', Header);

Depois, no index.html, adiciona o script components/header.js e <header-component></header-component> logo acima do elemento <main>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="components/header.js" type="text/javascript" defer></script>
  </head>
  <body>
    <header-component></header-component>
    <main>
      <!-- O conteúdo da tua página -->
    </main>
  </body>
<html>

O teu componente de cabeçalho reutilizável, agora, deve ser renderizado na página:

Agora, adicionar um cabeçalho à página é tão simples como adicionar uma tag <script> a apontar para components/header.js, e adicionar <header-component></header-component> onde quiseres.

Nota que, visto que o cabeçalho e a sua estilização estão a ser inseridos diretamente no DOM principal, é possível estilizá-lo no ficheiro style.css.

Se, contudo, observares os estilos do cabeçalho em connectedCallback, estes são bastante genéricos e podem afetar outros estilos na página.

Por exemplo, se adicionarmos o Font Awesome e um componente de rodapé a index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="components/header.js" type="text/javascript" defer></script>
    <script src="components/footer.js" type="text/javascript" defer></script>
  </head>
  <body>
    <header-component></header-component>
    <main>
      <!-- O conteúdo da tua página -->
    </main>
    <footer-component></footer-component>
  </body>
<html>

class Footer extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      <style>
        footer {
          height: 60px;
          padding: 0 10px;
          list-style: none;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #dfdfe2;
        }
        
        ul li {
          list-style: none;
          display: inline;
        }
        
        a {
          margin: 0 15px;
          color: inherit;
          text-decoration: none;
        }
        
        a:hover {
          padding-bottom: 5px;
          box-shadow: inset 0 -2px 0 0 #333;
        }
        
        .social-row {
          font-size: 20px;
        }
        
        .social-row li a {
          margin: 0 15px;
        }
      </style>
      <footer>
        <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="work.html">Work</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
        <ul class="social-row">
          <li><a href="https://github.com/my-github-profile"><i class="fab fa-github"></i></a></li>
          <li><a href="https://twitter.com/my-twitter-profile"><i class="fab fa-twitter"></i></a></li>
          <li><a href="https://www.linkedin.com/in/my-linkedin-profile"><i class="fab fa-linkedin"></i></a></li>
        </ul>
      </footer>
    `;
  }
}

customElements.define('footer-component', Footer);

Aqui está como ficaria o aspeto da página:

A estilização do rodapé sobrepõe-se à estilização do cabeçalho, alterando a cor dos links. Este é o comportamento esperado para o CSS, mas seria interessante se a estilização de cada componente estivesse vinculada a esse componente, sem afetar outras coisas na página.

Bem, é mesmo onde o Shadow DOM brilha. Ou escurece? De qualquer modo, o Shadow DOM pode fazer isso.

Como utilizar o Shadow DOM com elementos personalizados

O Shadow DOM funciona como uma instância separada e mais pequena do DOM principal. Em vez de funcionar como uma cópia do DOM principal, o Shadow DOM é mais uma sub-árvore apenas para o teu elemento personalizado. Qualquer coisa adicionada a ele, especialmente os estilos, está vinculada a esse elemento personalizado em particular.

De certo modo, é como utilizar const e let em vez de var.

Vamos começar por refatorizar o componente de cabeçalho:

const headerTemplate = document.createElement('template');

headerTemplate.innerHTML = `
  <style>
    nav {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color:  #0a0a23;
    }

    ul {
      padding: 0;
    }
    
    ul li {
      list-style: none;
      display: inline;
    }
    
    a {
      font-weight: 700;
      margin: 0 25px;
      color: #fff;
      text-decoration: none;
    }
    
    a:hover {
      padding-bottom: 5px;
      box-shadow: inset 0 -2px 0 0 #fff;
    }
  </style>
  <header>
    <nav>
      <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="work.html">Work</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
`;

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    
  }
}

customElements.define('header-component', Header);

A primeira coisa que precisas fazer é utilizar o método .attachShadow() para anexar uma raiz do Shadow Dom ao teu elemento de componente de cabeçalho personalizado. Em connectedCallback, adiciona o seguinte código:

...
class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: 'closed' });
  }
}

customElements.define('header-component', Header);

Repara que estamos a passar um objeto para .attachShadow() com uma opção, mode: 'closed'. Isto significa apenas que o Shadow DOM do componente de cabeçalho não é acessível a partir de JavaScript externo.

Se quiseres manipular o Shadow DOM do componente de cabeçalho mais tarde com JavaScript fora do ficheiro components/header.js, simplesmente muda a opção para mode: 'open'.

Por fim, anexa shadowRoot à página com o método .appendChild():

...

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: 'closed' });

    shadowRoot.appendChild(headerTemplate.content);
  }
}

customElements.define('header-component', Header);

Agora, visto que os estilos de componente do cabeçalho estão encapsulados no seu Shadow DOM, a página deve ter este aspeto:

Aqui está o componente de rodapé refatorizado para utilizar o Shadow DOM:

const footerTemplate = document.createElement('template');

footerTemplate.innerHTML = `
  <style>
    footer {
      height: 60px;
      padding: 0 10px;
      list-style: none;
      display: flex;
      flex-shrink: 0;
      justify-content: space-between;
      align-items: center;
      background-color: #dfdfe2;
    }

    ul {
      padding: 0;
    }
    
    ul li {
      list-style: none;
      display: inline;
    }
    
    a {
      margin: 0 15px;
      color: inherit;
      text-decoration: none;
    }
    
    a:hover {
      padding-bottom: 5px;
      box-shadow: inset 0 -2px 0 0 #333;
    }
    
    .social-row {
      font-size: 20px;
    }
    
    .social-row li a {
      margin: 0 15px;
    }
  </style>
  <footer>
    <ul>
      <li><a href="about.html">About</a></li>
      <li><a href="work.html">Work</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <ul class="social-row">
      <li><a href="https://github.com/my-github-profile"><i class="fab fa-github"></i></a></li>
      <li><a href="https://twitter.com/my-twitter-profile"><i class="fab fa-twitter"></i></a></li>
      <li><a href="https://www.linkedin.com/in/my-linkedin-profile"><i class="fab fa-linkedin"></i></a></li>
    </ul>
  </footer>
`;

class Footer extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: 'closed' });

    shadowRoot.appendChild(footerTemplate.content);
  }
}

customElements.define('footer-component', Footer);

Contudo, se observares a página, podes ver que os ícones do Font Awesome estão em falta:

Agora que o componente de rodapé está encapsulado dentro do seu próprio Shadow DOM, já não tem acesso ao link CDN do Font Awesome em index.html.

Vamos observar rapidamente a razão disto acontecer e como voltar a colocar o Font Awesome a funcionar.

Encapsulamento e o Shadow DOM

Enquanto que o Shadow DOM impede que os estilos dos teus componentes afetem o resto da página, alguns estilos globais podem infiltrar-se na mesma nos teus componentes.

Nos exemplos acima, isto era uma funcionalidade útil. Por exemplo, o componente de rodapé herda a declaração color: #333 que é definida em style.css. Isto acontece porque color é uma das propriedades que podem ser herdadas, juntamente com font, font-family, direction, entre outras.

Se quiseres impedir este comportamento e estilizar cada componente completamente do zero, podes fazê-lo com apenas algumas linhas de CSS:

:host {
  all: initial;
  display: block;
}

:host é um pseudosseletor que seleciona o elemento que está a hospedar o Shadow DOM. Neste caso, é o teu componente personalizado.

Então, a declaração all: initial redefine todas as propriedades CSS de volta para os seus valores iniciais. display: block faz a mesma coisa para a propriedade display e redefine a propriedade de volta para a predefinição do navegador, block.

Para uma lista completa de propriedades do CSS que podem ser herdadas, observa esta resposta no Stack Overflow (texto em inglês).

Como utilizar o Font Awesome com o Shadow DOM

Agora, podes estar a pensar, se font, font-family e outras propriedades do CSS relacionadas com tipos de letra são propriedades que podem ser herdadas, porque é que o Font Awesome não carrega agora que o componente de rodapé está a utilizar o Shadow DOM?

Acontece que, para coisas como fontes e outros recursos, estas precisam de ser referenciadas tanto no DOM principal como no Shadow DOM para funcionar corretamente.

Felizmente, existem algumas formas simples de corrigir isto.

Observação: todos estes métodos ainda requerem que o Font Awesome seja incluído em index.html, com o elemento link tal como no trecho de código acima.

Nº 1: Link para o Font Awesome dentro do teu componente

A forma mais direta de fazer com que o Font Awesome funcione no teu componente do Shadow DOM é incluir um link para ele dentro do próprio componente:

const footerTemplate = document.createElement('template');

footerTemplate.innerHTML = `
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
  <style>
    footer {
      height: 60px;
      padding: 0 10px;
      list-style: none;
...

Uma coisa a ter em conta é que, embora pareça que estás a causar que o navegador carregue duas vezes o Font Awesome (uma para o DOM principal e novamente para o componente), os navegadores são suficientemente inteligentes para não buscar o mesmo recurso novamente.

Aqui está o separador de rede a mostrar que o Chrome vai buscar o Font Awesome uma só vez:

Nº 2: Importar o Font Awesome dentro do teu componente

De seguida, podes utilizar @import e url() para carregar o Font Awesome no teu componente:

const footerTemplate = document.createElement('template');

footerTemplate.innerHTML = `
  <style>
    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css");

    footer {
      height: 60px;
      padding: 0 10px;
      list-style: none;
...

Nota que o URL deve ser o mesmo que estás a utilizar em index.html.

Nº 3: Utilizar JavaScript para carregar dinamicamente o Font Awesome para o teu componente

Por fim, a forma mais prática de carregar o Font Awesome dentro do teu componente é utilizar um pouco de JavaScript:

...
class Footer extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    // Query para o DOM principal para FA
    const fontAwesome = document.querySelector('link[href*="font-awesome"]');
    const shadowRoot = this.attachShadow({ mode: 'closed' });

    // Carregar condicionalmente FA para o componente
    if (fontAwesome) {
      shadowRoot.appendChild(fontAwesome.cloneNode());
    }

    shadowRoot.appendChild(footerTemplate.content);
  }
}

customElements.define('footer-component', Footer);

Este método é baseado nesta resposta no Stack Overflow (texto em inglês) e funciona de modo bastante simples. Quando o componente carrega, se um elemento link a apontar para o Font Awesome existir, então é clonado e anexado ao Shadow DOM do componente:

Código final

Aqui está como fica o código final ao longo de todos os ficheiros, utilizando o método nº 3 para carregar o Font Awesome no componente de rodapé:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="components/header.js" type="text/javascript" defer></script>
    <script src="components/footer.js" type="text/javascript" defer></script>
  </head>
  <body>
    <header-component></header-component>
    <main>
      <!-- O conteúdo da tua página -->
    </main>
    <footer-component></footer-component>
  </body>
<html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  color: #333;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

const headerTemplate = document.createElement('template');

headerTemplate.innerHTML = `
  <style>
    nav {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color:  #0a0a23;
    }

    ul {
      padding: 0;
    }
    
    ul li {
      list-style: none;
      display: inline;
    }
    
    a {
      font-weight: 700;
      margin: 0 25px;
      color: #fff;
      text-decoration: none;
    }
    
    a:hover {
      padding-bottom: 5px;
      box-shadow: inset 0 -2px 0 0 #fff;
    }
  </style>
  <header>
    <nav>
      <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="work.html">Work</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
`;

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: 'closed' });

    shadowRoot.appendChild(headerTemplate.content);
  }
}

customElements.define('header-component', Header);

const footerTemplate = document.createElement('template');

footerTemplate.innerHTML = `
  <style>
    footer {
      height: 60px;
      padding: 0 10px;
      list-style: none;
      display: flex;
      flex-shrink: 0;
      justify-content: space-between;
      align-items: center;
      background-color: #dfdfe2;
    }

    ul {
      padding: 0;
    }
    
    ul li {
      list-style: none;
      display: inline;
    }
    
    a {
      margin: 0 15px;
      color: inherit;
      text-decoration: none;
    }
    
    a:hover {
      padding-bottom: 5px;
      box-shadow: inset 0 -2px 0 0 #333;
    }
    
    .social-row {
      font-size: 20px;
    }
    
    .social-row li a {
      margin: 0 15px;
    }
  </style>
  <footer>
    <ul>
      <li><a href="about.html">About</a></li>
      <li><a href="work.html">Work</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <ul class="social-row">
      <li><a href="https://github.com/my-github-profile"><i class="fab fa-github"></i></a></li>
      <li><a href="https://twitter.com/my-twitter-profile"><i class="fab fa-twitter"></i></a></li>
      <li><a href="https://www.linkedin.com/in/my-linkedin-profile"><i class="fab fa-linkedin"></i></a></li>
    </ul>
  </footer>
`;

class Footer extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const fontAwesome = document.querySelector('link[href*="font-awesome"]');
    const shadowRoot = this.attachShadow({ mode: 'closed' });

    if (fontAwesome) {
      shadowRoot.appendChild(fontAwesome.cloneNode());
    }

    shadowRoot.appendChild(footerTemplate.content);
  }
}

customElements.define('footer-component', Footer);

Para terminar

Abordamos muita coisa aqui. Podes já ter decidido simplesmente utilizar React ou Handlebars.js em vez disso.

São ambas óptimas opções!

Mesmo assim, para um projeto mais pequeno onde vais precisar apenas de alguns componentes reutilizáveis, uma biblioteca completa ou linguagem de template pode ser demasiado.

Esperançosamente, agora tens a confiança para criar os teus próprios componentes HTML reutilizáveis. Agora, vai lá e cria algo excelente (e reutilizável).

Escrito por: Elena-Cristina Conacel

Tradução em português europeu

O sistema de grelha do Bootstrap 4 é utilizado para layouts responsivos.

Um layout responsivo representa a forma como os elementos ficam alinhados numa página em resoluções diferentes. É importante compreender como utilizar o sistema de grelha (do inglês, grid system) antes de aprender qualquer outro componente do Bootstrap 4, porque, para qualquer elemento que utilizes, terás de colocá-lo algures no ecrã.

Vamos começar!

Índice

• Recipientes do Bootstrap 4
• Linhas do Bootstrap 4
• Colunas do Bootstrap 4
• Leitura adicional

A grelha do Bootstrap 4 consiste em recipientes (do inglês, containers), linhas e colunas. Vamos observar cada um e explicá-los.

Recipientes do Bootstrap 4

Um recipiente do Bootstrap 4 é um elemento com a classe .container. O recipiente é a raiz do sistema de grelha do Bootstrap 4 e é utilizado para controlar a largura do layout.

O recipiente do Bootstrap 4 contém todos os elementos na página. Isto quer dizer que a tua página deve ter a seguinte estrutura: primeiro o corpo da página HTML, dentro dele, deves adicionar um recipiente e todos os outros elementos dentro do recipiente.

<body>
   <div class="container">
    ...
   </div>
</body>

A simples classe .container define a largura do layout com base na largura do ecrã. Esta posiciona o conteúdo no centro da página, alinhando-o horizontalmente. Existe espaçamento igual entre o recipiente do Bootstrap 4 e o limite esquerdo e direito da página.

O .container diminui gradualmente à medida que a largura do ecrã diminui e ocupa a largura toda em mobile. A largura do recipiente é definida dentro da biblioteca do Bootstrap 4 para todas as dimensões de ecrã. Podes ver os tamanhos exatos aqui.

Um recipiente de largura completa ocupa 100% da dimensão do ecrã, independentemente da largura do ecrã. Para utilizá-lo é necessário adicionares a classe .container-fluid.

<div class="container">
  Hello! I am in a simple container.
</div>

<div class="container-fluid">
  Hello! I am in a full-width container.
</div>

Podes observar o CodePen aqui.

Para ver as diferenças entre os dois tipos de recipientes, podes abrir o pen na tua consola e alternar entre dimensões de ecrã.

Linhas do Bootstrap 4

As linhas do Bootstrap 4 são cortes horizontais do ecrã. São utilizadas apenas como invólucros das colunas. Para utilizá-las, precisas da classe .row.

<div class="row">
  ...
</div>

Aqui estão as coisas mais importantes para memorizares sobre as linhas do Bootstrap 4:

• São utilizadas apenas para conter colunas. Se colocares outros elementos dentro da linha juntamente com colunas não irás obter o resultado esperado.
• Têm de ser colocadas dentro de recipientes. Se não fizeres isto, irás obter um scroll horizontal na tua página. Isto acontece porque as linhas têm margens negativas à esquerda e de 15 à direita. O recipiente tem paddings de 15px. Por isso, ele neutraliza as margens.
• As colunas têm de ser descendentes da linha. Caso contrário, não vão ficar alinhadas. As linhas e colunas são criadas para trabalhar em conjunto nesta hierarquia rigorosa.

Colunas do Bootstrap 4

Podemos agora avançar para a parte interessante deste tutorial, as colunas do Bootstrap 4. As colunas são óptimas! Ajudam-te a dividir o ecrã horizontalmente.

Se colocares apenas uma coluna na tua linha, esta irá ocupar toda a largura. Se adicionares duas colunas, cada uma delas irá ocupar 1/2 da largura. O mesmo acontece para qualquer número de colunas.

<div class="container">
  <div class="row">
    <div class="col">
      ...
    </div>
  </div>
  <div class="row">
    <div class="col">
      ...
    </div>
    <div class="col">
       ...
    </div>
  </div>
  <div class="row">
    <div class="col">
      ...
    </div>
    <div class="col">
       ...
    </div>
    <div class="col">
      ...
    </div>
    <div class="col">
       ...
    </div>
    <div class="col">
       ...
    </div>
  </div>
</div>

Podes ver este código no CodePen.

Observação: as colunas não estão coloridas. Apenas adicionei cores para uma descrição mais atrativa visualmente/de maneira a que tenham melhor aspeto.

Definir dimensões para colunas

Utilizar a classe .col define dinamicamente a largura para as colunas. Isto quer dizer que, dependendo do número de colunas numa linha, a largura da coluna será a largura do recipiente dividida pelo número de colunas.

Existe, porém, outra forma de definir colunas. Podes utilizar classes para colunas e definir o seu tamanho.

Desde o início, a grelha do Bootstrap 4 consiste em 12 colunas. Podes selecionar qualquer dimensão entre 1 e 12 para a tua coluna. Se quiseres 3 colunas iguais, podes utilizar .col-4 em cada uma (porque 3*4 colunas cada = 12). Como alternativa, podes definir dimensões diferentes para elas. Aqui estão alguns exemplos:

<div class="row">
  <div class="col-6">
    ...
  </div>
  <div class="col-6">
     ...     
  </div>
</div>
<div class="row">
  <div class="col-5">
    ...
  </div>
  <div class="col-7">
     ...     
  </div>
</div>
<div class="row">
  <div class="col-3">
    ...
  </div>
  <div class="col-4">
     ...     
  </div>
</div>
<div class="row">
  <div class="col-6">
    ...
  </div>
  <div class="col-7">
     ...     
  </div>
</div>

Podes ver este código no CodePen.

Se a soma das colunas na tua linha não resultar em 12, elas não vão ocupar toda a linha. Se a soma das colunas ultrapassar 12 então a coluna segue para a linha seguinte. A primeira linha irá exibir apenas os primeiros elementos cuja soma resulta em 12 ou menos.

Definir pontos de quebra para colunas

Se pegares no exemplo acima e o quiseres exibir em mobile, podes deparar-te com alguns problemas. Exibir cinco colunas em mobile vai tornar o conteúdo ilegível.

É aqui que entram em ação os componentes mais potentes do Bootstrap 4. De maneira a teres layouts diferentes em ecrãs de dimensões diferentes, não vais precisar de escrever media queries. Em vez disso, podes utilizar os pontos de quebra das colunas.

Um ponto de quebra é uma variável do Bootstrap 4 que representa a resolução de ecrã. Quando estás a especificar um ponto de quebra para uma classe, estás a indicar à classe para estar ativa apenas em resoluções que são pelo menos tão grandes como o número que o ponto de quebra armazena.

A classe mais simples que vamos aprender é a classe .col-[breakpoint]. Quando utilizas esta classe, estás a definir o comportamento para as colunas apenas quando são exibidas em dispositivos com um resolução de pelo menos o que está definido no ponto de quebra. Até ao ponto de quebra fornecido, as tuas colunas vão alinhar-se verticalmente desde o início. Após o teu ponto de quebra, estas vão alinhar-se horizontalmente por causa da classe.

O Bootstrap tem 4 pontos de quebra que podes utilizar:

• .col-sm para telemóveis maiores (dispositivos com resoluções ≥ 576px);
• .col-md para tablets (≥768px);
• .col-lg para computadores portáteis (≥992px);
• .col-xl para computadores (≥1200px)

Digamos que queres exibir duas colunas, uma após a outra verticalmente, em ecrãs pequenos e na mesma linha em ecrãs maiores. Terás de especificar o ponto de quebra onde as colunas ficam na mesma linha.

No nosso exemplo, vamos utilizar o ponto de quebra .col-lg e ver como as colunas ficam em ecrãs diferentes. Para resoluções que são menores do que o ponto de quebra fornecido (<992px), as colunas serão exibidas verticalmente. Isto significa que em dispositivos mobile e tablets, as colunas terão este aspeto:

Para dispositivos que têm uma resolução que é maior ou igual ao ponto de quebra (≥992px), as colunas ficam na mesma linha. Isto significa que, em portáteis e computadores vais obter este resultado:

<div class="row">
 <div class="col-lg">
   ...
 </div>
 <div class="col-lg">
    ...   
 </div>
</div>

Podes ver este código no CodePen. Se abrires o Codepen noutra janela e observares a página em resoluções diferentes, verás as colunas a alterar o seu posicionamento.

Se quisesses que as duas colunas ficassem na mesma linha a partir da dimensão de telemóveis maiores, poderias utilizar .col-sm, para tablets .col-md e para ecrãs extra largos .col-xl.

Definir dimensões e pontos de quebra para colunas

Podes combinar as dimensões e os pontos de quebra e utilizar apenas uma classe com o formato .col-[breakpoint]-[tamanho].

Por exemplo, se quiseres que três colunas de dimensões diferentes fiquem alinhadas numa linha com a resolução de um portátil, precisas de fazer isto:

<div class="row">
  <div class="col-lg-4">
    ...
  </div>
  <div class="col-lg-3">
    ...
  </div>
  <div class="col-lg-5">
    ...     
  </div>
</div>

Irás obter este resultado em resoluções <992px:

Para ecrãs que são ≥992px, o resultado será este:

De novo, podes ver este código no CodePen.

Se, porém, quiseres exibir uma coluna por linha em resoluções mobile mais pequenas, duas colunas por linha em tablets e quatro em portáteis ou dispositivos de maior resolução, o que podes fazer?

Adicionas várias classes para uma única coluna a descrever o comportamento em cada resolução. Ao utilizar várias classes, especificas que o conteúdo ocupará seis lugares em tablets e três em portáteis.

<div class="row">
  <div class="col-sm-6 col-lg-3">
    ...
  </div>
  <div class="col-sm-6 col-lg-3">
    ...
  </div>
  <div class="col-sm-6 col-lg-3">
     ...     
  </div>
  <div class="col-sm-6 col-lg-3">
     ...     
  </div>
</div>

O resultado será apresentado assim em tablets:

Em portáteis e resoluções maiores, terás este resultado:

Este exemplo também está disponível no CodePen.

Como exercício, podes tentar criar linhas com números diferentes de colunas, dependendo da dimensão do ecrã, e verificar o comportamento na consola do teu navegador.

Deslocar colunas

Se não quiseres que as colunas fiquem encostadas umas às outras, podes utilizar a classe .offset-[breakpoint]-[tamanho], juntamente com o .col-[breakpoint]-[tamanho].

Utilizar esta classe é como adicionar uma coluna vazia antes da tua coluna. Aqui está um simples exemplo:

<div class="row">
  <div class="col-md-4 offset-md-4">
     ...     
  </div>  
  <div class="col-md-4">
     ...     
  </div>  
</div>

Podes ver este código no CodePen.

Podes utilizar a classe em qualquer coluna da linha. Aqui estão mais alguns exemplos:

<div class="row">
  <div class="col-md-4">
     ...     
  </div>  
  <div class="col-md-4 offset-md-4">
     ...     
  </div>  
</div>
<div class="row">
  <div class="col-md-4 offset-md-2">
     ...    
  </div>  
  <div class="col-md-4 offset-md-2">
     ...     
  </div>  
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">
     ...
  </div>   
</div>

Colocar linhas dentro de colunas

Pode ser uma surpresa, mas podes adicionar uma linha dentro de uma coluna!

A linha em questão (que terá a largura da sua coluna pai) será, então, dividida em 12 colunas (mais pequenas) que podes referenciar através das classes .col-* .

Vamos observar o que acontece quando inserimos uma nova linha dentro de uma coluna:

<div class="row">
    <div class="col-md-8">
        ...
        <div class="row">
            <div class="col-md-5">
               ...
            </div>
            <div class="col-md-7">
               ...   
            </div>
        </div>
      </div>     
    </div>
    <div class="col-md-4">
       ...
    </div>
</div>

Podes ver este código no CodePen.

Ao saber isto, podes aprofundar muito a organização da tua informação. As colunas vão fornecer uma maneira simples de poderes gerir o teu espaço.

Isto termina os conhecimentos básicos em relação ao sistema responsivo de grelha do Bootstrap 4.

Leitura adicional

Se tiveres mais algum tempo, aqui estão alguns recursos bastante úteis:

• Documentação oficial do sistema de grelha (link em inglês), do GetBootstrap
• Tutorial em vídeo (link em inglês), do Scrimba

Este artigo foi publicado inicialmente no blog BootstrapBay. Faz parte de uma grande série de tutoriais do Bootstrap 4 chamada 14 Days of Bootstrap 4 (14 Dias de Bootstrap 4, em inglês). Se desejares continuar a aprender sobre os componentes do Bootstrap 4, estes artigos são um bom sítio para começar.

Se quiseres alavancar o teu desenvolvimento com um template do Bootstrap, podes verificar o nosso marketplace.

Antes de te aprofundares, contudo, tira um momento para celebrar as tuas novas habilidades obtidas!

Escrito por: YK Sugi

Tradução realizada em português europeu.

Se estás a pensar em aprender Python — ou se começaste recentemente a aprendê-lo — podes estar a perguntar-te:

"No que posso exatamente utilizar o Python?"

Bem, essa é uma pergunta complicada, porque existem diversas aplicações para o Python.

Ao longo do tempo, contudo, observamos que existem 3 aplicações populares principais para o Python:

• Desenvolvimento para a web
• Ciências da Informação — incluindo machine learning, análise de dados e visualização de dados
• Criação de scripts

Vamos falar sobre cada uma delas.

Desenvolvimento para a web

Frameworks da web que com base em Python, como o Django e o Flask, tornaram-se recentemente muito populares para desenvolvimento para a web.

Estas frameworks da web ajudam-te a criar código do lado do servidor (código back-end) em Python. Esse é o código que corre no teu servidor, ao contrário dos dispositivos dos utilizadores e browsers (código front-end). Se não estiveres familiarizado(a) com a diferença entre código back-end e código front-end, observa a minha nota de rodapé abaixo.

Espera! Por que preciso de uma framework para a web?

É porque uma framework web torna muito mais fácil criar a lógica de back-end comum. Isto inclui mapear URLs diferentes em pedaços de código em Python, lidar com bases de dados e gerar os ficheiros HTML que os utilizadores veem nos seus browsers.

Que framework para a web do Python devo utilizar?

Django e Flask são duas das frameworks para a web mais populares do Python. Recomendo a utilização de uma delas se estás a iniciar.

Qual é a diferença entre Django e Flask?

Existe um excelente artigo (em inglês) sobre este tópico, escrito por Gareth Dwyer. Por isso, permite-me que coloque aqui um excerto:

Contrastes principais:

O Flask fornece simplicidade, flexibilidade e controlo refinado. É imparcial (permite-te decidir como desejas implementar as coisas).

O Django fornece uma experiência totalmente inclusiva: podes ter um painel de administrador, interfaces de bases de dados, um ORM [object-relational mapping], uma estrutura de pastas para as tuas aplicações e projetos logo à partida.

Deves provavelmente escolher:

O Flask, se o teu foco for a experiência e as oportunidades de aprendizagem, ou se desejares ter mais controlo sobre quais os componentes a utilizar (tais como quais as bases de dados que desejas utilizar e como desejas interagir com elas).

O Django, se o teu foco for o produto final. especialmente se estiveres a trabalhar numa aplicação direta como por exemplo um site de notícias, uma loja online ou um blogue, e desejas que exista sempre uma forma única e óbvia de fazer as coisas.

Por outras palavras, se não tiveres muita prática, o Flask é provavelmente a melhor escolha, porque tem menos componentes para lidar. Além disto, o Flask é uma escolha melhor se desejas mais personalização.

Por outro lado, se estás à procura de criar algo direto, o Django provavelmente ajudará a chegar lá mais rápido.

Agora, se estás à procura de aprender Django, recomendo-te o livro chamado Django for Beginners (Django para Iniciantes, em português). Podes encontrá-lo aqui (em inglês). Também podes encontrar os capítulos de amostra gratuitos aqui.

Ok, vamos avançar para o próximo tópico!

Ciências da Informação — incluindo machine learning, análise de dados e visualização de dados

Antes de mais, vamos rever o que é machine learning.

Penso que a melhor forma de explicar o que é machine learning seria ao fornecer-te um simples exemplo.

Digamos que desejas desenvolver um programa que deteta automaticamente o que está numa imagem.

Então, dada a imagem abaixo (Figura 1), desejas que o teu programa reconheça que é um cão.

Dada esta outra imagem abaixo (Figura 2), desejas que o teu programa reconheça que é uma mesa.

Podes dizer, bem, posso simplesmente escrever algum código para fazer isso. Por exemplo, talvez se existirem muitos píxeis castanho-claros na imagem, então podemos dizer que é um cão.

Ou então, podemos descobrir como detetar arestas numa imagem. Podes dizer que, se houver muitas arestas retas, é uma mesa.

No entanto, este tipo de abordagem fica complicada muito rapidamente. E se existir um cão branco na imagem sem pelo castanho? E se a imagem mostra apenas as partes arredondadas da mesa?

É aqui que entra o machine learning.

O machine learning implementa tipicamente um algoritmo que deteta automaticamente um padrão num determinado input.

Podes fornecer, digamos, 1000 imagens de um cão e 1000 imagens de uma mesa a um algoritmo de machine learning. Então, este aprenderá as diferenças entre um cão e uma mesa. Quando forneceres uma nova imagem de um cão ou de uma mesa, este será capaz de reconhecer qual deles é.

Penso que isto seja um pouco semelhante ao modo como um bebé aprende coisas novas. Como é que um bebé aprende que uma coisa se parece com um cão e outra com uma mesa? Provavelmente, a partir de vários exemplos.

Provavelmente não indicas ao bebé explicitamente, "Se algo for felpudo e tiver pêlo castanho claro, então é provavelmente um cão."

Provavelmente dirias apenas, "Isto é um cão. Isto também é um cão. E isto é uma mesa. Esta também é uma mesa."

Os algoritmos de machine learning funcionam muito do mesmo modo.

Podes aplicar o mesmo conceito a:

• sistemas de recomendação (pensa no YouTube, Amazon e Netflix)
• reconhecimento facial
• reconhecimento de voz

entre outras aplicações.

Algoritmos de machine learning populares que podes já ter ouvido falar incluem:

• Redes neurais
• Aprendizagem profunda
• Máquinas de vetor de suporte
• Floresta aleatória

Podes utilizar qualquer um dos algoritmos acima para resolver o problema de reconhecimento de imagens que expliquei anteriormente.

Python para machine learning

Existem bibliotecas populares de machine learning e frameworks para Python.

Duas das mais populares são scikit-learn e TensorFlow.

• scikit-learn vem com alguns dos algoritmos de machine learning mais populares incorporados. Mencionei alguns deles acima.
• TensorFlow funciona mais como uma biblioteca de baixo nível que te permite criar algoritmos de machine learning personalizados.

Se estiveres apenas a começar com um projeto de machine learning, eu recomendaria que começasses primeiro pelo scikit-learn. Se começares a encontrar problemas de eficiência, então eu começaria a pesquisar o TensorFlow.

Como devo aprender machine learning?

Para aprender os fundamentos de machine learning, eu recomendo um curso de machine learning, de Stanford ou da Caltech (cursos em inglês).

Nota que é necessário teres conhecimentos básicos de cálculo e álgebra linear para compreender alguns dos materiais nesses cursos.

Depois, recomendo que pratiques o que aprendeste num desses cursos com o Kaggle. É um site onde as pessoas competem para criar o melhor algoritmo de machine learning para um determinado problema. Também têm bons tutoriais para iniciantes.

E a análise de dados e a visualização de dados?

Para te ajudar a compreender como estes se podem parecer, permite-me fornecer um simples exemplo aqui.

Digamos que trabalhas para uma empresa que vende alguns produtos on-line.

Depois, como analista de dados, podes desenhar um gráfico de barras como este.

A partir deste gráfico, podemos dizer que os homens compraram mais de 400 unidades deste produto e que as mulheres compraram cerca de 350 unidades deste produto, neste domingo em específico.

Como analista de dados, podes descobrir algumas explicações possíveis para esta diferença.

Uma possível explicação óbvia é que este produto é mais popular entre homens do que entre mulheres. Outra explicação possível pode ser que o tamanho da amostra seja muito pequeno e esta diferença é causada por puro acaso. E outra explicação possível pode ser que os homens tendem a comprar mais este produto apenas aos domingos, por alguma razão.

Para compreender qual destas explicações está correta, podes desenhar outro gráfico como este.

Em vez de apresentar apenas os dados para domingo, estamos a consultar os dados para uma semana inteira. Como podes observar, para este gráfico, podemos ver que esta diferença é bastante consistente ao longo de diferentes dias.

A partir desta pequena análise, podes concluir que a explicação mais convincente para esta diferença é que este produto é simplesmente mais populares entre homens do que entre mulheres.

Por outro lado, e se observarmos um gráfico como este?

Então, qual é a explicação para a diferença no domingo?

Podes talvez dizer que o homens tendem a comprar mais este produto apenas ao domingo por alguma razão. Ou então, talvez seja apenas uma coincidência que os homens tenham comprado mais no domingo.

Este é um exemplo simplificado de como se poderia parecer a análise de dados no mundo real.

O trabalho em análise de dados que realizei quando estive a trabalhar na Google e na Microsoft foi muito semelhante a este exemplo — apenas mais complexo. Na realidade, utilizei Python na Google para este tipo de análise e utilizei JavaScript na Microsoft.

Utilizei SQL em ambas as empresas para obter dados das nossas bases de dados. Depois, eu utilizava quer Python e Matplotlib (na Google) quer JavaScript e D3.js (na Microsoft) para visualizar e analisar estes dados.

Análise/visualização de dados com Python

Uma das bibliotecas mais populares para visualização de dados é o Matplotlib.

É uma óptima biblioteca para se começar porque:

• É fácil de se iniciar
• Algumas bibliotecas como o seaborn são baseadas nela. Por isso, aprender Matplotlib ajudará a aprender estas outras bibliotecas mais tarde.

Como devo aprender análise/visualização de dados com Python?

Primeiro, deves aprender os fundamentos de análise e visualização de dados. Quando pesquisei por bons recursos para isto on-line, não consegui encontrar nenhum. Por isso, acabei por criar um vídeo do YouTube sobre este tópico:

Também acabei por criar um curso completo sobre este tópico no Pluralsight (curso em inglês), que podes realizar gratuitamente ao fazer a inscrição no teste gratuito de 10 dias que eles oferecem.

Eu recomendo ambos.

Depois de aprender os fundamentos da análise e visualização de dados, aprender os fundamentos da estatística a partir de sites como o Coursera e o Khan Academy também será bastante útil.

Criação de scripts

O que é a criação de scripts?

Scripts referem-se geralmente à escrita de pequenos programas que são desenhados para automatizar tarefas simples.

Por isso, permite-me dar-te um exemplo da minha experiência pessoal aqui.

Trabalhei numa pequena startup no Japão, onde tínhamos um sistema de suporte por e-mail. Era um sistema para respondermos a questões que os clientes nos enviavam por e-mail.

No tempo que lá trabalhei, tinha a tarefa de contabilizar o número de e-mails que continham certas palavras-chave, de modo a podermos analisar os e-mails que recebemos.

Podíamos tê-lo feito manualmente, mas, em vez disso, escrevi um simples programa/script para automatizar esta tarefa.

Na realidade, na altura, utilizamos Ruby para isto, mas o Python também é uma boa linguagem para este tipo de tarefa. O Python é adequado para este tipo de tarefa principalmente porque tem uma sintaxe relativamente simples e fácil de escrever. Também é fácil para escrever algo pequeno e realizar testes.

E as aplicações incorporadas?

Não sou um especialista em aplicações incorporadas, mas sei que o Python funciona com o Rasberry Pi. Parece ser uma aplicação popular entre os entusiastas do hardware.

E em relação aos jogos?

Poderias utilizar uma biblioteca chamada PyGame para desenvolver jogos, mas não é o motor de jogo mais popular por aí. Poderias utilizá-la para criar um projeto como passatempo, mas eu pessoalmente não a escolheria se o teu objetivo for desenvolvimento de jogos.

Como alternativa, recomendo que comeces pelo Unity com C#, que é um dos motores de jogo mais populares. Este permite-te criar um jogo para várias plataformas, incluindo Mac, Windows, iOS e Android.

E em relação a aplicações de desktop?

Podes fazer uma com Python utilizando o Tkinter, mas também não parece ser a escolha mais popular.

Em vez disso, parece que linguagens como Java, C# e C++ são mais populares para isto.

Recentemente, algumas empresas começaram a utilizar também JavaScript para criar aplicações de desktop.

Por exemplo, a aplicação para desktop do Slack foi criada com algo chamado de Electron. Este permite-te criar aplicações de desktop com JavaScript.

Pessoalmente, se eu fosse criar uma aplicação para desktop, optaria por algo que envolva o JavaScript. Este permite-te reutilizar algum código de uma versão para a web, caso a tenhas. No entanto, também não sou um especialista em aplicações para desktop.

Python 3 ou Python 2?

Eu recomendaria o Python 3, visto que é mais moderno e é uma opção mais popular neste momento.

Nota de rodapé: uma nota sobre código de back-end x código de front-end (só para o caso de não estares familiarizado(a) com os termos):

Digamos que desejas criar algo como o Instagram.

Então, precisarias de criar código para o front-end para cada tipo de dispositivo que queres ter suporte.

Poderias utilizar, por exemplo:

• Swift para iOS
• Java para Android
• JavaScript para navegadores da web

Cada conjunto de código executará em cada tipo de dispositivo/navegador. Este será o conjunto de código que determina qual será o aspeto da aplicação, qual o aspeto dos botões quando clicas neles e assim por diante.

No entanto, ainda vais precisar da capacidade de armazenar a informação e fotos dos utilizadores. Vais querer armazená-las no teu servidor e não apenas nos dispositivos dos utilizadores, de modo a que os seguidores de cada utilizador consigam ver as fotos dele/dela.

É aqui que o código de back-end/código do lado do servidor entra em ação. Vais precisar de escrever algum código de back-end para fazer coisas como:

• Observar quem está a seguir quem
• Comprimir fotos de modo a que não ocupem tanto espaço de armazenamento
• Recomendar fotos e novas contas para cada utilizador na funcionalidade discovery

Então, esta é a diferença entre código de back-end e código de front-end.

Já agora, o Python não é a única boa opção para escrever código de back-end/do lado do servidor. Existem muitas escolhas populares, incluindo o Node.js, que é baseado no JavaScript.

Gostaste deste artigo? Então, podes vir a gostar do canal do autor no YouTube.

O autor tem um canal no Youtube de ensino de programação, chamado CS Dojo, com mais de 1,9 milhões de inscritos, onde produz conteúdo como o deste artigo.

De qualquer forma, muito obrigado por leres este artigo!

Escrito por: YK Sugi

Tradução realizada em português europeu.

Olá a todos!

Já falei sobre como eu, pessoalmente, consegui um emprego como engenheiro de software na Google em alguns vídeos no meu canal do YouTube sobre programação e ensino, chamado CS Dojo.

No entanto, muita gente ainda me faz perguntas sobre como obter um emprego na Google como engenheiro de software. Então, aqui está o meu artigo a explicar a estratégia que utilizaria.

Podes utilizar a mesma estratégia para obter um emprego como engenheiro de software não só na Google, mas também em empresas tecnológicas de topo como a Amazon, Microsoft e Facebook.

Neste artigo, vou mostrar o processo de 6 passos para conseguir um emprego numa destas empresas. Ao longo do caminho, também vou abordar:

• Como aprender a programar
• O que aprender depois de aprender a programar
• Como obter o teu primeiro emprego ou estágio como programador
• As melhores formas de concorrer a vagas de engenharia de software
• Como te preparares melhor para entrevistas de programação
• É importante obter uma licenciatura em ciências da computação?
• É importante ir para uma universidade de topo?

Tudo bem, vamos começar!

Passo 1: Aprender a programar

Esta é a qualificação mínima que vais precisar para te tornares engenheiro(a) de software.

Para isto, eu recomendo que comeces por um site interativo, tal como o Codecademy e o freeCodeCamp. Podes aprender a maior parte dos fundamentos da programação a partir destes sites. Também ouvi que o SoloLearn é bom.

Depois disto, sugiro que utilizes vídeos de tutoriais para aprender tópicos mais avançados. Para isto, recomendo sites como YouTube, Pluralsight, Lynda.com e Udemy. Nestes sites, deves ser capaz de encontrar tutoriais sobre tópicos como:

• Desenvolvimento para a web
• Desenvolvimento para dispositivos móveis
• Desenvolvimento de jogos

dependendo do teu interesse.

Que linguagem de programação devo aprender primeiro?

A minha resposta abreviada seria: escolhe JavaScript ou Python. Isso, porém depende mesmo dos teus interesses. Tenho uma resposta mais detalhada a essa questão neste vídeo (em inglês).

Passo 2: Trabalhar em alguns projetos pessoais

Após teres seguido alguns tutoriais de programação, deves criar alguns projetos pessoais para praticar o que aprendeste.

Para isso, deves encontrar algo que tenhas interesse em criar.

Por exemplo, se gostares de fotografia, podes talvez criar um site de portfólio para as tuas fotografias. Se gostares de negociar ações, podes talvez criar um sistema que analisa os gráficos das ações por ti. Se gostares de resolver problemas, podes tentar competir numa competição de programação.

Quando trabalhas num projeto, tenta primeiro criar o máximo possível por ti mesmo. Depois, se te deparares com um obstáculo, podes obter ajuda de outras pessoas ao utilizar recursos on-line ou off-line. Por exemplo, podes utilizar o Stack Overflow para fazer questões específicas e técnicas, no caso de ficares preso em algo relacionado com programação.

Passo 3: Conseguir o teu primeiro emprego ou estágio em programação

Assim que tiveres criado alguns projetos pessoais, deves ser capaz de obter o teu primeiro emprego ou estágio em programação. Com isto, vais ter alguma experiência antes de começares as entrevistas com as empresas tecnológicas de topo.

É possível obter o teu primeiro emprego logo numa das empresas de topo, mas é bem mais fácil e comum obter primeiro um emprego numa empresa menos conhecida.

As melhores formas de concorrer a vagas de emprego em engenharia de software

Concorrer simplesmente a vagas on-line não é necessariamente a melhor estratégia, porque é isso que praticamente toda a gente faz.

Em vez disso, recomendo que utilizes o LinkedIn e redes de contactos pessoais para obter o teu primeiro emprego em programação.

No LinkedIn, encontra primeiro recrutadores das empresas em que tens interesse em trabalhar. Depois, pergunta-lhes se tens qualificações para as vagas que tens interesse. Deves perguntar como te podes preparar melhor no caso de ainda não teres qualificações suficientes.

Para redes pessoais, recomendo sites como o Meetup para conhecer engenheiros e recrutadores em empresas locais.

Espera! Isso não é tudo.

Utilizar o LinkedIn e redes pessoais funciona bem se estiveres a concorrer para empresas de dimensões pequenas a médias. No entanto, descobri que estas estratégias são menos eficazes para empresas mais populares como a Google e a Facebook.

Para estas grandes empresas, em vez disso, recomendo combinar as três estratégias seguintes:

1. Feiras de emprego e eventos de recrutamento em universidades perto de ti.
2. Ser recomendado por amigos que trabalham nessas empresas.
3. Simplesmente concorrer on-line.

Combinar todas estas estratégias ajudará a aumentar as hipóteses de conseguir uma entrevista numa destas empresas tecnológicas de topo.

Já agora, não tenho a certeza absoluta sobre qual é a razão para o LinkedIn ser menos eficaz com estas grandes empresas, mas penso que possa ser porque estas recebem muitas mensagens. Basicamente, são muito populares por lá. 😜

Passo 4: Aprender sobre estruturas de dados e algoritmos

Empresas tecnológicas de topo como a Google e a Microsoft fazem geralmente perguntas sobre estruturas de dados e algoritmos nas suas entrevistas. Então, deves aprender sobre esses tópicos caso ainda não o tenhas feito.

Para aprender os fundamentos, recomendo a minha série de vídeos (em inglês) sobre estruturas de dados e algoritmos. Está tudo no YouTube. Criei estes vídeos para tornar o mais fácil possível compreender estes tópicos.

Visto que existem apenas 7 vídeos nesta série, vais precisar de mais material para aprender sobre tópicos mais avançados.

Existem várias opções populares para isto, incluindo (em inglês):

• Estes cursos da Universidade de Stanford no Coursera
• Este curso do MIT no YouTube
• O manual de Design de Algoritmos por Skiena (um livro)
• Algoritmos (outro livro)

Deves experimentar alguns destes e continuar com o que gostares mais.

Passo 5: Prepara-te para entrevistas de programação

Entrevistas de programação em empresas como a Google e a Microsoft são difíceis, mas é algo bastante direto de te preparares.

Assim que tiveres uma compreensão sólida sobre estruturas de dados e algoritmos, recomendo estes três recursos para praticares:

• Leetcode — uma plataforma interativa para praticar problemas de código de entrevistas.
• Cracking the Coding Interview — um livro popular sobre entrevistas de programação.
• Daily Coding Problem — uma lista de e-mail que te fornece um problema por dia.

Depois de praticares por conta própria durante algumas semanas, deves começar a fazer entrevistas simuladas.

Como simular entrevistas

Basicamente, junta-te aos teus amigos e distribui problemas por todos a partir dos recursos que mencionei acima.

Depois, resolve cada problema em papel ou num Google doc. Explica a tua solução a um amigo teu.

Certifica-te de que praticas como entrevistador e como entrevistado, para que consigas ver como é estar no lugar do entrevistador.

Assim que tiveres feito mais ou menos 20 entrevistas simuladas, deves estar preparado para começar a fazer entrevistas nas empresas em que desejas trabalhar.

Passo 6: Concorrer, concorrer e concorrer novamente a vagas 🙂

Utiliza as três estratégias que mencionei acima para concorrer a vagas em empresas tecnológicas de topo:

• eventos de recrutamento/feiras de emprego
• ser recomendado por amigos
• e concorrer on-line.

Se não conseguires o emprego à primeira, não te preocupes. De facto, deves estar à espera de alguns fracassos, visto que entrar nestas empresas é muito competitivo.

No meu caso, precisei de concorrer para a Google 5 vezes antes de conseguir obter lá o meu emprego como engenheiro de software (vídeo em inglês).

Já está! Aqui está um pequeno resumo:

• Passo 1: Aprender a programar
• Passo 2: Trabalhar em alguns projetos pessoais
• Passo 3: Conseguir o teu primeiro emprego ou estágio em programação
• Passo 4: Aprender estruturas de dados e algoritmos
• Passo 5: Prepara-te para entrevistas de programação
• Passo 6: Concorrer, concorrer e concorrer novamente a vagas 🙂

Espera. É mesmo assim tão simples?

Sim, é. Mesmo assim, é preciso muito tempo e dedicação para fazer todos os 6 passos.

Mais algumas observações:

Preciso de ter uma formação em ciências da computação?

A resposta mais curta é não. No entanto, ter uma licenciatura em ciências da computação ajuda muito. Se fizeres um programa de Ciências da computação sólido, resolverás grande parte dos passos 1, 2, 3 e 4 (aprender a programar, trabalhar em alguns projetos pessoais, conseguir o teu primeiro emprego ou estágio em programação, e aprender estruturas de dados e algoritmos).

Sem um licenciatura em Ciências da Computação, só terás de aprender mais por conta própria.

Além disso, tem em conta que, mesmo com uma licenciatura em Ciências da Computação, é preciso trabalhar muito para obter um emprego de engenheiro de software numa destas empresas.

Preciso de frequentar uma universidade de topo, como o MIT, Stanford, Carnegie Mellon etc.?

Novamente, a resposta mais curta é não. Provavelmente, ajuda um pouco, mas está longe de ser necessário.

Laszlo Bock, um antigo Vice-Presidente Sénior de Operações Pessoais na Google, também concorda.

De acordo com o livro que escreveu, Work Rules! (em inglês), a Google prefere alunos excelentes de faculdades menos conhecidas do que alunos medíocres de faculdades de topo como o MIT.

Penso que isto faça sentido porque, se fores inteligente e dedicado, não deve interessar muito qual foi a faculdade que frequentaste.

É necessário ter uma média escolar alta?

Novamente, a resposta curta é que não.

Ter uma média escolar alta, provavelmente, ajuda um pouco para obter uma entrevista, mas é muito mais importante ter uma experiência prática bastante sólida e projetos interessantes para mostrar no teu currículo.

De facto, de acordo com o livro Work Rules!, a Google antigamente tinha muito interesse na média escolar do candidato. No entanto, descobriram que ter uma média alta não está fortemente relacionado com ter um desempenho forte no local de trabalho, a longo prazo. Depois dessa descoberta, deixaram de dar um destaque tão grande à média escolar.

Então, o que preciso?

Basicamente, tudo o que precisas são habilidades fortes de programação e de resolução de problemas, uma boa compreensão dos princípios da ciência da computação e projetos interessantes e experiência para mostrar no teu currículo.

Serás capaz de fazer tudo isto se seguires os 6 passos que expliquei acima.

Então, como posso escrever um bom currículo?

Se desejares, podes aproveitar o currículo (em inglês) que eu utilizei para concorrer à Google.

• Aqui está a versão em PDF.
• Aqui está uma versão para o Word.
• Aqui está uma versão para o Pages.

Esse é mesmo o currículo que eu utilizei para obter um emprego na Google como engenheiro de software. Deveria ter mesmo só uma página. Por isso, diria que o meu currículo estava muito longo. Mesmo assim, estás à vontade para utilizá-lo como um ponto de partida.

Recursos adicionais para criar um currículo:

• Existe uma boa visão geral sobre este tópico no CareerCup, aqui (em inglês).
• A minha amiga Zhia Hwa Chong, que é uma engenheira de software no Twitter, tem um bom artigo sobre isso aqui (em inglês).

Bem, boa sorte, e obrigado por leres este artigo!

Se tiveres alguma questão, fica à vontade para falar com o autor pelo Instagram ou pelo Twitter.

Escrito por: David Piepgrass

Desde que me lembro, sempre existiram dois tipos de seletores.

Existia o tipo onde o texto no topo podia ser editado e o tipo onde isso não era possível. O HTML inclui o segundo tipo, sem problemas:

<select>
    <option>Apple</option>  
    <option>Banana</option>  
    <option>Cherry</option>  
    <option>Dewberry</option>
</select>

Fiquei, no entanto, chocado ao perceber que o primeiro tipo não existe em HTML. Bem, existe algo chamado datalist, mas não funciona bem — os utilizadores não podem clicar em algo para ver a lista completa. Além disso, à medida que começas a escrever, os itens começam imediatamente a desaparecer caso não comecem pela mesma string que o utilizador escreveu.

O CSS, contudo, é uma ferramenta de estilização com um poder impressionante: já foram criados jogos de vídeo completos com CSS, HTML e alguns ficheiros de imagens – que bom, acabei de perder metade da minha audiência.

Isto não quer dizer que o CSS pode fazer tudo, mas que existem pelo menos "atalhos" para alcançar uma grande variedade de truques. Aqueles de vocês que estão cansados de jogar estão provavelmente interessados em aprender sobre os truques do ofício. Acho que existe muito a aprender ao compreender como fazer uma caixa de combo.

Neste artigo, vais aprender como isto funciona:

No Windows, chamamos isso de "caixas de combo" (em inglês, combo boxes), visto que elas combinam a parte superior (geralmente, um campo de texto) com uma parte de popup (geralmente, uma lista drop-down).

Como utilizar

A caixa de combo pode ser construída com divs e/ou spans. Lembra-te apenas que um analisador de HTML tem algumas regras de hierarquia. Por exemplo, não permite que um p seja um antecessor de div ou ul. Um span também não pode ser um antecessor de p ou div. Estas regras não se aplicam ao código JavaScript/React que edita o DOM.

O CSS estará à espera de três filhos: primeiro, a parte superior (conteúdo a ser sempre exibido), depois o <span class="downarrow" tabindex="-1"></span>, para a seta para baixo, e, por fim, o conteúdo a ser apresentado dentro da caixa drop-down:

<div class="combobox">
  <div>Caixa de combo simples</div>
  <div tabindex="-1" class="downarrow"></div>
  <div>
    O conteúdo do popup do drop-down vai aqui
  </div>
</div>

O drop-down, inicialmente, abrirá apenas quando a seta para baixo (▾) for clicada. Para fazer com que a caixa abra quando o conteúdo do topo for clicado, é necessário adicionares a classe dropdown a combobox e adicionar um atributo tabindex="0" ao primeiro filho:

<div class="combobox dropdown">
  <div tabindex="0">Caixa de combo simples</div>
  <div tabindex="-1" class="downarrow"></div>
  <div>
    O conteúdo do popup do drop-down vai aqui
  </div>
</div>

Observação: tabindex="-1" significa "podes clicar para lhe dar destaque, mas não podes destacá-lo utilizando a tecla Tab do teclado". tabindex="0" significa "podes dar-lhe destaque ao clicar ou com a tecla Tab, e o browser escolherá a ordem pela qual são destacados os diferentes elementos com a tecla Tab." Ao contrário de um elemento <select>, a caixa de popup não será capaz de sair da janela do browser (isto pode ser uma limitação intencional de todo o conteúdo definido pelo utilizador — caso o conteúdo definido pelo utilizador passe para lá dos limites da área da página, pode ser um risco de segurança para sites que tentam confundir ou enganar os utilizadores).

Como bónus, serás capaz de criar uma lista drop-down que não é uma caixa de combo apenas com a classe dropdown:

<div class="dropdown">
   *** <span tabindex="0">Menu drop-down</span> *** 
   <div>
     O conteúdo do popup do drop-down vai aqui
   </div>
</div>

Isto é um menu drop-down que se clica para abrir (caso queiras um menu drop-down que abre ao passar o rato por cima em vez de clicar, já existem muitos outros tutoriais sobre isso.)

Neste caso, o último elemento contém o conteúdo do drop-down e todos os outros filhos estão sempre visíveis, mas apenas os elementos com um atributo tabindex podem ser clicados para abrir a área de popup.

Podes editar de modo seguro a margem e o contorno de uma caixa de combo, assim como os seus filhos, sem comprometer o seu comportamento, com exceção para uma coisa: não deixes que o padding-right fique muito pequeno porque a seta para baixo ▾ é apresentada no padding — o seu tamanho deve ser de, pelo menos, 1em.

Resumo

• A classe combobox é para a caixa de combo
• A classe dropdown é para menus e caixas de combo que aparecem quando o conteúdo de cima for clicado (lembra-te de que tabindex="0")
• A classe downarrow adiciona o ícone da seta para baixo (tabindex="-1" é obrigatório, porque não pode ser adicionado via CSS.)
• O último filho de combobox ou dropdown é o conteúdo do drop-down.

Podes pré-visualizar a demonstração com código-fonte.

Funcionalidades do CSS de que vamos precisar

Vamos precisar de muitas coisas para isto. Aqui está uma lista (fica à vontade para saltar esta parte e ler mais tarde.)

Seletores

Seletores básicos:
.a significa "corresponde a elementos com class='a'".
A, B significa "corresponde ao seletor A ou seletor B".
A B significa "corresponde a um elemento B que tem um elemento A como antecessor".
A > B significa "corresponde a um elemento B cujo elemento pai é um elemento A".

Pseudosseletor :first-child:
*:first-child significa "corresponde a qualquer elemento desde que seja o primeiro descendente de algum elemento pai".

Pseudosseletor :last-child:
*:last-child significa "corresponde a qualquer elemento desde que seja o último descendente de outro elemento". Por exemplo, .combobox > *:last-child encontra o último descendente de qualquer elemento com class="combobox".

Pseudosseletor :empty:
.downarrow:empty significa "corresponde a um elemento com class="downarrow" caso não tenha nada dentro (nem mesmo texto simples)".

Pseudosseletor :only-child:
*:only-child significa "corresponde a qualquer elemento caso este seja o único descendente de algum elemento".

Pseudosseletor :not:
.dropdown:not(.sticky) significa "corresponde a um elemento com a classe dropdown caso este não tenha a classe sticky".

Pseudosseletor :focus:
.downarrow:focus significa "corresponde a um elemento com a classe downarrow caso este esteja destacado, porque este tem um tabindex e foi clicado com o rato ou selecionado com a tecla Tab".

Pseudosseletor :hover:
.foo:hover significa "corresponde a um elemento com a classe foo quando o ponteiro do rato está por cima dele".

A ~ B significa "corresponde a B caso um elemento irmão anterior tenha correspondido a A".

Estilos

Estilos básicos:
Certifica-te de que compreendes o modelo de caixas (texto em inglês) e os seus vários estilos associados (incluindo width, height, min-width e max-height) antes de continuares. Também deves ter conhecimentos sobre estilos básicos, tais como font-size, font-family, color e background-color.

Além disso, deves ter conhecimentos sobre unidades, especialmente as unidades mais comuns (texto em inglês):
px, em, rem, e %.

Estilo box-sizing: border-box
Isto significa que a largura e altura de um elemento incluem o padding e o contorno (texto em inglês).

Estilo display:
Vamos utilizar display: block, que apresenta um elemento como um "bloco", que é como um parágrafo em que dois blocos adjacentes têm quebras de linha entre eles.

Também vamos utilizar display: inline-block, que apresenta um elemento em linha, como um ícone dentro de um parágrafo, mas permite ter margens, contornos e padding.

Não vamos utilizar explicitamente o display: inline, que é utilizado para elementos que não têm margens, contornos ou padding, e não precisam de quebras de linha entre eles (<b>like this</b>).

Fica a saber mais sobre o display (texto em inglês).

Estilo position:
Na caixa de combo, vamos ver como é utilizado este estilo para remover elementos do fluxo normal do documento.

Os elementos normalmente têm o estilo position: static, que significa apenas "posiciona-o normalmente na página".

position: relative é como o static, excepto para duas coisas: primeiro, o elemento pode ser movido para a esquerda, direita, cima ou baixo, sem afetar qualquer um dos outros elementos.
No entanto, a caixa de combo não precisa desta funcionalidade. O segundo efeito de relative é marcar o elemento como "posicionado".

Isto é importante, pois outro tipo de posicionamento, absolute, posiciona um elemento em relação ao antecessor que estiver "posicionado" mais próximo. Especificamente, o popup do drop-down utilizará position: absolute de modo a posicionar-se em relação à parte superior da caixa de combo — portanto, a própria caixa de combo é marcada como relative.

Além disso, um elemento absolute não afeta o posicionamento dos outros itens na página, nem mesmo o seu elemento pai. Isto é exatamente o que queremos para uma caixa de popup.

Estilos left, top, right e bottom
Estes estilos são utilizados com position: relative e position: absolute, e funcionam de maneira um pouco diferente para cada um deles. Mais informação sobre isto depois.

Aprende mais sobre posicionamento (texto em inglês).

Estilo outline:
O Outline é um contorno extra desenhado por fora do contorno normal de um elemento. é normalmente utilizado para destacar um elemento, como por exemplo indicar que este foi "selecionado" por um utilizador. Como é esperado que os outlines sejam temporários, estes não ocupam espaço na página — por isso, adicionar um outline não vai empurrar os outros elementos.

Estilo box-shadow:
Desenha uma sombra "por baixo" do elemento (bem, na verdade a sombra é desenhada fora do elemento, que fica muito estranho no caso de o elemento não ter cor de fundo). Isto vai dar muito jeito para o popup do drop-down!

Estilo z-index:
Este estilo altera a ordem pela qual um elemento é desenhado pelo browser. Um z-index mais alto faz com que um elemento seja desenhado mais tarde, de modo a que apareça por cima das outras coisas na página.

Vamos precisar de um z-index grande para o nosso popup do drop-down para que apareça por cima de tudo. O filho do popup receberá um novo "contexto de sobreposição", que basicamente significa que vão ser desenhados por cima do popup, que é uma coisa boa.

Atenção (texto em inglês): z-index apenas funciona em elementos "posicionados".

Estilo cursor:
Controla a aparência (texto em inglês) do ponteiro do rato.

Estilo text-align:
Justificação horizontal (left, right ou center) – texto em inglês.

Estilo pointer-events:
A configuração none deste estilo torna um elemento "invisível" a cliques do rato (texto em inglês).

Estilo transform:
Permite-te rodar, aumentar ou diminuir a escala, inclinar, ou mover um elemento de bloco (ou bloco em linha). Estas transformações (texto em inglês) são inteligentes e também afetam o input do rato.

Por exemplo, poderias rodar o texto em 30 graus e mesmo assim selecioná-lo com o rato.

Estilo transition:
Permite animações (texto em inglês) quando o estilo muda.

Estilo opacity:
Um número que varia entre 0 e 1 e controla a visibilidade de um elemento:
1 é o valor normal que torna o elemento totalmente visível
0 torna o elemento totalmente invisível. Ao contrário de visibility: hidden e display: none, as outras formas de tornar um elemento invisível, opacity: 0 não impede que o rato interaja com o elemento.

Neste artigo, vamos utilizar a transparência para animações — ao animar a transição entre opacity: 0 e opacity: 1, podemos fazer com que o elemento apareça ou desapareça gradualmente.

Pseudoelemento

::before ou ::after:
Refere-se a um elemento virtual dentro de um elemento selecionado previamente, antes ou depois do seu conteúdo normal.

Por exemplo, se escreveres p::before { content: "!" }, então ! aparecerá no início de cada parágrafo.

Podemos utilizar o content com ::before ou ::after para desenhar a seta a apontar para baixo (▾).

Preparar a aparência inicial

.combobox e .dropdown precisam de ter um posicionamento relative para que o popup do drop-down possa ser posicionado relativo a eles. O display: inline-block permite que a caixa de combo tenha margens, padding e contorno. Ao contrário de display: block, este permite que apareçam outras coisas na mesma linha (tais como labels ou outras caixas de combo.)

.combobox, .dropdown { 
  /* "relative" e "inline-block" (ou apenas "block") são necessários aqui
     para que "absolute" funcione corretamente nos descendentes */
  position: relative;
  display: inline-block;
}

As caixas de combo terão um contorno embutido, mas as listas drop-down não:

.combobox {
  border: 1px solid #999;
  padding-right: 1.25em; /* deixa espaço para ▾ */
}

A cor #999 é ligeiramente mais escura do que o contorno do elemento <select> do Chrome e ligeiramente mais clara do que o contorno do elemento <select> do FireFox. Por isso, não fica muito diferente do que qualquer um deles.

Como desenhamos a pequena seta para baixo (▾)?

Aqui, a dificuldade é controlar a altura. A caixa de combo pode ter conteúdo com uma dimensão imprevisível: letra pequena, letra grande, uma linha ou duas linhas. O "botão" de seta tem de ter a mesma altura para que funcione independentemente de onde o utilizador clica — qualquer sítio dentro do contorno deve funcionar.

Então, como podemos fazer com que a seta se adapte à altura do seu irmão à esquerda?
O CSS Grid (texto em inglês) consegue fazer isto muito rapidamente, mas não é suportado por todos os browsers. O Flexbox também pode conseguir fazer o trabalho, mas optei por utilizar um truque antigo para compatibilidade com browsers mais antigos: o posicionamento absoluto.

Com o posicionamento absoluto, posso obrigar a seta a ter a mesma altura do seu recipiente.

A desvantagem desta abordagem é que a seta existirá fora do fluxo normal do documento, então o browser não reservará nenhum espaço para ela. Em vez disso, vamos atribuir à caixa de combo algum padding do lado direito (acima de 1.25em), e a seta existirá dentro do padding.

No modo de posicionamento absoluto, o top alinha o limite superior do elemento em relação ao limite superior do seu recipiente: top: 0 significa que os dois limites superiores vão estar no mesmo local. De maneira semelhante, left: 0 alinha o lado esquerdo do elemento ao lado esquerdo do recipiente e por aí a fora.

Coordenadas positivas empurram o elemento "para dentro" em relação ao recipiente. Então, top: 10px quer dizer "coloca o topo do elemento 10px abaixo do topo do elemento pai", enquanto que bottom: 10px quer dizer "coloca o fundo do elemento 10px acima do fundo do elemento pai."

Neste caso, precisamos de top: 0; bottom: 0; right: 0; width: 1.25em para colocar a seta do lado direito, de cima para baixo.

.combobox > .downarrow, .dropdown > .downarrow {
  display: block;     /* Permite margin/border/padding/size */
  position: absolute; /* Coloca fora do fluxo normal */
  top: 0;    /* Alinha o topo da downarrow com a borda superior da combobox */
  bottom: 0; /* Alinha o fundo da downarrow com o fundo da combobox */
  right: 0; /* Alinha o limite direito da downarrow com o limite direito da combobox*/
  width: 1.25em;
  
  cursor: default; /* Utiliza o ponteiro em forma de seta em vez de I-beam */
  nav-index: -1; /* Define tabindex, não-funcional na maioria dos browsers */
  border-width: 0;        /* Desativado de início */
  border-color: inherit;  /* Copia a cor da borda do elemento pai */
  border-left: inherit;   /* Copia a borda do elemento pai */
}

Aqui, display: block e display: inline-block têm o mesmo efeito. Por isso, utilizei o mais curto. Também desativei o ponteiro do rato que normalmente aparece ao passar por cima de texto (visto que a seta para baixo conta como texto).

Na verdade, existe um modo de definir tabindex em CSS, chamado nav-index. Mas a maior parte dos browsers não a suporta. Por isso, se descobrires que a tua caixa de combo funciona apenas no Opera, já sabes a razão.

Deves, então, adicionar tabindex="-1" ao lado de class="downarrow".

Este código desabilita os contornos, com a ressalva de que a cor/estilo do contorno deve ser herdada do elemento pai (a caixa de combo), caso outro CSS aumente border-left-width. Já agora, podes utilizar a opção inherit em qualquer atributo que não herde atributos do elemento pai desde o início.

Decidi que deve existir um contorno à esquerda no caso do popup não abrir quando o lado esquerdo é clicado. Desse modo, a seta para baixo parece-se com um botão, sugerindo subtilmente que pode ser clicado. Lembra-te do plano: apenas dropdown, e não a combobox por si só, abrirá quando o lado esquerdo é destacado.

Portanto, vou adicionar um contorno quando combobox é utilizado por si só:

.combobox:not(.dropdown) > .downarrow {
  border-left-width: 1px;
}

De seguida, caso o utilizador nos tenha fornecido um <span class="downarrow"></span> vazio, precisamos de adicionar magicamente o caractere de seta em falta através de ::before (ou ::after) e content:

.downarrow:empty::before {
  content: '▾';
}

A seta para baixo também precisa de estar centrada no elemento .downarrow. text-align: center irá centrar o texto horizontalmente, mas centrar verticalmente é mais complicado. vertical-align: middle não funciona porque é desenhado para alinhar elementos inline com o texto à volta. O que nós queremos é alinhar o nosso pseudoelemento de seta para baixo com o recipiente pai .downarrow.

Aqui está um truque para isto:

.downarrow::before, .downarrow > *:only-child {
  text-align: center; /* Centra horizontalmente */
  /* Truque para centralizar verticalmente */
  position: relative; /* Permite que o elemento se mova */
  top: 50%;           /* Move para baixo 50% da dimensão do recipiente */
  transform: translateY(-50%); /* Move para cima 50% do tamanho do elemento */
  display: block;     /* `transform` exige block/inline-block */
}

Lembra-te que apenas adicionamos o conteúdo ::before se .downarrow estiver vazio. Se o utilizador forneceu o seu próprio elemento de seta personalizado, vamos querer centrá-lo na mesma, daí o seletor .downarrow > *:only-child.

Se a caixa de combo tiver um elemento <input>, esta não deve ter contorno:

.combobox > input {
  border: 0 /* Caixa de combo já tem um contorno */
}

A próxima parte é opcional, mas geralmente o primeiro descendente de uma caixa de combo deve ter 100% da largura da sua .combobox pai, para o caso da caixa de combo ser mais larga do que o primeiro descendente, o primeiro descendente estica para corresponder ao tamanho do elemento. Para o caso do utilizador ter construído a caixa de combo com spans em vez de divs (talvez para que possa ser colocada dentro de um <p>), pode fazer sentido definir o primeiro descendente como inline-block de modo a que possa ter padding e margens.

.combobox > *:first-child {
  width: 100%;
  box-sizing: border-box; /* para que 100% inclua contorno e padding */
  display: inline-block;
}

Preparar a lista drop-down

Inicialmente, só a queremos oculta, por isso podemos utilizar display: none.

Em preparação para quando estiver visível, no entanto, vamos definir mais algumas propriedades. Começa por position: absolute, para que fique fora do fluxo normal do documento (lembra-te de que um elemento absolute é posicionado relativo ao seu antecessor relative mais próximo, que é .combobox ou .dropdown). Quando estiver visível, é claro que deve ter um contorno e cor de fundo, além de uma sombra por baixo.

Aqui, podes ver box-shadow: 1px 2px 4px 1px #4448, que significa "apresenta uma sombra de 1px à direita do elemento, 2px para baixo, desfocada em 4px, e torna a sombra 1px mais larga do que o próprio elemento, com a cor #4448". Também precisamos de um grande z-index para que o popup apareça por cima de tudo:

.dropdown > *:last-child,
.combobox > *:last-child {
  display: none;          /* Oculto de início */
  position: absolute;     /* Fora do fluxo do documento */
  left: 0;          /* Lado esquerdo do popup = lado esquerdo do elemento pai */
  top: 100%;        /* Topo do popup = 100% abaixo do topo do elemento pai */
  border: 1px solid #999; /* Contorno cinzento */
  background-color: #fff; /* Fundo branco */
  box-shadow: 1px 2px 4px 1px #4448; /* Sombra */
  z-index: 9999;          /* Desenha por cima de tudo */
  min-width: 100%;        /* >= 100% tão largo como o recipiente */
  box-sizing: border-box; /* A largura inclui contorno e padding */
}

Aqui, utilizei left: 0 e top: 100% para posicionar corretamente o popup, mas, neste caso, acontece que o posicionamento predefinido do popup é praticamente o mesmo. Por isso, esses estilos não são realmente necessários.

Para tornar a caixa drop-down visível, tudo o que precisamos é display: block.

Que seletores vamos precisar para alcançar isto?

??? {
  display: block;
}

O mais óbvio, o drop-down deve ser apresentado nos três casos abaixo:

1. O utilizador clicou na .downarrow
2. O utilizador clicou ou utilizou a tecla tab até .dropdown
3. O utilizador clicou ou utilizou a tecla tab até um descendente de .dropdown

A caixa drop-down é o último descendente. Por isso, vamos ter de combinar o seletor *:last-child com o :focus para detetar quando uma das coisas acima for clicada ou destacada com a tecla tab:

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus              > *:last-child,
.dropdown > *:focus          ~ *:last-child {
  display: block;
}

Porém, ainda não terminamos. O que fazer se o utilizador clicar numa caixa de texto ou num link dentro da caixa drop-down? O clique vai fazer com que a .downarrow ou o .dropdown perca o destaque, o que faz com que a caixa drop-down desapareça instantaneamente.

No caso de um link, o browser destaca o link quando o botão do rato é pressionado, mas não segue o link até que o botão seja largado. Por isso, se o drop-down desaparecer instantaneamente, qualquer link no drop-down deixará de poder ser seguido!

Para corrigir isto, devemos manter a caixa aberta sempre que algo dentro do :last-child tenha o destaque:

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > *:last-child:focus-within,
.dropdown > *:last-child:focus-within {
  display: block;
}

Atenção: Isto não funciona no Edge/IE (abaixo é descrita uma alternativa).

Se a seta para baixo for clicada uma segunda vez, devemos ocultar a caixa drop-down. Isto pode ser alcançado deste modo:

.downarrow:focus {
  pointer-events: none; /* Faz com que o segundo clique feche */
}

Isto faz com que .downarrow seja invisível para eventos do rato quando tem destaque. Por isso, quando clicas nela, estás na realidade a clicar atrás dela (na .combobox). Isto faz com que perca o destaque, o que, por sua vez, faz com que a caixa drop-down desapareça.

Podemos fazer a mesma coisa para .dropdown, para que clicar novamente na área superior de um .dropdown faça com que desapareça:

.dropdown > *:not(:last-child):focus,
.downarrow:focus,
.dropdown:focus {
  pointer-events: none; /* Faz com que o segundo clique feche */
}

Isto funciona em grande parte. No entanto, caso a tua área superior contenha uma caixa de texto, existe um efeito secundário, visto que a caixa de texto não vai processar o input do rato normalmente. Descobri, contudo, que a caixa de texto ainda pode ser utilizada.

No Firefox, podes clicar e arrastar para selecionar texto se começares quando o popup está fechado, mas não funciona quando o popup está aberto. No Edge, é o oposto: podes clicar e arrastar para selecionar texto apenas quando o popup está aberto. De qualquer modo, é basicamente utilizável, visto que é provável que o utilizador tente novamente uma vez no caso do seu input não funcionar à primeira.

O comportamento do Chrome é… inconsistente. De qualquer modo, para obter um comportamento perfeito — onde um clique fecha a caixa sem causar que a caixa de texto perca o destaque — penso que é necessário utilizar JavaScript.

Toques finais

A caixa de combo normalmente deve ter uma margem. Isso, porém, parece ser opcional, visto que os controlos do <input> não têm uma em princípio:

.combobox {
  margin: 5px;
}

Vamos tornar isso mais bonito ao abrir a caixa com uma animação.

A propriedade transition é o modo mais fácil de fazer animações. Na realidade, para o nosso objetivo, um simples comando como transition: 0.4s; habilita animações para todos os estilos suportados. No entanto, até agora, o único estilo que vamos alterar é o display e as alterações ao display não podem ser animadas.

Então, vamos tentar animar uma transição de opacity: 0 para opacity: 1 ao modificar os nossos estilos existentes…

.dropdown > *:last-child,
.combobox > *:last-child {
  display: none;
  /* 
     ... outros estilos como estavam antes ...
  */
  opacity: 0;
  transition: 0.4s;
}

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > *:last-child:focus-within,
.dropdown > *:last-child:focus-within {
  display: block;
  opacity: 1;
  transition: 0.15s;
}

O tempo da transição controla quanto tempo leva a entrar no estado atual. Ou seja, este código quer dizer "demora 0.15 segundos para mostrar e 0.4 segundos para ocultar."

Acontece que a animação não funciona. O problema está no facto de que display: hidden bloqueia animações (texto em inglês). Em vez disso, precisamos de utilizar uma das outras formas de ocultar coisas. Outra forma de ocultar coisas é o visibility: hidden. Infelizmente, ele também bloqueia parcialmente animações — a animação para mostrar o popup funciona, mas a animação para ocultar, não.

Não podemos depender de opacity: 0 por si só para ocultar um elemento, porque o rato pode interagir na mesma com um elemento que tenha opacity: 0. No entanto, podemos corrigir isso com pointer-events: none.

Então, o fade-in e o fade-out em funcionamento têm este aspeto:

.dropdown > *:last-child,
.combobox > *:last-child {
  display: block;
  /* 
     ... outros estilos como estavam antes ...
  */
  transition: 0.4s;
  opacity: 0;
  pointer-events: none;
}

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > *:last-child:focus-within,
.dropdown > *:last-child:focus-within {
  display: block;
  transition: 0.15s;
  opacity: 1;
  pointer-events: auto;
}

Outra forma de embelezar que podemos adicionar é mover o popup para a posição, tal como animar o top:

.dropdown > *:last-child,
.combobox > *:last-child {
  display: block;
  /* 
     ... outros estilos como estavam antes ...
  */
  top: 0;
  opacity: 0;
  transition: 0.4s;
  pointer-events: none;
}

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > *:last-child:focus-within,
.dropdown > *:last-child:focus-within {
  display: block;
  top: 100%;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
}

Decidi que isto é um pouco "excessivo" e não incluí esta parte na versão final.

Por fim, devemos ter um retângulo — um contorno a mostrar quando a caixa de combo está "ativa".

Primeiro, vamos adicionar o retângulo de destaque para essa seta para baixo:

.downarrow:focus {
  outline: 2px solid #48F8;
}

Idealmente, teríamos um retângulo de destaque para a própria caixa de combo, como isto:

.combobox:focus-within {
  outline: 2px solid #48F;
}

Isto funciona bem no Chrome. No Firefox, porém, o outline é expandido para além do contorno para englobar toda a caixa de popup, que fica com um aspeto um pouco estranho, especialmente se a caixa de popup não tiver a mesma largura da parte do topo. No Edge, o contorno nem sequer aparece porque o Edge não suporta :focus-within (ver abaixo). Então, o que podemos fazer em vez disso?

Decidi utilizar isto:

.combobox > *:not(:last-child):focus {
  outline: 2px solid #48F8;
}

Isso desenha um contorno à volta do elemento filho destacado em vez da própria caixa de combo. Por vezes, no entanto, também fica estranho se o filho não tiver o mesmo tamanho da caixa de combo que o engloba. Por isso, adicionei transparência (#48F8 em vez de #48F) para o tornar menos visível, e consequentemente, com um aspeto menos estranho no pior dos casos.

Manter aberto

Os estilos que temos para já mantêm a caixa aberta apenas quando algo tem destaque. Por isso, se clicares em texto na área popup, o popup fecha. Para a última versão, expandi a lista de razões para manter o popup aberto para incluir um estilo sticky, que manterá o drop-down aberto ao passar o rato por cima, de modo a que, ao clicar, não feche a caixa.

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > *:last-child:focus-within,
.dropdown > *:last-child:focus-within,
.combobox > .sticky:last-child:hover,
.dropdown > .sticky:last-child:hover {
  display: block;
  top: 100%;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
}

Tal como abordei anteriormente, ocorrem erros quando a área do topo de uma caixa de combo tem uma caixa de texto. Para te permitir evitar facilmente este problema, ajustei o CSS existente para que o estilo pointer-events: none não seja aplicado quando o elemento .dropdown também tem a classe sticky:

.dropdown:not(.sticky) > *:not(:last-child):focus,
.downarrow:focus,
.dropdown:focus {
  pointer-events: none; /* Faz com que o segundo clique feche */
}

Por fim, se uma lista .dropdown contém links, existe uma pequena inconveniência. Após clicar num link, a lista não fechará automaticamente porque o link tem o destaque e programamos o drop-down para não fechar quando um descendente tem o destaque.

Para evitar isso, adicionei suporte para uma nova classe less-sticky. Tal como sticky, less-sticky mantém o popup aberto quando o rato passa por cima. Ao contrário de sticky, less-sticky não mantém o popup aberto quando um descendente tem o destaque.

Então, a nossa nova lista de seletores está a ficar bastante longa:

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > .sticky:last-child:hover,
.dropdown > .sticky:last-child:hover,
.combobox > .less-sticky:last-child:hover,
.dropdown > .less-sticky:last-child:hover,
.combobox > *:last-child:focus-within:not(.less-sticky),
.dropdown > *:last-child:focus-within:not(.less-sticky) {
  display: block;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
  top: 100%;
}

Ainda nem sequer terminamos, porque isto ainda não é compatível com o Edge e com o Internet Explorer.

Casos do Edge

Assim que coloquei a minha caixa de combo a trabalhar perfeitamente no Firefox e no Chrome, fiquei transtornado ao ver que ficava feia e completamente inutilizável no Edge. O que correu mal?

Em primeiro lugar, os contornos desapareceram porque o Edge e o IE não suportam transparência nos contornos, como em rgb(200,150,100,50) ou #8888. Utilizei #8888 para o contorno. Para fazer com que funcione no Edge, alterei-o para #999.

Outra alternativa é fornecer um contorno não opaco só para o Edge:

border: 1px solid #888;  /* Edge/IE não têm suporte para transparência do contorno */
border: 1px solid #8888; /* Restantes browsers */

Em segundo lugar, não importa quantas vezes clicas — as div do drop-down simplesmente não abrem!

Ao resolver este problema, aprendi algo novo — se um browser não compreender um seletor utilizado numa declaração CSS, este irá ignorar todo o bloco.

Por exemplo, se escreveres .x, .y, .z:unknown { margin:1em }, então x e y não vão ter margens simplesmente porque o browser não compreende o unknown.

Acontece que o Edge não compreende o :focus-within, que é o responsável por permitir que a área do drop-down permaneça aberta quando um elemento input dentro da área drop-down é clicado. O problema foi ter misturado seletores suportados e não suportados.

De maneira a fazer com que funcione no Edge, precisava de repetir todo o bloco de estilos "como-abrir-a-lista-de-drop-down" separadamente para os seletores que utilizam :focus-within, de modo que esses seletores não impeçam que outros seletores funcionem.

Depois, como alternativa para a falta de :focus-within, decidi tentar detetar o Edge (texto em inglês) e manter automaticamente qualquer lista .dropdown aberta quando o rato está a passar por cima, no estado :hover, neste caso. Assim, ainda é possível utilizar um elemento destacado (tal como um a href ou input) dentro da área drop-down, embora desapareça precocemente caso o rato saia de cima.

O código para tudo isso é o seguinte:

/* Lista de situações para as quais apresentar a lista dropdown. */
.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > .sticky:last-child:hover,
.dropdown > .sticky:last-child:hover,
.combobox > .less-sticky:last-child:hover,
.dropdown > .less-sticky:last-child:hover,
.combobox > *:last-child:focus:not(.less-sticky),
.dropdown > *:last-child:focus:not(.less-sticky) {
  display: block;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
}

/* focus-within não é suportado pelo Edge/IE. Seletores não suportados fazem com que todo o bloco seja ignorado, por isso temos de repetir todos os estilos de modo separado para o focus-within. */
.combobox > *:last-child:focus-within:not(.less-sticky),
.dropdown > *:last-child:focus-within:not(.less-sticky) {
  display: block;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
}

/* Deteta o Edge/IE e comporta-se como se less-sticky estivesse ativo para todos os dropdowns (caso contrário não é possível clicar nos links) */
@supports (-ms-ime-align:auto) {
  .dropdown > *:last-child:hover {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Deteta o IE e faz a mesma coisa. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .dropdown > *:last-child:hover {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}

Em terceiro, o estilo outline não estava a funcionar no Edge. O problema era novamente que o Edge não tem suporte para contornos não opacos.

A solução é um estilo especial de transparência para o Edge:

outline: 2px solid #8AF; /* Edge/IE não consegue lidar com a transparência do contorno */  
outline: 2px solid #48F8;

Em quarto, eu tinha colocado duas caixas de combo dentro de um elemento <label>. Tentar abrir a segunda abre sempre a primeira, em vez disso. Acontece que, no Edge, se estiveres a utilizar um rato, podes selecionar apenas o primeiro elemento input dentro de uma label.

Em quinto, as caixas de drop-down não tinham sombras. Mais uma vez, isto era por ter utilizado uma sombra não opaca. Mais uma vez, o Edge precisava do seu próprio CSS especial:

box-shadow: 1px 2px 4px 1px #666; /* O Edge não consegue lidar com a transparência da sombra */
box-shadow: 1px 2px 4px 1px #4448;

O Internet Explorer 11 tem praticamente as mesmas limitações. Por isso, corrigir o Edge consertou praticamente o IE, com a exceção de que era necessária uma deteção de browser diferente para o IE em comparação com o Edge.

Sincronizar o popup com a área superior

Infelizmente, o CSS não pode fazer isso por nós. Por isso, na demonstração final, é utilizado JavaScript para atualizar a parte superior da caixa de combo quando a parte do popup é alterada. Por exemplo, utilizei este código com base em jQuery para atualizar a parte superior do selecionador de cor:

function parentComboBox(el) {
  for (el = el.parentNode; el && 
    Array.prototype.indexOf.call(el.classList, "combobox") <= -1;)
    el = el.parentNode;
  return el;
}
$(".combobox .color").mousedown(function() {
  var c = this.style.backgroundColor;
  $(parentComboBox(this)).find(".color")[0].
    style.backgroundColor = c;
});

Versão final

Clica aqui para veres uma demonstração com código-fonte no CodePen.

Tradução para o português europeu.

As oito universidades da Ivy League estão entre as mais prestigiadas do mundo. Estas são Harvard, Yale, Princeton, Columbia, Cornell, Dartmouth, Brown e a Universidade da Pennsylvania.

Em 2023, as oito escolas da Ivy League ficaram no top 20 da classificação de universidades nacionais do U.S. News & World Report (link em inglês). Como podes imaginar, estas instituições são altamente seletivas e é muito difícil de ingressar nelas.

A boa notícia é que estas oferecem cursos online gratuitos. Neste artigo, utilizei a base de dados do Class Central para compilar estes cursos para ti. No total, as escolas da Ivy League oferecem atualmente mais de 850 cursos, que, combinados, contam com 40 milhões de inscrições.

Na semana passada, partilhei uma lista de certificados gratuitos de programação (link em inglês). Acontece que uma das universidades da Ivy League também criou essa lista – a universidade de Harvard, que oferece certificados gratuitos em Ciências da Computação, Python, Inteligência Artificial... podes encontrar todos os detalhes aqui: 1000+ Free Developer Certifications (link em inglês).

Para tornar a compilação abaixo um pouco mais fácil de navegar, dividi-a de acordo com o tema do curso. Podes clicar num tema e saltar diretamente para os cursos correspondentes:

• Ciências da Computação
• Programação
• Ciências da Informação
• Matemática
• Engenharia
• Humanidades
• Negócios
• Ciência
• Arte e Design
• Ciências Sociais
• Saúde e Medicina
• Educação e Ensino
• Desenvolvimento Pessoal

Também configurei uma coleção no Class Central para cursos online da Ivy League (link em inglês). Essa coleção é atualizada automaticamente à medida que são lançados novos cursos. Se gostarias de receber notificações sobre novos cursos da Ivy League, podes "seguir" a coleção.

Observa que compreender como examinar gratuitamente um curso em plataformas como o Coursera pode ser um pouco confuso. Por isso, eu e meu colega Pat escrevemos um guia dedicado ao assunto: Como fazer a inscrição em cursos do Coursera de modo gratuito (link em inglês).

Sem mais demoras, aqui estão todos os cursos online gratuitos oferecidos pelas instituições da Ivy League.

Ciências da Computação (50)

• CS50's Introduction to Computer Science, da Universidade de Harvard ★★★★★(142)
• Algorithms, Part I, da Universidade de Princeton ★★★★★(59)
• Algorithms, Part II, da Universidade de Princeton ★★★★★(21)
• Bitcoin and Cryptocurrency Technologies, da Universidade de Princeton ★★★★☆(20)
• Machine Learning for Data Science and Analytics, da Universidade de Columbia
• CS50's Computer Science for Business Professionals, da Universidade de Harvard ★★★★★(14)
• Harvard CS50 – Full Computer Science University Course, da Universidade de Harvard ★★★★★(14)
• Artificial Intelligence (AI), da Universidade de Columbia ★★★★☆(12)
• Machine Learning, da Universidade de Columbia ★★★★☆(12)
• CS50's Introduction to Artificial Intelligence with Python, da Universidade de Harvard ★★★★★(11)
• CS50's Understanding Technology, da Universidade de Harvard ★★★★★(10)
• Reinforcement Learning, da Universidade de Brown
• Enabling Technologies for Data Science and Analytics: The Internet of Things, da Universidade de Columbia
• Computer Architecture, da Universidade de Princeton ★★★★☆(6)
• Analysis of Algorithms, da Universidade de Princeton ★★★★☆(6)
• Machine Learning, do Instituto de Tecnologia da Geórgia ★★★★☆(6)
• CS50's Computer Science for Lawyers, da Universidade de Harvard ★★★★★(5)
• Robotics: Perception, da Universidade da Pensilvânia
• Machine Learning: Unsupervised Learning, da Universidade de Brown
• C Programming: Modular Programming and Memory Management, da Faculdade de Dartmouth
• Advanced Algorithms (COMPSCI 224), da Universidade de Harvard ★★★★★(2)
• HI-FIVE: Health Informatics For Innovation, Value & Enrichment (Administrative/IT Perspective), da Universidade de Columbia ★★★★★(2)
• C Programming: Pointers and Memory Management, da Faculdade de Dartmouth ★★★★★(2)
• C Programming: Language Foundations, da Faculdade de Dartmouth ★★★★★(2)
• Linux Basics: The Command Line Interface, da Faculdade de Dartmouth ★★★★★(2)
• C Programming: Using Linux Tools and Libraries, da Faculdade de Dartmouth ★★★★★(2)
• CS50's AP® Computer Science Principles, da Universidade de Harvard ★★★★★(1)
• HI-FIVE: Health Informatics For Innovation, Value & Enrichment (Clinical Perspective), da Universidade de Columbia ★★★★☆(1)
• Computer Science: Programming with a Purpose, da Universidade de Princeton ★★★★★(1)
• Fundamentals of TinyML, da Universidade de Harvard
• Applications of TinyML, da Universidade de Harvard
• Deploying TinyML, da Universidade de Harvard
• MLOps for Scaling TinyML, da Universidade de Harvard
• AI Applications in Marketing and Finance, da Universidade da Pensilvânia
• AI Strategy and Governance, da Universidade da Pensilvânia
• AI Fundamentals for Non-Data Scientists, da Universidade da Pensilvânia
• AI Applications in People Management, da Universidade da Pensilvânia
• Robotics: Vision Intelligence and Machine Learning, da Universidade da Pensilvânia
• Data Structures and Software Design, da Universidade da Pensilvânia
• Algorithm Design and Analysis, da Universidade da Pensilvânia
• Visual Perception, da Universidade de Columbia
• 3D Reconstruction - Multiple Viewpoints, da Universidade de Columbia
• Camera and Imaging, da Universidade de Columbia
• Features and Boundaries, da Universidade de Columbia
• 3D Reconstruction - Single Viewpoint, da Universidade de Columbia
• Computer Science: Algorithms, Theory, and Machines, da Universidade de Princeton
• Алгоритмы, часть I, da Universidade de Princeton (em russo)
• C Programming: Getting Started, da Faculdade de Dartmouth
• C Programming: Advanced Data Types, da Faculdade de Dartmouth
• Linux Basics: The Command Line Interface - 6, da Faculdade de Dartmouth

Programação (22)

• CS50's Web Programming with Python and JavaScript, da Universidade de Harvard ★★★★★(22)
• Using Python for Research, da Universidade de Harvard ★★★★☆(12)
• Database Systems - Cornell University Course (SQL, NoSQL, Large-Scale Data Analysis), da Universidade de Cornell ★★★★★(9)
• Programming for the Web with JavaScript, da Universidade da Pensilvânia ★★★★★(5)
• The Computing Technology Inside Your Smartphone, da Universidade de Cornell ★★★★★(5)
• CS50's Introduction to Programming with Python, da Universidade de Harvard ★★★★★(4)
• CS50's Introduction to Game Development, da Universidade de Harvard ★★★★☆(3)
• CS50's Introduction to Programming with Scratch, da Universidade de Harvard ★★★★★(2)
• Software Development Fundamentals, da Universidade da Pensilvânia
• CS50's Mobile App Development with React Native, da Universidade de Harvard ★★★★☆(1)
• Quantitative Methods for Biology, da Universidade de Harvard
• Inheritance and Data Structures in Java, da Universidade da Pensilvânia
• Introduction to Java and Object-Oriented Programming, da Universidade da Pensilvânia
• Introduction to Python Programming, da Universidade da Pensilvânia
• Haskell: Lecture notes and assignments, da Universidade da Pensilvânia
• C Programming: Modular Programming and Memory Management - 3, da Faculdade de Dartmouth
• C Programming: Pointers and Memory Management - 4, da Faculdade de Dartmouth
• C Programming: Getting Started - 1, da Faculdade de Dartmouth
• C Programming: Language Foundations - 2, da Faculdade de Dartmouth
• CSCI 1730 - Introduction to Programming Languages, da Universidade de Brown
• C Programming: Using Linux Tools and Libraries - 7, da Faculdade de Dartmouth
• C Programming: Advanced Data Types - 5, da Faculdade de Dartmouth

Ciências da Informação (23)

• Statistics and R, da Universidade de Harvard ★★★★☆(20)
• Statistical Thinking for Data Science and Analytics, da Universidade de Columbia
• Fundamentals of Qualitative Research Methods, da Universidade de Yale ★★★★★(12)
• Data Science: R Basics, da Universidade de Harvard ★★★★★(11)
• People Analytics, da Universidade da Pensilvânia ★★★★☆(5)
• Algorithms for Big Data (COMPSCI 229r), da Universidade de Harvard ★★★★★(4)
• Data Science: Visualization, da Universidade de Harvard ★★★★★(4)
• Causal Diagrams: Draw Your Assumptions Before Your Conclusions, da Universidade de Harvard ★★★★★(3)
• Data Science: Machine Learning, da Universidade de Harvard ★★★★☆(3)
• High-Dimensional Data Analysis, da Universidade de Harvard ★★★★☆(3)
• Data Science: Wrangling, da Universidade de Harvard ★★★★★(2)
• STAT115 2020, da Universidade de Harvard ★★★★★(1)
• Data Science: Productivity Tools, da Universidade de Harvard ★★★★★(1)
• Data Science: Inference and Modeling, da Universidade de Harvard ★★★★☆(1)
• Big Data and Education, da Universidade de Columbia
• [New] Big Data Solutions for Social and Economic Disparities, da Universidade de Harvard
• STAT115 2018, da Universidade de Harvard
• STAT115 2019, da Universidade de Harvard
• Introduction to Data Science with Python, da Universidade de Harvard
• Principles, Statistical and Computational Tools for Reproducible Data Science, da Universidade de Harvard
• Data Science: Capstone, da Universidade de Harvard
• Data Analysis Using Python, da Universidade da Pensilvânia
• Data, Models and Decisions in Business Analytics, da Universidade de Columbia

Matemática (17)

• Introduction to Linear Models and Matrix Algebra, da Universidade de Harvard ★★★★☆(12)
• Calculus: Single Variable Part 1 - Functions, da Universidade da Pensilvânia ★★★★★(8)
• Fat Chance: Probability from the Ground Up, da Universidade de Harvard ★★★★★(5)
• Calculus: Single Variable Part 2 - Differentiation, da Universidade da Pensilvânia ★★★★★(5)
• Statistical Inference and Modeling for High-throughput Experiments, da Universidade de Harvard ★★★★★(4)
• Calculus: Single Variable Part 3 - Integration, da Universidade da Pensilvânia ★★★★☆(4)
• Data Science: Linear Regression, da Universidade de Harvard
• Calculus: Single Variable Part 4 - Applications, da Universidade da Pensilvânia ★★★★★(3)
• Analytic Combinatorics, da Universidade de Princeton ★★★★☆(3)
• Calculus Applied!, da Universidade de Harvard ★★★★★(2)
• Introduction to Probability, da Universidade de Harvard ★★★★★(1)
• A Crash Course in Causality: Inferring Causal Effects from Observational Data, da Universidade da Pensilvânia ★★★★☆(1)
• Statistics 110: Probability, da Universidade de Harvard
• Single Variable Calculus, da Universidade da Pensilvânia
• Causal Inference, da Universidade de Columbia
• Causal Inference 2, da Universidade de Columbia
• Nonlinear Dynamics and Chaos, da Universidade de Cornell

Engenharia (20)

• The Art of Structural Engineering: Vaults, da Universidade de Princeton ★★★★★(23)
• Robotics: Aerial Robotics, da Universidade da Pensilvânia ★★★★☆(10)
• The Art of Structural Engineering: Bridges, da Universidade de Princeton ★★★★☆(7)
• Energy Within Environmental Constraints, da Universidade de Harvard ★★★★★(6)
• Robotics: Computational Motion Planning, da Universidade da Pensilvânia ★★★★☆(4)
• Robotics: Mobility da Universidade da Pensilvânia
• Robotics: Kinematics and Mathematical Foundations, da Universidade da Pensilvânia
• Robotics, da Universidade de Columbia
• A Hands-on Introduction to Engineering Simulations, da Universidade de Cornell ★★★★★(2)
• The Engineering of Structures Around Us, da Faculdade de Dartmouth ★★★★★(2)
• Robotics: Estimation and Learning, da Universidade da Pensilvânia
• MOS Transistors, da Universidade de Columbia ★★★★★(1)
• Exploring Renewable Energy Schemes, da Universidade da Pensilvânia
• Robotics: Dynamics and Control, da Universidade da Pensilvânia
• Robotics: Locomotion Engineering, da Universidade da Pensilvânia
• Robotics: Capstone, da Universidade da Pensilvânia
• Introduction to Engineering and Design, da Universidade de Brown
• Energy Justice: Fostering More Equitable Energy Futures, da Faculdade de Dartmouth
• Engineering of Structures: Compression, da Faculdade de Dartmouth
• Engineering of Structures: Shear and Bending, da Faculdade de Dartmouth

Humanidades (97)

• HOPE: Human Odyssey to Political Existentialism, da Universidade de Princeton ★★★★★(273)
• Modern & Contemporary American Poetry ("ModPo"), da Universidade da Pensilvânia ★★★★★(189)
• Moralities of Everyday Life, da Universidade de Yale ★★★★★(42)
• English for Career Development, da Universidade da Pensilvânia ★★★★★(24)
• Greek and Roman Mythology, da Universidade da Pensilvânia ★★★★★(21)
• English for Journalism, da Universidade da Pensilvânia ★★★★☆(15)
• Science & Cooking: From Haute Cuisine to Soft Matter Science (chemistry), da Universidade de Harvard ★★★★★(14)
• English for Science, Technology, Engineering, and Mathematics, da Universidade da Pensilvânia ★★★★★(12)
• Ancient Philosophy: Plato & His Predecessors, da Universidade da Pensilvânia ★★★★★(12)
• China’s Political and Intellectual Foundations: From Sage Kings to Confucius, da Universidade de Harvard ★★★★★(11)
• Effective Altruism da Universidade de Princeton ★★★★☆(11)
• Visualizing Japan (1850s-1930s): Westernization, Protest, Modernity, da Universidade de Harvard ★★★★★(10)
• Religious Literacy: Traditions and Scriptures, da Universidade de Harvard ★★★★★(9)
• Religion, Conflict and Peace, da Universidade de Harvard ★★★★☆(9)
• Ancient Philosophy: Aristotle and His Successors, da Universidade da Pensilvânia ★★★★☆(9)
• Modern China’s Foundations: The Manchus and the Qing, da Universidade de Harvard ★★★★★(8)
• Creating Modern China: The Republican Period to the Present, da Universidade de Harvard ★★★★★(7)
• Christianity Through Its Scriptures, da Universidade de Harvard ★★★★☆(7)
• English for Business and Entrepreneurship, da Universidade da Pensilvânia ★★★★★(7)
• The Civil War and Reconstruction – 1865-1890: The Unfinished Revolution, da Universidade de Columbia ★★★★★(7)
• Literati China: Examinations, Neo-Confucianism, and Later Imperial China, da Universidade de Harvard ★★★★★(6)
• China’s First Empires and the Rise of Buddhism, da Universidade de Harvard ★★★★★(6)
• Covering Immigration: A Resource for Journalists, da Universidade de Harvard ★★★★★(6)
• Masterpieces of World Literature, da Universidade de Harvard ★★★★★(6)
• Buddhism Through Its Scriptures, da Universidade de Harvard ★★★★☆(6)
• Introduction to Ancient Egypt and Its Civilization, da Universidade da Pensilvânia ★★★★☆(6)
• The Civil War and Reconstruction - 1861 - 1865: A New Birth of Freedom, da Universidade de Columbia ★★★★★(6)
• Shakespeare's Hamlet: The Ghost, da Universidade de Harvard ★★★★★(5)
• Invasions, Rebellions, and the Fall of Imperial China, da Universidade de Harvard ★★★★★(5)
• China and Communism, da Universidade de Harvard ★★★★★(5)
• Wonders of Ancient Egypt, da Universidade da Pensilvânia ★★★★★(5)
• The Civil War and Reconstruction - 1850-1861: A House Divided, da Universidade de Columbia ★★★★★(5)
• Cosmopolitan Tang: Aristocratic Culture in China, da Universidade de Harvard ★★★★★(4)
• Global China: From the Mongols to the Ming, da Universidade de Harvard ★★★★★(4)
• Contemporary China: The People's Republic, Taiwan, and Hong Kong, da Universidade de Harvard ★★★★★(4)
• Journey of the Universe: The Unfolding of Life, da Universidade de Yale ★★★★☆(4)
• Global History Lab, da Universidade de Princeton ★★★★☆(4)
• Hinduism Through Its Scriptures, da Universidade de Harvard ★★★★☆(3)
• Introduction to Ancient Greek History, da Universidade de Yale ★★★★★(3)
• A Journey through Western Christianity: from Persecuted Faith to Global Religion (200 - 1650), da Universidade de Yale ★★★★☆(3)
• Question Reality! Science, philosophy, and the search for meaning, da Faculdade de Dartmouth ★★★★☆(3)
• Shakespeare’s Othello: The Moor, da Universidade de Harvard ★★★★★(2)
• Islam Through Its Scriptures, da Universidade de Harvard ★★★★★(2)
• Bioethics: The Law, Medicine, and Ethics of Reproductive Technologies and Genetics, da Universidade de Harvard ★★★★☆(2)
• The Ancient Greek Hero, da Universidade de Harvard
• The History of Medieval Medicine Through Jewish Manuscripts, da Universidade da Pensilvânia ★★★★★(2)
• Introduction to the Old Testament, da Universidade de Yale ★★★★★(2)
• Women Have Always Worked: The U.S. Experience 1700 - 1920, da Universidade de Columbia ★★★★★(2)
• Power and Responsibility: Doing Philosophy with Superheroes, da Universidade de Harvard ★★★★★(1)
• Poetry in America: The Civil War and Its Aftermath, da Universidade de Harvard ★★★★★(1)
• Poetry in America: Modernism, da Universidade de Harvard ★★★★★(1)
• PredictionX: Lost Without Longitude, da Universidade de Harvard ★★★★★(1)
• Ancient Masterpieces of World Literature, da Universidade de Harvard ★★★★★(1)
• Science & Cooking: From Haute Cuisine to Soft Matter Science (physics), da Universidade de Harvard ★★★★★(1)
• Shakespeare's Life and Work, da Universidade de Harvard ★★★★★(1)
• Shakespeare's The Merchant of Venice: Shylock, da Universidade de Harvard ★★★★★(1)
• Introduction to Digital Humanities, da Universidade de Harvard ★★★★★(1)
• Judaism Through Its Scriptures, da Universidade de Harvard ★★★★★(1)
• Poetry in America: Whitman, da Universidade de Harvard ★★★★☆(1)
• Learn Ancient Greek, da Universidade de Harvard ★★★★☆(1)
• Japanese Books: From Manuscript to Print, da Universidade de Harvard ★★★★☆(1)
• The Path to Happiness: What Chinese Philosophy Teaches us about the Good Life, da Universidade de Harvard ★★★★☆(1)
• The Tabernacle in Word & Image: An Italian Jewish Manuscript Revealed, da Universidade da Pensilvânia ★★★★★(1)
• Seeking Women’s Rights: Colonial Period to the Civil War, da Universidade de Columbia ★★★★★(1)
• Wage Work for Women Citizens: 1870-1920, da Universidade de Columbia ★★★★★(1)
• Indian & Tibetan River of Buddhism, da Universidade de Columbia ★★★★★(1)
• John Milton: Paradise Lost, da Faculdade de Dartmouth ★★★★★(1)
• Food Fermentation: The Science of Cooking with Microbes, da Universidade de Harvard
• Poetry in America: Whitman, da Universidade de Harvard
• China’s Political and Intellectual Foundations: From Sage Kings to Confucius, da Universidade de Harvard
• Women Making History: Ten Objects, Many Stories, da Universidade de Harvard
• Modern Masterpieces of World Literature, da Universidade de Harvard
• China Humanities: The Individual in Chinese Culture, da Universidade de Harvard
• Sikhism Through Its Scriptures, da Universidade de Harvard
• Digital Humanities in Practice: From Research Questions to Results, da Universidade de Harvard
• The Jewish Bible: Its History As A Physical Artifact, da Universidade de Harvard
• ChinaX Book Club: Five Authors, Five Books, Five Views of China, da Universidade de Harvard
• Changing Minds: Geographic Discoveries and New Worlds through the Eyes of a Renaissance Jewish Scholar, da Universidade da Pensilvânia
• In the Margins of a Medieval Jewish Prayer Book: What Can Physical Manuscripts Tell Us about History?, da Universidade da Pensilvânia
• Benjamin Franklin and His World, da Universidade da Pensilvânia
• Indigenous Religions & Ecology, da Universidade de Yale
• East Asian Religions & Ecology, da Universidade de Yale
• South Asian Religions & Ecology, da Universidade de Yale
• Western Religions & Ecology, da Universidade de Yale
• Introduction to Religions & Ecology, da Universidade de Yale
• Christianity & Ecology, da Universidade de Yale
• Death with Shelly Kagan, da Universidade de Yale
• The Civil War and Reconstruction, da Universidade de Yale
• Women Have Always Worked: The U.S. Experience 1920 - 2016, da Universidade de Columbia
• Negotiating a Changing World: 1920-1950, da Universidade de Columbia
• Fighting for Equality: 1950–2018, da Universidade de Columbia
• [New] Celebrating Food Culture: Cultural Adaptations of the Mediterranean Diet, da Universidade de Columbia
• Writing Case Studies: Science of Delivery, da Universidade de Princeton
• The Ethics of Memory, da Universidade de Brown
• Fantastic Places, Unhuman Humans: Exploring Humanity Through Literature, da Universidade de Brown
• Libertarian Free Will: Neuroscientific and Philosophical Evidence, da Faculdade de Dartmouth
• Question Reality: Mind, da Faculdade de Dartmouth

Negócios (90)

• Introduction to Marketing, da Universidade da Pensilvânia ★★★★☆(72)
• Introduction to Financial Accounting, da Universidade da Pensilvânia ★★★★★(66)
• Financial Markets, da Universidade de Yale ★★★★☆(36)
• Introduction to Operations Management, da Escola de Wharton da Universidade da Pensilvânia ★★★★☆(33)
• Viral Marketing and How to Craft Contagious Content, da Universidade da Pensilvânia ★★★★☆(28)
• Introduction to Corporate Finance, da Escola de Wharton da Universidade da Pensilvânia ★★★★☆(20)
• Customer Analytics, da Universidade da Pensilvânia
• The Global Financial Crisis, da Universidade de Yale ★★★★☆(11)
• Entrepreneurship in Emerging Economies, da Universidade de Harvard ★★★★★(10)
• Entrepreneurship 2: Launching your Start-Up, da Universidade da Pensilvânia ★★★★☆(10)
• Improving Your Business Through a Culture of Health, da Universidade de Harvard ★★★★★(9)
• Accounting Analytics, da Universidade da Pensilvânia ★★★★☆(8)
• Entrepreneurship 1: Developing the Opportunity, da Universidade da Pensilvânia ★★★★☆(7)
• Introducción a las Finanzas Corporativas, da Universidade da Pensilvânia ★★★★★(7)
• Entrepreneurship 4: Financing and Profitability, da Universidade da Pensilvânia ★★★★☆(6)
• Operations Analytics, da Universidade da Pensilvânia ★★★★☆(6)
• Introduction to Spreadsheets and Models, da Universidade da Pensilvânia ★★★★☆(6)
• Social Impact Strategy: Tools for Entrepreneurs and Innovators, da Universidade da Pensilvânia ★★★★☆(6)
• Decision-Making and Scenarios, da Universidade da Pensilvânia ★★★★★(5)
• Fundamentals of Quantitative Modeling, da Universidade da Pensilvânia ★★★★☆(5)
• Arts and Culture Strategy, da Universidade da Pensilvânia ★★★★★(5)
• More Introduction to Financial Accounting, da Universidade da Pensilvânia ★★★★☆(5)
• Entrepreneurship 3: Growth Strategies, da Universidade da Pensilvânia ★★★★☆(4)
• Corporate Social Responsibility (CSR): A Strategic Approach, da Universidade da Pensilvânia ★★★★★(4)
• Analytics in Python, da Universidade de Columbia ★★★★☆(4)
• What is Corruption: Anti-Corruption and Compliance, da Universidade da Pensilvânia ★★★★★(3)
• Wharton Business Foundations Capstone, da Universidade da Pensilvânia ★★★★☆(3)
• Leadership: Creating Public Value, da Universidade de Harvard ★★★★★(2)
• Introducción al Marketing, da Universidade da Pensilvânia ★★★★★(2) (em espanhol)
• Introducción a la Contabilidad Financiera, da Universidade da Pensilvânia ★★★★★(2) (em espanhol)
• Crowdfunding, da Universidade da Pensilvânia
• Leading the Life You Want, da Universidade da Pensilvânia
• Exercising Leadership: Foundational Principles, da Universidade de Harvard ★★★★★(1)
• Technology Entrepreneurship: Lab to Market, da Universidade de Harvard ★★★★★(1)
• Managing Human Capital in Retail, da Universidade da Pensilvânia ★★★★★(1)
• Global Trends for Business and Society, da Universidade da Pensilvânia ★★★★★(1)
• Building High-Performing Teams, da Universidade da Pensilvânia ★★★★★(1)
• Retail Digital Supply Chain, da Universidade da Pensilvânia ★★★★☆(1)
• 市场营销概论 (中文版), da Universidade da Pensilvânia
• ESG Risks and Opportunities, da Universidade da Pensilvânia
• Mercados financeiros, da Universidade de Yale ★★★★★(1) (em português)
• Introduction to Corporate Finance, da Universidade de Columbia ★★★★★(1)
• Strategic Management Capstone, da Escola de Wharton da Universidade da Pensilvânia ★★★★★(1)
• Why Smart Executives Fail: Common Mistakes & Warning Signs, da Faculdade de Dartmouth ★★★★★(1)
• Omnichannel Strategy and Management, da Faculdade de Dartmouth ★★★★☆(1)
• Retail Fundamentals, da Faculdade de Dartmouth
• Modeling Risk and Realities, da Universidade da Pensilvânia
• Wharton Business and Financial Modeling Capstone, da Universidade da Pensilvânia
• The Power of Team Culture, da Universidade da Pensilvânia
• Culture-Driven Team Building Capstone, da Universidade da Pensilvânia
• Retail Marketing Strategy, da Universidade da Pensilvânia
• Introducción a la Gestión de Operaciones, da Universidade da Pensilvânia (em espanhol)
• 运营管理概论（中文版), da Universidade da Pensilvânia (em chinês)
• 财务会计概论（中文版), da Universidade da Pensilvânia (em chinês)
• 企业金融概论（中文版), da Universidade da Pensilvânia (em chinês)
• Fundamentals of Finance, da Universidade da Pensilvânia (em chinês)
• Employment Law: The Gig Economy, da Universidade da Pensilvânia
• Managing Social and Human Capital, da Universidade da Pensilvânia
• 沃顿商务基础毕业项目 (中文版), da Universidade da Pensilvânia (em chinês)
• Wharton Entrepreneurship Capstone, da Universidade da Pensilvânia
• Proyecto de Fundamentos Empresariales de Wharton, da Universidade da Pensilvânia
• Creating a Team Culture of Continuous Learning, da Universidade da Pensilvânia
• Management Fundamentals, da Universidade da Pensilvânia
• ESG and Social Activism, da Universidade da Pensilvânia
• ESG Impact: Investor Perspective, da Universidade da Pensilvânia
• ESG and Climate Change, da Universidade da Pensilvânia
• Employment Contracts, da Universidade da Pensilvânia
• What is Compliance?, da Universidade da Pensilvânia
• Effective Compliance Programs, da Universidade da Pensilvânia
• Business Analytics Capstone, da Universidade da Pensilvânia
• Mercados financieros, da Universidade de Yale
• Финансовые рынки, da Universidade de Yale (em russo)
• Marchés financiers, da Universidade de Yale (em francês)
• الأسواق المالية, da Universidade de Yale (em árabe)
• [New] Connected Leadership, da Universidade de Yale
• Demand and Supply Analytics, da Universidade de Columbia
• Marketing Analytics, da Universidade de Columbia
• Free Cash Flow Analysis, da Universidade de Columbia
• Advanced Topics in Derivative Pricing, da Universidade de Columbia
• Term-Structure and Credit Derivatives, da Universidade de Columbia
• Introduction to Financial Engineering and Risk Management, da Universidade de Columbia
• Optimization Methods in Asset Management, da Universidade de Columbia
• Computational Methods in Pricing and Model Calibration, da Universidade de Columbia
• Business Strategy from Wharton: Competitive Advantage, da Escola de Wharton da Universidade da Pensilvânia
• Introduction to Connected Strategy, da Escola de Wharton da Universidade da Pensilvânia
• Developing Breakthrough Innovations with the Three Box Solution, da Faculdade de Dartmouth
• Executing Breakthrough Innovations with the Three Box Solution, da Faculdade de Dartmouth
• Lessons on Wisdom: Personal Leadership for Your Life, da Faculdade de Dartmouth
• Decision-Making: Blending Art & Science, da Faculdade de Dartmouth
• Superbosses: Managing Talent & Leadership, da Faculdade de Dartmouth

Ciência (49)

• Best Practices for Biomedical Research Data Management (HE), da Faculdade de Medicina de Harvard ★★★★★(63)
• Fundamentals of Neuroscience, Part 1: The Electrical Properties of the Neuron, da Universidade de Harvard ★★★★★(20)
• Principles of Biochemistry, da Universidade de Harvard ★★★★★(12)
• Fundamentals of Neuroscience, Part 2: Neurons and Networks, da Universidade de Harvard ★★★★★(8)
• Fundamentals of Neuroscience, Part 3: The Brain, da Universidade de Harvard ★★★★★(7)
• The Health Effects of Climate Change, da Universidade de Harvard ★★★★★(7)
• Space, Time and Einstein, da Universidade de Columbia ★★★★★(7)
• Super-Earths and Life, da Universidade de Harvard ★★★★☆(5)
• Sharks!, da Universidade de Cornell ★★★★★(5)
• Construction Cost Estimating and Cost Control, da Universidade de Columbia ★★★★★(4)
• Special Relativity, da Universidade de Columbia ★★★★☆(4)
• From Chemistry to Life, da Universidade de Harvard ★★★★☆(3)
• Cell Biology: Mitochondria, da Universidade de Harvard ★★★★☆(3)
• Backyard Meteorology: The Science of Weather, da Universidade de Harvard
• Construction Project Management, da Universidade de Columbia ★★★★★(3)
• Imagining Other Earths, da Universidade de Princeton ★★★★☆(3)
• The Climate-Energy Challenge, da Universidade de Harvard ★★★★☆(2)
• The Einstein Revolution, da Universidade de Harvard ★★★★☆(2)
• Introduction to Bioconductor, da Universidade de Harvard
• Basic Behavioral Neurology, da Universidade da Pensilvânia
• Fundamentals of Physics, da Universidade de Yale ★★★★☆(2)
• Frontiers of Science: Climate & Us, da Universidade de Columbia ★★★★★(2)
• The Edges of the Universe, da Universidade de Harvard ★★★★★(1)
• MalariaX: Defeating Malaria from the Genes to the Globe, da Universidade de Harvard ★★★★★(1)
• Advanced Bioconductor, da Universidade de Harvard
• New Ideas About Dark Matter, da Universidade da Pensilvânia ★★★★☆(1)
• Construction Scheduling, da Universidade de Columbia ★★★★★(1)
• Construction Finance, da Universidade de Columbia ★★★★☆(1)
• Reclaiming Broken Places: Introduction to Civic Ecology, da Universidade de Cornell
• Fundamental Lessons From String Theory, da Universidade de Harvard
• Case Studies in Functional Genomics, da Universidade de Harvard
• Energy and Thermodynamics, da Universidade de Harvard
• Electrochemistry, da Universidade de Harvard
• Entropy and Equilibria, da Universidade de Harvard
• Energy to Electrochemistry Final Exam, da Universidade de Harvard
• Philosophy of Science, da Universidade da Pensilvânia
• 宇宙之旅：对话 (Journey of the Universe: Weaving Knowledge and Action), da Universidade de Yale (em chinês)
• Thomas Berry的世界观：地球社区的繁荣 (The Worldview of Thomas Berry: The Flourishing of the Earth Community), da Universidade de Yale (em chinês)
• 宇宙之旅：展现生命 (Journey of the Universe: The Unfolding of Life), da Universidade de Yale (em chinês)
• Tropical Forest Landscapes 101: Conservation & Restoration, da Universidade de Yale
• Journey Conversations: Weaving Knowledge and Action, da Universidade de Yale
• The Worldview of Thomas Berry: The Flourishing of the Earth Community, da Universidade de Yale
• How Black Holes Became Real, da Universidade de Yale
• Rewriting the Code of Life with CRISPR, da Universidade de Columbia
• The Construction Industry: The Way Forward, da Universidade de Columbia
• Endless Universe: Beyond the Big Bang, da Universidade de Princeton
• Question Reality: Matter, da Faculdade de Dartmouth
• Bipedalism: The Science of Upright Walking, da Faculdade de Dartmouth
• Question Reality: Cosmos, da Faculdade de Dartmouth

Arte e Design (18)

• Gamification, da Universidade da Pensilvânia ★★★★★(58)
• Introduction to Classical Music, da Universidade de Yale ★★★★★(25)
• Design: Creation of Artifacts in Society, da Universidade da Pensilvânia ★★★★☆(18)
• Roman Architecture, da Universidade de Yale ★★★★☆(13)
• The Architectural Imagination, da Universidade de Harvard ★★★★☆(12)
• 18th-Century Opera: Handel & Mozart, da Universidade de Harvard ★★★★★(5)
• Animation and CGI Motion, da Universidade de Columbia ★★★★☆(5)
• First Nights - Handel's Messiah and Baroque Oratorio, da Universidade de Harvard ★★★★★(4)
• First Nights - Beethoven's 9th Symphony and the 19th Century Orchestra, da Universidade de Harvard ★★★★★(4)
• Reinventing the Piano, da Universidade de Princeton ★★★★★(4)
• First Nights - Monteverdi’s L’Orfeo and the Birth of Opera, da Universidade de Harvard ★★★★★(3)
• First Nights - Berlioz’s Symphonie Fantastique and Program Music in the 19th Century, da Universidade de Harvard ★★★★★(2)
• First Nights - Stravinsky’s Rite of Spring: Modernism, Ballet, and Riots da Universidade de Harvard ★★★★★(2)
• Introduction to Italian Opera, da Faculdade de Dartmouth
• 19th-Century Opera: Meyerbeer, Wagner, & Verdi, da Universidade de Harvard ★★★★★(1)
• Age of Cathedrals, da Universidade de Yale ★★★★☆(1)
• Music and Social Action, da Universidade de Yale ★★★★☆(1)
• Introduction to German Opera, da Faculdade de Dartmouth

Ciências Sociais (86)

• Justice, da Universidade de Harvard ★★★★★(52)
• The Science of Well-Being, da Universidade de Yale ★★★★★(29)
• Constitutional Interpretation, da Universidade de Princeton ★★★★★(25)
• An Introduction to American Law, da Universidade da Pensilvânia ★★★★★(19)
• Introduction to Psychology, da Universidade de Yale ★★★★★(16)
• Moral Foundations of Politics, da Universidade de Yale ★★★★☆(15)
• The Age of Sustainable Development, da Universidade de Columbia ★★★★★(14)
• Contract Law: From Trust to Promise to Contract, da Universidade de Harvard ★★★★★(13)
• Paradoxes of War, da Universidade de Princeton ★★★★☆(12)
• America's Written Constitution, da Universidade de Yale ★★★★☆(10)
• Tangible Things: Discovering History Through Artworks, Artifacts, Scientific Specimens, and the Stuff Around You, da Universidade de Harvard ★★★★☆(7)
• Positive Psychology: Applications and Interventions, da Universidade da Pensilvânia ★★★★★(7)
• Pyramids of Giza: Ancient Egyptian Art and Archaeology, da Universidade de Harvard ★★★★★(6)
• Introduction to Key Constitutional Concepts and Supreme Court Cases, da Universidade da Pensilvânia ★★★★★(6)
• Microeconomics: The Power of Markets, da Universidade da Pensilvânia ★★★★☆(6)
• Economics of Money and Banking, da Universidade de Columbia ★★★★★(6)
• Civil Liberties, da Universidade de Princeton ★★★★★(6)
• Child Protection: Children's Rights in Theory and Practice, da Universidade de Harvard ★★★★★(5)
• Microeconomics: When Markets Fail, da Universidade da Pensilvânia ★★★★★(5)
• Intellectual Property Law and Policy: Part 1, da Universidade da Pensilvânia ★★★★☆(5)
• America's Unwritten Constitution, da Universidade de Yale ★★★★★(5)
• Global History of Capitalism, da Universidade de Princeton ★★★★★(5)
• Revolutionary Ideas: Utility, Justice, Equality, Freedom, da Universidade da Pensilvânia ★★★★☆(4)
• A Law Student's Toolkit, da Universidade de Yale ★★★★☆(4)
• Corruption, da Universidade da Pensilvânia ★★★★★(3)
• Pyramids of Giza: Ancient Egyptian Art and Archaeology, da Universidade de Harvard ★★★★★(2)
• JuryX: Deliberations for Social Change, da Universidade de Harvard ★★★★★(2)
• American Government: Constitutional Foundations, da Universidade de Harvard ★★★★★(2)
• U.S. Public Policy: Social, Economic, and Foreign Policies, da Universidade de Harvard ★★★★☆(2)
• PredictionX: Omens, Oracles & Prophecies, da Universidade de Harvard
• Positive Psychology Specialization Project: Design Your Life for Well-being, da Universidade da Pensilvânia ★★★★★(2)
• Positive Psychology: Martin E. P. Seligman’s Visionary Science, da Universidade da Pensilvânia ★★★★★(2)
• Social Norms, Social Change I, da Universidade da Pensilvânia ★★★★★(2)
• Revolutionary Ideas: Borders, Elections, Constitutions, Prisons, da Universidade da Pensilvânia ★★★★★(2)
• Positive Psychology: Character, Grit and Research Methods, da Universidade da Pensilvânia ★★★★★(2)
• American Contract Law I, da Universidade de Yale ★★★★★(2)
• Everyday Parenting: The ABCs of Child Rearing, da Universidade de Yale ★★★★★(2)
• Introduction to Psychology, da Universidade de Yale ★★★★★(2)
• Making Government Work in Hard Places, da Universidade de Princeton ★★★★★(2)
• Global Systemic Risk, da Universidade de Princeton ★★★★★(2)
• Networks, Crowds and Markets, da Universidade de Cornell ★★★★☆(2)
• Wiretaps to Big Data: Privacy and Surveillance in the Age of Interconnection, da Universidade de Cornell ★★★★☆(2)
• Introduction to American Civics: Presented by Zero-L, da Universidade de Harvard ★★★★★(1)
• U.S. Political Institutions: Congress, Presidency, Courts, and Bureaucracy, da Universidade de Harvard ★★★★★(1)
• CitiesX: The Past, Present and Future of Urban Life, da Universidade de Harvard ★★★★★(1)
• Privacy Law and Data Protection, da Universidade da Pensilvânia ★★★★★(1)
• Network Dynamics of Social Behavior, da Universidade da Pensilvânia ★★★★☆(1)
• Intellectual Property Law and Policy: Part 2, da Universidade da Pensilvânia ★★★★☆(1)
• Social Norms, Social Change II, da Universidade da Pensilvânia
• Privacy Law and HIPAA, da Universidade da Pensilvânia
• Philosophy and the Science of Human Nature, da Universidade de Yale ★★★★★(1)
• Yale anthropology, da Universidade de Yale ★★★★★(1)
• Global Muckraking: Investigative Journalism and Global Media, da Universidade de Columbia ★★★★★(1)
• Book Club with Jeffrey Sachs, da Universidade de Columbia ★★★★★(1)
• Risk & Return, da Universidade de Columbia ★★★★☆(1)
• Structuring Business Agreements for Success, da Universidade de Cornell ★★★★★(1)
• [New] Evaluating Upward Mobility: The Fading American Dream, da Universidade de Harvard
• Justice with Michael Sandel, da Universidade de Harvard
• Econ 2450A Public Economics | Raj Chetty, da Universidade de Harvard
• Quantitative Social Science Methods,Quantitative Social Science Methods, da Universidade de Harvard
• Early Childhood Development: Global Strategies for Implementation, da Universidade de Harvard
• We the People: Civic Engagement in a Constitutional Democracy, da Universidade de Harvard
• Citizen Politics in America: Public Opinion, Elections, Interest Groups, and the Media, da Universidade de Harvard
• Justice Today: Money, Markets, and Morals, da Universidade de Harvard
• English for Media Literacy, da Universidade da Pensilvânia
• Optimizing Diversity on Teams, da Universidade da Pensilvânia
• Top 10 Social Issues for the President’s First 100 Days, da Universidade da Pensilvânia
• Creating an Effective Child Welfare System, da Universidade da Pensilvânia
• Urban Transit for Livable Cities, da Universidade da Pensilvânia
• Introduction to Intellectual Property, da Universidade da Pensilvânia
• Patent Law, da Universidade da Pensilvânia
• Copyright Law, da Universidade da Pensilvânia
• Trademark Law, da Universidade da Pensilvânia
• Intellectual Property in the Healthcare Industry, da Universidade da Pensilvânia
• American Contract Law II, da Universidade de Yale
• Freedom of Expression in the Age of Globalization, da Universidade de Columbia
• Protecting Children in Humanitarian Settings, da Universidade de Columbia
• Freedom of Expression and Information in the Time of Globalization: Foundational Course, da Universidade de Columbia
• Freedom of Expression and Information in the Time of Globalization: Advanced Course, da Universidade de Columbia
• Indigenous Peoples' Rights, da Universidade de Columbia
• INSPIRE: Seven Strategies for Ending Violence Against Children, da Universidade de Columbia
• Poverty & Population: How Demographics Shape Policy, da Universidade de Columbia
• US Social Services Compared, da Universidade de Columbia
• US Social Services: Where did they come from?, da Universidade de Columbia
• Social Services for Families, Seniors and Those with Disabilities, da Universidade de Columbia
• Health, Housing, and Educational Services, da Universidade de Columbia

Saúde e Medicina (353)

• Understanding Medical Research: Your Facebook Friend is Wrong, da Universidade de Yale ★★★★★(364)
• Vital Signs: Understanding What the Body Is Telling Us, da Universidade da Pensilvânia ★★★★★(51)
• Mechanical Ventilation for COVID-19, da Universidade de Harvard ★★★★★(25)
• Crisis Resource Management, da Universidade de Columbia ★★★★★(25)
• Introduction to Radiology, da Universidade de Yale ★★★★★(17)
• Improving Global Health: Focusing on Quality and Safety, da Universidade de Harvard ★★★★☆(10)
• Humanitarian Response to Conflict and Disaster, da Universidade de Harvard ★★★★★(9)
• Introduction to Dental Medicine, da Universidade da Pensilvânia ★★★★☆(9)
• Human Anatomy: Musculoskeletal Cases, da Universidade de Harvard ★★★★★(8)
• Introduction to Breast Cancer, da Universidade de Yale ★★★★★(8)
• PredictionX: John Snow and the Cholera Epidemic of 1854, da Universidade de Harvard ★★★★★(7)
• Fundamentals of Clinical Trials, da Universidade de Harvard ★★★★★(5)
• Health Care Innovation, da Universidade da Pensilvânia ★★★★☆(3)
• Anatomy of the Chest, Neck, Abdomen, and Pelvis, da Universidade de Yale ★★★★★(3)
• Pediatric HIV Nursing, da Universidade de Columbia ★★★★☆(3)
• Bats, Ducks, and Pandemics: An Introduction to One Health Policy, da Universidade de Princeton ★★★★★(3)
• Prescription Drug Regulation, Cost, and Access: Current Controversies in Context, da Universidade de Harvard ★★★★★(2)
• United States Health Policy, da Universidade de Harvard ★★★★★(2)
• Health Behavior Change: From Evidence to Action, da Universidade de Yale ★★★★★(2)
• Essentials of Global Health, da Universidade de Yale ★★★★☆(2)
• Addiction Treatment: Clinical Skills for Healthcare Providers, da Universidade de Yale
• The Science and Politics of the GMO, da Universidade de Cornell ★★★★★(2)
• Readings in Global Health (2017), da Universidade de Harvard ★★★★★(1)
• Lessons from Ebola: Preventing the Next Pandemic, da Universidade de Harvard ★★★★★(1)
• The Opioid Crisis in America, da Universidade de Harvard ★★★★★(1)
• The Oral Cavity: Portal to Health and Disease, da Universidade da Pensilvânia ★★★★★(1)
• The COVID-19 Pandemic and the Use of mRNA Vaccines, da Universidade da Pensilvânia ★★★★★(1)
• Tarasoff Duties, da Universidade da Pensilvânia ★★★★☆(1)
• Overcoming Dyslexia, da Universidade de Yale ★★★★★(1)
• Visualizing the Living Body: Diagnostic Imaging, da Universidade de Yale ★★★★★(1)
• Fighting HIV with Antiretroviral Therapy: Implementing the Treat-All Approach, da Universidade de Columbia ★★★★★(1)
• Creating an Inclusive Environment for Sexual and Gender Minority Patients and Trainees in Academic Clinical Settings, da Universidade de Brown ★★★★☆(1)
• Strengthening Community Health Worker Programs, da Universidade de Harvard
• Practical Improvement Science in Health Care: A Roadmap for Getting Results, da Universidade de Harvard
• Ventilación mecánica para pacientes con COVID-19, da Universidade de Harvard (em espanhol)
• Innovating in Health Care, da Universidade de Harvard
• Feeding the World, da Universidade da Pensilvânia
• The Economics of Health Care Delivery, da Universidade da Pensilvânia
• Comparative Health Systems, da Universidade da Pensilvânia
• U.S. Health Law Fundamentals, da Universidade da Pensilvânia
• Conflicts of Interest in Biomedical Research, da Universidade da Pensilvânia
• Ethics and Trial Design, da Universidade da Pensilvânia
• Evidence-based Prescribing: An Online Course with Tools You Can Use to Fight the Opioid Epidemic, da Universidade da Pensilvânia
• COVID-19: Rationing and Drug Regulation, da Universidade da Pensilvânia
• Rationing Care, da Universidade da Pensilvânia
• Research with Vulnerable Populations, da Universidade da Pensilvânia
• Research in Global Settings, da Universidade da Pensilvânia
• Focus on Opioid Use Disorder and Treatment: The Genetics of Addiction-How Discovery Is Informing the Path Forward for Opioid Use Disorder Treatment, Intervention, and Prevention, da Universidade da Pensilvânia
• Penn Medicine Opioid Stewardship 2022: Comprehensive Pain Management: Opioids and Beyond, da Universidade da Pensilvânia
• Improving Patient Safety in Primary Care Settings, da Universidade da Pensilvânia
• Re-Imagining Emergency Department Care for Substance Use Disorders, da Universidade da Pensilvânia
• Opioid Use Disorder for Hospitalists in the Fentanyl Era, da Universidade da Pensilvânia
• Global Quality Maternal and Newborn Care, da Universidade de Yale
• Introduction to Medical Software, da Universidade de Yale
• Anatomy of the Upper and Lower Extremities, da Universidade de Yale
• The Science of Well-Being for Teens, da Universidade de Yale
• Planetary Health for Nurses, da Universidade de Yale
• Yale Teaching and Learning Center: Teaching Cultural Sensitivity in the Patient-Clinician Relationship, da Universidade de Yale
• Trust Your Gut Webinar Series, da Universidade de Yale
• COVID-19 Vaccination: A Communication Guide for Providers, da Universidade de Yale
• Training Course: Bloodborne Pathogens for Clinical Personnel, da Universidade de Yale
• Training Course: Bloodborne Pathogens for Laboratory Research Personnel, da Universidade de Yale
• What's New in the Field of Multiple Sclerosis, da Universidade de Yale
• Musculoskeletal Review Course for the Primary Care Provider, Part I: The Lower Extremity & Lumbar Spine, da Universidade de Yale
• 15th Annual Yale Digestive Disease Week Review, da Universidade de Yale
• Yale’s Review of Advances in Oncology Highlights from the ASCO® Annual Meeting 2021, da Universidade de Yale
• 9th Annual Lawrence M. Brass Stroke Symposium: Controversies in Stroke Management, da Universidade de Yale
• Training Course: Preventing Transmission of COVID-19 in the Long-Term Care Setting, da Universidade de Yale
• Annual Clinical Intersection of HIV/AIDS: A Practical Discussion of Connecticut's Course Mandates, da Universidade de Yale
• Yale Epilepsy Virtual CME Series: A Monthly Live Case-Based Webinar, da Universidade de Yale
• The GI Hospitalist Model: Addressing the Needs of Hospital-Based Care, da Universidade de Yale
• Digestive Health Virtual CME Series 2022: Third Thursdays Trust your Gut, da Universidade de Yale
• Yale Rheumatology State of the Art Symposium - Reactive Arthritis, Post-Infections, Inflammatory Disease, and Lessons for COVID, da Universidade de Yale
• Critical Care & Emergency Neuroscience: Current Topics in Neuro-resuscitation after Traumatic Brain Injury and Cardiac Arrest, da Universidade de Yale
• Traitement antirétroviral pour lutter contre le VIH : mise en œuvre de l'approche « traiter tout le monde », da Universidade de Columbia (em francês)
• Soins infirmiers en VIH pédiatrique, da Universidade de Columbia (em francês)
• Menstruation in a Global Context: Addressing Policy and Practice, da Universidade de Columbia
• Obesity Course: Etiology, Prevention and Treatment, da Universidade de Columbia
• How Common is Celiac Disease Around the World? Role of Gluten Timing and Quantity, and Environmental Risk Factors, da Universidade de Columbia
• The Clinical Picture of Celiac Disease and How to Make the Diagnosis, da Universidade de Columbia
• Artful Medicine: Art’s Power to Enrich Patient Care, da Universidade de Brown
• Beyond Medical Histories: Gaining Insight from Patient Stories, da Universidade de Brown
• Retaining Patients in Office-based Buprenorphine Treatment, da Universidade de Brown
• EFD On-Demand: Getting Your Scholarly Projects "Unstuck"- A Reference Management Workshop, da Universidade de Brown
• No Longer Speechless - A Practical Workshop on Responding to Microaggressions in Biomedical Settings, da Universidade de Brown
• Improving Instruction with Spaced and Retrieval Practice, da Universidade de Brown
• Identification and Management of ADHD and Impulse Control in Tourette Syndrome, da Universidade de Brown
• Teaching the Use of HIT to Support Relationship-based Care & Promoting Wellness in Clinical Care, da Universidade de Brown
• Strategic CV Creation and Maintenance, da Universidade de Brown
• Critical Junctures: Creating High Impact Advising Conversations, da Universidade de Brown
• Evidence-based Emergency Care for Opioid Use Disorder, da Universidade de Brown
• Refractory Tourette Syndrome, da Universidade de Brown
• You've Been Served: Now What?, da Universidade de Brown
• Program in Educational Faculty Development On-Demand Courses, da Universidade de Brown
• Practical Approaches to Applying Conceptual & Theoretical Frameworks to Medical Education Research, da Universidade de Brown
• Meeting the ACGME Requirement: CQI Education Programs for Residents, da Universidade de Brown
• Best Practices for Treatment of Acute Pain: Express Interest and Pre-Survey, da Universidade de Brown
• Working with Governments, Institutions, & Stakeholders to Support Healing Relationships & Human Capital; Ethical Stewardship of Shared Data, da Universidade de Brown
• Academic Detailing: Best Practices for Treatment of Acute Pain, da Universidade de Brown
• Academic Detailing Group Presentation: Best Practices for Treatment of Acute Pain - Post Activity, da Universidade de Brown
• Emergency Care for Opioid Use Disorder, da Universidade de Brown
• Fears, Bias and Discrimination - Substance Use Disorder Patient Care, da Universidade de Brown
• Advances in the Treatment of Tics, da Universidade de Brown
• The Future of Lung Cancer Screening for All Communities in RI: Where We Are and Where We Need to Be, da Universidade de Brown
• Transitioning to Adult Care: Time is Ticcing Away, da Universidade de Brown
• Psychological Flexibility: Building a Pragmatic Model and Method of Intentional Change, da Universidade de Brown
• TikTokTherapist: Understanding the Role of Social Media in Adolescent Mental Health, da Universidade de Brown
• Social (In)Justice and Mental Health, da Universidade de Brown
• Finding the EHR Data to Tell Your Clinical Story: Early Experiences with Lifespan Pediatric Behavioral Health Emergency Services, da Universidade de Brown
• Screen Media, Social Interaction and ASD: Connecting Theory and Research, da Universidade de Brown
• Adolescent Substance Use and Treatment: Translating Science into Clinical Practice, da Universidade de Brown
• Racism in Academic Psychiatry: Hiding Beneath the Cloak of Our Benevolence, da Universidade de Brown
• Catatonia, Evaluation, Treatment and Consideration in a Pediatric Population, da Universidade de Brown
• Rapid-acting Treatments for Pediatric Depression and Suicidality: Where are We Now?, da Universidade de Brown
• Implementation Science: Driving Health Policy Change in Learning Health Systems, da Universidade de Brown
• Yoga Intervention Research: Focus on People with Depression, da Universidade de Brown
• Social (In)justice and Children’s Mental Health, da Universidade de Brown
• Leveraging Sleep and Circadian Science to Devise and Disseminate Novel Transdiagnostic Treatments to Improve Sleep Health, da Universidade de Brown
• School Mental Health, Suicide Prevention, and Wellbeing Promotion: Lessons from the last 10 years & Wisdom for the next 10, da Universidade de Brown
• Translating understanding of neural network dysfunction into novel, mood disorder risk markers and brain-based treatments for Bipolar Disorder, da Universidade de Brown
• Parent-Based Treatment for Childhood Anxiety and OCD, da Universidade de Brown
• Socio-Cognitive Behavioral Therapy for Latinx Youth with Suicidal Thoughts and Behaviors, da Universidade de Brown
• On-Demand | Lethal Means Counseling: Collaboration at the Patient- and Community-Level, da Universidade de Brown
• 2022 The Patient and The Practitioner in the Age of Technology: Promoting Healing Relationships, da Universidade de Brown
• Providence Sleep Research Interest Group Seminar Series, da Universidade de Brown
• Improving the Care of Patients with Sickle Cell Disease, da Universidade de Brown
• Addressing Microaggressions in the Clinical Environment, da Universidade de Brown
• Medical Evaluation of the Sexual Assault Survivor: A Virtual Educational Curriculum, da Universidade de Brown
• Building a Better Suicide Risk Assessment: The Nuts and Bolts of the Columbia Protocol, da Universidade de Brown
• Docs for Health: Considering Social and Structural Determinants in Medical Care, da Universidade de Brown
• DCYF and Legal Considerations: Session VI, da Universidade de Brown
• Neonatal Opioid Withdrawal Syndrome (NOWS/NAS): Session V, da Universidade de Brown
• Trauma and OUD: Session IV, da Universidade de Brown
• Micro-interventions to Support Those Escaping Emotional Pain: Addressing Overlapping Substance Use and Suicide Risk, da Universidade de Brown
• From Abstract to Poster to Case Report: A Guide for Clinicians, da Universidade de Brown
• Demystifying Palliative Care, da Universidade de Brown
• Ways to Work Through Conflict, da Universidade de Brown
• OWIMS Book Club (Session II): Crucial Conversations, da Universidade de Brown
• OWIMS Book Club (Session I): Crucial Conversations, da Universidade de Brown
• Session 2: Compassion the new empathy? Taking the me out of empathy, da Universidade de Brown
• Session 3: How life gets in the way, da Universidade de Brown
• Session 4: The habit of judging ourselves and others, da Universidade de Brown
• Session 5: Working with stress and anxiety, da Universidade de Brown
• Session 6: Spreading Curiosity: Don’t just do something, sit there, da Universidade de Brown
• Session 8: A Summary of all that we’ve explored, da Universidade de Brown
• Session 7: The obstacle is the way, da Universidade de Brown
• Reducing Physician Burnout, da Universidade de Brown
• Session 1: Feeling the Pain: Empathy and Action, da Universidade de Brown
• Tom F. Anders Seminar Series, da Universidade de Brown
• Child and Adolescent Psychiatry Grand Rounds, da Universidade de Brown
• Department of Psychiatry and Human Behavior Academic Grand Rounds, da Universidade de Brown
• Foundations of Understanding and Combating Cancer, da Universidade de Cornell
• Nursing Grand Rounds More is Better: Improving Event Reporting in Ambulatory Care, da Faculdade de Dartmouth
• Nursing Grand Rounds Heart Failure Education: A Guide for Nurses, da Faculdade de Dartmouth
• Medicine Grand Rounds - Gut Microbiome: Lessons from the REIMAGINE Study, Mark Pimentel, MD, FRCP(C), da Faculdade de Dartmouth
• Nursing Grand Rounds Nursing Advocacy: How YOU Can Make a Difference, da Faculdade de Dartmouth
• Medicine Grand Rounds - Haiti after the Earthquake: A Reflection 10 Years, March 6, 2020, da Faculdade de Dartmouth
• Medicine Grand Rounds - Recent Advances in the Treatment of Scleroderma, March 13, 2020, da Faculdade de Dartmouth
• Medicine Grand Rounds - Severe Acute Respiratory Syndrome Coronavirus 2 COVID-19: Science Update, March 20, 2020, da Faculdade de Dartmouth
• Medicine Grand Rounds - Critical Thinking at the Bedside: Incorporating Uncertainty into your Practice and Teaching - April 24, 2020, da Faculdade de Dartmouth
• Nursing Grand Rounds The Force Within: Nursing Innovation and DH's First Nursing Micro Hackathon, da Faculdade de Dartmouth
• Medicine Grand Rounds - Sex Differences in Obstructive Sleep Apnea Why it Matters, May 8, 2020, da Faculdade de Dartmouth
• Medicine Grand Rounds - Senior Resident in Internal Medicine Research Presentations, da Faculdade de Dartmouth
• Medicine Grand Rounds - Implementing Telemedicine in a Chronic Care Model, da Faculdade de Dartmouth
• Medicine Grand Rounds - #MeToo: Addressing Gender Inequity in Academic Medicine, da Faculdade de Dartmouth
• Self-Care: Practical Ways We Can Take Care of Ourselves and Each Other, da Faculdade de Dartmouth
• Medicine Grand Rounds - Department of Medicine Scholarship Enhancement in Academic Medicine (SEAM) Project Reports, da Faculdade de Dartmouth
• Surgery Grand Rounds June 19, 2020 - Perioperative Management of Pain and Addiction in Patients with Opioid Use Disorder, da Faculdade de Dartmouth
• General Internal Medicine Education Conference 2020 - Management of Hepatitis C in Primary Care 6/25/2020, da Faculdade de Dartmouth
• Medicine Grand Rounds - Suddenly Meatless: How Tick Bites and Reactions to Red Meat are Changing the Paradigm of Food Allergy, da Faculdade de Dartmouth
• Medicine Grand Rounds - COVID-19 as Immunology Boot Camp: Cytokine Release Syndrome & Prospects for Therapy, da Faculdade de Dartmouth
• Medicine Grand Rounds - Youve Been Thunderstruck!, da Faculdade de Dartmouth
• Medicine Grand Rounds - Endocrine Complications of Anorexia Nervosa, da Faculdade de Dartmouth
• Medicine Grand Rounds - Structural Inequity, Racial and Ethnic Disparities and Infectious Diseases: Are There Sustainable Solutions?, da Faculdade de Dartmouth
• Medicine Grand Rounds - Frail Older Adults and How to Find Them, da Faculdade de Dartmouth
• Medicine Grand Rounds - Under Pressure: Should We Give Hyperbaric Oxygen to COVID-19 Patients?, da Faculdade de Dartmouth
• Medicine Grand Rounds - Leveraging Education Technology in our Brave New Medical Education World, da Faculdade de Dartmouth
• Interprofessional Grand Rounds Unconscious Bias, da Faculdade de Dartmouth
• Medicine Grand Rounds - Department of Medicine Case Reports, da Faculdade de Dartmouth
• Nursing Grand Rounds Changing the Culture Surrounding Mental Illness: It's Way Past Time, da Faculdade de Dartmouth
• Perioperative Patient Care: Leadership in the OR, da Faculdade de Dartmouth
• Nursing Grand Rounds COVID-19 Mission: Operation Gotham, da Faculdade de Dartmouth
• Medicine Grand Rounds - Unconscious Bias: Where are We Now?, da Faculdade de Dartmouth
• Virtual Conversations in Justice and Equity in Bioethics Part 1 of 3: Challenging Patient Encounters: Psychologically Informed Patient and Family Centered Care, da Faculdade de Dartmouth
• Medicine Grand Rounds - Myths, Evidence, and the Future of Tobacco Treatment, da Faculdade de Dartmouth
• Nursing Grand Rounds Year of the Nurse: A Year of Leadership, Advocacy and Activism, da Faculdade de Dartmouth
• Medicine Grand Rounds - When is Enough, Enough? Decision Making Around Colonoscopy in Older Adults, da Faculdade de Dartmouth
• Medicine Grand Rounds - Pulmonary Fibrosis - How Epithelial Cells and Fibroblasts Use the Same Language to Drive Each Other Mad, da Faculdade de Dartmouth
• Nursing Grand Rounds Nicotine Addiction 101: What is it and why is it important to you?, da Faculdade de Dartmouth
• Virtual Conversations in Justice and Equity in Bioethics Part 2 of 3: Equity in the COVID-19 Pandemic, da Faculdade de Dartmouth
• Medicine Grand Rounds - Why We Need Single Payer, da Faculdade de Dartmouth
• Nursing Grand Rounds The Intersection of Human Trafficking and Domestic Violence: Is it DV or Could It Be Trafficking?, da Faculdade de Dartmouth
• Nursing Grand Rounds Part 2 Changing the Culture Surrounding Mental Illness: It's Way Past Time, da Faculdade de Dartmouth
• Medicine Grand Rounds - How Emerging Science Can Transform Obesity Care, da Faculdade de Dartmouth
• Medicine Grand Rounds - Cultivating Empathy in Medicine: What Would Dr. Matthews Say? The Louis B. Matthews Visiting Professorship, da Faculdade de Dartmouth
• Medicine Grand Rounds - Opioids and Pain Management: Preventing Harm and Maximizing Benefit, da Faculdade de Dartmouth
• Virtual Conversations in Justice and Equity in Bioethics Part 3 of 3: Racism and Health Equity: Why Does it Matter in Bioethics?, da Faculdade de Dartmouth
• Medicine Grand Rounds - Consult Conflict in Medicine, da Faculdade de Dartmouth
• Nursing Grand Rounds Education and Practice Partnerships in Nursing Education: The Capstone Experience in the RNBS Program at CSC, da Faculdade de Dartmouth
• Interprofessional Grand Rounds The Art of Being Human:The Lived Experience of People with Disabilities, da Faculdade de Dartmouth
• Medicine Grand Rounds - Neuro-Axis on Fire: Checkpoint Inhibitor Neuritis / Encephalitis and CAR-T Neurotoxicity. How fast can it burn?, da Faculdade de Dartmouth
• Developing a Trauma-Informed Practice: Four Part Series, da Faculdade de Dartmouth
• Nursing Grand Rounds Part 3 - Changing the Culture Surrounding Mental Illness: It's Way Past Time, da Faculdade de Dartmouth
• Medicine Grand Rounds - Team-Based Learning: Engineering Human Performance through Collaboration, da Faculdade de Dartmouth
• Nursing Grand Rounds Team-Based Learning: Engineering Human Performance Through Collaboration (Combined with Medicine Grand Rounds), da Faculdade de Dartmouth
• Pediatric Lecture Series - Baron Munchausen to Medical Child Abuse, da Faculdade de Dartmouth
• Medicine Grand Rounds - Anti-Racism, Healthcare, and Health Policy: How far can we go?, da Faculdade de Dartmouth
• Medicine Grand Rounds - Public Health and Dermatology From Policy to Pox, da Faculdade de Dartmouth
• Geriatric Education Series - Appropriate Prescribing Practices for Opioids for Pain Management in Older Adults, da Faculdade de Dartmouth
• Perianesthesia and Procedural Topics Non-Operating Room Anesthesia, da Faculdade de Dartmouth
• Perianesthesia and Procedural Topics Duty to Patient: Aligns Standards with Clinical Case Scenarios, da Faculdade de Dartmouth
• Perianesthesia and Procedural Topics Team Nursing, da Faculdade de Dartmouth
• Pediatric Lecture Series - Caring for Adolescents with Eating Disorders in Northern New England, da Faculdade de Dartmouth
• Medicine Grand Rounds - Heart Failure with Preserved Ejection Fraction - A Misunderstood Disease in Search of a Therapy, da Faculdade de Dartmouth
• Surgery Grand Rounds - Bias in the Assessment and Treatment of Pain, da Faculdade de Dartmouth
• Medicine Grand Rounds - Virtually Better: The Science and Practice of Therapeutic Virtual Reality, da Faculdade de Dartmouth
• Nursing Grand Rounds Education and Practice Partnerships in Nursing Education: The Capstone Experience in the RNBS Program at CSC, da Faculdade de Dartmouth
• Medicine Grand Rounds - The Serrated Pathway and Colorectal Cancer Screening, da Faculdade de Dartmouth
• Medicine Grand Rounds - Updates in Polycystic Kidney Disease, da Faculdade de Dartmouth
• Medicine Grand Rounds - Aging and Dying in Prison: Integrating Geriatrics and Palliative Care into Criminal Justice Reform, da Faculdade de Dartmouth
• Nursing Grand Rounds Just Another Night of Violence: Brain Injuries from Intimate Partner Violence in New Hampshire, da Faculdade de Dartmouth
• Medicine Grand Rounds - Department of Medicine Scholarship Enhancement in Academic Medicine (SEAM) Project Reports, da Faculdade de Dartmouth
• Nursing Grand Rounds Shattering Silence: Rape Trauma Circa 2021, da Faculdade de Dartmouth
• Vaccine Anxiety in Children, da Faculdade de Dartmouth
• Medicine Grand Rounds - Empathy for the Physician: How COVID Has Reshaped Our Relationships and Lives, da Faculdade de Dartmouth
• Medicine Grand Rounds - COVID-19: Lessons Learned Over the Past Year. Can We Do Better?, da Faculdade de Dartmouth
• Nursing Grand Rounds Part 4 - Changing the Culture Surrounding Mental Illness: It's Way Past Time, da Faculdade de Dartmouth
• Psychiatry Grand Rounds - Physician Training: A Prospective Model to Understand How Stress Leads to Depression, da Faculdade de Dartmouth
• Medicine Grand Rounds - From the Other Side of the Exam Table, da Faculdade de Dartmouth
• Nursing Grand Rounds Happy 100th Anniversary to Insulin! Diabetes Update 2021, da Faculdade de Dartmouth
• Holistic Care Webinar: Introduction to Clinical Hypnosis - Strategies and Skills for Stress Reduction and Improved Communication, da Faculdade de Dartmouth
• Medicine Grand Rounds - Embedding Clinical Trials within Clinical Care: The Future of Learning Healthcare Systems, da Faculdade de Dartmouth
• Virtual Conversations in Justice and Equity in Bioethics: Controversies Around COVID-19 Vaccines, da Faculdade de Dartmouth
• Nursing Grand Rounds Excessive Alcohol Use: Nurse's Role in Screening, Brief Intervention (Advice) & Referral for Treatment, da Faculdade de Dartmouth
• The Fourth Annual Dartmouth-Hitchcock Nursing Research Symposium - Keynote: Bedside to Bench to Bedside: Nursing Research to Inform Practice (Part 1 of 3), da Faculdade de Dartmouth
• The Fourth Annual Dartmouth-Hitchcock Nursing Research Symposium - What Can We Do By Next Tuesday? Bringing It All Together and Not Losing Steam (Part 3 of 3), da Faculdade de Dartmouth
• The Fourth Annual Dartmouth-Hitchcock Nursing Research Symposium - Tackling a problem: Panel on Research, Evidence-Based Practice, and Quality Improvement (Part 2 of 3), da Faculdade de Dartmouth
• Innovation in Nursing: Transforming Care One Nurse at a Time!, da Faculdade de Dartmouth
• Medicine Grand Rounds - Personalized Therapeutics Moving Beyond Precision Medicine, da Faculdade de Dartmouth
• Leadership Lessons from Legends, da Faculdade de Dartmouth
• Leadership as an Evolving Journey: Mission and Values in Leading Others, da Faculdade de Dartmouth
• Who are you BECOMING?, da Faculdade de Dartmouth
• Medicine Grand Rounds - Resident Research Presentations, da Faculdade de Dartmouth
• Nursing Grand Rounds Working with Limited English Proficient Patients and Interpreter Services at Dartmouth-Hitchcock, da Faculdade de Dartmouth
• DH Ambulatory Nursing Presents - Ambulatory Nurses and Innovation: How Nurses Can Shape Healthcare, da Faculdade de Dartmouth
• DH Ambulatory Nursing Presents - Professional Telehealth Nursing: More than a Question, Click, and Conclusion, da Faculdade de Dartmouth
• Medicine Grand Rounds - Equity, Efficiency, and ICU Triage during the COVID-19 Pandemic, da Faculdade de Dartmouth
• Shared Decision Making for Youth Treated with Psychotropic Medications, da Faculdade de Dartmouth
• DH Ambulatory Nursing Presents - How the Pandemic can Help us Drive the Implementation of Team-Based Care at DH-H, da Faculdade de Dartmouth
• Nursing Grand Rounds Nursing Burnout and Coping Strategies, da Faculdade de Dartmouth
• Psychiatry Grand Rounds - Treatment of People Who Inject Drugs Hospitalized for Serious Infection, da Faculdade de Dartmouth
• DH Ambulatory Nursing Presents The Art of Nursing: Creativity, Growth and Innovation, da Faculdade de Dartmouth
• Medicine Grand Rounds - Post-Acute Sequelae of COVID-19: Lessons in Clinical Care and Health Care Delivery Science, da Faculdade de Dartmouth
• Medicine Grand Rounds - Discovering VEXAS: the Science of Team Science, da Faculdade de Dartmouth
• Nursing Grand Rounds Part 5 - Changing the Culture Surrounding Mental Illness: It's Way Past Time, da Faculdade de Dartmouth
• Medicine Grand Rounds - Minimal trauma fractures and osteoporosis, deadly but ignored...how do we solve this?, da Faculdade de Dartmouth
• Department of Surgery Grand Rounds - Responsible Opioid Prescribing After Surgery, da Faculdade de Dartmouth
• Medicine Grand Rounds - Structural Heart Disease: Innovation, Implementation & Interdisciplinary Care, da Faculdade de Dartmouth
• Medicine Grand Rounds - Have We Found the Holy Grail of Blood Thinners?, da Faculdade de Dartmouth
• Interprofessional Grand Rounds Webinar - Creating a Trans Affirming Environment: Use of Gender Appropriate Language at Dartmouth-Hitchcock, da Faculdade de Dartmouth
• AXL: Advanced Opioid Use Disorder X-waiver Team Learning Collaborative Medication Assisted Treatment in Vermont Correctional Facilities, da Faculdade de Dartmouth
• AXL: Advanced Opioid Use Disorder X-waiver Team Learning Collaborative - Long-Term OUD Medication Management, da Faculdade de Dartmouth
• AXL: Advanced Opioid Use Disorder X-waiver Team Learning Collaborative Providing Care Coordination and Medication to Treat Pregnant and Post-pregnant People for OUD, da Faculdade de Dartmouth
• AXL: Advanced Opioid Use Disorder X-waiver Team Learning Collaborative MAT and Telemedicine, da Faculdade de Dartmouth
• AXL: Advanced Opioid Use Disorder X-waiver Team Learning Collaborative - Treating Alcohol Use Disorder in Patients Receiving Medication for OUD, da Faculdade de Dartmouth
• AXL: Advanced Opioid Use Disorder X-waiver Team Learning Collaborative - Developing a Stress Resilient Workforce, da Faculdade de Dartmouth
• AXL: Advanced Opioid Use Disorder X-waiver Team Learning Collaborative - Impact of Opioid Use Disorders on Children and Families, da Faculdade de Dartmouth
• AXL: Advanced Opioid Use Disorder X-waiver Team Learning Collaborative - Intersections of Intimate Partner Violence, Opioids, and Trauma: Theory to Practice, da Faculdade de Dartmouth
• AXL: Advanced Opioid Use Disorder X-waiver Team Learning Collaborative - Health Disparities & Partner Agencies, da Faculdade de Dartmouth
• AXL - Advanced Opioid Use Disorder X-waiver Team Learning Collaborative: Opioid Use Disorders Co-morbid with Alcohol, Sedative, Stimulant, or Tobacco Use Disorders: A Person Centered Approach, da Faculdade de Dartmouth
• AXL: Advanced Opioid Use Disorder X-waiver Team Learning Collaborative: Managing Injection Behaviors: The Partial Responder to MAT, da Faculdade de Dartmouth
• AXL: Advanced Opioid Use Disorder X-waiver Team Learning Collaborative: Co-occurring Mental Illness and Substance Use, da Faculdade de Dartmouth
• AXL Enduring Material - Toxicology Testing and Risk Stratification Considerations, da Faculdade de Dartmouth
• Putting Trauma-Informed Care into Practice in the Perinatal Setting (Part 1 of 3) - Foundations for Trauma Informed Care, da Faculdade de Dartmouth
• Psychiatry Grand Rounds - Social (In)justice and Mental Health, da Faculdade de Dartmouth
• Putting Trauma-Informed Care into Practice in the Perinatal Setting (Part 2 of 3) - Caring with Compassion Building Skills for Trauma-Responsive Care, da Faculdade de Dartmouth
• Nursing Grand Rounds Interpreter Services at Dartmouth-Hitchcock: A Deeper Dive, da Faculdade de Dartmouth
• General Internal Medicine Education Conference - Primary Care Education - Integrated Mental Health: Evidence, Policy, and Implementation, da Faculdade de Dartmouth
• Holistic Care Webinar: Essential Oil Therapy for Nursing Practice, da Faculdade de Dartmouth
• Psychiatry Grand Rounds - Understanding and Addressing the Psychosocial Needs of Trans and Non-Binary Patients: An Affirming, Effective, and Research-Based Approach, da Faculdade de Dartmouth
• Nursing Grand Rounds Trauma Informed Care, da Faculdade de Dartmouth
• Putting Trauma-Informed Care into Practice in the Perinatal Setting (Part 3 of 3) - Birth Trauma Mitigation and Use of the Plan of Safe Care in Supportive Communication, da Faculdade de Dartmouth
• Medicine Grand Rounds - The Bob Cimis Memorial Lecture - Challenges and Progress Towards the Prevention of Pancreatic Cancer, da Faculdade de Dartmouth
• Nursing Grand Rounds Getting Back to the Basics: Caring for Stroke Patients at Dartmouth-Hitchcock, da Faculdade de Dartmouth
• Medicine Grand Rounds - Early Detection of Pulmonary Fibrosis, da Faculdade de Dartmouth
• Nursing Grand Rounds Part 6 - Changing the Culture Surrounding Mental Illness: It's Way Past Time, da Faculdade de Dartmouth
• Nursing Grand Rounds Finding the Oasis in Food Deserts: Food Access Awareness and Budget Conscious Nutrition, da Faculdade de Dartmouth
• Medicine Grand Rounds - Cardiovascular Disease and Cancer: Cross-Disease Communication, da Faculdade de Dartmouth
• Nursing Grand Rounds Caring for Victims of Non-fatal Strangulation, da Faculdade de Dartmouth
• Lung Cancer Screening: An Update and Call to Action, da Faculdade de Dartmouth
• Medicine Grand Rounds - Healing with Intention, da Faculdade de Dartmouth
• The 51st Meeting of the NH/VT Ethics Committees: Navigating Decision-Making Capacity amid Mental Illness Capacity Assessment Part 1 of 4, da Faculdade de Dartmouth
• The 51st Meeting of the NH/VT Ethics Committees: Navigating Decision-Making Capacity amid Mental Illness Eating Disorders Part 2 of 4, da Faculdade de Dartmouth
• The 51st Meeting of the NH/VT Ethics Committees: Navigating Decision-Making Capacity amid Mental Illness Ulysses Clause Part 4 of 4, da Faculdade de Dartmouth
• The 51st Meeting of the NH/VT Ethics Committees: Navigating Decision-Making Capacity amid Mental Illness Uncomfortable Ethical Quandaries Inherent When Psychiatrically Ill Children are Boarded on Non-psychiatric Pediatric Floors Part 3 of 4, da Faculdade de Dartmouth
• Medicine Grand Rounds - Medical Consequences of Climate Change, da Faculdade de Dartmouth
• Secondary Traumatic Stress and Burnout, da Faculdade de Dartmouth
• Laying the Groundwork: Adverse Childhood Experiences (ACEs) and their Impact, da Faculdade de Dartmouth
• Medicine Grand Rounds - Open Questions in Colorectal Cancer Screening, da Faculdade de Dartmouth
• Nursing Grand Rounds The 2021 ADA Standards of Care: An Overview of Diabetes Classifications and the Use of Technology in Diabetes Management, da Faculdade de Dartmouth
• General Internal Medicine and Primary Care Education Conference - Treating Unhealthy Alcohol Use: What's Our Disorder?, da Faculdade de Dartmouth
• Medicine Grand Rounds - An Action Plan toward Gender Equity in a Department of Medicine, da Faculdade de Dartmouth
• Nursing Grand Rounds - Thriving After a Life-Quake, da Faculdade de Dartmouth
• Nursing Grand Rounds Nursing Research Self-Efficacy at an Academic Medical Center, da Faculdade de Dartmouth
• Medicine Grand Rounds - Insulin @ 100: A Historical Perspective, da Faculdade de Dartmouth
• Medicine Grand Rounds - Cardiovascular Safety of Urate-Lowering Drugs in Gout, da Faculdade de Dartmouth
• Nursing Grand Rounds Education and Practice Partnerships in Nursing Education: The Capstone Experience in the RNBS Program at CSC, da Faculdade de Dartmouth
• CHaD Pediatric Lecture Series - GERD: Latest Guidelines and Controversies, da Faculdade de Dartmouth
• Wicked Pissah Update on Management of Male Voiding Symptoms, da Faculdade de Dartmouth
• Medicine Grand Rounds - Immune-Related Toxicities with Immune Checkpoint Inhibitors, da Faculdade de Dartmouth
• AXL: Advanced Opioid Use Disorder X-waiver Team Learning Collaborative - Treating HCV in Spokes, da Faculdade de Dartmouth
• AXL: Advanced Opioid Use Disorder X-waiver Team Learning Collaborative - Buprenorphine & Diversion: The Vermont Regulatory Environment, da Faculdade de Dartmouth
• AXL - Opioid Use Disorder X-waiver Team Learning Collaborative - Pain Treatment in Substance Use Disorders, da Faculdade de Dartmouth
• General Internal Medicine Education Conference - Primary Care Education - Osteoporosis related fractures;Deadly but Ignored.....A way forward, da Faculdade de Dartmouth
• Help for the Helpers: Building a Foundation for Trauma Informed Care, da Faculdade de Dartmouth
• Interprofessional Grand Rounds Webinar - Human Trafficking Awareness with Homeland Security: NH Updates, da Faculdade de Dartmouth
• Calming and De-Escalation, da Faculdade de Dartmouth
• The Link Between Trauma and Substance Misuse: Strategies to Address This in Medical Practice, da Faculdade de Dartmouth
• CHaD Pediatric Lecture Series - Our Student's Emotional and Behavioral Health: Improving Collaboration Between Schools, Families, and Physicians by Focusing on the Child, da Faculdade de Dartmouth
• Trauma-Informed Primary Care, da Faculdade de Dartmouth
• Nursing Grand Rounds Nurses Critical Role in Enhancing Health Literacy, da Faculdade de Dartmouth
• Nursing Grand Rounds - Innovation: Translation into Practice, da Faculdade de Dartmouth
• The 2022 Trauma Webinar Series - Part One: Kinematics of Trauma, da Faculdade de Dartmouth
• CHaD Pediatric Lecture Series - Communication after Adverse Events, da Faculdade de Dartmouth
• The 16th Ethics Committee Training Day Section Six of Six - Ethics Simulation: A Collaborative Practice of an Ethics Consultation (Must complete sessions 1 5 before registering for this session), da Faculdade de Dartmouth
• The 16th Ethics Committee Training Day Section Five of Six - Surrogate Decision Making, da Faculdade de Dartmouth
• The 16th Ethics Committee Training Day Section Four of Six - Informed Consent, da Faculdade de Dartmouth
• The 16th Ethics Committee Training Day - Section Three of Six Exploring the Ethical Foundation for Ethics Committees, da Faculdade de Dartmouth
• The 16th Ethics Committee Training Day Section Two of Six - What is a Healthcare Ethics Committee, da Faculdade de Dartmouth
• The 16th Ethics Committee Training Day - Section One of Six - Common Presentations of Ethical Concerns brought to a Clinical Ethics Committee, da Faculdade de Dartmouth
• Nursing Grand Rounds: HOPE Design Thinking for Nurse Innovators, da Faculdade de Dartmouth
• Interprofessional Grand Rounds Webinar Series Addressing Sexual Violence: Working Together to Support Survivors (Advocacy) Session 1 of 4, da Faculdade de Dartmouth
• The 2022 Trauma Webinar Series Part Two: Massive Transfusion in Traumatically Injured Adults and Children, da Faculdade de Dartmouth
• The 52nd Meeting of the VT and NH Ethics Committees The Ethics of Rationing, da Faculdade de Dartmouth
• Interprofessional Grand Rounds Webinar Series Addressing Sexual Violence: Working Together to Support Survivors (SANE & Law Enforcement) Session 2 of 4, da Faculdade de Dartmouth
• CHaD Pediatric Lecture Series - Female Athlete Triad 2022: Optimizing Bone Health in Active Female Adolescents, da Faculdade de Dartmouth
• APP Precepting Workshop - 4-14-2022, da Faculdade de Dartmouth
• Interprofessional Grand Rounds Webinar Series Addressing Sexual Violence: Working Together to Support Survivors (Title IX & College Advocacy) Session 3 of 4, da Faculdade de Dartmouth
• Nonalcoholic Fatty Liver Disease, da Faculdade de Dartmouth
• Interprofessional Grand Rounds Webinar Series Addressing Sexual Violence: Working Together to Support Survivors (Child Advocacy Model in Child Abuse Case) Session 4 of 4, da Faculdade de Dartmouth
• Know & Tell for Healthcare Providers, da Faculdade de Dartmouth
• The 2022 Holistic Care Webinar Combustion Avoidance: Communication Strategies to Prevent Interpersonal Conflict, da Faculdade de Dartmouth
• The 2022 Nursing Leadership Webinar Series: When Nurse Leaders Speak, Legislators Listen, da Faculdade de Dartmouth
• CHaD Pediatric Lecture Series - The Teen Brain: Decision making, assent, and confidentiality, da Faculdade de Dartmouth
• Pediatric Grand Rounds - Tackling the Nation's Overdose Crisis: The Role of Pediatric Providers, 5/18/22, da Faculdade de Dartmouth
• The 2022 Nursing Leadership Webinar Series - Part Three: What I Learned about Moving a Medical Center (and How it Impacted the Rest of My Nursing Career), da Faculdade de Dartmouth
• The 2022 Trauma Webinar Series Part Three: Acute Burn Care - The First 24 Hours, da Faculdade de Dartmouth
• CHaD Pediatric Lecture Series - Pediatric COVID Update, da Faculdade de Dartmouth
• The 2022 Trauma Webinar Series Part Four: Geriatric Trauma The Rising Tide, da Faculdade de Dartmouth
• ECHO Climate & Health: Towards Climate-Informed Care & Advocacy, da Faculdade de Dartmouth
• Treatment of Complex Chronic Pain: Are Opioids Helping or Hurting?, da Faculdade de Dartmouth
• Interprofessional Grand Rounds Nothing's wrong with them! It's Trauma, da Faculdade de Dartmouth
• The 2022 Trauma Webinar Series: Part Five Organ Donation, da Faculdade de Dartmouth