Embedded Files
Using Rails to Create a Follower/Following Relationship
Using Rails to Create a Follower/Following Relationship
A Guide to Self Referential Tables
April 2023
When implementing a social feature into your app, in order to create a relationship between users, you can keep track of the relationships by creating a new join table to link the User table back to itself. For this example, users can have non-reciprocal relationships, meaning User A can follow User B without User B following User A.
A user will have many followers and have many follows, but there is some complexity in mapping the has_many :through relationships that we will tackle later in this post.
While you are building your model, it can be semantically difficult to keep track of the relationships, so spend time thinking through how these relationships will play out. We will be using the term “follower” to represent the user who is doing the following (active) and “following” to represent the user being following (passive).
A user is following many users (active relationship) where follower_id = user.id.
A user if follower by many users (passive relationship) where following_id = user.id
We will go step-by-step how to set up all the models, routes, controllers (and even serializers!) for this feature.
Please note, this set-up assumes that your models utilize cookies or some other method to retain info on a logged in user.
Create the new relationship table and add indexes to enforce uniqueness
Update User model to create has_many :through relationships
Add custom methods to the User Controller + corresponding routes
Step 1. Create the new relationship table and add indexes to enforce uniqueness
The first step is to create the new table that will hold all of your relationships.
$ rails g scaffold Relationship follower_id:integer following_id:integer
Before running your migration, we’ll want to add some indexes.
Add an index for both follower_id and following_id
Add a multiple key index for both follower_id and following_id that enforces uniqueness, that way one user can’t follow another multiple times
class CreateRelationships < ActiveRecord::Migration[6.1]
def change
create_table :relationships do |t|
t.integer :follower_id
t.integer :following_id
t.timestamps
end
add_index :relationships, :follower_id
add_index :relationships, :following_id
add_index :relationships, [:follower_id, :following_id], unique: true
end
end
After adding the indexed, run your migration.
$ rails db:migrate
Step 2. Update Relationship and User models to create has_many :through relationships
Because relationships are built on follower_ids and following_ids, we need to tell rails that these relate back to a user id. We do this by assigning a foreign_key reference and a class_name to the belongs_to macro, this tells Rails that we are using the id from the class as an alias for follower/following_id.
Update the Relationship model to assign a foreign key of follower/following_id the belongs_to macros to the User class. This is also a great time to add validations to ensure each new relationship has both a follower and a following.
class Relationship < ApplicationRecord
belongs_to :follower, foreign_key: :follower_id, class_name: "User"
belongs_to :following, foreign_key: :following_id, class_name: "User"
validates :follower_id, presence: true
validates :following_id, presence: true
end
In updating our User model, we need to continue to repeat this aliasing by creating :follower_relationships and :following_relationships. These will act as aliases for the relationships table. So now, when our model looks for a user’s following_relationships, it knows to look at the relationship table where the user’s id is the following_id. You will need to do this foreign key aliasing in the has_many initial macro, as ActiveRecord does not allow foreign keys to be used in the statement of a through: relationship.
When you get to the through: part of the relationship, you will want to add a source:, this tells Rails which initial array to reference.
class User < ApplicationRecord
has_many :follower_relationships, foreign_key: :follower_id,
class_name: "Relationship",
dependent: :destroy
has_many :followers, through: :follower_relationships, source: :follower
has_many :following_relationships, foreign_key: :following_id,
class_name: "Relationship",
dependent: :destroy
has_many :followings, through: :following_relationships, source: :following
end
Step 3. Add custom methods to the User Controller + corresponding routes
Now that our models are set up to recognize our connections between users and relationships, let's set up our controller to create and destroy relationships, along with corresponding routes. To follow a user, add the user to the ‘followings’ array of the current user.
To unfollow a user, find the relationship that exists with the current user as the follower, and the user as the following and destroy the relationship.
class UsersController < ApplicationController
def follow
@user = User.find(params[:id]
Current_user.followings << @user
render json: @user
end
def unfollow
@user = User.find(params[:id]
current_user.followings.find_by(following_id: @user.id).destroy
render json: @user
end
end
Finally, create custom routes to call the follow and unfollow methods.
Rails.application.routes.draw do
resources :users
post '/users/:id/follow', to: "users#follow", as: "follow_user"
post '/users/:id/unfollow', to: "users#unfollow", as: "unfollow_user"
end
With these simple steps, you’ve created a back end framework to add follower/following relationships between users.
Conclusion:
With a little Rails *magic* to assign foreign keys, you can create relationships between users using a single join table without repetitive data. With this knowledge, you’re now armed to create other relationships, such as manager / employee, parent /child, or use self-referential tables to model other instances where two instances of data from the same table have a relationship.
Thinking Through Data Structuring and Custom Serializers
Thinking Through Data Structuring and Custom Serializers
March 2023
While completing my fourth portfolio project for FlatIron, I was required to create an application that linked to a database with multiple tables, featuring at least one many to many relationship.
Based on the needs of what I created, my resulting data structure was 4 tables, with two tables sharing two separate many-to-many relationships. This led to a number of options when determining how to send my data from the front end to the backend, while optimizing on a number of different constraints:
Minimize expensive fetch calls from the front end to the back end
Minimize duplicative data, and therefore the risk that duplicative data kept in a React state could fall out of sync
Minimize complex formulas to link data on the frontend
Mapping out Your Data Structure
Mapping out Your Data Structure
Requirements:
Requirements:
A user has full CRUD capability for Visits, Comments, and Users/User_Profile tables
Wineries can have no associated visits and/or comments
A user can have no associated visits and/or comments
Data Relations to Show:
Data Relations to Show:
Winery:
Show rating, the username that made the rating, average ratings
Show comments, the username that made the comment
User:
Show all wineries visited and the winery
Option 1: Wineries, Users/UserProfiles, Visits, Comments, all managed by a separate state with no related values displayed
Pros:
No duplicative data
Cons:
Will need to create complex functions to map related data (such as Winery Name and User associated with a comment) on each page
Option 2: Visits, Comments are the only two managed states, with Winery and User data nested within.
Pros:
No need to create mapped functions to retrieve needed related data
Cons:
Wineries and Users can exist without any related Visits or Comments
Option 3: Wineries and Users are the only two managed states, with all visit and rating data nested within
Pros:
No need to create mapped functions to retrieve needed related data
Cons:
Duplicative data
When taking CRUD actions on either Visits or Comments, would need to update both Winery and User states
Option 4: Wineries and users are the only two managed states, with all visits data nested within Wineries and all Comments data nested within Users (or vice versa)
Pros:
No duplicative data
Cons:
Will need to create complex functions to map related data (such as Winery Name and User associated with a comment) on each page
Option 5: Wineries, Users/UserProfiles, Visits, Comments, all managed by a separate state with some related values displayed via custom serializers
Pros:
Balance of duplicative data vs mapped functions
Cons:
Some duplicative data
Some need to create mapping functions
Option 1 is attractive in terms of clean, minimal data, but the resulting formulas to relate everything on the front end would result in a not insignificant amount of effort in development, which felt like a waste of time.
Option 2 was immediately eliminated, as this option would leave me unable to access any information about Wineries or Users that did not yet have any associated Visits or Comments.
Option 3 was also eliminated, as having all User and Visit data live in the Wineries or Users state as this created a risk that duplicative data in State could fall out of sync if there was an error in updating either Wineries or Users and not the other .
Options 4 and 5 represent the hybrid options that balanced a minimization of duplicative data and complex mapping on the front end.
Overall, I opted to go with option 5, the hybrid option of nested data (minimized with custom serializers) and managing multiple States due to the low complexity of the mapping functions needed as well as the opportunity to practice with custom serializers.
Creating the Custom Serializers
Creating the Custom Serializers
Custom Serializers allowed me to structure and nest my data in a neat and concise way. As I expand the use cases of this project and potentially add additional tables and relations, I can continue to reuse or create new serializers that allow me to flexibly build and nest my data.
class CommentUserSerializer < ActiveModel::Serializer
attributes :id, :username
end
class CommentWinerySerializer < ActiveModel::Serializer
attributes :id, :name
end
class CommentSerializer < ActiveModel::Serializer
attributes :id, :text
has_one :user, serializer: CommentUserSerializer
has_one :winery, serializer: CommentWinerySerializer
end
Conclusion
Conclusion
As you begin framing up your project and determining how to structure your data, keep in mind the following considerations:
Minimize, duplicative data, but ensure you eliminate the chance that any duplicative data could become out of sync.
Minimize expensive API calls, a few additional GET requests on initialization are more desirable than needing to make multiple POST/PATCH/DELETE requests every time an update is made
Make it easy on yourself! If you find yourself writing overly cumbersome functions to map your data on the front end, re-think how you are sending over your data
Get creative with how you can use custom serializers to help aid with all of the above!
Happy Coding!
A Very Beginners Guide to Metaprogramming in Ruby
A Very Beginners Guide to Metaprogramming in Ruby
December 2022
What does Meta mean anyways?
What does Meta mean anyways?
Whenever “meta” appears in front of anything - it can always seem a bit intimidating. Meta-analysis, meta-physical, meta-verse. It’s not helpful that meta means different things in different contexts. For example, a meta-analysis, is just a collective analysis of existing analyses, meta data similarly is data about data (like a timestamp on a data entry). The meta in Metaphysics, was meant to use the original Greek meaning of ‘meta’ as after, intending to be information about what comes ‘after’ physics, but now is broadly associated with the mystical. The idea of the metaverse and the wide ways people use meta in associated contexts can just cause more confusion.
Metaprogamming, like meta analysis or metadata, where meta-X is an X about X. Metaprogramming, therefore, is programming about programming. Metaprogramming is that ability to write code that will modify itself. This is not to be confused with recursive functions, which are a function that references an instance of itself. In recursive functions, the code stays stagnant, but is simply able to update its output based on the different instances of self. Metaprogramming, on the other hand, allows a user to write code that during runtime is able to modify or create new Classes and Methods. For example, your code can check whether a current method exists, and create it on the spot!
Metaprogamming should not be viewed as an inherently advanced topic, but as a critical tool for ensuring that your code is both dynamic and adheres to DRY principles; you don't want to write repetitive code to cover every use case!
Send
Send
You have probably already used some form of metaprogramming with using Ruby's send method. The send method invokes a method identified by a symbol, and passing along the intended arguments. Send can even be used to invoke private methods (though a response is not always guaranteed). This "backdoor" method of calling a method can be used in mass assignment, providing the ability to take in a dynamic number of arguments for a method by using the send method to parse the arguments and dynamically assign key value pairs. In creating new class instances, a user could pass along any number of arguments, and the code would create a key value pair for each argument, without having to write repetitive code that covers every case!
def initialize(args)
args.each do |key, value|
self.send("#{key}=", arg[key])
end
end
Define_Method
Define_Method
One incredibly dynamic tool within Ruby is the define_method method (following our meta-convention, we are writing methods about writing methods!) This can be an incredible time-saver if you need to create a dynamic number of methods that share a lot of similar code. With define_method, you can accept an argument passed to a function to actually create a new method.
Let’s start with a very simple Cat class. We want to create a few new methods within the Cat class based on some typical cat activities; purrings, stretching, and yawning. In the simplest code, we would write the following to send us a message about what the cat is doing and update the cat’s status.
class Cat
attr_accessor :name
def initialize(name)
@name = name
end
def purring(adverb)
puts "#{self.name} is purring #{adverb}"
end
def yawning(adverb)
puts "#{self.name} is yawning #{adverb}"
end
def stretching(adverb)
puts "#{self.name} is stretching #{adverb}"
end
end
As you can see, our code is VERY repetitive. Lets DRY this code up using our define_method:
class Cat
attr_accessor :name
def initialize(name)
@name = name
end
actions = ["purring", "yawning", "stretching"]
actions.each do |action|
define_method("#{action}") do |argument|
puts "#{name} is #{action} #{argument}"
end
end
end
However, we know that cats can do much more than these three things. We can use define_method to create EVEN MORE cat activities with a create_method method! Don’t forget to DRY up your code by using your new create_method class to define the initial list of methods. You can even create cat instance specific activities using singleton methods; for example if you have one cat that has a habit of scratching, but don't want any of the other cats to have that capability.
class Cat
attr_accessor :name, :status
def initialize(name)
@name = name
end
def self.create_method(action)
define_method("#{action}") do |argument|
puts "#{name} is #{action} #{argument}"
end
end
actions = ["purring", "yawning", "stretching"]
actions.each do |action|
create_method(action)
end
end
Method_Missing
Method_Missing
It's a lot to ask our user to remember which methods we've already created and force them to create a new method on their own. Ruby has a built in method_missing method to make this even easier for the user to create new classes! method_missing effectively looks at the class, then the class’s superclass, then that class’s superclass and so forth up the chain to see whether the method exists. If no method exists, method-missing is called. Method_missing could be used to return an error to let the user know that the method does not exist, or we can use this signal to invoke create_method. method_missing gives us access to 3 parameters, the name of the method the user attempted to call, the arguments passed in that call, and the block passed in the call. For this example, we will only focus on the method. method_missing will then take the name of the method that we tried to use and pass it to our create_method metaprogram.
class Cat
attr_accessor :name
def initialize(name)
@name = name
end
def self.create_method(action)
define_method("#{action}") do |argument|
self.status = action
puts "#{name} is #{action} #{argument}"
end
end
def method_missing(method_name, *arguments, &block)
self.class.create_method(method_name)
end
end
Conclusion
Conclusion
Hopefully you are feeling less anxious about the idea of metaprogramming, and instead embracing your new ability to create dynamic and concise code!
Happy coding!
A Simpler Life with React Bootstrap
A Simpler Life with React Bootstrap
September 2022
In my time at Flatiron, I have absolutely loved the logic of coding. I took to loops, recursive statements, and conditionals like a duck to water, but I am absolutely mystified by styling and CSS. I struggled to capture the nuances of layering <containers> and <divs>, setting display types to get my content in the right place, or to be the right size. I felt like I would make one small change, and suddenly all of my content would be askew. Thankfully, I found my salvation in Bootstrap.
Bootstrap CSS for javascript and html effectively creates a basic, yet customizable stylesheet for you; streamlining the commands needed to snap content onto a grid using flexbox utility, and providing flexible scaling for different screen sizes; you simply have to use the corresponding class name on your element without having to develop all of the attributes for the class yourself. With fairly attractive built-in styling, you can create a clean, minimalist app with very little additional CSS or styling needed. Simply install bootstrap via your package manager and use the built in classes.
npm install bootstrap
Bootstrap for React takes this a step further; in addition to built in classes, you also have a library of built in components to quickly style forms, buttons, and navigation headers. This is achieved by installing the React Bootstrap package through your favorite package manager.
npm install react-bootstrap
There are a few key differences with React Bootstrap. Unlike Bootstrap for vanilla JS and html, you will need to import each component from the Bootstrap library into each file that you want to use the component. Additionally, you will need to use “className” in lieu of “class” to access class-level styling within a component.
One simple, yet elegant time saving feature within React Bootstrap is the ability to create a customizable and flexible NavBar. As a key element of the user interface, having a clean and well positioned Navigation section is critical for good web design.
Your entire navigational header will need to be wrapped in a <Navbar> component (don’t forget to import the Navbar module and ensure you use a lowercase b!) This component defines the full container of the navigation section, and allows you to flexibly add additional elements such as headers, loose text, or images.
The Navbar also allows you to flexibly position your navigation on the page using the props fixed=”top”; fixed=”bottom”, or sticky=”top”; sticky=”bottom” (warning - sticky may not be supported on all browser types)
For the routes, you’ll wrap all of these in a <Nav> component (imported as the Nav module). Within the Nav component, you can flexibly add different nav styles, including dropdowns or set specialized styling for a main route, such as “Home”.
You can use flex-box logic to position your elements using the classNames “justify-content-start”, “justify-content-center”, or “justify-content-end”.
For each individual route, create a <Nav.Item> component (this, as well as the <Nav.Link> component below are included within the Nav module and do not require separate imports). This generates the element for each route/link, as well as holds all of the critical routing information for each link. For React Router, you will need to set a few different properties within this component to mimic the standard <nav> component within react.
It’s best practice, though not required, to create an eventKey property. Similar to mapping components, the purpose of this is to provide a unique key for each link. Within Router, this can be used to set a default active link. If using a dropdown, this will also be the output identifier used to pair the selection action with the corresponding link.
Nested within each <Nav.Item>, you will need a <Nav.Link> component.
For Routes, you will need an “as”={Link} property to indicate that this component will behave as a link. The “as” property enables you to render the link as a custom element. In non-Router situations, the “as” property can be used to render the component as an <li> or similar. You will need to import {Link} from react-router-dom.
The “to”=”/destination” property will remain the same as in a traditional <NavLink> component
import React from "react"
import { Link } from "react-router-dom";
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
function NavigationBar() {
return (
<Navbar bg="light" sticky="top">
<Nav defaultActiveKey="home"
className="justify-content-center">
<Nav.Item>
<Nav.Link
as={Link}
to="/"
eventKey="home">
Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
as={Link}
to="/link"
eventKey="link">
Link
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar>
);}
export default NavigationBar;
Additionally, there is an alternative React Router Bootstrap that will make Route-link creation even more concise. For this, you will need to import React Router specific libraries, again via your favorite package manager.
npm install react-router-bootstrap
Create both <Navbar> and the nested <Nav> components as with traditional React Bootstrap
Add a <LinkContainer> component that requires identical parameters to the traditional React <NavLink> component. You will need to import the <LinkContainer> module from the react-router-bootstrap library.
import React from "react"
import { Link } from "react-router-dom";
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import { LinkContainer } from 'react-router-bootstrap'
function NavigationBar() {
return (
<Navbar bg="light" sticky="top">
<Nav defaultActiveKey="home"
className="justify-content-center">
<LinkContainer>
to="/"
eventKey="home">
Home
</LinkContainer>
<LinkContainer>
to="/link"
eventKey="link">
Link
</LinkContainer>
</Nav>
</Navbar>
);}
export default NavigationBar;
For further documentation visit https://react-bootstrap-v3.netlify.app/
My First Portfolio Project
My First Portfolio Project
June 2022
For my first portfolio project, I created a simple, single page application that pulled data from the OpenLibrary API to allow a user to create a list of books that they have read, and be served up a handful of statistics about their reading habits: total books, total pages, average pages, average book age, and favorite subjects.
While the calculations for the other stats were fairly straightforward, Unfortunately, I could not find a quick method for JavaScript to calculate frequency, so I needed to devise a way to find the most frequent subjects occurring within the arrays passed from the API, and list out the top 5. I was able to achieve this through looping through the arrays to create objects identifying each subject and its frequency, and then identify the maximum frequency to find the associated subject.
As each book was added into the read list, I created an object that held key information about the book, including information about the subjects. For each book, the OpenLibrary API passes along a string of subjects, with some books containing over 20 subjects! I pulled all of the Subject Arrays into a single, flat array to begin my process.
for (book of readList) {
if (book.subjects === undefined) {
} else {
for (subject of book.subjects) {
subjectArray.push(subject)
}
}
}
After flattening the array (subjectArray), I created a new array that eliminated all of the duplicates (deDupedArray); this would allow me to later create an object for each subject without repeats. To do this, I looped through the flat array, using array.some() to check whether the entry was already in the new array. If the entry was not in the new array, I pushed the entry into the de-duped array.
Next, I needed to match each subject with its respective frequency. I created a second array (subjectFrequency) to hold an array of objects that matched the word with the total frequency of the occurrence in the flattened array. After I pushed a new entry into the de-duped list, I created an object containing the word and the frequency. I calculated the frequency by filtering the flattened array for the given subject, and then taking the length of the filtered array. This object was then pushed into the array of objects. By the end, I had a clean list of each subject and its frequency with no duplicates.
let deDupedList = []
for (subject of subjectArray) {
if (! deDupedList.includes(subject)) {
deDupedList.push(subject)
const count = subjectArray.filter(index => index === subject ).length;
const subjObj = {
subject: subject,
count: count,
}
subjectFrequency.push(subjObj)
}
}
Finally, I needed to extract the top 5 most frequent words. I started by finding the most frequent subject. I created a loop that would find the highest frequency within my array of objects. I pushed all of the frequencies from the array of objects into a new array, and extracted the max from the new array. Note: when using Math.max() on an array, you will need to use the spread operator. Math.max( ) only accepts a set of parameters, such as (x, y, z). Using Math.max(array) will return a result of NaN. Using the spread operator will then cause the array to run through Math.max( ) as Math.max(array[0], array[1], etc, array[n])
I then used findIndex( ) on my array of objects to find the index of the object with a frequency key that matched the max count I had identified in the earlier step. From this, I was able to use the index access and display the subject in the “Favorite Subjects” list. Because I need to use the index of an entry at multiple points in this process, I knew that I would need to use an array of objects, instead of a single, master object as objects do not necessarily preserve order.
However, if I just performed this process 5 times, I would be given the same 5 results as the maximum count would always be the same. To remedy this, I moved the entire process of finding the max frequency and corresponding object into a loop. At the conclusion of each iteration of the loop, I destructively removed the object from the array of objects that was the maximum for the “round”. As I had identified the index of the most frequent word object earlier, I was able to use splice to remove the object at the predetermined index from the array, allowing me to start each new loop without the previous “winner”.
const listNumbers = Math.min(5, subjectArray.length)
for (let i = 0; i < listNumbers; i++) {
const countArray = [];
subjectFrequency.forEach(subject => {
countArray.push(subject.count);
})
const maxCount = Math.max(...countArray)
const index = subjectFrequency.findIndex(subject => subject.count === maxCount);
const freqSubject = subjectFrequency[index].subject;
subjectFrequency.splice(index, 1);
}
Overall, building this frequency calculation gave me experience in using a wide variety of built in array methods, as well as gaining confidence in using loops. One major drawback to this approach, however, as well as the way that the subject information is imported from the OpenLibrary API is that this can result in some clunky data, as many subjects are similar, or may be a poor data import and this functionality does not sanitize the data.
Page updated
Google Sites
Report abuse