Nawet nie wiesz ile potrafi Twoja przeglądarka

2017 NAWET NIE WIESZ ILE POTRAFI TWOJA PRZEGLĄDARKA

2017 CZEŚĆ

2017 CZEŚĆ Bartłomiej Krztuk Lead E-Commerce Developer @ Samlerhuset @BartekKrztuk
krztuk.pl

2017 Dlaczego Chrome? •Zaawansowany debugger JavaScript •Ogromna ilość rozszerzeń w
tym rozszerzenia dedykowane np. Dla Angular, React, Vue •Wbudowany emulator urządzeń

2017 #0 T-REX GAME

2017 #1 CONTENT EDITABLE

2017 Sprawdź jak układa się tekst na żywo document.body.contentEditable=true (Chrome)
document.designMode = “on” (Safari)

2017 #2 DEVICE EMULATION MODE

2017 Device emulation - reprezentuje przybliżony widok na urządzeniu mobilnym
- wspiera ekrany Retina, HDPI (4x, 2x, 1,7x itp) - Dotyk (touch events) - Geolokalizacja - Orientacja urządzenia (widok horyzontalny, wertykalny)

2017 #3 ZRZUTY EKRANU

2017 Full page screenshot - CTRL/CMD + SHIFT + P
(Command menu) - Capture screenshot - Capture full size screenshot Działa także w trybie mobilnym

2017 #4 PALETA KOLORÓW

2017 Color chooser - Aktualna paleta kolorów - Łatwa konwersja
RGB ➝ HEX - Color picker (próbnik kolorów)

2017 #5 NIEUŻYWANY CSS/JAVASCRIPT

2017 Coverage - Dev tools ➝ dodaj zakładkę - Coverage

2017 #6 BLOKOWANIE ZASOBÓW

2017 Resource blocking - Dev tools ➝ Network - Start
recording - Block request URL

2017 #7 TAŚMA FILMOWA

2017 Film strip - Dev tools ➝ Network - Camera
icon

2017 API

2017 #8 BATTERY API

2017 Poziom baterii Navigator.getBattery() Navigator.battery

2017 #9 VIBRATION API

2017 Vibration window.navigator.vibrate(200); window.navigator.vibrate([200]); window.navigator.vibrate([200,100,200])

2017 #10 SPEECH API

2017 Speech API var msg = new SpeechSynthesisUtterance('Hello World'); window.speechSynthesis.speak(msg);
msg.lang = ‘pl-PL’ msg.rate = ‘0.7’ msg.text = ‘Witaj’

2017 #00 TABAGOTCHI

2017 Jak radzić sobie z zakładkami http://tabagotchi.com/

2017 PYTANIA?

2017 PREZENTACJA DOSTĘPNA NA www.krztuk.pl

2017 DZIĘKUJĘ ZA UWAGĘ

Nawet nie wiesz ile potrafi Twoja przeglądarka

Nawet nie wiesz ile potrafi Twoja przeglądarka

Bartłomiej Krztuk

Other Decks in Programming

Featured

Transcript

2017 NAWET NIE WIESZ ILE POTRAFI TWOJA PRZEGLĄDARKA

2017 CZEŚĆ

2017 CZEŚĆ Bartłomiej Krztuk Lead E-Commerce Developer @ Samlerhuset @BartekKrztuk

2017

2017 Dlaczego Chrome? •Zaawansowany debugger JavaScript •Ogromna ilość rozszerzeń w

2017 #0 T-REX GAME

2017

2017 #1 CONTENT EDITABLE

2017 Sprawdź jak układa się tekst na żywo document.body.contentEditable=true (Chrome)

2017 #2 DEVICE EMULATION MODE

2017 Device emulation - reprezentuje przybliżony widok na urządzeniu mobilnym

2017 #3 ZRZUTY EKRANU

2017 Full page screenshot - CTRL/CMD + SHIFT + P

2017 #4 PALETA KOLORÓW

2017 Color chooser - Aktualna paleta kolorów - Łatwa konwersja

2017 #5 NIEUŻYWANY CSS/JAVASCRIPT

2017 Coverage - Dev tools ➝ dodaj zakładkę - Coverage

2017 #6 BLOKOWANIE ZASOBÓW

2017 Resource blocking - Dev tools ➝ Network - Start

2017 #7 TAŚMA FILMOWA

2017 Film strip - Dev tools ➝ Network - Camera

2017 API

2017 #8 BATTERY API

2017 Poziom baterii Navigator.getBattery() Navigator.battery

2017 #9 VIBRATION API

2017 Vibration window.navigator.vibrate(200); window.navigator.vibrate([200]); window.navigator.vibrate([200,100,200])

2017 #10 SPEECH API

2017 Speech API var msg = new SpeechSynthesisUtterance('Hello World'); window.speechSynthesis.speak(msg);

2017 #00 TABAGOTCHI

2017 Jak radzić sobie z zakładkami http://tabagotchi.com/

2017 PYTANIA?

2017 PREZENTACJA DOSTĘPNA NA www.krztuk.pl

2017 DZIĘKUJĘ ZA UWAGĘ