innerText -> textContent & other modernized DOM methods

assets/js/src/clipboard.js

@@ -14,26 +14,26 @@ if (ClipboardJS.isSupported() && document.querySelector("div.highlight")) {
 
     const button = document.createElement("button");
     button.className = "copy-button";
-    button.innerText = defaultTerm;
+    button.textContent = defaultTerm;
 
     // insert button as a sibling to Hugo's code fence
-    highlightDiv.parentNode.insertBefore(wrapperDiv, highlightDiv);
-    wrapperDiv.appendChild(highlightDiv);
-    wrapperDiv.insertBefore(button, wrapperDiv.firstChild);
+    highlightDiv.before(wrapperDiv);
+    wrapperDiv.prepend(button);
+    wrapperDiv.append(highlightDiv);
   });
 
   // now that all the buttons are in place, bind them to the copy action
   new ClipboardJS("button.copy-button", {
     text: (trigger) =>
       // actual code element will have class "language-*", even if plaintext
-      trimNewlines(trigger.parentElement.querySelector('code[class^="language-"]').innerText),
+      trimNewlines(trigger.parentElement.querySelector('code[class^="language-"]').textContent),
   }).on("success", (e) => {
     // show a subtle indication of success
-    e.trigger.innerText = successTerm;
+    e.trigger.textContent = successTerm;
 
     // reset button to original text after 2 seconds
     setTimeout(() => {
-      e.trigger.innerText = defaultTerm;
+      e.trigger.textContent = defaultTerm;
     }, 2000);
 
     // text needed to be auto-selected to copy, unselect immediately

assets/js/src/contact.js

@@ -3,7 +3,7 @@ import fetch from "cross-fetch";
 
 // don't continue if there isn't a contact form on this page
 // TODO: be better and only do any of this on /contact/
-const contactForm = document.getElementById("contact-form");
+const contactForm = document.querySelector("form#contact-form");
 
 if (contactForm) {
   contactForm.addEventListener("submit", (event) => {
@@ -11,17 +11,17 @@ if (contactForm) {
     event.preventDefault();
 
     // feedback <span>s for later
-    const successSpan = document.getElementById("contact-form-result-success");
-    const errorSpan = document.getElementById("contact-form-result-error");
+    const successSpan = document.querySelector("span#contact-form-result-success");
+    const errorSpan = document.querySelector("span#contact-form-result-error");
 
     // disable the whole form if the button has been disabled below (on success)
-    const submitButton = document.getElementById("contact-form-btn-submit");
+    const submitButton = document.querySelector("button#contact-form-btn-submit");
     if (submitButton.disabled === true) {
       return;
     }
 
     // change button appearance between click and server response
-    submitButton.innerText = "Sending...";
+    submitButton.textContent = "Sending...";
     submitButton.disabled = true; // prevent accidental multiple submissions
     submitButton.style.cursor = "default";
 
@@ -60,7 +60,7 @@ if (contactForm) {
             errorSpan.style.display = "none";
 
             // let user know we were successful
-            successSpan.innerText = "Success! You should hear from me soon. :)";
+            successSpan.textContent = "Success! You should hear from me soon. :)";
           } else {
             // pass on an error sent by the server
             throw new Error(data.message);
@@ -71,16 +71,16 @@ if (contactForm) {
 
       // give user feedback based on the error message returned
       if (message === "USER_INVALID_CAPTCHA") {
-        errorSpan.innerText = "Did you complete the CAPTCHA? (If you're human, that is...)";
+        errorSpan.textContent = "Did you complete the CAPTCHA? (If you're human, that is...)";
       } else if (message === "USER_MISSING_DATA") {
-        errorSpan.innerText = "Please make sure that all fields are filled in.";
+        errorSpan.textContent = "Please make sure that all fields are filled in.";
       } else {
         // something else went wrong, and it's probably my fault...
-        errorSpan.innerText = "Internal server error. Try again later?";
+        errorSpan.textContent = "Internal server error. Try again later?";
       }
 
       // reset submit button to let user try again
-      submitButton.innerText = "Try Again";
+      submitButton.textContent = "Try Again";
       submitButton.disabled = false;
       submitButton.style.cursor = "pointer";
       submitButton.blur(); // remove keyboard focus from the button

assets/js/src/counter.js

@@ -6,7 +6,7 @@ import urlParse from "url-parse";
 const HITS_ENDPOINT = "/api/hits/";
 
 // don't continue if there isn't a span#meta-hits element on this page
-const wrapper = document.getElementById("meta-hits");
+const wrapper = document.querySelector("div#meta-hits");
 
 // page must have both span#meta-hits and canonical URL to enter
 if (wrapper) {
@@ -35,19 +35,19 @@ if (wrapper) {
       wrapper.title = `${hitsComma} ${hitsPlural}`;
 
       // finally inject the hits...
-      const counter = document.getElementById("meta-hits-counter");
+      const counter = document.querySelector("span#meta-hits-counter");
       if (counter) {
-        counter.appendChild(document.createTextNode(hitsComma));
+        counter.append(hitsComma);
       }
 
       // ...and hide the loading spinner
-      const spinner = document.getElementById("meta-hits-loading");
+      const spinner = document.querySelector("div#meta-hits-loading");
       if (spinner) {
-        spinner.style.display = "none";
+        spinner.remove();
       }
     })
     .catch(() => {
       // something went horribly wrong, initiate coverup
-      wrapper.style.display = "none";
+      wrapper.remove();
     });
 }

assets/js/src/dark-mode.js

@@ -2,7 +2,7 @@ import { init as initDarkMode } from "dark-mode-switcheroo";
 
 // HACK: disable theme transition until user's preference is auto-restored (1/2)
 const disableTransitionCSSHack = document.createElement("style");
-document.head.appendChild(disableTransitionCSSHack);
+document.head.append(disableTransitionCSSHack);
 disableTransitionCSSHack.sheet.insertRule(`
   *,
   ::before,
@@ -19,7 +19,7 @@ initDarkMode({
 
     // HACK: re-enable theme transitions after a very short delay, otherwise there's a weird race condition (2/2)
     setTimeout(() => {
-      document.head.removeChild(disableTransitionCSSHack);
+      disableTransitionCSSHack.remove();
     }, 500);
   },
 });

assets/js/src/projects.js

@@ -12,7 +12,7 @@ const PROJECTS_ENDPOINT = "/api/projects/?top&limit=12";
 
 // don't continue if there isn't a span#meta-hits element on this page
 // TODO: be better.
-const wrapper = document.getElementById("github-cards");
+const wrapper = document.querySelector("div#github-cards");
 
 if (wrapper) {
   dayjs.extend(dayjsLocalizedFormat);
@@ -74,13 +74,13 @@ if (wrapper) {
         const div = document.createElement("div");
         div.classList.add("github-card");
         render(template(repo), div);
-        wrapper.appendChild(div);
+        wrapper.append(div);
       });
 
       // we're done, hide the loading spinner
-      const spinner = document.getElementById("loading-spinner");
+      const spinner = document.querySelector("div.loading");
       if (spinner) {
-        spinner.style.display = "none";
+        spinner.remove();
       }
 
       // the repo descriptions were added after the first twemoji parsing
@@ -90,6 +90,6 @@ if (wrapper) {
     })
     .catch(() => {
       // something went horribly wrong, initiate coverup
-      wrapper.style.display = "none";
+      wrapper.remove();
     });
 }

assets/sass/abstracts/_settings.scss

@@ -15,8 +15,9 @@ $webfont-mono-variable: "Roboto Mono var";
 // System fonts:
 // https://markdotto.com/2018/02/07/github-system-fonts/
 // stylelint-disable-next-line value-keyword-case
-$system-fonts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif;
-$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
+$system-fonts-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif,
+  "Apple Color Emoji", "Segoe UI Emoji";
+$system-fonts-monospace: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
 
 // Prefer web fonts with system fonts as backup:
 $font-stack-sans: list.join($webfont-sans, $system-fonts-sans);

assets/sass/abstracts/_themes.scss

@@ -18,7 +18,7 @@
   transition: list.join($addTransitions, $defaults, $separator: comma);
 
   // keep track of the original selector(s) calling this mixin for below
-  $selectors: "#{&}";
+  $selectors: #{&};
 
   // add corresponding body.light and body.dark root selectors
   @each $theme, $map in $themes {