Storybook

Oh yeah, another important development since February is that I started writing tests for everything: Jest for my JS libraries, and Storybook for my React components. I'd forgotten how much fun Storybook can be - I used it on my very first professional project after GA, and then it was in a coding challenge I did a few months back. And now my favorite part of writing a new component is writing the stories. I still have to learn a lot more about it - there are a whole bunch of features I haven't even tried yet. But the Knobs are great - you can create these little widgets to alter the properties of your component right before your eyes: change the size of an image, or the size of all the images, or load a different gallery, or whatever. Anything that's bound to a property in your component can instead be bound to a widget, and then changed on the spot. Even if it's something that will never need to change in your app.

The only downside is that, since it's a testing tool, it doesn't get included in your production build. Which means I spend a lot of time fiddling with something that no one else will ever see. Oh, I'm sure there's a way to deploy Storybook somewhere; only, then I'd just get super obsessive about making that perfect in every way. As it is, it's a fun toy to play with, while still technically doing useful work.

Comments

Post a Comment

Popular posts from this blog

Getting back to it, again

Image
Got a little distracted - apparently there's something going around. OK, so, I put a lot of work into making the site mobile-friendly, which reminded me again why mobile-first is a good design strategy. But not the way I did it, so not really worth crying over now. I started this post a month ago, and then didn't publish it. So now I'm getting back to it again. My default work style is to obsess over one project until I hit an insurmountable challenge or run out of things to try, and then avoid it for a couple weeks. For whatever reason, writing this blog counts as its own project, distinct from actually developing the website. So my blog updates often happen only when the coding has reached a pause. Current Status : site is live and functional, though more could be done.   All the available controls do what they are supposed to do. However, there are some fairly obvious gaps in functionality, such as the ability to buy things directly from my site. That's on account ...
Read more

Responsiveness is hard!

The title pretty much says it all. I have my site looking pretty close to how I want it, at least for this phase of development. But only at the default screen size of my laptop. As soon as I resize the window, it starts getting weird. It's not that I expect to get a lot of customers using small devices. OK, the original point of making a website was so when I'm out painting, I can have a QR code taped to my easel that will link to my site. So, I am expecting to get some visitors with mobile devices. But mostly, I want my site be responsive because it's embarrassing to have it not be. I'm still afraid to text anyone a link to my site, because it's too unpredictable on a small screen. Also, while normal web users aren't constantly resizing their browser windows, developers are doing exactly that. So, if I want other developers to be impressed with my skills (and I really do), then giving it a smooth transition on resize is an essential requirement. But, it...
Read more

Basically done! (at least on full-screen. except for some issues.)

Image
The full-screen version of my site is essentially complete! Mostly. Except for the Map component, which I don't quite have yet; instead there's just a button that opens the location in Google Maps, in a new tab. Also, I had wanted to use URLs for all navigation, including within the Artwork page; but it turned out to involve a lot of changes, so I put that on pause for now. The mobile version is a different story. Prior to this week, opening the site on a screen less than about 600px would just break the site - totally useless navigation, overlapping elements, etc. I managed to fix that, mainly by just changing all my CSS unit values to vh/vw and %, instead of px or em. But there are still some serious aesthetic issues on mobile devices. Which I'm going to discuss in my next post. So, here is a screenshot from the site, basically as it was when my team and I presented it at GA, as a "post grad" project: And here it is now: Besides looking better, all ...
Read more