DEV Community: Brittany Javalera

Getting started with Bootstrap

Brittany Javalera — Sun, 20 Dec 2020 21:19:42 +0000

Every time I would start a project while at Flatiron School, I would plan on using a css framework for styling. I would look through the documentation for different frameworks such as Bulma, Bootstrap, Semantic, and would be immediately put off. There was so much in the documentation and I didn't understand what I needed to add to my code in order to use the frameworks pre-styled elements. Instead of spending a little extra time to learn, I would focus on my project's functionality and end up styling with vanilla css from scratch.

Since completing the program, I am able to approach learning a bit more calmly, and am happy to announce that I learned my first css framework, Bootstrap. Looking back, I am not sure why I was flustered with it to begin with. It is very easy to use and has great documentation that is well organized and easy to understand. Below I will walk you through how to add Bootstrap to your projects and how to go through the documentation.

Visit Bootstrap.com and click on GET STARTED. This will take you to an Introduction page.
The intro page gives you a few options to add Bootstrap to your project.
- You can copy the css link and paste it in your html file( in the head section under the title where you would normally add links for stylesheets). This is best option if you will not be needing any functional components such as drop-downs or items that change in appearance.
- If you will be needing Javascript or functionality as mentioned above, you can copy the bundle or separate scripts located under the Javascript section on the intro page and paste the scripts at the end of the body section in your HTML file.
- If you are barely starting on your project, you can copy the starter template which already has what you need to get started.
If you like, you can download the full css and javascript source code from the Download page on the Bootstrap site. You would add these files to the css folder of your project and link them in your html file as stylesheets. The downside of doing this is that the files will have to be loaded every time a user visits your site/application since it will not be cached. This can make loading slower.

Now that you have added Bootstrap to your project, you have access to many pre-styled elements. To apply them, all you need to do is add class names to your html elements and attributes. For example, you would add "col" for column, "btn" for button. The documentation is split into sections that make it easy to find what you are looking for but you can also search for any element in the searchbar to easier find the documentation for it.

One of the huge advantages to using a css framework, other than the pre-styled elements, is the added responsiveness. Rather than creating multiple stylesheets or media queries for different screen sizes, you can add sizes to your an element for different breakpoints. For example, if you set up a column using the class "col-6-md", the column will take up half of the screen width(6 out of 12 possible column widths) for screen sizes medium or larger. If it is smaller, the column will resize to full width of the screen automatically.

With more practice, I can understand how Bootstrap can be a time-saver as well as keep your code cleaner, provide uniformity if you are working on larger teams(people aren't making up their own class names), and help make your project more responsive. Don't let the documentation intimidate you, it is a lot easier than you think.

Data Structures - Pt 3 : Binary Trees

Brittany Javalera — Sun, 27 Sep 2020 23:33:18 +0000

For me, binary trees are the most difficult data structure to comprehend, possibly because they are not a linear data structure. I am still not the expert on this data structure but I want to share what I have learned for other beginners.

Binary trees have nodes that hold data and a reference to their children.

The top node of a binary tree is referred to as the root node. It is the only node without a parent.
In a binary tree, each node can only have 2 immediate children(one left child, one right child).
A child is any node directly underneath a given node.
Nodes on the same level of a tree that share the same parent node are referred to as siblings.
A node that doesn't have children(bottom node) is referred to as a leaf.

One specific type of binary tree is a Binary Search Tree.

In a binary search tree, the left child will always be less than the parent node and the right child will be greater than the parent node.

Iterating through the elements of a tree is called Tree Traversal. There are 2 main ways to traverse through a tree:

Breadth-First Search - iterates through each level of a tree from left to right
Depth-First Search - iterates through elements starting from the root, down to the root's left child, down the left child's left child, and so on until it reaches the left leaf. Then it backtraces to the parent and down to the right child and so on until it backtraces to the root. The process then starts again with the root's right child. For example, in the binary search tree above, using depth-first search would go traverse the tree in the following order: [ 20, 14, 9, 3, 11, 19, 57, 31, 62, 72 ]

If you have any suggestions for basic information to add, or any resources to help learn more about binary trees, please do not hesitate to comment!

Data Structures - Pt 2: Linked Lists

Brittany Javalera — Sun, 13 Sep 2020 20:17:14 +0000

If you are new to data structures, this post is for you. I didn't have the easiest time grasping data structures, so I wanted to share the basics of what I have learned so far to help you get started. My previous post covered stacks and queues. This one will cover the basics of linked lists.

A linked list is an ordered collection of data made up of nodes.

Each node must have 2 properties
1. A data property which contains the data
2. A next property which is a reference to the next node

class Node {
    constructor(data, next=null){
        this.data = data;
        this.next = next 
    }
}

The first node is often referred to as the "head" node and the last node is often referred to as "tail" node. The tail node will not have a reference to any other node.
The order of nodes will not change unless we explicitly change the order by inserting and/or removing nodes.
To access nodes, you must go through the pointers. (Linked lists do not use index numbers the same way arrays do.) Below is an example of accessing a specific node in a linked list if given an index.

getAt(index){
  let count = 0
  let node = this.head
    while(node){
      if(count === index){
      return node
      }
      count++
      node = node.next
    }
   return null
}

In addition to the basic singly linked list, there are 2 additional types of linked lists.

Doubly linked list
- A doubly linked list will have both next and previous properties.
Circular linked list
- A circular linked list doesn't have a tail node. Instead the last node will point to a node at an earlier point in the list, creating an infinite loop.

Data Structures- Pt 1: Stacks and Queues

Brittany Javalera — Sun, 06 Sep 2020 21:51:47 +0000

I had tried learning about data structures on my own by reading through many articles and watching tutorials but the concepts never quite stuck. I decided to ask for recommendations from fellow bootcamp grads and most of them suggested a few courses on Udemy. I am in the middle of one of those courses and I can happily say that I am finally understanding the concepts! In my next few post I will be sharing what I have learned.

Data structures are ways of organizing information with optimal runtime for adding, editing, and removing data.

Queues

A queue is ordered list, using first-in/first-out list management. You can compare it to standing in line at the meat counter at the grocery. You take a number(index), and the butcher will call the numbers in order starting from smallest to largest, so the first person to get a ticket will be the first person called, and so on.

Adding a record to a queue(a new person getting in like), is called enqueuing.
Dequeuing is removing the first record of the queue(the first person in line has completed their transaction and leaves).

Stacks

Stacks are also ordered lists but use first-in/last-out order list management. The concept is the same as stacking plates on a shelf. The first plate you place on the shelf becomes plate on the bottom and last plate you place on the shelf is at the top. So, when you grab to plate on top for your next meal, you are taking the last plate you put the shelf.

In Javascript, arrays are used for both Queues and Stacks but with limitations.

For Queues we use can use .unshift() to add to the the array, and .pop() to remove from the other end.
For Stacks we use .push to add to the end and .pop() to remove the last item.

Adding and removing are the main operations for these data structures but we can also create a peek function to preview the record at the front of a queue, or last/"top" of a stack.
We can also combine multiple queues into one queue and create a queue from stacks.

Tips for first time collaborators

Brittany Javalera — Mon, 17 Aug 2020 06:33:52 +0000

I am currently collaborating on a project with a friend and fellow software engineer. We were in the same cohort at Flatiron School and have previously pair programmed for code challenges and shared advice to complete individual projects. However, for both of us, it is the first time working with a partner to build an application. We are learning as we go but I'd like to share what we've learned so far for other first timers.

Communication is key!
- We have zoom meetings once or twice a week to set the goal for the coming days. We discuss what the next steps are, what we need to learn/research in order to reach our goal, and we split tasks.
- We send each other messages on slack when we run into any issues, have questions about our code or best practices, and just to inform each other about tasks we have completed.
Read and write informative git commits & UPDATE YOUR LOCAL REPO
- Before you start working on your project tasks, check git, read the commit messages and look through the code to see what has been added, updated, deleted. It will catch you up so you can pick up where your partner has left off.
- When writing commit messages, try to keep it short but informative. This might mean committing more often. (Sometimes I try to get something working before I commit changes and I end up writing longer commit messages which might not be easy to read for my project partner...It's something I am working on improving)
- If changes have been made don't forget to GIT PULL to update your local repo
Comments inside your code are helpful.
- Comments to label what certain functions or blocks of code are for have made it easier to review each others code.
- This includes questions and suggestions. We often write questions above our code about refactoring or asking about the necessity of certain functions/methods.

So far this has been a great experience. We are understanding of each others schedules and time zones. We are equally involved in the planning and execution of the necessary tasks. We are both willing to take extra time to learn new things to improve our skills and the end result of our project.

Postman

Brittany Javalera — Mon, 03 Aug 2020 03:34:26 +0000

This past week I began working on a new personal project. I am collaborating with a fellow Flatiron alumna to create a jeopardy-like game. We decided that since we aren't on a deadline, that we would take this opportunity to learn and implement new skills, features, and tools.
One new tool I started using while building the rails backend, is Postman. Once I created controller methods and routes the steps are fairly easy. For example, to simulate login,

Run rails server
Select POST from the method drop down list
Write out or copy/paste the login url
In the Body tab, enter the credentials or parameters as key value pairs.
Hit send and review the response.(My login method will either return user json or an error message.)

I was able to test login, signup, and check if JSON Web Tokens were being created, encoded, and decoded.
I would highly recommend utilizing this tool for anyone building out APIs.