JavaScript #
I have not learnt JavaScript properly. Proceed at your own risk.
Defining functions #
Traditional #
function func(x) {
// ...
}
async function func(x) {
// ...
}
Arrow #
Ref: Arrow function expressions - JavaScript | MDN
return is required for multiple-line arrow functions.
(x, y) => x + y;
(x) => {
// ...
return
};
const func = (x) => x + y;
const func = (x) => {
// ...
return
};
async (x) => {
// ...
}
const func = async (x) => {
// ...
return
};
IIFE (Immediately Invoked Function Expression) #
Ref: IIFE - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
(function () {
// ...
})();
(async function () {
// ...
})();
Snippets #
Add line breaks for dummies #
Ref: CSS word wrap / line break on underscores in addition to whitespace and hyphens - Stack Overflow
(function() {
var i, text, code, codes = document.getElementsByTagName('code');
for (i = 0; i < codes.length;) {
code = codes[i];
if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) {
// add line break before
code.innerHTML = code.innerHTML.replace(/(?<!^|\.|\s)(\.|\(|{|\\|@)/g, '<wbr />\$1');
// add line break after
code.innerHTML = code.innerHTML.replace(/(,|})(?!$|\s)/g, '\$1<wbr />');
// add line breaks around
code.innerHTML = code.innerHTML.replace(/(?<!^|-|\.|\s)(_|-|=|\/)(?!$|\s)/g, '<wbr />\$1<wbr />');
}
i++;
}
})();
Dialog (Modal) on-load #
Ref: Modals Will Never Be The Same - HTML dialog Element
HTML:
<dialog id="dialog" class="modal">
<form method="dialog">
<p>This is a modal which appears immediately at page loading.</p>
<button type="button" id="dialog--confirm">Confirm</button>
<button type="button" onclick="location.href='javascript:history.back()'">Go Back</button>
</form>
<hr />
</dialog>
JS:
document.addEventListener('DOMContentLoaded', function(event) {
const body = document.body;
body.classList.add("modal-open");
const dialog = document.getElementById("dialog");
dialog.show();
const button = document.getElementById("dialog--confirm");
button.addEventListener("click", function(event) {
dialog.close();
body.classList.remove("modal-open");
});
});
Rich link copy button #
Tooltip #
Ref: Building a fully-accessible help tooltip – Sara Soueidan, inclusive design engineer
TBA.