karmi

# ------------------------------------------------------------------
# Desigining "trending topics in 24 hours sliding window" with Redis
# ------------------------------------------------------------------

redis-cli del tophashes:2010-12-07-08-00
redis-cli del tophashes:2010-12-07-09-00
redis-cli del tophashes:current

echo '=== 8:00 AM ==='

phloe

The following outlines a technique combining floating blocks and inline-blocks allowing for fairly interesting layouts without the need to use nested rows and avoids some problems when using pure floats.

The technique itself only uses three classnames:

• combine-layout - defines the containing element.
• break - starts a new row when in floating block context.
• divide - starts off the inline-block context.

phloe

TL;DR

<img src="/path/to/foo-320w-240h-1x.jpg" width="320" height="240"
    srcoptions="/path/to/foo-{width}-{height}-{dpr}.{format},
    320w 480w 640w, 1x 1.33x 2x, webp jpg"/>

• DRY - Expose url pattern and avaliable options for images - not full urls - in markup. Browser picks best options - builds url.
• Responsive images need CSS to get layout. Browser preloading is a pre-RWD optimization. Preloading doesn't make sense with upcoming postpone and lazyload attributes anyway.
• Client Hints can't be used exclusively. Has server requirement and needs alt. way of handling CH - anyway - when server req. can't be met.

DaBs

var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' + 
          'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 || true;};for (let vre of a()) {' +
          'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' + 
          ': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));';

try {
  eval(str);
} catch(e) {
  alert('Your browser does not support ES6!')
}