Forem: AnneMiriam

Finally Made It Through the Fog!

AnneMiriam — Fri, 16 Feb 2024 00:31:02 +0000

Well, here we are! I have finally made it to week 15 of my 15 week boot camp at Flatiron School. 22 weeks ago I wasn't sure I was going to make it. Learning full stack development(4 languages) in 12 weeks with 3 weeks for a final capstone project seemed impossible.

I had started my Javascript journey some time at the end of 2022, with a 4 hour intro to JS offered by another boot camp. I applied to Flatiron because it was 3 weeks longer than most boot camps, and it offered some help navigating the job search after completion. I was accepted in the spring of 2023 and so, by June, I was able to start the phase 0. Phase 0, or the pre-course, aims to get you going on JS before you start the official boot camp, and I struggled a bit to complete it. I kept doubting that I could figure it out. Foreign languages are hard!

I started phase 1 in the middle of September. I felt like some fundamentals were starting to click, but arrays and objects were tripping me up. I failed the first code challenge, but I figured I still had a week to figure it out. Then I failed the second code challenge, which meant I failed the phase.

I had been so close, too. All I needed was a parseInt(), but for the life of me a couldn't recall how it worked.
It should have looked something like this:

In retrospect I also realised that I had failed to subtract tickets sold from the capacity to get the remaining tickets. 🤦‍♀️
*read instructions carefully!

At Flatiron you are allowed 1 repeat. So, the process was started to move me into the next cohort. Although, thankfully, they don't have you repeat immediately. There was a cohort starting the very next week (Oct 2), but they like to stagger the repeat meaning I would join the cohort after the next, so Oct 30th was my new start date. That meant I had a whole month to get ready for round 2.

My sister, who is a Front-end SE herself, gifted me a Udemy course on how to become a Web Developer. I didn't get all the way through it, in fact I don't think I even touched the back-end portion, but the beginning of that course was all about JavaScript. I skipped through the HTML and CSS portions, planning to go back when I had the time(which I haven't had). I focused on just the JS stuff, and suddenly learning the same things I had just learned for 3+ weeks finally started to make sense. I finally understood what the heck a Modulo is!

When it came time to start on Oct 30th, JS made a lot more sense. Which in turn helped React(Phase 2) make sense.

Phase 3 at Flatiron is all about diving into the backed with Python. The delete and repeat approach with the labs, I learned in React, helped a lot with getting past the code challenges. Having JS under my belt, also, helped make Python a little less daunting, it was a lot about the changes in syntax. Of course, however, I continued to have a voice in my head that said it will never make sense. But that voice was never as loud as it was in week 1 of my first cohort.

Phase 4(Flask) zipped by in a blur, and now here I am standing at the end. That fog that I thought I would never see through had finally started to lift. I feel that I still have a ways to go in my learning, but at least now I have a good foundation. There will be a lot of continued studying on my own. Perhaps, I'll finally finish that Udemy course.

I'm super excited to present my capstone project. A social app where people can share their beloved collections of things they saved from their childhood, or even things that they got as adults that mean a lot to them.

My hope is that eventually it will have a forum on it, where users can post inquiries about finding a certain item. That portion came to mind as I had been thinking of how I could find something I've searched the internet for, for years, and ultimately how the idea for this app came to be.
*There was a VHS tape featuring episodes of the Chipmunks, that I LOVED as a child, to the point that it no longer plays properly. I have searched for years to find another copy. I thought if there had been a place where like minded people could post such searches it would be helpful. It also didn't help that searching the title of the video brought up another, more accessible, Chipmunks movie.

What is she rambling about?
The point I'm trying to make is if you are thinking of going to a coding boot camp, or maybe you have already started one and are feeling overwhelmed. Don't give up. It is hard work, but if you commit to trying you may surprise yourself. You could be standing with me at the finish line, wondering where did the last 3-4 months go?
Some words of wisdom that I repeated to myself:

And if your anxiety is trying to derail you:

Clear skies, clear skies!

*I did actually find the video back in December on eBay. Now I need to find a VCR that works!

Image Sources
The Fog and other personal images - by Anne Hastings

The following images may be subject to copyright
https://www.meracalculator.com/math/modulo.php
Disney - Finding Nemo, Encanto
The Barbie Movie

You Faker

AnneMiriam — Sat, 27 Jan 2024 01:21:44 +0000

Here we are at the end of week 12 at Flatiron School. In this phase, p4, my cohort mates and I were introduced to Flask. We're finally working with back-end and tying it into our front-end(React). It has been really exciting, but also very nerve-racking. We are so close to the finish line, only 3 weeks to go, but we also now have to go back and remember that stuff we possibly haven't touched in 5 weeks, because we were so focused on learning Python.

And did I mention Deployment? 🤯 Trying to weed my way through that whole process has begun to add a whole new level of stress. But that's another story.

I have been feeling the imposter syndrome a lot this last week. Getting back into React things looked familiar, but I felt like I didn't know what I was doing. I kinda felt like I was faking it! Which happens to be something Python can do, with the Faker library.

What is Faker?

Faker is a Python library that allows developers to create fake data, such as names, addresses, sentences, and email addresses. It gives you a simple way to produce random data that looks like real information.

Why Would I Want to Use Faker?

It is good for testing or simulating interactions. We all likely encountered it in our phase 4 projects, as we had to create databases that shared connections with other databases in one-to-many and many-to-many relationships. It would have taken a lot of time to manually fill in those databases with information that we would have had to make up anyway. So, in comes Faker.

Let's look at what Faker can do!

Faker can create names:

name() = a random full name
first_name() = a random first name only
last_name() = a random last name only
prefix() = a random prefix(Mr., Dr., Ms., etc)

Faker can create locations and addresses:

email() = a random email address
address() = a random street address
city() = a random city name
state() = a random state name or abbreviation
country() = a random country name
url() = a random URL

Faker can create dates and times:

date_of_birth() = a random date of birth
date() = a random date
time() = a random time
date_time() = a random date and time

Faker can create writing:

text() = a random paragraph(non-sensical)
sentence() = a random sentence(non-sensical)
word() = a random word

Those are just a sample. Faker can also create phone numbers, credit card information, numbers, and colors, to name a few more.

Lets see how it looks in our code 👇🏻

Those all look reasonably real, if you don't look too close.

Faker's limitations

Faker can randomize locations, but it is limited to predefined locations. So, if you are trying to generate data for a specific region, it may not work.

Also, if I try to look up any of the output from above, like South Cynthia, in Google Maps, the first match for a destination is S. Cynthia St., McAllen, TX. It is not a town in Oklahoma. When I look up the zip code, I found that it belongs New Orleans, LA. Another run of the same code gave me the postal code, 26368, for a city called Kupinik, in Serbia. Not South Adam, MO.
If we look at the phone number, the country code(+1) is the USA, but the area code does not currently exist. 375 is the country code(+375) for Belarus.
*Fun Fact - on a little further digging, according to KMPH Fox 26, the Central Valley will be getting a 375 area code once they run out of 559 numbers.

Where does Faker really struggle?

Like I said above, if you don't look to close, the output looks good. But is there a situation where it's obviously not real?
Yes!
I give you: sentence()!

That sentence makes as much sense as the look on my face and that outfit(and my sister's outfit, behind me, given that it was Christmas. Ah, the 80's!).

Conclusion

Faker has some good uses and just like anything fake, not so good uses. If your using Faker to just auto-populate some databases that aren't really going to be seen, fake away! But if that data might actually be seen or needs to make sense, your better off manually entering it.

Happy Faking!

Resources:
Tellez, M. 'New area code coming to Central Valley'. Published 21 December 2023. Retrieved on 26 January 2024, from
https://kmph.com/news/local/new-area-code-coming-to-central-valley-357-overlay-geographic-fresno-county-san-juaquin-madera-mariposa-merced-tulare-kings-counties-clovis-porterville-reedley-selma-visalia-coalinga

Das, M. 'Faker: Python is Just a Fake Away!'. Published 9 August 2023. Retrieved on 19 January 2024 from https://medium.com/@HeCanThink/faker-python-is-just-a-fake-away-ef626a0dcf8d

Let's do some decorating!

AnneMiriam — Sat, 06 Jan 2024 00:43:33 +0000

Just like in JS, functions are first-class methods, meaning that they can be passed as an argument inside another function. And that's what Decorators do, they are essentially a function that you wrap around another function using the @ syntax.

In Python there are a number of built in functions that we see as decorators. Some like property can be used as a decorator or as a regular function.

Some common decorators include:

@classmethod
@property
@wraps
@abstractmethod
@staticmethod

So far, in my learning, I have really only used the 1st two examples above. Lets dive into them.

@classmethod
A class method binds to the class itself and not the instance, or object, of the class. Class methods take the class as the first argument, as "cls", rather than instance(self).
Class methods can modify a class state that applies then to all the instances of the class.
An example of a class method that we used:

In the create_table class method, we are creating a table that maps our Enemy class to a database called enemies. This new table will persist the attributes of all Enemy instances.

@property
Properties are attributes that are controlled by methods. We use a method to get the attribute and another method to set the attribute. The setter usually defines things like whether the attribute needs to be a string(str) or an integer(int), as well as if it's mutable or how long it can be.

The property method can be written as a regular function, like so:

Or it can be used as a decorator, like this:

The property() was created before the @decorator syntax, but the @property decorator is most often used today.

Now, a little bit about the other examples that I listed, but didn't learn in school.

@staticmethod
The static method, like the class method, belongs to the class itself, and not the instance of the class. But unlike @classmethod it does not have access to an instance or its attributes, and therefore cannot modify them. Hence, static - lacking in movement, action or change(Oxford Dictionary)!

What situation would you use @staticmethod:

when you need a function that is related to the class, but doesn't depend on the state of instances.
when you want to define a function that calls directly on the class.

@abstractmethod
We did not learn about the abstract base class, but they are what use the abstract method. An example of the use for the abstract method would be on something like a Shape class that is the base class for other classes of shapes:

Above, Shape is an abstract base class with 2 defined @abstractmethod's, are and perimeter. The Circle and the Square classes, or subclasses, must implement the abstract methods that the base class defined. If the subclasses don't implement the methods then the class becomes an abstract base class as well. And in so doing, the user won't be able to create instances, they will get a TypeError.

When should you use @abstractmethod?

when a user wants to ensure that all subclasses of a base class implement certain methods and behaviors.
when a user wants to define a base class to provide common interfaces for a group of subclasses.

*Don't forget to import ABC and abstractmethod from abc. 😉

@wraps
The wraps decorator is a utility decorator that is part of Python's builtin functools module.
A function defined with the wraps decorator gets its original metadata, behavior, and attributes preserved.
Here are two examples of its use:

==> Output: "Calling function add_numbers with args: (3, 5), kwargs: {}

When to use @wraps?

when a user wants to define a decorator that wraps around another function, and you want the wrapped function to preserve the metadata of the original function.
- in other words: To use the wraps decorator is to create custom decorators. These custom decorators wrap other functions with the original function.

*remember to import wraps from functools! 😉

Sources:
"classmethod() in python". @GeeksforGeeks, Sanchhaya Education Limited. Retrieved 4 Jan. 2024 from https://www.geeksforgeeks.org/classmethod-in-python/

Dr. Karhade, M. MD. PhD. "Most use python decorators: when to use and when not to". Published 22 March 2023. Retrieved on 5 Jan. 2024 from https://levelup.gitconnected.com/most-used-python-decorators-when-to-use-and-when-not-to-32b8f883ee43

Mwiti, D. "Python decorators tutorial". Published Oct. 2017. Retrieved on 4 Jan. 2023 from https://www.datacamp.com/tutorial/decorators-python

React Context

AnneMiriam — Fri, 08 Dec 2023 22:36:00 +0000

What is Context and when should it be used?

What is Context

When you first learn about React, you learn about state and props and how they are used to allow data to flow from one component to another. But what if you need to pass the same data to components that aren't parent and child to one another? Thats where Context comes in.
Context allows us to share data "globally" between components without the need to pass props. Essentially, sharing data just got easier.
Context has createContext that helps create a context object, and useContext is the hook that allows the data to be passed.
Context avoids the need for prop-drilling - the passing down of props through multiple levels of components that don't need the prop, just to get it to a deeper nested component that does need it.

So, with our example above, we see that the Interests component needs the theme, but it's parent doesn't. With prop-drilling the theme prop is passed down from the App to the Profile(where it isn't used), and then passed straight down to the Interests component.

When Should Context Be Used

Context should be used when an element needs to be used globally. The data shouldn't need to be updated very often either.
Examples of things that should be placed in Context:

Language
Themes
User data (current authenticated user)
Audio (a music app)

How Do You Use Context

The first step is to create context. Here is an example from a music app I was working on.

This created a context object called MusicContext. Context data have two components the context object and the provider. Before I move on to showing the provider, I want to show that in my music app, I went ahead and called my context hook useContext. It is paired with my context object and looks like this:

You don't have to do it that way, you can wait and use the hook in the components where you need to call the context. The way I did it means that I just need to call my useMusicContext = value. The Value is declared by the provider 👇🏻.

Here is an example of what that same music app's provider looked like:

The provider gives access of the context data to the child components.

Here is what the component looks like all together, including it's export variables.

Now that I have my Context, what do I do?

The next step is to wrap the Provider component around whatever component children will need to access the data. This usually occurs in one of the top most levels in your component hierarchy.

Using another example, where a UserContext and UserProvider had been created, the App component imported the UserProvider and wrapped it around the Header and Profile components, to pass down the theme.

In this example the value being passed to Header and Profile is [user, setUser]. When Header calls the context this is what it looks like:

The Profile component looks similar:

So recap our steps:
1.) We created a context using the createContext method.
2.) We then took that created context and created a provider to wrap around our components.
3.) In the that provider we created and defined a value prop that could be passed down.
4.) Lastly we called that value within our components, that had previously been wrapped by the provider, using the useContext hook.

The end result of the UserContext example is:

As for the Music Player:

The MusicPlayer was able to continuously play the song, uninterrupted, as I moved from the Explore page to the Home page.

Sources:
Barger, Reed. "React Context for Beginners – The Complete Guide (2021)". Posted 21 July 2021. Retrieved from https://www.freecodecamp.org/news/react-context-for-beginners/ on 6 December 2023.
"React Context". Flatiron School/GitHub. Retrieved from https://learning.flatironschool.com/courses/7022/pages/react-context?module_item_id=624604 and https://github.com/learn-co-curriculum/react-hooks-use-context November 2023.

Understanding the Difference Between Parameter and Argument

AnneMiriam — Mon, 13 Nov 2023 05:11:52 +0000

I know that a lot of people have probably done this topic before me, but for the longest time it still didn't click. And I see others struggle with this all the time. So, I thought that perhaps I'd try to explain it in the way that made sense to me.

So what is the confusion about? Well, the confusion lies
in the fact that Parameters frequently get called Arguments! But they are not the same thing. So, what is the difference? Lets define them!

What is a Parameter?
Parameters are a part of your Function! They are the words that go inside your function's parenthesis( )! They are the names listed in the functions definition.

Function Declaration ex:

Function Expression ex:

Some functions call for multiple parameters that are separated by comma's.

Example:

Here are some things to keep in mind about Parameters:

parameters don't specify data type
parameters can be undefined
parameters can hold a default value

ex:

this way, if b is not passed in the argument or is undefined, b will equal 2

ex:

Most Important to remember:
A parameter is a placeholder and has no real value! A parameter can be named anything. It is recommended, however, that when you name a parameter, you give it a name that refers to the information it will be taking in.

What is an Argument?
Arguments in this discussion are a value used to help invoke the function. It also goes inside the parenthesis ( ). There is a lot more to arguments, but right now I'm focusing on how it compares to the parameter.

Example:

Unlike the parameter, the argument receives an actual value. We then pass the assigned value of the argument into the parameter's variable placeholder.
Some extra things about arguments

arguments are data types
- they can be a string, a boolean, a number
arguments can also be variables

arguments can also take expressions

Last note:

A parameter is only defined once, at the time of function declaration.
An argument may be defined multiple times, meaning it may change each time the function is called.

I hope this helped for some more people, who like me struggled to make sense of the difference between parameters and arguments.

To leave you:

| |

Sources:
Freeman, Eric, and Elisabeth Robson. Head First JavaScript Programming: A Brain Friendly Guide. O'Reilly, 2014.
'JavaScript FunctionParameters.'W3Schools.com, Retrieved 9 November 2023 from (https://www.w3schools.com/js/js_function_parameters.asp)
Mustafeez, A. Z.'Parameter vs. argument'. educative.io. Retrieved 9 November 2023 from (https://www.educative.io/answers/parameter-vs-argument)