Categories
Dev Bootcamp

What Are The Differences Between Ruby Arrays And Hashes, And When To Use Each?

Overview

This is a pretty long blog, so I will seperate this post into three parts:

  1. Arrays
  2. Hashes
  3. Summary

Arrays

1a. What is an Array?

Do you find yourself assigning way too many variables to different values? Arrays are the solution to that.

A array is a list of objects (strings, numbers, booleans, another array, etc.). Every slot in an array acts like a variable.

Examples:

['Hello','World']
['My','name','is','tony']
[17.0,'male',true]

1b. How do I create an Array?

One way to create an array is to put the values you want to store in a set of brackets, like this:

my_array = ['object_1','object_2','object_3']

Another way is to use the new method:

my_array = Array.new #no arguments, creates an empty array
my_array = Array.new(3) #one argument, creates an array with the specified number of values, which will be nil. In this example, it will create an array of 3 nil values: `[nil, nil, nil]`
my_array = Array.new(3, 'object') #two arguments, creates a array with the specified number of values with the specified value. In this example, it will create: `['object', 'object', 'object']`

1c. How do I access elements in an Array?

Arrays are ordered lists that use integers as an index. Each element in an Array is stored in a specific order and can be retrieved by calling the number it is associated with by using the #[] method. One thing to keep in mind, though, is that the ordered list starts at 0. The first element in an Array is at position 0, the second element is at position 1, etc.

Examples:

my_array = ['I','am',24]
my_array[0] #returns 'I'
my_array[1] #returns 'am'
my_array[2] #returns 24

You can also do the same thing using the at method.

Example:

my_array.at(1) #returns 'am'

1d. What are some other Array methods?

Hashes

2a. What are Hashes?

A hash is an unordered list of unique keys and their values. They are similar to Arrays. One key difference is that while an Array associates its list of values with an index of integers, a Hash allows you to assign any object type to the values as a key. So a Hash stores the key and the value in the list; kind of like a dictionary.

2b. How do I create a Hash?

One way to create hash is to put the keys and values you want to store in a set of curly brackets, like this:

my_hash = { 'gender' => 'male',
'legal' => true,
'height' => 62
}

Noticed how I used => to assign a key to a value and commas to separate each pair of key and value. Each key MUST be unique. There can NOT be a duplicate key in the same hash.

Another key difference is that hashes allows an alternative syntax, called symbols, as keys (marked by : in front of the name):

my_hash = { :gender => 'male',
:legal => true,
:height => 62,
}

Or (more conveniently):

my_hash = { gender: 'male',
legal: true,
height: 62
}

A second way to add a hash is:

my_hash = Hash.new
my_hash['gender'] = 'male'
my_hash['legal'] = true
my_hash['height'] = 62

2c. How do I access elements in a Hash?

Hash elements can be accessed in a similar fashion as Array elements, but instead of calling for the integer index, you would call for the key.

Examples:

my_hash['gender'] #returns 'male'
my_hash['legal'] #returns true

Default Hash Value:

Another key difference between Arrays and Hashes is that Hashes allow you to store a default value if the key is not assigned to any value, like this:

my_hash = Hash.new('default value')
my_hash['gender'] = 'male'
puts my_hash['gender'] #'male'
puts my_hash['legal'] #'default value'
puts my_hash['height'] #'default value'

2d. What are some other Hash methods?

Summary:

3a. Key Differences

Whew, that was quite a bit of information!

Here’s a little table that summarizes the key differences between Arrays and Hashes:

Arrays Hashes
Create new: my_array = []
my_array = Array.new
my_hash = {}
my_hash = Hash.new
Accessing elements: Via an index of integers, starting at 0 Via assigned unique keys, which can be any object
Other unique factors: Can use symbols as keys
Can set a default value for non-assigned keys

3b. Still not sure what the differences are or when to use what?

Here is a good summary I found:

  • An array is an ordered list of things: a, b, c, d
  • A hash is a collection of key/value pairs: john has a peugeot, bob has a renault, adam has a ford
  • Source: Stack Overflow

If you need to store a collection of things, use an Array. If you need to store a collection of things that are associated with something else, use a Hash.

Feel free to reach out to me if you still have any questions!

This blog has been initially published on tonymai.github.io.

Categories
Dev Bootcamp

What Does It Mean To Display Inline vs. Inline Blocks?

A Primer on CSS Display Properties

The short answer is: they are both inline display types, but one formats the element into a block box and one doesn’t. But that doesn’t explain anything, and you are still just as unclear as before as to what that really means.

Here’s the long answer…

I was asked the question, “what does it mean to display inline vs inline blocks?” Being unfamiliar with CSS, I naturally went on Google and typed, “inline vs. inline blocks CSS.” A bunch of links and articles popped up. There were some articles explaining the differences between block elements and inline block elements. And then there were some articles explaining the differences between inline-block elements and float elements. To my surprise, I couldn’t find any articles that directly compared inline elements versus inline-block elements. So I decided to take a step back.

Before we dive into the differences, let’s take a look at what they are first. Inline andinline-block are both display properties of an element. Each element in an HTML file (i.e. <p>, <b>, <span>, <div>, <a>, etc.) have a default display property.

There are four different display properties:

  1. block – a block box that takes up a the full width or line of the area
  2. inline-block – a block box that allows another element to sit next to it on the same line
  3. inline – allows another element to sit next to it on the same line, but does not format it into a block box
  4. none – hides the element from appearing at all

Source: codecademy

Now, after reading about the four display properties, I had even more questions than before. What is a block box (and in turn, what is a block property)? What is the difference between inline-block and inline if they both allow another element to sit next to them on the same line? It seems like none is the only property that is straight forward.

Well, words can be confusing, so let me show you in pictures, and then explain each picture. I created two div boxes for each of the first three display properties. One is orange and one is blue, and they both have the same width and height.

Block Display:
block
Each box is a block box that takes up the whole width/line, so the second box shows up underneath the first one. Makes sense. Seems simple.

Inline-Block Display:
inline-block
Each of the box is a block box, but it allows another element to sit next to it on the same line. Yup, that’s what I’m seeing.

Inline Display:
inline
Whoa, what am I looking at here? The two boxes are sitting next to each other alright, but they lost the width and height formatting. Ding, ding ding! Looks like we figured out what a block box means and what makes an inline element different from an inline-block element! Since the inline property does not format the element into a block box, it can not have a set width and height.

This is a really long answer to a short question, but I hope that the screenshots and explanations clarify what the difference between inline and inline-block is.

P.S. I didn’t talk about margins and paddings. In addition to not respecting the width and height properties, an inline display element also does not respect top & bottom margins and paddings. For a complete breakdown of what each display property does and doesn’t respect, that a look at the answer to this Stack Overflow question.

This blog has been initially published on tonymai.github.io.

Categories
Dev Bootcamp

We’re All In This Together!

We are less than 1%, we are one big experiment, we are going to make a mess, but we are going to create.

When I first came across Dev Bootcamp and similar types of accelerated programming courses, I did a lot of research. A LOT of research. I read through their entire FAQ (at least 5 times), student blogs, teacher blogs, videos, reviews, Quora questions and answers; you name it, I probably looked at it. What made DBC stand out is their method of educating and how they connect the mind and body to the technical aspects. After I was done, I was convinced that this is what I wanted to do and took the plunge. I applied, got interviewed, answered a couple of technical and logic problems, and bam! I was in. The whole process took less than 3 business days. I am going to leave a well-paying job at a great company as an Internet Marketing Manager in NY and moving cross-country to SF to learn. I’m all in; and I suspect that the 55 other students in my cohort are all in as well.

I just watched Shereef’s Fireside Chat (founder of DBC) and it was really inspiring. I did a lot of prior research and watching Shereef explain how DBC came about and the kitchen vs. restaurant analogy really solidified my prenotions of the DBC culture. I love the kitchen vs. restaurant mindset analogy, by the way. If you don’t know what that is, watch the video in the link above (skip to 9:40-15:28 to go directly to the mindset analogy). We are not customers at a restaurant, ordering a pre-designed meal, and expecting to get what we paid for. We are chefs, some that know more recipes than others, but we are all here with an apron, and we are ready to cook! We are ready to create.

There will be a lot of recipes for me to learn, and it will be a challenge, but I love challenges and I have an apron on. DBC is about learning and empowering the mind. I’m ready to get messy. And it will probably get really messy. We are one big experiment and the recipe is far from perfect, but I, and my other 55 chefs are really to throw in our own flavors and create something unique. We are all in this together!

This blog has been initially published on tonymai.github.io.

Categories
Dev Bootcamp

Version Control, Track Changes, and GitHub

A Beginner’s Guide To What These Are

GitHub is a very popular platform where open source developers host and share their code. Most budding-developers will come across or hear about GitHub at some point in their developing career; most likely earlier than later. But before we talk about GitHub, let’s talk about two fundamental concepts: version control and track changes.

What is version control and how does it help? Imagine spending a couple of hours working on several parts of your code to implement new features and enhance existing ones. You are almost finally done. After your third cup of coffee, you finished implementing the 5 new features. You hit save and opened up your software to enjoy the new features that you just implemented. It crashes on you instantly. What do you do? If you do not have version control, then you probably have to find the backup that you manually made a copy of sometime ago; probably one that you copied right before you started working the new features. If you do have version control, you probably just reverted back to last working state of your code with the first 4 features still intact.

As you have probably guessed (by its name or by my introduction), version control keeps track of all the changes that was made to something and when they were made. You save batches of your changes via a commit, which takes a snapshot of the current state of your code. You can go back and view each commit that you made; what was added, modified, or deleted. If you messed up something in your code and it is not working anymore, you can just revert back to the last commit when your code was working.

Version control really shines, though, when you are working with multiple developers on a single project. Without version control, it would be a nightmare to make sure everyone has the most updated code and weren’t overwriting everyone else’s codes. Merging takes commits from multiple people and put the changes into one new file instead of creating multiple versions of the same file.

Git is a popular open source version control system. It is installed on your local machine and tracks all of the changes that you made in that local repository. Any changes you make to any files and directories are tracked. There are three states of files in git: working, staged, and commit. Git will tell you (1) which files were changed, but are not staged for commit, (2) which files are staged for commit, and (3) which files are new and untracked. Any changed file and new, untracked file can be moved to a staged state and any staged file can be reset back to an unstaged state. Finally, you can commit any staged files to save the changes that were made. This creates a checkpoint in your git repository. As mentioned earlier, if you messed up your code, you can simply revert back to the commit when your code was last working, so it is a good a idea to commit more often with smaller chunks of changes.

Finally, we get to GitHub. GitHub is a place where you can store your repositories remotely and access it from anywhere where you have an Internet connection. Don’t get GitHub confused with git. They are two different things. Git is a command line tool that helps you keep track of the changes on your local repositories. GitHub is a third-party tool that hosts your repositories remotely, with a nice, visual interface may I add. You can push your changes from your local git repository to the one that is stored on GitHub, as well as pull any changes that were made from GitHub to your local machine. GitHub is a great platform to collaborate with others on. Instead of pushing and pulling directly to and from all the developers that are working on the same project (imagine what a nightmare that would be), you only need to push to and pull from GitHub. GitHub acts as a central location that will always have the most updated stable version of the code.

I have only scratched the surface of the benefits of using git and GitHub.Users can also give feedback, document issues, and start a wiki right on GitHub. If you want to read more about GitHub and the benefits that it offer, you can start with TechCrunch’s article here. I will be blogging more on the technical concepts that I come across and learn. If you want to read my future blog posts, follow me on twitter!

This blog has been initially published on tonymai.github.io.