MY LAST THREE PROJECTS
WINS AND FAILURES
Created by /Anton Katunin @antulik
ABOUT ME
Bachelor of IT at UQ
MS Access and VBA
C# and .Net
Ruby on Rails
Javascript
Visualisations
AGENDA
TwinMaze
TopicRay.com
StoryLine.im
TWINMAZE
Movie recomendation website
Feb 2011
FRUSTRATION
Hard to find movies you would enjoy
General ratings don't work (IMDB)
e.g. movies you enjoy aren't neccessary ...
THE IDEA
What if ...
you had a clone of yourself
it could watch movies
and you could do other things
then he could tell yo...
TWINS
What if ...
You had not 1 twin
but 2 twins
or 10 twins
or 100 twins
or 1000 twins
PLAN
1. Select movies you like and don't
2. Run magic algorithm
3. Get personalised movie recommendations
ALGORITHM
Machine learning
Neuron networks
Data mining
just keep it simple
ALGORITHM
Step 1. Find your top Twins
Match each user with every other user
Calculate compatibility rating between each pa...
REPLACE INTO `user_twins`
(`user_id`, `twin_id`, `avg_difference`,
`percent`, `movies_matched`, `level`, `updated_at`)
(se...
ALGORITHM
Step 2. Calculate personalized movie ratings
Pick 1000 best twins
Combine their ratings
Predict rating for each ...
PROBLEM
Where do you get your movie catalogue?
IMDB.com - good and expensive
TMDB.org - okay and free
BIG PROBLEM
How do you test your recommendations
when you have 0 users?
MORE USERS = BETTER SYSTEM
Another Social network?
BOOTSTRAP THE DATA
get data from other websites
DARK DAYS
web crawler days
5 days
17GB of web pages (no images)
30k users
500k ratings
user accounts data?? WAT!?
ONE SUPRISING MORNING
/logs
/backups
THE NEXT DAY...
BANNED!
at least they fixed their security issues...
... you are welcome!
HOW TO SAVE $10/M
or hosting from home
TEAM
divide and conquer
business + design + development
founders vs contributors
50% OF NOTHING IS $0
TESTING
It works!
LAUNCH!!
Not sure if we ever launched
WHAT'S NEXT?
Push or drop?
Performance is slow
(10s + 2min per user)
Movie database quality is bad
Dealing with competitor...
WHAT'S NEXT?
Push or drop?
DROP!
TOPICRAY
multi-threaded chat system
Sep 2011
FRUSTRATION
chats are hard for work discussions
deep comments
GoogleWave is closed
HackerNews nested comments
CONTEXT
context in a converstion
or 'what do you mean'
think of bug reports
THE IDEA
What if ...
You could never mix context in your discussions
PROBLEM ANALYSIS
hierarchical data
very very deep hierarchical data
TOPICRAY PROGRESS
start with the end in mind
html map, topic list, linear chat view
styles, linear chat with rotation
map in ocanvas
map is draggable, chat space view
different layout with bigger chat view, focused message
trying another layout
and another, direction of chat is the same as on the map
switched to panels, map is expandable
straight layout + transparency
collapsable messages
collapsable messages with limit and size
moved away from draggable map to automatic map layout
moved away from panels, added bootstrap css, map is not expandable
consistent color scheme, topic headers, issues with ui overlap, topic name at the corner
unread messages, collapsable limit set to one
trying sunburst map layout in d3.js
added map view with icicle graph
icicle graph styles
removed inline map, sorted topic list, experimenting with floating messages
rebranded to TopicRay, added focused line, hacker news integration
topic list is transparent
icicle with unread messages
attempt to improve icicle
inline sunburst graph
animation for sunburst
tree depth indicator, inline message radar
new conversation tree view
DEMO
STACK
Backend:
Ruby on Rails + Postgres
Frontend:
HTML + CSS + SCSS + jQuery
backbone.js
oCanvas, d3.js
websockets (Pusher...
PERFORMANCE ISSUES
jQuery.animate is very slow
Firefox -> Chrome
TOPICRAY LAUNCH
HackerNews
We need blog
ONE MONTH LATER...
It's time to launch!!
and ...
NOTHING HAPPENED!
WHAT'S NEXT?
Push or drop?
1 year old
solid proof of concept
no real use case
no competitors
no market?
WHAT'S NEXT?
Push or drop?
HOLD!
LESSONS
Keep history of your progress
Don't strive for perfection
Release as soon as you can
Have a blog
Keep asking for f...
AND
ITERATE
ITERATE
ITERATE
STORYLINE
HISTORIC NEWS BROWSER
FRUSTRATION
I hate twitter!!
@antulik
Google Reader
300 rss articles per day
Too much information
Too little time
THE IDEA
What if ...
we had a tool which could
give us insights into information importance
tool which would
structure and...
get inspired
STORYLINE PROGRESS
started with google calendar
prettify
moved to force graph
group into lines
add twitter
focus on twitter, calendar list
focus on twitter, zoom
navigation slider
prettify, add top previews
add avatars
add inline link preview
remove link preview
x axis is minutes
twisted layout 1/2 (DNA?)
twisted layout 2/2
bended lines
problems with size
zoom 1/5
zoom 2/5
zoom 3/5
zoom 4/5
zoom 5/5
added mouse scroll
reddit and multi-calendar colors
make everything smaller
grouped per lines, less chaos
another twist layout attemp
lines with small overlap
top 10 reddit streams for 12 hours
screencast v2
calendars hidden, add links preview
HackerNews integration
repositioned ui, mark as read, 4 previews
smarter selection
add tutorial, joyride.js
DEMO
TESTING
common reaction
WOW! IT'S AWESOME!
WHAT IS IT?
EXPLANING
narrowing down
from
data visualisation tool
to
historic news browser
STACK
Backend:
Ruby on Rails + Postgres
Frontend:
HTML + CSS + SCSS + jQuery
ember.js
d3.js
twitter bootstrap
S3 + CloudFr...
BRANDING
'StoryLine' is too popular
HooDB.com?
StoryParticles.com?
.com?
StoryLine.im
LAUNCH
on HackerNews
+ facebook, twitter, gplus
attempt #2
at BrisJelly
LAUNCH STATS
in 24 hours
85 up votes
4k unique visitors
9.5k pageviews
600 visitors/hour peak
No performance issues during...
StoryLine on StoryLine
PERFORMANCE ISSUES
800+kb .js file
1000+ animated objects
Optimised filtering
Smart fetching
How many times to redraw
Chro...
LESSONS
Grow and change ideas
Browser perfomance is hard
Communicating ideas is hard
Iterate
Ember.js + d3.js is a killer ...
WHAT'S NEXT?
Push or drop?
PUSH!
CAMPJS
campjs.com
9-11th August
THE END
TwinMaze
TopicRay.com
StoryLine.im
@antulik
My last three projects - wins and failures
My last three projects - wins and failures
My last three projects - wins and failures
My last three projects - wins and failures
My last three projects - wins and failures
My last three projects - wins and failures
Upcoming SlideShare
Loading in …5
×

My last three projects - wins and failures

755 views

Published on

This is a talk about my last three project i've been working on. TwinMaze, TopicRay.com, StoryLine.com

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
755
On SlideShare
0
From Embeds
0
Number of Embeds
76
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

My last three projects - wins and failures

  1. 1. MY LAST THREE PROJECTS WINS AND FAILURES Created by /Anton Katunin @antulik
  2. 2. ABOUT ME Bachelor of IT at UQ MS Access and VBA C# and .Net Ruby on Rails Javascript Visualisations
  3. 3. AGENDA TwinMaze TopicRay.com StoryLine.im
  4. 4. TWINMAZE Movie recomendation website Feb 2011
  5. 5. FRUSTRATION Hard to find movies you would enjoy General ratings don't work (IMDB) e.g. movies you enjoy aren't neccessary have high rating
  6. 6. THE IDEA What if ... you had a clone of yourself it could watch movies and you could do other things then he could tell you what is good and what is not just like twins
  7. 7. TWINS What if ... You had not 1 twin but 2 twins or 10 twins or 100 twins or 1000 twins
  8. 8. PLAN 1. Select movies you like and don't 2. Run magic algorithm 3. Get personalised movie recommendations
  9. 9. ALGORITHM Machine learning Neuron networks Data mining just keep it simple
  10. 10. ALGORITHM Step 1. Find your top Twins Match each user with every other user Calculate compatibility rating between each pair of users
  11. 11. REPLACE INTO `user_twins` (`user_id`, `twin_id`, `avg_difference`, `percent`, `movies_matched`, `level`, `updated_at`) (select user_id,twin_id, avg_difference, percent, movies _matched, if(percent > 92.5, 1, if(percent > 90, 2, if(percent > 87.5, 3, if(percent > 85, 4, if(percent > 82.5, 5, if(percent > 80, 6, if(percent > 77.5, 7, if(percent > 75, 8, 9)))))))), CURRENT_TIMESTAMP from (select sr.user_id as user_id, sr.twin_id as twin_id, Sum(single_points) as avg_difference, (10-(Sum(single_points)/count(*)))*10 as percent, count( *) as movies_matched from (select mr1.user_id as user_id, mr2.user_id as twin_id, ABS(mr1.rating-mr2.rating) as single_points from user_votes as mr1 join user_votes as mr2 on mr1.movie_id = mr2.movie_id and mr1.user_id <> mr2.us er_id where mr1.user_id = %d) as sr group by sr.user_id, sr.twin_id having count(*) >= %d) as t2 );
  12. 12. ALGORITHM Step 2. Calculate personalized movie ratings Pick 1000 best twins Combine their ratings Predict rating for each movie Pick best movies which user haven't seen select ... Power(10-level, ln(count(*))/ln(2.5)) * count(*) * avg(ratin g) as rating_points_sum, Power(10-level, ln(count(*))/ln(2.5)) * count(*) as vote_poi nts_sum, ln(count(*))/ln(2.5) as power,
  13. 13. PROBLEM Where do you get your movie catalogue? IMDB.com - good and expensive TMDB.org - okay and free
  14. 14. BIG PROBLEM How do you test your recommendations when you have 0 users?
  15. 15. MORE USERS = BETTER SYSTEM Another Social network?
  16. 16. BOOTSTRAP THE DATA get data from other websites
  17. 17. DARK DAYS web crawler days 5 days 17GB of web pages (no images) 30k users 500k ratings user accounts data?? WAT!?
  18. 18. ONE SUPRISING MORNING /logs /backups
  19. 19. THE NEXT DAY... BANNED! at least they fixed their security issues... ... you are welcome!
  20. 20. HOW TO SAVE $10/M or hosting from home
  21. 21. TEAM divide and conquer business + design + development founders vs contributors
  22. 22. 50% OF NOTHING IS $0
  23. 23. TESTING It works!
  24. 24. LAUNCH!! Not sure if we ever launched
  25. 25. WHAT'S NEXT? Push or drop? Performance is slow (10s + 2min per user) Movie database quality is bad Dealing with competitors Social network effect
  26. 26. WHAT'S NEXT? Push or drop? DROP!
  27. 27. TOPICRAY multi-threaded chat system Sep 2011
  28. 28. FRUSTRATION chats are hard for work discussions deep comments GoogleWave is closed
  29. 29. HackerNews nested comments
  30. 30. CONTEXT context in a converstion or 'what do you mean' think of bug reports
  31. 31. THE IDEA What if ... You could never mix context in your discussions
  32. 32. PROBLEM ANALYSIS hierarchical data very very deep hierarchical data
  33. 33. TOPICRAY PROGRESS
  34. 34. start with the end in mind
  35. 35. html map, topic list, linear chat view
  36. 36. styles, linear chat with rotation
  37. 37. map in ocanvas
  38. 38. map is draggable, chat space view
  39. 39. different layout with bigger chat view, focused message
  40. 40. trying another layout
  41. 41. and another, direction of chat is the same as on the map
  42. 42. switched to panels, map is expandable
  43. 43. straight layout + transparency
  44. 44. collapsable messages
  45. 45. collapsable messages with limit and size
  46. 46. moved away from draggable map to automatic map layout
  47. 47. moved away from panels, added bootstrap css, map is not expandable
  48. 48. consistent color scheme, topic headers, issues with ui overlap, topic name at the corner
  49. 49. unread messages, collapsable limit set to one
  50. 50. trying sunburst map layout in d3.js
  51. 51. added map view with icicle graph
  52. 52. icicle graph styles
  53. 53. removed inline map, sorted topic list, experimenting with floating messages
  54. 54. rebranded to TopicRay, added focused line, hacker news integration
  55. 55. topic list is transparent
  56. 56. icicle with unread messages
  57. 57. attempt to improve icicle
  58. 58. inline sunburst graph
  59. 59. animation for sunburst
  60. 60. tree depth indicator, inline message radar
  61. 61. new conversation tree view
  62. 62. DEMO
  63. 63. STACK Backend: Ruby on Rails + Postgres Frontend: HTML + CSS + SCSS + jQuery backbone.js oCanvas, d3.js websockets (Pusher) twitter bootstrap and others
  64. 64. PERFORMANCE ISSUES jQuery.animate is very slow Firefox -> Chrome
  65. 65. TOPICRAY LAUNCH HackerNews We need blog
  66. 66. ONE MONTH LATER... It's time to launch!! and ... NOTHING HAPPENED!
  67. 67. WHAT'S NEXT? Push or drop? 1 year old solid proof of concept no real use case no competitors no market?
  68. 68. WHAT'S NEXT? Push or drop? HOLD!
  69. 69. LESSONS Keep history of your progress Don't strive for perfection Release as soon as you can Have a blog Keep asking for feedback Javascript frameworks are good Browsers are not as fast
  70. 70. AND ITERATE ITERATE ITERATE
  71. 71. STORYLINE HISTORIC NEWS BROWSER
  72. 72. FRUSTRATION I hate twitter!! @antulik Google Reader 300 rss articles per day Too much information Too little time
  73. 73. THE IDEA What if ... we had a tool which could give us insights into information importance tool which would structure and prioritise information
  74. 74. get inspired
  75. 75. STORYLINE PROGRESS
  76. 76. started with google calendar
  77. 77. prettify
  78. 78. moved to force graph
  79. 79. group into lines
  80. 80. add twitter
  81. 81. focus on twitter, calendar list
  82. 82. focus on twitter, zoom
  83. 83. navigation slider
  84. 84. prettify, add top previews
  85. 85. add avatars
  86. 86. add inline link preview
  87. 87. remove link preview
  88. 88. x axis is minutes
  89. 89. twisted layout 1/2 (DNA?)
  90. 90. twisted layout 2/2
  91. 91. bended lines
  92. 92. problems with size
  93. 93. zoom 1/5
  94. 94. zoom 2/5
  95. 95. zoom 3/5
  96. 96. zoom 4/5
  97. 97. zoom 5/5
  98. 98. added mouse scroll
  99. 99. reddit and multi-calendar colors
  100. 100. make everything smaller
  101. 101. grouped per lines, less chaos
  102. 102. another twist layout attemp
  103. 103. lines with small overlap
  104. 104. top 10 reddit streams for 12 hours
  105. 105. screencast v2
  106. 106. calendars hidden, add links preview
  107. 107. HackerNews integration
  108. 108. repositioned ui, mark as read, 4 previews
  109. 109. smarter selection
  110. 110. add tutorial, joyride.js
  111. 111. DEMO
  112. 112. TESTING common reaction WOW! IT'S AWESOME! WHAT IS IT?
  113. 113. EXPLANING narrowing down from data visualisation tool to historic news browser
  114. 114. STACK Backend: Ruby on Rails + Postgres Frontend: HTML + CSS + SCSS + jQuery ember.js d3.js twitter bootstrap S3 + CloudFront CDN and others
  115. 115. BRANDING 'StoryLine' is too popular HooDB.com? StoryParticles.com? .com? StoryLine.im
  116. 116. LAUNCH on HackerNews + facebook, twitter, gplus attempt #2 at BrisJelly
  117. 117. LAUNCH STATS in 24 hours 85 up votes 4k unique visitors 9.5k pageviews 600 visitors/hour peak No performance issues during launch
  118. 118. StoryLine on StoryLine
  119. 119. PERFORMANCE ISSUES 800+kb .js file 1000+ animated objects Optimised filtering Smart fetching How many times to redraw Chrome vs others
  120. 120. LESSONS Grow and change ideas Browser perfomance is hard Communicating ideas is hard Iterate Ember.js + d3.js is a killer combo Caching and CDN - FTW! Web analytics to measure success
  121. 121. WHAT'S NEXT? Push or drop? PUSH!
  122. 122. CAMPJS campjs.com 9-11th August
  123. 123. THE END TwinMaze TopicRay.com StoryLine.im @antulik

×