Can't Imagine How

I'm currently using React-Bootstrap as my UI library. At least, that is the library that I am importing in most of my components. I'm not actually making much use of it at the moment, but that's the plan. However, I would also like to use Material UI. Actually, I would like to use Material UI instead of Bootstrap, because I like it better. Only, because of the way UI libraries work, the more I integrate Bootstrap, the harder it will be to switch to another UI later. I'm trying to keep all my Bootstrap changes in one branch (bootstrap), and switch to development branch any time I make a non-UI-related change. Which means I have to keep rebasing development onto bootstrap, so I don't lose anything important. Why don't I just drop Bootstrap and start using MUI right now? Well, I tried that a few months ago, and ended up deleting the branch because I got stuck and had to revert back to development to make it compile again. So I'm hesitant to go down that ...

I just did a coding challenge that involved making a component and then testing it with Storybook. Which reminded me how much I love Storybook. So I started using it in my project. Which reminded me that I'm not really following Best Practices with my components. Basically, my FilteredGallery component is way  too big - it's more of a page than a component. It contains all the other components used for displaying artwork. Which is not optimal design. Ideally, I want an Artwork page that contains the following components: A list of albums (where each image is in exactly one album) A filtering tool that uses tags (which is what I currently have as the album list) A thumbnail gallery, for showing the images returned by the filter or album A carousel An image display An info panel with purchase options and links The thumbnail gallery and carousel can be part of the same component - that's probably easier, because they need to be synchronized. And the info panel can...

I took some time off from working on my site; my reasons are irrelevant to this discussion. The important thing is, I'm back now, and have made a couple of improvements since the last time I worked on this blog. They are: The Featured Artwork on the Home page now shows 4 random images. If you refresh the page, you'll see different images. They all come from a pool of about 30 images tagged with "favorite," so they're all among my best work (based on my own subjective opinion). The mechanism for this is a simple implementation of the Fisher-Yates algorithm to shuffle the images and then grab the first 4 (though the same component could be used to randomly select an arbitrary number of random images). On the Artwork page, the gallery of thumbnails on the left is now a set height, instead of resizing to match the height of the selected image on the right. I'm still not completely satisfied with this, but at least you don't see huge gaps between the rows ...

I've had this ongoing problem with trying to separate my Display component from my Gallery component. Keeping the Display inside the Gallery was working, but it was obviously poor design, and it made the Gallery component much too complex. I've renamed Gallery to FilteredGallery, to differentiate from a much simpler component I'm using on my homepage (SimpleGallery - fetches a list and displays the first n images). Planning to make a RandomGallery that displays random selection, but haven't got there yet. Anyway, my ImageDisplay is slightly complicated because, while the image itself is pretty straightforward, the detail information gets tricky. I'm currently using Cloudinary's custom meta fields to store all the details associated with each image (e.g. title, description, medium, price, etc). Though I'm pretty sure I'm going to have to augment that at some point, it should be sufficient for the time being. However, the only way to input the meta field...

So, as I may have mentioned, I got some very nice UX people to work on my project with me. After doing an impressive amount of user research, they came up with some preliminary mock-ups for some of the pages of my site. All I have to do is, you know, make my site look like their pictures. Which I somehow feel should be easier than it is turning out to be. Here is the mock-up of what my homepage should look like: And here is what my current homepage actually looks like: You can see the differences, right? Yeah, so did the designers. I suggested they could go ahead and put my site on their portfolios, now that it's live and all - get me some inbound links! And they were like, Um, sure, just as soon as the site, you know, looks like our design. This is the 6th carousel component I've tried out - called Alice Carousel (react-alice-carousel). There's a screenshot on the component's repo that looks exactly like the one in the mock-up: overlay Next and Pr...

Just spent several very frustrating days trying to deploy my project to my domain, cantimaginewhy.com . Previously, I was using GitHub's gh-pages to deploy directly from my repo. But I also had this domain, on which I've been running a remarkably uninspired WordPress site for the past several years. Since my current hosting plan was set to expire today, I thought it would be a good time to launch my new React site. Which ended up being more complicated than I anticipated. I mean, ultimately it was pretty simple, but it was one of those bugs that took a really long time to correctly diagnose. Transferring my domain from Bluehost to NameCheap was pretty simple - $12.95 for a one-year private domain registration. I configured the domain to use GitHub (complicated, but very well documented), but then when I tried opening the site in my browser, I got a blank screen. Which made me think I'd done the configuration wrong somehow, because it was running fine on localhost, and it ...

For basic MVP, I really just need to have a working contact/order form. The same component can be used to contact me for general inquiries, or to indicate interest in buying a painting. Still thinking this can be done via GMail, without need for back end. Next steps: implement serverless email creation use for contact form create modal order form, launch from clicking 'Buy Original' button on product detail