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 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