<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Sadie</title>
    <description>The latest articles on Forem by Sadie (@sadiejay).</description>
    <link>https://forem.com/sadiejay</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F743646%2Fa02da612-982b-4b3b-a786-33fa09e08996.png</url>
      <title>Forem: Sadie</title>
      <link>https://forem.com/sadiejay</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/sadiejay"/>
    <language>en</language>
    <item>
      <title>Job Boards for your first tech role + few more</title>
      <dc:creator>Sadie</dc:creator>
      <pubDate>Thu, 01 Dec 2022 04:58:27 +0000</pubDate>
      <link>https://forem.com/sadiejay/list-of-job-boards-i-used-when-hunting-for-jobs-few-more-2679</link>
      <guid>https://forem.com/sadiejay/list-of-job-boards-i-used-when-hunting-for-jobs-few-more-2679</guid>
      <description>&lt;p&gt;I've been asked a number of times what job boards I used to find my first role.&lt;/p&gt;

&lt;p&gt;After I was asked by a fellow bootcamper member I thought, why not make a post?&lt;/p&gt;

&lt;p&gt;So here it is! These are the main job boards I used in my job hunt (in no order):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://topstartups.io/jobs/?role=Frontend+Engineer"&gt;Top Start Ups&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://builtin.com/jobs/dev-engineering/front-end/javascript"&gt;BuiltIn&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.womenwhocode.com/jobs"&gt;Women Who Code&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.diversifytech.co/job-board/"&gt;Diversify Tech&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://app.joinyearone.io/jobs_board"&gt;Year One&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.ycombinator.com/jobs"&gt;Y Combinator&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://angel.co/"&gt;Angel&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.wordsofmouth.org/"&gt;Words Of Mouth&lt;/a&gt; (I found my job here!)&lt;/li&gt;
&lt;li&gt;&lt;a href="https://otta.com/"&gt;Otta&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Linkedin - browsing weekly hiring posts in the "Remote on LI" group&lt;/li&gt;
&lt;li&gt;Applying to jobs mentioned in slack and discord groups I was active in&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Bonus job boards:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.justicetech.download/p/jtdl-police-robot-deadly-force-data?utm_source=post-email-title&amp;amp;publication_id=23173&amp;amp;post_id=85445661&amp;amp;isFreemail=true&amp;amp;utm_medium=email"&gt;Justice Tech Download Newslettter&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="//listingsproject.com/"&gt;Listings Project&lt;/a&gt; (I found many an apartment here, they recently added a job board)&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>career</category>
      <category>beginners</category>
    </item>
    <item>
      <title>3 Small Moments That Defined My Hackathon Experience</title>
      <dc:creator>Sadie</dc:creator>
      <pubDate>Thu, 01 Dec 2022 04:46:37 +0000</pubDate>
      <link>https://forem.com/sadiejay/3-small-moments-that-defined-my-hackathon-experience-89e</link>
      <guid>https://forem.com/sadiejay/3-small-moments-that-defined-my-hackathon-experience-89e</guid>
      <description>&lt;p&gt;So, I’m not giving an overview of everything I did. However, after reflecting on the experience, a few make or break moments stood out. In a future post I'll get more technical, but for now, enjoy this semi-cinematic retelling of these moments!&lt;/p&gt;

&lt;p&gt;I had the pleasure of participating in the Girl Develop It Hackathon this past week. I'm in a group of friends that meet every Wednesday. One friend, a fellow bootcamper in her first dev job, put us on to this hackathon. The kick off was during our Wednesday meet. So we joined the session. My other friend, who's considering a career change in tech, pitched an idea!&lt;/p&gt;

&lt;p&gt;From there we were joined by a back-end focused dev. She happened to be a bootcamper that turned instructor. Our pitch: Create a site that connects users with a health concern to a juice recipe. We called it, "Juicerie" With that, we were off to the races!&lt;/p&gt;




&lt;h1&gt;
  
  
  1
&lt;/h1&gt;

&lt;p&gt;I'm sitting on the couch where I've been for the past 8 hours. The cats have come, gone, and come back once more. One is lounging sleepily across from me, perfectly juxtaposing me and my team’s furious strategizing. 12 more hours before presentations start. While my team watches through screen share, I connect the Juicerie repo to Netlify and cross my fingers. Alas, the repo doesn't deploy.&lt;/p&gt;

&lt;p&gt;At this point, the project is working on our machines. But, our juices are showing up twice. There’s a strange double render issue on that page. One team member thinks that it’s something to do with react preview and should iron out once deployed. We also notice that the create-react-app is inside another git initalized  directory. Like: juicerie → my-app css etc, instead of git being initialized inside my-app. We think, because of this, the repo can’t deploy. Netlify is running whatever it needs inside the juicerie directory instead of my-app.&lt;/p&gt;

&lt;p&gt;The only thing we can think to do, given our mush brains and now 11 hour deadline, is to make a new repo. Reran create-react-app. Then once inside the create-react-app folder, I initialized git. Pushed to Github. Transferred the files from our first repo into our new repo. Then tested deployment with Netlify. Can you guess what we saw? &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdeg7tyncj2mrqxcweja8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdeg7tyncj2mrqxcweja8.png" alt="Generic create-react-app loading screen" width="800" height="474"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That’s right. Even though I transferred the files locally, I didn't push it Github or run the build command! Whoops. That said, it’s both good news and bad news. We deployed out first netlify site, but we still don’t know if our files will compile correctly.&lt;/p&gt;




&lt;h1&gt;
  
  
  2
&lt;/h1&gt;

&lt;p&gt;Taking a look at the laundry list of error code in Netlify's deploy log, I in my sleep deprived haze, knew that there had to be a way to get the site to deploy. Especially since the site ran in our local host. All of my team members were sleep, which left me burning the midnight oil. &lt;/p&gt;

&lt;p&gt;Time to prioritize. We decided that it wouldn’t be the end of the world if the site didn’t deploy. We could demo via our local host. &lt;/p&gt;

&lt;p&gt;The styles, largely unfinished, would be important due to the presentation. &lt;/p&gt;

&lt;p&gt;The double render is also a sore, but if it's just a local host thing, then that could be an easy fix. &lt;/p&gt;

&lt;p&gt;Resolving our deploy issue would be the largest value add in terms of time, effort, and challenge. If I could figure out how to deploy it to Netlify, then we could create a link that could me shared around and our site would render properly. Priority set!&lt;/p&gt;

&lt;p&gt;With that in mind, I got to searching. I knew I didn’t have much time before my body would shut down for the night, so I went to the official Netlify docs. &lt;/p&gt;

&lt;p&gt;I checked. Googled. Checked again. They weren’t particularly helpful because it said that my build settings were typical. &lt;/p&gt;

&lt;p&gt;So I googled the error. Stackoverflow confirmed that Netlify won’t build with warnings in the code. My heart dropped. We’d have to fix every single error that showed in our terminal. I have no idea where to start or how to debug react like that. There’s not enough time. What do?&lt;/p&gt;

&lt;p&gt;In a flash of clarity, I thought “wait a minute. Our site runs on local host."&lt;/p&gt;

&lt;p&gt;This isn’t a build issue, this is a Netlify issue. I googled &lt;code&gt;Treating warnings as errors because process.env.CI = true&lt;/code&gt; and found a dev.to article that was the key. After following the steps in the article, I ran Netlify once more. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjgnttommqafap86dvi4d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjgnttommqafap86dvi4d.png" alt="Rough Draft of Juicerie Site" width="800" height="474"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Voila — Built and deployed! My twilight roller coaster had come to an end.&lt;/p&gt;

&lt;p&gt;Time to sleep.&lt;/p&gt;




&lt;h1&gt;
  
  
  3
&lt;/h1&gt;

&lt;p&gt;After getting a total of 4 hours of sleep, and going down the debugging rabbit hole, I got on slack to say "good morning" to the ladies. It was then that I did some quick math. Only 3 hours before presentations.&lt;/p&gt;

&lt;p&gt;Luckily, we were second to last and there was nothing I could do about the time. So after I said hi and gave the big deploy update, I got my hoodie on and went downstairs to greet and feed the ducks outside in the zen pond. &lt;/p&gt;

&lt;p&gt;The cool air and happy duck sounds was the best way to get my mind ready for the coding challenge that awaited me.&lt;/p&gt;

&lt;p&gt;I sat back down on the couch, shook the feather toy for the kitty to chase, and started in on the scss. At present, our app looked something like this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc294u1u06bqaii30u842.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc294u1u06bqaii30u842.png" alt="Rough Draft of Juicerie Site" width="800" height="474"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We only had a few hours so I focused on making the site look good via desktop. This was made easier because our project manager found some super cute icons to use to indicate the health areas. She also took beautiful photos of the juices last night!&lt;/p&gt;

&lt;p&gt;I’m not super familiar with how to style elements in react, but the hardest aspects were: how to figure out what component controlled what on the website, how to name classes systematically, and making sure to wrap elements in another element.&lt;/p&gt;

&lt;p&gt;I wish I had more commits to show what I focused on, but I did global styles first: fonts, colors, and reset. I wasn’t sure what styles compiled in what order. I thought the index would compile first, but I’d need to poke around into it more. Then I worked on the front facing pages and worked my way into the site. Meaning, home page, then juices, then juice recipes. &lt;/p&gt;

&lt;p&gt;Eventually, it came time to debug the double render issue on our juices page. I added classes to the elements in the component. It wasn’t exactly rendering twice, but still I wasn’t sure what the issue was. I noticed that the &lt;code&gt;Outlet&lt;/code&gt; inside our component was rendering some extra code, after I commented that out the page was issue free. However further debugging will be needed.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2j9vahnuzsrbpj6jfsuz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2j9vahnuzsrbpj6jfsuz.png" alt="Site with unstyled images" width="800" height="474"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I felt like styling the photos would be tough, so I waited to do that towards the end. By the time I was “done-enough,” the presentations had been going for an hour and a half. Our slot was approaching quickly. I put in more touches and light interactions such as zoom on hover.&lt;/p&gt;

&lt;p&gt;Thankfully, I figured out how to get the site to deploy before bed. The only thing that was left for me to do was to deploy and live demo the site while our project manager presented. We did it!!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqxd9deiaz6tdfkwfea02.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqxd9deiaz6tdfkwfea02.png" alt="Juicerie Presentation Version" width="800" height="474"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;These 3 experiences made me aware of how much I’ve been exposed to since my last hackathon and how going outside my comfort zone is sorely needed. &lt;/p&gt;

&lt;p&gt;My last hackathon was almost a year ago to the day we started this one. Since then, I: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;completed my bootcamp, &lt;/li&gt;
&lt;li&gt;job hunted&lt;/li&gt;
&lt;li&gt;found my first dev role as a solo dev. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Because I’m solo it’s hard to gauge how much I’m learning. &lt;/p&gt;

&lt;p&gt;There were moments that I didn’t mention where I was like, “oh, I’ve been in a similar situation at work.” &lt;/p&gt;

&lt;p&gt;And a lot of the time it was outside of writing code, like having to decipher error logs, how to clone a project, and how to tackle breaking down a project. It was a nice reminder that I am progressing and evolving as a developer!&lt;/p&gt;

</description>
      <category>ui</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Building in public: How I added co authors to a pushed commit</title>
      <dc:creator>Sadie</dc:creator>
      <pubDate>Thu, 28 Jul 2022 15:41:26 +0000</pubDate>
      <link>https://forem.com/sadiejay/building-in-public-how-i-added-co-authors-to-a-pushed-commit-4k94</link>
      <guid>https://forem.com/sadiejay/building-in-public-how-i-added-co-authors-to-a-pushed-commit-4k94</guid>
      <description>&lt;p&gt;I'll put my story on how I got here at the end for those looking for an answer quick:&lt;/p&gt;

&lt;h2&gt;
  
  
  Documentation:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://airton.dev/til/multiple-paragraphs-on-git-commit-m-command/"&gt;Multiple paragraphs on "git commit -m" command by Airton&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.github.com/en/pull-requests/committing-changes-to-your-project/creating-and-editing-commits/creating-a-commit-with-multiple-authors"&gt;Creating a commit with multiple authors — Github Docs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://stackoverflow.com/questions/72245016/is-it-possible-to-make-someone-a-co-author-on-a-past-commit-already-pushed-to-gi"&gt;Stack Overflow&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What I did:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;git log&lt;/code&gt; to see what commits needed to be changed&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;git rebase -i HEAD~6&lt;/code&gt; — I needed to rebase 6 commits&lt;/li&gt;
&lt;li&gt;Thanks to what I learned about rebasing recently I was able to use some vi(m?) tricks like &lt;code&gt;cw&lt;/code&gt; to delete the &lt;code&gt;pick&lt;/code&gt; quickly and change it to an &lt;code&gt;e&lt;/code&gt; for edit.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Use&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="nt"&gt;--amend&lt;/span&gt; &lt;span class="s2"&gt;"Commit message
dquote&amp;gt;
dquote&amp;gt;
dquote&amp;gt; Co-authored-by: Name &amp;lt;commit-email@email.com&amp;gt;
dquote&amp;gt; Co-authored-by: Another Name &amp;lt;another-commit-email@email.com&amp;gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;


&lt;ul&gt;
&lt;li&gt;Pressing enter without the closing quotation will create the &lt;code&gt;dquote&amp;gt;&lt;/code&gt; this means a new line has been created. (At least that's the case with zsh, idk if this is a standard)&lt;/li&gt;
&lt;li&gt;Note the same name and commit-email we noted for &lt;a href="https://dev.to/sadiejay/how-i-got-two-computers-to-update-one-contribution-graph-under-as-one-github-user-1e0m"&gt;setting the GPG key&lt;/a&gt; is needed here as well. So you'll want the people you're working with to verify their commit email&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;Once you're happy with the message you can &lt;code&gt;git rebase --continue&lt;/code&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If you're not happy you can try again with the previous command.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Repeat the previous two steps as needed&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Then &lt;code&gt;git push -force&lt;/code&gt; was how I updated the remote, but it looks like &lt;code&gt;git push -force-with-lease&lt;/code&gt; is a thing. I can't tell you the difference here so proceed with caution.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And done. I was really confused about the &lt;code&gt;dquote&amp;gt;&lt;/code&gt; thing whenever I saw it previously lol Now I know it's just a new line haha&lt;/p&gt;

&lt;h2&gt;
  
  
  Inspiration:
&lt;/h2&gt;

&lt;p&gt;So I paired / mobbed programmed with some folks in the &lt;a href="https://virtualcoffee.io/"&gt;Virtual Coffee community&lt;/a&gt;. We add an action to my profile and update the CNAME to my custom domain &lt;a href="//sadiejay.online"&gt;check me out, check me out!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the moment I was just creating commits and trying to keep up with the flow of the pairing. I learned so much got it all in the &lt;a href="https://github.com/sadiejay/portfolio"&gt;README&lt;/a&gt; and had a lovely time!&lt;/p&gt;

&lt;p&gt;Well I wanted to give some credit to the folks that helped me make this action! &lt;/p&gt;

&lt;p&gt;Recently, I had the wonderful experience of pairing and was credited for helping in the creation of tests and debugging process of a project written in Go. &lt;/p&gt;

&lt;p&gt;The experience really opened my eyes to the differences in statically typed vs dynamically typed languages and the power of an IDE. Most of what I did was listen and ask some questions, as almost everything went over my head, but it was fun? Kinda like being thrown into a conversation with someone that speaks a different language. Just trying to catch on and then starting to ask basic questions, I live for those interactions. &lt;/p&gt;

&lt;p&gt;Anyways, I'm in the front-end so this was much like watching some wizardry happen before my eyes haha But in the end I was asked if I &lt;a href="https://github.com/davidalpert/terraform-provider-pingdirectory"&gt;wanted to be co-author!&lt;/a&gt; I loved that and wanted to be sure to do the same when this opportunity to mob program came up! And here we are :)&lt;/p&gt;

</description>
      <category>github</category>
      <category>git</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>How I got two computers to update one contribution graph under one github user</title>
      <dc:creator>Sadie</dc:creator>
      <pubDate>Sat, 23 Jul 2022 03:33:15 +0000</pubDate>
      <link>https://forem.com/sadiejay/how-i-got-two-computers-to-update-one-contribution-graph-under-as-one-github-user-1e0m</link>
      <guid>https://forem.com/sadiejay/how-i-got-two-computers-to-update-one-contribution-graph-under-as-one-github-user-1e0m</guid>
      <description>&lt;p&gt;Here's what I did to hook up my work computer to attribute commits to my personal Github account.&lt;/p&gt;

&lt;h2&gt;
  
  
  Assumptions:
&lt;/h2&gt;

&lt;p&gt;If you're following along I'm going to assume you've set up an SSH key to enable pushing / pulling from your second computer.&lt;/p&gt;

&lt;h2&gt;
  
  
  Dependencies:
&lt;/h2&gt;

&lt;p&gt;A suitable test repo — I cloned my sadiejay/sadiejay repo to test commit and preview the author field.&lt;/p&gt;

&lt;h2&gt;
  
  
  Documentation:
&lt;/h2&gt;

&lt;p&gt;I then used &lt;a href="https://poanchen.github.io/blog/2018/03/23/how-to-set-up-gpg-key-on-github"&gt;this blog post&lt;/a&gt; to set up my GPG Key. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://docs.github.com/en/authentication/managing-commit-signature-verification/checking-for-existing-gpg-keys"&gt;Github documentation&lt;/a&gt; for additional reference.&lt;/p&gt;

&lt;h2&gt;
  
  
  Steps:
&lt;/h2&gt;

&lt;p&gt;Once I installed the GPG command line tool I followed the prompts.&lt;/p&gt;

&lt;p&gt;For macOS, or at least my GPG cli, prompted to input your "Real Name"&lt;/p&gt;

&lt;p&gt;I believe "Real Name" corresponds to your Github name NOT username. &lt;br&gt;
For example, my &lt;code&gt;name&lt;/code&gt; is &lt;code&gt;Sadie&lt;/code&gt;. However, &lt;code&gt;username&lt;/code&gt; is &lt;code&gt;sadiejay&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gcV_q7Xa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c781q4geh8frn6qgckzv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gcV_q7Xa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c781q4geh8frn6qgckzv.png" alt="Screenshot of Github name and username" width="322" height="150"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For email use whatever is by your name in your commit history. I made sure to use my &lt;code&gt;no-reply&lt;/code&gt; address provided by Githbub. &lt;a href="https://docs.github.com/en/authentication/managing-commit-signature-verification/generating-a-new-gpg-key"&gt;Check note under step 8&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And that should work once you generate and input your key into Github.&lt;/p&gt;

&lt;h2&gt;
  
  
  Help I messed up I didn't change the automatically configured committer info
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XYjv4Oxc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdxh07xnsnpf023vcysl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XYjv4Oxc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdxh07xnsnpf023vcysl.png" alt="Incorrectly setup gitconfig" width="880" height="405"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can edit your gitconfig file with &lt;code&gt;git config --global --edit&lt;/code&gt; after you've made a commit on your local computer. &lt;/p&gt;

&lt;p&gt;From there you can either&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;git rebase -i&lt;/code&gt; and cherry pick which commits needs changing, then &lt;code&gt;git commit --amend --reset&lt;/code&gt; if you've pushed to remote&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;git commit --amend --reset author&lt;/code&gt; if you haven't pushed to remote.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Tem8OVI3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ux9a7dszxgc7vwbcet0u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Tem8OVI3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ux9a7dszxgc7vwbcet0u.png" alt="Updated author -note new commit hash because of rebase" width="880" height="405"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion + Note
&lt;/h2&gt;

&lt;p&gt;In addition to having the GPG key, having the &lt;code&gt;git config&lt;/code&gt; file match the github name and email is the main takeaway, email alone DID NOT work for me on the M1 pro.&lt;/p&gt;

&lt;p&gt;I don't know what would happen if I need to change my email to make work email domain.&lt;/p&gt;

&lt;p&gt;If I'm missing something or someone can explain what the GPG key is I'm all ears.&lt;/p&gt;

&lt;p&gt;This could be all wrong and I just got lucky, but hopefully my lucky instructions help you too 😅&lt;/p&gt;

&lt;h3&gt;
  
  
  Acknowledgements
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;WIT community members for illuminating the connection of the GPG Key to the contribution graph&lt;/li&gt;
&lt;li&gt;Virtual Coffee community members for helping me through vi, git rebase, and cluing me to the config file set up discrepancy &lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>github</category>
      <category>git</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Building in Public: with Virtual Coffee</title>
      <dc:creator>Sadie</dc:creator>
      <pubDate>Mon, 11 Jul 2022 02:15:13 +0000</pubDate>
      <link>https://forem.com/sadiejay/building-in-public-with-virtual-coffee-2h0a</link>
      <guid>https://forem.com/sadiejay/building-in-public-with-virtual-coffee-2h0a</guid>
      <description>&lt;p&gt;So Virtual Coffee, my go-to dev community, has a monthly challenge in July to build in public. I've been wanting to refresh my portfolio a bit and so I thought, why not join the challenge and dig into my portfolio!&lt;/p&gt;

&lt;p&gt;I want to make my portfolio less of a pain to update with it comes to projects and swapping out skills. Right now, everything is hand coded into the HTML. Which is fine and it works.&lt;/p&gt;

&lt;p&gt;But!&lt;/p&gt;

&lt;p&gt;I've been working with Jekyll sites and have learned a bit more about javascript in the time I've build my portfolio. I can see how I &lt;em&gt;could&lt;/em&gt; have some like data hub and then format the info given into the html. Kinda like having a CMS or just separating the content from how it's rendered.&lt;/p&gt;

&lt;p&gt;I'm not sure how to go about that, but I think I have some ideas. But I'll need to float some out to people that know how to execute the vision.&lt;/p&gt;

&lt;h2&gt;
  
  
  Goals
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Render info on portfolio more programmatically&lt;/li&gt;
&lt;li&gt;Update content including:

&lt;ul&gt;
&lt;li&gt;projects&lt;/li&gt;
&lt;li&gt;project screenshots&lt;/li&gt;
&lt;li&gt;skills&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;Connect custom domain to site &lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Some ideas:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;create a CMS and connect it to my portfolio&lt;/li&gt;
&lt;li&gt;rebuild site in Jekyll and use .yml as data files to feed into HTML&lt;/li&gt;
&lt;li&gt;some in between with JS&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Day 25 check-in — 100 Days of Code</title>
      <dc:creator>Sadie</dc:creator>
      <pubDate>Sun, 06 Feb 2022 03:35:53 +0000</pubDate>
      <link>https://forem.com/sadiejay/day-25-check-in-100-days-of-code-1ef3</link>
      <guid>https://forem.com/sadiejay/day-25-check-in-100-days-of-code-1ef3</guid>
      <description>&lt;h2&gt;
  
  
  25 Day Review
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;This is what I've done in the past 25 days:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href="https://codepen.io/sadiejay/pen/QWqoNoz"&gt;Technical Documentation Page for fCC RWD Cert&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I finished this on day 16. It needs more styling and clean up.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;&lt;a href="https://codepen.io/sadiejay/pen/jOaParN"&gt;Tribute Page for fCC RWD Cert&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Started this project but got overwhelmed thinking about the content.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;JS Algo and Data Structures Cert by fCC progress&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Finished modules that cover Basic JS, ES6 and Debugging.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;li&gt;

&lt;p&gt;Responsive Web Development Cert by fCC progress&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Finished all modules except for CSS Grid and projects.


&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Goals For Next 25 Days
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Finish 2 JS projects&lt;/li&gt;
&lt;li&gt;Start 1 JS heavy frontendmentor project&lt;/li&gt;
&lt;li&gt;Finish RWD cert&lt;/li&gt;
&lt;li&gt;Update OS project&lt;/li&gt;
&lt;/ul&gt;






&lt;h2&gt;
  
  
  25 Day Retrospective
&lt;/h2&gt;

&lt;p&gt;The following breaks down what went well, mistakes, and what I could do better.&lt;/p&gt;

&lt;h3&gt;
  
  
  What Went Well
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;I'm managing to code everyday. I thought that was going to be the overwhelming aspect, but I've lowered the pressure on myself to just do one line if I can.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  How I Messed Up
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;I've stumbled in my open source contributions. I've gotten stuck and again I'm overwhelmed and a little intimidated on asking for help and how to move forward.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  How I Can Do better
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;I want to be more active in the #100daysofcode community&lt;/li&gt;
&lt;li&gt;Instead overwhelm stopping me, push against it a little bit at a time.&lt;/li&gt;
&lt;/ul&gt;






&lt;h2&gt;
  
  
  Resources
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://github.com/sadiejay/100-days-of-code/blob/master/log.md"&gt;#100daysofcode&lt;/a&gt; - Follow my log here if you'd like&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.freecodecamp.org"&gt;FreeCodeCamp&lt;/a&gt; - I'm finishing the RWD and the JS certs&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.classcentral.com/cohort/js-bootcamp-spring-2022/getting-started"&gt;JS Bootcamp Spring 2022&lt;/a&gt; - I'm in this bootcamp that's going over the fCC JS cert. I recommend joining then hopping in the discord if you need any sort of help! The youtube vids have also been super helpful and encouraging as well!&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>100daysofcode</category>
      <category>beginners</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>100 Days of Code</title>
      <dc:creator>Sadie</dc:creator>
      <pubDate>Sun, 16 Jan 2022 02:08:59 +0000</pubDate>
      <link>https://forem.com/sadiejay/100-days-of-code-4ag4</link>
      <guid>https://forem.com/sadiejay/100-days-of-code-4ag4</guid>
      <description>&lt;p&gt;Hey, happy new year everyone! I'm hoping that 2022 will bring many positive changes for myself and whatever you, reader, may need!&lt;/p&gt;

&lt;h3&gt;
  
  
  Goals
&lt;/h3&gt;

&lt;p&gt;With that said. I have some goals I want get down (in no order) and made known:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Job search&lt;/li&gt;
&lt;li&gt;New job (part/full time, remote + benefits, pays $35k+/$70k+)&lt;/li&gt;
&lt;li&gt;Regular Open Source Contributions&lt;/li&gt;
&lt;li&gt;Get really comfy with JS&lt;/li&gt;
&lt;li&gt;Reach out to working devs in different roles, see what yall are up to and where I fit in!&lt;/li&gt;
&lt;li&gt;Document my journey&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  How I'm doing this:
&lt;/h3&gt;

&lt;p&gt;I want to get some learning in before diving head first into the job search with my bootcamp. So I'm doing 100daysofcode! What's my project pool looking like? Well,&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I'm in a 6-week bootcamp that's working on freeCodeCamp's JavaScript Algorithms and Data Structures Certification.&lt;/li&gt;
&lt;li&gt;I'm also like 75% done with the Responsive Web Design Certificate on fCC! I started in 2017 and I think I just want to finish it.&lt;/li&gt;
&lt;li&gt;From there, I would switch to working on frontend mentor challenges for my js skills. &lt;/li&gt;
&lt;li&gt;I'd also like to keep my github active as well. Open source contributions and frontend mentor challenges will def help with that.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  The rules:
&lt;/h3&gt;

&lt;p&gt;Check out &lt;a href="https://www.100daysofcode.com/"&gt;100daysofcode's website!&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;I've also followed the tag on here. &lt;strong&gt;My official start date is JAN 11! End date is APRIL 21!&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;I'm planning a weekly-ish update (Tuesday/Thursdays) will prob be my best bet. &lt;del&gt;I'll burn myself out trying to post a daily update but I think I could keep a good log going and the post one big chunk. We'll see. But updates will be weekly, &lt;em&gt;at least.&lt;/em&gt;&lt;/del&gt; Scratch that, I'm forking the 100 days of Code repo right now, I can keep my github active by logging my journey daily and code! &lt;/p&gt;

&lt;p&gt;These articles will be a more weekly thing, unless I'm confused on something, or need more space to flesh out some thoughts.&lt;/p&gt;

&lt;p&gt;I think I want to comment on other's doing the 100 challenge as well. Just to encourage and interact with others doing the challenge! :)&lt;/p&gt;

&lt;h3&gt;
  
  
  What about you?
&lt;/h3&gt;

&lt;p&gt;Feel free to reach out and say hey. I'd love to hear how it's going for you and meet others on their journey :)&lt;/p&gt;

</description>
      <category>100daysofcode</category>
      <category>webdev</category>
    </item>
    <item>
      <title>My First Hackathon: Day 7 - extension days</title>
      <dc:creator>Sadie</dc:creator>
      <pubDate>Mon, 29 Nov 2021 22:37:17 +0000</pubDate>
      <link>https://forem.com/sadiejay/my-first-hackathon-day-7-extension-days-djh</link>
      <guid>https://forem.com/sadiejay/my-first-hackathon-day-7-extension-days-djh</guid>
      <description>&lt;h2&gt;
  
  
  WE DID IT
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/3o84U9arAYRM73AIvu/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/3o84U9arAYRM73AIvu/giphy.gif" alt="Bouncing computer and peripherals with eyes, with a monitor reading "&gt;&lt;/a&gt;&lt;/p&gt;






&lt;h3&gt;
  
  
  Introducing Colurs
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Final Screenshots
&lt;/h4&gt;

&lt;h6&gt;
  
  
  Light Mode
&lt;/h6&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd7f814uz4oofkyw33eux.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd7f814uz4oofkyw33eux.png" alt="Colurs Light Mode"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h6&gt;
  
  
  Dark Mode
&lt;/h6&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3kaxsig4fplb4xgmopx9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3kaxsig4fplb4xgmopx9.png" alt="Colurs Dark Mode"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h6&gt;
  
  
  Zen Mode
&lt;/h6&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdntni1owanrff5i8p1bg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdntni1owanrff5i8p1bg.png" alt="Colurs Zen Mode"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h4&gt;
  
  
  Figma Design
&lt;/h4&gt;

&lt;h6&gt;
  
  
  Light Mode Design
&lt;/h6&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhmuhqm9tsn3x46mqmtty.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhmuhqm9tsn3x46mqmtty.png" alt="Colurs Design Light Mode"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h6&gt;
  
  
  Dark Mode Design
&lt;/h6&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Finjh777qkpt3hf88w20i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Finjh777qkpt3hf88w20i.png" alt="Colurs Design Dark Mode"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h6&gt;
  
  
  Zen Mode Design
&lt;/h6&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0x3yau9slxum007c8pym.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0x3yau9slxum007c8pym.png" alt="Colurs Design Zen Mode"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h4&gt;
  
  
  Wireframe Sketch
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxjpsz3ivb3duubdgo3ie.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxjpsz3ivb3duubdgo3ie.JPG" alt="Colurs Wireframe Sketch"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Overview
&lt;/h3&gt;

&lt;p&gt;Overall, I had fun, I learned that I can rely on my problem solving skills and that I know more than I give myself credit for! I reached out to my community to see if others would like to join me. I partnered with two others, a dev whose been learning frontend development for a year and a designer that was just starting out. I was excited to work with people in varying stages of their learning journey.&lt;/p&gt;

&lt;p&gt;Because I had design experience I wanted to help the designer learn more about the design process and the web dev process. I took time to send her resources that I used while learning and explained a devs workflow when creating websites. I was also able to flex my design muscles by acting as app interface designer. I created wireframes from different similar codepens, noted features from each and presented 6 wireframe sketches to the team and a list of features we could possibly implement.&lt;/p&gt;

&lt;p&gt;With our dev, we worked more closely together using git, github, and live sharing code to communicate our processes. We were both very much team players and team builders and enjoyed sharing resources back and forth and co-solving problems when either of us got stuck. &lt;/p&gt;




&lt;h3&gt;
  
  
  Stand out Moments
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Fixing the grid
&lt;/h4&gt;

&lt;p&gt;We had an issue with getting the canvas to fit in a grid. This meant that the js for the canvas wasn't functioning properly and the interface looked off. My dev tried to get the canvas and the design to flow without grid but was having difficulties. So without writing over her code, I pulled her code into my local branch, made a copy of her code in my own folder. We started off working with branches but, as mentioned &lt;a href="https://dev.to/sadiejay/my-first-hackathon-days-1-2-47em"&gt;in my first post&lt;/a&gt;, setting up and getting comfy with git was more of a hassle than anything. I worked from my branch in the beginning, the we just made changes to the main by creating our own separate folders with copies of the code 😂 I first went through her HTML and divided the code with comments and made sections that closely matched the Figma design I created. &lt;/p&gt;

&lt;p&gt;From there I used a resource called &lt;a href="https://grid.layoutit.com/" rel="noopener noreferrer"&gt;Grid Layout It&lt;/a&gt; that visualizes CSS Grid areas to help me create the proper grid areas. I used the grid areas and grid template columns that was given and it looked like my design. Success, right? Wrong. The canvas was overflowing from the grid area and I didn't allow for the grid to grow. So I knew I had to do a few things.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Make the canvas resize with the parent div&lt;/li&gt;
&lt;li&gt;Make the grid flexible&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl52c9e08c79esox6b6sd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl52c9e08c79esox6b6sd.png" alt="Screenshot of Colurs Not Working Correctly"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I searched youtube on a &lt;a href="https://www.youtube.com/watch?v=qII5BueXWD4" rel="noopener noreferrer"&gt;refresher on making CSS Grid responsive.&lt;/a&gt; From that I used grid template columns with auto-fit and a minmax to allow for more flexible sizing. So I could check that off this list.&lt;/p&gt;

&lt;p&gt;Then one to issue number one. Getting the canvas to resize with the parent div.&lt;/p&gt;

&lt;p&gt;Off to a stuck dev's haven: stackoverflow.&lt;/p&gt;

&lt;p&gt;I read of some javascript libraries and jquery. That wasn't what I wanted, I just needed a plain js solution. I tested two solutions: one using CSS to set the canvas and parent div absolute and relative, respectively. &lt;/p&gt;

&lt;p&gt;The CSS worked but introduced another bug, the mousedown wasn't calculating the canvas correctly anymore. I was also clued in to the behavior that an overflow would also cause the same offset in mousedown events.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3kyk3deq48a7yqjwssyf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3kyk3deq48a7yqjwssyf.png" alt="Screenshot of Code and Firefox Dev Tools"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The second setting the innerHeight to the body. JS, I set a variable defining the parent div, changed up the code to set the canvas to the parent div.&lt;/p&gt;

&lt;p&gt;After removing the css positions, I noticed the bug was still there. I then searched for ways to track mouse positions in JS. I found a solution that subtracted the parent div and the client window to get a more accurate mousedown drawing.&lt;br&gt;
&lt;br&gt;  &lt;/p&gt;

&lt;h4&gt;
  
  
  Zen Mode Implementation
&lt;/h4&gt;

&lt;p&gt;This felt like our hail Mary moment because it was implemented after the due date during the extension time. We had gotten Colurs working with the grid interface. Yay! Dark Mode worked "out the box" sort to speak and we already wrote and coded up our site with zen/distraction free mode as an example!&lt;/p&gt;

&lt;p&gt;I revisited the interactive.js &lt;a href="https://dev.to/sadiejay/my-first-hackathon-day-3-i7f"&gt;from the Day 3 log.&lt;/a&gt; It worked! But it worked a lil too well.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjjhh0vty08rlq659qlt1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjjhh0vty08rlq659qlt1.png" alt="Colurs using interactive.js"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So off to google! "How to minimize and maximize divs js." I came across a medium article called &lt;a href="https://medium.com/dailyjs/mimicking-bootstraps-collapse-with-vanilla-javascript-b3bb389040e7" rel="noopener noreferrer"&gt;Mimicking Bootstrap’s Collapse with Vanilla Javascript&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;After compiling the codepen, I crossed my fingers and plugged in the code to our js file and added the collapse title to the divs I wanted to minimize. I put the button with the colors and it worked! I went to see if I could add more buttons and :insert buzzer sounds: the code did not like that. For whatever reason, the button &lt;em&gt;only&lt;/em&gt;&lt;br&gt;
worked in that one spot. So without being choosey I left it in and let that be that. I would love to know why the js only worked in that one spot reliably lol But I'm glad we were able to deliver that feature.&lt;/p&gt;

&lt;h3&gt;
  
  
  Known Issues
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Canvas controls: work only in firefox.&lt;/li&gt;
&lt;li&gt;Firefox custom color picker: To use, click color. Close color picker completely. Click to activate the window. Then the custom color will work.&lt;/li&gt;
&lt;li&gt;Zen mode button: It sticks at times, click out side of button area before re-clicking button.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Features I'd Like to Add
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;More brush controls&lt;/li&gt;
&lt;li&gt;More Preset colors&lt;/li&gt;
&lt;li&gt;More reliable zen mode&lt;/li&gt;
&lt;li&gt;Canvas Texture&lt;/li&gt;
&lt;li&gt;Build off of &lt;a href="https://dev.to/ascorbic/a-more-realistic-html-canvas-paint-tool-313b"&gt;this post to create a realistic painting experience.&lt;/a&gt; 

&lt;ul&gt;
&lt;li&gt;(Mixing paints, brush loading and texture, mineral spirits, paint splatter lol I was really inspired)&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;h3&gt;
  
  
  Resources
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://codepen.io/datchley/pen/Jvdryy" rel="noopener noreferrer"&gt;Codepen for Mimicking Bootstrap’s Collapse with Vanilla Javascript&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://medium.com/dailyjs/mimicking-bootstraps-collapse-with-vanilla-javascript-b3bb389040e7" rel="noopener noreferrer"&gt;Mimicking Bootstrap’s Collapse with Vanilla Javascript&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://grid.layoutit.com/" rel="noopener noreferrer"&gt;Grid Layout It&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=qII5BueXWD4" rel="noopener noreferrer"&gt;The Magic of CSS Grid AUTO-FIT vs AUTO-FILL&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>My First Hackathon: Days 4-6</title>
      <dc:creator>Sadie</dc:creator>
      <pubDate>Fri, 26 Nov 2021 04:14:20 +0000</pubDate>
      <link>https://forem.com/sadiejay/my-first-hackathon-days-4-6-2k9</link>
      <guid>https://forem.com/sadiejay/my-first-hackathon-days-4-6-2k9</guid>
      <description>&lt;h2&gt;
  
  
  Progress
&lt;/h2&gt;

&lt;p&gt;Agh. Learned some big lessons these days namely —— &lt;br&gt;
 &lt;br&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  LOOK AWAY FROM THE COMPUTER!
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Got a huge headache that took me out for day 4 and wasn't 100% for most of day 5.&lt;/li&gt;
&lt;li&gt;On day 5 I stuck more closely to my pomodoro method on 25/ off 10 and looking away!! 


&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  There's a line between helping and hurting
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;I'm being reminded of Dan Abramov's post called &lt;a href="https://overreacted.io/goodbye-clean-code/"&gt;Goodbye, Clean Code&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;There's been a bit of overwriting one another's code (I totally got carried away with reformatting my devs code :faceplam:) without checking in, and it's a weird spot to be in. Conceptually I believe we're acting in good intention, but at the same time, it doesn't feel good. It &lt;em&gt;is&lt;/em&gt; hard to feel confident in your code when things are changed around, seemingly without any rhyme or reason. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;I've been on the other side. I was in college designing in a group for a capstone project. I remember feeling particularly proud of what I made. I'm sure I said, "oh if you think it could be changed please go for it." But when my teammates did, without any heads up or comment to me, it really shook my confidence. Unfortunately at the time, there was no boss nor did I know ways to advocate for myself, so I just swallowed my hurt and moved on with the project. &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It still stings to look at that project even years later.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I'm trying to keep that experience in mind when I'm writing code or giving feedback on designs. I &lt;em&gt;&lt;em&gt;could&lt;/em&gt;&lt;/em&gt; directly write over my dev's code or I &lt;em&gt;could&lt;/em&gt; redesign my designer's web page. But exactly how does that help the team? Referring back to Dan's article, What "concrete outcomes" do we get closer to by my doing this? "How would [my changes] affect the way the code is written and modified?" These are at the heart of the teams effort, not so much how the code &lt;em&gt;looks&lt;/em&gt;. At least, that's how I see it.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It's highlighting a workflow flaw and that we're learning dev etiquette! My other dev is giving herself grace, Ima do the same. I'm def learning. &lt;br&gt;
 &lt;br&gt;&lt;br&gt;
 &lt;br&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  I'm a boss at grid
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Thanks to &lt;a href="https://grid.layoutit.com/"&gt;Grid Layout It&lt;/a&gt;. I managed to get the canvas that the other dev created into the design I created (YAY!!!)&lt;br&gt;
&lt;br&gt;&lt;br&gt;
Then the canvas didn't work 😩 It took me literal hours to copy the html she created into my own sandboxed file, add comments, get the divs in the correct order, add classes, pop in the grid, and boom, beautiful design. No functionality haha&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---iM2-50N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v32p9pkbq77ouu4hq2k2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---iM2-50N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v32p9pkbq77ouu4hq2k2.png" alt="Canvas App Screenshot" width="880" height="484"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;It's fun to think we've created something that's buggy. Like I can say "it has a few bugs, but they're &lt;em&gt;my&lt;/em&gt; bugs" hahaa&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Seriously tho, I believe a mix of the script tag and the canvas size was breaking the functionality. I didn't create a copy of the css / js that my dev created, but I will so I can just go ahead without trying to tiptoe around my devs code. &lt;br&gt;
&lt;br&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  I can recreate a web design
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;I was nervous about the js, but designing from another person's design is intense! I don't want to mess up or miss anything, fearing they might take it as intentional as opposed to a mistake. &lt;/li&gt;
&lt;li&gt;I'm pretty proud of what I could get done. I felt a rusty because it did take me literally all day for a simple one page design. I was very intentionally taking breaks and looking away from the computer. I was not going to risk another headache for anything.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Resources
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://grid.layoutit.com/"&gt;Grid Layout It&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/#basics-and-terminology"&gt;Guide to Flexbox&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Tried to get minmax to work as a width and realized it's a grid only affair &lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/minmax()"&gt;MinMax() MDN&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Discovered uses for min(), max(), and "ch" tho!! &lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min()"&gt;Min ()&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="https://git-scm.com/docs/git-stash"&gt;How to Use Git Stash&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://moderncss.dev/css-button-styling-guide/"&gt;CSS Button Styling Guide&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.joshwcomeau.com/css/introducing-shadow-palette-generator/"&gt;Shadow Palette Generator&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://stackoverflow.com/questions/8624268/html5-canvas-resize-to-parent"&gt;HTML5 Canvas Resize to Parent&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://stackoverflow.com/questions/47127534/canvas-size-inside-css-grid"&gt;Canvas inside CSS Grid&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=qII5BueXWD4"&gt;The Magic of CSS Grid AUTO-FIT vs AUTO-FILL&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>beginners</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>My First Hackathon: Day 3</title>
      <dc:creator>Sadie</dc:creator>
      <pubDate>Tue, 23 Nov 2021 09:33:12 +0000</pubDate>
      <link>https://forem.com/sadiejay/my-first-hackathon-day-3-i7f</link>
      <guid>https://forem.com/sadiejay/my-first-hackathon-day-3-i7f</guid>
      <description>&lt;h2&gt;
  
  
  Progress
&lt;/h2&gt;

&lt;p&gt;Sooo I'm still dreading the javascript but definitely not as much now. I played around with a few codepens, trying to hack a dark/light theme toggle that responses to user preferences and I think I got it! &lt;/p&gt;

&lt;p&gt;With the other dev on the team we got in the weeds with a p5 codepen. We struggled with getting the correct CDN link and it ended up not working outside of the codepen sandbox. I'm now cautiously optimistic about my theme toggle lol&lt;/p&gt;

&lt;p&gt;I &lt;a href="https://www.figma.com/file/3MRS43Q1AT04QvrVOgcF08/painting-app-interface?node-id=4%3A525"&gt;designed the app interface&lt;/a&gt; and I already want to change it in a big way but I do like the start. I modeled it after two sources. The app Sketches and another &lt;a href=""&gt;HTML5 canvas app on github&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I now want to switch the sides of the brush and color interface to match a lil more closely to Sketches, but I'm not stressing about it.&lt;/p&gt;

&lt;h3&gt;
  
  
  Design process
&lt;/h3&gt;

&lt;p&gt;I mirrored the design of the HTML5 app as closely as I could. I like the simplicity. I thought it'd lend well to dark mode too. I was inspired by our designer to include icons, so instead of having explicitly name buttons, I think having icons will be a little cleaner. I'm open to adding text under the icons, if that's better accessibility.&lt;/p&gt;

&lt;p&gt;I also realized that I designed the whole interface and forgot to put the one thing we needed –– the sun and moon icons! How will the user toggle the theme? lol&lt;/p&gt;

&lt;p&gt;I was proud of myself for figuring out how to get the rows of colors to lighten gradually, and the rgb (or HSL -- I'm gonna push for that over rgb) picker icon. Angular gradient for the win.&lt;/p&gt;

&lt;p&gt;I found a cool icon pack for figma and it saved me with the min/max icons. I was using - and + which worked but I feel like this communicates the feature I'm aiming to implement.&lt;/p&gt;

&lt;h3&gt;
  
  
  Features
&lt;/h3&gt;

&lt;p&gt;Speaking of, I found this experimental library called interactive.js. I think it's so cool someone made this for school! I'm going to see if it'll work for us, but if so, I'd love to see the tool elements move around and maybe even resize! Especially, if it'll minimize, dock and reopen without me tinkering with toooo much javascript? Win win for me!&lt;/p&gt;

&lt;p&gt;I'm also leaning more to the design of having the canvas cover most, if not all of the window. That was the use could utilize all of that screen real estate. But then, idk that also seems too big? Almost like the user could get lost... Maybe I'll make the window expand to max height? I'm not sure. I can't decide. I'll talk it over with the team and we'll see!&lt;/p&gt;

&lt;h3&gt;
  
  
  Changes I would make
&lt;/h3&gt;

&lt;p&gt;I don't know if we're going to include all the features like undo, save, and erase. But I think it's nice to visualize it. I think we should also include it even if they don't work, just to show our thought process. But idk, maybe that wouldn't look intentional?&lt;/p&gt;

&lt;p&gt;I'm also realizing that there's no canvas control panel. I'm thinking to add it to the side where the current brush area is. Maybe under that.&lt;/p&gt;

&lt;p&gt;My mom brought up canvas texture and I hadn't thought of that! I think that'd be another neat feature to implement. &lt;/p&gt;

&lt;h3&gt;
  
  
  Resources used today
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://codepen.io/KaioRocha/pen/MdvWmg?ref=devawesome.io"&gt;Light/Dark theme toggle by Devawesome&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://codepen.io/FlorinPop17/pen/XWWZYYG"&gt;Light/Dark Theme toggle by Florin Pop&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/ayc0/light-dark-mode-system-mode-user-preferences-1fcd"&gt;Setting theme mode to user preferences&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"&gt;@media prefers-color-scheme MDN&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://pretagteam.com/question/minimize-and-maximize-div-in-html"&gt;Minimize and Maximize Div in HTML&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.figma.com/file/sDmOFSW14x9cksz7ZsJbtN/coolicons-%7C-Free-Iconset-(Community)?node-id=1393%3A898"&gt;Figma Iconset&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/demihe/HTML5-Canvas-Paint-Application"&gt;HTML5 Canvas Paint Application&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://interactivejs.github.io/interactiveJS/"&gt;Interactive JS Library&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>My first Hackathon: Days 1-2</title>
      <dc:creator>Sadie</dc:creator>
      <pubDate>Thu, 18 Nov 2021 22:18:39 +0000</pubDate>
      <link>https://forem.com/sadiejay/my-first-hackathon-days-1-2-47em</link>
      <guid>https://forem.com/sadiejay/my-first-hackathon-days-1-2-47em</guid>
      <description>&lt;h2&gt;
  
  
  Welcome
&lt;/h2&gt;

&lt;p&gt;I guess I should welcome everyone (Hey Mom!) to my first post. &lt;/p&gt;

&lt;p&gt;I'm Sadie. I'm a frontend dev with a background in almost anything creative and if I haven't done it I could probably be talked into trying it haha&lt;/p&gt;




&lt;h2&gt;
  
  
  About this blog
&lt;/h2&gt;


&lt;p&gt; &lt;/p&gt;

&lt;h3&gt;
  
  
  Content
&lt;/h3&gt;

&lt;p&gt;This is a very unpolished blog. Or it's going to be. I'm following the digital garden tenets and doing it my way. &lt;/p&gt;

&lt;p&gt;Meaning, I'm not researching jack, unless I want to. &lt;/p&gt;

&lt;p&gt;I'm not saying my thoughts, feelings, and ideas are concrete and forever, unless the just happen to be.&lt;/p&gt;

&lt;p&gt;I might not even keep these posts up forever, unless they are. &lt;/p&gt;

&lt;p&gt;It's writing in the grey, and writing as organically as possible, you &lt;em&gt;will&lt;/em&gt; see a bruise or two on the fruit of this garden. &lt;/p&gt;

&lt;p&gt;I'm writing my ideas, thoughts, and experience from various states of conception 🌱 to death ⚰️. &lt;/p&gt;

&lt;p&gt;And I'm not writing to give an answer, I'm writing my experience and what's going on or what I did. That's all. I've given up the expectation of "having answers." I think everyone including myself is doing what they can and what's worked for them. &lt;/p&gt;

&lt;p&gt;You'll find my reflection of that sentiment here.&lt;/p&gt;

&lt;h3&gt;
  
  
  Topics
&lt;/h3&gt;

&lt;p&gt;I'm mainly going to focus this on my career and my interests and how they intersect with tech as we know it. My interests range widely so, buckle up I suppose? lol&lt;/p&gt;

&lt;h3&gt;
  
  
  Interactions
&lt;/h3&gt;

&lt;p&gt;I'm not one to be on social media or interacting with many people. So I do appreciate comments that come from good will and intentions, however, I might not respond!&lt;/p&gt;




&lt;h2&gt;
  
  
  On to the Log
&lt;/h2&gt;


&lt;p&gt; &lt;/p&gt;

&lt;h3&gt;
  
  
  Intro to The Hackathon
&lt;/h3&gt;

&lt;p&gt;I wanted to jot down some thoughts I'm having with my first Hackathon. &lt;/p&gt;

&lt;p&gt;So I'm in a group of 3, all from my digital community, Skillcrush. &lt;/p&gt;

&lt;p&gt;I'm acting as dev/app interface designer, and the others are a dev and a designer.&lt;/p&gt;

&lt;p&gt;We're participating in a week long (Nov 16 - 23) hackathon put together by mintbean.io. Our task, thankfully we have a direction, is to create a painting app that has the follow user stories:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;As a user, I can drag my mouse across the screen to make free-form lines.&lt;br&gt;
As a user, I can click areas of the screen with my mouse to fill them with a color, texture or pattern.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Day 1-2 thoughts
&lt;/h3&gt;

&lt;p&gt;It's challenging in ways I wasn't anticipating!! &lt;/p&gt;

&lt;p&gt;Communication, workflow, and getting the tools to work as expected is the biggest hurdle so far.&lt;/p&gt;

&lt;p&gt;Not to mention my own mental hangups of "not knowing what I'm doing" and "not being &lt;em&gt;good enough&lt;/em&gt;" whatever that means.&lt;/p&gt;

&lt;p&gt;I want to code some of the interactions such at "dark/light theme toggle" and "distraction free". Instead I'm finding myself googling and falling down the rabbit hole!&lt;/p&gt;

&lt;p&gt;I'm excited by the idea but just kinda immobilize by the "what if I don't figure it out" aspect. I think I need to write it out and play. Let me shake the "perfection" and embrace the "what happens when I try this?" point of view. Curious to see how day 3 will read haha&lt;/p&gt;

&lt;p&gt;I'm glad I'm trying this Hackathon out because getting these interactions with others, trying to find ways to give suggestions and communicate disagreement and encouragement isn't something I've been having a lot of lately. &lt;/p&gt;

&lt;p&gt;I've been in my bubble of me and working with myself for almost 2 years now. Which is nice, but I like working in a team and tackling something together. It's been an eye opening experience and I can feel myself being challenged.&lt;/p&gt;

</description>
      <category>hackathon</category>
      <category>webdev</category>
      <category>inbloom</category>
    </item>
  </channel>
</rss>
