Chai + Code

Things I Like: 1: Chai 2: Coding 3: Creating an environment of learning and teaching that promotes open-mindedness and creativity Studyblr looking to explain code that I struggled with across different languages and how I came to the solutions that I did. Also looking to share posts to motivate and inspire :) If I make a mistake, let me know. I probably will make a lot. Help me help everyone!! :)

[gamenite-weston]

My friend made this GIF for our game jam.

Details here: https://itch.io/jam/first-gamenite-jam

[chaipluscode]

Hey guys, been some time since I’ve provided any content. Over time I’ve been slowly building my skills and of course building projects. My latest endeavor is working with @gamenite-weston and the gamenite team to deliver Recbox: a console for board games.

I am excited to announce we are hosting our first game jam and would love for you to be a part of it. Game development is a great way to build your development skills while building something fun for everyone!

As always, grab your cup of chai and get coding!

[chaipluscode]

Pointers

Note: I apologize for the lack of visuals, and it may seem lazy, but for me to understand pointers fully, I had to sit and draw out how I visualized what was happening in memory. Looking at visuals did help a little, and visuals can easily be found online, but they also stopped me from drawing them out myself because they were RIGHT there. And because I am trying to get people to understand things the way I understood them, I hope you sit and take the time to draw what’s happening in memory out and ask yourself if it makes sense. And if it doesn’t and you can’t figure out why you can shoot me a message and I’ll even draw you a visual myself. Thanks so much.

Soooooo why do we need pointers? Pointers are used to point to addresses of large structures so we don’t have to make copies of it in our program. This is key to efficient memory management in our code!! They are pretty much useless for ints, chars, and such, but with more efficient data structures that you will hopefully learn in the future (maybe even with help from me), they will be really useful!

-------------------------------------------------------------------------------------------

                                                 Memory:

I will use this section to briefly introduce the stack and the heap, but I assume most people coming to look for help with pointers have a decent understanding of stack and heap memory.

Stack:

Memory created locally is called stack memory.

Stack memory does not have deallocated manually. For example, in a function, all memory allocated on the stack is deallocated once the function is completed.

Heap

Memory created dynamically is called heap memory

Heap memory must be deallocated manually. If heap memory is not deallocated manually, it will live on the heap and cause memory leaks and segmentation faults

-------------------------------------------------------------------------------------------

                        How to use pointers in dynamic memory?

Pointers are initially created in the stack

int *p; 

The new operator is used to dynamically allocate memory onto the heap: new + “type”

int *p = new int;

*p = 5; 

If memory dynamically allocated is no longer being used, it must be deleted otherwise it is garbage and causes memory leaks. If there is too much garbage on the heap:

space in the heap runs out

and using the new operator to dynamically allocate memory may crash our program

-------------------------------------------------------------------------------------------

           What is garbage and how do we prevent garbage on the heap?

Using the delete keyword (Example then explanation in step 2. draw out what it would look like in memory while completing each step)

Dynamically allocate memory on the heap for an integer whose value is 10 and have an integer pointer pointing to it:

int *p  = new int(10);

Dynamically allocate memory on the heap for another integer whose value is 5 and have the same integer pointer point to it:

 p = new int(5);

Answer these three questions (Don’t worry, you shouldn’t be able to answer all of these yet. Answers in explanation in step 3):

What is the pointer you created pointing to?

What happened to the other integer in the heap?

How do we handle it?

Explanations:

This is how you can dynamically allocate memory in the heap and set its value in one step. Alternatively, you could have done this

int *p = new int();

*p = 10;

Since p has already been declared as an integer pointer, you don’t have to call its type again. All you're doing is reassigning it to point to another place in the heap because you are using the new operator again. Alternatively, you could have done this:

p = new int();

*p = 5;

Answers:

The pointer has been reassigned to point to a new location in memory. It should be pointing at the memory address that is storing the integer value at 5. The pointer cannot point to two memory addresses at once so the other one has been left hanging ¯\_(ツ)_/¯   

The other integer in the heap is still there in its address. Nothing is pointing to it so therefore it won’t ever be used unless another pointer is created and points to it or if we reassign the original pointer back to it. (but then it stops pointing to 5).

Ah hah! The magic question. We need to use the delete keyword!!

-------------------------------------------------------------------------------------------

                     What is the delete keyword and how do we use that?

The delete keyword is used to regain the memory on the heap that we no longer want to use. We call delete when we want to reassign a pointer or to have a pointer no longer point to anything. There should be a 1:1 ratio of new to deletes in your code. In other words: for every new there should be a delete. 

Let’s add on to our last example and then I’ll explain as soon as new code is introduced.

Recreate our previous example, but this time remove the garbage off the heap.

int *p = new int(10);

delete p;

*p = new int(5);

Explanation for what happened at 2.:

When we use the delete key we still have our pointer out in the heap, but it no longer points to anything. This is called dangling memory. This becomes a problem when we don’t actually want to reassign our pointer, but to get rid of it completely. WHAT DO WE DO??!?!?!??!?!?!

-------------------------------------------------------------------------------------------

                              How do we deal with dangling pointers?

OKAY, so I know you’re probably like, “ugh there’s more?” But I promise we’re almost done, and this is a short section so just chill for a bit more, alright? Alright, let’s get it!!

All we have to do take care of a dangling pointer is setting it to NULL or 0. That’s it. Nothing more, nothing less. Ez pz right? Let me explain:

All NULL or 0 does is let the compiler know that our pointer is not referencing to anything. When this occurs, it is no longer pointing to anything in the heap, and there should be no memory leaks! (considering we deallocated the memory).

Let’s remake our example, but this time instead of reassigning the pointer to another address, let’s just have it removed from memory completely!

int *p = new int(10);

delete p;

p = NULL;

-------------------------------------------------------------------------------------------

                                                Summary aka tldr

I hope I was able to point y’all in the right direction! No? Okay, well the lesson is finished anyways so you can deallocate the space in your brain that you made for that pun and replace it with something else :P Let’s just summarize quickly:

Use new to allocate memory on the heap

Deallocate unused memory using delete

Prevent dangling pointers by setting the pointer to NULL or 0 upon deallocation

Thanks, stay tuned for more! 

A fun video to review pointers: https://www.youtube.com/watch?v=6pmWojisM_E

-------------------------------------------------------------------------------------------

                                              Corrections 

“The new keyword is used dynamically allocated memory on the stack”

Changed stack to heap

[chaipluscode]

Beginning Back end pt.1

Welcome to the second of installment of me trying to explain something I struggled with!! There are multiple parts to this, so grab your nice, hot cup of chai and sit tight. Today’s post is about beginning back end.Things you will need to follow along with me in this post:

Your attention!

See number 1

NOTE: Setting up now will save time if you decide to pursue back end on your own later on or if you decide to practice with what you learn from my posts. If you wish to set up later or differently, then skip to point 1. 

I use c9.io which saves me the hassle of a local setup that may/may not take hours and days of frustration and confusion so it would be recommended to make a free account at https://c9.io/ Yes, they do require a credit card for their free account, but it is extremely worth it. c9 saves you the time and energy of manually setting up locally. Instead, you pick the configuration you need, and c9 does the rest. 

After signing up you can create your local workspace and select Node.Js. This is what I will be using to demonstrate.

(Unfortunately, c9 does have issues and if you wish to manually set up because you don’t trust c9 with your credit card, or for any other reason, here is a local setup tutorial: https://hackhands.com/how-to-get-started-on-the-mean-stack/ )

1) What is back end? Why does it sound so mysterious? What are you exposing me to????

You are being exposed on the second half of what it takes to become a FULL STACK DEVELOPER. It sounds mysterious because it is, literally. The back end is everything the user doesn’t see 👀 👀 👀.  When you type tumblr.com into your browser, you are sending a get request to retrieve all the information you would see on your dashboard, and have it presented you. However, every day when you check your Tumblr, you see brand new posts. This is the back end at work in short. It dynamically responds to different requests you make. Typing in tumblr.com is an example of a GET request. Me making this post right now is me asking tumblr to take my post and make it visible to show up on all my followers’ dashboards. This is known as a POST request. What is returned to you is known as the response. Whatever you see on your dash after making your request is a response from the back end.

2) Okay...but I made a really nice blog site just using HTML, CSS, and JavaScript, and uploaded to a hosting service. Why do I need back end? (Okay I made up the question and none of my sites are blogs, but...just don’t @ me please). 

That’s great, I’d love to see it! But as beautiful as your site is, there are a few things you or I can’t do:

Comment on blog posts

Post a blog post (that saves) without manually changing the html

Sign Up/Log In 

Show us cool things, like an API (will talk about in another blog post, essentially come someone else has written that you can use to display cool things on your site ) which gives us a visual display of what the weather is like in the next two weeks!

Okay! So now you know what back end actually is, you might be wondering how to dive in. But wait!! Where do the responses from all the requests come from? (Server). What makes our pages dynamic? (Databases). How does everything go back to the front end? (Middleware). What language do we code in and what helps structure our code? (This is subjective, my posts will reference Node.js and use express as the main framework).

Check out this website for an introduction to the hard technologies of all of this: https://www.upwork.com/hiring/development/a-beginners-guide-to-back-end-development/

I would do you guys an injustice by not sharing this with you as it is concise and an easy read. Feel free to ask me any questions. The article does a much better job at dumbing this down than I can and has helped me grow a better understanding. 

Questions you should be able to answer from this post:

What is back end web development?

What is the difference between front end and back end?

What happens when you make a get or post request?

What you should know for the next post:

How the technologies work (view the link).

Answers to all of the above questions.

Thanks, all! Stay tuned for follow ups that will come! I may or may not interrupt each part with another post on C++ or another language, but stay tuned!  Hope you enjoyed this post and your chai!

[chaipluscode]

Bubble Sort

**DISCLAIMER: This code is in C++, but the logic applies to other languages**

1) What is bubble sort?

Bubble sort is a sorting algorithm that checks adjacent numbers and swaps them if the number being checked is larger than the number ahead of it. The numbers are ordered from the bottom (end) of the list to the top (beginning). Kinda reminds me of the way bubbles rise to the surface of water *gasp!*

Visual Example:

2) An example problem:

Sort the numbers in the array [23, 123, 234, 54, 44, 2, 1432, 123, 8, 0].

Create a bubble sorting algorithm to order the numbers from least to greatest.

3) How I attempted to solve it:

I knew I needed to make a for-loop to iterate through the array.

I knew I also needed an if-statement to check if the indexed number was larger than the indexed number adjacent to the right of it.

My code logic* looked like this:

4) What happened?

This is what I got: [23, 123, 54, 44, 2, 234, 123, 8, 0, 1432, ]

So it seems like 1432 is in the correct position (based on the definition of bubble sort), but everything else seems to be off. I couldn’t figure out what was wrong.

5) What I ended up realizing:

After writing and rewriting the list and solving the sorting by hand 100 times, I realized I hadn’t even been following the structure of my own logic.

Once the if statement is complete, the loop iterates to the next index in the array. Therefore the number at index 0 of the array will always stay at the position. Hmm, if only there was a way to reset the loop to index 0 and run it again and again until the list was sorted................

6) THE FIX!!

There is! Another loop! I created an outer for-loop. The code now looks like this:

(I took this screenshot w/ more white space on the right so it looks better. The first screenshot is really in your face. Don’t worry, I know.)

I printed all the numbers returned after every iteration. This is the result:

[23, 123, 54, 44, 2, 234, 123, 8, 0, 1432]

[23, 54, 44, 2, 123, 123, 8, 0, 234, 1432]

[23, 44, 2, 54, 123, 8, 0, 123, 234, 1432]

[23, 2, 44, 54, 8, 0, 123, 123, 234, 1432]

[2, 23, 44, 8, 0, 54, 123, 123, 234, 1432]

[2, 23, 8, 0, 44, 54, 123, 123, 234, 1432]

[2, 8, 0, 23, 44, 54, 123, 123, 234, 1432]

[2, 0, 8, 23, 44, 54, 123, 123, 234, 1432]

[0, 2, 8, 23, 44, 54, 123, 123, 234, 1432]

(I took out the end comma, added brackets, and numerically listed them to make it easy for y’all to read so don’t @ me. :D )

Hope this helped! Thanks for reading :)

7) Summary and run-time:

Iterate through the array (inner for-loop).

Check to see if the current number is greater than the one on its right (if-statement inside inner for-loop).

Restart the for-loop over and over again until the list is sorted (outer for-loop).

Run times:

Worst Case: O(n^2)

Best Case: O(n)

Average Case: O(n^2)

*I wrote this code, but this isn’t the problem I was assigned. I wrote this code replaying my thought process in figuring out the solution. That is why this is an example problem.

*Also, I make lots of mistakes. There may very well be mistakes in my code even though it produces the correct output. Kindly correct me so misinformation isn’t spread. Thanks! :)

------------------------------------ EDIT -------------------------------------------

This optimization for the bubble sort was provided by https://purple-slippers.tumblr.com/

“There are no mistakes in your code that I’ve noticed, but it could be optimized.

Each iteration on the inner loop (the one with the ‘i’ variable) goes through the whole array. The outer loop makes it go through the whole array multiple times. There’s no need to check the whole array every time.

Why? The largest number ALWAYS ends up at the end after first iteration. The second largest ends up before the largest one after the first iteration. It’s how bubble sorting works. The biggest ones rise to the end of the array.

Therefore, it is not necessary to check the whole array 9 times. After ‘x’ iteration you’ll have ‘x’ largest numbers on the end of the array in the correct order. 1st iteration: largest number on end. 2nd iteration: 2 largest numbers on end in correct order. 3rd iteration: 3 largest numbers on end in correct order.

The outer loop could be used to skip these last, sorted out of sure places so it doesn’t make unnecessary comparisons.

Don’t want to take away the pleasure for solving it from you if you want to, but the answer is in the tag. :^)

Source:

chaipluscode

#oops wrong blog

#the answer ->

#for (i=0; i<10-j; i++)

#please dont take it like critique

#i just think its worth knowing

#your code and explanation are very good and understandable”

---------------------------------------------------------------------------------------