petprofile.website

pettio splash image

February 28, 2015
It’s time to get this blog post posted. It originated in early January, and then I was close to getting it out about a week later. And then crickets. Today, as February concludes, and stunningly for me, it’s been over six months since I presented my code school project, I think I ought to declare to myself that I’m placing a moratorium on development.

I’m going to annotate the draft I’ve had sitting in WordPress for two months and then perhaps compose some concluding thoughts. But I just want to get this done and move on…

January 12, 2015
I wrote this over a week ago. I was going to insert some screenshots and post it, and I never got around to it / lost enthusiasm for entire post. Constantly overwhelmed by what I observe to be brilliant, expert work out there, I find myself questioning if it is foolish to call attention to my pet project. It’s not just a few tweaks away from being something impressive and meaningful. Alas, I started this post. Some part of me will feel better if I get it out there. I suppose the idea is that, someday, I’ll have something impressive, and I’ll point back to this and appreciate how far I’ve come.

[2/28] I don’t know if I am personally capable of appreciating how far I’ve come in any discipline. But over the last two months, I’ve done very little other than some mostly experimental stuff that hasn’t even made it into the website. It still looks like a three-week code school project to me.

January 3, 2015
So what’s going on with this pet profile website? I really should’ve figured out an idea for a simple website that did one task really well when I was considering a final project over the summer. But I didn’t come up with any sparkling ideas at the time. If I was going to do something pet related, it was suggested that I make a dog park map/review application, but I had just developed a strong resentment towards dog parks as a result of the treatment Moksha and I had recently received at the hands of the Northgate Dog Park bully. That was the impetus for the suggestion, but I could only imagine such a website becoming a cess pool of internet comment trolls. But this was just a project for a coding class. It didn’t have to be a real-world app. But I wanted to do something that COULD be a real-world app.

Unfortunately, what came to be called pett.io had too large a scope. A generic profile site, by it’s very nature, could potentially include everything about a subject—photos, videos, descriptions, characteristics, vital statistics. Actually, it doesn’t seem that involved when I describe it like that. I think I’ve already written about this. I could focus on elegant design, a complex data structure, integration with a social networking app, a robust descriptive profile, or a photo management system, but not all of the above.

As a result, since I presented the project at the end of August, whenever I’ve looked at pett.io to do some work on it, I’ve been overwhelmed by the unlimited action items that the application requires in order to be presentable and usable. Even when I’ve had a list of bugs and necessary enhancements, I’ve found myself sidetracked by the need to attack nagging issues or to tackle problems that didn’t impact usability but seemed like worthy programming challenges. This has been my platform for learning more than anything. But learning new concepts, libraries, and frameworks would be better accomplished through far-smaller exercises. I’ll start such smaller exercises, but then I’ll be so bothered by how unfinished pett.io is that I am compelled to turn my attention to it.

I’m going to rattle off some thoughts about the site, in no particular order.

  • Photo layouts
    • This has been a time drain. From the get-go, I was insistent that I wanted a layout for photos that didn’t compromise original dimensions. No cropping. No distortion. Lots of sites no how to intelligently pan and crop photos, like Flickr and Google. On the individual pet profile page, I opted for a skyscraper approach, like what Pinterest and Tumblr use. There’s a popular library Masonry that should intelligently place objects Tetris-style so they fit together like pieces of a puzzle. It’s cool when it works. But it’s a mess when it doesn’t, when you’re loading images from multiple sources asynchronously and are having trouble figuring out how to implement JavaScript promises to postpone that rendering until the images have been loaded. So that was frustrating for quite awhile. Eventually, I gave up on Masonry and now use a homemade squeeze function.
      August


      September

      November

      November (later)

    • For the Browse, I just went with a fixed height. This works out ok, except when photos have a high height:width ratio. I didn’t prioritize implementing a way for a user to choose a primary photo nor some library that allows for cropping. I randomize the primary photo on each reload. I have had an animation that is distracting, for the purpose of playing with transformations. I was going for the look of a bunch of polaroids. I don’t feel like it works well and want something better.
      September

      September (later)
    • So I implemented a justified view for both screens so there’d static margins on each side of the montage, and then I spent a bunch of time on a squeeze function that should intelligently calculate where more images can fit. But it’s far from perfect, and a lot of skinny images wind up grouped at the top.
    • I don’t even have a pop-up or carousel or slideshow to see images on a larger scale. I just have a link to view an image at full-size. There are a million libraries to do these things, and I could definitely implement something simple on my own, but I just never got around to it.
      [2/28] – I did recently play with Flickity, brought to the world by the same guy who did Masonry. I had posted on here an example. Of the many things I might do with this website, implementing something like this would be one of them.
    • I was proud of myself for figuring out how to save smaller copies of the full-size images on the Parse Cloud server.
    • I recently spent a lot of time implementing a method to allow a user to actually remove an image that had been uploaded to the profile. But implementing a photo management system from scratch just seems like a ridiculous undertaking. See section on ‘Purpose of this site’ if I get around to it.
  • Fonts
    • I haven’t gotten those right yet. Pusekatt might be clever for a main title, but it doesn’t work anywhere else. For awhile I used something called Gruppo, which i thought looked nice, but it turned out it only looked alright on a retina display. On a standard screen, it looked horrible. In an act of desperation, I switched to Montserrat, which I’ve come to loathe since I’ve found that Bootstrap sites all default to this, and it’s so blocky and generic. I’m looking at thin, crisp fonts now.
    • [2-28] I’ve currently got Nunito going on. Still not ideal.
  • Overall design
    • I have no training in design. I know what I think looks great in a website. I’ve accumulated a lengthy bookmark list of elegant designs. But I’m not emulating any of them. It bothers me a lot. I want a site that “pops”.
    • I keep switching between a light background and a dark background (and I think it was gray for a little while). I think I’ll wind up with white with a lot of whitespace, with enough orange to satisfy my need to make everything orange these days.

I have more to write, but I think I ought to stop. I’d be surprised if more than two people actually read all the way through this. (There are lots of satirical pieces about how sad bloggers often self-deprecate and write about how they wonder if people are still reading.)

Bottom-line…this ain’t ready for primetime. I really do own the domain petprofile.website, which cost me all of $0.99 for the first year. I know pettio is trademarked by a Chinese company that makes pet strollers, so it wouldn’t be viable in the extremely hypothetical event that I found a focus for this site. Anything using .website probably isn’t viable, either, since the term website itself is becoming increasingly irrelevant.

And back to the present…

January 13, 2015
I just took a few minutes to insert some screenshots I had pasted to imgur.com. I realize that I almost prefer the original August 2014 styles to what I’ve got now. Background colors, fonts, sizes, layouts… I haven’t gotten a combination I’m happy with yet.

I had said I only wanted five minutes worth of reading. There’s far more I would say if I were to continue. The main page…I’ve struggled with how to present that. The account admin page, which no one actually sees unless they try to be a user, always needs work. The whole page needs to look better on mobile. The profile information needs to render better.

So much to do. But there’s so much else I want to learn and to work on that does not align with worked on this project.

But, hey, if you’re reading this, please do feel free to add your pet or pets to petprofile.website.

Otherwise, check out the pages of the 2015 edition of my menagerie.

Buster on peet.io

Moksha on pett.io

Lucille on pett.io

 

 

 

And back to February 28, 2015
Phew…just getting this post into publishable condition was a chore. What else to say? From a technical standpoint, there are some things I’m proud of. Unfortunately, to a site-visitor, these aren’t apparent, and to an experienced developer, they’re far from impressive.

Ultimately, I am disappointed that I never got this to a state where I felt comfortable telling the world, “Here it is…have at it!” I could rattle off a long list of what’s wrong with it. Suffice it to say, if you notice that the site renders badly on a particular platform, or some admin action is difficult, or the app should support something or other, or the ideal design would be to have x, y, and, z, I’ve probably thought about it a lot, and I’m disappointed that the site doesn’t do that. I think I’ve beaten myself up enough about it, though.

I’m going to try to focus on smaller projects as I have the time. There’s a whole topic bubbling beneath the surface of this post of what it’s like to try to gain expertise in a field you know you’re still very green it and yet have also technically been dabbling in for two decades.

Advertisements