| <style>/*Dwitter Shim by Frank Force 2020 - MIT License (https://codepen.io/KilledByAPixel/pen/YzyyOEr)*/*{box-sizing:border-box;margin:0}textarea,iframe{width:100%;height:50vh}</style> | |
| <script>let shim=`<canvas id=c width=1920 height=1080></canvas><script>u=t=>{z} | |
| let time = frame = nextFrameMs = 0 | |
| ,FPS = 60 | |
| ,x = c.getContext("2d") | |
| ,S = Math.sin | |
| ,C = Math.cos | |
| ,T = Math.tan | |
| ,R = (r,g,b,a=1) => "rgba("+[r|0,g|0,b|0,a]+")" | |
| ,loop = frameTime => { |
Source: https://xem.github.io/codegolf/minidwitter.html
<body onload='t=0;x=c.getContext`2d`;with(Math)S=sin,C=cos,T=tan;R=(r,g,b,a=1)=>`rgba(${[r|0,g|0,b|0,a]})`;setInterval("eval(A.value);t+=.016",16)'><canvas id=c width=1920 height=1080 style=width:5in></canvas><br><textarea id=A cols=60 oninput=t=0>
for(i=0;i<65;i++)for(j=0;j<65;j++)x.fillStyle=R(i*9,j*9,C(t)*255),x.fillRect(900+400*S((i+t/9)*3)*C((j+t/9)*1.5),500+400*S((j+t/9)*1.5),5,5)
This is by no means, a reliable code minifier. It makes several assumptions and treats ALL common code characters (i.e. brackets, parenthesis, operators, etc.) as "code" such that if you are writing text as example code, that will get minified.
The general assumption is you will be writing purely code and not English trying to explain code.
I found other solutions but they were isolated by their languages. i.e. HTML minifier, CSS minifier, & JavaScript terser.
There wasn't one single solution and I didn't want something very complicated since I'm making my code smaller by hand anyway.
| <p id=o></p> | |
| <script> | |
| /* | |
| Sources: | |
| * https://manu.ninja/using-the-speech-synthesis-interface-of-the-web-speech-api/ | |
| * https://css-tricks.com/using-the-web-speech-api-for-multilingual-translations/ | |
| * https://www.zeolearn.com/magazine/the-new-speech-synthesis-web-api | |
| */ | |
| let syn = speechSynthesis; |
| <style> | |
| .my-modal:target { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .my-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> | |
| <style> | |
| a { text-decoration: none } | |
| ul { margin-bottom: 0 } | |
| </style> | |
| <div class="container mt-2"> | |
| <div class="justify-content-between d-flex"> | |
| <input id="searchField" type="text" class="form-control w-100 mb-2" placeholder="Search..." oninput="render()"/> |
| <!doctype html> | |
| <head> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> | |
| </head> | |
| <style> | |
| .notify { | |
| position: fixed; | |
| top: -5rem; | |
| left: 20%; | |
| width: 60%; |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>ACE in Action</title> | |
| <style type="text/css" media="screen"> | |
| /* | |
| #editor { | |
| position: absolute; | |
| top: 0; | |
| right: 0; |
I was really curious about implementing the Matrix Digital Rain effect and looked at many implementations.
The best implementation I saw was Digital Rain by javascriptacademy.
I think the others were a little overly complicated.
Naturally, I had to code golf it and make it work in an address bar:
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> | |
| <div class="container my-4"> | |
| <h1>❌ Canceling Plans Excuse Generator</h1> | |
| <div class="card card-body p-4 m-4"> | |
| <div id="o"></div> | |
| </div> | |
| <div class="text-center my-3"> |