Developing Stages: Part 6 — Forget Everything I Said

Chronicles of an interaction design student turned UI engineering intern.

Week 6, Day 1: Keeping the Focus

With the weekly project meeting approaching, the morning was spent polishing up our prototypes (and a tea break, of course). Then it was on to the review which was short but sweet and realigned my focus on the project, leaving just enough time to throw together a rough scaffolding for the whole design in HTML and CSS.

Observations:

  • After struggling to get Vivus to do what I wanted, I finally gave up and tried DrawSVG for Greensock. No going back.
  • When you’re pitching a concept to a manager, they don’t just want to know what, they want to know why. Why this design? Why this feature? Take a moment to re-examine your decisions so you can answer just that. Better yet, do that as you go along regardless.
  • Don’t get so caught up in all the pages/features/whatever you may or may not be including that you loose focus of the central design when the most important step should be nailing the experience at the base level first.

Week 6, Day 2: Building Blocks

The realisation that we would soon be developing the project for real, not just a few codepens, bumped around in the back of my brain for the last few days which led to reading up on BEM and SMACSS again. Got to admit, it’s going to take me a bit to adjust to the conventions but it should prove invaluable, especially since the morning was spent figuring out where to begin and how to avoid the problems coding simultaneously might incur.

Thankfully the UI Engineers who do actually know what they’re doing (unlike me) stepped in and helped us set up a complete file structure and how to break it down into chunks using React so working integrating our code would be a breeze.

Observations:

  • Take notes and organise them. I know I saved the command I used to convert scss to for a particular file but could not find it anywhere (and not even the tutorial I found it in either).
  • Setting up your project’s structure can be one of the most time-consuming tasks but also one of the most crucial.
  • Get familiar with SVG basics before using them inline in JSX, otherwise the conversion can strip out some functions you need so it’s best to kinda-sorta know what that mess of code means so you can fix the bits you need.

Week 6, Day 3: Disasster

We began the morning with a bit of pair coding to get us started, taking turns ‘driving’ as we determined how to work through the sections with broad brushstrokes. That was until we realised our scss files weren’t compiling. Much testing, diving through the documents, and help from the manager later, we had the appropriate nodes installed and we’re back in business. One intern check-in later and we’re finally able to flex those (questionable) flexbox muscles and begin laying down the structure now that sass was cooperating.

Observations:

  • Working together on overall styling at this early stage is better than any plan we could have made for how to converge on a coding style and build consistency into naming conventions and even how we format the code.
  • Nesting flexbox blew my mind. I’ve been doing it all wrong. Need to run and update my portfolio’s code.
And I’m not even that good with CSS yet.

Week 6, Day 4: Keep it Simple

Flying high after yesterday, it’s only natural that the code would decide to take me down a peg or two. CSS grid landed the first blow. Struggling with a flexible setup for an interactive display feature did increase my grid skills (I’ve probably gone from -10 to about 0). Finally the manager asked why we were even bothering with the grid? A very good question indeed which made us rethink our whole approach as he suggested a simpler solution.

So the situation was salvaged but after lunch React was waiting to launch a surprise attack. There is nothing more frustrating than knowing exactly what you want to do, and even more or less understanding the logic you need to apply to make that happen, but being unable to express it. Ah well, there is always tomorrow.

Observations:

  • If something isn’t working, the problem may not be the code but how you approached the challenge in the first place. Take a step back. Is the problem because you can’t get the grid to work right or is it that a grid wasn’t the optimal solution in the first place?
  • Simpler is almost always better.
  • SVGs are the craziest flavour of XML you never knew existed and open up a whole new world of possibilities when you stop thinking of them as images and start using them as code.
  • I really need to learn Javascript one of these days.
My brain on components

Week 6, Day 5: Breaking (it) Down

Pulling apart the design to determine the building blocks leads to a discussion about React components and the light finally dawns for me. It is going to take practice to best apply them but I feel like a new portion of my brain has been unlocked.

Then it’s back to work and back to Javascript. But this time James, the resident React wizard, arrives to save us. With a freshly built component, it is soon reworked for another section and we are well underway to a finished prototype by the time the week, and half of my internship(!), is complete.

Observations:

  • Don’t expect to get it all immediately.
  • Sometimes it’s better not to think in terms of what you already know. I had been thinking of React components all wrong and treating them more like a HTML element. Letting go of this notion opens up so many more possibilities.
  • It’s crazy how much more readable React syntax is compared to Javascript. Still can’t write it, but it does make you feel like you understand it more.