Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web APIs que você (provavelmente) não sabia que...
Search
Zeno Rocha
August 06, 2016
Technology
5
780
Web APIs que você (provavelmente) não sabia que existiam
Zeno Rocha
August 06, 2016
Tweet
Share
More Decks by Zeno Rocha
See All by Zeno Rocha
The Next Generation of Developer-First Products
zenorocha
1
550
7 Habits of Highly Productive Developers
zenorocha
1
370
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
440
What's new in the Liferay Community
zenorocha
0
650
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
530
How Liferay fits into the real of latest technologies
zenorocha
0
550
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
890
Como investir em... você!
zenorocha
1
530
Other Decks in Technology
See All in Technology
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
1.1k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
360
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
2
2.8k
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
510
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
5
700
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
2k
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
13
3.2k
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
200
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
960
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
570
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
250
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.8k
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
What's in a price? How to price your products and services
michaelherold
244
12k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Producing Creativity
orderedlist
PRO
344
39k
How to Ace a Technical Interview
jacobian
276
23k
Practical Orchestrator
shlominoach
186
10k
Designing Experiences People Love
moore
140
23k
Site-Speed That Sticks
csswizardry
4
380
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Transcript
não sabia que existiam web apis que você provavelmente @zenorocha
2008
2008
2009
2009
2010
2010
2011
2011
2012
2012
2013
2013
2014
2014
None
canvas svg geolocation local storage web sockets audio video drag
& drop web rtc
page visibility
Provê uma API que checa se a aba atual está
visível ou não no navegador. page visibility
window.addEventListener('visibilitychange', () => { if (document.hidden) { console.log('Tab is hidden');
} else { console.log('Tab is focused'); } }); page visibility
None
window.addEventListener('visibilitychange', () => { switch(document.visibilityState) { case 'prerender': console.log('Tab is
pre-rendering'); break; case 'hidden': console.log('Tab is hidden'); break; case 'visible': console.log('Tab is focused'); break; } });
caniuse.com/#feat=pagevisibility BROWSER support
onde usar?
None
None
state online
Expõe o estado atual de disponibilidade da rede. online state
console.log(navigator.onLine ? 'online' : 'offline') online state
window.addEventListener('offline', networkStatus); window.addEventListener('online', networkStatus); function networkStatus(e) { console.log(e.type); } online
state
caniuse.com/#feat=online-status BROWSER support
None
onde usar?
None
VIBRATION
Provê acesso ao hardware de vibração de dispositivos móveis. vibration
// Vibrate for 1 second navigator.vibrate(1000); // Vibrate with a
pattern navigator.vibrate([400, 300, 300, 200, 500]); // Turn off vibration navigator.vibrate(0); VIBRATION vibrate wait vibrate wait vibrate
// Super Mario navigator.vibrate([125,75,125,275,200,275,125,75,125,27 5,200,600,200,600]); // Star Wars navigator.vibrate([500,110,500,110,450,110,200,110,170, 40,450,110,200,110,170,40,500]);
// Go Go Power Rangers navigator.vibrate([150,150,150,150,75,75,150,150,150,15 0,450]); VIBRATION https://goo.gl/bX4ZQv
caniuse.com/#feat=vibration BROWSER support
onde usar?
None
None
DEVICE orientation
Expõe as coordenadas de orientação física de um dispositivo. device
orientation
device orientation window.addEventListener('deviceorientation', (e) => { console.log(‘Gamma:’, e.gamma); console.log(‘Beta:’, e.beta);
console.log(‘Alpha:’, e.alpha); });
device orientation let logo = document.querySelector(‘img'); window.addEventListener('deviceorientation', (e) => {
let tiltLR = e.gamma; let tiltFB = e.beta; logo.style.transform = `rotate(${tiltLR}deg) rotate3d(1,0,0, ${tiltFB * -1}deg)`; });
None
caniuse.com/#feat=deviceorientation BROWSER support
onde usar?
None
clipboard copy & paste
Possibilita interação com o clipboard do usuário através de operações
de copiar, cortar e colar. clipboard
None
// 1. User interaction is required let button = document.querySelector('button');
button.addEventListener('click', () => { select(); copy(); }); clipboard
// 2. Programmatically select an element function select() { let
input = document.querySelector('input'); input.focus(); input.setSelectionRange(0, input.value.length); } clipboard
// 3. Copy selected element text function copy() { try
{ document.execCommand('copy'); } catch (err) { console.error(err); } } clipboard
document.addEventListener('copy', (e) => { console.log(e.target.value); }); document.addEventListener('cut', (e) => {
console.log(e.target.value); }); document.addEventListener('paste', (e) => { console.log(e.clipboardData.getData('text/plain')); }); clipboard
None
None
caniuse.com/#feat=clipboard BROWSER support
onde usar?
None
None
light ambient
Expõe dados do sensor que capta a intensidade de luz
de um ambiente. ambient light
window.addEventListener('devicelight', (e) => { console.log(`${e.value} lux`); }); ambient light
None
None
let sensor = new AmbientLightSensor(); sensor.start(); sensor.onchange = (e) =>
{ console.log(e.reading.illuminance); }; sensor.stop(); ambient light sensor
BROWSER caniuse.com/#feat=ambient-light support
onde usar?
None
None
STATUS battery
Permite que uma página web acesse informações sobre a bateria
de um dispositivo. battery status
navigator.getBattery().then((battery) => { console.log(`${battery.level * 100}%`); battery.addEventListener('levelchange', () => {
console.log(`${this.level * 100}%`); }); }); battery status
caniuse.com/#feat=battery-status BROWSER support
onde usar?
None
None
web components templates custom elements shadow dom html imports
progressive web apps service workers push notifications offline support app
manifest background sync
WEB assembly
WebAssembly, ou wasm, é um novo formato binário para desenvolvimento
de aplicações de baixo nível. web assembly
under developm ent BROWSER support
None
WEBVR
Uma API experimental que trás o mundo de Realidade Virtual
para web usando Oculus Rift ou Google Cardboard por exemplo. web VR
BROWSER support chromestatus.com/features#webvr
None
gamepad
Permite que páginas web se conectem com controles de video
game via USB. gamepad
window.addEventListener('gamepadconnected', () => { let gp = navigator.getGamepads()[0]; console.log(‘ID:’, gp.id);
console.log(‘Axes:’, gp.axes.length); console.log(‘Buttons:’, gp.buttons.length); }); gamepad
window.addEventListener('gamepadconnected', gameLoop); function gameLoop() { let gp = navigator.getGamepads()[0]; if
(gp.buttons[0].pressed) { console.log('X'); } requestAnimationFrame(gameLoop); } game loop
None
caniuse.com/#feat=gamepad BROWSER support
None
None
2011
2012
2013
2014
None
obrigado @zenorocha muito