DEV Community: Ciara Cloud

CORS and why I don't hate it so much anymore

Ciara Cloud — Wed, 05 Oct 2022 04:04:30 +0000

I am sure that every developer has come across at least one annoying CORS error before, and if you are new to coding and haven't experienced it yet, it's coming!

When I think of CORS, I think of that annoying bug that flies around your face when you are trying to get work done on your computer (maybe that's just because that's been my situation for the past twenty minutes 🙄). The point is, it's easy to want to find a quick fix for it on google in order to move on to more exciting things.

Something I have learned in the past few weeks is that having a deeper understanding of why something breaks or isn't going your way is much better than trying to bypass it as quickly as possible, even if the process ends up taking longer. I say this for many reasons. The first reason being that when the same (or similar) problem happens in the future, I will have an indication of where to start solving it - if I don't already know the solution. Another reason is because of the learning process. When I was researching CORS, I was forced to dig deeper into multiple topics that were all connected to CORS in some way, which ultimately helped me understand the bigger picture better.

Now enough about the benefits of the research process and on to what I learned about CORS:

CORS stands for Cross Origin Resource Sharing, and to make the definition as obvious as possible, it is a browser-based mechanism that allows services to share resources across different origins.

The server is able to specify which services are allowed to access its resources via HTTP headers. For example, a browser will send an HTTP request (with its origin) to a server with request headers and the server will reply with HTTP response headers (letting the client know if that origin is allowed).

Examples of CORS response headers:

Access-Control-Allow-Origin: Indicate which origins can access its resources (* can be used to allow all)
Access-Control-Allow-Methods: Specify which methods are allowed to be used (ex. GET, POST, PUT, OPTIONS)
Access-Control-Allow-Headers: Indicate which headers can be used

If the request headers follow all of the rules of the response headers, then CORS is enabled properly and the resources can be shared across the different domains. If you are getting a CORS error, take a look at the response headers being provided by the server and make sure that you are allowing the client origin. Sounds easy enough! Of course there's more to CORS than I mentioned here, like preflight requests, API gateways, etc, but I am happy that I can now understand why a console yells about CORS.

Ultimately, the reason I don't hate CORS anymore is because I have a better understanding of it now. So I will keep that in mind the next time I encounter a bug (not referring to the one that was flying around my face earlier, that one had to go)!

Resources:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#:~:text=The%20same%2Dorigin%20policy%20is,documents%2C%20reducing%20possible%20attack%20vectors.

Smoothie Time

Ciara Cloud — Fri, 15 Apr 2022 14:24:01 +0000

Food cravings can be powerful. For instance, my craving for a refreshing and delicious smoothie inspired the concept behind my web application, "Too Smooth". I thought it would be great to have an app where I could search popular smoothie recipes and save my favorites to reference when I wanted to make a smoothie.

There was definitely more that went into the idea, but due to lack of time, I will have to keep the rest as future goals. I would love to add a "build your own" page where the user can combine multiple ingredients together and add that smoothie to their favorites list.

I also had the idea to make a smoothie planner where the user can plan out the smoothies that they will make for the week and a grocery list can be generated based on the ingredients that they needed for all of their smoothies.

The color palette that I chose for the app was inspired by colors of refreshing fruits and vegetables.

Overall, I am happy with my app! I would love to keep building on it in order to make it even more useful for the user. If you would like to see my code for the app, check out my Github repo here !

My Egg-citing Weather App

Ciara Cloud — Mon, 28 Feb 2022 02:26:17 +0000

When my instructor at DigitalCrafts told my classmates and I that we had to build a weather app using an API, I knew that I had to hatch a plan to make the app functional and entertaining! There was no yolkin' around!

The process started with me searching the internet for images that fit eggs-actly what I wanted. I would use a sunny side up egg to represent sunny weather, fried egg for cloudy weather, runny yolk for rainy weather, broken egg for thunderstorm, scrambled egg whites for snowy weather, and regular scrambled eggs for all other weather conditions.

Once I found the images, I tested the Open Weather Map API. I found the Postman application eggs-tremely helpful during this step because it allowed me to test my links by mimicking the front end.

After I tested the link with my API key, I was able add the url to my code. I wrapped the url in an asynchronous function, in order to fetch data from the url and convert the data to JSON. From there, I could access specific data from the JSON object(s) by using dot notation. Then, I added the data to elements that I created in the DOM (see code snippet below). I repeated this process until I had all information that I needed for the weather app displayed on the screen.

Now that the app is completed, users can look up a city's weather by typing in the zipcode for the city. The daily weather will show up with the egg for the current weather, as well as the weather forecast for the next 8 days and their corresponding egg images.

Check out the video walk through here!

If I had more time, I would add CSS for the loading page in between the zipcode search and weather information, but overall I am pretty eggs-tatic about how the weather app turned out!

If you'd like to see my code, check out my github repo (keep in mind that you will have to add your own api key for Open Weather Map API in order to test it).

Cats and APIs

Ciara Cloud — Fri, 25 Feb 2022 14:56:59 +0000

I don't know why, but I feel so cool when I tell people that I used an API to build my project. Maybe because it sounds like AI, but also maybe because I get to explain to them that I am fetching data from another site in real time and using it on my website.

Combining APIs with DOM manipulation is a game changer! Your website goes from being a pretty page, to something that can actually be used in the real world. Not knocking pretty pages at all by the way, I love them all the same.

This week at DigitalCrafts, we had four days to create our first front end API project. For my project I wanted to incorporate something with color and branding, so I decided to make a brand kit generator.

The user can type in their main color, product, brand name, and choose their favorite font combination from the ones provided and a brand kit will be generated for them. The brand kit includes a color palette, their brand name in the color and font they chose, and images of the product they want to offer. Did I mention that as you're doing this a cat named "Brandy" will be cheering you along?! Which brings me to the name of the website, Brandy.

Check out my video walk through here!

Take a look at the images below to see how the process looks:

If you'd like to see my code, check out my github repo (keep in mind that you will have to add your own api key for Unsplash Images API in order to test out the website).

P.S. I drew Brandy the cat on the digital illustration app Procreate. She was inspired by my own cat, Kiwi.

Easy Way to Make a Div in HTML (using VS Code)

Ciara Cloud — Sun, 13 Feb 2022 21:07:49 +0000

Although I am new to web development, I can 100% appreciate a shortcut for writing code.

While I was watching a tutorial video, I saw someone use this shortcut for making a div with a class name or id name in VS code. It blew my mind and I just had to share!

Instead of writing out the complete div tag plus the class or id name, write the class name with a period in front of it, or the id name with a pound symbol in front of it. Press enter and you're done.

To make a div with a class name:

press enter

To make a div with an id name:

press enter

P.S. I hate to admit it, but I feel 10x cooler when I make my divs this way!

I Made a Working Calculator Using Javascript

Ciara Cloud — Thu, 10 Feb 2022 03:08:47 +0000

Today my classmates and I (at DigitalCrafts) were given the assignment to create a basic calculator in Javascript. Sounds simple enough, right? Well, my classmates and I were joking around about how we had just been introduced to what a DOM (Document Object Model) was earlier in the day and now we were creating a whole mini project in Javascript, manipulating the DOM based on what the user clicks.

With that being said, learning Javascript is challenging and exciting! With the few days of exposure that I've had to it, I can see how powerful and complex it is.

Something new that I learned today was the addEventListener() method. Here's a snippet of my code to show how I used the method to make part of the calculator work (I'll explain a little below):

clear is the variable that I created for my clear button in Javascript, which is an object.
The event that I am waiting for is a "click". To be more specific, a "click" on the object that the method is attached to (in this case, the clear button).
() => {} is another to write a function. It is the same as writing function () {}. Functions that do not have names are called anonymous functions.
Once the event happens (the "click" on clear), the anonymous function (() => {}) will run. In this case, I wanted to make the equation array and input value empty.
The anonymous function in the method only runs once the event happens.

When I first saw this method, it seemed daunting, but the more I broke it down, the easier it was for me to understand.

Overall, I am satisfied with the simple calculator that I built today, but I would love to revisit it when I have the time to make it more complex!

If you'd like to see the code for my calculator, click here to visit my github repository!

I Made My First RPG in Python

Ciara Cloud — Fri, 28 Jan 2022 03:06:20 +0000

To start, I don't know if playing an RPG in the terminal on your computer will fulfill the full RPG experience. However, building this game in python allowed me to dissect the process of how more complex RPG games are constructed.

The overall goal of my game is to win a battle against the enemy, Vivian, so that the user can make it to their interior design interview and get the job! The user can choose which character they would like to be during their battle against Vivian. I created a class to make each character and give them their own attributes, such as their own name, starting health level, strength level, and attack options. All characters and their attributes are displayed by invoking a function that I created to print the character menu. From there, the user can input which character they would like to be and the game will continue with that character. Once the user is in the battle with Vivian, they can choose which attack option(s) to use against her and the game will continue until a winner is chosen. I made this possible by creating a game loop that allows the user to attack Vivian and for Vivian to attack back until either one of their health levels reach 0 or below.

If the user does not put in the correct information, the game will not continue until they have provided a choice from the options that are given. This is where I had the most trouble in my code. At one point I thought I was finished creating my game until I did a few test runs and noticed that when I put in the wrong information, the game would not continue as I wanted it to. Having to go back into my code and fix these errors ultimately led to me finding a more efficient way to write my code. For example, initially, I had a lot of repeated code, so when an error would happen, I would have to go back to each repeated line of code and change it in order to find the issue. I quickly realized how inefficient this was and found a way to eliminate the repeated lines by taking some code out of loops and making some information dynamic. Ultimately, I removed approximately 200 lines of code from my file and the game worked even better than it did originally (after I fixed the errors, of course)!

Overall, I had a lot of fun making this RPG! My favorite part of creating the game was that the whole process felt as if I was playing a coding game in Python. I would be coding along and then BAM, I was battling a while loop or else statement that wasn't executing properly. Each time I solved an issue in my code and got it working the way I wanted it to, I would do a mini dance to celebrate my victory (for my cat's eyes only)!

If given more time, I would expand this game into an interior design game that gives the users a certain amount of money and the ability to shop/design for different characters. But, that's for another day!

If you'd like to test my game, here's the link to my github repository.