https://github.com/brian-izaki/apis-da-web

Estudos de APIs que os Browsers conseguem acessar recursos nativos
https://github.com/brian-izaki/apis-da-web

indexeddb localstorage webapi webcomponents webrtc-experiments

Last synced: about 1 month ago
JSON representation

Estudos de APIs que os Browsers conseguem acessar recursos nativos

• Host: GitHub
• URL: https://github.com/brian-izaki/apis-da-web
• Owner: brian-izaki
• License: mit
• Created: 2020-06-30T23:55:28.000Z (over 4 years ago)
• Default Branch: development
• Last Pushed: 2021-09-26T19:02:58.000Z (over 3 years ago)
• Last Synced: 2024-11-12T07:12:59.854Z (3 months ago)
• Topics: indexeddb, localstorage, webapi, webcomponents, webrtc-experiments
• Language: HTML
• Homepage:
• Size: 62.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# APIs-da-Web

Estudo de APIs nativos dos Browsers




# Executando o projeto

- Clone o repositório

- Pode utilizar o npm ou a extensão live-server do VScode para iniciar o projeto.

  - **Com npm** execute o comando npm run start

  - **Com a extensão** clique em "Go live" no canto inferior direito do VScode.




# Estudado até o momento

  IndexedDB

## IndexedDB

- É criado um mini banco de dados no proprio navegador

### Referencias

- [CanIUse](https://caniuse.com/indexeddb)




Web-RTC

## Web-RTC

- Utilizado para conexões peer-to-peer;

- Permite acessar a Câmera e microfone do dispositivo;

### Referencias

- [WebRTC.org](https://webrtc.org/)




Web Component - customElements & shadowDOM

## Web Component

- São utilizadas as APIs **CustomElements** e **ShadowDOM** para poder gerar um WebComponent.

- Com ela, não é necessário o uso de um framework para gerar componentes HTML.

- é possivel criar novas tags ou customizar tags existentes com o **CustomElements** e o **ShadowDOM** gerar o conteudo em html dessa tag customizada

### Referencias

- MDN doc

  - [webComponents](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components)

  - [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)

  - [customElements](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components/Using_custom_elements)

- [Anotações do Notion](https://woolen-muskmelon-bff.notion.site/Web-Components-64a211cb7d7440338541284a18001a24)




SVG

## SVG

- utilizado para criar desenhos e gráficos no html.

- elemento `path` é um dos elementos importantes para poder criar elementos com linhas e curvas.

  - ele possui **comandos** para representar o tipo de movimento que será feito, linha, mover, curva, etc.

### Referencias

- [w3shools](https://www.w3schools.com/html/html5_svg.asp)

- [path](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)




Canvas

## Canvas

- utilizado para criar desenhos com pixels, jogos, renderizações 3D

- ele é mais otimizado se comparado ao SVG

### Referencias

- [tutorial](https://developer.mozilla.org/pt-BR/docs/Web/API/Canvas_API/Tutorial)