Web Development Course: HTTP

Been awhile!! Work has been crazy as we’re trying to launch a product by an unrealistic deadline that continues to get pushed back by 2 wks so been super busy. I took a little break from learning React and Data Structures and started watching this CS lecture video series by Harvard on web development. It covers topics like HTTP, PHP, SQL, JS, Ajax, Security, etc. Not sure if I’ll get to finish it anytime soon but I watched a bit of the first lecture on HTTP. The video is 2 hours and 40 minutes long and my ADD kicks in every so often to sit through the whole thing so figured I’d break it up in little chunks.
I used to think to myself that I have to have good/solid content that’s worth posting but what the heck, half the battle is being consistent and I’ll post SOMETHING since the point is to make it a habit to motivate myself.

Here is my summary from last night:

From a user’s perspective
What happens when a user types in a URL in the web browser such as google.com? The address gets “translated” into an unique IP address in the format of w.x.y.z consisting of numbers from 0~255. The address you type in has something like http in front of it (if omitted, the browser’s been made user friendly to type it in for you), a protocol by which a message/request is viewed by the browser. A “virtual envelope” is created with your request (such as an image you’re trying to view), your computer’s IP address as the sender and the web site’s IP address to which you’re sending your request.

How does your computer know where to send these requests to? How are IP addresses mapped to specific servers? Your ISP, internet service provider such as Comcast, has DNS, Domain Name System, that looks up its hierarchical chain to see where the IP resides. Hierarchical meaning that if it doesn’t know exactly where something should go, it knows someone else who knows someone else that knows, etc.  — it can go through up to 30 different routers all over the world. Then once say, the Google server receives your request, it looks for a particular path such as “/ (root path)” indicated in your address, retrieves the requested data, puts it in a virtual envelope, flips the IP addresses, and sends it your way. You then can view Google.com’s search page.

From a website owner’s perspective

You create a website and want show it off to the world. How do you accomplish this? Like above, your site gets visited by users on its IP address. Can you use the IP address of your laptop at home aka as a server to host your site? Technically yes, but probably no. The IP addresses you have on your computer is first of all private and probably not unique. Even if you can find a way around this, once you get a lot of traffic to your router, your ISP will most likely shut you down entirely.

That is why we use hosting services like GoDaddy and my personal favorite, Namecheap. You also need to purchase a domain name like grace.com which has to be known to DNS of your server host (can be the same place you purchase your domain name) which will do the rest of the work of routing things for you.

So how does these requests and messages physically or electronically travel to one computer to another? Simply put, we use what’s called TCP/IP for data transmission, a language spoken by the computers. The IP is the part from which IP addresses are derived; it assigns numbers, addresses, to computers. More on this later, I’m sure.

The server can receive many types of requests such as email, not just a request to view a certain web page. Email can live on the same server as other services, therefore, specific “port numbers” are needed to direct these requests appropriately (e.g. 80 for websites and 25 for email).

That is it for tonight! My apologies if I misunderstood some of the concepts but overall it’s meant to be for basic intro. Will be studying more when time permits.



Linked Lists

A friend of mine gifted me the book, Cracking the Coding Interview by Gayle Laakmann, awhile back for my birthday. It’s probably one of the most famous books for studying for interviews. However, if you don’t have CS background like me, the problems can be a bit challenging as the book is not meant to be for studying the fundamentals (well.. granted it’s meant to be challenging for anyone studying). So I turned to Udemy and started on Learning Data Structures by Eric Traub. I really like the way he explains things and his pace so far. It covers a few important data structures, linked lists, binary search trees, and hash tables. Here is a summary of this morning’s learning on the first topic, linked lists. Detailed code summary can be found here: https://repl.it/IZ09/16

A linked list is a data structure that contains data elements, “nodes,” in a linear fashion. These nodes (objects) can be singly linked or doubly linked. Singly linked nodes have reference to the nodes next to them (can only go one way) and doubly linked nodes have access to nodes next to them as well as previous nodes (can go both ways). Linked lists also have two “pointers,” one that points at the very first node in the list, namely the “head node” and the other pointing at the last node, the “tail node.” We only have direct access to these pointers and data can only be added/removed from these nodes. This means that any nodes that reside somewhere in between the pointers have to be searched through, one by one, starting from either the head or the tail (no random access or adding a node next to, say the third node without going from the head or tail ). Our goal is then to create two constructor functions that 1) creates a linked list and 2) creates a new node. We also need a few methods to be added to the prototype of the linked list constructor function that do the following: add/remove from the head/tail & search the list for the value of interest.

1) LinkedList Constructor Function

Write a constructor function for creating a new linked list. Set “this.head” & “this.tail” to null since we are starting with an empty list with no nodes in them.

2) Node Constructor Function

Write a constructor function for creating a new node. This takes in three parameters, value, next (reference to next node), and prev (reference to previous node).

3) addToHead method

This method is added to the prototype of the linked list constructor function and takes in a value parameter. It creates a new instance of the Node constructor that takes in the value passed in as its “value”, the current head of the list (if any), this.head, as the “next” node, and null as the “prev” node (since the new node is the new head, no node comes before it).
If current “this.head” exists, meaning that the list is not empty, set its prev node to the new node, making it the new head.
Else, if the list is empty, set the new node as this.tail since it will be the first and only node in the list.
Finally, set the new node as the new “this.head” regardless the list is empty or not (purpose of this method).

Additionally, removeFromHead, addToTail/removefromTail (same as head methods but in reverse), and search method can be written. The search function takes in the value to be searched as its parameter and a loop is used to search for the matching value in the list (start from head or tail, your choice, and conditional loop). To start, save the head or tail node in a variable, say “currentNode,” and update it to the next/prev node as you move along the list.

The course gives a challenge problem at the end to find the index/position of the search value.

Hackerrank has good practice problems under Data Structures > Linked Lists. Linked lists seem pretty straightforward and simple to use. When are linked lists useful in real life over the other data structures? I’m assuming it has to do with memory and space, Big O, covered next in the course.

Happy learning!

Learning React with Wes Bos

I’m  learning React with Wes Bos! I’m loving it so far. If you’re a visual learner like me, video tutorials might be a better option than plain reading. I purchased the course back in January.. I watched a few videos and things happened along the way so couldn’t fully commit to finishing. The basic concepts such as components and importing and exporting them, passing variables via props, creating different methods, rendering things out, virtual DOM, etc. were pretty straightforward and I was able to code along without much trouble. Then came routing (woo hoo!) & state (probably one of the most important concepts to master). Yes, I could mentally follow (kind of) and code as I go (essentially copying what he’s typing) but that’s when I got distracted and put it off for a few months.
I’ve since watch those videos a couple more times and tried to follow yet again but what really worked for me tonight to see the big picture, was to draw it out (which surprisingly I hadn’t done before). I’m not the most organized person when it comes to learning and don’t take meticulous notes, but I found that just writing things down aka “free-styling” without worrying about being perfect and organizing later into something I can refer back to really helps. This way, when I’m organizing my messy notes and drawings, I can identify and revisit things that I didn’t fully understand. Summarizing in my own words rather than writing down definitions given by someone I think is important, to know what I really know or don’t know for learning anything in general. So here is my not so pretty summary of tonight’s learning (apologies in advance if it absolutely does not make any sense. It might be of some help if you’re also taking his courses):

Summary of Tonight’s learning:

Essentially, Index.js is where routing is defined and rendered out to the public html file for users to see. This router (via React Router v4 which isn’t actually part of React) decides whether to go to 1) StorePicker.js to pick which store to go to or 2) App.js page which is inventory page for a specific store. The router decides this depending on the pattern in the url. If it matches “/” without a specific store name, it goes to StorePicker to randomly generate a name which then gets rerouted to the associated App.js. How does StorePicker have access to the router? Via “context” which surfaces the router from its parent, Index.js.


Once you’re in App.js for a specific store, you have an option to update the inventory (another component) via addFishForm (a form that is yet another component.. everything’s a component! even the router itself as shown above). Upon submission of addFishForm, the input values are saved in what’s called “refs” that’s retrieved by a method to save in a fish object (notice that we don’t just grab the input values and update the DOM like jQuery). This object containing info for the newly added fish “swims upstream” to its parent, App. js to be added to the current state. How? Well, the method that resides in App.js that’s responsible for updating the state gets passed down to its child components, Inventory and addFishForm in this case, via props. Pretty straightforward, eh..?


How it all started


A little (?) about me. I’m Grace, a semi-self-taught freelance developer who holds a full time position in the biotech industry as a cancer researcher. Semi-self-taught because I was briefly in an online coding bootcamp that I didn’t get a chance to finish due to personal circumstances.

I love science and helping people so studied neuroscience in college and was a premed. I went to school in SoCal so had a great opportunity to volunteer in Mexico in a monthly clinic and loved every bit of the experience. However, I later learned that medicine isn’t for me for various reasons and chose to go into research instead.

Research is fun. I have an obsessive and curious nature when it comes to work and it has everything I want in a career: problem solving, challenges, critical thinking, troubleshooting, logic, creativity, and most importantly a chance to make a positive impact on others. I’d think about whether my protein would show up on my gel the way it’s supposed to (meaning it worked) and I basically had a “relationship” with my given project that often played hard to get with me. 😉

What’s even more fun for me is coding. I didn’t know much about programming in general and what it can actually do.  I do remember however, that back in high school, I absolutely loved making websites using HTML and inline styling (it was.. a long time ago), as well as following Photoshop tutorials. I didn’t know what tags and attributes were in formal definitions but I’d often find myself doing this late into the night.

Fast-forward many years (won’t give away my age), I was introduced to coding by my colleague who was preparing for a 3 month long full time bootcamp (it’s fate!). I was astonished at what she’d built using just lines of code. I didn’t know much about the different languages but told her I liked “front-end” from my previous experience. She recommended HTML/CSS/JavaScript and I immediately got started on Codecademy, then Code School. I don’t have a crazy or brilliant stories like how other developers got started on their coding journey such as building an app at the age of 4 or something like that but simply put, I was just instantly hooked and it was just so much fun for me! Oh, and let’s not leave out the challenging part… :0) I’d itch to get off work to go home and code. That is when I knew I had to do it for a living and I haven’t stopped since.

There was an overwhelming amount of resources out there on the internet so I needed more direction. So I started Thinkful, a flexible online bootcamp. I’d consider myself pretty techie and a fast learner (I used to take apart electronics as a kid just to see how they work and taught myself how to play a few musical instruments, swim, surf, etc.) but when I was starting out, I was a bit intimidated by things like http, cache, memory, data structure & algorithm, bits, etc. what!? But remember, we all have to start somewhere and all this can be learned with patience and persistence. Anyhow, I really liked my mentor which was the best part of the program but needed a lot of outside resources like Udemy and Scotch.io to complete each project/learn a concept as the curriculum I felt wasn’t quite there yet and a bit rushed (this was back in August 2016). However, through my daily interactions with my mentor, I learned how to think and solve problems like a developer and the importance of collaboration/being a part of a supportive community, which were invaluable.

My goal now is to keep my skills sharp and become a full time developer. I’m starting this blog to better keep track of my journey and stay motivated to never stop progressing and learning. I am also hoping to somehow help those who are teaching themselves to code but it’s mostly for my own way to stay on track. Anyway, I want to list a couple things that’s helped me tremendously to learn the basics and off to my current project I go. More on this later but here you go:

My Recommendation for learning front end/JS

Start familiarizing yourself with the syntax and overall feel for the front end technologies like HTML, CSS, and JavaScript on Codecademy, then move onto Code School for more in depth learning (I personally like Freecodecamp.com for review/practice and exercises but not for main source of learning). I love Code school’s curriculum for learning Objects, it’s pretty thorough with good examples.

Once you feel a bit more comfortable, watch Anthony Alicea’s JavaScript: Understanding the Weird Part so on Udemy. This video course is by far the best I’ve learned from; it’s best selling and although Anthony in my personal opinion can be a bit boring as far as his tone of voice, he explains what goes on under the hood of JavaScript and it’s irreplaceable.

After the Udemy course, I’d study You don’t know JS by Kyle Simpson as well as Eloquent JavaScript by Marijn Haverbeke (all available online for free) to deepen my knowledge.

And most importantly, build build build and practice problems (everyday!) using what you learn and take advantage of Stackoverflow and Google for help (and don’t forget some gooood music to get you through tough nights). For problems, I like HackerRank, Coderbyte, and CodeWars. Once you feel comfortable with JS, try Wes Bos’ React (framework) & Node (for backend) course! You can choose other frameworks like Angular but the key is to stick to one and finish; once you do, I’m confident that you can pick up any other technologies. Add in a bit of Responsive Design & git/github (my favorite on Udacity, also available for free). This will keep you busy for quite awhile. Last but not least, be persistent, enjoy the process, and keep in mind that it’s a marathon, not a sprint (I thought I’d master in a few months like how those bootcamps often advertise, who am I kidding xD).