30:[] 2e:{"title":"Comparing DPRs","cells":[{"id":0,"value":"md`# Comparing DPRs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"md`First, give me an image URL to work with (or just start with the default).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"viewof inputURL = {\n const form = html``;\n const input = form.querySelector('input');\n const button = form.querySelector('button');\n button.addEventListener('click', ( event ) => {\n event.preventDefault();\n fetch('https://source.unsplash.com/random').then( ( response ) => {\n input.value = response.url;\n form.value = response.url;\n form.dispatchEvent(new CustomEvent(\"input\"));\n });\n });\n input.addEventListener( 'input', () => {\n form.value = input.value;\n } );\n form.value = input.value;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"md`(☝️ *or*, click the button to get a new [random image from Unsplash](https://source.unsplash.com))`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"viewof downscaledDPR = {\n const form = html``;\n const input = form.querySelector('input');\n const output = form.querySelector('output');\n const update = () => {\n output.textContent = `${ parseFloat( input.value ) }x`;\n form.value = input.value;\n }\n input.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"images = html`

\n\n

At your screen’s native resolution (DPR ${ window.devicePixelRatio }):

\n\n

Downscaled (DPR ${downscaledDPR}):

\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"{\n if ( firstByteSize && secondByteSize ) {\n return html`

${ Math.round( 10 * firstByteSize / 1000 ) / 10 } KB

${ Math.round( 10 * secondByteSize / 1000 ) / 10 } KB

`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"md`Can you see the difference?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"firstURL = `https://o.img.rodeo/image/fetch/ar_1,c_thumb,g_auto,w_${ Math.round( width * window.devicePixelRatio / 2 ) },q_auto/${ inputURL }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"secondURL = firstURL.replace( /\\,q_auto\\/https/g, `/q_auto,w_${ ( parseFloat( downscaledDPR / window.devicePixelRatio ).toString().match( /\\./ ) ? parseFloat( downscaledDPR / window.devicePixelRatio ).toString() : parseFloat( downscaledDPR / window.devicePixelRatio ).toString() + '.0' ) }/https` )","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"firstByteSize = Generators.observe( notify => {\n if ( 'PerformanceResourceTiming' in window ) {\n const po = new PerformanceObserver( ( list ) => {\n list.getEntriesByName( firstURL ).forEach( entry => {\n if ( 'decodedBodySize' in entry &&\n entry.decodedBodySize > 0 ) {\n notify( entry.decodedBodySize );\n }\n } );\n } ); \n po.observe( { entryTypes: [ \"resource\" ] } );\n return () => po.disconnect();\n }\n} )","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"secondByteSize = Generators.observe( notify => {\n if ( 'PerformanceResourceTiming' in window ) {\n const po = new PerformanceObserver( ( list ) => {\n list.getEntriesByName( secondURL ).forEach( entry => {\n if ( 'decodedBodySize' in entry &&\n entry.decodedBodySize > 0 ) {\n notify( entry.decodedBodySize );\n }\n } );\n } ); \n po.observe( { entryTypes: [ \"resource\" ] } );\n return () => po.disconnect();\n }\n} )","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"html`

styles

`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}