Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Custom Elements Everywhere

Avatar for Larissa Abreu Larissa Abreu
November 28, 2018
Programming
290
0

Custom Elements Everywhere

Avatar for Larissa Abreu

Larissa Abreu

November 28, 2018

More Decks by Larissa Abreu

See All by Larissa Abreu
Defesa contra as artes das trevas - Github (2020)
Avatar for Larissa Abreu larissaabreu
0
330
Sempre teste mas debug se precisar
Avatar for Larissa Abreu larissaabreu
2
260
Guia prático para criação de componentes perfeitos
Avatar for Larissa Abreu larissaabreu
1
240
JavaScript e o teste filosofal
Avatar for Larissa Abreu larissaabreu
0
130
Web Components: fazendo do futuro uma realidade através do JS - Brasília
Avatar for Larissa Abreu larissaabreu
0
160
Web Components: fazendo do futuro uma realidade através do JS
Avatar for Larissa Abreu larissaabreu
0
120
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
Avatar for Larissa Abreu larissaabreu
0
150
Dando poder ao seu CSS através de Custom Properties
Avatar for Larissa Abreu larissaabreu
0
150
Componentes nativos: uma chance de mudar o futuro!
Avatar for Larissa Abreu larissaabreu
0
240

Other Decks in Programming

See All in Programming
contenteditable と日本語入力に向き合う
Avatar for taki colorful12
0
220
SFCで実現する病院・医療システムの動的組み立て式UI
Avatar for kouki.miura koukimiura
1
120
コードレビューのボトルネックを"する側"と"される側"の両面から解消する
Avatar for yub0n yub0n
2
1.7k
エージェントを使い続けるためのメタワーク / Meta-work for keeping using the agent
Avatar for r-kagaya rkaga
6
1.9k
Vapor Mode でアクセシビリティは 壊れないか検証した話
Avatar for fuqda fuqda
1
170
[Dev Group Paris Octobre 26] Agentforce, SIforce, Claudeforce, Slackbot… on s'y retrouve ?
Avatar for Nathan Abondance nabondance
0
120
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
430
Vue Fes Japan の “作る側”に関わってみて
Avatar for Naoki Haba naokihaba
1
190
クラウドゲーミングのパフォーマンス最適化に挑む / Cloud Gaming Performance Tuning
Avatar for viviON vivion
0
260
Inertia Rails: The One-Person Framework with React & Friends
Avatar for Svyatoslav Kryukov skryukov
0
130
No More NoSuchMethodError
Avatar for TATSUNO Yasuhiro exoego
1
110
作れる、でも消せるか？──安全に「枯らして消す」機能削除術 / Drain, Then Delete
Avatar for chobishiba chobishiba
2
1k

Featured

See All Featured
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
1.1k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3.1k
Between Models and Reality
Avatar for mayunak mayunak
4
520
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
59k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
2
960
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
230
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
500
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
790

Transcript

  1. Custom Elements Everywhere

  2. @TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa Abreu

    @LarissaAbreu larissaabreu.github.io

  3. O que é Semântica?

  4. https://pt.wikipedia.org/wiki/Sem%C3%A2ntica

  5. Semântica no html Pra quê? Para quem? ou melhor…

  6. Desenvolvedores <div> Header </div> <div> Main </div> <div> Footer </div>

    <header> Header </header> <main> Main </main> <footer> Footer </footer>

  7. Leitores de tela <button> Abrir </button> <div class="modal"> Conteúdo </div>

    <button aria-haspopup="true" aria-expanded=“false" aria-controls="modal"> Abrir </button> <div id="modal" aria-label="Modal"> Conteúdo </div> https://www.w3.org/WAI/standards-guidelines/aria/

  8. Custom Elements Especificação da W3C https://www.w3.org/TR/custom-elements/

  9. class SevenMasters extends HTMLElement { } customElements.define(‘seven-masters', SevenMasters); seven-masters.js //

    WAI-ARIA // HTML semântico // conteúdo para SEO

  10. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body>

    </body> </html> <seven-masters></seven-masters> <script type="module" src=“seven-masters.js"></script>
  11. None
  12. None
  13. None

  14. youtube.com/new

  15. Custom Elements Everywhere custom-elements-everywhere.com/

  16. Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io