Kobe

// max-INP:
(()=>{let o=globalThis;return void 0===o.winp&&(o.winp=0,new PerformanceObserver(n=>{for(let e of n.getEntries()){if(!e.interactionId)continue;o.winp=Math.max(e.duration,o.winp);let r=o=>o<=200?"color: green":o<=500?"color: yellow":"color: red";console.log(`%c[Interaction: ${e.name.padEnd(12)}] %cDuration: %c${e.duration}`,"color: grey; font-family: Consolas,monospace","",r(e.duration))}}).observe({type:"event",durationThreshold:0,buffered:!0})),o.winp})();

// interactionCount
performance.interactionCount;

Kobe

---
- name: Install MacOS Packages
  hosts: localhost
  become: false
  vars:
    brew_cask_packages:
      - 'atom'
      - 'docker'
      - 'dropbox'
      - 'firefox'

Kobe

#OS X Movie to animated GIF

ffmpeg -i movie-name.mp4 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=0 --delay=3 > movie-name.gif

##Options

• -r 10 tells ffmpeg to reduce the frame rate from 25 fps to 10
• -s 600x400 tells ffmpeg the max-width and max-height

Kobe

$elementSeparator: '__';
$modifierSeparator: '--';

@function containsModifier($selector) {
    $selector: selectorToString($selector);
    @if str-index($selector, $modifierSeparator) {
        @return true;
    } @else {
        @return false;
    }

Kobe

// Mixins for generating Block Element Modifier (BEM) class names.
// See https://css-tricks.com/snippets/sass/bem-mixins/
// They can be nested to produce meaningful classes.
// To create a descendant selector like `.block--modifier .block__element`
// the block needs to be repeated. For example:
// +block(some-block)
//
//   +element(some-element)
//     color: red
//

Kobe

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

Kobe

<FilesMatch "\.(txt|log|xml|css|js|gz)$">
    Header set X-Robots-Tag "noindex"
</FilesMatch>

Kobe

location ~* \.(txt|log|xml|css|js|gz)$ {
    add_header X-Robots-Tag noindex;
}

Kobe

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
	RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
	Header append Vary Accept env=REDIRECT_accept
</IfModule>