WebDev Building Blocks

My personal cheatsheet, some sort.



HTML

HTML5 Trigger

1
2
3
4
5
<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

UTF-8 Encoding Trigger

<meta charset="UTF-8">

Favicon

<link rel="icon" href="logo.png" type="image/x-icon">

Responsive Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<a href="nya.html" target="_blank">the link</a>

Javascript

GET

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
        .substr(1)
        .split("&")
        .forEach(function (item) {
            tmp = item.split("=");
            if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        });
    return result;
    }

Fetch

async function getFetch(){
    var uri = "URI"
    const response = await fetch(uri, {method:'GET'});
    json await response.json()

    var data = new FormData()
    data.append('a','b')
    fetch(uri, {method:'POST', body:data,}).then(data => {
        data.text().then(function (result){
            console.log(result)
        })
    })
}


Loop

1
2
3
4
5
6
7
8
data.forEach(iter)
function iter(value, index, array){
    //do something
}

for (i = 0; i < this.length; i++) {
    //do something
 }

DOM Manipulation

1
2
3
4
5
6
7
8
var m = document.getElementById('m')
var c = document.createElement('div')
var s = document.querySelector('#s')
m.innerHTML = ""
c.classList.add('nyaa')
c.setAttribute('onclick','show()')
m.appendChild(c)
m.focus()

DOM Events

m.onclick = () => { doSomething()}

Array Sort

1
2
3
var tnode = []
tnode.push(something)
tnode.sort((a,b) => b.replies - a.replies)

Redirects

1
2
3
4
//Pop up a new tab
window.open("t.html?", '_blank').focus();
// Simulate a mouse click:
window.location.href = "http://www.abc.com";

Local Storage

1
2
3
var value = localStorage.getItem('key')
localStorage.setItem('key','value')
localStorage.removeItem('key')

Variable Declaration

var hash = 0, i, chr;

Alert

var pw = prompt("Input password")

RNG

var uid = Math.floor(Math.random() * 100000);

JSON

var c = JSON.parse(data)
var d = JSON.stringify(c)

Date Time

var today = new Date();
var time = today.getHours() + ":" + today.getMinutes()

Force Scrolldown

window.scrollTo(0, document.body.scrollHeight);

Try Catch

1
2
3
4
5
6
7
8
9
//i
try {
    //so hard
    //and got so far 
}
catch(err){
    //but in the end
    //it doesn't even matter
}

String

1
2
3
s.includes("substring")
let result = text.replace("a", "b");
let result = text.replace(/blue/g, "red");

Keypress Detection

1
2
3
4
5
6
domElement.addEventListener('keypress', (e) => {
    if (e.keyCode === 13) {
        e.preventDefault();
        doSomething();
    }
})

Logout Detection

1
2
3
4
5
window.addEventListener('beforeunload', (event) => {
    //do something
    event.preventDefault();
    event.returnValue = '';
})

Javascript 3rd Party Library

Gun

1
2
3
4
5
6
gun = Gun(['gunserver1uri', 'gunserver2uri']);
copy = gun.get('key1').get('key2')
copy.on((data) => {
    console.log(data)
})
copy.put(null)
Edit
Pub: 12 Aug 2022 03:20 UTC
Edit: 14 Aug 2022 13:20 UTC
Views: 170