DEV Community: Thomas Kinsella

Media Queries

Thomas Kinsella — Thu, 19 May 2022 20:20:51 +0000

Over my time at Flatiron School I have become very interested in Frontend design. With each project I have completed, I have tried to get better at designing aesthetically pleasing browser experiences for the user. One area that I have not been paying much attention to is the responsiveness of my applications. When I would make my screen smaller or view my application on my phone, everything would become a jumbled mess. This got me thinking about how to make my applications respond to different size screens that they are being viewed on. After a few google searches and some research, I found that a great way to tackle this issue is through using media queries in your css file.

Media queries are an essential part of responsive web design. They allow you to change the layout of your application depending on the size of a users viewport. A quick example is how a navbar will collapse into a dropdown menu if you are viewing it on your phone, but then will have the full navbar with each navlink displayed along the top of your screen if your viewport is bigger. Things like this can make your users experience while visiting your app much better.

Media queries can become complex but simple media queries are relatively easy to read and understand. I will go over a simple media query and hopefully it helps you understand the basic idea of what a media query does and how you can use them yourself.

To use media queries the syntax is @media not/only _mediatype_ and (_expressions_).

@media is expressing to css that what you are writing is a media query.

The not/only is specifying whether to not include the mediatype that follows, or to only include the mediatype that follows.

Mediatype defaults to all but you can specify if you want to use this query for three other options:

Print - used for printers
Screen - used for smartphones, laptops, tablets, computer screens
Speech - used for screenreaders

Expressions is when or how you want your design to change depending on what your write in your expressions.

So a simple example of a media query is:

@media only screen and (min-width: 300px) {
       background-color: blue;
}

What this example will do is set the background color to be blue only when the viewport is 300px wide or wider. So the background color would be the original color white if the viewport that a user is viewing your app on is less than 300px. But if you were viewing this app through a viewport that was greater than 300px, the background color would be blue.

This is not a very practical example but it shows that you can use media queries to make your application responsive depending on the size of a users viewport. This can be a very useful tool to make your applications more user-friendly.

I hope this blog helped to understand the basic idea of a media query and I plan on practicing and expanding my knowledge of media queries so that I can more design dynamic, responsive applications.

Ruby Hashes VS Javascript Objects

Thomas Kinsella — Wed, 27 Apr 2022 12:44:53 +0000

During my time learning at Flatiron School, we have focused primarily on Javascript as our front-end language and Ruby as our back-end language. Switching back and forth between languages has been difficult at times due to their similarities, as well as differences, in syntax. For me, one of the more tricky data types to differentiate in Ruby were hashes. Hashes are basically Ruby's version of Javascript Objects. Hashes and Objects look very similar in that they are both made up of key value pairs, enclosed in curly brackets {}. They share some similarities but also have their differences. In this blog post I hope to explain how they are similar, but also point out their key differences.

Ruby hashes and Javascript objects have very similar syntax and look very much alike. Let's create a Ruby hash and a Javascript object and see what I mean.

Ruby Hash

my_dog = { name: "oliver", age: 8, breed: "yellow lab" }

Javascript Object

const myDog = { name: "oliver", age: 8, breed: "yellow lab" }

As you can see, they look very similar but do have some differences. First, in Ruby we do not have to use let or const to save our data to a variable. Also, naming conventions are slightly different between the two. In Ruby we use snake case and in Javascript we use camel case. Snake case is separating each word with an underscore like so: my_variable. Camel case has no spaces and the name of our variable starts with a lowercase letter and each following word begins with an uppercase letter like so: myVariable.

Both our my_dog Ruby hash as well as our myDog Javascript object have keys and values. my_dog has a key of name with a value of "oliver". myDog has a key of age with a value of 8. One of the main differences between Ruby hashes and Javascript objects is that our keys on our Ruby hashes can be of any data type. For example we can have strings as keys, ex: "name": "oliver". In Javascript objects, our keys are just keys on an object. Our values though can be of any datatype in both Ruby hashes as well as Javascript objects.

Say we wanted to access the age of our myDog object in Javascript. We would use dot notation like so:

myDog.age

// 8 //

Say we wanted to access the age of our my_dog hash in Ruby. We would have to use bracket notation like so:

my_dog[:age]

// 8 //

This shows another main difference between Ruby hashes and Javascript objects. The way we access values from them is different. In our example above, we have to use different syntax to access the values from our my_dog Ruby hash and our myDog Javascript object. In Ruby, when we create a hash like we created my_dog, Ruby creates the hash with symbols as keys. Due to this, we can not use dot notation like we can in Javascript. We must use bracket notation like shown above, putting the symbol inside of the brackets, telling ruby that we want the value corresponding to this symbol key.

Lastly, a main difference between Ruby hashes and Javascript objects is that we cannot assign a Ruby method as a value in a hash. In Javascript, an object can have a function as a value but a Ruby hash can not have a method as a value. This allows Javascript objects to have some more functionality.

Overall, Ruby hashes and Javascript objects may look very similar and use a lot of the same syntax but when you take a deeper look you can see that there are some pretty major differences between the two.

React.js State and Props

Thomas Kinsella — Wed, 06 Apr 2022 02:28:05 +0000

React is a Javascript library that has become increasingly popular since it's release just under a decade ago. It is now the most popular and widely used Javascript library. In this blog, I am going to discuss how React state and props work.

Components

Before discussing props and state, I would first like to explain what a component is in React. A component is basically a function that takes in props and returns JSX. They are the building blocks of React because we can write reusable code inside them and they execute that code and render it to the DOM. Here is a basic component.

function Home() {
  return (
    <div id="home">
      <h1>Home</h1>
    </div>
  );
}

This is a component that is named "Home". This component is not taking in any props but it is returning JSX. This component will render a div element with an id of "home" with an h1 element with inner text of "Home" inside of it.

Props

In React, props are short for properties. React uses props to pass data between React components. In React, we can only pass props from parent components to child components. They can not be directly passed from child components to parent components. Here is an example of props being passed from a parent component to a child component.

function ParentComponent() {
    return (
        <ChildComponent name="child" />
)
}

function ChildComponent(props) {
    return (
       <h1>{props.name}</h1>
)
}

So here the parent component is returning, as well as passing data down to it's child component through props. It is giving it a name and that name is "child". When the parent is passing down data, React creates a props object with the key and value pairs that the parent is passing. So in this example, a props object is created with a key of name and a corresponding value of "child." So now for the child to access this data, it has to accept the props object as a value and then it can access the data inside by using dot notation on that props object.

State

In React, state is data that will change over time as users interact with the React application. It is dynamic and allows us to easily create dynamic apps. State allows us update and change data within a component without requiring the parent component to have to send that updated data. In order to use state, we must import the react hook called useState inside of our files like so:

import { useState } from "react"

Now in order to have some data be dynamic and be able to change over time, we must set state on that data using useState. For example say we have a number count and that count is going to increase every time a user does something on our page. We would need to set state on the count variable like so.

const [count, setCount] = useState(0)

useState automatically returns an array with two variables in it. The first variable (in our case, count) references the current or initial value of that state that we set(0). The second variable (setCount) is a function that allows us to update the state of the first variable. To update or set state, we call the second variable and type how we want to update state inside of it. For example:


setCount(count + 1)

These are the basic fundamentals of React state and props. There can be many more intricacies when working with them, but I wanted to give a basic overview and hopefully help whoever reads this to gain a better understanding of how state and props work in React.

Javascript Array Iteration Methods

Thomas Kinsella — Mon, 14 Mar 2022 22:11:07 +0000

I have decided to write about the first major hurdle I faced while learning Javascript. Array iteration. This was (and in some ways still is) difficult for me to understand. I am hoping that by writing this blog post it will help me, as well as everyone who reads this, to have a better understanding of some of the main array iteration methods.

The first thing to understand is what iterating over an array means. Iterating over an array means that we are going through the array and accessing each element one by one. This is helpful because sometimes we need to perform the same action on groups of elements. Say we have an array:

const candy = ["sour patch", "twizzlers", "skittles", "starburst"];

And we want to print each element of the array to the console. To do this without using an iterator, we would have to type out each log to the console with each element in our array like so:

console.log("sour patch");
console.log("twizzlers");
console.log("skittles");
console.log("starburst");

//////console/////
sour patch
twizzlers
skittles
starburst

This can become very time consuming, imagine having an array with hundreds or thousands of elements in it. As you can see this is not a very efficient way of accessing and acting on elements in an array. A better way to do this is by using Javascript's built in array iteration methods. There are four array iteration methods that I have found to be the most useful for me so far. They are forEach, find, filter and map.

We use these methods by taking the name of the array we want to iterate over and typing a period, followed by the method we would like to use on that array.
For example:

ourArray.find() ourArray.map() ourArray.forEach()

forEach:
Using the same candy array example as before, we can use Javascript's forEach method to accomplish the same task much more efficiently.

const candy = ["sour patch", "twizzlers", "skittles", "starburst"];

candy.forEach((element) => {
    console.log(element)
});

//////console//////
sour patch
twizzlers
skittles
starburst

As you can see, we were able to log each element in our candy array with just a couple lines of code rather than typing each log out manually. First we chain .forEach onto our array. Then we pass in an anonymous callback function as our argument of forEach. Next we pass in a variable name as an argument to our callback function. This variable name represents each element in our array which are being passed into the callback function. The first time through, element represents our first element in the array which is "sour patch." The second time through, it represents "twizzlers" and so on. Finally, we write what we want our function to do within the curly brackets. forEach iterates over the array that it is called on, and it executes that callback function for each element of the array.

find:

Say we have an array of numbers and we want to find out if our numbers array contains a number less than 10.

const numbersArray = [12, 17, 7, 3, 20, 94];

const firstNumLessThanTen = numbersArray.find(number => number < 10);

console.log(firstNumLessThanTen);

///////console//////
7

The find method iterates over an array and returns the first element in the array that satisfies the condition that we write in our function. First we chain .find onto our array. Then we pass in an anonymous callback function as our argument of find. Next we pass in a variable name as an argument to our callback function. Just like forEach, this variable name represents each element in our array which are being passed into the callback function. Finally we write the condition that we want to test our array with which in this example is, is there a number in our array that is less than 10. The find method will then pass in each element in our array to our function and test if it is less than 10. Once an element satisfies the condition, it will return that element. If there are no elements in our array that satisfy the condition, it will return undefined.

filter:

The filter method is similar to the find method in that it tests elements to see if they satisfy the condition that we write. The main difference is that it returns ALL elements in the array that satisfy the condition. Say we use the same example above but instead of finding the first element in our array that is less than 10, we want to find all elements in our array that are less than 10. We can use .filter to do this.

const numbersArray = [12, 17, 7, 3, 20, 94];

const allNumsLessThanTen = numbersArray.filter((element) => element < 8)

console.log(allNumsLessThanTen);

///////console//////
[7, 3]

As you can see, .filter returns all elements that satisfy the condition and they are returned in a new array. Our original numbersArray is left unchanged. The way we use the filter method is first we chain .filter onto our array. It works the same as .forEach and .find. We pass in an anonymous callback function as our argument and we pass in a variable name as an argument to our callback function; this variable name represents each element in our array which are being passed into the callback function. Finally we write the condition that we want to test our array with which is are there any numbers in our array that are less than 10. The filter method will then pass in each element in our array to our function and test if it is less than 10. If no elements in the array satisfy the condition, the filter method will return a new empty array.

map:

The map method is useful in that it allows us to act on each element of an array, return a new array with the updated elements, all while leaving the original array unchanged.
Say we have our numbersArray and we wanted to add 10 to each element in the array. Map would allow us to easily accomplish this task.

const numbersArray = [12, 17, 7, 3, 20, 94];

const updatedNumbersArray = numbersArray.map((element) => element + 10);

console.log(updatedNumbersArray);

///////console//////
[22, 27, 17, 13, 30, 104]

Map returns a brand new array with 10 added to all of the elements from our original numbersArray. If we were to console.log numbersArray it would be completely unchanged. The map method works the same as the methods above, in that we chain .map onto our array. We pass in an anonymous callback function as our argument and we pass in a variable name as an argument to our callback function; this variable name represents each element in our array which are being passed into the callback function. Lastly we write the action we would like to invoke on each element of the array. Map will then perform that action on each element and return a new array with those updated elements inside.