{"id":86,"date":"2022-04-20T15:06:36","date_gmt":"2022-04-20T15:06:36","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/projectacuarioj\/?p=86"},"modified":"2022-04-20T15:06:36","modified_gmt":"2022-04-20T15:06:36","slug":"clear-your-mind-take-a-walk","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/projectacuarioj\/2022\/04\/20\/clear-your-mind-take-a-walk\/","title":{"rendered":"Clear your mind, take a walk"},"content":{"rendered":"\n<p>Started working on the jobs\/internship page this week. \u00a0I had designed the mockup, so I know what it needs to look like.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/Slide4-1024x576.png\" alt=\"\" class=\"wp-image-87\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/Slide4-1024x576.png 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/Slide4-300x169.png 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/Slide4-768x432.png 768w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/Slide4-1200x675.png 1200w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/Slide4.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/Slide6-1024x576.png\" alt=\"\" class=\"wp-image-88\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/Slide6-1024x576.png 1024w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/Slide6-300x169.png 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/Slide6-768x432.png 768w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/Slide6-1200x675.png 1200w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/Slide6.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Functionality that I want:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The button will open up a form modal<\/li><li>If there are no entries, there will be text saying there are no jobs and another form modal button<\/li><li>The items in the form add to the table<\/li><\/ul>\n\n\n\n<p>The database was not set up yet, so I had to use fake data. I created an Application object that has the attributes we want (company, position, type, date, status).\u00a0 I made a few fake applications so I can simulate data in the database. This way I did not have to hard code entries into my HTML template.\u00a0<\/p>\n\n\n\n<p>Remember, we want to keep our code DRY (<em>&#8216;Don&#8217;t repeat yourself&#8217;)<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"631\" height=\"200\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image.png\" alt=\"\" class=\"wp-image-89\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image.png 631w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image-300x95.png 300w\" sizes=\"auto, (max-width: 631px) 100vw, 631px\" \/><\/figure>\n\n\n\n<p>After coding for a while my template file was getting really long and cluttered. I used my form modal and button twice (1 for the top of the table and 1 if there are no jobs yet). There has to be a way to make my code cleaner, preferably modular. Having the ability to separate parts of the code that I can use elsewhere would be ideal. It took a long time and a lot of research, but I found it! Thanks to this post on StackOverflow, <a href=\"https:\/\/stackoverflow.com\/questions\/1976651\/multiple-level-template-inheritance-in-jinja2\">https:\/\/stackoverflow.com\/questions\/1976651\/multiple-level-template-inheritance-in-jinja2<\/a><\/p>\n\n\n\n<p>I was able to separate big chunks of code and \u2018include\u2019 them to the template I want.<\/p>\n\n\n\n<p>After getting the layout to behave the way I expected, I started looking toward implementing the database entries. My teammate provided the documentation for firebase and then I looked into it. I added some entries to the online database and my goal was to connect and read the values. On firebase, they are called documents in a collection. So, I will refer to the entries as documents<\/p>\n\n\n\n<p>Following this tutorial, <a href=\"https:\/\/cloud.google.com\/community\/tutorials\/building-flask-api-with-cloud-firestore-and-deploying-to-cloud-run\">https:\/\/cloud.google.com\/community\/tutorials\/building-flask-api-with-cloud-firestore-and-deploying-to-cloud-run<\/a>.<\/p>\n\n\n\n<p>I was able to connect successfully and assume I was able to access the data. Here was my output.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"423\" height=\"63\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image-1.png\" alt=\"\" class=\"wp-image-90\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image-1.png 423w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image-1-300x45.png 300w\" sizes=\"auto, (max-width: 423px) 100vw, 423px\" \/><\/figure>\n\n\n\n<p>I was stuck on figuring out how to display each of the object values for the longest time. The tutorial kept using jsonify(). I decided to try removing it and it outputted what I wanted!<\/p>\n\n\n\n<p>Here, you can see the two entries I created:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"973\" height=\"123\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image-2.png\" alt=\"\" class=\"wp-image-91\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image-2.png 973w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image-2-300x38.png 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image-2-768x97.png 768w\" sizes=\"auto, (max-width: 973px) 100vw, 973px\" \/><\/figure>\n\n\n\n<p>Side tip!<\/p>\n\n\n\n<p>I recently discovered the python function, dir(). This is very helpful because it shows what functions an object has. Here is an example output of using it<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"975\" height=\"193\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image-3.png\" alt=\"\" class=\"wp-image-92\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image-3.png 975w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image-3-300x59.png 300w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5417\/files\/2022\/04\/image-3-768x152.png 768w\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" \/><\/figure>\n\n\n\n<p>Doing this allows me to do many things with the collection object.<\/p>\n\n\n\n<p>What helped me solve a lot of my issues this week was to walk away when I got stuck. I walked my dogs, ate a snack, and even just called it quits for the day. Stepping away I feel like my brain can reset and different ideas come to my head.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Started working on the jobs\/internship page this week. \u00a0I had designed the mockup, so I know what it needs to look like. Functionality that I want: The button will open up a form modal If there are no entries, there will be text saying there are no jobs and another form modal button The items [&hellip;]<\/p>\n","protected":false},"author":12178,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-86","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/projectacuarioj\/wp-json\/wp\/v2\/posts\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/projectacuarioj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/projectacuarioj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/projectacuarioj\/wp-json\/wp\/v2\/users\/12178"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/projectacuarioj\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/projectacuarioj\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":93,"href":"https:\/\/blogs.oregonstate.edu\/projectacuarioj\/wp-json\/wp\/v2\/posts\/86\/revisions\/93"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/projectacuarioj\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/projectacuarioj\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/projectacuarioj\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}