Jeremy Aalders’ Blog Site

Samwise the coder. Defender of Frodo and defender of DRY!

2024-01-11T00:00:00+00:00

Samwise the Coder: saving the Ring and preventing redundant code since the Third Age!”

Alright, in all seriousness I wanted to actually continue the Lord of the Rings theme throughout the blog post, but I figured it would diverge from the meat and “po-tay-toes” of the post. (last one I swear)

Essentially in Vue, you will learn about the concepts of reusable components. A simple Don’t Repeat Yourself philosophy for sure. They allow you to write code once, and then place that whole component within other areas in your app with a single custom formed tag. Usually this will contain three sections. template, script, and style.

What if we’re looking to just add in some additional logic that we can just reuse regardless of needing a template or not? Well in Vue 2 mixins were a thing sometimes used to do this, but in Vue 3 with composition API mixins have been more so phased out in favour for composables.

If you go to the Vue documentation website, you’ll see a very simple concept that leverages JavaScript to showcase how composables can be used, but of course since Vue promotes TypeScript, we’ll build our examples in TypeScript!

Here’s a very simple component App.vue file we’ll use for the example:

App.vue

<script setup lang="ts">
import ButtonOne from './ButtonOne.vue';
import ButtonTwo from './ButtonTwo.vue';
import { clickListener } from './clickCapture.ts';

const listClicks = clickListener();

</script>

<template>
  <div class="container" style="">
    <ButtonOne class="button" />
    <ButtonTwo class="button"/>
    <button id="ButtonThree" class="button">Button Three</button>
    <p>Click anywhere to begin!</p>
  </div>
  <div>
    <p v-if="listClicks.length > 0"></p>
  </div>
</template>

<style scoped>
  .container {
    width: 600px; 
    background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .button {
    margin: 10px;
  }
</style>

Our boring button component (you’ll have to copy and paste it to make the second button.)

<script setup></script>

<template>
  <div>
    <button id="buttonOne">Button One</button>
  </div>
</template>

And then our reusable composables clickCapture.ts

import { Ref, ref, onMounted, onUnmounted } from 'vue';

export function clickListener(): Ref<string[]> {
  const clickHistory = ref<string[]>([]);

  function clickCapture(event: MouseEvent): void {
    clickHistory.value.push(
      event.target instanceof Element
        ? event.target.id || event.target.tagName
        : ''
    );
  }

  onMounted(() => {
    window.addEventListener('click', clickCapture);
  });

  onUnmounted(() => {
    window.removeEventListener('click', clickCapture);
  });

  return clickHistory;
}

Once you get these files up and running you should see something like this:

To test our code we can begin by clicking on any parts of the example. You’ll see the element clicks get captured in a <p> tag below.

So in our clickCapture.ts file we have the following moving parts:

A Ref is a reactive generic type in Vue.js. Here, we use ref<string[]>([]) to create a reactive reference to an empty array that will store our click history.

The clickCapture function is called on every click event, identifying the clicked element and adding it to our click history.

we use onMounted and onUnmounted hooks. On component mount, we add an event listener to the window to capture clicks. On component unmount, we ensure the event listener is removed to avoid any potential chances of a crash due to memory leak.

I am sure you have a couple of questions. Like for instance. is there a reason why const listClicks = clickListener(); isn’t within the onBeforeMount?

const listClicks = clickListener(); is placed outside of the onBeforeMount hook to ensure that listClicks is created once when the component is initialized and is available throughout the component’s lifecycle. If we moved it inside the onBeforeMount hook, it would mean that listClicks is created every time before the component is mounted, and it will not persist between re-renders or updates.

Or perhaps you’re wondering is there a reason why const listClicks = clickListener(); doesn’t have to be within a ref()?

const listClicks = clickListener(); doesn’t need to be wrapped in a ref(). The clickListener function itself already returns a Ref<string[]>. In our clickListener function, we use ref() to create a reactive reference (clickHistory) and return it. Therefore, when we call clickListener(), we are directly getting a reference to the reactive data (clickHistory) without the need for an additional ref() wrapper.

I understand I’ve been doing a slew of explaining and certainly even more typing. So, what I have done is create a vue sandbox with the code involved above so you can test this code right away and see if piques your interest further!

Vue clickCapture Sandbox

As always, I am open to any feedback. If there is something I can do to better explain the code or other ways to refactor my logic to optimize further, by all means please reach out!

See you in the next one!

Gripes go up, s#!t rolls down!

2024-01-05T00:00:00+00:00

Gripes go up, shit rolls down, or in this case, emits go up and props roll down.

You ever watch Saving Private Ryan? Remember that scene when the company is complaining to Tom Hanks and they ask him why he never gripes, and he says the following:

Along the way since I have been learning Vue I have been dealing with the concepts of emits and props. These are definitely new to me and it’s something that I have been trying to actively apply in my code to allow me to have two-way communication between components. My brain works in weird ways, but the correlation between how Vue operates and how this scene illistrates flow of hierarchy. At least you can feel good knowing this was wrote by a human with a very, very weird thought process.

This example I am providing assumes you’re on Vue3 using composition API. It’s fairly simple all things considered, and I am sure I could optimize thing further (perhaps I will revisit this post again in the future with an example 2.0) but for now this will show what is possible. I will also say, this code will work as is, but ideally you will have Vue DevTools installed or some other add-on that will allow you to see the props update as you click through to better illustrate this example.

Lets get into the examples!

Props: Passing Data Downwards

Props allow you to pass data from a parent component to a child component. In our example, the ParentComponent has a boolean toggle ref() variable, which we want to pass down to the ChildComponent. Let’s break down the moving parts:

<template>
  <div>
    <button @click="openWindow">Click Button</button>
    <ChildComponent :toggle="toggle" @closeWindow="closeWindow" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const toggle = ref(false);

const openWindow = () => {
  toggle.value = true;
};

const closeWindow = (newValue: boolean) => {
  toggle.value = newValue;
};
</script>

Here, toggle is a boolean variable in the ParentComponent, and it is passed down to ChildComponent using the :toggle syntax. This establishes a one-way data flow from parent to child.

Emits: Communicating Changes Upwards

Emits provide a way for a child component to trigger events that the parent component can listen to. In our case, the ChildComponent emits a closeWindow event when the window is closed back to the ParentComponent.

<template>
  <div v-if="isOpen" class="dialog-overlay">
    <div class="dialog-content">
      <p>Some Content Here</p>
      <button @click="closeWindow">Close Window</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps(['toggle']);
const emits = defineEmits(['closeWindow']);

const isOpen = ref(false);

const closeWindow = () => {
  isOpen.value = false;
  emits('closeWindow', false);
};

watch(() => props.toggle, (newValue: boolean) => {
  isOpen.value = newValue;
});

</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
</style>

The ChildComponent defines a toggle prop using defineProps, and it uses the watch function to reactively update the isOpen ref() value whenever the toggle prop changes.

In the ParentComponent, the closeWindow method is defined to listen for the closeWindow by prefixing it with the @ symbol. When the event is received, it updates the toggle value accordingly with the parameter passed from the ChildComponent.

In summary, this is just a very quick example about how emits and props work. I would love to hear your comments about the matter. If you are reading this and you have some comments good or bad, by all means reach out! I am always interested in getting new perspectives or further knowledge about how to better my code.

Remember the chain of command! The grips go up, not down. Always up.

See you in the next one!

Big O Notation

2023-09-10T00:00:00+00:00

A universe is just a giant dataset right???

The Big O … There is a joke that comes to mind…

Anyways, lemme pick my brain out of the gutter and get to the actual post.

So a while back I was asked if I knew what “Big O notation” was, or pretty much any real sorting algorithms. I guess this is where my lack of degree in Computer Science kind of starts to reel it’s head. I feel like this would have been one of those topics that would have been discussed; alongside C++ which I kind of cringe at. Not cause of the language, more so for the fact that I would probably end up cooking a computer from memory mismanagement.

Anyways, I was tasked with taking some time to go over Big O and at least understand the concepts of where it can be applied and what’s the limitations for it. (we’ll come back to the limitations later on.)

Here’s some very basic code.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const searchValue = 7;

function search(arr: number[], target: number): number | null {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === target) {
      return i; // We found the element, return the index.
    }
  }
  return null;
}

const result = search(numbers, searchValue);

if (result !== null) {
  console.log(`Found our searchValue ${searchValue} at index of ${result}`);
} else {
  console.log(`${searchValue} not found in the array.`);
}

Okay, lets break this down as best as I can. function search takes in two params, the first is the dataset we will be looping through, in this instance it’s just the array of numbers the second is just our search value aka searchValue. The returned value will be either a number or a null depending on the search value provided.

So because this search is linear, it’s simple, but maybe not ideal. Lets say in this scenario we were to pad out the dataset with a couple of extra zeros, not as in at the end of the array, but adding a couple of zeros the length of the dataset. aka taking the array from 10 rows to 100, or 100,000, etc, etc.

If your dataset is in memory via table view or some caching service such as redis, things are a little easier, but what if you were looking at a database and you’ve already loaded too many rows into memory and are forced to go to paged memory, what if the paged cache contains the record you’re looking for at the very last position of the cached dataset?

So, what can you do?

Introducing Binary Search!

So, in our previous code example, we implemented a algorithm of this type (O(n))

The (O(n)) algorithm searches for the target element by iterating through each element in the array one by one until it finds a match or reaches the end of the array.

But in this instance, we’ll be using (O(log n))

This algorithm is more efficient and works only on sorted arrays *(NOTE). It repeatedly divides the search range in half, which reduces the search space significantly with each iteration.

Okay, so lets take a look at another code example, but with a little more complexity to it. We’ll use some of the code from our previous example to help identify the changes between the two examples.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const searchValue = 7;

function search(arr: number[], target: number): number | null {
  let left = 0;
  let right = arr.length - 1;

  while (left <= right) {
    const mid = Math.floor((left + right) / 2);

    if (arr[mid] === target) {
      return mid; // We found the element, return the index.
    } else if (arr[mid] < target) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }

  return null;
}

const result = search(numbers, searchValue);

if (result !== null) {
  console.log(`Found our searchValue ${searchValue} at index of ${result}`);
} else {
  console.log(`${searchValue} not found in the array.`);
}

Okay, this one is a little more in depth. It’s still the same in principal, we’re still taking in the array of numbers and our searchValue as params for the function but the operations are going to be slightly different. So, right off the bat, we’re going to look at the number in the middle of the array first. The Math.floor just ensures that we’re on a whole number when checking.

If the middle number is smaller than our search value, it knows that the target number must be in the second half of the array (to the right of the middle number). So, it discards the first half and repeats the process with the second half.

If the middle number is larger than our search value, it knows that the target number must be in the first half of the list (to the left of the middle number). So, it discards the second half and repeats the process with the first half.

This beauty of this algorithm is that once you have the data sorted in such a matter, the algorithm can literally drop half the result set immediately once it figured which half of the array contains the searchValue and it will continue to go through and repeat the process until the searchValue is matched.

Are there some limitations to this? Yes, like for example, if you code is mostly sorted, or very small, it would not make sense to use this form of algorithm, but when dealing with large results, once sorted. This algorithm really shines.

To-do ta-da!

2023-03-07T00:00:00+00:00

So I guess the site that I was using before for my blog post hero images went the way of the paywall. Fortunately, the same folks who offer the great service of chatGPT also offer services through DALL-E 2 … I had no clue honestly.

This is probably going to be a quick blog post

I know it’s been a couple of days since my last post. I have not given up on my challenge at all. In fact, here is a link to my react to-do app. It’s definitely nothing crazy and I certainly have a bit to learn about states and whatnot, but understanding the little things like what the ... operator does in advance is a big help. Feel free to fork my repo and give it a whirl!

Not super feeling the theme

Many moons ago before I even had my GitHub Pages repo set up, I had this theme picked out. I don’t know why, but I knew when I finally did get around to it (I think it’s been years??) That I was going to use this theme. And well, I did. Don’t get me wrong. It’s great and it does what I need it to do, but I don’t find it super slick and it really only stands out on really, really big monitors, 27” or larger big. I don’t know if I want to have this same styling or if perhaps I can find something slick to transition over to.

Short post for today! More React fun later!

All aboard the React train!

2023-03-02T00:00:00+00:00

All aboard! Choo Choo!

Alright, time for the excuses… 😅

Okay so I didn’t make a post yesterday. I am not perfect. I should have made one yesterday, but I didn’t and that sucks, but here I am making this post, so it’s not like I have completely given up. I still have plans on updating my domain URL and whatnot, but for now it seems that the focus should be on progressing my knowledge of React.

React documentation

So far I have been reading the concepts behind how ‘components’ work within React following this article: Thinking in React and it has been absolutely lovely in just really breaking everything down. I am a bit of an odd person in my learning style because sometimes I need things really explained out to me, and then other times I feel like I am dragging my knuckles over it.

Speaking of dragging my knuckles, I haven’t even finished my blog post after just aimlessly scrolling throughout instagram reels … but that’s not relevant. I have updated my node version to the latest LTS version and I am ready to go in terms of creating my new app. I just want to give that documentation a once over just to ensure I have not missed anything.

I am really hoping that React will tie in some of the neat TS and like ES6 functions that I have used before in the past. I should do a whole article on those actually to really help my understanding there as well..

We’re going to have to add Node.js to our learning list there too depending on the amount of learning involved there. I have used it before for JWT, so perhaps it all comes down to how much I decide to use it.

EDIT: So, remember how I said that nothing seems to easily come for me. Well turns out that if my DNS provider wasn’t going to have issues GitHub’s Actions pipelines are reporting an issue right after I pushed this post prior to the edit. I gotta say, this is pretty lame. I am now 2/2 on this and I haven’t even really dug into the meat and potatoes of all this. Here’s hoping that this auto fixes itself and I don’t have to think about this anymore for the evening.

Just let them win already!

2023-02-28T00:00:00+00:00

I asked and AI image creator to make an image using the phrase “robot physically throwing a stack of paper” … the best one yet to be honest.

My challenge … and my tweak to it

So, in my quest to leverage chatGPT as much as possible, I simply asked it. “what is simpler to learn, React or Angular?” I was definitely a little surprised when the results came back with React as the winner. With that being said I still plan on doing the challenge, but I am just changing my front end of choice to now be React since I will need all the help I can get since learning is slow at best for this guy.

chatGPT paying dividends

Wanting to figure out the best way to approach this, I literally just asked chatGPT to design me a 100 day lesson plan that would cover all the topics that I previously mentioned here and it didn’t disappoint. Here’s a sample of what it was able to come up with.

Days 1-5: Introduction to Software Development

Introduction to programming concepts, algorithms, data structures, and software development principles.

Overview of the .NET Framework, C# programming language, and React.js library.

Setting up a development environment (Visual Studio Code, .NET Core, Node.js, npm, Git).

Days 6-10: HTML, CSS, and JavaScript Fundamentals

Understanding HTML, CSS, and JavaScript basics.

Creating a static website using HTML, CSS, and JavaScript.

Understanding the Document Object Model (DOM).

It’s kind of scary, but also it’s amazing to have this tool to assist you and really give you a launchpad. Do you think that I would be able to make my own lesson plan. Heck no! But this really allows me to have a focused outline to at least provide some bounds in my learning.

It’s kind of crazy the amount of simple things I have done with chatGPT thus far. Its even helped me write this blog post in all honest. There is a lot of little things that I want to write about and it’s almost like I need Notion or something along those longs to really keep my thoughts together.

Speaking of dividends…

This whole experience of writing everything has been interesting so far. There has been a lot of learning that has already been happening and I haven’t really even got into the whole coding side of things yet (yes, I guess one could see this as an excuse) but I would like to thing that this all hasn’t been for nothing.

Things I have learned already in this endeavour

Learned about DNS settings and things like TTL and what A vs AAAA means and what a CNAME does.
Learned about GitHub Pages and what the purpose of it is.
Learned about Jekyll and how markdown language works
Learned sometimes it is best to call tech support :)

Future plans?

So I think in terms of what is next. It’s going to basically be following along with the guide that chatGPT has outlined to me and seeing how committed I can be to the learning plan. I think it will be beneficial for sure, and the blog definitely will allow me to have more accountability for sure.

PS. I still have to fix my domain stuff. I was tinkering around with it and I really caused an issue with the domain forward as opposed to using GH-P’s infrastructure secret sauce to make it all work and needless to say I broke the damn thing. Hopefully I can fix the domain stuff again here shortly cause I did have it all working at one point.

Until the next day!

One step forward, and one step backward…

2023-02-27T00:00:00+00:00

I asked and AI image creator to make an image using the phrase “robot physically smashing a networking router” … this one I feel was a bit of a stretch. Can’t always be winners.

Ionos reels it’s ugly head …

So Ionos decided to have issues yesterday right after I had gotten my CNAME and A records working as intended, but since their service decided to go sideways, it’s made things really harder to deduce. Two phone calls later. Seems you could not assign a SSL certificate for a while and as a result the site’s connection was not HTTPS based, so it errored out.

I’ll have more content to go here eventually. Call this a placeholder for now due to me having to step out for a bit, but I have not forgotten my challenge to myself. I will update this when I get back!

GitHub Pages, Ruby, chatGPT, and a challenge!

2023-02-26T00:00:00+00:00

I asked and AI image creator to make an image using the phrase “robot physically smashing a ruby gem” … not too shabby.

GitHub Pages

I finally got around to making a GitHub Pages blog. It’s been an interesting time thus far because, I know things for me aren’t always immediately intuitive and sometimes there is a bit of a grind to make things work. I often would joke with colleagues and say that for every day of work they put in, I would have to put in two. Just to have the retention they would overall.

Ruby Strikes again!

Ruby threw me a curve ball. You follow along with installation guides and they kind of assume that you’re starting fresh. I however at some point in my past decided to install Ruby previously within WSL. So it kind of made it tricky figuring out what version I needed for what bundler and whatnot since a version was already installed. Needless to say, I have never been a fan of Ruby. I still am not.

chatGPT

It’s been a couple of weeks now since I have started up an account with openAI, and I have to say some of the things it can do is powerful. It can really assist you in putting thoughts together, helping you figure out solutions to problems you weren’t too sure of how to approach, and I know that I am only scratching the surface. It’s a really odd spot to be in because you don’t want to be part of “skynet” or the wave that triggered the downfall of society. But, with that all being said. AI certainly isn’t going away and it can be a tool to really supercharge your life and it really comes down to how you phrase your questions to the AI.

The Challenge!

So! One of the things that I have been trying to do is evolve my skill set as a developer. What I have decided to do is to get this website going on my GitHub Pages. (if you’re reding this. ta-da!) and use this as a online journal of sorts to document my way through my own kind of #100daysOfCoding challenge. I think it would be beneficial for me to really keep myself accountable and I feel like having a daily blog is something that I can just have my thoughts and to show my progress as I step through the days/code.

The things I want to learn about during all this:

.NET
TS
Angular
charting libraries

Here’s where things get fun! I am going to use the power of chatGPT to help me make a lesson plan of sorts to really put me to task on this idea of mine and see what potentially we can come up with.

I don’t know what the end outcome for the #100daysOfCoding challenge or if I am even calling it that. But this will be the start. #day1done