Pushing Through, with Polish (Week 4)

Algorithms week, advent of code, and polish

Learnings

Wins & Blockers

Day 1

Wins - surprisingly felt like the basic algos are intuitive 🙂 made quick progress on the logic

Blockers - figuring out how to display a tree nicely took me a while, which stopped me from adding actual animations/interactivity. hopefully we have time to add this tomorrow…

Day 2

Wins - ironed out some bugs around displaying the tree logic step by step. i think it could be better but was going in circles a bit so decided to move on. made a lot of progress towards making a more ‘portfolio ready’ piece vs. last week i think 🙂 also deployed! https://algos-visualized.vercel.app/

Blockers - hard to focus at home tbh, it is motivating being around everyone! will see you all tmrw. i had a lot of trouble trying to make my recursive tree structure display like a tree while using dynamic sizing (flex). couldn’t really get it to work, so i added cards to help add some depth, which looks far from perfect but will do for now.

Day 3

Wins - made a lot of progress towards visualizing Dijkstra’s today. think i have a nicely responsive graph (will work on making there be no overlap of paths tmrw, that seemed a little too complicated for today’s heat). it is becoming easier to quickly spin up responsive visualizations that look nice using nextJS/shadcn!

Blockers - got a little lost trying to do the math for non-overlapping edges (just thought it would be easier to show what is happening). had a hard time thinking of a way to visualize Dijkstra's in my initial approach. have an idea after sketching some ideas out that i will try to implement tomorrow/later tn.

Day 4

Wins - deployed another nicely visualized algo to my site. feel like i am slowly getting better at reasoning through algo challenges in general - i think i am comfortable handling many, just in very inefficient ways : ))) spent the last 2 hours of the day thinking about externships.

Blockers - don’t think i have an intuitive enough understanding time and space complexity. my mind still goes first to ‘how can i complete this’ and spends a lot of time there, but i know this will get better with practice

Day 5

Wins - made a whole algo viz (convex hull using monotone chain algo) in a few hours! felt nice reusing some of my code from another viz since i made the canvas an easy to use component. Idk who was playing the piano at the end of the day but that was very soothing for the soul 💕

Blockers - algos r still hard, advent of code stuff gets hard fast 😦

Learned Technologies

  • HTML Canvas
  • SVG Animations
  • Framer Motion
  • Algorithms (various search, sorting, etc.)
    • Coding challenges (Advent of Code) while thinking about space and time complexity
  • Trying GitButler

Reflections

I am glad to have found a balance between velocity and fundamental understanding this week. I am proud of the artifacts I was able to produce by Friday evening while not taking the 'easy way out'. One of said artifacts is this brief algorithm visualization website.

Creating animations I was more complex than I had imagined. I initially thought it would be simple using Framer Motion (having seen examples and showreels online) to slide elements across the DOM at will. Unfortunately, I was unable to setup flowing animations for sorting algorithms all that well at all! I dug into how Framer Motion works under the hood - tl;dr, it seems to be built for animating React components themselves rather than flowing visuals across a web page.

So, I turned to an old friend: HTML Canvas. Having used trusty canvas for a course in undergrad, I was familiar with its verbose yet clear logic to 'draw on the web'. I was able to create 'animation' in a stop motion way, which paired well with 'snapshots' of algorithms as they went through their logic. I was able to create a simple canvas element that scales well to different aspect ratios and resolutions.

However, HTML Canvas doesn't truly allow for moving animation. If I had more time, I would have likely combined HTML canvas with SVG, or perhaps only used SVG. SVG is dynamically scalable in straightforward ways like HTML Canvas, but is also animatable. Many animations on the web that appear to 'draw in' use SVG underneath. I look forward to when I can combine HTML Canvas and SVG in the future for even more interactivity with React!

How I'm Doing

1. How I'm Feeling

  • feeling good, was nice to have time to exercise more this week (and wfh when it was mega hot)

2. Personal Growth & Learning

  • feel like i am slowly making progress conquering the ego death and being comfortable with learning hard things again.

3. Standout Moments

  • group therapy sat morning with mark was really nice actually. i appreciated his perspective and the chance for us to talk more as a group

4. Biggest Challenge & How I Handled It

  • working through some of the advent of code challenges was a little demoralizing, especially keeping time/space complexity in mind

5. Connections & Collaborations

  • worked more with other students around this week -- was really nice bouncing ideas together!

6. Habits & Routines

  • nice to exercise more! and explore the area a bit more food wise while taking in-between PR walk breaks

7. Surprises

  • seeing how much faster i am at writing basic react / nextJS code

8. Focus for Next Week

  • not relying too long on cursor as we start using that, letting myself learn the hard way