 for the inspiration!

Just take me to the 

I knew this was going to be hard. Nothing worth doing is easy, is it? The first step in figuring this out is what the heck is going on. 

Well, we need a tree rendered first. We also need checkboxes. We then need to be able to check the boxes and have the entire tree triggered, but only up the tree. When you click the root parent of the tree the rest of the children are unchecked. 

Additionally, we need to be able to search for items in the tree ideally filtering the tree down to just those items...

This sounds like a perfect case for recursion. Lets start with building the tree, I am imagining this is a response from an API in this case



So this seems like it will work. Well, now we can map over this data and render some components. I am going to paste a large chunk of code here and I will do my best to discuss the inner workings, so bear with me. 

So we can ignore the `propTypes` and the `toggleChecked` function. Let's focus on the basic structure. The thought here is to have each checkbox toggle its own state, and this will depend on the global state of the initial tree passed in. This does have a downside as it will cause a re-render every time the tree data changes, even though we are only changing one element of the tree...likely a better way here. Also, each checkbox handles its own styling and its own toggle button. I am just using a ">" and a "v" and then a "--" when there are no children. Of course, the important part here is that each child renders itself based on the children! Recursion! Yay! I assume there is a performance downside here, but realistically this is the simplest way I could think of. This also has the added benefit that the class names will be applied across all children. 

Now let's take a look at the `toggleChecked` function which is passed in from the App level. 

Let me write this out in more detail here. 

We need to make a new pointer so React will re-render the data. So we first copy the initial tree data. Then we call the toggleParents function. This function loops over the tree. If the `id` is the same as the clicked-on `id` then we toggle the state of the `.isChecked` property. We also need to see if there are children, and for each child, we need to toggle the children, this means we need to set each child to false as clicking the top level of a checkedTree needs to reset all the children. When that is done we return true. However, if the `id` doesn't match the clicked-on `id` and there are children, we need to do the same logic on each of the children if that returns true, which it will at a certain point also need to set the item we are currently iterating .isChecked to true and return true!

Return false otherwise...yikes. 


That is quite the mouthful, ok let's move on. Filtering is actually not too bad, we can use a recursive search...whenever there is an onChange event.

Again there is probably a better way, as this won't eliminate the rest of the tree rendering. For example, if you search for months, you still get the array which begins at the root of Years. But that is probably ok, given if you are searching a nested tree it will be good to know the parent of that element. Speaking of which I did write a function to find the root parent given a node, but I am not including it as it is not used in the solution. Check out the Github repo for more. 

For reference here is the `App.jsx` 




Thanks for reading! This was a hard one. There are a number of things I would change in the future. For example, it would be great to break out the checkbox tree into more components, as it stands now it is quite messy and really has two sections, the recursion and the actual component. Instead of conditionally rendering the 'open...' on the open state it would be nice to have that logic in its own component. 

I would also like to make the filtering logic perform better and actually return only the tree elements up until the searched item and nothing more!

And likely more!

Here is my finished demo: 



React Checked Tree

I am working through multiple simple React questions. 


The first one I will speak about is creating a simple counter button except when you hover the button it will increment the count. 



The 'testid' is in regards to the site where I found this test. 

A very simple counter-example. With the added twist of using the `onMouseOver` or `onMouseEnter` property. In react it is important to remember to use the callback async version of state to always use the previous value when you are modifying state. 

Why would you do that? Well, the state might be stale. This is only needed if the current state depends on the previous state of course. 

The next one I will talk about is a bit more complex, and I actually had not the easiest time sorting this one out. 


To save you some trouble I will simply link my 

Of course, I will talk about how I approached the problem!

The first step was to actually figure out what the heck is going on. So we need a List component, we need a checkbox component and we need a button. 

So that is what I did first. Created 3 functional components. List, Checkbox, Button. I am sure there is a better way here, as the Button might not be needed, but to keep things more reusable I allowed a `label` and `id` to be modified via props. The CheckBox might not really be needed either as it creates an added level of hierarchy when passing my functions down from `App`. 

At the app level, we need to keep track of which items are in which list. The Checkboxes naturally maintain state due do the fact that they are `checked`. However how to we keep track of that? We could've used state, but I think a better way is to use a flag on the items themselves. 

 Beautiful. That is the initial state of the list on left! So we can send this list to our `leftList` and render it...

Please remebber this is an annotated version to explain the logic, to see the complete work head to 

Now we have a list, and inside the list we render Checkbox.

At this point we haven't introduced what any of this is doing really. So lets take a step back. We want to have each checkbox's value `checked` toggled based on the App level knowledge of state. So we need to pass down a function and the current value for checked from the App through the list and into the Checkbox.

We already know what the list is, and now we know what handleCheckBoxSelect does. We simply modify the items directly and then update each list respectively. 

Ok Great! But we haven't moved anything yet, here is where our button comes in. 

But what about these functions? Well They need to do different hings depending on the direction. The process goes like this. 

1. Filter checkBoxes to move and to not move. (using the true/false flag)

2. Set the RIGHT list to be whatever the prev was plus the boxes to move

3. Set the LEFT list to be whatever we haven't moved.

Because we have changed the state the component will re-render. 

I have no doubt I have some bugs here, this is just my solution to this problem. If you have a better idea let me know!

A lot of interesting concepts in this one. I am sure I could clean this up but not using a new component for Button. I think using a state change and flags on the items is the simplest way, however, this could be done with the local state as well. What do you think?

Junior React Questions

I have been pondering this question a lot, especially how it relates to the tech field. I imagine another way to put it would be to say "Be confident". Do not be afraid to put yourself out there. Do not be afraid to fail. Do not be afraid to make mistakes. Be vulnerable. 

There is a lot that can be said about English, how confusing it is and how miserable it can be to learn. I often find myself perfectly expressing my thoughts in my head, but when it comes to communicating that to others, I often fall flat. Is it because they aren't listening? Maybe. It's likely because I need to work hard and think deeply to directly express my thoughts. This is sometimes easier than others and sometimes harder. This is what I mean, being vulnerable is more than the word. It means action, a dedicated focused action that I and you need to take. 

By taking risks you open up new doors. Not everyone will be ok with you and your presentation. For me, my focused and dedicated communication is not always the easiest thing for others to hear. I am often viewed as angry or mean or standoffish. When I consider myself a silly and quirky person who loves to invest time and energy to create the best possible friendships and connections I can. I also like to move fast and feel amazing energy when I get things done. 

It took me a while to dive into open-source software. I specifically chose a project that was at the far reaches of my technical skill and experience. I chose to be vulnerable and it has paid off! I have learned so much more by jumping in and getting started than I would've toiling about the choice. The great lesson here is that vulnerability creates opportunity. 

 the commentary on communication I found so valuable. To paraphrase, the problem is not them, it's you. You need to be vulnerable to get over that hurdle. I am actively working to overcome this. It is a journey and it is a lot like learning to code. 

At first, you stare at the screen, not comprehending anything you see. Great excitement builds and you can't take your eyes away. You realize that you are looking at HTML5 and it's not necessarily considered a language by some. After taking a deep breath you are vulnerable you jump right in. Slowly the elements, the tags, the semantic meaning it all starts to make sense and the worries and vulnerability you have fade away. Don't lose that feeling, hold on to that vulnerability, revel in it. It's a superpower. You can do something others may never do, and learn something new.

Be Vulnerable

It all makes sense in my head, but not in yours. When someone hears that an Electrician has decided to leave the job and pursue Software Engineering specifically web development, the look is one of disbelief.

Well, I am writing this post out of annoyance and desperation. If you would be so kind as to bear with me you will see the reasons why someone would want to leave the career of an Electrician.

WARNING: The following writing style may make you cringe

When I moved to Vancouver, BC from Saskatchewan to be with my wife while she completed her Masters I pursued a job in the field of Biology. I do have a B.Sc in it after all. This didn't work out, and I was beginning to feel the pressure of the need for a job. I desperately wanted to avoid going back to my retail job and I thought well, there is always work in the skilled trades. I will become an Electrician as a transitional career until I discover what it is I will do.

Initially, I loved it. I attended a "pre-job" training at the local training authority for all skilled trades, the British Columbia Institute of Technology (BCIT). I loved the mix of knowledge work and hands-on installation of electric components. I learned how to calculate load demands, maximum allowable current of conductors, and size of conductors appropriately for given applications, motor controllers and so much more! 

One of the first things I remember feeling my first day on the job as I carried by 82lb (I remember I weighed it) tool bag to the site was fright. It was terrifying. It was like walking into a war zone or as one of my later mentors described it, "It's a prison, a working-class prison".

Keep in mind dear reader, this refers to large-scale construction sites filled with thousands of workers, multiple cranes ferrying items overhead, concrete trucks pumping out floors (maybe the very floor you are sitting on), and quite literally, people that have just gotten out of prison, others slinging and bending rebar to support said concrete. Others are trudging in the depths of a nearby hole that will become the next building over the parking garage, wearing full-body rubber suits completely covered in muck and concrete dust communicating over a radio to a crane or excavator operator.

At any given moment you are walking through water, dust or mud or dodging grinders spitting metal sparks only to be blasted by a welding flash temporarily blinding you and likely causing permanent but slight damage. All while trying not to trip over and become impaled on a forgotten vertical piece of rebar or get hit in the head with overhead crane deliveries.  

This was nothing like what I imagined an Electrician to do. Yet, there I was running what's called "cor-line", flexible corrugated conduit, all over the rebar, moving from point A to B. This cor-line is later used for running wires between outlets (lights and plugs) and between floors in a massive high-rise. The wires are pulled inside. So your job, lowly electrician grunt, results in running plastic tubes through rebar, tying it down with thin metal wire to prevent it from being crushed. No floor is quite the same, but neither is it different. Up and up you go. 

Soon after that job, I got a job working as a Service Electrician apprentice. It was never a dull moment. Crawling through attics, running wires in asbestos insulation or who knows? It was never tested. Kneeling on nails, screws and breathing mould and mildew while getting stabbed in the back with the nails sticking out of the trusses. On top of this, you had to temper customers' expectations because often what they wanted was not what was physically possible.

In fact, for the next 2 years, this was a major part of my job. Additionally, apprentices are required to learn in a repeating schedule each year until writing the final Red Seal exam. So I was learning about motors, DC, PLC controllers, transistors, electronic engineering, transformers, generators and 3-phase calculations utilizing basic calculus. Yet on the job, I was telling clients that I would have to cut a hole in their wall (sometimes) to make their ceiling fan work. Other times I was explaining code rules and tailoring the outcomes. For example, "Your ceiling fan is too heavy, you need to change the box" or "No you cannot place an outlet behind a sink". 

I eventually got a job working with an Industrial Controls contractor to help build a Run of River project. For those who aren't aware, this is a Hydro Dam ie dam the river, use the moving water to spin a turbine and captures the electricity generated, then sell that power. 

This was a great project, we took a 45min boat ride every morning and evening to work. We worked outside of cell service in the backcountry of BC. Beautiful.

No kids, no mortgage, and making 22/hr. At this point, in my career, something seemed off, but I didn't know where to go from here. 

Once I finally got my ticket I thought things would be different. A Red Seal Electrician has put in min 6000 hours mastering the trade on the job and an additional 1200 hrs in school and can work independently and get things done to maintain national safety standards of electrical installations. That was me, and it was like starting over again.

I was constantly questioning myself and referencing the Code Book (an 800+ constant companion to every Electrician), what I would now call imposter syndrome. This was quite an adjustment. At this point, we had moved to beautiful Squamish BC and we were thinking about having kids.

As far as the job went I was doing a mix of heavy-duty work, trailer park inspections and bucket truck work. One of the biggest contracts at this time involved upgrading all the Squamish-owned street lights to LED. Over 400, each one had to be rewired as well. It was a tedious task but I loved it. I was always out in the rain and sun and snow. I was always fighting a sunburn or freezing my butt off. Suffering to get my fingers to just work. The alternative was the trailer park work. Crawling underneath trailers through a mixture of human and animal excrement and observing the mouldy underbelly of my life at the same time.  

The heavy-duty work focused primarily on rock crushers. You had to make sense of the mess of wires and homemade solutions to problems that the mining inspector would often shut down. 

Later in my career, I did some high-voltage work. One job involved the foreman "shutting down" the line by opening the air-brake switch so I could repair the damage to one of the distribution lines. Of course, as he sped away he forgot to open the line and didn't tell me. So I ended up doing the work live. As an Electrical worker, you are doing work live often, but generally not on a 12.5Kv line! Just another day in the neighbourhood.   

None of these tasks are easy on the body and it started to take its toll. I developed sciatica problems, wrist problems and elbow/shoulder problems.  

At this point, I had been an Electrician for 9 years. I was making 32/hr When my daughter was born I said to myself "What am I doing? I am crushing my body and my soul for 32/hr? Where do I go from here?"

I looked at others who had started their businesses. They are working for themselves 10+ hours a day, and then doing paperwork in the evening, making around 120K a year. Averaging 11 hours every day, and on the weekends. That wasn't for me. 

I began thinking back to my father and was inspired by his passion for technology and dedication to exposing me to it at such a young age. As soon as we could afford it he purchased a computer and he and I both fell in love.

Somewhere along the line, I lost that connection. Having a daughter brought those feelings to the forefront, I decided enough was enough. It was time to invest in myself. 

I enrolled in Lighthouse Labs (the course study is a post for another time) in July 2022, graduated in February and I haven't looked back since!   

For some reason, society values those that are deemed "high-value" workings. Those careers are primarily knowledge-based. We place a lower value on those who work with their bodies, and it is unjust, but that's life in a nutshell, unjust. Sometimes the career is a combination, for example, a Doctor or a nurse. But who are the highest paid? CEO's. They are a rapid-fire decision-making guru, who can remember their experience and intuit an answer to difficult business decisions immediately. What does that mean?   


If you stripped it all away, back in the humble village, who is valued more? No one, everyone was critical to the function as a whole. I am just ranting here, but either way, the result is manual labour is valued less than knowledge work. 

I now know how to code. I will code for food. Hire me. I learn fast and more than that I love puzzles and mastering how abstract complex systems work. I have a hard time explaining the complex systems I will get better. Being better every day is the one thing I have mastered. 

Why a career Electrician decided to become a Software Engineer

You typed into Google, “What is a linked list” and you have found this article among a multitude of others. Hopefully, I can make you laugh and provide some useful information along the way. Here, the goal is to explain the Singly Linked List with basic and clear language.

The following contains basic OOP programming principles and assumes you have some level of understanding of a language. I am early in my career in technology and have chosen to focus on JavaScript. The following code examples will be written in. I drew all the images in draw.io and wrote my basic code myself while referencing Cracking the Coding Interview 6th Edition (great book by the way)

While the code is JavaScript, remember that arrays are objects in JavaScript and therefore stored in memory as such. In this article I will refer to arrays in the general sense, that they are fixed in memory as a type and continuous. YMMV

In simple terms, a Linked List is a data structure. What is a data structure? Well, it is exactly that, a structured way to organize and store data that allows for updating and efficiently accessing that data.

A Linked List contains “nodes”. Each node is made up of “data” and a “pointer” (next). For myself, there was no real way to understand this without looking at a visual. The concept is too abstract.

Let's take a minute here. There are multiple versions of a Linked List. Singly, doubly, and circular among others. If you want more information about these I recommend, as always, looking at 

. I am going to focus on the Singly Linked List for now. Each node in a Singly Linked List will have one reference to another node or in the case of a list with one node, the reference or “next” will be null.

At this point, we need to define some other commonly used terms. The “head” and the “tail” pointers. And for the sake of the visuals…

A Singly Linked List with head and tail indicating first and last nodes respectively

So the “head” is the first node and the “tail” is the last. Keep in mind this list only has two nodes. So at this point, you might be thinking what’s the big deal? Isn’t this just like an array? Well you are not entirely wrong they can both be thought of as “linear” but there are major differences.

 allocation (typically fixed at the time of initialization), whereas a Linked List 

. They have a pointer to reference other data points, rather than using an “indexed” value. This is both good and bad, as with everything in life.

Accessing an indexed value is fast, O(1) constant time (hmm so smooth). This is not possible with a Linked List, we need to traverse the entire list to find a given value. There is no index, as the memory locations of a Linked List are 

The insertion at the beginning or end of a Linked List is O(1) constant. However inserting or deleting in another location is O(n), linear time. As the list must be traversed. Remember that fixed initialization of array size? A Linked List insert or delete does not require reorganizing the entire array structure. So that is awesome…. but wait there’s more!

Ok, ok, wait you said this was going to be simple? Well, let’s review.

Differences Between Array and Linked List

each node contains data and a pointer to the next node

Alright, so a quick look at the differences between continuous and non-continuous storage seems in order:

external and internal fragmentation can occur (fragmentation refers to the inability to resize an allocated section of memory when processes are removed from memory)

Polynomial representation and manipulation

Forward and back on your favourite Spotify playlist

Great, that’s just great. Let us look at some simple code so we can start to understand how to work with a Singly Linked List.

I know I said Linked Lists are “linear” but they are recursive…oops!

So, remember, this is my interpretation and my simple understanding brought into code, there are many ways to do things, for example, we could’ve used a default parameter in the constructor for next, and set this.next = next. I encourage you to experiment with your implementation.

Alright, are you following? So far I have null, great, and easy. A representation of my current wallet I suppose… I have also added a property size, I need this to know what size of a Linked List I have (uh huh). I also need a tail pointer, as this way I know when the list ends, as the node that contains the next value of null is the tail.

So let’s add some simple methods to add data…wait? Where am I adding data and what is it linked to… ok so maybe not so simple. I suppose I need a method to add data at the beginning and then another to add at the end. Great. Just to be confusing and seem intelligent, let’s call them prepend (begin) and append (end).

I first need to see if the list is empty. If there is nothing, great, I just set the head and tail to point to the same spot and add one to the size. If the list isn’t empty then depending on the method, we need to insert the data and move the pointers around to their proper reference points. If we add at the head, we move the head, if we add at the tail we move the tail. However, the append method requires a temp step as a placeholder.

Diagram showcasing steps involved in appending a new node.

Whew, that was more than I wanted to draw, if you have been following along at this point it is pretty clear that working with Linked Lists you must keep in mind the data and the pointers, each node pointer “next” as well as the overall list pointers “head” and “tail”. Let’s continue this mind-power experiment.

I would like to get a console printout of all of our data, as well as the size and the first and last data values. Hence why keeping track of size is a good idea, calculating the size can be done by iteration as well, but who has time for that? It can be useful to reset the entire list as well, maybe someone can invent a method like this for real life?

I probably will want to, at some point, remove the first node or remove the last node.

JavaScript has garbage collection, which I have been told is a form of automatic memory allocation. So all that means is I don’t have to worry when the reference to a node is moved resulting in a node with no reference, and I don’t need to specify de-allocation of memory. You know what, if I had a Doubly Linked List with each node containing a pointer to the next node and the previous node, this removal of the last node wouldn’t be so tedious…hmm.

Well, I am getting somewhere I suppose. I can add data at the beginning or end of our list, get the size, see all the data in the console, and remove the first and last nodes.

What about inserting data at a given index value, deleting a data value, or finding a given data value and its index? Bear with me. This code snippet will be dramatically long (for the obvious effect of seeming like I know precisely what is happening).

Wow, look at that! If you are an advanced programmer I am sure you are laughing, and if you are like me, you are thinking what is going on? I ensure you with all seriousness, I am serious now. This code is not that bad, if you follow along with the steps you can figure it out. If I can do it, anyone can.

It’s nice to know that I can accomplish some basic data manipulation. arguably this is much simpler with arrays and the built-in array methods of JavaScript.

So I had a thought (surprisingly), let’s time the different actions between my basic code and array methods. Using a Node.js runtime we have access to the Performance Hooks (

). The issues surrounding executing performance tests are out of the scope here, so I am keeping it simple and as flawed as possible. I will leave the results in the linked repository and spare them from this article but if you want to debunk my code and/or see what I came up with, here is the

Please let me know of any flaws or errors. Although it may seem contrary, I am truly hoping to deepen my understanding of data structures by writing this article, and hopefully, it made you think.

Data structures need to be chosen based on your application. I would discourage anyone from thinking that a certain structure is better than another, everything has ups and downs.

A Singly Linked List is similar to an array however, the main difference is the array is stored in continuous memory locations, whereas the Linked List is not. The implications of this difference require us to carefully weigh the pros and cons of the Linked List to other data structures.

https://www.vitamindev.com/javascript/how-to-compare-the-performance-of-different-functions/

https://en.wikipedia.org/wiki/Linked_list

https://www.freecodecamp.org/news/implementing-a-linked-list-in-javascript/

https://www.youtube.com/watch?v=njTh_OwMljA

 https://www.amazon.ca/Cracking-Coding-Interview-Programming-Questions/dp/0984782850

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management

https://stackoverflow.com/questions/3770457/what-is-memory-fragmentation

An Introduction to Linked Lists

It all started when I wanted to contribute to open-source. I began searching for a project that was small enough I could make an impact and be able to speak with the maintainers directly. I found 

.

After a couple of small PR's, I decided it was time to tackle something more challenging. 

Property X does not exist on type '{}'. ts(2339)

After much head-scratching, I discovered the project had nothing telling Nuxt to actually use TypeScript. TypeScript is set up and defined out of the box with Nuxt, however, the setup has to follow the given guidelines. Given the project was using a couple of VSCode extensions (as recommended by Nuxt and Vue) it was time to go back to the drawing board. 

Following the `package.json` and `nuxt.config.ts` I noticed that both `typescript` and `vue-tsc` were missing. My limited brain noticed an issue here. Don't we need typescript to use typescript?

Heading back to activist, I installed the packages and of course

ERROR Cannot start nuxt: Cannot find module 'vue-tsc/out/proxy'

After a full Docker system prune everything is fine, meh Docker. 

TypeScript is now working! But wait, there is more, the greatest challenge of them all. The build command now fails. Way too many TS errors. So clearly Netlify didn't like that.

Enter the power of `yarn nuxi typescript` 

I said it twice because I wanted to make sure you know this command. With just three little words we can manually check the types in a Nuxt project. I only found this once I actually read the Nuxt docs. It is important to read the docs, people!

After heading to trusty ChatGPT with some error codes I was getting nowhere, so I returned back to the human world and asked for help. It actually worked! I was told that given the project has been functional up until this point why not disable strict mode to allow the build to proceed? WOW! Humans actually got it right, this worked like a charm. Now I need to create an issue for all of these errors to make sure we can work towards a type-safe system in this project. 

Ask for help from real humans and be kind about it