JSFiddle

  • Safe paddings

    No-Library (pure JS), HTML, CSS, JavaScript

    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    
    <div id="main">
      <h1>Hello Notch!</h1>
    </div>
    
  • centering

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="outer">
      <div class="left"></div><div class="inner">Hello</div>
    </div>
  • %→px by getComputedStyle

    No-Library (pure JS), HTML, CSS, JavaScript

    const el = document.querySelector('.box')
    const styles = getComputedStyle(el)
    
    document.querySelector('.padding').textContent = 'padding left: ' + styles.paddingLeft
  • div.scrollTop

    No-Library (pure JS), HTML, CSS, JavaScript

    const el = document.querySelector('.outer')
    el.onscroll = _ => {
    	console.log(el.scrollTop)
    }
  • scrollTop #13 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var elHtmlTop = document.querySelector('.html-scrollTop');
    var elBodyTop = document.querySelector('.body-scrollTop');
    var elScrollingTop = document.querySelector('.scrolling-scrollTop');
    
    document.onscroll = updateTop;
    updateTop();
    
    function ...
  • Web Font Loader over about:blank

    No-Library (pure JS), HTML, CSS, JavaScript

    const iframe = document.querySelector('#iframe')
    const w = iframe.contentWindow
    const d = iframe.contentDocument
    
    const script = document.createElement('script')
    script.src ...
  • split array into chunks

    No-Library (pure JS), HTML, CSS, JavaScript

    // the size of each chunk
    const chunkSize = 30
    
    // prepare: create the original array
    const originalSize = 127
    const original = []
    for (let ...
  • App Template

    No-Library (pure JS), HTML, CSS, JavaScript

    <h1>Hello World!</h1>
    <button>Press me</button>
  • Rendering while loading fonts

    No-Library (pure JS), HTML, CSS, JavaScript

    const fontFamily = 'Pinyon Script';
    const cssUrl = 'https://fonts.googleapis.com/css?family=Pinyon+Script';
    const elLoad = document.querySelector('#load');
    const ...
  • compare 2 canvases

    No-Library (pure JS), HTML, CSS, JavaScript

    const canvas1 = document.querySelector('#canvas1')
    const data1 = drawSomething(canvas1)
    const canvas2 = document.querySelector('#canvas2')
    const data2 = drawSomething(canvas2)
    
    const startedAt ...