Snippet Zone

Escape HTML

const el = document.createElement('div')

const txt = document.createElement('textarea')

txt.innerHTML = '&times; &copy; <script>alert("bang!")<\/script>'

```
el.innerText = txt.innerText
```
```
document.body.appendChild(el)
```
```
 
```

const theHtml = document.createElement('div')

```
theHtml.innerText = txt.innerHTML
```
```
document.body.appendChild(theHtml)
```

Just a hack to escape html strings… guessing most would use a lib for this…

February 21, 2022

// html // strings // tricks

CSS Checkbox

```
<div class="toggle">
```

  <input class="check" type="checkbox" tabindex="0">

```
  <label></label>
```
```
</div>
```
```
 
```
```
<style>
```
```
  .toggle {
```
```
    position: relative;
```
```
  }
```
```
  .check {
```
```
    position: absolute;
```
```
    width: 3rem;
```
```
    height: 3rem;
```
```
    margin: 0;
```
```
    opacity: 0;
```
```
    cursor: pointer;
```
```
  }
```
```
  label {
```
```
    position: absolute;
```
```
    pointer-events: none;
```
```
    content: '';
```
```
    width: 3rem;
```
```
    height: 3rem;
```
```
    background: black;
```
```
    cursor: pointer
```
```
  }
```
```
  .check:checked + label {
```
```
    background: red;
```
```
  }
```
```
</style>
```

Quick css checkbox. I used to do this all the time and feel like maybe there was a better way… anyway, this is what I did to get it working fast…

February 16, 2022

// css // html // ui

Repeatedly Refresh Webpage

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
<head>
```
```
  <meta charset="UTF-8">
```

  <meta http-equiv="refresh" content="2">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

```
  <title>Title</title>
```
```
</head>
```
```
<body>
```
```
  <script>
```

    document.body.innerHTML = Math.random() * 100;

```
  </script>
```
```
</body>
```
```
</html>
```

Refresh a webpage every two seconds with:

```
<meta http-equiv="refresh" content="2">
```

January 16, 2022

// hacks // html

Select All Text contentEditable

```
<div style="border:solid 1px #D31444"
```
```
     contenteditable="true"
```

     onclick="document.execCommand('selectAll', false, null)">some text...</div>

When clicking on an editable node, select all existing text…

Quick test version…

```
document.body.innerHTML += `
```

  <div id="el" style="border:solid 1px #D31444"

    contenteditable="true">some text...</div>`

```
 
```
```
el.addEventListener('click', () => {
```

  document.execCommand('selectAll', false, null)

```
})
```

December 24, 2021

// html // javascript // tricks // ui

Martin Kleppe’s Golfed Blobs Quine

<pre id=p style=background:#000><svg onload='setInterval(f=n=>

{for(t++,o=i=1;i++<476;o+=i%30?([(f+"")[i%195],"o"][c=0|(h=v=>

(M=Math).hypot(i/30-8+3*M.sin(t/8/v),i%30/2-7+4*M.cos(t/9/v)))

(7)*h(9)*h(6)/52]||".").fontcolor(c?c>2:n):"\n");p.innerHTML=o},t=1)'>

Great golfed snippet from Martin Kleppe – can’t wait to fork it… 😀

This was updated a bit later to be even smaller:

<body onload='setInterval(f=n=>{for(t++,o=i=1;i++<476;o+=i%30?([(f+f)[i],"o"][c=0|(h=v=>(M=Math).hypot(i/30-7+3*M.sin(t/8/v),i%30/2-7+4*M.cos(t/9/v)))(7)*h(9)*h(6)/52]||".").fontcolor(c?c>2:n):"\n");p.innerHTML=o},t=1)'bgcolor=X><pre id=p>

December 22, 2021

// dom // golfed // graphics // hacks // html // humor // javascript // math // strings // tricks

Older Posts

Newer Posts

Escape HTML

CSS Checkbox

Repeatedly Refresh Webpage

Select All Text contentEditable

Martin Kleppe’s Golfed Blobs Quine

Recent

Archive