Tuesday, April 27, 2010

Handmade Blog

http://onepotcooking.com/yanivhakohen/class09/blog/

Combined assignment for classes 7 through 10. A blog with user accounts, which allows upload of multiple photos per post.

The log-in operation done in Ajax, with the page speaking to a back end using JSON, sort of. (The data is JSON format, but I suspect there are better ways to parse it than the one I used).

When you go to the site, you can see the posts, but you need to be logged in to post your own. There's a "register" link that puts you in registration mode, again Ajax. This was a mistake as it made the code overly complicated for almost zero visual gain. Will be smarter next time.

Registration involves providing a name and email address. The address is verified as belonging to you via a message that you receive (sent from "Handmade Blogmeister"), that includes a link that you need to follow, which upon doing so "confirms" the account. At this point you can use your email (which is the login ID) and password to log in and start posting.

Logging in is Ajax style, i.e. you are looking at the page, and after successfully logging in the login area transforms in to a posting area via some basic jquery. I dropped most of the animations I was playing with because they're not really as portable as the documentation claims them to be.

If you forget your password (you log in with a bad password), it asks you if you want a reminder, in the form of a link on the page. If you click it your password is mailed to you. I despise sites that do this, because it means that they store my password in clear-text, a very very bad practice. But this was just an exercise. The right way is to one-way encrypt the password with an MD5 style encryption; and to offer other mechanisms for self-service password resets. That's a whole separate exercise which I think I'll do ... some other time :-)

There's actually a lot of examples out there on how to do logging-in with Ajax, including very nifty visual and behind-the-scenes stuff. The challenge is understanding what's good and what isn't, not to mention what works and what doesn't. And I'm realizing that I very barely know Javascript and that it's a big and powerful language.

I dipped my toe in server-side image handling. I inquire for dimensions of the photos and normalize their display on the blog to 100 pixels high, so they fall in to neat rows. I didn't generate thumbnails, which would be the obvious thing to do next.

I called the site "Handmade Blog", after the name of the font in the banner, Handserif from dafont.com. The font's concept resonated with me: what I like about this course is that, freed from commercial imperative (the need to do things quickly), we are urged to build things from scratch, from basic ingredients, hand-made, and understand how they work. As we wind down this course, I feel I owe a big thank-you to Amos and Jack.

It's here, and I'd love if you checked it out. Opening an "account" is quick and easy and it would be cool if you actually uploaded a photo of yourself - I'd love to be able to keep in touch!

No comments:

Post a Comment