Wow. This is totally cool! I like how simple your implementation is. I can see this is not only useful as timeline of important life events, but also in recording company milestones.
My quick web search didn't show anything without caveats, but if there's any decent javascript that can be used to make the mouse wheel scroll the page sideways, that would be a really nice addition.
I thought of that too, probably using some 'mousewheel' event, but later I realise the page height may grow as well (with vertical scrollbar) depending on the number of events.
Maybe a hybrid approach could work? Automatically scroll down and to the right simultaneously. If I understood it correctly, the events in the timeline will go diagonally down. So if the scrolling happens intelligently by following the events, that should work, shouldn’t it?
People might not enjoy your 'joke', but you do have a very good point.
When I looked at it the first time, the mouse problem didn't came up. I used my two fingers and like in the authors mind I just swiped to the left and the timeline moved as expected.
After reading the comments, and seeing the 'mouse problem' I could see it in my minds eye how it 'breaks'.
But seeing your comment I realised the web site only breaks for 'older' input devices.
I believe the website would work just as nicely on any multi touch cellphone, and it would make sense to scroll from left to right.
I wouldn't call it a very good point. I'd call it, based in no small part on your response, a bias towards people who use MacBooks. It's unfortunate to see this attitude towards the very large segment of the internet-using population that are using "older" input devices (which are still much more practical for many use cases).
and iPhones and iPads and android phones and kindle tablets and ....
Web traffic for some (most?) sites is already tipping over the half-mobile-usage direction (where "mobile" means "doesn't have a built in full-sized keyboard").
Exactly, its not just MacBooks. I used a Lenovo recently that has multitouch and scrolls wonderfully with two fingers. At work, I use a multitouch trackpad instead of a mouse.
If you actually look at the mousewheel JS events generated by goddamn Macbook trackpads, they're painfully evil. I have yet to find a really solid library for handling them, and my own attempts are hackish to the point where I'm considering splitting it into a special "Macbook trackpad" case. On the browser.
To accommodate for small screens/windows it scrolls down until it hits the bottom and then goes right. On the way back it scrolls up first, until it reaches the top, then towards the left.
I've been following Cheeaun's work for a few years now. The guy writes plugins for various tools, always hacking away at things. It's quite entertaining to see what he comes up with next.
I've been using his http://cheeaun.github.io/hackerweb/ to read HN on my phone for a while (is it years yet?) now. I try others as they appear and so far continually go back to his.
JS has some OK solutions these days (yours was probably very early), but print and other formats can be a hassle.
For example, I spent some time looking at TeX solutions for timelines a few years back and found there were none with support for decent multi-page rendering, etc.
Conclusion: everyone loves a good timeline. Spatial reasoning is a great way to simplify huge collections of dates and times to filter for visual trends. Unfortunately, there's really few good tools. There probably needs to be a standard markup language in this space.
You are right I should do something rather than just complaining. Maybe somebody (or me) could do a patch that allows YYYY-MM-DD dates with dashes. Or YYYY-MM to specify a month.
http://en.wikipedia.org/wiki/ISO_8601
I'd love to see this as a zoomable timeline, where less important events are less visible when zoomed out, so that the timeline itself is fully visible at 100%.
Draggable timeline in a max 100% w/h window would fix the scrolling weirdness for folks who care, and would also be usable on a touch device, but I think the interaction should always feel full screen, regardless of where you are in the timeline.
Love this idea, quite a lot actually.
Perhaps this is marketable to the folks at Timehop? :)
Feel absolutely free to use this as a starting point to make your own. I tried to separate the concerns layout and graphics a bit -- but it's ofc a bit hacky. This is a CV, not software, after all. I'd appreciate to see what you did with it :)
Looks wonderful but the horizontal navigation goes out of control. I would take Path's approach –if I have to mention something publicly known– to display the important events of your life.
It's certainly not meant to be a complete solution, but it can be expanded to include both horizontal and vertical scrolling, so that either will work.
103 comments
[ 3.1 ms ] story [ 185 ms ] threadCongrates, man!
When I looked at it the first time, the mouse problem didn't came up. I used my two fingers and like in the authors mind I just swiped to the left and the timeline moved as expected.
After reading the comments, and seeing the 'mouse problem' I could see it in my minds eye how it 'breaks'.
But seeing your comment I realised the web site only breaks for 'older' input devices.
I believe the website would work just as nicely on any multi touch cellphone, and it would make sense to scroll from left to right.
and iPhones and iPads and android phones and kindle tablets and ....
Web traffic for some (most?) sites is already tipping over the half-mobile-usage direction (where "mobile" means "doesn't have a built in full-sized keyboard").
Also the scrollwheel on my mouse happily scrolled the page to the right when I pushed it to the right.
Now middle-drag works (press and hold down mousewheel, drag for direction of scroll).
Their JS in not minified, you may want to take a look.
To accommodate for small screens/windows it scrolls down until it hits the bottom and then goes right. On the way back it scrolls up first, until it reaches the top, then towards the left.
2. like most of the ios apps out there, there is no thread-level support. All comments are on the same level.
2. ??? Comments threads are collapsible and indented properly.
Are you perhaps not looking at it on a phone? Try it on an iPhone, it's great.
http://anvilformac.com/
http://www.preceden.com
Fun fact: Preceden was launched on HN almost four years ago: https://news.ycombinator.com/item?id=1114834 :)
For example, I spent some time looking at TeX solutions for timelines a few years back and found there were none with support for decent multi-page rendering, etc.
I spent a few hours over the last few days finally improving https://en.wikipedia.org/wiki/Template:Buddhist_traditions_t... too.
Conclusion: everyone loves a good timeline. Spatial reasoning is a great way to simplify huge collections of dates and times to filter for visual trends. Unfortunately, there's really few good tools. There probably needs to be a standard markup language in this space.
Draggable timeline in a max 100% w/h window would fix the scrolling weirdness for folks who care, and would also be usable on a touch device, but I think the interaction should always feel full screen, regardless of where you are in the timeline.
Love this idea, quite a lot actually.
Perhaps this is marketable to the folks at Timehop? :)
Thanks!
Feel absolutely free to use this as a starting point to make your own. I tried to separate the concerns layout and graphics a bit -- but it's ofc a bit hacky. This is a CV, not software, after all. I'd appreciate to see what you did with it :)
Though I wonder why not yyyy-mm-dd
http://www.preceden.com/timelines/64935-visakanv
hope the cross-reference is useful somehow!
Pic >> https://alpha.app.net/jmergy/post/16369534/photo/1
Nice work and implementation.