smpnjn

<script id="snoise-function" type="x-shader/x-vertex">
    vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
    vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
    vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }

    float snoise(vec2 v) {
        const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
                            0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
                            -0.577350269189626,  // -1.0 + 2.0 * C.x
                            0.024390243902439); // 1.0 / 41.0

smpnjn

    // Lets create a rendering process
    const renderer = new THREE.WebGLRenderer();
    // And make it full screen
    renderer.setSize( window.innerWidth, window.innerHeight );
    // And append it to the body. This is appending a <canvas /> tag
    document.body.appendChild( renderer.domElement )
    
    // Then lets create the scene and camera
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

smpnjn

    // we have two variables that we will use to generate the warp of the sheet
    let t = 0;
    let j = 0;
    // We will set x and y as random integers
    let x = randomInteger(0, 32);
    let y = randomInteger(0, 32);
    const animate = function () {
        // This function is the animation, so lets request a frame
        requestAnimationFrame( animate );

smpnjn

<div class="shredded-paper">
  <div class="content">
    <div class="alert">
      CONFIDENTIAL
    </div>
  </div>
  <div class="shred-me">
    Shred.
  </div>
</div>

smpnjn

document.addEventListener('DOMContentLoaded', function(e) {
    // Lets just call out the elements we want to focus on
    const mainEl = '.shredded-paper';
    const repeatUnit = '.shredded-paper .content';
    const repeatNum = 10; // And this is how many times we want the element to be repeated
    
    for(let i = 0; i < repeatNum; ++i) {
        // We will create a new element for every repeatNum
        let newEl = document.createElement('div');
        newEl.innerHTML = document.querySelector(repeatUnit).innerHTML;

smpnjn

.shredded-paper.animate { animation: shredShake 0.12s 26 0.3s; }
.shredded-paper.animate > div[class^='item-']:nth-of-type(2n) { animation: Animation1 3.6s 1 forwards 1s, shredGo 3.6s 1 forwards; }
.shredded-paper.animate > div[class^='item-']:nth-of-type(2n-1) { animation: Animation2 3.6s 1 forwards 1s, shredGo 3.6s 1 forwards; }
.shredded-paper.animate .content { animation: cover 3.6s 1 forwards; }

@keyframes shredGo {
	10% { top: 20px; }
	12% { top: 15px; }
	30% { top: 150px; }

smpnjn

let defineUser = {
  name: "Markus",
  age: 29,
  location: {
    country: "USA"
  }
}

if(typeof defineUser.location !== "undefined" && typeof defineUser.location.address !== "undefined") {
  console.log(defineUser.location.address);

smpnjn

/* 
  Don't limit yourself, all of these work:
  obj.val?.prop
  obj.val?.[expr]
  obj.arr?.[index]
  obj.func?.(args)
*/

let defineUser = {
  name: "Markus",

smpnjn

// Two promises
const server1 = await import('https://get.useastserver.com/js/majorFile.js');
const server2 = await import('https://get.euserver.com/js/majorFile.js');

// First one that resolves will be used.
// If it rejects instead, it will be ignored.
Promise.any([server1, server2]);

smpnjn

let foo = '';

let a = (3 - 3) || "this is falsy";   // returns "this is falsy" - 3 - 3 = 0 which is falsy
let b = (3 - 3) ?? "this is nullish"; // returns 0 - 3 - 3 = 0 which is not null or undefined
let c = foo || "this is falsy";       // returns "this is falsy" - since '' is falsy
let d = foo ?? "this is nullish";     // returns '' - since '' is not null or undefined