Can't Imagine How

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 ...

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 ...

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

The components that are currently doing pretty much exactly what I wanted are Gallery and GalleryNav. GalleryNav is the filter bar, which reads my filters from utils/sorting.js. This is just a JSON file of the form: {   "name":  Name of Filter  (eg Location),   "index": 0,   "options": [     {       "name":  Option Name  (eg Boston),       "tag":  tag to filter by ,       "thumbnail":  publicId of thumbnail image ,       "description":  text to display when option is selected     }   ] } NOTE:  The filters are predefined, in that the JSON file doesn't change unless I feel the need to edit them. But the search results can change any time I add or remove tags from my Cloudinary Console. That usually means deleting the corresponding tag .json file from Cloudinary's root directory; any time you query a tagname from Cloudinary (ie request '...

 OK, getting down to brass tacks. (Why is that an expression, btw?) Anyway, here is my app structure so far: My menu is currently a Nav component within a Router in App.js. Home, About, and Contact are just page components. I have two versions of my homepage image carousel: one uses Bootstrap (ImageCarousel.jsx), and one uses Coverflow (ImageCarousel-cover.jsx). The Coverflow component looks more impressive, but it also doesn't do most of the things it says in its documentation (or at least, hasn't yet). The Bootstrap version is much closer to the design mockup, so I'm trying to move towards that, but CSS is giving me grief.

My design team and I just presented our work thus far at a little GA event, hosted by Kate Lodder. Beginning with SEI-02, Outcomes now encourages work on post-graduate projects, and today was the first presentation. We were the only group - everyone else did projects on their own. Which continues to baffle me; no one is ever going to hire you to create a full stack application by yourself, so why are we getting practice working alone? Anyway, the site currently looks like this: cantimaginewhy . Current features/things that are working: Carousel of favorites on Homepage Minimal info on About page Contact page has form Artwork page has working filters gallery image detail image zoom with watermark indication of pieces for sale, sometimes with price shown No search bar Things that are missing/not working (compared with UX mockup): Homepage carousel is sub-optimal & does not resemble mockup Homepage No Shop page (commented out of menu because it contains noth...

This is a slight digression from talking about building my site so I can rant about free blogging platforms with which I have issues. This is not my first attempt at a blog. That was about 18 hours ago, and was on Wix's "free" tier. As the title suggests, I'm not a fan. I don't mind giving up some comforts in favor of not paying for stuff. But at least Blogger lets you pick your own subdomain. With Wix, it's your email address. If you want a different subdomain, use a different email address. Of course, they don't tell you that until you try to publish your first post, because they want you to upgrade in order to not have to use your email address as your website. Also, it turns out that once you pick a template, you can't change that, either. Unless you upgrade. Or create a new account, with a new email address. Anyway, Wix can suck it.

Architecture, like design, is not my favorite part. (One might wonder if I actually have any favorite parts; and if not, why on earth would I decide on software as a career field? All good questions.) Unfortunately, you have to make some decisions about architecture before you start coding, and they have to be good decisions. Otherwise you're going to waste a lot of time going down rabbit holes (trust me, not my first rodeo). The number one requirement of my site is that it needs to cost me nothing to operate. I'm willing to spend up to $20/year on domain registration, but that's it (see Site History ). Which means the only commercial technologies I'm going to be using are the ones that offer a free tier that is sufficient for my needs. Luckily, everything is scalable nowadays, so if I end up using too much bandwidth because my site is inexplicably popular, I can always upgrade. So, for starters, I'm going to deploy my front-end on GitHub's GH...

I started putting my pictures online about 5 years ago; I couldn't think of a good domain name, but "cantimaginewhy.com" was available, so... My first site was just an HTML page with a JQuery plugin that connected to my Flickr account. That worked OK, except that it had to load from scratch every single time you opened a page, even if you were just moving between pages on the site. So not ideal. Also, no way to contact me. And since it was just a JQuery plugin that I had nothing to do with, it didn't do much to show off my awesome web development skills. Next I set up a WordPress site, with a WP plugin that fetched images from Flickr. I definitely like the idea of only needing to upload to one service, and then having my site pull updates from there. Using WordPress meant that it could do updates on the server-side, including generating thumbnails from images. That meant you didn't have to wait nearly as long for the page to load. Also, contact ...

Can't Imagine Why (cantimaginewhy.com) is the website I made to showcase my art. The name has no particular meaning, other than I needed a name and it was available. This blog is about my process of building it. I have some help on the design, but so far the coding is all me. Hopefully writing about it will at least help me get out of my own way and think more clearly, even if no one else ever reads it. I got the idea from one of my classmates at General Assembly, Chuck Curtiss . He started a blog to document the process of building a coding project. It seemed like such a good idea, I decided to copy it. That was about 2 months ago; I'm finally getting around to doing it. Here's an overview of my project. It's a site to display artwork, specifically mine. Additionally, it will allow users to purchase prints and other derived products, as well as original pieces. At this point, it's not so much an app as a site. The difference is that my users are ...