cheeaun / life

Life - a timeline of important events in my life

Life

This is something that I've wanted to build for a long time. It's a timeline of important events in my life, visualized in a way my mind always imagine it. There was something called Lifepath.me but now it's gone. How about Facebook timeline? Meh.

So, this is it. Have a look at cheeaun.life.

Features

• Super simple
• No fancy formatting
• No fancy setup
• No fancy effects
• Flexible datetimes because sometimes you don't remember the exact date of an event

How to contribute

1. Fork this project.
2. Write code.
3. Make pull requests.

How to setup your own Life

1. Fork this project.
2. git checkout -b gh-pages (or any branch name you like)
3. Make a copy of life.example.md, rename it to life.md.
4. Add your life events into life.md.
5. Preview it on a local server. Use python -m http.server or http-server.
6. Commit life.md (not in master branch).
7. git push origin gh-pages -f and publish to GitHub Pages.
8. Update the website link in your GitHub repo description.
9. Tell the world about your Life.
10. Add your Life to the Lives page.

How to upgrade your Life

1. git checkout master
2. git remote add cheeaun https://github.com/cheeaun/life.git
3. git fetch cheeaun and git merge cheeaun/master to upgrade to latest Life.
4. git checkout gh-pages and git merge master to sync changes back to GitHub Pages.

Learn more.

For those who forked the earlier version of Life, these are the steps that I would recommend (requires some Git-fu):

1. Backup your life.md.
2. Reset (hard) your fork to this repo's master branch.
3. Clean up your gh-pages.
4. Re-commit your life.md there.
5. Make sure your master branch is untouched so that future updates work.

How to configure your Life

1. Make a copy of config.example.json, rename it to config.json.
2. Only commit it in gh-pages branch.

The configuration:

• customStylesheetURL - (string, default to null) Path to a custom stylesheet file, for those who doesn't like the default theme.
• yearLength - (number, default to 120) The width of the year grids, in pixels.
• hideAge - (boolean, default to false) Option to hide age from year axis.

Datetime "syntax"

• 2000 - event that happen in that year
• 01/2000 - event that happen in that month/year
• 01/01/2000 - event that happen exactly in that day/month/year
• 2001-2005, 10/2001-02/03/2005 - event that happen within the two dates
• ~2005 - event that happen around the time in that year
• 2005-~ - event that happen from that year and beyond (now).

Other people's Lives

Here's a compilation of Lives from the people who have forked Life.

License

MIT

life's Issues

Simple server ?

Do we need a simple server, suppose one needs to host is else where?

Something as simple as :

 var connect = require('connect');
 connect.createServer(connect.static(__dirname)).listen(1337);

If worth, happy to send a PR 😉

allow to compile standalone html document for local usage without webserver

Hi there,

great project!

I think it would be a nice addition to have a shell/python/whatever script that takes the index.html and life.md files and combines them into a single index-standalone.html (name subject to change).
index-standalone.htm would contain everything (html, javascript, css and the actual data) needed so you can just double click it, firefox/chrome/... opens up and "everything works". No webserver needed for testing/debugging and you could share it via mail/usb-stick, ...

Best Regards
Michael

Support non-root paths

As far as I understand, the XHR is made to the root of the domain. What if, lets say, my index.html resides in some subpath?

As a default behavior, it would be nice to get the current url, strip the last segment of it and append the life or config file paths. That said, it would also be nice to give the user the chance of specifying (in index.html I guess) where to load the resources from.

Is Life mobile friendly?

Hi,

I am having issues to view my lifeline on mobile. Is it possible that the site is not mobile-friendly?

Can we make it responsive?

On Desktop

On Mobile

Idea: grouping

It would be nice to be able to group events. Say, work (2013-2014: Job at X, 2014-2015: Job at Y), school, relationships, and so on :)

Great work by the way! Not expecting this to happen but just thought I'd throw it out there.

The end of a date range should not be inclusive

If I make an event that spans 1990-1993, and another that spans 1993-1994, I would expect those not to overlap.

However, the current implementation interprets these ranges as:

    Jan 1, 1990 - Dec 31, 1993 and
    Jan 1, 1993 - Dec 31, 1994. 

Thus they overlap by a year.

Wouldn't it be more appropriate to interpret it as:

    Jan 1, 1990 - Dec 31, 1992 and
    Jan 1, 1993 - Dec 31, 1993. 

Suggestion: format dates in ISO 8601

Using ISO 8601 would prevent confusion between US/rest of world date formatting when using the xx/xx/xxxx format. And you could still use your nice fuzzy matching.

As usual, XKCD speaks the truth:

A single year span displays as 2 years

Not certain this is the intended display for this situation. Maybe explain to me if I am wrong/not thinking clearly.

At first glance I see "2003-2004 Secondary school (Form 6) - SMKDOB" and I'm like okay, a single year of Secondary school.
But then I look at the bar and it renders as what my brain interprets as 2 years.

Now, I know this is simply a factor of not knowing exactly when in 2003, or 2004 that event started and ended. However because that time span itself represents 1 year, it seems incongruent. Would it not make more (render)sense to consistently pick the start/end/middle of both the start and end date in spans where you only have a year to work with?

Can you make the life expansion vertical instead of horizontal?

When the life event increases, it would be difficult to shift right the the latest event. If it is vertical, user can scroll the mouse wheel or click End key on the keyboard to the latest event.

Use real Markdown parsing

Some people might be confused by the markdown syntax and later realized that it's not parsed that way.

Events not aligning to top timeline

Events towards the end of the timeline are not aligning to the top year markers. Events for the year 2012 are appearing under 2013, events starting in 2010 are showing as starting in 2012.

Sample life.md:

Test life
===============
- 11/12/1984 Date 1
- 08/1996-06/2003 Month to Month
- 09/2003-12/2006 Month to Month
- 02/21/2007-8/27/2010 Date to Date
- 08/30/2010-~ Month to Current
- 08/2003 Month Event 1
- 10/24/2009 Date Event 2
- 03/19/2012 Date Event 3
- 12/13/2012 Date Event 4
- 11/05/2013 Date Event 5
- 10/29/2012-~ Date to Current

Screenshot for the above life.md where items marked in green are correct and items marked in red are slightly off.

For example, the event for "- 03/19/2012 Date Event 3" should appear under 2012, but actually appears in the middle of 2013.

Add life.md to .gitignore

Add another file called life.md.sample so that when there are updates in Life, my life won't conflict with other people's life. 😂

Add instructions for people to create gh-pages branch then only create a life.md there. master branch will be the updates branch, not touching life.md at all.

LICENSE?

you must include license text for MIT license

Add custom display format for datetimes

In life.md - 31/12/2013
On web page - 12 Dec 2013 or whatever format.

This would probably require Moment.js as a dependency.

Support for future events

Currently, if your event list includes dates in the future, the background year markers will not render past 2014.The event renders properly, but dotted year markers do not continue past 2014.

Add liks and descriptions to events

It would be great if events were linkable and when moving the mouse over the their description were displayed. I don't know how that would translate to the markdown syntax though (IMO, yaml would be far more appropriate).

Ambitious: pull timeline from Facebook

Okay

some structure

Your project is pretty interesting, make a timeline yourself ...on my list too but for to long.

But the structure keeps me from touching it. If you seperate e.g. the css from html ...someone comes up with fancy css, you can add via config. Or someone would like to think about: how to combine / add pictures to this timeline ;)

What are your plans?

Ambitious: pull timeline from LinkedIn

Maybe the whole point of this is to get away from other services, but I personally would love it.

Support for non-life events

First, I love the idea of writing markdown (or simple syntax) and having a timeline automagically generated. However, I ran into some problems when I tried generate events not based on my life. For example, I tried to input events for a career plan. I wrote events for past, present and future. This works mostly well, but there are some obvious problems:

• The "born" event really restricts what kind of events can be used. Without the born event, the timeline does not render properly. It would be better to have an optional start date of your timeline.
• Furthermore, future dates pose a problem. Writing future dates in my life.md file render properly, but the timeline does not have future years. An end date option would be nice.

A simple solution might be this:

1. Render timeline according to born event.
2. If no born event is given, render timeline with start / end time events.
3. If either start / end time event is not given, default timeline start/end time to +/- six months from the closest event.

Perhaps, this enhancement is outside of the scope of this project, but I think the feature would definitely be useful.

find

Add color coding

E. g. work could be red, personal life could be green, web presence could be blue, etc.

Horizontal scrolling using a mouse wheel

It would be nice to be able to scroll horizontally by scrolling the mouse instead of dragging the scrollbar.

Group

Can you divide by group, exp: travel, wrok experience, shopping.

OT: Move JS error logging services gist to GitHub repo?

Hi Lim,

Thanks for compiling available JavaScript error logging services at https://gist.github.com/cheeaun/5835757.

As you might know, the OP of gists isn't notified of comments on the gist. Also, users can't contribute changes.

Would you consider moving that gist to a regular repo with just one .md file?

Idea: attach image to a date

Hello guys! First congrats for the project and idea. I love it!

Today, I had an idea to improve the functionality of the life project. Could be awesome to attach an image to a particular date. This is a really cool way to remember the "important date" but also has a visual memory.

I dont know if someone propose this before, but just want to share. What do you think?

Regards.
Jorge.