#100DaysOfCode Challenge Updates

Day [61-67/100]

• November 20th - 28th
• Time spent: 8 hours
• Main projects: Scrimba course / Personal Travel Journal

Well it's Day 69 today (nice) and I'm posting something on Twitter and here for the first time in 10 days. Yet again, life got in the way, not to mention Thanksgiving's bountiful activities, friends, and family. So I ended up doing absolutely nothing for two of the days, which have been counted and skipped. This will be an update for the second Scrimba solo project, but the 4th project overall. This is the first time since I've started this challenge where I can actually just get on my computer for 20 minutes and still get something valuable done. My workflow and retention have really improved and enabled this new level of efficacy. Big words, big brain 🧠

First, I went and built the second solo project: a Personal Travel Journal linked above. Along the way, I got stuck on how to dynamically render and style different elements including the horizontal line break. So, I ended up learning a lot about CSS psuedo-classes, which I can already tell is very impactful. Then while styling the project, I realized I should add some sort of footer to get back to my Digital Business Card or just so I can be contacted. This led to me spending an hour or two creating the footer on that page plus retroactively adding it to the Airbnb Experiences Clone project.

I think the footer came out really well, I learned a lot about CSS and even a neat trick to have a transparent border on an element so that it can highlight on mouse hover without having any content shift. The footer looked good, but I realized that I need to start messing with media queries (CSS based on different screen sizes) because this project doesn't automatically look good on desktop and mobile like the business card and Airbnb clone. So I made all of my projects more responsive, and made sure almost everything is in REM and percentages instead of hard pixel values.

Lastly, I went through the Airbnb Experience Clone to really personalize the project instead of just copying the given data from the course. So after 20 minutes on Canva to make 6 images and a new logo, it really looks like something I'd be proud to show off to friends and employers... at least ones that can take a joke. The next two projects have to deal with making the site user responsive. Basically forms rendering elements to the DOM. Once I get a good understanding of that, I think I'll add a form to the Travel Journal and Airbnb clone to be able to render more cards.

On top of the forms for user input, I want to add a floating button to all of my projects that explain how the project was built and what challenges needed to be overcome for everything to work the way it does. I try to explain quickly when I show friends and family, but I can tell it would be useful to add some sort of 'how it works' section to every project. Alright, on to make a meme generator 🤡

Day [55-60/100]

• November 14th - November 19th, 2021
• Time spent: 9 hours
• Main projects: Scrimba course / Airbnb Experiences clone

I was going to wait to post till I was done with the second solo project but this Airbnb Experiences clone kind of became a solo project because I didn't use the tutorial. I think it'll be worthwhile to document the solo project in its own blog entry, so here's the week so far.

Initially the project started off explaining that it will be a great way to go over the concept of props, basically passing along data from different components and sources to render things to the DOM dynamically. It asked to just create the Navbar, but I went ahead and made the Hero section and a statically rendered Card component on my own before I went back to check my work. The CSS was really killer, and it was absolutely worth the hours I sunk into learning how to make everything responsive and scalable. There was a moment where I looked at my clock at 6:00, styled some elements, looked back because I thought it was 6:10 but it was actually after 7:00 already 😅

It got to the point where everything was basically working and mostly styled, but I could not get the images to load dynamically. There's something about Create-React-App that won't take an image path because during bundling it moves to a generated static folder with a unique ID in the URL. So, I tried installing packages, scoured blog posts and Stack Overflow, to no avail. It wasn't until I saw I can pull images from the public folder that it worked. It is not recommended due to bundle size issues and caching, but it was okay just so I could get the project to work without putting these images in a database. It was pretty awesome to figure it out by understanding why it didn't work, not just copy and pasting other people's code until it worked.

I'm feeling pretty confident going into this next solo project (a travel journal), but I am worried that conditionally rendering the travel journal on the digital business card might be a bit tough. If you don't hear from me again, that was the fatal mistake.

Day [48-54/100]

• November 7th - November 13th, 2021
• Time spent: 10 hours
• Main projects: Scrimba course / Digital Business Card

Well, here’s another week of not posting daily and bundling it to a long update. I have had quite an eventful week relationship and work wise. This week I spent time with old and new friends and I loved every moment. I also won an award for outstanding quality of service at my restaurant and received a promotion to bar manager.

I suspect next week will not be a long post again since I’ll have more of my days starting early in the morning rather than the afternoon. There’s something about only getting an hour of coding done (which I know is the challenge, but it still feels minuscule) that makes me feel unaccomplished for the rest of the day after posting an update. I have a feeling I’ll try this challenge again after the 100 days are done and make a rule to post every 3 days or even every week to see how much more or less productive I am.

Anyway, I spent most of the week on Scrimba. It’s amazing that it’s free. I had to push myself into “tutorial hell” again but I’m glad I did. The interactive development environment really makes the learning stick. Especially because I’ve gotten enough out of my learning to feel confident starting react projects from scratch. I might post daily updates next week because I have a feeling these projects the course helps you create will be super interesting to build. Just building a digital business was awesome since it was the first time I did something from absolutely nothing. All the dependencies, file structure, CSS, and components were off the top of my head (and my savior Google).

When I blow up with that software developer pay, Scrimba is getting a juicy donation for sure.

Day [41-47/100]

• October 31st - November 6th, 2021
• Time spent: 9 hours
• Main projects: Personal Portfolio, Team Treehouse React Project, Scrimba React Project

This was a very interesting week. Shaded by a season and outlook change, I went from feeling like I was not cut out for this to understanding key concepts on a day to day. I think that's what led me to wait a whole week before posting this update. I would start building something and the lose momentum when I encountered a bug. The next day I would have a late start and realize that I just needed to study some core concepts to get back on track. Day after would restart the cycle.

I did learn how React is actually working under the hood by starting a project with a simple html file and nothing else. Even imported the React and ReactDOM libraries via CDN instead of using npm. That has been extremely useful. I'm still figuring out CSS honestly. It's barely a language, but the concept of design is really throwing me off. Maybe this will just be something I have to practice day in and day out, like free throws for a basketball player. That's why I was trying to learn Chakra UI or TailwindCSS, but it just got me more confused.

The result of a week of coding is several projects that are unfinished due to various errors, it feels like I'm playing a complicated game of Sudoku. Right now is the stage where all of the obvious guesses have been placed and I'm just writing in notes for where numbers could be. If you don't play Sudoku, maybe Solitaire is a better example. I'm just pushing until all the cards line up and I can click my way to completing everything.

Day [37-40/100]

• October 27th - 30th, 2021
• Time spent: 6 hours
• Main project: Personal Portfolio
• Concepts researched/learned:
• Figma
• Node.js (npm and package.json file)
• Chakra UI documentation
• Next.js documentation

After the difficult last weekend I had, I decided to just throw all of my attention at creating a portfolio from scratch for two main reasons:

1. I use me not having a portfolio with some projects as an excuse for not networking and reaching out to employers.
2. I've tried to follow a tutorial for a portfolio 4 times now and I don't feel like I learned that much. Diving in the deep end building from scratch seems like the next step I have to take.

One key takeaway I have is that grouping these updates into several days has been great for my mental health. Posting every day even though no one looks at this has been a strain on my confidence and motivation. I felt like I had to keep one-upping myself, not to mention the time it took to write out a blog update, create a cool gif, and write a concise Tweet. If you are reading this, hi! You're a real one.

Day [34-36/100]

• October 24th - 26th, 2021
• Time spent: 4 hours
• Main project: React-Next-Firebase Course debugging

I was pretty excited to work on this course and project since the final result seems like something really useful for me to learn and to showcase. Here comes the but. I think it's a mix of the pace of the course and the lack of question support that really confused me along the way. I had to make decisions such as:

• Do I go deep into the Firebase documentation to try to build out the project myself?
• Should I clone the final project repo and troubleshoot from there?
• Is it worth me going through this course if I'm just debugging a tutorial? Could I be spending my time better?

I spent time on all the bullet points above, but to no avail. I don't doubt that if I spend more time on Firebase and Next.js, I'll eventually figure it out, but it's apparent that it'll likely be a bandaid fix and I won't understand the underlying problems. For example, I'm not exactly sure how to configure a package.json file, I've been installing what's been shown to me. I went through to get a better understanding of Next.js, React rendering, the DOM, Node.js, and it's a bit demoralizing. I think I know a lot more of what I don't know and now I'm trying to formulate a plan of what to do next so that I don't give up altogether.

TL;DR

After an arduous week of debugging, research, and personal distractions I haven't been able to get the final project working from the Next.js/Firebase course. I'm going to really start at the bottom of the tech to understand why things are breaking so that I can go in and fix this project, finish others, and build something truly from scratch.

Day [33/100]

Day 33 Twitter Post

Day [32/100]

Day 32 Twitter Post

Day [31/100]

• October 20th, 2021
• Time spent: 2 hours
• Main project: React-Next-Firebase Course

Takeaways:

• Firebase is great, and I can't believe it's (mostly) free. I would assume it's not a great option for any business at scale, but for prototyping projects, it's amazing how easy it is to set up.
• Dynamic routing makes a lot more sense and frankly so does a lot of React when I have the React tools on Chrome open as I'm working.
• It was great to start this project without Next or React installed onto the file. It was actually a blank text file, no boilerplate code given at the start (other than CSS, which is understandable.)

Challenges:

• I got lost in the resource material for a bit trying to figure out Firebase v8 v v9 until I realized it'll probably be covered in the course material later on. Which proved to be true, but I don't think it was all a waste.
• It's unfortunate that I went through the stresses of thinking I'll have to spend just as much time learning back-end because I didn't really understand BaaS. Some might frown upon it (probably mostly back end engineers), but it's going to make building useful apps for a portfolio a much quicker process.
• Tutorial hell... I might be in it. However, this course is moving at lightspeed, so I won't be here long if I am.

Day [30/100]

• October 19th, 2021
• Time spent: 4 hours
• Main project: Next.js portfolio

Takeaways:

• I think I can just use a version of the Hero section on a portfolio of my choosing. I'm considering building the portfolio without the template now that I've spent hours on this template with little changes to show for it. We'll see how I feel tomorrow.
• TailwindCSS is tough, but dark-mode and the lack of CSS files is very convenient. I think it'll be worth learning.
• It seems worth buying the TailwindCSS and Next.js course from fireship.io, these are both technologies I want to focus on.

Challenges:

• It's hard to find something that exactly fits what I'm looking for: a portfolio including a blog built with Next.js that leads you through it for the most part. I guess that's the barrier to entry I'll have to overcome.
• I really don't want to do the client work since it's not very related to the project, but the money and project showcase would be nice.
• I can go through a Next.js tutorial and understand how things are being done when shown to me, but the retention of these concepts seems unattainable.

Day [29/100]

• October 18th, 2021
• Time spent: 1 hour
• Main project: JS A&DS Curriculum - Intermediate Algorithm Scripting

Takeaways:

• It's going to take more than just reading about algorithm scripting in the freeCodeCamp challenge description to understand this, I have to go do my own research.
• These are fun challenges to try to complete, but I don't think they should be a focus right now. It seems better to focus on getting the portfolio done.
• Starting to work is more important than what I'll actually do after I start. It boils down to the Do-Something principle I first heard coined by Mark Manson.

Challenges:

• I am not very good at algorithm scripting... this is where having a C.S. degree would really help, but that's now something to focus on.
• I feel like I'm at a roadblock. I need a portfolio and I need a good way to add to it.
• So many things to learn, so little time, maybe I need to pick up some guidance or mentorship on what to focus on next.

Day [28/100]

• October 16th, 2021
• Time spent: 1 hour
• Main project: JS A&DS Curriculum - Functional Programming

Takeaways:

• The .map() .filter() and .reduce() methods are making a lot more sense going through this curriculum than they ever did before, but it's not perfect. Still need more practice.
• A lot of functional programming is just knowing when to use what tool in the arsenal of methods to solve a given problem. That's obvious to say, but it's really a matter of repetitions until you know what tool is right for the job instinctively.
• I rearranged this blog post or whatever it'll end up being so that it's actually a useful resource for rereading what I did recently.

Challenges:

• This curriculum is starting to burn me out a bit, I think that's tutorial hell creeping in without me noticing.
• I found myself checking the hints very often because I still don't have enough practice to dive in. I don't see the individual actions that are performed by the methods many times which isn't making it easier to get comfortable.
• I briefly started the Intermediate Algorithm Scripting... that is going to be a LONG one.

Day [27/100]

• October 15th, 2021
• Time spent: 2 hours
• Main project: JS A&DS Curriculum

Takeaways:

• Functional programming makes a lot of sense, and why you would want to avoid mutating data inside your code. I feel comfortable with these new ES6 methods for the most part.
• I looked through courses online that build one project from start to finish. There were some good resources on Python web scraping and a Gatsby portfolio. I think I'm just going to get something made for intermediate prior knowledge so I can get it done quicker.
• It feels good to be back in the habit of coding after that 5 day break. My mood and confidence are definitely better, but a little stressed about missing more days like that.

Challenges:

• In these arbitrary code examples, object oriented programming doesn't really make sense. I need to research if there's practical uses of the constructor/prototype examples provided. I kind of just followed the steps but couldn't see how I would get there myself and why.
• I gotta get new headphones. I like working not at home most of the time because there are less potential distractions I can indulge in, but the crying babies and weird conversations keep drawing my attention.
• I still haven't gotten around to organizing the portfolio and my learning on Notion. I did start using my calendar more, but for the sake of retention, I need to make that a priority.

Day [26/100]

• October 14th, 2021
• Time spent: 2 hours
• Main project: JS A&DS Curriculum

Takeaways:

• I have a good understanding of array methods, as well as inline arrow functions. Without those, none of the challenges would have been possible. It feels good to finally be able to use those skills on a whim.
• I didn't understand why algorithms were so crucial a skill until now. Even these basic ones are mind-benders, so I can see why they might be easy test questions for a company to test programmer proficiency.
• I'm a huge fan of the work flow of algorithms, it reminds of why I enjoyed difficult math classes in school. It has the satisfying feeling of completing a difficult yet objectively solvable puzzle that I don't encounter often in the other work I do.

Challenges:

• Algorithm scripting is TOUGH. I read the challenge and more than half the time I think, "...what?". So then I look at the hint which helps me, but it's still a process of trying to figure it all out. This might be a time where writing code process down first is necessary.
• I don't know if there is a better way I could have prepared for this section of the course, I felt out of my depth on exactly which method to use. Once I saw it in the hints, I recognized where I should go but not before that. I guess I just have to do more practice problems until I notice patterns.
• Trying to combat losing track of time, I still haven't been able to get a second run in this week.

Day [25/100]

• October 13th, 2021
• Time spent: 1 hour
• Main project: JS A&DS Curriculum

Takeaways:

• This curriculum is fantastic, my comfort with using JS for logical challenges is already leagues ahead of where it was a week or two ago.
• I had a great idea of something I could build that is not only useful for a portfolio project, but I could potentially build out into a business. I was struck by how people just made software, the ideas always seemed to simple to be discovered first. I won't go too into depth, but it'll require learning Python probably to build the functionality since it has to do with web scraping and notifications.
• I have a much better understanding of nested for loops after today. I actually used one without instruction and didn't get absolutely dumbfounded in the process.

Challenges:

• After a long hiatus due to travel / work / relationships / car issues, I was a little terrified of getting back to coding. It took a lot of self-talk to convince myself to keep the challenge going. It was difficult to not beat myself up over the wasted time I could have spent on this, but at the very least, I didn't give up.
• With all of the things going on in the background, the distractions have been creeping in pretty easily. Need to keep them at bay. Losing my headphones didn't help.
• The main reason I need to focus on reducing friction with coding is so that I don't have to sacrifice my health in the process. My diet and running routine are sub-par.

Day [24/100]

• October 8th, 2021
• Time spent: 3 hours
• Main project: JS A&DS Curriculum / Dev Business Organization

Takeaways:

• I had a lot of time to burn at the airport this day, about 7 or 8 hours. I spent almost half the time on entertainment and organization, but the time spent on code was going through challenges and looking into topics through exploration on Twitter and other sites.

Challenges:

• This is a meta-challenge I'm facing, but I spent too much time between doing the work and writing the post to recap to really remember. This will be a shorter analysis day.

Day [23/100]

• October 7th, 2021
• Time spent: 3 hours
• Main project: JS Algorithms and Data Structures Curriculum

Takeaways:

• I'm excited and terrified for when I finish this curriculum. It doesn't exactly feel like tutorial hell because this is a concept that I mostly glazed over when learning React. It seems extremely useful to propel me to actually make things in React.
• ES6 functionality like object destructuring, arrow functions, and template literals is super useful. I wish I spent more time on this earlier.
• I need to be documenting the key nuggets or tricks I find in this curriculum. Still trying to work with Notion...

Challenges:

• I don't really see the purpose in regex right now, the curriculum didn't show why knowing the complicated syntax is something that is important. I ended up copy and pasting on some of the challenges because memorizing this new language with dozens of operators and conditions seemed like a waste at this stage.
• Classes in JS still seem like a useful feature, especially with the use of hooks in a framework. Maybe I'll encounter something that requires classes later on.
• Some of the topics I'm learning really seem like they're useful to pass a test or coding interview, but don't make sense in the sense of project. Maybe I should be focusing on the problem solving aspect instead.

Day [22/100]

• October 5th, 2021
• Time spent: 3 hours
• Main project: JS Algorithms and Data Structures Challenges

Takeaways:

• First and foremost, I was feeling pretty bad that I couldn't stick to a consistent scheduling of coding every day. I thought I was just bad at this because I couldn't sit down and code for 8+ hours (most days around 3 hours), but I'm realizing that the actual coding of new projects is very mentally taxing so I should take these days in short focused bursts. What a run-on sentence.
• Wow, some of these challenges on fCC had me staring at the screen thinking for about 15 minutes, but they were only just difficult enough to make me think for a while. Eventually, I figured each one out, including the one with recursion. Trial and error, I felt like a programmer for the first time after getting through the first major section. There's about 10 in this JS DSA curriculum.
• The client work is not as daunting when I know I have been figuring out way more complex problems during the challenges. I'm not including that in the time, but I really sped through building a layout for this client's site.

Challenges:

• I have to be ok with not being able to code some days. Things have been coming up, travel is tiring and inconvenient, and I can't muster the courage to take on challenges if I know it'll only be for 15-30 minutes.
• I looked into it briefly, but being able to work on fCC challenges offline would be fantastic. I'm not sure if there's a way to preload the pages because the Github repo for the curriculum doesn't have the validation in the same way I'm pretty sure. Need to delve deeper...
• This first client I took on will be a nice testimonial and pay day, but it is not good for my productivity when it comes to learning programming. I haven't done anything with code for him, but maybe in the later stages I'll be forced to work with the liquid language.

Day [21/100]

• October 2nd, 2021
• Time spent: 3 hours
• Main project: JS Algorithms and Data Structures / JS Challenges

Takeaways:

• I am noticing my JS core concepts understanding increasing with every unique challenge on FreeCodeCamp.org. The ones without guidance or examples are my favorite in the course so far.
• The CSS highlighting feature is something that I'll need to keep in my back pocket and has reinvigorated my investment into the JS30 challenge I'm going through. I want to learn more about how to make the responsive nav dropdowns.
• My general idea of this #100DaysOfCode has really shifted from adding a little bit more each day to doing things with the possibility I'll completely scrap the idea and stick to what is now working.

Challenges:

• Some time was burned just trying to figure out what I did from the previous days. Although this running list of days is a great way for me to solidify my understanding and record my progress, I need to be taking small notes of things I get done as I do them. Almost like git commits. Tomorrow, I'll spend time on Notion before I start working.
• I don't allot enough time to write about each day's takeaways and challenges. Overall, I need to set a schedule for when I'll be coding or when I'll be writing. Two very different types of work and task switches kills my productivity.
• I couldn't quite understand what the top and left CSS attributes were. I was trying to make the highlighted rounded box have a bit more padding, but I realized I was using a band-aid approach. That's something to look into.

Day [20/100]

• October 1st, 2021
• Time spent: 1 hour
• Main project: JS Algorithms and Data Structures / Organization

Takeaways:

• I spent the day prior and this day organizing how I want to use social media moving forward. I'm not 100% finished with that plan, however, I now have matas.bio.link to show for it and looked into the usefulness of Hashnode as a platform.
• I've been avoiding basic code tutorials so I don't get sucked into the quick rewards of completing challenges, but this time I did it with the plan of reading the challenge objective and not the description. That way I'm actually implementing concepts I have already learned to get the challenges done. I was flying through the challenges, so I think I actually have a pretty good understanding JS fundamentals. I'll keep this going.
• I have a broader picture of my short-to-medium term goals when it comes to this challenge. I'm now understanding that everything I do on a day to day should be 100% toward achieving my goal of replacing my income with this work. That way I can actually get to the next level of proficiency by working in the field.

Challenges:

• Time management, however, I did find a what seems to be super useful tool to help me achieve this better. It's called Notion and I got it from reading @codingyuri's blog post about her growth on Tech Twitter here.
• I'll need to automate my gig work so that I'm not sending fully custom proposals and messages to people. I really need to develop a work flow, because my initial proposal to this first client took over an hour and I was not confident on my pricing. Once I have a built portfolio and a work flow, I can really have my pick of the litter without spending all day on gig opportunities.
• I couldn't see myself making much progress on the portfolio in a short amount of time because I'm using so many resources to what seem like minuscule changes for an experienced React/Gatsby dev.

Day [19/100]

• September 29th, 2021
• Time spent: 1 hour
• Main project: Learning JS Concepts / Planning

Takeaways:

• So far I have been avoiding diving deep into fundamental CS concepts, and if you read the takeaways from day 2, I'm not too keen on diving into a really difficult project. However, staying in the middle of the two extremes mentioned leads to little career progress, so I'm implementing a bit of both to my day to day from now on.
• Visualizing the call stack has been helpful to understand how certain things work, can't wait to grasp more of the various functions that can utilize that understanding.
• Gig work is more plentiful the more I look, I could start looking into start ups once my portfolio is cleaned up.

Challenges:

• I have to be careful not to get sucked into the social media aspect of gig work opportunities while I'm reaching out to people.
• I might lose some of these concepts I'm learning about JS, so I probably should start practicing them myself in a test environment.
• The gig work I choose has to be methodical, I burned some time trying to help someone today and I don't think I'll utilize what I figured out today for them.

Day [18/100]

• September 28th, 2021
• Time spent: 4 hours
• Main project: Gatsby Portfolio / Gig Work Opportunities

Takeaways:

• Very quickly I'm realizing the power of reaching out to people via Reddit and some other networks to offer work. I have a meeting with a potential client tomorrow just because I offered to try to help at a very low cost.
• Using GitHub repositories as inspiration and a way to visualize how big projects fit together has been profound.
• Everything I do should be with the focus of getting actual projects done so that I'm not only learning, but building things that I can showcase and hopefully be paid for.

Challenges:

• I can see me running into issues prioritizing the types of projects I will take on to build experience and generate income. I need to continue furthering my abilities and connections to know what the most effective projects to work on are.
• I can't wait to be living alone so that I don't feel the need to leave to coffee shops all day in order to feel like I won't be distracted. Maybe that's just an excuse, but I have been finding myself working at home when everything is closed and everyone is asleep. I'm definitely not a night owl, pretty exhausted just writing this, but I can really focus when there's nothing else to do / no one to talk to.
• I don't quite understand how I would go about using a Gatsby theme or Sass, so I'm sticking with base Gatsby and CSS Modules to finish the MVP portfolio. It might slow me down, but at least I'm making progress and not stuck in tutorial hell.

Day [17/100]

• September 27th, 2021
• Time spent: 3 hours
• Main project: Researching Gatsby.js / CSS / JS Challenge

Takeaways:

• After some research, it seems that SASS will be the way to go from now on when it comes to building anything with CSS. It's highly rated by users and the adoption is still going up at a very good pace. Need to spend some time with this.
• GraphQL is more and more useful every time I need to access data dynamically. Right now, it's only a couple of mdx files, but not having to style every page one by one will be huge.
• I think focusing too much on making this site a fully fledged portfolio is no longer the priority. I need to build more and more unique things rather than spend hours tweaking the hub to get to other pages.

Challenges:

• Yet again I finished a tutorial and then spent a while wandering the internet until I found myself aimlessly going from link to link. I need to set a clear objective for weeks to months from now that I can work on when I get lost like this.
• I need to actively curate my social media presence to benefit me instead of waste time. I think I understand that I'm not challenging myself enough if I'm not using Stack Overflow at all.
• Time and task management. I will sit down and make a bullet list of things I want to focus on before I start coding work tomorrow. I got like 3 hours in, but I could have done double with the right structuring.

Day [16/100]

• September 26th, 2021
• Time spent: 1.5 hours
• Main project: Webcam JS Challenge / Gatsby Portfolio Project

Takeaways:

• This is not from this project specifically, but I have had to really think through my priorities and how much of a commitment this 100 day challenge will be. I had to make decisions to put getting an adequate amount of sleep, making time for maintaining a balanced social life, and my fitness above continuing the challenge some days. I prefer to skip a day and continue on later rather than half-ass a day and feel like I'm burning through a challenge that is supposed to help me further my learning. I'm not too worried about getting through 100 days consecutively with no mistakes.
• I again got a better understanding of the canvas element in HTML, as well as being first introduced to the video element. It's as easy as painting the raw data from the video to the canvas with a timer at 16ms (~60fps), and then you can full control over manipulating the data for filters, screenshots, etc.
• I'm understanding the purpose of GraphQL now that I needed to dynamically update the page paths for the portfolio. It's quite useful rather than hard-coding or trying to set up paths programmatically.

Challenges:

• I had to closely follow the tutorial for the Webcam challenge today, there are so many new concepts in this challenge series that maybe I should focus on the raw basics so I'm not as locked into the tutorials.
• It's daunting knowing that I'll need to separate out this portfolio project to separate components for scalability beyond an About page and a Blog.
• I really enjoy programming, but getting into the flow state is something that I struggle with about half of the days I sit down to work. Working on improving that rate.

Day [15/100]

• September 22nd, 2021
• Time spent: 1.5 hours
• Main project: JS Challenges / Gatsby Portfolio Project

Takeaways:

• I'm realizing that I now have a pretty solid understanding of flexbox and basic CSS in general. It took me no time or googling to get my About page to look how I wanted. The thing I wonder is if there are ways I could be setting things up to cut down on repeated code... or if it's even worth it performance-wise when it comes to CSS.
• I realized how simple it is to sort arrays of strings and numbers using .sort(), now I wonder how to implement that with the blog posts to sort the various days on the spot, if that's possible.
• It finally feels like the new site isn't looking absolutely terrible, the about page is really coming together for almost having no content. The buttons look pretty good, I want to replace or enhance them with the actual company logos.

Challenges:

• It took me a while to sit down and actually get to work and then I ended working on the About Page rather than the Posts Page because I knew it was an easier task to tackle.
• I tried to figure out why https://www.matas.io is not working but https://matas.io, http://matas.io, and http://www.matas.io are. It has something to do with SSL certificates I'm pretty sure, but I need to contact support or something because I'm stuck.
• I think my CSS code is already becoming a mess because I didn't set up my layout well, or maybe I should be making separate CSS files for separate pages. OR should I be putting the About Page into a component and then rendering that component in the actual pages folder. That seems like something to look into...

Day [14/100]

• September 21st, 2021
• Time spent: 4 hours
• Main project: Mousemove-Shadow JS Challenge / CSS Proficiency / Gatsby Portfolio Project

Takeaways:

• Making a responsive mousemove element on the page (as well as an editable one) is much easier than I would have imagined. It also led me down several rabbit holes on other CSS tricks I could use and to look into the Chrome Dev Tools more whilst editing CSS.
• Now that I started to use GraphQL to actually query the body of the articles I want to have on the site, I see some of the usefulness of the tool. It really keeps everything organized and concise.
• It took quite a while, but eventually I found how to display my favicon and custom fonts on the Gatsby portfolio, I wonder if there was an easier way.

Challenges:

• I'm not sure what happens to the performance of my site every time I install a dependency but I don't end up using it. I should look up if there's a way to get rid of dependencies I don't need or if it's not even worth the trouble deleting.
• Again, it's difficult to not get distracted chasing a little bug or feature for sometimes hours because it doesn't occur until the end that the time could have been better spent on broader things.
• I'm stuck on the formatString argument and why it's not working on my query. The articles I found were not really helping, now I'm wondering if I should follow a different tutorial or if I should just skip this bug. Probably just skip the bug until later.

Day [13/100]

• September 20th, 2021
• Time spent: 2.5 hours
• Main project: Local Storage Challenge / Gatsby Portfolio Project

Takeaways:

• I created and added an SVG to the site on my own, adding it to the header using flexbox. This was not nearly as difficult as I thought it might be.
• During the local storage JS challenge, I saw just how much work it takes to create something as simple as a dynamic list using Vanilla JS, I'm glad I'm focusing on using a framework so that things like this aren't unnecessarily time consuming.
• It's easy to get lost searching how to do something very specific on a build, but I'm improving my prioritization and instead read up on topics that were more useful to exactly what I was trying to do. For example, Flexbox and CSS Grid.

Challenges:

• I either don't have a fundamental understanding of how CSS works or I'm just not used to how slow of a process it is to get things right. It definitely gets frustrating at times.
• It seemed too daunting of a task to figure out the "clear all", "check all", and "uncheck all" functionality, so I decided to instead work on the portfolio project. I'm not sure if I would've gotten a lot out of figuring that out, but I think my insight is slowly getting better and I felt my time was better used on this project.
• I tried to implement the first JS challenge, the drum kit, into one of the pages on the portfolio. I did get the page rendered and added the basic HTML/CSS, but I couldn't really picture how to move forward with the actual functionality of the keyboard not using eventListeners.

Day [12/100]

• September 17th, 2021
• Time spent: 1 hour
• Main project: JS Challenges / Organization

Takeaways:

• I don't see the value yet, but just finding something to post every day on this blog article is one of the most valuable things I can be doing in the early stages. Builds a good habit and will be more and more valuable as time passes on my coding career.
• I'm understanding the importance of data manipulation and I just discovered how to clone an object, never seen that before.
• CSS Variables are immediately useful, as I picked out a color palette for the portfolio today.

Challenges:

• It was more difficult today than other days to dive into work, I just kept finding myself distracted. Just posting about the struggle and continuing the 100days challenge is a small win, though.
• I feel like I might be in tutorial hell trying to figure out this portfolio project, but how do you not get lost in tutorials even when building a project? I feel like I keep pulling threads and then I get lost in the info it leads me to.
• Again, design for the portfolio is really nagging at me, not sure where I want to go with it. Maybe that shouldn't be a huge worry though and I should move on the ecom store. I want to build something for the upcoming iPhone release so I can try selling some cases.

Day [11/100]

• September 16th, 2021
• Time spent: 2 hours
• Main project: JS Challenges / Gatsby Portfolio Project

Takeaways:

• I can see how I could make my portfolio interactive with Key Sequence Detection, like typing while on the page to find easter eggs or even an on page command terminal for answering questions.
• Slide in on scroll is useful to really create that Apple event like experience on your site. I can see how it can be abused, but would be a great way to make the page feel alive while scrolling.
• Getting back into working on the portfolio is making me realize how to original site template I used works. There is a data layer that I wasn't seeing before, but now that I understand some of the simple functionality of GraphQL, it's starting to click.

Challenges:

• It took me quite a while to wrap my head around the .splice() and .join() methods even though they are pretty simple, not to mention everything being wrapped in a .forEach() method. Maybe a CS degree would've helped with this...
• I'm struggling to think of how to style the portfolio using the tools I'm learning rather than brute-forcing it. There's an elegance to short and intentional code that I'm trying to internalize.
• I'm still not 100% on the usefulness of using gatsby-source-filesystem to move simple data within the file, maybe this will be more important when I'm introduced to using a CMS.

Day [10/100]

• September 15th, 2021
• Time spent: 1.5 hours
• Main project: Building a Custom Video Player

Takeaways:

• I didn't realize that you can just build video functionality from scratch like this, I always assumed the video processing was very complicated and embedding was essential.
• I could see adding some video functionality to my own portfolio where you could click on various buttons on the site to control a video story in the background.
• I finally understand creating a flag variable to make it so scrubbing is only active when the mouse is down AND moving.

Challenges:

• I didn't have the time to explore a couple functions that I know will likely be a challenge to figure out, like showing the volume slider in a pull-up bar and changing the playback speed to pre-set buttons.
• I couldn't figure out how to set a max-width and max-height that kept the consistent 16:9 ratio. Maybe by using a container div to lock the max-width.
• The progress bar starts at 50% not 0% when the page is first loaded, not sure how to change that still.

Day [9/100]

• September 10th, 2021
• Time spent: 30 minutes
• Main project: Learned Dev Tools Tricks

Takeaways:

• So many of the things I am taught are only surface level, but it makes sense why console.log has the '.' in the middle, it's one of many methods.
• I keep being surprised for some reason just how much functionality the browser has and how much data you can work with.
• Even when it's 2:30 in the morning after a 20 hour day filled with work and necessary errands, I can still sit down and do something to continue the workflow streak.

Challenges:

• Remembering that I can use these tools to enhance my workflow, I guess it will just take time and revisitation.
• Finding the time to build something or code every day with a work / life balance, as well. I know that it will be a struggle to have this balance on my upcoming 4 day trip with friends.
• Being ok with just doing 30 minutes when I committed to an hour. Could I have just sacrificed more sleep, is that worth the several day negative effects?

Day [8/100]

• September 9th, 2021
• Time spent: 2 hours
• Main project: HTML5 Canvas & Gatsby Portfolio Project

Takeaways:

• I was able to do something as add a button with styling without almost any instruction that also had functionality. It was a satisfying step for me after going through several of these JS challenges.
• You can loop through if statement by just have a changing event. For example, every time the mouse is clicked down AND moved, the function to draw is activated, so then I can change the color as the draw function is running.
• I could see how it's possible to build a drawing app like awwapp.com

Challenges:

• It was difficult to align 3 elements in the header bar that would have the middle element spaced directly in the center regardless of the size of the button and text on either side.
• I was not able to figure out how to make the canvas only the height of the viewport and also have a header. Once the header was added, the canvas would extend that height below the viewport and you would have to scroll on the page to see all of it.
• I'm still not 100% on how I created a flag that only ran the function when clicking down AND moving.

Day [7/100]

• September 8th, 2021
• Time spent: 2 hours
• Main project: Array methods & Gatsby portfolio project

Takeaways:

• Array methods are really useful, which sounds painfully obvious for anyone with any experience with them, but seeing them in action is another thing.
• The Gatsby tutorial is very well written. I got such a strong understanding of the core concepts that I've spent hours trying to digest. When confused on a topic, I really need to read on it through several sources.
• React components and pages are making much more sense. I understand that I can create a component that holds the individual project and insert it straight into the Layout component. I wonder if there's a faster way to add in the data to have a project component that maps the different projects' data.

Challenges:

• Not sure how to make the Link component be highlighted differently if that is the page that is currently displayed. Not much luck googling it, yet.
• Still can't imagine how I would implement the actually JS projects onto separate pages on the site, or even several on one page...
• Design and UX is a huge thing for me to work on. In the process of reading the book "Steal Like An Artist" because I'm having difficulty finding ideas and inspiration out of thin air.

Day [6/100]

• September 7th, 2021
• Time spent: 1 hour
• Main project: AJAX type ahead form

Takeaways:

• This is by far the best understanding I have had of the fetch API because I console.logged every step of the way. Quick note, I can put the fetch link in a const so that it's easier to read.
• I learned some things about regex or regular expressions that allowed for word matching. Need to dive deeper on this.
• Using the span element and the .innerHTML property, I'm able to update the DOM on every keystoke which is when the .map method runs.

Challenges:

• I couldn't picture where to go to get to the end result of this challenge so I had to follow the instructions pretty closely. I'm not sure what the best learning method from here is, whether I should rewatch or try to dig deeper into forums.
• I'm not sure I would have had the foresight to find the function needed to add commas to the population data, I need to spend more time on my search skills.
• I need to make better comments, I'm already finding myself forgetting some of the functions I built in challenges a couple days ago when I go back for reference.

Day [5/100]

• September 6th, 2021
• Time spent: 3 hours
• Main project: Practiced array methods / Flexbox and JS

Takeaways:

• The array methods haven’t made this much sense to me, mainly because the challenges I’ve done in the past combined too many concepts at once.
• It’s relatively simple to create animations by implementing event listeners on elements with transform attributes using flexbox.
• Gatsby.js seems like a good framework to explore for building out the portfolio since it has faster static site generation, lazy loading, and it populates the page with the HMTL/CSS before hydrating the rest of the function.

Challenges:

• The flexbox challenge already had some of the CSS prebuilt which makes it so it doesn’t 100% click on how the transformations were set up.
• The array methods made sense when using local data, but I can’t really picture moving to external data or even markdown file names which is the goal.
• Timing and consistency were something I was definitely struggling with yesterday. Although I have a pretty rough sleep schedule, I still feel like I could have doubled or even tripled the amount of time I spent on this yesterday. As the evening hit, I lost my energy to keep going, which I can see hindering me in the future. I might try to work in a well lit place at night when this happens again.

Day [4/100]

• September 5th, 2021
• Time spent: 1 hour
• Main project: Built a test page for CSS variables

Takeaways:

• Data attributes. You can create your own attributes so that for example you can add a 'px' suffix to a value being updated.
• I'm less timid about updating CSS selectors to make the page fit my needs.
• I looked through the addEventListener documentation and saw a simple build of drawing with JS and CSS.

Challenges:

• Figuring out how to make the color wheel update realtime like the input sliders.
• Not sure if it's possible to make the spacing slider go off screen in all directions rather than extend into the bottom right.
• Still not 100% on the uses of the dataset attribute.

Day [3/100]

• September 4th, 2021
• Time spent: 1.5 hours
• Main project: Built a simple JS/CSS powered clock

Takeaways:

• You can directly interact with CSS from a JS file, updating very quickly.
• It's very convenient to modify CSS attributes in the 'inspect element' section of Chrome Dev Tools to figure out a Bezier curve for a transition, for example.
• Many beatiful features of a website take so little code to implement.

Challenges:

• Modifying the existing CSS to make the hours hand smaller. Couldn't figure it out in the time I was working.
• How to add these functions within a React component.
• I spent the first part of this session looking into how this blog's underlying code works. I'm not really understanding how Nextra is built based on the provided documentation. Then I looked into what it would take to build this exact site out from scratch, importing MDX functionality myself. I think that'll be an instructive journey.

Day [2/100]

• September 3rd, 2021
• Time spent: 3 hours
• No main project
• Spent too much time on figuring out the crypto code until I decided to take a simpler approach. That led me down a road of learning about the various wallets and exchanges, but I'm locked out of deploying the code until the funds clear.
• Spent the rest of the time focusing on sharpening my JS skills, I think that'll really improve my React.js understanding.
• Built a simple drum kit on a static page using JS, using #JavaScript30

Takeaways:

• It's important to set out a roadplan for the day of learning and/or building. Otherwise, you'll get lost chasing links and ideas.
• You can write JS scripts right in the HTML file. In reality, I breazed by JS months ago and went straight to React.js, this is really making things click already.
• I need to be using console.log() way more than I have been during practice projects. The course made it clear how he got from just listening to an event to the final result.

Challenges:

• Figuring out how to deploy a static site using Vercel. Ideally, I would want to have all of these challenges either part of this site or easily linked.
• Trying to understand how the file structure needs to be laid out for deployment.
• (Crypto Project): A greater understanding of Solidity and in general blockchain will allow me to feel confident on creating an ERC-20 token.

Day [1/100]

• September 2nd, 2021
• Time spent: 3 hours
• Main project: Building a very basic cryptocurrency named MatCoin

Takeaways:

• The source code/algorithm is not the same for Bitcoin and Litecoin.
• An understanding of the underlying tech is not essential, so I'm now wary of any altcoins I see.
• This technology is really exciting, I'm quite interested in seeing how this algorithm works under the hood.

Challenges:

• Never written anything in C or C++, had to very closely follow the tutorial to avoid syntactic errors.
• Still researching the economic implications of mining limits.
• Understanding how to start something like this from purely following the breadcrumbs rather than a step-by-step tutorial, but I think that comes with time.

‍