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.

Advertisement

Is PayPal tricking people into paying with Smart Connect?

I was going to title this “Using my mad web dev skills to fix Paypal change payment method problem” but thought the current title is good click bait.

I’m sure I’ve had this happen to me several times before over the years. The PayPal payment method defaults to Smart Connect, which is usually not my ideal payment method since I’m prone to run a balance and pay 26.99% interest on that balance. After much frustration, I usually give up and leave the payment method as it is.

Paypal change payment link not clickable

Paypal change payment link not clickable

This was my post-fix payment method. Originally, it was Smart Connect.

I went into Chrome Dev to try to see what’s going on. I found that by increasing the input element’s font-size, the link was clickable.

Checking out the link Change input element.

Checking out the link Change input element.

paypal_change_payment_method3

paypal_change_payment_method4

I could have also changed the padding on the element or probably a host of another things. Something is overlaying the link, and I don’t feel like spending an afternoon debugging their website.

But I’ve got to wonder if PayPal intentionally lets this bug stay to force people to use Smart Connect. I definitely do not have it as a preference anywhere.

Trinket: using background gradient with background to improve text legibility

I’ve been playing around with Trinket, a Durham-built app that lets anyone create interactive coding lessons. Originally, the site let you build Python trinkets but has expanded to HTML 5 trinkets. As I’ve tweaked pett.io’s splash page over the weeks, I’ve experimented with the use of various gradients, particularly after I decided I needed to look at a different image every time I came to the site, rather than just the original one of Zellouisa. I didn’t want to spend a lot of time finding the perfect images for overlaying white text. Just adding a transparent black gradient helped a lot. And that inspired me to create a Trinket. I wish I had some time to delve more into what’s going on and create better examples. And there are other ways to accomplish clean text overlays of images. Anyway…here it is… I’m a Trinket fan.

https://trinket.io/embed/html/548c44b9b6

Pet profile site now allows updating of profiles (v 0.1.49)


I know, you’d think that would have been functionality from Day 1. But there hasn’t been a Day 1 for this app. Still WIP (or, as I keep saying…a proof-of-concept!)

You’ve always been able to create as many pets as you want and add as many pictures as you want (and toss in Flickr photos, though I know no one uses Flickr.) But now you can go back and edit that profile. How cool is that? I know, it doesn’t seem like that big of a deal.

Lots and lots of time poured into <a href=pett.io, and I’m actually kinda proud of it. There’s still an infinite amount of work to do before I’d say every pet owner and rescue group in the world should use it, but I’m going to keep at it.

Did you add your pets yet? Go head, add ’em. Do you have a profile because I told you to create one but haven’t touched it in a month? There’s never been a better time to update it!

v 0.1.42

That’s the version in the footer right now, not defined explicitly by me, but by my pushes to Heroku where the pett.io app is hosted. I ought to take a respite from it. I’ve worked far less on it the last three weeks than I did the first three weeks, but that’s still amounted to a significant chunk of time that could be better spent on a smaller project or two of more manageable scope. But the massive list of improvements will weigh on me, so I imagine I’ll try to spend a little bit of time on it everyday. I do want it to be used. I think it can still serve a purpose, even as I’ll still put that “proof-of-concept” label on it.

The project continues to serve as a teaching device for me, and the a-ha moments I get remain rewarding. I’m going to rattle off some things I’ve been working on of late. I know they won’t sound like a big deal, but I’m generally pleased to have figured some stuff out.

For instance, I’ve been grappling with the Masonry framework for displaying elements. One ongoing issue had been that the pet page montage would leave a margin on the right if the display width weren’t wide enough to accommodate another image. The usual centering techniques weren’t working. It turned out I had simply missed a simple method in the documentation.

But this was a minor issue compared to the actual loading of the images. I’m not restricting the size of images uploaded, but I was rendering the images back on the montage pages much-scaled down. I needed to store much-smaller images on the server, which for me, means on the Parse cloud. A couple of weeks ago, I figured out how to make a smaller copy via a canvas at upload time, and this helped, but I knew I needed a server-side solution. I spent a good deal of time last weekend on that, and now I’ve got a trigger on Parse that generates the smaller image. A pet page with a lot of images or the browse view of all the pets will render in a couple of seconds, instead of twenty. And the thumbnails can be clicked on to view the original image. I haven’t put any sort of elegant slider or carousel up yet because I honestly haven’t even begun to think of exactly what I want. I don’t want to just throw up some jQuery plugin, nor do I think it’s worth the time for me to come up with original code (there’s are some very nice wheels out there; I’m not going to invent anything half as nice.)

One goal for the app I had at the start was for one to be able to provide a link to a pet’s page that would not require a login. This is a single-page app, so even though I may have had an aremid.html page 10 years on my old website, having such a link to send wasn’t initially a simple task. The Backbone.js framework is still something I need to work at, and getting all routes and views to behave as desired has required some work. I believe with some fairly routine server-side routing, I could have a pett.io/aremid link that works (maybe, perhaps I’m being naive, and I’d do it right now if I thought I knew how to do it quickly). But for now, I’m happy that I can give out pett.io/#/pet/aremid or pett.io/#/pet/moksha

Major areas of focus as I move forward, at whatever rate that may be: mobile views, especially for account set-up and profile entry; profile editing; profile rendering; image slideshow. This will never be boring.

Purrfect is the enemy of good

Terrible pun. And the actual aphorism isn’t even that appropriate here. I thought of titling this entry Bad is the enemy of good, but that would be a tad too self-critical.

When I was a week into developing pett.io, I hoped to have a couple of people try it out. I wasn’t looking for testers. I was well aware of what didn’t work, and I knew I’d be working non-stop to try to maximize functionality, usability, and design. I had tackled too large of a solo project for something I was going to need to present to an audience. If I care about what I’m developing, and even when I don’t, every aspect that doesn’t function or look like I ideally want it to is a source of internal strife. So I admit I suffer from Perfect Is the Enemy of Good Syndrome in my work. I deal with it by being blunt about my awareness of the shortcomings of what I’m delivering. I imagine that you would be hard-pressed to find one of the tens of thousands of project-advice-dolers (a new phrase I’ve just coined…PAD’s…Project-Advice-Dolers) who would recommend this strategy. But it’s not a strategy; it’s just my instinctive behavior.

Aside coming…I am certainly walking a tightrope here, blogging about my work process when I’m seeking to present my best self while I go through the process of finding work. Plenty of PAD’s do advise practicing authenticity, but they haven’t necessary met me. (I think I’ve just expanded the definition of PAD to include all advice-dolers. Let’s just call them professional advice dolers.)

So, I’ve got my long preface…I’ve been afraid to tell people, even just close friends, to try out pett.io For weeks, you have been able to create an account, create a pet, upload photos, and link in Flickr photos. And simply having a bunch of real data would have served–and will serve–to motivate me to keep working hard on this project. I get tired of just seeing my pets and my test data.

It’s now ten days post-Demo-Day, and this project serves as my vehicle for continuing learning while I search for paying (and non-paying) work. It would be wonderful if a few people created accounts and added a pet and a photo. I will invite people to do just that.

Speaking of Demo Day, I will toss a link to my presentation here, just for the record. Honestly, I cannot watch or listen to myself, so I offer it with no further comment.

Iron Yard-pett.io from TheIronYard on Vimeo.

Ok, one comment. I’m sufficiently embarrassed just from looking at the Vimeo still, and, yet, I obviously hope someone will see something of value you, or else, I wouldn’t be following through with this whole self-indulgent blogging exercise. Second comment–the app looks and functions a tad better than it did ten days ago, and it should continue to evolve towards the good.

Making muck out of nothing at all

That’s the best Air Supply headline I could come up with with limited brain power remaining and no time to blog.

I just spend valuable time I could be working on presentation preparation–or at least working to fix actual bugs–trying to figure out why an “Add a pet” button wouldn’t center. Obsessively. And I didn’t figure it out.

Must I remind myself…this was from last August? Time flying way too quickly at the macro and micro levels.

On a related note, I just found documentation how to create thumbnail images when saving a new image to Parse. It kills me that I don’t have time to implement that. Perhaps I do, but I have approximately 49 things that would take about an hour or two apiece that I would like to do before Friday.

Code error fixed #7: Returning Parse database class query data via Underscore template

Haven’t had time to note #5 and #6 but skipped to #7 in the hope that I’ll revisit those. But compelled to record #7, because it epitomizes my perseverance in learning this stuff. My project must have a browse feature. The splash page has had one prominent button that says “Browse”, after all. But it was starting to look like it might not, because my attempts at rendering Parse data via an Underscore template were failing, and I got sidetracked by design issues. (I needed to focus on some design issues, yes. But this browse feature got tossed aside along with this unresolved programming dilemma.)

So, I won’t rationalize why I tried each of these, and this is just a sampling. I can’t recall. But I only had so many prior working examples in projects, and the internet doesn’t have a whole lot of examples. And I’m pulling from a Parse database, for whatever that’s worth.

$('#browse-container').append(_.template(browseView),results[i]);

Result:
No error, but no data returned.

$('#browse-container').append(_.template(browseView),results[i].attributes);

Result:
(where petname is one of the properties I’m trying to return from a class called Pet)

ReferenceError: petname is not defined

$('#browse-container').append(_.template(browseView),JSON.stringify(results[i]));

Result:
ReferenceError: petname is not defined

$('#browse-container').append(_.template(browseView),JSON.stringify(results[i].attributes));

Result:
ReferenceError: petname is not defined

$('#browse-container').append(_.template(browseView,JSON.stringify(results[i].attributes)));

Result:
ReferenceError: petname is not defined

Finally…what worked
$('#browse-container').append(_.template(browseView,results[i].attributes));

I never would have went astray with the JSON.stringify syntax had I, days ago, simply realized what was essentially a typo of an errant parenthesis, but it was one of those errors where the parenthesis wasn’t what was throwing any error.

Anyway, moving on…

meta-blogging note: I must get off of this theme and wordpress.com or pay to be able to customize. This looks horrible.

Let’s put this puppy to bed

I don’t want any design critiques. It’s not finished yet. Demo Day is Friday. But I’ve got to say for the record that I’ve never worked so hard on anything. And 70% of my time has been spent on Javascript code, things like figuring out how to get dates to save to Parse and arrays to render directly to the page without loops but just a simple space after commas…and promises to deal with asynchronous events…I didn’t really get the latter working as I’d like. Keep mind I’m just team of one, so I’ve been dealing with:

  • Parse database
  • CSS/Sass styling
  • Bourbon/Bitter/Neas styling
  • Javascript
  • jQuery
  • Underscore/templates
  • Masonry/layout
  • Account management view
  • Splash screen
  • Parse pic list mgmt
  • Flickr pic list mgmt
  • Vine list
  • Backbone framework
  • Responsive design
  • Presentation TBD, somehow encapsulating all of this, and my overall background in coding and in life, in 5 minutes, this coming Friday

So…not quite done yet. But I need to at least put myself to bed. Moksha has already gone to bed.

pett.io for the soul

Despite what I posted last night, I am really bleeping proud of myself. Every bit of code I write that works immediately or works three days after I got suck, is a bit I feel good about. If you detect some dissonance here compared to what I’ve previously written, perhaps there is, but there is plenty of room for both immense self-doubt and exuberant confidence to co-exist. Exuberant confidence? There are moments, and I’ll live-blog it right now, that think, even if no one else does, that it is remarkable that I have an app, which I could use to:

Upon seeing the following page in Flickr…

Within 60 seconds…

2. Create a pett.io account

3. Add the pet’s name

4. Add the user’s Flickr accont

5. Add the tag the user uses to tag their pet

6. Click View Page and

I’m not finished yet by a long shot. But I can do this…look at the kitty!