Archive

Monthly Archives: June 2014

So I had a bunch of small but really cool updates which I planned to have a post for each and everyone one of them.
yeah…. well, that’s not gonna happen. It’s not that fact that I’m lazy (I am, but it’s not) – rather then the fact I prefer to add a new feature instead of writing about the ones I already have. The ideal should be 10-20% of the development time for documentation. That’s all nice on paper. In reality, I really wanted those features released. So let’s talk about what I just added:

1. README documentation
so the first item is that I started logging my progress into the README file, so you can see a short title of the main issue in each commit I’m doing. I’m not sure if the best approach but for now it’s working well for me. Whenever I have a new feature to release, I branch out in github, naming it with the feature name; I pull to my laptop, do my magic and eventually push it back; back in github I merge it to the master branch and (maybe I shouldn’t do that?) close down the branch, per github advice. Wait! I’m not done: I have an automatic script that now pull the master branch from my openshift server and then merge it with the latest master from github into a new folder on my laptop and eventually push it back to the openshift server. This script should run automatically, except from the part where I need to comment the commit. There aren’t suppose to be any merge problem as I don’t make other changes in the openshift but sometime the jenkins’ build doesn’t work properly so I need to run it manually from the openshift server. Jenkin is ahem….”Jenkins is an open source continuous integration tool written in Java. The project was forked from Hudson after a dispute with Oracle“, according to wikipedia. it basically means that the server still provides service, even when the node.js server is restarting, which is cool. anyway, now each commit has a release note in the REAME file.

3. Tags
I hope everyone what do tags means, yes? Tags are short expressions (usually a word or two) to describe something (a topic) for easier referencing. Suppose you’re interested in Environment, it’ll be easy for you to filter all the related topics by selecting the environment tag. But who decides which tag suits the topic? that’s a terrific question, as I pondered about this quite sometime because of my policy that “Authorship isn’t ownership“. so it came down to this: anyone can add tags for a topic he wishes to promote. Read an interesting topic and you think it’s related to environment? tag it! (I should probably give you points for doing that in the future). You might be wrong or lying but I’m hoping that with enough participants, all the false tags will eventually fade out. You can always update the tags you’ve added, and you can filter topics by clicking on the tags cloud on the right sidebar, which currently shows the top-ten popular tags. Maybe it should show more or at least have a “more” button. I’ll get back to that as soon as those tags gains more popularity…

4. Fixed bug of profile-images folder deleted whenever a new version is released
When releasing the tag feature I realised, to my horror, that the profile-image folder, that was part of the www folder is being obliterated, as Jenkins simply replaces the entire project folder. doh! the solution was easy – I move the folder outside of the project folder so Jenkins can no longer touch it. Ha!

5. A basic version of responsive css layout
Following some feedbacks I got from people trying to use the service from their tablet, I prepared a basic responsive version. it doesn’t look much – but at least you can work with it. Responsive, in case you don’t know, means the css styling adjusts itself based on the screen-width so it’ll be readable on any device. There are pretty simple CSS rules that can do that but it requires a bit of a hassle as you need to check something like 8 different layouts.

6 .Escaping all input to safe-tify input, fixed bug in responsive layout, added warning for DB integrity errors
Another feedback I received was that I don’t check for code-injection. Shame on me. Really. So I fixed that. Quite easy, honestly, as I have a single function called useInput which takes whatever data the user sent me , safe-tify it, and puts it in session.input. I also checked that the uploaded profile images are actually images and not wooden horses (you never know). Other than that, I had some left-over from previous commit and since I temper with my local mysql database manually, I need to add some integrity error-check. I should really add something to email me for any error occurring on the production server. Yup, that’s important stuff

7. Coloured tags, much faster page loading and rendering
So you remember them tags we’ve mentioned? I didn’t like the fact they’re plain white. it would be much easier for the user to locate his favourite tags if only they had colour. Problem is – these tags are added manually, and there might be zillion of them, so how can I colour them? OK, this was completely wicked: the solution is client-side when I take the tag-text, hash it into a single number between 1 and [10] and there – I can now tell you what colour this random text should have. Only problem is that with current tags, I got only 3 different colours, but I’m hoping that the more tags I’ll have, the more colours will appear. Besides that, I also removed a lot of javascript code and libraries and sh*t I don’t need so loading is much faster now.

8. Fixed bug in sign-in, added email capabilities, added email confirmation
In one of those last commits I made some internal changes that screw up the sign-in process, so it needed to be fixed. While I’m on it, I decided to improve the the sign-up process and include email confirmation. The process now is: (1) write your email; (2) click on the link you received; (3) add user name and password (and accept terms of use). This way it forces the mail to be confirmed so I don’t need to remember if you confirmed your email or not. There’s a nice trick with the link that contains the email and hash of the email and a magic word (TODO: the word should be configurable) so I don’t care how many email you sent like this, they’ll all have the same hash that will confirm the link is authentic. At some point in the future, after adding points and permissions and stuff, I’m going to make the user name optional for the first levels and have it mandatory only when the user will want to meaningfully contribute to the system (i.e. commenting or adding a topic). Another cool thing to mention is the Mail-Process which works as a webs-service so it can also accept input from the client-side. basically it receive some information, including the target-email-address and which email-template to use and it send the information. When I’ll be big and famous, I should also document the API of all these nifty features, so other people could write their own client-side UI

9. Use of localStorage to boost XSLT and single-image to improve performance
I wasn’t completely satisfied with the loading speed so I using Chrome’s developer tools, I analysed the network throughput and realised that sure many things were cached but the system still needed to verify it it’s their latest version and this check is costly. So having all the images in a single image that is later clipped by css reduced this time significantly. Secondly, I check if the UI was changed since last visit. the html page now has a short script passage defining a javascript variable called ui-version. If this variable is different than what is stored in the localStoage, it will preload all XSLT files and store them. The ui-version is set whenever the node-js restarts, which usually happens when I commit a new change so it seems about right. Honestly, I’m not 100% sure how it works as the XSLT files import one another and I couldn’t tell them to load from localStorage but what I know is that these files no longer goes the network analysis so my trick worked. Miraculously.

10. Added “forgot password” + change password features
Lastly, as I already have the email capabilities, adding the “forgot password” and “change password” were really a no-brainer.
Again, an template-based email is sent with a link that opens the “change password” page, with the hash instead of the “old password”. I got to work a bit with messages, which is cool: load the JSON of the next page, add the message to it and forward it to be rendered. that’s an awesome concept. This way I can tell after sending the “forgot password” mail, I simply return to the sign-in page (because this is where you came from, right?) with the pop-up message “email sent successfully.

OK. This was a long post. It took me about two hours to write. If I could only bring myself to write this short passage as a separate post after each commit, that would be great. until next time, cheers

Once again, I haven’t written in the blog for quite some time. I should probably set a fixed day of the week for me to write. I’ll get to that some day, but for now I’m in a constant struggle between blogging about the latest features or adding a new feature, assuming that the time may be used for only one of these options.

To be honest, after a long period in which I barely touch the project, having a gazillion other things to do, I’ve realized that I’m not making any progress because my time is too fragmented. half-an-hour here and there isn’t enough to make an honest progress. It takes me that amount of time just to sit next to my laptop and make sure I don’t have any unread messages. But things have changed in the past 2 weeks. I decided to give the project one hour, usually as soon as I get back home from work, before doing anything else. Having it as part of the routine actually help me get things done. So in the past I made several great updates and I’ll try to write on each one on separates blog posts

So one of the new features was adding a profile image for each user. By default user get the anonymous person image but they can change it, by going to their profile page (clicking on their name in the sidebar-menu) and uploading a new image.

I believe the image is important visually, as it bring more space and color to the somewhat-awfully dull looking text. It also help users find other users that their opinions and ideas are interesting to read. And finally, I think it give the entire forum a more humane look by providing faces you can relate to.

Three features added to my TO-DO list: First, the ability to crop image. Currently the image is automatically re-sized to the proper size and the user only needs to confirm it. Secondly, uploading the image requires two actions(select image, click “upload”). As far as I’m concerned, as soon as you selected the image, I can already show you the image for crop and confirmation. And lastly, dragging the image file unto the profile-page is very intuitive.