calculator app

TailwindCSS and Dynamic Utilities

TailwindCSS does not play nice with dynamic utilities so my <Key> component’s className prop is a long one. I’m wondering if there’s a better way of dynamically changing the utilities without being so verbose.

Visual-TDD with Storybook… and Cypress?

Doing visual-TDD using Storybook (thank you Storybook team for interaction testing) is the most fulfilling experience during development. For the most part, I can do all my tests - unit (component), integration and E2E tests in Storybook and I should be happy about this, but I’m not.

Why? Well, Cypress of course. How am I meant to practice using Cypress with Storybook in the way? It certainly doesn’t help that these tools have different testing methodologies. The former is pedantic about the use of test IDs to identify elements in the DOM and the later strongly suggests you write your tests the way a person would interact with the application (because Storybook uses Testing Library for interaction testing). These views are the polar opposites of each other...

*sigh - this is a bit of a conundrum because testing with Cypress is starting to feel like a chore, and that’s one thing TDD tries to change. Testing helps us confidently ship our applications but we won’t write any if it feels like a drag, regardless of how valuable and necessary it is for us to write them.

But! Storybook is not entirely perfect (yet…, maybe). In Cypress I get to define individual test cases and I like that. In Storybook, I can’t do that (or might have missed the docs telling me how). I currently write our my interaction in the story they pertain to and let them run one after the other. Not ideal, but it works… for now.

Cypress does offer component testing, but - I think I am a bit biased to use Storybook because of it’s addon system and the tools human experience. It just feels… good. Unhelpful for anyone reading this and trying to make an objective decision about which tool to use in which case, I’d suggest you learn to use both. The learning curves are decent, the tools are well-documented and wherever you go one or the other will be there. It wouldn’t hurt too. As for using both together, I’m still trying to figure out how to do that. If you’ve got any comments or suggestions, let me know. Would love to hear your take on it.

The Right Time to Split Files

Key.tsx is looking a bit cluttered (200+ lines) but moving the <Key> instances (<Number>, <Operator>, etc.) into their own files feels a little premature right now.

3D Buttons and Their Micro-Interactions

I wanted the keys to feel ‘alive’ so I thought of having the keys move down on press to invoke the feeling. I figured I could play around with shadows or use multiple components stacked on each other but to save myself some time and possibly learn something new, I decided to Google it and that’s when I stumbled upon Josh Camaue’s article on how to do create 3D buttons.

The article even includes a way to make the button move up on hover, which I thought was interesting, but admittedly slightly disorienting as that’s not how buttons work in real life. In the original design, the hover effect on the buttons is a change in color and I tried playing around with the opacity to achieve it but that only made the buttons opaque on hover (but of course). I figured I could use a color picker tool instead, but darn, I don’t like it when I use colors not defined it the challenge’s style guide. I start feeling like I did something wrong, and the vicious cycle of second-guessing oneself begins. But! I might have to make an exception this time so I can get the intended effect.

*sigh - the things us developers do to get stuff to work. It’s a hard knock life, ain’t it.

Where Are My Red Squiggles, VSCode?

I started noticing something uncool when I was coding. In React, when iterating over a list each item should have a unique key attached to it cause React needs to know whose who in the zoo when it renders components. This order is particularly important for lists which are re-ordered. More on this here.

When I would mistakenly forget to add a key, I would see red squiggles under the respective code. I don’t see those squiggles anymore. Well, actually, I do, but not in real-time. I haven’t quite figured out what’s caused this, but I think Console Ninja (super cool tool, by the way) might have something to do with it. Or, it could be a rule in my ESLint config that I’m just missing (which would be weird cause I thought Airbnb’s style guides would account for such things…).