Patrick Kettner - Creating magic with houdini

5. FROM: Marc Andreessen (marca@eit.com) TO: www-talk@w3.org Thu, 17 Feb 1994 13:11:31 --100 RE: Indented <MENU>s ************************ *********** In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

7. <center>

14. paintlayoutstyledomparsingnetwork compose

15. paintlayoutstyledomparsingnetwork compose Why on earth are you looking this closely at my files? You win a prize :] Seriously, just tell me you noticed this ridiculiously small text and I

17. var sum=1+2 keyword identifier assignment int addition int “hey, that’s a keyword!”“and that’s an identifier!”“thats an integer!”“another integer!”“oh cool! an addition operator”“looks like an assignment operator”

19. #document body header div p p <!DOCTYPE html> <body> <header>hello</header> <div> <p>world</p> <p>:]</p> </div> </body> <!DOCTYPE html> <body> <header>hello</header> <div> <p>world</p> <p>:]</p> </div> </body>

21. #document body header div p p #document body header div * { background: red } div p { background: blue } p:last-of-type { background: orange } * { background: red } div p p:last-of-type div p { background: blue } * { background: red } p:last-of-type { background: orange } div p { background: blue } #document body header div p pp p

22. paintlayoutstyledomparsingnetwork compose body div p

23. body{ width: 250px } div { width: 10em; } p { width: 50% } body header div p p bodybody{ width: 250px }

24. body{ width: 250px } div { width: 10em; } p { width: 50% } header div p p div p

25. body{ width: 250px } div { width: 10em; } p { width: 50% } div p p divdiv { width: 10em; } div { width: 160px; }

26. body{ width: 250px } p { width: 50% } p p pp { width: 50% } p { width: 80px }

27. body{ width: 250px } p { width: 50px } p pp { width: 80px }

29. paintlayoutstyledomparsingnetwork compose 0101 011111011 0101101111010 1110101010010 101001010010111010 10100101001010110101001101010

39. p:last-of-type { transform: translate3d(0,0,0) }

44. paintlayoutstyledomparsingnetwork compose document.documentElement.classList.add('foo')document.body.style.paddingLeft = '2px'

47. cssgrid

48. cssgrid

50. years

53. CSS Properties and Values API CSSOM PaintWorklet LayoutWorklet AnimationWorklet CSS Parser Font Metrics

54. Properties and Values API

55. CSS Custom Properties(aka CSS variables)

57. :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: #F9391F; transition: --distance: 1s; } div:hover { --distance: 150px; }

63. You Can’t Animate Strings

64. Properties and Values API

65. :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: #F9391F; transition: --distance: 1s; } div:hover { --distance: 150px; } CSS.registerProperty({ name: "--distance", syntax: "<length>", initialValue: ’0' })

66. :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: #F9391F; transition: --distance: 1s; } div:hover { --distance: 150px; } CSS.registerProperty({ name: "--distance", syntax: "<length>", initialValue: ’0' }) required: any string

67. :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: #F9391F; transition: --distance: 1s; } div:hover { --distance: 150px; } CSS.registerProperty({ name: "--distance", syntax: "<length>", initialValue: ’0' }) optional: <length> <number> <percentage> <color> <image> <url> <integer> <angle> <time> <resolution> <ident> *

71. CSSOMCSS Object ModelCSS Typed Object Model

72. ^ ^ Here is a some dummy text Here is a a much much longer version of some dummy text that will ultimately cause the textbox to overflow the container that we are within and as a window.getComputedStyle('#elem').width == '200px';window.getComputedStyle('#elem').width == ’187px';

73. function getInnerWidth (elem) { var style = window.getComputedStyle(elem); var width = elem.offsetWidth; var right = parseFloat(style.paddingRight); var left = parseFloat(style.paddingLeft); var bRight = parseFloat(style.borderRightWidth); var bLeft = parseFloat(style.borderLeftWidth); return width - right - left - bRight - bLeft; };

78. function getInnerWidth (elem) { var style = window.getComputedStyleMap(elem); var width = elem.offsetWidth; var right = style.paddingRight.value; var left = style.paddingLeft.value; var bRight = style.borderRightWidth.value; var bLeft = style.borderLeftWidth.value; return width - right - left - bRight - bLeft; };

81. Before: After: DOM API DOM API ➡ String ➡ Parse to number ➡ Calculations ➡ Calculations

82. getComputedStyleMap(elem) elem.styleMap

83. getComputedStyleMap(elem) // to query any current value elem.styleMap

84. getComputedStyleMap(elem) // to query any current value elem.styleMap // for styles that have been // set via CSS explicitly

85. style.get('width').unit == ’em'style.get('width').unit == ’vmax' var style = document.querySelector('#elem').styleMap style.get('width').value == '200' style.get('width').unit == 'px'

86. var style = document.querySelector('#elem').styleMap style.set('width', new CSSUnitValue(50, 'em')) var style = document.querySelector('#elem').styleMap style.set('width', new CSSUnitValue(50, 'em'))

87. var style = document.querySelector('#elem').styleMap var x = style.get(’background-position').x x.value == 50 x.unit == ’percent' // CSSUnitValue(50, "percent") var y = style.get(’background-position').y x.px == -10 x.percent == 100 x.unit == undefined // CSSCalcValue({percent: 100, px: -10}) #elem { background-position: center bottom 10px; } #elem { background-position: center bottom 10px; } #elem { background-position: center bottom 10px; }

88. it’s about efficiency, not ease of use

89. CSSUnparsedValue CSSKeywordValue CSSUnitValue CSSCalcValue CSSTransformValue CSSPositionValue CSSImageValue CSSFontFaceValue

91. Worklets

92. Worklets

93. WebWorkers

94. commit 90b52e847359ae902d3f7ce7bc511cadfbc29ea8 Author: Alexey Proskuryakov <ap@webkit.org> Date: Thu Nov 6 2008 07:04:47 +0000 Implement Worker global object

95. self.onmessage = (e) { let result = doSomething(e.data) postMessage(result) } var myWorker = new Worker('worker.js'); myWorker.postMessage(’testing 123'); myWorker.onmessage = (e) => { doSomethingWithResult(e.data); } WebWorkers

96. WebWorkers individual threads event based

97. Worklets API based thread agnostic

101. CSS Layout API

102. <!doctype html> <div id="myElement"> <div id="child1"></div> <div id="child2"></div> </div> <style> #myElement { width: 500px; height: 500px; display: layout('masonry') } </style> <script> window.layoutWorklet.addModule('masonry.js') </script>

112. // masonry.js registerLayout('masonry', class { *layout(space, children, styleMap) { var inlineSize = resolveInlineSize(space, styleMap) var bordersAndPadding = resolveBordersAndPadding(varraintSpace, styleMap) var scrollbarSize = resolveScrollbarSize(varraintSpace, styleMap) var availableInlineSize = inlineSize - bordersAndPadding.inlineStart - bordersAndPadding.inlineEnd - scrollbarSize.inline; var availableBlockSize = resolveBlockSize(varraintSpace, styleMap) - bordersAndPadding.blockStart - bordersAndPadding.blockEnd - scrollbarSize.block; ...

117. yuck

119. bit.ly/css-layout-api

124. paintWorklet

125. CSS Paint API

126. <!doctype html> <textarea id="myElement"></textarea> <style> #myElement { background-color: #5d1e6f; background-image: paint(qr); --qr-url: https://patrickkettner.com; width: 500px; height: 500px; } </style> <script> paintWorklet.addModule('qr.js') </script>

134. // qr.js // slightly modified version of // https://github.com/yyx990803/QR.js import QR from 'QR' registerPaint('qr', class { static get inputProperties() { return [ '--qr-url' ]; } paint(ctx, geom, properties) { let url = properties.get('--qr-url').value const minSize = Math.min(geom.width, geom.height); if (url) { QR.draw(url, ctx, minSize, 2) } } });

148. <!doctype html> <textarea id="myElement"></textarea> <style> #myElement { background-color: #5d1e6f; background-image: paint(qr); --qr-url: https://patrickkettner.com; width: 500px; height: 500px; } </style> <script> const txt = document.querySelector('textarea') txt.addEventListener('input', (e) => { txt.style.setProperty('--qr-url', txt.value) }); paintWorklet.addModule('qr.js') </script>

154. start playing with nightlies

155. give feedback!

156. https://aka.ms/EdgeUserVoice

157. thanks! patrickkettner patrickkettner patrickkettner patrickkettner patrickkettner@microsoft.com

Patrick Kettner - Creating magic with houdini

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Patrick Kettner - Creating magic with houdini

Similaire à Patrick Kettner - Creating magic with houdini (20)

Plus de OdessaJS Conf

Plus de OdessaJS Conf (20)

Dernier

Dernier (20)

Patrick Kettner - Creating magic with houdini

Notes de l'éditeur