StumbleUpon frontpage prototype assignment

It's time to update this blog again. It's been a while. I completed a range of small assignments, which don't worth to be even mentioned. A lot of HTML, CSS, ExtJS, Prototyping and Photoshoping. But here is the one interesting, which proved to me the importance of HTM5, and showed how much development can rely on frontend, how much processor work now is performed on client's browser, and which direction UI technologies are moving.

StumbleUpon contacted me for frontend position, and gave me an assignment. I did not express too much enthusiasm professionalism motivation aptitude to work in this cool fast paced San Francisco shop, I guess. I completed the assignment, and never heard from them again.
Here is the result of the assignment: http://portfolio.kardash.net/StumbleUpon/.
Demo prototype of StumbleUpon frontpage.
HTML is very simple. Utilizing semantics of HTML5, tags such as <header>, <nav>, <aside>, <section>, <footer>. All the formatting is done by css files. Special condition for lower than 10 versions of Internet Explorer which do not support new set of HTML5 specs tags:
 
   

I used jQuery as a basic JS library.
What is really cool about this demo page is that nothing is hard coded. I mean all the content is taken from JSON-like structure located somewhere else. For the demonstration purposes, it's sucked from this javascript file: http://portfolio.kardash.net/StumbleUpon/demo_data.js.
Styles, text truncates, icons - everything was carefully detailed and polished.
Primary Content Block, Secondary Content Block, Followers section - they all are just empty placeholders in HTML!
<!-- Main stumbles go here -->
<!-- Favorite topics go here --> 
<!-- Followers avatars go here -->

Another cool thing is sorting by Views, Title, Category of the data taken from the data.js above file. Pure javascript implementation. Quite a work was done here: http://portfolio.kardash.net/StumbleUpon/demo_su.js.


These were StumbleUpon requirements.

It's a history now.

Comments

Popular posts from this blog

Data visualization for Roadmap Microsite (Angular and D3.js)

Conceptual design

Four tools for prototyping: Sketch, Figma, Principle, and FramerX