Dicas de GitHub

001e Dicas de GitHub

Cibersegurança: Conheça o Banco de Dados de Vulnerabilidades de Software do GitHub

# Resumo do Vídeo sobre GitHub Advisor Database

Olá pessoal! Neste vídeo, falamos sobre o **GitHub Advisor Database**, um banco de dados que contém avisos sobre vulnerabilidades de software disponíveis no GitHub.

## Principais Pontos

- **Acesso ao Database**: Acesse em [GitHub.com/advisories](https://github.com/advisories).
- **Exemplo de Vulnerabilidade**: Foi destacado uma vulnerabilidade na biblioteca **Log4j**, utilizada em servidores Apache Java. 
  - **Versões Atingidas**: Se a versão for menor que 2.0.7, ela é afetada.
  - **CVE Associado**: CVE-2021-40104, que é um identificador padrão para descrever vulnerabilidades.

## Detalhamentos da Vulnerabilidade

- **CWE**: O identificador para tipos de vulnerabilidade, como CWE-502 (serialização de dados não confiáveis).
- **CVSS**: Pontuação de gravidade, onde neste caso foi 8.1, indicando alta gravidade.
- Informações adicionais incluem referências e publicações do repositório onde a vulnerabilidade foi encontrada.

## Funcionalidades

- **Dependabot Alerts**: Se você tiver um repositório GitHub, pode habilitar o Dependabot Alerts para ser notificado sobre versões afetadas.
- **Pesquisa de Pacotes**: É possível buscar vulnerabilidades de qualquer pacote, como o **React**. Encontramos referências a outras bibliotecas relacionadas, como o **React-off-flow**, que apresenta vulnerabilidades sem conserto.

## Conclusão

Se você está interessado em cibersegurança, o GitHub Advisor Database é uma ótima ferramenta para monitorar vulnerabilidades em diversos ecossistemas de software. Fique à vontade para explorar [GitHub.com/advisories](https://github.com/advisories).

Até a próxima! Tchau!

Olá pessoal, neste vídeo eu vou falar do GitHub Advisor Database.
Isso é um banco de dados de avisos, né?
Vamos trazer o advisory.
Espeço de relatório ou relato de vulnerabilidades de software que o GitHub tem.
Se você for GitHub.com.br, advisory.
ADVISORIS.
Tem essa lista aqui, você pode ver...
Pode encontrar vulnerabilidades em software.
Por exemplo, aqui...
Tem um aqui, se a gente clicar essa aqui.
Essa vulnerabilidade no Log4j, Log4j, que é uma biblioteca de login usado no Apache.
Servidor, né? Java.
E ele diz que versões desse software são afetadas.
Nesse caso, se a versão for menor aqui, 2.0.7, essa falha é encontrada nesse problema.
Tem aqui o nome do pacote, o ecossistema aqui, nesse caso Maven, Java.
O GitHub dá um número de identificador.
E ele mostra que versão você deve atualizar o software para que tenha o conserto, nesse caso 2.0.7.
E tem aqui a descrição dessa vulnerabilidade, falha do software.
É associado a esse número de CVE, 2021-40104.
CVE como vulnerabilities and exposures.
Exposições e vulnerabilidades comuns, que é uma descrição,
uma maneira de descrever a vulnerabilidade criada pelo MITRE.org.
E cada vulnerabilidade tem um identificador que começa com CVE, o ano, traços, um número.
Daquele ano, começa ano.
E você vê aqui que mais detalhes em outro website.
E tal, e tal. Referências e outros negócios.
Aqui mostra quem publicou.
Parece que veio desse repositório aqui do GitHub, essa vulnerabilidade.
Então, o software está hospedado no GitHub e foi de lá que ele associa a esse repositório, essa vulnerabilidade.
Certo. Nessa aba de Penebot Alerts, se você tiver um repositório de GitHub e usar esse software,
você pode habilitar a Penebot Alerts e ele vai te avisar que se você estiver usando a versão afetada,
nesse caso menor que 2.0.7.
E tem outros detalhes aqui na barra lateral à direita.
CWE tem esse número que é associado a um tipo de vulnerabilidade.
Nesse caso, é o tipo que tem o identificador CWE 502, que é de serialização de dados não confiáveis.
E ele descreve esse tipo de falha, vulnerabilidade no software.
Tem também essa pontuação de CVSS, que é uma maneira de pontuar a gravidade dessa vulnerabilidade.
Nesse caso, gravidade alta, o pontuação 8.1.
E esse código aqui tem vários parâmetros, então tem um número à esquerda,
é um certo parâmetro, dois pontos, e os carácteres da direita é o valor desse parâmetro.
Então tem 8 parâmetros básicos aqui que compõem um CVSS da versão 3.1.
E essa compilação desses parâmetros com esses valores gera essa pontuação através de uma fórmula.
Certo?
Então a gente pode voltar e você pode pesquisar, sei lá, você usa NPM.
E você pode pesquisar qualquer pacote que você usa.
Por exemplo, se você usa React, por exemplo, clicar no meu digito React, fazer uma busca,
ele mostra alguns detalhes aqui, vamos procurar React e os bugs ou vulnerabilidades mais críticos, vou filtrar.
Parece que não achei nenhum do pacote mesmo do React, mas algo relacionado ao React, por exemplo,
esse pacote React, traço o off, traço o flow, parece que tem a vulnerabilidade.
E parece até que não tem concerto, não tem nenhum concerto.
Então de acordo com esse aviso, não seria recomendado você usar essa biblioteca.
Se você se importa com esse problema aqui, está dizendo que todas as versões desse pacote falham de implementar corretamente o protocolo off.
Então se você estiver usando o off, talvez não seja uma boa usar essa biblioteca.
E tem várias outras, tem Go aqui, só tirar o React.
Tem esse pacote da HashiCorp, Volts, que tem essa vulnerabilidade.
E tem um dos tipos aqui, deixa eu voltar.
Um dos tipos, autenticação, passou, pur spoofing, verificação insuficiente da autenticidade dos dados,
e tem a descrição e os referências e tal e tal.
E as versões de concerto aqui no patch versions e a versão afetada no affected versions.
É que eu se chama Go e o nome do pacote é esse GitHub.com, a HashiCorp para Volts.
Eu vou tiver algum alerta que aparece aqui, que é usar alertas nos repositórios.
Então é isso pessoal, se você quiser dar uma olhada aí,
GitHub.com-advisories, ADVI, SORRI, ES.
Se quiser dar uma olhada nessa lista de vulnerabilidades para vários ecossistemas.
Se você estiver interessado em cyber segurança, cybersecurity,
quiser ler mais sobre isso, fica à vontade.
Então por essa é só, espero que tenham gostado dessa e até a próxima. Tchau.


Conheça a lista de vulnerabilidades de software do GitHub. O Banco de Dados do GitHub que agrega e descreve várias vulnerabilidades de software de vários ecosistemas. 

GitHub Advisory Database
https://github.com/advisories

001e-01 Cibersegurança: Conheça o Banco de Dados de Vulnerabilidades de Software do GitHub

Conheça o Sistema de Design Open Source Primer CSS Usado Pelo GitHub

# Resumo da Aula sobre o Sistema de Design Primer do GitHub

Nesta aula, foi apresentado o sistema de design **Primer** do GitHub, que consiste em classes CSS prontas para uso, facilitando a criação de componentes de interface de usuário nos aplicativos. Abaixo estão os principais pontos discutidos:

## O que é o Primer?
- Um conjunto de classes CSS para criar componentes de interface sem necessidade de escrever estilos personalizados.
- Pode ser acessado em [primer.style](https://primer.style).

## Componentes do Primer
1. **Botões**:
   - Para criar um botão, basta usar a tag `<button>` com a classe `btn`.
   - Exemplo de um botão primário: `<button class="btn btn-primary">`.
   - Outros tipos de botões incluem `btn-outline`, `btn-danger`, entre outros.

2. **Caixas**:
   - O componente **Box** permite agrupar conteúdo com estilos padrões.

3. **Formulários**:
   - O Primer oferece estilos para inputs, labels e mensagens de erro.
   - Exemplo de estrutura de um formulário com classes adequadas.

## Instalação do Primer
- Pode ser instalado via npm com `npm install @primer/css`.
- Ou diretamente usando o CDN com uma tag `<link>` em um arquivo HTML.

## Demonstração de Uso
- Exemplo de implementação no editor de texto com HTML Preview.
- Utilização de utilitários para margens (**m-**), padding (**p-**) e alinhamentos em botões.

## Recursos Adicionais
- O código-fonte completo está disponível no GitHub, acessível em [github.com/primer/css](https://github.com/primer/css).
- A documentação do Primer contém exemplos detalhados e informações sobre classes CSS disponíveis.

## Conclusão
O **Primer CSS** é uma ferramenta eficaz para desenvolvimento de interfaces de usuário, proporcionando uma maneira rápida de implementar estilos consistentes.

Olá pessoal, nessa aula eu vou falar do sistema de design primer do GitHub. Isso é nada mais nada
menos que classes de CSS que a gente pode usar no nosso aplicativo para poder criar vários
componentes da interface de usuário sem a gente ter que escrever os nossos próprios estilos,
as nossas classes. Basta usar essas classes que o primer já definiu para poder absorver ou usar
a teria o estilo deles e a interface de usuário irá aparecer na maneira do primer. Eu estou aqui no
baixo e baixo você ir para primer.style. Isto é PRIMEER.STYLE. Então você pode clicar aqui na
aba build CSS Dou Primer também tem componentes de React e view componentes que é para Ruby
on Rails. Vou clicar então primer.style.css. Vou dar um exemplo aqui de um botão. Se eu arrastar
a barra do esquerdo e clicar em buttons que são botões vamos ver uns exemplos. Por exemplo, para poder
criar esse botão aqui onde meu ponteiro está basta definir uma tag button com a classe btn. Então
essa classe foi escrita já está escrita no sistema do primer e essa classe vai sonar os estilos. Para
poder confirmar isso, basta clicar com o botão direito e espressionar e você vai ver aqui a
definição dessa classe ponto btn no dev tools na aba de styles tem aqui ponto btn a definição que
você pode fazer aqui como que o primer fez esse botão usando propriedade color e o valor tal
background color, border color e assim por diante. Se você quiser outros tipos de botões, basta seguir
o guia que eles têm. Tem um exemplo e você copia as classes do código e a estrutura obviamente.
Por exemplo, um botão primário vai aparecer com a cor de fundo verde e a cor do texto branca.
Para poder tornar o botão primário basta adicionar além da classe btn você adiciona btn traço primary
prry maeribs
tem essa outline btn outline danger o sinal de que o botão fica vermelho quando você
deixa o ponteiro sobre o botão e outros exemplos que você pode seguir tamanho pequeno padrão e
grande né small default large certo e se você quiser espressionar e ver como é
definir o estilo, basta clicar com o botão direito e espressionar no seu navegador e na aba styles
do dev tools só olhar a definição da classe e os seus estilos. Vou fechar o dev tools aqui e eu
vou mostrar mais outras. Por exemplo box que é uma caixa tem que é mais básico e tem um
lista um dois três quatro com um header que é o primeiro linha com a cor de parente
e várias variações dessa interface esse componente de tefaço de usuário chamada box
esse aqui tem uma co azul para o header aí é sim por diante outras coisas interações para
formulários tem forms e você vai ver vários tipos de aparência para o formulário é só
copiar a estrutura a mesma estrutura e as classes o que importa mais as classes né
seguir a mesma estrutura tentar seguir estrutura similar a esses exemplos que eles dão
e tem se eleita aqui grupo de formulário agrupamento e ele tem aqui ele já aplica os estilos
pro label e não sou o que as mensagens de sucesso de erro e mostra como mostrar a mensagem de erro
para um input uma caixa de texto mensagem de morning e assim por diante
e mostra labels aqui você já usou o get hub você pode ver que essas construções
são familiares é o label são esses negócios aqui a etiquetas tem várias cores é só seguir
essas classes para poder ser criadas tá bom então esse é uma visão geral desse sistema se você
quiser instalar eu vou dar um exemplo aqui a get instarter é onde você clica para ter as
funções de como instalar se você estiver usando o npm ou qualquer ou o yarn é só instalar o pacote
at a rouba primer barra css e você pode importar dessa maneira se for no você usar o scss
também funciona se você falar só em portas aspas a rouba prime barra css tá e fecha aspas
também funciona da mesma maneira então se você não tiver isso não tiver nenhum bunda pode
só tentar se quiser como eu vou fazer agora só copiar o link do cdn para poder só para testar
e você tem um tag de link com hr href né esse link aqui que do am pkg que vai te dar a versão mais nova
19 incluindo o menor e o patch eu vou copiar esse link eu tô aqui no meu editor de texto
o vscode eu queria um arquivo index ponto html e a tag de html dentro do head antes do fechamento
de rede vou colar aquela tag deixa eu colocar aqui quebra de texto a tag link com a garraf aquele
é para poder ter essa folha de chiles do primer já disponível então vou também eu poderia
estar vc um servidor local para poder rodar isso abrir só o arquivo mesmo no navegador mas eu vou
usar uma extensão do meu editor de texto que eu procurei html preview vou estar lá e vou ver
e funciona direito então toga o preview control shift v
e o shift v e colocar dividir para baixo
e dividir para baixo é só uma página aqui tá aqui o preview no lado de baixo
então vamos fazer um exemplo aqui eu já tenho a folha de estilos carregada né
fazer o exemplo do botan se lembra que se você põe um tag de botan
botão deixa tá aqui sem o estilo um lado aqui embaixo
e você pode colocar classe né btn e ele já se torna aquele botão se quiser
primar e ver espaço btn primary ele se torna aquele botão verde você vê aqui
e tem também umas utilidades aqui no de adição na espaço que é bem conveniente
cadê a infografia utilidades
margem ou parê da colocar margem então tem essas abreviações que você pode usar m significa margem
seguir de traço seguir de um número esse número é o nível né por exemplo se eu colocar aqui no
botão m traço 2 ele coloca margem ao redor do botão à esquerda direita assim me abaixo de
nível 2 que se você olhar nessa tabela nível 2 corresponde a 8 pixels se você clicar para
inspecionar obviamente eu não tenho esse preview não tem dev tools né deixa eu ver aqui
e não é muito legal deixa eu ver só abre essa janela no navegador teve melhor
e aí e aí
aqui abrir navegador porque lá não tem dev tools
acho que tem mas não sei como abrir sei lá vou inspecionar aqui esse botão
a not que o ponto m traço 2 realmente é a sua margem de 8 pixels em todos os lados né você
clica aqui você ver sacou meio que marrom bebe bebe a pedola do botão que é margem
e se você quiser usar a pedra é parecida é chamada p p adiciona margem na hora que agora o
botão tem se eu atualizar e clicar aqui
perto do botão tem a seu clicar em ponto ls para remover
o ver o botão sem amar sem o p2 com p2 no que ele seta a pattern
dentro do botão né o espaço entre o conteúdo do botão e a borda pra nível 2 que é 8 px né
8 px e não esqueça que vai sobre escrever o que já tinha definido pelo btn né
parece que o btn outra coisa que é ponto btn já definia um pad de 5 né
16 né 5 acima e abaixo e 16 nos lados parece né eu tirar o p2 é
é
então esse aí é o o pad em no utilities aqui se você quiser ajustar
por exemplo margem no topo margem bot um lado levo é só colocar abreviação dessa palavra
depois do p por exemplo se eu quiser colocar só o p a direita que é r right né
você colocar nível 4 e ver que ele já molda né nível 6
no notebook espaço a direita dentro do botão aumentou né então p é padding r right direita
traço o nível que é 6 que corresponde aqui nesse caso a 40 px
você pode inspecionar no dev to do poder da tabela lá que eles dizem
4 desculpa 6 é 40 px aqui tá então que mostra as outras abreviações p pra padding
t top r right b bottom le left a x seria a horizontal que é o left e right ao mesmo tempo
por exemplo px 6 adicionaria 40 pixels à esquerda e à direita
olha que a esquerda é o direito no navegador e pro y p y seria padding acima e abaixo
desminuir o 6 que é 40 px aí
tá bom
e tem vários outros aqui pode lá um lida
e também essas classes utilitárias ou de ajuda pra borda né pra box shadow cores
né pode mudar a cor aqui usando essas classes e assim por diante
e aí
e aí pessoal ah então esse é o uma breve introdução ao sistema de design do que o
github usa na qgate hub criou chamado primer css né prime acss podindo lá no
website primer ponto style barra css tem também a página do repositor no github que é o primer
barra css se você pesquisar o clica aqui a um lugar deve ter um link pro github
aqui embaixo é de despejo um github
ah
e a qualquer maneira é
contribuindo
o app só é prime barra github se você quiser
você olha aqui a url github ponto com barra prime barra css eu copio a s
a web
e aí
e se você olhar o código aqui src
buttons que a gente fez a button para sss mostra aqui a definição de ponto btn
e todas as propriedades tal e tal e tal btn primary que a gente usou
e usam a cor que usa uma variável de css
e assim por diante tá
então por essa é só e até a próxima


001e-02 Conheça o Sistema de Design Open Source Primer CSS Usado Pelo GitHub

Primer View Components: Componentes no HTML ERB do Ruby on Rails Influenciados pelo React

# Resumo da Aula sobre Primer View Component em Ruby on Rails

## Introdução
Esta aula é uma breve introdução ao **Primer View Component**, que é utilizado no framework **Ruby on Rails**, criado por DHH. Este framework é escrito na linguagem Ruby e permite o uso de templates `.rb`.

## O que é o Primer View Component?
O **Primer View Component** mescla as funcionalidades do **View Component** com as classes do sistema **Primer** do GitHub. O **View Component** foi inspirado pelo React, permitindo a criação de uma estrutura semelhante no Ruby on Rails usando HTML e Ruby.

### Primer CSS
O GitHub oferece um framework de CSS chamado **Primer**, que contém uma variedade de classes para aplicar estilos consistentes, semelhantes aos utilizados em seus próprios produtos.

## Como funciona?
1. **Instanciação de Componentes**: No Ruby on Rails, componentes são criados como classes Ruby e utilizam arquivos HTML e RB. O **Primer View Component** gera templates automaticamente utilizando as classes do Primer, simplificando o processo de estilização.

2. **Acessibilidade**: Os componentes do Primer oferecem implicações em acessibilidade por padrão.

## Configuração no Ruby on Rails
Para utilizar o **Primer View Component** em um aplicativo Rails:
1. Adicione ao seu `Gemfile`:
   ```ruby
   gem 'primer_view_components', 'versão_atual'
   ```
   Certifique-se de usar uma versão específica para evitar quebras de código.

2. Execute `bundle install`.

3. No arquivo `application.rb`, adicione:
   ```ruby
   require "view_component"
   require "primer/view_components/engine"
   ```

4. Para adicionar JavaScript, você pode usar:
   ```html
   <%= javascript_include_tag "primer_view_component" %>
   ```

5. Para adicionar o CSS, use:
   ```html
   <link rel="stylesheet" href="CDN_do_Primer_CSS">
   ```

## Exemplos de Uso
### Criando um Botão
Para renderizar um botão usando o **Primer View Component**:
```ruby
<%= render(Primer::ButtonComponent.new) do %>
  Texto do Botão
<% end %>
```

### Criando um Label
Da mesma forma, para um label:
```ruby
<%= render(Primer::LabelComponent.new(scheme: :accent)) do %>
  Texto do Label
<% end %>
```

## Considerações Finais
O Primer View Component oferece uma maneira eficiente de utilizar o sistema de design do GitHub em aplicações Ruby on Rails. A documentação oficial está disponível no site do [Primer](https://primer.style) e inclui uma variedade de exemplos e guias de uso.

### Recapitulando
- O **Primer View Component** combina a criação de componentes do Ruby on Rails com estilos do **Primer CSS**.
- É uma ferramenta útil para implementar design consistente e acessível nas aplicações.
- O uso de view components permite simplificar a renderização de componentes e a aplicação de estilos, tornando o código mais limpo e legível. 

Obrigado por assistir!

Olá pessoal, esta aula será uma breve introdução ao primer review component.
Então, para começar isso, vamos falar de Ruby on Rails.
Existe um framework de web chamado Ruby on Rails, criado pelo DHH,
que é um framework web escrito na linguagem Ruby.
Então, no Ruby on Rails, existem templates, rb.
Nesses templates nós podemos usar o primer review component para de certa maneira
para espelhar o comportamento de componentes como, por exemplo, do WBioteca React.
React é uma biblioteca de front-end, JavaScript, que você escreve componentes de interface de usuário.
Então, o view component, sem o primer, só falar de view component,
view component foi influenciado pelo React para fazer uma espécie de sistema similar de componentes no Ruby on Rails, com HTML e Rb.
E, desses view components, você pode criar vários tipos de componentes que nada mais, nada é que uma classe de Ruby,
acompanhado de um arquivo HTML e Rb, certo?
Então, o GitHub, que criou essa biblioteca, agora o GitHub também tem um framework de CSS chamado primer,
que é a definição de várias classes que você pode usar para poder obter o mesmo estilo usado pelo GitHub,
com as classes com os estilos já definidos.
Então, o primer view component é a combinação, o uso de view component mais com as classes do sistema primer do GitHub.
Com isso, você pode instanciar esses objetos, que são componentes apenas a classes de Ruby,
que são objetos que são objetos que são objetos que são objetos que são objetos que são objetos que são objetos que são objetos,
e esses objetos geram um template.
E esse template já automaticamente usa as classes do primer para você não ter que escrever os elementos de HTML e ter que escrever a classe na mão.
Basicamente, é isso.
Tem também outras implicações como a presença de acessibilidade por padrão.
Tá bom?
Então, você vai ver aqui no site primer.style, clicar em build, CSS, você já viu o sistema de design.
O GitHub, isso que tudo é open source, tá pessoal?
Tudo é open source.
E tem também para react e tem o view component que é mais para Ruby on Rails.
Então, vamos ver aqui.
Eu vou demonstrar o view component no contexto usando as classes do primer, que é o primer view component.
Tá bom?
E o Ruby on Rails. Eu já tenho aqui em de lado.
Eu gerei um aplicativo de Ruby on Rails, versão 7.
Tá?
Então, você vai lá no...
Para poder instalar, tem aqui a mesma coisa do tutorial.
Vai no seu gem file.
Tá?
E adiciona a...
A linha como gems, passos, abre aspas.
Na verdade, o primeiro seria o view component, tá?
Na verdade, eu acho que o gem...
Primeiro, o view component já requer isso, não precisa.
Deixa eu ver aqui no lock que eu já tinha instalado antes.
View component.
Então, já tinha aqui, tá?
Então, não precisa requerer explicitamente o view underscore component.
O primer view component já faz isso.
Então, eu posso tirar.
Então, você adiciona essa entrada de gem,
primer, underline view, underline components.
Vígula versão.
Nesse caso, eu vou explicitamente adicionar a versão mais atual.
Note que esse primer view component ainda está em desenvolvimento muito ativo.
Então, cada versão de patch,
existem...
Quebra o código.
Pode quebrar o código da versão anterior, tá bom?
Então, por isso que eu estou usando a específica versão específica aqui.
Se você não quiser usar a versão específica, só deve estar isso.
Para ser mais atual.
Mas eu acho que pode quebrar o código, porque está sempre mudando essa biblioteca, tá?
Então, essa é a aula só para demonstrar o uso de geral.
Quando você coloca isso no seu gem,
você pode dar o bundle install.
Bundle install.
Ele vai instalar, eu já tinha instalado.
Depois do bundle install, vamos fazer a configuração aqui.
Você vai no config, na pasta config, apliquei trrb.
Depois dessa declaração da classe,
depois de tudo isso você pode dar o require view component,
que vai requerir a funcionalidade de view components.
E dar o require primer,
barra view components, bar, engine,
que é mais específico do primer,
para ter aqueles componentes já definidos.
Você tem que ter que manualmente criar os seus próprios view componentes.
Para adicionar o JavaScript,
ou você instala pelo npm-yarn,
qualquer sistema que você usa,
o atprima, barra view, traça o component,
ou você pode usar também lá, já do Rails mesmo,
se você não tiver sistema separado aqui de JavaScript.
Eu posso ir lá no meu layout app,
views, layouts, application.
Antes do fechamento do head,
eu vou incluir,
vou colocar o quebra de texto,
eu vou incluir essa,
a menor que o Centro Igual, JavaScript,
include underline tag,
e coloca aqui
primer underscore view underscore component.
Essa documentação aqui diz só primer,
mas está errado,
acho que tem um bug que eles não concertaram.
Tem um eixo lá no GitHub,
que você pode encontrar, que vai dar a mensagem de erro,
e ele diz que para concertar,
você põe underscore view component.
Então vou colocar isso para funcionar.
E com isso vai adicionar
configurar o primer.
Agora, ele depende do CSS
do primer CSS.
Se você colocar sem o CSS,
ele vai funcionar mais as classes,
o estilo do negócio não vai funcionar.
Você tem que adicionar o primer CSS,
vai lançar de build CSS
as instruções.
Pode instalar via npm,
ou yarn,
ou eu já coloquei aqui o cdn
só para estar mais rápido.
Então coloquei esse cdn de link do primer,
que você pode ver lá no build CSS,
get in starter,
tem aqui lá no final o link do cdn,
se não quiser usar o cdn,
é só
instalar pelo
npm install, arrua,
primer,
barra, css.
Então está aqui no antefechamento red.
Vamos testar isso como fazer.
Eu criei um controller aqui,
um controller aqui chamado
make controller, que não tem nada,
e ele criou um,
eu criei um avio chamado index.html
só para testar.
Vou colocar uma coisa aqui,
aqui eu coloquei um exemplo de um botão,
e também mudei a rota
para root ser o controller main,
eu criei
a ação index,
que automaticamente
vai renderizar o main bar,
o views barra main bar index.
Vou sorrar o servidor aqui,
bin, real,
vou acessar isso aqui,
o link.
Tá bom, então parece aqui
testar o
palavra que eu coloquei, e seguindo
o botão. Então você note que o botão
parece aqui,
e esse botão usa a classe btn,
que você não precisou digitar,
que é o
primer view components, o primer view components já
adiciona a classe para você.
Então como é que
instancia qualquer view
component, é só
colocar o
menor que, percentual
igual,
render,
chamada da função render,
passa o nome do component
nesse caso primer,
2.2.botn component,
como é que acha isso, você vai na documentação,
uma
estação view components,
click in buttons, ele te mostra
oh, nessa aqui é o CSS,
tem que clicar em view components,
build view components
e você pode
clicar em button,
ele te mostra aqui
se você, ela é embaixo os exemplos,
render, primer,RightPrimer,
botacomponent.new
e tem um bloco aqui
com o texto dentro deste bloco
de, né?
Agora um detalhe aqui que eu quero te mostrar, se você remover o parentes, a gente sabe que
no Ruby não precisa ter parentes na chamada de função, né?
Se você precisar exer que não vai funcionar, né?
Apareceu nada no teste do botão.
Por que? Porque esse aqui o bloco tá sendo passado para o Neo, mas tá incorreto.
O bloco do teste tem que ser passado para o bloco da função chamado do render, para
poder fazer isso daqui para o parentes.
Eu não considero sempre que o parentes aqui para não ter esse problema, tá?
Eu passo o bloco para o render com o texto do botão.
O conteúdo que aparecer dentro do template aqui, do botão component.
Se você quiser passar parâmetro, é só abrir aqui no Neo, né?
E no Ruby também não precisa ter parentes na chamada de função.
Aí você pode passar os parâmetros aqui, por exemplo.
Você olha aqui na argumentos, aí tem scheme.
Se você passar scheme, dois pontos, símbolo, né?
Dois pontos primary, ele vai botar o botão verde.
Tá? Aí você pode mudar esse para, sei lá, qual é o outro símbolo.
Pode falar mais opções, outros argumentos, vírgula...
Pelo lá, o type que ele tem do botão.
Esse type vai ser aplicado ao...
Aprendendo esse type, parece que vai mudar para o botão type button, o type submit.
E assim por diante.
Então, é aquele attribute type do HTML.
Tem vários argumentos, seis argumentos, você pode usar esses aqui, que adiciona classes utilitárias, por exemplo.
Se eu quiser adicionar uma margem à esquerda do botão, eu posso dizer que ML, dois pontos, sei lá, nível 4.
O que adiciona o nível 4, que corresponde, eu acho, a 4 vezes 4, 16, 24. 24px, né? Pixels.
Então, esse argumento ML, 4, significa margem, left, né? Margem à esquerda.
E o nível 4, que significa 24px.
Você olha lá na sistema argumentos, qual é a correspondência.
Vem tudo do primer CSS, né?
E ele adiciona essa classe ml, traço 4, que vem do primer CSS.
Tá bom, então esse é um exemplo aí, eu vou dar só mais um exemplo.
Vamos ver.
Um label, vamos fazer um label.
Essa etiqueta aqui.
Vamos fazer uma dev aqui.
Deve ser dev, eu vou colocar.
Quero criar esse label, sei lá, azul aqui.
Para criar isso, vamos lá de novo, para poder renderizar um view component.
Vai, menor que é percentual igual, fecha percentual maior que.
E dentro disso, você tem uma função render.
Dentro da função render, passa a instância da classe do objeto.
Então, o nome é primer, 2.2.0 label component.
Continuo para criar um novo objeto.
Se quiser passar argumentos, abre parênteses, a gente cola scheme.
Nesse caso, a gente quer o azul, quer o accent.
Accent, né?
Passa um símbolo, né?
2.0 accents, como esse argumento nomeado.
E o conteúdo, passa como o bloco para o render.
Se você quiser, multipla linhas, você pode fazer do.
Assim, e ponha um percentual, and, percentual.
Dessa maneira aqui, por exemplo.
Etiqueta.
Vamos olhar.
Então, o conteúdo da etiqueta.
E pode ser qualquer coisa, né?
Você até um...
Outra coisa que você quiser.
Um link, né?
Ah, agarra alguma coisa.
Acho que também funciona.
Barra.
E agora etiqueta é um link.
O cenote que você vai inspecionar, é o...
A anchor, tag anchor, ah.
Dentro do container do label component, que nesse caso é o span, né?
Se você não adicionar, você não precisa escrever essas classes, né?
Esse é um dos pontos mais principais do uso do primer view component,
que ele já aplica as classes do sistema primer automaticamente,
sem você ter que escrever.
Né?
Então, aqui é múltiplas linhas com o do e end, e aqui é uma linha própria,
só com as chaves.
Tá bom?
Acho que o bloco é passado pro render, não é pro new.
Tá bom?
Então essa é uma breve introdução ao primer view component,
vamos revisar tudo de novo.
Então o primer view component, a gente pode usar o sistema de design,
de CSS do GitHub, que é open source, tudo isso aqui é open source,
você pode usar no seu projeto.
Então o primer CSS fornece as classes CSS, você pode escrever manualmente.
Para de escrever manualmente no Ruben Rails, no template de HTML e ARB,
você pode usar os chamados view component.
Agora, view component pro CISO é uma coisa.
Primer view component é outra.
Primer view component é uma implementação de criação de vários componentes novos
usando o sistema view component.
Para view component, o sistema foi criado pelo GitHub também,
para você poder fazer uma espécie de componentes no estilo do React,
no Ruben Rails.
Nessa mesma maneira aqui, você fala render o nome do componente,
ponto new, para estanciar, e ele vai aparecer lá o template para ser substituído
nesse template aqui.
Agora, o primer é uma implementação, uma criação de vários componentes
já pré definidos que você pode reutilizar.
Então ele cria esses vários componentes como o primer button component
e o label component.
Você pode ver no documentação aqui, na primer.style, build view component.
Clic aqui, tem vários exemplos, counter, não sei o que, a gente view button,
e a gente view label.
Tem que usar os exemplos e o código para você ver.
A gente view a configuração, só olhar aqui de novo,
gem file, adiciona gem, primer view component.
Not here, está em desenvolvimento, então a versão pode quebrar várias coisas,
então fique sempre atento às novas mudanças.
O que fazer um divi aqui para você ver?
GitHub, para adicionar aquela gem.
Lá no apliqueiro de html adicionaoned include para JavaScript
se você não já tiver usado pelo NPM.
Tem que ter o CSS, então adiciona edcedn mesmo e veja o NPM.
No arquivo, o apliqueiro de exemplo da parte de config,
você tem que adicionar o require view component
e o require primer, barra view, underline components, barra engine.
Depois lá da definição daquela classe, apliqueir.
que foi a minha rota aqui em Tornado a ver com o pirocinato?
Obrigado por assistir, deus like que você gostou dessa novidade, desse vídeo e até
a próxima.
