Alexander Beletsky's development blog

My profession is engineering

My application for 10KAppart competition

Recently, I’ve met really interesting competition by @mixonline called 10K Appart. Due to the rules, you have to create an application total size of which should not be more than 10K zipped content. Moreover, it have to be pure client-side application, utilizing HTML5/CSS3 features for responsible design and open API for gathering data. No frameworks, no 3rd parties. I decided to participate.

I’ve spent several hours to catch up idea. I was thinking about some application for twitter or gmail, but finally I stopped on github. First of all, github is my favorite service, it has clear and open API. Last year I contributed to javascript github-api, so I knew how to start. Application idea is simple: analyze github account and based on actual achievements (number of repos, forks, issues etc.) assign corresponding badge.

I did it a style of weekend project, started up Friday evening, I’ve spend 3 hours to complete github API adapter and application logic. As always, hard part was - design.

Even I a bit improved my design skill through this year.. still it is big challenge. I choose light blue color for main color and dark blue as auxiliary. I went with Google Web Fonts that I used before and was happy with results. Playing out with colors and gradients, I came up with such front page:

code

With much help of Sasha we have designed badges part of application. I still not 100% happy, but at least it was quite fast.

code

After application were more or less ready, I put it on temporary hosting asking my dear twitter help me to validate it. I received a lot of great feedback (thanks a lot, guys). After all bugs were fixed, I posted my entry to 10K appart.

I’ve been waiting about 4 days, to receive an answer. Meanwhile, I’ve seen that new application are being posted.. but not mine. Finally, they responded to me saying “Sorry, but Google Web Fonts are not allowed”. That was actually my bad, but I haven’t thought that are treated as 3rd party. Anyway, I had to switch to TypeKit very fast. I didn’t get same results as with Web Fonts, but I had no time for finding perfect match and reapplied again.

It finally available here - http://10k.aneventapart.com/Entry/Details/512

I would be happy if you try it, tweet it, comment on site. Sources are placed on github, so If you think to improve design or create new type of badge, you are welcome!