How to fix the titles of (most) Launch School webpages

fixLaunchSchoolTitles.md

How to fix the titles of (most) Launch School webpages

TL;DR: install this script to auto-correct the text assigned to the <title> tag on Launch School study pages

I use bookmarking sites like Pinboard, Notado and Instapaper a lot from within my browser. These sites usually auto-populate metadata, including the title of the page that is being saved or added to their internal database.

Unfortunately, Launch School pages all have the same identical <title> tag applied to them: "Launch School - An Online School for Software Engineers". This makes finding the precise page you need at a subsequent date pretty difficult. All the pages have the same name and the URLs are random character strings so those don't help either.

Now that I'm towards the end of the Core syllabus, I have learned about the DOM, and this enabled me to write a very simple script that runs while I'm using the Launch School website.

Anyone who's made their way to JS230 will be able to understand what's going on here. I simply take the text contents of the relevant <h1> tag and assign that to the text content of the page's <title> tag. It only operates on pages with the /lessons/, /courses/ or /posts/ path, since those are really the only ones we care about.

I ran into an issue in that the Launch School site reloads the <div> with the class container when you click a link, instead of reloading / refreshing the entire page. I couldn't figure out the exact event that I was supposed to be adding in an event listener, but this snippet from Stack Overflow was the fix that I wanted and solves the problem.

In any case, this is the script:

// ==UserScript==
// @name         LaunchSchool Titles
// @namespace    https://launchschool.com/
// @match        https://launchschool.com/*

// ==/UserScript==
(function() {
  var proxied = window.XMLHttpRequest.prototype.send;
  window.XMLHttpRequest.prototype.send = function() {
    var pointer = this
    var intervalId = window.setInterval(function(){
      if (pointer.readyState != 4){
        return;
      } else if (location.href.startsWith('https://launchschool.com/courses/') || location.href.startsWith('https://launchschool.com/lessons/')) {
        document.querySelector('title').textContent = `${document.querySelectorAll('h1')[1].textContent} - Launch School`;
      } else if (location.href.startsWith('https://launchschool.com/posts/')) {
        document.querySelector('title').textContent = `${document.querySelector('div.title').textContent.trim()} - Launch School`;
      }

    }, 1); // I found a delay of 1 to be sufficient; modify it as you need.
    return proxied.apply(this, [].slice.call(arguments));
  };


})();

You should install the Tampermonkey extension (works for all major browsers) and then add this as a new userscript from within the settings dashboard. It'll work only on Launch School pages and ignore everything else.