Forem: Nic Mortelliti

How to use Styled Components with React

Nic Mortelliti — Wed, 04 Jan 2023 03:40:32 +0000

Are you tired of adhering to predetermined styling concepts? Do you find yourself lost in a spaghetti plate of CSS specificity? Well, this article will teach you how to ~~stick it to the man!~~ approach styling from a components perspective, just like we do with React!

Don't get me wrong, I greatly appreciate the ease of use provided by UI libraries, not to mention the massive amount of effort that goes into creating and maintaining those libraries. The majority of these libraries even offer some way to customize the appearance of the various components they offer. But lets say you and/or your design team have a specific vision for your application that you simply cannot achieve with the available UI libraries. Let's say, for example, you make use of an AI tool to generate some ideas for your application, as I did for my capstone project at the Flatiron School. The ideas generated for you can be very dramatic and complex. If we were to try to implement these designs with an off-the-shelf UI library, straight CSS or with inline styling, we may end up adding far too much complexity to our code making it the opposite of DRY (Don't Repeat Yourself) and very difficult to maintain.

Here's an example of AI-produced web designs for a space tourism application.

Styled Components addresses some of these issues. However, if you don't take the time to really plan out the design of your application, you may end up in a bowl of WET (Write Everything Twice) component soup, as I did on my first attempt using Styled Components.

Alright, enough chit-chat, let's get to work.

Installation

Installation of Styled Components is done through npm. Go ahead and install Styled Components with this:
npm install --save styled-components

With that out of the way, let's move on to setting up our application to make use of our future components.

Create Global Style and Theme Components

With Styled Components we want to import global styles and a theming provider into our App component. Per the Styled Components documentation, the theme provider utilizes the context API to inject theming to all components underneath it in the component tree. This will provide us with an easy way to set our applications color scheme. Global Styles will make use of a helper function called createGlobalStyle to generate a special component that will control the general styling of our application. For example, we typically put body styling at the top of our CSS file. However, with Styled Components, we put body styling in the Global Styles component.

Global Style Component

As I mentioned previously, the Global Style component will house styling for our overall application (e.g. the '*' selector, our body as well as general primitives styling). Styling for specific parts of our application, like buttons, will be implemented later in their own styled component. The way I've been doing it for months (I'm a new software developer after all...) is by adding a 'styles' directory under the 'components' directory. Go ahead and create empty Global.js and Theme.js files within the new 'styles' directory.


src
│
└───components
|   |
│   └───styles
|       |   Global.js
|       |   Theme.js
|
|   App.js

Open the new Global.js file now, we're going to add some basic styling here. When working with the Global Style, think about what you want all text to look like in your application. What should the spacing be like for the body class? Remember, our applications color scheme will be applied with the ThemeProvider where all of the colors will be set an actual color value (e.g. hex, rgb, hsl, etc.). So in the Global Styles file lets just set the margins and padding of our application. First, we need to import the createGlobalStyle helper function from styled-components. Then we can add our GlobalStyles component with whatever global styling we want inside of it.

import { createGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: ${({theme}) => theme.bgColor};
  color: ${({ theme }) => theme.color};
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}`

export default GlobalStyles;

Notice that we're making use of the Theme Provider prop to assign our various CSS colors. Cool! We'll get to that later...

Save those changes, then open up our new Theme.js file. Here, we don't need to import anything. When we tie all of this in with our application we'll be importing the Theme Provider from styled-components into our App.js file. Instead, we'll just assign some colors here for our theming.

const primary = "#2ECC71";
const secondary = "#333";

export const theme = {
  bgColor: secondary,
  color: primary,

  button: {
    bgColor: primary,
    color: secondary,
  },
};

That was pretty easy! Let's get this new stuff tied into our application.

Setting up application-wide context

In the App component, lets add our new global style and theme components to our application.

We need to remove the CSS file that React imports by default, import "./App.css". It will conflict with our Global Styles component, otherwise.
Import GlobalStyles from our Global.js file.
Import the Theme Provider from the styled-components library.
Import theme from our theme.js file.
In the return block for App, add the ThemeProvider with a theme prop pointing to the theme component we imported.
Within the ThemeProvider, add the GlobalStyles component in a self-closing tag.

The GlobalStyles component is inside the ThemeProvider because our global styles are using values set within the theme component (e.g. color: ${({theme}) => theme.primaryColor}).

import GlobalStyles from "./components/styles/Global";
import { ThemeProvider } from "styled-components";
import { theme } from "./components/styles/Theme";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      <div className="App">

      {/* Application components go here */}

      </div>
    </ThemeProvider>
  );
}

export default App;

That's it! If you're using React Router, the <BrowserRouter >...</BrowserRouter> component is placed after (e.g. sibling-of) <GlobalStyles />.

The Fun Part

Let's make a custom component now! We're going to make a custom button that will use our theme colors and it will grow a little bit when we hover over it. After we create this button, we can import into any component that will use this style of a button.

Back in our src/components/styles directory, add a new file titled Buttons.styled.js. I learned that by adding styled to the file name, we can more easily determine that styled components reside within the file. As far as I know, it doesn’t serve any other purpose. So you could omit that part of the file name if you want, I suppose.
Inside Buttons.styled.js, import styled from styled-components.
Create a new exported component called PrimaryButton and assign it to

styled.button``

. This assignment is what allows us to create a custom button component.
Inside the two backticks () is where we’ll add our CSS styling for the button. We can also add our hover pseudo-class to handle hovering over the button.

import styled from "styled-components";

export const PrimaryButton = styled.button`
  cursor: pointer;
  border-radius: 0;
  border: none;
  font-size: 2em;
  margin: 0.5em;
  padding: 0.5em 1em;
  background-color: ${({ theme }) => theme.button.bgColor};
  color: ${({ theme }) => theme.button.color};

  &:hover {
    opacity: 0.9;
    transform: scale(1.02);
  }
`;

Let's go back to App.js and add our styled button.

import GlobalStyles from "./components/styles/Global";
import { ThemeProvider } from "styled-components";
import { theme } from "./components/styles/Theme";

// 👇 Import our new styled component
import { PrimaryButton } from "./components/styles/Buttons.styled";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      <div className="App">

        {/* 👇 Add an instance of our new button here */}
        <PrimaryButton onClick={console.log("You clicked me!")}>
          Submit!
        </PrimaryButton>
      </div>
    </ThemeProvider>
  );
}

export default App;

There we go! We've successfully created our first styled component.

Take a look at that button! That's pretty neat!

Conclusion

Styled Components is a great tool to have in your toolbelt. As long as you make an appropriate amount of effort to really plan out your reusable components, Styled Components may can help make use of one of Reacts strongest appeals, the use of reusable components.

Photo by rovenimages.com: https://www.pexels.com/photo/yellow-bokeh-photo-949587/

Rails Validations

Nic Mortelliti — Tue, 11 Oct 2022 17:56:22 +0000

Rails Validations Notes

When creating databases, we want our data to be valid, in other words, we expect the data in our database to be of a certain type and format in order to ensure our we can interact with the data in a predictable manner.

Introduction

For example, if we are storing the email addresses of our users, we expect those email addresses to contain certain syntactic features. As Mishel Shaji describes, the email address should contain a username (e.g. "johnsmith"), the @ symbol, the domain name (e.g. "gmail"), a dot (".") and the domain extension (e.g. "edu"). The username, domain name and domain extension must adhere to specific syntactic requirements as determined by the Internet Official Protocol Standards. By the way, if you feel like you need some more technical, non-fiction reading in your life, go check out the Request For Comments (RFC) regarding email address standardization (among other topics) in RFC 5322 and RFC 6854.

In order to make sure an email address in our database aligns with these standards, we need to use validation. We could, of course, pretend we're fluent in speaking Martian and write a bunch of regex code like that found in this StackOverflow answer:

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

I'm sure there are completely valid situations where regex is the ideal approach to validation. However, in the case of my Ruby on Rails project with the Flatiron School, Rails' built-in validation macro was the preferred approach.

Thankfully, one of the benefits of developing our back end with Rails is that it has built-in validation tools to do the heavy-lifting, allowing us to keep our code lean and readable.

Rails Validations

The Ruby on Rails guide describes validations as a way

to ensure that only valid data is saved into our database.

Therefore, utilizing Rails validation tools, if our user attempts to create an account with an email address of joe@smith@aol.com, Rails won't save the new entry into the database because it doesn't adhere to standard email address syntax due to the multiple uses of the "@" symbol.

How to include validations in your Rails project

Validations can be included in your Rails project by explicitly using the "validates" keyword in the model, specifying which table attribute is receiving the validation ("email") as well as the type of validations being performed on the attribute ("format", "presence" and "uniqueness").

validates :email, format: { with: URI::MailTo::EMAIL_REGEXP },
                  presence: true,
                  uniqueness: { case_sensitive: false }

How to handle invalid data

If a validation fails (i.e. returns "invalid"), we can collect all the error messages produced during the validation phase! This is useful, not only to developers during development for debugging, but it's also useful for users of our applications. We can pass the full array of error messages to the front end for display in alert messages, for example.

Back to our email validation example, we can include our validation error message array in the JSON object we return to the front end like this:

render json: { errors: e.record.errors.full_messages }, status: :unauthorized

In this example, the error messages returned contain the database attribute names (e.g. If no email address is entered and submitted to the API, the "errors" key of the JSON object will contain an array with the message "Email is blank".).

If our React front end doesn't receive a status of "ok" from the API, we can save the errors to state using the useState hook, then map the error messages to user-facing alerts.

fetch("/login", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    email: formData.email,
    password: formData.password,
  }),
}).then((response) => {
  setIsLoading(false);
  if (response.ok) {
    response.json().then((user) => onLogin(user));
  } else {
    response.json().then((err) => setErrors(err.errors));
  }
});

What if I don't want to run validations for a particular API action?

It's possible to skip a validation for a particular action. Be careful when doing this, because we may end up saving corrupt or incorrectly formatted data to our database. Check out section 1.3 of the Rails Guide on Validations to learn which methods skip validation.

Conclusion

Rails' built-in validations are great way to reduce the amount of code you need to write in order to ensure you are maintaining a healthy database with predictable data. For more information on Rails validation methods, check out the Active Record Validations guide.

If you've worked on projects involving databases, how does your group handle the validation of data? Are there methods that are pretty standard from organization to organization?

Including Associated Data In A Sinatra API Response

Nic Mortelliti — Mon, 18 Jul 2022 18:15:33 +0000

I just wrapped up development on a Scrum/Kanban-like application based on Ruby and React. In this post, I'll be discussing one of the roadblocks I was up against when creating the Ruby application controller.

A scrum/kanban (we'll call it scrumban from here on out) board is used by development teams to provide a way to break down a project into smaller chunks of work that are able to be implemented in 2-to-4-week sprints. The scrumban board typically contains columns for work that is in the backlog, in-progress, in-review and closed.

My scrumban application allows a team to add new tasks to a project, edit a tasks properties (e.g. description, due date, story points, etc.) and delete tasks. All of the data for this application including users, project names, and tasks reside in their own tables in an SQLite database.

The scrumban React front end makes HTTP requests to the server through Sinatras application controller. Upon initial page load, the front end makes a request to the server for JSON object containing all of the tasks and their associated project and assigned user. THIS is where I hit a wall during development.

How do I set up the application controller routing in a way that includes an entities associated data from multiple tables?

Problem

My Ruby models are set up as shown in the Entity-Relationship Diagram (ERD) shown below. We have a Projects table, a Users table and a Tasks table (our "Join" table). Each task has a single associated project and a single associated user assigned to the task. A project and user can have many tasks.

When it came time to configure my application controller (the "C" in MVC), I wanted to return a JSON object of all of the tasks in the database. I also wanted to include project and user information for each of these tasks. I knew how to access associated data from one table (shown below), but how do I include data from multiple tables?

1 get '/' do
2   task = Task.all
3   task.to_json(
4     include: :project
5   )
6 end

I searched forums and read the Sinatra documentation, but I just couldn't find the solution. I'm sure the answer is documented out there somewhere. But I was struggled to find it.

Solution

One day I decided I was going to solve the mystery once and for all. I refused to build work-arounds into the client-side React application (e.g. multiple fetch requests, filtering arrays to find matching foreign and local keys, etc).

I threw everything I had at the problem. I tried multiple include: statements. I tried putting putting the associated tables into an object like this include: {:project, :user}.

Finally, I tried an array. It worked! Putting [:project, :user] after the include: statement is we include associated data from multiple tables!

1 get '/' do
2   task = Task.all
3   task.to_json(
4     include: [:project, :user]
5   )
6 end

This will now give us the associated project and the assigned user for each task! It seems so simple now, but I was truly at a loss.

I hope this post helps someone else. If it does, let me know in the comments!

Photo by Joshua Fuller on Unsplash

React useEffect Dependency Warnings?!

Nic Mortelliti — Sat, 14 May 2022 22:33:34 +0000

I'm nearing the end of phase 2 of the Flatiron Software Engineering bootcamp. React was the focus of this phase and, honestly, it was a lot of fun. I really enjoyed learning about props, states, events, controlled components, side effects, client-side routing, etc. However, there was one area of React that was causing some confusion for me... ESLint kept warning me of missing dependencies when using the useEffect hook.

useEffect

The useEffect hook allows us to call a function that is passed into it whenever a component renders. To prevent the function from being called with every render (e.g. when we want to fetch data from an API only once), we provide useEffect with a dependencies array.

In the example above, I'm providing the useEffect hook with an empty array as its dependency. This tells React that it only needs to run this function once.

ESLint Dependency Warning

If, however, our function inside the useEffect hook contains props and/or states, we need to add these as dependencies within the dependency array.

In this example, notice that I'm only including the "currentAircraft" state as the sole dependency. This is all React requires us to include. The setter function "setCurrentAircraft" isn't a state or a prop, it's a function and therefore, is not a dependency. However, ESLint will underline the depenedency array with the message React Hook useEffect has a missing dependency: 'setCurrentAircraft'. Either include it or remove the dependency. It doesn't hurt to include the setter function as a dependency to appease the warning. But I wanted to find a better solution.

After some forum and documentation searching, I found a great solution in this stack overflow post. In the highest scoring solution, Shubham Khatri recommends adding the eslint-disable-next-line comment above the dependencies line. So our example above would now look like this:

Reading through the ESLint github, it seems that ESLint isn't able to determine if a dependency is a setter function. At least not yet. Therefore, this workaround is necessary if you dislike the nagging of false warnings. I suppose you could just ignore the warning :)

If you have a different way to deal with this warning, or my interpretation of the warning is a little off, please let me know in the comments! After all, I'm no React expert... yet.

Photo by Lautaro Andreani on Unsplash

Bored? Try my first app!

Nic Mortelliti — Sun, 13 Mar 2022 01:12:27 +0000

Introduction

Here we are at the end of phase 1 of the Flatiron School Full-Stack Development bootcamp. It was a rocky start with the holiday break followed by two weeks of daycare closures due to covid. But I've finally made it to the end of phase 1 where the main focus was on HTML, CSS and a lot of Javascript.

Requirements

The basic requirements of the project were as follows:

An HTML/CSS/JS frontend that accesses data, asynchronously, from an API of our choosing
Must be a single-page app
Must contain at least 3 separate event listeners (e.g. content load completion, mouse click, etc)
Some user interactivity
Follow good coding practices

This is borrrinnngg

Since my 4-year-old has been going around the house saying "This is borrringgg" I thought it was fitting to utilize the API from boredapi.com. This API will return a random activity from its database based on the criteria sent to it via fetch from JavaScript.

The app allows the user to make selections in regards to activity type (e.g. educational, social, recreational, etc.), the number of people to participate in the activity and if the activity needs to be free. A couple of functions packages up these selections and sends it to the API via JavaScripts Fetch "Get" command. If an activity is found with the users search criteria, it is returned to us within a JSON-formatted message.

The app then parses this message and specifically looks at three key-value pairs within the message:

Error - An error is returned if the API cannot find an activity with the given search criteria. In this case, an alert message is shown instructing the user to change their search criteria.
Activity - This gives us the activity suggestion returned by the API (e.g. "Organize your basement".... no thanks). The activity string is displayed prominently below the Submit button.
URL - Most activity suggestions don't include a URL. However, if one is included, the displayed activity string contains the provided URL, allowing the user easy access to the related article.

If the user repeatedly clicks the Submit button, a history of the 5 most recent activity ideas is displayed underneath the current activity idea. A Clear button is provided with the history list to tidy things up...and to get me my third event listener 😉.

DOM Manilpulation

So far, one of my favorite parts about web development, specifically with JavaScript, is DOM manipulation. How cool is it that you can basically create an entire web page dynamically with minimal static HTML? Well, I think it's pretty cool. I made sure to use this approach at least once in this app.

The Clear button is an example of DOM manipulation. When the app first loads, the Clear button doesn't even exist in the HTML yet. However, once the history list starts to populate, I create a brand new button element. The following is an example of the code I used to accomplish this.

Arrow Functions

Another favorite of mine is the arrow function. I love the simplicity and efficiency of an arrow function.

The Arrow Function is simple in that it’s easy to read. The arrow literally shows the argument of the function going into the body of the function.

It’s efficient because it doesn’t waste as much space as a normal function. You can literally fit an entire function, arguments, body and all, on one line of code!

Wrapping up

It’s been a lot fun putting all of my new skills to use and creating something I can be proud of. Although simple in nature and execution, the app is a culmination of the skills I’ve accumulated in just a couple of months. There are 4 phases of the bootcamp left. I can’t wait to see what I can create at the end of the next phase and the phase after that…

Please feel free to check it out here and provide feedback:
https://nicmortelliti.github.io/Bored/

The project can be cloned here:
https://github.com/NicMortelliti/Bored

Here we go!

Nic Mortelliti — Fri, 04 Mar 2022 03:58:35 +0000

Hey! Welcome to my blog! Not much to see here yet, but I intend for this to be my platform for journaling my formal journey into the Full-Stack development world with the Flatiron school.

My name is Nic and I live in the beautiful Pacific Northwest with my wife and two daughters. I love traveling, photography, road trips, flying airplanes, music, food and, of course, anything technology related.

I recently left my career of 10+ years as a Systems Engineer in the aviation industry to pursue my interests in coding and web development. During that time I found myself playing around with Raspberry Pi’s, microcontrollers and self-hosting smart home services (thanks HomeAssistant!).

Thanks for reading!