Баба Яга против!
DESCRIPTION
В последнее время во фронтенде появляется столько нового и внедряется настолько быстро, что не все успевают осознать последствия. Хорошо это или плохо? Рассмотрим некоторые новинки с точки зрения «за», а главное – «против». Конференция FrontTalks, Екатеринбург, 19 сентября Видео: https://vimeo.com/107694664TRANSCRIPT
![Page 1: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/1.jpg)
Баба-яга против!
Екатеринбург, 19 cентября 2014
Роман Дворнов
![Page 2: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/2.jpg)
О себе• Работал в ostrovok.ru, Единный кошелек
• Автор basis.js
2
![Page 3: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/3.jpg)
О себе
3
• Работал в ostrovok.ru, Единный кошелек
• Автор basis.js
![Page 4: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/4.jpg)
Сказка4
![Page 5: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/5.jpg)
Сначала был Интернет…
5
![Page 6: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/6.jpg)
Microsoft vs. Netscape
6
![Page 7: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/7.jpg)
7
![Page 8: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/8.jpg)
IE68
![Page 9: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/9.jpg)
9
IE, ты все делаешь не так – уходи!
![Page 10: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/10.jpg)
10
![Page 11: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/11.jpg)
Победила дружба…
11
любовь к стандартам
![Page 12: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/12.jpg)
12
* …зуда, запора, вопросов о смысле жизни
Стандарты Средство от мигреней*
![Page 13: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/13.jpg)
“Проприетарные фичи, которые не прошли процесс стандартизации обычно имеют плохой дизайн,
даже когда идея была хорошей.”
13
– Lea Verou
http://habrahabr.ru/post/138252/Каждый раз, когда вы выдаете проприетарную фичу за CSS3 — умирает котенок
![Page 14: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/14.jpg)
В идеале• предложение и обсуждение
• черновик стандарта
• пробные реализации
• стандарт
• официальные реализации
14
![Page 15: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/15.jpg)
В идеале• предложение и обсуждение
• черновик стандарта
• пробные реализации
• стандарт
• официальные реализации
14
с префиксом или «за флагом»
![Page 16: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/16.jpg)
В идеале• предложение и обсуждение
• черновик стандарта
• пробные реализации
• стандарт
• официальные реализации
14
с префиксом или «за флагом»
можно безопасно
использовать
![Page 17: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/17.jpg)
В действительности• предложение и обсуждение
• черновик стандарта
• пробные реализации
• стандарт
• официальные реализации
15
![Page 18: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/18.jpg)
16
![Page 19: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/19.jpg)
Promise Я обещаю быть лапочкой
17
![Page 20: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/20.jpg)
Promise – "лекарство" от callback-hell
18
fronttalks.ru/events/2013-07/presentations/davydov/index.html Михаил Давыдов «Promise – это не больно»
![Page 21: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/21.jpg)
Множество реализаций
19
![Page 23: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/23.jpg)
Давайте сделаем частью JavaScript!
21
* стало частью ES6
![Page 24: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/24.jpg)
Мы знаем как надо – префиксы не нужны!
22
![Page 25: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/25.jpg)
Должно было быть
23
!
var promiseSupported = 'Promise' in window;
![Page 26: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/26.jpg)
В действительности
24
var NativePromise = window['Promise']; var nativePromiseSupported = NativePromise && // Some of these methods are missing from // Firefox/Chrome experimental implementations 'resolve' in NativePromise && 'reject' in NativePromise && 'all' in NativePromise && 'race' in NativePromise && // Older version of the spec had a resolver object // as the arg rather than a function (function(){ var resolve; new NativePromise(function(r){ resolve = r; }); return typeof resolve === 'function'; })();
![Page 27: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/27.jpg)
– Bill Gates
“Успех – паршивый учитель. Он заставляет умных людей думать, что они не могут
проиграть.”
25
![Page 28: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/28.jpg)
Хотите использовать сегодня – готовьте полифил
26
Например, github.com/lahmatiy/es6-promise-polyfill
![Page 29: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/29.jpg)
Зато нативные реализации лучше!
27
![Page 30: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/30.jpg)
Правда?
28
BrowserTime, ms Memory, MB
Native Polyfill Native Polyfill
Chrome 35 162 50 10,5 2,7
Firefox 30 161 39 – –
IE11 – 12 – 2,8
gist.github.com/lahmatiy/d4d6316418fe349537dc
![Page 31: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/31.jpg)
Promise-истерия
29
![Page 32: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/32.jpg)
Применяй с умом!
Promise anti-patterns taoofcode.net/promise-anti-patterns/
30
![Page 33: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/33.jpg)
Promise проникают в стандарты
31
![Page 34: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/34.jpg)
DOM4
32
![Page 35: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/35.jpg)
DOM4• декабрь 2013:
«Черновик стандарта DOM4 включает в себя Promises как примитив языка...»WSD: Сергей Константинов — Что интересного готовит нам W3Cwww.slideshare.net/yandex/w3c-28967881
32
![Page 36: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/36.jpg)
DOM4• декабрь 2013:
«Черновик стандарта DOM4 включает в себя Promises как примитив языка...»WSD: Сергей Константинов — Что интересного готовит нам W3Cwww.slideshare.net/yandex/w3c-28967881
• январь 2014: Promise исключены из DOM4 – теперь просто часть ES6
32
![Page 37: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/37.jpg)
Ссылаются на DOM4• Web NFC
• Quota Management
• Web Cryptography
• Web MIDI
• Device Capabilities
• Messaging
• Contacts Manager
• Web Telephony
33
Вот так одна спецификация может
"отравить" другие
![Page 38: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/38.jpg)
Ссылаются на ES6
34
• CSS Font Loading
• Web animations (с июля 2014)
• Service Workers
• TCP and UDP Socket
• Streams
• Battery Status
• Task Scheduler
![Page 39: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/39.jpg)
Народное творчество:
FontStatusPromise ResponsePromise
AbortableProgressPromise …
35
![Page 40: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/40.jpg)
“Promises should be for one-and-done, non-interruptible,
atomic-ish operations.”
36
– Domenic DenicolaАвтор Q, Promises/A+, ES6 promise spec
![Page 41: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/41.jpg)
Да вы упоролись!
“Promises should be for one-and-done, non-interruptible,
atomic-ish operations.”
36
– Domenic DenicolaАвтор Q, Promises/A+, ES6 promise spec
![Page 42: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/42.jpg)
37
![Page 43: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/43.jpg)
Один подход не может быть применен везде и всегда.У каждой задачи – свое
решение.
Insight #1
38
![Page 44: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/44.jpg)
element.animate() Я заанимирую все
39
![Page 45: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/45.jpg)
Часть крутой спеки
Web Animations dev.w3.org/fxtf/web-animations/
40
![Page 46: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/46.jpg)
41
Интерфейсы ! AnimationTimeline AnimationPlayer AnimationNode AnimationTimingReadOnly AnimationTiming ComputedAnimationTiming AnimationGroup AnimationNodeList AnimationSequence Animation Animatable AnimationEffect KeyframeEffect MotionPathEffect
Расширения ! Document timeline Element animate() getCurrentAnimations() getAnimationPlayers() ! PseudoElement (возможно) animate() getCurrentAnimations() getAnimationPlayers()
Web animations
![Page 47: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/47.jpg)
42
Интерфейсы ! AnimationTimeline AnimationPlayer AnimationNode AnimationTimingReadOnly AnimationTiming ComputedAnimationTiming AnimationGroup AnimationNodeList AnimationSequence Animation Animatable AnimationEffect KeyframeEffect MotionPathEffect
Расширения ! Document timeline Element animate() getCurrentAnimations() getAnimationPlayers() ! PseudoElement (возможно) animate() getCurrentAnimations() getAnimationPlayers()
Реализация в Blink AnimationPlayer ! source timeline startTime currentTime playbackRate playState ready finished cancel()! finish() play() pause() reverse() onfinish (уже нет в спеке)
![Page 48: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/48.jpg)
43
caniuseчто ты делаешь?
прекрати!
![Page 49: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/49.jpg)
Какой будет стиль?
44
<div id="wat" style="background: green !important"> ... </div>
![Page 50: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/50.jpg)
Добавим непредсказуемости
45
document.getElementById('wat').animate([ { backgroundColor: 'red' }, { backgroundColor: 'blue' }], { duration: 123});
А теперь и ты испытай неизведанное ...
![Page 51: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/51.jpg)
Проблемы
• нет реализации остальной части спецификации (достаточно критичной)
• нет инфраструктуры
• нет инструментов
46
![Page 52: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/52.jpg)
47
![Page 53: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/53.jpg)
Запилить новую штуку – мало! Нужны: завершенность, контроль и инструменты.
48
Insight #2
![Page 54: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/54.jpg)
Web Components Я переверну веб
49
![Page 55: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/55.jpg)
Совокупность технологий
• HTML imports
• <template>
• Custom elements
• Shadow DOM
50
![Page 56: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/56.jpg)
Html imports w3c.github.io/webcomponents/spec/imports/
51
![Page 57: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/57.jpg)
<link rel="import" href="foo.html">
52
![Page 58: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/58.jpg)
53
![Page 59: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/59.jpg)
Кажется хорошей идеей, но сложно, проблемы с
производительностью…
54
![Page 60: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/60.jpg)
<template>www.w3.org/TR/html5/scripting-1.html#the-template-element
55
![Page 61: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/61.jpg)
Часть HTML5, самое безобидное в
Web Components
56
![Page 62: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/62.jpg)
Название вводит в заблуждение
57
![Page 63: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/63.jpg)
“<template> provide a method for declaring inert
DOM subtrees…”
58
– HTML5
![Page 64: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/64.jpg)
В действии
59
<template id="row"> <tr><td><td></template>!
var template = document.querySelector('#row');var row = template.content.cloneNode(true);
![Page 65: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/65.jpg)
С <template> не нужно
• ... костылей вроде:<script type="text/template" id="foo">..</script>
• ... делать преобразование:innerHTML → DOM
60
![Page 66: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/66.jpg)
Custom elementsw3c.github.io/webcomponents/spec/custom/
61
![Page 67: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/67.jpg)
document.registerElement('custom-tag', { .. })
<custom-tag></custom-tag>
62
![Page 68: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/68.jpg)
В простых случаях может быть полезно,
хорошо полифилится
63
![Page 69: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/69.jpg)
асинхронность, бесконечное наследование
= мерцания при загрузке*
64
* FOUC (flash of unstyled content )
![Page 70: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/70.jpg)
Shadow DOMw3c.github.io/webcomponents/spec/shadow/
65
![Page 71: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/71.jpg)
Кажется все начиналось с<style scoped>
66
* пока только в Firefox, удалено в Chrome 35
![Page 72: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/72.jpg)
Инкапсуляция DOM-фрагментов
67
![Page 73: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/73.jpg)
68
Shadow treeИмеют собственные стили, которые не пересекаются с другими shadow tree и с основным документом
![Page 74: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/74.jpg)
ад, ад, ад... и еще немного ада!
69
![Page 75: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/75.jpg)
Например – события
70
![Page 76: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/76.jpg)
71
Shadow root
Node
Insertion point
Берем «обычное» дерево
![Page 77: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/77.jpg)
72
То же дерево «в профиль»
![Page 78: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/78.jpg)
73
Путь события
![Page 79: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/79.jpg)
73
Путь события
![Page 80: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/80.jpg)
73
Путь события
Поэтому теперь есть event.path
![Page 81: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/81.jpg)
Все тривиально!
74
* на самом деле нет
![Page 82: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/82.jpg)
Web Components кажутся очень сложными
75
![Page 83: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/83.jpg)
76
![Page 84: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/84.jpg)
Веб-технологии всегда стремились быть простыми – это обеспечило им развитие
и популярность.77
Insight #3
![Page 85: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/85.jpg)
и тд и тп…
78
![Page 86: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/86.jpg)
Почему это имеет значение?
79
![Page 87: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/87.jpg)
Все, что попадает в веб-платформу остается в
веб-платформе
80
![Page 88: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/88.jpg)
Цена ошибки очень высока
81
![Page 89: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/89.jpg)
<!doctype HTML>
82
![Page 90: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/90.jpg)
<blink>, <marquee>, <font>, …
83
![Page 91: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/91.jpg)
"FrontTalks".bold().italics()
> "<i><b>FrontTalks</b></i>"
84
![Page 92: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/92.jpg)
Flexbox
85
3 спецификации
.block { display: -webkit-box; /* OLD */ display: -moz-box; /* OLD */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec */}
.block { display: flex;}
Должно быть Реальность
![Page 93: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/93.jpg)
Прогресс!
86
![Page 94: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/94.jpg)
Больше API, больше функций, больше возможностей!
87
![Page 95: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/95.jpg)
А что же с тем что есть?
88
![Page 96: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/96.jpg)
border-radius
89
Chrome 5 Firefox 3.6 Opera 10.5 IE 8
2009
![Page 97: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/97.jpg)
Угадай браузер
90
2010
3 4
1 2
![Page 98: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/98.jpg)
Угадай браузер
90
Opera IE9
Firefox Chrome, Safari
2010
![Page 99: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/99.jpg)
Проходят годы…
91
IE
FirefoxChrome, Safari, Opera
2014
![Page 100: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/100.jpg)
SVG – баг на баге и багом погоняет
92
![Page 101: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/101.jpg)
DOM Level 2 Traversal and Range
• 2000й год выпуска! • основа для работы с текстом • все браузеры ведут себя по разному, свои баги • не используется из-за нестабильности и неконсистености
• лучшая альтернатива – <canvas>93
![Page 102: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/102.jpg)
80/20
94
![Page 103: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/103.jpg)
80% задачи – 20% времени 20% задачи – 80% времени
95
![Page 104: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/104.jpg)
80% задачи – 20% времени 20% задачи – 80% времени
96
никогда
![Page 105: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/105.jpg)
97
![Page 106: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/106.jpg)
Производители браузеров – у вас много технических долгов.
Надо доделывать!
98
![Page 107: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/107.jpg)
К чему все это?
99
![Page 108: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/108.jpg)
Интересуйтесь новым
100
Читайте твитеры докладчиков, блоги браузеров, новости W3C
![Page 109: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/109.jpg)
Пробуйте
101
![Page 110: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/110.jpg)
Формируйте свое мнение
102
![Page 111: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/111.jpg)
Будьте осторожны
103
![Page 112: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/112.jpg)
Критикуйте ;)
104
![Page 113: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/113.jpg)
No bullshit!105
![Page 114: Баба Яга против!](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b3c53d8b42a29058b45e2/html5/thumbnails/114.jpg)
Save the Web!106