DEV Community: Anthony Mendoza

Leetcode #98 (validate binary search tree)

Anthony Mendoza — Wed, 23 Dec 2020 18:49:08 +0000

Hi!
I wanted to share my answer to a really cool problem I came across on leetcode. I want to do it a bit differently, I want to first share a sort of pseudocode/steps for anyone kind of stuck that wouldn't want the answer right away.

- The problem

Given the root of a binary tree, determine if it is a valid binary search tree (BST).
A valid BST is defined as follows:

The left subtree of a node contains only nodes with keys less than the node's key.

The right subtree of a node contains only nodes with keys greater than the node's key.

Both the left and right subtrees must also be binary search trees.

This is what a binary search tree should look like

Anything on the left must be less than the parent and anything on the right must be bigger than the parent.

- Thoughts / Questions

Some things to keep in mind if you were asked this during an interview.

Questions

What would the output need to be (this case leetcode gives it to use and it is a boolean. )
I would if possible draw out a BST and a tree to confirm the question.
What are we given in the function. ( head, value, left, right?)

Thought process

For this Problem I want to first traverse the tree inOrder and add the values to an array. By doing this we will have all the values in order.
Next I want to run a loop to check if the value at our current index is bigger or equal to the next value. if it is we return false because we know this is not a valid BST.

With InOrder Our output will be in order. Meaning we are grabbing the lowest value first and working our way up.

Looking at the picture above you can see if a value before hand is bigger there is no way this is a valid BST.

- Steps

This is going to be a more indepth walkthrough of our problem.

In our leetcode problem we are only given access to the root.

First We need to traverse our given tree using DFS Inorder.
Create a variable to store the values of nodes that we visited.
Write a helper function called traverse which accepts a node.
- If the node has a left property, call the helper function with the left property on the node.
- Push the values of the node to the variable that stores the values.
- If the node has a right property, call the helper function with the right property on the node.
Invoke the helper function with the given root.
Using the visited array we can write a for loop on the length of the array.
In the loop we can write an if statement to check if the value at our current index is bigger than the next value if it is we can return false.
after the loop runs we can return true because this means no value beforehand was bigger.

- The code

const isValidBST = root => {    
 let results = []; 

 const traverse = tree =>{
  if(!tree) return null 
  if(tree.left) traverse(tree.left)
  results.push(tree.val)
  if(tree.right) traverse(tree.right)
 }
 traverse(root)

 for(let i = 0; i < results.length; i++){
    if(results[i] >= results[i + 1]) return false
 }
return true

};

Hope this was helpful!

Working with Controlled Forms In React

Anthony Mendoza — Wed, 29 Jul 2020 05:37:48 +0000

Working with forms in React can be a bit daunting at first especially if it needs to make its way to your Back-end. Today I'm gonna try to make the process easier, we are going to be building out a form for a new user account.

1. Functional Component Or Class Component?

To start we need to know if we are going to be keeping state or lifecycle methods in this component. For this particular component, we are gonna need state to keep track of the user input. Making this component a class component like so.

import React from 'react';

class SignUp extends React.Component {
    state = {
        email: '',
        password: '',
        passwordConfirmation: '',
        firstName: '',
        lastName: ''

    }
    }

2. Our Form

In our Return, we need to write our form in JSX. To keep our code DRY, we are going to add a few more things to our form to save us time down the road.

  <h3 className='signup-header'>Sign up!</h3>
   <form onSubmit={this.handleSubmit}>
    <input
         name='email'
     value={this.state.email}                        
         onChange={this.handleChange}                        
         type='text'                         
         placeholder='Email'
       /> 
       <br></br>

     <input
     name='firstName'
         value={this.state.firstName}                        
         onChange={this.handleChange}                        
         type='text'
     placeholder='first name...'
      />
      <br></br>

    <input
     name='lastName'
     value={this.state.lastName}
         onChange={this.handleChange}
     type='text'
     placeholder='last name...'
     />
     <br></br>

    <input                       
         name='password'
         value={this.state.password}
     onChange={this.handleChange}
     type='password'
     placeholder='password'
    />

    <input
    name='passwordConfirmation'
    value={this.state.passwordConfirmation}
    onChange={this.handleChange}
    type='password'
    placeholder=' confirm password'
    />

    <button type='submit' class='btn btn-primary'>
    Sign Up
    </button>
</form>

So whats going on with our form? first, by us setting our inputs with an attribute of 'name' we can play around with our event listener as I will show you in a bit. Secondly, our value attribute is what will make sure that our input and state are in sync leaving state as a single source of truth.
Next up our 'onChange' is our event listener, in this case, we need to keep track of anything the user types in and we are tying this to our handle change function that I will show next. The next key part of our form is our button to submit. Make sure that it is set to type=' submit', so our submit handler can keep track of it.

3. Our Functions

First, we need to keep track of our input and this is where adding that name attribute to our form will save us a lot of typing. When adding the name attribute to a form make sure 100% that it is exactly how it's written in our state if not nothing will get updated. I'm going to show you both ways without a name and with a name.

Without name attribute on form

handleEmail(event) {
    this.setState({email: event.target.value});
  }

handleFirstName(event) {
    this.setState({firstName: event.target.value});
  }

handleLastName(event) {
    this.setState({lastName: event.target.value});
  }

handlePassword(event) {
    this.setState({password: event.target.value});
  }

handlePasswordConfirmation(event) {
    this.setState({passwordConfirmation: event.target.value});
  }

With a name attribute on form

handleChange = e => {
        console.log(e.target.value);
        this.setState({ [e.target.name]: e.target.value });
    };

By doing this we are setting our state to the name that was passed in and the value would be whatever user input is typed in.

4. Handling our submits

Lastly, we need to handle where our forms will go. For this, I will send a 'POST' request, for this work we will need to add a submission to the very top of our form
<form onSubmit={this.handleSubmit}> and our handle submit function will look like so

handleSubmit = e => {
let { email, password, passwordConfirmation, firstName, lastName} = this.state

e.preventDefault();

if (password === passwordConfirmation) {
fetch('http://localhost:3000/signup', {
  method: 'POST',
   headers: {
    'Content-Type': 'application/json',
     Accept: 'application/json',
    },
body: JSON.stringify({
           email, 
           password, 
           passwordConfirmation, 
           firstName, 
           lastName
    }),
    })
    .then(resp => resp.json())
    .then(data => {
         this.setState({
        email: '',
        password: '',
        passwordConfirmation: '',
        firstName: '',
        lastName: ''
         //with the data we can update our front-end
         //redirect here
      });
     })
        } else{
           alert("Passwords don't match!");
          }
    };

So to begin, using some es6 magic we can deconstruct our states to just their names and if those names match what is on your database in our body we can just write it one time and should work as long as the names match. Next, we need to make sure we don't prompt a refresh of the page and we can do so by adding a .preventDefault the next part is not needed to submit a form but I wanted to check that password and password confirmation are the same if not give an alert that passwords don't match. lastly, we make our fetch and reset the form by setting the state back to blank.

Hopefully I was able to be of some help when researching forms for react. :)

Syntactic Differences Between Ruby and Javascript

Anthony Mendoza — Fri, 10 Jul 2020 05:47:03 +0000

So you're learning Javascript coming from only knowing Ruby or vice-versa. In this post, I'm going to go over some of the syntactic differences that confused me at the beginning of my javascript journey. Before we start I want to mention that I love both languages with ruby's syntax almost being like reading plain English and javascript being so flexible in how it lets you work. With that being said let's begin as any rubyist would know most of our code would be wrapped in a 'def'/ method.

methods

Any method in Ruby needs to start with a 'def' and always end with an 'end' and () as parameters.

Javascript's way of defining a function is a bit different for starters it's much more strict with its syntax while in ruby we don't need any brackets to write our code inside of it but we need and 'end' a good way to think about it is 'end == {}'.

Moving on to another huge difference that may be hard to catch at first sight is template literals while this is not strictly bound to a function it's still a huge difference. In ruby, you can pass in information using "#{}" or '#{}' while in javascript the only way to use a template literal is using a grave accent/backticks ${} you are not given the freedom to choose with javascript so beware.

Another way of writing functions in javascript that was recently introduced in ES6 is arrow functions personally to me these are very compact and easier to write. From my knowledge, there is a couple of differences in functionality so move forward with caution.

Variables

Ruby has a couple of different types of variables which you will 1000% use, such as (global, class, and instance variables) but for purposes of comparison, I'm only going to show local variables and how to declare one in ruby.

Ruby's variable declaration is super straight forward give me a name and store the information you need in here, Javascript, on the other hand, likes to give you a couple of choices.

The most common way and oldest way of declaring a variable is using good ol 'var'

var is super basic and a staple of javascript a couple of things to know about var is that you can always change its value and it's on the global variable spectrum once declared it will be hoisted to the top of the page allowing room for some bugs, once again proceed with caution.

"let" is a lot like var but one key difference is unlike var it won't be hoisted to the top of your page (usual safe bet to use).

last but not least is const, one of the most strict. Once assigned if you try to change it you will produce an error saying it has been assigned. When using const use it for values that won't change.

Each loop

One of the last Syntactic differences I will cover for now is the use of .each or forEach.

Ruby's .each loop is almost like reading English it's a very easy way to loop through information the |list| is the parameters to give the loop and once again like most things it ruby you need to give it an "end".

Javascript also makes it's for each loop very easy to read minus the end to finish it off. I hope this helps anyone learning any of these languages to differentiate some the syntax :).

Using Bootstrap 4 In Rails 6

Anthony Mendoza — Thu, 18 Jun 2020 05:14:29 +0000

Using Bootstrap in a Rails app can be very confusing at first to help make things easier and smoother and allow you to go back to developing, I'm going to try and help you get started with Bootstrap.
We are going to start from a point where you already have a rails app up as far as (views, controllers, models, and some data ).

Getting Started

You first need to head on over to https://github.com/twbs/bootstrap-rubygem and grab these 2 gems as shown below.

once you've copied them take them over to your gemfile which if you havent used yet I will provide a screenshot of the location.

Go ahead and paste them and save the file or hit "cmd + s"

Switch over to your terminal make sure you are in the right directory for your app go ahead and type 'bundle' or 'bundle install'. This will add the gems to your app and add it to your gemfile lock, don't worry too much about it for now but what it's doing is locking in the version of your gems you have installed so you don't have to worry about gem updates messing up your app. It may take a while to load but just be patient :).

Once done there's still a couple more steps we need to take before we are all setup. Next you need to go to your
app/assets/stylesheets/application.scss if it's a .css file go ahead and make it a .scss but it should default to .scss

Inside the application.scss go ahead and paste.

@import "bootstrap";

Next we need to go to our app/javascript/packs/application.js folder and paste the code below. After you've done so you're ready to build the next Twitter! well not just yet, I'm going to show you how to use it.

//= require jquery3
//= require popper
//= require bootstrap-sprockets

Using Bootstrap

How do we go from the picture above to the picture below.

Most importantly making the page take in user input and storing that instance into our Database. I'm going to be showing you how to make a simple sign-up page that not only looks super neat but works. Once again I'm taking into account you have a working form and your controllers and routes are working and focus solely on making it pop!

Rails has some pretty cool helpers to ease making a functional form I'm going to be linking it below!

What these Helpers will do is help us by writing out some of that HTML for us, so let's get started.

Let's say we are making a form_for a @user to signup our initial syntax may look like

This is where Bootstrap comes in to save the day. We are going to be using one of Bootstraps classes to help us

So then we will begin to add some of the attributes that are required for this form in my instance it was a couple of things but this can vary for you. So how do we keep this layout consistent for all the attributes. Bootstrap and Rail helpers make this extremely easy, like so.

There's a lot going on here but if we break it down it's really clear to understand.

So our f.label and f.text_field is us using our Rails helpers to let our controller know this is what is going to be entered here. Next to it is us letting bootstrap know we are still using their form and next is just a place holder that will delete once you begin typing. {class:"form-control", placeholder:"Enter name"}

It may seem like a lot but 1) Our Rails helper is just making our HTML easier to write. 2) The Bootstrap is helping us with our CSS and HTML. If we inspect our Page you can see the same name form being rendered into plain HTML.

Once done you can end your form with a simple button provided by Bootstrap. Once submitted it will enter the data into your database working way better than a simple HTML form.

I'm going to place some links below to the Bootstrap documentation which I highly encourage you to read and play around with and watch your application come to life.

https://guides.rubyonrails.org/form_helpers.html

https://getbootstrap.com/docs/4.5/getting-started/introduction/

Relationship Models in Ruby

Anthony Mendoza — Sun, 24 May 2020 17:33:34 +0000

Coming into Flatiron's Software Engineering program the biggest topic I struggled with was relationship models and how it all came together. As I quickly realized having a good grip on this is probably one of the most important topics in mod1. In an effort to try to help as many future cohorts that struggle with this topic and anyone trying to learn OOP, ORM's or ActiveRecord I'm going to go over some models and tips on how to read a README and be able to clearly understand the relationships. Let's begin!

Before you begin coding I cannot stress it enough to have a notebook nearby or as I will be using a virtual whiteboard that can be found here.

One-to-Many

One of the first models you will come across is the one-to-many model. With this model in some README's you will get something along the lines of "A classroom has many students but a student has only one classroom" some keywords to look out for are "belongs to" or "can only have one". So you may be asking yourself how do we translate this into code, well let's begin with our handy notebook first. We are going to use the "Student" and "Classroom" model.

Let's say we initialize with our classroom class only having a "room number" and our student class with a "grade" and a "name".

As seen above I've already drawn out that a classroom can have many students. So what's next? well, we know our student class can only have one classroom so who inherits what here?

First I'm going to show you the wrong way of doing this and then explain why you should never do this.

Doesn't look too bad right? well what if we need another student and another student just got enrolled for your class as I'm typing this, it would look something like this.

Keep in mind this is just one instance of a classroom what if a less popular classroom had fewer students.

This not only would break our program but cause a huge amount of bugs in our database. You can see that the program would break by us just trying to initialize it. So what's a good rule of thumb to go by? when speaking to one of my coaches he gave me a tip that stuck with me and it is.

"in a parent-child relationship, the child will always have a reference to the parent. Kind of like passing genes. The parent is what has many of something the child belongs to a parent. The child will always have a reference to the parent."

So what would be the correct way of doing this?

Every instance of a student would be initialized with the classroom_id as it's inheriting from our parent class.

Many-to-Many

So let's say our app is getting an update now a student can have many classrooms so first off some keywords to look out for in this relationship is "A classroom has many students and a student can have many classrooms" let's start again with the empty whiteboard on how this would look.

Once again I'm going to show you the wrong way of going about this first.

Doesn't look too bad right? but as stated in the README "have many" both can have many of each other. So, in reality, our program would look something like this.

Once again breaking our program and our database. So how do we fix this?
We add a join table/class. A table or class that will keep just track of this for us.

So now every time an instance of a student that has multiple classrooms or vice versa it will be initialized there with no problems and zero bugs. This can get very deep and you can have multiple join classes for different occasions but once you get the basic understanding of why things are placed where they are, it will make your job a whole lot easier. I hope this helps :)!