Tasks

• Add favicon & update home title

• 

• Add umami analytics

• Create more readable default order for dev blog

• 

Had been wanting to revamp the site for a while - I really liked the UX of Andy Matuschak's notes & wanted to do something similar. Spent 2 hours this morning building out the layout template & transferring things over. The behaviour itself is 40 lines of js

function applyLinkOpenerBehavior(div) {
  var links = div.querySelectorAll('a');
  links.forEach(function(link) {
    link.addEventListener('click', function() {
      var href = this.getAttribute('href');
      fetch(href)
        .then(response => response.text())
        .then(data => {
          const parser = new DOMParser();
          const doc = parser.parseFromString(data, 'text/html');
          const primary = doc.getElementById('primary').innerHTML;

          const currentContentColumn = this.closest('.ui-content-column');
          const contentColumns = document.querySelectorAll('.ui-content-column');
          contentColumns.forEach(function(contentColumn) {
            // only remove if not the current content column 
            if (contentColumn !== currentContentColumn) {
              contentColumn.remove();
            }
          });

          // create a new div with a class of .ui-content-column 
          var newDiv = document.createElement('div');
          newDiv.classList.add('ui-content-column');
          // put the content of the #primary div inside the new div 
          newDiv.innerHTML = primary;
          // append the new div to the #main-scroller div 
          var mainScroller = document.getElementById('main-scroller');
          mainScroller.appendChild(newDiv); 
          applyLinkOpenerBehavior(newDiv);
        });
      // prevent the default action of the link 
      // add the current url in the url bar 
      window.history.pushState({}, '', href);
      event.preventDefault();
    });
  });
}

Implement horizontal layout

Thinking:

• At some point I should combine Blog & Dev Blog - currently the posts on Blog are pretty out of date. On the other hand I could also just hide the dates altogether - I kind of loathe the idea that a significant amount of the implied value of a post comes from its recency. At the same time, people don't want to see a flat list of posts as it's just a wall of text.

• Idea: What if I break down the posts by month, but remove the year. So posts from March 24 would show alongside posts from March 22.

• Update profile photo

• Clean up/remove some old posts

• Hide year on posts index page

• 

Re-write homepage

• The old copy was out of date and to be honest felt a little too whimsical. So I updated it to something a little more professional

• 

Improvents on mobile projects page

• Prevent images from spilling off the page

• Remove the left date column

• Still to do: Improve display of long completed tasks, improve display of projects table

Thinking: I'm not liking the styling of the dates. The project isn't obvious enough and the left column feels like it needs too much space. It's also not super useful to see the month at the top because there tends to be quite a few posts for each month.

Design/code new style for date/project pills

New Design 👇

Thinking: The font still irks me. Wonder how the one AJ likes (Jakarta) would look

• Switch from Outfit font to Jakarta font

Before

After

Tasks

• Fix roam styling using :has to fix the odd alignment issue

Tasks

• Flesh out low fi design for projects section on websites

  • 

• Set up new streams that haven't been created, and add tags

• Implement layout for new projects page based on wireframe

  • 

• Not happy with the feel at the top of the page - the layout feels wrong. Will return to it and clean it up.