Forem: Avery Ramirez

Epic React Fundamentals

Avery Ramirez — Fri, 09 Apr 2021 16:07:38 +0000

React Fundamentals

I recently began a new #100DaysOfCode challenge on Twitter to keep track of my progress through Kent C. Dodd's Epic React workshop. This course covers everything from hooks, patterns, performance and testing, which I will break down section by section in upcoming articles. The format of this course is different than anything I've done before, you're given some incomplete or broken code and are provided tips and descriptions to refactor the code into a working syntax. Today we'll focus on the first module, "React Fundamentals".

Intro to Raw React API's

In this exercise, we were tasked with adding in packages using script tags, and then using two newly accessible global variables, React and ReactDOM which allow you to create React elements and render them to the DOM.

Below you can see how the children and className props were refactored to use React, and the rootElement is now rendered instead of appended.

Using JSX

In order to use JSX, you have to convert it using a code compiler, in this case we're using Babel. Once Babel is added in, we have to update our own script tag to let Babel know we want our code compiled and ran in the browser.

After enabling Babel, we're able to use a simpler syntax to create our Hello World element.

Forms

Our objective here was to successfully create an alert showing the users input. By creating a submit event handler, and accepting the 'event' as the argument and the call, we can prevent the default behavior of the form submit. Instead of refreshing, the users input will show in an alert.

There are a few different ways to get the value of an input; via their index: 'event.target.elements[0].value', or via the elements object by their name or id attribute: 'event.target.elements.usernameInput.value'. Let's go with the second option since it's a little more specific.

Conclusion

These are only a select few exercises from the first segment of the course, there are quite a bit more, including some extra credit assignments. If you're interested in learning React but aren't sure if you have the prerequisites, I'd recommend taking a look at this article that tells you what JavaScript to Know for React, published by Kent C. Dodds. You can also check out the repository on GitHub for more information.

Give me a follow if you're interested in seeing more articles pertaining to the Epic React course. If you're a student of the course, let me know what your favorite parts were in the comments!

Key Takeaways: Functions

Avery Ramirez — Sun, 29 Nov 2020 01:47:25 +0000

JavaScript Functions

When we last left off in my previous post, Bootcamp 50 Days In Review, I mentioned that I was to the point in my bootcamp where we were starting to learn about JavaScript. We had a few lessons that went over some of the basics we needed to know, but the meat of the lessons came when we got to the section about functions. In our "Introducing Functions" section we covered arguments, multiple arguments, and the return value.

Our introduction to functions described them as "procedures that allow us to write reusable, modular code". We use them to define a chunk of code that we can then execute at a later point. The process to be put at it's simplest terms is to define a function and then run it, demonstrated plainly below:

Define a function called "printGreeting" that prints out the string "Hello!" Execute your function once.

Arguments

Arguments are accessible objects inside functions that pass the values through to the function. If a function is called with missing values, it's set to undefined. Below is an exercise demonstrating a single string argument, but also introduced us to template literals which allow embedded expressions.

Define a function called "yell" which accepts a string argument called "message". This function should print out an uppercased version of message 3 times.

Multiple Arguments

If you need to create a function with multiple arguments, you can define more than one parameter by separating them with a comma. Keep in mind, the order you put them in matters. Once you have all of your arguments defined, you have the option to return your content. The return statement ends function execution and specifies the value that is to be returned to the function caller.

Below is an exercise where we ran a function with multiple arguments to determine if the dice roll came out as snake eyes or not. It accepted two inputs, representing the two dice. If both of the numbers are 1, print "Snake Eyes!", otherwise print "Not Snake Eyes!".

Return

The return keyword does just that - returns values when we call them. We can store these values inside of a function as well. Previously we used console.log to call these values, however it doesn't allow us to return the value and store it in a variable.

To demonstrate this, we did a simple function called "multiply", that accepts two numerical arguments and returns their product, by multiplying them together. Instead of just printing it with console.log, we're going to return the value.

When run, this returns the sum of your x and y arguments.

So that's it for our Introduction to JavaScript Functions! In the next article I'll talk about leveling up our functions using things like scope, function expressions, and defining methods.

- Avery Ramirez

Building My First Website

Avery Ramirez — Sun, 15 Nov 2020 03:13:36 +0000

Building My First Website

Over the past couple of months I've built quite a few webpages, however they were mostly based on source material from my bootcamp. This is my first attempt at starting a personal website for myself from the very beginning, using everything I've learned along the way and incorporating a lot of new knowledge I came across while building it. The following is a detailed step-by-step of my process and how it all came to be.

Admittingly, this took a little bit longer than I wanted it to because I scrapped an older version of the site after I was displeased with how it was going. I was overthinking things and it became more complicated than it needed to be. So I started over. The first thing I did was choose my background image, a photo of myself, and figure out the positioning of it. By doing this I was able to mentally map out where I planned to lay out everything on the page. For the most part all of the content is justified and aligned in the center, I wanted to make sure that it looked good on both desktop and mobile. However, I learned a lot about media queries and flexbox while creating this site, so I plan on getting more creative with the layout as time goes on.

I wanted to keep it simple and clean so I just opted for a statement h1, which I figured should just be simply my name, Avery Ramirez. A lot of the other personal websites I was seeing used some artsy cursive scripts, I tried a few of those fonts but realized they weren't really my style, so I went with the font 'Alegreya Sans SC'. I chose to do a text shadow that complimented the colors in the background, adding some dimension. For the paragraphs I chose a simple white font, with all capital lettering. Since there's only a few sentences I wanted the text to appear starkly against the dark background, but still differ from the headers. This is where I also started to add in more margins and padding.

I decided to share a few of the projects I've completed from my bootcamp, which I detailed in my previous post, Bootcamp 50 Days In Review. Ultimately I chose to use cards to display the projects, I liked that they offered easy styling while keeping everything in order and contained. I kept the screenshots opaque, but wanted the card background to be semi-clear so you could still see the background image underneath. Clicking the image results in the projects folder on GitHub in a new tab.

The final thing I did was add the navbar and style it. I like when websites have various opacities to them, so I went with a fixed navbar that was just slightly sheer black. I added in links for my Twitter, GitHub and Dev.to pages and created a text-shadow effect similar to the one on the header. I really like how the links look in the mobile version, appearing to have a sort of 3-D effect.

Overall, I'm really proud of myself for executing something this solid on my own. I look forward to this ongoing project and am excited to see how my webpage changes as I learn more. Feel free to check out the finished product, linked below!

- Avery Ramirez

Bootcamp 50 Days In Review

Avery Ramirez — Tue, 03 Nov 2020 04:01:01 +0000

Around two months ago I took the plunge into Colt Steele's Web Developer Bootcamp on UDemy and this is a deep dive of what I've learned in the first 50 days. I'm currently tracking my progress with #100DaysOfCode on Twitter, where I've posted tidbits about what I learned or worked on each day.

We started off learning both basic HTML and CSS pretty much simultaneously, as we'd typically create a page with HTML and style it somewhat using CSS. Over the first week we covered:

Common HTML tags
Referring to MDN
Specificity
Selectors
Fonts and colors

Below is a screencap of the webpage we made for a Selectors Exercise that put all of the first week material to the test. It may not be pretty, but it really helped me visualize what I was doing.

We then began learning about including images in webpages and Bootstrap:

Navs
Grids
Forms
Spacing utilities
Flexbox

We used a Navbar, a Jumbotron and rows of images to create a photo blog, I used photos from my wedding for content.

Afterwards we used Flexbox to create a landing page for the "Museum of Candy", this was a great lesson on how to scale depending on the size of the screen the page is being viewed on.

I started the "Intro to JavaScript" section on Day 26. This course goes over JavaScript very thoroughly and I'm currently still progressing through it. Most of our work was done in the Google Chrome console, so while I don't have a lot of projects to show from JavaScript, we've covered a ton of material:

Primitives
Variables
Boolean logic
Logical operators
Conditionals
Alerts
Prompts
Loops
Functions
Arrays
Objects
Strings

One of the projects we did with JS was a Score Keeper. This was very simple on the surface, but allowed me to see JavaScript in action. Up until this point we were mostly doing exercises in the console, so it was a welcome change.

The biggest project we have done thus far was a RGB Color Guessing Game. This game factored in most of the material we've covered, using a lot of HTML, CSS and JS. You must figure out the color by the provided RGB value, as you guess the boxes fade away if you're wrong. Once you've figured out the correct color, all of the boxes and the header change to that color. It's on the Hard setting by default, however changing it to Easy gives you only three options to choose from.

On Day 44 the bootcamp instructor did a complete overhaul of the course, adding in and updating a lot of the courses. At this point I was in the middle of the jQuery section, which he said wasn't required learning, but was still beneficial to know. Once the course was updated this section was removed. He added in a bunch of new JavaScript material, so I started back at Intro to JavaScript.

The first 50 days have been challenging, but very rewarding. I'm looking forward to the next 50 days, and the many days after that I've committed to learning. If you're interested in further reading, check out my Twitter or my Github accounts, both of which are linked on my page.