Doings and learnings. Updated weekly.
Can we talk about how ugly code looks when you are in the middle of a new idea?
The lucky win of the week is that another friend, Van, has joined the March Madness project. He has worked with a lot of CSS on a recent project, so it’s nice to have his eyes on what we are trying to accomplish.
So what do I mean by messy? Here is a “first try” at using a grid-style option for our bracket layout:
Gorgeous, right??
The code is clunky, we obviously know this isn’t what we want our endpoint to look like, but I’m still so proud of how it looks so far. We have the arrangement of games hardcoded into a grid so that using the game_id, the team you pick for a certain match will populate in the correct square. Having the grid with game_id assignments will also allow us to create and update match selections with clear params passed to the backend. It’s exciting stuff for something that doesn’t look like much of anything yet. But that’s the messy middle, after all.
A cohort friend, Vishal, and I have decided to tackle a fun new project befitting the month–a March Madness Tournament App!
We have the wireframing planned out. Users will be able to create a bracket and either create or join a group to compete against as the teams play their games. If you are lazy (like me), you can use the same bracket to compete with multiple groups! We plan to connect to an API that will provide live updates on the games to update the app as it tallies your accuracy of the tournament.
So far, our backend has basic CRUD functions for users, brackets, matches, and teams. We are also planning to add groups and group_brackets. Matches and group_brackets will be through tables for our associations. We want to be able to use our associations to pull up team names in multiple ways–as the home and away teams, as the match picks for each rung in the bracket, and as the winning team for each game/round.
From the jump, styling the bracket is one of my biggest concerns. The March Madness bracket has such a recognizable look to it, but that “clean” look may not fit with the interactive action we have planned. It will come down to a bit of research before we decide on how to build out the design.
Happy New Year! I took a bit of break from journaling after graduating from Actualize, but I am back in the reflective practice this week as I continue to polish my skills and continue with my learning!
- I have been building a Battleship game app through a tutorial using vanilla JavaScript, HTML, and CSS. This has been an amazing review of what I know about JS and coding languages in general. Right now, the app is fulling functioning, and you can see the code here. I would like to add some validations and clean up some of the hardcoded HTML, but I like the "finished" product thus far!
- I have been working as a contractor through Remotasks to help train different AI models with their coding prompts and responses. This has provided exposure to new (to me) languages like Python and Java, while practicing detail oriented work. Most of my work consists of comparing two responses to a single prompt and assessing which one is more accurate, readable, and user-friendly.
- While I still have big ideas for my capstone, I have only made a few small but significant changes this week, including setting up README files for both the backend and frontend code, as well as a few styling features that make the ingredients index more readable. I have found that it takes a lot of trial and error with Bootstrap to configure things in the way you want them to look. I focused on cards and the background image yesterday. Would it be useful to look for a more in-depth course for the ins and outs of Boostrap styling, for a more intermediate level?
- Greatful for the textbook guide I have been using to review JavaScript: "Head First JavaScript Programming". It is super easy to read and has you coding along with the book! Plus, who doesn't love a good crossword puzzle review?
- Next week, I am connecting a 3rd party API to my capstone. I found a YouTube tutorial on the API I'm interested in, so I want to work through it to see what features I want to incorporate into my own app. It could also give me a bit more React practice!
We presented our capstone projects this week, which felt a bit overwhelming! It was hard to present on a project that I feel like I am in the middle of, rather than at the end. I still have many ideas I hope to incorporate into my current design. I loved hearing from my classmates on their work, and I took notes on a few ideas they utilized in their own projects that would be fitting in my own. I built out my backend with Ruby on Rails. I hadn’t worked with rails for a few weeks since I had been on frontend teams for each of our group projects, but it came together relatively smoothly. I had straightforward associations and only three models for my MVP, which helped. One particular issue I faced with my frontend was in creating a filtered index by category. Specifically, the useEffect axios method was particularly buggy for me. I ended up watching 3 YouTube videos, referencing 4 website tutorials, and finally input my current code to ChatGPT to get the code running properly. Even though it was frustrating to put so much time and effort into one feature of my app, it ended up being one of the most gratifying parts of the project. I was able to share parts of my code to four other classmates who were able to implement the feature into their own apps.
Instead of listing resources, I want to write out some of the “big dream” items I still have for my capstone project. First, I plan to add another model for recipes. My plan is to connect the pantry items to a search function that allows you to connect what you have in your kitchen to possible recipes that use those same items. Also, I know that I want to integrate two third party APIs to help build out the data. There are a few options for food and recipes that should work well. Creating a barcode scanner to add pantry items would be awesome, and I also would love to build push notifications based on use by date. Finally I would have loved to use a project management program sooner in my workflow. I had a basic list of tasks and my wireframing, but I wasn’t tracking much more than that. I started using the project feature on GitHub further along, and one part I especially love is how you can add detailed descriptions to each task. I plan to link anything I look up back to each task so I can keep better track of all the resources I utilized and might want to use again. This could also help me from keeping dozens of tabs open!
- Our whole class worked on a two-day project to build out an online resume app. We divided into three teams, one Rails backend team and two React frontend teams. My team worked to build out an index/search features for all the created resumes. We mob coded the index feature pretty easily, pulling basic data from the backend to map through the seed data.
- My personal contribution was to build a "show" page that would render individual resumes from a button on the index page. It was easy to set up with the personal info, but the major issue came from trying to pull data from the other tables that were connected to the main table in our database. I spent time with the backend while they made partials to help the data be more easily accessible. The other frontend team figured out that conditional statements helped slow down the processing of the data as well, helping to load the data to the page when it originally hadn't been.
- A major frustration I dealt with in my debugging process came when I wasn't receiving any error messages. It took many console.log messages to figure out where my code was falling short before I figured out to repeat the useEffect method.
- I'm really grateful for my other classmates and their willingness to lend their eyes and ideas while I'm facing a roadblock. I know that some aspects of coding can go much faster independently, like the first few commits, but a team space becomes invaluable when you need ideas on how to move through challenges.
- We worked on another group project this week. I feel as though I can never use the word "completed" for anything we have worked on in this bootcamp! Often times, my ideas for what I would like to do with an application exceed my current abilities. There have been a few times, including this week, where I have gone back to a previous assignment to see if I can update anything better once we learn a new skill or feature. In this particular new project, we had the same goal of building out a CRUD api and frontend, but instead of using Rails and React, we worked with Flask and Vue.js. I worked on the frontend to complete the SPA for a simple playlist application that had song and artist controllers. We found that components work rather differently in Vue, so it was interesting seeing how the organization of information differed between the two methods. I think I still prefer React, although I am sure there is some bias in that since I am more comfortable with it at this point.
- Since I have spent two projects working on the frontend of an app, I know that I want to spend more independent time with the backend technologies. We had an intro into SQL today, which connected many dots on how our terminal works with a database. I would like to learn more about Flask so that I can practice customizing the SQL requests. Rails has shortcuts for this, so I did not have any direct experience with SQL until this point.
- We have spent the majority of this week in "discovery mode", using online tutorials and guides rather than following along with our instructor's guidance. While I deeply appreciate Amanda's knowledge (and patience!) while she teaches us, it feels very gratifying to recognize how much easier it has become to understand what I am reading, the technical terms and references being made, with each passing week. What once felt overwhelming and foreign is now starting to feel manageable and learnable. It's important to recognize increments of growth!
- I missed out on time with Flask this week, so I want to bookmark this tutorial to try out on my own time.
- This was the first week that we focused our efforts on a group project. We faced new challenges with push and pull requests and creating work on branches other than the main branch. Since we have spent so much time basically taking advantage of such a linear process, it felt awkward at first to utilize these methods. It is easy to see how important they are, working as failsafes to protect the components already tested and viable to the project. Despite a few hiccups at the beginning, I found it very helpful to name the branch the task I planned to work on before pushing to GitHub. I can try to do too many things at once when I feel like there is so much to accomplish, so the naming helped me stay accountable to the task at hand and seeing it all the way through before moving on to the next step.
- Our instructor noted at the end of the week that we most likely would have been able to build out the projects more quickly if we worked alone. While I do think that is true to some extent, I really did enjoy working with my partner and the backend team. Although the easy or straightforward coding tasks took a bit longer with more people, the troublshooting and brainstorming of more difficult tasks went by faster and with less stress. I find that conversation is a great antidote to mental roadbocks, and having other people to communicate with left me from feeling overwhelmed when faced with something I was unfamiliar with.
- I was placed on the frontend team, and the practice with React was much needed. Baila (my partner) and I were able to see the connections more clearly to how React passed information from the backend to the frontend in a clearer context than if we had hurridly copy and pasted code from previous assignments. While we didn't accomplish every single one of our goals, we were able to connect almost all of our features to the backend cleanly.
- SO. MANY. GUIDES. I think I had three MD files open along with a previous project to piece together the different CRUD methods. I also had a note up to walk through how to push up to and pull down from GitHub so we wouldn't run into any problems. From out project sharing time, it seems like our group had the least amount of issues when it came to GitHub errors, which was gratifying.
- One of my classmates used Figma for their wireframing. I have never used that application before, but it had a clear design that was easy to follow for all of their groupmates. I will definitely try using it in my next project!
- This week we started building out a frontend using React. We worked through a blog-frontend to implements CRUD methods. During the process, we talked a lot about how React is a "control freak" that wants to handle the data its own way, so we code to pass of the data and ask for what we want passed back. It feels a bit like passing a raw egg back and forth instead of just walking with it in your hands. I'm grateful we have spent so much time with RESTful conventions and naming conventions because it is easy to see how archaic the code can feel without carefully named functions and variables.
- More specifically, I still feel a bit baffled at the heirarchy instated in the frontend with the "parent" and "children" files. Our Content.jsx holds every function we want implemented and the basic outline of the other componenets. Almost all the other files pass information into the content file to describe in greater detail the actions they perform.
- We tried our hands at implememting bootstrap for styling our frontends. I can see why developers use something like this--fast to get off the ground, clean, functional, etc. But I can also feel the constraints of that functionality along with the limitations on creativity. As a beginner, though, I found it to be a helpful way to build interactivity quickly and troubleshoot the bugs without feeling overwhelmed by initiating all of the syntax myself. Frameworks have made for great "starting points", but I am glad we spent time building out backends before tackling frontends.
- I definitely don't want to lose the React CRUD guide. I want to practice building out a few more frontends on my own to make sure that I have the process and syntax/conventions down a bit better.
- Although we took a stab at our own CSS, I do think Bootstrap got me a bit further towards a clean, finished product.
- Ruby on rails is a framework that makes life a lot easier. We learned this more thoroughly by attempting to build similar connections to a local server from scratch without a framework. The sheer amount of code we are given as a starting point through these frameworks is baffling. It makes me grateful for the building-blocks nature of web design--we do not have to start from zero to get an app up and running.
- There are too many tools, files, and helpers to keep my mind around. Is there a glossary out there for all of these development terms? We used Express, webpacks, Babel, and Node.js just in one day. My eyes feel like they cross every time a new element comes into play, but already there are terms that I can use with understanding. I mean, I had no idea what Ruby on Rails or APIs were two weeks ago.
- We shifted from Ruby to JavaScript in class. JavaScript was the first coding language I started with, and it is both finnicky and vast. I am excited to learn how much we can build through this syntax.
- Our instructor shared a meme with us about how the interet is something like a Jenga tower being held up by a seemingly useless out of date program that could eventually topple the masses. The interconnectivity of the web is powerful but precarious.
- In case I get brave, this tutortial walks through building a basic Node.js Express backend. It stumped me partway into the tutorial, but I am interested to see how I would feel in a week or two more of learning to see if more makes sense!
Although I am early on in my journey as a developer, I can already tell that a few key skills will be especially useful in this new role. As a former English teacher, I have strong written and verbal communication skills. The act of writing and editing code, while a different language/syntax, feels familiar. My attention to details has come in handy while debugging my own and my chohort's code. When it comes to verbal communication, I am excited to see how pair coding and other small group projects develop. It is one thing to know what you are doing, but it is so helpful to communicate your understanding (or where your understanding falters) to the group.
Right now, I feel especially enthusiastic about markdown code and technical documents. These have been helpful as a beginner, but it is easy to see the depth of knowledge contained in a single document. While you may only access a Git gem for one certain task, there is often a greater range of abilities or intricacies one can utilize. The information feels infinite. I am continually impressed by how user-friendly documentation propells understanding forward. I can see use for this type of writing in large companies as they diseminate information to all employees. Thinking about how much information I can gain through the public web alone is mindblowing. I wonder how the use of AI models like ChatGPT will influence this type of technical writing in the future, and how coders can utilize AI to build their own understanding of technical documentation, both to read once inaccessable content and to write their own documentation for coding projects.
When it comes to the tech industry as a whole, I am drawn to the pace of change set my these companies in comparison to other industries. I want to be a problem solver at the edge of what is possible. Continual creation is a beautiful touchstone to what makes us human, and I want to play a part in that.
I am always grateful for a resource that can help me put my own abilities into common language. Teaching can feel set apart and unique compared to other professions, but this transferable skills checklist helped to remind me that I have many, many skills that will help in my career shift, especially as a move towards life as a developer.
- I focused on APIs this week! Through Ruby on Rails, I cycled through the creation of new databases and RESTful conventions, along with.
- How to add and drop a database in case something goes wrong.
- How to use migration to update schema.
- What RESTful conventions are and how to implement them for get, post, patch, and delete actions.
- I started creating my own game using PHASER. I just focused on the environment and a few basics this week, but I gaining an appreciation over the communication between applications just for a local host for testing. I feel like I am only now starting to comprehend the complexity and interconnectivity of the internet.
- This guide was a lifesaver for learning the different options in managing schema in my databases.
- I have loved learning markdown this week! With my background in teaching, it is nice to have a way to reflect and build my own resources to review at a later time. I'm sure this is integral to companies as a way to standardize coding norms for large groups of people. It has been fun learning new formatting features for this syntax. This cheat sheet was a helpful introduction to the formatting.