Yes! I decided to take on this challenge. Hopefully by the end of it I will be a more mature coder 🐲
Progress: Did the small code challenges from freecodecamp.org on the basics of HTML 5 and CSS. Learned about CSS variables and tinkered with them a little.
Thoughts: Going back to the basics is more time consuming than what I initially pictured. Finding the right color palette is a tough task, I think i spent a good 20 minutes along with finding a good font. Thanks to this I now totally dig the way the colors change seamlessly with CSS classes.
Progress: Beat all the challenges for the applied visual design on free code camp and came up with a little extra feature of their heartbeat animation. Learned about CSS position and practiced keyframes.
Thoughts: I always wondered how some of the illustrations I've seen in codepen even began to exist! I mean, there are some pretty crazy designs that just blow my mind when I learn that they have been made with only css and html. Today I broke through that fear and frustration. I enjoyed hacking together the heart and the moon with just CSS, maybe in the future I will dive more into that not so much obscure world.
Link to work: html
Progress: I went over the accessibility challenges in free code camp and learned how to use the HTML 5 audio element (see code pen 1). I successfully implemented the border from the middle effect using relative and absolute positioning and ::after pseudo selector (see code pen 2).
Thoughts: I'm really onto something here. I like the fact that I'm understanding positioning better and I'm becoming a better CSS coder. I really look forward to the next lesson on responsive design in which I hope to code my very own toggle menu button and navbar.
Link to work: code pen 1 code pen 2
Progress: I didn't go over any material on this day. However, I got in touch with some folks from the slack channel of Socket.io and explained my struggles for my game. I decided not to wait around and hacked a way to do a user confirmation by using a sort of handshake method. User 1 sends a requests and listens for confirmation. User 2 gets to decide whether to reject or accept. When User 2 accepts a confirmation to User 1 is sent, and the timer in both ends starts. Both players get 5 seconds to select their card and then they send each other their responses which in turn gets computed with the logic and they get their results. I wish there was another way of simplifying this process, but for now this will do 😕.
Thoughts: I didn't spend as much time as I would have wanted to. The code doesn't look pretty at the moment but I hope that when I get all the functionalities working I can focus on refactoring and making things more efficient. Today was a kind of down and slow day for me. Hopefully tomorrow turns out better.
Link to work: Rock-Paper-Scissors
Progress: I worked on the responsive design tutorials on free code camp and ended up making a pokeball illustration with css.
Thoughts: I need to dedicate more time to flex box and all this responsive design since most of it is a little foggy in my mind.
Link to work: pokeball
Progress: Today I felt like taking some inspiration from dribbble and try to mimic some design. I decided it was time to try creating new shapes other than circles in css so I decided to do a coffee cup.
Thoughts: Every day gets harder to make some time for this challenge. I fear that once the break is over I won't be able to commit to it 😟
Link to work: starbucks coffee cup
Demo: 
Progress: I've gotta say that today was both challenging and highly productive. I've been wanting to put a web page together to showcase my work but I always had difficulty finding the best tools that will allow me to use React and the hosting wouldn't cost me much. Thanks to Gatsby.js I'm able to create a fast static site on React, and thanks to Netlify I'm able to share it with the world with $0 cost. I didn't finish the entire site, I'll keep adding more stuff incrementally here and there but I'm proud of how much I got done today. The site is still not responsive tho 😰, that will be my next move.
Thoughts: The more I learn about Gatsby and all the buzz about serverless sites, the more I get curious about its capabilities and limitations. I'm thinking of coming up with more projects that use Gatsby and this new serverless infrastructure to see how it performs.
Progress: I added some media queries on the navigation bar and added a hamburger menu to the mobile version of my site.
Thoughts: I didn't get as much done as I would've liked but dealing with media queries can sometimes be cumbersome, specially when using css modules. I hope to finish the responsiveness the next day I work on it.
Progress: Today was a very productive and information day. I added the final tweaks for my site to be responsive, what's missing now is the content that is going to make it special. Now that I got the foundations down, I hope the next stage won't be such a conundrum.
Thoughts: I failed many times trying to add a feature and by the time I realized that adding such feature beyond my scope, I had already wasted 3 hours trying to make it work with different methods. On the bright side, thanks to that I learned a bunch stuff on Gatsby, like how to pass state with links and I also learned how to add maps from mapbox.
Progress: Got button selection and main views done, no scoring system in place.
Thoughts: I feel like I'm cheating by counting this as part of the challenge but honestly I spent quite a few hours coding so I said: why not?
Progress: I managed to hack away the multiple answers feature required for this assignment but I didn't get to save data on the phone. Will learn how to in the next assignment.
Thoughts: I'm starting to become familiar with the android development architecture. I used to spend hours just to get a simple feature to work, now its more seamless and effortless (depending on the level of complexity for a given feature).
Progress: Merged some React components with their respective SCSS modules into styled components. Added some more components for the next generation of the game.
Thoughts: I'm really psyched about using styled components throughout my entire code base and experimenting with the ThemeProvider component. I really wasn't aware of the fact that you could use scss syntax in a styled component, that's an awesome feature and it totally sold me out.
Progress: I decided that styled components are the way to go for styling on my website codebase so I changed most of the components to styled ones. I left some navbar components as scss modules because the scss was quite long and I thought they should stay separated once they become quite long.
Thoughts: Its starting to get very difficult to keep up with the school's workload and this challenge! However, I am not ready to quit. I need this to become a better developer so I will keep pressing forward and taking short breaks here and there.
Progress: I started digging into what react-spring is all about and did some minor spring effects for the "creative corner" section of my site.
Thoughts: I really want to learn how to animate svg elements with this library but I don't know enough of svg to be able to understand the examples I've seen online.
Progress: I went back to a udemy course I had purchased last year and went over the ajax requests section to pull random quotes and random images from an API. I used the jQuery library to make the requests less verbose and easy on my end.
Thoughts: Touching base with the good old jQuery was refreshing considering the fact that I haven't really used the library ever since I started learning react 8 months ago.
Progress: Fetching data can be done in a variety of ways, too many for me to remember honestly. This is the reason why I decided to refresh on some of the options I have and compare them in one simple page. For this day I used fetch, axios, jQuery Ajax and XMLHttpRequest to send a get request to a random design quote API. Then, once the data had been fetch the quotes is updated.
Thoughts: Today's lesson was very useful even though it felt really lightweight. I think that whenever I have my doubts about fetching some data from an API I will find myself looking back at the examples I coded for today.
Progress: I started an API for questions. The main purpose is to store questions and answers for an interactive presentation. I want to display the participants answers real time after they are done answering the questions in the middle of the presentation. I managed to set up 2 express routes with connections to an MLab database. I still need to add a way to post answers to the database.
Thoughts: Its been a little while since I've done backend stuff and I've gotta say that node js makes is very simple and easy. I saw a video from Wes Bos not too long ago where he used es6 syntax in his nodejs script and I decided to find the video and copy how he did the set up (which is very minimal). I ABSOLUTELY love how es6 syntax looks on node!
Progress: Today I decided it was time to start playing around with GCP. I went back to a very brief tutorial I've followed in the past that showed how to use docker with an express API. I did exactly that and managed to deploy it, it took me about 2 hours to figure it out but their guides are highly useful and friendly so it was definitely because of my level of understanding on Kubernetes. However, I did not end up using the deployed docker instance since google didn't provide me with https connections right off the bat I had to turn to Heroku.
Thoughts: I didn't get as much work as I had hoped. In fact I didn't finish the presentation, I just didn't have enough time to do what I wanted and I didn't want to present something halfway done so I ended up not developing it further. I plan to automate this process for later use because I think it is very useful. Presentation
Progress: I spent a good amount of time learning more about containers and a little bit about Kubernetes. I started a new course on docker in pluralsight and got the basics down. Since I'm running the commands on the terminal I don't think it'd be of any use adding that code in a repo so instead I added some more notes in my note-space repo where I post all my notes on technologies I'm currently learning.
Thoughts: Containers are cool. It seemed like such a daunting topic not so long ago but just diving right into them and poking around really helps me understand the full picture. I am by no means close to understanding the full depth of complexity and the power of what Docker can do but I am grasping the concepts and enjoying it. Can't wait to master this new technology and come up with new exciting projects!
Progress: I followed a small tutorial on how to set up your very own webpack config for a React app. No fancy stuff just your regular ES6 to ES5 transpiling and an html loader. Might add hot reloading later.
Thoughts: Prior to this tutorial I had followed some instructions from a book published around 2015 and the information was obviously outdated. Back then I was really frustrated at how webpack worked because of the outcome from following the book's instructions. Now, is a joy looking at how easy it is to get started.
Progress: Today I dived back into the arduino world. I created a small program and hooked up my arduino board to display my name of a LCD screen. By far the coolest hardware mini project I've done.
Thoughts: Where to begin?! Thanks to an extension called PlatformIO in VSCode I learned that the arduino programs are written in C++ so all the programs I've written for my arduino in the past were all written in C++ without me realizing it! I was dumbstruck by this epiphany. Through this mini project I realized how much I like working with hardware, I feel right at home and the code feels like its on another level since you are seeing physical objects being affected by the code you write. Which is AWESOME! I plan to do some IoT stuff in the future once I master this crazy art of tinkering with components and boards.
Progress: The day for me to play with Typescript has finally arrived! I went over 2-3 modules on plural sight about Typescript and took what I learned from there and implemented my own two scripts and compiled them down to JS manually.
Thoughts: I like what Typescript offers, however I feel like I am not at the level in which all the type checking makes a massive difference in my workflow. I wonder how a React app would look with all the extra syntax, I'm used to using propTypes to handle the majority of errors and bugs related to type checking. So... I don't really see the benefit of adding yet another layer of abstraction. Maybe as I learn more and use it more I will find that out for myself.
Progress: Oh boy did I put in some hours here! I basically deleted 1 section of my website and changed a creative section to be more of a project section. I made these changes based on other web portfolios that I've seen around and that I really really like. I also tried using devicons with gatsby but failed to do so.
Thoughts: Some things will not always come out the way you want them and some features, sadly, will take more time that you had initially intended to invest. I learned this when I had to import all the icons for a "things I used" section in my website manually! I tried using the CDN from devicons but I couldn't figure out a fast way. I also tried using react-devicon but I kept getting more errors—which I think are gatsby related but didn't really want to invest the time in digging the issue, just wanted to make sure my feature could be implemented today. SO! I had to do it manually and at last it worked. Will probably revisit this in the future to see if any better implementations have been discovered.
Progress: Completely remade the navigation bar. Used Sketch to prototype and design it and then I tried implementing it with html and css.
Thoughts: Inspired by app designs I've seen in dribbble, I decided to give my unpublished website a fresh new look. CSS grid made it possible and a lot simpler than I thought. Next step will be to convert this html and css into react code that GatsbyJS can render and package together.
Progress: I went back in time and revisited my chat room app and made some major changes. First the file structure was thought out really bad, I was just learning how React and Node worked back then. I divided the src code for the react app in its own src folder and the backend server for socket connections also got its own directory. I also started using more es6 syntax in node through the use of esm so I converted from es5 to es6 in the backend.
Thoughts: The feeling of looking back at old code and finding out how naive I was and how I am able to spot the mistakes I made in the past is amazing! Through it I can see how much I've grown, it reinforces the fact that all this time coding has not been a waste. I actually know what I'm doing now. I think I will be reopening half-finished projects from the past and giving them a fresh new life with the knowledge I now have.
Progress: I worked on learning how async await works and implemented it at a project for one of my jobs.
Thoughts: I'm still pretty fresh when it comes to async await. It wasn't until recently that I started seeing it more in codebases that I follow, then I realized how convenient and efficient it can be.
Progress: Went over the documentation for the theme api in styled-components and implemented it in my own way.
Thoughts For some reason, I think the new styled-component library has broken my vscode. It takes forever to load and in some cases it doesn't even load. I need to find out what's wrong with this because its killing my workflow. Besides that, the theme context api is pretty straightforward I like it.
Progress: Not much. It was a frustrating day. I ended up trying to implement the library react-beautiful-dnd to do it but I ran out of time and left it half way done.
Thoughts Today felt like a total defeat. My vscode for some reasons is not working at all. Whenever I import the styled-components library into my project, the whole thing stops working!! I even had to uninstall vscode several times but with no luck.
Progress: Implemented a simple drag and drop component with the help of react-beautiful-dnd.
Thoughts The implementation still has some bugs but I will take some time to go over them later. Right now, my priority is to fix my problems with VS Code...
Progress: Worked on updating the syntax of the backend API to comply with es6. I used esm to help me run imports/exports part of the code since node hasn't catch up to this feature yet.
Thoughts: Is the second time I refactor an entire codebase that I've created in the past. It feels good to know that the stuff I have been learning are being put to good use when I do these major refactoring and restructuring tasks.
Progress: I mostly worked on a website's flexbox model. Did some CSS icon creation and even a custom React selector.
Thoughts: We take the small things for granted. The little icon hanging next to a link. The way a selector looks different from a regular one. All these things are really complex in their own way. After implementing my own selector, I notice these little things more and stop to admire the work developers have put into it.
Progress: worked on 3 problems in leetcode. Two of which were based on data structures. I coded the solution in Java.
Thoughts: I am not finding it easy to wrap my head around these problems! One of the reasons that contribute to this conundrum is that I haven't reviewed my data structures in a long time and I don't code in java regularly. I guess I need to get back on the horse and spend more time doing java and data structures.
Progress: decided to revisit the todo app and add proptypes all over for better debugging and as a way to practice how to use the prop-types library.
Thoughts: not much here, it was more of a practical session thant anything else. It was fun! 😄
Progress: successfully deployed the todo app on github pages!
Thoughts: It took me incredibly more time thant I had anticipated. The settings of my previous todo app repo were giving me a hard time deploying the app so I decided to create a brand new react project with the existing code. Thankfully it worked!
Progress: Huge milestone here! I managed to implement a fully automatic bot to collect tweets. It turned out to be easier than what I had initially thought.
Thoughts: I'm just glad this bot was finally finished. Setting up a cron job was no easy task and at the end of the day I had to reach out for node-cron and pm2 in order to run the bot at certain intervals and in the background.
Progress: Solved 2 questions on leecode, not entirely by myself if I'm being completely honest. It took me a long time to understand how to tackle the problems. Good thing I know how to work with the debugger. That helped me a lot understand the optimal solutions leetcode showed me.
Thoughts: these problems keep getting harder. I need to practice more!! 😟
Progress: Added a toggle button that toggles between light and dark themes for my todo app!
Thoughts: Styled components really make theming an effortless thing to accomplish I love it!!
Progress: Went over half this course and created a graphql API to learn about this exciting new tech.
Thoughts: I'm going to start by highlighting the good parts about GraphQL. First of all, eliminating the need to hit countless endpoints and having to memorize them all is a feature that I deeply appreciate not just because of how simple things become but because it just feels more efficient. It might require some boilerplate stuff but its not a hard process, I was able to chop down the basics in a few hours! The only thing sort of dislike—and this might be due tto the fact that I am new to GraphQL and have little knowledge—is that you need to specify various queries in the RootQuery object. Basically one for every argument that you want to pass for a given query on a given collection.
Progress: Spent an hour working and learning how to fetch data from the graphql api I created yesterday.
Thoughts: Fetching the data and acquiring it in the props object does seem odd at first but I think I can get use to it. If I'm being honest though, from the tweets I read today about graphql it doesn't seem like many people are adopting the technology or looking at it with the same enthusiasm that I look at it. I have to spend more time reading into it to find out whether it is worth learning it or not...
Progress: I learned how to integrate Auth0 with react applications and went ahead and experimented with Gatsby.
Thoughts: I have yet to get used to serverless user authentication. Or anything serverless for that matter. Recently I've been working with PHP again, implementing hash functions to store passwords and validate users and such. I find it terribly confusing coming from that atmosphere to the effortless auth flow that Auth0 provides.
Progress: I decided that today I needed to test myself and see how much I could get done in one hour with react. I did a very simple login card with, what I think is, a very cool UX. The passwords seems like its being validated once the user clicks on submit and it gives that feel of something happening in the background.
Thoughts: I took some inspiration from dribbble and decided to implement a cool login. I have to be honest here it didn't take me one hour, it was more 1 hour and 30 min. I need to become more acquainted with how custom forms can be achieved. So far I have customized inputs, selectors and dropdown menus. The latter being one of the trickiest ones.
Progress: the title says it all!!
Thoughts: I am very excited about this! It took me a long time to come up with a design that I felt resonated with me. I am no writer so my story probably lacks novelty but I thought that since I am actively looking for a job at this time, it would be really good to deploy my site and show the world that I am a developer! 😄
Progress: took 2 consecutive google phone interviews on leetcode.
Thoughts: I failed both mock interviews miserably. Today was very hard for me to concentrate in anything other than the fact that my data structures and algorithms knowledge is below average. I plan to take the remaining days studying data structures and algorithms until I become a master. Its time to put my 10k hours on this.