My Front-End Capstone with Thinkful
The joy, the pain, the growth.
Boy! What a project this has been! My decision to go with Thinkful is really starting to show me that I won’t regret it. At first, I had a mentor that did not suit my learning style. Then we moved on from the basics and into Front-End specific curriculum, where we are given a new mentor. This new mentor was experienced, well-mannered, etc. Unfortunately, though, their mentoring methods did not suit me well either, and then there was some sort of miscommunication that caused them to be absent for a week and-a-half.
Now, however, I’m with a great mentor. She’s exceedingly thorough, and makes sure I know what the next step is, what to prepare for, and what my weaknesses might be. She’s obviously engaged, enjoys what she does, and cares about how successful I am now and in the future.
The capstone took me a long time to complete. If I remember correctly, it was about three weeks. That’s about 2.5 weeks too many! Thinkful did give me time back for what I missed with my previous mentor.
The Project
One of the requirements of the Front-End Capstone was to use one that utilizes AJAX to call the API. Unfortunately for me, it was too late into my project to realize that the API that I chose did not, in fact, use AJAX. It uses vanilla JS. My mentor says this shouldn’t be an issue, and that I actually chose one of the harder APIs to work with for newcomers, and that I executed it well. Once I realized that it did not use AJAX, the rate at which I was implementing features increased at least five-fold. I can only assume that the reason I didn’t realize that the API did not use AJAX, was simply due to a lack of experience and attention.
Finally, here is my capstone project.
You’ll notice that I’m using the Google Maps API. I’m also incorporating the Places Library and the Geocoding API.
The user is greeted with a full-page splash screen of a delicious vegan burger and a search field, which has autofocus. When the user inputs a location, the page scrolls smoothly to the Google Map. The user also has the option of navigating directly to Resources, which contains links for the user to find more information of the vegan diet, its effects on the planet, etc. The user also has the option of returning to the top of the page via a Back-to-Top Button.
Accessibility
During this project, I learned about Chrome’s DevTools Console’s feature, Audit, powered by Lighthouse. This tool helps you analyze your page for Progressive design, Performance, Accessibility, and Best Practices. Couple with aXe, I was able to build a page that keeps all users in mind. The downside to Lighthouse is that you cannot run it on local files, meaning your page must be published in order to test it.
Areas of Imrovement
Students also learn about writing meaningful README files for their GitHub repos. This is definitely something I can improve on, and I’m sure I’ll get plenty of practice.
Some other areas where I need to improve include writing meaningful commit messages and pushing to git more frequently. I think these two go together, really, as if you’re pushing whenever you implement a feature, then you’re going to have meaningful messages. Where I got hung-up is when I was on a roll and didn’t want to stop. Hah! BUT, that can get dangerous. If I commit at the appropriate points, and something breaks in the next iteration, then I don’t have to go hunting as much when I want to compare.
I did encounter an error that I couldn’t fully find the solution to. When using git merge master from my gh-pages branch, I kept getting master: not something we can merge. After several attempts, I realized that it was only unable to merge the index.html file. Peculiar. I ensured I had no commits laying around, deleted old unused branches, etc. Still couldn’t get it, even when targeting the index.html specifically in the merge. Ultimately, it was only six lines of an unordered list that wasn’t getting merged, so I just copied/pasting them into the gh-pages branch’s index.html. I spent a long time trying to understand what was happening, but all fixes seemed to come from someone misspelling something in the command or something else that didn’t apply to my situation.
Getting Caught Up
As I was working on the CSS of this project, I learned just why it is that we get so caught-up in it. Not only is it annoying and frustrating so much of the time, but it also provides our human brains with the mini accomplishments that we thrive on. We encounter tiny problems, such as a div not positioned where we want it, and then after what seems like way to long searching for the solution, we find it. And it works! And we feel great about it! It seems there are so many more of these mini issues and mini accomplishments than with JavaScript.
RSI
In my last post, I mentioned that I’ve been struggling with RSI in the form of Cubital Tunnel Syndrome. While it is still an issue, I’ve made some adjustments that have drastically reduced the symptoms. Those include:
- Replacing my mechanical keyboard with an Apple Magic Keyboard 2.
This helped because it dramatically decreased the angle that my wrists sit at, the pressure required to push the keys, and the distance of travel between keys. - Replacing my mouse with an Apple Magic Trackpad (despite having tried a vertical mouse, even).
This one was very surprising to me, and took a while to figure out. I can only assume that this helps because it’s what I’m used to using with my MacBook Pro, and because it requires so little effort to use. Tapping versus clicking is pretty big in terms of muscle usage. - Installing and under-desk adjustable keyboard tray.
It’s called a tray, but really, it’s a platform. This tray slides in or out to adjust your distance from the screen. It also has an adjustable height suitable from anyone with Dwarfism to Gigantism. Literally. The angle is also adjustable. I learned that desks are at an inappropriate height for the average human, which begs the question — Who’s doing the market research here?! Now, I’ve got my keyboard tray at a height of 25 inches from the floor instead of 30. - Replacing my super fancy expensive CB2 office chair with a basic dining chair.
This one really surprised me. I say basic, only because it is basic in design. It’s a pretty standard mid-century modern mid-back design. We actually found this in the hallway of our apartment building, left behind after a move-out. Lucky us, as it’s a $550 chair!
The way I discovered that the chair was causing some of the issues was before we took this chair home. I considered that it was the chair, and sat on it a few times and observed my posture. The CB2 chair, being a high-back, forced my shoulder blades — and thus, my shoulders, upper spine, and neck — forward. With the mid-back design, my shoulder blades rest just at the top of the chair back.
So, I’m happy to say, I think this RSI is diminishing! I’m still taking more breaks that before, doing the maneuvers and stretches, and it still flares up at times. But it’s definitely not as big of an issue as it was before!
Recap
All-in-all, lots of great news here. I’m actually feeling pretty good heading forward, but I am nervous. I now have a mock interview coming up, that my mentor and I are going to practice for. After that, it’s on to back-end tech!
