Sign in

Kayla Budzeak

Why the career change? I think my story may begin like a few others over the past year; I lost my job due to COVID-19.

My last job was as a Concierge at a luxury cruise line, and I thought that just maybe I had found my ‘lifer’ company. And then COVID happened. My hopes, dreams, and plans were all seemingly swept out from underneath my feet when I got the official letter, and meeting, from my company that said:

‘We are sorry to inform you, that due to the current pandemic and the business situations at hand, that you…


Insta-mail!
Insta-mail!

Ok, not really. This week I’ll be covering how to create a link that when clicked automatically opens a draft email in the user’s default email application and prepopulates a to: address.

Have you ever clicked on an email icon on a web page and have it auto-open your mail program and automatically create a new draft? No? Huh. Well for those that have, I’m going to be covering how this is created in React/JavaScript this week so that you can see what has been coded in for this to happen.

So first we’ll need to create a link; something…


Same page link-age
Same page link-age

Have you ever wondered how to create a link to an element that is not on a different page, but on the same page as your link?

While creating my portfolio page I had this very confounding issue. I knew how to create links <a href=""> so I started there. I gave each of my elements that I wanted to link to a unique id and passed that id href="#projects".

This worked wonderfully until I looked up at my URL…oh no! My href tacked /#projects onto the end of my URL! This was an unintended side effect that I definitely…


What the <>! What are fragments?
What the <>! What are fragments?

Fragments, <> </> are a way of wrapping a group of other elements within a React app, without creating an unnecessary <div> element.

React requires that every component returns one, and only one, ‘parent’ JSX element like so. Because of this react rule, HTML-like elements, such as <div> are often used to wrap other elements within the JSX of our return; but these extra div’s that are created, aren’t always useful or necessary:


Mean Girls Gretchen Weiners That is so fetch!
Mean Girls Gretchen Weiners That is so fetch!

Alright ladies and gents, this week I am covering fetch requests within a JavaScript/React app!

So what is a fetch request? Most simply put, a fetch request allows us to communicate with the database. It allows us to make requests to the database server without reloading the page, and then work with the data that we receive back. It is a way to load additional data after information is already presented to the user.

Syntax:


Container vs. Presentational

Components in React allow us to divide our webpage into independent and reusable pieces, which allows us to think about each piece individually. This helps with our Separation of Concerns principle as it lets us separate these pieces (components) for both functionality and presentation in our code!

Container Components

Container components are aptly named, as they are used primarily as a container for our presentational components. They are mostly concerned with how things work, and typically do not contain any HTML of their own, other than wrapping a presentational component in a <div> tag. …


JavaScript Events
JavaScript Events

Have you ever wondered what happens when you click on something in your browser? Like, when you click on a picture and something pops up on the screen? This is an example of a JavaScript Event!

JavaScript gives our browser the ability to “listen” for things (events) that happen within it. These events then trigger some kind of work, such as a function, to occur when they are detected.

Some of the more common events are what are classified as mouse events, like 'click', 'scroll', 'right-click', or even 'mouseover'. Other common events include keypress events and form submissions.


Ruby for Loops
Ruby for Loops

Loops tell our program to do something over and over; imagine hitting replay/repeat on your favorite song.

Syntax:

for [variable] in [expression]
[code]

end

Using the above syntax our program will execute our [code] once for each element in our [expression]. For example, if we have our expression defined as a range of 1 to 7, our for loop will execute our code 7 times, using our variable as a placeholder for each element (number) in our range as it goes through.

for i in 1..7
if i == 1
puts "I've looped 1 time!"…

Ruby Data Types
Ruby Data Types

Data types tell your program how to handle what it is that you are telling it to do. Each data type has its own “rules” and is handled in its own specific ways. So let’s dive into each of the data types!

Numbers

There are a couple of sub-types of numbers called integers and floating-point.

Integers are simply numbers without a decimal point and can be either Bignum or Fixnum depending upon the size of the number, however, 99.99999% of numbers you will most likely be handling will be fixnum.

Kayla Budzeak

I'm a Full-Stack Software Engineer, with a background in customer service, who recently graduated from Flatiron School. In my down time I love to bake & garden.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store