Today's Progress 😎
- Finish the Etch-A-Sketch project
Thoughts: Before I started the project, I read the guidelines provided by the Odin Project and created a list of Minimum Viable Product features and optional features that the app would still function without, but would definitely be nice to have. This list helped me focus on what I should prioritize before diving into additional features.
What I Learned 💡
- How to apply styling to certain elements using CSS Selectors
- How to generate random RGB color
- How to add styling to native HTML color picker
Link to work: Etch-A-Sketch App
Today's Progress 😎
- Work on the Odin Project - Fundamentals Part 5
- Work on JavaScript30 Day 4
Thoughts: It was nice to refresh my memory on objects and higher-order array methods. I appreciate that there are free and accessible resources to make me better at JavaScript.
What I Learned 💡
-
console.table()function to display my data as a table! - How objects are ordered in JavaScript (integer properties are ordered in ascending order vs. non-integer properties are ordered in creation order)
Link to work: JavaScript30 Repo with notes
Today's Progress 😎
- Work on the Odin Project - Fundamentals Part 5
- Work on JavaScript30 Day 7
- Start the Calculator project
Thoughts: I continued to work on the JavaScript exercises on objects and array methods available on the Odin Project and the second part to the higher order array methods offered by JavaScript30 course.
What I Learned 💡
- Understanding how other people solved the Caesar Cipher problem and how to improve my solution
- How to use
.some(),.every(),.find(),.findIndex()
Today's Progress 😎
- Review notes
- Work on the Calculator project
- JavaScript30 Day 1 (Drum Kit)
Thoughts: I wanted to try out a new CSS layout in addition to the Flexbox, and thought CSS Grid Layout was the perfect alternative for my Calculator project. It worked great for my purpose and I can't wait to start using it for my other projects! As for the logic portion of the calculator, I noticed that there were many edge cases to implement the decimal point functionality.
What I Learned 💡
Today's Progress 😎
- Review notes
- JavaScript30 Day 2 (CSS Clock)
- Object and Object Constructors
- Continue working on the Calculator
Thoughts: I am slowly making progress on the Calculator, although there are some corner cases that I should consider. For example, the calculator should display an output whether the user clicks on the equal (=) sign or any other operators such as +, -, /, or *. Also the number cannot start with a 0 (or have 2 consecutive zero's), but the user should be able to perform mathematical operations with 0. I spent some time trying to figure out the logic, and decided to take a break by learning about object and object constructors. Object-oriented programming is such an important concept, and I look forward to the day when I can comfortably utilize it in my own project.
What I Learned 💡
- Object Constructors and relevant concepts including
new,prototype, andthis
Today's Progress 😎
- Review notes
- Object and Object Constructors
- Recipe Library Project
- JavaScript30 Day 3 (CSS Variables)
Thoughts: There were so many concepts in Objects that were new to me including how the new keyword behind the scenes, what the prototype object is, and how the this keyword fits into the system. Since I wanted to practice the new knowledge (and I think the best way is to work on a project that incorporates them!), I got started on the Library Project. I tweaked the project a little bit, and decided to make a Recipe Library where a user can save their favorite recipes.
What I Learned 💡
- How to create a modal box with CSS and JavaScript
- CSS Variables
Today's Progress 😎
- Review notes
- Practice recursion problems on codewars
Thoughts: I had the opportunity to participate in the short mock interview session with an Engineering Mentor, and was given a recursion problem to solve. It is definitely more nervous to code with someone else under the interview setting, and I know that the only way to get better is to keep practicing until I get comfortable thinking out loud! Just like any other skills in programming, knowing how to communicate your thoughts to your interview and fellow engineers is a skill you can improve with practice.
What I Learned 💡
- Using default parameters in recursive functions
- Thinking out loud when practicing algorithm problems (just do it)
Today's Progress 😎
- Finalize the Calculator Project
Thoughts: I was able to finish the online Calculator Project inspired by the Odin Project. The calculator is able to perform basic arithmetic operations (+, -, x, / with both positive and negative and floating point numbers), and it is built with HTML, CSS, and vanilla JavaScript. It was a great learning opportunity as I had to refactor my code to handle edge cases and making sure that the basic functions of a calculation are performed correctly. For instance, a number cannot (1) have more than one decimal point or (2) lead with a zero (trailing zero's are fine). Also, if a number is negative, the negative sign should disappear with the first digit as the user clicks on the backspace button (i.e. a negative sign cannot hang alone). While the project was challenging, it is rewarding to see the finished product without giving up! I cannot wait to work on other projects that will advance my programming skills.
What I Learned 💡
- Considering edge cases and handling them with care
- DOM Manipulation
Link to work: Online Calculator
Today's Progress 😎
- Work on the Recipe Library Project
- JavaScript30-with-notes Repo
Thoughts: I am making a good progress on the recipe library project inspired by the Odin Project, and I hope to finalize it tomorrow! Also I have been following Wes Bos' JavaScript30 exercises and made a repo to record, share, and review what I have learned from them. Just like this 100 days of code repo, it will be updated on a regular basis.
Link to work: JavaScript30 with Notes
Today's Progress 😎
- Finalize the Recipe Library Project and update Readme
Thoughts: I was able to finish the Recipe Library project and also update the Readme (which feels like another project on its own) with a short description, list of features, and project demos. Although I first learned about data attributes from JavaScript30 Day 1 exercise, I haven't gotten a chance to put my knowledge in practice until this project. It's a very useful and cool feature to use, and I can see myself using it for my future projects as well.
What I Learned 💡
- Using a third-party library (Sweet Alert)
- Putting data-attributes in practice
Link to work: Recipe Library
Today's Progress 😎
- Learn about Factory Functions (The Odin Project lesson)
Thoughts: I spent some time to learn about the factory functions in JavaScript. With factory functions, we can simply set up and return a new object. To deepen my understanding, I also learned about how execution contexts, scope, and closure are all related and are very important concepts in JavaScript. Seeing how factory functions can make our code easier to read, refactor, and test inspired me to organize my code using factory functions and write more modular code.
What I Learned 💡
- Factory functions
- Execution Context (global and function)
- Scope
- Closure
Today's Progress 😎
- Learn about the JS Module Pattern
- JavaScript30 Day 5 (Flex Panels Image Gallery)
- Start the Tic-tac-toe Project using modules
Thoughts: Learning about the JavaScript module pattern was great, since they are a practical way to make my code organized, reusable, and isolated. The best way to practice something new is to actually use it, so I started working on the Tic-tac-toe project where I thought about how to break down different pieces before I started writing code. Since I am putting more thought into how I structure my code, it is taking me longer to craft each line of code. It's all part of the learning process! On another note, the Odin Project (TOP) is great, and I think one way to fully utilize it is to make sure that I am learning from other resources. After realizing that some articles and videos suggested by TOP are from 2015 (which is the year when ES6 came out, but I'm sure it took people some time to adapt), I looked for resources that incorporated ES6 and more modern JavaScript and learned from those as well. Wes Bos' JavaScript30 is great as always, and spending ~30 minutes to independently try and achieve the desired outcomes help me learn better rather than just watching the video and copying his code (unless I am totally lost - then I learn from the expert 😅)
What I Learned 💡
- JS Module Pattern
- How to organize HTML/CSS code
- flex property for the flexbox, translateY property, cubic-bezier... all the cool CSS knowledge!
- JS classList.toggle() method instead of using if-else
- listening to the transitionend event
Link to work: JavaScript30 with Notes - Day 5
Today's Progress 😎
- Continue working on the Tic-tac-toe project
- JavaScript30 Day 8 (HTML5 Canvas)
Thoughts: I continued working on the tic-tac-toe project and making some progress on how to write factory functions. I still need more practice on determining which variables and methods to keep private or public, but it's fun to think about how they would impact the overall picture. Sometimes I find myself thinking too hard about the structure and not writing enough code, and I tell myself that I can always start getting some features done first and refactor my code later since I don't want to get bogged down with the fact that I should be writing the perfect code from the get-go. We all have to start somewhere.
What I Learned 💡
- HTML5 Canvas, 2D context and different properties and methods associated with the context
Link to work: JavaScript30 with Notes - Day 8
Today's Progress 👩🏻💻
- Continue working on the Tic-tac-toe project
- Review factory functions & function declarations and expressions
- Learn how to use Chrome/Firefox/VS debuggers
- JavaScript30 Day 9 (Cool Dev Tools Tricks)
Thoughts: For the tic-tac-toe project, I was able to add JavaScript logic to display O or X symbol depending on which player's turn it is and determine the winner. One issue I encountered was that the gameboard in the DOM was showing a different symbol from what was in the actual gameboard array. Learning how to use a debugger was really a game changer since I did not use a single line of console.log() to fix the issue! All I had to do was add several break points and add variables in the Watch tab of VS Code. I hope to finalize the project within the next 2 days.
Today's Progress 👩🏻💻
- Continue working on the Tic-tac-toe project
- JavaScript30 Day 10 (Checkbox Challenge)
Thoughts: Majority of today was spent working on the tic-tac-toe project and the JavaScript30's Checkbox challenge. Although I have yet to learn the TDD (Test Driven Development), I think it would have been beneficial for the tic-tac-toe project because as I was testing my code, I found myself clicking on the board 100+ times to see if there are any holes in the logic. Perhaps when I work on the Connect Four project in the future, I can implement the TDD. As for the checkbox challenge, I am glad that I was able to write the code independently first before diving into the lesson. The tough part was performing the necessary actions while listening to the shift keydown event simultaneously. After researching, I learned that you can do so by declaring a boolean variable that will toggle its boolean value as it listens to both the keydown and keyup event. I still watched how Wes Bos tackled the challenge, and it was a good learning experience.
Today's Progress 👩🏻💻
- Finalize the Tic-tac-toe project
- JavaScript30 Day 11 (Custom HTML Video Player)
Thoughts: There are just so many things I learned while working on the tic-tac-toe project (which will be discussed in the project Readme) but the big ones are utilizing comments to improve code readability and managing the scope creep. I found it helpful to leave comments in code to myself (and future fellow engineers 😎) to demonstrate the rationale on why I wrote certain functions. I am aware that there are different opinions on whether comments improve code readability or not, and I can see where both sides are coming from. For now, I like to leave comments on my work since there is still much for me to learn, and one way I learn is by documenting the work. As for managing the scope creep, I found myself coming up with new features that wasn't included in my original list of features. While they were good features to have for the user experience, it was also important for me to finish the project and distribute the resources (time and energy) on other programming topics.
Link to work: Tic-tac-toe Project
Today's Progress 👩🏻💻
- Refactor the code base for the Tic-tac-toe project
- Review Prototypes, prototype chain, this keyword
- JavaScript30 Day 12 (Key Sequence Detection)
Thoughts: I was able to get feedback on how to improve my code for the tic-tac-toe project from a senior engineer. Some of the new things I learned is that it can be beneficial to create constants for values such as empty string, O symbol string, and X symbol string since that would help me manage the values with one source of truth. If I were to change the symbols to some other values such as a space or a diamond, I can simply change the value for the constants. The naming convention for constants is using all uppercase characters. In addition, I was able to remove unnecessary variables that don't add value to the code. For instance, the haveWinner boolean variable inside the determineWinner() function was unnecessary since I could have simply returned true or false.
Today's Progress 👩🏻💻
- Update the Readme for the Tic-tac-toe project
- JavaScript30 Day 13 (Slide in on Scroll)
- ES6 Classes (The Odin Project)
Thoughts: I can say that the tic-tac-toe project is "officially" done now that I updated the Readme for it! It's a good way to showcase what I have done and also acts as a personal reminder for my accomplishments. I am also almost halfway done with the Wes Bos' JavaScript30 courses, and I appreciate learning something new everyday. The Slide in on Scroll lesson was focused on understanding the different heights (innerHeight, offsetTop...) related to the window or the HTML element and involved more math than other topics. The debouncing and throttling are also something I can see myself using in the future. This site helped me understand the difference between the two.
Today's Progress 👩🏻💻
- Refactor the Recipe Library project using ES6 Classes
- JavaScript30 Day 14 (References vs. Copy)
- The History of JavaScript - ES6 Modules (The Odin Project)
Thoughts: I refactored the code for the Recipe Library to use ES6 classes feature instead of using plain constructors. I feel more confident in using classes in my future projects and look forward to using the extends keyword as well to practice inheritance. Today's JavaScript30 lesson on pass by reference vs. pass by copy refreshed my memory on those topics. The lesson was released in 2017, so it was interesting to learn that some features mentioned as "not official" in JS actually became an official feature in JS - such as using a spread operator with an object literal to make a shallow copy of it. Also learning of the tc39 repository where one can see the different features being proposed to be official is very cool. I will continue to learn from the ES6 Modules lesson in the Odin Project.
Today's Progress 👩🏻💻
- Continue learning about the History of JavaScript, npm, yarn, webpack, and ES6 Modules (The Odin Project)
- JavaScript30 Day 15 (localStorage and Event Delegation)
Thoughts: Learning about the History of Javascript was interesting and now I have a better understanding of how ES6 modules came about and why they are beneficial. JavaScript has come a long way from plain HTML and JS to using a package manager, a module bundler, a transpiler and a task runner to automate various features. I have heard about webpack before and how it's a "module bundler", but did not really know what that meant. After watching videos about it and coding along the tutorial in the documentation, it's making more sense. As for JavaScript30, it was a good lesson to learn about localStorage and event delegation. I can see myself using those feature in the future for my projects.
Today's Progress 👩🏻💻
- Learn about the Object-oriented Programming Principles (The Odin Project)
- JavaScript30 Day 15 Bonus Challenges
- JavaScript30 Day 25 (Event Capture, Propagation, Bubbling, and Once)
- Start the Pet Photography Website project
Thoughts: I completed the challenge suggested by Wes Bos for JS30 Day 15, which was to add 3 different buttons (delete item, check all checkboxes, uncheck all checkboxes). What helped me with the challenges were being able to analyze the code from the lesson, tweak them to match my need, and to take a step back to rethink about the initial approach and come up with a better one. There was a lot to learn from Wes Bos' code and I like how he made a separate populateList function to handle the DOM manipulation. For today's JS30 lesson, I skipped to Day 25 because the topics (Event capture, propagation, bubbling...) seemed relevant to Event Delegation, which is what I learned yesterday. Without a doubt, I read multiple articles that discussed how bubbling allows event delegation to happen. The more I study JavaScript, the more topics I come across that I did not know existed. The "SOLID" OOP Principles and Pub-Sub Design Pattern are good examples of such topics. For my project (the Odin Project suggested making a Restaurant Page, but I decided to go with something different and will create a pet photography website instead 🐕🐈), I look forward to applying the Single Responsibility principle to improve my code.
Today's Progress 👩🏻💻
- JavaScript30 Day 16 CSS Text Shadow
- Learn about CSS positions and units
- Work on the Pet Photography Website Project
Thoughts: I finished another day of JavaScript30 and as always, learning about one topic led me to research other relevant topics. In today's lesson, Wes Bos used the offsetX and offsetY properties but I was curious about other properties included in the event object, such as clientX, pageX, and screenX. It feels good to supplement the knowledge with the documentation, helpful YouTube videos and Stack Overflow posts. The Pet Photography website project is coming along pretty well - using modules to divide up the code makes it easier to follow and more clean to read.
Today's Progress 👩🏻💻
- JavaScript30 Day 17 Sort without Articles
- Learn about regular expressions
- Continue working on the Pet Photography Website Project
Thoughts: Today's JavaScript30 lesson was short, but regardless it refreshed my mind on how to use the sort() method and how knowing regular expressions (commonly known as regex) can be useful. From the Coding Train's YouTube channel, I learned how regex breaks down a word to spot a generalized pattern (for example: the word "Rainbow" can be broken down into a capital R, followed by a lowercase a, lowercase i... all the way until a lowercase w.) There is a whole video series on regex and I look forward to engaging with the rest in the future. I'm continuing to work on the Pet Photography website project and simultaneously taking notes on what I would like to improve on or refactor. The tab switching works fine but there is always room to grow. Let's see how I can refactor once I'm done with the project.
Today's Progress 👩🏻💻
- JavaScript30 Day 18 (Tally String Times with Reduce)
- Continue working on the Pet Photography Website Project
Thoughts: Learning how to add the total durations of videos using the array reduce method was a good way to build on the foundations of JavaScript. Before diving into Wes Bos' solution, I solved the problem on my own using different methods such as .forEach(), .map(), .split(), and more. It felt great when I learned that I wrote a similar line of code as a pro but also created something different independently. Out of the three tabs in my project scope, I finished two tabs so I only have one more to go. I hope to finalize the pet photography website project tomorrow and look forward to receiving feedback to improve my code.
Today's Progress 👩🏻💻
- JavaScript30 Day 19 (Webcam Fun)
- Learn about promises, async/await
- Finish the Pet Photography Website Project
Thoughts: JavaScript has changed so much in the last 3 years ever since the JavaScript 30 series came out. Some of the features introduced in today's lesosn such as Navigator.getUserMedia and localMediaStream were deprecated and no longer recommended by the MDN. It was confusing at first because Navigator.getUserMedia was deprecated so MDN recommended MediaDevices.getUserMedia, but I ended up using Navigator.mediaDevices.getUserMedia since Navigator.mediaDevices returns the MediaDevices object. Also looking through the MDN examples to see how the method is used helped a lot. In regards to setting up the project, Wes Bos introduces browser-sync but I think I could have used the Live Server VSCode extension to achieve the same outcome. I did learn that using npm install without any arguments installs dependencies outlined in package.json, which is pretty cool. Although I haven't played much with media streams such as webcam and canvas before, it was still a good lesson that extended to other important topics such as promise, .then(), .catch(). As for the Pet Photography website, I was able to finish writing code for the essential modules. I will take some time tomorrow to refactor, update Readme, and deploy the project github page since the project was built using webpack.
Today's Progress 👩🏻💻
- JavaScript30 Day 20 (Speech Recognition)
- Learn about Webpack asset management
- Refactor code, update readme, and deploy the Pet Photography Website Project
Thoughts: I loved today's JS30 topic of Speech recognition since I always thought it would be cool to work with it! I primarily use Firefox for deveopment so when I first tried the feature in a Firefox browser, unfortunately it did not work due to the feature not being supported (in fact, multitude of other browsers did not support the Speech Recognition Web API according to the browser compatibility table in MDN docs). At the end of the lesson, I enjoyed thinking about the practical examples like "Siri/Alexa - get the weather" as suggested by Wes Bos and I can't wait to build an application that uses speech recognition. One idea that comes to mind is a Smart Home with Raspberry Pi. As for the Pet Photography website, I refactored the code base to include a file for the constants such as phone number, email, address, and business hours so that it's easier to access or change them in the future. I'm glad that I had the opportunity to practice implementing the Single Responsibility principle and using webpack for module bundling.
Today's Progress 👩🏻💻
- JavaScript30 Day 21 (Geolocation-based Speedometer and Compass)
- Learn about Webpack output management and development
- Learn about JSON
- Review callbacks and learn about promises
Thoughts: I had a chance to briefly try out the iPhone simulator on xcode and it was great. It's a feature that I didn't know even existed. I can see that it will be useful when I learn how to use the React Native framework and test my application on the xcode simulator. Continuing with the Odin Project curriculum, I learned more about webpack plugins related to output management (ex. HTMLWebpackPlugin) and also Development. Source map is great since it tells you which file and line the error came from instead of just printing that the error came from bundle.js. I have previously used webpack's --watch mode to automatically compile my code, and I will try out the webpack-dev-server in the future.
Today's Progress 👩🏻💻
- JavaScript30 Day 22 (Follow along and highlight links)
- Design wireframes for the Todo List Project
- Set up the Todo List Project with webpack
- Learn about Linting
Thoughts: As I go through the JavaScript30 lessons, not only do I learn from the lessons but also from other people's YouTube video comments. Today's lesson was related to hovering over the links and making the white highlight span appear on the hovered links. One of the comments wrote that this feature would be useful for the tooltip system, which would be cool to have in my future projects. For my next project, I plan to work on the Todo list as suggested by The Odin Project, and I designed some wireframes and set up the configuration files for eslint and webpack. I have been using eslint extension for VSCode, but not as a dev-dependency. It's awesome that I will be learning from a different style guide (I chose Airbnb), but I also acknowledge that it's important to stay flexible and open-minded since every team would follow a different style guide.
Today's Progress 👩🏻💻
- JavaScript30 Day 26 (Stripe Follow Along Navigation)
- Continue the Todo List Project
- Learn about different CSS frameworks
Thoughts: I skipped to Day 26 of JavaScript30 to continue with where I left off in yesterday's lesson of following along the navigation links. I reviewed the "this" keyword and the arrow function scope as they were discussed during the lesson, and also learned that you can use display: none and opacity: 0 in two different classes and toggle those properties to create the smooth transition effect. As I continued to work on the Todo List project, I decided to explore different options for CSS libraries and frameworks and came across Bulma. I like the fact that its classes are very readable and it offers helpful documentation and video courses, so I will be using it throughout the project. Excited to use and learn something new!
Today's Progress 👩🏻💻
- JavaScript30 Day 6 (fetch type ahead)
- Continue the Todo List Project
Thoughts: I went back to Day 6 of JavaScript30 since I wanted to learn about Fetch API, but I learned more regex than fetch in my opinion. Regex can be useful in many situations so I'm glad I got additional practice. For the Todo list project, I created two classes - one for TodoList and the other for TodoItem. I did not make one extend from another class, since I thought those two classes were pretty distinctive and did not require inheritance. Perhaps in the future I can refactor code, but that's the idea for now. In addition, I reviewed my project features to see how the user would add a todo item and noticed that the user can only add a todo item inside a todo list (i.e. folder of todo items). Therefore, I only exported the TodoList class with addTodo method, which creates a new instance of a TodoItem class. It takes me some time to plan it out, but it's fun thinking in terms of object oriented programming 👏🏻
Today's Progress 👩🏻💻
- JavaScript30 Day 23 (Speech Synthesis)
- Continue the Todo List Project
Thoughts: There is always a lot to learn in the JavaScript30 lessons, and I have a longer list of what I learned today. For example, it's a good idea to look through the YouTube comments to see if anyone else had the similar problem as me, or offered a solution. The project did not work for me in Firefox and I thought the feature wasn't supported in the Firefox browser. But the browser support table suggested otherwise, and I learned from a comment that I can call .getVoices() method on window.speechSynthesis and then call the populateVoices() method on page load. After following another programmer's advice, it worked on both Chrome and Firefox like magic! In addition, it's great to learn from how Wes Bos structures his code; he divides functionalities into multiple functions instead of putting everything into one big function. Also, I like how we can first test if the callback function is working properly by including a simple console.log() inside the function definition to see if we see the text in the console. As for the Todo List, I am slowly making progress by adding functionality to the "+ New List" button.
Today's Progress 👩🏻💻
- JavaScript30 Day 24 (Sticky Nav)
- Continue the Todo List Project
Thoughts: From today's JavaScript 30 lesson, I was able to fill in some gaps in my CSS knowledge. For instance, I did not realize that you can add a class to the overarching parent div (such as body) and use CSS combinators to conditionally refer to the descendant elements for the before and after CSS effects. Also, I learned the difference between the width and max-width properties in terms of resizing the screen, since the element can be responsive when used with max-width. For the Todo List project, I worked on getting the static version of the todo list done so that I have the visuals to refer to when converting it to the dynamic page. It's helpful when I can easily see how the page would look and to which elements I should add the event listeners.
Today's Progress 👩🏻💻
- JavaScript30 Day 27 (Click and Drag)
- Continue the Todo List Project
Thoughts: I came across the MDN Learning Area that offers a vast variety of articles and active learning practices to complete for different topics in web development. I had previously read some articles as they were suggested by the Odin Project, but didn't know MDN also offered such a roadmap for beginners striving to become a front-end web developer. I primarily used MDN for documentation purposes to confirm my knowledge regarding the built-in functions, but seeing that there are many interesting topics such as cross-browser testing and Accessibility guides, I can see myself visiting MDN more often for these resources.
Today's Progress 👩🏻💻
- JavaScript30 Day 28 (Video Speed Controller)
- Continue the Todo List Project
Thoughts: I made a good progress on the Todo List project today, and I think part of the reason is that I tried not to get overwhelmed by the number of functionalities I need to add. It helped to break them down into smaller pieces and tackle them one at a time. For instance, I had to convert the static todo list page to render dynamically in response to the user's click events. I tried to break it down by thinking about "What should happen when the user first clicks on the todo list on the side nav bar? What should appear first? How would the data behind the scenes change?", then made small but frequent commits to the repository. I hope to finalize the project by the end of this week and leave time to refactor and improve the code base.
Today's Progress 👩🏻💻
- JavaScript30 Day 29 (Countdown Timer)
- Continue the Todo List Project
Thoughts: After working on the timer as part of JavaScript30 exercise, I feel inspired to build my own version of the Timer as a Firefox or Chrome browser extension and publish it. Perhaps the timer could be my next project after I complete the Todo List. It would be cool and useful to create a timer that reminds the user to look away 20 feet for 20 seconds every 20 minutes, or get up and stretch for 5 minutes every hour (I spend a long time staring at the screen, so I know I'll use it for sure!). I found a helpful article by MDN related to building your first extension, so I'll take a look at it before I start the extension.
Today's Progress 👩🏻💻
- JavaScript30 Day 30 (Last day!) (Whack-A-Mole)
- Continue the Todo List Project
Thoughts: I can't believe today was the last day of JavaScript30 and I have finished all 30 exercises! It's been a great journey and I learned so much about vanilla JavaScript, HTML, CSS, and various Web APIs (check out my repo here, where I recorded what I learned from the lessons). I am planning on compiling all the exercises into one website. I also noticed that some people added additional features and functionalities to the exercises, which I think is a good idea to continue practicing JavaScript and build up the foundations. Since I already went through the exercises once before, I can focus on expressing my creativity to add different customizations. Wes Bos also offers FlexBox/CSS Grid courses, and they look helpful so I'll get started on those tomorrow.
Today's Progress 👩🏻💻
- Watch the What the Flexbox Tutorial 1 - 10 and take notes
- Continue the Todo List Project
Thoughts: Although I have used the Flexbox previously in my projects using the documentation, it was good to watch tutorials on them for review and there were some properties I have yet to use, such as align-content and order. They look useful so I hope to use them in the future. The Todo List project is taking a little longer than expected due to some road blocks in the way, but since I'm still learning, I rather take the time to learn than speeding through topics that I do not know yet.
Today's Progress 👩🏻💻
- Continue the Todo List Project
Thoughts: I spent today adding the add/edit notes, delete todo, and set due date for todos features for the Todo List project. In addition, I am in the process of implementing localStorage for the project. I haven't worked much with localStorage before, and I encountered some issues where I was trying to access the methods defined within my TodoList class on the data saved in localStorage. I got an error saying that the class method was not a function, and after some research, I learned that it's a common problem experienced among others. Since localStorage should be used for persisting data (not functions) and the data is saved in a string, I looped through each string (after parsing) and made each one a new instance of the TodoList class again using the new keyword. It was frustrating at first, but it feels great to debug the issue step by step.
Today's Progress 👩🏻💻
- Finalize the Todo List Project (finally! 🥳)
Thoughts: I was able to finalize the Todo List project today! I implemented the localStorage feature so that the user's todo list data persists even when the browser closes and opens again, and fixed some bugs related to the buttons with event listeners attached to them. I had to go back and review
how event listeners work with the documentation and YouTube vidoes, since the project had an issue where the todo buttons (toggle star, delete button, edit notes) did not function properly after the user clicks on a different todo list. At first I thought the issue was due to using the addEventListener() function inside another function, which is only ran once inside a module. However, after testing with some dummy code and reading other resources, I learned that the event listeners remain attached to the target (element) unless the target is destroyed or you remove the event listener from the target. Since I was regenerating the DOM elements every time the user clicks a todo list (meaning the existing ones were destroyed and the new ones without the event listeners are generated), I was able to fix the issue after attaching the event listeners again to the new elements. This bug took me a while to resolve, but I'm satisfied with how I successfully debugged the code and fixed the issue. I will be updating the project Readme and refactor the code in the upcoming days while continuing the Odin Project with Asynchronous JavaScript topics.
Today's Progress 👩🏻💻
- Watch the What the Flexbox Tutorial 11 - 15 and take notes
- Improve Day30 of JavaScript30 course
Thoughts: I thought of different ways to improve to Whack-A-Mole game from JavaScript30 lessons, and decided to go with one of them. The "issue" was that the user is able to earn more than 1 point when they click on the same mole multiple times consecutively when it appears from the hole. I wanted to change the game so that the user can only score 1 point per 1 mole apperance. Initially it seemed like an easy feature to add, but many of the solutions that I attempted did not work out as intended so I ended up spending more than I anticipated. At the end, I was able to solve it by creating a variable called lastBonkedMole and setting it to what was last bonked in the user's click event, and when the mole disappears, I set it back to undefined. Just like this fix, adding one new feature may seem easy (ex. implementing an all-time scoreboard), but there can be multiple sub-tasks to accomplish it. For the all-time scoreboard feature, I would need a localStorage to save the user's scores, prompt user to enter the name when the score is high enough, and think about how to display the scoreboard to the user. This makes it important to appropriately plan out what is needed to implement a feature or fix a bug. It was a good practice working with other people's code (Wes Bos in this case) since in the real world, I will be working with the code base that the team wrote and modify it based on the business's needs.
Today's Progress 👩🏻💻
- Read chapters 1 (Async) and 2 (Callbacks) of You Don't Know JS (YDKJS)
- Learn about promises, API (ex. fetch), and asynchronous JavaScript
Thoughts: I have heard great things about the book series You Don't Know JS (YDKJS), and since they were recommended by the Odin Project to learn about the asynchronous JavaScript, I read the first two chapters of the book. The chapters were dense so I definitely need to read them several times before I can fully comprehend everything discussed within. Our brains are used to the sequential way of thinking, so the nature of the callbacks where we often find ourselves jumping around the code base to understand is naturally difficult to process. However, we can use Promises, fetch API, and async/await keywords to reduce callback hell and handle asynchronous tasks more efficiently. I will put them into practice through the Weather App project.
Today's Progress 👩🏻💻
- Review Async/Await (JavaScript.info)
- Work on the Weather App
Thoughts: To put the asynchronous JavaScript concepts into practice, I got started on the Weather App project. As with many projects, I encountered several errors related to the configuration files (dotenv and Babel (async/await keywords) in this case). For example, I kept getting an error message that said "Uncaught SyntaxError: identifier starts immediately after numeric literal" and it didn't tell me which file the error derived from, but only said "bundle.js". Not a helpful error message but that's the programming life. After dabbling with the code, I figured out that it was coming from my .env file due to my API_KEY value. After reading more stackOverflow answers, I learned that I shouldn't really be using process.env in the front-end and that webpack 5 doesn't provide access to process. As an alternative, I can place the API key in another .js file and add that .js file to the .gitignore file to prevent pushing it to github by accident. I won't be able to deploy it for the lack of API key, but I can still showcase my work via demo screenshots and gifs in the github repo's Readme file. I'm excited to continue the weather app tomorrow.
Today's Progress 👩🏻💻
- Watch What the Flexbox tutorials 16-20 and take notes (finished the series)
- Continue the Weather App project
Thoughts: I finished the Flexbox tutorial and I feel more confident in using Flexbox display and its properties that I haven't used much before, such as flex-wrap, flex-grow, flex-shrink, flex-basis, and order to create a responsive website. Before, I was used to setting the flex-direction property to column and using justify-content/align-items to center when I wanted to vertically and horizontally center flex items. But I learned that you can also set the flex-wrap property to wrap so that the flex items wrap around accordingly based on the width of the flex container, achieving the similar effect as flex-direction: column. As for the weather app, I learned how to read the documentation and get the necessary information for the project. For instance, the default temperature unit was in Kelvin but you can set the unit to be metric or imperial to get the temperature in celsius or fahrenheit. The OpenWeather API also provided the appropriate weather icons to be used according to the weather such as rainy, sunny, or cloudy, so I didn't have to use icons from other sites. In addition, I noticed that my app designs can change from the initial layout so it helps me to work out the JavaScript logic first and then play with the styling later, which can change in the future.
Today's Progress 👩🏻💻
- Continue working on the Weather App
Thoughts: For the Weather app, I was able to retrieve the data from the OpenWeather API and spent some time to make the data more human readable by adding appropriate units such as % for humidity and miles or meters for the wind speed. In terms of converting the temperature unit from fahrenheit to celsius and vice versa, although the API data was available in both units, I did not work to make another API call since it would be slower than calling a function that can convert the value and unit on the fly. In addition, I created an object for all the weather data, which will be populated when the API call is made, so that there is only one source of truth instead of getting the weather data from different sources such as the DOM text node. As I was writing the function to convert the units, I realized that I don't need to have 2 different functions (fahrenheit to celsius and celsius to fahrenheit) since the API call already provides data in the imperial format (specifid by me). I can just define a function to convert from imperial to metric and call that function as needed. When I need to convert from metric to imperial, I can just use the original data provided by the API. It was helpful to think out loud before writing code!
Today's Progress 👩🏻💻
- Continue working on the Weather App
Thoughts: I implemented the error handling logic by using .catch() method to the getWeather function to catch status codes such as 400 when the input is empty or 404 when the input city doesn't exist. I learned that fetch() doesn't throw an error unless it's a network error and since 4xx error codes are not network errors, I need to throw new errors and handle them ourselves. I was also able to implement the Unsplash API to display a random image as a background image that corresponds with the input city name. It works great, and tomorrow I will work on adding a functionality so that when the input is empty or the city doesn't exist, the website doesn't make an Unsplash API call.
Today's Progress 👩🏻💻
- Continue working on the weather app (almost done!)
Thoughts: While implementing a corresponding background image for the input city, I was experiencing an error similar to a common off-by-one error but I was able to fix it after realizing that I was not making the API call at the right place. In terms of layout, I used media queries to make sure the content fit in a smaller sized window. There was an issue where the vertical content would be cut off even upon scrolling, and the fix was to utilize min-height instead of regular height CSS property since min-height is responsive to the screen size changes. Finally, I did not like how the location would show an abbreviated country name such as US for United States, so I parsed the CSV file with country code and name by using Papa Parse. I converted the result to a Hashmap for easier access to the country's full name based on the country code. It was important to keep in mind that Papa parse is an asynchronous library, so I had to use the complete callback function to display the data (country's full name). Otherwise, JavaScript would throw an error saying that the Hashmap (countryCodes) is undefined. I'm glad that I was able to accomplish the MVP features (display weather data and toggle unit) as well as the optional features (display matching background image, handle response errors, mobile-responsive, display full country name, display different weather icons accordingly) in order, instead of working on an optional feature first and experiencing burn out while the essential feature is not yet finished. I will be updating the Readme and other housekeeping tasks tomorrow to wrap up the Weather App project.
Today's Progress 👩🏻💻
- Update Readme for Covid-19 project
- Review CLI
- Learn about Test-Driven Development and Reading Specs
Thoughts: For the COVID-19 Tracker project that I worked on before, I decided to update the Readme to make it easier for people to understand what the project is about, its features, and different technologies used (languages, API, libraries). Ever since the first Readme, I had improved in showcasing my work with demo screenshots and GIFs, instead of leaving it blank or just writing one or two lines without a detailed description.
Today's Progress 👩🏻💻
- Continue learning about Test-Driven Development (TDD) and Reading Specs
- Finalize the Weather App project
Thoughts: There is a variety of new "quirks" of JavaScript that I came across today. For example, while learning how to write and read specs (unit tests) for the TDD, I learned that multiplying undefined and undefined returns a NaN, not a number. But NaN actually has a numeric data type (despite it being "not a number"!) whose value cannot be represented with actual numbers. When you run typeof NaN, it returns "number" as the data type. Also, if you execute a function that takes in parameters without actually supplying the arguments, JavaScript would set those missing arguments as undefined. It feels good to fill in the knowledge gap while learning about something seemingly irrelevant (ex. TDD and NaN quirks). In terms of TDD, I am focusing on Jasmine testing framework and learned about what the describe, it, expect functions and toBe matcher method do. I understand that test-driven development is important and can improve your code/project in many ways - I'm excited to start using them in my projects. For the Weather App, I made sure to add screenshots and GIFs and the detailed list of features and learning outcomes to the Readme. Since I did not deploy the website (to protect the API key credentials), I felt that detailed Readme would help the potential user understand its capabilities and how to use it in their local machine.
Today's Progress 👩🏻💻
- Review prototypes
- Review factory functions
- Review the value of
thisin Callback functions
Thoughts: When it comes to the this keyword in JavaScript, I was used to the implicit binding of this and how you can look to the left of the dot to figure out the value of this. I realized I'm not too familiar with the value of this inside callback functions as I was watching a video to learn about factory functions (funny how one topic can lead to learning a different topic - so common in programming from my experience 😅). I came across two good articles: How to Eyeball Your ‘This’ Context in Javascript and Mastering ‘this’ in JavaScript: Callbacks and bind(), apply(), call(). Essentially, the value of this inside a callback function can change depending on the higher-order function that invokes the callback function. It's important to inspect the function's call site to inspect this. I also noticed that many articles suggest using an arrow function syntax to solve the this problem, and my follow-up question then became "how exactly does the arrow function syntax work to solve this"? I felt like I needed to understand the arrow function's scope, so that would be my goal tomorrow to research into it.
Today's Progress 👩🏻💻
- Review loops, nested loops, looping through objects
Thoughts: Nested loops in JavaScript can be confusing and I found it helpful to print out lines such as console.log(`Outer loop i: ${i}`) and console.log(`Inner loop j: ${j}`) to see how many times the outer and inner loops each run and observe the pattern. It might also be helpful to think of the outer loop as a row, and inner loop as a column since for every row, there can be n number of columns, which is what happens with an inner loop. On a side note, whenever using higher-order functions (ex. map, reduce, filter...) with arrow function syntax with curly braces, I need to remember to actually return the element with a return keyword. Otherwise, nothing will be returned from the higher-order functions.
Today's Progress 👩🏻💻
- Learn about bubble sort algorithm
- Review data types in JavaScript
Thoughts: While working on the practice problems, I came across one that utilized Bubble Sort algorithm. I remember that Harvard University's CS50 course offered a section on sorting algorithms and one of them being bubble sort, I went back to watch a video and it was very helpful in understanding how the bubble sort algorithm works (ex. bigger number "bubbling" to the right end of the list, focusing on a pair of adjacent numbers at a time). While learning algorithms can be tough, I know that it's important for my career to learn them (as well as data structures). In terms of counting Github contributions, I learned from this blog post that making commits to a forked repository does not count towards the contribution because Github only intends the forked repo to be a temporary place to store your work before merging into the upstream repo. I have been using forked repo to store my permanent work so I'll have to work on using my forked repos as Github intended.
Today's Progress 👩🏻💻
- Review data types, scope, ES6, and git
- Checklist.design
Thoughts: I came across the checklist.design while doing research on project checklist and designs. It looks like a great website to reference when I'm building my portfolio site or a capstone project. The website seems more targeted for UI/UX designers to assist with their design work, many checklists suggest good features to have in a website if a developer wants to showcase their development skills. For example, the checklist for the Login page includes "Login via Third Party" and "Link to reset password", which would be good concepts to practice. I'm excited to utilize the checklist.design website for my portfolio.
Today's Progress 👩🏻💻
- Review nested loops, constructor functions, prototypes (spaced learning!)
Thoughts: There are some topics that I like to review on a regular basis, and one of them is nested loops. I watched some YouTube videos on the topic by The Coding Train's Nested Loops - Processing Tutorial and Steve Griffith - JavaScript Nested Loops with Arrays and Objects, both of which were great videos to refresh and confirm my knowledge on nested loops. In addition, constructor functions and prototypes (especially the prototype object and the dunder proto property) can be confusing if I don't review them periodically. I learned that the prototype property is an object with two properties to it: 1. constructor and 2. proto. Dunder proto (proto) really just points to the prototype object in which the instance has inherited. For example, running this expression arr.__proto__ === Array.prototype would evaluate to true since arr instance inherits from the Array object. Spaced repetition and practice are especially helpful in reviewing the concepts that I thought I understood before (but when I come back to review them, some topics tend to get mixed up in my head 🧐). Of course, the best way to retain knowledge is by using them in my code (whether it's for a project or pratice problem).
Today's Progress 👩🏻💻
- Practice constructor functions with stack data structure
- Review Arrow functions and how they differ from regular function declarations
- Review Execution Context, Scope, and Closure
- Learn about Lexical Environment
- Refactor the Weather App code
Thoughts: I had briefly learned about the stack data structure before so I recall some knowledge like the fact that stack manages data as Last In, First Out (LIFO). But I didn't really understand why we couldn't just use the built-in Array push method to manage the stack (if the stack was made using a constructor function). After today's review, it's making more sense now; if I'm using a constructor function to create an instance, that instance is an object, not an array. This explains why I had to create my own push method in the object's prototype so that I can appropriately access the stack (typically represented as an array) available in my object instance. Another topic I reviewed today was the difference between Arrow functions and regular functions and this article Anomalies in JavaScript Arrow Functions was a great read. Some highlights are that you cannot use an arrow function to create a constructor function and that the arrow functions cannot be invoked with the new keyword, and that they automatically binds this to the surrounding code's context. For the Weather App that I finalized before, I finally found some time to refactor code to utilize object destructuring and constants for variables such as error messages and units.
Today's Progress 👩🏻💻
- Review functional programming, higher-order functions and methods, and callback functions
Thoughts: When I first started to learn programming, the terms "imperative" and "declarative" styles of programming were confusing to me. In essence, imperative programming describes HOW your program should achieve something (ex. step by step) and is used in object-oriented programming, whereas declarative programming describes WHAT your program should ultimately achieve and is used in functional programming). Now that I know about the higher-order functions and methods, they make more sense to me since higher-order functions make it a lot easier for you to just tell your program what to do (ex. triple every number in the array) rather than having to specify the steps of achieving the same goal. Callback functions were also very confusing to me at first (I mean, it's called a "callback" function - back then I was wondering what exactly you are calling back?). With practice, I am now more comfortable using them in my code and it's such an important part of JavaScript since it's used everywhere.
Today's Progress 👩🏻💻
- Review JavaScript array higher-order functions
- Refactor Todo List code
- React JS Introduction (The Odin Project)
Thoughts: Some notes to self: remember to actually RETURN something inside of the higher-order functions and be aware of what's being returned! Too many times I have assumed that my function returns a value when in reality, I see undefined being returned instead 😅. For the Todo List, I made some small edits to refactor code such as deleting unused imports from modules, removing unnecessary comments (the ones that don't add value to code), and adding consistency to module names (starting all with capital letters).
Today's Progress 👩🏻💻
- Update Todo List README
- Continue the React JS Introduction lesson
- React State and Props
Thoughts: I learned that it's best to update the README when the project is still fresh on your mind. It's been almost 2.5 weeks since I finalized the Todo List project, but I have not gotten around to update the README for it with demo gifs, features, and learning outcomes. It was definitely more difficult to remember everything after some time has passed. But what matters is that I updated it
Today's Progress 👩🏻💻
- Scrimba React tutorial (props, state, event handlers)
Thoughts: I continued to work on the React tutorial by Scrimba and it provided good hands-on practice on getting the correct React syntax and learning about props (uni-directional data flow from parent to child), state (change state using the setState method), and event handlers. Throughout the lesson, I read the React documentations to supplement the tutorial and I'm glad that I have improved on reading the documentation and understanding it more thoroughly. When I first started learning JavaScript and React, documentation was difficult to understand. It's such an important skill to have since it's the source of truth not only for MDN or React documentation but also for the third party libraries and APIs.
Today's Progress 👩🏻💻
- Work on the React CV Project (The Odin Project)
Thoughts: Since React heavily emphasizes the use of components, knowing how to break up UI into reusable components seems like one of the most important skills to have, but also is one of the most difficult to gain. It feels similar to breaking up vanilla JavaScript code into modules to be used with Webpack. Fortunately, both skills will improve with practice and experience over time. So far for the React CV Project, which allows the user to input general, education, and experience data to generate a CV/resume, I have three different components for each section. Each component has form elements for name, email, phone number, and other necessary data to create a CV. For some form elements, I can probably make them as separate reusable components so that the user can click on a button to generate multiple education sections (ex. multiple degrees, previous positions) and provide corresponding information.
Today's Progress 👩🏻💻
- Review JS Classes (ES5 & ES6 way of class-subclass)
- Go down the rabbit hole of JavaScript 🐰
Thoughts: Today I went down the Rabbit hole of JavaScript advanced topics: from ES5 way of extending a subclass from baseclass to reading through the documentation and YouTube videos on how the .call method works, to how the context/value of this is determined, to the difference between the regular function and the arrow function syntax, to the lexical scope. Reflecting back on it, I think they are all related since it's difficult to understand one of these concepts without knowing the other (for example, this! It often drives me crazy 🤯). Going down the rabbit hole would be ineffective if I wasn't taking notes or retaining any knowledge that I read or watched, but today was pretty productive because I have a better understanding of the topics listed above. For instance, when you use the standard function keyword, the context of this depends on where the function was invoked/called. When you use arrow functions, the context of this depends on where the parent function was defined. Next time when I want to focus on the topics on hand, I can try time-boxing the amount of time I am allowed to spend in the rabbit hole. Often times, I do enjoy exploring different parts of JavaScript for the spaced learning opportunity and exposing myself to new concepts, so going down the rabbit hole is pretty interesting 😅
Today's Progress 👩🏻💻
- Review the context of
thisin different use cases - Continue the React CV Project
Thoughts: I focused on how the value/context of this in JavaScript changes depending on how the function is invoked (call-site). For the React CV project, I need more practice with applying the concept of which component to store the states (since state belongs to a component) and passing down props (you can pass down state as props!) to the children components since they can get confusing when I work with multiple components. Hopefully after finishing this React project, I will have a better idea on how to navigate such topics.
Today's Progress 👩🏻💻
- Study JavaScript "this"
- Continue the React CV Project
- Start watching the React Bootcamp Youtube Video series
Thoughts: I spent some more time studying this and solving some practice problems of determining this based on call-sites and the four this binding rules. Once again, I clicked on the purple link - Mastering ‘this’ in JavaScript: Callbacks and bind(), apply(), call() (already introduced in Day 48 of my 100 days of code 😂) and reminded myself that the this value changes when a function gets invoked inside a higher-order function. The callback function follows the this context for its enclosing parent function. Besides studying this, I wanted to set aside some time to continue the CV project and learn more React so I was able to work on passing down state as props from parent to child components so that a button click will trigger a state change and allow for conditional rendering. I came across the Youtube video series for React Bootcamp by Tyler McGinnis and it looks good for additional React practice, so I'll be continuing the series tomorrow.
Today's Progress 👩🏻💻
- Fight the Imposter Syndrome
- Used recursion to build Hangman game
- Solve practice problems (mini-algorithms like Pig Latin)
- Continue the React CV Project
Thoughts: As someone learning how to program, there are days where I experience the imposter syndrome. Here are some notes to self for what helped me handle imposter syndrome:
- Google "programming gives me imposter syndrome" and realize I'm not the only one feeling this way: as of April 1, 2021, I have found 1,040,000 results on Google search, meaning that others have experienced it (been there, done that!). Reading an article or two helps me learn from others (even senior engineers feel that way so imagine someone trying to land her first software engineer job 🤗)
- Help other people in the software development community: this not only makes me feel good about myself for being able to help, but also shows that I actually know something enough to help others understand. The best way to learn is to teach others, so it's good for combatting imposter syndrome and also reinforces my learning!
- Look at my old code (and cringe for 30 seconds) and reflect on how far I have accomplished: back in the days, I didn't like working in command line interface. I used to prefer GUI but hey, now CLI is life
☺️ . Also, I didn't enjoy using higher-order array functions like.forEach,.map,.reduce. I thought I could accomplish the same goals using for loops and for loops were "easier". But now my go-to functions are higher-order functions and I know how important they are for declarative functional programming. They became easier with practice. Now I try to reduce the number of for loops in my code.
Today's Progress 👩🏻💻
- Solve mini-algorithm problems (difficult - means I'm learning!)
Thoughts: Whenever I solve a difficult problem and get stuck, I do the following: take a break, think about it in the shower, sleep and return to it the next day. It helps so much to take a rest or just get up and stretch instead of giving in and looking at the solution. Obviously there are time where I look at the solution; for example, if I don't know what a binary search tree is, I won't spend days and weeks trying to figure out a BST problem. Not giving up and thinking about the problem is a great way to improve critical thinking skills. It feels great when I finally solve the problem and then look at the solution to further learn from others. I didn't mention it in yesterday's post but another thing that helps me tackle imposter syndrome is to imagine how I would support my friend in the same situation. Since I know how much effort my friend (me
Today's Progress 👩🏻💻
- Continue to solve mini-algorithm problems
Thoughts: I continued to solve mini-algorithm problems from yesterday (I refer to them as mini because I'm not actually using algorithms such as binary search, sort, or dynamic programming, but I do have to think harder and put more effort into solving them than other problems 😅). I'm proud that I was able to solve the problems that I was initially stuck on. For some problems, I solved it utilizing stack data structure and nested loops. I hope to wrap them up tomorrow and look at how other people solved them!
Today's Progress 👩🏻💻
- Continue the React CV Project
- Solve the mini-algorithm problems and learn from others' code line by line
Thoughts: One of the good ways to improve programming skills is to read other people's code. It helps because you get to know how others approached the problem and implemented it. Although helpful, it is still one of the difficult skills to have and sometimes I don't even understand what I wrote a week ago unless I left good comments for the future self 👀. For one of the problems that I struggled with, I reviewed someone else's solution line by line and wrote comments so I can refer to them later. I noticed that while writing comments to understand the code is important but it's also important to understand their overall strategy and the main goal of each line of code (for example, it might be easy to figure out that a line of code is checking whether a property already exists in the object, but you also need to know why they are checking for the property. For the question I was referring to, it was to check if there was a duplicate value in the object.)
Today's Progress 👩🏻💻
- Finalize the React CV Project
- Re-do the problem I was stuck on without looking back at notes
Thoughts: I'm glad I was able to solve the problem that I was struggling with yesterday, without looking back at notes or solution. It's a good practice since it enforces what I learned and tells me whether I truly understood the solution and the approach instead of merely memorizing the answer (of course there are times where memorizing helps a lot!). I was able to finalize the React CV Project and updated the README with some learning goals and the demo gif as always. From completing the project, I obtained the understanding of conditional/dynamic rendering of components, state management and props system.
Today's Progress 👩🏻💻
- Free React Bootcamp Videos Day 1 and 2
Thoughts: From watching the Free React.js Bootcamp videos by uidotdev, I learned about how React works under the hood (for example, the React.createElement() method and what arguments it takes in, how React elements are different from React components. "React Component is a function or class, which optionally accepts input, and returns a React Element.") Also, the instructor clearly explained that props are to React components, what arguments are to functions. Along with additional practice with passing in props to components and dynamic rendering using the setState method, I am becoming more comfortable with React. I will be starting the Memory Game project tomorrow as suggested by the Odin Project as well as learn about the lifecycle methods and hooks.
Today's Progress 👩🏻💻
- Watch the Free React Bootcamp Video - Day 3
- Learn about React Lifecycle Methods
- Start working on the React Memory Game
- Learn about React Hooks
Thoughts: I spent some time learning about the React lifecycle methods and the sequence of how they work:
- First the
constructorfunction will be called and the initial states will be established. - UI will be rendered with those initial states using the
rendermethod. - Once mounted to the DOM,
componentDidMountis called. - If there are any updates to the components (ex. new props/states),
componentDidUpdatewill be called. - If there are components being unmounted,
componentWillUnmountwill be called immediately before a component is unmounted and destroyed. The Free React bootcamp video was good for learning the basics of React but since this video was released before the React hooks were introduced, I watched a different video to learn how to use hooks inside of functional components. Funny enough, just as I learned about React lifecycle methods, hooks encourage thinking in terms of synchronization rather than lifecycle methods. Regardless, lifecycle methods are still important part of React since not all code is written using hooks and hooks such asuseEffectstill have a similar idea as lifecycle methods.
Today's Progress 👩🏻💻
- Create a number guessing game using vanilla JavaScript
- Learn about React Hooks
- Work on the React Memory Game
Thoughts: The best way to learn something is by doing, so I'm using Hooks for the React Memory Game (spongebob squarepants theme 🧽). Unlike class components, there is less code to achieve the same goals for the functional components. They utilize destructuring very often as well. Overall, I enjoy how React is more clean to read and write than vanilla JavaScript, thanks to JSX. I'm excited to start building more projects using React 🥳
Today's Progress 👩🏻💻
- Continue working on the React Memory Game
Thoughts: I continued to work on the React Memory Game and made good progress on the important features of the game. Before diving into writing code, I took the time to brainstorm on how to achieve a functionality (ex. clicking on a card increases a score unless a duplicate card is chosen - in which case, game over). I came up with multiple approaches and ultimately proceeded with the one that made the most sense to me. For example, I didn't feel like there was a need for individual Card component to know that they are clicked; only the App component (parent) needs to know in order to keep track of the game. Fortunately this logic worked out pretty well. Another logic that was confusing was implementing the GameOver component. I wasn't sure how to communicate the click event for the "play again" button from the GameOver component (child) to the App component (parent). I thought I needed to have a "play again" logic (i.e. reset game data) inside of GameOver since that's where the button element was. But since App is in charge of handling game data such as cardsClicked and checking for duplicates, I realized I can have the reset the game data logic inside of App. I just needed to pass down that logic via props for the onClick event handler to the button inside of GameOver component. Nothing is being "passed up" to App from GameOver - the child component is just handling the onClick event for the parent. Also learned that you can provide onClick and other events only on DOM elements, not your own custom components (this explains why I passed down the onClick logic down to GameOver component via props).
Today's Progress 👩🏻💻
- Finalize the Memory Game
- Review recursion
Thoughts: I was able to find a solution to the problem where the character cards were not randomized on the initial render. Under the hood, the cards would render first and then the cards array would be shuffled. By the time the cards are randomized, because the UI is already rendered, the randomized array does not display correctly. The fix was isolating the shuffle algorithm into a helper function, importing it into the characters array file to run it inside of that file (so they will be appear random on the first render), and also importing the helper function into App to invoke it upon card click. Working with multiple components for the project helped me finally understand what people mean by "using callback functions" to pass information from child to parent.. Essentially, the parent component is passing in a function to the child via props, and the child just executes that callback function from the parent. Since the parent has reference to that function, the parent has access to the changes triggered by the execution of the function. For example, look at the <App /> and <HowToPlay /> and how the handleHowToPlay function is passed down from the <App /> to <HowtoPlay /> child component. When a button inside of <HowToPlay /> component is clicked, handleHowToPlay function is executed, which triggers the setShowHowToPlay function to modify the showHowToPlay state.
Today's Progress 👩🏻💻
- Refactor the React Memory Game code
- Update README for React Memory Game
- Review recursion
Thoughts: I am gradually getting used to updating the README files with different elements such as the one line summary of the project, learning outcomes, and demo screenshots and gifs. I remember when updating a README was a daunting task, especially for the first few projects.
Today's Progress 👩🏻💻
- Review Recursion and solve practice problems
- Learn about React Routers
- Start the React Shopping Cart
Thoughts: I took some time to review the concepts of recursion and solve several practice problems. For recursion, I think recognizing a pattern and breaking it down into smaller, working parts is the key to solving it. Recursion has been one of the most difficult concepts for me to grasp, and I'm hoping that with practice it will get easier. In addition, I learned about React Routers and they feel similar to the Express framework for Node.js. Using this new knowledge, I started another React project (inspired by the Odin Project) for an imaginary website to continue practice using React and React Routers. For styling, I decided to learn and use Styled Components instead of regular CSS. Many companies utilize Styled Components, including Zillow, Spotify, and Patreon. I'm excited to add another skill under my belt!
Today's Progress 👩🏻💻
- Review Recursion and solve practice problems
- Continue working on the React Shopping Cart
Thoughts: For the React Shopping Cart project, I will be rewriting and refactoring the code from a different project that I was working on to practice React, but I didn't quite finish yet. They are similar in the sense that both of them would have a shopping cart and other menu pages to utilize React Routers. Because there will be some parts that would be removed and added for the purpose of this project, it involved heavy refactoring from changing regular CSS to using Styled Components and other features. So far I enjoy working with Styled Components because it's easier to maintain and dynamically style different components. I can't wait to learn other libraries such as Redux for my React applications
Today's Progress 👩🏻💻
- Practice Recursion
- Continue working on the React Shopping Cart
Thoughts: While working on the React Shopping project, I learned the importance of appropriately naming your variables and functions. For example, there were some menu items which were only available hot, so they didn't have any price to display for iced. In my old code, I named that conditional rendering function as hotCoffeeOnly. It confused me at first since it was not an intuitive name and I had to read into the function to understand the purpose. I changed the function name to be renderMenuItemPrice to match the function's use case. I think it helps to name functions with an action verb such as set or render depending on what the function is doing.
Today's Progress 👩🏻💻
- Practice Recursion
- Continue working on the React Shopping Cart
Thoughts: I worked on flattening a nested array using recursion and without loops since there can be many variations of the same recursion problem. I came across a helpful Stack Overflow answer, which explained the concept of stepping down (step into the element with a recursive call, if it happens to be an array as well) and stepping right (slicing the array to go through all the elements of the original array). It's important that you modify the array to continue approaching the base case (in this case, when the array length is 0). As for the React Shopping Cart project, I added some styling to override the native HTML input (number type) by adding a bigger increment and decrement quantity buttons. Also, I got more practice with navigating through the props system. I never worked on a shopping cart before so handling the "Add to Cart" button, Cart component, and making sure the Cart has the necessary information to show to the user when the Cart page shows up would be good practice
Today's Progress 👩🏻💻
- Practice Recursion
Thoughts: I spent some time re-doing the recursion problems that I was stuck before, this time utilizing a Debugger to step through each recursive call. I have used code visualization sites such as AlgoViz and JavaScript Tutor, but a browser debugger was useful because it was easier to trace the call stack and the value of different variables in each function's execution context. I walked through the solution of flattening a nestd array using recursion without loops, writing out each call. It was more complicated because the solution occasionally involved 2 recursive calls in each function call. While walking through the solution, I noticed that there are several important things to note:
- Know which function called which function so you know WHERE to return the return value to. It helped to label which previous function invoked the current function call.
- Keep track of what's remaining in the call stack and what has been popped off. Remember that a function pops off the call stack when it returns.
- When there are multiple recursive calls made in one function call, remember that JavaScript is single-threaded and works from top to bottom. Therefore, the latter recursive function does not get called until we have a return value from the first recursive call.
Note to self: Everyone works based on their own time zone, so don't feel rushed even if you don't understand recursion right away! Practice makes perfect 🤗
Today's Progress 👩🏻💻
- Watch videos on Stacks, Queues, Linked Lists, Binary Search
- Continue the React Shopping Cart Project
Thoughts: When it comes to data structures and algorithms (or any other topics!), I think it's important to get the initial exposure whether you understand them or not. Repetition is key, so the more exposure you get, the more concrete the concepts will be. For the Linked Lists video, it went over the problem to calculate the number of nodes in a linked list, given head is not null. Thanks to the recursion problems I have been dealing with for the past few days, I thought that using recursion to solve this problem would be a good solution. It reminded me of the classic "how many people are in front of you? Ask someone in front of you!" approach, except in front of a person, it would be a node.
Today's Progress 👩🏻💻
- Continue the React Shopping Cart Project
- Work on Recursion problems from this repo
Thoughts: For the React Shopping Cart project, I had to handle the edge case of if the user adds the same item in two different occasions (ex. add 1 of item A now and add another 1 of item A at a later time), the cart should display Quantity 2 of item A rather than Quantity 1 of item A in 2 different rows. It required some thinking to handle it, but I was able to solve it by modifying the quantity property of the item object. One lesson learned is before trying out new features, or refactoring, make sure to commit to make your life easier. Otherwise you may have to undo 100 times to go back to the checkpoint. Another feature that I want to implement is allowing user to edit cart item quantity in two different components: ProductCard and CartItem. Currently, the quantity state was maintained by the ProductCard component but when writing code for the CartItem component, I realized it also needs access to the quantity state. The React Docs suggests that I lift the state up to the closest common ancestor, so that's what I will be trying. I learned the importance of global state management system (Redux!), since it will make managing the state so much easier. For my future React project, I will be learning and using Redux. Excited!
Today's Progress 👩🏻💻
- Day 1 of Grace Hopper Coding Bootcamp
- Pair programming: git
- Work on Recursion problems from this repo
Thoughts: Today was the first day of the Grace Hopper Coding Bootcamp and I am very excited to continue my coding bootcamp journey with fellow Grace Hoppers! I have not pair-programmed in a while, so a few hours of pair-programming felt really refreshing. I look forward to sharing my knowledge and learning from others during the bootcamp 🥳.
Today's Progress 👩🏻💻
- Day 2 of Grace Hopper Coding Bootcamp
- Pair Programming: HTML/CSS
- Continue the React Shopping Cart Project
- Work on Recursion problems from this repo
Thoughts: The benefit of pair-programming is that you learn from the experience whether your partner has more experience or less experience than you. Of course you learn when working with someone with more experience than you but the opposite is true too! You learn just as much when you teach someone else because you get to confirm what you truly know (if your partner is able to learn from the experience, that's a good sign of your teaching ability!), communicate your knowledge in an easy-to-understand manner. Teaching someone else is a great opportunity to reinforce your knowledge and improve soft/technical communication skills.
Today's Progress 👩🏻💻
- Day 3 of Grace Hopper Coding Bootcamp
- Pair programming: debugging
Thoughts: After being exposed to different testing frameworks, now I understand better what people mean by "if you know one language or framework, it's easier to learn others." I worked with Jasmine before and when I was introduced to Mocha, the syntax looks very similar - such as describe and it methods, although some details are different. For example in Jasmine, you can focus on a set of tests by putting f in front of describe or it methods whereas in Mocha, you can achieve the same feature with .only at the end of describe or it. But the overall idea stays the same.
Today's Progress 👩🏻💻
- Day 4 of Grace Hopper Coding Bootcamp
- Pair programming: pixelate
- Review CSS by cloning a mockup
- Solve recursion problem
Thoughts: From the pair programming experience, I can see how being able to communicate your technical approach to your team members is an important skill to have as a developer. Also, teamwork makes the dream work 💪
Today's Progress 👩🏻💻
- Day 5 of Grace Hopper Coding Bootcamp
- Pair programming: Node Shell
- Review Node.js
- Create a coffee version of [Cookie Clicker game](insert link)
Thoughts: Though I have used Node.js before in my project, I feel like I haven't used it enough like vanilla JavaScript to feel comfortable (although that's how I would feel at work or any fast-paced environment 🤔). It was good practice to reproduce some of the common terminal commands such as ls, pwd, and curl with Node.js methods and modules.
Today's Progress 👩🏻💻
- Review Node.js (require, module.exports, fs module)
- Solve recursion problem
Thoughts: Bootcamp definitely moves fast - we covered the majority of front-end (HTML/CSS/JS) in 3 days. Fortunately, I had knowledge for the front-end portion from self-teaching, but Node.js and the back-end tech stack is something I need to learn/review so I spent some time today to review what we learned and prepare for next week. Next week will be loaded with new knowledge - can't wait to learn, be stuck, and debug!
Today's Progress 👩🏻💻
- Read about Redux, Redux Toolkit, and useContext hook
- Continue working on the React Shopping Cart project
Thoughts: For the React Shopping Cart Project, I was wondering if using Redux or other state management system would be helpful so I read the Introduction to Redux documentation. I came across links for the proper use cases of Redux ("Should You Use Redux?" and "When (and when not) to reach for Redux") and it mentioned that React offers hooks such as useReducer and useContext, which in together can "kind of make up a state management system". So I entered a rabbit hole and started to read up on useContext hook and learned that instead of passing down props all the way down via all the children, you can just pass the props to the child that needs it and the middle-parents may not even know about it. Since my shopping cart application has 3-4 layers, I felt that I don't need a system to manage states so I will achieve the same goal by passing in props to children.
Today's Progress 👩🏻💻
- Day 6 of Grace Hopper Coding Bootcamp
- Pair programming: Express
- Review Express library
Thoughts: I'm so glad Express library exists because it makes routing so much easier instead of using just Node.js. Most of my self-studying was focused on the front-end (vanilla JavaScript, React) aspect of programming, so I'm excited to dive into the back-end technology.
Today's Progress 👩🏻💻
- Day 7 of Grace Hopper Coding Bootcamp
- Learn about databases, PostgreSQL, and Schema Design
- Continue the React Shopping Cart
Thoughts: I first learned about databases and SQL back in college and I really enjoyed those classes. Things slowly came back to me when we learned about primary key, foreign key, database relationships such as one to many, many to many, and drawing ERDs (entity relationship database). I have not used PostgreSQL before so I had to get used to some quirks such as adding a semi-colon after a query. As for the React Shopping Cart, I was finally able to add the feature to edit the quantity in 2 different places: both shop and cart pages. Also, I found a great library to appropriately round the total price to 2 decimal places.
Today's Progress 👩🏻💻
- Day 8 of Grace Hopper Coding Bootcamp
- Learn about Node-Postgres, Express Routers, REST, Body Parser
- Pair programming: Node-Postgres
Thoughts: Especially when you are learning something in a short period of time (i.e. coding bootcamp!), getting used to the Just-in-Time knowledge is super important because everything is fast-paced. As much as I enjoy exploring the rabbit hole and getting into the weeds (especially the new technology), it's important to balance things out to finish the assignments and get a good understanding of the concepts to move onto the next topic. It's helpful to focus on the big picture and not to overthink the new concepts. For example, PostgreSQL is really just a DBMS, and middleware is just a facilitating function between a request and a response.
Today's Progress 👩🏻💻
- Day 9 of Grace Hopper Coding Bootcamp
- Learn about Sequelize ORM
- Pair programming: Express Routers and Sequelize
Thoughts: After several hands-on learning, things are making more sense now in that Sequelize essentially works as a bridge between your code and RDBMS so that we don't need to write raw SQL queries but instead use the methods provided by Sequelize. Sometimes it's important to dive in to typing actual code rather than trying to understand everything conceptually first.
Today's Progress 👩🏻💻
- Review Sequelize Hooks and Associations
Thoughts: I am getting more used to defining models and associations (one to many, many to many) in Sequelize, but more practice never hurts! It's great that Sequelize offers magic methods that we can use on models where we defined associations to make querying easier. Sequelize hooks reminds me of React's lifecycle methods although they are not the same, they are similar in the sense that the code defined in the hooks run before or after certain Sequelize lifecycle methods.
Today's Progress 👩🏻💻
- Review Sequelize (magic methods, eager loading)
- Optional Homework to practice Express Routes and Sequelize
- Continue the React Shopping Cart
Thoughts: Eager loading is just another name for joining tables together to perform various queries. I thought the term "Eager Loading" was specific to Sequelize but upon doing more research, I learned that it's actually a common term used in databases in general (typically notated by include:).
Today's Progress 👩🏻💻
- Review Sequelize (magic methods, eager loading)
- Optional Homework to practice Express Routes and Sequelize
- Continue the React Shopping Cart
Thoughts: For the React Shopping Cart, I was able to implement the delete button feature. I referred back to the old code that I wrote for the React Spongebob Memory Game to realize that the CartItem component already has access to the item's id, so I just need to pass it up to the App component with the callback function and filter by the items that the ID does not match. Working on a React project was a good break from Sequelize 😅
Today's Progress 👩🏻💻
- Learn about SPA / AJAX / Axios
- Review Express and Sequelize
Thoughts: One of the most difficult parts about learning to program (especially Full stack!) would be to see how everything connects together. In other words, it's easy to fall into the rabbit hole and only focus on the small detail but it's important to understand the big picture. In that sense, it was at first difficult to understand how Axios falls into the picture but once I realized that it's a library that helps send HTTP clients to the server, it cleared up a lot of things!
Today's Progress 👩🏻💻
- Review Sequelize, Express, Postgres
Thoughts: The best thing about learning to program is that when you think you understood everything, something more difficult pops up and challenges you 🙂 (or you simply forget) so it's crucial to review those topics regularly. For me, those topics have included Sequelize, Express, and Postgres for the past week.
Today's Progress 👩🏻💻
- Learn about React, State, Props
Thoughts: I'm glad that I have previous exposure to the React framework because things are very fast-paced at the bootcamp (just the nature of a bootcamp), so I was able to more quickly pick up the React concepts such as state and props.
Today's Progress 👩🏻💻
- Learn about React Component Lifecycle Methods
Thoughts: For both of my recent React projects (Spongebob Memory Game and the Shopping Cart), I utilized the functional components and React Hooks to set up states. Since the bootcamp focuses on the class components, it was a good practice to review the React class components and handling state, props, and the lifecycle methods such as componentDidMount and componentWillUnmount.
Today's Progress 👩🏻💻
- Review Sequelize, Express, Postgres, React
Thoughts: I had good practice with integrating different technology stacks such as Sequelize, Express, Postgres, and React to build a project with a pair programming partner. So far we have been focusing on how one or two technologies work independently or in conjunction with another, and this project was great in that we saw how everything came together.
Today's Progress 👩🏻💻
- Review Sequelize (practice problems)
Thoughts: Over the weekend, I decided to review Sequelize because I felt that it was one of the topics where I could improve on. I was able to get more practice with Sequelize queries, hooks, magic methods, and eager loading. Just like with any other libraries or frameworks, thoroughly reading the documentation helped a lot in debugging (although not every documentation is perfect).
Today's Progress 👩🏻💻
- Learn about Redux
- Review Sequelize (practice problems)
Thoughts: Reflecting on my experience, I learned that having a prior knowledge (even slightly) on something helps a lot whether you remember everything related to that topic or not. It helps even more if you had written some code for a small personal project to reinforce your understanding. Since we will be learning Redux for the next week, I watched a YouTube video to get a basic understanding of what Redux is, how it works, and what it consists of (Action, Reducer, Store, Dispatch).