My First Hackathon: Days 4-6
Tags: beginners, javascript, webdev
Published: 2021-11-26 04:14:20

## Progress
Agh. Learned some big lessons these days namely —— 
 <br>

### LOOK AWAY FROM THE COMPUTER!
- Got a huge headache that took me out for day 4 and wasn't 100% for most of day 5.
- On day 5 I stuck more closely to my pomodoro method on 25/ off 10 and looking away!! 
 <br>
 <br>
  
###  There's a line between helping and hurting
- I'm being reminded of Dan Abramov's post called [Goodbye, Clean Code](https://overreacted.io/goodbye-clean-code/).

- 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 _is_ hard to feel confident in your code when things are changed around, seemingly without any rhyme or reason. 

- 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. 

It still stings to look at that project even years later.

- I'm trying to keep that experience in mind when I'm writing code or giving feedback on designs. I _*could*_ directly write over my dev's code or I _could_ 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 _looks_. At least, that's how I see it.

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. 
 <br>
 <br>

### I'm a boss at grid
- Thanks to [Grid Layout It](https://grid.layoutit.com/). I managed to get the canvas that the other dev created into the design I created (YAY!!!)
 <br>
Then the canvas didn't work :weary: 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
![Canvas App Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v32p9pkbq77ouu4hq2k2.png)

- It's fun to think we've created something that's buggy. Like I can say "it has a few bugs, but they're _my_ bugs" hahaa

- 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. 
 <br>
 <br>

### I can recreate a web design
- 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. 
- 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.



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