Core lessons

The last few days were comprised of making things. Random little things that I got a lot of pleasure out of. One of which was a small user script when I am on the support forums.

It’s a reply preview thing. It first was because I just wanted to experiment more with vanilla JavaScript. The more and more I tinkered with it, the more I realized that I actually know more than I thought I did. I spent some time perusing the Mozilla docs and it was fun. It was neat to see those things again.

The first attempt was just a simple live preview underneath the reply textarea.

The next step

It worked. That’s what mattered to me for the time being. Suddenly, I had to think about how it would triggered and what it could and should look like. I’m fine making CSS changes but I only wanted this to work with JavaScript.

A tab? But how to style it?

A button? This seemed a little better for the UI.

So, I went with the button method. I tried to see how other elements also worked and they fared well.

Now, the only other thing I may adjust is the behavior of the other buttons when the preview is enabled but for now I’m happy with it.

Another random thing

I did create one other thing but I think that was more of a last week thing. It’s something I’m using only on GitHub notifications pages but it works for me right now. Most of that can be found in the repo I made. I do have to update it a little because there are a few things I know I missed.

One thing I didn’t take into account was for when you are on the singular project notifications page there is one other type of notification. I originally began with the mindset of only two.

  • Issue notifications
  • Pull request notifications

Each one of those gets one and the third one I hadn’t noticed was the

  • Commit notifications

I adjusted things and it works. Though, now I have to update the repo to reflect that change. I’ll try and get it done over the weekend. I had fun breaking the console when I was making it too. Being able to use ES6 was a super welcome change too.¬†

const handleClick = ({target}) => {
  // query select all that match.
  const notificationList = 
  target.parentElement.parentElement.querySelectorAll(`.${target.selector}`);

  // toggle the display property for them all.
  notificationList.forEach(function(item) {
    item.style.display = item.style.display === 'none' ? '' : 'none';
  });
}

The snippet shows a few things. It doesn’t check for existence of the only because this is done beforehand. What’s currently in the repo is not the above. I had to modify it because I was repeating a little and it made more sense to do it programmatically. Previously I was using an if/else¬†statement block checking for a string match. Not the greatest if more things were added. I don’t want to be adding another to the already big block:

if (target.id.includes('something')) {
  // run code
} else if (target.id.includes('something-else')) {
  // another block
} else {
  // finally!
}

The one thing that did keep me motivated was seeing it work. I do like to build and make these little things but I think I will always fallback to support though. I added a few more replies to my small list of replies over the week as well.

Current count is around four thousand. I think in the next month I want to increase that. Maybe shoot for five. We’ll see, I guess.

Either that or just post a small series on how to better my JavaScript skills