There are times when I catch a look at myself and immediately make note of my flaws. “I could be in better shape, I should really dress better, I’m really not eating all that healthy”. The same applies to where I am currently in life. “I should have already found a career, I could be starting a family now, so many people I know are much more accomplished than I am”. It is easy to look back on the decisions I’ve made up until now and see how much more I could have done, how much better a position I could be in if I had been more assertive, had more drive, chosen to put more time into actions that would advance me instead of choosing to indulge in the pleasures of the moment. Television, video games and social media absorbing hour on hour, page after page refreshing to see if there’s anything interesting and if there isn’t, then peruse the next site. Rinse and repeat, telling myself that I would get around to what I wanted to get to later, with “later” slipping further and further away from me until I realized that I had fallen into habits generating the opposite result from what I wanted in the first place. There were times where I couldn’t help but see myself as a failure for having squandered my potential that my family and others in my life had laid out for me, that I had made myself into a person that would not accomplish anything not due to outside factors but due to my own weaknesses.

And yet…

I currently find myself crossing a new threshold after having chosen to accept the risks, and taken the burdens necessary to make a significant change in the direction I was headed. Outside of that, a fire has begun to burn inside of me, and urge to do more than simply do what is merely required to continue forward, but to seek out the best version of myself possible and carve it out in reality. The temptations of the past do not have the same appeal as they did before, replaced with a pull towards actions that will create tangible results, and develop long term-happiness. Looking out at the world, the way it was, the way it is currently, the way it is becoming, I have taken more and more to the enrichment of not only the physical, but emotional and spiritual nature of the self to become a more complete person. In this time of change there have been several lessons I have taken to heart, treated as mantras that I use to remind myself of the person I want to be, and to act as kindling to the fire acting as my driving force:

Love your body as it is, but give it the respect it deserves:

Your body is most powerful tool you possess, and it will be your workhorse until the end of your days. For all the work it has done, and all it will do for you, treat it as you would treat a loved one; work to make it the best it can be but give it your unconditional love and acceptance. It is never too late, nobody is too far gone, the beauty of the human body allows every one of us to unlock more potential than we realize. True love means we must struggle against the weights of our feelings of inadequacy, our temptations to indulge in actions that will degrade ourselves, and our doubts and frustrations when we stumble. There is no more precious resource that the flesh we are made of, and the world is a harsh place; we must temper ourselves, consolidate our resolve and our passion, and become a rampart that will weather the storm that is this existence.

Surround yourself with those that support you, but will also challenge you:

As stated in Proverbs 27:17 “Iron sharpeneth iron; So a man sharpeneth the countenance of his friend.”. The support of a companion that will lift you up when you have your moments of weakness is vital, but it is equally vital to have those close to you able to test your resolve and mettle. Only by engaging in the halls of debate or competing against others can you truly determine if you have developed a sharp wit, a silver tongue or a persistent outlook. Seek out strong and healthy rivalries that will want to see you built up as much as they seek it themselves.

Remember where you’ve come from:

Nobody is truly here by accident. Every person is here because for thousands upon thousands of years, our ancestors fought to survive and pass on to the next generation. They endured famine, disease, struggled against human and animal, had to overcome nature itself, all in the hopes that they would be able to pass their lineage on a little longer. Many branches in the tree of life have ended, but not yours. You contain the fruits of their struggle and their stories continue with you writing the next page. Learn some of their story and let their memories push you forward, as they would want you to succeed in their name. To quote Gustav Mahler: “ Tradition is not to preserve the ashes, but to pass on the flame.”

No knowledge is wasted, no lesson invaluable:

There exists pressure to only spend time learning what we are told is important, to prioritize what will be used in everyday life or the pursuit of a career and nothing more. Ironic that when access to knowledge is at its most accessible does it seem to reach fewer and fewer ears. Take advantage of what we are given, and seek out a tidbit of information you did not have before. A historical event you did not know, a study you were not aware of, a lesson you were not taught in your education, never stop thinking, learning, experiencing and growing.

In Parting…

My journey is just beginning, I bear only fresh scars of struggle and am but a follower of the greats that came before me. This step is but one of many that will be taken, harder than some but easier than most. I hope to encourage those who walk the same path as I do, to be worthy of those who have opened the pathway for me, and to open a path for those yet to come.

In loving memory of Terri. I know you are watching over me, and your work, your love, your history will be carried forward. Never forgotten, always loved.

In essence what we are doing is transitioning between two states, the first one takes place when the user is scrolled to the top of the page, where our header bar is not visible, and our search bar (pictured above) is below our page title. The second state (below) we make our header bar visible and change our search bar from position: absolute to position: fixed. We then use some CSS transitions to make our change look more natural.

Lets take a look at the example I’ve created, first the HTML :

<body>

<div class="wrap" id="wrap">

     <header class="headerBar">

          <button>Up Top</button>

          <button>Mid-Town</button>

          <button>Down Low</button>

     </header>

     <h1>Scroll-to-Fixed Elements</h1>

     <div class="searchBar">

          <input type="text" placeholder="">

     </div>

</body>

Our three main elements are the wrapper, the header and the search bar. As stated before, in our first state our header bar is disabled and the search bar is absolutely positioned. Let’s take a look at the SCSS:

.headerBar{

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 60px;

opacity: 0;

.fixSearch &{

     background-color: blue;

     opacity: 1;

}

.searchBar{

position: absolute;

top: 300px;

left: 20px;

right: 20px;

.fixSearch & {

     position: fixed;

     top: 10px;

}

}

Both the header bar and search bar classes have rules apply when one their parent element has a class of fixSearch . This is where our wrapper and a little bit of JavaScript comes in. We want to change between the two states right when the search bar would normally scroll off the page. In the SCSS above we set the set the search bar to be set 300px from the top of its parent element so that will be the trigger point for our event listener:

$("#wrap").on("scroll", function (e) {

if (this.scrollTop > 300) {

     $("#wrap").addClass("fixSearch");

} else {

     $("#wrap").removeClass("fixSearch");

}

});

Using this basic setup we can adjust the content to suit whatever needs the design requires. We can add/remove navigation buttons from our header to allow ease of navigation for infinite scrolling, display different content as we scroll past it, or ensure consistent access to a search bar or other widget. This solution works on all browsers, although position: fixed does have varying support across devices, more info can be found below:

Fixed Positioning in Mobile Browsers

For a lot of people who are beginning their journey into programming, the concept of data structures and their uses does not get a lot of coverage, in part due to the small size and scope of the projects that can be completed in the small time frame. This does, however lead to a lack of foresight down the line because as projects get larger and larger, understanding how a properly implemented data structure can make your end program run much more efficiently. Today we will look at just one method of collection, the Binary Heap.

What the Heck is a Binary Heap?

A Binary Heap is an implementation of the Heap data structure, a way of creating a priority queue. The best way to visualize a heap would be to imagine you are sitting at a desk, and your job is to file a pile of papers in front of you. You start with the first paper in the pile, then the second, then the third. However during your filing, your boss comes in and says that a big client just called and needs his file done as soon as possible. Naturally, even though the client’s file was added last to your pile, it jumps ahead of all the others and becomes the first one you work on. A heap functions in a similar way, organizing data so that certain elements are given priority over others.

To look at it from the perspective of code, imagine an Array acting as you filing the papers. when you file the paper, you are essentially running the shift() method, removing the first Array element, and new elements are added at the end of the Array. However when an element with a higher priority is added to your array, you want to make sure it is properly arranged so that it will be dealt with sooner than those with lower priority but after those with higher priority.

Well why wouldn’t I just use the Sort() method then?

That may work for smaller data sets, but imagine for a second your Array had six million elements. You add an item that needs to be at position 100, but adding the item to your Array automatically places it at the end of the queue to start, then begins sorting, touching every item in the array at least once. That’s at minimum 6,000,000 touches to insert your one item. By comparison a Binary Tree will only touch a small number of your Array items, likely around 20–40 of them, saving you time you can allocate to other things. How does it do this? Lets take a look at the structure and find out.

Now why is this referred to as a Binary Heap? Well, when we look at each number in the tree, hereafter referred to as nodes, they can only have up to two decedents, or children. It is also worthy of note that the largest node, in this case 20, is at the top of the heap, and that every parent node is larger than its children, if it has any. This is known as a Max Heap, where we are always sorting for the larger number. There are variations for the smallest number but we will stick with a max heap for this article.

Now this may seem like a lot to take in, but when we break down this tree into manageable parts it becomes much clearer how this data structure works.

Lets start Growing a Tree!

Lets begin with an empty tree and add a single element, the number 1.

Here our tree has only one node, and is therefore the largest, but what happens when we add another number? Lets add the number 5 and see what happens.

When we add a new number to the tree, the first place it goes is the very end of our tree. How does it know what side to go on? By default, any new node will go to the leftmost branch on its level. However we are not done, as our tree needs to be sorted for the largest node. 5 is larger than 1 the two numbers will trade places.

Now the tree is sorted and we can add another element. This time we will add the number 3. For those Math experts out there, you'll already know that 3 is larger than 1 but smaller than 5, so it wont be swapping places with its parent. the number 1 is already taking the left branch so the 3 stays right where it is first placed and no sorting needs to take place.

Now lets add another number, lets go big or go home here comes the number 14! But wait, our parent can only have up to two children. what do we do now? whenever a row, or level is full, we start a new level using the children of the current index. Let’s ask Beyoncé where we start our new level:

Correct! Again whenever possible we use the leftmost node we can, so 14 will start off as the left child of our node 1. Once again we will begin to sort our tree switching 14 and 1, but 14 is also larger than 5 so after switching with 1, 14 and 5 will switch places and 14 will take its place on the throne.

Traversing a Full Tree.

Hopefully by now you can see the process and how we can continuously expand this tree should we keep adding items. We add a new item to the lowest, leftmost open node possible, then compare our new number to its parent. If the new number is larger than its parent the numbers change places, then the process continues until the parent node is larger than the new number, or the new number becomes the topmost node, also known as the root node. As the tree grows larger its becomes apparent how fewer steps are needed to sort to find the largest number. Here is a 5 level tree with 29 nodes:

Going back to he example from earlier of using a Sort() method, adding a new number would mean we would have to compare our new number to all 29 of the other numbers, but lets see what the most possible steps our tree would have to make. we will add a number larger than the current root, so we will add 95 to the tree. Looking at every parent 95 will have to be compared to there are only 4 comparisons needed in order to sort our tree, a far cry from 29.

Snapping off Some Branches.

To finish off, lets take a look at how we remove items from our tree, after all we will need to remove the item from our queue once were done with it. To begin the removal process, we swap our root node with the last node in our tree. Using the full tree we just added to, that number will be 68. We then remove the number 95, his job is done. Now we have 68 as the root node, but it is not the largest number in our tree so we need to sort.

We begin comparing 68, the current root node to its two children. Both are larger than 68 but the right branch of our tree is the only one with an open node, as we cannot start a new level until the current one is full. We swap 86 with 68, then continue down our tree, in this case always taking the right branch as there are no open nodes on any left branches. Our 68 ends on the 4th level, with 62 as its child and 86 as the root node.

This concludes some of the essentials to understanding Binary Tree data structures. In the future we may look at how we would go about coding one of the structures, but for now hopefully you have grasped the concept of how these trees function and can be used to better optimize your sorting. Best of luck to all of you out there, to quote Patrick McKenzie, “Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.”

Thank you to the Binary Tree Visualizer for generating the images used in this article. Give them a look at: btv.melezinek.cz