Getting back to it, again

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 of I still haven't created a back end capable of processing orders. In fact, the only back end I have right now is Cloudinary, the service that hosts all my images. Because I don't have my own back end server, I can only use a tiny fraction of Cloudinary's features, because reasons.

So, my current To Do list can be divided into 3 categories: front end improvements, code refactoring, and back end creation.

Front End Improvements

My Design Team has continued to provide valuable suggestions and user feedback, which I've been attempting to incorporate whenever possible. Also, I still have a bunch of things that I feel should be different, but have not yet succeeded in implementing; sometimes because they rely on other things and sometimes because I just haven't got around to it.

• Enhanced Routing: currently, the only navigation available is in the menu; you can go to one of 4 pages, and that's it. All other behavior is handled by events that don't affect the address, which means you can bookmark the Artwork page, but not a particular gallery or image. I know how to change that, but it'll be a lot of work and I haven't yet
• Gallery Scrollbar Bug: when you select a thumbnail from the Gallery that is below the current scroll location (ie you  have to scroll down to see the thumbnail), the gallery automatically refreshes back to the top every time. So for large galleries, you have to keep scrolling down to select the next thumbnail. Which is really annoying. Haven't found a good solution yet.
• I'd like to make the Gallery have custom sorting. I already have code for that, but only so I can set the sort method for each gallery in my config files. It would be nice if the visitor could change both the field and direction that galleries are sorted, especially for large galleries.
• While the mobile version of the site is now functional, it has far fewer features than the desktop version, and some of those features would be nice to have, if I could find a way to transpose them. For example, the selected image is rather small on mobile, and unlike on desktop, there's no way to zoom in (because my Lightbox plugin doesn't work on small screens). One relatively easy solution would be for the Zoom button on mobile (which is now simply disabled) to instead fetch a higher-resolution version of of the image, allowing the visitor to use their device's pinch-zoom feature.
• Based on user feedback, some of my controls are counter-intuitive. For example:
  
• The option to "filter" the images is confusing because it's actually just a different kind of categorizing. The Filter image I use to invoke it makes users think they will be able to filter the existing album list, but instead they get a completely different list with more options. Probably just need to find a different word/image other than "filter". 
• The site logo is one of several dozen arrangements of the letters "CIW" that I came up with. Since I had a hard time choosing just one, I put a sort of Easter Egg into the logo, in that
  clicking it (in desktop view) opens a hidden gallery of all the logos. However, users expect that clicking the logo will take you to the homepage. Easter eggs may be fun for developers, but they are confusing for users.

Refactoring

Part of what makes some of the front end improvements so challenging is that the code is just bad. The kind of code you get when a whole project is written by one developer, with zero code review or outside input. With no one to complain about shoddy practices, your standards can slip really quickly, and you end up with unnecessary workarounds and the same problem solved 3 or 4 different ways in different places. Which is what I have now. Some of my more audacious improvements, such as converting to TypeScript or changing the UI to Bootstrap to Materialize, have been on hold for months because the existing codebase is too unstable for such a drastic change. Not that those changes are really necessary; they would mostly just be fun. But refactoring out all the bad code is essential if I want to use this project to demonstrate my awesome engineering skills.

Back End Creation

Besides the front end improvements I already mentioned, there are some basic features that are clearly missing from this app. For example, I have numerous items where the original painting is available for purchase, and I even have a price listed; but there is no way to actually buy it. There are also less obvious features I'd like to have, such as the ability to see what other albums the selected item is in. For instance, if you find a watercolor painting in the Landscapes album, and want to see all the other watercolor paintings, or just watercolor landscapes, there should be a way to do that. Especially since my image service, Cloudinary, offers that ability within the free-tier account I'm using. But you need your own back-end server in order to use those features (because reasons involving API Keys, which can't be bundled with a client-side application).

Anyway, I've been putting off creating a custom back end because of a fundamental problem with available services: any service that allows you to run your own server is either going to charge money, or else have significant limitations, such as going to sleep after 30 minutes of inactivity. If visitors have to wait up to 15 seconds for your site to wake up, it is not going to look like a professional website.

My new plan is to keep using what I have; Cloudinary's free-tier has no wake-up issues, so you'll get the current site without any lag. But also build a back end, using NodeJS and deployed on Heroku. I'll use GraphQL to combine data from Cloudinary with Fauna (a free-tier data service that supports GraphQL), and Vendure (an open-source Node-based e-commerce platform) for the e-commerce aspect. And I'll just ping Heroku whenever I get a new visitor. You can make do with the current features for 10 to 15 seconds until my back end spins up.