Can't Imagine How

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

So, a couple things don't work and/or look bad on small screens. Despite the fact that I finally stopped setting styles using pixels. Which is a remarkably bad practice, but still for some reason a tough habit for me to break. Anyway, here are some persistent bugs with the mobile version of my site: The menu , which now collapses to a toggle button below Bootstrap's medium screen size (which I believe is 768px). However, when you click the hamburger icon (aka the 3 horizontal bars that are the universal symbol for an expandable menu), the menu items are ugly, and also they push the rest of the content down the page. Should instead become a dropdown menu that floats above the page content. So, here's the homepage on my laptop screen: And here it is on mobile (Galaxy S8) - with menu expanded: The Lightbox feature . This used to handled by a complex function in App.js, which got passed as a property to every page so that any image could by magnified. Howeve

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

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

OK, so, I haven't written anything here in a while. Which is not to say I haven't been hard at work. In fact, I've been coding like mad for the past month or so, especially since we started the whole quarantine thing. And my site now looks WAY better than it did when I posted my last entry, over 6 weeks ago. Also, I've gotten a whole lot better at React, JavaScript, and coding in general. Apparently that's what happens when you start doing something obsessively for up to 12 hours a day. Seriously, during the month of March, I made 231 commits and spent a total of 177 hours. Anyway, I'm going to try to summarize what I learned, and some key decisions I made. I stopped trying make working forms. If someone wants to contact me, they can use my email address. And setting up an order form requires some way to process and fulfill the orders, which I also (temporarily) gave up on. I started embracing Bootstrap, and trying to actually use its React components to

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