31:T625,{ const bytesError = sign( error.bytes.absolute ) + prettyBytes( Math.abs( error.bytes.absolute ) ) + ` (${ Math.round( Math.abs( error.bytes.percent ) * 100 ) }%)`, timeError = sign( error.milliseconds.absolute ) + prettyTime( Math.abs( error.milliseconds.absolute ) ) + ` (${ Math.round( Math.abs( error.milliseconds.percent ) * 100 ) }%)`, serverTimeError = sign( error.milliseconds.accountingForServerTime.absolute ) + prettyTime( Math.abs( error.milliseconds.accountingForServerTime.absolute ) ) + ` (${ Math.round( Math.abs( error.milliseconds.accountingForServerTime.percent ) * 100 ) }%)`, bytesExpectedUnder = !adapting && error.bytes.absolute < 0, timeExpectedUnder = !adapting && error.milliseconds.accountingForServerTime.absolute < 0; return html` We missed our filesize budget by ${ bytesError }${ ( bytesExpectedUnder ? ', but that’s OK because we weren’t adapting to network conditions.' : '.' ) }

We missed our time budget by ${ timeError }. Accounting for server time, we missed it by ${ serverTimeError }${ ( timeExpectedUnder ? ', but that’s OK because we weren’t adapting to network conditions.' : '.' ) }

` }32:[] 2f:{"title":"Tailoring images to fit time and filesize budgets","cells":[{"id":0,"value":"md`# Tailoring images to fit time and filesize budgets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"viewof timeBudget = {\n const form = html`\n \n `;\n const update = () => { form.value = form.input.value };\n form.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof rtt = {\n const form = html`\n \n `;\n const update = () => { form.value = form.input.value };\n form.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"viewof dimensions = {\n const form = html`\n \n `;\n const update = () => { form.value = { w: form.w.value, h: form.h.value }; };\n form.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`**Estimated bandwidth:** ${ prettyBits( (bandwidthFromRTT(rtt) * 1000)/8 ) }/second`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`**Filesize budget:** ${ prettyBytes( bytesBudget ) }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"adapting = !( adapted.quality == max_quality && adapted.scale == 1 )","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"adapted = ({\n quality: quality(bppp),\n scale: scale(bppp)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"loaded = {\n return new Promise( ( resolve, reject ) => {\n const po = new PerformanceObserver( ( list, obj ) => {\n for ( const entry of list.getEntriesByName( src ) ) {\n resolve( { \n milliseconds: entry.duration,\n bytes: entry.encodedBodySize,\n serverTiming: entry.serverTiming.map( st => [ st.name, st.duration, st.description ] ),\n serverMilliseconds: Math.round( entry.responseStart - entry.requestStart - entry.serverTiming.find( x => x.name === 'rtt' ).duration )\n } );\n }\n } );\n po.observe( { entryTypes: [\"resource\"] } );\n } );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"[ fetchedImage.bytes, fetchedImage.serverTiming ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"error = ({\n bytes: { \n absolute: loaded.bytes - bytesBudget,\n percent: (loaded.bytes - bytesBudget) / bytesBudget\n },\n milliseconds: { \n absolute: loaded.milliseconds - timeBudget,\n percent: (loaded.milliseconds - timeBudget) / timeBudget,\n accountingForServerTime: {\n absolute: loaded.milliseconds - loaded.serverMilliseconds - timeBudget,\n percent: ( loaded.milliseconds - loaded.serverMilliseconds - timeBudget ) / timeBudget\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"src = `https://o.img.rodeo/c_fill,g_auto,ar_${ dimensions.w }:${ dimensions.h }/w_${ dimensions.w },h_${ dimensions.h }/q_${ adapted.quality },w_${ cloudyScale( adapted.scale ) },fl_progressive,fl_lossy/dogs/2?contentDPR=${ adapted.scale }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"fetchedImage = {\n const response = await fetch( src, { cache: 'no-cache' } ),\n blob = await response.blob(),\n objectURL = URL.createObjectURL( blob ),\n bytes = parseInt( response.headers.get( 'content-length' ) ),\n serverTiming = parseInt( response.headers.get( 'server-timing' ) ),\n img = new Image;\n img.setAttribute( 'style', `width: ${ dimensions.w }px;` )\n img.src = objectURL;\n img.bytes = bytes;\n img.serverTiming = serverTiming;\n return img\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewof XbytesBudget = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"bytesBudget = {\n const bandwidth = bandwidthFromRTT(rtt) / 8; // kilobits/second => bytes/millisecond\n return bandwidth * ( timeBudget - rtt ) // all bytes and milliseconds, yay\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"max_quality = 95","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"bppp = ( bytesBudget * 8 ) / ( dimensions.w * dimensions.h )","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"bandwidthFromRTT = (rtt) => 6119.2 * Math.pow( Math.E, ( -0.0042 * rtt ) )","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"scale = (bppp) => {\n const x = Math.round( 100 * ( 0.2006 * Math.log( bppp ) + 0.9467 ) ) / 100;\n return ( x > 1 ? 1 : x );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"quality = ( bppp ) => {\n const regression = bppp => Math.round( -12.373 * Math.pow(bppp, 2) + 64.681 * bppp + 6.3629 ),\n max_bppp = (-64.681 + Math.sqrt( Math.pow( 64.681, 2 ) - 4 * -12.373 * (6.3629 - max_quality)))/(2 * -12.373);\n \n return ( bppp > max_bppp ? max_quality : regression(bppp) );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"prettyBytes = function( bytes ) {\n if ( Math.abs( bytes ) < 1000 ) {\n return `${ Math.round( bytes ) } B`;\n } else if ( Math.abs( bytes ) < 1000000 ) {\n return `${ Math.round( bytes / 100 ) / 10 } kB`\n } else {\n return `${ Math.round( bytes / 100000 ) / 10 } MB`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"prettyBits = function( bytes ) {\n const bits = bytes * 8;\n if ( Math.abs( bits ) < 1000 ) {\n return `${ Math.round( bits ) } b`;\n } else if ( Math.abs( bits ) < 1000000 ) {\n return `${ Math.round( bits / 100 ) / 10 } kb`\n } else {\n return `${ Math.round( bits / 100000 ) / 10 } Mb`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"prettyTime = function( ms ) {\n if ( ms < 1000 ) {\n const milliseconds = Math.round( ms );\n return `${ milliseconds } millisecond${ ( milliseconds !== 1 ? 's' : '' ) }`;\n } else {\n const seconds = Math.round( ms / 100 ) / 10;\n return `${ seconds } second${ ( seconds !== 1 ? 's' : '' ) }`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"cloudyScale = (float) => {\n if ( float.toString().match( '\\\\.' ) === null ) {\n return `${float}.0`\n } else {\n return float.toString()\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"sign = ( number ) => {\n if (number === 0) { return ''; }\n else {\n return ( number > 0 ? '+' : '-' );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}