nucliweb

p5js - 3D Spikey Plane Ball

Testing 3D plane creation in p5js

A Pen by Kultur Design on CodePen.

License.

nucliweb

/* 
  A full list of simple easing equations inspired by GIST from greweb - https://gist.github.com/gre/1650294
  Equations source - http://gsgd.co.uk/sandbox/jquery/easing/
*/

{
  linear: function(t) {
    return t
  },
  inQuad: function(t) {

nucliweb

function getAverageColourAsRGB (img) {
  var canvas = document.createElement('canvas'),
      context = canvas.getContext && canvas.getContext('2d'),
      rgb = {r:102,g:102,b:102}, // Set a base colour as a fallback for non-compliant browsers
      pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel
      count = 0,
      i = -4,
      data, length;

  // return the base colour for non-compliant browsers

nucliweb

<css-doodle>
   :doodle {
      @grid: 20x1 / 60vmin;
      overflow: hidden;
    }
    :container {
      transform: scale(25);
      filter: @svg-filter(<svg>
        <filter>
          <feTurbulence baseFrequency="@r(.016, .056, .001)" seed="@r(100)" numOctaves="@r(8, 15)" />

nucliweb

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>

nucliweb

[lcp]
const po = new PerformanceObserver(() => {});
po.observe({type: 'largest-contentful-paint', buffered: true});
const lastEntry = po.takeRecords().slice(-1)[0];
return lastEntry.renderTime || lastEntry.loadTime;

[cls]
const po = new PerformanceObserver(() => {});
po.observe({type: 'layout-shift', buffered: true});
return po.takeRecords().reduce((val, entry) => val + entry.value, 0);

nucliweb

by Addy Osmani (@addyosmani)
https://twitter.com/addyosmani/status/743571393174872064

———

Preresolve DNS hostnames for assets
<link rel="dns-prefetch" href="https://my-site.com">

Begin a connection handshake in the background
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

nucliweb

#!/bin/bash
set -x #echo on
remote_url=$(git config --get remote.origin.url)
for branch in $(git branch --all | grep '^\s*remotes' | egrep --invert-match '(:?HEAD|master)$'); do
		branch_name=$(echo $branch| cut -d'/' -f 3)
    git clone -b $branch_name $remote_url $branch_name
done

nucliweb

/**
 * A bookmarklet for viewing shifted elements while debugging
 * Cumulative Layout Shift (web.dev/cls). Works in Chrome 84+
 * Shows the previous position of shifted elements in yellow,
 * and the new position in red.
 *
 * To install:
 * 1. Copy the code starting from the line beginning `javascript:`
 * 2. Add a new bookmark in Chrome, and paste the code in as the URL.
 **/

nucliweb

Convert MP4 file to animated WEBP file in ffmpeg CLI

1. Install ffmpeg CLI through homebrew

In terminal.app, install ffmpeg through homebrew

brew install ffmpeg

Validate the installation: