Show HN: Life – A timeline of important events in (your) life | Hacker News Reader

Show HN: Life – A timeline of important events in (your) life

github.com

268 pointscheeaun94 comments

Open articleView on HN

kind of similar to my CV: http://stbr.me/blog/files/cv.pdf (edit: which I did in latex)

Thats neat! Is the source available somewhere?

Hm, I'll try to find it and put it on github some time :) I'll update you on that.

Thanks!

your résumé looks real good! please do share the source if you can

Very nice, France just disappeared.

Same goes for the UK

old enemies ;)

I love Latex and I'd love to build upon what you have done!

https://github.com/kaeluka/cv

Generous, Sir. Thank You. I will in return post mine on GitHub when finished.

The versatility of *tex never ceases to impress me!

Nice. See also: http://worrydream.com/#!/Bio.

Smells of TikZ! Very nicely done.

It indeed is tikz. Source is on github.

That is gorgeous, I love the design.

That looks great! While cramming up all information into a page of two, a time line would really help. Please share the source if you can.

to everyone who asked: https://github.com/kaeluka/cv

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 :)

@kaeluka awesome. For a small timeline this is perfect! I also like vertical timeline. It's too spare for horizontal.

Related: I like the timelines on Bret Vector's Bio page http://worrydream.com/#!/Bio

This is fantastic. I just spent half an hour reading through his site.

Great design but loads slow. Wish it's as snappy as it's beautiful

upgrade, it was near instant for me and I have a crappy dell i5 laptop running Ubuntu

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.

1. you have to click on the comment icon to actually read icons

2. like most of the ios apps out there, there is no thread-level support. All comments are on the same level.

1. I don't see a problem with it. Go to the right for the details and back to the left for the front page. Makes sense.

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.

Looks nice. Also out there, if you didn't know, is Preceden, which I have enjoyed using.

http://www.preceden.com

Preceden creator here; thank you for the mention.

Fun fact: Preceden was launched on HN almost four years ago: https://news.ycombinator.com/item?id=1114834 :)

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.

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.

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.

Congrates, man!

Thanks :) Haven't really thought of company milestones... but I guess you're right!

My favorite part of your description:

  How about Facebook timeline? Meh.

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.

I'm curious about why you chose the horizontal plane in the first place, given that the web defaults to vertical.

Well uh, that's how I visualize my life timeline in my head :) A straight horizontal path, left to right instead of top to bottom.

Maybe bottom to top would be a better approach :)

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?

A mouse? That's one of those archaic precursors to multitouch trackpads, right?

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).

a bias towards people who use MacBooks.

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.

Enjoy playing games or using anything else than requires precision and speed on your fancy multitouch trackpad.

Also the scrollwheel on my mouse happily scrolled the page to the right when I pushed it to the right.

I just press shift + scroll wheel for horizontal scrolling

Just fixed this now by altering "general.autoScroll" in Firefox's about:config [on Kubuntu 13.04] to "true" [double-click it to toggle].

Now middle-drag works (press and hold down mousewheel, drag for direction of scroll).

This site has implemented this. http://vitaminsdesign.com/projects/lego-calendar/

Their JS in not minified, you may want to take a look.

I did something like that on my personal site, eg. http://jonasneubert.com/projects/printablegeography

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.

Incidentally the new Myspace does this to good effect.

Wow. The new Myspace is actually quite beautiful.

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? :)

Check out www.timeglider.com ---- a zooming timeline where importance is tied to size/visibility of events. full disclosure: my creation.

How do you envision designating important events - or should the app determine those automatically?

Why didn't you just use this? https://github.com/NUKnightLab/TimelineJS

That looks pretty complicated compared to the one posted here.

I tried to use it, but it requires exact dates. Mine is obviously over-simplified and allows flexible (rough) dates.

http://www.simile-widgets.org/timeline/

Neat, would be cool to add a link or hover over feature too for additional info on a particular event. I'll try to work on it if I have time, but hopefully someone else more capable is on it already!

Reminds me of dandelife. http://www.crunchbase.com/company/dandelife

This article says dandelife open sourced its software: http://dealbook.nytimes.com/2009/01/09/dandelifes-struggles-...

Why not flip it at the 45 degree axis to make it go vertically instead of horizontally? That way we can scroll normally to see more.

If you flip it, the text would be mirrored. Rotate.

Just once I'd like to see a site with a horizontal scroll that doesn't just assume I'm using an Apple device.

I've used Prezi recently for this as well.

Pic >> https://alpha.app.net/jmergy/post/16369534/photo/1

Nice. I would like to navigate clicking. Also, I would like to see pictures.

Everything is just a pull request away :)

and some hours of code depending your level and experience :D

Note - here's a quick shot at how a scrollwheel modification may work: http://codepen.io/jcutrell/pen/jqiDK

But that then breaks natural horizontal scrolling if you're using a trackpad.

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.

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.

Another similar project http://almende.github.io/chap-links-library/timeline.html

Now let's have a fork that uses remind[1] syntax.

[1]: http://linux.die.net/man/1/remind

What's the simplest way to run it locally? I don't necessarily want to upload it to gh-pages, but simply opening the html won't work either.

Make a copy of life.example.md, rename it to life.md, edit it. Run the page on a local server.

Thanks. For anyone in the same position - Anvil is a good option for that.

http://anvilformac.com/

I didn't realize until far too recently that Python includes a built-in web server: 1. git clone https://github.com/cheeaun/life.git 2. cd life 3. python -m SimpleHTTPServer 8000 4. http://localhost:8000/

I can't handle the day/month/year syntax

Fork it.

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

Looks great, I wanted to something similar, glad its here now :) But as most are saying, the horizontal view is not very user friendly!

That would make for a really awesome cv/resume! And what if each block could also be a timeline of its own for more detail?

Some see a timeline for your life. I see potential for a visualized scheduling app for client projects.

Nice work and implementation.

Looks great! Would be cool if you could somehow show everything in one screen. Definitely trying it out.

Something else this could be useful for is in visualization of historical events on a common timeline.

The DateTime syntax could be better explained: is it DDMMYYYY? Or MMDDYYYY?

day/month/year in the readme is pretty clear I'd say.

Though I wonder why not yyyy-mm-dd

very nice work! I can definitely see adding links to other Life. Linking parent, child, partner, friends, .. you can even have companies ... would create an interesting graph of your life

hey that's like the weird website i made for my internets a few years ago! http://www.lzimm.com

This is really nice. Definitely going to make my own.

Good stuff. It looks great! Will definitely use it.

This idea is great! I love it!

Very nice indeed!

Lovely :)

Reply on news.ycombinator.com