DEV Community: M-Shkreli21

Python If/else statements

M-Shkreli21 — Fri, 24 Mar 2023 21:40:28 +0000

Today I decided to tackle one of my first Python labs on conditional statements. At first glance the simpleness of Pythons syntax writing really stands out compared to JavaScript.

In JavaScript a developer has to know operators like "||"(or) as well as "&&"(and), in Python its as simple as using the words and/or. While it doesn't seem like a huge difference maker, when I first started learning JavaScript, I saw that I would often times overlook the operators or forget which were which.

Even though the examples above are straight forward and not complex, i'm still proud of my ability to translate what I know from JS so easily into writing Python functions. With Python, we don't need parenthesis or curly brackets left and right. If you are like me thats a small difference that can go a long way when writing a lot of code and debugging.

In Python, prior to version 3.10, there was no equivalent to a switch/case statement, we are able to flawlessly integrate a regular if/else statement, as shown with the calculator function example.

One aspect of Python functions that is new to me and I am excited to learn is the use of Dictionary Mapping. With Dictionary Mapping we are able to take a long list of conditions and instead of writing if/else statements until our hands hurt we are able to group all the conditions and values into a dictionary.

`dog = "cuddly

dict_map = {"hungry": "Refilling Bowl",
"Playful": "Play a game",
"Cuddly": "Snuggle"}

owner = dict_map.get(dog, "Reading Newspaper")
`

With this above method, we are able to apply the state of the dog to the dictionary keys and apply the state of the owner to the values of the dictionary.

So far for my first week with Python, I can see why this is considered one of the most popular programming languages, I am excited as I continue down the path of mastering Python!

Journey into Python

M-Shkreli21 — Thu, 23 Mar 2023 01:36:16 +0000

Hi All,

I recently graduated from Flatiron Schools Software Engineering program. Thanks to hard work and a lot of studying I am now able to call myself a Full Stack Software Engineer. Before I began my journey I tried teaching myself Python but felt that I needed a more structured environment so I stopped.

Now that I am done with the program I wanted to add more to my tech stack to help myself stand out more with employers.

During my first couple labs and readings, I feel as though Python is easier to learn than I previously thought, I am really excited to continue my journey and learning the language that got me interested in programming to begin with.

I will continue to post as my journey continues, thank you all for reading!

Hiding API keys with Rails

M-Shkreli21 — Mon, 23 Jan 2023 15:35:32 +0000

As developers, we tend to use API's to help us bring in the necessary data for our applications. API's themselves are a great resource that every developer should learn to use. Most API's require something that is called an API key, this 'key' is essentially a code that gives you as the developer access to use said API. However, due to the key being specific to each user that has signed up for one, this can pose a huge security concern if you try to use a simple fetch in your front end with the key in the url. There are plenty of ways that developers can hide API keys, but the one that I have used and found to be the most productive is to hide it in the backend.

By setting up your API calls in your backend, you enable yourself to create custom routes that can be used in your front end fetches. There are a few steps that need to happen in order to successfully hide your 'keys' in the backend of your app.

Step 1: if one doesn't already exist, create a .ENV file in which you will assign a variable to each API that you will be using.

Step 2: In your application should exist a .gitignore file in which you can choose what in your application gets pushed to github for other developers to view. Within that git ignore file we add the simple line of .env. Now when you commit and push changes to github the .env file will not be pushed with it.

Step 3: Once you have the env file setup and ignored, we can create an "API_controller" file that will enable us to write methods for each api path we plan on using. Within the url we will assign that variable from the env file for the actual API url. Example below:

Step 4: Now that our controller has been set up our next step is to create custom routes that go to that respective api method. When creating routes it could be as simple as get "/company_profile, to: "api#[custom api method]. Whats important to remember is that each custom route must have an HTTP method like GET, POST, PATCH, DELETE.

Step 5: Now the final step, with the backend successfully hiding each api we can use our fetches efficiently in the front end. instead of having the long api url in our fetch we can simply set it as fetch('/company_profile) and our app will know to go to the backend method, communicate to the api and bring in the necessary data without jeopardizing the security of our application.

Serializers with Ruby on Rails

M-Shkreli21 — Mon, 23 Jan 2023 15:21:15 +0000

With our final learning phase at the Flatiron School we began by learning about Rails, which is a library used for the Ruby language. Rails has done an amazing job of simplifying and automating a lot from plain old ruby. One of my favorite things about rails is the inclusion of serializers for the data that exists in your backend. Serializers are files within your app that allow us as developers to customize how users will see the data that exists. When creating our tables in rails we can enter 'Rails g resource [tablename]' and the serializer file will automatically be created.

After the file has been created it will default to show every column in your table (except the timestamps), from here we can edit which attributes we want to show when viewing data in our app. One thing that I have noticed most people take off is showing the id column from each table, since users themselves don't typically need to see the id for each data point brought in.

Serializers can do a lot more than just edit one tables data view. If associations exist between tables whether they are many-to-many, one-to-many, etc. we are able to show that relationship through serializers.

Think of a blogging application, a user can have multiple blog posts but each blog post belongs to one user. In our serializers we can establish the relationship like normal, users: has_many :posts & posts: belongs_to :user. From here we can see that when we use a tool like postman to view users we can see the associated posts that exist for each respective user. Even with associations like this, we can still filter through which attributes we want out user to see.

Rails has been an amazing resource for me when trying to create full stack applications. The initial setup and modifications make it so simple and helps ruby developers speed up the process in which they design and apply the backend files they need for each project.

React with MUI

M-Shkreli21 — Mon, 28 Nov 2022 15:00:04 +0000

As a part of phase-2 in the Flatiron School's Software Engineering bootcamp, we expanded our knowledge of JavaScript by learning how to use the popular JS library called React. At first I struggled a lot with react but as the week progressed, I felt more comfortable with how simple React makes JavaScript. One of the most fun learning aspect was teaching myself Material UI which is a comprehensive library of UI tools that developers can use for their web applications.

MUI does a great job of limiting how much CSS a developer needs when developing a web application. With most components using MUI we can add styling straight within the component code and most of the work just requires using separate code than the usual JSX we become accustomed to.

Regular JSX:

MUI:

As you can see with the two screenshots above, we implement component UI's from MUI and add our own styling for size, color, etc. MUI has a long list of possible UI tools that can help make any web application more appealing for both the developer and then end user.

A very important note to mention about using MUI is that when you include all your tools within your application, it will error out until you run the traditional "npm install" within the projects terminal. This will tell your application that you need to download the necessary modules in order to use the MUI tools you have written out.

My project partner and I decided to take full advantage of the tools MUI has at its disposal for our phase-2 project. Instead of having a long list of CSS styling for each component, we were able to import tools and make our application more professional looking. This was a very interesting learning experience given that we had just spent the last week learning React and now we decided to go above and beyond and try and teach ourselves MUI within the 4 days we had to create our project. It was a hurdle but at the end of the day, learning MUI has made React much more interesting to me than it was on day 1.

JavaScript Event Listeners

M-Shkreli21 — Fri, 28 Oct 2022 23:45:47 +0000

When I first began my journey in changing careers I felt a lot of stress and anxiety. That feeling only got worse my first day of Software Engineering bootcamp. I sat there listening to the overview of the course and found myself feeling the biggest case of imposter syndrome.

As we began our first week we started learning about something called "Event Listeners" using the Javascript language. Similar to a lot of beginners, event listeners sounded complex. My first example or two with event listeners just made me feel even worse about the concept. Knowing that I was going to struggle with this concept I decided to put more effort into mastering it than I would have imagined. Thankfully I have phenomenal class mates and technical coaches to help simplify event listeners and understand the logic behind them.

Now if anyone has read the above and feels like they also struggled with some new concepts, I would love nothing more than to share my understanding of the logic and application of javascript event listeners.

First and foremost, what are Event Listeners in JavaScript? Instead of providing a textbook definition i'd rather just share my own definition. Event listeners are pretty much exactly what they sound like. They are essentially built in listeners within Javascript that await user action to do something. In simpler terms, imagine you are on Yelp and you just visited a very lovely restaurant. You decide you want to share your thoughts and experience on yelp, you would write a review and click submit to send it for others to see. That submit action that takes your review and posts it for others to see is an Event Listener! Instagram is another example in that whenever you like a post you are clicking the heart and the application knows to listen to your click and update the server to display that you liked said post.

Setting up an Event Listener takes a few steps and I will gladly display how to go about setting up these events. The example I will be using is actually from a project I just finished this week. The project I made was a video game database based on a very popular FPS game.

element.addEventListener('EventType', function/arrow function{})

Step 1: Decide what event you want your code to listener for. Some very popular events include 'click', 'dblclick', 'submit', 'mouseover', etc. For a full list of possible events please check out the MDN documentation that I will paste below.

"https://developer.mozilla.org/en-US/docs/Web/Events"

Step 2: Decide what you want to happen once you have chosen an event. This step is a little interested because you have two options. You can use an arrow function to keep the event and function bundled together in one block of code. Your other option is to use whats called a callback function. A callback function is essentially a function that you declare somewhere else in your code, but you can call it from within the event listener.

Arrow Function in Event Listener:
element.addEventListener('EventType', (e) => {})
The (e) is basically the event, now the first thing you should do when setting up this syntax is to include the line e.preventDefault(). e.preventDefault is used to prevent the browser from executing the default action. Within these curly brackets is where the programmer will write the code block that will execute when you submit whatever event you have chosen.

Callback Function in Event Listener:
element.addEventListener('EventType', callbackFunction())
The difference in this set up is that instead of defining the block of code within the event listener you have defined the function in another part of your code. Programmers will typically chose to use callback functions because it allows you to use a function multiple times without having repetitive blocks of similar code.

-Step 3: Choosing what element of your code you want to listen for events. Whether you want to have the listener tied to an image, tab, button, etc.

For the project example I will show you the code I used to display the information about the in game characters:

In the above code the element I am choosing from is the image of the "agent" I had set up earlier in the code. The click event is essentially what it sounds like, when the image is clicked on do this =>. In my example I opted for an arrow function due to my code being more linear and this being the only instance of me using this function. I use different variables to create elements in the HTML file and assigned those variables text contents that are pulled from the free API that I was using. Once I have set up the desired content needed I appended each element to the desired div container I had set up in the beginning of the code. Now with the event set up, anytime I click on an "agent" in my browser their name, abilities and description are displayed for the user.

I am truly thankful that this project required so many event listeners because this allowed me to truly master the concept and be able to apply it in the future without any struggles. I hope that this post helps fellow beginners as they try to simplify concepts and apply them to their own projects.

As I continue this path to becoming a Software Engineer I look forward to learning more concepts and mastering them and truly turning this passion into a full fledged career.