Forem: Jacqueline Lam

My Flatiron School Experience + 5 lessons I Learned 👩‍💻💡

Jacqueline Lam — Wed, 29 Jul 2020 14:32:52 +0000

I completed my Software Engineering Bootcamp last week and I am thrilled to share my wonderful experience with our dev.to community, as well as the five valuable lessons that I have learned that might also be useful to fellow bootcamp students.

How It All Started 🌱

I graduated from New York University in 2018 with a BS degree in Media and Communications and a minor in Web Programming and Applications. I started my career in the digital marketing field since I would like to explore a wide range of responsibilities within the field, such as social media marketing and web design.

While working as a Marketing Coordinator in a hospitality firm, I sought new software for building more effective marketing strategies, create beautiful websites, measure campaign results accurately, and streamline different operations.

With that in mind, in the Summer of 2019, I attended a Flatiron School event about Emerging Tech in the restaurant industry and was really amazed to see how programming intertwines with our daily lives. I had a glimpse of who was driving these restaurant tech innovations and I was intrigued by how such software worked.

During the bootcamp prep, I really enjoyed learning Ruby and understanding more about how applications are built. Therefore, I decided to enroll in the part-time software engineering program in Fall 2019.

My Learning Experience

Curriculum

The curriculum was divided into five major modules, which was designed for students to first learn the concepts of a programming language, followed by the application of a popular framework. At the end of each module, there was a two-week project, where I developed a web application using the newly acquired knowledge.

The modules and the projects that I worked on:

1. Command Line Interface + Procedural Ruby

Concepts: Procedural Ruby (CLI, data types and structures, Object-Oriented Ruby, Metaprogramming, Scraping, Separation of Concerns, etc.

Project: I built a Command Line Interface application that uses Nokogiri to scrape data from the Outdoor Gear Lab’s webpage for Best Rain Jackets. It provides different product information to the user according to the user’s inquiries, such as pros/cons and feature ratings.

2. SQL + Sinatra

Concepts: HTML, CSS, Rack, Object Relational Mapping (ORMs) and ActiveRecord, CRUD, Model-View-Controller (MVC), Content Management System, and SQL

Project: Bolderer v1 is a web app built using the web framework Sinatra. It is designed for aspiring boulderers to log the problems that they have climbed in the gym.

3. Ruby on Rails

Concepts: ActiveRecord Associations, Validation and Forms, User Authentication with Omniauth, Layouts and Partials, Helper Methods, and Nested Routing

Project: Based on the idea of Bolderer v1, I created Bolderer v2 with Rails and built a more complex domain with improved user authentication and features. Users can browse problems in the bouldering gym by different filters, keep track of their sends, and check out other climbers who have crushed the same problems.

4. JavaScript and Rails

Concepts: Vanilla JavaScript, JSON, and Fetch API

Project: Umami Pantry is my favorite project since it is the first single page application I have ever built and it is more interactive than my previous web applications, thanks to the use of asynchronous Javascript. In addition, the project is timely and unique since it allows users to find recipes for limited ingredients available in their apartment during a lockdown.

5. React and Redux

Concepts: React, Redux, JSON, and Client-side Routing

Project: Portfolio is composed of a React & Redux front-end and Rails API backend. I learned to use Redux as a state manager and Rails as a back-end JSON API. By using this set up, I can maintain my portfolio efficiently since it allows me to dynamically render updated project data and blog posts by updating my database directly.

I have learned so much in the past 10 months and I am glad that I was taught not only programming concepts and application of frameworks, but also the habit of continuous learning and mentality of problem-solving. Below are some valuable lessons that I have learned throughout the course.

Five Valuable Lessons I Learned 💡

Don’t Be Afraid to Ask Both 'Dumb' and Critical Questions
- It is normal to experience imposter syndrome and wonder if you are the only person who does not understand something. Share the question with your cohort mates and cohort lead and you will find that your question may also benefit others.
- The bootcamp is structured to teach you programming concepts and some design and architecture patterns. Whilst you’re a student and might think you should adopt whatever you have been taught, it is important to challenge the material and research for other solutions. There will always be new patterns or frameworks so you should keep an open mind.
- For instance, the curriculum teaches an object-oriented design approach to JavaScript, but it is NOT the only approach and JavaScript is becoming more functional. It is important to remember that the approach or pattern that you were taught was not the only way to do things and you should always explore discourses about different approaches.
- Technology moves quickly, so you should not get stuck on a single way of doing things because preferred patterns change rapidly. I learned to use my extra hours to research on concepts beyond existing resources provided by Flatiron School's program.
Start a Note-taking System 📝
- Reading the lectures and completing the labs are not enough to help you retain the knowledge. I found it especially useful to use Dropbox Paper to take notes as I go through the lectures and labs. I could include code snippets as well since Dropbox paper supports Markdown syntax. Some of my cohort mates also recommend Microsoft OneNote.
Project Building: How to Plan Your Project
- Map out your model relationships, routes, frameworks, and APIs.
- Brainstorm your User story: Who is your user? What are their pain points? How do they use our solution to mitigate or overcome this problem?
- Domain Modeling: I used draw.io to map out my model relations diagram and plan out my routes.

4. Perfect is the Enemy of Good

Whether it is a small debug, a feature added, or one query method solved, you should celebrate these small wins. Especially during project week, I had often started with ambitious goals with how I wanted certain features to work and look. However, it is important to learn to first build a Minimum Viable Product (MVP) before adding any of the extra flares. I realized that I had to breakdown my features into tiers of importance and slowly add features and styling after I created the MVP.
Building out the project and flushing out an idea does not have to be mutually exclusive.
Validation of ideas comes from hitting the ground and starting to code. You will get stuck if you try to plan out all the details of the project from scratch. Meanwhile, you can test the theory of what makes an idea good or bad by testing the committed code and MVP.

Next Steps 🚀

I will be starting my career counseling and job hunting soon, so please stay tuned for updates on technical challenges, job hunting, and interview experience, and more.

Thank you for reading! Please feel free to head over to my profile to check out my blog posts for each project.

Building My Personal Portfolio with React & Redux (pt.2)

Jacqueline Lam — Wed, 15 Jul 2020 13:08:59 +0000

In part 1 of my article, I discussed why I decided to rebuild my personal portfolio with a Rails API and React & Redux front-end, and touched on the set up of my application.

In part 2, we will take a look at the features that I built and how they work based on the Redux Flow.

Feature Highlights

Filtering Projects By Stacks

Some research show that “6 seconds is the average time recruiters spent reading a resume”. With that in mind, I tried to design a portfolio website with a simple UI and features that will keep users engaged, and focused on the most important visual elements.

For a full-stack software engineer role, one of the most important things recruiters ask is “does the candidate have any experience using ‘xyz’ language or frameworks?” What that in mind, I designed the portfolio website with a simple filter bar so any visitor can see exactly which projects correspond to which sets of selected technologies.

When the user presses a filter button, it will trigger an onClick event, calling the addFilter or removeFilter callback prop (line 34 and line 39), based on the current state of the button (the button state is handled in my local React state.)

1 import React, { Component } from 'react'
2 
3 class FilterButton extends Component {
4  state = {
5    selected: undefined
6  }
7
8  componentDidMount() {
9    const { selectedStackIds, stack } = this.props
10    const myStackId = stack.id
11
12    this.setState({
13      selected: selectedStackIds.includes(myStackId.toString())
14    })
15  }
16
17  getButtonClassnames = () => {
18    const { selected } = this.state
19
20    let renderClasses = "btn btn-outline-info btn-sm"
21    if (selected) {
22      renderClasses = "btn btn-outline-info btn-sm active"
23    }
24
25    return renderClasses
26  }
27
28  handleOnClick = event => {
29    let pressed = this.state.selected
30    console.log('button was active: '+ this.state.selected)
31    const stackClicked = event.target.id
32
33    if (!pressed) {
34      this.props.addFilter(stackClicked)
35      this.setState({
36        selected: true
37      })
38    } else {
39      this.props.removeFilter(stackClicked)
40      this.setState({
41        selected: false
42      })
43    }
44  }
45
46  render() {
47    const { stack } = this.props
48    const renderClasses = this.getButtonClassnames()
49
50    return (
51      <button
52        id={stack.id}
53        type="button"
54        className={renderClasses}
55        aria-pressed={this.state.selected}
56        value={stack}
57        onClick={this.handleOnClick}>
58        {stack.name}
59      </button >
60    )
61  }
62 }
63
64 export default FilterButton

When the addFilter or removeFilter function in the ProjectsContainer is invoked, it will execute the action creator below, which will return an action object:

// portfolio-frontend/src/actions/filterProjects.js
    export const addFilter = stackId => {
      return {
        type: 'ADD_FILTER',
        stackId
      }
    }

    export const removeFilter = stackId => {
      return {
        type: 'REMOVE_FILTER',
        stackId
      }
    }

The returned action object will then be dispatched to projectsReducer, which will modify copies of the selectedStackIds and filteredProjects state in the Redux store. The reducer will then return the new version of our global state based on the sent action.

// portfolio-frontend/src/reducers/projectsReducer.js
const projectsReducer = (state = {
  allProjects: [],
  stacks: [],
  selectedStackIds: [],
  filteredProjects: [],
  loading: false,
}, action) => {
  let stackIds
  let filteredProjects = []
...

case 'ADD_FILTER':
      filteredProjects = state.filteredProjects.filter(proj => {
        return proj.stacks.some(stack => stack.id.toString() === action.stackId)
      })

      stackIds = state.selectedStackIds.concat(action.stackId)
      // Set store unique stackIds
      stackIds = [...new Set(stackIds)]

      return {
        ...state,
        selectedStackIds: stackIds,
        filteredProjects: filteredProjects,
      }

    case 'REMOVE_FILTER':
      stackIds = state.selectedStackIds
      stackIds.splice(stackIds.indexOf(action.stackId), 1)

      filteredProjects = state.allProjects
      // only include projects that have all the selected stacks
      if (stackIds.length > 0) {
        filteredProjects = state.allProjects.filter(proj => {
          const projectStacks = proj.stacks.map(proj => proj['id'].toString())
          const includesSelectedStacks = stackIds.every(selectedStack =>
            projectStacks.includes(selectedStack)
          )
          return includesSelectedStacks
        })
      }

      return {
        ...state,
        filteredProjects: filteredProjects,
        selectedStackIds: stackIds,
      }
...

The project components subscribed to Redux store will re-render when state changes, displaying not only the toggled button update but also the filtered project results. This all happens on the client-side without ever needing to communicate with the Rails server.

Adding Comments to a Project

The addComment action works similarly to the addFilter action. However, instead of just updating the local state, store, and re-rendering the component, it also sends an asynchronous POST request to the Rails API using Javascript’s Fetch API. This is necessary for persisting the new comment record into our Postgres database.

Upon submission of the form, the addComment() function will dispatch the following action to the store:

    // portfolio-frontend/src/actions/addComment.js
    export const addComment = comment => {
      return (dispatch) => {
        fetch(`http://localhost:3000/api/v1/projects/${comment.project_id}/comments`, {
          headers: {
            // data content sent to backend will be json
            'Content-Type': 'application/json',
            // what content types will be accepted on the return of data
            'Accept': 'application/json'
          },
          method: 'POST',
          // tell server to expect data as a JSON string
          body: JSON.stringify(comment)
        })
          //immediately render the new data
          .then(resp => resp.json())
          .then(newComment => dispatch({ type: 'ADD_COMMENT', comment: newComment }))
      }
    }

Here, I am using a middleware Redux Thunk. It allows the action creator to take the dispatch function as an argument, giving us access to dispatch function. Next, we send the action returned by addComment action creator to the projectsReducer immediately after the asynchronous fetch request is resolved.

Lastly, projectsReducer will update our store with the remote data that has just been persisted.

    //portfolio-frontend/src/reducers/projectsReducer.js
    ...
    case 'ADD_COMMENT':
      let index = state.filteredProjects.findIndex(project => project.id === action.comment.project_id)
      let project = state.filteredProjects[index]

      return {
        ...state,
        filteredProjects: [
          ...state.filteredProjects.slice(0, index),
          { ...project, comments: project.comments.concat(action.comment) },
          ...state.filteredProjects.slice(index + 1)
        ]
      }

The new comment component will be rendered in the browser:

Conclusion

With this portfolio website, I hope it adds additional color beyond the paper resume. It tells a story of a full stack web developer who can hit the ground running and contribute not only robust code, but also keen design principles.

In addition to what exists now, I also plan on adding a contact page (with a contact form and social media links), a "featured project" button on the homepage to bring the user directly to my latest project showcase, and possibly a dark mode toggle.

I would love to hear your suggestions for any other features that you think might be a great addition to my portfolio. Thank you for reading and stay tuned for the deployed website.

Building My Personal Portfolio with React & Redux (pt.1)

Jacqueline Lam — Wed, 15 Jul 2020 12:36:47 +0000

As my final project for Flatiron School, I chose to create my own personal portfolio to kickstart my new career.

After months of hard work, I have created applications dear to my heart, which are climbing and cooking related, such as:

Bolderer — a digital logbook that allows indoor climbers to keep track of their climbs; and
Umami Pantry — a beautiful recipe application that allows users to find recipes made with selected pantry items

My initial thought was to add these new projects to my exisiting personal website, which was built with HTML, CSS, and bootstrap before the bootcamp.

Nevertheless, in order to best showcase my hard-learned skills, I decided to produce a new personal portfolio website, leveraging cutting edge web development technologies.

The application is composed of a Rails-powered API and a React & Redux front-end.

Rails API Setup

Once I set up the routes, domain model, ActiveRecord associations, database, and Cross-origin resource sharing (CORs) settings, I seeded all my project data: attributes including name, description, image_url, github_url, blog_url, demo_vid, reason and features, and the attributes of its comments and stacks objects.

All the project data were then rendered to JSON format in the controller actions, which would be sent to the front-end upon requests.

This is great for maintenance purposes because whenever I create a new project, I can just update my database and the new project data will be dynamically rendered to the projects page on the front-end.

Benefits of using React & Redux

By configuring the client-side with create-react-app, I was able to jump straight into building components
Redux: a centralized way to manage the application data
- The application's global state is stored in the store
- By connecting the container components to the store, I could get data from the redux store and map them to a component’s props via the method mapStateToProps
- Similarly, I could pass dispatch functions down as callback props to the presentational components via the mapDispatchToProps method, giving the children components the ability to send actions to the reducer, in order to update the global state

class ProjectsContainer extends Component {
...
// passing in the state from the Redux store
// so we can access values in our stores as props
const mapStateToProps = state => {
  return {
    stacks: state.projects.stacks,
    selectedStackIds: state.projects.selectedStackIds,
    filteredProjects: state.projects.filteredProjects,
    loading: state.projects.loading
  }
}

// gives us ability to dispatch new actions to our store directly from this component
const mapDispatchToProps = dispatch => {
  return {
    fetchStacks: () => dispatch(fetchStacks()),
    fetchProjects: () => dispatch(fetchProjects()),
    addFilter: stackId => dispatch(addFilter(stackId)),
    removeFilter: stackId => dispatch(removeFilter(stackId))
  }
}

// connect redux store to this component
export default connect(mapStateToProps, mapDispatchToProps)(ProjectsContainer)

3. Separating Concerns

Container components are primarily concerned with managing state and actions that change the global state of an app. I created three containers — ProjectsContainer, CommentsContainer, and BlogPostContainers, with each of them connected to the redux store. With the use of these container components, I can compartmentalize the business logic for managing each major web page.
Presentational components are mostly stateless and are responsible for composing UI elements by providing DOM markup and styling.

4. Improved User Experience

React allows us to create a Single-Page Application — a "web application that interacts with the user by dynamically rewriting the current web page, instead of the default method of the browser loading entire new pages [from the server]." (Wikipedia)
For example, when the user writes a new comment, a new Comment component will be rendered dynamically without having to refresh the whole webpage. This leads to a more fluid and cohesive overall user experience:

Next Steps

In part 2 of my article, I will discuss the highlighted features of my portfolio, built with the intention of creating user engagement.

Thank you for reading! Please feel free to check out my project on GitHub or leave a comment below. I will gladly answer any questions you may have.

Building a Single Page App for COVID-19 Lockdown👩‍🍳

Jacqueline Lam — Thu, 14 May 2020 07:40:33 +0000

Umami Pantry

A Single Page App with Javascript/ Rails API

Since we are all in lockdown and the grocery stores are packed with people these days, I have created a single page application called Umami Pantry to help users find matching recipes for available ingredients in their kitchen. It is designed to encourage freestyle cooking with easy-to-substitute ingredients.

The app is composed of backend Rails API and front-end modular JS clients, which use asynchronous Javascript to make HTTP requests to the API to get/ post data and render them to the user interface.

Client-Server Communication

All the interactions between the client and the server are handled asynchronously with the fetch() method provided by Fetch API.

Get Matching Recipes Data with Fetch

// Adapter class
  getMatchingRecipes() {
    let matchingRecipes = [] // 1
    // 2, 3, 4
    return fetch(`http:localhost3000/get_recipes/?selected_ingredients=${this.selectedIngredients}`)
      .then(resp => resp.json())
      .then(recipesData => { 
        recipesData.forEach(recipe => {
          // 5
          let r = Recipe.findById(recipe.id)
          r = r || new Recipe(recipe)
          matchingRecipes.push(r);
        })
        this.renderMatchingRecipes(matchingRecipes); // 6
      })
      .catch(err => console.log(err)); // 7
  };

To fetch all the matching recipes:

Create an empty array to hold the unique matchingRecipes objects
Call fetch() and pass in a URL string to the desired data source as an argument. I'm passing in an array of ingredientIds.
fetch() returns an object representing the data source sent back (not the actual JSON). We then call .then() on this object, which accepts the callback function, receiving the response as its argument and call the .json() method to return the content from the response.
In the second .then() we receive a JSON string which holds the matchingRecipesData, which we then iterate over the collection to access each recipe object.
Search for the recipe in the Recipe class, if the recipe object does not exist, instantiate a new Recipe object. Push the recipe object into the matchingRecipes array.
If the fetch request is successful, the adapter method renderMatchingRecipes(matchingRecipes) will render all the matching recipes into the DOM.
Add a .catch() after the two .then() calls, appending an error message to the console if .catch() is called.

Render JSON from a Rails Controller

Between step 2 and 3, we use the /get_recipes endpoint to access the matching pieces of recipe data. We get the matching instances in the Recipe model and render them into JSON in the recipes controller:

# Step 2.5
class RecipesController < ApplicationController
  def get_recipes
    selected_ingredients = params[:selected_ingredients].split(',').map(&:to_i)
    recipes = Recipe.filter_by_ingredients(selected_ingredients)
    render json: RecipeSerializer.new(recipes).instances_to_serialized_json
  end
end

We first extract the the string of ingredientIds from the params and convert them into a string of intergers. We then filter out the Recipe instances that include the specific set of ingredients.

We call render json: followed by the customized data that would be converted to JSON. The customized data is handled by the RecipeSerializer service class, which handles the logic of extracting and arranging the JSON data that we want to send back to the client.

Results

Iterations in JavaScript

There are a lot of ways to traverse a collection in Javascript. However, it can get quite confusing especially when you want to iterate through Array-like DOM objects. There are .map, for..in, for...of and .forEach but they are all slightly different.

For example, using a .forEach method on an HTMLcollection would cause a TypeError:

It is important to note that there are two ways to select multiple DOM nodes:

document.getElementsByClassName()
- returns an HTMLCollection
- contains same DOM elements
document.querySelectorAll()
- returns a nodeList
- can contain different DOM elements.
- can use forEach for iteration

To iterate over the HTMLcollection, we can use Array.from() to convert the HTML collection into an array and then traverse the collection like an array with the .forEach method:

const ingredientCards = document.getElementsByClassName('ingredientCard');
Array.from(ingredientCards).forEach(card => card.setAttribute("style", "background-color: white;"));

Resources

Here are a few additional articles that are very helpful:

Conclusion

This is my second full-stack project (after my Rails Bolderer CMS App), and I am glad that I am able to focus more on the front-end for this project. Learning JavaScript is a breath of fresh air, and I am looking forward to learning more efficient ways to manipulate the DOM, make better use of eventListeners to create more interactive and responsive sites, and to communicate with the server asynchronously.

Please feel free to check out my project and leave any feedback below:

jacqueline-lam / umami-pantry

A single page app built to help homecooks find matching recipes for limited pantry ingredients.

Ruby on Rails App: Domain With Many-to-many Relationships

Jacqueline Lam — Sat, 14 Mar 2020 18:56:47 +0000

Creating a domain with Many-to-many relationships: — using Active Record Associations, Rails Nested Resources and Helper Methods

In my last Sinatra portfolio project, I created a climbing web application, Bolderer, which allows User to log bouldering Problems and track their climbing progress.

My article on building a simple domain with Sinatra: Sinatra Web App: MVC, Sessions, and Routes

Simple Association Diagram

The goal for my Ruby on Rails project is to adopt the Domain-driven Design (DDD) and continue to modify my domain: stretching beyond just User, Problem, and Style models. I would also like to improve my domain logic with more complex database queries and data relationships.

I want a user to not only be able to track their individual climbing progress (by logging problems that they have climbed), but also share and compare their 'sends' with others.

With this in mind, I have created a new Bolderer Association Diagram:

Note: comments and rewards will be implemented in the near future

To allow users to share the same problems that they have climbed, I have created a Many-to-many connection between the two models.

How to declare a Many-to-many association between Active Record models

A many-to-many connection is set up between the User model and Problem models, by implementing a has_many :through association. The join table Send belongs to both the User and Problem:

class User < ApplicationRecord
  has_many :sends
  has_many :problems, through: :sends
end

class Send < ApplicationRecord
  belongs_to :user
  belongs_to :problem
end

class Problem < ApplicationRecord
  belongs_to :wall
  has_many :sends
  has_many :users, through: :sends
  has_many :problem_styles
  has_many :styles, through: :problem_styles
end

class Wall < ApplicationRecord
  has_many :problems
end

class Style < ApplicationRecord
  has_many :problem_styles
  has_many :problems, through: :problem_styles
end

class ProblemStyle < ApplicationRecord
  belongs_to :problem
  belongs_to :style
end

With the help of Active Record has_many :through association, I can now use methods provided by Rails, such as:

@user.sends
@user.problems
@send.user
@send.problem
@problem.users
@problem.sends

Following the set up of my model associations, I encounter the next problem: with so many models present, how can I maintain a separation of concerns and organize my routes in a relatively DRY manner?

How to Use Nested Resources with appropriate RESTful URLs

⚠️ Routes Previously Used in my Sinatra Application

HTTP Verb	Route	CRUD Action	Used for/ result
GET	/	index	index page to welcome user - login/ signup
GET	/problems	index	displays all problem (all problems are rendered)
POST	/problems	create	creates a problem; save to db
GET	/problems/:id	show	displays one problem based on ID in the url (just one problem is rendered)
GET	/problems/:id/edit	edit	displays edit form based on ID in the URL
PATCH	/problems/:id	update	modifies an existing problem based on ID in the url
DELETE	/problems/:id	delete	deletes one article based on ID in the URL
GET	/users/:username	show	display one user’s problems based on :username in the url

Note: excluding login/ create account routes

As you can see, all of the problems belonging to a user were just displayed under their show page in my Sinatra Bolderer application. A user may have sent a problem without knowing that their friend has also sent it. Meanwhile, the problem index view was displaying multiple duplicated problems logged by different users.

In our newly drawn association diagram, a send can logically be considered a child object to a user, so it can also be considered a nested resource of a user for routing purposes. I am now able to document this parent/child relationship in my routes and URLs.

💡 Nested Resource Routes Used in my Rails Application

resources :users, only: [:index, :new, :create, :show] do 
  resources :sends
  get 'sends/sort/easiest', to: 'sends#easiest'
  get '/sends/sort/hardest', to: 'sends#hardest'
end

In addition to the routes for Sends, this declaration will also route Sends to a SendsController, where I will be defining all the actions used to:

Display all sends (sends#index)
Display a form for creating a new send belonging to a user (sends#new)
Create a new send belonging to a user (sends#create)
Display a specific send by a user (sends#show)
Display a form for editing a send belonging to a user (sends#edit)
Update a specific send by a user (sends#update)
Delete a specific send belonging to a specific user (sends#delete)

Nested Route URL Helpers

Rails has also magically generated a set of nested route URL Helpers for my nested resource routes.

Some examples of the routing helpers created include user_sends_path and edit_user_sends_path. These helpers take an instance of User as the first parameter (user_sends_url(@user)).

Combining Nested Route URL helpers with `link_to` helper

I can now easily use Rails link_to helper method and the named helpers for our nested routes to create a link to a specific User's Send show page:

🔗 Creating a link in plain HTML:

<a href="/users/#{@send.user.id}/sends/#{@send.id}">See this send</a>

🔗 V.S. Using Rails helper method link_to + named helpers for nested routes:

<%= link_to 'See this send', user_send_path(@send.user, @send) %>

Note: Rails is able to extract the ids of the @send.user and @send passed into the user_send_path, and it will redirect us to the show page of this specific send.

🔎 Class-level Active Record Scope methods

Lastly, I find it immensely helpful to use Rails scope methods for improving my domain logic, as it allows me to perform complex database queries:

Problem model

  scope :sort_by_date, -> { order('created_at desc') }
  scope :sort_by_grade, -> { order('grade desc') }

Send model

  scope :sort_by_date, -> { order('date_sent desc') }
  scope :sort_by_grade_desc, -> (user) {
    where(user_id: user).joins(:problem).order('grade desc')
  } 
  scope :sort_by_grade_asc, -> (user) {
    where(user_id: user).joins(:problem).order('grade asc')
  }

User model

  # query user table for user who climbed the hardest graded problem 
  scope :best_climber, -> { joins(:problems).order('grade desc').distinct.limit(1).first }

A user can now easily browse problems and sends:

User's sends: sort by most recent sends, easiest to hardest sends, and hardest to easiest sends
Problems: sort by most recently created problems, easiest to hardest problems, and hardest to easiest problems
User: Display the crusher who climbed the hardest problem

Takeaways

With the help of Rails, I can easily create Active Record associations between different models while developing my domain.
Implement nested resources, a powerful tool, to represent the parent/child relationships in my domain (A Send belongs to a User) and to keep my routes tidy.
Use the 🔗nested route URL helpers to easily link to different views
Use 🔎scope methods to perform complex database queries.

Sinatra Web App: MVC, Sessions, and Routes

Jacqueline Lam — Mon, 20 Jan 2020 03:53:48 +0000

A Sinatra Web App for Boulderers

My Sinatra-powered web app — Bolderer, is designed for boulderers who are eager to track their climbing progress, strengths and weaknesses by logging routes/ problems that they have climbed. They can also see others' profiles since bouldering is a personal yet social sport, where the climbing community is supportive and would always cheer for your 'sends'.

I started my project by mapping out the models and their relationships with one another. This helped me plan the models, database tables, and the has_many, belongs_to and many-to-many relationships on the models.

Bolderer Association Diagram:

Key Concepts

I would like to highlight some key building blocks of my Sinatra project — MVC, Sessions, CRUD Actions, and RESTful Routes, which have allowed me to create a functional app and taught me the base concepts of a Content Management System (CMS).

Model-View-Controller (MVC)

An organized way to build frameworks for web apps.

I found this immensely useful in helping me structure my code. It provided a separation of concerns by grouping my files by functionalities -- Models (logic, where data is manipulated and saved), Views (front-end), and Controllers (middleman - relays data from browser to app, and from app to the browser).

My MVC directories:

User Password Encryption with BCrypt

I used the Ruby Gem BCrypt to secure the users' data by encrypting their passwords. It allowed my app to sign up and log-in a user with a secure password.

Implementing Bcrypt by adding the password column as pasword_digest in my users table:

class CreateUsers < ActiveRecord::Migration
  def change
    create_table :users do |t|
      t.string :username
      t.string :password_digest
    end
  end
end

I also added ActiveRecord's macro has_secure_password to my User model, which let me access the user's password attribute even though the users database only had the column called password_digest.

The macro also provided another useful method, authenticate:

post '/login' do
    user = User.find_by(username: params[:username])

    if user && user.authenticate(params[:password])
      #storing user_id key in session hash
      session[:user_id] = user.id
      redirect "/users/#{user.id}"
    else
      @error = true
      erb :"/users/login"
    end
  end

The User's authenticate method turned the user's password input into a hash that would get compared with the hashed password stored in the database. If the user authenticated, the method would return the User instance; otherwise, it would return false. This was helpful for logging in users.

Sessions and User Authentication and Authorization

Sessions were used to verify a user's identity, as the users were requested to verify their identity by logging in with valid credentials
Hence, I used sessions to filter and dictate what a user could see or edit:
- The users could only view the Problems index page if they were logged in
- The users could only edit/ delete the resources (problems) that they created
To use sessions in Sinatra, I enabled my application to use the sessions keyword to access the session hash:

  configure do
    set :public_folder, 'public'
    set :views, 'app/views'
    enable :sessions
    set :session_secret, "session_encryption"
  end

When a user signs in successfuly, the user_id key would get stored in the session hash: session[:user_id] = user.id.

Defining RESTful routes

Another key lesson was learning to use restful routes to implement CRUD actions. I realized how important it was to plan my routes in order to handle the HTTP verbs and URLs in an organized and standardized way.

I designed my ProblemsController, UsersController and SessionsController controller actions to follow restful conventions and to map the HTTP verbs (get, post, patch, delete) to the controller CRUD actions.

For my app, I wanted a logged-in user to be able to access all CRUD actions: the ability to create sessions (login)/ problems, read, update or delete their own problems.

My Problems Controller:

HTTP Verb	Route	CRUD Action	Used for/ result
GET	/	index	index page to welcome user - login/ signup
GET	/problems	index	displays all problem (all problems are rendered)
POST	/problems	create	creates a problem; save to db
GET	/problems/:id	show	displays one problem based on ID in the url (just one problem is rendered)
GET	/problems/:id/edit	edit	displays edit form based on ID in the URL
PATCH	/problems/:id	update	modifies an existing problem based on ID in the url
DELETE	/problems/:id	delete	deletes one article based on ID in the URL

My Users Controller and Sessions Controller:

HTTP Verb	Route	CRUD Action	Used for/ result
GET	/signup	index	display signup form
POST	/signup	create	creates a user
GET	/login	index	displays login form
POST	/login	create	create a session
GET	/logout	delete	delete session/ log out
GET	/users/:username	show	display one user’s problems based on :username in the url

Other resources:

Seeding Data: The dummy data was very important as it helped to demonstrate to the first user(s) how this web app could be used. There was the option of using APIs to seed data (especially for general topics like recipes), but I decided to create my own instances of Users, Problems, and Styles and their associations to make my data more personal (as it reflected my actual bouldering logs)
Bootstrap: This allowed me to add styling to my forms, buttons, etc. without having to build the CSS from scratch

Building my first project: CLI Data Gem 💎

Jacqueline Lam — Sun, 03 Nov 2019 18:35:52 +0000

A CLI App for Indecisive Shoppers

As an indecisive yet frugal shopper, I struggle a lot in making my purchase decisions. I love to do extensive research to find the product with the best features for its cost.

Hence, I decided to create a gem that will provide the user with concise information about a type of product and gives the user the option to learn about the best products based on a chosen feature! — Almost like a product rater of some sort.

I visited Outdoor Gear Lab's Best Women's Rain Jackets of 2019 website dozens of times this year before I finally decided on the perfect jacket for me. Once I decided to scrape from this website, I started to imagine my CLI app interface according to features that a user might be interested in, and then reverse-engineer the data that I would need to scrape from the website:

Planning a CLI for Best Rain Jackets:

Shows a list of best female rain jackets #name - price - overall rating

Shows details of a chosen jacket

Shows the best products based on a chosen rating category

So, what are the properties of a rain jacket? It has a...

Name

Price

Description

Pros & Cons

URL to full product review

Overall rating

Other rating categories (water resistance, breathability, comfort, weight, durability, and packed size)

Once I set up the basic structure of my gem and created the executable files, I started working on my Scraper class.

Scraping data

First, I used Open-URI to scrape the website's HTML and turned it into a string. Then, I used Nokogiri::HTML to parse the HTML string into a NodeSet. I identified the jacket properties that I wanted to assign to each jacket instance, and I began using Nokogiri's CSS method to retrieve selected data from the jacket table.

In the screenshot above, each <tr> tag (table row) contains a collection of one property for all jackets, while each <td> (field) contains the property element of one jacket instance.

As I iterated through each <tr> tags /table row:

Row #1: Instantiated a new jacket instance at each <td> (field)
If the row contained a property that I needed for the jacket object, I would scrape the values of respective attributes and assign them to each jacket object
Saved all the jacket instances (with assigned attributes) in an all_jackets array

Converting Scraped Data to Objects

At this stage, I had mapped out my domain and the decoupled my namespaced classes: RainJackets::CLI, RainJackets::Jacket, and RainJackets::Scraper. The CLI object will interact with the Scraper class, which will be responsible for creating Jacket instances.

When the user runs the gem, an instance of the CLI class would be created -> The CLI controller would call the Scraper class method initialize_jacket_objects -> where the Scraper would parse the info for all jackets -> and lastly, create the Jacket instances and assign different attributes to the jackets.

Ruby Object-Oriented Programming was so powerful that it allowed me to encapsulate all the logic for my CLI interface into classes. It also encapsulated the abstraction of real-world objects in a class (i.e. a jacket with name, price, description, etc.)

Instead of using hashes and arrays to give the jacket object information, I used the Jacket class to store a jacket's attributes and methods. The attr_acessor macro allowed me to read and write to the attributes, and a class variable @@all allowed me to save all the instances of my Jacket class in an array.

CLI Application

With a masterplan for my app's functionality, I couldn't wait to complete the rain jackets controller. The CLI class was responsible for getting the user's input, matching them to the available commands and displaying the results derived from the scraped data. I was a bit too stoked and made the mistake of writing everything in a #call method in my CLI class (Spaghetti code alert 🍝❗). This caused a lot of bugs as the code was hard to follow.

So, I took a deep breath and a step back. I broke down the #call method into individual methods based on each of its functions — i.e. #prompt_input, #get_input, #handle_input, #read_rating_input, #print_ratings, #print_list_all, #print_menu, etc. The last hurdles were to ensure that the #handle_input logic would prevent errors stemming from user inputs and ensure that the #print methods would successfully retrieve desired scraped data, reformat them and display meaningful results to the user.

And...Wa~la! The app is now in business!

Recap of My Process 📝

Chose a website with abundant and useful information
Imagined my interface and planned my gem
Started with my project structure — created my GitHub repo and built a gem with bundler
Created my bin file executable and set up my environment
Understood the website's HTML structures and patterns, then developed algorithms to scrape data efficiently
Converted the scraped data to objects
Built the CLI interface
Refactored my code and add comments
Published the gem onto RubyGems.org

My Key Takeaways

Planning: Think about how my gem would work before starting to code and break down my goals into smaller tasks in order to avoid feeling overwhelmed
Testing my code with bin/console & binding.pry: A great way to replicate project-environment. Once I scraped the table from the rain jackets website, I used the console to test the CSS selectors that will allow me to retrieve desired pieces of info out of the HTML document and I used binding.pry for debugging
Rubber duck debugging: Revisit my code line-by-line and explain what it does often leads me to the bug (often a silly syntax error like a missing end or closing parenthesis🙄)
Program architecture and design patterns: This can be very challenging since it comes with experience. Although my code runs without errors, there is always a more organized, abstract and efficient alternative to mine. I found it helpful to watch walkthroughs and video demos (especially by Flatiron School's founder, Avi Flombaum) to learn how professionals would approach problems.
DRY-ing up my code: Writing long methods with multiple functions (a.k.a spaghetti code) makes debugging really hard. A great solution is to remind myself to limit each method to one (of few) functionality.
Refactoring: As much as I would love to write abstract code, it is okay to write long hard-code first, and then refactor my code to become more dynamic and abstract. Some useful methods include #send, #include?, and enumerators like #map and #each_with_index.

What's next?

Now that I have built the basis of my CLI app, I am excited to add additional features, such as:

Scraping Outdoor Gear Lab's "Best Men's Rain Jackets of 2019" webpage
- Provide the options for reviewing men's or women's rain jackets in CLI
Providing a more customized user-experience:
- Allow user to compare two jackets by selecting multiple properties and rating categories that they are interested in, then display the results side-by-side.

Feel free to explore my project on Github or on rubygems.org and share your feedback with me! Thanks for reading!

Forem: Jacqueline Lam

My Flatiron School Experience + 5 lessons I Learned 👩‍💻💡

How It All Started 🌱

My Learning Experience

Curriculum

1. Command Line Interface + Procedural Ruby

2. SQL + Sinatra

3. Ruby on Rails

4. JavaScript and Rails

5. React and Redux

Five Valuable Lessons I Learned 💡

Next Steps 🚀

Building My Personal Portfolio with React & Redux (pt.2)

Feature Highlights

Filtering Projects By Stacks

Adding Comments to a Project

Conclusion

Building My Personal Portfolio with React & Redux (pt.1)

Rails API Setup

Benefits of using React & Redux

Next Steps

Building a Single Page App for COVID-19 Lockdown👩‍🍳

Umami Pantry

A Single Page App with Javascript/ Rails API

Client-Server Communication

Get Matching Recipes Data with Fetch

Render JSON from a Rails Controller

Results

Iterations in JavaScript

Resources

Conclusion

jacqueline-lam / umami-pantry

A single page app built to help homecooks find matching recipes for limited pantry ingredients.

Ruby on Rails App: Domain With Many-to-many Relationships

Creating a domain with Many-to-many relationships: — using Active Record Associations, Rails Nested Resources and Helper Methods

Simple Association Diagram

How to declare a Many-to-many association between Active Record models

How to Use Nested Resources with appropriate RESTful URLs

⚠️ Routes Previously Used in my Sinatra Application

💡 Nested Resource Routes Used in my Rails Application

Nested Route URL Helpers

Combining Nested Route URL helpers with link_to helper

🔎 Class-level Active Record Scope methods

Takeaways

Sinatra Web App: MVC, Sessions, and Routes

A Sinatra Web App for Boulderers

Bolderer Association Diagram:

Key Concepts

Model-View-Controller (MVC)

My MVC directories:

User Password Encryption with BCrypt

Sessions and User Authentication and Authorization

Defining RESTful routes

Other resources:

Building my first project: CLI Data Gem 💎

A CLI App for Indecisive Shoppers

Planning a CLI for Best Rain Jackets:

So, what are the properties of a rain jacket? It has a...

Scraping data

Converting Scraped Data to Objects

CLI Application

Recap of My Process 📝

My Key Takeaways

What's next?

Combining Nested Route URL helpers with `link_to` helper