WebDev Building Blocks My personal cheatsheet, some sort. HTML HTML5 Trigger UTF-8 Encoding Trigger Favicon Responsive Viewport Link in New Tab Javascript GET Fetch Loop DOM Manipulation DOM Events Array Sort Redirects Local Storage Variable Declaration Alert RNG JSON Date Time Force Scrolldown Try Catch String Keypress Detection Logout Detection Javascript 3rd Party Library Gun HTML HTML5 Trigger ⎗ ✓ 1 2 3 4 5<!DOCTYPE html> <html> <head></head> <body></body> </html> UTF-8 Encoding Trigger ⎗ ✓ 1<meta charset="UTF-8"> Favicon ⎗ ✓ 1<link rel="icon" href="logo.png" type="image/x-icon"> Responsive Viewport ⎗ ✓ 1<meta name="viewport" content="width=device-width, initial-scale=1.0"> Link in New Tab ⎗ ✓ 1<a href="nya.html" target="_blank">the link</a> Javascript GET ⎗ ✓ 1 2 3 4 5 6 7 8 9 10 11 12function 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 ⎗ ✓ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15async 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 8data.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 8var 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 ⎗ ✓ 1m.onclick = () => { doSomething()} Array Sort ⎗ ✓ 1 2 3var 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 3var value = localStorage.getItem('key') localStorage.setItem('key','value') localStorage.removeItem('key') Variable Declaration ⎗ ✓ 1var hash = 0, i, chr; Alert ⎗ ✓ 1var pw = prompt("Input password") RNG ⎗ ✓ 1var uid = Math.floor(Math.random() * 100000); JSON ⎗ ✓ 1 2var c = JSON.parse(data) var d = JSON.stringify(c) Date Time ⎗ ✓ 1 2var today = new Date(); var time = today.getHours() + ":" + today.getMinutes() Force Scrolldown ⎗ ✓ 1window.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 3s.includes("substring") let result = text.replace("a", "b"); let result = text.replace(/blue/g, "red"); Keypress Detection ⎗ ✓ 1 2 3 4 5 6domElement.addEventListener('keypress', (e) => { if (e.keyCode === 13) { e.preventDefault(); doSomething(); } }) Logout Detection ⎗ ✓ 1 2 3 4 5window.addEventListener('beforeunload', (event) => { //do something event.preventDefault(); event.returnValue = ''; }) Javascript 3rd Party Library Gun ⎗ ✓ 1 2 3 4 5 6gun = Gun(['gunserver1uri', 'gunserver2uri']); copy = gun.get('key1').get('key2') copy.on((data) => { console.log(data) }) copy.put(null)