Download to read offline
![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](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-15-320.jpg)
![#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>](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-19-320.jpg)
![// 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)
}
}
});](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-134-320.jpg)
![// 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)
}
}
});](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-135-320.jpg)
![// 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)
}
}
});](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-136-320.jpg)
![// 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)
}
}
});](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-137-320.jpg)
![// 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)
}
}
});](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-138-320.jpg)
![// 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)
}
}
});](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-139-320.jpg)
![// 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)
}
}
});](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-140-320.jpg)
![// 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)
}
}
});](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-141-320.jpg)
![// 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)
}
}
});](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-142-320.jpg)
![// 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)
}
}
});](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-143-320.jpg)
![// 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)
}
}
});](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-144-320.jpg)
![// 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)
}
}
});](https://image.slidesharecdn.com/33a5sfpwt5aqeunrflnz-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-Creating-magic-with-houdini-145-320.jpg)
Uploaded byOdessaJS Conf
Patrick Kettner - Creating magic with houdini
This document contains an email from Marc Andreessen to the W3C mailing list regarding indented menus in HTML. In the email, Andreessen expresses frustration that HTML does not allow for easy control over document formatting and layout in the way that other text processing programs like TeX, Microsoft Word, and others do. He says that when people ask how to do trivial formatting tasks in HTML, he has to tell them "Sorry, you're screwed."
More Related Content
Similar to Patrick Kettner - Creating magic with houdini
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.
- 14.
- 15. paintlayoutstyledomparsingnetwork compose Why onearth are you looking this closely at my files? You win a prize :] Seriously, just tell me you noticed this ridiculiously small text and I
- 16.
- 17. var sum=1+2 keyword identifierassignment 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”
- 18.
- 19. #document body header div p p <!DOCTYPEhtml> <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>
- 20.
- 21. #document body header div p p #document body headerdiv * { 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.
- 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.
- 30.
- 39.
- 42.
- 43.
- 44.
- 45.
- 47.
- 48.
- 50.
- 52.
- 53. CSS Properties andValues API CSSOM PaintWorklet LayoutWorklet AnimationWorklet CSS Parser Font Metrics
- 54.
- 55. CSS Custom Properties(akaCSS variables)
- 57. :root { --distance: 400px; } div{ width: var(--distance); height: var(--distance); background: #F9391F; transition: --distance: 1s; } div:hover { --distance: 150px; }
- 58. :root { --distance: 400px; } div{ width: var(--distance); height: var(--distance); background: #F9391F; transition: --distance: 1s; } div:hover { --distance: 150px; }
- 59. :root { --distance: 400px; } div{ width: var(--distance); height: var(--distance); background: #F9391F; transition: --distance: 1s; } div:hover { --distance: 150px; }
- 60. :root { --distance: 400px; } div{ width: var(--distance); height: var(--distance); background: #F9391F; transition: --distance: 1s; } div:hover { --distance: 150px; }
- 61. :root { --distance: 400px; } div{ width: var(--distance); height: var(--distance); background: #F9391F; transition: --distance: 1s; } div:hover { --distance: 150px; }
- 62. :root { --distance: 400px; } div{ width: var(--distance); height: var(--distance); background: #F9391F; transition: --distance: 1s; } div:hover { --distance: 150px; }
- 63. You Can’t AnimateStrings
- 64.
- 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> *
- 68. :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' })
- 69. :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' })
- 70. :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' })
- 71. CSSOMCSS Object ModelCSSTyped Object Model
- 72. ^ ^ Here is asome 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; };
- 74. 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; };
- 75. 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; };
- 76. 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; };
- 77. 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; };
- 79. 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; };
- 80. 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.
- 83. getComputedStyleMap(elem) // toquery any current value elem.styleMap
- 84. getComputedStyleMap(elem) // toquery 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, notease of use
- 89.
- 91.
- 92.
- 93.
- 94. commit 90b52e847359ae902d3f7ce7bc511cadfbc29ea8 Author: AlexeyProskuryakov <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.
- 97.
- 98.
- 99.
- 101.
- 102. <!doctype html> <div id="myElement"> <divid="child1"></div> <div id="child2"></div> </div> <style> #myElement { width: 500px; height: 500px; display: layout('masonry') } </style> <script> window.layoutWorklet.addModule('masonry.js') </script>
- 103. <!doctype html> <div id="myElement"> <divid="child1"></div> <div id="child2"></div> </div> <style> #myElement { width: 500px; height: 500px; display: layout('masonry') } </style> <script> window.layoutWorklet.addModule('masonry.js') </script>
- 104. <!doctype html> <div id="myElement"> <divid="child1"></div> <div id="child2"></div> </div> <style> #myElement { width: 500px; height: 500px; display: layout('masonry') } </style> <script> window.layoutWorklet.addModule('masonry.js') </script>
- 105. <!doctype html> <div id="myElement"> <divid="child1"></div> <div id="child2"></div> </div> <style> #myElement { width: 500px; height: 500px; display: layout('masonry') } </style> <script> window.layoutWorklet.addModule('masonry.js') </script>
- 106. <!doctype html> <div id="myElement"> <divid="child1"></div> <div id="child2"></div> </div> <style> #myElement { width: 500px; height: 500px; display: layout('masonry') } </style> <script> window.layoutWorklet.addModule('masonry.js') </script>
- 107. <!doctype html> <div id="myElement"> <divid="child1"></div> <div id="child2"></div> </div> <style> #myElement { width: 500px; height: 500px; display: layout('masonry') } </style> <script> window.layoutWorklet.addModule('masonry.js') </script>
- 108. <!doctype html> <div id="myElement"> <divid="child1"></div> <div id="child2"></div> </div> <style> #myElement { width: 500px; height: 500px; display: layout('masonry') } </style> <script> window.layoutWorklet.addModule('masonry.js') </script>
- 109. <!doctype html> <div id="myElement"> <divid="child1"></div> <div id="child2"></div> </div> <style> #myElement { width: 500px; height: 500px; display: layout('masonry') } </style> <script> window.layoutWorklet.addModule('masonry.js') </script>
- 110. <!doctype html> <div id="myElement"> <divid="child1"></div> <div id="child2"></div> </div> <style> #myElement { width: 500px; height: 500px; display: layout('masonry') } </style> <script> window.layoutWorklet.addModule('masonry.js') </script>
- 111. <!doctype html> <div id="myElement"> <divid="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; ...
- 113. // 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; ...
- 114. // 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; ...
- 115. // 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; ...
- 116. // 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.
- 118. it’s about efficiency, notease of use
- 119.
- 120. // 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; ...
- 121. // 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; ...
- 124.
- 125.
- 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>
- 127. <!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>
- 128. <!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>
- 129. <!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>
- 130. <!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>
- 131. <!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>
- 132. <!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>
- 133. <!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 // slightlymodified 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) } } });
- 135. // qr.js // slightlymodified 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) } } });
- 136. // qr.js // slightlymodified 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) } } });
- 137. // qr.js // slightlymodified 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) } } });
- 138. // qr.js // slightlymodified 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) } } });
- 139. // qr.js // slightlymodified 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) } } });
- 140. // qr.js // slightlymodified 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) } } });
- 141. // qr.js // slightlymodified 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) } } });
- 142. // qr.js // slightlymodified 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) } } });
- 143. // qr.js // slightlymodified 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) } } });
- 144. // qr.js // slightlymodified 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) } } });
- 145. // qr.js // slightlymodified 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) } } });
- 147. <!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>
- 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>
- 149. <!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>
- 150. <!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>
- 151. <!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>
- 153. it’s about efficiency, notease of use
- 154.
- 155.
- 156.
- 157.
Editor's Notes
- #56 body { height: 100vh; width: 100vw; background: transparent radial-gradient(at calc(var(--mouse-x, 0) * 100%) calc(var(--mouse-y, 0) * 100%), cornflowerblue, white) no-repeat 0 0; } var root = document.documentElement; document.addEventListener('mousemove', function (evt) { var x = evt.clientX / innerWidth; var y = evt.clientY / innerHeight; root.style.setProperty('--mouse-x', x); root.style.setProperty('--mouse-y', y); })
- #57 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #58 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #59 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #60 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #61 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #62 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #63 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #66 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #67 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #68 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #69 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #70 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #71 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #74 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #75 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #76 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #77 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #78 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #79 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #80 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #81 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #82 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #83 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #84 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #85 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #86 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #87 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #88 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #90 :root { --distance: 400px; } div { width: var(--distance); height: var(--distance); background: cornflowerblue; transition: --distance: 1s; } div:hover { background: green; --distance: 150px; }
- #95 Added to webkit ri in 2008