4 ms·

Show HN: Cascade Timeline Maker

132 points by koch 5y ago

koch 5y ago
Some of you may remember @cheeaun's post[1] 9 years ago about making a timeline of life events. I made a timeline maker based off that. [1] https://news.ycombinator.com/item?id=6833565 https://news.ycombinator.com/item?id=6833565
- capableweb 5y ago
  This is great! Love the simple syntax that anyone could grasp in just a few seconds. Nice work! Some feature requests: - Be able to resize the "code" pane and the preview - Faster update of the timeline on change - Use a standardized date format, like ISO 8601
  - rkagerer 5y ago
    Faster update of the timeline on change I agree. If you're still processing a previous change you can defer subsequent updates (to what I assume is your polling mechanism), but when the event loop is idle the first one should be near-instantaneous.
    - koch 5y ago
      This one is easy enough, I went ahead and cut it down to 400ms from 1000ms. The only reason it isn't instantaneous is because I'm regenerating everything in the iframe each time, as my initial goal was to just take the resultant HTML and paste it as a page on my personal site. If it was part of the same document (not in a frame) it would be a vue component and update automatically/instantly.
- cheeaun 5y ago
  Hey that's me! Wow it's nice to know that my old post/project is still being mentioned now :D I'm no longer adding features to Life [1]. There were too many feature requests for something that I want to be simple. I'm still updating my own Life events [2] tho' Two questions/notes: 1. You sort of use a striped-down Markdown(?) format, any reason for that? I use Markdown because it's also can be human-readable in some way, even though I don't really use a legit Markdown parser :P 2. Your date range format seems slightly different than mine. Maybe you need to document that somewhere :) [1] https://github.com/cheeaun/life https://github.com/cheeaun/life [2] https://cheeaun.life/ https://cheeaun.life/
- swyx 5y ago
  so cool.. what got you to make something based off a 9 year old post?!
parhamn 5y ago
Very cool! I've been thinking a lot about how to do this in a good cross platform way for tab history on a browser I've been building (https://synth.app https://synth.app). I think a major issue is that pinching is very necessary to change the time scale if the horizontal axis is long enough (and it will be for browsing history), but pinch support outside the MacOS/iOS is sketchy at best. I haven't yet discovered the useful UX here. This was inspired by https://refresh.study https://refresh.study (see: Browsing History section) which has a good mock of what it can look like. If anyone has any other examples, I'd love to see it.
johnnyballgame 5y ago
Very cool and well done! Feature request #1 - color coding different types of events.
soared 5y ago
This is cool. Was thinking it would be weird and creepy but cool if I could sign in with google and fb/insta to get a timeline of everywhere I’ve traveled. Wouldn’t mind that as a wall decoration.
usrme 5y ago
This is really neat! As someone mentioned: a more standardized format of ISO 8601 would be a great and welcome change. I'm not entirely sure whether the current code would support that, but being able to craft a timeline based not only in years, but months, weeks, and perhaps even days and a single day, would also be possible if ISO 8601 was supported. I'm thinking this would be a really simple way to display tasks and people involved in an incident or outage that itself involves many teams, but that would require that higher level of granularity.
Chilko 5y ago
This is awesome! Feature requests: - ISO 8601 dates please, not everyone is in the US - Color coding and/or topic headers so I can break it up into different sections for different types of events - Support for emoji would be awesome, currently they break the site.
blaze33 5y ago
Nice work! It always amazes me how a visual display of the data can show us so much more than the simple text version. "A picture is worth a thousand words" as the saying goes :) I saw other comments talking about ISO 8601, color coded events and one asking for other examples of timelines and it reminded me of the custom timeline I did for my previous personal website in 2017 if you're interested: - Demo (gif): https://twitter.com/maxmre/status/919236332995702785 https://twitter.com/maxmre/status/919236332995702785 (it shows the "fisheye effect" that happens when hovering the timeline with the mouse) - Code: https://github.com/blaze33/openblocv2/blob/master/src/components/timeline.jsx https://github.com/blaze33/openblocv2/blob/master/src/compon..., I used React, D3.js and moment.js. - Live version (surprisingly!) still hosted at https://www.openbloc.fr/home/about https://www.openbloc.fr/home/about, click on the life timeline to expand it, might not totally work on mobile though as I recall, see above tweet in this case for the demo.
markwillis82 5y ago
Pulling the data from a formatted Google sheet would be amazing. I can share that with parents to backfill… I feel a side project coming on

132 points by koch 5y ago

koch 5y ago

Some of you may remember @cheeaun's post[1] 9 years ago about making a timeline of life events. I made a timeline maker based off that. [1] https://news.ycombinator.com/item?id=6833565 https://news.ycombinator.com/item?id=6833565

capableweb 5y ago
This is great! Love the simple syntax that anyone could grasp in just a few seconds. Nice work! Some feature requests: - Be able to resize the "code" pane and the preview - Faster update of the timeline on change - Use a standardized date format, like ISO 8601
- rkagerer 5y ago
  Faster update of the timeline on change I agree. If you're still processing a previous change you can defer subsequent updates (to what I assume is your polling mechanism), but when the event loop is idle the first one should be near-instantaneous.
  - koch 5y ago
    This one is easy enough, I went ahead and cut it down to 400ms from 1000ms. The only reason it isn't instantaneous is because I'm regenerating everything in the iframe each time, as my initial goal was to just take the resultant HTML and paste it as a page on my personal site. If it was part of the same document (not in a frame) it would be a vue component and update automatically/instantly.
cheeaun 5y ago
Hey that's me! Wow it's nice to know that my old post/project is still being mentioned now :D I'm no longer adding features to Life [1]. There were too many feature requests for something that I want to be simple. I'm still updating my own Life events [2] tho' Two questions/notes: 1. You sort of use a striped-down Markdown(?) format, any reason for that? I use Markdown because it's also can be human-readable in some way, even though I don't really use a legit Markdown parser :P 2. Your date range format seems slightly different than mine. Maybe you need to document that somewhere :) [1] https://github.com/cheeaun/life https://github.com/cheeaun/life [2] https://cheeaun.life/ https://cheeaun.life/
swyx 5y ago
so cool.. what got you to make something based off a 9 year old post?!

parhamn 5y ago

Very cool! I've been thinking a lot about how to do this in a good cross platform way for tab history on a browser I've been building (https://synth.app https://synth.app). I think a major issue is that pinching is very necessary to change the time scale if the horizontal axis is long enough (and it will be for browsing history), but pinch support outside the MacOS/iOS is sketchy at best. I haven't yet discovered the useful UX here. This was inspired by https://refresh.study https://refresh.study (see: Browsing History section) which has a good mock of what it can look like. If anyone has any other examples, I'd love to see it.

johnnyballgame 5y ago

Very cool and well done! Feature request #1 - color coding different types of events.

soared 5y ago

This is cool. Was thinking it would be weird and creepy but cool if I could sign in with google and fb/insta to get a timeline of everywhere I’ve traveled. Wouldn’t mind that as a wall decoration.

usrme 5y ago

This is really neat! As someone mentioned: a more standardized format of ISO 8601 would be a great and welcome change. I'm not entirely sure whether the current code would support that, but being able to craft a timeline based not only in years, but months, weeks, and perhaps even days and a single day, would also be possible if ISO 8601 was supported. I'm thinking this would be a really simple way to display tasks and people involved in an incident or outage that itself involves many teams, but that would require that higher level of granularity.

Chilko 5y ago

This is awesome! Feature requests: - ISO 8601 dates please, not everyone is in the US - Color coding and/or topic headers so I can break it up into different sections for different types of events - Support for emoji would be awesome, currently they break the site.

blaze33 5y ago

Nice work! It always amazes me how a visual display of the data can show us so much more than the simple text version. "A picture is worth a thousand words" as the saying goes :) I saw other comments talking about ISO 8601, color coded events and one asking for other examples of timelines and it reminded me of the custom timeline I did for my previous personal website in 2017 if you're interested: - Demo (gif): https://twitter.com/maxmre/status/919236332995702785 https://twitter.com/maxmre/status/919236332995702785 (it shows the "fisheye effect" that happens when hovering the timeline with the mouse) - Code: https://github.com/blaze33/openblocv2/blob/master/src/components/timeline.jsx https://github.com/blaze33/openblocv2/blob/master/src/compon..., I used React, D3.js and moment.js. - Live version (surprisingly!) still hosted at https://www.openbloc.fr/home/about https://www.openbloc.fr/home/about, click on the life timeline to expand it, might not totally work on mobile though as I recall, see above tweet in this case for the demo.

markwillis82 5y ago

Pulling the data from a formatted Google sheet would be amazing. I can share that with parents to backfill… I feel a side project coming on