CODE BLOG

I did not really experience any particular trouble completing this assignment. I generally had more questions around how to do something like adding a tab or how to add an image to the same line (e.g. email icon). I worked through them by experimenting with code and searching on the internet and my lecture notes. For example, while experimenting with color VS Code had a prompt for rgb() which I then used to get the exact color I wanted.

Pretty much everything from this assignment was new to me so I learned how to use HTML, structure an html file, how to use some CSS styles, and picked up some practices like DOCTYPE and css file separation. I found it fun to experiment and search how to make something look the way I want. I also challenged myself to make the header of my homepage resemble my resume which I think turned out well except for the exact layout.

The most helpful resources for me was the lectures as I learned the basics from them, mainly using them by referencing the notes I took. I also downloaded the Live Server extension reccomended by a student in the Campuswire forum which was nice for auto-updating the page to reflect saved changes to files. I also got some tips from a classmate that has prior HTML/CSS experience who reccomended the inspector tool.

Web articles referenced:
https://www.w3schools.com/css/css3_fonts.asp
https://www.w3schools.com/css/css_inline-block.asp

I found the margin and positioning to be challenging for this assignment as things were getting shifted or had weird spacing. I was able to solve this by use the inspector dev tool on my browser to investigate the margin and padding of objects which helped me understand how different properties worked together.
Another problem I had was wanting to scale the add-twit button from the center without having to calculate the new position myself. After some searching I was able to find the scale() property which worked perfectly for my needs.

I learned the basics of positioning, flexboxes, and font-styling. I did not know much going into this assignment but after I found a lot of cool CSS animations so I may try them later for the blog/homepage.

The most helpful resources for me was the lectures as I learned some of the tricks I ended up using for this assignment such as the inline display for the list items in the navigation bar. I also really liked the frog flexbox which was nice for practice. A student also hinted about using border styling to get the underline effect for the active navigation page which led me to find border-bottom.

One thing I had to Google was how to make my button grow from the center as I felt there had to be a better/quicker way to do it than having to calculate a new center position. This led me to find "transform: scale()" which worked well. Another thing I searched for was removing the margin from my nagivation and site title bar, I ended up realizing it was because of some default margins on the body element using the stackoverflow link and the inspector tool.

Web articles referenced:
https://localcoder.org/css-animation-grow-from-center-zoom-from-center-dot-to-full-container
https://stackoverflow.com/questions/46391382/make-header-elements-use-the-whole-space
https://blog.hubspot.com/website/remove-underline-from-links-css

I found differentiating between collections and actual objects somewhat challenging as I kept running into errors trying to append to elements by ClassName instead of ID. However, after reading the console errors from the browser dev tools and using console.log() it made more sense. Other times I was not sure what was contained in my text variable for search_twits() as it kept evaluating to false. I realized the issue after printing the text of the twit_array and it was in uppercase which made indexOf() not work initially.

I learned the basics of javascript, how to create event listeners, how to manipulate the DOM, and add new content to the DOM. Some insights I had into this was that I first learned some Python in CS160-161 so I was familiar with how a lot of the string and array operations worked. Fortunately, a lot of javascript syntax is similar to Python and C++ so it was not hard to pickup/use and the lectures were awesome for learning.

The most helpful resources for me was the lectures, particularly the ones from 4/27, 5/2, and 5/4. I also searched for specific problems / things I wanted to do with JS whenever I had no clue what to do. I also reached out to my teammates (for the final project) and they had a lot of good tips for the assignment like having to index [0] after getting elements by class name. I also took some of the example/demo code from class such as the string cleaning from the wordBoxes.js.

Two things I had to Google was how to do the search and how to clear an input field. I learned I could use the string method indexOf() for searching since it gives the starting index for a substring that is in the current string. For clearing the input field, my issue was that I was getting the value from the element and then trying to set it to an empty string "" but I was not actually changing the value text element.

// Does not work
text = element.value
text = ""
// Does work
element.value = ""
// This works too
text = element
text.value = ""

Web articles referenced:
https://www.w3schools.com/howto/howto_js_filter_lists.asp
https://www.geeksforgeeks.org/html-clearing-the-input-field/
https://www.geeksforgeeks.org/how-to-check-if-an-element-is-a-child-of-a-parent-using-javascript/
https://www.javascripttutorial.net/dom/manipulating/remove-all-child-nodes/

For this assignment, I tried to use readFile() but ran into problems with variables being undefined due to the asynchronous aspect. I went around the problem by using readFileSync() instead. Another issue I ran into was a set_header error which I solved by looking up the error and learned that my if statement block structure was causing multiple responses to be made.

I learned from this assignment how a server and client interact and how I can facilitate that interaction with node.js and node modules. I also learned how to serve pages based off request information like the url.

The most helpful resources for me was the lectures and just experimenting with example code from the lectures. For the assignment I would just try going to different pages and see what each request looked liked which helped me understand the interaction.

One thing I had to google was how to read files in since I got confused by the asynchronous read file.

Web articles referenced:
https://stackoverflow.com/questions/18494226/storing-nodejs-fs-readfiles-result-in-a-variable-and-pass-to-global-variable

I did not find anything particularly challenging about this assignments as I felt fairly comfortable with the given program requirements and lecture content. Some problems I ran into was trying to render the twitData using the for each loop in handlebars as nothing would appear. After going through campuswire hw5 discussion, I found a nice explanation from one of the TAs (Emmanuel) and learned that the {{each}} was expecting an object with a mapped array instead of an array to iterate over.

Another problem I ran into was figuring out how to include the partial I had for the create twit button and modal. After some googling I found that I needed a ">" to fit with the syntax.

I learned from this assignment how to templatize html pages, how to create partials for the client side, and serve them with Express and Handlebars. I also learned how to leverage package.json to create pre-build scripts to compile handlebar files and use nodemon to avoid manually refreshing my server each time I save. I also got more comfortable using express and middleware functions. I feel like I have a better grasp on how they work / flow.

The most helpful resources for me was the lectures, campuswire forum, and examining the example/worked out lecture code. I used lectures by watching along and implementing certain parts as I went through the assignment while also referencing my notes. The forum was helpful when I came across an issue I would look through the corresponding forum and see if another student faced a similar problem to mine and how they were able to resolve it.

One thing I had to google was how to add/render a partial handlebars file in another handlebar, since I could not figure out how to add the createTwit.handlebars partial to twitsPage.handlebars.
I learned that I just needed ">" to fit the partial call syntax.

Web articles referenced:
https://handlebarsjs.com/guide/partials.html