Forem: Blake Creasser

React UI Component Libraries: Material-UI

Blake Creasser — Thu, 02 Nov 2023 00:23:45 +0000

Introduction

Material-UI is a very powerful React UI component library. I initially learned about Material UI from one of my Flatrion School classmates. In the ever-evolving world of web development, creating visually stunning and responsive user interfaces is crucial. In this blog post, we will discuss the what it is, how it is used, and the basic setup for using this amazing library.

Why use Material-UI

There are a lot of reasons to use Material-UI. Here are just a few:

Consistency: Material-UI enforces design consistency across your application, as it adheres to the Material Design guidelines.

Modern Aesthetics: Material-UI design principles result in a modern and visually appealing user interface.

Productivity: The library provides a ton of pre-built components that can significantly speed up the development process.

Documentation: Material-UI has extensive documentation for all the built-in components. They also provide example use cases to show the true capability of the pre-built components.

In summary, Material-UI is an essential tool for React developers seeking to create visually appealing and responsive user interfaces. Whether you're building a small project or a large-scale application, Material-UI can be a valuable asset in your web development toolkit.

Setup

Installation

Assuming that you already have a React project, the first step is installing Material-UI. Material-UI can be installed by using npm or yarn.

npm install @mui/material @mui/icons-material

yarn add @mui/material @mui/icons-material

Note: You can start using Material-UI components after you have installed the above libraries. However, it is recommended that you setup the style and theme for the best results.

Optional: Styles

Material-UI offers styling components that allow users to keep styles consistent across their projects. To utilize this, you need to import a few items in you src/index.js or equivalent entry point.

import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider } from '@mui/material/styles';
import { createTheme } from '@mui/material/styles';

Optional: Themes

Material-UI allows users to define a custom theme to match your applications design. You can create a them with a preferred color palette, typography, and other design specifications. Here is an example on how to create a theme:

const theme = createTheme({
  palette: {
    primary: {
      main: '#2136f3',
    },
    secondary: {
      main: '#f51057',
    },
  },
});

After you have created your theme, you need to wrap your app component with the ThemeProvider and CssBaseline you imported in the second step.

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

Once you have wrapped your app component with the ThemeProvider and CssBaseline, you can start utilizing Material-UI components that are consistent with your applications design.

Built-in Components

Material-UI provides a ton of pre-built components that range from alerts to tables. A few components that I have found very useful are the Button, TextField and Select.

Button

Buttons always seem to cause problems for me when trying to style them with only CSS. The Button component is a core button element in Material-UI. It's highly customizable and can be used in various contexts, such as forms, dialogs, and navigation. Here is a basic example of a simple, yet visually appealing, button you can create with Material-UI:

<Button variant="contained">Contained</Button>

It is as simple as that to create a nice looking button with Material-UI. They also provide a ton of different styling props that allow you to create a button exactly how you want it.

Forms

The TextField and Select components all are very useful when making forms with Material-UI.

The TextField component is a versatile input field that serves various purposes in forms. The Select component simplifies the creation of dropdowns and select inputs in your forms. Both of these components come with many different props that allow users to handle input validation, autocomplete, controlled inputs and other styling options.

Conclusion

Material-UI, with its vast array of prebuilt components, opens up a world of possibilities for web developers. Whether you're a seasoned developer or just starting, Material-UI simplifies the process of crafting user-friendly forms and engaging user experiences, ensuring that your web applications not only meet but exceed design standards. So, dive in and let Material-UI elevate your web development projects to new heights.
Happy coding!

ActionMailer::Base Introduction

Blake Creasser — Fri, 16 Jun 2023 16:54:30 +0000

Introduction

I have recently come across the rails module ActionMailer::Base. ActionMailer allows you send emails from your application to users of the application. This module allows you to send a wide variety of different emails from welcome messages to order confirmations. In this blog, I will go over the basics of setting up ActionMailer::Base in a Ruby on Rails project.

Generating the Mailer

To generate the mailer, run this code in your console:

rails g mailer UserMailer

Files

Running this generator will create a few files:

Mailer Class File

A mailer class file is created in the app/mailers directory. Its name is based on the mailer name you provided. In our example, it will create a file named user_mailer.rb. This file contains the definition of the mailer class.

View Directory

A directory with the same name as the mailer is created inside the app/views directory. In our example, a directory named user_mailer will be created. This directory will contain the email view files associated with the mailer.

Email View Files

Inside the mailer's view directory, two template files are created: action.html.erb and action.text.erb. The action portion of the file name corresponds to the name of the email action you define in the mailer class. For example, if you define a welcome_message action, the generated view files will be welcome_message.html.erb and welcome_message.text.erb. These files define the content and layout of the email.

Optional Files: Layout and Test

Layout files provide a common structure or styling that can be applied to multiple email views. The test files are typically created in the test/mailers directory.

Setting up the Mailer

Inside of the user_mailer.rb file is where you will create the actions for the emails you want sent out. Continuing with our previous example, here is how you would set up the mailer to handle sending a welcome message:

class UserMailer < ActionMailer::Base
  default from: 'filleremail@example.com'

  def welcome_message(user)
    @user = user
    mail(to: user.email, subject: 'Welcome!')
  end
end

In the above example, the UserMailer class is defined, and it includes a welcome_message action. Inside the action, we set an instance variable @user that can be accessed in the corresponding email view. Inside the mailer class, you can define various email actions by creating methods. Each method corresponds to a specific email action. For example, the welcome_message action sends a welcome email to a user when they sign up.

After setting up the mailer class, you need to create the view for the email. For each email action, you need to create a corresponding email view file. These view files are created in the 'app/views/user_mailer' directory. For our example, you would need to create either a 'welcome_message.html.erb' or 'welome_message.text.erb' depending on your needs. We will use a html file for our example:

<h1>Welcome to Our App, <%= @user.name %>!</h1>
<p>Thank you for signing up. We're excited to have you on board!</p>

This is a very basic example, but it shows how you can interpolate the users name into the email to make it more personal.

Calling the Mailer

You can call the mailer from a model or controller. I will go over how to call the mailer from a controller to follow the example of a new user welcome message. Invoking the mailer from the controller would look something like this:

class UsersController < ApplicationController
  def create
    @user = User.create(user_params)
    if @user.valid?
      UserMailer.welcome_message(@user).deliver_later
    # rest of controller logic

In this example, when a new user is created and is valid, the UserMailer will be called and pass the user to the mailer. Passing the new user to the mailer allows it to get any information that is needed inside of the email that is to be sent. The '.deliver_later' method tells the controller to continue running without waiting for the email to be sent.

Conclusion

Action Mailer simplifies the process of sending emails in your Rails application, allowing you to keep your users informed and engaged. Whether it's welcome messages, order confirmations, or any other type of email, Action Mailer provides the tools you need to communicate effectively with your users.

In conclusion, Action Mailer is a powerful module in Ruby on Rails that enables you to send emails from your application to users. By following a few simple steps, you can set up the mailer class, generate email view files, and define email actions to handle various types of emails.

Active Record Querying Methods

Blake Creasser — Mon, 10 Apr 2023 20:13:19 +0000

Introduction

Active Record is a very powerful tool providing a simple and intuitive way to interact with databases. One of the key aspects of Active Record is its rich set of query methods, which allow developers to filter, sort, group, and join records with ease. In this blog post, we'll explore some of the most useful Active Record query methods, and how they can be used to simplify database interactions and improve application performance. Whether you're a seasoned Ruby developer or just getting started, you're sure to learn something new and useful!

where Method

The where method is used to filter records based on one condition. An example of this would be:

User.where(name: "John")

This piece of code would return all of the users in the database that have the name John. This is a very basic query, but the where method can be used to make some very complex queries to the database. Here is an example:

Article.where('published_at >= ?', 30.days.ago)
.where('comments_count >= ?', 10)

This query would return all of the articles in the database that have been posted in the last 30 days and have at least 10 comments. Chaining is possible with the where method and allows you to make complex queries based on multiple conditions.

order Method

The order method is used to sort the results of a query by one or more columns. It can be used to sort in ascending or descending order and can be combined with other query methods to build complex queries. A simple example of using the order method would be to retrieve a list of users sorted alphabetically by their name:

sorted_users = User.order(:name)

In this example, the order method is called with the :name symbol as an argument, which tells Active Record to sort the results by the name column in ascending order. The order method is a powerful feature of Active Record that allows you to easily sort query results based on one or more columns. By chaining it with other query methods, you can create more complex queries that retrieve exactly the data you need.

select Method

The select method in Active Record is used to specify which columns you want to retrieve in a query. By default, Active Record retrieves all columns from a table, but the select method allows you to limit the columns returned in the result set, which can help improve performance and reduce memory usage. A simple example of using the select method would be to retrieve a list of user names from the database:

user_names = User.select(:name)

In this example, the select method is called with the :name symbol as an argument, which tells Active Record to retrieve only the name column from the users table.

find_by Method

The find_by method in Active Record is used to find a single record in a table based on a set of attributes. This method returns the first record that matches the specified conditions, or nil if no matching record is found. A simple example of using the find_by method would be to find a user with the email john@example.com:

john = User.find_by(email: 'john@example.com')

In this example, the find_by method is called with the email: 'john@example.com' hash as an argument, which tells Active Record to find a user with the email john@example.com. If a user with that email exists in the database, it will be returned. If not, nil will be returned.

find_or_create_by Method

The find_or_create_by method in Active Record is used to find a record in a table based on a set of attributes, or create the record if it does not already exist. This method is especially useful when you want to ensure that a specific record exists in the database, without having to manually check if it already exists and then create it if it does not.

A simple example of using the find_or_create_by method would be to find or create a user with the email john@example.com:

john = User.find_or_create_by(email: 'john@example.com')

In this example, the find_or_create_by method is called with the email: 'john@example.com' hash as an argument, which tells Active Record to find or create a user with the email john@example.com. If a user with that email already exists in the database, it will be returned. If not, a new user will be created with the specified email.

Conclusion

These are just a few of the many powerful query methods that Active Record provides. Understanding the Active Record query API is an essential skill for any Ruby developer working with databases. By taking the time to learn and master these methods, you can improve the performance, reliability, and maintainability of your applications, while also improving your own skills as a developer.

Props and useState: React Basics From a Beginner POV

Blake Creasser — Sat, 11 Feb 2023 06:08:10 +0000

Introduction

React comes packed with many useful tools to help developers build efficient and scalable frontends. While learning react, hooks and props were difficult for me to grasp onto at first. After some time working with these tools, I am confident to give a quick and concise rundown on how these work.

React Props

Props are the one of the fundamental building blocks to really using react to its full potential. Props allow you to pass down information as an object from a parent component to a child component. Props can hold any type of data including functions.

Props Syntax

Passing down props from a parent component is very easy. In the example below I will pass a string and a number down to the child component.

function ParentComponent(){
return <ChildComponent string="Hello World" number=10 />
}

The props "string" and "number" are being passed down into the child component above. They are passed down by declaring a variable inside of the component that is returned by the parent component. To access these value inside of the child component we will need to add props as the argument to the child component.

function ChildComponent(props){
return <div></div>
}

The information we passed from the parent component is now available inside of the props object. We can now access this information using dot notation and use it anywhere inside of our child component.

function ChildComponent(props){
console.log(props.string) // will return Hello World
return <div>{`My favorite number is ${props.number}`}</div>
}

Props Destructuring

Props destructuring is the another way of passing props down from parent components that I think makes accessing props in the child component much easier and straightforward. Destructuring props eliminates the need to use the 'props' argument.

//ParentComponent
function ParentComponent(){
return <ChildComponent string="Hello" number=10 />
}

//ChildComponent
function ChildComponent({ string, number }){
return <div>{`${string}, my favorite number is ${number}`}</div>
}

In the example above, rather than passing 'props' as the argument, we can destructure all the props into the variable name that was assigned to them we they were passed down. We do this by surrounding the variable names with {} inside of the argument of the child component. This will allow use to use string rather than props.string to access the information.

useState Hook

What is the useState hook? The useState hook is used when you want to add "state" to a specific component in your react project. State is dynamic data that lives inside of the component and changes over time as users interact with the application. State allows you to update information in a component without having to send different props from the parent component.

useState Syntax

The first step to using the hook useState is to import it into the component you are working with:

import React, { useState } from "react"

Once you have imported the hook into the component you will need to setup the hook itself. Every useState hook requires a variable, setter function, and an initial value. The variable is what will be used to access the value that is currently held in state. The setter function is used to reassign the value of the state. The initial value is, well exactly as it sounds, the initial value of the state. In the example below, I will use the useState hook to set up a counter variable.

import React, { useState } from "react"

function Counter(){
const [count, setCount] = useState(0)
//       ^       ^                 ^  
//   variable  setter function|initial value
}

Once the hook is setup, you can start using it in you application!

Example useState Functionality

import React, { useState } from "react"

function Counter(){
const [count, setCount] = useState(0)

return (
<button onClick={setCount(count + 1)}>{count}</button>
)

In the example above, the initial value set in state is zero, and with each click of the button the text content of the button will increase by 1. When the state is updated by the setter function (setCount) the component re-renders and the new value of count is displayed on the button. This is a very basic example of how useState works, but it gives a good idea of how the useState hook works inside of components.

My Journey Through Array Iteration Methods

Blake Creasser — Tue, 06 Dec 2022 02:39:26 +0000

Array iteration methods are by far the hardest concept I have had to grasp during my time at Flatiron School. The fact that there are quite a few of them also makes learning them not an easy task. However, with time you can understand them, and utilize their functionality in your own projects! After some time using them, I feel confident to give a walk through of the basic tasks that each iteration method can be used for!

.find() and .filter()

.find() and .filter() are very similar functions that can be called on an array. They both take a callback function as their arguments. The main difference between the two is that .find() only returns the first element that returns truthy to the callback function, while .filter() returns all elements that return truthy to the callback function.

const arr = [1, 2, 7, 45, 63]

const found = arr.find(element => element > 5)
console.log(found)
//output: 7

cosnt arr = [1, 2, 7, 45, 63]

const found = arr.filter(element => element > 5)
console.log(found)
//output: [7, 45, 63]

This first code example shows how a .find() would work on a simple array of just numbers. While 45 and 63 are also greater than 5, the .find() method will only return the first truthy value, which is 7. .filter() on the other hand will return 7, 45, and 63 since they are all truthy values in this scenario. It is important to note that .filter() returns the values in a new array.

.map()

.map() is called on an array and takes a callback function as the argument. It will call the callback function once on each item that is in the array, and return a new array of the mutated values.

const arr = [1, 2, 3, 4, 5]

const newArr = arr.map(element => element * 5)
console.log(newArr)
//output: [5, 10, 15, 20, 25]

.map() can also be used as a array copying method if needed.

const arr = [1, 2, 3, 4, 5]

const newArr = arr.map(element => element)
console.log(newArr)
//output: [1, 2, 3, 4, 5]

Both of these examples show the basic functionality of the .map() method, but .map() is very versatile and can be used in many different situations. Here is a snippet of code that I wrote to capitalize the first letter in each word of an array of strings! You will see that you can even chain .map() by calling it inside of another .map()

const titleCased = () => {
  return tutorials.map(function(string){
      let word = string.split(' ')
          let capWords = word.map(function(word){
            return word.charAt(0).toUpperCase() + word.substring(1)
          })
          return capWords.join(' ')
      })
}

.reduce()

.reduce(), like all the other array iteration methods, takes a callback function as the argument. This method, in my opinion, is one of the more confusing array iteration methods. MDN Web Docs does a great job in explaining how it works.

"It runs a "reducer" callback function over all elements in the array, and accumulates them into a single value. Every time, the return value of callback function is passed into the function again on next invocation as accumulator. The final value of accumulator becomes the return value of reduce()." - MDN Web Docs

The syntax for a reducer callback function passed into .reduce() is as follows,
reduce(function(accumulator, element){...} initialValue)

const totalArray = array.reduce(function(accum, element){
    return element + accum
}, 0)

The function above is an example of a simple function that will loop over an array and return the total of all the elements in the array. The function loops over the array, passes the current number as an argument, adds that number to the accumulator, and returns the total of the two so that it can be used for the next number in the array.

.forEach()

.forEach() is unique compared to the other iteration methods. It is the "least expressive" out of them all, and it does not have a built in return value. .forEach() does not have a specific use, but it can be useful when debugging or mutating an array. It can be used in place of some of the other methods listed above, however it is recommend to use one of the other methods if possible before using .forEach(). An example of a function using .forEach() to print all the values of an array to the console is below.

const array = [1, 2, 3]

array.forEach(element => console.log(element))
//output: 1
//output: 2
//output: 3

References and Useful Links

Array.prototype.find() - JavaScript | MDN

The find() method of Array instances returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

developer.mozilla.org

Array.prototype.filter() - JavaScript | MDN

The filter() method of Array instances creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

developer.mozilla.org

Array.prototype.map() - JavaScript | MDN

The map() method of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array.

developer.mozilla.org

Array.prototype.reduce() - JavaScript | MDN

The reduce() method of Array instances executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

developer.mozilla.org

Array.prototype.forEach() - JavaScript | MDN

The forEach() method of Array instances executes a provided function once for each array element.

developer.mozilla.org