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
June 23, 2017
Programming
1
490
Web APIs que você (provavelmente) não sabia que existiam
Presented at JSExperience
Zeno Rocha
June 23, 2017
Tweet
Share
More Decks by Zeno Rocha
See All by Zeno Rocha
The Next Generation of Developer-First Products
zenorocha
1
600
7 Habits of Highly Productive Developers
zenorocha
1
390
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
500
What's new in the Liferay Community
zenorocha
0
680
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
560
How Liferay fits into the real of latest technologies
zenorocha
0
600
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
970
Como investir em... você!
zenorocha
1
560
Other Decks in Programming
See All in Programming
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
170
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
110
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
91
30k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
230
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.7k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
130
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
Is Xcode slowly dying out in 2025?
uetyo
1
280
PipeCDのプラグイン化で目指すところ
warashi
1
280
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Building Adaptive Systems
keathley
43
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Transcript
não sabia que existiam web apis que você provavelmente
@zenorocha
None
None
None
None
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
web share
Permite que um site compartilhe algo para um determinado destino.
Pode ser um serviço de sistema, um aplicativo nativo ou outro site. web share
shareButton.addEventListener(‘click', () => { navigator.share({ title: ‘Some Example’, url: window.location.href
}) .then(console.log('Successful share’)) .catch(console.log(error)); }); web share
onde usar?
None
under developm ent BROWSER support
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
let type = navigator.connection.type; // ex: bluetooth, cellular, ethernet, wifi
let max = navigator.connection.downlinkMax; // in megabits network info
onde usar?
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)`; });
caniuse.com/#feat=deviceorientation BROWSER support
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 h!ps://goo.gl/bX4ZQv
caniuse.com/#feat=vibration BROWSER support
onde usar?
None
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=ba!ery-status BROWSER support
onde usar?
None
None
WEBVR
Uma API experimental que trás o mundo de Realidade Virtual
para web usando Oculus Ri" ou Google Cardboard por exemplo. web VR
BROWSER support chromestatus.com/features#webvr
None
shape detection
É capaz de detectar diferentes formas em imagens como rostos,
códigos de barras e até mesmo texto em uma imagem. shape detection
let faceDetector = new FaceDetector(); faceDetector.detect(image).then(faces => { console.log(‘Faces found:’,
faces.length); }).catch((err) => { console.error(err); }); shape detection
None
BROWSER support under developm ent
onde usar?
None
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
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
caniuse.com/#feat=gamepad BROWSER support
None
web components templates custom elements shadow dom html imports
progressive web apps service workers push notifications offline support app
manifest background sync web usb bluetooth
None
Where the magic happens Your comfort zone
obrigado @zenorocha muito